/* ===========================
   Root Variables
=========================== */
:root {
  --primary: #b1d082;
  --dark: #2d473e;
  --light:  #e6f9ca;
  --secondary: #6a8e4e;
}

html, body {
  overflow-x: hidden;
}

.green-text {
  color: var(--dark);
} 

.light-text {
  color: var(--light);
}


.bg-light1 {
  background-color: #effbdd !important;
}

/* Remove gray background and rounded edges */
/* Make hamburger button clean */
/* Remove all borders and outlines */
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}



/* Remove default Bootstrap toggler icon */
.navbar-dark .navbar-toggler-icon {
  background-image: none; /* remove default SVG */
  width: 30px;
  height: 3px;
  background-color: var(--primary);
  display: block;
  position: relative;
  border-radius: 0; /* remove gray rounded edges */
  transition: all 0.3s ease;
}

/* Top and bottom bars */
.navbar-dark .navbar-toggler-icon::before,
.navbar-dark .navbar-toggler-icon::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 3px;
  background-color: var(--primary);
  border-radius: 0; /* remove rounded edges */
  transition: all 0.3s ease;
}

/* Position top and bottom bars */
.navbar-dark .navbar-toggler-icon::before {
  top: -10px;
}

.navbar-dark .navbar-toggler-icon::after {
  bottom: -10px;
}

/* Optional: animate hamburger to X when toggled */
.navbar-toggler.collapsed .navbar-toggler-icon {
  background-color: var(--primary);
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
  background-color: transparent; /* hide middle bar */
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
  transform: rotate(45deg) translate(5px, 5px);
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Remove gray background & rounded container from mobile menu */
.navbar-collapse {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Also remove padding Bootstrap adds on collapse */
.navbar-collapse.show,
.navbar-collapse.collapsing {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove rounded edges on inner nav items */
.navbar-nav {
  background: transparent !important;
  border-radius: 0 !important;
}

.navbar-dark .dropdown-menu {
    padding: 15px;
    background: rgba(255, 255, 255, 0.05); /* transparent white */
    backdrop-filter: blur(10px); /* blur effect */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2); /* subtle border */
    border-radius: 15px; /* rounded corners */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); /* soft shadow */
    margin-top: 0.5rem; /* space below navbar */
    transition: all 0.3s ease;
}

.navbar-dark .dropdown-item {
    color: #ffffff; /* text color */
    padding: 0.6rem 1.2rem;
    transition: all 0.3s ease;
}

.navbar-dark .dropdown-item:hover,
.navbar-dark .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.1); /* light transparent highlight */
    color: #b1d082; /* match navbar accent */
}

/* ===========================
   Global Font
=========================== */
html, body, h1, h2, h3, h4, h5, h6, p, a, span, li, button {
  font-family: 'Montserrat', sans-serif !important;
}

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}


/* ===========================
   Buttons
=========================== */
/* Reusable rounded button */
.btn-secondary-rounded {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--secondary), #5a7641);
  color: #fff;
  padding: 0.85rem 1.9rem;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Shimmer layer */
.btn-secondary-rounded::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );
  transition: all 0.6s ease;
}

/* Hover */
.btn-secondary-rounded:hover::before {
  left: 120%;
}

.btn-secondary-rounded:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.btn-secondary-outline {
  position: relative;
  overflow: hidden;
  background: transparent;
  color: var(--secondary);
  padding: 0.85rem 1.9rem;
  border: 2px solid var(--secondary);
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;
}

/* Shimmer layer */
.btn-secondary-outline::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.25),
    transparent
  );
  transition: all 0.6s ease;
}

/* Hover */
.btn-secondary-outline:hover::before {
  left: 120%;
}

.btn-secondary-outline:hover {
  background-color: var(--secondary);
  color: #fff;
}


/* ===========================
   Hero Carousel
=========================== */
.hero-carousel {
  position: relative;
  height: 100vh;
}




/* Overlay for carousel */
.hero-carousel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.05) 30%);
  z-index: 2; /* below the content */
  pointer-events: none;
}

/* ===========================
   Navbar inside Hero
=========================== */
.hero-carousel .navbar {
  background-color: rgba(255, 255, 255, 0); /* semi-transparent */
  backdrop-filter: blur(5px); /* frosted blur effect */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  border-radius: 10px; /* optional rounded corners */
  padding: 0.5rem 1rem; /* optional padding inside navbar */
  z-index: 3;
}

/* Navbar links */
.navbar a {
  color: #fff !important;
}

.navbar-nav .nav-link {
  font-weight: 600;
  font-size: 1.1rem;           /* adjust size if needed */
  text-transform: uppercase;   /* optional, makes it sleek */
  color: #fff !important;      /* default white */
  margin-left: 1.5rem;         /* spacing between items */
  transition: all 0.3s ease;
  position: relative;
}

/* Navbar link hover */
.navbar a:hover {
  color: var(--primary) !important;
}

/* ===========================
   Carousel Slides
=========================== */
.carousel-slide {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center; /* vertical center */
  height: 100vh;
}

/* ===========================
   Custom Accordion Styling
   Matches site colors & cards
=========================== */

/* Wrapper */
.accordion-item {
  border: none;
  border-radius: 18px !important;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  background-color: #ffffff;
}

/* Header button */
.accordion-button {
  background-color: #ffffff !important;
  color: #2d473e !important;
  font-weight: 600;
  padding: 1.2rem 1.3rem;
  font-size: 1.15rem;
  border: none;
  box-shadow: none !important;
  transition: all 0.25s ease-in-out;
}

/* Remove default Bootstrap arrow */
.accordion-button::after {
  filter: invert(41%) sepia(15%) saturate(500%) hue-rotate(70deg) brightness(95%) contrast(90%);
}

