/* ------------------------------
   Base Styles
------------------------------ */
body {
  margin: 0;
  padding: 0;
}

body {
  margin: 0; /* Removes default margin to eliminate browser spacing */
  font-family: 'Segoe UI', sans-serif; /* Sets a clean, modern base font */
  background-color: #f8f9fa; /* Light gray background for readability */
  color: #333; /* Sets primary text color to dark gray */
}

h1, h2, h3, nav a {
  font-family: 'Montserrat', sans-serif; /* Applies Montserrat font to headers and nav links */
  font-weight: 700; /* Makes text bold */
  text-transform: uppercase; /* Transforms text to all uppercase letters */
}

/* ------------------------------
   Header & Branding
------------------------------ */
.header-bar {
  display: flex; /* Uses flexbox for layout */
  align-items: center; /* Vertically centers content */
  justify-content: space-between; /* Places items on far ends horizontally */
  padding: 0.5em 1em; /* Adds space inside the header */
  background: linear-gradient(to right, white 0%, #1e3a8a 100%, #3b82f6 100%); /* Gradient background from white to blue */
  position: relative; /* Establishes positioning context for absolutely positioned children */
  z-index: 2; /* Ensures header stays above other elements */
}

.american_standard {
  padding-left: 180px; /* Pushes logo to the right */
  height: 60px; /* Sets image height */
  z-index: 2; /* Stacks it above background */
}

.logo-wrapper {
  position: absolute; /* Positions the logo over other elements */
  top: 5px; /* Distance from top edge of parent */
  left: 10px; /* Distance from left edge of parent */
  background: white; /* White background for contrast */
  padding: 0.5em; /* Padding inside the wrapper */
  border-radius: 20%; /* Rounded corners to give circular effect */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); /* Adds drop shadow */
  z-index: 3; /* Ensures it sits above everything else */
}

.logo {
  height: 130px; /* Logo height */
  width: auto; /* Keeps original aspect ratio */
  display: block; /* Removes inline spacing */
}

.slogan {
  flex-grow: 1; /* Takes up remaining space in flex container */
  text-align: right; /* Aligns slogan text to the right */
  color: white; /* White text for contrast on dark background */
  font-weight: 200; /* Thin font weight for a light look */
  font-size: 3.1em; /* Large text for emphasis */
  margin-left: 180px; /* Pushes text rightward from logo */
  margin-right: 10px; /* Space to the right edge */
  font-style: italic; /* Italic text style */
  font-family: "Satisfy", cursive; /* Uses cursive font for a friendly feel */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adds subtle shadow for readability */
}

/* ------------------------------
   Navigation Bar
------------------------------ */
.nav-container {
  max-width: 1600px; /* Restricts maximum width */
  margin: 0 auto; /* Centers nav container horizontally */
  width: 100%; /* Ensures full width inside max width */
}

nav {
  display: flex; /* Uses flexbox layout */
  background-color: #3b82f6; /* Sets nav bar background to blue */
  padding-left: 200px;*/ /* Optional left padding (commented out) */
}

.nav-flex {
  display: flex; /* Flexbox container */
  justify-content: space-between; /* Distributes items with space between */
  align-items: stretch; /* Stretches children to equal height */
  width: 100%; /* Full width container */
}

nav ul {
  display: flex; /* Displays list items in a row */
  margin: 0; /* Removes default margin */
  padding: 0; /* Removes default padding */
  list-style: none; /* Removes bullet points */
  align-items: stretch; /* Aligns list items to nav height */
}

nav li {
  display: flex; /* Makes list items flex containers */
  align-items: stretch; /* Ensures nav links fill height */
}

nav a {
  display: flex; /* Flex layout for centering */
  align-items: center; /* Vertically centers link text */
  padding: 0 1em; /* Adds left and right spacing */
  color: white; /* White text for contrast */
  text-decoration: none; /* Removes underline from links */
  font-weight: bold; /* Makes text bold */
  text-transform: uppercase; /* Converts text to uppercase */
  transition: background-color 0.3s ease; /* Smooth hover background transition */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adds shadow for contrast */
}

