/* Mobile-first, external-only styles. */
:root{
  --bs-blue:#0d6efd;      /* Bootstrap primary */
  --bs-green:#dff5df;     /* light green page background */
  --header-blue:#0a4db3;  /* richer header/footer blue */
  --cta:#00a36c;          /* CTA accent */
  --bs-light:#f8f9fa;     /* Bootstrap light background */
}

html, body { height: 100%; }
body.bs-bg { background: var(--bs-green); }
.pickup-container {
  width: 50%;
  margin: 0 auto;
}

.logo-img {
    max-height: 80px; /* fills most of 100px bar, leave 10px padding above/below */
    height: 80px;
    width: auto;
    display: block;
}
/* Header */
.bs-header{
  background: var(--header-blue);
}
.bs-header .brand-name{ letter-spacing:.3px; }
.bs-header .logo{ width:40px; height:40px; object-fit:contain; }
.bs-header .account-link{
  color:#fff; opacity:.9; text-decoration:none;
}
.bs-header .account-link:hover{ opacity:1; text-decoration:underline; }

/* Hero */
.hero{
  color:#fff;
  overflow:hidden;
}
.hero .hero-bg{
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/images/hero.webp');
  background-size:cover; background-position:center;
  filter:saturate(1.05);
}
.hero .btn{ box-shadow: 0 6px 18px rgba(0,0,0,.2); }

.hero .subheadline {
    font-size: 1.3rem; /* Adjust the subheadline */
    font-weight: 400;
    margin-top: 10px;
}
/* Optional: base CTA style (keeps things consistent) */
a.btn.btn-cta,
button.btn.btn-cta {
  background-color: #00a36c !important;
  border-color: #00a36c !important;
  color: #fff !important;
  border-radius: 0.75rem;                        /* more rounded corners */
  box-shadow: 0 6px 18px rgba(0,0,0,.2);         /* slight shadow */
  transition: filter .15s ease, transform .15s ease;
}

a.btn.btn-cta:hover,
button.btn.btn-cta:hover {
  transform: translateY(-2px);                   /* subtle lift on hover */
  transform: translateX(2px);
}
.hero-wave{
  position:absolute; left:0; right:0; bottom:-1px; height:40px;
  background: linear-gradient(to bottom, rgba(223,245,223,0), var(--bs-green));
}

/* Reusable section waves */
.wave{
  height:80px;
  line-height:0;
  overflow:hidden;
}
.wave svg{
  display:block;
  width:100%;
  height:100%;
}
.wave-green-to-light svg path{
  fill: var(--bs-light); /* next section background */
}
.wave-light-to-green svg path{
  fill: var(--bs-green); /* next section background */
}

/* Cards */
.card{ border:0; }
.card .card-body{ padding:1.25rem 1.25rem; }

/* Footer */
.bs-footer{
  background: var(--header-blue);
}
.bs-footer .footer-link{
  color:#ffffffcc; text-decoration:none;
}
.bs-footer .footer-link:hover{
  color:#fff; text-decoration:underline;
}
.hero-section {
    background-image: url('/images/hero.webp'); /* Your hero background image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: auto; /* Let content determine the height */

}