
/* Styling for Headline Block */

.headline-text {
  position: absolute;
  top: 50%; /* Adjust these values as needed */
  left:50%;
  transform: translate(-50%, -50%);
  color: #fff; /* Choose a color that contrasts well with your image */
  font-family: 'Oswald-Light', sans-serif;
  font-size: 1.25vw; /* Adjust font size as needed */
  width: 80%; /* Set the width of the text block */
  text-align: center;
  
 /* z-index: 1; Ensures the text is above the image */
}

.headline-span {
	font-family:'LeagueGothic-Regular';
	font-size:5vw;
}
	

.announce {
  display: flex;
  justify-content: center;
  align-items: center;
 /* padding: 20px; */
  width: 100%;
}

.announce-content {
  display: flex;
  flex-direction: row; /* Align items in a row by default */
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  max-width: 1440px;
}

.text-section {
  flex: 1;
  min-width: 300px;
  padding: 20px;
  box-sizing: border-box;
}

.map-section {
  flex: 1;
  min-width: 300px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.join-title {
  color: #c0401b;
  font-size: 4vw;
  text-align: left;
}

#mc_embed_signup {
  width: 100%;
}

/* Ensure embedded elements like forms and iframes are responsive */
form,
iframe {
  width: 100%;
}

iframe {
  max-width: 100%;
  border: 0; /* Remove default border */
}

/* Responsive Design */
@media (max-width: 769px) {
  .announce-content {
    flex-direction: column; /* Stack items vertically on smaller screens */
    align-items: center;
  }

  .text-section,
  .map-section {
    width: 100%; /* Make each section full width */
  }

  .map-section iframe {
    width: 100%; /* Make the map full width on small screens */
    height: auto; /* Adjust height to maintain aspect ratio */
  }
}

