/* ================= PRO HERO SECTION ================= */
/* ================= PRO HERO SECTION ================= */
.pro-hero {
  min-height: 85vh;
  position: relative;
  display: flex;
  align-items: center;
  font-family: "Poppins", sans-serif;
  overflow: hidden;
}

/* Background image */
.pro-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../image/rajyotsava-day-karnataka-formation-day-hands-background_548646-80127.jpeg")
    center / cover no-repeat;
  z-index: 0;
}

/* Overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25));
  z-index: 1;
}

/* Container */
.container-xxl {
  position: relative;
  z-index: 2;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1400px) {
  .container-xxl {
    max-width: 1550px;
  }
}

/* Row */
.pro-hero .row {
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 60px);
}

/* ================= GANESH IMAGE ================= */
.ganesh-circle {
  width: clamp(280px, 38vw, 520px);
  height: clamp(280px, 38vw, 520px);
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  margin: 0 auto;
  flex-shrink: 0;
}

/* Divine glow */
.divine-glow {
  box-shadow:
    0 0 40px rgba(255, 215, 120, 0.6),
    0 0 90px rgba(255, 190, 80, 0.4);
}

.ganesh-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ================= HERO CONTENT ================= */
.hero-content {
  max-width: 720px;
  padding-left: clamp(0px, 4vw, 50px);
}

/* Mantra */
.hero-mantra {
  display: block;
  font-size: clamp(16px, 2vw, 22px);
  letter-spacing: 3px;
  color: #ffd27a;
  margin-bottom: 10px;
}

/* Title */
.hero-title {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 500;
  line-height: 1.25;
  max-width: 100%;
  white-space: normal;
}

.hero-title span {
  display: block;
  color: #fff8e0;
}

