/* ==========================================================================
   Makilchi Illam Old Age Home (New Born Trust) - Custom Enhancements & Mobile Motion
   Built on Charifund HTML5 Template
   ========================================================================== */

:root {
  --makilchi-green: #046a58;
  --makilchi-dark: #0c2b24;
  --makilchi-gold: #e59a28;
  --makilchi-gold-light: #ffc107;
  --makilchi-cream: #f9f6f0;
  --makilchi-red: #d9383a;
}

html,
body {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Fix template main.css text-transform: lowercase !important and div { line-height: 0px !important } bugs */
.title-animation,
.title-animation * {
  text-transform: none !important;
  line-height: 1.28 !important;
}

small,
.small,
strong,
b,
em,
a,
button,
blockquote,
label,
input,
textarea {
  line-height: 1.5;
}

.contact__form .btn--primary i,
.checkout__form .btn--primary i {
  transform: none !important;
}

.makilchi-word {
  display: inline-block;
  white-space: nowrap;
  will-change: transform, opacity;
}

/* Mobile Compact Top Trust Bar */
.mobile-trust-topbar {
  background: linear-gradient(90deg, #07221c 0%, #046a58 100%);
  color: #ffffff;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 193, 7, 0.25);
  z-index: 100;
}
.mobile-trust-topbar__reg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.92);
}
.mobile-trust-topbar__call {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffc107 !important;
  font-weight: 700;
  text-decoration: none;
  background: rgba(255, 193, 7, 0.14);
  padding: 2px 10px;
  border-radius: 30px;
  border: 1px solid rgba(255, 193, 7, 0.4);
}

/* Navbar Logo & Header Adjustments */
.navbar-brand.logo img {
  max-height: 64px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.navbar-brand.logo:hover img {
  transform: scale(1.02);
}
.mobile-menu__header .logo img {
  max-height: 52px;
  width: auto;
}
.footer-two__logo img {
  max-height: 72px;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

/* Bilingual Tamil Badge with Subtle Shimmer */
.tamil-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 193, 7, 0.16);
  border: 1px solid rgba(255, 193, 7, 0.48);
  color: #ffc107;
  padding: 6px 15px;
  border-radius: 50px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(6px);
}
.tamil-badge--light {
  background: rgba(4, 106, 88, 0.1);
  border-color: rgba(4, 106, 88, 0.28);
  color: var(--makilchi-green);
  box-shadow: none;
}

/* ==========================================================================
   1st Starting Main Intro Video Section (Full Unobstructed View, No Text Overlay)
   ========================================================================== */
.hero-intro-video-section {
  position: relative;
  width: 100%;
  background: #061c17;
  overflow: hidden;
  border-bottom: 3px solid rgba(255, 193, 7, 0.55);
}
.hero-intro-video-container {
  position: relative;
  width: 100%;
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #061c17;
}
.hero-intro-video-full {
  width: 100%;
  max-height: 86vh;
  height: auto;
  display: block;
  object-fit: cover;
  background: #061c17;
}
.hero-scroll-down-btn {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 193, 7, 0.92);
  color: #07221c !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  z-index: 5;
  text-decoration: none;
  animation: makilchiBounceDown 2s infinite;
}
@keyframes makilchiBounceDown {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-8px);
  }
  60% {
    transform: translateX(-50%) translateY(-4px);
  }
}

/* ==========================================================================
   Hero Banner & Sequenced Text Slide Motion Graphics (Next Section Below Video)
   ========================================================================== */
.banner-two__slider-single {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.banner-two__slider-bg {
  background-size: cover !important;
  background-position: center center !important;
  transform: scale(1);
  transition: transform 7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.swiper-slide-active .banner-two__slider-bg {
  transform: scale(1.09);
}
.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
}
.banner-two__slider-single::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(7, 26, 22, 0.9) 0%,
    rgba(7, 26, 22, 0.72) 55%,
    rgba(7, 26, 22, 0.38) 100%
  ) !important;
  z-index: 1;
}
.banner-two__slider-content {
  position: relative;
  z-index: 3;
}
.banner-two__slider-content h1 {
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
.banner-two__slider-content .hero-lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.12rem;
  line-height: 1.7;
  max-width: 640px;
  margin-top: 16px;
  margin-bottom: 24px;
}

