img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.common_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.home {
  position: relative;
  background: #F9F9F9;
}

.home .bg1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

.home .bg1 img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.home .bg2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
}

.home .bg2 img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.home .bg3 {
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.home .bg3 img {
  width: 100%;
  display: block;
  object-fit: cover;
  height: 100%;
}

.main {
  padding: 18.9583333333vw 8.3333333333vw 0 8.3333333333vw;
  position: relative;
  z-index: 10;
}

.main .title {
  text-align: center;
}

.main .title h1 {
  color: #0F77FF;
  font-weight: 500;
  line-height: 0.8;
  text-transform: capitalize;
  margin-bottom: 1.25vw;
}

.main .title .tag {
  color: #000;
  font-weight: 300;
  line-height: 1.5;
}

.main2 {
  padding: 0 8.3333333333vw 6.25vw 8.3333333333vw;
}

.section1 {
  margin: 14.53125vw 0 0 8.3333333333vw;
  display: flex;
  overflow: hidden;
}

.section1 .r {
  width: 51.25vw;
}

.section1 .r .rSwiper {
  width: 63.5416666667vw;
}

.section1 .r .rSwiper .swiper-slide {
  cursor: pointer;
}

.section1 .r .rSwiper .swiper-slide.swiper-slide-active .item {
  filter: blur(0);
}

.section1 .r .rSwiper .swiper-slide .item {
  width: 100%;
  height: 35.4166666667vw;
  border-radius: 1.25vw;
  border: 1px solid #FFF;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: -7.179px 5.983px 2.393px 0px rgba(255, 255, 255, 0.2) inset;
  backdrop-filter: blur(34px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  filter: blur(2px);
  transition: 1s;
}

.section1 .r .rSwiper .swiper-slide .item .p1 {
  text-align: center;
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: 1.9791666667vw;
  /* 120% */
  text-transform: capitalize;
}

.section1 .r .rSwiper .swiper-slide .item .btn {
  width: 100%;
  margin: 1.25vw 0 2.4479166667vw;
}

.section1 .r .rSwiper .swiper-slide .item .btn .submit {
  border-radius: 1.0416666667vw;
  border: 1.264px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 100%, rgba(255, 255, 255, 0) 100%), #0F77FF;
  box-shadow: 0px 0px 0px 1.264px #0F77FF, 0px 1.264px 2.528px 0px rgba(12, 43, 100, 0.2);
  display: flex;
  padding: 0.5208333333vw 1.8229166667vw 0.5208333333vw 1.875vw;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: 0 auto;
  color: #FFF;
  line-height: 1.35;
  cursor: pointer;
  text-transform: capitalize;
}

.section1 .r .rSwiper .swiper-slide .item .img {
  width: 20.2083333333vw;
}

.section1 .r .rSwiper .swiper-slide .item .img img {
  width: 100%;
  max-height: 24vw;
}

.section1 .l {
  width: 27.3958333333vw;
  margin: 7.7083333333vw 4.6875vw 0 0;
}

.section1 .l .p1 {
  color: #000;
  font-style: normal;
  font-weight: bold;
  line-height: 142.82%;
  /* 68.554px */
  text-transform: capitalize;
  margin: 0 0 1.25vw;
}

.section1 .l .p2 {
  color: #000;
  font-style: normal;
  font-weight: 300;
  line-height: 1.875vw;
  /* 150% */
  margin: 0 0 1.25vw;
}

.section1 .l .cut {
  display: flex;
  gap: 0 0.78125vw;
}

.section1 .l .cut .item {
  width: 1.4583333333vw;
  height: 1.4583333333vw;
  border-radius: 50%;
  border: 2px solid transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: .6s ease;
  cursor: pointer;
}

.section1 .l .cut .item svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 135%;
  height: 135%;
}

.section1 .l .cut .item svg .path-loop {
  stroke-dashoffset: 157px;
  fill: none;
  stroke: #297EF7;
  stroke-miterlimit: 10;
  stroke-width: 3px;
  transition: 0.6s;
}

.section1 .l .cut .item.on {
  border: 2px solid #C6CFE0;
}

.section1 .l .cut .item.on:after {
  opacity: 0;
}

@keyframes loop {
  0% {
    stroke-dashoffset: 157px;
  }

  100% {
    stroke-dashoffset: 18;
  }
}

.section1 .l .cut .item.on svg .path-loop {
  animation: loop 3.8s linear forwards;
}

.section1 .l .cut .item:after {
  content: '';
  width: 0.625vw;
  height: 0.625vw;
  border-radius: 50%;
  display: inline-block;
  background: #747477;
  transition: .6s ease;
}

.section2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5vw 2.0833333333vw;
}

