/* ============================================
   UNIS POUR L'HUMANITÉ - Correct Class Names
   Targeting actual template structure
   ============================================ */

/* ============ DONATIONS / CAUSES SECTION ============ */
.ul-donations,
.ul-donations.ul-section-spacing {
    background: var(--brand-white) !important;
    padding: 80px 0 !important;
}

.ul-donations-heading,
.ul-section-heading {
    margin-bottom: 50px !important;
}

.ul-section-heading .ul-section-sub-title,
.ul-donations .ul-section-sub-title {
    color: var(--brand-green) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 14px !important;
    display: inline-block !important;
    margin-bottom: 12px !important;
}

.ul-section-heading .ul-section-sub-title::before,
.ul-donations .ul-section-sub-title::before {
    content: '❤️ ';
    color: var(--brand-orange);
    margin-right: 5px;
}

.ul-section-heading .ul-section-title,
.ul-donations .ul-section-title {
    color: var(--brand-navy) !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
}

/* The actual donation card */
.ul-donation {
    background: #fff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04) !important;
}

.ul-donation:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

.ul-donation-img {
    position: relative !important;
    overflow: hidden !important;
}

.ul-donation-img img {
    width: 100% !important;
    height: auto !important;
    transition: transform 0.5s ease !important;
}

.ul-donation:hover .ul-donation-img img {
    transform: scale(1.05) !important;
}

/* Category/tag overlay - GREEN */
.ul-donation-img .ul-tag,
.ul-donation .badge,
.ul-donation .tag,
.ul-donation-tag,
.ul-donation-img .category {
    background: var(--brand-green) !important;
    color: #fff !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    z-index: 2 !important;
}

.ul-donation-txt {
    padding: 22px 20px !important;
}

.ul-donation-txt h3,
.ul-donation-txt h4,
.ul-donation-txt .title,
.ul-donation .title a {
    color: var(--brand-navy) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
    text-decoration: none !important;
}

.ul-donation-txt h3:hover,
.ul-donation-txt h4:hover,
.ul-donation .title a:hover {
    color: var(--brand-blue) !important;
}

.ul-donation-txt p,
.ul-donation .descr {
    color: #666 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
}

/* Progress container */
.ul-donation-progress,
.donation-progress-container,
.ul-progress-container {
    background: #f0f0f0 !important;
    height: 8px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    margin: 12px 0 !important;
    position: relative !important;
}

