@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@100;300;400;500;700;800;900&family=Inter:wght@100..900&family=Manrope:wght@200..800&display=swap')*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul{
  margin: 0px !important;
  padding: 0px !important;
}

:root{
    --blue:#01652F;
    --red:#DF012C;
    --yellow:#DF012C;
}
body{
    position: relative;
    font-family: "Inter", sans-serif;
    font-family: "Alegreya Sans", sans-serif;
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-style: normal;
    background: #fff !important;
}


/* icon start */
.mail{
  position: fixed;
  left: 20px;
  bottom: 150px;
  z-index: 9999;
}
.mail a i{
  font-size: 20px;
  color: #fff;
  background-color:var(--red);
  border-radius: 50px;
  padding: 10px 12px;
}
.mail a i:hover{
background-color: #fff;
color: var(--red);
}

.Phone{
  position: fixed;
  left: 20px;
  bottom: 30px;
  z-index: 9999;
}
.Phone a i{
  font-size: 20px;
  color: #fff;
  background-color: blue;
  border-radius: 50px;
  padding: 10px 12px;
}
.Phone a i:hover{
background-color: #fff;
color: blue;
}

.whatspp{
  position: fixed;
  left: 20px;
  bottom: 90px;
  z-index: 9999;
}
.whatspp a i{
  font-size: 20px;
  color: #fff;
  background-color: rgb(8,209,8);
  border-radius: 50px;
  padding: 10px 12px;
}
.whatspp a i:hover{
background-color: #fff;
color: rgb(8,209,8);
}

/* icon end */


/* **************************************** navbar start */
.navbar-scrolled{
  background:#000 !important;
  backdrop-filter:blur(10px);
  transition: .5s;
}
.navbar{
  padding: 0 !important;
  background: #000000;
}
.nav-link{
  font-weight: 700;

}
.tytyty{
  top: 45% !important;
  z-index: 1;
  transform: translate(-40%, -10%) !important;
  left: 10% !important;
}
.hidee {
  display: none;
}

.showw {
  display: block;
}

.navbar .navbar-brand .logg img {
  width: 30%;
}
.navbar .navbar-brand .logg{
  display: flex;
}

.navbar .navbar-nav .nav-item {
  margin: auto 30px;
}
.logg h4 strong{
  font-size:25px;
  color: #fff;
  font-weight: 600;
}
.logg h4 span{
  font-size: 16px;
  color: #fff;
}

.logg h4{
  padding-top:20px;
  color: #fff;
}
.navbar .navbar-nav .nav-item .nav-link {
  color: #ffffff;
  letter-spacing: 1px ;
  font-family: "Alegreya Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  
}
.nav-link:hover{
  color: var(--yellow) !important;
}
.navbar .navbar-nav .dropdown-menu {
  z-index: 99999 !important;
  border-radius: 0;
  box-shadow: rgba(255, 255, 255, 0.753) 0px 2px 2px 2px;
  padding: 0;
}

.navbar .navbar-nav .dropdown-menu .dropdown-item {
  border-bottom: 1px solid var(--white);
  padding: 5px;
  background: var(--black);
  font-weight: 600;
  color: var(--white);
  transition: .8s;
}
.dropdown-menu{
  padding: 50px;
}
.dropdown-menu h4{
  font-size: 20px;
  letter-spacing:  1px;
  font-weight:700;
  padding-left: 10px;
  padding-top: 10px;
  position: relative;
}
.dropdown-menu h4::after{
  content: '';
  position: absolute;
  background-color: var(--yellow);
  width:40px;
  height: 2px;
  bottom: 10px;
  left: 120px ;

}
.dropdown-item img{
  padding-right: 10px;
}


.navbar .navbar-nav .dropdown-menu li:hover .dropdown-item {
  letter-spacing: 1px;
  color: var(--yellow);
}

.navbar .dropdown:hover .dropdown-menu {
  display: block;
  transition: .8s;
}
.why-text h2 {
  font-size: 27px;
  font-weight: 600;
  color: #000;
}
.why-text {
  padding: 5px 20px;
}
.why-img img {
  transition: .5s;
  background-color: #fff;
  /* padding: 50px 50px 0px 50px; */
}
.why-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.why-box {
  transition: .5s;
  padding: 20px 0px 20px 0px;
}
.dropdown-item p{
  width: 100px  !important;
  height: 100px !important;
  overflow: hidden;

}
.dropdown-item i{
  padding-right: 10px;

}
.client-img{
  margin-top: 40px;
  width: 200px;
  height: 155px;
  overflow: hidden;
}
.client-img img{
  border: 1px solid var(--yellow);
  padding: 35px;
}
.testii{
  background: #ECF5FF;
}
.dropdown-item{
  margin-top: 20px;
  border-bottom: 1px solid #ddd !important;
}
.dropdown-item span img{
  overflow: hidden;

}

