/* Import modern Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');

/* Simple responsive styles */
:root{
  --max-width:1100px;
  --accent:#e94e77;
  --primary:#0b6b63;
  --muted:#6b7680;
  --bg:#fbfcfd;
  --card:#ffffff;
  --gap:1rem;
  --radius:12px;
  --footer-bg: #022f28;    /* new: footer/header background color */
  --footer-text: #f7fbfb;  /* new: footer/header text color */
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Buttons: improved visuals, consistent radius, shadow, transitions */
.btn,
.nav-btn,
.btn-donate,
.btn-alt {
  border-radius: var(--btn-radius);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  box-shadow: var(--btn-shadow);
  text-decoration: none;
  display: inline-block;
  padding: 0.6rem 1rem;
}

/* Primary solid button */
.btn {
  background: linear-gradient(180deg, var(--primary), #005243);
  color: #fff;
  font-weight:700;
  border: 0;
  box-shadow: var(--btn-shadow);
}

/* Alternate (outline) button with filled hover */
.btn-alt{
  background: transparent;
  color: var(--primary);
  border: 2px solid rgba(0,105,92,0.12);
  font-weight:700;
}
.btn-alt:hover{
  background: linear-gradient(180deg, rgba(0,105,92,0.06), rgba(0,105,92,0.04));
  color: var(--primary);
  transform: translateY(-2px);
}

/* Navigation buttons (compact) */
.nav-btn{
  padding: 0.45rem 0.8rem;
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  font-weight:600;
}
.nav-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.1);
}

/* Donate buttons — stronger accent */
.btn-donate{
  background: linear-gradient(90deg,var(--accent),#ff8f00);
  color:#111;
  font-weight:800;
  padding: 0.9rem 1.8rem;
  border-radius: calc(var(--btn-radius) + 6px);
  box-shadow: 0 12px 30px rgba(255,143,0,0.18);
}
.btn-donate:hover{
  transform: translateY(-3px);
  filter: brightness(1.03);
}

/* Hero / cover donate — keep bigger but follow same style */
.hero .hero-donate{
  padding:1rem 2.2rem;
  border-radius: calc(var(--btn-radius) + 6px);
}

/* focused elements: visible focus ring for accessibility */
.btn:focus, .nav-btn:focus, .btn-donate:focus, .btn-alt:focus, .slide-btn:focus, .indicators button:focus{
  outline: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 0 0 6px var(--btn-focus);
  transform: translateY(-1px);
}

/* small button lift on hover for all */
.btn:hover, .nav-btn:hover, .btn-donate:hover {
  box-shadow: 0 14px 34px rgba(0,0,0,0.14);
}

/* Slide buttons refine */
.slide-btn{
  background: rgba(0,0,0,0.55);
  color:#fff;
  border:0;
  width:46px;
  height:46px;
  border-radius:10px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.18);
}
.slide-btn:hover{ transform: translateY(-2px) }

/* indicators stronger contrast */
.indicators button{
  width:14px;height:14px;border-radius:999px;border:0;background:rgba(0,0,0,0.25);cursor:pointer;
}
.indicators button.active{ background: var(--accent); box-shadow: 0 6px 14px rgba(0,0,0,0.12) }

/* FOOTER: solid background and improved layout on all pages */
.site-footer{
  background-color: var(--footer-bg); /* solid color footer */
  color: var(--footer-text);
  border-top: 0;
  padding: 1.25rem 0;
  margin-top: 2rem;
}

