@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Fonts Included */

/* Regular */
@font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }
  
  /* Italic */
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
  }
  
  /* Thin */
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
  }
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
  }
  
  /* ExtraLight */
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
  }
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
  }
  
  /* Light */
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
  }
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
  }
  
  /* Medium */
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
  }
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
  }
  
  /* SemiBold */
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
  }
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
  }
  
  /* Bold */
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
  }
  
  /* ExtraBold */
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
  }
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
  }
  
  /* Black */
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
  }
  @font-face {
    font-family: 'Grift';
    src: url('fonts/Grift-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
  }




  /* ROOT */

  :root {
    --dark-green: #1f5053;
    --light-gray: #c9c5be;

    /* Base Container Size */
    --design-size: 30rem; /* Decreased size */
    
    /* Orbit Sizes (Diameter) */
    --large-orbit-size: 25rem; /* Outer dashed line diameter */
    --small-orbit-size: 21rem; /* Inner dashed line diameter */
    
    /* Radius of the rotation path (Half the orbit size) */
    --large-radius: calc(var(--large-orbit-size) / 2);
    --small-radius: calc(var(--small-orbit-size) / 2);

    /* Logo Size */
    --logo-size: 35px; /* Slightly reduced favicon size */
    --half-logo-size: calc(var(--logo-size) / 2); /* 17.5px offset */

    /* Dash settings (3px dashed line) */
    --dash-length: 3px;
    --gap-length: 3px;

    --play-button-radius-offset: 140px; /* Offset from center for play button */
    --play-button-size: 80px; /* Approximate size based on image (cle (1).png) */
    --half-play-button-size: calc(var(--play-button-size) / 2);
    --link-hover-color: #8c7247;

    --card-bg-color: #FAEAB1; /* Lighter creamy background for info area */
    --text-color: #000;
    --link-color: #000;
    --image-radius: 12px;

    --radius: 12px;
    --padding-x: 20px;
    --gap: 20px;
    --icon-char: '↗';
    --breakpoint-desktop: 768px;
}


/* ROOT END */
@media (max-width: 500px) {
  :root {
    /* Base Container Size */
    --design-size: 30rem; /* Decreased size */

    /* Orbit Sizes (Diameter) */
    --large-orbit-size: 22rem; /* Outer dashed line diameter */
    --small-orbit-size: 18rem; /* Inner dashed line diameter */
    
    /* Radius of the rotation path (Half the orbit size) */
    --large-radius: calc(var(--large-orbit-size) / 2);
    --small-radius: calc(var(--small-orbit-size) / 2);

    /* Logo Size */
    --logo-size: 32px; /* Slightly reduced favicon size */
    --half-logo-size: calc(var(--logo-size) / 2); /* 17.5px offset */

    /* Dash settings (3px dashed line) */
    --dash-length: 3px;
    --gap-length: 3px;

    --play-button-radius-offset: 130px; /* Offset from center for play button */
    --play-button-size: 75px; /* Approximate size based on image (cle (1).png) */
  }
}
  
body{
    background: linear-gradient(180deg, #FEFAEC 0%, #FAEAB1 100%);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
}

/* CSS Keyframes for modern Donate Ripple */
@keyframes ripple {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

.donate-ripple {
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-weight: 550;
  letter-spacing: 0.1px;
}

.donate-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3); /* Lighter ripple */
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  animation: ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Removed rotation keyframes and related .orbit-* classes */

/* Smooth transition for properties not updated by JS on every scroll tick */
 .navbar-transition {
  transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dropdown styles for smooth entry (Desktop) */
.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 300ms ease, transform 300ms ease, visibility 300ms ease;
}

.group:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- Desktop Sub-Dropdown Styles --- */
.sub-dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px); /* Slides out horizontally */
  transition: opacity 300ms ease, transform 300ms ease, visibility 300ms ease;
}

.sub-group:hover .sub-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* * UPDATED: .is-fixed is now the default state on desktop (see media query below).
* This class will ONLY be used by JS for the *mobile* top header.
*/
.is-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 50;
}

/* * UPDATED: .is-blur is now applied by default to the desktop nav,
  * and toggled by JS for the *mobile* top header.
*/
.is-blur {
  backdrop-filter: blur(8px); 
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(250, 248, 240, 0.9);
   /* Base blurred background */
}

/* Mobile specific fixed class for rounded borders on scroll (Vertical Shrink) */
.is-fixed.mobile-scrolled-header {
  width: 100% !important; left: 0 !important; margin-left: 0 !important; transform: none !important; 
  border-top-left-radius: 20px; border-top-right-radius: 20px;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* --- Mobile / Desktop Media Queries --- */
.mobile-only { display: none; }


/* --- Mobile / Desktop Media Queries --- */
.mobile-only { display: none; }
#mobile-sheet-links a:hover, .mobile-accordion-content a:hover{background: #f8e18f;border-radius: 0px;}
@media (max-width: 969px) {
  /* --- MOBILE --- */
  #desktop-nav-wrapper { display: none !important; }
  #header-placeholder { display: none !important; } /* Hide placeholder */
  #mobile-nav { display: flex !important; }
  
  #mobile-fixed-header-wrapper { 
      display: block !important; 
      position: relative !important; /* Mobile starts RELATIVE */
      /* ... (rest of existing mobile-fixed-header-wrapper styles) ... */
      top: auto !important; left: auto !important; width: 100% !important;
      transform: none !important; box-shadow: none !important; border-radius: 0 !important;
      padding-top: 0.5rem !important; padding-bottom: 0.5rem !important;
  }
  main { padding-bottom: 5.5rem; } 
  .mobile-only { display: block; }
  /* ... (existing mobile-menu-sheet styles) ... */
  #mobile-menu-sheet {
      position: fixed; bottom: 2rem; left: 0; width: 100%;
      background: linear-gradient(180deg, #FEFAEC 0%, #FAEAB1 100%);;
      transform: translateY(100%); transition: all 300ms ease-in-out;
      z-index: 49; border-radius: 1rem 1rem 0 0;
      box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
      max-height: calc(100vh - 5rem); overflow-y: auto;
  }
  #mobile-menu-sheet.open { transform: translateY(0); }

   /* Make backdrop visible when menu is open */
   #mobile-menu-backdrop.open {
    display: block;
    opacity: 1;
}