nav a:hover {
  background-color: #1e40af; /* Changes background on hover to darker blue */
}

.nav-right-text {
  display: flex; /* Flex container for right-side nav text */
  align-items: stretch; /* Aligns vertically with nav bar */
}

.nav-right-text a {
  display: flex; /* Flex container for link */
  align-items: center; /* Vertically centers content */
  padding: 0.75em 1em; /* Adds space inside link */
  gap: 6px; /* Space between text and icon */
  color: white; /* White text */
  text-decoration: none; /* Removes underline */
  font-weight: bold; /* Makes text bold */
  text-transform: uppercase; /* Uppercase letters */
}

.nav-right-text a:hover {
  background-color: #1e40af; /* Changes background on hover */
}

.nav-right-text img {
  height: 20px; /* Sets icon height */
  vertical-align: middle; /* Aligns image vertically with text */
}

/* ------------------------------
   Hero Image Section
------------------------------ */
.hero {
  width: 100%; /* Full width of container */
  max-width: 100%; /* Prevent overflow beyond full width */
  position: relative; /* Parent context for absolutely positioned slides */
}

.slider {
  position: relative; /* Enables absolute positioning for child slides */
  width: 100%; /* Full width of slider container */
}

.slide {
  opacity: 0; /* Hidden by default */
  transition: opacity 2s ease-in-out; /* Smooth fade effect */
  position: absolute; /* Stack slides on top of each other */
  top: 0; /* Align to top */
  left: 0; /* Align to left */
  width: 100%; /* Full width for slide */
}

.slide.active {
  opacity: 1; /* Make active slide visible */
  position: relative; /* Remove stacking effect for active slide */
  z-index: 1; /* Bring active slide to front */
}

.slide img {
  width: 100%; /* Fill container horizontally */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove inline spacing below image */
  object-fit: cover; /* Ensure image fills container without distortion */
}

.hero img {
  width: 100%; /* Full width */
  height: auto; /* Maintain image ratio */
  display: block; /* Prevent inline display spacing */
}

/* ------------------------------
   Section Separator Text
------------------------------ */
.seperator_text_home {
  text-align: center; /* Center-align text */
  font-size: 1.8em; /* Increase font size */
  font-weight: 400; /* Normal font weight */
  font-family: 'Merriweather', serif; /* Serif font for classic look */
  color: #1e3a8a; /* Deep blue text */
  margin: 0.5em auto; /* Vertical spacing with center alignment */
  padding: 0.5em; /* Padding inside the element */
  max-width: 800px; /* Limit max width for readability */
  border-top: 2px solid #3b82f6; /* Top border in blue */
  border-bottom: 2px solid #3b82f6; /* Bottom border in blue */
}

/* ------------------------------
   Main Content Grid
------------------------------ */
.grid {
  display: grid; /* Use CSS Grid layout */
  grid-template-columns: repeat(3, 1fr); /* Three equal-width columns */
  gap: 1.5em; /* Space between grid items */
  padding: 0em 1em; /* Horizontal padding */
  margin: 0 auto; /* Center the grid */
}

article {
  background: #f1f5f9; /* Light gray background for cards */
  border-radius: 10px; /* Rounded corners for card */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06); /* Subtle box shadow */
  padding: 0em 1.5em; /* Horizontal padding inside article */
  text-align: center; /* Center-align text */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animation on hover */
}

article a {
	text-decoration: none;
}

article:hover {
  transform: translateY(-4px); /* Lift card slightly on hover */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); /* Stronger shadow on hover */
}

