.section {
  padding-top: 4rem; /* Container padding for spacing */
  padding-bottom: 4rem;

  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
}

.section.the-lead {
  padding-top: 2rem;
}

@media (min-width: 768px) {
  .section {
    padding-top: 3rem; /* Container padding for spacing */
    padding-bottom: 3rem;
  }

  .section .container {
    padding-right: calc(var(--bs-gutter-x) * 1);
    padding-left: calc(var(--bs-gutter-x) * 1);
    margin-right: auto;
  }

  .section.the-lead {
    padding-top: 4rem;
  }
}

.banner {
  width: 100%;
  height: auto; /* Adjusts height automatically based on the aspect ratio of the image */
  background-image: url("images/home-banner-2.gif");
  background-size: contain; /* Ensures the entire image is shown */
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: calc(2000 / 1875 * 88%);
  position: relative; /* Added for consistent absolute positioning */
}

@media (min-width: 768px) {
  .banner {
    width: 100%;
    background-image: url("images/home-banner-1.gif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: calc(
      1200 / 2560 * 70%
    ); /* Maintain the aspect ratio of the image */
    position: relative;
  }
}

.section.walk {
  text-align: center;
  width: 100%;
  height: auto;
  background-color: #ffe4e0;
  background-image: url(images/walk-banner-4.jpg);
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  padding-bottom: calc(6314 / 8333 * 70%);
  position: relative;
}

.section.walk p.when {
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .section.walk {
    width: 100%;
    background-image: url(images/walk-banner-3.jpg);
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding-bottom: calc(4018 / 8000 * 90%);
    position: relative;
  }

  .section.walk p.when {
    font-size: 1.2rem;
  }
}

.section.walk h1 {
  color: #d75651;
}

/* Button styles moved to base.css for better maintainability */

.section.gallery {
  background-color: #f2f2f2;
  padding-top: 0;
}

.section.gallery .col-lft {
  background-image: url(images/home-gallery.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: calc(1080 / 1920 * 100%);
  position: relative;
}

.section.gallery .col-rgt {
  text-align: center; /* Ensures left alignment on medium devices */
  margin-top: 2rem;
}

.section.gallery .col-rgt .cont {
  margin: 10px 0 40px;
  display: inline-block;
  min-height: 15vh;
  max-width: 550px;
}

@media (min-width: 768px) {
  .section.gallery {
    margin: 0;
    padding: 0;
  }

  .section.gallery .col-lft {
    background-image: url(images/home-gallery.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: calc(1080 / 1920 * 50%);
    position: relative;
  }

  .section.gallery .col-rgt {
    text-align: left; /* Ensures left alignment on medium devices */
    margin: 0;
    padding: 60px;
  }

  .section.gallery .col-rgt .cont {
    min-height: 20vh;
    font-size: 18px;
    line-height: 30px;
  }
}

.section.event-oh {
  background: #fae7d3;
  padding-top: 0;
}

.section.event-oh .col-photo {
  background-image: url(images/home-greeting.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: calc(1080 / 1920 * 100%);
  position: relative;
}

.section.event-oh .col-text {
  text-align: center; /* Ensures left alignment on medium devices */
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.section.event-oh .col-text .cont {
  margin: 10px 0 40px;
  display: inline-block;
  min-height: 15vh;
  max-width: 550px;
}

@media (min-width: 768px) {
  .section.event-oh {
    margin: 0;
    padding: 0;
  }

  .section.event-oh .col-photo {
    background-image: url(images/home-greeting.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: calc(1080 / 1920 * 50%);
    position: relative;
  }

  .section.event-oh .col-text {
    text-align: left; /* Ensures left alignment on medium devices */
    margin: 0;
    padding: 60px;
  }

  .section.event-oh .col-text .cont {
    min-height: 20vh;
    font-size: 18px;
    line-height: 30px;
  }
}

/* events schedule */

.section.what-s-going-on {
  background: linear-gradient(to bottom, #fae7d3, white);
  padding: 6rem 0;
}

.section.what-s-going-on .btn-orange {
  margin-bottom: 10px;
}

.section.what-s-going-on .col-12 {
  padding: 1rem;
  text-align: center;
  margin-bottom: 20px;
}

.section.what-s-going-on .col-12 h2 {
  margin: 20px 0;
  color: #000;
  min-height: 40px;
}

.section.what-s-going-on .cont {
  min-height: 120px;
}

/* events schedule */

.section.upcoming-events {
  text-align: center;
}

.month {
  display: flex;
  align-items: center; /* Vertical centering */
  justify-content: center; /* Horizontal centering */

  height: 100px; /* Fixed height */
  width: 100px; /* Fixed width */

  flex-shrink: 0; /* Prevents shrinking */
  flex-grow: 0; /* Prevents growing */

  font-weight: bold;
  margin-right: 15px;
  border: 1px solid #f27c36; /* Example styling */
  border-radius: 0; /* Rounded corners */
  background-color: #f27c36; /* Example styling */
  color: #fff;
}

.event {
  display: flex;
  align-items: left;
  padding: 10px;
}

.event-details {
  display: block; /* Use block display to stack items vertically */
}

.event-details p {
  margin: 0 0 10px 0; /* Adds space between paragraphs */
  text-align: left; /* Ensures text is left-aligned */
}

.the-video {
  width: 100%;
  max-width: 100%;
  position: relative;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.the-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}