/* 1024px small labtops */
@media(max-width:1024px){
 .about-section .about-us{
    flex-direction: column;
 }
 .about-section .about-us .left img{
height: auto;
 }
 .contact-section .contact-container{
    flex-direction: column-reverse;
 }
 .product-section .product-container{
    flex-direction: column;
 }
}

/* 760px tablets */
@media(max-width:768px){
    nav{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: white;
        z-index: 99;
    }
    .nav-wrapper{
        position: fixed;
        top: 0;
        right: 0;
        width: 80%;
        background-color: white;
        color: black;
        z-index: 99;
        height: 100vh;
        transform: translateX(100%);
    }
    .menu-open{
        transform: translateX(0);
    }
    .nav-links{
        flex-direction: column;
        text-align: center;
        margin-top: 50px;
    }
    .nav-links a{
        color: black;
        display: block;
        padding: 20px 0;
    }
    .menu-btn{
        display: block;
        cursor: pointer;
        
    }
    #close-btn{
        position: absolute;
        left: 15px;
        top: 15px;
    }
    .hero-section{
        height: 75vh;
    }
    .poster-section .poster-container{
        flex-direction: column;
        padding-top: 20px;
    }
 
}

/* 600px mobile phones */
@media(max-width:600px){
 .hero-section .hero-content h1{
    font-size: 2.3rem;
 }
 .header h1{
    font-size: 1.5rem;
 }
 .product-gallery{
    grid-template-columns: 1fr 1fr;
 }

.product-gallery .gallery-item img{
    height: 150px;
}
.hero-general header h1{
    font-size: 2rem;

}
.product-section .product-container .product-view-gallery .thumbnail-list img{
    height: 60px;
}

.product-section .product-container .product-gallery .main-image img{
    height: 450px;
}
.hero-general{
    height: 300px;
}
}