/* ---------- Custom look to echo the mockups ---------- */
:root{
  --brand:#2f6fab;
}
.navbar .brand-icon{
  width: 36px; height: 36px; background: var(--brand); color:#fff;
}
.hero{
  padding: clamp(2rem, 6vw, 5rem) 0;
  background: linear-gradient(90deg, var(--brand) 0%, #234e79 60%);
}
.hero .hero-image{min-height: 260px; max-height: 520px; background: #f8fbff;}
.hero .pipes::before, .hero .pipes::after{
  content:""; position:absolute; inset:0; 
  background-image: radial-gradient(#e6eef7 2px, transparent 2px);
  background-size: 20px 20px;
}
.hero .tech{position:absolute; inset:0; color:#7aa3ce;}

.service-card .icon-wrap{
  width:64px;height:64px;border-radius:1rem;background:#e9f2fb;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.75rem;color:var(--brand);
}
.feature i{width:52px}
.map-grid{background-image: linear-gradient(transparent 24px, rgba(0,0,0,.06) 25px), linear-gradient(90deg, transparent 24px, rgba(0,0,0,.06) 25px); background-size:25px 25px;}
footer .btn{border-radius: 12px;}

.primary-color {color:#234e79;}    

html, body {
  margin: 0;
  padding: 0;
}

.book-btn { background: #2c6fbf; border: none; }
.book-btn:hover { background:#255fa3;}

.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 28px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
  z-index: 1000;
}

.whatsapp-float i {
  line-height: 60px;
}

.whatsapp-float:hover {
  background-color: #20b954;
  color: #fff;
}

.grayscale {
  filter: grayscale(100%);
  opacity: 0.8;
  transition: all 0.3s ease;
}
.grayscale:hover {
  filter: none;
  opacity: 1;
}

.footer-logos img {
  max-height: 150px; /* Increase/decrease this as needed */
  width: auto;       /* Keeps aspect ratio */
}

  .how-steps .how-step-icon svg { display:block }
  .how-steps .step-number{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:50%;
    background: var(--bs-primary-bg-subtle, rgba(13,110,253,.1));
    color: var(--bs-primary, #0d6efd); font-weight:700; font-size:.9rem;
  }
  .how-steps .check{
    width:18px; height:18px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background: var(--bs-success, #198754);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="white" d="M7.5 13.2 3.8 9.5l1.4-1.4 2.3 2.3 5.3-5.3 1.4 1.4z"/></svg>') center/12px 12px no-repeat;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="white" d="M7.5 13.2 3.8 9.5l1.4-1.4 2.3 2.3 5.3-5.3 1.4 1.4z"/></svg>') center/12px 12px no-repeat;
  }
  /* connectors between steps on lg+ */
  @media (min-width: 992px){
    .how-steps .col-12{ position:relative; padding-left:.25rem }
    .how-steps .col-12:not(:last-child)::after{
      content:""; position:absolute; left:28px; top:64px; width:2px; height:calc(100% - 64px);
      background: rgba(13,110,253,.15);
    }
  }

  /* --- Page basics --- */
html { scroll-behavior: smooth; }

/* Keep hero readable over background */
.hero { min-height: 70vh; display: flex; align-items: center; }
.hero .hero-bg { z-index: 0; }
.hero .container { position: relative; z-index: 1; }

/* Anchor offset so sticky navbar doesn’t cover headings */
section.section-scroll { scroll-margin-top: 90px; }

/* Section separators */
section.section-scroll + section.section-scroll {
  border-top: 1px solid var(--bs-border-color);
}
hr.section-divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--bs-border-color);
  opacity: .6;
}

/* Feature row separators */
.feature { padding: .9rem 0; }
.feature + .feature { border-top: 1px solid var(--bs-border-color); }
.feature .bi, .feature svg {
  font-size: 1.25rem;
  flex: 0 0 auto;
  margin-top: .15rem;
}

/* Map container should fill its ratio box */
#map { width: 100%; height: 100%; }

/* --- Helpful extras already used in your markup --- */
/*.primary-color { color: var(--bs-primary) !important; } */

.brand-icon {
  width: 40px; height: 40px;
  background: var(--bs-primary);
  color: #fff;
  font-size: 1rem;
}

.book-btn {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.book-btn:hover {
  filter: brightness(0.95);
}

/* Footer quick-links (if you add them) */
footer .nav-link {
  color: rgba(255,255,255,.8);
}
footer .nav-link:hover, footer .nav-link:focus {
  color: #fff;
  text-decoration: underline;
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  text-decoration: none;
  z-index: 1080;
}
.whatsapp-float .bi { font-size: 1.6rem; line-height: 1; }
.whatsapp-float:hover { filter: brightness(0.95); color: #fff; }

footer .nav-link {
  color: rgba(255,255,255,.8);
  transition: color .2s ease, transform .2s ease;
}
footer .nav-link:hover,
footer .nav-link:focus {
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}