@media only screen and (max-width: 1060px) {
  .blog__related-image-box-home {
    width: 33rem;
    height: 22.1rem;
  }

  .blog__related {
    width: 116rem;
  }
}

@media only screen and (max-width: 1000px) {
  .blog__related-image-box-home {
    width: 31rem;
    height: 22.1rem;
  }

  .blog__related {
    width: 112rem;
  }
}

@media only screen and (max-width: 56.25em) {
  /* Highlight section */

  .main-highlight__heading {
    font-size: 4.2rem;
  }

  .main-highlight__item {
    font-size: 2rem;
  }

  .main-highlight__item::before {
    top: 0.5rem;
  }

  /* blog section */
  .blog__related {
    width: 105rem;
  }

  .blog__related-image-box-home {
    width: 31rem;
    height: 19.1rem;
  }
  .blog__related-row-home {
    gap: 2rem;
  }

  /* footer section */

  .footer__wrapper {
    gap: 14rem;
  }

  .footer__social-icon::before {
    width: 7rem;
    height: 7rem;
    top: -50%;
  }
}

/* Extras */

@media only screen and (max-width: 800px) {
  /* blog section */
  .blog__related {
    width: 90rem;
  }

  .blog__related-image-box-home {
    width: 27rem;
    height: 17.1rem;
  }

  .blog__related-row-home {
    gap: 2rem;
  }
}

@media only screen and (max-width: 43.75em) {
  /* Hero section */

  .hero-section {
    /* flex-direction: column; */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      url("../Images/home-hero-img-min.png");
    background-size: cover;

    background-position: center;
    padding: 8rem;
    color: var(--color-white);

    position: relative;
  }

  .hero__image-box {
    display: none;
  }

  .hero__text-box {
    width: 100%;
    z-index: 2;
    position: relative;
    /* background-color: rgba(0, 0, 0, 0.4); */
    padding: 3rem;
  }

  /* Highligh section */

  .main-highlight {
    padding-top: 8rem;
  }

  .main-highlight__heading {
    font-size: 3.2rem;
    margin-bottom: 0;
  }

  .main-highlight__item {
    font-size: 1.8rem;
    padding-left: 3rem;
  }
  .main-highlight__item::before {
    top: 0rem;
    left: 0;
    width: 1.6rem;
    height: 1.6rem;
  }

  /* Why choose us section */

  .why-choose-us__content {
    /* display: flex; */
    flex-direction: column-reverse;
  }

  .why-choose-us__text-box {
    width: 80%;
  }

  .why-choose-us__cards {
    flex-direction: column;
  }

  .why-choose-us__card {
    width: 75%;
  }

  .why-choose-us__card-subtitle {
    font-size: 1.8rem;
  }

  /* How it works section */

  .how-it-works__card-wrapper {
    flex-direction: column;
    width: 75%;
    margin: 0 auto;
    gap: 12rem;

    margin-top: 12rem;
  }
  /* blog section */
  .blog__related {
    width: 80rem;
  }

  .blog__related-image-box-home {
    width: 24rem;
    height: 17.1rem;
  }

  /* footer section */

  /* Footer */

  .footer__wrapper {
    flex-direction: column;
    gap: 8.8rem;
  }

  .footer-logo {
    height: 9.2rem;
    width: 9.2rem;
    margin-bottom: 2rem;
  }

  .footer__nav {
    gap: 3rem;
  }

  .footer__nav-item {
    font-size: 2.4rem;
  }

  .footer__heading {
    font-size: 2.8rem;
  }

  .footer__nav-col:nth-child(2) .footer__heading {
    font-size: 2.8rem;
  }

  /* .footer__social-icon {
    height: 5.2rem !important;
    width: 5.2rem !important;
    display: block;
  } */
}

@media only screen and (max-width: 37.5em) {
  /* blog section home page */

  .blog__related {
    width: 60rem;
  }

  .blog__related-row-home {
    flex-direction: column;
    gap: 8rem;
    justify-content: center;
    align-items: center;
  }

  .blog__related-image-box-home {
    width: 54rem;
    height: 33.15rem;
  }
}

@media only screen and (max-width: 31.25em) {
  /* Hero section */

  /* Highlight section */

  .main-highlight__content {
    flex-direction: column;
  }

  .main-highlight__image-box {
    margin-bottom: 4.5px;
  }

  .main-highlight__image {
    margin-left: 5rem;
  }

  .main-highlight__image-box::before {
    left: 4rem;
  }
  /* Why choose us section */

  .why-choose-us__text-box {
    width: 90%;
  }

  .why-choose-us__image-box img {
    width: 80%;
  }

  .why-choose-us__card {
    width: 95%;
  }

  /* How it works section */

  .how-it-works__card-description {
    font-size: 1.8rem;
  }

  /* Blog related section home page */
  .blog__related-image-box-home {
    width: 36rem;
    height: 22.1rem;
  }

  .blog__related {
    width: 42rem;
  }

  /* footer section */

  .footer__nav-item {
    font-size: 2rem;
  }

  .footer-bottom {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 375px) {
  .why-choose-us__cta:link,
  .why-choose-us__cta:visited {
    font-size: 1rem;
    padding: 2rem;
  }

  .why-choose-us__card-subtitle {
    font-size: 1.6rem;
  }
}

/* About page  */

@media (max-width: 900px) {
  .about-values {
    padding-top: 6rem;
    margin-top: 6rem;
    margin-bottom: 6rem;
  }

  .about-values__title {
    font-size: 4.8rem;
  }

  .about-values__subtitle {
    font-size: 2.4rem;
  }

  .about-values__grid {
    width: 85%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the rows */
    column-gap: 2.4rem;
    row-gap: 4rem;
  }

  .about-values__item {
    min-width: 42%; /* Two per row with gap */
    max-width: 45%;
    flex: 0 1 auto;
  }

  .about-values__item-title {
    font-size: 2.2rem;
  }

  .about-values__item-text {
    font-size: 1.5rem;
  }
}

/* Mobile devices: 600px and down */
@media (max-width: 600px) {
  .about-hero__wrapper {
    height: 60vh;
  }
  .about-hero__title {
    font-size: 4.8rem;
    margin-bottom: 1.8rem;
  }

  .about-hero__subtitle {
    font-size: 1.8rem;
  }

  .about-intro__text {
    font-size: 1.8rem;
    /* width: 50ch; */
  }
  .about-values {
    padding-top: 4rem;
    margin-top: 4rem;
    margin-bottom: 4rem;
    text-align: center;
  }

  .about-values__title {
    font-size: 3.2rem;
  }

  .about-values__subtitle {
    font-size: 1.8rem;
  }

  .about-values__grid {
    width: 90%;
    row-gap: 3.2rem;
    column-gap: 1.6rem;
    flex-direction: column;
  }

  .about-values__item {
    min-width: 100%;
  }

  .about-values__item-title {
    font-size: 1.8rem;
  }

  .about-values__item-text {
    font-size: 1.4rem;
  }
}