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

.main {
   padding: 140px 0 0;
}

.main__inner {}

.main__title {
   max-width: 1210px;
}

.main__content {
   display: flex;
   justify-content: space-between;
   gap: 40px;
}

.main-content__card {
   background: radial-gradient(117.64% 129.32% at 50% 0%, rgba(0, 0, 0, 0) 26.7%, #6633EE 62.36%, #FFFFFF 200%);
   border-radius: 32px;
   width: 648px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.main-content-card__img {}

.main-content__text {
   max-width: 648px;
}

.main-content__title {
   margin-bottom: 28px;
   font-weight: 500;
   font-size: 32px;
   line-height: 38px;
}

.main-content__desc {
   margin-bottom: 32px;
}

.main-content__btn {}

.main__cards {
   padding: 16px 0;
   background: rgba(39, 41, 55, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 16px;
   display: flex;
   flex-wrap: wrap;
   margin-top: 40px;
}

.main__card {
   padding: 24px 44px;
   max-width: 330px;
}

.main-card-number {
   font-weight: 500;
   font-size: 16px;
   line-height: 24px;
   text-transform: uppercase;
   color: #8D33FF;
   margin-bottom: 24px;
}

.main-card__text {
   font-weight: 600;
   font-size: 16px;
   line-height: 24px;
}

.main__heading {
   margin-top: 64px;
   font-weight: 500;
   font-size: 32px;
   line-height: 38px;
   max-width: 588px;
}

@media (max-width: 1024px) {
   .main__content {
      flex-direction: column;
   }

   .main-content__card {
      width: 100%;
   }

   .main-content__text {
      max-width: 100%;
   }
}

@media (max-width: 864px) {}

@media (max-width: 768px) {
   .main-content__card {
      border-radius: 16px;
   }

   .main__heading {
      font-weight: 600;
      font-size: 25px;
      line-height: 30px;
   }

   .main__cards {
      justify-content: space-between;
   }

   .main__card {
      max-width: 100%;
   }

   .main-content-card__img {
      width: 235px;
   }

   .main-content__title {
      font-weight: 500;
      font-size: 20px;
      line-height: 24px;
   }
}

@media (max-width: 550px) {}

@media (max-width: 425px) {}