:root {
  --green-dark: #0d3b26;
  --green: #2f7d32;
  --green-light: #e6f4e0;
  --bs-body-color: #1d3a2b;
  --bs-body-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  --bs-link-color-rgb: 47, 125, 50;
}

 html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}

body {
  font-family: "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
}

.btn-green {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  background-image: linear-gradient(135deg, #2f7d32 0%, #4caf50 50%, #2f7d32 100%);
  background-size: 200% auto;
  background-position: left center;
  transition: background-position 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease;
  &:hover {
    background-position: 100% 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

/* Section headings */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  &::before,
  &::after {
    content: "";
    width: 80px;
    height: 1px;
    background: var(--green);
  }
}

/* Header */
header  {
  nav { 
    .logo {
      color: var(--green-dark);
      line-height: 1; 
      .leaf {
        .material-symbols-outlined {
          font-size: 60px;
          color: var(--green);
        }
      }
    }
    .nav-link {
      color: var(--bs-body-color);
      border-bottom: 2px solid transparent;
      &:hover {
        color: var(--green);
        border-bottom-color: var(--green)
      }
    }
  }
}

/* Hero */
.hero { 
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)), url("images/Lanscaped-garden-path.avif");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Services */
.service {
  .icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #2f7d32 0%, #4caf50 100%);
  }
}

 /* About */
.about {
  background-image: linear-gradient(135deg, #2f7d32 0%, #4caf50 50%, #2f7d32 100%);
  .photo-column {
    background: url("images/East-Point-Business-Park-lanscape.avif") center/cover;
    background-size: cover;
    background-position: center;
    min-height: 500px;
  }
  
  .content-column {
    @media (min-width: 992px) {
      padding-right: max(3rem, calc((100vw - 1320px) / 2 + 12px)) !important;
    }
    .tag {
      font-size: 13px;
      letter-spacing: 1px;
    }
  }
}

/* Gallery */
  .gallery {
    figure {
      font-size: 12px;
    }
  }

  .gallery-thumb {
    cursor: zoom-in;
    img {
      transition: transform 0.3s;
    }
    &:hover img {
      transform: scale(1.05);
    }
  }

  .lightbox-img {
    max-height: 80vh;
    object-fit: contain;
  }


/* Lightbox */
.modal-backdrop {
  --bs-backdrop-opacity: 0.75;
}

#lightbox .btn-close {
  opacity: 1;
}