html {
    scroll-behavior: smooth;
  }

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 60px;
}

.container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    max-width: 1000px; /* 485px * 2 + 20px (gap) = 990px + 10px for safety margin */
    margin: 0 auto; /* center the container */
}

.box {
    box-sizing: border-box;  /* This ensures that padding doesn't increase the box's width */
    width: 485px;
    padding: 0px;
    margin-bottom: 00px;  /* This adds space between boxes vertically */
}

.image-box img {
    width: 100%;
    height: auto; /* to maintain aspect ratio */
    display: block; /* to remove any unwanted whitespace */
}

.text-box {
    /* No padding or background color here now */
}

.text-content {
    padding: 16px;
    background-color: #f4f4f4;
    padding-left: 25px;
}

.image-box figure {
    margin: 0; /* Remove the default margin from the figure element */
    margin-top: 20px;
}

.image-box figcaption {
    text-align: center; /* Center the caption text */
    padding: 8px; /* You can adjust this value to give more or less padding within the caption area */
    background-color: #f8f8f8; /* Gives the caption area a distinct background, can be adjusted */
    color: #333; /* Caption text color, can be adjusted */
    font-size: 0.9em; /* Adjusts the size of the caption text */
}


/* Responsive styles for mobile */
@media screen and (max-width: 1000px) {
    .container {
        flex-direction: column;
    }

    .box {
        margin-bottom: 20px; /* Add space between boxes when they stack */
    }
}

h1 {
    font-size: 2em;
    margin-bottom: 0.5em;
    margin-top: 0px;
}
h3 {
    margin-top: 1em;
    margin-bottom: 0.5em;
}
ul {
    padding: 0px;
    list-style: none;
}
li {
    margin-bottom: 0.5em;
}
.location {
    font-style: italic;
    margin-top: 1em;
}

.ib {
    font-style: italic;
    font-weight: bold;
}

.tools {
    display: flex;
    align-items: flex-start; /* Aligns items to the start of the container */
    margin-top: 1em;
    padding-top: 0px;
}
.tools p {
    margin-right: 5px;
    margin-bottom: 0;
    margin-top: 0px;
}
.tools ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
}
.tools li {
    margin-bottom: 0.5em;
    padding-left: 20px;
}
.location {
    font-style: italic;
    margin-top: 1em;
}

.navbar {
    background-color: #333;
    width: 100%;
    padding: 5px 0;
    position: fixed;  /* This will fix the navbar to the top of the viewport */
    top: 0;  /* Position it right at the top */
    z-index: 1000;  /* This ensures the navbar is always on top of other page elements */
}

.nav-content {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;   
    align-items: center; /* Vertically align the items in the center */
    justify-content: flex-start; /* Align items to the start of the container */
}

.nav-content a {
    color: white;  /* Color of the text links */
    text-decoration: none;  /* Remove the underline */
    padding: 10px 15px;  /* Some padding to make the links look more clickable */
    transition: background-color 0.3s;  /* A smooth transition effect for hover */
}

.nav-content .navbar-email {
    margin-left: auto; /* This will push the email to the right */
}

.nav-content a, .navbar-email a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    transition: background-color 0.3s;
}

.nav-content a:hover {
    background-color: #555;  /* A different color when hovering over the links */
}

.logo {
    height: 30px;  /* Adjust based on your preferred size */
    vertical-align: middle;  /* Aligns the logo in the middle */
}

.logo-link {
    display: inline-block;  /* Makes the link a block but flows like an inline element */
    text-decoration: none;  /* Removes any underlines */
    vertical-align: middle;  /* Aligns it vertically in the navbar */
    margin-right: 20px;  /* Space between the logo and the next item */
}

.section-header {
    font-size: 24px;         /* Header text size */
    padding: 10px 0;         /* Vertical padding for space above and below */
    margin: 20px 0;          /* Space separating the header from adjacent elements */
    text-align: center;      /* Center the header text */
    border-top: 2px solid #ddd;  /* Light border line at the top */
    border-bottom: 2px solid #ddd; /* Light border line at the bottom */
    background-color: #f7f7f7;   /* Light background color for distinction */
    width: 100%;             /* Ensuring it takes the full width available */
    box-sizing: border-box;  /* To ensure width includes padding and borders */
}

.section-divider {
    border: 0;
    height: 4px; /* or you can adjust the thickness */
    background-color: #ddd; /* subtle color for the divider */
    margin: 20px auto; /* add some space before and after the divider */
    max-width: 1000px; /* the divider will span only 1000px */
  }

.site-footer {
    text-align: center;
    padding: 20px 0;
    background-color: #333; /* or any color that matches your site's theme */
    color: #fff; /* adjust if needed based on your background color */
    font-size: 0.8em;
    border-top: 1px solid #444; /* optional: adds a defining line at the top of the footer */
    margin-top: 40px;
  }
  
  .site-footer p {
    margin: 0;
    padding: 0;
  }