:root {
            --bs-primary: #5d2b97;
            --bs-primary-rgb: 93, 43, 151;
            --accent-color: #D4AF37;
            --bg-light: #f7f6f8;
        }

        body { font-family: 'Manrope', sans-serif; background-color:#fff; }

        .pricetags label{
            border: 1px solid var(--bs-primary);
        }
        /* Icon Helper */
        .svg-icon { width: 24px; height: 24px; fill: currentColor; vertical-align: middle; }
        .text-primary { color: var(--bs-primary) !important; }

        /* Hero Banner */
        /* .hero-banner {
            height: 220px;
            background: linear-gradient(to top, white, transparent), 
                        url(../images/donate.avif);
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: flex-end;
            padding: 2rem;
            border-radius: 20px 20px 0 0;
        } */


 .donation-card {
    border: none !important;
    outline: none !important;
    overflow: hidden; 
    background: #ffffff; /* Matches the form below */
    /* border-radius: 20px; */
    /* Ensure no default Bootstrap shadows are adding lines */
    /* box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05) !important;  */
}

.hero-banner {
    position: relative;
    height: 220px;
    width: 100.2%; /* Slightly wider to over-extend and hide side seams */
    margin-left: -0.1%; 
    margin-bottom: -2px; /* Pulls the form up over the image bottom */
    
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    
    /* THE FIX: Use a Mask to fade the edges instead of just a background gradient */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 25%, black 95%, transparent 100%),
                        linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 0%, black 25%, black 95%, transparent 100%),
                linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;

    background:linear-gradient(85deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../images/banner4.jpg) center / cover no-repeat;
    /* linear-gradient(85deg, #00000000, #0000009c), url(../images/banner4.jpg) center / cover no-repeat; */
     /* linear-gradient(85deg,#000,#000), url('../images/banner4.jpg') center/cover no-repeat; */
    
    /* Fallback for browsers that don't support masks well */
    border: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

        .donation_wrapper{
             background: linear-gradient(to top, #ffffffcc, transparent), url(../images/sylvia_website_bg.webp);
            background-size: cover;
            background-position: center;
        }

        /* Animated Gallery */
        .gallery-container {
            display: grid;
            gap: 15px;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, 150px);
            grid-template-areas: 
                "img1 img1 img2"
                "img1 img1 img3"
                "img4 img5 img5"
                "img6 img5 img5";
        }

        .gallery-item { border-radius: 15px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        .gallery-item img { 
            width: 100%; height: 100%; object-fit: cover; 
            animation: slowPan 15s infinite alternate ease-in-out;
        }

        @keyframes slowPan {
            0% { transform: scale(1) translate(0, 0); }
            100% { transform: scale(1.1) translate(-2%, -2%); }
        }

        .img1 { grid-area: img1; } .img2 { grid-area: img2; } .img3 { grid-area: img3; }
        .img4 { grid-area: img4; } .img5 { grid-area: img5; } .img6 { grid-area: img6; }

        .payment-option-card {
            cursor: pointer;
            border: 2px solid #f0f0f0;
            border-radius: 15px;
            padding: 1.2rem;
            text-align: center;
            transition: all 0.3s ease;
        }
        .btn-check:checked + .payment-option-card { 
            border-color: var(--accent-color); 
            background: #fffdf5;
            transform: translateY(-3px);
        }

        .btn-donate-now {
            background-color: var(--accent-color);
            color: white;
            font-weight: 800;
            border-radius: 50px;
            transition: 0.3s;
        }

        .btn-check{
            display: none;
        }
        .btn-donate-now:hover { background-color: #b8962d; color: white; transform: scale(1.02); }

        
.btn-check:active+.btn, .btn-check:checked+.btn, .btn.active, .btn.show, .btn:active {
    color: var(--accent-color);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-outline-primary{
    /* border: ; */
}

.payment-card {
            cursor: pointer;
            border: 2px solid #eee;
            border-radius: 15px;
            padding: 1rem;
            text-align: center;
            transition: 0.3s;
        }

        form .row{
    gap: 10px 0;

        }



    .donation_wrapper .form-control {
    display: block;
    /* width: 100%; */
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    height: auto;
}

.vl-breadcrumb {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    height: 300px;
    overflow: hidden;
}

.vl-breadcrumb-title {
    padding-top: 108px;
    padding-bottom: 100px;
}

.vl-breadcrumb-title .heading
 {

    font-size: clamp(1.5rem,5vw,3rem);
    line-height: var(--ztc-specing-height90);
    font-family: var(--ztc-family-font2);
    font-weight: var(--ztc-weight-bold);
    padding-top: 24px;
    padding-bottom: 0;
}



.payment-card {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6c757d;
}


.payment-card:hover {
    border-color: #dee2e6;
}


.payment-card.active {
    border-color: #662583; 
    background-color: #f8f9ff;
    color: #662583;
}