
.bg-company-ceo-photo {
    background-image: url('../images/company_ceo_photo.webp');
}
.bg-why-choose-first-it-company {
    background-image: url('../images/why_choose_first_it_company.svg');
}
.bg-telephone-illustration {
    background-image: url('../images/telephone_illustration.svg');
}


.index-promo {
    .index-promo-header {
      gap: 0 20px;
    }
  
    h2 {
      @media (max-width: 700px) {
        margin-bottom: 24px;
      }
    }
  
    .index-promo-left-bottom-right {
      max-width: 30rem;
  
      a {
        width: max-content;
      }
  
      @media (max-width: 1400px) {
        max-width: 370px;
      }
  
      @media (max-width: 700px) {
        max-width: unset;
  
        a {
          margin-top: 24px;
        }
      }
    }
  
    .index-promo-blocks-left::after,
    .index-promo-blocks-right::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("/static/images/promo-bg.webp");
      filter: blur(3px);
      opacity: 0.7;
      z-index: 1;
    }
  
    .index-promo-blocks-right-top {
      border: 1px solid #28253329;
  
      img {
        width: 6rem;
        flex-shrink: 0;
      }
  
      @media (max-width: 1300px) {
        max-width: 500px;
      }
    }
  
    .index-promo-blocks-right-bottom {
      img {
        width: 13rem;
        flex-shrink: 0;
      }
  
      svg {
        width: 2rem;
        height: 2rem;
      }
    }
  
    .index-promo-blocks-right {
      max-width: 30%;
  
      @media (max-width: 1300px) {
        max-width: unset;
  
        .relative {
          flex-direction: row;
        }
      }
  
      @media (max-width: 990px) {
        max-width: unset;
  
        .relative {
          flex-direction: column;
          gap: 12px;
  
          a {
            margin-left: auto;
          }
        }
      }
  
      @media (max-width: 700px) {
        .relative {
          a {
            margin-left: unset;
          }
        }
      }
  
      [aria-label="WhatsApp"],
      [aria-label="Telegram"] {
        background-color: #F6F5FA;
  
        svg {
          width: 2rem;
          height: 2rem;
        }
      }
    }
  
    .index-promo-blocks {
      @media (max-width: 1300px) {
        flex-direction: column;
      }
    }
  
  
    .index-promo-left-bottom {
      width: 100%;
  
      @media (max-width: 700px) {
        flex-direction: column-reverse;
      }
    }
  
    h2 {
      max-width: 42rem;
      line-height: 100%;
    }
  
    .index-promo-left-bottom-left {
      svg {
        width: 16rem;
      }
  
      @media (max-width: 1600px) {
        svg {
          width: 100%;
        }
      }
  
      @media (max-width: 1400px) {
        svg {
          width: 200px;
        }
      }
    }
  }
  
  @media (max-width: 700px) {
    .index-promo .index-promo-left-bottom-left svg {
      width: 126px;
    }
  
    .index-promo .index-promo-left-bottom-left {
      width: max-content;
      height: max-content;
      margin-top: 40px;
    }
  
    .index-promo-blocks-right-top p {
      font-size: 10px;
    }
  
    .index-promo-blocks-right-bottom img {
      width: 148px;
    }
  
    .index-promo-blocks-right-bottom {
      svg {
        width: 30px;
        height: 30px;
      }
    }
  
    .index-promo .index-promo-blocks-right [aria-label="WhatsApp"] svg,
    .index-promo .index-promo-blocks-right [aria-label="Telegram"] svg {
      width: 24px;
      height: 24px;
    }
  
    .index-promo .index-promo-blocks-right-top img {
      width: 91px;
    }
  }
  
  .dark {
    .index-promo-blocks-right {
  
      [aria-label="WhatsApp"],
      [aria-label="Telegram"] {
        background-color: #232324;
  
        svg {
          color: #29A71A;
        }
      }
  
      [aria-label="Telegram"] {
        svg {
          color: #2AABEE;
        }
      }
    }
  
    .index-promo-blocks-left::after,
    .index-promo-blocks-right::after {
      background-image: url("/static/images/promo-bg-dark.webp");
    }
  }