:root {
            --primary-green: #1b5e20;
            --light-green: #2d6a4f;
            --green: #28a745;
            --beige: #ebdcd3;
            --dark-navy: #2c3e50;
            --footer-bg: #1a212d;
            --white: #ffffff;
        }

        html {
            scroll-behavior: smooth;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Open Sans', sans-serif; color: #333; line-height: 1.6; scroll-behavior: smooth; overflow-x: hidden; background: #fff; }
        h1, h2, h3, h4, .nav-menu { font-family: 'Montserrat', sans-serif; }
        a { text-decoration: none; color: inherit; }
        
        /* 1. TOP BAR */
        .top-bar { background: var(--primary-green); color: white; padding: 10px 10%; display: flex; justify-content: flex-end; font-size: 13px; font-weight: 600; }
        .social-icons i { margin-left: 15px; cursor: pointer; transition: 0.3s; }
        .social-icons i:hover { opacity: 0.7; }

        /* 2. NAVBAR */
        header { background: white; padding: 15px 10%; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 12px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
        .logo img { height: 60px; }
        nav ul { display: flex; list-style: none; }
        nav ul li { margin: 0 15px; font-weight: 600; font-size: 13px; text-transform: uppercase; cursor: pointer; color: var(--primary-green); transition: 0.3s; }
        .btn-book { border: 2px solid var(--green); color: var(--green); padding: 10px 22px; border-radius: 30px; font-weight: 700; transition: 0.3s; }
        .btn-book:hover { background: var(--green); color: white; }

        /* 3. HERO SLIDER */
        /* .hero-slider { position: relative; width: 100%; overflow: hidden; background: #fff; }
        .main-slides { display: flex; width: 100%; transition: transform 0.8s ease-in-out; }
        .m-slide { flex: 0 0 100%; width: 100%; }
        .m-slide img { width: 100%; height: auto; display: block; } */

        /* --- MODERN HERO STYLING --- */
        .hero-modern {
            background-color: #fff;
            padding: 60px 10%;
            overflow: hidden;
        }

        .hero-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 50px;
        }

        .hero-text-side {
            flex: 1;
            text-align: left;
        }

        .hero-title {
            font-size: 56px;
            font-weight: 800;
            color: #1a1a1a;
            line-height: 1.1;
            margin-bottom: 20px;
        }

        .hero-title span {
            color: var(--accent-green);
        }

        .hero-desc {
            font-size: 18px;
            color: #666;
            margin-bottom: 35px;
            max-width: 500px;
            text-align: left;
        }

        .hero-btns {
            display: flex;
            gap: 15px;
            margin-bottom: 50px;
        }

        .btn-primary-green {
            background-color: #006400; /* Dark Green */
            color: white;
            padding: 15px 30px;
            border-radius: 8px;
            font-weight: 700;
            transition: 0.3s;
        }

        .btn-outline {
            border: 1px solid #ddd;
            color: #333;
            padding: 15px 30px;
            border-radius: 8px;
            font-weight: 600;
            transition: 0.3s;
        }

        .btn-primary-green:hover { background: #004d00; transform: translateY(-3px); }
        .btn-outline:hover { background: #f9f9f9; }

        /* Stats Grid */
        .hero-stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }

        .hero-stat-card {
            background: #f4fbf4;
            padding: 20px 10px;
            border-radius: 12px;
            text-align: center;
            border: 1px solid #e8f5e8;
        }

        .hero-stat-card i { color: var(--accent-green); font-size: 20px; margin-bottom: 10px; }
        .hero-stat-card h4 { font-size: 22px; font-weight: 700; color: #1a1a1a; }
        .hero-stat-card p { font-size: 12px; color: #777; margin: 0; }

        /* Image Side & Floating Review */
        .hero-image-side {
            flex: 1;
            position: relative;
        }

        .main-img-wrapper {
            position: relative;
            width: 100%;
        }

        .hero-main-img {
            width: 100%;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

        .floating-review-card {
            position: absolute;
            bottom: -20px;
            left: -30px;
            background: white;
            padding: 15px 20px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 15px;
            width: 280px;
        }

        .reviewer-img img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .review-content p {
            font-size: 13px;
            font-style: italic;
            margin: 3px 0;
            color: #444;
        }

        .review-content span {
            font-size: 12px;
            font-weight: 700;
            color: #1a1a1a;
        }

        /* RESPONSIVE */
        @media (max-width: 1100px) {
            .hero-title { font-size: 42px; }
            .hero-container { flex-direction: column; text-align: center; }
            .hero-text-side { text-align: center; }
            .hero-desc { margin: 0 auto 30px; }
            .hero-btns { justify-content: center; }
            .floating-review-card { left: 50%; transform: translateX(-50%); bottom: -30px; }
        }

        @media (max-width: 600px) {
            .hero-modern { padding: 40px 5%; }
            .hero-title { font-size: 32px; }
            .hero-btns { flex-direction: column; width: 100%; }
            .hero-stats-grid { grid-template-columns: 1fr; }
        }

        /* 4. BEIGE BAR */
        .choices-bar { background-color: var(--beige); padding: 40px 10%; text-align: center; }
        .choices-bar h2 { font-size: 40px; color: #5a3d34; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }

    /* 5. 4 FEATURE BOXES (Green Theme) */
        .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; color: white; text-align: center; }
        .feature-box { padding: 60px 20px; transition: 0.3s; }
        .feature-box:nth-child(odd) { background-color: var(--primary-green); }
        .feature-box:nth-child(even) { background-color: var(--light-green); }
        .feature-box i { font-size: 50px; margin-bottom: 20px; }
        .feature-box h3 { margin-bottom: 10px; text-transform: uppercase; font-size: 22px; }

        /* 6. OUR STRENGTH (TABS) */
        .section-padding { padding: 80px 10%; text-align: center; }
        .strength-container { display: flex; gap: 50px; align-items: flex-start; text-align: left; margin-top: 40px; }
        .strength-image img { width: 450px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        .tabs { display: flex; gap: 10px; margin-bottom: 30px; }
        .tab-btn { background: #f0f0f0; border: none; padding: 12px 25px; font-weight: 700; border-radius: 5px; cursor: pointer; transition: 0.3s; }
        .tab-btn.active { background: var(--green); color: white; }
        .tab-info-list { list-style: none; }
        .tab-info-list li { position: relative; padding-left: 30px; margin-bottom: 15px; }
        .tab-info-list li::before { content: '•'; color: var(--green); position: absolute; left: 0; font-size: 30px; top: -8px; }

        /* 9. CORE COMPETENCY (SERVICES) */
        /* --- Core Competency Styling --- */
        .competency-sec { padding: 60px 5%; text-align: center; background: #fff; }
        .tagline { color: var(--green); font-weight: 700; font-size: 14px; margin-bottom: 10px; display: block; }
        .sec-title { font-size: 40px; font-weight: 700; margin-bottom: 20px; color: #2c3e50; }
        .sec-desc { color: #777; max-width: 850px; margin: 0 auto 50px; font-size: 15px; }

    /* Blue Buttons Group -> Now Green */
        .comp-btn-group { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 50px; }
        .comp-btn { 
            background: var(--light-green); color: white; padding: 12px 28px; border-radius: 30px; 
            font-weight: 600; font-size: 13px; transition: 0.3s; display: inline-block; text-decoration: none;
        }
        .comp-btn:hover { background: var(--primary-green); transform: translateY(-3px); }

        .comp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
        .comp-card { position: relative; border-radius: 15px; overflow: hidden; height: 180px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: 0.3s; display: block; }
        .comp-card:hover { transform: translateY(-8px); }
        .comp-card img { width: 100%; height: 100%; object-fit: cover; }
        .comp-card .overlay-label { position: absolute; bottom: 0; width: 100%; background: rgba(27,94,32,0.8); color: white; padding: 12px 5px; font-size: 13px; font-weight: 600; text-align: center; }

        /* Responsive for Mobile */
        @media (max-width: 1024px) { .comp-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .comp-grid { grid-template-columns: 1fr; } }

        .comp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 40px; }
        .comp-card { position: relative; border-radius: 15px; overflow: hidden; height: 180px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: block; transition: 0.3s; }
        .comp-card:hover { transform: translateY(-5px); }
        .comp-card img { width: 100%; height: 100%; object-fit: cover; }
        .comp-card .label { position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.6); color: white; padding: 10px; font-size: 13px; font-weight: 600; text-align: center; }

        /* --- 10. TESTIMONIAL SLIDER (NEW) --- */
        /* --- TESTIMONIAL GRID STYLING --- */
        .testimonials-grid-sec {
            padding: 80px 5%;
            background-color: #fff;
            text-align: center;
        }

        .section-header {
            margin-bottom: 50px;
        }

        .section-header h2 span {
            color: var(--green); /* Say શબ્દ લીલા કલરમાં કરવા માટે */
        }

        .section-desc {
            color: #666;
            max-width: 700px;
            margin: 10px auto;
            font-size: 15px;
        }

        .testi-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* ૩ કોલમ લેઆઉટ */
            gap: 30px;
        }

        .testi-card {
            background-color: #f4fbf4; /* આછો લીલો કલર (સ્ક્રિનશોટ મુજબ) */
            padding: 30px;
            border-radius: 15px;
            text-align: left;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: 0.3s;
            border: 1px solid #e8f5e8;
        }

        .testi-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .testi-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 18px;
        }

        .user-info h4 {
            margin: 0;
            color: #1a1a1a;
            font-size: 16px;
        }

        .stars {
            font-size: 12px;
            margin-top: 3px;
        }

        .testi-text {
            font-size: 14px;
            color: #555;
            line-height: 1.6;
            margin: 0;
        }

        /* RESPONSIVE */
        @media (max-width: 1024px) {
            .testi-grid { grid-template-columns: repeat(2, 1fr); } /* ટેબ્લેટ પર ૨ કોલમ */
        }

        @media (max-width: 768px) {
            .testi-grid { grid-template-columns: 1fr; } /* મોબાઈલ પર ૧ કોલમ */
            .section-header h2 { font-size: 28px; }
        }

        /* --- 11. FOOTER (NEW) --- */
       /* --- NEW LIGHT GREEN FOOTER STYLE --- */
            .main-footer {
                background-color: #f4fbf4; /* સ્ક્રીનશોટ મુજબનો આછો લીલો કલર */
                padding: 70px 10% 20px;
                font-family: 'Open Sans', sans-serif;
                color: #444;
            }

            .footer-container {
                display: grid;
                grid-template-columns: 1.3fr 1fr 1fr; /* ૩ કોલમ ગ્રીડ */
                gap: 50px;
                max-width: 1200px;
                margin: 0 auto;
                text-align: left;
            }

            .footer-logo {
                height: 65px;
                margin-bottom: 20px;
            }

            .footer-col h4 {
                color: #1a1a1a;
                font-size: 18px;
                font-weight: 700;
                margin-bottom: 25px;
                font-family: 'Montserrat', sans-serif;
            }

            .footer-col p {
                font-size: 15px;
                line-height: 1.6;
                margin-bottom: 20px;
                color: #555;
            }

            /* સોશિયલ આઈકોન્સ */
            .footer-social {
                display: flex;
                gap: 15px;
            }

            .footer-social a {
                background: white;
                color: #555;
                width: 35px;
                height: 35px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                box-shadow: 0 2px 5px rgba(0,0,0,0.05);
                transition: 0.3s;
            }

            .footer-social a:hover {
                color: #1b5e20;
                transform: translateY(-3px);
            }

            /* સાધનોની યાદી (Equipments) */
            .equipment-list {
                list-style: none;
                padding: 0;
            }

            .equipment-list li {
                margin-bottom: 12px;
                font-size: 14px;
                color: #666;
                position: relative;
                padding-left: 0;
            }

            /* કોન્ટેક્ટ લિસ્ટ અને આઈકોન્સ */
            .contact-list {
                list-style: none;
                padding: 0;
            }

            .contact-list li {
                display: flex;
                align-items: flex-start;
                gap: 12px;
                margin-bottom: 18px;
                font-size: 14px;
                color: #555;
            }

            .contact-list i {
                color: #1b5e20; /* આઈકોનનો કલર ડાર્ક લીલો */
                font-size: 16px;
                margin-top: 4px;
            }

            /* કોપીરાઈટ સેક્શન */
            .footer-bottom {
                border-top: 1px solid #e0eee0;
                margin-top: 40px;
                padding-top: 20px;
                text-align: center;
                font-size: 13px;
                color: #888;
            }

            /* --- મોબાઈલ માટે રિસ્પોન્સિવ સેટિંગ્સ --- */
            @media (max-width: 1024px) {
                .footer-container {
                    grid-template-columns: 1fr 1fr;
                    gap: 30px;
                }
            }

            @media (max-width: 768px) {
                .main-footer {
                    padding: 50px 5% 20px;
                }
                .footer-container {
                    grid-template-columns: 1fr; /* મોબાઈલમાં એકની નીચે એક */
                    gap: 40px;
                }
                .footer-logo {
                    height: 55px;
                }
                .footer-col {
                    text-align: center; /* મોબાઈલમાં સેન્ટર લાઈનમેન્ટ */
                }
                .footer-social, .contact-list li {
                    justify-content: center;
                }
            }
        /* Back to top */
        .back-top { position: fixed; bottom: 30px; right: 30px; background: var(--light-blue); color: #1b5e20; width: 45px; height: 45px; border-radius: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
        
        /*Book Appointment css*/
            
            .appointment-section {
                background-color: #ffffff;
                padding: 60px 10%;
            }
            
            .appointment-container {
                background: #f4fbf4; /* આછો લીલો બેકગ્રાઉન્ડ */
                padding: 40px;
                border-radius: 15px;
                box-shadow: 0 5px 15px rgba(0,0,0,0.05);
                max-width: 800px;
                margin: 0 auto;
                text-align: left;
            }
            
            .appointment-container h2 {
                color: #1a1a1a;
                font-size: 28px;
                margin-bottom: 10px;
            }
            
            .subtitle {
                color: #666;
                margin-bottom: 30px;
                font-size: 14px;
            }
            
            .form-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 20px;
            }
            
            .form-group {
                display: flex;
                flex-direction: column;
                margin-bottom: 20px;
            }
            
            .form-group label {
                font-weight: 600;
                font-size: 14px;
                margin-bottom: 8px;
                color: #333;
            }
            
            .form-group input, 
            .form-group select, 
            .form-group textarea {
                padding: 12px;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                background: white;
                font-size: 14px;
            }
            
            .form-group small {
                font-size: 11px;
                color: #888;
                margin-top: 5px;
            }
            
            .full-width {
                grid-column: span 2;
            }
            
            textarea {
                height: 100px;
                resize: none;
            }
            
            .btn-submit {
                width: 100%;
                background-color: #006400; /* ઘાટો લીલો કલર */
                color: white;
                padding: 15px;
                border: none;
                border-radius: 8px;
                font-weight: 700;
                font-size: 16px;
                cursor: pointer;
                transition: 0.3s;
                margin-top: 10px;
            }
            
            .btn-submit:hover {
                background-color: #004d00;
            }
            
            /* મોબાઈલ માટે રિસ્પોન્સિવ */
            @media (max-width: 600px) {
                .form-grid { grid-template-columns: 1fr; }
                .full-width { grid-column: span 1; }
                .appointment-container { padding: 20px; }
            }
            
        /*End Appointment css*/
        
        
        /* WhatsApp Float Styling */
        .whatsapp-float {
            position: fixed;
            bottom: 85px; /* એરો બટનથી ઉપર રાખવા માટે (30px + 50px gap) */
            right: 30px;
            background-color: #25d366; /* WhatsApp Green */
            color: #fff;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
            z-index: 1000;
            transition: 0.3s;
        }

        .whatsapp-float:hover {
            background-color: #128c7e;
            transform: scale(1.1);
            color: white;
        }

        /* મોબાઈલ માટે થોડું એડજસ્ટમેન્ટ */
        @media (max-width: 768px) {
            .whatsapp-float {
                bottom: 80px;
                right: 20px;
                width: 45px;
                height: 45px;
                font-size: 25px;
            }
        }

        /* Responsive */
        @media (max-width: 1024px) { .footer-grid, .comp-grid, .tech-grid, .stats-grid, .features-grid { grid-template-columns: repeat(2, 1fr); } .strength-container { flex-direction: column; align-items: center; } .strength-image img { width: 100%; } }
        @media (max-width: 600px) { .footer-grid, .comp-grid, .tech-grid, .stats-grid, .features-grid { grid-template-columns: 1fr; } .section-title { font-size: 28px; } header { flex-direction: column; gap: 15px; } }
        
        /* Mobile Header */
        /* --- મેઈન હેડર ડેસ્કટોપ માટે --- */
        header {
            display: flex;
            justify-content: space-between; /* લોગો ડાબે અને મેનુ જમણે રાખવા માટે */
            align-items: center;            /* બધું સેન્ટરમાં રાખવા માટે */
            padding: 15px 10%;
            background: #fff;
            width: 100%;
        }

        /* લોગોને ડાબી બાજુ ફિક્સ કરો */
        .logo {
            flex: 0 0 auto;
        }

        /* નેવિગેશન મેનુ અને બટનને જમણી બાજુ એક જ લાઈનમાં લાવવા */
        nav {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        nav ul {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        nav ul li {
            margin: 0 15px;
        }

        /* બુક એપોઈન્ટમેન્ટ બટનને મેનુની બાજુમાં સેટ કરવું */
        .btn-book-nav {
            margin-left: 20px;
            display: inline-block;
        }

        /* મોબાઈલ આઈકોન્સ ડેસ્કટોપમાં ન દેખાવા જોઈએ */
        .header-right-mobile {
            display: none;
        }

                /* ડેસ્કટોપમાં આઈકોન્સ છુપાવો */
        .header-right-mobile { display: none; }

        @media (max-width: 992px) {
        /* ૧. હેડરને આડી લાઈનમાં (Row) સેટ કરવું */
        header { 
            padding: 10px 5% !important; 
            display: flex !important; 
            flex-direction: row !important; /* આનાથી બધું એક લાઈનમાં આવશે */
            justify-content: space-between !important; /* લોગો ડાબે અને આઈકોન્સ જમણે ધકેલાશે */
            align-items: center !important; 
            position: sticky;
            top: 0;
            width: 100%;
            background: white;
            z-index: 1000;
        }

        /* ૨. લોગોને ડાબી બાજુ છેડે રાખવો */
        .logo {
            flex: 0 0 auto; /* લોગો તેની જરૂર મુજબ જગ્યા રોકશે */
        }

        .logo img { 
            height: 40px !important; /* મોબાઈલ માટે લોગોની પરફેક્ટ સાઈઝ */
            width: auto;
        }

        /* ૩. આઈકોન્સ (સૂર્ય અને ૩-લાઈન) ને જમણી બાજુ છેડે સેટ કરવા */
        .header-right-mobile { 
            display: flex !important; 
            align-items: center !important; 
            gap: 15px; /* બે આઈકોન વચ્ચેની જગ્યા */
            margin-left: auto !important; /* આનાથી આઈકોન્સ જમણી બાજુ પુશ થશે */
        }       

        .menu-toggle { 
            font-size: 24px; 
            cursor: pointer; 
            color: #1b5e20; /* લીલો કલર */
        }

        /* ૪. મેનુ લિંક્સ (જે ક્લિક કરવા પર નીચે ખુલશે) */
        nav {
            position: absolute;
            top: 100%; /* હેડરની બરાબર નીચે ખુલશે */
            left: 0;
            width: 100%;
            background: white;
            flex-direction: column;
            display: none; /* શરૂઆતમાં છુપાયેલું */
            padding: 20px;
            box-shadow: 0 10px 15px rgba(0,0,0,0.1);
            z-index: 999;
        }

        nav.active { 
            display: flex !important; /* JS થી ક્લિક કરતા દેખાશે */
        }

        nav ul { 
            flex-direction: column !important; 
            width: 100%; 
            text-align: center; 
            padding: 0;
        }

        nav ul li { 
            margin: 10px 0 !important; 
            border-bottom: 1px solid #eee; 
            padding-bottom: 10px; 
        }

        .btn-book-nav { 
            margin: 10px 0 0 0 !important; 
            width: 100%; 
            text-align: center; 
            display: block;
        }
    }

    :root {
            --primary-green: #1b5e20;
            --light-green: #2d6a4f;
            --green: #28a745;
            --beige: #ebdcd3;
            --dark-navy: #2c3e50;
            --footer-bg: #1a212d;
            --white: #ffffff;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; }
        body { background-color: #fff; overflow-x: hidden; scroll-behavior: smooth; }

        /* --- 1. HEADER & TOP BAR --- */
        .top-bar { background-color: #0099e5; color: white; padding: 10px 0; font-size: 14px; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        .top-content { display: flex; justify-content: flex-end; align-items: center; gap: 15px; }
        .social-icons { display: flex; gap: 15px; border-left: 1px solid rgba(255,255,255,0.4); padding-left: 15px; }
        .social-icons a { color: white; text-decoration: none; font-size: 16px; }


        .nav-container { display: flex; justify-content: space-between; align-items: center; }
        .logo img { height: 60px; }
        .nav-menu { display: flex; list-style: none; gap: 25px; }
        .nav-menu li a { text-decoration: none; color: #444; font-weight: 600; font-size: 13px; }
        .nav-menu li a.active { color: #0099e5; }
        .appointment-btn { border: 2px solid #24a148; color: #24a148; padding: 10px 25px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 14px; transition: 0.3s; }
        .appointment-btn:hover { background: #24a148; color: #fff; }

        /* --- 2. BANNER & DIVIDER --- */
        .about-banner { background-color: #f4faff; padding: 60px 0; text-align: center; }
        .about-banner h1 { color: #0099e5; font-size: 32px; font-weight: 700; letter-spacing: 1px; }
        .divider { height: 20px; background-image: radial-gradient(circle at 10px -5px, transparent 12px, #fff 13px); background-size: 20px 20px; background-color: #f4faff; margin-top: -1px; }

        /* --- 3. COMMON SECTION STYLES --- */
        .section-padding { padding: 80px 0; }
        .flex-container { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
        .text-side { flex: 1; min-width: 300px; }
        .image-side { flex: 1; min-width: 300px; }
        .image-side img { width: 100%; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        .tag { color: #24a148; font-weight: 700; font-size: 14px; margin-bottom: 15px; display: block; }
        .blue-line { width: 50px; height: 3px; background-color: #0099e5; margin-bottom: 25px; }
        p { color: #555; line-height: 1.7; font-size: 15px; margin-bottom: 20px; text-align: justify; }

        /* --- 4. TABS & LISTS --- */
        .tabs-wrapper { display: flex; gap: 10px; margin: 25px 0; }
        .tab-btn { flex: 1; padding: 15px; border: none; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; background: #f0f0f0; color: #555; transition: 0.3s; }
        .tab-btn.active { background: #009944; color: white; }
        .tab-content { display: none; padding-top: 10px; }
        .tab-content.active { display: block; }

        .list-style { list-style: none; }
        .list-style li { position: relative; padding-left: 20px; margin-bottom: 12px; font-size: 15px; color: #555; line-height: 1.6; }
        .list-style li::before { content: "•"; position: absolute; left: 0; color: #333; font-weight: bold; }

        /* --- 5. TEAM BOX --- */
        .team-box { background: #fff; border: 1px solid #eee; border-radius: 15px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); display: flex; gap: 30px; flex-wrap: wrap; }
        .doc-card { flex: 1; display: flex; gap: 20px; min-width: 400px; align-items: flex-start; }
        .doc-card img { width: 220px; border-radius: 10px; }
        .doc-info h3 { color: #0099e5; font-size: 18px; margin-bottom: 10px; }
        .highlight-quote { border-left: 4px solid #333; padding-left: 20px; font-style: italic; margin: 30px 0; color: #444; }

        /* --- 6. CTA BANNER (NEW) --- */
        .cta-section { 
            background: linear-gradient(rgba(0, 153, 229, 0.8), rgba(0, 153, 229, 0.8)), url('https://img.freepik.com/free-photo/group-doctors-smiling-hospital_23-2148111000.jpg');
            background-size: cover; background-position: center; padding: 80px 0; text-align: center; color: white;
        }
        .cta-section h2 { font-size: 48px; font-weight: 700; margin-bottom: 30px; }
        .btn-cta { background-color: #6ed06e; color: white; padding: 15px 35px; border-radius: 10px; text-decoration: none; font-weight: 600; display: inline-block; transition: 0.3s; }
        .btn-cta:hover { background-color: #5bbd5b; }

        /* --- 7. FOOTER SECTION (NEW) --- */
       /* --- NEW LIGHT GREEN FOOTER STYLE --- */
            .main-footer {
                background-color: #f4fbf4; /* સ્ક્રીનશોટ મુજબનો આછો લીલો કલર */
                padding: 70px 10% 20px;
                font-family: 'Open Sans', sans-serif;
                color: #444;
            }

            .footer-container {
                display: grid;
                grid-template-columns: 1.3fr 1fr 1fr; /* ૩ કોલમ ગ્રીડ */
                gap: 50px;
                max-width: 1200px;
                margin: 0 auto;
                text-align: left;
            }

            .footer-logo {
                height: 65px;
                margin-bottom: 20px;
            }

            .footer-col h4 {
                color: #1a1a1a;
                font-size: 18px;
                font-weight: 700;
                margin-bottom: 25px;
                font-family: 'Montserrat', sans-serif;
            }

            .footer-col p {
                font-size: 15px;
                line-height: 1.6;
                margin-bottom: 20px;
                color: #555;
            }

            /* સોશિયલ આઈકોન્સ */
            .footer-social {
                display: flex;
                gap: 15px;
            }

            .footer-social a {
                background: white;
                color: #555;
                width: 35px;
                height: 35px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                box-shadow: 0 2px 5px rgba(0,0,0,0.05);
                transition: 0.3s;
            }

            .footer-social a:hover {
                color: #1b5e20;
                transform: translateY(-3px);
            }

            /* સાધનોની યાદી (Equipments) */
            .equipment-list {
                list-style: none;
                padding: 0;
            }

            .equipment-list li {
                margin-bottom: 12px;
                font-size: 14px;
                color: #666;
                position: relative;
                padding-left: 0;
            }

            /* કોન્ટેક્ટ લિસ્ટ અને આઈકોન્સ */
            .contact-list {
                list-style: none;
                padding: 0;
            }

            .contact-list li {
                display: flex;
                align-items: flex-start;
                gap: 12px;
                margin-bottom: 18px;
                font-size: 14px;
                color: #555;
            }

            .contact-list i {
                color: #1b5e20; /* આઈકોનનો કલર ડાર્ક લીલો */
                font-size: 16px;
                margin-top: 4px;
            }

            /* કોપીરાઈટ સેક્શન */
            .footer-bottom {
                border-top: 1px solid #e0eee0;
                margin-top: 40px;
                padding-top: 20px;
                text-align: center;
                font-size: 13px;
                color: #888;
            }

            /* --- મોબાઈલ માટે રિસ્પોન્સિવ સેટિંગ્સ --- */
            @media (max-width: 1024px) {
                .footer-container {
                    grid-template-columns: 1fr 1fr;
                    gap: 30px;
                }
            }

            @media (max-width: 768px) {
                .main-footer {
                    padding: 50px 5% 20px;
                }
                .footer-container {
                    grid-template-columns: 1fr; /* મોબાઈલમાં એકની નીચે એક */
                    gap: 40px;
                }
                .footer-logo {
                    height: 55px;
                }
                .footer-col {
                    text-align: center; /* મોબાઈલમાં સેન્ટર લાઈનમેન્ટ */
                }
                .footer-social, .contact-list li {
                    justify-content: center;
                }
            }
        /* Back to top */
        .back-top { position: fixed; bottom: 30px; right: 30px; background: var(--light-blue); color: #1b5e20; width: 45px; height: 45px; border-radius: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
        
        /* WhatsApp Float Styling */
        .whatsapp-float {
            position: fixed;
            bottom: 85px; /* એરો બટનથી ઉપર રાખવા માટે (30px + 50px gap) */
            right: 30px;
            background-color: #25d366; /* WhatsApp Green */
            color: #fff;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
            z-index: 1000;
            transition: 0.3s;
        }

        .whatsapp-float:hover {
            background-color: #128c7e;
            transform: scale(1.1);
            color: white;
        }

        /* મોબાઈલ માટે થોડું એડજસ્ટમેન્ટ */
        @media (max-width: 768px) {
            .whatsapp-float {
                bottom: 80px;
                right: 20px;
                width: 45px;
                height: 45px;
                font-size: 25px;
            }
        }
        a { text-decoration: none; color: inherit; }

        .contact-info li { display: flex; gap: 15px; margin-bottom: 20px; font-size: 14px; align-items: flex-start; }
        .contact-info i { color: #fff; font-size: 16px; margin-top: 3px; }

        /* Copyright Bar */
        .copyright { background-color: #151b22; padding: 25px 0; text-align: center; font-size: 12px; margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.05); }

        /* Back to top button */
        .back-to-top { position: fixed; bottom: 30px; right: 30px; background: #0099e5; color: white; width: 45px; height: 45px; border-radius: 8px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 18px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

        @media (max-width: 992px) {
            .nav-menu { display: none; }
            .flex-container { flex-direction: column; text-align: center; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .cta-section h2 { font-size: 30px; }
        }

        /* Profession Layout */
        .features-layout {
            background-color: #fff;
        }

        .flex-container {
            display: flex;
            align-items: center;
            gap: 60px;
            flex-wrap: wrap;
        }

        .image-side {
            flex: 1;
            min-width: 350px;
        }

        .image-frame {
            background: #e9ede3; /* ઈમેજની પાછળનો આછો ગ્રીન કલર */
            padding: 25px;
            border-radius: 20px;
            display: inline-block;
        }

        .image-frame img {
            width: 100%;
            border-radius: 15px;
            display: block;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .text-side {
            flex: 1.2;
            min-width: 350px;
        }

        .feature-item {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
            align-items: flex-start;
        }

        .feature-icon {
            background: #f8fcf8;
            padding: 10px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e2f0e2;
        }

        .feature-text h4 {
            font-size: 1.2rem;
            color: #002b50;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .feature-text p {
            font-size: 0.95rem;
            color: #666;
            line-height: 1.6;
            margin: 0;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .flex-container {
                flex-direction: column;
                gap: 40px;
            }
            .image-frame {
                padding: 15px;
            }
        }.features-layout {
            background-color: #fff;
        }

        .flex-container {
            display: flex;
            align-items: center;
            gap: 60px;
            flex-wrap: wrap;
        }

        .image-side {
            flex: 1;
            min-width: 350px;
        }

        .image-frame {
            background: #e9ede3; /* ઈમેજની પાછળનો આછો ગ્રીન કલર */
            padding: 25px;
            border-radius: 20px;
            display: inline-block;
        }

        .image-frame img {
            width: 100%;
            border-radius: 15px;
            display: block;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .text-side {
            flex: 1.2;
            min-width: 350px;
        }

        .feature-item {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
            align-items: flex-start;
        }

        .feature-icon {
            background: #f8fcf8;
            padding: 10px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e2f0e2;
        }

        .feature-text h4 {
            font-size: 1.2rem;
            color: #002b50;
            margin-bottom: 8px;
            font-weight: 600;
            display: flex;
        }

        .feature-text p {
            font-size: 0.95rem;
            color: #666;
            line-height: 1.6;
            margin: 0;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .flex-container {
                flex-direction: column;
                gap: 40px;
            }
            .image-frame {
                padding: 15px;
            }
        }

        /* Vsion Dashboard */
        .mission-vision-section {
            background-color: #ffffff;
            padding: 80px 0;
        }

        .mv-grid {
            display: flex;
            gap: 30px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .mv-card {
            background-color: #f4fbf4; /* આછો મોર્ડન ગ્રીન કલર */
            padding: 40px;
            border-radius: 20px;
            flex: 1;
            min-width: 300px;
            max-width: 550px;
            border: 1px solid #e8f5e8;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .mv-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        .mv-icon-box {
            background-color: #d8ead8;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            margin-bottom: 25px;
        }

        .mv-card h3 {
            font-size: 1.6rem;
            color: #1a1a1a;
            margin-bottom: 20px;
            font-weight: 700;
            display: flex;
        }

        .mv-card p {
            font-size: 1rem;
            color: #555;
            line-height: 1.7;
            margin: 0;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .mv-grid {
                flex-direction: column;
                align-items: center;
            }
            .mv-card {
                width: 100%;
                padding: 30px;
            }
        }

        /* Mobile Header */
        /* --- મેઈન હેડર ડેસ્કટોપ માટે --- */
        header {
            display: flex;
            justify-content: space-between; /* લોગો ડાબે અને મેનુ જમણે રાખવા માટે */
            align-items: center;            /* બધું સેન્ટરમાં રાખવા માટે */
            padding: 15px 10%;
            background: #fff;
            width: 100%;
        }

        /* લોગોને ડાબી બાજુ ફિક્સ કરો */
        .logo {
            flex: 0 0 auto;
        }

        /* નેવિગેશન મેનુ અને બટનને જમણી બાજુ એક જ લાઈનમાં લાવવા */
        nav {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        nav ul {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        nav ul li {
            margin: 0 15px;
            font-weight: 600;
            font-size: 13px;
            text-transform: uppercase;
            cursor: pointer;
            color: var(--primary-green);
            transition: 0.3s;
        }

        /* બુક એપોઈન્ટમેન્ટ બટનને મેનુની બાજુમાં સેટ કરવું */
        .btn-book-nav {
            margin-left: 20px;
            display: inline-block;
        }

        /* મોબાઈલ આઈકોન્સ ડેસ્કટોપમાં ન દેખાવા જોઈએ */
        .header-right-mobile {
            display: none;
        }

                /* ડેસ્કટોપમાં આઈકોન્સ છુપાવો */
        .header-right-mobile { display: none; }

        @media (max-width: 992px) {
        /* ૧. હેડરને આડી લાઈનમાં (Row) સેટ કરવું */
        header { 
            padding: 10px 5% !important; 
            display: flex !important; 
            flex-direction: row !important; /* આનાથી બધું એક લાઈનમાં આવશે */
            justify-content: space-between !important; /* લોગો ડાબે અને આઈકોન્સ જમણે ધકેલાશે */
            align-items: center !important; 
            position: sticky;
            top: 0;
            width: 100%;
            background: white;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .btn-book {
            border: 2px solid var(--green);
            color: var(--green);
            padding: 10px 22px;
            border-radius: 30px;
            font-weight: 700;
            transition: 0.3s;
        }

        /* ૨. લોગોને ડાબી બાજુ છેડે રાખવો */
        .logo {
            flex: 0 0 auto; /* લોગો તેની જરૂર મુજબ જગ્યા રોકશે */
        }

        .logo img { 
            height: 40px !important; /* મોબાઈલ માટે લોગોની પરફેક્ટ સાઈઝ */
            width: auto;
        }

        /* ૩. આઈકોન્સ (સૂર્ય અને ૩-લાઈન) ને જમણી બાજુ છેડે સેટ કરવા */
        .header-right-mobile { 
            display: flex !important; 
            align-items: center !important; 
            gap: 15px; /* બે આઈકોન વચ્ચેની જગ્યા */
            margin-left: auto !important; /* આનાથી આઈકોન્સ જમણી બાજુ પુશ થશે */
        }       

        .menu-toggle { 
            font-size: 24px; 
            cursor: pointer; 
            color: #1b5e20; /* લીલો કલર */
        }

        /* ૪. મેનુ લિંક્સ (જે ક્લિક કરવા પર નીચે ખુલશે) */
        nav {
            position: absolute;
            top: 100%; /* હેડરની બરાબર નીચે ખુલશે */
            left: 0;
            width: 100%;
            background: white;
            flex-direction: column;
            display: none; /* શરૂઆતમાં છુપાયેલું */
            padding: 20px;
            box-shadow: 0 10px 15px rgba(0,0,0,0.1);
            z-index: 999;
        }

        nav.active { 
            display: flex !important; /* JS થી ક્લિક કરતા દેખાશે */
        }

        nav ul { 
            flex-direction: column !important; 
            width: 100%; 
            text-align: center; 
            padding: 0;
        }

        nav ul li { 
            margin: 10px 0 !important; 
            border-bottom: 1px solid #eee; 
            padding-bottom: 10px; 
        }

        .btn-book-nav { 
            margin: 10px 0 0 0 !important; 
            width: 100%; 
            text-align: center; 
            display: block;
        }
    }

    :root {
            --primary-blue: #0096d6;
            --light-blue: #00aae4;
            --green: #28a745;
            --beige: #ebdcd3;
            --dark-navy: #2c3e50;
            --footer-bg: #1a212d;
            --white: #ffffff;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; }
        body { background-color: #fff; overflow-x: hidden; scroll-behavior: smooth; }

        /* --- 1. HEADER & TOP BAR --- */
        .top-bar { background-color: #0099e5; color: white; padding: 10px 0; font-size: 14px; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        .top-content { display: flex; justify-content: flex-end; align-items: center; gap: 15px; }
        .social-icons a { color: white; text-decoration: none; font-size: 16px; margin-left: 10px; }

        .nav-container { display: flex; justify-content: space-between; align-items: center; }
        .logo img { height: 60px; }
        .nav-menu { display: flex; list-style: none; gap: 25px; }
        .nav-menu li a { text-decoration: none; color: #444; font-weight: 600; font-size: 13px; text-transform: uppercase; }
        .nav-menu li a.active { color: #0099e5; }
        .appointment-btn { border: 2px solid #24a148; color: #24a148; padding: 10px 25px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 14px; transition: 0.3s; }

        /* --- 2. COMMON STYLES --- */
        .flex-container { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
        .text-side { flex: 1; min-width: 300px; }
        .image-side { flex: 1; min-width: 300px; }
        .image-side img { width: 100%; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        .tag { color: #24a148; font-weight: 700; font-size: 14px; margin-bottom: 15px; display: block; }
        .blue-line { width: 50px; height: 3px; background-color: #0099e5; margin-bottom: 25px; }
        p { color: #555; line-height: 1.7; font-size: 15px; margin-bottom: 20px; }

        /* New css Professional Dashboard Start */
            .section-padding { padding: 60px 0; }
            .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

            /* Header Styling */
            .contact-title { font-size: 2.5rem; color: #1b5e20; font-weight: 800; margin-bottom: 10px; }
            .contact-title:after { content: ''; display: block; width: 60px; height: 3px; background: #1b5e20; margin: 10px auto; }
            .contact-subtitle { color: #666; margin-bottom: 40px; }

            /* Grid Layout */
            .contact-main-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; margin-bottom: 60px; }

            /* Info Boxes */
            .info-box { display: flex; gap: 15px; background: #f4fbf4; padding: 20px; border-radius: 15px; margin-bottom: 15px; border: 1px solid #e8f5e8; }
            .info-icon { font-size: 1.5rem; }
            .info-text h4 { margin: 0; color: #333; font-size: 1.1rem; display: flex; }
            .info-text p { margin: 5px 0 0;
                color: #555;
                font-size: 0.9rem;
                text-align: left; /* પેરેગ્રાફ પણ ડાબેથી શરૂ થશે */ }

            /* Form Styling */
            .contact-form-side { background: #f4fbf4; padding: 30px; border-radius: 15px; border: 1px solid #e8f5e8; }
            .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
            .form-group { margin-bottom: 15px; text-align: left; }
            .form-group label { display: block; font-size: 0.85rem; font-weight: bold; margin-bottom: 5px; }
            .form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.9rem; }
            .send-btn { width: 100%; padding: 12px; background: #1b5e20; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }

            /* Map */
            .map-container h3 { margin: 40px 0 20px; color: #1b5e20; }
            .map-box { border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

            /* Action Cards */
            .action-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 50px; }
            .action-card { background: #f4fbf4; padding: 40px; border-radius: 15px; border: 1px solid #e8f5e8; text-align: center; }
            .action-icon { font-size: 2rem; margin-bottom: 15px; }
            .action-btn { display: inline-block; padding: 10px 25px; border-radius: 8px; text-decoration: none; font-weight: bold; margin-top: 15px; }
            .book-btn { background: #1b5e20; color: white; }
            .call-btn { background: #82954b; color: white; }

            @media (max-width: 768px) {
                .contact-main-grid, .action-cards-grid, .form-row { grid-template-columns: 1fr; }
            }

            /* આખા હેડરને સેન્ટર કરવા માટે */
            .text-center {
                text-align: center;
                margin-bottom: 40px; /* નીચેથી થોડી જગ્યા રાખવા માટે */
            }

            /* CONTACT US હેડિંગ માટે */
            .contact-title {
                font-size: 2.5rem;
                color: #1b5e20; /* ડાર્ક ગ્રીન કલર */
                font-weight: 800;
                margin-bottom: 10px;
                text-transform: uppercase;
            }

            /* પેલી લીલી લાઈન (Underline) ને સેન્ટર કરવા માટે */
            .green-line {
                width: 60px;
                height: 3px;
                background-color: #1b5e20;
                margin: 10px auto 20px; /* 'auto' થી લાઈન સેન્ટરમાં આવશે */
            }

            /* નીચેના લખાણ (Subtitle) માટે */
            .contact-subtitle {
                font-size: 1.1rem;
                color: #666;
                max-width: 700px; /* લખાણ બહુ લાંબુ ના થાય એટલે લિમિટ */
                margin: 0 auto; /* પેરેગ્રાફ બ્લોકને સેન્ટર કરવા માટે */
                line-height: 1.6;
            }

        /* Css End  */
        
        /* --- 6. FOOTER --- */
        /* --- NEW LIGHT GREEN FOOTER STYLE --- */
            .main-footer {
                background-color: #f4fbf4; /* સ્ક્રીનશોટ મુજબનો આછો લીલો કલર */
                padding: 70px 10% 20px;
                font-family: 'Open Sans', sans-serif;
                color: #444;
            }

            .footer-container {
                display: grid;
                grid-template-columns: 1.3fr 1fr 1fr; /* ૩ કોલમ ગ્રીડ */
                gap: 50px;
                max-width: 1200px;
                margin: 0 auto;
                text-align: left;
            }

            .footer-logo {
                height: 65px;
                margin-bottom: 20px;
            }

            .footer-col h4 {
                color: #1a1a1a;
                font-size: 18px;
                font-weight: 700;
                margin-bottom: 25px;
                font-family: 'Montserrat', sans-serif;
            }

            .footer-col p {
                font-size: 15px;
                line-height: 1.6;
                margin-bottom: 20px;
                color: #555;
            }

            /* સોશિયલ આઈકોન્સ */
            .footer-social {
                display: flex;
                gap: 15px;
            }

            .footer-social a {
                background: white;
                color: #555;
                width: 35px;
                height: 35px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                box-shadow: 0 2px 5px rgba(0,0,0,0.05);
                transition: 0.3s;
            }

            .footer-social a:hover {
                color: #1b5e20;
                transform: translateY(-3px);
            }

            /* સાધનોની યાદી (Equipments) */
            .equipment-list {
                list-style: none;
                padding: 0;
            }

            .equipment-list li {
                margin-bottom: 12px;
                font-size: 14px;
                color: #666;
                position: relative;
                padding-left: 0;
            }

            /* કોન્ટેક્ટ લિસ્ટ અને આઈકોન્સ */
            .contact-list {
                list-style: none;
                padding: 0;
            }

            .contact-list li {
                display: flex;
                align-items: flex-start;
                gap: 12px;
                margin-bottom: 18px;
                font-size: 14px;
                color: #555;
            }

            .contact-list i {
                color: #1b5e20; /* આઈકોનનો કલર ડાર્ક લીલો */
                font-size: 16px;
                margin-top: 4px;
            }

            /* કોપીરાઈટ સેક્શન */
            .footer-bottom {
                border-top: 1px solid #e0eee0;
                margin-top: 40px;
                padding-top: 20px;
                text-align: center;
                font-size: 13px;
                color: #888;
            }

            /* --- મોબાઈલ માટે રિસ્પોન્સિવ સેટિંગ્સ --- */
            @media (max-width: 1024px) {
                .footer-container {
                    grid-template-columns: 1fr 1fr;
                    gap: 30px;
                }
            }

            @media (max-width: 768px) {
                .main-footer {
                    padding: 50px 5% 20px;
                }
                .footer-container {
                    grid-template-columns: 1fr; /* મોબાઈલમાં એકની નીચે એક */
                    gap: 40px;
                }
                .footer-logo {
                    height: 55px;
                }
                .footer-col {
                    text-align: center; /* મોબાઈલમાં સેન્ટર લાઈનમેન્ટ */
                }
                .footer-social, .contact-list li {
                    justify-content: center;
                }
            }
        /* Back to top */
        .back-top { position: fixed; bottom: 30px; right: 30px; background: var(--light-blue); color: #1b5e20; width: 45px; height: 45px; border-radius: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
            
        /* WhatsApp Float Styling */
        .whatsapp-float {
            position: fixed;
            bottom: 85px; /* એરો બટનથી ઉપર રાખવા માટે (30px + 50px gap) */
            right: 30px;
            background-color: #25d366; /* WhatsApp Green */
            color: #fff;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
            z-index: 1000;
            transition: 0.3s;
        }

        .whatsapp-float:hover {
            background-color: #128c7e;
            transform: scale(1.1);
            color: white;
        }

        /* મોબાઈલ માટે થોડું એડજસ્ટમેન્ટ */
        @media (max-width: 768px) {
            .whatsapp-float {
                bottom: 80px;
                right: 20px;
                width: 45px;
                height: 45px;
                font-size: 25px;
            }
        }


        @media (max-width: 992px) {
            .nav-menu { display: none; }
            .flex-container { flex-direction: column; text-align: center; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }
        a { text-decoration: none; color: inherit; }

        :root {
            --primary-blue: #0096d6;
            --light-blue: #00aae4;
            --green: #28a745;
            --beige: #ebdcd3;
            --dark-navy: #2c3e50;
            --footer-bg: #1a212d;
            --white: #ffffff;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; }
        body { background-color: #fff; overflow-x: hidden; scroll-behavior: smooth; }

        /* --- 1. HEADER & TOP BAR --- */
        .top-bar { background-color: #0099e5; color: white; padding: 10px 0; font-size: 14px; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        .top-content { display: flex; justify-content: flex-end; align-items: center; gap: 15px; }
        .social-icons { display: flex; gap: 15px; border-left: 1px solid rgba(255,255,255,0.4); padding-left: 15px; }
        .social-icons a { color: white; text-decoration: none; font-size: 16px; }


        .nav-container { display: flex; justify-content: space-between; align-items: center; }
        .logo img { height: 60px; }
        .nav-menu { display: flex; list-style: none; gap: 25px; }
        .nav-menu li a { text-decoration: none; color: #444; font-weight: 600; font-size: 13px; }
        .nav-menu li a.active { color: #0099e5; }
        .appointment-btn { border: 2px solid #24a148; color: #24a148; padding: 10px 25px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 14px; transition: 0.3s; }
        .appointment-btn:hover { background: #24a148; color: #fff; }

        /* --- 2. BANNER & DIVIDER --- */
        .about-banner { background-color: #fff; padding: 60px 0; text-align: center; }
        .about-banner h1 { color: #24a148; font-size: 32px; font-weight: 700; letter-spacing: 1px; }
        .divider { height: 20px; background-image: radial-gradient(circle at 10px -5px, transparent 12px, #fff 13px); background-size: 20px 20px; background-color: #f4faff; margin-top: -1px; }

        /* --- 3. COMMON SECTION STYLES --- */
        .section-padding { padding: 20px 10%; }
        .flex-container { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
        .text-side { flex: 1; min-width: 300px; }
        .image-side { flex: 1; min-width: 300px; }
        .image-side img { width: 100%; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        .tag { color: #24a148; font-weight: 700; font-size: 14px; margin-bottom: 15px; display: block; }
        .blue-line { width: 50px; height: 3px; background-color: #0099e5; margin-bottom: 25px; }
        p { color: #000000; line-height: 1.7; font-size: 15px; margin-bottom: 20px; text-align: center; text-align: left;}

        /* --- 4. TABS & LISTS --- */
        .tabs-wrapper { display: flex; gap: 10px; margin: 25px 0; }
        .tab-btn { flex: 1; padding: 15px; border: none; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; background: #f0f0f0; color: #555; transition: 0.3s; }
        .tab-btn.active { background: #009944; color: white; }
        .tab-content { display: none; padding-top: 10px; }
        .tab-content.active { display: block; }

        .list-style { list-style: none; }
        .list-style li { position: relative; padding-left: 20px; margin-bottom: 12px; font-size: 15px; color: #555; line-height: 1.6; }
        .list-style li::before { content: "•"; position: absolute; left: 0; color: #333; font-weight: bold; }

        /* --- 5. TEAM BOX --- */
        .team-box { background: #fff; border: 1px solid #eee; border-radius: 15px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); display: flex; gap: 30px; flex-wrap: wrap; }
        .doc-card { flex: 1; display: flex; gap: 20px; min-width: 400px; align-items: flex-start; }
        .doc-card img { width: 220px; border-radius: 10px; }
        .doc-info h3 { color: #0099e5; font-size: 18px; margin-bottom: 10px; }
        .highlight-quote { border-left: 4px solid #333; padding-left: 20px; font-style: italic; margin: 30px 0; color: #444; }

        /* --- 6. CTA BANNER (NEW) --- */
        .cta-section { 
            background: linear-gradient(rgba(0, 153, 229, 0.8), rgba(0, 153, 229, 0.8)), url('https://img.freepik.com/free-photo/group-doctors-smiling-hospital_23-2148111000.jpg');
            background-size: cover; background-position: center; padding: 80px 0; text-align: center; color: white;
        }
        .cta-section h2 { font-size: 48px; font-weight: 700; margin-bottom: 30px; }
        .btn-cta { background-color: #6ed06e; color: white; padding: 15px 35px; border-radius: 10px; text-decoration: none; font-weight: 600; display: inline-block; transition: 0.3s; }
        .btn-cta:hover { background-color: #5bbd5b; }

        /* --- 7. FOOTER SECTION (NEW) --- */
        /* --- NEW LIGHT GREEN FOOTER STYLE --- */
            .main-footer {
                background-color: #f4fbf4; /* સ્ક્રીનશોટ મુજબનો આછો લીલો કલર */
                padding: 70px 10% 20px;
                font-family: 'Open Sans', sans-serif;
                color: #444;
            }

            .footer-container {
                display: grid;
                grid-template-columns: 1.3fr 1fr 1fr; /* ૩ કોલમ ગ્રીડ */
                gap: 50px;
                max-width: 1200px;
                margin: 0 auto;
                text-align: left;
            }

            .footer-logo {
                height: 65px;
                margin-bottom: 20px;
            }

            .footer-col h4 {
                color: #1a1a1a;
                font-size: 18px;
                font-weight: 700;
                margin-bottom: 25px;
                font-family: 'Montserrat', sans-serif;
            }

            .footer-col p {
                margin: 5px 0 0;
                color: #555;
                font-size: 0.9rem;
                text-align: left; /* પેરેગ્રાફ પણ ડાબેથી શરૂ થશે */
            }

            /* સોશિયલ આઈકોન્સ */
            .footer-social {
                display: flex;
                gap: 15px;
            }

            .footer-social a {
                background: white;
                color: #555;
                width: 35px;
                height: 35px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                box-shadow: 0 2px 5px rgba(0,0,0,0.05);
                transition: 0.3s;
            }

            .footer-social a:hover {
                color: #1b5e20;
                transform: translateY(-3px);
            }

            /* સાધનોની યાદી (Equipments) */
            .equipment-list {
                list-style: none;
                padding: 0;
            }

            .equipment-list li {
                margin-bottom: 12px;
                font-size: 14px;
                color: #666;
                position: relative;
                padding-left: 0;
            }

            /* કોન્ટેક્ટ લિસ્ટ અને આઈકોન્સ */
            .contact-list {
                list-style: none;
                padding: 0;
            }

            .contact-list li {
                display: flex;
                align-items: flex-start;
                gap: 12px;
                margin-bottom: 18px;
                font-size: 14px;
                color: #555;
            }

            .contact-list i {
                color: #1b5e20; /* આઈકોનનો કલર ડાર્ક લીલો */
                font-size: 16px;
                margin-top: 4px;
            }

            /* કોપીરાઈટ સેક્શન */
            .footer-bottom {
                border-top: 1px solid #e0eee0;
                margin-top: 40px;
                padding-top: 20px;
                text-align: center;
                font-size: 13px;
                color: #888;
            }

            /* --- મોબાઈલ માટે રિસ્પોન્સિવ સેટિંગ્સ --- */
            @media (max-width: 1024px) {
                .footer-container {
                    grid-template-columns: 1fr 1fr;
                    gap: 30px;
                }
            }

            @media (max-width: 768px) {
                .main-footer {
                    padding: 50px 5% 20px;
                }
                .footer-container {
                    grid-template-columns: 1fr; /* મોબાઈલમાં એકની નીચે એક */
                    gap: 40px;
                }
                .footer-logo {
                    height: 55px;
                }
                .footer-col {
                    text-align: center; /* મોબાઈલમાં સેન્ટર લાઈનમેન્ટ */
                }
                .footer-social, .contact-list li {
                    justify-content: center;
                }
            }
        /* Back to top */
        .back-top { position: fixed; bottom: 30px; right: 30px; background: #1b5e20; color: #25d366; width: 45px; height: 45px; border-radius: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
        
        /* WhatsApp Float Styling */
        .whatsapp-float {
            position: fixed;
            bottom: 85px; /* એરો બટનથી ઉપર રાખવા માટે (30px + 50px gap) */
            right: 30px;
            background-color: #25d366; /* WhatsApp Green */
            color: #fff;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
            z-index: 1000;
            transition: 0.3s;
        }

        .whatsapp-float:hover {
            background-color: #128c7e;
            transform: scale(1.1);
            color: white;
        }

        /* મોબાઈલ માટે થોડું એડજસ્ટમેન્ટ */
        @media (max-width: 768px) {
            .whatsapp-float {
                bottom: 80px;
                right: 20px;
                width: 45px;
                height: 45px;
                font-size: 25px;
            }
        }

        a { text-decoration: none; color: inherit; }


        .contact-info li { display: flex; gap: 15px; margin-bottom: 20px; font-size: 14px; align-items: flex-start; }
        .contact-info i { color: #fff; font-size: 16px; margin-top: 3px; }

        /* Copyright Bar */
        .copyright { background-color: #151b22; padding: 25px 0; text-align: center; font-size: 12px; margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.05); }

        /* Back to top button */
        .back-to-top { position: fixed; bottom: 30px; right: 30px; background: #0099e5; color: white; width: 45px; height: 45px; border-radius: 8px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 18px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

        @media (max-width: 992px) {
            .nav-menu { display: none; }
            .flex-container { flex-direction: column; text-align: center; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .cta-section h2 { font-size: 30px; }
        }

        /* Section Styling */
        .gallery-section {
            padding: 80px 0;
            text-align: center;
            background-color: #fff;
        }

        .section-header {
            margin-bottom: 50px;
        }

        .gallery-title {
            font-size: 2.5rem;
            color: #1b5e20; /* Dark Green */
            font-weight: 800;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }

        .gallery-title::after {
            content: '';
            width: 60px;
            height: 3px;
            background: #1b5e20;
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .gallery-subtitle {
            font-size: 1.1rem;
            color: #555;
            max-width: 700px;
            margin: 20px auto 0;
        }

        /* Gallery Grid */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
            margin-bottom: 60px;
        }

        .gallery-item {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            height: 300px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        /* Hover Overlay */
        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            display: flex;
            align-items: flex-end;
            padding: 30px;
            opacity: 0; /* Hidden by default */
            transition: opacity 0.4s ease;
        }

        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

        .gallery-item:hover img {
            transform: scale(1.1);
        }

        .overlay-text {
            text-align: left;
            color: #fff;
        }

        .overlay-text h3 {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .overlay-text p {
            font-size: 0.9rem;
            opacity: 0.8;
        }

        /* Bottom Feature Cards */
        .feature-grid-bottom {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .f-card {
            background: #f4fbf4; /* Light green background */
            padding: 40px 30px;
            border-radius: 20px;
            border: 1px solid #e8f5e8;
        }

        .f-icon {
            width: 50px;
            height: 50px;
            background: #d8ead8;
            color: #1b5e20;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin: 0 auto 20px;
            font-size: 1.2rem;
            font-weight: bold;
        }

        .f-card h4 {
            font-size: 1.3rem;
            color: #1a1a1a;
            margin-bottom: 15px;
            font-weight: 700;
        }

        .f-card p {
            font-size: 0.95rem;
            color: #666;
            line-height: 1.6;
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .gallery-grid, .feature-grid-bottom {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 600px) {
            .gallery-grid, .feature-grid-bottom {
                grid-template-columns: 1fr;
            }
            .gallery-item {
                height: 250px;
            }
        }
        
        /* ============================= */
/* 🔥 GLOBAL MOBILE FIX */
/* ============================= */
@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    h1 { font-size: 26px !important; }
    h2 { font-size: 22px !important; }
    h3 { font-size: 18px !important; }

}

/* ============================= */
/* 🔥 NAVBAR FIX */
/* ============================= */
@media (max-width: 992px) {

    nav ul li {
        font-size: 14px;
    }

    .btn-book,
    .btn-book-nav {
        padding: 10px 15px;
        font-size: 14px;
    }

}

/* ============================= */
/* 🔥 HERO SECTION FIX */
/* ============================= */
@media (max-width: 768px) {

    .hero-container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

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

    .hero-title {
        font-size: 28px !important;
        line-height: 1.3;
    }

    .hero-desc {
        font-size: 14px;
        margin: 0 auto 20px;
    }

    .hero-btns {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary-green,
    .btn-outline {
        width: 100%;
        text-align: center;
    }

    .floating-review-card {
        position: relative;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        margin-top: 20px;
    }

}

/* ============================= */
/* 🔥 FEATURES GRID FIX */
/* ============================= */
@media (max-width: 768px) {

    .features-grid {
        grid-template-columns: 1fr !important;
    }

    .feature-box {
        padding: 40px 20px;
    }

}

/* ============================= */
/* 🔥 STRENGTH SECTION FIX */
/* ============================= */
@media (max-width: 768px) {

    .strength-container {
        flex-direction: column;
        gap: 20px;
    }

    .strength-image img {
        width: 100%;
    }

}

/* ============================= */
/* 🔥 COMPETENCY GRID FIX */
/* ============================= */
@media (max-width: 768px) {

    .comp-grid {
        grid-template-columns: 1fr !important;
    }

}

/* ============================= */
/* 🔥 TESTIMONIAL FIX */
/* ============================= */
@media (max-width: 768px) {

    .testi-card {
        padding: 20px;
    }

}

/* ============================= */
/* 🔥 APPOINTMENT FORM FIX */
/* ============================= */
@media (max-width: 768px) {

    .appointment-container {
        padding: 20px;
    }

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

}

/* ============================= */
/* 🔥 CONTACT PAGE FIX */
/* ============================= */
@media (max-width: 768px) {

    .contact-main-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

}

/* ============================= */
/* 🔥 FOOTER FIX */
/* ============================= */
@media (max-width: 768px) {

    .footer-container {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

}

/* ============================= */
/* 🔥 BUTTON & SPACING FIX */
/* ============================= */
@media (max-width: 768px) {

    section {
        padding: 40px 5% !important;
    }

}