/* Keyframe Slide-Up & Staggered Text Entrance on Active Hero Slide */
@keyframes makilchiSlideUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.swiper-slide-active .banner-two__slider-content .tamil-badge {
  animation: makilchiSlideUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.swiper-slide-active .banner-two__slider-content .sub-title {
  animation: makilchiSlideUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}
.swiper-slide-active .banner-two__slider-content h1 {
  animation: makilchiSlideUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both;
}
.swiper-slide-active .banner-two__slider-content .hero-lead {
  animation: makilchiSlideUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.48s both;
}
.swiper-slide-active .banner-two__slider-content .hero-meta-pills {
  animation: makilchiSlideUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}
.swiper-slide-active .banner-two__slider-content .banner__content-cta {
  animation: makilchiSlideUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.72s both;
}

.hero-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.hero-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
}
.hero-meta-pill i {
  color: #ffc107;
}

/* ==========================================================================
   Animated Infinite Marquee Ticker Bar
   ========================================================================== */
.makilchi-marquee-bar {
  background: linear-gradient(90deg, #08241e 0%, #046a58 50%, #08241e 100%);
  border-top: 2px solid rgba(255, 193, 7, 0.45);
  border-bottom: 2px solid rgba(255, 193, 7, 0.45);
  padding: 13px 0;
  overflow: hidden;
  position: relative;
  z-index: 5;
}
.makilchi-marquee-track {
  display: flex;
  width: max-content;
  animation: makilchiTicker 36s linear infinite;
}
.makilchi-marquee-bar:hover .makilchi-marquee-track {
  animation-play-state: paused;
}
.makilchi-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 600;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.makilchi-marquee-item i {
  color: #ffc107;
  font-size: 1rem;
}
@keyframes makilchiTicker {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ==========================================================================
   About Section Collage (Desktop & Mobile Grid)
   ========================================================================== */
.help__thumb-inner .thumb img {
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 14px 35px rgba(12, 43, 36, 0.18);
}
.help__thumb .lg-thumb img {
  width: 100%;
  height: 440px;
  object-fit: cover;
}
.help__thumb .sm-thumb img {
  width: 240px;
  height: 220px;
  object-fit: cover;
  border: 5px solid #ffffff;
}
.help__thumb .md-thumb img {
  width: 260px;
  height: 210px;
  object-fit: cover;
  border: 5px solid #ffffff;
}

/* Mobile About Visual Showcase (< 992px) */
.mobile-about-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 10px;
}
.mobile-about-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(12, 43, 36, 0.14);
}
.mobile-about-card--main img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
}
.mobile-about-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mobile-about-subgrid .mobile-about-card img {
  width: 100%;
  height: 145px;
  object-fit: cover;
  display: block;
}
.mobile-about-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(12, 43, 36, 0.88);
  color: #ffc107;
  padding: 5px 13px;
  border-radius: 30px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid rgba(255, 193, 7, 0.45);
  backdrop-filter: blur(4px);
}
.mobile-about-caption {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  background: rgba(12, 43, 36, 0.84);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

/* Cause / Service Cards */
.cause__slider-single {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.cause__slider-single:hover {
  transform: translateY(-6px);
}
.cause__slider-single .thumb img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

/* Gallery / Documentary Cards */
.makilchi-gallery-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  background: #0c2b24;
  height: 310px;
}
.makilchi-gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.makilchi-gallery-card:hover img {
  transform: scale(1.07);
  opacity: 0.88;
}
.makilchi-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(9, 31, 27, 0.93) 0%,
    rgba(9, 31, 27, 0.35) 52%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  color: #ffffff;
}
.makilchi-gallery-overlay span.tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--makilchi-gold-light);
  color: #0c2b24;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.makilchi-gallery-overlay h5 {
  color: #ffffff;
  font-size: 1.14rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.makilchi-gallery-overlay p {
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.4;
}

/* Documentary Video & Theme Song Showcase */
.documentary-section {
  background: linear-gradient(135deg, #0b2923 0%, #046a58 100%);
  color: #ffffff;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.documentary-video-wrapper {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
  border: 3px solid rgba(255, 193, 7, 0.48);
  background: #000;
}
.documentary-video-wrapper video {
  width: 100%;
  max-height: 500px;
  display: block;
  object-fit: cover;
}
.theme-song-box {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  padding: 22px;
  margin-top: 22px;
}
.theme-song-box h5 {
  color: #ffc107;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 1.08rem;
}
.theme-song-box audio {
  width: 100%;
  margin-top: 10px;
  border-radius: 50px;
}

/* Community / Interactive Donation Image */
.community-elder-img {
  border-radius: 16px;
  object-fit: cover;
  max-height: 460px;
  width: 100%;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25);
}

