/* ==========================================================================
   Swosti Powercon — Responsive Stylesheet
   Ensures perfect layout from 320px through 1920px+
   ========================================================================== */

/* Extra small phones (< 380px) */
@media (max-width: 380px) {
  .site-navbar {
  padding-right: 35px;
}

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

  .hero-stats {
    gap: 1.25rem;
  }

  .navbar-brand-logo {
    font-size: 1.05rem;
  }

  .calculator-card .calc-visual {
    padding: 1.5rem;
  }
}

/* Small phones */
@media (max-width: 575.98px) {
   .site-navbar {
  padding-right: 35px;
}
  .section-padding {
    padding-block: 3rem;
  }

  .hero-section {
    text-align: center;
  }

  .hero-content .d-flex.gap-3 {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
    text-align: center;
  }

  .premium-card,
  .service-card .service-card-body {
    padding: 1.6rem 1.3rem;
  }

  .cta-band {
    text-align: center;
  }

  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }

  .client-track {
    gap: 2rem;
  }
}

/* Phones / small tablets */
@media (max-width: 767.98px) {
  .page-hero {
    text-align: center;
  }

  .process-step {
    margin-bottom: 2rem;
  }

  .testimonial-quote {
    min-height: auto;
  }

  .site-navbar .container {
    padding-inline: 1rem;
  }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-title {
    font-size: 3rem;
  }

  .gallery-masonry {
    column-count: 2;
  }
}

/* Small laptops */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-title {
    font-size: 3.6rem;
  }
}

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

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

/* Ultra-wide */
@media (min-width: 1920px) {
  .container,
  .container-lg,
  .container-xl {
    max-width: 1440px;
  }
}

/* Landscape short-height phones */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-section {
    min-height: auto;
    padding-block: 7rem 3rem;
  }
}

/* Prevent any horizontal scroll caused by decorative shapes */
.hero-shape {
  max-width: 100%;
}

@media (max-width: 991.98px) {
  .hero-shape.shape-2 {
    right: -40px;
  }
}