/* ============================================
   BSCT PROJECT - FULL STYLESHEET
   ============================================ */

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

:root {
  --navy: #042d52d1;
  --navy-dark: #03163e;
  --pink: #00a3da;
  --pink-dark: #007d94;
  --cyan: #00a3da;
  --white: #ffffff;
  --off-white: #f4f6f8;
  --text: #2c2c2c;
  --text-light: #666;
  --border: #e0e0e0;
  --shadow: 0 4px 20px rgba(0,0,0,0.12);
}

html { scroll-behavior: smooth; }
body{font-family: "Times New Roman", Times, serif;}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; outline: none; font-family: inherit; }
input, select { font-family: inherit; outline: none; border: none; }



/* ============================================
   TOP BAR
   ============================================ */
.top-bar {
  background: var(--navy-dark);
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  padding: 6px 0;
}
.top-bar-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 24px;
  justify-content: flex-end;
}
.top-bar span i { margin-right: 5px; color: var(--pink); }

/* ============================================
   NAVBAR
   ============================================ */

.navbar {
  background: linear-gradient(to right, #009BD4 0%, #0285C3 25%, #046FB1 50%, #074D97 75%, #083D8B 100%);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
   padding: 18px 40px;   /* height vadhse */
}

/*.navbar {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}*/
.navbar-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  height: 82px;
  gap: 16px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
 gap: 0px; /* bane vachche space */
  flex-shrink: 0;
}

/* ROUND LOGO */
.logo-circle {
  width: 85px;   /* mota karo */
  height: 85px;  /* mota karo */
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
    margin-right:-8px;

}

.logo-fallback {
  font-size: 28px;
  line-height: 1;
}

.logo-globe {
  font-size: 42px;
}

/* PNG TEXT LOGO */

.BS-text-logo{
  height:100px;
  width:auto;
  object-fit:contain;
  margin-left:0;
  padding:0;
  margin-right:-15px;
}

/* Quick Links (Language  */
/* Quick Links (Language + Zakat) */
.nav-quick {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.nav-quick2 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;

}
.lang-btn, .zakat-btn {
  background: rgba(255,255,255,0.1);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.2s;
}
.lang-btn:hover, .zakat-btn:hover { background: rgba(255,255,255,0.2); }

/*.zakat-btn { background: #00a3da; }
/* Zakat Circle */
.zakat-circle-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.zakat-circle-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.5);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: transform 0.2s;
}
.zakat-circle-btn:hover { transform: scale(1.08); }
.zakat-circle-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.zakat-label {
  color: rgba(255,255,255,0.9);
  font-size: 11px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.5px;
}

/* Pulse rings - Zakat */
.zakat-pulse-ring {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  animation: pulseRing 2s ease-out infinite;
  z-index: 1;
}
.zakat-pulse-ring.ring2 {
  animation-delay: 1s;
}
@keyframes pulseRing {
  0%   { transform: translate(-50%, -60%) scale(1); opacity: 0.8; }
  100% { transform: translate(-50%, -60%) scale(2); opacity: 0; }
}
@keyframes pulseRingSquare {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}





/* Nav Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.nav-item {
  position: relative;
}
.nav-item > a {
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.3px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.nav-item > a:hover { color: white; background: rgba(255,255,255,0.1); }
.nav-item > a .fa-chevron-down { font-size: 9px; opacity: 0.7; }

.new-badge .badge-new {
  background: var(--pink);
  color: white;
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: 800;
  vertical-align: super;
  margin-left: 2px;
}

/* Dropdown */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: white;
  min-width: 180px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: all 0.2s;
  z-index: 200;
  overflow: hidden;
}
/* ================================
   NAV ITEM DROPDOWN BASE
================================ */
.nav-item.dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

/* ================================
   DROPDOWN MENU BOX
================================ */
.nav-item.dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);

  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;

  transition: all 0.25s ease;
  z-index: 999;
  overflow: hidden;
}

/* ================================
   SHOW ON HOVER (DESKTOP)
================================ */
.nav-item.dropdown:hover .dropdown-menu,
.nav-item.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* ================================
   DROPDOWN LINKS
================================ */
.dropdown-menu a {
  display: block;
  padding: 12px 16px;
  font-size: 14px;
  color: #222;
  border-bottom: 1px solid #f3f3f3;
  transition: all 0.2s ease;
}

/* ================================
   HOVER EFFECT (COOL BLUE SLIDE)
================================ */
.dropdown-menu a:hover {
  background: #00a3da;
  color: #fff;
  padding-left: 22px;
}

/* Remove last border */
.dropdown-menu a:last-child {
  border-bottom: none;
}

/* ================================
   ICON ROTATION (ARROW EFFECT)
================================ */
.nav-item.dropdown > a i {
  transition: transform 0.3s ease;
}

.nav-item.dropdown:hover > a i {
  transform: rotate(180deg);
}







/* Right Side */
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.icon-btn {
  background: rgba(255,255,255,0.1);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  font-size: 14px;
}
.icon-btn:hover { background: rgba(255,255,255,0.2); }
.cart-btn { position: relative; }
.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--pink);
  color: white;
  font-size: 9px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yt-avatar {
  position: relative;
  width: 44px;
  height: 44px;
}
.yt-icon {
  width: 44px;
  height: 44px;
  background: #ff0000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}
.avatar-img {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  object-fit: cover;
}
.donate-btn {
  background: var(--pink);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 12px;
  padding: 10px 20px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  transition: background 0.2s, transform 0.1s;
}
.donate-btn:hover { background: var(--pink-dark); transform: translateY(-1px); }
.phone-num {
  color: white;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.9;
  white-space: nowrap;
}
/* Quick Donate Button */
 .quick-donate-pulse-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
     z-index: 999;
}

/* Pulse Rings */
.quick-donate-pulse-ring {
    position: absolute;
    inset: -5px;
    border-radius: 8px;
    border: 2px solid #00a3da;
    animation: pulseRingSquare 2s ease-out infinite;
    pointer-events: none;
}

.quick-donate-pulse-ring.ring2 {
    animation-delay: 1s;
}

/* Button */
.quick-donate-btn {
    background: #0031B4;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    padding: 10px 22px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: background 0.2s, transform 0.1s;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

/* Hover Effect */
.quick-donate-btn:hover {
    background: #00248a;
    transform: translateY(-1px);
}

/* Pulse Animation */
@keyframes pulseRingSquare {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}                    


/* Mobile Donate Button (visible only on mobile) */
.mob-donate-btn {
  display: none;
  background: var(--pink);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin-left: auto;
  transition: background 0.2s;
}
.mob-donate-btn:hover { background: var(--pink-dark); }

/* Hamburger */
.hamburger {
  display: none;
  background: transparent;
  color: white;
  font-size: 22px;
  margin-left: 6px;
}

/* ============================================
   MOBILE MENU
   ============================================ */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  background: var(--navy-dark);
  z-index: 9999;
  padding: 60px 24px 24px;
  transition: right 0.3s ease;
  box-shadow: -4px 0 20px rgba(0,0,0,0.3);
}
.mobile-menu.open { right: 0; }
.close-menu {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  color: white;
  font-size: 22px;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
}

.mnav-item {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mnav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,0.9);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 16px 0;
  transition: color 0.2s;
  cursor: pointer;
}

.mnav-link i {
  font-size: 12px;
  transition: transform 0.3s ease;
}

.mnav-item.open > .mnav-link i {
  transform: rotate(180deg);
}

.mnav-link:hover { color: var(--pink); }

.mnav-sub {
  display: none;
  flex-direction: column;
  padding-bottom: 8px;
}

.mnav-item.open > .mnav-sub {
  display: flex;
}

.mnav-sub a {
  display: block;
  color: rgba(255,255,255,0.7);
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 0 10px 16px;
  border-left: 2px solid transparent;
  transition: all 0.2s;
}

.mnav-sub a:hover {
  color: var(--pink);
  border-left-color: var(--pink);
  padding-left: 20px;
}
.mobile-donate-btn {
  display: inline-block !important;
  background: var(--pink) !important;
  color: white !important;
  padding: 12px 28px !important;
  border-radius: 4px !important;
  margin-top: 20px !important;
  border-bottom: none !important;
}

