h1, h2, h3, h4, p {
    padding-left: 0;
    color: #555;
    font-family: Helvetica, sans-serif;
}

h1 a, h2 a, h3 a, h4 a {
    color: #007bff !important;
    text-decoration: none; /* Optional: remove underline */
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
    color: #0056b3; /* Hover color */
    text-decoration: underline; /* Optional: underline on hover */
}


.page-header {
    background-color: #6DDCBD;
    /*background-color: #C25100;*/
    margin-top: 0;
    padding: 20px 0 20px 20px;
}

.header-right {
    float: right;
    font-size: 20pt;
}

.header-left {
    float: left;
}

.header-title {
    font-size: 30pt;
    color: #ffffff;
}

.content {
    margin-left: 40px;
}


.date {
    color: #828282;
}

.save {
    float: right;
}

.top-menu, .top-menu:hover, .top-menu:visited {
    color: #ffffff;
    float: right;
    font-size: 26pt;
    margin-right: 20px;
}

#logout-form {
  display: inline;
}
#logout-form button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.form-section {
    margin-bottom: 1.5rem;
}

.form-row {
    margin-bottom: 1rem;
}

.form-row .col {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    gap: 0.5rem; /* Add spacing between label and field */
}

.radio-buttons {
    margin-bottom: 1rem;
}

.error-message {
    color: red;
    font-weight: bold; /* Optional */
    margin-top: 10px; /* Optional */
}

.brand-highlight {
    font-family: "Garamond", serif;
    font-weight: bold;
    color: #28a745;
    font-size: 40px !important;
}

.navbar-brand {
    font-family: Helvetica, sans-serif;
    font-size: 30px !important;
    font-style: italic;
    /*color: #777777;*/
    color:  #0A5DC2;
}
.navbar-brand:hover {
    color: #555; /* Change this to your desired hover color */
    text-decoration: none; /* Optional: Removes underline on hover */
}


.beta {
    font-style: italic;
    font-size: 20px;
    display: inline-flex;
    color: #28a745;
    position: relative;
    top: -8px;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Makes the text stack vertically */
    position: relative;
  }

.text-container {
    text-align: center;
    font-family: Helvetica, sans-serif;
    font-size: 45px !important;
    font-style: bold;
    /*color: #777777;*/
    color:  #0A5DC2;
}

  .line-break {
    display: block;
    margin-top: -5px; /* Adjust for better line spacing */
  }


  .wavy-line {
  position: absolute;
  top: 50%;
  left: 20%; /* Adjust as needed */
  transform: translateY(-50%);
}

.circle {
    position: absolute;
    left: 110px;
    top: 25px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    fill: white;
    stroke: #28a745;
    stroke-width: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-text {
    font-family: Helvetica, sans-serif;
    font-size: 25px;
}

.slogan-highlight {
    color: #0A5DC2;
}

.card-img-top {
    height: 400px; /* Adjust as needed */
    object-fit: cover;
}

h1 a, h2 a, h3 a, h4 a {
    color: #007bff !important;
    text-decoration: none; /* Optional: remove underline */
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
    color: #0056b3; /* Hover color */
    text-decoration: underline; /* Optional: underline on hover */
}

.intro-section {
    margin-bottom: 20px;  /* Adjust this value to control the space between the intro and map titles */
    font-size: 16px;
}

.intro-section p {
    line-height: 1.5;
}

.map-group {
    margin-top: 20px;  /* Adds space between each map section */
}

.map-group h2 {
    margin-bottom: 10px;  /* Adjust spacing between the title and associated content */
}

.preview-card {
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.12);
  overflow: hidden;
  background: white;
}
.preview-media {
  width: 100%;
  aspect-ratio: 4 / 3;   /* keeps a nice placeholder proportion */
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(16,185,129,0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.55);
  font-weight: 600;
}
.preview-body { padding: 12px 14px; }
.preview-title { font-weight: 700; margin: 0 0 6px; }
.preview-text { margin: 0; opacity: 0.75; }

/* Optional: make wrap padding a bit tighter since we now use Bootstrap container */
.wrap { padding: 36px 16px; }