/* Team Section */
.team-section {
  width: 100%;
  position: relative;
  background: url("../mahaloha/franchise/YELLOW RIBBON.webp") no-repeat center; /* Use the yellow ribbon as background */
  background-size: cover; /* Ensures the background covers the entire section */
  padding: 60px 0; /* Add padding for spacing */
}

.team-overlay,
.team-bottom-overlay {
  width: 100%;
  position: absolute;
  left: 0;
  height: auto; /* Allow height to adjust based on image */
}

.team-overlay {
  top: 0; /* Position at the top */
}

.team-bottom-overlay {
  bottom: 0; /* Position at the bottom */
}

.team-title {
  position: relative; /* Allow positioning in the flow */
  color: white; /* Text color */
  font-size: 4rem; /* Base font size for the title */
  font-family: "Zing Rust", sans-serif; /* Font family */
  font-weight: 400; /* Font weight */
  text-align: center; /* Center align text */
  z-index: 1; /* Ensure text is on top of overlays */
  margin: 0; /* Remove default margin */
  padding: 0 20px; /* Add padding for smaller screens */
}

/* Responsive Styles */
@media (max-width: 1200px) {
  .team-title {
    font-size: 3.5rem; /* Decrease font size for medium screens */
  }
  .team-overlay {
    top: 10px;
  }

  .team-bottom-overlay {
    bottom: 10px;
  }

  .team-section {
    padding: 55px 0;
  }
}

@media (max-width: 768px) {
  .team-title {
    font-size: 2.5rem; /* Further decrease font size for small screens */
    padding: 0 10px; /* Less padding on smaller screens */
  }

  .team-overlay {
    top: 15px;
  }

  .team-bottom-overlay {
    bottom: 15px;
  }
}

@media (max-width: 480px) {
  .team-title {
    font-size: 2rem; /* Further decrease font size for extra small screens */
    padding: 0; /* No padding on extra small screens */
  }

  .team-overlay {
    top: 20px;
  }

  .team-bottom-overlay {
    bottom: 20px;
  }
}