/* ============================================
   ALERT BANNER
   ============================================ */
.alert-banner {
  background: var(--pink);
  color: white;
  text-align: center;
  padding: 10px 20px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.alert-text { font-style: normal; font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: 1px; }
.alert-link {
  color: white;
  font-weight: 700;
  text-decoration: underline;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.3px;
  transition: opacity 0.2s;
}
.alert-link:hover { opacity: 0.8; }

/* ============================================
   HERO SLIDER (IMAGES)
   ============================================ */

.hero-slider {
  position: relative;
  width: 90%;        /* full screen se thoda chota */
  max-width: 1200px; /* maximum width */
  height: 420px;     /* height kam ki */
  overflow: hidden;
  background: #111;
  margin: 0 auto;    /* center me */
  border-radius: 20px; /* optional stylish corners */
}





/*.hero-slider {
  position: relative;
  width: 100%;
  height: 580px;
  overflow: hidden;
  background: #111;
}

/* ============================================
   QUICK DONATE BAR
   ============================================ */
.quick-donate-bar {
  background:#fff;
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.qd-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Currency Select */
.currency-select {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.2s;
  background: white;
}
.currency-select:hover { border-color: var(--cyan); }
.currency-select .flag { font-size: 18px; line-height: 1; }
.currency-select .fa-chevron-down { font-size: 10px; color: var(--text-light); }

/* Amount Input */
.amount-input-wrap {
  flex: 1;
  min-width: 120px;
}
.amount-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 9px 14px;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.2s;
  background: white;
}
.amount-input:focus { border-color: var(--cyan); }
.amount-input::placeholder { color: #aaa; }
/* Hide number spinners */
.amount-input::-webkit-outer-spin-button,
.amount-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.amount-input[type=number] { -moz-appearance: textfield; }

/* Preset Amounts */
.preset-amt {
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: white;
  transition: all 0.2s;
  white-space: nowrap;
}
.preset-amt:hover { border-color: var(--pink); color: var(--pink); }
.preset-amt.active {
  background: var(--pink);
  border-color: var(--pink);
  color: white;
}

/* Category Select */
.category-select {
  position: relative;
  flex: 1;
  min-width: 160px;
}

/* SELECT BOX */
.category-select select {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 9px 36px 9px 14px;
  font-size: 13px;
  color: var(--text);
  background: white;
  appearance: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* focus effect */
.category-select select:focus {
  border-color: #00a3da;
  box-shadow: 0 0 8px rgba(0,163,218,0.3);
}

/* ARROW ICON */
.category-select .fa-chevron-down {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #00a3d4;
  pointer-events: none;
  transition: all 0.3s ease;
}

/* 🔥 BLUR + COLOR CHANGE ON HOVER */
.category-select:hover .fa-chevron-down {
  color: #00a3d4;
  filter: blur(0.3px);
  text-shadow: 0 0 6px rgba(0,163,218,0.6);
}

/* 🔥 ACTIVE FOCUS STATE (BEST EFFECT) */
.category-select:focus-within .fa-chevron-down {
  color: #00e1ff;
  filter: blur(0px);
  text-shadow: 0 0 10px rgba(0,225,255,0.9);
  transform: translateY(-50%) rotate(180deg);
}

/* Payment Icons */
.payment-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f0f4ff;
  border: 1.5px solid #dce4ff;
  border-radius: 6px;
  padding: 6px 12px;
}
.pay-icon { width: 24px; height: 16px; object-fit: contain; }
.pay-icon-text {
  font-size: 10px;
  font-weight: 800;
  color: #00a3d4;
  letter-spacing: 0.3px;
}
.pay-icon-text.mc { color: #eb001b; }
.pay-icon-fb { font-size: 9px; color: #555; }

/* Quick Donate Button */
.quick-donate-btn {
  background: var(--pink);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 13px;
  padding: 10px 22px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: background 0.2s, transform 0.1s;
}
.quick-donate-btn:hover { background: var(--pink-dark); transform: translateY(-1px); }

/* ============================================
   HERO SLIDER
   ============================================ */
.hero-slider {
  position: relative;
  width: calc(100% - 60px);
  max-width: 1300px;
  margin: 18px auto 24px;
  height: 620px;
  overflow: hidden;
  border-radius: 16px;
  background: #111;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.slide.active { opacity: 1; z-index: 2; }

.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 8s ease;
}
.slide.active .slide-bg { transform: scale(1); }

/* Slide Background Colors (gradient fallbacks) */
.slide-bg-1 {
  background-image: url("../images/h1.png");
  background-size: cover;
  background-position: center;
}
.slide-bg-2 {
  background-image: url("../images/h2.png");
  background-size: cover;
  background-position: center;
}
.slide-bg-3 {
  background-image: url("../images/h3.png");
  background-size: cover;
  background-position: center;
}
.slide-bg-4 {
  background-image: url("../images/h4.png");
  background-size: cover;
  background-position: center;
}
.slide-bg-5 {
  background-image: url("../images/h5.png");
  background-size: cover;
  background-position: center;
}
.slide-bg-6 {
  background-image: url("../images/h6.png");
  background-size: cover;
  background-position: center;

}
.slide-bg-7 {
  background-image: url("../images/h7.png");
  background-size: cover;
  background-position: center;
}
.slide-bg-8 {
  background-image: url("../images/h8.png");
  background-size: cover;
  background-position: center;
}
.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.1) 100%);
}

.slide-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 60px;
  gap: 40px;
  z-index: 3;
}

.slide-text-block { flex: 1; }

.slide-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 58px;
  color: white;
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.italic-accent {
  font-style: italic;
  font-weight: 700;
  color: white;
}

.slide-subtitle {
  font-size: 22px;
  color: rgba(255,255,255,0.95);
  line-height: 1.4;
  margin-bottom: 32px;
}
.highlight-pink {
  color: var(--pink);
  font-weight: 700;
}

.slide-cta {
  display: inline-block;
  background: var(--pink);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 36px;
  border-radius: 6px;
  letter-spacing: 1px;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(233,30,140,0.4);
}
.slide-cta:hover {
  background: var(--pink-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(233,30,140,0.5);
}

/* Years Badge */
.years-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.badge-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--navy));
  border: 3px solid rgba(255,255,255,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.badge-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 48px;
  font-weight: 900;
  color: white;
  line-height: 1;
}
.badge-logo-small {
  font-size: 7px;
  color: rgba(255,255,255,0.8);
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.3;
}
.badge-label {
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-align: center;
}

/* Slider Controls */
.slider-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
}
.slider-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background 0.2s;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.3);
}
.slider-arrow:hover { background: rgba(255,255,255,0.45); }
.slider-dots { display: flex; gap: 8px; }
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: all 0.25s;
  border: 1.5px solid rgba(255,255,255,0.5);
}
.dot.active {
  background: var(--pink);
  border-color: var(--pink);
  transform: scale(1.25);
}

/* =========================
   PROJECT PAGE STYLE
========================= */

.projects-page{
  font-family: Arial;
  background:#fff;
}

/* HERO */
.projects-hero{
  position:relative;
  height:70px;
  overflow:hidden;
}

.projects-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.05);
}

.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, #1a4080 100%);
  display:flex;
  justify-content:center;
  align-items:center;
}

/* SHORT HEADER BOX */
/*.hero-box{
  padding:4px 16Spx;
  border:2px solid #fff;
  border-radius:8px;
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(6px);
}*/

.hero-box h1{
  color:#fff;
  font-size:28px;
  letter-spacing:2px;
  margin:0;
}
.hero-box h1 span{
  color:#00a3da;   /* PROJECT blue */
}

/* GRID */
.projects-container{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
  padding:40px;
}

/* CARD */
.sproject-card{
  display:flex;
  gap:15px;
  background:#fff;
  border:2px solid #e6f6fb;
  border-left:5px solid #00a3da;
  border-radius:12px;
  overflow:hidden;
  transition:0.3s;
  height:280px;   /* SHORT HEIGHT */
  
}