article h2 {
  font-size: 1.4em; /* Slightly larger font */
  margin-bottom: 0.75em; /* Space below heading */
  color: #1e3a8a; /* Deep blue text */
  letter-spacing: 0.5px; /* Slight letter spacing for readability */
}
article h2 a {
	text-decoration:none; /*remove hyperlink look*/
	color: inherit; /*remove hyperlink color*/
}

article img {
  width: 80%; /* Image width relative to article */
  /*aspect-ratio: 3 / 2;*/ /* Optional aspect ratio, commented out */
  object-fit: contain; /* Prevent image cropping */
  border-radius: 8px; /* Rounded image corners */
  margin-bottom: 1em; /* Space below image */
  background: #fff; /* White background fallback */
  box-shadow: 5px 5px 5px #000000; /* Shadow around image */
}
.tarticle {
  background: #f1f5f9; /* Light gray background for cards */
  border-radius: 10px; /* Rounded corners for card */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06); /* Subtle box shadow */
  padding: 0em .5em; /* Horizontal padding inside article */
  text-align: center; /* Center-align text */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animation on hover */
}

.tarticle img {
  width: 100%; /* Image width relative to article */
  /*aspect-ratio: 3 / 2;*/ /* Optional aspect ratio, commented out */
  object-fit: contain; /* Prevent image cropping */
  border-radius: 8px; /* Rounded image corners */
  margin-bottom: 1em; /* Space below image */
  background: #fff; /* White background fallback */
  box-shadow: 5px 5px 5px; /* Shadow around image */
  transform-origin: center center;
  
}

.transleft img:hover {
    transition: transform 1s, left 1s, top 1s;
  	cursor: pointer;
	transform: scale(1.5) translateX(20%) translateY(-20%);
	z-index:10;
	position: relative;
}
.transright img:hover {
    transition: transform 1s, left 1s, top 1s;
  	cursor: pointer;
	transform: scale(1.5) translateX(-20%) translateY(-20%);
	z-index:10;
	position: relative;
}
.transbottom img:hover {
    transition: transform 1s, left 1s, top 1s;
  	cursor: pointer;
	transform: scale(1.5) translateX(0%) translateY(-20%);
	z-index:10;
	position: relative;
}




article p {
  font-size: 1em; /* Standard text size */
  color: #333; /* Dark gray text */
  line-height: 1.5; /* Line spacing for readability */
}

/* ------------------------------
   Footer Styles
------------------------------ */
footer {
  background-color: #1e3a8a; /* Deep blue background */
  color: white; /* White text */
  text-align: center; /* Center-align content */
}

.footer-with-wave {
  background-color: #1e3a8a; /* Match footer color */
  color: white; /* White text */
  text-align: center; /* Center-align content */
  position: relative; /* Position context for wave */
  padding-top: 0; /* Remove top padding */
}

.footer-wave {
  position: absolute; /* Overlay footer wave */
  top: -50px; /* Position wave above footer */
  left: 0; /* Align to left edge */
  width: 100%; /* Full width */
  overflow: hidden; /* Hide overflow beyond boundaries */
  line-height: 5; /* Line height for spacing control */
  z-index: 1; /* Layer behind footer content */
}

.footer-wave svg {
  display: block; /* SVG takes up block space */
  width: 100%; /* Fill container horizontally */
  height: 80px; /* Set height for wave */
}

.footer-content {
  padding: 0 0 1em; /* Bottom padding */
  position: relative; /* Position above the wave */
  z-index: 2; /* Ensure content appears over wave */
}

.footer-content a {
  color: #93c5fd; /* Light blue link color */
  text-decoration: none; /* No underline */
}

.footer-content a:hover {
  text-decoration: underline; /* Underline on hover */
}

/* ------------------------------
   Footer Visibility by Device
------------------------------ */
.footerclassdefault {
  display: block; /* Show on larger screens */
}

