@media screen and (max-width: 991px) {
    .banner{
        background-size: cover;
    }
    .banner h1{
        font-size: 4rem;
    }
    .nav-toggle{
        display: block;
        color: green;
        font-size: 2.5rem;
        
    }
    .main-nav{
        overflow: initial;
    }
    .nav-links{
        z-index: 1;
        margin-top: 390px ;
        position: absolute;
        background-color: white;
        left: -100%;
        width: 100%;
        transition: 0.7s ease-in-out;
    }
    .nav-links.active{
        left: 0;
    }
    .nav-links ul{
        flex-direction: column;
    }
    .nav-links ul li a{
        font-size: 1rem;
    }
    .image{
        width: 50%;
        padding: 0px;
    }
    .image img{
        border-radius: 5px;
    }
    .card{
        flex-direction: column;
        align-items: center;
    }

}
@media screen and (max-width:  767px){
    .banner{
        padding: 35px;
        height: 120px;
    }
    .banner h1{
        font-size: 2rem;
    }
    .productcontainer{
        margin: 105px 0px 0px 0px;
       }


}
@media screen and (max-width:  479px){
    .banner{
        padding: 15px;
        height: 90px;
    }
    .product{
        width: 100%;
    }
    .product h1{
    }
    .product-section{
        grid-template-columns: 1fr 1fr ;
    }
    .footer-right h1{
        font-size: 2rem;
    }
    .footer-section{
        flex-direction:column;
    }

    .subfooter-section{
        flex-direction: column;
        
    }
    .subfooter-left h4{
        font-size: 0.7rem;
    }
    .subfooter-right i{
        margin-top: 10px;
        font-size: 0.8rem;
    }

}