/* ==========================================================
   5th Odisha Mining & Infrastructure International Expo 2027
   Brand system derived from official 2027 brochure:
   Expo Yellow #F7B500 · Carbon Black #141517 · White
   Signature motif: diagonal "//" slashes + faceted panels
   ========================================================== */
:root{
  --yellow:#F7B500;
  --yellow-deep:#D99E00;
  --black:#141517;
  --black-2:#1D1F22;
  --black-3:#26282C;
  --white:#FFFFFF;
  --paper:#F7F6F3;
  --ink:#1A1B1E;
  --grey:#8A8F96;
  --grey-d:#5A5E64;
  --line:rgba(255,255,255,.1);
  --line-l:rgba(20,21,23,.12);
  --max:1200px;
  --disp:'Montserrat',sans-serif;
  --body:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--black);color:var(--white);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,h4,.disp{font-family:var(--disp);font-weight:800;line-height:1.08;letter-spacing:-.01em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* --- brand atoms --- */
.slash{display:inline-block;font-family:var(--disp);font-weight:800;color:var(--yellow);font-style:italic;letter-spacing:-.08em}
.eyebrow{font-family:var(--disp);font-weight:700;font-style:italic;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"//";font-style:italic;letter-spacing:-.1em}
.hl{color:var(--yellow)}
.rule{width:64px;height:5px;background:var(--yellow);margin:18px 0 0;transform:skewX(-20deg)}

/* --- BUTTON CONTRAST HOVER FIX --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--disp);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .92rem;
  padding: 15px 30px;
  transition: all .22s ease;
  cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.btn.solid {
  background: var(--yellow);
  color: var(--black) !important; /* Force black text color initially */
}

/* FIX: Hover par background white hoga toh text color ko dark rakhna zaroori hai */
.btn.solid:hover {
  background: var(--white) !important;
  color: var(--black) !important; /* White background par text clear black dikhega */
}

/* Nav specific button safety wrapper */
.nlinks .btn.solid,
.nlinks .btn.solid:hover {
  border-bottom: none !important; /* Nav links ka bottom border line clean karne ke liye */
}

.btn.dark {
  background: var(--black);
  color: var(--white);
}
.btn.dark:hover {
  background: var(--black-3);
}

.btn.ghost {
  border: 2px solid var(--yellow);
  color: var(--white);
  clip-path: none;
}
.btn.ghost:hover {
  background: var(--yellow);
  color: var(--black) !important;
}

.btn .arr {
  transition: transform .22s ease;
}
.btn:hover .arr {
  transform: translateX(4px);
}

.nlinks .btn {
  padding: 10px 20px;
  font-size: .8rem;
}

/* --- nav --- */
nav.site{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(20,21,23,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .25s}
nav.site.scrolled{box-shadow:0 6px 30px rgba(0,0,0,.45)}
.navin{max-width:var(--max);margin:0 auto;padding:0 24px;height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:80px;width:auto}
.nlinks{display:flex;gap:26px;align-items:center;font-family:var(--disp);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.nlinks a{color:var(--grey);padding:6px 0;border-bottom:3px solid transparent;transition:color .2s,border-color .2s}
.nlinks a:hover{color:var(--white)}
.nlinks a.active{color:var(--white);border-color:var(--yellow)}
.nlinks .btn{padding:10px 20px;font-size:.8rem}
.burger{display:none;background:none;border:none;color:var(--white);font-size:1.7rem;cursor:pointer;line-height:1}

/* nav dropdown (Exhibit / Visit) */
/* nav dropdown (Exhibit / Visit) */
.nav-drop {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%; /* Ensure hover stays alive across the header height */
}

.nav-drop-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  
  /* FIX: Margin ko hata kar padding lagayi taaki dead-zone khatam ho jaye */
  margin-top: 0; 
  padding-top: 14px; /* Yeh invisible bridge ka kaam karega */
  
  min-width: 210px;
  background: transparent; /* Main outer container transparent rahega */
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px) scale(.96);
  transform-origin: top center;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

/* NEW SUB-CONTAINER: Background block ko wrap karne ke liye */
.nav-drop-menu::before {
  content: '';
  position: absolute;
  top: 14px; /* Dropdown menu top padding ke baad shuru hoga */
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--black-2);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
  z-index: -1;
  border-radius: 8px; /* Optional: adds a premium look */
}

/* Menu items adjustment */
.nav-drop-menu a {
  display: block;
  position: relative;
  margin-top: 2px; /* Smooth listing layout space */
  padding: 10px 14px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--grey);
  border-bottom: none;
  z-index: 1;
}

/* Pehle link ke liye top spacing set karna jab box khule */
.nav-drop-menu a:first-of-type {
  margin-top: 16px; 
}
.nav-drop-menu a:last-of-type {
  margin-bottom: 8px;
}

