/*=========================================================
    DONATE PAGE
=========================================================*/


/*=========================================================
    HERO
=========================================================*/

.donate-hero{

    position:relative;

    min-height:470px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #082342 0%,
            #0b4da1 55%,
            #2f6df6 100%
        );

}


.donate-hero-overlay{

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(47,109,246,.25),
            transparent 35%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(255,193,7,.12),
            transparent 35%
        );

}


.donate-hero > .container{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:0 20px;

}


.donate-hero-content{

    max-width:850px;

    margin:auto;

    padding:75px 20px 60px;

    text-align:center;

    color:#fff;

}


.donate-tag,
.donate-section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:9px 20px;

    border-radius:50px;

    font-size:12px;

    font-weight:800;

    letter-spacing:1px;

}


.donate-tag{

    background:rgba(255,255,255,.14);

    color:#ffc107;

}


.donate-hero h1{

    margin:25px auto 20px;

    color:#fff;

    font-size:56px;

    line-height:1.2;

    font-weight:800;

}


.donate-hero p{

    max-width:750px;

    margin:0 auto;

    color:rgba(255,255,255,.9);

    font-size:18px;

    line-height:1.9;

}


.donate-breadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:0px;

    font-size:14px;

    font-weight:600;

}


.donate-breadcrumb a{

    color:#ffc107;

    text-decoration:none;

}


.donate-breadcrumb span{

    color:#fff;

}


/*=========================================================
    GENERAL
=========================================================*/

.donate-intro,
.donate-bank-section,
.how-to-donate,
.donation-impact,
.donate-cta{

    position:relative;

}


.donate-intro .container,
.donate-bank-section .container,
.how-to-donate .container,
.donation-impact .container,
.donate-cta .container{

    width:100%;

    max-width:1250px;

    margin:auto;

    padding:0 20px;

}


.donate-section-tag{

    background:#eef4ff;

    color:#2f6df6;

}


.section-heading{

    max-width:750px;

    margin:0 auto 55px;

    text-align:center;

}


.section-heading h2{

    margin:18px 0;

    color:#12355b;

    font-size:42px;

    line-height:1.25;

    font-weight:800;

}


.section-heading p{

    margin:0;

    color:#68768b;

    font-size:17px;

    line-height:1.8;

}


/*=========================================================
    INTRODUCTION
=========================================================*/

.donate-intro{

    padding:95px 0 85px;

    background:#fff;

}


.donate-intro-content{

    max-width:850px;

    margin:auto;

    text-align:center;

}


.donate-intro-content h2{

    margin:18px 0 20px;

    color:#12355b;

    font-size:42px;

    font-weight:800;

}


.donate-intro-content p{

    max-width:800px;

    margin:0 auto 18px;

    color:#68768b;

    font-size:17px;

    line-height:1.9;

}


/*=========================================================
    BANK TRANSFER
=========================================================*/

.donate-bank-section{

    padding:95px 0 105px;

    background:#f7faff;

}


.donate-bank-layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:55px;

    align-items:center;

}


.donate-bank-content h2{

    margin:18px 0 20px;

    color:#12355b;

    font-size:44px;

    font-weight:800;

}


.donate-bank-content p{

    margin:0 0 20px;

    color:#68768b;

    font-size:17px;

    line-height:1.9;

}


.donate-trust-note{

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:30px;

    padding:18px 20px;

    border-radius:15px;

    background:#fff;

    border:1px solid #e7edf5;

    color:#12355b;

    font-size:14px;

    line-height:1.6;

}


.donate-trust-note i{

    color:#2f6df6;

    font-size:22px;

}


/* Bank card */

.bank-details-card{

    padding:35px;

    background:#fff;

    border:1px solid #e6edf5;

    border-radius:28px;

    box-shadow:0 20px 60px rgba(17,62,120,.1);

}


.bank-card-header{

    display:flex;

    align-items:center;

    gap:18px;

    padding-bottom:25px;

    margin-bottom:5px;

    border-bottom:1px solid #edf2f7;

}


