:root {
      --navy: #102b4e;
      --navy-deep: #021f49;
      --teal: #00347f;
      --teal-light: #e9f8f7;
      --orange: #f07a45;
      --ink: #24364b;
      --muted: #65758a;
      --pale: #f5f9fc;
      --white: #fff;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 90px; }
    body { margin: 0; font-family: "DM Sans", sans-serif; color: var(--ink); line-height: 1.7; }
    h1,h2,h3,h4,.navbar-brand { font-family: "Manrope", sans-serif; }
    a { text-decoration: none; }
    .top-strip { background: var(--navy-deep); color: #eaf2fb; font-size: .88rem; padding: 9px 0; }
    .top-strip a { color: #fff; text-decoration:none;font-size:15px;}
    .top-strip a:hover { color: #78e0d7; }
    .site-header { background: rgba(255,255,255,.97); box-shadow: 0 5px 24px rgba(16,43,78,.08); padding:10px 0;}
    .navbar { padding: 12px 0; }
    .brand-wrap { display: flex; align-items: center; gap: 11px; color: var(--navy); white-space: normal; }
    .brand-mark { width: 49px; height: 49px; border-radius: 15px; display: grid; place-items: center; background: var(--teal); color: white; font-size: 1.35rem; flex: 0 0 auto; }
    .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
    .brand-text strong { font-size: 17px; font-weight: 700; color: var(--teal); letter-spacing: .09em; text-transform: uppercase; }
    .brand-text b { 
		font-size: 22px;
		font-weight: 800;
		color: #021f49;
	}
    .brand-text small { font-size: 14px; color: var(--muted); margin-top: 4px; }
    .navbar-nav .nav-link { color: #282828; font-weight: 700; font-size: 16px; padding: 12px 23px !important; }
    .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--teal); }
    .btn-main { background: var(--teal); color: #fff; border: 2px solid var(--teal); border-radius: 9px; font-weight: 700; padding: 12px 20px; transition: .2s ease; }
    .btn-main:hover { background: #087c7b; border-color: #087c7b; color: #fff; transform: translateY(-1px); }
    .btn-outline-main { color: var(--navy); border: 2px solid #cbd8e5; border-radius: 9px; font-weight: 700; padding: 12px 20px; }
    .btn-outline-main:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
    .hero { position: relative; overflow: hidden; background: linear-gradient(120deg,#f3fbfc 0%,#f8fbff 52%,#e9f7f6 100%); padding: 82px 0 90px; }
    .hero:before { content:""; position:absolute; width:450px; height:450px; right:-150px; top:-180px; border:1px solid rgba(14,156,154,.18); border-radius:50%; box-shadow:0 0 0 45px rgba(14,156,154,.04),0 0 0 90px rgba(14,156,154,.03); }
    .hero .container { position: relative; z-index: 1; }
    .eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--teal); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
    .eyebrow:before { content:""; width:25px; height:3px; background:var(--orange); border-radius:5px; }
    .hero h1 { color: var(--navy); font-size: clamp(2.3rem, 4.6vw, 4.35rem); font-weight: 800; line-height: 1.12; letter-spacing: -.045em; margin: 19px 0; }
    .hero h1 em,.section-title em { color: var(--teal); font-style: normal; }
    .hero-copy { color: var(--muted); font-size: 1.08rem; max-width: 620px; }
    .hero-points { display: flex; flex-wrap: wrap; gap: 18px 24px; margin-top: 29px; }
    .hero-point { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--navy); font-size: .92rem; }
    .hero-point i { color: var(--teal); font-size: 1.15rem; }
    .hero-visual { position: relative; max-width: 500px; margin: 0 auto; }
    .hero-photo { width: 100%; height: 445px; object-fit: cover; border-radius: 26px 26px 80px 26px; box-shadow: 0 24px 55px rgba(16,43,78,.16); }
    .hero-photo-badge { position: absolute; left: -25px; bottom: 25px; background: #fff; border-radius: 16px; padding: 18px 20px; box-shadow: 0 12px 35px rgba(16,43,78,.15); display: flex; gap: 13px; align-items: center; max-width: 290px; }
    .hero-photo-badge .badge-icon { width: 47px; height: 47px; display:grid; place-items:center; border-radius:13px; color:white; background:var(--orange); font-size:1.2rem; flex-shrink:0; }
    .hero-photo-badge strong { display:block; color:var(--navy); line-height:1.3; }
    .hero-photo-badge small { color:var(--muted); }
    .section-padding { padding: 85px 0; }
    .section-heading { max-width: 740px; margin: 0 auto 42px; }
    .section-title { color: var(--navy); font-weight: 800; font-size: clamp(1.9rem,3.4vw,2.8rem); letter-spacing:-.035em; line-height:1.2; margin: 13px 0 16px; }
    .section-heading p,.section-lead { color: var(--muted); font-size: 1.02rem; }
    .quick-info { position: relative; z-index: 2; margin-top: -34px; }
    .quick-info-card { background: #fff; border-radius: 18px; box-shadow: 0 14px 45px rgba(16,43,78,.1); padding: 25px; display: grid; grid-template-columns: repeat(3,1fr); }
    .quick-item { display:flex; align-items:center; gap:14px; padding: 8px 20px; border-right:1px solid #e7edf3; }
    .quick-item:last-child { border-right:0; }
    .quick-icon { width:52px; height:52px; display:grid; place-items:center; background:var(--teal-light); color:var(--teal); border-radius:15px; font-size:1.25rem; flex-shrink:0; }
    .quick-item strong { display:block; color:var(--navy); line-height:1.35; }
    .quick-item small { color:var(--muted); }
    .about-section { background:#fff; }
    .about-visual { position:relative; padding:0 24px 24px 0; }
    .about-visual:before { content:""; position:absolute; z-index:0; left:25px; bottom:0; width:78%; height:70%; background:var(--teal-light); border-radius:22px; }
    .about-visual img { position:relative; z-index:1; width:100%; height:430px; object-fit:cover; border-radius:22px; }
    .experience-note { position:absolute; z-index:2; right:0; bottom:43px; background:var(--navy); color:#fff; border-radius:15px; padding:17px 22px; box-shadow:0 12px 30px rgba(16,43,78,.2); }
    .experience-note strong { display:block; font-size:1.7rem; line-height:1.2; }
    .experience-note span { font-size:.85rem; color:#d8e6f5; }
    .check-list { list-style:none; padding:0; margin:25px 0; }
    .check-list li { display:flex; gap:12px; margin:12px 0; color:var(--ink); }
    .check-list i { color:var(--teal); margin-top:6px; }
    .services-section { background:var(--pale); }
    .service-card { height:100%; background:#fff; border:1px solid #e6eef4; border-radius:17px; padding:27px; transition: .25s ease; }
    .service-card:hover { transform:translateY(-5px); box-shadow:0 15px 35px rgba(16,43,78,.09); border-color:#bde8e4; }
    .service-icon { width:55px; height:55px; display:grid; place-items:center; border-radius:15px; background:var(--teal-light); color:var(--teal); font-size:1.35rem; margin-bottom:19px; }
    .service-card h3 { font-size:1.13rem; color:var(--navy); font-weight:800; margin-bottom:10px; }
    .service-card p { color:var(--muted); font-size:.94rem; margin-bottom:0; }
    .service-card ul { padding-left:18px; color:var(--muted); margin:10px 0 0; font-size:.92rem; }
    .doctor-section { background:#fff; }
    .doctor-card { background:linear-gradient(145deg,#102b4e,#173f68); color:#fff; border-radius:22px; padding:32px; height:100%; position:relative; overflow:hidden; }
    .doctor-card:after { content:""; position:absolute; width:170px; height:170px; border:1px solid rgba(255,255,255,.12); border-radius:50%; right:-65px; top:-65px; box-shadow:0 0 0 25px rgba(255,255,255,.03),0 0 0 50px rgba(255,255,255,.025); }
    .doctor-symbol { width:72px; height:72px; display:grid; place-items:center; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:20px; font-size:2rem; margin-bottom:20px; }
    .doctor-card .doctor-label { color:#82e1d8; font-weight:800; font-size:.75rem; letter-spacing:.12em; }
    .doctor-card h3 { font-weight:800; font-size:1.65rem; margin:8px 0 12px; }
    .doctor-card p { color:#d9e5f1; }
    .doctor-meta { display:flex; gap:10px; margin-top:17px; align-items:flex-start; color:#e8f0f7; font-size:.93rem; }
    .doctor-meta i { color:#82e1d8; margin-top:5px; }
    .timing-section { background:var(--teal-light); }
    .timing-card { background:#fff; border-radius:18px; padding:27px; height:100%; box-shadow:0 8px 24px rgba(16,43,78,.05); }
    .timing-card .time-icon { color:var(--teal); font-size:1.5rem; margin-bottom:12px; }
	.timing-card .time-icon1{margin-bottom:19px;}
	.timing-card .time-icon1 img{width:100%;border:4px solid #ddd;}
    .timing-card h3 { color:var(--navy); font-size:1.15rem; font-weight:800; }
    .time { color:var(--teal); font-size:1.35rem; font-weight:800; }
    .emergency-section { padding:0 0 80px; background:var(--teal-light); }
    .emergency-banner { background:var(--teal); color:#fff; padding:30px 35px; border-radius:20px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
    .emergency-banner .banner-icon { width:62px; height:62px; display:grid; place-items:center; background:rgba(255,255,255,.16); border-radius:18px; font-size:1.6rem; flex-shrink:0; }
    .emergency-banner h2 { font-size:1.55rem; font-weight:800; margin:0 0 5px; }
    .emergency-banner p { margin:0; color:#e3fffc; }
    .contact-section { background:#f6f9fc; }
    .contact-list { margin-top:25px; }
    .contact-item { display:flex; align-items:flex-start; gap:15px; margin:20px 0; }
    .contact-item .contact-icon { width:48px; height:48px; flex-shrink:0; display:grid; place-items:center; background:#fff; border-radius:13px; color:var(--teal); box-shadow:0 5px 16px rgba(16,43,78,.06); }
    .contact-item small { display:block; color:var(--muted); }
    .contact-item strong { color:var(--navy); overflow-wrap:anywhere; }
    .map-card { height:100%; min-height:390px; border-radius:20px; overflow:hidden; box-shadow:0 12px 30px rgba(16,43,78,.1); background:#eaf2f7; }
    .map-card iframe { width:100%; height:100%; min-height:390px; border:0; }
    .site-footer { background:var(--navy-deep); color:#c8d6e5; padding:58px 0 20px; }
    .footer-brand { color:#fff; margin-bottom:18px; }
    .footer-brand .brand-text b { color:#fff; }
    .footer-brand .brand-text small { color:#b9c8d8; }
    .footer-about { max-width:420px; color:#b9c8d8; }
    .site-footer h3 { font-size:1rem; color:#fff; font-weight:800; margin-bottom:18px; }
    .footer-links { list-style:none; padding:0; margin:0; }
    .footer-links li { margin:9px 0; }
    .footer-links a,.footer-contact a { color:#c8d6e5; }
    .footer-links a:hover,.footer-contact a:hover { color:#82e1d8; }
    .footer-contact { list-style:none; padding:0; margin:0; }
    .footer-contact li { display:flex; gap:10px; margin:12px 0; overflow-wrap:anywhere; }
    .footer-contact i { color:#82e1d8; margin-top:6px; }
    .footer-bottom { border-top:1px solid rgba(255,255,255,.13); margin-top:35px; padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.85rem; color:#aebed0; }
    .floating-actions { position:fixed; right:18px; bottom:18px; z-index:1030; display:flex; flex-direction:column; gap:10px; }
    .floating-actions a { width:50px; height:50px; display:grid; place-items:center; border-radius:50%; color:#fff; font-size:1.25rem; box-shadow:0 5px 18px rgba(0,0,0,.18); }
    .float-call { background:var(--teal); }
    .float-whatsapp { background:#20b968; }
    @media (max-width: 991.98px) {
      .navbar-nav { padding:12px 0; align-items:stretch !important; }
      .navbar-nav .nav-link { padding:9px 0 !important; }
      .hero { padding:60px 0 75px; }
      .hero-visual { margin-top:10px; max-width:570px; }
      .hero-photo { height:390px; }
      .quick-info-card { grid-template-columns:1fr; gap:8px; }
      .quick-item { border-right:0; border-bottom:1px solid #e7edf3; padding:13px 8px; }
      .quick-item:last-child { border-bottom:0; }
      .section-padding { padding:68px 0; }
      .emergency-section { padding-bottom:65px; }
    }
    @media (max-width: 575.98px) {
      .top-strip .container { justify-content:center !important; text-align:center; }
      .top-strip .contact-strip { justify-content:center; }
      .brand-mark { width:43px; height:43px; border-radius:12px; }
      .brand-text b { font-size:1rem; }
      .brand-text small { font-size:.62rem; }
      .hero { padding:48px 0 65px; }
      .hero h1 { font-size:2.35rem; }
      .hero-copy { font-size:1rem; }
      .hero-actions .btn { width:100%; }
      .hero-photo { height:320px; border-radius:20px 20px 55px 20px; }
      .hero-photo-badge { left:10px; bottom:12px; padding:12px; max-width:270px; }
      .hero-photo-badge .badge-icon { width:40px; height:40px; }
      .quick-info { margin-top:-22px; }
      .quick-info-card { padding:17px; }
      .about-visual img { height:320px; }
      .experience-note { right:5px; bottom:30px; padding:13px 16px; }
      .experience-note strong { font-size:1.4rem; }
      .section-padding { padding:58px 0; }
      .service-card,.doctor-card,.timing-card { padding:23px; }
      .emergency-banner { padding:25px 22px; align-items:flex-start; flex-direction:column; }
      .emergency-banner .btn { width:100%; }
      .map-card,.map-card iframe { min-height:320px; }
      .footer-bottom { flex-direction:column; }
    }



.header-title_bg{
	background:#021f49;
	padding:90px 0;
}
.header-title{
	text-align:center;
}
.header-title h1{
	font-size:32px;
	color:#fff;
	font-weight:600;
}







        .about-hero {
            background: linear-gradient(120deg, #edf8fa, #f7faff);
            padding: 85px 0;
            overflow: hidden;
        }

        .section-label {
            display: inline-block;
            color: var(--teal);
            font-weight: 800;
            font-size: 13px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 15px;
        }

        .about-title {
            color: var(--navy);
            font-size: clamp(32px, 4vw, 48px);
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 22px;
        }

        .about-title span {
            color: var(--teal);
        }

        .about-description {
            font-size: 16px;
            margin-bottom: 18px;
        }

        .about-image-wrap {
            position: relative;
            padding: 0 15px 20px 0;
        }

        .about-image-wrap::before {
            content: "";
            position: absolute;
            width: 75%;
            height: 75%;
            right: 0;
            bottom: 0;
            background: #d8f1ef;
            border-radius: 24px;
        }

        .about-image {
            position: relative;
            width: 100%;
            height: 430px;
            object-fit: cover;
            border-radius: 22px;
            box-shadow: 0 18px 45px rgba(16, 43, 78, .13);
        }

        .experience-badge {
            position: absolute;
            left: -15px;
            bottom: 40px;
            background: var(--navy);
            color: #fff;
            padding: 20px 24px;
            border-radius: 14px;
            box-shadow: 0 10px 25px rgba(16, 43, 78, .18);
        }

        .experience-badge h3 {
            font-size: 30px;
            font-weight: 800;
            margin: 0;
        }

        .experience-badge p {
            margin: 0;
            font-size: 13px;
            color: #dbe7f4;
        }

        .about-points {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 28px;
        }

        .about-point {
            display: flex;
            align-items: flex-start;
            gap: 11px;
            font-weight: 600;
            font-size: 14px;
            color: var(--navy);
        }

        .about-point i {
            color: var(--teal);
            font-size: 18px;
            margin-top: 4px;
        }

        .feature-section {
            padding: 75px 0;
            background: #fff;
        }

        .section-heading {
            text-align: center;
            max-width: 720px;
            margin: 0 auto 42px;
        }

        .section-heading h2 {
            color: var(--navy);
            font-size: clamp(28px, 3vw, 38px);
            font-weight: 800;
            margin-bottom: 15px;
        }

        .section-heading h2 span {
            color: var(--teal);
        }

        .feature-card {
            height: 100%;
            padding: 28px;
            background: #fff;
            border: 1px solid #e6edf3;
            border-radius: 17px;
            transition: .3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(16, 43, 78, .09);
        }

        .feature-icon {
            width: 58px;
            height: 58px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #e7f7f5;
            color: var(--teal);
            border-radius: 15px;
            font-size: 23px;
            margin-bottom: 20px;
        }

        .feature-card h3 {
            font-size: 18px;
            color: var(--navy);
            font-weight: 800;
            margin-bottom: 12px;
        }

        .feature-card p {
            font-size: 14px;
            margin-bottom: 0;
        }

        .doctor-section {
            padding: 75px 0;
            background: var(--light);
        }

        .doctor-card {
            height: 100%;
            background: var(--navy);
            color: #fff;
            padding: 35px;
            border-radius: 20px;
        }

        .doctor-icon {
            width: 65px;
            height: 65px;
            background: rgba(255,255,255,.12);
            border-radius: 17px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin-bottom: 22px;
        }

        .doctor-card h3 {
            font-size: 27px;
            font-weight: 800;
            margin-bottom: 12px;
        }

        .doctor-card p {
            color: #d8e4f0;
            margin-bottom: 12px;
        }

        .doctor-card strong {
            color: #82e1d8;
        }

        .specialisation-box {
            height: 100%;
            padding: 35px;
            background: #fff;
            border-radius: 20px;
            border: 1px solid #e4edf3;
        }

        .specialisation-box h3 {
            font-size: 23px;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: 18px;
        }

        .specialisation-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .specialisation-list li {
            display: flex;
            gap: 12px;
            margin-bottom: 13px;
        }

        .specialisation-list i {
            color: var(--teal);
            margin-top: 6px;
        }

        .hospital-cta {
            padding: 55px 0;
            background: var(--teal);
            color: #fff;
        }

        .hospital-cta h2 {
            font-size: clamp(25px, 3vw, 34px);
            font-weight: 800;
            margin-bottom: 12px;
        }

        .hospital-cta p {
            margin-bottom: 0;
            color: #e3fffc;
        }

        .cta-button {
            display: inline-block;
            background: #fff;
            color: var(--navy);
            padding: 13px 24px;
            border-radius: 9px;
            font-weight: 800;
            text-decoration: none;
            white-space: nowrap;
        }

        .cta-button:hover {
            background: var(--navy);
            color: #fff;
        }

        @media (max-width: 991px) {
            .about-hero {
                padding: 65px 0;
            }

            .about-image-wrap {
                margin-top: 20px;
            }

            .about-image {
                height: 380px;
            }

            .feature-section,
            .doctor-section {
                padding: 60px 0;
            }
        }

        @media (max-width: 575px) {
            .about-hero {
                padding: 48px 0;
            }

            .about-title {
                font-size: 32px;
            }

            .about-image {
                height: 300px;
            }

            .experience-badge {
                left: 8px;
                bottom: 30px;
                padding: 14px 18px;
            }

            .experience-badge h3 {
                font-size: 24px;
            }

            .about-points {
                grid-template-columns: 1fr;
            }

            .feature-section,
            .doctor-section {
                padding: 48px 0;
            }

            .feature-card,
            .doctor-card,
            .specialisation-box {
                padding: 24px;
            }

            .hospital-cta .cta-button {
                display: block;
                text-align: center;
                margin-top: 20px;
            }
        }
		
		
		
		
		
		
		
		
.appointment-section {
    padding: 60px 15px;
    background: linear-gradient(135deg, #f1f8fb, #ffffff);
    font-family: Arial, sans-serif;
}

.appointment-card {
    max-width: 850px;
    margin: auto;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(10, 45, 75, 0.12);
}

.appointment-header {
    background: #073b5c;
    color: #fff;
    padding: 30px;
    text-align: center;
}

.appointment-header h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 10px;
}

.appointment-header p {
    margin: 0;
    color: #e0edf5;
}

.appointment-body {
    padding: 35px;
}

.appointment-form label {
    color: #18384d;
    font-weight: 600;
    margin-bottom: 8px;
}

.appointment-form .form-control,
.appointment-form .form-select {
    min-height: 48px;
    border: 1px solid #d6e1e8;
    border-radius: 8px;
    padding: 12px 14px;
}

.appointment-form .form-control:focus,
.appointment-form .form-select:focus {
    border-color: #168c9b;
    box-shadow: 0 0 0 3px rgba(22, 140, 155, 0.12);
}

.btn-whatsapp-submit {
    background: #20b858;
    color: #fff;
    border: none;
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 700;
    width: 100%;
    transition: 0.3s ease;
}

.btn-whatsapp-submit:hover {
    background: #169447;
    color: #fff;
    transform: translateY(-2px);
}

.appointment-note {
    font-size: 13px;
    color: #667985;
    text-align: center;
    margin-top: 15px;
}

@media (max-width: 576px) {
    .appointment-section {
        padding: 35px 12px;
    }

    .appointment-header {
        padding: 25px 18px;
    }

    .appointment-header h2 {
        font-size: 24px;
    }

    .appointment-body {
        padding: 22px 18px;
    }
}
/* Input placeholder */
.form-control::placeholder {
    font-size: 12px;
    color: #888;
}
/* Input placeholder */
.form-select option {
    font-size: 12px;
    color: #888;
}

/* Textarea placeholder */
textarea.form-control::placeholder {
    font-size: 12px;
    color: #888;
}


/* Dropdown selected value */
#appointmentTime,
#appointmentType,
#appointmentDate {
    font-size: 13px;
}

/* Dropdown ke andar sabhi options */
#appointmentTime option,
#appointmentType option,
#appointmentDate input {
    font-size: 12px;
}


.contact-item strong a{color:rgb(7 59 92);text-decoration:none;}











        /* ===== Gallery Section ===== */

        .gallery-section {
            padding: 85px 0;
            background: #f7f9fc;
            font-family: Arial, sans-serif;
        }

        .gallery-header {
            max-width: 700px;
            margin: 0 auto 40px;
            text-align: center;
        }

        .gallery-subtitle {
            display: inline-block;
            color: #0d6efd;
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 12px;
        }

        .gallery-title {
            font-size: 38px;
            font-weight: 800;
            color: #172b4d;
            margin-bottom: 15px;
        }

        .gallery-description {
            font-size: 15px;
            line-height: 1.8;
            color: #6b7280;
            margin-bottom: 0;
        }

        /* ===== Filter Buttons ===== */

        .gallery-filters {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 35px;
        }

        .gallery-filter-btn {
            border: 1px solid #dce3ed;
            background: #ffffff;
            color: #344054;
            padding: 10px 22px;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .gallery-filter-btn:hover,
        .gallery-filter-btn.active {
            background: #0d6efd;
            color: #ffffff;
            border-color: #0d6efd;
        }

        /* ===== Gallery Cards ===== */

        .gallery-item {
            margin-bottom: 24px;
        }

        .gallery-card {
            position: relative;
            overflow: hidden;
            border-radius: 14px;
            background: #ffffff;
            box-shadow: 0 5px 25px rgba(23, 43, 77, 0.07);
            cursor: pointer;
        }

        .gallery-image-wrapper {
            position: relative;
            overflow: hidden;
            aspect-ratio: 4 / 3;
        }

        .gallery-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }

        .gallery-card:hover .gallery-image {
            transform: scale(1.08);
        }

        .gallery-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(13, 35, 70, 0.65);
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        .gallery-card:hover .gallery-overlay,
        .gallery-card:focus-within .gallery-overlay {
            opacity: 1;
        }

        .gallery-zoom-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            color: #0d6efd;
            border-radius: 50%;
            font-size: 18px;
            transform: scale(0.8);
            transition: transform 0.3s ease;
        }

        .gallery-card:hover .gallery-zoom-icon {
            transform: scale(1);
        }

        .gallery-card-info {
            padding: 17px 18px;
        }

        .gallery-card-info h3 {
            color: #172b4d;
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .gallery-card-info p {
            color: #7b8494;
            font-size: 13px;
            margin: 0;
        }

        /* ===== Filter Animation ===== */

        .gallery-item {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .gallery-item.is-hidden {
            display: none;
        }

        /* ===== Lightbox ===== */

        .gallery-lightbox {
            position: fixed;
            inset: 0;
            z-index: 99999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 55px 20px 25px;
            background: rgba(7, 13, 25, 0.94);
        }

        .gallery-lightbox.open {
            display: flex;
        }

        .lightbox-content {
            max-width: 1000px;
            width: 100%;
            text-align: center;
        }

        .lightbox-image {
            max-width: 100%;
            max-height: 75vh;
            object-fit: contain;
            border-radius: 8px;
        }

        .lightbox-caption {
            color: #ffffff;
            font-size: 16px;
            margin-top: 15px;
        }

        .lightbox-close,
        .lightbox-prev,
        .lightbox-next {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            color: #ffffff;
            background: rgba(255, 255, 255, 0.15);
            width: 45px;
            height: 45px;
            border-radius: 50%;
            font-size: 20px;
            transition: background 0.3s ease;
        }

        .lightbox-close:hover,
        .lightbox-prev:hover,
        .lightbox-next:hover {
            background: #0d6efd;
        }

        .lightbox-close {
            top: 20px;
            right: 25px;
        }

        .lightbox-prev {
            left: 25px;
            top: 50%;
            transform: translateY(-50%);
        }

        .lightbox-next {
            right: 25px;
            top: 50%;
            transform: translateY(-50%);
        }

        /* ===== Responsive CSS ===== */

        @media (max-width: 991px) {
            .gallery-section {
                padding: 65px 0;
            }

            .gallery-title {
                font-size: 32px;
            }

            .gallery-card-info {
                padding: 14px;
            }
        }

        @media (max-width: 767px) {
            .gallery-section {
                padding: 45px 0;
            }

            .gallery-title {
                font-size: 27px;
            }

            .gallery-description {
                font-size: 14px;
            }

            .gallery-filters {
                gap: 8px;
                margin-bottom: 25px;
            }

            .gallery-filter-btn {
                padding: 8px 15px;
                font-size: 12px;
            }

            .gallery-item {
                margin-bottom: 16px;
            }

            .gallery-card-info h3 {
                font-size: 15px;
            }

            .gallery-card-info p {
                font-size: 12px;
            }

            .lightbox-prev {
                left: 10px;
            }

            .lightbox-next {
                right: 10px;
            }

            .lightbox-close {
                top: 12px;
                right: 12px;
            }

            .lightbox-image {
                max-height: 65vh;
            }
        }

        @media (max-width: 400px) {
            .gallery-card-info {
                padding: 11px;
            }

            .gallery-card-info h3 {
                font-size: 13px;
            }

            .gallery-zoom-icon {
                width: 38px;
                height: 38px;
                font-size: 15px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .gallery-item,
            .gallery-image,
            .gallery-overlay,
            .gallery-zoom-icon {
                transition: none;
            }
        }