/* =========================================================
   Ashwamedh Gurukul Foundation — shared stylesheet
   ========================================================= */
:root{
  --maroon:#7a1f1f;
  --maroon-dark:#5a1414;
  --saffron:#e08a1e;
  --gold:#c99a3b;
  --cream:#fbf6ec;
  --ink:#241a15;
  --line:#e6dcc8;
  --maxw:1180px;
  --header-bg:#FFFADF;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Noto Sans","Noto Sans Devanagari",Arial,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.55;
}
.hero-banner img{
  max-width: 100%;
  width: 100%;
  display: block;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:"Noto Serif","Noto Serif Devanagari",Georgia,serif;line-height:1.25;margin:0 0 .5em;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.btn{
  display:inline-block;background:var(--maroon);color:#fff;padding:12px 26px;
  border-radius:4px;font-weight:600;letter-spacing:.02em;transition:background .2s ease;border:0;cursor:pointer;
  font-size:.95rem;
}
.btn:hover{background:var(--maroon-dark);}
.btn.outline{background:transparent;border:2px solid var(--maroon);color:var(--maroon);}
.btn.outline:hover{background:var(--maroon);color:#fff;}


/* ---------- header : single-row layout (logo + nav + language all inline) ---------- */
header.site-header{position:sticky;top:0;z-index:999;background:var(--header-bg);border-bottom:3px solid var(--maroon);}
.header-row{
  max-width:var(--maxw);margin:0 auto;padding:10px 20px;
  display:flex;align-items:center;gap:24px;position:relative;
  background:var(--header-bg);
}.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand img{height:54px;width:auto;}
nav.main-nav{flex:1;min-width:0;}
.nav-inner{display:flex;align-items:center;justify-content:flex-end;gap:6px;position:relative;}
.nav-list{list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:0;}
.nav-list>li{position:relative;}
.nav-list>li>a{
  display:block;color:var(--maroon-dark);padding:10px 14px;font-size:.92rem;font-weight:600;
  white-space:nowrap;border-radius:4px;
}
.nav-list>li:hover>a,.nav-list>li.open>a,.nav-list>li>a.current{background:var(--maroon);color:#fff;}
.lang-select{border:1px solid var(--line);border-radius:4px;padding:6px 10px;background:#fff;font-size:.85rem;flex-shrink:0;}
.hamburger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:8px 4px;flex-shrink:0;}
.hamburger span{width:24px;height:2px;background:var(--maroon);display:block;}

/* ---- simple vertical dropdown list ---- */
.resp-panel{
  display:none;
  list-style:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:260px;
  background:#fff;
  box-shadow:0 16px 34px rgba(0,0,0,.18);
  border-radius:0 0 10px 10px;
  padding:8px 0;
  margin:0;
  z-index:70;
}

.nav-list>li.has-dropdown:hover .resp-panel,
.nav-list>li.has-dropdown.open .resp-panel{
  display:block;
}

.resp-panel li{
  position:static;
}

.resp-link{
  display:block;
  padding:10px 20px;
  font-size:.88rem;
  font-weight:600;
  color:var(--maroon-dark);
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}

.resp-link:hover{
  background:var(--cream);
  color:var(--maroon);
}

@media(max-width:900px){
  .header-row{flex-wrap:wrap;}
  .hamburger{display:flex;order:2;margin-left:auto;}
  .lang-select{order:3;}
  nav.main-nav{order:4;flex-basis:100%;}
  .nav-inner{justify-content:flex-start;}
  .nav-list{display:none;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;background:var(--maroon);padding:6px 0 12px;z-index:65;}
  .nav-list.show{display:flex;}
  .nav-list>li>a{color:#fff;border-radius:0;}
  .nav-list>li:hover>a,.nav-list>li.open>a,.nav-list>li>a.current{background:var(--maroon-dark);}

  .resp-panel{
    position:static;
    min-width:auto;
    width:auto;
    box-shadow:none;
    border-radius:0;
    background:var(--maroon-dark);
    padding:4px 0 8px;
  }
  .resp-link{
    color:#f2e9d8;
    padding:10px 32px;
  }
  .resp-link:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
  }
}
/* ===== CENTER MEET BUTTON ===== */

.meet-link {
    width: 100% !important;
    max-width: none !important;

    margin: 20px 0 !important;
    padding: 0 !important;

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

    text-align: center !important;
}

.meet-link a {
    display: block !important;

    width: fit-content !important;

    margin-left: auto !important;
    margin-right: auto !important;

    background: var(--maroon-dark) !important;
    color: #fff !important;

    padding: 12px 45px !important;

    border-radius: 50px !important;

    text-align: center !important;
    text-decoration: none !important;

    font-size: 0.95rem;
    font-weight: 700;
}


/* ===== MOBILE ===== */

@media (max-width: 760px) {
    .meet-link {
        width: 100% !important;
        margin: 18px 0 !important;
    }

    .meet-link a {
        margin: 0 auto !important;
        padding: 10px 28px !important;
        font-size: 0.85rem;
    }
}

/* ---------- hero image slider (top banner) ---------- */
.hero-slider{position:relative;width:100%;overflow:hidden;background:#111;line-height:0;}
.hero-slides{position:relative;width:100%;aspect-ratio:1600/500;}
@media(max-width:700px){.hero-slides{aspect-ratio:16/10;}}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;}
.hero-slide.active{opacity:1;}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center;
  animation:heroZoom 8s ease-in-out infinite alternate;}
@keyframes heroZoom{from{transform:scale(1);}to{transform:scale(1.06);}}
.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;border:0;font-size:1.3rem;cursor:pointer;z-index:5;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease;
}
.hero-arrow:hover{background:rgba(0,0,0,.7);}
.hero-prev{left:14px;}
.hero-next{right:14px;}
.hero-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:5;}
.hero-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:background .2s ease,transform .2s ease;}
.hero-dots span.active{background:#fff;transform:scale(1.25);}

/* ---------- google form embed on responsibility pages ---------- */
.gform-embed{margin:28px auto 8px;max-width:660px;}
.gform-embed iframe{width:100%;border:0;border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.12);display:block;}

