.elementor-123 .elementor-element.elementor-element-8205efa{--display:flex;}body.elementor-page-123:not(.elementor-motion-effects-element-type-background), body.elementor-page-123 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-6a76d07 );}/* Start custom CSS for html, class: .elementor-element-a8d9b9a *//* ===== Hydrografix Services Page ===== */
:root{
  --hs-navy:#0E0C1B;
  --hs-navy2:#090816;
  --hs-soft:#141a2c;
  --hs-stroke: rgba(255,255,255,.08);
  --hs-text: rgba(255,255,255,.88);
  --hs-muted: rgba(255,255,255,.65);
  --hs-orange:#ff8a00;
}

.hs-page{
  color: var(--hs-text);
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(255,138,0,.12), transparent 60%),
    radial-gradient(900px 600px at 85% 35%, rgba(255,138,0,.10), transparent 60%),
    linear-gradient(180deg, #0B1020 0%, var(--hs-navy2) 100%);
}

.hs-wrap{ width: min(1120px, 92%); margin: 0 auto; }

/* HERO */
.hs-hero{
  padding: 90px 0 54px;
  border-bottom: 1px solid var(--hs-stroke);
}
.hs-kicker{
  display:inline-block;
  padding: 8px 12px;
  border: 1px solid var(--hs-stroke);
  border-radius: 999px;
  color: var(--hs-muted);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}
.hs-hero h1{
  margin: 16px 0 10px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.hs-hero p{
  max-width: 820px;
  color: var(--hs-muted);
  font-size: 16px;
  line-height: 1.6;
}

.hs-actions{
  display:flex; flex-wrap:wrap;
  gap: 12px;
  margin-top: 22px;
}

.hs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--hs-stroke);
  text-decoration:none;
  font-weight: 900;
  letter-spacing:.02em;
}
.hs-btn-primary{
  background: linear-gradient(90deg, var(--hs-orange), #ffb000);
  color: #0b0a13;
  border-color: transparent;
  box-shadow: 0 14px 40px rgba(255,138,0,.18);
}
.hs-btn-ghost{
  background: rgba(255,255,255,.03);
  color: #fff;
}

/* TOC */
.hs-toc{
  display:flex; flex-wrap:wrap;
  gap: 10px;
  margin-top: 18px;
}
.hs-toc a{
  display:inline-flex;
  padding: 8px 12px;
  border: 1px solid var(--hs-stroke);
  border-radius: 999px;
  text-decoration:none;
  color: var(--hs-muted);
  background: rgba(255,255,255,.03);
  font-weight: 800;
  font-size: 12px;
}
.hs-toc a:hover{ color:#fff; }

/* SECTIONS */
.hs-sec{ padding: 60px 0; }
.hs-sec-soft{
  background: rgba(255,255,255,.02);
  border-top: 1px solid var(--hs-stroke);
  border-bottom: 1px solid var(--hs-stroke);
}
.hs-sec-head{ text-align:center; margin-bottom: 26px; }
.hs-sec-head p{ max-width: 760px; margin: 0 auto; color: var(--hs-muted); }

.hs-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}
.hs-grid-rev .hs-media{ order: 2; }
.hs-grid-rev .hs-content{ order: 1; }

.hs-content h2{
  margin: 0 0 12px;
  font-size: clamp(22px, 2.6vw, 30px);
  text-transform: uppercase;
}
.hs-content p{ color: var(--hs-muted); line-height: 1.75; }

/* Cards */
.hs-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.hs-card{
  border: 1px solid var(--hs-stroke);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 18px;
  text-decoration:none;
  color: #fff;
  min-height: 180px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hs-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.14);
}
.hs-ic{
  width: 42px; height: 42px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 12px;
  border: 1px solid var(--hs-stroke);
  background: rgba(255,255,255,.03);
  margin-bottom: 10px;
  font-size: 18px;
}
.hs-card h3{ margin: 0 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing:.03em; }
.hs-card p{ margin: 0; color: var(--hs-muted); line-height: 1.6; font-size: 13.5px; }
.hs-link{ display:inline-block; margin-top: 12px; font-weight: 900; color: var(--hs-orange); }
.hs-card-highlight{
  background: linear-gradient(180deg, rgba(255,138,0,.08), rgba(255,255,255,.03));
}

/* Media blocks (images) */
.hs-media{
  border: 1px solid var(--hs-stroke);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
  min-height: 320px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Replace these URLs with your real images (from Media Library) */
.hs-img-auto{ background-image:url("https://hydrografix.ca/wp-content/uploads/2025/12/hydrographie-quebec-carbon-fiber-hydro-dipping-finish.png"); }
.hs-img-moto{ background-image:url("https://hydrografix.ca/wp-content/uploads/2025/12/hydro-dipping-process-water-transfer-printing-quebec.png"); }
.hs-img-pleinair{ background-image:url("https://hydrografix.ca/wp-content/uploads/2025/12/vernis-clear-coat-hydrographie-quebec-finition-premium.png"); }
.hs-img-electro{ background-image:url("https://hydrografix.ca/wp-content/uploads/2025/12/Hydrographie-Quebec-–-coques-de-consoles-et-manettes-personnalisees-avec-finition-carbone-premium.png"); }
.hs-img-deco{ background-image:url("https://hydrografix.ca/wp-content/uploads/2025/12/Hydrographie-Quebec-–-accessoires-electroniques-et-gaming-hydro-dipped-avec-finition-carbone-et-vernis-premium.png"); }

/* List box */
.hs-listbox{
  margin-top: 14px;
  border: 1px solid var(--hs-stroke);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 14px 14px;
}
.hs-listbox h3{
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
}
.hs-listbox ul{ margin:0; padding-left: 18px; color: var(--hs-text); }
.hs-listbox li{ margin: 9px 0; color: rgba(255,255,255,.78); }

.hs-mini-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* CTA */
.hs-cta{
  text-align:center;
  border: 1px solid var(--hs-stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border-radius: 18px;
  padding: 26px 18px;
}
.hs-cta h2{
  margin: 0 0 10px;
  text-transform: uppercase;
}
.hs-cta p{ margin: 0 0 16px; color: var(--hs-muted); }

/* Responsive */
@media (max-width: 980px){
  .hs-grid-2{ grid-template-columns: 1fr; }
  .hs-grid-rev .hs-media{ order: 1; }
  .hs-grid-rev .hs-content{ order: 2; }
  .hs-cards{ grid-template-columns: 1fr 1fr; }
  .hs-hero{ padding-top: 70px; }
  .hs-media{ min-height: 260px; }
}

@media (max-width: 560px){
  .hs-cards{ grid-template-columns: 1fr; }
  .hs-btn{ width: 100%; }
  .hs-toc a{ width: 100%; justify-content:center; }
  .hs-media{ min-height: 220px; }
}/* End custom CSS */