/* ================= BUTTON ================= */
.darshan-btn-pro {
  display: inline-block;
  margin-top: 30px;
  background: linear-gradient(135deg, #fcbf44, #ff9f1c);
  color: #000;
  padding: 14px 40px;
  border-radius: 50px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.darshan-btn-pro:hover {
  background: linear-gradient(135deg, #ff9f1c, #fcbf44);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255, 190, 80, 0.5);
}

/* ================= TABLET ================= */
@media (max-width: 991px) {
  .pro-hero {
    min-height: auto;
    padding: 70px 0;
  }

  .hero-content {
    padding-left: 0;
    text-align: center;
  }
}

/* ================= MOBILE ================= */
@media (max-width: 576px) {
  .hero-title {
    font-size: 24px;
  }

  .hero-mantra {
    font-size: 16px;
  }

  .darshan-btn-pro {
    padding: 12px 30px;
    font-size: 14px;
  }
}

/* ================= PRO HERO SECTION ================= */

/* =============== VIDEO SECTION STYLES =============== */
.ganesh-videos {
  background: linear-gradient(180deg, #fcf6f0 0%, #fcf6f0 100%);
  padding: clamp(50px, 6vw, 80px) 0;
  font-family: "Poppins", sans-serif;
}

/* Inner Box */
.ganesh-video-box {
  border-radius: 28px;
}

/* ================= SECTION TAG ================= */
.section-tag {
  display: inline-block;
  padding: clamp(6px, 1vw, 8px) clamp(12px, 2vw, 16px);
  background: rgba(211, 84, 0, 0.12);
  color: #d35400;
  font-weight: 600;
  font-size: clamp(12px, 1.1vw, 14px);
  border-radius: 20px;
  margin-bottom: 14px;
}

/* ================= HEADING ================= */
.ganesh-videos h2 {
  font-weight: 800;
  color: #d35400;
  margin-bottom: 16px;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
}

.ganesh-videos h2 span {
  display: block;
  font-weight: 700;
  font-size: 0.95em;
  color: #b84300;
  margin-top: 4px;
}

/* ================= DESCRIPTION ================= */
.ganesh-videos p {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.8;
  color: #555;
  max-width: 700px;
}

/* ================= VIDEO CARD ================= */
.video-card {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  transition: transform 0.4s ease;
}

.video-card:hover {
  transform: scale(1.02);
}

.ganesh-videos {
  padding: 80px 0;
}

.video-thumb {
  position: relative;
  cursor: pointer;
  border-radius: 18px;
  overflow: hidden;
}

.video-thumb img {
  width: 100%;
  display: block;
  height: 550px;
  object-fit: cover;
}

.play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: #fff;
  background: rgba(47, 47, 47, 0.089);
  transition: 0.3s ease;
}

.video-thumb:hover .play-btn {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.video-title span {
  color: #c98b2c;
}

.section-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin: 40px 0;
}

/* ================= DIVIDER ================= */
.section-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(to right, transparent, #ddd, transparent);
  margin: clamp(25px, 4vw, 40px) 0;
}

/* ================= BUTTONS ================= */
.video-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 2vw, 18px);
}

.video-actions .btn {
  padding: clamp(11px, 1.3vw, 14px) clamp(18px, 2.5vw, 30px);
  border-radius: 30px;
  font-weight: 600;
  min-width: 180px;
  color: #fff;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.video-actions .btn i {
  font-size: 18px;
}

/* Hover */
.video-actions .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

/* ================= BUTTON COLORS ================= */
.btn-youtube {
  background: #e60023;
}

.btn-whatsapp {
  background: #25d366;
}

.btn-instagram {
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
}

.btn-donate {
  background: #f39c12;
}

.btn-youtube:hover,
.btn-whatsapp:hover,
.btn-instagram:hover,
.btn-donate:hover {
  color: #2a2929;
}

/* ================= LAPTOP TUNING ================= */
@media (max-width: 1200px) {
  .ganesh-videos p {
    max-width: 100%;
  }

  .video-actions .btn {
    min-width: 160px;
  }
}

/* ================= TABLET ================= */
@media (max-width: 991px) {
  .ganesh-videos {
    padding: 40px 2px;
  }

  .ganesh-videos h2,
  .ganesh-videos p {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
  }

  .video-card {
    margin-bottom: 25px;
  }
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
  .video-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 buttons per row */
    gap: 12px;
  }

  .video-actions .btn {
    width: 100%;
    min-width: unset;
    padding: 12px 16px;
    font-size: 13px;
  }

  .video-actions .btn i {
    font-size: 16px;
  }
  .video-thumb img {
  width: 100%;
  display: block;
  height: 250px;
  object-fit: cover;
}
}

/* ================= EXTRA SMALL ================= */
@media (max-width: 480px) {
  .ganesh-videos h2 {
    font-size: 22px;
  }

  .ganesh-videos p {
    font-size: 14px;
  }

  /* 👇 KEEP 2 buttons per row */
  .video-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .ganesh-videos .row {
    --bs-gutter-x: 0;
  }
}
/* =============== VIDEO SECTION STYLES =============== */

.lotus-bg-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(20px, 10vw, 120px);
  font-weight: 400;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: rgba(231, 113, 22, 0.15); /* temple saffron */
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-family: "Poppins", "Noto Serif", serif;
}

.ganesh-lotus-section {
  background: #fdf7f1;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  padding-top: 150px;
}

.lotus-wrapper {
  position: relative;
  width: 520px; /* unified width */
  height: 400px; /* unified height */
  margin: auto;
}

/* ================= PETALS ================= */
.petal {
  position: absolute;
  width: 200px;
  left: 50%;
  bottom: 20px;
  transform-origin: 50% 100%;
  opacity: 0.75;
  z-index: 1; /* PETALS STAY BEHIND */

  /* Smooth animation for scroll */
  transition:
    transform 1s ease,
    opacity 1s ease;
}

/* CENTER PETAL */
.p1 {
  transform: translateX(-50%) rotate(0deg);
}

