.no-scroll {
    overflow: hidden;
}

/* Video */
.video-hero {
    clip-path: inset(50% 50% 50% 50%);
    animation: reveal 1000ms cubic-bezier(0, 0, 0.32, 0.94) 2500ms forwards;
}

@keyframes reveal {
    0% {
        clip-path: inset(50% 50% 50% 50%);
    }
    100% {
        clip-path: inset(0% 0% 0% 0%);
    }
}


/* Logo Div */
.hero-logo-div{
    position: absolute;
    top: 70vh;
    left: 65vw;
    margin: 40px;
    transform: translate(0, 0);
    animation: logoPosition 1000ms cubic-bezier(0, 0, 0.32, 0.94) 2500ms forwards;
}

@keyframes logoPosition{
    0%{
        position: absolute;
        top: 70vh;
        left: 65vw;
        margin: 40px;
        transform: translate(0, 0);
    }
    100%{
        position: absolute;
        top: 50vh;
        left: 50vw;
        margin: 0;
        transform: translate(-50%, -50%);
    }
}

.hero-logo-div rect {
    fill: #153B3A;
    opacity: 0.4;
    animation: logoColor 1000ms cubic-bezier(0, 0, 0.32, 0.94) 2500ms forwards;
}

@keyframes logoColor {
    0%{
        fill: #153B3A;
        opacity: 0.4;
    }
    100%{
        fill: #F8F7F4;
        opacity: 1;
    }
}

/* Logo Form E */
.hero-logo-e g {
    transform: translateY(-200px);
    animation: logoTranslateTop 1000ms cubic-bezier(0, 0, 0.32, 0.94) 600ms forwards;
}

@keyframes logoTranslateTop {
    0%{
        transform: translateY(-200px);
    }
    100%{
        transform: translateY(0px);
    }
}


/* Logo Form Baseline */
.hero-logo-baseline g {
    transform: translateY(200px);
    animation: logoTranslateBottom 1000ms cubic-bezier(0, 0, 0.32, 0.94) 600ms forwards;
}

@keyframes logoTranslateBottom {
    0%{
        transform: translateY(200px);
    }
    100%{
        transform: translateY(0px);
    }
}


/* Header Content */
.header-content {
    transform: translateY(-50vh);
    animation: translateTop 1000ms cubic-bezier(0, 0, 0.32, 0.94) 3500ms forwards;
}

@keyframes translateTop {
    0% {
        transform: translateY(-50vh);
    }
    100% {
        transform: translateY(0vh);
    }
}



/* Bottom Content */
.bottom-div {
    transform: translateY(50vh);
    animation: translateBottom 1000ms cubic-bezier(0, 0, 0.32, 0.94) 3500ms forwards;
}

@keyframes translateBottom {
    0% {
        transform: translateY(50vh);
    }
    100% {
        transform: translateY(0vh);
    }
}


@media screen and (max-width: 1024px){
    .hero-logo-div {
        position: absolute;
        top: 75vh;
        left: 45vw;
        width: 40%;
        margin: 40px;
        transform: translate(0, 0);
    }

    @keyframes logoPosition{
        0%{
            position: absolute;
            width: 40%;
            top: 75vh;
            left: 45vw;
            margin: 40px;
            transform: translate(0, 0);
        }
        100%{
            position: absolute;
            width: 70%;
            top: 50vh;
            left: 50vw;
            margin: 0;
            transform: translate(-50%, -100%);
        }
    }
}

@media screen and (max-width: 767px) {
    .hero-logo-div {
        position: absolute;
        top: 75vh;
        left: 10vw;
        width: 60%;
        margin: 40px;
        transform: translate(0, 0);
    }

    @keyframes logoPosition{
        0%{
            position: absolute;
            width: 60%;
            top: 75vh;
            left: 10vw;
            margin: 40px;
            transform: translate(0, 0);
        }
        100%{
            position: absolute;
            width: 80%;
            top: 50vh;
            left: 50vw;
            margin: 0;
            transform: translate(-50%, -100%);
        }
    }
}