/* Team / Leadership Cards */
.team__single-thumb img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: top center;
}
.founder-highlight-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 16px 45px rgba(12, 43, 36, 0.09);
  border: 1px solid rgba(4, 106, 88, 0.14);
}
.founder-portrait-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 5px solid var(--makilchi-gold-light);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.15);
}
.founder-portrait-frame img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: top center;
}

/* Official Visiting Card & Registration Showcase */
.official-card-showcase {
  background: var(--makilchi-cream);
  padding: 90px 0;
}
.official-card-img {
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  width: 100%;
  height: auto;
  border: 3px solid #ffffff;
}

/* Mobile FAQ Visual Card */
.mobile-faq-visual {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(12, 43, 36, 0.15);
}
.mobile-faq-visual img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
}
.mobile-faq-visual__badge {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  background: linear-gradient(to top, rgba(9, 31, 27, 0.94), rgba(9, 31, 27, 0.65));
  color: #ffc107;
  padding: 12px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Right-Side Floating WhatsApp & Call Action Buttons (All Screens, Easy to Click) */
.floating-contact-bar,
.floating-contact-bar--right {
  position: fixed;
  bottom: 24px;
  right: 20px;
  left: auto;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.floating-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 0.96rem;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none !important;
  cursor: pointer;
}
.floating-btn i {
  font-size: 1.2rem;
}
.floating-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}
.floating-btn--whatsapp {
  background: #25d366;
  border: 2px solid #ffffff;
}
.floating-btn--call {
  background: var(--makilchi-green);
  border: 2px solid #ffc107;
}

/* Move Back-To-Top button to bottom-left so Right-Side Call/WhatsApp buttons are unobstructed */
.progress-wrap {
  inset-inline-start: 20px !important;
  inset-inline-end: auto !important;
  left: 20px !important;
  right: auto !important;
  bottom: 24px !important;
}

