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

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

.main__inner {
   margin-top: 120px;
   display: flex;
   justify-content: space-between;
}

.main__text {
   max-width: 465px;
   margin-right: 20px;
}

.main__title {
   margin-bottom: 8px;
}

.main__text1 {
   max-width: 575px;
}

.main__subdesc {
   margin-bottom: 14px;
}

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

.howWeCan {
   padding: 50px 0 0;
}

.howWeCan__inner {}

.howWeCan__title {
   margin-bottom: 24px;
}

.howWeCan__desc {
   margin-bottom: 30px;
   max-width: 465px;
}

.howWeCan-cards__wrapper {}

.howWeCan__card {
   border-bottom: 1px solid #FFFFFF32;
}

.howWeCan__card:first-child {
   border-top: 1px solid #FFFFFF32;
}

.howWeCan-card__content {
   display: flex;
   justify-content: space-between;
   height: 212px;
   align-items: center;
   padding: 0 120px;
   position: relative;
   margin: 0 auto;
   max-width: 1440px;
   transition: 0.4s all;
}

.howWeCan-card-mobile__img {
   position: absolute;
   width: 450px;
   top: calc(50% - (550px / 2));
   left: calc(50% - (450px / 2));
   opacity: 0;
}

.howWeCan-card-loop__img {
   position: absolute;
   width: 450px;
   top: calc(50% - (370px / 2));
   left: calc(50% - (450px / 2));
   opacity: 0;
}

.howWeCan-card-video__img {
   position: absolute;
   width: 450px;
   top: calc(50% - (360px / 2));
   left: calc(50% - (450px / 2));
   opacity: 0;
}

.howWeCan-card__content:hover {
   background: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   border: 1px solid #FFFFFF32;
}

.howWeCan-card__content:hover img {
   opacity: 1;
   transition: 0.6s;
}

.howWeCan-card__title {
   font-weight: 500;
   font-size: 35px;
   line-height: 45px;
   max-width: 387px;
}

.howWeCan-card__desc {
   font-weight: 400;
   font-size: 18px;
   line-height: 26px;
   max-width: 387px;
}

@media (max-width: 1350px) {
   .howWeCan-card__content {
      height: 280px;
      flex-direction: column;
      align-items: start;
      padding: 40px 120px;
   }

   .howWeCan-card-mobile__img {
      position: absolute;
      width: 350px;
      top: calc(50% - (420px / 2));
      left: calc(50% + 50px);
      opacity: 0;
   }
   
   .howWeCan-card-loop__img {
      position: absolute;
      width: 350px;
      top: calc(50% - (290px / 2));
      left: calc(50% + 50px);
      opacity: 0;
   }
   
   .howWeCan-card-video__img {
      position: absolute;
      width: 350px;
      top: calc(50% - (290px / 2));
      left: calc(50% + 50px);
      opacity: 0;
   }
   
}

@media (max-width: 900px) {
   .main {
      padding: 40px 0;
   }

   .main__inner {
      flex-direction: column;
      margin-top: 80px;
   }

   .main__text {
      max-width: 465px;
      margin: 0 0 16px 0;
   }

   .howWeCan-card__content {
      padding: 40px 120px;
   }
}

@media (max-width: 768px) {
   .howWeCan-card__content {
      height: fit-content;
      flex-direction: column;
      align-items: start;
      padding: 40px 50px;
   }

   .howWeCan-card-mobile__img {
      position: absolute;
      width: 200px;
      top: -75px;
      left: auto;
      right: -90px;
      opacity: 1;
   }
   
   .howWeCan-card-loop__img {
      position: absolute;
      width: 200px;
      top: -35px;
      left: auto;
      right: -80px;
      opacity: 1;
   }
   
   .howWeCan-card-video__img {
      position: absolute;
      width: 200px;
      top: -30px;
      left: auto;
      right: -80px;
      opacity: 1;
   }

   .howWeCan-card__title {
      font-size: 28px;
      line-height: 36px;
      margin-bottom: 24px;
   }
}