/* Premium Light Theme (White + Gold) — overrides for the existing dark template */
:root{
  --bg:#ffffff !important;
  --panel:#f7f7f8 !important;
  --panel2:#ffffff !important;

  --text:#0f172a !important;
  --muted:#475569 !important;

  --line:rgba(15,23,42,.12) !important;

  --gold:#c8a35a !important;
  --gold2:#f0d9a0 !important;

  --shadow: 0 10px 30px rgba(15,23,42,.10) !important;
}

/* Page base */
html, body{ background: var(--bg) !important; color: var(--text) !important; }
a{ color: inherit; }
p, li{ color: var(--muted) !important; }
h1, h2, h3, h4{ color: var(--text) !important; }

/* Top navigation */
.nav{
  background: rgba(255,255,255,.82) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(10px);
}
.nav a{ color: var(--text) !important; }
.nav a:hover{ color: #0b1220 !important; }
.langToggle{
  background: rgba(255,255,255,.72) !important;
  border: 1px solid var(--line) !important;
}
.langBtn{
  color: var(--text) !important;
}
.langBtn.active{
  background: rgba(200,163,90,.22) !important;
  border: 1px solid rgba(200,163,90,.45) !important;
}

/* Buttons */
.btn{
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
}
.btn:hover{ border-color: rgba(200,163,90,.55) !important; }
.btnGold, .btn.gold, .gold{
  background: rgba(200,163,90,.20) !important;
  border-color: rgba(200,163,90,.55) !important;
  color: #1a1408 !important;
}

/* Common panels/cards across pages */
.card, .panel, .service, .sideItem, .contactBox, .clientsBlackPanel, .box{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}
.panel{ background: rgba(247,247,248,.92) !important; }
.divider{ background: var(--line) !important; }

/* “chips” / small badges */
.chip, .metaChip, .pill, .pills a{
  background: rgba(15,23,42,.04) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}
.chip:hover, .pills a:hover{ border-color: rgba(200,163,90,.55) !important; }

/* Hero: remove heavy dark overlays */
.hero{
  background: var(--bg) !important;
}
.heroMain, .heroSide{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}
.hero .kicker{ color: rgba(15,23,42,.85) !important; }

/* SEO block */
.seo-block{
  background: rgba(247,247,248,.92) !important;
  border-top: 1px solid var(--line) !important;
}
.seo-block a{ color: #b8892c !important; font-weight: 800; }

/* Footer */
footer, .foot{
  background: rgba(247,247,248,.92) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--text) !important;
}
footer a, .foot a{ color: var(--text) !important; }
footer a:hover, .foot a:hover{ color: #0b1220 !important; }

/* Lightbox can stay dark for UX, but soften borders/text */
.lightboxBody{ background:#0b0d10 !important; }
.lightboxCaption{ border-top: 1px solid rgba(255,255,255,.12) !important; }

/* Fix legacy inline colors from the old dark version */
strong[style*="rgba(238,242,246"]{ color: var(--text) !important; }
a[style*="rgba(246,195,67"]{ color: #b8892c !important; }

/* WhatsApp button */
.wa-float{
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}

/* ===== NAV / HEADER – NAVY THEME OVERRIDES (force) ===== */
header{
  background:#0f2a44 !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}

/* Αν υπάρχει κάποιο inner container που έχει δικό του background */
header .wrap,
header .nav{
  background:transparent !important;
}

/* Links */
header .navLinks a{
  color:rgba(255,255,255,.88) !important;
}
header .navLinks a:hover{
  color:#F6C343 !important;
}

/* Buttons right */
header .btn{
  border-color:rgba(255,255,255,.22) !important;
  background:rgba(255,255,255,.10) !important;
  color:#ffffff !important;
}
header .btn:hover{
  border-color:rgba(246,195,67,.50) !important;
  background:rgba(255,255,255,.18) !important;
}

header .btn.gold{
  background:linear-gradient(135deg,#c8a35a,#f0d9a0) !important;
  color:#1a1408 !important;
  border:0 !important;
}

/* Language toggle */
header .langToggle{
  border-color:rgba(255,255,255,.25) !important;
  background:rgba(255,255,255,.10) !important;
}
header .langBtn{
  color:rgba(255,255,255,.85) !important;
}
header .langBtn.active{
  background:rgba(255,255,255,.22) !important;
  color:#ffffff !important;
}

/* Logo: μην το “ασπρίζει/γκριζάρει” με φίλτρα */
header .brandLogo{
  filter:none !important;
}
/* FORCE CYAN HEADER (last wins) */
header{
  background:#0891b2 !important;
  border-bottom:1px solid rgba(255,255,255,.25) !important;
}

header .wrap,
header .nav{
  background:transparent !important;
}
/* ===== CLIENTS SECTION CYAN ===== */

.logoGrid{
  background:#0891b2;
  padding:40px;
  border-radius:18px;
}

.logoGrid img{
  filter: brightness(0) invert(1);
  opacity:0.9;
  transition: transform .2s ease, opacity .2s ease;
}

.logoGrid img:hover{
  opacity:1;
  transform: scale(1.05);
}
/* ===== CLIENTS WALL (premium) ===== */

/* Container look */
.logoGrid{
  background: radial-gradient(900px 420px at 20% 10%, rgba(255,255,255,.18), transparent 60%),
              radial-gradient(800px 420px at 80% 0%, rgba(0,0,0,.10), transparent 60%),
              linear-gradient(180deg,#0891b2,#0ea5c9);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 60px rgba(2, 14, 25, .25);
  padding: 34px;
  border-radius: 22px;

  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:28px;
  padding:48px;
}

  /* subtle “glass” */
  backdrop-filter: blur(10px);
}

/* Make each logo sit inside a premium tile */
.logoGrid img{
  width:100%;
  max-height:90px;
  object-fit: contain;

  padding: 22px 18px;
  border-radius: 16px;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);

  /* default: elegant grayscale/white */
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .78;

  transition: transform .18s ease, opacity .18s ease, background .18s ease, border-color .18s ease, filter .18s ease;
}

/* Hover = “color reveal” 느낌 (αν τα logos είναι colored PNGs) */
.logoGrid img:hover{
  opacity: 1;
  transform: translateY(-3px) scale(1.03);

  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);

  /* If your logos are colored, this shows them */
  filter: none;
}

/* Optional: soft animated shine sweep */
@keyframes apsShine {
  0%{ background-position: -140% 0; }
  100%{ background-position: 240% 0; }
}

.logoGrid{
  position: relative;
  overflow: hidden;
}
.logoGrid::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.12) 20%, transparent 40%);
  background-size: 200% 100%;
  animation: apsShine 8s linear infinite;
  opacity: .25;
}

/* Responsive */
@media (max-width: 1100px){
  .logoGrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .logoGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px; gap: 12px; }
  .logoGrid img{ max-height: 58px; }
}

