/* responsive.css */

/* =========================================
   TABLET (max-width: 1024px)
   ========================================= */
@media (max-width: 1024px) {
  /* Hero Section */
  .hero--saas {
    padding-top: 120px;
    padding-bottom: 120px !important; /* override inline style if any */
  }
  .hero__title {
    font-size: 2.75rem;
  }
  
  /* SaaS Showcase */
  .saas-showcase {
    padding-top: 100px;
  }
  .saas-cards-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =========================================
   MOBILE (max-width: 768px)
   ========================================= */
@media (max-width: 768px) {
  /* Header Adjustments */
  .site-header {
    height: 70px !important;
  }
  .site-header__logo img {
    height: 36px !important;
  }

  /* Typography */
  .hero__title {
    font-size: 2.125rem !important;
    line-height: 1.25;
    word-break: keep-all;
  }
  .hero__description {
    font-size: 1rem !important;
    margin-bottom: 32px;
  }
  .hero__description br {
    display: none;
  }
  .section__title, .section__title--type2 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
    word-break: keep-all;
  }
  .section__description {
    font-size: 0.9375rem !important;
    line-height: 1.5;
  }

  /* Spacing & Layout */
  .hero--saas {
    padding-top: 140px !important;
    padding-bottom: 80px !important;
  }
  .section, .saas-showcase {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  
  /* Stats Floating Container Adjustments */
  .stats-floating-container {
    margin-top: -60px !important;
  }

  /* Stats Grid */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
    padding: 0 20px !important;
  }
  .stat-card {
    padding: 16px 12px;
  }
  .stat-card:last-child {
    grid-column: span 2;
  }
  .stat-card__value {
    font-size: 1.75rem;
  }
  .stat-card__label {
    font-size: 0.8125rem;
  }

  /* SaaS Showcase Floating Cards */
  .saas-cards-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 16px !important;
    margin-top: 24px;
  }
  .saas-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .saas-card__icon {
    width: 32px !important;
    height: 32px !important;
  }
  .saas-card__info h4 {
    font-size: 0.875rem !important;
  }
  .saas-card__info p {
    font-size: 0.75rem !important;
    white-space: normal !important;
    word-break: keep-all;
  }
  
  /* Fix the text container margin in SaaS section */
  .saas-text-container {
    margin-top: 30px !important;
  }

  /* Services Grid */
  .service-grid--saas {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Clients Marquee Slider */
  .client-slide-card {
    width: 140px !important;
    height: 60px !important;
    padding: 8px 12px !important;
    border-radius: 30px !important;
  }
}

/* =========================================
   SMALL MOBILE (max-width: 480px)
   ========================================= */
@media (max-width: 480px) {
  .hero__title {
    font-size: 1.75rem !important;
  }
  .section__title, .section__title--type2 {
    font-size: 1.5rem !important;
  }
  .stat-card__value {
    font-size: 1.5rem;
  }
  .saas-card {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    padding: 16px 12px !important;
  }
  .saas-cards-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}