/*=========================================================
    HP-EXAM-PRO
    SECTIONS.CSS
==========================================================*/

/*==================================================
    SECTION
==================================================*/

.section{
    position:relative;
    padding:var(--section-padding) 0;
}

.section-sm{
    padding:60px 0;
}

.section-lg{
    padding:140px 0;
}

/*==================================================
    SECTION HEADER
==================================================*/

.section-header{
    max-width:720px;
    margin:0 auto 60px;
    text-align:center;
}

.section-subtitle{
    display:inline-block;
    padding:.5rem 1rem;
    margin-bottom:1rem;

    background:rgba(13,110,253,.1);

    color:var(--primary);

    font-size:.85rem;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    border-radius:50px;
}

.section-title{

    margin-bottom:1rem;

    font-weight:700;

}

.section-description{

    max-width:650px;

    margin:auto;

    color:var(--gray-600);

}

/*==================================================
    PAGE HEADER
==================================================*/

.page-header{

    position:relative;

    padding:120px 0 80px;

    color:#fff;

    text-align:center;

    background:linear-gradient(135deg,#0d6efd,#0048b3);

}

.page-header::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.15);

}

.page-header .container{

    position:relative;

    z-index:2;

}

.page-header h1{

    color:#fff;

    margin-bottom:1rem;

}

.page-header p{

    color:rgba(255,255,255,.85);

}

/*==================================================
    BREADCRUMB
==================================================*/

.breadcrumb{

    justify-content:center;

    margin-top:1rem;

}

.breadcrumb-item a{

    color:#fff;

}

.breadcrumb-item.active{

    color:rgba(255,255,255,.8);

}

/*==================================================
    FEATURE SECTION
==================================================*/

.feature-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

/*==================================================
    STATS
==================================================*/

.stats-section{

    background:var(--primary);

    color:#fff;

}

.stats-item{

    text-align:center;

    padding:2rem 1rem;

}

.stats-item h2{

    color:#fff;

    margin-bottom:.5rem;

    font-size:3rem;

}

.stats-item p{

    color:rgba(255,255,255,.85);

    margin:0;

}

/*==================================================
    CTA
==================================================*/

.cta-section{

    background:linear-gradient(135deg,#0d6efd,#0048b3);

    color:#fff;

    text-align:center;

}

.cta-section h2{

    color:#fff;

}

.cta-section p{

    color:rgba(255,255,255,.9);

    max-width:700px;

    margin:1rem auto 2rem;

}

/*==================================================
    LOGO / PARTNERS
==================================================*/

.partner-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:30px;

    align-items:center;

}

.partner-item{

    text-align:center;

    opacity:.7;

    transition:var(--transition);

}

.partner-item:hover{

    opacity:1;

    transform:translateY(-4px);

}

.partner-item img{

    max-height:60px;

    margin:auto;

}

/*==================================================
    TIMELINE
==================================================*/

.timeline{

    position:relative;

    padding-left:35px;

}

.timeline::before{

    content:"";

    position:absolute;

    top:0;

    left:12px;

    width:2px;

    height:100%;

    background:var(--primary);

}

.timeline-item{

    position:relative;

    margin-bottom:40px;

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:-29px;

    top:6px;

    width:16px;

    height:16px;

    border-radius:50%;

    background:var(--primary);

}

/*==================================================
    CONTENT
==================================================*/

.content-box{

    padding:2rem;

}

.content-box h3{

    margin-bottom:1rem;

}

.content-box p:last-child{

    margin-bottom:0;

}

/*==================================================
    ICON BOX
==================================================*/

.icon-box{

    display:flex;

    gap:20px;

    align-items:flex-start;

}

.icon-box-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(13,110,253,.1);

    color:var(--primary);

    font-size:1.8rem;

    flex-shrink:0;

}

.icon-box-content h4{

    margin-bottom:.75rem;

}

/*==================================================
    VIDEO SECTION
==================================================*/

.video-wrapper{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius);

}

.video-wrapper img{

    width:100%;

}

.video-play{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    color:var(--primary);

    border-radius:50%;

    font-size:2rem;

    box-shadow:var(--shadow-lg);

}



/*=========================================
NEWSLETTER
=========================================*/

.newsletter-section{

    background:linear-gradient(135deg,#2563EB,#1D4ED8);

    padding:90px 0;

    position:relative;

    overflow:hidden;

}

.newsletter-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

    right:-150px;

    top:-120px;

}

.newsletter-section::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    left:-120px;

    bottom:-120px;

}

.newsletter-section .container{

    position:relative;

    z-index:2;

}
/*==================================================
    FAQ
==================================================*/

.faq-section .accordion-item{

    margin-bottom:1rem;

    border:none;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

}

/*==================================================
    RESPONSIVE
==================================================*/

@media(max-width:992px){

    .feature-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .partner-grid{

        grid-template-columns:repeat(3,1fr);

    }

}

@media(max-width:768px){

    .feature-grid,

    .partner-grid{

        grid-template-columns:1fr;

    }

    .newsletter-box form{

        flex-direction:column;

    }

    .page-header{

        padding:90px 0 60px;

    }

}

@media(max-width:576px){

    .section{

        padding:70px 0;

    }

    .section-header{

        margin-bottom:40px;

    }

    .stats-item h2{

        font-size:2.2rem;

    }

}