@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);
:root{--transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;--opacity: 0;--visibility: hidden;--cycle: 2s}
body{min-height:100%;font-family:"Kanit",sans-serif;font-weight:400;font-style:normal;overflow-x:hidden;position:relative}
.content{overflow-x:hidden;background:rgba(0,0,0,0)}
.bg-video{position:relative;width:100%;overflow:hidden;z-index:-1}
#myVideo{position:relative;inset:0;width:100%;z-index:-1}
.mb-0{margin-bottom:0}
.backdrop-blur{position:fixed;inset:0;z-index:1;background:linear-gradient(0deg, #314f17 0%, #0d0f0c 25.96%);backdrop-filter:blur(10px) brightness(0.5);overflow:hidden;display:flex;justify-content:center;align-items:center;opacity:var(--opacity);visibility:var(--visibility);transition:var(--transition)}
.backdrop-blur.open{--visibility: visible}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes zoom{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes zoomAndBrighten{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.1);filter:brightness(2)}}
@keyframes textAnimation{0%,100%{opacity:1}50%{opacity:0}}
@keyframes textAnimation-reverse{0%,100%{opacity:0}50%{opacity:1}}
@keyframes frontA{0%,49.999%{z-index:2}50%,100%{z-index:1}}
@keyframes frontB{0%,49.999%{z-index:1}50%,100%{z-index:2}}
@keyframes swap{0%{opacity:1;visibility:visible}50%{opacity:0;visibility:hidden}100%{opacity:1;visibility:visible}}
@keyframes swapReverse{0%{opacity:0;visibility:hidden}50%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes fade{from{opacity:1}to{opacity:0}}
header{display:flex;flex-direction:column;align-items:center;width:100%;position:relative}
header p{color:#fff;font-weight:900}
header p span{background:linear-gradient(90deg, #fef3a9 0%, #fcdd45 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0)}
.social{display:flex;align-items:center;justify-content:center;gap:3rem;position:absolute;right:0;top:21%;z-index:10;transform:translate(0, -50%)}
.social a:hover figure img{filter:brightness(1.2) drop-shadow(0 8px 16px rgba(255, 255, 255, 0.3))}
.social a:hover:active{transform:translateY(-1px)}
.social a:hover:active figure{transform:scale(1.05)}
.social figure{margin-bottom:0rem}
.social figure img{width:50px}
.cta{cursor:pointer}
.regFrm{width:72%;z-index:9;position:relative}
.regFrm .form-group{position:relative;width:100%;margin-bottom:.6rem}
.regFrm .form-group input{background-color:#fff;border-radius:.75rem;color:#895831;border:3px solid #000;border-radius:28px;padding:1rem 3rem;text-align:center;font-size:.7rem}
.regFrm .form-group input:focus{box-shadow:none}
.regFrm .form-group input::-moz-placeholder{color:#895831;font-weight:400}
.regFrm .form-group input::placeholder{color:#895831;font-weight:400}
.regFrm .form-group figure{width:20px;margin-bottom:0;position:absolute;top:50%;transform:translateY(-50%)}
.regFrm .form-group .u-p{left:4%}
.regFrm .form-group .eye{right:4%}
.regFrm .form-group .eye:hover{cursor:pointer}
.regFrm .btn{border:0;padding:0;margin:1rem auto 0;width:95%;animation:zoom 1.5s infinite}
#form,#form-mb{position:relative;width:-moz-max-content;width:max-content}
#form .bg-form,#form-mb .bg-form{background-image:url(../assets/bg-form-mbe133e41d6fcc16e98fcf.png);background-position:top center;background-size:100% 95%;background-repeat:no-repeat;padding:3.4rem 0rem 2rem;position:relative;z-index:20}
#form .bg-form .join,#form-mb .bg-form .join{margin-bottom:.6rem}
#form .bg-form .join p,#form-mb .bg-form .join p{font-size:.9rem;font-weight:900;line-height:1.1;position:relative;color:#000}
#form .close-btn,#form-mb .close-btn{position:absolute;background:rgba(0,0,0,0);top:6%;right:1rem;width:3rem;height:3rem;z-index:99999;border:none;background-color:rgba(0,0,0,0);cursor:pointer}
#form .close-btn img,#form-mb .close-btn img{pointer-events:none !important}
#form .confeti,#form-mb .confeti{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:100%;z-index:0}
.error.errors{color:red;width:100%;text-align:center;display:block;font-size:.8rem;margin-bottom:-0.6rem}
.web-ver{width:77%}
.web-ver:hover img{transition:all .5s ease;filter:brightness(170%)}
#installation figure{width:58%}
hr{background:#4f4518;background:radial-gradient(circle, rgb(79, 69, 24) 0%, rgba(45, 35, 13, 0.6685267857) 100%);border:none;opacity:.5;height:1.5px;margin:-0.35rem auto 1.35rem;width:300px}
.hr2{margin:1.35rem auto}
@media screen and (max-width: 767.98px){hr{width:200px}}
@media screen and (min-width: 992px){.web-ver{width:62%}}
@media screen and (min-width: 768px)and (max-width: 991.98px){.web-ver{width:77%}}
@media only screen and (width: 360px)and (height: 780px){hr{margin:1.35rem auto}}
@media only screen and (width: 375px)and (height: 812px){hr{margin:1.35rem auto}}
@media screen and (min-width: 1200px){hr{margin:-0.3rem auto 1.5rem}}
.banner{margin-top:1rem}
footer{padding:2rem 1rem;margin-top:-0.1rem;background-image:url(../assets/bg-ft-mbf453a739fb89771f9495.png);background-position:center;background-size:100% 100%;background-repeat:no-repeat}
footer p{color:#fff;font-size:.875rem;font-weight:500}
footer .title{color:#edcd68;font-weight:900;font-size:1.75rem}
footer .title .follow-text{font-size:.8rem;font-weight:400}
footer .logo_ft{width:8rem}
footer .content{color:#edcd68;font-weight:500;font-size:14px}
footer .copyright{color:#fff;font-size:12px}
@media screen and (max-width: 1199.98px){#form .close-btn{width:3rem;height:3rem;right:0;top:0}footer .content{font-size:.875rem}footer .copyright{text-align:center;font-size:.563rem}footer .logo_ft{width:14.5rem}footer .title{text-align:center;font-weight:normal;font-size:.625rem}}
@media screen and (min-width: 320px){header{position:absolute;top:0;right:0}header .logo{width:84%;padding-top:3rem}header.form-header{position:relative;top:auto;left:auto;transform:none}header .social{display:flex;flex-direction:column;gap:1rem;position:absolute;right:.5rem;top:3rem;align-items:stretch;transform:none}header .social figure{width:10vw}.promotions{position:absolute;bottom:1rem;display:flex;justify-content:center}.promotions figure{width:55%}.cta{position:absolute;top:67%;width:70%;left:0;right:0;margin:auto;animation:zoom 1.5s infinite}#form{width:100%}.regFrm .btn{width:70%;margin:1rem auto 0}.error.errors{font-size:.7rem;margin-bottom:-1rem}footer ul{padding-top:1.125rem}}
@media screen and (min-width: 360px){.regFrm{width:80%;padding-top:1rem}.regFrm .form-group{margin-bottom:1.1rem}.regFrm .form-group input{padding:.5rem 2rem}.regFrm .form-group figure{width:15px}.error.errors{font-size:.8rem}}
@media screen and (min-width: 375px){#form-mb .bg-form .join{margin-bottom:1rem}footer ul li{font-size:.7rem}footer p{font-size:.7rem}}
@media screen and (min-width: 412px){#form-mb .bg-form .join p{font-size:.813rem;font-weight:bold}.regFrm .form-group{margin-bottom:1.1rem}footer ul li{font-size:.8rem}footer p{font-size:.8rem}}
@media screen and (min-width: 540px){.social{top:0}#form .bg-form,#form-mb .bg-form{width:80%}.regFrm{width:80%}.regFrm .form-group{margin-bottom:1rem}}
@media screen and (min-width: 568px){#form .bg-form,#form-mb .bg-form{padding:3rem 0rem 0rem}#form .bg-form .join p,#form-mb .bg-form .join p{font-size:1.1rem}.regFrm{width:66%}.regFrm .form-group input{font-size:1rem}.banner{margin-top:20%}}
@media screen and (min-width: 576px){.regFrm{width:66%}.regFrm .form-group input{font-size:1rem}.banner{margin-top:2rem}}
@media screen and (min-width: 768px){#form .bg-form,#form-mb .bg-form{width:100%;padding:5rem 0rem 0rem}#form .bg-form .join,#form-mb .bg-form .join{margin-bottom:1.5rem}#form .bg-form .join p,#form-mb .bg-form .join p{font-size:1.5rem}.regFrm{width:78%}.regFrm .form-group{margin-bottom:1.5rem}.regFrm .form-group figure{width:30px}.regFrm .form-group input{padding:1.2rem 4rem;font-size:1.2rem}.regFrm .btn{padding-bottom:3rem}.error.errors{font-size:1rem;margin-bottom:-1.3rem}}
@media screen and (min-width: 820px){html,body{height:100%}#form .bg-form,#form-mb .bg-form{width:100%}#form .bg-form .join p,#form-mb .bg-form .join p{font-size:1.5rem}.regFrm .form-group{margin-bottom:1.2rem}.regFrm .form-group input{padding:1.2rem 4rem}}
@media screen and (min-width: 1024px){html,body{height:auto}#form .bg-form,#form-mb .bg-form{padding:5.7rem 0rem 0rem}#form .bg-form .join p,#form-mb .bg-form .join p{font-size:2rem}.regFrm .form-group{margin-bottom:2rem}.regFrm .form-group input{padding:1.5rem 4rem}.regFrm .form-group:last-of-type{margin-bottom:2rem}.regFrm .btn{margin:2rem auto 0;width:100%}}
@media screen and (min-width: 1200px){html,body{height:100%;position:relative}header{--opacity: 1;--visibility: visible;position:absolute;top:3%;left:50%;transform:translate(-50%, 0%);z-index:2;opacity:1;visibility:visible;transition:var(--transition)}header .logo{width:28%;padding-top:0}header.form-header figure{width:26rem}header .social{display:flex;flex-direction:row;gap:1rem;position:absolute;right:7%;top:0;z-index:10}header .social figure{width:100%}.content{position:relative;background:rgba(0,0,0,0)}.promotions{position:absolute;bottom:2rem;display:flex;justify-content:center}.cta{position:absolute;top:74%;width:100%;display:block;margin:auto;animation:zoom 1.5s infinite}.cta img{width:23rem}#form{height:-moz-fit-content;height:fit-content}#form .bg-form{background-image:url(../assets/bg-formc33c642ba56bff139bc5.png);background-position:top center;background-size:100% 100%;background-repeat:no-repeat}#form .bg-form{padding:0rem;width:40rem;background-size:100% 100%}.regFrm{width:70%;z-index:3;padding-top:5rem}.regFrm .form-group{margin-bottom:1.5rem}.regFrm .form-group:last-of-type{margin-bottom:1rem}.regFrm .form-group input{padding:.5rem 4rem;font-size:1.625rem}.regFrm .form-group figure{width:28px}.regFrm .form-group .error.errors{margin-bottom:-1.2rem}.regFrm .btn{margin:1.5rem auto 0;width:70%;padding-bottom:1.5rem}.cta{width:15rem}.promotions figure{width:50%;bottom:1rem}footer{padding:2rem 6rem;margin-top:-0.6rem;position:relative;z-index:0;background-image:url(../assets/bg-ftf40c47170b6eecb55860.png);background-position:center;background-size:100% 100%;background-repeat:no-repeat}footer .logo_ft{width:50%}footer .line{position:absolute;top:1rem;right:-1px;height:80%}footer .partners{margin-bottom:2.5rem}}
@media screen and (min-width: 1366px){#form .bg-form{width:40rem}.cta{top:75%}}
@media screen and (min-width: 1440px){.cta img{width:22rem}header .logo{width:26%}}
@media screen and (min-width: 1500px){.cta img{width:24rem}header .logo{width:28%}#form .bg-form{width:40rem}#form .bg-form .join p{font-size:1.3rem}}
@media screen and (min-width: 1600px){header .logo{width:30%}#form .bg-form{width:40rem}#form .bg-form .join p{font-size:1.3rem}footer ul li{font-size:1rem}footer p{font-size:1rem}}
@media screen and (min-width: 1700px){#form .bg-form{background-size:92% 92%}#form .bg-form .join p{font-size:1.4rem}#form .confeti{width:120%}.regFrm .form-group{margin-bottom:1.5rem}.regFrm .form-group:last-of-type{margin-bottom:.5rem}.regFrm .btn{padding-bottom:4rem}}
@media screen and (min-width: 1920px){header .logo{width:35%}#form{width:40%}.regFrm .form-group:last-of-type{margin-bottom:2rem}.cta{width:100%}.promotions figure{width:100%}footer{padding:2rem 9rem}footer figure img{width:22.75rem}footer ul+figure{width:90%}}
@media screen and (min-width: 2056px){.cta img{width:30rem}header .logo{width:37%}#form{width:39%}.regFrm .form-group:last-of-type{margin-bottom:1.5rem}.regFrm .form-group figure{width:30px}}
@media screen and (min-width: 2336px){header .logo{width:43%}header.form-header figure{width:30rem}.cta{width:50%}#form .form-header figure:nth-child(2){width:39rem;margin-bottom:-2.5rem}#form .bg-form{width:45rem}#form .bg-form .join p{font-size:1.8rem}#form .close-btn{width:5rem;right:3rem}#form .confeti{top:69%}.social figure{width:80px}.regFrm .form-group:last-of-type{margin-bottom:1.5rem}.regFrm .form-group .error.errors{font-size:1.2rem}.regFrm .btn{margin:2.4rem auto 0}footer{padding:2rem 10rem}}
@media screen and (min-width: 2560px){header .logo{width:45%}#form .confeti{top:60%;width:120%}.regFrm .form-group{margin-bottom:1.5rem}.regFrm .form-group:last-of-type{margin-bottom:2rem}}
@media screen and (min-width: 2624px){header .logo{width:48%}#form{width:40%}#form .bg-form{padding:1.7rem 0rem 0rem;width:51rem}#form .bg-form .join{margin-bottom:4rem}#form .bg-form .join p{font-size:2.2rem}#form .confeti{width:130%}.regFrm .form-group{margin-bottom:2rem}.regFrm .form-group figure{width:35px}}
@media screen and (min-width: 2992px){header .logo{width:55%}header.form-header figure{width:35rem}#form .form-header figure:nth-child(2){width:44rem}#form .close-btn{width:6rem;right:4rem}#form .bg-form{padding:1.8rem 0rem 0rem;width:55rem}#form .bg-form .join{margin-bottom:4rem}#form .bg-form .join p{font-size:2.2rem}.regFrm .form-group{margin-bottom:2rem}.regFrm .form-group input{font-size:2rem}.regFrm .form-group:last-of-type{margin-bottom:2rem}.regFrm .btn{margin:0rem auto 0}.error.errors{font-size:1.5rem;margin-bottom:-1.7rem}footer{padding:2rem 14rem}}
@media screen and (min-width: 3456px){header .logo{width:65%}header.form-header figure{width:40rem}#form .bg-form{padding:4rem 0rem 0rem;width:60rem}#form .bg-form .join{margin-bottom:4rem}#form .confeti{width:115%}.backdrop-blur{padding-top:10rem}.regFrm .form-group{margin-bottom:3rem}.regFrm .form-group input{font-size:2rem}.regFrm .form-group .error.errors{font-size:1.5rem}.regFrm .btn{margin:3rem auto 0}}
@media screen and (min-width: 3840px){#form .close-btn{transform:scale(1.5);top:15%;width:6rem;right:6rem}#form .form-header figure:nth-child(1){width:30rem;margin-bottom:6rem}#form .form-header figure:nth-child(2){width:60rem}#form .bg-form{padding:5rem 0rem 1rem;width:75rem}#form .bg-form .join{margin-bottom:5rem}#form .bg-form .join p{font-size:3rem}.error.errors{font-size:1.5rem;margin-bottom:-2.2rem}}