.bank-icon{

    width:60px;

    height:60px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:linear-gradient(135deg,#2f6df6,#0b4da1);

    color:#fff;

    font-size:24px;

}


.bank-card-header span{

    display:block;

    margin-bottom:4px;

    color:#2f6df6;

    font-size:10px;

    font-weight:800;

    letter-spacing:1px;

}


.bank-card-header h3{

    margin:0;

    color:#12355b;

    font-size:22px;

}


.bank-detail-row{

    padding:20px 0;

    border-bottom:1px solid #edf2f7;

}


.bank-detail-row:last-child{

    border-bottom:0;

}


.bank-detail-row > span{

    display:block;

    margin-bottom:7px;

    color:#7a8798;

    font-size:13px;

}


.bank-detail-row strong{

    color:#12355b;

    font-size:17px;

}


.account-number{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}


.copy-account-btn{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:8px 14px;

    border:0;

    border-radius:8px;

    background:#eef4ff;

    color:#2f6df6;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

    transition:.3s ease;

}


.copy-account-btn:hover{

    background:#2f6df6;

    color:#fff;

}


/*=========================================================
    HOW TO DONATE
=========================================================*/

.how-to-donate{

    padding:100px 0;

    background:#fff;

}


.donation-steps{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}


.donation-step{

    position:relative;

    padding:40px 30px;

    text-align:center;

    border:1px solid #e8eef5;

    border-radius:25px;

    background:#fff;

    box-shadow:0 15px 45px rgba(17,62,120,.06);

    transition:.35s ease;

}


.donation-step:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(17,62,120,.12);

}


.step-number{

    position:absolute;

    top:18px;

    right:20px;

    color:#dce7f7;

    font-size:30px;

    font-weight:800;

}


.step-icon{

    width:75px;

    height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 22px;

    border-radius:50%;

    background:linear-gradient(135deg,#2f6df6,#0b4da1);

    color:#fff;

    font-size:27px;

}


.donation-step h3{

    margin:0 0 12px;

    color:#12355b;

    font-size:22px;

}


.donation-step p{

    margin:0;

    color:#68768b;

    font-size:15px;

    line-height:1.8;

}


/*=========================================================
    IMPACT
=========================================================*/

.donation-impact{

    padding:100px 0;

    background:#f7faff;

}


.impact-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}


.impact-card{

    padding:35px 25px;

    text-align:center;

    background:#fff;

    border:1px solid #e8eef5;

    border-radius:23px;

    box-shadow:0 12px 35px rgba(17,62,120,.06);

    transition:.35s ease;

}


.impact-card:hover{

    transform:translateY(-7px);

}


.impact-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    border-radius:50%;

    background:#eef4ff;

    color:#2f6df6;

    font-size:25px;

}


.impact-card h3{

    margin:0 0 12px;

    color:#12355b;

    font-size:20px;

}


.impact-card p{

    margin:0;

    color:#68768b;

    font-size:15px;

    line-height:1.8;

}


/*=========================================================
    CTA
=========================================================*/

.donate-cta{

    padding:90px 0 100px;

    background:#fff;

}


.donate-cta-wrapper{

    padding:80px 50px;

    border-radius:35px;

    text-align:center;

    background:linear-gradient(135deg,#0b4da1,#2f6df6);

    box-shadow:0 25px 65px rgba(17,62,120,.15);

}


.donate-cta-wrapper .donate-tag{

    background:rgba(255,255,255,.14);

    color:#ffc107;

}


.donate-cta-wrapper h2{

    max-width:800px;

    margin:22px auto 18px;

    color:#fff;

    font-size:46px;

    line-height:1.25;

    font-weight:800;

}


.donate-cta-wrapper p{

    max-width:700px;

    margin:0 auto 35px;

    color:rgba(255,255,255,.9);

    font-size:17px;

    line-height:1.9;

}


.donate-contact-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:58px;

    padding:0 32px;

    border-radius:50px;

    background:#ffc107;

    color:#12355b;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    transition:.35s ease;

}


.donate-contact-btn:hover{

    transform:translateY(-4px);

}


/*=========================================================
    TABLET
=========================================================*/

