.elementor-281 .elementor-element.elementor-element-169ab1b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-281 .elementor-element.elementor-element-8bd5e71  .single-slider::before,.elementor-281 .elementor-element.elementor-element-8bd5e71 .slider__content-2::before{opacity:0.5;}.elementor-281 .elementor-element.elementor-element-7440e36{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-281 .elementor-element.elementor-element-f57bca2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-281 .elementor-element.elementor-element-8a8b767{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-281 .elementor-element.elementor-element-b06d2d1 > .elementor-widget-container{margin:26px 0px 0px 0px;}.elementor-281 .elementor-element.elementor-element-b06d2d1 .bdevs-el-title{font-family:"Agbalumo", Sans-serif;font-size:40px;}.elementor-281 .elementor-element.elementor-element-b06d2d1{text-align:center;}.elementor-281 .elementor-element.elementor-element-fb0d81b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-281 .elementor-element.elementor-element-9854f8e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-281 .elementor-element.elementor-element-a5819c6{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:30px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}.elementor-281 .elementor-element.elementor-element-a5819c6:not(.elementor-motion-effects-element-type-background), .elementor-281 .elementor-element.elementor-element-a5819c6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFEFE;}.elementor-281 .elementor-element.elementor-element-7df8a01{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-281 .elementor-element.elementor-element-7df8a01.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-281 .elementor-element.elementor-element-09132d7 > .elementor-widget-container{margin:12px 0px 0px 0px;}.elementor-281 .elementor-element.elementor-element-09132d7 .bdevs-el-content{padding:0px 0px 0px 0px;}.elementor-281 .elementor-element.elementor-element-09132d7 .bdevs-el-title{color:#000000;font-family:"Agbalumo", Sans-serif;font-size:40px;}.elementor-281 .elementor-element.elementor-element-09132d7{text-align:center;}.elementor-281 .elementor-element.elementor-element-85e38cb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-281 .elementor-element.elementor-element-a03fae0 .elementor-button{background-color:#004AAD;font-family:"Bitter", Sans-serif;font-size:20px;fill:#FFFFFF;color:#FFFFFF;border-style:none;border-radius:5px 5px 5px 5px;padding:15px 40px 15px 40px;}.elementor-281 .elementor-element.elementor-element-a03fae0 .elementor-button:hover, .elementor-281 .elementor-element.elementor-element-a03fae0 .elementor-button:focus{background-color:#1C57A5;color:#FFFFFF;}.elementor-281 .elementor-element.elementor-element-a03fae0{margin:17px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-281 .elementor-element.elementor-element-a03fae0 .elementor-button:hover svg, .elementor-281 .elementor-element.elementor-element-a03fae0 .elementor-button:focus svg{fill:#FFFFFF;}@media(max-width:767px){.elementor-281 .elementor-element.elementor-element-09132d7 .bdevs-el-title{font-size:25px;}.elementor-281 .elementor-element.elementor-element-85e38cb{--margin-top:-40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-281 .elementor-element.elementor-element-a03fae0 .elementor-button{padding:10px 75px 10px 75px;}}@media(min-width:768px){.elementor-281 .elementor-element.elementor-element-7df8a01{--width:62.941%;}.elementor-281 .elementor-element.elementor-element-85e38cb{--width:30%;}}/* Start custom CSS for html, class: .elementor-element-230bbef *//* Google Fonts Import: Cursive Black ko direct use karenge, baki fonts import kar rahe hain */
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Lobster&family=Roboto:wght@400;700&display=swap');


/* .campaign-section-wrapper (Poore Section ka Default Font) */
.campaign-section-wrapper {
    max-width: 1400px;
    margin: 50px auto;
    padding: 0 20px;
    font-family: 'Roboto', sans-serif; /* Default font */
}

/* 1. .featured-title (Featured) ka font Agbalumo ki jagah Cursive Black mein change karein */
.campaign-header .featured-title {
    /* *** YAHAN PAR FONT 'Cursive Black' USE KIYA GAYA HAI *** */
    font-family: 'Cursive Black', cursive !important; 
    font-size: 52px; /* Original value */
    /* *** YAHAN PAR SPACE BADHAYA GAYA HAI *** */
    margin-bottom: 15px; /* Pehle 5px tha, ab 15px kar diya hai (Title aur Sub-title ke beech space) */
    color: #263b5c; /* Original value */
}

/* 2. Card titles (h3) ka font Bitter mein change karein (Previous Request) */
.campaign-card .card-content h3 {
    font-family: 'Bitter', serif !important; 
    font-size: 20px; /* Original value */
    line-height: 1.4; /* Original value */
    color: #222; /* Original value */
    margin-bottom: 20px; /* Original value */
    margin-top: 0; /* Original value */
    font-weight: 700; /* Original value */
}

/* 3. Donate Button ka font Bitter mein change karein (Current Request) */
.donate-btn {
    font-family: 'Bitter', serif !important; /* Bitter Font */
    
    display: block;
    background-color: #2563eb;
    color: #ffffff !important;
    padding: 12px 25px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    width: fit-content;
    transition: background 0.3s ease;
}

.donate-btn:hover {
    background-color: #1d4ed8;
}


/* --- Baaki Ke Styles Jyon Ke Tyon --- */

/* Header Styling */
.campaign-header {
    text-align: center;
    margin-bottom: 40px;
}

.featured-sub {
    font-size: 18px;
    color: #333;
    font-weight: 500;
}

/* Grid Layout */
.campaign-grid {
    display: flex;
    justify-content: center; 
    gap: 30px;
    flex-wrap: wrap;
}

/* Card Styling */
.campaign-card {
    flex: 1;
    min-width: 320px;
    max-width: 460px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s ease;
}

.campaign-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Image Styling */
.card-image {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.card-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* Hover Zoom Effect */
.campaign-card:hover .card-image img {
    transform: scale(1.08);
}

/* Content Styling */
.card-content {
    padding: 25px; 
    display: flex;
    flex-direction: column;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .campaign-grid {
        flex-direction: column;
        align-items: center;
    }
    .campaign-card {
        width: 100%;
        max-width: 100%;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1438dc1 *//* --- FONTS IMPORT (SABSE PEHLE) --- */
/* Cursive Black ko direct use karenge. Bitter aur Open Sans import kar rahe hain. */
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Open+Sans:wght@400;700&display=swap');


/* Main Section Styling */
.navhope-donation-banner {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://navhope.com/wp-content/uploads/2025/12/Untitled-design-30.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 20px;
    text-align: center;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 1. Heading: Give Every Month - Cursive Black Font Applied */
.navhope-title {
    /* *** FONT CHANGE: Cursive Black *** */
    font-family: 'Cursive Black', cursive !important; 
    font-size: 3.5rem;
    margin: 0 0 10px 0; /* Space kam rakha hai kyunki subtitle ab nahi hoga */
    line-height: 1.2;
    color: #ffffff !important; 
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* 2. Subheading: DONATE MONTHLY ko CSS se hide karna */
.navhope-subtitle {
    display: none !important; /* Isse "Donate Monthly" subtitle chhip jaayega */
    /* Agar aap HTML se remove kar dete hain to is rule ki zarurat nahi hai */
}

/* Paragraph Text */
.navhope-desc {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 700px;
    margin-bottom: 30px;
    color: #e0e0e0;
}

/* Red Button Styling - Bitter Font Applied */
.navhope-btn {
    font-family: 'Bitter', serif !important; /* Bitter Font */
    background-color: #004AAD;
    color: white !important;
    text-decoration: none;
    padding: 12px 30px;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease;
}

.navhope-btn:hover {
    background-color: #1a539f;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .navhope-title {
        font-size: 2.5rem;
    }
    .navhope-donation-banner {
        padding: 60px 15px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-90c39c7 *//* --- FONTS IMPORT (SABSE PEHLE) --- */
/* Cursive Black ko direct use karenge. Koi dusra font import nahi kar rahe hain. */
/* Agar aapko koi aur font chahiye toh uska import yahan daal sakte hain. */


/* --- Testimonial Section Styles (Final) --- */

.truehope-testimonial-final {
    /* Background Image from your link */
    background: url('https://navhope.com/wp-content/uploads/2025/12/Untitled-design-27.png') no-repeat center center; 
    background-size: cover; 
    background-attachment: fixed;
    
    padding: 80px 0; 
    font-family: Arial, sans-serif;
    position: relative;
    overflow: hidden; 
}

/* Dark Overlay */
.truehope-testimonial-final::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); 
    z-index: 1;
}

.truehope-testimonial-final > * {
    position: relative;
    z-index: 2;
    color: #ffffff; 
}

/* Header Styling */
.thf-header-final {
    max-width: 1400px; /* Aligns with new slider width */
    margin: 0 auto;
    text-align: center;
    padding: 0 40px;
}

/* 1. Title (h1) ka font Cursive Black mein change karein */
.thf-header-final h1 {
    /* *** FONT CHANGE: 'Cursive Black' *** */
    font-family: 'Cursive Black', cursive !important; 
    
    font-size: 2.8em;
    font-weight: 500;
    color: #ffffff; 
    margin-bottom: 50px; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

/* Slider Container - Increased Max-Width */
.thf-slider-container-final {
    position: relative;
    max-width: 1400px; /* INCREASED WIDTH */
    margin: 0 auto;
    overflow: hidden; 
    padding: 0 40px; 
}

/* Testimonial Track */
.thf-testimonial-track-final {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    padding: 20px 0;
}

/* Testimonial Card Styling - Adjusted Width for 3 Cards */
.thf-testimonial-card-final {
    /* 3 cards per view on desktop: (100% / 3) - margin compensation */
    flex: 0 0 calc(33.333% - 14px); 
    background: #000000; 
    color: #f0f0f0;
    padding: 40px 25px;
    border-radius: 0; 
    margin-right: 20px; 
    text-align: left;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.thf-donor-info-final {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.thf-user-icon-final {
    background: #fff;
    color: #3498db; 
    padding: 12px;
    border-radius: 3px;
    font-size: 1.5em;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
}

.thf-donor-name-final {
    font-weight: 600;
    color: #A5D6A7; 
    font-size: 1.2em;
}

.thf-testimonial-card-final p {
    font-style: italic;
    line-height: 1.7;
    font-size: 1.05em;
    color: #ccc;
}


/* Navigation Arrows */
.thf-slider-arrow-final {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #E53935; 
    color: white;
    border: none;
    cursor: pointer;
    z-index: 10;
    font-size: 1.5em;
    line-height: 1;
    transition: background 0.3s;
    width: 35px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thf-slider-arrow-final:hover {
    background: #cc0000;
}

.prev-arrow {
    left: 0; 
}

.next-arrow {
    right: 0;
}


/* --- Responsive Adjustments --- */

/* Tablet (2 cards per view) */
@media (max-width: 1023px) {
    .thf-testimonial-card-final {
        flex: 0 0 calc(50% - 10px); 
    }
    .thf-slider-container-final {
         max-width: 720px; /* Reduced width for smaller screens */
         padding: 0 20px;
    }
    .thf-header-final {
        max-width: 720px;
        padding: 0 20px;
    }
}

/* Mobile (1 card per view) */
@media (max-width: 767px) {
    .thf-header-final h1 {
        font-size: 1.6em;
    }
    .thf-testimonial-card-final {
        flex: 0 0 calc(100% - 20px); 
    }
    .thf-slider-container-final {
        max-width: 95%;
    }
}/* End custom CSS */