/* Header Top Bar Style */
  body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #F5F5DC;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
  
  html, body {
  	overflow-x: hidden;
  }

  .header_top_bar {
    width: 100%;
    height: 35px;
    background-color: #4B5058;
    padding: 5px;
    display: flex;
    justify-content: flex-end;
  }

  .logo {
	background-color: #002855 !important;
	color: #ffffff;
	font-size: 1.25rem;
  }

  .logo img {
	height: 90px;
	margin: 20px;
  }

  .header_bottom_bar {
	width: 100%;
    height: 10px;
    background-color: #DAA520;
  }

.headline {
  flex: 1;
  background-color: #7a8e99;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically center content */
  align-items: center;     /* horizontally center content */
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.title {
	font-size: 3rem;
	font-weight: 700;
	color: #002855;
	padding: 10px 20px 0 20px;
}

 .subtitle {
	font-size: 2.25rem;
	font-weight: 500;
	color: #ffffff;
	padding: 10px 20px 0 20px;
  }


.hero-cta-bar {
  position: relative; /* 👈 remove fixed so it participates in the layout */
  background-color: #4B5058;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  z-index: 1000;
}

.email, .address, .contact {
  display: block;
  margin: 1em 0;
  color: #ffffff;
  text-align: center;
}

@media (max-width: 768px) {
  .title {
    font-size: 2rem;
    padding: 10px 10px 0 10px;
  }

  .subtitle {
    font-size: 1.25rem;
    padding: 10px 10px 0 10px;
    margin-top: 10px;
  }

  .headline {
    padding: 20px 10px; /* vertical + horizontal */
    justify-content: flex-start; /* 🚀 shifts content to the top */
    max-height:300px;
  }
}