#intro-section {
  position: relative;
  width: 70%; /* Width relative to the parent container */
  height: 70vh; /* Adjust height as needed */
  color: #fff; /* Text color */
  margin: 30px auto; /* Horizontal margin auto for centering if flex doesn't work */
  border-radius: 50px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds a shadow for depth */
  padding: 20px; /* Optional: adds padding inside the container */
  box-sizing: border-box; /* Include padding in the element's total width and height */
  border: 2px solid #000;
  overflow: hidden;
}
#intro-section h1 {
  font-family: 'Open Sans', sans-serif; /* Replace with the font-family you prefer */
  font-size: 30px; /* Adjust the size as desired */
  font-weight: bold; /* Optional: define the weight of the font */
  color: #ffffff; /* Optional: change the color if needed */
  margin: 0; /* Optional: adjust the spacing around the heading */
  padding: 0; /* Optional: adjust the padding around the heading */
  /* Add other styling properties as needed */
}

#intro-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7); /* Black overlay with 50% opacity */
  z-index: 1; /* Above the image but below the content */
}


#intro-section .background-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover the entire section with the image */
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5); /* Black overlay with 50% opacity */
  z-index: -1; /* Ensure the image stays in the background */
  border: 2px solid #000;
}

#intro-section .caption {
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Align the center of the caption with the center of the section */
  text-align: center; /* Center the text */
  z-index: 10; /* Ensure the caption is above the background image */
}

.cta-button {
  background-color: #009444; /* Green background */
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
  border-radius: 25px; /* Rounded corners */
}

.cta-button:hover {
  background-color: #026e0b; /* Darker green on hover */
  transform: translateY(2px); /* Slight move up on hover */
}
/* Reset any default margins for all h1 elements within the sections */
#hazardous-waste-disposal h1,
#retail-waste-disposal h1,
#oil-tank-removal h1 {
  margin: 0; /* Reset default margin */
  color: #009444;
  padding-top: 20px; /* Add space above the heading */
  padding-bottom: 10px; /* Add space below the heading */
}

/* Apply left border style to paragraphs in certain sections */
#retail-waste-disposal p,
#oil-removal-section p {
  border-left: 4px solid #009444; /* Adds a subtle accent */
}

.service-section {
  flex: 1; /* Each section will flexibly adjust its width */
  min-width: 250px; /* Minimum width of each section */
  max-width: calc(33.33% - 40px); /* Maximum width of each section, adjust the value to account for the gap */
  box-sizing: border-box; /* Include padding and borders in the width */
  flex-basis: 30%; /* Each section will take up roughly 30% of the container's width */
  padding: 10px;
  margin: 0; /* Ensure total width including margin does not exceed 100% */
  width: calc(33.333% - 40px); /* Adjust width for 3 items in a row, accounting for some margin */
  background-color: #ffffff; /* White background */
  border: 1px solid #e0e0e0; /* Light grey border */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  border-radius: 8px; /* Rounded corners for a modern look */
  overflow: hidden; /* Ensures no child can overflow */
}
#service-container {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: stretch; /* Stretch items to fill the width */
  width: 70%;
  margin: 20px auto;
}

.service-buttons {
  display: flex;
  justify-content: space-between; /* Distribute buttons evenly */
  flex-wrap: nowrap; /* Keep buttons in a single line */
}

.service-item {
  flex: 0 0 calc(33.33% - 40px); /* Do not grow, do not shrink, initial basis */
  margin: 20px; /* Space between items */
  box-sizing: border-box; /* Include padding and margins in the width calculation */
  /* Rest of your styles for .service-item */
}