/* Prevent body scroll when menu is open */
body.mobile-menu-open {
    overflow: hidden;
}
}

@media (min-width: 970px) {
   /* --- DESKTOP (UPDATED) --- */
   #desktop-nav-wrapper {
      /* --- STRATEGY CHANGE: Header is ALWAYS FIXED --- */
      position: fixed !important; 
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      z-index: 50;
      /* --- STRATEGY CHANGE: Header is ALWAYS BLURRED --- */
  }
  #mobile-nav, #mobile-fixed-header-wrapper, #mobile-menu-sheet {
      display: none !important;
  }
  /* --- STRATEGY CHANGE: Placeholder is ALWAYS SHOWN to push content down --- */
  #header-placeholder {
      display: block;
      /* Height is set by JS based on constants */
  }
}

/* --- Mobile Accordion Styles --- */
.mobile-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease-in-out;
  padding-left: 0.5rem; /* slight indent */
}
.mobile-accordion-content.open {
  max-height: 500px; /* Sufficient height */
}
.mobile-accordion-header {
  padding: 0.75rem 0.5rem;
  transition: background-color 200ms;
}

/* --- Mobile Accordion Styles - STRONGER FIX --- */
.mobile-accordion-content { max-height: 0 !important; overflow: hidden; transition: max-height 300ms ease-in-out; padding-left: 0.5rem; }
.mobile-accordion-content.open { max-height: 500px !important; }
.mobile-accordion-header { padding: 0.75rem 0.5rem; transition: background-color 200ms; }
.mobile-accordion-header.accordion-active-header {
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Hover state (active color for text AND full color icon) */
#mobile-nav a:hover, #mobile-nav button:hover,
#mobile-nav a.mobile-nav-active,
#mobile-nav button.mobile-nav-active {
  color: #1f5053; /* Active color for text */
}
#mobile-nav a:hover img, #mobile-nav button:hover img,
#mobile-nav a.mobile-nav-active img,

/* --- NEW: Mobile Bottom Nav Scrolled State --- */
#mobile-nav.mobile-nav-scrolled {
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
  transition: border-radius 300ms ease-in-out, box-shadow 300ms ease-in-out;
}
#mobile-nav {
   transition: border-radius 300ms ease-in-out, box-shadow 300ms ease-in-out;
}

.pt-default{padding-top: 1.5rem;}
.pt-section-default{padding-top: 2.5rem;}