.footerclassmobile {
  display: none; /* Hide on larger screens, shown via media query */
}

 .menu-toggle {
  	display: none;
  	justify-content: center; /* ⬅ Centers the content horizontally */
  	font-size: 1.5em;
  	color: white;
  	cursor: pointer;
  	text-align: center;
  	/*width: 100%; /* ⬅ Ensures it takes up full row width */
  	padding: 0.5em 0;
  	width: 100%;
  }
  .MenuTitle {
	width: 100%;
	display: none;
  }
.mobilemessage {
	display: none;
 }


/* ------------------------------
   Responsive Styles
------------------------------ */
/* ------------------------------
   1500px screen size 
------------------------------ */
@media screen and (max-width: 1499px) {
  nav {
    text-align: center; /* Center text inside the nav */
    width: 100%; /* Reduce nav width for layout adjustment */
    padding-left: 200px; /* Left padding to shift content */
    /*padding-right: 100px; /* Add this to balance the layout */
    box-sizing: border-box; /* Ensures padding doesn’t overflow container */
  }

  .nav-right-text {
    display: flex; /* Use flex layout */
    align-items: stretch; /* Stretch items to match nav height */
    padding-right: 0px; /* Remove right padding */
  }

  .nav-right-text a {
    display: flex; /* Flex for alignment */
    align-items: center; /* Center content vertically */
    padding: 0.75em 1em; /* Add spacing around link */
    gap: 6px; /* Space between text and icon */
    color: white; /* White text color */
    text-decoration: none; /* No underline */
    font-weight: bold; /* Bold text */
    text-transform: uppercase; /* Uppercase styling */
  }
     .logo {
    height: 100px; /* Shrink logo */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Remove inline spacing */
  }

  .american_standard {
    padding-left: 140px; /* Adjust logo spacing */
    height: 50px; /* Smaller image height */
    z-index: 2; /* Stack above background */
  }
    article h2 {
    font-size: 1em; /* Shrink heading */
  }


}

/* ------------------------------
   1356px screen size 
------------------------------ */
@media screen and (max-width: 1355px) {
  nav {
    padding-left: 180px; /* Left padding to shift content */
    font-size: .75em;
    }
}


/* ------------------------------
   1300px screen size 
------------------------------ */
@media screen and (max-width: 1299px) {
  nav {
    padding-left: 150px; /* Left padding to shift content */
    font-size: .75em;
    }
    
   .logo {
    height: 100px; /* Shrink logo */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Remove inline spacing */
  }

  .american_standard {
    padding-left: 140px; /* Adjust logo spacing */
    height: 50px; /* Smaller image height */
    z-index: 2; /* Stack above background */
  }
  
  .fixemail {
	font-size: .85em;
}

}
	

