/* ===== Scaled-up stylesheet (all major elements ~1 scale bigger) ===== */

        /*:root {*/
        /*    --yellow: #ffef6a;*/
        /*    --teal: #17b2a3;*/
        /*    --teal-strong: #13967f;*/
        /*    --navy: #1f3b48;*/
        /*    --deep: #0f2a30;*/
        /*    --muted: #6c7a7f;*/
        /*    --accent: #f6e05e;*/
        /*    --white: #ffffff;*/
        /*    --card-shadow: 0 16px 40px rgba(7, 22, 25, 0.22);*/
        /*    --footer-bottom-blue: #3b5cff;*/
        /*}*/

        /** {*/
        /*    box-sizing: border-box;*/
        /*}*/

        /*html,*/
        /*body {*/
        /*    height: 100%;*/
        /*    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;*/
        /*    margin: 0;*/
        /*    color: #113;*/
        /*    line-height: 1.55;*/
        /*    background: #fff;*/
        /*    font-size: 19px;*/
            /* base increased */
        /*}*/

        /* Top thin bar */
        .thin-top {
            height: 40px;
            /* slightly taller to fit icons comfortably */
            background: var(--yellow);
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
            display: flex;
            align-items: center;
            font-size: 0;
            /* remove inline gaps */
        }

        .thin-top-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0;
        }

        /* left side placeholder (keeps spacing if you want text later) */
        .thin-top-left {
            flex: 1;
        }

        /* right side icons */
        .thin-top-right {
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: flex-end;
            flex: 0 0 auto;
        }

        /* Individual icon link */
        .ticon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 24px;
            border-radius: 6px;
            text-decoration: none;
            background: #11119626;
            transition: transform .12s ease, background .12s ease;
            padding: 4px;
            box-sizing: border-box;
        }

        /* icon hover/focus — invert to dark background with yellow icon for visible contrast */
        .ticon:hover,
        .ticon:focus {
            transform: translateY(-2px);
            background: rgba(0, 0, 0, 0.08);
            outline: none;
        }

        /* SVGs sized and styled */
        .ticon svg {
            display: block;
            width: 18px;
            height: 18px;
        }

        header {
            background: var(--white);
            border-bottom: 1px solid rgba(18, 46, 55, 0.04);
        }

        /*.container {*/
        /*    max-width: 1180px;*/
        /*    margin: 0 auto;*/
        /*    padding: 0 22px;*/
        /*}*/

        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 0;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 16px;
        }

       

        .logo .brand {
            font-weight: 800;
            color: var(--teal);
            letter-spacing: 0.6px;
            font-size: 24px;
        }

        .logo-footer img {
            height: 32px;
        }

        /* NAVIGATION + DROPDOWN */
        nav {
            position: relative;
        }

        .nav-list {
            display: flex;
            gap: 30px;
            list-style: none;
            padding: 0;
            margin: 0;
            align-items: center;
        }

        .nav-list a,
        .nav-list button {
            color: var(--deep);
            text-decoration: none;
            font-weight: 500;
            font-size: 18px;
            background: none;
            border: none;
            cursor: pointer;
        }

        .nav-list a:hover,
        .nav-list button:hover {
            color: var(--teal-strong);
        }

        /* dropdown container */
        .dropdown {
            position: relative;
        }

        .dropdown-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .dropdown-menu {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 260px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 12px 36px rgba(7, 22, 25, 0.12);
            padding: 10px 6px;
            display: none;
            z-index: 50;
        }

        .dropdown-menu a {
            display: block;
            padding: 10px 14px;
            font-size: 16px;
            color: #1b2b2b;
            text-decoration: none;
            border-radius: 6px;
        }

        .dropdown-menu a:hover {
            background: rgba(20, 160, 145, 0.06);
            color: var(--teal-strong);
        }

        /* show menu when .open class applied (desktop) */
        .dropdown.open .dropdown-menu {
            display: block;
        }

        .socials {
            display: flex;
            gap: 12px;
            font-weight: 600;
            color: #2b2b2b;
            font-size: 18px;
        }

        /* Mobile nav toggle */
        .nav-toggle {
            display: none;
            font-size: 22px;
            padding: 8px 12px;
            background: rgba(0, 0, 0, 0.02);
            border-radius: 8px;
            cursor: pointer;
        }

        /* HERO */
        .hero {
            height: 560px;
            background-image: url('../asset/home/best-luxury-rehab-center-in-delhi.webp');
            background-size: cover;
            background-position: center top;
            position: relative;
            display: flex;
            align-items: center;
        }

        .hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(15, 30, 34, 0.35), rgba(15, 30, 34, 0.25));
        }

        .hero-inner {
            position: relative;
            z-index: 2;
            padding: 110px 22px;
            color: var(--white);
            width: 100%;
            text-align: center;
            /* Added line */
        }

        .hero .eyebrow {
            font-weight: 700;
            color: rgba(255, 255, 255, 0.92);
            text-transform: uppercase;
            font-size: 16px;
            letter-spacing: 1px;
            margin-bottom: 16px;
        }

        .hero h2 {
            font-size: 48px!important;
            line-height: 1.1;
            margin: 0 0 12px;
            font-weight: 600;
            text-shadow: 0 8px 36px rgba(0, 0, 0, 0.34);
        }

        .hero p {
            margin: 0;
            font-size: 22px;
            color: rgba(255, 255, 255, 0.92);
        }

        

        /* Teal intro panel */
        .teal {
            background: var(--teal);
            color: var(--white);
            padding: 50px 0;
        }

        .teal .grid {
            display: grid;
            grid-template-columns: 520px 1fr;
            gap: 40px;
            align-items: center;
        }

        .teal .photo {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
        }

        .teal .photo img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

        .teal .card {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
            padding: 34px;
            border-radius: 8px;
        }

        .teal h2 {
            margin: 0 0 10px;
            font-size: 26px;
        }

        .teal p {
            color: rgba(255, 255, 255, 0.95);
            margin-bottom: 14px;
            font-size: 16px;
            text-align: justify;
        }

        .btn {
            display: inline-block;
            padding: 14px 24px;
            border-radius: 8px;
            border: none;
            background: var(--white);
            color: var(--teal);
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 8px 26px rgba(12, 40, 36, 0.12);
            font-size: 18px;
        }

        /* ===== Benefits section using provided PNG icons ===== */
        .benefits-wrapper {
            text-align: center;
            padding: 60px 0;
        }

        .benefits-title {
            font-size: 32px;
            color: var(--teal);
            margin-bottom: 10px;
            font-weight: 700;
        }

        .benefits-sub {
            color: var(--muted);
            font-size: 20px;
            margin-bottom: 40px;
        }

        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 50px 28px;
            max-width: 1180px;
            margin: 0 auto;
            align-items: start;
        }

        .benefit-box {
            text-align: center;
            padding: 6px 10px;
        }

        .b-icon {
            width: 72px;
            height: 72px;
            object-fit: contain;
            display: inline-block;
            margin-bottom: 18px;
        }

        .benefit-box h4 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #102C34;
        }

        .benefit-box p {
            font-size: 16px;
            color: var(--muted);
            max-width: 260px;
            margin: 0 auto;
            line-height: 1.45;
        }

        /* Dark intro */
        .dark {
            background: var(--navy);
            color: var(--white);
            padding: 60px 0;
        }

        .dark .grid {
            display: grid;
            grid-template-columns: 520px 1fr;
            gap: 40px;
            align-items: center;
        }

        .dark h2 {
            color: var(--accent);
            margin: 0 0 10px;
            font-size: 30px;
        }

        .dark p {
            color: rgba(255, 255, 255, 0.88);
            font-size: 16px;
            text-align: justify;
        }

        /* Team */
        .team {
            padding: 20px 0;
        }

        .team-inner {
            display: flex;
            gap: 28px;
            align-items: center;
        }

        .profile {
            width: 50%;
            height: auto;
            overflow: hidden;
            border: 12px solid #fff;

        }

        .team .txt {
            width: 50%;
        }

        .team .txt h3 {
            color: var(--teal);
            margin: 0 0 12px;
            font-size: 28px;
        }

        .team .txt p {
            font-size: 16px;
            text-align: justify;
        }

        /* Gallery (original basic) - will be replaced by the replica below */
        .gallery {
            background: var(--teal);
            color: var(--white);
            padding: 50px 0;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            max-width: 1180px;
            margin: 22px auto;
        }

        .gallery-grid img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }

        /* Blogs */
        .blogs {
            background: var(--navy);
            color: var(--white);
            padding: 70px 0;
        }

        .blog-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            max-width: 1180px;
            margin: 26px auto;
        }

        .blog {
            background: #fff;
            color: #1b2b2b;
            padding: 18px;
            border-radius: 8px;
            box-shadow: 0 12px 36px rgba(7, 22, 25, 0.08);
        }

        .blog img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 6px;
        }

        .blog h4 {
            margin: 10px 0 6px;
            font-size: 20px;
        }

        .blog p {
            font-size: 15px;
            color: #666;
            text-align: justify;
        }

        /* Contact */
        .contact {
            padding: 60px 0;
        }

        form {
            max-width: 780px;
            margin: 14px auto;
            background: #fff;
            padding: 32px;
            border-radius: 10px;
            box-shadow: 0 22px 48px rgba(7, 22, 25, 0.08);
        }

        .form-row {
            display: flex;
            gap: 14px;
            margin-bottom: 14px;
        }

        .form-row input,
        textarea {
            flex: 1;
            padding: 16px;
            border: 1px solid #e6eef0;
            border-radius: 8px;
            font-size: 18px;
        }

        .form-row textarea {
            min-height: 170px;
        }

        .submit-row {
            text-align: right;
        }

        .btn-primary {
            background: var(--teal-strong);
            color: #fff;
            border-radius: 10px;
            padding: 14px 26px;
            border: none;
            font-weight: 600;
            cursor: pointer;
            font-size: 18px;
        }

        /* Footer */
        footer {
            background: #213648;
            color: #cfe6e6;
            padding: 60px 0 86px;
            /* extra bottom space so footer-bottom doesn't overlap */
            margin-top: 18px;
        }

        footer .col {
            flex: 1;
        }

        footer .col p,
        footer li {
            font-size: 16px;
        }

        /* Footer-bottom bar (screenshot replica) */
        .footer-bottom {
            background: var(--yellow);
            padding: 14px 0;
            position: relative;
            box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04);
        }

        .footer-bottom .container {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            gap: 12px;
        }

        .footer-bottom .copyright {
            font-family: 'Georgia', serif;
            color: #0f2a30;
            font-size: 18px;
            text-align: center;
        }

        .book-appointment {
            position: absolute;
            right: 22px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--footer-bottom-blue);
            color: #fff;
            padding: 10px 16px;
            border-radius: 8px;
            font-weight: 700;
            text-decoration: none;
            box-shadow: 0 8px 28px rgba(59, 92, 255, 0.18);
        }

        /* mobile: stack the button under the text and center everything */
        @media (max-width: 700px) {
            .footer-bottom .container {
                flex-direction: column;
                padding: 6px 22px;
            }

            .book-appointment {
                position: static;
                transform: none;
                margin-top: 8px;
            }

            footer {
                padding-bottom: 48px;
            }
        }

        /* Utilities */
        .mb-12 {
            margin-bottom: 12px;
        }

        .center {
            text-align: center;
        }

        /* Responsive adjustments for many sections */
        @media (max-width: 1100px) {
            .teal .grid,
            .dark .grid {
                grid-template-columns: 1fr;
            }

            .hero {
                height: 500px;
            }

            .benefits-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .blog-list {
                grid-template-columns: repeat(2, 1fr);
            }

            /* mobile: show nav toggle and stacked nav */
            .nav-toggle {
                display: inline-flex;
                align-items: center;
                gap: 8px;
            }

            .nav-list {
                position: absolute;
                top: calc(100% + 10px);
                right: 22px;
                background: #fff;
                box-shadow: 0 10px 42px rgba(7, 22, 25, 0.12);
                border-radius: 10px;
                padding: 12px;
                flex-direction: column;
                gap: 6px;
                display: none;
                width: 220px;
            }

            .nav-list.show {
                display: flex;
            }

            .nav-list a,
            .nav-list button {
                font-size: 16px;
            }

            /* make dropdown menu inline in mobile (expandable) */
            .dropdown-menu {
                position: relative;
                top: 0;
                left: 0;
                box-shadow: none;
                background: transparent;
                padding: 0;
                display: none;
            }

            .dropdown.open .dropdown-menu {
                display: block;
            }

        }

        @media (max-width: 600px) {
            .hero h2 {
                font-size: 36px!important;
            }

            .benefits-grid {
                grid-template-columns: 1fr;
            }

            .profile {
                width: 200px;
                height: 200px;
            }

            .container {
                padding: 0 14px;
            }

            .b-icon {
                width: 64px;
                height: 64px;
            }

            .benefits-title {
                font-size: 26px;
            }

            .benefits-sub {
                font-size: 18px;
            }
        }

        /* ---- Gallery / Nature's Touch panel (screenshot replica) ---- */
        .gallery {
            background: var(--teal);
            color: var(--white);
            padding: 40px 0;
            position: relative;
            overflow: hidden;
        }

        /* overall layout: left and right 50% each */
        .gallery-inner {
            max-width: 1180px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 50% 50%;
            /* BOTH SIDES 50% */
            gap: 28px;
            align-items: center;
            padding: 18px;
        }

        /* left copy block */
        .gallery-copy {
            padding: 36px 36px 36px 36px;
            min-height: 320px;
        }

        .gallery-copy h2 {
            margin: 0 0 10px 0;
            font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
            font-weight: 600;
            color: var(--yellow);
            font-size: 48px;
            /* big headline to match screenshot */
            line-height: 0.98;
            letter-spacing: -1px;
        }

        /* short supporting paragraph */
        .gallery-copy p {
           margin-top: 20px;
    max-width: 420px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.95);
    text-align: justify;
    hyphens: auto;
    word-spacing: normal;
            
        }

        /* right image grid 2x2
       (heights and animations retained) */
        .gallery-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 180px;
            /* current height from previous update */
            gap: 14px;
            align-items: stretch;
        }

        /* make images fill their cell and have subtle white border like screenshot */
        .gallery-grid .item {
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 28px rgba(3, 20, 20, 0.18);
            opacity: 0;
            transform: translateY(8px);
            /* entrance animation will set to visible */
            animation: fadeInUp 560ms ease forwards;
        }

        /* Staggered delays for the four items to create a nice entrance flow */
        .gallery-grid .item:nth-child(1) {
            animation-delay: 0.06s;
        }

        .gallery-grid .item:nth-child(2) {
            animation-delay: 0.14s;
        }

        .gallery-grid .item:nth-child(3) {
            animation-delay: 0.22s;
        }

        .gallery-grid .item:nth-child(4) {
            animation-delay: 0.30s;
        }

        .gallery-grid img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            /* floating animation retained */
            animation: float 6s ease-in-out infinite;
            will-change: transform;
        }

        /* remove overlay/plus hover effect visually (keep markup) */
        .gallery-grid .overlay {
            display: none;
        }

        /* Lightbox (simple) */
        .lightbox {
            position: fixed;
            inset: 0;
            background: rgba(2, 6, 8, 0.78);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            padding: 30px;
        }

        .lightbox.open {
            display: flex;
        }

        .lightbox img {
            max-width: 92%;
            max-height: 88%;
            border-radius: 6px;
            box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
        }

        /* small caption & close */
        .lightbox .close {
            position: absolute;
            right: 22px;
            top: 18px;
            font-size: 22px;
            color: #fff;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 8px;
            padding: 6px 10px;
        }

        /* Animations */
        @keyframes float {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-6px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(8px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ===== New screenshot-style gallery section (added before Blogs) ===== */
    .photo-gallery {
            background: #efeae5;
            padding: 48px 0 24px;
        }
        .photo-gallery .title {
            text-align: center;
            font-size: 36px;
            color: #0ea89a;
            font-weight: 700;
            margin-bottom: 28px;
        }
        .photo-grid {
            padding: 0 22px 22px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        .photo-item {
            height: 200px;
            overflow: hidden;
            border-radius: 4px;
            box-shadow: 0 12px 36px rgba(7, 22, 25, 0.06);
            cursor: pointer;
        }
        .photo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* LIGHTBOX */
        .lightbox {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.85);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 999;
        }
        .lightbox.active {
            display: flex;
        }
        .lightbox img {
            max-width: 90vw;
            max-height: 85vh;
            border-radius: 6px;
        }
        .lightbox .nav,
        .lightbox .close {
            position: absolute;
            background: rgba(255,255,255,0.15);
            border: none;
            color: #fff;
            font-size: 32px;
            padding: 14px 18px;
            cursor: pointer;
            border-radius: 50%;
        }
        .lightbox .prev { left: 30px; }
        .lightbox .next { right: 30px; }
        .lightbox .close {
            top: 25px;
            right: 30px;
            font-size: 28px;
        }
        /* Left vertical social bar (screenshot-style) */
        .vertical-social {
            position: fixed;
            left: 10px;
            top: 180px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 999;
        }

        .vertical-social a {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-decoration: none;
            font-weight: 700;
            border-radius: 6px;
            box-shadow: 0 6px 18px rgba(10, 20, 20, 0.12);
        }

        .vs-facebook {
            background: #3b5998;
        }

        .vs-twitter {
            background: #1da1f2;
        }

        .vs-pinterest {
            background: #bd081c;
        }

        .vs-linkedin {
            background: #0a66c2;
        }

        .vs-whatsapp {
            background: #25D366;
            color: #003;
        }

        /* Right stacked CTAs like screenshot */
        .right-ctas {
            position: fixed;
            right: 18px;
            bottom: 22px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            z-index: 999;
        }

        .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-radius: 8px;
            color: #fff;
            font-weight: 700;
            text-decoration: none;
            box-shadow: 0 10px 30px rgba(2, 10, 10, 0.12);
        }

        .cta-call {
            background: #0b74d1;
        }

        .cta-ws {
            background: #13c83b;
            color: #003;
        }

        .cta-book {
            background: #6b4bdb;
        }

        /* make sure fixed elements hide on very small screens */
        @media (max-width: 700px) {

            .vertical-social,
            .right-ctas {
                display: none;
            }

            .photo-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 14px;
            }

            .photo-grid .photo-item {
                height: 160px;
            }
        }

        /* ---------------------- MOBILE-SPECIFIC IMPROVEMENTS ---------------------- */
        /* New rules to keep desktop identical but make mobile layout tidy and usable */
        @media (max-width: 520px) {
            /* Reduce base font size on very small screens so increased desktop sizes don't overflow */
            html, body { font-size: 15px; }

            /* Hide some thin-top icons to keep bar clean */
            .thin-top-right { gap: 6px; }
            .thin-top { height: 36px; }
            .ticon { width: 30px; height: 20px; }

            /* Header: compact spacing and smaller logo */
            .header-inner { padding: 10px 0; }
            .logo img { height: 36px; }

            /* Hero: shorter, reduced padding, left-aligned content for readability */
            .hero { height: 360px; }
            .hero-inner { padding: 40px 14px; text-align: left; }
            .hero h2 { font-size: 28px!important; }
            .hero p { font-size: 16px; }

            /* Benefits / grids stack to single column */
            .benefits-grid { grid-template-columns: 1fr; gap: 20px; }

            /* Teal & dark sections: use single column and adjust image heights */
            .teal .grid, .dark .grid { grid-template-columns: 1fr; }
            .teal .photo img, .dark .grid img { height: 260px; object-fit: cover; }

            /* Team area stack vertically with centered text */
            .team-inner { flex-direction: column; gap: 18px; align-items: center; }
            .profile { width: 240px; border-width: 8px; }
            .team .txt { width: 100%; text-align: center; }

            /* Gallery: collapse to single column for hero gallery, maintain lightbox */
            .gallery-inner { grid-template-columns: 1fr; padding: 12px; }
            .gallery-copy { padding: 18px 0; min-height: auto; }
            .gallery-copy h2 { font-size: 28px; }
            .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }

            /* Photo-gallery: make grid 2 columns and full width */
            .photo-grid { grid-template-columns: repeat(2, 1fr); max-width: 100%; padding: 0 8px 22px; }

            /* Blog list becomes a single column */
            .blog-list { grid-template-columns: 1fr; }

            /* Contact form: stack fields vertically and full width */
            .form-row { flex-direction: column; }
            form { padding: 22px; margin: 14px 12px; }
            .submit-row { text-align: center; }

            /* Footer compact */
            footer { padding: 28px 0 60px; }
            footer .col { width: 100%; }

            /* Footer-bottom: ensure CTA visible and not absolute */
            .footer-bottom .container { align-items: center; }
            .book-appointment { position: static; transform: none; margin-top: 8px; }

            /* Make fixed CTAs tappable and not overlap */
            .right-ctas { right: 12px; bottom: 12px; }

            /* NAV: keep nav-list full-width dropdown-like when open */
            .nav-list { right: 12px; width: calc(100% - 24px); }
        }


        /* Additional accessibility improvements for small devices */
        @media (max-width: 400px) {
            .hero h2 { font-size: 22px!important; }
            .hero p { font-size: 15px; }
            .photo-grid .photo-item { height: 140px; }
            .gallery-grid { grid-auto-rows: 120px; }
        }

        /* ---- NEW: Mobile full-screen overlay & sticky CTA CSS (keeps desktop unchanged) ---- */

        /* ---------- Mobile full-screen menu overlay (keeps desktop unchanged) ---------- */

        .mobile-nav-close-wrapper {
    display: none;
    /* keeps element from showing in desktop nav */
}

     /* Ensure mobile hamburger sits at the far right of the header */
