/* ==========================================
   FAQ PAGE
   ========================================== */

.faq-page{
    font-family:'Poppins',sans-serif;
    background:#F6F8FC;
    min-height:100vh;
    padding-bottom:80px;
}

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

.faq-page .faq-hero{
    padding:80px 0 60px;
}

.faq-page .hero-content{
    max-width:900px;
    margin:auto;
}

.faq-page .faq-hero h1{
    font-size:58px;
    font-weight:700;
    color:#0B4F86;
    margin-bottom:18px;
    line-height:1.2;
}

.faq-page .faq-hero p{
    width:680px;
    margin:auto;
    color:#6B7280;
    font-size:20px;
    line-height:34px;
}

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

.faq-page .faq-search{

    width:760px;
    height:72px;

    background:#fff;

    margin:45px auto 0;

    border-radius:50px;

    display:flex;
    align-items:center;

    padding:0 12px 0 24px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.faq-page .search-icon{

    width:40px;

    display:flex;
    justify-content:center;

}

.faq-page .search-icon i{

    color:#A3A8B3;
    font-size:20px;

}

.faq-page .faq-search input{

    flex:1;

    border:none;
    outline:none;
    background:none;

    font-size:16px;
    color:#1E293B;

}

.faq-page .faq-search input::placeholder{

    color:#9AA3AF;

}

.faq-page .faq-search button{

    width:135px;
    height:50px;

    border:none;

    border-radius:30px;

    background:#0B4F86;

    color:#fff;

    font-size:16px;
    font-weight:600;

    transition:.3s;

}

.faq-page .faq-search button:hover{

    background:#083A63;

}

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

.faq-page .faq-content{

    padding-top:10px;

}

.faq-page .faq-content .row{

    row-gap:30px;

}

/* ==========================================
   SIDEBAR
   ========================================== */

.faq-page .faq-sidebar{

    background:#EEF3FB;

    border-radius:22px;

    padding:28px;

    border:1px solid #D8E2F0;

}

.faq-page .faq-sidebar h4{

    font-size:22px;

    font-weight:700;

    color:#173F6A;

    margin-bottom:25px;

}

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

.faq-page .faq-category{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px;

    border-radius:14px;

    margin-bottom:14px;

    cursor:pointer;

    transition:.3s;

    color:#5B6572;

    font-weight:600;

    font-size:15px;

}

.faq-page .faq-category i{

    font-size:22px;

    width:28px;

    text-align:center;

}

.faq-page .faq-category:hover{

    background:#FFFFFF;

    color:#0B4F86;

}

.faq-page .faq-category.active{

    background:#0B4F86;

    color:#fff;

}

.faq-page .faq-category.active i{

    color:#fff;

}

/* ==========================================
   FAQ BLOCK
   ========================================== */

.faq-page .faq-block{

    margin-bottom:55px;

}

/* ==========================================
   HEADING
   ========================================== */

.faq-page .faq-heading{

    display:flex;

    align-items:center;

    margin-bottom:25px;

}

.faq-page .faq-heading h2{

    font-size:34px;

    font-weight:700;

    color:#0B4F86;

    margin:0;

}

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

.faq-page .heading-icon{

    width:52px;

    height:52px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-right:18px;

}

.faq-page .heading-icon i{

    font-size:22px;

}

.faq-page .heading-icon.blue{

    background:#0B4F86;

    color:#fff;

}

.faq-page .heading-icon.yellow{

    background:#FFC940;

    color:#fff;

}

.faq-page .heading-icon.light{

    background:#DDEBFF;

    color:#0B4F86;

}

/* ==========================================
   SUPPORT CARD
========================================== */

.faq-page .support-card{

    margin-top:28px;

    height:240px;

    border-radius:22px;

    overflow:hidden;

    position:relative;

    background:url("../images/roadside.jpg") center center;

    background-size:cover;

    background-repeat:no-repeat;

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

}

.faq-page .support-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(0,0,0,.15),
        rgba(0,0,0,.55)
    );

}

.faq-page .support-overlay{

    position:absolute;

    left:24px;

    right:24px;

    bottom:24px;

    z-index:2;

    color:#fff;

}

.faq-page .support-overlay h3{

    font-size:30px;

    font-weight:700;

    line-height:40px;

    margin-bottom:10px;

}

.faq-page .support-overlay p{

    margin:0;

    font-size:15px;

    opacity:.95;

}

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

.faq-page .custom-accordion{

    margin-top:20px;

}

.faq-page .custom-accordion .accordion-item{

    border:none;

    border-radius:18px;

    overflow:hidden;

    margin-bottom:18px;

    background:#fff;

    box-shadow:0 4px 18px rgba(0,0,0,.06);

}

.faq-page .custom-accordion .accordion-header{

    border:none;

}