@media screen and (max-width:992px) {
  .hidee {
      display: block;
  }
  .head-btn a {
    padding: 2px 7px;
    border: 1px solid #dddd;
    background: var(--yellow);
    text-decoration: none;
    color: #ffffff;
    font-size: 10px;
}
  .showw {
      display: none;
  }

  .navbar .navbar-brand img {
      width: 90px !important;
  }

  .navbar .fa-toggle-on {
      color: #ffffff;
  }
  .navbar .navbar-nav .dropdown-menu .dropdown-item {
    border-bottom: 1px solid var(--white);
    padding: 5px;
    background: var(--black);
    font-weight: 600;
    font-size: 10px;
    color: var(--white);
    transition: .8s;
}
.last-text p {
  color: #fff;
  font-size: 11px !important;
}
.text-end {
    text-align: center !important;
}
.abt-btn-01{
  display: none;
}
  .navbar .navbar-toggler {
      border: 2px solid var(--yellow);
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
}
.top-head-icon{
  margin: 10px 0;

}
.top-head-icon strong{
  font-size: 12px;
  font-weight: 300;
  color: #666666;
  letter-spacing: 1px;
  font-family: "Inter", sans-serif;
}
.head-iconn a{
  /* border: 1px solid var(--yellow); */
  text-decoration: none;
  color:  #000000;
  line-height: 1;
  font-size: 13px;
    font-family: "Alegreya Sans", sans-serif;;
  transition: .5s;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 20px;
}
.first-top-head-icon i{
  background: var(--red);
  border-radius: 50%;
  color: #ffffff;
  font-size: 20px;
  width: 45px;
  padding: 13px;
  height: 45px;
  margin-right: 10px;
}
.head-marque marquee{
  padding-top: 25px;
  font-size: 13px;
  font-family: "Inter", sans-serif;

}
.second-top-head-icon i{
  background: var(--red);
  border-radius: 50%;
  color: #ffffff;
  font-size: 20px;
  width: 45px;
  padding: 13px;
  height: 45px;
  margin-right: 10px;
}
.top-head-icon{
  justify-content: space-between;
}
.head-iconn:hover{
  color: var(--yellow);
  /* letter-spacing: 1px ; */
}

.head-btn  a{
  padding: 9px 20px;
  background:var(--red);
  text-decoration: none;
  margin-right: 30px;
  color: #ffffff;
}
.top{
  border-bottom: 1px solid #ddd;
}
.top-head-icon-social h6{
  padding: 8px 0px 0px;
  color: #fff;
}
.top-head-icon-social a{
  text-decoration: none;
  padding: 10px;
  font-size: 12px;
  color: #fff;
  transition: .5s;
  font-weight: 600;
}
.Facebook{
  color: #507cbe;;
}
.twitter{
  color: #00abef;;
}
.google{
  color:#d93e2d ;
}
.linkdin{
  color:#3371b7 ;
}
.youtube{
  color: #d93e2d;
}
.tophead{
  position: sticky;
  z-index: 9999 !important;
  background-color:transparent;
  right: 0;
  transition: .5s;
  left: 0;
  padding: 0px 0px;
}
.tophead-01{
  z-index: 9999 !important;
  background-color:#000;
  backdrop-filter: blur(10px);
  right: 0;
  transition: .5s;
  left: 0;
  
}
.page-breadcrumb li a {
  color:#fff;
  font-size: 14px;
  text-decoration: none;
}
.page-breadcrumb li a i{
  padding-left: 10px;
  color:#fff;
  text-decoration: none;
}
.lost{
  color: var(--yellow) !important;
}
.page-breadcrumb li {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  padding-right: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}
.banner-top{
  position: relative;
}
.banner-topp{
  position: relative;
}
.auto-container h1{
  color: #fff;
  font-size: 50px;
  font-weight: 500;
}
.auto-container {
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translate(-50% , -50%);
  left: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  background-position: center bottom;
}


.social-icon a{
  text-decoration: none;
}
.social-icon a i{
  color: #fff;
  padding:10px;
  
}
/*   banner start heere */

.banner-index .active h2 {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  transition-delay: 1000ms;
}
.banner-index h2 {
  position: relative;
  color: #ffffff;
  font-size: 80px;
  font-weight: 700;
  line-height: .7;
  margin-bottom: 0px;
  opacity: 0;
  padding-left: 30px;
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 100ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
}
.banner-index .active h3 {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  transition-delay: 1500ms;
}
.banner-index h3 {
  position: relative;
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 20px;
  display: inline-block;
  opacity: 0;
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 100ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
  font-family: 'Alegreya Sans', sans-serif;
}
.btn-style-one {
  position: relative;
  padding: 14px 30px 14px;
  line-height: 18px;
  background: none;
  text-decoration: none;
  color: #ffffff;
  transition: .5s;
  font-size: 14px;
  font-weight: 500;
  border: 2px solid #ffffff;
  text-transform: capitalize;
  font-family: 'Alegreya Sans', sans-serif;
}
.btn-style-one:hover{
  background-color: var(--yellow);
  color: #fff;
}
.btn-style-one i{
  padding-right: 10px;
}
.theme-btn {
  display: inline-block;
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.banner-index .active .link-box {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  transition-delay: 2500ms;
}
.banner-index .link-box {
  opacity: 0;
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 100ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
}
.banner-index .active p {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  transition-delay: 2000ms;
}
.banner-index p {
  position: relative;
  color: #ffffff;
  font-size: 14px;
  opacity: 0;
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: 40px;
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 100ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
  font-family: 'Alegreya Sans', sans-serif;
}
.banner-index h3 span {
  font-size: 72px;
  font-weight: 700;
  font-family: 'Frank Ruhl Libre', serif;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  top: 12rem;
  left: 18%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: start;
}

/*   banner end heere */
/* about us start here */

.about-img-01{
  margin-top: 30px;
}
.about-img{
  overflow: hidden;
  position: relative;
}
.about-img::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 50%;
  left: 50%;
  margin-left: -50%;
  top: 0%;
  border-color: transparent;
  border-style: solid;
  border-width: 0 2px;
  z-index: 2;
  transform: scale(.9);
  transition: transform .35s,all .7s;

}
.about-img:after{
  position: absolute;
    content: "";
    width: 50%;
    height: 100%;
    left: 50%;
    margin-left: -25%;
    top: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 2px 0;
    z-index: 2;
    transform: scale(.9);
    transition: transform .35s,all .7s;


}
.about-img:hover::before{
  height: 100%;
  border-color: #ddd;
}
.about-img:hover::after{
  width: 100%;
  border-color: #ddd;
  left: 25%;
}
.about-img-01{
  overflow: hidden;
  position: relative;
}
.about-img-01::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 50%;
  left: 50%;
  margin-left: -50%;
  top: 0%;
  border-color: transparent;
  border-style: solid;
  border-width: 0 2px;
  z-index: 2;
  transform: scale(.9);
  transition: transform .35s,all .7s;

}
.about-img-01:after{
  position: absolute;
    content: "";
    width: 50%;
    height: 100%;
    left: 50%;
    margin-left: -25%;
    top: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 2px 0;
    z-index: 2;
    transform: scale(.9);
    transition: transform .35s,all .7s;


}
.about-img-01:hover::before{
  height: 100%;
  border-color: #ddd;
}
.about-img-01:hover::after{
  width: 100%;
  border-color: #ddd;
  left: 25%;
}
.about-img img{
  overflow: hidden;
  transition: .75s;
}

