/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;overflow-x:hidden;}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#14181f;
  background:
    radial-gradient(1200px 600px at 15% 20%, rgba(255,140,0,.10), transparent 55%),
    radial-gradient(900px 500px at 80% 25%, rgba(140,90,255,.14), transparent 60%),
    radial-gradient(700px 450px at 50% 85%, rgba(0,180,255,.10), transparent 60%),
    #f6f7fb;
}

/* ===== NAVBAR (iOS PREMIUM LIQUID GLASS) ===== */
.nav{
  width:100%;
  position: relative;   /* sticky remove */
  z-index:50;
  padding:14px 0;

  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.nav-inner{
  width:100%;
  max-width: calc(100% - 140px);
  margin: 0 auto;
  padding:14px 22px;

  border-radius: 999px;

  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.35);

  box-shadow:
    0 25px 70px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.55);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  position: relative;
  overflow: hidden;
}

.nav-inner::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-20%;
  width:140%;
  height:140%;
  background: radial-gradient(circle at 30% 20%,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0) 60%
  );
  pointer-events:none;
  opacity:.55;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  position: relative;
  z-index: 2;
}
.brand-icon{
  width:18px;
  height:18px;
  border-radius:6px;
  background: linear-gradient(135deg, #ff6a00, #ff2d55);
}
.brand-name{
  font-weight:700;
  font-size:14px;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  position: relative;
  z-index: 2;
}
.nav-link{
  text-decoration:none;
  color:#222a35;
  font-size:13px;
  padding:10px 14px;
  border-radius:999px;
  transition:.2s;
  border: 1px solid transparent;
}
.nav-link:hover{
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.22);
}
.nav-link.active{
  background: rgba(120,90,255,.18);
  font-weight:700;
}
.nav-link.donate{
  background: linear-gradient(135deg, #ff7a00, #ff3b30);
  color:#fff;
  font-weight:700;
  border: 0;
}
.btn-login{
  border:0;
  padding:11px 18px;
  border-radius:999px;
  background:#0f172a;
  color:#fff;
  font-weight:700;
  cursor:pointer;
  position: relative;
  z-index: 2;
}

/* ===== HERO ===== */
.hero{
  width:100%;
  min-height:calc(100vh - 90px);
  display:flex;
  align-items:center;
}
.hero-inner{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0 70px;
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items:center;
  gap:40px;
}

/* LEFT TEXT */
.hero-title{
  font-size:64px;
  line-height:1.02;
  letter-spacing:-.03em;
}
.hero-sub{
  margin-top:14px;
  font-size:14px;
  opacity:.75;
}
.hero-actions{
  margin-top:18px;
  display:flex;
  gap:12px;
  align-items:center;
}
.btn-primary{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  background: linear-gradient(135deg, #ff7a00, #ff3b30);
  color:#fff;
  font-weight:800;
}
.btn-secondary{
  text-decoration:none;
  padding:12px 18px;
  border-radius:999px;
  background: rgba(255,255,255,.65);
  border:1px solid rgba(20,24,31,.10);
  color:#111827;
  font-weight:700;
}

/* ===== CHAIRMAN CARD (PREMIUM LIQUID GLASS) ===== */
.chairman-card{
  margin-top:22px;
  width:420px;
  min-height:140px;
  padding:22px;
  border-radius:26px;

  background: rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.35);

  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);

  box-shadow:
    0 35px 100px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.55);

  display:flex;
  gap:18px;
  align-items:flex-start;

  position: relative;
  overflow:hidden;
}

.chairman-card::before{
  content:"";
  position:absolute;
  top:-50%;
  left:-30%;
  width:160%;
  height:160%;
  background: radial-gradient(circle at 30% 20%,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0) 60%
  );
  pointer-events:none;
  opacity:.55;
}

.chairman-avatar {
  width: 110px !important;
  height: 110px !important;
  min-width: 110px !important;
  min-height: 110px !important;
  border-radius: 50% !important; /* Keeps the image round */
  overflow: hidden; /* Prevents any overflow outside the circle */
  object-fit: cover !important; /* Ensures the image fills the circle */
  object-position: top center; /* Adjust this to move the image down */
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12) !important; /* Optional: adds shadow */
  position: relative; /* Keeps the image inside the circle */
  z-index: 2; /* Ensures it's above other elements */
}

.chairman-text{
  position: relative;
  z-index: 2;
}

