/* ========================================
   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; }
.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-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-section > .container,
.hero-section > .ina-container {
  position: relative;
  z-index: 3;
  width: 100%;
}

@media (max-width: 1199px) {
  .hero-section { height: auto; min-height: 700px; max-height: none; padding-bottom: 260px; }
  }

@media (max-width: 991px) {
  .hero-section { display: block; height: auto; min-height: 600px; max-height: none; padding: 100px 0 60px; }
}

@media (max-width: 575px) {
  .hero-section { min-height: auto; padding: 50px 0 40px; }
}

/* ========== PURCHASE SEVA SECTION ========== */
.purchase-seva-section {
  background: linear-gradient(180deg, #fff 0%, var(--light-green) 100%);
}
.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-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-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-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;
  }
}

/* ========== 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-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;
}

/* ========== 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-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;
}

/* ---- Global type scale ---- */
.pt-80 { padding-top: 56px; }
.pb-80 { padding-bottom: 56px; }
.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-description {
  font-size: 0.97rem;
  line-height: 1.7;
  max-width: 65ch;
}

/* ---- Hero ---- */
.hero-section {
  min-height: 0;
  padding: 60px 0 190px;
}

/* ---- 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-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-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-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; }
  .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-section > .container { position: relative; z-index: 3; }

/* ========================================
   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-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;
}
.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-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; }

/* ========================================
   SECTION: WHY DESI COWS MATTER (our belief)
   ======================================== */
.why-desi-cows-section {
  position: relative;
  background-color: transparent;
  background-image: url("../img/ourbelief_bg.webp");
  /* 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 .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;
}

@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;
}

/* 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 .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);
}
/* 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; }
.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) {
  .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) {
  .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: 11px 11px 11px;
  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 .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-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;
}
.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-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; }
.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;
}

/* ========================================
   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; }
}

@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);
}
.hero-bg-stack .hero-bg-image[data-hero-bg="0"],
.hero-bg-stack .hero-bg-image.is-active {
  transform: translate3d(0, 0, 0);
}

.hero-section .hero-swiper {
  width: 100%;
  overflow: hidden;
}
/* leave slide opacity alone — a transition of our own here swallows the
   transitionend Swiper waits for and the slider stops advancing */
.hero-section .hero-swiper .swiper-slide { height: auto; }
.hero-nav .fi { font-size: 22px; }

/* two classes to outrank swiper's own .swiper-pagination-horizontal rule */
.hero-section .hero-swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 150px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
@media (max-width: 991px) {
  /* below this width the features card sits in the page flow, so the hero
     becomes a flex column and the bullets simply stack above it.
     Arrows are dropped here: the slider is swipeable on touch. */
  .hero-section { display: flex; flex-direction: column; }
  .hero-section .hero-swiper-pagination {
    position: static;
    bottom: auto;
    /* the features card is pulled up 36px by the theme, so pay that back */
    margin: 22px 0 46px;
  }
}

/* Image-only home banner: no slides, controls, overlay, or text. */
.hero-section.hero-banner-only {
  display: block;
  height: clamp(360px, 42vw, 620px);
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: hidden;
  background: #fbf0e6;
}
@media (max-width: 767px) {
  /* phone: the section is 60% of the viewport, the whole invite is visible
     (no crop) and the button drops below the artwork */
  .hero-section.hero-banner-only {
    /* height comes from the artwork plus the button: a fixed 60vh left a big
       empty band under the button before the next section */
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 0 0 18px;
  }
  .hero-banner-only picture {
    height: auto;
  }
  .hero-banner-only img {
    height: auto;
    object-fit: contain;
    object-position: center top;
  }
}

/* ========================================
   EVENTS PAGE
   ======================================== */
/* upcoming events: compact schedule rail and featured event */
.upcoming-events-section {
  background: #fff6ec;
}
.upcoming-events-shell {
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(0, 1.38fr);
  align-items: stretch;
  gap: 48px;
  max-width: 1220px;
  margin: 0 auto;
}
.upcoming-events-rail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 22px;
  padding: 0;
}
.upcoming-item {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 16px;
  padding: 0 0 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(239, 108, 23, 0.17);
}
/* the top (selected) event gets a 2px light travelling around its border */
.upcoming-item.is-active {
  padding: 14px 16px;
  margin-bottom: 18px;
  border-bottom: 0;
  border-radius: 14px;
  background: #fff;
}
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
.upcoming-item.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  clip-path: inset(0 round 14px);
  background: conic-gradient(
    from var(--item-angle),
    rgba(239, 108, 23, 0) 0deg,
    rgba(247, 148, 56, 0.85) 40deg,
    #ef6c17 70deg,
    rgba(247, 148, 56, 0.85) 100deg,
    rgba(239, 108, 23, 0) 150deg,
    rgba(239, 108, 23, 0) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: upcoming-item-border 3s linear infinite;
  pointer-events: none;
}
}
/* resting ring under the moving light, so the card always reads as a card */
.upcoming-item.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(239, 108, 23, 0.18);
  pointer-events: none;
}
@property --item-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes upcoming-item-border {
  to { --item-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .upcoming-item.is-active::after { animation: none; }
}
.upcoming-item:last-child {
  margin-bottom: 0;
}
.upcoming-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 4px;
  background: #fff;
  color: #4a2c17;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(239, 108, 23, 0.18);
}
.upcoming-item.is-active .upcoming-date {
  background: #ef6c17;
  color: #fff;
  box-shadow: 0 8px 18px rgba(239, 108, 23, 0.22);
}
.upcoming-day {
  font-family: "Jost", sans-serif;
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1;
}
.upcoming-month {
  margin-top: 6px;
  font-family: "Jost", sans-serif;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}
