:root{
  /* Dark green brand theme */
  --brand: #0b3d2e;
  --brand-dark: #06261c;
  --brand-soft: #0f4d39;
  --accent: #f2b705; /* keeps your yellow CTA style */
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #f6f8f6;
}

/* Hero */
.hero{
  background: linear-gradient(180deg, rgba(11,61,46,0.95), rgba(6,38,28,0.85));
  color: #fff;
}

.small-muted{ color: rgba(255,255,255,0.85); }
.section-title{ font-weight: 800; letter-spacing: -0.02em; }

/* Bootstrap color overrides (optional, but makes .btn-primary match the brand) */
.bg-primary{ background-color: var(--brand) !important; }
.text-primary{ color: var(--brand) !important; }
.btn-primary{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}
.btn-primary:hover,
.btn-primary:focus{
  background-color: var(--brand-soft) !important;
  border-color: var(--brand-soft) !important;
}

/* Keep your warning button as the main CTA */
.btn-warning{
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #111 !important;
}

/* Ensure service images look nice everywhere */
.card-service img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* Mobile/tablet swipe carousel for "Our Services" */
@media (max-width: 991.98px) {
  .services-snap {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: visible; /* don't trap vertical scroll */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1rem;
    padding: 0.25rem 0 0.5rem;
  }

  .services-snap::-webkit-scrollbar { display: none; }
  .services-snap { scrollbar-width: none; }

  .services-snap .service-slide {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
}

/* slightly wider screens (small tablets) */
@media (min-width: 576px) and (max-width: 991.98px) {
  .services-snap .service-slide { flex-basis: 70%; }
}

/* tablets (portrait/landscape) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .services-snap .service-slide { flex-basis: 55%; }
}

@media (max-width: 991.98px) {
  /* Wrapper that draws the fade edges */
  .services-snap-wrap{
    position: relative;
  }

  /* Left + right fades */
  .services-snap-wrap::before,
  .services-snap-wrap::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:28px;
    pointer-events:none;      /* IMPORTANT: doesn't block swipes or vertical scroll */
    z-index:2;
  }

  /* Fade from page background -> transparent */
  .services-snap-wrap::before{
    left:0;
    background: linear-gradient(to right, rgba(248,249,250,1), rgba(248,249,250,0));
  }
  .services-snap-wrap::after{
    right:0;
    background: linear-gradient(to left, rgba(248,249,250,1), rgba(248,249,250,0));
  }

  /* Slight padding so first/last card don't hide under fades */
  .services-snap{
    padding-left: 10px;
    padding-right: 10px;
  }
}
/* Mobile/tablet swipe carousel for "Tree Tips" */
@media (max-width: 991.98px) {
  .tips-snap {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1rem;
    padding: 0.25rem 0 0.5rem;
  }

  .tips-snap::-webkit-scrollbar { display: none; }
  .tips-snap { scrollbar-width: none; }

  .tips-snap .tip-slide {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }

  .tips-snap-wrap{
    position: relative;
  }

  .tips-snap-wrap::before,
  .tips-snap-wrap::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:28px;
    pointer-events:none;
    z-index:2;
  }

  .tips-snap-wrap::before{
    left:0;
    background: linear-gradient(to right, rgba(248,249,250,1), rgba(248,249,250,0));
  }
  .tips-snap-wrap::after{
    right:0;
    background: linear-gradient(to left, rgba(248,249,250,1), rgba(248,249,250,0));
  }

  .tips-snap{
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .tips-snap .tip-slide { flex-basis: 70%; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .tips-snap .tip-slide { flex-basis: 55%; }
}
/* --- FIX: never let carousel fade overlays block clicks --- */
.services-snap-wrap::before,
.services-snap-wrap::after,
.tips-snap-wrap::before,
.tips-snap-wrap::after{
  pointer-events: none !important;
}

/* Safety: keep nav above everything */
.navbar{
  position: relative;
  z-index: 1100;
}