/* queries styles */

.mobile-nav-btn,
.mobile-nav {
  display: none;
}

@media (max-width: 1145px) {
  .hero-abs-text {
    display: none;
  }
}

@media (max-width: 1036px) {
  .container {
    max-width: 90%;
  }
  .hero-abs-text {
    display: none;
  }

  .grid-4-auto {
    grid-template-columns: 1fr 1fr;
  }

  .grid-2-auto {
    grid-template-columns: 1fr;
    column-gap: var(--spacing-600);
    row-gap: var(--spacing-600);
  }

  .service-section .grid-2-auto {
    grid-template-columns: 1fr;
  }

  .skills-section .grid-part-2 .grid-3-auto {
    grid-template-columns: 1fr;
  }

  .skill-person-image {
    display: none;
  }

  .project-grid {
    display: grid;
    column-gap: 4rem;
    row-gap: 8rem;
    grid-template-rows: repeat(2, 15rem);
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "title title"
      "side-one side-two"
      "side-one side-two"
      "side-one side-two"
      "side-three click-image";
    --spacing-flex: var(--spacing-500);
  }

  .project-grid-click-image {
    align-self: flex-end;
  }
}

@media (max-width: 976px) {
  .clients-section-header {
    flex-wrap: wrap;
  }

  [class*="client_"] {
    flex-basis: 70%;
    flex-shrink: 0;
  }

  .client-image {
    width: 20rem;
  }

  .nav-icon-arrows {
    margin-left: auto;
  }

  .click-image {
    width: 30%;
  }
}

@media (max-width: 967px) {
  .skills-section {
    .container {
      display: grid;
      gap: 5rem;
      grid-template-columns: 1fr;
    }
  }
}

@media (max-width: 960px) {
  .mobile-nav-btn {
    display: block;
  }

  .header-nav {
    display: none;
  }

  .cta-section {
    .footer-grid {
      display: grid;
      grid-template-columns: 1fr;
    }

    .footer-logo-image {
      width: 40%;
    }
  }
}

@media (max-width: 850px) {
  .project-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto repeat(3, 1fr) auto;
    grid-template-areas:
      "title"
      "side-one"
      "side-two"
      "side-three"
      "click-image";
    --spacing-flex: var(--spacing-500);

    [class*="client_"] {
      flex-basis: 90%;
      flex-shrink: 0;
    }
  }

  .project-grid-click-image {
    margin-left: auto;
    width: 40%;
  }
}

@media (max-width: 720px) {
  :root {
    /* Font Family */
    --ff-heading: "Averia Sans Libre", sans-serif;
    --ff-body: "Averia Sans Libre", sans-serif;

    /* Font size */
    --fs-little: 0.407rem;
    --fs-small: 1rem;
    --fs-normal: 1.6rem;
    --fs-medium: 3.4rem;
    --fs-large: 5.8rem;
    --fs-xlarge: 7.2rem;
  }

  .container {
    max-width: 100%;
    padding: 0 var(--spacing-500) 0 var(--spacing-500);
  }

  section[class*="-section"] {
    --spacing: var(--spacing-500);
    padding-top: var(--spacing-600);
    padding-bottom: var(--spacing-600);
  }

  .click-btn {
    width: 74%;
  }

  .service-section .grid-part-2 .heading-02 {
    font-size: var(--fs-medium);
  }

  .service-section .click-image {
    width: 16rem;
  }

  [class*="client_"] {
    flex-basis: 87%;
    flex-shrink: 0;
  }
}

@media (max-width: 667px) {
  .heading-01 {
    font-size: var(--fs-large);
  }
  .clients-section-header-content {
    flex-direction: column;
  }

  .clients-section-header-content h2 {
    width: 100%;
  }

  .clients-section-header-content div {
    width: 100%;
  }

  .client-image {
    margin-right: auto;
  }

  [class*="client_"] {
    flex-direction: column;
    flex-basis: 80%;
  }

  .nav-icon-arrows {
    margin-top: auto;
  }

  .click-image {
    width: 30%;
  }
}

@media (max-width: 330px) {
  .container {
    max-width: 100%;
    padding: 0 var(--spacing-300);
  }

  .heading-01 {
    font-size: calc(var(--fs-medium) * 1.2);
  }

  .skills-section {
    .pt-6 {
      padding-top: 1em;
    }

    .grid-3-auto {
      grid-template-columns: 1fr 1fr;
      text-align: center;
      justify-items: center;

      img {
        margin: auto;
      }
    }

    .experience {
      margin-top: 3em;
    }

    .mt-7 {
      padding-top: 3em;

      .grid-1-auto {
        grid-template-columns: 1fr;
      }
    }
  }

  .cta-section {
    .footer-grid {
      .flex {
        flex-direction: column;
      }
    }
  }
}