/* General Styles */
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Sets the font family for the entire body */
    margin: 0; /* Removes default margin */
    padding: 0; /* Removes default padding */
    background-color: #f3f2ef; /* Light gray background color */
    color: #1c1c1c; /* Dark gray text color */
}

/* Header */
header {
    background: #004182; /* Dark blue background for the header */
    color: white; /* White text color */
    text-align: center; /* Centers the header text */
    padding: 30px 0; /* Adds padding above and below the header text */
    font-size: 24px; /* Sets font size for the header text */
    font-weight: bold; /* Makes the header text bold */
}

/* Navigation */
nav ul {
    list-style: none; /* Removes default list bullet points */
    padding: 0; /* Removes padding */
    background: white; /* White background for the navigation bar */
    display: flex; /* Uses flexbox for a horizontal layout */
    justify-content: center; /* Centers the navigation items horizontally */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow below the navigation */
    margin: 0; /* Removes margin */
}

nav ul li {
    margin: 0 20px; /* Adds horizontal space between navigation items */
}

nav ul li a {
    color: #004182; /* Dark blue text color for the links */
    text-decoration: none; /* Removes underline from links */
    font-size: 18px; /* Sets font size for the links */
    font-weight: bold; /* Makes the links bold */
    padding: 15px 0; /* Adds vertical padding to the links */
    display: block; /* Makes the entire area of the link clickable */
}

.Education h2 {
    font-weight: bold; /* Makes h2 elements inside .Education section bold */
}

nav ul li a:hover {
    color: #0a66c2; /* Changes text color to a lighter blue when hovered */
    border-bottom: 3px solid #0a66c2; /* Adds a bottom border to links on hover */
}

/* Main Content */
main {
    padding: 40px; /* Adds padding inside the main content */
    max-width: 900px; /* Restricts the width to a maximum of 900px */
    margin: auto; /* Centers the main content horizontally */
    background: white; /* White background for the main content */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow around the main content */
    border-radius: 10px; /* Rounds the corners of the main content */
}

section {
    margin-bottom: 30px; /* Adds space between sections */
}

h2 {
    color: #004182; /* Dark blue color for section titles */
    border-bottom: 2px solid #004182; /* Adds a blue bottom border to section titles */
    padding-bottom: 5px; /* Adds padding to the bottom of section titles */
}

/* Form Styling */
form {
    display: flex; /* Uses flexbox for form layout */
    flex-direction: column; /* Stacks form elements vertically */
}

label {
    margin: 10px 0 5px; /* Adds vertical margin to labels */
    font-weight: bold; /* Makes label text bold */
    color: #004182; /* Dark blue text color for labels */
}

table, th, td {
    border-collapse: collapse; /* Collapses table borders into a single line */
    border: 1px solid; /* Adds a border around the table cells */
    width: 100%; /* Makes the table take up the full width of the container */
    table-layout: fixed; /* Ensures columns are evenly distributed */
}

input, textarea {
    padding: 12px; /* Adds padding inside text fields */
    border: 1px solid #ccc; /* Adds a light gray border */
    border-radius: 5px; /* Rounds the corners of input fields */
    width: 100%; /* Makes input fields take up the full width */
    font-size: 16px; /* Sets font size for input fields */
    background: #f3f2ef; /* Light gray background for input fields */
}

input:focus, textarea:focus {
    border-color: #0a66c2; /* Changes border color to blue when the input is focused */
    outline: none; /* Removes the default outline when the input is focused */
    background: white; /* Changes background to white when focused */
}

button {
    margin-top: 20px; /* Adds margin above the button */
    padding: 12px; /* Adds padding inside the button */
    background: #0a66c2; /* Blue background color for the button */
    color: white; /* White text color for the button */
    border: none; /* Removes the border around the button */
    border-radius: 5px; /* Rounds the corners of the button */
    font-size: 18px; /* Sets font size for the button text */
    font-weight: bold; /* Makes the button text bold */
    cursor: pointer; /* Changes the cursor to a pointer on hover */
    transition: background 0.3s ease; /* Adds a smooth transition effect for background color */
}

button:hover {
    background: #004182; /* Changes the button background to a darker blue when hovered */
}

/* Footer */
.footer-section {
    text-align: center; /* Centers the footer text */
    padding: 15px; /* Adds padding inside the footer */
    background: #004182; /* Dark blue background for the footer */
    color: white; /* White text color in the footer */
    margin-top: 40px; /* Adds top margin to the footer */
    font-size: 14px; /* Sets smaller font size for footer text */
}