/* HERO HERE */
#hero {
    width: 100%;
    overflow: hidden;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
    padding-top: var(--space-xl);
}

.hero-scroll-wrapper {
    height: 250vh;
    position: relative;
}
.rap_divs {
    transform: scale(0.9);
    transform-origin: center;
    width: 100%;
    /* margin: 30px auto; */
}
#hero video,
#hero img {
    position: absolute;
    top: 0;
    left: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    will-change: transform, filter;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#hero img {
    transform: translateZ(0);
    filter: blur(calc((1 - var(--progress, 0)) * 20px));
    transition: filter 0.1s linear;
}

#hero video {
    left: 50%;
    top: 0;
    transform-origin: center center;
    transform: translate(-50%, calc(var(--hero-y, 0) * 1px)) scale(var(--hero-scale, 1));
    transition: transform 0.1s linear;
}

#hero span,
#hero .hero_row {
    transition: transform 0.1s linear;
    will-change: transform;
    line-height: 0;
}

#hero_one,
#hero_two,
#hero_four {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

#hero_one {
    margin: 0 auto 35px -65px;
}

#hero_two {
    margin: 0 auto;
    justify-content: flex-start;
}

.hero_row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: var(--space-sm);
    margin-right: -165px;
}

#hero_three {
    position: relative;
    display: block;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 15px;
}

#hero_four {
    margin: 0 auto;
    padding-left: 4%;
    justify-content: flex-start;
}

#hero_one svg {
    height: clamp(50px, 8.6vw, 165px);
    width: auto;
}
#hero_two svg {
    height: clamp(80px, 13vw, 250px);
    width: auto;
}
#hero_three svg {
    height: clamp(70px, 12vw, 230px);
    width: auto;
}
#hero_four svg {
    height: clamp(65px, 10.7vw, 205px);
    width: auto;
}

#hero:before {
    content: "";
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
}

#hero .mobile {
    display: none;
}

@media (max-width: 1000px) {
.rap_divs {
    transform: scale(1.05);
}
#hero_two {
    justify-content: center;
} 
#hero_four {
    padding-left: 6%; 
} 
#hero {
    padding: 0;
}
}

@media screen and (max-width:667px) and (orientation: portrait) {
#hero .mobile {
    display: block;
}
#hero .mobile svg {
    /* width: 100vw;
    max-width: calc(100vw - 40px); */
    width: 100%;
    margin: auto;
    height: 100%;
}
#hero span {
    padding-inline: 25px;
    display: none;
}
#hero_one svg,
#hero_two svg,
#hero_three svg,
#hero_four svg {
    max-width: 92vw;
}
    /* #hero {
        height: 100vh;
    } */
#hero.not_show {
    visibility: hidden;
}

.hero-scroll-wrapper {
    position: sticky;
    top: 0;
    z-index: 0;
    /* height: 100vh; */
    height: 100% !important;
}
}

@media (max-width: 500px) {
    .hero_row {
        margin-right: 0;
    }
    #hero_one,
    #hero_four {
        margin-left: 0;
    }
}


@media (max-height: 990px) and (orientation: landscape) and (min-width: 993px) {
.rap_divs {
    transform: scale(0.85);
}
}

@media (max-height: 750px) and (orientation: landscape) and (min-width: 993px) {
.rap_divs {
    transform: scale(1);
} 
}

@media (max-height: 900px) and (orientation: landscape) and (min-width: 993px) {
    #hero_one {
        margin: 0 auto 20px -35px;
    }
    .hero_row {
        margin-right: -90px;
    }
    #hero_four {
        margin: 0 auto 0 -4%;
    }
    #hero_one svg {
        height: clamp(120px, 6.5vh, 120px); 
        width: auto;
    }
    #hero_two svg {
        height: clamp(140px, 10vh, 180px);
        width: auto;
    }
    #hero_three svg {
        height: clamp(135px, 9vh, 165px);
        width: auto;
    }
    #hero_four svg {
        height: clamp(130px, 8vh, 145px);
        width: auto;
    }
    #hero_two,
    #hero_four {
        justify-content: center;
    }
}