/* ---------- hero ---------- */
.hero{
  position:relative;text-align:center;color:#fff;padding:70px 20px 90px;
  background:linear-gradient(180deg,rgba(122,31,31,.88),rgba(90,20,20,.92)),url('../assets/images/hero-temple.webp') center/cover;
}
.hero h1{font-size:clamp(1.5rem,3.6vw,2.4rem);color:#fff;}
.hero p.tagline{font-size:1.05rem;opacity:.92;max-width:640px;margin:0 auto;}

/* generic page hero (inner pages) */
.page-hero{background:linear-gradient(180deg,var(--maroon),var(--maroon-dark));color:#fff;text-align:center;padding:10px 20px;margin-bottom:10px;}
.page-hero h1{color:#fff;font-size:clamp(1.4rem,3vw,2.1rem);}
.page-hero p{opacity:.9;max-width:640px;margin:8px auto 0;}

/* ---------- Section Heading Badge ---------- */
.founder-section-title {
  background: #500000;
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  padding: 8px 20px;
  border-radius: 50px;
  display: table;
  margin: 20px auto 15px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* ---------- Desktop Founder Cards (Original Style Maintained) ---------- */
.founders {
  max-width: var(--maxw, 1200px);
  margin: 40px auto 40px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}

.founder-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
  padding: 22px 18px;
  text-align: center;
}

.founder-card .card-img-wrap img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 25px;
  margin: 0 auto 14px;
  border: 3px solid var(--saffron, #f39c12);
  display: block;
}

.founder-card .name {
  font-weight: 600;
}

.founder-card .role {
  color: var(--maroon, #500000);
  font-size: 0.88rem;
  margin-top: 4px;
}

/* ---------- Mobile Only Overrides (Matches Reference Image) ---------- */@media (max-width: 768px) {
  .founder-section-title {
    font-size: 0.95rem;
    padding: 6px 14px;
    margin: 15px auto 10px;

  }

  .founders {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 10px;
    margin: 10px auto 20px;
  }

  .founder-card {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }

  .founder-card .card-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    margin-bottom: 6px; /* Tighter margin below image */
  }

  .founder-card .card-img-wrap img {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
    margin: 0;
    object-fit: cover;
  }

  .founder-card .name {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.25;
    color: #500000; /* Updated to match the maroon color */
    margin: 6px 0 2px 0; /* Tightened margin to match reference */
  }

  .founder-card .role {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    color: #500000; /* Updated to match the maroon color */
    margin: 0; /* Removed extra top margin */
  }
}
.meet-link{display:flex;justify-content:center;text-align:center;margin:0 0 0px;margin-bottom: -10px;}
.meet-link a{display:inline-block;color:var(--maroon);font-weight:600;border-bottom:2px solid var(--saffron);padding-bottom:2px;}

/* ========== 1. Location & Map CSS ========== */
.gurukul-location-section {
  padding: 30px 0 0 0; /* Removed bottom padding so it sits flush with the red bar */
}

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

.section-title h2 {
  font-size: 1.55rem;
  font-weight: 700;
  color: #500000;
  margin: 0;
}

.map-frame {
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  margin: 0 auto 28px;
}

.map-frame iframe {
  width: 100%;
  height: 280px;
  border: 0;
  display: block;
}

/* ========== 2. Action Section (Icons & Banner) CSS ========== */
.action-section {
  padding: 0;
  margin: 0;
  width: 100%;
}

.icons-full-width {
  background-color: #550000;
  width: 100%;
}

.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 35px 20px;
  justify-items: center;
  align-items: center;
  max-width: var(--maxw, 1200px);
  margin: 0 auto;
}

.three-col img {
  display: block;
  width: 100%;
  max-width: 120px;
  height: auto;
  border-radius: 50%;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.three-col img:hover {
  transform: translateY(-3px);
}

.contribute-area {
  padding: 25px 20px 40px;
  background-color: #ffffff; /* Changed from yellow to white */
}

.contribute-banner {
  text-align: center;
  max-width: var(--maxw, 1200px);
  margin: 0 auto;
}

.contribute-banner img {
  display: block;
  margin: 0 auto 20px;
  border-radius: 18px;
  width: 100%;
  max-width: 900px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.contribute-btn {
  display: inline-block;
  background-color: #FBFF7A; /* Changed to yellow */
  color: #000000; /* Changed to black */
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
  padding: 16px 40px;
  border-radius: 50px;
  border: 3px solid #000000;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  line-height: 1.3;
  text-align: center;
  transition: background 0.2s ease;
}

.contribute-btn:hover {
  background-color: #e6ea6e; /* Slightly darker yellow on hover */
  color: #000000;
}

/* ========== 3. Mobile Adjustments ========== */
@media (max-width: 768px) {
  /* Map Mobile */
  .section-title h2 {
    font-size: 1.3rem;
    margin-bottom: 14px;
  }
  .map-frame {
    width: calc(100% - 24px);
    margin: 0 auto 20px;
    border-radius: 10px;
  }
  .map-frame iframe {
    height: 230px;
  }
  
  /* Icons & Banner Mobile */
  .three-col {
    gap: 15px;
    padding: 30px 15px;
  }
  .three-col img {
    max-width: 100px;
  }
  .contribute-area {
    padding: 20px 15px 30px;
  }
  .contribute-btn {
    font-size: 1.05rem;
    padding: 14px 30px;
  }
}

@media (max-width: 480px) {
  .three-col {
    gap: 10px;
    padding: 25px 12px;
  }
  .three-col img {
    width: 80px;
    height: 80px;
    max-width: none;
  }
  .contribute-banner img {
    border-radius: 12px;
  }
  .contribute-btn {
    font-size: 0.95rem;
    padding: 12px 25px;
    border-width: 2px;
  }
}

@media (max-width: 360px) {
  .three-col {
    gap: 6px;
    padding: 20px 8px;
  }
  .three-col img {
    width: 68px;
    height: 68px;
  }
}
/* ========== Base Section Setup ========== */
.education-section {
  background-color: #FCF8E8;
  padding: 0 0 60px 0;
  width: 100%;
}

.education-section .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ========== Full-Width Ribbon Title ========== */
.ribbon-title-full {
  background-color: #550000;
  width: 100%;
  text-align: center;
  padding: 24px 15px;
  margin-bottom: 45px;
}

.ribbon-title-full h2 {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.5px;
}

/* ========== Education Groups & Titles ========== */
.edu-group {
  margin-bottom: 50px;
}

.edu-group:last-child {
  margin-bottom: 0;
}

.edu-group-title {
  text-align: center;
  color: #550000;
  font-size: 1.6rem;
  font-weight: 700;
  /* Adjusted margin to create perfect spacing between text and images */
  margin-bottom: 35px; 
  line-height: 1.4;
}

.edu-group-title span {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 8px;
}

/* ========== Desktop Outer Border Box ========== */
.gallery-box {
  background-color: #F8F2D8;
  border: 4px solid #8B7355;
  border-radius: 25px;
  padding: 35px 30px; /* Slightly increased top/bottom padding */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* ========== Grid Layouts ========== */
.gallery {
  display: grid;
  gap: 24px; /* Slightly wider gap on desktop */
}

.gallery.grid-3 { grid-template-columns: repeat(3, 1fr); }
.gallery.grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin: 0 auto; }
.gallery.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ========== Image Cards (Border & Shadow) ========== */
.gallery a {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  /* Added border and shadow to match reference */
  border: 2px solid #550000; 
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2); 
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.gallery a:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

/* ========== Mobile Adjustments ========== */
@media (max-width: 768px) {
  
  .ribbon-title-full {
    padding: 16px 10px;
    margin-bottom: 30px;
  }

  .ribbon-title-full h2 {
    color: #FFC107; 
    font-size: 1.7rem;
  }

  .edu-group-title {
    font-size: 1.3rem;
    margin-bottom: 25px; /* Adjusted mobile spacing between text and images */
  }

  .edu-group-title span {
    font-size: 0.95rem;
    margin-top: 6px;
  }

  .gallery-box {
    background-color: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
  }

  .gallery {
    gap: 15px; /* Margin between images on mobile */
  }

  .gallery.grid-3 { grid-template-columns: repeat(3, 1fr); }
  .gallery.grid-2 { grid-template-columns: repeat(2, 1fr); }
  .gallery.grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Heavy drop shadow and border explicitly tailored for mobile view */
  .gallery a {
    border-radius: 14px;
    border: 2px solid #4a0000; /* Darker border */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35); /* Deep, wide shadow matching your image */
  }
}/* =====================================================
   GURUKUL EDUCATION SYSTEM
   MATCHED FOR DESKTOP + MOBILE
===================================================== */

.gurukul-unified-section {
  width: 100%;
  background: #FFFADF;
  padding: 0 0 4px;
  margin: 0;
  box-sizing: border-box;
}

.gurukul-unified-section *,
.gurukul-unified-section *::before,
.gurukul-unified-section *::after {
  box-sizing: border-box;
}


/* =====================================================
   FULL WIDTH HEADING
===================================================== */

.ribbon-title-full {
  width: 100%;
  margin: 0;
  padding: 3px 10px;
  background: #550000;
  text-align: center;
}

.ribbon-title-full h2 {
  margin: 0 !important;
  padding: 0 !important;

  color: #fff;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
}


/* =====================================================
   WRAPPER
===================================================== */

.gurukul-unified-section .wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 3px;
}


/* =====================================================
   REMOVE OLD OUTER ROUNDED FRAME
===================================================== */

.gurukul-section-frame {
  width: 100%;
  background: #FFFADF;

  border: 0;
  border-radius: 0;

  padding: 6px 0 0;
  overflow: hidden;
}


/* =====================================================
   EDUCATION PILLARS - DESKTOP
===================================================== */

.gurukul-pillars {
  width: 100%;
  max-width: 385px;

  margin: 0 auto 14px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  column-gap: 10px;
  row-gap: 10px;

  justify-items: center;
  align-items: center;
}


/* IMPORTANT:
   On desktop ALL circles are same size
*/

.pillar,
.item-large,
.item-small {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  grid-column: span 1;
}


.pillar-image,
.item-large .pillar-image,
.item-small .pillar-image {
  display: block;

  width: 82px;
  height: 82px;

  max-width: 82px;

  object-fit: cover;
  border-radius: 50%;

  margin: 0;

  box-shadow: none;

  transition: transform 0.25s ease;
}


.pillar-image:hover {
  transform: scale(1.03);
}


/* =====================================================
   1000+ TOPIC BOX
===================================================== */

.topics-box {
  width: calc(100% - 2px);
  margin: 0 auto;

  background: #FFFADF;

  border: 1px solid #550000;
  border-radius: 500px;

  padding: 4px 8px 7px;

  box-shadow: none;

  overflow: hidden;
}


/* =====================================================
   TOPICS HEADING
===================================================== */

.topics-title {
  width: 100%;

  margin: 0 0 7px;
  padding: 0;

  text-align: center;

  color: #550000;

  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
}


/* =====================================================
   TOPIC SLIDER
===================================================== */

.topic-slider {
  width: 100%;
  position: relative;

  padding: 0;
  margin: 0;
}


/*
   Only this small centered area displays slides.
   Exactly 3 circles visible.
*/

.topic-track-wrap {
  width: 100%;
  max-width: 368px;

  margin: 0 auto;

  overflow: hidden;

  touch-action: pan-y;
}


/* actual moving track */

.topic-track {
  display: flex;
  align-items: center;

  gap: 8px;

  margin: 0;
  padding: 0;

  transition: transform 0.45s ease;
  will-change: transform;
}


/*
   VERY IMPORTANT

   3 circles exactly:
   circle + gap + circle + gap + circle
*/

.topic-track a {
  flex: 0 0 calc((100% - 16px) / 3);

  width: calc((100% - 16px) / 3);

  min-width: 0;

  display: block;

  text-decoration: none;
}


/* topic circle */

.topic-track img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 1 / 1;

  object-fit: cover;

  border-radius: 50%;

  border: 1.5px solid #550000;

  box-shadow: none;

  margin: 0;
}


/* =====================================================
   COMPLETELY REMOVE SLIDER ARROWS
===================================================== */

.topic-arrow,
.topic-arrow.prev,
.topic-arrow.next,
#topicPrev,
#topicNext {
  display: none !important;
}


/* =====================================================
   DOTS
===================================================== */

.topic-dots {
  width: 100%;

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

  gap: 5px;

  margin: 4px 0 0;
  padding: 0;
}


.topic-dots span {
  display: block;

  width: 4px;
  height: 4px;

  flex: 0 0 4px;

  border-radius: 50%;

  background: #cec6ac;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.topic-dots span.active {
  width: 5px;
  height: 5px;

  flex-basis: 5px;

  background: #550000;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 992px) and (min-width: 769px) {

  .gurukul-pillars {
    max-width: 380px;
  }

  .pillar-image,
  .item-large .pillar-image,
  .item-small .pillar-image {
    width: 80px;
    height: 80px;
    max-width: 80px;
  }

}


/* =====================================================
   MOBILE
   REFERENCE SCREENSHOT STYLE
===================================================== */

@media (max-width: 768px) {

  /*
     maroon vertical sides like your mobile screenshot
  */

  .gurukul-unified-section {
    border-left: 5px solid #550000;
    border-right: 5px solid #550000;

    background: #FFFADF;

    padding-bottom: 32px;
  }


  /* ==========================
     MOBILE HEADING
  ========================== */

  .ribbon-title-full {
    padding: 12px 5px;

    background: #550000;
  }

  .ribbon-title-full h2 {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
  }


  /* no left/right white spaces */

  .gurukul-unified-section .wrap {
    padding: 0;
  }


  .gurukul-section-frame {
    padding: 10px 0 0;
  }


  /* =================================================
     FIRST FOUR = LARGE 2 × 2

     LAST FOUR = SMALL 4 × 1
  ================================================= */

  .gurukul-pillars {
    width: 100%;
    max-width: none;

    padding: 0 10px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    column-gap: 8px;
    row-gap: 10px;

    margin: 0 auto 39px;
  }


  /* First 4 circles */

  .item-large {
    grid-column: span 2;
  }


  .item-large .pillar-image {
    width: 100%;
    height: auto;

    max-width: 178px;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius: 50%;

    box-shadow: none;
  }


  /* Last four */

  .item-small {
    grid-column: span 1;
  }


  .item-small .pillar-image {
    width: 100%;
    height: auto;

    max-width: 82px;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius: 50%;

    box-shadow: none;
  }


  /* =================================================
     MOBILE TOPICS BOX
  ================================================= */

  .topics-box {
    width: calc(100% - 20px);

    margin: 0 auto;

    background: #FFFADF;

    border: 2px solid #550000;

    border-radius: 13px;

    padding: 11px 9px 17px;
  }


  .topics-title {
    margin: 0 0 21px;

    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;

    color: #550000;

    white-space: nowrap;
  }


  /* =================================================
     MOBILE SLIDER
     ALWAYS 3 CIRCLES
  ================================================= */

  .topic-slider {
    padding: 0;
  }


  .topic-track-wrap {
    width: 100%;
    max-width: none;

    overflow: hidden;
  }


  .topic-track {
    gap: 8px;
  }


  .topic-track a {
    flex: 0 0 calc((100% - 16px) / 3);

    width: calc((100% - 16px) / 3);
  }


  .topic-track img {
    width: 100%;

    aspect-ratio: 1 / 1;

    border: 1.5px solid #550000;

    box-shadow: none;
  }


  /* absolutely no arrows */

  .topic-arrow,
  #topicPrev,
  #topicNext {
    display: none !important;
  }


  /* dots exactly under circles */

  .topic-dots {
    margin-top: 10px;
    gap: 9px;
  }


  .topic-dots span {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    background: #d1c9ae;
  }


  .topic-dots span.active {
    width: 7px;
    height: 7px;

    flex-basis: 7px;

    background: #550000;
  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 390px) {

  .gurukul-pillars {
    padding-left: 8px;
    padding-right: 8px;

    column-gap: 6px;
  }


  .item-large .pillar-image {
    max-width: 165px;
  }


  .item-small .pillar-image {
    max-width: 76px;
  }


  .topics-box {
    width: calc(100% - 16px);

    padding-left: 7px;
    padding-right: 7px;
  }


  .topics-title {
    font-size: 18px;
  }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media (max-width: 350px) {

  .item-large .pillar-image {
    max-width: 145px;
  }

  .item-small .pillar-image {
    max-width: 67px;
  }

  .topics-title {
    font-size: 16px;
  }

}/* =====================================================
SOCIAL CAMPAIGN FORM SECTION
===================================================== */

.alt{
    background:#fff9df;
    padding:20px 0 25px;
}

/* TITLE */

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

.section-title h2{
    margin:0;
    color:#7b0f0f;
    font-size:32px;
    font-weight:700;
}

/* =====================================================
SLIDER MAIN
===================================================== */

#formSlider{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
}

.topic-track-wrap{
    overflow:hidden;
    width:900px;
    max-width:100%;
}

#formTrack{
    display:flex;
    gap:22px;
    transition:transform .4s ease;
}

