/* ************************************** */
/* BELOW 1184px - Small Desktop*/
/* ************************************** */

@media (max-width: 74em) {
  .other-services-container {
    border-radius: 0;
  }
}

/* ************************************** */
/* BELOW 1056px - Tablet Landscape*/
/* ************************************** */

@media (max-width: 66em) {
  .heading-3 {
    font-size: 1.5rem;
  }

  .heading-1 {
    font-size: 5.5rem;
  }

  .hero-description {
    font-size: 1.5rem;
  }

  .client-logos {
    grid-template-columns: repeat(2, 0.5fr);
    column-gap: 1rem;
    row-gap: 1rem;
  }
}

/* ************************************** */
/* BELOW 1024px - Tablet Portrait*/
/* ************************************** */

@media (max-width: 64em) {
  .anglo-center {
    grid-column: 1 / 3;
  }

  .client-logos {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2.4rem;
    row-gap: 2.4rem;
  }
}

/* ************************************** */
/* BELOW 960px - Tablet Portrait*/
/* ************************************** */

@media (max-width: 62em) {
  .heading-1 {
    font-size: 5rem;
  }

  html {
    font-size: 59%;
  }
}

/* ************************************** */
/* BELOW 880px - Tablet Portrait*/
/* ************************************** */

@media (max-width: 55em) {
  .heading-1 {
    font-size: 5rem;
  }

  html {
    font-size: 56%;
  }

  .btn-mobile-nav {
    display: block;
    z-index: 9999;
  }

  .main-nav {
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all 0.5s ease-in;
    transform: translatex(100%);

    /* HIDE */
    opacity: 0;

    /* unaccessible to mouse / keyboard */
    pointer-events: none;

    /* hide from screen readers */
    visibility: hidden;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translatex(0);
  }

  .nav-open .icon-mobile-nav[name="close-icon"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="hamburger-icon"] {
    display: none;
  }

  .main-nav-list {
    flex-direction: column;
    gap: 5rem;
    font-size: 5rem;
  }

  /* ************************************** */
  /* FEUTURED CLIENTS */
  /* ************************************** */

  .client-logos img {
    height: 4rem;
  }

  /* ************************************** */
  /* ABOUT US */
  /* ************************************** */

  .about-grid {
    display: block;
  }

  /* ************************************** */
  /* SERVICE CARDS */
  /* ************************************** */

  .card-wrapper {
    display: block;
  }

  .service-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }

  .service-card:hover {
    transform: translatey(0);
  }

  .card-img {
    width: auto;
    margin-bottom: 0;
  }

  .card-text-box {
    align-items: left;
  }

  .card-title.card-title {
    text-align: left;
  }

  .card-description {
    text-align: left;
  }

  .card-btn {
    position: static;
    width: 100%;
  }

  /* ************************************** */
  /* SERVICES */
  /* ************************************** */

  .service-wrapper {
    grid-template-columns: 1fr;

    align-content: center;
  }

  .service-img {
    width: 50rem;
  }

  .service-img-box {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .img-hidden1 {
    display: none;
  }
  .img-hidden2 {
    display: flex;
  }

  .other-services-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
  }
}

/* ************************************** */
/* BELOW 816px - Hero Fix*/
/* ************************************** */

@media (max-width: 51em) {
  .hero-img-box {
    display: none;
  }

  .hero {
    display: block;
  }
}

/* ************************************** */
/* BELOW 736px - Phone*/
/* ************************************** */

@media (max-width: 46em) {
  /* .client-logos img {
    height: 4rem;
  } */

  .footer-wrapper {
    display: flex;
    flex-direction: column;
  }
}

/* ************************************** */
/* BELOW 528px - Phone*/
/* ************************************** */

@media (max-width: 33em) {
  .card-wrapper {
    display: block;
  }

  .service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .card-img {
    margin-bottom: 4.8rem;
  }

  .card-text-box {
    align-items: center;
  }

  .card-title.card-title {
    text-align: center;
  }

  .card-description {
    text-align: center;
  }

  .service-img {
    width: 100%;
  }

  /* .client-logos img {
    width: 100%;
  } */
  /* ************************************** */
  /* GALLERY*/
  /* ************************************** */

  .img-wrapper {
    grid-template-columns: 1fr 1fr;
  }

  /* ************************************** */
  /* CALL TO ACTION */
  /* ************************************** */
  .cta-box {
    display: flex;
    flex-direction: column;
  }
  .cta-img-box {
    display: none;
  }
}

/* ************************************** */
/* BELOW 400px - Phone*/
/* ************************************** */

@media (max-width: 26em) {
  .logo {
    height: 2rem;
  }
  .icon-mobile-nav {
    height: 2rem;
  }

  .header {
    margin-top: 1rem;
  }

  /* .client-logos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  } */
}