.bg-default{
    background: linear-gradient(180deg, #FEFAEC 0%, #FAEAB1 100%);
}
.blog-card{
  background: #F8E18F;
height: 29.25rem;
flex-shrink: 0;
}
.blog-slide-size{
  width: 19.875rem;
height: 29.25rem;
flex-shrink: 0;
}
.bg-yellow200{
  background: #F8E18F;
}
.h-line-height{
  line-height: 1.38rem!important;
  height: 2.75rem!important;
}
.blog-desc{
  color: #000;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.625rem;
  letter-spacing: 0.0175rem;
}
.blog-main-desc{
  color: #000;
  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
  line-height: 2rem; /* 200% */
  letter-spacing: 0.02rem;
}
.blog-headline{
  color: #000;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.main-blog-headline{
  color: #000;
  font-family: Inter;
  font-size: 2.625rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.125rem;
}
.btn-bgcolor{background: #419399!important;color:#FEFAEA!important;font-weight: 200!important;letter-spacing: 0.6px!important;font-size: 0.75rem;}
.text-black-300{color: #000;font-weight: 300;}
.btn-main-blog-card{
  color: #FEFAEA;
font-family: Inter;
border-radius: 20px;
background: #419399;
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: 32px; /* 228.571% */
letter-spacing: 0.4px;
}

/* Position arrows outside on desktop */
@media (min-width: 768px) {
  .blog-swiper-button-next,
.blog-swiper-button-prev {
    color: #333;
    width: 44px;
    height: 44px;
    background-color: #fcf1ca;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.blog-swiper-button-next:hover,
.blog-swiper-button-prev:hover {
    background-color: #fcf1ca;
}

.blog-swiper-button-next:after,
.blog-swiper-button-prev:after {
    font-size: 15px;
    font-weight: bold;
}

    .blog-swiper-button-prev {
        left: 0px;
    }
    .blog-swiper-button-next {
        right: 0px;
    }
}

.mt-0{margin-top: 0!important;}

/* Navbar */

.navbar-logo{
    width: 125px;
    height: 37px;
    flex-shrink: 0;
    aspect-ratio: 125/37;
}
.dark-mode{
    width: 24px;
height: 24px;
flex-shrink: 0;
aspect-ratio: 1/1;
}
.menu-head{
    color: #000;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: normal;
}

.donate-btn{
    /* width: 88px;
height: 24px; */
flex-shrink: 0;
color: #FEFAEA;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.42px;
}
#desktop-slider .swiper, #mobile-slider .swiper {
    width: 100%;
    height: 100%;
  }

  #desktop-slider .swiper-slide, #mobile-slider .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #desktop-slider .swiper-slide img, #mobile-slider .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  #desktop-slider{
    border-radius: 20px 20px 0px 0px;
  }
  #mobile-slider{
    border-radius: 20px 20px 0px 0px;
  }

  /* SQUARE FEET SEVA */

.sqft-img{
  width: 452px!important;
  height: 441px!important;
}

  @media screen and (min-width: 577px) {
      #mobile-slider {display: none;}
      #desktop-slider {display: block;}
      .sqft-img{
        width: 452px!important;
        height: 441px!important;
      }
  }
  @media screen and (max-width: 576px) {
      #mobile-slider {display: block;}
      #desktop-slider {display: none;}
      .sqft-img{
        width: 100%!important;
        height: auto!important;
      }
      /* .swiper-slide img {
          width: 100%;
          height: auto;
      } */
  }

  .upper-border{
    /* height: 65px; */
    width: 73.25rem;
height: 4.0625rem;
    flex-shrink: 0;
    aspect-ratio: 1172/65;
    width:100%;
  }

  h1,h2,h3,h4,h5,h6{font-family: 'Grift';}

  /* --- General Styling --- */
/* body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #eee;
    font-family: sans-serif;
} */

.design-container {
    position: relative;
    /* Mobile-first: Full width of its parent column, height scales with it */
    width: 100%;
    /* Use padding-top for a perfect square aspect ratio (100% of width) */
    padding-top: 100%; 
    height: 0; 
    
    background-color: var(--background-color);
    border-radius: 50%;
    overflow: hidden;
}

/* On medium (desktop) screens, enforce the fixed size */
@media (min-width: 768px) {
    .design-container {
        width: var(--design-size);
        padding-top: var(--design-size);
    }
}

/* Make all children absolute so they are positioned correctly within the padded container */
.center-image-container,
.orbits-container,
.logo-orbit {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- Center Image Sizing (Adjusted) --- */
.center-image-container {
    /* Use a simple fixed size for the content inside */
    width: 60%; 
    height: 60%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: hidden;
}



.center-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Dashed Orbits Styling (The visible dashed lines) --- */
.orbit {
    /* Positioning the orbits relative to the center */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border-style: dashed;
    border-width: 2px;
}

.large-orbit {
    width: var(--large-orbit-size);
    height: var(--large-orbit-size);
    border-color: var(--dark-green);
}

.small-orbit {
    width: var(--small-orbit-size);
    height: var(--small-orbit-size);
    border-color: var(--light-gray);
}

/* --------------------------------------------------------
    2. LOGO ORBIT AND POSITIONING FIX
    - Logos are positioned at the top of the rotating container.
    - We use transform to push them out to the correct radius.
    - We use transform to rotate them to the correct starting angle.
-------------------------------------------------------- */

/* The .logo-orbit is the rotating parent (handled by JS) */
.logo {
    position: absolute;
    width: var(--logo-size);
    height: var(--logo-size);
    /* Initially center the logo within its 40x40 area */
    top: calc(50% - var(--half-logo-size));
    left: calc(50% - var(--half-logo-size));
    transform-origin: center;
}

/* LOGO POSITIONING:
   (The first rotation sets the angle, the translate pushes it out to the radius.)
   The angles are based on the original image: ~-45, 135, 45, etc.
*/

/* LARGE ORBIT LOGOS (3 favicons) */
.logo-large-1 { /* Top-Left position in the original image */
    transform: rotate(-135deg) translateX(var(--large-radius)) rotate(135deg);
    height: 40px;width: 40px;
}
.logo-large-2 { /* Top-Right position */
    transform: rotate(-45deg) translateX(var(--large-radius)) rotate(45deg);
    height: 35px;width: 35px;
}
.logo-large-3 { /* Bottom-Left position */
    transform: rotate(135deg) translateX(var(--large-radius)) rotate(-135deg);
    height: 30px;width: 30px;
}

/* SMALL ORBIT LOGO (1 favicon) */
.logo-small-1 { /* Bottom-Right position */
    transform: rotate(45deg) translateX(var(--small-radius)) rotate(-45deg);
    height: 30px;width: 30px;
}


/* --- Actual Logo Image Styling (Unchanged) --- */
.logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    /* This element is now NOT counter-rotated by JS. 
       The counter-rotation is integrated into the 'transform' of the .logo div. 
       The JS will now rotate the entire .logo-orbit container.
    */
}

.rounded-lg{
  border-radius: 20px!important;
}

.bx-shadow{
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.yellow-progress-bar{
  border-radius: 40px;
  height: 33px;
background: #F4CC55;
}

.green-progress-bar{
  border-radius: 40px;
  height: 33px;
background: #34656D;
}

/* Swiper - Festival Glimpses */

.swiper2{
  /* height: 100%; */
  width: 100%;
}

.swiper2 .swiper-slide{
  position: relative;
  /* height: 100%; */
  overflow: hidden;
  border-radius: 20px;
}

.swiper2 .swiper-slider .img-wrapper{
  width:100%;
  height: 100%;
  transform: scale(1.3);
  transition: 0.5s;
}

.swiper2 .swiper-slider-active .img-wrapper{
  transform: scale(1);
}

.swiper2 .swiper-slider img{
    width: 100%;
    height: 450px;
  object-fit: cover!important;
  user-select: none;
  filter: grayscale(1);
}

.swiper2 .swiper-slider-active img{
  filter: grayscale(0);
}

.text-green-600{
  color: #34656D!important;
  font-weight: 600!important;
}

.bg-green-700{
  background: #275d59!important;
}

.play-button {
  /* Position over the center image, relative to .design-container */
  z-index: 10; 
  
  /* Set the size explicitly based on the variable */
  width: var(--play-button-size); 
  height: var(--play-button-size);
  
  /* Start at the center of the design-container (50%, 50%) */
  top: 40%;
  left: 40%;
  
  /* Move the button to the bottom-right corner based on the radius offset */
  transform: 
      /* 1. Push it out by the radius offset */
      translate(var(--play-button-radius-offset), var(--play-button-radius-offset))
      /* 2. Pull it back by half its size to center it on the position */
      translate(calc(var(--half-play-button-size) * -1), calc(var(--half-play-button-size) * -1));

  cursor: pointer;
  /* Ensure the button image fills its container */
  padding: 0;
  border: none;
  background: transparent;
}


/* --------------------------------------------------------
  4. MODAL TRANSITION CLASSES
  These classes are added/removed by JavaScript for the smooth transition.
-------------------------------------------------------- */
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-overlay.open .modal-content {
  transform: scale(1); /* Smooth scaling effect */
}

.card-image-container {
  width: 100%;
  padding-top: 100%; /* Creates a square aspect ratio */
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto; /* Center the circle */
}
.card-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Adjustments for the yellow background and card design */
.card-background {
  background-color: #f8e18f; /* Light yellow from the image */
  border-radius: 20px; /* Optional: Slightly rounded corners for the whole card area */
  padding-top: 1.5rem; /* Space above the circle */
  padding-bottom: 2rem;
  height: 100%; /* Ensure all cards in the grid are the same height */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.card-desc{
  color: #000;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.625rem;
  letter-spacing: 0.0175rem;
}
.blog-card-date{
  color: #000;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.015rem;
  /* width: 8rem;
  height: 0.8125rem; */
}
@media (max-width: 433px) {
  .blog-card-date{
    font-size: 0.65rem;
  }
  .btn-bgcolor{
    font-size: 0.65rem;
  }
}
@media (max-width: 400px) {
  .blog-card-date{
    font-size: 0.55rem;
  }
  .btn-bgcolor{
    font-size: 0.55rem;
  }
}
.blog-sep-line{
  width: 1.6rem;
  color: #000;
  text-align: center;
}
/* .blog-category{
  color: #FEFAEA;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 2rem;
  letter-spacing: 0.015rem;
  width: 5.28919rem;
  height: 1.52994rem;
  transform: rotate(-0.066deg);
  flex-shrink: 0;
}
.blog-category-container{
  width: 7rem;
  height: 1.47838rem;
  flex-shrink: 0;
  border-radius: 1.25rem;
background: #419399;
} */
.become-part-of-ngd-desc{
  width: 19.9375rem;
  height: 6.5625rem;
  flex-shrink: 0;
}
/* Swiper custom height for mobile view */
.swiper-become-member {
  width: 100%;
  padding-bottom: 30px; /* Space for pagination dots */
  padding-left: 15px; /* Padding for the first/last card to look centered */
  padding-right: 15px;
}
.swiper-become-member .swiper-slide {
  width: 80%; /* Adjust as needed for partial visibility of the next card */
}

/* Specific styling for the yellow circle background area */
.yellow-circle-bg {
  background-color: #fffac8; /* A slightly brighter yellow for the circle background */
  border-radius: 50%;
}

/* Button styling */
.view-more-btn {
  background-color: #3b82f6; /* Blue for contrast, adjust to match original if necessary (looks like a dark teal/blue-green) */
  background-color: #2f7a8f; /* Closer to the image button color */
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 9999px; /* Fully rounded pill shape */
  font-weight: 600;
  transition: background-color 0.3s;
  margin-top: auto; /* Push button to the bottom */
}
.view-more-btn:hover {
  background-color: #245e70;
}

.member-desc{
  height: 5rem;
}

/* Custom link style for subtle interaction */

footer{
  border-radius: 20px 20px 0px 0px;
}

.footer-logo{
  width: 182px;
  height: 54px;
  flex-shrink: 0;
  aspect-ratio: 91/27;
}

.footer-text{
  color: #000;
  font-size: 1.125rem;
  font-weight: 200;
  line-height: 2rem; /* 177.778% */
  letter-spacing: 0.0225rem;
  width: 24.4375rem;
height: 8rem;
flex-shrink: 0;
}

.footer-link {
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
  font-weight: 300;
  text-decoration: underline;
}
.footer-link:hover {
  color: #275d59;
  transform: translateX(4px); /* Slight horizontal movement on hover */
}
.footer-nav-text {
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}
.footer-nav-text:hover {
  color: #275d59;
  transform: translateX(4px);
}
.footer-contact {
  transition: color 0.2s ease, transform 0.2s ease, text-underline-offset 0.2s ease;
}
.footer-contact:hover {
  color: #275d59;
  text-underline-offset: 4px;
  transform: translateX(3px);
}
.footer-logo {
  transition: transform 0.25s ease, filter 0.25s ease;
}
.footer-logo:hover {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.12));
}
.footer-contact{
  color: #000;
  font-size: 1.125rem;
  font-weight: 200;
  line-height: 2rem; /* 177.778% */
  letter-spacing: 0.0225rem;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  width: 10.5625rem;
height: 2.5rem;
flex-shrink: 0;
}

/* Custom social icon style */
.social-icon {
  transition: transform 0.2s ease;
  width: 1.875rem;
height: 1.5rem;
flex-shrink: 0;
aspect-ratio: 5/4;
}
.social-icon:hover {
  transform: scale(1.1) translateY(-2px);
  color: var(--link-hover-color);
}

/* --- Slides/Boxes Hover Polish --- */
.blog-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

/* Festival Glimpses slide image slight zoom on hover */
#festival-glimpses .swiper-slide img {
  transition: transform 0.3s ease;
}
#festival-glimpses .swiper-slide:hover img {
  transform: scale(1.03);
}

