.elementor-10346 .elementor-element.elementor-element-0652f99{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-65px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-10346 .elementor-element.elementor-element-0652f99.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-10346 .elementor-element.elementor-element-125ecb9{padding:0px 0px 0px 0px;}.elementor-10346 .elementor-element.elementor-element-47378c9f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;overflow:visible;}.elementor-10346 .elementor-element.elementor-element-47378c9f:not(.elementor-motion-effects-element-type-background), .elementor-10346 .elementor-element.elementor-element-47378c9f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#151724;}.elementor-10346 .elementor-element.elementor-element-47378c9f::before, .elementor-10346 .elementor-element.elementor-element-47378c9f > .elementor-background-video-container::before, .elementor-10346 .elementor-element.elementor-element-47378c9f > .e-con-inner > .elementor-background-video-container::before, .elementor-10346 .elementor-element.elementor-element-47378c9f > .elementor-background-slideshow::before, .elementor-10346 .elementor-element.elementor-element-47378c9f > .e-con-inner > .elementor-background-slideshow::before, .elementor-10346 .elementor-element.elementor-element-47378c9f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#151724;--background-overlay:'';}.elementor-10346 .elementor-element.elementor-element-3f4b2dc0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -18px) 0px;padding:0px 0px 0px 0px;}.elementor-10346 .elementor-element.elementor-element-3f4b2dc0 .elementskit-section-title-wraper .elementskit-section-title{color:#7434FA;font-size:62px;}.elementor-10346 .elementor-element.elementor-element-3f4b2dc0 .elementskit-section-title-wraper .elementskit-section-title:hover{color:#FFFFFF;}.elementor-10346 .elementor-element.elementor-element-3f4b2dc0 .elementskit-section-title-wraper .elementskit-section-title > span{color:#FFFFFF;}.elementor-10346 .elementor-element.elementor-element-3f4b2dc0 .elementskit-section-title-wraper .elementskit-section-title:hover > span{color:#FFCE05;}.elementor-10346 .elementor-element.elementor-element-3f4b2dc0 .elementskit-section-title-wraper .elementskit-border-divider{width:100px;}.elementor-10346 .elementor-element.elementor-element-3f4b2dc0 .elementskit-section-title-wraper .elementskit-border-divider.elementskit-style-long{width:100px;height:4px;}.elementor-10346 .elementor-element.elementor-element-3f4b2dc0 .elementskit-section-title-wraper .elementskit-border-star{width:100px;height:4px;}.elementor-10346 .elementor-element.elementor-element-3f4b2dc0 .elementskit-section-title-wraper .elementskit-border-divider, .elementor-10346 .elementor-element.elementor-element-3f4b2dc0 .elementskit-border-divider::before{height:4px;}.elementor-10346 .elementor-element.elementor-element-48b4a84a{background-color:#151724;}.elementor-10346 .elementor-element.elementor-element-d27b132{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;overflow:visible;}.elementor-10346 .elementor-element.elementor-element-d27b132:not(.elementor-motion-effects-element-type-background), .elementor-10346 .elementor-element.elementor-element-d27b132 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10346 .elementor-element.elementor-element-d27b132::before, .elementor-10346 .elementor-element.elementor-element-d27b132 > .elementor-background-video-container::before, .elementor-10346 .elementor-element.elementor-element-d27b132 > .e-con-inner > .elementor-background-video-container::before, .elementor-10346 .elementor-element.elementor-element-d27b132 > .elementor-background-slideshow::before, .elementor-10346 .elementor-element.elementor-element-d27b132 > .e-con-inner > .elementor-background-slideshow::before, .elementor-10346 .elementor-element.elementor-element-d27b132 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#FFFFFF;--background-overlay:'';}.elementor-10346 .elementor-element.elementor-element-36590f76{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;overflow:visible;}@media(max-width:767px){.elementor-10346 .elementor-element.elementor-element-3f4b2dc0 .elementskit-section-title-wraper .elementskit-section-title > span{padding:20px 0px 0px 0px;}}@media(max-width:1024px) and (min-width:768px){.elementor-10346 .elementor-element.elementor-element-0652f99{--width:931px;}}/* Start custom CSS for html, class: .elementor-element-125ecb9 *//* =========================================================
   ZagaTech — Logistics Page (ZAGANEW layout reused)
   Ordered to match HTML sections
   ========================================================= */

/* -------------------------------
   0) Root tokens & utilities
-------------------------------- */
#lg-page{
  --bg:#0f1117; --bg-accent:#141a23;
  --brand:#ffce05; --brand-2:#00d1b2;
  --text:#ffffff; --muted:#cbd1dc; --surface:#ffffff;
  --shadow:0 20px 50px rgba(0,0,0,.35);
  --soft:0 0 16px 5px rgba(147,147,147,.20);
  --soft-2:0 0 16px 5px rgba(0,0,0,.20);
  --radius-sm:8px; --radius:14px; --radius-xl:28px;
}
#lg-page section{ margin-top:35px; }

/* Global gutters (fix left-edge hugging) */
.lg-hero__wrap,
.lg-wrap,
.container--wide,
.lg-topbar__inner {
  padding-inline: clamp(16px, 3.5vw, 28px);
}
@media (max-width:480px){
  .lg-hero__media { padding-left:4px; padding-right:4px; }
}

