:root {
  --accentColor: #14a0ff;
  --accentColorLight: #73c6ff;
}

html[lang="ar"] li {
  direction: rtl !important;
  text-align: right;
}
section{
  width: 100vw;
  padding: 0 200px !important;
}
.first-section-promo {
  padding-right: 50px;
  padding-left: 50px;
}

.first-section-content-container-promo {
  display: flex;
  flex-direction: row-reverse;
  margin: auto;
  justify-content: space-between;
  & > img {
    max-width: 500px;
    margin-top: 25px;
  }
}

.first-section-text-container-promo {
  margin-top: 88px;
  max-width: 775px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  & > ol {
    padding-right: 25px;
  }
}

.promocode-copy-img {
  cursor: pointer;
}

.section-button-promo {
  margin-top: 35px;
  max-width: 615px;
  height: 83px;
}

html[lang="ar"] .promo-content-container {
  padding-top: 10px;
  margin: auto;
  width: 100%;
  direction: rtl;

  & > p {
    margin-bottom: 0;
  }

  & > ul {
    padding-bottom: 27px;
  }
}

#second-section-promo,
#third-section-promo,
#fourth-section-promo,
#fifth-section-promo,
#sixth-section-promo,
#twentyFirst-section-promo {
  margin-top: 0;
}

.third-section-img-promocode {
  object-fit: cover;
  width: 100%;
  margin-top: 25px;
}

.fourth-section-content-container-promo {
  border-radius: 28px;
  background-color: #2b496b;
  padding-bottom: 0;
}

.fourth-section-content-wrapper-promo {
  padding: 22px 35px 0;
}

.section-subtitle-av {
  font-size: 27px;
  margin-top: 27px;
}

html[lang="ar"] .fifth-section-grid-item-promo > h4,
html[lang="ar"] .fifth-section-grid-item-promo > p,
html[lang="ar"] .fifth-section-grid-item-promo > ul,
html[lang="ar"] .fifth-section-grid-item-promo > ul > li {
  font-size: 25px;
  margin-bottom: 0;
  margin-top: 0;
  line-height: 110%;
}

.fifth-section-grid-container-promo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 317px);
  direction: rtl;
  margin-top: 15px;
  gap: 11px 8px;
}

.fifth-section-grid-item-promo {
  background-color: #2b496b;
  border-radius: 28px;
  padding: 24px 37px 23px 24px;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 75%;
    background-color: white;
    top: 40px;
    right: 22px;
  }

  &:last-of-type {
    padding-left: 70px;
  }
}

.fifth-section-promo-low-p {
  max-width: 1160px;
  margin-top: 27px;
}

.middle-button-promo {
  display: block;
  margin: 25px auto 25px;
}

@media (max-width: 1600px) {
  section {
    padding: 0 70px !important;
  }
}
@media (max-width: 1300px) {
  .fifth-section-grid-container-promo {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 1200px) {
  .section-button-promo {
    margin: 25px auto;
    display: block;
  }
  section {
    padding: 0 20px !important;
  }
  .promocode-copy-img {
    margin: 0 auto;
    display: block;
  }
  .first-section-text-container-promo{
    margin-top: 20px;
  }
  .first-section-content-container-promo{
    flex-wrap: wrap;
  }
  html[lang="ar"] .fifth-section-grid-item-promo > h4,
  html[lang="ar"] .fifth-section-grid-item-promo > p,
  html[lang="ar"] .fifth-section-grid-item-promo > ul,
  html[lang="ar"] .fifth-section-grid-item-promo > ul > li {
    font-size: 18px;
  }

  .fifth-section-grid-item-promo::after {
    height: 65%;
  }
}

@media (max-width: 800px) {
  .section-button-promo {
    font-size: 25px;
  }

  .promo-content-container > ul {
    padding-right: 22px;
  }
}

@media (max-width: 600px) {
  .first-section-promo {
    padding-left: 15px;
    padding-right: 15px;
  }
  .section-button-promo {
    font-size: 18px;
    height: 60px;
  }

  .first-section-content-container-promo > img {
    max-width: 340px;
  }

  html[lang="ar"] .fifth-section-grid-item-promo > h4,
  html[lang="ar"] .fifth-section-grid-item-promo > p,
  html[lang="ar"] .fifth-section-grid-item-promo > ul,
  html[lang="ar"] .fifth-section-grid-item-promo > ul > li {
    font-size: 16px;
  }

  .fifth-section-grid-item-promo > ul {
    padding-right: 25px;
  }
}

@media (max-width: 375px) {
  .first-section-content-container-promo > img {
    max-width: 280px;
  }
  .section-button-promo {
    font-size: 15px;
  }
}