@media only screen and (max-width:768px) {



    /* color changer -------------- */



  

    /* --------------------------- bar green---------------------------------  */


    .bar{
        flex-direction: column;
        height: 5.5rem;
        align-items: center;

        align-items: flex-start;
        padding-left: 4rem;
    }
    .nav-bar{
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    /* navigation bar  */
.nav{
    display: none;
}


    /*------------------------- home section ----------------------------- */

    .first-heading{
        padding-top: 10rem;
       
    }
    .head{
        font-size: 25px;
    }
    /* -------------------second section ---------------- */
    .icon-flex{
        flex-direction: column;
    }
    .icon2 , .icon3 , .icon4{
        margin-top: 1.5rem;

    }


    /* ---------- third section ---------------- */
    .flex-image{
        
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .image2{
        height: 300px;
    }
    .category-1,.category-2,.category-3,.category-4 , .category{
        width: 450px;
        height: 400px;

    }
    .category-4{
        margin-top: 1rem;
    }


    /*----------------------- 4th section---------------- */

    .product-flex{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 1rem;
    }
    .product-1 , .product-2, .product-3,.product-4,.product-5,.product-6,.product-7,.product-8{
        width: 350px;
        height: 350px;
        margin-top: 2rem;
    }

/* ------------------ 5th section card ---------------- */

.head4{
    font-size: 20px;
}

.para8{
    font-size: 20px;

}
.head6{
   
    font-size: 30px;

}
.para9{
    font-size: 20px;
    color: var(--bs-green);
}
.card-flex{
    text-align: center;

}
/* ------------------ 6th section ------------------ */





/* ------------------ 7th section ------------------ */
.client-card{
   flex-direction: column;
    justify-content: center;
    align-items: center;
}

#client-card{
    width: 200px;
    padding: 2rem;
}

/* ------------------ 8th section ------------------ */
.form{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 12rem;
}
#input{
    height: 2.5rem;
    width: 20rem;
}
#input1{
    height: 3rem;
    background: var(--bs-green);
    padding: 1rem;
    text-transform: capitalize;
    
}


/* ---------------- about us page ------------------- */

.about-section{
    flex-direction: column;
}
.about-image{
    margin-left: 0rem;
    width: 100%;
}
.about-text{
    margin-left: 0.5rem;

}

/* contact us */

.contact-section{
    background: var(--bs-gray);
    height: 230vh;
}
.contact-flex{


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

}
#contact-form{
    width: 100%;
    
}
#contact-partner{
    width: 100%;
    height: auto;
}
#input3{
    width: 100%;
    margin: 1rem;
    padding: 1rem;
    border: 1px solid rgb(187, 181, 181) !important;
    text-transform: capitalize;
}
textarea{
    width: 100%;
    height: 40%;
    margin: 1rem;
    padding: 1rem;
    border: 1px solid rgb(187, 181, 181) !important;

}





/* ----------------footer --------------------- */

    
}

@media only screen and (max-width:480px) {

    /* --------------------------- bar green---------------------------------  */

    .bar{
        flex-direction: column;
        height: 6.5rem;
        justify-content: space-evenly;
        padding-left: 2rem;
    }
    .return-product{
        font-size: 10px;

    }
     /*------------------------- home section ----------------------------- */

     .first-heading{
        padding-top: 13rem;
       
    }
    .head{
        font-size: 20px;
        letter-spacing: 0px;
        text-align: center;
    }
    .para1{
        text-align: center;
    }

    /* -------------- SECOND SECTION ------------------- */


    .icon2 , .icon3 , .icon4{
        margin-top: 1.5rem;

    }

     /*----------------------- 3th section---------------- */

    .category-1,.category-2,.category-3,.category-4 , .category{
        width: 300px;
        height: 350px;

    }
     /*----------------------- 4th section---------------- */

    
    .product-1 , .product-2, .product-3,.product-4,.product-5,.product-6,.product-7,.product-8{
        width: 300px;
        height: 350px;
        margin-top: 2rem;
    }
/* ------------------ 6th section ------------------ */

.card-employe{
    flex-direction: column;
}
.testimony-employ{
    margin-top: 1.5rem;
}
.product-heading .head3{
    font-size: 30px;
    padding-bottom: 1rem;
}


/* ---- about us page ------ */


.about-heading{
    font-size: 30px;

}
.form{
    height: 18rem;
}
#input1{
    margin-top: 3px;
    
}

}