/* =========================================================
   FAQ SECTION
   Fleet / About Style
========================================================= */

:root {

    /* -----------------------------------------------------
       BACKGROUND
    ----------------------------------------------------- */

    --faq-bg: #E8D8C8;
    --faq-bg-light: #EFE2D5;
    --faq-bg-dark: #DDC8B5;


    /* -----------------------------------------------------
       DARK COLORS
    ----------------------------------------------------- */

    --faq-black: #101010;
    --faq-dark: #171414;
    --faq-brown: #3A302E;
    --faq-brown-light: #5A493F;


    /* -----------------------------------------------------
       GOLD
    ----------------------------------------------------- */

    --faq-gold: #F6C777;
    --faq-gold-dark: #B58A4A;
    --faq-gold-hover: #FFD58D;


    /* -----------------------------------------------------
       TEXT
    ----------------------------------------------------- */

    --faq-text: #171414;
    --faq-white: #F8F6F2;
    --faq-muted: #635951;


    /* -----------------------------------------------------
       BORDERS
    ----------------------------------------------------- */

    --faq-border: rgba(58, 48, 46, 0.18);

}


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

.faq-section {

    position: relative;

    width: 100%;

    padding: 120px 0 110px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #E8D8C8 0%,
            #EFE2D5 52%,
            #DDC8B5 100%
        );

    color: var(--faq-text);

}


/* =========================================================
   SUBTLE BACKGROUND DECORATION
========================================================= */

.faq-section::before {

    content: "";

    position: absolute;

    top: -180px;

    left: -180px;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    border: 1px solid rgba(58, 48, 46, 0.06);

    box-shadow:
        0 0 0 60px rgba(58, 48, 46, 0.018),
        0 0 0 120px rgba(58, 48, 46, 0.012);

    pointer-events: none;

}


.faq-section::after {

    content: "";

    position: absolute;

    right: -220px;

    bottom: -250px;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    border: 1px solid rgba(58, 48, 46, 0.06);

    box-shadow:
        0 0 0 70px rgba(58, 48, 46, 0.018),
        0 0 0 140px rgba(58, 48, 46, 0.012);

    pointer-events: none;

}


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

.faq-container {

    position: relative;

    z-index: 2;

    width:
        min(
            1050px,
            calc(100% - 100px)
        );

    margin: 0 auto;

}


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

.faq-heading {

    text-align: center;

    margin-bottom: 60px;

}


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

.faq-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-bottom: 23px;

}


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

.faq-eyebrow > span:not(.faq-line) {

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

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 4px;

    white-space: nowrap;

}


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

.faq-line {

    width: 90px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--faq-gold-dark)
        );

}


.faq-line-right {

    background:
        linear-gradient(
            90deg,
            var(--faq-gold-dark),
            transparent
        );

}


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

.faq-heading h2 {

    margin: 0;

    color:
        var(--faq-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            48px,
            5vw,
            72px
        );

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -2px;

}


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

.faq-heading h2 span {

    display: block;

    color:
        var(--faq-brown);

}


/* =========================================================
   DESCRIPTION
========================================================= */

.faq-heading p {

    max-width: 620px;

    margin:
        25px auto 0;

    color:
        var(--faq-muted);

    font-size: 15px;

    line-height: 1.7;

}


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

.faq-list {

    width: 100%;

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

}


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

.faq-item {

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

}


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

.faq-question {

    width: 100%;

    min-height: 82px;

    padding:
        20px 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    border: none;

    outline: none;

    background:
        transparent;

    color:
        var(--faq-text);

    cursor: pointer;

    text-align: left;

    font-family:
        inherit;

    font-size: 16px;

    font-weight: 600;

    transition:
        color 0.3s ease,
        background 0.3s ease;

}


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

.faq-question:hover {

    color:
        var(--faq-brown);

    background:
        rgba(
            255,
            255,
            255,
            0.18
        );

}


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

.faq-icon {

    flex-shrink: 0;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(
            58,
            48,
            46,
            0.35
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );

    color:
        var(--faq-brown);

    font-size: 13px;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.35s ease;

}


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

