/*====================================================
                    DONATE PAGE — "REACHING LIGHT"

    Shares the visual language introduced on the contact
    page: a short gold ray before every label, a lantern
    glow tucked into card corners, a hairline seam of
    light stitching sections together. The giving tiers
    borrow one extra idea of their own — a pledge-ticket
    top edge, since this is where a gift becomes a promise.
====================================================*/

:root{

    --c-ink:        #05060f;
    --c-indigo:     #0c1024;
    --c-indigo-2:   #131735;

    --c-gold:       #d4af37;
    --c-amber:      #f2c675;

    --c-parchment:  #f6f1e4;
    --c-mist:       #a9aec4;
    --c-mist-dim:   #7d82a0;

    --radius-lg:    28px;
    --radius-md:    18px;

    --ease:         cubic-bezier(.4,0,.2,1);

}

/*==============================
        PAGE BANNER
==============================*/

.page-banner{

    position:relative;

    height:520px;

    background:
        linear-gradient(rgba(5,6,15,.55), rgba(5,6,15,.68)),
        url("../images/banner.jpg") center center/cover no-repeat;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    overflow:hidden;

}

.page-banner::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(31,59,115,.18),
        rgba(212,175,55,.14)
    );

    z-index:1;

}

.page-banner::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:220px;

    background:linear-gradient(
        to bottom,
        rgba(5,6,15,0) 0%,
        rgba(5,6,15,.65) 55%,
        var(--c-ink) 100%
    );

    pointer-events:none;

    z-index:1;

}

.page-banner .container{

    position:relative;

    z-index:2;

}

.page-banner h1{

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

    font-size:66px;

    font-weight:800;

    letter-spacing:-1px;

    color:var(--c-parchment);

    margin-bottom:0;

    text-shadow:0 10px 34px rgba(0,0,0,.65);

}

.page-banner h1::after{

    content:"";

    display:block;

    width:110px;

    height:2px;

    margin:22px auto;

    background:linear-gradient(90deg, transparent, var(--c-gold), transparent);

    border-radius:2px;

}

.page-banner p{

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

    font-size:19px;

    color:var(--c-amber);

    letter-spacing:2.5px;

    font-weight:600;

    text-shadow:0 6px 20px rgba(0,0,0,.6);

}

/*==============================
        COMMON / RHYTHM
==============================*/

.donation-intro,
.plans-section,
.bank-section,
.upi-section,
.contact-donate,
.partner-section{

    position:relative;

    padding:100px 0;

    background:var(--c-ink);

}

.plans-section::before,
.bank-section::before,
.upi-section::before,
.contact-donate::before,
.partner-section::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:min(640px,70%);

    height:1px;

    background:linear-gradient(90deg, transparent, rgba(212,175,55,.55), transparent);

}

/* the ray — precedes every eyebrow label */

.section-subtitle{

    position:relative;

    display:inline-flex;

    align-items:center;

    color:var(--c-amber);

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

    font-size:14px;

    font-weight:700;

    letter-spacing:3.5px;

    text-transform:uppercase;

    margin-bottom:18px;

    padding-left:46px;

}

.section-subtitle::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:34px;

    height:2px;

    background:linear-gradient(90deg, transparent, var(--c-gold));

    border-radius:2px;

}

.section-title{

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

    font-size:44px;

    font-weight:700;

    line-height:1.25;

    letter-spacing:-.5px;

    color:var(--c-parchment);

    margin-bottom:25px;

}

.section-title span{

    background:linear-gradient(90deg, var(--c-gold), var(--c-amber));

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

/*==============================
        LANTERN CARD
==============================*/

.glass-card{

    position:relative;

    background:linear-gradient(165deg, var(--c-indigo-2), var(--c-indigo) 60%);

    border:1px solid rgba(255,255,255,.08);

    border-radius:var(--radius-lg);

    padding:48px;

    overflow:hidden;

    box-shadow:0 25px 50px rgba(0,0,0,.35);

    transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);

}

.glass-card::before{

    content:"";

    position:absolute;

    top:-120px;

    left:-120px;

    width:320px;

    height:320px;

    background:radial-gradient(circle, rgba(212,175,55,.14), transparent 70%);

    pointer-events:none;

}

.glass-card:hover{

    border-color:rgba(212,175,55,.28);

    transform:translateY(-4px);

    box-shadow:0 32px 60px rgba(0,0,0,.45);

}

.glass-card > *{

    position:relative;

    z-index:1;

}

.glass-card p{

    color:var(--c-mist);

    line-height:1.9;

}

/*==============================
        DONATION PLANS — pledge tickets
==============================*/

.plans-section .row{

    position:relative;

    z-index:1;

}

.plan-card{

    position:relative;

    background:linear-gradient(165deg, var(--c-indigo-2), var(--c-indigo) 65%);

    border:1px solid rgba(255,255,255,.08);

    border-radius:var(--radius-md);

    padding:44px 26px 36px;

    text-align:center;

    overflow:hidden;

    height:100%;

    transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);

}

/* a thin gold thread across the top, like a pledge ticket */

.plan-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:3px;

    background:linear-gradient(90deg, transparent, var(--c-gold), transparent);

    opacity:.55;

    transition:opacity .4s var(--ease);

}

.plan-card:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.4);

    box-shadow:0 22px 45px rgba(0,0,0,.35);

}

.plan-card:hover::before{

    opacity:1;

}