/* =====================================================
CARD
===================================================== */

#formTrack .form-card{
    flex:0 0 210px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    background:transparent;
}

/* TITLE ABOVE IMAGE */

#formTrack .label{
    order:1;
    color:#650707;
    font-size:15px;
    font-weight:700;
    text-align:center;
    margin-bottom:12px;
    min-height:20px;
}

/* IMAGE */

#formTrack img{
    order:2;
    width:210px;
    height:210px;
    object-fit:cover;
    border:2px solid #650707;
    border-radius:0;
    display:block;
}

/* =====================================================
ARROWS
===================================================== */

.topic-arrow{
    border:none;
    background:none;
    color:#710000;
    font-size:60px;
    cursor:pointer;
    padding:0 25px;
    line-height:1;
}

.topic-arrow:hover{
    color:#400000;
}

.topic-arrow:disabled{
    opacity:.25;
    cursor:default;
}

/* =====================================================
DOTS
===================================================== */

.topic-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:18px;
    width:100%;
}

.topic-dots span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#cfc19c;
    cursor:pointer;
}

.topic-dots span.active{
    background:#700000;
}

/* =====================================================
DESKTOP EXACT
===================================================== */

@media(min-width:1100px){

#formTrack .form-card{
    flex-basis:210px;
}

.topic-track-wrap{
    width:900px;
}

}

