*{
  font-family: rubik;
  box-sizing: border-box;
  margin:0;
  padding:0;
}

.header{
  background:#0a4560;
  padding: 6px 0px;
}

.menu-logo{
  display: none;
}

.header div i{
  position: relative;
  right:20px;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 1.9;
  color: #0a4560 !important;
}

.main-banner{
    background-image: linear-gradient(#0a4560fa, #0a456000), url(../images/banner-2.jpg);
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    height: auto;
    position: relative;
}

/*.main-banner:after{
  position: absolute;
  width: 100%;
  height: 300px;
  background:red;
  content: '';
  top: 0px;
  left: 0px;
  
}*/

.navbar ul{
  display: flex;
  padding: 0px;
  margin:0px;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  /* border: 1px solid green; */
} 

.navbar ul li{
  list-style: none;
  /*border-right: 1px solid #ffc800;*/
  justify-content: center;
  display: flex;
  padding: 20px 20px;
  transition: 0.5s
}

.navbar ul li:hover{
  background: #0a4560;
}

.navbar ul li:hover  a i{
  transform:scale(1.22);
}

.navbar ul li:hover a{
  color: white;
}

.navbar ul li:hover a i{
  color: white;
}


.navbar ul li:first-child{
  border-right: none;
  padding:8px;
}

.navbar ul li:hover:first-child{
  background: transparent;
}

.navbar ul li a{
  text-decoration: none;
  color: #000;
  transition: 0.5s;
}

.navbar ul li a img{
  width: 100%;
    max-width: 160px;
    object-fit: cover;
}

.navbar ul li a i{
  padding-right: 5px;
  color: #0a4560;
  transition: 0.5s;
}

.navbar ul .search{
  color: #ffc800;
  padding-right: 20px;
  margin-left: 10px;
}

.navbar ul .globe{
  color: #ffc800;
  padding-left: 10px;
  font-size: 30px;
}

.navbar{
  background: #fff;
  padding: 0px 0px;
}

.navbar .container{
  max-width: 1300px;
}

.search-div{
  width: 100%;
  display: none;
}

.search-div i{
  padding-left: 15px;
  color: #ffc800;
  cursor: pointer;
  font-size: 20px;
}

.search-close{
  margin:15px;
}

.search-close input{
  padding:10px 20px;
  box-shadow: rgb(229 229 229) 0px -23px 25px 0px inset, rgb(255 255 255) 0px -36px 30px 0px inset, rgb(0 0 0 / 0%) 0px -79px 40px 0px inset, rgb(0 0 0 / 0%) 0px 2px 1px, rgb(0 0 0 / 0%) 0px 4px 2px, rgb(0 0 0 / 0%) 0px 8px 4px, rgb(0 0 0 / 0%) 0px 16px 8px, rgb(0 0 0 / 0%) 0px 32px 16px;
}

/************ header css end ************/


/************ banner section css start ***********/

.banner-content h1{
   font-size: 55px;
   padding-top: 100px
}

.banner-content h1 span{
  color: #0a4560;
}

.banner-content p{
  color: white;
}

.banner-content button{
  background: transparent;
  border:none;
  margin-top: 20px;
}

.banner-content button a{
  background: #0a4560;
  padding:13px 30px;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

.banner-image{
  margin-top: 55px;
}
/************ banner section css end ***********/


/*********** services section css start *************/
.service-box{
  border: 1px dashed #0a4560;
  border-radius: 5px;
  padding:20px 15px;
}

.service-box i{
  font-size: 50px;
    padding-bottom: 10px;
    color: #ffc800;
}

.service-box p{
  margin-bottom: 20px;
  color: #bbbbbb !important;
}

.service-heading{
  color: #0a4560;
}

.service-box a{
  text-decoration: none;
  color: white;
  background: #0a4560;
  padding: 5px 14px;
  font-size: 14px;
  border-radius: 3px;
}

.service-box a i{
  font-size: 0px;
    color: #0b0b0b;
    opacity: 0;
    transition: 0.5s;
}

.service-box a:hover i{
  opacity: 1;
  padding-left: 5px;
  color: #000;
  font-size: 12px;

}

.machine-image button{
  background-color: transparent;
  border:none;
  margin-top: 20px;
  margin:auto;
  display: block;
}

.machine-image button a{
  background-color: #ffc800;
  padding:10px 30px;
  text-decoration: none;
  color: #000;
  border-radius: 5px;
}
/*********** services section css end *************/



/******* owner section css start**********/
.owner-content h6{
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}

.owner-content p{
  font-size: 17px;
  color: #0a4560;
  font-weight: 500;
}
/******* owner section css end**********/


/********* machine section start **********/
.machine-box h3{
  color: #ffc800;
}

.machine-box button{
  background-color: transparent;
  border:none;
  margin-top: 20px;
}

.machine-box button a{
  background-color: #ffc800;
  padding:10px 30px;
  text-decoration: none;
  color: #000;
  border-radius: 5px;
}
/********* machine section end **********/


/********* About section Start **********/
form input,select{
  width:150px;
  /* margin-top:13px; */
}
select{
  margin-left:9px;
}
.Password{
  margin-left: 3px;
}
.from-section{
  height:265px;
}

.menu-secend{
  position: relative;
  width:100%;
  padding:0;
  margin:0;
}
.menu-secend li{
  list-style: none;
  width:100%;
  margin:1px 0;
  padding-left: 10px;
  padding:3px;
  padding-left: 17px;
  background:red;
  position:relative;
  background:white;
  z-index:1;
  transition: 0.5s;
}

.menu-secend li a{
  text-decoration: none;
  color: #000;
}

.menu-secend li:before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:2%;
  border-bottom:1px solid white;
  height:100%;
  color:red;
  z-index:-1;
  background:#0a4560;
  transition: 0.5s;
}

.menu-secend li:before a{
  color: #fff;
}  


.menu-secend li:hover:before{
  width:100%;
}
.menu-secend li:hover{
  color:white;
}

.school{
  width:100%;
  background-size: cover;
}

.animation{
  background-image: url(../images/key1.png);
  background-size:cover;
  width:100%;
  height:100%;
  animation-name: animate;
  animataion-direction:alternate-reverse;
  animation-duration: 30s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;

}
@keyframes animate{
  0%{
  background-image: url(../images/key1.png);

  }
  20%{
  background-image: url(../images/banner-2.jpg);
    
  }
40%{
  background-image: url(../images/img.jpg);
    
  }
60%{
  background-image: url(../images/img1.jpg);
    
  }
  80%{
  background-image: url(../images/key1.png);
    
  }
  100%{
  background-image: url(../images/key1.png);
    
  }



}
/********* About section end **********/
/********* Image Gallery section Start **********/
.swiper {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
      }

      .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 300px;
        height: 300px;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
      }

      .button-log{
        background: #0a4560;
      color: white;
      border-radius: 4px
      }