/* Minimal Closing Footer (Makilchi Illam Logo & Address Only) */
.makilchi-minimal-footer {
  padding-top: 64px !important;
  padding-bottom: 0 !important;
  background: linear-gradient(180deg, #07221c 0%, #041511 100%) !important;
}
.makilchi-minimal-footer .makilchi-footer-brand {
  padding-bottom: 24px;
}

/* Mobile Bottom Sticky App Action Dock (< 768px) */
.mobile-bottom-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 62px;
  background: rgba(9, 31, 27, 0.96);
  backdrop-filter: blur(12px);
  border-top: 2px solid rgba(255, 193, 7, 0.45);
  z-index: 1050;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  padding: 6px 8px;
  gap: 8px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
}
.mobile-dock-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none !important;
  color: #ffffff !important;
  transition: transform 0.15s ease;
}
.mobile-dock-btn:active {
  transform: scale(0.96);
}
.mobile-dock-btn--call {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.mobile-dock-btn--whatsapp {
  background: #25d366;
  color: #071f1a !important;
}
.mobile-dock-btn--donate {
  background: linear-gradient(135deg, #ffc107 0%, #e59a28 100%);
  color: #071f1a !important;
}

/* Donation Box Polish */
.donation-methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.donation-method-item {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 16px;
  color: #ffffff;
}
.donation-method-item h6 {
  color: #ffc107;
  font-weight: 700;
  margin-bottom: 6px;
}
.donation-method-item p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9rem;
  margin: 0;
}

/* ==========================================================================
   Comprehensive Mobile & Tablet Layout Arrangement (< 991px and < 767px)
   ========================================================================== */
@media (max-width: 991px) {
  .difference,
  .help,
  .cause,
  .documentary-section,
  .team,
  .official-card-showcase,
  .faq,
  .contact-main {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .founder-highlight-card {
    padding: 24px;
  }

  .founder-portrait-frame img {
    height: 360px;
  }

  .community__thumb {
    margin-top: 24px;
  }

  .community-elder-img {
    max-height: 300px;
  }
}

@media (max-width: 767px) {
  body {
    padding-bottom: 0;
  }

  .hero-intro-video-container,
  .hero-intro-video-full {
    max-height: 68vh;
  }
  .hero-scroll-down-btn {
    width: 38px;
    height: 38px;
    bottom: 10px;
    font-size: 0.95rem;
  }

  .floating-contact-bar,
  .floating-contact-bar--right {
    right: 14px;
    bottom: 18px;
    gap: 10px;
  }
  .floating-btn {
    padding: 11px 18px;
    font-size: 0.88rem;
  }

  /* Compact Mobile Header */
  .navbar-brand.logo img {
    max-height: 46px;
  }
  .header-secondary .main-header__menu-box {
    padding: 10px 14px !important;
  }

  /* Hero Section Mobile Arrangement */
  .banner-two__slider-single {
    min-height: 550px;
    padding-top: 40px !important;
    padding-bottom: 68px !important;
  }
  .banner-two__slider-single::before {
    background: linear-gradient(
      180deg,
      rgba(7, 26, 22, 0.84) 0%,
      rgba(7, 26, 22, 0.82) 65%,
      rgba(7, 26, 22, 0.92) 100%
    ) !important;
  }
  .tamil-badge {
    font-size: 0.75rem;
    padding: 4px 11px;
    margin-bottom: 10px;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
  }
  .banner-two .banner-two__slider-content .sub-title {
    font-size: 0.95rem !important;
    margin-bottom: 6px;
  }
  .banner-two .banner-two__slider-content h1 {
    font-size: 2rem !important;
    line-height: 1.22 !important;
  }
  .banner-two .banner-two__slider-content h1 span {
    font-size: 2.1rem !important;
  }
  .banner-two .banner-two__slider-content h1 br {
    display: none;
  }
  .banner-two__slider-content .hero-lead {
    font-size: 0.94rem;
    line-height: 1.58;
    margin-top: 12px;
    margin-bottom: 16px;
  }
  .hero-meta-pills {
    gap: 6px;
    margin-bottom: 18px;
  }
  .hero-meta-pill {
    font-size: 0.78rem;
    padding: 5px 10px;
    width: 100%;
    justify-content: flex-start;
  }
  .banner-two .banner__content-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px !important;
    width: 100%;
  }
  .banner-two .banner__content-cta a {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 13px 18px !important;
  }
  /* Hero slider navigation on mobile */
  .banner-two .slider-navigation {
    position: absolute;
    bottom: 14px;
    right: 16px;
    top: auto;
    transform: none;
    flex-direction: row;
    gap: 8px;
    z-index: 10;
  }
  .banner-two .slider-navigation .slider-btn {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
  }

  /* Hide distracting floating decorative vectors on small screens */
  .banner-two .shape,
  .banner-two .shape-left,
  .banner-two .sprade-shape,
  .banner-two .unity,
  .help .hand,
  .help .parasuit,
  .help .spade,
  .cause .spade,
  .community .gift,
  .community .spade,
  .team .spade {
    display: none !important;
  }

  /* Section Headers on Mobile */
  .section__header h2,
  .help__content h2,
  .official-card-showcase h2,
  .contact__content h2 {
    font-size: 1.65rem !important;
    line-height: 1.3 !important;
  }
  .section__header .sub-title,
  .help__content .sub-title {
    font-size: 0.95rem !important;
  }

  /* About Section Mobile Polish */
  .help__content-icon-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .help__content-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    gap: 14px;
    margin-top: 24px !important;
  }
  .help__content-cta .btn--primary {
    width: 100%;
    justify-content: center;
  }

  /* Sponsorship Causes Mobile Navigation */
  .cause .slider-navigation {
    justify-content: flex-start;
    margin-top: 8px;
    margin-bottom: 12px;
  }
  .cause__slider-single .thumb img {
    height: 215px;
  }

  /* Documentary & Audio Section on Mobile */
  .documentary-video-wrapper video {
    max-height: 260px;
  }
  .theme-song-box {
    padding: 16px;
    margin-top: 18px;
  }
  .documentary-section .btn--tertiary,
  .documentary-section .btn--primary {
    width: 100%;
    justify-content: center;
  }

  /* Gallery Cards on Mobile: Always readable overlay without requiring hover */
  .makilchi-gallery-card {
    height: 245px;
  }
  .makilchi-gallery-overlay {
    padding: 16px;
    background: linear-gradient(
      to top,
      rgba(9, 31, 27, 0.95) 0%,
      rgba(9, 31, 27, 0.45) 55%,
      transparent 100%
    );
  }
  .makilchi-gallery-overlay h5 {
    font-size: 1.04rem;
  }
  .makilchi-gallery-overlay p {
    font-size: 0.82rem;
  }

  /* Interactive INR Donation Box on Mobile */
  .community .community-donation {
    padding: 24px 16px !important;
    border-radius: 18px;
  }
  .community .warning {
    padding: 14px 16px !important;
    border-radius: 14px !important;
    margin: 18px 0 !important;
  }
  .community .made-amount {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .community .made-amount .donation-amount {
    margin: 0 !important;
    padding: 10px 8px !important;
    font-size: 0.8rem !important;
    text-align: center;
    justify-content: center;
    border-radius: 10px;
  }
  .community .made-amount .donation-amount.custom-amount {
    grid-column: span 2;
  }
  .donation-methods-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .community .donation-form__single .cta a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Founder Card & Team Grid on Mobile */
  .founder-highlight-card {
    padding: 18px 16px;
  }
  .founder-portrait-frame img {
    height: 300px;
  }
  .founder-highlight-card h3 {
    font-size: 1.5rem !important;
  }
  .founder-highlight-card .d-flex.flex-wrap.gap-3 a {
    width: 100%;
    justify-content: center;
  }
  .team__single-thumb img {
    height: 280px;
  }

  /* Contact & Map Section on Mobile */
  .contact-main .contact-main__inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .contact-main .contact-main__single {
    width: 100% !important;
  }
  .volunteer .volunteer__form {
    padding: 24px 16px !important;
    border-radius: 16px;
  }
  .volunteer .volunteer__form .form-cta button {
    width: 100%;
    justify-content: center;
  }

  /* Progress Back-To-Top Button on Bottom-Left on Mobile */
  .progress-wrap {
    bottom: 18px !important;
    left: 14px !important;
    right: auto !important;
    inset-inline-start: 14px !important;
    inset-inline-end: auto !important;
    width: 42px !important;
    height: 42px !important;
  }
}


/* ==========================================================================
   Premium Documentary Section & Autoplay Styling
   ========================================================================== */
.documentary-youtube-section {
  position: relative;
  background: linear-gradient(180deg, #061c17 0%, #0c2b24 50%, #07221c 100%) !important;
  overflow: hidden;
}

.documentary-youtube-section::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(255, 193, 7, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: floatAmbient 12s ease-in-out infinite alternate;
}

.documentary-youtube-section::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(4, 106, 88, 0.22) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: floatAmbient 10s ease-in-out infinite alternate-reverse;
}

.doc-video-card-premium {
  position: relative;
  background: #041410;
  border-radius: 20px;
  padding: 12px;
  border: 2px solid rgba(255, 193, 7, 0.5);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(255, 193, 7, 0.15);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.doc-video-card-premium:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.75), 0 0 40px rgba(255, 193, 7, 0.25);
}

