nav{width:100%;background:var(--white);color:var(--black);padding:10px 0;position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:space-around;z-index:9999999;box-shadow:0 4px 6px #0000001a}.logo{width:120px;border-radius:4px}nav ul li{display:inline-block;list-style:none;margin:5px 20px;font-size:16px;cursor:pointer}nav .link{display:inline-block;list-style:none;margin:5px 20px;font-size:16px;cursor:pointer}nav ul li:hover{text-decoration:underline}.dark-nav{background:var(--white);transition:.5s}.menu-icon{display:none}.nav-link{background:none;border:none;color:var(--dark);cursor:pointer;text-decoration:none;font-size:14px;padding:0;transition:color .3s ease}.nav-link:hover{text-decoration:underline}.nav-link.active{color:var(--red)}.btn{background-color:var(--red);color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer}.btn.active{background-color:var(--red-2)}@media (max-width: 1000px){nav ul li{margin:10px 15px}}@media (max-width: 840px){.logo{margin-left:-100px}nav{padding:4px 60px;width:100%}nav ul{position:fixed;top:0;right:0;bottom:0;background:var(--white);z-index:-1;width:200px;padding-top:70px;transition:.5s;height:100vh}nav ul li{display:block;margin:25px 40px}.menu-icon{display:block;width:30px;cursor:pointer}.hide-mobile-menu{right:-240px}}.hero{margin-top:90px}.carousel{width:100%;height:600px;margin:90px auto 0;overflow:hidden;position:relative;padding:100px 0}.carousel .list .item{width:180px;height:100px;position:absolute;top:60%;transform:translateY(-70%);left:70%;border-radius:10px;box-shadow:0 25px 50px #0000004d;background-position:left;background-size:cover;background-repeat:no-repeat;z-index:100;transition:1s}.carousel .list .item:nth-child(1),.carousel .list .item:nth-child(2){top:0;left:0;transform:translate(0);border-radius:0;width:100%;height:100%}.carousel .list .item:nth-child(3){left:67%}.carousel .list .item:nth-child(4){left:calc(67% + 200px)}.carousel .list .item:nth-child(5){left:calc(67% + 400px)}.carousel .list .item:nth-child(6){left:calc(67% + 600px)}.carousel .list .item:nth-child(n+7){left:calc(67% + 800px);opacity:0}.list .item .content{position:absolute;top:50%;left:100px;transform:translateY(-50%);width:400px;text-align:left;color:#fff;display:none}.list .item:nth-child(2) .content{display:block}.content .name{font-size:100px;text-transform:uppercase;font-weight:700;line-height:1;text-shadow:3px 4px 4px rgba(255,255,255,.8);opacity:0;animation:animate 1s ease-in-out .6s 1 forwards}.content .des{margin-top:10px;margin-bottom:20px;font-size:18px;margin-left:5px;opacity:0;animation:animate 1s ease-in-out .9s 1 forwards}.content .btn{margin-left:5px;opacity:0;animation:animate 1s ease-in-out 1.2s 1 forwards}.content .btn button{padding:10px 20px;border:none;cursor:pointer;font-size:16px;border:2px solid #fff}@keyframes animate{0%{opacity:0;transform:translateY(100px);filter:blur(33px)}to{opacity:1;transform:translate(0);filter:blur(0)}}.arrows{position:absolute;top:56%;left:55%;z-index:100;width:300px;max-width:30%;display:flex;gap:10px;align-items:center}.arrows button{width:40px;height:40px;border-radius:50%;background-color:var(--red);color:var(--white);border:none;outline:none;font-size:14px;font-family:monospace;font-weight:700;transition:.5s;cursor:pointer;box-shadow:0 25px 50px #0000004d}.arrows button:hover{background:var(--red-2);color:var(--white)}.carousel .timeRunning{position:absolute;z-index:1000;width:0%;height:4px;left:0;top:0;animation:runningTime 7s linear 1 forwards}@keyframes runningTime{0%{width:0%}to{width:100%}}@media screen and (max-width: 999px){.arrows{top:56%;left:50%}.list .item .content{left:50px}.content .title,.content .name{font-size:70px}.content .des{font-size:16px}.carousel{height:300px}}@media screen and (max-width: 690px){.arrows{top:80%;left:70%}.list .item .content{top:40%}.content .title,.content .name{font-size:45px}.content .btn button{padding:10px 15px;font-size:14px}.carousel{height:60px}}.title{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#080808;font-size:15px;font-weight:600;text-transform:uppercase;width:100%;height:60vh;background-size:cover;background-position:left bottom;background-repeat:no-repeat}.title-content{padding-right:100px}.title:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;opacity:.7;z-index:1}.title-overlay{width:100%;height:100%;display:flex;flex-direction:column;align-items:end;justify-content:end;text-align:right;z-index:1}.title p,.title h2{z-index:2;color:var(--white);text-shadow:10px 10px 50px rgb(0,0,0)}.title h2{font-size:6vw;margin-top:-20px;text-transform:none}.about{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;width:80%;margin:100px auto}.about-left{flex:1;padding-right:20px}.about-right{flex:1}.about-img{width:100%;border-radius:10px;filter:grayscale(100%);-webkit-filter:grayscale(100%)}.play-icon{width:60px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer}.about h3{font-weight:600;font-size:16px;color:var(--gray-2);text-transform:capitalize}.about h2{font-size:55px;line-height:50px;color:var(--dark);margin:10px 0;text-transform:capitalize}.about p{color:var(--dark);margin-bottom:15px;line-height:1.4}.about .solutions-grid{display:flex;flex-direction:column;gap:10px;margin-top:20px;width:100%}.about .solution-item{padding:20px;background:var(--white-2);border-radius:5px;font-size:1rem;font-weight:500;color:#333;text-align:center;cursor:pointer;transition:background-color .3s ease,transform .3s ease;width:100%;margin:0 auto}.about .solution-item:hover{background:var(--gradient-red-3);color:var(--white);transform:scale(1.05)}@media (max-width: 800px){.about{flex-direction:column}.about-left{flex-basis:100%}}.contact{max-width:90%;display:flex;align-content:center;justify-content:space-between;padding:8% 10%;background:var(--white-2)}.contact-col{flex-basis:48%;color:var(--dark)}.contact-col h3{color:#000f38;font-weight:500;font-size:25px;display:flex;align-items:center;margin-bottom:20px}.contact-col h3 img{width:35px;margin-left:10px}.contact-col p{max-width:450px;list-style:.3;line-height:1.4}.contact-col ul{margin-top:40px;list-style:none;padding:0}.contact-col ul li{display:flex;align-items:center;justify-content:flex-start;margin:20px 0}.contact-col ul li img{width:25px;margin-right:10px}.contact form input,.contact form textarea{display:block;width:100%;background:var(--white);padding:15px;border:0;outline:0;margin-bottom:15px;margin-top:5px;resize:none;font-size:1rem}.contact-col span{display:block;margin:20px 0}.contact-col .icon i{width:20px;height:auto}@media (max-width: 700px){.contact{display:block}.contact-col{padding:20px}}.btn.dark-btn{background:var(--red-2);color:#fff;border:none;padding:2px 20px;border-radius:5px;font-size:14px;font-weight:700;cursor:pointer;transition:background-color .3s ease,transform .2s ease;display:flex;align-items:center;justify-content:center;gap:20px}.btn.dark-btn:hover{background:var(--gradient-red-3);transform:scale(1.05)}.btn.dark-btn img{width:24px}.footer{margin:0 auto;display:flex;align-items:center;justify-content:center;background:var(--dark);color:var(--white);width:100%;height:100px;text-align:center}@media (max-width: 600px){.footer{display:block;text-align:center}.footer ul li{margin:10px}.footer ul{margin-top:10px}}.solutions-area{padding:60px 60px 100px;text-align:center}.solutions-area h1{font-size:2.5rem;color:var(--dark)}.solutions-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:30px}.solutions-list .buttons{display:flex;flex-direction:row;align-items:center;justify-content:left;gap:10px}.solutions .solution-item{position:relative;display:flex;flex-direction:column;align-items:left;background:var(--white-2);border:none;border-radius:20px;text-align:left;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;overflow:hidden}.solutions .solution-item:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;filter:grayscale(100%);opacity:0;transition:opacity .3s ease;z-index:0}.solutions .solution-item:hover:before{opacity:1}.solutions .solution-item:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--gradient-red-3);opacity:0;transition:opacity .3s ease;z-index:1}.solutions .solution-item:hover:after{opacity:1}.solutions .solution-item:hover{scale:1.05;transition:scale .5s ease;color:var(--white)}.solutions .solution-item .solution-title{font-size:1.5rem;margin-bottom:2vw;z-index:2}.solutions .solution-item .desc{font-size:.9rem;font-weight:200;color:var(--dark);margin:0;z-index:2}.solutions .solution-item:hover .desc{color:var(--white)}.solutions .solution-content{z-index:10;padding:20px 30px 40px}.solutions .solution-item .solution-image{width:100%;height:200px;object-fit:fill;z-index:9}.view-products-btn{z-index:100;margin-top:30px;padding:10px 20px;background-color:var(--red);color:var(--white);border:none;border-radius:5px;font-size:14px;cursor:pointer;transition:background-color .3s ease}.view-products-btn:hover{background-color:var(--white-2);color:var(--dark)}.view-solution-btn{z-index:100;margin-top:30px;padding:10px 20px;background-color:var(--gray-3);color:var(--white);border:none;border-radius:5px;font-size:14px;cursor:pointer;transition:background-color .3s ease}.view-solution-btn:hover{background-color:var(--white-2);color:var(--dark)}.supplier-page{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background-color:#f5f5f5}.supplier-page iframe{width:100%;height:100%;border:none}:root{--red: #ce3b3f;--red-2: #bf100d;--dark: #1a1a1a;--gray: #cccccc;--gray-2: #6e6e6e;--gray-3: #444444;--white: #ffffff;--white-2: #f5f5f5;--black: #000000;--gradient-red: linear-gradient(to bottom, #c20000b8, #00000000);--gradient-red-2: linear-gradient(to bottom, #41020070, #b31217);--gradient-red-3: linear-gradient(to right, #C32033, #ba1717);--gradient-black: linear-gradient(to bottom, #10101067, #18181865);--gradient-black-2: linear-gradient(to top, #0000008d, #00000000)}body{margin:0;font-family:Kanit,sans-serif;font-weight:300;background-color:var(--white);color:var(--black)}::selection{background:var(--red-2);color:#fff}h1,h2,h3,h4,h5,h6{text-transform:capitalize}.product-list{display:flex;gap:20px;height:80vh;overflow-y:scroll;margin-top:90px;scrollbar-width:none}.side-panel{width:250px;background-color:var(--white-2);color:var(--dark);padding:40px 20px 20px;position:sticky;top:0;height:75vh;overflow-y:scroll;box-shadow:2px 0 5px #0000001a;scrollbar-width:none}.side-panel h3{font-size:18px;font-weight:700;margin-bottom:20px;color:var(--dark);text-transform:uppercase;border-bottom:2px solid #34495e;padding-bottom:10px}.side-panel ul{list-style:none;padding:0;margin:0}.menu-item{display:flex;justify-content:space-between;align-items:center;margin:10px 0;padding:10px;background-color:var(--white);border-radius:5px;cursor:pointer;transition:background-color .3s ease,color .3s ease;font-size:14px}.menu-item .model-count{margin-left:6px}.menu-item:hover{background-color:var(--red);color:var(--white)}.category-button{background:none;border:none;color:inherit;font-size:14px;font-weight:300;cursor:pointer;text-align:left;width:100%}.menu-item.active{background-color:var(--red);color:var(--white)}.toggle-icon{font-size:18px;color:inherit;cursor:pointer;transition:transform .3s ease}.toggle-icon.expanded{transform:rotate(90deg)}.submenu{background-color:var(--white);border-radius:5px}.submenu-button{background:none;border:none;color:var(--dark);font-size:14px;cursor:pointer;text-align:left;width:100%;padding:10px 0 10px 30px;transition:color .3s ease}.submenu-button:hover{color:var(--red)}.submenu-button.active{font-weight:700;color:var(--red)}.products-grid{flex:1;padding:40px 20px 20px;overflow-y:auto}.products-grid h2{margin-bottom:20px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.product-card{cursor:pointer;background-color:#fff;border-radius:10px;box-shadow:0 4px 8px #0000001a;transition:transform .3s ease,box-shadow .3s ease;height:auto;display:flex;flex-direction:column;justify-content:space-between}.product-card:hover{transform:translateY(-5px);box-shadow:0 6px 12px #00000026}.product-tags{display:flex;justify-content:flex-start;gap:10px;padding:10px;background-color:#f8f9fa}.tag{background-color:var(--white-2);color:var(--black);padding:5px 10px;margin-right:4px;border-radius:3px;font-size:10px}.product-image{width:100%;height:200px;padding:40px 0;background-size:contain;background-position:center;background-repeat:no-repeat;border-radius:0!important;background-color:var(--white-2)}.product-content{padding:15px;text-align:left;display:flex;align-items:left;flex-direction:column;justify-content:space-between;height:50%}.product-title{font-size:18px;font-weight:700;margin-bottom:10px;color:var(--dark)}.product-description{font-size:14px;color:var(--gray-2);margin-bottom:20px}.product-footer{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:0}.product-footer .sku{color:var(--red)}.view-button{background-color:var(--red);color:var(--white);border:none;padding:10px 20px;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.view-button:hover{background-color:var(--red-2)}.search-input{width:50%;padding:10px;font-size:16px;border:1px solid #ddd;border-radius:5px;box-shadow:0 2px 5px #0000001a;transition:border-color .3s ease,box-shadow .3s ease;margin-bottom:20px}.search-input:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80;outline:none}.search-input::placeholder{color:var(--gray)}.product-detail-container{display:flex;flex-direction:row;width:100%;height:100vh;overflow:hidden;margin-top:90px;padding-bottom:40px}.product-images{flex:0 0 40%;position:sticky;top:0;height:85vh;display:flex;justify-content:center;align-items:center;overflow-y:auto;scrollbar-width:none;background:var(--white-2)}.image-slider{position:relative;width:80%;height:auto;display:flex;justify-content:center;align-items:center}.product-detail-container .product-image{max-width:90%;min-width:90%;max-height:400px;height:auto;background:var(--white);border-radius:20px!important;object-fit:contain}.arrow-btn{margin:10px}.product-details{padding:40px 60px 200px!important;overflow-y:scroll;scrollbar-width:none;color:var(--dark);height:80vh}.product-details h1{font-size:2rem;margin-bottom:10px}.product-details p{font-size:14px;margin-bottom:20px;color:var(--gray-2)}.product-details h2{font-size:1.5rem;margin-top:20px;margin-bottom:10px;color:var(--red)}.product-details h4{color:var(--gray-3)}.product-details ul{list-style:disc;padding-left:20px}.product-details ul li{font-size:14px;color:var(--gray-2)}.product-details .view-products-link{background:none;color:var(--gray-2);border:none;border-radius:5px;cursor:pointer;width:auto}.product-details .view-products-link:hover{color:var(--red)}.partners-grid{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:20px;width:auto}.partners-container{padding:100px 0;text-align:center;color:var(--dark)}.partners-container h1{margin-bottom:60px}.partner-logo{width:400px;height:auto;transition:opacity .3s ease;background:var(--white);padding:20px}.partner-logo:hover{background-color:var(--white);scale:1.1;transition:scale .3s ease-in-out}.separator{width:2px!important;height:150px;background-color:var(--gray);margin:0 20px}.home-automation{width:100%;overflow-x:hidden}.ha-hero-section{height:400px;width:100vw;background:#181818;background:url(/assets/home-automation-hero-B3_1erAA.jpg) no-repeat center center;background-size:cover;padding:100px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;line-height:50px}.ha-hero-section h1{color:#fff;font-size:60px;font-weight:700;text-align:center;letter-spacing:2px}.ha-hero-section p{color:#fff;font-size:40px;font-weight:100;text-align:center;letter-spacing:2px}.ha-title-paragraph-section{height:auto;display:flex;flex-direction:column;justify-content:center;padding:60px 12vw;background:#fff}.ha-title-paragraph-section h2{font-size:36px;text-align:left}.ha-title-paragraph-section p{font-size:18px;font-weight:200;text-align:left}.ha-title-paragraph-section .detail h3{color:var(--dark);text-decoration:none;font-weight:500}.ha-title-paragraph-section .detail a{color:var(--red-2);text-decoration:none}.ha-3col-grid-section{display:flex;width:100vw;flex-direction:row;flex-wrap:wrap}.ha-grid-item{flex:1;position:relative;background-size:cover;background-position:center;min-width:0;cursor:pointer;transition:filter .3s;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;height:auto}.ha-grid-content{background:#00000074;color:#fff;width:100%;padding:100px 10vw;transition:opacity .3s;text-align:left}.ha-grid-item h3{font-size:28px;margin-bottom:50px;width:300px;line-height:30px}.ha-grid-item p{font-size:16px;margin:0;font-weight:200}.ha-grid-item:hover .ha-grid-content{background:var(--gradient-red-2);color:#fff;opacity:1}.ha-2col-section{display:flex;flex-direction:row;width:100vw;padding:10vh 1vw}.ha-2col-image,.ha-2col-content{flex:1;display:flex;align-items:center;justify-content:center}.ha-2col-image img{width:80%;height:auto;border-radius:20px}.ha-2col-content{flex-direction:column;align-items:flex-start;gap:30px;padding:0 6vw}.ha-2col-content h2{font-size:30px;line-height:30px}.ha-2col-content p{font-size:18px;margin:0;font-weight:200}.ha-fullscreen-image-section{width:100%;overflow:hidden;flex-direction:column;display:flex;align-items:center;justify-content:center;gap:40px}.ha-fullscreen-image-section h1{font-size:40px;font-weight:700;margin-bottom:10px;width:80%;line-height:30px}.ha-fullscreen-img{width:80%;height:auto;object-fit:cover;z-index:1}@media (max-width: 1024px){.ha-3col-grid-section{flex-direction:column}.ha-grid-item{width:100vw;min-width:100vw;max-width:100vw}}
