ÿþ    /* Global Styles */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');



    * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

    }



    body {

        font-family: 'Inter', sans-serif;

        line-height: 1.6;

        color: #333;

        background-color: #f4f4f4;

    }



    /* Footer Flex Fix */

    .footer-top .container {

        display: flex;

        justify-content: space-between;

        align-items: flex-start;

        flex-wrap: wrap;

        gap: 30px;

    }



    a {

        text-decoration: none;

        color: inherit;

    }



    ul {

        list-style: none;

    }



    /* ===============================================

   NEW HEADER DESIGN (Screenshot Style)

   =============================================== */



    /* --- Top Bar --- */

    .top-bar {

        background-color: #0e2e50;

        /* Deep Blue from screenshot */

        color: #fff;

        font-size: 13px;

        padding: 8px 0;

        font-family: 'Inter', sans-serif;

        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    }



    .top-bar .container {

        max-width: 95%;

        /* Match existing container width */

        margin: 0 auto;

        padding: 0 15px;

    }



    .top-bar-content {

        display: flex;

        justify-content: space-between;

        align-items: center;

        flex-wrap: wrap;

        gap: 10px;

    }



    .top-bar-left {

        display: flex;

        align-items: center;

        gap: 20px;

    }



    .top-bar-left a {

        color: #fff;

        text-decoration: none;

        display: flex;

        align-items: center;

        gap: 6px;

        transition: color 0.3s;

    }



    .top-bar-left a:hover {

        color: #00bef2;

        /* Cyan highlight */

    }



    .top-bar-right {

        display: flex;

        align-items: center;

        gap: 20px;

    }



    .social-icons {

        display: flex;

        gap: 10px;

    }



    .social-icons a {

        color: #fff;

        width: 20px;

        height: 20px;

        display: flex;

        align-items: center;

        justify-content: center;

        transition: all 0.3s;

    }



    .social-icons a:hover {

        color: #00bef2;

        transform: translateY(-2px);

    }



    .join-us-btn {

        background-color: #00bef2;

        /* Bright Blue/Cyan Button */

        color: #fff !important;

        padding: 4px 15px;

        font-weight: 700;

        text-transform: uppercase;

        font-size: 12px;

        letter-spacing: 0.5px;

        text-decoration: none;

        transition: background 0.3s;

    }



    .join-us-btn:hover {

        background-color: #009ac2;

    }





    /* --- Main Header (Clean White) --- */

    .main-header {

        background: #ffffff !important;

        padding: 10px 0;

        position: relative !important;

        /* Changed from absolute to flow naturally below topbar */

        width: 100%;

        z-index: 1000;

        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

        /* Subtle shadow for white header */

        border-bottom: none;

    }



    .main-header .container {

        max-width: 95%;

        margin: 0 auto;

        padding: 0 15px;

    }



    .header-content {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 15px;

    }



    /* Logo Area - Left */

    .logo-area {

        flex-shrink: 0;

    }



    .logo-link {

        display: flex;

        align-items: center;

        gap: 12px;

        text-decoration: none;

    }



    .logo-icon {

        width: 100px;

        /* Adjusted size */

        height: 100px;

        border-radius: 0;

        overflow: hidden;

        border: none;

        flex-shrink: 0;

    }



    .logo-icon img {

        width: 100%;

        height: 100%;

        object-fit: contain;

    }



    .logo-text h1 {

        font-size: 22px;

        /* Adjusted for longer text 'SAMRAT EDUCATIONAL' */

        color: #f07729;

        /* Orange Color from Logo */

        font-weight: 800;

        margin: 0;

        text-transform: uppercase;

        font-family: 'Playfair Display', serif;

        line-height: 1;

    }



    .logo-text span {

        font-size: 13px;

        /* Adjusted for 'AND WELFARE FOUNDATION' */

        color: #2ab81b;

        /* Green Color from Logo/Screenshot */

        font-weight: 700;

        font-family: 'Inter', sans-serif;

        /* Changed to Inter for better readability at small size */

        text-transform: uppercase;

        display: block;

        margin-top: 2px;

        letter-spacing: 0.5px;

    }



    /* Navigation - Center/Right */

    .header-nav {

        flex: 1;

        display: flex;

        justify-content: flex-end;

        /* Align menu to right near actions */

        margin-right: 20px;

    }



    .nav-menu {

        display: flex;

        gap: 5px;

        margin: 0;

        padding: 0;

        list-style: none;

        align-items: center;

    }



    .nav-menu li {

        position: relative;

    }



    .nav-menu a {

        display: block;

        padding: 10px 14px;

        color: #0e2e50;

        /* Dark Blue Text */

        font-weight: 700;

        font-size: 14px;

        text-transform: uppercase;

        /* Uppercase menu items */

        transition: all 0.3s ease;

        position: relative;

        font-family: 'Inter', sans-serif;

    }



    .nav-menu a:hover,

    .nav-menu li.active a {

        color: #f07729;

    }



    /* Dropdown styling adjustment for white header */

    .dropdown-toggle::after {

        color: #999;

        margin-left: 5px;

    }



    /* Header Actions - Right */

    .header-actions {

        display: flex;

        align-items: center;

        gap: 15px;

        flex-shrink: 0;

    }



    /* User Dropdown Button - update for White Background */

    .user-dropdown {

        position: relative;

    }



    .user-btn {

        background: transparent;

        border: none;

        /* No border for cleaner look */

        color: #0e2e50;

        /* Dark text */

        padding: 8px 10px;

        font-size: 14px;

        /* Reduced from 20px */

        /* Icon Size */

        cursor: pointer;

        display: flex;

        align-items: center;

        gap: 8px;

        transition: all 0.3s ease;

        font-weight: 700;

        /* Added bold to match menu */

        font-family: 'Inter', sans-serif;

        text-transform: uppercase;

    }



    .user-btn:hover {

        color: #f07729;

        transform: none;

        background: transparent;

    }



    .user-btn i {

        font-size: 16px;

        /* Reduced from 22px */

    }



    /* Donate Button - Keep Orange but optimize */

    .donate-btn {

        display: none;

        /* Hide donate button if it's not in the screenshot or move it elsewhere if user insists. Keeping purely based on visual match implies clean header. */

    }



    .join-us-btn {

        background-color: #00bef2;

        /* Bright Blue/Cyan Button */

        color: #fff !important;

        padding: 4px 15px;

        font-weight: 700;

        text-transform: uppercase;

        font-size: 12px;

        letter-spacing: 0.5px;

        text-decoration: none;

        transition: background 0.3s;

    }



    .join-us-btn:hover {

        background-color: #009ac2;

    }



    .donate-btn-top {

        background-color: #00bef2;

        /* Changed from Orange to match Join Us */

        /* Orange Button */

        color: #fff !important;

        padding: 4px 15px;

        font-weight: 700;

        text-transform: uppercase;

        font-size: 12px;

        letter-spacing: 0.5px;

        text-decoration: none;

        transition: background 0.3s;

    }



    .donate-btn-top:hover {

        background-color: #009ac2;

    }



    .language-static {

        display: flex;

        align-items: center;

    }



    .lang-btn {

        background-color: #00bef2;

        /* Changed from Orange to match Join Us */

        /* Match Orange Theme */

        color: #fff;

        padding: 6px 12px;

        /* Slightly adjusted padding */

        border-radius: 4px;

        font-size: 13px;

        font-weight: 600;

        cursor: default;

        /* Static, not clickable */

        display: flex;

        align-items: center;

        gap: 5px;

        font-family: 'Inter', sans-serif;

    }



    /* Responsive Adjustments */

    @media (max-width: 991px) {

        .top-bar-left {

            justify-content: center;

            width: 100%;

            margin-bottom: 5px;

            font-size: 11px;

        }



        .top-bar-right {

            justify-content: center;

            width: 100%;

        }



        .top-bar {

            padding: 5px 0;

        }



        .header-nav {

            justify-content: center;

            /* Use Mobile Sidebar styles */

        }



        .logo-text h1 {

            font-size: 18px;

        }



        .logo-text span {

            font-size: 14px;

        }

    }



    /* Donation Ticker Styles Wrapper - Ensure it doesn't overlap */

    .donation-ticker-wrap {

        position: fixed;

        bottom: 0;

        left: 0;

        width: 100%;

        background-color: #f07729;

        /* Matches Header Donate Button */

        color: #fff;

        z-index: 9999;

        font-family: 'Inter', sans-serif;

        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

        display: flex;

        align-items: center;

        overflow: hidden;

        height: 50px;

    }



    .ticker-label {

        background-color: #d96620;

        /* Slightly darker shade */

        padding: 0 20px;

        height: 100%;

        display: flex;

        align-items: center;

        font-weight: 700;

        text-transform: uppercase;

        font-size: 14px;

        z-index: 2;

        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);

        white-space: nowrap;

    }



    .ticker-label i {

        margin-right: 8px;

        animation: pulse 2s infinite;

    }



    .ticker-content {

        flex: 1;

        overflow: hidden;

        position: relative;

        height: 100%;

        display: flex;

        align-items: center;

    }



    .ticker-move {

        display: inline-block;

        white-space: nowrap;

        animation: ticker 30s linear infinite;

        padding-left: 100%;

        /* Start off-screen */

    }



    .donor-item {

        display: inline-flex;

        align-items: center;

        margin-right: 40px;

        font-size: 15px;

        font-weight: 500;

    }



    .donor-item i {

        margin-right: 6px;

        font-size: 12px;

    }



    .donor-amount {

        font-weight: 800;

        margin-left: 5px;

        background: rgba(255, 255, 255, 0.2);

        padding: 2px 8px;

        border-radius: 4px;

    }



    @keyframes ticker {

        0% {

            transform: translate3d(0, 0, 0);

        }



        100% {

            transform: translate3d(-100%, 0, 0);

        }

    }



    @keyframes pulse {

        0% {

            transform: scale(1);

        }



        50% {

            transform: scale(1.2);

        }



        100% {

            transform: scale(1);

        }

    }



    /* Responsive Design */

    @media (max-width: 992px) {



        /* Mobile Header - Clean Layout */

        .header-content {

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            padding: 10px 0;

            gap: 10px;

        }



        .logo-area {

            order: 1;

            width: 100%;

            display: flex;

            justify-content: center;

            margin-bottom: 5px;

        }



        .logo-link {

            display: flex;

            align-items: center;

            justify-content: center;

        }



        /* Hide full nav on mobile - it goes in sidebar */

        .header-nav {

            /* Moved to sidebar styling below */

        }



        /* Right side with Sign In + Hamburger - NOW BELOW LOGO */

        .header-actions {

            order: 2;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

            margin: 0;

            padding: 0;

            border: none;

            width: 100%;

        }



        /* Sign In Button - Visible on mobile */

        .user-dropdown .user-btn {

            background: #0e2e50;

            color: #fff;

            padding: 8px 16px;

            border-radius: 6px;

            font-size: 13px;

            font-weight: 600;

            height: 40px;

            display: flex;

            align-items: center;

            gap: 6px;

        }



        .user-dropdown .user-btn span {

            display: inline !important;

        }



        /* Hamburger Toggle Button */

        .mobile-nav-toggle {

            display: flex !important;

            align-items: center;

            justify-content: center;

            width: 44px;

            height: 40px;

            background: #0e2e50;

            border: none;

            border-radius: 6px;

            color: #fff !important;

            font-size: 22px;

            padding: 0;

            margin-left: 0;

            cursor: pointer;

            transition: all 0.3s ease;

            box-shadow: 0 3px 10px rgba(14, 46, 80, 0.3);

        }



        .mobile-nav-toggle:hover {

            background: #1a4a7a;

            box-shadow: 0 5px 15px rgba(14, 46, 80, 0.4);

        }



        /* Common Button Styles for Alignment */

        .user-btn {

            height: 40px;

            display: flex;

            align-items: center;

            justify-content: center;

            margin: 0;

        }



        /* Ensure specific alignment for the toggle */

        .mobile-nav-toggle i {

            line-height: 1;

        }



        /* Hero Slider Layout - Increased Height */

        .hero-slider {

            height: auto !important;

            min-height: 700px;

            /* Increased from 500px */

            padding-top: 130px;

        }



        .slide-item {

            height: 100%;

            min-height: 700px;

            /* Increased from 500px */

            background-position: center top !important;

            background-size: cover !important;

            -webkit-background-clip: border-box;

            background-clip: border-box;

        }



        .slide-content {

            position: relative !important;

            top: auto !important;

            transform: none !important;

            padding: 15px;

            margin-top: 15vh;

            /* Pushed down significantly using viewport height */

            text-align: center;

        }



        .slide-content h1 {

            font-size: 24px !important;

            line-height: 1.25;

            margin-bottom: 10px;

        }



        .slide-content p {

            font-size: 13px !important;

            margin-bottom: 15px;

        }



        .logo-icon {

            width: 50px;

            height: 50px;

        }



        .logo-text h1 {

            font-size: 18px !important;

            white-space: nowrap;

        }



        .logo-text span {

            font-size: 11px !important;

        }



        /* Mobile Ticker Font Size Fix */

        .donation-ticker-wrap .ticker-label {

            font-size: 11px !important;

            /* Smaller label to fit */

            padding: 0 10px !important;

        }



        .donation-ticker-wrap .donor-item {

            font-size: 14px !important;

            /* Readable but fits */

            margin-right: 15px !important;

        }



        .donation-ticker-wrap {

            height: 45px !important;

        }



        /* =========================================

       PREMIUM MOBILE SIDEBAR (Flex Layout)

       ========================================= */

        .header-nav {

            position: fixed;

            top: 0;

            left: -100%;

            width: 320px;

            height: 100vh;

            background: #ffffff;

            z-index: 1050;

            box-shadow: 10px 0 40px rgba(0, 0, 0, 0.2);

            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);

            display: flex;

            /* Critical for layout locking */

            flex-direction: column;

            transform: translateX(0);

            /* Using transform for performance */

            visibility: hidden;

            /* Hide when closed */

            padding: 0;

        }



        .header-nav.active {

            left: 0;

            transform: translateX(0);

            visibility: visible;

        }



        /* Overlay/Backdrop */

        .header-nav::before {

            content: '';

            position: fixed;

            top: 0;

            left: 320px;

            width: 100vw;

            height: 100vh;

            background: rgba(0, 0, 0, 0.6);

            backdrop-filter: blur(5px);

            opacity: 0;

            transition: opacity 0.4s ease;

            pointer-events: none;

        }



        .header-nav.active::before {

            opacity: 1;

            pointer-events: auto;

        }



        /* 1. Sidebar Header (Fixed at Top) */

        .nav-header {

            flex: 0 0 auto;

            /* Don't shrink */

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 20px 25px;

            background: #fff;

            border-bottom: 1px solid #f0f0f0;

        }



        .nav-header h5 {

            font-family: 'Playfair Display', serif;

            font-weight: 700;

            font-size: 26px;

            color: #2c3e50;

            margin: 0;

            letter-spacing: -0.5px;

            background: linear-gradient(45deg, #c41e3a, #f07729);

            background-clip: text;

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

        }



        .close-nav-btn {

            width: 40px;

            height: 40px;

            border: none;

            background: #fdfdfd;

            color: #555;

            border-radius: 50%;

            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 18px;

            cursor: pointer;

            transition: all 0.3s ease;

        }



        .close-nav-btn:hover {

            background: #c41e3a;

            color: #fff;

            transform: rotate(90deg);

            box-shadow: 0 4px 12px rgba(196, 30, 58, 0.25);

        }



        /* 2. Scrollable Link Area */

        .nav-menu {

            flex: 1 1 auto;

            /* Fill remaining space */

            overflow-y: auto;

            padding: 20px 15px;

            display: flex;

            flex-direction: column;

            gap: 8px;

            width: 100%;

            margin: 0;

        }



        .nav-menu li {

            width: 100%;

            opacity: 0;

            transform: translateY(10px);

            animation: fadeInUp 0.4s forwards;

            border-bottom: none;

            /* Removed clean divider */

        }



        /* Staggered Animation */

        .header-nav.active .nav-menu li:nth-child(1) {

            animation-delay: 0.1s;

        }



        .header-nav.active .nav-menu li:nth-child(2) {

            animation-delay: 0.15s;

        }



        .header-nav.active .nav-menu li:nth-child(3) {

            animation-delay: 0.2s;

        }



        .header-nav.active .nav-menu li:nth-child(4) {

            animation-delay: 0.25s;

        }



        .header-nav.active .nav-menu li:nth-child(5) {

            animation-delay: 0.3s;

        }



        .header-nav.active .nav-menu li:nth-child(6) {

            animation-delay: 0.35s;

        }



        .header-nav.active .nav-menu li:nth-child(8) {

            animation-delay: 0.4s;

        }



        @keyframes fadeInUp {

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }



        /* Link Styles */

        .nav-menu a {

            padding: 14px 20px;

            font-size: 16px;

            color: #444;

            font-weight: 500;

            border-radius: 12px;

            transition: all 0.2s ease;

            display: flex;

            justify-content: space-between;

            /* Text Left, Icon/Arrow Right */

            align-items: center;

            background: transparent;

        }



        .nav-menu a:hover,

        .nav-menu li.active>a {

            background: #fff5f0;

            /* Very light orange tint */

            color: #c41e3a;

            font-weight: 600;

            box-shadow: 0 2px 5px rgba(196, 30, 58, 0.03);

            padding-left: 25px;

            /* Slide effect */

        }



        /* Dropdowns in Mobile */

        .header-nav .dropdown-menu {

            position: static !important;

            float: none !important;

            transform: none !important;

            box-shadow: none !important;

            border: none;

            background: transparent;

            padding: 0 0 0 15px;

            /* Indent content */

            margin: 5px 0 10px 0;

            display: none;

            /* Hidden by default */

            opacity: 1;

            /* Bootstrap override */

            visibility: visible;

            /* Bootstrap override */

        }



        .header-nav .dropdown-menu.show {

            display: block;

            animation: fadeIn 0.3s;

        }



        .header-nav .dropdown-item {

            padding: 10px 15px;

            font-size: 14px;

            color: #666 !important;

            border-left: 2px solid #eee;

            border-radius: 0 8px 8px 0;

        }



        .header-nav .dropdown-item:hover {

            background: transparent;

            color: #f07729 !important;

            border-left-color: #f07729;

            transform: translateX(5px);

        }



        /* 3. Dropdown Toggle Arrow */

        .header-nav .dropdown-toggle::after {

            content: "\f107";

            /* FA Chevron Down */

            font-family: "Font Awesome 5 Free";

            font-weight: 900;

            border: none;

            width: auto;

            height: auto;

            transform: rotate(-90deg);

            /* Right */

            transition: transform 0.3s ease;

        }



        .header-nav .dropdown-toggle.show::after {

            transform: rotate(0deg);

            /* Down */

        }



        /* Mobile Toggle Button styles handled in main @media block */



        .header-content {

            gap: 15px;

        }



        .logo-icon {

            width: 71px;

            height: 57px;

            font-size: 20px;

            min-width: 40px;

        }



        .logo-text h1 {

            font-size: 26px;

            white-space: nowrap;

            margin-bottom: 0;

        }



        .logo-text span {

            font-size: 15px;

            display: block;

        }



        .donate-btn {

            padding: 10px 20px;

            font-size: 13px;

            width: auto;

            justify-content: center;

        }



        .user-dropdown {

            flex: initial;

        }



        .user-btn {

            width: auto;

            justify-content: center;

        }

    }



    @media (max-width: 768px) {

        .logo-icon {

            width: 75px;

            /* Increased from 60px for better proportion */

            height: 75px;

        }



        .logo-text h1 {

            font-size: 34px;

            /* Optimized large size */

            line-height: 1.1;

            width: 100%;

            white-space: nowrap;

            /* Prevent wrapping */

        }



        .logo-text span {

            font-size: 13px;

            letter-spacing: 1.5px;

        }



        .user-btn {

            padding: 8px 12px;

            font-size: 13px;

        }



        .user-btn i {

            font-size: 14px;

            margin-right: 5px !important;

        }



        /* Text is now visible since we have a full row */

        .user-btn span {

            display: inline !important;

        }



        .donate-btn {

            padding: 8px 12px;

            font-size: 13px;

        }

    }



    .container {

        max-width: 95%;

        margin: 0 auto;

        padding: 0 15px;

    }



    /* Hero Slider */

    .hero-slider {

        position: relative;

        height: 750px;

        overflow: hidden;

        background-color: #000;

    }



    .slide {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-repeat: no-repeat;

        background-size: cover;

        background-position: center center;

        opacity: 0;

        transition: opacity 1s ease-in-out;

        display: flex;

        align-items: center;

    }



    .slide::before {

        content: '';

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        /* background: rgba(0, 21, 26, 0.5); */

        /* Header color overlay removed */

        z-index: 1;

    }



    .slide.active {

        opacity: 1;

        z-index: 1;

    }



    .slide-content {

        position: relative;

        z-index: 2;

        color: #fff;

        max-width: 750px;

        animation: fadeInUp 1s ease 0.5s backwards;

        text-align: left;

    }



    .slide-content h2 {

        font-size: 24px;

        margin-bottom: 10px;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: 1px;

        background: linear-gradient(90deg, #FF7A18, #FFC107);

        background-clip: text;

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;

        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));

    }



    .slide-content h1 {

        font-size: 62px;

        line-height: 1.1;

        margin-bottom: 20px;

        font-family: 'Playfair Display', serif;

        font-weight: 800;

        background: linear-gradient(180deg, #FFFFFF 20%, #FFE0B2 100%);

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;

        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));

    }



    .slide-content p {

        font-size: 18px;

        margin-bottom: 35px;

        color: #f8f9fa;

        line-height: 1.6;

        font-weight: 500;

        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);

        max-width: 90%;

    }



    .btn-primary {

        display: inline-block;

        background-color: #f07729;

        color: #fff;

        padding: 15px 35px;

        font-weight: 700;

        text-transform: uppercase;

        font-size: 14px;

        transition: all 0.3s;

    }



    .btn-primary:hover {

        background-color: #d96620;

        color: #fff;

        transform: translateY(-2px);

        box-shadow: 0 6px 20px rgba(240, 119, 41, 0.4);

    }



    .slider-controls button {

        position: absolute;

        top: 50%;

        transform: translateY(-50%);

        background: rgba(255, 255, 255, 0.1);

        color: #fff;

        border: 1px solid rgba(255, 255, 255, 0.2);

        width: 50px;

        height: 50px;

        cursor: pointer;

        z-index: 10;

        font-size: 18px;

        transition: all 0.3s;

    }



    .slider-controls button:hover {

        background: #f07729;

        border-color: #f07729;

        color: #222;

    }



    .prev-btn {

        left: 30px;

    }



    .next-btn {

        right: 30px;

    }



    @keyframes fadeInUp {

        from {

            opacity: 0;

            transform: translateY(30px);

        }



        to {

            opacity: 1;

            transform: translateY(0);

        }

    }



    /* Footer */

    .main-footer {

        background-color: #222;

        color: #b0b0b0;

        margin-top: 50px;

    }



    .footer-top {

        padding: 60px 0;

    }



    .footer-top .container {

        display: flex;

        justify-content: space-between;

        flex-wrap: wrap;

        gap: 30px;

    }



    /* Footer Columns Layout */

    .footer-col {

        min-width: 220px;

        margin-bottom: 20px;

    }



    /* Custom Widths for Better Layout */

    .footer-about {

        flex: 1.5;

        /* Takes more space */

        padding-right: 20px;

    }



    .footer-links {

        flex: 0.8;

    }



    .footer-contact {

        flex: 1;

    }



    .footer-newsletter {

        flex: 1.2;

    }



    .footer-logo {

        margin-bottom: 20px;

    }



    .footer-logo img {

        width: 80px;

        height: 80px;

        object-fit: contain;

        background: #fff;

        border-radius: 0;

        padding: 5px;

    }



    .footer-col h3 {

        color: #fff;

        margin-bottom: 25px;

        font-size: 18px;

        font-weight: 700;

        position: relative;

        padding-bottom: 12px;

        letter-spacing: 0.5px;

    }



    .footer-col h3::after {

        content: '';

        position: absolute;

        left: 0;

        bottom: 0;

        width: 40px;

        height: 3px;

        background-color: #f07729;

        border-radius: 2px;

    }



    .footer-col ul li {

        margin-bottom: 12px;

    }



    .footer-col ul li a {

        color: #b0b0b0;

        transition: all 0.3s ease;

        display: inline-block;

    }



    .footer-col ul li a:hover {

        color: #f07729;

        transform: translateX(5px);

    }



    .footer-col p {

        margin-bottom: 15px;

        line-height: 1.7;

        font-size: 14.5px;

        color: #b0b0b0;

    }



    .footer-col i {

        color: #f07729;

        margin-right: 12px;

        width: 20px;

        text-align: center;

    }



    /* Newsletter Form Styles */

    .newsletter-form input {

        width: 100%;

        padding: 12px 15px;

        border: 1px solid rgba(255, 255, 255, 0.1);

        background: rgba(255, 255, 255, 0.05);

        border-radius: 4px;

        color: #fff;

        margin-bottom: 10px;

        outline: none;

        transition: all 0.3s;

    }



    .newsletter-form input:focus {

        border-color: #f07729;

        background: rgba(255, 255, 255, 0.1);

    }



    .newsletter-form button {

        background: #f07729;

        color: #fff;

        border: none;

        padding: 12px 25px;

        font-weight: 600;

        border-radius: 4px;

        cursor: pointer;

        text-transform: uppercase;

        font-size: 13px;

        letter-spacing: 1px;

        transition: all 0.3s;

        width: 100%;

    }



    .newsletter-form button:hover {

        background: #d96620;

        transform: translateY(-2px);

        box-shadow: 0 5px 15px rgba(240, 119, 41, 0.3);

    }



    /* Footer Bottom Links */

    .footer-bottom a {

        color: #b0b0b0;

        text-decoration: none;

        transition: color 0.3s;

    }



    .footer-bottom a:hover {

        color: #f07729;

        text-decoration: underline;

    }



    /* About Section */

    /* About Section Container */

    .about-section {

        padding: 40px 0;

        /* Reduced from 100px to move it up */

        background-color: #fff;

        /* Removed yellow background */

        position: relative;

        overflow: hidden;

    }



    .about-card {

        background: #fff;

        padding: 50px;

        border-radius: 20px;

        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);

        display: flex;

        align-items: center;

        gap: 60px;

        position: relative;

        z-index: 10;

    }



    .about-section .container {

        padding: 0 15px;

    }



    /* We remove display:flex from .container since it's now in .about-card */



    .about-image {

        flex: 1;

        position: relative;

    }



    .about-image img {

        width: 100%;

        height: 400px;

        /* Reduced height */

        object-fit: cover;

        border-radius: 12px;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

        display: block;

        position: relative;

        z-index: 2;

        transition: transform 0.5s ease;

    }



    .about-image:hover img {

        transform: scale(1.02);

    }



    /* Decorative box behind image */

    .about-image::before {

        content: '';

        position: absolute;

        bottom: -30px;

        left: -30px;

        /* Moved to left for asymmetry */

        width: 70%;

        height: 70%;

        border: 2px solid #f07729;

        /* Outline style instead of solid block */

        z-index: 1;

        border-radius: 8px;

        opacity: 0.5;

    }



    .about-content {

        flex: 1;

    }



    .sub-title {

        color: #f07729;

        font-size: 13px;

        font-weight: 900;

        text-transform: uppercase;

        letter-spacing: 3px;

        margin-bottom: 25px;

        display: inline-block;

        border-bottom: 2px solid #f07729;

        padding-bottom: 5px;

        background: none;

        /* Remove capsule background */

        border-radius: 0;

        padding: 0;

        padding-bottom: 5px;

    }



    .about-content h2 {

        font-size: 48px;

        /* Larger title */

        color: #1a1a1a;

        margin-bottom: 30px;

        font-weight: 800;

        line-height: 1.1;

        font-family: 'Playfair Display', serif;

    }



    .about-content h2 span {

        color: #f07729;

        font-style: italic;

        font-weight: 400;

        /* Contrast weight */

    }



    .about-content .description {

        color: #555;

        margin-bottom: 45px;

        font-size: 17px;

        /* Slightly larger text */

        line-height: 1.8;

        font-weight: 300;

    }



    .features-grid {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 30px;

        margin-bottom: 50px;

    }



    .feature-item {

        display: flex;

        align-items: flex-start;

        gap: 20px;

        padding: 25px;

        /* More internal padding */

        background-color: #fff;

        border: 1px solid #f0f0f0;

        border-radius: 6px;

        transition: all 0.3s ease;

    }



    .feature-item:hover {

        transform: translateY(-5px);

        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);

        border-color: transparent;

    }



    .icon-box {

        width: 50px;

        height: 50px;

        background-color: rgba(240, 119, 41, 0.1);

        /* Light orange bg */

        border-radius: 6px;

        /* Squircle */

        display: flex;

        justify-content: center;

        align-items: center;

        color: #f07729;

        /* Orange for icon */

        font-size: 20px;

        flex-shrink: 0;

        box-shadow: none;

        transition: all 0.3s;

    }



    .feature-item:hover .icon-box {

        background-color: #f07729;

        color: #fff;

    }



    .text-box h5 {

        font-size: 17px;

        color: #222;

        margin-bottom: 8px;

        font-weight: 700;

    }



    .text-box p {

        font-size: 14px;

        color: #777;

        margin: 0;

        line-height: 1.5;

    }



    /* Causes Section */

    .causes-section {

        padding: 40px 0;

        /* Reduced from 80px to move it up */

        background-color: #f4f4f4;

        /* Contrast background */

        text-align: center;

    }



    .causes-section .container {

        display: block;

    }



    /* New Premium Wrapper Card */

    .causes-container-card {

        background: #fff;

        padding: 60px 40px;

        border-radius: 20px;

        /* Rounded corners like About card */

        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);

        /* Premium Shadow */

    }



    .section-title {

        margin-bottom: 60px;

        text-align: center;

        max-width: 800px;

        margin-left: auto;

        margin-right: auto;

    }



    .section-title h2 {

        font-size: 48px;

        font-family: 'Playfair Display', serif;

        font-weight: 400;

        color: #1a1a1a;

        margin-bottom: 15px;

    }



    .section-title h2 strong {

        font-weight: 700;

        color: #f07729;

        /* Theme Yellow */

    }



    .section-title p {

        font-size: 16px;

        color: #777;

        font-family: 'Times New Roman', serif;

        font-style: italic;

        position: relative;

        display: inline-block;

    }



    .section-title p span {

        border-bottom: 2px solid #f07729;

    }



    .causes-grid {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 40px;

        /* Increased gap for better spacing inside card */

        padding: 0;

        /* Remove old padding as wrapper has it */

    }



    .cause-card {

        background: #fff;

        box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);

        transition: transform 0.3s ease;

        text-align: center;

        position: relative;

        border-radius: 4px;

        /* subtle radius */

    }



    .cause-card:hover {

        transform: translateY(-5px);

    }



    .cause-img {

        position: relative;

        height: 260px;

        width: 100%;

    }



    .cause-img img {

        width: 100%;

        height: 100%;

        object-fit: cover;

    }



    /* Yellow bar at bottom of image */

    .cause-img::after {

        content: '';

        position: absolute;

        bottom: 0;

        left: 0;

        width: 100%;

        height: 4px;

        background-color: rgba(242, 201, 76, 0.5);

        z-index: 1;

    }



    /* Centered Circular Progress */

    .circle-progress {

        position: absolute;

        bottom: -35px;

        /* Overlap image bottom */

        left: 50%;

        transform: translateX(-50%);

        width: 70px;

        height: 70px;

        background: #fff;

        border-radius: 50%;

        display: flex;

        justify-content: center;

        align-items: center;

        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

        z-index: 5;

    }



    .circle-progress::before {

        content: '';

        position: absolute;

        width: 60px;

        height: 60px;

        border-radius: 50%;

        /* Progress ring */

        background: conic-gradient(#f07729 var(--p), #eee 0deg);

        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff calc(100% - 4px));

        mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff calc(100% - 4px));

    }



    .circle-progress .value {

        font-weight: 700;

        font-size: 14px;

        color: #1a1a1a;

    }



    .cause-content {

        padding: 50px 20px 30px;

        /* Top padding clears circle */

    }



    .donation-text {

        font-size: 14px;

        color: #777;

        margin-bottom: 10px;

        font-family: 'Playfair Display', serif;

        font-style: italic;

    }



    .donation-text .amount {

        font-family: 'Roboto', sans-serif;

        font-style: normal;

        font-weight: 700;

        color: #1a1a1a;

    }



    .donation-text .goal {

        font-family: 'Roboto', sans-serif;

        font-style: normal;

        font-weight: 700;

        color: #999;

    }



    .cause-content h3 {

        font-size: 20px;

        font-family: 'Playfair Display', serif;

        color: #1a1a1a;

        font-weight: 400;

        margin-bottom: 15px;

    }



    .cause-content p {

        font-size: 14px;

        color: #888;

        line-height: 1.6;

        margin-bottom: 25px;

        padding: 0 10px;

    }



    .btn-donate {

        display: inline-block;

        padding: 12px 30px;

        background-color: #f07729;

        color: #1a1a1a;

        font-size: 12px;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: 1px;

        border: none;

        transition: background 0.3s;

    }



    .btn-donate:hover {

        background-color: #1a1a1a;

        color: #fff;

    }



    /* Stack on mobile */

    @media (max-width: 991px) {

        .causes-grid {

            grid-template-columns: repeat(2, 1fr);

        }

    }



    @media (max-width: 768px) {

        .causes-grid {

            grid-template-columns: 1fr;

        }

    }





    /* Mobile Logo Adjustments */

    @media (max-width: 991px) {

        .logo-icon {

            width: 100px;

            height: 100px;

        }



        .logo-text h1 {

            font-size: 20px;

        }

    }



    @media (max-width: 576px) {

        .logo-icon {

            width: 110px;

            height: 110px;

        }



        .logo-text h1 {

            font-size: 18px;

        }



        .logo-text span {

            font-size: 10px;

        }



        .header-middle {

            padding: 5px 0;

        }

    }



    @media (max-width: 991px) {

        .about-section {

            padding: 80px 0;

        }



        .about-card {

            flex-direction: column;

            padding: 30px;

            gap: 40px;

        }



        .about-section .container {

            flex-direction: column;

            gap: 50px;

        }



        .about-image::before {

            display: none;

        }



        .about-content h2 {

            font-size: 36px;

        }

    }



    @media (max-width: 576px) {

        .features-grid {

            grid-template-columns: 1fr;

        }



        .about-content h2 {

            font-size: 32px;

        }

    }



    .footer-bottom {

        background-color: #1a1a1a;

        padding: 20px 0;

        text-align: center;

        font-size: 13px;

    }



    /* Mobile Navigation Toggle - Hidden on desktop, shown on mobile */

    .mobile-nav-toggle {

        display: none;

        font-size: 24px;

        cursor: pointer;

        background: none;

        border: none;

        color: #1a1a1a;

    }



    /* Responsive Media Queries */

    @media (max-width: 991px) {



        /* Hide Top Bar to save space on mobile */

        .top-bar {

            display: none;

        }



        /* Header Middle - Flex Row for Compactness */

        .header-middle {

            padding: 10px 0;

            position: relative;

            z-index: 1001;

            background: #fff;

            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

        }



        .header-middle .container {

            flex-direction: row;

            /* Force row layout */

            justify-content: space-between;

            align-items: center;

            gap: 10px;

            text-align: left;

        }



        .logo-area {

            flex-direction: row;

            gap: 10px;

        }



        .logo-icon {

            width: 40px;

            height: 40px;

            font-size: 20px;

            /* Ensure specific dimensions */

            min-width: 40px;

        }



        .logo-text h1 {

            font-size: 16px;

            white-space: nowrap;

            margin-bottom: 0;

        }



        .logo-text span {

            font-size: 10px;

            display: block;

        }



        /* Compact Admin User Dropdown */

        .header-middle .dropdown .btn {

            padding: 5px 12px !important;

            font-size: 12px;

            border-radius: 30px !important;

        }



        .header-middle .dropdown .btn i {

            margin-right: 4px !important;

        }



        /* Navigation Bar - Bar with Toggle */

        .main-nav {

            background-color: #eebf32;

            padding: 0;

            height: 50px;

            position: relative;

            z-index: 1000;

        }



        .main-nav .container {

            display: flex;

            /* Flex to align toggle */

            height: 100%;

            align-items: center;

            justify-content: flex-end;

            /* Toggle to right */

            position: static;

            /* Allow dropdown to be full width relative to nav */

        }



        .mobile-nav-toggle {

            display: flex !important;

            align-items: center;

            justify-content: center;

            width: 44px;

            height: 40px;

            background: #0e2e50 !important;

            border: none;

            border-radius: 6px;

            color: #fff !important;

            font-size: 22px;

            padding: 0;

            cursor: pointer;

            box-shadow: 0 3px 10px rgba(14, 46, 80, 0.3);

        }



        /* Mobile Menu Dropdown Panel */

        .main-nav .nav-links {

            display: none;

            flex-direction: column;

            position: absolute;

            top: 50px;

            /* Below yellow bar */

            left: 0;

            width: 100%;

            background-color: #fff;

            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);

            padding: 10px 0;

            margin-top: 0;

            z-index: 999;

            border-top: 1px solid rgba(0, 0, 0, 0.05);

        }



        .main-nav .nav-links.show {

            display: flex;

            animation: slideDown 0.3s ease forwards;

        }



        .main-nav li {

            width: 100%;

            border-bottom: 1px solid #f9f9f9;

            position: relative;

        }



        .main-nav a {

            display: block;

            padding: 12px 25px;

            color: #333;

            font-weight: 600;

            font-size: 14px;

            text-align: left;

        }



        .main-nav a:hover,

        .main-nav li.active a {

            background-color: #fffbf0;

            /* Very light yellow */

            color: #d4a017;

            padding-left: 30px;

            /* Indent on hover */

        }



        .main-nav li.active::after {

            display: none;

        }



        /* Fix Dropdowns in Mobile Menu */

        .main-nav .dropdown-menu {

            position: static;

            float: none;

            width: 100%;

            box-shadow: none;

            background: #f9f9f9;

            margin: 0;

            padding: 5px 0;

            border: none;

            display: none;

            /* Let bootstrap toggle it */

        }



        /* Public Header Specifics for Mobile */

        /* Add padding to header to make room for the button */

        .header-middle {

            padding-bottom: 60px;

            /* Space for button */

        }



        .header-middle .donate-btn {

            position: absolute;

            bottom: 10px;

            left: 50%;

            transform: translateX(-50%);

            z-index: 90;

            /* Lowered to be behind dropdown */

            padding: 10px 20px;

            font-size: 13px;

            font-weight: 700;

            white-space: nowrap;

            border-radius: 0;

            /* Square shape */

            width: auto;

            min-width: 0;

            justify-content: center;

            background-color: #f07729;

            color: #1a1a1a;

            text-transform: uppercase;

            letter-spacing: 1px;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

            display: flex;

            /* Ensure flex for centering */

            gap: 8px;

            /* Consistent gap */

        }



        .header-middle .donate-btn i {

            font-size: 16px;

            margin-right: 0;

            /* Use gap instead */

        }



        /* Adjust Sign In Dropdown to ensure it doesn't look weird without the donate button next to it */

        .header-middle .dropdown .btn-outline-warning {

            padding: 6px 15px !important;

            font-size: 13px;

            margin-right: 0;

        }



        .main-nav .dropdown-menu.show {

            display: block;

            z-index: 1050;

            /* Ensure on top of donate button */

            position: absolute;

            /* Needed for z-index to work effectively in some contexts, but let's stick to relative flow if typical mobile menu, actually Bootstrap mobile menus are often static. */

        }



        .main-nav .dropdown-menu .dropdown-item {

            padding: 10px 40px;

            /* More indent */

            font-size: 13px;

            font-weight: 500;

        }



        /* Donation Page Mobile Adjustments */

        .donation-amount-btn {

            font-size: 14px;

            padding: 8px 5px;

            /* Compact padding */

        }



        /* Hero Slider */

        .hero-slider {

            height: 450px;

        }



        .slide-content h1 {

            font-size: 32px;

        }



        .slide-content h2 {

            font-size: 18px;

        }



        /* Animation */

        @keyframes slideDown {

            from {

                opacity: 0;

                transform: translateY(-10px);

            }



            to {

                opacity: 1;

                transform: translateY(0);

            }

        }

    }



    @media (max-width: 768px) {



        /* Top Bar */

        .top-bar .container {

            flex-direction: column;

            gap: 10px;

            text-align: center;

        }



        .top-right {

            flex-direction: column;

            gap: 5px;

        }



        /* Footer */

        .footer-top .container {

            flex-direction: column;

        }



        .footer-col {

            width: 100%;

            min-width: 100%;

        }



        /* Hero Slider */

        .hero-slider {

            height: 400px;

        }



        .slide-content {

            text-align: center;

            padding: 0 20px;

        }



        .slide-content h1 {

            font-size: 28px;

        }



        .slide-content p {

            font-size: 14px;

            display: none;

            /* Hide paragraph on very small screens to save space */

        }

    }



    /* Impact Section */

    .impact-section {

        padding: 80px 0;

        background-color: #f9f9f9;

        /* Contrast background for the card */

        color: #1a1a1a;

        text-align: center;

        position: relative;

        overflow: hidden;

    }



    /* Wrapper Card for Impact (Outer Container) */

    .impact-container-card {

        background: #fff;

        padding: 60px 20px;

        border-radius: 20px;

        /* box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05); */

        /* Optional: Remove outer shadow if inner cards have it, to avoid clutter. Keeping it subtle. */

        box-shadow: none;

        /* Removed outer shadow to focus on inner cards as requested */

        width: 97%;

        max-width: 97%;

        margin: 0 auto;

    }



    /* Ensure title is centered and visible */

    .impact-section .section-title {

        margin-bottom: 50px;

        position: relative;

        z-index: 2;

        text-align: center;

        max-width: 800px;

        margin-left: auto;

        margin-right: auto;

    }



    .impact-section .section-title h2 {

        color: #1a1a1a;

    }



    .impact-section .section-title p {

        color: #777;

    }



    .impact-section .section-title p span {

        border-color: #f07729;

    }



    .impact-grid {

        display: grid;

        grid-template-columns: repeat(4, 1fr);

        gap: 30px;

        padding: 0;

        width: 100%;

        /* Fill the 97% container */

        max-width: 100%;

        margin: 0 auto;

    }



    /* Responsive Impact Grid */

    @media (max-width: 991px) {

        .impact-grid {

            grid-template-columns: repeat(2, 1fr);

        }

    }



    @media (max-width: 576px) {

        .impact-grid {

            grid-template-columns: 1fr;

        }

    }



    /* Individual Impact Cards */

    .impact-card {

        background: #fff;

        padding: 40px 20px;

        border-radius: 15px;

        border: 1px solid #f0f0f0;

        /* Light border */

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

        /* Distinct Shadow */

        transition: all 0.3s ease;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

    }



    .impact-card:hover {

        transform: translateY(-10px);

        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);

        border-color: #f07729;

        /* Hover border color */

    }



    .icon-wrapper {

        font-size: 60px;

        color: #f07729;

        margin-bottom: 25px;

        transition: transform 0.3s ease;

    }



    .impact-card:hover .icon-wrapper {

        transform: scale(1.1);

    }



    .impact-card h3 {

        font-size: 16px;

        font-weight: 700;

        color: #1a1a1a;

        margin-bottom: 15px;

        text-transform: uppercase;

        letter-spacing: 1px;

    }



    .counter-box {

        font-size: 40px;

        font-weight: 800;

        color: #f07729;

        font-family: 'Playfair Display', serif;

        margin-bottom: 10px;

        line-height: 1;

    }



    .impact-card p {

        font-size: 15px;

        color: #666;

        margin: 0;

        font-weight: 500;

    }



    /* How You Can Help Section (Split Layout) */

    .help-section {

        padding: 100px 0;

        background: linear-gradient(135deg, #fafafa 0%, #fff 100%);

        overflow: hidden;

        position: relative;

    }



    .help-section::before {

        content: '';

        position: absolute;

        top: 0;

        right: 0;

        width: 40%;

        height: 100%;

        background: linear-gradient(135deg, rgba(242, 201, 76, 0.03) 0%, rgba(242, 201, 76, 0.01) 100%);

        pointer-events: none;

    }



    .help-section .row {

        display: flex;

        flex-wrap: nowrap;

        align-items: center;

        position: relative;

        z-index: 1;

    }



    .help-section .col-md-6 {

        flex: 0 0 50%;

        max-width: 50%;

    }



    .help-img-wrapper {

        position: relative;

        border-radius: 25px;

        overflow: hidden;

        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);

        height: 100%;

        max-height: 500px;

        margin: auto 0;

        border: 3px solid rgba(242, 201, 76, 0.2);

    }



    .help-img-wrapper::after {

        content: '';

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: linear-gradient(135deg, rgba(242, 201, 76, 0.1) 0%, transparent 100%);

        pointer-events: none;

    }



    .help-img-wrapper img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        display: block;

        transition: transform 0.5s ease;

    }



    .help-img-wrapper:hover img {

        transform: scale(1.08);

    }



    /* Right Content */

    .help-content-left,

    .help-content-right {

        height: 100%;

        display: flex;

        flex-direction: column;

    }



    .help-content-card {

        background: #fff;

        padding: 60px 80px 60px 50px;

        border-radius: 25px;

        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);

        height: 100%;

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        border: 1px solid rgba(242, 201, 76, 0.1);

        position: relative;

        overflow: hidden;

    }



    .help-content-card::before {

        content: '';

        position: absolute;

        top: 0;

        right: 0;

        width: 150px;

        height: 150px;

        background: radial-gradient(circle, rgba(242, 201, 76, 0.08) 0%, transparent 70%);

        pointer-events: none;

    }



    .help-content-right {

        padding-left: 0;

    }



    .help-img-wrapper {

        height: 100%;

        display: flex;

        align-items: center;

    }



    .help-section .section-title {

        margin-bottom: 50px;

        text-align: center !important;

    }



    .help-section .section-title h2 {

        font-size: 42px;

        line-height: 1.2;

        color: #1a1a1a;

        font-weight: 800;

        margin-bottom: 15px;

        background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;

        background-clip: text;

    }



    .help-section .section-title p {

        font-size: 17px;

        color: #666;

        margin-top: 15px;

        line-height: 1.7;

    }



    /* Mini Grid for Cards */

    .help-mini-grid {

        display: grid;

        grid-template-columns: repeat(4, 1fr);

        gap: 25px;

        margin-bottom: 40px;

    }



    .help-mini-card {

        background: linear-gradient(135deg, #fff 0%, #fafafa 100%);

        border: 1px solid #f0f0f0;

        border-radius: 18px;

        padding: 25px 20px;

        display: flex;

        align-items: center;

        gap: 20px;

        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

        position: relative;

        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);

        overflow: hidden;

    }



    .help-mini-card::before {

        content: '';

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: linear-gradient(135deg, rgba(242, 201, 76, 0.1) 0%, rgba(242, 201, 76, 0.03) 100%);

        opacity: 0;

        transition: opacity 0.4s ease;

    }



    .help-mini-card:hover {

        transform: translateY(-8px);

        box-shadow: 0 15px 35px rgba(242, 201, 76, 0.15);

        border-color: #f07729;

    }



    .help-mini-card:hover::before {

        opacity: 1;

    }



    .mini-icon {

        width: 65px;

        height: 65px;

        line-height: 65px;

        background: linear-gradient(135deg, #f07729 0%, #f9b165 100%);

        color: #fff;

        border-radius: 16px;

        text-align: center;

        font-size: 26px;

        flex-shrink: 0;

        transition: all 0.4s ease;

        box-shadow: 0 8px 20px rgba(242, 201, 76, 0.3);

        position: relative;

        z-index: 1;

    }



    .help-mini-card:hover .mini-icon {

        transform: scale(1.1) rotate(-5deg);

        box-shadow: 0 12px 30px rgba(242, 201, 76, 0.4);

    }



    .mini-text h3 {

        font-size: 19px;

        font-weight: 700;

        color: #1a1a1a;

        margin-bottom: 6px;

        font-family: 'Playfair Display', serif;

        transition: color 0.3s ease;

    }



    .help-mini-card:hover .mini-text h3 {

        color: #f07729;

    }



    .mini-text p {

        font-size: 14px;

        color: #888;

        margin: 0;

        line-height: 1.4;

    }



    /* Premium Button Styling */

    .help-content-card .btn-primary {

        background: linear-gradient(135deg, #f07729 0%, #f9b165 100%);

        color: #1a1a1a;

        border: none;

        padding: 15px 40px;

        border-radius: 50px;

        font-weight: 700;

        font-size: 16px;

        box-shadow: 0 10px 25px rgba(242, 201, 76, 0.3);

        transition: all 0.3s ease;

        display: inline-flex;

        align-items: center;

        gap: 10px;

    }



    .help-content-card .btn-primary:hover {

        transform: translateY(-3px);

        box-shadow: 0 15px 35px rgba(242, 201, 76, 0.4);

        background: linear-gradient(135deg, #f9b165 0%, #f07729 100%);

    }



    .help-content-card .btn-primary i {

        transition: transform 0.3s ease;

    }



    .help-content-card .btn-primary:hover i {

        transform: translateX(5px);

    }



    /* Responsive */

    @media (max-width: 768px) {

        .help-section .row {

            flex-wrap: wrap;

            /* Allow wrapping on mobile/tablet */

        }



        .help-section .col-md-6 {

            flex: 0 0 100%;

            max-width: 100%;

        }



        .help-content-right {

            padding-left: 0;

            margin-top: 50px;

        }



        .help-mini-grid {

            gap: 20px;

        }



        .help-section .section-title {

            text-align: center !important;

        }

    }



    @media (max-width: 576px) {

        .help-mini-grid {

            grid-template-columns: 1fr;

        }

    }



    /* Our Work / Programs Section */

    .work-section {

        padding: 80px 0;

        background-color: #f9f9f9;

        /* Match Impact Section Background */

        color: #1a1a1a;

        text-align: center;

    }



    /* Wrapper Card (Match Impact) */

    .work-container-card {

        background: #fff;

        padding: 60px 40px;

        border-radius: 20px;

        box-shadow: none;

        width: 97%;

        max-width: 97%;

        margin: 0 auto;

    }



    .work-section .section-title {

        margin-bottom: 50px;

        position: relative;

        z-index: 2;

        text-align: center;

        max-width: 800px;

        margin-left: auto;

        margin-right: auto;

    }



    .work-section .section-title h2 {

        color: #1a1a1a;

    }



    .work-section .section-title p {

        color: #777;

    }



    .work-section .section-title p span {

        border-color: #f07729;

    }



    .work-grid {

        display: grid;

        grid-template-columns: repeat(4, 1fr);

        gap: 30px;

        padding: 0;

        width: 100%;

        max-width: 100%;

        margin: 0 auto;

    }



    /* Individual Work Cards */

    .work-card {

        background: #fff;

        padding: 0;

        /* Remove padding for full-width image */

        border-radius: 15px;

        border: 1px solid #f0f0f0;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

        /* Distinct Shadow */

        transition: all 0.3s ease;

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;

        position: relative;

        overflow: hidden;

    }



    .work-card:hover {

        transform: translateY(-10px);

        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);

        border-color: #f07729;

    }



    /* Work / Programs Section */

    .work-section {

        padding: 40px 0;

        /* Reduced padding consistent with others */

        background: #fff;

    }



    .work-image {

        width: 100%;

        height: 220px;

        /* Fixed height for consistency */

        overflow: hidden;

    }



    .work-image img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        transition: transform 0.5s ease;

    }



    .work-card:hover .work-image img {

        transform: scale(1.1);

        /* Zoom effect on hover */

    }



    .work-content {

        padding: 25px 20px;

    }



    .work-card h3 {

        font-size: 18px;

        font-weight: 700;

        margin-bottom: 10px;

        color: #1a1a1a;

        font-family: 'Playfair Display', serif;

        text-transform: uppercase;

        letter-spacing: 1px;

    }



    .work-card p {

        font-size: 15px;

        color: #666;

        line-height: 1.6;

        margin: 0;

        font-weight: 500;

    }



    /* Responsive Work Section */

    @media (max-width: 1200px) {

        .work-grid {

            gap: 20px;

        }

    }



    @media (max-width: 991px) {

        .work-grid {

            grid-template-columns: repeat(2, 1fr);

        }

    }



    @media (max-width: 576px) {

        .work-grid {

            grid-template-columns: 1fr;

        }

    }



    /* Testimonial Slider Section (Orange Box Design) */

    .testimonial-slider-section {

        padding: 40px 0;

        /* Reduced from 100px */

        background: #fff;

        overflow: hidden;

        position: relative;

    }



    /* Sub-title badge styling */

    .testimonial-slider-section .sub-title {

        display: inline-block;

        background: rgba(240, 119, 41, 0.1);

        /* Pale orange */

        color: #f07729;

        padding: 8px 20px;

        border-radius: 50px;

        font-size: 14px;

        font-weight: 700;

        margin-bottom: 20px;

        text-transform: uppercase;

        letter-spacing: 1px;

    }



    .testimonial-slider-section .section-title h2 {

        color: #1a1a1a;

        font-size: 36px;

        margin-bottom: 40px;

    }



    /* Swiper Container */

    .testimonial-slider-section .swiper {

        width: 100%;

        padding-top: 80px;

        /* Essential for top-overlapping image */

        padding-bottom: 80px;

        /* Space for shadow/scale */

    }



    .testimonial-slider-section .swiper-slide {

        width: 600px;

        /* Readjusted width */

        max-width: 90%;

        /* Responsive max width */

        opacity: 0.4;

        transform: scale(0.9);

        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

        filter: blur(2px);

    }



    .testimonial-slider-section .swiper-slide-active {

        opacity: 1;

        transform: scale(1);

        filter: blur(0);

        z-index: 10;

    }



    /* Card Styling */

    .testimonial-card {

        background: linear-gradient(135deg, #fff5ed 0%, #fff9f0 100%);

        /* Light orange gradient */

        padding: 80px 60px 60px;

        /* Top padding for image space */

        border-radius: 15px;

        text-align: center;

        position: relative;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

        border: 2px solid #f07729;

        height: 100%;

        transition: all 0.4s ease;

    }



    /* Active Card - Orange Theme Box */

    .testimonial-slider-section .swiper-slide-active .testimonial-card {

        background: linear-gradient(135deg, #f07729 0%, #d96620 100%);

        /* Vibrant Orange Gradient */

        color: #fff;

        border: none;

        box-shadow: 0 25px 60px rgba(240, 119, 41, 0.4);

        /* Orange Shadow */

    }



    /* Client Image - Circular Pulse */

    .client-img {

        width: 110px;

        height: 110px;

        border-radius: 50%;

        overflow: hidden;

        position: absolute;

        top: -55px;

        /* Pull up half height */

        left: 50%;

        transform: translateX(-50%);

        border: 5px solid #fff;

        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);

        z-index: 2;

        background-color: #eee;

    }



    .client-img img {

        width: 100%;

        height: 100%;

        object-fit: cover;

    }



    /* Content Typography */

    .testimonial-content p {

        font-size: 22px;

        /* Large, bold quote */

        line-height: 1.5;

        margin-bottom: 30px;

        color: #555;

        font-weight: 500;

        font-style: italic;

    }



    .testimonial-slider-section .swiper-slide-active .testimonial-content p {

        color: #fff;

    }



    .testimonial-content h3 {

        font-size: 24px;

        font-weight: 800;

        margin-bottom: 5px;

        color: #1a1a1a;

        font-family: 'Playfair Display', serif;

    }



    .testimonial-slider-section .swiper-slide-active .testimonial-content h3 {

        color: #fff;

    }



    .testimonial-content span {

        font-size: 15px;

        color: #888;

        text-transform: uppercase;

        font-weight: 700;

        letter-spacing: 1px;

        display: block;

    }



    .testimonial-slider-section .swiper-slide-active .testimonial-content span {

        color: rgba(255, 255, 255, 0.85);

    }



    /* Navigation - The Arrows */

    /* Navigation - Premium Arrows */

    .swiper-button-next,

    .swiper-button-prev {

        color: #fff !important;

        /* White icon */

        background: linear-gradient(135deg, #f07729 0%, #d96620 100%);

        /* Orange Gradient */

        width: 50px;

        height: 50px;

        border-radius: 50%;

        box-shadow: 0 5px 15px rgba(240, 119, 41, 0.3);

        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

        opacity: 0.8;

    }



    .swiper-button-next:hover,

    .swiper-button-prev:hover {

        transform: scale(1.1);

        box-shadow: 0 8px 25px rgba(240, 119, 41, 0.5);

        opacity: 1;

    }



    .swiper-button-next:after,

    .swiper-button-prev:after {

        font-size: 20px !important;

        font-weight: bold;

    }



    /* Responsive */

    @media (max-width: 991px) {

        .testimonial-content p {

            font-size: 18px;

        }

    }



    /* Gallery Section - Reference Design */

    .gallery-section {

        padding: 40px 0;

        /* Reduced from 100px */

        background: #fdfdfd;

        display: block;

        /* Ensure section is block */

    }



    .gallery-section .container {

        display: block !important;

        /* Force block layout for container */

        width: 100%;

        max-width: 1140px;

        /* Bootstrap standard */

    }



    /* Gallery Header */

    .gallery-section .section-title {

        width: 100%;

        text-align: center;

        margin-bottom: 30px;

        display: block;

    }



    .gallery-section .section-title h2 {

        font-family: 'Playfair Display', serif;

        font-size: 48px;

        color: #333;

        margin-bottom: 10px;

        text-transform: none;

    }



    .gallery-section .gallery-subtitle {

        font-size: 18px;

        color: #777;

        margin-bottom: 40px;

        font-family: 'Roboto', sans-serif;

        font-style: italic;

        display: block;

    }



    /* Filter Buttons - Pills */

    .gallery-filters {

        display: flex;

        justify-content: center;

        flex-wrap: wrap;

        gap: 15px;

        margin-bottom: 50px;

        width: 100%;

        /* Full width to force new line */

    }



    .gallery-filters .filter-btn {

        border: none;

        background: #e0e0e0;

        /* Light gray default */

        padding: 10px 25px;

        border-radius: 50px;

        font-weight: 500;

        color: #555;

        cursor: pointer;

        transition: all 0.3s ease;

        font-size: 15px;

    }



    .gallery-filters .filter-btn:hover,

    .gallery-filters .filter-btn.active {

        background: #f07729;

        /* Vibrant Orange */

        color: #fff;

        box-shadow: 0 5px 15px rgba(255, 152, 0, 0.2);

    }





    /* ========================================

   PREMIUM GALLERY SECTION - COMPLETE REDESIGN

   ======================================== */



    .premium-gallery-section {

        padding: 80px 0;

        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);

    }



    .gallery-description {

        color: #666;

        font-size: 15px;

        line-height: 1.8;

        max-width: 700px;

        margin: 0 auto;

    }



    /* Gallery Filter Buttons */

    .gallery-filter-buttons {

        display: flex;

        gap: 12px;

        justify-content: center;

        flex-wrap: wrap;

    }



    .gallery-filter-btn {

        padding: 10px 28px;

        border: 2px solid #f07729;

        background: transparent;

        color: #f07729;

        border-radius: 50px;

        font-weight: 600;

        font-size: 14px;

        cursor: pointer;

        transition: all 0.3s ease;

        text-transform: capitalize;

    }



    .gallery-filter-btn:hover {

        background: linear-gradient(135deg, #f07729 0%, #d96620 100%);

        color: #fff;

        transform: translateY(-2px);

        box-shadow: 0 5px 15px rgba(240, 119, 41, 0.3);

    }



    .gallery-filter-btn.active {

        background: linear-gradient(135deg, #f07729 0%, #d96620 100%);

        color: #fff;

        box-shadow: 0 5px 15px rgba(240, 119, 41, 0.3);

    }





    .premium-gallery-card {

        position: relative;

        border-radius: 20px;

        overflow: hidden;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

        background: #fff;

    }



    .premium-gallery-card:hover {

        transform: translateY(-15px);

        box-shadow: 0 20px 50px rgba(255, 152, 0, 0.2);

    }



    .premium-gallery-image {

        position: relative;

        width: 100%;

        height: 300px;

        overflow: hidden;

    }



    .premium-gallery-image img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: center;

        transition: transform 0.6s ease;

    }



    .premium-gallery-card:hover .premium-gallery-image img {

        transform: scale(1.1);

    }



    .premium-gallery-overlay {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);

        display: flex;

        align-items: center;

        justify-content: center;

        opacity: 0;

        transition: opacity 0.4s ease;

    }



    .premium-gallery-card:hover .premium-gallery-overlay {

        opacity: 1;

    }



    .premium-gallery-icon {

        width: 70px;

        height: 70px;

        background: linear-gradient(135deg, #f07729 0%, #d96620 100%);

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        transform: scale(0) rotate(180deg);

        transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

        box-shadow: 0 10px 30px rgba(240, 119, 41, 0.5);

    }



    .premium-gallery-card:hover .premium-gallery-icon {

        transform: scale(1) rotate(0deg);

    }



    .premium-gallery-icon i {

        color: #fff;

        font-size: 26px;

    }



    /* Premium Button */

    .btn-premium-orange {

        background: linear-gradient(135deg, #f07729 0%, #d96620 100%);

        color: #fff;

        padding: 15px 40px;

        border-radius: 50px;

        font-weight: 600;

        font-size: 16px;

        border: none;

        box-shadow: 0 8px 25px rgba(255, 152, 0, 0.3);

        transition: all 0.3s ease;

        text-decoration: none;

        display: inline-block;

    }



    .btn-premium-orange:hover {

        transform: translateY(-3px);

        box-shadow: 0 12px 35px rgba(255, 152, 0, 0.4);

        color: #fff;

    }



    .btn-gallery-orange {

        background: linear-gradient(135deg, #f9b165 0%, #f07729 100%);

        color: #fff;

        padding: 12px 40px;

        border-radius: 50px;

        font-weight: 600;

        text-decoration: none;

        box-shadow: 0 10px 20px rgba(255, 152, 0, 0.25);

        transition: all 0.3s ease;

        display: inline-block;

    }



    .btn-gallery-orange:hover {

        transform: translateY(-2px);

        box-shadow: 0 15px 30px rgba(255, 152, 0, 0.35);

        color: #fff;

    }



    /* Responsive */

    @media (max-width: 991px) {

        .gallery-grid {

            grid-template-columns: repeat(2, 1fr);

        }

    }



    @media (max-width: 576px) {

        .gallery-grid {

            grid-template-columns: 1fr;

        }

    }



    .gallery-section .section-title {

        margin-bottom: 20px;

        position: relative;

        z-index: 2;

    }



    .gallery-filters {

        display: flex;

        justify-content: center;

        flex-wrap: wrap;

        gap: 15px;

    }



    .gallery-filters .filter-btn {

        border: 2px solid #eee;

        background: transparent;

        padding: 10px 30px;

        border-radius: 50px;

        font-weight: 600;

        color: #555;

        cursor: pointer;

        transition: all 0.3s ease;

    }



    .gallery-filters .filter-btn:hover,

    .gallery-filters .filter-btn.active {

        background: #f07729;

        border-color: #f07729;

        color: #fff;

        box-shadow: 0 5px 15px rgba(242, 201, 76, 0.3);

    }



    .gallery-btn-container {

        margin-top: 80px;

        /* Significant gap as requested */

    }



    /* Latest News Section */

    .news-section {

        padding: 100px 0;

        background: #f9f9f9;

        display: block;

        /* Force block layout */

    }



    .news-section .container {

        display: block !important;

        /* Force container to stack elements */

        width: 100%;

        max-width: 1140px;

    }



    /* Ensure Title is Centered and Full Width */

    .news-section .section-title {

        width: 100%;

        text-align: center;

        margin-bottom: 50px;

        display: block;

        clear: both;

    }



    .news-section .section-title .sub-title {

        display: block;

        color: #f07729;

        font-weight: 600;

        text-transform: uppercase;

        margin-bottom: 10px;

        letter-spacing: 1px;

    }



    .news-section .section-title h2 {

        font-size: 36px;

        font-weight: 700;

        margin-bottom: 15px;

        color: #333;

    }



    /* News Grid - Strict 3 Columns */

    .news-grid {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 30px;

        width: 100%;

        clear: both;

    }



    .news-item {

        width: 100%;

    }



    /* Responsive Grid */

    @media (max-width: 991px) {

        .news-grid {

            grid-template-columns: repeat(2, 1fr);

        }

    }



    @media (max-width: 768px) {

        .news-grid {

            grid-template-columns: 1fr;

        }

    }



    .testimonial-card {

        background: linear-gradient(135deg, #fff9e6 0%, #fffbf0 100%);

        padding: 40px 30px;

        border-radius: 20px;

        text-align: center;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

        transition: all 0.4s ease;

        border: 2px solid #f4b400;

    }



    .testimonial-slider-section .swiper-slide-active .testimonial-card {

        background: linear-gradient(135deg, #f4b400 0%, #f39c12 100%);

        transform: scale(1.05);

        box-shadow: 0 15px 40px rgba(244, 180, 0, 0.3);

        border-color: #f39c12;

    }



    .news-card {

        background: #fff;

        border-radius: 15px;

        overflow: hidden;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

        transition: all 0.3s ease;

        height: 100%;

        position: relative;

        display: flex;

        flex-direction: column;

    }



    .news-card:hover {

        transform: translateY(-10px);

        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

    }



    .news-img {

        position: relative;

        overflow: hidden;

        height: 240px;

        width: 100%;

    }



    .news-img img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        transition: transform 0.5s ease;

    }



    .news-card:hover .news-img img {

        transform: scale(1.1);

    }



    .date-badge {

        position: absolute;

        top: 20px;

        left: 20px;

        background: linear-gradient(135deg, #f07729 0%, #d96620 100%);

        color: #fff;

        padding: 10px 15px;

        border-radius: 10px;

        text-align: center;

        box-shadow: 0 5px 15px rgba(240, 119, 41, 0.3);

        z-index: 2;

    }



    .date-badge .day {

        display: block;

        font-size: 20px;

        font-weight: 700;

        line-height: 1;

    }



    .date-badge .month {

        display: block;

        font-size: 12px;

        text-transform: uppercase;

        font-weight: 600;

    }



    .news-content {

        padding: 25px;

    }



    .news-meta {

        list-style: none;

        padding: 0;

        margin: 0 0 15px 0;

        display: flex;

        gap: 15px;

        font-size: 13px;

        color: #888;

    }



    .news-meta i {

        color: #f4b400;

        margin-right: 5px;

    }



    .news-content h3 {

        font-size: 20px;

        margin-bottom: 15px;

        font-weight: 700;

    }



    .news-content h3 a {

        color: #333;

        text-decoration: none;

        transition: color 0.3s ease;

    }



    .news-content h3 a:hover {

        color: #f07729;

    }



    .news-content p {

        color: #666;

        margin-bottom: 20px;

        line-height: 1.6;

    }



    .read-more-btn {

        color: #f07729;

        font-weight: 600;

        text-decoration: none;

        display: inline-flex;

        align-items: center;

        transition: all 0.3s ease;

    }



    .read-more-btn i {

        margin-left: 5px;

        transition: transform 0.3s ease;

    }



    .read-more-btn:hover {

        color: #d96620;

    }



    .read-more-btn:hover i {

        transform: translateX(5px);

    }



    .gallery-img {

        position: relative;

        border-radius: 20px;

        overflow: hidden;

        height: 300px;

        /* Standard height */

        width: 100%;

        cursor: pointer;

        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);

    }



    /* The featured item needs to be taller */

    .gallery-item:nth-child(1) .gallery-img {

        height: 630px;

        /* 300 * 2 + 30 gap */

    }



    .gallery-img img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        transition: transform 0.7s cubic-bezier(0.2, 1, 0.3, 1);

    }



    /* Responsive Grid */

    @media (max-width: 991px) {

        .gallery-grid {

            grid-template-columns: repeat(2, 1fr);

        }



        .gallery-item:nth-child(1) {

            grid-column: span 2;

            /* Still span across on tablet */

            grid-row: span 1;

        }



        .gallery-item:nth-child(1) .gallery-img {

            height: 400px;

        }

    }



    @media (max-width: 768px) {

        .gallery-grid {

            grid-template-columns: 1fr;

            /* Stack on mobile */

        }



        .gallery-item:nth-child(1) {

            grid-column: span 1;

            grid-row: span 1;

        }



        .gallery-item:nth-child(1) .gallery-img {

            height: 300px;

        }



        .gallery-filters .filter-btn {

            padding: 8px 20px;

            font-size: 14px;

        }

    }



    .gallery-img img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);

    }



    .gallery-img:hover img {

        transform: scale(1.1);

    }



    .gallery-overlay {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        opacity: 0;

        transition: all 0.4s ease;

    }



    .gallery-img:hover .gallery-overlay {

        opacity: 1;

    }



    .gallery-overlay i {

        color: #f07729;

        font-size: 30px;

        background: #fff;

        width: 60px;

        height: 60px;

        border-radius: 50%;

        display: flex;

        justify-content: center;

        align-items: center;

        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

        margin-bottom: 10px;

        transform: translateY(20px);

        transition: all 0.4s ease;

    }



    .gallery-img:hover .gallery-overlay i {

        transform: translateY(0);

    }



    .gallery-overlay span {

        color: #fff;

        font-weight: 600;

        font-size: 16px;

        letter-spacing: 1px;

        text-transform: uppercase;

        transform: translateY(20px);

        transition: all 0.4s ease 0.1s;

    }



    .gallery-img:hover .gallery-overlay span {

        transform: translateY(0);

    }



    /* Specific Video Styling */

    .video-card .video-overlay {

        opacity: 1;

        /* Always show overlay for video */

        background: rgba(0, 0, 0, 0.2);

    }



    .video-card:hover .video-overlay {

        background: rgba(0, 0, 0, 0.4);

    }



    .video-card .video-overlay i {

        background: #f07729;

        color: #fff;

        transform: translateY(0);

        width: 70px;

        height: 70px;

        font-size: 24px;

    }



    .video-card .video-overlay span {

        transform: translateY(0);

        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

    }



    .btn-outline-warning {

        color: #f07729;

        border-color: #f07729;

        border-width: 2px;

        border-radius: 50px;

        padding: 12px 30px;

        font-weight: 600;

    }



    .btn-outline-warning:hover {

        background: #f07729;

        color: #fff;

        box-shadow: 0 10px 20px rgba(242, 201, 76, 0.2);

    }



    /* Registration Form Styles - Square & Wide */

    .registration-form-card {

        background: #fff;

        padding: 60px;

        /* More padding */

        border-radius: 0;

        /* Square */

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

        /* Soft premium shadow */

        max-width: 1200px;

        /* Wider */

        margin: 0 auto;

        border-top: 4px solid #f07729;

        /* Theme accent top border */

    }



    .form-header .sub-title {

        color: #f07729;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: 2px;

        font-size: 14px;

        display: block;

        margin-bottom: 10px;

    }



    .form-header h2 {

        font-size: 36px;

        color: #333;

        font-family: 'Playfair Display', serif;

    }



    .form-group label {

        font-weight: 500;

        color: #444;

        margin-bottom: 8px;

        display: block;

        font-size: 15px;

    }



    .form-group label .required {

        color: #e74c3c;

    }



    .form-control {

        height: 50px;

        /* Taller inputs */

        border-radius: 0;

        /* Square */

        border: 1px solid #ddd;

        padding: 10px 15px;

        font-size: 15px;

        color: #333;

        background-color: #fcfcfc;

        transition: all 0.3s ease;

    }



    textarea.form-control {

        height: auto;

        padding-top: 15px;

    }



    .form-control:focus {

        border-color: #f07729;

        box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.1);

        background-color: #fff;

        outline: none;

    }



    .btn-submit {

        background: #f07729;

        /* Flat Orange */

        color: #fff;

        border: none;

        padding: 15px 60px;

        border-radius: 0;

        /* Square */

        font-size: 16px;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: 1px;

        cursor: pointer;

        box-shadow: none;

        /* Flat */

        transition: all 0.3s ease;

        display: inline-block;

    }



    .btn-submit:hover {

        transform: translateY(-2px);

        box-shadow: 0 15px 30px rgba(255, 152, 0, 0.35);

    }



    /* Custom File Upload Styling (Basic consistency) */

    input[type="file"] {

        padding: 10px;

        background: #fff;

        border-radius: 0;

    }



    /* Donor Card Styles (Premium Redesign) */

    .donor-card {

        background: #fff;

        border-radius: 20px;

        overflow: hidden;

        transition: all 0.4s ease;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

        /* Soft classy shadow */

        text-align: center;

        border: 1px solid rgba(0, 0, 0, 0.03);

        position: relative;

        padding-bottom: 25px;

    }



    .donor-card:hover {

        transform: translateY(-8px);

        box-shadow: 0 20px 40px rgba(242, 201, 76, 0.15);

        /* Golden Glow */

        border-color: rgba(242, 201, 76, 0.3);

    }



    .donor-card::before {

        content: '';

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100px;

        background: linear-gradient(135deg, #f07729 0%, #f07729 100%);

        /* Theme Orange Gradient */

        z-index: 0;

    }



    .donor-img-box {

        background: transparent;

        padding: 0;

        margin-top: 50px;

        /* Push down to overlap background */

        position: relative;

        z-index: 1;

        display: flex;

        justify-content: center;

    }



    .donor-img-box img {

        width: 110px;

        height: 110px;

        border-radius: 50%;

        object-fit: cover;

        border: 5px solid #fff;

        /* White ring */

        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    }



    .donor-name-box {

        background: transparent;

        padding: 15px 10px 5px;

        position: relative;

        z-index: 1;

    }



    .donor-name-box h3 {

        margin: 0;

        color: #2c2c2c;

        /* elegant black */

        font-size: 20px;

        font-weight: 700;

        font-family: 'Playfair Display', serif;

        letter-spacing: 0.5px;

    }



    .donor-details-box {

        background: transparent;

        padding: 10px 25px 20px;

        border: none;

    }



    .donor-details-box .label {

        font-weight: 500;

        color: #888;

        font-size: 13px;

        text-transform: uppercase;

        letter-spacing: 1px;

    }



    .donor-details-box .value {

        font-weight: 700;

        color: #f07729;

        /* Gold Accent */

        font-size: 16px;



        /* Initiative Card Styles */

        .initiative-card {

            background: #fff;

            padding: 40px 30px;

            border-radius: 15px;

            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);

            /* Soft wide shadow */

            text-align: center;

            transition: transform 0.3s ease;

            border: 1px solid #f9f9f9;

            height: 100%;

        }



        .initiative-card:hover {

            transform: translateY(-10px);

            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);

        }



        .initiative-icon {

            font-size: 60px;

            color: #f07729;

            margin-bottom: 25px;

            display: inline-block;

        }



        .initiative-card h3 {

            font-size: 22px;

            margin-bottom: 15px;

            font-weight: 700;

            color: #222;

            font-family: 'Playfair Display', serif;

        }



        .initiative-card p {

            color: #777;

            font-size: 15px;

            line-height: 1.7;

            margin-bottom: 25px;

        }



        .btn-learn-more {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            padding: 10px 25px;

            border: 1px solid #f07729;

            color: #f07729;

            border-radius: 50px;

            font-weight: 600;

            transition: all 0.3s;

            font-size: 14px;

        }



        .btn-learn-more i {

            margin-left: 8px;

            background: #f07729;

            color: #fff;

            width: 20px;

            height: 20px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 10px;

        }



        .btn-learn-more:hover {

            background: #f07729;

            color: #fff;

        }



        .btn-learn-more:hover i {

            background: #fff;

            color: #f07729;

        }



        /* Close the last media query or block properly if needed */

    }



    /* =========================================

   Blog Page Styling (Premium)

   ========================================= */



    .page-header {

        background-size: cover;

        background-position: center;

        padding: 120px 0;

        text-align: center;

        color: #fff;

        position: relative;

    }



    .page-header::before {

        content: '';

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: rgba(0, 0, 0, 0.6);

    }



    .page-header .container {

        position: relative;

        z-index: 1;

    }



    .page-header h1 {

        font-family: 'Playfair Display', serif;

        font-size: 48px;

        font-weight: 700;

        margin-bottom: 10px;

    }



    .page-header p {

        font-size: 18px;

        color: #f07729;

        font-weight: 500;

    }



    .blog-section {

        padding: 80px 0;

        background: #fdfdfd;

    }



    /* Blog Post Card */

    .blog-post {

        background: #fff;

        border-radius: 15px;

        overflow: hidden;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

        transition: transform 0.3s ease, box-shadow 0.3s ease;

        margin-bottom: 40px;

        border: 1px solid #eee;

    }



    .blog-post:hover {

        transform: translateY(-5px);

        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

    }



    .post-img {

        height: 400px;

        overflow: hidden;

        position: relative;

    }



    .post-img img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        transition: transform 0.5s ease;

    }



    .blog-post:hover .post-img img {

        transform: scale(1.05);

    }



    .post-content {

        padding: 30px;

    }



    .post-meta {

        font-size: 14px;

        color: #888;

        margin-bottom: 15px;

        display: flex;

        gap: 20px;

    }



    .post-meta span i {

        color: #f07729;

        margin-right: 5px;

    }



    .post-title {

        font-family: 'Playfair Display', serif;

        font-size: 28px;

        font-weight: 700;

        margin-bottom: 15px;

        line-height: 1.3;

    }



    .post-title a {

        color: #333;

        text-decoration: none;

        transition: color 0.3s;

    }



    .post-title a:hover {

        color: #f07729;

    }



    .post-excerpt {

        color: #666;

        line-height: 1.8;

        margin-bottom: 25px;

    }



    .read-more-btn {

        display: inline-block;

        background: #f07729;

        color: #fff;

        padding: 10px 25px;

        border-radius: 5px;

        text-decoration: none;

        font-weight: 600;

        transition: background 0.3s;

    }



    .read-more-btn:hover {

        background: #e68900;

        color: #fff;

    }



    /* Pagination */

    .pagination .page-link {

        color: #333;

        border: none;

        margin: 0 5px;

        border-radius: 5px;

        width: 40px;

        height: 40px;

        display: flex;

        align-items: center;

        justify-content: center;

        font-weight: 600;

        transition: all 0.3s;

    }



    .pagination .page-item.active .page-link {

        background-color: #f07729;

        color: #fff;

    }



    .pagination .page-link:hover {

        background-color: #eee;

        color: #333;

    }



    /* Sidebar Widgets */

    .widget {

        background: #fff;

        padding: 30px;

        border-radius: 15px;

        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);

        margin-bottom: 40px;

        border: 1px solid #f0f0f0;

    }



    .widget-title {

        font-family: 'Playfair Display', serif;

        font-size: 22px;

        font-weight: 700;

        color: #333;

        margin-bottom: 25px;

        padding-bottom: 10px;

        border-bottom: 2px solid #f07729;

        display: inline-block;

    }



    /* Search Widget */

    .search-form {

        position: relative;

    }



    .search-form input {

        width: 100%;

        padding: 12px 45px 12px 15px;

        border: 1px solid #eee;

        border-radius: 5px;

        outline: none;

        transition: border 0.3s;

    }



    .search-form input:focus {

        border-color: #f07729;

    }



    .search-form button {

        position: absolute;

        right: 5px;

        top: 5px;

        background: none;

        border: none;

        color: #f07729;

        width: 40px;

        height: 38px;

        font-size: 16px;

    }



    /* Categories Widget */

    .widget ul {

        list-style: none;

        padding: 0;

        margin: 0;

    }



    .widget ul li {

        margin-bottom: 12px;

        border-bottom: 1px solid #f9f9f9;

        padding-bottom: 12px;

    }



    .widget ul li:last-child {

        border-bottom: none;

        margin-bottom: 0;

        padding-bottom: 0;

    }



    .widget ul li a {

        color: #555;

        text-decoration: none;

        display: flex;

        justify-content: space-between;

        align-items: center;

        transition: color 0.3s;

        font-weight: 500;

    }



    .widget ul li a span {

        background: #fff5e6;

        color: #f07729;

        padding: 2px 8px;

        border-radius: 10px;

        font-size: 12px;

        font-weight: 600;

    }



    .widget ul li a:hover {

        color: #f07729;

        padding-left: 5px;

    }



    /* Recent Posts Widget */

    .recent-post-item {

        display: flex;

        align-items: center;

        margin-bottom: 20px;

    }



    .recent-post-item:last-child {

        margin-bottom: 0;

    }



    .recent-post-item .thumb {

        width: 80px;

        height: 80px;

        border-radius: 8px;

        overflow: hidden;

        flex-shrink: 0;

        margin-right: 15px;

    }



    .recent-post-item .thumb img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        transition: transform 0.3s;

    }



    .recent-post-item:hover .thumb img {

        transform: scale(1.1);

    }



    .recent-post-item .content {

        flex: 1;

    }



    .recent-post-item .content h5 {

        /* removed specifics to inherit */

        margin: 0 0 5px;

        line-height: 1.4;

    }



    .recent-post-item .content a {

        color: #333;

        text-decoration: none;

        font-weight: 600;

        font-size: 15px;

        transition: color 0.3s;

        display: block;

        line-height: 1.4;

        margin-bottom: 5px;

    }



    .recent-post-item .content a:hover {

        color: #f07729;

    }



    .recent-post-item .content small {

        color: #999;

        font-size: 12px;

    }



    /* Tag Cloud */

    .tag-cloud a {

        display: inline-block;

        background: #f8f9fa;

        color: #666;

        padding: 8px 15px;

        border-radius: 20px;

        font-size: 13px;

        margin: 0 5px 8px 0;

        text-decoration: none;

        transition: all 0.3s;

        border: 1px solid #eee;

    }



    .tag-cloud a:hover {

        background: #f07729;

        color: #fff;

        border-color: #f07729;

    }



    /* =========================================

   PREMIUM NEWS & EVENTS SECTION

   ========================================= */



    .news-section {

        padding: 100px 0;

        background-color: #fcfcfc;

        position: relative;

        display: block;

        /* Ensure it is block */

    }



    /* Header Styling - Override Specificity */

    .news-section .section-title.text-start {

        text-align: left !important;

        max-width: 100%;

        margin-left: 0;

    }



    .badge-premium {

        display: inline-block;

        background: rgba(240, 119, 41, 0.1);

        color: #f07729;

        font-size: 13px;

        font-weight: 700;

        text-transform: uppercase;

        padding: 6px 14px;

        border-radius: 30px;

        margin-bottom: 15px;

        letter-spacing: 1px;

    }



    .news-section .section-title h2 {

        font-size: 38px;

        font-family: 'Playfair Display', serif;

        color: #222;

        margin-bottom: 15px;

        font-weight: 700;

    }



    .news-section .section-title p {

        font-size: 16px;

        line-height: 1.8;

        color: #666;

        margin-bottom: 0;

    }



    .btn-outline-prem {

        display: inline-block;

        padding: 12px 30px;

        border: 2px solid #eee;

        color: #333;

        font-weight: 600;

        border-radius: 50px;

        transition: all 0.3s ease;

        text-decoration: none;

    }



    .btn-outline-prem:hover {

        border-color: #f07729;

        background: #f07729;

        color: #fff;

        transform: translateY(-2px);

    }



    /* Grid Layout */

    .news-grid-prem {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 30px;

        margin-top: 50px;

    }



    @media (max-width: 991px) {

        .news-grid-prem {

            grid-template-columns: repeat(2, 1fr);

        }

    }



    @media (max-width: 768px) {

        .news-grid-prem {

            grid-template-columns: 1fr;

        }



        .news-section .section-title.text-start {

            text-align: center !important;

        }



        .news-section .row {

            text-align: center;

        }



        .news-section .col-lg-4 {

            text-align: center !important;

            margin-top: 20px;

        }

    }



    /* Premium Card Design */

    .news-card-prem {

        background: #fff;

        border-radius: 16px;

        overflow: hidden;

        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);

        transition: transform 0.3s ease, box-shadow 0.3s ease;

        display: flex;

        flex-direction: column;

        height: 100%;

        border: 1px solid rgba(0, 0, 0, 0.03);

    }



    .news-card-prem:hover {

        transform: translateY(-10px);

        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);

    }



    /* Thumbnail Area */

    .news-thumb {

        position: relative;

        height: 240px;

        overflow: hidden;

    }



    .news-thumb img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        transition: transform 0.6s ease;

    }



    .news-card-prem:hover .news-thumb img {

        transform: scale(1.1);

    }



    .news-date {

        position: absolute;

        top: 20px;

        left: 20px;

        background: #fff;

        padding: 8px 15px;

        border-radius: 12px;

        text-align: center;

        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

        min-width: 60px;

    }



    .d-day {

        display: block;

        font-size: 20px;

        font-weight: 800;

        color: #f07729;

        line-height: 1;

    }



    .d-month {

        display: block;

        font-size: 11px;

        text-transform: uppercase;

        font-weight: 700;

        color: #333;

        margin-top: 2px;

    }



    .overlay-link {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%) scale(0);

        width: 50px;

        height: 50px;

        background: #f07729;

        color: #fff;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

        opacity: 0;

        font-size: 18px;

    }



    .news-card-prem:hover .overlay-link {

        transform: translate(-50%, -50%) scale(1);

        opacity: 1;

    }



    /* Content Area */

    .news-body {

        padding: 25px;

        display: flex;

        flex-direction: column;

        flex: 1;

    }



    .news-cat {

        color: #f07729;

        font-size: 12px;

        font-weight: 700;

        text-transform: uppercase;

        margin-bottom: 12px;

        letter-spacing: 0.5px;

        display: flex;

        align-items: center;

    }



    .news-body h3 {

        font-size: 20px;

        font-weight: 700;

        line-height: 1.4;

        margin-bottom: 12px;

        font-family: 'Inter', sans-serif;

    }



    .news-body h3 a {

        color: #1a1a1a;

        transition: color 0.2s;

        text-decoration: none;

    }



    .news-body h3 a:hover {

        color: #f07729;

    }



    .news-body p {

        font-size: 15px;

        color: #666;

        margin-bottom: 20px;

        flex: 1;

        line-height: 1.6;

    }



    /* Card Footer */

    .news-footer {

        border-top: 1px solid #f9f9f9;

        padding-top: 15px;

        margin-top: auto;

    }



    .read-more {

        font-size: 14px;

        font-weight: 700;

        color: #111;

        display: inline-flex;

        align-items: center;

        gap: 8px;

        transition: all 0.3s;

        text-decoration: none;

    }



    .read-more:hover {

        color: #f07729;

        gap: 12px;

    }



    /* News Container Card */

    .news-container-card {

        background: #fff;

        padding: 60px 40px;

        border-radius: 20px;

        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);

        /* Soft, wide shadow like other sections */

        width: 100%;

    }



    @media (max-width: 991px) {

        .news-container-card {

            padding: 40px 20px;

        }

    }



    /* Gallery Container Card */

    .gallery-container-card {

        background: #fff;

        padding: 60px 40px;

        border-radius: 20px;

        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);

        width: 100%;

        margin-bottom: 30px;

    }



    @media (max-width: 991px) {

        .gallery-container-card {

            padding: 40px 20px;

        }

    }



    /* Ensure User Dropdown Menu Visibility */

    .user-dropdown .dropdown-menu {

        z-index: 2000 !important;

    }



    /* =========================================

   PREMIUM FOOTER STYLES

   ========================================= */

    .main-footer {

        background-color: #0e2e50;

        color: #fff;

        padding-top: 80px;

        font-family: 'Inter', sans-serif;

        position: relative;

        overflow: hidden;

    }



    .footer-top {

        padding-bottom: 50px;

    }



    .footer-col h3 {

        font-size: 20px;

        font-weight: 700;

        color: #fff;

        margin-bottom: 25px;

        position: relative;

        padding-bottom: 12px;

        font-family: 'Playfair Display', serif;

    }



    .footer-col h3::after {

        content: '';

        position: absolute;

        left: 0;

        bottom: 0;

        width: 40px;

        height: 3px;

        background-color: #00bef2;

        border-radius: 2px;

    }



    .footer-about p {

        color: rgba(255, 255, 255, 0.7);

        line-height: 1.8;

        margin-bottom: 25px;

        font-size: 15px;

    }



    .footer-logo img {

        max-width: 180px;

        margin-bottom: 20px;

        background: #fff;

        padding: 10px;

        border-radius: 8px;

    }



    .footer-links ul {

        list-style: none;

        padding: 0;

        margin: 0;

    }



    .footer-links ul li {

        margin-bottom: 12px;

    }



    .footer-links ul li a {

        color: rgba(255, 255, 255, 0.7);

        text-decoration: none;

        transition: all 0.3s;

        font-size: 15px;

        display: flex;

        align-items: center;

    }



    .footer-links ul li a::before {

        content: '\f105';

        font-family: 'Font Awesome 5 Free';

        font-weight: 900;

        margin-right: 10px;

        color: #00bef2;

        transition: margin-right 0.3s;

    }



    .footer-links ul li a:hover {

        color: #00bef2;

        padding-left: 5px;

    }



    .footer-contact p {

        color: rgba(255, 255, 255, 0.7);

        margin-bottom: 15px;

        display: flex;

        align-items: flex-start;

        font-size: 15px;

        line-height: 1.6;

    }



    .footer-contact p i {

        color: #00bef2;

        margin-right: 15px;

        margin-top: 5px;

        font-size: 18px;

    }



    .newsletter-form {

        position: relative;

        margin-top: 20px;

    }



    .newsletter-form input {

        width: 100%;

        padding: 15px 20px;

        border-radius: 50px;

        border: 1px solid rgba(255, 255, 255, 0.1);

        background: rgba(255, 255, 255, 0.05);

        color: #fff;

        outline: none;

        transition: all 0.3s;

    }



    .newsletter-form input:focus {

        background: rgba(255, 255, 255, 0.1);

        border-color: #00bef2;

    }



    .newsletter-form button {

        margin-top: 15px;

        width: 100%;

        padding: 12px 20px;

        background: #00bef2;

        color: #fff;

        border: none;

        border-radius: 50px;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: 1px;

        cursor: pointer;

        transition: all 0.3s;

        font-size: 14px;

    }



    .newsletter-form button:hover {

        background: #fff;

        color: #0e2e50;

        transform: translateY(-2px);

    }



    .footer-bottom {

        background: rgba(0, 0, 0, 0.2);

        padding: 25px 0;

        text-align: center;

        border-top: 1px solid rgba(255, 255, 255, 0.05);

    }



    .footer-bottom p {

        margin: 0;

        color: rgba(255, 255, 255, 0.5);

        font-size: 14px;

    }



    .footer-bottom a {

        color: #00bef2;

        text-decoration: none;

        font-weight: 600;

        transition: color 0.3s;

    }



    .footer-bottom a:hover {

        color: #fff;

    }



    .main-footer {

        background-color: #0e2e50;

        color: #fff;

        padding-top: 50px;

        font-family: 'Inter', sans-serif;

        position: relative;

        overflow: hidden;

    }



    .footer-top {

        padding-bottom: 30px;

    }



    .footer-col h3 {

        font-size: 20px;

        font-weight: 700;

        color: #fff;

        margin-bottom: 25px;

        position: relative;

        padding-bottom: 12px;

        font-family: 'Playfair Display', serif;

    }



    .footer-col h3::after {

        content: '';

        position: absolute;

        left: 0;

        bottom: 0;

        width: 40px;

        height: 3px;

        background-color: #00bef2;

        border-radius: 2px;

    }



    .footer-about p {

        color: rgba(255, 255, 255, 0.7);

        line-height: 1.8;

        margin-bottom: 25px;

        font-size: 15px;

    }



    .footer-logo img {

        max-width: 180px;

        margin-bottom: 20px;

        background: #fff;

        padding: 10px;

        border-radius: 8px;

    }



    .footer-links ul {

        list-style: none;

        padding: 0;

        margin: 0;

    }



    .footer-links ul li {

        margin-bottom: 12px;

    }



    .footer-links ul li a {

        color: rgba(255, 255, 255, 0.7);

        text-decoration: none;

        transition: all 0.3s;

        font-size: 15px;

        display: flex;

        align-items: center;

    }



    .footer-links ul li a::before {

        content: '\f105';

        font-family: 'Font Awesome 5 Free';

        font-weight: 900;

        margin-right: 10px;

        color: #00bef2;

        transition: margin-right 0.3s;

    }



    .footer-links ul li a:hover {

        color: #00bef2;

        padding-left: 5px;

    }



    .footer-contact p {

        color: rgba(255, 255, 255, 0.7);

        margin-bottom: 15px;

        display: flex;

        align-items: flex-start;

        font-size: 15px;

        line-height: 1.6;

    }



    .footer-contact p i {

        color: #00bef2;

        margin-right: 15px;

        margin-top: 5px;

        font-size: 18px;

    }



    .newsletter-form {

        position: relative;

        margin-top: 20px;

    }



    .newsletter-form input {

        width: 100%;

        padding: 15px 20px;

        border-radius: 50px;

        border: 1px solid rgba(255, 255, 255, 0.1);

        background: rgba(255, 255, 255, 0.05);

        color: #fff;

        outline: none;

        transition: all 0.3s;

    }



    .newsletter-form input:focus {

        background: rgba(255, 255, 255, 0.1);

        border-color: #00bef2;

    }



    .newsletter-form button {

        margin-top: 15px;

        width: 100%;

        padding: 12px 20px;

        background: #00bef2;

        color: #fff;

        border: none;

        border-radius: 50px;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: 1px;

        cursor: pointer;

        transition: all 0.3s;

        font-size: 14px;

    }



    .newsletter-form button:hover {

        background: #fff;

        color: #0e2e50;

        transform: translateY(-2px);

    }



    .footer-bottom {

        background: rgba(0, 0, 0, 0.2);

        padding: 25px 0;

        text-align: center;

        border-top: 1px solid rgba(255, 255, 255, 0.05);

    }



    .footer-bottom p {

        margin: 0;

        color: rgba(255, 255, 255, 0.5);

        font-size: 14px;

    }



    .footer-bottom a {

        color: #00bef2;

        text-decoration: none;

        font-weight: 600;

        transition: color 0.3s;

    }



    .footer-bottom a:hover {

        color: #fff;

    }



    /* =========================================

   PREMIUM DONATION TICKER STYLES

   ========================================= */

    .donation-ticker-wrap {

        position: fixed;

        bottom: 0;

        left: 0;

        width: 100%;

        background: #fff;

        border-top: 1px solid rgba(0, 0, 0, 0.05);

        height: 50px;

        display: flex;

        z-index: 1000;

        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);

        font-family: 'Inter', sans-serif;

    }



    .donation-ticker-wrap .ticker-label {

        background: #0e2e50;

        color: #fff;

        padding: 0 20px;

        display: flex;

        align-items: center;

        font-weight: 700;

        font-size: 14px;

        text-transform: uppercase;

        letter-spacing: 0.5px;

        flex-shrink: 0;

        z-index: 2;

        position: relative;

    }



    .donation-ticker-wrap .ticker-label::after {

        content: '';

        position: absolute;

        top: 0;

        right: -15px;

        width: 0;

        height: 0;

        border-top: 50px solid #0e2e50;

        border-right: 15px solid transparent;

    }



    .donation-ticker-wrap .ticker-label i {

        color: #e74c3c;

        /* Heart color */

        margin-right: 8px;

        animation: heartBeat 1.5s infinite;

    }



    @keyframes heartBeat {

        0% {

            transform: scale(1);

        }



        14% {

            transform: scale(1.3);

        }



        28% {

            transform: scale(1);

        }



        42% {

            transform: scale(1.3);

        }



        70% {

            transform: scale(1);

        }

    }



    .donation-ticker-wrap .ticker-content {

        flex: 1;

        overflow: hidden;

        position: relative;

        display: flex;

        align-items: center;

        background: #fff;

    }



    .donation-ticker-wrap .ticker-move {

        display: inline-block;

        white-space: nowrap;

        padding-left: 100%;

        animation: ticker 30s linear infinite;

    }



    .donation-ticker-wrap .ticker-move:hover {

        animation-play-state: paused;

    }



    .donation-ticker-wrap .donor-item {

        display: inline-flex;

        align-items: center;

        margin-right: 40px;

        color: #333;

        font-size: 14px;

        font-weight: 500;

    }



    .donation-ticker-wrap .donor-item i {

        color: #00bef2;

        /* Premium accent */

        margin-right: 6px;

        font-size: 16px;

    }



    .donation-ticker-wrap .donor-amount {

        font-weight: 700;

        color: #0e2e50;

        margin-left: 5px;

        background: rgba(14, 46, 80, 0.05);

        padding: 2px 8px;

        border-radius: 4px;

    }



    @keyframes ticker {

        0% {

            transform: translate3d(0, 0, 0);

        }



        100% {

            transform: translate3d(-100%, 0, 0);

        }

    }



    /* Push body up so ticker doesn't hide content */

    body {

        padding-bottom: 0px;

    }



    /* Mobile Adjustments */

    @media (max-width: 576px) {

        .donation-ticker-wrap .ticker-label {

            padding: 0 10px;

            font-size: 12px;

        }



        .donation-ticker-wrap .ticker-label span {

            display: none;

            /* Hide text, show icon only if needed */

        }



        .donation-ticker-wrap .donor-item {

            font-size: 13px;

            margin-right: 25px;

        }

    }



    /* Updated Footer Logo Size */

    .footer-logo img {

        width: 150px;

        max-width: 100%;

        height: auto;

        margin-bottom: 15px;

    }