.nav-drop-menu a:hover {
  color: var(--white);
  background: rgba(255,255,255,.06);
  border-radius: 4px;
}

.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.nav-toggle{
    width:100%;
    background:none;
    border:none;
    color:var(--grey);
    font:inherit;
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:.08em;
    cursor:pointer;
    text-align:left;
    padding:6px 0;
}

.nav-toggle:hover{
    color:#fff;
}


/* ============ MOBILE (<=1020px) — NAV, CONSOLIDATED ============ */
@media (max-width:1020px){

  .nlinks{
    position:fixed;
    inset:78px 0 auto 0;
    background:var(--black-2);
    flex-direction:column;
    padding:28px 24px;
    gap:20px;
    display:none;
    border-bottom:4px solid var(--yellow);
    overflow-y:auto;
    max-height:calc(100vh - 78px);
  }
  .nlinks.open{display:flex}
  .burger{display:block}

  .nlinks>a,
  .nav-toggle{width:100%;text-align:left}

  .nav-drop{
    position:relative;
    flex-direction:column !important;
    align-items:flex-start !important;
    width:100% !important;
  }

  /* desktop hover/focus behaviour ko poori tarah kill karo — sirf JS ka .active control karega */
  .nav-drop:hover .nav-drop-menu,
  .nav-drop:focus-within .nav-drop-menu{
    opacity:0 !important;
    pointer-events:none !important;
    display:none !important;
    transform:none !important;
  }

  /* desktop wala decorative background box hata do */
  .nav-drop-menu::before{display:none !important}

  .nav-drop-menu{display:none}

  .nav-drop.active .nav-drop-menu{
    display:block !important;
    opacity:1 !important;
    pointer-events:auto !important;
    position:static !important;
    transform:none !important;
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    padding:4px 0 0 16px !important;
    margin-top:6px !important;
    min-width:0 !important;
    width:100% !important;
    transition:none !important;
  }

  .nav-drop-menu a{
    padding:8px 0 !important;
    font-size:.74rem !important;
    display:block !important;
    margin-top:0 !important;
  }

  .nav-toggle::after{
    content:"▾";
    float:right;
    transition:transform .25s;
  }
  .nav-drop.active .nav-toggle::after{transform:rotate(180deg)}
}


  

/* --- ticker strip --- */
.ticker{background:var(--yellow);color:var(--black);overflow:hidden;padding:9px 0;font-family:var(--disp);font-weight:800;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
.ticker-track{display:flex;gap:56px;width:max-content;animation:marq 30s linear infinite;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%)}
.ticker-track span::after{content:"//";margin-left:56px;font-style:italic}

/* --- hero --- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-top:78px}
.hero-bg{position:absolute;inset:0;background-position:center;background-size:cover;transform:scale(1.06);animation:heroZoom 12s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,21,23,.75) 0%,rgba(20,21,23,.35) 45%,rgba(20,21,23,.97) 100%)}
.hero-facet{position:absolute;top:0;right:-6%;width:52%;height:46%;background:linear-gradient(135deg,var(--yellow) 0%,var(--yellow-deep) 100%);clip-path:polygon(38% 0,100% 0,100% 62%,62% 100%,0 0);opacity:.92;z-index:1}
.hero-facet::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 55%,rgba(20,21,23,.28) 56%)}
.hero-in{position:relative;z-index:2;width:100%;padding:120px 0 0}
.hero .kicker{font-family:var(--disp);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(.85rem,1.6vw,1.05rem);color:var(--yellow);margin-bottom:14px;display:flex;gap:12px;align-items:center}
.hero .kicker::before{content:"//";letter-spacing:-.1em}
.hero h1{font-size:clamp(2.4rem,5.8vw,4.6rem);font-weight:800;text-transform:uppercase;max-width:980px}
.hero h1 .yr{background:var(--yellow);color:var(--black);padding:0 14px;display:inline-block;transform:skewX(-8deg)}
.hero-meta{display:flex;flex-wrap:wrap;gap:14px 34px;font-family:var(--disp);font-weight:700;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;margin:24px 0 30px}
.hero-meta b{color:var(--yellow)}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px}
.count{display:inline-grid;grid-template-columns:repeat(4,minmax(100px, 120px));border:1px solid var(--line);background:rgba(20,21,23,.66);backdrop-filter:blur(8px)}
.count>div{padding:9px 4px;text-align:center;border-right:1px solid var(--line)}
.count>div:last-child{border-right:none}
.count b{display:block;font-family:var(--disp);font-weight:800;font-size:1.35rem;color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.count small{font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}

/* page hero (subpages) */
.page-hero{position:relative;padding:170px 0 84px;background:var(--black-2);overflow:hidden}
.page-hero-bg{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover}
.page-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,21,23,.88) 0%,rgba(20,21,23,.74) 50%,rgba(20,21,23,.95) 100%)}
.page-hero .facet{position:absolute;top:-40px;right:-80px;width:420px;height:420px;background:var(--yellow);clip-path:polygon(30% 0,100% 0,100% 70%,55% 100%,0 15%);opacity:.14;z-index:1}
.page-hero .facet.b{right:auto;left:-140px;top:auto;bottom:-160px;opacity:.07}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);text-transform:uppercase;max-width:900px;position:relative}
.page-hero p.lead{color:var(--grey);max-width:720px;margin-top:18px;font-size:1.08rem;position:relative}
.crumbs{font-family:var(--disp);font-weight:700;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-bottom:20px;position:relative}
.crumbs a:hover{color:var(--yellow)}
.crumbs span{color:var(--yellow)}