.chairman-text strong{display:block;font-size:16px;}
.chairman-text span{display:block;font-size:13px;opacity:.65;margin-top:4px;}
.chairman-info{
  display:inline-flex;
  margin-top:10px;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  color:#111827;
}

/* ===== RIGHT SIDE ===== */
.hero-right{
  position:relative;
  min-height:620px;
  overflow:visible; /* statue/chart cut nahi hoga */
}

/* STATUE (CENTER-LEFT FIX) */
.statue-wrap{
  position:absolute;
  right:200px;   /* statue left shift */
  top:-40px;
  width:820px;
  height:auto;
  pointer-events:none;
  z-index:1;

  overflow:hidden; /* fog statue ke andar hi rahe */
}
.hero-statue{
  width:820px;
  max-width:none;
  height:auto;
  opacity:1;
  display:block;
  filter: drop-shadow(0 35px 80px rgba(0,0,0,0.18));
}

/* ONLY ONE FOG (BOTTOM FADE PERFECT) */
.statue-wrap::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-25px;
  width:100%;
  height:55%;
  pointer-events:none;
  z-index:2;

  background: linear-gradient(to top,
    rgba(246,247,251,1) 0%,
    rgba(246,247,251,0.85) 35%,
    rgba(246,247,251,0.35) 70%,
    rgba(246,247,251,0) 100%
  );
}

/* ===== 28K LIQUID GLASS (TOP RIGHT FIX) ===== */
.members-float{
  position:absolute;
  top:30px;
  right:20px;
  width:300px;
  padding:18px;
  border-radius:26px;

  background: rgba(255,255,255,0.22);
  border:1px solid rgba(255,255,255,0.40);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);

  box-shadow: 0 35px 100px rgba(0,0,0,0.16);
  z-index:12;

  text-decoration:none;
  color:#111827;
}
.members-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.members-count{
  font-size:28px;
  font-weight:900;
  letter-spacing:-.02em;
}
.members-avatars{
  display:flex;
  align-items:center;
  gap:6px;
}
.members-avatars .av{
  width:18px;
  height:18px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,140,0,.9), rgba(120,90,255,.65));
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.members-sub{
  margin-top:8px;
  font-size:12px;
  opacity:.75;
  line-height:1.25;
}
.members-arrow{
  margin-top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;

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

  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.35);

  font-size: 20px;        /* ✅ arrow big */
  font-weight: 900;
  color: #111827;

  box-shadow: 0 14px 35px rgba(0,0,0,0.12);
}
.members-float:hover .members-arrow{
  transform: translateY(-2px) rotate(-10deg);
  transition: 0.25s ease;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 18px 45px rgba(0,0,0,0.16);
}

/* ===== CASE CLOSURE ===== */
.chart-float{
  position:absolute;
  right:20px;
  top:360px;
  width:420px;
  padding:16px;
  border-radius:26px;

  background: rgba(255,255,255,0.22);
  border:1px solid rgba(255,255,255,0.40);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);

  box-shadow: 0 35px 100px rgba(0,0,0,0.16);
  z-index:10;
}
.chart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:800;
  font-size:13px;
}
.chip{
  padding:6px 12px;
  border-radius:999px;
  background: rgba(20,24,31,.06);
  font-size:12px;
  font-weight:800;
}
.bars{
  height:120px;
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:14px 8px 6px;
}
.bar{
  width:30px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(120,90,255,.35), rgba(120,90,255,.12));
}
.months{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  opacity:.65;
  padding:0 8px;
}

/* FOOTER */
.footer{
  text-align:center;
  padding:18px 0 26px;
  opacity:.75;
  font-size:12px;
}

/* RESPONSIVE */
@media (max-width: 1000px){
  .hero-inner{grid-template-columns:1fr;padding:0 16px;}
  .nav-inner{max-width: calc(100% - 32px); padding:14px 16px;}

  .statue-wrap{
    right:40px;
    width:620px;
  }
  .hero-statue{width:620px;}

  .members-float{right:12px;top:12px;width:280px;}
  .chart-float{right:12px;top:360px;width:320px;}
  .chairman-card{width:100%;}
}
/* ===== FOOTER FIX (ALWAYS VISIBLE) ===== */
.hero{
  min-height: 100vh !important;   /* full screen lock remove */
  padding-bottom: 80px !important; /* footer ke liye space */
}