.upcoming-tab {
  display: flex;
  min-width: 0;
  width: 100%;
  flex-direction: column;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #4a2c17;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
}
.upcoming-tab:hover,
.upcoming-tab:focus {
  color: #ef6c17;
  outline: none;
}
.upcoming-tab:focus-visible {
  outline: 2px solid rgba(239, 108, 23, 0.42);
  outline-offset: 5px;
}
.upcoming-item.is-active .upcoming-tab {
  color: #4a2c17;
}
.upcoming-title {
  overflow: hidden;
  font-family: "Lora", serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upcoming-weekday {
  overflow: hidden;
  color: #866448;
  font-family: "Jost", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upcoming-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: #a15a2d;
  transition: color 0.25s ease, transform 0.25s ease;
}
.upcoming-item:hover .upcoming-arrow,
.upcoming-item.is-active .upcoming-arrow {
  color: #ef6c17;
  transform: translateX(2px);
}
.upcoming-view-all {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid #ef6c17;
  border-radius: 4px;
  color: #ef6c17;
  font-family: "Jost", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.upcoming-view-all:hover,
.upcoming-view-all:focus {
  background: #ef6c17;
  color: #fff;
  transform: translateY(-1px);
}
.upcoming-featured-panels {
  min-width: 0;
}
.upcoming-featured {
  overflow: hidden;
  border-radius: 8px;
  background: #ef6c17;
  box-shadow: 0 16px 34px rgba(239, 108, 23, 0.16);
}
.upcoming-featured[hidden] {
  display: none;
}
.upcoming-featured.is-active {
  animation: upcomingPanelIn 0.28s ease both;
}
.upcoming-featured-media {
  position: relative;
  height: clamp(245px, 26vw, 315px);
  overflow: hidden;
  background: #f3dac2;
}
.upcoming-featured-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.upcoming-featured-body {
  padding: 28px 32px 32px;
  color: #fff;
}
.upcoming-featured-tag {
  display: block;
  margin-bottom: 7px;
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}
.upcoming-featured h3 {
  margin: 0 0 13px;
  color: #fff;
  font-family: "Lora", serif;
  font-size: clamp(1.58rem, 2.1vw, 2.05rem);
  font-weight: 700;
  line-height: 1.16;
}
.upcoming-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 14px;
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: 0.8rem;
  line-height: 1.4;
}
.upcoming-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.upcoming-meta .fi { font-size: 15px; }
.upcoming-desc {
  max-width: 62ch;
  margin: 0 0 20px;
  color: #fff;
  font-family: "Lora", serif;
  font-size: 0.96rem;
  line-height: 1.62;
}
.upcoming-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 20px;
  border-radius: 4px;
  background: #fff;
  color: #ef6c17;
  font-family: "Jost", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.upcoming-register:hover,
.upcoming-register:focus {
  background: #4a2c17;
  color: #fff;
  transform: translateY(-1px);
}

@keyframes upcomingPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 991px) {
  .upcoming-events-shell {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .upcoming-events-rail {
    justify-content: flex-start;
  }
}
@media (max-width: 575px) {
  .upcoming-events-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .upcoming-item {
    grid-template-columns: 62px minmax(0, 1fr) 24px;
    gap: 14px;
  }
  .upcoming-featured-media {
    height: 240px;
  }
  .upcoming-featured-body {
    padding: 28px 24px 30px;
  }
  .upcoming-meta {
    gap: 7px 14px;
  }
  .upcoming-register,
  .upcoming-view-all {
    width: 100%;
  }
}

.event-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.event-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.event-media {
  position: relative;
  height: 190px;
  overflow: hidden;
  background: #f2f0e6;
}
.event-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.event-card:hover .event-media img { transform: scale(1.05); }
.event-date {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 74px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(47, 107, 43, 0.94);
  color: #fff;
  box-shadow: 0 6px 16px rgba(30, 74, 28, 0.28);
}
.event-month {
  font-family: "Syne", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.1;
}
.event-label {
  font-family: "Jost", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.9;
}
.event-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 24px;
}
.event-body h3 {
  font-family: "Lora", serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1f2a1c;
  margin: 0;
}
.event-body p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #6a6a6a;
  margin: 0 0 4px;
}

