/* ============================================================
        BASE STYLES (from style.css)
        ============================================================ */
        * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        }

        :root {
        --primary-color: #2563eb;
        --secondary-color: #06b6d4;
        --accent-color: #10b981;
        --text-dark: #1f2937;
        --text-light: #6b7280;
        --white: #ffffff;
        --light-blue: #f0f9ff;
        --gradient: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
        }

        body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.6;
        color: var(--text-dark);
        }

        /* Navigation */
        nav {
        position: fixed;
        top: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        z-index: 1000;
        padding: 1rem 0;
        transition: all 0.3s ease;
        }

        .nav-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 2rem;
        }

        .logo {
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--primary-color);
        }

        .nav-links {
        display: flex;
        list-style: none;
        gap: 2rem;
        }

        .nav-links a {
        text-decoration: none;
        color: var(--text-dark);
        font-weight: 500;
        transition: color 0.3s ease;
        }

        .nav-links a:hover,
        .nav-links a.active {
        color: var(--primary-color);
        }

        .emergency-btn {
        background: var(--gradient);
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
        }

        .emergency-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
        }

        /* Modern Hero Section */
        .hero {
        min-height: 100vh;
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%);
        display: flex;
        align-items: center;
        padding: 6rem 0 4rem;
        position: relative;
        overflow: hidden;
        }

        .hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
        opacity: 0.3;
        }

        .hero-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
        position: relative;
        z-index: 2;
        }

        .hero-text h1 {
        font-size: 3.5rem;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 1.5rem;
        line-height: 1.2;
        }

        .hero-text .subtitle {
        font-size: 1.5rem;
        color: var(--primary-color);
        font-weight: 600;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        }

        .hero-text p {
        font-size: 1.2rem;
        color: var(--text-light);
        margin-bottom: 2rem;
        line-height: 1.7;
        }

        .hero-buttons {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
        }

        .btn-primary {
        background: var(--gradient);
        color: white;
        padding: 1rem 2rem;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
        }

        .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(37, 99, 235, 0.4);
        }

        .btn-secondary {
        background: transparent;
        color: var(--primary-color);
        padding: 1rem 2rem;
        border: 2px solid var(--primary-color);
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
        }

        .btn-secondary:hover {
        background: var(--primary-color);
        color: white;
        transform: translateY(-3px);
        }

        .hero-visual {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        }

        .doctor-image {
        width: 100%;
        max-width: 500px;
        height: 600px;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
        transform: perspective(1000px) rotateY(-5deg);
        transition: all 0.3s ease;
        }

        .doctor-image:hover {
        transform: perspective(1000px) rotateY(0deg) scale(1.02);
        }

        .doctor-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        }

        .floating-card {
        position: absolute;
        background: white;
        padding: 1.5rem;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        animation: float 3s ease-in-out infinite;
        }

        .floating-card-1 {
        top: 10%;
        left: -10%;
        text-align: center;
        }

        .floating-card-2 {
        bottom: 20%;
        right: -15%;
        text-align: center;
        }

        .floating-card .icon {
        width: 60px;
        height: 60px;
        background: var(--gradient);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        color: white;
        font-size: 1.5rem;
        }

        .floating-card h4 {
        font-size: 1.1rem;
        color: var(--text-dark);
        margin-bottom: 0.5rem;
        }

        .floating-card p {
        font-size: 0.9rem;
        color: var(--text-light);
        margin: 0;
        }

        @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
        }

        /* Stats Section */
        .stats {
        background: var(--gradient);
        padding: 4rem 0;
        color: white;
        }

        .stats-container {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
        padding: 0 2rem;
        }

        .stat-item {
        text-align: center;
        padding: 2rem;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 15px;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        }

        .stat-item:hover {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.2);
        }

        .stat-number {
        display: block;
        font-size: 3rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
        }

        .stat-label {
        font-size: 1.1rem;
        opacity: 0.9;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
        .nav-links {
        display: none;
        }

        .mobile-menu-btn {
        display: block !important;
        }

        .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
        }

        .hero-text h1 {
        font-size: 2.5rem;
        }

        .hero-buttons {
        justify-content: center;
        }

        .doctor-image {
        max-width: 400px;
        height: 500px;
        transform: none;
        }

        .floating-card-1,
        .floating-card-2 {
        display: none;
        }

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

        @media (max-width: 480px) {
        .hero-text h1 {
        font-size: 2rem;
        }

        .btn-primary,
        .btn-secondary {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
        }

        .stats-container {
        grid-template-columns: 1fr;
        }
        }

        /* Mobile Menu Styles */
        .mobile-menu-btn {
        display: none;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--primary-color);
        cursor: pointer;
        }

        .nav-links.mobile-active {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 2rem;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        /* Additional sections would go here */
        .section {
        padding: 4rem 0;
        }

        .section-header {
        text-align: center;
        margin-bottom: 3rem;
        }

        .section-title {
        font-size: 2.5rem;
        color: var(--text-dark);
        margin-bottom: 1rem;
        }

        .section-subtitle {
        font-size: 1.2rem;
        color: var(--text-light);
        max-width: 600px;
        margin: 0 auto;
        }

        /* Slideshow Styles */
        .slideshow-container {
        position: relative;
        width: 1200px;
        max-width: 95%;
        margin: 2rem auto;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        background: white;
        }

        .slide {
        display: none;
        position: relative;
        width: 100%;
        height: 600px;
        transition: all 0.6s ease-in-out;
        }

        .slide.active {
        display: block;
        animation: fadeIn 0.6s ease-in-out;
        }

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

        .slide-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0,0,0,0.8));
        color: white;
        padding: 3rem 2rem 2rem;
        transform: translateY(50px);
        opacity: 0;
        transition: all 0.6s ease 0.3s;
        }

        .slide.active .slide-content {
        transform: translateY(0);
        opacity: 1;
        }

        .slide-content h3 {
        font-size: 2.5rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #fff;
        margin-top: 0;
        }

        .slide-content p {
        font-size: 1.2rem;
        line-height: 1.4;
        opacity: 0.9;
        margin-bottom: 0;
        }

        .slide-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.9);
        border: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 1.2rem;
        color: var(--primary-color);
        transition: all 0.3s ease;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        }

        .slide-nav:hover {
        background: rgba(255, 255, 255, 1);
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .slide-nav.prev {
        left: 20px;
        }

        .slide-nav.next {
        right: 20px;
        }

        .slide-indicators {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
        z-index: 10;
        }

        .indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        padding: 0;
        }

        .indicator.active,
        .indicator:hover {
        background: #fff;
        transform: scale(1.2);
        }

        @keyframes fadeIn {
        from {
        opacity: 0;
        transform: scale(1.02);
        }
        to {
        opacity: 1;
        transform: scale(1);
        }
        }

        /* Community Care Section */
        .community-care {
        padding: 4rem 0;
        background: #f8fafc;
        }

        .community-care-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
        }

        .community-care-content h2 {
        font-size: 2.5rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
        }

        .telemedicine-features {
        display: grid;
        gap: 1.5rem;
        margin: 2rem 0;
        }

        .feature-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        }

        .feature-item .icon {
        width: 50px;
        height: 50px;
        background: var(--gradient);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.2rem;
        flex-shrink: 0;
        }

        .telemedicine-buttons {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        }

        .telemedicine-card {
        text-align: center;
        padding: 2rem;
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .telemedicine-card .icon {
        width: 80px;
        height: 80px;
        background: var(--gradient);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        color: white;
        font-size: 2rem;
        }

        /* Services Section */
        .services {
        padding: 4rem 0;
        }

        .services-grid {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2rem;
        }

        .service-card {
        background: white;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        }

        .service-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        }

        .service-image {
        height: 200px;
        background-size: cover;
        background-position: center;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        }

        .service-icon {
        width: 70px;
        height: 70px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: var(--primary-color);
        }

        .service-title {
        font-size: 1.3rem;
        margin: 1.5rem 1.5rem 1rem;
        color: var(--text-dark);
        }

        .service-description {
        padding: 0 1.5rem 1.5rem;
        color: var(--text-light);
        line-height: 1.6;
        }

        /* About Section */
        .about {
        padding: 4rem 0;
        background: #f8fafc;
        }

        .about-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
        }

        .about-content h2 {
        font-size: 2.5rem;
        color: var(--text-dark);
        margin-bottom: 1.5rem;
        }

        .about-content p {
        font-size: 1.1rem;
        color: var(--text-light);
        margin-bottom: 1.5rem;
        line-height: 1.7;
        }

        .about-features {
        list-style: none;
        padding: 0;
        }

        .about-features li {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        margin-bottom: 1rem;
        color: var(--text-dark);
        }

        .about-features .icon {
        color: var(--accent-color);
        font-size: 1.2rem;
        }

        .about-image {
        width: 100%;
        height: 400px;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
        }

        /* Contact Section */
        .contact {
        padding: 4rem 0;
        }

        .contact-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        }

        .contact-info h2 {
        font-size: 2.5rem;
        color: var(--text-dark);
        margin-bottom: 2rem;
        }

        .contact-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 2rem;
        }

        .contact-item .icon {
        width: 50px;
        height: 50px;
        background: var(--gradient);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.2rem;
        flex-shrink: 0;
        }

        .contact-item h4 {
        font-size: 1.2rem;
        color: var(--text-dark);
        margin-bottom: 0.5rem;
        }

        .contact-item p {
        color: var(--text-light);
        margin: 0;
        }

        .appointment-form {
        background: white;
        padding: 2rem;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .appointment-form h3 {
        font-size: 1.8rem;
        color: var(--text-dark);
        margin-bottom: 1.5rem;
        }

        .form-group {
        margin-bottom: 1.5rem;
        }

        .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--text-dark);
        font-weight: 500;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
        width: 100%;
        padding: 0.8rem;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        font-size: 1rem;
        transition: all 0.3s ease;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        /* Animation Styles */
        @keyframes slideInFromRight {
        from {
        transform: translateX(100%);
        opacity: 0;
        }
        to {
        transform: translateX(0);
        opacity: 1;
        }
        }

        @keyframes pulse {
        0%, 100% {
        transform: scale(1);
        }
        50% {
        transform: scale(1.05);
        }
        }

        .animate-fade-in {
        animation: fadeInUp 0.6s ease forwards;
        }

        .cursor {
        animation: blink 1s infinite;
        }

        @keyframes blink {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0; }
        }

        @keyframes fadeInUp {
        from {
        opacity: 0;
        transform: translateY(30px);
        }
        to {
        opacity: 1;
        transform: translateY(0);
        }
        }

        /* Mobile responsiveness for additional sections */
        @media (max-width: 1024px) {
        .slideshow-container {
        width: 90%;
        margin: 1.5rem auto;
        }

        .slide {
        height: 500px;
        }
        }

        @media (max-width: 768px) {
        .community-care-container,
        .about-container,
        .contact-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        }

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

        .telemedicine-buttons,
        .hero-buttons {
        justify-content: center;
        }

        .slideshow-container {
        width: 95%;
        margin: 1rem auto;
        }

        .slide {
        height: 400px;
        }

        .slide-content {
        padding: 2rem 1.5rem 1.5rem;
        }

        .slide-content h3 {
        font-size: 1.8rem;
        }

        .slide-content p {
        font-size: 1rem;
        }

        .slide-nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        }

        .slide-nav.prev {
        left: 10px;
        }

        .slide-nav.next {
        right: 10px;
        }
        }

        @media (max-width: 480px) {
        .slide {
        height: 300px;
        }

        .slide-content {
        padding: 1.5rem 1rem 1rem;
        }

        .slide-content h3 {
        font-size: 1.3rem;
        }

        .slide-content p {
        font-size: 0.9rem;
        }

        .slide-nav {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
        }

        }

        /* ============================================================
        BRANCHES & DEPARTMENTS (from departBranches.css)
        ============================================================ */
        /* Page Header Styles */
        .page-header {
        background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
        color: white;
        padding: 120px 0 80px;
        text-align: center;
        margin-top: 80px; /* Account for fixed nav */
        }

        .header-content h1 {
        font-size: 3rem;
        font-weight: 700;
        margin-bottom: 1rem;
        }

        .header-content p {
        font-size: 1.2rem;
        opacity: 0.9;
        max-width: 600px;
        margin: 0 auto;
        }

        /* Contact CTA Section */
        .contact-cta {
        background: #f8f9fa;
        padding: 60px 0;
        text-align: center;
        }

        .contact-cta-content h2 {
        font-size: 2.5rem;
        color: #2c3e50;
        margin-bottom: 1rem;
        }

        .contact-cta-content p {
        font-size: 1.2rem;
        color: #6c757d;
        margin-bottom: 2rem;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        }

        .cta-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
        }

        .btn-primary, .btn-secondary {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 1rem 2rem;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
        }

        .btn-primary {
        background: linear-gradient(135deg, #2563eb, #06b6d4);
        color: white;
        }

        .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(37, 99, 235, 0.4);
        color: white;
        text-decoration: none;
        }

        .btn-secondary {
        background: transparent;
        color: #2563eb;
        border: 2px solid #2563eb;
        }

        .btn-secondary:hover {
        background: #2563eb;
        color: white;
        transform: translateY(-3px);
        text-decoration: none;
        }

        /* Branches Section Styles */
        .branches {
        background: #f8f9fa;
        padding: 80px 0;
        }

        .branches-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2rem;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        }

        .branch-card {
        background: white;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .branch-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        .branch-image {
        height: 200px;
        background-size: cover;
        background-position: center;
        position: relative;
        background-color: #e9ecef;
        }

        .branch-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.8), rgba(6, 182, 212, 0.8));
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        }

        .branch-card:hover .branch-overlay {
        opacity: 1;
        }

        .branch-icon {
        font-size: 3rem;
        color: white;
        }

        .branch-content {
        padding: 2rem;
        }

        .branch-title {
        font-size: 1.5rem;
        color: #2c3e50;
        margin-bottom: 1rem;
        font-weight: 600;
        }

        .branch-description {
        color: #6c757d;
        margin-bottom: 1.5rem;
        line-height: 1.6;
        }

        .branch-details {
        margin-bottom: 1.5rem;
        }

        .detail-item {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
        color: #6c757d;
        }

        .detail-item i {
        color: #2563eb;
        margin-right: 0.75rem;
        width: 16px;
        }

        .branch-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: linear-gradient(135deg, #2563eb, #06b6d4);
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 500;
        transition: transform 0.3s ease;
        }

        .branch-btn:hover {
        transform: translateY(-2px);
        text-decoration: none;
        color: white;
        }

        /* Departments Section Styles */
        .departments {
        padding: 80px 0;
        background: white;
        }

        .departments-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        }

        /* Add this to your existing departBranches.css file */

        /* Department Card Image Background Styles */
        .department-card {
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 15px;
        padding: 0; /* Reset padding to accommodate image background */
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        position: relative;
        overflow: hidden;
        min-height: 400px;
        }

        .department-image-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0;
        transition: opacity 1.5s ease-in-out;
        z-index: 1;
        }

        .department-image-bg.active {
        opacity: 0.15;
        }

        .department-content {
        position: relative;
        z-index: 2;
        padding: 2rem;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(5px);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: background 0.3s ease;
        }

        .department-card:hover .department-content {
        background: rgba(255, 255, 255, 0.98);
        }

        .department-card:hover .department-image-bg.active {
        opacity: 0.25;
        }

        /* Enhanced department card hover effects */
        .department-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(135deg, #2563eb, #06b6d4);
        transform: scaleX(0);
        transition: transform 0.3s ease;
        z-index: 3;
        }

        .department-card:hover::before {
        transform: scaleX(1);
        }

        .department-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        border-color: #2563eb;
        }

        .department-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, #2563eb, #06b6d4);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        font-size: 2rem;
        color: white;
        transition: transform 0.3s ease;
        position: relative;
        z-index: 3;
        }

        .department-card:hover .department-icon {
        transform: scale(1.1);
        }

        .department-title {
        font-size: 1.3rem;
        color: #2c3e50;
        margin-bottom: 1rem;
        font-weight: 600;
        position: relative;
        z-index: 3;
        }

        .department-description {
        color: #6c757d;
        margin-bottom: 1.5rem;
        line-height: 1.6;
        position: relative;
        z-index: 3;
        }

        .department-services {
        list-style: none;
        padding: 0;
        text-align: left;
        position: relative;
        z-index: 3;
        }

        .department-services li {
        padding: 0.5rem 0;
        color: #6c757d;
        border-bottom: 1px solid #f1f3f4;
        position: relative;
        padding-left: 1.5rem;
        }

        .department-services li:last-child {
        border-bottom: none;
        }

        .department-services li::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: #27ae60;
        font-weight: bold;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
        .department-card {
        min-height: 350px;
        }

        .department-content {
        padding: 1.5rem;
        }
        }

        @media (max-width: 480px) {
        .department-card {
        min-height: 320px;
        padding: 0;
        }

        .department-content {
        padding: 1rem;
        }

        .department-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        }

        .department-title {
        font-size: 1.2rem;
        }

        .department-description {
        font-size: 0.9rem;
        }

        .department-services li {
        padding-left: 1rem;
        font-size: 0.9rem;
        }

        .department-services li::before {
        left: -0.3rem;
        }
        }

        /* ============================================================
        EXTENDED: Hamburger, ACH Logo, Doctors, Testimonials,
        Animations, Emergency Button, Review Modal, Footer, etc.
        ============================================================ */

        /* ==========================================================================
        EXTENDED STYLES — Hamburger, Mobile, Doctors, Testimonials, ACH Logo,
        Reveal Animations, Emergency Button, Review Modal, Footer, etc.
        (Moved from homepage.html inline style block)
        ========================================================================== */

        /* ===== BASE RESET FOR MOBILE ===== */
        *, *::before, *::after { box-sizing: border-box; }
        body { overflow-x: hidden; }
        img { max-width: 100%; height: auto; }

        /* ===== HAMBURGER MENU ===== */
        .hamburger {
        display: none;
        flex-direction: column;
        cursor: pointer;
        gap: 5px;
        background: none;
        border: none;
        padding: 4px;
        z-index: 1100;
        }
        .hamburger span {
        display: block;
        width: 25px;
        height: 3px;
        background: #fff;
        border-radius: 3px;
        transition: all 0.3s ease;
        }
        .hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
        .hamburger.open span:nth-child(2) { opacity: 0; }
        .hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

        /* ===== MOBILE BREAKPOINT ===== */
        @media (max-width: 768px) {

        /* --- NAV --- */
        .hamburger { display: flex; }
        .nav-container {
        padding: 0 1rem;
        flex-wrap: nowrap;
        }
        .logo { font-size: 0.95rem !important; }
        .nav-links {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100vh;
        background: rgba(10, 40, 70, 0.98);
        justify-content: center;
        align-items: center;
        gap: 1.8rem;
        z-index: 1000;
        padding: 2rem;
        }
        .nav-links.open { display: flex; }
        .nav-links li a {
        font-size: 1.3rem;
        color: #fff !important;
        }
        .emergency-btn { display: none; }

        /* --- HERO --- */
        .hero { padding: 5rem 1rem 2rem; min-height: auto !important; }
        .hero-content {
        flex-direction: column !important;
        align-items: center !important;
        gap: 2rem !important;
        text-align: center;
        }
        .hero-text { max-width: 100% !important; }
        .hero-text h1 { font-size: 1.8rem !important; line-height: 1.2; }
        .hero-text p { font-size: 0.95rem !important; }
        .hero-text .subtitle { font-size: 0.85rem; }
        .hero-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.8rem !important;
        }
        .hero-buttons a { width: 100%; text-align: center; justify-content: center; }
        .hero-visual {
        position: relative !important;
        width: 100% !important;
        display: flex;
        justify-content: center;
        }
        .doctor-image {
        width: 260px !important;
        height: 300px !important;
        margin: 0 auto;
        }
        .floating-card {
        display: none !important;
        }

        /* --- ABOUT --- */
        .about { padding: 3rem 1rem !important; }
        .about-container {
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        }
        .about-content {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        }
        .about-content h2 {
        font-size: 1.5rem !important;
        text-align: center !important;
        }
        .about-content p { text-align: left !important; }
        .about-features { text-align: left !important; padding-left: 0.5rem !important; }
        .about-visual { width: 100% !important; max-width: 100% !important; }
        .about-image { height: 220px !important; width: 100% !important; }

        /* --- SERVICES --- */
        .services { padding: 3rem 1rem !important; }
        .services-grid {
        grid-template-columns: 1fr !important;
        gap: 1.2rem !important;
        padding: 0 !important;
        }
        .service-image { height: 160px !important; }

        /* --- DOCTORS --- */
        .doctors { padding: 3rem 1rem !important; }
        .doctors-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
        }
        .doctor-avatar { height: 160px !important; font-size: 3rem !important; }
        .doctor-info h3 { font-size: 0.9rem !important; }
        .doctor-info .specialty { font-size: 0.75rem !important; }
        .doctor-info .experience { font-size: 0.72rem !important; }

        /* --- GALLERY / SLIDESHOW --- */
        .gallery { padding: 3rem 1rem !important; }
        .slideshow-container { border-radius: 10px !important; }
        .slide img { height: 220px !important; object-fit: cover; }
        .slide-content { padding: 0.8rem 1rem !important; }
        .slide-content h3 { font-size: 1rem !important; }
        .slide-content p { font-size: 0.8rem !important; }
        .slide-nav {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
        }

        /* --- COMMUNITY CARE --- */
        .community-care { padding: 3rem 1rem !important; }
        .community-care-container {
        flex-direction: column !important;
        gap: 2rem !important;
        }
        .community-care-content, .community-care-visual {
        width: 100% !important;
        text-align: center !important;
        }
        .community-care-content h2 { font-size: 1.6rem !important; }
        .telemedicine-features {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        }
        .telemedicine-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.8rem !important;
        }
        .telemedicine-buttons a { width: 100%; text-align: center; justify-content: center; }

        /* --- BRANCHES --- */
        .branches { padding: 3rem 1rem !important; }
        .branches-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        }
        .branch-image { height: 180px !important; }

        /* --- STATS --- */
        .stats { padding: 2.5rem 1rem !important; }
        .stats-container {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
        }
        .stat-number { font-size: 2rem !important; }
        .stat-label { font-size: 0.8rem !important; }

        /* --- TESTIMONIALS --- */
        .testimonials { padding: 3rem 1rem !important; }
        .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 1.2rem !important;
        }
        .testimonial-card { padding: 1.5rem !important; }

        /* --- CONTACT --- */
        .contact { padding: 3rem 1rem !important; }
        .contact-container {
        flex-direction: column !important;
        gap: 2rem !important;
        padding: 0 !important;
        width: 100% !important;
        }
        .contact-info, .appointment-form {
        width: 100% !important;
        max-width: 100% !important;
        }
        .contact-info h2 { font-size: 1.5rem !important; text-align: center !important; }
        .appointment-form h3 { font-size: 1.2rem !important; text-align: center !important; }
        .contact-item {
        display: flex !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        text-align: left !important;
        width: 100% !important;
        }
        .contact-item .icon {
        flex-shrink: 0 !important;
        margin-top: 2px;
        }
        .contact-item div { flex: 1 !important; min-width: 0 !important; }
        .contact-item p { word-break: break-word !important; margin: 0 !important; font-size: 0.9rem !important; }
        .contact-item h4 { margin-bottom: 0.2rem !important; }
        .form-group input,
        .form-group select,
        .form-group textarea {
        font-size: 16px !important;
        width: 100% !important;
        }

        /* --- GLOBAL OVERFLOW FIX --- */
        section { overflow-x: hidden !important; width: 100% !important; }
        .section { padding-left: 1rem !important; padding-right: 1rem !important; }
        * { max-width: 100vw; }

        /* --- SECTION HEADERS --- */
        .section-header { padding: 0 1rem !important; }
        .section-title { font-size: 1.5rem !important; }
        .section-subtitle { font-size: 0.9rem !important; }

        /* --- FOOTER --- */
        footer { padding: 2rem 0 1rem !important; }
        .footer-content {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
        }
        .footer-bottom { padding: 1rem !important; font-size: 0.78rem !important; }
        .footer-bottom p { margin-bottom: 0.3rem; }
        }

        /* ===== SMALL PHONES (max 400px) ===== */
        @media (max-width: 400px) {
        .hero-text h1 { font-size: 1.4rem !important; }
        .doctors-grid { grid-template-columns: 1fr !important; }
        .stats-container { grid-template-columns: 1fr !important; }
        .doctor-avatar { height: 200px !important; }
        }

        /* ===== DOCTORS SECTION ===== */
        .doctors {
        background: #f8fafc;
        padding: 5rem 2rem;
        }
        .doctors-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 2rem;
        max-width: 1200px;
        margin: 2.5rem auto 0;
        }
        .doctor-card {
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        text-align: center;
        }
        .doctor-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.13);
        }
        .doctor-avatar {
        width: 100%;
        height: 220px;
        object-fit: cover;
        background: linear-gradient(135deg, #0d4a8a 0%, #1a7abf 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
        color: rgba(255,255,255,0.5);
        }
        .doctor-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        }
        .doctor-info {
        padding: 1.2rem 1rem 1.5rem;
        }
        .doctor-info h3 {
        font-size: 1.05rem;
        font-weight: 700;
        color: #0d3c6e;
        margin-bottom: 0.3rem;
        }
        .doctor-info .specialty {
        font-size: 0.85rem;
        color: #1a7abf;
        font-weight: 600;
        margin-bottom: 0.5rem;
        }
        .doctor-info .experience {
        font-size: 0.8rem;
        color: #888;
        }
        .doctor-socials {
        display: flex;
        justify-content: center;
        gap: 0.8rem;
        margin-top: 0.8rem;
        }
        .doctor-socials a {
        color: #0d4a8a;
        font-size: 1rem;
        transition: color 0.2s;
        }
        .doctor-socials a:hover { color: #1a7abf; }

        /* ===== TESTIMONIALS SECTION ===== */
        .testimonials {
        background: linear-gradient(135deg, #0d3c6e 0%, #1a7abf 100%);
        padding: 5rem 2rem;
        color: #fff;
        }
        .testimonials .section-title,
        .testimonials .section-subtitle {
        color: #fff;
        }
        .testimonials .section-subtitle {
        opacity: 0.85;
        }
        .testimonials-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
        max-width: 1200px;
        margin: 2.5rem auto 0;
        }
        .testimonial-card {
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
        backdrop-filter: blur(10px);
        border-radius: 16px;
        padding: 2rem;
        position: relative;
        }
        .testimonial-card .quote-icon {
        font-size: 2.5rem;
        color: rgba(255,255,255,0.3);
        line-height: 1;
        margin-bottom: 1rem;
        }
        .testimonial-card p {
        font-size: 0.95rem;
        line-height: 1.7;
        color: rgba(255,255,255,0.9);
        margin-bottom: 1.5rem;
        }
        .testimonial-author {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        }
        .author-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255,255,255,0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1rem;
        flex-shrink: 0;
        }
        .author-info h4 {
        font-size: 0.9rem;
        font-weight: 700;
        margin: 0;
        }
        .author-info span {
        font-size: 0.78rem;
        opacity: 0.75;
        }
        .star-rating {
        color: #fbbf24;
        font-size: 0.85rem;
        margin-bottom: 0.8rem;
        }

        /* ===== WHATSAPP FORM STYLES ===== */
        .form-success {
        display: none;
        text-align: center;
        padding: 2rem;
        background: #f0fdf4;
        border-radius: 12px;
        border: 1px solid #86efac;
        }
        .form-success i { font-size: 2.5rem; color: #16a34a; margin-bottom: 0.8rem; }
        .form-success h4 { color: #15803d; margin-bottom: 0.5rem; }
        .form-success p { color: #166534; font-size: 0.9rem; }

        /* ===== SMOOTH SCROLL BEHAVIOUR ===== */
        html {
        scroll-behavior: smooth;
        }

        /* ===== SCROLL REVEAL BASE STATES ===== */
        .service-card,
        .branch-card,
        .testimonial-card,
        .doctor-card,
        .feature-item,
        .section-header,
        .about-content,
        .about-visual,
        .community-care-content,
        .community-care-visual,
        .contact-item {
        will-change: opacity, transform;
        }

        /* ===== SLIDE TRANSITION ENHANCEMENT ===== */
        .slide {
        transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        /* ===== NAV SMOOTH LINK HOVER ===== */
        .nav-links a {
        transition: color 0.25s ease, border-bottom 0.25s ease;
        }

        /* ===== ACH LOGO ===== */
        .ach-logo {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        text-decoration: none;
        cursor: pointer;
        }
        .ach-logo-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(13,74,138,0.3);
        position: relative;
        overflow: hidden;
        background: #fff;
        }
        .ach-logo-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        }
        .ach-logo-text {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
        }
        .ach-logo-text .logo-main {
        font-size: 1rem;
        font-weight: 800;
        color: #fff;
        letter-spacing: 0.02em;
        }
        .ach-logo-text .logo-sub {
        font-size: 0.65rem;
        font-weight: 500;
        color: rgba(255,255,255,0.75);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        }
        /* Nav logo override — nav may have light bg */
        nav .ach-logo-text .logo-main { color: #0d3c6e; }
        nav .ach-logo-text .logo-sub  { color: #1a7abf; }

        /* Footer logo variant */
        .footer-ach-logo .logo-main { color: #fff !important; }
        .footer-ach-logo .logo-sub  { color: rgba(255,255,255,0.65) !important; }
        .footer-ach-logo .ach-logo-icon {
        background: linear-gradient(135deg, #2a9fd6 0%, #1a7abf 100%);
        }

        /* Mobile: shrink logo text */
        @media (max-width: 768px) {
        .ach-logo-text .logo-main { font-size: 0.82rem !important; }
        .ach-logo-text .logo-sub  { display: none; }
        .ach-logo-icon { width: 36px; height: 36px; }
        }

        /* ===== TESTIMONIALS SLIDER ===== */
        .testimonials-slider-wrap {
        position: relative;
        max-width: 900px;
        margin: 2.5rem auto 0;
        overflow: hidden;
        }
        .testimonials-track {
        display: flex;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .testimonials-track .testimonial-card {
        min-width: 100%;
        box-sizing: border-box;
        }
        .testimonials-dots {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1.5rem;
        }
        .testimonials-dots span {
        width: 10px; height: 10px;
        border-radius: 50%;
        background: rgba(255,255,255,0.35);
        cursor: pointer;
        transition: background 0.3s, transform 0.3s;
        }
        .testimonials-dots span.active {
        background: #fff;
        transform: scale(1.3);
        }
        /* Write a Review button */
        .review-btn-wrap {
        text-align: center;
        margin-top: 2rem;
        }
        .review-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: rgba(255,255,255,0.15);
        border: 2px solid rgba(255,255,255,0.5);
        color: #fff;
        padding: 0.75rem 2rem;
        border-radius: 50px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: background 0.3s, border-color 0.3s, transform 0.2s;
        backdrop-filter: blur(6px);
        }
        .review-btn:hover {
        background: rgba(255,255,255,0.28);
        border-color: #fff;
        transform: translateY(-2px);
        }
        /* Review modal */
        .review-modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 9000;
        align-items: center;
        justify-content: center;
        }
        .review-modal-overlay.open { display: flex; }
        .review-modal {
        background: #fff;
        border-radius: 18px;
        padding: 2.5rem;
        max-width: 480px;
        width: 90%;
        position: relative;
        box-shadow: 0 20px 60px rgba(0,0,0,0.25);
        animation: modalIn 0.35s cubic-bezier(0.22,1,0.36,1);
        }
        @keyframes modalIn {
        from { opacity:0; transform: translateY(30px) scale(0.96); }
        to   { opacity:1; transform: translateY(0)   scale(1);    }
        }
        .review-modal h3 {
        color: #0d3c6e;
        margin-bottom: 0.3rem;
        font-size: 1.3rem;
        }
        .review-modal .modal-sub {
        color: #888;
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
        }
        .review-modal .close-modal {
        position: absolute;
        top: 1rem; right: 1.2rem;
        background: none; border: none;
        font-size: 1.4rem; cursor: pointer;
        color: #aaa; line-height: 1;
        }
        .review-modal .close-modal:hover { color: #333; }
        .review-modal .form-group { margin-bottom: 1rem; }
        .review-modal .form-group label {
        display: block; font-size: 0.85rem;
        color: #555; margin-bottom: 0.3rem; font-weight: 600;
        }
        .review-modal .form-group input,
        .review-modal .form-group textarea,
        .review-modal .form-group select {
        width: 100%; padding: 0.7rem 0.9rem;
        border: 1.5px solid #e0e0e0; border-radius: 8px;
        font-size: 0.95rem; outline: none;
        transition: border-color 0.2s;
        }
        .review-modal .form-group input:focus,
        .review-modal .form-group textarea:focus,
        .review-modal .form-group select:focus { border-color: #1a7abf; }
        .review-modal .star-selector {
        display: flex; gap: 0.4rem; margin-bottom: 1rem;
        }
        .review-modal .star-selector i {
        font-size: 1.6rem; color: #ddd; cursor: pointer;
        transition: color 0.15s, transform 0.15s;
        }
        .review-modal .star-selector i.lit { color: #fbbf24; }
        .review-modal .star-selector i:hover { transform: scale(1.2); }
        .review-modal .submit-review {
        width: 100%; padding: 0.85rem;
        background: linear-gradient(135deg, #1a7abf, #0d4a8a);
        color: #fff; border: none; border-radius: 10px;
        font-size: 1rem; font-weight: 700; cursor: pointer;
        transition: opacity 0.2s, transform 0.2s;
        }
        .review-modal .submit-review:hover { opacity: 0.9; transform: translateY(-1px); }
        .review-success {
        text-align: center; padding: 1.5rem 0;
        }
        .review-success i { font-size: 3rem; color: #16a34a; display: block; margin-bottom: 0.7rem; }
        .review-success h4 { color: #15803d; margin-bottom: 0.4rem; }
        .review-success p  { color: #555; font-size: 0.9rem; }

        /* ===== EMERGENCY BUTTON — RED + AMBULANCE ===== */
        .emergency-btn {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
        color: white !important;
        padding: 0.7rem 1.4rem;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 700;
        font-size: 0.9rem;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 14px rgba(220,38,38,0.4) !important;
        white-space: nowrap;
        }
        .emergency-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 22px rgba(220,38,38,0.5) !important;
        background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
        }

        /* ============================================================
        SCROLL REVEAL ANIMATION SYSTEM
        Elements start hidden via .reveal class, become visible
        when JS adds .visible — avoids conflicts with style.css
        ============================================================ */

        /* Base hidden state */
        .reveal {
        opacity: 0 !important;
        will-change: opacity, transform;
        }

        /* Direction variants — set initial transform */
        .reveal-up    { transform: translateY(50px) !important; }
        .reveal-left  { transform: translateX(-60px) !important; }
        .reveal-right { transform: translateX(60px) !important; }
        .reveal-scale { transform: scale(0.88) !important; }

        /* Visible state — transition defined HERE so it wins over style.css */
        .reveal.visible {
        opacity: 1 !important;
        transform: translateY(0) translateX(0) scale(1) !important;
        transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
        }

        /* Stagger delays for child items in grids */
        .reveal.delay-1 { transition-delay: 0.08s !important; }
        .reveal.delay-2 { transition-delay: 0.16s !important; }
        .reveal.delay-3 { transition-delay: 0.24s !important; }
        .reveal.delay-4 { transition-delay: 0.32s !important; }
        .reveal.delay-5 { transition-delay: 0.40s !important; }
        .reveal.delay-6 { transition-delay: 0.48s !important; }

        /* Once visible, keep visible even after hover transforms */
        .reveal.visible:hover {
        opacity: 1 !important;
        }