/* =========================================================
   FAQ SECTION
========================================================= */

.faq-section{

    position:relative;

    overflow:hidden;

    background:#f7f8fa;

}


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

.faq-container{

    width:min(1280px,92%);

    min-height:760px;

    margin:0 auto;

    padding:30px 0;

    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(0,.75fr);

    gap:75px;

    align-items:center;

}


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

.faq-content{

    min-width:0;

}


/* =========================================================
   EYEBROW
========================================================= */

.faq-eyebrow{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:20px;

    color:var(--primary);

    font-family:'Manrope',sans-serif;

    font-size:12px;

    font-weight:800;

    letter-spacing:3px;

}

.faq-eyebrow span:first-child{

    width:52px;

    height:2px;

    background:var(--primary);

}


/* =========================================================
   TITLE
========================================================= */

.faq-title{

    max-width:650px;

    margin:0 0 20px;

    color:#101827;

    font-family:'Manrope',sans-serif;

    font-size:clamp(42px,4.5vw,65px);

    line-height:1.05;

    letter-spacing:-2.3px;

    font-weight:800;

}

.faq-title span{

    color:var(--primary);

}


/* =========================================================
   INTRO
========================================================= */

.faq-intro{

    max-width:650px;

    margin-bottom:32px;

    color:#667085;

    font-size:16px;

    line-height:1.8;

}


/* =========================================================
   FAQ LIST
========================================================= */

.faq-list{

    border-top:1px solid rgba(11,18,32,.10);

}


/* =========================================================
   FAQ ITEM
========================================================= */

.faq-item{

    border-bottom:1px solid rgba(11,18,32,.10);

}


/* =========================================================
   QUESTION
========================================================= */

.faq-question{

    width:100%;

    min-height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:17px 0;

    border:0;

    background:transparent;

    color:#111827;

    text-align:left;

    font-family:'Manrope',sans-serif;

    font-size:16px;

    font-weight:700;

    line-height:1.4;

    cursor:pointer;

}

.faq-question > span:first-child{

    max-width:90%;

}

.faq-toggle{

    width:34px;

    height:34px;

    flex:0 0 34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#111b2b;

    color:var(--primary);

    transition:
        background .25s ease,
        transform .25s ease;

}

.faq-toggle i{

    font-size:18px;

    transition:
        transform .25s ease;

}

.faq-question:hover .faq-toggle{

    background:var(--primary);

    color:#111;

}

.faq-item.open .faq-toggle{

    background:var(--primary);

    color:#111;

}

.faq-item.open .faq-toggle i{

    transform:rotate(45deg);

}


/* =========================================================
   ANSWER
========================================================= */

.faq-answer{

    display:grid;

    grid-template-rows:0fr;

    transition:
        grid-template-rows .3s ease;

}

.faq-answer p{

    min-height:0;

    overflow:hidden;

    color:#667085;

    font-size:14px;

    line-height:1.8;

}

.faq-item.open .faq-answer{

    grid-template-rows:1fr;

}

.faq-item.open .faq-answer p{

    padding:
        0
        50px
        20px
        0;

}


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

.faq-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:54px;

    margin-top:30px;

    padding:0 27px;

    border-radius:10px;

    background:var(--primary);

    color:#111;

    font-family:'Manrope',sans-serif;

    font-size:14px;

    font-weight:800;

    box-shadow:
        0 10px 24px rgba(244,180,0,.14);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}

.faq-button i{

    transition:
        transform .3s ease;

}

.faq-button:hover{

    transform:translateY(-2px);

    background:var(--primary-hover);

    box-shadow:
        0 15px 30px rgba(244,180,0,.20);

}

.faq-button:hover i{

    transform:translateX(4px);

}


/* =========================================================
   VISUAL
========================================================= */

.faq-visual{

    position:relative;

    min-height:620px;

}


/* =========================================================
   IMAGE FRAME
========================================================= */

.faq-image{

    position:absolute;

    inset:
        0
        20px
        0
        0;

    overflow:hidden;

    border-radius:22px;

    background:#e8eaed;

    box-shadow:
        0 22px 50px rgba(11,18,32,.12);

}

.faq-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transition:
        transform .8s
        cubic-bezier(.22,1,.36,1);

}

.faq-visual:hover .faq-image img{

    transform:scale(1.025);

}


/* =========================================================
   YELLOW ACCENT
========================================================= */

.faq-accent{

    position:absolute;

    top:42px;

    right:0;

    width:18px;

    height:150px;

    border-radius:30px;

    background:var(--primary);

    transform:skewY(-16deg);

    z-index:3;

}


/* =========================================================
   INFO CARD
========================================================= */

.faq-info-card{

    position:absolute;

    right:0;

    bottom:45px;

    z-index:4;

    width:245px;

    padding:18px;

    display:flex;

    align-items:center;

    gap:14px;

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

    border-radius:14px;

    background:
        rgba(11,18,32,.95);

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

}

.faq-info-icon{

    width:45px;

    height:45px;

    flex:0 0 45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(244,180,0,.11);

    color:var(--primary);

}

.faq-info-icon i{

    font-size:22px;

}

.faq-info-card strong{

    display:block;

    margin-bottom:2px;

    color:#fff;

    font-family:'Manrope',sans-serif;

    font-size:13px;

}

.faq-info-card span{

    display:block;

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

    font-size:11px;

    line-height:1.45;

}


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

@media(max-width:991px){

    .faq-container{

        width:92%;

        min-height:auto;

        padding:
            75px
            0;

        grid-template-columns:
            1fr;

        gap:50px;

    }

    .faq-content{

        max-width:760px;

    }

    .faq-visual{

        min-height:520px;

        max-width:650px;

        width:100%;

        margin:0 auto;

    }

    .faq-image{

        inset:
            0
            15px
            0
            0;

    }

    .faq-info-card{

        right:0;

        bottom:25px;

    }

}


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

@media(max-width:767px){

    .faq-container{

        width:
            calc(100% - 32px);

        padding:
            60px
            0;

        gap:38px;

    }

    .faq-eyebrow{

        font-size:10px;

        letter-spacing:2.5px;

    }

    .faq-eyebrow span:first-child{

        width:38px;

    }

    .faq-title{

        font-size:
            clamp(37px,10vw,47px);

        letter-spacing:-1.6px;

    }

    .faq-intro{

        font-size:14.5px;

        line-height:1.7;

        margin-bottom:24px;

    }

    .faq-question{

        min-height:68px;

        font-size:14px;

        gap:12px;

    }

    .faq-toggle{

        width:31px;

        height:31px;

        flex-basis:31px;

    }

    .faq-question > span:first-child{

        max-width:calc(100% - 43px);

    }

    .faq-item.open .faq-answer p{

        padding:
            0
            35px
            18px
            0;

    }

    .faq-answer p{

        font-size:13.5px;

    }

    .faq-button{

        width:100%;

    }

    .faq-visual{

        min-height:420px;

    }

    .faq-image{

        inset:0;

        border-radius:16px;

    }

    .faq-accent{

        top:20px;

        right:8px;

        width:10px;

        height:100px;

    }

    .faq-info-card{

        right:10px;

        bottom:15px;

        width:220px;

        padding:14px;

    }

}


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

@media(max-width:430px){

    .faq-container{

        width:
            calc(100% - 24px);

    }

    .faq-title{

        font-size:35px;

    }

    .faq-visual{

        min-height:380px;

    }

    .faq-info-card{

        width:205px;

    }

}