@media (max-width: 767px) {
  .event-media { height: 170px; }
  .event-body { padding: 20px 18px 22px; }
}

/* ========================================
   EVENT BANNER — invitation artwork at the top of the events page
   ======================================== */
.event-banner-section {
  padding: 26px 0 0;
}
.event-banner {
  position: relative;
  display: block;
  height: 75vh;
  min-height: 320px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(74, 44, 23, 0.16);
}
.event-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.upcoming-tagline {
  font-family: "Lora", serif;
  font-size: 1rem;
  font-style: italic;
  color: #ef6c17;
  margin: 0 0 10px;
}

@media (max-width: 991px) {
  /* the artwork is very wide, so hold the centre panel in view as it crops */
  .event-banner img { object-position: 55% center; }
}
@media (max-width: 767px) {
  .event-banner-section { padding-top: 18px; }
  .event-banner { border-radius: 12px; height: 30vh; min-height: 0; }
  .event-banner img { object-position: 60% center; }
}

/* ========================================
   HERO BANNER CTA — white pill on the Gau Naamkaran artwork
   ======================================== */
.hero-section.hero-banner-only { position: relative; }
.hero-banner-cta .fi { font-size: 17px; }

@media (max-width: 991px) {
  .hero-banner-cta {
    padding: 13px 26px;
    font-size: 0.78rem;
    letter-spacing: 1px;
  }
}
@media (max-width: 767px) {
  /* phone: out of the artwork, sitting just under the banner */
  .hero-banner-cta {
    position: static;
    transform: none;
    display: flex;
    justify-content: center;
    width: calc(100% - 44px);
    margin: 14px auto 0;
    padding: 15px 24px;
    font-size: 0.8rem;
    /* phone: solid orange rather than the white pill used on desktop */
    background: linear-gradient(135deg, #f79438 0%, #ef6c17 45%, #d2570b 100%);
    border-color: #c9540a;
    color: #fff;
    box-shadow: 0 10px 22px rgba(210, 87, 11, 0.32);
  }
  .hero-banner-cta:hover,
  .hero-banner-cta:focus {
    background: linear-gradient(135deg, #ffa249 0%, #f57a22 45%, #e0620e 100%);
    color: #fff;
  }
  .hero-banner-cta:hover,
  .hero-banner-cta:active { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner-cta { transition: none; }
}

/* On phones the 4.6:1 band is only ~80px tall, which leaves the tiles and the
   timer far too small. Zoom the whole frame — artwork and text scale together,
   so the digits stay locked to the tiles — and crop the decorative edges. */
/* Tablet and up the band is wide enough for the timer to read at its natural
   size. Only small phones need a zoom, and it is capped at 2.2x: the tiles span
   31.5%-69.3% of the artwork, so anything past ~2.6x pushes them off screen. */
@media (max-width: 575px) {
  .event-countdown-banner-section {
    height: 48vw;
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  .event-countdown-frame {
    flex: 0 0 auto;
    transform: scale(2.2);
    transform-origin: center center;
  }
}

/* ========================================
   LOGO SIZING
   These <img> tags carry width/height attributes so the browser can reserve
   their box before the file arrives. Where the stylesheet only sets one
   dimension the attribute supplies the other, which stretched all three
   logos - the header one to its full 613px intrinsic width, shoving the menu
   off the row. Give the stylesheet both dimensions back.
   ======================================== */
.ina_item-footer img {
  max-width: 100%;
  width: auto;
  /* narrow columns cap the width; without this the attribute holds the height
     and the footer logo squashes below 992px */
  height: auto;
}
.ina-sidebar-top .ina-logo-wrapper img {
  width: 170px;       /* here the stylesheet sets the width instead */
  height: auto;
}
/* The stylesheet gives the header logo a height at every breakpoint (70px on
   desktop, 40px on mobile) and never a width, so the attribute was supplying
   613px and stretching it flat. The brand also carried
   max-width: calc(100% - 600px) from the theme, which collapses to nothing
   once the image stops overflowing it. */
.ina-navbar-section-header .ina-logo-wrapper {
  max-width: none;
  width: auto;
}
.ina-navbar-section-header .ina-logo-wrapper img {
  width: auto;
  max-width: 100%;
}
@media (min-width: 992px) {
  .ina-navbar-section-header { flex: 0 0 auto; }
}

/* ========================================
   HEADER FIT
   The menu labels were inheriting white-space: normal, so "About Us",
   "Our Gaushala", "Gau Seva" and "Visit Us" each broke onto two lines and
   the row grew past the container, pushing the CTA off the right edge.
   Keep every label on one line, then let the menu - not the CTA - absorb
   whatever width is left.
   ======================================== */
@media (min-width: 992px) {
  .ina-navbar .ina-wrraper-navbar .navbar-collapse .ina-main-menu .nav-item a {
    white-space: nowrap;
  }
  .ina-wraper-header-top { gap: 20px; }
  /* the menu is the flexible part; the phone and CTA keep their size */
  .ina-wraper-header-top > .ina-navbar { flex: 1 1 auto; min-width: 0; }
  .ina-wraper-header-top > .ina_position-right { flex: 0 0 auto; }
  /* without min-width: 0 a flex item refuses to shrink below its content, so
     the menu spilled out of the navbar and sat on top of the phone and CTA */
  .ina-navbar .ina-wrraper-navbar { min-width: 0; flex-wrap: nowrap; }
  .ina-navbar .ina-wrraper-navbar .navbar-collapse {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
  }
  .ina-navbar .ina-wrraper-navbar .navbar-collapse .ina-main-menu {
    flex-wrap: nowrap;
    margin-left: auto;
  }
}

/* 1200-1499px: seven labels, the phone block and the CTA cannot all sit on one
   row. Tighten the menu, and drop the phone to the top bar - the number is
   still there, and in the mobile drawer. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
  .ina-navbar .ina-wrraper-navbar .navbar-collapse .ina-main-menu .nav-item a {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
  .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.88rem; }
  .ina_position-right .header-phone { display: none; }
  .header-cta-btn { padding: 0 18px !important; font-size: 0.74rem !important; }
}

/* ========================================
   HEADER FIT — 7 menu items + phone + CTA overflow the row between the
   bootstrap lg breakpoint and 1200px, so tighten the bar in that band
   ======================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .ina-wraper-header-top { gap: 10px; }
  .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.8rem; }
  .ina-main-menu .nav-item { margin: 0 2px; }
  /* nowrap labels cannot be squeezed by flex, so the padding has to give */
  .ina-navbar .ina-wrraper-navbar .navbar-collapse .ina-main-menu .nav-item a {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
  /* the number stays reachable in the top bar and the mobile drawer */
  .ina_position-right .header-phone { display: none; }
  .header-cta-btn {
    height: 42px;
    padding: 0 12px !important;
    font-size: 0.72rem !important;
  }
  .header-cta-btn i { display: none; }
}

/* ========================================
   EVENT CTA PAIR — the two buttons under "Mark Your Occasion"
   sat at different widths and heights, and the bootstrap ms-3 pushed the
   second one off-axis once they wrapped
   ======================================== */
.event-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
}
.event-cta-row .ina_button {
  margin: 0;
  flex: 0 1 auto;
  min-width: 170px;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 0.78rem;
  letter-spacing: 0.8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (max-width: 767px) {
  .event-cta-row { flex-direction: column; }
  .event-cta-row .ina_button {
    width: 100%;
    min-width: 0;
  }
}

/* ========================================
   NAVBAR CTA — "Join Our Community" pops gently and catches a shine
   ======================================== */
.header-cta-btn {
  position: relative;
  overflow: hidden;
  transform-origin: center;
  animation: cta-pop 3.2s ease-in-out infinite;
}
/* diagonal highlight sweeping across the pill */
.header-cta-btn::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -40%;
  width: 34%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(18deg);
  animation: cta-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}
.header-cta-btn > * {
  position: relative;
  z-index: 1;
}
.header-cta-btn:hover { animation-play-state: paused; }
.header-cta-btn:hover::after { animation-play-state: paused; }

@keyframes cta-pop {
  0%, 68%, 100% { transform: scale(1); }
  74% { transform: scale(1.06); }
  80% { transform: scale(0.985); }
  86% { transform: scale(1.02); }
}
@keyframes cta-shine {
  0% { left: -40%; }
  55%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .header-cta-btn,
  .header-cta-btn::after { animation: none; }
}

/* ========================================
   VIDEO HERO — autoplaying loop behind the headline
   ======================================== */
.hero-section.hero-video {
  position: relative;
  display: flex;
  align-items: center;
  height: 72vh;
  min-height: 420px;
  max-height: 760px;
  padding: 0;
  overflow: hidden;
  background: #2a1b0f;
}
.hero-video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}
.hero-section.hero-video > .container {
  position: relative;
  z-index: 3;
  width: 100%;
}

@media (max-width: 991px) {
  /* no copy inside, so the section needs its own height or it collapses
     to nothing but its padding */
  .hero-section.hero-video { height: 46vh; min-height: 280px; max-height: none; padding: 0; }
}
@media (max-width: 575px) {
  .hero-section.hero-video { height: 38vh; min-height: 240px; }
}
/* a moving background is a problem for some visitors */
@media (prefers-reduced-motion: reduce) {
  .hero-video-media { display: none; }
  .hero-section.hero-video {
    background-image: url("../img/posts/g_6.webp");
    background-size: cover;
    background-position: center;
  }
}

/* ========================================
   EVENT CLOSED STATE
   ======================================== */
.upcoming-item.is-closed .upcoming-date {
  background: #8d8d8d;
  color: #fff;
}
.upcoming-item.is-closed .upcoming-weekday {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8a6b4f;
}
.upcoming-item.is-closed .upcoming-weekday .fi {
  font-size: 11px;
  color: #fff;
  background: #8d8d8d;
  border-radius: 50%;
  padding: 3px;
}
.upcoming-featured-tag.is-closed .fi { font-size: 12px; }

.upcoming-featured-tag.is-closed {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  color: #b3450a;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ========================================
   GALLERY
   ======================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.gallery-item {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #f2f0e6;
  box-shadow: 0 10px 26px rgba(40, 60, 38, 0.08);
}
.gallery-item-wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 16px 14px;
  font-family: "Jost", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #fff;
  background: linear-gradient(180deg, rgba(28, 16, 6, 0) 0%, rgba(28, 16, 6, 0.72) 100%);
}

@media (max-width: 991px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gallery-item-wide { grid-column: span 2; }
}
@media (max-width: 575px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-item figcaption { font-size: 0.76rem; padding: 20px 12px 10px; }
}

/* ========================================
   TESTIMONIALS
   ======================================== */
.testimonial-note {
  margin: 34px 0 0;
  font-size: 0.95rem;
  color: #5b5b5b;
}
.testimonial-note a { color: #ef6c17; font-weight: 600; }

/* Video testimonials — portrait clips in a carousel, muted and looping */
.vtestimonial-swiper { margin-bottom: 20px; }
.vtestimonial-card {
  position: relative;
  margin: 0;
  height: 380px;
  overflow: hidden;
  border-radius: 16px;
  border: 1.5px solid rgba(60, 90, 55, 0.14);
  background: #1f2a1c;
  box-shadow: 0 10px 30px rgba(40, 60, 38, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vtestimonial-card {
  cursor: pointer;
}
.vtestimonial-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(40, 60, 38, 0.12); }
.vtestimonial-poster,
.vtestimonial-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* the clips are portrait, so the whole frame is shown rather than cropped */
  object-fit: contain;
  object-position: center;
}
/* the still stays put until the card is hovered or tapped */
.vtestimonial-video {
  background: transparent;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.vtestimonial-card.is-playing .vtestimonial-video { opacity: 1; }
.vtestimonial-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #ef6c17;
  font-size: 1.3rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.vtestimonial-card:hover .vtestimonial-play { transform: translate(-50%, -50%) scale(1.08); }
.vtestimonial-card.is-playing .vtestimonial-play {
  opacity: 0;
  pointer-events: none;
}
.vtestimonial-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, transparent 34%, rgba(0, 0, 0, 0.4) 100%);
}
.vtestimonial-duration {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.vtestimonial-sound {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  color: #1f2a1c;
  font-size: 1rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  transition: transform 0.25s ease, background 0.25s ease;
}
.vtestimonial-sound:hover,
.vtestimonial-sound:focus-visible { transform: scale(1.08); background: #fff; }
.vtestimonial-sound[aria-pressed="true"] { background: #ef6c17; color: #fff; }

.vtestimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 34px;
}
.vtestimonial-pagination {
  position: static;
  width: auto !important;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.vtestimonial-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 !important;
  background: #f3b183;
  opacity: 1;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.vtestimonial-pagination .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 5px;
  background: #ef6c17;
}
.vtestimonial-pagination .swiper-pagination-bullet:hover { background: #ef6c17; }
.vtestimonial-arrow {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid rgba(60, 90, 55, 0.2);
  border-radius: 50%;
  cursor: pointer;
  background: #fff;
  color: #2f6b2b;
  transition: background 0.25s ease, color 0.25s ease;
}
.vtestimonial-arrow:hover { background: #2f6b2b; color: #fff; }
.vtestimonial-arrow.swiper-button-disabled { opacity: 0.4; cursor: default; }

@media (max-width: 767px) {
  .vtestimonial-card { height: 320px; }
  .vtestimonial-swiper { margin-bottom: 14px; }
  .vtestimonial-controls { margin-bottom: 26px; }
}


/* ========================================
   EVENT BANNER — closed stamp
   ======================================== */
.event-banner.is-closed img { filter: saturate(0.82) brightness(0.92); }
/* soft veil so the stamp reads against any part of the artwork */
.event-banner.is-closed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(38, 22, 10, 0.28);
  pointer-events: none;
}
.event-banner-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 30px;
  border: 3px solid #fff;
  border-radius: 14px;
  background: rgba(179, 69, 10, 0.92);
  color: #fff;
  box-shadow: 0 16px 34px rgba(40, 20, 6, 0.35);
  pointer-events: none;
}
.event-banner-stamp .fi {
  font-size: 26px;
  color: #fff;
}
.event-banner-stamp-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}
.event-banner-stamp strong {
  font-family: "Jost", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.event-banner-stamp small {
  font-family: "Jost", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.9;
}

@media (max-width: 767px) {
  .event-banner-stamp { gap: 10px; padding: 11px 18px; border-width: 2px; }
  .event-banner-stamp .fi { font-size: 18px; }
  .event-banner-stamp strong { font-size: 1rem; letter-spacing: 2px; }
  .event-banner-stamp small { font-size: 0.66rem; letter-spacing: 1px; }
}