/* :where(:root, ::before, ::after) {
    --grid-container-padding-x: var(--unit-32);
} */

body {
    background-color: var(--color-black);
    color: var(--color-white);
}

body[data-scroll-y-dir-thresholed] .top-bar {
    background-color: var(--color-black);
}

.top-bar {
    background-color: transparent;
}

.logo-container__logo {
    fill: var(--color-white);
}

/*SECTION*/
.section__suptitle {
    font-size: var(--font-18);
    font-weight: var(--font-bold);
    color: var(--color-white);
}

.section__title {
    font-weight: var(--font-bold);
    font-size: var(--font-60);
}

.section__subtitle {
    display: inline-block;
    padding: var(--unit-8) var(--spacing-default);
    font-family: 'Secondary';
    font-size: var(--font-18);
    color: var(--color-white);
    border-radius: var(--border-radius-small);
    background-color: #1C1F2E;
}

.section__content {
    margin: var(--spacing-default) 0;
    line-height: 1.6;
}

/*HERO*/
.hero__subtitle {
    font-family: 'Secondary';
}

:where(.hero__years) {
    font-family: 'Primary';
    font-weight: var(--font-bold);
    color: var(--color-primary);
    font-size: var(--font-60);
}

.hero__symbol {
    fill: var(--color-primary);
}

.form--1 .select-virtual::after {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M10.3357 1.45248L5.81798 6.25251C5.50741 6.5825 4.983 6.5825 4.67243 6.25251L0.154718 1.45248C-0.184702 1.0918 0.070976 0.5 0.566242 0.5H9.9241C10.4194 0.5 10.6751 1.0918 10.3357 1.45248Z' fill='%23FFFFFF'/></svg>");
}

.form--1 .select-virtual select option {
    color: var(--color-black);
}



/*SMALL ONLY*/
@media (max-width: 63.9375rem) {
    .section {
        padding: 0;
        margin: var(--unit-50) 0;
    }

    .section__content {
        text-align: justify;
    }

    .section__subtitle {
        margin-bottom: var(--unit-16);
    }

    .section--one {
        margin-bottom: calc(-1 * var(--unit-100));
    }

    .section--one .image-3 {
        transform: translateX(50%) translateY(-50%);
    }

    .section--two {
        padding-bottom: var(--unit-100);
    }

    .section--two .image-1 {
        /* --aspect-ratio: 4 / 3;
        width: 50%;
        height: 50%;
        left: 50%; */
        width: 50%;
        height: auto;
        transform: translateY(50%) translateX(-50%);
    }
}

/*LARGE ONLY*/
@media (min-width: 64rem) {
    .hero {
        height: calc(var(--screen-height, 100vh) - var(--top-bar-height));
    }

    .section {
        margin: var(--unit-100) 0;
        height: var(--screen-height, 100vh);
        padding: var(--unit-16) 0;
    }

    .menu__submenu-items {
        background-color: var(--color-black);
    }

    .large-self-right {
        margin-left: auto;
    }

    .section--two .image-1,
    .section--two .image-2 {
        width: 60%;
    }

    .section--two .image-2 {
        transform: translateY(-25%);
    }


    .hero__symbol {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        height: 100%;
        pointer-events: none;
    }

    .arrow-down {
        transition: opacity 0.4s ease;
        opacity: 1;
        pointer-events: auto;
    }

    .arrow-down.is-hidden {
        opacity: 0;
        pointer-events: none;
    }


    /*
    .large-self-left {
        margin-right: auto;
    }

    .large-self-center {
        margin-left: auto;
        margin-right: auto;
    }

    .large-self-bottom {
        margin-top: auto;
    }

    .large-self-top {
        margin-bottom: auto;
    } */
}