body {
            font-family: 'Poppins', sans-serif;
            /* The overflow is now controlled entirely by the inline style on the body tag and JS */
        }
        
        
        #header {
            transition: top 0.4s ease-in-out;
        }

        .bg-doctor-pattern {
            background-color: #f8fafc;
        }

        .bg-doctors-pattern {
            background-color: #ffffff;
        }

        .bg-quote-watermark {
            background-repeat: no-repeat;
            background-position: right 10% bottom 20%;
        }

        .bg-contact-pattern {
            background-color: #f8fafc;
        }

        /* Updated underline animation */
        .underline-animated {
            position: relative;
            display: inline-block; /* Changed for consistent behavior */
        }

        .underline-animated::after {
            content: '';
            position: absolute;
            left: 50%; /* Start from center */
            bottom: -5px;
            width: 0; /* Initial width is 0 */
            height: 2px;
            /* Use a gradient instead of solid color for fade effect */
            background: linear-gradient(to right, 
                transparent 0%, 
                #0ea5e9 20%, 
                #0ea5e9 80%, 
                transparent 100%
            );
            transform: translateX(-50%); /* Keep centered */
            transition: width 1.2s ease-in-out; /* Animate width - Slower */
        }
        /* Class added/removed by JS when element is in/out of view */
        .underline-animated.animate::after {
            width: 100%; /* Expand to full width */
        }


        /* Awards & Orations Styling */
        .awards-section {
            padding: 40px 0;
            background: #fafafa;
        }

        .awards-heading {
            text-align: center;
            margin-bottom: 24px;
        }
        
        .awards-swiper {
            padding: 20px 0;
            overflow: hidden; /* Prevents next slide from peeking */
        }
        
        .award-card {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 480px;
            height: auto;
            aspect-ratio: 16 / 9;
            transition: transform 0.3s ease;
            background-color: #ffffff;
            margin: 0 auto;
        }
        .award-card:hover {
            transform: translateY(-5px);
        }
        
        .award-card-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .award-card-title {
            margin: 1rem auto 0 auto;
            font-weight: 400;
            color: #111;
            font-size: 1rem;
            max-width: 480px;
            padding: 0 1rem;
        }
        
        .awards-swiper .swiper-pagination {
            position: relative;
            bottom: -10px;
        }
        .awards-swiper .swiper-pagination-bullet {
            background: #0f172a;
            opacity: 0.4;
            width: 10px;
            height: 10px;
        }
        .awards-swiper .swiper-pagination-bullet-active {
            opacity: 1;
            background: #0d9488;
        }

        /* Tab styling */
        .tab-btn {
            padding: 0.5rem 1.5rem;
            border-radius: 9999px;
            font-weight: 500;
            color: #0d9488;
            background-color: white;
            border: 2px solid #0d9488;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .tab-btn.active {
            background-color: #0d9488;
            color: white;
        }
        
        .tab-pane {
            display: none;
        }
        
        .tab-pane.active {
            display: block;
        }

        /* Events Carousel Styling */
        #events-slider {
            height: 80vh;
            max-height: 700px;
            width: 100%;
            position: relative;
            overflow: hidden; /* CRITICAL: Clips content and prevents vertical scroll spill when height is set by JS */
        }

        #events-slider .swiper-container {
            height: 100%;
            width: 100%;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        }
        
        /* Removed touch-action: none !important; to allow swipes to trigger PAGE SCROLLING */
        /* @media screen and (max-width: 768px) {
            #events-slider .swiper-container {
                touch-action: none !important;
            }
        } */

        .swiper-image-one { background-image: url(../images/11-1.jpg); }
        .swiper-image-three { background-image: url(../images/22-2.jpg); }
        .swiper-image-five { background-image: url(../images/33-1.jpg); }
        .swiper-image-seven { background-image: url(../images/44-1.jpg); }

        #events-slider .swiper-image {
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #events-slider .swiper-image-inner {
            background-size: cover;
            background-position: center center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            background-color: hsla(0, 0%, 0%, 0.2);
            background-blend-mode: overlay;
            padding: 2rem;
            box-sizing: border-box;
            transition: all 1s linear;
        }
        #events-slider .swiper-image-left { transition-delay: 0s; } /* MODIFIED */
        
        /* --- MODIFICATION START --- */
        #events-slider .swiper-image-inner.swiper-image-right {
            background-image: url('../images/rm222batch3-kul-15.jpg');
            background-size: cover;
            background-position: center center;
            background-blend-mode: normal;
            transition-delay: 1s;
            position: relative;
            overflow: hidden;
        }
        
        #events-slider h2.title {
            font-family: 'Poppins', sans-serif; color: #0f172a; font-size: 1.8rem; font-weight: 700;
            line-height: 1.2; margin-bottom: 1rem; opacity: 0;
            transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) .5s; /* MODIFIED - Synchronized with swiper speed */
            transform: translate3d(-20%, 0, 0); text-align: left; width: 100%; position: relative; z-index: 1;
        }
        #events-slider p.paragraph {
            margin: 0; font-family: 'Poppins', sans-serif; color: #0f172a; width: 100%;
            text-align: justify; font-size: 1rem; line-height: 1.6; font-weight: 400; opacity: 0;
            transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) .6s; /* MODIFIED - Synchronized with swiper speed */
            transform: translate3d(-20%, 0, 0); position: relative; z-index: 1;
        }
        /* --- MODIFICATION END --- */

        #events-slider .swiper-slide {
            display: flex; flex-direction: row; justify-content: center;
            align-items: center; position: relative; overflow: hidden;
        }
        /* --- REMOVED RULE --- */
        /* #events-slider .swiper-slide.swiper-slide-active .swiper-image-inner.swiper-image-right { background-color: #f8fafc; } */
        #events-slider .swiper-slide.swiper-slide-active h2.title,
        #events-slider .swiper-slide.swiper-slide-active p.paragraph { transform: translate3d(0, 0, 0); opacity: 1; }

        /* --- REMOVED DECORATIVE ELEMENT RULES --- */
        
        /* --- FIX: Removed infinite float animation to prevent "blinking" --- */

        #events-slider .swiper-pagination-bullet { background: #0f172a; opacity: 0.4; }
        #events-slider .swiper-pagination-bullet-active { opacity: 1; background: #0d9488; }


        @media screen and (max-width: 768px) {
            
            /* --- PDF FIX: START --- */
            /* Add smooth height transition for mobile */
            #events-slider, #events-slider .swiper-container {
                transition: height 0.4s ease;
            }
            /* --- PDF FIX: END --- */

            /* --- CRITICAL LOCK MECHANISM START --- */
            /* On mobile, height is initially auto for JS calculation, but then set to a fixed pixel value by JS 
               to contain the carousel content and prevent vertical page scroll spill. */
            #events-slider {
                height: auto;
                max-height: none; /* Remove max-height constraint on mobile */
            }
            /* Container inside also needs to be auto for calculation, then set by JS */
            #events-slider .swiper-container {
                height: auto;
            }
            /* --- CRITICAL LOCK MECHANISM END --- */
            
            /* Slide height should also be auto */
            #events-slider .swiper-slide {
                flex-direction: column;
                height: auto;
            }
            
            /* Remove fixed 50% height */
            #events-slider .swiper-image {
                position: relative;
                width: 100%;
                /* height: 50%; <-- REMOVED */
            }
            
            /* Set the image part to a fixed-ish height */
            #events-slider .swiper-image:first-child {
                height: 40vh; /* 40% of viewport height */
                min-height: 250px; /* ensure a minimum height */
            }
            
            /* Set the text part to auto height */
            #events-slider .swiper-image:last-child {
                height: auto;
            }

            /* Ensure the inner text container has good padding */
            #events-slider .swiper-image-inner {
                padding: 2rem; /* Increased from 20px for breathability */
            }
            #events-slider h2.title {
                font-size: 1.4rem;
            }
            /* Increased font size and line height for readability */
            #events-slider p.paragraph {
                font-size: 0.9rem;
                line-height: 1.7;
            }
            /* --- MODIFICATION END --- */

            /* --- REMOVED DECORATIVE ELEMENT RULES --- */

             /* --- MODIFICATION: Hiding media arrows on mobile removed per user request. They will now show. --- */
            /* REMOVED: .media-carousel-container .carousel-arrow { display: none; } */
        }
        @media screen and (max-width: 640px) {
            #events-slider {
                /* height: 86vh; <-- REPLACED */
                height: auto; /* Must be auto for JS calculation */
                width: 100%;
            }
        }
        
        @media (min-width: 768px) {
            .award-card-title {
                font-size: 1.1rem;
            }
             /* --- MODIFICATION: Ensure media arrows are visible on desktop --- */
            /* The issue was that without an explicit display property, they might be hidden. 
               Set display: flex as default below. */
        }

        /* --- Blog Carousel Styling --- */
        .blogs-swiper {
            /* Mobile-first: default to swiper behavior */
            width: 100%;
            overflow: hidden;
            padding-bottom: 30px; /* Space for pagination */
        }
        
        .blogs-swiper .swiper-slide {
            width: 100%;
            padding: 0 10px; /* Give a little peeking room or just center */
            box-sizing: border-box; /* Ensure padding doesn't break width */
        }

        .blogs-swiper .swiper-pagination {
            position: absolute;
            bottom: 0px;
        }
        .blogs-swiper .swiper-pagination-bullet {
            background: #0f172a;
            opacity: 0.4;
            width: 10px;
            height: 10px;
        }
        .blogs-swiper .swiper-pagination-bullet-active {
            opacity: 1;
            background: #0d9488;
        }

        /* Desktop: Revert Swiper and use Flex grid (md breakpoint) */
        @media screen and (min-width: 768px) {
            .blogs-swiper {
                width: auto;
                overflow: visible;
                padding-bottom: 0;
            }
            .blogs-swiper .swiper-wrapper {
                /* This is the key: disable swiper layout */
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 2rem; /* 32px, matches original gap-8 */
                /* Remove swiper-specific transforms */
                transform: none !important; 
            }
            .blogs-swiper .swiper-slide {
                /* Reset slide width */
                width: auto; 
                padding: 0;
                /* Remove swiper-specific margins */
                margin-right: 0 !important; 
            }
            .blogs-swiper .swiper-pagination {
                display: none; /* Hide pagination on desktop */
            }
        }

        /* --- Newspaper Articles Masonry Grid (Pinterest-style) --- */
        .masonry-grid-container {
            width: 1232px;
            height: 521px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
            grid-auto-rows: 8px; /* base row height for scaling */
            grid-auto-flow: dense;
            gap: 10px;
            overflow: hidden;
            border-radius: 10px;
            background: #f9fafb;
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
            padding: 8px;
            perspective: 1000px;
        }

        /* Each item auto-scales its height based on image ratio */
        .masonry-grid-item {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
            /* Animation: initial state */
            opacity: 0;
            transform: scale(0.95) translateY(20px);
            transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
        }
        
        .masonry-grid-item.is-visible {
            opacity: 1;
            transform: scale(1) translateY(0);
        }

        .masonry-grid-item.is-visible:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* Images scale and crop perfectly within tiles */
        .masonry-grid-item img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            border-radius: 6px;
        }

        /* Responsive scaling per screen */
        @media (max-width: 1280px) {
            .masonry-grid-container {
                width: 95%;
                height: auto;
            }
        }

        @media (max-width: 992px) {
            .masonry-grid-container {
                /* START: Modified for 2-column mobile layout */
                grid-template-columns: repeat(2, 1fr);
                /* END: Modified for 2-column mobile layout */
            }
        }

        @media (max-width: 600px) {
            .masonry-grid-container {
                /* START: Removed rule to prevent single-column collapse */
                /* grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); */
                /* END: Removed rule */
            }
        }

        /* --- Media Carousel --- */
        .media-carousel-container {
            max-width: 800px;
            margin: auto;
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            touch-action: pan-y; /* Allow vertical scroll, handle horizontal */
        }

        .media-carousel-slide {
            display: none;
            opacity: 0;
            transition: opacity 0.8s ease-in-out;
            width: 100%;
        }

        .media-carousel-slide.active {
            display: block;
            opacity: 1;
        }

        .media-carousel-slide .video-wrapper {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
            background: #000;
        }

        .media-carousel-slide iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        .carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.4);
            color: white;
            border: none;
            cursor: pointer;
            padding: 12px;
            border-radius: 50%;
            z-index: 10;
            font-size: 1.2rem;
            width: 44px;
            height: 44px;
            /* FIX: Ensure arrows are visible by default on all screen sizes */
            display: flex; 
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
        }
        
        .carousel-arrow:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }

        .prev-arrow {
            left: 16px;
        }

        .next-arrow {
            right: 16px;
        }

        .carousel-indicators {
            text-align: center;
            padding-top: 20px;
        }

        .indicator-dot {
            cursor: pointer;
            height: 12px;
            width: 12px;
            margin: 0 5px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.4s ease;
        }

        .indicator-dot.active, .indicator-dot:hover {
            background-color: #0d9488;
        }
        
        /* Contact Form Carousel */
        .contact-carousel {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .contact-carousel-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1.5s ease-in-out; /* Slow fade transition */
        }

        .contact-carousel-slide.active {
            opacity: 1;
        }

        .contact-carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* --- Mobile Menu Fade + Blur + Frosted Overlay --- */
        /* Dim + Blur Overlay */
        #mobile-menu-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s;
            z-index: 40;
        }

        #mobile-menu-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        /* Mobile Menu Itself */
        #mobile-menu {
            opacity: 0;
            visibility: hidden;
            transform: translateY(-20px);
            filter: blur(8px);
            transition:
                opacity 0.4s ease,
                transform 0.4s ease,
                filter 0.4s ease,
                visibility 0.4s;
            /* backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px); */
            background: rgb(255, 255, 255); /* Changed from rgba(255, 255, 255, 0.9) */
            position: absolute;
            width: auto;
            top: calc(100% + 8px);
            right: 1.5rem; /* Corresponds to px-6 on nav */
            z-index: 50;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            overflow: hidden; /* Ensures children respect border radius */
        }

        #mobile-menu.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            filter: blur(0);
        }

        /* Clipboard Notification Style */
        #clipboard-notification.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* Library List Style */
        #library ul {
            list-style: disc; /* Ensure disc is used */
            padding-left: 1.5rem; /* Add padding for bullets */
        }
        #library ul li::marker {
            color: #0D9488; /* Set bullet color */
        }
        #library ul li a {
            color: #334155; /* slate-700 */
            transition: color 0.2s ease;
        }
        #library ul li a:hover {
            color: #0D9488; /* primary color */
            text-decoration: underline;
        }