.about-img-01 img{
  overflow: hidden;
  transition: .75s;
}
.about-img:hover img{
  transform: scale(1.1);
}
.about-img-01:hover img{
  transform: scale(1.1);
}
.about-text{
  padding-top: 0px;
  padding-left: 10px;
}
.about-text span{
  color: var(--yellow);
  font-size: 14px;
  font-family: "Marcellus", serif;
 letter-spacing: 2px ;
 font-weight: 700;

}
.abt-img{
  border-radius: 25px;

}
.abt-img img{
  border-radius: 25px;
  
}
.about-text h2{
  font-size:20px;
  line-height: 1.1;
  padding: 10px 0px ;
  font-family: "Marcellus", serif;
  font-weight: 400;

}
.about-head h1{
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 35px;
  color: #000;

}
.about-head h1 span{
  color: var(--yellow);
}
.about-text p{
  font-size: 15px;
  text-align: justify;
  font-family: "Roboto", sans-serif;


}
.loader {
  animation: rotate 1s infinite;
  height: 50px;
  width: 50px;
}

.loader:before,
.loader:after {
  border-radius: 50%;
  content: "";
  display: block;
  height: 20px;
  width: 20px;
}
.loader:before {
  animation: ball1 1s infinite;
  background-color: #09B0E6;
  box-shadow: 30px 0 0 #ff3d00;
  margin-bottom: 10px;
}
.loader:after {
  animation: ball2 1s infinite;
  background-color: #ff3d00;
  box-shadow: 30px 0 0 #fff;
}
.owl-carousel .owl-nav button.owl-next {
  background: 0 0;
  color: inherit;
  top: 40% !important;
  border: none;
  position: absolute;
  left: 0;
  padding: 40 !important;
  background-color: #000000c0;
  font: inherit;
}
.owl-carousel .owl-nav button.owl-prev {
  background: 0 0;
  color: inherit;
  top: 40% !important;
  border: none;
  position: absolute;
  background: #000000bc;
  right: 0;
  padding: 40 !important;
  font: inherit;
}
.owl-carousel .owl-nav button.owl-next span {
  font-size: 20px;
  padding: 10px 30px;
  border-radius: 20px;
  color: #fff;
}
.owl-carousel .owl-nav button.owl-prev span {
  font-size: 20px;
  padding: 10px 30px;
  border-radius: 20px;
  color: #fff;
}

@keyframes rotate {
  0% { transform: rotate(0deg) scale(0.8) }
  50% { transform: rotate(360deg) scale(1.2) }
  100% { transform: rotate(720deg) scale(0.8) }
}

@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 #ff3d00;
  }
  50% {
    box-shadow: 0 0 0 #09B0E6;
    margin-bottom: 0;
    transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 #ff3d00;
    margin-bottom: 10px;
  }
}

@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 #09B0E6;
  }
  50% {
    box-shadow: 0 0 0 #ff3d00;
    margin-top: -20px;
    transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 #09B0E6;
    margin-top: 0;
  }
}

