@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    justify-content: center;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.2;
    font-weight: 400;
    background-color: var(--white);
    color: var(--gray);
    letter-spacing: 0;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--gray);
}

::-webkit-scrollbar-thumb {
    background: var(--yellow);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--yellow-hover);
}

:root {
    --black: #111111;
    --gray: #4c4f54;
    --gray-card: #4a4f53;
    --white: #fff9f6;
    --yellow: #a37c4b;
    --yellow-hover: #6f5533;
    --yellow-background: #fcf3ee;
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    cursor: pointer;
    letter-spacing: 0;
}

img {
    -webkit-user-drag: none;
    object-fit: contain;
    width: 100%;
    height: auto;
}

.container-area {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 5%;
    height: 100%;
}

.logo,
.white_logo {
    transition: all 0.3s;

    &:hover {
        filter: opacity(0.8);
    }
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: all 0.3s;
    border-radius: 0px;
    color: white;
    background-color: var(--yellow);

    font-family: Montserrat;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;

    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;

    padding: 10px 20px;

    &:hover {
        background: var(--yellow-hover);
    }

    &.one_border {
        border-top-right-radius: 20px;
    }

    &.three_borders {
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
    }

    &.white {
        color: white;
        background-color: transparent;
        font-size: 18px;

        &:hover {
            text-decoration: underline;
        }
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
    letter-spacing: 0;
}

section,
header,
footer {
    display: flex;
    justify-content: center;
    width: 100%;
}


.area-1 {
    padding: 25px 40px;

    @media screen and (max-width:768px) {
        padding: 15px 20px;
    }

    .container {
        .logo {
            max-width: 395px;
            height: auto;
            aspect-ratio: 395/98;

            @media screen and (max-width:768px) {
                max-width: 220px;
            }
        }
    }
}

.area-2 {
    background-color: var(--gray);
    color: white;

    .container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        padding: 0;
        max-width: 100%;

        @media screen and (max-width:1024px) {
            flex-direction: column;
        }

        .box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
        }

        main {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 1.05vw;
            padding: 25px 0vw 25px 6vw;

            @media screen and (max-width:1024px) {
                justify-content: center;
                align-items: center;
                padding: 30px 20px;
                gap: 15px;
            }

            h1 {
                font-weight: 400;
                font-size: clamp(2.188rem, 0.598rem + 2.484vw, 3.625rem);
                line-height: 1.30;
                letter-spacing: 0;
                max-width: 483px;
                width: 32vw;
                text-align: left;

                @media screen and (max-width:1200px) {
                    line-height: 1.2;
                }

                @media screen and (max-width:1024px) {
                    max-width: 100%;
                    width: 60vw;
                    min-width: 540px;
                    text-align: center;
                    font-size: 28px;
                }

                @media screen and (max-width:475px) {
                    max-width: 100%;
                    width: 90vw;
                    min-width: 300px;
                    text-align: center;
                    font-size: 28px;
                }
            }

            p {
                font-weight: 400;
                font-size: clamp(0.938rem, 0.592rem + 0.54vw, 1.25rem);
                line-height: 1.15;
                letter-spacing: 0;
                width: 29.5vw;
                max-width: 460px;
                text-align: left;

                @media screen and (max-width:1024px) {
                    text-align: center;
                    font-size: 16px;
                    max-width: 100%;
                    width: 50vw;
                    min-width: 349px;
                }

                @media screen and (max-width:475px) {
                    max-width: 100%;
                    width: 90vw;
                    min-width: 300px;
                    text-align: center;
                }
            }

            .box__button {
                display: flex;
                justify-content: flex-start;
                gap: 5px;
                flex-direction: column;
                padding-top: 15px;

                @media screen and (max-width:1024px) {
                    align-items: center;
                    width: 100%;
                }

                .yellow {
                    max-width: 359px;
                    width: 19.5vw;
                    min-width: 263px;
                    height: auto;
                    aspect-ratio: 359/48;
                    font-size: clamp(0.688rem, 0.342rem + 0.54vw, 1rem);
                    font-weight: 600;

                    @media screen and (max-width:1024px) {
                        width: 50vw;
                        min-width: 300px;
                        max-width: 100%;
                        font-size: 14px;
                    }
                }

                .white {
                    font-size: clamp(0.75rem, 0.612rem + 0.216vw, 0.875rem);
                    text-transform: none;
                    font-weight: 300;

                    @media screen and (max-width:1200px) {
                        padding-top: 5px;
                    }
                }
            }
        }

        .box__banner {
            flex-grow: 1;
            max-width: 1300px;
            width: 60vw;
            min-width: 610px;
            aspect-ratio: 1300/952;

            @media screen and (max-width:1024px) {
                min-width: unset;
                aspect-ratio: initial;
                width: 100%;
                overflow: hidden;
                aspect-ratio: 2600/1374;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}

.area-3 {
    background-color: var(--white);
    padding: 35px 0 45px;

    .container {
        .card__container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            gap: 10px;
            max-width: 1419px;
            width: 100%;
            flex-wrap: nowrap;

            @media screen and (max-width:768px) {
                flex-wrap: wrap;
                justify-content: center;
                gap: 20px;
            }

            .card {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                gap: 12px;
                flex: 1;
                min-width: 0;

                transition: all 0.3s ease-in-out;

                @media screen and (max-width:768px) {
                    flex: 0 0 calc(50% - 15px);
                    max-width: calc(50% - 15px);
                }

                @media screen and (max-width:400px) {
                    flex: 0 0 100%;
                    max-width: 100%;
                }

                &:hover {
                    box-shadow: 0px 0px 3px #a27c4f52;
                    border-radius: 25px;
                }

                .icon {
                    max-width: 65px;
                    height: 57px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0 auto;
                }

                p {
                    font-weight: 400;
                    font-size: clamp(1rem, 0.5rem + 1.2vw, 2.25rem);
                    line-height: 1.30;
                    letter-spacing: 0;
                    text-align: center;

                    @media screen and (max-width:768px) {
                        font-size: 18px;
                    }
                }
            }
        }
    }
}

.area-4 {
    background: var(--white);

    .container {
        .box {
            max-width: 1419px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            background-color: var(--gray);
            color: white;

            @media screen and (max-width:1024px) {
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .box__text {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                max-width: 829px;

                @media screen and (max-width:1024px) {
                    width: 100%;
                }
            }

            .text {
                display: flex;
                flex-direction: column;
                gap: 28px;
                padding: 30px 0vw 30px 130px;

                @media screen and (max-width:1950px) {
                    padding: 30px 0vw 30px 7vw;
                    gap: 1.25vw;
                }

                @media screen and (max-width:1024px) {
                    gap: 20px;
                    padding: 25px 20px;
                }

                h2 {
                    max-width: 609px;
                    width: 94%;
                    font-weight: 700;
                    font-size: clamp(1.875rem, -0.545rem + 3.782vw, 3rem);
                    line-height: 1.3;
                    letter-spacing: 0;

                    @media screen and (max-width:1024px) {
                        text-align: center;
                        align-self: center;
                        font-size: 28px;
                    }
                }

                p {
                    font-weight: 400;
                    max-width: 463px;
                    width: 75%;
                    font-size: clamp(0.938rem, 0.265rem + 1.05vw, 1.25rem);
                    line-height: 1.2;
                    letter-spacing: 0;

                    @media screen and (max-width:1024px) {
                        text-align: center;
                        align-self: center;
                        font-size: 16px;
                        max-width: 100%;
                    }
                }

                .button {
                    max-width: 431px;
                    width: 75%;
                    height: auto;
                    aspect-ratio: 431/76;
                    font-size: clamp(0.875rem, 0.068rem + 1.261vw, 1.25rem);

                    @media screen and (max-width:1024px) {
                        text-align: center;
                        align-self: center;
                        font-size: 14px;
                        height: 56px;
                        max-width: 100%;
                    }
                }
            }

            .image {
                height: 100%;
                max-width: 590px;
                width: 42.3vw;
                aspect-ratio: 590/724;

                @media screen and (max-width:1024px) {
                    /* max-width: 100%;;
                    min-width: 425px; */

                    max-width: 100%;
                    width: 100%;
                    min-width: 100%;
                    aspect-ratio: auto;
                    height: 522px;

                    img {
                        object-fit: cover;
                    }
                }

                @media screen and (max-width:475px) {
                    max-width: 100%;
                    width: 100%;
                    min-width: 100%;
                    height: auto;
                    aspect-ratio: 590/724;

                    img {
                        object-fit: contain;
                    }
                }
            }
        }
    }
}

.area-5 {
    background: var(--white);
    padding: 45px 0 45px;

    .container {
        .card_container {
            display: flex;
            flex-direction: row;
            gap: 10px;
            justify-content: center;
            flex-wrap: nowrap;
            width: 100%;

            @media screen and (max-width:909px) {
                flex-wrap: wrap;
                gap: 15px;
            }

            .card {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background-color: var(--yellow);
                color: white;
                border-radius: 24px;
                flex: 1;
                min-width: 0;
                height: auto;
                aspect-ratio: 276/391;
                padding: 20px 15px;
                transition: all 0.3s ease-in-out;
                ;

                @media screen and (max-width:909px) {
                    flex: 0 0 calc(50% - 10px);
                    max-width: calc(50% - 10px);
                    aspect-ratio: auto;
                    padding: 30px 20px;
                }

                @media screen and (max-width:480px) {
                    flex: 0 0 100%;
                    max-width: 100%;
                }

                &:hover {
                    box-shadow: 0px 0px 4px 2px #a27c4fb0;
                    background-color: var(--yellow-hover);
                }

                .icon {
                    max-width: 99px;
                    height: 99px;
                    margin-bottom: 15px;

                    @media screen and (max-width:909px) {
                        max-width: 70px;
                        height: 70px;
                    }
                }

                p {
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 1.3;
                    text-align: center;
                    max-width: 196px;

                    @media screen and (max-width:909px) {
                        font-size: 14px;
                        max-width: 100%;
                    }
                }

                .comment {
                    margin-bottom: 10px;
                    max-width: 80%;
                }

                .author {
                    font-weight: 700;
                    line-height: 1.3;
                }
            }
        }

        h2 {
            font-weight: 400;
            font-size: 40px;
            line-height: 1.3;
            text-align: center;
            margin: 65px 0px 5px;

            strong {
                font-weight: 700;
            }

            @media screen and (max-width:909px) {
                font-size: 28px;
                margin: 35px 0 5px;
            }

            @media screen and (max-width:480px) {
                font-size: 22px;
            }
        }
    }
}

.area-6 {
    background-color: var(--gray);
    color: white;
    padding: 38px 0 0px;

    .container {
        .box__text {
            display: flex;
            flex-direction: column;
            gap: 24px;
            padding: 0px 0 53px;

            h2 {
                font-weight: 400;
                font-size: 43px;
                line-height: 1.3;

                @media screen and (max-width:768px) {
                    font-size: 28px;
                    text-align: center;
                    align-self: center;
                }
            }

            p {
                font-weight: 450;
                font-size: 20px;
                line-height: 1.15;
                text-align: justify;
                max-width: 1101px;

                @media screen and (max-width:768px) {
                    font-size: 16px;
                    text-align: center;
                }
            }
        }

        .box__card {
            display: flex;
            flex-direction: row;
            gap: 1px;
            justify-content: center;
            align-items: end;
            flex-wrap: nowrap;
            width: 100%;

            @media screen and (max-width:768px) {
                flex-wrap: wrap;
                gap: 5px;
            }

            .card {
                flex: 1;
                min-width: 0;
                height: auto;
                aspect-ratio: 483/679;

                @media screen and (max-width:768px) {
                    flex: 0 0 calc(50% - 5px);
                    max-width: calc(50% - 5px);
                }

                @media screen and (max-width:480px) {
                    flex: 0 0 80%;
                    max-width: 80%;
                }

                transition: all 0.3s ease-in-out;

                &:hover {
                    filter: brightness(1.1);
                }
            }
        }
    }
}

.area-7 {
    background: var(--white);
    padding: 44px 0;

    .container {
        h2 {
            font-weight: 400;
            font-size: 42px;
            line-height: 1.3;
            text-align: center;
            color: var(--yellow);

            @media screen and (max-width:768px) {
                font-size: 28px;
            }
        }

        .p1 {
            font-weight: 500;
            font-size: 20px;
            line-height: 1.15;
            letter-spacing: 0;
            text-align: center;
            max-width: 920px;
            padding: 20px 0 40px;

            strong {
                font-weight: 700;
            }

            @media screen and (max-width:768px) {
                font-size: 16px;
                padding: 15px 0 25px;
            }
        }

        .box__card {
            display: flex;
            flex-direction: row;
            gap: 15px;
            justify-content: center;
            align-items: stretch;
            flex-wrap: nowrap;
            width: 100%;

            @media screen and (max-width:768px) {
                flex-wrap: wrap;
                gap: 20px;
            }

            .card {
                flex: 1;
                min-width: 0;
                height: auto;

                @media screen and (max-width:768px) {
                    flex: 0 0 calc(50% - 15px);
                    max-width: calc(50% - 15px);
                }

                @media screen and (max-width:420px) {
                    flex: 0 0 100%;
                    max-width: 230px;
                }

                .image {
                    width: 100%;
                    aspect-ratio: 239/312;
                    transition: all 0.3s ease-in-out;

                    &:hover {
                        filter: brightness(1.2);
                    }

                    @media screen and (max-width:768px) {
                        width: 43%;
                        aspect-ratio: auto;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin: 0 auto;
                    }
                }

                h3 {
                    font-weight: 600;
                    font-size: 20px;
                    line-height: 1.3;
                    letter-spacing: 0;
                    padding: 16px 0;

                    @media screen and (max-width:768px) {
                        font-size: 16px;
                        padding: 5px 0;
                        margin: 0;
                        text-align: center;
                    }
                }

                .text {
                    font-weight: 400;
                    font-size: 18px;
                    line-height: 1.35;
                    letter-spacing: 0;

                    @media screen and (max-width:768px) {
                        font-size: 15px;
                        margin: 0;
                        text-align: center;
                    }
                }
            }
        }

        .button {
            max-width: 465px;
            width: 38%;
            min-width: 321px;
            height: 58px;
            margin: 25px 0;
            font-size: clamp(0.938rem, 0.265rem + 1.05vw, 1.25rem);

            @media screen and (max-width:768px) {
                height: 50px;
                font-size: 14px;
                min-width: 292px;
            }
        }
    }
}

.area-8 {
    background: var(--white);

    .container {
        .box {
            max-width: 1200px;
            width: 100%;
            border-radius: 200px;
            background-color: var(--yellow-background);
            color: var(--gray-card);
            padding: 35px 40px;
            display: flex;
            flex-direction: row;
            gap: 20px;
            align-items: center;
            justify-content: space-around;

            @media screen and (max-width:768px) {
                flex-direction: column;
                justify-content: center;
                align-items: center;
                border-radius: 24px;
                padding: 30px 25px;
                gap: 20px;
            }

            .box__text {
                display: flex;
                flex-direction: column;
                gap: 10px;
                max-width: 610px;

                h2 {
                    font-weight: 400;
                    font-size: clamp(1.5rem, 0.057rem + 3.006vw, 2.688rem);
                    line-height: 1.3;
                    color: var(--gray-card);

                    @media screen and (max-width:768px) {
                        font-size: 24px;
                        text-align: center;
                    }
                }

                p {
                    font-weight: 400;
                    font-size: clamp(0.875rem, 0.723rem + 0.316vw, 1rem);
                    line-height: 1.2;
                    letter-spacing: 0;

                    @media screen and (max-width:768px) {
                        font-size: 14px;
                        text-align: center;
                    }
                }
            }

            .box__button {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                @media screen and (max-width:768px) {
                    width: 100%;
                }

                .button {
                    display: flex;
                    flex-direction: row;
                    gap: 7px;
                    max-width: 292px;
                    min-width: 292px;
                    height: 48px;

                    @media screen and (max-width:768px) {
                        min-width: unset;
                        max-width: 100%;
                        width: 100%;
                    }

                    .icon {
                        width: 20px;
                        height: 20px;
                    }

                    p {
                        font-weight: 600;
                        font-size: 16px;
                        line-height: 100%;
                        letter-spacing: 0;
                    }
                }
            }
        }
    }
}

.area-9 {
    padding: 55px 0;

    .container {
        max-width: 1603px;

        .box__container {
            width: 100%;
            display: flex;
            flex-direction: row;
            gap: 10px;
            justify-content: space-between;
            align-items: stretch;
            flex-wrap: nowrap;

            @media screen and (max-width:768px) {
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                gap: 15px;
                padding-bottom: 20px;
            }

            .box {
                flex: 1;
                min-width: 0;

                @media screen and (max-width:768px) {
                    flex: 0 0 calc(50% - 10px);
                    max-width: calc(50% - 10px);
                }

                @media screen and (max-width:480px) {
                    flex: 0 0 100%;
                    max-width: 227px;
                }

                h3 {
                    font-weight: 700;
                    font-size: 24px;
                    text-align: center;
                    line-height: 1.3;

                    @media screen and (max-width:768px) {
                        font-size: 20px;
                    }
                }

                .text {
                    font-weight: 500;
                    font-size: 16px;
                    text-align: center;
                    line-height: 1.2;

                    @media screen and (max-width:768px) {
                        font-size: 14px;
                    }
                }
            }
        }

        h2 {
            font-weight: 400;
            font-size: 42px;
            line-height: 1.3;
            text-align: center;

            @media screen and (max-width:768px) {
                font-size: 28px;
            }
        }

        .caption {
            font-weight: 400;
            font-size: 16px;
            line-height: 1.2;
            letter-spacing: 0;
            text-align: center;
            max-width: 830px;

            @media screen and (max-width:768px) {
                font-size: 14px;
            }
        }
    }
}

.area-10 {
    background: var(--white);

    .container {
        max-width: none;
        margin: 0 auto;
        padding: 0;
        display: flex;
        flex-direction: row;
        align-items: stretch;

        @media screen and (max-width:768px) {
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        p {
            font-weight: 400;
            font-size: clamp(1.438rem, 0.539rem + 1.404vw, 2.25rem);
            line-height: 1.2;
            letter-spacing: 0;

            strong {
                font-weight: 700;
            }

            @media screen and (max-width:768px) {
                font-size: 16px;
            }
        }

        .box__left {
            display: flex;
            flex-direction: column;
            align-items: end;
            justify-content: center;
            color: var(--gray-card);
            background-color: var(--yellow-background);
            flex: 1;

            @media screen and (max-width:768px) {
                width: 100%;
                align-items: center;
                justify-content: center;
                padding-bottom: 22px;
            }

            .box__text {
                max-width: 708px;
                margin: 0 3.6vw;
                display: flex;
                flex-direction: column;
                gap: 1.4vw;
                color: var(--gray-card);
                background-color: var(--yellow-background);

                @media screen and (max-width:768px) {
                    margin: 0;
                    padding: 25px 20px;
                    gap: 15px;
                    text-align: center;
                }
            }

            h2 {
                font-weight: 400;
                font-size: clamp(1.438rem, 0.539rem + 1.404vw, 2.25rem);
                line-height: 1.3;
                letter-spacing: 0;
                color: var(--yellow);

                strong {
                    font-weight: 700;
                }

                @media screen and (max-width:768px) {
                    font-size: 24px;
                    text-align: center;
                }
            }

            h3 {
                font-weight: 600;
                font-size: clamp(1rem, 0.724rem + 0.432vw, 1.25rem);
                line-height: 1.2;
                letter-spacing: 0;
                max-width: 610px;

                @media screen and (max-width:768px) {
                    font-size: 16px;
                    text-align: center;
                    max-width: 100%;
                }
            }

            p {
                font-weight: 400;
                font-size: clamp(1rem, 0.724rem + 0.432vw, 1.25rem);
                line-height: 1.2;
                letter-spacing: 0;
                max-width: 610px;

                @media screen and (max-width:768px) {
                    font-size: 14px;
                    text-align: center;
                    max-width: 100%;
                }
            }

            .button {
                max-width: 465px;
                width: 23.8vw;
                min-width: 285px;
                height: auto;
                aspect-ratio: 465/58;
                padding-top: 0;
                padding-bottom: 0;
                margin-top: -0.5vw;
                font-size: clamp(0.775rem, 0.275rem + 0.8vw, 1.25rem);

                @media screen and (max-width:768px) {
                    width: 100%;
                    min-width: unset;
                    max-width: 100%;
                    aspect-ratio: auto;
                    height: 50px;
                    margin-top: 10px;
                    font-size: 14px;
                }
            }
        }

        .box__right {
            display: flex;
            flex-direction: column;
            gap: 1.2vw;
            background-color: var(--gray-card);
            color: var(--yellow);
            border-bottom-right-radius: 200px;
            padding: 4vw 3vw;
            min-width: 772px;
            width: 40.7vw;

            @media screen and (max-width:1600px) {
                min-width: unset;
                width: 48vw;
            }

            @media screen and (max-width:768px) {
                border-bottom-right-radius: 0px;
                width: 100%;
                align-items: center;
                justify-content: center;
                padding: 30px 20px;
                gap: 10px;
                min-width: unset;
                text-align: center;
            }

            .title {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 10px;
                max-width: 610px;

                img {
                    max-width: 50px;
                    height: auto;
                    aspect-ratio: 1;
                }

                h2 {
                    font-weight: 400;
                    /* font-size: 36px; */
                    font-size: clamp(1.438rem, 0.539rem + 1.404vw, 2.25rem);
                    line-height: 1.3;
                    letter-spacing: 0;
                    color: white;
                }
            }

            h3 {
                font-weight: 700;
                font-size: clamp(1.438rem, 0.539rem + 1.404vw, 2.25rem);
                line-height: 1.3;
                letter-spacing: 0;

                &.yellow {
                    color: var(--yellow);
                }

                &.white {
                    color: white;
                    margin: 10px 0 5px;
                }
            }

            .box__ticket {
                display: flex;
                flex-direction: column;
            }

            .box__commission {
                display: flex;
                flex-direction: column;
                gap: 0px;
            }

            .box__price {
                display: flex;
                flex-direction: row;
                color: var(--yellow);
                align-items: baseline;
                gap: 10px;

                span {
                    font-weight: 700;
                    line-height: 1.3;
                    letter-spacing: 0;
                }

                .small {
                    font-size: clamp(1.438rem, 0.539rem + 1.404vw, 2.25rem);
                }

                .big {
                    font-size: clamp(4.063rem, 0.962rem + 4.133vw, 6rem);
                }
            }
        }
    }
}

.area-11 {
    .container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 50px 5% 117px;

        @media screen and (max-width:768px) {
            padding: 30px 20px 60px;
        }

        h2 {
            font-weight: 400;
            font-size: clamp(1.625rem, 0.104rem + 2.376vw, 3rem);
            line-height: 1.3;
            letter-spacing: 0;
            text-align: center;
            color: var(--yellow);
            text-transform: uppercase;

            strong {
                font-weight: 700;
            }

            @media screen and (max-width:768px) {
                font-size: 22px;
            }
        }

        h3 {
            font-weight: 400;
            font-size: clamp(1.125rem, 0.019rem + 1.728vw, 2.125rem);
            line-height: 1.2;
            letter-spacing: 0;
            text-align: center;

            @media screen and (max-width:768px) {
                font-size: 16px;
            }
        }
    }
}

.area-12 {
    background-image: url("https://bucket-seed.s3.us-east-2.amazonaws.com/lpbeauty.com.br/lp/v2/area_11_banner.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    max-height: 1282px;
    min-height: 692px;
    aspect-ratio: 1922/1282;
    position: relative;

    @media screen and (max-width:768px) {
        min-height: 500px;
        aspect-ratio: auto;
    }

    .container {
        .box__text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 27px;
            padding: 30px 55px;
            background-color: var(--gray-card);
            color: white;
            max-width: 1150px;
            border-radius: 24px;
            position: absolute;
            top: -77px;

            @media screen and (max-width:768px) {
                position: relative;
                top: 0;
                padding: 25px 20px;
                gap: 15px;
                border-radius: 16px;
                margin: 20px 5%;
            }

            p {
                font-weight: 500;
                font-size: 20px;
                line-height: 1.3;
                letter-spacing: 0;
                text-align: center;

                &.t2 {
                    max-width: 920px;
                }

                @media screen and (max-width:768px) {
                    font-size: 14px;
                }
            }
        }

        .box__card {
            display: flex;
            flex-direction: row;
            gap: 70px;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            max-width: 900px;
            position: absolute;
            bottom: 0px;

            @media screen and (max-width:920px) {
                gap: 10px;
            }

            @media screen and (max-width:768px) {
                position: relative;
                bottom: auto;
                flex-wrap: wrap;
                gap: 15px;
                max-width: 100%;
                padding: 20px 5%;
            }

            .card {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 0px;
                border-radius: 24px;
                background-color: var(--gray-card);
                color: white;
                flex: 1;
                min-width: 0;
                height: auto;
                aspect-ratio: 219/273;

                @media screen and (max-width:920px) {
                    aspect-ratio: auto;
                    padding: 20px 10px;
                }

                @media screen and (max-width:768px) {
                    flex: 0 0 100%;
                    max-width: 246px;
                    aspect-ratio: auto;
                    padding: 25px 20px;
                }

                transition: all 0.3s ease-in-out;

                &:hover {
                    filter: brightness(1.2);
                }

                .icon {
                    max-width: 83px;
                    width: 83px;
                    aspect-ratio: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0 auto;

                    @media screen and (max-width:768px) {
                        max-width: 60px;
                        width: 60px;
                    }

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }

                h3 {
                    font-weight: 700;
                    font-size: 16px;
                    line-height: 1.3;
                    letter-spacing: 0;
                    text-align: center;
                    text-transform: uppercase;
                    max-width: 67%;
                    margin-top: 5px;

                    @media screen and (max-width:768px) {
                        font-size: 14px;
                    }
                }

                p {
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 1.3;
                    letter-spacing: 0;
                    text-align: center;
                    max-width: 75%;
                    margin-top: 10px;

                    @media screen and (max-width:768px) {
                        font-size: 13px;
                    }
                }
            }
        }
    }
}

.area-13 {
    background: var(--white);

    .container {
        display: flex;
        flex-direction: row;
        gap: 30px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: 50px 5% 0;

        @media screen and (max-width:768px) {
            flex-direction: column;
            gap: 15px;
            padding: 30px 20px 0;
        }

        .button {
            max-width: 465px;
            height: 58px;

            @media screen and (max-width:768px) {
                max-width: 100%;
                height: 50px;
                font-size: 16px;
            }
        }
    }
}

.area-faq {
    background: var(--white);
    color: var(--black);

    .container {
        padding: 80px 5%;

        @media screen and (max-width:768px) {
            padding: 40px 20px;
        }

        .faq-title {
            font-family: 'Montserrat', sans-serif;
            font-weight: 300;
            font-size: 40px;
            line-height: 1.3;
            letter-spacing: 0;
            text-align: center;
            color: var(--gray);

            @media screen and (max-width:768px) {
                font-size: 26px;
            }
        }


        .faq-container {
            max-width: 895px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding-top: 60px;
            padding-bottom: 25px;
            width: 100%;

            @media screen and (max-width:950px) {
                padding-top: 35px;
            }

            hr {
                width: 100%;
            }

            .faq-item {
                border-radius: 4px;
                overflow: hidden;
                height: fit-content;

                &.active {
                    height: fit-content;

                    hr {
                        opacity: 0.4;
                        border-color: var(--black);
                        transition: border-color 0.3s linear;
                    }

                    .faq-button span {
                        transition: all 0.3s linear;
                        color: var(--black);
                    }
                }

                .faq-button {
                    width: 100%;
                    padding: 8px 10px;
                    min-height: 36px;
                    display: flex;
                    justify-content: space-between;
                    background-color: var(--white);
                    align-items: center;
                    border: none;
                    cursor: pointer;
                    text-align: left;
                    gap: 15px;
                    outline: none;
                    box-shadow: none;
                    position: relative;
                    z-index: 10;

                    span {
                        font-weight: 500 !important;
                        color: var(--yellow) !important;
                        font-size: 14px !important;
                        line-height: 1.2 !important;
                    }

                    .toggle-icon {
                        svg {
                            transition: all 0.2s linear;
                            width: 14px;
                            height: 16px;
                        }
                    }
                }

                .answer {
                    width: 100%;
                    font-size: 12px !important;
                    font-weight: 400 !important;
                    color: var(--black) !important;
                    position: relative;
                    z-index: 1;
                    top: 0px;
                    max-height: 200px;
                    transition: all 0.3s linear;

                    a,
                    h1,
                    h2,
                    span,
                    td,
                    p {
                        font-size: 12px !important;
                        font-weight: 400 !important;
                        color: var(--black) !important;
                        margin: 0px !important;
                        padding: 0px !important;
                    }

                    &.hidden {
                        top: -110px;
                        max-height: 0px;
                        transition: all 0.3s linear;

                        @media screen and (max-width:555px) {
                            top: -180px;
                        }
                    }
                }
            }
        }
    }
}

.area-footer {
    background: var(--gray);

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 36px;

        @media screen and (max-width:768px) {
            padding-top: 25px;
        }

        .white_logo {
            max-width: 447px;
            height: auto;
            aspect-ratio: 447/111;

            @media screen and (max-width:768px) {
                max-width: 250px;
            }
        }

        .box-footer {
            width: 100%;
            padding: 10px 0px;
            display: flex;
            font-weight: 600;
            justify-content: space-between;
            font-size: 14px;

            @media screen and (max-width:768px) {
                flex-direction: column;
                align-items: center;
                gap: 5px;
                font-size: 12px;
            }
        }
    }
}