/* Base styles */
.body {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0;  
  height:100%; 
  background-color: #FCF7EC; 
  color:black ; 
  overflow-x: hidden;

}

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.hero img {
  max-width: 100%;
  height: auto;
}
/* Header layout */
.site-header {
  background-color: #2F524A;/*#2c3e50;*/
  color: white;
  padding: 20px;
}
.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  height:100px;
  }
.header-logo {
  height: 80px;
  flex: 0 0 auto;
}
.header-text {
  flex: 1 1 300px;
  min-width: 200px;
  font-size:45px;
  font-family:Arial 
}
.header-button {
  background-color: #e67e22;
  color: white;
  border: none;
  padding: 10px 20px;
  font-weight: bold;
  cursor: pointer;
  flex: 0 0 auto;
}
/* ============================
   GLOBAL NAVBAR
   ============================ */
.main-nav {
  display: flex;
  justify-content: center;
  background-color: #2F524A;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size: 14pt;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  white-space: nowrap; /* Prevent wrapping */
}

/* ============================
   TOP LEVEL MENU
   ============================ */
.main-nav > ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* Force single line */
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav > ul > li {
  position: relative;
}

.main-nav > ul > li > a {
  display: block;
  padding: 4px 5px; /* reduce vertical height */
  line-height: 1.1;  /* optional: tighter text */
  background: #2F524A;
  color: white;
  text-decoration: none;
  white-space: nowrap;
}

/* ============================
   DROPDOWN
   ============================ */
.dropdown {
  position: relative;
}

.dropdown > a::after {
  content: " ▼";
  font-size: 0.8em;
  margin-left: 5px;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #2F524A;
  min-width: 200px;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 1000;
}

.dropdown-content li a {
  display: block;
  padding: 4px 10px; /* reduce vertical height */
  line-height: 1.1;  /* optional: tighter text */
  background: #2F524A;
  color: white;
  text-decoration: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* ============================
   HAMBURGER (MOBILE)
   ============================ */
.hamburger {
  position: absolute;
  top: 70px;
  left: -5px;
  z-index: 10;
  background: none;
  border: none;
  font-size: 36px;
  color: white;
  cursor: pointer;
  display: none;
}

@media (max-width: 901px) {
  .hamburger {
    display: block;
  }

  .main-nav {
    white-space: normal;
  }

  .main-nav > ul {
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0;
    font-size: 28px;
  }

  .main-nav > ul.show {
    display: flex;
  }

  .main-nav ul li a {
    justify-content: flex-start;
    padding: 10px;
    font-size: 28px;
  }

  .dropdown-content {
    position: static;
    box-shadow: none;
    background-color: red;
    font-size: 28px;
  }

  .dropdown-content li a {
    font-size: 28px;
    color: white;
    background-color: teal;
    padding: 4px 10px;
  }
}

.auto-style24 {
	border-width: 0px;
	vertical-align: bottom;
	float:right;
}
.auto-style24a {
  height: 30px;
  margin-bottom: 1px; /* nudges image down slightly */
  vertical-align: middle; /* try baseline or bottom if needed */
}
.auto-style15 {
	margin-top: 10px;
	text-align: center;
	margin-bottom: 0px;
	font-family:Arial;
	font-size:36px;
	font-weight:bold;
	}
.auto-style16 {
	margin-bottom: 0px;
	width:100%;
	font-size: 14pt;
	margin-top: 9px;
	text-align: center;
}
.auto-style30 {
	text-align: left;
	font-size: default;
	margin-left: 5px;
}

 a.button {
            display: inline-block;
            padding: 10px 15px;
            background-color: #DE9C1C;
            color: white;
            text-decoration: none;
            border-radius: 4px;
        }
        a.button:hover {
            background-color: #0056b3;
        }
        a.button1 {
            display: inline-block;
            padding: 10px 15px;
            background-color: green;
            color: white;
            text-decoration: none;
            border-radius: 4px;
        }
        a.button1:hover {
            background-color: #0056b3;
        }
.auto-img {
  border-width: 0px;
  width: 60%;
  max-width: 70%;
  height: auto;
  display: block; /* removes bottom whitespace */
  margin: 0 auto
}
.auto-img2 {
  border-width: 0px;
  width:30%;
  max-width:30%;
  height: auto;
  display: block; /* removes bottom whitespace */
  /*margin: 0 auto;*/ vertical-align:   bottom;margin-left:5px; margin-bottom:1px
}
.auto-img3 {
  border-width: 0px;
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block; /* removes bottom whitespace */
  margin: 0 auto
}