header {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 100vw;
    height: 100vh;
}

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

.title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.title-container h1 {
    text-align: center;
    font-family: 'HKGrotesk';
    font-weight: 500;
}

.features {
    display: flex;
}

.feature {
    border: 2px solid white;
    background-color: black;
}

.feature-text {
    font-family: 'NeueMachina-Regular';
    color: white;
}

#logo {
    height: 3rem;
    width: 12rem;
}

#brands {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sub-header {
    font-family: 'HKGrotesk';
    font-weight: 400;
}

.brands-container {
    border: 2px solid white;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5vw;
    padding: 2vh 15vw;
}

.brands-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6vw;
}

.brand-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5vh;
}

.brand-wrapper:hover {
    box-shadow: 0px 0px 5px 1px darkgray; 
    text-decoration: none !important;
}

.brand-logo {
    max-width: 20w;
    max-height: 8vh;
    object-fit: fill;
}

.brand-name {
    font-family: 'HKGrotesk';
}

.brands-content {
    max-width: 55vw;
    text-align: center;
    font-family: 'HKGrotesk';
    font-weight: 300;
}

#description {
    margin-top: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.description-first,
.description-second {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.description-first {
    flex-direction: row;
}

.description-second {
    flex-direction: row-reverse;
}

.description-image {
    max-width: 55vw;
    object-fit: fill;
}

.description-content {
    max-height: 35vh;
    max-width: 45vw;
}

.description-content-first h3 {
    font-family: "HKGrotesk";
    font-weight: 600;
}

.description-content-first p {
    font-weight: 300;
}

.description-content-second h3 {
    font-family: "HKGrotesk";
    font-weight: 600;
}

.description-content-second p {
    font-weight: 300;
}

#video {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.video-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.underline {
    max-width: 20vw;
    margin-bottom: 2vw;
}

.video-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid rgb(151, 149, 149);
}

#upcoming {
    display: flex;
    justify-content: center;
}

.upcoming-description {
    display: flex;
    flex-direction: column;
}

.upcoming-header {
    font-family: 'HKGrotesk';
    font-weight: 300;
}

@media (max-width:350px) {
    header {
        height: auto;
    }
    
    .title-container h1 {
        font-size: 10vw;
        margin-bottom: 0;
        margin-top: 8vh;
    }

    .title-content {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100vw;
        background-image: url('/images/header-background-mobile.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        gap: 7vw;
    }
    
    .features {
        flex-direction: column;
        justify-content: space-around;
        gap: 5vw;
        margin-bottom: 0;
        margin-top: 2vh;
    }
    
    .feature {
        width: 60vw;
        padding: 0.7vh 0;
        font-size: 2.7vw;
    }

    .arrow-down {
        max-width: 15vw;
        height: auto;
        margin-bottom: 5vh;
    }

    .sub-header {
        font-size: 6vw;
    }

    .brand-name {
        font-size: 2.5vw;
    }
    
    .brands-content {
        max-width: 90vw;
        font-size: 2.4vw;
        padding-top: 2vh;
    }

    .description-content-first h3 {
        font-size: 3vw;
        padding-right: 3vw;
        padding-left: 3vw;
    }
    
    .description-content-first p {
        font-size: 2.3vw;
        padding-right: 5vw;
        padding-left: 3vw;
        max-width: 50ch;
    }
    
    .description-content-second h3 {
        font-size: 3vw;
        padding-left: 5vw;
        padding-right: 2vw;
    }
    
    .description-content-second p {
        font-size: 2.3vw;
        padding-left: 5vw;
        padding-right: 2vw;
        max-width: 50ch;
    }

    .video-container {
        width: 100vw;
        height: 30vh;
    }
    
    #video {
        margin-top: 5vh;
        width: 100%;
    }
    
    .video-title .sub-header {
        margin-bottom: 0;
        font-size: 5vw;
    }
    
    .underline {
        max-width: 20vw;
        margin-bottom: 2vw;
    }

    #upcoming {
        margin-top: 7vh;
        width: 100%;
        flex-direction: column;
        align-items: center;
    }
    
    #launching-soon-gif-container {
        max-width: 90vw;
    }
    
    .upcoming-description {
        width: 95%;
        align-items: flex-start;
        max-width: 60ch;
        gap: 3vh;
    }
    
    .upcoming-header {
        text-align: left;
        font-size: 5vw;
        margin: 0;
        max-width: 30ch;
    }
    
    .upcoming-content {
        align-self: flex-end;
        text-align: right;
        max-width: 40ch;
        font-size: 3.5vw;
    }

    .upcoming-content a {
        text-decoration: underline;
    }
}