@media (max-width: 1100px) {
  /* make header-inner a reliable flex container */
  .header-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* let the logo take only its natural width and push remaining space to the right */
  .logo {
    flex: 0 0 auto; /* do not grow */
    display: flex;
    align-items: center;
  }

  /* force the nav-toggle to the far right */
  .nav-toggle {
    margin-left: auto;      /* push it to the edge */
    order: 2;               /* ensure it stays after logo */
    z-index: 1300;          /* stay above other elements */
    position: relative;
    right: 0;
  }

  /* keep the desktop nav hidden in mobile and ensure the logo stays left */
  nav { order: 3; }
}

        
        @media (max-width: 1100px) {
            /* Make nav-list full-screen overlay when .show is active */
            .nav-list {
                position: fixed;
                inset: 0;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 55%;
                display: none; /* shown by .show */
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                gap: 0;
                padding: 24px;
                background: #fff;
                z-index: 1200;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            .nav-list.show {
                display: flex;
            }
            

            /* Top area: keep logo centered and close X on the right */
            .nav-list .mobile-nav-close-wrapper {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                padding-bottom: 8px;
            }

            .mobile-nav-close {
                background: transparent;
                border: none;
                font-size: 30px;
                line-height: 1;
                padding: 6px 10px;
                cursor: pointer;
                color: #0f2a30;
                font-weight: 700;
            }

            /* Make menu links large, tall, and very tappable (like screenshot) */
            .nav-list > li {
                list-style: none;
                border-bottom: 1px solid rgba(6,18,20,0.04);
            }

            .nav-list > li > a,
            .nav-list > li > button {
                display: block;
                padding: 22px 6px;
                font-size: 16px;
                font-weight: 600;
                color: #102C34;
                text-decoration: none;
                text-align: left;
                width: 100%;
                background: transparent;
            }

            .nav-list > li > a:hover,
            .nav-list > li > button:hover,
            .nav-list > li > a:focus,
            .nav-list > li > button:focus {
                background: rgba(19,150,127,0.04);
                color: var(--teal-strong);
                outline: none;
            }

            /* Dropdown menu inside overlay - simple expandable block */
            .dropdown .dropdown-menu {
                display: none;
                padding-left: 12px;
                background: transparent;
                box-shadow: none;
                margin-bottom: 8px;
            }

            .dropdown.open .dropdown-menu {
                display: block;
            }

            .dropdown .dropdown-menu a {
                padding: 12px 8px;
                font-size: 16px;
                color: #1b2b2b;
            }

            /* hide the desktop nav-toggle default visual changes (we still keep it) */
            .nav-toggle {
                z-index: 1250;
            }
        }

        /* ---------- Left social strip visibility for mobile (keeps desktop fixed version) ---------- */
        @media (max-width: 520px) {
            .vertical-social {
                left: 8px; /* nudge a bit */
                top: 120px;
                transform: translateZ(0);
                display: flex;
                gap: 10px;
            }

            /* make them slightly taller to match screenshot stacked buttons */
            .vertical-social a {
                width: 46px;
                height: 46px;
                border-radius: 8px;
                font-weight: 800;
                font-size: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        /* ---------- Mobile sticky CTA (bottom-right small pill / circular) ---------- */
        .mobile-sticky {
            display: none; /* show only on small screens */
        }

        @media (max-width: 700px) {
            .mobile-sticky {
                position: fixed;
                right: 12px;
                bottom: 12px;
                z-index: 1300;
                display: flex;
                gap: 10px;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                pointer-events: auto;
            }

            .mobile-sticky a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 56px;
                height: 56px;
                border-radius: 30px !important;
                text-decoration: none;
                color: #fff;
                font-weight: 800;
                box-shadow: 0 12px 36px rgba(10, 20, 30, 0.18);
                background: #21c063;
            }

            .mobile-sticky a.phone {
                background: linear-gradient(180deg,#0b74d1,#065fae);
            }

            .mobile-sticky a.book {
                background: linear-gradient(180deg,#6b4bdb,#5336b9);
            }

            /* small label bubble shown when menu closed (optional) */
            .mobile-sticky .label {
                display: none; /* reduce clutter; enable if you want small text */
            }
        }