#spacer {
    height: 80%;
}

@font-face {
    font-family: "Helvetica Neue LT Com";
    src: 
        url(/assets/fonts/helvetica-neue-lt-com/HelveticaNeueLTCom-BlkEx.ttf);
    font-weight: 900;
    
}

@font-face {
    font-family: "Helvetica Neue LT Com";
    src: 
        url(/assets/fonts/helvetica-neue-lt-com/HelveticaNeueLTCom-Ex.ttf);
    font-weight: 400;
    
}

@font-face {
    font-family: "Helvetica Neue LT Com";
    src: 
        url(/assets/fonts/helvetica-neue-lt-com/HelveticaNeueLTCom-Md.ttf);
    font-weight: 500;
}

@font-face {
    font-family: "Helvetica Neue";
    src: 
        url(/assets/fonts/helvetica-neue/HelveticaNeueMedium.otf);
    font-weight: 400;
}

#hero {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    height: 70vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    overflow: hidden;
    z-index: 1;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: -2;
    object-fit: cover;
}

#hero .arrow-container {
        position: absolute;
        align-items: center;
        justify-content: center;
        height: 10%;
        bottom: 0;
        left: 50%;
    }

.background-tint {
    background-color: rgba(0, 45, 98, 1);
    background-blend-mode: multiply;
}

.content {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-items: center;
    align-items: center;
    z-index: 2;
}

.tagline {
    font-family: "Helvetica Neue LT Com", sans-serif;
    font-weight: 900;
    font-size: 19px;
    margin: 6px;
    color: rgba(255, 221, 0, 1);
}

.heading {
    font-family: "Helvetica Neue LT Com", sans-serif;
    font-weight: 400;
    font-size: 4vmax;
    margin: 6px;
    color: rgba(255, 255, 255, 1)
}

.break {
    height: 500px;
}


#intro {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    background-color: rgba(159, 196, 217, 1);
    .text__container {
        justify-content: center;
        align-items: center;
        justify-self: center;
        grid-row: 2 / 3;
        width: 70%;
        text-align: center;
    }
    .text {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        p {
            text-align: center;
        }
    }
}

#innovation__section {
    grid-row: 3 / 4;
    .text__container {
        grid-row: 2 / 3;
        h2 {
            color: var(--secondary);
        }
        p {
            color: black;
        }
    }

    .parallax-image {
        background-image: url("/assets/images/parallaxing_images/parallax-img1.png");
        background-size: cover;
    }
}

.parallax__container {
    display: grid;
    grid-template-columns: repeat(8, minmax(50px, 1fr));
    grid-template-rows: repeat(8, minmax(50px, 1fr));
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
    z-index: 4;
    pointer-events: none;
    overflow: visible;
}

#section__banner {
    grid-row: 4 / 5;
    height: 600px;
}

#section__image {
    background: url('/assets/images/computer-room.png') no-repeat center top;
    background-size: cover;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    overflow: hidden;
    z-index: 1;
    grid-row: 1 / -1;
}


#driven__section {
    grid-row: 5 / 6;
    .text__container {
        grid-row: 2 / 3;
        h2 {
            color: var(--secondary);
        }
        p {
            color: black;
        }
    }
    .parallax__container {
        grid-template-columns: repeat(8, minmax(50px, 1fr));
        grid-template-rows: repeat(4, minmax(50px, 1fr));
        .parallax-image {
            background: url("/assets/images/parallaxing_images/parallax-img2.png");
            background-size: auto 100%;
            background-position: 45% 0%;

        }
    }
}

#vision__section {
    background-color: var(--slate);
    grid-row: 6 / 7;
    overflow: hidden;
    .text__container {
        grid-row: 2 / 3;
        h2 {
            color: var(--eggshell);
        }
        p {
            color: white;
        }
        .icon {
            stroke: var(--eggshell);
        }
    }
    .vision__image img {
        width: 100%;
        grid-row: 1 / 4;
        background-size: cover;
    }
}

.desktop__empty {
    width: 50%;
}