/* ensure links are light and visible */
.site-footer a{
  color: var(--footer-text);
  text-decoration: none;
  font-weight:600;
  opacity:0.95;
}
.site-footer a:hover{ color: #ffffff; text-decoration: underline; opacity:1; }

/* stack copyright above the footer links and keep items left-aligned */
.footer-inner{
  display:flex;
  flex-direction:column;    /* stack lines vertically */
  align-items:flex-start;   /* keep content on the left */
  gap:0.4rem;
  width:100%;
}

/* copyright line styling */
.site-footer > .container .footer-inner > p{
  margin:0;
  padding:0;
  color:var(--footer-text);
  opacity:0.95;
  font-weight:600;
}

/* footer nav placed below the registered NGO line and left aligned */
.site-footer nav{
  margin-top:0.35rem;
  width:100%;
}
.site-footer nav ul{
  display:flex;
  gap:1rem;
  margin:0;
  padding:0;
  list-style:none;
  justify-content:flex-start;
  align-items:center;
}

/* small screens: center footer items for better layout */
@media (max-width:600px){
  .footer-inner{
    align-items:center;
    text-align:center;
  }
  .site-footer nav ul{ justify-content:center; flex-wrap:wrap }
}

/* cover banner height and image */
:root{
  --hero-height:260px; /* desktop height */
}

/* cover image at top only (no text overlay) */
.hero{
  background-image: url('../images/cover_image.jpg'), url('../images/cover_image.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: var(--hero-height);
  width:100%;
  display:block;
}

/* content that was previously inside the hero is now below the banner */
.cover-content{
  background: transparent;
  color: #000;
  padding: 1.6rem 1rem;
  border-radius: 12px;
  text-align: center;
  margin-top: 0.75rem;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

/* responsive hero height */
@media (max-width:900px){
  :root{ --hero-height:200px; }
}
@media (max-width:480px){
  :root{ --hero-height:140px; }
  .cover-content{ padding:1rem; }
}

.site-header{
  /* reduced header height and tighter padding */
  background-color: var(--primary);
  min-height: 110px;
  padding: 0.5rem 0;
  border-bottom:0;
  position:sticky;
  top:0;
  z-index:60;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 0; /* remove any gap between the header and the cover banner */
}

/* header inner now uses row layout on wider screens so brand stays left and nav aligns right */
.header-inner{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between; /* brand left, nav right */
  gap:0.5rem;
  padding:0.5rem 1rem;
  width:100%;
}
.brand{
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #ffffff;        /* make header heading white */
  text-decoration: none; /* remove underline */
}

/* ensure no underline on hover/focus and keep color */
.brand:hover,
.brand:focus,
.brand:active {
  text-decoration: none;
  color: #ffffff;
}
.main-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:0.6rem;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end; /* <-- moved to right */
}
.nav-btn{
  display:inline-block;
  padding:0.5rem 0.9rem;
  border-radius:8px;
  text-decoration:none;
  color:#fff;
  background:rgba(0,0,0,0.35);
  font-weight:600;
  border:1px solid rgba(255,255,255,0.08);
}
.nav-btn:hover{
  filter:brightness(1.05);
  background:rgba(255,255,255,0.08);
}
.btn-donate{
  background:linear-gradient(90deg,var(--accent),#ff8f00);
  color:#111;
  border:none;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.nav-toggle{
  display:none;
  background:transparent;
  border:1px solid rgba(255,255,255,0.12);
  padding:0.4rem 0.6rem;
  border-radius:6px;
  color:#fff;
}
@media (max-width:900px){
  .hero{padding:2rem 0}
  .brand{font-size:1.5rem}
  .nav-toggle{display:inline-block;position:absolute;right:1rem;top:14px}
  .main-nav{display:block;width:100%}
  .main-nav ul{justify-content:center} /* center nav on smaller screens */
  .site-header{min-height:160px}
  .header-inner{padding:0.75rem;flex-direction:column;justify-content:center}
}
@media (max-width:480px){
  .header-inner{padding:0.6rem}
  .nav-btn{padding:0.45rem 0.6rem;font-size:0.95rem}
  .hero-inner{padding:1rem}
  .site-header{min-height:140px}
}

/* hero donate button: rectangular with rounded corners and larger tappable area */
.hero .hero-donate{
  padding:0.95rem 2rem;
  border-radius:14px;
  font-weight:800;
  background: linear-gradient(90deg,var(--accent),#ff8f00);
  color:#111;
  box-shadow:0 6px 20px rgba(0,0,0,0.12);
  text-decoration:none;
  display:inline-block;
}

/* larger, rounded donate button for the cover-content section (below the banner) */
.cover-content .btn-donate,
.cover-content .hero-donate{
  padding: 1.05rem 2.4rem;
  border-radius: 18px;
  font-weight: 800;
  font-size: 1.05rem;
  min-width: 220px;
  display: inline-block;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* subtle hover lift */
.cover-content .btn-donate:hover,
.cover-content .hero-donate:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.16);
}

/* slightly smaller on narrow screens */
@media (max-width:480px){
  .cover-content .btn-donate,
  .cover-content .hero-donate{
    padding: 0.8rem 1.6rem;
    border-radius: 14px;
    min-width: 160px;
    font-size: 1rem;
  }
}

/* Gallery / Slideshow styles */
.gallery{padding:1.25rem 0}
.gallery h2{margin:0 0 0.5rem 0;color:var(--primary);font-size:1.25rem}

.slideshow{position:relative;display:flex;align-items:center;gap:0.5rem;margin-top:0.75rem}

/* make the slideshow taller and responsive */
.slides{
  width:100%;
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 8px 30px rgba(0,0,0,0.06);
  position:relative;

  /* increased height to fit larger images while staying responsive */
  min-height:420px;       /* desktop minimum */
  max-height:70vh;       /* never exceed 70% of viewport height */
  background:#f7f7f7;
}

/* each slide (absolute stacked) */
.slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(0.98);
  transition:opacity .45s ease, transform .45s ease;
  pointer-events:none;
}
.slide.active{opacity:1;transform:scale(1);pointer-events:auto}

/* ensure images fit inside the slide without being cropped */
.slide img{
  max-width:100%;
  max-height:100%;
  object-fit:contain; /* show whole image */
  display:block;
}

/* nav buttons */
.slide-btn{
  background:rgba(0,0,0,0.5);
  color:#fff;
  border:0;
  width:44px;
  height:44px;
  border-radius:8px;
  display:inline-grid;
  place-items:center;
  cursor:pointer;
  font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
}
.slide-btn.prev{margin-right:8px}
.slide-btn.next{margin-left:8px}

/* indicators */
.indicators{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:0.6rem;
}
.indicators button{
  width:14px;height:14px;border-radius:999px;border:0;background:rgba(0,0,0,0.25);cursor:pointer;
}
.indicators button.active{ background: var(--accent); box-shadow: 0 6px 14px rgba(0,0,0,0.12) }

/* Brand with logo */
.brand-section{
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.brand-logo{
  height:64px; /* increased from 48px */
  width:auto;
  display:block;
}
.brand{
  font-weight:800;
  font-size:1.1rem;
  color:var(--primary);
  text-decoration:none;
}

/* Make hero slideshow full-bleed and show images edge-to-edge.
   Place only the "next" button below the slideshow, hide the prev button. */
.hero-slideshow{
  width:100vw;                          /* full viewport width */
  margin-left: calc(50% - 50vw);        /* center the full-bleed area inside container */
  display:flex;
  flex-direction:column;                /* stack: (prev) / slides / (next) / indicators */
  align-items:stretch;
  gap:0.5rem;
  position:relative;
  overflow:visible;
}

.hero-slides{
  width:100%;
  min-height:80vh;   /* increased from 60vh */
  height:80vh;       /* increased from 60vh */
  border-radius:0;
  overflow:hidden;
  position:relative;
  background:#000;
}

.hero-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(0.99);
  transition:opacity 0.5s ease, transform 0.5s ease;
  pointer-events:none;
}
.hero-slide.active{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}
.hero-slide img{
  width:100vw;
  height:80vh;       /* match slide height */
  object-fit:cover;
  display:block;
}

/* hide previous button, show only next centered below slides */
.hero-prev{
  display:none;
}

.hero-next{
  display:inline-block;
  align-self:center;
  margin:0.8rem auto 0;   /* place below slideshow and center horizontally */
  background:var(--accent);
  color:#fff;
  border:0;
  padding:0.6rem 1rem;
  border-radius:10px;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
}

/* indicators sit beneath the next button (or keep below slides if you prefer) */
.hero-indicators{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:0.6rem;
}

/* On small screens reduce height */
@media (max-width:800px){
  .hero-slides{ min-height:60vh; height:60vh; }
  .hero-slide img{ height:60vh; }
  .hero-next{ padding:0.5rem 0.9rem; }
}

/* FOOTER: two-column layout with centered content in each column */
.footer-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1.25rem;
  align-items:start;
  padding:1.25rem 0;
}
.footer-section{
  display:flex;
  flex-direction:column;
  align-items:center; /* center content inside each column */
  justify-content:center;
  text-align:center;
  color:rgba(255,255,255,0.95);
}
.footer-section h3{ margin:0 0 0.4rem 0; color:#fff; font-weight:700; }
.footer-section p, .footer-section a{ margin:0; color:rgba(255,255,255,0.9); }

/* Footer copyright full-width below columns */
.footer-copyright{
  grid-column: 1 / -1;
  margin-top:0.9rem;
  text-align:center;
  border-top:1px solid rgba(255,255,255,0.06);
  padding-top:0.75rem;
  color:rgba(255,255,255,0.85);
}

/* responsive */
@media (max-width:700px){
  .footer-grid{ grid-template-columns: 1fr; }
  .brand{ font-size:1rem; }
}

/* Header color same as footer */
.site-header{
  background-color: var(--footer-bg); /* use footer color variable */
  color: var(--footer-text);
  position: sticky;
  top: 0;
  z-index: 1200;
  backdrop-filter: blur(4px);
}

/* ensure logo/title and nav links are visible on dark header */
.site-header .brand,
.site-header .brand a,
.site-header .main-nav a {
  color: var(--footer-text) !important;
}

/* optional: increase site title size for visibility */
.site-header .brand{
  font-size: 1.45rem;
  font-weight: 800;
}

/* About DDU-GKY section: image before heading, text aligned right */
.about-ddugky{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.25rem;
  align-items: start;
  margin: 1.5rem 0;
}
.about-ddugky .ddugky-image img{
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}
.about-ddugky .ddugky-content{
  text-align: right;      /* align all text to the right */
  color: #111;
  line-height: 1.7;
}

/* responsive: stack on small screens, keep image first */
@media (max-width: 820px){
  .about-ddugky{
    grid-template-columns: 1fr;
  }
  .about-ddugky .ddugky-content{
    text-align: left; /* more readable on small screens */
  }
}

/* Mission section: text left, smaller image on right */
.mission-grid{
  display:grid;
  grid-template-columns: 1fr 360px; /* text takes flexible space, image column narrower */
  gap:1.25rem;
  align-items:start;
  margin:1.25rem 0;
}
.mission-text{
  color:#111;
  line-height:1.7;
}
.mission-images{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end; /* keep image at right edge of its column */
}
.mission-images img{
  width:100%;
  max-width:320px;  /* reduced image size */
  height:auto;
  border-radius:10px;
  object-fit:cover;
  box-shadow:0 10px 28px rgba(10,30,40,0.06);
}

/* responsive: stack on small screens with image below text */
@media (max-width:820px){
  .mission-grid{ grid-template-columns: 1fr; }
  .mission-images{ justify-content:center; margin-top:0.75rem; }
  .mission-text{ text-align:left; }
}

/* About page: right-align text in about sections */
.about-page .section,
.about-page .section h1,
.about-page .section h2,
.about-page .section p,
.about-page .section li,
.about-page .ddugky-content {
  text-align: left !important;
}

/* keep previous mobile behavior (if any) */
@media (max-width:820px){
  .about-page .section,
  .about-page .ddugky-content {
    text-align: left !important;
  }
}

/* Decorative quote + donate CTA (between hero and main) */
.decorative-quote{
  background: linear-gradient(180deg, rgba(255,250,240,0.9), rgba(255,255,255,0.85));
  padding: 2rem 0;
  margin: 1.25rem 0;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(10,30,40,0.04);
}
.decorative-quote .container{ display:flex; flex-direction:column; align-items:center; gap:1rem; }

/* Quote styling */
.quote-text{
  max-width:900px;
  margin:0;
  font-style:italic;
  font-size:1.15rem;
  color:#274043;
  text-align:center;
  line-height:1.6;
}
.quote-text footer{ margin-top:0.5rem; font-style:normal; font-weight:600; color:#2b5b54; }

/* Donate CTA block */
.donate-cta{ margin-top:0.6rem; display:flex; flex-direction:column; align-items:center; gap:0.6rem; }
.donate-legend{ margin:0; font-size:1.05rem; color:#122; }

/* Yellow rectangular donate button with rounded corners */
.btn-donate-highlight{
  display:inline-block;
  background:#ffd400;         /* bright yellow */
  color:#0b0b0b;
  padding:0.75rem 1.25rem;
  border-radius:10px;         /* rounded corners (not pill) */
  border:0;
  font-weight:700;
  text-decoration:none;
  box-shadow: 0 8px 22px rgba(221,167,0,0.12);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn-donate-highlight:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(221,167,0,0.18);
}

/* Add these styles (or merge into your stylesheet) to create a 3-column gallery with equal-size images and large, equal spacing */
.gallery-section .section-heading { margin-bottom: 1rem; color: var(--primary); }

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 images per row */
  gap: 28px;                              /* large equal spacing between images */
  align-items: stretch;
}

/* fixed aspect and consistent sizing */
.gallery-grid img{
  width: 100%;
  height: 260px;         /* consistent height for all images */
  object-fit: cover;     /* crop while filling box */
  display: block;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(10,30,40,0.06);
}

/* Responsive: 2 columns on medium screens, 1 on small */
@media (max-width: 1000px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); gap:22px; }
  .gallery-grid img{ height:220px; }
}
@media (max-width: 620px){
  .gallery-grid{ grid-template-columns: 1fr; gap:18px; }
  .gallery-grid img{ height:200px; }
}
.btn-small{
  display:inline-block;
  padding:0.65rem 1.1rem;
  background: linear-gradient(180deg,#ffdf5a,#ffd400); /* decorative yellow */
  color:#0b0b0b;
  border-radius:6px;                 /* rectangular with slightly rounded corners */
  border:2px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 22px rgba(0,0,0,0.12), inset 0 -3px 6px rgba(255,255,255,0.45);
  text-decoration:none;
  font-weight:800;
  letter-spacing:0.4px;
  text-transform:uppercase;
  transition: transform 140ms ease, box-shadow 140ms ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
}
.btn-small:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.18), inset 0 -3px 6px rgba(255,255,255,0.5);
}
.btn-small[aria-disabled="true"]{
  opacity:0.55;
  pointer-events:none;
  transform:none;
  box-shadow:none;
}

/* Top banner (green) shown on every page */
.top-banner{
  background: #0b6b63; /* green */
  color: #ffffff;
  font-weight:600;
  font-size:0.95rem;
  padding:0.45rem 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.top-banner .banner-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}
.top-banner .banner-hours,
.top-banner .banner-phone{
  display:inline-block;
}
.top-banner .banner-sep{
  opacity:0.8;
}

/* keep header immediately below banner (no overlap) */
body { margin-top:0; }

/* responsive tweaks */
@media (max-width:720px){
  .top-banner .banner-inner{ padding:0 0.6rem; font-size:0.9rem; justify-content:center; text-align:center; }
}

/* How do we operate: heading centered in viewport, content left-aligned */
#how-we-operate {
  width: 100%;
  padding: 2rem 0;
}

