/* CSS styles for index.html, contact.html, and documents.html */

/* Global styles */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
  font-size: 16px; /* Standard font size for readability */
}

header {
  background-color: #64e3a1; /* Light green background */
  color: white;
  padding: 20px; /* Adjusted padding */
  font-size: 24px; /* Adjusted font size for better fit */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Subtle shadow for depth */
  border-radius: 8px; /* Rounded corners for the header */
  text-align: center; /* Center align the content within the header */
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0; /* Remove margin for cleaner alignment */
  width: 100%; /* Ensure the ul spans the full width of the header */
}

nav ul li {
  display: block; /* Stack list items vertically */
  margin-top: 10px; /* Space out each button */
}

nav ul li a {
  color: white;
  text-decoration: none;
  background-color: #4ca391; /* Slightly darker shade for the button */
  padding: 10px 20px; /* Padding inside the button */
  border-radius: 5px; /* Rounded corners for buttons */
  display: block; /* Ensure each link fills its list item container */
  transition: background-color 0.3s; /* Smooth transition for hover effect */
}

nav ul li a:hover {
  background-color: #3a8572; /* Darker shade on hover */
}

section {
  margin: 20px; /* Margin around sections for better spacing */
  background-color: #C7F5DD; /* Soft green background for sections */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Adding subtle shadows to sections for a layered look */
}

footer {
  background-color: #444; /* Dark background for footer */
  color: white;
  padding: 20px; /* More padding for better footer content spacing */
  text-align: center;
  border-radius: 8px; /* Rounded corners for the footer */
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* Shadow to lift footer visually */
}

img {
  width: 100%; /* Make the image width responsive to the container size */
  max-width: 600px; /* Set a max-width to prevent the image from becoming too large on bigger screens */
  height: auto; /* Maintain the aspect ratio */
  display: block; /* Ensures the image is centered if it has to resize */
  margin: 0 auto; /* Center the image within its container */
}