.faq-question:hover .faq-icon {

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

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

}


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

.faq-item.active .faq-question {

    color:
        var(--faq-brown);

}


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

.faq-item.active .faq-icon {

    background:
        var(--faq-gold);

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

    color:
        var(--faq-black);

    transform:
        rotate(180deg);

}


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

.faq-answer {

    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows
        0.45s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );

}


.faq-item.active .faq-answer {

    grid-template-rows: 1fr;

}


.faq-answer-inner {

    overflow: hidden;

}


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

.faq-answer p {

    max-width: 850px;

    margin: 0;

    padding:
        0 90px 28px 25px;

    color:
        var(--faq-muted);

    font-size: 14px;

    line-height: 1.8;

}


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

.faq-bottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    margin-top: 55px;

}


.faq-bottom p {

    margin: 0;

    color:
        var(--faq-muted);

    font-size: 14px;

}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.faq-contact-btn {

    height: 52px;

    padding:
        0 23px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

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

    border-radius: 3px;

    background:
        var(--faq-gold);

    color:
        var(--faq-black);

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


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

.faq-contact-btn i {

    transition:
        transform 0.3s ease;

}


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

.faq-contact-btn:hover {

    background:
        var(--faq-gold-hover);

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

    color:
        var(--faq-black);

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 30px
        rgba(
            110,
            78,
            30,
            0.16
        );

}


.faq-contact-btn:hover i {

    transform:
        translateX(5px);

}


/* =========================================================
   1401px+
========================================================= */

@media (min-width: 1401px) {

    .faq-section {

        padding:
            140px 0 125px;

    }


    .faq-container {

        width:
            min(
                1100px,
                calc(100% - 120px)
            );

    }


    .faq-heading {

        margin-bottom: 70px;

    }


    .faq-heading h2 {

        font-size: 76px;

    }


    .faq-question {

        min-height: 86px;

    }

}


/* =========================================================
   1201px - 1400px
========================================================= */

@media
(min-width: 1201px)
and
(max-width: 1400px) {

    .faq-container {

        width:
            calc(100% - 100px);

    }

}


/* =========================================================
   901px - 1200px
========================================================= */

@media
(min-width: 901px)
and
(max-width: 1200px) {

    .faq-section {

        padding:
            100px 0 90px;

    }


    .faq-container {

        width:
            calc(100% - 70px);

    }


    .faq-heading h2 {

        font-size: 60px;

    }


    .faq-heading {

        margin-bottom: 50px;

    }

}


/* =========================================================
   769px - 900px
========================================================= */

@media
(min-width: 769px)
and
(max-width: 900px) {

    .faq-section {

        padding:
            90px 0 80px;

    }


    .faq-container {

        width:
            calc(100% - 50px);

    }


    .faq-heading h2 {

        font-size: 52px;

    }


    .faq-question {

        min-height: 75px;

        font-size: 15px;

    }


    .faq-answer p {

        padding:
            0 70px 25px 25px;

    }

}


/* =========================================================
   601px - 768px
========================================================= */

@media
(min-width: 601px)
and
(max-width: 768px) {

    .faq-section {

        padding:
            80px 0 70px;

    }


    .faq-container {

        width:
            calc(100% - 40px);

    }


    .faq-heading {

        margin-bottom: 45px;

    }


    .faq-heading h2 {

        font-size: 46px;

    }


    .faq-heading p {

        font-size: 14px;

    }


    .faq-question {

        min-height: 72px;

        padding:
            18px 20px;

        font-size: 14px;

    }


    .faq-icon {

        width: 36px;

        height: 36px;

    }


    .faq-answer p {

        padding:
            0 70px 25px 20px;

        font-size: 13px;

    }


    .faq-bottom {

        margin-top: 40px;

    }

}


/* =========================================================
   481px - 600px
========================================================= */

@media
(min-width: 481px)
and
(max-width: 600px) {

    .faq-section {

        padding:
            70px 0 65px;

    }


    .faq-container {

        width:
            calc(100% - 30px);

    }


    .faq-heading {

        margin-bottom: 38px;

    }


    .faq-eyebrow {

        gap: 9px;

    }


    .faq-eyebrow > span:not(.faq-line) {

        font-size: 8px;

        letter-spacing: 2px;

    }


    .faq-line {

        width: 40px;

    }


    .faq-heading h2 {

        font-size: 40px;

        letter-spacing: -1px;

    }


    .faq-heading p {

        margin-top: 18px;

        font-size: 13px;

    }


    .faq-question {

        min-height: 68px;

        padding:
            17px 15px;

        gap: 15px;

        font-size: 13px;

    }


    .faq-icon {

        width: 34px;

        height: 34px;

        font-size: 11px;

    }


    .faq-answer p {

        padding:
            0 50px 22px 15px;

        font-size: 12px;

        line-height: 1.7;

    }


    .faq-bottom {

        flex-direction: column;

        gap: 15px;

        margin-top: 35px;

    }

}


/* =========================================================
   376px - 480px
========================================================= */

@media
(min-width: 376px)
and
(max-width: 480px) {

    .faq-section {

        padding:
            65px 0 60px;

    }


    .faq-container {

        width:
            calc(100% - 24px);

    }


    .faq-heading {

        margin-bottom: 35px;

    }


    .faq-eyebrow {

        gap: 6px;

    }


    .faq-eyebrow > span:not(.faq-line) {

        font-size: 7px;

        letter-spacing: 1.5px;

    }


    .faq-line {

        width: 28px;

    }


    .faq-heading h2 {

        font-size: 35px;

    }


    .faq-heading p {

        font-size: 12px;

        line-height: 1.65;

    }


    .faq-question {

        min-height: 65px;

        padding:
            15px 12px;

        font-size: 12px;

    }


    .faq-icon {

        width: 31px;

        height: 31px;

        font-size: 10px;

    }


    .faq-answer p {

        padding:
            0 43px 20px 12px;

        font-size: 11px;

    }


    .faq-bottom {

        flex-direction: column;

        gap: 13px;

        margin-top: 30px;

    }


    .faq-bottom p {

        font-size: 12px;

    }


    .faq-contact-btn {

        width: 100%;

        height: 48px;

        font-size: 11px;

    }

}


/* =========================================================
   321px - 375px
========================================================= */

@media
(min-width: 321px)
and
(max-width: 375px) {

    .faq-section {

        padding:
            58px 0 55px;

    }


    .faq-container {

        width:
            calc(100% - 20px);

    }


    .faq-heading h2 {

        font-size: 31px;

    }


    .faq-heading p {

        font-size: 11px;

    }


    .faq-question {

        min-height: 61px;

        padding:
            13px 10px;

        font-size: 11px;

    }


    .faq-icon {

        width: 28px;

        height: 28px;

        font-size: 9px;

    }


    .faq-answer p {

        padding:
            0 38px 18px 10px;

        font-size: 10px;

    }

}


/* =========================================================
   320px AND BELOW
========================================================= */

@media (max-width: 320px) {

    .faq-section {

        padding:
            50px 0 48px;

    }


    .faq-container {

        width:
            calc(100% - 16px);

    }


    .faq-heading h2 {

        font-size: 28px;

    }


    .faq-heading p {

        font-size: 10px;

    }


    .faq-question {

        min-height: 57px;

        padding:
            12px 8px;

        font-size: 10px;

    }


    .faq-icon {

        width: 26px;

        height: 26px;

        font-size: 9px;

    }


    .faq-answer p {

        padding:
            0 32px 16px 8px;

        font-size: 9px;

    }


    .faq-bottom {

        margin-top: 25px;

    }


    .faq-contact-btn {

        height: 46px;

        font-size: 10px;

    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media
(hover: none)
and
(pointer: coarse) {

    .faq-question:hover {

        color:
            var(--faq-text);

        background:
            transparent;

    }


    .faq-question:hover .faq-icon {

        border-color:
            rgba(
                58,
                48,
                46,
                0.35
            );

        color:
            var(--faq-brown);

    }


    .faq-contact-btn:hover {

        transform: none;

        box-shadow: none;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .faq-section *,
    .faq-section *::before,
    .faq-section *::after {

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

    }

}