.elementor-662 .elementor-element.elementor-element-ab41b38{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-662 .elementor-element.elementor-element-a2c1d3b{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-3ea1cf9 *//* =========================================================
WATER NOZZLE SALES PAGE — REFINED VERSION
========================================================= */

.nz-sales-page,
.nz-sales-page *{
  box-sizing:border-box;
}

.nz-sales-page{
  --nz-black:#111111;
  --nz-dark:#111216;

  --nz-yellow:#ffc400;
  --nz-yellow-dark:#dda800;

  --nz-text:#242424;
  --nz-muted:#696969;

  --nz-soft:#f7f7f5;
  --nz-line:#e7e7e3;

  width:100%;
  margin:0;
  padding:0;

  overflow:hidden;

  background:#fff;
  color:var(--nz-text);

  font-family:'Poppins',Arial,sans-serif;
}

.nz-sales-page img{
  max-width:100%;
}

.nz-container{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
}


/* =========================================================
MAIN BUTTON
========================================================= */

.nz-main-btn{
  min-height:52px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  padding:0 28px;

  background:var(--nz-yellow);
  color:#111;

  text-decoration:none;

  border:0;
  border-radius:5px;

  font-size:14px;
  font-weight:800;
  line-height:1;

  box-shadow:
    0 8px 24px
    rgba(221,168,0,.16);

  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.nz-main-btn:hover{
  background:var(--nz-yellow-dark);
  color:#111;

  transform:translateY(-2px);

  box-shadow:
    0 12px 30px
    rgba(221,168,0,.22);
}


/* =========================================================
01 — HERO
========================================================= */

.nz-hero{
  position:relative;
  width:100%;

  background:
    linear-gradient(
      90deg,
      #fff 0%,
      #fff 44%,
      #faf9f4 100%
    );
}

.nz-hero__grid{
  min-height:570px;

  display:grid;
  grid-template-columns:.87fr 1.13fr;

  align-items:stretch;

  gap:38px;
}

.nz-hero__content{
  position:relative;
  z-index:2;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;

  padding:72px 0;
}

.nz-hero__eyebrow{
  display:inline-flex;
  align-items:center;

  margin-bottom:18px;

  padding:7px 11px;

  background:var(--nz-yellow);
  color:#111;

  border-radius:4px;

  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
}

.nz-hero h1{
  margin:0 0 19px;

  color:#111;

  font-size:
    clamp(
      42px,
      4.3vw,
      63px
    );

  font-weight:800;
  line-height:1;
  letter-spacing:-.045em;
}

.nz-hero h1 span{
  color:#dda700;
}

.nz-hero__desc{
  max-width:475px;

  margin:0 0 28px;

  color:var(--nz-muted);

  font-size:15px;
  line-height:1.65;
}


/* HERO FEATURES */

.nz-hero__features{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:24px;

  margin-bottom:29px;
}

.nz-feature{
  display:flex;
  align-items:center;

  gap:10px;

  min-width:120px;
}

.nz-feature__icon{
  width:40px;
  height:40px;

  flex:0 0 40px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid #d6a700;
  border-radius:50%;

  background:#fff9df;

  color:#bf9000;

  font-size:15px;
  font-weight:700;

  line-height:1;
}

.nz-feature strong{
  display:block;

  color:#151515;

  font-size:12px;
  font-weight:700;

  line-height:1.3;
}

.nz-feature span{
  display:block;

  margin-top:2px;

  color:#757575;

  font-size:10px;
  line-height:1.3;
}


/* HERO NOTE */

.nz-hero__note{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  margin-top:13px;

  color:#747474;

  font-size:11px;
}

.nz-hero__note i{
  width:4px;
  height:4px;

  display:block;

  background:var(--nz-yellow);

  border-radius:50%;
}


/* HERO IMAGE */

.nz-hero__visual{
  position:relative;

  min-height:570px;

  overflow:hidden;

  background:#f5f2e9;
}

.nz-hero__visual img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
  object-position:center;

  transition:transform .6s ease;
}

.nz-hero__visual:hover img{
  transform:scale(1.015);
}


/* =========================================================
SECTION HEAD
========================================================= */

.nz-section-head{
  max-width:760px;

  margin:0 auto 36px;

  text-align:center;
}

.nz-section-head h2{
  margin:0 0 8px;

  color:#111;

  font-size:
    clamp(
      27px,
      2.5vw,
      37px
    );

  font-weight:800;
  line-height:1.12;

  letter-spacing:-.035em;
}

.nz-section-head p{
  max-width:590px;

  margin:0 auto;

  color:#747474;

  font-size:13px;
  line-height:1.65;
}


/* =========================================================
02 — USE CASES
========================================================= */

.nz-use{
  padding:64px 0 68px;

  background:#fff;
}

.nz-use__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:17px;
}

.nz-use-card{
  position:relative;

  min-width:0;

  overflow:hidden;

  background:#fff;

  border:1px solid var(--nz-line);
  border-radius:10px;

  box-shadow:
    0 8px 28px
    rgba(0,0,0,.035);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.nz-use-card:hover{
  transform:translateY(-5px);

  border-color:#ddd6bd;

  box-shadow:
    0 15px 35px
    rgba(0,0,0,.07);
}


/* IMAGE */

.nz-use-card__image{
  position:relative;

  height:195px;

  overflow:hidden;

  background:#eee;
}

.nz-use-card__image img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:transform .45s ease;
}

.nz-use-card:hover
.nz-use-card__image img{
  transform:scale(1.04);
}


/*
IMPORTANT:
Icon kekal DALAM gambar.
Tak overlap border.
Tak kena clip.
*/

.nz-use-card__image span{
  position:absolute;

  left:16px;
  bottom:14px;

  z-index:3;

  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:2px solid rgba(255,255,255,.95);
  border-radius:50%;

  background:var(--nz-yellow);
  color:#111;

  font-size:15px;
  line-height:1;

  box-shadow:
    0 5px 15px
    rgba(0,0,0,.13);
}


/* BODY */

.nz-use-card__body{
  min-height:125px;

  padding:
    20px
    19px
    22px;
}

.nz-use-card__body h3{
  margin:0 0 7px;

  color:#111;

  font-size:14px;
  font-weight:800;
  line-height:1.3;
}

.nz-use-card__body p{
  margin:0;

  color:#707070;

  font-size:12px;
  line-height:1.6;
}


/* =========================================================
03 — SPRAY
========================================================= */

.nz-spray{
  padding:
    20px
    0
    48px;

  background:#fff;
}

.nz-section-head--spray{
  margin-bottom:29px;
}

.nz-spray__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:15px;
}