.sproject-card:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(0,163,218,0.15);
}

/* IMAGE */
.sproject-card img{
  width:420px;
  height:100%;
  object-fit:cover;
}

/* TEXT */
.content{
  padding:10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.content h3{
  margin:0;
  font-size:28px;   /* pehle 20px tha */
  color:#00a3da;    /* new color */
  font-weight:bold;
}

.content p{
  margin:5px 0 0;
  font-size:12px;
  color:#666;
  line-height:1.4;
}

/* RESPONSIVE */
@media(max-width:768px){
  .projects-container{
    grid-template-columns:1fr;
    padding:20px;
  }

  .project-card{
    height:100px;
  }
}






/* =========================
    our PROJECT new
========================= */

/* PAGE */
.impact-showcase{
  padding:70px 20px;
  background:linear-gradient(135deg,#eef7ff,#ffffff);
  font-family:Arial;
}

/* HEADER */
.impact-showcase__header{
  text-align:center;
  margin-bottom:40px;
}

.impact-showcase__title{
  font-size:40px;
  color:#125299;
  font-weight:700;
}

.impact-showcase__title span{
  color:#00a3da;
}

.impact-showcase__subtitle{
  color:#666;
  margin-top:8px;
}

/* GRID */
.impact-showcase__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:25px;
}

/* CARD */
.impact-card{
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:0.4s ease;
}

/* IMAGE */
.impact-card__img{
  width:100%;
  height:auto;
  max-height:260px;
  display:block;
}

.impact-card:hover .impact-card__img{
  transform:scale(1.08);
}
/* BODY */
.impact-card__body{
  padding:16px;
}

.impact-card__title{
  color:#125299;
  font-size:18px;
}

.impact-card__desc{
  color:#555;
  font-size:14px;
}

/* 3D HOVER */
.impact-card:hover{
  transform:translateY(-12px) scale(1.04);
  box-shadow:0 25px 50px rgba(0,0,0,0.18);
}



/* =========================
    our PROJECT new
========================= */

/* =========================
   PROJECT SECTION STYLE
========================= */

.projects-section{
  background:#fff;
  padding-bottom:0px;
  font-family: Arial, sans-serif;
}

/* HERO */
.projects-hero{
  position:relative;
  width:100%;
  height:150px;
  overflow:hidden;
}

.projects-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.05);
}

.projects-hero .overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(to right, #009BD4 0%, #0285C3 25%, #046FB1 50%, #074D97 75%, #083D8B 100%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:#fff;
  text-align:center;
}

.projects-hero h1{
  font-size:42px;
  letter-spacing:2px;
  margin:0;
}

.projects-hero p{
  font-size:16px;
  margin-top:10px;
}

/* GRID */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
  padding:50px 30px;
}

/* CARD */
.project-card{
  background:#ffffff;
  border:2px solid #e6f6fb;
  border-radius:18px;
  padding:25px;
  text-align:center;
  transition:0.4s;
  box-shadow:0 8px 20px rgba(0,0,0,0.05);
  position:relative;
  overflow:hidden;
}

/* hover glow */
.project-card::before{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(0,163,218,0.15), transparent 60%);
  transform:scale(0);
  transition:0.5s;
}

.project-card:hover::before{
  transform:scale(1);
}

.project-card:hover{
  transform:translateY(-8px);
  border-color:#00a3da;
}

/* ICON CIRCLE */
.project-card .icon{
  width:70px;
  height:70px;
  margin:0 auto 15px;
  border-radius:50%;
  background:#00a3da;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  font-size:28px;
  box-shadow:0 10px 20px rgba(0,163,218,0.3);
}

.project-card h3{
  color:#003b4d;
  margin:10px 0 5px;
  font-size:28px;/* ye font ki size he mission annapurna wali  donar ke liye dono*/
}

.project-card p{
  color:#555;
  font-size:13px;
  line-height:1.5;
}

/* RESPONSIVE */
@media(max-width:600px){
  .projects-hero h1{
    font-size:28px;
  }
}


/* ============================================
   our partners
   ============================================ */


/* GRID */
.projects-grid{
  display:flex;
  gap:25px;
  padding:30px 0;
  width:max-content;
}

/* ONLY LOGO SQUARE CARD */
.project-card{
  min-width:140px;
  height:200px;
  background:#fff;
  border:2px solid #e6f6fb;
  border-radius:22px;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  overflow:hidden;
  transition:0.4s;
  box-shadow:0 10px 25px rgba(0,0,0,0.06);
  cursor:pointer;
}

/* Glow Effect */
.project-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle, rgba(0,163,218,0.18), transparent 60%);
  opacity:0;
  transition:0.5s;
}

.project-card:hover::before{
  opacity:1;
  transform:scale(1.1);
}

.project-card:hover{
  transform:translateY(-10px) scale(1.03);
  border-color:#00a3da;
  box-shadow:0 18px 35px rgba(0,163,218,0.25);
}

/* LOGO IMAGE */
.project-card img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:0.4s;
  z-index:2;
}

.project-card:hover img{
  transform:scale(1.12) rotate(3deg);
}

.overlay h1{
  color:#ffffff;   /* OUR = dark */
  font-size:42px;
  font-weight:700;
}

.overlay h1 span{
  color:#00a3da;   /* PARTNERS = light blue */
  font-weight:700;
}

.overlay p{
  color:#ffffff;
  font-size:16px;
  margin-top:10px;
}



/* ============================================
   our partners
   ============================================ */








/* ============================================
   CAUSES SECTION( OUR PROJECTS)
   ============================================ */

body{
  background:#f5fcfd;
}

.causes-section {
  padding: 22px 20px;
  background: var(--off-white);
}

.section-header {
  text-align: center;
  margin-bottom: 28px;
}

.section-header h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0px;
}

.section-header p {
  font-size: 16px;
  color: var(--text-light);
}

.accent { color: var(--pink); }
.accent-light { color: var(--cyan); }

/* 3D Perspective */
.causes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1300px;
  margin: 0 auto;
  perspective: 1200px;
}

/* CARD */
.cause-card {
  background: rgba(255,255,255,0.96);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;

  transform-style: preserve-3d;
  position: relative;
}

/* 3D Hover */
.cause-card:hover {
  transform:
    rotateX(6deg)
    rotateY(-6deg)
    translateY(-10px)
    scale(1.03);

  box-shadow:
    0 20px 40px rgba(0,0,0,0.18),
    0 0 25px rgba(0,163,218,0.25);
}

/* Shine Effect */
.cause-card::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:60%;
  height:100%;
  background: rgba(255,255,255,0.25);
  transform: skewX(-25deg);
  transition: 0.7s;
  z-index: 2;
}

.cause-card:hover::before{
  left:130%;
}

/* IMAGE */
.cause-img {
  height: 250px;
  width:100%;
  background-size: cover;
  background-position: top;
  transition: transform 0.5s ease;
}

