.content-container {

}

.responsive-flex-filler {
    flex-grow: 1;
}

.fullscreen-section {
    height: 100vh;
    width: 100%;
    position: relative;
}

.fullscreen-section-l {
    height: 1100px;
    width: 100%;
    position: relative;
}

.hero-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
}

.hero-content-container {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
}

.hero-column {
    display: flex;
    height: 100%;
    width: 50%;
}

.hero-column-left {
    width: fit-content;
    height: 70vh;
    align-self: center;
    display: flex;
    flex-direction: column;
}

.hero-title {
    font: normal normal normal 101px/109px Anton;
    letter-spacing: 0;
    color: #FFFFFF;
    opacity: 1;
    margin-bottom: 20px;
}

.hero-sub-title {
    font: normal normal normal 51px/59px Anton;
    letter-spacing: 0;
    color: #FFFFFF;
    opacity: 1;
    margin-bottom: 20px;
}

.best-selling-button {
    cursor: pointer;
    background: var(--secondary) 0 0% no-repeat padding-box;
    box-shadow: 0 3px 20px #00000029;
    border-radius: 8px;
    width: 374px;
    height: 56px;
    text-align: center;
    font: normal normal bold 25px/56px Montserrat;
    letter-spacing: 0;
    color: var(--primary);
}

.best-selling-button a  {
    color: var(--primary);
    text-decoration: none;
}



@media (max-width: 986px) {

    .content-container {
        width: 100%;
    }

    .responsive-flex-filler {
        flex-grow: 0.5;
    }

    .hero-title {
        font: normal normal normal 80px/80px Anton;
    }

    .hero-sub-title {
        font: normal normal normal 31px/39px Anton;
    }

    .best-selling-button {
        width: 90%;
        height: 56px;
        font: normal normal bold 15px/56px Montserrat;
        letter-spacing: 0;
        color: var(--primary);
    }

    .hero-column {
        margin-left: 20px;
        width: 100%;
    }

    .hero-column-left {
        width: 100vw;
    }

    .fullscreen-section-l {
        height: 1150px;
    }

    .search-bar-container {
        width: 80%;
        margin-top: 10px;
        height: 40px;
        border-radius: 40px;
    }

    .search-bar-container>input {
        height: 35px;
        width: 100%;
        font: normal normal 500 20px/13px Montserrat;
        letter-spacing: -0.7px;
        background: transparent;
        color: #B4B4B4;
    }

}


@media (max-width: 986px) and (orientation: landscape) {
    .hero-title {
        font: normal normal normal 30px/30px Anton;
        margin-bottom: 10px;
    }

    .hero-sub-title {
        font: normal normal normal 21px/29px Anton;
        margin-bottom: 10px;
    }

    .hero-column-left {
        height: 80vh;
    }
    .content-container {
        width: 100%;
    }
    .hero-column {
        width: 97%;
    }
}