/* Header Styles */
/*.site-header {
    background-color: #0073e6;
    color: white;
    padding: 20px 0;
}

.site-header h1 {
    text-align:center;
    margin: 0;
    padding: 0;


.main-menu ul {
  text-align: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.main-menu li {
    display: inline;
    margin-right: 20px;
}

.main-menu a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}*/

/* Beginning Changes ------------------*/
/* Define a dark blue color variable */
:root {
  --dark-blue: #003366;
}

/* Style the header element */
header {
  position: fixed; /* Fix it at the top */
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  background-color: var(--dark-blue); /* Use the color variable */
  color: white; /* Make the text white */
  font-family: Arial, Helvetica, sans-serif; /* Use a sans-serif font */
  font-size: 24px; /* Make the font size large */
  text-align: center; /* Center the text */
  border: 1px solid white; /* Add a thin white border */
  padding: 20px; /* Add some padding inside the header */
  z-index: 1000; /* Ensure it's above other elements */
  margin: 0; /* Remove margin to prevent shifting */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Optional: Add shadow */
}

page-title {
  background-color: var(--light-blue); /* Use the color variable */
  color: white; /* Make the text white */
  font-family: Arial, Helvetica, sans-serif; /* Use a sans-serif font */
  font-size: 24px; /* Make the font size large */
  justify-content: center;
  text-align: center; /* Center the text */
  border: 1px solid white; /* Add a thin white border */
  margin: 10px; /* Add some margin around the header */
  padding: 20px; /* Add some padding inside the header */
}

/* Style the horizontal rule element */
hr {
  border: none; /* Remove the default border */
  height: 2px; /* Set the height */
  background-color: white; /* Set the color */
}

#home {
  padding-top: 240px;
}

/* Style the navigation menu */
nav {
  display: flex; /* Use a flex display */
  justify-content: center; /* Center the items horizontally */
  align-items: center; /* Center the items vertically */
  list-style: none; /* Remove the default list style */
  margin: 0; /* Remove the default margin */
  padding: 0; /* Remove the default padding */
}

nav ul {
  list-style-type: none;
}

/* Style the navigation menu items */
nav li {
  display: inline;
  margin: 10px; /* Add some margin around the items */
}

/* Style the navigation menu links */
nav a {
  color: white; /* Make the link color white */
  text-decoration: none; /* Remove the default underline */
  font-size: 24px; /* Make the font size smaller than the header */
}

/* Add a hover effect to the navigation menu links */
nav a:hover {
  color: yellow; /* Change the link color to yellow */
  text-decoration: underline; /* Add an underline */
}

/* Use a media query to make the navigation menu stack vertically on small screens */
@media (max-width: 600px) {
  nav li {
    /* flex-direction: column; *//* Change the flex direction to column */
    display: list-item;
  }
}
/* ------------------------------ End Changes */

/* Footer Styles */
.site-footer {
    background-color: var(--dark-blue);
    color: white;
    text-align: center;
    padding: 10px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Add more CSS rules for other page sections and elements as needed */
#services li {
    font-style: italic;

}

#logo {

    height: auto;
    overflow: hidden;
    width: 100%;
}

.image {
    position: relative;
    scroll-margin-top: 50px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    width: 100%;
    max-width: 100%;
}

.services-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.service {
    flex: 1;
    padding: 20px;
    margin: 10px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    align-self: stretch;
}

.service:last-child {
    flex: 2;
}

/* Styles for screens smaller than 600px */
@media (max-width: 600px) {
  .image {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 768px) {
    .services-container {
        flex-direction: column;
    }

    .service {
        flex: 1;
        width: 100%;
    }
}