.service-panels {
  width: 100%; /* Panels container takes full width */
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background: linear-gradient(135deg, #00a456, #009444); /* Modern gradient */
  color: white;
  cursor: pointer;
  padding: 20px 30px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 18px;
  font-weight: bold;
  transition: 0.3s;
  border-radius: 8px; /* Rounded corners for a modern look */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  margin-top: 10px; /* Add space between buttons */
  margin-right: 5px; /* Adds space to the right of each button */
  margin-left: 5px; /* Adds space to the left of each button */
  position: relative; /* Establish a positioning context for absolute children */
}

.accordion:hover, .accordion:focus {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover/focus */
  transform: translateY(-2px); /* Slight lift effect */
}

.accordion.active {
  background: #026e0b; /* Darker or different color to indicate active state */
}

.accordion.active + .panel {
  max-height: 500px; /* Adjust this value based on the maximum expected content size */
  overflow: hidden; /* Keep overflow hidden to ensure content outside of max-height is not shown */
  transition: max-height 0.5s ease-out; /* Smooth transition for expanding/collapsing */
  padding: 20px; /* Add padding to make the content look better when the panel is expanded */
  display: block; /* Ensure the panel is displayed when active */
}
.accordion:first-child {
  margin-left: 0; /* No space to the left of the first button */
}

.accordion:last-child {
  margin-right: 0; /* No space to the right of the last button */
}
/* Style the panel class */
.panel {
  display: none; /* Hide panels by default */
  overflow: hidden;
  background-color: #ffffff; /* Light background for the content */
  padding: 20px; /* Padding around content */
  border-radius: 8px; /* Match the border-radius of the accordion for consistency */
}

.panel p {
  color: #333; /* Dark grey for text */
  font-size: 16px; /* Standard font size */
  line-height: 1.6; /* Spacing between lines */
  margin-bottom: 15px; /* Spacing between paragraphs */
}

.panel h2 {
  color: #009444; /* Primary color */
  font-size: 24px; /* Larger font size for headings */
  margin-top: 20px; /* Space above headings */
  margin-bottom: 10px; /* Space below headings */
}

.panel h3 {
  color: #007733; /* Slightly darker or lighter than h2 for distinction */
  font-size: 20px;
  margin-top: 18px;
  margin-bottom: 10px;
}

.panel ul {
  list-style-type: none; /* Choose a professional-looking bullet point */
  padding-left: 20px; /* Indent bullet points */
  margin-top: 10px; /* Space before the list starts */
  margin-bottom: 10px; /* Space after the list ends */
}

.panel ol {
  padding-left: 20px; /* Indent lists for clarity */
  margin-bottom: 15px; /* Space below the list */
}

.panel li {
  position: relative;
  padding-left: 10px; /* Space for the bullet */
  padding-right: 10px; /* Optional: space on the right if needed */
  margin-bottom: 10px; /* Space between list items */
  border-left: 4px solid #009444; /* Solid green left border */
  transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

.panel li::before {
  color: #009444; /* Green color */
  font-size: 20px; /* Bullet size */
  position: absolute;
  left: 10px; /* Left position of bullet */
  top: 50%;
  transform: translateY(-50%);
}

.panel li::after {
  content: ''; /* Empty content for decorative purposes */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* Full width of the li element */
  height: 2px; /* Height of the decorative line */
  background-color: #e0e0e0; /* Light grey background for the line */
  z-index: -1; /* Send it to the back */
  transition: background-color 0.3s ease-in-out; /* Transition for the hover effect */
}

.panel li:hover::after {
  background-color: #c8e6c9; /* Light green background on hover */
}

/* Optional: Change the border color on hover */
.panel li:hover {
  border-left: 4px solid #007d40; /* Darker green border on hover */
}

#service-header {
  text-align: center;
  margin-top: 20px;
}

.accordion .symbol {
  display: inline-block; /* Use inline-block for better control */
  position: absolute;
  width: 1em; /* Ensure the width is the same for '+' and 'x' */
  text-align: center; /* Center the text within the block */
  margin-left: 0.5em; /* Add some space between the text and the symbol */
  transition: transform 0.3s ease; /* Smooth transition for rotating */
  top: 50%; /* Align the symbol vertically */
  right: 10px; /* Space from the right edge */
  transform: translateY(-50%); /* Center the symbol vertically with respect to its own height */
}
.accordion.active .symbol {
  transform: rotate(45deg); /* Rotate the symbol when the accordion is active */
}

/*mission*/
.mission-section {
  background-color: #f0f2f5; /* Light neutral background */
  text-align: center;
  padding: 50px 0;
}

.mission-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  color: #009444;
  margin-bottom: 1em;
}

.mission-statement {
  font-size: 1.1em;
  color: #666;
  margin-bottom: 2em;
}

.values {
  display: flex;
  justify-content: space-around;
  margin-bottom: 2em;
}

.value-item h3 {
  font-size: 1.4em;
  color: #009444;
}

.value-item p {
  font-size: 1em;
  color: #333;
  margin-top: 0.5em;
}

