/* =========================================================
   GEC SOLAR — CONSOLIDATED THEME (safe with Bootstrap)
   ========================================================= */

:root{
  --primary:#0d6efd; --dark:#0b2035; --accent:#ffc107; --ink:#212529;
  --bg:#ffffff; --muted:#6c757d;
}

/* Base / Reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* Container */
.container{max-width:1140px;margin:0 auto;padding:0 16px}

/* ================= NAVBAR ================= */
.navbar{
  position:sticky; top:0; z-index:50; background:#0f1320e6; backdrop-filter: blur(8px);
  color:#fff; border-bottom:1px solid #1e2233;
}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px}
.brand img{height:36px;width:auto;border-radius:6px;display:block;background:#fff}
.menu{display:flex;gap:20px;align-items:center}
.menu a{color:#cfd6e4;font-weight:600}
.menu a:hover,.menu a.active{color:#fff}

/* ================= HERO (home only) ================= */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center; color:#fff; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(135deg, #02203A, #003C8F 45%, #0087FF);
  isolation:isolate;
}
.veil::before{
  content:""; position:absolute; inset:-40% -30% 0 -30%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.07), transparent 60%),
    conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.06), transparent 40% 60%, rgba(255,255,255,.06));
  filter: blur(60px); animation: drift 22s linear infinite alternate; opacity:.9; z-index:0;
}
@keyframes drift{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(6%,-5%,0) rotate(8deg)}}
.hero .wrap{position:relative; z-index:1; padding:64px 0}
.kicker{
  display:inline-block; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  padding:.45rem .75rem; border-radius:999px; backdrop-filter: blur(2px); font-weight:700;
}
.title{font-size:clamp(32px,5vw,56px); line-height:1.1; margin:16px 0 12px; font-weight:800}
.lead{font-size:clamp(16px,2.3vw,20px); color:#e7f1ff; max-width:60ch}

/* Buttons (keep Bootstrap .btn; add tasteful extras) */
.btn{
  display:inline-block; padding:14px 18px; border-radius:12px; font-weight:800;
  box-shadow:0 12px 30px rgba(0,0,0,.2); transform: translateY(0); transition: transform .2s, box-shadow .2s;
}
.btn-primary{background:var(--accent); color:#1a1a1a}
.btn-primary:hover{transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.28)}
.btn-outline{border:2px solid #fff;color:#fff}
.btn-outline:hover{background:#ffffff1a}
.btn-warning{background:var(--accent); color:#1a1a1a}
.btn-animated{transition:all .3s ease;border-radius:50px}
.btn-animated:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.2)}
.btn-pill{border-radius:999px}
.actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:18px}

/* Floating icons (home) */
.float-icon{position:absolute; opacity:.18; color:#fff; animation: floaty 8s ease-in-out infinite}
.i1{top:12%; right:6%; font-size:120px; animation-delay:0s}
.i2{bottom:8%; left:5%; font-size:100px; animation-delay:1.2s}
.i3{top:36%; left:46%; font-size:72px; animation-delay:.6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* ================= STATS ================= */
.stats{background: linear-gradient(180deg,#f8fbff,#ecf3ff); border-radius:20px; margin-top:28px}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; text-align:center; padding:20px}
.stat h3{margin:0;font-size:28px;font-weight:900}
.muted{color:var(--muted)}

/* Wavy divider (home) */
.wave{display:block;width:100%;height:70px;margin-top:-35px}

/* Sections */
.section{padding:72px 0}
.center{text-align:center}
hr{border:0;border-top:1px solid #e9eef7}

/* ================= CARDS ================= */
.cards{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:#fff; border:1px solid #eef2f7; border-radius:16px; padding:22px;
  box-shadow:0 10px 30px rgba(13,110,253,.08); transition: transform .25s, box-shadow .25s;
}
.card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(2,32,58,.15)}
.icon{
  width:60px;height:60px;border-radius:14px;display:grid;place-items:center;margin-bottom:10px;
  background:rgba(13,110,253,.1); color:var(--primary)
}
.stretched{color:var(--primary); font-weight:700}
/* Lift utility for any card */
.lift{transition: transform .25s ease, box-shadow .25s ease}
.lift:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(2,32,58,.15)}

/* ================= STEPS ================= */
.steps{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{background:#fff;border:1px solid #eef2f7;border-radius:16px;padding:24px; text-align:center; box-shadow:0 8px 22px rgba(0,0,0,.05)}

/* ================= HEADER BAND (inner pages) ================= */
.band{padding:84px 0;background:#f6f9ff;border-bottom:1px solid #e9eef7}
.band h1{margin:0 0 6px;font-size:clamp(26px,4.5vw,38px);font-weight:800}

/* ================= FOOTER ================= */
footer{background:#0f1320;color:#cfd6e4}
footer a{color:#cfd6e4}
footer a:hover{color:#fff}
footer .grid{display:grid;gap:22px;grid-template-columns:2fr 1fr 1fr}

/* ================= REVEAL ANIMATION ================= */
.reveal{opacity:0; transform: translateY(18px); transition: all .6s ease}
.reveal.show{opacity:1; transform: none}

/* ================= RESPONSIVE TWEAKS ================= */
@media (max-width:768px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  footer .grid{grid-template-columns:1fr}
}

/* =========================================================
   SCOPED ADDITIONS (do not override Bootstrap grid)
   ========================================================= */

/* TEAM grid (use <div class="team-grid g-4"> … ) — optional helper */
.team-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:768px){.team-grid{grid-template-columns:repeat(3,1fr)}}

/* Team card */
.card-soft{
  background:#fff; border:1px solid #eef2f7; border-radius:16px;
  box-shadow:0 10px 30px rgba(13,110,253,.08);
  transition: transform .25s, box-shadow .25s; overflow:hidden;
}
.card-soft .card-body{padding:18px;text-align:center}
.card-soft h3{font-weight:700;color:var(--dark)}
.card-soft p.muted{color:var(--muted);font-size:.95rem}

/* >>> Team image: FILL the placeholder (uniform crop) <<< */
.card-soft .thumb{
  width:100%;
  height:240px;              /* base height for a consistent header */
  object-fit:cover;          /* fill & crop edges for a clean look */
  object-position:center;    /* keep faces centered */
  display:block;
  padding:0;
  background:none;
  border-bottom:1px solid #eef2f7;
  border-top-left-radius:16px;border-top-right-radius:16px;
  transition:transform .3s ease;
}
@media (min-width:768px){ .card-soft .thumb{ height:280px; } }
@media (min-width:1200px){ .card-soft .thumb{ height:320px; } }
.card-soft:hover .thumb{ transform:scale(1.02); }

/* CTA button row (optional helper) */
.cta-row{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem}

/* Forms (scoped, won’t fight Bootstrap) */
.gec-form input,.gec-form select,.gec-form textarea{
  font:inherit;color:inherit;background:#fff;border:1px solid #e5e9f2;border-radius:12px;
  padding:.75rem .9rem;width:100%;transition:border-color .2s, box-shadow .2s;
}
.gec-form input:focus,.gec-form select:focus,.gec-form textarea:focus{
  outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(13,110,253,.15);
}
.gec-form label{font-weight:700;display:block;margin-bottom:.35rem;color:#0b2035}
.gec-form .form-row{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:768px){.gec-form .form-row{grid-template-columns:1fr 1fr}}
.gec-form .form-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* Alerts / badges (scoped) */
.gec-badge{
  display:inline-block;padding:.35rem .6rem;border-radius:999px;
  background:rgba(13,110,253,.08);color:var(--primary);font-weight:700;font-size:.8rem;
}
.gec-alert{padding:1rem 1.2rem;border-radius:14px;border:1px solid #e9eef7;background:#f8fbff}
.gec-alert.success{background:#f6fff8;border-color:#d7f5dd;color:#1e7e34}
.gec-alert.error{background:#fff6f6;border-color:#f5d7d7;color:#842029}

/* Tables (scoped) */
.gec-table{width:100%;border-collapse:collapse;font-size:.95rem}
.gec-table th,.gec-table td{padding:.75rem .9rem;border-bottom:1px solid #eef2f7;text-align:left}
.gec-table thead th{background:#f8fbff;font-weight:800;color:#0b2035}

/* ===== Mobile drawer fixes (global) ===== */
@media (max-width:860px){
  .drawer{
    background: rgba(15,19,32,.98);
    backdrop-filter: blur(6px);
    border-top: 1px solid #1f2940;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  .drawer a{
    color:#eaf2ff;
    font-weight:800;
    padding:16px 20px;
    background: transparent;
  }
  .drawer a.active{ background:#121a2c; color:#fff; }
  .drawer a:hover{  background:#182238; color:#fff; }
  .drawer a:focus-visible{
    outline:2px solid #4da3ff; outline-offset:-2px;
  }
  .scrim{
    position:fixed; inset:64px 0 0 0; z-index:84;
    background: rgba(0,0,0,.45);
    opacity:0; pointer-events:none; transition: opacity .2s ease;
  }
  .scrim.open{ opacity:1; pointer-events:auto; }
  .nav-mobile{
    background:#121a2c; color:#eaf2ff; border:1px solid #2a3653;
    padding:8px 12px; border-radius:10px; font-weight:900;
  }
  .nav-mobile:active{ transform: translateY(1px); }
}




/* =========================
   MOBILE NAV DRAWER (PATCH)
   ========================= */

/* 1) Drawer mechanics across all sizes */
.drawer{
  position: fixed;
  left: 0; right: 0; top: 0;
  transform: translateY(-120%);                /* hidden by default */
  transition: transform .28s ease;
  z-index: 1200;                                /* above header */
  /* sensible defaults (mobile colors are refined below) */
  background: rgba(15,19,32,.98);
  backdrop-filter: blur(6px);
  border-top: 1px solid #1f2940;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  padding: 72px 16px 16px;                      /* room for header area */
}
.drawer.open{ transform: translateY(0); }       /* visible state */

.drawer a{
  display:block;
  text-decoration:none;
  border-radius:12px;
  font-weight:800;
  padding:16px 18px;
  letter-spacing:.2px;
  color:#eaf2ff;                                /* readable against dark */
}
.drawer a + a{ margin-top:6px; }
.drawer a:hover{ background:#182238; color:#fff; }
.drawer a.active{ background:#0d6efd; color:#fff; }

/* 2) Backdrop (works if you add <div class="scrim" id="navScrim"></div> OR .nav-overlay ) */
.scrim,
.nav-overlay{
  position: fixed;
  inset: 64px 0 0 0;                            /* below sticky header */
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(1px);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.scrim.open,
.nav-overlay.open{ opacity:1; pointer-events:auto; }

/* 3) Show burger/hide desktop menu on small screens */
@media (max-width: 860px){
  .menu{ display:none; }
  .nav-mobile{
    display:inline-flex; align-items:center; justify-content:center;
    background:#121a2c; color:#eaf2ff; border:1px solid #2a3653;
    width:42px; height:42px; border-radius:10px; font-weight:900;
    line-height:1; cursor:pointer;
  }
  .nav-mobile:active{ transform: translateY(1px); }

  /* keep your existing dark header for cohesion */
  .navbar{ background:#0f1320e6; border-bottom:1px solid #1e2233; }
  .brand div{ color:#ffffff; }
}

/* 4) Accessibility + reduced motion */
.drawer:focus-within a:focus{
  outline:2px solid #4da3ff; outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  .drawer{ transition:none; }
}

/* 5) (Optional) LIGHT drawer theme — uncomment to switch
.drawer{
  background:#ffffff; color:#0b2035; border-top:1px solid #e7ecf5;
}
.drawer a{ color:#0b2035; }
.drawer a:hover{ background:#eef4ff; color:#032a58; }
*/
/* ===== Partner Logos Marquee (Full Color) ===== */
.logo-marquee {
  overflow: hidden;
  position: relative;
  padding: 12px 0;
  background: transparent;
}
.logo-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: logo-scroll 28s linear infinite;
}
.logo-marquee:hover .logo-track {
  animation-play-state: paused;
}

/* Logo look & sizing (keep original colors) */
.logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 72px;
}
.logo-tile img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
}
.logo-tile img:hover {
  transform: scale(1.06);
}

/* Seamless continuous scroll */
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Accessibility: stop animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
}