/* ========================================
   SRI GOLOK DHAM - CUSTOM STYLES
   ======================================== */

/* ========== VARIABLES ========== */
:root {
  --primary-green: #4a7c59;
  --dark-green: #2d5a3d;
  --light-green: #f5f9f6;
  --accent-orange: #e67e22;
  --text-dark: #333;
  --text-light: #666;
  --white: #fff;
}

/* ========== UTILITY CLASSES ========== */
.pt-80 { padding-top: 80px; }
.pb-80 { padding-bottom: 80px; }
.pt-120 { padding-top: 120px; }
.pb-120 { padding-bottom: 120px; }
.mb-50 { margin-bottom: 50px; }
.mt-50 { margin-top: 50px; }

.bg-light-green { background-color: var(--light-green); }
.bg-green { background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%); }
.text-white-50 { color: rgba(255, 255, 255, 0.6); }

/* ========== HEADER ENHANCEMENTS ========== */
.header-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #25d366;
  border-radius: 50%;
  color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.header-whatsapp-btn:hover {
  background: #128c7e;
  transform: scale(1.1);
  color: white;
}
.header-cta-btn {
  padding: 10px 25px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========== HERO SECTION ========== */
.hero-section {
  position: relative;
  display: flex;
  align-items: center;
  height: 100svh;
  min-height: 700px;
  max-height: 900px;
  padding: 120px 0 200px;
  overflow: hidden;
  background: #fbf0e6;
}
.hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hero-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    100deg,
    rgba(251, 240, 230, 0.97) 0%,
    rgba(251, 240, 230, 0.92) 28%,
    rgba(251, 240, 230, 0.55) 45%,
    rgba(251, 240, 230, 0) 60%
  );
}
.hero-section > .container,
.hero-section > .ina-container {
  position: relative;
  z-index: 3;
  width: 100%;
}
.hero-content {
  max-width: 690px;
  text-align: left;
  padding: 0;
  margin: 0;
}
.hero-title {
  font-family: "Syne", sans-serif;
  font-size: 4.2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #4a2c17;
  margin: 0 0 26px;
}
.hero-title .hero-title-accent {
  display: block;
  color: #e0651a;
  white-space: nowrap;
}
.hero-subtitle {
  font-family: "Syne", sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.8;
  color: #4a4038;
  max-width: 540px;
  margin: 0 0 36px;
}
.hero-buttons {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 26px;
}
.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 4px;
  font-family: "Syne", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.hero-btn svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.hero-btn-primary {
  background: #1f5c33;
  color: #fff;
  border: 1px solid #1f5c33;
}
.hero-btn-primary:hover {
  background: #164325;
  border-color: #164325;
  color: #fff;
}
.hero-btn-outline {
  background: rgba(255, 255, 255, 0.75);
  color: #4a2c17;
  border: 1px solid #e2b48d;
}
.hero-btn-outline svg {
  color: #e0651a;
}
.hero-btn-outline:hover {
  background: #fff;
  border-color: #e0651a;
  color: #4a2c17;
}
.hero-tagline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Syne", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  color: #4a4038;
  margin: 0;
}
.hero-tagline svg {
  width: 18px;
  height: 18px;
  color: #e0651a;
}

/* Hero feature strip */
.hero-features {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  z-index: 3;
}
.hero-features-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #f7edde;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(74, 44, 23, 0.12);
  padding: 30px 10px;
}
.hero-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 28px;
  border-right: 1px solid #e6d5bd;
}
.hero-feature:last-child {
  border-right: 0;
}
.hero-feature-icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0651a;
  border-radius: 50%;
  color: #a8461b;
}
.hero-feature-icon svg {
  width: 26px;
  height: 26px;
}
.hero-feature-text h3 {
  font-family: "Syne", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #3a2d20;
  margin: 4px 0 6px;
}

@media (max-width: 1199px) {
  .hero-title { font-size: 3.4rem; }
  .hero-section { height: auto; min-height: 700px; max-height: none; padding-bottom: 260px; }
  .hero-feature { padding: 0 18px; gap: 12px; }
  .hero-feature-icon { width: 46px; height: 46px; }
  .hero-feature-icon svg { width: 22px; height: 22px; }
  .hero-feature-text h3 { font-size: 0.98rem; }
  }

@media (max-width: 991px) {
  .hero-section { display: block; height: auto; min-height: 600px; max-height: none; padding: 100px 0 60px; }
  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(251, 240, 230, 0.96) 0%,
      rgba(251, 240, 230, 0.9) 55%,
      rgba(251, 240, 230, 0.55) 100%
    );
  }
  .hero-content { max-width: 100%; }
  .hero-title { font-size: 2.8rem; }
  .hero-features {
    position: static;
    margin-top: 50px;
  }
  .hero-features-card {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 0;
  }
  .hero-feature:nth-child(2n) { border-right: 0; }
}

@media (max-width: 575px) {
  .hero-section { min-height: auto; padding: 50px 0 40px; }
  .hero-title { font-size: 2.1rem; }
  .hero-title .hero-title-accent { white-space: normal; }
  .hero-subtitle { font-size: 1rem; }  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-btn { width: 100%; }
  .hero-features-card { grid-template-columns: 1fr; }
  .hero-feature { border-right: 0; padding: 0 20px; }
}

/* ========== PURCHASE SEVA SECTION ========== */
.purchase-seva-section {
  background: linear-gradient(180deg, #fff 0%, var(--light-green) 100%);
}
.section-subtitle-large {
  font-size: 1.5rem;
  color: var(--primary-green);
  font-weight: 600;
  margin-bottom: 20px;
}
.section-description {
  font-size: 1.1rem;
  color: var(--text-light);
  max-width: 65ch;
  margin: 0 auto;
  line-height: 1.8;
}

/* ========== WHO WE ARE SECTION ========== */
.who-we-are-image img {
  border-radius: 15px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.who-we-are-content {
  padding-left: 40px;
}
.who-we-are-content p {
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 15px;
}
.ina_button_text {
  display: inline-block;
  color: var(--primary-green);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.ina_button_text:hover {
  color: var(--dark-green);
  transform: translateX(5px);
}

@media (max-width: 992px) {
  .who-we-are-content {
    padding-left: 0;
    padding-top: 30px;
  }
}

/* ========== LIFE AT GAUSHALA SECTION ========== */
.gaushala-photo-card {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.gaushala-photo-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.gaushala-photo-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.photo-caption {
  padding: 15px;
  text-align: center;
  font-weight: 600;
  color: var(--text-dark);
  background: white;
  margin: 0;
}

/* ========== WHY DESI COWS SECTION ========== */
.desi-cow-card {
  background: white;
  padding: 40px 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  height: 100%;
}
.desi-cow-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.desi-cow-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}
.desi-cow-card h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 15px;
}
.desi-cow-card p {
  color: var(--text-light);
  line-height: 1.7;
}

/* ========== PRODUCTS SECTION ========== */
.product-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  height: 100%;
}
.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.product-image {
  width: 100%;
  height: 200px;
  background: var(--light-green);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-content {
  padding: 25px;
  text-align: center;
}
.product-content h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.product-content p {
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: 20px;
}
.product-content .btn-sm {
  padding: 10px 20px !important;
  font-size: 0.85rem;
}

/* ========== BUYING IMPACT SECTION ========== */
.buying-impact-section h2 {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.4;
}
.impact-item {
  padding: 30px;
}
.impact-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 20px;
}
.impact-item h4 {
  font-size: 1.1rem;
  font-weight: 500;
  color: white;
}

/* ========== HOW IT WORKS SECTION ========== */
.how-it-works-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 500px;
  margin: 0 auto;
}
.flow-step {
  background: white;
  padding: 25px 40px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
  width: 100%;
}
.flow-number {
  width: 40px;
  height: 40px;
  background: var(--primary-green);
  color: white;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 15px;
}
.flow-step h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-dark);
}
.flow-arrow {
  font-size: 2rem;
  color: var(--primary-green);
  padding: 10px 0;
}
.flow-final {
  background: var(--primary-green);
  color: white;
  padding: 25px 40px;
  border-radius: 15px;
  width: 100%;
  text-align: center;
}
.flow-final h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

/* ========== MEET COWS SECTION ========== */
.cow-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  height: 100%;
}
.cow-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.cow-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.cow-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.cow-card:hover .cow-image img {
  transform: scale(1.1);
}
.cow-content {
  padding: 20px;
}
.cow-content h4 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 5px;
}
.cow-info {
  color: var(--primary-green);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.cow-story {
  color: var(--text-light);
  font-size: 0.9rem;
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 15px;
}

/* ========== GO-SEVA OPPORTUNITIES SECTION ========== */
.seva-opportunity-card {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  height: 100%;
  border-left: 4px solid var(--primary-green);
}
.seva-opportunity-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.seva-number {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-green);
  margin-bottom: 15px;
}
.seva-opportunity-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.seva-opportunity-card p {
  color: var(--text-light);
  font-size: 0.95rem;
  margin-bottom: 15px;
}

/* ========== OUR IMPACT SECTION ========== */
.impact-stat {
  padding: 20px;
}
.impact-number {
  font-size: 3rem;
  font-weight: 700;
  color: white;
  margin-bottom: 10px;
}
.impact-stat p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
}

/* ========== STORIES SECTION ========== */
.story-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  height: 100%;
}
.story-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.story-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.story-card:hover .story-image img {
  transform: scale(1.1);
}
.story-content {
  padding: 25px;
}
.story-content h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 15px;
  line-height: 1.5;
}

/* ========== TESTIMONIALS SECTION ========== */
.testimonials-section .ina_testimonials-content p {
  font-size: 1rem;
  line-height: 1.8;
}