.footer{
  position: relative !important;
  z-index: 2 !important;   /* fog/statue ke upar */
  margin-top: 40px !important;
  padding: 18px 0 26px !important;
  text-align: center !important;
  font-size: 12px !important;
  opacity: 0.85 !important;
  color: #111827 !important;
}

/* Fog footer ko hide na kare */
.hero-right::after{
  z-index: 1 !important;
}
/* ================================
   IOS PREMIUM LIQUID GLASS NAVBAR
================================ */

.nav{
  width: 100% !important;
  position: relative !important;  /* sticky nahi */
  z-index: 999 !important;
  padding: 14px 0 !important;
}

.nav-inner{
  width: 100% !important;
  max-width: calc(100% - 140px) !important;
  margin: 0 auto !important;
  padding: 14px 22px !important;

  border-radius: 999px !important;
  background: rgba(255,255,255,0.22) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;

  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;

  box-shadow: 0 25px 80px rgba(0,0,0,0.14),
              inset 0 1px 0 rgba(255,255,255,0.60) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

/* IMPORTANT: tumhare class "nav-link" hi hai */
.nav-link{
  text-decoration: none !important;
  font-weight: 700 !important;
  color: rgba(15,23,42,0.88) !important;

  padding: 10px 14px !important;
  border-radius: 999px !important;
  transition: 0.2s !important;
}

.nav-link:hover{
  background: rgba(255,255,255,0.28) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
}

.nav-link.active{
  background: rgba(120,90,255,0.20) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  font-weight: 900 !important;
}

/* donate button */
.nav-link.donate{
  background: linear-gradient(135deg, #ff7a00, #ff3b30) !important;
  color: #fff !important;
  font-weight: 900 !important;
}

/* login button */
.btn-login{
  border-radius: 999px !important;
  background: rgba(15,23,42,0.92) !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* Mobile */
@media (max-width: 1000px){
  .nav-inner{
    max-width: calc(100% - 32px) !important;
    padding: 12px 14px !important;
  }
}
/* ===================== CHAIRMAN PAGE (PREMIUM LIQUID GLASS) ===================== */

.chairman-page{
  max-width: 1100px;
  margin: 0 auto;
  padding: 120px 18px 70px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* reusable glass card */
.glass-card{
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  box-shadow:
    0 35px 100px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.55);
  position: relative;
  overflow: hidden;
}

.glass-card::before{
  content:"";
  position:absolute;
  top:-50%;
  left:-30%;
  width:160%;
  height:160%;
  background: radial-gradient(circle at 30% 20%,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0) 60%
  );
  pointer-events:none;
  opacity:.55;
}

/* HERO */
.chairman-hero{
  border-radius: 28px;
  padding: 22px;
  display: flex;
  gap: 22px;
  align-items: center;
}

.chairman-photo{
  width: 280px;
  height: 280px;
  border-radius: 26px;
  overflow: hidden;   /* ✅ important */
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 20px 70px rgba(0,0,0,0.14);
}

.chairman-photo img{
  width: 100%;
  height: 100%;
  border-radius: 26px;  /* ✅ same radius */
  display: block;       /* ✅ gap remove */
  object-fit: cover;    /* ✅ full fill */
  object-position: center 15%;
}

.chairman-hero-text{
  flex: 1;
  position: relative;
  z-index: 2;
}

.chairman-topline{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.75;
}

.chairman-name{
  margin: 6px 0 8px;
  font-size: 42px;
  letter-spacing: -0.02em;
  color: #111827;
}

.chairman-role{
  font-size: 14px;
  font-weight: 800;
  opacity: 0.78;
}

.chairman-role .dot{
  margin: 0 8px;
  opacity: 0.55;
}

.chairman-desc{
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.85;
  opacity: 0.90;
  max-width: 720px;
}

/* Buttons (Glass) */
.chairman-actions{
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.glass-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 999px;

  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.35);
  color: #111827;

  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);

  box-shadow:
    0 18px 50px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.55);

  transition: 0.2s;
}

.glass-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.30);
}

.glass-btn-primary{
  background: linear-gradient(135deg, rgba(255,122,0,0.95), rgba(255,59,48,0.95));
  color: #fff;
  border: 0;
}