.abt-icon-text {
  padding-left: 20px;
}
.abt-icon-text h3 span{
  font-size: 50px;
  font-weight: 400;
}
.abt-icon-text p{
  font-size: 20px;
  font-family: "Marcellus", serif;
  font-weight: 600;
  line-height: 1;
  color: #000;
}
.abt-icon{
  position: relative;
}
.abt-icon::after{
  position: absolute;
  content:'';
  background: var(--yellow);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  bottom: 50px;
  z-index: -1;
  right: -10px;
  transition: .5s;


}
.abt-icon:hover::after{
  transform: translateX(10px);
}
.abt-icon:hover img{
  animation: zoom 2s infinite ease;

}
@keyframes zoom {
0%{
  transform: scale(1);
}
50%{
  transform: scale(1.2);
}
100%{
  transform: scale(1);
}  
}
.abt-btn{
  transition: .5s;
  margin-top: 40px;
}
.abt-btn a{
  transition: .5s;
  padding: 10px 30px;
  border:2px solid var(--yellow);
  font-size: 15px;
  font-weight: 700;
  color: #000;
  text-decoration: none;
  border-radius: 25px;

}
.abt-btn:hover a{
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  background: var(--yellow);
  color: #fff;
}
.abt-btn:hover a i{
  color: #fff;}
.abt-btn a i{
  padding-left: 10px;
  color: var(--yellow);
  font-size: 20px;
  transition: .5s;
}

.abt-btn{
  transition: .5s;
  margin-top: 40px;
}
.abt-btn {
  transition: .5s;
  padding: 10px 30px;
  border:2px solid var(--yellow);
  font-size: 15px;
  font-weight: 700;
  color: #000;
  text-decoration: none;
  border-radius: 25px;

}
.abt-btn:hover {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  background: var(--yellow);
  color: #fff;
}
.abt-btn:hover  i{
  color: #fff;}
.abt-btn i{
  padding-left: 10px;
  color: var(--yellow);
  font-size: 20px;
  transition: .5s;
}
.abt-btn:hover i{
  transform: translateX(10px );
}

.abt-btn-01{
  transition: .5s;
  margin-top: 40px;
}
.abt-btn-01 {
  transition: .5s;
  padding: 10px 30px;
  border:2px solid #0c0c5c;
  font-size: 15px;
  font-weight: 700;
  color: #000;
  text-decoration: none;
  border-radius: 25px;

}
.abt-btn-01:hover {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  background:#0c0c5c;
  color: #fff;
}
.abt-btn-01:hover  i{
  color: #fff;}
.abt-btn-01 i{
  padding-left: 10px;
  color: var(--yellow);
  font-size: 20px;
  transition: .5s;
}
.abt-btn-01:hover  i{
  transform: translateX(10px );
}
.aboutus{
  background: url(../images/about/why-choose-one-bg.png);
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 30px 0px 30px 0px;
}
.about-head{
  padding-bottom: 10px;
}
/* about us End here */


/* product start here  */
/* new product start here */

.new-product-box{
  background: #fff;
  border-radius: 0px 0px 20px 20px;
  position: relative;
  margin-top: 20px;
}
.new-product-box:hover .new-product-img img{
  border-radius: 0px 0px 20px 20px;
  
}
.new-product-box:hover .new-pro-icons{
  background-color: #000;
  color: #fff;
}
.new-product-box:hover .new-pro-icons-01{
  background-color:var(--red);
  color: #fff;
  transform: scale(1.1);
}
.new-product-content{
  position: relative;
 
}
.new-pro-icons{
  position: absolute;
  right: 0;
  top: 0;
  transition: .5s all;
  width: 40px;
  height: 40px;
  background-color: var(--red);
  padding: 8px 14px;
  color: #fff;
}
.product-one-single-box-shape{
  position: absolute;
  width:100px;
  top: 0;
  right: 0px;
}
.new-pro-icons-01{
  position: absolute;
  top: 50px;
  transition: .5s all;
  left:20px;
    background: #ddd;
    width: 50px ;
    height: 60px;
    padding: 18px;
    color: #000;
    font-size: 20px;
}
.pro-text{
  padding-top:127px;
  padding-left: 15px;
}
.pro-text p{
  color: #000;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  opacity: 0;
  transition: all 0.5s;

}
.new-product-box:hover .pro-text p{
  opacity: 1;
}
.new-product-img{
  transition: all 0.3s;
  transform: translateY(-20px);

}
.new-product-box:hover .new-product-img::before{ 
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  border-radius: 0px 0px 20px 20px;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.692) 50%, #000000 100%);
  opacity: .5;
  transition: all .3s ease;
  }
.new-product-img::before{ 
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;

bottom: 0;
width: 100%;
height: 100%;
/* background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000000 100%); */
opacity: .5;
transition: all .3s ease;
}
.new-product-box:hover .new-product-img{
  transform: translateY(10px);
}

.pro-text h4{
  color: #000;
  font-size: 17px;
  font-weight: 600;
  margin: 0 !important;
  /* letter-spacing: 1px; */
  /* font-family: "Inter", sans-serif; */
    /* font-family: "Alegreya Sans", sans-serif; */
    font-family: "Manrope", sans-serif;
}
















.product-box{
  margin-top: 20px;
  position: relative;
}
.product-box .product-text{
  position: absolute;
  bottom: 5px;
  left: 10px;
  z-index: 999;
}
.product-box .product-text h2{
  font-size: 15px;
  color: #fff;
  font-family: "Marcellus", serif;


}
.prooo{
  padding: 50px 0px ;
  background:#dbdbdb;
}
.nav-pills {
  justify-content: center !important;
}
.product-box:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,rgba(0,0,0,0) 50%,#000000 100%);
  opacity: .5;
  transition: all .3s ease;
}
.lyer{
  z-index: 99;
  opacity: 0;
  
  position: absolute;
  top: 50%;
  left: 0%;
  transition: .8s;
  transform: translate(-50% , -50%);
}
.lyer a{
  border: 1px solid var(--yellow) ;
  border-radius: 15px;
  text-decoration: none;
  padding: 10px 20px;
  box-shadow: #09afe6b4 0px 1px 4px;
  color: #fff;
  font-size: 15px;  
  font-family: "Marcellus", serif;

}
.lyer a i{
  padding-right: 10px;
  color: #fff;
}
.product-box::after{
  transform: scale(0);
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,rgba(0, 0, 0, 0.474) 50%,#000000 100%);
  opacity: 0;
  transition: all .3s ease;
}
.product-box:hover::after{
  transform: scale(1);
  opacity: 1;
}
.product-box:hover .product-text h2{
  color:#fff;
}
.product-box:hover .lyer a{
  color: #fff;
}
.product-box:hover .lyer{
  left: 50%;
  opacity: 1;
}
.pro-head span{
  color: var(--yellow);
  font-size: 14px; 
   font-family: "Marcellus", serif;
   letter-spacing: 2px;

}
.pro-head h2{
  font-size: 40px;
  line-height: 1.3;
  font-family: "Marcellus", serif;
  font-weight: 400;

}
.pro-btn{
  padding-top: 60px;
}
.pro-btn a{
  color: var(--yellow);
  font-size: 16px;
  text-decoration: none;
  font-family: "Marcellus", serif;


}
.pro-btn a i{
  padding-right: 30px;
}
#tyytuy{
  padding-top: 50px;
}
/* product  end  here  */
/* slide start here  */
.slide-head h5{
  color: var(--yellow);
  font-size:20px;
}
.product-slide{
  padding: 50px 0px;
}
.slide-text h5{
  font-size: 17px;
  color: #000;
  transition: all .5s;
  padding-top: 20px;
  text-shadow: 1px 0px 0px #000;
}
.pro-slide-box:hover .slide-text h5{
  text-decoration: -3px 5px 3px #000;
  color: var(--yellow);
}
.nav-pills .nav-link {
  width: 150px;
  margin: 10px;
  color: #000000;
  background: #b8b8b8d2;
  border: 0px;
  border-radius: var(--bs-nav-pills-border-radius);
}
.icoc-img img{
  width:60px;
  height:60px;

}
.why-icon-text{
  margin-left: 30px;
}
.why-icon-text h6{
  color: var(--yellow);
  font-size: 17px;
  font-weight: 600;
  font-family: "Lato", sans-serif;


}
.why-icon-text p{
  color: #000;
  font-size: 12px
}
.why-icon {
  padding-bottom: 20px;
  padding-top: 20px;
  margin-top: 10px;
  border-bottom: 1px solid #ddd;
}
.why-text h6{
  color: var(--yellow);
  font-weight: 600;
}
.why-text p{
  font-size: 13px;
}
.why-img img{
  border-radius: 10px;
}
/* slide end here */
.sub-product a{
  text-decoration: none;
}