footer h3{
  font-family: 'Inter';
}

.swiper2 {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper2 .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 75%;
  height: 450px;
}

.swiper2 .swiper-slide iframe {
  width: 100%;
  height: 450px;
}
/* mobile view */
@media (max-width: 768px) {
  .swiper2 .swiper-slide {
    width: 80%;
    height: 300px;
  }
  .swiper2 .swiper-slide iframe {
    width: 100%;
    height: 300px;
  }
  .border-down{
    padding-bottom: 5rem;
  }
}
@media (min-width: 768px) {
  .border-down{
    padding-bottom: 1rem;
  }
}

.swiper2 .swiper-slide img {
  display: block;
  width: 100%;
}




/* ===================================== */
/* --- Swiper Sevas Layout --- */
/* ===================================== */


/* ===================================== */
/* --- DESKTOP LAYOUT (Media Query) --- */
/* ===================================== */
/* only for min width 768px */

/* --- NEW --- */
/* This defines the keyframe for the image zoom */
@keyframes zoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}
/* --- 1. NEW/UPDATED: Keyframes for the diagonal rocket launch --- */
@keyframes rocketLaunch {
  0% {
    transform: translate(0, 0) scale(1); /* Start at original position */
    opacity: 1;
  }
  35% {
    transform: translate(8px, -8px) scale(0.9); /* Moves diagonally up-right */
    opacity: 0; /* Fades out at peak */
  }
  40% {
    transform: translate(8px, -8px) scale(0.9); /* Stay invisible at peak */
    opacity: 0;
  }
  45% {
    transform: translate(-8px, 8px) scale(0.9); /* Instantly jump to opposite diagonal (invisible) */
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) scale(1); /* Smoothly returns to original spot */
    opacity: 1;
  }
}
/* ----------- */