#how-we-operate > .container {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* center the heading across the screen */
#how-we-operate .section-heading,
#how-we-operate h2 {
  text-align: center;
  margin: 0 0 1rem;
  font-size: 1.35rem;
  font-weight: 800;
}

/* left-align the section body text */
#how-we-operate .how-we-operate-content,
#how-we-operate .how-we-operate-content p,
#how-we-operate .how-we-operate-content ol,
#how-we-operate .how-we-operate-content ul {
  text-align: left;
  color: #111;
  line-height: 1.7;
}

/* responsive: keep heading centered, content readable on small screens */
@media (max-width: 820px) {
  #how-we-operate .section-heading { font-size: 1.15rem; }
  #how-we-operate .how-we-operate-content { padding: 0 1rem; }
}

/* Our Aim section: centered heading and text */
.our-aim-section{
  background: var(--bg);
  padding: 2.2rem 0;
  margin: 1rem 0;
}

.our-aim-section .section-heading{
  text-align: center;
  margin-bottom: 1.25rem;
  font-size: 1.4rem;
  color: var(--primary);
  font-weight: 800;
}

.our-aim-content{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  color: #111;
  line-height: 1.75;
  font-size: 0.95rem;
}

.our-aim-content p{
  margin-bottom: 1rem;
}
.our-aim-content p:last-child{
  margin-bottom: 0;
}

