:root {
  --text: #333;          /* Text color */
  --accent: #ff4500;     /* Accent color (Orange/Red) */
  --accent-2: #ffd700;   /* Accent hover color (Gold/Yellow) */
}

/* ====== HEADER CUSTOMIZATION ====== */
.header .brand{
  font-size: 1.8rem;       /* Title size बड़ा */
  color: #ff4500;          /* Dark Orange/Red – clearly visible */
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7); /* Text outline for better contrast */
}
/* ====== HEADER (FINAL WORKING) ====== */
.header{
  position: fixed;
  top: 0;
  z-index: 50;
  background: rgba(27,30,36,0.95);  /* Dark visible background */
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav{
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 14px 0;
}
.logo-wrap{
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand{
  font-size: 1.8rem;             
  color: #ff4500;                /* Title color red */
  font-weight: 800;
}
.menu a{
 color: var(--text);
  text-decoration: none; 
  padding: 8px 12px; 
  border-radius: 10px; 
  position: relative;
}

.menu a:hover, .menu a.active{
  background: var(--surface-2); 
  outline: 1px solid rgba(255,255,255,.06);
}

.cta{
  background: var(--accent); 
  color: #000; 
  font-weight: 700;
}

.cta:hover{
  background: var(--accent-2);
}

/* ====== CUSTOM FOOTER ====== */
.custom-footer{
  background: #15171c;   /* Dark surface color */
  padding: 30px 0;
  text-align: center;
  color: var(--text);
  border-top: 1px solid rgba(255,255,255,.1);
}

.custom-footer a{
  color: var(--accent);
  text-decoration: none;
  margin: 0 8px;
}

.custom-footer a:hover{
  color: var(--accent-2);
  text-decoration: underline;
}

/* ====== EXISTING CSS BELOW ====== */
/* ====== GLOBAL THEME (LOCKED) ====== */
:root{
  --bg:#0e0f12;
  --surface:#15171c;
  --surface-2:#1b1e24;
  --text:#e9ecef;
  --muted:#b3b8c4;
  --accent:#ffd400;     /* Yellow */
  --accent-2:#ffb700;
  --link:#ffd400;
  --ring: rgba(255,212,0,.25);
  --radius:14px;
  --shadow: 0 10px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background: var(--bg) url('../images/company-bg.jpg') center/cover fixed no-repeat;
}
body::before{
  content:""; position:fixed; inset:0; background:rgba(0,0,0,.55); pointer-events:none; z-index:-1;
}

/* ====== LAYOUT ====== */
.container{width:min(1200px,92%); margin-inline:auto}
.section{padding:56px 0}
.card{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
h1,h2,h3{margin:0 0 .4em}
h1{font-size:clamp(28px,3.6vw,42px); color:var(--accent); text-shadow:0 0 20px rgba(255,212,0,.35)}
h2{font-size:clamp(22px,2.6vw,30px); color:var(--accent)}
h3{font-size:clamp(18px,2vw,22px)}

/* ====== HEADER / NAV ====== */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg,rgba(14,15,18,.9),rgba(14,15,18,.6));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo-wrap{display:flex; align-items:center; gap:12px}
.logo{width:44px; height:44px; object-fit:cover; border-radius:10px; border:2px solid #fff; background:#fff}
.menu{display:flex; gap:22px; align-items:center}
.menu a{
  color:var(--text); text-decoration:none; padding:8px 12px; border-radius:10px; position:relative;
}
.menu a:hover, .menu a.active{background:var(--surface-2); outline:1px solid rgba(255,255,255,.06)}
.cta{background:var(--accent); color:#000; font-weight:700}
.cta:hover{background:var(--accent-2)}

/* Header Call Button Style */
.header-call {
  text-align: center;
  margin: 10px 0;
}

.call-btn {
  display: inline-block;
  background-color: #28a745;
  color: orange;
  font-size: 20px;
  font-weight: bold;
  padding: 15px 15px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s;
}

.call-btn:hover {
  background-color: #218838;
}

/* ====== HERO (Home) ====== */
.hero{padding:90px 0 70px}
.hero .lead{color:var(--muted); max-width:900px}

/* ====== FEATURED GRID ====== */
.grid{display:grid; gap:22px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid.cols-3{grid-template-columns:1fr}}

.card .thumb{width:100%; height:400px; object-fit:cover}
.card .box{padding:18px}
.muted{color:var(--muted)}

/* ====== PRODUCT LIST PAGE ====== */
.products-grid{display:grid; gap:20px; grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){.products-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.products-grid{grid-template-columns:1fr}}
.product-card .thumb{height: 200px}
.product-card h3{color:var(--accent)}
.product-card p{margin:.4em 0 0}

/* ====== FOOTER ====== */
.custom-footer {
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,.0));
  color: white;
  text-align: center;
  padding: 15px;
}

.custom-footer a {
  font-size: 32px;        /* icon size बड़ा */
  margin: 0 12px;         /* icons के बीच space */
  text-decoration: none;
}

.custom-footer .fa-facebook { color: #1877F2; }   /* Facebook Blue */
.custom-footer .fa-linkedin { color: #0A66C2; }   /* LinkedIn Blue */
.custom-footer .fa-instagram { color: #E1306C; }  /* Instagram Pink */
.custom-footer .fa-whatsapp { color: #25D366; }   /* WhatsApp Green */


.custom-footer a:hover {
  text-decoration: underline;
}

/* ====== UTIL ====== */
.btn{
  display:inline-block; padding:10px 18px; border-radius:12px; text-decoration:none;
  background:var(--accent); color:#000; font-weight:700; box-shadow:0 6px 16px var(--ring)
}
.btn:hover{background:var(--accent-2)}
.visually-hidden{position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1)}


/* =====================
   General Reset & Fonts
===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* =====================
   Header
===================== */
.header {
  background-color: #1a1a1a; /* Existing theme maintained */
  color: #fff;
  padding: 1rem 0;
}

.header .nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.menu a {
  margin: 0 0.8rem;
  color: #fff;
  font-weight: 500;
  transition: color 0.3s;
}

.menu a.active,
.menu a:hover {
  color: #f39c12;
}

/* =====================
   Sections
===================== */
.section {
  padding: 4rem 0;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

.card {
  background-color: #f7f7f7;
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.box h1, .box h2 {
  color: #FFD700;
  margin-bottom: 1rem;
}

.box p.muted {
  color: #555;
}

/* =====================
   Grid System
===================== */
.grid {
  display: grid;
  gap: 1.5rem;
}

.cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* =====================
   Experience Counters
===================== */
.grid .card h3 {
  font-size: 2rem;
  color: #f39c12;
  margin-bottom: 0.5rem;
}

/* =====================
   Team Section
===================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}

.team-member {
  background-color: #fff;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.team-member:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.team-member h4 {
  margin-top: 0.8rem;
  color: #1a1a1a;
}

.team-member p {
  color: #777;
  font-size: 0.9rem;
}

/* =====================
   Factory / Machinery
===================== */
.factory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.factory-grid img {
  border-radius: 8px;
  transition: transform 0.3s;
}

.factory-grid img:hover {
  transform: scale(1.05);
}

/* =====================
   Certificates / Clients
===================== */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  align-items: center;
  justify-items: center;
}

.clients-grid img {
  max-height: 80px;
  object-fit: contain;
  transition: transform 0.3s;
}

.clients-grid img:hover {
  transform: scale(1.1);
}

/* =====================
   Timeline / Achievements
===================== */
.timeline {
  list-style: none;
  position: relative;
  padding-left: 1.5rem;
}

.timeline li {
  margin-bottom: 1rem;
  padding-left: 1rem;
  position: relative;
  color: #555;
}

.timeline li::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 0.3rem;
  width: 12px;
  height: 12px;
  background-color: #f39c12;
  border-radius: 50%;
}

/* =====================
   FAQ
===================== */
details {
  margin-bottom: 1rem;
  background-color: #fff;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

details[open] {
  background-color: #f1f1f1;
}

summary {
  font-weight: 600;
  outline: none;
}

/* =====================
   Footer
===================== */
.custom-footer {
  background-color: #1a1a1a;
  color: #fff;
  text-align: center;
  padding: 2rem 0;
}

.custom-footer a {
  color: #fff;
  margin: 0 0.5rem;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.custom-footer a:hover {
  color: #f39c12;
}

/* Footer Contact Style */
.footer-contact {
  text-align: center;
  padding: 20px;
  background: #222;
}

.footer-icon {
  margin: 0 15px;
  font-size: 20px;
  color: orange;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-icon:hover {
  color: #28a745;
}

/* =====================
   Responsive Adjustments
===================== */
@media (max-width: 768px) {
  .menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .team-grid, .factory-grid, .clients-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}


/* ---------- Image Gallery Section ---------- */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.image-gallery .gallery-item {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-gallery .gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

/* Hover Effect */
.image-gallery .gallery-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.image-gallery .gallery-item:hover img {
  transform: scale(1.1);
}