/* ==========================================================
   FAQ.CSS
   Rising Sons Africa
========================================================== */


/* ==========================================================
   HERO
========================================================== */

.faq-hero{

    position:relative;

    min-height:55vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:#ffffff;

    overflow:hidden;

    background:
        linear-gradient(
            rgba(8,15,35,.78),
            rgba(15,23,42,.82)
        ),
        url("/static/images/branding/faq.jpg")
        center/cover no-repeat;

}

.faq-hero .container{

    max-width:850px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

    padding:.75rem 1.6rem;

    border-radius:50px;

    margin-bottom:1.5rem;

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

    backdrop-filter:blur(12px);

    font-weight:600;

    letter-spacing:.5px;

}

.faq-hero h1{

    margin-bottom:1rem;

    font-size:clamp(2.6rem,5vw,4rem);

}

.faq-hero p{

    max-width:760px;

    margin:auto;

    line-height:1.9;

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

}


/* ==========================================================
   GENERAL
========================================================== */

.section{

    padding:5rem 0;

}

.section-header{

    max-width:760px;

    margin:0 auto 4rem;

    text-align:center;

}

.section-header h2{

    margin-bottom:1rem;

}

.section-header p{

    color:#64748b;

    line-height:1.9;

}


/* ==========================================================
   CATEGORY
========================================================== */

.faq-category{

    margin-bottom:5rem;

}

.faq-category:last-child{

    margin-bottom:0;

}

.category-header{

    margin-bottom:2.5rem;

    text-align:center;

}

.category-header h2{

    display:inline-block;

    position:relative;

    padding-bottom:1rem;

    font-size:2rem;

    color:#0f172a;

}

.category-header h2::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:80px;

    height:4px;

    border-radius:50px;

    background:var(--primary);

}


/* ==========================================================
   ACCORDION
========================================================== */

.faq-accordion{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.faq-item{

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 28px rgba(15,23,42,.05);

    transition:.3s;

}

.faq-item:hover{

    transform:translateY(-2px);

    box-shadow:0 18px 40px rgba(15,23,42,.08);

}

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

    padding:1.5rem 2rem;

    border:none;

    background:#ffffff;

    cursor:pointer;

    text-align:left;

    font-size:1rem;

    font-weight:600;

    color:#0f172a;

    transition:.3s;

}

.faq-question:hover{

    color:var(--primary);

}

.faq-question span{

    flex:1;

}

.faq-question i{

    color:var(--primary);

    font-size:1rem;

    transition:.35s;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

}

.faq-answer-content{

    padding:0 2rem 2rem;

}

.faq-answer-content p{

    margin:0;

    color:#64748b;

    line-height:1.9;

}

.faq-item.active .faq-answer{

    max-height:700px;

}

.faq-item.active .faq-question{

    background:#f8fafc;

}

.faq-item.active .faq-question i{

    transform:rotate(45deg);

}


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

.faq-cta{

    padding:6rem 0;

    text-align:center;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #1e3a8a,
            #0f172a
        );

}

.faq-cta h2{

    margin-bottom:1rem;

}

.faq-cta p{

    max-width:720px;

    margin:0 auto 2rem;

    line-height:1.9;

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

}


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

@media(max-width:768px){

    .faq-hero{

        min-height:45vh;

        padding:4rem 0;

    }

    .faq-hero h1{

        font-size:2.3rem;

    }

    .section{

        padding:4rem 0;

    }

    .category-header h2{

        font-size:1.6rem;

    }

    .faq-question{

        padding:1.25rem;

        font-size:.95rem;

    }

    .faq-answer-content{

        padding:0 1.25rem 1.5rem;

    }

}