* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,h1,h2,h3,h4,h5,h6 { /*font-family: "Raleway", sans-serif */

  font-family: "Mulish", sans-serif;
}

body, html {
  height: 100%;
/*  line-height: 1.8; */
}

a {
  background-color: transparent;
}

a {
  color: inherit;
}

a:active, a:hover {
  outline-width: 0;
}

.wrapper {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  min-height: 100vh; /* Ensure the wrapper takes up at least the full height of the viewport */
}


#contentZone { 
	flex: 1; /* This will make the content area take up any remaining space */
  	padding: 20px 0;
  	/* Adjust your content area styles */
}

#funText {
	margin: 20px 0 40px 225px;
/*	width: 100%; */
	font-size:clamp(25px, 4vw, 35px);
	line-height:clamp(42px, 6vw, 54px);
}
.fun-aqua {
	color: #45b9c4;
}
.fun-blue {
	color: #0c3e57; /* 1d4458; */
}

.bgimg-1 {
  position: relative;
  width: 94%;
  aspect-ratio: 2 / 1;           /* 1900×950 ratio */
  overflow: hidden;
  background-color: #000;
  margin: 80px auto 20px auto;
}
.bgimg-1 img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}


.bgimg-2 {
  background-position:center;
  background-size: cover;
  background-image: url("/images/mmp_header.jpg");
  min-height: 80%;
}

/* --- Mobile Styles --- */
@media (max-width: 768px) {
	#funText {
		margin: 20px 0 40px 190px;
		font-size:25px;
		line-height:42px;
	}
	
}

@media (max-width: 550px) {
	#funText {
		margin: 10px 0 30px 175px;
		font-size:24px;
		line-height:41px;
		width: auto;
	}
	.bgimg-1 {
		aspect-ratio: 4 / 3; 
	}
	
}

/* Full height image header 
.bgimg-1 {
  background-position: center;
  background-size: cover;
  background-image: url("mmp_header.jpg");
  min-height: 80%;
}

.w3-bar .w3-button {
 /* padding: 16px; 
}
*/