/*=========================================================
    NOVACARE FAQ PAGE
    PART 3A-1
    Hero + Search + Categories + FAQ Cards
=========================================================*/

:root {

    --faq-bg: #0A2B1D;

    --faq-card: rgba(255, 255, 255, .08);

    --faq-border: rgba(255, 255, 255, .12);

    --faq-border-hover: rgba(255, 204, 0, .45);

    --faq-gold: #B88A44;

    --faq-white: #ffffff;

    --faq-muted: rgba(255, 255, 255, .72);

    --faq-shadow: 0 20px 60px rgba(0, 0, 0, .28);

    --faq-radius: 22px;

    --faq-transition: .35s cubic-bezier(.4, 0, .2, 1);

}



/*=========================================================
Breadcrumb
=========================================================*/

.faq-breadcrumb {

    background: #082318;

    padding: 18px 0;

    border-bottom: 1px solid rgba(255, 255, 255, .05);

}

.faq-breadcrumb .breadcrumb {

    margin: 0;

    background: none;

}

.faq-breadcrumb .breadcrumb-item {

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

    font-size: .92rem;

}

.faq-breadcrumb .breadcrumb-item a {

    color: var(--faq-gold);

    text-decoration: none;

    transition: var(--faq-transition);

}

.faq-breadcrumb .breadcrumb-item a:hover {

    color: #fff;

}

.faq-breadcrumb .breadcrumb-item+.breadcrumb-item::before {

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

}



/*=========================================================
Hero
=========================================================*/

.faq-hero {

    position: relative;

    overflow: hidden;

    padding: 90px 0 70px;

    background:

        linear-gradient(rgba(10, 43, 29, .88),

            rgba(10, 43, 29, .92)),

        url("../images/faq-bg.jpg");

    background-size: cover;

    background-position: center;

}

.faq-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at top right,

            rgba(255, 204, 0, .12),

            transparent 40%);

    pointer-events: none;

}

.faq-title {

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

    font-weight: 800;

    color: #fff;

    line-height: 1.15;

    margin-bottom: 22px;

}

.faq-title span {

    color: var(--faq-gold);

}

.faq-subtitle {

    color: var(--faq-muted);

    font-size: 1.08rem;

    max-width: 760px;

    margin: auto;

    line-height: 1.9;

}



/*=========================================================
Search
=========================================================*/

.faq-search-wrapper {

    margin-top: 45px;

    position: relative;

    max-width: 760px;

    margin-inline: auto;

}

.faq-search-wrapper i {

    position: absolute;

    left: 28px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--faq-gold);

    font-size: 18px;

    z-index: 2;

}

.faq-search-wrapper input {

    width: 100%;

    border: none;

    outline: none;

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

    border: 1px solid rgba(255, 255, 255, .08);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    color: #fff;

    border-radius: 60px;

    padding: 20px 25px 20px 65px;

    transition: var(--faq-transition);

    font-size: 1rem;

}

.faq-search-wrapper input::placeholder {

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

}

.faq-search-wrapper input:focus {

    border-color: var(--faq-gold);

    box-shadow: 0 0 0 5px rgba(255, 204, 0, .08);

}



/*=========================================================
Category Section
=========================================================*/

.faq-category-section {

    padding: 35px 0;

    background: #0A2B1D;

}

.faq-category-scroll {

    display: flex;

    gap: 15px;

    overflow-x: auto;

    scrollbar-width: none;

    padding-bottom: 5px;

}

.faq-category-scroll::-webkit-scrollbar {

    display: none;

}

.faq-filter {

    white-space: nowrap;

    border: none;

    padding: 14px 28px;

    border-radius: 50px;

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

    color: #fff;

    transition: var(--faq-transition);

    font-weight: 600;

}

.faq-filter:hover {

    background: rgba(255, 204, 0, .12);

    color: var(--faq-gold);

}

.faq-filter.active {

    background: var(--faq-gold);

    color: #0A2B1D;

}