:root {
            --radius-mobile: 175px;
            --radius-desktop: 275px;
        }
        /* Smooth fade for center content */
        .fade-enter {
            opacity: 0;
            transform: translateY(10px);
        }
        .fade-enter-active {
            opacity: 1;
            transform: translateY(0);
            transition: opacity 500ms ease-out, transform 500ms ease-out;
        }

        /* --- CSS from specialities.pdf --- */
        .underline-animated {
            position: relative;
            display: inline-block;
        }
        .underline-animated::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -5px;
            width: 0;
            height: 2px;
            /* Exact gradient from PDF using the same blue */
            background: linear-gradient(to right, transparent 0%, #0ea5e9 20%, #0ea5e9 80%, transparent 100%);
            transform: translateX(-50%);
            transition: width 1.2s ease-in-out;
        }
        .underline-animated.animate::after {
            width: 100%;
        }
/* Removed the global SVG color override */

/* ---------- Mobile single-pill: hide original pill buttons on small screens ---------- */
@media (max-width: 767px) {
  /* Hide original tab buttons so they don't duplicate the single-pill display */
  .tab-btn { display: none !important; }

  /* Show the single-pill container on mobile */
  #single-tab-mobile { display: flex !important; }
}

/* Single-pill styling: teal filled appearance */
#single-pill {
  border-color: #0D9488;
  color: #ffffff;
  background: #0D9488;        /* teal filled look */
  min-width: 140px;
}