/* LEFT INNER */
.p2 {
  transform: translateX(-50%) rotate(-33deg);
}

/* RIGHT INNER */
.p3 {
  transform: translateX(-50%) rotate(33deg);
}

/* LEFT OUTER */
.p4 {
  transform: translateX(-50%) rotate(-62deg);
  opacity: 0.55;
}

/* RIGHT OUTER */
.p5 {
  transform: translateX(-50%) rotate(62deg);
  opacity: 0.55;
}

.ganesh-center {
  position: absolute;
  left: 50%;
  bottom: -25px;
  transform: translateX(-50%);
  width: 360px;
  height: 360px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 5; /* ABOVE PETALS */
}

.ganesh-center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center; /* aligns image to bottom */
}

.ganesh-mantra {
  margin-top: 70px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.mantra-kannada {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 600;
  color: #d35400; /* divine saffron */
  letter-spacing: 2px;
  margin-bottom: 6px;
  font-family: "Noto Serif Devanagari", "Mangal", serif;
}

.mantra-meaning {
  font-size: 20px;
  color: #7a4a2d;
  letter-spacing: 1px;
  font-weight: 500;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 576px) {
  .lotus-wrapper {
    width: 400px;
    height: 340px;
  }
  .petal {
    width: 240px;
  }
}
/* ================= LOTUS SECTION – MOBILE RESPONSIVE ================= */

/* Tablets & below */
@media (max-width: 768px) {
  .ganesh-lotus-section {
    padding-top: 100px;
    padding-bottom: 10px;
  }

  .lotus-bg-title {
    font-size: clamp(18px, 12vw, 70px);
    letter-spacing: 4px;
    text-align: center;
  }

  .lotus-wrapper {
    width: 260px;
    height: 150px;
  }

  .petal {
    width: 90px;
    bottom: 10px;
  }

  .ganesh-center {
    width: 160px;
    height: 160px;
    bottom: -15px;
  }

  .ganesh-mantra {
    margin-top: 10px;
  }

  .mantra-kannada {
    font-size: 24px;
    letter-spacing: 1.5px;
    padding-top: 24px;
  }

  .mantra-meaning {
    font-size: 12px;
  }
}
/* ================= TEMPLE INFO SECTION ================= */
.temple-info-section {
  background-color: #efe7dd;
  background-image: url("../image/Untitled\ design\ \(2\).png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  padding: 0px 0;
  position: relative;
  overflow: hidden;
}

/* Soft overlay for elegance */
.temple-info-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  z-index: 0;
}

/* Card Style */
.info-card {
  background: #ffffff;
  padding: 45px 15px;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transition: all 0.35s ease;
  position: relative;
  z-index: 1;
}

/* Gold top border */
.info-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  width: 70%;
  height: 3px;
  background: linear-gradient(90deg, #cfa13d, #e8c76a, #cfa13d);
}

.temple-info-section .container,
.temple-info-section .row {
  position: relative;
  z-index: 2;
}

/* Hover Effect */
.info-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.12);
}

/* Icons */
.info-icon {
  width: 88px;
  margin-bottom: 18px;
}

/* Headings */
.info-card h4 {
  font-family: "Playfair Display", serif;
  font-size: 21px;
  color: #5a2d0c;
  margin-bottom: 12px;
  line-height: 1.3;
}

/* Main Time */
.info-time {
  font-size: 16px;
  font-weight: 600;
  color: #3b2a1a;
}

/* Sub Text */
.info-sub {
  font-size: 14px;
  color: #6a4b2e;
  margin-bottom: 4px;
}

.temple-info-section .row {
  justify-content: space-around; /* instead of space-between */
}

.temple-info-section .temple-col {
  flex: 0 0 25%;
  max-width: 25%;
}

/* Make card LOOK like 22% using padding */
.info-card {
  padding: 40px 30px;
}

