/* ============================================
   CCPL — Conschemi Chemtech Pvt. Ltd.
   Shared theme: base, components, header, footer.
   Structure and motion follow the supplied global.css;
   colours are CCPL's original maroon / yellow / white.
   ============================================ */
   @import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;700&family=Open+Sans:wght@400;600;700&display=swap");
:root{
  --color-primary:#990100;        /* CCPL maroon */
  --color-primary-dark:#240000;   /* overlay on photos */
  --color-accent:#990100;         /* CTAs */
  --color-accent-dark:#6e0100;
  --color-highlight:#FFC304;      /* CCPL yellow */
  --color-bg:#ffffff;
  --color-bg-alt:#f3f3f3;
  --color-white:#ffffff;
  --color-text:#2a2222;
  --color-text-light:#5f5656;
  --color-border:#dcd6d6;
  --radius:0;
  --shadow-sm:0 1px 4px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.1);
  --shadow-lg:0 16px 32px rgba(40,10,10,.16);
  --max-width:1180px;
--font:"Open Sans","Segoe UI",Arial,sans-serif;
--font-script:"Dancing Script","Monotype Corsiva",cursive;
  --bg-veil:rgba(255,255,255,.6); /* white layer over the background image: higher = fainter image */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--color-text);background:var(--color-bg);line-height:1.6}

/* site-wide background image (fixed layer behind everything, with a white veil on top) */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(var(--bg-veil),var(--bg-veil)) center/cover no-repeat,var(--color-bg) url("../images/background.png") center/cover no-repeat;pointer-events:none} /* path: change here if the image lives elsewhere */

h1,h2,h3,h4{font-family:var(--font);color:var(--color-primary);line-height:1.25;margin:0 0 .5em}
p{margin:0 0 1em;color:var(--color-text-light)}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--color-highlight);outline-offset:3px}

/* layout helpers */
.container,.wrap{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 1.5rem}
.section{padding:4rem 0;background:transparent}
.section-line{border-top:1px solid var(--color-border)}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;font-weight:600;color:var(--color-accent);margin-bottom:.5rem;display:inline-block}
.section-heading{text-align:center;max-width:640px;margin:0 auto 2.5rem}
.section-heading h2{font-size:2rem}
.section-heading h2::after{content:"";display:block;width:56px;height:4px;background:var(--color-highlight);margin:.7rem auto 0}

/* tagline: "One of The Leading Manufacturer of Construction Chemicals, mainly Admixtures."
   (the band is on every page, so this one rule covers all of them)
   size scales with the bold heading above it so it always sits between its ends */
.band p{font-family:var(--font-script);font-size:clamp(.95rem,1.7vw,1.2rem);letter-spacing:.02em}

/* "WELCOME TO" in Monotype Corsiva (Home + Profile); the company name inside the span keeps the normal bold font.
   Corsiva is already slanted, so no extra italic is applied. */
.about h3,.intro h2{font-family:var(--font-script);font-style:normal;letter-spacing:.02em}
.about h3 span,.intro h2 span{font-family:var(--font);font-style:normal;letter-spacing:normal}

/* let the background show on the Profile page too (its inline styles set white / grey) */
main .intro,main .rangebox{background:transparent}

