:root {
            --pink-primary: #db2777;
            --pink-light: #fdf2f8;
            --green-primary: #059669;
            --green-light: #ecfdf5;
            --yellow-accent: #f59e0b;
            --yellow-light: #fffbeb;
            --text-dark: #1e293b;
            --bg-white: #ffffff;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-white);
            color: var(--text-dark);
            line-height: 1.7;
        }

        /* Utility Classes */
        .text-pink { color:#1f3c6a !important; }
        .text-green { color:blueviolet !important; }
        .text-yellow { color: var(--yellow-accent) !important; }
        .bg-pink-light { background-color: var(--pink-light) !important; }
        .bg-green-light { background-color: var(--green-light) !important; }
        .bg-yellow-light { background-color: var(--yellow-light) !important; }

        /* Custom Buttons */
        .btn-pink {
            background-color: var(--pink-primary);
            color: #ffffff;
            border: none;
            padding: 0.8rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn-pink:hover {
            background-color: #be185d;
            color: #ffffff;
            transform: translateY(-2px);
        }

        .btn-outline-green {
            border: 2px solid var(--green-primary);
            color: var(--green-primary);
            padding: 0.75rem 1.75rem;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn-outline-green:hover {
            background-color: var(--green-primary);
            color: #ffffff;
        }

        /* Top Bar */
        .top-bar {
            background-color: var(--pink-light);
            font-size: 0.9rem;
            border-bottom: 1px solid #fbcfe8;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.35rem;
        }

        /* HERO CAROUSEL SLIDER WITH BACKGROUND IMAGES */
        .hero-slide {
            height: 80vh;
            min-height: 500px;
            background-size: cover;
            background-position: center;
            position: relative;
            display: flex;
            align-items: center;
        }
        .hero-slide-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.4) 100%);
        }
        .hero-slide-content {
            position: relative;
            z-index: 2;
        }

        /* SECTION BACKGROUND IMAGES WITH OVERLAYS */
        .bg-section-image-1 {
            background: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
                        url('https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&w=1600&q=80') fixed center/cover;
        }
        .bg-section-image-2 {
            background: linear-gradient(rgba(253, 242, 248, 0.93), rgba(253, 242, 248, 0.93)),
                        url('D:\Hospialboardwork\Ectopic Pregnancy\Hospital\asset\Images\neonatologist-performing-detailed-health-assessment-premature-infant.jpg?auto=format&fit=crop&w=1600&q=80') fixed center/cover;
        }
        .bg-section-image-3 {
            background: linear-gradient(rgba(236, 253, 245, 0.94), rgba(236, 253, 245, 0.94)),
                        url('https://images.unsplash.com/photo-1538108149393-fbbd81895907?auto=format&fit=crop&w=1600&q=80') fixed center/cover;
        }

        /* Highlight Cards */
        .feature-box {
            margin-top: -50px;
            position: relative;
            z-index: 10;
        }
        .feature-card {
            background: #ffffff;
            padding: 25px;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(219, 39, 119, 0.1);
            border-bottom: 4px solid var(--pink-primary);
            transition: transform 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-5px);
        }

        /* Section Headings */
        .section-title {
            color: var(--pink-primary);
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        .section-subtitle {
            color: var(--green-primary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9rem;
        }

        /* Clean Cards */
        .clean-card {
            background: #ffffff;
            border: 1px solid #f1f5f9;
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
            transition: all 0.3s ease;
        }
        .clean-card:hover {
            transform: translateY(-5px);
            border-color: var(--green-primary);
            box-shadow: 0 10px 25px rgba(5, 150, 105, 0.12);
        }

        /* CIRCULAR PERFORMANCE METERS */
        .indicator-card {
            background: #ffffff;
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.05);
            border: 1px solid #f1f5f9;
            text-align: center;
            transition: all 0.3s ease;
        }
        .indicator-card:hover {
            transform: translateY(-5px);
            border-color: var(--pink-primary);
        }

        .circle-meter {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            font-weight: 700;
            font-size: 1.25rem;
        }
        .circle-meter-pink {
            background: conic-gradient(var(--pink-primary) 0% 98%, #fbcfe8 98% 100%);
            color: var(--pink-primary);
        }
        .circle-meter-green {
            background: conic-gradient(var(--green-primary) 0% 96%, #a7f3d0 96% 100%);
            color: var(--green-primary);
        }
        .circle-meter-yellow {
            background: conic-gradient(var(--yellow-accent) 0% 99%, #fde68a 99% 100%);
            color: var(--yellow-accent);
        }
        .circle-meter-inner {
            width: 86px;
            height: 86px;
            background: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Timeline Items */
        .timeline-box {
            border-left: 3px solid var(--pink-primary);
            padding-left: 20px;
            position: relative;
        }
        .timeline-item {
            position: relative;
            margin-bottom: 25px;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -27px;
            top: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--green-primary);
        }

        /* Gallery Overlay */
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
        }
        .gallery-item img {
            transition: transform 0.4s ease;
            height: 240px;
            object-fit: cover;
            width: 100%;
        }
        .gallery-item:hover img {
            transform: scale(1.08);
        }
        .gallery-overlay {
            position: absolute;
            inset: 0;
            background: rgba(219, 39, 119, 0.85);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            color: #ffffff;
            text-align: center;
            padding: 15px;
        }
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

        /* Footer */
        .footer {
            background-color: #1e1b1e;
            color: #cbd5e1;
        }
        .footer h5 { color: #ffffff; }
        .footer a { color: #cbd5e1; text-decoration: none; }
        .footer a:hover { color: var(--pink-primary); }

        .ta-text {
            font-size: 0.95rem;
            color: var(--green-primary);
            font-weight: 500;
        }