/* =====================================================
TABLET
===================================================== */

@media(max-width:1000px){

.topic-track-wrap{
    width:650px;
}

#formTrack .form-card{
    flex-basis:200px;
}

#formTrack img{
    width:200px;
    height:200px;
}

}

/* =====================================================
MOBILE EXACT FROM YOUR IMAGE
===================================================== */

@media(max-width:760px){

.alt{
    padding:15px 0 20px;
}

.section-title{
    margin-bottom:25px;
}

.section-title h2{
    font-size:25px;
}

/* only one card visible */

.topic-track-wrap{
    width:100%;
}

#formTrack{
    gap:0;
}

#formTrack .form-card{
    flex:0 0 100%;
}

/* title */

#formTrack .label{
    font-size:20px;
    margin-bottom:18px;
}

/* image */

#formTrack img{
    width:330px;
    height:330px;
    border:2px solid #650707;
}

/* remove arrows */

.topic-arrow{
    display:none;
}

}

/* =====================================================
SMALL MOBILE
===================================================== */

@media(max-width:480px){

.section-title h2{
    font-size:23px;
}

#formTrack .label{
    font-size:18px;
}

#formTrack img{
    width:290px;
    height:290px;
}

}


/* =========================================
   DHARM / AATMA / VISHWA / DHARMA PILLARS
========================================= */

