/* Hero Section */
.hero-bg {
  background-image: url("path/to/hero-image.jpg");
  background-size: cover;
  background-position: center;
}

/* Sticky Footer */
.sticky-footer {
  position: sticky;
  bottom: 0;
}

/* Service Cards */
.service-card {
  transition: all 0.3s ease-in-out;
}
.service-card:hover {
  transform: scale(1.05);
  border-color: #9ce7a4;
}

/* Picture Section */
.picture-section img {
  width: 100%;
  border-radius: 0.75rem; /* rounded corners */
}

#card-slideshow p {
  width: 75%;
}

/* Hide arrows by default */

#slide-next {
  margin-right: 2vw;
}

#slide-prev {
  margin-left: 2vw;
}
#slide-prev,
#slide-next {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Show arrows when the slider container is hovered */
.relative:hover #slide-prev,
.relative:hover #slide-next {
  opacity: 1;
}

/* Styling for the arrows' container (the circle) */
#slide-prev,
#slide-next {
  width: 50px; /* Adjust the size of the circle */
  height: 50px;
  background-color: white; /* White background */
  border-radius: 50%; /* Circle shape */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem; /* Adjust arrow size */
  color: #00754a; /* Arrow color */
  border: 2px solid transparent; /* Initial border is transparent */
  transition: all 0.3s ease-in-out; /* Smooth transition for all properties */
  position: absolute; /* Position it absolutely */
  top: 50%; /* Keep it vertically centered */
  transform: translateY(-50%); /* Correct alignment */
}

/* On hover, grow the circle and add a green border */
#slide-prev:hover,
#slide-next:hover {
  transform: translateY(-50%) scale(1.2); /* Maintain position and scale */
  border-color: var(--accent-green); /* Green border on hover */
  color: var(--accent-red);
}

/* Optional: Adding a slight shadow effect for the hover state */
#slide-prev:hover,
#slide-next:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

/* Arrow Button Default */
#slide-prev,
#slide-next {
  background-color: white; /* or whatever background you want */
  border-radius: 50%;
  padding: 10px;
  font-size: 24px;
  color: #00754a; /* Set default color for the arrows */
  transition: background-color 0.3s, transform 0.2s ease-in-out;
}

#slide-prev:hover,
#slide-next:hover {
  background-color: #00754a; /* Green background on hover */
  color: white; /* White color for arrow on hover */
  transform: scale(1.1); /* Slight zoom effect */
}

/* Ensure the green color is used when hovering */
#slide-prev:hover,
#slide-next:hover {
  border: 2px solid var(--accent-green); /* Add green border on hover */
}

/* Position the arrows at the center */
#slide-prev,
#slide-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Left Arrow */
#slide-prev {
  left: 15px;
}

/* Right Arrow */
#slide-next {
  right: 15px;
}

/* Button behavior */
#slide-prev,
#slide-next {
  background-color: #fff;
  color: #00754a;
  border: 2px solid #00754a;
  border-radius: 50%;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

/* Hover effect for arrows */
#slide-prev:hover,
#slide-next:hover {
  background-color: var(--accent-green);
  color: white;
  transform: scale(1.1);
  border-color: var(--accent-green);
}

/* Accordion container */
.accordion {
  width: 100%;
  max-width: 1440px; /* Adjust the width to your desired max-width */
  margin: 0 auto;
}

/* Accordion header style */
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 600;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

/* Accordion header hover effect */
.accordion-header:hover {
  background-color: #e1e1e5;
}

/* Accordion content (hidden by default) */
.accordion-content {
  overflow: hidden;
  max-height: 0; /* Collapsed state */
  transition: max-height 0.3s ease-in-out; /* Smooth transition */
  padding-left: 20px; /* Optional, adjust if necessary */
  padding-right: 20px; /* Optional, adjust if necessary */
  background-color: #f9f9f9;
}

/* When content is shown, set max-height to auto */
.accordion-content:not(.hidden) {
  display: block;
}

/* Style for plus/minus icon */
.accordion-icon {
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
  color: var(--accent-green); /* Use your accent green */
  font-size: 1.5rem;
}

/* Hover effect for the icon */
.accordion-header:hover .accordion-icon {
  transform: scale(1.25); /* Grow the icon on hover */
}

/* Style for each accordion item */
.accordion-item {
  margin-bottom: 10px; /* Space between accordion items */
  border-bottom: 1px solid #ddd; /* Gray underline between items */
}

/* Accordion plus/minus sign color change when the level is opened */
.accordion-content.opened .accordion-icon {
  color: var(--accent-green); /* Accent color when open */
  transform: rotate(45deg); /* Rotate for minus sign effect */
}

/* Optional - Adjust padding for the header and content */
.accordion-header p {
  margin: 0;
  font-size: 1.25rem;
}

/* Optional - Accordion content inside each level */
.accordion-content p {
  margin: 20px 0;
}

/* Accordion item when opened */
.accordion-content.opened {
  max-height: 3000px; /* Ensure it expands properly */
}

/* Style for button - used to trigger the accordion content */
.accordion-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--accent-green);
  transition: transform 0.3s ease, color 0.3s ease;
}

.accordion-button:hover {
  color: #005a37; /* Darker green on hover */
  transform: scale(1.1);
}

/* Optional - Styling for each accordion level, adjust based on your design */
.accordion-level {
  padding: 10px 0;
  font-size: 1rem;
}

.accordion-level:hover {
  background-color: #e1e1e5; /* Highlight on hover */
}

.accordion-content {
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.accordion-icon {
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
  font-weight: bold; /* Make the plus/minus sign bold */
}

.accordion-header:hover .accordion-icon {
  transform: scale(1.25);
  color: var(--accent-green); /* Make icon color match the accent green */
}

/* Smooth transition for plus-to-minus and vice versa */
.accordion-icon {
  transition: all 0.3s ease, color 0.3s ease, content 0.3s ease;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-icon {
  transition: all 0.3s ease, color 0.3s ease, content 0.3s ease;
}

.accordion-icon:hover {
  transform: scale(1.25);
  color: var(--accent-green);
}

.accordion-content {
  overflow: hidden;
  transition: all 0.3s ease-in;
}