@media only screen and (min-width: 1200px) {
  /* Hide the scrollbar completely */
  #sevas-section .swiper-scrollbar {
   display: none !important;
  }
  
  /* Revert container to use CSS Flexbox for 3 columns */
  .seva-container {
    display: flex !important; 
    gap: var(--gap);
    flex-wrap: nowrap !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
  }
    /* Override Swiper wrapper styles for grid layout */
    #sevas-section .swiper-wrapper {
      display: flex !important;
      width: 100% !important; 
      transform: none !important; 
      transition-duration: 0ms !important;
      padding-left: 0 !important;
      margin-left: 0 !important;
    }
}

/* --- Base Card Styling (Applies to both Mobile and Desktop) --- */
.seva-card {
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  background: #FAEAB1;
  margin: 0 auto;
  width: 23.5625rem;
  height: 23.75rem;
  
  /* UPDATED: This is the main transition for the "lift" */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.seva-card:hover {
  transform: translateY(-4px); /* This is the "lift" effect */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* --- Merged Swiper Slide Styles (Cleaned Up) --- */
#sevas-section .swiper-slide {
  width: 23.5625rem;
  height: 24.125rem;
  margin-right: var(--gap);
  /* gap: 2.5rem!important; -- This 'gap' wasn't doing anything */
}

/* --- Merged Image Container Styles (Cleaned Up) --- */
.seva-image-container {
  width: 23.6875rem;
  height: 19.9375rem;
  border-radius: 1.25rem;
  overflow: hidden;
}

.seva-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  
  /* NEW: Add transition for the zoom effect */
  transition: transform 0.4s ease-out;
}

/* NEW: This creates the image zoom on card hover */
.seva-card:hover .seva-image {
  transform: scale(1.08);
}

.sevas-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 30px;
}

.seva-info {
  background-color: var(--card-info-bg);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 15px 20px;
  min-height: 40px;
}

.seva-name {
  color: #000;
  font-size: 1.5rem;
  font-family: 'Grift';
  font-weight: 300;
  text-align: center;
  line-height: 2rem; /* 133.333% */
  letter-spacing: 0.03rem;
  width: 16.75rem;
  height: 1.9375rem;
  flex-shrink: 0;
}

.seva-link {
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  /* Add a transition for the return snap-back when the animation ends */
  transition: transform 0.1s ease-out, opacity 0.1s ease-out; 
  
  /* Set default state */
  transform: translate(0, 0) scale(1);
  opacity: 1;
}

/* NEW: This moves the arrow on card hover */
.seva-card:hover .seva-link {
  animation: rocketLaunch 0.7s ease-in-out 1;
}

/* --- View More Button Styling (Matches Image) --- */
#sevas-section .view-more-container {
  text-align: center;
  margin-top: 30px;
}

#sevas-section .view-more-btn {
  background-color: var(--card-info-bg); 
  color: var(--text-color);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 30px;
  border: 1px solid rgba(0, 0, 0, 0.2); 
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s;
}

#sevas-section .view-more-btn:hover {
  background-color: #fff;
}


