/* ------------------------------
    Banner Section Styles
------------------------------ */

/* General Styles for Banner */
.banner .card-img-top.img-fluid.w-100.image-style-webp {
  border-radius: 0; /* Remove border radius for full-width images */
}

.banner .card-footer.px-4.pb-4 {
  padding: 0; /* Remove padding from footer */
}

/* Paragraph and List Style within Banner */
.banner p,
.banner li {
  font-size: 1.2rem; /* Increase font size for readability */
}

/* Hide pseudo-element for h2 headings */
.banner h2::after {
  display: none !important;
}

/* Header Styles - H2 */
.banner h2,
.banner .h2 {
  font-family: var(--font-roboto-condensed);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase; /* Uppercase text for emphasis */
}

/* Background Color Styles for Banner */
.banner .cu-bg-gold {
  background: var(--cua-gold); /* Banner background set to CU gold */
}

.banner .banner-body.cu-bg-gold {
  background: var(--cua-gold);
  opacity: 0.75 !important; /* Add transparency for banner background */
}

.banner .cu-bg-black {
  background: var(--cua-black); /* Banner background set to CU black */
}

.banner .banner-body.cu-bg-black {
  background: var(--cua-black);
  opacity: 0.75 !important;
}

.banner .cu-bg-white {
  background: var(--cua-white); /* Banner background set to CU white */
}

.banner .banner-body.cu-bg-white {
  background: var(--cua-white);
  opacity: 0.75 !important;
}

/* Text Color Styles for Banner */
.banner .cu-text-gold,
.cu-text-gold {
  color: var(--cua-gold); /* Text color set to CU gold */
}

.banner .cu-text-white {
  color: var(--cua-white); /* Text color set to CU white */
}

.banner .cu-text-black {
  color: var(--cua-black); /* Text color set to CU black */
}

/* Button Styles */
.banner .btn {
  border-radius: 0 !important; /* Remove border radius for square buttons */
  font-weight: var(--font-weight-bold); /* Bold button text */
  padding: .65rem 4rem !important; /* Padding for buttons */
}

.banner .btn:hover {
  text-decoration: none !important; /* Remove underline on hover */
}

/* Button Custom Styles for Black Background */
.banner .btn.btn-cu-bg-black {
  background: rgba(0, 0, 0, 1); /* Black button background */
  border: 3px solid var(--cua-black); /* Black border for the button */
  color: var(--cua-white); /* White text color */
  font-weight: var(--font-weight-bold); /* Bold font */
  position: relative;
  overflow: hidden;
  transition: width 0.5s ease;
  z-index: 1;
}

/* Button Hover Effect for Black Button */
.banner .btn.btn-cu-bg-black:hover {
  background: rgba(255, 255, 255, 0.1); /* Lighten background on hover */
  border-color: var(--cua-black); /* Maintain black border on hover */
  color: var(--cua-black); /* Change text color to black */
}

/* Button Custom Styles for Gold Background */
.banner .btn.btn-cu-bg-gold {
  background: rgba(207, 184, 124, 1); /* Gold button background */
  border: 3px solid var(--cua-gold); /* Gold border for the button */
  color: var(--cua-black); /* Black text color */
  font-weight: var(--font-weight-bold); /* Bold font */
  position: relative;
  overflow: hidden;
  transition: width 0.5s ease;
  z-index: 1;
}

/* Button Hover Effect for Gold Button */
.banner .btn.btn-cu-bg-gold:hover {
  background: rgba(207, 184, 124, 0.5); /* Lighten gold background on hover */
  border: 3px solid var(--cua-gold); /* Maintain gold border on hover */
  color: var(--cua-black); /* Black text color */
}

/* Outline Button Styles */
.banner .btn.outline-btn-cu-bg-black {
  background: transparent; /* Transparent background */
  border: 3px solid var(--cua-black); /* Black border for outline button */
  color: var(--cua-black); /* Black text color */
  font-weight: var(--font-weight-bold); /* Bold font */
  position: relative;
  overflow: hidden;
  transition: width 0.5s ease;
  z-index: 1;
}

