html,
body {
  width: 100vw;
  height: 100vh;
  /* background-color: #000000; */
}
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
  /* overflow-x: hidden; */
}
*::-webkit-scrollbar{
  display: none;
}


/* ///////////////// product start /////////////// */

.heading {
  margin: 50px auto;
  font-weight: 100;
  animation: headingSliding 20s both 0s infinite;
  position: relative;
}

.heading h3 {
  display: flex;
  position: relative;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px #1a4046;
}

.heading h3:nth-child(2) {
  margin-left: 100px;
}

.heading h3 span {
  margin: 0 20px;
  font-weight: 900;
  color: #0b6e7d;
  -webkit-text-stroke: 0px;
}

@keyframes headingSliding {
  0% {
    left: -5%;
  }

  100% {
    left: -100%;
  }
}

.card {
  box-shadow: rgba(41, 42, 42, 0.2) 0px 18px 50px -10px;
  /* width: 100%; */
  /* height: 400px; */
  position: relative;
  /* bottom: -80px; */
  opacity: 0;
}

.card:nth-child(1),
.card:nth-child(3),
.card:nth-child(5) {
  left: -80px;
}

.card:nth-child(2),
.card:nth-child(4),
.card:nth-child(6) {
  right: -80px;
}

.card:hover {
  box-shadow: rgba(0, 251, 255, 0.2) 0px 18px 50px -10px;
  color: skyblue;
}

/* ///////////////// product end /////////////// */

/* ////////////// customization text start ////////////  */

#customization {
  position: relative;
  width: 100vw;
}

#customization > h2 {
  position: absolute;
  /* z-index: 99; */
  text-align: center;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  color: rgb(51, 218, 255);
}

#customization > h4 {
  font-size: 30px;
  position: absolute;
  z-index: 99;
  text-align: center;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 400;
  color: rgb(75, 75, 75);
  line-height: 35px;
  background: linear-gradient(to right, #f32170, #ff6b08, #7f7c7f, #d4c220);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

/* ////////////// customization text end ////////////  */

/* ///////////////// feature start /////////////// */

.featureImg {
  width: 725px;
  height: 483px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* ///////////////// feature end /////////////// */
        .swiper {
            width: 100%;
            padding-top: 50px;
            padding-bottom: 50px;
        }

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

        .swiper-slide img {
            display: block;
            width: 100%;
        }
        .swiper-slide-shadow-left{
              background-image: linear-gradient(to left, #a4a4a480, rgba(0, 0, 0, 0)) !important;
            }
            .swiper-slide-shadow-right {
          background-image: linear-gradient(to right, #a4a4a480, rgba(0, 0, 0, 0)) !important;
        }







        /* ////////////////////////////////////////////// */
        .footer-bottom h2 {
  display: block;
  color: #2c234d;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-stroke: 2px #004283;
  -webkit-text-fill-color: transparent;
}
.preloader,
.preloader .preloader-circle {
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
}
.rotateme {
  -webkit-animation-name: rotateme;
  animation-name: rotateme;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
@keyframes rotateme {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateme {
  from {
    -webkit-transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
.preloader {
  background-color: #636768ea;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  transition: 0.6s;
  margin: 0 auto;
}
.preloader .preloader-circle {
  width: 100px;
  height: 100px;
  position: relative;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(0, 188, 205) transparent transparent;
  z-index: 10;
  border-radius: 50%;
  -webkit-box-shadow: 0 1px 5px 0 rgba(35, 181, 185, 0.15);
  box-shadow: 0 1px 5px 0 rgba(35, 181, 185, 0.15);
  background-color: #fff;
  -webkit-animation: 2s infinite zoom;
  animation: 2s infinite zoom;
  transition: 0.6s;
}
.preloader .preloader-circle2 {
  border-top-color: #0078ff;
}
.preloader .preloader-img {
  position: absolute;
  top: 50%;
  z-index: 200;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  display: inline-block;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  padding-top: 6px;
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
  filter: invert();
}
.preloader .preloader-img img {
  max-width: 55px;
}
.preloader .pere-text strong {
  font-weight: 800;
  color: #dca73a;
  text-transform: uppercase;
}
@-webkit-keyframes zoom {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
  }
}
@keyframes zoom {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
  }
}

#back-top,
#scrollUp {
  background: rgb(0, 177, 194);
  height: 50px;
  width: 50px;
  right: 31px;
  bottom: 18px;
  z-index: 999;
  position: fixed;
  color: #fff;
  font-size: 20px;
  text-align: center;
  border-radius: 50%;
  line-height: 48px;
  border: 2px solid transparent;
  box-shadow: 0 0 10px 3px rgba(108, 98, 98, 0.2);
}
#back-top a i,
#scrollUp a i {
  display: block;
  line-height: 50px;
}