/* ========================================
   Responsive
======================================== */

@media (max-width: 1199.98px) {
  .clients-grid {
    grid-template-columns: repeat(4, 1fr);

    .client-grid-item {
      &:nth-child(6n) {
        border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
      }

      &:nth-child(4n) {
        border-inline-end: none;
      }
    }
  }
}

@media (max-width: 991.98px) {
  .header {
    .navbar-right {
      display: none;
    }

    .logo-img {
      height: 48px;
    }

    .nav-link {
      font-size: 18px;
      padding: 10px 0 !important;

      &::after {
        left: 0;
        transform: none;
      }

      &:hover::after,
      &.active::after {
        width: 40px;
      }
    }
  }

  .hero-video-section {
    height: 100svh;

    .hero-scroll {
      bottom: 24px;
    }
  }

  .hero-pages {
    padding-top: 140px;
    min-height: 34vh;

    h1 {
      font-size: clamp(2rem, 8vw, 2.6rem);
    }
  }

  .about-section,
  .about-intro-section,
  .why-section,
  .services-section,
  .services-page-section,
  .blogs-section,
  .blogs-page-section,
  .contact-section,
  .details-section {
    padding-block: 64px;
  }

  .section-title {
    font-size: clamp(1.7rem, 6vw, 2.4rem);
  }

  .service-card {
    min-height: 280px;

    &--featured {
      min-height: 460px;

      .service-card-content h4 {
        max-width: none;
      }
    }
  }

  .why-feature-card {
    padding: 28px 22px;
  }

  .contact-card {
    .contact-card-info,
    .contact-card-form {
      padding: 40px 28px;
      border-radius: 28px;
    }

    .contact-card-info h2 {
      font-size: 2rem;
    }
  }

  .footer {
    padding-top: 140px;
  }

  .footer-cta-section {
    margin-bottom: -90px;
  }

  .footer-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 28px;
    min-height: 0;

    .footer-cta-visual {
      position: relative;
      width: 100%;
      height: 180px;
      inset: auto;
      margin-top: 30px;
    }

    .footer-cta-logo-wrapper {
      margin-inline-end: 0;
    }
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 16px;

    .footer-bottom-contacts,
    .footer-social-links,
    .footer-bottom-right {
      justify-content: center;
      width: 100%;
    }
  }

  .media-card {
    min-height: 280px;

    > img {
      min-height: 280px;
    }

    .media-card-title {
      padding: 24px 16px 24px 96px;
    }
  }

  [dir="rtl"] .media-card .media-card-title {
    padding: 24px 96px 24px 16px;
  }
}

@media (max-width: 767.98px) {
  .clients-grid {
    grid-template-columns: repeat(3, 1fr);

    .client-grid-item {
      height: 110px;
      padding: 16px;

      &:nth-child(4n) {
        border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
      }

      &:nth-child(3n) {
        border-inline-end: none;
      }
    }
  }

  .section-label {
    max-width: 100%;

    .section-label-text {
      white-space: normal;
    }
  }
}

@media (max-width: 575.98px) {
  body {
    overflow-x: hidden;
  }

  .header {
    .logo-img {
      height: 40px;
    }
  }

  .hero-pages {
    padding: 128px 0 56px;
    min-height: 30vh;

    h1 {
      font-size: 1.85rem;
    }
  }

  .about-section,
  .about-intro-section,
  .why-section,
  .services-section,
  .services-page-section,
  .blogs-section,
  .blogs-page-section,
  .contact-section,
  .details-section {
    padding-block: 48px;
  }

  .btn-primary-custom,
  .btn-more,
  .btn-secondary-custom,
  .btn-learn-more-creative {
    width: 100%;
    justify-content: center;
  }

  .service-card,
  .service-card--featured {
    min-height: 340px;
    border-radius: 22px;
  }

  .service-card-content,
  .service-card--featured .service-card-content {
    padding: 20px;
  }

  .service-card-content h4 {
    font-size: 22px;
  }

  .service-metric {
    min-width: 0;
    flex: 1;
    padding: 10px 12px;

    strong {
      font-size: 18px;
    }
  }

  .why-feature-card {
    padding: 24px 20px;
    border-radius: 22px;

    h4 {
      font-size: 17px;
    }
  }

  .contact-card {
    border-radius: 22px;

    .contact-card-info,
    .contact-card-form {
      padding: 28px 20px;
      border-radius: 22px;
    }
  }

  .back-to-top {
    bottom: 16px;
    inset-inline-end: 14px;
  }

  .floating-actions {
    inset-inline-start: 14px;
    bottom: 16px;
    gap: 8px;
  }

  .floating-btn,
  .back-to-top .back-to-top-btn {
    width: 46px;
    height: 46px;
    border-width: 2px;
  }

  .footer-cta {
    border-radius: 22px;
    padding: 28px 18px;

    .footer-cta-content h2 {
      font-size: 1.7rem;
      margin-bottom: 18px;
    }

    .footer-cta-logo-card {
      width: 180px;
      height: 100px;
      padding: 12px 16px;
    }

    .footer-cta-floating-badge {
      font-size: 11px;
      padding: 6px 10px;

      &.badge-1 {
        left: 0;
      }

      &.badge-2 {
        right: 0;
      }
    }
  }

  .footer-awards {
    gap: 10px;
    justify-content: center;
  }

  .footer-award-badge {
    width: 84px;
    height: 76px;
  }

  .media-card {
    min-height: 250px;
    border-radius: 16px;

    > img {
      min-height: 250px;
    }

    .media-card-title {
      padding: 20px 14px 20px 88px;

      h4,
      h4 a {
        font-size: 18px;
      }
    }

    .card-corner-btn {
      width: 78px;
      height: 78px;
    }
  }

  [dir="rtl"] .media-card .media-card-title {
    padding: 20px 88px 20px 14px;
  }

  .clients-grid {
    grid-template-columns: repeat(2, 1fr);

    .client-grid-item {
      &:nth-child(3n) {
        border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
      }

      &:nth-child(2n) {
        border-inline-end: none;
      }
    }
  }

  .client-slider-item {
    padding: 18px 22px;

    img {
      max-height: 40px;
    }
  }
}