/* Focus outlines */
#single-pill:focus {
  outline: 3px solid rgba(13,148,136,0.18);
  outline-offset: 2px;
}

/* Remove any sliding indicator that your theme might add (covers common class names) */
.tab-indicator,
.tabs-indicator,
.tabs-underline,
.tab-slider,
.tab-underline,
.tabs-progress,
.tab-active-indicator { display: none !important; }

/* ---------- Phone choice modal (desktop + mobile) ---------- */
#phone-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms;
  z-index: 9998;
}
#phone-modal-overlay.show { opacity: 1; visibility: visible; }

#phone-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.98);
  width: calc(100% - 40px);
  max-width: 420px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(2,6,23,0.25);
  padding: 14px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, transform 220ms ease, visibility 180ms;
  border: 1px solid rgba(13,148,136,0.06);
}
#phone-modal.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* Header row */
#phone-modal .modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
#phone-modal .modal-title { font-weight:700; color:#0f172a; font-size:1rem; }
#phone-modal .modal-sub { display:block; font-size:0.86rem; color:#475569; }

/* Phone item list */
#phone-modal .phone-list { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.phone-option {
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px;
  cursor:pointer; user-select:none; text-decoration:none; border:1px solid rgba(13,148,136,0.06);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  background: linear-gradient(180deg,#ffffff,#fbfefc);
  color: #0f172a;
}
.phone-option:active { transform: translateY(1px); }
.phone-option:hover { box-shadow: 0 8px 18px rgba(2,6,23,0.08); }