/*=========================================================
FAQ MAIN
=========================================================*/

.faq-main {

    padding: 70px 0;

    background: #0A2B1D;

}

.faq-item {

    background: var(--faq-card);

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

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

    overflow: hidden;

    margin-bottom: 22px;

    backdrop-filter: blur(14px);

    transition: var(--faq-transition);

}

.faq-item:hover {

    transform: translateY(-4px);

    border-color: var(--faq-border-hover);

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

}



/*=========================================================
Question
=========================================================*/

.faq-question {

    width: 100%;

    background: none;

    border: none;

    display: flex;

    justify-content: space-between;

    align-items: center;

    text-align: left;

    padding: 26px 30px;

    color: #fff;

    font-size: 1.08rem;

    font-weight: 700;

    cursor: pointer;

}

.faq-question span {

    padding-right: 20px;

    line-height: 1.6;

}



/*=========================================================
Icon
=========================================================*/

.faq-icon {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: rgba(255, 204, 0, .12);

    color: var(--faq-gold);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    transition: var(--faq-transition);

}

.faq-item:hover .faq-icon {

    background: var(--faq-gold);

    color: #0A2B1D;

}



/*=========================================================
Answer
=========================================================*/

.faq-answer {

    border-top: 1px solid rgba(255, 255, 255, .08);

}

.faq-answer-content {

    padding: 25px 30px 32px;

    color: var(--faq-muted);

    line-height: 1.9;

    font-size: 1rem;

}



/*=========================================================
Bootstrap Open State
=========================================================*/

.faq-question[aria-expanded="true"] .faq-icon {

    background: var(--faq-gold);

    color: #0A2B1D;

    transform: rotate(45deg);

}

.faq-question:focus {

    outline: none;

    box-shadow: none;

}



/*=========================================================
Small Devices
=========================================================*/

@media(max-width:991px) {

    .faq-hero {

        padding: 70px 0 55px;

    }

    .faq-question {

        font-size: 1rem;

        padding: 22px;

    }

    .faq-answer-content {

        padding: 20px 22px 26px;

    }

}

@media(max-width:576px) {

    .faq-title {

        font-size: 2rem;

    }

    .faq-subtitle {

        font-size: .95rem;

    }

    .faq-search-wrapper input {

        padding: 18px 20px 18px 58px;

        font-size: .95rem;

    }

    .faq-question {

        padding: 20px;

        font-size: .95rem;

    }

    .faq-icon {

        width: 36px;

        height: 36px;

        font-size: .9rem;

    }

    .faq-filter {

        padding: 12px 22px;

        font-size: .9rem;

    }

}

/*=========================================================
NOVACARE FAQ PAGE
PART 3A-2
CTA • CONTACT • UTILITIES • ANIMATIONS
=========================================================*/


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

.faq-contact-section{

    position: relative;

    padding: 90px 0 110px;

    background: #082318;

    overflow: hidden;

}

.faq-contact-section::before{

    content:"";

    position:absolute;

    top:-150px;

    right:-120px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(255,204,0,.06);

    filter:blur(20px);

}

.faq-contact-section::after{

    content:"";

    position:absolute;

    left:-120px;

    bottom:-120px;

    width:340px;

    height:340px;

    border-radius:50%;

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

}


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

.faq-contact-box{

    position:relative;

    z-index:2;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.10);

    border-radius:32px;

    padding:60px;

    box-shadow:0 25px 60px rgba(0,0,0,.30);

}

.faq-contact-box h2{

    color:#ffffff;

    font-weight:800;

    line-height:1.2;

    font-size:clamp(2rem,4vw,3rem);

    margin-bottom:22px;

}

.faq-contact-box p{

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

    line-height:1.9;

    margin-bottom:35px;

    max-width:620px;

}


/*=========================================================
BUTTON GROUP
=========================================================*/

.faq-contact-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.faq-contact-buttons .btn{

    min-width:180px;

}