/* Tablet */
@media (max-width: 991px) {
  .temple-info-section .temple-col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 575px) {
  .temple-info-section .temple-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .info-card {
    padding: 35px 12px;
  }

  .info-icon {
    width: 75px;
  }

  .info-card h4 {
    font-size: 19px;
  }
}
/* ================= LAPTOP RESPONSIVE ================= */
@media (min-width: 992px) and (max-width: 1366px) {
  /* ===== LOTUS SECTION ===== */
  .ganesh-lotus-section {
    padding-top: 130px;
    padding-bottom: 60px;
  }

  .lotus-bg-title {
    font-size: clamp(50px, 8vw, 90px);
    letter-spacing: 6px;
  }

  .lotus-wrapper {
    width: 420px;
    height: 320px;
  }

  .petal {
    width: 160px;
    bottom: 18px;
  }

  .ganesh-center {
    width: 280px;
    height: 280px;
    bottom: -20px;
  }

  .ganesh-mantra {
    margin-top: 40px;
  }

  .mantra-kannada {
    font-size: 34px;
    letter-spacing: 1.8px;
  }

  .mantra-meaning {
    font-size: 16px;
  }

  /* ===== TEMPLE INFO SECTION ===== */
  .temple-info-section {
    background-size: 110%;
    padding: 40px 0;
  }

  .temple-info-section .temple-col {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .info-card {
    padding: 36px 22px;
  }

  .info-icon {
    width: 80px;
  }

  .info-card h4 {
    font-size: 20px;
  }

  .info-time {
    font-size: 15px;
  }

  .info-sub {
    font-size: 13px;
  }
}
@media (min-width: 992px) and (max-width: 1600px) {
  .lotus-bg-title {
    font-size: clamp(36px, 5.5vw, 100px);
  }
}

/* ================= SERENITY SECTION ================= */
.serenity-section {
  background: #efe7dd;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

/* Mandala watermark */
.serenity-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../image/temple\ 1.png") center/720px no-repeat;
  opacity: 0.07;
}

/* Grid layout */
.serenity-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 0px;
  position: relative;
  z-index: 2;
}

/* LEFT CONTENT */
.serenity-eyebrow {
  letter-spacing: 3px;
  font-size: 12px;
  color: #6a4b2e;
  text-transform: uppercase;
}

.serenity-content h1 {
  font-family: "Playfair Display", serif;
  font-size: 58px;
  color: #4a2c18;
  line-height: 1.15;
  margin: 20px 0;
}

.serenity-content p {
  max-width: 520px;
  font-size: 15px;
  line-height: 1.7;
  color: #5e4a3b;
  margin-bottom: 34px;
}

.serenity-btn {
  display: inline-block;
  background: #d45a2a;
  color: #fff;
  padding: 13px 30px;
  font-size: 14px;
  letter-spacing: 1px;
  text-decoration: none;
  transition: 0.3s;
}

.serenity-btn:hover {
  background: #b7461f;
}

/* RIGHT VISUAL */
.serenity-visual {
  position: relative;
  min-height: 420px; /* ensures space for overlapping */
}

/* Main Buddha Image */
.main-image {
  width: 420px;
  display: block;
  margin-left: 70px;
  position: relative;
  z-index: 2;
  border-radius: 2px;
  height: 70vh;
  object-fit: cover;
}

/* Stat Box */
.stat-box {
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
}

.stat-box h2 {
  font-family: "Playfair Display", serif;
  font-size: 56px;
  color: #4a2c18;
  margin: 0;
}

.stat-box span {
  font-size: 14px;
  color: #6a4b2e;
}

/* Quote Card */
.quote-card {
  position: absolute;
  left: 0;
  bottom: 0px;
  background: #f8f5f1;
  padding: 30px;
  width: 300px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
  z-index: 3;
  transition: transform 0.2s ease-out; /* smooth scroll movement */
}

.quotes-wrapper {
  position: relative;
  height: 120px; /* adjust based on quote length */
  overflow: hidden;
}