.section-title {
	font-size: 28px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	font-weight: 400;
	display: inline-block;
	position: relative;
}
.section-title:after,
.section-title:before {
	content: "";
	position: absolute;
	bottom: 0;
}
.section-title:after {
	height: 2px;
	background-color: rgba(252, 92, 15, 0.46);
	left: 25%;
	right: 25%;
}

.section-title:before {
	width: 15px;
	height: 15px;
	border: 3px solid #fff;
	background-color: #fc5c0f;
	left: 50%;
	/* transform: translatex(-50%); */
	bottom: -6px;
	z-index: 9;
	border-radius: 50%;
}

/* CAROUSEL STARTS */
.customer-feedback .owl-item img {
	width: 85px;
	height: 85px;
}

.feedback-slider-item {
	position: relative;
	padding: 60px;
	margin-top: -40px;
}

.customer-name {
	margin-top: 15px;
	margin-bottom: 25px;
	font-size: 20px;
	font-weight: 500;
}

.feedback-slider-item p {
	line-height: 1.875;
}

.customer-rating {
	background-color: #eee;
	border: 3px solid #fff;
	color: rgba(1, 1, 1, 0.702);
	font-weight: 700;
	border-radius: 50%;
	position: absolute;
	width: 47px;
	height: 47px;
	line-height: 44px;
	font-size: 15px;
	right: 0;
	top: 77px;
	text-indent: -3px;
}

.thumb-prev .customer-rating {
	top: -20px;
	left: 0;
	right: auto;
}

.thumb-next .customer-rating {
	top: -20px;
	right: 0;
}

.customer-rating i {
	color: rgb(251, 90, 13);
	position: absolute;
	top: 10px;
	right: 5px;
	font-weight: 600;
	font-size: 12px;
}

/* GREY BACKGROUND COLOR OF THE ACTIVE SLIDER */
.feedback-slider-item:after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 0;
	top: 103px;
	background-color: #f6f6f6;
	border: 1px solid rgba(251, 90, 13, 0.1);
	border-radius: 10px;
	z-index: -1;
}

.thumb-prev,
.thumb-next {
	position: absolute;
	z-index: 99;
	top: 45%;
	width: 98px;
	height: 98px;
	left: -90px;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.thumb-next {
	left: auto;
	right: -90px;
}

.feedback-slider-thumb img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
}

