@media only screen and (max-width: 1100px){
    html{
        font-size: 65%;
    }

    .hero img{
        width: 400px;
        height: 500px;
    }

    .small{
        padding: 0 5rem;
    }

    .col3{
        flex-basis: 20%;
        margin-right: 1rem;
    }
}

@media only screen and (max-width: 900px){
    html{
        font-size: 58%;
    }
}

@media only screen and (max-width: 850px){
    .navbar{
        position: relative;
    }

    .navbar nav{
        /* display: none; */
        visibility: hidden;
        position: absolute;
        top: 0;
        width:100vw;
        /* flex-direction: column; */
        align-items: center;
        padding: 3rem 4rem;
        background-color: #f0f0f0;
        color: #000;
        left: 0;
        height: 100vh;
        justify-content: center;
        opacity: .9;
        transition: all .6s ease-in-out ;
    }

    .navbar nav ul{
        flex-direction: column;
        /* background-color: #000; */
        color: white;
        height:90%;
        width: 100%;
        justify-content: center;
        align-items: center;
        font-size:3rem;
    }

    .open{
       visibility: visible;
    }

    .navbar nav ul li{
        color: #fff !important;
        font-size: 3rem;
    }

    .navbar .opend{
        display: block;
        font-size: 4rem;
        cursor: pointer;
    }

    .close{
        display: none;
        font-size:3rem;
        color:red;
    }

    /* .open{
        width
    } */
}

@media only screen and (max-width: 760px){
    .navbar{
        padding: 1rem 2rem;
    }
    .hero{
        flex-direction: column;
        align-items: center;
    }

    .hero-message{
        max-width: 40rem;
        text-align: center;
        margin-bottom: 2rem;
    }

    .col3{
        flex-basis: 100%;
        margin-bottom: 1rem;
    }

    .featuredProduct .row{
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .small-col{
        min-width:200px;
    }

    .featuredProduct .row .small-col{
        width: 50%;
        margin-bottom: 2rem;;
    }

    .lastestProducts .row{
        justify-content: center;
    }

    .small_col{
        margin-bottom: 2rem;
    }

    .offerText{
        margin-top: 2rem;
        text-align: center;
    }

    .brand{
        grid-template-columns: repeat(3, 1fr);
    }

    .brand img{
        width: 50%;
    }

    .footerDetails{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        place-items: center;
        justify-content: center;
    }

    .little_summary{
        display: flex;
        width:100%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* border: 1px solid white; */
        padding: 2rem;
    }
}

@media only screen and (max-width: 600px){
    html{
        font-size: 50%;
    }

    .offerImg img{
        width: 350px;
        height: 400px;
        display: flex;
        justify-content: center;
    }
}

@media only screen and (max-width: 500px){
    .hero{
        margin: auto 0;
        padding-bottom: 4rem;
        gap: 0;
    }

    .hero img{
        height: 300px;
    }
    .offerImg{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .offerText{
        margin-top: 6rem;
    }

    .offer .row{
        gap: 4rem;
        align-items: center;
        width: 100%;
    }
}

@media only screen and (max-width: 400px){
    .hero{
        padding: 3rem 0;
    }
    .hero img{
        width: 300px;
        height: 270px;
        display: flex;
        justify-content: center;
    }

    .testimonial{
        flex-direction: column;
        align-items: center;
    }

    .footerDetails{
        grid-template-columns: 1fr;
        place-items: center;
       row-gap:1rem;
    }

    .appLink{
        text-align: center;
    }

    .little_summary{
        text-align: center;
    }
}