:root{--primary-color:#057176;--primary-light:#E1BC74;--primary-dark:#00695c;--secondary-color:#ff9800;--grey-color:#666;--green-xs:#f3faf6;--blue-bg:#f0e8e2;--text-rs:#181C24;--text-color:#333;--light-color: #f1f8e9;--light-gray:#f5f5f5;--white:#ffffff;--shadow:0 4px 10px rgba(0, 0, 0, 0.1);--transition:all 0.3s ease;
--green:#0f583c;--deep:#083629;--lime:#beda4b;--ink:#17231e;--muted:#607068;--line:#dce4df;--tint:#f1f5f2;--white:#fff
}
*{margin:0;padding:0;box-sizing:border-box}

a{text-decoration:none;color:inherit}
ul,li{list-style:none}
img{max-width:100%;height:auto}
html{scroll-behavior:smooth}
body{ font-family:Arial,Helvetica,sans-serif;line-height:1.65;color:var(--text-color);background-color:var(--white); font-size:16px}
a{text-decoration:none;color:inherit}
ul,li{list-style:none}
img{max-width:100%;height:auto}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:8px 30px;background-color:var(--primary-color);color:var(--white);border:none;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:600;transition:var(--transition)}
.btn:hover{background-color:var(--secondary-color);transform:translateY(-3px);box-shadow:var(--shadow)}
header{background:var(--white); position: fixed; top: 0; left: 0;  width: 100%; z-index: 1000;transition:var(--transition);box-shadow:var(--shadow)}
.headertop{background:var(--primary-color); color:var(--white); padding:2px 0; font-size:1rem; font-weight:600;height:50px; line-height:50px;}
.headertop i{ padding:0 5px; margin-left:10px;}
.headerbs{display: flex;   justify-content: space-between;   align-items: center;  transition: var(--transition)}
.topem{ text-align:center}
.header-container{display:flex;justify-content:space-between;align-items:center;transition:var(--transition); height:70px}
.logo{font-size:1.8rem;display:flex;align-items:center}
.logo img{ height:50px; width:auto}
.nav-menu{display:flex;}
.nav-item{position:relative;margin-left:20px;line-height:35px;color:var(--text-color); font-weight:600; font-size:1.1rem}
.nav-item:hover,.dropdown li a:hover{ color:var(--secondary-color)}
.nav-item i{ margin-left:10px;}
.nav-link{padding:10px 0;transition:var(--transition);}
.nav-link:hover{color:var(--secondary-color)}
.dropdown{position:absolute;top:150%;left:0;background-color: rgb(57 162 177 /.88);box-shadow:var(--shadow);min-width:250px;opacity:0;visibility:hidden;transform:translateY(10px);transition:var(--transition);z-index:100}
.dropdown li a{ width:100%; line-height:180%; display:block;color:var(--white)}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-item{padding:10px;border-bottom:1px solid #eee;transition:var(--transition)}
.dropdown-item:hover{background-color:var(--light-gray);color:var(--primary-color)}
.nav-menu li{ position:relative}
.search-icon{cursor:pointer;font-size:1.2rem;margin-left:20px;transition:var(--transition)}
.search-icon:hover{color:var(--primary)}
.search-container{position:absolute;top:100%;right:0;background:#fff;padding:15px;box-shadow:var(--shadow);border-radius:4px;opacity:0;visibility:hidden;transform:translateY(10px);transition:var(--transition);z-index:100; display:flex;}
.search-container.active{opacity:1;visibility:visible;transform:translateY(0)}
.search-container input{padding:10px 15px;width:250px;border:1px solid var(--light-gray);border-radius:4px;font-size:1rem;}
.search-container button{padding:10px 15px;background:var(--primary-color);color:#fff;border:none;border-radius:4px;margin-left:5px;cursor:pointer; }
.mobile-toggle{display:none;font-size:1.5rem;cursor:pointer}
.topbtn{ margin:5px 0 0 20px}
.topbtn a{ padding: 2px 10px; text-align: center; background:var(--secondary-color); border-radius: 20px; color: #fff;}
.wrap{width:min(1200px,calc(100% - 48px));margin-inline:auto}
.topbar{color:#d7e3dc;background:var(--deep);font-size:11px}
.topbar__inner{display:flex;min-height:34px;align-items:center;justify-content:space-between}
.topbar__inner span i{ padding:0 10px 0 20px}
h1,h2,h3,p{margin-top:0}
.btn{display:inline-flex;min-height:54px;padding:0 24px;border:1px solid transparent;align-items:center;justify-content:center;gap:16px;color:#fff;font-size:13px;font-weight:750;text-decoration:none;transition:.2s ease}
.btn:hover{transform:translateY(-2px)}
.btn--lime{color:var(--deep);background:var(--lime)}
.btn--outline-light{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.03)}
.btn--light{color:var(--deep);background:#fff}
.certification .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}
.field .btn{border:0;cursor:pointer}
.footer{padding:70px 0 25px;color:#aebfb6;background:#071f18}
.footer__grid{display:grid;grid-template-columns:1.4fr .6fr .7fr 1fr;gap:55px}
.logo--light{display:inline-block;margin-bottom:20px;color:#fff}
.logo--light span{color:#aebfb6}
.footer h3{margin-bottom:20px;color:#fff;font-size:13px}
.footer a,.footer p{display:block;color:#aebfb6;font-size:12px;line-height:2;text-decoration:none}
.footer__bottom{display:flex;margin-top:50px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);justify-content:space-between;font-size:10px}
.social-links{display:flex;gap:1rem; margin-top:15px}
.social-links a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:var(--light-color);color:var(--primary-color);border-radius:50%;text-decoration:none;transition:var(--transition); font-size:::;rem}
.social-links a:hover{background-color:var(--primary-light);color:#fff}
@media(max-width:980px){
.certification .wrap,.custom-grid,.factory-grid,.quote__grid{grid-template-columns:1fr}
.footer__grid{grid-template-columns:1.2fr 1fr 1fr}
.footer__grid>div:last-child{grid-column:1/4}
}
@media(max-width:640px){
.wrap{width:min(100% - 30px,1200px)}
.topbar__inner span:last-child{display:none}
.certification .wrap,.custom-grid,.quote__grid{gap:45px}
.footer__grid{grid-template-columns:1fr}
.footer__grid>div:last-child{grid-column:auto}
.footer__bottom{gap:10px;flex-direction:column}
}
.btn--dark{margin-top:20px;color:#fff;background:var(--green)}
.btn,.certification__matrix span,.evidence-grid a,.evidence-grid p,.evidence-grid small,.eyebrow,.factory-points li>span,.factory-points p,.factory-stamp small,.factory-stamp span,.field input,.field label,.field select,.field small,.field textarea,.footer a,.footer h3,.footer p,.footer__bottom,.hero__side-note span,.hero__side-note strong,.hero__trust,.industry-grid p,.industry-grid span,.logo span,.menu a,.metrics span,.product-cards p,.product-cards small,.product-card__body>span,.steps li>span,.steps p,.text-link,.topbar,.topbar__inner{font-size:16px}
.product-info .btn{ padding: 8px 20px; border-radius:20px; margin:0 auto; display:inline-block}
.carousel-container .btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.8);border:none;width:30px;height:60px;border-radius:50%;font-size:24px;color:#333;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .3s ease;z-index:10;box-shadow:0 3px 10px rgba(0,0,0,.2)}
.carousel-container .btn:hover{background:rgba(255,255,255,.95);transform:translateY(-50%) scale(1.1)}
.prolistbt .trigger-btn{border-radius: 10px;padding: 5px 10px; flex: 1; margin-right:10px;font-size:0.8rem}
.trigger-btn i{ font-size:0.8rem}
.form-group{margin-bottom:1.5rem; }
.form-group label{display:block;margin-bottom:.5rem;font-weight:500}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.8rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;transition:var(--transition)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary-color);outline:0;box-shadow:0 0 0 2px rgba(46,125,50,.2)}
.form-group textarea{height:150px;resize:vertical}
.form-group a{ display:block; width:100%; text-align:right; font-size:0.8rem;color:rgba(0,0,0,0.5)}
.form-row .form-group{flex:1}
.submit-btn{background-color:var(--primary-color);color:#fff;border:none;padding:.8rem 1.5rem;border-radius:4px;cursor:pointer;font-weight:500;transition:var(--transition);width:100%;font-size:1rem}
.submit-btn:hover{background-color:var(--dark-color)}
.custom-service .btn{background-color:var(--secondary-color);color:var(--text-color)}
.custom-service .btn:hover{background-color:#ffb74d}
footer{background:rgb(24 48 48);color:var(--white);padding:60px 0 20px}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:70px;margin-bottom:40px}
.footer-column h3{font-size:1.3rem;margin-bottom:20px;color:var(--primary-light)}
.ftct li{    margin-bottom: 15px; display: flex; align-items: flex-start; color: :;}
.ftct li  i { margin-right: 10px;color: var(--primary-light); margin-top: 5px;}
.footer-links li{margin-bottom:10px}
.footer-links a{transition:var(--transition)}
.footer-links a:hover{color:var(--primary-light)}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid rgb(31 41 55)}
.footeco{ width:90%; max-width:805px; margin:15px auto;}
.footeco img{ width:100%; height:auto; display:block}
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:2000;opacity:0;visibility:hidden;transition:var(--transition)}
.modal.active{opacity:1;visibility:visible}
.modal-content{background-color:var(--white);border-radius:8px;padding:30px;max-width:500px;width:90%;position:relative;transform:translateY(20px);transition:var(--transition)}
.modal.active .modal-content{transform:translateY(0)}
.modal-close{position:absolute;top:15px;right:15px;font-size:1.5rem;cursor:pointer;color:#666}
.modal h2{margin-bottom:20px;color:var(--primary-dark)}
.form-group{margin-bottom:20px}
.form-group label{display:block;margin-bottom:8px;font-weight:600}
.form-group input,.form-group textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-family:inherit}
.form-group textarea{height:120px;resize:vertical}
.cookie-modal{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background-color:var(--white);border-radius:8px;padding:20px;width:95%;box-shadow:0 5px 15px rgba(0,0,0,.2);z-index:2000;display:none}
.cookie-modal.active{display:block}
.cookie-content{display:flex;align-items:center;gap:15px}
.cookie-text{flex:1}
.cookie-text p{margin-bottom:10px}
.cookie-buttons{display:flex;gap:10px}
.cookie-btn{padding:8px 15px;border:none;border-radius:4px;cursor:pointer;font-weight:600;transition:var(--transition)}
.cookie-accept{background-color:var(--primary-color);color:var(--white)}
.cookie-settings{background-color:transparent;color:var(--primary-color);border:1px solid var(--primary-color)}
.chat-widget { position: fixed;  right: 10px;  bottom:30%;   z-index: 9999;}
.chat-item { }
.chat-item  a{ display:block;background-color:var(--primary-color); width:50px; height:50px; border-radius:50%;box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); margin-bottom:15px;text-align:center}
.chat-item i{ line-height:50px; font-size:1.8rem}
.whatsapp-widget{position:fixed;bottom:30px;right:30px;z-index:1000}
.whatsapp-button{width:60px;height:60px;background-color:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px rgba(37,211,102,.3);transition:all .3s ease;position:relative;z-index:2}
.whatsapp-button:hover{transform:scale(1.1);box-shadow:0 6px 25px rgba(37,211,102,.4)}
.whatsapp-button i{color:#fff;font-size:32px}
.whatsapp-chat-box{position:absolute;bottom:70px;right:0;width:350px;max-width:90vw;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.2);overflow:hidden;transform:translateY(0) scale(1);opacity:1;visibility:visible;transition:all .3s ease;z-index:1}
.whatsapp-chat-box.closed{transform:translateY(20px) scale(.9);opacity:0;visibility:hidden}
.chat-header{background:linear-gradient(135deg,#075e54 0,#128c7e 100%);color:#fff;padding:20px;display:flex;align-items:center;justify-content:space-between;position:relative}
.chat-header-info{display:flex;align-items:center;gap:12px}
.chat-header-icon{font-size:24px;background:rgba(255,255,255,.2);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.chat-header-text h3{font-size:16px;font-weight:600}
.chat-header-text p{font-size:12px;opacity:.8;margin-top:2px}
@keyframes pulse{0%{opacity:1}
50%{opacity:.5}
100%{opacity:1}
}
.close-button{background:0 0;border:none;color:#fff;font-size:20px;cursor:pointer;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s;margin-left:10px}
.close-button:hover{background:rgba(255,255,255,.1)}
.chat-content{}
.welcome-message{background:#ece5dd;padding:18px; position:relative; display:flex; z-index:2; margin-bottom:20px}
.whatsuse{ width:45px;  height:45px;flex-shrink: 0; }
.whatsuse img{ width:100% ; height: auto}
.whatscon{margin: 8px 5px;padding: 6px 8px 8px 9px; background-color: #dcf8c6;color:#4d4b49;font-size:14px;line-height:1.5; position:relative}
.whatscon:after{   content: ""; position: absolute;  top: 0px;  height: 18px;  width: 9px;  background-color: #dcf8c6;right: 99.7%;  clip-path: polygon(0% 0%, 100% 0%, 100% 50%);-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%);}
.welcome-message:after{background: url('https://www.jxdeco-packaging.com/template/jxd/pc/skin/images/wa_bg.png') repeat-y; opacity:0.1; position:absolute; top:0; left:0; content:''; width:100%; height:100%; z-index:-1}
.whatsapp-link{ text-align:center;background:linear-gradient(135deg,#25d366 0,#128c7e 100%);color:#fff;text-decoration:none;padding:5px 28px;border-radius:25px;font-weight:600;transition:all .3s ease;border:none;cursor:pointer;font-size:15px;width:80%; margin:0 auto; display:block }
.whatsapp-link:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,211,102,.4)}
.whatsapp-link i{font-size:22px}
.chat-footer{text-align:center;margin-top:15px;color:#666;font-size:12px}
@media (max-width:480px){
.whatsapp-widget{bottom:20px;right:20px}
.whatsapp-chat-box{width:300px;max-width:calc(100vw - 40px)}
.whatsapp-button{width:55px;height:55px}
}
.custor{ position: fixed;  right: 10px;  bottom: 30%; transform: translateY(-50%);  overflow: hidden;    z-index: 9999;  cursor: pointer;}
.custor a{ color:#fff}
.custorimg{box-shadow: 0 4px 20px rgba(37, 211, 102, .3); width:70px; height:70px; margin:0 auto; border-radius:50%;background: var(--primary-color)}
.custorimg img{ width:70px; height:70px; margin:0 auto; display:block; }
.custorwq{ background-color: #25d366; display: flex; align-items: center; justify-content: center;  cursor: pointer; margin-top:10px; padding:5px 15px; border-radius:25px; height:30px}
.custorwq i{ margin-right:10px; font-size:1.2rem}
.subtitle{color:#7f8c8d;font-size:1.2rem;margin-bottom:40px;max-width:600px;margin-left:auto;margin-right:auto}
.trigger-btn{display:inline-flex;align-items:center;gap:10px;background-color: var(--secondary-color);color:#fff;border:none;padding:10px 32px;font-size:1.2rem;border-radius:50px;cursor:pointer;transition:all .3s ease;}
.trigger-btn:hover{transform:translateY(-3px);box-shadow:0 8px 10px rgba(255,152,0,.5)}
.trigger-btn:active{transform:translateY(1px)}
.trigger-btn i{font-size:1.3rem}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);z-index:998;opacity:0;visibility:hidden;transition:all .3s ease}
#message-toggle:checked~.modal-overlay{opacity:1;visibility:visible}
.message-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);width:90%;max-width:500px;background:#fff;border-radius:15px;box-shadow:0 15px 40px rgba(0,0,0,.2);z-index:999;opacity:0;visibility:hidden;transition:all .4s cubic-bezier(.175, .885, .32, 1.275);overflow:hidden}
#message-toggle:checked~.message-modal{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.modal-header{background:var(--primary-color);color:#fff;padding:20px 30px;display:flex;justify-content:space-between;align-items:center}
.modal-header h2{font-size:1.8rem;font-weight:600}
.close-btn{background:0 0;border:none;color:#fff;font-size:1.8rem;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .3s}
.close-btn:hover{background-color:rgba(255,255,255,.2)}
.modal-body{padding:30px}
.form-group{margin-bottom:20px;text-align:left}
.form-group label{display:block;margin-bottom:8px;color:#2c3e50;font-weight:600;font-size:1rem}
.form-control{width:100%;padding:14px 16px;border:2px solid #e1e5eb;border-radius:8px;font-size:1rem;transition:border-color .3s}
.form-control:focus{outline:0;border-color: var(--primary-color)}
.submit-btn{display:block;width:100%;background:var(--primary-light);color:#fff;border:none;padding:16px;font-size:1.1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .3s ease;margin-top:10px; text-align:center}
.submit-btn:hover{background:var(--primary-color);transform:translateY(-2px);box-shadow:0 5px 15px rgba(5,113,118,.3)}
.submit-btn:active{transform:translateY(0)}
textarea.form-control { min-height: 150px;resize: vertical; font-family:inherit;}
@media (max-width:768px){
.subtitle{font-size:1rem}
}
@media (max-width:480px){
.modal-body{padding:20px}
.modal-header{padding:15px 20px}
.modal-header h2{font-size:1.5rem}
}
.message-modal.closing{animation:modalClose .3s forwards}
@keyframes modalClose{from{transform:translate(-50%,-50%) scale(1);opacity:1}
to{transform:translate(-50%,-50%) scale(.7);opacity:0}
}
@media (max-width:768px){
.mobile-toggle{display:block}
.nav-menu{position:fixed;top:120px;left:0;width:100%;background-color:var(--white);flex-direction:column;padding:20px 10px 20px 30px;box-shadow:0 10px 10px rgba(0,0,0,.1);transform:translateY(-100%);opacity:0;visibility:hidden;transition:var(--transition);z-index:999}
.nav-menu.active{transform:translateY(0);opacity:1;visibility:visible}
.nav-item{margin:10px 0}
.nav-item a,.dropdown li a { color:var(--primary-color)}
.dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background-color:var(--light-gray);margin:10px 0 0 10px}
.nav-item:hover .dropdown{display:block}
.search-container{margin:15px 0 0;width:80%}
.search-box{margin:0;width:100%}
.search-box.active{width:100%}
.cookie-content{flex-direction:column;text-align:center}
.carousel-container.btn { width: 40px;height: 40px; font-size: 18px;}
}
@media (max-width:576px){
.carousel-container .btn { width: 35px;height: 35px; font-size: 18px;}
.btn{ padding:0}
}