/* =========================================================
RESET / ELEMENTOR PROTECTION
========================================================= */

.dis-faq-v1,
.dis-faq-v1 *,
.dis-faq-v1 *::before,
.dis-faq-v1 *::after {
    box-sizing: border-box;
}

.dis-faq-v1 {
    --bg: #f2ede4;
    --surface: #faf8f3;
    --dark: #242a2e;
    --body: #5c6468;
    --gold: #cc9942;

    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #f2ede4;

    color: #242a2e;

    font-family: "Montserrat", Arial, sans-serif;

    isolation: isolate;
}


/* =========================================================
FONT AWESOME PROTECTION
========================================================= */

.dis-faq-v1 .fa-solid,
.dis-faq-v1 .fas {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}


/* =========================================================
BACKGROUND ART
========================================================= */

.dis-faq-v1__art {
    position: absolute;
    inset: 0;

    z-index: 0;

    overflow: hidden;
    pointer-events: none;
}

.dis-faq-v1__art-circle {
    position: absolute;

    display: block;

    border: 1px solid rgba(191, 140, 56, 0.09);
    border-radius: 50%;
}

.dis-faq-v1__art-circle--1 {
    width: 620px;
    height: 620px;

    top: -380px;
    right: -280px;
}

.dis-faq-v1__art-circle--2 {
    width: 430px;
    height: 430px;

    bottom: -300px;
    left: -260px;
}


/* =========================================================
1400PX CONTAINER
========================================================= */

.dis-faq-v1__container {
    position: relative;
    z-index: 2;

    width: calc(100% - 64px);
    max-width: 1400px;

    margin: 0 auto;

    padding: 108px 0 120px;
}


/* =========================================================
HEADER
========================================================= */

.dis-faq-v1__header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    width: 100%;

    margin: 0 0 50px;
    padding: 0 0 31px;

    border-bottom: 1px solid rgba(36,42,46,0.15);
}

.dis-faq-v1__heading {
    width: 100%;
    max-width: 1050px;
}


/* ACCENT */

.dis-faq-v1__accent {
    display: flex;

    align-items: center;

    gap: 9px;

    margin: 0 0 20px;
}

.dis-faq-v1__accent span {
    display: block;

    height: 2px;

    background: #cc9942;
}

.dis-faq-v1__accent span:first-child {
    width: 78px;
}

.dis-faq-v1__accent span:last-child {
    width: 24px;
}

.dis-faq-v1__accent i {
    display: block;

    width: 8px;
    height: 8px;

    border: 1px solid #cc9942;

    transform: rotate(45deg);
}


/* H2 */

.dis-faq-v1 .dis-faq-v1__title,
.dis-faq-v1 h2.dis-faq-v1__title {
    width: 100%;

    margin: 0;
    padding: 0;

    color: #242a2e;

    font-family: "Oswald", Arial, sans-serif;

    font-size: clamp(48px, 4vw, 64px);

    font-weight: 600;
    font-style: normal;

    line-height: 1.08;

    letter-spacing: -0.6px;

    text-align: left;

    text-transform: none;
    text-decoration: none;
}


/* HEADER RIGHT */

.dis-faq-v1__header-detail {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 4px;
}

.dis-faq-v1__header-line {
    display: block;

    width: 73px;
    height: 1px;

    background: rgba(36,42,46,0.25);
}

.dis-faq-v1__header-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    border: 1px solid rgba(198,145,58,0.48);

    transform: rotate(45deg);
}

.dis-faq-v1__header-icon i {
    color: #bf8835;

    font-size: 21px;

    transform: rotate(-45deg);
}


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

.dis-faq-v1__list {
    width: 100%;

    margin: 0;
    padding: 0;

    border-top: 1px solid rgba(36,42,46,0.16);
}


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

.dis-faq-v1__item {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    border-bottom: 1px solid rgba(36,42,46,0.16);

    background: transparent;

    transition:
        background-color 260ms ease;
}

.dis-faq-v1__item:hover,
.dis-faq-v1__item.dis-faq-is-open {
    background: rgba(255,255,255,0.52);
}


/* OPEN GOLD EDGE */

.dis-faq-v1__item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 0;

    background: #cc9942;

    transition: height 320ms ease;
}

.dis-faq-v1__item.dis-faq-is-open::before {
    height: 100%;
}


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

.dis-faq-v1 .dis-faq-v1__question {
    display: grid;

    grid-template-columns:
        58px
        minmax(0,1fr)
        52px;

    align-items: center;

    gap: 28px;

    width: 100%;

    margin: 0;

    padding: 28px 28px 28px 31px;

    background: transparent;

    border: 0;
    border-radius: 0;

    box-shadow: none;

    cursor: pointer;

    text-align: left;
}


/* NUMBER */

.dis-faq-v1__number {
    color: #ad7a2e;

    font-family: "Oswald", Arial, sans-serif;

    font-size: 15px;
    font-weight: 500;

    line-height: 1;

    letter-spacing: 2px;
}


/* QUESTION TEXT */

.dis-faq-v1__question-text {
    color: #272d31;

    font-family: "Oswald", Arial, sans-serif;

    font-size: 27px;
    font-weight: 500;

    line-height: 1.22;

    letter-spacing: -0.15px;

    text-align: left;
    text-transform: none;
}