/* --- sections --- */
section{padding:96px 0}
.sec-head{margin-bottom:54px;max-width:800px}
.sec-head h2{font-size:clamp(1.9rem,4.2vw,3rem);text-transform:uppercase;margin-top:14px}
.sec-head p{color:var(--grey);margin-top:16px;font-size:1.05rem}
.light{background:var(--paper);color:var(--ink)}
.light .sec-head p{color:var(--grey-d)}
.center{text-align:center}
.center .eyebrow,.center .rule{justify-content:center;margin-left:auto;margin-right:auto}

/* stat tiles (event scale) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stat{border:2px solid var(--yellow);padding:34px 24px;text-align:center;position:relative;background:var(--white);transition:transform .25s,box-shadow .25s}
.stat:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,21,23,.12)}
.stat b{display:block;font-family:var(--disp);font-weight:800;font-size:2.7rem;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-family:var(--disp);font-weight:600;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-d);display:block;margin-top:8px}
.stat i{position:absolute;top:-2px;left:-2px;width:26px;height:26px;background:var(--yellow);clip-path:polygon(0 0,100% 0,0 100%)}

/* icon cards */
/* ----- MODERN RE-BALANCED GRID SYSTEM ----- */

.feat-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}

/* Intro Text - Split into 2 neat columns on wide screens */
.feat-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px; /* Space between intro text and cards */
}

.feat-intro .lead-text {
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--grey-d, #4A4A4A);
  margin: 0;
}

/* 3-Column Grid Layout for Cards */
.icards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 Equal columns */
  gap: 32px;
}