/* ========== VISIT SECTION ========== */
.visit-content {
  padding-right: 40px;
}
.visit-details {
  margin: 25px 0;
}
.visit-details li {
  padding: 10px 0;
  font-size: 1rem;
  color: var(--text-light);
}
.visit-details li strong {
  color: var(--text-dark);
}
.visit-image img {
  border-radius: 15px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.visit-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

@media (max-width: 992px) {
  .visit-content {
    padding-right: 0;
    margin-bottom: 40px;
  }
}

/* ========== FINAL CTA SECTION ========== */
.final-cta-section {
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
}
.cta-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 15px;
}
.cta-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
}
.cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

@media (max-width: 768px) {
  .cta-title {
    font-size: 1.75rem;
  }
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  .cta-buttons .ina_button {
    margin: 5px 0 !important;
  }
}

/* ========== FLOATING WHATSAPP BUTTON ========== */
.whatsapp-floating-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 65px;
  height: 65px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.25);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 999;
}
/* the pulse rides on opacity of a ring, not on the button's own box-shadow —
   opacity composites, box-shadow repaints on every frame */
.whatsapp-floating-btn::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.5);
  opacity: 0;
  pointer-events: none;
  animation: pulse-whatsapp 2.4s ease-out infinite;
}
.whatsapp-floating-btn svg {
  width: 40px;
  height: 40px;
}
.whatsapp-floating-btn:hover {
  transform: translateY(-5px) scale(1.15);
  box-shadow: 0 12px 35px rgba(37, 211, 102, 0.35);
  text-decoration: none;
}
.whatsapp-tooltip {
  position: absolute;
  right: 80px;
  background: #25d366;
  color: white;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.whatsapp-floating-btn:hover .whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
  right: 75px;
}

@keyframes pulse-whatsapp {
  0%   { opacity: 0.65; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.35); }
  100% { opacity: 0;    transform: scale(1.35); }
}

@media (max-width: 768px) {
  .whatsapp-floating-btn {
    bottom: 20px;
    right: 20px;
    width: 55px;
    height: 55px;
  }
  .whatsapp-floating-btn svg {
    width: 34px;
    height: 34px;
  }
  .whatsapp-tooltip {
    display: none;
  }
}

/* ========== PAGE HERO (for inner pages) ========== */
.page-hero {
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
  padding: 120px 0 80px;
  text-align: center;
}
.page-hero h1 {
  color: white;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 15px;
}
.page-hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

/* ========== CONTACT FORM ENHANCEMENTS ========== */
.contact-form .form-group select.form-control {
  height: 50px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}

/* ========== FOOTER ENHANCEMENTS ========== */
.ina_social-footer li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.ina_social-footer li a:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}

/* ========== GO-SEVA PAGE STYLES ========== */
.seva-types-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}
/* every card the same fixed width; a short final row centres */
.seva-types-grid > .seva-type-card {
  flex: 0 0 calc((100% - 60px) / 3);
  max-width: calc((100% - 60px) / 3);
}
@media (max-width: 991px) {
  .seva-types-grid > .seva-type-card {
    flex-basis: calc((100% - 30px) / 2);
    max-width: calc((100% - 30px) / 2);
  }
}
@media (max-width: 575px) {
  .seva-types-grid > .seva-type-card {
    flex-basis: 100%;
    max-width: 100%;
  }
}
.seva-type-card {
  background: white;
  padding: 40px 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  border-top: 4px solid var(--primary-green);
}
.seva-type-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.seva-type-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-green);
  margin-bottom: 15px;
}
.seva-type-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 15px;
}
.seva-type-card p {
  color: var(--text-light);
  line-height: 1.7;
}

/* ========== SHOP PAGE STYLES ========== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
.shop-product-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.shop-product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.shop-product-image {
  height: 290px;
  background: var(--light-green);
  overflow: hidden;
}
.shop-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.shop-product-card:hover .shop-product-image img {
  transform: scale(1.1);
}
.shop-product-content {
  padding: 25px;
}
.shop-product-content h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.shop-product-content .product-desc {
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: 15px;
}
.shop-product-content .product-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-green);
  margin-bottom: 15px;
}
.product-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.product-buttons .btn {
  flex: 1;
  min-width: 100px;
}

/* ========== FAQ PAGE STYLES ========== */
.faq-section .accordion-item {
  border: none;
  margin-bottom: 15px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.faq-section .accordion-button {
  font-weight: 600;
  padding: 20px 25px;
  background: white;
}
.faq-section .accordion-button:not(.collapsed) {
  background: var(--light-green);
  color: var(--primary-green);
}
.faq-section .accordion-body {
  padding: 20px 25px;
  color: var(--text-light);
  line-height: 1.8;
}

/* ========== VOLUNTEER PAGE STYLES ========== */
.volunteer-activities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.volunteer-activity {
  background: white;
  padding: 25px 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.volunteer-activity:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.volunteer-activity-icon {
  font-size: 2rem;
  margin-bottom: 15px;
}
.volunteer-activity h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
}

/* ========== VISIT US PAGE STYLES ========== */
.visit-info-card {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
}
.visit-info-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-green);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.visit-info-card p {
  color: var(--text-dark);
  font-size: 1.1rem;
  margin: 0;
}
.visit-activities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}
.visit-activity {
  background: var(--light-green);
  padding: 25px 20px;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.visit-activity:hover {
  background: var(--primary-green);
  color: white;
}
.visit-activity:hover h4 {
  color: white;
}
.visit-activity-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}
.visit-activity h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

/* ========== PURCHASE SUPPORTS GO-SEVA BANNER ========== */
.purchase-supports-banner {
  background: linear-gradient(135deg, var(--light-green) 0%, #e8f5e9 100%);
  padding: 40px;
  border-radius: 15px;
  text-align: center;
  margin-top: 40px;
}
.purchase-supports-banner h3 {
  color: #ef6c17;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.purchase-supports-banner p {
  color: var(--text-light);
  margin-bottom: 20px;
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */
@media (max-width: 576px) {
  .section-title {
    font-size: 1.75rem;
  }
  .pt-80 { padding-top: 50px; }
  .pb-80 { padding-bottom: 50px; }
  
  .desi-cow-card,
  .seva-opportunity-card,
  .seva-type-card {
    padding: 25px 20px;
  }
}

/* ========================================
   COMPACT SCALE — tighter type + sections fit one viewport
   ======================================== */

/* ---- Navbar CTA ---- */
.header-cta-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 22px !important;
  border-radius: 4px;
  font-size: 0.82rem !important;
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
}
.header-cta-btn svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}
.header-cta-btn span {
  line-height: 1;
  white-space: nowrap;
}
.header-whatsapp-btn {
  width: 38px;
  height: 38px;
}

/* ---- Global type scale ---- */
.pt-80 { padding-top: 56px; }
.pb-80 { padding-bottom: 56px; }
.pt-120 { padding-top: 80px; }
.pb-120 { padding-bottom: 80px; }
.mb-50 { margin-bottom: 30px; }
.mt-50 { margin-top: 30px; }

.section-title,
.title-section .section-title {
  font-size: 1.95rem;
  line-height: 1.25;
  margin-bottom: 0;
}
.section-tagline {
  font-size: 0.78rem;
  letter-spacing: 1.6px;
}
.section-subtitle-large {
  font-size: 1.15rem;
  margin-bottom: 12px;
}
.section-description {
  font-size: 0.97rem;
  line-height: 1.7;
  max-width: 65ch;
}

/* ---- Hero ---- */
.hero-section {
  min-height: 0;
  padding: 60px 0 190px;
}
.hero-title { font-size: 3.2rem; margin-bottom: 20px; }.hero-subtitle { font-size: 1rem; line-height: 1.7; max-width: 500px; margin-bottom: 26px; }
.hero-buttons { margin-bottom: 20px; gap: 14px; }
.hero-btn { padding: 14px 26px; font-size: 0.85rem; }
.hero-btn svg { width: 19px; height: 19px; }
.hero-tagline { font-size: 0.92rem; }
.hero-features { bottom: 28px; }
.hero-features-card { padding: 22px 6px; }
.hero-feature { padding: 0 20px; gap: 13px; }
.hero-feature-icon { width: 46px; height: 46px; }
.hero-feature-icon svg { width: 22px; height: 22px; }
.hero-feature-text h3 { font-size: 0.95rem; margin: 2px 0 4px; }

/* ---- Who we are ---- */
.who-we-are-content { padding-left: 30px; }
.who-we-are-content p { font-size: 0.95rem; line-height: 1.7; margin-bottom: 10px; }
.who-we-are-image img { max-height: 420px; width: 100%; object-fit: cover; }

/* ---- Life at gaushala ---- */
.gaushala-photo-card img { height: 168px; }
.photo-caption { padding: 11px; font-size: 0.92rem; }

/* ---- Why desi cows ---- */
.desi-cow-card { padding: 26px 22px; }
.desi-cow-icon { font-size: 2.2rem; margin-bottom: 12px; }
.desi-cow-card h4 { font-size: 1.08rem; margin-bottom: 9px; }
.desi-cow-card p { font-size: 0.9rem; line-height: 1.6; }

/* ---- Products ---- */
.product-image { height: 250px; }
.product-content { padding: 16px; }
.product-content h4 { font-size: 1rem; margin-bottom: 7px; }
.product-content p { font-size: 0.85rem; margin-bottom: 13px; }

/* ---- Buying impact ---- */
.impact-item { padding: 18px; }
.impact-icon { font-size: 2.2rem; margin-bottom: 12px; }
.impact-item h4 { font-size: 1rem; }

/* ---- How it works: horizontal flow on desktop ---- */
.flow-step { padding: 18px 16px; }
.flow-number { width: 34px; height: 34px; margin-bottom: 10px; font-size: 0.95rem; }
.flow-final { padding: 18px 16px; }


