/*
Theme Name: HRA Enterprises
Description: Theme for HRA Enterprises, Transformer & HT Panel Service, Perumbavoor, Kerala.
Version: 1.0
Author: HRA Enterprises
Text Domain: hra
*/

:root{--g:#0f7a3a;--gd:#0a3d24;--gl:#e9f5ee;--ink:#1e2a24;--mut:#55635b;--ln:#dbe5df}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font:400 16.5px/1.65 Inter,Arial,sans-serif;color:var(--ink);padding-bottom:60px}
h1,h2,h3{line-height:1.15;color:var(--gd);font-weight:700}a{color:inherit}
:focus-visible{outline:3px solid var(--g);outline-offset:2px}img{display:block;max-width:100%}
.w{max-width:1100px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 1px 0 var(--ln)}
header .w{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;min-height:64px;gap:4px 16px}
.logo{font:800 26px Inter,sans-serif;text-decoration:none;color:var(--g);letter-spacing:1px;line-height:1}
.logo small{display:block;font:500 9.5px Inter,sans-serif;color:var(--gd);letter-spacing:0}
nav{display:flex;order:3;width:100%;gap:20px;font-size:14.5px;overflow-x:auto;white-space:nowrap;padding-bottom:8px}
nav a{text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}nav a.on{color:var(--g);border-color:var(--g);font-weight:600}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;font:600 15px Inter,sans-serif;text-decoration:none;border-radius:50px;border:2px solid var(--g);background:var(--g);color:#fff;cursor:pointer;transition:.25s}
.btn:hover{background:var(--gd);border-color:var(--gd);transform:translateY(-2px)}.btn.l{background:#fff;color:var(--g)}.btn.l:hover{color:#fff}
.hero,.ph{background:linear-gradient(90deg,#fff 0,#fff 36%,rgba(255,255,255,.55) 62%,rgba(255,255,255,0) 100%),url(images/hero.jpg) right center/cover,var(--gl);overflow:hidden}
.hero{padding:72px 0 80px}.ph{padding:52px 0}
.kick{color:var(--g);font-weight:700;letter-spacing:2px;font-size:13px;text-transform:uppercase;margin-bottom:8px}
.hero h1{font-size:clamp(36px,7vw,58px);max-width:11ch;margin-bottom:14px}.ph h1{font-size:clamp(32px,6vw,48px)}
.hero p,.ph p{max-width:30ch;font-size:18px;margin-bottom:24px}.ph p{margin:12px 0 0}
.hero>.w>*,.ph>.w>*{animation:up .8s ease both}.hero .btn{animation-delay:.2s}
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
section{padding:60px 0}.alt{background:var(--gl)}.c{text-align:center}
h2{font-size:clamp(26px,4.5vw,36px);margin-bottom:12px}.sub{max-width:60ch;color:var(--mut);margin:0 auto 28px}
.grid{display:grid;gap:18px}
.card{background:#fff;border:1px solid var(--ln);border-radius:10px;overflow:hidden;text-decoration:none;transition:.3s;display:block}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(10,61,36,.14);border-color:var(--g)}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover}.card div{padding:16px 18px 20px}.card h3{font-size:19px;margin-bottom:4px}.card p{font-size:15px;color:var(--mut)}
.ic{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ic span{background:var(--gl);border-radius:10px;padding:18px 10px;text-align:center;font-weight:600;font-size:14.5px;color:var(--gd)}.ic i{display:block;font-style:normal;font-size:26px;color:var(--g)}
.two{display:grid;gap:30px;align-items:center}.two img{border-radius:10px;width:100%}
.tick{list-style:none;display:grid;gap:8px;margin:14px 0 22px}.tick li:before{content:"\2713";color:var(--g);font-weight:700;margin-right:10px}
.band{background:linear-gradient(135deg,var(--gd),#0f5a32);color:#fff;padding:44px 0}.band h2{color:#fff}
.band .w{display:grid;gap:18px;align-items:center}.band p{opacity:.9}.band a.t{font-size:22px;font-weight:700;text-decoration:none;display:block;margin-bottom:12px}
form{display:grid;gap:12px}label{font-weight:600;font-size:14.5px;display:grid;gap:4px}
input,select,textarea{font:inherit;padding:11px 13px;border:1px solid #aebdb4;border-radius:8px;width:100%}
footer{background:var(--gd);color:#cfe3d6;padding:28px 0;font-size:14.5px;text-align:center}footer a{margin:0 10px}footer b{color:#fff}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);background:var(--gd)}
.bar a{padding:15px 4px;text-align:center;color:#fff;text-decoration:none;font-weight:600;border-right:1px solid rgba(255,255,255,.15)}.bar a:nth-child(2){background:var(--g)}
.rv{opacity:0;transform:translateY(24px);transition:.7s}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
@media(min-width:760px){nav{order:0;width:auto;padding-bottom:0}.ic{grid-template-columns:repeat(4,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.two{grid-template-columns:1fr 1fr;gap:48px}.band .w{grid-template-columns:1.3fr 1fr}.bar{display:none}body{padding-bottom:0}}