.pillars-section {
  width: 100%;

  background: #550000;

  padding: 28px 20px;

  margin: 0;
}


.pillars-section .wrap {
  width: 100%;

  max-width: 900px;

  margin: 0 auto;
}


/* 4 ITEMS IN ONE ROW */
.pillars-section .pillars {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  align-items: start;

  justify-items: center;

  gap: 35px;
}


/* Individual Pillar */
.pillars-section .pillar {
  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  text-align: center;

  color: #ffffff;

  font-weight: 600;

  font-size: 16px;

  line-height: 1.4;
}


/* Circular Images */
.pillars-section .pillar img {
  width: 95px;

  height: 95px;

  object-fit: cover;

  border-radius: 50%;

  display: block;

  margin-bottom: 10px;
}


/* Text */
.pillars-section .pillar span {
  display: block;

  color: #ffffff;
}


/* =========================================
   MOBILE
   KEEP ALL 4 IN ONE ROW
========================================= */

@media (max-width: 768px) {

  .pillars-section {
    padding: 16px 8px;
  }


  .pillars-section .wrap {
    padding: 0;
  }


  .pillars-section .pillars {
    grid-template-columns: repeat(4, 1fr);

    gap: 6px;
  }


  .pillars-section .pillar {
    font-size: 13px;

    line-height: 1.35;
  }


  .pillars-section .pillar img {
    width: 70px;

    height: 70px;

    margin-bottom: 7px;
  }

}


/* =========================================
   SMALL MOBILE - 400px / 360px
========================================= */

@media (max-width: 420px) {

  .pillars-section {
    padding: 15px 6px;
  }


  .pillars-section .pillars {
    grid-template-columns: repeat(4, 1fr);

    gap: 4px;
  }


  .pillars-section .pillar img {
    width: 64px;

    height: 64px;
  }


  .pillars-section .pillar {
    font-size: 12px;
  }

}/* =====================================================
   COMING SOON — outer box keeps the maroon border
   ===================================================== */

/* Confirmed by pixel-sampling your reference screenshots.
   If your main stylesheet already defines --header-bg / --maroon-dark
   elsewhere with different values, that's your actual mismatch —
   make sure those two variables resolve to the values below. */
:root{
  --header-bg:#fff5ba;
  --maroon-dark:#550000;
}

.coming-soon-box{
  background:var(--header-bg);
  border:3px solid var(--maroon-dark);
  border-radius:14px;
  overflow:hidden;
  padding:0 28px 34px;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  margin-bottom:15px
}
.coming-soon-box > .ribbon-title{
  margin-left:-28px;
  margin-right:-28px;
  width:calc(100% + 56px);
  border-radius:0;
}
@media(max-width:600px){
  .coming-soon-box{padding:0 14px 22px;}
  .coming-soon-box > .ribbon-title{margin-left:-14px;margin-right:-14px;width:calc(100% + 28px);}
}

/* ---------- Coming Soon ribbon title ---------- */
.ribbon-title{
  background:var(--maroon-dark);
  color:#fff;
  text-align:center;
  font-size:2rem;
  font-weight:700;
  padding:18px 20px;
  margin-bottom:28px;
}
@media(max-width:760px){
  .ribbon-title{font-size:1.5rem;padding:14px 16px;margin-bottom:22px;}
}
@media(max-width:480px){
  .ribbon-title{font-size:1.25rem;padding:12px 14px;margin-bottom:18px;}
}

/* ---------- Circles wrapper ----------
   FIX: your screenshot shows this area blending seamlessly into the
   box background — no separate card, no box-shadow behind the circles.
   The old #f3ecdd background + shadow was the mismatch. */
.cs-circles-wrap{
  border-radius:14px;
  background:transparent;
  box-shadow:none;
  padding:20px 16px;
  margin:24px auto 0;
}
@media(max-width:600px){
  .cs-circles-wrap{padding:14px 10px;}
}

/* ---------- No border on the maha slider container ---------- */
.maha-slider-container{
  border:none;
  background:transparent;
  box-shadow:none;
  padding:0;
  margin:0 auto;
}

/* ---------- No border on the fade slider wrapper (Go-Vansh / KBC) ---------- */
.fade-slider{
  border:none;
  background:transparent;
  box-shadow:none;
  padding:0;
  margin:24px auto 0;
}

/* ---------- Circle Images ---------- */
.cs-circles {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 28px;
    width: 100%;
    margin: 0;
}

.cs-circle {
    flex: 0 1 auto;
    text-align: center;
}

.cs-circle img {
    display: block;
    width: 250px;
    height: 250px;
    object-fit: contain;
    transition: transform 0.25s ease;
}

.cs-circle:hover img {
    transform: translateY(-5px);
}

@media (max-width: 1000px) {
    .cs-circles { gap: 20px; }
    .cs-circle img { width: 200px; height: 200px; }
}