/* Sections */
.chairman-section{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.section-title h2{
  margin: 0;
  font-size: 22px;
  color: #111827;
}

.section-title p{
  margin: 6px 0 0;
  font-size: 13px;
  opacity: 0.75;
}

/* Grid cards */
.chairman-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.chairman-box{
  border-radius: 22px;
  padding: 18px;
  z-index: 2;
}

.chairman-box h3{
  margin: 0 0 8px;
  font-size: 16px;
  color: #111827;
}

.chairman-box p{
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  opacity: 0.88;
}

/* List */
.chairman-list{
  border-radius: 22px;
  padding: 18px 20px;
  z-index: 2;
}

.chairman-list ul{
  margin: 0;
  padding-left: 18px;
}

.chairman-list li{
  margin: 10px 0;
  font-size: 13px;
  opacity: 0.90;
}

/* Quote */
.chairman-quote{
  border-radius: 22px;
  padding: 18px 20px;
  z-index: 2;
}

.quote-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  font-weight: 800;
  opacity: 0.88;
}

.quote-name{
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 900;
  opacity: 0.7;
}

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

@media (max-width: 700px){
  .chairman-hero{
    flex-direction: column;
    text-align: center;
  }

  .chairman-photo{
    width: 240px;
    height: 240px;
  }

  .chairman-name{
    font-size: 34px;
  }
}
/* ===== INFO BUTTON (Contact Us style) ===== */
.info-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;

  padding:12px 18px !important;
  border-radius:999px !important;

  background: linear-gradient(135deg, #ff7a00, #ff3b30) !important;
  color:#fff !important;

  font-weight:900 !important;
  text-decoration:none !important;

  box-shadow: 0 18px 40px rgba(255, 59, 48, 0.25) !important;
  transition: 0.2s ease !important;
}

.info-btn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 55px rgba(255, 59, 48, 0.35) !important;
}
/* ===================== ABOUT PAGE (PREMIUM LIQUID GLASS) ===================== */
.about-page{
  max-width: 1200px;
  margin: 0 auto;
  padding: 110px 18px 70px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.glass{
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  box-shadow: 0 35px 100px rgba(0,0,0,0.12),
              inset 0 1px 0 rgba(255,255,255,0.55);
  position: relative;
  overflow: hidden;
}

.glass::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-25%;
  width:160%;
  height:160%;
  background: radial-gradient(circle at 30% 20%,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0) 60%
  );
  opacity:.55;
  pointer-events:none;
}

.about-hero{
  border-radius: 28px;
  padding: 22px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: start;
}

.about-topline{
  margin: 0;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.75;
}

.about-title{
  margin: 10px 0 8px;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.about-subtitle{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  opacity: 0.75;
}

.about-desc{
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  opacity: 0.9;
  max-width: 720px;
}

.about-actions{
  margin-top: 14px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.about-hero-right{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-float-card{
  border-radius: 22px;
  padding: 16px;
}

.about-float-title{
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 10px;
}

.about-float-text{
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  opacity: 0.85;
}

.about-float-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill{
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.40);
}

.about-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.about-box{
  border-radius: 22px;
  padding: 18px;
}

.about-box h2{
  margin: 0 0 8px;
  font-size: 18px;
}

.about-box p{
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  opacity: 0.85;
}

.about-section{
  border-radius: 22px;
  padding: 18px;
}

.section-head h2{
  margin: 0;
  font-size: 22px;
}

.section-head p{
  margin: 6px 0 0;
  font-size: 13px;
  opacity: 0.75;
}

.about-list{
  margin-top: 10px;
}

.about-list ul{
  margin: 0;
  padding-left: 18px;
}

.about-list li{
  margin: 10px 0;
  font-size: 13px;
  opacity: 0.88;
}

.reg-wrap{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.reg-item{
  border-radius: 18px;
  padding: 14px 14px;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}

.reg-title{
  display: block;
  font-weight: 900;
  font-size: 13px;
}

.reg-code{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.78;
}

.reg-note{
  margin-top: 12px;
  border-radius: 18px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.7;
}

.about-quote{
  border-radius: 22px;
  padding: 18px 20px;
}

.quote-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  font-weight: 800;
  opacity: 0.88;
}

.quote-name{
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 900;
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 950px){
  .about-hero{
    grid-template-columns: 1fr;
  }
  .about-grid{
    grid-template-columns: 1fr;
  }
  .reg-wrap{
    grid-template-columns: 1fr;
  }
}
/* ===== SERVICES PAGE ===== */
.page{
  max-width: 1100px;
  margin: 0 auto;
  padding: 120px 18px 70px;
}

.glass{
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow: 0 30px 90px rgba(0,0,0,0.12),
              inset 0 1px 0 rgba(255,255,255,0.55);
}

.page-head{
  padding: 22px;
  border-radius: 28px;
}

.page-head h1{
  font-size: 40px;
  margin: 0;
}

.page-head p{
  margin-top: 10px;
  opacity: 0.8;
  line-height: 1.6;
}

.page-stats{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill{
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.30);
  border: 1px solid rgba(255,255,255,0.40);
  font-size: 12px;
  font-weight: 800;
}

/* grid */
.services-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.service-card{
  border-radius: 22px;
  padding: 18px;
  position: relative;
}

.service-title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.service-highlight{
  margin-top: 10px;
  opacity: 0.85;
  line-height: 1.6;
  font-size: 13px;
  max-width: 90%;
}

/* Info button (Contact Us style) */
.mini-info-btn{
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #ff7a00, #ff3b30);
  box-shadow: 0 18px 45px rgba(0,0,0,0.16);
}

/* Detail page */
.service-detail-box{
  border-radius: 28px;
  padding: 22px;
}

.service-detail-box h1{
  margin: 0;
  font-size: 34px;
}

.service-detail-box p{
  margin-top: 10px;
  opacity: 0.8;
  line-height: 1.7;
}

.service-explain{
  margin-top: 14px;
  border-radius: 22px;
  padding: 18px;
}

.service-explain h3{
  margin: 0 0 10px;
}

.service-explain ul{
  margin: 10px 0 0;
  padding-left: 18px;
}

/* responsive */
@media (max-width: 900px){
  .services-grid{
    grid-template-columns: 1fr;
  }
}
/* ===== Premium Learn More Liquid Glass Style ===== */

.premium-panel{
  margin-top: 24px;
  padding: 22px 18px;
  border-radius: 24px;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.40);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow: 0 30px 90px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.55);
}