@media (min-width: 350px) and (max-width: 750px) {
    header {
        height: auto;
    }
    
    .title-container h1 {
        font-size: 9vw;
        margin-bottom: 0;
        margin-top: 8vh;
    }

    .title-content {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100vw;
        background-image: url('/images/header-background-mobile.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        gap: 7vw;
    }
    
    .features {
        flex-direction: column;
        justify-content: space-around;
        gap: 5vw;
        margin-bottom: 0;
        margin-top: 2vh;
    }
    
    .feature {
        width: 40vw;
        padding: 0.3vh 0;
        font-size: 2.3vw;
    }

    .arrow-down {
        max-width: 10vw;
        height: auto;
        margin-bottom: 5vh;
    }

    .sub-header {
        font-size: 4.2vw;
    }

    .brand-name {
        font-size: 2vw;
    }
    
    .brands-content {
        max-width: 70vw;
        font-size: 1.9vw;
        padding-top: 2vh;
    }

    .description-content-first h3 {
        font-size: 2.3vw;
        padding-right: 3vw;
        padding-left: 3vw;
    }
    
    .description-content-first p {
        font-size: 1.8vw;
        padding-right: 5vw;
        padding-left: 3vw;
        max-width: 50ch;
    }
    
    .description-content-second h3 {
        font-size: 2.3vw;
        padding-left: 5vw;
        padding-right: 2vw;
    }
    
    .description-content-second p {
        font-size: 1.8vw;
        padding-left: 5vw;
        padding-right: 2vw;
        max-width: 50ch;
    }

    .video-container {
        width: 100vw;
        height: 55vh;
    }
    
    #video {
        margin-top: 5vh;
        width: 100%;
    }
    
    .video-title .sub-header {
        margin-bottom: 0;
        font-size: 4.2vw;
    }
    
    .underline {
        max-width: 20vw;
        margin-bottom: 2vw;
    }

    #upcoming {
        margin-top: 10vh;
        width: 100%;
        flex-direction: column;
        align-items: center;
    }
    
    #launching-soon-gif-container {
        max-width: 90vw;
    }
    
    .upcoming-description {
        width: 95%;
        align-items: flex-start;
        max-width: 60ch;
        gap: 5vh;
    }
    
    .upcoming-header {
        text-align: left;
        font-size: 3.5vw;
        margin: 0;
        max-width: 35ch;
    }
    
    .upcoming-content {
        align-self: flex-end;
        text-align: right;
        max-width: 50ch;
        font-size: 2.5vw;
    }

    .upcoming-content a {
        text-decoration: underline;
    }
}

