:root{
  --slate-900:#000000; /* black header/footer */
  --slate-800:#111111;
  --slate-700:#222222;
  --slate-100:#e2e8f0;
  --accent:#facc15; /* safety yellow */
  --primary:#2563eb; /* CTA */
}
*{box-sizing:border-box}
body{
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  color:#0b1220;
  background:#f7fafc;
}
.topbar{background:#000; color:#fff}
.topbar a{color:#fff; text-decoration:none}
.bg-slate{background:#000}
.navbar .nav-link{color:#cbd5e1}
.navbar .nav-link.active,.navbar .nav-link:hover{color:#ffffff}
.navbar-brand{letter-spacing:.5px}

.hero{
  position:relative;
  min-height:55vh;
  display:flex;
  align-items:center;
  color:white;
  /* IMPORTANT: path is relative to assets/css/, so go up one folder */
  background: #0f172a url('../img/IMG_20250916_201751.jpg') center/cover no-repeat;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
}
.hero > .container{position:relative; z-index:1}
.hero .badge{background:var(--accent); color:#111827}
.about-hero {
  /* full-bleed background */
  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url('../img/IMG_20250916_201746.jpg') center / cover no-repeat;
  border-radius: 0 !important;  /* kill rounded corners */
}

.about-hero * {
  background-color: transparent !important;
  color: #fff;
}

.section-title{font-weight:800; letter-spacing:.3px;}
.icon-tile{background:white; border-radius:16px; padding:18px; box-shadow:0 8px 30px rgba(2,6,23,.06);}
.icon-tile .icon{font-size:28px; color:var(--primary)}
.card-service{border:none; border-radius:16px; box-shadow:0 8px 30px rgba(2,6,23,.06);}
.card-service .card-title{font-weight:700}
.badge-accent{background:var(--accent); color:#111827}
.footer a{text-decoration:none}

.mobile-cta{position:fixed; left:0; right:0; bottom:0; display:flex; justify-content:space-around; background:#000; padding:.5rem; z-index:1050;}
.mobile-cta .cta-btn{color:white; text-decoration:none; padding:.5rem 1rem; border:1px solid rgba(255,255,255,.15); border-radius:12px;}
@media (min-width: 992px){ .mobile-cta{display:none} }

.gallery-grid{columns:1; column-gap:1rem;}
@media (min-width:768px){ .gallery-grid{columns:2} }
@media (min-width:1200px){ .gallery-grid{columns:3} }
.gallery-grid img{width:100%; border-radius:12px; margin:0 0 1rem; display:block; object-fit:cover}

.lightbox-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:2000;}
.lightbox-backdrop.open{display:flex}
.lightbox-img{max-width:92vw; max-height:86vh; border-radius:8px}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); font-size:2rem; color:#fff; cursor:pointer; user-select:none; padding:.5rem 1rem;}
.lightbox-prev{left:1rem}
.lightbox-next{right:1rem}
.lightbox-close{position:absolute; top:1rem; right:1rem; font-size:1.75rem; color:#fff; cursor:pointer;}
footer, .site-footer { margin-top: 0 !important; }
/*start**/
/* Services full-bleed background */
/*start*/
.services-hero{
  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url('../img/IMG_20250916_201741.jpg') center / cover no-repeat;
  border-radius: 0;
  margin: 0 !important;
  overflow: hidden; /* stop child margins escaping */
}
.services-hero *{
  background-color: transparent !important;
  color: #fff;
}
/*end*/
/*start*//* Rentals: remove white card background under the images */
.card.card-service,
.card.card-service .card-body {
  background-color: transparent !important;
  color:#fff;
}

/* Optional: keep a subtle border/shadow so the cards still feel like cards */
.card.card-service {
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.35);
}

/* Make "Request a Quote" buttons solid blue (like the hover) */
.rental-card .btn-outline-primary {
  color: #fff !important;
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.rental-card .btn-outline-primary:hover,
.rental-card .btn-outline-primary:focus {
  color: #fff !important;
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  filter: brightness(.92);
}
/*end*/
/*start*/
/* Center the title + button inside each card body */
.rental-card .card-body {
  display: flex;                /* already set, but reaffirm */
  flex-direction: column;
  justify-content: center;      /* vertical center within the card body */
  align-items: center;          /* horizontal center */
  text-align: center;           /* center the text itself */
}

/* Remove the push-to-bottom so the button can center with the title */
.rental-card .cta {
  margin-top: 0 !important;
}

/* Ensure the button itself is centered */
.rental-card .btn {
  display: inline-block;
  margin: 0 auto;
}

/* (Optional) tighten spacing a bit */
.rental-card .card-title {
  margin-bottom: .5rem;
}
.hero .cta-row { margin-top: clamp(9rem, 3.5vh, 2.75rem); }
/*end*/
@media (max-width: 991.98px) {
  .navbar .navbar-toggler { margin-left: auto; }
}