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

/* Body styling */
body {
    background-color: #EAEAEA;
    font-family: Arial, sans-serif;
    color: #333;
}

/* ------ Base Styles (Mobile First) ------ */
/* Body Styling */
body {
	background-color: #90C7E3;
	font-family: Arial, sans-serif;
	color: #333;
	margin: 0;
}

/* Wrapper */
#wrapper {
    width: 100%;
    margin: 0 auto;
    background-color: white;
}

/* Header */
header {
    background-color: #90C7E3;
    color: white;
    text-align: center;
    font-size: 2em;
    letter-spacing: 0.15em;
    padding: 1em;
}

/* Header links */
header a {
    text-decoration: none;
    color: white;
}
header a:hover {
    color: #5C7FA3;
}

/* Navigation (Mobile: stacked Links) */
nav {
	text-align: center;
    background-color: white;
    padding: 0.5em;
}

nav ul {
    list-style-type: none;
	display: flex;
	flex-direction: column;
	text-align: center;
    padding: 0;
}

nav ul li {
	border-bottom: 1px solid white;
}

nav ul li a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 10px;
}

nav ul li a:hover {
    background-color: #344873;
}

/* Hero image container */
.hero-container {
	width: 100%; /* Ensures conatiner takes up full width */
	overflow: hidden; /* Ensures the image does not overflow */
}


/* Hero image */
.hero {
	width: 100%;    /* Image spans full container width */
	max-width: 100%; /* Prevents it from exceeding its orginal size */
	height: auto; /* maintains aspect ratio */
	display: block; /* Avoids extra space below inline images */
	margin: 0 auto; /* centers the image; */
	object-fit: cover; /* Ensures good fit for different screen sizes */
}

/* Main content */
main {
    background-color: white;
	padding: 1em;
}

/* Sections */
section {
    padding: 1em;
}

/* Footer */
footer {
    background-color: white;
    text-align: center;
    padding: 1em;
}

/* Hyperlinks */
a:link {
    color: #5C7FA3;
}
a:visited {
    color: #344873;
}
a:hover {
    color: #A52A2A;
}

/* Mobile Phone Number Styling */
#mobile { display: block; }
#desktop { display: none; }

/* ------ Medium Screens (600px+) ------- */
@media screen and (min-width: 600px) {
	/* Ensures the entire image fits */
	.hero {
		width: 100%; 
		height: auto;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}
	
	/* Header */
	h1 {
		font-size: 2.5em;
		letter-spacing: 0.2em;
	}
	
	/* Navigation (horizontal layout) */
	nav ul {
		flex-direction: row;
		justify-content: center;
	}
	
	nav ul li {
		border: none;
		padding: 1em;
	}
	
	/* Adjust content layout */
	#wrapper {
		width: 95%;
		margin: auto;
		background-color: white;
	}
	
	main {
		padding: 1em;
		display: flex;
		flex-direction: column;
		align-items: center;  /* centers content horizontally */
	}
	
	section {
		width: 100%;
		max-width: 600px; /* keeps it readable on wide phones */
	}
	
	/* Desktop phone number */
	#mobile { display: none; }
	#desktop { display: inline; }
}

/* ------- Large Screens (1024px+) -------- */
@media screen and (min-width: 1024px) {
	/* Gradient background */
	body {
		background: linear-gradient(to bottom, white 20%, #90C7E3, white);
	}
	
	
	/* Wrapper width */
	#wrapper {
		width: 80%;
		margin: auto;
	}
	
	/*main content as two-column layout */
	main {
		display: flex;
		justify-content: space-between;
	}
	
	section {
		width: 45%;
		padding: 2em;
	}
	
	/* Hero image */
	.hero {
		width: 100%;
		height: auto;  /* maintain aspect ratio */
		object-fit: cover; /* Ensures the image fills without stretching */
	}
	
	/* footer */
	footer {
		padding: 1.5em;
	}
}