/* =========================================
   DONATION BAR SECTION
========================================= */

.donation-bar-section{
  width:100%;
  padding:40px 20px;

  background:
  linear-gradient(
    135deg,
    rgba(135,206,235,0.10),
    rgb(178, 216, 238),
    rgba(186,230,253,0.18)
  );
}

/* =========================================
   BAR
========================================= */

.donation-bar{

  max-width:1250px;
  margin:auto;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:30px;

  padding:38px 45px;

  border-radius:28px;

  background:rgba(255,255,255,0.85);

  backdrop-filter:blur(12px);

  border:1px solid rgba(255,255,255,0.6);

  box-shadow:
  0 10px 35px rgba(14,165,233,0.10);
}

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

.donation-content{
  width:70%;
}

.donation-content h2{

  font-size:38px;
  font-weight:800;

  color:#0f172a;

  margin-bottom:14px;
}

.donation-content p{

  font-size:16px;
  line-height:1.8;

  color:#475569;

  max-width:700px;
}

/* =========================================
   BUTTON AREA
========================================= */

.donation-btn-area{
  width:30%;

  display:flex;
  justify-content:flex-end;
}

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

.donate-btnn{

  position:relative;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:16px 34px;

  border-radius:60px;

  text-decoration:none;

  font-size:17px;
  font-weight:700;

  color:#ffffff;

  background:
  linear-gradient(
    135deg,
    #38bdf8,
    #0ea5e9
  );

  overflow:hidden;

  transition:all 0.4s ease;

  box-shadow:
  0 10px 25px rgba(14,165,233,0.30);
}

/* glossy shine effect */
.donate-btnn::before{

  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:80%;
  height:100%;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.45),
    transparent
  );

  transform:skewX(-20deg);

  transition:0.8s;
}

/* hover effects */
.donate-btnn:hover{

  transform:translateY(-4px) scale(1.03);

  box-shadow:
  0 14px 30px rgba(14,165,233,0.40);
}

.donate-btnn:hover::before{
  left:140%;
}

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

@media (max-width:768px){

  .donation-bar{

    flex-direction:column;
    text-align:center;

    padding:35px 25px;
  }

  .donation-content{
    width:100%;
  }

  .donation-content h2{
    font-size:28px;
  }

  .donation-content p{
    font-size:14px;
  }

  .donation-btn-area{
    width:100%;
    justify-content:center;
    margin-top:10px;
  }

  .donate-btnn{

    width:100%;

    max-width:260px;

    padding:15px 20px;
  }
}