body {
  margin: 0;
  padding: 0;
  padding-top: 90px;
  min-height: 100vh;      
  display: flex;           
  flex-direction: column;  
}

.navbar {
  background-color: #434F5B;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px; /* Add some padding for logo and links */
  z-index: 2;
}

.navbar .nav-links {
  display: flex;
  align-items: center;
}

.navbar .nav-link {
  text-decoration: none;
  color: white;
  margin-left: 20px; /* Adjust the spacing between links */
}

.navbar .nav-link:hover {
  color: #ABD060;
}

.container {
  margin-top: 80px; /* Add margin to push the content down below the navbar */
}

/* Define your CSS classes here */
.job {
  color: #232323;
  background-color: white;
  width: auto;
  font-size: 20px;
  font-weight: normal;
  text-align: center;
  padding: 0; /* Remove any padding */
  margin: 5px 0; /* Adjust the margin to control spacing between sections */
}

.me {
  color: #FF6162;
  background-color: white;
  width: auto;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  padding: 0; /* Remove any padding */
  margin: 5px 0; /* Adjust the margin to control spacing between sections */
}

.town {
  color: #232323;
  background-color: white;
  width: auto;
  font-size: 20px;
  font-weight: normal;
  text-align: center;
  padding: 0; /* Remove any padding */
  margin: 5px 0; /* Adjust the margin to control spacing between sections */
}

.value-prop {
    font-size: 18px;
    font-weight: normal;
    text-align: left;
    padding: 0; /* Add padding to the top and bottom if needed */
    margin: 0 200px; /* Add margin to the left and right sides */
}


.image-container {
    display: flex;
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
    max-width: 100%;
    overflow: hidden;
    height: auto; /* Set the height to auto to allow it to adjust to the image's natural size */
    margin: 0;
    padding: 0;
}
.image-container img {
    width: 100%; /* Set the width of the image to 100% to match the container's width */
    max-height: 40vh; /* Adjust the height as needed */
    height: auto;
}


.button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 40px; /* Add this line for space below the button */
}

/* Hero / Services button */
.button-container a.services-button {
    display: inline-block;        /* allow padding and margin */
    padding: 0.75rem 1.5rem;      /* space inside button */
    margin: 0 10px;               /* spacing between buttons */
    border-radius: 6px;           /* rounded corners */
    font-weight: 600;             /* bold text */
    text-decoration: none !important; /* remove underline absolutely */
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    background-color: #E5D4B8;   /* cream color */
    color: #232323;               /* dark text */
    border: 1px solid #434F5B;   /* dark border */
}

/* Hover effect */
.button-container a.services-button:hover {
    background-color: #CCBA9E;    /* slightly darker cream */
    color: #232323;                /* keep text dark */
    border-color: #434F5B;        /* border stays same */
    text-decoration: none !important; /* ensure no underline on hover */
}

.site-footer {
  width: 100%;
  background-color: #434F5B;
  color: white;
  text-align: center;
  padding: 20px 0;
  margin-top: auto;        
}


/* Your existing CSS code (for large screens) */

/* Media query for tablets (e.g., iPads) */
@media (max-width: 1024px) {
    .navbar {
        margin: 0 15px; /* Adjusted margin for tablet screens */
        /* Add specific styles for tablets here */
    }

    .value-prop {
        margin: 0 15px; /* Adjust the margins for smaller screens */
        /* Add specific styles for tablets here */
    }
    
    /* Add other styles specific to tablets as needed */
}


/* Media query for mobile devices */
@media (max-width: 768px) {
    .navbar {
        margin: 0 10px; /* Adjusted margin for mobile screens */
        /* Add specific styles for mobile devices here */
    }

    .value-prop {
        margin: 0 10px; /* Adjust the margins for smaller screens */
        /* Add specific styles for mobile devices here */
    }
    
    /* Add other styles specific to mobile devices as needed */
    
    .about-container {
        flex-direction: column; /* Stack image and text on smaller screens */
    }

    .about-container__image {
        max-width: 100%; /* Adjust for full width on smaller screens */
    }
    
    /* Adjust the font size of navigation links for mobile devices */
    .navbar .nav-link {
        font-size: 13px; /* Adjust the font size as per your preference */
    }

    /* Hide the logo on mobile devices */
    .navbar .logo {
        display: none;
    }
}