@media (min-width: 750px) and (max-width: 1000px) {
    .title {
        margin-bottom: 5vh;
        height: 100vh;
    }
    
    .title-container h1 {
        font-size: 7vw;
        margin-bottom: 0;
        margin-top: 6vh;
    }

    .title-content {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 100vw;
        background-image: url('/images/lockstart-mobile-header-no-underline.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .features {
        flex-direction: column;
        justify-content: space-around;
        gap: 5vw;
        margin-bottom: 1.7rem;
    }
    
    .feature {
        width: 40vw;
        padding: 0.3vh 0;
        font-size: 1.7vw;
    }

    .arrow-down {
        max-width: 10vw;
        height: auto;
    }

    .sub-header {
        font-size: 3.5vw;
    }

    .brand-name {
        font-size: 1.5vw;
    }
    
    .brands-content {
        font-size: 1.6vw;
        padding-top: 2vh;
    }

    .description-content-first h3 {
        font-size: 1.8vw;
        padding-right: 5vw;
        padding-left: 0vw;
    }
    
    .description-content-first p {
        font-size: 1.4vw;
        padding-right: 5vw;
        padding-left: 0vw;
        max-width: 45ch;
    }
    
    .description-content-second h3 {
        font-size: 1.8vw;
        padding-left: 5vw;
        padding-right: 2vw;
    }
    
    .description-content-second p {
        font-size: 1.4vw;
        padding-left: 5vw;
        padding-right: 2vw;
        max-width: 45ch;
    }

    .video-container {
        width: 90vw;
        height: 70vh;
    }
    
    #video {
        margin-top: 8vh;
        width: 100%;
    }
    
    .video-title .sub-header {
        margin-bottom: -15px;
        font-size: 4vw;
    }
    
    .underline {
        max-width: 20vw;
        margin-bottom: 2vw;
    }

    #upcoming {
        margin-top: 12vh;
        width: 100%;
        flex-direction: row;
        align-items: flex-end;
    }
    
    #launching-soon-gif-container {
        max-width: 50vw;
    }
    
    .upcoming-description {
        align-items: flex-start;
        justify-content: center;
        text-align: left;
        max-width: 90ch;
    }
    
    .upcoming-header {
        font-size: 2.2vw;
        margin: 0;
    }
    
    .upcoming-content {
        max-width: 60ch;
        font-size: 1.5vw;
    }
}

@media (min-width: 1000px) {
    header {
        background-image: url('/images/lockstart-header-background-nounderline.png');
        justify-content: space-between;
    }

    .title {
        margin-bottom: 7.8vh;
    }
    
    .title-container h1 {
        font-size: 4vw;
        margin-bottom: 0;
    }
    
    .features {
        flex-direction: row;
        justify-content: space-around;
        gap: 0.5vw;
        margin-bottom: 1.7rem;
    }
    
    .feature {
        width: 28vw;
        padding: 0.3vh 0;
        font-size: 1.3vw;
    }

    .sub-header {
        font-size: 3vw;
    }

    .brand-name {
        font-size: 1.4vw;
    }
    
    .brands-content {
        font-size: 1.2vw;
        padding-top: 2vh;
    }

    .description-content-first h3 {
        font-size: 1.8vw;
        padding-right: 5vw;
        padding-left: 0vw;
    }
    
    .description-content-first p {
        font-size: 1.4vw;
        padding-right: 5vw;
        padding-left: 0vw;
        max-width: 45ch;
    }
    
    .description-content-second h3 {
        font-size: 1.8vw;
        padding-left: 5vw;
        padding-right: 2vw;
    }
    
    .description-content-second p {
        font-size: 1.4vw;
        padding-left: 5vw;
        padding-right: 2vw;
        max-width: 45ch;
    }

    .video-container {
        width: 80vw;
        height: 70vh;
    }
    
    #video {
        margin-top: 10vh;
        width: 100%;
    }
    
    .video-title .sub-header {
        margin-bottom: -15px;
        font-size: 3.6vw;
    }
    
    .underline {
        max-width: 20vw;
        margin-bottom: 2vw;
    }

    #upcoming {
        margin-top: 12vh;
        width: 100%;
        flex-direction: row;
        align-items: flex-end;
    }
    
    #launching-soon-gif-container {
        max-width: 50vw;
    }
    
    .upcoming-description {
        align-items: flex-start;
        justify-content: center;
        text-align: left;
        max-width: 90ch;
    }
    
    .upcoming-header {
        font-size: 1.8vw;
        margin: 0;
    }
    
    .upcoming-content {
        max-width: 60ch;
        font-size: 1vw;
    }
}