/********* Image Gallery section Start **********/

/********* background-image Section Start **********/
.section-img{
  background-image: url(../images/banner-2.jpg);
  background-size:cover;
  object-fit: cover;
}

/********* background-image Section End **********/


.footer p{
  color:#b2b2b2;
}

 /******** contact us main pag start ********/
       

       .contactus-banner{
         background-image: url(../images/contact-us-banner.webp);
         height: 350px;
         background-size: cover;
         background-position: 0 0vh;
       }

       .contactus-banner:before{
         content: '';
         position: absolute;
         left: 0px;
         top: 0px;
         background: #000000bf;
         width: 100%;
         height: 350px;
       }

       .contact-list{
        list-style: none;
        padding: 7px 15px;
        border-bottom: 1px solid #80808066;
        transition: 0.5s;
      }

      .contact-list:hover{
        background: #dedede94;
      }

      .coll-icon i{
        font-size: 30px;
        color: #0a4560;
        padding-right: 15px;
      }

      .contact-list p:first-child{
        color: #0a4560;
        font-weight: 500;
      }
      .contact-list p{
        color: #4c4c4c;
        font-weight: 500;
      }

      /******** contact us main pag end ********/


/********* Customer image page start *********/
.customer-img img{
  width: 100%;
  max-width: 145px;
}

.customer-img{
  background: #fff;
  clip-path: polygon(7% 0%, 100% 0, 100% 20%, 100% 90%, 94% 100%, 20% 100%, 0 100%, 0% 10%);
  border: 1px solid #4c4c4c;
  border-radius: 5px;
  position: relative;
}

.customer-img span{
  position: absolute;
  bottom: -15px;
  right: -18px;
  height: 1px;
  width: 71px;
  background: var(--color-g);
  transform: rotate( 
    302deg);
  z-index: 1;
  background: #e2e2e270;
}