/* --- Mobile Styles --- */
@media (max-width: 500px) {
  #sevas-section .swiper-slide {
    width: 16.3125rem!important;
    height: 17.4375rem!important;
    gap: 1.5rem;
    margin-right: var(--gap); /* Ensures spacing is consistent */
  }
  
  /* This rule was overriding the swiper-slide width, now fixed */
  .seva-card {
    width: 100% !important; /* Let the slide control the width */
    height: 100% !important; /* Let the slide control the height */
  }
  
  .seva-image-container {
    width: 100% !important; /* Make image container responsive */
    height: 14.375rem!important;
    border-radius: 1.25rem;
    overflow: hidden;
  }

  .seva-name {
    font-size: 1.125rem!important;
    font-weight: 300;
    line-height: 2rem; /* 177.778% */
    letter-spacing: 0.0225rem;
    width: 11.5625rem;
    height: 1.3125rem;
    text-align: center;
    flex-shrink: 0;
  }
  .seva-info{padding: 0px;}
  .seva-link{width: 1rem;height: 1rem;aspect-ratio: 1/1;}
}

/* Accordion Container */
@media (min-width: 1018px) {
  .accordion-container{
    margin-left: 2.5rem!important;
  }
}
/* Accordion Container End */

.cta-btn {
  box-shadow: 0 2px 4px rgba(39, 93, 89, 0.1);
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
  width: fit-content;
}
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(39, 93, 89, 0.15);
}

/* ===================================== */
/* --- Festival Glimpses Styling --- */
/* ===================================== */


#festival-glimpses .section-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  margin: 40px 0;
  color: #333;
}

#festival-glimpses .swiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

#festival-glimpses .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 500px; /* Adjust width as needed */
  height: 300px; /* Adjust height as needed */
  border-radius: 10px;
  overflow: hidden;
  
  /* Add a shadow for depth */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);

  /* For centering the play button */
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 500px) {
  #festival-glimpses .swiper-slide {
    width: 90%;
    height: 230px;
  }
}

#festival-glimpses .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 /* --- Play Button Styles --- */
 .play-button2 {
  position: absolute;
  z-index: 10;
  width: 80px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
  transform: scale(1.1);
}

.play-button2:hover {
  transform: scale(1.2);
  background-color: rgba(255, 255, 255, 1);
}

.play-button2::after {
  /* This creates the triangle "play" icon */
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 25px; /* Adjust size of triangle */
  border-color: transparent transparent transparent #c0392b; /* Red play button */
  margin-left: 5px; /* Centers the triangle */
}

/* --- Video Modal Styles --- */
.video-modal2 {
  display: none; 
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
}

/* * THIS IS THE CLASS TO EDIT 
*/
.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 900px; 
  height: 0;
  
  /* REDUCE THIS VALUE for a lower height. 
  * 35% will be much shorter than the previous 42.857%
  */
  padding-bottom: 35%; 

  background: #000;
}

@media (max-width: 500px) {
  .video-modal-content {
    padding-bottom: 50.625%; 
  }
}

.video-modal2 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* This is the close button, it doesn't need to change */
.close-modal2 {
  position: absolute;
  top: 15px;      
  right: 20px;     
  z-index: 1010;  
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s;
  line-height: 1;  
}

#festival-glimpses .close-modal2:hover {
  color: #ccc;
}

/* Swiper Arrows Styling */
#festival-glimpses .swiper-button-prev, #festival-glimpses .swiper-button-next {
  color: #ff9900 !important; 
  transition: opacity 0.3s;
  opacity: 0.8;
}
#festival-glimpses .swiper-button-prev:hover, #festival-glimpses .swiper-button-next:hover {
  opacity: 1;
}

#festival-glimpses .swiper-pagination-bullet-active {
  background: #ff9900 !important;
}
/* Add I want this 
#festival-glimpses .swiper-pagination to be lower comes from bottom of the slider */
/* #festival-glimpses .swiper-pagination {
  bottom: 0!important;
} */

/* --- PAGINATION DOTS STYLING --- */
#festival-glimpses .swiper-pagination {
  position: absolute;
  /* Move it down to appear below the slider */
  bottom: 20px !important; 
  left: 0;
  width: 100%;
  text-align: center;
}

#festival-glimpses .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #333; /* Default dot color */
  opacity: 0.4;
  transition: opacity 0.3s, background-color 0.3s;
  margin: 0 5px;
}


/* 1. Style the button itself */
.shine-btn {
  /* Base styles */
  padding: 12px 28px;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none; /* For <a> tags */
  display: inline-block; /* For <a> tags */

  /* Animation setup */
  position: relative; /* Must be relative to position the shine */
  overflow: hidden;   /* Hides the shine when it's off-button */
  
  /* A simple hover effect (optional) */
  transition: transform 0.2s ease, filter 0.2s ease;
}

/* 2. The shine pseudo-element */
.shine-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* Width of the shine */
  height: 100%;

  /* The shine gradient */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );

  /* Angle the shine */
  transform: skewX(-25deg);
  
  /* Animation properties */
  animation-name: shine-repeat;
  animation-duration: 1.8s; /* Total time for one loop (includes pause) */
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* 3. The @keyframes animation */
@keyframes shine-repeat {
  /* The animation is split into 100% */
  
  /* 0%: Start off-screen to the left */
  0% {
    transform: skewX(-25deg) translateX(-150%);
  }

  /* 30% {
    transform: skewX(-25deg) translateX(50%);
  } */
  
  /* 20%: Shine has moved all the way across */
  60% {
    transform: skewX(-25deg) translateX(250%);
  }
  
  /* 21% - 100%: Stay off-screen to the right. 
     This creates the "pause" or "interval".
     The animation waits here for the remaining 80% of the 5s duration. */
  100% {
    transform: skewX(-25deg) translateX(250%);
  }
}

