:root{
            --primary:#245c59;
            --primary-soft:#e9f3f2;
            --bg-gold-light:#fff4e1;
            --bg-light:#e9f3f2;
            --accent:#d9a692;
            --muted:#666;
            --bg:#ffffff;
            --glass: rgba(255,255,255,0.95);
            --shadow-soft: 0 8px 24px rgba(15, 30, 40, 0.08);
            --radius: 12px;
            --transition-fast: 0.18s ease;
            --transition-med: 0.25s ease;
            font-family: Inter, system-ui,-apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
        }

        *, *::before, *::after{
            box-sizing:border-box;
        }

     
        .container{
           
            margin:0 auto;
            padding: 1 rem 5%;
        }

        /* --- HEADER STRUCTURE --- */
        .site-header{
            position:fixed;
            top:0;
            left:0;
            right:0;
            background:var(--glass);
            backdrop-filter: blur(10px);
            box-shadow:var(--shadow-soft);
            z-index:999;
            transition:box-shadow var(--transition-med);
        }

        .header-main {
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:12px 0 0; /* Space for the logo row */
        }
        
        .top-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding-bottom: 12px;
            border-bottom:1px solid rgba(0,0,0,0.04);
        }

        .brand{
            display:flex;
            flex-direction: column;
            text-decoration:none;
            color:var(--primary);
        }

        .brand img{
            border-radius:10px;
            width: 85px;
            padding: 5px;
            height: auto;
            display:block;
        }

        .brand-sub{
            font-size:11px;
            color:var(--accent);
            letter-spacing:0.13em;
            font-weight:600;
            text-transform:uppercase;
            white-space:nowrap;
        }

        /* --- TOP NAVIGATION (DESKTOP) --- */
        .nav-top .nav-main{
            display:flex;
            gap:22px;
            align-items:center;
            list-style:none;
            padding:0;
            margin:0;
        }

        .nav-main a{
            color:#222;
            text-decoration:none;
            font-weight:500;
            font-size:14px;
            display:inline-flex;
            align-items:center;
            padding:8px 6px;
            border-radius:999px;
            transition:all var(--transition-fast);
        }

        .nav-main a:hover{
            color:var(--primary);
            background:var(--primary-soft);
            transform:translateY(-1px);
        }

        .btn-cta{
            background:linear-gradient(135deg,var(--primary),#3e817e);
            color:#fff !important;
            padding:9px 18px;
            border-radius:999px;
            box-shadow:0 10px 24px rgba(36,92,89,0.35);
            font-weight:600;
            font-size:13px;
            letter-spacing:0.04em;
            text-transform:uppercase;
        }

        .btn-cta:hover{
            transform:translateY(-2px);
            box-shadow:0 14px 30px rgba(36,92,89,0.4);
        }

        /* --- HAMBURGER BUTTON --- */
        .btn-mobile{
            display:none;
            background:none;
            border:0;
            padding:7px;
            border-radius:999px;
            cursor:pointer;
            transition:background var(--transition-fast);
        }

        .hamburger, .hamburger::before, .hamburger::after{
            display:block;
            width:24px;
            height:2px;
            background:var(--primary);
            border-radius:999px;
            position:relative;
            transition:transform var(--transition-med), top var(--transition-med), background var(--transition-med);
        }
        
        .hamburger::before, .hamburger::after{
            content:"";
            position:absolute;
            left:0;
        }

        .hamburger::before{ top:-7px; }
        .hamburger::after{ top:7px; }

        .site-header.nav-open .hamburger{ background:transparent; }
        .site-header.nav-open .hamburger::before{ top:0; transform:rotate(45deg); }
        .site-header.nav-open .hamburger::after{ top:0; transform:rotate(-45deg); }
        #mobile-btn-expert{ display: none; }


        /* --- BOTTOM NAVIGATION (DESKTOP MEGA-MENU) --- */
        .nav-bottom{
            padding:8px 0 10px;
        }

        .menu{
            display:flex;
            gap:18px;
            list-style:none;
            padding:0;
            margin:0;
            align-items:stretch;
        }

        .menu > li{
            position:relative;
        }

        .menu .link{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:9px 10px;
            color:var(--primary);
            text-decoration:none;
            font-weight:600;
            font-size:14px;
            border-radius:999px;
            border:1px solid transparent;
            transition:background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
            background:rgba(248,250,250,0.8);
        }

        .menu .link:hover{
            background:var(--primary-soft);
            border-color:rgba(36,92,89,0.18);
            transform:translateY(-1px);
        }
        
        /* Mega dropdown desktop */
        .mega{
            position:absolute;
            left:0;
            top:100%;
            margin-top:2px;
            transform:translateY(6px);
            opacity:0;
            visibility:hidden;
            pointer-events:none;
            transition:opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
            background:var(--bg);
            padding:18px 20px;
            border-radius:var(--radius);
            box-shadow:0 22px 40px rgba(10,20,30,0.1);
            display:grid;
            gap:12px;
            max-height: 360px;
            overflow-y: auto;
            width: max-content; /* Ensure it fits content naturally */
        }
        /* Hover to show mega menu */
        .menu > li:hover .mega,
        .menu > li .mega:hover{
            opacity:1;
            visibility:visible;
            pointer-events:auto;
            transform:translateY(0);
        }

        .mega ul{
            list-style:none;
            padding:0;
            margin:0;
            display:flex;
            flex-direction:column;
            gap:6px;
        }

        .mega ul li{
            border-bottom: 1px solid #cfcfcf;
            padding:6px 2px;
        }

        .mega ul li:last-child{
            border-bottom:none;
        }

        .mega a{
            display: block;
            padding: 4px 6px;
            color:#333;
            text-decoration:none;
            font-weight:500;
            font-size:13px;
            border-radius:8px;
            transition:background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
        }

        .mega a:hover{
            background:#f5f7f7;
            color:var(--primary);
            transform:translateX(1px);
        }

        /* --- SCROLLBAR STYLES (Kept for completeness) --- */
        .mega::-webkit-scrollbar{ width:6px; }
        .mega::-webkit-scrollbar-track{ background:#F6F1E3; border-radius:10px; }
        .mega::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#E5C15A,#C49B2A); border-radius:10px; }
        .mega::-webkit-scrollbar-thumb:hover{ background:#C19A2B; }
        
        /* --- MOBILE STYLES (max-width 992px) --- */
        @media (max-width: 992px){
            body {
                padding-top: 65px; /* Adjust for smaller fixed header */
            }
            .header-main {
                padding: 10px 0;
            }
            .top-row {
                /* top-row is not strictly necessary anymore but kept for structure */
                border-bottom: none; 
                padding-bottom: 0;
            }
            .brand img {
                width: 75px;
            }
            .brand-sub {
                font-size:8px !important; /* Hide sub-text on mobile for space */
            }

            /* Show mobile menu toggle button */
            .btn-mobile{
                display:inline-flex;
            }
            /* Show "Our Expertise" button for toggling services menu */
            #mobile-btn-expert{
                display: block;
                padding: 8px 15px;
                font-size: 13px;
                background: var(--primary);
                color: #fff;
                border-radius: 999px;
                border: none;
                font-weight: 600;
                cursor: pointer;
            }

            /* --- TOP NAV MOBILE DROPDOWN (Hamburger Menu) --- */
            .nav-top{
                display:none;
                position:absolute;
                left:0;
                right:0;
                top:100%;
                background:var(--bg);
                padding:10px 20px 14px;
                box-shadow:var(--shadow-soft);
                border-top: 1px solid #eee;
            }

            .site-header.nav-open .nav-top{
                display:block;
            }

            .nav-top .nav-main{
                flex-direction:column;
                gap:0;
            }

            .nav-top .nav-main li,
            .nav-top .nav-main > div {
                width:100%;
                padding: 0;
                border-bottom:1px solid #eee;
            }
            .nav-top .nav-main li:last-child {
                border-bottom: none;
            }
            
            .nav-top .nav-main a{
                width:100%;
                padding:12px 0;
                border-radius:0;
                font-size:15px;
                justify-content: flex-start;
            }
            .nav-top .nav-main .btn-cta {
                justify-content:center;
                margin: 10px 0;
                padding: 12px;
            }
            /* Social Icons */
            .nav-top .nav-main > div {
                display: flex;
                gap: 1.5rem;
                justify-content: center;
                padding: 15px 0;
            }
            .nav-top .nav-main .fa-brands {
                font-size: 1.6rem;
                color: var(--primary);
            }

            /* --- BOTTOM NAV MOBILE ACCORDION (Services Menu) --- */
            .nav-bottom{
                padding:0 0 8px; /* Remove top padding for flush look */
                max-height: 0;
                overflow: hidden;
                opacity: 0;
                transition: max-height 0.4s ease, opacity 0.4s ease;
            }

            .nav-bottom.show {
                max-height: 600px; /* Sufficient height to show all accordions */
                opacity: 1;
                overflow-y: auto;
                padding-top: 8px;
            }

            .menu{
                flex-direction:column;
                gap:4px;
                padding: 0 10px; /* Padding for the container */
            }

            .menu > li{
                border-radius:8px;
                background:var(--primary-soft);
                display: flex;
                flex-direction: column;
                overflow: hidden; /* Hide mega content when not open */
                border: 1px solid rgba(36,92,89,0.1);
            }

            .menu .link{
                width:100%;
                justify-content:space-between;
                background:transparent;
                border:none;
                padding:12px 15px;
                font-size:15px;
                font-weight: 700;
                color: var(--primary);
                border-radius: 8px;
            }
            .menu .link:hover {
                transform: none; /* Disable hover movement on mobile */
            }

            .menu > li .fa-chevron-down {
              transition: transform var(--transition-fast);
              font-size: 10px;
            }
            
            /* Mobile dropdown: uses max-height for accordion effect */
            .mega{
                position: static; /* Change positioning */
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                box-shadow: none;
                padding:0; /* Padding inside the open accordion */
                margin-top:0;
                display:block;
                max-height: 0;
                transition: max-height 0.3s ease-out;
                overflow-y: hidden;
                border-top: 1px solid rgba(36,92,89,0.1);
            }

            .menu > li.open .mega{
                max-height: 400px; /* Sufficient height for content */
            }

            /* Chevron rotation when open */
            .menu > li.open .fa-chevron-down {
                transform: rotate(180deg);
            }

            /* Styling for the treatment links inside the mega menu */
            .mega ul{
                gap:2px;
                border-left: 2px solid var(--accent); /* Visual grouping */
                padding-left: 10px;
            }

            .mega ul li {
                border-bottom: 1px dotted #ddd;
                padding: 5px 2px;
            }
            .eterna-contact-layout{
            display:block !important;
            }
            .eterna-card-details a{
            font-size:14px;
            }
        }
   /*End of header*/
   
   .hero-carousel {
  position: relative;
  width: 100%;
  height: 450px; /* change height as per your design */
  overflow: hidden;
}

.hero-carousel img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

/* First image visible initially */
.hero-carousel img.active {
  opacity: 1;
}

/* Badge styling */
.hero-badge {
  position: absolute;
  bottom: 30px;
  left: 30px;
  background: rgba(255, 255, 255, 0.85);
  padding: 12px 18px;
  border-radius: 8px;
  text-align: center;
  z-index: 5;
}

.hero-badge-number {
  font-size: 28px;
  font-weight: bold;
  color: #1e293b;
}

.hero-badge-text {
  font-size: 14px;
  color: #334155;
}

 /* Container disease and Section Layout */
        .container-disease{
            width: 100%;
            
            margin: 0 auto;
            padding: 2rem 5%; /* px-4 */
        }

       .disease-showcase {
          
            background-color: #ffffff; 
            text-align:center;
        }
        
        /*@media (min-width: 1024px) {
            .disease-showcase {
                padding: 6rem 0;
            }*/
        }

        /* Section Heading */
        .section-heading {
            font-size: 2.25rem; /* text-3xl */
            font-weight: 800; /* font-extrabold */
            text-align: center;
            color: #1f2937; /* text-gray-900 */
            margin-bottom: 3rem; /* mb-12 */
        }
        
        @media (min-width: 640px) {
            .section-heading {
                font-size: 2.5rem; /* sm:text-4xl */
            }
        }

        /* Grid Layout (Wrapper for injected cards) */
        .disease-grid-wrapper {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
            gap: 1.5rem; /* gap-6 */
        }
        
        @media (min-width: 640px) {
            .disease-grid-wrapper {
                grid-template-columns: repeat(2, minmax(0, 1fr)); /* sm:grid-cols-2 */
            }
        }

        @media (min-width: 768px) {
            .disease-grid-wrapper {
                grid-template-columns: repeat(3, minmax(0, 1fr)); /* md:grid-cols-3 */
            }
        }

        @media (min-width: 1024px) {
            .disease-grid-wrapper {
                grid-template-columns: repeat(4, minmax(0, 1fr)); /* lg:grid-cols-4 */
                gap: 2rem; /* lg:gap-8 */
            }
        }


        /* Card Styles */
        .disease-card {
            display: block;
            text-decoration: none;
            background-color: #ffffff; /* bg-white */
            border-radius: 0.75rem; /* rounded-xl */
            overflow: hidden;
            /* shadow-lg */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            
            /* Custom transition for hover effect */
            transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
        }

        .disease-card:hover {
            /* hover:shadow-2xl */
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            /* hover:translate-y-[-4px] equivalent */
            transform: translateY(-4px); 
        }

        /* Image Container */
        .card-image-wrapper {
            width: 100%;
            height: 12rem; /* h-48 - fixed height for CLS prevention */
            overflow: hidden;
            background-color: #eff6ff; /* bg-blue-50 */
        }

        /* Image Tag */
        .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* group-hover:scale-[1.05] transition duration-500 */
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .disease-card:hover .card-image {
            transform: scale(1.05);
        }

        /* Text Content */
        .card-content {
            padding: 1.25rem; /* p-5 */
        }

        .card-title {
            font-size: 1.25rem; /* text-xl */
            font-weight: 700; /* font-bold (changed from 600 in JS) */
            color: #1f2937; /* text-gray-800 */
            margin-bottom: 0.5rem; /* mb-2 */
            /* group-hover:text-cyan-600 transition duration-300 */
            transition: color 0.3s ease;
        }

        .disease-card:hover .card-title {
            color: #0891b2; /* text-cyan-600 */
        }



        .blog-section {
    padding: 60px 0; /* Vertical spacing for separation */
    background-color: #f9f9f9; /* Subtle background color */
}



/* Section Title Styling */
.section-title {
    font-size: 2.5em;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: -0.5px;
}

/* --- Blog Grid (The Core Layout) --- */
.blog-grid {
    display: grid;
    /* Default: 1 column for mobile */
    grid-template-columns: 1fr;
    gap: 30px; /* Spacing between cards */
}

/* Tablet and larger: 2 columns */
@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop and larger: 3 columns */
@media (min-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Blog Post Card Styling --- */
.blog-post {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtle shadow for modern depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Ensures image corners are rounded */
    display: flex; /* Makes the card use flex properties internally */
    flex-direction: column; /* Stacks image and content vertically */
}

/* Hover effect for interaction (Web Vitals - smoothness) */
.blog-post:hover {
    transform: translateY(-5px); /* Lift effect */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* --- Image Styling (Aspect Ratio & Responsiveness) --- */
.post-image {
    width: 100%;
    height: 200px; /* Fixed height for visual consistency */
    object-fit: cover; /* Ensures image fills the area without distortion */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* --- Content Area Styling --- */
.post-content {
    padding: 20px;
    /* Flex-grow allows content to fill available space,
       useful if excerpts have different lengths */
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

.post-meta {
    font-size: 0.85em;
    color: #6a6a6a;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.post-title {
    font-size: 1.3em;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.post-title a {
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 600;
}

.post-title a:hover {
    color: #3498db; /* Primary link color for hover */
}

.post-excerpt {
    font-size: 1em;
    color: #4a4a4a;
    margin-bottom: 15px;
    line-height: 1.6;
    /* Truncation for consistent height, if desired (needs more CSS or JS)
       For purity, we rely on the `height: 200px` on the image for consistency */
}

.read-more {
    color: #3498db;
    text-decoration: none;
    font-weight: 600;
    margin-top: auto; /* Pushes the link to the bottom */
    display: inline-block;
    transition: color 0.2s;
}

.read-more:hover {
    color: #2980b9;
    text-decoration: underline;
}

/* --- View All Posts Link --- */
.all-posts-link-wrapper {
    text-align: center;
    margin-top: 40px;
}

.all-posts-link {
    display: inline-block;
    padding: 12px 25px;
    background-color: #3498db;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.all-posts-link:hover {
    background-color: #2980b9;
}

        .card-description {
            font-size: 0.875rem; /* text-sm */
            color: #4b5563; /* text-gray-600 */
            margin: 0;
        }




 /* 1. CSS Variables and Base Styles */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
        
        :root {
            --color-teal-600: #0d9488;
            --color-cyan-800: #155e75;
            --color-teal-300: #48a6a6;
            --color-teal-100: #e0f2f1;
            --color-teal-200: #99c2c1;
            --color-white: #ffffff;
            --color-bg-light: #f9fafb;
        }

       
        /* Utility classes (Container/Centering) */
        .eterna-contact-container {
            max-width: 1280px; /* max-w-7xl */
            margin: 0 auto;
            padding: 0 1rem; /* px-4 */
        }
        
        /* 2. Main Contact Section Styling */
        .eterna-contact-section {
            padding: 4rem 0; /* py-16 */
            margin: 3rem auto; /* mx-auto my-12 */
            max-width: 95%;
            border-radius: 1rem; /* rounded-xl */
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
            color: var(--color-white);
            /* Gradient background */
            background: linear-gradient(135deg, var(--color-teal-600) 0%, var(--color-cyan-800) 100%);
        }

        /* 3. Section Header */
        .eterna-section-header {
            text-align: center;
            margin: 0 auto 3rem; /* mb-12 */
            max-width: 768px; /* max-w-3xl */
        }

        .eterna-section-subtitle {
            font-size: 0.875rem; /* text-sm */
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-teal-300);
            margin-bottom: 0.5rem; /* mb-2 */
        }

        .eterna-section-title {
            font-size: 2.25rem; /* text-4xl */
            line-height: 1.2;
            font-weight: 800; /* font-extrabold */
            margin-bottom: 1rem; /* mb-4 */
        }
        
        .eterna-section-description {
            font-size: 1.125rem; /* text-lg */
            opacity: 0.9;
            color: var(--color-teal-100);
        }

        /* 4. Contact Layout (Grid for cards and map) */
        .eterna-contact-layout {
            display: grid;
            grid-template-columns: 1fr; /* Default: 1 column */
            gap: 3rem; /* gap-12 */
            align-items: flex-start;
        }

        /* 5. Contact Cards */
        .eterna-contact-cards-wrapper {
            display: flex;
            flex-direction: column;
            gap: 1.5rem; /* space-y-6 */
        }

        .eterna-contact-card {
            padding: 1.5rem; /* p-6 */
            border-radius: 0.75rem; /* rounded-xl */
            border: 1px solid rgba(255, 255, 255, 0.2); /* border-white/20 */
            background: rgba(255, 255, 255, 0.1); /* bg-white/10 */
            backdrop-filter: blur(5px); /* backdrop-blur-sm */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* shadow-lg */
            transition: all 0.3s ease;
        }

        .eterna-contact-card:hover {
            background: rgba(255, 255, 255, 0.2); /* hover:bg-white/20 */
            transform: scale(1.01); /* hover:scale-[1.01] */
        }

        .eterna-card-content {
            display: flex;
            align-items: flex-start;
            gap: 1rem; /* space-x-4 */
        }

        .eterna-contact-icon {
            padding: 0.75rem; /* p-3 */
            background-color: #14b8a6; /* teal-500 */
            border-radius: 9999px; /* rounded-full */
            color: var(--color-white);
            font-size: 1.5rem; /* text-2xl */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-xl */
        }

        .eterna-card-details h3 {
            font-size: 1.25rem; /* text-xl */
            font-weight: 700; /* font-bold */
            margin-top: 0;
            margin-bottom: 0.25rem; /* mb-1 */
        }

        .eterna-card-details p, .eterna-card-details address {
            margin: 0;
            line-height: 1.5;
            color: var(--color-teal-100);
        }

        .eterna-card-details address {
            font-style: normal;
        }

        .eterna-card-details a {
            color: inherit;
            text-decoration: none;
            font-weight: 500;
            transition: text-decoration 0.3s ease;
        }

        .eterna-card-details a:hover {
            text-decoration: underline;
            text-underline-offset: 4px;
        }

        .eterna-card-details .eterna-time {
            font-size: 0.875rem; /* text-sm */
            color: var(--color-teal-200);
            margin-top: 0.25rem;
        }

        /* 6. Google Map Styling */
        .eterna-map-container {
            background-color: var(--color-white);
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
            overflow: hidden;
            height: 24rem; /* h-96 */
            min-height: 300px;
        }

        .eterna-map-container iframe {
            border: 0;
            width: 100%;
            height: 100%;
            display: block;
        }


        /* 7. Responsiveness (for larger screens) */
        @media (min-width: 640px) { /* sm breakpoint */
            .eterna-contact-container {
                padding: 0 1.5rem; /* sm:px-6 */
            }
        }
        
        @media (min-width: 768px) { /* md breakpoint */
            .eterna-contact-section {
                padding: 6rem 0; /* md:py-24 */
            }
        }

        @media (min-width: 1024px) { /* lg breakpoint */
            .eterna-contact-layout {
                grid-template-columns: repeat(2, 1fr); /* lg:grid-cols-2 */
            }
            .eterna-contact-container {
                padding: 0 2rem; /* lg:px-8 */
            }
            .eterna-map-container {
                height: -webkit-fill-available; /* Allow map to take full height of the grid row */
            }
        }


/*
.why-choose {
  padding: 70px 20px;
  background: var(--light-bg);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}


.section-title {
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  color: var(--dark);
  margin-bottom: 10px;
}

.section-title span {
  color: var(--primary);
}

.section-subtitle {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px;
  font-size: 1.1rem;
  color: var(--grey);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}


.feature-card {
  background: var(--card-bg);
  padding: 25px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid #eee;
}

.feature-card h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--dark);
}

.feature-card p {
  font-size: 1rem;
  color: var(--grey);
  line-height: 1.55;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hover-shadow);
}


@media (max-width: 600px) {
  .section-title {
    font-size: 1.9rem;
  }
  .feature-card {
    padding: 20px;
  }
} ---------- Responsive ---------- */