.feedback-slider-thumb:hover {
	opacity: 0.8;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.customer-feedback .owl-nav [class*="owl-"] {
	position: relative;
	display: inline-block;
	bottom: 45px;
	transition: all 0.2s ease-in;
}

.customer-feedback .owl-nav i {
	background-color: transparent;
	color: rgb(251, 90, 13);
	font-size: 25px;
}

.customer-feedback .owl-prev {
	left: -15px;
}

.customer-feedback .owl-prev:hover {
	left: -20px;
}

.customer-feedback .owl-next {
	right: -15px;
}

.customer-feedback .owl-next:hover {
	right: -20px;
}

/* DOTS */
.customer-feedback .owl-dots {
	position: absolute;
	left: 50%;
	/* transform: translateX(-50%); */
	bottom: 35px;
}
.customer-feedback .owl-dot {
	display: inline-block;
}

.customer-feedback .owl-dots .owl-dot span {
	width: 11px;
	height: 11px;
	margin: 0 5px;
	background: #fff;
	border: 1px solid rgb(251, 90, 13);
	display: block;
	-webkit-backface-visibility: visible;
	-webkit-transition: all 200ms ease;
	transition: all 200ms ease;
	border-radius: 50%;
}

.customer-feedback .owl-dots .owl-dot.active span {
	background-color: rgb(251, 90, 13);
}

/* RESPONSIVE */
@media screen and (max-width: 767px) {
	.feedback-slider-item:after {
		left: 30px;
		right: 30px;
	}
  
	.customer-feedback .owl-nav [class*="owl-"] {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		margin-top: 45px;
		bottom: auto;
	}
	.customer-feedback .owl-prev {
		left: 0;
	}
	.customer-feedback .owl-next {
		right: 0;
	}
}

/* extra */
.copyright {
	text-align: center;
	margin-top: 30px;
	font-size: 1.6rem;
	background-color: #ededed;
}
.copyright a {
	display: inline-block;
	padding: 15px 2px;
}
.copyright a:not(:last-child):after {
	content: "/";
	margin-left: 10px;
}

.toptal {
	color: #204ecf;
}

.upstack {
	color: #008bf7;
}

.upwork {
	color: #37a000;
}

.fiverr {
	color: #1dbf73;
}

.jobs {
	color: magenta;
	text-decoration: underline;
	margin-top: -15px;
}



.testimonial-container{
  background-color: #393E46;
  color: #fff;
  border-radius: 5px;
  margin: 30px 0 0;
  padding: 50px 80px;
  max-width: 768px;
  position:relative;
}

.fa-quote{
  color:#FFD369;
  font-size: 28px;
  position: absolute;
  top: 70px;
}

.fa-quote-right{
  left: 40px;
}

.fa-quote-left{
  right: 40px;
}

.testimonial{
  line-height: 1.7;
  text-align: justify;
  margin-bottom: 30px;
}

.user{
  display:flex;
  align-items:center;
  justify-content: center;
}

.user .user-image{
  border-radius: 50%;
  border: 3px solid #FFD369;
  height: 75px;
  width: 75px;
  object-fit: cover;
}

.user .user-details{
  margin-left: 10px;
}

.user .username{
  margin: 0;
}

.user .role{
  font-weight: normal;
  margin: 10px 0;
}

.progress-bar{
  background-color: #FFD369;
  height: 4px;
  width: 100%;
  margin-bottom: 40px;
  animation: grow 10s linear infinite;
  transform-origin: left;
}

@keyframes grow{
  0%{
    transform: scaleX(0);
  }
}




@media(max-width: 768px){
  .testimonial-container{
    padding: 20px 30px;
  }
  
  .fa-quote{
    display: none;
  }
}

/* counter start here  */
.line {
  display: inline-block;
  width: 2px;
  height: 40px;
  background: #f64b3c;
  margin-bottom: -6px;
  margin-top: 0px;
}
.black-sec p {
  color: #fff;
  font-size: 20px;
  font-family: 'Frank Ruhl Libre', serif;
}
.black-sec span {
  padding-top: 10px;
  color: #fff;
  font-size: 25px;
  font-family: 'Frank Ruhl Libre', serif;
}
.sec-img {
  width: 80px;
  height: 80px;
  display: inline-block;
  background: #fff;
  border-radius: 50%;
  padding: 16px;
}
.black-sec {
  background: linear-gradient(to left, #000000ea, #000000cc),url(../images/iconss/bggggg.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 40px 0px 0px 0px;
}


/* counter end here  */

/*  footer start */

.footer{
  background:linear-gradient(to left , #00000093, #000000af), url(../images/iconss/bggggg.png);
  
}
.foter-box{
  padding: 20px 0px;
}
.foter-box h3{
  color: #ffffff;
  font-size: 25px;
  font-weight: 600;
}
.bgdueggg{
  display:flex;
}
.foter-box h4{
  color: #ffffff;
  font-size: 25px;
  font-weight: 600;
}
.foter-box strong{
  color: #ffffff;
  padding: 30px 0px 15px;
  font-size: 25px;
  letter-spacing: 1px;
  
  font-weight: 600;
}
.foter-box p{
  color: #ffffff;
  font-size: 15px;
  text-align: justify;

}
.foter-box ul{
  padding: 10px 0px !important;
  margin: 0px !important;
  list-style: none;
}
.foter-box ul li{
  color: #ffffff;
  font-size: 15px;
  padding-top: 5px;

}
.foter-box ul li a{
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 1px;
  transition: .6s;
} 
.foter-box ul li a i{
  padding-right: 10px;
}
.foter-box ul li:hover a{
  color: var(--yellow);
  letter-spacing: 2px;

}
.tete{
  padding: 7px 10px;
  border: 1px solid #fff;
  border-radius: 15px;
  margin-top: 10px;
}
.tetee{
  margin-top:20px;
}
#ryytr{
  background:#000;
}
.last-text{
  padding: 10px 0px 0px;
}
.last-text p{
  color: #fff;
  font-size: 14px;
}
.last-text p a{
  color: #fff;
  text-decoration: none;

}
.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn {
  padding: 20px 0 20px !important;
}
.last-icon-text span {
  margin-bottom: 40px;
  font-size: 13px;
}
.last-icon-text h6 {
  font-size: 17px;
  font-weight: 800;
  color: #000;
}
.last-icon-text {
  padding: 10px 0px;
}
.last-icon {
  width: 40px;
  height: 40px;
  overflow: hidden;
}
.last-icon-box {
  padding: 20px 10px 4px;
}
#dgff {
  border-right: 1px solid #ddd;
}
#ytoiiut {
  background: #fff;
  border: 1px solid #ddd;
}
.last-form form button {
  transition: .5s;
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background:transparent;
  padding: 9px 0px;
  border-radius: 0;
  border:none;
  color: #000000;
  font-size: 13px;
}
.last-form form button:hover{
  background: var(--yellow);
}
.sec-title h3{
  padding:10px 0px;
  color: #fff;
}
.last-form form .firmm {
  width: 99%;
}
.last-form form .FIRM {
  width: 26%;
}
.last-form form input::placeholder{
  color: #000000;
}
.last-form form input {
  padding: 9px 10px;
  box-shadow: none;
  font-size: 12px;
  width: 100%;
  background: transparent;
  margin: 13px 0px;
  color: #000;
}

.last-form form textarea {
  padding: 9px 10px;
  box-shadow: none;
  font-size: 12px;
  width: 100%;
  height: 100px;
  background: transparent;
  margin: 13px 0px;
  color: #000;
}
.last-form{
  padding: 50px;
}
.firmmm{
  width: 99.9%;
  padding: 10px 10px;
  height: 90px;
  background: transparent;
}


.section-title {
	font-size: 28px;
	margin-top: 40px;
	padding-bottom: 20px;
	font-weight: 400;
	display: inline-block;
	position: relative;
}
.section-title:after,
.section-title:before {
	content: "";
	position: absolute;
	bottom: 0;
}
.section-title:after {
	height: 2px;
	background-color: rgba(252, 92, 15, 0.46);
	left: 25%;
	right: 25%;
}

.section-title:before {
	width: 15px;
	height: 15px;
	border: 3px solid #fff;
	background-color: #fc5c0f;
	left: 50%;
	transform: translatex(-50%);
	bottom: -6px;
	z-index: 9;
	border-radius: 50%;
}
.section-title-01:after,
.section-title-01:before {
	content: "";
	position: absolute;
	bottom: 0;
}
.section-title-01:after {
	height: 2px;
	background-color: rgba(252, 92, 15, 0.46);
	left: 46%;
	right: 46%;
  bottom: -10px;
}
.section-title-01{
  position: relative;
}

.section-title-01:before {
	width: 15px;
	height: 15px;
	border: 3px solid #fff;
	background-color: #fc5c0f;
	left: 50%;
	transform: translatex(-50%);
	bottom: -16px;
	z-index: 9;
	border-radius: 50%;
}
.section-title-02:after,
.section-title-02:before {
	content: "";
	position: absolute;
	bottom: 0;
}
.section-title-02:after {
	height: 2px;
	background-color: rgba(252, 92, 15, 0.46);
	left: 0%;
	right:82%;
  bottom: -10px;
}
.section-title-02{
  position: relative;
}

.section-title-02:before {
	width: 15px;
	height: 15px;
	border: 3px solid #fff;
	background-color: #fc5c0f;
	left: 9%;
	transform: translatex(-50%);
	bottom: -16px;
	z-index: 9;
	border-radius: 50%;
}
.form-head h6{
  color: var(--yellow);
  font-size: 20px;
}