@media(max-width:991px){

    .donate-hero h1{

        font-size:46px;

    }


    .donate-bank-layout{

        grid-template-columns:1fr;

        gap:40px;

    }


    .donation-steps{

        grid-template-columns:1fr;

    }


    .impact-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


/*=========================================================
    MOBILE
=========================================================*/

@media(max-width:768px){

    .donate-hero{

        min-height:420px;

    }


    .donate-hero-content{

        padding:50px 10px;

    }


    .donate-hero h1{

        font-size:34px;

    }


    .donate-hero p{

        font-size:16px;

    }


    .donate-intro,
    .donate-bank-section,
    .how-to-donate,
    .donation-impact{

        padding:70px 0;

    }


    .donate-intro-content h2,
    .donate-bank-content h2{

        font-size:32px;

    }


    .section-heading h2{

        font-size:32px;

    }


    .donate-bank-section .container,
    .donate-intro .container,
    .how-to-donate .container,
    .donation-impact .container,
    .donate-cta .container{

        padding:0 15px;

    }


    .bank-details-card{

        padding:25px 20px;

    }


    .account-number{

        align-items:flex-start;

        flex-direction:column;

    }


    .impact-grid{

        grid-template-columns:1fr;

    }


    .donate-cta{

        padding:60px 0 70px;

    }


    .donate-cta-wrapper{

        padding:60px 25px;

        border-radius:25px;

    }


    .donate-cta-wrapper h2{

        font-size:32px;

    }

}
/*=========================================================
    DONATION CONFIRMATION
=========================================================*/

.donation-confirmation{

    padding:100px 0;

    background:#ffffff;

}


.donation-confirmation .container{

    width:100%;

    max-width:1100px;

    margin:auto;

    padding:0 20px;

}


.donation-confirmation-wrapper{

    padding:55px;

    border:1px solid #e5ebf3;

    border-radius:30px;

    background:#ffffff;

    box-shadow:0 20px 60px rgba(17,62,120,.08);

}


/* Intro */

.donation-confirmation-intro{

    max-width:750px;

    margin:0 auto 45px;

    text-align:center;

}


.donation-confirmation-intro h2{

    margin:18px 0;

    color:#12355b;

    font-size:40px;

    font-weight:800;

}


.donation-confirmation-intro p{

    margin:0;

    color:#68768b;

    font-size:17px;

    line-height:1.9;

}


/* Information note */

.confirmation-note{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:25px;

    padding:16px 20px;

    border-radius:12px;

    background:#f2f6ff;

    color:#12355b;

    font-size:14px;

    line-height:1.6;

    text-align:left;

}


.confirmation-note i{

    color:#2f6df6;

    font-size:20px;

}


/* Form */

.donation-confirmation-form{

    width:100%;

}


.donation-form-row{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin-bottom:20px;

}


.donation-form-group{

    display:flex;

    flex-direction:column;

    margin-bottom:20px;

}


.donation-form-group label{

    margin-bottom:9px;

    color:#12355b;

    font-size:14px;

    font-weight:700;

}


.donation-form-group input{

    width:100%;

    min-height:54px;

    padding:0 16px;

    box-sizing:border-box;

    border:1px solid #d8e1ed;

    border-radius:12px;

    background:#ffffff;

    color:#12355b;

    font-size:15px;

    outline:none;

    transition:.3s ease;

}


.donation-form-group input:focus{

    border-color:#2f6df6;

    box-shadow:0 0 0 4px rgba(47,109,246,.08);

}


.donation-form-group input[type="file"]{

    height:auto;

    padding:14px;

    cursor:pointer;

}


.donation-form-group small{

    margin-top:7px;

    color:#7b8797;

    font-size:12px;

}


.optional{

    color:#8995a5;

    font-weight:400;

}


/* Public display option */

.donor-public-option{

    margin:5px 0 25px;

    padding:17px 20px;

    border-radius:12px;

    background:#f8fbff;

    border:1px solid #e8eef5;

}


.donor-public-option label{

    display:flex;

    align-items:flex-start;

    gap:10px;

    color:#68768b;

    font-size:14px;

    line-height:1.6;

    cursor:pointer;

}


.donor-public-option input{

    width:17px;

    height:17px;

    margin-top:2px;

    accent-color:#2f6df6;

}


/* Submit */

.donation-submit-btn{

    width:100%;

    min-height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border:0;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #0b4da1,
        #2f6df6
    );

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.35s ease;

}


.donation-submit-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(47,109,246,.22);

}


/*=========================================================
    MOBILE
=========================================================*/

@media(max-width:768px){

    .donation-confirmation{

        padding:70px 0;

    }


    .donation-confirmation .container{

        padding:0 15px;

    }


    .donation-confirmation-wrapper{

        padding:35px 20px;

        border-radius:22px;

    }


    .donation-confirmation-intro h2{

        font-size:30px;

    }


    .donation-confirmation-intro p{

        font-size:15px;

    }


    .donation-form-row{

        grid-template-columns:1fr;

        gap:0;

        margin-bottom:0;

    }


    .confirmation-note{

        align-items:flex-start;

    }

}