/* NGO Registration section: light blue background, black bold text */
.ngo-registration{
  background: #d4e8f7; /* light blue */
  padding: 0.8rem 0;
  margin: 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.ngo-registration .container{
  display: flex;
  align-items: center;
  justify-content: center;
}

.registration-text{
  margin: 0;
  color: #000000; /* black */
  font-weight: 700; /* bold */
  font-size: 1rem;
  letter-spacing: 0.3px;
}

.registration-text strong{
  font-weight: 900; /* extra bold for the number */
}

/* responsive */
@media (max-width: 720px){
  .registration-text{ font-size: 0.9rem; }
}

/* Placed individuals table responsive styling */
.placed-table {
  font-size: 0.95rem;
}
.placed-table thead th {
  background: var(--primary);
  color: #fff;
  padding: 1rem;
  text-align: left;
  font-weight: 700;
}
.placed-table tbody tr:hover {
  background: #f9fafb;
}
.placed-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #e9eef0;
  color: #111;
}
.placed-table tbody tr:last-child td {
  border-bottom: none;
}

/* Responsive: stack table on small screens */
@media (max-width:800px) {
  .placed-table {
    font-size: 0.85rem;
  }
  .placed-table th,
  .placed-table td {
    padding: 0.7rem 0.5rem;
  }
}