/*  conatct-main start */
.contact-img{
  padding-bottom: 15px;
}
.contact-text p{
  font-family: "Lato", sans-serif;
}
.contact-text{
  padding-top: 10px ;
}
.contact-img img {
  width: 50px;
  height: 50px;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}
.contact-text a{
  color: #333333;
  font-size: 13px;
  transition:.5s;
  font-weight:300;
  font-family: "Lato", sans-serif;

  text-decoration: none;
}
.contact-text a strong{
  color: #333333;
  font-size: 15px;
}
.contact-box:hover .contact-text h3{
  color: var(--yellow);
}
.contact-text h3{
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: .5s all;
  padding-bottom: 5px;
}
.contact-text a:hover{
  color: var(--yellow);
}
.contact-text a:hover strong{
  color: #000;
}
.contact-text h2{

  font-size: 20px;
  font-weight: 500;
}
.contact-text p strong{
  color: #333333;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  font-weight: 500;
}
.contact-box {
  padding: 30px 0px;
}
.contact-main-head h1{
  color: #000000;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 1px;
}
.contact-main-head p{
  font-family: "Lato", sans-serif;
  font-size: 15px;
  font-weight: 500;
}
.contact-main{
  padding:70px 0px 30px;
}

.form__group {
  position: relative;
  padding: 15px 0 0;
  margin-top: 10px;
  width: 100%;
}

.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #9b9b9b;
  outline: 0;
  font-size: 1.3rem;
  color: #fff;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}
.form__field::placeholder {
  color: transparent;
}
.form__field:placeholder-shown ~ .form__label {
  font-size: 13px;
  cursor: text;
  top: 20px;
}

.form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: #9b9b9b;
}

.form__field:focus {
  padding-bottom: 6px;
  font-weight: 700;
  border-width: 3px;
  border-image: linear-gradient(to right, #f1af07, #e1a202cd);
  border-image-slice: 1;
}
.form__field:focus ~ .form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: #ecb314;
  font-weight: 700;
}

/* reset input */
.form__field:required, .form__field:invalid {
  box-shadow: none;
}
.form__field{
  color: #2e2e2e;
}
.form__field::placeholder{
  color: #a6a6a6;
  font-size: 13px;
}
.main-btn{
  width: 100%;
  background: #332F2C;
  border: none;
  padding: 6px 0px;
  color: #fff;
  margin-top: 20px;
  transition: .2s ease-in-out
  ;
}
.main-btn:hover{
  background: var(--yellow);
  color: #fff;
}
.text-03{
  height: 100px;
}
.contact-main-head h6{
  color:var(--yellow);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;

}

.contact-main-head h2{
  color:#000;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: "Lato", sans-serif;


}
.main-contact-form{
  padding-top: 30px;
}
#tyuytu{
  margin: 30px 0px;
}
/*  conatct-main end*/
/*  about us page css start here */
.about-text strong{
  color:#0c0c5c!important;
}
.pro-head h5{
  color: var(--yellow);
  margin: 10px 0px;
}
/*  about us page css end here */
















































