/* =============================================================================
   SERVICES PAGES — Mobile Responsive CSS  v2.0  (cache-bust: 20260508-1132)
   Applies to: /services/* pages (nadi_pariksha, video_consultation,
   photo_diagnosis, custom_medicine, follow_up_care)
   Breakpoint: < 640px (mobile) | < 390px (small phones)
   ============================================================================= */


@media (max-width: 639px) {

    /* ══════════════════════════════════════════════
       1. HERO SECTION — All service pages
    ══════════════════════════════════════════════ */

    /* Compact hero height */
    section.relative.min-h-\\[92vh\\] {
        min-height: auto !important;
        padding-top: 5rem !important;
        padding-bottom: 2rem !important;
    }

    /* Hero top padding inner — must clear fixed header (h-20 = 80px = 5rem) */
    .max-w-7xl.mx-auto.relative.pt-32 {
        padding-top: 5.5rem !important;
        padding-bottom: 1.75rem !important;
    }

    /* Hero grid → single column */
    .max-w-7xl .grid.lg\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Hide decorative right-side visuals (wrist, finger anim, etc.) on mobile */
    .max-w-7xl .grid.lg\\:grid-cols-2>div:last-child:not(:only-child) {
        display: none !important;
    }

    /* Hero H1 */
    section h1.text-5xl,
    section h1.text-6xl,
    section h1.text-7xl {
        font-size: 2rem !important;
        line-height: 1.15 !important;
        margin-bottom: 0.5rem !important;
    }

    /* Hero subtitle */
    section p.text-2xl {
        font-size: 1rem !important;
        margin-bottom: 0.25rem !important;
    }

    section p.text-xl,
    section p.text-lg.leading-relaxed {
        font-size: 0.82rem !important;
        line-height: 1.55 !important;
        margin-bottom: 0.75rem !important;
    }

    /* Hero badge */
    section .inline-flex.gap-2.px-4.py-2.rounded-full {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Trust row (stats icons) */
    .flex.flex-wrap.gap-6.mb-10 {
        gap: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        flex-wrap: wrap !important;
    }

    .flex.flex-wrap.gap-6.mb-10 .w-10 {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 0.85rem !important;
    }

    .flex.flex-wrap.gap-6.mb-10 p.font-bold {
        font-size: 0.78rem !important;
    }

    .flex.flex-wrap.gap-6.mb-10 p.text-xs {
        font-size: 0.62rem !important;
    }

    /* Hero CTA buttons */
    .flex.flex-wrap.gap-4>a {
        padding: 0.6rem 1.1rem !important;
        font-size: 0.82rem !important;
        border-radius: 999px !important;
    }

    .flex.flex-wrap.gap-4>a svg {
        width: 0.85rem !important;
        height: 0.85rem !important;
    }


    /* ══════════════════════════════════════════════
       2. SECTION PADDING — Global
    ══════════════════════════════════════════════ */
    section.py-24 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    section.py-20 {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
    }

    section.py-16 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .max-w-6xl.mx-auto.px-6,
    .max-w-7xl.mx-auto.px-6,
    .max-w-4xl.mx-auto.px-6,
    .max-w-2xl.mx-auto.px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }


    /* ══════════════════════════════════════════════
       3. SECTION HEADINGS
    ══════════════════════════════════════════════ */
    section h2.text-4xl,
    section h2.text-5xl,
    section h2.text-3xl {
        font-size: 1.35rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.5rem !important;
    }

    section h3.text-2xl,
    section h3.text-xl {
        font-size: 1rem !important;
        line-height: 1.25 !important;
    }

    section h4 {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
    }

    .text-center.mb-14 {
        margin-bottom: 1rem !important;
    }

    .text-center.mb-12 {
        margin-bottom: 0.75rem !important;
    }

    .text-center.mb-10 {
        margin-bottom: 0.75rem !important;
    }

    section p.font-hindi,
    section p.text-sm {
        font-size: 0.78rem !important;
        line-height: 1.55 !important;
    }

    section span.text-sm {
        font-size: 0.72rem !important;
    }


    /* ══════════════════════════════════════════════
       4. INFO / STATS BOXES — 2 col grid
    ══════════════════════════════════════════════ */
    /* "What is Nadi Pariksha" stat boxes — already 2-col, keep compact */
    .grid.grid-cols-2.gap-4 .col-span-2 {
        padding: 1rem !important;
    }

    .grid.grid-cols-2.gap-4 .col-span-2 h3 {
        font-size: 0.9rem !important;
    }

    .grid.grid-cols-2.gap-4 .col-span-2 p {
        font-size: 0.72rem !important;
    }

    .grid.grid-cols-2.gap-4 .col-span-2 .text-4xl {
        font-size: 1.5rem !important;
        margin-bottom: 0.35rem !important;
    }

    .grid.grid-cols-2.gap-4>div:not(.col-span-2) {
        padding: 0.75rem !important;
    }

    .grid.grid-cols-2.gap-4 p.text-3xl {
        font-size: 1.4rem !important;
    }

    .grid.grid-cols-2.gap-4 p.text-sm {
        font-size: 0.65rem !important;
    }


    /* ══════════════════════════════════════════════
       5. DOSHA CARDS / FEATURE CARDS — 2 col on mobile
    ══════════════════════════════════════════════ */

    /* md:grid-cols-3 → 2-col on mobile */
    .grid.md\\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
    }

    .dosha-card {
        padding: 0.85rem !important;
        border-radius: 16px !important;
        transform: none !important;
        /* remove translateY(-12px) on pitta card */
    }

    .dosha-card .w-16 {
        width: 2.25rem !important;
        height: 2.25rem !important;
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 10px !important;
    }

    .dosha-card h3 {
        font-size: 0.88rem !important;
        margin-bottom: 0.35rem !important;
    }

    .dosha-card p.text-sm {
        font-size: 0.68rem !important;
        margin-bottom: 0.4rem !important;
    }

    .dosha-card .text-xs {
        font-size: 0.55rem !important;
    }

    .dosha-card .flex.flex-wrap.gap-1\\.5 span {
        font-size: 0.55rem !important;
        padding: 0.15rem 0.4rem !important;
    }

    .dosha-card svg.h-8 {
        height: 1.25rem !important;
        margin-top: 0.35rem !important;
    }

    /* Pitta badge */
    .dosha-card .absolute.top-4.right-4 {
        font-size: 0.55rem !important;
        padding: 0.1rem 0.35rem !important;
    }


    /* ══════════════════════════════════════════════
       6. REVEALS / INFO GRID — lg:grid-cols-4 → 2-col
       Exclude footer from this rule
    ══════════════════════════════════════════════ */
    :not(footer)>[class*="lg:grid-cols-4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    :not(footer)>[class*="lg:grid-cols-4"]>div {
        padding: 0.75rem 0.6rem !important;
        border-radius: 14px !important;
    }

    :not(footer)>[class*="lg:grid-cols-4"] .text-3xl {
        font-size: 1.5rem !important;
        margin-bottom: 0.35rem !important;
    }

    :not(footer)>[class*="lg:grid-cols-4"] h4 {
        font-size: 0.75rem !important;
        margin-bottom: 0.2rem !important;
    }

    :not(footer)>[class*="lg:grid-cols-4"] p.text-xs {
        font-size: 0.62rem !important;
    }


    /* ══════════════════════════════════════════════
       7. PROCESS TIMELINE — compact
    ══════════════════════════════════════════════ */
    .space-y-8>.flex.gap-6.items-start {
        gap: 0.6rem !important;
    }

    /* Step icon */
    .step-dot,
    .flex.gap-6.items-start .w-14.h-14 {
        width: 2.5rem !important;
        height: 2.5rem !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }

    /* Step card */
    .flex.gap-6.items-start .bg-white\\/10 {
        padding: 0.65rem 0.75rem !important;
        border-radius: 14px !important;
    }

    .flex.gap-6.items-start span.text-xs {
        font-size: 0.6rem !important;
    }

    .flex.gap-6.items-start h4 {
        font-size: 0.82rem !important;
        margin-bottom: 0.15rem !important;
    }

    .flex.gap-6.items-start p.text-sm {
        font-size: 0.7rem !important;
    }


    /* ══════════════════════════════════════════════
       8. BOOKING FORM
    ══════════════════════════════════════════════ */
    form.space-y-5.rounded-3xl {
        padding: 1rem !important;
        border-radius: 16px !important;
    }

    /* Name + Phone grid already sm:grid-cols-2, keep 1-col on mobile */
    form .grid.sm\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
    }

    form label {
        font-size: 0.72rem !important;
        margin-bottom: 0.25rem !important;
    }

    form input,
    form textarea,
    form select {
        font-size: 0.82rem !important;
        padding: 0.6rem 0.85rem !important;
        border-radius: 10px !important;
    }

    /* Time slot grid */
    form .grid.grid-cols-3 {
        gap: 0.4rem !important;
    }

    form .grid.grid-cols-3 .p-3 {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.65rem !important;
        border-radius: 10px !important;
    }

    /* Submit button */
    form button[type="submit"] {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
        border-radius: 14px !important;
    }


    /* ══════════════════════════════════════════════
       9. TESTIMONIALS — 1 col (scroll) on mobile
    ══════════════════════════════════════════════ */
    .grid.md\\:grid-cols-3.gap-6,
    .grid.md\\:grid-cols-2.gap-6,
    .grid.sm\\:grid-cols-3.gap-6 {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    /* Testimonial cards */
    .bg-white.rounded-3xl.p-6 {
        padding: 0.9rem !important;
        border-radius: 16px !important;
    }

    .bg-white.rounded-3xl p.text-sm {
        font-size: 0.72rem !important;
        line-height: 1.5 !important;
    }

    .bg-white.rounded-3xl p.font-semibold {
        font-size: 0.75rem !important;
    }


    /* ══════════════════════════════════════════════
       10. CTA BOTTOM SECTION
    ══════════════════════════════════════════════ */
    .text-center .text-5xl {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }

    .text-center h2.text-3xl {
        font-size: 1.25rem !important;
    }

    .text-center p.font-hindi {
        font-size: 0.78rem !important;
        margin-bottom: 0.75rem !important;
    }

    .text-center a.px-10 {
        padding: 0.65rem 1.5rem !important;
        font-size: 0.85rem !important;
        border-radius: 999px !important;
    }


    /* ══════════════════════════════════════════════
       11. WHAT IS / EXPLANATION SECTION — 2-col stacked
    ══════════════════════════════════════════════ */
    .grid.lg\\:grid-cols-2.gap-16 {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Bullet list items */
    .space-y-3 .flex.items-start.gap-3 p,
    .space-y-4 .flex.items-start.gap-3 p {
        font-size: 0.75rem !important;
        line-height: 1.5 !important;
    }

    .space-y-3 .w-6,
    .space-y-4 .w-6 {
        width: 1.25rem !important;
        height: 1.25rem !important;
        font-size: 0.7rem !important;
        flex-shrink: 0;
    }


    /* ══════════════════════════════════════════════
       12. FEATURE PILLS / TAGS
    ══════════════════════════════════════════════ */
    .inline-block.px-4.py-1.rounded-full {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.65rem !important;
        margin-bottom: 0.5rem !important;
    }


    /* ══════════════════════════════════════════════
       13. SERVICE-SPECIFIC: nadi_pariksha WHAT REVEALS
           4-col grid → 2-col
    ══════════════════════════════════════════════ */
    #book-nadi+section .grid,
    .grid.sm\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }


    /* ══════════════════════════════════════════════
       14. FEAT-CARDS (हर कदम पर आपकी सुविधा)
           sm/md/lg grids → 2-col  (footer excluded)
    ══════════════════════════════════════════════ */
    :not(footer)>[class*="lg:grid-cols-3"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.55rem !important;
    }

    /* feat-card compact for 2-col */
    .feat-card {
        padding: 0.85rem 0.75rem !important;
        border-radius: 14px !important;
    }

    .feat-card .feat-icon,
    .feat-card .w-12.h-12 {
        width: 2.25rem !important;
        height: 2.25rem !important;
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 10px !important;
    }

    .feat-card h4 {
        font-size: 0.78rem !important;
        margin-bottom: 0.2rem !important;
        line-height: 1.25 !important;
    }

    .feat-card p {
        font-size: 0.68rem !important;
        line-height: 1.45 !important;
    }


    /* ══════════════════════════════════════════════
       15. HOW IT WORKS — md:grid-cols-4 → 2-col
    ══════════════════════════════════════════════ */
    :not(footer)>[class*="md:grid-cols-4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    :not(footer)>[class*="md:grid-cols-4"] .w-20.h-20 {
        width: 3rem !important;
        height: 3rem !important;
        font-size: 1.2rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 10px !important;
    }

    :not(footer)>[class*="md:grid-cols-4"] .w-7.h-7 {
        width: 1.25rem !important;
        height: 1.25rem !important;
        font-size: 0.6rem !important;
        margin-top: -0.5rem !important;
        margin-bottom: 0.35rem !important;
    }

    :not(footer)>[class*="md:grid-cols-4"] h4 {
        font-size: 0.78rem !important;
        margin-bottom: 0.2rem !important;
    }

    :not(footer)>[class*="md:grid-cols-4"] p {
        font-size: 0.65rem !important;
        line-height: 1.45 !important;
    }


    /* ══════════════════════════════════════════════
       16. VAIDYA CARDS — sm:grid-cols-2 lg:grid-cols-3 → 2-col
    ══════════════════════════════════════════════ */
    /* video-card compact */
    .video-card {
        padding: 0.85rem !important;
        border-radius: 16px !important;
    }

    .video-card .w-16.h-16 {
        width: 2.5rem !important;
        height: 2.5rem !important;
        font-size: 1.2rem !important;
        border-radius: 10px !important;
        flex-shrink: 0;
    }

    .video-card h4 {
        font-size: 0.8rem !important;
    }

    .video-card p.text-xs {
        font-size: 0.6rem !important;
    }

    .video-card .flex.flex-wrap.gap-1\\.5 span,
    .video-card .flex.flex-wrap.gap-1\\.5 span {
        font-size: 0.55rem !important;
        padding: 0.1rem 0.35rem !important;
    }

    .video-card .flex.items-center.justify-between p.text-sm {
        font-size: 0.72rem !important;
    }

    .video-card .flex.items-center.justify-between a {
        font-size: 0.62rem !important;
        padding: 0.25rem 0.6rem !important;
    }

    .video-card .flex.items-start.gap-4 {
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }


    /* ══════════════════════════════════════════════
       17. TESTIMONIALS + GRIDS — 2-col  (footer excluded)
    ══════════════════════════════════════════════ */
    :not(footer)>[class*="md:grid-cols-3"],
    :not(footer)>[class*="md:grid-cols-2"],
    :not(footer)>[class*="sm:grid-cols-2"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.55rem !important;
    }

    :not(footer)>[class*="md:grid-cols-3"]>div,
    :not(footer)>[class*="md:grid-cols-2"]>div {
        padding: 0.35rem !important;
        border-radius: 14px !important;
    }

    :not(footer)>[class*="md:grid-cols-3"] p.text-sm {
        font-size: 0.7rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.5rem !important;
    }

    :not(footer)>[class*="md:grid-cols-3"] p.font-semibold {
        font-size: 0.72rem !important;
    }

    :not(footer)>[class*="md:grid-cols-3"] p.text-xs {
        font-size: 0.58rem !important;
    }

    :not(footer)>[class*="md:grid-cols-3"] .w-10.h-10 {
        width: 1.75rem !important;
        height: 1.75rem !important;
        font-size: 0.75rem !important;
    }

    .flex.gap-1.text-ayur-gold {
        font-size: 0.7rem !important;
        margin-bottom: 0.35rem !important;
    }


    /* ══════════════════════════════════════════════
       FOOTER — Mobile layout fix
       Stack all 4 columns into a clean 2-col grid
    ══════════════════════════════════════════════ */
    footer {
        padding-top: 2.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Footer main grid — 2-col: Brand+Contact | Links+Services */
    footer [class*="lg:grid-cols-4"] {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    footer h3.text-lg {
        font-size: 0.9rem !important;
        margin-bottom: 0.6rem !important;
    }

    footer ul.space-y-2 li a {
        font-size: 0.78rem !important;
    }

    footer p.text-sm {
        font-size: 0.75rem !important;
        line-height: 1.55 !important;
    }

    /* Social icons compact */
    footer .w-9.h-9 {
        width: 2rem !important;
        height: 2rem !important;
    }

    /* Brand name */
    footer .text-xl {
        font-size: 1rem !important;
    }

    /* Contact items */
    footer .space-y-3 a,
    footer .space-y-3 span {
        font-size: 0.72rem !important;
    }

    /* Notification button */
    footer button {
        font-size: 0.72rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* Bottom bar */
    footer .border-t.pt-8 {
        padding-top: 1rem !important;
        gap: 0.5rem !important;
    }

    footer .flex.gap-6.text-sm a {
        font-size: 0.68rem !important;
    }

    footer .flex.gap-6.text-sm {
        gap: 0.75rem !important;
    }

}



/* ══════════════════════════════════════════════
   Very small phones ≤ 390px
══════════════════════════════════════════════ */
@media (max-width: 390px) {

    section h1.text-5xl,
    section h1.text-6xl,
    section h1.text-7xl {
        font-size: 1.65rem !important;
    }

    section h2.text-4xl,
    section h2.text-3xl {
        font-size: 1.15rem !important;
    }

    /* Dosha cards — 1-col on very small screens */
    [class*="md:grid-cols-3"] {
        grid-template-columns: 1fr !important;
    }

    /* Reveals grid → 2 col still ok */
    [class*="lg:grid-cols-4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    form button[type="submit"] {
        font-size: 0.82rem !important;
    }
}