/* ------------------------------
   1200px screen size 
------------------------------ */
@media screen and (max-width: 1199px) {
  nav {
    padding-left: 120px; /* Left padding to shift content */
    font-size: .75em;
    }

  .slogan {
    flex-grow: 1; /* Take available space */
    text-align: right; /* Align slogan to right */
    color: white; /* White text */
    font-weight: 200; /* Light font weight */
    font-size: 3em; /* Slightly reduced text size */
    margin-left: 90px; /* Adjust spacing from logo */
    margin-right: 10px; /* Adjust right margin */
    font-style: italic; /* Italic style */
    font-family: "Satisfy", cursive; /* Decorative font */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Shadow for visibility */
  }

  .logo-wrapper {
    position: absolute; /* Keep logo positioned */
    top: 5px;
    left: 10px;
    background: white; /* Background behind logo */
    padding: 0.5em; /* Padding inside wrapper */
    border-radius: 20%; /* Rounded corners */
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); /* Shadow */
    z-index: 3; /* On top layer */
  }

  .logo {
    height: 80px; /* Shrink logo */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Remove inline spacing */
  }

  .american_standard {
    padding-left: 120px; /* Adjust logo spacing */
    height: 50px; /* Smaller image height */
    z-index: 2; /* Stack above background */
  }

  article h2 {
    font-size: 1em; /* Shrink heading */
  }

  article p {
    font-size: 0.75em; /* Shrink paragraph */
  }
}
/* ------------------------------
   1100px screen size 
------------------------------ */
@media screen and (max-width: 1099px) {
  /* Adjusts the slogan for medium screen sizes */
  .slogan {
    flex-grow: 1; /* Allows it to grow and fill available space */
    text-align: right; /* Aligns slogan text to the right */
    color: white; /* White text color for contrast on dark backgrounds */
    font-weight: 200; /* Light font weight for a subtle appearance */
    font-size: 2em; /* Smaller than desktop version for responsiveness */
    margin-left: 90px; /* Space between logo and slogan */
    margin-right: 10px; /* Padding to the right edge */
    font-style: italic; /* Italicized for visual style */
    font-family: "Satisfy", cursive; /* Cursive font for friendly tone */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adds shadow for text legibility */
  }

  .logo-wrapper {
    position: absolute; /* Positioned relative to the nearest positioned ancestor */
    top: 5px; /* Distance from the top */
    left: 10px; /* Distance from the left */
    background: white; /* Background color to ensure logo visibility */
    padding: 0.5em; /* Internal padding around logo */
    border-radius: 20%; /* Rounded container for visual appeal */
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); /* Drop shadow for depth */
    z-index: 3; /* Places logo above other elements */
  }

  .logo {
    height: 80px; /* Smaller height for responsiveness */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Removes inline spacing */
  }
    .american_standard {
    padding-left: 120px; /* Adjust logo spacing */
    height: 40px; /* Smaller image height */
    z-index: 2; /* Stack above background */
  }


  article h2 {
    font-size: 1em; /* Reduces heading size for smaller screens */
  }

  article p {
    font-size: 0.75em; /* Reduces paragraph font size for readability on smaller devices */
  }
}
/*-------------------------------
   970px Screen Resize (tablets)
--------------------------------*/
@media screen and (max-width: 969px) {
  nav {
    padding-left: 120px; /* Left padding to shift content */
    font-size: .6em;
    }
.fixemail {
	font-size: .6em;
}

}