.nz-spray-card{
  position:relative;

  height:215px;

  overflow:hidden;

  background:#0d0d0f;

  border-radius:7px;
}

.nz-spray-card img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
  object-position:center;
}

.nz-spray-card::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.82) 0%,
      rgba(0,0,0,.52) 36%,
      rgba(0,0,0,.10) 72%,
      transparent 100%
    );
}

.nz-spray-card__content{
  position:absolute;

  top:17px;
  left:17px;

  z-index:3;

  width:43%;
  min-width:130px;

  color:#fff;
}

.nz-spray-card__content > span{
  width:31px;
  height:31px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:17px;

  background:var(--nz-yellow);
  color:#111;

  font-size:11px;
  font-weight:800;
}

.nz-spray-card h3{
  margin:0 0 7px;

  color:#fff;

  font-size:17px;
  font-weight:800;
  line-height:1.2;
}

.nz-spray-card p{
  margin:0;

  color:rgba(255,255,255,.83);

  font-size:11px;
  line-height:1.5;
}


/* =========================================================
04 — QUALITY / FLOW
========================================================= */

.nz-quality{
  width:100%;
}

.nz-quality__grid{
  display:grid;
  grid-template-columns:1fr 1fr;

  align-items:stretch;
}


/* LEFT */

.nz-quality__left{
  min-height:420px;

  display:grid;
  grid-template-columns:30% 70%;

  align-items:center;

  gap:18px;

  padding:
    42px
    5.5%;

  background:#f6f6f4;
}

.nz-quality__product{
  height:320px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.nz-quality__product img{
  width:100%;
  height:100%;

  display:block;

  object-fit:contain;
  object-position:center;
}

.nz-quality__content{
  min-width:0;
}

.nz-quality__content > span{
  display:block;

  margin-bottom:10px;

  color:#bf9200;

  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
}

.nz-quality__content h2{
  margin:0 0 15px;

  color:#111;

  font-size:
    clamp(
      25px,
      2.2vw,
      34px
    );

  line-height:1.08;

  font-weight:800;
  letter-spacing:-.03em;
}

.nz-quality__content > p{
  max-width:390px;

  margin:
    0
    0
    17px;

  color:#686868;

  font-size:12px;
  line-height:1.6;
}

.nz-quality__content ul{
  padding:0;
  margin:0;

  list-style:none;
}

.nz-quality__content li{
  display:flex;
  align-items:flex-start;

  gap:7px;

  margin-bottom:7px;

  color:#383838;

  font-size:12px;
  line-height:1.45;
}

.nz-quality__content li::before{
  content:"✓";

  flex:0 0 auto;

  width:16px;
  height:16px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-top:1px;

  border:1px solid #dba500;
  border-radius:50%;

  color:#dba500;

  font-size:9px;
  font-weight:800;
}


/* RIGHT */

.nz-quality__right{
  min-height:420px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  padding:
    40px
    6%;

  background:#111216;

  color:#fff;
}

.nz-quality__right-head{
  position:relative;
  z-index:2;

  max-width:500px;
}

.nz-quality__right-head h2{
  margin:0 0 9px;

  color:#fff;

  font-size:
    clamp(
      23px,
      2vw,
      31px
    );

  font-weight:800;
  line-height:1.15;
}

.nz-quality__right-head p{
  max-width:460px;

  margin:0;

  color:rgba(255,255,255,.7);

  font-size:12px;
  line-height:1.6;
}

.nz-quality__flow-image{
  width:78%;
  height:190px;

  display:block;

  margin:
    2px
    0
    3px
    auto;

  object-fit:contain;
  object-position:center;
}

.nz-quality__points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:18px;
}

