/*---------------------------------------------------
DONORS HERO
---------------------------------------------------*/

.donors-hero{

    position:relative;

    background:
        linear-gradient(rgba(8,35,61,.78),rgba(8,35,61,.82)),
        url("../images/hero.jpg") center center/cover no-repeat;

    padding:140px 0 120px;

    color:#fff;

    overflow:hidden;

}

.donors-hero-content{

    max-width:820px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:2;

}

.hero-badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

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

    backdrop-filter:blur(8px);

    font-weight:600;

    margin-bottom:24px;

}

.donors-hero h1{

    font-size:clamp(2.6rem,5vw,4.5rem);

    line-height:1.1;

    margin-bottom:25px;

    font-weight:800;

}

.donors-hero p{

    max-width:700px;

    margin:auto;

    font-size:18px;

    line-height:1.8;

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

}


.donor-summary{

    margin-top:-70px;

    position:relative;

    z-index:20;

}

.summary-grid{

    display:grid;

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

    gap:24px;

}

.summary-card{

    background:#fff;

    border-radius:18px;

    padding:30px 20px;

    text-align:center;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.3s;

}

.summary-card:hover{

    transform:translateY(-5px);

}

.summary-value{

    font-size:2rem;

    font-weight:800;

    color:#0d6efd;

    margin-bottom:10px;

}

.summary-title{

    color:#666;

    font-size:15px;

}


@media(max-width:992px){

.summary-grid{

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

}

}

@media(max-width:576px){

.summary-grid{

    grid-template-columns:1fr;

}

}


/*-----------------------------------
DONOR LIST
-----------------------------------*/

.donor-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));

    gap:24px;

}

.donor-card{

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.07);

    transition:.3s;

}

.donor-card:hover{

    transform:translateY(-5px);

}

.donor-header{

    display:flex;

    align-items:center;

    gap:18px;

}

.donor-avatar{

    width:58px;

    height:58px;

    border-radius:50%;

    background:#0d6efd;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;

    flex-shrink:0;

}

.donor-details{

    flex:1;

}

.donor-details h4{

    margin:0;

    font-size:18px;

}

.donor-details span{

    color:#6b7280;

    font-size:14px;

}

.donation-amount{

    color:#16a34a;

    font-size:22px;

    font-weight:800;

}

.donor-footer{

    margin-top:18px;

    padding-top:15px;

    border-top:1px solid #ececec;

    color:#6b7280;

    font-size:14px;

}


.empty-donors{

    background:#fff;

    border-radius:20px;

    padding:70px 30px;

    text-align:center;

    box-shadow:0 8px 25px rgba(0,0,0,.06);

}

.empty-icon{

    font-size:60px;

    margin-bottom:20px;

}


.donor-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:35px;

    flex-wrap:wrap;
	
	padding: 15px;

}

.toolbar-left{

    flex:1;

}

.toolbar-left input{

    width:100%;

    height:50px;

    padding:0 18px;

    border:1px solid #d7dce2;

    border-radius:10px;

    font-size:15px;

}

.toolbar-right select{

    height:50px;

    padding:0 18px;

    border:1px solid #d7dce2;

    border-radius:10px;

    background:#fff;

}


.donor-pagination{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:60px;

}

.donor-pagination a{

    padding:12px 18px;

    border-radius:8px;

    background:#fff;

    color:#333;

    text-decoration:none;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

.donor-pagination a.active{

    background:#0d6efd;

    color:#fff;

}


.donor-cta{

    padding:100px 0;

    text-align:center;

    background:linear-gradient(135deg,#0d6efd,#2563eb);

    color:#fff;

    margin-top:100px;

}

.donor-cta h2{

    font-size:42px;

    margin-bottom:20px;

}

.donor-cta p{

    max-width:650px;

    margin:auto;

    opacity:.9;

    margin-bottom:40px;

}


.section-padding{

    padding:10px 15px;

}

.thank-to-contributors{
	text-align: center;
	margin-bottom: 40px;
}