:root{
    --blue:#0b3a6f; --blue-800:#0a2f59; --blue-600:#135ca8;
    --sky:#e6f0ff; --text:#0b1220; --white:#ffffff;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--white);color:var(--text);
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif}
  a{color:var(--blue-600);text-decoration:none}

  /* ΕΝΙΑΙΟ padding για όλα τα sections (desktop/tablet) */
  .container{max-width:1080px;margin:0 auto;padding:0 24px}

  /* Header */
  header{position:sticky;top:0;z-index:70;background:rgba(255,255,255);
    backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid #e5e7eb}
  header .inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:16px}
  .brand{display:flex;align-items:center;gap:14px;min-width:0}
  .brand img{height:42px}
  .brand .sub{font-size:13px;color:#475569;white-space:normal;line-height:1.25;text-align:center;   display: block;
  margin: 0 auto;}
  .brand .sub .name{display:block}
  nav{display:flex;align-items:center;gap:18px;margin-left:auto}
  nav a{font-weight:500}
  nav a.nowrap{white-space:nowrap}
  .cta{background:var(--blue);color:#fff;border:none;border-radius:14px;padding:10px 16px;font-weight:600}
  .iconbtn{border:none;background:transparent;padding:8px;border-radius:10px}
  .iconbtn:active{background:#eef2f7}

  /* Drawer */
  .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(1px);
    opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:60}
  .drawer{position:fixed;inset:0 0 0 auto;width:min(84vw,380px);background:#0a2f59;color:#eaf1ff;
    transform:translateX(100%);transition:transform .25s ease;z-index:61;display:flex;flex-direction:column}
  .drawer header{position:relative;border:none;background:transparent;padding:16px 18px}
  .drawer header h3{margin:0;font-family:Montserrat;color:#fff}
  .drawer a{color:#cfe1ff;font-weight:600;display:block;padding:14px 18px;border-top:1px solid rgba(255,255,255,.15)}
  .drawer .primary{margin:16px 18px 24px}
  .drawer .primary .cta{width:100%;border-radius:14px}
  .drawer.open{transform:translateX(0)}
  .backdrop.show{opacity:1;pointer-events:auto}

  /* Hero */
  .hero{background:linear-gradient(180deg, var(--sky), #fff 60%)}
  .hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;padding:64px 0 56px}
  .eyebrow{letter-spacing:.16em;color:var(--blue-600);font-weight:600;font-size:12px}
  h1{font-family:Montserrat,Inter,sans-serif;line-height:1.15;margin:.3em 0 .2em;
     font-size:clamp(26px,7vw,44px);}
  .lead{color:#334155;font-size:18px;max-width:62ch}
  .badge-row{display:flex;gap:14px;margin-top:18px;color:#334155;font-size:13px;flex-wrap:wrap}
  .badge{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:#eef4ff}
  .hero-card{border:1px solid #e5e7eb;background:#fff;border-radius:18px;box-shadow:0 8px 24px rgba(2,24,60,.06);overflow:hidden}
  .hero-card img{display:block;width:100%;height:auto}

  /* Sections */
  section{ scroll-margin-top: 30px; padding:54px 0;border-top:1px solid #eef2f7}

  h2{font-family:Montserrat,Inter,sans-serif;color:var(--blue-800);font-size:clamp(22px,3.2vw,30px);margin:0 0 10px}
  p{line-height:1.7;margin:.5em 0}
  .grid{display:grid;gap:22px}
  

.brand .logo img{  display:block }

  @media (min-width:900px){ .grid.cols-2{grid-template-columns:1fr 1fr} .grid.cols-4{grid-template-columns:repeat(4,1fr)}}
  .card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:22px}
  .service{transition:transform .2s, box-shadow .2s}
  .service:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(2,24,60,.08)}
  .svc-icon{width:42px;height:42px;border-radius:12px;background:#e6f0ff;display:grid;place-items:center}
  .portrait{border-radius:18px;border:1px solid #e5e7eb;box-shadow:0 8px 24px rgba(2,24,60,.06);overflow:hidden}
  .portrait img{width:100%;height:auto;display:block}
  .about-cont{margin-top:18px}
  @media (min-width:900px){ .about-grid{grid-template-columns:1fr 360px}}

  /* Contact */
  .contact{background:#0a2f59;color:#eaf1ff}
  .contact h2{color:#fff}
  .contact-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:18px}
  .contact a{color:#cfe1ff}
  .contact form input,.contact form textarea{width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.08);color:#fff;padding:10px 12px;outline:none}
  .contact form textarea{min-height:120px;resize:vertical}
  .contact form button{background:#0b3a6f;border:none;color:#fff;padding:10px 14px;border-radius:12px;font-weight:600}

  footer{border-top:1px solid #e5e7eb;color:κ#6b7280;padding:18px 0}
  .mono{font-variant-numeric:tabular-nums}

  /* ===== MOBILE ≤640px ===== */
  @media (max-width:640px){
    /* Περισσότερο οριζόντιο padding παντού */
    .container{padding:0 28px}

    /* Header: logo | CTA | burger */
    header .inner{
      display:grid;
      grid-template-columns:auto 1fr auto;
      grid-template-areas:"logo cta burger";
      align-items:center; gap:10px;
    }
    .brand{grid-area:logo; gap:10px}
   
    .brand .sub{display:none}                 /* αφαιρώ πλήρως το κείμενο */
    nav{display:contents}
    nav a{display:none !important}            /* κρύβω τα text links */
    .cta{grid-area:cta; justify-self:center; padding:10px 12px; border-radius:14px; white-space:nowrap}
    .iconbtn{grid-area:burger; display:inline-flex; justify-self:end}

    /* Hero */
    .hero .wrap{grid-template-columns:1fr; gap:18px; padding:40px 0 32px}
    .lead{font-size:16px}
    .badge-row{gap:10px}
    .badge{width:100%; justify-content:flex-start}
    
  }
  @media (min-width:641px){ .iconbtn{display:none} }
  /* === Mobile gutters override (πραγματικό) === */
@media (max-width:640px){
  :root{ --gutter-m: 32px; }              /* όσο θες: 28–36px προτείνω */

  /* Πιο δυνατός selector + !important για να μην το ακυρώνει τίποτα */
  body .container{ padding-left: var(--gutter-m) !important;
                   padding-right: var(--gutter-m) !important; }

  /* Αν κάποιο wrapper είχε δικό του padding, το μειώνουμε για ισορροπία */
  .hero .wrap{ padding-left: 20px !important; padding-right: 20px !important; }
  section{ padding-left: 0 !important; padding-right: 0 !important; }

  /* Badges να μη κολλάνε στα άκρα σε μικρές οθόνες */
  .badge-row{ margin-left: 0 !important; margin-right: 0 !important; }
}

/* --- HERO --- */
.hero{
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  background: url('/assets/img/grapho3.png') center center/cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.hero__overlay{
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,20,40,.85) 0%, rgba(8,20,40,.55) 55%, rgba(8,20,40,.25) 100%);
}
.hero__content{
  position: relative;
  z-index: 1;
  max-width: 1100px;
  padding: 64px 20px;
}
.hero__eyebrow{
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  opacity: .9;
  margin: 0 0 16px;
}
.hero__title{
  font-size: clamp(24px, 5vw, 40px);
  line-height: 1.05;
  margin: 0 0 16px;
  font-weight: 800;
}
.hero__subtitle{
  max-width: 780px;
  font-size: clamp(15px, 2.2vw, 20px);
  line-height: 1.6;
  margin: 0 0 28px;
  opacity: .95;
    text-align: justify;

}
.hero__cta{ display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.btn{
  display:inline-block; padding: 14px 20px; border-radius: 10px; font-weight: 700;
  text-decoration:none; transition: .2s ease-in-out; border:1.5px solid transparent;
}
.btn--primary{ background:#1b3b78; color:#fff; }
.btn--primary:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn--ghost{ background: transparent; color:#fff; border-color: rgba(255,255,255,.6); }
.btn--ghost:hover{ background: rgba(255,255,255,.1); }

.hero__badges{
  display:flex; gap:10px; flex-wrap: wrap; padding:0; margin: 6px 0 0; list-style:none;
}
.hero__badges li{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff; padding:8px 12px; border-radius: 999px; font-size: 13px;
}

/* Responsive */
@media (max-width: 991px){
  .hero{ min-height: 64vh; }
}
@media (max-width: 640px){
  .hero__content{ padding: 48px 16px; }
  .hero__badges{ gap:8px; }
  .hero__badges li{ font-size:12px; padding:7px 10px; }
}

.site-footer {
  background: #0d1b3b; /* ίδιο ή παρόμοιο με header */
  color: #fff;
  padding: 16px 0;
  font-size: 14px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-copy {
  opacity: 0.85;
}

.footer-credit {
  font-style: italic;
  opacity: 0.85;
}

.footer-credit span {
  font-weight: 600;
  color: #fff; /* μπορείς να το κάνεις και accent π.χ. #f7d23e */
}
/* Equipment Slider */
.equip { padding: 48px 0; }
.equip__head h2 { margin: 0 0 8px; font-size: clamp(22px, 3.2vw, 32px); }
.equip__intro { opacity: .8; margin: 0 0 18px; }

.equip__slider {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
}

.equip__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px;
}
.equip__track::-webkit-scrollbar { display: none; }

.equip__item {
  scroll-snap-align: center;
  background: #fff;
  border: 1px solid #e6edf7;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  overflow: hidden;
  margin: 0;
;
}
.equip__item img {
  width: 100%; height: 360px; object-fit: contain;
  /*background: linear-gradient(#f7f9fc, #eef3fb);*/
}
.equip__item figcaption {
  padding: 12px 14px;
  font-size: 14px;
  color: #0d1b3b;
    text-align: justify;     /* ισιώνει αριστερά - δεξιά */
    margin-right: 20px;
  margin-left: 20px;
}

.equip__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(13,27,59,.15);
  background: rgba(255,255,255,.9);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  display: grid; place-items: center;
  font-size: 24px; line-height: 1; cursor: pointer;
  transition: .2s;

}
.equip__nav:hover { background:#fff; }
.equip__nav--prev { left: -4px; }
.equip__nav--next { right: -4px; }

/* Dots */
.equip__dots { display:flex; justify-content:center; gap:8px; margin-top:14px; }
.equip__dots button{
  width:8px; height:8px; border-radius:999px; border:none; background:#c9d6f0; cursor:pointer;
}
.equip__dots button[aria-current="true"]{ background:#1b3b78; }

/* Desktop: δείξε 2-3 ανάλογα με πλάτος */
@media (min-width: 720px){
  .equip__track { grid-auto-columns: 50%; }
}
@media (min-width: 1024px){
  .equip__track { grid-auto-columns: calc(100%/3); }
}
.hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('/assets/img/grapho2.png') center center/cover no-repeat;
  /* 👆 cover = γεμίζει full width & height */
  color: #fff;
  overflow: hidden;
}


.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* ημιδιάφανο για να ξεχωρίζει το κείμενο */
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  padding: 64px 20px;
  margin: 0 auto;
  text-align: left; /* ή center αν το θες κεντραρισμένο */
}
.hero__badges li {
  font-size: 12px;
  padding: 5px 5px;
  text-align: center;       /* για να έρχονται στο κέντρο τα κείμενα */
  flex: 1 1 150px;          /* όλα έχουν ίδια βάση ~200px και σπάνε σε νέα γραμμή αν δεν χωράνε */
  max-width: 370px;         /* προαιρετικά για να μην ανοίγουν υπερβολικά */
  min-height: 60px;         /* ίδιο ύψος σε όλα */
  display: flex;            
  align-items: center;      
  justify-content: center;  
}

#about p {
  text-align: justify;     /* ισιώνει αριστερά - δεξιά */
  margin: 0 auto;          /* φέρνει το block στο κέντρο */
}

#lab .card p {
  position: relative;
  padding-left: 18px;   /* ισιώνει αριστερά - δεξιά */
  margin: 0 auto; 
    text-align: justify;
}

#lab .card p::before {
  content: "•";        /* bullet */
  position: absolute;
  left: 0;
  color: #000;         /* ή όποιο χρώμα θες */
}


/* Μόνο για κινητά: αλλάζει σε left */
@media (max-width: 768px) {
  #lab p,
  #lab .card p {
    text-align: justify !important;
  }
}


@media (max-width: 640px) {
  .hero {
    background: url('/assets/img/graphomobile.png') center center/cover no-repeat;
  }
}

header .inner {
  display: grid;
  grid-template-columns: auto 1fr auto; /* λογότυπο | sub | μενού */
  align-items: center;
}

.brand {
  display: contents; /* logo και sub πάνε στις δικές τους στήλες */
}

.brand .logo {
  grid-column: 1; /* αριστερά */
     transform: scale(1.1);  /* 20% bigger */
    transform-origin: left center; /* adjust depending on layout */
   
}

.brand .sub {
  grid-column: 2; /* κέντρο */
  text-align: center;
  font-size: 13px;
  color: #475569;
  line-height: 1.25;
}

nav {
  grid-column: 3; /* δεξιά */
  display: flex;
  align-items: center;
  gap: 18px;
  justify-self: end;
}

/* MOBILE */
@media (max-width: 640px){

  /* hide the text links on mobile */
  nav a{ display:none; }

  /* keep brand on the left naturally */
  .brand{ flex:0 0 auto; }

  /* center the CTA relative to the whole header */
  nav .cta{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    margin:0;                  /* avoid any inherited margin shifting */
    z-index:1;                 /* above background */
  }

  /* push burger to the far right */
  nav .iconbtn{
    margin-left:auto;
    order:2;                   /* ensure it stays right even if DOM order changes */
  }
}

@media (max-width: 640px) {
  .logo {
    transform: scale(1.5);  /* 20% bigger */
    transform-origin: left center; /* adjust depending on layout */
  }
}

@media (max-width: 640px) {
  .drawer a:first-of-type {
    margin-top: 15px;   /* μπορείς να βάλεις και 20px αν θέλεις μεγαλύτερο κενό */
    display: block;     /* για σιγουριά, ώστε το margin να εφαρμοστεί σωστά */
  }
}

.equip__item figcaption strong {
  color: #0b2545; /* Σκούρο μπλε */
  font-weight: 700;
  font-size: 1.05em; /* λίγο μεγαλύτερο για έμφαση */
  display: inline-block;
  margin-bottom: 2px;
}

    #contactForm input::placeholder,
    #contactForm textarea::placeholder {
      color: #fff;
      opacity: 1;
    }
    
@media (max-width: 768px) {
  /* Μείωσε το padding μόνο για το περιεχόμενο, όχι για τον τίτλο */
  #lab p,
  #lab .card,
  #lab .card p {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 768px) {
  #lab .card p::before {
    left: -5px; /* ή -12px αν θέλεις ακόμη πιο έξω */
  }
}