:root{
  /* --c1:#0d67c5; */
  /* --c2:#ff0000; */
  --c1:#1037b6;
  /* --c2:#f68b21; */
  --c2:#498bf1;
  --c3:#858588;
  --c4:#d8e6f3;
  /* --mix:linear-gradient(90deg, rgb(120, 216, 255) 0%, rgb(107, 119, 255) 40%, rgba(0,61,255,1) 100%); */
  --mix:#0d67c5;
  /* --c4:#8f2800; */
}
@font-face {
  font-family: lora;
  src: url(../Lora-Regular.ttf);
}

.c1{
  color: var(--c1) !important;

}
.c2{
  color: var(--c2) !important;
}
.c3{
  color: var(--c3) !important;
}
.c4{
  color: var(--c4) !important;
}
/* .c5{
  color: var(--c5) !important;
} */
.w{
  color: #fff !important;
}
.b{
  color: black !important;
}
a{
  text-decoration: none !important;
}
.ls{
  letter-spacing: 1px;
}
.lh{
  line-height: 2rem !important;
}
p{
  font-size: 17px;
}
@font-face {
  font-family: halyard;
  src: url(../Halyard\ Display.ttf);
}
body{
  margin: 0% !important;
  padding: 0% !important;
  font-family: halyard !important;
}
*{
  box-sizing: border-box;
}

/* ----------------- navbar --------------------------*/
/* navbar */

