body {
background-color: #e1e1e1;
}

#SiteTopLogoBackdrop {
background-color: black;
width: 95%;
margin-left: auto;
margin-right: auto;
}

#SiteTopLogo {
background-color: black;
}

a {
color: inherit;
}

#SiteTopLogo {

}

h1 {
text-align: center;
}

.h1-homepage {
text-align: center;

}

h2 { 
text-align: center;

}

#MainFloatBox {
display: block;
margin-left: auto;
margin-right: auto;
width: 95%;
color: white;
background-color: gray;
background-image: url('./Images/Layout/about-title-image-1.jpg');
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.7);
font-family: sans-serif;
overflow: auto;
} 

#TestimonialsFloatBox {
display: block;
margin-left: auto;
margin-right: auto;
width: 95%;
color: white;
background-color: gray;
background-image: url('./Images/Layout/about-title-image-1.jpg');
background-size: cover;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.7);
font-family: sans-serif;
overflow: auto;
} 

#PortfolioFloatBox {
display: block;
margin-left: auto;
margin-right: auto;
width: 95%;
color: white;
background-color: gray;
background-image: url('./Images/Layout/about-title-image-1.jpg');
background-size: cover;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.7);
font-family: sans-serif;
overflow: auto;
}

.TestimonyFloatBox {
display: block;
margin-left: auto;
margin-right: auto; 
width: 95%;
background-color: #f0ffd9;
color: black;
/*box-shadow: inset 0 0 0 5px #74993d; */
font-family: sans-serif;
border-radius: 15px;
opacity: 60%
}

 /* Add a black background color to the top navigation */
.topnav {
  margin-left: auto;
  margin-right: auto;
  background-color: #2f3e18;
  overflow: hidden;
  width: 95%;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #74993d !important;
  color: white !important;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropbtn-active {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: #74993d;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #74993d;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
  margin-top: 49px;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .dropdown-content {
  margin-top: 0px !important;
  }
  .contactcontainer {
  width: 80% !important;
  }
  #SiteTopLogo {
  width: 100% !important;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
} 



/* Footer Styling */
  footer {
  display: flex;
  text-align: left;
  background-color: #2f3e18;
  color: white;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
/* End Footer Styling */


/* Contact Form Styling */

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #74993d;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.contactcontainer {
  width: 80%;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  margin-top: 10px;
  margin-bottom: 20px; 
  margin-left: auto;
  margin-right: auto; 
  color: black;
}

/* End Contact Form Styling */

/* Float Square Menu Style */
.blockbin {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    gap: 20px; /* Provides space between items */
    max-width: 95%;
    margin: 0 auto;
}

.square {
    width: 15%;
    flex: 10 1 calc(15% - 10px); /* Distributes space, considers gap */
    padding-bottom: calc(15% - 10px); /* Maintains aspect ratio */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* border: 1px solid #ccc; */
    /* Other background properties remain the same as the float example */
}

/* End Float Square Menu Style */


.blockcontainer {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    gap: 75px; /* Space between the squares */
    justify-content: center; /* Centers the row of squares */
    width: 95%; /* Example width, adjust as needed */
    margin: 0 auto; /* Centers the container itself on the page */
}

.square-item {
    /* Calculates width for 4 squares per row with gaps in between */
    flex: 1 1 calc(25% - 75px); 
    position: relative; /* Needed to position the content overlay */
    background-size: cover; /* Ensures the background covers the entire div */
    background-position: center; /* Centers the image within the div */
    /* Padding-bottom creates the square shape based on the width */
    padding-bottom: calc(20% - 75px); 
    border-radius: 15px;
    overflow: hidden;
}

.squarelabel {
    position: absolute; /* Position the text over the image */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex; /* Use Flexbox for centering the text */
    justify-content: center; /* Centers text horizontally */
    align-items: center; /* Centers text vertically */
    color: white; /* Text color */
    font-size: 1.5rem;
    text-shadow: 1px 1px 2px black; /* For better readability */
    background-color: rgba(0, 0, 0, 0.3); /* Optional: semi-transparent overlay for text legibility */
}

.squarelabelsmall {
    position: absolute; /* Position the text over the image */
    top: 1rem;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex; /* Use Flexbox for centering the text */
    justify-content: center; /* Centers text horizontally */
    align-items: center; /* Centers text vertically */
    color: white; /* Text color */
    font-size: 1rem;
    text-shadow: 1px 1px 2px black; /* For better readability */

}

/* Image Gallery CSS Below This Line */ 
div.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  width: 80%;
}

div.gallery-item {
  margin: 5px;
  border: 1px solid #black;
  width: 180px;
  background-color: #686868;
  border-radius: 15px;
  overflow: hidden;
}

div.gallery-item:hover {
  border: 1px solid #ccc;
}

div.gallery-item img {
  width: 100%;  /* Set your desired width */
  height: 125px; /* Set your desired height */
  object-fit: cover; /* Crops the image to fill the area */
  object-position: center; /* Optional: centers the crop (default) */
}

div.gallery-item div.desc {
  padding: 10px;
  text-align: center;
}
/* Image Gallery CSS Above This Line */ 


/* Image Service Gallery CSS Below This Line */ 
div.servlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  width: 100%;
}

div.serv-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  border: 1px solid black;
  width: 22%;
  min-width: 281px;
  background-color: #686868;
  border-radius: 15px;
  overflow: hidden;
}

.serv-item-label {
  background-color: rgba(26, 26, 26, 0.6);
  position: absolute; /* Positions the text over the image */
  color: white;       /* Ensures text is readable over the image */
  font-size: 1.5em;
  width: 100%;
  /* Additional styling for readability (e.g., background, shadow) can be added here */
}

div.serv-item:hover {
/*  border: 1px solid #ccc; */
}

div.serv-item img {
  width: 100%;  /* Set your desired width */
  height: 100%;
  object-fit: cover; /* Crops the image to fill the area */
  object-position: center; /* Optional: centers the crop (default) */
}

div.sublabel {
font-size: .70em;
font-style: italic;
}

div.serv-item div.desc {
  padding: 10px;
  text-align: center;
}
/* Image Service Gallery CSS Above This Line */