/* ============ MEDIA QUERIES ============ */

/* Small screens (phones) - below 576px */
@media (max-width: 575.98px) {
    .services-row {
      flex-direction: column;
      gap: 20px;
    }
  
    .service-card {
      padding: 38px;
    }
  
    .service-card i {
      font-size: 30px;
    }
  
    .section h3 {
      font-size: 20px;
    }
  }
  
  /* Medium screens (tablets) - 576px to 991.98px */
  @media (min-width: 576px) and (max-width: 991.98px) {
    .services-row {
      flex-wrap: wrap;
      justify-content: center;
    }
   
    .service-card {
      flex: 1 1 calc(50% - 20px);
      margin-bottom: 20px;
    }
  
    .service-card i {
      font-size: 32px;
    }
  
    .section h3 {
      font-size: 22px;
    }
  }
  
  /* Large screens (laptops/desktops) - from 992px upward */
  @media (min-width: 992px) {
    .services-row {
      flex-wrap: nowrap;
    }
  
    .service-card {
      flex: 1 1 0;
    }
  }

  /* ======================= ABOUT  MEDIA QUERY ===================================== */
  @media (max-width: 991.98px) {
    .page-header h1 { font-size: 2rem; }
    .page-header p { font-size: 1rem; }
  }
  @media (max-width: 767.98px) {
    .page-header { padding: 3rem 1rem !important; }
    .hover-shadow:hover { transform: none; }
  }
  @media (hover:hover) {
    .hover-shadow:hover {
      transform: translateY(-5px);
      transition: all 0.3s ease-in-out;
      box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.1);
    }
  }

  /* ==========================ABOUT MEDIA QUERY ENDS ==============================*/