.cause-img-1{
  background-image: url("../images/img1.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  height: 300px;
  width: 100%;
  transition: transform 0.5s ease;
}

.cause-img-2 {
  background-image: url("../images/vidhya 1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
  width: 100%;
  transition: transform 0.5s ease;
}

.cause-img-3 {
  background-image: url("../images/medicalemer.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
  width: 100%;
  transition: transform 0.5s ease;
}

.cause-img-4 {
  background-image: url("../images/Aatmnirbhar 1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
  width: 100%;
  transition: transform 0.5s ease;
}

.cause-img-5 {
  background-image: url("../images/Animal.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
  width: 100%;
  transition: transform 0.5s ease;
}

.cause-img-6 {
  background-image: url("../images/h2img.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
  width: 100%;
  transition: transform 0.5s ease;
}

.cause-img-7 {
  background-image: url("../images/babyFeedig.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
  width: 100%;
  transition: transform 0.5s ease;
}

.cause-img-8 {
  background-image: url("../images/sevakniwas.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
  width: 100%;
  transition: transform 0.5s ease;
}

/* Image Zoom */
.cause-card:hover .cause-img,
.cause-card:hover .cause-img-1,
.cause-card:hover .cause-img-2,
.cause-card:hover .cause-img-3,
.cause-card:hover .cause-img-4,
.cause-card:hover .cause-img-5,
.cause-card:hover .cause-img-6,
.cause-card:hover .cause-img-7,
.cause-card:hover .cause-img-8{
  transform: scale(1.08);
}

/* BODY */
.cause-body {
  padding: 20px;
  position: relative;
  z-index: 3;
}

.cause-body h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}

.cause-body p {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 14px;
}

/* PROGRESS */
.progress-bar {
  height: 6px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--pink), var(--cyan));
  border-radius: 3px;
  transition: width 1s ease;
}

/* META */
.cause-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 14px;
}

/* BUTTON */
.cause-btn {
  display: block;
  text-align: center;
  background: #00a3da;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 10px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.cause-btn:hover {
  background: #007d94;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,163,218,0.35);
}

/* Urgent Appeals Marquee */
.causes-marquee {
  width: 100%;
  overflow-x: clip;
  position: relative;
}

.causes-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: causesScroll 30s linear infinite;
  padding: 10px 0;
}

.causes-track .cause-card {
  width: 320px;
  flex-shrink: 0;
}

@keyframes causesScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media(max-width:1100px){
  .causes-grid{
    grid-template-columns: repeat(2,1fr);
  }
}

@media(max-width:700px){
  .causes-grid{
    grid-template-columns: 1fr;
  }
}







/* ============================================
   IMPACT SECTION
   ============================================ */



   /* Keep Same Background */
.impact-section {
  background: linear-gradient(to right, #009BD4 0%, #0285C3 25%, #046FB1 50%, #074D97 75%, #083D8B 100%);
  padding: 20px 10px;
}

/* Box Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}

/* Updated Box Style */
.stat-item {
  background: rgba(255,255,255,0.15); /* changed color */
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;

  padding: 20px 15px; /* height kam */
  min-height: 140px;  /* box smaller */

  transition: 0.3s ease;
  backdrop-filter: blur(8px);
}

/* Hover */
.stat-item:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.22);
}

/* Number */
.stat-num {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 36px; /* thoda small */
  font-weight: 900;
  color: #ffffff; /* changed */
  margin-bottom: 8px;
}

/* Label */
.stat-label {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-weight: 600;
}


.impact-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.impact-title { margin-bottom: 56px; }
.impact-title h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: white;
  margin-bottom: 10px;
}
.impact-title p { color: rgba(255,255,255,0.7); font-size: 16px; }

/*.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.stat-item {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 32px 20px;
  transition: transform 0.2s;
}
.stat-item:hover { transform: translateY(-4px); }
.stat-num {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 44px;
  font-weight: 900;
  color: var(--cyan);
  margin-bottom: 8px;
}
.stat-label {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  font-weight: 600;
}

/* ============================================
  
/* ================= SUPPORT EDUCATION ================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    background:#f5fcfd;
}

/* SECTION */

.donation-section{
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:70px;
    padding:80px 8%;
    flex-wrap:wrap;
}

/* LEFT IMAGES */

.donation-images{
  position:relative;
  width:500px;
  height:500px;
  overflow:hidden;
  border-radius:30px;
}

.img-box{
    position:absolute;
    overflow:hidden;
    border-radius:30px;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
    transition:0.4s ease;
    cursor:pointer;

}

.img-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:30px;
    transition:0.4s ease;
}

/* Hover Effect */

.img-box:hover{
    transform:translateY(-10px) scale(1.03);
    box-shadow:0 40px 60px rgba(0,0,0,0.25);
}

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

/* IMAGE POSITIONS */

.img1{
    width:100%;
    height:100%;
    top:0;
    left:0;
}



/* RIGHT CONTENT */

.donation-content{
    max-width:520px;
}

.small-title{
    color:#00a3da;
    font-size:18px;
    font-weight:600;
    letter-spacing:1px;
}

.donation-content h1{
    font-size:55px;
    line-height:1.2;
    color:#111;
    margin:15px 0 30px;
    font-weight:700;
}

/* CARDS */

.info-card{
    background:#fff;
    padding:25px;
    border-radius:20px;
    margin-bottom:20px;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
    border-left:5px solid #00a3da;

    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Blue Hover Effect */
.info-card::before{
    content:"";
    position:absolute;
    left:0;
    bottom:-100%;
    width:100%;
    height:100%;
    background:#00a3da;
    transition:0.5s ease;
    z-index:-1;
}

/* Hover */
.info-card:hover::before{
    bottom:0;
}

/* Text White on Hover */
.info-card:hover h3,
.info-card:hover p{
    color:#fff;
}

.info-card h3{
    font-size:24px;
    color:#00a3da;
    margin-bottom:8px;
    transition:0.4s;
}

.info-card p{
    font-size:18px;
    line-height:1.7;
    color:#555;
    transition:0.4s;
}

.second-card{
    border-left:5px solid #00a3da;
}

/* BUTTON */

.give-btn-btn{
    display:inline-block;
    margin-top:15px;
    padding:16px 40px;
    background:#00a3da;
    color:#fff;
    text-decoration:none;
    font-size:18px;
    font-weight:600;
    border-radius:50px;
    transition:0.4s;
    box-shadow:0 10px 20px rgba(0,151,178,0.3);
}

.give-btn-btn:hover{
    background:#00a3da;
    transform:translateY(-5px);
}






/* RESPONSIVE */

@media(max-width:991px){

    .donation-section{
        flex-direction:column;
        text-align:center;
    }

    .donation-images{
        width:100%;
        max-width:450px;
        height:450px;
    }

    .donation-content h1{
        font-size:42px;
    }

}

@media(max-width:600px){

    .donation-images{
        height:380px;
    }

    .img1{
        width:180px;
        height:220px;
    }

    .img2{
        width:160px;
        height:190px;
    }

    .img3{
        width:220px;
        height:160px;
        left:70px;
    }

    .donation-content h1{
        font-size:34px;
    }

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

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

}
/* ================= SUPPORT EDUCATION ================= */

/*================= Our Activitie ================= */

/* Layout - Auto Rolling Marquee */
.slider-wrapper {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
}

.slider-track{
    display:flex;
    gap:35px;
    width: max-content;
    animation: scrollActivities 30s linear infinite;
}

@keyframes scrollActivities {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.slider-track:hover {
  animation-play-state: paused;
}

/* 3D Card */
.circle-card{
    width:270px;
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    position:relative;
    transform-style:preserve-3d;
    transition:0.5s ease;
    box-shadow:
      0 15px 35px rgba(0,0,0,0.08),
      inset 0 1px 0 rgba(255,255,255,0.7);
    flex-shrink: 0;
}

/* Blue water fill from bottom */
.circle-card::before{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:0%;
    background:#00a3da;
    transition:0.5s ease;
    z-index:1;
    border-radius:0 0 30px 30px;
}

.circle-card:hover::before{
    height:100%;
    border-radius:30px;
}

/* Image */
.circle-card img{
    width:100%;
    height:200px;
    object-fit:cover;
    display:block;
    transition:0.6s ease;
}

/* Keep content above blue layer */
.circle-card > *{
    position:relative;
    z-index:2;
}

/* Bottom Content */
.circle-card h3{
    padding:16px 22px 4px;
    font-size:22px;
    text-align:center;
    color:#00a3d4;
    background:transparent;
    margin:0;
    transition:0.4s;
}

/* Description */
.circle-desc {
    padding: 4px 18px 12px;
    font-size: 14px;
    color: #666;
    text-align: center;
    line-height: 1.4;
    background: transparent;
    margin: 0;
    transition:0.4s;
}

/* Read More Button */
.circle-read-more {
    display: block;
    text-align: center;
    padding: 10px 18px 18px;
    background: transparent;
    color: #00a3da;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: 0.3s;
}

.circle-read-more:hover {
    color: #007d94;
    letter-spacing: 1px;
}

/* Hover Effect */
.circle-card:hover{
    transform:
      rotateX(8deg)
      rotateY(-8deg)
      translateY(-12px)
      scale(1.03);
      
    box-shadow:
      0 25px 50px rgba(0,163,218,0.25),
      0 10px 20px rgba(0,0,0,0.08);
}

/* Zoom Image */
.circle-card:hover img{
    transform:scale(1.08);
}

/* Glow Effect */
.circle-card:hover::before{
    opacity:1;
}

/* Text Hover - turn white on blue fill */
.circle-card:hover h3{
    color:#fff;
}
.circle-card:hover .circle-desc{
    color:#fff;
}
.circle-card:hover .circle-read-more{
    color:#fff;
}

/* Floating Shine */
.circle-card::after{
    content:"";
    position:absolute;
    top:-120%;
    left:-40%;
    width:60%;
    height:300%;
    background:rgba(255,255,255,0.35);
    transform:rotate(25deg);
    transition:0.8s;
}

.circle-card:hover::after{
    left:120%;
}

/* Mobile */
@media(max-width:768px){

    .section-header h2{
        font-size:32px;
    }

    .circle-card{
        width:240px;
    }

    .circle-card img {
        height: 160px;
    }

    .slider-track {
        gap: 20px;
        animation: scrollActivities 20s linear infinite;
    }
}


/* =========================
   MONTH-WISE UPDATES
========================= */

.month-updates {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- TABS ---- */
.month-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  position: relative;
  flex-wrap: wrap;
}

.month-tabs input[type="radio"] {
  display: none;
}

.month-tab {
  padding: 12px 28px;
  border-radius: 50px;
  border: 2px solid #00a3da;
  background: #fff;
  color: #315270;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.35s ease;
  user-select: none;
  position: relative;
  z-index: 2;
}

.month-tab:hover {
  background: #00a3da15;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,163,218,0.2);
}

.month-tabs input[type="radio"]:checked + .month-tab {
  background: linear-gradient(135deg, #00a3da, #046FB1);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 25px rgba(0,163,218,0.35);
  transform: translateY(-2px);
}

/* ---- RESPONSIVE ---- */
@media(max-width: 768px) {
  .month-tabs {
    gap: 8px;
  }
  .month-tab {
    padding: 10px 20px;
    font-size: 13px;
  }
}

/* =========================
   MONTH MODAL
========================= */

.month-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.month-modal.open {
  display: flex;
}

.month-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
}

.month-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  z-index: 2;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  animation: modalIn 0.35s ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.month-modal-content img {
  display: block;
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
}

.month-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: 0.3s;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.month-modal-close:hover {
  background: rgba(0,0,0,0.8);
  transform: scale(1.1);
}

.month-modal-download {
  position: absolute;
  top: 12px;
  right: 60px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0,163,218,0.85);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,163,218,0.3);
}

