/* detect Smartphones ----------- */
/* old version 
@media only screen and (max-width: 480px;) {
	#mobiledetect { display: none; }
}*/
/* DynaTact (DT) Resources Pack*/
@media only screen and (max-width: 480px) {
	#mobiledetect { display: none; }
}



body {
	font-family: Arial, sans-serif;
	/*padding: 20px;*/ /* Fixed wordings outframe*/
	background-color: #ffffff;
	font-size: 16px; /* Base font size for scaling */
	line-height: 1.6;
	margin: 0;
	padding: 0;
}

.banner {
	width: 100%;
	height: 240px;
	/*width: 98vw;*/
	aspect-ratio: 5 / 1; /* Adjust based on image aspect ratio */
	background-image: url(../images/HAIDC.png);
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
}

.nav {
	background-color: #e7630f;
	padding: 10px;
	display: flex;
	flex-wrap: wrap; /* Allows nav items to wrap on smaller screens */
	justify-content: center; /* Center navigation items */
}

.nav a {
	color: white;
	text-decoration: none;
	padding: 5px 10px;
	font-size: 1rem;
	text-align: center;
	flex: 1 1 auto; /* Flexible items */
}

.nav a:hover {
	background-color: #b94e0c;
}

.content {
	margin: 0 auto;
	max-width: 1600px; /* Max width for larger screens */
}

.main {
	width: 100%; /* Full width */
	padding: 20px;
	text-align: center; /* Center text in main content */
}

.main h1 {
	font-size: 2rem;
	margin-bottom: 20px;
}

.main p {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 auto;
	max-width: 800px; /* Limit paragraph width for readability */
}

.main iframe {
	width: 100%;
	border: none;
	display: block; /* Ensures no extra spacing */
}

/* Ensure main page scrolling is clean */
html, body {
	overflow-x: hidden; /* Prevent horizontal scrolling */
}