/** @format */

/* Animation */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-left {
  animation-name: slideInFromLeft;
}

.slide-right {
  animation-name: slideInFromRight;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes rotateGear {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

.active .rotateGear {
  animation: rotateGear 4s linear infinite;
}

.key-features__content [data="feature1"],
.key-features__content [data="feature2"],
.key-features__content [data="feature3"],
.key-features__content [data="feature4"] {
  display: none;
}

[data="feature1"].active,
[data="feature2"].active,
[data="feature3"].active,
[data="feature4"].active {
  display: block;
}

@keyframes fadeInFill {
  to {
    opacity: 1;
  }
}

.active .fade-in-fill,
.perspective__vector .fade-in-fill {
  opacity: 0;
  animation: fadeInFill 2s ease forwards;
}

.active .animated-path,
.c-sec-fadeInUp.active .perspective__vector .animated-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 5s ease forwards;
}

/* PRODUCTS BANNER */

.c-page-products header {
  filter: unset;
  padding: 0;
}

.c-page-products .container-header {
  padding: 0 20px;
}

.c-page-products .box-header {
  max-width: 1000px;
  margin: 0 auto;
  border: 2px solid #98ece1;
  border-radius: 48px;
  padding: 17.44px 19.96px 13.44px 42.07px;
  margin-top: 26px;
  justify-content: space-between;
}

.c-page-products .box-header .img-logo {
  width: unset;
}

.c-page-products .box-header .nav-menu {
  margin-top: -6px;
}

.c-page-products .box-header .box-btn a {
  padding: 11px 42.59px 8px;
}

.product-banner {
  text-align: center;
  padding-top: 111.06px;
  padding-bottom: 105.05px;
}

.product-banner__content {
  margin-top: 45.48px;
}

.product-banner h1 {
  font-style: normal;
  font-weight: 300;
  font-size: 60px;
  line-height: 60px;
  text-align: center;
  color: #003446;
  max-width: 787.17px;
  margin-left: auto;
  margin-right: auto;
}

.product-banner h1 span {
  font-weight: 700;
  color: #29d8c1;
}

.product-banner__content p {
  margin-top: 26.65px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  color: #000000;
  max-width: 687.58px;
  margin-left: auto;
  margin-right: auto;
}

/* KEY FEATURES */

.key-features .container {
  max-width: 1260px;
}

.key-features__inner {
  background: linear-gradient(91.64deg, #003040 3.96%, #002734 100.25%);
  border-radius: 40px;
  padding: 82px 108.67px 84.85px 108.22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.key-features__aside {
  width: 48%;
  opacity: 0;
}

.c-sec-fadeInUp .key-features__aside {
  animation: fadeInUp 0.6s forwards;
  animation-delay: 0s;
}

.key-features__inner h2 {
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  color: #f3f5f6;
  max-width: 398.31px;
  text-wrap-style: balance;
}

.key-features__inner h2 span {
  font-weight: 700;
  color: #29d8c1;
}

.key-features__aside-nav {
  margin-top: 63px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 0;
}

.key-features__aside-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
}

.key-features__aside-nav-item.active {
  display: flex;
}

.key-features__aside-nav-item::before {
  content: "";
  width: 4px;
  height: 42px;
  border-radius: 50px;
  background: #a0adb3;
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

.key-features__aside-nav-item.active::before,
.key-features__aside-nav-item:hover::before {
  background: #29d8c1;
}

.key-features__aside-nav-item {
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  color: #a0adb3;
  cursor: pointer;
}

.key-features__aside-nav-item.active,
.key-features__aside-nav-item:hover {
  color: #29d8c1;
}

.key-features__content {
  display: flex;
  flex-wrap: wrap;
  gap: 23.72px 24.33px;
  width: 52%;
  justify-content: flex-end;
  margin-top: 2px;
  flex: 1;
  max-width: 472px;
  opacity: 0;
}

.c-sec-fadeInUp.active .key-features__content {
  animation: slideInFromRight 0.6s forwards;
  animation-delay: 0.2s;
}

.key-features__content p {
  margin-bottom: 0;
}

.key-features__content-box-item {
  background: linear-gradient(91.64deg, #003040 3.96%, #002734 100.25%);
  border: 1px solid #05526d;
  box-shadow: 0px 0px 6px rgba(0, 198, 243, 0.5);
  border-radius: 20px;
  padding: 38.5px 28px 31.5px 34px;
}

.key-features__content-textbox {
  max-width: 268px;
  color: #f3f5f6;
  padding: 24px 20px 24px 27px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
}

.key-features__content-textbox p {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.1;
  color: #f3f5f6;
}

.key-features__content-textbox span {
  color: #29d8c1;
}

.key-features__content-textbox.active {
  display: flex;
  animation: slideInFromLeft 0.6s forwards;
}

.key-features__content-iconbox {
  max-width: 180px;
  padding: 0;
  flex: 1;
}

.key-features__content-iconbox.active {
  animation: slideInFromRight 0.6s forwards;
}

.key-features__content-iconbox[data="feature1"] {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.key-features__content-iconbox[data="feature1"].active {
  display: flex;
}

.key-features__content-iconbox[data="feature1"] svg:first-child {
  margin-right: -10px;
}

.key-features__content-iconbox[data="feature1"] svg:last-child {
  margin-left: -10px;
}

/* Feature SVG animations */
@keyframes rotateGear {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

.key-features__content-iconbox svg.uncheck path,
.key-features__content-iconbox svg.uncheck circle {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawLine 1s ease forwards;
  animation-delay: 0s;
}

.key-features__content-iconbox svg.uncheck path[data="uncheck-path"] {
  opacity: 0;
  animation: fadeInFill 1s ease forwards;
}

.key-features__content-iconbox svg.gear path,
.key-features__content-iconbox svg.gear circle {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  -webkit-animation: drawLine 2s ease forwards;
  -webkit-animation-delay: 0.5s;
}

.key-features__content-iconbox svg.gear {
  -webkit-transform-origin: 50% 50%;
  transform-box: fill-box;
  -webkit-animation: rotateGear 3s linear infinite;
  -webkit-animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
}

.key-features__content-iconbox svg.check path,
.key-features__content-iconbox svg.check circle {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawLine 2s ease forwards;
  animation-delay: 1s;
}

.key-features__content-iconbox svg.check path[data="check-path"] {
  opacity: 0;
  animation: fadeInFill 0.5s ease forwards;
  animation-delay: 1s;
}

@keyframes fadeInFill {
  to {
    opacity: 1;
  }
}

svg.check path.stroked,
svg.check circle {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: drawLine 1s ease forwards;
  animation-delay: 3s;
}

svg.check path.filled-check {
  opacity: 0;
  animation: fadeInFill 0.5s ease 4s forwards;
}

.key-features__content-iconbox[data="feature2"].active,
.key-features__content-iconbox[data="feature3"].active,
.key-features__content-iconbox[data="feature4"].active {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.key-features__content-box-item--maincontent {
  background: linear-gradient(108.4deg, #003040 15.66%, #002734 71.57%);
  border: 1px solid #05526d;
  box-shadow: 0px 0px 6px rgba(0, 198, 243, 0.5);
  border-radius: 20px;
}

.key-features__content-mainbox {
  background: url(../images/products/key-features-main-bg.png) no-repeat center;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  height: 100%;
  padding: 20px !important;
}

.key-features__content-mainbox-wrap {
  opacity: 0;
  animation: fadeInFill 0.5s ease forwards;
  animation-delay: 0s;
  width: 100%;
  height: 560px;
}

.key-features__content-mainbox.active {
  animation: fadeInFill 0.5s ease forwards;
  animation-delay: 0s;
  opacity: 1;
  pointer-events: auto;
}

.feature1-content__body {
  width: 100%;
  max-width: 407.28px;
  margin-left: auto;
  margin-right: auto;
}

.key-features__content-mainbox-inner {
  margin-top: 15px;
  position: relative;
}

.key-features__content-mainbox-upper {
  display: flex;
  justify-content: space-between;
  gap: 11px;
}

.key-features__content-mainbox-upper-left {
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
  color: #29d8c1;
  text-wrap-style: balance;
  position: relative;
  display: flex;
  max-width: 228.5px;
}

.key-features__content-mainbox.active .key-features__content-mainbox-upper-left {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 0s;
}

.key-features__content-mainbox-upper-left::before {
  content: "";
  display: block;
  width: 21px;
  height: 62px;
  background: url(../images//products/arrow-down-green.svg) no-repeat top center;
  background-size: contain;
}

.key-features__content-mainbox-upper-right {
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
  color: #a0adb3;
  position: relative;
  display: flex;
}

.key-features__content-mainbox.active .key-features__content-mainbox-upper-right {
  animation: slideInFromRight 0.6s forwards;
  animation-delay: 0s;
}

.key-features__content-mainbox-upper-left span,
.key-features__content-mainbox-upper-right span {
  flex: 1;
}

.key-features__content-mainbox-upper-right::after {
  content: "";
  display: block;
  width: 21px;
  height: 62px;
  background: url(../images//products/arrow-down-gray.svg) no-repeat top center;
  background-size: contain;
}

.key-features__content-mainbox-item {
  padding: 10px;
  gap: 10px;
  background: #003446;
  border: 2px solid #d9d9d9;
  border-radius: 12px;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.1;
  text-align: center;
  color: #ffffff;
  max-width: fit-content;
  position: relative;

  opacity: 0;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

.key-features__content-mainbox-item--1 {
  margin: 0 auto;
  position: relative;
  left: 9px;
}

.key-features__content-mainbox-item--1::before {
  content: "";
  width: 103.23px;
  height: 52.69px;
  background: url(../images/products/Group-409.svg) no-repeat center;
  background-size: cover;
  position: absolute;
  right: 56%;
  top: 115%;
}

.key-features__content-mainbox-item--1::after {
  content: "";
  width: 12px;
  height: 152.63px;
  background: url(../images/products/Group-410.svg) no-repeat center;
  background-size: cover;
  position: absolute;
  right: 28%;
  top: 115%;
}

.key-features__content-mainbox-item--2 {
  margin-top: 63.08px;
  border: 2px solid #98ece1;
  margin-left: 2px;
}

.key-features__content-mainbox-item--2::before {
  content: "";
  width: 108px;
  height: 49px;
  background: url(../images/products/Group-411.svg) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 48%;
  top: 122%;
}

.key-features__content-mainbox-item--3 {
  margin-top: 61px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  left: 15px;
}

.key-features__content-mainbox-item--3::before {
  content: "";
  width: 13px;
  height: 41px;
  background: url(../images/products/Group-412.svg) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 47%;
  top: 127%;
}

.key-features__content-mainbox-item--4 {
  margin-top: 53px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  left: 14px;
}

.key-features__content-mainbox-item--4::before {
  content: "";
  width: 115px;
  height: 51px;
  background: url(../images/products/Group-413.svg) no-repeat center;
  background-size: cover;
  position: absolute;
  right: 73%;
  top: 127%;
}

.key-features__content-mainbox-item--4::after {
  content: "";
  width: 115px;
  height: 53px;
  background: url(../images/products/Group-414.svg) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 67%;
  top: 127%;
}

.key-features__content-mainbox-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 63px;
  padding: 0 10px 0 20px;
}

.key-features__content-mainbox-item--5 {
  border: 2px solid #98ece1;
  margin-left: 2px;
}

.key-features__content-mainbox-item--6 {
  border: 2px solid #f27994;
  margin-top: 2px;
  margin-right: 3px;
}

.key-features__content-box-item.active .key-features__content-mainbox-item--1,
.swiper-slide-active .key-features__content-box-item .key-features__content-box-item--1 {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 0.2s;
}

.key-features__content-box-item.active .key-features__content-mainbox-item--2,
.swiper-slide-active .key-features__content-box-item .key-features__content-box-item--2 {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 0.4s;
}

.key-features__content-box-item.active .key-features__content-mainbox-item--3,
.swiper-slide-active .key-features__content-box-item .key-features__content-box-item--3 {
  animation: slideInFromRight 0.6s forwards;
  animation-delay: 0.6s;
}

.key-features__content-box-item.active .key-features__content-mainbox-item--4,
.swiper-slide-active .key-features__content-box-item .key-features__content-box-item--4 {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 0.8s;
}

.key-features__content-box-item.active .key-features__content-mainbox-item--5,
.swiper-slide-active .key-features__content-box-item .key-features__content-box-item--5 {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 1s;
}

.key-features__content-box-item.active .key-features__content-mainbox-item--6,
.swiper-slide-active .key-features__content-box-item .key-features__content-box-item--6 {
  animation: slideInFromRight 0.6s forwards;
  animation-delay: 1.2s;
}

/* HIGHER MARGINS */
.higher-margins {
  margin-top: 117.85px;
}

.higher-margins__subtitle {
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  color: #003446;
  text-transform: uppercase;

  width: 100%;
  position: relative;
  overflow: hidden;
  height: auto;
  max-width: 100%;
}

.higher-margins__subtitle .swiper-slide {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.higher-margins__subtitle .swiper-slide-prev,
.higher-margins__subtitle .swiper-slide-next {
  opacity: 0 !important;
}

.higher-margins__subtitle .swiper-slide-active {
  opacity: 1;
}

.higher-margins__title {
  font-style: normal;
  font-weight: 700;
  font-size: 88px;
  line-height: 88px;
  text-align: center;
  color: #29d8c1;
  margin-top: 12px;
  opacity: 0;
}

.c-sec-fadeInUp.active .higher-margins__title {
  animation: fadeInUp 0.6s forwards;
  animation-delay: 0.2s;
}

.higher-margins__video {
  background: url(../images/products/Screenshot\ 2025-03-20\ at\ 17.36.07.png) no-repeat center;
  background-size: cover;
  border: 2px solid lightgrey;
  border-radius: 20px;
  aspect-ratio: 951.33 / 526.56;
  width: 100%;
  max-width: 951.33px;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 128px;
  opacity: 0;
}

.c-sec-fadeInUp.active .higher-margins__video {
  animation: fadeInUp 0.6s forwards;
  animation-delay: 0.4s;
}

.higher-margins__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* BENEFITS */
.benefits {
  margin-top: 119px;
}

.benefits__subtitle {
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 24px;
  text-align: center;
  color: #29d8c1;
}

.benefits__title {
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  color: #003446;
  text-align: center;
  margin-top: 10px;
}

.benefits__content-item-title {
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 24px;
  display: flex;
  align-items: center;
  color: #29d8c1;
  margin-top: 8px;
}

.benefits__content-item-text {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: #003446;
  margin-top: 12px;
}

.benefits__content {
  display: flex;
  gap: 24px;
  margin-top: 43px;
  max-width: 1054.44px;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
}

.benefits__content-item {
  min-width: 245.48px;
  width: calc((100% - (24px * 3)) / 4);
  opacity: 0;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.c-sec-fadeInUp.active .benefits__content-item:first-child {
  animation: fadeIn 0.6s forwards;
  animation-delay: 0.2s;
}

.c-sec-fadeInUp.active .benefits__content-item:nth-child(2) {
  animation: fadeIn 0.6s forwards;
  animation-delay: 0.4s;
}

.c-sec-fadeInUp.active .benefits__content-item:nth-child(3) {
  animation: fadeIn 0.6s forwards;
  animation-delay: 0.6s;
}

.c-sec-fadeInUp.active .benefits__content-item:nth-child(4) {
  animation: fadeIn 0.6s forwards;
  animation-delay: 0.8s;
}

/* PERSPECTIVE */

.perspective {
  margin-top: 116px;
}

.perspective .container {
  max-width: 1260px;
}

.perspective__inner {
  background: linear-gradient(91.64deg, #003040 3.96%, #002734 100.25%);
  border-radius: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 80px 72.35px 83.46px;
  gap: 20px;
}

.perspective__header {
  margin-top: 21px;
  position: relative;
  flex: 1;
}

.perspective__subtitle {
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 24px;
  color: #29d8c1;
}

.perspective__title {
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  color: #ffffff;
  margin-top: 12px;
}

.perspective__content {
  max-width: 584.08px;
  display: flex;
  flex-wrap: wrap;
  gap: 26px 20px;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

@media (min-width: 769px) {
  .perspective__content.swiper {
    display: none;
  }
}

.perspective__content-box-item {
  display: flex;
  background: linear-gradient(91.64deg, #003040 3.96%, #002734 100.25%);
  border: 1px solid #05526d;
  box-shadow: 0px 0px 6px rgba(0, 198, 243, 0.5);
  border-radius: 20px;
  padding: 38.5px 28px 31.5px 34px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.perspective__content-box-item:hover {
  background: linear-gradient(91.64deg, #0030405c 3.96%, #01222d 100.25%);
}

.perspective__content-box-item:first-child {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 27px 14px 24px;
  width: 100%;
}

.perspective__content-box-item:nth-child(2),
.perspective__content-box-item:nth-child(3) {
  max-width: 270.66px;
  width: 100%;
  flex-direction: column;
  padding: 27px 10px 24px;
  text-align: center;
  justify-content: space-between;
}

.perspective__content-box-item:nth-child(3) {
  margin-right: 6px;
}

.perspective__content-box-item h3 {
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 20px;
  color: #ffffff;
  letter-spacing: 0.005em;
}

.perspective__content-box-item h3 span {
  color: #29d8c1;
}

.perspective__content-box-item p {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: #ffffff;
  margin-top: 12px;
  margin-bottom: 0;
}

.perspective__content-box-item-inner {
  flex: 1;
}

.perspective__content-box-item:nth-child(2) p,
.perspective__content-box-item:nth-child(3) p {
  margin-top: auto;
  margin-bottom: 0;
}

.perspective__content-box-item:nth-child(2) .perspective__content-box-item-inner,
.perspective__content-box-item:nth-child(3) .perspective__content-box-item-inner {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.perspective__btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 11px 18px;
  gap: 10px;
  background: #29d8c1;
  border: #29d8c1 1px solid;
  border-radius: 57px;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 18px;
  color: #ffffff;
  width: fit-content;
  min-width: 150px;
  text-align: center;
  transition: all 0.3s ease;
}

.perspective__content-box-item:nth-child(2) .perspective__btn,
.perspective__content-box-item:nth-child(3) .perspective__btn {
  margin: 0 auto;
  margin-top: 22px;
  /* padding-left: 34px;
  padding-right: 35px; */
}

.perspective__vector {
  position: absolute;
  margin-left: 4%;
  max-width: 446.86px;
  width: 100%;
  height: 165.7px;
}

.perspective__vector-circle-line {
  position: absolute;
  top: 0;
  left: 0;
}

.perspective__vector-circle-line-mb {
  display: none;
}

.perspective__vector-line {
  position: absolute;
  bottom: 0;
  right: 4px;
  left: 30%;
}

@keyframes pulseScale {
  0% {
    box-shadow: 0 0 0 14.66px #05526d, 0 0 0 40.29px rgba(0, 198, 243, 0.4);
  }

  100% {
    box-shadow: 0 0 0 5px #05526d, 0 0 0 16px rgba(0, 198, 243, 0.4);
  }
}

.perspective__vector-circle {
  width: 60.7px;
  height: 60.7px;
  background: linear-gradient(91.64deg, #003040 3.96%, #002734 100.25%);
  border-radius: 50%;
  position: absolute;
  bottom: 3px;
  left: 24%;
  transform: translateY(50%);
  z-index: 1;
  box-shadow: 0 0 0 14.66px #05526d, 0 0 0 40.29px rgba(0, 198, 243, 0.4);

  animation: pulseScale 2.8s infinite alternate;
  animation-timing-function: ease-in-out;
}

/* JOIN US */
.join-us {
  margin-top: 117px;
  margin-bottom: 145px;
}

.join-us__title {
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 36px;
  text-align: center;
  color: #003446;
}

.join-us__text {
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  color: #003446;
  margin-top: 8px;
  margin-bottom: 0;
}

.join-us__title span {
  color: #29d8c1;
}

.join-us form {
  max-width: 302px;
  margin: 0 auto;
  margin-top: 43px;
}

.join-us .wpcf7 .screen-reader-response {
  display: none;
}

.join-us__form-input-wrap {
  border-radius: 10px;
  border: #a0adb3 1px solid;
  overflow: hidden;
  padding: 3px 6px 9px;
  margin-bottom: 21px;
  position: relative;
  overflow: visible;
}

.join-us__form-input-wrap::after {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  background: #fff;
  position: absolute;
  right: -5px;
  z-index: 1;
  bottom: 12px;
}

.join-us__form-input-wrap label {
  font-family: "PF Bague Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  color: #a0adb3;
}

.join-us__form-input-wrap label::after {
  content: "*";
  color: #29d8c1;
  margin-left: 4px;
}

.join-us__form-input-wrap input {
  font-family: "PF Bague Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  color: #003446;
  border: none;
  width: 100%;
}

.join-us form .join-us__form-input-wrap p {
  margin-bottom: 0;
  display: block;
  line-height: 0;
}

.join-us form .wpcf7-not-valid-tip {
  color: #f27994;
  font-family: "PF Bague Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
}

.join-us__form-button {
  background: #003446;
  border-radius: 57px;
  padding: 10px 48px 13px;
  gap: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 18px;
  color: #ffffff;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  border: none;
  outline: none;
  margin-top: 31px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.join-us__form-button:hover {
  background: #29d8c1;
}

.join-us .wpcf7 .wpcf7-response-output {
  font-family: "PF Bague Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
}

.join-us .wpcf7.wpcf7-mail-sent-ok .wpcf7-response-output {
  background-color: #e6ffed;
  color: #1e4620;
  border-color: #66bb6a;
}

.join-us .wpcf7.wpcf7-mail-sent-ng .wpcf7-response-output {
  background-color: #ffecec;
  color: #b71c1c;
  border-color: #e57373;
}

.join-us .wpcf7.wpcf7-validation-errors .wpcf7-response-output {
  background-color: #fffde7;
  color: #795548;
  border-color: #ffca28;
}

.join-us .wpcf7.wpcf7-spam-blocked .wpcf7-response-output {
  background-color: #f3e5f5;
  color: #6a1b9a;
  border-color: #ba68c8;
}

.key-features__content-mainbox-stxt {
  font-family: "PF Bague Sans Pro";
  font-weight: 500;
  font-style: Medium;
  font-size: 16px;
  leading-trim: NONE;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
}

.key-features__content-mainbox-mtxt {
  font-family: "PF Bague Sans Pro";
  font-weight: 500;
  font-style: Medium;
  font-size: 22px;
  leading-trim: NONE;
  line-height: 1.1;
  letter-spacing: 0;
}

.key-features__content-mainbox-ltxt {
  font-family: "PF Bague Sans Pro";
  font-weight: 500;
  font-style: Medium;
  font-size: 24px;
  leading-trim: NONE;
  line-height: 1.1;
  letter-spacing: 0;
}

.key-features__content-mainbox-stxt,
.key-features__content-mainbox-mtxt,
.key-features__content-mainbox-ltxt {
  color: #ffffff;
  text-wrap-style: balance;
}

.key-features__content-mainbox-stxt span,
.key-features__content-mainbox-mtxt span,
.key-features__content-mainbox-ltxt span {
  color: #29d8c1;
}

/* Feature 2 */
.key-features__content-textbox[data="feature2"] {
  justify-content: flex-start;
}

.key-features__content-textbox[data="feature2"] p {
  max-width: 198px;
}

.key-features__content-mainbox[data="feature2"].active {
  padding: 51.5px 20px;
}

.feature2-content__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 322.5px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.feature2-content__top {
  position: relative;
  left: -5px;
  opacity: 0;
}

.feature2-content__top-arrow {
  margin-top: 23px;
  position: relative;
  opacity: 0;
}

.feature2-content__middle {
  display: flex;
  flex-direction: row;
  margin-top: 13px;
}

.feature2-content__middle-left {
  max-width: 97px;
  opacity: 0;
}

.feature2-content__middle-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 7px;
  margin-top: 17px;
}

.feature2-content__middle-list div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 12px 9px;

  border: 2px solid #d9d9d9;
  border-radius: 12px;
  width: 100%;
  max-width: 72px;
}

.feature2-content__middle-left .feature2-content__middle-list {
  max-width: 72px;
}

.feature2-content__middle .key-features__content-mainbox-ltxt {
  margin-left: 14px;
  margin-top: 6px;
  opacity: 0;
}

.feature2-content__middle-right {
  margin-left: 14px;
  flex: 1;
  opacity: 0;
}

.feature2-content__middle-right .key-features__content-mainbox-mtxt {
  margin-left: 5px;
}

.feature2-content__middle-right .feature2-content__middle-list-wrap {
  border: 2px solid #29d8c1;
  border-radius: 12px;
  margin-top: 12px;
  padding-top: 10px;
  padding-bottom: 13px;
}

.feature2-content__middle-right .feature2-content__middle-list {
  margin-top: 11px;
  justify-content: center;
}

.feature2-content__bottom-arrow {
  margin-top: 37px;
  position: relative;
  left: -5px;
  opacity: 0;
}

.feature2-content__bottom {
  margin-top: 15px;
  position: relative;
  left: -5px;
  opacity: 0;
}

.key-features__content-mainbox[data="feature2"].active .feature2-content__top {
  animation: slideInFromLeft 0.6s forwards;
}

.key-features__content-mainbox[data="feature2"].active .feature2-content__top-arrow {
  animation: slideInFromRight 0.6s forwards;
  animation-delay: 0.2s;
}

.key-features__content-mainbox[data="feature2"].active .feature2-content__middle-left {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 0.4s;
}

.key-features__content-mainbox[data="feature2"].active
  .feature2-content__middle
  .key-features__content-mainbox-ltxt {
  animation: fadeInUp 0.6s forwards;
  animation-delay: 0.6s;
}

.key-features__content-mainbox[data="feature2"].active .feature2-content__middle-right {
  animation: slideInFromRight 0.6s forwards;
  animation-delay: 0.8s;
}

.key-features__content-mainbox[data="feature2"].active .feature2-content__bottom-arrow {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 1.2s;
}

.key-features__content-mainbox[data="feature2"].active .feature2-content__bottom {
  animation: slideInFromRight 0.6s forwards;
  animation-delay: 1.4s;
}

/* Feature 3 */

.key-features__content-mainbox[data="feature3"].active {
  padding: 45px 20px;
}

.feature3-content__body {
  width: 100%;
  max-width: 322.84px;
  margin-left: auto;
  margin-right: auto;
}

.feature3-content__middle {
  margin-top: 40px;
}

.feature3-content__middle-heading {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.key-features__content-mainbox-wrap .box-red {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 6px 9px;

  border: 2px solid #f27994;
  border-radius: 12px;
  min-width: 98px;
}

.key-features__content-mainbox-wrap .box-green {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 6px 9px;

  border: 2px solid #98ece1;
  border-radius: 12px;
  min-width: 98px;
}

.key-features__content-mainbox-wrap .box-white {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 6px 9px;

  border: 2px solid #d9d9d9;
  border-radius: 12px;
  min-width: 98px;
}

.feature3-content__middle-inner {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature3-content__middle-flow {
  display: flex;
  flex-direction: row;
}

.feature3-content__middle-flow-svg {
  margin-left: 12px;
}

.feature3-content__middle-flow-right {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.feature3-content__bottom {
  margin-top: 40px;
}

.feature3-content__top {
  opacity: 0;
}

.key-features__content-mainbox[data="feature3"].active .feature3-content__top {
  animation: fadeInUp 0.6s forwards;
}

.feature3-content__middle-heading-left {
  opacity: 0;
}

.key-features__content-mainbox[data="feature3"].active .feature3-content__middle-heading-left {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 0.2s;
}

.feature3-content__middle-heading-right {
  opacity: 0;
}

.key-features__content-mainbox[data="feature3"].active .feature3-content__middle-heading-right {
  animation: slideInFromRight 0.6s forwards;
  animation-delay: 0.3s;
}

/* flow 1 */
.feature3-content__middle-flow:nth-child(1) .feature3-content__middle-flow-left {
  opacity: 0;
}

.key-features__content-mainbox.key-features__content-box-item.active
  .feature3-content__middle-flow:nth-child(1)
  .feature3-content__middle-flow-left {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 0.4s;
}

.feature3-content__middle-flow:nth-child(1) .feature3-content__middle-flow-svg {
  opacity: 0;
}

.key-features__content-mainbox.key-features__content-box-item.active
  .feature3-content__middle-flow:nth-child(1)
  .feature3-content__middle-flow-svg {
  animation: fadeInUp 0.6s forwards;
  animation-delay: 0.5s;
}

.feature3-content__middle-flow:nth-child(1) .feature3-content__middle-flow-right div:first-child {
  opacity: 0;
}

.key-features__content-mainbox.key-features__content-box-item.active
  .feature3-content__middle-flow:nth-child(1)
  .feature3-content__middle-flow-right
  div:first-child {
  animation: slideInFromRight 0.6s forwards;
  animation-delay: 0.5s;
}

.feature3-content__middle-flow:nth-child(1) .feature3-content__middle-flow-right div:last-child {
  opacity: 0;
}

.key-features__content-mainbox.key-features__content-box-item.active
  .feature3-content__middle-flow:nth-child(1)
  .feature3-content__middle-flow-right
  div:last-child {
  animation: slideInFromRight 0.6s forwards;
  animation-delay: 0.6s;
}

/* flow 2 */
.feature3-content__middle-flow:nth-child(2) .feature3-content__middle-flow-left {
  opacity: 0;
}

.key-features__content-mainbox.key-features__content-box-item.active
  .feature3-content__middle-flow:nth-child(2)
  .feature3-content__middle-flow-left {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 0.7s;
}

.feature3-content__middle-flow:nth-child(2) .feature3-content__middle-flow-svg {
  opacity: 0;
}

.key-features__content-mainbox.key-features__content-box-item.active
  .feature3-content__middle-flow:nth-child(2)
  .feature3-content__middle-flow-svg {
  animation: fadeInUp 0.6s forwards;
  animation-delay: 0.8s;
}

.feature3-content__middle-flow:nth-child(2) .feature3-content__middle-flow-right div:first-child {
  opacity: 0;
}

.key-features__content-mainbox.key-features__content-box-item.active
  .feature3-content__middle-flow:nth-child(2)
  .feature3-content__middle-flow-right
  div:first-child {
  animation: slideInFromRight 0.6s forwards;
  animation-delay: 0.9s;
}

.feature3-content__middle-flow:nth-child(2) .feature3-content__middle-flow-right div:last-child {
  opacity: 0;
}

.key-features__content-mainbox.key-features__content-box-item.active
  .feature3-content__middle-flow:nth-child(2)
  .feature3-content__middle-flow-right
  div:last-child {
  animation: slideInFromRight 0.6s forwards;
  animation-delay: 1s;
}

/* flow 3 */
.feature3-content__middle-flow:nth-child(3) .feature3-content__middle-flow-left {
  opacity: 0;
}

.key-features__content-mainbox.key-features__content-box-item.active
  .feature3-content__middle-flow:nth-child(3)
  .feature3-content__middle-flow-left {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 1.1s;
}

.feature3-content__middle-flow:nth-child(3) .feature3-content__middle-flow-svg {
  opacity: 0;
}

.key-features__content-mainbox.key-features__content-box-item.active
  .feature3-content__middle-flow:nth-child(3)
  .feature3-content__middle-flow-svg {
  animation: fadeInUp 0.6s forwards;
  animation-delay: 1.2s;
}

.feature3-content__middle-flow:nth-child(3) .feature3-content__middle-flow-right div:first-child {
  opacity: 0;
}

.key-features__content-mainbox.key-features__content-box-item.active
  .feature3-content__middle-flow:nth-child(3)
  .feature3-content__middle-flow-right
  div:first-child {
  animation: slideInFromRight 0.6s forwards;
  animation-delay: 1.3s;
}

.feature3-content__middle-flow:nth-child(3) .feature3-content__middle-flow-right div:last-child {
  opacity: 0;
}

.key-features__content-mainbox.key-features__content-box-item.active
  .feature3-content__middle-flow:nth-child(3)
  .feature3-content__middle-flow-right
  div:last-child {
  animation: slideInFromRight 0.6s forwards;
  animation-delay: 1.4s;
}

.feature3-content__bottom {
  opacity: 0;
}

.key-features__content-mainbox[data="feature3"].active .feature3-content__bottom {
  animation: fadeInUp 0.6s forwards;
  animation-delay: 1.5s;
}

/* Feature 4 */

.key-features__content-mainbox[data="feature4"].active {
  padding: 65px 20px 50px;
}

.feature4-content__body {
  width: 100%;
  max-width: 323px;
  margin-left: auto;
  margin-right: auto;
}

.feature4-content__top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.feature4-content__middle {
  display: flex;
  flex-direction: row;
  margin-top: 48px;
  align-items: center;
  gap: 5px;
}

.feature4-content__middle-left {
  max-width: 118px;
  width: 100%;
}

.feature4-content__middle-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 7.5px;
  align-items: stretch;
}

.feature4-content__middle-right {
  flex: 1;
  margin-top: -8px;
}

.feature4-content__bottom {
  max-width: 258.76px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
}

.feature4-content__top > div:first-child {
  opacity: 0;
}

.key-features__content-mainbox[data="feature4"].active .feature4-content__top > div:first-child {
  animation: fadeInUp 0.6s forwards;
}

.feature4-content__top > div:nth-child(2) {
  opacity: 0;
}

.key-features__content-mainbox[data="feature4"].active .feature4-content__top > div:nth-child(2) {
  animation: fadeInUp 0.6s forwards;
  animation-delay: 0.2s;
}

.feature4-content__middle-list > div:first-child {
  opacity: 0;
}

.key-features__content-mainbox[data="feature4"].active
  .feature4-content__middle-list
  > div:first-child {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 0.4s;
}

.feature4-content__middle-list > div:nth-child(2) {
  opacity: 0;
}

.key-features__content-mainbox[data="feature4"].active
  .feature4-content__middle-list
  > div:nth-child(2) {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 0.5s;
}

.feature4-content__middle-list > div:nth-child(3) {
  opacity: 0;
}

.key-features__content-mainbox[data="feature4"].active
  .feature4-content__middle-list
  > div:nth-child(3) {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 0.6s;
}

.feature4-content__middle-list > div:nth-child(4) {
  opacity: 0;
}

.key-features__content-mainbox[data="feature4"].active
  .feature4-content__middle-list
  > div:nth-child(4) {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 0.7s;
}

.feature4-content__middle-list > div:nth-child(5) {
  opacity: 0;
}

.key-features__content-mainbox[data="feature4"].active
  .feature4-content__middle-list
  > div:nth-child(5) {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 0.8s;
}

.feature4-content__middle-list > div:nth-child(6) {
  opacity: 0;
}

.key-features__content-mainbox[data="feature4"].active
  .feature4-content__middle-list
  > div:nth-child(6) {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 0.9s;
}

.feature4-content__middle-arrow {
  opacity: 0;
  min-width: 42px;
}

.key-features__content-mainbox[data="feature4"].active .feature4-content__middle-arrow {
  animation: slideInFromLeft 0.6s forwards;
  animation-delay: 1s;
}

.feature4-content__middle-right {
  opacity: 0;
}

.key-features__content-mainbox[data="feature4"].active .feature4-content__middle-right {
  animation: fadeInUp 0.6s forwards;
  animation-delay: 1.1s;
}

.feature4-content__bottom {
  opacity: 0;
}

.key-features__content-mainbox[data="feature4"].active .feature4-content__bottom {
  animation: fadeInUp 0.6s forwards;
  animation-delay: 1.2s;
}

.key-features__inner h2.display-mobile {
  display: none;
}

.key-features__content-mainbox-wrap.display-mobile {
  display: none;
}

.key-features__aside-nav.display-mobile {
  display: none;
}

@media (min-width: 769px) {
  .c-page-products .nav-menu-mb {
    display: none;
  }

  .c-page-products .box-header .box-menu {
    width: unset;
  }
}

@media (max-width: 1185px) {
  .key-features__inner {
    padding: 50px;
    gap: 20px;
  }
}

@media (max-width: 1024px) {
  .key-features__inner {
    flex-direction: column;
    align-items: center;
  }

  .key-features__aside {
    width: 100%;
  }

  .key-features__content {
    width: 100%;
    min-width: unset;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .perspective__content-box-item:nth-child(2),
  .perspective__content-box-item:nth-child(3) {
    max-width: unset;
  }
}

@media (max-width: 768px) {
  .c-page-products .box-header .box-menu {
    margin-top: 20px;
  }

  .product-banner h1 {
    font-size: 28px;
    line-height: 1.2;
  }

  .key-features .container {
    padding: 0;
  }

  .key-features__inner {
    padding: 45px 25px;
    overflow: hidden;
    border-radius: unset;
    gap: unset;
  }

  .key-features__inner h2 {
    font-size: 22px;
    line-height: 1.15;
    text-align: center;
    justify-self: center;
    margin-bottom: 21px;
  }

  .key-features__aside-nav {
    /* display: none; */
    margin-top: 15px;
    order: 2;
  }

  .key-features__aside-nav.display-mobile {
    display: flex;
    margin-top: unset;
    margin-bottom: 37px;
  }

  .key-features__aside-nav-item {
    font-size: 22px;
    line-height: 1.2;
    text-align: center;
  }

  .key-features__content-mainbox-upper-left,
  .key-features__content-mainbox-upper-right {
    font-size: 18px;
    line-height: 1.1;
    width: 50%;
  }

  .key-features__content-mainbox-upper-right {
    text-align: right;
  }

  .key-features__content-mainbox-item--1,
  .key-features__content-mainbox-item--3,
  .key-features__content-mainbox-item--4 {
    left: 0;
  }

  .higher-margins__subtitle {
    font-size: 16px;
    line-height: 1.2;
  }

  .higher-margins__title {
    font-size: 36px;
    line-height: 1.2;
  }

  .benefits__subtitle {
    font-size: 16px;
    line-height: 1.2;
  }

  .benefits__title {
    font-size: 24px;
    line-height: 1.2;
  }

  .benefits__content-item-title {
    font-size: 16px;
    line-height: 1.2;
  }

  .benefits__content-item-text {
    font-size: 14px;
    line-height: 1.2;
  }

  .perspective__header h2 {
    font-size: 18px;
    line-height: 1.2;
  }

  .perspective__subtitle {
    font-size: 16px;
    line-height: 1.2;
  }

  .perspective__vector-circle-line,
  .perspective__vector-line {
    display: none;
  }

  .perspective__vector-circle-line-mb {
    display: block;
  }

  .perspective__content {
    display: none;
  }

  .perspective__content.swiper {
    display: block;
  }

  .perspective__content-box-item h3 {
    font-size: 16px;
    line-height: 1.2;
  }

  .perspective__content-box-item-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .perspective__content-box-item p {
    margin-top: auto;
  }

  .perspective__content-box-item:nth-child(1) .perspective__btn {
    margin: 0 auto;
    margin-top: 22px;
  }

  .perspective__btn {
    font-size: 16px;
    line-height: 1.2;
    padding: 8px 20px;
  }

  .join-us__title {
    font-size: 24px;
    line-height: 1.2;
  }

  .join-us__text {
    font-size: 16px;
    line-height: 1.2;
  }

  .join-us__form-input-wrap label {
    font-size: 14px;
    line-height: 1.2;
    display: block;
  }

  .join-us__form-input-wrap input {
    font-size: 16px;
    line-height: 1.2;
  }

  .join-us__form-button {
    font-size: 16px;
    line-height: 1.2;
    padding: 8px 24px;
  }

  /* spacing */
  .product-banner {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .product-banner__content {
    margin-top: 20px;
  }

  .higher-margins {
    margin-top: 80px;
  }

  .higher-margins__video {
    margin-top: 60px;
  }

  .benefits {
    margin-top: 80px;
  }

  .benefits__content-item {
    min-width: unset;
    width: calc((100% - (24px * 1)) / 2);
  }

  .perspective__inner {
    flex-direction: column;
    padding: 15px;
  }

  .perspective__vector {
    position: relative;
    max-width: 100%;
    width: 100%;
  }

  .perspective__vector::after {
    content: unset;
  }

  .perspective__vector-circle {
    bottom: 35%;
    left: unset;
    transform: translatex(0);
  }

  .perspective__content {
    margin-top: -33px;
    width: 100%;
  }

  .perspective__content .swiper-slide {
    height: auto;
  }

  .perspective__content-box-item:first-child {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px 28px 24px 20px;
    width: 100%;
  }

  .key-features__content {
    gap: 0;
  }

  .key-features__content-mainbox-item--3,
  .key-features__content-mainbox-item--4 {
    transform: translateX(0);
  }

  .perspective {
    margin-top: 60px;
  }

  .join-us {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  .perspective__header {
    width: 100%;
    text-align: center;
  }

  .perspective__content-box-item {
    box-shadow: none;
  }

  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-pagination-custom,
  .swiper-pagination-fraction {
    position: relative;
    bottom: 0;
  }

  .perspective__content .swiper-button-next,
  .perspective__content .swiper-button-prev {
    top: 43%;
  }

  .perspective__vector {
    margin-left: 0;
    display: flex;
    justify-content: center;
  }

  .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 0.5;
  }

  .swiper-pagination-bullet-active {
    background-color: #29d8c1;
    opacity: 1;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    color: #29d8c1;
  }

  .key-features__inner h2.display-mobile {
    display: inline-block;
    text-align: center;
  }

  .key-features__inner h2.display-desktop {
    display: none;
  }

  .key-features__content-box-item.key-features__content-iconbox {
    order: 1;
    border: none;
    background: none;
    box-shadow: none;
    padding: 0 !important;
    margin-bottom: 9px;
  }

  .key-features__content-textbox.key-features__content-box-item {
    order: 3;
    text-align: left;
    border: none;
    background: none;
    box-shadow: none;
    padding: 0 10px !important;
    height: unset;
    max-width: unset;
  }

  .key-features__content-mainbox-wrap {
    order: 3;
  }

  .key-features__content-textbox[data="feature2"] p {
    max-width: unset;
  }

  .key-features__content-mainbox-wrap.display-desktop {
    display: none;
  }

  .key-features__content-mainbox-wrap.display-mobile {
    display: block;
  }

  .key-features__content-mainbox-wrap.display-mobile .swiper-slide {
    height: auto;
  }

  .swiper.key-features__content-mainbox-wrap {
    overflow: visible;
    max-width: 472px;
    height: unset;
    display: none;
  }

  .swiper.key-features__content-mainbox-wrap .swiper-button-prev,
  .swiper.key-features__content-mainbox-wrap .swiper-button-next {
    top: 47%;
  }

  .swiper.key-features__content-mainbox-wrap .swiper-button-prev {
    left: -25px;
  }

  .swiper.key-features__content-mainbox-wrap .swiper-button-next {
    right: -25px;
  }

  .key-features__content-iconbox {
    display: none;
  }

  .key-features__aside-nav-item {
    display: none;
  }

  .key-features__aside-nav-item.active {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInUp 0.6s forwards;
  }

  .key-features__aside-nav-item::before {
    content: unset;
  }

  .key-features__content-mainbox-item {
    width: fit-content;
    padding: 3px 12px;
    font-size: 16px;
  }

  .key-features__content-mainbox-item--1::before {
    background: url(../images/products/svg/item-1-vector-bf-mb.svg) no-repeat center;
    width: 63px;
    height: 38px;
    right: 77%;
  }

  .key-features__content-mainbox-item--1::after {
    width: 9px;
    height: 105px;
    background: url(../images/products/svg/item-1-vector-af-mb.svg) no-repeat center;
    right: 10%;
  }

  .key-features__content-mainbox-item--2 {
    margin-top: 43px;
    justify-self: left;
    left: -15px;
  }

  .key-features__content-mainbox-item--2::before {
    background: url(../images/products/svg/item-2-vector-bf-mb.svg) no-repeat center;
    width: 66px;
    height: 34px;
    top: 129%;
    left: 26%;
  }

  .key-features__content-mainbox-item--3 {
    margin-top: 42px;
    left: 20px;
  }

  .key-features__content-mainbox-item--3::before {
    background: url(../images/products/svg/item-3-vector-bf-mb.svg) no-repeat center;
    width: 9px;
    height: 29px;
    left: 25%;
    top: 132%;
  }

  .key-features__content-mainbox-item--4 {
    margin-top: 38px;
    left: -14px;
  }

  .key-features__content-mainbox-item--4::before {
    background: url(../images/products/svg/item-4-vector-bf-mb.svg) no-repeat center;
    width: 70px;
    height: 37px;
    right: 85%;
  }

  .key-features__content-mainbox-item--4::after {
    background: url(../images/products/svg/item-4-vector-af-mb.svg) no-repeat center;
    width: 103px;
    height: 37px;
    left: 36%;
  }

  .key-features__content-mainbox-bottom {
    margin-top: 42px;
    padding: 0 10px;
    justify-self: center;
    gap: 10px;
    position: relative;
    left: -16px;
  }

  .key-features__content-mainbox {
    background: unset;
    border: none;
    box-shadow: none;
    padding: 35px 11px 20px 22px !important;
  }

  .key-features__content-textbox p {
    text-align: center;
  }

  .key-features__content-mainbox-upper-left::before,
  .key-features__content-mainbox-upper-right::after {
    content: unset;
  }

  .key-features__content-mainbox-inner {
    margin-top: 45px;
    width: 100%;
  }
}

@media (max-width: 580px) {
  .key-features__content-textbox,
  .key-features__content-iconbox {
    max-width: 100%;
    flex: unset;
    width: 100%;
  }

  .key-features__content-box-item {
    padding: 38.5px 8px 31.5px 8px;
  }

  .key-features__content-mainbox-wrap .box-white,
  .key-features__content-mainbox-wrap .box-red,
  .key-features__content-mainbox-wrap .box-green {
    min-width: unset;
  }
}

.c-sec-fadeInUp {
  opacity: 0;
}

.c-sec-fadeInUp.active {
  animation: fadeInUp 0.6s forwards;
}