/* Premium CTA (shared, ZAGANEW) */
.zt-btn {
  font-size:14px; font-weight:900; padding:14px 26px; border-radius:999px;
  background:linear-gradient(90deg, #00d1b2, #00b09b); color:#fff; text-transform:uppercase; letter-spacing:.5px;
  display:inline-flex; align-items:center; gap:10px; border:none; box-shadow:0 8px 20px rgba(0,209,178,.35); cursor:pointer;
  transition:background .3s ease, transform .2s ease, box-shadow .3s ease;
}
.zt-btn:hover{ background:linear-gradient(90deg, #00b09b, #00977c); transform:translateY(-3px) scale(1.03); box-shadow:0 12px 28px rgba(0,209,178,.5); }
.zt-btn:active{ transform:translateY(0) scale(.98); box-shadow:0 6px 16px rgba(0,209,178,.3); }
.zt-btn .zt-btn-icon{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#f4f4f4; color:#2c2725; font-size:14px; }

/* -------------------------------
   1) TOPBAR
-------------------------------- */
.lg-topbar{ background:#fff; border-bottom:1px solid rgba(0,0,0,.06); }
.lg-topbar__inner{ width:min(1200px,92%); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.t-badges,.t-regions{ display:flex; gap:8px; list-style:none; padding:10px 0; margin:0; }
.t-badges li,.t-regions li{ background:#f5f6fa; border:1px solid rgba(0,0,0,.06); padding:4px 10px; border-radius:999px; font-weight:800; font-size:12px; color:#000; }

/* -------------------------------
   2) HERO  (#lg-hero)
-------------------------------- */
.hero-container{ width:100%; max-width:1200px; margin-inline:auto; }
#lg-hero.hero-section{
  background:
    radial-gradient(1200px 500px at 85% -200px, rgba(0,209,178,.25), transparent 60%),
    radial-gradient(900px 400px at -200px 60%, rgba(255,209,102,.18), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-accent));
  padding:72px 0;
}
#lg-hero .hero-row{
  display:grid; grid-template-columns:1fr 1fr; gap:50px;
  grid-template-areas:"img text"; align-items:start;
}
#lg-hero .hero-row.is-rl{ grid-template-areas:"text img"; }
#lg-hero .hero-img-wrap{ grid-area:img; display:flex; justify-content:flex-start; }
#lg-hero .hero-text{ grid-area:text; color:var(--text); }
.hero-tag{
  display:inline-block; letter-spacing:.08em; text-transform:uppercase; font-weight:800; font-size:22px;
  color:#121319; background:linear-gradient(90deg, var(--brand), #ffe9a9); padding:8px 14px; border-radius:999px; box-shadow:var(--shadow);
}
.hero-title{ color:var(--text); font-size:clamp(32px,4vw,56px); line-height:1.05; font-weight:800; margin:14px 0 10px; }
.hero-desc{ color:var(--muted); font-size:clamp(16px,1.4vw,18px); line-height:1.7; max-width:58ch; font-weight:600; margin:10px 0 18px; }
.hero-btn-wrap{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hero-btn{
  --h:50px; display:inline-flex; align-items:center; gap:10px; background:linear-gradient(180deg, #fff, #e9edf3); color:#0e0f14;
  height:var(--h); padding:0 18px 0 12px; border-radius:calc(var(--h)/2); text-decoration:none; font-weight:800; letter-spacing:.02em;
  position:relative; box-shadow:0 10px 28px rgba(0,0,0,.28); transition:transform .25s, box-shadow .25s, background .25s;
}
.hero-btn:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 16px 40px rgba(0,0,0,.35), 0 0 15px rgba(0,209,178,.4); background:linear-gradient(180deg,#fff,#f5f7fa); }
.hero-btn-icon{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:linear-gradient(180deg, #f2f5fa, #dfe6f0); box-shadow:inset 0 2px 6px rgba(0,0,0,.05); }
.hero-btn-shape{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 0 rgba(0,209,178,.45); animation:lgHeroPulse 2.2s ease-out infinite; }
@keyframes lgHeroPulse{ 0%{box-shadow:0 0 0 0 rgba(0,209,178,.45);} 70%{box-shadow:0 0 0 14px rgba(0,209,178,0);} 100%{box-shadow:0 0 0 0 rgba(0,209,178,0);} }
.hero-img{ display:block; width:100%; height:auto; object-fit:contain; transition:transform .6s ease; }
.hero-img-wrap:hover .hero-img{ transform:translateY(-6px); }
.freshness{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; font-size:14px; color:#d7dbe6; }
.freshness .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-2); box-shadow:0 0 0 6px rgba(0,209,178,.15); }
@media (max-width:1024px){
  #lg-hero .hero-row{ grid-template-columns:1fr; grid-template-areas:"text" "img"; gap:28px; }
  #lg-hero.hero-section{ padding:56px 0; }
}

/* -------------------------------
   3) INTRO (ZAGANEW)  (#lg-intro)
-------------------------------- */
.section-webdev{ font-size:16px; line-height:1.6; color:#000; }
.container--wide{ position:relative; }
.has-bottom-space{ padding-bottom:50px; }
.mb-30{ margin-bottom:30px; }
.section-webdev__kicker{
  display:inline-block; font-weight:800; letter-spacing:.3px; padding:20px 8px; border-radius:999px; font-size:26px; color:#000;
  background:linear-gradient(135deg,#fff 0%,#fff 100%), url('https://zagatech.pro/assets/images/home/head_bg.webp'); background-size:cover; background-blend-mode:overlay;
  box-shadow:0 4px 12px rgba(0,0,0,.25); 
}
.section-webdev__title{ margin-top:10px; font-size:clamp(28px,3.8vw,44px); line-height:1.2; font-weight:800; color:#000; }
.section-webdev__text{ font-size:16px; color:#000; margin:0 0 16px 0; font-weight:500; }
.section-webdev__image{ width:100%; height:auto; border-radius:12px; display:block; object-fit:cover; box-shadow:var(--soft); }
.feature-card{ color:#000; font-size:14px; box-shadow:var(--soft); padding:16px; font-weight:800; border-radius:var(--radius-sm); height:100%; background:var(--surface); transition:box-shadow .25s, transform .2s; }
.feature-card:hover{ box-shadow:var(--soft-2); transform:translateY(-2px); color:#ffce05;}

/* -------------------------------
   4) SERVICES  (#lg-services)
-------------------------------- */
.wds-services{
  background:
    radial-gradient(1000px 400px at -220px 50%, rgba(255,206,5,.15), transparent 60%),
    radial-gradient(1000px 420px at 110% -180px, rgba(0,209,178,.15), transparent 60%),
    #0e0f14;
  padding:72px 0; color:#e9ecf1;
}
.wds-container{ width:100%; max-width:1200px; margin-inline:auto; }
.wds-row{ display:grid; grid-template-columns:.8fr 1fr; gap:40px; }
.wds-panel{ background:#151724; border:1px solid #2a2d3a; border-radius:22px; padding:28px 22px; box-shadow:0 18px 40px rgba(0,0,0,.35); position:sticky; top:24px; height:fit-content; }
.wds-panel-kicker{
  font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:32px; color:#0f1117;
  display:inline-block; padding:8px 12px; border-radius:999px; background:linear-gradient(90deg, #ffce05, #ffeaa9); margin:0;
}
.wds-panel-title{ font-size:clamp(28px,3.4vw,44px); line-height:1.15; margin:14px 0 6px; }
.wds-panel-text{ color:#fff; font-size:15.5px; line-height:1.7; margin:0 0 12px; }
.wds-tabs-list{ display:flex; flex-direction:column; gap:8px; padding-left:0; margin:18px 0 0; list-style:none;font-size:20px; font-weight:600;}
.wds-tab > span{ display:block; padding:16px; border-radius:12px; background:#0f1119; border:1px solid #2a2d3a; transition:background .25s, border-color .25s, transform .2s, box-shadow .25s; }
.wds-tab.active > span{ background:linear-gradient(90deg, #ffce05, #ffeaa9); color:#111317; border-color:transparent; }
.wds-tab-content .wds-cards-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.wds-card{ border:1px solid #2a2d3a; border-radius:14px; background:linear-gradient(180deg,#1a1d2a,#141724); padding:20px; transition:border-color .25s, box-shadow .25s, transform .25s, background .25s; }
.wds-card-title{ font-weight:800; font-size:18px; margin:2px 0 10px; }
.wds-card-text{ color:#b7bcc7; font-size:15px; line-height:1.75; margin:0; }
.wds-card-col.active .wds-card{ border-color:rgba(0,209,178,.55); box-shadow:0 12px 30px rgba(0,0,0,.35), 0 0 0 4px rgba(0,209,178,.18) inset; background:linear-gradient(180deg,#1e2233,#15192a); }
@media (max-width:1200px){ .wds-row{ grid-template-columns:1fr; } .wds-panel{ position:relative; top:auto; } }
@media (max-width:991px){ .wds-services{ padding:56px 0; } .wds-tab-content .wds-cards-grid{ grid-template-columns:1fr; gap:18px; } }

/* -------------------------------
   5) TECH STACK + DASH GALLERY  (#lg-techstack)
-------------------------------- */
#lg-techstack{ background:#fff; color:#000; }
#lg-techstack .zt-badge{
  display:inline-block; font-weight:800; padding:16px 18px; border-radius:999px; font-size:26px; margin-bottom:10px;
  background:linear-gradient(rgba(0,0,0,.06),rgba(0,0,0,.06)), url('https://zagatech.pro/assets/images/home/head_bg.webp'); background-size:cover;
}
#lg-techstack .zt-title{ font-weight:700; font-size:clamp(28px,3.2vw,40px); margin:8px 0 14px; }
.dash-tabs{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.dash-tabs button{ border:1px solid rgba(0,0,0,.1); background:#fff; border-radius:999px; padding:8px 12px; cursor:pointer; font-weight:800; font-size:13px; }
.dash-tabs button.active{ background:#ffe289; border-color:#ffe289; }
.dash-grid{ margin-top:12px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.dash-card{ border:1px solid rgba(0,0,0,.08); border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--soft); padding: 16px 20px; /* top/bottom 16px, left/right 20px */ }
.dash-card img{ width:100%; height:120px; object-fit:cover; display:block; }
.dash-card h4{ font-size:14px; font-weight:800; margin:8px 10px; color:#222; }
@media (max-width:991px){ .dash-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:575px){ .dash-grid{ grid-template-columns:1fr; } }

/* -------------------------------
   6) TRUST BAND  (#lg-trust)
-------------------------------- */
#lg-trust{ background:#ffce05; }
.trust-band{ width:min(1200px,92%); margin-inline:auto; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:16px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; align-items:center;  }
.trust-item{ display:flex; gap:10px; align-items:center; color:#000;}
.trust-badge{ width:34px; height:34px; border-radius:50%; background:#ffea9b; display:inline-grid; place-items:center; font-weight:900; }
.trust-item small{ color:#666; font-size:12px; color:#000; padding-left:5px;}
@media (max-width:991px){ .trust-band{ grid-template-columns:1fr 1fr; } }

/* -------------------------------
   7) KPI BAND  (#lg-kpis)
-------------------------------- */
.lg-kpis{ background:#ffffff; padding:26px 0; }
.kpi-band{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; list-style:none; padding:0; margin:0; }
.kpi{
  background:#0f1117; border:1px solid #2a2d3a; border-radius:14px; padding:16px;
  color:#e9ecf1; box-shadow:0 8px 20px rgba(0,0,0,.22);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.kpi__label{ font-weight:800; color:#cbd1dc; font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
.kpi__value{ font-weight:900; font-size:20px; }
.kpi__delta{ font-weight:800; font-size:12px; padding:4px 8px; border-radius:999px; }
.kpi__delta.up{ background:rgba(0,209,178,.18); color:#00d1b2; }
.kpi__delta.down{ background:rgba(255,55,55,.15); color:#ff6b6b; }
@media(max-width:768px){ .kpi-band{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .kpi-band{ grid-template-columns:1fr; } }

/* -------------------------------
   8) USE CASES  (#lg-usecases)
-------------------------------- */
.lg-usecases{ background:#ffffff; padding:48px 0; }
.usecases__header{ display:grid; gap:8px; margin-bottom:16px; }
.usecases__badge{
  display:inline-block; font-weight:800; letter-spacing:.3px; padding:6px 12px; border-radius:999px;
  background:; color:#2c2725; font-size:24px; line-height:1;
}
.usecases__title{ font-weight:900; font-size:clamp(26px,3vw,38px); margin:0; color:#101114; }
.usecases__lead{ color:#4f4f4f; margin:0; font-size:16px; color:#000;}
.usecases__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:18px; }
.ucard{
  background:#13141b; border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:18px;
  box-shadow:0 8px 24px rgba(0,0,0,0.25); color:#e9ecf1; transition:transform .15s, box-shadow .2s, border-color .2s;
}
.ucard:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,0.3); border-color:rgba(255,255,255,0.16); }
.ucard__title{ font-size:18px; font-weight:900; margin:0 0 6px; color:#fff; }
.ucard__text{ font-size:14.5px; color:#cbd1dc; margin:0 0 8px; }
.ucard__kpis{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.ucard__kpis li{ background:#0b0d14; border:1px solid #232535; border-radius:8px; padding:8px; font-weight:800; font-size:13px; }
@media(max-width:1200px){ .usecases__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px){ .usecases__grid{ grid-template-columns:1fr; } }

/* -------------------------------
   9) PRICING / ENGAGEMENT  (#lg-pricing)
-------------------------------- */
.lg-pricing{ background:#fff; padding:48px 0; }
.pricing__badge{
  display:inline-block; font-weight:800; letter-spacing:.3px; padding:6px 12px; border-radius:999px;
  background:#e6fcf5; color:#0b7285; font-size:24px; line-height:1; 
}
.pricing__title{ font-weight:900; font-size:clamp(26px,3vw,38px); margin:8px 0 16px; color:#101114;  }
.pricing__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; color:#000;}
.price-card{
  background:#ffffff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:18px; box-shadow:0 0 16px 5px rgba(147,147,147,.18);
  transition:transform .15s, box-shadow .2s, border-color .2s; 
}
.price-card:hover{ transform:translateY(-2px); box-shadow:0 0 16px 5px rgba(0,0,0,.22); border-color:#ffe08a; }
.price-card__title{ font-weight:900; margin:0 0 6px; }
.price-card__desc{ color:#4f4f4f; margin:0 0 8px; color:#000;}
.price-card__list{ list-style:none; padding:0; margin:0 0 12px; display:grid; gap:6px; }
.price-card__list li{ background:#f8f9fb; border:1px solid rgba(0,0,0,.06); border-radius:10px; padding:8px 10px; font-weight:700; }
.lgp-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:linear-gradient(90deg,#00d1b2,#00b09b); color:#000;
  font-weight:900; text-decoration:none; box-shadow:0 8px 20px rgba(0,209,178,.35);
}
.lgp-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,209,178,.5); }
@media(max-width:1024px){ .pricing__grid{ grid-template-columns:1fr; } }

/* -------------------------------
   10) API & WEBHOOKS  (#lg-api)
-------------------------------- */
.lg-api{ background:#ffffff; padding:48px 0; }
.api__badge{
  display:inline-block; font-weight:800; letter-spacing:.3px; padding:6px 12px; border-radius:999px;
  background:#ffe3e3; color:#c92a2a; font-size:24px; line-height:1;
}
.api__title{ font-weight:900; font-size:clamp(26px,3vw,38px); margin:8px 0 8px; color:#101114; }
.api__lead{ color:#4f4f4f; margin:0 0 12px; color:#000;}
.api__tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; color:#000;}
.api-tab{ cursor:pointer; border:1px solid rgba(0,0,0,.1); background:#fff; border-radius:999px; padding:8px 12px; font-weight:800; font-size:13px; }
.api-tab.active{ background:#ffe289; border-color:#ffe289; }
.api__code{
  background:#0b0d14; color:#e9ecf1; border:1px solid #2a2d3a; border-radius:12px; padding:16px; overflow:auto;
  box-shadow:0 8px 24px rgba(0,0,0,0.25); font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Keep gutters in these sections */
#lg-kpis .lg-wrap,
#lg-usecases .lg-wrap,
#lg-pricing .lg-wrap,
#lg-api .lg-wrap {
  padding-inline: clamp(16px, 3.5vw, 28px);
}

/* -------------------------------
   11) INTEGRATIONS MARQUEE  (#lg-integrations)
-------------------------------- */
#lg-integrations{ background:#ffce05; padding:24px 0; }
.marquee{ overflow:hidden; position:relative; width:100%; }
.marquee-track{ display:flex; width:max-content; gap:34px; animation:marq 28s linear infinite; }
@keyframes marq { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marq-logo{ height:34px; display:block; object-fit:contain; filter:contrast(1.1) saturate(1.05); }

/* -------------------------------
   12) PROCESS — ZAGANEW Section 5  (#lg-process)
-------------------------------- */
#lg-process{
  --p-bg:#ffffff; --p-text:#2c2725; --p-muted:#4f4f4f; --p-title:#101114; --p-accent:#edbf09;
  --p-card-bg:#13141b; --p-card-border:rgba(255,255,255,0.08);
  --p-shadow:0 8px 28px rgba(0,0,0,0.25); --p-shadow-soft:0 10px 20px rgba(0,0,0,0.15);
  --p-radius:14px; --p-line:rgba(0,0,0,0.12); --p-line-dot:#edbf09;
  color:var(--p-text); background:var(--p-bg); position:relative; padding:56px 0;
}
#lg-process .ztp__container{ position:relative; z-index:1; }
#lg-process .ztp__badge{
  display:inline-block; font-weight:800; letter-spacing:.3px; padding:6px 18px; border-radius:999px; font-size:25px; margin-bottom:12px; color:#000;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)), url('https://zagatech.pro/assets/images/home/head_bg.webp'); background-size:cover;
}
#lg-process .ztp__title{ color:var(--p-title); font-weight:800; font-size:clamp(28px,3.2vw,42px); margin:6px 0 16px; }
@keyframes lgFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
#lg-process .ztp__image{ max-width:100%; height:auto; display:block; border-radius:12px; box-shadow:var(--p-shadow-soft); animation:lgFloat 4s ease-in-out infinite; }
#lg-process .ztp__scroll{ position:relative; max-height:720px; overflow:auto; padding-right:8px; -webkit-overflow-scrolling:touch; }
#lg-process .ztp__scroll::-webkit-scrollbar{ width:6px; } 
#lg-process .ztp__scroll::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.25); border-radius:999px; }
#lg-process .ztp__timeline{ position:relative; padding:10px 0; }
#lg-process .ztp__timeline::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; background:linear-gradient(180deg, transparent, var(--p-line), transparent); transform:translateX(-50%); pointer-events:none; }
#lg-process .ztp__row{ position:relative; display:flex; margin:8px 0 24px; }
#lg-process .ztp__row:last-child{ margin-bottom:8px; }
#lg-process .ztp__row::before{ content:""; position:absolute; left:50%; top:16px; transform:translate(-50%,-50%); width:12px; height:12px; border-radius:50%; background:var(--p-line-dot); box-shadow:0 0 0 6px rgba(237,191,9,0.15); }
#lg-process .ztp__col{ width:50%; padding:0 12px; }
#lg-process .ztp__col--push{ margin-left:auto; }
#lg-process .ztp__card{ background:var(--p-card-bg); border:1px solid var(--p-card-border); border-radius:var(--p-radius); padding:20px 18px; box-shadow:var(--p-shadow); transition:transform .15s, box-shadow .2s, border-color .2s, background .2s; }
#lg-process .ztp__card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,0.28); border-color:rgba(255,255,255,0.18); background:#171924; }
#lg-process .ztp__step{ font-size:18px; font-weight:800; color:#ffffff; margin:0 0 8px; }
#lg-process .ztp__text{ font-size:15px; line-height:1.6; color:#cbd1dc; margin:0; }
#lg-process .ztp__row--odd .ztp__col{ margin-right:auto; }
#lg-process .ztp__row--even .ztp__col{ margin-left:auto; }
@media (max-width:991px){
  #lg-process .ztp__timeline::before{ left:24px; transform:none; }
  #lg-process .ztp__row::before{ left:24px; }
  #lg-process .ztp__col, #lg-process .ztp__col--push{ width:100%; margin:0; padding-left:48px; }
}
@media (max-width:575px){
  #lg-process .ztp__card{ padding:16px 14px; }
  #lg-process .ztp__step{ font-size:17px; }
  #lg-process .ztp__text{ font-size:14px; }
  #lg-process .ztp__scroll{ max-height:unset; }
}

/* -------------------------------
   13) ROI  (#lg-roi)
-------------------------------- */
#lg-roi{ background:#151724; padding:40px 0; }
.roi-wrap{ width:min(1200px,92%); margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.roi-card{ background:#0f1117; color:#e9ecf1; border:1px solid #2a2d3a; border-radius:16px; padding:20px; box-shadow:0 14px 34px rgba(0,0,0,.22); }
.roi-form .field{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.roi-form label{ font-weight:800; font-size:13px; color:#dbe1ee; }
.roi-form input{ background:#0b0d14; color:#fff; border:1px solid #2a2d3a; border-radius:10px; padding:10px; outline:none; }
.roi-note{ font-size:12px; color:#97a0b4; margin-top:6px; }
.roi-result{ background:#ffffff; color:#111; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:20px; box-shadow:var(--soft); }
.roi-result .big{ font-size:28px; font-weight:900; }
.roi-result .sub{ color:#444; font-size:14px; color:#000; }
@media (max-width:991px){ .roi-wrap{ grid-template-columns:1fr; } }

/* -------------------------------
   14) CASES  (#lg-cases)
-------------------------------- */
#lg-cases{ background:#ffffff; padding:30px 0; }
.case-wrap{ width:min(1200px,92%); margin-inline:auto; }
.case-track{ display:grid; grid-auto-flow:column; grid-auto-columns:calc(33.333% - 12px); gap:18px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:6px; }
.case-card{ scroll-snap-align:start; border:1px solid rgba(0,0,0,.08); border-radius:14px; background:#fff; box-shadow:var(--soft); padding:16px; min-height:160px; color:#000;}
.case-card h4{ margin:0 0 4px; font-weight:900; font-size:16px; }
.case-metric{ margin-top:8px; font-weight:900; }
@media (max-width:991px){ .case-track{ grid-auto-columns:calc(50% - 10px); } }
@media (max-width:575px){ .case-track{ grid-auto-columns:90%; } }

/* -------------------------------
   15) INDUSTRIES GRID — ZAGANEW  (#lg-sectors)
-------------------------------- */
#lg-sectors.zis{
  --zis-bg:#ffce05; 
  --zis-text:#2c2725; 
  --zis-muted:#4f4f4f; 
  --zis-title:#101114;
  --zis-badge-bg:#ffffff; 
  --zis-badge-text:#2c2725;
  --zis-card-bg:#13141b; 
  --zis-card-border:rgba(255,255,255,.10);
  --zis-shadow:0 10px 25px rgba(0,0,0,0.20); 
  --zis-shadow-hover:0 16px 36px rgba(0,0,0,0.28);
  --zis-radius:16px; 
  --zis-gap:16px;
  background:var(--zis-bg); color:var(--zis-text); padding:56px 0;
}
#lg-sectors .zis__container{ width:min(1200px,92%); margin-inline:auto; padding-inline: clamp(16px, 3.5vw, 28px); }
#lg-sectors .zis__header{ display:grid; grid-template-columns:1fr; gap:10px; align-items:end; }
#lg-sectors .zis__badge{ display:inline-block; font-weight:800; letter-spacing:.3px; padding:6px 12px; border-radius:999px; background:var(--zis-badge-bg); color:var(--zis-badge-text); font-size:28px; line-height:1; margin-bottom:8px; }
#lg-sectors .zis__title{ color:var(--zis-title); font-weight:800; font-size:clamp(26px,3vw,40px); line-height:1.2; margin:0 0 6px;  }
#lg-sectors .zis__lead{ color:var(--zis-muted); font-size:16px; line-height:1.7; margin:0; font-weight:500; color:#000;}
#lg-sectors .zis__grid{ display:grid; gap:var(--zis-gap); margin-top:26px; grid-template-columns:repeat(1,minmax(0,1fr)); }
@media (min-width:576px){ #lg-sectors .zis__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:992px){ #lg-sectors .zis__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
#lg-sectors .zis__card{
  height:100%; background:var(--zis-card-bg); border:1px solid var(--zis-card-border);
  border-radius:var(--zis-radius); padding:16px; box-shadow:var(--zis-shadow);
  transition:transform .18s, box-shadow .22s, border-color .22s, background .22s; display:flex; flex-direction:column; position:relative; isolation:isolate;
}
#lg-sectors .zis__card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(1200px 1200px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.06), transparent 40%); opacity:0; transition:opacity .25s;
}
#lg-sectors .zis__card:hover::after{ opacity:1; }
#lg-sectors .zis__card:hover{ transform:translateY(-3px); box-shadow:var(--zis-shadow-hover); border-color:rgba(255,255,255,.22); background:#181b25; }
#lg-sectors .zis__thumb{ margin:0; border-radius:12px; overflow:hidden; background:#0f1117; aspect-ratio:16/9; }
#lg-sectors .zis__thumb img{ width:100%; height:100%; display:block; object-fit:cover; transform:scale(1.01); transition:transform .35s; }
#lg-sectors .zis__card:hover .zis__thumb img{ transform:scale(1.05); }
#lg-sectors .zis__card-title{ font-size:18px; font-weight:800; color:#ffffff; margin:12px 2px 6px; }
#lg-sectors .zis__card-text{ font-size:15px; line-height:1.6; color:#b7bcc7; margin:0 2px 2px; }
/* optional glow tracking helper (add tiny JS from comment if needed) */
#lg-sectors .zis__card{ --mx:50%; --my:50%; }
#lg-sectors .zis__card:hover{ cursor:pointer; }

/* -------------------------------
   16) HIRE — ZAGANEW  (#lg-hire)
-------------------------------- */
#lg-hire.zth{
  --zth-bg:#ffffff; --zth-text:#2c2725; --zth-muted:#4f4f4f; --zth-title:#101114; --zth-accent:#edbf09;
  --zth-chip-bg:#ffffff; --zth-chip-border:rgba(0,0,0,0.10);
  --zth-shadow:0 10px 25px rgba(0,0,0,0.20); --zth-shadow-hover:0 18px 42px rgba(0,0,0,0.28);
  --zth-radius:14px;
  background:var(--zth-bg); color:var(--zth-text); position:relative; overflow:hidden; padding:56px 0;
}
#lg-hire .zth__container{ position:relative; z-index:1; padding-inline: clamp(16px, 3.5vw, 28px); }
#lg-hire .zth__badge{
  display:inline-block; font-weight:800; letter-spacing:.3px; padding:8px 16px; border-radius:999px; font-size:28px; line-height:1; margin:0 0 8px 0; color:#111;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)), url('https://zagatech.pro/assets/images/home/head_bg.webp'); background-size:cover; background-position:center; border:1px solid rgba(0,0,0,.06);
}
#lg-hire .zth__title{ color:var(--zth-title); font-weight:900; font-size:clamp(28px,3.2vw,42px); line-height:1.2; margin:0; }
#lg-hire .zth__copy{ margin-top:4px; }
#lg-hire .zth__text{ color:var(--zth-muted); font-size:16px; line-height:1.75; margin:0 0 10px 0; color:#000;}
#lg-hire .zth__features{ margin-top:10px; --bs-gutter-y:0; }
#lg-hire .zth__features > [class*="col-"]{ margin-bottom:0!important; }
#lg-hire .zth__chip{
  background:var(--zth-chip-bg); border:1px solid var(--zth-chip-border); border-radius:var(--zth-radius);
  padding:14px; margin-block:12px; box-shadow:var(--zth-shadow);
  transition:transform .16s, box-shadow .22s, border-color .22s, background .22s;
  position:relative; display:flex; align-items:center; gap:10px;
  --chip-hover-bg:rgba(255,205,5,.70); --chip-hover-border:rgba(237,191,9,.55); --chip-hover-text:var(--zth-title);
}
#lg-hire .zth__chip::before{
  content:"✓"; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  background:var(--zth-accent); color:#000; font-weight:900; font-size:14px; flex:0 0 22px;
}
#lg-hire .zth__chip span{ color:var(--zth-title); font-weight:800; font-size:15px; }
#lg-hire .zth__chip:hover{ transform:translateY(-2px); background:var(--chip-hover-bg); box-shadow:var(--zth-shadow-hover); border-color:var(--chip-hover-border); }
#lg-hire .zth__chip:hover span{ color:var(--chip-hover-text); }
#lg-hire .zth__media{ position:relative; }
#lg-hire .zth__image{ max-width:100%; height:auto; display:block; border-radius:12px; box-shadow:0 10px 20px rgba(0,0,0,0.15); animation:zthFloat 4.5s ease-in-out infinite; }
@keyframes zthFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@media (prefers-reduced-motion:reduce){ #lg-hire .zth__image{ animation:none!important; } }
@media (max-width:575px){
  #lg-hire .zth__badge{ font-size:14px; }
  #lg-hire .zth__title{ font-size:clamp(24px,6vw,28px); }
  #lg-hire .zth__text{ font-size:15px; }
  #lg-hire .zth__chip span{ font-size:14px; }
}

/* -------------------------------
   17) FAQ  (#lg-faq)
-------------------------------- */
#lg-faq{ background:#ffffff; padding:30px 0; }
.faq-wrap{ width:min(1000px,92%); margin-inline:auto; }
.faq-wrap h2{ font-size:clamp(24px,3vw,34px); font-weight:900; margin:0 0 10px; }
details{ border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:10px 12px; background:#fff; box-shadow:var(--soft); margin:10px 0; color:#000; }
summary{ cursor:pointer; font-weight:800; }
summary::-webkit-details-marker{ display:none; }

/* -------------------------------
   18) DOWNLOADS  (#lg-downloads)
-------------------------------- */
#lg-downloads{ background:#ffffff; padding:30px 0; }
.dl-wrap{ width:min(1100px,92%); margin-inline:auto; }
.downloads-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.dl-card{ border:1px solid rgba(0,0,0,.08); background:#fff; border-radius:12px; padding:14px; box-shadow:var(--soft); }
.dl-card h4{ margin:0 0 6px; font-size:16px; font-weight:900; }
.dl-card p{ margin:0 0 10px; color:#444; font-size:14px; color:#000; }
.dl-btn{ display:inline-block; font-weight:800; text-decoration:none; background:#111; color:#fff; padding:8px 10px; border-radius:8px; }
@media (max-width:991px){ .downloads-grid{ grid-template-columns:1fr; } }

/* -------------------------------
   19) CTA BAND  (#lg-cta)
-------------------------------- */
.lg-cta{ background:#0f1117; color:#fff; padding:28px 0; }
.lg-cta__wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lg-cta__title{ font-weight:900; font-size:clamp(26px,3vw,36px); margin:0 0 6px; }
.lg-btn{
  --h:50px; display:inline-flex; align-items:center; gap:10px; height:var(--h); padding:0 18px 0 12px; border-radius:calc(var(--h)/2);
  text-decoration:none; font-weight:800; letter-spacing:.02em; background:linear-gradient(180deg, #fff, #e9edf3); color:#0e0f14; box-shadow:0 10px 28px rgba(0,0,0,.28);
  transition:transform .25s, box-shadow .25s, background .25s;
}
.lg-btn:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 16px 40px rgba(0,0,0,.35), 0 0 15px rgba(0,209,178,.4); background:linear-gradient(180deg,#fff,#f5f7fa); }

/* -------------------------------
   20) Footer SEO blurb  (#lg-seo)
-------------------------------- */
.lg-seo{ background:#fff; padding:24px 0; color:#000;}

/* -------------------------------
   21) Shared container width
-------------------------------- */
.lg-wrap{ width:min(1200px,92%); margin-inline:auto; }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-48b4a84a *//* ===============================
   ZagaTech Technology Card Grid
   =============================== */

/* === Container Grid for Cards === */
.row.row_soltn_col {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0px; /* space between cards */
    margin-top: 40px;
}

/* === Columns: 4 per row on Desktop === */
.row.row_soltn_col > div {
    flex: 0 0 calc(25% - 20px);
    max-width: calc(25% - 20px);
    box-sizing: border-box;
}

/* === 2 per row on Tablets === */
@media (max-width: 991px) {
    .row.row_soltn_col > div {
        flex: 0 0 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

/* === 1 per row on Mobile === */
@media (max-width: 576px) {
    .row.row_soltn_col > div {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* === Card Styling === */
.card.card_black_glassy {
    background: rgba(255, 255, 255, 0.03);
    border: 8px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    overflow: hidden;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.card.card_black_glassy:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
    background: rgba(255, 255, 255, 0.05);
}

/* === Card Content === */
.card_black_glassy .card-body {
    padding: 20px;
    text-align: centr;
}

/* === Technology Section Headings === */
.tech_head_center {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
    text-transform: capitalize;
}

/* === Technology List Styling === */
.tech_ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.tech_ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    font-size: 15px;
    color: #ddd;
    font-weight: 400;
}

.tech_ul li::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ffce05;
    border-radius: 50%;
    left: 0;
    top: 6px;
    box-shadow: 0 0 6px rgba(255, 206, 5, 0.9);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5b875df2 */.ztx_whychoose {
  background-color: #fff;
  padding: 10px 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.ztx_why_dot {
  position: absolute;
  top: 40%;
  right: 55%;
  width: 70px;
  animation: float 6s ease-in-out infinite;
  z-index: 0;
}

.ztx_banner_title_xl {
  font-size: 5rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
  line-height: 1;
  margin-bottom: 1.2rem;
}

.ztx_banner_title_xl .ztx_highlight_yellow {
  background: linear-gradient(180deg, #ffce05 100%, transparent 50%);
  display: inline-block;
}

.ztx_title_blk_big {
  font-size: 3.1rem;
  font-weight: 400;
  color: #000000;
  margin-top: 1rem;
}

.ztx_paracontent {
  font-size: 1rem;
  color: #0c0d0e;
  font-weight: 500;
  line-height: 1.7;
  text-align: justify;
}

.ztx_hr_black_big {
  height: 4px;
  width: 80px;
  background: #000;
  border: none;
  margin: 1rem 0;
}

.ztx_img_sec {
  position: relative;
  z-index: 2;
  margin-bottom: 2rem;
}

.ztx_img_full {
  border-radius: 12px;
  max-width: 100%;
  position: relative;
}

.ztx_pos_1,
.ztx_pos_2 {
  position: absolute;
  z-index: 3;
}

.ztx_pos_1 {
  top: -20px;
  left: -40px;
}

.ztx_pos_2 {
  bottom: -20px;
  right: -30px;
}

.ztx_progress_sec {
  margin-top: 2rem;
}

.ztx_progress_head {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: #000;
}

.ztx_progress_div {
  height: 10px;
  background: #e0e0e0;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.ztx_progress_fill {
  height: 100%;
  background-color: #ffce05;
  border-radius: 20px;
  transition: width 0.5s ease-in-out;
}

.ztx_progress_text {
  font-weight: 700;
  color: #000;
  font-size: 1rem;
  display: inline-block;
  margin-left: 8px;
}

.ztx_btn_group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.1rem;
}

.btn-home {
  background-color: #000;
  color: #fff;
  padding: 0.5rem 1.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 80px;
  transition: 0.3s ease-in-out;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.2rem;
}

.btn-home:hover {
  background-color: #ffce05;
  color: #000;
  border-radius: 80px;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 992px) {
  .ztx_banner_title_xl {
    text-align: center;
    font-size: 2.4rem;
  }
  .ztx_img_sec {
    text-align: center;
  }
  .ztx_btn_group {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .ztx_banner_title_xl {
    font-size: 2rem;
  }
  .ztx_title_blk_big {
    font-size: 1.1rem;
    text-align: center;
  }
  .ztx_paracontent {
    font-size: 0.95rem;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1a610abb *//* =========================
   Hire Developers (scoped)
   ========================= */
#zt-hire {
  --zth-bg: radial-gradient(1200px 500px at 10% -10%, rgba(237,191,9,0.12), transparent 40%),
            radial-gradient(1200px 600px at 110% 110%, rgba(255,255,255,0.06), transparent 45%),
            transparent;
  --zth-text: #e9ecf1;
  --zth-muted: #b7bcc7;
  --zth-title: #ffffff;
  --zth-accent: #edbf09;
  --zth-chip-bg: #141722;
  --zth-chip-border: rgba(255,255,255,0.10);
  --zth-chip-hover: #181c2a;
  --zth-shadow: 0 10px 25px rgba(0,0,0,0.20);
  --zth-shadow-hover: 0 18px 42px rgba(0,0,0,0.28);
  --zth-radius: 14px;

  background: var(--zth-bg);
  color: var(--zth-text);
  position: relative;
  overflow: hidden;
}

/* Optional light variant: <section class="zth light"> */
#zt-hire.light {
  --zth-text: #2c2725;
  --zth-muted: #4f4f4f;
  --zth-title: #101114;
  --zth-chip-bg: #ffffff;
  --zth-chip-border: rgba(0,0,0,0.10);
  --zth-chip-hover: #f6f7fa;
}

#zt-hire .zth__container { position: relative; z-index: 1; }

/* Headings & body copy */
#zt-hire .zth__badge{
  display:inline-block;
  font-weight:800;
  letter-spacing:.3px;
  padding:8px 16px;
  border-radius:999px;
  font-size:36px;
  line-height:1;
  margin:0 0 8px 0;
  color:#00; /* readable over image */

  /* Image + overlay */
  background:
    linear-gradient(rgba(0,0,0,.0), rgba(0,0,0,.0)),
    url('https://zagatech.pro/assets/images/home/head_bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Optional subtle border for contrast on light backgrounds */
  border: 1px solid rgba(255,255,255,.15);
}

/* Optional: gentle background pan (premium feel) */
@media (prefers-reduced-motion: no-preference){
  #zt-hire .zth__badge{
    background-size: 120% auto, cover; /* animate only the gradient layer size */
    animation: zthBadgePan 12s ease-in-out infinite alternate;
  }
  @keyframes zthBadgePan{
    0%   { background-position: center, center; }
    100% { background-position: 80% center, center; }
  }
}


#zt-hire .zth__title{
  color: var(--zth-title);
  font-weight: 900;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.2;
  margin: 0;
}

#zt-hire .zth__copy { margin-top: 4px; }
#zt-hire .zth__text{
  color: var(--zth-muted);
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 10px 0;
  color: #000;
}

/* Feature chips wrapper */
#zt-hire .zth__features {
  margin-top: 10px;
  /* optional: ignore Bootstrap's row gaps so spacing is chip-controlled */
  --bs-gutter-y: 0;
}

/* optional: neutralize mb-3 on col wrappers */
#zt-hire .zth__features > [class*="col-"] {
  margin-bottom: 0 !important;
}

/* Chip base + vertical spacing */
#zt-hire .zth__chip{
  background: var(--zth-chip-bg);
  border: 1px solid var(--zth-chip-border);
  border-radius: var(--zth-radius);
  padding: 14px 14px;
  margin-block: 8px;              /* ← space above & below each chip */
  box-shadow: var(--zth-shadow);
  transition: transform .16s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;

  /* hover color tokens */
  --chip-hover-bg: rgba(255,205,5,.70);
  --chip-hover-border: rgba(237,191,9,.55);
  --chip-hover-text: var(--zth-title);
}

/* a touch more space on desktops */
@media (min-width: 992px){
  #zt-hire .zth__chip{ margin-block: 12px; }
}

/* Leading check icon */
#zt-hire .zth__chip::before{
  content: "✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--zth-accent);
  color: #000;
  font-weight: 900;
  font-size: 14px;
  flex: 0 0 22px;
}

#zt-hire .zth__chip span{
  color: var(--zth-title);
  font-weight: 800;
  font-size: 15px;
}

/* Single hover rule (deduped) */
#zt-hire .zth__chip:hover{
  transform: translateY(-2px);
  background: var(--chip-hover-bg);
  box-shadow: var(--zth-shadow-hover);
  border-color: var(--chip-hover-border);
}
#zt-hire .zth__chip:hover span{ color: var(--chip-hover-text); }




/* Media (image) */
@keyframes zthFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
#zt-hire .zth__media { position: relative; }
#zt-hire .zth__image{
  max-width: 100%; height: auto; display:block;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  animation: zthFloat 4.5s ease-in-out infinite;
}

/* Responsive refinements */
@media (max-width: 575px){
  #zt-hire .zth__badge{ font-size: 14px; }
  #zt-hire .zth__title{ font-size: clamp(24px, 6vw, 28px); }
  #zt-hire .zth__text{ font-size: 15px; }
  #zt-hire .zth__chip span{ font-size: 14px; }
}/* End custom CSS */
/* Start custom CSS *//* ---- Fix hero image being cut (Elementor/theme wrappers) ---- */

/* your section must never clip */
.hero-section { 
  overflow: visible !important; 
  border-radius: 0 !important; 
  /* make sure no fixed height */
  height: auto !important; 
  min-height: 0 !important;
}

/* common Elementor containers that cause clipping */
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap,
.elementor-widget-container {
  overflow: visible !important;
  border-radius: 0 !important;
}

/* sometimes the theme page/content wraps also clip */
.entry-content,
.site-main,
.content-area {
  overflow: visible !important;
}

/* ensure the image itself never crops */
.hero-img {
  display: block;
  width: 100%;
  max-width: none;             /* let it render full height */
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;  /* stop top/bottom cropping */
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* give the image column room */
.hero-row { 
  grid-template-columns: 1fr 1fr;  /* equal columns */
  align-items: start;              /* avoid vertical centering squeeze */
}

/* make sure the img wrapper itself doesn't clip */
.hero-img-wrap { 
  overflow: visible !important; 
}/* End custom CSS */