/* Premium Card Design */
.icard {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-top: 4px solid var(--yellow, #F4C430); /* Top accent block instead of side border */
  border-radius: 0 0 16px 16px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column; /* Stack contents vertically */
  gap: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

/* Card Hover Mechanics */
.icard:hover {
  transform: translateY(-8px); /* Elevates upwards smoothly */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

/* Badge Styling */
.icard .ic {
  width: 44px;
  height: 44px;
  background: var(--yellow, #F4C430);
  color: #000;
  font-family: var(--disp, sans-serif);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border-radius: 8px;
}

.icard-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  line-height: 1.4;
  color: var(--ink, #111111);
}

.icard-content p {
  color: var(--grey-d, #666666);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Dark Theme Compatibility */
.dark .feat-intro .lead-text { color: #A0A0A0; }
.dark .icard {
  background: var(--black-2, #161719);
  border-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.dark .icard h3 { color: #FFFFFF; }
.dark .icard p { color: #A0A0A0; }


/* ----- RESPONSIVE ADAPTATIONS ----- */

@media (max-width: 992px) {
  /* Break to 2 columns on tablets */
  .icards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .feat-intro {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  /* Stack everything into a single column on mobile */
  .icards-grid {
    grid-template-columns: 1fr;
  }
}



/* mineral bars */
.mineral{display:grid;gap:14px;max-width:840px}
.mrow{display:grid;grid-template-columns:140px 1fr 64px;align-items:center;gap:18px}
.mrow .lbl{font-family:var(--disp);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.85rem}
.mbar{height:22px;background:var(--black-3);position:relative;overflow:hidden;transform:skewX(-14deg)}
.light .mbar{background:#E7E4DC}
.mbar i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--yellow-deep),var(--yellow));transition:width 1.3s cubic-bezier(.25,.8,.3,1)}
.mrow .pct{font-family:var(--disp);font-weight:800;font-size:1.4rem;color:var(--yellow);text-align:right;font-variant-numeric:tabular-nums}
.light .mrow .pct{color:var(--ink)}
.mnote{color:var(--grey);font-size:.92rem;margin-top:22px;max-width:740px}

/* categories / focus */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-l);border:1px solid var(--line-l)}
.cat{background:var(--white);padding:32px 26px;position:relative;transition:background .25s}
.cat:hover{background:#FFF7E0}
.cat img{height:50px;width:auto;margin-bottom:16px}
.cat h3{font-size:1.05rem;font-weight:800;text-transform:uppercase;color:var(--ink)}
.cat::after{content:"";position:absolute;left:26px;bottom:20px;width:28px;height:4px;background:var(--yellow);transform:skewX(-20deg);transition:width .25s}
.cat:hover::after{width:56px}

/* checklist columns */
.plist{columns:2;column-gap:56px;max-width:1000px}
.plist li{break-inside:avoid;padding:9px 0 9px 30px;position:relative;border-bottom:1px solid var(--line-l);font-size:.97rem;color:var(--grey-d)}
.plist li::before{content:"//";position:absolute;left:0;top:9px;font-family:var(--disp);font-weight:800;font-style:italic;color:var(--yellow);font-size:.85rem}
.dark .plist li{color:var(--grey);border-color:var(--line)}

/* split feature rows */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:84px}
.feat:last-child{margin-bottom:0}
.feat.rev-order .txt{order:2}
.feat img{width:100%;height:auto;aspect-ratio:auto;object-fit:cover;border:1px solid var(--line);box-shadow:14px 14px 0 rgba(247,181,0,.22)}
.feat h3{font-size:1.6rem;text-transform:uppercase;margin-bottom:12px}
.feat p{color:var(--grey);margin-bottom:12px}
.light .feat p{color:var(--grey-d)}

/* marquee */
/* marquee */
.logo-marq {
  overflow: hidden;
  position: relative;
  padding: 12px 0;
  border-top: 1px solid var(--line-l);
  border-bottom: 1px solid var(--line-l);
  
  /* Page ke 80% ke andar scroll rakhne ke liye */
  width: 80%;
  margin: 0 auto; 
}

/* Dono corners par dark fading effect */
.logo-marq::before,
.logo-marq::after {
  content: "";
  height: 100%;
  position: absolute;
  width: 80px; /* Isko thoda badha diya hai taaki aur smooth fade ho */
  z-index: 2;
  top: 0;
  pointer-events: none; /* Taaki shadow ke upar bhi hover kaam kare */
}

.logo-marq::before {
  left: 0;
  /* Left side ko dark se transparent banayega */
  background: linear-gradient(to right, rgba(20, 21, 23, 1) 0%, rgba(20, 21, 23, 0) 100%); 
}

.logo-marq::after {
  right: 0;
  /* Right side ko dark se transparent banayega */
  background: linear-gradient(to left, rgba(20, 21, 23, 1) 0%, rgba(20, 21, 23, 0) 100%);
}

.logo-track {
  display: flex;
  gap: 18px;
  width: max-content;
  /* Speed ko 60s se thoda tej kiya hai kyunki images badh gayi hain */
  animation: marq 70s linear infinite; 
}

.logo-track:hover {
  animation-play-state: paused;
}

.logo-track img {
  height: 76px;
  width: auto;
  border: 1px solid var(--line-l);
  background: #fff;
}

/* Infinite loop animation ka sahi tarika */
@keyframes marq {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Kyunki humne items exact double kiye hain, isliye -50% par smoothly infinite loop banega */
    transform: translateX(-50%); 
  }
}

/* partners */
/* ----- PREMIUM PARTNERS SECTION ----- */

/* ----- ULTRA-MINIMAL PREMIUM PARTNERS ----- */

.partners {
  display: flex;
  flex-direction: column; /* Sabhi groups ko ek ke niche ek horizontal line mein laya */
  gap: 48px; /* Har group ke beech achha space */
  max-width: 1000px;
  margin: 0 auto;
}

/* Har ek horizontal row */
.pgroup {
  display: flex;
  align-items: center; /* Label aur logos ek line mein */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Subtle dividing line */
  padding-bottom: 28px;
}

.pgroup:last-child {
  border-bottom: none; /* Aakhri row ke niche line nahi chahiye */
}

/* Left side ka text label (Organiser, Partner etc.) */
.pgroup small {
  font-family: var(--disp);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--grey-d);
  width: 220px; /* Label ko fix space di taaki saare logos ek hi line se shuru hon */
  flex-shrink: 0;
}

/* Logos ka container */
.pgroup .prow {
  display: flex;
  gap: 24px; /* Logos ke beech ka gap badhaya */
  align-items: center;
  flex-wrap: wrap;
}

/* Logos ki styling - Ekdam Saaf aur Bada dikhne ke liye */
.pgroup img {
  height: 68px; /* Size 52px se badha kar 68px kiya taaki text saaf padha jaye */
  width: auto;
  object-fit: contain; /* Image stretch ya distort nahi hogi */
  background: #ffffff; 
  padding: 12px 18px; /* Andar ki padding badhai taaki logos ko breathing space mile */
  border-radius: 8px;
  filter: grayscale(20%) opacity(0.9); /* Halka sa blend kiya screen ke sath */
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Elegant Hover Animation */
.pgroup img:hover {
  filter: grayscale(0%) opacity(1); /* Hover par poora original color */
  transform: scale(1.04) translateY(-2px); /* Halka sa upar uthega smoothly */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); /* Premium soft shadow */
}

/* Mobile responsive karne ke liye chhoti screen par layouts adjust ho jayenge */
@media (max-width: 768px) {
  .pgroup {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .pgroup small {
    width: 100%;
    margin-bottom: 8px;
  }
}





/* gallery */
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ggrid a{overflow:hidden;display:block;position:relative}
.ggrid img{width:100%;height:260px;object-fit:cover;transition:transform .5s ease}
.ggrid a:hover img{transform:scale(1.06)}
.ggrid a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(20,21,23,.5));opacity:0;transition:opacity .3s}
.ggrid a:hover::after{opacity:1}

/* CTA band */
.cta-band{background:linear-gradient(rgba(20,21,23,.82),rgba(20,21,23,.82)),url('../img/expo/DSC059088.JPG') center/cover fixed;padding:92px 0;position:relative;overflow:hidden}
.cta-band .slashbg{position:absolute;right:-40px;top:-40px;font-family:var(--disp);font-weight:800;font-style:italic;font-size:26rem;color:rgba(247,181,0,.08);line-height:.8;user-select:none;pointer-events:none}
.cta-band h2{font-size:clamp(1.9rem,4.4vw,3.1rem);text-transform:uppercase;max-width:820px}
.cta-band p{color:var(--grey);margin:16px 0 30px;max-width:640px}
@media(prefers-reduced-motion:reduce){.cta-band{background-attachment:scroll}}

/* register cards */
.reg{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.reg a{background:var(--black-2);border:1px solid var(--line);padding:46px 40px;display:block;position:relative;transition:transform .25s,border-color .25s}
.reg a:hover{transform:translateY(-6px);border-color:var(--yellow)}
.reg h3{font-size:1.7rem;text-transform:uppercase;color:var(--yellow);margin-bottom:8px}
.reg p{color:var(--grey);max-width:400px}
.reg .go{position:absolute;top:42px;right:38px;font-family:var(--disp);font-weight:800;font-size:1.6rem;color:var(--yellow);transition:transform .25s}
.reg a:hover .go{transform:translateX(6px)}

/* people */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.person{border-left:4px solid var(--yellow);padding:8px 0 8px 22px;background:var(--black-2)}
.person{padding:22px}
.person b{font-family:var(--disp);text-transform:uppercase;font-size:1.05rem;letter-spacing:.02em;display:block;margin-bottom:6px}
.person a{display:block;color:var(--grey);font-size:.95rem;padding:2px 0;transition:color .2s}
.person a:hover{color:var(--yellow)}

/* forms */
.form{display:grid;gap:16px;max-width:640px}
.form.wide{max-width:880px}
.form input,.form textarea,.form select{width:100%;min-height:48px;background:var(--black-2);border:1px solid var(--line);color:var(--white);padding:12px 16px;font-family:var(--body);font-size:1rem}
.form textarea{min-height:auto}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--yellow);outline-offset:0}
.form label{font-family:var(--disp);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.light .form input,.light .form textarea,.light .form select{background:var(--white);color:var(--ink);border-color:var(--line-l)}
.light .form label{color:var(--grey-d)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form fieldset{border:none;padding:0;margin:0;display:grid;gap:16px}
.form legend{font-family:var(--disp);font-weight:800;font-size:1.1rem;text-transform:uppercase;color:var(--ink);padding:0 0 6px;margin-bottom:4px;border-bottom:2px solid var(--yellow);width:100%}
.dark-section .form legend{color:var(--white)}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.check-grid label,.radio-card{display:flex;align-items:center;gap:10px;font-family:var(--body);font-weight:400;text-transform:none;letter-spacing:0;font-size:.94rem;color:var(--grey-d);cursor:pointer;padding:10px 12px;border:1px solid var(--line-l);background:var(--white);min-height:44px}
.check-grid input[type="checkbox"],.radio-card input[type="radio"]{width:18px;height:18px;min-height:auto;flex-shrink:0;accent-color:var(--yellow-deep)}
.radio-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.consent{display:flex;align-items:flex-start;gap:10px;color:var(--grey-d);font-size:.85rem;line-height:1.5}
.consent input{width:18px;height:18px;min-height:auto;flex-shrink:0;margin-top:2px;accent-color:var(--yellow-deep)}
.form-note{font-size:.85rem;color:var(--grey-d);background:#F3F1EA;border-left:3px solid var(--yellow-deep);padding:12px 16px}
@media(max-width:640px){.form-row{grid-template-columns:1fr}}

/* map */
.map{border:1px solid var(--line);filter:grayscale(.4) contrast(1.05)}
.map iframe{width:100%;height:420px;border:0;display:block}

/* footer */
footer.site{position:relative;overflow:hidden;border-top:4px solid var(--yellow);padding:70px 0 34px;background:#0F1012}
footer.site::before{content:"//";position:absolute;left:-70px;bottom:-170px;font-family:var(--disp);font-weight:800;font-style:italic;font-size:24rem;color:rgba(247,181,0,.045);line-height:.8;user-select:none;pointer-events:none;z-index:0}
footer.site .wrap{position:relative;z-index:1}
footer.site .flogo-wrap{position:relative;display:inline-block;margin-bottom:18px}
footer.site .flogo-wrap::after{content:"";position:absolute;left:0;bottom:-8px;width:44px;height:3px;background:var(--yellow);transform:skewX(-20deg)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;margin-bottom:48px}
footer img.flogo{height:52px;width:auto;margin-bottom:18px}
footer p{color:var(--grey);font-size:.94rem;max-width:340px}
.fcol h4{font-family:var(--disp);font-weight:800;font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--yellow);margin-bottom:16px}
.fcol a{display:block;color:var(--grey);font-size:.95rem;padding:5px 0;transition:color .2s}
.fcol a:hover{color:var(--white)}
.fbottom{border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#6C7178;font-size:.85rem}
.socials{display:flex;gap:18px}
.socials a{color:var(--grey);font-family:var(--disp);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.socials a:hover{color:var(--yellow)}

/* reveal animations */
.rev{opacity:0;transform:translateY(30px);transition:opacity .75s ease,transform .75s ease}
.rev.in{opacity:1;transform:none}
.rev.d1{transition-delay:.1s}.rev.d2{transition-delay:.2s}.rev.d3{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .ticker-track,.logo-track,.hero-bg{animation:none}
}

/* focus visibility */
a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* skip link */
.skip-link{position:fixed;top:-60px;left:12px;z-index:500;background:var(--yellow);color:var(--black);font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:.85rem;letter-spacing:.06em;padding:12px 20px;transition:top .2s ease}
.skip-link:focus{top:12px}

/* quick-contact floating widget */
.qc{position:fixed;left:22px;bottom:22px;z-index:250;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:10px}
.qc-toggle{width:52px;height:52px;background:var(--black);border:2px solid var(--yellow);color:var(--yellow);display:flex;align-items:center;justify-content:center;cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:transform .25s}
.qc-toggle:hover{transform:translateY(-4px)}
.qc-toggle svg{width:24px;height:24px}
.qc-menu{display:none;flex-direction:column;gap:8px;background:var(--black-2);border:1px solid var(--line);padding:10px;min-width:198px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.qc.open .qc-menu{display:flex}
.qc-menu a{display:flex;align-items:center;gap:10px;color:var(--white);font-family:var(--disp);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;padding:10px 12px;transition:background .2s,color .2s}
.qc-menu a:hover{background:var(--yellow);color:var(--black)}
.qc-menu a svg{width:18px;height:18px;flex-shrink:0}
@media(max-width:600px){.qc{left:16px;bottom:16px}#toTop{right:16px;bottom:16px}}

/* toast */
#toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);z-index:500;background:var(--yellow);color:var(--black);font-family:var(--disp);font-weight:700;font-size:.92rem;padding:16px 26px;max-width:90vw;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* honeypot: visually hidden, still readable by screen readers as "leave empty" */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* inline form feedback */
.form .err{color:#ff6b6b;font-size:.82rem;font-family:var(--body);font-weight:600;display:none;margin-top:-4px}
.form .field.invalid .err{display:block}
.form .field.invalid input,.form .field.invalid textarea{outline:2px solid #ff6b6b}

/* filter/search boxes */
.filter-box{max-width:420px;margin-bottom:32px;position:relative}
.filter-box input{width:100%;background:var(--black-2);border:1px solid var(--line);color:var(--white);padding:14px 70px 14px 44px;font-family:var(--body);font-size:1rem}
.light .filter-box input{background:var(--white);color:var(--ink);border-color:var(--line-l)}
.filter-box input:focus{outline:2px solid var(--yellow);outline-offset:0}
.filter-box svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--grey);pointer-events:none}
.filter-box .count{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--disp);font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow-deep)}
.plist li.hide,.cat.hide{display:none}
.no-results{display:none;color:var(--grey-d);font-size:.95rem;padding:20px 0}
.no-results.show{display:block}

/* venue zone popover */
.zone{cursor:pointer}
.zone-pop{display:none;position:fixed;z-index:260;background:var(--white);color:var(--ink);border:1px solid var(--line-l);border-left:5px solid var(--yellow);padding:18px 20px;max-width:320px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.zone-pop.show{display:block}
.zone-pop h4{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:1rem;margin-bottom:6px;color:var(--ink)}
.zone-pop p{font-size:.9rem;color:var(--grey-d)}
.zone-pop button{position:absolute;top:8px;right:10px;background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--grey-d)}

/* lightbox nav */
#lb .lbnav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:2px solid var(--yellow);color:var(--yellow);width:48px;height:48px;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
#lb .lbnav:hover{background:var(--yellow);color:var(--black)}
#lb .lbprev{left:5vmin}
#lb .lbnext{right:5vmin}
#lb .lbcount{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-family:var(--disp);font-weight:700;color:var(--yellow);letter-spacing:.1em;font-size:.85rem}
@media(max-width:700px){#lb .lbnav{width:40px;height:40px;font-size:1.1rem}#lb .lbprev{left:2vmin}#lb .lbnext{right:2vmin}}

/* responsive */
@media(max-width:1020px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .icards{grid-template-columns:1fr 1fr}
  .feat,.reg{grid-template-columns:1fr}
  .feat.rev-order .txt{order:0}
  .cats{grid-template-columns:1fr 1fr}
  .people{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .ggrid{grid-template-columns:1fr 1fr}
  .plist{columns:1}
  section{padding:72px 0}
}
@media(max-width:600px){
  .stats,.icards,.cats,.fgrid,.ggrid{grid-template-columns:1fr}
  .count{grid-template-columns:repeat(4,minmax(48px,60px))}
  .count b{font-size:1.1rem}
  .hero-facet{width:78%}
}

@media (max-width: 640px) {
    /* 1. Team section ke boxes ko mobile par stack karna */
    .people {
        grid-template-columns: 1fr !important; /* Inline grid style ko overwrite karega */
        justify-content: center;
        gap: 16px; /* Dono boxes ke beech gap */
    }

    /* 2. Individual person card ko thoda padding aur border dekar clean dikhana */
    .person {
        width: 100%;
        box-sizing: border-box;
        padding: 16px;
        /* background: var(--white); Agar light background par hai */
        border: 1px solid var(--line-l);
        border-radius: 4px; /* Halal sa curve look */
    }
}

/* ----- MAIN CONTAINER & TOP COLUMN REFINEMENTS ----- */
.mining-heart-section {
  padding: 80px 0;
  background-color: #F9FAFB; /* Off-white surface background makes white cards pop */
}

.feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
}

.feat .txt .eyebrow {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--yellow, #F4C430);
  font-weight: 700;
}

.feat .txt h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  text-transform: uppercase;
  margin: 14px 0 20px 0;
  color: #111111;
  line-height: 1.2;
}

.feat .txt .rule {
  width: 60px;
  height: 4px;
  background: var(--yellow, #F4C430);
  margin-bottom: 24px;
}

.feat .txt .lead-desc {
  color: #555555; /* Solid visible text color */
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 16px;
}

.feat .img-frame img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}

/* ----- BENTO GRID SYSTEM FOR CARDS ----- */
.icards-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Clean 3-column structural balance */
  gap: 24px;
}

/* Premium Card Refactor */
.icards-bento .icard {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.4s ease;
}

/* Elevating Hover Motion */
.icards-bento .icard:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.05);
}

/* Modern Minimalist Icon Accent */
.icards-bento .ic-icon {
  width: 48px;
  height: 48px;
  background: rgba(244, 196, 48, 0.12); /* Subtle yellow tint wrapper */
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border-radius: 10px;
}

/* Card Content Contrast Fixes */
.icard-body h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #111111; /* Deep high-contrast ink color */
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.icard-body p {
  font-size: 0.95rem;
  color: #555555; /* Visible descriptive text color */
  line-height: 1.6;
  margin: 0;
}

/* Dark Mode Safety Net override */
.dark .mining-heart-section { background-color: #0F1011; }
.dark .feat .txt h2 { color: #FFFFFF; }
.dark .feat .txt .lead-desc { color: #B0B0B0; }
.dark .icards-bento .icard {
  background: #161719;
  border-color: rgba(255, 255, 255, 0.04);
}
.dark .icards-bento .ic-icon { background: rgba(244, 196, 48, 0.15); color: #FFF; }
.dark .icard-body h3 { color: #FFFFFF; }
.dark .icard-body p { color: #A0A0A0; }


/* ----- RESPONSIVE ADAPTATIONS ----- */

@media (max-width: 1024px) {
  .feat {
    grid-template-columns: 1fr; /* Stack top image and text on tablets */
    gap: 40px;
  }
  .icards-bento {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
  }
}

/* Media Queries for Mobile Responsiveness */
@media (max-width: 768px) {
    /* 1. Form aur side cards ke layout ko single column karna */
    .feat {
        grid-template-columns: 1fr !important; /* HTML ke inline style ko override karne ke liye */
        gap: 30px !important;
    }

    /* 2. Hero Section aur Typography ko adjust karna */
    .page-hero h1 {
        font-size: 2rem !important; /* Mobile par headings bahut badi na dikhein */
        line-height: 1.3;
    }
    
    .page-hero .lead {
        font-size: 1rem !important;
    }

    /* 3. Radio Cards (Stand Preference) ko fix karna */
    .radio-cards {
        grid-template-columns: 1fr 1fr; /* Mobile par 2 columns banenge jo clean lagenge */
        gap: 8px;
    }
    
    /* Agar screen 400px se bhi choti ho toh single column */
    @media (max-width: 420px) {
        .radio-cards {
            grid-template-columns: 1fr;
        }
    }

    /* 4. Inputs ki extra padding thodi kam karna takispace mile */
    .form input, .form textarea, .form select {
        padding: 10px 12px;
        font-size: 0.95rem;
    }

    /* 5. Nav Links aur Buttons responsive adjustment */
    .nlinks {
        gap: 10px;
    }

    /* 6. Side Info Cards (200+ Exhibitors, etc.) */
    .icards {
        grid-template-columns: 1fr !important; /* Yeh single column me stack ho jayenge */
    }
}

@media (max-width: 640px) {
  .icards-bento {
    grid-template-columns: 1fr; /* Clean single column stack on mobile devices */
    gap: 16px;
  }
  .icards-bento .icard {
    padding: 24px;
  }
}

/* ===== v2 additions ===== */
/* scroll progress */
#progress{position:fixed;top:0;left:0;height:4px;background:var(--yellow);width:0;z-index:300;transition:width .1s linear}

/* back to top */
#toTop{position:fixed;right:22px;bottom:22px;width:52px;height:52px;background:var(--yellow);color:var(--black);font-family:var(--disp);font-weight:800;font-size:1.3rem;border:none;cursor:pointer;z-index:250;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
#toTop.show{opacity:1;pointer-events:auto}
#toTop:hover{transform:translateY(-4px)}

/* compact nav for 9 links */
.nlinks{gap:20px;font-size:.76rem}

/* FAQ accordion */
.faq{max-width:860px;display:grid;gap:14px}
.faq details{background:var(--white);border:1px solid var(--line-l);border-left:5px solid var(--yellow)}
.faq summary{cursor:pointer;list-style:none;padding:20px 54px 20px 24px;font-family:var(--disp);font-weight:800;font-size:1.02rem;color:var(--ink);position:relative;text-transform:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--yellow-deep);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .a{padding:0 24px 22px;color:var(--grey-d);font-size:.98rem}
.faq .a a{color:var(--yellow-deep);font-weight:600}

/* agenda / themes timeline */
.agenda{border-left:4px solid var(--yellow);max-width:840px;display:grid;gap:0}
.aitem{padding:24px 0 24px 34px;position:relative;border-bottom:1px solid var(--line)}
.aitem:last-child{border-bottom:none}
.aitem::before{content:"";position:absolute;left:-12px;top:32px;width:20px;height:20px;background:var(--yellow);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.aitem .day{font-family:var(--disp);font-weight:800;font-style:italic;color:var(--yellow);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase}
.aitem h3{font-size:1.3rem;text-transform:uppercase;margin:6px 0 8px}
.aitem p{color:var(--grey);font-size:.97rem;max-width:640px}

/* venue zones */
.zones{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:120px;gap:10px}
.zone{background:var(--black-2);border:1px solid var(--line);display:flex;align-items:flex-end;padding:16px;font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:.9rem;letter-spacing:.04em;position:relative;overflow:hidden;transition:transform .25s}
.zone:hover{transform:translateY(-4px)}
.zone small{position:absolute;top:12px;left:16px;font-family:var(--disp);font-weight:800;font-style:italic;color:var(--yellow);font-size:.72rem;letter-spacing:.2em}
.zone.y{background:var(--yellow);color:var(--black)}
.zone.y small{color:var(--black)}
.z1{grid-column:span 4;grid-row:span 2}.z2{grid-column:span 2;grid-row:span 2}
.z3{grid-column:span 2}.z4{grid-column:span 2}.z5{grid-column:span 2}
@media(max-width:760px){.zones{grid-template-columns:1fr 1fr}.z1,.z2,.z3,.z4,.z5{grid-column:span 2;grid-row:span 1}}

/* lightbox */
#lb{position:fixed;inset:0;background:rgba(15,16,18,.94);z-index:400;display:none;align-items:center;justify-content:center;padding:5vmin;cursor:zoom-out}
#lb.open{display:flex}
#lb img{max-width:100%;max-height:100%;border:2px solid var(--yellow)}
#lb .x{position:absolute;top:20px;right:26px;font-family:var(--disp);font-weight:800;font-size:2rem;color:var(--yellow);background:none;border:none;cursor:pointer}

/* awards band */
.awards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.award{background:var(--black-2);border:1px solid var(--line);padding:36px 30px;position:relative}
.award::before{content:"//";position:absolute;top:18px;right:22px;font-family:var(--disp);font-weight:800;font-style:italic;color:var(--yellow);opacity:.35;font-size:2rem}
.award h3{font-size:1.35rem;text-transform:uppercase;color:var(--yellow);margin-bottom:10px}
.award p{color:var(--grey);font-size:.97rem}
@media(max-width:760px){.awards{grid-template-columns:1fr}}