.doc-preview-badge-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(12, 43, 36, 0.85);
  backdrop-filter: blur(8px);
  color: #ffc107;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.88rem;
  font-weight: 600;
  border: 1px solid rgba(255, 193, 7, 0.4);
  margin-bottom: 14px;
}

.doc-pulse-dot {
  width: 10px;
  height: 10px;
  background: #ff3b30;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
  animation: pulseDot 1.8s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 10px rgba(255, 59, 48, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

.doc-overlay-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.doc-youtube-btn-pulse {
  background: linear-gradient(135deg, #ff0000 0%, #c40000 100%) !important;
  color: #ffffff !important;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(255, 0, 0, 0.4);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.doc-youtube-btn-pulse:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 30px rgba(255, 0, 0, 0.6);
  color: #ffffff !important;
}

/* ==========================================================================
   Luxury Google Map Section with Radar Motion & Premium Glassmorphism
   ========================================================================== */
.location-map-section-premium {
  position: relative;
  background: radial-gradient(circle at 85% 15%, rgba(4, 106, 88, 0.22) 0%, transparent 45%),
              radial-gradient(circle at 10% 85%, rgba(229, 154, 40, 0.15) 0%, transparent 45%),
              #07221c !important;
  color: #ffffff;
  overflow: hidden;
  border-top: 3px solid rgba(255, 193, 7, 0.3);
  border-bottom: 3px solid rgba(255, 193, 7, 0.3);
}

/* Ambient floating glow elements */
.location-map-section-premium::before {
  content: "";
  position: absolute;
  top: 30%;
  left: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(4, 106, 88, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: floatAmbient 14s ease-in-out infinite alternate;
}

@keyframes floatAmbient {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -20px) scale(1.08); }
  100% { transform: translate(-20px, 25px) scale(0.96); }
}

/* Radar Beacon Container */
.radar-beacon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 193, 7, 0.18);
  margin-right: 14px;
  vertical-align: middle;
}

