﻿/* 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: 18px; 
  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: wrap; /* Force single line with nowrap*/
  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;
}

}

.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: 5px 10px;
            background-color: #DE9C1C;
            color: white;
            text-decoration: none;
            border-radius: 4px;
        }
        a.button:hover {
            background-color: #0056b3;
        }
                
a.button1 {
            display: inline-block;
            padding: 5px 10px;
            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; 
  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
}*/

.banner1 {
	margin-top: 10px;
	text-align: center;
	margin-bottom: 0px;
	font-family:Arial;
	font-size:36px;
	font-weight:bold;
	}

.banner2 {
	vertical-align: top;
	float: right;
	border-width: 0px;
	margin-left: 0px;
	margin-right: 110px;
}

.banner3 {
	border-width: 0px;
	vertical-align: top;
	float: right;
}
.banner4 {
	border-width: 0px;
	vertical-align: top;
	float: right; white-space:nowrap
}

/*.banner4 {
  height: 30px;
  margin-bottom: 1px; /* nudges image down slightly 
  vertical-align: middle; /* try baseline or bottom if needed
} */

.banner5 {
	vertical-align: top;
	float: right;
	border-width: 0px;
	margin-left: 0px;
	margin-right: 50px;
}

.banner6 {
	border-width: 0px;
	vertical-align: top;
	float: right;
}