.month-modal-download:hover {
  background: #00a3da;
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 6px 25px rgba(0,163,218,0.5);
}

.month-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.month-modal-nav:hover {
  background: rgba(0,163,218,0.85);
}

.month-modal-nav.prev { left: 12px; }
.month-modal-nav.next { right: 12px; }

.month-modal-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 1px;
}

@media(max-width: 768px) {
  .month-modal-content {
    max-width: 95vw;
    max-height: 85vh;
    border-radius: 14px;
  }
  .month-modal-content img {
    max-width: 95vw;
    max-height: 75vh;
    border-radius: 14px;
  }
  .month-modal-nav {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .month-modal-nav.prev { left: 6px; }
  .month-modal-nav.next { right: 6px; }
}

/*================= hOur Activitiess ================= */





/*================= About us ================= */

/* =========================
   ABOUT SECTION CSS
========================= */

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.about-section{
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 40px 8%;
  background: #f8fbfc;
  flex-wrap: wrap;
}

/* LEFT SIDE */
.about-left{
  flex: 1;
  min-width: 320px;
  display: flex;
  justify-content: center;
}

/* 3D Image Container */
.single-image-box{
  width: 100%;
  max-width: 520px;
  height: auto;
  perspective: 1200px;
}

/* Image Style */
.about-img{
  width: 100%;
  height: auto;
  object-fit: contain; /* image cut nahi hogi */
  border-radius: 30px;
  
  /* 3D Effect */
  transform: rotateY(-6deg) rotateX(4deg);
  transition: 0.6s ease;
  
  /* Shadow */
  box-shadow:
    0 25px 45px rgba(0,0,0,0.18),
    0 10px 20px rgba(244,45,146,0.18);

  background: #fff;
}

/* Hover Animation */
.about-img:hover{
  transform: rotateY(0deg) rotateX(0deg) scale(1.03);
}

/* Responsive */
@media (max-width:768px){

  .single-image-box{
    max-width: 100%;
  }

  .about-img{
    border-radius: 20px;
  }
}


/*.about-left{
  flex: 1;
  min-width: 320px;
}

.slider{
  position: relative;
  width: 100%;
  height: 600px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.slide{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.1);
  transition: 1s ease;
}

.slide.active{
  opacity: 1;
  transform: scale(1);
}

/* RIGHT SIDE */
.about-right{
  flex: 1;
  min-width: 320px;
}

.about-right h2{
  font-size: 42px;
  color: #00a3da;
  margin-bottom: 25px;
  line-height: 1.2;
}

.about-right p{
  font-size: 15px;
  line-height: 1.9;
  color: #555;
  margin-bottom: 20px;
}

/* BOXES */
.about-boxes{
  display: flex;
  gap: 25px;
  margin-top: 35px;
  flex-wrap: wrap;
}



.about-box{
  flex: 1;
  min-width: 250px;
  background: white;
  padding: 30px;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: 0.4s;
  border-top: 5px solid #00a3da;

  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Blue Hover Background */
.about-box::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: -100%;
  width: 100%;
  height: 100%;
  background: #00a3da;
  transition: 0.5s ease;
  z-index: -1;
}

/* Hover Effect */
.about-box:hover::before{
  bottom: 0;
}

.about-box:hover{
  transform: translateY(-10px);
}

/* Text Color Change */
.about-box:hover h3,
.about-box:hover p{
  color: white;
}

.about-box h3{
  color: #00a3da;
  margin-bottom: 15px;
  font-size: 24px;
  transition: 0.4s;
}

.about-box p{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  transition: 0.4s;
}

/*.about-box{
  flex: 1;
  min-width: 250px;
  background: white;
  padding: 30px;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: 0.4s;
  border-top: 5px solid #00a3da;
}

.about-box:hover{
  transform: translateY(-10px);
}

.about-box h3{
  color: #00a3da;
  margin-bottom: 15px;
  font-size: 24px;
}

.about-box p{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

/* BUTTON */
.read-btn{
  display: inline-block;
  margin-top: 35px;
  padding: 14px 35px;
  background:#00a3da;
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  transition: 0.4s;
}

.read-btn:hover{
  background: #007a91;
  transform: scale(1.05);
}

/* RESPONSIVE */
@media(max-width: 992px){

  .about-section{
    flex-direction: column;
  }

  .slider{
    height: 450px;
  }

  .about-right h2{
    font-size: 34px;
  }

}


/*================= About us ================= */


/*================= impact stories ================= */

/* =========================================
   IMPACT STORIES SECTION
========================================= */
/* =========================================
   MODERN IMPACT STORIES SLIDER
========================================= */

.being-impact-slider{
  padding:100px 20px;
  background:#f4f9ff;
  font-family:Arial,sans-serif;
  overflow:hidden;
}

/* TITLE */
.being-impact-title{
  text-align:center;
  margin-bottom:50px;
}

.being-impact-title h2{
  font-size:52px;
  font-weight:900;
  color:#111;
  margin-bottom:10px;
}

.being-impact-title p{
  font-size:18px;
  color:#666;
}

/* SLIDER */
.being-slider-box{
  width:90%;
  max-width:1000px;
  height:450px;
  margin:auto;
  position:relative;
  overflow:hidden;
  border-radius:40px;

  box-shadow:
  0 30px 70px rgba(0,0,0,0.15);
}

/* SLIDE */
.being-slide{
  position:absolute;
  inset:0;
  display:block;
  text-decoration:none;

  opacity:0;
  visibility:hidden;

  transition:1s ease;
}

/* ACTIVE */
.being-slide.active{
  opacity:1;
  visibility:visible;
  z-index:2;
}

/* IMAGE */
.being-slide img{
  width:100%;
  height:100%;
  object-fit:cover;

  filter:brightness(80%);

  transform:scale(1.03);
}

/* OVERLAY */
.being-slide::after{
  content:"";
  position:absolute;
  inset:0;

  /* background:
  linear-gradient(
    90deg,
    rgba(255,255,255,0.15),
    rgba(0,0,0,0.20)
  ); */
}

/* GLASS BOX */
.being-text{
  position:absolute;
  left:70px;
  bottom:70px;

  z-index:5;

  width:420px;

  padding:40px;

  border-radius:30px;

  background:rgba(255,255,255,0.18);

  backdrop-filter:blur(14px);

  border:1px solid rgba(255,255,255,0.25);

  box-shadow:
  0 10px 40px rgba(0,0,0,0.12);
}

/* HEADING */
.being-text h3{
  font-size:38px;
  line-height:1.1;
  font-weight:900;

  color: #fff;

  margin-bottom:20px;

  text-shadow:
  0 5px 20px rgba(0,0,0,0.35);
}

/* TEXT */
.being-text p{
  font-size:15px;
  line-height:1.8;
  color:#00a3d4;

  text-shadow:
  0 2px 8px rgba(0,0,0,0.25);
}

/* DOTS */
.being-dots{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:35px;
}

/* DOT */
.being-dot{
  width:14px;
  height:14px;

  border-radius:50%;

  background:#cbd5e1;

  cursor:pointer;

  transition:.4s;
}

/* ACTIVE DOT */
.being-dot.active{
  width:42px;

  border-radius:20px;

  background:#00a3da;

  box-shadow:
  0 0 18px rgba(0,163,218,.5);
}

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

  .being-slider-box{
    height:450px;
  }

  .being-text{
    width:auto;
    left:20px;
    right:20px;
    bottom:20px;
    padding:25px;
  }

  .being-text h3{
    font-size:34px;
  }

  .being-text p{
    font-size:15px;
    line-height:1.7;
  }

}
/* SLIDE HOVER EFFECT */

