/*********************************************
 * GLOBAL TYPOGRAPHY & BASE
 *********************************************/
html,body {
    overflow-x: hidden !important;
    font-family: 'Duplet', sans-serif !important;
}

.title, .sub-title, .enabler-section-title.text-center,
.helping-ways-link.text-decoration-none.pointer,
#email, .donation-count-number, .donation-count-children,
a.campaign-button-text.text-uppercase.btn,
.testimonials-head-span, .testimonials-head {
    font-family: 'Duplet', sans-serif !important;
}



/*********************************************
 * DONATION WRAPPER & CONTAINER
 *********************************************/
 
 .donation-title {
                font-size: 24px !important;
                font-family: 'Duplet', sans-serif !important;
                font-weight: 600;
                color: #000000 !important;
                line-height: 30px;
                padding: 15px 20px 0;
                text-align: center !important;
            }
            
.donation-wrapper.position-relative {
    padding-top: 20px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.donation-wrapper .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0px !important;
}

.donation-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 10%;
}

.padformat {
    padding: 20px !important;
}

/*********************************************
 * SLIDESHOW (MODERN ASPECT RATIO VERSION)
 *********************************************/

/* Desktop slideshow (default) */
.slideshow {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;     /* consistent ratio across screens */
    overflow: hidden;
    display: block;
    z-index: 0;
}

/* Mobile slideshow (hidden by default) */
.mobile-slideshow {
    display: none;
}

/* Slides */
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: fade 12s infinite;
    background-repeat: no-repeat;
}

/* Fade sequence */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 4s; }
.slide:nth-child(3) { animation-delay: 8s; }

@keyframes fade {
    0% { opacity: 0; }
    10% { opacity: 1; }
    33% { opacity: 1; }
    43% { opacity: 0; }
    100% { opacity: 0; }
}

/*********************************************
 * DONATION CONTENT BLOCK
 *********************************************/
.donation-content {
    position: absolute;
    inset: 0;                 /* replaces top/left */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 2;
    padding: 0;
}

/*********************************************
 * RESPONSIVE — TABLETS & MOBILE
 *********************************************/
@media (min-width: 901px) and (max-width: 1200px)  {
    /* Switch to mobile banners */
    .slideshow {
        display: none !important;
    }
    .mobile-slideshow {
        display: block !important;
        aspect-ratio: 4 / 5;
        max-height: 600px;
    }

    /* Bring form below sliders */
    .donation-content {
        position: static !important;
        height: auto !important;
        padding: 20px 0 !important;
        background: #fff;
    }

    /* Ensure mobile images never crop */
    .slideshow .slide,
    .mobile-slideshow .slide {
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    
    .campaign-donation-section
    {
        padding:0px !important;
    }
    
    .row.campaign-donation-section.padformat {
        margin: 10px;
    }
    
     .campaign-donation-section .col-md-7,
    .campaign-donation-section .col-md-5 {
        width: 100% !important;
        max-width: 100% !important;
    }

    .campaign-donation-section {
        flex-direction: column !important;
    }
    
    .donation-section
    {
        padding: 0px !important;
        margin-top: 0px !important;
    }
    
}

@media (min-width: 600px) and (max-width: 900px)  {
    .mobile-slideshow {
        display: block !important;
        aspect-ratio: 3 / 4;
        max-height: 600px !important;
    }
    .donation-section
    {
        margin-top: 0% !important;
    }
    .row.campaign-donation-section.padformat {
        margin: 10px;
    }
}

/*********************************************
 * ULTRA-WIDE SCREENS (1600px+)
 *********************************************/
@media (min-width: 1600px) {
    .slideshow {
        aspect-ratio: 14/8;        /* slightly taller for wide monitors */
    }

    .slide {
        background-size: contain !important;
    }

    .donation-wrapper.position-relative {
       /* max-width: 1400px;*/
        margin: 0 auto;
    }
}

@media (min-width: 1800px) {
    .slideshow {
        aspect-ratio: 14 / 8;
    }
}

@media (min-width: 2000px) {
    .slideshow {
        aspect-ratio: 14 / 7;
    }
}

@media (min-width: 2400px) {
    .slideshow {
        aspect-ratio: 14 / 7;
    }
}

/*********************************************
 * MID-SCREENS TWEAKS
 *********************************************/
/*@media (max-width: 1600px) {
    .donation-content {
        padding-top: 4%;
    }
}

@media (max-width: 1400px) {
    .donation-content {
        padding-top: 2%;
    }
}*/

/*********************************************
 * MOBILE (≤900px): FINAL OVERRIDE
 *********************************************/
@media (max-width: 900px) {

    .slideshow {
        display: none !important;
    }

    .mobile-slideshow {
        display: block !important;
        aspect-ratio: 3 / 4;
        max-height: 240px;
    }

    .slide {
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    .donation-content {
        position: static !important;
        padding: 1rem 0;
        background: #fff;
    }
    .campaign-donation-section
    {
        padding:0px !important;
    }
    .donation-section
    {
        padding: 0px !important;
        margin-top: 0px !important;
    }
    
     .campaign-donation-section .col-md-7,
    .campaign-donation-section .col-md-5 {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .row.campaign-donation-section.padformat {
    margin: 0px;
}
}

/*-------------------------*/
.helping-ways-bg::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            
            background-size: cover;
            background-position: center;
            opacity: 0.6;
            z-index: 0;
        }
        .enabler-section-bg{
            border-radius: 8px;
            border: none;
            
            opacity: 1;
            background-size: cover;
            background-position: center;
            padding: 30px;
            position: relative;
            overflow: hidden;
        }
        .enabler-section-overlay {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('https://donate.enablingleadership.org/images/enabler-section-bg.jpeg');
            background-size: cover;
            background-position: center;
            filter: grayscale(100%);
            z-index: 1;
        }
        .hear-enablers-bg{
            border: none;
            background-image: url('https://donate.enablingleadership.org/images/home-testimonial.jpg');
            opacity: 1;
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
        }
        .my-campaign-section-width{
            max-width: 85% !important;
        }
        .my-campaign-section_1{
            padding:3% 0px;
        }
        
        /* ULTRA-WIDE SCREENS — LIMIT PAGE WIDTH */
@media (min-width: 1921px) {
    .donation-wrapper.position-relative {
        max-width: 1800px !important;
        margin: 0 auto !important;
    }

    .donation-content {
        max-width: 1800px !important;
        margin: 0 auto !important;
    }
}

/* SUPER ULTRA-WIDE (5K–8K) */
@media (min-width: 4800px) {
    .donation-wrapper.position-relative,
    .donation-content {
        max-width: 2200px !important;
        margin: 0 auto !important;
    }

    .slideshow {
        max-width: 1800px !important;
        margin: 0 auto !important;
        aspect-ratio: 14 / 8 !important;
    }
}

@media (min-width: 1921px) {
    .slide {
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}

@media (min-width: 1921px) {
    .donation-bg {
        max-width: 500px !important;
    }
}