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

.main {
   margin-top: -120px;
   padding: 80px 0 48px;
   position: relative;
}

.main-worm-l-b {
   bottom: -240px;
   left: -208px;
}


.main-worm-t-r {
   top: -10px;
   right: -208px;
}

.main__inner {
   margin-top: 120px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.main__text {
   font-weight: 800;
   font-size: 86px;
   line-height: 86px;
   margin-bottom: 20px;
   text-align: center;
   overflow: hidden;
}

.main__title {}

.main__btn {
   padding: 16px 30px 16px 38px;
   display: flex;
   gap: 12px;
   background: rgba(0, 0, 0, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.06);
   backdrop-filter: blur(13px);
   border-radius: 16px;
   position: relative;
   align-items: center;
   font-weight: 600;
   font-size: 14px;
   line-height: 22px;
   text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   margin-bottom: 24px;
   overflow: hidden;
   /* перксмотреть */
}

.main__inner .main__btn .loop {
   margin-bottom: -7px;
}

.btn-blur-b-r,
.btn-blur-l-b,
.btn-blur-l-t,
.btn-blur-t-r {
   position: absolute;
   z-index: -1;
   filter: blur(16px);
}





.main__btn::before {
   position: absolute;
   top: 1px;
   right: 1px;
   bottom: 1px;
   left: 1px;
   background: rgba(0, 0, 0, 0.2);
   /* overflow: hidden; */
}

.main__desc {
   max-width: 677px;
   margin: 0 auto;
   text-align: center;
   font-weight: 600;
   font-size: 24px;
   line-height: 32px;
}





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

.services {
   padding: 100px 0 50px;
   position: relative;
   overflow: hidden;
}

.main-services-bg-r-t {
   right: 86px;
   top: calc(50% - (760px / 2));
}

.services__inner {
   display: flex;
   gap: 60px;

}

.services__content {
   display: flex;
   flex-direction: column;
   gap: 16px;

}

.services__title {
   font-weight: 800;
   font-size: 48px;
   line-height: 56px;
   width: 471px;
}

.services__subtitle {
   font-weight: 600;
   font-size: 24px;
   line-height: 32px;
   width: 471px;
}

.services__desc {
   margin-bottom: 40px;
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
   width: 471px;
}

.services__btn {
   width: 174px;
   padding: 16px 33px;
}

.services__btn1 {
   display: none;
   margin: 0 auto;
}

.btn-blur-b-r {}

.btn-blur-l-b {}

.btn-blur-l-t {}

.btn-blur-t-r {}

.services__cards {
   display: flex;
   margin-right: -270px;
}

.services__card {
   width: 466px;
   height: 472px;
   padding: 48px 56px;
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.04);
   backdrop-filter: blur(24.5px);

}

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

.card2 {
   background: linear-gradient(129.57deg, rgba(46, 132, 207, 0.8) 3.26%, rgba(1, 2, 33, 0) 91.29%);
   transform: translate(-280px);
   transition: all 2s;
}

.card3 {
   background: linear-gradient(129.57deg, rgba(74, 220, 205, 0.8) 3.26%, rgba(1, 2, 33, 0) 91.29%);
   transform: translate(-560px);
   transition: all 2s;
}

.card4 {
   background: linear-gradient(129.57deg, rgba(117, 189, 230, 0.8) 3.26%, rgba(1, 2, 33, 0) 91.29%);
   transform: translate(-840px);
   transition: all 2s;
}

.services-card__icon {}

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

.services-card__desc {
   margin-bottom: 44px;
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
}

.services-card__link {
   font-weight: 400;
   font-size: 12px;
   line-height: 24px;
   display: flex;
   gap: 8px;
}



.card-link-arrow {}




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




.aboutUs {
   padding: 100px 0 50px;
   position: relative;
   overflow: hidden;
}

.aboutUs__inner {}

.aboutUs__text {
   overflow: hidden;
}

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

.aboutUs__subtitle {
   margin-bottom: 80px;
   font-weight: 600;
   font-size: 24px;
   line-height: 32px;
   max-width: 677px;
}

.aboutUs-cards__wrap {
   display: flex;
   gap: 88px;
   margin-bottom: 72px;
}

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

.aboutUs__card1 {}

.aboutUs__card2 {}

.aboutUs-card__img {
   margin-bottom: 22px;
}

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

.aboutUs-card__desc {
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
}

.aboutUs__btn {
   min-width: 144px;
   margin: 0 auto;
}




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


.form {
   position: relative;
   padding: 100px 0 50px;
}

.main-form-worm-l-b {
   left: -160px;
   bottom: -260px;
}

.main-form-worm-t-r {
   right: -160px;
   top: -100px;
}

.container {}

