style.css

:root {
  --primary-color: #00539c; /* Light blue  #0057ad */
  --secondary-color: #00264d; /* Dark blue */
  --accent-color: #CCE7FF; /* Light sky blue */
  --text-color0: #f9f9f9; /* Ghost white */
  --text-color: #333; /* Dark grey */
  --background-color: #CDC6C6; /* Light grey */
  --background-color2: #e6e6e6; /* Light grey */
}

/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
	
	body {
		font-family: 'Roboto', Arial, sans-serif;
		margin: 0;
		padding: 0;
		background-color: #f9f9f9;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		position: relative;
	}

	.overlay {
		position: absolute; /* Position it over the image */
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0); /* Add a transparent black overlay */
		z-index: 1;
		/*pointer-events: none; /* Allow clicks to pass through to lower elements */
	}
	
	header {
		background: linear-gradient(45deg,var(--secondary-color), var(--primary-color)); /* Adds a gradient */
		color: var(--text-color0);
		text-align: center;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column; /* Stack content vertically */
		justify-content:  center; /* Center the content */
		align-items: center;
		position: relative; /* Ensure the logo can be positioned absolutely */
		z-index: 5;
		padding: 5px;
		user-select: none; /* Prevent text selection */
	}

	.header-content {
		display: inline-block;
		text-align: center;
	}
	
	header h1 {
		font-size: 1.5em; /* Larger font for desktop */
		margin: 0;
	}
	
	header h4{
		color: var(--text-color0);
	}

	header p {
		font-size: 0.9em;
		margin: 5px;
	}

	header img {
		position: absolute;
		width: 35px;
		height: 35px;
		left: 3px;
		top: 50%;
		transform: translateY(-50%);
	}
	

/* NAVIGATION MENU */
nav {
    padding: 0; /* Removed padding from original */
    margin: 0; /* Removed margin-top from original */
    background-color: var(--primary-color); /* Ensures the header and menu have a cohesive color */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Slightly more prominent shadow for a floating effect */
    border-radius: 8px; /* Rounded corners for a smoother look */
	z-index: 5;
}

nav ul {
    /* MODIFIED */
    list-style: none;
    /*display: Block; /* Hidden by default for mobile */
    flex-direction: column; /* Stack items for mobile view */
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%; /* Below the header */
    right: 0;
    width: 20%;
    background-color:  var(--secondary-color); /* Optional background for dropdown */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 5;
    border-radius: 10px; /* Rounded corners for the dropdown */
}

nav ul li {
    text-align: center; /* Center-align text in dropdown */
}

nav ul li a {
    /* RETAINED FROM ORIGINAL */
    color: var(--text-color0); /* Matches header text color */
    text-decoration: none;
    font-size: 1rem;
    padding: 10px; /* Increased padding for easier tapping on mobile */
    display: block; /* Ensures links fill their container */
    transition: background-color 0.3s, color 0.3s;
}

nav ul li a:hover {
    /* RETAINED FROM ORIGINAL */
    background-color: #e0efff; /* Matches service-item hover background */
    color: #0066cc; /* Matches overall color scheme */
}

nav ul li a.active {
    /* RETAINED FROM ORIGINAL */
    font-weight: bold;
    text-decoration: underline;
    background-color: #f0f8ff; /* Matches service-item background */
    color: #0066cc; /* Matches header text */
}

#menu-button {
	cursor: pointer;
	z-index: 5;
    position: absolute; /* Allow positioning within the header */
    right: 10px; /* Align to the right */
    top: 50%; /* Vertically center */
    transform: translateY(-50%); /* Adjust for exact vertical centering */
	color: var(--secondary-color); /* Match sec color */
}

.hidden {
    display: none; /* Hides the nav menu when the .hidden class is applied */
}

#nav-menu {
	display: none; /* Ensure the menu is hidden by default */
	z-index: 5;
}

#nav-menu:not(.hidden) {
    display: block; /* Show the menu when the .hidden class is removed */
}

		/* General Section Styling
		.feature-section {
			padding: 1rem 0;
			background-color: #f9f9f9; /* Light background
		}*/

		/* Flex container for image and text */
		
		.custom-bullets li {
			list-style: none; /* Remove default bullets */
			position: relative;
			padding-left: 20px; /* Space for custom bullet */
			line-height: 1.2;
		}

		.custom-bullets li::before {
			content: '➢'; /* Unicode for bullet ➣➢ */
			position: absolute;
			left: 0;
			color: var(--primary-color); /* Custom color */
			font-size: 1.2em; /* Adjust size */
			margin-right: 10px;
		}

		.feature-container {
			display: flex;
			flex-direction: column; /* Mobile first: stacked layout */
			align-items: center;
			gap: 1.5rem;
			max-width: 1200px; /* Ensures centering on large screens */
			position: relative;
			padding: 1rem;
		}

		.feature-image {
			order: 2; /* Ensure text comes first */
			user-select: none;
		}
		
		/* Image Styling */
		.feature-image img {
			width: 100%;
			max-width: 350px;
			border-radius: 10px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			  flex: 1 1 50%; /* Equal width */
			  aspect-ratio: 1.5; /* Forces square */
			  overflow: hidden;
			  object-fit: cover;
		}

		/* Text Block Styling */
		.feature-text {
			display:grid;
			background: #f9f9f9;
			padding: 1.5rem;
			border-radius: 10px;
			box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
			z-index: 2;
			user-select: none; /* Prevent text selection */
			position: relative;
			order: 1; /* Ensure text comes first */
			opacity: 0; /* Hidden initially */
			transform: translateX(100%); /* Positioned off-screen to the rt */
			transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth animation */
		}