.panel-title{
  font-size: 36px;
  font-weight: 900;
  margin: 0;
}

.panel-sub{
  font-size: 16px;
  opacity: 0.85;
  line-height: 1.7;
  margin-top: 8px;
}

.panel-subtitle{
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 10px;
}

.info-list{
  padding-left: 18px;
  line-height: 1.8;
  margin: 0;
}

.quote-card.inner-panel{
  border-radius: 22px;
  padding: 18px;
  margin-top: 16px;
}

.quote-head{
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.quote-img{
  width: 70px;
  height: 70px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.quote-card h3{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.quote-small{
  margin: 3px 0 0;
  font-size: 13px;
  opacity: 0.75;
}

.quote{
  font-style: italic;
  opacity: 0.88;
  margin: 6px 0;
  line-height: 1.6;
}

.meaning{
  margin-top: 10px;
  opacity: 0.92;
}

.cta-section .cta-buttons{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

@media (max-width: 800px){
  .cta-section .cta-buttons{
    flex-direction: column;
  }
}
/* ==========================
   Google Translate (Small + Orange globe + Arrow close)
========================== */

/* Hide top google bar */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame {
  display: none !important;
}
body { top: 0px !important; }

/* Hide "powered by" */
.goog-logo-link,
.goog-te-gadget span {
  display: none !important;
}

/* Wrapper */
.lang-mini-wrap {
  display: flex;
  align-items: center;
}

/* pill container */
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  height: 34px;
}

/* ORANGE globe (SVG) */
.lang-globe {
  width: 14px;
  height: 14px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23E06A2C' d='M12 2a10 10 0 100 20 10 10 0 000-20Zm7.93 9h-3.15a15.3 15.3 0 00-1.24-5.06A8.03 8.03 0 0119.93 11ZM12 4c.73 0 2.07 1.86 2.67 7H9.33C9.93 5.86 11.27 4 12 4ZM4.07 13h3.15c.2 1.8.7 3.56 1.24 5.06A8.03 8.03 0 014.07 13Zm3.15-2H4.07a8.03 8.03 0 014.39-5.06A15.3 15.3 0 007.22 11ZM12 20c-.73 0-2.07-1.86-2.67-7h5.34C14.07 18.14 12.73 20 12 20Zm3.54-1.94c.54-1.5 1.03-3.26 1.24-5.06h3.15a8.03 8.03 0 01-4.39 5.06Z'/%3E%3C/svg%3E");
}

/* Custom arrow */
.lang-arrow {
  width: 10px;
  height: 10px;
  display: inline-block;
  position: relative;
}
.lang-arrow::after {
  content: "▾";
  font-size: 12px;
  font-weight: 700;
  color: #222;
  line-height: 1;
}

/* Google translate gadget remove extra spacing */
#google_translate_element .goog-te-gadget {
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Make dropdown small + arrow remove */
#google_translate_element select.goog-te-combo {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;

  font-size: 14px !important;
  font-weight: 600 !important;
  color: #222 !important;

  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;

  cursor: pointer;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  width: auto !important;
  min-width: 70px !important; /* English jitna */
}
/* Fix arrow going far (keep arrow near English) */
.lang-pill{
  width: fit-content !important;
}

#google_translate_element{
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
}

#google_translate_element select.goog-te-combo{
  width: auto !important;
  max-width: 95px !important;   /* English jitna hi */
  flex: 0 0 auto !important;
}
/* ================================
   TRUE NORTH STYLE - GOOGLE TRANSLATE
================================ */