.radar-beacon-icon {
  color: #ffc107;
  font-size: 1.4rem;
  z-index: 2;
  animation: pinBounce 2.4s ease-in-out infinite;
}

@keyframes pinBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.radar-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(255, 193, 7, 0.6);
  transform: translate(-50%, -50%);
  animation: radarWave 2.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  pointer-events: none;
}

.radar-ring:nth-child(2) {
  animation-delay: 0.9s;
}

.radar-ring:nth-child(3) {
  animation-delay: 1.8s;
}

@keyframes radarWave {
  0% { width: 40px; height: 40px; opacity: 1; border-color: rgba(255, 193, 7, 0.8); }
  100% { width: 140px; height: 140px; opacity: 0; border-color: rgba(4, 106, 88, 0); }
}

/* Premium Map Window Frame */
.map-window-frame {
  position: relative;
  background: #03130f;
  border-radius: 20px;
  border: 2px solid rgba(255, 193, 7, 0.45);
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.7), 0 0 35px rgba(4, 106, 88, 0.35);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.map-window-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 75px rgba(0, 0, 0, 0.8), 0 0 45px rgba(255, 193, 7, 0.3);
}

.map-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: linear-gradient(90deg, #082921 0%, #0d382f 100%);
  border-bottom: 1px solid rgba(255, 193, 7, 0.25);
}

.map-window-dots {
  display: flex;
  gap: 7px;
}

.map-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}
.map-dot--red { background: #ff5f56; }
.map-dot--yellow { background: #ffbd2e; }
.map-dot--green { background: #27c93f; }

.map-window-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-live-indicator {
  width: 8px;
  height: 8px;
  background: #27c93f;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #27c93f;
  animation: liveBlink 1.4s infinite;
}

@keyframes liveBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.map-header-action-btn {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffc107 !important;
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.35);
  padding: 5px 12px;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.map-header-action-btn:hover {
  background: #ffc107;
  color: #07221c !important;
}

.map-window-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 18px;
  background: linear-gradient(90deg, #082921 0%, #0d382f 100%);
  border-top: 1px solid rgba(255, 193, 7, 0.2);
}

/* Interactive Glass Feature Cards */
.map-feature-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 4px solid #ffc107;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 14px;
  transition: all 0.3s ease;
}

.map-feature-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 193, 7, 0.6);
  transform: translateX(4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.map-feature-card h6 {
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-feature-card p {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 0.92rem;
  margin-bottom: 0;
  line-height: 1.55;
}

.map-glowing-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.btn-gmaps-glow {
  background: linear-gradient(135deg, #046a58 0%, #08967c 100%) !important;
  color: #ffffff !important;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(4, 106, 88, 0.5), 0 0 15px rgba(255, 193, 7, 0.2);
  border: 1px solid rgba(255, 193, 7, 0.4);
  transition: all 0.3s ease;
}

.btn-gmaps-glow:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 35px rgba(4, 106, 88, 0.7), 0 0 25px rgba(255, 193, 7, 0.4);
  color: #ffffff !important;
}

.btn-directions-glow {
  background: rgba(255, 193, 7, 0.15) !important;
  color: #ffc107 !important;
  font-weight: 700;
  padding: 13px 24px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border: 1.5px solid #ffc107;
  transition: all 0.3s ease;
}

.btn-directions-glow:hover {
  background: #ffc107 !important;
  color: #07221c !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 193, 7, 0.4);
}