/*====================================================
FAQ PAGE
PART-1
Hero + Search Section
====================================================*/

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

.faq-hero{

    position:relative;

    overflow:hidden;

}

.faq-hero .breadcrumb{

    font-size:15px;

}

.faq-hero .breadcrumb-item a{

    color:var(--body);

    font-weight:500;

}

.faq-hero .breadcrumb-item.active{

    color:var(--primary-dark);

    font-weight:700;

}

.faq-hero .section-description{

    max-width:620px;

    margin:0;

}

.faq-hero .image-box{

    background:#ffffff;

    padding:30px;

    border-radius:var(--radius-xl);

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

}

.faq-hero .image-box img{

    transition:.5s;

}

.faq-hero .image-box:hover img{

    transform:translateY(-8px);

}

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

.faq-search-section{

    background:#ffffff;

    position:relative;

}

/*----------------------------------
Search Box
-----------------------------------*/

.faq-search-box{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px;

    border-radius:var(--radius-xl);

}

.faq-search-icon{

    width:60px;

    height:60px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#fff;

    font-size:22px;

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

}

.faq-search-box .form-control{

    border:none;

    background:transparent;

    box-shadow:none;

    font-size:17px;

    height:60px;

    padding:0;

}

.faq-search-box .form-control:focus{

    box-shadow:none;

}

.faq-search-box .btn-primary-custom{

    flex-shrink:0;

}

/*----------------------------------
Popular Tags
-----------------------------------*/

.faq-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin:6px;

    padding:11px 22px;

    border:none;

    border-radius:999px;

    background:#fff6ee;

    color:var(--primary-dark);

    font-size:14px;

    font-weight:600;

    transition:var(--transition);

}

.faq-tag:hover{

    background:var(--gradient-primary);

    color:#ffffff;

    transform:translateY(-3px);

}

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

@media(max-width:991px){

    .faq-hero{

        text-align:center;

    }

    .faq-hero .section-description{

        margin:auto;

    }

    .faq-hero .image-box{

        margin-top:40px;

    }

    .faq-search-box{

        flex-direction:column;

        align-items:stretch;

    }

    .faq-search-icon{

        margin:auto;

    }

    .faq-search-box .btn-primary-custom{

        width:100%;

    }

}

@media(max-width:767px){

    .faq-hero .image-box{

        padding:20px;

    }

    .faq-search-box{

        padding:20px;

        border-radius:24px;

    }

    .faq-search-icon{

        width:54px;

        height:54px;

        font-size:20px;

    }

    .faq-search-box .form-control{

        text-align:center;

        font-size:16px;

    }

}

/*====================================================
FAQ PAGE
PART-2
Categories + Statistics
====================================================*/


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

.faq-category-section{

    position:relative;

    overflow:hidden;

    background:var(--gradient-light);

}

.faq-category-section::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    left:-150px;

    top:-150px;

    border-radius:50%;

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

}

.faq-category-section::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    right:-120px;

    bottom:-120px;

    border-radius:50%;

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

}


/*----------------------------------
Category Card
-----------------------------------*/

.faq-category-card{

    cursor:pointer;

    text-align:center;

    overflow:hidden;

}

.faq-category-card .icon-box{

    margin:0 auto 24px;

}

.faq-category-card h4{

    margin-bottom:14px;

    font-size:24px;

    font-weight:700;

    color:var(--dark);

}

.faq-category-card p{

    margin:0;

    color:var(--body);

    font-size:15px;

    line-height:1.8;

}


/* Gradient Hover */

.faq-category-card:hover{

    background:var(--gradient-primary);

    border-color:transparent;

}

.faq-category-card:hover h4,

.faq-category-card:hover p{

    color:#ffffff;

}

.faq-category-card:hover .icon-box{

    background:#ffffff;

    color:var(--primary-dark);

    transform:rotate(-8deg) scale(1.08);

}



/*====================================================
STATISTICS
====================================================*/

.faq-search-section .stats-card{

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

}

