/* Kwality Coil Products (P) LTD - static PHP/HTML site */
:root{
  --primary:#1b98e0; --secondary:#004e7a; --text:#333; --alt:#f5f5f5;
  --footer-top:#333; --footer-bottom:#2b2b2b; --wrap:1200px;
  --font-body:'Open Sans',Arial,Helvetica,sans-serif;
  --font-head:'Poppins','Open Sans',Arial,Helvetica,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;font-family:var(--font-body);font-size:16px;line-height:1.75;color:var(--text);background:#fff;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none;transition:color .2s}
a:hover{color:var(--secondary)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);color:var(--text);line-height:1.3;margin:0 0 .6em;font-weight:600}
h1{font-size:40px}h2{font-size:30px}h3{font-size:26px}h4{font-size:22px}h5{font-size:20px}h6{font-size:17px}
p{margin:0 0 1.2em}
ul{margin:0;padding:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.12)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:100px;max-width:1300px}
.logo img{height:70px;width:auto}
.main-nav ul{list-style:none;display:flex;gap:6px;margin:0}
.main-nav a{display:block;padding:8px 14px;font-size:15px;font-weight:400;text-transform:uppercase;color:var(--text);letter-spacing:.2px}
.main-nav a:hover,.main-nav a.active{color:var(--primary)}
.nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:26px;height:3px;background:var(--text);margin:5px 0;transition:.25s}
@media(max-width:900px){
  .site-header .wrap{height:76px}
  .logo img{height:54px}
  .nav-toggle{display:block}
  .main-nav{position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 8px 12px rgba(0,0,0,.12);max-height:0;overflow:hidden;transition:max-height .3s}
  .main-nav.open{max-height:400px}
  .main-nav ul{flex-direction:column;gap:0;padding:6px 0}
  .main-nav a{padding:13px 24px;border-top:1px solid #eee}
  .nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* ---------- Hero slider ---------- */
.hero{position:relative;width:100%;aspect-ratio:1920/800;background:#e7e7e7 center/cover no-repeat;overflow:hidden}
.hero .layer{position:absolute;overflow:hidden;pointer-events:none}
.hero .layer img{width:100%;height:auto;display:block;will-change:transform,opacity}
.hero .hero-link{position:absolute;z-index:20;left:78%;top:52%;width:15%;height:12%}
@media(max-width:700px){.hero{aspect-ratio:1920/800;min-height:190px;background-size:cover}}

/* ---------- Sections ---------- */
section.row{padding:50px 0;position:relative}
section.row.row-alt{background:var(--alt)}
section.row.pad-lg{padding:100px 0}
section.row.pad-md{padding:60px 0}
section.row.pad-sm{padding:30px 0}
.bg-img{background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff}
.bg-img h1,.bg-img h2,.bg-img h3,.bg-img h4,.bg-img h5,.bg-img h6{color:#fff}
.bg-fixed{background-attachment:fixed}
@media(max-width:1024px){.bg-fixed{background-attachment:scroll}}
.uh{margin-bottom:10px}
.uh h1,.uh h2,.uh h3,.uh h4,.uh h5{margin:0 0 14px;font-weight:600}
.uh-center{text-align:center}
.uh-left{text-align:left}
.dline{display:block;width:100px;height:5px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.9}
.uh-center .dline{margin:0 auto}
.uh.on-dark,.uh.on-dark h2{color:#fff}
.cols{display:flex;flex-wrap:wrap;margin:0 -15px}
.cols>.col{padding:0 15px;flex:0 0 100%;max-width:100%}
@media(min-width:768px){
  .c-1-2{flex:0 0 50%!important;max-width:50%!important}
  .c-1-3{flex:0 0 33.3333%!important;max-width:33.3333%!important}
  .c-1-4{flex:0 0 25%!important;max-width:25%!important}
  .c-2-5{flex:0 0 40%!important;max-width:40%!important}
  .c-3-5{flex:0 0 60%!important;max-width:60%!important}
  .c-2-3{flex:0 0 66.6667%!important;max-width:66.6667%!important}
}
.pic{margin:0 0 10px;text-align:center}
.pic img{margin:0 auto}
.pic.shadow img,.shadow-box{box-shadow:0 8px 22px rgba(0,0,0,.18);background:#fff}
.pic a{display:inline-block;cursor:zoom-in}
.cap{text-align:center;margin:12px 0 0;font-size:16px}
.txt p:last-child{margin-bottom:0}
.btn{display:inline-block;background:var(--primary);color:#fff!important;padding:.8em 1.8em;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;border:0;border-radius:0;cursor:pointer;transition:.2s;font-family:var(--font-body);line-height:1.4}
.btn:hover{background:var(--secondary)}
.btn-outline{background:transparent;border:2px solid #fff;padding:.7em 1.7em}
.btn-outline:hover{background:#fff;color:var(--text)!important}
.btn-red{background:#e02020}
.center{text-align:center}

/* home */
.welcome p{text-align:center}
.iconbox-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 30px}
.iconbox{display:flex;gap:14px}
.iconbox svg{flex:0 0 25px;width:25px;height:25px;margin-top:5px;color:var(--primary)}
.iconbox h5{margin:0 0 4px;font-size:20px}
.iconbox p{margin:0;font-size:15px;line-height:1.65}
@media(max-width:900px){.iconbox-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.iconbox-grid{grid-template-columns:1fr}}
.overlay-dark{background-image:linear-gradient(rgba(51,51,51,.8),rgba(51,51,51,.8)),var(--bg)}
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 30px;margin-top:10px}
.prod-grid figure{margin:0;text-align:center}
.prod-grid img{box-shadow:0 8px 22px rgba(0,0,0,.35);width:100%;height:auto;background:#fff}
.prod-grid figcaption{margin-top:12px;font-family:var(--font-head);font-size:17px;font-weight:600;color:#fff}
@media(max-width:900px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.prod-grid{gap:26px 16px}.prod-grid figcaption{font-size:15px}}

/* carousel */
.carousel{position:relative;padding:0 46px;margin-top:20px}
.car-view{overflow:hidden}
.car-track{display:flex;transition:transform .55s ease}
.car-item{flex:0 0 20%;padding:0 12px}
.car-item a{display:block;cursor:zoom-in}
.car-item img{width:100%;aspect-ratio:5/4;object-fit:contain;margin:0 auto}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:transparent;color:#777;cursor:pointer;font-size:0;padding:0}
.car-btn:hover{color:var(--primary)}
.car-btn svg{width:22px;height:22px}
.car-prev{left:4px}.car-next{right:4px}
@media(max-width:900px){.car-item{flex-basis:33.3333%}}
@media(max-width:600px){.car-item{flex-basis:50%}.carousel{padding:0 34px}}

/* cert */
.cert-row{display:flex;flex-wrap:wrap;align-items:center;gap:30px}
.cert-row>div{flex:1 1 320px}
.cert-row .cert-txt p{text-align:justify;line-height:2.2;margin-bottom:26px}
.cert-img{text-align:center}
.cert-img img{max-width:295px;width:100%;margin:0 auto;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.cert-img a{display:inline-block;cursor:zoom-in}

/* ---------- Title bar ---------- */
.titlebar{background:#2a3a48 center/cover no-repeat;color:#fff;text-align:center;padding:110px 20px 90px}
.titlebar h1{color:#fff;font-size:40px;text-transform:uppercase;font-weight:600;margin:0 0 6px}
.crumbs{font-size:14px;color:#fff;opacity:.95}
.crumbs a{color:#fff}
.crumbs a:hover{color:var(--primary)}
.crumbs .sep{margin:0 8px;opacity:.8}
@media(max-width:700px){.titlebar{padding:70px 16px 60px}.titlebar h1{font-size:28px}}

/* ---------- Product layout ---------- */
.with-side{display:flex;gap:40px;align-items:flex-start;padding:50px 20px 70px}
.sidebar{flex:0 0 26%;max-width:26%}
.sidebar h4{font-size:16px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px}
.cat-list{list-style:none}
.cat-list li{margin-bottom:2px}
.cat-list a{display:block;padding:8px 14px;background:#b4b4b4;color:#fff;font-size:14px;line-height:1.5}
.cat-list a:hover{background:#8f8f8f;color:#fff}
.cat-list a.active{background:var(--primary);color:#fff}
.side-main{flex:1 1 0;min-width:0}
.side-main .row-inner{margin-bottom:26px}
.side-main .cols{margin-bottom:10px}
.gear-list{list-style:none;padding:0;margin:0 0 1em}
.gear-list li{position:relative;padding-left:30px;margin-bottom:8px;line-height:1.7}
.gear-list li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2355bcff'><path d='M19.4 13a7.5 7.5 0 000-2l2.1-1.6a.5.5 0 00.1-.6l-2-3.5a.5.5 0 00-.6-.2l-2.5 1a7.3 7.3 0 00-1.7-1l-.4-2.6a.5.5 0 00-.5-.4h-4a.5.5 0 00-.5.4l-.4 2.6c-.6.3-1.2.6-1.7 1l-2.5-1a.5.5 0 00-.6.2l-2 3.5a.5.5 0 00.1.6L4.6 11a7.5 7.5 0 000 2l-2.1 1.6a.5.5 0 00-.1.6l2 3.5c.1.2.4.3.6.2l2.5-1c.5.4 1.1.7 1.7 1l.4 2.6c0 .2.3.4.5.4h4c.3 0 .5-.2.5-.4l.4-2.6c.6-.3 1.2-.6 1.7-1l2.5 1c.2.1.5 0 .6-.2l2-3.5a.5.5 0 00-.1-.6L19.4 13zM12 15.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7z'/></svg>")}
.side-main .uh{margin-top:6px}
.side-main .uh h5,.side-main .uh h3{margin-bottom:10px}
.side-main .pic img{max-height:340px;width:auto}
@media(max-width:900px){
  .with-side{flex-direction:column;gap:26px;padding:34px 20px 50px}
  .sidebar{flex:1 1 auto;max-width:100%;width:100%}
  .cat-list{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
  .cat-list li{margin:0}
}
@media(max-width:480px){.cat-list{grid-template-columns:1fr}}

/* page content (about/infra) */
.page-body section.row:first-child{padding-top:50px}
.page-body .txt p{text-align:center}
.page-body .bg-img .txt p{text-align:center}
.tabnav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 26px;padding:20px 0 0;list-style:none}
.tabnav a{color:#777;font-size:14px}
.tabnav a:hover{color:var(--primary)}
.infra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px}
.infra-grid figure{margin:0;text-align:center}
.infra-grid img{width:100%;height:auto;box-shadow:0 8px 22px rgba(0,0,0,.18);background:#fff}
.infra-grid figcaption{margin-top:12px;font-family:var(--font-head);font-size:16px;font-weight:600}
@media(max-width:800px){.infra-grid{grid-template-columns:repeat(2,1fr);gap:26px 16px}}
@media(max-width:420px){.infra-grid figcaption{font-size:14px}}

/* contact */
.contact-info .ci{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.contact-info .ci .ic{flex:0 0 38px;width:38px;height:38px;border:1px solid var(--secondary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--secondary)}
.contact-info .ci .ic svg{width:16px;height:16px}
.contact-info a{color:var(--text)}
.contact-info a:hover{color:var(--primary)}
.contact-info address{font-style:normal;line-height:1.7;padding-top:4px}
.cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform textarea{width:100%;border:1px solid #ddd;background:#f5f5f5;padding:11px 14px;font:inherit;font-size:15px;color:var(--text);margin-bottom:16px;border-radius:0;outline:0;transition:.2s}
.cform input:focus,.cform textarea:focus{border-color:var(--primary);background:#fff}
.cform textarea{height:130px;resize:vertical}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .btn:disabled{opacity:.6;cursor:wait}
.form-msg{margin-top:14px;padding:12px 16px;font-size:15px;display:none;line-height:1.5}
.form-msg.ok{display:block;background:#e6f6ea;border:1px solid #9fd8ac;color:#1d6a30}
.form-msg.err{display:block;background:#fdeaea;border:1px solid #f0a8a8;color:#a12020}
.map-wrap iframe{display:block;width:100%;height:400px;border:0}
@media(max-width:767px){.contact-info{margin-bottom:34px}.map-wrap iframe{height:320px}}

/* ---------- Footer ---------- */
.footer-top{background:var(--footer-top);color:#d9d9d9;padding:50px 0 40px}
.footer-top h4{color:#fff;font-size:20px;margin-bottom:16px}
.footer-grid{display:grid;grid-template-columns:1fr 1.25fr 1.5fr;gap:40px}
.footer-top a{color:#fff}
.footer-top a:hover{color:var(--primary)}
.f-item{display:flex;gap:12px;margin-bottom:14px;line-height:1.6;font-size:15px}
.f-item svg{flex:0 0 18px;width:18px;height:18px;margin-top:4px;color:#fff}
.socials{display:flex;gap:6px;margin-top:20px}
.socials a{width:34px;height:34px;border-radius:50%;background:#444;display:flex;align-items:center;justify-content:center;color:#ccc}
.socials a:hover,.socials a.hl{background:var(--secondary);color:#fff}
.socials svg{width:16px;height:16px}
.footer-top p{text-align:justify;font-size:15px;margin-bottom:18px}
.prod-cols{list-style:none;columns:2;column-gap:36px;font-size:15px}
.prod-cols li{margin-bottom:5px;break-inside:avoid}
.prod-cols a{color:#d9d9d9}
.footer-btn{display:inline-block;background:var(--secondary);color:#fff!important;padding:.55em 1.4em;font-size:14px;font-weight:600;text-transform:uppercase}
.footer-btn:hover{background:var(--primary)}
.footer-bottom{background:var(--footer-bottom);color:#ccc;padding:15px 0;font-size:14px}
.footer-bottom .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.footer-bottom a{color:#fff}
.footer-bottom a:hover{color:var(--primary)}
.footer-bottom ul{list-style:none;display:flex;gap:22px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:last-child{grid-column:1/-1}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr;gap:30px}.footer-bottom .wrap{justify-content:center;text-align:center}}

/* floating */
.wa-float{position:fixed;left:24px;bottom:28px;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:2px 2px 6px rgba(0,0,0,.35);z-index:90}
.wa-float:hover{color:#fff;background:#1ebe5b}
.wa-float svg{width:32px;height:32px}
.to-top{position:fixed;right:22px;bottom:26px;width:42px;height:42px;background:#333;color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.3s;z-index:90}
.to-top.show{opacity:.85;visibility:visible}
.to-top:hover{background:var(--primary);opacity:1}
.to-top svg{width:18px;height:18px}
@media(max-width:600px){.wa-float{left:14px;bottom:16px;width:50px;height:50px}.wa-float svg{width:28px;height:28px}.to-top{right:12px;bottom:18px}}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:1000;padding:30px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(92vw,900px);max-height:90vh;width:auto;height:auto;box-shadow:0 0 30px rgba(0,0,0,.6)}
.lightbox .lb-close{position:absolute;top:14px;right:20px;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;padding:6px 10px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}