/* Google translate top banner hide (optional) */
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0px !important; }

/* Whole translate widget */
#google_translate_element{
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
}

/* pill (bar) small like TrueNorth */
.lang-pill{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.55) !important;
  box-shadow: 0 14px 35px rgba(0,0,0,0.10) !important;
  width: fit-content !important;
}

/* Google dropdown select (English) */
#google_translate_element select.goog-te-combo{
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;

  font-size: 14px !important;
  font-weight: 600 !important;
  color: #222 !important;

  height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;

  width: auto !important;
  min-width: 55px !important;   /* only English size */
  max-width: 90px !important;   /* bar bada nahi hoga */
  cursor: pointer !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Remove extra Google spacing */
#google_translate_element .goog-te-gadget{
  font-size: 0 !important;
  line-height: 0 !important;
}
#google_translate_element .goog-te-gadget span{
  display: none !important;
}

/* Globe icon (orange like Donate) */
.lang-globe{
  width: 14px !important;
  height: 14px !important;
  display: inline-block !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;

  /* ORANGE globe */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f07a2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

/* Arrow icon */
.lang-arrow{
  width: 10px !important;
  height: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin-left: 4px !important;   /* ✅ Arrow bilkul English ke paas */
  padding: 0 !important;
}

/* Arrow shape */
.lang-arrow::after{
  content: "▾" !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #222 !important;
  line-height: 1 !important;
}
/* English dropdown ko bilkul tight (chota) karo */
#google_translate_element select.goog-te-combo{
  width: 1px !important;          /* trick: auto width remove */
  min-width: 0 !important;
  max-width: 65px !important;     /* English tak hi */
  padding-right: 14px !important; /* arrow space */
}

/* Pill ka extra right space remove */
.lang-pill{
  padding-right: 8px !important;
  padding-left: 10px !important;
  gap: 6px !important;
}

/* Arrow bilkul "English" ke paas */
.lang-arrow{
  margin-left: -10px !important;  /* ✅ arrow close to text */
}

/* Select ke andar default dropdown arrow hide */
#google_translate_element select.goog-te-combo{
  background-image: none !important;
}
/* Language pill ko Home se gap do */
.nav-links{
  gap: 18px !important;   /* menu items ka gap */
}

/* Google translate container ko thoda left move */
#google_translate_element{
  margin-right: 2px !important;  /* Home se distance */
}
/* 1) Language pill ko LEFT shift karo */
.lang-mini-wrap{
  margin-right: 18px !important;   /* jitna chahiye badha/ghata sakta hai */
}

/* 2) Home aur About Us ka gap same & clean */
.nav-links{
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;            /* Home aur About Us gap */
}
/* ✅ MOBILE MENU FIX */
body{
  overflow-x: hidden;
}

.menu-btn{
  display: none;
  border: none;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
}