.form__inner {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.form__text {
   max-width: 663px;
   text-align: center;
}

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

.form__subtitle {
   font-weight: 600;
   font-size: 24px;
   line-height: 32px;
   margin-bottom: 40px;
}




@media screen and (max-width: 1350px) {
   .card2 {
      transform: translate(-360px);
   }

   .card3 {
      transform: translate(-720px);
   }

   .card4 {
      transform: translate(-1100px);
   }
}

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

   .main-worm-l-b,
   .main-form-worm-l-b {
      bottom: -240px;
      left: -138px;
      width: 400px;
   }

   .main-worm-t-r,
   .main-form-worm-t-r {
      top: 40;
      right: -138px;
      width: 400px;
   }

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

   .services__inner {
      flex-direction: column;
      gap: 32px;
   }

   .services__content {
      text-align: center;
      align-items: center;
   }

   .services__desc {
      margin-bottom: 12px;
   }

   .services__desc .cut {
      display: none;
   }

   .services__cards {
      display: flex;
      margin: 0 auto;
   }

   .services__btn {
      display: none;
   }

   .services__btn1 {
      display: block;
   }

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

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

   .aboutUs__title,
   .aboutUs__subtitle {
      max-width: 600px;
      text-align: center;
      margin: 0 auto;
   }

   .aboutUs__title {
      margin-bottom: 16px;
   }

   .aboutUs__subtitle {
      margin-bottom: 32px;
   }

   .aboutUs-cards__wrap {
      gap: 23px;
      margin-bottom: 32px;
      flex-wrap: wrap;
      text-align: center;
   }

   .aboutUs__card {
      max-width: 596px;
      height: fit-content;
      padding: 32px;
      margin: 0 auto;
      padding: 32px 48px;
   }


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


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




}

@media screen and (max-width: 768px) {
   .main__text {
      font-size: 60px;
      line-height: 66px;
      margin-bottom: 20px;
      text-align: center;
   }

   .main__desc {
      max-width: 450px;
      font-weight: 600;
      font-size: 21px;
      line-height: 28px;
   }

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

   .services__cards {
      display: flex;
      margin: 0 auto;
      flex-wrap: wrap;
   }

   .services__card {
      max-width: 400px;
      height: 404px;
      text-align: center;
      padding: 32px 48px;
      margin: 0 auto;

   }

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

   .card2,
   .card3,
   .card4 {
      transform: none;
      transition: none;
      margin-top: -10px;
   }

   .services-card__icon {
      width: 50px;
      margin-bottom: 22px;
   }

   .card2 .services-card__icon {
      width: 78px;
   }

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

   .services-card__title {
      margin-bottom: 12px;
   }

   .services-card__desc {
      margin-bottom: 22px;
   }

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

   .aboutUs__title {
      font-size: 39px;
      line-height: 56px;
   }

   .aboutUs__subtitle {
      font-size: 21px;
      line-height: 28px;
   }

   .aboutUs-card__img {
      width: 50px;
   }

   .aboutUs-card__title {
      font-size: 24px;
      line-height: 40px;
   }

   .aboutUs-card__desc {
      font-size: 16px;
      line-height: 24px;
   }

}

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

   .main,
   .services,
   .aboutUs,
   .form {
      padding: 24px 0 42px;
   }

   .main-worm-l-b,
   .main-form-worm-l-b {
      bottom: -180px;
      left: -88px;
      width: 300px;
   }

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

   .main__text {
      font-size: 50px;
      line-height: 66px;
   }

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

   /* -------------------------------------- */
   .services__content {}

   .services__subtitle,
   .services__desc {
      max-width: 380px;
      margin: 0 auto;
   }

   .services__card {
      width: 326px;
   }

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

   .form__title {
      font-size: 39px;
      line-height: 56px;
   }

   .form__subtitle {
      font-size: 21px;
      max-width: 400px;
   }

}



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

   .main-worm-l-b,
   .main-form-worm-l-b {
      bottom: -110px;
      left: -48px;
      width: 200px;
   }

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

   .aboutUs__title {
      font-size: 30px;
      line-height: 56px;
   }

   .form__title {
      font-size: 30px;
      line-height: 56px;
   }
}

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

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

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

   .services__inner {
      gap: 24px;
   }

   .services__content {
      gap: 0;
   }

   .services__title {
      font-size: 30px;
      line-height: 56px;
      margin-bottom: 12px;
      max-width: 274px;
   }

   .services__subtitle,
   .services__desc {
      width: 100%;
      margin: 0 auto;
      max-width: 274px;
   }

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

   .services__desc {
      font-size: 16px;
      line-height: 24px;
   }

   .aboutUs__title,
   .aboutUs__subtitle {
      max-width: 274px;
   }

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

@media screen and (max-width: 375px) {
   .services__card {
      width: 100%;
   }

   .services-card__icon {
      margin-bottom: 0;
   }

   .services-card__desc {
      margin-bottom: 12px;
   }
}

@media screen and (max-width: 350px) {
   .services__card {
      width: 280px;
   }
}