/* Set the default font for all elements */
* {
  font-family: 'Roboto', sans-serif; /* Replace with your desired font */
/*  font-size: 1rem;                   Set the base font size */
  line-height: 1.6;                  /* Set the line height for better readability */
}

/* Base font sizes for headings */
h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem; /* Smaller size for h1 on mobile */
  }
  
  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.25rem;
  }
}

.center-image {
  display: block;               /* Makes the image a block element */
  margin-left: auto;            /* Automatically sets the left margin */
  margin-right: auto;           /* Automatically sets the right margin */
  max-width: 100%;              /* Ensures the image doesn't exceed the container width */
  height: auto;                 /* Maintains the image aspect ratio */
}

/* Additional Media Query for mobile */
@media (max-width: 768px) {
  .center-image {
    width: 100%;                  /* Adjust image width for smaller screens */
  }
}


.title {
    text-align: center;
    font-size: 3rem;
    margin: 0;
}

@media (max-width: 768px) {
    .title {
        font-size: 2rem;
    }
}

/* General Reset */
body, h1, p, a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: inherit;
}

/* Header Styling */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #d3d3d3; /* Light grey */
    height: 150px;
    padding: 0 20px; /* Add padding for spacing */
    box-sizing: border-box;
    width: 100%; /* Full width */
}

/* Logo Styling */
.logo img {
    max-height: 100%; /* Ensure the logo fits within the header */
    max-width: 500px; /* Set a max width for the logo if needed */
    transition: max-width 0.3s ease; /* Smooth transition for logo resizing */
}

/* Navigation Links */
.nav-links {
    display: flex;
    gap: 20px; /* Space between links */
    justify-content: center; /* Center links horizontally */
    flex-grow: 1; /* Allow nav-links to take available space */
}

.nav-links a {
    font-size: 2rem;
    font-weight: bold;
    color: #000; /* Black text for links */
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #555; /* Darker grey on hover */
}

/* Responsive Design - Shrink logo and adjust layout on smaller screens */
@media (max-width: 768px) {
    .site-header {
        flex-direction: column; /* Stack logo and navigation vertically */
        height: auto; /* Allow height to adjust */
        text-align: center; /* Center text */
    }

    .logo img {
        max-width: 400px; /* Reduce logo size on smaller screens */
    }

    .nav-links {
        margin-top: 10px; /* Add some space between logo and nav links */
        flex-direction: column; /* Stack navigation links vertically */
        gap: 10px; /* Reduce space between links */
    }

    .nav-links a {
        font-size: 1.2rem; /* Increase font size for readability on smaller screens */
    }
}

.nav-links a:hover {
    color: #555; /* Darker grey on hover */
}

/* Wrapper for the entire body content */
.content-wrapper {
  width: 85%;                 /* Default: 75% width for larger screens */
  margin: 0 auto;             /* Center the content horizontally */
  padding: 20px;              /* Add some padding for better spacing */
  box-sizing: border-box;     /* Include padding in the width calculation */
}

/* Flex container for alternating rows (text and image) */
.flex-container-alt {
  display: flex;
  flex-wrap: wrap;            /* Allows content to wrap for responsiveness */
  justify-content: space-between;
  margin-bottom: 20px;        /* Adds space between rows */
}

.flex-item-alt {
  flex: 1 1 48%;              /* Flex items take up 48% width with space for gap */
  margin-bottom: 20px;        /* Adds bottom margin for spacing */
}

.flex-item-alt img {
  width: 100%;                /* Makes sure the image fills the container */
  height: auto;               /* Maintain image aspect ratio */
  display: block;             /* Remove inline space below images */
  border: none;               /* Remove any borders */
}

.text {
  display: column;
  justify-content: left;
  align-items: left;
  text-align: left;
  padding: 10px;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
  .content-wrapper {
    width: 100%;              /* Full width for smaller screens */
    padding: 10px;            /* Reduce padding for smaller screens */
  }

  /* Stack the content vertically on mobile */
  .flex-container-alt {
    flex-direction: column;   /* Stack text and image vertically */
    gap: 10px;                /* Adjust gap between stacked items */
  }

  .flex-item-alt {
    flex: 1 1 100%;           /* Take up full width on mobile */
    margin-bottom: 15px;      /* Space between stacked items */
  }

  .image img {
    width: 100%;              /* Ensure images fill the screen */
    margin-bottom: 10px;      /* Adds space below images */
  }

  .text, .image {
    padding: 0 10px;          /* Add padding to left and right */
  }
}

/* Flex container for the original image gallery */
.flex-container {
  display: flex;
*  flex-wrap: wrap;             /* Allow items to wrap to the next line */
  justify-content: space-evenly; /* Space between items */
*  gap: 2px;                    /* Small gap between items */
}

/* Flex item styling for the gallery */
.flex-item {
/*  flex: 1 1 calc(20% - 2px);  /* Adjust item size for tighter spacing */
/*  max-width: calc(20% - 2px); /* Ensure items do not exceed 20% width */
/*  text-align: center;         /* Center-align the content */
}

.flex-item img {
  max-width: 100%;            /* Ensure images fit within their container */
  height: auto;               /* Maintain image aspect ratio */
  display: block;             /* Remove inline space below images */
  margin: 0;                  /* Remove any default margins */
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
  .flex-container {
    justify-content: center;  /* Center images on mobile */
  }

  .flex-item {
    flex: 1 1 calc(50% - 2px); /* Adjust to two columns on smaller screens */
    max-width: calc(50% - 2px);
  }
}

.site-footer {
  background-color: #333;     /* Dark grey background */
  color: #fff;                /* White text */
  text-align: center;         /* Center align the text */
  padding: 0px 10px;            /* Vertical padding to give some spacing */
  height: 200px;              /* Fixed height of 50px */
  box-sizing: border-box;     /* Ensures padding is included in height calculation */
  font-size: small;           /* small font */
}

.site-footer a {
  color: #fff;                /* White text color for links */
  text-decoration: none;      /* Remove underline from links */
}

.site-footer a:hover {
  color: #ddd;                /* Lighter grey on hover */
}