/* =========================================================
   MEDIA-QUERIES.CSS
   Table of Contents
   1) Small devices
   2) Tablets
   3) Laptops
   4) Desktops
   5) Large screens
   ========================================================= */

/* Tablet and up */
@media (min-width: 640px) {
  .hero__actions {
    flex-direction: row;
  }
}

@media (min-width: 640px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Medium devices (Tablets) */
@media (min-width: 768px) {
  .section-title {
    font-size: 3rem; /* md:text-5xl */
  }
}
@media (max-width: 768px) {
    .hero__content{
            padding-top: 14rem;
    }

}
@media (min-width: 768px) {

  .hero__title {
    font-size: 3.75rem; /* md:text-6xl */
  }
}

@media (min-width: 768px) {
  .hero__description {
    font-size: 1.5rem; /* md:text-2xl */
  }
}

@media (min-width: 768px) {
  .values__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .projects__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .stat-item__number {
    font-size: 4.5rem; /* md:text-7xl */
  }
}

@media (min-width: 768px) {
  .contact__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .contact-card--wide {
    grid-column: span 2;
  }
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .page-hero {
    margin-top: 3rem; /* mt-20 approx, to clear fixed header if needed, or adjust based on layout */
  }

  .page-hero__title {
    font-size: 3.75rem; /* md:text-6xl */
  }
}

@media (min-width: 768px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Large devices (Laptops/Desktops) */
@media (min-width: 1024px) {
  .section-title {
    /* No change inside this specific block in original, but verifying if any properties were set */
    /* Original had only one rule for min-width: 768px which set font-size: 3rem. 
       Wait, let me double check lines 96-100.
       It was min-width: 768px.
       Let's check 114-121. */
  }

  .section.single-service .container {
    grid-template-columns: repeat(5, 1fr);
  }

  .desktop-only {
    display: flex;
  }
  .mobile-only {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hero__title {
    font-size: 4.5rem; /* lg:text-7xl */
  }
}

@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1024px) {
  .about__content {
    grid-column: span 3;
    order: 1;
  }
}

@media (min-width: 1024px) {
  .about__image-wrapper {
    grid-column: span 2;
    order: 2;
  }
}

@media (min-width: 1024px) {
  .vision__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .values__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .projects__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-card--wide {
    grid-column: span 1;
  }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .contact-info__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}