/* ==========================================================================
   S&C INTERNATIONAL - RESPONSIVE STYLESHEET
   Breakpoints: 1200px, 992px, 768px, 576px
   ========================================================================== */

@media (max-width: 1199.98px) {
  .hero-title {
    font-size: 2.75rem;
  }
  .floating-badge-1 { left: -2%; }
  .floating-badge-2 { right: -2%; }
}

@media (max-width: 991.98px) {
  .hero-section {
    padding: 120px 0 60px;
    text-align: center;
  }

  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-img-wrapper {
    margin-top: 50px;
  }

  .floating-badge {
    padding: 8px 14px;
    font-size: 0.75rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .cta-banner {
    padding: 40px 24px;
    text-align: center;
  }

  .cta-buttons {
    justify-content: center;
    margin-top: 20px;
  }
}

@media (max-width: 767.98px) {
  .top-bar {
    display: none;
  }

  .navbar {
    padding: 10px 0;
  }

  .hero-title {
    font-size: 2.1rem;
  }

  .floating-badge {
    display: none; /* Hide floating badges on smaller mobile screens for clean UI */
  }

  .section-title {
    font-size: 1.75rem;
  }

  .counter-num {
    font-size: 2.2rem;
  }

  .back-to-top {
    right: 20px;
    bottom: 90px;
  }

  .floating-whatsapp {
    right: 20px;
    bottom: 24px;
  }
}

@media (max-width: 575.98px) {
  .hero-title {
    font-size: 1.85rem;
  }
  
  .btn-accent, .btn-outline-primary-custom {
    width: 100%;
    justify-content: center;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 12px !important;
  }
}