/* If you prefer “always white logos” (no color reveal), uncomment:
.logoGrid img:hover{ filter: brightness(0) invert(1); }
*/
/* ===== Clients grid responsive ===== */

@media (max-width:1100px){
  .logoGrid{
    grid-template-columns:repeat(4,1fr);
  }
}

@media (max-width:800px){
  .logoGrid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:520px){
  .logoGrid{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }

  .logoGrid img{
    max-height:70px;
  }
}
/* ===== Clients wall (equal visual size) ===== */
.logoGrid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap: 22px;
  padding: 22px;
  border-radius: 22px;

  /* αν θες να είναι το ίδιο cyan φόντο */
  background: linear-gradient(180deg, rgba(0, 188, 212, .92), rgba(0, 160, 190, .92));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 16px 42px rgba(0,0,0,.18);
}

/* “capsule” για κάθε logo */
.logoGrid img{
  width: 100%;
  height: 92px;                 /* ρυθμίζει το "οπτικό" μέγεθος */
  object-fit: contain;          /* γεμίζει όσο γίνεται χωρίς να κόβεται */
  object-position: center;

  padding: 14px 18px;           /* βοηθά να μην ακουμπάει */
  border-radius: 16px;

  /* premium glass */
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);

  /* κάνει τα αχνά logos να “γράφουν” */
  filter: brightness(1.15) contrast(1.15);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, filter .18s ease;
}

.logoGrid img:hover{
  transform: translateY(-2px) scale(1.05);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
  filter: brightness(1.25) contrast(1.2);
}

/* Responsive */
@media (max-width:1100px){
  .logoGrid{ grid-template-columns:repeat(3,1fr); }
  .logoGrid img{ height: 88px; }
}
@media (max-width:700px){
  .logoGrid{ grid-template-columns:repeat(2,1fr); }
  .logoGrid img{ height: 84px; }
}

/* ===== Header: hide on scroll down / show on scroll up ===== */
:root{
  --headerH: 66px; /* άλλαξέ το αν θες */
}

/* το header πρέπει να είναι fixed για να δουλέψει άψογα */
header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  will-change: transform;
}

/* για να μην “κάθεται” το site κάτω από το fixed header */
body{
  padding-top: var(--headerH);
}

/* όταν κρύβεται */
header.is-hidden{
  transform: translateY(-110%);
}

/* όταν κάνεις scroll (λίγο πιο premium) */
header.is-scrolled{
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}