/* Active state: Bring the text into view */
.feature-text.active {
    opacity: 1;
    transform: translateX(0); /* Reset to original position */
}

/* Reverse slide-in for text only (from the right) */
.feature-container.reverse .feature-text {
    transform: translateX(-100%); /* Positioned off-screen to the lt */
}

/* Active reverse: Bring the text into view */
.feature-container.reverse .feature-text.active {
    transform: translateX(0); /* Reset to original position */
}

		
		.cta {    
			position: relative; /* Create a new stacking context for the link */
			z-index: 2; /* Place the link above the overlay */
			pointer-events: auto; /* Enable clicks on this specific element */
			display: grid;
			place-self: center;
		}

			
	.container {
		width: 90%;
		margin: 20px auto;
		background: var(--background-color);
		/*padding: 20px;*/
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		border-radius: 8px;
		flex: 1;
	}
	.profile {
		border-radius: 8px;
		background: var(--background-color2);
		margin: 10px;
		}
	.profile-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}
	.profile-section section {
		width: 100%;
	}
	.profile-image {
		text-align: center;
		position: relative;  /*Make the container a positioned element */
		z-index: 0;
	}
	.profile-image img {
		border-radius: 50%;
		width: 80px;
		height: 80px;
		object-fit: cover;
		margin-top: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	}
	
	.more-link {
		color: #00539C;
		cursor: pointer;
		text-decoration: underline;
		z-index: 2;
		position: relative;
	}
	.more-content {
		display: none;
	}
	h2 {
		color: var(--secondary-color);
		text-align: center;
		font-size: 1.2em;
		margin: 0;
	}
	h3 {
		text-align: center;
		font-size: 1em;
		margin: 3px;
		color: var(--secondary-color);
		}
	h4 {
		font-size: 0.875em;
		margin: 0;
		color: var(--text-color);
		text-align: center;
	}			
	p {
		font-size: 0.875em;
		color: var(--text-color)
	}	
	.contact-info {
		background-color: var(--background-color2);
		padding: 5px;
		border-radius: 8px;
		/*margin-bottom: 20px;*/
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		z-index: 2;
		position: relative;
	}
	.contact-info p {
		margin: 5px 0;
		text-align: center;
	}
	
	ul {
		font-size: 14px;
		padding-left: 2px; /* Reduce this value to decrease space */
	}

	
	.services {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 15px;
		order: 2;
	}
	.service-item {
		background-color: var(--primary-color);
		color: white;
		padding: 35px;
		border-radius: 8px;
		position: relative;
		cursor: pointer;
		font-size: 1.1em;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		z-index: 2;
	}
	.service-item:hover {
		transform: translateY(-5px); /* Slight lift effect */
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
		background-color: var(--secondary-color);
	}
	.service-content {
		display: none;
		padding: 10px;
		background-color: var(--background-color2);
		border-radius: 8px;
		margin-top: 5px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	
	.contact-page {
    padding: 2rem 1rem;
    background-color: #f9f9f9;
}

.contact-info {
    text-align: center;
    margin-bottom: 2rem;
}

.contact-info h2 {
    color: var(--primary-color);
    font-size: 2rem;
}

.contact-info p {
    color: var(--text-color);
    font-size: 1rem;
}

.info-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.info-card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 280px;
    text-align: center;
}

.info-card h3 {
    color: var(--secondary-color);
    font-size: 1.2rem;
}

.info-card p {
    color: var(--text-color);
    font-size: 1rem;
}

.contact-form {
    background-color:  var(--background-color2);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 0 auto;
    position: relative; /* Normal position is static*/
	z-index: 2;
}

.contact-form h2 {
    color: var(--primary-color);
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.contact-form .form-group {
    margin-bottom: 1.5rem;
}

.contact-form label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--secondary-color);
		position: absolute; /* Remove from the document flow */
		clip: rect(0 0 0 0); /* Clip the label so it doesn't appear visually */
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.contact-form textarea {
    resize: vertical;
}