/* buttons */
.btn{display:inline-block;padding:.75rem 1.6rem;border-radius:var(--radius);font-weight:600;font-size:.95rem;border:2px solid transparent;transition:background .2s ease,color .2s ease,border-color .2s ease}
.btn-primary{background:var(--color-accent);color:#fff}
.btn-primary:hover{background:var(--color-accent-dark)}
.btn-outline{background:transparent;border-color:#fff;color:#fff}
.btn-outline:hover{background:#fff;color:var(--color-primary)}
.btn-outline-dark{background:transparent;border-color:var(--color-primary);color:var(--color-primary)}
.btn-outline-dark:hover{background:var(--color-primary);color:#fff}

/* cards */
.card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}
.card-body{padding:1.75rem}

/* images */
.img-box{width:100%;overflow:hidden;border-radius:var(--radius);background:var(--color-bg-alt)}
.img-box img{width:100%;height:100%;object-fit:cover;display:block}
.ratio-16-9{aspect-ratio:16/9}.ratio-4-3{aspect-ratio:4/3}.ratio-1-1{aspect-ratio:1/1}

/* inner-page banner (solid, no gradient) */
.page-header{background:var(--color-primary);color:#fff;padding:3rem 0}
.page-header h1{color:#fff;margin:0;font-size:2.1rem}

/* grids */
.grid{display:grid;gap:1.75rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* top bar */
.topbar{background:#e6e6e6;border-bottom:1px solid #cfcfcf;font-size:.85rem;color:var(--color-primary)}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:.55rem;padding-bottom:.55rem;flex-wrap:wrap}
.topbar p{font-weight:600;margin:0;color:var(--color-primary)}
.topbar .contact{display:flex;gap:22px;flex-wrap:wrap;color:var(--color-text)}
.topbar a:hover{color:var(--color-primary)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:3px solid var(--color-highlight);box-shadow:var(--shadow-sm)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:88px}
.logo{flex-shrink:0;padding:8px 0;display:flex;align-items:center;gap:.7rem}
.logo img{width:auto;display:block}
.logo-symbol{height:56px}
.logo-word{height:26px}
.logo-name{height:76px}
.site-header .wrap{max-width:1420px}
.nav{display:flex;align-items:center;gap:0;flex-wrap:nowrap}
.nav>li{position:relative}
.nav>li>a{display:block;white-space:nowrap;padding:33px 10px;font-weight:600;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;transition:color .2s ease}
.nav>li>a:hover,.nav>li.active>a{color:var(--color-primary)}
.nav>li>a{position:relative}
.nav>li.active>a::after{content:"";position:absolute;left:10px;right:10px;bottom:26px;height:3px;background:var(--color-primary)}
.nav .sub{position:absolute;left:0;top:100%;min-width:300px;background:#fff;border-top:3px solid var(--color-primary);display:none;box-shadow:var(--shadow-md)}
.nav li:hover>.sub,.nav li:focus-within>.sub{display:block}
.sub a{display:block;padding:.65rem 1.2rem;font-size:.85rem;border-bottom:1px solid var(--color-border);transition:background .2s ease,color .2s ease}
.sub a:hover{background:var(--color-bg-alt);color:var(--color-primary)}
.nav .enquiry a{background:var(--color-accent);color:#fff;padding:.7rem 1.2rem;margin-left:6px;border-radius:var(--radius)}
.nav .enquiry a:hover{background:var(--color-accent-dark);color:#fff}
/* keep the Enquiry button text white (and hide the underline) when it is the current page */
.nav .enquiry.active a,.nav .enquiry.active a:hover{color:#fff}
.nav .enquiry.active>a::after{display:none}
.nav .enquiry.active a{box-shadow:none}
.burger{display:none;background:var(--color-primary);border:0;width:46px;height:46px}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:5px auto}

/* footer: Quick Links + 4 office addresses (Head Office, Factory, Pune, Nashik), email on its own row below */
footer{background:#2b2b2b;border-top:3px solid var(--color-highlight);padding:1.4rem 0 0;color:#d6d6d6}
.fgrid{display:grid;grid-template-columns:.8fr repeat(4,1.2fr);gap:1.5rem;padding-bottom:1.1rem}
footer h3{font-size:1rem;color:var(--color-highlight);margin-bottom:.6rem;letter-spacing:.03em}
footer ul{columns:1;column-gap:1.2rem}
footer li{margin-bottom:.2rem;font-size:.88rem;break-inside:avoid}
footer a{transition:color .2s ease}
footer a:hover{color:var(--color-highlight);text-decoration:underline}
footer p{font-size:.88rem;line-height:1.5;margin:0;color:#d6d6d6;overflow-wrap:anywhere}

/* phone line under each address */
.fphone{margin-top:.9rem}

/* desktop: headings, addresses and phone numbers share rows, so the phone numbers line up
   whatever the address length (rows: heading / address / phone) */
@media(min-width:981px){
  .fgrid{grid-template-rows:auto auto 1fr;row-gap:0}
  .fgrid>div{grid-row:1 / span 3}
  .fgrid>div.fcol{display:grid;grid-template-rows:subgrid}
  .fcol .faddr{padding-bottom:.9rem}
  .fcol .fphone{margin-top:0}
}

/* footer email: own full-width row, always on one line */
.femail{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding-top:.9rem;padding-bottom:1.1rem;font-size:.95rem;color:#d6d6d6}
.femail::before{content:"";position:absolute}
.femail{position:relative}
.femail .fe-ico{filter:brightness(0) invert(1)}
.femail .fe-label{color:var(--color-highlight);font-weight:600;letter-spacing:.03em}
.femail a{white-space:nowrap}

.fbottom{border-top:1px solid #444;padding:.2rem 0;font-size:.8rem;color:#b5b5b5;background-color:var(--color-highlight)}
.fbottom a{color:#000000}
.fsym{height:52px;width:auto;}
.fbottom .wrap{align-items:center;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}

/* responsive */
@media(max-width:1440px){
  .burger{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:3px solid var(--color-highlight);flex-direction:column;align-items:stretch;display:none;padding:.5rem 0;max-height:80vh;overflow:auto}
  .nav.open{display:flex}
  .nav>li>a{padding:.85rem 1.5rem}
  .nav>li.active>a{box-shadow:inset 3px 0 0 var(--color-primary)}
  .nav>li.active>a::after{display:none}
  .nav .sub{position:static;display:block;box-shadow:none;border-top:0;min-width:0}
  .nav .sub a{padding:.55rem 2.5rem;border-bottom:0}
  .nav .enquiry a{margin:.6rem 1.5rem;display:inline-block}
}
@media(max-width:980px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  footer ul{columns:2}
}
@media(max-width:600px){
  /* CHANGED: side space on phones halved (1.5rem -> .75rem) */
  .container,.wrap{padding-left:.75rem;padding-right:.75rem}

  .logo-symbol{height:44px}
  .logo-word{display:none}
  .logo-name{height:26px}
  .logo{gap:.5rem}
  .grid-2,.grid-3,.grid-4,.fgrid{grid-template-columns:1fr}
  footer ul{columns:1}
  .section{padding:2.75rem 0}
  .section-heading h2{font-size:1.6rem}
  .topbar .wrap{justify-content:center;text-align:center}
}
@media(max-width:400px){
  .femail a{white-space:normal;overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}