.nav-bx{
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-btn{
  /* transform: translateX(-150%); */
  background-color: #000 !important;
  color: #FFF !important;
}

.nav-icon{
  width: 40px;
}
.icon-top-count{
  background-color: #ffffff;
  color: #000 !important;
}
/* nav bar */
.navbar{
  transition: all .5s;
  background-color: #d8e6f3;
  /* box-shadow: -10px -10px 25px rgba(255,255,255,.08), 10px 10px 25px rgba(0,0,0,.08); */
  /* border-bottom: 2px solid var(--c1); */
}
.logo{
  width: 180px;
  /* height: 60px; */
}
.nav-menus {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.newnav{
  position: fixed !important;
  top: 0% !important;
  left: 0%;
  width: 100%;
  z-index: 50;
  background: #ffffff !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  animation: mymove .5s ;
  border-bottom: 1px solid var(--c1);
}
@keyframes mymove {
  0% {
      transform: translateY(-50%);
  }
  100% {
      transform: translatey(0%);
  }
}
.dropdown-item{
  color: black !important;
}

.dropdown-item i{
  margin-right: 6px;
}
.dropdown-item:hover{
  transform: translateX(10px);
  transition: all .5s;
}
.dm.show {
display: flex !important;
}
.dm li:first-child a {
/* font-weight: bold; */
font-size: 1.2em;
/* text-transform: uppercase;
color: #516beb; */
}
.dm .dropdown-item{
  letter-spacing: 1px;
  padding-left: 0% !important;
}
.dm li{
  list-style: none;

}
.navbar-expand-lg .navbar-nav .dm {
position: absolute !important;
min-width: 80vw !important;
left: -664%;
}
.sub-drop {
position: unset !important;
}

.search-bx{
  width: 40%;
}
.serc-btn{
  background-color: var(--c1) !important;
  color: #fff !important;
}
.nav-item{
  padding: 0px 10px;
}
.nav-link{
  /* color: var(--c1) !important; */
  color: #000 !important;
  /* font-weight: bold !important; */
  letter-spacing: 1px;
  font-family: Arial, Helvetica, sans-serif !important;
  border: 1px solid var(--c2);
}
.nav-active{
  color: var(--c1) !important;
  font-weight: bold !important;
}
.nv-icon{
  /* background-color: #ff6f00; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-div img{
  width: 40px;
}
/* .icon-div img{
width: 50px;
} */
.icon-div i{
font-size: 20px;
}
.nv-icon p{
  margin-bottom: 0% !important;
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: unset !important;
}
.dropdown:hover .dropdown-menu {
  transform: scale(1);
  /* background-color: var(--c2); */
}
.dropdown-item{
  background-color: unset !important;
  transition: all .5s;
  font-size: 14px;
  color: #000 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
.dropdown-item i{
  margin-right: 6px;

}
.dropdown-item:hover{
  transform: translateX(10px);
  transition: all .5s;
}
@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}
.animate {
  animation-duration: 1s;
  -webkit-animation-duration:1s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
.btn-search{
  background-color: var(--c2) !important;
  
}
.nav-gift{
  width: 20px;
}

  .w{
    color: #fff !important;
  }

/* ---- hero section ----- */
  .hero{
    /* background-color: rgba(0, 0, 0, 0.9); */
    position: relative;
    overflow: hidden;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
  }

  .hero *{
    z-index: 3;
  }
.hero-left-main{
  /* background-color: rgba(0, 0, 0, 0.9); */
  background: rgba(0, 0, 0, 0.5);
/* border-radius: 16px; */
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
/* border: 1px solid rgba(255, 255, 255, 0.3); */
}

  .hero-cercle{
    width: 20%;
    position: absolute;
    left: -10%;
    top: 30%;
    /* bottom: 10%; */
    /* opacity: .5; */
    z-index: 1;
    animation-name: spin;
    animation-duration: 25s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
  }

  @keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.js{
  text-align: justify !important;
}

  /* .hero-right{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-img{
    width: 80%;
    
  } */
  .wh-hero-btn{
    background-color: var(--c2) !important;
    color: #ffff !important;
    display: flex;
    justify-content: center;
    width: 180px;
  }
  .wh-hero-btn img{
    width: 30px;

  }
  .hero-left{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
  }
  .hero-name{
    font-size: 55px;
    letter-spacing: 1px;
    font-weight: bold;
    /* color: var(--c1); */
    color: #ffff;
  }
  .hero-p{
    text-align: left;
    font-size: 16px;
    letter-spacing: 1px;
    color: #ffff;
    /* color: #dd5348; */
  }
  .banner-vedio{
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
    object-fit: cover;
    z-index: -1;
    opacity: 1;
  }
  .who-we-btn{
    background-color: var(--c2) !important;
    color: #FFF !important;
    max-width: 120px;
    border-radius: 0% !important;
  }

  /* service section */
  .Service{
    background-color: #f6f6f6;
  }
  .ser-head-main{
    font-size: 50px;

  }
  /* .ser-crd{
    width: 100%;
    position: relative;
    min-height: 180px;
    background-color: #fff;
    box-shadow: 0 70px 70px rgba(0,0,0,.2);
    transition: all .5s;
    border-top: 3px solid var(--c2);
  } */
  .ser-crd{
    width: 100%;
    position: relative;
    min-height: 112px;
    background-color: #fff;
    box-shadow: 0 70px 70px rgba(0,0,0,.2);
    transition: all .5s;
    border-top: 3px solid var(--c2);
  }
  .ser-crd:hover{
    box-shadow: unset;
    transition: all .5s;
  }
  .ser-p{
    text-align: center;
  }
  .ser-img-bx{
    height: 67px;
    width: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mix);
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    position: absolute;
    top: -10%;
    left: -3%;
  }
  .ser-crd:hover .ser-img-bx{
    box-shadow: unset;
    transition: all .5s;
  }
  .ser-img{
    width: 50%;
  }

  /* serve industry section */
  .in-serv-bx{
    width: 100%;
    height: 200px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    position: relative;
    overflow: hidden;
  }
  .in-serv-bx::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
    z-index: 2;
    /* background: rgb(120,216,255); */
    background: linear-gradient(180deg, rgba(120,216,255,0.1) 0%, rgba(105,118,255,0.1) 20%, rgb(2, 26, 106) 100%);
  }
  .in-ser-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0%;
    z-index: 1;
    transition: all .5s;
  }
  .in-serv-bx:hover .in-ser-img{
    transform: scale(1.1);
    transition: all .5s;
  }
  /* .i-s-txt-bx{
    background: var(--mix);
    width: 100%;
  } */
  .in-ser-txt{
    position: absolute;
    bottom: 3%;
    color: #fff;
    z-index: 3;
  }

  /* mile stone section  */
  .mile-stone{
    background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 48%);
    position: relative;
  }
  .mile-left{

    height: 100%;
    /* background-color: #2f61f4; */
  }
  .mile-img{
    /* width: 100%; */
    height: 600px;
    position: absolute;
    bottom: 0%;
    left: 14%;
  }
  .mile-box{
    /* background: var(--mix); */
    background-color: #FFF;
    box-shadow: 0 70px 70px rgba(0,0,0,.2);
    border-radius: 20px;
  }
  .mile-number{
    color: #ffff;
    font-weight: bold;
    font-size: 60px;
    background: -webkit-linear-gradient(90deg, rgba(120,216,255,1) 0%, rgba(105,118,255,1) 40%, rgba(0,61,255,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .mile-txt{
    /* color: #fff; */
    font-size: 25px;
  }

  /* ------------step section------------ */
 
  .step-bx{
    width: 80%;
    background-color: #FFF;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    background: var(--mix) ;
    position: relative;
    min-height: 110px;
    border-radius: 18px;
  }
 
  .step-bx:nth-child(2){
    margin-left: 20%;
  }
  .step-round{
    width: 110px;
    height: 110px;
    border-radius: 0% 0% 20% 0%;
    /* border: #000 2px solid; */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    position: absolute;
    top: -40%;
    left: -5%;
    /* transform: translate(-55% , -20%); */
  }
  .round-in{
    height: 75%;
    width: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c2) ;
    border-radius: 20%;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  }
  .step-txt{
    font-size: 30px;
    color: #ffff ;
  }
  .step-txt-bx{
    width: 85%;
    float: right;
   }
   .step-box-txt{
    color: #FFF;
    font-size: 20px;
    letter-spacing: 1px;
   }
   .step-img{
    width: 100%;
   }

   /* footer section */
   .foot{
    background-color: #040817;
   }
   .f-logo{
    width: 70%;
   }
   /* .fbox{
    display: flex;
    flex-direction: column;
    align-items: center;
   } */
   .ft-main{
    letter-spacing: 1px;
   }
   .ls{
    letter-spacing: 1px;
   }
   .f-txt{
    color: #fff;
    font-size: 16px;
    letter-spacing: 1px;
   }
   .f-img{
    width: 26px;
    object-fit: contain;
   }
   /* -------------service page----------- */
   .hero2{
    min-height: 50vh;
    overflow: hidden;
    position: relative;
   }
   .hero2::before{
    content: '';
    background-color: rgba(6, 55, 107, 0.8);
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
   }
   .hero2 .hero-name{
    color: #fff !important;
    letter-spacing: 1px;
    font-size: 45px;
   }
   .hero2-p{
    color: #fff;
   }
   .hero-ser-img{
    height: 400px;
    position: absolute;
    bottom: -15%;
   }
   .hero2 .who-we-btn{
    width: 180px;
   }
   .with-line{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
   }
   .new-line{
    background: var(--mix);
    height: 3px;
    width: 20%;
   }

   .new-line1{
    background: var(--mix);
    height: 3px;
    width: 60%;
   }
   .new-line2{
    background: var(--mix);
    height: 3px;
    width: 10%;
   }

   .ex-box{
    width: 100%;
    min-height: 330px;
    background-color: #FFF;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: relative;
   }
   .l-bx{
    height: 15%;
    width: 10%;
    border-top:3px solid var(--c2) ;
    border-left: 3px solid var(--c2);
    position: absolute;
    top: 0%;
    left: 0%;
    transition: all 1s;
   }
   .r-bx{
    height: 15%;
    width: 10%;
    border-bottom:3px solid var(--c2) ;
    border-right: 3px solid var(--c2);
    position: absolute;
    bottom: 0%;
    right: 0%;
    transition: all 1s;
   }
   .ex-box:hover{
    box-shadow: unset;
    transition: all .5s;
   }
   .ex-box:hover .l-bx{
    width: 100%;
    height: 100%;
    transition: all 1s;
   }
   .ex-box:hover .r-bx{
    width: 100%;
    height: 100%;
    transition: all 1s;
   }
   .ex-p{
    text-align: justify;
   }
   .wher-img{
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
   }
   /* key poit */
   .key-box{
    width: 100%;
    background-color: #FFF;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    display: flex;
    align-items: flex-start;
   }
   .num-div{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: var(--mix);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
   }
   .key-txt{
    width: 75%;
   }
   .key-num{
    color: #FFF;
    font-size: 18px;
   }
   .s-why-bx{
    width: 100%;
    background-color: #FFF;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
   }
   .cen-s-why{
    min-height: 180px;
    background:var(--mix);
   }
   .val-service-bx{
    width: 100%;
    /* border: 2px solid var(--c1); */
   }

   .val-service-img{
    width: 95%;
    object-fit: cover;
    height:400px;
   }


   .fix-icon-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    bottom: 5%;
    right: 1%;
    z-index: 60;
   }
   .fix-img{
    width: 30px;
    animation-name: trin;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
   }
   .in-fix-box{
    display: flex;
    align-items: center;
    background-color: #40c351;
    border-radius: 12px;
   }
   .in-fix-p{
    color: #FFF;
   }
   .call-fix-side{
    /* width: 40px;
    height: 40px;*/
    border-radius: 50%; 
    /* background-color: #222; */
    border: 3px solid #fff;
    position: fixed;
    left: 1%;
    bottom: 5%;
    z-index: 60;
    display: flex;
    justify-content: center;
    align-items: center;
   }
   .call-img-fix{
    width: 40px;
    animation-name: trin;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    
   }
   @keyframes trin {

    from {
        transform:rotate3d(0, 0, 1, 0deg);
    }
    20%, 32%, 44%, 56%, 68% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    23%, 35%, 47%, 59%, 71% {
        transform: rotate3d(0,0,1,15deg);
    }
    26%, 38%, 50%, 62%, 74% {
        transform: rotate3d(0,0,1,0deg);
    }
    29%, 41%, 53%, 65%, 77% {
        transform: rotate3d(0,0,1,-15deg);
    }
    80% {
        transform:rotate3d(0, 0, 1, 0deg);
    }

}
   /* why service page */
   .why-ser{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
    /* background-color: #000; */
   }
   .wy-ser-img{
    /* width: 380px;
    height: 380px; */
    width: 100%;
    height: 100%;
    /* background: var(--mix); */
    /* border-radius: 50%; */
    object-fit: cover;
   }
   .back-box{
    width: 30%;
    height: 40%;
    position: absolute;
    background: var(--mix);
    top: -5%;
    left: -3%;
    z-index: -1;
   }
   .wy-ser-img-1{
    width: 100px;
    position: absolute;
    bottom: -5%;
    right: -3%;
   }
   .floating {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}
   .point-bx{
    display: flex;
    align-items: center;
   }
   .point-img{
    width: 26px;
   }
   .why-left{
    display: flex;
    flex-direction: column;
    justify-content: center;
   }
   /* termal maping */
   .t-maping{
    background-image: url(../images/termal-map-header.jpg);
    background-size: cover;
    background-position: center;
    /* background-attachment: fixed; */
   }
   .com-sys{
    background-image: url(../images/computer-validation.jpg);
    background-size: cover;
    background-position: center;
    /* background-attachment: fixed; */
   }
   .clean-room{
    background-image: url(../images/banner-cleanroom.jpg);
    background-size: cover;
    background-position: center;
    /* background-attachment: fixed; */
   }
   .cold-chain{
    background-image: url(../images/cold-chain.jpg);
    background-size: cover;
    background-position: center;
   }
   .com-air{
    background-image: url(../images/compressed-air.jpg);
    background-size: cover;
    background-position: center;
   }
   .ex-h{
    color: var(--c1);
   }
   .img-left-shape{
    display: flex;
    justify-content: center;
    position: relative;

   }
   .trai{
    position: absolute;
    bottom: 10%;
    right: 15%;
    /* z-index: -2; */
    width: 120px;
    transform: rotate(90deg);
    animation: animName 8s linear infinite;
   }
   @keyframes animName {
    0%{
       transform: rotate(0deg);
      }
   100%{
       transform: rotate(360deg);
      }
   }
   .dif-shape{
    width: 70%;
    height: 400px;
    object-fit: cover;
    border-radius: 59% 41% 70% 30% / 30% 30% 70% 70% ;
    /* animation: border-move 15s linear infinite forwards; */
    /* animation: spin 12s ease-in-out infinite alternate-reverse; */
   }
   .dif-shape2{
    width: 70%;
    height: 400px;
    object-fit: cover;
    border-radius: 59% 41% 70% 30% / 30% 30% 70% 70% ;
    position: absolute;
    /* margin-right: 0%; */
    margin-left: 2%;
    background-color: var(--c1);
    z-index: -2;
    /* animation: border-move 15s linear infinite forwards; */
   }
   
@keyframes border-move{
  0%{ border-radius:51% 49% 34% 66% / 39% 66% 34% 61%; }
  10%{ border-radius:39% 61% 38% 62% / 53% 54% 46% 47%; }
  20%{ border-radius:56% 44% 52% 48% / 57% 35% 65% 43%; }
  30%{ border-radius:41% 59% 45% 55% / 33% 56% 44% 67%; }
  40%{ border-radius:46% 54% 60% 40% / 55% 74% 26% 45%; }
  50%{ border-radius:44% 56% 22% 78% / 31% 74% 26% 69%; }
  60%{ border-radius:31% 69% 32% 68% / 31% 71% 29% 69%; }
  70%{ border-radius:44% 56% 60% 40% / 63% 36% 64% 37%; }
  80%{ border-radius:46% 54% 38% 62% / 44% 48% 52% 56%; }
  90%{ border-radius:66% 34% 57% 43% / 49% 51% 49% 51%; }
  100%{ border-radius:51% 49% 34% 66% / 39% 66% 34% 61%; }
}
   .right-shape{
    display: flex;
    flex-direction: column;
    justify-content: center;
   }
   .req-btn{
    background-color: var(--c2) !important;
    color: #fff !important;
    border-radius: 0% !important;
    width: 160px;
   }
.other-serv-home-box{
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}
.other-serv-home-box::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%; 
  inset: 0;
  background-color: rgba(2, 15, 28, 0.7);
  /* background: linear-gradient(180deg, rgba(120,216,255,0.1) 0%, rgba(105,118,255,0.1) 40%, rgba(0,61,255,1) 100%); */
  z-index: 2;
   transition: all 1.5s;
}
   .os-home-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
   }
   .osh-bg{
    position: absolute;
    top: 103%;
    left: 0%;
    background-color: rgba(5, 37, 72, 0.74);
    width: 100%;
    height: 100%;
    z-index: 3;
    transition: all .5s;
   }
   .osh-txt{
    position: absolute;
    inset: 0%;
    /* background-color: rgba(111, 112, 113, 0.7); */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    z-index: 4;
   }
   .dot-text{
    color: #FFF;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 17px;
    /* margin: 0%; */
    /* height: 0px; */
    transition: all .5s;
   }
   .other-serv-home-box:hover .osh-bg{
    top: 0%;
    transition: all .5s;
   }
   .btn-view-detsil{
    background-color: var(--c2)!important;
    color: #fff !important;
    border-radius: 0% !important;
    width: 40%;
    border: 2px solid var(--c2) !important;
   }

   /* cleean room validation */
   .test-bx{
    width: 100%;
    min-height: 400px;
    object-fit: cover;
    position: relative;
    /* background-color: #FFF;
    box-shadow: 0 70px 70px rgba(0,0,0,.2); */
    display: flex;
    align-items: flex-end;
    justify-content: center;
   }
   .test-img{
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    height: 90%;
    clip-path: polygon(0 0, 100% 0, 100% 58%, 0% 100%);
    z-index: -1;
   }
   .text-txt-bx{
    background-color: #FFF;
    box-shadow: 0 70px 70px rgba(0,0,0,.2); 
    width: 90%;
    border-top: 6px solid var(--c2);

   }
   .text-p{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
   }
   .test-btn {
    background-color: var(--c2) !important;
    color: #FFF !important;
    border-radius: 0% !important;
    width: 160px;
    /* background: rgb(255,255,255) !important; */
/* background: linear-gradient(142deg, rgba(255,255,255,0) 19%, rgba(246,139,33,1) 19%)!important; */
   }

   /* air flow test */
   .flo-img-div{
    position: relative;
    height: 580px;
   }
   .flo-img{
    width: 50%;
    height: 270px;
    box-shadow: 0 70px 70px rgba(0,0,0,.2); 
    border: 6px solid #fff;
    object-fit: cover;
   }
   .dt1{
    width: 100px;
    position: absolute;
    left: 28%;
    top: 8%;
   }
   .dt2{
    width: 100px;
    position: absolute;
    bottom: 2%;
    right: 5%;
   }
   .fi-1{
    position: absolute;
    right: 5%;
    top: 5%;
   }
   .fi-2{
    position: absolute;
    left: 2%;
    top: 20%;
   }
   .fi-3{
    position: absolute;
    bottom: 5%;
    left: 30%;
   }
   /* ======= */
   .full-div{
    background-color: #040817;
   }
   .db{
    color: #040817;
   }
   .sweet-bx{
    background-color: #FFF;
    box-shadow: 0 70px 70px rgba(0,0,0,.2); 
    min-height: 160px;
    display: flex;
    align-items: center;
   }
   .sw-bx2{
    background-color: var(--c1);
   }
   .sweet-bx p{
    font-size: 18px;
   }
   .req-btn{
    width: 180px;
    background-color: var(--c2) !important;
    color: #FFF !important;
    border-radius: 0% !important;
   }
   .req-btn:hover{
    border: 2px solid var(--c2) !important;
    background-color: #FFF !important;
    color: #040817 !important;
    transition: all .5s;
   }
   /* dpt servie */
   .dpt-serv .sweet-bx{
    min-height: 190px;
   }
   .par-count-bx{
    background-color: #FFF;
    box-shadow: 0 70px 70px rgba(0,0,0,.2); 
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 3px solid var(--c2);
    border-radius: 12px;
   }
   /* =========== */
   .clean-why-bx{
    width: 100%;
    display: flex;
    align-items: flex-start;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background-color: #fff;
    min-height: 190px;
  }
   .cy-img{
    width: 20%;
   }
   /* .cl-w-p{
    text-align: justify;
   } */
   /* =============== */
   .full-2{
    background-color: #040817dd;
    position: relative;
    
   }
   .full-2::after{
    content: '';
    background-image: url(../images/banner-cleanroom.jpg);
    background-attachment: fixed;
    background-size: cover;
    position: absolute;
    inset: 0%;
    width: 100%;
    height: 100%;
    z-index: -1;
   }
   /* ==== */
   .aproch-box{
    background-color: #FFF;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    min-height: 190px;
    display: flex;
    border-radius: 12px;
    overflow: hidden;
   }
   .apr1{
    width: 20%;
    height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: var(--c1);
   }
   .ap-img{
    width: 90%;
   }
   .ap-num{
    font-size: 35px;
    color: #FFF;
    letter-spacing: 1px;
   }
   /* cold chain page */
   .cold-bx{
    border: 2px solid var(--c2);
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF;
    /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
   }
   .cold-icon{
    width: 20%;
   }
   /* types */
   .cold-type-bx{
    width: 100%;
    min-height: 280px;
    background-color: #FFF;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
   }
   .c-type-img{
    width: 15%;
    object-fit: contain;
    position: absolute;
    bottom: 1%;
    right: 0%;
    opacity: .2;
   }
   .col-img-group .flo-img-div {
    position: relative;
    height: 662px;
}
.col-img-group .flo-img-div .fi-2 {
  position: absolute;
  left: 2%;
  top: 27%;
}
.cold-last{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* compreshed air velidation */
.ca-box .ex-box{
  min-height: 200px;
}
.com-air-bx{
  background-color: #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  min-height: 180px;
}
.full-div-2{
  background-color: rgb(4, 8, 23,0.91);
  position: relative;
  min-height: 50vh;
}
.full-div-2::before{
content: '';
background-image: url(../images/com-air-val.jpg);
background-size: cover;
position: absolute;
height: 100%;
width: 100%;
inset: 0%;
z-index: -1;
background-repeat: no-repeat;
background-position: center;
}
.com-ari-why .clean-why-bx{
  min-height: 230px;
}
/* .card-up{
  transform: translateY(-25%);
} */
/* .up-sec .full-div-2{
  min-height: 70vh;
} */
.over-air-box{
  width: 100%;
  min-height: 280px;
  /* display: flex; */
  align-items: flex-start;
  background-color: #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.oa-img-bx{
  width: 18%;
  background-color: var(--c2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.oa-bx-img{
  width: 80%;
}
.oa-txt{
  /* max-width: 80%; */
  margin-top: 5px;
}
/* ---------------------- after new content given ------------------- */
/* hero about section */
.home-abt-img-new{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -----------Your Complete Environmental Compliance Partner-------- */
.envi-main {
  position: relative;
  background-color: rgba(0, 0, 0, 0.6);
}
.envi-main::before{
  content: '';
  background-image: url(../images/envi-bg.jpg);
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  z-index: -1;
}
.envi-box{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  background-color: #ffff;
  min-height: 160px;
}
.env-img{
  width: 50px;
}
.env-txt{
  color: #000;
  text-align: center;
}
/* -------------------- */
.envi-box2{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  background-color: var(--c2);
  min-height: 190px;
}

/* ---- Why to choose Treksense ? ----------- */
.why-new-h-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------- cater-box ----------- */
.cater-box{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cater-img-bx{
  height: 120px;
  width: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--c1);
}
.cater-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.cater-box h5{
  font-size: 15px;
}
.con-n-btn{
  background-color: var(--c1) !important;
  color: #fff !important;
  border-radius: 0% !important;
}


/* ====footer===== */
.footer{
  background-color: rgb(0,0,0);
  position: relative;
}
.footer::after{
  content: '';
  /* background-image: url(../images/Industry-Technology\ &-research.jpg); */
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  z-index: -1;

}
.f-logo{
  width: 50%;
}
.full-so{
  display: flex;
  /* background-color: #daa52a; */
  /* height: 100px; */
}
.soc-bx{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c1);
}
.soc-icon{
  width: 50%;
  /* height: 50%; */
  transition: all .5s;
}
.soc-bx:hover .soc-icon{
  animation: gelatine 0.5s ;
}

@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}
.foot-p-m{
  font-size: 14px;
}
.foot-arrow{
  width: 16px;
}
.foot-p{
  display: flex;
  align-items: center;
  transition: all .5s;
  margin-top: 1rem;
  font-size: 14px;
}
.foot-p:hover{
  transform: translateX(5%);
  transition: all .5s;
}
/* .ft-main{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
} */
.f-con-div{
  display: flex;
}
.f-con-bx{
  background-color: var(--c1);
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.con-f-icon{
  width: 50%;
}
.f-con-txt{
  width: 60%;
}
.f-con-h{
  font-size: 14px;
}

/* --- product page -------- */
.pro-banner{
  background-image: url(../product-image/q1-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  height: 50vh;
}
.pro-banner-in{
  display: flex;
  /* align-items: center; */
  height: 70%;
  position: relative;
}
.pro-banner-left{
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: 5px;
}
/* 
.key-high-bx ul{
  list-style-position: outside;
} */

.pro-banner-img{
  position: absolute;
  width: 160px;
  /* bottom: -10%; */
  right: 5%;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}
.key-high-bx{
  background-color: #FFF ;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  min-height: 98px;

}
/* ----- */
.pro-ditail-bx{
  background-color: #FFF ;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  min-height: 280px;
}
.pro-detail-img{
  width: 70%;
}

.pro-detail-img1{
  width: 20%;
}
.pro-pg-appl-bx{
  background-color: #FFF !important;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  min-height: 300px;
}
.pro-pg-appl-img{
  width: 100%;
}

/* -- suprem q2 --- */
.q2-hero{
  background-image: url(../product-image/q2-bg.jpg);
  background-position: top;
}
/* ----t1-pro----- */
.disply-fea-img{
  width: 60%;
}

/* ----------- Application pages -------------- */
.appli-hero{
  background-color: rgb(16, 55, 182, .7);
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.appli-hero::before{
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  inset: 0%;
  background-image: url(../images/hapital-apli-baner.jpg);
  background-size: cover;
  z-index: -1;
}
.hospital-apli-top::before{
  background-position: bottom;
}
.helth-apli-top::before{
  background-image: url(../images/healthcare-appli-bannr.jpg);
}
.life-apli-top::before{
  background-image: url(../images/life-sci-banner.jpg);
}
.live-ing-apli-top::before{
  background-image: url(../images/live-ing-banner.jpg);
}
.ind-tech-apli-top::before{
  background-image: url(../images/industry-and-tech-banner.jpg);
  background-position: center;
}
.cold-apli-top::before{
  background-image: url(../images/cold-2.png);
  background-position: center;
}
.food-apli-top::before{
  background-image: url(../images/food-and-b-bannr.jpg);
  background-position: center;
}
.aggri-apli-top{
  background-image: url(../images/aggri-banner.jpg);
  background-position: center;
}
.Animal-Husbandry-apli-top::before{
  background-image: url(../images/Animal-Husbandry-banner.jpg);
  background-position: center;
}
.appli-hero h3{
  text-align: center;
}
.btn-apli{
  background-color: var(--c1) !important;
}
.wp-img-apli{
  transition: .5s;
  animation-name: trin;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.btn-apli:hover{
  box-shadow: 5px 3px 3px var(--c2);
  transition: all .5s;
}
.apli-about{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* why section */
.apli-why-bx{
  background-color: #fff;
  min-height: 310px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.apli-why-bx2{
  min-height: 200px;
}
/* benifit section */
.benifit-apli{
  background-color: #fff;
  min-height: 190px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.benifit-apli2{
  min-height: 150px;
}
.f6{
  background-color: #f6f6f6;
}
.mail-sale{
  text-decoration: underline !important;
  font-weight: 600;
}
.mail-sale:hover{
  color: var(--c2) !important;
}

/* --------- about page ----------- */
.ab-off{
  height: unset !important;
}
.abt-pg-bx{
  background-color: #FFF;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  min-height: 220px;
}

/* new benifit section on home page */
.new-beni-left{
  width: 100%;
  position: relative;
  height: 100%;
}
.beni-side-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ovl-beni{
  position: absolute;
  inset: 0%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(0, 2, 25, 0.9);
}
.btn-l-more{
  background-color: var(--c1) !important;
  color: #fff !important;
  border-radius: 0% !important;
  width: 130px;
}

.new-beni-bx{
  background-color: #fff;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  width: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  border-top: 3px solid var(--c2);
}
.beni-num{
  font-size: 65px;
}
.ds-js{
  text-align: justify !important;
}
.un-line-w{
  height: 3px;
  width: 40%;
  background-color: #FFF;
}
.bg-f6{
  background-color: #f6f6f6;
}
.ab-side-mini{
  width: 90%;
}

.com-pro-main{
  background-image: url(../images/c-pro-bg.jpg);
  background-size: cover;
  background-position: center left;
}
.in-comer-side-bx{
  background-color: rgb(16, 55, 182, 0.9);
  width: 100%;
}
.blue-over{
  background-color: #FFF;
}

/* --------------------------contact page ----------------------- */
.con-box {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
.con-box img {
  width: 40px;
}
.con-right {
  background-color: #fff;
  box-shadow: -10px -10px 25px rgba(255, 255, 255, 0.08),
    10px 10px 25px rgba(0, 0, 0, 0.08);
}
.chat {
  width: 50px;
}
.area-text {
  background-color: #f6f6f6 !important;
}
.btn-primary {
  background-color: var(--c1) !important;
  color: #fff !important;
}
/* --------------------------------------------- */
.ser-amc-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* blog section */
.line-bx{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.line{
width: 40px;
height: 2px;
background-color: var(--c1);
}
.bl-bg{
  background-color: #f6f6f6;
}
.blg-pro{
  background-color: transparent !important;
}
.blg-card{
  transition: all .5s;
  width: 100%;
  background-color: #FFF;
  /* box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px; */
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.blog-card:hover .blog-img{
  transform: scale(1.1);
  transition: all .5s;
}
.blg-img-bx{
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.blog-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg-date{
  color: var(--c1);
  font-size: 13px;
}
.bl-head{
  font-size: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blg-txt{
  display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
}
.blg-btn{
  background-color: var(--c1) !important;
  color: #FFF !important;
  letter-spacing: 1px;
  border-radius: 0% !important;
  width: 60%;
}

.blog-img{
  width: 100%;
  height: 400px;
}
.blog-soc-img{
  width: 36px;
}
.ani-text{
background-image: url(../images/giphy.gif);
display: inline-block;
background-repeat: repeat;
background-clip: text;
background-position: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.guts{
  width: 20px;
}
.ani-line{
  height: 3px;
  width: 200px;
  background-color: var(--c1);
  position: relative;
  overflow: hidden;
}
.dot{
  width: 10px;
  height: 100%;
  background-color: #FFF;
  animation: drift 5s linear infinite backwards;
  position: absolute;
}

@keyframes drift {
	from { left: 0%;}
	to { left: 110%;}
}
   /* .c-type-txt-bx */
  /* --------------------------------------make it responsive------------------------ */
  @media screen and (max-width:1300px) {
    /* mile stone section */
.mile-img{
  left: 8%;
}

.navbar-expand-lg .navbar-nav .dm {
  left: -578%;
  min-width: 87vw !important;
}
.ex-box{
  min-height: 383px;
 }
 .ca-box .ex-box {
  min-height: 221px;
}
.com-ari-why .clean-why-bx {
  min-height: 246px;
}
.over-air-box {
  width: 100%;
  min-height: 294px;
}
  }
@media screen and (max-width:1025px) {
          /* navbar */
          .top-nav-one{
            display: none;
        }
        .menu {
          width: 42px;
      }
        /* .logo{
            width: 77px;
        } */
        .nav-menus {
            display:flex;
            align-items: unset !important;
            justify-content: unset;
    
        }
        .navbar-expand-lg .navbar-nav .dm {
          width: 94vh;
          left: -465%;
      }
        /* .nav-link{
            color: #000 !important;
        } */
        .offcanvas{
            width: 80% !important;
        }
        .dropdown-item {
          white-space: unset !important;
          font-size: 12px;
        }
    
        .menu{
          width: 52px;
        }
        .offcanvas-header{
          background-color: var(--c4);
        }
        /* hero section */
        .main-h1{
          font-size: 28px;
        }
  
        .round-top{
          height: 350px;
          width: 350px;
          /* top: 0%;
         right: -44%; */
        }
        .hero-p{
          font-size: 14px;
        }
        .p{
          font-size: 14px;
        }
        /* serv in industry */
        .in-ser-txt {

          font-size: 18px;
      }
      /* mile stone section */
.mile-img{
  left: unset;
}

}

@media (min-width:920px) and (max-width:1030px) {

  .ser-img-bx {
    top: -7%;
    left: -5%;
    height: 60px;
    width: 85px;
}

    /* step section */
    .step-round {
      width: 95px;
      height: 95px;
      top: -20%;
    }
.step-box-txt {
  font-size: 16px;
}
.step-bx {
  width: 90%;
}
.step-bx:nth-child(2){
  margin-left: 10%;
}
.com-air-bx {
  min-height: 204px;
}
.ca-box .ex-box {
  min-height: 275px;
}
.dif-shape {
  width: 89%;
}
.dif-shape2 {
  width: 86%;
} 
.com-ari-why .clean-why-bx {
  min-height: 277px;
}
.over-air-box {
  min-height: 342px;
}
}
   
  @media screen and (max-width:920px) {
    .sm-js{
      text-align: justify !important;
    }
        /* navbar */
        .top-nav-one{
          display: none;
      }
      .menu {
        width: 42px;
    }
    .navbar-expand-lg .navbar-nav .dm {
      position: absolute !important;
      /* min-width: 90vw !important; */
      left: 2% !important;
  }
      /* .logo{
          width: 77px;
      } */
      .nav-menus {
          display:flex;
          align-items: unset !important;
          justify-content: unset;
  
      }
      .nav-link{
          color: #000 !important;
      }
      .offcanvas{
          width: 80% !important;
      }
      .dropdown-item {
        white-space: unset !important;
        font-size: 12px;
      }
  
      .menu{
        width: 52px;
      }
      .offcanvas-header{
        background-color: var(--c4);
      }
      /* hero section */
      .hero{
        height: 50vh;
      }
      .hero-p {
        font-size: 21px;
        text-align: center;
    }
    /* service section */
    .ser-img-bx {
      /* height: 60px;
      width: 85px; */
      top: -12%;
      left: -2%;
    }
    /* step setion */
    .step-left{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .step-bx{
      width: 90%;
    }
    .step-bx:nth-child(2){
      margin-left: 0%;
    }

    /* service page */
    .hero-ser-img{
      height: 400px;
      position: unset;
      bottom: unset;
     }
     .hero2 {
      min-height: 17vh;
      overflow: hidden;
      position: relative;
  }

  .back-box {
    top: -5%;
    left: 6%;

}
.col-img-group .flo-img-div {
  position: relative;
  height: 421px;
}

          /* footer */
          .f-first{
            display: flex;
            flex-direction: column;
            align-items: center;
          }
          .ft-main {
            border-top: 1px solid #fff;
          }
          .other-hero {
            height: 38vh;
          
          }

          .appli-hero {
            min-height: 19vh;
        }
  }

  @media screen and (max-width:720px) {
    /* mile stone section */
    .mile-number {
      font-size: 50px;
    }
    /* step section */
    .step-round {
      width: 90px;
      height: 90px;
      top: -20%;
    }
.step-box-txt {
  font-size: 16px;
}
/* .step-bx {
  width: 90%;
}
.step-bx:nth-child(2){
  margin-left: 10%;
} */
  }

  @media screen and (max-width:660px) {
    .menu {
      width: 32px;
  }
  .logo {
    width: 124px;
    /* height: 48px; */
}

/* hero */
.hero-name{
  font-size: 25px;
}
.hero-p{
  text-align: justify;
  font-size: 13px;
}

/* service section  */
.ser-head-main{
  font-size: 27px;
}
.ser-img-bx {
  height: 60px;
  width: 85px;
  top: -12%;
  left: -2%;
}
.ser-p{
  font-size: 14px;
  letter-spacing: 1px;
  text-align: center;
}
    /* step section */
    .step-round {
      width: 80px;
      height: 80px;

  }
  /* footer */
  .ft-main{
    font-size: 18px;
  }

  /* service page  */
  /* why */
  .why-ser {
    height: 336px;
 }
  .wy-ser-img {
    width: 305px;
    height: 305px;
}
.wy-ser-img-1 {
  width: 123px;
  /* height: 150px; */
  /* top: 0%; */
  /* left: 4%; */
}

.val-service-img{
  width: 100%;
  height: 100%;

}

.dif-shape {
  width: 90%;
  height: 328px;
}
.dif-shape2{
  width: 87%;
  height: 328px;
  margin-left: 2%;
}
.hero2 .hero-name {
  color: #fff !important;
  letter-spacing: 1px;
  font-size: 26px;
}
p{
  font-size: 16px;
}
.trai {
  bottom: 4%;
  right: 10%;

}
/* clean room side page */
.flo-img-div {
  position: relative;
  height: 394px;
}
.flo-img {
  height: 190px;
}

/* -- product page ------- */
.pro-banner-in{
  align-items: flex-start;
}
.pro-banner-img {
  /* width: 82px; */
  /* bottom: -6%; */
  right: 38%;
}

 /* -------------lab ---------- */

 .applilab-hero h3{
  font-size: 30px !important;
 }

 .ab2-img{
  width: 100% !important;
  height: 350px !important;
  border-radius: 10px;
  /* rotate: 5deg; */
  object-fit: cover !important;
  margin-top: 30px;
  position: relative;
}

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


.im1 {
  width: 100%;
  overflow: hidden;
  object-fit: cover;
}

.im2 {
  width: 100%;
  overflow: hidden;
}

.im1 img {
  width: 100%;
  object-fit: cover;
  height: 305px !important;
}

.im2 img {
  width: 100%;
  height: 150px !important;
  object-fit: cover;
  margin-bottom: 3%;
}

.deb-img{
  height: 100px !important;
  padding: 0 5px !important;
  width: auto;
 }


  }




  @media screen and (max-width:370px) {
    .hero-btn-one{
      font-size: 10px !important;
    }
    /* step section */
    .step-round {
      width: 80px;
      height: 80px;

  }
  .dif-shape {
    width: 90%;
    height: 275px;
  
  }
  .dif-shape2 {
    /* width: 90%; */
    height: 275px;
  
  }
  .trai {
    bottom: 4%;
    right: 4%;
  
  }
  }

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

  }

  @media screen and (min-width:321px) and (max-width:425px) {

}



 /* ------------ laboratory-balance -------- */

 .applilab-hero h3{
  letter-spacing: 2px; 
  font-size: 50px ;
 } 

 .applilab-hero{
  background-color: rgba(6, 55, 107, 0.8);
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.applilab-hero::before{
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  inset: 0%;
  background-image: url(../images/labhero.jpg);
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.aplilab-about{
  width: 100%;
  height: 95%;
  object-fit: cover;
  border-radius: 12px;
}

.flolab-img-div{
  position: relative;
  height: 450px;
 }
 .flolab-img{
  width: 50%;
  height: 60%;
  box-shadow: 0 70px 70px rgba(0,0,0,.2); 
  border: 6px solid var(--c2);
  border-radius: 10px;
  object-fit: cover;
 }

 .flolab3-img{
  width: 50%;
  height: 60%;
  box-shadow: 0 70px 70px rgba(0,0,0,.2); 
  border: 6px solid var(--c2);
  border-radius: 10px;
  object-fit:cover;
 }
 .dtlab1{
  width: 100px;
  position: absolute;
  left: 28%;
  top: 8%;
 }
 .dtlab2{
  width: 100px;
  position: absolute;
  bottom: 25%;
  right: 5%;
 }
 .filab-1{
  position: absolute;
  right: 5%;
  top: 5%;
 }
 .filab-2{
  position: absolute;
  left: 2%;
  top: 20%;
 }

 .tlab-img{
  width: 100%;
  height: 450px;
 }

 .envilab-box2{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  background-color: var(--c2);
  min-height: 240px;
  border-radius: 10px;
}

.envlab-img{
  width: 100px;
}

.dotted{
  border-right: 1px dashed var(--c1);
}

.new-benilab-bx{
  background-color: #fff;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  width: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 10px;
  /* flex-direction: column; */
  /* justify-content: center; */
  border-top: 3px solid var(--c2);
  position: relative;
}

.benilab-num{
  font-size: 40px;
}

.opacity{
  position: absolute;
  bottom: -10px;
  right: 0;
  opacity: 0.5;
}


.lab-abt-img-new{
  width: 100% !important;
  height: 400px;
  border-radius: 20px;
  object-fit: cover;
}

.lab-abt-img{
  position: relative;

}

.lab-abt-img::after{
  content: '';
  border-top: 10px solid var(--c2);
  border-left: 10px solid var(--c2);
  position: absolute;
  right: 1%;
  top: -1%;
  height: 100%;
  width: 100%;
  border-radius: 20px;
  z-index: -1;
}

.lab-dots{
  position: absolute;
  bottom: -30px;
  right: -30px;
  height: 180px;
  width: auto;
  z-index: -1;

}

.tlab-img{
  width: 100%;
  height: 350px;
 }


 .tmix-img{
  width: 100%;
  height: 200px;
 }


.lab-typ-img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}



.lab-typ-con{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

/* ----------- our skills --------- */

.arr_con1{
  background-color: #f6f6f6;
  border-right: 6px solid var(--c2);
  padding: 20px;
  /* min-height: 90px; */
}

.ab2-img{
  width: 100% !important;
  height: 600px ;
  border-radius: 10px;
  /* rotate: 5deg; */
  object-fit: cover;
  margin-top: 30px;
  position: relative;
}

.arr_con{
  background-color: #f6f6f6;
  border-left: 6px solid var(--c2);
  padding: 20px;
  /* min-height: 0px; */
}

/* ----- faq container ------// */



.faq-heading {
  margin-top: 40px;
  margin-bottom: 30px;
  text-align: start;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.3;
}

.faq-card {
  border-bottom: 1px solid #CFCFCF;
  /* border-radius: 6px; */
  padding: 15px 15px;
  margin-bottom: 12px;
  list-style: none;
  position: relative;
  cursor: pointer;
  font-size: 20px;
}

.faq-open-icon {
  font-size: 20px;
  position: absolute;
  top: 18px;
  right: 24px;
  font-weight: 700;
}

details[open] .faq-open-icon {
  top: 18px;
  right: 24px;
}

details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details[open] summary {
  color: var(--c2);
  font-weight: 500;
}

details[open] .faq-card-spoiler {
  display: inline-block;
  padding-top: 8px;
  /* color: ; */
  font-size: 16px;
}

.faq-aftertext {
  text-align: center;
  color: #8b8b9a;
}

.show-more {
  /* display: none; */
  cursor: pointer;
}

.ty-compact-list {
  /* padding: 5px 5px 5px 0px; */
  /* float: left; */
  width: 100%;
}

.btn-faq{
  background-color: var(--c2)!important;
  color: #FFF !important;
  /* min-width: 170px; */
  /* width: 100%; */
  border-radius: 10px !important;
}


.padt{
  padding-top: 14px;
}

.applilab-qa{
  background-color: rgba(88, 122, 232, 0.7);
  /* min-height: ; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.applilab-qa::before{
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  inset: 0%;
  background-image: url(../images/2148969941.jpg);
  background-size: cover;
  background-position: center;
  z-index: -1;
}

/* ---------- marquee ----------- */

.marque-top{
  box-shadow: rgba(14, 30, 37, 0.089) 0px 2px 4px 0px, rgba(14, 30, 37, 0.203) 0px 2px 16px 0px;
}

.firstmarquee img{
  height: 100px;
}

.marqueeimg{
  overflow: hidden;
  white-space: nowrap;
  /* width:900px; */
  /* margin-left: 50px; */
}

.firstmarquee{
  display: inline-block;
  animation:19.5s slide infinite linear;
  
}

.firstmarquee img{
  margin:10px 10px 20px 10px;
}

@keyframes slide {
from{
    transform:translateX(0);
}
to{
    transform: translateX(-100%);
}
}



.tpmimg{
position: relative;
}

.tpmimg img{
  object-fit: cover;
}

.apmimg{
  position: relative;
  width: 100%;
  }
  
  .apmimg1{
    width: 100%;
  }

  .apmimg2 img{
    object-fit: contain;
    height:400px ;
    width: 100%;
  }

  .apmimg3 img{
    object-fit: contain;
    height:200px ;
    width: 100%;
  }
  
  .apmimg img{
    object-fit: cover;
    height: 200px ;
    width: 100%;
  }

.anlab{
  position: absolute;
  bottom: 0%;
  max-height: 35px;
  padding: 2px 10px;
  color: white;
  background-color: var(--c1);
  right: 37%;
}

.anlab1{
  position: absolute;
  bottom: 0%;
  max-height: 35px;
  padding: 2px 10px;
  color: white;
  background-color: var(--c1);
  right: 23%;
}

.anlab2{
  position: absolute;
  bottom: 0%;
  max-height: 35px;
  padding: 2px 10px;
  color: white;
  background-color: var(--c1);
  right: 21%;
}

.anlab5{
  position: absolute;
  bottom: 0%;
  max-height: 35px;
  padding: 2px 10px;
  color: white;
  background-color: var(--c1);
  right: 31%;
}

.anlab6{
  position: absolute;
  bottom: 0%;
  max-height: 35px;
  padding: 2px 10px;
  color: white;
  background-color: var(--c1);
  right: 29%;
}

.anlab3{
  position: absolute;
  bottom: 0%;
  max-height: 35px;
  padding: 2px 10px;
  color: white;
  background-color: var(--c1);
  right: 21%;
}

.labul{
  list-style-type:none;
}


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


.im1 {
  width: 100%;
  overflow: hidden;
  object-fit: cover;
}

.im2 {
  width: 100%;
  overflow: hidden;
}

.im1 img {
  width: 100%;
  object-fit: cover;
  height: 514px ;
}

.im2 img {
  width: 100%;
  height: 250px ;
  object-fit: cover;
  margin-bottom: 2%;
}



 /* ----------- product page ------------ */

 .small-sli{
  display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 150px !important;
       height: 100px !important;
 }
 .small-sli img{
  height: 100%;
  width: 100%;
  object-fit: contain;
 }
 .swip-btn{
      background-color: black !important;
      width: 40px !important;
      height: 40px !important;
      border-radius: 50%;
 }
 .swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 16px !important;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
    color: #FFF;
    
}
.new-top-fix{
  position: relative;
}

.ss{
  width: 90px !important;
  /* height: 70px !important; */
 /* object-fit: cover; */
 }

.top-sli{
display: flex;
      align-items: center;
      justify-content: center;
      /* width: 100% !important; */
     height: 500px !important;
     
}
.top-sli img{
height: 100%;
width: 100%;
object-fit: contain;
}

.slides-new{
  max-height: calc(150vh - 100px);
  /* overflow: auto; */
  /* position: sticky; */
  overflow: hidden;
  top: 50px;
  transition: top 0.5s ease-out 0s;
  vertical-align: baseline;
    scroll-behavior: smooth;
  -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  
}
/* prodect dis */
.txt-small{
      font-size: 14px;
}
.price-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
}
.qty-input{
width: 70px;
}
.pro-btn{
      background-color: var(--c1) !important;
      color: #fff !important;
      font-size: 13px !important;
      border-radius: 0% !important;
}
.whats-app-bx{
      display: flex;
      align-items: center;
      justify-content: flex-start;
}
.whats-app img{
      width: 40px;
}
.accordion-button:focus{
      border: none !important;
      box-shadow: none !important;
}
.pro-btn-box{
      display: flex;
}
.main-qty-bx{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  
  }
  .wish-qty-bx{
    width: 180px;
  }
  .wish-qty-btn {
    /* background-color: var(--c1) !important; */
    color: #fff !important;
    /* height: 40px; */
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
  /* similar products */
.sim-pro{
    position: relative;
  }
  .owl-nav{
    width: 102% !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 30%;
    left: -1%;
  }
  .sim-arrow{
    background-color: #000 !important;
    border-radius: 50% !important;
    height: 35px;
    width: 35px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    transition: all 1s !important;
  }
  
  /* .sim-pro:hover .sim-arrow{
    transform: scale(1.3);
    transition: all 1s !important;
  } */
  .sim-card .name{
    width: 80%;
  }
  .isim-btn{
    background-color: var(--c1) !important;
    color: #fff !important;
    font-weight: 500 !important;
  }
  .sim-img{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* zoom */
.close-zoom{
    background-color: #000 !important;
    color: #fff !important;
    position: absolute;
    top: 2%;
    right: 2%;
  }
  .slideshow-items {
    width: 100%;
  }
  
  .slideshow-thumbnails {
    width: 100px;
    height: 100px;
  }
  
  #slideshow-items-container {
    display: inline-block;
    position: relative;
  }
  
  #lens {
    background-color: rgba(233, 233, 233, 0.4);
    height: 150px !important;
    width: 280px !important;
  }
  
  #lens,
  #result {
    position: absolute;
    display: none;
    z-index: 1;
  }
  
  .slideshow-items {
    display: none;
  }
  
  .slideshow-items.active {
    display: block;
  }
  
  .slideshow-thumbnails {
    opacity: 0.5;
  }
  
  .slideshow-thumbnails.active {
    opacity: 1;
  }
  
  #lens,
  .slideshow-items,
  .slideshow-thumbnails,
  #result {
    border: solid var(--light-grey-2) 1px;
  }
  #result{
    background-color: #FFF;
    /* left: 661.012px; */
    left: unset !important;
    right: 0% !important;
  }


  .reqpro-btn{
    background-color: var(--c2) !important;
    color: #fff !important;
    border-radius: 0% !important;
    width: 160px;
   }

  .linecon{
    position: relative;
  }

  .line2{
    width: 100%;
    height: 5px;
    background-color: var(--c2);
    position: absolute;
    bottom: 0;
   }

   .deb-img{
    height: 300px;
    width: auto;
   }

   .deb-img img{
    height: 100%;
    width: 100%;
   }




    /* analystic lab ------- */

    .indus-left{
      position: relative;
    }
    .indus-left::after{
      content: '';
      height: 100%;
      width: 96%;
      background-color: var(--c2);
      position: absolute;
      inset: 0;
      left: 2%;
      transform: rotate(-5deg);
      z-index: -1;
      /* animation: up-down ease-in 5s infinite; */
    }
    @keyframes up-down {
      0% {transform: rotate(-5deg);}
      50% {transform: rotate(5deg);}
      100% {transform: rotate(-5deg);}
    }
    
    
    .indus-page-img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: 3px solid #fff;
    }

    .indus1-page-img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: 3px solid var(--c1);
    }

    .indus-line{
      height: 3px;
      background-color: var(--c1);
      width: 20%;
      transition: all 2s;
    }

    .indus-line1{
      height: 3px;
      background-color: var(--c1);
      width: 45%;
      transition: all 2s;
    }

   
    .indus-pg-content{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }


    .tlaban-img{
      width: auto;
      height: 170px;
     }
    
    
    .laban-typ-img{
      height: 100%;
      width: 100%;
      object-fit: contain;
    }
    
    .laban-typ-con{
      box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    }


      .tlaban2-img{
      width: auto;
      height: 200px !important;
     }

     .tlaban1-img{
      width: auto;
      height: 130px;
     }
    
    
    .laban1-typ-img{
      height: 100%;
      /* width: 50%; */
      object-fit: contain;
    } 

    .laban2-typ-img{
      height: 100% !important;
      /* width: 100%; */
      object-fit: contain !important;
    }
    
    .laban1-typ-con{
      box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
      width: 100%;
      min-height: 300px;
    }

    .laban1-typ-con:hover{
      transform: scale(1.02);
      transition: all ease-in-out 0.3s;
      box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(66, 90, 172) 0px 0px 0px 3px;
    }
    

    .pag-btn{
      color: white;
      border: 2px solid var(--c2) !important;
    }

    .pag-btn1{
      border: 2px solid var(--c2) !important;
    }

    .autoban-typ-con{
      box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
      min-height: 280px;
    }


    .active{
      color: white !important ;
    }


    .table-img img{
      object-fit: contain;
    }