/* ===============================================
   GALLERY GRID STYLES (Restored)
   =============================================== */
.premium-gallery-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.gallery-grid {
    column-count: 3;
    column-gap: 20px;
}
@media (max-width: 991px) { .gallery-grid { column-count: 2; } }
@media (max-width: 576px) { .gallery-grid { column-count: 1; } }

.gallery-item {
    break-inside: avoid;
    margin-bottom: 20px;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    background: #fff;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(14, 46, 80, 0.2);
}

.gallery-item img {
    width: 100%;
    display: block;
    transition: transform 0.6s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14, 46, 80, 0.9), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-content h4 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 5px;
    transform: translateY(20px);
    transition: transform 0.4s ease 0.1s;
}

.gallery-content p {
    color: #00bef2;
    font-size: 0.9rem;
    margin: 0;
    transform: translateY(20px);
    transition: transform 0.4s ease 0.2s;
}

.gallery-item:hover .gallery-content h4,
.gallery-item:hover .gallery-content p {
    transform: translateY(0);
}

.gallery-icon-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #fff;
    color: #0e2e50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: transform 0.3s ease 0.2s;
}

.gallery-item:hover .gallery-icon-btn {
    transform: scale(1);
}


/* Hide Mobile Nav Toggle on Desktop */
@media (min-width: 992px) { 
    .mobile-nav-toggle { display: none !important; } 
    .header-nav { display: flex !important; position: static !important; height: auto !important; width: auto !important; background: transparent !important; box-shadow: none !important; transform: none !important; visibility: visible !important; }
    .header-nav::before { display: none !important; }
}