h1 {
  color: #009444; /* Primary color for consistency */
  font-size: 32px; /* Larger font size for prominence */
  font-weight: bold; /* Bold font weight for emphasis */
  text-align: center; /* Center alignment for headings */
  margin-top: 20px; /* Adequate spacing at the top */
  margin-bottom: 30px; /* Adequate spacing at the bottom */
  transition: all 0.3s ease; /* Smooth transition for any changes */
  padding-bottom: 10px; /* Padding at the bottom for the line */
  border-bottom: 2px solid #009444; /* Solid line that matches the heading color */
  display: inline-block; /* Required for the border to fit content width */
}

.contact-form-container {
  background: url('/img/lighthouse.jpg ') no-repeat center center;
  background-size: cover;
  padding: 50px; /* Adjust padding to control spacing around the form */
  position: relative; /* Added to position the form over the background */
  width: 50%; /* Width relative to the parent container */
  margin: auto;
  border-radius: 50px;
  border: 2px solid #000;
  overflow: hidden;
}

.contact-form-container::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7); /* Black overlay with 60% opacity */
  z-index: 1; /* Overlay is above the background image but below the content */
}

.contact-form {
  position: relative; /* Ensures form is above the background and overlay */
  z-index: 2; /* Higher z-index than the pseudo-element */
  padding: 20px; /* Control the spacing inside the form */
  max-width: 800px; /* Adjust as necessary */
  margin: 0 auto;
}

.contact-title {
  font-family: 'Open Sans', sans-serif; /* Consistent font family */
  color: #ffffff; /* Adjust this color to match your site's color scheme */
  font-size: 2em; /* Large font size for a title */
  font-weight: bold; /* Bold font weight for prominence */
  margin-bottom: 1em; /* Spacing below the title for separation from content below */
  text-align: center; /* Center the title if it suits your layout */
  padding-top: 20px; /* Space from the top, adjust as needed */
  position: relative;
  z-index: 2;
}
.contact-invite {
  font-size: 1em; /* Adjust the size as needed */
  color: #ffffff; /* A soft color that's easy on the eyes */
  margin-top: 5px; /* Or adjust the spacing to your liking */
  text-align: center; /* Centered text for a welcoming feel */
  position: relative;
  z-index: 2;
}


.form-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.form-row input {
  width: calc(50% - 10px); /* Adjust width to allow for margin */
  padding: 10px;
  margin: 0 5px; /* Adds margin between the two inputs */
  border: 1px solid #ccc;
  border-radius: 3px;
}

.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px; /* Adjust spacing below the textarea */
  border: 1px solid #ccc;
  border-radius: 3px;
  height: 150px; /* Adjust as necessary */
}

.contact-form button {
  background-color: #009444; /* Adjust color as necessary */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  width: 100%;
}

.contact-form button:hover {
  background-color: #026e0b; /* Darker shade for hover effect */
}

.contact-form input,
.contact-form textarea,
.contact-form button {
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.form-row input,
.contact-form textarea {
  width: 100%; /* Full width of the container */
  padding: 10px; /* Adjust padding as needed */
  margin-bottom: 20px; /* Space between fields */
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .contact-form .form-row {
    display: flex;
    flex-direction: column;
  }

  .contact-form .form-row input {
    width: 100%; /* Forces inputs to take up the full width of their container */
    margin-bottom: 15px; /* Adds space between stacked inputs */
  }

  /* Adjust the last input's margin-bottom if you want consistency in spacing */
  .contact-form .form-row input:last-child {
    margin-bottom: 15px;
  }

  .panel p, .panel li {
    font-size: 14px; /* Slightly smaller font size on mobile */
  }

  .panel h2 {
    font-size: 22px; /* Adjust heading sizes for mobile */
  }

  .panel h3 {
    font-size: 18px;
  }

  .values {
    flex-direction: column;
    align-items: center;
  }

  .value-item {
    margin-bottom: 1em;
  }

  .service-buttons {
    flex-direction: column;
  }

  .service-buttons .accordion {
    margin-bottom: 10px; /* Space between stacked buttons */
    width: calc(100% - 20px); /* Adjust width to account for any padding or border */
    margin-left: auto; /* Center-align the button */
    margin-right: auto; /* Center-align the button */
  }

  /* Remove the margin-top for the first button to align with the container */
  .accordion:first-child {
    margin-top: 0;
  }
  .service-buttons .accordion {
    margin-bottom: 10px; /* Space between stacked buttons */
  }

  .service-buttons .accordion:first-child {
    margin-top: 0; /* Remove any additional space above the first button if needed */
  }

  /* Ensure there is no additional margin on the last button */
  .service-buttons .accordion:last-child {
    margin-bottom: 0;
  }
}