/* Hover */
.accordion-button:hover {
  background-color: #f6fbe9 !important;
}

/* Open state */
.accordion-button:not(.collapsed) {
  background-color: #dfefc6 !important;
  color: #2d473e !important;
}

/* Open state arrow */
.accordion-button:not(.collapsed)::after {
  filter: invert(33%) sepia(29%) saturate(400%) hue-rotate(60deg) brightness(90%) contrast(90%);
}

/* Body area */
.accordion-body {
  background-color: #ffffff;
  color: var(--dark);
  padding: 1.3rem 1.4rem;
  font-size: 1.05rem;
  border-top: 1px solid #dfefc6;
}

/* Smooth slide effect */
.accordion-collapse {
  transition: all 0.35s ease;
}



/* Carousel arrows – clean green */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none !important; /* remove default gray arrow */
  width: 10px !important;
  height: 10px !important;
  border: solid var(--primary);
  border-width: 0 5px 5px 0;
  padding: 5px;
  display: inline-block;
  z-index: 3; /* above the overlay */
}

/* Left arrow rotation */
.carousel-control-prev-icon {
  transform: rotate(135deg);
}

/* Right arrow rotation */
.carousel-control-next-icon {
  transform: rotate(-45deg);
}

/* ===========================
   Three Column Section
=========================== */
/* Ensure the stats row doesn’t touch screen edges */
.three-column-section .row.text-start {
  margin-left: 0;
  margin-right: 0;
}



@media (max-width: 576px) {
  .three-column-section .row.text-start h3 {
    font-size: 2rem; /* smaller than display-6 */
  }

  .three-column-section .row.text-start p {
    font-size: 0.9rem; /* optional, keep text readable */
  }
}

.three-column-section img {
  width: 100%;
}

/* Taller image for column 2 */
.three-column-section .col-md-4:nth-child(2) img {
  height: 100%;
}

#services1 {
  background-color: #e9f4d5;
}

.service-icon {
  width: 48px;
  height: 48px;
  fill: #000;
  margin-bottom: 0.75rem;
  transition: transform 0.3s ease, fill 0.3s ease;
}

/* Hover effect */
.custom-card:hover .service-icon {
  fill: #2ecc71;
  transform: scale(1.1);
}

/* Responsive */
@media (max-width: 768px) {
  .service-icon {
    width: 40px;
    height: 40px;
  }
}

html {
  scroll-behavior: smooth;
}


#vacuum-services {
    background-color: #e9f4d5;
}

.card {
  padding: 40px;
}

.custom-card {
  border-radius: 20px; /* rounded corners */
  box-shadow: 0 4px 20px rgba(var(--dark-rgb, 45,71,62), 0.25); /* shadow using --dark */
  transition: transform 0.3s, box-shadow 0.3s;
}

.custom-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(var(--dark-rgb, 45,71,62), 0.35);
}

/* ===========================
   Responsive Adjustments
=========================== */
@media (max-width: 992px) {
  /* On tablets/mobile, stack the columns and auto height for images */
  .three-column-section .col-md-4 img {
    height: auto !important;
  }

}

@media (max-width: 767.98px) {
  .hero-content {
    padding-left: 2.2rem !important; /* adjust as needed */
    padding-right: 2.2rem !important; /* optional for symmetry */
  }
}




.vh-50 {
  height: 50vh;
}


@media (max-width: 767.98px) {
  .process-section video {
    display: none !important;
  }
}

/* Make section taller on tablets */
@media (max-width: 991.98px) {
  .process-section {
    height: 500px !important; /* increase so it doesn't feel too short */
  }
  

  .process-section .container {
    height: auto !important; /* let it grow with content */
    display: block; /* disable vertical centering flex on tablets */
  }
}

/* Keep desktop styles */
@media (min-width: 992px) {
  .process-section {
    height: 100vh; /* full screen for desktop */
  }

    .process-section1 {
    height: 75vh !important; /* full screen for desktop */
  }

  .process-section .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
}


.process-section {
  display: flex;
  align-items: center;   /* vertical centering */
  justify-content: center; /* optional: horizontal centering */
  min-height:50;     /* makes the section take full screen height */
}
.glassmorph {
  background: rgba(255, 255, 255, 0.05); /* very subtle */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1); /* optional soft outline */
}


.process-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);  /* adjust for more or less opacity */
  z-index: 0; /* BELOW content, ABOVE video */
}

.process-section .glassmorph {
  transition: all 0.3s ease-in-out; /* smooth hover */
}

.process-section .d-md-flex i.bi-arrow-right {
  transition: all 0.3s ease-in-out; /* smooth hover */
}

.process-section .d-md-flex i.bi-arrow-right:hover {
  transform: scale(1.2); /* slightly bigger */
  color: #c8e08d; /* a lighter greenish glow */
  text-shadow: 0 0 8px #b1d082; /* subtle glow */
}



.process-section .glassmorph:hover {
  transform: scale(1.05); /* slightly enlarge */
  background: rgba(255, 255, 255, 0.1); /* brighten slightly */
  backdrop-filter: blur(16px); /* stronger blur on hover */
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* soft shadow */
}

.process-section .container {
  position: relative;
  z-index: 2; /* keeps text above overlay */
}

/* hide overlay & video on mobile */
@media (max-width: 767.98px) {
  .process-section video {
    display: none !important;
  }
  .process-section::before {
    display: none !important;
  }
}


.social-icon {
  font-size: 1.1rem;
  color: var(--light);
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-icon:hover {
  color: var(--primary);
  transform: translateY(-3px);
}