@media (max-width: 1024px) {
  html {
    font-size: 60%;
  }

  .for-menu {
    display: block;
  }
  .for-contact {
    display: none;
  }

  .home-testimonial-section .count {
    font-size: 15rem;
  }

  .grid-4,
  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 3rem;
  }

  .banner-slider {
    max-width: 42rem;
  }

  /* MOBILE NAVIGATION */
  .nav-lins-wrapper {
    position: absolute;
    top: 100%;
    left: 0;

    width: 100%;
    max-height: 0; /* 👈 closed */

    background-color: #fff;
    border-bottom: 1px solid #e1e1e1;

    overflow: hidden;

    transition: max-height 1s ease;
  }

  .nav-lins-wrapper.active {
    max-height: calc(100vh - 60px);
  }

  .nav-lins-wrapper .nav-links {
    flex-direction: column;
    padding: 1rem 3rem;
  }

  .nav-links a:hover {
    color: var(--dark);
  }

  nav {
    background-color: white;
    position: relative;
  }
  nav .logo {
    color: inherit;
  }

  /* lines */
  .gpml-menu-toogle-btn .line {
    stroke: black;
    stroke-width: 2;
    transition: all 0.3s ease;
    transform-origin: top;
  }

  /* ACTIVE = CLOSE ICON */
  .gpml-menu-toogle-btn.active .top {
    transform: translateY(0px) rotate(45deg);
  }
  .gpml-menu-toogle-btn.active svg {
    width: 30px;
    height: 30px;
  }

  .gpml-menu-toogle-btn.active .bottom {
    transform: translateY(-1px) rotate(-45deg);
  }

  @media (max-width: 992px) {
    html {
      font-size: 50%;
    }
  }

  @media (max-width: 768px) {
    .hero {
      grid-template-columns: 1fr;
    }

    .hero-content,
    .hero-visual {
      padding: 4rem 3rem;
    }

    .home-section-3 img {
      max-width: 100%;
    }

    .home-section-3 .d-flex,
    .blog-section-wrapper {
      flex-direction: column;
    }

    .blog-cat {
      display: inline-block;
      margin-top: 1rem;
    }

    .blog-section-wrapper .one-blog-card h3 br {
      display: none;
    }

    .home-section-4 .d-flex {
      flex-direction: column;
    }

    .home-section-4 .d-flex .btn-primary {
      align-self: baseline;
    }

    .home-section-4 .d-flex .article-block-left {
      margin-bottom: 3rem;
    }

    .home-section-4 .d-flex .article-block-left h4.mb-10 {
      margin-bottom: 0;
    }
    .btn-primary {
      padding: 10px 2.8rem;
    }

    .home-section-4 .home-section-4--card {
      text-align: center;
    }

    .f-s-18 {
      font-size: 16px;
    }
  }

  @media (max-width: 480px) {
    html {
      font-size: 40%;
    }
  }
}