/* ---- Meet the cows ---- */
.cow-image { height: 150px; }
.cow-content { padding: 15px; }
.cow-content h4 { font-size: 1.05rem; }
.cow-info { font-size: 0.8rem; margin-bottom: 7px; }
.cow-story { font-size: 0.85rem; line-height: 1.5; margin-bottom: 10px; }

/* ---- Go-Seva opportunities ---- */
.seva-opportunity-card { padding: 22px; }
.seva-number { font-size: 1.25rem; margin-bottom: 10px; }
.seva-opportunity-card h4 { font-size: 1.02rem; margin-bottom: 7px; }
.seva-opportunity-card p { font-size: 0.88rem; margin-bottom: 10px; }

/* ---- Our impact ---- */
.impact-stat { padding: 12px; }
.impact-number { font-size: 2.3rem; margin-bottom: 6px; }
.impact-stat p { font-size: 0.92rem; }

/* ---- Stories ---- */
.story-image { height: 150px; }
.story-content { padding: 16px; }
.story-content h4 { font-size: 0.95rem; margin-bottom: 10px; line-height: 1.45; }

/* ---- Testimonials ---- */
.testimonials-section .ina_testimonials-content p { font-size: 0.93rem; line-height: 1.7; }

/* ---- Visit ---- */
.visit-content { padding-right: 30px; }
.visit-details { margin: 18px 0; }
.visit-details li { padding: 7px 0; font-size: 0.93rem; }
.visit-image img { max-height: 400px; width: 100%; object-fit: cover; }

/* ---- Final CTA ---- */
.cta-title { font-size: 2rem; margin-bottom: 12px; }
.cta-subtitle { font-size: 1.05rem; }

/* ---- Buttons everywhere ---- */
.ina_button { padding: 14px 32px; font-size: 0.88rem; }
.ina_button_text { font-size: 0.88rem; }

@media (max-width: 991px) {
  .hero-section { padding: 56px 0 36px; }
  .hero-title { font-size: 2.6rem; }
  .header-cta-btn { height: 42px; padding: 0 16px !important; font-size: 0.76rem !important; }
}

/* ---- Extra tightening for short viewports (<= ~720px tall screens) ---- */
.pt-80 { padding-top: 48px; }
.pb-80 { padding-bottom: 48px; }
.mb-50 { margin-bottom: 24px; }

.cow-image { height: 122px; }
.cow-content { padding: 12px; }
.cow-content h4 { font-size: 1rem; margin-bottom: 3px; }
.cow-story {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.meet-cows-section .mb-4 { margin-bottom: 16px !important; }

.story-image { height: 132px; }
.story-content { padding: 14px; }
.story-content h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.stories-section .mb-4 { margin-bottom: 16px !important; }
.life-at-gaushala-section .mb-4 { margin-bottom: 16px !important; }
.go-seva-opportunities-section .mb-4 { margin-bottom: 16px !important; }
.gaushala-photo-card img { height: 152px; }

/* ---- Grid-heavy sections: final fit pass ---- */
.meet-cows-section,
.stories-section {
  padding-top: 40px;
  padding-bottom: 40px;
}
.meet-cows-section .title-section,
.stories-section .title-section {
  margin-bottom: 18px !important;
}
.cow-image { height: 104px; }
.cow-content { padding: 11px; }
.cow-info { margin-bottom: 5px; }
.story-image { height: 118px; }
.story-content { padding: 12px; }

/* ---- Type scale: nav, headings, footer ---- */
.section-title,
.title-section .section-title { font-size: 1.8rem; }
.ina-main-menu .nav-link,
.ina-main-menu .nav-link span,
.ina-main-menu .dropdown-item,
.ina-main-menu .dropdown-item span { font-size: 0.94rem; }
footer p,
footer li,
footer li a,
footer .ina_footer-text { font-size: 0.93rem; line-height: 1.65; }
.cta-title { font-size: 1.9rem; }

/* ========================================
   CTA BUTTON SYSTEM — orange gradient, site-wide
   ======================================== */
.ina_button_green,
.hero-btn-primary,
.header-cta-btn,
.ina_button_dark {
  background: linear-gradient(135deg, #f79438 0%, #ef6c17 45%, #d2570b 100%);
  border: 1px solid #c9540a;
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(210, 87, 11, 0.24);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.ina_button_green span,
.hero-btn-primary span,
.header-cta-btn span {
  color: #fff;
}
.ina_button_green:hover,
.hero-btn-primary:hover,
.header-cta-btn:hover,
.ina_button_dark:hover {
  background: linear-gradient(135deg, #ffa249 0%, #f57a22 45%, #e0620e 100%);
  border-color: #e0620e;
  box-shadow: 0 10px 22px rgba(210, 87, 11, 0.32);
  transform: translateY(-2px);
  color: #fff;
}
.ina_button_green:active,
.hero-btn-primary:active,
.header-cta-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(210, 87, 11, 0.28);
}
/* icon + label sit on one line in every CTA */
.ina_button_green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}
.ina_button_green .fi { color: #fff; margin: 0; }
.ina_button_green.btn-sm {
  padding: 10px 20px;
  font-size: 0.78rem;
  letter-spacing: 0.8px;
}
/* light button reads as the secondary next to the gradient */
.ina_button_light {
  border-radius: 6px;
  border: 1px solid #cfd9c8;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}

/* ========================================
   SECTION: YOUR PURCHASE CAN BECOME SEVA
   ======================================== */
.purchase-seva-section {
  background: transparent;
}
.seva-intro {
  max-width: 900px;
  margin: 0 auto;
}





.seva-title {
  font-family: "Jost", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1d1d1d;
  margin: 0 0 14px;
}
.text-accent-orange { color: #ef6c17; }
.text-accent-green { color: #3f7d3f; }
.seva-lead {
  font-family: "Jost", sans-serif;
  font-size: 1.18rem;
  font-weight: 600;
  color: #3f7d3f;
  margin: 0 0 18px;
}



.seva-description {
  font-size: 1rem;
  line-height: 1.85;
  color: #4d4d4d;
  max-width: 800px;
  margin: 0 auto;
}
.seva-value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 44px;
}
.seva-value-card {
  text-align: center;
  padding: 28px 22px;
  border: 1.5px solid rgba(60, 90, 55, 0.18);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(45, 80, 45, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.seva-value-card:hover {
  transform: translateY(-5px);
  border-color: rgba(60, 90, 55, 0.35);
  box-shadow: 0 14px 28px rgba(45, 80, 45, 0.12);
}
.seva-value-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf2e6;
  color: #3f7d3f;
  margin-bottom: 18px;
}
.seva-value-icon .fi { font-size: 27px; }
.seva-value-card h3 {
  font-family: "Jost", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #3f7d3f;
  margin: 0 0 10px;
}

.seva-value-card p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: #5b5b5b;
  margin: 0;
}

/* ========================================
   SECTION: WHO WE ARE
   ======================================== */
.who-we-are-section {
  background: transparent;
}
.who-we-are-image img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 22px 50px rgba(30, 50, 30, 0.22);
}
.who-we-are-content {
  padding-left: 46px;
}
.eyebrow-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Jost", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: #3f7d3f;
  margin-bottom: 14px;
}

.who-we-are-title {
  font-family: "Lora", serif;
  font-size: 2.7rem;
  font-weight: 600;
  line-height: 1.18;
  color: #1a1a1a;
  margin: 0 0 18px;
}





.who-points {
  margin: 0 0 30px;
  padding: 0;
}
.who-point {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px dashed #d5e0d0;
}
.who-point:last-child { border-bottom: 0; }
.who-point-icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef4ea;
  color: #4a7c59;
}
.who-point-icon .fi { font-size: 24px; }
.who-point p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.75;
  color: #3d3d3d;
}

@media (max-width: 991px) {
  .seva-value-grid { grid-template-columns: repeat(2, 1fr); }
  .who-we-are-content { padding-left: 0; padding-top: 34px; }
  .seva-title { font-size: 2rem; }
  .who-we-are-title { font-size: 2.1rem; }
}
@media (max-width: 575px) {
  .seva-value-grid { grid-template-columns: 1fr; }

  .seva-title { font-size: 1.7rem; }
  .who-we-are-title { font-size: 1.7rem; }

}

/* ========================================
   HERO — no image gradient, white banner icons
   ======================================== */
.hero-overlay { display: none; }
.hero-section > .container { position: relative; z-index: 3; }
@media (max-width: 991px) {
  .hero-overlay { display: none; }
}

/* ========================================
   SECTION: LIFE AT SRI GOLOK DHAM (daily care)
   ======================================== */
.life-at-gaushala-section {
  background: transparent;
}
.daily-care-head {
  max-width: 820px;
  margin: 0 auto 34px;
}
.daily-care-eyebrow {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: #3f7d3f;
  margin: 14px 0 6px;
}
.daily-care-title {
  font-family: "Lora", serif;
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1.15;
  color: #1a1a1a;
  margin: 0;
}



.daily-care-subtitle {
  font-size: 1rem;
  line-height: 1.75;
  color: #4d4d4d;
  margin: 0;
}

.daily-care-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.care-card {
  background: #fff;
  border: 1px solid rgba(60, 90, 55, 0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(40, 60, 38, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.care-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(40, 60, 38, 0.13);
}
.care-card-media {
  width: 100%;
  height: 178px;
  overflow: hidden;
}
.care-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.care-card:hover .care-card-media img {
  transform: scale(1.05);
}
.care-card-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
}
.care-card-icon {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9f1e4;
  color: #3f7d3f;
}
.care-card-icon .fi { font-size: 23px; }
.care-card-text h3 {
  font-family: "Jost", sans-serif;
  font-size: 1.06rem;
  font-weight: 700;
  color: #1f1f1f;
  margin: 2px 0 6px;
}
.care-card-text p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #5c5c5c;
  margin: 0;
}

@media (max-width: 991px) {
  .daily-care-grid { grid-template-columns: repeat(2, 1fr); }
  .daily-care-title { font-size: 2.1rem; }
}
@media (max-width: 575px) {
  .daily-care-grid { grid-template-columns: 1fr; }
  .daily-care-title { font-size: 1.7rem; }
  .daily-care-subtitle br { display: none; }
  .care-card-media { height: 190px; }
}

/* daily care: keep the two rows inside one desktop viewport */
.daily-care-head { margin-bottom: 26px; }


.daily-care-eyebrow { margin: 10px 0 4px; }
.daily-care-title { font-size: 2.4rem; }

.daily-care-subtitle { font-size: 0.96rem; line-height: 1.65; }
.care-card-media { height: 156px; }
.care-card-body { padding: 15px 16px; gap: 14px; }
.care-card-icon { width: 46px; height: 46px; }
.care-card-icon .fi { font-size: 21px; }
.care-card-text h3 { font-size: 1rem; margin: 0 0 5px; }
.care-card-text p { font-size: 0.88rem; line-height: 1.55; }
.daily-care-grid { gap: 18px; }

/* narrower care cards */
.daily-care-grid {
  max-width: 1120px;
  margin: 0 auto;
}

/* ========================================
   SECTION: WHY DESI COWS MATTER (our belief)
   ======================================== */
.why-desi-cows-section {
  position: relative;
  background-color: transparent;
  background-image: url("../../images/ourbelief_bg.png");
  /* the artwork carries corner leaves AND a green band at its bottom edge, so
     stretch to the box instead of cropping either of them away */
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  /* keeps the box near the artwork's own 16:9 so the stretch stays unnoticeable */
  min-height: 760px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 90px;
}
.belief-head {
  max-width: 860px;
  margin: 0 auto 34px;
}
.belief-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Jost", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 3.2px;
  color: #3f7d3f;
  margin-bottom: 8px;
}
.belief-eyebrow .fi { font-size: 15px; color: #6ba05f; }
.belief-title {
  font-family: "Lora", serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.15;
  color: #1a1a1a;
  margin: 0;
}
.belief-subtitle {
  font-size: 1rem;
  line-height: 1.75;
  color: #4f5b4a;
  margin: 0;
}
.belief-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1180px;
  margin: 0 auto;
}
.belief-card {
  position: relative;
  text-align: center;
  padding: 34px 28px 26px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(45, 70, 40, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.belief-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(45, 70, 40, 0.16);
}
.belief-card-icon {
  width: 86px;
  height: 86px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(160deg, #f2f7ec 0%, #e2ecd8 100%);
  color: #3f7d3f;
  box-shadow: 0 8px 18px rgba(63, 125, 63, 0.14);
  margin-bottom: 20px;
}
.belief-card-icon .fi { font-size: 40px; }
.belief-card h3 {
  font-family: "Lora", serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #2f6b2f;
  margin: 0 0 10px;
}

.belief-card p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #5d6a58;
  margin: 0 0 22px;
}
.belief-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}


