/* ==========================================================================
   Responsive overrides — Tablet, Mobile, Landscape, Portrait
   ========================================================================== */

/* Large desktops */
@media (min-width: 1400px) {
  .container { max-width: 1240px; }
}

/* Laptop / small desktop */
@media (max-width: 1199.98px) {
  .hero-title { font-size: clamp(2rem, 4.5vw, 3.2rem); }
  .cta-banner { padding: 46px 36px; }
}

/* Tablet */
@media (max-width: 991.98px) {
  .topbar { display: none !important; }
  .header-call { display: none; }
  .navbar-collapse {
    background: #fff;
    margin-top: 16px;
    padding: 18px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }
  .main-nav .nav-link { padding: 12px 16px !important; }
  .hero, .hero-carousel, .hero-carousel .carousel-inner, .hero-carousel .carousel-item { height: 84vh; }
  .hero-content { padding-top: 40px; text-align: left; }
  .about-media { margin-bottom: 60px; }
  .about-media .experience-badge { position: static; margin-top: -40px; margin-left: 20px; display: inline-flex; }
  .footer-about { margin-bottom: 40px; }
  .site-footer .col-lg-3, .site-footer .col-lg-2 { margin-bottom: 40px; }
}

/* Mobile */
@media (max-width: 767.98px) {
  .section-title { font-size: 1.7rem; }
  .page-header { padding: 170px 0 60px; }
  .hero, .hero-carousel, .hero-carousel .carousel-inner, .hero-carousel .carousel-item { height: 78vh; }
  .hero-text { font-size: 1rem; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-stats { gap: 24px; justify-content: space-between; }
  .service-card, .contact-info-card { padding: 30px 24px; }
  .contact-form-wrap { padding: 30px 22px; }
  .cta-banner { text-align: center; }
  .cta-banner .text-lg-end { text-align: center !important; margin-top: 22px; }
  .process-step { flex-direction: column; gap: 14px; }
  .testimonial-card { padding: 30px 24px; }
  .footer-bottom {
    margin-top: 15px !important;
}

/* Small mobile */
@media (max-width: 575.98px) {
  .hero-content .eyebrow { font-size: 0.7rem; padding: 6px 14px; }
  .icon-badge { width: 58px; height: 58px; font-size: 1.3rem; }
  .stats-band .stat-num { font-size: 1.8rem; }
  .contact-info-card { flex-direction: column; text-align: center; }
  .back-to-top { width: 42px; height: 42px; bottom: 20px; right: 20px; }
}

/* Landscape phones */
@media (max-width: 900px) and (orientation: landscape) {
  .hero, .hero-carousel, .hero-carousel .carousel-inner, .hero-carousel .carousel-item { height: 100vh; }
  .page-header { padding: 130px 0 50px; }
}

/* Ensure no horizontal overflow anywhere */
html, body { max-width: 100%; overflow-x: hidden; }