.banner .btn.outline-btn-cu-bg-black::before,
.banner .btn.btn-cu-bg-black::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Dark overlay effect */
  transition: width 0.3s ease;
  z-index: -1;
}

.banner .btn.outline-btn-cu-bg-black:hover::before,
.banner .btn.btn-cu-bg-black:hover::before {
  width: 100%; /* Expand overlay effect on hover */
}

.banner .btn.outline-btn-cu-bg-black:hover,
.banner .btn.btn-cu-bg-black:hover {
  border-color: var(--cua-black); /* Maintain black border on hover */
  color: var(--cua-white); /* Change text color to white */
  z-index: 1;
}

/* General Container Styling */
.container-fluid.banner {
  overflow: hidden; /* Prevent overflow for container */
}

/* Display Styling for Banner Headings */
.banner .display-4 {
  font-size: 3rem !important; /* Increase heading size */
  font-family: var(--font-roboto-condensed);
  font-weight: var(--font-weight-bold);
}

/* ------------------------------
    Responsive Media Queries
------------------------------ */

/* Styles for Screen Widths below 1200px */
@media (max-width: 1200px) {
  .banner-body {
    padding: 1.5rem 2rem 2.5rem 2rem; /* Adjust padding for medium screens */
  }

  .banner .btn {
    padding: .5rem 3rem !important; /* Adjust button padding */
  }
}

/* Styles for Screen Widths below 768px */
@media (max-width: 768px) {
  .banner p,
  .banner li {
    font-size: 1rem; /* Reduce font size for small screens */
  }

  .banner .btn {
    padding: .5rem 2.5rem !important; /* Adjust button padding */
  }

  .banner-image-container {
    padding: 8rem 0; /* Adjust padding for image container */
  }

  .banner-body {
    padding: 1.5rem 1.5rem 2.25rem 1.5rem; /* Adjust body padding */
  }

  .banner .card-img-top {
    width: 100%; /* Ensure image covers full width */
    height: auto;
  }
}

/* Styles for Screen Widths below 680px */
@media (max-width: 680px) {
  .banner-body {
    padding: 3rem; /* Adjust padding */
  }

  .banner h2,
  .banner .h2 {
    font-size: 2rem; /* Adjust heading size */
  }

  .banner-image-container {
    padding: 3rem 0; /* Adjust image container padding */
  }

  .banner-body.mx-5.my-5.my-sm-3,
  .banner-body .mx-5 {
    margin-right: 1rem !important; /* Adjust margins */
    margin-left: 1rem !important;
  }

  .banner-body.mx-5.my-5.my-sm-3,
  .banner-body .my-5 {
    margin-top: 1rem !important; /* Adjust vertical margins */
    margin-bottom: 1rem !important;
  }

  .banner-image-container {
    padding: 5rem 0 !important; /* Adjust image container padding */
  }
}

/* Styles for Screen Widths below 576px */
@media (max-width: 576px) {
  .banner .btn {
    padding: .5rem 2rem !important; /* Adjust button padding */
  }

  .banner-image-container {
    padding: 6rem 0; /* Adjust padding for small screens */
  }

  .banner-body {
    padding: 1.5rem 1rem 2rem 1rem; /* Adjust body padding */
  }

  .banner .btn.btn-cu-bg-black,
  .banner .btn.btn-cu-bg-gold,
  .banner .btn.btn-cu-bg-white {
    font-size: 0.875rem; /* Adjust button font size */
  }
}

/* Ensure banner image always renders fully - dont do remove */
.banner-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Prevent collapse when no content is present */
  min-height: 40vh;
  width: 100%;
}

/* Optional: fallback for very short images */
.banner-image-container::before {
  content: '';
  display: block;
  padding-top: 25%; /* Creates aspect ratio fallback */
}

.banner-image-container.margin_bottom {
  margin: 0 0 2rem !important;
}

.banner-image-container.margin_top {
  margin: 2rem 0 0!important;
}

.banner-image-container.margin_top_and_bottom {
  margin: 2rem 0!important;
}