.plan-card h3{

    color:var(--c-amber);

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

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.plan-card h2{

    font-size:44px;

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

    font-weight:800;

    margin-bottom:14px;

    background:linear-gradient(90deg, var(--c-gold), var(--c-amber));

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

.plan-card p{

    color:var(--c-mist);

    margin:0;

}

.featured{

    background:linear-gradient(165deg, var(--c-amber), var(--c-gold) 70%);

    border-color:transparent;

    box-shadow:0 25px 55px rgba(212,175,55,.28);

}

.featured::before{

    background:linear-gradient(90deg, transparent, #fff, transparent);

    opacity:.7;

}

.featured::after{

    content:"\f521";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    top:16px;

    right:20px;

    font-size:16px;

    color:rgba(17,15,0,.35);

}

.featured:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(212,175,55,.4);

}

.featured h3,
.featured h2,
.featured p{

    color:#181300;

    -webkit-text-fill-color:#181300;

}

/*==============================
        BANK DETAILS — ledger
==============================*/

.bank-section p{

    margin-bottom:0;

    padding:16px 0;

    color:var(--c-parchment);

    line-height:1.6;

    border-bottom:1px dashed rgba(255,255,255,.1);

}

.bank-section .col-lg-6 p:last-child{

    border-bottom:none;

}

.bank-section strong{

    display:block;

    color:var(--c-amber);

    margin-bottom:6px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

}

/*==============================
        BUTTON — a beam that sweeps through
==============================*/

.gold-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:linear-gradient(90deg, var(--c-gold), var(--c-amber));

    color:#161200;

    padding:17px 38px;

    border-radius:50px;

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

    font-weight:700;

    border:none;

    text-decoration:none;

    overflow:hidden;

    isolation:isolate;

    transition:transform .35s var(--ease), box-shadow .35s var(--ease);

}

.gold-btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);

    transform:translateX(-120%);

    transition:transform .7s var(--ease);

    z-index:-1;

}

.gold-btn:hover{

    color:#161200;

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(212,175,55,.4);

}

.gold-btn:hover::before{

    transform:translateX(120%);

}

.gold-btn:focus-visible{

    outline:2px solid var(--c-gold);

    outline-offset:3px;

}

/*==============================
        QR SECTION
==============================*/

.upi-section .glass-card{

    max-width:560px;

    margin:0 auto;

}

.upi-section p{

    color:var(--c-mist);

    margin-bottom:30px;

}

.modal-content{

    background:linear-gradient(165deg, var(--c-indigo-2), var(--c-indigo) 65%);

    border:1px solid rgba(212,175,55,.25);

    border-radius:var(--radius-lg) !important;

}

.modal-header{

    border-bottom:1px solid rgba(255,255,255,.08) !important;

}

.modal-header h5{

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

    font-weight:700;

}

.modal-body img{

    max-width:280px;

    border-radius:var(--radius-md);

    border:1px solid rgba(212,175,55,.35);

    padding:14px;

    background:#fff;

}

.modal-body p{

    color:var(--c-mist) !important;

}

/*==============================
        CONTACT
==============================*/

.contact-donate h4{

    position:relative;

    color:var(--c-parchment);

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

    font-weight:700;

    margin-bottom:20px;

    padding-left:46px;

}

.contact-donate h4::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:34px;

    height:2px;

    background:linear-gradient(90deg, transparent, var(--c-gold));

}

.contact-donate p{

    color:var(--c-mist);

    line-height:1.9;

}

/*==============================
        THANK YOU — the source of the light
==============================*/

.partner-section{

    padding-bottom:130px;

}

.partner-section .glass-card{

    position:relative;

    text-align:center;

    padding:80px 60px;

    background:var(--c-indigo);

}

.partner-section .glass-card::before{

    width:600px;

    height:600px;

    top:50%;

    left:50%;

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

    background:radial-gradient(circle, rgba(212,175,55,.16), transparent 65%);

}

.partner-section h2{

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

    font-size:42px;

    font-weight:800;

    letter-spacing:-.5px;

    color:var(--c-parchment);

    margin-bottom:20px;

}

.partner-section p{

    max-width:750px;

    margin:0 auto;

    color:var(--c-mist);

    line-height:1.9;

}

/*==============================
        MOTION PREFERENCE
==============================*/

@media (prefers-reduced-motion: reduce){

    .glass-card,
    .plan-card,
    .gold-btn,
    .gold-btn::before{

        transition:none !important;

    }

}

/*==============================
        RESPONSIVE
==============================*/

@media(max-width:992px){

.page-banner{

height:420px;

}

.page-banner::after{

height:160px;

}

.page-banner h1{

font-size:44px;

}

.section-title{

font-size:34px;

}

.glass-card{

padding:36px;

}

.plan-card h2{

font-size:36px;

}

}

@media(max-width:768px){

.page-banner{

height:360px;

}

.page-banner::after{

height:130px;

}

.page-banner h1{

font-size:34px;

}

.page-banner h1::after{

margin:16px auto;

}

.page-banner p{

font-size:14px;

letter-spacing:2px;

}

.donation-intro,
.plans-section,
.bank-section,
.upi-section,
.contact-donate,
.partner-section{

padding:70px 0;

}

.section-title{

font-size:26px;

}

.glass-card{

padding:26px;

border-radius:22px;

}

.plan-card{

padding:34px 20px;

}

.plan-card h2{

font-size:32px;

}

.partner-section h2{

font-size:28px;

}

.gold-btn{

width:100%;

justify-content:center;

}

.modal-body img{

max-width:100%;

}

}