.nz-quality__points > div{
  min-width:0;
}

.nz-quality__points b{
  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:8px;

  border:1px solid #c99a00;
  border-radius:50%;

  color:#e0ab00;

  font-size:12px;
  line-height:1;
}

.nz-quality__points strong{
  display:block;

  margin-bottom:3px;

  color:#fff;

  font-size:12px;
  font-weight:700;

  line-height:1.35;
}

.nz-quality__points span{
  display:block;

  max-width:130px;

  color:rgba(255,255,255,.62);

  font-size:10px;
  line-height:1.45;
}


/* =========================================================
05 — PACKAGE CONTENT
========================================================= */

.nz-package{
  padding:
    40px
    0;

  background:#fff;
}

.nz-package__grid{
  display:grid;
  grid-template-columns:.65fr 1.35fr;

  align-items:center;

  gap:45px;
}

.nz-package__content h2{
  margin:0 0 16px;

  color:#111;

  font-size:
    clamp(
      24px,
      2.1vw,
      32px
    );

  font-weight:800;
  line-height:1.08;
}

.nz-package__content ul{
  padding:0;
  margin:0 0 15px;

  list-style:none;
}

.nz-package__content li{
  position:relative;

  padding-left:18px;

  margin-bottom:8px;

  color:#373737;

  font-size:12px;
  line-height:1.5;
}

.nz-package__content li::before{
  content:"";

  position:absolute;

  left:0;
  top:7px;

  width:6px;
  height:6px;

  background:#dda700;

  border-radius:50%;
}

.nz-package__content > p{
  display:inline-block;

  max-width:280px;

  margin:0;

  padding:
    9px
    11px;

  background:#f5f5f2;
  color:#737373;

  border-radius:5px;

  font-size:10px;
  line-height:1.5;
}


/* PRODUCTS */

.nz-package__visual{
  display:grid;
  grid-template-columns:1.2fr .9fr .9fr 1fr;

  align-items:center;

  gap:15px;
}

.nz-package__visual > div{
  min-width:0;

  height:175px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:10px;

  background:#fafafa;

  border:1px solid #efefec;
  border-radius:8px;
}

.nz-package__visual img{
  width:100%;
  height:100%;

  display:block;

  object-fit:contain;
  object-position:center;
}


/* =========================================================
06 — ORDER
========================================================= */

.nz-order{
  padding:
    24px
    0
    18px;

  background:#f6f6f4;
}

.nz-order .nozzleco{
  width:100%;

  margin:
    20px
    auto
    30px;
}


/* =========================================================
07 — FAQ
========================================================= */

.nz-faq{
  padding:
    30px
    0
    32px;

  background:#fff;

  border-top:1px solid var(--nz-line);
}

.nz-faq > .nz-container > h2{
  margin:
    0
    0
    22px;

  color:#111;

  text-align:center;

  font-size:19px;
  font-weight:800;
}

.nz-faq__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:26px;
}

.nz-faq article{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);

  align-items:flex-start;

  gap:10px;
}

.nz-faq article > span{
  width:26px;
  height:26px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid #cca000;
  border-radius:50%;

  color:#b98d00;

  font-size:11px;
  font-weight:800;
}

.nz-faq h3{
  margin:0 0 5px;

  color:#111;

  font-size:11px;
  font-weight:800;
  line-height:1.4;
}

.nz-faq p{
  margin:0;

  color:#727272;

  font-size:10px;
  line-height:1.55;
}


/* =========================================================
BOTTOM CTA
========================================================= */

.nz-bottom{
  padding:
    14px
    0;

  background:#111;
}

.nz-bottom__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:30px;
}

.nz-bottom h2{
  margin:0;

  color:#fff;

  font-size:
    clamp(
      20px,
      2vw,
      27px
    );

  font-weight:800;
}

.nz-bottom h2 span{
  color:var(--nz-yellow);
}

.nz-main-btn--small{
  min-height:42px;

  padding:
    0
    24px;

  font-size:12px;
}


/* =========================================================
TABLET
========================================================= */