.contact-form .btn-submit {
    background-color: var(--primary-color);
    color: #ffffff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-form .btn-submit:hover {
    background-color: var(--secondary-color);
}
.invalid {
  border: 2px solid red !important;
}

	
	footer {
		background: linear-gradient(45deg, var(--primary-color),var(--secondary-color)); /* Adds a gradient */
		color: var(--text-color0);
		text-align: center;
		padding: 10px;
		font-size: 0.9em;
	}
	
	footer p {
    margin: 5px 0;
	}

	footer .social-icons {
		margin-top: 10px;
	}

	footer .social-icons img {
		width: 24px;
		height: 24px;
		margin: 0 5px;
		cursor: pointer;
		transition: transform 0.2s;
	}
	
	@media (min-width: 768px) {
		header {
			padding: 20px;
		}
		header img {
			width: 100px;
			height: 100px; /* larger size */
			left: 20px;
		}
		header h1 {
			font-size: 2.5em;
			margin: 15px;
		}
		header h3 {
			font-size: 1.2em;
			margin: 0;
		}
		h2 {
			font-size: 2em;
			padding-bottom: 10px;
			margin: 0;
		}
		h3 {
			font-size: 1.5em;
			margin: 0;
		}
		h4 {
		font-size: 1.2em;
		margin: 0;
		}			
		p {
			font-size: 1em;
		}
		
			nav {
		padding: 10px 0;
		margin-top: 10px; /* Space between text and navigation! */
		background-color: transparent;  
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
	}
	
		   nav ul {
        display: flex; /* Show nav menu as a row on desktop */
        flex-direction: row; /* Ensure items are in a row */
        justify-content: center; /* Center align */
        gap: 30px; /* Retained gap */
        position: relative; /* Normal position is static*/
        background-color: transparent; /* No background for desktop */
        box-shadow: none; /* Remove shadow for desktop */
		z-index: 2;
		width: 100%;
		}
		
			nav ul li a {
		padding: 5px;
		border-radius: 3px;
		}

		#menu-button {
			display: none; /* Hide the button on larger screens */
		}
		
		#nav-menu {
			display: block; /* Or any other display value, like flex or inline-block */
		}
		
		.container {
			/*flex-direction: row;*/
			width: 90%;
		}
	
		ul {
			font-size: 16px;
			padding-left: 20px; /* Reduce this value to decrease space */
		}

		.custom-bullets li::before {
			position: relative;
		}
		
		.profile-section {
			flex-direction: column;
			justify-content: space-between;
		}
		.profile-section section {
			/* width: 45%; */
		}
		.profile {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 50%;
			margin: 20px;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
		}
		.profile-image {
			margin: 0 20px;
		}
		.profile-image img {
		width: 120px;
		height: 120px;
		border-radius: 10%;
		}	
		
	
		.feature-container {
			flex-direction: row; /* Horizontal layout for larger screens */
			align-items: center;
			justify-content: center;
			text-align: left;
			margin: 2rem auto;
			gap: 2rem;
		}

		.feature-container.reverse {
			flex-direction: row-reverse; /* Reverse for alternating layout */
		}

		.feature-container .feature-text {
			max-width: 500px;
			margin-left: -60px; /* Overlap */
		}

		.feature-container.reverse .feature-text {
			margin-left: 0;
			margin-right: -60px; /* Reverse overlap */
		}
		.feature-text {
			min-height: 200px; /* Adjust based on your design */
			min-width: 500px; /* Adjust based on your design */
			order: 0; /* Default order for horizontal layout */
			transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth animation */
		}
		.feature-image img {
			max-width: 450px; /* Slightly larger images */
		}

		.feature-image {
			order: 0; /* Default order for horizontal layout */
			aspect-ratio: 3 / 2;
			width: 100%;
		}
		
		.contact-form label {
			position: relative; /* Remove from the document flow */
		}

	}

	/* Large Desktop Adjustments */
	@media (min-width: 1024px) {
		header img {
			width: 120px;
			height: 120px; /* larger size */
			left: 25px;
		}
		.feature-container .feature-text {
			margin-left: -80px; /* Larger overlap */
		}

		.feature-container.reverse .feature-text {
			margin-right: -80px;
		}

		.feature-image img {
			max-width: 550px; /* larger images */
		}
	}
	
	/* Smaller phone Adjustments */	
	@media (max-width: 375px) {
		header h1 {
			font-size: 1em;
		}
		
		h4 {
			font-size: 0.7em;
		}			

		header p {
			font-size: 0.4em;
		}

		header img {
			width: 30px;
			height: 30px;
		}
	
		ul {
			font-size: 12px;
		}
	}