@media (max-width: 760px) {
    .cs-circles {
        flex-wrap: nowrap;
        gap: 10px;
        padding: 0 8px;
        box-sizing: border-box;
    }
    .cs-circle { width: calc((100% - 20px) / 3); }
    .cs-circle img {
        width: 100%;
        height: auto;
        max-width: 115px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .cs-circles {
        gap: 6px;
        padding: 0 6px;
    }
    .cs-circle { width: calc((100% - 12px) / 3); }
    .cs-circle img {
        width: 100%;
        max-width: 105px;
        height: auto;
    }
}

@media (max-width: 360px) {
    .cs-circles { gap: 4px; padding: 0 4px; }
    .cs-circle { width: calc((100% - 8px) / 3); }
    .cs-circle img { max-width: 92px; }
}

/* ---------- Dharma Ki Mahapariksha Title ----------
   FIX: reference screenshot shows this as small, regular-weight text,
   not a large 1.8rem bold heading. */
.maha-title {
    width: 100%;
    margin: 18px auto 16px;
    padding: 0;
    text-align: center;
    background: transparent;
}

.maha-title h2 {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent !important;
    color: var(--maroon-dark) !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

/* =====================================================
   SLIDER (Mahapariksha)
   ===================================================== */

.card-slider {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 45px;
    box-sizing: border-box;
}

.card-track-wrap {
    width: 100%;
    overflow: hidden;
}

.card-track {
    display: flex;
    gap: 36px;
    transition: transform .4s ease;
    align-items: flex-start;
}

.card-track img {
    flex: 0 0 300px;
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: none;
    display: block;
}

.card-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    padding: 0;
    background: transparent !important;
    color: var(--maroon-dark);
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
}

.card-arrow.prev { left: 5px; }
.card-arrow.next { right: 5px; }

.card-arrow:hover {
    background: transparent !important;
    color: var(--maroon);
}

.card-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
}

.card-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d8d0b8;
    border: none;
    cursor: pointer;
}

.card-dots span.active { background: var(--maroon); }

@media (max-width: 1000px) {
    .maha-title h2 { font-size: .95rem; }
    .maha-slider-container { max-width: 850px; }
    .card-slider { padding: 0 40px; }
    .card-track { gap: 22px; }
    .card-track img { flex-basis: 250px; width: 250px; height: 250px; }
}

@media (max-width: 760px) {
    .maha-title { margin-top: 14px; margin-bottom: 14px; padding: 0 10px; }
    .maha-title h2 { font-size: .9rem; line-height: 1.4; }
    .card-slider { padding: 0 35px; }
    .card-track { gap: 14px; }
    .card-track img { flex: 0 0 220px; width: 220px; height: 220px; border-radius: 8px; }
    .card-arrow { font-size: 2.4rem; }
    .card-arrow.prev { left: 3px; }
    .card-arrow.next { right: 3px; }
    .card-dots { margin-top: 14px; }
}

@media (max-width: 480px) {
    .maha-title { margin-bottom: 12px; }
    .maha-title h2 { font-size: .8rem; }
    .card-slider { padding: 0 28px; }
    .card-track { gap: 10px; }
    .card-track img { flex: 0 0 180px; width: 180px; height: 180px; }
    .card-arrow { font-size: 2.1rem; }
    .card-dots { margin-top: 12px; }
}

@media (max-width: 360px) {
    .maha-title h2 { font-size: .75rem; }
    .card-slider { padding: 0 25px; }
    .card-track img { flex: 0 0 160px; width: 160px; height: 160px; }
}

/* ---------- fade slider (Go-Vansh / KBC banners) ---------- */
.fade-slides-wrap{
  position:relative;
  width:100%;
  aspect-ratio:850/300;
  background:#f3ecdd;
  border-radius:10px;
  overflow:hidden;
}
.fade-slides{position:relative;width:100%;height:100%;border-radius:10px;overflow:hidden;}
.fade-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;}
.fade-slide.active{opacity:1;}
.fade-slide img{width:100%;height:100%;object-fit:cover;}
.fade-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  margin-top:18px;
}
.fade-dots span{width:7px;height:7px;border-radius:50%;background:#d8d0b8;border:none;cursor:pointer;}
.fade-dots span.active{background:var(--maroon);}
/* ================= CONTRIBUTIONS ================= */
/* contribute.css
   - .cause-grid--desktop : 9 rich cards, DESKTOP ONLY (>640px)
   - .cause-grid--mobile  : same 9 causes as poster tiles, MOBILE ONLY (<=640px)
   - .poster-grid         : the 6 campaign posters, shown on BOTH breakpoints,
                            caption below the poster is MOBILE ONLY

   Icon badges (.cause-icon) are now IMAGES, not SVGs — see .cause-icon img
   below for the circular-crop styling that replaces the old .cause-icon svg
   rule.
   ========================================================= */

:root{
  --maroon: #550000;
  --maroon-light: #7a1f1f;
  --cream: #fff8ec;
  --gold: #c9a227;
}
/* ================= CONTRIBUTE HERO BANNER ================= */
#contribute-hero{
  width: 100%;
  margin: 0;
  padding: 0;
}
#contribute-causes-heading{
  white-space: nowrap;
  font-size: 1.8rem;
  text-align: center;
  margin: 0;
}

@media (max-width: 600px){
  #contribute-causes-heading{
    font-size: 4.2vw; /* scales down with screen width so it always fits one line */
  }
}

@media (max-width: 400px){
  #contribute-causes-heading{
    font-size: 4vw;
  }
}

#contribute-hero-banner{
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* ================= DESKTOP / TABLET: rich cards ================= */
#cause-grid-desktop.cause-grid--desktop{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 10px;
}

#cause-grid-desktop .cause-card{
  background: var(--cream);
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(85, 0, 0, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}

#cause-grid-desktop .cause-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(85, 0, 0, .16);
}

/* Photo wrapper: crops the photo only. */
#cause-grid-desktop .cause-media-inner{
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

#cause-grid-desktop .cause-media-inner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Outer media wrapper: positioning context for the badge, deliberately
   left with overflow:visible so the badge can overlap the body below. */
#cause-grid-desktop .cause-media{
  position: relative;
  overflow: visible;
}

/* Icon badge — circular frame, now holding an <img> instead of an <svg>. */
#cause-grid-desktop .cause-icon{
  position: absolute;
  left: 24px;
  bottom: -26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
  border: 4px solid var(--cream);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
  z-index: 2;
}

#cause-grid-desktop .cause-icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#cause-grid-desktop .body{ padding: 40px 20px 24px; }
#cause-grid-desktop h3{ font-size: 1.25rem; color: var(--maroon); margin: 0 0 10px; }
#cause-grid-desktop p{
  font-size: .92rem; color: #5a4c3c; line-height: 1.5;
  min-height: 66px; margin: 0 0 18px;
}
#cause-grid-desktop .btn{
  display: block; background: var(--maroon); color: var(--cream);
  padding: 12px; border-radius: 8px; font-weight: 600;
  text-decoration: none; transition: background .15s ease;
}
#cause-grid-desktop .btn:hover{ background: var(--maroon-light); }