@media(max-width:980px){

  .nz-hero__grid{
    grid-template-columns:1fr;

    gap:0;
  }

  .nz-hero__content{
    max-width:700px;

    padding:
      60px
      0
      42px;
  }

  .nz-hero__visual{
    width:100%;
    min-height:auto;
    height:470px;

    border-radius:8px;
  }


  .nz-use__grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .nz-quality__grid{
    grid-template-columns:1fr;
  }

  .nz-quality__left,
  .nz-quality__right{
    min-height:auto;
  }


  .nz-package__grid{
    grid-template-columns:1fr;

    gap:28px;
  }


  .nz-faq__grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* =========================================================
MOBILE
========================================================= */

@media(max-width:650px){

  .nz-container{
    width:min(
      100% - 28px,
      1180px
    );
  }


  /* HERO */

  .nz-hero__content{
    padding:
      45px
      0
      32px;
  }

  .nz-hero h1{
    font-size:
      clamp(
        37px,
        12vw,
        50px
      );
  }

  .nz-hero__desc{
    font-size:14px;
  }

  .nz-hero__features{
    display:grid;
    grid-template-columns:
      1fr
      1fr;

    width:100%;

    gap:
      16px
      12px;
  }

  .nz-feature{
    min-width:0;
  }

  .nz-feature:last-child{
    grid-column:
      1
      /
      -1;

    max-width:180px;
  }

  .nz-main-btn{
    width:100%;
  }

  .nz-hero__note{
    width:100%;

    justify-content:center;

    text-align:center;
  }

  .nz-hero__visual{
    width:calc(100% + 28px);

    height:330px;

    margin-left:-14px;

    border-radius:0;
  }


  /* HEAD */

  .nz-section-head{
    margin-bottom:27px;
  }

  .nz-section-head h2{
    font-size:25px;
  }

  .nz-section-head p{
    font-size:12px;
  }


  /* USE */

  .nz-use{
    padding:
      45px
      0;
  }

  .nz-use__grid{
    grid-template-columns:
      1fr
      1fr;

    gap:10px;
  }

  .nz-use-card{
    border-radius:8px;
  }

  .nz-use-card__image{
    height:130px;
  }

  .nz-use-card__image span{
    left:10px;
    bottom:10px;

    width:32px;
    height:32px;

    border-width:2px;

    font-size:12px;
  }

  .nz-use-card__body{
    min-height:118px;

    padding:
      14px
      12px
      15px;
  }

  .nz-use-card__body h3{
    font-size:11px;
  }

  .nz-use-card__body p{
    font-size:10px;
  }


  /* SPRAY */

  .nz-spray{
    padding-bottom:34px;
  }

  .nz-spray__grid{
    grid-template-columns:1fr;

    gap:10px;
  }

  .nz-spray-card{
    height:185px;
  }

  .nz-spray-card__content{
    width:45%;
    max-width:150px;
  }


  /* QUALITY */

  .nz-quality__left{
    grid-template-columns:
      30%
      70%;

    gap:10px;

    padding:
      32px
      18px;
  }

  .nz-quality__product{
    height:250px;
  }

  .nz-quality__content h2{
    font-size:22px;
  }

  .nz-quality__content > p{
    font-size:11px;
  }

  .nz-quality__content li{
    gap:5px;

    font-size:10px;
  }


  .nz-quality__right{
    padding:
      32px
      18px;
  }

  .nz-quality__right-head h2{
    font-size:23px;
  }

  .nz-quality__flow-image{
    width:100%;
    height:170px;

    margin:
      5px
      auto;
  }

  .nz-quality__points{
    gap:8px;
  }

  .nz-quality__points b{
    width:30px;
    height:30px;
  }

  .nz-quality__points strong{
    font-size:10px;
  }

  .nz-quality__points span{
    font-size:9px;
  }


  /* PACKAGE */

  .nz-package{
    padding:
      30px
      0;
  }

  .nz-package__content h2{
    font-size:25px;
  }

  .nz-package__visual{
    grid-template-columns:
      repeat(2,1fr);

    gap:8px;
  }

  .nz-package__visual > div{
    height:120px;

    padding:8px;
  }


  /* ORDER */

  .nz-order{
    padding-top:6px;
  }

  .nz-order .nozzleco{
    width:100%;

    margin:
      14px
      auto
      24px;
  }


  /* FAQ */

  .nz-faq{
    padding:
      28px
      0;
  }

  .nz-faq__grid{
    grid-template-columns:1fr;

    gap:18px;
  }

  .nz-faq h3{
    font-size:12px;
  }

  .nz-faq p{
    font-size:11px;
  }


  /* BOTTOM */

  .nz-bottom__inner{
    flex-direction:column;

    gap:11px;

    text-align:center;
  }

  .nz-bottom h2{
    font-size:20px;
  }

}/* End custom CSS */