@keyframes two-columns-hero-section-up-down-animation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
  }
}

.two-columns-hero-section {
  width: 100%;
  height: 600px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
  background-color: #f5f1ea;
  overflow: hidden;
}

.two-columns-hero-section__content {
  padding-top: 150px;
  padding-left: 300px;
  position: relative;
  left: 0;
  right: auto;
  z-index: 3;
}

.rtl .two-columns-hero-section__content {
  padding-top: 150px;
  padding-left: 300px;
  padding-right: 0;
  position: relative;
  left: 0;
  right: auto;
  text-align: left !important;
}

.two-columns-hero-section__content h1 {
  max-width: 620px;
  line-height: 1.02;
  margin-top: 0 !important;
  margin-bottom: 0;
}

.two-columns-hero-section__content .font-64 {
  font-size: 52px !important;
  line-height: 1.02 !important;
}

.two-columns-hero-section__content .mt-16.font-16.text-gray-500 {
  max-width: 430px;
  margin-top: 12px !important;
  font-size: 15px !important;
  line-height: 1.5;
  color: #7a8498 !important;
}

.two-columns-hero-section__images-side {
  padding-top: 114px;
}

.two-columns-hero-section__upper-cta-badge-icon {
  display: inline-block;
  animation-name: wave-animation;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}

.two-columns-hero-section__main-img {
  width: calc(100% - 84px);
  max-width: 624px;
  height: 100%;
  max-height: 610px;
}

.two-columns-hero-section__main-img,
.two-columns-hero-section__main-img img {
  border-radius: 32px;
}

.two-columns-hero-section__spinning-img {
  width: 132px;
  height: 132px;
  position: absolute;
  top: 174px;
  left: 42px;
  z-index: 2;
  transition: all 0.4s;
  animation: rotate-animation 12s infinite linear;
}

.rtl .two-columns-hero-section__spinning-img {
  left: auto;
  right: 42px;
}

.two-columns-hero-section__overlay-img {
  width: 416px;
  height: 218px;
  position: absolute;
  right: 40px;
  bottom: 60px;
  z-index: 2;
  animation: two-columns-hero-section-up-down-animation 1s infinite alternate;
}

.rtl .two-columns-hero-section__overlay-img {
  right: auto;
  left: 40px;
}

