@import url('./style.css');

.main {
   padding: 80px 0 100px;
   position: relative;
   overflow: hidden;
}

.services-section-bg-worm {
   bottom: 100px;
   left: -70px;
}

.main__inner {
   min-height: 1112px;
   position: relative;
}

.main__content {
   margin-bottom: 24px;
   max-width: 598px;
}

.main__text {
   max-width: 598px;
}

.main__title {
   font-weight: 800;
   font-size: 48px;
   line-height: 56px;
   margin-bottom: 34px;
}

.main__subtitle {
   font-weight: 600;
   font-size: 32px;
   line-height: 46px;
   margin-bottom: 22px;
}

.main__desc {
   font-weight: 400;
   font-size: 18px;
   line-height: 34px;
   margin-bottom: 8px;
}

.main-img__wrap {}

.main__img {
   top: 0;
   right: 0;
}

.main-card__wrap {
   display: flex;
   flex-direction: column;
   gap: 16px;
   align-items: end;
}

.main__card {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(24.5px);
   padding: 32px;
   border-radius: 10px;
   width: 596px;
}

.main-card__number {
   margin-bottom: 12px;
   font-weight: 600;
   font-size: 48px;
   line-height: 40px;
}

.main-card__title {
   font-weight: 400;
   font-size: 18px;
   line-height: 22px;
   opacity: 0.8;
   margin-bottom: 8px;
}

.main-card__desc {
   font-weight: 400;
   font-size: 16px;
   line-height: 22px;
   opacity: 0.8;
}

.goModal {
   padding: 90px 0 50px;
}

.goModal__inner {}

.goModal__title {
   margin-bottom: 8px;
   font-weight: 800;
   font-size: 32px;
   line-height: 46px;
}

.goModal__desc {
   font-weight: 400;
   font-size: 18px;
   line-height: 26px;
}

.goModal__title,
.goModal__desc {
   max-width: 667px;
}

.goModal__btn {}

.btn-with-bg-img {}

.btn-blur-b-r {}

.btn-blur-l-b {}

.btn-blur-l-t {}

.btn-blur-t-r {}

.footer {
   overflow: hidden;
}


.sections-icon-dance {
   animation: icon-dance 2s infinite linear;
}

@keyframes icon-dance {
   0% {
      transform: rotate(0deg);
   }

   25% {
      transform: rotate(-5deg);
   }

   50% {
      transform: rotate(0deg);
   }

   75% {
      transform: rotate(5deg);
   }

   100% {
      transform: rotate(0deg);
   }
}

/* .sections-icon-swim {
   animation: icon-swim 3s infinite linear;
}


@keyframes icon-swim {
   0% {
      transform: translateY(0);
   }

   25% {
      transform: translateY(30px);
   }

   50% {
      transform: translateY(0);
   }

   75% {
      transform: translateY(-30px);
   }

   100% {
      transform: translateY(0);
   }

} */


@media screen and (max-width: 1250px) {
   .main__img {
      width: 450px;
      right: -150px;
      top: -70px;
   }
}

@media screen and (max-width: 1024px) {
   .main {
      padding: 64px 0 32px;
   }

   .services-section-bg-worm {
      bottom: 150px;
      left: -100px;
      width: 450px;
   }

   .main__title {
      font-size: 44px;
      line-height: 56px;
      margin-bottom: 34px;
   }

   .main__subtitle {
      font-size: 25px;
      line-height: 46px;
      margin-bottom: 22px;
   }

   .main__desc {
      line-height: 30px;
   }
}

@media screen and (max-width: 768px) {
   .main {
      overflow: visible;
   }
   .main__img {
      width: 350px;
      right: -100px;
      top: -80px;
   }

   .main__inner {
      min-height: fit-content;
   }

   .main-services-bg-b-c {
      display: none;
   }

   .services-section-bg-worm {
      display: none;
   }

   .main__content {
      text-align: center;
      margin: 0 auto;
   }

   .main__card {
      width: 100%;
   }

   .main__title {
      font-size: 44px;
      line-height: 56px;
      margin-bottom: 18px;
   }

   .main__subtitle {
      font-size: 25px;
      line-height: 46px;
      margin-bottom: 10px;
   }

   .main__desc {
      line-height: 30px;
   }
}

@media screen and (max-width: 500px) {
   .main {
      padding: 24px 0 42px;
   }

   .main__img {
      width: 270px;
      right: -120px;
      top: -90px;
   }

   .main__content {
      margin-bottom: 14px;
   }

   .main__title {
      font-size: 40px;
      line-height: 56px;
      margin-bottom: 18px;
   }

   .main__subtitle {
      font-size: 18px;
      line-height: 25px;
      margin-bottom: 10px;
   }

   .main__desc {
      line-height: 30px;
      margin-bottom: 10px;
      max-width: 264px;
      margin: 0 auto 10px;
   }

   .main__card {
      width: 100%;
   }

   .goModal__desc {
      max-width: 274px;
   }

}

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