.faq-search-section .stats-card h2{

    margin-top:22px;

    margin-bottom:8px;

}

.faq-search-section .stats-card p{

    color:var(--body);

}


/*----------------------------------
Hover
-----------------------------------*/

.faq-search-section .stats-card:hover{

    background:var(--gradient-primary);

    border-color:transparent;

}

.faq-search-section .stats-card:hover h2,

.faq-search-section .stats-card:hover p{

    color:#ffffff;

}

.faq-search-section .stats-card:hover .icon-box{

    background:#ffffff;

    color:var(--primary-dark);

}


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

.faq-category-card.active{

    background:var(--gradient-primary);

    border-color:transparent;

}

.faq-category-card.active h4,

.faq-category-card.active p{

    color:#ffffff;

}

.faq-category-card.active .icon-box{

    background:#ffffff;

    color:var(--primary-dark);

}


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

@media(max-width:991px){

    .faq-category-card{

        padding:30px;

    }

}


@media(max-width:767px){

    .faq-category-card{

        padding:24px;

    }

    .faq-category-card h4{

        font-size:21px;

    }

    .faq-category-card .icon-box{

        margin-bottom:20px;

    }

}

/*====================================================
FAQ PAGE
PART-3
Premium Accordion
====================================================*/

/*====================================================
Accordion Section
====================================================*/

.faq-accordion-section{

    position:relative;

    overflow:hidden;

    background:#ffffff;

}

/*----------------------------------
Accordion Container
-----------------------------------*/

.faq-accordion{

    max-width:950px;

    margin:auto;

}

/*----------------------------------
Accordion Item
-----------------------------------*/

.faq-item{

    border:none;

    overflow:hidden;

    margin-bottom:22px;

    border-radius:24px !important;

    background:#ffffff;

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

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

    transition:var(--transition);

}

.faq-item:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}

/*----------------------------------
Button
-----------------------------------*/

.faq-item .accordion-button{

    display:flex;

    align-items:center;

    gap:18px;

    padding:28px;

    background:#ffffff;

    color:var(--dark);

    font-size:20px;

    font-weight:700;

    box-shadow:none;

}

/* Active */

.faq-item .accordion-button:not(.collapsed){

    background:#fff8f1;

    color:var(--dark);

    border-left:5px solid var(--primary);

}

/*----------------------------------
Remove Bootstrap Icon
-----------------------------------*/

.faq-item .accordion-button::after{

    display:none;

}

/*----------------------------------
Number
-----------------------------------*/

.faq-number{

    width:52px;

    height:52px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#ffffff;

    font-size:16px;

    font-weight:700;

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

}

/*----------------------------------
Question
-----------------------------------*/

.faq-question{

    flex:1;

    padding-right:20px;

}

/*----------------------------------
Custom Plus / Minus
-----------------------------------*/

.faq-item .accordion-button{

    position:relative;

}

.faq-item .accordion-button::before{

    content:"+";

    position:absolute;

    right:28px;

    width:34px;

    height:34px;

    border-radius:50%;

    background:#fff4ea;

    color:var(--primary-dark);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

    transition:var(--transition);

}

.faq-item .accordion-button:not(.collapsed)::before{

    content:"−";

    background:var(--gradient-primary);

    color:#ffffff;

    transform:rotate(180deg);

}

/*----------------------------------
Body
-----------------------------------*/

.faq-item .accordion-body{

    padding:10px 28px 28px 98px;

    color:var(--body);

    font-size:16px;

    line-height:1.9;

}

/*----------------------------------
Coming Soon Card
-----------------------------------*/

.faq-accordion-section .card-custom{

    max-width:700px;

    margin:auto;

    text-align:center;

}

.faq-accordion-section .card-custom .icon-box{

    margin:0 auto 25px;

}

/*----------------------------------
Search Highlight Ready
-----------------------------------*/

mark{

    padding:2px 5px;

    border-radius:6px;

    background:#fff1d6;

    color:#d97706;

}

/*====================================================
Responsive
====================================================*/