@media (max-width: 900px){
  #cause-grid-desktop.cause-grid--desktop{ grid-template-columns: repeat(2, 1fr); }
}

/* ================= MOBILE: poster grid (9 core causes) ================= */
#cause-grid-mobile.cause-grid--mobile{ display: none; } /* hidden on desktop */

@media (max-width: 640px){
  #cause-grid-desktop.cause-grid--desktop{ display: none; }  /* hide rich cards on mobile */

  #cause-grid-mobile.cause-grid--mobile{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 8px;
  }

  #cause-grid-mobile .cause-card{
    border: 2px solid var(--maroon);
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    background: var(--cream);
    text-decoration: none;
    display: block;
  }

  #cause-grid-mobile .cause-card img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
  }

  #cause-grid-mobile .cause-card h3{
    font-size: .74rem;
    line-height: 1.2;
    margin: 0;
    padding: 6px 4px;
    color: var(--maroon);
  }
}

@media (max-width: 380px){
  #cause-grid-mobile.cause-grid--mobile{ gap: 6px; }
  #cause-grid-mobile h3{ font-size: .68rem; }
}

/* ================= POSTER GRID: 6 campaign posters (mobile + desktop) ================= */
#poster-grid-campaigns.poster-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}

#poster-grid-campaigns .poster-card{
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--gold);
  background: var(--cream);
  text-decoration: none;
}

#poster-grid-campaigns .poster-card img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}

#poster-grid-campaigns .poster-card:hover img{ transform: scale(1.03); }

/* Caption below the poster - MOBILE ONLY. Hidden by default (desktop) since
   the poster image already has its title baked in. */
#poster-grid-campaigns .poster-title{
  display: none;
}

@media (max-width: 640px){
  #poster-grid-campaigns .poster-title{
    display: block;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    padding: 8px 6px;
    color: var(--maroon);
    text-align: center;
    background: var(--cream);
    border-top: 1px solid var(--gold);
  }
}

@media (max-width: 380px){
  #poster-grid-campaigns .poster-title{ font-size: .72rem; padding: 6px 4px; }
}

@media (min-width: 641px){
  #poster-grid-campaigns.poster-grid{ gap: 24px; margin-top: 28px; }
  #poster-grid-campaigns .poster-card{
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(85,0,0,.08);
    line-height: 0; /* no caption on desktop, so collapse any whitespace under the img */
  }
}

@media (max-width: 380px){
  #poster-grid-campaigns.poster-grid{ gap: 8px; }
}

/* ================= VALUES STRIP (dark maroon band, 4 icons) ================= */
#contribute-values-strip{
  background: var(--maroon);
  padding: 36px 0 56px;
  margin-bottom: 24px;
  margin-top: 10px;
}

.values-strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  text-align: center;
}

.value-item .value-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--cream);
  overflow: hidden;
  margin-bottom: 10px;
}

.value-item .value-icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.value-item p{
  color: var(--cream);
  font-size: .85rem;
  line-height: 1.3;
  margin: 0;
}

@media (max-width: 640px){
  .values-strip{ grid-template-columns: repeat(4, 1fr); gap: 1px; }
  .value-item .value-icon{ width: 60px; height: 60px; margin-bottom: 6px; }
  .value-item p{ font-size: .62rem; line-height: 1.15; padding: 0 2px; }
}

