.about-us {
  padding: 140px 0;
}

.about-us__wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about-us__top {
  display: flex;
  justify-content: flex-start;
  gap: 253px;
}

.about-us__intro {
  max-width: 88px;
  width: 100%;
  padding-top: 8px;
  border-top: 1px solid var(--border2);
}

.about-us__title--inner {
  max-width: 435px;
  width: 100%;
}

.about-us__title {
  max-width: calc(100% - 341px);
  width: 100%;
}

.about-us__title h2,
.about-us__title h3 {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 38px;
  line-height: 42.25px;
  letter-spacing: -0.77px;
  color: var(--text);
}

.about-us__title h2 span,
.about-us__title h3 span {
  color: var(--blue);
}

.about-us__bottom {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 64px;
}

.about-us__bottom--img {
  max-width: calc(100% - 500px);
  width: 100%;
  height: 100%;
}

.about-us__bottom--img img {
  max-width: 662px;
  width: 100%;
  max-height: 313px;
  min-height: 100%;
  object-fit: cover;
  display: block;
}

.about-us__bottom--img.full-width-img img{
    max-width: 100%;
}

.about-us__bottom--content {
  max-width: 434px;
  width: 100%;
}

.about-us__bottom--content h6 {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: -0.32px;
  color: var(--text);
  margin-bottom: 15px;
}

.about-us__bottom--content p {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16.17px;
  line-height: 21.6px;
  letter-spacing: -0.32px;
  color: var(--text);
}
.about-us__bottom--content p:has(strong) strong {
  font-weight: 400;
}

.about-us__bottom--content p:has(strong) {
  font-size: 20px;
  line-height: 25px;
}

.about-us__bottom--content p:not(:last-child) {
  margin-bottom: 25px;
}

.about-us__bottom--content .btn {
  margin-top: 35px;
}

.about-us__bottom--content ul {
    margin-left: 30px;
}

.about-us__bottom--content ul li{
    margin-bottom: 10px;
}
/* ---------------------------------------
   RESPONSIVE STYLES
--------------------------------------- */

@media (max-width: 1399px) {
  .about-us__bottom--content p:has(strong) {
    font-size: 18px;
    line-height: 23px;
  }
}

/* ≤ 1199px (tablet/medium screens) */
@media (max-width: 1199px) {
  .about-us {
    padding: 100px 0 !important;
  }

  .about-us__top {
    gap: 120px;
  }

  .about-us__title h2,
  .about-us__title h3 {
    font-size: 32px;
    line-height: 38px;
  }

  .about-us__bottom {
    gap: 40px;
  }
}

/* ≤ 991px (small tablet) */
@media (max-width: 991px) {
  .about-us {
    padding: 80px 0 !important;
  }

  .about-us__top {
    flex-direction: column;
    gap: 20px;
  }

  .about-us__title {
    max-width: 100%;
  }

  .about-us__title h2,
  .about-us__title h3 {
    font-size: 28px;
    line-height: 34px;
  }

  .about-us__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .about-us__bottom--img {
    max-width: 100%;
  }

  .about-us__bottom--img img {
    max-height: none;
    height: auto;
  }

  .about-us__bottom--content {
    max-width: 100%;
  }

  .about-us__bottom--content p:not(:last-child) {
    margin-bottom: 20px;
  }
}

/* ≤ 767px (mobile) */
@media (max-width: 767px) {
  .about-us {
    padding: 60px 0 !important;
  }

  .about-us__bottom--content h6 {
    font-size: 18px;
    line-height: 24px;
  }

  .about-us__bottom--content p {
    font-size: 15px;
    line-height: 20px;
  }
  .about-us__bottom--content p:has(strong) {
    font-size: 17px;
    line-height: 22px;
  }
  .about-us__bottom--content p:not(:last-child) {
    margin-bottom: 15px;
  }
}

/* ≤ 575px (small mobile) */
@media (max-width: 575px) {
  .about-us {
    padding: 40px 0 !important;
  }

  .about-us__bottom--content h6 {
    font-size: 16px;
    line-height: 22px;
  }

  .about-us__bottom--content p {
    font-size: 14px;
    line-height: 19px;
  }

  .about-us__bottom--content p:has(strong) {
    font-size: 16px;
    line-height: 21px;
  }

  .about-us__bottom--content .btn {
    margin-top: 20px;
  }
}