.faq-page .custom-accordion .accordion-button{

    background:#fff;

    min-height:74px;

    padding:22px 28px;

    font-size:17px;

    font-weight:600;

    color:#22334D;

    box-shadow:none;

}

.faq-page .custom-accordion .accordion-button:focus{

    box-shadow:none;

    border:none;

}

.faq-page .custom-accordion .accordion-button:not(.collapsed){

    background:#fff;

    color:#0B4F86;

    box-shadow:none;

}

.faq-page .custom-accordion .accordion-button::after{

    width:18px;

    height:18px;

    background-size:18px;

}

.faq-page .custom-accordion .accordion-body{

    padding:0 28px 24px;

    font-size:15px;

    line-height:30px;

    color:#6B7280;

    border-top:1px solid #EEF2F7;

}

/* ==========================================
   HOVER
========================================== */

.faq-page .custom-accordion .accordion-item{

    transition:.3s;

}

.faq-page .custom-accordion .accordion-item:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 28px rgba(0,0,0,.08);

}

/* ==========================================
   FLOATING CHAT
========================================== */

.faq-page .faq-chat{

    position:fixed;

    right:30px;

    bottom:30px;

    width:64px;

    height:64px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    text-decoration:none;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

    transition:.3s;

    z-index:9999;

}

.faq-page .faq-chat:hover{

    color:#fff;

    transform:translateY(-5px);

    background:#1EBE5D;

}

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

.faq-page .faq-block{

    animation:fadeUp .5s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

/* Laptop */

@media (max-width:1200px){

    .faq-page .faq-search{

        width:100%;

        max-width:720px;

    }

    .faq-page .faq-hero h1{

        font-size:48px;

    }

    .faq-page .faq-heading h2{

        font-size:30px;

    }

}


/* Tablet */

@media (max-width:991px){

    .faq-page .faq-hero{

        padding:60px 0 40px;

    }

    .faq-page .faq-hero h1{

        font-size:42px;

    }

    .faq-page .faq-hero p{

        width:100%;

        font-size:17px;

        line-height:30px;

    }

    .faq-page .faq-search{

        width:100%;

        height:65px;

    }

    .faq-page .faq-sidebar{

        margin-bottom:30px;

    }

    .faq-page .support-card{

        height:220px;

    }

    .faq-page .faq-heading h2{

        font-size:28px;

    }

}


/* Mobile */

@media (max-width:768px){

    .faq-page{

        padding-bottom:60px;

    }

    .faq-page .faq-hero{

        padding:45px 0 30px;

    }

    .faq-page .faq-hero h1{

        font-size:34px;

        line-height:46px;

    }

    .faq-page .faq-hero p{

        font-size:15px;

        line-height:28px;

        padding:0 10px;

    }

    .faq-page .faq-search{

        flex-direction:column;

        height:auto;

        border-radius:20px;

        padding:15px;

        gap:15px;

    }

    .faq-page .search-icon{

        display:none;

    }

    .faq-page .faq-search input{

        width:100%;

        height:45px;

        border:1px solid #E5E7EB;

        border-radius:10px;

        padding:0 15px;

    }

    .faq-page .faq-search button{

        width:100%;

        height:46px;

        border-radius:10px;

    }

    .faq-page .faq-sidebar{

        padding:20px;

    }

    .faq-page .faq-sidebar h4{

        font-size:20px;

    }

    .faq-page .faq-category{

        padding:14px;

        font-size:14px;

    }

    .faq-page .faq-category i{

        font-size:18px;

    }

    .faq-page .faq-heading{

        align-items:flex-start;

    }

    .faq-page .heading-icon{

        width:44px;

        height:44px;

        margin-right:12px;

    }

    .faq-page .heading-icon i{

        font-size:18px;

    }

    .faq-page .faq-heading h2{

        font-size:22px;

        line-height:30px;

    }

    .faq-page .custom-accordion .accordion-button{

        padding:18px;

        font-size:15px;

        line-height:26px;

    }

    .faq-page .custom-accordion .accordion-body{

        padding:0 18px 20px;

        font-size:14px;

        line-height:26px;

    }

    .faq-page .support-card{

        height:200px;

    }

    .faq-page .support-overlay{

        left:18px;

        right:18px;

        bottom:18px;

    }

    .faq-page .support-overlay h3{

        font-size:24px;

        line-height:32px;

    }

    .faq-page .faq-chat{

        width:56px;

        height:56px;

        right:18px;

        bottom:18px;

        font-size:22px;

    }

}


/* Small Mobile */

@media (max-width:576px){

    .faq-page .faq-hero h1{

        font-size:28px;

        line-height:38px;

    }

    .faq-page .faq-heading h2{

        font-size:20px;

    }

    .faq-page .support-card{

        height:180px;

    }

}