.banner-section {
  position: relative;
  /* Stack above following sections so donate dropdown is not covered (e.g. .number-section) */
  z-index: 30;
  background: #3570e0;
  /* Space for absolutely positioned .nav-section (see navBar.css) */
  padding-top: 100px;
  --banner-body-padding-top: 30px;

  .navbar {
    padding-top: 0;
  }
}

/*
 * CMS home: both desktop + mobile images are chosen in CSS only (URLs come from
 * inline --cms-banner-bg-desk / --cms-banner-bg-mob on the element). Viewport
 * width updates when zooming, so the matching @media rule and background-image apply.
 */
@media screen and (min-width: 768px) {
  .banner-section.has-cms-banner-bg {
    background-color: #3570e0;
    background-image: var(--cms-banner-bg-desk);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

@media screen and (max-width: 767px) {
  .banner-section.has-cms-banner-bg {
    background-color: #3570e0;
    background-image: var(--cms-banner-bg-mob);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.banner-section.has-cms-banner-bg .palm-plant-img {
  display: none;
}

.banner-content-div {
  display: flex;
  justify-content: start;
  align-items: end;
  gap: 50px;
}

.banner-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 570px;
  padding-block: 30px 120px;
}

.banner-content h1 {
  font-size: clamp(2rem, 1.6364rem + 1.8182vw, 3rem);
  color: #000;
  font-weight: 800;
}

.banner-content p {
  font-size: clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem);
  color: #000;
  margin-top: 10px;
  font-weight: 300;
}

.banner-section .btn-join-givers {
  display: flex;
  flex-direction: column;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  margin-top: 40px;
  appearance: none;
  padding: 14px 12px;
  background-color: rgb(23, 23, 23);
  color: rgb(255, 255, 255);
  border: none;
  border-radius: 100px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.125rem;
  width: 53%;
  align-self: flex-start;
  line-height: normal;
  font-weight: 600;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.banner-section .btn-join-givers:hover,
.banner-section .btn-join-givers:focus-visible {
  color: rgb(255, 255, 255);
  background-color: rgb(40, 40, 40);
  box-shadow: var(--seedout-btn-shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.14));
}

.palm-plant-img {
  min-width: 320px;
}



@media screen and (max-width: 768px) {
  .banner-content-div {
    flex-wrap: wrap-reverse;
  }

  .palm-plant-img {
    min-width: 100%;
    text-align: center;
    padding-inline: 20px;
  }

  .banner-content p br {
    display: none;
  }

  .banner-content {
    padding-block: 0 96px;
  }

  .banner-section .btn-join-givers {
    align-self: center;
  }

  .event-2-banner {
    & .banner-content-div {
      min-height: 330px;
    }
  }
}

/*
 * Home bank-detail hero: on narrow viewports bankDetail.css gives .banner-content-div
 * a tall min-height while bannerSection uses align-items:end + wrap-reverse — that
 * leaves the only visible text block (.banner-content) hugging the bottom. Pin
 * copy to the top for .banner-section.bank-detail-banner (home only; home.css).
 */
@media screen and (max-width: 768px) {
  .banner-section.bank-detail-banner .banner-content-div {
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    min-height: unset;
  }

  .banner-section.bank-detail-banner .banner-content {
    padding-block: 1rem 2rem;
  }
}

@media screen and (max-width: 768px) {
  .banner-section {
    padding-top: 112px;
  }
}