.belief-card-number {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #2f6b2f;
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
}

@media (max-width: 991px) {
  .belief-grid { grid-template-columns: 1fr; max-width: 520px; }
  .belief-title { font-size: 2.2rem; }
}
@media (max-width: 575px) {
  .belief-title { font-size: 1.8rem; }
  .belief-subtitle br { display: none; }
  .belief-card { padding: 28px 22px 22px; }
  .belief-card-icon { width: 74px; height: 74px; }
  .belief-card-icon .fi { font-size: 34px; }
}

/* ========================================
   HEADINGS — accent is orange (secondary), never green
   ======================================== */
.text-accent-green,
.belief-card h3,
.seva-value-card h3,
.who-we-are-title .text-accent-green,
.daily-care-title .text-accent-green,
.belief-title .text-accent-green {
  color: #ef6c17;
}
/* labels above the headings follow the same accent */
.section-tagline,
.eyebrow-label,
.daily-care-eyebrow,
.belief-eyebrow {
  color: #ef6c17;
}
.belief-eyebrow .fi { color: #f28c46; }
.seva-lead { color: #ef6c17; }
.title-section .section-tagline { color: #ef6c17; }
.bg-green .title-section .section-tagline,
.bg-green .section-tagline,
.buying-impact-section .section-tagline,
.our-impact-section .section-tagline { color: rgba(255, 255, 255, 0.7); }

/* ========================================
   TYPOGRAPHY — back to the theme's own fonts
   (Syne for headings/labels/buttons, Lora for body copy)
   ======================================== */
.hero-title,
.seva-title,
.who-we-are-title,
.daily-care-title,
.belief-title,
.cta-title,
.belief-card h3,
.seva-value-card h3,
.care-card-text h3 {
  font-family: "Syne", sans-serif;
}
.hero-btn,
.header-phone-label,
.belief-eyebrow,
.daily-care-eyebrow,
.eyebrow-label,
.section-tagline {
  font-family: "Syne", sans-serif;
}
.hero-subtitle,
.hero-tagline,
.seva-lead,
.seva-description,
.seva-value-card p,
.daily-care-subtitle,
.care-card-text p,
.belief-subtitle,
.belief-card p,
.who-point p,
.belief-card-number {
  font-family: "Lora", sans-serif;
}
.hero-feature-text h3 { font-family: "Syne", sans-serif; }

/* belief background: stretching a 16:9 artwork into a tall phone box would smear
   the leaves, so crop from the top instead and re-create the green band below */
@media (max-width: 991px) {
  .why-desi-cows-section {
    min-height: 0;
    background-size: cover;
    background-position: center top;
    padding-bottom: 100px;
  }
  .why-desi-cows-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 54px;
    background: #405f2c;
  }
  .why-desi-cows-section > .container { position: relative; z-index: 2; }
}

/* ---- Meet the Gau Mata: auto-playing carousel ---- */
.cows-swiper {
  padding-bottom: 44px;
}
.cows-swiper .swiper-slide {
  height: auto;
  display: flex;
}
.cows-swiper .cow-card {
  width: 100%;
}
.cow-image { height: 230px; }
.cows-swiper-pagination.swiper-pagination {
  bottom: 0;
}
.cows-swiper-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: #9bb894;
  opacity: 0.6;
}
.cows-swiper-pagination .swiper-pagination-bullet-active {
  background: #2b6127;
  opacity: 1;
  width: 24px;
  border-radius: 5px;
}

/* ========================================
   SECTION: FROM YOUR PURCHASE TO GO-SEVA (flow)
   ======================================== */
.how-it-works-section { background: transparent; }
.flow-head { margin-bottom: 34px; }
.flow-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Syne", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2.6px;
  color: #ef6c17;
  margin-bottom: 8px;
}
.flow-eyebrow .fi { font-size: 13px; color: #f0a15e; }
.flow-title {
  font-family: "Syne", sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.how-it-works-flow {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  margin: 0 auto;
}
.how-it-works-flow .flow-step,
.how-it-works-flow .flow-final {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 18px 20px;
  border-radius: 14px;
}
.flow-step {
  background: #fff;
  border: 1px solid rgba(60, 90, 55, 0.09);
  box-shadow: 0 10px 26px rgba(40, 60, 38, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.flow-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 34px rgba(40, 60, 38, 0.13);
}
.flow-number {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #2b6127;
  color: #fff;
  font-family: "Syne", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 14px;
}
/* each step leads with a round photo instead of an icon */
.flow-media {
  width: 86%;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: #f2f0e6;
  margin-bottom: 12px;
  flex: 0 0 auto;
}
.flow-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.flow-step:hover .flow-media img { transform: scale(1.06); }
.flow-step h4 {
  font-family: "Syne", sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1f1f1f;
  margin: 0 0 6px;
}
.flow-step p {
  font-family: "Lora", sans-serif;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #6a6a6a;
  margin: 0;
}
.flow-arrow {
  flex: 0 0 auto;
  align-self: center;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #2f6b2b;
  color: #fff;
  box-shadow: 0 6px 14px rgba(47, 107, 43, 0.25);
}
.flow-arrow .fi { font-size: 26px; color: #fff; }

.flow-final {
  background: linear-gradient(150deg, #2f6b2b 0%, #1e4a1c 100%);
  color: #fff;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(30, 74, 28, 0.28);
}
.flow-final-media {
  width: 78%;
  max-width: 132px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 6px rgba(168, 209, 122, 0.18);
  margin-bottom: 12px;
  flex: 0 0 auto;
}
.flow-final-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.flow-final h3 {
  font-family: "Syne", sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.flow-final-accent { color: #a8d17a; }

@media (max-width: 1199px) {
  .how-it-works-flow { flex-wrap: wrap; gap: 14px; }
  .how-it-works-flow .flow-step,
  .how-it-works-flow .flow-final { flex: 1 1 30%; }
  .flow-arrow { display: none; }
  .flow-media { max-width: 132px; }
  .flow-final-media { max-width: 120px; }
}
@media (max-width: 767px) {
  .how-it-works-flow .flow-step,
  .how-it-works-flow .flow-final { flex: 1 1 100%; }
  .flow-title { font-size: 1.7rem; }
  .flow-media { width: 62%; max-width: 170px; }
  .flow-final-media { width: 56%; max-width: 150px; }
}

/* ========================================
   EYEBROW LABELS — one style everywhere, matching the theme tagline
   ("SHOP WITH PURPOSE"): Handlee, 18px, 800, uppercase, orange, no icons
   ======================================== */
.section-tagline,
.title-section .section-tagline,
.daily-care-eyebrow,
.belief-eyebrow,
.flow-eyebrow,
.eyebrow-label {
  display: block;
  font-family: "Handlee", cursive;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2.34px;
  line-height: 1.4;
  text-transform: uppercase;
  color: #ef6c17;
  margin-bottom: 8px;
  gap: 0;
}
.bg-green .section-tagline,
.buying-impact-section .section-tagline,
.our-impact-section .section-tagline { color: rgba(255, 255, 255, 0.7); }
/* no decorative glyphs inside the labels */
.daily-care-eyebrow .fi,
.belief-eyebrow .fi,
.flow-eyebrow .fi,
.eyebrow-label .fi,
.section-tagline .fi { display: none; }

/* ========================================
   HEADING SCALE — one size per role, site-wide
     display (hero)      3.2rem
     section title (h2)  2.25rem
     card title (h3/h4)  1.05rem
   ======================================== */
.hero-title {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.15;
}
.section-title,
.title-section .section-title,
.seva-title,
.who-we-are-title,
.daily-care-title,
.belief-title,
.flow-title,
.cta-title,
.page-hero h1,
.buying-impact-section h2 {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.2px;
}
.seva-value-card h3,
.care-card-text h3,
.belief-card h3,
.flow-step h4,
.flow-final h3,
.hero-feature-text h3,
.product-content h4,
.shop-product-content h4,
.cow-content h4,
.story-content h4,
.seva-opportunity-card h4,
.desi-cow-card h4,
.visit-info-card h4,
.volunteer-activity h4,
.seva-type-card h3,
.impact-item h4,
.purchase-supports-banner h3,
.flow-final h3,
.visit-activity h4 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
}

@media (max-width: 991px) {
  .hero-title { font-size: 2.5rem; }
  .section-title,
  .title-section .section-title,
  .seva-title,
  .who-we-are-title,
  .daily-care-title,
  .belief-title,
  .flow-title,
  .cta-title,
  .page-hero h1,
  .buying-impact-section h2 { font-size: 1.9rem; }
}
@media (max-width: 575px) {
  .hero-title { font-size: 2rem; }
  .section-title,
  .title-section .section-title,
  .seva-title,
  .who-we-are-title,
  .daily-care-title,
  .belief-title,
  .flow-title,
  .cta-title,
  .page-hero h1,
  .buying-impact-section h2 { font-size: 1.6rem; }
}

/* ========================================
   SECTION: GO-SEVA OPPORTUNITIES (slider)
   ======================================== */
.seva-slider {
  position: relative;
  padding: 0 4px;
}
.seva-swiper { padding-bottom: 42px; }
.seva-swiper .swiper-slide {
  height: auto;
  display: flex;
}
.seva-opportunity-card {
  width: 100%;
  text-align: center;
  padding: 30px 26px 26px;
  background: #fff;
  border: 1px solid rgba(60, 90, 55, 0.09);
  border-left: 0;
  border-bottom: 4px solid #2b6127;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(40, 60, 38, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.seva-opportunity-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 38px rgba(40, 60, 38, 0.14);
}
.seva-card-icon {
  width: 74px;
  height: 74px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9f1e4;
  color: #2b6127;
  margin-bottom: 16px;
}
.seva-card-icon .fi { font-size: 30px; }
.seva-opportunity-card .seva-number {
  display: block;
  font-family: "Syne", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: #2b6127;
  margin-bottom: 12px;
}
.seva-opportunity-card h4 {
  color: #1f1f1f;
  margin: 0 0 10px;
}
.seva-opportunity-card p {
  font-family: "Lora", sans-serif;
  font-size: 0.92rem;
  line-height: 1.7;
  color: #5c5c5c;
  margin: 0 0 16px;
}
.seva-opportunity-card .ina_button_text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2b6127;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* side navigation */
.seva-nav {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(60, 90, 55, 0.12);
  border-radius: 50%;
  background: #fff;
  color: #2b6127;
  box-shadow: 0 8px 20px rgba(40, 60, 38, 0.12);
  cursor: pointer;
  z-index: 3;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.seva-nav:hover {
  background: #2b6127;
  color: #fff;
  border-color: #2b6127;
}
.seva-nav .fi { font-size: 17px; }
.seva-nav-prev { left: -58px; }
.seva-nav-next { right: -58px; }

.seva-swiper-pagination.swiper-pagination { bottom: 0; }
.seva-swiper-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: #9bb894;
  opacity: 0.6;
}
.seva-swiper-pagination .swiper-pagination-bullet-active {
  background: #2b6127;
  opacity: 1;
  width: 24px;
  border-radius: 5px;
}

@media (max-width: 1399px) {
  .seva-nav-prev { left: -14px; }
  .seva-nav-next { right: -14px; }
}
@media (max-width: 767px) {
  .seva-nav { display: none; }
}

/* slider pagination — orange, with room to breathe */
.seva-swiper-pagination .swiper-pagination-bullet,
.cows-swiper-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 5px !important;
  background: #f3b183;
  opacity: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.seva-swiper-pagination .swiper-pagination-bullet-active,
.cows-swiper-pagination .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 5px;
  background: #ef6c17;
  opacity: 1;
}
.seva-swiper-pagination .swiper-pagination-bullet:hover,
.cows-swiper-pagination .swiper-pagination-bullet:hover {
  background: #ef6c17;
}
.seva-swiper { padding-bottom: 50px; }
.cows-swiper { padding-bottom: 50px; }


/* ---- Stories: auto-looping carousel ---- */
.stories-swiper { padding-bottom: 50px; }
.stories-swiper .swiper-slide {
  height: auto;
  display: flex;
}
.stories-swiper .story-card { width: 100%; }
.story-image { height: 240px; }
.story-content { padding: 18px; }
.stories-swiper-pagination.swiper-pagination { bottom: 0; }
.stories-swiper-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 5px !important;
  background: #f3b183;
  opacity: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.stories-swiper-pagination .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 5px;
  background: #ef6c17;
}

/* ========================================
   BODY COPY SCALE — same text size on every page
     lead / intro   1.05rem
     body           0.95rem
     small / meta   0.85rem
   ======================================== */
.section-description,
.seva-description,
.daily-care-subtitle,
.belief-subtitle,
.section-subtitle-large {
  font-size: 1.05rem;
  line-height: 1.75;
}
section p,
section li,
.who-we-are-content p,
.desi-cow-card p,
.seva-value-card p,
.care-card-text p,
.belief-card p,
.who-point p,
.seva-opportunity-card p,
.visit-details li,
.visit-info-card p,
.visit-activity p,
.volunteer-activity p,
.seva-type-card p,
.shop-product-content .product-desc,
.faq-section .accordion-body,
.cow-story,
.story-content h4 + p,
.purchase-supports-banner p,
.impact-stat p {
  font-size: 0.95rem;
  line-height: 1.75;
}
.product-content p,
.cow-info,
.product-unit,
.flow-step p,
.hero-feature-text p,
.text-muted.small,
.photo-caption {
  font-size: 0.85rem;
  line-height: 1.6;
}

/* accordion + stray inner-page headings join the scale */
.faq-section .accordion-header { font-size: 1.05rem; }
.faq-section .accordion .accordion-item .accordion-button,
.faq-section .accordion-item .accordion-button,
.faq-section .accordion-button {
  font-size: 1.05rem;
  font-weight: 700;
  font-family: "Syne", sans-serif;
}
section h3:not([class*="-title"]):not(.impact-number) { font-size: 1.05rem; }

/* about-us image reads better narrower than the text column */
.who-we-are-image {
  max-width: 460px;
  margin: 0 auto;
}
.who-we-are-image img {
  max-height: 380px;
}
.faq-group-title { font-size: 1.05rem; font-weight: 700; color: #2b6127; }

/* final CTA sits on the green band: white headline, orange emphasis */
.final-cta-section .cta-title,
.bg-green .cta-title { color: #fff; }
.final-cta-section .cta-title-accent { color: #ffcf9c; }
.final-cta-section .cta-subtitle,
.bg-green .cta-subtitle { color: rgba(255, 255, 255, 0.88); }

/* section-level buttons sat 24px below their content; tighten to 14px */
.products-section .text-center.mt-4,
.go-seva-opportunities-section .text-center.mt-4,
.visit-buttons.mt-4,
.cta-buttons.mt-4,
.seva-slider + .text-center.mt-4 {
  margin-top: 14px !important;
}
.cows-swiper,
.seva-swiper,
.stories-swiper { padding-bottom: 42px; }

/* product blurbs: smaller and capped at two lines so cards stay even */
.shop-product-content .product-desc,
.product-content p {
  font-size: 0.85rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

/* ========================================
   ABOUT INTRO — text left, portrait image right
   ======================================== */
.about-intro-content { padding-right: 40px; }
.about-intro-content .section-title { margin-bottom: 20px; }
.about-intro-content p {
  font-family: "Lora", serif;
  font-size: 0.95rem;
  line-height: 1.85;
  color: #55605a;
  margin-bottom: 16px;
}
.about-intro-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 13px 26px;
  font-size: 0.82rem;
  letter-spacing: 1.2px;
  border-color: #2b6127;
  color: #2b6127;
}
.about-intro-btn .fi { font-size: 14px; color: #2b6127; }
.about-intro-btn:hover { background: #2b6127; color: #fff; }
.about-intro-btn:hover span,
.about-intro-btn:hover .fi { color: #fff; }
.about-intro-image img {
  width: 100%;
  aspect-ratio: 1 / 0.92;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 24px 55px rgba(30, 50, 30, 0.22);
}

@media (max-width: 991px) {
  .about-intro-content { padding-right: 0; }
  .about-intro-image { margin-top: 26px; }
}

/* about intro CTA: theme hover was repainting the background pale while the
   label went white, which made the button read as empty */
.ina_button.ina_button_light.about-intro-btn:hover,
.ina_button.ina_button_light.about-intro-btn:focus {
  background: #2b6127;
  border-color: #2b6127;
  color: #fff;
}
.ina_button.ina_button_light.about-intro-btn:hover span,
.ina_button.ina_button_light.about-intro-btn:hover .fi { color: #fff; }

/* belief points */
.belief-points { margin: 18px 0 18px; }
.belief-points li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  font-family: "Lora", serif;
  font-size: 0.95rem;
  color: #3d463c;
}
.belief-point-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9f1e4;
  color: #2b6127;
}
.belief-point-icon .fi { font-size: 17px; }
.belief-closing {
  font-family: "Lora", serif;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #55605a;
}

/* ========================================
   IMAGE SCALE — one step smaller across every section
   ======================================== */
.about-intro-image img { aspect-ratio: 1 / 0.8; border-radius: 18px; max-height: 400px; }
.who-we-are-image { max-width: 400px; }
.who-we-are-image img { max-height: 320px; }
.care-card-media { height: 132px; }
.cow-image { height: 190px; }
.story-image { height: 200px; }
.product-image { height: 250px; }
.shop-product-image { height: 250px; }
.gaushala-photo-card img { height: 130px; }
.visit-image img { max-height: 330px; width: 100%; object-fit: cover; }

/* product photo not supplied yet: a labeled slot beats a broken image icon */
.product-photo-pending {
  width: 100%;
  height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f1f5ee;
  color: #8a9a86;
  font-family: "Lora", serif;
  font-size: 0.85rem;
}
.product-photo-pending .fi { font-size: 22px; }

/* Theme lock: these two bands were inverted mid-page; keep them in the page's
   light theme and carry the brand with tinted surfaces plus green type */
.buying-impact-section,
.our-impact-section {
  background: #f3f7f0;
  color: #2f3a2c;
}
.buying-impact-section h2,
.our-impact-section h2 { color: #1f2a1c; }
.buying-impact-section .impact-item h4 { color: #2b6127; }
.buying-impact-section .impact-icon .fi,
.our-impact-section .fi { color: #2b6127; }
.our-impact-section .impact-number { color: #2b6127; }
.our-impact-section .impact-stat p { color: #55605a; }
.buying-impact-section .section-tagline,
.our-impact-section .section-tagline { color: #ef6c17; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* statement band stays in the page theme, brand carried by tint and green type */
.statement-band { background: #f3f7f0; }
.statement-band .section-title { color: #1f2a1c; }
.statement-band-copy {
  font-family: "Lora", serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #55605a;
  max-width: 760px;
  margin: 0 auto;
}

/* Life at Sri Golok Dham: carousel at every width, taller photos */
.daily-care-swiper { padding-bottom: 46px; }
.daily-care-swiper .swiper-slide { height: auto; display: flex; }
.daily-care-swiper .care-card { width: 100%; }
.care-card-media { height: 220px; }
.daily-care-pagination.swiper-pagination { bottom: 0; }
.daily-care-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 5px !important;
  background: #f3b183;
  opacity: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.daily-care-pagination .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 5px;
  background: #ef6c17;
}

/* feature bar: centre each icon + label pair in its cell, softer corners */
.hero-features-card { border-radius: 18px; }
.hero-feature {
  justify-content: center;
  align-items: center;
}
.hero-feature-text { text-align: left; }
.hero-feature-text h3 { margin: 0; }
.purchase-seva-section .text-center.mt-4 { margin-top: 14px !important; }

/* ========================================
   MOBILE SPACING & CARD BORDER FIXES
   ======================================== */
@media (max-width: 767px) {
  /* Reduce section padding on mobile */
  .purchase-seva-section.pt-80 { padding-top: 24px; }
  .purchase-seva-section.pb-80 { padding-bottom: 30px; }
  
  /* Reduce spacing between cards and button */
  .seva-value-grid { margin-top: 24px; gap: 14px; }
  .purchase-seva-section .text-center.mt-4 { margin-top: 24px !important; }
  
  /* Card border highlight on mobile */
  .seva-value-card {
    padding: 20px 16px;
    border: 1.5px solid rgba(60, 90, 55, 0.22);
    box-shadow: 0 3px 12px rgba(45, 80, 45, 0.08);
  }
  
  /* Footer spacing fix */
  .ina_footer-style-one { padding-top: 40px; }
  .final-cta-section.pt-80 { padding-top: 40px; }
  .final-cta-section.pb-80 { padding-bottom: 40px; }
  
  /* Reduce overall section spacing */
  section.pt-80 { padding-top: 40px; }
  section.pb-80 { padding-bottom: 40px; }
}
/* light bands: readable type now that the background is tinted, not green */
.buying-impact-section .impact-item h4,
.our-impact-section .impact-stat p,
.buying-impact-section .impact-note,
.our-impact-section .impact-note { color: #55605a; }
.buying-impact-section h2,
.our-impact-section h2,
.statement-band h2 { color: #1f2a1c; }

/* Remove extra spacing between sections */
.life-at-gaushala-section.pb-80 { padding-bottom: 30px; }
.why-desi-cows-section.pt-80 { padding-top: 20px; }
.why-desi-cows-section.pb-80 { padding-bottom: 20px; }

@media (max-width: 991px) {
  .life-at-gaushala-section.pb-80 { padding-bottom: 20px; }
  .why-desi-cows-section.pt-80 { padding-top: 16px; }
  .why-desi-cows-section.pb-80 { padding-bottom: 16px; }
  .why-desi-cows-section { min-height: auto; }
}

@media (max-width: 767px) {
  .life-at-gaushala-section.pb-80 { padding-bottom: 16px; }
  .why-desi-cows-section.pt-80 { padding-top: 12px; }
  .why-desi-cows-section.pb-80 { padding-bottom: 12px; }
  .why-desi-cows-section { min-height: auto; }
  .daily-care-pagination { margin-bottom: 0 !important; }
}

/* ========================================
   FIND US — contact rail + map card
   ======================================== */
.find-us-section { background: transparent; }
.find-us-head { max-width: 760px; margin: 0 auto 34px; }
.find-us-head .section-description { margin: 8px auto 0; }

.find-us-list { margin: 0; }
.find-us-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #eef2ea;
}
.find-us-item:last-child { border-bottom: 0; }
.find-us-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9f1e4;
  color: #2b6127;
}
.find-us-icon .fi { font-size: 22px; }
.find-us-text h3 {
  font-family: "Syne", sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #2b6127;
  margin: 4px 0 8px;
}
.find-us-text p {
  font-family: "Lora", serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #55605a;
  margin: 0;
}
.find-us-text a { color: #55605a; }
.find-us-text a:hover { color: #2b6127; }
.find-us-key {
  display: inline-block;
  min-width: 118px;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  color: #1f2a1c;
}
.find-us-wa { margin-top: 12px; padding: 11px 24px; font-size: 0.78rem; }

.find-us-map {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(40, 60, 38, 0.14);
  background: #eef2ea;
}
.find-us-map iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}
.find-us-map-btn {
  width: 100%;
  border-radius: 0 !important;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  font-size: 0.86rem;
}
.find-us-map-btn .fi { font-size: 17px; color: #fff; }

@media (max-width: 991px) {
  .find-us-map { margin-top: 26px; }
  .find-us-map iframe { height: 340px; }
}
@media (max-width: 767px) {
  .find-us-item { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .find-us-key { min-width: 0; margin-right: 6px; }
  .find-us-map iframe { height: 280px; }
}

/* ========================================
   PRODUCT DETAIL PAGE
   ======================================== */
.product-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Lora", serif;
  font-size: 0.86rem;
  color: #7b857a;
  margin-bottom: 22px;
}
.product-crumbs a { color: #2b6127; }
.product-crumbs .fi { font-size: 12px; color: #9aa697; }

.product-detail-media { overflow: hidden; border-radius: 18px; }
.product-detail-media .product-image { height: 460px; }
.product-detail-media.product-photo-pending {
  height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #f1f5ee;
  color: #8a9a86;
  font-family: "Lora", serif;
}
.product-detail-media.product-photo-pending .fi { font-size: 26px; }

.product-detail-body .section-title { margin-bottom: 12px; }
.product-detail-short {
  font-family: "Lora", serif;
  font-size: 1rem;
  line-height: 1.75;
  color: #55605a;
  margin-bottom: 18px;
}
.product-detail-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0 18px;
  border-bottom: 1px solid #eef2ea;
}
.product-detail-price .product-price {
  font-family: "Syne", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #2b6127;
}
.product-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 8px;
}
.product-detail-block { padding: 20px 0 4px; border-top: 1px solid #eef2ea; }
.product-detail-block:first-of-type { border-top: 0; }
.product-detail-block h2 {
  font-family: "Syne", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f2a1c;
  margin-bottom: 12px;
}
.product-detail-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-family: "Lora", serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #55605a;
}
.product-detail-list .fi { font-size: 14px; color: #2b6127; margin-top: 4px; }

.related-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
}
.shop-product-link { display: block; }
.shop-product-content h4 a { color: inherit; }
.shop-product-content h4 a:hover { color: #2b6127; }

@media (max-width: 991px) {
  .product-detail-media .product-image,
  .product-detail-media.product-photo-pending { height: 340px; }
  .related-products { grid-template-columns: 1fr; max-width: 420px; }
}

/* homepage FAQ block */
.home-faq-section { background: transparent; }
.home-faq-section .accordion-item {
  border: 1px solid rgba(60, 90, 55, 0.1);
  border-radius: 14px !important;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
}
.home-faq-section .accordion-header { margin: 0; }
.home-faq-section .accordion-button {
  font-family: "Syne", sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: #1f2a1c;
  padding: 18px 22px;
  background: #fff;
  box-shadow: none;
}
.home-faq-section .accordion-button:not(.collapsed) {
  background: #f3f7f0;
  color: #2b6127;
}
.home-faq-section .accordion-body {
  font-family: "Lora", serif;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #55605a;
  padding: 4px 22px 20px;
}
.home-faq-section .accordion-body a { color: #2b6127; }
@media (max-width: 767px) {
  .home-faq-section .accordion-button { font-size: 0.95rem; padding: 15px 16px; }
  .home-faq-section .accordion-body { padding: 4px 16px 16px; }
}

/* related products reuse the homepage product card, with a placeholder tile
   for the two products that have no photograph yet */
.product-image.product-photo-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f1f5ee;
  color: #8a9a86;
  font-family: "Lora", serif;
  font-size: 0.82rem;
}
.product-image.product-photo-pending .fi { font-size: 22px; }
.related-all-btn {
  display: inline-flex;
  width: auto;
  padding: 13px 30px;
}

/* product detail: tighter type scale */
.product-detail-body .section-title { font-size: 1.8rem; line-height: 1.25; }
.product-detail-short { font-size: 0.9rem; line-height: 1.7; margin-bottom: 14px; }
.product-detail-price { padding: 10px 0 14px; }
.product-detail-price .product-price { font-size: 1.3rem; }
.product-detail-price .product-unit { font-size: 0.8rem; }
.product-detail-actions { margin: 16px 0 4px; }
.product-detail-actions .ina_button { padding: 12px 24px; font-size: 0.78rem; }
.product-detail-block { padding: 16px 0 2px; }
.product-detail-block h2 { font-size: 0.95rem; margin-bottom: 8px; }
.product-detail-list li { font-size: 0.88rem; line-height: 1.65; padding: 5px 0; }
.product-detail-list .fi { font-size: 12px; margin-top: 5px; }
.product-crumbs { font-size: 0.8rem; margin-bottom: 18px; }

@media (max-width: 767px) {
  .product-detail-body .section-title { font-size: 1.45rem; }
  .product-detail-short { font-size: 0.86rem; }
  .product-detail-price .product-price { font-size: 1.15rem; }
  .product-detail-list li { font-size: 0.85rem; }
}

/* Find Us: map action is a pill, not a full-width bar */
.find-us-map { padding-bottom: 16px; text-align: center; background: #fff; }
.find-us-map-btn {
  display: inline-flex;
  width: auto;
  margin: 14px auto 0;
  padding: 12px 26px;
  font-size: 0.78rem;
  border-radius: 50px !important;
}
.find-us-map-btn .fi { font-size: 15px; }

/* Find Us rows: smaller type, key and value in aligned columns */
.find-us-text h3 { font-size: 0.92rem; letter-spacing: 1.2px; margin: 2px 0 6px; }
.find-us-text p { font-size: 0.88rem; line-height: 1.65; }
.find-us-rows { margin: 0; }
.find-us-rows > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 12px;
  align-items: baseline;
  padding: 2px 0;
}
.find-us-rows dt {
  font-family: "Syne", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  color: #1f2a1c;
}
.find-us-rows dd {
  margin: 0;
  font-family: "Lora", serif;
  font-size: 0.88rem;
  color: #55605a;
}
.find-us-rows dd a { color: #55605a; }
.find-us-rows dd a:hover { color: #2b6127; }
.find-us-icon { width: 48px; height: 48px; }
.find-us-icon .fi { font-size: 19px; }
.find-us-item { padding: 15px 0; gap: 15px; }

@media (max-width: 575px) {
  .find-us-rows > div { grid-template-columns: 1fr; row-gap: 0; }
  .find-us-rows dt { font-size: 0.84rem; }
}
/* the global section h3 rule outranks the block rule, so scope it to the section */
.find-us-section .find-us-list .find-us-item .find-us-text h3 { font-size: 0.92rem; }

/* visit registration + enquiry forms */
.visit-register-section { background: transparent; }
.contact-form .form-control {
  font-family: "Lora", serif;
  font-size: 0.92rem;
  padding: 12px 16px;
  border: 1px solid #dfe6da;
  border-radius: 10px;
  background: #fff;
  color: #2f3a2c;
  width: 100%;
}
.contact-form .form-control:focus {
  outline: none;
  border-color: #2b6127;
  box-shadow: 0 0 0 3px rgba(43, 97, 39, 0.12);
}
.contact-form .form-control::placeholder { color: #9aa697; }
.contact-form label {
  display: block;
  font-family: "Syne", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #1f2a1c;
}
.contact-form textarea.form-control { resize: vertical; min-height: 110px; }
.contact-form .ina_button { padding: 13px 28px; font-size: 0.8rem; }
.form-message span { font-family: "Lora", serif; font-size: 0.9rem; color: #2b6127; }

@media (max-width: 767px) {
  .contact-form .ina_button { width: 100%; max-width: 280px; margin: 6px auto 0 !important; }
  .contact-form .text-center { display: flex; flex-direction: column; align-items: center; }
}

/* activity tiles: the icon stayed green on the green hover fill, so it vanished */
.visit-activity:hover .visit-activity-icon,
.visit-activity:hover .visit-activity-icon .fi,
.visit-activity:hover p,
.volunteer-activity:hover .volunteer-activity-icon,
.volunteer-activity:hover .volunteer-activity-icon .fi,
.volunteer-activity:hover h4,
.volunteer-activity:hover p { color: #fff !important; }
.visit-activity:hover .visit-activity-icon .fi::before,
.volunteer-activity:hover .volunteer-activity-icon .fi::before {
  -webkit-text-fill-color: #fff;
  color: #fff;
}

/* forms: the theme draws a checkbox square before every label, and the light
   button stretched because .ina_button is display:flex */
.contact-form .form-group label::before,
.contact-form .form-group label::after,
.contact-form label::before,
.contact-form label::after {
  content: none !important;
  display: none !important;
}
.contact-form .text-center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.contact-form .text-center .ina_button {
  display: inline-flex;
  width: auto;
  margin: 0 !important;
}
.contact-form .form-message { display: block; }

@media (max-width: 767px) {
  .contact-form .text-center { flex-direction: column; }
  .contact-form .text-center .ina_button { width: 100%; max-width: 280px; }
}
/* gradient button inherited grey text on the element; only its span was white */
.find-us-wa, .find-us-wa span, .find-us-wa .fi { color: #fff; }

/* Our Daily Care: photo cards instead of icon tiles */
.care-photo-card {
  height: 100%;
  background: #fff;
  border: 1px solid rgba(60, 90, 55, 0.09);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(40, 60, 38, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.care-photo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(40, 60, 38, 0.14);
}
.care-photo-media {
  height: 210px;
  overflow: hidden;
}
.care-photo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.care-photo-card:hover .care-photo-media img { transform: scale(1.05); }
.care-photo-body { padding: 18px 20px 22px; }
.care-photo-body h4 {
  font-family: "Syne", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f2a1c;
  margin: 0 0 8px;
}
.care-photo-body p {
  font-family: "Lora", serif;
  font-size: 0.92rem;
  line-height: 1.7;
  color: #55605a;
  margin: 0;
}
@media (max-width: 767px) {
  .care-photo-media { height: 190px; }
  .care-photo-body { padding: 16px; text-align: center; }
}
/* Life at Sri Golok Dham gallery: taller frames */
.gaushala-photo-card img { height: 240px; }
@media (max-width: 991px) { .gaushala-photo-card img { height: 220px; } }
@media (max-width: 575px) { .gaushala-photo-card img { height: 200px; } }

/* Gau Seva cards: photo on top, serif heading */
.seva-type-card { padding: 0 0 26px; overflow: hidden; display: flex; flex-direction: column; }
.seva-type-media {
  height: 200px;
  flex: 0 0 200px;
  margin: -4px 0 18px;
  overflow: hidden;
}
.seva-type-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.seva-type-card:hover .seva-type-media img { transform: scale(1.05); }
.seva-type-card .seva-type-number,
.seva-type-card h3,
.seva-type-card p,
.seva-type-card .ina_button { margin-left: 26px; margin-right: 26px; }
.seva-type-card .seva-type-lead {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.seva-type-card .ina_button { display: inline-block; align-self: flex-start; margin-top: auto; }
.seva-type-card h3 {
  font-family: "Lora", serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #1f2a1c;
}
.seva-type-card .seva-type-number {
  font-family: "Lora", serif;
  font-weight: 700;
}

@media (max-width: 767px) {
  .seva-type-media { height: 180px; }
  .seva-type-card .seva-type-number,
  .seva-type-card h3,
  .seva-type-card p,
  .seva-type-card .ina_button { margin-left: 18px; margin-right: 18px; }
}

/* H1 gets the serif display treatment, everything below stays Syne */
h1,
h1.section-title,
.hero-title,
.product-detail-body .section-title,
.title-section h1.section-title {
  font-family: "Lora", serif;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.18;
}
.hero-title { font-weight: 700; }

/* ========================================
   CARD ILLUSTRATIONS — replace the old font icons with real imagery
   ======================================== */

/* round badge cards keep their shape, the artwork sits inside it */
.seva-value-icon,
.belief-card-icon {
  padding: 0;
  overflow: hidden;
}
/* the value-card line art is cut out, so it sits straight on the card */
.seva-value-icon { background: transparent; box-shadow: none; }
.belief-card-icon { background: #f7f4ea; }
.seva-value-icon { width: 150px; height: 150px; margin-bottom: 20px; }
.belief-card-icon { width: 168px; height: 168px; margin-bottom: 22px; }
.seva-value-icon img,
.belief-card-icon img {
  width: 100%;
  height: 100%;
  display: block;
}
.seva-value-icon img { object-fit: contain; }
.belief-card-icon img { object-fit: cover; border-radius: 50%; }

/* photo strip cards: image sits above the title inside the card padding */
.seva-card-media,
.desi-cow-media {
  height: 168px;
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
  background: #f2f0e6;
}
.seva-card-media img,
.desi-cow-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.seva-opportunity-card:hover .seva-card-media img,
.desi-cow-card:hover .desi-cow-media img { transform: scale(1.05); }

@media (max-width: 991px) {
  .seva-card-media,
  .desi-cow-media { height: 150px; }
  .seva-value-icon { width: 132px; height: 132px; }
  .belief-card-icon { width: 148px; height: 148px; }
}
@media (max-width: 767px) {
  .seva-card-media,
  .desi-cow-media { height: 140px; }
  .seva-value-icon { width: 118px; height: 118px; }
  .belief-card-icon { width: 130px; height: 130px; }
}

/* ========================================
   DONATE PAGE
   ======================================== */
.donate-highlight {
  border: 1.5px solid rgba(60, 90, 55, 0.2);
  border-left: 4px solid var(--primary-green);
  border-radius: 14px;
  background: #f7faf4;
  padding: 22px 26px;
}
.donate-highlight p { margin: 0; font-size: 1rem; line-height: 1.7; color: #3c4a38; }

.donate-amount-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.donate-amount-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 28px 22px;
  background: #fff;
  border: 1.5px solid rgba(60, 90, 55, 0.18);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(45, 80, 45, 0.06);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.donate-amount-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary-green);
  box-shadow: 0 16px 32px rgba(45, 80, 45, 0.14);
}
.donate-amount {
  font-family: "Syne", sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--primary-green);
  line-height: 1.1;
}
.donate-amount-note { font-size: 0.9rem; color: #5b5b5b; line-height: 1.5; }
.donate-amount-card-custom { background: #f4f8f0; }

.donate-method-card {
  height: 100%;
  background: #fff;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.donate-method-card h3 {
  font-family: "Lora", serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary-green);
  margin-bottom: 10px;
}
.donate-method-card > p { color: var(--text-light); line-height: 1.7; }
.donate-details {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 8px 18px;
}
.donate-details dt { font-size: 0.85rem; font-weight: 600; color: #5b5b5b; }
.donate-details dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2a1c;
  word-break: break-word;
}
.donate-qr {
  margin-top: 18px;
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(60, 90, 55, 0.35);
  border-radius: 12px;
  background: #f7faf4;
  padding: 16px;
  text-align: center;
}
/* placeholders stay obvious until the real payment details are filled in */
.donate-placeholder {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: #fdf3e3;
  color: #a86a1c;
  font-weight: 600;
  font-size: 0.88rem;
}
.donate-note { font-size: 0.88rem; color: #6b6b6b; margin-top: 14px; line-height: 1.6; }
.donate-gateway-btn[data-payment-link-pending="true"] { opacity: 0.65; pointer-events: none; }

@media (max-width: 991px) {
  .donate-amount-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 575px) {
  .donate-amount-grid { grid-template-columns: 1fr; }
  .donate-method-card { padding: 24px 20px; }
  .donate-details { grid-template-columns: 1fr; gap: 2px 0; }
  .donate-details dd { margin-bottom: 10px; }
}


/* ========================================
   PURCHASE-TO-SEVA FLOW — final sizing
   scoped to .how-it-works-flow so the shared heading/icon groups
   further up the file (and in icons.css / site.css) do not win
   ======================================== */
.how-it-works-flow { gap: 6px; }
.how-it-works-flow .flow-step,
.how-it-works-flow .flow-final { padding: 20px 14px; }
.how-it-works-flow .flow-step h4 {
  font-size: 1.08rem;
  line-height: 1.3;
  margin: 0 0 6px;
}
.how-it-works-flow .flow-final h3 {
  font-size: 1.12rem;
  line-height: 1.35;
}
.how-it-works-flow .flow-step p {
  font-size: 0.86rem;
  line-height: 1.5;
}
.how-it-works-flow .flow-arrow .fi { font-size: 24px; }

@media (max-width: 1199px) {
  .how-it-works-flow .flow-step,
  .how-it-works-flow .flow-final { padding: 22px 18px; }
}

/* ========================================
   HOVER: IMAGE ZOOM ONLY (SITE-WIDE)
   Cards no longer lift or deepen their shadow on hover.
   The only hover response is the photo scaling inside its frame.
   ======================================== */
.gaushala-photo-card:hover,
.desi-cow-card:hover,
.product-card:hover,
.cow-card:hover,
.story-card:hover,
.seva-type-card:hover,
.seva-opportunity-card:hover,
.shop-product-card:hover,
.seva-value-card:hover,
.care-card:hover,
.care-photo-card:hover,
.belief-card:hover,
.donate-amount-card:hover,
.flow-step:hover { transform: none; }

/* hold each card at its own resting shadow / border while hovered */
.gaushala-photo-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
.desi-cow-card:hover,
.product-card:hover,
.cow-card:hover,
.story-card:hover,
.seva-type-card:hover,
.shop-product-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
.seva-opportunity-card:hover { box-shadow: 0 12px 28px rgba(40, 60, 38, 0.08); }
.care-card:hover,
.care-photo-card:hover,
.flow-step:hover { box-shadow: 0 10px 26px rgba(40, 60, 38, 0.07); }
.belief-card:hover { box-shadow: 0 14px 34px rgba(45, 70, 40, 0.1); }
.seva-value-card:hover,
.donate-amount-card:hover {
  box-shadow: 0 4px 16px rgba(45, 80, 45, 0.06);
  border-color: rgba(60, 90, 55, 0.18);
}

/* image frames must clip the zoom */
.gaushala-photo-card,
.product-image,
.cow-image,
.story-image,
.seva-type-media,
.seva-card-media,
.desi-cow-media,
.shop-product-image,
.care-card-media,
.care-photo-media,
.flow-media { overflow: hidden; }

/* the zoom itself */
.gaushala-photo-card img,
.product-image img,
.cow-image img,
.story-image img,
.seva-type-media img,
.seva-card-media img,
.desi-cow-media img,
.shop-product-image img,
.care-card-media img,
.care-photo-media img,
.flow-media img { transition: transform 0.4s ease; }

.gaushala-photo-card:hover img,
.product-card:hover .product-image img,
.cow-card:hover .cow-image img,
.story-card:hover .story-image img,
.seva-type-card:hover .seva-type-media img,
.seva-opportunity-card:hover .seva-card-media img,
.desi-cow-card:hover .desi-cow-media img,
.shop-product-card:hover .shop-product-image img,
.care-card:hover .care-card-media img,
.care-photo-card:hover .care-photo-media img,
.flow-step:hover .flow-media img { transform: scale(1.06); }

/* phone: trim card body copy to 5 lines and end with an ellipsis */
@media (max-width: 575px) {
  .seva-type-card p:not(.seva-type-lead) {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ========================================
   SUPPORT US PAGE HEADER
   Asymmetric two-column intro. One display voice (Lora H1); the grid
   heading steps down to a quiet label so the two faces stop competing.
   ======================================== */
#support-intro { padding-top: 64px; padding-bottom: 0; }
#seva-options { padding-top: 0; padding-bottom: 30px; }

.support-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 30px 64px;
  align-items: start;
}
.support-intro-lead .section-tagline { margin-bottom: 14px; }
#support-intro h1.section-title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.5px;
  margin-bottom: 0;
  max-width: 15ch;
}
/* body copy sits lower than the headline baseline — asymmetric white-space */
.support-intro-body {
  padding-top: 46px;
  border-top: 1px solid rgba(60, 90, 55, 0.16);
  margin-top: 8px;
}
#support-intro .section-description {
  margin-bottom: 0;
  max-width: 46ch;
  text-align: left;
  color: var(--text-light);
}

/* grid heading: a label, not a rival headline */
.seva-options-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 60px 0 30px;
}
.seva-options-title {
  font-family: "Syne", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2b3a28;
  margin: 0;
  white-space: nowrap;
}
.seva-options-head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(60, 90, 55, 0.16);
}

@media (max-width: 991px) {
  .support-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .support-intro-body { padding-top: 22px; margin-top: 0; }
  #support-intro h1.section-title { max-width: 20ch; }
}
@media (max-width: 575px) {
  #support-intro { padding-top: 34px; }
  #seva-options { padding-bottom: 22px; }
  .seva-options-head { margin: 40px 0 24px; }
  .seva-options-title { font-size: 0.95rem; white-space: normal; }
  #support-intro .section-description { max-width: none; }
}

/* staggered load-in: transform + opacity only */
@media (prefers-reduced-motion: no-preference) {
  #support-intro .section-tagline,
  #support-intro h1.section-title,
  .support-intro-body,
  .seva-options-head {
    opacity: 0;
    transform: translateY(14px);
    animation: supportIntroIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  #support-intro .section-tagline { animation-delay: 0.05s; }
  #support-intro h1.section-title { animation-delay: 0.14s; }
  .support-intro-body { animation-delay: 0.24s; }
  .seva-options-head { animation-delay: 0.34s; }
}
@keyframes supportIntroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   ACCESSIBILITY + INTERACTION STATES
   ======================================== */

/* skip link: off-screen until focused */
.skip-to-content {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 1000;
  padding: 10px 18px;
  background: var(--primary-green, #2b6127);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.skip-to-content:focus { transform: translateY(60px); color: #fff; text-decoration: none; }
#main-content:focus { outline: none; }

/* visible keyboard focus everywhere — the browser default is suppressed
   by several of the button styles, so state it explicitly */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #ef6c17;
  outline-offset: 3px;
  border-radius: 3px;
}
.whatsapp-floating-btn:focus-visible { outline-offset: 5px; }

/* tactile press feedback on every button-ish control */
.ina_button:active,
.ina_button_text:active,
.header-cta-btn:active,
.whatsapp-floating-btn:active,
button:active,
input[type="submit"]:active {
  transform: scale(0.975);
}

/* respect a stated preference for reduced motion, site-wide */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* form helper + inline error text */
.form-help {
  font-size: 0.82rem;
  color: var(--text-light, #55605a);
  margin: 6px 0 0;
  line-height: 1.5;
}
.form-error {
  font-size: 0.82rem;
  font-weight: 600;
  color: #a33526;
  margin: 6px 0 0;
  line-height: 1.5;
}
.form-error[hidden] { display: none; }
.form-control[aria-invalid="true"] {
  border-color: #a33526;
  background-color: rgba(163, 53, 38, 0.04);
}