.faq-outline-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:14px 28px;

    border-radius:50px;

    border:2px solid var(--faq-gold);

    color:var(--faq-gold);

    background:transparent;

    font-weight:600;

    text-decoration:none;

    transition:var(--faq-transition);

}

.faq-outline-btn:hover{

    background:var(--faq-gold);

    color:#0A2B1D;

}

.faq-outline-btn i{

    font-size:18px;

}


/*=========================================================
CONTACT CARD WRAPPER
=========================================================*/

.faq-contact-cards{

    display:flex;

    flex-direction:column;

    gap:18px;

}


/*=========================================================
INDIVIDUAL CARD
=========================================================*/

.faq-contact-card{

    display:flex;

    align-items:center;

    gap:22px;

    padding:24px;

    border-radius:20px;

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

    border:1px solid rgba(255,255,255,.08);

    transition:var(--faq-transition);

}

.faq-contact-card:hover{

    transform:translateY(-5px);

    border-color:rgba(255,204,0,.35);

    box-shadow:0 15px 40px rgba(0,0,0,.20);

}

.faq-contact-card i{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:var(--faq-gold);

    font-size:22px;

    flex-shrink:0;

}

.faq-contact-card small{

    display:block;

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

    margin-bottom:4px;

    letter-spacing:.08em;

    text-transform:uppercase;

    font-size:.72rem;

}

.faq-contact-card h6{

    margin:0;

    color:#ffffff;

    line-height:1.6;

    font-size:1rem;

}


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

.faq-contact-section .section-tag{

    display:inline-block;

    margin-bottom:18px;

}


/*=========================================================
SMOOTH REVEAL
=========================================================*/

.faq-reveal{

    opacity:0;

    transform:translateY(40px);

    transition:all .7s ease;

}

.faq-reveal.active{

    opacity:1;

    transform:none;

}


/*=========================================================
HOVER MICRO INTERACTIONS
=========================================================*/

.faq-filter,

.faq-question,

.faq-contact-card,

.faq-outline-btn,

.btn-action{

    will-change:transform;

}

.faq-contact-card:hover i{

    transform:scale(1.08);

}

.faq-filter:hover{

    transform:translateY(-2px);

}

.btn-action:hover{

    transform:translateY(-3px);

}


/*=========================================================
CUSTOM SCROLLBAR
=========================================================*/

.faq-category-scroll::-webkit-scrollbar{

    height:7px;

}

.faq-category-scroll::-webkit-scrollbar-track{

    background:transparent;

}

.faq-category-scroll::-webkit-scrollbar-thumb{

    background:rgba(255,204,0,.35);

    border-radius:10px;

}


/*=========================================================
TABLET
=========================================================*/

@media(max-width:991px){

.faq-contact-box{

padding:45px;

}

.faq-contact-buttons{

justify-content:center;

}

.faq-contact-box{

text-align:center;

}

.faq-contact-box p{

margin-inline:auto;

}

}


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

@media(max-width:767px){

.faq-contact-section{

padding:70px 0 80px;

}

.faq-contact-box{

padding:28px;

border-radius:24px;

}

.faq-contact-box h2{

font-size:1.9rem;

}

.faq-contact-card{

padding:18px;

gap:16px;

}

.faq-contact-card i{

width:48px;

height:48px;

font-size:18px;

}

.faq-contact-buttons{

flex-direction:column;

}

.faq-contact-buttons .btn,

.faq-outline-btn{

width:100%;

}

}


/*=========================================================
EXTRA SMALL DEVICES
=========================================================*/

@media(max-width:480px){

.faq-contact-box{

padding:24px;

}

.faq-contact-card{

flex-direction:column;

text-align:center;

}

.faq-contact-card i{

margin-bottom:6px;

}

.faq-contact-card h6{

font-size:.95rem;

}

}


/*=========================================================
PRINT
=========================================================*/

@media print{

.faq-contact-section{

display:none;

}

}