/* =========================================================
TOGGLE
========================================================= */

.dis-faq-v1__toggle {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin: 0;

    border: 1px solid rgba(193,140,53,0.42);

    background: transparent;

    transition:
        background-color 230ms ease,
        border-color 230ms ease;
}

.dis-faq-v1__toggle svg {
    display: block;

    width: 21px;
    height: 21px;

    fill: none;
    stroke: #b77f2e;

    stroke-width: 1.7;

    stroke-linecap: round;

    overflow: visible;
}

.dis-faq-v1__plus-v {
    transform-origin: center;

    transition:
        transform 260ms ease,
        opacity 260ms ease;
}


/* OPEN STATE */

.dis-faq-v1__item.dis-faq-is-open
.dis-faq-v1__toggle {
    background: #242a2e;
    border-color: #242a2e;
}

.dis-faq-v1__item.dis-faq-is-open
.dis-faq-v1__toggle svg {
    stroke: #dfb25d;
}

.dis-faq-v1__item.dis-faq-is-open
.dis-faq-v1__plus-v {
    transform: rotate(90deg);
    opacity: 0;
}


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

.dis-faq-v1__answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows 360ms cubic-bezier(.2,.75,.25,1);
}

.dis-faq-v1__item.dis-faq-is-open
.dis-faq-v1__answer {
    grid-template-rows: 1fr;
}

.dis-faq-v1__answer-inner {
    min-height: 0;

    overflow: hidden;
}

.dis-faq-v1__answer-inner p {
    width: auto;
    max-width: 1060px;

    margin: 0 90px 0 117px;

    padding: 0 0 31px;

    color: #5c6468;

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 17px;
    font-weight: 400;

    line-height: 1.75;

    letter-spacing: 0;

    text-align: left;

    text-transform: none;
}


/* =========================================================
FOCUS
========================================================= */

.dis-faq-v1__question:focus-visible {
    outline: 2px solid rgba(204,153,66,0.55);

    outline-offset: -2px;
}


/* =========================================================
1200
========================================================= */

@media (max-width: 1200px) {

    .dis-faq-v1__container {
        width: calc(100% - 48px);

        padding: 92px 0 102px;
    }

    .dis-faq-v1__question-text {
        font-size: 25px;
    }

}


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

@media (max-width: 900px) {

    .dis-faq-v1__container {
        width: calc(100% - 40px);

        padding: 80px 0 88px;
    }

    .dis-faq-v1__header-detail {
        display: none;
    }

    .dis-faq-v1 .dis-faq-v1__title,
    .dis-faq-v1 h2.dis-faq-v1__title {
        font-size: 49px;
    }

    .dis-faq-v1 .dis-faq-v1__question {
        grid-template-columns:
            48px
            minmax(0,1fr)
            50px;

        gap: 20px;

        padding:
            26px 21px;
    }

    .dis-faq-v1__answer-inner p {
        margin:
            0 80px 0 89px;
    }

}


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

@media (max-width: 767px) {

    .dis-faq-v1__container {
        width: calc(100% - 36px);

        padding: 68px 0 74px;
    }

    .dis-faq-v1__header {
        margin-bottom: 37px;

        padding-bottom: 24px;
    }

    .dis-faq-v1__accent {
        margin-bottom: 17px;
    }

    .dis-faq-v1__accent span:first-child {
        width: 54px;
    }

    .dis-faq-v1__accent span:last-child {
        width: 18px;
    }

    .dis-faq-v1 .dis-faq-v1__title,
    .dis-faq-v1 h2.dis-faq-v1__title {
        font-size: 40px;
        line-height: 1.08;
    }


    /* QUESTION */

    .dis-faq-v1 .dis-faq-v1__question {
        grid-template-columns:
            minmax(0,1fr)
            45px;

        gap: 15px;

        padding:
            23px 12px 23px 18px;
    }

    .dis-faq-v1__number {
        grid-column: 1;

        margin-bottom: -5px;

        font-size: 13px;
    }

    .dis-faq-v1__question-text {
        grid-column: 1;

        font-size: 23px;
        line-height: 1.22;
    }

    .dis-faq-v1__toggle {
        grid-column: 2;
        grid-row: 1 / span 2;

        align-self: center;

        width: 43px;
        height: 43px;
    }


    /* ANSWER */

    .dis-faq-v1__answer-inner p {
        max-width: none;

        margin:
            0 18px;

        padding:
            0 0 25px;

        font-size: 16.5px;
        line-height: 1.68;
    }

}


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

@media (max-width: 420px) {

    .dis-faq-v1__container {
        width: calc(100% - 30px);
    }

    .dis-faq-v1 .dis-faq-v1__title,
    .dis-faq-v1 h2.dis-faq-v1__title {
        font-size: 36px;
    }

    .dis-faq-v1__question-text {
        font-size: 21px;
    }

    .dis-faq-v1__answer-inner p {
        font-size: 16px;
    }

}


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

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

    .dis-faq-v1__answer,
    .dis-faq-v1__item::before,
    .dis-faq-v1__plus-v,
    .dis-faq-v1__toggle {
        transition: none;
    }

}