@media(max-width:991px){

    .faq-item .accordion-button{

        font-size:18px;

        padding:24px;

    }

    .faq-item .accordion-body{

        padding:0 24px 24px 82px;

    }

}

@media(max-width:767px){

    .faq-item{

        border-radius:20px !important;

    }

    .faq-item .accordion-button{

        padding:20px;

        font-size:16px;

        gap:15px;

    }

    .faq-number{

        width:44px;

        height:44px;

        font-size:14px;

    }

    .faq-item .accordion-body{

        padding:0 20px 20px 65px;

        font-size:15px;

    }

    .faq-item .accordion-button::before{

        right:20px;

        width:30px;

        height:30px;

        font-size:20px;

    }

}

/*====================================================
FAQ PAGE
PART-4
CTA + Final Polish
====================================================*/


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

.faq-cta-section{

    position:relative;

    overflow:hidden;

    background:var(--gradient-light);

}


/*----------------------------------
CTA BOX
-----------------------------------*/

.faq-cta-box{

    position:relative;

    overflow:hidden;

    padding:70px;

    border-radius:36px;

    background:var(--gradient-primary);

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

}


/*----------------------------------
Heading
-----------------------------------*/

.faq-cta-box .section-title{

    color:#ffffff;

    margin-bottom:22px;

}

.faq-cta-box .section-title span{

    color:#ffffff;

    background:none;

    -webkit-text-fill-color:#ffffff;

}


/*----------------------------------
Paragraph
-----------------------------------*/

.faq-cta-box p{

    max-width:700px;

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

    font-size:17px;

    line-height:1.9;

}


/*----------------------------------
Buttons
-----------------------------------*/

.faq-cta-box .btn-white-custom{

    min-width:220px;

}

.faq-cta-box .btn-outline-light-custom{

    min-width:220px;

}


/*----------------------------------
Illustration
-----------------------------------*/

.faq-cta-image{

    text-align:center;

}

.faq-cta-image img{

    max-width:100%;

    transition:.45s ease;
    border-radius:10px;

}

.faq-cta-image:hover img{

    transform:translateY(-8px);

}


/*----------------------------------
Floating Circles
-----------------------------------*/

.faq-cta-box .circle{

    opacity:.45;

}


/*----------------------------------
Hover
-----------------------------------*/

.faq-cta-box .btn-white-custom:hover{

    transform:translateY(-4px);

}

.faq-cta-box .btn-outline-light-custom:hover{

    transform:translateY(-4px);

}


/*====================================================
EMPTY SEARCH
(Future JS Ready)
====================================================*/

.faq-empty{

    display:none;

    max-width:700px;

    margin:60px auto 0;

    text-align:center;

}

.faq-empty .icon-box{

    margin:0 auto 25px;

}

.faq-empty h3{

    margin-bottom:15px;

}

.faq-empty p{

    margin:0;

}


/*====================================================
SMOOTH FILTER
====================================================*/

.faq-item{

    transition:

        opacity .30s ease,

        transform .30s ease;

}

.faq-item.hide{

    display:none;

}

.faq-category-card{

    transition:all .35s ease;

}


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

@media(max-width:991px){

    .faq-cta-box{

        padding:50px 35px;

        text-align:center;

    }

    .faq-cta-image{

        margin-top:40px;

    }

    .faq-cta-box .d-flex{

        justify-content:center;

    }

}


@media(max-width:767px){

    .faq-cta-section{

        padding:70px 0;

    }

    .faq-cta-box{

        padding:35px 24px;

        border-radius:24px;

    }

    .faq-cta-box .section-title{

        font-size:30px;

    }

    .faq-cta-box p{

        font-size:16px;

    }

    .faq-cta-box .d-flex{

        flex-direction:column;

    }

    .faq-cta-box .btn-white-custom,

    .faq-cta-box .btn-outline-light-custom{

        width:100%;

    }

}

.faq-cta-section.section-padding-sm .section-title, .faq-hero.section-wrapper.section-padding .section-title{
    text-align: left;
}