.backdrop-filter-blur-2 {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* تثبيت مكان بلوك الكلام في العربي مثل الإنجليزي */
.rtl .two-columns-hero-section__content,
.rtl .two-columns-hero-section__content h1,
.rtl .two-columns-hero-section__content .mt-16.font-16.text-gray-500 {
  text-align: left !important;
}

.two-columns-hero-section__content,
.rtl .two-columns-hero-section__content {
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  transform: none !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* تثبيت مكان الزرارين في العربي مثل الإنجليزي */
.rtl .two-columns-hero-section .d-flex.align-items-lg-center.flex-column.flex-lg-row.mt-32.gap-16,
.rtl .two-columns-hero-section .d-flex.align-items-lg-center.flex-column-reverse.flex-lg-row.mt-32.gap-16,
.rtl .two-columns-hero-section .d-flex.flex-column.flex-lg-row,
.rtl .two-columns-hero-section .d-flex.flex-column-reverse.flex-lg-row {
  direction: ltr !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.rtl .two-columns-hero-section .d-flex.align-items-lg-center.flex-column.flex-lg-row.mt-32.gap-16 > a,
.rtl .two-columns-hero-section .d-flex.align-items-lg-center.flex-column-reverse.flex-lg-row.mt-32.gap-16 > a,
.rtl .two-columns-hero-section .d-flex.flex-column.flex-lg-row > a,
.rtl .two-columns-hero-section .d-flex.flex-column-reverse.flex-lg-row > a {
  align-self: flex-start !important;
}

.rtl .two-columns-hero-section .btn,
.rtl .two-columns-hero-section .btn-xlg {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* TABLET + MOBILE */
@media (max-width: 991px) {
  .two-columns-hero-section {
    height: auto;
    min-height: 520px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 62% top;
    background-color: #f5f1ea;
    padding: 24px 0 24px;
    overflow: hidden;
  }

  .two-columns-hero-section__content {
    padding: 58px 20px 0 42px;
    position: relative;
    left: 0;
    right: auto;
    z-index: 4;
    text-align: left;
    max-width: 230px;
  }

  .rtl .two-columns-hero-section__content {
    padding: 58px 20px 0 42px;
    position: relative;
    left: 0;
    right: auto;
    text-align: left !important;
    max-width: 230px;
  }

  .two-columns-hero-section__content h1 {
    max-width: 220px;
    line-height: 1.1;
    margin-top: 0 !important;
    margin-bottom: 0;
  }

  .two-columns-hero-section__content .font-64 {
    font-size: 24px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.3px;
  }

  .two-columns-hero-section__content .mt-16.font-16.text-gray-500 {
    max-width: 230px;
    margin-top: 8px !important;
    font-size: 12px !important;
    line-height: 1.45;
    color: #5f6b84 !important;
  }

  .rtl .two-columns-hero-section__content h1,
  .rtl .two-columns-hero-section__content .mt-16.font-16.text-gray-500 {
    text-align: left !important;
  }

  .two-columns-hero-section__content .text-primary {
    display: inline;
    white-space: normal;
  }

  .two-columns-hero-section__images-side {
    padding: 0 20px;
    width: 100%;
  }

  .two-columns-hero-section__main-img,
  .two-columns-hero-section__main-img img,
  .two-columns-hero-section__spinning-img,
  .two-columns-hero-section__overlay-img {
    display: none !important;
  }

  .two-columns-hero-section .d-flex.align-items-lg-center.flex-column.flex-lg-row.mt-32.gap-16,
  .two-columns-hero-section .d-flex.align-items-lg-center.flex-column-reverse.flex-lg-row.mt-32.gap-16,
  .two-columns-hero-section .d-flex.flex-column-reverse.flex-lg-row,
  .two-columns-hero-section .d-flex.flex-column.flex-lg-row {
    margin-top: 14px !important;
    gap: 10px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .rtl .two-columns-hero-section .d-flex.align-items-lg-center.flex-column.flex-lg-row.mt-32.gap-16,
  .rtl .two-columns-hero-section .d-flex.align-items-lg-center.flex-column-reverse.flex-lg-row.mt-32.gap-16,
  .rtl .two-columns-hero-section .d-flex.flex-column-reverse.flex-lg-row,
  .rtl .two-columns-hero-section .d-flex.flex-column.flex-lg-row {
    direction: ltr !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .two-columns-hero-section .btn,
  .two-columns-hero-section .btn-xlg {
    min-height: 42px;
    padding: 10px 18px !important;
    font-size: 13px !important;
    border-radius: 14px !important;
  }
}

/* SMALL MOBILE */
@media (max-width: 767px) {
  .two-columns-hero-section {
    min-height: 500px;
    padding: 20px 0 22px;
    background-size: cover;
    background-position: 64% top;
  }

  .two-columns-hero-section__content {
    padding: 52px 16px 0 36px;
    position: relative;
    left: 0;
    right: auto;
    max-width: 210px;
    text-align: left;
  }

  .rtl .two-columns-hero-section__content {
    padding: 52px 16px 0 36px;
    position: relative;
    left: 0;
    right: auto;
    max-width: 210px;
    text-align: left !important;
  }

  .two-columns-hero-section__content h1 {
    max-width: 205px;
    line-height: 1.08;
  }

  .two-columns-hero-section__content .font-64 {
    font-size: 22px !important;
    line-height: 1.08 !important;
  }

  .two-columns-hero-section__content .mt-16.font-16.text-gray-500 {
    max-width: 210px;
    font-size: 11px !important;
    line-height: 1.4;
    margin-top: 8px !important;
  }

  .rtl .two-columns-hero-section__content h1,
  .rtl .two-columns-hero-section__content .mt-16.font-16.text-gray-500 {
    text-align: left !important;
  }

  .two-columns-hero-section__images-side {
    padding: 0 16px;
  }

  .two-columns-hero-section .btn,
  .two-columns-hero-section .btn-xlg {
    width: auto;
    min-height: 40px;
    padding: 9px 16px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }
}

/* VERY SMALL MOBILE */
@media (max-width: 575px) {
  .two-columns-hero-section {
    min-height: 480px;
    padding: 18px 0 20px;
    background-size: cover;
    background-position: 66% top;
  }

  .two-columns-hero-section__content {
     padding: 100px 100px 100px 1px; 
    position: relative;
    left: 0;
    right: auto;
    max-width: 180px;
    text-align: left;
  }

  .rtl .two-columns-hero-section__content {
    padding: 120px 14px 0 32px;
    position: relative;
    left: 0;
    right: auto;
    max-width: 180px;
    text-align: left !important;
  }

  .two-columns-hero-section__content h1 {
    max-width: 180px;
  }

  .two-columns-hero-section__content .font-64 {
    font-size: 21px !important;
    line-height: 1.08 !important;
  }

  .two-columns-hero-section__content .mt-16.font-16.text-gray-500 {
    margin-top: 8px !important;
    font-size: 11px !important;
    line-height: 1.4;
    max-width: 180px;
  }

  .rtl .two-columns-hero-section__content h1,
  .rtl .two-columns-hero-section__content .mt-16.font-16.text-gray-500 {
    text-align: left !important;
  }

  .two-columns-hero-section__images-side {
    padding: 0 14px;
  }

  .two-columns-hero-section .d-flex.align-items-lg-center.flex-column.flex-lg-row.mt-32.gap-16,
  .two-columns-hero-section .d-flex.align-items-lg-center.flex-column-reverse.flex-lg-row.mt-32.gap-16,
  .two-columns-hero-section .d-flex.flex-column-reverse.flex-lg-row,
  .two-columns-hero-section .d-flex.flex-column.flex-lg-row {
    margin-top: 12px !important;
    gap: 8px !important;
  }

  .rtl .two-columns-hero-section .d-flex.align-items-lg-center.flex-column.flex-lg-row.mt-32.gap-16,
  .rtl .two-columns-hero-section .d-flex.align-items-lg-center.flex-column-reverse.flex-lg-row.mt-32.gap-16,
  .rtl .two-columns-hero-section .d-flex.flex-column-reverse.flex-lg-row,
  .rtl .two-columns-hero-section .d-flex.flex-column.flex-lg-row {
    direction: ltr !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
}