.body-home {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030; /* Ensure it's above the carousel */
  background-color: rgba(0, 0, 0, 0.25) !important;
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030; /* Ensure it's above the carousel */
  background-color: white !important;
}


/* Main carousel container should take up the viewport height */
#homeCarousel {
  height: calc(100vh - 70px); /* Full viewport height minus the navbar height */
}

#homeCarousel .carousel-inner,
#homeCarousel .carousel-item {
  height: 100%;
}

/* The image for the split view */
.carousel-split-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This prevents the image from being stretched */
}

/* The transparent text block */
.carousel-text-block {
  background-color: rgba(30, 46, 40, 0.95); /* #1E2E28 with 95% opacity */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem;
}

/* --- Responsive Adjustments for Mobile --- */
@media (max-width: 991.98px) {
  #homeCarousel,
  .carousel-text-block {
    height: auto; /* Let height be determined by content on mobile */
  }

  .carousel-text-block {
    padding: 2rem;
    text-align: center;
  }
}


.service-circle-img {
  width: 140px;
  height: 140px;
  border-radius: 50%; /* This makes the image a circle */
  object-fit: cover; /* This ensures the image fills the circle without distortion */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.service-img {
  width: 280px;
  height: 280px;
  border-radius: 2%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.social-icon:hover {
  color: #9b9c9cff;
  transition: transform 0.3s ease, color 0.3s ease;
}

.bg-light-green {
  background-color: #30453B !important;
}

.bg-dark-green {
  background-color: #1E2E28 !important;
}

.color-musgo {
  color: #30453B !important;
}

.image-banner-container {
  position: relative;
  height: 200px; /* Changed from 40vh to 200px */
  color: white;
  overflow: hidden; /* Hide parts of the image that overflow */
}

.image-banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover the container without distortion */
  z-index: 1;
}

.image-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(30, 46, 40, 0.6); /* Your #1E2E28 color with 60% opacity */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 2; /* Ensure overlay is on top of the image */
}