@media (max-width: 380px){
  .value-item .value-icon{ width: 50px; height: 50px; }
  .value-item p{ font-size: .56rem; }
}
/* generic placeholder page */
.placeholder-card{background:#fff;border:1px dashed var(--line);border-radius:10px;padding:36px 24px;text-align:center;max-width:640px;margin:0 auto;}
.placeholder-card h2{color:var(--maroon);}
.placeholder-card p{color:#6b5c4a;}

/* ---------- footer ---------- */
footer{background:#FFE3B5;color:var(--maroon);padding:50px 0 20px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px;}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{color:var(--maroon);font-size:.95rem;margin-bottom:14px;font-weight:600;}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid li{margin-bottom:8px;font-size:.88rem;}
.footer-grid a{color:var(--maroon);text-decoration:none;}
.footer-grid a:hover{color:var(--saffron);}
.footer-logo img{max-width:240px;margin-bottom:14px;}
.footer-tag{font-size:.85rem;opacity:.85;margin-bottom:16px;color:var(--maroon);font-weight:bold;}
.footer-bottom{
  background:var(--maroon);
  color:#fff;
  margin-top:36px;
  padding:16px 0;
  text-align:center;
  font-size:.8rem;
  opacity:1;
}
.footer-logo .btn,
.btn{
  color:#fff !important;
  background:var(--maroon);
  display:inline-block;
  padding:10px 22px;
  border-radius:6px;
  text-decoration:none;
  font-size:.85rem;
  font-weight:600;
}

.contact-list li{display:flex;align-items:flex-start;gap:9px;margin-bottom:10px;font-size:.88rem;color:var(--maroon);}
.contact-icon{flex:0 0 auto;margin-top:3px;color:var(--maroon);}

.scroll-top{
  position:fixed;bottom:24px;right:24px;background:var(--maroon);color:#fff;width:44px;height:44px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:opacity .2s ease;font-size:1.2rem;border:none;cursor:pointer;z-index:80;
}
.scroll-top.show{opacity:1;pointer-events:auto;}
.biz-banner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.biz-banner img{
  max-width: 100%;
}

.biz-banner .btn{
  display: inline-block;
  margin-bottom: 10px;
}

/* ---------- native "Ramji Ka Parivaar" registration form ---------- */
.gform-card{max-width:720px;text-align:left;}
.gform-card h2,.gform-card > p{text-align:center;}
.gform-card h2{font-size:1.4rem;}
.rp-sub{display:block;font-size:1rem;font-weight:400;color:#6b5c4a;margin-top:4px;}
.rp-form{margin-top:24px;}
.rp-row{margin-bottom:16px;}
.rp-row label{display:block;font-weight:600;margin-bottom:6px;color:var(--maroon-dark);font-size:.92rem;}
.rp-row input[type="text"],.rp-row input[type="email"],.rp-row input[type="tel"],.rp-row input[type="number"],.rp-row textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;
  font-family:inherit;font-size:.95rem;color:var(--ink);background:#fff;
}
.rp-row input:focus,.rp-row textarea:focus{outline:none;border-color:var(--maroon);}
.rp-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:520px){.rp-two{grid-template-columns:1fr;}}

.rp-fieldset{
  border:1px solid var(--line);border-radius:8px;padding:16px 18px;margin:0 0 18px;
  background:#fffdf8;
}
.rp-fieldset legend{
  font-weight:700;color:var(--maroon-dark);font-size:.94rem;padding:0 6px;white-space:normal;
}
.rp-radio,.rp-check{
  display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--ink);
  padding:5px 0;cursor:pointer;
}
.rp-radio input,.rp-check input[type="checkbox"]{width:16px;height:16px;flex:0 0 auto;}
.rp-other{flex-wrap:wrap;}
.rp-other-input{
  flex:1 1 160px;padding:6px 8px;border:1px solid var(--line);border-radius:5px;
  font-family:inherit;font-size:.9rem;margin-left:4px;
}
.rp-form .btn{width:100%;border:0;margin-top:6px;font-size:1rem;padding:14px 26px;}
.gform-card .btn.outline{display:inline-block;margin-top:16px;width:auto;}
.rp-msg{margin-top:10px;font-weight:600;font-size:.92rem;min-height:1.2em;}
.rp-msg-success{color:#1f7a3f;}
.rp-msg-error{color:#a12727;}

/* ---- Popup shown after form submit ---- */
.rp-popup-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  z-index:9999;
  align-items:center; justify-content:center;
  padding:20px;
}
.rp-popup-overlay.open{display:flex;}
.rp-popup-box{
  background:#fff;
  border-radius:14px;
  max-width:420px;
  width:100%;
  padding:32px 28px 26px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:rp-pop-in .18s ease-out;
}
@keyframes rp-pop-in{
  from{transform:scale(.9); opacity:0;}
  to{transform:scale(1); opacity:1;}
}
.rp-popup-icon{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
  font-size:28px; font-weight:700; color:#fff;
}

.rp-popup-box.success .rp-popup-icon{background:#1f7a3f;}
.rp-popup-box.error .rp-popup-icon{background:#a12727;}
.rp-popup-text{font-size:1rem; line-height:1.5; color:#222; margin-bottom:20px;}
.rp-popup-box .btn{width:100%;}

/* =====================================================
   UNIVERSAL TRANSLATOR WIDGET (Google Website Translator)
   "Select your Language : [flag] English ▾" — styled to sit
   inline inside the header row (not as a separate banner),
   matching the site's maroon/cream theme, on desktop AND mobile.
===================================================== */

/* Stop Google's translate banner ("Translated into / Show original /
   Options") from ever showing, and stop it pushing the page down.
   IMPORTANT: Google adds this as an ID (#goog-te-banner-frame), not a
   class — a class selector alone will never match it. */
body{ top: 0px !important; position: static !important; }
html{ top: 0 !important; }
#goog-te-banner-frame,
iframe.goog-te-banner-frame,
iframe#goog-te-banner-frame,
iframe[id*="banner-frame"],
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  position: absolute !important;
  top: -9999px !important;
}

/* ---- Outer wrapper: the label + the Google widget, sitting inline ---- */
.lang-widget{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.lang-label{
  color:var(--maroon-dark);
  font-weight:700;
  font-size:.82rem;
  white-space:nowrap;
}

/* Google mounts a .goog-te-gadget span inside our div — let it show,
   but strip its own font-size/branding link so only the dropdown shows */
#google_translate_element{
  display:inline-flex;
  align-items:center;
}
#google_translate_element .goog-te-gadget{
  font-family:"Noto Sans","Noto Sans Devanagari",Arial,sans-serif !important;
  font-size:0 !important; /* collapse Google's own surrounding text nodes */
  color:transparent !important;
  display:inline-flex;
  align-items:center;
}
/* Hide the little "powered by Google" link Google appends after the box */
#google_translate_element .goog-te-gadget > a,
#google_translate_element .goog-te-gadget > span > a{
  display:none !important;
}

/* ---- The actual clickable pill: [flag] English ▾ ---- */
#google_translate_element .goog-te-gadget-simple{
  background:#fff;
  border:1px solid var(--gold);
  border-radius:20px;
  padding:5px 12px;
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
#google_translate_element .goog-te-gadget-simple:hover{
  background:var(--cream);
  border-color:var(--maroon);
}

/* flag icon Google inserts */
#google_translate_element .goog-te-gadget-icon{
  margin:0 2px 0 0;
  vertical-align:middle;
}

/* "English" text + the ▾ arrow */
#google_translate_element .goog-te-menu-value{
  font-size:.85rem !important;
  font-weight:600;
}
#google_translate_element .goog-te-menu-value span{
  color:var(--maroon-dark) !important;
  font-size:.85rem !important;
}
#google_translate_element .goog-te-menu-value span:last-child{
  color:var(--gold) !important; /* the ▾ arrow, in accent gold */
  font-size:.7rem !important;
  margin-left:2px;
}

/* ---- Desktop placement: inline, right side of header, before hamburger ---- */
@media(min-width:901px){
  .lang-widget{ order:5; margin-left:4px; }
}

/* ---- Mobile: compact version so it fits next to the hamburger ---- */
@media(max-width:900px){
  .header-row{ flex-wrap:wrap; }
  .lang-widget{
    order:2;
    margin-left:auto;
    margin-right:6px;
  }
  .lang-label{
    display:none; /* "Select your Language :" text hidden on small screens to save space */
  }
  #google_translate_element .goog-te-gadget-simple{
    padding:4px 8px;
    border-radius:16px;
  }
  #google_translate_element .goog-te-menu-value span{
    font-size:.78rem !important;
  }
  .hamburger{ order:3; }
}

@media(max-width:420px){
  /* Very small screens: shrink further, keep flag + arrow visible, text can wrap if long */
  #google_translate_element .goog-te-gadget-simple{ padding:4px 6px; gap:4px; }
  #google_translate_element .goog-te-menu-value span{ font-size:.72rem !important; }
}

/* The popup list (flags + search) that opens on click is rendered by Google
   inside a cross-origin iframe (goog-te-menu-frame), so it always keeps
   Google's own styling — this can't be restyled from our CSS, only the
   closed "Select your Language" pill above can be themed. */