.menu-close{
  display: none;
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.menu-backdrop{
  display: none;
}

@media (max-width: 900px){
  .menu-btn{
    display: block;
  }

  .btn-login{
    display: none; /* mobile me hide */
  }

  .nav-links{
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 80px 20px 20px;
    transition: 0.3s ease;
    z-index: 9999;
    overflow-y: auto;
  }

  .nav-links.open{
    right: 0;
  }

  .menu-close{
    display: block;
  }

  .menu-backdrop.show{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 9998;
  }
}
/* ===== Mobile Menu Fix ===== */
@media (max-width: 768px){

  .nav-links{
    position: fixed;
    top: 70px;
    right: 15px;
    left: 15px;
    background: rgba(255,255,255,0.95);
    border-radius: 18px;
    padding: 18px;
    display: none;
    flex-direction: column;
    gap: 14px;
    z-index: 99999;
  }

  .nav-links.show{
    display: flex;
  }

}
/* ===============================
   MOBILE MENU FIX (WORKING)
   Paste this at the END of style.css
================================= */

/* Desktop: hide mobile button + backdrop + done button */
.menu-btn{
  display:none;
}

.menu-backdrop{
  display:none;
}

.menu-close{
  display:none;
}

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

  /* Show ☰ button */
  .menu-btn{
    display:block;
    background: transparent;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #111;
  }

  /* Make header fixed properly */
  .nav{
    position: sticky;
    top: 0;
    z-index: 200000;
  }

  /* Hide normal menu by default */
  .nav-links{
    position: fixed;
    top: 70px;
    left: 15px;
    right: 15px;

    background: rgba(255,255,255,0.97);
    border-radius: 18px;
    padding: 18px;

    display: none;
    flex-direction: column;
    gap: 14px;

    box-shadow: 0 20px 60px rgba(0,0,0,0.15);

    /* MENU ON TOP */
    z-index: 200001;
  }

  /* When open class added */
  .nav-links.open{
    display: flex;
  }

  /* Fix links clickable */
  .nav-links a{
    color: #111;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .nav-links a:hover{
    background: rgba(0,0,0,0.06);
  }

  /* Donate button inside menu */
  .nav-links a.donate{
    background: #ff7a00;
    color: white !important;
    text-align: center;
  }

  /* Google translate pill spacing */
  .lang-mini-wrap{
    list-style: none;
    margin-bottom: 8px;
  }

  /* Done button show */
  .menu-close{
    display:block;
    margin-top: 10px;
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    background: rgba(0,0,0,0.08);
  }

  /* Backdrop behind menu */
  .menu-backdrop{
    display:none;
  }

  .menu-backdrop.show{
    display:block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);

    /* BACKDROP BELOW MENU */
    z-index: 200000;
  }

  /* Login/Register button adjust */
  .btn-login{
    font-size: 12px;
    padding: 8px 10px;
  }
}
/* ===== Mobile Menu Working ===== */

.menu-btn{ display:none; }
.menu-backdrop{ display:none; }
.menu-close{ display:none; }

@media (max-width: 768px){

  .menu-btn{
    display:block;
    background: transparent;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #111;
  }

  .nav-links{
    position: fixed;
    top: 70px;
    left: 15px;
    right: 15px;
    background: rgba(255,255,255,0.97);
    border-radius: 18px;
    padding: 18px;
    display: none;
    flex-direction: column;
    gap: 14px;
    z-index: 999999;
  }

  .nav-links.open{
    display:flex;
  }

  .menu-close{
    display:block;
    margin-top: 10px;
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    border: none;
    font-weight: 700;
  }

  .menu-backdrop.show{
    display:block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 999998;
  }
}
@media (max-width: 768px){

  .menu-btn{
    display:block;
    background: transparent;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #111;
  }

  .nav-links{
    position: fixed;
    top: 70px;
    left: 15px;
    right: 15px;
    background: rgba(255,255,255,0.97);
    border-radius: 18px;
    padding: 18px;
    display: none;
    flex-direction: column;
    gap: 14px;
    z-index: 999999;
  }

  .nav-links.open{
    display:flex;
  }

  .menu-backdrop{
    display:none;
  }

  .menu-backdrop.show{
    display:block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 999998;
  }

  .menu-close{
    display:block;
    margin-top: 10px;
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    background: rgba(0,0,0,0.08);
  }
}
@media (max-width: 768px){

  /* force menu open on top */
  #navLinks{
    position: fixed !important;
    top: 70px !important;
    left: 15px !important;
    right: 15px !important;

    background: rgba(255,255,255,0.97) !important;
    border-radius: 18px !important;
    padding: 18px !important;

    display: none !important;
    flex-direction: column !important;
    gap: 14px !important;

    z-index: 999999 !important;
  }

  /* when open class added */
  #navLinks.open{
    display: flex !important;
  }

  /* backdrop */
  #menuBackdrop{
    display: none !important;
  }

  #menuBackdrop.show{
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.35) !important;
    z-index: 999998 !important;
  }
}