@import './style.css';

.main {
   padding: 212px 0 180px;
   background: url('../images/main-bg-img.png');
   background-position: 50% 50%;
   background-size: cover;
   color: #FFFFFF;
}

.main__inner {
   display: flex;
   flex-direction: column;
   text-align: center;
}

.main__title {}

.title {}

.main__content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   justify-content: center;
}

.main-content__text {
   max-width: 837px;
   display: flex;
   flex-direction: column;
   gap: 40px;
   margin-bottom: 32px;
}

.main-content__desc {}

.main__btn {
   color: #894784;
   width: 180px;
   margin: 0 auto;
}

.main-img__wrapper {}

.main__img {
   max-width: 618px;
   margin: 0 auto;
   margin-bottom: 20px;
}

/* ----------------------------------------------------------------------------------- */

.aboutUs {
   padding: 65px 0 0;
}

.aboutUs__inner {
   display: flex;
   gap: 52px;
}

.aboutUs__text {}

.aboutUs__title {
   margin-bottom: 52px;
}

.aboutUs__desc {
   margin-bottom: 24px;
   max-width: 611px;
}

.aboutUs__desc:last-child {
   margin-bottom: 0;
}

.aboutUs__image-wrap {
   width: 634px;
}

.aboutUs__image {
   width: 100%;
}

/* ----------------------------------------------------------------------------------- */

.services {
   padding: 60px 0;
}

.services__inner {
   display: flex;
   flex-direction: column;
   text-align: center;
   align-items: center;
}

.services__title {
   margin-bottom: 40px;
}

.services-card__wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 8px;
}

.services__card {
   padding: 44px 40px;
   text-align: center;
   max-width: 656px;
   height: unset;
   background: #F6F6F6;
   border-radius: 16px;

}

.services-card__img {
   margin-bottom: 44px;
}

.services-card__title {
   margin-bottom: 16px;
}

.services-card__desc {}

/* ----------------------------------------------------------------------------------- */

.products_and_advantages {
   padding: 100px 0;
   background: linear-gradient(105.11deg, rgba(123, 195, 78, 0.72) 0%, rgba(241, 235, 40, 0.72) 100%), url('../images/products-bg-img.png');
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: cover;
   backdrop-filter: blur(12px);
   border-radius: 52px;
   display: flex;
   flex-direction: column;
   gap: 82px;
   color: #FFFFFF;
   overflow: hidden;
}

/* ----------------------------------------------------------------------------------- */

.products {}

.container {}

.products__inner {
   display: flex;
   flex-direction: column;
   text-align: center;
   align-items: center;
   max-width: 730px;
}

.products__title {
   margin-bottom: 16px;
}

.products__desc {
   max-width: 738px;
   margin: 0 auto;
   margin-bottom: 48px;
}

.products-card__wrapper {
   max-width: 730px;
   margin: 0 auto;
}

.products__card {
   max-width: 730px;
   height: 354px !important;
   border-radius: 11px;
   margin-bottom: 20px;
}

.products__card-1 {
   background: url('../images/card-img-1.png');
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: cover;
}

.products__card-2 {
   background: url('../images/card-img-2.png');
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: cover;
}

.products__card-3 {
   background: url('../images/card-img-3.png');
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: cover;
}

/* ----------------------------------------------------------------------------------- */

.advantages {}

.advantages__inner {
   text-align: center;
}

.products__title {}

.products__desc {}

.advantages-card__wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-gap: 8px;
}

.advantages__card {
   display: flex;
   flex-direction: column;
   align-items: center;
   max-width: 420px;
   height: 198px;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(16px);
   border-radius: 16px;
   padding: 32px 16px;
}

.advantages-card__img {
   margin-bottom: 36px;
}

.advantages-card__title {
   font-weight: 700;
   font-size: 18px;
   line-height: 24px;
}

/* ----------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
   .aboutUs__inner {
      flex-direction: column;
      align-items: center;
      text-align: center;
   }
}

@media (max-width: 1024px) {

   .advantages-card__wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
   }
}

@media (max-width: 768px) {
   .services-card__wrapper {
      grid-template-columns: 1fr;
   }

   .main__img {
      max-width: 100%;
   }

   .products__card {
      height: 266px !important;
   }

   .aboutUs {
      padding: 32px 0 32px;
   }

   .services {
      padding: 32px 0 64px;
   }

   .products_and_advantages {
      padding: 48px 0;
      border-radius: 16px;
   }

   .main-content__text {
      gap: 32px;
   }

   .products__desc {
      margin-bottom: 24px;
   }

   .aboutUs__image-wrap {
      width: 100%;
   }

   .aboutUs__title {
      margin-bottom: 24px;
   }

   .advantages-card__title {
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
   }
}

@media (max-width: 550px) {
   .advantages-card__wrapper {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: 8px;
   }

   .products__card {
      height: 168px !important;
   }
}

@media (max-width: 425px) {}