@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap");
:root{--bg:#f4f2ed;--panel:#ffffff;--line:#e4ded2;--text:#1d1f22;--muted:#5b6065;--orange:#d8a52b;--orange2:#9b6a08}.hero,.pagehero,.dark,.band,footer,.loader,header{--panel:#2b2f33;--line:#3a3f43;--text:#f8f6f1;--muted:#c9ccce;--orange2:#f2c75c}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.75 Inter,Arial;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.wrap{width:min(1200px,calc(100% - 40px));margin:auto}.top{background:#15181a;border-bottom:1px solid var(--line);font-size:11px;color:#bbb;text-transform:uppercase;letter-spacing:1px}.topin{display:flex;justify-content:space-between;padding:9px 0}.navwrap{position:sticky;top:0;z-index:100;background:rgba(13,15,16,.9);backdrop-filter:blur(15px);border-bottom:1px solid var(--line)}.navin{height:82px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:10px;font:700 25px "Barlow Condensed";letter-spacing:1px;color:var(--text)}.logo b{display:grid;place-items:center;width:42px;height:42px;background:var(--gold);color:#111;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%)}.logo em{font-style:normal;color:var(--gold)}nav{display:flex;align-items:center;gap:19px;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--text)}nav>a,.drop>a{position:relative}nav>a:not(.quote):after,.drop>a:after{content:"";position:absolute;bottom:-9px;left:0;width:0;height:2px;background:var(--gold);transition:.3s}nav>a:hover:after,.drop>a:hover:after{width:100%}.quote{background:var(--gold);color:#111!important;padding:12px 18px;display:inline-block}.drop{position:relative}.menu{position:absolute;top:28px;left:-15px;width:230px;background:#272b2f;border:1px solid var(--line);padding:8px;opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s;box-shadow:0 20px 50px #000}.drop:hover .menu{opacity:1;visibility:visible;transform:none}.menu a{display:block;padding:9px 11px;color:#ccc}.menu a:hover{background:#3a3f43;color:#fff}.hamb{display:none;background:none;border:0;color:#fff;font-size:25px}
.hero{min-height:760px;display:flex;align-items:flex-end;position:relative;background:linear-gradient(90deg,rgba(20,23,25,.72),rgba(20,23,25,.20)),url("/assets/img/main3.png") center/cover fixed}.hero .wrap{padding:120px 0 100px}.eyebrow,.kicker{color:var(--gold-light);font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:800}h1,h2,h3,h4{font-family:"Barlow Condensed";text-transform:uppercase;line-height:.98;margin:0;color:var(--text)}h1{font-size:clamp(65px,8vw,120px);max-width:900px;margin:20px 0}h2{font-size:clamp(48px,6vw,82px)}h3{font-size:31px}h4{font-size:22px}p{color:var(--muted)}.hero p{max-width:650px;font-size:18px}.actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}.btn{display:inline-block;padding:15px 23px;border:1px solid #555;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:1px;transition:.35s;color:var(--text)}.btn.primary,.quote{background:var(--gold);border-color:var(--gold)}.btn:hover,.quote:hover{transform:translateY(-4px);box-shadow:0 12px 30px #0004}.marquee{background:var(--gold);color:#111;overflow:hidden;white-space:nowrap;font:600 25px "Barlow Condensed";text-transform:uppercase}.track{display:inline-flex;gap:55px;padding:10px;animation:move 22s linear infinite}.track span:before{content:"✦";margin-right:55px}@keyframes move{to{transform:translateX(-50%)}}
section{padding:115px 0}.dark{background:#1b1e21}.head{display:grid;grid-template-columns:.8fr 1.5fr;gap:60px;margin-bottom:50px;align-items:end}.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.photo{position:relative}.photo img{width:100%;height:560px;object-fit:cover}.photo:after{content:"";position:absolute;inset:18px;border:1px solid #fff4}.stamp{position:absolute;bottom:25px;left:25px;z-index:2;background:var(--gold);color:#111;padding:18px 22px;font:700 25px "Barlow Condensed";text-transform:uppercase}.lead{font:500 29px/1.15 "Barlow Condensed";text-transform:uppercase;color:var(--text)}.checks{list-style:none;padding:0;display:grid;gap:10px}.checks li:before{content:"✓";color:var(--gold);font-weight:900;margin-right:12px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:.5s}.card:hover{transform:translateY(-9px);border-color:var(--gold)}.card .pic{height:300px;overflow:hidden;position:relative}.card img{height:100%;width:100%;object-fit:cover;transition:1s}.card:hover img{transform:scale(1.08)}.cardbody{padding:25px}.card p{font-size:13px}.arrow{color:var(--gold-light);font-size:11px;font-weight:800;text-transform:uppercase}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.feature{background:var(--panel);padding:35px;min-height:220px;transition:.4s}.feature:hover{background:color-mix(in srgb,var(--gold) 14%,transparent);transform:translateY(-5px)}.feature i{color:var(--gold);font-size:27px;margin-bottom:25px}.stats{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}.stat{padding:35px 25px;border-right:1px solid var(--line)}.stat strong{display:block;font:700 65px/.9 "Barlow Condensed"}.stat span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:2px}.band{background:linear-gradient(90deg,#15181ad9,#15181a55),url("../img/electronics-w1600.jpg") center/cover fixed}.band h2{max-width:850px}.gallery{display:grid;grid-template-columns:1.3fr .7fr .7fr;grid-auto-rows:250px;gap:12px}.gallery a{overflow:hidden}.gallery a:first-child{grid-row:span 2}.gallery img{width:100%;height:100%;object-fit:cover;transition:.7s}.gallery a:hover img{transform:scale(1.08)}.pagehero{padding:90px 0 70px;background:linear-gradient(90deg,#15181ad9,#15181a44),url("/assets/img/pageimage.png") center/cover}.pagehero h1{font-size:clamp(60px,7vw,100px);margin-top:15px}.crumb{font-size:11px;color:#aaa}.crumb a{color:var(--gold-light)}.product{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.product img{height:580px;width:100%;object-fit:cover}.specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:25px}.spec{background:var(--panel);padding:17px}.spec b{display:block;color:var(--gold-light);font-size:10px;text-transform:uppercase}form{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:#1b1e21;padding:35px;border:1px solid #33383c}input,textarea,select{background:#25292c;color:#fff;border:1px solid #3a3f43;padding:14px;font:inherit;outline:none}textarea{min-height:150px;resize:vertical}.full{grid-column:1/-1}.faq{border-top:1px solid var(--line);padding:22px 0}details summary{cursor:pointer;font:600 27px "Barlow Condensed";text-transform:uppercase;display:flex;justify-content:space-between}details p{max-width:800px}footer{background:#15181a;border-top:1px solid var(--line)}.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:45px;padding:75px 0}.foot>div>a:not(.logo){display:block;color:#999;margin:8px 0;font-size:13px}.foot p{font-size:13px}.copy{border-top:1px solid var(--line);padding:17px 0;color:#666;font-size:11px;text-align:center}.float{position:fixed;right:20px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;z-index:99;color:#111;box-shadow:0 10px 30px #0005}.call{bottom:85px;background:#1b1e21;color:#fff}.wa{bottom:20px;background:#25d366}.reveal{opacity:0;transform:translateY(35px)}.show{opacity:1;transform:none;transition:.8s cubic-bezier(.2,.7,.2,1)}.loader{position:fixed;inset:0;background:#15181a;z-index:9999;display:grid;place-items:center;transition:.6s}.loader.hide{opacity:0;visibility:hidden}.loader b{font:700 60px "Barlow Condensed";color:var(--text)}.loader b span{color:var(--gold)}.bar{height:2px;width:180px;background:#333;margin:20px auto}.bar i{display:block;height:100%;background:var(--gold);animation:load 1.2s forwards}@keyframes load{to{width:100%}}
@media(max-width:950px){nav{gap:10px}.grid3,.features{grid-template-columns:1fr 1fr}.foot{grid-template-columns:1fr 1fr}}@media(max-width:780px){.topin span:last-child{display:none}.hamb{display:block}nav{display:none;position:absolute;left:0;right:0;top:82px;background:#202428;padding:15px;flex-direction:column;align-items:stretch}nav.open{display:flex}.drop .menu{position:static;width:auto;display:none;opacity:1;visibility:visible;transform:none}.drop.open .menu{display:block}.hero{background-attachment:scroll;min-height:670px}.split,.product{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.grid3,.features,.foot{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr;grid-auto-rows:190px}.gallery a:first-child{grid-column:span 2;grid-row:span 1}form{grid-template-columns:1fr}.full{grid-column:auto}section{padding:80px 0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* =========================================================
   FINAL OVERRIDE
   DO NOT REMOVE ORIGINAL CSS
   ADD THIS AT THE VERY END
   ========================================================= */

/* =========================================================
   PRODUCT CARDS
   Keep cards LIGHT even inside .dark section
   ========================================================= */

.dark .card {
    --panel: #ffffff !important;
    --line: #e4ded2 !important;
    --text: #1d1f22 !important;
    --muted: #5b6065 !important;
    --orange2: #9b6a08 !important;

    background: #ffffff !important;
    color: #1d1f22 !important;
}

.dark .card h3 {
    color: #1d1f22 !important;
}

.dark .card p {
    color: #5b6065 !important;
}

.dark .card .arrow {
    color: #9b6a08 !important;
}

.dark .card {
    transition: .5s !important;
}

.dark .card:hover {
    transform: translateY(-9px) !important;
    border-color: #d8a52b !important;
}

.dark .card .pic img {
    transition: 1s !important;
}

.dark .card:hover .pic img {
    transform: scale(1.08) !important;
}

.dark .card:hover h3 {
    color: #d8a52b !important;
}

/* =========================================================
   PREMIUM STATS / COUNTER SECTION — SPACING ONLY
   ========================================================= */

section.stats-band-sec {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

section.stats-band-sec .stats {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 900px) {
    section.stats-band-sec {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}

@media (max-width: 560px) {
    section.stats-band-sec {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }
}

/* =========================================================
   STICKY HEADER SHRINK-ON-SCROLL
   ========================================================= */

.header{position:sticky !important;top:0 !important;z-index:800 !important;background:#fff !important;transition:box-shadow .3s !important;}
.header.scrolled{box-shadow:0 6px 24px rgba(13,27,42,.10) !important;}
.header.scrolled .top{max-height:0 !important;padding:0 !important;overflow:hidden !important;opacity:0 !important;}
.header .top{transition:max-height .35s,opacity .3s,padding .35s !important;max-height:60px !important;overflow:hidden !important;}

/* =========================================================
   FLOATING CALL/WHATSAPP + SCROLL-TO-TOP BUTTON
   ========================================================= */

.float{
  width:54px !important;height:54px !important;border-radius:50% !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  color:#fff !important;font-size:22px !important;box-shadow:0 10px 26px rgba(0,0,0,.22) !important;
  transition:transform .3s,box-shadow .3s !important;z-index:900 !important;
}
.float:hover{transform:scale(1.1) !important;}
.float.call{background:#171717 !important;}
.float.wa{background:#25d366 !important;}

#toTop{
  position:fixed !important;right:22px !important;bottom:150px !important;
  width:48px !important;height:48px !important;border-radius:50% !important;border:none !important;
  cursor:pointer !important;background:var(--orange,#d8a52b) !important;color:#fff !important;
  font-size:18px !important;display:flex !important;align-items:center !important;justify-content:center !important;
  opacity:0 !important;visibility:hidden !important;transform:translateY(10px) !important;
  transition:.35s !important;z-index:900 !important;box-shadow:0 10px 24px rgba(216,165,43,.4) !important;
}
#toTop.show{opacity:1 !important;visibility:visible !important;transform:translateY(0) !important;}

/* =========================================================
   FINAL — DESKTOP CENTER + MOBILE NAV (single source of truth)
   ========================================================= */

/* Desktop: center nav links */
@media (min-width:781px){
  .header .navwrap .navin{display:flex !important;align-items:center !important;justify-content:space-between !important;}
  .header .navwrap .navin nav{flex:1 !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:22px !important;}
  .header .navwrap .navin nav a{opacity:1 !important;color:inherit !important;}
  .header .navwrap .navin nav .quote{margin-left:24px !important;flex-shrink:0 !important;}
  .header .navwrap .navin nav .drop{position:relative !important;}
  .header .navwrap .navin nav .drop .menu{position:absolute !important;top:100% !important;left:50% !important;transform:translateX(-50%) !important;}
}

/* Mobile: dropdown nav, scrollable, submenu never clips off-screen */
@media (max-width:780px){
  .header .navwrap .navin{
    position:relative !important;
    width:100% !important;
    box-sizing:border-box !important;
  }

  .header .navwrap .navin nav{
    position:absolute !important;
    left:0 !important; right:0 !important; top:82px !important;
    width:100% !important;
    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;

    margin:0 !important;
    padding:8px 0 18px !important;

    background:#202428 !important;
    z-index:1000 !important;

    max-height:calc(100vh - 82px) !important;
    max-height:calc(100dvh - 82px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-10px) !important;

    transition:opacity .25s ease, transform .25s ease, visibility .25s ease !important;
  }

  .header .navwrap .navin nav.open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  .header .navwrap .navin nav > a,
  .header .navwrap .navin nav > .drop{
    width:100% !important;
    box-sizing:border-box !important;
    margin:0 !important;
    flex-shrink:0 !important;
  }

  .header .navwrap .navin nav > a,
  .header .navwrap .navin nav .drop > a{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:13px 20px !important;
    margin:0 !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }

  .header .navwrap .navin nav .drop{ position:relative !important; }

  .header .navwrap .navin nav .drop .menu{
    position:static !important;
    width:100% !important;
    box-sizing:border-box !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    background:#171a1d !important;

    max-height:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(-8px) !important;

    transition:max-height .4s ease, opacity .25s ease, transform .35s ease, visibility .35s ease !important;
  }

  .header .navwrap .navin nav .drop.open .menu{
    max-height:1000px !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) !important;
  }

  .header .navwrap .navin nav .drop .menu a{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:11px 20px 11px 38px !important;
    margin:0 !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
  }

  .header .navwrap .navin nav .quote{
    position:relative !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    display:flex !important;
    width:calc(100% - 30px) !important;
    box-sizing:border-box !important;
    margin:12px 15px 0 !important;
    padding:13px 20px !important;
    justify-content:center !important;
    align-items:center !important;
    flex-shrink:0 !important;
    border:0 !important;
    border-radius:8px !important;
    white-space:nowrap !important;
    text-align:center !important;
  }

  .header .navwrap .navin .hamb{
    display:flex !important;
    position:relative !important;
    z-index:1101 !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
  }
}
/* =========================================================
   MULTI STAR EXIM — FINAL BLACK + METALLIC GOLD THEME
   ========================================================= */
:root{
  --gold:#d8a52b;
  --gold-light:#f4d477;
  --gold-deep:#9b6a08;
  --black:#111315;
  --black-2:#191b1e;
  --gold-gradient:linear-gradient(135deg,#8f5f05 0%,#d8a52b 28%,#f5d77d 52%,#d8a52b 74%,#8f5f05 100%);
  --orange:var(--gold) !important;
  --orange2:var(--gold-light) !important;
}

/* Two-level golden header with a strong black divider */
.header{background:var(--gold-gradient)!important;color:#080808!important;}
.header .top{background:var(--gold-gradient)!important;color:#090909!important;border-bottom:2px solid #090909!important;}
.header .topin{color:#090909!important;}
.header .navwrap{background:var(--gold-gradient)!important;color:#090909!important;border-bottom:0!important;box-shadow:none!important;}
.header .navwrap .navin{background:transparent!important;}
.header .logo,.header nav,.header nav a,.header .drop>a{color:#080808!important;}
.header .logo b{background:#111315!important;color:var(--gold-light)!important;border:1px solid #080808!important;}
.header .logo em{color:#111315!important;}
.header nav>a:not(.quote):after,.header .drop>a:after{background:#111315!important;}
.header .quote{background:#111315!important;color:var(--gold-light)!important;border:1px solid #111315!important;border-radius:999px!important;}
.header .quote:hover{background:#050505!important;color:#fff!important;}
.header .drop .menu{background:linear-gradient(145deg,#f7d979,#c89520)!important;border:2px solid #111315!important;box-shadow:0 18px 45px rgba(0,0,0,.28)!important;}
.header .drop .menu a{color:#111315!important;border-bottom:1px solid rgba(17,19,21,.2)!important;}
.header .drop .menu a:hover{background:#111315!important;color:#f5d77d!important;}
.header.scrolled{box-shadow:0 8px 28px rgba(0,0,0,.25)!important;}
.header .hamb{color:#111315!important;}

/* Keep the separator visible even when the top bar collapses */
.header .top + .navwrap{border-top:2px solid #111315!important;}

/* Gold accents, never orange */
.kicker,.eyebrow,.arrow,.crumb a,.checks li:before,.feature i{color:var(--gold)!important;}
.btn.primary,.stamp,.marquee{background:var(--gold-gradient)!important;color:#111315!important;border-color:#111315!important;}
.btn.primary:hover{color:#000!important;box-shadow:0 12px 30px rgba(216,165,43,.28)!important;}

/* Product cards: thicker visible gold border + original hover animation preserved */
.grid3 .card,.card{
  border:3px solid var(--gold)!important;
  border-radius:18px!important;
  background:#fff!important;
  overflow:hidden!important;
  position:relative!important;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s!important;
}
.grid3 .card::before{background:linear-gradient(135deg,#8f5f05,#f5d77d,#171717)!important;}
.grid3 .card:hover,.card:hover{
  transform:translateY(-10px)!important;
  border-color:#f0c85b!important;
  box-shadow:0 30px 60px rgba(0,0,0,.24),0 0 0 2px rgba(216,165,43,.18)!important;
}
.card .cardbody{display:block!important;visibility:visible!important;opacity:1!important;background:#fff!important;color:#111315!important;min-height:155px!important;padding:22px!important;position:relative!important;z-index:2!important;}
.card .cardbody h3{color:#111315!important;display:block!important;visibility:visible!important;opacity:1!important;margin:0 0 9px!important;}
.card .cardbody p{color:#4d5155!important;display:block!important;visibility:visible!important;opacity:1!important;min-height:45px!important;}
.card .arrow{color:#9b6a08!important;display:inline-flex!important;visibility:visible!important;opacity:1!important;font-weight:800!important;}
.grid3 .card:hover .cardbody h3,.grid3 .card:hover .arrow{color:#9b6a08!important;}
.card .pic{height:230px!important;overflow:hidden!important;background:#171717!important;}
.card .pic img{width:100%!important;height:100%!important;object-fit:cover!important;}

/* Preserve the original sweep + scale hover effect */
.grid3 .card .pic::after{background:linear-gradient(120deg,transparent,rgba(255,255,255,.38),transparent)!important;}
.grid3 .card:hover .pic img{transform:scale(1.09)!important;}
.grid3 .card:hover .pic::after{left:130%!important;}

/* General dark sections remain black; gold edges keep the visual language consistent */
.dark{background:#151719!important;}
.features{background:var(--gold)!important;}
.feature:hover{background:rgba(216,165,43,.13)!important;}
.stats{border-color:#b98a18!important;}
.stat{border-color:#b98a18!important;}
.band{background:linear-gradient(90deg,rgba(10,10,10,.9),rgba(10,10,10,.58)),url("../img/electronics-w1600.jpg") center/cover fixed!important;}

/* Contact page: preserve its existing layout, only bring colors into the new theme */
.contact-card,.contact-box{border-color:var(--gold)!important;}
.contact-card:hover{border-color:var(--gold)!important;}
.contact-icon,.contact-point i{background:rgba(216,165,43,.12)!important;color:var(--gold-deep)!important;}
.contact-card:hover .contact-icon{background:rgba(216,165,43,.22)!important;}
.contact-link{color:var(--gold-deep)!important;}
.contact-card:hover .contact-link{color:#765000!important;}
.contact-box form{border-color:var(--gold)!important;}

/* Compact enquiry modal */
#msQuoteModal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);}
#msQuoteModal.open{display:flex;}
.ms-modal-card{width:min(420px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto;background:#f7f3e8;border:2px solid var(--gold);border-radius:14px;box-shadow:0 25px 80px rgba(0,0,0,.45);position:relative;color:#111315;}
.ms-modal-head{background:var(--gold-gradient);padding:15px 18px 12px;border-bottom:2px solid #111315;}
.ms-modal-head h3{font-size:26px;color:#111315!important;margin:0!important;line-height:1!important;text-transform:uppercase;}
.ms-modal-head p{font-size:11px;color:#222!important;margin:5px 0 0;line-height:1.4;}
.ms-modal-close{position:absolute;right:10px;top:8px;width:28px;height:28px;border:1px solid #111315;background:#111315;color:#f5d77d;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;}
.ms-modal-form{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px 16px 16px;}
.ms-modal-form label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#333;display:flex;flex-direction:column;gap:4px;}
.ms-modal-form .full{grid-column:1/-1;}
.ms-modal-form input,.ms-modal-form select,.ms-modal-form textarea{width:100%;background:#fff!important;color:#111315!important;border:1px solid #b9a879!important;border-radius:6px;padding:8px 9px;font-size:12px;outline:none;}
.ms-modal-form textarea{min-height:72px;resize:vertical;}
.ms-modal-submit{grid-column:1/-1;border:1px solid #111315!important;background:var(--gold-gradient)!important;color:#111315!important;padding:10px 14px;border-radius:7px;font-weight:900;cursor:pointer;text-transform:uppercase;letter-spacing:.6px;}
.ms-modal-submit:hover{filter:brightness(1.05);transform:translateY(-1px);}

/* Mobile: true two-column product grid without clipping */
@media(max-width:780px){
  .header .navwrap .navin nav{background:var(--gold-gradient)!important;color:#111315!important;top:82px!important;}
  .header .navwrap .navin nav > a,.header .navwrap .navin nav .drop>a{color:#111315!important;border-bottom:1px solid rgba(17,19,21,.22)!important;}
  .header .navwrap .navin nav .drop .menu{background:#151719!important;border:0!important;}
  .header .navwrap .navin nav .drop .menu a{color:#f5d77d!important;border-bottom:1px solid rgba(245,215,125,.15)!important;}
  .header .navwrap .navin nav .quote{background:#111315!important;color:#f5d77d!important;}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
  .grid3 .card{min-width:0!important;width:100%!important;}
  .grid3 .card .pic{height:155px!important;}
  .grid3 .card .cardbody{padding:13px!important;min-height:148px!important;}
  .grid3 .card .cardbody h3{font-size:20px!important;line-height:1.05!important;}
  .grid3 .card .cardbody p{font-size:11px!important;line-height:1.45!important;min-height:48px!important;}
  .grid3 .card .arrow{font-size:9px!important;white-space:nowrap!important;}
  .ms-modal-form{grid-template-columns:1fr;}
  .ms-modal-form .full,.ms-modal-submit{grid-column:auto;}
}
@media(max-width:420px){
  .grid3{gap:9px!important;}
  .grid3 .card{border-width:2px!important;border-radius:13px!important;}
  .grid3 .card .pic{height:135px!important;}
  .grid3 .card .cardbody{padding:10px!important;min-height:142px!important;}
  .grid3 .card .cardbody h3{font-size:17px!important;}
  .grid3 .card .cardbody p{font-size:10px!important;min-height:50px!important;}
  .grid3 .card .arrow{font-size:8px!important;}
}

/* Prevent any page content from creating horizontal overflow */
html,body{max-width:100%;overflow-x:hidden!important;}
img,video,iframe{max-width:100%;}
.grid3,.features,.gallery,.split,.product,.reach .wrap,.foot{min-width:0;}

/* =====================================================================
   FIX PASS — navbar button, modal, fonts, dark balance, responsive,
   sticky header, product gallery. Appended last = wins. Theme kept.
   ===================================================================== */

/* ---- 1. ELEGANT FONT UPGRADE (adds a refined display + body pairing) */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Oswald:wght@400;500;600;700&display=swap");
body{font-family:"Sora","Inter",Arial,sans-serif;letter-spacing:.1px;}
h1,h2,h3,h4,.logo,.lead,.stamp,.marquee,details summary,.loader b,.stat strong{
  font-family:"Oswald","Barlow Condensed",sans-serif !important;letter-spacing:.5px;}

/* ---- 2. NAVBAR "Request Quote" BUTTON — dark pill on the gold bar - */
.header .navwrap .quote,
.header nav .quote,
.navwrap .quote,
a.quote{
  background:#111315 !important;
  color:#f5d77d !important;
  border:1px solid #f5d77d !important;
  border-radius:999px !important;
  padding:12px 26px !important;
  font-weight:800 !important;
  letter-spacing:.6px !important;
  text-shadow:none !important;
  box-shadow:0 6px 18px rgba(0,0,0,.35) !important;
  transition:transform .3s, box-shadow .3s, background .3s, color .3s !important;
}
.header .navwrap .quote:hover,
.header nav .quote:hover,
.navwrap .quote:hover{
  background:#050505 !important;
  color:#fff !important;
  transform:translateY(-2px) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.4) !important;
}

/* ---- 3. STICKY HEADER: top bar hides on scroll, nav stays --------- */
.header{position:sticky;top:0;z-index:800;}
.header .top{transition:max-height .35s ease, opacity .3s ease, padding .35s ease;max-height:60px;overflow:hidden;}
.header.scrolled .top{max-height:0;padding:0;opacity:0;border:0;}
.header.scrolled .navwrap{box-shadow:0 8px 26px rgba(0,0,0,.35);}
.navwrap{position:sticky;top:0;}

/* ---- 4. MODAL — lighter, elegant, readable ----------------------- */
#msQuoteModal{background:rgba(17,19,21,.60) !important;backdrop-filter:blur(6px) !important;}
.ms-modal-card{
  background:#fbf9f3 !important;border:1px solid var(--gold) !important;
  border-radius:18px !important;box-shadow:0 30px 90px rgba(0,0,0,.5) !important;
  overflow:hidden !important;
}
.ms-modal-head{
  background:linear-gradient(135deg,#1b1e21,#2b2f33) !important;
  border-bottom:2px solid var(--gold) !important;padding:22px 22px 18px !important;
}
.ms-modal-head h3{color:#f5d77d !important;font-size:28px !important;letter-spacing:1px;}
.ms-modal-head p{color:#cfd3d6 !important;font-size:12px !important;text-transform:none;}
.ms-modal-close{
  background:var(--gold) !important;color:#111315 !important;border:none !important;
  width:32px !important;height:32px !important;font-size:18px !important;
  display:flex !important;align-items:center;justify-content:center;transition:.25s;
}
.ms-modal-close:hover{transform:rotate(90deg);background:#f5d77d !important;}
.ms-modal-form{padding:20px !important;gap:12px !important;}
.ms-modal-form label{color:#4a4a4a !important;}
.ms-modal-form input,.ms-modal-form select,.ms-modal-form textarea{
  background:#fff !important;color:#111 !important;border:1px solid #d8cba0 !important;
  border-radius:8px !important;padding:11px 12px !important;font-size:13px !important;transition:.25s;
}
.ms-modal-form input:focus,.ms-modal-form select:focus,.ms-modal-form textarea:focus{
  border-color:var(--gold) !important;box-shadow:0 0 0 3px rgba(216,165,43,.15) !important;
}
.ms-modal-submit{
  background:var(--gold-gradient) !important;color:#111315 !important;
  border:none !important;border-radius:9px !important;padding:13px !important;
  font-weight:800 !important;letter-spacing:.5px;transition:.25s;
}
.ms-modal-submit:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 12px 26px rgba(216,165,43,.3) !important;}

/* ---- 5. DARK/GOLD BALANCE — lift the too-dark sections ------------ */
/* NOTE: product cards are intentionally left as the original white gold-
   bordered design (defined earlier in the file) — not overridden here. */
.dark{background:linear-gradient(180deg,#1f2327,#191c1f) !important;}
.dark > .wrap > .head h2,.dark > .wrap > .head h3{color:#f8f6f1 !important;}
.feature{background:#202428 !important;}
.feature h3{color:#f6f2e9 !important;} .feature p{color:#c3c8cc !important;}

/* ---- 6. RESPONSIVE PRODUCT CARDS — 2 per row on tablet & phone ---- */
@media(max-width:950px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:16px !important;}
}
@media(max-width:560px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;}
  .grid3 .card .pic{height:150px !important;}
  .grid3 .card .cardbody{padding:14px !important;}
  .grid3 .card h3{font-size:17px !important;}
  .grid3 .card p{font-size:12px !important;}
}

/* ---- 7. PRODUCT DETAIL — multi-image gallery --------------------- */
.product-gallery{display:flex;flex-direction:column;gap:14px;}
.pg-main{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 22px 55px rgba(0,0,0,.3);border:1px solid var(--line);}
.pg-main img{width:100%;height:520px;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.pg-main:hover img{transform:scale(1.05);}
.pg-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.pg-thumbs img{width:100%;height:96px;object-fit:cover;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:.25s;opacity:.75;}
.pg-thumbs img:hover{opacity:1;transform:translateY(-3px);}
.pg-thumbs img.active{border-color:var(--gold);opacity:1;}
@media(max-width:780px){.pg-main img{height:340px;}.pg-thumbs img{height:72px;}}

/* ---- 8. WHOLE PRODUCT CARD CLICKABLE (cursor only; JS handles nav) */
.grid3 .card,.card{cursor:pointer;}


/* ---- 9. FORCE STICKY NAVBAR (nav stays pinned on scroll) ---------- */
.header{position:sticky !important;top:0 !important;z-index:900 !important;}
.header .navwrap{position:sticky !important;top:0 !important;z-index:900 !important;}
/* when scrolled, the thin top strip collapses, nav stays */
.header.scrolled .top{max-height:0 !important;padding:0 !important;opacity:0 !important;overflow:hidden !important;border:0 !important;}

/* ---- 10. CONTACT FORM — 2 fields per row on phone (was 1) --------- */
@media(max-width:780px){
  .contact-box form,
  form{grid-template-columns:1fr 1fr !important;gap:12px !important;}
  .contact-box form .full,
  form .full{grid-column:1 / -1 !important;}
}
@media(max-width:430px){
  /* very small phones: keep name/phone paired, rest full width is fine */
  .contact-box form,form{gap:10px !important;}
}

/* ---- 11. NAV BUTTON TEXT — force bright, high-contrast ------------ */
.header .quote,
.header .navwrap .quote,
.header nav .quote,
a.quote{
  background:#111315 !important;
  color:#ffd95e !important;              /* bright gold, clearly readable */
  border:2px solid #ffd95e !important;
  font-weight:800 !important;
  font-size:13px !important;
}
.header .quote *,a.quote *{color:#ffd95e !important;}
.header .quote:hover,a.quote:hover{background:#000 !important;color:#fff !important;border-color:#fff !important;}

/* ---- 12. IMAGE LOGO (header + footer) ---------------------------- */
.logo{display:inline-flex !important;align-items:center;gap:0 !important;padding:0 !important;}
.logo img{
  height:52px !important;width:auto !important;max-width:230px !important;
  display:block !important;object-fit:contain !important;
}
/* header sits on gold — logo's navy tagline reads fine there */
.header .logo img{height:54px !important;}
@media(max-width:780px){
  .header .logo img{height:44px !important;max-width:190px !important;}
}
@media(max-width:430px){
  .header .logo img{height:38px !important;max-width:160px !important;}
}
/* footer is dark — put logo on a soft light chip so the navy tagline stays readable */
footer .logo,.foot .logo{
  background:#fff !important;border-radius:10px !important;
  padding:10px 14px !important;display:inline-flex !important;
}
footer .logo img,.foot .logo img{height:46px !important;max-width:210px !important;}

/* =====================================================================
   FIX PASS 2 — contact form, modal on phone, logo, sticky header
   ===================================================================== */

/* ---- A. CONTACT FORM — remove dark container, clean & 2-col ------- */
.contact-box{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;}
.contact-box form{
  background:transparent !important;border:none !important;padding:0 !important;
  grid-template-columns:1fr 1fr !important;gap:14px !important;
}
.contact-box form input,.contact-box form textarea,.contact-box form select{
  background:#fff !important;color:#111 !important;border:1px solid #d8cba0 !important;
  border-radius:10px !important;
}
.contact-box .full,.contact-box form .full{grid-column:1 / -1 !important;}
/* phone: keep 2 fields per row (name/phone side by side), full-width rows span both */
@media(max-width:600px){
  .contact-box form{grid-template-columns:1fr 1fr !important;gap:10px !important;}
  .contact-box .full,.contact-box form .full{grid-column:1 / -1 !important;}
  .contact-box{padding:0 !important;}
}

/* the generic dark <form> (used elsewhere) also loses the heavy container on phone */
@media(max-width:600px){
  form{background:transparent !important;border:none !important;padding:0 !important;
       grid-template-columns:1fr 1fr !important;gap:10px !important;}
  form .full{grid-column:1 / -1 !important;}
}

/* ---- B. MODAL ON PHONE — fits screen, button never cut ----------- */
@media(max-width:600px){
  #msQuoteModal{padding:12px !important;align-items:flex-start !important;}
  .ms-modal-card{
    width:calc(100vw - 24px) !important;
    max-height:calc(100vh - 24px) !important;
    margin:10px auto !important;overflow-y:auto !important;
  }
  .ms-modal-head{padding:16px 16px 12px !important;}
  .ms-modal-head h3{font-size:22px !important;}
  .ms-modal-form{grid-template-columns:1fr 1fr !important;gap:10px !important;padding:14px !important;}
  .ms-modal-form .full{grid-column:1 / -1 !important;}
  .ms-modal-submit{grid-column:1 / -1 !important;padding:14px !important;margin-top:2px !important;}
}
@media(max-width:400px){
  .ms-modal-head h3{font-size:20px !important;}
  .ms-modal-form{grid-template-columns:1fr !important;}
}

/* ---- C. LOGO — bigger & clearly visible on the gold navbar -------- */
.header .logo{
  background:#111315 !important;         /* dark chip so the logo pops on gold */
  border-radius:12px !important;
  padding:8px 14px !important;
  display:inline-flex !important;align-items:center;
}
.header .logo img{height:46px !important;width:auto !important;max-width:260px !important;}
@media(max-width:780px){
  .header .logo{padding:6px 10px !important;}
  .header .logo img{height:40px !important;max-width:200px !important;}
}
@media(max-width:430px){
  .header .logo img{height:34px !important;max-width:170px !important;}
}

/* ---- D. STICKY HEADER — make it truly stick (higher specificity) -- */
body .header{position:sticky !important;position:-webkit-sticky !important;top:0 !important;z-index:1000 !important;}
/* the navwrap inside also sticky-safe */
body .header .navwrap{position:relative !important;}

/* ---- E. STICKY FIX — overflow-x:hidden on body was killing sticky - */
/* move horizontal clipping to html so body no longer forms a scroll
   container (which had disabled position:sticky on the header) */
html{overflow-x:hidden !important;}
body{overflow-x:visible !important;}
/* ============================================================
   USER TWEAKS — button text, bigger logo, product card divider
   ============================================================ */

/* 1. REQUEST QUOTE button — force bright, readable text */
.header .quote,
.header .navwrap .quote,
.header nav .quote,
a.quote{
  background:#111315 !important;
  color:#ffdf6b !important;              /* bright gold text */
  border:2px solid #ffdf6b !important;
  -webkit-text-fill-color:#ffdf6b !important;  /* beats any text-fill override */
  text-shadow:none !important;
  font-weight:800 !important;
  font-size:13px !important;
  letter-spacing:.6px !important;
}
.header .quote *,a.quote *{
  color:#ffdf6b !important;
  -webkit-text-fill-color:#ffdf6b !important;
}
.header .quote:hover,a.quote:hover{
  background:#000 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border-color:#fff !important;
}

/* 2. BIGGER LOGO in the navbar */
.header .logo{
  background:#f6f4f4 !important;
  border-radius:5px !important;
  padding:5px 12px !important;
}
.header .logo img{
  height:74px !important;                 /* bigger — was ~46px */
  max-width:320px !important;
  width:auto !important;
}
@media(max-width:780px){
  .header .logo img{height:50px !important;max-width:230px !important;}
}
@media(max-width:430px){
  .header .logo img{height:42px !important;max-width:190px !important;}
}

/* 3. GOLD DIVIDER LINE between image and content in product cards */
.grid3 .card .pic,
.card .pic{
  border-bottom:3px solid var(--gold) !important;   /* the golden line */
}
/* =========================================================
   MULTI STAR EXIM — watermark on every product image
   (baked into assets/img/wm/* product image copies)
   ========================================================= */

/* ---------- Home hero: product tags ---------- */
.hero-tags{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px;max-width:720px}
.hero-tags li{padding:7px 14px;border:1px solid rgba(242,199,92,.55);background:rgba(20,23,25,.45);color:#f8f6f1;font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;backdrop-filter:blur(2px)}

/* Scooty collage: show all four brands, don't crop */
.card .pic img[src*="scooty.jpg"],.gallery img[src*="scooty.jpg"]{object-fit:contain;background:#fff}

/* ---------- Mobile: 3 related cards sit in ONE row ---------- */
@media(max-width:600px){
  .grid3.stack-m{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important}
  .grid3.stack-m .card{border-radius:12px !important}
  .grid3.stack-m .card .pic{height:96px !important}
  .grid3.stack-m .card .cardbody{padding:9px 5px 11px !important;min-height:0 !important}
  .grid3.stack-m .card .cardbody h3,.grid3.stack-m .card h3{font-size:11.5px !important;line-height:1.1 !important;overflow-wrap:break-word;letter-spacing:0 !important}
  .grid3.stack-m .card .cardbody p,.grid3.stack-m .card p{display:none !important}
  .grid3.stack-m .card .arrow{font-size:8px !important;display:block;margin-top:8px;letter-spacing:.4px}
  .grid3.stack-m }

/* =====================================================================
   FOOTER — restored layout (Products in 3 columns, as in reference SS)
   ===================================================================== */
.foot{grid-template-columns:1.5fr 3fr 1fr 1.4fr !important;gap:45px !important;}
.foot>div:nth-child(2){display:grid;grid-template-columns:repeat(3,1fr);column-gap:28px;align-content:start;}
.foot>div:nth-child(2)>h4{grid-column:1/-1;}
.foot>div:nth-child(2)>a{margin:0 !important;padding:5px 0;line-height:1.5;}
.foot>div:nth-child(2)>a[href="rice.html"]{order:1;}
.foot>div:nth-child(2)>a[href="steel-price-list.html"]{order:2;}
.foot>div:nth-child(2)>a[href="scooty.html"]{order:3;}
@media(max-width:950px){
  .foot{grid-template-columns:1fr 1fr !important;}
  .foot>div:nth-child(2){grid-column:1/-1;order:3;}
}
@media(max-width:520px){
  .foot{grid-template-columns:1fr !important;}
  .foot>div:nth-child(2){grid-template-columns:1fr 1fr;}
}

/* Products page: "One partner for every steel requirement" — checklist text was hidden on dark bg, make it white */
.xsplit .checks li{color:#fff !important;}

/* MULTI STAR EXIM — keep the baked bottom-right watermark inside the card/box crop */
img[src*="/wm/"]:not([src*="scooty"]){object-position:right bottom}


/* Scooty collage: show the FULL image (incl. bottom-right watermark) in cards/galleries — no cropping */
.card .pic img[src*="scooty"],.gallery img[src*="scooty"]{object-fit:contain!important;object-position:center!important;background:#fff!important}
.card .pic:has(img[src*="scooty"]){background:#fff!important}

/* Steel Price List hero ("Today's steel rates") sits on a LIGHT background — checklist text must be black */
.xsplit .checks.on-light li{color:#111!important}

/* Pipes image (Better steel enquiries): keep bottom-right watermark inside the card crop */
img[src*="mspr1-hd"]{object-position:right bottom!important}

/* =====================================================================
   ENQUIRY FORMS — status line, loading state, thank-you panel
   (popup + contact page; driven by assets/js/enquiry.js)
   ===================================================================== */
.enq-status{grid-column:1/-1;font-size:13px;line-height:1.5;min-height:0;border-radius:8px;}
.enq-status:empty{display:none;}
.enq-status.info{color:#6b5311;background:rgba(216,165,43,.12);padding:10px 12px;border:1px solid rgba(216,165,43,.35);}
.enq-status.error{color:#8a1f11;background:#fdecea;padding:10px 12px;border:1px solid #f3b8b0;}
.enq-status.error a{color:#8a1f11;font-weight:800;text-decoration:underline;}
form button[type="submit"]:disabled{opacity:.7;cursor:wait;filter:grayscale(.2);}

form.enq-done > *:not(.enq-success){display:none !important;}
form.enq-done{display:block !important;background:transparent !important;border:none !important;padding:0 !important;box-shadow:none !important;}
.enq-success{text-align:center;padding:30px 20px 22px;color:#1d1f22;background:#fbf9f3;border:1px solid #e4d9b5;border-radius:14px;}
.ms-modal-form.enq-done{padding:0 !important;}
.ms-modal-form.enq-done .enq-success{border:none;border-radius:0 0 18px 18px;}
.enq-success h4{font:700 34px/1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:1px;margin:14px 0 8px;color:#111315;}
.enq-success p{max-width:420px;margin:0 auto 20px;font-size:14px;line-height:1.6;color:#4a4a4a;}
.enq-tick{width:64px;height:64px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font-size:26px;color:#111315;
  background:var(--gold-gradient);box-shadow:0 10px 26px rgba(216,165,43,.35);animation:enqPop .5s cubic-bezier(.2,.9,.3,1.4);}
@keyframes enqPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.enq-actions{display:flex;flex-direction:column;gap:10px;align-items:center;}
.enq-wa{display:inline-flex;align-items:center;gap:10px;background:#25d366;color:#062b14 !important;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;font-size:13px;padding:13px 22px;border-radius:9px;text-decoration:none;transition:.25s;}
.enq-wa i{font-size:20px;}
.enq-wa:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 12px 26px rgba(37,211,102,.3);}
.enq-again{background:none !important;border:none !important;color:#6b5311 !important;font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer;padding:6px !important;}

.enq-note{font-size:12px !important;margin:0 auto 14px !important;color:#6b5311 !important;}
.enq-note a{color:#8a5a00;font-weight:800;text-decoration:underline;}