/*
Theme Name: PVPL Pro Industrial
Theme URI: https://priaradhyaventures.com
Author: Priaradhya Ventures
Description: Premium multi-page WordPress theme for PVPL — Equipment, Civil Construction and Interior Design.
Version: 2.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pvpl-pro
*/

/* NOTE: Google Fonts (Manrope + Oswald) ab header.php ke <head> se load hote hain.
   Yahan @import isliye hata diya, kyunki wo page ko reload par bina design dikhata tha. */

/* =========================================================
   1. BASE (sab pages par lagta hai)
   ========================================================= */
:root{
  --blue:#07579d; --blue2:#0b78cf; --navy:#071a2d; --navy2:#0d263f; --cyan:#22b7e6; --orange:#f49a28;
  --white:#fff; --paper:#f5f8fb; --ink:#142233; --muted:#657386; --line:#dde5ed;
  --max:1240px; --radius:22px; --shadow:0 18px 55px rgba(7,26,45,.12);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:Manrope,Arial,sans-serif; color:var(--ink); background:#fff; line-height:1.65; }
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
.wrap{ width:min(calc(100% - 40px),var(--max)); margin:auto; }
.section{ padding:88px 0; }
.section.soft{ background:var(--paper); }

.eyebrow{
  display:inline-flex; gap:8px; align-items:center; text-transform:uppercase; letter-spacing:.13em;
  font-size:12px; font-weight:800; color:var(--blue);
}
.eyebrow:before{ content:""; width:30px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--orange),var(--blue2)); }

h1,h2,h3,h4{ font-family:Oswald,Arial,sans-serif; line-height:1.08; margin:0 0 .55em; color:var(--navy); font-weight:700; }
h1{ font-size:clamp(48px,7vw,86px); }
h2{ font-size:clamp(34px,4vw,56px); }
h3{ font-size:27px; }
p{ margin:0 0 1em; }
.lead{ font-size:18px; color:#536274; max-width:680px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px;
  border-radius:999px; background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; font-weight:800;
  border:1px solid transparent; transition:.25s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(7,87,157,.22); }