/* 4. Optional: A separate hover effect */
.shine-btn:hover {
  filter: brightness(1.1);  /* Make it slightly brighter */
  transform: scale(1.03); /* Make it slightly larger */
}

.img-zoom-out {
  /* This makes the animation smooth */
  transition: transform 0.3s ease-in-out;
}

.img-zoom-out:hover {
  /* scale(1) is 100% size.
    scale(0.95) is 95% size (a "little zoom out").
  */
  transform: scale(0.95);
}

/* 1. The container for the image and the shine */
.image-shine-container {
  position: relative; /* Essential for positioning the shine */
  overflow: hidden;   /* Clips the shine when it's outside the image */
  display: inline-block; /* Makes the container size to its content (the image) */
  border-radius: 8px; /* Optional: adds nice rounded corners */
  cursor: pointer;    /* Indicates it's interactive */
  
  /* A subtle transition for other hover effects on the container itself (optional) */
  transition: transform 0.3s ease-in-out;
}

/* Optional: Slight lift/scale on hover for the whole container */
.image-shine-container:hover {
  transform: translateY(-5px) scale(1.02);
}

/* 2. Style the image inside the container */
.image-shine-container img {
  display: block; /* Removes extra space below image */
  /* max-width: 100%; Ensures image is responsive */
  /* height: auto; */
  /* Optional: Smooth out any other image-specific transformations */
  transition: transform 0.3s ease-in-out;
}

/* 3. The shine pseudo-element */
.image-shine-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* Width of the shine itself */
  height: 100%;
  
  /* The shine gradient (semi-transparent white) */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  
  /* Angle the shine */
  transform: skewX(-25deg) translateX(-150%); /* Start completely off-screen left */
  
  /* Initial state: Hidden off to the left */
  transition: transform 0.7s ease-in-out; /* Smooth transition for the shine movement */
}

/* 4. The hover effect to trigger the shine */
.image-shine-container:hover::before {
  /* On hover, move the shine across to the right */
  transform: skewX(-25deg) translateX(250%);
}

/* 1. The container that "clips" the image */
.image-zoom-container {
  overflow: hidden; /* This is crucial! It hides the parts of the image that are zoomed in. */
  border-radius: 8px; /* Optional: adds nice rounded corners to the container */
  display: inline-block; /* Makes the container only as wide as its content (the image) */
  cursor: pointer;    /* Indicates it's interactive */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: subtle shadow */
  
  /* Optional: A subtle lift effect for the whole container on hover */
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Optional: Lift and slightly darken container on hover */
.image-zoom-container:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  transform: translateY(-5px);
}