/*-------------------------------
   800px Screen Resize (tablets)
--------------------------------*/
@media screen and (max-width: 799px) {
  /* Shrinks and restyles the slogan for tablet-sized screens */
  .slogan {
    flex-grow: 1; /* Allows the slogan to grow and fill available space */
    text-align: right; /* Align text to the right */
    color: white; /* White text for contrast */
    font-weight: 200; /* Light font weight */
    font-size: 1.5em; /* Smaller text size for tablets */
    margin-left: 90px; /* Padding from the left */
    margin-right: 10px; /* Padding from the right */
    font-style: italic; /* Italicized for visual emphasis */
    font-family: "Satisfy", cursive; /* Decorative cursive font */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Shadow for better visibility */
  }

  .american_standard {
    padding-left: 100px; /* Less left padding for tighter layout */
    height: 30px; /* Reduce height for smaller screens */
    z-index: 2; /* Ensure it's above background layers */
  }

  .logo-wrapper {
    position: absolute; /* Position logo absolutely in header */
    top: 5px; /* From the top of container */
    left: 10px; /* From the left of container */
    background: white; /* White background to contrast with logo */
    padding: 0.5em; /* Inner spacing around the logo */
    border-radius: 20%; /* Rounded corners for style */
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); /* Drop shadow for depth */
    z-index: 3; /* Places logo on top of other elements */
  }

  .logo {
    height: 60px; /* Reduce logo height for small screens */
    width: auto; /* Keep aspect ratio intact */
    display: block; /* Removes extra space below image */
  }

  nav a {
    font-size: 0.85em; /* Smaller text in nav links */
    padding: 0.5em 0.75em; /* Adjust padding for compact layout */
  }

  /* Shrink the social media button text for smaller viewports */
  .nav-right-text a {
    font-size: 0.8em; /* Reduce font size */
    padding: 0.5em 0.75em; /* Adjust padding */
  }

  /* Prevent wrapping of social media label on small devices */
  .nav-right-text span {
    white-space: nowrap; /* Keeps span text on one line */
  }

  /* Reduce the gap between icon and text if space is tight */
  .nav-right-text a {
    gap: 4px; /* Narrow the space between icon and label */
  }

  .nav-right-text a span {
    display: none; /* Hide text label beside icon for very small screens */
  }

  .grid {
    grid-template-columns: repeat(2, 1fr); /* Switch to two-column layout */
    gap: 1em; /* Space between columns */
    padding: 1em; /* Padding around the grid */
  }

  article h2 {
    font-size: 1em; /* Smaller headings for space management */
  }

  article p {
    font-size: 0.75em; /* Shrink paragraph text for legibility on tablets */
  }
  .transleft img:hover {
    transition: transform 1s, left 1s, top 1s;
  	cursor: pointer;
	transform: scale(1) translateX(0) translateY(0);
	z-index:10;
	position: relative;
}
.transright img:hover {
    transition: transform 1s, left 1s, top 1s;
  	cursor: pointer;
	transform: scale(1) translateX(0) translateY(0);
	z-index:10;
	position: relative;
}
.transbottom img:hover {
    transition: transform 1s, left 1s, top 1s;
  	cursor: pointer;
	transform: scale(1) translateX(0%) translateY(0);
	z-index:10;
	position: relative;
}

}
/*-------------------------------
   585px Screen Resize (phones)
--------------------------------*/
@media screen and (max-width: 584px), print {
	  .slogan {
    font-size: 1.5em; /* Reduced slogan font size */
    text-align: center; /* Center text for mobile view */
    margin: 0.5em auto; /* Space above and below */
    color: white; /* White text for contrast */
    font-family: "Satisfy", cursive; /* Decorative cursive font */
    font-style: italic; /* Italic style for flair */
  }

}
/*-------------------------------
   480px Screen Resize (phones)
--------------------------------*/
@media screen and (max-width: 534px), print {
  /* ------------------------------
     Layout Adjustments
  ------------------------------ */
  .hero {
    display: none; /* Hides the hero section on small screens to save space */
  }

  .grid {
    grid-template-columns: 1fr; /* Stacks all content in a single column */
    gap: 1em; /* Adds space between stacked items */
    padding: 1em; /* Adds padding around the grid */
  }

  /* ------------------------------
     Header & Logo Area
  ------------------------------ */
  .header-bar {
    flex-direction: column; /* Stack header items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    padding: 1em 0; /* Add vertical padding */
    text-align: center; /* Center text content */
    background: linear-gradient(to bottom, white 0%, #1e3a8a 100%); /* Vertical gradient background */
  }

  .logo-wrapper {
    background: white; /* Background for logo container */
    padding: 0.5em; /* Padding inside the logo wrapper */
    border-radius: 20%; /* Rounded corners */
    margin-bottom: 0.5em; /* Space below the logo */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2); /* Light drop shadow */
    position: static; /* Reset position for vertical stacking */
  }

  .logo {
    height: 150px; /* Larger size for logo on small screens */
    display: block; /* Removes inline spacing */
    margin: 0 auto; /* Centers the logo horizontally */
  }

  .american_standard {
    padding-left: 0; /* Remove left spacing */
    height: 50px; /* Smaller logo height */
    margin: 0.5em 0; /* Vertical spacing */
  }

  .slogan {
    font-size: 2em; /* Reduced slogan font size */
    text-align: center; /* Center text for mobile view */
    margin: 0.5em auto; /* Space above and below */
    color: white; /* White text for contrast */
    font-family: "Satisfy", cursive; /* Decorative cursive font */
    font-style: italic; /* Italic style for flair */
  }

  /* ------------------------------
     Navigation Area
  ------------------------------ */
  nav {
    text-align: center; /* Center align nav items */
    width: 100%; /* Full width */
    padding-left: 0px; /* Remove left padding */
    position: sticky;
  	top: 0;
  	z-index: 10;
  	background-color: #3b82f6;
  	padding: 0.5em 1em;
  }

  .nav-flex {
    display: none; /* Enable flexbox */
    flex-direction: column; /* Stack nav items vertically */
    align-items: center; /* Center-align items horizontally */
    justify-content: center; /* Center-align items vertically */
    background-color: #3b82f6;
    width: 100%; /* Full width of container */
  }
    
  nav.active .nav-flex {
  	display: flex;
  }
    
  .menu-toggle {
  	display: flex;
  	justify-content: center; /* ⬅ Centers the content horizontally */
  	font-size: 1.5em;
  	color: white;
  	cursor: pointer;
  	text-align: center;
  	/*width: 100%; /* ⬅ Ensures it takes up full row width */
  	padding: 0.5em 0;
  	width: 100%;
  }
  .MenuTitle {
	width: 100%;
	display: inline;
  }
  .mobilemessage {
	display: block;
	background-color: #1e3a8a; /* Dark blue background */
  color: #fff; /* Bright white text */
  text-align: center;
  padding: 1em;
  font-size: 1.1em;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  border-top: 2px solid #60a5fa; /* Accent line */
  border-bottom: 2px solid #60a5fa;
 }
 .mobilemessage a {
  color: #93c5fd; /* Lighter blue for link */
  text-decoration: underline;
  font-size: 1.2em;
  display: inline-block;
  margin-top: 0.5em;
}
    nav ul {
    display: flex; /* Flexbox for ul */
    flex-direction: column; /* Stack nav items */
    align-items: center; /* Center-align list items */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    width: 100%; /* Full width for nav list */
    list-style: none; /* Remove bullets */
  }

  nav li {
    margin: 0.25em 0; /* Vertical spacing between links */
    width: auto; /* Auto width based on content */
    text-align: center; /* Center-align link text */
  }

  nav a {
    display: inline-block; /* Allows padding without full-width block */
    padding: 0.75em 1em; /* Padding around each nav link */
    font-size: 2em; /* Base font size for nav */
    text-align: center; /* Center-align text */
    width: auto; /* Shrink to content */
    background-color: transparent; /* Remove background color */
  }

  .nav-right-text {
    width: 100%; /* Full width for social section */
    display: flex; /* Flexbox layout */
    justify-content: center; /* Center content horizontally */
    margin-top: 0.5em; /* Space above this section */
  }

  .nav-right-text a {
    display: inline-flex; /* Flex layout to align icon/text */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    font-size: 0.95em; /* Slightly smaller text */
    gap: 6px; /* Space between icon and label */
    padding: 0.75em; /* Padding around link */
    width: auto; /* Fit to content */
  }

  .nav-right-text img {
    height: 20px; /* Icon height */
  } 
  /* ------------------------------
     Content Styles
  ------------------------------ */
  article h2 {
    font-size: 1.2em; /* Slightly larger heading for mobile readability */
  }

  article p {
    font-size: 0.95em; /* Comfortable reading size on small screens */
  }

  article img {
    max-width: 100%; /* Ensures image fits container */
    height: auto; /* Maintain original aspect ratio */
  }

  .seperator_text_home {
    font-size: 1.2em; /* Reduce size for mobile layout */
    padding: 0.5em; /* Padding around separator */
  }

  /* ------------------------------
     Footer
  ------------------------------ */
  footer {
    font-size: 0.9em; /* Smaller font for compact footer on phones */
  }

  .footerclassdefault {
    display: none; /* Hide full footer for mobile view */
  }

  .footerclassmobile {
    display: block; /* Show compact mobile footer */
  }
}