.being-slide img{
  transition:1.2s ease;
}

.being-slide:hover img{
  transform:scale(1.08);
}

/* GLASS BOX HOVER */

.being-text{
  transition:.5s ease;
}

.being-slide:hover .being-text{
  transform:translateY(-8px);

  box-shadow:
  0 20px 50px rgba(0,0,0,0.18);
}


/*================= impact stories ================= */


/* =========================================
   CIRCLE MARQUEE CSS
========================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.logo-marquee-section{
  width:100%;
  padding: 20px 0;
  background:linear-gradient(135deg,#eefcff,#f8feff);
  display:flex;
  align-items:center;
  position:relative;
}

/* SIDE BLUR */

.logo-marquee-section::before,
.logo-marquee-section::after{
  content:'';
  position:absolute;
  width:180px;
  height:200%;
  top:0;
  z-index:5;
}

.logo-marquee-section::before{
  left:0;
  background:linear-gradient(to right,#eefcff,transparent);
}

.logo-marquee-section::after{
  right:0;
  background:linear-gradient(to left,#f8feff,transparent);
}

/* MARQUEE */

.marquee{
  width:100%;
  
  overflow-x:clip;
  position:relative;
}

.marquee-content{
  display:flex;
  align-items:center;
  gap:60px;
  width:max-content;
 animation:scroll 20s linear infinite;
}

/* BOX */

.circle-box{
  text-align:center;
  flex-shrink:0;
  
}

/* CIRCLE */

.circle{
  width:100px;
  height:100px;
  border-radius:50%;
  background:white;
  border:5px solid #00a3da;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
  
  box-shadow:
  0 15px 35px rgba(0,151,178,0.2),
  inset 0 0 20px rgba(0,151,178,0.08);
  transition:0.5s;
}

/* SHINE EFFECT */

.circle::before{
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  background:linear-gradient(
  135deg,
  transparent,
  rgba(255,255,255,0.6),
  transparent);
  top:-100%;
  left:-100%;
  transition:0.4s;
}

.circle:hover::before{
  top:100%;
  left:100%;
}

.circle:hover{
  transform: scale(1.12);
}

/* IMAGE */

.circle img{
  width:100px;
  height:100px;
  object-fit:contain;
}

/* TEXT */

.circle-box h2{
  margin-top:20px;
  font-size:20px;
  color:#00a3da;
  font-weight:700;
}

.circle-box p{
  margin-top:8px;
  font-size:12px;
  color:#555;
  font-weight:600;
  letter-spacing:0.5px;
}

/* CONTINUOUS ANIMATION */

@keyframes scroll{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}

/* RESPONSIVE */

@media(max-width:768px){

  .logo-marquee-section{
    height:50vh;
  }

  .circle{
    width:130px;
    height:130px;
  }

  .circle-box h2{
    font-size:28px;
  }

}







/* ============================================
   .eye-health-section
   ============================================ */



.eye-health-slide{
  width:100%;
  padding:70px;
  background:#f4f6f8;
  border-radius:35px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  overflow:hidden;
  position:relative;
  font-family:Arial,sans-serif;
  box-shadow:
  0 15px 40px rgba(0,0,0,0.08);
}

/* IMAGE */

.eye-img{
  flex:0.75;
  min-width:260px;
  max-width:380px;
  perspective:1000px;
}

.eye-img img{
  width:100%;
  height:auto;
  border-radius:30px;
  display:block;
}

.eye-img img:hover{
  transform:
  rotateY(-8deg)
  rotateX(5deg)
  scale(1.03);
}

/* CONTENT */

.eye-content{
  flex:1;
  min-width:320px;
}

.tag{
  display:inline-block;
  padding:10px 22px;
  background:#e3edf7;
  color:#0b4d78;
  border-radius:50px;
  font-size:50px;
  font-weight:600;
  margin-bottom:20px;
}

.eye-content h2{
  font-size:54px;
  line-height:1.1;
  margin-bottom:20px;
  color:#0c2942;
  font-weight:800;
}

.eye-content p{
  font-size:17px;
  line-height:1.8;
  color:#5d6b78;
  margin-bottom:35px;
}

/* STATS */

/* STATS */

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin-bottom:35px;
}

.stat-box{
  background:#fff;
  padding:18px;
  border-radius:20px;
  transition:0.4s ease;
  text-align:center;
  position:relative;
  overflow:hidden;

  box-shadow:
  0 10px 25px rgba(0,0,0,0.06);
}

/* Blue pop effect */
.stat-box::before{
  content:"";
  position:absolute;
  width:0;
  height:0;
  background:#00a3d4;
  border-radius:50%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  transition:0.5s ease;
  z-index:0;
}

.stat-box:hover::before{
  width:300px;
  height:300px;
}

/* Pop animation */
.stat-box:hover{
  transform:
  translateY(-6px)
  scale(1.06);

  box-shadow:
  0 20px 40px rgba(11,77,120,0.35);
}

/* Text above blue effect */
.stat-box h3,
.stat-box span{
  position:relative;
  z-index:2;
  transition:0.4s;
}

.stat-box h3{
  font-size:28px;
  margin-bottom:6px;
  color:#0b4d78;
}

.stat-box span{
  color:#607080;
  font-size:13px;
}

/* Text turns white on hover */
.stat-box:hover h3,
.stat-box:hover span{
  color:#fff;
}

/* Responsive */
@media(max-width:900px){
  .stats{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:500px){
  .stats{
    grid-template-columns:1fr;
  }
}

/* BUTTON */

  .donate-btn{
    display:inline-block;
    padding:15px 36px;
    background:#00a3da;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    font-weight:700;
    transition:0.4s;
    box-shadow:
    0 10px 25px rgba(11,77,120,0.25);
  }

  .donate-btn:hover{
    background: var(--pink-dark); transform: translateY(-1px); 
  }

/* RESPONSIVE */

@media(max-width:991px){

  .eye-health-slide{
    flex-direction:column;
    padding:40px 25px;
  }

  .eye-content h2{
    font-size:40px;
  }
}

@media(max-width:600px){

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

  .eye-content h2{
    font-size:32px;
  }

  .eye-content p{
    font-size:15px;
  }
}




/* ============================================
   .eye-health-section
   ============================================ */


/* ============================================
   METRO STATION SECTION
   ============================================ */

.metro-section {
  width: 100%;
  padding: 80px 6%;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(0,163,218,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 100% 50%, rgba(0,163,218,0.04) 0%, transparent 60%),
    linear-gradient(135deg, #f8fbfc 0%, #eef6fa 100%);
  position: relative;
  overflow: hidden;
}

.metro-section::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,163,218,0.07) 0%, transparent 70%);
  animation: metroFloatGlow 8s ease-in-out infinite alternate;
}