.customer-img .line-4{
  position: absolute;
  top: -8px;
  left: -18px;
  height: 1px;
  width: 71px;
  background: var(--color-g);
  transform: rotate( 
    310deg);
  z-index: 1;
  background: #e2e2e270;
}

.name-form{
  background: #afafaf69 !important;
  box-shadow: none !important;
  border-radius: 3px;
  border: none;
  padding: 4px;
  padding-left: 20px;
}

.text-aria{
  background: #dedede !important;
  border-radius: 3px;
  box-shadow: none !important;
  border: none;
  padding: 4px;
  padding-left: 20px;
}

.name-input-1{
  border: 1px solid #a39c9c;
  padding: 4px;
  border-radius: 3px;
  transition: 1s;

}

.name-input-2:hover{
  box-shadow: 0 5px 15px #00000029;
  transform: translateY(-2px);
  caret-color: var(--color-g);
}

.text-area-1:hover{
  box-shadow: 0 5px 15px #00000029;
  transform: translateY(-2px);
  caret-color: var(--color-g);
}



.name-input-2:before{
  width: 0px;
  height: 2px;
  background: #00bfbf;
  content: '';
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: 1;
  transition: 1s;
}

.name-input-2:hover:before{
  width: 260px;

}



.send-btn a{
  background: #0a4560;
  padding: 11px 35px;
  color: #ffffff;
  /* margin-top: 15px; */
  border: 1px solid #00bfbf;
  clip-path: polygon(9% 0%, 100% 0%, 91% 100%, 0% 100%);
  border-radius: 4px;
  /* margin-top: 20px; */
}

.height-1{
  width: 2px;
  height: 50px;
  background: #00bfbf;
  justify-content: center;
  display: flex;
  margin: auto;
  position: relative;
}
.height-1:after{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  content: '';
  position: absolute;
  bottom: -5px;
  left: -4px;
}

.main-bar{
  height: 2px;
  width: 100%;
  background: #00bfbf;
  position: relative;
  top: -47px;
}

.main-bar:before{
  width: 10px;
  height: 10px;
  background: #00bfbf;
  border-radius: 50%;
  content: '';
  position: absolute;
  left: 0;
  top: -3px;
}

.main-bar:after{
  width: 10px;
  height: 10px;
  background: #00bfbf;
  border-radius: 50%;
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
}

/*.height-1:after{
width: 10px;
height: 10px;
background: #4949fd;
border-radius: 50%;
content: '';
position: absolute;
right: 0;
top: -3px;
}*/




.carousel-wrap {
  margin: 100px auto;
  padding: 0 2%;
  width: 100%;
  position: relative;
}

/* fix blank or flashing items on carousel */
.owl-carousel .item {
  position: relative;
  z-index: 100; 
  -webkit-backface-visibility: hidden; 
}

/* end fix */
.owl-nav > div {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}

.owl-nav i {
  font-size: 52px;
}

.owl-nav .owl-prev {
  left: -30px;
}

.owl-nav .owl-next {
  right: -30px;
}

.owl-carousel .owl-item img{

  border-radius: 5px;
}

.our-cutomer-section{
  height: 410px;
  background-size: cover;
  background-image: linear-gradient(#000000fa, #020202b0), url(../images/our-cutomer.jpg);
}

.owl-nav{
 justify-content: space-between;
 display: flex;
 position: relative;
 top: -130px; 
}

.owl-nav i{
color: #00bfbf;
}


.menu-logo img{
  max-width: 130px;
}

.menu-logo i{
  font-size: 25px;
}

body,html{
    max-width:100vw;
    overflow-x:hidden;
}
/********* Customer image page End *********/



@media(max-width: 768px){

.navbar ul{
  display: none;
  position: absolute;
    top: 0px;
    left: 0px;
    background: #fff;
    width: 40%;

}

.navbar ul li{
  display:flex;
  justify-content: flex-start;
}

.header .social-media{
  padding-left: 20px;
}

.menu-logo{
  display: block;
}
}

@media(max-width: 600px){
  .animation{
    height: 350px;
  }

  .navbar ul li{
    padding: 10px 20px;
  }

  .navbar ul{
    width: 70%;
  }

  .navbar ul li a{
    font-size: 15px;
  }
}