.phone-option .num { font-weight:700; color:#0f172a; }
.phone-option .label { font-size:0.86rem; color:#475569; }

/* accent style for mobile (primary) */
.phone-option.primary { background: linear-gradient(180deg,#0d9488,#0d9488); color:#fff; border-color:#0d9488; }
.phone-option.primary .label { color: rgba(255,255,255,0.92); }
.phone-option.primary .num { color:#fff; }

/* Close button */
#phone-modal .close-btn { background:transparent; border:none; font-size:1.1rem; color:#475569; cursor:pointer; padding:6px; border-radius:8px; }
#phone-modal .close-btn:focus { outline: 3px solid rgba(13,148,136,0.15); }

/* Toast/clipboard notification (simple) */
#phone-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(10px);
  background: #111827;
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.18);
  opacity: 0;
  pointer-events: none;
  z-index: 10001;
  transition: opacity 220ms ease, transform 220ms ease;
}
#phone-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* small responsive tweak */
@media (max-width: 420px) {
  #phone-modal { width: calc(100% - 26px); padding:12px; max-width: 380px; }
}

/* Hero tagline lift animation */
.hero-lift {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.hero-lift.show {
    opacity: 1;
    transform: translateY(0);
}

/* paste into your <style> block */
  #hero .hero-text { text-shadow: 0 3px 10px rgba(0,0,0,0.45); }

@media (max-width: 768px) {
  /* Prevent the carousel from capturing vertical scroll gestures */
  #events-slider,
  #events-slider .swiper-container {
    touch-action: pan-y !important;
    overscroll-behavior: contain;
    -ms-touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================
   START: Charity Dual Slider Styles (Animation Fixed)
   ========================================= */

/* Main Container */
.charity-container {
    position: relative;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    height: 600px; /* Default Desktop Height */
    background: #FAF9F6;
    margin: 0;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    overflow: hidden;
    cursor: pointer;
    transition: height 0.3s ease; /* Smooth height resizing */
}

/* Text Content Styling */
.charity-container h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 10px;
    color: #0f172a;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.charity-container p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    margin: 15px 0;
    line-height: 1.75;
    color: #475569;
}

.charity-text-content {
    max-width: 80%;
    pointer-events: none;
}

/* --- Form Box (Text Content) --- */
.charity-form-box {
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
    background: #FAF9F6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #333;
    text-align: center;
    padding: 40px;
    z-index: 1;
    transition: 0.6s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

/* Position Logic (Desktop) */
.charity-container.active .charity-form-box {
    right: 50%;
}

/* Visibility Logic */
.charity-container[data-slide="0"] .charity-form-box.slide-1,
.charity-container[data-slide="1"] .charity-form-box.slide-2,
.charity-container[data-slide="2"] .charity-form-box.slide-3,
.charity-container[data-slide="3"] .charity-form-box.slide-4 {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.6s; 
}

.charity-form-box:not(.active-slide) {
    transition-delay: 0s;
}

/* --- Toggle Box (Blue Overlay) --- */
.charity-toggle-box {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none; 
}

.charity-toggle-box::before {
    content: "";
    position: absolute;
    left: -250%;
    width: 300%;
    height: 100%;
    background: #0369A1;
    border-radius: 150px;
    z-index: 2;
    transition: 1.8s ease-in-out;
}

.charity-container.active .charity-toggle-box::before {
    left: 50%;
}

/* --- Toggle Panels (Image Containers) --- */
.charity-toggle-panel {
    position: absolute;
    width: 50%;
    height: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: 0.6s ease-in-out;
    overflow: hidden; 
}

.charity-image-wrapper {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
    overflow: hidden;
    opacity: 0; 
    transition: opacity 0.4s ease-in-out;
    pointer-events: none;
}

.charity-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; 
}

/* Animations */
@keyframes charityFade2 {
    0% { opacity: 0; }
    5% { opacity: 1; }
    50% { opacity: 1; }
    60% { opacity: 0; }
    100% { opacity: 0; }
}

.slide-0-wrapper img, .slide-1-wrapper img { animation: charityFade2 20s infinite; }
.slide-0-wrapper img:nth-child(1), .slide-1-wrapper img:nth-child(1) { animation-delay: 0s; }
.slide-0-wrapper img:nth-child(2), .slide-1-wrapper img:nth-child(2) { animation-delay: 10s; }
.slide-2-wrapper img, .slide-3-wrapper img { opacity: 1; }

.charity-container[data-slide="0"] .toggle-left .slide-0-wrapper { opacity: 1; }
.charity-container[data-slide="1"] .toggle-right .slide-1-wrapper { opacity: 1; }
.charity-container[data-slide="2"] .toggle-left .slide-2-wrapper { opacity: 1; }
.charity-container[data-slide="3"] .toggle-right .slide-3-wrapper { opacity: 1; }

/* Panel Transitions (Desktop) */
.charity-toggle-panel.toggle-left { left: 0; transition-delay: 1.2s; }
.charity-container.active .charity-toggle-panel.toggle-left { left: -50%; transition-delay: 0.6s; }

.charity-toggle-panel.toggle-right { right: -50%; transition-delay: 0.6s; }
.charity-container.active .charity-toggle-panel.toggle-right { right: 0; transition-delay: 1.2s; }

/* Indicators */
.charity-carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 10;
    pointer-events: none;
}

.charity-dot {
    width: 12px;
    height: 12px;
    background-color: #ccc;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.charity-container[data-slide="0"] .charity-dot:nth-child(1),
.charity-container[data-slide="1"] .charity-dot:nth-child(2),
.charity-container[data-slide="2"] .charity-dot:nth-child(3),
.charity-container[data-slide="3"] .charity-dot:nth-child(4) {
    background-color: #0369A1;
    transform: scale(1.2);
}

/* =========================================
   MOBILE RESPONSIVE LOGIC (Restored Animations + Auto Scale)
   ========================================= */
@media screen and (max-width: 650px) {
    /* Fonts */
    .charity-container h1 { font-size: 26px; margin-bottom: 5px; }
    .charity-container p { font-size: 15px; line-height: 1.5; margin: 10px 0; }

    /* Content Area */
    .charity-text-content {
        width: 100%;
        max-height: 100%;
        pointer-events: auto; 
        padding-right: 0;
    }

    /* Form Box: Height 55% exactly as original file */
    .charity-form-box {
        bottom: 0;
        width: 100%;
        height: 55%; 
        padding: 10px 20px;
        right: 0 !important;
        top: auto; /* Reset */
    }

    /* ACTIVE STATE: Moves Text Up to 55% position (Leaves 45% below for image) */
    .charity-container.active .charity-form-box {
        right: 0;
        bottom: 45%; 
    }

    /* Blue Background Animation: Restored exact coordinates */
    .charity-toggle-box::before {
        left: 0 !important;
        top: -255%; 
        width: 100%;
        height: 300%;
        border-radius: 20vw;
    }

    .charity-container.active .charity-toggle-box::before {
        left: 0 !important;
        top: 55%; 
    }

    /* Image Panels */
    .charity-toggle-panel {
        width: 100%;
        height: 45%; 
        top: 0; /* Default top position */
    }

    /* Left Panel Animation: Moves Up and Out */
    .charity-container.active .charity-toggle-panel.toggle-left {
        left: 0;
        top: -55%; 
    }

    /* Right Panel Animation: Moves In from Bottom */
    .charity-toggle-panel.toggle-right {
        right: 0;
        bottom: -55%; 
        top: auto; 
    }

    .charity-container.active .charity-toggle-panel.toggle-right {
        bottom: 0;
    }
    
    .charity-image-wrapper {
        width: 90%; 
        max-width: 95%;
        height: 90%; 
        /* Centering */
        top: 50%; left: 50%; transform: translate(-50%, -50%);
    }

    .charity-carousel-indicators { bottom: 10px; }
}

@media screen and (max-width: 400px) {
    .charity-form-box { padding: 15px; }
}
/* =========================================
   END: Charity Dual Slider Styles
   ========================================= */