@media only screen and (min-width:320px)and (max-width:768px){
    /*======= navbar =======*/
    .navbar{
        position: sticky;
    }
    .top-nav{
      display: none;
    }
    /*====== whatsapp logo start =======*/
    .whatsapp{
    bottom: 90px;
    }
    .whatsapp a{
        font-size: 40px !important;
        
    }
        /*====== whatsapp logo end =======*/
        /* offcanvas */
        
        .offcanvas {
         width: 65vw !important;
       
        
       }
       .offcanvas .offcanvas-header button{
     /* color:white; */
   
     margin:10px 10px 0 0;}
       
       .offcanvas .offcanvas-body ul li a{
         color: white !important;
       }
       .offcanvas .offcanvas-body ul li  .dropdown-menu {
               color: white !important;
       }
       .offcanvas .offcanvas-body ul li  .dropdown-menu .dropdown-item {
         
         overflow: hidden;
         color: white !important;
       }

    /*====== banner section start =======*/

    .banner .carousel-inner .form {

        height: 59vh;
        width: 100vw;
        left: 0;
        margin-top: 50vh;
        z-index:  11 !important;
    }
    .carousel-item img{
      height: 40vh;
    }
    /*====== banner section end =======*/

    /*====== about section start =======*/
    .about-container .container .hero .form {
      height: 500px;
      width:90vw;
      margin-left: 9px;
    }
        .about-container .container .hero .form h3 {
         font-size: 19px;
        }



    .about-container .hero img{
        width: 90vw;
        height: 40vh;
      margin-left: 7px;
      margin-bottom: 10px;
    }
    .about-container .container{
        
        width: 100vw;
    }
    .about-container .container .rer{
        margin-right: 10px;
        margin-top:510px !important;
        margin-left: 10Px !important;
    }
    .about-container .container .hero-text p{
      margin-top: -260px;
      margin-left: 10px !important;
      margin-right: 10px;
    }
    .about-container .container .hero-text p{
        font-size: 15px;
        margin-left: 10px;
    }
    .about-container .container .hero img{
      margin-top: -10px;
    }

        /*====== about section end =======*/
        /*====== counting box start =====*/
    .counting .count-container{
        height:80vh;
    }
    /*====== counting box end ======*/
     /*====== accordion section start =====*/
     .accordion .container .fq img{
      width: 90vw;
     }
     .accordion h1{
        font-size: 20px;
        width: 94vw;
        padding:10px 15px 10px 15px ;
     }
     .accordion .container .fq img{
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 90vw;
        height: 40vh;
     }
     /*====== accordion section end =====*/
     /*====== featurces section start =====*/
     .featurces h1{
        font-size: 20px;
        width: 90vw;
        padding:10px 15px 10px 15px ;
        margin-top: 20px;
     }
     /* hero part start */
     .hero p{
        margin-top: 50px;
     }
     .hero h2{
        font-size: 25px;
     }
     .hero-img img{
        width: 90vw;
        height:450px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin-left: 10px;
        margin-top: 20px;
     }
     /* hero part end */
     /*====== featurces section end =====*/

     /* services section start */
     .services .services-fluid h1{
        font-size: 35px;
     }
     .services .services-fluid p{
        font-size: 17px;
        width: 90vw;
        margin: auto;
        padding: 0;
     }
     .services .services-fluid hr{
      margin-left: 190px;
     }
     .services  .card{
        margin: auto;
     }
     /* services section end */
     /* our-services start */
     .services .our-services .container h1{
        font-size: 35px;
        margin: auto;
        text-align: center;

     }
     .services .our-services .container hr{
        margin-left: 20px;
        margin-bottom: 30px;
     }
     /* our-services end */
     /* manu-services start */
     .manu-services .container .image{
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
     }
     /* manu-services end */
.manu-services .container-fluid .container h4{
   margin-top: 8px;
}






     /* footer */
     .contact-footer .container .image{
      margin: 0px -12px -50px -24px;
      padding: 30px 50px 30px 50px;
     }
     .contact-footer .container .image .con a{
      font-size: 35px;

     }
     .contact-footer .container .contant{
      margin: 0px -12px -50px -24px;
      padding:20px 50px 50px 50px;
      
     }
     .contact-footer .container .contant h2{
      font-size: 20px !important;
      font-weight: 600;
    
     }
     .contact-footer .container .contant p{
      font-size: 17px;
      font-weight: 510;
     }
     .contact-footer .container .image .con a {
      font-size: 30px;
     }

}


@media only screen and (min-width:393px)and (max-width:915px){
 /* footer */
 .contact-footer .container .image{
   margin: 0px -12px -50px -24px;
   padding: 30px 50px 30px 50px;
  }
  .contact-footer .container .image .con a{
   font-size: 30px;

  }
  .contact-footer .container .contant{
   margin: 0px -12px -50px -24px;
   padding:20px 50px 50px 50px;
   
  }
  .contact-footer .container .contant h2{
   font-size: 24px;
   font-weight: 600;
 
  }
  .contact-footer .container .contant p{
   font-size: 17px;
   font-weight: 510;
  }
}

/* tablets view */
@media only screen and (min-width:768px)and (max-width:1024px){
/* about section */


.banner img {
   height: 50vh;
}

.about-container .container .second{
   margin-top: 0px !important;
}

.about-container .container .second .hero img {
   margin-top:  ;
   margin-left: -20px;
}
.accordion h1 {
   font-size: 30px;
   width: 80vw;
}
.featurces h1{
   font-size: 30px;
   width: 80vw;
}
.featurces .container .hero-img img{
   margin-right: 20px !important;
   width: 87vw !important;
   margin-left: -10px;
}
.manu-services .container-fluid .container .image{
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}
.manu-services .container-fluid .container .contant{
   margin-top: 10px;

}
/* footer */
.contact-footer .container .contant{
   margin-left: -63px;
   height: 194px;
}
.contact-footer .container .contant {
   padding-top: 40px;
}


.contact-footer .container .image{
   margin:0 -63px 0 -12px;
   height: 194px;
   padding-top: 70px !important;
   gap: 5px;
}
.container-footer{
   margin-top: -30px;
}
}

@media only screen and (min-width:1025px)and (max-width:1300px){
   .manu-services .container-fluid .container .image{
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}
}