@media screen and (max-width:700px) {
  .lyer a {
    border: 1px solid var(--yellow);
    border-radius: 15px;
    text-decoration: none;
    padding: 10px 10px;
    color: #fff;
    font-size: 15px;
    font-family: "Marcellus", serif;
}
.bgdueggg{
  display:block;
}
.auto-container {
  position: absolute;
  top: 52%;
  z-index: 1;
  transform: translate(-28% , -55%);
  left: 39%;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  background-position: center bottom;
}
.page-breadcrumb li {
  position: relative;
  display: inline-block;
  margin-right: 4px;
  padding-right: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
.auto-container h1 {
  color: #fff;
  font-size: 14px;
  margin: 0px ;
  font-weight: 500;
}
.tytyty {
  top: 46% !important;
  z-index: 1;
  transform: translate(-40%, -12%) !important;
  left: 19% !important;
}
.carousel-caption {
  position: absolute;
  right: 15%;
  top: 0px;
  left: 10%;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #fff;
  text-align: start;
}
  
.banner-index h2:before {
  position: absolute;
  left: 0px;
  top: -5px;
  content: '';
  width: 40px;
  height: 30px;
  z-index: -1;
  background-color: #009b4edd;
}
.banner-index .active h2 {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  transition-delay: 1000ms;
}
.banner-index h2 {
  position: relative;
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  line-height: .7;
  margin-bottom: 0px;
  opacity: 0;
  padding-left: 20px;
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 100ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
}
.banner-index .active h3 {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  transition-delay: 1500ms;
}
.banner-index h3 {
  position: relative;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 5px;
  display: inline-block;
  opacity:0;
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 100ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
  font-family: 'Alegreya Sans', sans-serif;
}
.btn-style-one {
  position: relative;
  padding: 2px;
  line-height: 14px;
  background: none;
  text-decoration: none;
  color: #ffffff;
  transition: .5s;
  font-size: 9px;
  font-weight: 500;
  border: 2px solid #ffffff;
  text-transform: capitalize;
  font-family: 'Alegreya Sans', sans-serif;
}
.btn-style-one:hover{
  background-color: #009b4ed2;
  color: #fff;
}
.btn-style-one i{
  padding-right: 10px;
}
.theme-btn {
  display: inline-block;
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.banner-index .active .link-box {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  transition-delay: 2500ms;
}
.banner-index .link-box {
  opacity: 0;
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 100ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
}
.banner-index .active p {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  transition-delay: 2000ms;
}
.banner-index p {
  position: relative;
  color: #ffffff;
  font-size: 7px;
  opacity:0;
  line-height: 1;
  font-weight: 400;
  margin-bottom: 0px;
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 100ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
  font-family: 'Alegreya Sans', sans-serif;
}
.banner-index h3 span {
  font-size: 19px;
  font-weight: 700;
  font-family: 'Frank Ruhl Libre', serif;
}
.about-img {
  padding-top: 30px;
  overflow: hidden;
  position: relative;
}
.contact-main-head h6 {
  color: var(--yellow);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
}
.contact-main-head h2 {
  color: #000;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: "Lato", sans-serif;
}
.contact-img {
  padding-bottom: 0px;
}
.contact-img {
  padding-bottom: 0px;
}
.contact-main-head p {
  font-family: "Lato", sans-serif;
  font-size: 10px;
  font-weight: 500;
}
.contact-main-head h1 {
  color: #000000;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
}
  .video-area{
    display: none;

  }
  .top-head-icon{
    display: none !important;
  }
  .navbar .social-icon{
    display: none;
  }
  .about-text h2 {
    font-size: 14px;
    line-height: 1.1;
    padding: 6px 0px 4px 0px;
    font-family: "Marcellus", serif;
    font-weight: 400;
}
.section-title-01:after {
  height: 2px;
  background-color: rgba(252, 92, 15, 0.46);
  left: 38%;
  right: 36%;
  bottom: -10px;
}
.about-head h1 {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #000;
}
.about-text {
  padding-top: 00px;
  padding-left: 0px;
}
.about-text p {
  font-size: 9px;
  text-align: justify;
  font-family: "Roboto", sans-serif;
}
.pro-head h2 {
  font-size: 12px;
  line-height: 1.3;
  font-family: "Marcellus", serif;
  font-weight: 400;
}
.pro-btn {
  padding-top: 0px;
}
.slide-head p{
  font-size: 12px;
}
.why-text {
  padding: 31px 0px 0px 0px;
}
.why-text p {
  font-size: 9px;
}
.why-text h6 {
  font-size: 10px;
  color: var(--yellow);
  font-weight: 600;
}
.client-img {
  margin-top: 40px;
  width: 100%;
  /* height: 155px; */
  overflow: hidden;
}
.client-img {
  margin-top: 40px;
  width: 100%;
  /* height: 155px; */
  overflow: hidden;
}
.product-box .product-text h2 {
  font-size: 20px;
  color: #fff;
  font-family: "Marcellus", serif;
}
.product-box .product-text {
  position: absolute;
  bottom: 5px;
  left: 8px;
  z-index: 999;
}
.prooo {
  padding: 50px 0 10px;
}
.details-text h6 {
  color: #000;
  font-size: 17px;
  font-weight: 600;
  padding-top: 10px;
}
.details-text p {
  font-size: 10px;
  font-weight: 300;
  color: #000;
  /* line-height: 1; */
}
.card-img p{
  font-size: 10px;
}
.last-form form .FIRM {
  width:100%;
}
.last-form form button {
  width:100%;
}
.about-img-02,.about-img-01{
  display: none;
}
.head-marque{
  display: none;
}
.nav-pills .nav-link {
  width: 250px;
  margin: 10px;
  color: rgb(0, 0, 0);
  background: rgba(184, 184, 184, 0.824);
  border: 0px;
  border-radius: var(--bs-nav-pills-border-radius);
}
.logo{
  text-align: center !important;
  margin: 0 !important;
  padding: 3px 0px !important;
}
.dropdown-item img {
  padding-right: 10px;
  width: 20%;
}
.dropdown-menu {
  min-width: 212px !important;
  transform: translateX(-25px);
}
#preloader{
  display: none !important;
}

}
@media screen and (min-width:700px){
  
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: #fff;
  transition: all 0.6s ease-out;
}
.car-box-01{
  position: relative;
  top: 50%;
  transform: translate(-50% ,-50%);
  left: 50%;
  width: 200px;
  height: 200px;
 

}
.car-box-01 h3::before{
  position: absolute;
  content: '';
  width: 100px;
  height: 3px;
  background: #000;
  top: 100%;
  left: 30%;
}
.car-box-01 h3{
  font-size: 30px;
  position: relative;
  font-weight: 600;
  color: #000;
}
.car-box-01 h3 span{
  color: var(--yellow);
}
.service{
  padding: 40px 0px;
}
.sub-product{
  padding: 20px 0px 40px;
}
.gallery a{
  text-decoration: none;
  margin-top: 30px;
}
.msme{
  font-size: 16px;
  color: #000;
  margin-right: 40px;
  padding: 2px 10px;
  transition: .5s;
  margin-top: 17px;
  border: 1px solid var(--yellow);
}
.msme:hover{
  background: var(--yellow);
  color: #fff;
}
.msme:hover strong{
  /* background: var(--yellow); */
  color: #fff;
}
.msme strong{
  transition: .5s;

  color: var(--yellow);
  
}
@media screen and (max-width:1450px) {
  .head-btn a {
    padding: 6px 9px;
    border: 1px solid #dddd;
    background: var(--yellow);
    text-decoration: none;
    color: #ffffff;
}
.head-btn a {
  padding: 6px 9px !important;
  border: 1px solid #dddd;
  background: var(--yellow);
  text-decoration: none;
  margin: 0;
  color: #ffffff;
}.navbar .navbar-nav .nav-item {
  margin: auto 23px;
}.msme {
  font-size: 16px;
  color: #000;
  margin-right: 3px;
  padding: 2px 3px;
  margin-top: 17px;
  border: 1px solid var(--yellow);
}
  
}
.foter-box li a strong{
  font-size: 15px;
}




.icon-text p {
  color: #000;
  font-weight: 300;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  padding: 10px 20px 30px 20px;
}
.icon-text h3 {
  color: #000;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
}
.main-icon i {
  font-size: 55px;
  color: var(--red);
}
.icon-text {
  padding: 20px 10px 20px 10px;
}
.main-icon {
  padding: 60px 0px 20px 0px;
}
#wild {
  margin: 50px 0px;
}

.icon-box:hover{
  background: var(--red);
}
.icon-box:hover .main-icon i{
  color: #fff;
}
.icon-box:hover .icon-text h3{
  color: #fff;
}
.icon-box:hover .icon-text p{
  color: #fff;
}

.swiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

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

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