/* Donations Page Layout */
.after\:bg-\[url\(\'\.\.\/img\/icon\/icon-triangle-blue\.svg\'\)\]::after {
background-image: url(/media/regent/site-assets/icons-amp-logos/Triangle100-TL_Blue.svg);
}

.donate-btn {
  margin-top: 2rem!important;
}

body {
   padding-top: 85px;
}

@media (min-width: 767px) {
   body {
      padding-top: 120px;
   }
}

/* Donations Banner */

.donations-banner {
   display: flex;
   flex-direction: column;
   height: 850px;
   padding: 0 30px;
   color: white;

   position: relative;
   background-size: cover;
   background-position: center;
   overflow: hidden;
}

.donations-banner::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(90.08deg, rgb(0 0 0 / 20%) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
   z-index: 1;
   pointer-events: none; /* Ensures the overlay does not interfere with other elements */
}

.donations-banner .breadcrumb-navigation-desktop {
   position: relative;
   z-index: 2;
}

.donations-banner__content {
   position: relative;
   z-index: 2;

   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-evenly;
}

.donations-banner__info, .donations-banner__form {
   flex: 0 0 50%;
   padding: 20px;
}

.donate-btn {
   background-color: #FDD086; /* Sun Yellow/100 */
   border: none;
   padding: 15px 45px 15px 30px;
   font-size: 1.2em;
   cursor: pointer;
   border-radius: 5px;

   font-family: mabry-regular, sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 18px;
   line-height: 22px;
   text-align: center;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: #003B34!important; /* Forest Green/200 */
}

.donate-btn:hover {
   background-color: #4E2F26; /* Walnut Brown/150 */
}

.donations-banner__form {
   background-color: white;
   color: black;
   padding: 0;
   max-width: 400px;
   width: 100%;
   height: 600px;
   min-height: 600px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   border-radius: 5px;
}

.donations-banner__form iframe {
   border-radius: 5px;
}

@media (max-width: 1024px) {
   
   .donations-banner {
      height: unset;
      align-items: center;
   }

   .donations-banner::before {
      background: linear-gradient(199.78deg, rgba(3, 0, 19, 0.45) 25.45%, rgba(1, 0, 17, 0.36) 46.47%, rgba(0, 1, 17, 0.0675) 87.65%);
   }

   .donations-banner__content {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      height: 100%;
      padding: 3rem 0;
      gap: 2rem;
      max-width: 400px;
   }

   .donations-banner__info {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 5px;
   }

   .donations-banner__info h1 {
      font-size: 50px;
   }

   .donations-banner__info p {
      font-size: 20px;
      margin-bottom: 1.6rem;
   }

   .donate-btn {
      width: 100%;
      margin-top: 0;
   }
}

@media (max-width: 768px) {
   .donations-banner__info h1 {
      font-size: 40px;
   }
}

.donations-slider-controls {
   margin-bottom: 1rem;
}

.donations-slider__cards {
   display: flex;
   overflow: hidden;
   padding: 0;
}

.donations-slider__cards > div {
   margin-right: 20px;
}

.donations-slider__cards > div:last-child {
   margin-right: 0;
}

.donations-card__title {
   color: #004440; /* Forest Green/150 */
}

.donations-card__title:hover {
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
}








