/* ============================================================
   Saipooja Maha E Seva Kendra - Responsive Styles
   Breakpoints: 320, 375, 425, 768, 992, 1200, 1400, 1600
   ============================================================ */

@media (max-width: 1599.98px) {
  .hero-content h1 { font-size: 2.8rem; }
  .section-title h2 { font-size: 2rem; }
}

@media (max-width: 1399.98px) {
  .section-padding { padding: 80px 0; }
  .about-img-wrap img { height: 380px; }
}

@media (max-width: 1199.98px) {
  .hero-content h1 { font-size: 2.5rem; }
  .process-timeline::before { left: 24px; }
  .process-step,
  .process-step:nth-child(even) { flex-direction: row; padding-left: 60px; }
  .process-step .step-content { width: 100%; }
  .process-step .step-number { left: 24px; transform: translateX(-50%); }
  .cta-buttons { justify-content: center; margin-top: 1.5rem; }
}

@media (max-width: 991.98px) {
  .top-bar { font-size: 0.78rem; }
  .top-bar-item { margin-right: 0.7rem; }
  .hero-section { min-height: 70vh; background-attachment: scroll; }
  .hero-content { padding: 80px 0 70px; }
  .hero-content h1 { font-size: 2.2rem; }
  .hero-content .hero-tagline { font-size: 1.15rem; }
  .section-padding { padding: 70px 0; }
  .section-title h2 { font-size: 1.8rem; }
  .page-banner { padding: 80px 0 60px; }
  .page-banner h1 { font-size: 2rem; }
  .about-img-wrap img { height: 320px; }
  .stat-item .stat-number { font-size: 2.2rem; }
  .sticky-call-bar { display: flex; }
  .floating-buttons { bottom: 80px; }
  body { padding-bottom: 70px; }
  .navbar-collapse {
    background: var(--white);
    padding: 1rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    margin-top: 0.5rem;
  }
  .btn-nav-cta { margin: 0.5rem 0 0 !important; display: inline-flex !important; }
}

@media (max-width: 767.98px) {
  .hero-section { min-height: 62vh; }
  .hero-content h1 { font-size: 1.85rem; }
  .hero-content .hero-tagline { font-size: 1rem; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons a { width: 100%; justify-content: center; }
  .section-title h2 { font-size: 1.6rem; }
  .section-title { margin-bottom: 36px; }
  .gallery-item img { height: 220px; }
  .testimonial-card { padding: 1.5rem; }
  .contact-form-wrap { padding: 1.5rem; }
  .footer-bottom .row > div { text-align: center !important; margin-bottom: 0.5rem; }
  .newsletter-form { flex-direction: column; }
  .cta-section h2 { font-size: 1.6rem; }
  .mv-card { padding: 1.6rem; }
  .policy-content { padding: 1.5rem; }
  .brand-name { font-size: 0.95rem; }
  .brand-tag { font-size: 0.62rem; }
  .brand-icon { width: 42px; height: 42px; font-size: 0.88rem; }
  .brand-logo { height: 52px; max-width: 180px; }
}

@media (max-width: 575.98px) {
  .top-bar .container .row > div { text-align: center; }
  .top-bar-item { margin: 2px 0.5rem; justify-content: center; }
  .hero-section { min-height: 56vh; }
  .hero-content { padding: 70px 0 60px; }
  .hero-content h1 { font-size: 1.65rem; }
  .hero-badge { font-size: 0.75rem; }
  .why-card { padding: 1.5rem 1rem; }
  .service-card { padding: 1.4rem 1rem; }
  .service-card-detailed { padding: 1.5rem; }
  .about-img-wrap::before { display: none; }
  .about-img-wrap img { height: 260px; }
  .stat-item .stat-number { font-size: 1.9rem; }
  .floating-btn { width: 46px; height: 46px; font-size: 1.15rem; }
  .floating-buttons { right: 16px; bottom: 76px; }
  .category-filters button { font-size: 0.78rem; padding: 0.4rem 0.85rem; }
  .page-banner h1 { font-size: 1.7rem; }
  .wave-divider svg { height: 50px; }
  .brand-logo { height: 42px; max-width: 150px; }
  .map-wrap { min-height: 320px; }
  .map-wrap iframe { height: 320px; min-height: 320px; }
}

@media (max-width: 424.98px) {
  body { font-size: 15px; }
  .hero-content h1 { font-size: 1.5rem; }
  .section-title h2 { font-size: 1.45rem; }
  .btn-primary-custom,
  .btn-secondary-custom,
  .btn-outline-light-custom { padding: 0.65rem 1.3rem; font-size: 0.85rem; }
  .contact-info-card { padding: 1.4rem; }
  .footer-policies .sep { display: none; }
  .footer-policies a { display: inline-block; margin: 4px 8px; }
}

@media (max-width: 374.98px) {
  .hero-content h1 { font-size: 1.35rem; }
  .brand-wrap { gap: 8px; }
  .brand-icon { width: 38px; height: 38px; }
  .sticky-call-bar a { font-size: 0.8rem; padding: 0.6rem; }
}

@media (min-width: 1600px) {
  .container { max-width: 1320px; }
  .hero-content h1 { font-size: 3.2rem; }
}