.btn.light{ background:#fff; color:var(--navy); }
.btn.outline{ background:transparent; border-color:#b9c7d4; color:var(--navy); }

/* =========================================================
   2. HEADER (layout aur dropdown ka CSS header.php ke andar hai)
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:99; background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px); border-bottom:1px solid rgba(221,229,237,.85);
}
.nav-links a{ font-size:14px; font-weight:700; color:#334457; }
.nav-links a:hover,
.nav-links .current-menu-item>a,
.nav-links .current-menu-ancestor>a{ color:var(--blue); }
.burger{ border:0; background:var(--navy); color:#fff; border-radius:10px; width:42px; height:42px; font-size:20px; cursor:pointer; }

/* Footer abhi bhi purana gola logo (.brand-mark / .brand-name) use karta hai */
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--blue2),var(--navy)); color:#fff;
  font-family:Oswald; font-weight:700; font-size:21px; box-shadow:inset 0 0 0 5px #e5eff8;
}
.brand-name{ font-family:Oswald; font-size:25px; color:var(--blue); letter-spacing:.02em; }
.brand-name small{ display:block; font-family:Manrope; font-size:9px; letter-spacing:.11em; color:#6d7b89; text-transform:uppercase; }

/* =========================================================
   3. INNER PAGE HERO + BREADCRUMBS (har andar ke page par)
   ========================================================= */
.page-hero{
  padding:88px 0 72px; background:linear-gradient(120deg,var(--navy),#0f4c7d); color:#fff; position:relative; overflow:hidden;
}
.page-hero:after{ content:"PVPL"; position:absolute; right:-10px; bottom:-80px; font:700 220px/1 Oswald; color:rgba(255,255,255,.04); }
.page-hero h1{ color:#fff; font-size:clamp(48px,6vw,76px); }
.page-hero p{ color:#c8d7e5; max-width:760px; font-size:18px; }
.breadcrumbs{ font-size:12px; text-transform:uppercase; letter-spacing:.11em; color:#8fb8d8; margin-bottom:18px; }

.section-head{ display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:38px; }
.section-head p{ max-width:520px; color:var(--muted); }

/* =========================================================
   4. EQUIPMENT PAGES (Crushing, Mining, Crane, Other, Equipment)
   ========================================================= */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.product-card{ border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; transition:.25s; }
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.product-card img{ height:260px; width:100%; object-fit:contain; background:#f4f8fb; padding:18px; }
.product-card .body{ padding:22px; }
.product-card h3{ font-size:25px; }
.product-card p{ font-size:14px; color:var(--muted); }

.data-table{ width:100%; border-collapse:collapse; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 12px 35px rgba(7,26,45,.05); }
.data-table th{ background:var(--navy); color:#fff; text-align:left; padding:14px; }
.data-table td{ padding:13px 14px; border-bottom:1px solid var(--line); font-size:14px; }
.data-table tr:last-child td{ border-bottom:0; }

/* =========================================================
   5. SHARED BLOCKS
   Ye un pages ke liye rakhe hain jinhe abhi premium nahi banaya
   (Services, Civil Industry, Interior Design, Achievements, Welfare, Blog etc.).
   Jab ye pages bhi redesign ho jayein, tab ye poora section delete kar sakte hain.
   ========================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.image-stack{ position:relative; padding:0 44px 44px 0; }
.image-stack img{ height:530px; width:100%; object-fit:cover; border-radius:28px; box-shadow:var(--shadow); }
.image-stack:after{ content:""; position:absolute; right:0; bottom:0; width:68%; height:70%; border-radius:26px; background:linear-gradient(135deg,var(--blue),var(--cyan)); z-index:-1; }
.check-list{ display:grid; gap:14px; margin:26px 0; }
.check{ display:flex; gap:12px; align-items:flex-start; }
.check i{ font-style:normal; width:26px; height:26px; min-width:26px; display:grid; place-items:center; border-radius:50%; background:#e3f2fb; color:var(--blue); font-weight:900; }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px; box-shadow:0 12px 35px rgba(7,26,45,.05); }
.card img{ height:220px; width:100%; object-fit:cover; border-radius:14px; margin-bottom:20px; }
.card p{ color:var(--muted); font-size:14px; }

.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.service-card{ position:relative; min-height:470px; border-radius:var(--radius); overflow:hidden; background:var(--navy); box-shadow:var(--shadow); }
.service-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.64; transition:.5s; }
.service-card:after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,26,45,.96),rgba(7,26,45,.08) 65%); }
.service-card:hover img{ transform:scale(1.05); }
.service-content{ position:absolute; z-index:2; inset:auto 26px 26px; }
.service-content .num{ font-family:Oswald; color:var(--orange); font-size:14px; }
.service-content h3{ color:#fff; font-size:34px; }
.service-content p{ color:#d3deea; font-size:14px; }
.arrow-link{ color:#fff; font-weight:800; font-size:14px; }
.arrow-link span{ color:var(--orange); }

.dark-band{ background:linear-gradient(110deg,var(--navy),#0d3255); color:#fff; padding:70px 0; }
.dark-band h2,.dark-band h3{ color:#fff; }
.dark-band p{ color:#b9c9d7; }
.cta-row{ display:flex; align-items:center; justify-content:space-between; gap:28px; }

.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.process{ padding:24px; border-top:3px solid var(--blue); background:#fff; border-radius:0 0 18px 18px; }
.process strong{ font-family:Oswald; font-size:44px; color:#d8e8f4; display:block; }

.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.gallery figure{ margin:0; overflow:hidden; border-radius:18px; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.gallery figure:hover img{ transform:scale(1.04); }
.gallery .wide{ grid-column:span 7; height:420px; }
.gallery .tall{ grid-column:span 5; height:420px; }
.gallery .third{ grid-column:span 4; height:300px; }

.project-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.project{ position:relative; border-radius:20px; overflow:hidden; min-height:320px; background:#152637; }
.project img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.project:after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,20,34,.87),transparent 65%); }
.project h3{ position:absolute; z-index:2; bottom:12px; left:20px; color:#fff; }

.interior-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.interior-grid .tile{ position:relative; border-radius:18px; overflow:hidden; height:260px; }
.interior-grid img{ width:100%; height:100%; object-fit:cover; }
.interior-grid span{
  position:absolute; left:12px; right:12px; bottom:12px; background:rgba(7,26,45,.82); backdrop-filter:blur(8px);
  color:#fff; padding:10px 12px; border-radius:10px; font-size:12px; font-weight:800;
}

/* =========================================================
   6. FOOTER
   ========================================================= */
.footer{ background:#061625; color:#aec0cf; padding:58px 0 24px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr .8fr .8fr 1fr; gap:28px; }
.footer h4{ color:#fff; font-size:20px; }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; font-size:13px; }
.footer a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); margin-top:36px; padding-top:20px;
  display:flex; justify-content:space-between; gap:20px; font-size:11px;
}

/* =========================================================
   7. RESPONSIVE
   ========================================================= */
@media(max-width:980px){
  .split{ grid-template-columns:1fr; }
  .service-grid,.cards,.product-grid,.project-grid{ grid-template-columns:repeat(2,1fr); }
  .interior-grid{ grid-template-columns:repeat(3,1fr); }
  .process-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:640px){
  .wrap{ width:min(calc(100% - 28px),var(--max)); }
  .section{ padding:64px 0; }
  .service-grid,.cards,.product-grid,.project-grid,.process-grid,.footer-grid{ grid-template-columns:1fr; }
  .interior-grid{ grid-template-columns:repeat(2,1fr); }
  .section-head,.cta-row{ align-items:flex-start; flex-direction:column; }
  .gallery .wide,.gallery .tall,.gallery .third{ grid-column:span 12; height:290px; }
  .footer-bottom{ flex-direction:column; }
  .nav .btn{ display:none; }
}