:root {
  --navy:#062b49;
  --blue:#0879c9;
  --cyan:#12b8d8;
  --light:#f3f9fc;
  --text:#163247;
}
html { scroll-behavior:smooth; }
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--text); }
.navbar { background:rgba(4,35,59,.95); backdrop-filter:blur(10px); padding:16px 0; }
.navbar-brand span { color:#62dcf3; }
.nav-link { margin-left:14px; font-weight:bold; color:#fff;}
.hero {
  background: linear-gradient(90deg, rgba(3,31,53,.95), rgba(3,54,86,.72)),
              radial-gradient(circle at 80% 30%, #16b7d8, transparent 28%),
              linear-gradient(135deg,#075e91,#031d33);
  color:white;
  min-height:100vh;
} 
.eyebrow { letter-spacing:2px; font-size:1rem; font-weight:800; color:#10a9d2; margin-bottom:14px; }
.eyepara { letter-spacing:2px; font-size:1.5rem; color:#fff; margin-bottom:14px; }
.hero .eyebrow { color:#7ce7f5; }
.hero h1 { font-size:clamp(3rem,7vw,6rem); line-height:.98; font-weight:800; letter-spacing:-3px; }
.hero h2 { font-size:clamp(2rem,7vw,6rem); line-height:0.98; font-weight:600; letter-spacing:-0.05em; }
.hero span { color:#67e0f1; }
.hero h2 span { color:#67e0f1; }
.hero .lead { max-width:720px; color:#d9edf6; font-size:1.15rem; }
.btn-primary { background:var(--blue); border-color:var(--blue); }
.btn-primary:hover { background:#0565a8; border-color:#0565a8; }
.hero-points { display:flex; flex-wrap:wrap; gap:22px; color:#d6eef5; font-size:.95rem; }
.stats { background:white; box-shadow:0 12px 35px rgba(0,0,0,.08); position:relative; z-index:2; }
.stats div div { padding:15px 10px; }
.stats strong { display:block; font-size:2rem; color:var(--navy); }
.stats small { color:#718493; }
.section { padding:50px 0; }
.section-light { background:var(--light); }
.section-heading { max-width:98%; margin:auto; }
.section h2 { font-size:clamp(2rem,4vw,3.2rem); color:var(--navy); font-weight:800; letter-spacing:-1px; }
.product-card {
  height:100%; padding:34px; border-radius:20px; background:white;
  border:1px solid #e4eef3; transition:.25s; box-shadow:0 8px 24px rgba(7,46,70,.05);
}
.product-card:hover { transform:translateY(-7px); box-shadow:0 18px 40px rgba(7,46,70,.12); }
.product-icon { font-size:3.0rem; margin-bottom:20px; }
.product-card h3 { color:var(--navy); font-size:1.35rem; }
.product-card p { color:#657987; min-height:75px; }
.product-card a { color:var(--blue); font-weight:700; text-decoration:none; }
.service { display:flex; gap:24px; padding:24px 0; border-bottom:1px solid #dce9ef; }
.service b { color:#0ca5cc; font-size:1.3rem; }
.service h4 { color:var(--navy); margin-bottom:6px; }
.service p { margin:0; color:#718493; }
.about-box {
  min-height:390px; border-radius:30px; position:relative; overflow:hidden;
  background:linear-gradient(145deg,#06304f,#0796bd);
  display:flex; align-items:flex-end; padding:35px; color:white;
}
.about-box:before, .about-box:after {
  content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.2);
}
.about-box:before { width:390px; height:390px; right:-90px; top:-80px; }
.about-box:after { width:250px; height:250px; left:-80px; bottom:-100px; }
.water-orb { width:170px; height:170px; border-radius:50%; background:rgba(107,230,247,.2); border:2px solid rgba(255,255,255,.45); position:absolute; top:80px; left:120px; }
.cta { padding:40px 0; color:white; background:linear-gradient(120deg,#05699e,#09a9c9); }
.cta h2 { color:white; font-size:3rem; font-weight:800; }
.contact-info { background:var(--light); border-radius:22px; padding:28px; }
.contact-item { display:flex; gap:18px; padding:18px 0; border-bottom:1px solid #dbe8ed; }
.contact-item:last-child { border-bottom:0; }
.contact-item span { font-size:1.5rem; }
.contact-item p { margin:4px 0 0; color:#000; }
.contact-form { padding:10px; }
.form-control, .form-select { padding:14px 16px; border-radius:10px; border-color:#d6e4eb; }
.form-control:focus, .form-select:focus { border-color:#16a6ce; box-shadow:0 0 0 .2rem rgba(22,166,206,.12); }
footer { background:#032239; color:#d6e6ed; padding:30px 0; }
footer strong { color:white; }
.whatsapp {
  position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:50%;
  background:#20b968; color:white; display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:30px; box-shadow:0 8px 25px rgba(0,0,0,.2); z-index:10;
}
@media(max-width:767px) {
  .hero h1 { letter-spacing:-2px; }
  .section { padding:70px 0; }
  .hero-points { gap:10px; flex-direction:column; }
  .cta h2 { font-size:2.3rem; }
}
.top-right-gif {
  position: absolute;
  top: 120px;      /* Distance from the top edge */
  right: 130px;    /* Distance from the right edge */
  width: 250px;    /* Adjust size as needed */
  height: auto;
  z-index: 10;    /* Ensures GIF stays above the background */
}
.stats { 
  background: white; 
  box-shadow: 0 12px 35px rgba(0,0,0,.08); 
  position: relative; 
  z-index: 2;
  margin-top: 0; /* Ensure no negative margin is causing pull-up */
}
.hero-section .container-fluid {
  position: relative;
}
:target {
  scroll-margin-top: 80px;
}
html {
  scroll-padding-top: 80px; /* Adjust to match header height */
  scroll-behavior: smooth;
}
.app-card {
  height:100%; padding:14px; text-align:center; border-radius:20px; background:white;
  border:1px solid #e4eef3; box-shadow:0 8px 24px rgba(7,46,70,.05);
}
.app-card h3 { color:#048; font-size:1.35rem; }
.app-card img { width:25%; }
	p {
		font-size:14pt; 
	}
.customer-card {
  height:100%; padding:14px; text-align:center; border-radius:20px; background:white;
  border:1px solid #e4eef3; box-shadow:0 8px 24px rgba(7,46,70,.05);
}
.customer-card img { width:25%; height:auto; display: block; margin: 0 auto;" }