/* Root & base */
:root{--bg:#0b1220;--brand:#f5a623;--brand-2:#ffd27a;--ink:#0f172a;--muted:#6b7280;--card:#ffffff;--wash:#f8fbfc;--accent:#fff2de}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);scroll-behavior:smooth}
.container{width:min(1200px,92%);margin:0 auto}

/* Navbar */
.navbar{position:sticky;top:0;z-index:50;background:#1f2a44;color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;color:#fff;text-decoration:none;gap:10px;font-weight:600;letter-spacing:.2px}
.navbar .logo{height:54px;width:auto;display:block;object-fit:contain;margin-right:10px}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{color:#cfe7ff;text-decoration:none;font-weight:500;opacity:.95}
.nav-links a.active,.nav-links a:hover{color:#fff}
.dropdown{position:relative}
.dropbtn{background:transparent;border:0;color:#cfe7ff;font-weight:500;cursor:pointer}
.dropdown-content{position:absolute;right:0;top:140%;background:#24314f;border-radius:10px;min-width:180px;display:none;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.dropdown-content a{display:block;padding:10px 12px;color:#e9f3ff;text-decoration:none;border-radius:8px}
.dropdown-content a:hover{background:#2b3b61}
.dropdown:hover .dropdown-content{display:block}
.hamburger{display:none;background:transparent;border:0}
.hamburger span{display:block;width:26px;height:2px;background:#fff;margin:6px 0;border-radius:2px}

/* Hero (static) */
.hero{position:relative;height:50vh;min-height:480px;overflow:hidden;background:#000}
.slide.static{height:100%;background-position:center;background-size:cover;background-repeat: no-repeat;position:relative}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55))}
.hero-caption{position:absolute;inset:auto 0 12% 0;color:#fff;text-align:center;padding:0 16px}
.hero-caption h2{font-size:clamp(28px,5vw,52px);font-weight:700;letter-spacing:.5px}
.hero-caption h2 span{opacity:.8;font-weight:300}
.hero-caption p{opacity:.9;margin:.4rem auto 1.2rem;max-width:740px}
.btn{display:inline-block;border:2px solid #fff;color:#fff;padding:10px 18px;border-radius:999px;text-decoration:none;font-weight:600}
.btn.mini{padding:8px 14px;border-width:1.5px;font-size:14px}
.btn-primary{border-color:var(--brand);background:var(--brand);color:#2b1700}

/* Sections */
.messages{padding:60px 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:#fff;border:1px solid #e8eef8;border-radius:16px;padding:22px}
.messages p{text-align:justify}

.single-col {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.portrait {
  width: 260px;
  height: auto;
  margin: 0 auto 14px auto;
  display: block;
  border-radius: 6px;
}


.features{background:#fffaf3;padding:56px 0;border-top:1px solid #ffeac7}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feature{background:var(--card);border:1px solid #ffe3b5;border-radius:14px;padding:26px;text-align:center}
.icon-circle{width:96px;height:96px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:#fff6e7;border:2px solid var(--brand)}
.icon-circle svg{width:42px;height:42px;fill:#f5a623;opacity:.95}
.feature p{color:var(--muted);font-size:15px}

.interests{background:#f7f7ff;padding:70px 0}
.section-title.heading-underline{text-align:center;position:relative}
.section-title.heading-underline::after{content:"";display:block;width:110px;height:4px;background:#00d4d4;border-radius:4px;margin:10px auto 0}
.interest-grid.pills{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:26px}
.pill{background:#fff;border:1px solid #e7ecf6;border-radius:28px;height:120px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:#05c4c4;box-shadow:0 10px 24px rgba(15,23,42,.05)}

.value-services{background:#e9fbff;padding:70px 0}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:12px}
.vcard{background:#fff;border:1px solid #adf0ff;border-radius:14px;padding:26px;text-align:center;position:relative}
.vcard .diamond{width:60px;height:60px;border:3px solid #04d3ff;margin:0 auto 16px;transform:rotate(45deg);border-radius:12px}

.stats-band{background:#d6e81d;color:#0b1220;padding:32px 0;margin-top:0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:center;text-align:center}
.stat .num{font-size:40px;font-weight:800}
.stat .label{opacity:.9}

.portfolios{padding:70px 0}
.filters{text-align:center;margin-bottom:18px}
.chip{border:1px solid #e6e9f2;border-radius:999px;padding:9px 14px;background:#fff;margin:4px;cursor:pointer}
.chip.active{background:#eef2ff}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pf{background:#fff;border:1px solid #e8eef8;border-radius:16px;overflow:hidden}
.pf img{display:block;width:100%;height:auto}

.blog{background:#f6f7f9;padding:70px 0}
.blog-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blog-card{background:#fff;border:1px solid #eaeef5;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.blog-card .thumb{height:180px;background-size:cover;background-position:center}
.blog-body{padding:18px}
.blog-body .date{font-weight:800;font-size:28px;color:#1f2a44}
.blog-body .date span{display:block;font-weight:500;font-size:12px;color:#6b7280}

/* Partners (no animation) */
.partners{background:#ffffff;padding:30px 0}
.marquee .track{display:flex;gap:40px;flex-wrap:wrap;justify-content:center}
.marquee .track img{height:64px;width:auto;filter:grayscale(100%);opacity:.8}

/* CTA & Footer */
.cta-band{background:linear-gradient(90deg,#22c55e,#06b6d4);color:#fff;padding:28px 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cta-icon{font-size:34px}
.cta-text h3{margin:0 0 4px}
.cta-text p{margin:0}
.footer{background:#0f172a;color:#cfd8e3;margin-top:0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px;padding:36px 0}
.footer h4{color:#fff;margin:.2rem 0 .4rem}
.footer a{color:#cfe7ff;text-decoration:none}
.footer-logo{height:92px;width:auto;display:block;margin-bottom:12px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.copy{text-align:center;border-top:1px solid #1f2a44;padding:14px;color:#9fb3d1}

/* Responsive */
@media (max-width:1000px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .interest-grid.pills{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav-links{display:none;position:absolute;right:0;top:58px;background:#1f2a44;padding:10px;border-radius:12px;flex-direction:column;gap:12px;box-shadow:0 10px 24px rgba(0,0,0,.18)}
  .nav-links.open{display:flex}
  .hamburger{display:block}
  .two-col{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .navbar .logo{height:46px}
}


/* --- Hotfix overrides (v2) --- */
.navbar .logo{height:58px!important;max-height:58px!important;width:auto!important;max-width:320px!important;object-fit:contain;image-rendering:auto}
.footer-logo{height:80px!important;width:auto!important}
/* Ensure value cards line up nicely even if previous CSS conflicts */
.value-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:22px!important;align-items:stretch!important}
.vcard{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;text-align:center!important}
.vcard .diamond{margin-bottom:14px!important}


/* Dropdown menu */
.dropdown {
  position: relative;
}

.dropbtn {
  background: transparent;
  border: 0;
  color: #cfe7ff;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0;
}

/* Hidden by default */
.dropdown-content {
  position: absolute;
  right: 0;
  top: 130%;
  background: #1f2937;          /* dark background so light text is visible */
  border-radius: 8px;
  min-width: 180px;
  padding: 6px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  display: none;
  z-index: 999;
}

/* Links inside dropdown */
.dropdown-content a {
  display: block;
  padding: 10px 14px;
  color: #e9f3ff;               /* light blue text */
  text-decoration: none;
  font-size: 14px;
}

/* Hover effect on each option */
.dropdown-content a:hover {
  background: #374151;
}

/* Dropdown base */
.dropdown {
  position: relative;
}

.dropbtn {
  background: transparent;
  border: 0;
  color: #cfe7ff;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0;
}

/* Hidden by default */
.dropdown-content {
  position: absolute;
  right: 0;
  top: 130%;
  background: #1f2937;
  border-radius: 8px;
  min-width: 180px;
  padding: 6px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  display: none;
  z-index: 999;
}

/* Links inside menu */
.dropdown-content a {
  display: block;
  padding: 10px 14px;
  color: #e9f3ff;
  text-decoration: none;
  font-size: 14px;
}

.dropdown-content a:hover {
  background: #374151;
}

/* 🔥 Show menu when JS adds .open */
.dropdown.open .dropdown-content {
  display: block;
}

.card.message h3,
.card.message p {
  text-align: center !important;
}

/* Fix spacing for Chairman/Director cards */
.card h3 {
    margin-top: 6px !important;
    margin-bottom: 2px !important;   /* reduce gap under name */
}

.card p {
    margin-top: 0 !important;        /* pull designation up */
    padding-top: 0 !important;
}

.portrait {
    margin-bottom: 6px !important;   /* reduce gap under image */
}


/* Hero slideshow */
.hero {
  position: relative;
  height: 70vh;
  min-height: 480px;
  overflow: hidden;
  background: #000;
}

.hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero .slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.hero .slide.active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  z-index: 2;
}

.hero-caption {
  position: absolute;
  inset: auto 0 12% 0;
  color: #fff;
  text-align: center;
  padding: 0 16px;
}

.hero-caption h2 {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: .5px;
}

.hero-caption h2 span {
  opacity: .8;
  font-weight: 300;
}

.hero-caption p {
  opacity: .9;
  margin: .4rem auto 1.2rem;
  max-width: 740px;
}