body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #E5F2F7; /* Whole page background */
}

p {
    font-size: 18px; 
    line-height: 1.4; 
    margin-bottom: 1em; /* Adds space after each paragraph */
    color: #333; /* Dark color for text */
}

.top-section {
    background-color: #A8DADC; /* Hopeful Blue */
    text-align: center;
    padding: 1rem 0;
}

.top-section h1 {
    color: #333; /* Dark Text */
}

.logo img {
    max-width: 1000px; 
    margin: 0 auto;
}

header {
    background-color: #457B9D; /* Darker Shade of Hopeful Blue */
    padding: 1rem 0;
}

nav {
    text-align: center;
}

nav a {
    color: #F1FAEE; /* Light Text */
    margin: 0 15px;
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
    color: #F4A261; /* Warm Gold */
}

section {
	padding: 20px; /* 20 pixels padding inside the section */
    background-color: #aedaeb; /* Specific background color for sections */
	margin: 20px 80px; /* margins between section box and external margins 20 pixels top and bottom, 80 pixels right and left */
    border-radius: 25px; /* 25 pixels radius for rounded corners */
}

section.special-padding {
	padding: 20px 80px !important; /* 20px padding on top and bottom, 80px padding on left and right */
}

h1, h2 {
    color: #333; /* Dark Text */
}

h3 {
    color: #FFFFFF; /* White Text */
}

.embedded-content {
    background-color: #FFFFFF; /* White background for embedded content divs */
    padding: 15px; /* Space inside the div */
    margin: 15px 0; /* Space above and below the div */
}

.embedded-content iframe {
    width: 100%;
	border: none; /* Remove border from iframe */
}




/* Table styling */
table {
	width: 80%; /* Full width of the container */
	max-width: 100%; /* Ensure the table doesn't exceed the container's width */
	margin-left: auto; 
    margin-right: auto; 
    font-size: 18px; /* Set table font size */
    border-collapse: collapse; /* One common border between cells */
	background-color: #fff2e6; /* Set the background color of the table */
	overflow-x: auto;
}

table td, table th {
    border: 1px solid black; /* Add border to table cells */
    padding: 8px; /* Add padding for cell content */
	text-align: center; /* Centers text horizontally */
    vertical-align: middle; /* Centers text vertically */
}

footer {
    background-color: #1D3557; /* Much Darker Blue */
    color: #F1FAEE; /* Light Text */
    text-align: center;
    padding: 1rem 0;
    width: 100%;
}

.main-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center; /* Center the main menu items */
}

.main-menu > ul > li {
    display: inline-block; /* Horizontal display of menu items */
    position: relative;
}

.main-menu a {
    display: block;
    color: white;
    background-color: #457B9D; /* Main menu item background color */
    padding: 10px 15px; /* Padding for menu items */
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}

.main-menu a:hover {
    background-color: #2a4d6e; /* Darker color on hover */
}

/* Submenu Styles */
.submenu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%; /* Position right below the main menu item */
    min-width: 200px; /* Minimum width of submenu */
    z-index: 1000; /* Ensures submenu is above other content */
    background-color: #679dbf; /* Background color for submenu */
}

.submenu a {
    color: white; /* Text color for submenu items */
    padding: 10px; /* Padding for submenu items */
    text-decoration: none;
    font-weight: bold; /* Bold font for submenu items */
    display: block; /* Ensures each submenu item is on a new line */
    white-space: nowrap; /* Prevents wrapping of text */
}

.main-menu li:hover .submenu {
    display: block; /* Show submenu on hover */
}

/* Responsive image class */
.responsive-image {
    max-width: 100%; /* Maximum width is 100% of the container */
    height: auto; /* Height is set to auto to maintain aspect ratio */
    display: block; /* Display block to allow margin auto to work */
    margin-left: auto;
    margin-right: auto;
}

.image-caption {
    font-size: 16px; /* Smaller font size for the caption */
    color: #1a56ab; /* Blue font */
    margin-top: 8px; /* Space between image and caption */
    text-align: center; /* Center the caption */
}



/* Responsive Design Adjustments */
@media (max-width: 768px) {
    body, p {
        font-size: 16px; /* Slightly smaller font size for mobile */
    }

    section, nav, .top-section, footer {
        padding: 10px; /* Less padding on smaller screens */
        margin: 10px; /* Adjust margins for smaller screens */
    }

    nav a {
        margin: 0 10px; /* Less space between navigation links */
    }

    .logo img {
        max-width: 90%; /* Smaller logo on smaller screens */
    }

    table {
        font-size: 16px;
    }
}

/* Ensures images and iframes within embedded content are responsive */
img, .embedded-content iframe {
    max-width: 100%;
}