/* India Map image: reduce to half width on desktop, full width on small screens */
.india-map-img{
  max-width:50%;
  width:50%;
  height:auto;
  border-radius:12px;
  box-shadow:0 12px 32px rgba(10,30,40,0.12);
}

/* keep image full-width on narrow viewports */
@media (max-width:900px){
  .india-map-img{
    max-width:100%;
    width:100%;
  }
}

/* India Map + Quote — decorative right-half centered quote */
.india-map-quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* keep two equal halves */
  gap: 2rem;
  align-items: center;
}

/* ensure right column centers the quote in its half */
.india-quote-col {
  display: flex;
  align-items: center;
  justify-content: center; /* centers inside right half */
  padding: 1.5rem;
}

/* decorative, larger quote */
.india-quote-text {
  margin: 0;
  max-width: 620px;
  width: 100%;
  text-align: center;
  line-height: 1.05;
  font-weight: 900;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 3rem; /* increased size */
  letter-spacing: 0.6px;

  /* decorative gradient text */
  background: linear-gradient(90deg, #0b6b63 0%, #0e9b7f 50%, #38c1a1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* subtle decorative container */
  position: relative;
  padding: 1rem 1.6rem;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(11,107,99,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* large faint quote-mark for decoration */
.india-quote-text::before{
  content: "“";
  position: absolute;
  left: 12px;
  top: -26px;
  font-size: 4.6rem;
  color: rgba(11,107,99,0.10);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

/* responsive sizing */
@media (max-width: 900px) {
  .india-quote-text { font-size: 2rem; max-width: 95%; }
  .india-quote-text::before { font-size: 3rem; top: -18px; left: 8px; }
  .india-map-quote-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Dropdown: More (desktop hover + keyboard focus) */
.nav-more { position: relative; }
.nav-more .nav-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--card);
  border-radius: 10px;
  padding: 0.35rem;
  box-shadow: 0 10px 28px rgba(10,30,40,0.08);
  display: none;
  z-index: 1300;
}
.nav-more .nav-dropdown li { margin: 0; }
.nav-more .nav-dropdown a {
  display: block;
  padding: 0.55rem 0.9rem;
  color: var(--primary);
  text-decoration: none;
  border-radius: 8px;
}
.nav-more .nav-dropdown a:hover,
.nav-more .nav-dropdown a:focus {
  background: rgba(11,107,99,0.06);
}

/* show dropdown on hover or keyboard focus */
.nav-more:hover > .nav-dropdown,
.nav-more:focus-within > .nav-dropdown {
  display: block;
}
.nav-more:hover > .nav-dropdown { pointer-events:auto; }

/* mobile: dropdown becomes inline item inside collapsed nav */
@media (max-width: 880px) {
  .nav-more .nav-dropdown {
    position: static;
    display: none;
    box-shadow: none;
    background: transparent;
    padding: 0.25rem 0;
    min-width: auto;
  }
  /* open when parent nav has .open (toggled by the menu button) */
  .main-nav.open .nav-dropdown { display:block; }
  .nav-more .nav-dropdown a { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* visual indication for the dropdown toggle */
.nav-dropdown-toggle { display:inline-flex; align-items:center; gap:6px; }