/* //////////////////////////
Copyright 2024 Vacman ///////
All Rights Reserved /////////
/////////////////////////////
This file is not for sharing
////////////////////////// */

/* Universal */
@font-face {font-family:raleway; src:url('../css/raleway.woff'); font-display:swap;}
* {margin:0; padding:0; border:0; outline:0; box-shadow:none; box-sizing:border-box; font-family:raleway; -webkit-touch-callout:none; user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0) !important; -webkit-tap-highlight-color:transparent;}
body {width:100%; height:100%; background:#fff;}
#dark {position:fixed; width:100%; height:100%; background:#000; opacity:0.6; z-index:20; display:none; transition:0.5s;}
.blur {position:absolute; filter:blur(20px); max-height:100%; max-width:100%; overflow:hidden;}
#popup-info,#popup-form,#form-part-02,#form-part-03,#form-end,#warning {display:none;}
.warning {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:20px; background:#cb005f; color:#fff; border-radius:8px; border:2px solid #fff; box-shadow:0px 0px 13px 0px rgba(0,0,0,0.5); transition:0.5s; z-index:50;}
a.link-tel:link {text-decoration:none; color:#252550; transition:0.5s;}
a.link-tel:visited {text-decoration:none; color:#252550;}
a.link-tel:hover {text-decoration:none; color:#d50064;}
a.link-tel:active {text-decoration:none; color:#d50064;}
#foot-b1 {width:181px; background:url(../img/brand-henry.webp);}
#foot-b2 {width:231px; background:url(../img/brand-numatic.webp);}
#foot-b3 {width:174px; background:url(../img/brand-dyson.webp);}
#foot-b4 {width:219px; background:url(../img/brand-hoover.webp);}
#foot-b5 {width:160px; background:url(../img/brand-shark.webp);}
#foot-b6 {width:141px; background:url(../img/brand-sebo.webp);}
#foot-b7 {width:200px; background:url(../img/brand-miele.webp);}
#foot-b8 {width:226px; background:url(../img/brand-bissell.webp);}
#foot-b9 {width:248px; background:url(../img/brand-samsung.webp);}
.icon {position:relative; float:left; width:43px; height:43px; transition:0.5s; cursor:pointer;}
#btn:hover {background:linear-gradient(90deg, #15a7e4 50%, #fff 100%, #15a7e4 60%); background-size: 200% 200%; transition:0.5s; animation: shine .5s ease-in-out;}
#btn:active {background:linear-gradient(90deg, #15a7e4 50%, #fff 100%, #15a7e4 60%); background-size: 200% 200%; transition:0.5s; animation: shine 1s ease-in-out;}
#btn:focus {background:linear-gradient(90deg, #15a7e4 50%, #fff 100%, #15a7e4 60%); background-size: 200% 200%; transition:0.5s; animation: shine 1s ease-in-out;}
h1.typed-hero {display:none;}
.tab-class:hover {transform:scale(1.1);} .tab-class:active {transform:scale(1.1);} .tab-class:focus {transform:scale(1.1);}
#tab-1-txt {left:6px;}
#tab-2-txt {left:8px;}
#tab-3-txt {left:7px;}
#scroller {position:relative; float:left; width:100%; height:66px;}
#scroller li {list-style-type:none; position:absolute;}
p.foot {font-size:14px; display:inline-block; padding-right:20px;}
span.foot-dark {color:#333;}
span.foot-lite {color:#fff;}
@keyframes shine {0%{background-position:100% 100%;} 100%{background-position:0% 0%;}}
.popup {position:fixed; width:90%; height:90%; top:5%; left:5%; background:#fff; overflow-y:auto; scrollbar-width:none; z-index:30;}

/* Large Screens Start */
@media (min-width:1200px) {
html, body {min-width:1200px;}
html {overflow-y:scroll; overflow-x:hidden; scrollbar-color:#cccccc transparent; scrollbar-width:thin;}

/* Head */
#head {position:relative; float:left; width:100%; height:180px; background:#fff; box-shadow:1px 26px 34px -14px rgba(0,0,0,0.1); z-index:10; color:#252550; text-align:right;}
#logo {position:absolute; width:112px; height:88px; top:52px; left:30px; background:url('../img/logo.webp');}
#head-txt {position:absolute; top:62px; left:230px;}
p.head-tel {font-size:45px;}
p.head-des {font-size:16px;}
#icon-wrap {position:absolute; width:106px; height:43px; top:30px; right:30px;}
.icon:hover {transform:scale(1.2);} .icon:active {transform:scale(1.2);} .icon:focus {transform:scale(1.2);}
#icon-social {background:url('../img/social.webp');}
#icon-info {margin-left:20px; background:url('../img/info.webp');}
@keyframes shine {0%{background-position:100% 100%;} 100%{background-position:0% 0%;}}

/* Content */
#content {position:relative; float:left; width:100%; height:627px;}
#btn-arr-wrap {position:absolute; width:457px; height:120px; top:250px; left:174px; z-index:12;}
#btn {position:relative; float:left; width:300px; height:120px; border-radius:14px; border:5px solid #fff; 
background:#15a7e4; text-align:center; line-height:110px; margin-right:30px; transition:1.5s; cursor:pointer;}
#arr {position:relative; float:left; width:127px; height:84px; background:url('../img/arrow.webp'); margin-top:3px;}
p.btn-txt {font-size:24px; color:#fff; display:inline-block;}
#hero_bg {position:relative; float:left; width:100%; height:350px; clip-path:polygon(100% 0%, 0% 0%, 0% 350px, 100% 150px); background-color: #cb005f; z-index:9;}
#hero-txt-con {position:absolute; top:96px; left:68px;}
#typed,h1.typed-hero {font-size:2.2rem; color:#fff; font-weight:normal;}
#hero {position:absolute; width:676px; height:640px; top:0; right:5%; background:url('../img/hero.webp'); z-index:10; scale:90%;}
#tab {position:absolute; width:403px; height:124px; bottom:73px; left:0; background:url('../img/tab-bg.webp');}
.tab-class {position:absolute; width:58px; height:58px; bottom:44px; background:url('../img/tab-img.webp'); transition:0.5s; cursor:pointer;}
#tab-1-img {background-position:0; left:90px;}
#tab-2-img {background-position:-58px; left:199px;}
#tab-3-img {background-position:-116px; left:306px;}
.tab-txt {position:absolute; color:#fff; font-size:14px; top:67px;}

/* Foot */
#foot-1 {position:relative; float:left; width:100%; height:120px; background:#d3d3d3;}
#scroller .innerScrollArea {width:100%; height:66px; overflow:hidden; margin-top:35px;}
#scroller ul {position:relative;}
.foot-bc {position:relative; float:left; height:66px; margin-right:55px;}
#foot-2 {position:relative; float:left; width:100%; height:50px; background:#aeaeae; text-align:right; line-height:50px;}

/* Popups */
.close {position:fixed; width:50px; height:50px; top:5%; right:5%; background:#fff; border-bottom-left-radius:10px; text-align:center; font-size:1.2em; color:#cb005f; cursor:pointer; transition:0.5s; line-height:44px; z-index:35;}
.close:hover {background:#ff53a3; color:#fff;} .close:active {background:#ff53a3; color:#fff;} .close:focus {background:#ff53a3; color:#fff;}
.popup-top {position:fixed; width:90%; height:200px; clip-path:polygon(100% 0%, 0% 0%, 0% 200px, 100% 100px); background-color:#cb005f; z-index:33;}
.popup-top-blank {position:fixed; width:90%; height:200px; top:55px; clip-path:polygon(100% 0%, 0% 0%, 0% 200px, 100% 100px); background-color: #fff; filter:blur(25px); z-index:32;}
.popup-title-mobile {display:hidden;}
.popup-title-desktop {position:fixed; padding:75px 0 0 60px; z-index:34;}
.popup-content {position:relative; float:left; margin-top:139px; padding:50px; color:#252550; z-index:31;}
#John {position:relative; float:right; width:454px; height:304px; margin-left:30px; background:url('../img/John.webp');}
#popup-bar-wrap {position:relative; float:left; width:100%; height:20px; background:#fff; margin:50px 0 50px 0;}
#popup-bar {position:relative; float:left; width:90%; height:2px; margin-left:5%; background:#cb005f; clear:both;}
h1.popup-title {font-weight:normal; color:#fff; font-size:2.2rem;}
p.popup-par-top {font-size:18px;}
p.popup-par-btm {font-size:18px; display:inline-block;}
span.light-blue {color:#15a7e4;}
span.dark-pink {color:#cb005f;}
h2.popup-sub {font-size:1.5rem; clear:both;}
.popup-form-label {position:relative; float:left; width:100%; margin-top:20px;}
.input-text-standard {position:relative; float:left; width:50%; height:60px; padding:18px; color:#252550; font-size:1em;  margin:20px 0 20px 0; background:#fff; border:2px solid #cb005f; border-radius:10px; transition:0.5s; user-select:text;}
.input-text-standard:hover {box-shadow:0px 0px 22px -2px rgba(255,179,215,1);}
.input-text-standard:active {box-shadow:0px 0px 22px -2px rgba(255,179,215,1);}
.input-text-standard:focus {box-shadow:0px 0px 22px -2px rgba(255,179,215,1);}
.input-textbox-standard {position:relative; float:left; width:50%; height:150px; padding:18px; color:#252550; font-size:1em;  margin:20px 0 20px 0; padding:10px; background:#fff; border:2px solid #cb005f; border-radius:10px; transition:0.5s; user-select:text; resize:none;}
.submit {position:fixed; padding:20px 35px; right:5%; bottom:5%; color:#fff; font-size:1.5em; background:#cb005f; border-top-left-radius:10px; transition:0.5s; cursor:pointer;}
.submit:hover {background:#ff3894;} .submit:active {background:#ff3894;} .submit:focus {background:#ff3894;}

/* Large Screens End */
}

/* Small Screens Start */
@media (min-width:300px) and (max-width:1199px) {
html, body {min-width:300px;}
html {overflow-y:scroll; overflow-x:hidden; scrollbar-color:#cccccc transparent; scrollbar-width:none;}

#head {position:relative; float:left; width:100%; height:100px; background:#fff; box-shadow:1px 26px 34px -14px rgba(0,0,0,0.1); z-index:10; color:#252550; text-align:right;}
#logo {position:absolute; width:112px; height:88px; top:13px; left:5px; background:url('../img/logo.webp'); transform:scale(.7);}
.hider {width:0; height:0; display:none;}
#head-txt {position:absolute; top:59px; right:10px;}
p.head-tel {font-size:22px;}
p.head-des {font-size:14px;}
#icon-wrap {position:absolute; width:106px; height:43px; top:11px; right:-20px;}
#icon-social {background:url('../img/social.webp'); transform:scale(.7);}
#icon-info {margin-left:-5px; background:url('../img/info.webp'); transform:scale(.7);}

/* Content */
#content {position:relative; float:left; width:100%; height:502px;}
#btn-arr-wrap {position:absolute; top:119px; left:8px; z-index:12;}
#btn {position:relative; float:left; border-radius:14px; border:5px solid #fff; 
background:#15a7e4; text-align:center; line-height:42px; margin-right:30px; padding:20px; transition:1.5s; cursor:pointer;}
#arr {position:relative; float:left; width:127px; height:84px; background:url('../img/arrow.webp'); margin:-12px 0 0 -20px;}
p.btn-txt {font-size:20px; color:#fff; display:inline-block; transform:scale(.8);}
#hero_bg {position:relative; float:left; width:100%; height:350px; clip-path:polygon(100% 0%, 0% 0%, 0% 132px, 100% 91px); background-color: #cb005f; z-index:9;}
#hero-txt-con {position:absolute; top:30px; left:20px;}
#typed,h1.typed-hero {font-size:1.2rem; color:#fff; font-weight:normal;}
#hero {position:absolute; width:355px; height:369px; top:88px; right:0; left:0; margin-left:auto; margin-right:auto; background:url('../img/hero-mobile.webp'); z-index:10;}
#tab {position:absolute; width:100%; height:124px; bottom:-93px; background:#14a8e3;}
.tab-33 {position:relative; float:left; width:33%; height:124px; display:flex; justify-content:center;}
.tab-05 {position:relative; float:left; width:0.5%; height:124px;}
.tab-class {position:absolute; width:58px; height:58px; bottom:44px; background:url('../img/tab-img.webp'); transition:0.5s; cursor:pointer; display:flex; justify-content:center; align-items:center;}
#tab-1-img {background-position:0;}
#tab-2-img {background-position:-58px;}
#tab-3-img {background-position:-116px;}
.tab-txt {position:absolute; color:#fff; font-size:14px; top:67px;}

/* Foot */
#foot-1 {position:relative; float:left; width:100%; height:78px; background:#d3d3d3; margin-top:93px;}
#scroller .innerScrollArea {width:100%; height:66px; overflow:hidden;}
#scroller ul {position:relative; margin-top:26px;}
.foot-bc {position:relative; float:left; height:66px; margin-top:-15px; transform:scale(0.7);}
#foot-2 {position:relative; float:left; width:100%; background:#aeaeae; text-align:center; line-height:22px; padding:10px;}

/* Popups */
.close {position:fixed; width:50px; height:50px; top:5%; right:5%; background:#fff; border-bottom-left-radius:10px; text-align:center; font-size:1.2em; color:#cb005f; cursor:pointer; transition:0.5s; line-height:44px; z-index:35;}
.close:hover {background:#ff53a3; color:#fff;} .close:active {background:#ff53a3; color:#fff;} .close:focus {background:#ff53a3; color:#fff;}
.popup-top {position:fixed; width:90%; height:160px; clip-path:polygon(100% 0%, 0% 0%, 0% 160px, 100% 120px); background-color:#cb005f; z-index:33;}
.popup-top-blank {position:fixed; width:90%; height:160px; top:55px; clip-path:polygon(100% 0%, 0% 0%, 0% 160px, 100% 120px); background-color: #fff; filter:blur(25px); z-index:32;}
.popup-title-desktop {display:hidden;}
.popup-title-mobile {position:fixed; padding-left:35px; top:10%; z-index:34;}
.popup-content {position:relative; float:left; margin-top:100px; padding:35px; color:#252550; z-index:31;}
.popup-content-spacer-mobile {position:relative; float:left; width:100%; height:75px;}
#John {position:relative; width:261px; height:176px; margin:auto auto 20px; background:url('../img/John-mobile.webp');}
#popup-bar-wrap {position:relative; float:left; width:100%; height:20px; background:#fff; margin:50px 0 50px 0;}
#popup-bar {position:relative; float:left; width:90%; height:2px; margin-left:5%; background:#cb005f; clear:both;}
h1.popup-title {font-weight:normal; color:#fff; font-size:1.8rem;}
p.popup-par-top {font-size:18px;}
p.popup-par-btm {font-size:18px; display:inline-block;}
span.light-blue {color:#15a7e4;}
span.dark-pink {color:#cb005f;}
h2.popup-sub {font-size:1.5rem; clear:both;}
.popup-form-label {position:relative; float:left; width:100%; margin-top:20px;}
.input-text-standard {position:relative; float:left; width:100%; height:60px; padding:18px; color:#252550; font-size:1em;  margin:20px 0 20px 0; background:#fff; border:2px solid #cb005f; border-radius:10px; transition:0.5s; user-select:text;}
.input-text-standard:hover {box-shadow:0px 0px 22px -2px rgba(255,179,215,1);}
.input-text-standard:active {box-shadow:0px 0px 22px -2px rgba(255,179,215,1);}
.input-text-standard:focus {box-shadow:0px 0px 22px -2px rgba(255,179,215,1);}
.input-textbox-standard {position:relative; float:left; width:100%; height:150px; padding:18px; color:#252550; font-size:1em;  margin:20px 0 20px 0; padding:10px; background:#fff; border:2px solid #cb005f; border-radius:10px; transition:0.5s; user-select:text; resize:none;}
.submit {position:absolute; padding:20px 35px; right:0; bottom:0; color:#fff; font-size:1.5em; background:#cb005f; border-top-left-radius:10px; transition:0.5s; cursor:pointer;}
.submit:hover {background:#ff3894;} .submit:active {background:#ff3894;} .submit:focus {background:#ff3894;}

/* Small Screens End */
}