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

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

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

.main__inner {}

.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: 80px;
   max-width: 600px;
}

.main-cards__wrap {
   display: flex;
   flex-direction: column;
   gap: 24px;
}

.main__card {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(24.5px);
   border-radius: 10px;
   display: flex;
   padding: 44px 100px 44px 0;
   overflow: hidden;
   align-items: center;
   gap: 80px;
}

.main-card__img {
   margin-left: -32px;
   text-shadow: 0 0 0.5em #87F, 0 0 0.5em #87F, 0 0 0.5em #87F;
   transition: .5s;

}

.main__card:hover .main-card__img {
   transform: scale(1.2);
}

.main-card__contetn {}

.main-card__title {
   font-weight: 800;
   font-size: 48px;
   line-height: 56px;
   margin-bottom: 8px;
}

.main-card__desc {
   font-weight: 400;
   font-size: 18px;
   line-height: 34px;
   margin-bottom: 24px;
}

.services-card__link {
   font-weight: 600;
   font-size: 16px;
   line-height: 24px;
   display: flex;
   gap: 6px;
}

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

   .services-main-worm-t-r {
      top: -108px;
      right: -130px;
      width: 450px;
   }

   .main__title,
   .main__subtitle {
      text-align: center;
      margin: 0 auto;
   }

   .main__title {
      margin-bottom: 18px;
   }

   .main__subtitle {
      margin-bottom: 40px;
   }

   .main-card__contetn {
      text-align: center;

   }

   .main__card {
      padding: 22px 64px 22px 0;
      gap: 0;
   }

   .services-card__link {
      justify-content: center;
   }

   .main-card__img {
      margin-left: 0;
   }
}

@media screen and (max-width: 850px) {
   .main__card {
      flex-direction: column;
      padding: 0 38px 40px 38px;
   }

   .main-card__img {
      margin-top: -80px;
   }

}

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

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

   .services-main-worm-t-r {
      top: -78px;
      right: -50px;
      width: 200px;
   }


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

   .main-card__title {
      font-size: 40px;
      line-height: 56px;
      margin-bottom: 24px;
   }

   .main-card__desc {
      font-size: 18px;
      line-height: 26px;
   }

}