/* ============================================================
   PRAMUKH UNISEX SALON — Global Responsive Overrides
   Loaded after all page CSS so these rules win without !important
   wherever specificity allows. Targets the gaps identified in the
   existing per-page stylesheets so every page collapses cleanly
   from desktop -> tablet -> mobile.
   ============================================================ */

/* ---------- Universal safety: no horizontal scroll ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* Make every container fluid on small screens */
.container, .container-fluid { width: 100%; }

/* ============================================================
   LARGE DESKTOP -> SMALL DESKTOP  ( <= 1200px )
   ============================================================ */
@media (max-width: 1200px) {
    .hero { padding: 60px 0 !important; }
    .hero-text h2 { font-size: 44px !important; line-height: 1.2 !important; }
    .page-header { padding: 120px 0 60px !important; }
    .page-header h1 { font-size: 42px !important; }
    .hero-content,
    .about-content { gap: 40px !important; }
}

/* ============================================================
   TABLET LANDSCAPE  ( <= 992px )
   ============================================================ */
@media (max-width: 992px) {
    /* Headings scale */
    .hero-text h2 { font-size: 36px !important; }
    .page-header { padding: 100px 0 50px !important; }
    .page-header h1 { font-size: 36px !important; }
    .section-title, h2.section-title { font-size: 28px !important; }

    /* Hero collapses to a single column earlier */
    .hero-content { grid-template-columns: 1fr !important; text-align: center; }
    .hero-image { margin: 0 auto; }

    /* About / 2-col content blocks collapse */
    .about-content { grid-template-columns: 1fr !important; }

    /* Services page: sidebar stacks on top */
    .services-container { flex-direction: column !important; }
    .services-sidebar { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }

    /* Grids tighten to two columns */
    .services-grid,
    .pricing-grid,
    .gallery-grid,
    .blog-container,
    .goal-grid,
    .team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }

    /* Contact page row stacks */
    .contact-row { flex-direction: column !important; }
    .contact-row > * { width: 100% !important; flex: 1 1 100% !important; }

    /* Logo a touch smaller */
    .companyLogo { height: 56px !important; width: auto !important; }
}

/* ============================================================
   TABLET PORTRAIT  ( <= 768px )
   ============================================================ */
@media (max-width: 768px) {
    body { font-size: 15px; }

    .hero { padding: 40px 0 !important; }
    .hero-text h2 { font-size: 30px !important; }
    .hero-text p { font-size: 15px !important; }

    .page-header { padding: 90px 0 40px !important; text-align: center; }
    .page-header h1 { font-size: 30px !important; }
    .section-title, h2.section-title { font-size: 24px !important; }

    /* All multi-column grids collapse */
    .services-grid,
    .pricing-grid,
    .gallery-grid,
    .blog-container,
    .goal-grid,
    .team-grid,
    .footerContact .row,
    .row { gap: 20px !important; }

    .services-grid,
    .pricing-grid,
    .gallery-grid,
    .blog-container,
    .goal-grid,
    .team-grid { grid-template-columns: 1fr !important; }

    /* Footer columns stack and breathe */
    footer .col-md-3,
    footer .col-sm-4 { margin-bottom: 30px; }
    .footerDetailsTitle { font-size: 18px !important; }
    .footerDescription { font-size: 14px !important; }

    /* Buttons full width on mobile for tap targets */
    .btn-primary, .btnTheme, .submit-btn { width: 100%; max-width: 320px; }

    /* Cards / images */
    .service-card, .blog-card, .team-card, .gallery-item,
    .pricing-card, .goal-card { padding: 20px !important; }

    /* Tables become scrollable */
    table { display: block; overflow-x: auto; white-space: nowrap; }

    /* Reduce big section paddings */
    section { padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* ============================================================
   MOBILE  ( <= 576px )
   ============================================================ */
@media (max-width: 576px) {
    .hero-text h2 { font-size: 24px !important; }
    .page-header h1 { font-size: 26px !important; }
    .section-title, h2.section-title { font-size: 20px !important; }

    .container { padding-left: 16px !important; padding-right: 16px !important; }

    /* Navbar logo + toggle balance */
    .companyLogo { height: 48px !important; }

    /* Footer social icons stay centered & wrap */
    .footerContact .d-flex.gap-2 { flex-wrap: wrap; }
    .socialIconsBack { width: 38px; height: 38px; }

    /* Scroll-to-top stays out of the way */
    #scrollToTop { width: 40px !important; height: 40px !important; right: 16px !important; bottom: 16px !important; }

    /* Cards & forms */
    .service-card, .blog-card, .team-card, .pricing-card { padding: 16px !important; }
    input, textarea, select { font-size: 16px !important; } /* prevents iOS zoom */
}

/* ============================================================
   EXTRA SMALL  ( <= 380px )
   ============================================================ */
@media (max-width: 380px) {
    .hero-text h2 { font-size: 22px !important; }
    .page-header h1 { font-size: 22px !important; }
    body { font-size: 14px; }
}