.quote {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.quote.active {
  opacity: 1;
  z-index: 2;
}

.quote-card p {
  font-size: 14px;
  color: #555;
  margin-bottom: 16px;
}

.quote-card strong {
  display: block;
  font-size: 14px;
}

.quote-card span {
  font-size: 12px;
  color: #888;
}

/* Dots */
.dots {
  margin-top: 10px;
}

.dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #d45a2a;
  border-radius: 50%;
  margin-right: 6px;
  cursor: pointer;
}

.dots span.active {
  background: #b7461f;
}

/* Side Temple Image */
.side-image {
  width: 220px;
  position: absolute;
  right: 0;
  bottom: 0;
}

/* Lotus Icon */

.lotus-icon {
  position: absolute;
  right: 90px; /* same as before */
  top: 250px; /* adjust if needed */
  width: 100px; /* width of the lotus image */
  height: 70px; /* height of the lotus image */
  z-index: 4;
}

.lotus-icon img {
  width: 150%;
  height: 150%;
  object-fit: contain;
}
/* ================= LAPTOP RESPONSIVE ================= */

/* Small laptops (1024px – 1199px) */
@media (max-width: 1199px) {
  .serenity-section {
    padding: 80px 0;
  }

  .serenity-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .serenity-content h1 {
    font-size: 48px;
  }

  .serenity-content p {
    font-size: 14px;
    max-width: 480px;
  }

  .main-image {
    width: 360px;
    height: 60vh;
    margin-left: 40px;
  }

  .quote-card {
    width: 280px;
    padding: 24px;
    bottom: -10px;
  }

  .stat-box h2 {
    font-size: 48px;
  }

  .lotus-icon {
    right: 60px;
    top: 220px;
    width: 80px;
    height: 60px;
  }
}

/* Standard laptops (1200px – 1440px) */
@media (min-width: 1200px) and (max-width: 1440px) {
  .serenity-content h1 {
    font-size: 54px;
  }

  .main-image {
    width: 400px;
    height: 65vh;
    margin-left: 60px;
  }

  .quote-card {
    width: 300px;
    bottom: 0;
  }

  .lotus-icon {
    right: 80px;
    top: 240px;
  }
}
/* RESPONSIVE */
/* ===========================
   Tablet / Smaller Screens ≤991px
=========================== */
@media (max-width: 991px) {
  /* Grid becomes single column */
  .serenity-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* Quote card flows naturally */
  .quote-card {
    position: static;
    margin-top: 30px;
  }

  /* Main image responsive */
  .main-image {
    margin: auto;
    width: 100%;
    height: auto;
  }

  /* Side image hidden */
  .side-image {
    position: static;
    width: 100%;
    margin-top: 20px;
    display: none;
  }

  /* Lotus icon centered */
  .lotus-icon {
    position: static;
    margin: 20px auto 0;
    display: block;
    text-align: center;
  }

  /* Stat box centered */
  .stat-box {
    position: static;
    text-align: center;
    margin-bottom: 20px;
  }
}

/* ===========================
   Mobile Screens ≤768px
=========================== */
@media (max-width: 768px) {
  .serenity-section {
    padding: 60px 0;
  }

  .serenity-grid {
    display: flex;
    flex-direction: column; /* stack items vertically */
    gap: 5; /* remove any column gap */
  }

  /* Main image first */
  .main-image {
    order: 1;
    width: 100%;
    max-width: 400px;
  }

  /* Content wrapper second */
  .serenity-content {
    order: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* Eyebrow inside content */
  .serenity-eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 5px;
    text-align: left;
  }

  /* H1 inside content */
  .serenity-content h1 {
    font-size: 34px;
    margin-bottom: 10px;
    text-align: left;
  }

  /* Paragraph inside content */
  .serenity-content p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: left;
  }

  /* Button inside content */
  .serenity-btn {
    display: inline-block;
    background: #d45a2a;
    color: #fff;
    padding: 13px 30px;
    font-size: 14px;
    letter-spacing: 1px;
    text-decoration: none;
    transition: 0.3s;
    margin-top: 10px;
    text-align: left; /* use center if you prefer */
  }

  .serenity-btn:hover {
    background: #b7461f;
  }

  /* Quote card hidden */
  .quote-card {
    display: none;
  }
}
/* Remove pseudo-element background on mobile */
@media (max-width: 768px) {
  .serenity-section {
    padding: 30px 0px; /*ust as needed */
  }

  .serenity-section::before {
    display: none;
  }
}
@media (max-width: 768px) {
  .lotus-icon {
    right: 20px;
    top: 120px;
    width: 60px;
    height: 40px;
    display: none;
  }

  .lotus-icon img {
    width: 100%;
    height: 100%;
  }
}