.metro-section::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,163,218,0.05) 0%, transparent 70%);
  animation: metroFloatGlow 10s ease-in-out infinite alternate-reverse;
}

@keyframes metroFloatGlow {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -20px) scale(1.15); }
}

.metro-box {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* LEFT IMAGES */
.metro-images {
  flex: 1.3;
  min-width: 300px;
  max-width: 650px;
  position: relative;
}

/* BIG HERO IMAGE */
.metro-hero-img {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  cursor: pointer;
}

.metro-hero-img:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0,0,0,0.2), 0 0 30px rgba(0,163,218,0.15);
}

.metro-hero-img img {
  width: 100%;
  height: 487px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.metro-hero-img:hover img {
  transform: scale(1.05);
}

.metro-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,35,75,0.85) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  z-index: 2;
}

.metro-hero-overlay h3 {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.metro-hero-overlay p {
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.metro-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  perspective: 1200px;
}

.metro-img-box {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.96);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  transform-style: preserve-3d;
  position: relative;
}

.metro-img-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: rgba(255,255,255,0.25);
  transform: skewX(-25deg);
  transition: 0.7s;
  z-index: 2;
}

.metro-img-box:hover::before {
  left: 130%;
}

.metro-img-box:hover {
  transform: rotateX(6deg) rotateY(-6deg) translateY(-10px) scale(1.03);
  box-shadow: 0 20px 40px rgba(0,0,0,0.18), 0 0 25px rgba(0,163,218,0.25);
}

.metro-img-wrapper {
  position: relative;
  overflow: hidden;
}

.metro-img-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,163,218,0.25) 0%, transparent 50%);
  z-index: 1;
  pointer-events: none;
}

.metro-img-box img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.metro-img-box:hover img {
  transform: scale(1.08);
}

.metro-img-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 14px;
  background: linear-gradient(0deg, rgba(0,59,115,0.85) 0%, transparent 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  z-index: 3;
  text-align: center;
  letter-spacing: 0.3px;
  backdrop-filter: blur(2px);
}

/* IMAGE FOOTER */
.metro-img-footer {
  padding: 20px;
  background: #fff;
  position: relative;
  z-index: 3;
}

.metro-price {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #003b73;
  margin-bottom: 14px;
}

.metro-donate-btn {
  display: block;
  text-align: center;
  background: #00a3da;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 10px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.metro-donate-btn:hover {
  background: #007d94;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,163,218,0.35);
  color: #fff;
}

/* RIGHT CONTENT */
.metro-content {
  flex: 1;
  min-width: 320px;
}

.metro-content h2 {
  font-size: 38px;
  font-weight: 800;
  color: #003b73;
  line-height: 1.2;
  margin-bottom: 20px;
  position: relative;
}

.metro-content h2::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, #00a3da, #00c6ff);
  border-radius: 4px;
  animation: metroUnderlineGrow 1.2s ease forwards;
}

@keyframes metroUnderlineGrow {
  0% { width: 0; }
  100% { width: 80px; }
}

.metro-line {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #00a3da, #00c6ff);
  border-radius: 4px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}

.metro-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: metroShimmer 2.5s ease-in-out infinite;
}

@keyframes metroShimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

.metro-content p {
  font-size: 16px;
  line-height: 1.9;
  color: #4a5a6a;
  margin-bottom: 20px;
  padding-left: 20px;
  border-left: 3px solid rgba(0,163,218,0.2);
  transition: 0.4s ease;
}

.metro-content p:hover {
  border-left-color: #00a3da;
  padding-left: 25px;
}

.metro-content p strong {
  color: #00a3da;
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.metro-content p strong::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #00a3da, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.metro-content p:hover strong::after {
  transform: scaleX(1);
}

/* RESPONSIVE */
@media(max-width: 1024px) {
  .metro-box {
    gap: 40px;
  }
  .metro-content h2 {
    font-size: 32px;
  }
}

@media(max-width: 860px) {
  .metro-section {
    padding: 50px 5%;
  }
  .metro-box {
    flex-direction: column;
    gap: 35px;
  }
  .metro-hero-img img {
    height: 240px;
  }
  .metro-hero-overlay h3 {
    font-size: 17px;
  }
  .metro-hero-overlay p {
    font-size: 13px;
  }
  .metro-image-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .metro-img-box {
    transform: none !important;
  }
  .metro-img-box:hover {
    transform: scale(1.03) !important;
  }
  .metro-img-box img {
    height: 180px;
  }
  .metro-content h2 {
    font-size: 28px;
  }
  .metro-content h2::after {
    width: 60px;
  }
  .metro-content p {
    padding-left: 15px;
  }
}

@media(max-width: 500px) {
  .metro-hero-img img {
    height: 180px;
  }
  .metro-hero-overlay {
    padding: 16px;
  }
  .metro-hero-overlay h3 {
    font-size: 14px;
  }
  .metro-hero-overlay p {
    font-size: 11px;
  }
  .metro-section {
    padding: 40px 4%;
  }
  .metro-image-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .metro-img-box img {
    height: 140px;
  }
  .metro-img-label {
    font-size: 11px;
    padding: 8px 10px;
  }
  .metro-content h2 {
    font-size: 24px;
  }
  .metro-content p {
    font-size: 14px;
    padding-left: 12px;
  }
  .metro-img-footer {
    padding: 10px 12px;
  }
  .metro-price {
    font-size: 14px;
  }
  .metro-donate-btn {
    font-size: 11px;
    padding: 6px 12px;
  }
}

/* =========================
   OUR PROMISE SECTION
========================= */

