/* Extra small devices (phones, 576px and down) */
@media (max-width: 576px) {
  :root {
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.2rem;
  }

  .section-padding {
    padding: 60px 0;
  }

  .hero-section {
    min-height: auto;
    padding: 120px 0 60px;
  }

  .hero-title-1 {
    font-size: 2.2rem;
  }

  .hero-subtitle-1 {
    font-size: 1.3rem;
  }

  .service-item, 
  .price-item, 
  .about-feature-item,
  .team-member,
  .review-item,
  .core-info-item {
    margin-bottom: 20px;
  }

  .contact-form {
    padding: 1.5rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .gallery-item {
    height: 150px;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  :root {
    --font-size-h1: 3rem;
    --font-size-h2: 2.2rem;
    --font-size-h3: 1.6rem;
  }

  .section-padding {
    padding: 70px 0;
  }

  .hero-section {
    min-height: auto;
    padding: 140px 0 70px;
  }

  .service-item, 
  .price-item, 
  .about-feature-item {
    margin-bottom: 25px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .section-padding {
    padding: 80px 0;
  }

  .hero-section {
    min-height: auto;
    padding: 160px 0 80px;
  }

  .service-item, 
  .price-item, 
  .about-feature-item {
    margin-bottom: 30px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-section {
    min-height: 90vh;
  }
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, 
  *::before, 
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-shape, 
  .shape-blob,
  .service-item:hover,
  .price-item:hover,
  .about-feature-item:hover,
  .team-member:hover .team-image img,
  .blog-item:hover,
  .blog-item:hover .blog-image img,
  .gallery-item:hover img {
    transform: none !important;
  }

  .swiper-container, .owl-carousel {
    transition: none !important;
  }
}

/* Fix for Safari flexbox gap issue */
@supports not (gap: 1rem) {
  .blog-grid > * {
    margin: 0 15px 30px;
  }

  .gallery-grid > * {
    margin: 0 7.5px 15px;
  }
}

/* Fix for IE 10-11 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .blog-grid, 
  .gallery-grid {
    display: flex;
    flex-wrap: wrap;
  }

  .blog-grid > * {
    width: calc(33.333% - 20px);
    margin: 0 10px 30px;
  }

  .gallery-grid > * {
    width: calc(25% - 12px);
    margin: 0 6px 15px;
  }
}