/* Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:#000;color:#fff;overflow-x:hidden;margin:0; font-weight: 300; line-height: 180%; font-size: 16px;}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none;margin:0;padding:0}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{font-weight: 300;}
img{height: auto;}
.container{width: 1600px; max-width: 100%;}

/* Scroll animations */
.reveal{opacity:0;transform:translateY(50px);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.reveal.from-left{transform:translateX(-60px)}
.reveal.from-right{transform:translateX(60px)}
.reveal.from-bottom{transform:translateY(60px)}
.reveal.from-top{transform:translateY(-40px)}
.reveal.scale-in{transform:scale(.88)}
.reveal.visible{opacity:1;transform:none}

/* stagger delays */

.bnr-delay-1{transition-delay:0.5s}
.bnr-delay-2{transition-delay:1s}
.bnr-delay-3{transition-delay:1.5s}
.bnr-delay-4{transition-delay:2s}


.delay-1{transition-delay:0.5s}
.delay-2{transition-delay:1s}
.delay-3{transition-delay:1.5s}
.delay-4{transition-delay:2s}
.delay-5{transition-delay:2.5s}
.delay-6{transition-delay:3s}




/* navbar */
.mainHeader{position:fixed;top:0;left:0;width:100%;z-index:999; padding:0;display:flex;align-items:center;justify-content:space-between; transition:background .4s,box-shadow .4s,padding .3s; background:transparent; padding-top: 64px;}
.mainHeader.scrolled{background:rgba(10,10,10,.96);backdrop-filter:blur(14px); box-shadow:0 1px 30px rgba(0,0,0,.5);padding:10px 0;}
.mainHeader.scrolled .logo img{transition:.3s; width: 100px;}
.logo img{max-width: 100%; transition:.3s; width: 200px;}
.btn-demo-pill{background:#fff;color:#000;font-size:14px;font-weight:500;padding:9px 26px;border-radius:30px;border:none;transition:.25s;white-space:nowrap;cursor:pointer}
.btn-demo-pill:hover{background:#e0e0e0;transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,255,255,.15)}
.ham-btn{display:none;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;padding:0}

.home{min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;padding-top:80px}


/* Banner*/
.hero-bg{min-height:100vh;position:relative;overflow:hidden; display:flex;align-items:center;padding-top:80px; position:absolute;inset:0;z-index:0; background:url('../images/banner-img.jpg') center/cover no-repeat; will-change:transform;}
.hero-bg::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.0);}
.hero-content{position:relative;z-index:2}
.hero-content h1{font-size:clamp(30px,3.8vw,45px);color:#fff;margin-bottom:12px;line-height:1.2; }
.hero-content p.sub{line-height:152%; width:580px; margin-bottom:30px; letter-spacing: 0.15px;}
.btn-ghost-pill{display:inline-block;border:1px solid rgba(255,255,255,.5);color:#fff;font-weight:400;padding:12px 42px;border-radius:30px;transition:.25s; line-height: 100%;}
.btn-ghost-pill:hover{background:rgba(255,255,255,.15);color:#fff;transform:translateY(-2px)}
.btn-white-pill{display:inline-block;background:#fff;color:#000;font-weight:400;padding:12px 42px;border-radius:30px;transition:.25s; line-height: 100%;}
.btn-white-pill:hover{background:#e8e8e8;transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,255,255,.2)}
.hero-content .btn-white-pill{min-width: 200px; text-align: center;}
.mobile-banner-icons{display: none;}

.section-title{font-size:clamp(24px,3vw,40px);}
.sub{ color:rgba(255,255,255,1);  max-width: 100%; line-height: 150%; letter-spacing: 0.2px;}

/* Feature bubbles */
.banner-right{position:relative;width:650px; height:325px; max-width: 100%; margin-top: 202px; margin-left: 28px;}
.diagram{position:static;}
.feat-bubble-wrap{text-align:center}
.feat-bubble{width:82px;height:82px;border-radius:50%;background:#ebeae9;backdrop-filter:blur(8px);border:1px solid #ebeae9;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;transition:.3s}
.feat-bubble:hover{background:rgba(255,255,255,1);transform:translateY(-4px)}
.feat-bubble img{width:36px;height:36px;object-fit:contain}
.feat-bubble-wrap span{font-size:18px;font-weight:400;color:#fff; display: block; line-height: 100%;}
.feat-bubble-1{position:absolute; top: -8px; left: -42px;}
.feat-bubble-2{position:absolute; bottom: -35px; left: 111px; }
.feat-bubble-3{position:absolute; bottom: -35px; right: 90px;}
.feat-bubble-4{position:absolute; top: -8px;  right: -54px;}

/* Why choose */
.why-section{background:#000;padding:105px 0 105px 0;}
.why-section h2{color:#fff;margin-bottom:7px; }
.why-section .sub{width:560px; margin: 0 auto;}
.why-card-wrap{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; width: 1200px; max-width: 100%; margin: 0 auto; gap: 10px;  }
.why-card{text-align:center; padding:0; width: 220px; }
.why-icon-ring{width:114px;height:114px;border-radius:50%;background:rgba(0,0,0,1);border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;margin:0 auto 18px; transition: all ease 0.3s;}
.why-card:hover .why-icon-ring{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.25);  transform:scale(1.2);  transition: all ease 0.3s;}
.why-icon-ring img{object-fit:contain;}
.why-card h5{font-size:20px;font-weight:300;color:#fff;margin-bottom:6px}
.why-card p{font-size:14px;color:#797979;line-height:160%;margin:0}

/*parallax Sections*/
.parallax-section{position:relative;overflow:hidden}
.parallax-bg{position:absolute;inset:-15% 0;z-index:0;background-attachment:fixed;background-size:cover;background-position:center;will-change:transform}
.parallax-overlay{position:absolute;inset:0;z-index:1}
.parallax-content{position:relative;z-index:2}

/*Control Section*/
.control-section{display:flex; position: relative;}
.control-section h2{color:#fff;margin-bottom:5px; }
.control-bg{display: block; width: 100%;}
.control-container{position:absolute; z-index: 1;  display: flex;  align-items: center;  justify-content: center; left: 0; top:0; width: 100%; height: 100%; padding: 0;}
.control-top{margin-bottom: -50px; text-align: center;}
.ctrl-tag{position: absolute; left: 0; top: 0; display: flex; flex-direction: column-reverse; gap: 20px; width:150px;}
.ctrl-tag-inner{background:rgba(255,255,255,1); border-radius:10px; padding:7px 15px 5px 15px; box-shadow:0 8px 24px rgba(0,0,0,.2); position: absolute; left: 0;  bottom: 40px; width: 100%;}
.ctrl-tag-inner::before{content: ""; display: block; position: absolute; left:calc(50% - 10px); bottom:-18px; width: 0px; height: 0px; border-left:10px solid transparent ; border-right:10px solid transparent ; border-top: 20px solid #FFFFFF;}
.control-tap-title{color: #000000; text-transform: uppercase; font-weight: 600; font-size: 12px; line-height: 150%; text-align: center; margin-bottom:3px;}
.control-tap-wrp{margin-top: 0px; max-height:0; overflow:hidden; opacity:0; transition:all ease 0.5s;}
.ctrl-tag-wifiwrp { display: flex;  justify-content: center; margin-bottom: 0px; }
.ctrl-tag-wifiwrp img{width:24px;}
ul.control-tap-list{margin: 0; padding: 0; list-style: none;}
ul.control-tap-list > li{display: flex; align-items: center; gap: 8px; justify-content: flex-start; padding: 5px 0; color: #5B5B5B; font-size: 12px;  border-bottom: 1px solid rgba(0,0,0,.1); line-height: 100%;}
ul.control-tap-list > li:last-child{border-bottom: 0;}
.ctrl-tag-1{left: 16.5%; top: 28%;}
.ctrl-tag-2{left: 56%; top: 20%;}
.ctrl-tag-3{ left:68%; top: 70%;}
.ctrl-tag-4{left: auto; top: 17%;  right:18%;}

.ctrl-tag-2{flex-direction: column;}
.ctrl-tag-2 .ctrl-tag-inner{bottom: auto; top: 40px;}
.ctrl-tag-2 .ctrl-tag-inner::before{border-top: 0px solid #FFFFFF; border-bottom: 20px solid #FFFFFF; bottom: auto; top:-18px;}

.ctrl-tag-4{flex-direction: row;}
.ctrl-tag-4 .ctrl-tag-inner{bottom: auto; top: -10px; left: 50px}
.ctrl-tag-4 .ctrl-tag-inner::before{left:-18px; bottom: auto; top:20px; margin-top: -14px; border-left:0px solid red ; border-right:20px solid #FFFFFF ; border-top: 10px solid transparent; border-bottom: 10px solid transparent;}
.ctrl-tag:hover .control-tap-wrp{max-height:200px; overflow:visible; opacity:1; transition:all ease 1s;}

.ct-icon{width: 16px; height: auto;}




/*security section*/
.security-section{display:flex; margin: 15px 0; position: relative;}
.security-bg{display: block; width: 100%; height: auto;}
.security-container{position: absolute; left: 0; top:0; width:100%; height: 100%; z-index: 1; display: flex;  flex-direction: column; justify-content: flex-end;}
.smart-security-title{ margin-bottom: 160px; margin-top: auto; width:535px; max-width: 100%; line-height: 140%;}
.sec-icon-btn,.sec-icon-btn-inner{position: relative; font-size: 12px; text-transform: uppercase; font-weight: 400;}
.sec-icon-btn::before,.sec-icon-btn::after,.sec-icon-btn-inner::before,.sec-icon-btn-inner::after{content:''; position: absolute; left:0; top:0;  width: 10px; height: 10px; background-color: transparent; border-radius: 5px 0 0 0; border: 2px solid #FFFFFF; border-width: 2px 0 0 2px;}
.sec-icon-btn::after,.sec-icon-btn-inner::after{top: auto; bottom: 0; border-width:0 0 2px 2px ; border-radius: 0px 0 0 5px;}
.sec-icon-btn-inner{padding: 10px 20px; display: block; text-align: center; line-height: 150%;}
.sec-icon-btn-inner::before,.sec-icon-btn-inner::after{left:auto; right:0; border-radius: 0 5px 0px 0; border: 2px solid #FFFFFF; border-width:2px 2px 0px 0px;}
.sec-icon-btn-inner::after{border-width:0px 2px 2px 0px ; border-radius: 0 0 5px 0;}


.security-blink { position: relative; width: 12px; height: 12px; background: #FFFFFF; border-radius: 50%; display: block; margin: 0 auto;}
.security-blink::before,.security-blink::after { content: "";  position: absolute;  inset: 0;  border-radius: 50%;  background: #FFFFFF;  animation: ripple 2s infinite;  z-index: 1;}
.security-blink::after {animation-delay: 1s;}
@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}


.sec-icon-ring::after{content: ""; display: block; width:1px; height:30px; background-color: #FFFFFF; margin: 0 auto;}

.sec-feat-1,.sec-feat-2,.sec-feat-3,.sec-feat-4{position: absolute; left:0; top:0;}
.sec-feat-1{left:13.5%; top: 30%;}
.sec-feat-2{left: 20%; top: 13%;}
.sec-feat-3{left: 37.1%; top: 7%;}
.sec-feat-4{left: 63%; top: 42%;}
.sec-feat-2,.sec-feat-2 .sec-icon-ring{flex-direction: column-reverse;  display: flex;}
.sec-feat-2 .sec-icon-ring::after{height: 58px;}
.sec-feat-4{display: flex; gap: 20px;}
.sec-feat-4 .sec-icon-ring{display: flex; align-items: center;}
.sec-feat-4 .sec-icon-ring::after{width:58px; height:1px;}








/* Connected security */
.connected-section{margin-bottom: 15px; position: relative;}
.connected-section h2{color:#fff; margin-bottom: 0;}
.connected-bg{display: block; width:100%;}
.connected-container{position: absolute; left:0; top:0; width:100%; height: 100%; z-index: 1; padding-top: 100px;}
.conn-top{margin-bottom: 0px;}
.conn-card-row{display: flex; flex-wrap: wrap; justify-content: space-between;}
.conn-icon-wrap{width:101px; margin:0 auto 0px auto; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.conn-icon-wrap::after{content:''; display: block; width: 23px; height: 238px; background:url('../images/line-glow-bg.png') center top;}
.conn-icon-wrap::before{content:'';position:absolute;left:-19%; top: -28px;  width: 140px;  height: 140px;z-index: 1; background:url('../images/outer-border.png') center/cover no-repeat; transform: translate(-50%, 0%); animation: rotate 2s linear infinite;}
/* Rotation Animation */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.conn-icon-imgwp{display: flex; align-items: center; width: 84px; height: 84px; justify-content: center; border: 2px solid #FFFFFF; border-radius: 100%; position: relative; z-index: 2; box-shadow: inset 0px 0px 5px 5px rgb(31 98 107 / 65%);}
.conn-icon-imgwp img{width:70px;height:70px;object-fit:contain}
.conn-card{text-align:center; display: flex; flex-direction: column-reverse;  gap: 25px;  align-items: flex-start; justify-content: flex-end;}
.conn-card h6{font-size:16px;font-weight:400;color:#fff;margin:0}
.conn-card-1 {position: absolute; left: 17%; bottom: 25%;}
.conn-card-1 .conn-icon-wrap::after{height:0;}
.conn-card-1.visible  .conn-icon-wrap::after{height:133px; transition: all 2s ease;}
.conn-card-2 {position: absolute; left: 31%;  bottom: 17%;}
.conn-card-2 .conn-icon-wrap::after{height:0;}
.conn-card-2.visible .conn-icon-wrap::after{height:200px; transition: all 2s ease;}
.conn-card-3 {position: absolute; left: 55%; bottom: 25%;}
.conn-card-3 .conn-icon-wrap::after{height:0;}
.conn-card-3.visible .conn-icon-wrap::after{height:228px; transition: all 2s ease;}
.conn-card-4 {position: absolute;  right: 20%; bottom: 23%;}
.conn-card-4 .conn-icon-wrap::after{height:0}
.conn-card-4.visible .conn-icon-wrap::after{height:124px; transition: all 2s ease;}



/*Intelligent Automation*/
.automation-section{background:#1B1B1B;padding:70px 0 100px 0;}
.automation-section h2{color:#fff;margin-bottom:7px}
.automation-section .sub{width:560px; margin:0 auto 40px}
.auto-card{border-radius:30px;overflow:hidden;position:relative;cursor:pointer; }
.auto-card .bg-img{width:100%;transition:transform .6s cubic-bezier(.22,.61,.36,1); display: block; border-radius:30px;}
.auto-card:hover .bg-img{transform:scale(1.06)}
.auto-card:hover .card-info{padding-bottom: 40px; transition: all ease 0.5s;}
.auto-card .overlay{position:absolute;bottom:0;left:0;right:0;height:220px;background:linear-gradient(to top,#000 0%,rgba(0,0,0,0) 100%)}
.auto-card .card-info{position:absolute;bottom:0;left:0;right:0;padding:24px 26px; transition: all ease 0.5s;}
.auto-card .line-accent{width:48px;height:2px;background:#fff;border-radius:2px;margin:0 auto 14px auto;}
.auto-card h5{font-size:20px;color:#fff;margin-bottom:6px}
.auto-card p{font-size:15px;color:rgba(255,255,255,1);margin:0;line-height:130%; min-height: 43px;}

/*App Section*/
.app-section{background:#000000;padding:90px 0; overflow: hidden;}
.app-right h2{margin-bottom:10px}
.app-right p.sub{width:340px; margin-bottom:55px;}

.app-row{display: flex; flex-wrap: wrap; gap: 60px;  justify-content: center; align-items: center;}
.app-feat-card{background:#000;border:1px dashed #474747;border-radius:20px;padding:20px 50px;display:flex;align-items:center;gap:30px;margin-bottom:16px;}
.app-feat-card:hover{border-color:rgba(255,255,255,.4);}
.app-feat-card .feat-icon img{width:30px;height:30px;object-fit:contain}
.app-feat-card h6{font-size:22px;font-weight:400;color:#fff;margin:0 0 4px 0;}
.app-feat-card p{font-size:15px;color:#797979;margin:0; line-height: 100%; font-weight:400;}
.phone-glow{position:relative;display:flex;align-items:center;justify-content:center;min-height:500px}
.phone-glow .glow-bg{position:absolute;width:820px;height:820px;border-radius:50%;background:radial-gradient(circle,rgba(118,71,31,0.4) 0%,transparent 70%);animation:pulse-glow 3s ease-in-out infinite;z-index:0; }
.phone-glow img.phone-img{position:relative;z-index:1;width:426px; max-width: 100%; height:auto;}
@keyframes pulse-glow{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.08);opacity:1}}
.app-right{position: relative; z-index: 2; width: 362px; max-width: 100%;}
.app-mobile-top{display: none;}


/*Designed for Modern Living*/
.cta-section{min-height:750px;display:flex;align-items:center; background-image:url('../images/cta-bg.jpg'); background-size:cover; background-position:center top; position:relative; overflow:hidden}
.cta-container{padding-top: 100px;  padding-bottom: 100px;}
.cta-section h2{font-size:clamp(28px,3.5vw,45px);font-weight:300;margin-bottom:10px}
.cta-section p.sub{width:560px; margin-bottom:30px; }

/*footer*/
.footer-section{background:#242424; position:relative; padding:0; font-weight: 400;}
.footer-top{  padding:60px 60px 40px; border-bottom:1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap;}
.footer-col{flex-grow: 1;}
.footer-col-title{font-size:20px;font-weight:500;color:#fff; margin-bottom:20px;letter-spacing:.3px; line-height: 100%;}
.footer-col ul li{margin-bottom:20px; line-height: 100%;}
.footer-col ul li a{ font-size: 16px; color:rgba(255,255,255,1);transition:color .2s}
.footer-col ul li a:hover{color: rgba(255, 255, 255, 0.5);}
.footer-col ul li a.highlight{color: rgba(255, 255, 255, 0.5);}

/* QR + app buttons */
.qr-col{width: 129px; flex-grow: initial;}
.qr-block{display:flex;flex-direction:column;align-items:flex-end;gap:14px}

/* Footer bottom bar */
.footer-bottom{padding:18px 60px;display:flex;align-items:center; justify-content:space-between;flex-wrap:wrap;gap:16px; border-bottom:1px solid rgba(255,255,255,.07)}
.footer-bottom-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-bottom-links a{font-size: 16px; color:#777777;transition:.2s; line-height: 100%;}
.footer-bottom-links a:hover{    color: rgba(255, 255, 255, 1);}


.follow ul { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.follow ul li {margin: 0 13px 0 0;}
.follow ul li a {font-size: 0; width: 43px; height: 43px; display: flex; align-items: center;  justify-content: center;  border: 1px solid rgba(255, 255, 255, 0.2);  border-radius: 100%; }
.follow ul li a:before {  content: "";  display: block;  width: 22px;  height: 22px;  background: url(../images/sprite.png);  background-repeat: no-repeat;}
.follow ul li a:after {  display:none;}
.follow ul li a.fb:before {  background-position: -2px -133px;}
.follow ul li a.fb:hover:before {  background-position: -2px -163px;}
.follow ul li a.insta:before {  width: 22px;  height: 22px;  background-position: -28px -133px;}
.follow ul li a.insta:hover:before {  background-position: -28px -163px;}
.follow ul li a.yt:before {  width: 23px;  height: 18px;  background-position: -65px -134px;}
.follow ul li a.yt:hover:before {  background-position: -65px -164px;}
.follow ul li a.in:before {  width: 23px;  height: 22px;  background-position: -107px -131px;}
.follow ul li a.in:hover:before {  background-position: -107px -161px;}
.follow ul li a.twitter:before {  width: 23px;  height: 22px;  background-position: -137px -130px;}
.follow ul li a.twitter:hover:before {  background-position: -137px -161px;}
.follow ul li a.rss:before {  width: 23px;  height: 22px;  background-position: -176px -130px;}
.follow ul li a.rss:hover:before {  background-position: -176px -161px;}
.follow ul li a.blg:before {  width: 20px;  height: 22px;  background-position: -209px -130px;}
.follow ul li a.blg:hover:before {  background-position: -209px -164px;}
.follow ul li a.skecth:before {  width: 23px;  height: 22px;  background-position: -238px -133px;}
.follow ul li a.skecth:hover:before {  background-position: -238px -168px;}
.follow ul li a.whatsap:before {  width: 23px;  height: 22px;  background-position: -271px -133px;}
.follow ul li a.whatsap:hover:before {  background-position: -271px -168px;}

.footer-copyright{font-size: 16px; color:#777777; margin-bottom: 0;}

/*Footer disclaimer*/
.footer-disclaimer{  padding:22px 60px 28px;  border-top:1px solid rgba(255,255,255,.05)}
.footer-disclaimer .caution{ color:#777777; margin-bottom:20px}
.footer-disclaimer p{color:#777777;line-height:1.7;margin-bottom:20px}


/*divider*/
.sec-divider-line{height:1px;background:rgba(255,255,255,.08)}


/*Form*/
.mauticform_wrapper { width: 100%; margin: 0px auto; max-width: 100%;}
.mauticform-innerform {}
.mauticform-post-success {}
.mauticform-name { font-weight: bold; font-size: 1.5em; margin-bottom: 3px; }
.mauticform-description { margin-top: 2px; margin-bottom: 10px; }
.mauticform-error { margin-bottom: 10px; color: red; }
.mauticform-message { margin-bottom: 10px;color: green; }
.mauticform-row { display: block; margin-bottom: 20px; }
.mauticform-label { font-size: 1.1em; display: block; font-weight: bold; margin-bottom: 5px; }
.mauticform-row.mauticform-required .mauticform-label:after { color: #e32; content: " *"; display: inline; }
.mauticform-helpmessage { display: block; font-size: 0.9em; margin-bottom: 3px; }
.mauticform-errormsg { display: block; color: red; margin-top: 5px; font-size: 14px; line-height: 100%; }
.mauticform-selectbox, .mauticform-input, .mauticform-textarea {line-height: 100%; width: 100%; font-weight: 300; padding:12px 15px; color:#FFFFFF;  border: 1px solid rgba(255,255,255,.07); background: transparent; box-shadow: 0px 0px 0px #fff inset; border-radius: 4px; box-sizing: border-box; outline: none;}
.mauticform-selectbox::placeholder, .mauticform-input::placeholder, .mauticform-textarea::placeholder { color: rgba(255,255,255,1); }
.mauticform-checkboxgrp-row {line-height: 130%;}
.mauticform-checkboxgrp-label { font-weight: 300; display: inline; font-size: 13px; }
.mauticform-checkboxgrp-checkbox {position:relative; top:2px;}
.mauticform-radiogrp-row {}
.mauticform-radiogrp-label { font-weight: normal; }
.mauticform-radiogrp-radio {}
.mauticform-button-wrapper .mauticform-button.btn-default, .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default {border:0;  background: #fff; color: #000;  font-weight: 400;  padding: 12px 42px; border-radius: 30px;  transition: .25s;    line-height: 100%; font-size: 16px;     min-width: 200px;}
.mauticform-button-wrapper .mauticform-button, .mauticform-pagebreak-wrapper .mauticform-pagebreak { display: inline-block;margin-bottom: 0;font-weight: 600;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 13px;line-height: 1.3856;border-radius: 3px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.mauticform-button-wrapper .mauticform-button.btn-default[disabled], .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default[disabled] { background-color: #ffffff; border-color: #dddddd; opacity: 0.75; cursor: not-allowed; }
.mauticform-pagebreak-wrapper .mauticform-button-wrapper {  display: inline; }
.mauticform-field-hidden { display:none }
.mauticform-button-wrapper .mauticform-button.btn-default:hover, .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default:hover{background:#e8e8e8;transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,255,255,.2)}


.FormModal .modal-dialog { width: 400px;  max-width: 100%; margin-left: auto; margin-right: auto;}
.FormModal .modal-content {background-color: #242424; color: #FFFFFF;}
.FormModal .modal-header,.FormModal .modal-footer { border-color: rgba(255,255,255,.07);}
.FormModal .btn-close{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");}


/*Responsive*/
@media(max-width:1680px){
body {font-size:15px;}
.container{width: 1410px; max-width: 100%;}
.mainHeader{padding-top: 55px;}
.logo img{width:160px;}
.hero-content h1,.cta-section h2{font-size: clamp(30px,3.8vw,40px);}
.feat-bubble-wrap span{font-size: inherit;}
.btn-ghost-pill, .btn-white-pill{padding:12px 32px; font-size: inherit;}
.feat-bubble{width:70px; height:70px;}
.feat-bubble img {width: 32px; height: 32px;}
.feat-bubble-1{left:-31px;}
.feat-bubble-2 { bottom: -2px; left: 115px;}
.feat-bubble-3 { bottom: 0px; right: 95px;}
.feat-bubble-4 { top: -8px; right: -43px;}
.section-title{font-size:clamp(24px,3vw,36px);}
.why-card-wrap{width:1100px;}
.why-card h5{font-size: 18px;}
.why-icon-ring{width:100px; height:100px;}
.why-icon-ring img{height:45px;}
.why-section{padding: 85px 0;}
.control-tap-title{font-size: 11px;}
.ctrl-tag-wifiwrp img {width: 21px;}
.ctrl-tag-1{left: 16%;}
.ctrl-tag-2 { left: 55.5%;}
.ctrl-tag-3 { left: 67%;}
.ctrl-tag-4 { right: 18%;}
.smart-security-title{width:485px; margin-bottom: 120px;}
.sec-feat-1 {left: 13.0%;}
.sec-feat-2 {left: 19.2%;}
.sec-feat-3 {left: 36.4%;}
.sec-feat-4 {left: 64%;}
.conn-card h6{font-size: inherit;}
.conn-icon-imgwp{width: 74px; height: 74px;}
.conn-icon-imgwp img {width: 60px; height: 60px;}
.conn-icon-wrap::before{left: -10%; top: -23px; width: 120px; height: 120px;}
.conn-icon-wrap::after{height: 200px;}
.conn-card-1.visible .conn-icon-wrap::after {height: 100px;}
.conn-card-2.visible .conn-icon-wrap::after {height: 180px;}
.conn-card-3.visible .conn-icon-wrap::after {height: 200px;}
.conn-card-4.visible .conn-icon-wrap::after {height: 110px;}
.auto-card h5{font-size: 18px;}
.phone-glow img.phone-img{width:350px;}
.app-right{width:325px;}
.app-right p.sub{margin-bottom: 40px;}
.app-feat-card .feat-icon img { width: 25px; height: 25px;}
.phone-glow .glow-bg{width: 700px; height:700px;}
.app-feat-card h6 {font-size: 20px;}
.app-feat-card p {font-size: 14px;}
.app-feat-card{gap:20px; padding: 18px 40px;}
.automation-section{padding: 60px 0 80px 0;}
.auto-card p{font-size: 14px;}
.app-section{padding:70px 0;}
.cta-section p.sub{width:500px;}
.footer-col-title{font-size: 18px;}
.footer-col ul li a,.footer-bottom-links a,.footer-copyright{font-size: inherit;}
.follow ul li a{width:36px; height: 36px;}
.follow ul li a:before{scale: calc(0.8);}
.follow ul li {margin: 0 8px 0 0;}
.qr-col {width: 116px;}
.cta-section{min-height: 650px;}
}

@media(max-width:1600px){
.container{width: 1340px;}
}


@media(max-width:1440px){
body {font-size: 14px;}
.container{width: 1230px;} 
.mainHeader {padding-top: 42px;}
.logo img {width: 150px;}
.hero-content h1, .cta-section h2{font-size: clamp(26px, 3.8vw, 34px);}
.hero-content p.sub {width: 480px;}
.feat-bubble{width:60px; height:60px;}
.feat-bubble img {width: 30px; height: 30px;}
.feat-bubble-1{left: -24px; top: -2px;}
.feat-bubble-2 { bottom: 25px; left: 115px;}
.feat-bubble-3 { bottom: 27px; right: 86px;}
.feat-bubble-4 { top: -8px; right: -43px;}
.why-section {padding: 65px 0;}

.section-title {font-size: clamp(26px, 3.8vw, 30px);}
.why-icon-ring {width: 80px; height: 80px;}
.why-icon-ring img {height: 36px;}
.why-card h5 {font-size: 16px;}
.why-card-wrap {width: 1000px;}

.ctrl-tag-1{left: 15%;}
.ctrl-tag-2 { left: 54.5%;}
.ctrl-tag-3 { left: 66%;}
.ctrl-tag-4 { right: 16%;}

.smart-security-title{width:400px;}

.sec-feat-1 {left: 12.0%;}
.sec-feat-2 {left: 18.2%; top: 10%;}
.sec-feat-3 {left: 35.0%;}
.sec-feat-4 {left: 63%;}


.conn-card{gap:20px;}
.conn-icon-imgwp{width: 60px; height: 60px;}
.conn-icon-imgwp img {width: 50px; height: 50px;}
.conn-icon-wrap::before{left:0%;  top: -20px;  width: 100px;  height: 100px;}
.conn-icon-wrap::after{height: 180px;}
.conn-card-1.visible .conn-icon-wrap::after {height: 80px;}
.conn-card-2.visible .conn-icon-wrap::after {height: 160px;}
.conn-card-3.visible .conn-icon-wrap::after {height: 180px;}
.conn-card-4.visible .conn-icon-wrap::after {height: 90px;}

.automation-section {padding:40px 0 60px 0;}
.auto-card h5 {font-size: 16px;}
.phone-glow img.phone-img {width: 300px;}
.app-right {width: 300px;}
.app-feat-card .feat-icon img { width: 20px; height: 20px;}
.app-feat-card h6 {font-size: 16px;}
.app-feat-card p {font-size: 14px;}
.app-feat-card{gap:20px; padding: 16px 40px;}
.phone-glow .glow-bg{width: 600px; height:600px;}
.cta-section{min-height: 570px;}

.footer-col-title {font-size: 14px;}
.footer-section{font-size: 12px;}
.qr-col {width: 100px;}
}

@media(max-width:1366px){
.container{width: 1160px;}
.feat-bubble{width:60px; height:60px;}
.feat-bubble img {width: 30px; height: 30px;}
.feat-bubble-1{left: -24px; top: -2px;}
.feat-bubble-2 { bottom: 38px; left: 99px;}
.feat-bubble-3 { bottom: 37px; right: 79px;}
.feat-bubble-4 { top: -8px; right: -43px;}
.smart-security-title{margin-bottom:100px;}
.auto-card .card-info{padding:16px 20px;}
.cta-section {min-height: 530px;}
}


@media(max-width:1280px){
.mainHeader {padding-top: 32px;}
.logo img {width: 130px;}
.follow ul li a {width: 30px; height: 30px;}
.follow ul li {margin: 0 5px 0 0;}
.follow ul li a:before {scale: calc(0.7);}
.banner-right{margin-left: 0;}

.ctrl-tag-1{left: 13%;}
.ctrl-tag-2 { left: 53.0%;}
.ctrl-tag-3 { left: 64%;}
.ctrl-tag-4 { right: 12%;}
}


@media(max-width:1024px){
.container {width: 975px;}
.banner-right{width:90%; margin: 0 auto 0 auto; height: 277px;}
.feat-bubble-2 {bottom: 38px; left: 68px;}
.feat-bubble-3 {bottom: 37px; right: 41px;}

.why-icon-ring {width:60px; height: 60px;}
.why-icon-ring img {height: 28px;}

.sec-feat-1 {left: 10.0%;}
.sec-feat-2 {left: 16%; top: 4%;}
.sec-feat-3 {left: 33.0%;}
.sec-feat-4 {left: 63%;}  

.smart-security-title {margin-bottom:80px;}
.connected-container{padding-top: 50px;}
.sec-icon-btn, .sec-icon-btn-inner{font-size: 11px;}
.security-blink {width: 8px; height: 8px;}

.conn-icon-imgwp{width: 50px; height: 50px;}
.conn-icon-imgwp img {width: 40px; height: 40px;}
.conn-icon-wrap::before{left:10%;  top: -15px;  width: 80px;  height: 80px;}
.conn-icon-wrap::after{height: 150px;}
.conn-card-1.visible .conn-icon-wrap::after {height: 60px;}
.conn-card-2.visible .conn-icon-wrap::after {height: 140px;}
.conn-card-3.visible .conn-icon-wrap::after {height: 150px;}
.conn-card-4.visible .conn-icon-wrap::after {height: 70px;}

.automation-section { padding: 40px 0 20px 0;}
.footer-top{padding:50px 32px 36px}
.footer-bottom,.footer-disclaimer{padding-left:32px;padding-right:32px}

.phone-glow .glow-bg{display: none;}

}


@media(max-width:991px){
     .cta-section {min-height: 430px;}
     .banner-right {width: 80%; margin: 0 auto 0 auto; height: auto; display: none;}

     .diagram{width:100%;}
     .feat-bubble-1 {top: 0%; left:-4%;}
     .feat-bubble-2{left: 20%; bottom: 3%;}
     .feat-bubble-3 {right: 17%; bottom: 3%;}
     .feat-bubble-4 {top: 0%; right: -6%;}
     .smart-security-title{margin-bottom: 30px;}
     .hero-content h1, .cta-section h2,.section-title{font-size: clamp(20px, 3.8vw, 28px);}
     .auto-card{margin-bottom: 20px;}
     .auto-card .card-info{padding:10px 10px;}
     .hero-content{margin-bottom: 40px;}
     .footer-top {padding: 20px 20px 20px 20px;}
     .footer-bottom, .footer-disclaimer{padding-left: 20px; padding-right: 20px;}
     
}

@media(max-width:768px){
    .auto-card {margin-bottom:25px;}
    .connected-container {padding-top: 20px;}
    .conn-card-4{right:10%;}

    .conn-card-1.visible .conn-icon-wrap::after {height: 50px;}
    .conn-card-2.visible .conn-icon-wrap::after {height: 105px;}
    .conn-card-3.visible .conn-icon-wrap::after {height: 100px;}
    .conn-card-4.visible .conn-icon-wrap::after {height: 50px;}
}

@media(max-width:767px){
body {font-size: 14px; overflow-x: hidden;}
.container{padding-left: 30px; padding-right: 30px;}
.hero-content h1, .cta-section h2, .section-title {font-size: clamp(28px, 3.8vw, 28px);}
.why-card-wrap{gap: 40px 0;}
.why-card{width:calc(50% - 0px);}
.why-icon-ring {width: 114px; height: 114px;}
.why-icon-ring img {height: 50px;}
.automation-section {padding:60px 0 60px 0;}
.auto-card{margin-bottom: 10px;}
.auto-card h5{font-size: 20px;}
.auto-card p{font-size: 15px;}

.security-bg{height:615px; object-fit: cover;}
.sec-feat-1, .sec-feat-2, .sec-feat-3, .sec-feat-4{position: static;}
.sec-feat-1{order: 1;}
.sec-feat-2{order: 3; }
.sec-feat-3{order: 0;}
.sec-feat-4{order: 2;     transform: translate(0, 0px)!important;}

.sec-icon-btn{display: flex; justify-content: center;}
.sec-feat-4{justify-content: center;}
.sec-icon-btn-inner{padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.3);  width: 210px; max-width: 100%;}
.sec-icon-btn-inner br{display: none;}
.sec-feat-2 .sec-icon-btn-inner{border-bottom: 0;}
.sec-icon-ring,.sec-feat-2 .sec-icon-ring,.sec-feat-4 .sec-icon-ring,.sec-icon-btn::before, .sec-icon-btn::after, .sec-icon-btn-inner::before, .sec-icon-btn-inner::after{display: none;}
.smart-security-title{text-align: center; width: 100%; margin-bottom: 20px;}
.security-container{justify-content: flex-start; padding: 50px 15px; z-index: 2;}
.security-section{position: relative;}
.security-section::after{content: ""; position: absolute; left: 0; top: 0%; width: 100%; height: 100%; opacity: 1; z-index: 1; background:linear-gradient(to bottom,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%)}

 .connected-bg{height: 615px; object-fit: cover;}
 .conn-icon-wrap::after {display: none;}

 .connected-container{display: flex;  flex-direction: column; padding: 60px 30px;}
 .conn-card-row{margin-top: auto; gap: 30px 0; align-items: flex-start;}
 .conn-card{flex-direction: column; width: 50%; align-items: center;}
 .conn-card-1, .conn-card-2, .conn-card-3, .conn-card-4 {position: static;}

.cta-section{background-position: right -276px top; min-height: 616px; align-items: flex-end; position: relative;}
.cta-section::after{content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 100%; opacity: 1; z-index: 1; background:linear-gradient(to top,#000 0%,rgba(0,0,0,0) 100%)}
.cta-section p.sub{margin-bottom: 20px;}
.cta-container{padding:0px 30px 60px 30px; position: relative; z-index: 2;}

.control-bg{height: 615px; object-fit: cover;}

.footer-col{width: 50%; flex-grow: initial;}
.footer-col ul li{margin-bottom: 10px;}
.qr-col{width:100%}
.qr-block{align-items: flex-start; position: relative; padding-left: 100px;}
.qr-block .qr-img:nth-child(1){position: absolute; left: 0; top: 0; width:90px;}

.footer-col-title{margin-bottom: 10px;}
.footer-top{gap:30px 0; padding: 30px 30px 30px 30px;}
.footer-bottom-links{flex-direction: column; gap: 10px;}
.footer-disclaimer .caution,.footer-disclaimer p{margin-bottom: 10px;}
.footer-bottom, .footer-disclaimer{padding-left: 30px; padding-right:30px;}

.control-container{flex-direction: column; align-items: flex-start; justify-content:flex-start; padding:120px 30px 30px 30px;}
.ctrl-tag-wifiwrp{display: none;}
.ctrl-tag-inner::before{display: none;}
.ctrl-tag,.ctrl-tag-inner{position: static;}
.ctrl-tag{width: 100%; margin-bottom: 15px;}
.control-tap-title{text-align: left;}
.control-tap-wrp{padding-top: 0px; border-top:1px solid rgba(0,0,0,.1);}
.ctrl-tag-inner{padding:7px 15px 3px 15px}
ul.control-tap-list{display: flex; gap:5px 20px;  flex-wrap: wrap;}
ul.control-tap-list > li{ border: 0;}

.control-top{margin-bottom: 30px;}

.app-row{gap:20px;}
.app-mobile-top{display: block;  text-align: center;}
.app-right .section-title,.app-right .sub{display: none;}

.hero-content{margin-bottom: 0;}
.mobile-banner-icons{display: flex; justify-content:space-between; margin-bottom: 30px;}
.mobile-banner-icons .feat-bubble-1,.mobile-banner-icons .feat-bubble-2,.mobile-banner-icons .feat-bubble-3,.mobile-banner-icons .feat-bubble-4{position: static;}
.hero-content .btn-white-pill,.hero-content .btn-ghost-pill{min-width: initial; flex-grow: 1; text-align: center; padding-left: 10px; padding-right: 10px;}
.home{align-items: flex-end; padding: 60px 0;}
.hero-bg{background-position: right -300px top;}
.feat-bubble-wrap span{font-size: 13px;}

.auto-card .card-info {padding: 0px 20px 20px 20px;}

}