/* Progress bar fill - GREEN */
.donation-progressbar,
.ul-progressbar,
.ul-donation-progress .progress-bar,
.ul-donation .progress-bar {
    background: linear-gradient(90deg, var(--brand-green), #5fc870) !important;
    height: 100% !important;
}

/* Raised/Goal display */
.ul-donation-amounts,
.ul-donation .amounts,
.donation-stats {
    display: flex !important;
    justify-content: space-between !important;
    margin: 12px 0 !important;
    font-size: 13px !important;
    color: #666 !important;
}

.ul-donation-amounts strong,
.ul-donation .raised,
.ul-donation .goal,
.donation-stats strong {
    color: var(--brand-blue) !important;
    font-weight: 700 !important;
}

/* Donate Now button - GREEN */
.ul-donation .ul-btn,
.ul-donation a.ul-btn,
.ul-donation-txt .ul-btn,
.ul-donation a[href*="donat"] {
    background: var(--brand-green) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 30px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}

.ul-donation .ul-btn:hover {
    background: #2f9039 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(59, 174, 74, 0.3) !important;
}

/* Slider Navigation arrows */
.ul-slider-nav,
.ul-donations-slider-nav {
    display: flex !important;
    gap: 10px !important;
}

.ul-slider-nav button,
.ul-donations-slider-nav button,
.ul-slider-nav .prev,
.ul-slider-nav .next {
    background: #fff !important;
    color: var(--brand-blue) !important;
    border: 2px solid var(--brand-blue) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.ul-slider-nav button:hover,
.ul-donations-slider-nav button:hover {
    background: var(--brand-blue) !important;
    color: #fff !important;
}

/* Active donors */
.ul-active-donors,
.active-donors {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--brand-navy) !important;
    font-weight: 600 !important;
}

/* ============ EVENTS SECTION (correct classes) ============ */
.ul-events,
.ul-events.ul-section-spacing {
    background: var(--brand-white) !important;
    padding: 80px 0 !important;
}

.ul-event,
.ul-events .event-item {
    background: #fff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s ease !important;
}

.ul-event:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.ul-event-img {
    position: relative !important;
    overflow: hidden !important;
}

.ul-event-img img {
    width: 100% !important;
    height: auto !important;
}

/* Date badge - NAVY */
.ul-event-date,
.ul-event .date,
.ul-event-img .date,
.event-date-badge {
    background: var(--brand-navy) !important;
    color: #fff !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    z-index: 2 !important;
    text-align: center !important;
}

.ul-event-date .day,
.ul-event .date .day {
    font-size: 22px !important;
    font-weight: 800 !important;
    display: block !important;
    line-height: 1 !important;
    color: #fff !important;
}

.ul-event-date .month,
.ul-event .date .month {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.ul-event-txt {
    padding: 22px 20px !important;
}

.ul-event-txt h3,
.ul-event-txt h4,
.ul-event .title a {
    color: var(--brand-navy) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
}

.ul-event-txt h3:hover,
.ul-event .title a:hover {
    color: var(--brand-blue) !important;
}

.ul-event-txt p,
.ul-event .descr {
    color: #666 !important;
    font-size: 13px !important;
}

.ul-event-meta {
    color: #666 !important;
    font-size: 13px !important;
    margin: 10px 0 !important;
}

.ul-event-meta i {
    color: var(--brand-blue) !important;
    margin-right: 5px !important;
}

/* Event Details button - GREEN */
.ul-event .ul-btn,
.ul-event-txt .ul-btn {
    background: var(--brand-green) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 22px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.ul-event .ul-btn:hover {
    background: #2f9039 !important;
}

/* ============ BLOG SECTION ============ */
.ul-blogs,
.ul-blogs.ul-section-spacing {
    background: var(--brand-white) !important;
    padding: 80px 0 !important;
}

.ul-blog {
    background: #fff !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

.ul-blog:hover {
    transform: translateY(-5px) !important;
}

.ul-blog-img img {
    width: 100% !important;
    height: auto !important;
}

.ul-blog-txt {
    padding: 22px 20px !important;
}

.ul-blog-date,
.ul-blog .date {
    color: var(--brand-blue) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.ul-blog-meta,
.ul-blog .meta {
    color: #888 !important;
    font-size: 12px !important;
    margin: 8px 0 !important;
}

.ul-blog-txt h3,
.ul-blog-txt h4,
.ul-blog .title a {
    color: var(--brand-navy) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 10px 0 !important;
    text-decoration: none !important;
}

.ul-blog-txt h3:hover,
.ul-blog .title a:hover {
    color: var(--brand-blue) !important;
}

.ul-blog .read-more,
.ul-blog a.read-more {
    color: var(--brand-blue) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.ul-blog .read-more:hover {
    color: var(--brand-orange) !important;
}

/* ============ COUNTERS / STATS SECTION ============ */
.ul-counters,
.ul-counter,
.ul-counter-section,
.ul-stats {
    background: var(--brand-navy) !important;
    padding: 70px 0 !important;
    color: #fff !important;
}

.ul-counters *,
.ul-counter *,
.ul-stats * {
    color: #fff !important;
}

.ul-counter-item,
.ul-counter-card {
    text-align: center !important;
}

.ul-counter-icon,
.ul-counter-circle {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(30, 91, 198, 0.4) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 20px !important;
    background: rgba(30, 91, 198, 0.1) !important;
    font-size: 36px !important;
}

.ul-counter-item:nth-child(odd) .ul-counter-icon,
.ul-counters .col:nth-child(odd) .ul-counter-icon {
    color: var(--brand-blue) !important;
}

.ul-counter-item:nth-child(even) .ul-counter-icon,
.ul-counters .col:nth-child(even) .ul-counter-icon {
    color: var(--brand-green) !important;
}

.ul-counter-num,
.ul-counter-value,
.ul-counter h3 {
    font-size: clamp(32px, 4vw, 50px) !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 10px 0 5px !important;
}

.ul-counter-label,
.ul-counter p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* ============ ABOUT SECTION (correct classes) ============ */
.ul-about,
.ul-about.ul-section-spacing {
    background: var(--brand-white) !important;
    padding: 80px 0 !important;
}

.ul-about-txt {
    padding: 20px 0 !important;
}

.ul-about-txt .ul-section-sub-title,
.ul-about .ul-section-sub-title {
    color: var(--brand-blue) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 14px !important;
    display: inline-block !important;
    margin-bottom: 12px !important;
}

.ul-about-txt .ul-section-sub-title::before,
.ul-about .ul-section-sub-title::before {
    content: '❤️ ';
    color: var(--brand-orange);
    margin-right: 5px;
}

.ul-about-txt .ul-section-title,
.ul-about .ul-section-title {
    color: var(--brand-navy) !important;
    font-size: clamp(28px, 4vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.ul-about-txt p,
.ul-about p {
    color: #555 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
}

/* Start Helping Team button */
.ul-about .ul-btn,
.ul-about a.ul-btn,
.ul-about-txt .ul-btn {
    background: var(--brand-blue) !important;
    color: #fff !important;
    padding: 12px 25px !important;
    border-radius: 30px !important;
}

/* ============ TEAM SECTION ============ */
.ul-team,
.ul-team.ul-section-spacing,
.ul-chefs,
.ul-chefs.ul-section-spacing {
    background: var(--brand-white) !important;
    padding: 80px 0 !important;
}

.ul-team-card,
.ul-chef {
    background: #fff !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
    text-align: center !important;
    padding: 25px 20px !important;
}

.ul-team-card .image-wrapper,
.ul-chef-img {
    border: 3px solid var(--brand-blue) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    padding: 4px !important;
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto 15px !important;
}

.ul-team-card .image-wrapper img,
.ul-chef-img img {
    border-radius: 50% !important;
}

.ul-team-card .name,
.ul-team-card h3,
.ul-chef-name {
    color: var(--brand-navy) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    margin: 10px 0 5px !important;
}

.ul-team-card .position,
.ul-team-card .designation,
.ul-chef-position {
    color: var(--brand-blue) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* ============ TESTIMONIAL SECTION ============ */
.ul-testimonials,
.ul-testimonials.ul-section-spacing {
    background: var(--brand-white) !important;
    padding: 80px 0 !important;
}

.ul-testimonial,
.ul-testimonial-card {
    background: #fff !important;
    border-radius: 18px !important;
    padding: 30px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
}

.ul-testimonial .stars,
.ul-testimonial-rating,
.ul-testimonial .rating i {
    color: var(--brand-green) !important;
}

.ul-testimonial .quote,
.ul-testimonial .quote-icon {
    color: var(--brand-blue) !important;
}

.ul-testimonial-author-name,
.ul-testimonial .name {
    color: var(--brand-navy) !important;
    font-weight: 700 !important;
}

.ul-testimonial-author-position,
.ul-testimonial .position {
    color: var(--brand-blue) !important;
    font-size: 13px !important;
}

/* ============ FOOTER (correct classes) ============ */
.ul-footer {
    background: var(--brand-navy) !important;
    color: #fff !important;
    padding: 0 !important;
}

.ul-footer-top,
.ul-footer-top-area {
    background: var(--brand-blue) !important;
    color: #fff !important;
    padding: 20px 0 !important;
}

.ul-footer-top *,
.ul-footer-top-area * {
    color: #fff !important;
}

.ul-footer-main,
.ul-footer-widgets {
    padding: 60px 0 30px !important;
}

.ul-footer h2,
.ul-footer h3,
.ul-footer h4,
.ul-footer h5 {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

.ul-footer p {
    color: rgba(255, 255, 255, 0.7) !important;
}

.ul-footer a {
    color: rgba(255, 255, 255, 0.75) !important;
}

.ul-footer a:hover {
    color: var(--brand-orange) !important;
}

.ul-footer-social a,
.ul-footer .social-icons a,
.ul-footer-socials a {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 8px !important;
}

.ul-footer-social a:hover,
.ul-footer-socials a:hover {
    background: var(--brand-blue) !important;
}

.ul-footer-social a:nth-child(2n):hover,
.ul-footer-socials a:nth-child(2n):hover {
    background: var(--brand-green) !important;
}

.ul-footer-bottom,
.ul-footer-bottom-area {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 20px 0 !important;
}

.ul-footer-bottom p,
.ul-footer-bottom-area p {
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 0 !important;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 991px) {
    .ul-donations, .ul-events, .ul-about, .ul-team,
    .ul-testimonials, .ul-blogs, .ul-chefs {
        padding: 60px 0 !important;
    }
    
    .ul-counters, .ul-counter, .ul-stats {
        padding: 50px 0 !important;
    }
    
    .ul-counter-icon {
        width: 80px !important;
        height: 80px !important;
        font-size: 28px !important;
    }
}

@media (max-width: 767px) {
    .ul-donations, .ul-events, .ul-about, .ul-team,
    .ul-testimonials, .ul-blogs, .ul-chefs {
        padding: 50px 0 !important;
    }
    
    .ul-section-title {
        font-size: 26px !important;
    }
    
    .ul-counter-num {
        font-size: 32px !important;
    }
}

/* Fix homepage user campaigns section overlay issue */
section.ul-donations {
    background: #F8F8F5 !important;
    position: relative !important;
    z-index: 2 !important;
}
section.ul-donations + section {
    position: relative !important;
    z-index: 1 !important;
}
section.ul-donations .row {
    margin-bottom: 30px !important;
}

/* Fix mobile menu visibility */
@media (max-width: 991px) {
    .ul-sidebar {
        background: #111C2D !important;
    }
    .ul-sidebar-nav a,
    .ul-sidebar a {
        color: #fff !important;
        padding: 12px 20px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        display: block !important;
    }
    .ul-sidebar-nav a:hover {
        color: #3BAE4A !important;
    }
}
    .ul-sidebar-nav a,
    .to-go-to-sidebar-in-mobile .ul-header-nav > a,
    .to-go-to-sidebar-in-mobile .ul-header-nav > .has-sub-menu > a {
        padding: 12px 20px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        color: #fff !important;
        display: block !important;
    }
}

/* Fix sidebar submenu in mobile */
@media (max-width: 991px) {
    .ul-sidebar .has-sub-menu .ul-header-submenu,
    .ul-sidebar .ul-header-submenu {
        display: none !important;
        background: #111C2D !important;
    }
    .ul-sidebar .has-sub-menu.active .ul-header-submenu,
    .ul-sidebar .has-sub-menu.open .ul-header-submenu {
        display: block !important;
    }
    .ul-sidebar .ul-header-submenu a {
        color: rgba(255,255,255,0.8) !important;
        padding: 10px 30px !important;
        background: rgba(0,0,0,0.2) !important;
    }
    .ul-sidebar .ul-header-submenu a:hover {
        color: #3BAE4A !important;
        background: rgba(255,255,255,0.05) !important;
    }
}

/* Strong fix for mobile sidebar submenu - hide by default */
@media (max-width: 991px) {
    .ul-sidebar .ul-header-submenu,
    .ul-sidebar-header-nav-wrapper .ul-header-submenu,
    .to-go-to-sidebar-in-mobile .ul-header-submenu {
        max-height: 0 !important;
        overflow: hidden !important;
        background: #1a2942 !important;
        transition: max-height 0.3s ease !important;
        padding: 0 !important;
        opacity: 0 !important;
    }
    .ul-sidebar .has-sub-menu.active > .ul-header-submenu,
    .ul-sidebar .has-sub-menu.open > .ul-header-submenu,
    .ul-sidebar-header-nav-wrapper .has-sub-menu.active > .ul-header-submenu,
    .ul-sidebar-header-nav-wrapper .has-sub-menu.open > .ul-header-submenu {
        max-height: 500px !important;
        padding: 5px 0 !important;
        opacity: 1 !important;
    }
    /* Force all sidebar backgrounds to navy */
    .ul-sidebar,
    .ul-sidebar > *,
    .ul-sidebar-header-nav-wrapper,
    .ul-sidebar-header-nav-wrapper > *,
    .ul-sidebar .ul-header-nav,
    .ul-sidebar .ul-header-submenu {
        background: #111C2D !important;
    }
    .ul-sidebar .ul-header-submenu a {
        background: transparent !important;
        color: rgba(255,255,255,0.75) !important;
        padding: 10px 35px !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }
    .ul-sidebar .ul-header-nav > a,
    .ul-sidebar .has-sub-menu > a {
        color: #fff !important;
        font-weight: 600 !important;
    }
    .ul-sidebar-header-logo,
    .ul-sidebar-header {
        background: #111C2D !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    .ul-sidebar-closer {
        color: #fff !important;
        font-size: 22px !important;
    }
}

/* Force isolate all sections - prevent background bleed */
section.ul-donations,
section.ul-events,
section.ul-blogs,
section.ul-about,
section.ul-team,
section.ul-counters {
    position: relative !important;
    isolation: isolate !important;
    margin: 0 !important;
    clear: both !important;
}

section.ul-donations {
    background: #F8F8F5 !important;
    padding-bottom: 100px !important;
}

/* Center View All button properly */
section.ul-donations .text-center {
    margin-top: 40px !important;
    padding: 0 !important;
    width: 100% !important;
}

section.ul-donations .text-center a {
    display: inline-block !important;
    margin: 0 auto !important;
}

/* Remove any pseudo elements */
section.ul-donations::after,
section.ul-donations::before {
    display: none !important;
}

/* PC navigation visibility - force show */
@media (min-width: 992px) {
    .ul-header-nav-wrapper {
        display: flex !important;
        align-items: center !important;
    }
    .to-go-to-sidebar-in-mobile {
        display: block !important;
    }
    .ul-header-nav {
        display: flex !important;
        flex-direction: row !important;
        gap: 25px !important;
        align-items: center !important;
    }
    .ul-header-nav > a,
    .ul-header-nav > .has-sub-menu > a {
        color: #111C2D !important;
        font-weight: 600 !important;
        padding: 10px 5px !important;
        text-decoration: none !important;
    }
    .ul-header-sidebar-opener {
        display: none !important;
    }
}

/* Center campaign cards when only 1-2 items exist */
section.ul-donations .row {
    justify-content: center !important;
}

/* Full width single campaign card on tablet+ */
@media (min-width: 768px) {
    section.ul-donations .row .col-lg-4:only-child,
    section.ul-donations .row .col-md-6:only-child {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* On large screens center 1-2 cards */
@media (min-width: 992px) {
    section.ul-donations .row:has(> .col-lg-4:only-child) {
        justify-content: center !important;
    }
}

/* Fix campaign card image - ensure full width and equal height */
section.ul-donations .col-lg-4 img,
section.ul-donations .col-md-6 img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

section.ul-donations .col-lg-4 > div,
section.ul-donations .col-md-6 > div {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

section.ul-donations .col-lg-4 > div > div:last-child,
section.ul-donations .col-md-6 > div > div:last-child {
    flex: 1 !important;
}

/* Force image div to fill full card width */
section.ul-donations .col-lg-4 > div > div:first-child,
section.ul-donations .col-md-6 > div > div:first-child {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

section.ul-donations .col-lg-4 > div > div:first-child > a,
section.ul-donations .col-md-6 > div > div:first-child > a {
    display: block !important;
    width: 100% !important;
    line-height: 0 !important;
}

/* Fix Featured/Active tag - rounded pill */
section.ul-donations .col-lg-4 > div > div:first-child > span,
section.ul-donations .col-md-6 > div > div:first-child > span {
    border-radius: 25px !important;
    padding: 6px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    z-index: 5 !important;
}

/* PC Navigation - proper spacing and colors */
@media (min-width: 992px) {
    .ul-header-nav {
        display: flex !important;
        flex-direction: row !important;
        gap: 30px !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .ul-header-nav > a,
    .ul-header-nav > .has-sub-menu {
        display: inline-flex !important;
        align-items: center !important;
        position: relative !important;
        padding: 12px 8px !important;
        margin: 0 !important;
    }
    .ul-header-nav > a,
    .ul-header-nav > .has-sub-menu > a,
    .ul-header-nav .has-sub-menu > a {
        color: #111C2D !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
        white-space: nowrap !important;
    }
    .ul-header-nav > a:hover,
    .ul-header-nav > .has-sub-menu > a:hover,
    .ul-header-nav .active > a {
        color: #1E5BC6 !important;
    }
    
    /* Submenu dropdown */
    .ul-header-nav .ul-header-submenu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        background: #fff !important;
        min-width: 200px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
        border-radius: 10px !important;
        padding: 10px 0 !important;
        margin-top: 5px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(10px) !important;
        transition: all 0.2s ease !important;
        z-index: 100 !important;
    }
    .ul-header-nav .has-sub-menu:hover > .ul-header-submenu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
    .ul-header-nav .ul-header-submenu a {
        display: block !important;
        padding: 10px 20px !important;
        color: #111C2D !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    .ul-header-nav .ul-header-submenu a:hover {
        background: #f5f5f5 !important;
        color: #1E5BC6 !important;
    }
}

/* CRITICAL FIX: Force all nav menu items visible on PC */
@media (min-width: 992px) {
    .ul-header-nav,
    .ul-header-nav-wrapper,
    .to-go-to-sidebar-in-mobile {
        background: transparent !important;
    }
    
    /* Force visible text on ALL menu items */
    .ul-header-nav > a,
    .ul-header-nav > .has-sub-menu > a,
    .ul-header-nav-wrapper a,
    .to-go-to-sidebar-in-mobile > .ul-header-nav > a,
    .to-go-to-sidebar-in-mobile > .ul-header-nav > .has-sub-menu > a,
    nav.ul-header-nav a {
        color: #111C2D !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 10px 12px !important;
    }
    
    /* Hover state */
    .ul-header-nav > a:hover,
    .ul-header-nav > .has-sub-menu > a:hover,
    nav.ul-header-nav a:hover {
        color: #1E5BC6 !important;
    }
    
    /* Active state */
    .ul-header-nav .active > a {
        color: #1E5BC6 !important;
    }
}

/* ============================================
   CARD ANIMATIONS & UNIFORM HEIGHT
   ============================================ */

/* Make all campaign cards equal height with consistent title */
section.ul-donations .col-lg-4 > div,
section.ul-donations .col-md-6 > div {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
}

/* Hover & click effect on card border */
section.ul-donations .col-lg-4 > div:hover,
section.ul-donations .col-md-6 > div:hover {
    border-color: #F5661F !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 50px rgba(245, 102, 31, 0.25) !important;
}

section.ul-donations .col-lg-4 > div:active,
section.ul-donations .col-md-6 > div:active {
    border-color: #1E5BC6 !important;
    transform: translateY(-4px) !important;
}

/* Uniform title height - exactly 2 lines */
section.ul-donations .col-lg-4 h4,
section.ul-donations .col-md-6 h4,
section.ul-donations .col-lg-4 .ul-donation-title,
section.ul-donations .col-md-6 .ul-donation-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 48px !important;
    line-height: 1.4 !important;
}

/* Uniform description - exactly 2 lines */
section.ul-donations .col-lg-4 p,
section.ul-donations .col-md-6 p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 40px !important;
}

/* ============================================
   ANIMATED PROGRESS BAR ON DETAIL PAGES
   (Campaign show + Cause show)
   ============================================ */

/* Target the progress bar wrapper on detail pages */
.col-lg-4 [style*="background:#f0f0f0"][style*="height:10px"],
[id="donate-form"] ~ * [style*="background:#f0f0f0"][style*="height:10px"] {
    position: relative !important;
    height: 8px !important;
    background: #f0f0f0 !important;
    border-radius: 20px !important;
    overflow: visible !important;
    margin: 30px 0 15px !important;
}

.col-lg-4 [style*="background:#f0f0f0"][style*="height:10px"] > div {
    position: relative !important;
    height: 100% !important;
    background: linear-gradient(90deg, #F5661F, #ff8a4a) !important;
    border-radius: 20px !important;
    transform-origin: left center !important;
    animation: progressFill 2s cubic-bezier(0.65, 0, 0.35, 1) forwards !important;
}



/* The thumb circle at the end */
.col-lg-4 [style*="background:#f0f0f0"][style*="height:10px"] > div::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: #F5661F;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(245, 102, 31, 0.4);
    border: 3px solid #fff;
    opacity: 0;
    animation: showThumb 0.4s ease-out forwards;
    animation-delay: 1.8s;
}



/* The % tooltip above thumb */
.col-lg-4 [style*="background:#f0f0f0"][style*="height:10px"] > div::before {
    content: attr(data-percent);
    position: absolute;
    right: -25px;
    top: -32px;
    color: #F5661F;
    font-size: 14px;
    font-weight: 800;
    opacity: 0;
    animation: showPercent 0.4s ease-out forwards;
    animation-delay: 1.8s;
}



/* ============================================
   RELATED CAMPAIGNS - SCROLLING ANIMATION
   ============================================ */

/* Border around related cards - logo color */
.related-card {
    border: 2px solid #1E5BC6 !important;
    transition: all 0.3s ease !important;
}

.related-card:hover {
    border-color: #F5661F !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(245, 102, 31, 0.2) !important;
}

/* Marquee container - right to left scroll */
.related-marquee {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    padding: 10px 0 !important;
}



.related-track {
    display: flex !important;
    gap: 20px !important;
    width: max-content !important;
    animation: scrollLeft 30s linear infinite !important;
}

.related-marquee:hover .related-track {
    animation-play-state: paused !important;
}

.related-track > div {
    flex-shrink: 0 !important;
    width: 280px !important;
}

@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Mobile: smaller cards */
@media (max-width: 575px) {
    .related-track > div {
        width: 240px !important;
    }
}

/* ============================================
   RELATED CARDS - IMAGE FIX
   ============================================ */
.related-track > div {
    width: 280px !important;
}

.related-track .related-card {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.related-track .related-card > a:first-child,
.related-track .related-card > div:first-child {
    width: 100% !important;
    display: block !important;
    line-height: 0 !important;
}

.related-track .related-card img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Remove extra bottom space on campaigns index */
.campaign-list-section {
    padding-bottom: 0 !important;
}

@media (max-width: 768px) {
    .related-track > div {
        width: 250px !important;
    }
    .related-track .related-card img {
        height: 150px !important;
    }
}

/* ============================================
   FINAL FIX - Related section mobile
   ============================================ */


/* Remove footer top white space on PC */
footer {
    margin-top: 0 !important;
}

.ul-footer-section,
section.ul-footer,
.footer {
    margin-top: 0 !important;
    padding-top: 60px !important;
}



/* Final fix: prevent extra bottom space below footer */
html {
    height: auto !important;
}
body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
footer.ul-footer,
.ul-footer {
    margin-bottom: 0 !important;
}

/* ============================================
   FIX: No white space below footer when content is short
   ============================================ */
html, body {
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

body > header,
body > .header,
body > .ul-header {
    flex-shrink: 0 !important;
}

body > main,
body > .main-wrapper,
body > .page-wrapper,
body > section,
body > .ul-page-banner ~ section {
    flex: 1 0 auto !important;
}

body > footer,
body > .ul-footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
}