.promise-section{
    width:100%;
    padding:20px 0;

    background:
    radial-gradient(circle at top left,#dff6ff 0%,transparent 35%),
    radial-gradient(circle at bottom right,#c7ecff 0%,transparent 35%),
    linear-gradient(135deg,#f4f6f8,#eef8ff);
}

/* FULL WIDTH SLIDE */
.promise-box{
    width:100%;
    border-radius:0;

    background:#ffffffee;

    display:flex;
    align-items:center;
    gap:35px;

    /* HEIGHT KAM */
    padding:8px 5%;

    box-shadow:
    0 5px 20px rgba(0,0,0,0.05);
}

/* ROUND LOGO */
.promise-logo{
    min-width:130px;
    width:130px;
    height:130px;

    border-radius:50%;
    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    border:7px solid #e8f8ff;

    box-shadow:
    0 8px 25px rgba(0,163,218,0.18);

    transition:0.4s ease;
    cursor:pointer;
}

.promise-logo:hover{
    transform:translateY(-10px) scale(1.08) rotate(4deg);

    box-shadow:
    0 15px 35px rgba(0,163,218,0.35);
}

/* LOGO IMAGE */
.promise-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

/* CONTENT */
.promise-content{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* TITLE */
.promise-content h2{
    font-size:34px;
    font-weight:800;
    color:#003b73;

    margin-bottom:8px;
    line-height:1.1;

    text-align:left;
}

/* BIG LINE */
.promise-line{
    width:100%;
    max-width:900px;

    height:5px;

    background:linear-gradient(to right,#00a3da,#315270);

    border-radius:20px;

    margin:0 0 12px 0;
}

/* TEXT */
.promise-content p{
    font-size:15px;
    line-height:1.7;
    color:#555;

    margin-bottom:6px;
    max-width:1000px;

    text-align:left;
}

/* MOBILE */
@media(max-width:900px){

    .promise-content{
        align-items:center;
    }

    .promise-content h2{
        text-align:center;
    }

    .promise-line{
        margin:auto auto 12px;
        width:220px;
    }

    .promise-content p{
        text-align:center;
    }

}










/* ============================================
   donor-testimonial-section
   ============================================ */




.donor-testimonial-section{
    width:100%;
    padding:80px 8%;
    background:#f4f6f8;
    overflow:hidden;
}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:42px;
    color:#0b1c39;
    margin-bottom:10px;
    font-weight:700;
}

.section-title p{
    color:#666;
    font-size:17px;
}

.testimonial-wrapper{
    width:100%;
    overflow:hidden;
}

.testimonial-track{
    display:flex;
    gap:30px;
    width:max-content;
    animation: scrollTestimonials 40s linear infinite;
}

@keyframes scrollTestimonials {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.testimonial-track:hover {
  animation-play-state: paused;
}

.testimonial-card{
    width:260px;
    background:#fff;
    padding:22px 20px;
    border-radius:18px;
    position:relative;
    transition:0.4s;
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
    overflow:hidden;
}

/* Blue water fill from bottom */
.testimonial-card::before{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:0%;
    background:#00a3da;
    transition:0.4s ease;
    z-index:1;
    border-radius:18px;
}

.testimonial-card:hover::before{
    height:100%;
}

.testimonial-card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

/* Keep content above blue layer */
.testimonial-card > *{
    position:relative;
    z-index:2;
}

.quote{
    font-size:36px;
    color:#00a3da;
    line-height:1;
    margin-bottom:10px;
    transition:0.3s ease;
}

.testimonial-card p{
    font-size:14px;
    color:#555;
    line-height:1.6;
    margin-bottom:18px;
    transition:0.3s ease;
}

.donor-info{
    border-top:1px solid #e5e5e5;
    padding-top:12px;
    transition:0.3s ease;
}

.donor-info h4{
    font-size:16px;
    color:#0b1c39;
    margin-bottom:3px;
    transition:0.3s ease;
}

.donor-info span{
    font-size:12px;
    color:#00a3da;
    font-weight:600;
    transition:0.3s ease;
}

/* White text on hover */
.testimonial-card:hover .quote,
.testimonial-card:hover p,
.testimonial-card:hover .donor-info,
.testimonial-card:hover .donor-info h4,
.testimonial-card:hover .donor-info span{
    color:#fff !important;
    border-color:rgba(255,255,255,0.3);
}

@media(max-width:992px){
    .testimonial-card{
        width:220px;
    }
}

/* ============================================
   FEATURED SECTION
   ============================================ */
.featured-section {
  padding: 72px 20px;
  background: white;
  overflow: hidden;
}

/* SLIDER BOX */
.featured-slider-box {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* SLIDE - shows 2 cards side by side */
.featured-slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  display: none;
}

.featured-slide.active {
  display: grid;
}

/* CARD */
.featured-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 400px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}

/* IMAGE */
.feat-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.5s ease;
}

.featured-card:hover .feat-img {
  transform: scale(1.06);
}

/* OVERLAY */
.feat-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 28px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 60%);
  color: #fff;
  z-index: 2;
}

.feat-tag {
  display: inline-block;
  background: #00a3da;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.feat-overlay h3 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
  font-family: 'Montserrat', sans-serif;
}

.feat-overlay p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin-bottom: 16px;
}

.feat-btn {
  display: inline-block;
  background: #00a3da;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.feat-btn:hover {
  background: #007d94;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,163,218,0.35);
  color: #fff;
}

/* DOTS */
.featured-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 35px;
}

.featured-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  transition: 0.4s;
}

.featured-dot.active {
  width: 42px;
  border-radius: 20px;
  background: #00a3da;
  box-shadow: 0 0 18px rgba(0,163,218,0.5);
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
  .featured-slide {
    grid-template-columns: 1fr;
  }
  .featured-card {
    height: 320px;
  }
}
.feat-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
}
.small-overlay { padding: 20px; }

.feat-tag {
  background: var(--pink);
  color: white;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 3px;
  align-self: flex-start;
  margin-bottom: 10px;
}
.feat-overlay h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: white;
  margin-bottom: 8px;
}
.small-overlay h3 { font-size: 16px; }
.feat-overlay p {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 16px;
  line-height: 1.5;
}
.feat-btn {
  display: inline-block;
  background: var(--pink);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 22px;
  border-radius: 5px;
  letter-spacing: 0.5px;
  align-self: flex-start;
  transition: background 0.2s;
}
.feat-btn:hover { background: var(--pink-dark); }

/* ============================================
   NEWSLETTER
   ============================================ */
.newsletter-section {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%);
  padding: 60px 20px;
}
.newsletter-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.nl-text h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: white;
  margin-bottom: 8px;
}
.nl-text p { color: rgba(255,255,255,0.85); font-size: 15px; }
.nl-text .accent { color: var(--navy); }

.nl-form {
  display: flex;
  gap: 0;
  flex: 1;
  min-width: 300px;
  max-width: 440px;
}
.nl-input {
  flex: 1;
  padding: 14px 18px;
  border-radius: 6px 0 0 6px;
  font-size: 14px;
  border: 2px solid transparent;
  background: white;
  color: var(--text);
  transition: border-color 0.2s;
}
.nl-input:focus { border-color: var(--navy); }
.nl-input::placeholder { color: #aaa; }
.nl-btn {
  background: var(--navy);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 13px;
  padding: 14px 24px;
  border-radius: 0 6px 6px 0;
  letter-spacing: 0.5px;
  transition: background 0.2s;
  white-space: nowrap;
}
.nl-btn:hover { background: var(--navy-dark); }

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--navy-dark);
  color: rgba(255,255,255,0.8);
  padding: 64px 20px 0;
}
.footer-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.footer-logo-circle { font-size: 12px; }
.footer-logo span {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: white;
  letter-spacing: 0.5px;
}
.footer-logo-img{
  width: 70px;
}
.footer-desc {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  margin-bottom: 20px;
}
.social-icons { display: flex; gap: 10px; }
.social-icons a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  transition: background 0.2s, transform 0.2s;
}
.social-icons a:hover { background: var(--pink); transform: translateY(-2px); }
.footer-col h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: white;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--pink); }
.footer-col p {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.footer-col p i { color: var(--pink); margin-top: 2px; flex-shrink: 0; }
.reg-badge {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
  margin-top: 8px;
  border: 1px solid rgba(255,255,255,0.2);
}

.footer-bottom {
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.45); }
.footer-links { display: flex; gap: 20px; }
.footer-links a {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  transition: color 0.2s;
}
.footer-links a:hover { color: rgba(255,255,255,0.8); }
.brochure-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #00a3da;
  color: #fff;
  padding: 10px 18px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.brochure-btn:hover {
  background: #0077a3;
  transform: translateY(-2px);
}

.brochure-btn i {
  font-size: 16px;
}
/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .phone-num { display: none; }
  .yt-avatar { display: none; }
  .nav-right .donate-btn { display: none; }
  .mob-donate-btn { display: inline-block; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-col:first-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .slide-title { font-size: 40px; }
  .slide-subtitle { font-size: 18px; }
  .hero-slider { height: 460px; }
  .slide-content { padding: 0 40px; }
  .years-badge { display: none; }
  .causes-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-grid { grid-template-columns: 1fr; }
  .featured-card.large { height: 340px; }
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 56px;
  height: 56px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 9999;
  transition: transform 0.3s ease;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  color: #fff;
}

@media (max-width: 600px) {
  .top-bar { display: none; }
  .navbar-inner { height: 60px; }
  .logo-text { font-size: 11px; }
  .nav-quick { display: none; }
  .hero-slider { height: 380px; }
  .slide-title { font-size: 30px; }
  .slide-subtitle { font-size: 15px; }
  .slide-content { padding: 0 24px; }
  .qd-inner { gap: 6px; }
  .preset-amt { display: none; }
  .payment-icons { display: none; }
  .causes-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-num { font-size: 32px; }
  .newsletter-inner { flex-direction: column; }
  .nl-form { min-width: unset; width: 100%; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}