.section2 .item {
  height: 18.4895833333vw;
  width: 100%;
  border-radius: 1.0416666667vw;
  border: 1px solid #FFF;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: -6px 5px 2px 0px rgba(255, 255, 255, 0.2) inset;
  backdrop-filter: blur(28px);
  display: block;
  padding: 1.5625vw;
}

.section2 .item:hover .img img {
  transform: scale(1.05);
}

.section2 .item .img {
  width: 100%;
  height: 12.2395833333vw;
  background: #D9D9D9;
  overflow: hidden;
  border-radius: 0.5208333333vw;
}

.section2 .item .img img {
  width: 100%;
  height: 100%;
  transition: .6s;
}

.section2 .item .dis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1.25vw 0 0 0;
}

.section2 .item .dis .p1 {
  color: #000;
  font-style: normal;
  font-weight: 400;
}

.section2 .item .dis .more {
  display: flex;
  align-items: center;
  gap: 0 0.46875vw;
}

.section2 .item .dis .more p {
  color: #000;
  font-style: normal;
  font-weight: 300;
}

.section2 .item .dis .more svg {
  width: 0.5729166667vw;
  height: 0.5208333333vw;
}

.types {
  margin: 8.0208333333vw 0 5.2083333333vw 0;
  display: flex;
  justify-content: center;
}

.types a {
  width: 12.5vw;
  height: 4.0625vw;
  border-radius: 2.0833333333vw;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(28.6775245667px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 1.5625vw;
  transition: all 600ms;
  color: #5D5D5D;
  cursor: pointer;
}

.types a.on {
  background: #358CFF;
  color: white;
}

.pager {
  margin-top: 5.2083333333vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pager a {
  margin: 0 0.2604166667vw;
}

.pager a svg {
  width: 1.25vw;
  height: 1.25vw;
  display: block;
}

.pager .nums a {
  color: #8B8B8B;
  padding: 0 0.5208333333vw;
  position: relative;
}

.pager .nums a.on {
  border-bottom: 2px solid #007AFF;
  color: #007AFF;
}

@media screen and (max-width: 1024px) {
  .main {
    padding: 120px 5% 0 5%;
  }

  .main .title h1 {
    margin-bottom: 12px;
  }

  .main2 {
    padding: 0 5% 120px 5%;
  }

  .section1 {
    margin: 50px 0 0 0;
    padding: 0 5%;
    flex-direction: column;
  }

  .section1 .l {
    width: 100%;
    margin: 0;
  }

  .section1 .l .p1 {
    margin: 0 0 10px;
  }

  .section1 .l .p2 {
    line-height: 30px;
    margin: 0 0 15px;
  }

  .section1 .l .cut {
    gap: 0 25px;
  }

  .section1 .l .cut .item {
    width: 25px;
    height: 25px;
  }

  .section1 .l .cut .item:after {
    width: 8px;
    height: 8px;
  }

  .section1 .r {
    width: 100%;
    margin: 25px 0 0;
  }

  .section1 .r .rSwiper {
    width: 100%;
  }

  .section1 .r .rSwiper .swiper-slide .item {
    height: auto;
    padding: 40px 0 0 0;
    transform: scale(1) !important;
  }

  .section1 .r .rSwiper .swiper-slide .item .img img{
    max-height: inherit;

  }

  .section1 .r .rSwiper .swiper-slide .item .p1 {
    line-height: 25px;
  }

  .section1 .r .rSwiper .swiper-slide .item .btn {
    margin: 15px 0 25px 0;
  }

  .section1 .r .rSwiper .swiper-slide .item .btn .submit {
    border-radius: 15px;
    padding: 5px 17px;
  }

  .section1 .r .rSwiper .swiper-slide .item .img {
    width: 73%;
  }

  .main2 .section2 {
    gap: 25px 0;
    grid-template-columns: repeat(1, 1fr);
  }

  .main2 .section2 .item {
    width: 100%;
    padding: 15px;
    height: auto;
    border-radius: 10px;
  }

  .main2 .section2 .item .img {
    height: auto;
    border-radius: 10px;
  }

  .main2 .section2 .item .dis {
    margin: 15px 0 0 0;
  }

  .main2 .section2 .item .dis .more {
    gap: 0 7px;
  }

  .main2 .section2 .item .dis .more svg {
    width: 11px;
    height: 10px;
  }

  .main2 .types {
    margin: 60px 0 30px 0;
    flex-wrap: wrap;
  }

  .main2 .types a {
    width: 100%;
    height: 60px;
    margin: 0 0 20px 0;
    border-radius: 40px;
  }

  .main2 .pager {
    margin-top: 50px;
  }

  .main2 .pager a {
    margin: 0 5px;
  }

  .main2 .pager a svg {
    width: 16px;
    height: 16px;
  }

  .main2 .pager .nums a {
    padding: 0 5px;
  }
}

/*# sourceMappingURL=products.css.map */