/*--------upcoming events-------*/
.upcoming-events {
  background-color: #f8f4ee;
  padding: 60px 0;
}

.section-title {
  font-family: Georgia, serif;
  letter-spacing: 2px;
  font-weight: 500;
  color: #3a1f0f;
}

/* Event Card */
.event-card {
  padding: 10px;
  text-align: center;
  height: 430px;          /* set fixed height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.event-img {
  width: 100%;
  max-width: 260px;
  height: 320px;
  object-fit: cover;
  display: block;
  margin: 0 auto 15px;
  border-radius: 6px;
}

.event-title {
  font-style: italic;
  font-weight: 600;
  margin-bottom: 4px;
  color: #000;
  font-size: 16px;
}

.event-date {
  font-style: italic;
  font-size: 14px;
  color: #555;
}

/* Carousel Indicators */
.carousel-indicators {
  bottom: -40px;
}

.carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #c9b8aa;
  opacity: 1;
  margin: 0 6px;
  border: none;
}

.carousel-indicators .active {
  background-color: #d8632a;
}

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

@media (max-width: 768px) {

  .upcoming-events {
    padding: 40px 10px;
  }

  .section-title {
    font-size: 20px;
    letter-spacing: 1px;
  }

  .event-card {
    padding: 8px;
  text-align: center;
  height: 380px;          /* set fixed height */
  display: flex;
  flex-direction: column;
  }

  .event-img {
    max-width: 250px;
    height: 280px;
    margin-bottom: 10px;
  }

  .event-title {
    font-size: 16px;
      font-weight: 500;

  }

  .event-date {
    font-size: 13px;
  }

  .carousel-indicators {
    bottom: -25px;
  }

  .carousel-indicators button {
    width: 8px;
    height: 8px;
    margin: 0 4px;
  }
}

/* =========================
   DESKTOP 4-CARD LAYOUT
========================= */

/* Default (Mobile = 1 card centered) */
/* =========================
   DESKTOP 4 CARD FIX
========================= */

@media (min-width: 768px) {

  #eventsCarousel .carousel-inner {
    display: flex !important;
  }

  #eventsCarousel .carousel-item {
    display: block !important;
    margin-right: 0;
    flex: 0 0 25%;
    max-width: 25%;
  }

  #eventsCarousel .carousel-item.active,
  #eventsCarousel .carousel-item-next,
  #eventsCarousel .carousel-item-prev {
    display: block !important;
  }

  /* Disable Bootstrap slide transform */
  #eventsCarousel .carousel-item-next,
  #eventsCarousel .carousel-item-prev,
  #eventsCarousel .carousel-item-start,
  #eventsCarousel .carousel-item-end {
    transform: none !important;
  }
}

/* =========================
   TEMPLE BANNER
========================= */

.temple-banner {
  width: 100%;
  overflow: hidden;
}

.banner-img {
  width: 100%;
  height: 550px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

@media (max-width: 992px) {
  .banner-img {
    height: 320px;
  }
}

@media (max-width: 576px) {
  .banner-img {
    height: 220px;
  }
}