/* 2. The image itself */
.image-zoom-container img {
  display: block; /* Important: Removes extra space below the image */
  max-width: 100%; /* Ensures the image is responsive within its container */
  height: auto;    /* Maintains aspect ratio */
  
  /* Initial state: Normal size */
  transform: scale(1);
  
  /* Smooth transition for the zoom effect */
  transition: transform 0.4s ease-out; /* Adjust duration and easing as needed */
  
  /* Ensure image covers the container if aspect ratios differ */
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

/* 3. The hover effect: Zoom in! */
.image-zoom-container:hover img {
  /* On hover, scale the image up by 10% (1.1 = 110%) */
  transform: scale(1.1); 
}

.maps_embed{
  width: 34.805rem;
height: 34.805rem;
flex-shrink: 0;
aspect-ratio: 556.88/556.88;
}

.text-green-400{
  color: #1A5755!important;
  font-weight: 400;
}

.text-black-400{
  color: #000!important;
  font-weight: 400!important;
}

.text-black-400:hover{
  color: #000!important;
  font-weight: 500;
}

.question-svg-faq{
  width: 1.8125rem;
  height: 1.756rem;
  flex-shrink: 0;
}

.faq-question{
  color: #000;
font-size: 1.25rem;
font-style: normal;
font-weight: 400!important;
line-height: 2rem; /* 160% */
letter-spacing: 0.025rem;
}

.text-desc-faq{
  color: #000;
  font-size: 1rem;
  font-style: normal;
  font-weight: 200;
  line-height: 2rem; /* 200% */
  letter-spacing: 0.02rem;
}

.copyright-text{
  color: #000;
  font-size: 1.125rem;
  font-weight: 200;
  line-height: 2rem; /* 177.778% */
  letter-spacing: 0.0225rem;
}

.copyright-text span{
  color: #000;
font-size: 1.125rem;
font-weight: 700;
line-height: 2rem;
letter-spacing: 0.0225rem;
}

.footer-head-line{
  width: 0.0625rem;
height: 2.31338rem;
}

.footer-nav-head{
  color: #000;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 2rem; /* 177.778% */
  letter-spacing: 0.0225rem;
}

.footer-nav-head span{
  color: #000;
  font-size: 1.125rem;
  font-weight: 200;
  line-height: 2rem;
}

.footer-nav-text{
  color: #000;
  font-size: 1rem;
  font-weight: 300;
  line-height: 2rem; /* 200% */
  letter-spacing: 0.02rem;
  width: 13.5625rem;
height: 1.9375rem;
flex-shrink: 0;
}

.recent-blog-img{
  width: 34.5625rem;
height: 19.4375rem;
flex-shrink: 0;
}

a {
  text-decoration: none;
  color: black;
  }
  
  .btn-6 {
  color: #000;
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  /* font-size: 0.875rem; */
  /* padding: 0 1.1rem; */
  height: 50px;
  line-height: 50px;
  max-width: 220px;
  text-transform: uppercase;
  border: 1px solid currentColor;
  text-align: center;
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  /* 1. This is your default background */
  background-color: #f1fafa; 
    
    /* 2. THIS IS THE FIX (applied on mouse-out) */
    /* It tells the button to WAIT 0.2s before changing
       the background and color back to default. */
       transition: color 0.4s ease-in-out;
  }

  .btn-6-header{
    font-size: 0.875rem;
    padding: 0 1.1rem;
    height: 40px;
    line-height: 40px;
    max-width: 150px;
  }
  
 /* 3. This is your new text span */
.btn-6 .btn-text {
  position: relative; /* Must be relative for z-index */
  z-index: 1; /* Keep text on top of animation */
}

/* 4. This is your original animation span, now with a class */
.btn-6 .btn-anim {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #275d59;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  transform: translate(-50%, -50%);

  /* 5. Set z-index to sit *above* the background
     but *below* the .btn-text */
  z-index: 0; 
}

.btn-6:hover {
  /* 6. On hover, just change the color.
     The border will change too (due to 'currentColor') */
  color: #fefaec;
  /* DO NOT make background transparent */
}

.btn-6:hover .btn-anim {
  width: 225%;
  height: 562.5px;
}

.btn-6:active {
  background-color: #275d59;
}

  .sqrft_benefits_container:hover{
    background-color: #dcf1f1;
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
  }

  .sqft-img:hover{
    box-shadow: 0 15px 10px 3px rgb(0 0 0 / 0.1), 0 18px 10px 0px rgb(0 0 0 / 0.1);
    transition: box-shadow 0.5s ease-in-out;
    cursor: pointer;
  }









  /* Donate Page */










  /* Benefits Section */
  .benefit-card {
    background-color: #2E5D57;
    border-radius: 20px;
    /* width: 22.375rem; */
height: 15.5rem;
flex-shrink: 0;
    color: #ffffff; /* White text */
}
.icon-set {
    color: #C0C0C0; /* Light gray for icons */
    width: 28px;
    height: 28px;
}
/* .benefit-img-container{ */
  /* width: 26.5rem; */
/* height: 33.1875rem; */
/* } */

/* .gift-svg{
  fill: #FCF4D4;
  width: 7.1875rem;
height: 7.1875rem;
flex-shrink: 0;
aspect-ratio: 1/1;
} */

/* @media  only screen and (max-width: 768px) {
  .benefit-card .text-2xl{
    font-size: 1rem;
    line-height: 1.3rem;
    letter-spacing: 0.025rem;
  }
  .benefit-card {
    height: 10.5rem;
  }
  .benefit-card .mb-3{
    margin-bottom: 0.5rem;
  }
  .benefit-card .text-sm{
    letter-spacing: 0.025rem;
    font-size: 0.6rem;
    line-height: 1.25rem;
  }
  .gift-svg{
    width: 3.5rem;
    height: 3.5rem;
  }
} */

/* Custom CSS for the Mobile Swiper/Carousel Effect */
.donation-benefits-swiper-container {
  /* Enable horizontal scroll, hide scrollbar, and force snapping */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem; /* Space for shadow or if scrollbar reappears */
}
.donation-benefits-swiper-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.donation-benefits-swiper-slide {
  scroll-snap-align: start;
}

/* ===================================== */
/* --- DESKTOP LAYOUT (Media Query: 1201px+) --- */
/* ===================================== */
@media (min-width: 1201px) {
    
  /* 1. Reset Swiper container to allow for full-width grid */
  #sevas-section-donate .seva-container {
      padding-bottom: 0 !important;
      overflow: visible !important;
  }

  /* 2. KEY CHANGE: Implement 2x3 Grid on the swiper-wrapper */
  #sevas-section-donate .swiper-wrapper {
      display: grid !important; /* Forces CSS Grid */
      grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
      gap: 2.5rem; /* Spacing between rows and columns */

      /* Override Swiper inline styles */
      width: 100% !important; 
      transform: none !important; 
      transition-duration: 0ms !important;
      padding-left: 0 !important;
      margin-left: 0 !important;
  }
  
  /* 3. Reset slide styles for the grid items */
  #sevas-section-donate .swiper-slide {
      width: auto !important; /* Let grid handle the width */
      margin-right: 0 !important;
      flex-shrink: 1 !important;
  }

  /* 4. Hide the scrollbar */
  #sevas-section-donate .swiper-scrollbar {
      display: none !important;
  }
}

/* ===================================== */
/* --- MOBILE LAYOUT (Swiper runs below 1201px) --- */
/* ===================================== */

#sevas-section-donate .seva-container {
  padding-bottom: 40px; 
}

/* Fix: Remove left offset from the start of the slides */
#sevas-section-donate .swiper-wrapper {
  padding-left: 0 !important; 
}

#sevas-section-donate .swiper-slide {
  /* Swiper handles the width based on slidesPerView: 1.2 */
  margin-right: 2.5rem;
  /* Ensure only 1.2 slides are visible, preventing the 3-in-a-row issue on small screens */
  width: auto !important; 
}

/* --- Swiper Scrollbar Styling (Visible when Swiper is active) --- */
#sevas-section-donate .swiper-scrollbar {
  background: rgba(0, 0, 0, 0.1); 
  height: 6px;
  border-radius: 3px;
  bottom: 0px !important; 
  left: 2.5rem !important; 
  width: calc(100% - 2.5rem * 2) !important; 
}

#sevas-section-donate .swiper-scrollbar-drag {
  background: #000; 
  border-radius: 3px;
}

#sevas-section-donate .seva-card {
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  flex-shrink: 0; 
}