/*====================================
CHOOSE YOUR CAUSE
====================================*/

.donate-causes {
  padding: 40px 0 30px;

  background: #f8fbff;
}

.mini-cause-card {
  position: relative;

  display: flex;

  align-items: center;

  gap: 18px;

  background: #fff;

  border: 2px solid transparent;

  border-radius: 18px;

  padding: 18px;

  cursor: pointer;

  transition: 0.35s;

  height: 100%;

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

  overflow: hidden;
}

.mini-cause-card::before {
  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 4px;

  height: 100%;

  background: var(--primary);

  transform: scaleY(0);

  transition: 0.35s;
}

.mini-cause-card:hover {
  transform: translateY(-5px);

  border-color: var(--primary);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.mini-cause-card.active {
  border-color: var(--primary);

  background: #eef5ff;
}

.mini-cause-card.active::before {
  transform: scaleY(1);
}

/*==========================
ICON
==========================*/

.mini-icon {
  width: 60px;

  height: 60px;

  border-radius: 50%;

  background: rgba(11, 61, 145, 0.08);

  color: var(--primary);

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 26px;

  flex-shrink: 0;

  transition: 0.35s;
}

.mini-cause-card:hover .mini-icon,
.mini-cause-card.active .mini-icon {
  background: var(--primary);

  color: #fff;

  transform: rotateY(180deg);
}

/*==========================
CONTENT
==========================*/

.mini-content {
  flex: 1;
}

.mini-content h5 {
  margin-bottom: 10px;

  font-size: 18px;

  font-weight: 700;

  color: var(--dark);
}

.mini-content small {
  color: #6b7280;

  font-size: 13px;
}

.mini-content .progress {
  height: 6px;

  margin-bottom: 8px;

  background: #e5e7eb;

  border-radius: 30px;

  overflow: hidden;
}

.mini-content .progress-bar {
  background: linear-gradient(90deg, var(--accent), var(--accent));
}

/*==========================
CHECK BADGE
==========================*/

.selected-badge {
  position: absolute;

  top: 12px;

  right: 12px;

  width: 28px;

  height: 28px;

  border-radius: 50%;

  background: #22c55e;

  color: #fff;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 14px;

  opacity: 0;

  transform: scale(0.5);

  transition: 0.35s;
}

.mini-cause-card.active .selected-badge {
  opacity: 1;

  transform: scale(1);
}

/*==========================
SELECTED MESSAGE
==========================*/

.selected-cause-message {
  display: none;

  align-items: center;

  justify-content: center;

  gap: 12px;

  background: #ecfdf5;

  color: #166534;

  border: 1px solid #bbf7d0;

  padding: 15px 20px;

  border-radius: 14px;

  margin-bottom: 30px;

  font-weight: 600;
}

.selected-cause-message i {
  font-size: 22px;
}

.selected-cause-message.show {
  display: flex;

  animation: fadeDown 0.5s;
}

@keyframes fadeDown {
  from {
    opacity: 0;

    transform: translateY(-15px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/*==========================
FORM GLOW
==========================*/

.donation-wrapper.focus {
  animation: formGlow 1.2s ease;
}

@keyframes formGlow {
  0% {
    box-shadow: 0 0 0 rgba(11, 61, 145, 0);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(11, 61, 145, 0.18);
  }

  100% {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
  }
}

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

@media (max-width: 991px) {
  .mini-cause-card {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .donate-causes {
    padding: 60px 0 20px;
  }

  .mini-cause-card {
    gap: 14px;

    padding: 15px;
  }

  .mini-icon {
    width: 50px;

    height: 50px;

    font-size: 22px;
  }

  .mini-content h5 {
    font-size: 16px;
  }

  .selected-cause-message {
    padding: 14px;

    font-size: 14px;

    text-align: center;
  }
}

/*====================================
DONATION PORTAL - FORM (PART 1)
====================================*/

.donation-form-section{

    padding:90px 0;

    background:#f8fbff;

}

.donation-wrapper{

    background:#fff;

    border-radius:24px;

    padding:40px;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

    border:1px solid rgba(11,61,145,.08);

}

/*====================
Selected Cause
====================*/

.selected-cause-message{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 18px;

    background:#ecfdf5;

    color:#166534;

    border:1px solid #bbf7d0;

    border-radius:12px;

    margin-bottom:30px;

    font-weight:600;

}

.selected-cause-message i{

    font-size:22px;

}

/*====================
Labels
====================*/

.form-label{

    font-weight:600;

    margin-bottom:8px;

    color:#222;

}

/*====================
Inputs
====================*/

.form-control,

.form-select{

    height:56px;

    border-radius:14px;

    border:1px solid #dbe3ee;

    padding:0 18px;

    transition:.3s;

    background:#fff;

}

textarea.form-control{

    height:auto;

    padding:15px;

}

.form-control:focus,

.form-select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(11,61,145,.08);

}

/*====================
Donation Type
====================*/

.donation-type{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.type-btn{

    flex:1;

    border:none;

    padding:15px;

    border-radius:50px;

    background:#eef5ff;

    color:#444;

    font-weight:600;

    transition:.35s;

}

.type-btn:hover{

    background:#dceaff;

}

.type-btn.active{

    background:linear-gradient(90deg,var(--primary),#2b66d5);

    color:#fff;

}

/*====================
Amount Buttons
====================*/

.amount-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.amount-btn{

    border:none;

    padding:12px 22px;

    border-radius:50px;

    background:#eef5ff;

    color:#333;

    font-weight:600;

    transition:.3s;

}

.amount-btn:hover{

    background:#dceaff;

}

.amount-btn.active{

    background:var(--accent);

    color:#fff;

}

/*====================
Payment Note
====================*/

.payment-note{

    margin-top:20px;

    padding:18px;

    background:#fff8ea;

    border-left:5px solid var(--accent);

    border-radius:12px;

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:#555;

    line-height:1.7;

}

.payment-note i{

    color:var(--accent);

    font-size:22px;

}

/*====================
Checkbox
====================*/

.form-check{

    background:#f8fbff;

    padding:16px 18px;

    border-radius:12px;

}

.form-check-input{

    cursor:pointer;

}

.form-check-label{

    cursor:pointer;

    font-weight:500;

}

/*====================
Submit Button
====================*/

.donate-submit-btn{

    width:100%;

    border:none;

    border-radius:50px;

    padding:18px;

    background:linear-gradient(90deg,var(--primary),#2c66d5);

    color:#fff;

    font-size:18px;

    font-weight:700;

    transition:.35s;

}

.donate-submit-btn:hover{

    background:linear-gradient(90deg,var(--accent),#ff9800);

    transform:translateY(-2px);

}

/*====================
Animation
====================*/

#monthlyFields,

#oneTimeFields{

    transition:.35s;

}

/*====================
Responsive
====================*/

@media(max-width:991px){

.donation-wrapper{

    padding:30px;

}

}

@media(max-width:768px){

.donation-form-section{

    padding:70px 0;

}

.donation-wrapper{

    padding:22px;

}

.donation-type{

    flex-direction:column;

}

.type-btn{

    width:100%;

}

.amount-buttons{

    gap:10px;

}

.amount-btn{

    flex:1 1 calc(50% - 10px);

    text-align:center;

}

.selected-cause-message{

    font-size:14px;

}

.payment-note{

    font-size:14px;

}

.donate-submit-btn{

    font-size:16px;

}

}

/*====================================
RWF DONATION PORTAL
PART 1
====================================*/

.rwf-donate-section{

    padding:100px 0;

    background:#f8fbff;

}

/*=============================
LEFT FORM CARD
=============================*/

.rwf-form-card{

    background:#fff;

    border-radius:24px;

    padding:40px;

    box-shadow:0 15px 50px rgba(0,0,0,.08);

    border:1px solid rgba(11,61,145,.08);

}

/*=============================
Selected Cause
=============================*/

.rwf-selected-cause{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 20px;

    background:#ecfdf5;

    border:1px solid #bbf7d0;

    color:#166534;

    border-radius:14px;

    margin-bottom:35px;

    font-weight:600;

}

.rwf-selected-cause i{

    font-size:22px;

}

/*=============================
FORM GROUP
=============================*/

.rwf-group{

    margin-bottom:25px;

}

.rwf-group label{

    display:block;

    font-weight:600;

    margin-bottom:10px;

    color:#222;

}

/*=============================
INPUTS
=============================*/

.rwf-form-card .form-control,

.rwf-form-card .form-select{

    height:56px;

    border-radius:14px;

    border:1px solid #dbe3ee;

    padding:0 18px;

    transition:.3s;

}

.rwf-form-card textarea.form-control{

    height:120px;

    padding:15px;

    resize:none;

}

.rwf-form-card .form-control:focus,

.rwf-form-card .form-select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(11,61,145,.08);

}

/*=============================
TYPE BUTTONS
=============================*/

.rwf-type-buttons{

    display:flex;

    gap:15px;

}

.rwf-type-btn{

    flex:1;

    border:none;

    padding:15px;

    border-radius:50px;

    background:#eef5ff;

    color:#333;

    font-weight:600;

    transition:.35s;

}

.rwf-type-btn:hover{

    background:#d9e9ff;

}

.rwf-type-btn.active{

    background:linear-gradient(90deg,var(--primary),#215dc8);

    color:#fff;

}

/*=============================
AMOUNT BUTTONS
=============================*/

.rwf-amounts{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.rwf-amount{

    border:none;

    padding:12px 24px;

    border-radius:50px;

    background:#eef5ff;

    color:#333;

    font-weight:600;

    transition:.35s;

}

.rwf-amount:hover{

    background:#dceaff;

}

.rwf-amount.active{

    background:var(--accent);

    color:#fff;

}

/*=============================
ALERT
=============================*/

.rwf-alert{

    display:flex;

    align-items:flex-start;

    gap:12px;

    padding:18px;

    border-left:5px solid var(--accent);

    background:#fff8eb;

    border-radius:14px;

    color:#555;

    margin:30px 0;

    line-height:1.8;

}

.rwf-alert i{

    color:var(--accent);

    font-size:22px;

}

/*=============================
CHECKBOX
=============================*/

.rwf-form-card .form-check{

    background:#f8fbff;

    border-radius:14px;

    padding:16px;

}

.rwf-form-card .form-check-input{

    cursor:pointer;

}

.rwf-form-card .form-check-label{

    cursor:pointer;

    font-weight:500;

}

/*=============================
SUBMIT BUTTON
=============================*/

.rwf-submit-btn{

    width:100%;

    border:none;

    padding:18px;

    border-radius:50px;

    background:linear-gradient(90deg,var(--primary),#215dc8);

    color:#fff;

    font-size:18px;

    font-weight:700;

    transition:.35s;

}

.rwf-submit-btn:hover{

    transform:translateY(-3px);

    background:linear-gradient(90deg,var(--accent),#ff9800);

}

/*=============================
Responsive
=============================*/

@media(max-width:991px){

.rwf-form-card{

    padding:30px;

}

}

@media(max-width:768px){

.rwf-donate-section{

    padding:70px 0;

}

.rwf-form-card{

    padding:22px;

}

.rwf-type-buttons{

    flex-direction:column;

}

.rwf-type-btn{

    width:100%;

}

.rwf-amount{

    flex:1 1 calc(50% - 10px);

    text-align:center;

}

.rwf-selected-cause{

    font-size:14px;

}

.rwf-alert{

    font-size:14px;

}

.rwf-submit-btn{

    font-size:16px;

}

}

/*====================================
RWF PAYMENT PANEL (PART 2A)
====================================*/

/*=========================
COMMON CARD
=========================*/

.rwf-payment-card{

    background:#fff;

    border-radius:24px;

    padding:30px;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

    border:1px solid rgba(11,61,145,.08);

    transition:.35s;

}

.rwf-payment-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

/*=========================
CARD HEADER
=========================*/

.rwf-card-header{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:25px;

}

.rwf-card-icon{

    width:65px;

    height:65px;

    border-radius:50%;

    background:rgba(11,61,145,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    font-size:30px;

    transition:.35s;

}

.rwf-payment-card:hover .rwf-card-icon{

    background:var(--primary);

    color:#fff;

    transform:rotateY(180deg);

}

.rwf-card-header h4{

    margin:0;

    font-size:24px;

    font-weight:700;

    color:#222;

}

.rwf-card-header p{

    margin:5px 0 0;

    color:#6b7280;

    font-size:14px;

}

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

.rwf-qr-box{

    text-align:center;

    margin:30px 0;

}

.rwf-qr-box img{

    width:220px;

    max-width:100%;

    padding:12px;

    border-radius:18px;

    background:#fff;

    border:2px solid #edf2ff;

    transition:.35s;

}

.rwf-qr-box img:hover{

    transform:scale(1.05);

}

/*=========================
UPI
=========================*/

.rwf-upi-section{

    margin-top:20px;

}

.rwf-upi-section label{

    display:block;

    font-weight:600;

    margin-bottom:10px;

}

.rwf-copy-box{

    display:flex;

    border:1px solid #dbe3ee;

    border-radius:14px;

    overflow:hidden;

}

.rwf-copy-box input{

    flex:1;

    border:none;

    outline:none;

    padding:16px;

    font-weight:600;

    background:#fff;

}

.rwf-copy-box button{

    width:65px;

    border:none;

    background:var(--primary);

    color:#fff;

    transition:.35s;

}

.rwf-copy-box button:hover{

    background:var(--accent);

}

/*=========================
PAYMENT APPS
=========================*/

.rwf-payment-apps{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

    margin-top:22px;

}

.rwf-payment-apps span{

    background:#eef5ff;

    color:var(--primary);

    padding:8px 15px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}

/*=========================
BANK DETAILS
=========================*/

.rwf-bank-details{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.rwf-bank-row{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    border-bottom:1px dashed #e4e7ec;

    padding-bottom:12px;

}

.rwf-bank-row:last-child{

    border:none;

}

.rwf-bank-row span{

    color:#6b7280;

    font-size:14px;

}

.rwf-bank-row strong{

    text-align:right;

    color:#222;

    font-size:15px;

    font-weight:700;

}

/*=========================
BANK BUTTONS
=========================*/

.rwf-bank-actions{

    display:flex;

    gap:12px;

    margin-top:30px;

}

.rwf-bank-actions button,

.rwf-bank-actions a{

    flex:1;

    padding:14px;

    border:none;

    border-radius:50px;

    text-align:center;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.rwf-bank-actions button{

    background:linear-gradient(90deg,var(--primary),#215dc8);

    color:#fff;

}

.rwf-bank-actions a{

    background:#eef5ff;

    color:var(--primary);

}

.rwf-bank-actions button:hover{

    background:linear-gradient(90deg,var(--accent),#ff9800);

}

.rwf-bank-actions a:hover{

    background:var(--primary);

    color:#fff;

}

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

@media(max-width:991px){

.rwf-payment-card{

    margin-top:30px;

}

}

@media(max-width:768px){

.rwf-payment-card{

    padding:22px;

}

.rwf-card-header{

    flex-direction:column;

    text-align:center;

}

.rwf-card-header h4{

    font-size:22px;

}

.rwf-qr-box img{

    width:180px;

}

.rwf-bank-row{

    flex-direction:column;

    gap:6px;

}

.rwf-bank-row strong{

    text-align:left;

}

.rwf-bank-actions{

    flex-direction:column;

}

}

/*====================================
RWF TRUST • HELP • IMPACT
PART 2B
====================================*/

/*=========================
COMMON CARD
=========================*/

.rwf-trust-card,
.rwf-help-card,
.rwf-impact-card{

    background:#fff;

    border-radius:24px;

    padding:30px;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

    border:1px solid rgba(11,61,145,.08);

    transition:.35s;

}

.rwf-trust-card:hover,
.rwf-help-card:hover,
.rwf-impact-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

/*=========================
TRUST CARD
=========================*/

.rwf-trust-card h4{

    font-size:26px;

    font-weight:700;

    margin-bottom:25px;

    color:#222;

}

.rwf-trust-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.rwf-trust-card li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:#555;

    font-size:15px;

}

.rwf-trust-card li:last-child{

    margin-bottom:0;

}

.rwf-trust-card li i{

    color:#22c55e;

    font-size:18px;

}

/*=========================
HELP CARD
=========================*/

.rwf-help-card{

    background:linear-gradient(135deg,#f8fbff,#eef5ff);

}

.rwf-help-card h4{

    font-size:24px;

    font-weight:700;

    margin-bottom:12px;

    color:#222;

}

.rwf-help-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:22px;

}

.rwf-help-info{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.rwf-help-info a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    background:#fff;

    border-radius:14px;

    text-decoration:none;

    color:#333;

    transition:.35s;

    font-weight:600;

}

.rwf-help-info a:hover{

    background:var(--primary);

    color:#fff;

}

.rwf-help-info i{

    color:var(--primary);

    font-size:18px;

}

.rwf-help-info a:hover i{

    color:#fff;

}

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

.rwf-impact-card{

    background:linear-gradient(135deg,var(--primary),#245ecf);

    color:#fff;

    text-align:center;

    overflow:hidden;

    position:relative;

}

.rwf-impact-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

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

    top:-70px;

    right:-70px;

}

.rwf-impact-card::after{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

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

    bottom:-40px;

    left:-40px;

}

.rwf-impact-card i{

    font-size:50px;

    margin-bottom:20px;

    display:block;

    position:relative;

    z-index:2;

}

.rwf-impact-card h4{

    font-size:28px;

    font-weight:700;

    margin-bottom:18px;

    position:relative;

    z-index:2;

}

.rwf-impact-card p{

    color:#eef3ff;

    line-height:1.9;

    margin:0;

    position:relative;

    z-index:2;

}

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

@media(max-width:991px){

.rwf-trust-card,
.rwf-help-card,
.rwf-impact-card{

    margin-top:30px;

}

}

@media(max-width:768px){

.rwf-trust-card,
.rwf-help-card,
.rwf-impact-card{

    padding:22px;

}

.rwf-trust-card h4{

    font-size:22px;

}

.rwf-help-card h4{

    font-size:22px;

}

.rwf-impact-card h4{

    font-size:24px;

}

.rwf-impact-card i{

    font-size:42px;

}

.rwf-help-info a{

    font-size:14px;

}

}








/*====================================
OUR CURRENT IMPACT
====================================*/

.impact-progress-section {
  padding: 50px 0;

  background: #f8fbff;
}

.impact-progress-card {
  background: #fff;

  border-radius: 22px;

  padding: 30px;

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

  transition: 0.35s;

  height: 100%;
}

.impact-progress-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.impact-header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 20px;
}

.impact-header h4 {
  font-size: 22px;

  margin-bottom: 5px;

  font-weight: 700;
}

.impact-header small {
  color: #6b7280;
}

.impact-header span {
  width: 60px;

  height: 60px;

  border-radius: 50%;

  background: rgba(11, 61, 145, 0.08);

  color: var(--primary);

  display: flex;

  justify-content: center;

  align-items: center;

  font-weight: 700;

  font-size: 18px;
}

.progress {
  height: 10px;

  border-radius: 50px;

  overflow: hidden;

  background: #e9edf4;
}

.progress-bar {
  background: linear-gradient(90deg, var(--accent), var(--accent));
}

.impact-footer {
  display: flex;

  justify-content: space-between;

  margin-top: 15px;

  color: #666;

  font-size: 15px;
}

@media (max-width: 768px) {
  .impact-progress-section {
    padding: 70px 0;
  }

  .impact-progress-card {
    padding: 22px;
  }

  .impact-header {
    flex-direction: column;

    align-items: flex-start;

    gap: 15px;
  }

  .impact-footer {
    flex-direction: column;

    gap: 6px;
  }
}