/* Global Styling */
body {
    /* STEP 4: Subtle Background Texture (UPDATED for image) */
    background-color: #f7fcff; /* Fallback color if image doesn't load */
    background-image: url('geometric_background.png'); /* Your new background image */
    background-size: cover; /* Ensures the image covers the entire body */
    background-attachment: fixed; /* Makes the background fixed while content scrolls */
    background-position: center center; /* Centers the image */
    
    /* Optional: Add a subtle overlay to ensure text readability on top of the image */
    /* This gradient ensures the corners/edges are slightly darker/lighter if needed */
    background-blend-mode: multiply; /* Blends the image with the background-color */
    
    /* STEP 2: Typography (Existing from previous steps) */
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
}

/* Header & Title Styling */
/* STEP 3: Language Switcher Positioning */
.language-switcher {
	position: absolute;
	top: 20px;
	right: 5%;
	z-index: 10;
}
.img-container {
	width: 100%;
	text-align: center;
	/* STEP 3: Improved Image Padding */
	margin-top: 30px;
	margin-bottom: 30px;
}
.img-container img {
	max-width: 90%;
	height: auto;
}
h1 {
	text-align: center;
	color: #1A3D5D;
	background: #6fd2e830;
	padding: 18px; /* Slightly more padding */
	margin: 20px auto; /* Centered margin */
	border-radius: 8px;
	/* STEP 2: Typography */
	font-size: 2.2em; 
	font-weight: 700;
	max-width: 90%; /* Constrain width */
}
h3, h4 {
	color: #1A3D5D;
	text-align: center;
	/* STEP 2: Typography */
	font-weight: 600;
}

/* Link/Navigation Styling */
a {
	color: #3685c8;
	/* STEP 2: Typography */
	font-weight: 600;
	text-decoration: none;
}
a:hover {
	color: #1A3D5D;
	text-decoration: underline;
}

/* STEP 1: Responsive Grid/Card Layout (Replaces .main-table) */
.nav-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px; 
	width: 90%;
	max-width: 1200px;
	margin: 50px auto;
}

.nav-card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding: 15px;
	background: #E3F2FD;
	border: 1px solid #3685c8;
	border-radius: 8px;
	text-decoration: none;
	color: #1A3D5D;
	font-weight: bold;
	font-size: 1.1em;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	text-transform: uppercase; /* Added for visual impact */
}

.nav-card:hover {
	background: #d4e7f8;
	transform: translateY(-3px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
	border-color: #1A3D5D;
}

/* Footer Styling */
.footer {
	background-color: #E3F2FD;
	color: #1A3D5D;
	/* STEP 3: Improved Footer Padding and Border */
	padding: 30px 5%;
	margin-top: 50px;
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	flex-wrap: wrap;
	text-align: left;
	border-top: 2px solid #20D2B5;
}

.footer .info,
.footer .contact,
.footer .logo-section { /* Renamed class for clarity */
	flex: 1 1 250px;
	padding: 10px;
	margin: 10px 0;
}

.footer h4 {
	font-size: 18px;
	margin-bottom: 8px;
	/* STEP 3: Footer Separator */
	text-align: left;
	border-bottom: 1px solid rgba(26, 61, 93, 0.2);
	padding-bottom: 5px;
}

.footer p {
	font-size: 14px;
	margin: 5px 0;
}

.footer .logo-section {
	text-align: center; /* Center the logo and text in this section */
}

.footer .logo-section img {
	max-width: 100px;
	margin: 10px auto 0;
	display: block;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.footer {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.footer h4 {
		text-align: center; /* Center footer headings on mobile */
	}
	.language-switcher {
		top: 10px; /* Bring the flag closer to the top on small screens */
	}
}