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

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

.main-worm-t-r {
   top: -100px;
   right: -200px;
   display: none;
}

.about-main-bg-b-c {
   bottom: -700px;
   left: calc(50% - (960px / 2));
}

.container {}

.main__inner {}

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

.main-text__wrap {
   display: flex;
   gap: 88px;
}

.main__text1,
.main__text2 {
   display: flex;
   flex-direction: column;
}

.main__text1 {
   gap: 22px;
   max-width: 600px;
}

.main__text2 {
   gap: 16px;
}

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

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




/* ------------------------------------------------------ */




.services {
   padding: 100px 0 48px;
   position: relative;
}

.about-services-worm-l-b {
   left: -100px;
   bottom: 0;
}

.about-services-worm-t-r {
   top: -160px;
   right: -160px;
}

.services__inner {}

.services__subtitle {
   font-weight: 600;
   font-size: 32px;
   line-height: 46px;
   max-width: 779px;
   margin-bottom: 80px;
}

.services-cards__wrap {
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(13px);
   border-radius: 16px;
   display: flex;
   gap: 48px;
   flex-wrap: wrap;
   padding: 48px;
}

.services__card {
   max-width: 362px;
   height: 396px;
   padding: 26px 23px;
   background: rgba(255, 255, 255, 0.06);
   backdrop-filter: blur(13px);
   border-radius: 12px;
   position: relative;
}

.last-cards__wrap {
   display: flex;
   gap: 48px;
   width: 100%;
   justify-content: end;
   flex-wrap: wrap;
}

.card1:hover {
   background: linear-gradient(129.57deg, #513172 3.26%, rgba(21, 10, 72, 0) 91.29%), rgba(255, 255, 255, 0.06);
}

.card2:hover {
   background: linear-gradient(129.57deg, rgba(46, 132, 207, 0.8) 3.26%, rgba(1, 2, 33, 0) 91.29%), rgba(255, 255, 255, 0.06);
}

.card3:hover {
   background: linear-gradient(129.57deg, rgba(74, 220, 205, 0.8) 3.26%, rgba(1, 2, 33, 0) 91.29%);
}

.card4:hover {
   background: linear-gradient(129.57deg, rgba(117, 189, 230, 0.8) 3.26%, rgba(1, 2, 33, 0) 91.29%), rgba(255, 255, 255, 0.06);
}

.card5:hover {
   background: linear-gradient(129.57deg, rgba(4, 20, 78, 0.8) 3.26%, rgba(1, 2, 33, 0) 91.29%), rgba(255, 255, 255, 0.06);
}

.services-card__number {
   font-weight: 700;
   font-size: 80px;
   line-height: 97px;
   margin-bottom: 13px;
}

.services-card__title {
   font-weight: 600;
   font-size: 32px;
   line-height: 40px;
   margin-bottom: 16px;
}

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

.services-card__link {
   font-weight: 400;
   font-size: 12px;
   line-height: 24px;
   display: flex;
   gap: 12px;
   position: absolute;
   left: 23px;
   bottom: 26px;
   opacity: 0.8;
}

.text-underline {}

.card-link-arrow {}

/* ---------------------------------------------- */

@media screen and (max-width: 1350px) {
   .services-cards__wrap {
      justify-content: center;
   }

   .about-services-worm-l-b {
      left: -60px;
      bottom: -100px;
      width: 400px;
   }

   .about-services-worm-t-r {
      top: -80px;
      right: -80px;
      width: 400px;
   }
}

@media screen and (max-width: 1150px) {
   .main-text__wrap {
      flex-direction: column;
      gap: 22px;
      max-width: 650px;
   }

   .main-worm-t-r {
      top: -100px;
      right: -200px;
      display: block;
   }
}

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

   .main-worm-t-r {
      top: -70px;
      right: -150px;
      width: 400px;
   }

   .main__inner {
      text-align: center;
   }

   .main-text__wrap {
      margin: 0 auto;
   }

   .main__title {
      margin-bottom: 22px;
   }

   /* ------------------------------------- */

   .services {
      padding: 64px 0 32px;
   }

   .services__subtitle {
      text-align: center;
      margin: 0 auto 24px;
   }

   .services-cards__wrap {
      padding: 32px;
      gap: 32px;
      justify-content: center;
   }

   .services__card {
      max-width: 450px;
      height: 350px;
   }


   .about-services-worm-l-b {
      left: -60px;
      bottom: -100px;
      width: 350px;
   }

   .about-services-worm-t-r {
      top: -60px;
      right: -80px;
      width: 350px;
   }

   .last-cards__wrap {
      gap: 32px;
      justify-content: center;
   }
}

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

   .main__title {
      margin-bottom: 18px;
   }

   .main__text1,
   .main__text2,
   .main-text__wrap {
      gap: 10px;
   }



   .main-worm-t-r {
      top: -40px;
      right: -80px;
      width: 300px;
   }

   /* ------------------------------------ */

   .services__subtitle {
      font-size: 25px;
      line-height: 35px;
   }

   .services-cards__wrap {
      gap: 23px;
   }

   .services__card {
      height: 396px;
   }

   .about-services-worm-l-b {
      left: -60px;
      bottom: -140px;
      width: 250px;
   }

   .about-services-worm-t-r {
      top: -30px;
      right: -80px;
      width: 250px;
   }

   .last-cards__wrap {
      gap: 23px;
   }
}

@media screen and (max-width: 650px) {
   .main__title {
      font-size: 40px;
      line-height: 56px;
   }

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

   .main__text1,
   .main__text2 {
      font-size: 18px;
      line-height: 26px;
   }

   .services__subtitle {
      font-size: 21px;
      line-height: 25px;
   }
}

@media screen and (max-width: 500px) {
   .services-cards__wrap {
      gap: 8px;
      padding: 8px;
   }

   .services__subtitle {
      max-width: 274px;
   }

   .main-worm-t-r {
      top: -60px;
      right: -80px;
      width: 200px;
   }

   .services__card {
      padding: 21px 18px;
   }

   .services-card__number {
      font-size: 80px;
      line-height: 97px;
   }

   .services__subtitle {
      font-size: 18px;
      line-height: 25px;
   }

   .about-services-worm-l-b {
      left: -60px;
      bottom: -100px;
      width: 200px;
   }

   .about-services-worm-t-r {
      top: 30px;
      right: -80px;
      width: 200px;
   }

   .last-cards__wrap {
      gap: 8px;
   }

   .main-text__wrap {
      max-width: 274px;
   }
}

@media screen and (max-width: 355px) {
   .services__card {
      height: 420px;
   }
}