:root{

    --primary-color:#2c5282;
    --primary-light:#ebf8ff;

    --accent-color:#3182ce;

    --text-color:#2d3748;

    --bg-color:#f7fafc;

    --white:#ffffff;

    --border:#e2e8f0;

    --transition:all .3s ease;
}

/* ==================================
   RESET
================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    Inter,
    "Segoe UI",
    sans-serif;

    background:var(--bg-color);

    color:var(--text-color);

    line-height:1.6;
}

.container{

    width:90%;

    max-width:1200px;

    margin:auto;
}

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

.faq-hero{

    background:
    linear-gradient(
        145deg,
        #ffffff,
        var(--primary-light)
    );

    text-align:center;

    padding:5rem 0 4rem;

    border-bottom:1px solid #e2e8f0;
}

.hero-badge{

    display:inline-block;

    background:var(--primary-color);

    color:white;

    padding:.4rem .9rem;

    border-radius:999px;

    text-transform:uppercase;

    font-size:.75rem;

    font-weight:700;

    margin-bottom:1rem;
}

.faq-hero h1{

    color:var(--primary-color);

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

    margin-bottom:1rem;
}

.faq-hero p{

    max-width:700px;

    margin:auto;

    color:#4a5568;

    font-size:1.1rem;
}

.faq-counter{

    margin-top:1rem;

    color:#64748b;

    font-weight:600;
}

/* ==================================
   SEARCH
================================== */

.faq-search-wrapper{

    margin-top:-25px;

    margin-bottom:2rem;
}

.faq-search-box{

    background:white;

    border-radius:16px;

    border:1px solid var(--border);

    max-width:750px;

    margin:auto;

    display:flex;

    align-items:center;

    gap:1rem;

    padding:1rem 1.25rem;

    box-shadow:
    0 12px 30px rgba(0,0,0,.03);
}

.faq-search-box i{

    color:#94a3b8;
}

.faq-search-box input{

    width:100%;

    border:none;

    outline:none;

    background:none;

    font-family:inherit;

    font-size:1rem;
}

/* ==================================
   TABS
================================== */

.faq-tabs-section{

    margin-bottom:3rem;
}

.faq-tabs{

    display:flex;

    justify-content:center;

    gap:.75rem;

    flex-wrap:wrap;
}

.faq-tab{

    border:1px solid var(--border);

    background:white;

    padding:.8rem 1.1rem;

    border-radius:999px;

    cursor:pointer;

    font-family:inherit;

    font-weight:600;

    transition:var(--transition);
}

.faq-tab:hover{

    border-color:var(--accent-color);
}

.faq-tab.active{

    background:var(--primary-color);

    border-color:var(--primary-color);

    color:white;
}

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

.faq-content{

    padding-bottom:5rem;
}

.faq-category{

    display:none;

    max-width:900px;

    margin:auto;

    animation:
    fadeIn .25s ease;
}

.faq-category.active{

    display:block;
}

.faq-category-header{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:2rem;
}

.faq-category-header i{

    color:var(--primary-color);

    font-size:1.8rem;
}

.faq-category-header h2{

    color:var(--primary-color);
}

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

.faq-item{

    background:white;

    border:1px solid #edf2f7;

    border-radius:12px;

    overflow:hidden;

    margin-bottom:1rem;
}

.faq-question{

    width:100%;

    border:none;

    background:white;

    text-align:left;

    cursor:pointer;

    padding:1.3rem 1.5rem;

    font-size:1rem;

    font-weight:600;

    color:var(--text-color);

    transition:var(--transition);
}

.faq-question:hover{

    color:var(--accent-color);
}

.faq-answer{

    max-height:0;

    overflow:hidden;

    padding:0 1.5rem;

    color:#4a5568;

    transition:
    max-height .3s ease,
    padding .3s ease;
}

.faq-item.open .faq-answer{

    max-height:500px;

    padding:
    0 1.5rem 1.5rem;
}

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

.faq-cta{

    background:white;

    text-align:center;

    padding:5rem 0;
}

.faq-cta h2{

    color:var(--primary-color);

    margin-bottom:.75rem;
}

.faq-cta p{

    color:#64748b;

    margin-bottom:2rem;
}

.faq-actions{

    display:flex;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;
}

.primary-btn{

    text-decoration:none;

    background:var(--primary-color);

    color:white;

    padding:1rem 2rem;

    border-radius:8px;

    font-weight:700;
}

.secondary-btn{

    text-decoration:none;

    border:2px solid var(--primary-color);

    color:var(--primary-color);

    padding:1rem 2rem;

    border-radius:8px;

    font-weight:700;
}

/* ==================================
   FOOTER
================================== */

footer{

    background:#0f172a;

    color:white;

    text-align:center;

    padding:2rem;
}

/* ==================================
   ANIMATION
================================== */

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:none;
    }

}

/* ==================================
   MOBILE
================================== */

@media(max-width:768px){

    .faq-search-box{

        margin:0 1rem;
    }

    .faq-category{

        padding:0 1rem;
    }

    .faq-question{

        padding:1rem;
    }

}