<style>
:root{
  --primary:#0b4d6d;
  --accent:#ff9800;
  --dark:#0a1d2a;
}

/* ============ HERO ============ */
/* ============ HERO WITH FORM ============ */
.hero{
  background:linear-gradient(rgba(11,77,109,.85),rgba(11,77,109,.85));
  background-size:cover;
  background-position:center;
  color:#fff;
  padding:100px 0;
}

.hero-form{
  background:#fff;
  padding:25px;
  border-radius:15px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.hero-form h3{
  color:var(--primary);
  text-align:center;
}
.hero-form .form-control{
  border-radius:8px;
  font-size:14px;
}
.hero-form button{
  background:var(--accent);
  border:none;
  color:#fff;
  padding:10px;
  border-radius:25px;
  font-weight:bold;
}
.hero-form button:hover{
  background:#e68900;
}


/* ============ BUTTONS ============ */
.btn-primary-custom{
  background:var(--accent);
  border:none;
  color:#fff;
  border-radius:30px;
  padding:12px 24px;
  font-weight:600;
}
.btn-primary-custom:hover{
  background:#e68900;
}

/* ============ SERVICE CARDS ============ */
.service-card img{
  height:180px;
  object-fit:cover;
}

/* ============ CONTACT ============ */
.contact-box{
  background:linear-gradient(120deg,#0b4d6d,#0e6fa3);
  color:#fff;
  border-radius:24px;
}

/* ============ CLIENT SLIDER ============ */
.client-slider{
  overflow:hidden;
  position:relative;
}
.client-track{
  display:flex;
  width:max-content;
  animation:scrollClients 50s linear infinite;
}
.client-item{
  width:160px;
  flex-shrink:0;
  padding:10px;
}
.client-item img{
  width:100%;
  height:70px;
  object-fit:contain;
  background:#fff;
  padding:10px;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
}

@keyframes scrollClients{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.client-slider:hover .client-track{
  animation-play-state:paused;
}

/* ============ FLOATING BUTTONS ============ */
.whatsapp,
.call{
  position:fixed;
  right:16px;
  padding:12px 16px;
  border-radius:50px;
  font-weight:600;
  color:#fff;
  font-size:14px;
  z-index:999;
  text-decoration:none;
}
.whatsapp{
  bottom:18px;
  background:#25d366;
}
.call{
  bottom:70px;
  background:#0b4d6d;
}

/* ============ FOOTER ============ */
footer{
  background:var(--dark);
  color:#ccc;
  font-size:13px;
}

footer{
  background:#0a1d2a;
}
.footer-links li{
  margin-bottom:6px;
}
.footer-links a,
.footer-link{
  color:#ccc;
  text-decoration:none;
  font-size:14px;
}
.footer-links a:hover,
.footer-link:hover{
  color:#ff9800;
}
</style>