@media (max-width: 768px) {
  .hero-img-slider .hero-img[src="1_1.jpg"] {
    object-position: 30% center;
  }
  .hero-img-slider .hero-img[src="1_3.jpg"] {
    object-position: 75% center;
  }
}
.hero-img-container {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.hero-img-slider {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-img-slider .hero-img {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: opacity 2.2s cubic-bezier(.33,.66,.4,1);
  will-change: opacity;
  margin: 0 !important;
  display: block !important;
}
body.font-loading { visibility: hidden !important; }
@font-face {
  font-family: 'ComicSansCustom';
  src: url('fonts/ComicSansMS.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* === SMOOTH HOVER ANIMATION FOR SLIDER IMAGES === */
.slider .slides img {
  transition: transform 0.45s cubic-bezier(.25,.46,.45,.94), box-shadow 0.45s ease;
}
.slider .slides img:hover {
  transform: translateY(-8px) scale(1.045);
  box-shadow: 0 8px 24px rgba(0,0,0,0.13);
  z-index: 2;
}
/* === SMOOTH HOVER ANIMATION FOR HOME CAT-BOXES === */
.cat-box {
  transition: transform 0.45s cubic-bezier(.25,.46,.45,.94), box-shadow 0.45s ease;
}
.cat-box:hover {
  transform: translateY(-8px) scale(1.045);
  box-shadow: 0 8px 24px rgba(0,0,0,0.13);
  z-index: 2;
}
/* === MOBILE SLIDER IMAGE ASPECT RATIO 3:4 === */
@media (max-width: 768px) {
  .slider .slides img[src="activities/2.jpg"] {
    object-position: left center;
  }
  .slider .slides img {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
    max-height: none;
    border-radius: 20px;
    display: block;
    margin: 0 auto;
  }
  .slider .slides img[src="farm/6.jpg"] {
    object-position: left center;
  }
}
html {
  scroll-behavior: smooth;
}
/* Απόκρυψη μεταφραζόμενων στοιχείων μέχρι να εφαρμοστεί η αρχική γλώσσα (αποφυγή flash) */
body:not(.i18n-ready) [data-i18n] { visibility: hidden; }
body.i18n-ready [data-i18n] { visibility: visible; }
/* === GLOBAL SOFT TEXT HOVER ANIMATION === */
:root {
  --text-hover-lift: 3px; /* πολύ μικρή μετατόπιση */
  --hover-lift: 2px;
  --hover-shadow-primary: 0 4px 10px rgba(0,0,0,0.12);
  --hover-shadow-secondary: 0 2px 4px rgba(0,0,0,0.08);
  --breath-shift: 1.5px; /* ελαφρώς αυξημένο από 1px */
  --breath-scale-mid: 1.007; /* προηγουμένως ~1.005 */
  --footer-hover-lift: 1px; /* ακόμη πιο διακριτικό lift για footer */
  --footer-hover-duration: .95s;
  --footer-shadow: 0 5px 14px rgba(0,0,0,0.11), 0 3px 6px rgba(0,0,0,0.08);
  --flags-midpoint: 75%; /* ποσοστό από το πλάτος header (50% κέντρο -> 100% δεξιά). 75% = μέση της απόστασης */
  --flags-y-adjust: -3px; /* μικρή ανύψωση για ευθυγράμμιση με τα υπόλοιπα στοιχεία */
}

/* === LANGUAGE SWITCH OVERLAY FADE === */
#lang-change-overlay {
  pointer-events: none;
}

.lang-anim-target { transition: opacity .55s ease, transform .55s ease; }
.lang-anim-target.lang-fading { opacity:0; transform:scale(.97); }

/* === BREATH / WATER-LIKE GLOBAL MICRO ANIMATION === */


/* Όλα τα βασικά text elements παίρνουν transition (transform δεν αλλάζει layout) */
body :where(h1,h2,h3,h4,h5,h6,p,a,li,span,strong,em,small,label) {
  transition: transform .45s cubic-bezier(.25,.46,.45,.94), text-shadow .45s ease;
  will-change: transform;
}

/* Ήπιο ανέβασμα στο hover */
body :where(h1,h2,h3,h4,h5,h6,p,a,li,span,strong,em,small,label):hover {
  transform: translate3d(0, calc(-1 * var(--text-hover-lift)), 0);
  text-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* === SOFT HOVER ΓΙΑ ΟΛΑ ΤΑ ΚΟΥΤΙΑ / ΕΙΚΟΝΕΣ / BUTTONS === */
img, .cat-box, .info-box, .logo-circle, .slider button, .back-to-top, .section-header, .about-overlay, .footer-bar, .contact-grid > *, .header-phone a, .top-menu a, .logo-title, .content-section img, .hero-img-container, .slider {
  transition: transform .55s cubic-bezier(.25,.46,.45,.94), filter .7s ease, box-shadow .55s ease;
  will-change: transform, filter;
  box-shadow: none; /* default χωρίς σκληρό περίγραμμα */
}

/* Απαλό hover χωρίς εμφανείς γωνίες πλαισίου: χρήση filter drop-shadow ώστε να «σβήνουν» οι άκρες */
/* Hover lift χωρίς μετακίνηση των ίδιων των εικόνων */
.cat-box:hover, .info-box:hover, .logo-circle:hover, .slider button:hover, .back-to-top:hover, .section-header:hover, .about-overlay:hover, .contact-grid > *:hover, .header-phone a:hover, .top-menu a:hover, .logo-title:hover {
  /* Αφαιρέθηκε το hover lift από τα βέλη slider */
  box-shadow: none;
  filter: drop-shadow(var(--hover-shadow-primary)) drop-shadow(var(--hover-shadow-secondary));
}

.cat-box:hover {
  cursor: pointer;
}
/* Προσθήκη hover κίνησης στα πλαίσια των εικόνων */
.hero-img-container:hover, .slider:hover {
  /* Αφαιρέθηκε το hover lift από τα βέλη slider */
  filter: drop-shadow(var(--hover-shadow-primary));
}
/* Μηδενισμός hover στα ίδια τα img */
img:hover, .content-section img:hover { transform: none !important; filter: none !important; }

/* === LOGO CIRCLE SHADOW TWEAK === */
/* Αφαιρούμε κάθε shadow/hover από το εσωτερικό img ώστε να μην φαίνονται τετράγωνες γωνίες */
.logo-circle img, .logo-circle img:hover {
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Δίνουμε τη σκιά αποκλειστικά στο κυκλικό container (που έχει ήδη border-radius:50%) */
.logo-circle {
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  filter: none !important; /* αποτροπή drop-shadow φίλτρου που θα "ξεχειλίσει" */
}
.logo-circle:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  filter: none !important;
  transform: translate3d(0,-3px,0);
}

/* Μικρότερο lift στα μεγάλα containers για να μην φαίνεται υπερβολή */
/* Footer & about-overlay ήδη καλύπτονται στο γενικό hover. Προσαρμόζουμε λίγο πιο μικρό lift */
.footer-bar {
  position: relative;
  animation: none !important; /* καμία micro κίνηση */
  transition: transform var(--footer-hover-duration) cubic-bezier(.33,.66,.4,1), box-shadow var(--footer-hover-duration) ease, filter var(--footer-hover-duration) ease;
  transition-delay: 45ms; /* μικρή καθυστέρηση για να αποφευχθεί απότομο ξεκίνημα */
  will-change: transform, box-shadow;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
.footer-bar::after { display:none; } /* δεν χρειαζόμαστε extra layer πλέον */
.footer-bar:hover {
  transform: translate3d(0, calc(-1 * var(--footer-hover-lift)), 0);
  box-shadow: var(--footer-shadow);
  filter: none;
}
.about-overlay {
  transition: transform .75s cubic-bezier(.33,.66,.4,1), filter .8s ease;
}
.about-overlay:hover {
  transform: translate3d(0, calc(-0.5 * var(--hover-lift)), 0);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.14));
}

/* Εξαίρεση: αποφεύγουμε πρόσθετη κίνηση σε μεγάλα κουτιά που ήδη έχουν animation */
/* (Δεν ορίζουμε κενά rules εδώ για να μην υπάρχουν lint errors) */

/* HOME κανονικά */

/* Section header πάνω από εικόνα */
.section-header {
  background: #f0f4f8;
  padding: 1rem 2rem;
  margin: 1rem auto 2rem;
  max-width: 600px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.section-header h2 {
  margin: 0;
  font-size: 1.8rem;
  color: #222;
  font-weight: normal;
  text-align: center;
}

/* Slider */
.slider {
  position: relative;
  max-width: 1000px;
  margin: auto;
  overflow: hidden;
}
.slides {
  display: flex;
  transition: transform 0.6s ease;
}

.slides img {
  width: 100%;
  max-height: 700px;
  object-fit: cover;
  border-radius: 20px;
  flex-shrink: 0;
  display: block;
  margin: 0 auto;
}
.slider button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #f0f4f8;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  border: 2px solid #e0e6ed;
  transition: box-shadow 0.2s;
}
.slider .prev {
  left: 10px;
  z-index: 3;
  color: #d00;
  /* ...existing code... */
}
.slider .next {
  right: 10px;
  z-index: 3;
  color: #087848;
  /* ...existing code... */
}
.footer-bar .contact-left a:nth-of-type(2) {
  margin-left: 1em;
}
a, a:visited, a:active {
  color: #087848;
  text-decoration: none;
}
.top-menu a.active {
  text-decoration: underline;
  color: #087848;
}
.prev, .next {
  color: red;       /* Κόκκινο χρώμα */
  font-weight: normal;
}
.slider .prev:hover {
  color: #a00;
}
.slider .next:hover {
  color: #065c36;
}

/* Εφαρμογή Amarante σε όλο το site εκτός header */
body, h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, .content-section, .info-box, .footer-bar, .cat-box, .back-to-top {
  font-family: 'ComicSansCustom', cursive, sans-serif !important;
}
/* === RESET === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === BODY === */
@import url('https://fonts.googleapis.com/css2?family=IM+FELL+Double+Pica&display=swap');

body {
  font-family: 'ComicSansCustom', cursive, sans-serif;
  background: #EDE8D0;
  color: #087848;
  /* Αφαιρέθηκε το τεχνητό min-height που δημιουργούσε κενό μετά το footer */
  line-height: 1.8;
  font-weight: normal;
  font-size: 1.2rem;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.main-header, .main-header * {
  font-family: 'ComicSansCustom', cursive, sans-serif !important;
  animation: none !important; /* απενεργοποίηση breathing/microFloat στο header */
}
.logo-title h1 {
  font-family: 'ComicSansCustom', cursive, sans-serif !important;
}

/* === HEADER === */
.main-header {
  background: #f0f4f8;
  border-bottom: 1px solid #ccc;
  padding: 0 0.8rem; /* ομοιόμορφο χωρίς extra top ώστε να κεντράρονται τα στοιχεία */
  position: relative;
  border-radius: 25px;
  min-height: 100px;
  display: flex;            /* κεντρική στοίχιση κατακόρυφα */
  align-items: center;      /* όλα τα στοιχεία στη μέση του ύψους */
}

.header-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* αριστερά menu, κέντρο logo/title, δεξιά flags+phone (μέσα στο span της δεξιάς πλευράς) */
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 1rem 0 0.5rem;
  column-gap: 1rem;
  height: 100%; /* γεμίζει το ύψος του header για σωστή κάθετη στοίχιση */
}

/* Δεξιά περιοχή: οι σημαίες να «κάθονται» περίπου στη μέση μεταξύ κεντρικού τίτλου και τηλεφώνου */
.right-side {
  position: absolute; /* καταλαμβάνει τον χώρο από το κέντρο μέχρι δεξιά */
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* τηλέφωνο δεξιά */
  padding-right: .6rem;
}

/* Σημαίες στο κέντρο της δεξιάς περιοχής => πραγματικό μέσο μεταξύ 50% και 100% (δηλ. στο 75% συνολικά) */
.right-side .lang-switch {
  position: absolute;
  /* Κάθετο κέντρο χωρίς υπολογισμούς: πιάνει όλο το ύψος και γίνεται auto margin */
  top: 0;
  bottom: 0;
  left: 50%;
  margin: auto 0; /* κατακόρυφη στοίχιση */
  transform: translateX(-50%); /* μόνο οριζόντιο κεντράρισμα */
  display: flex;
  gap: .45rem;
  align-items: center;
  justify-content: center;
  z-index: 3;
  animation: none !important; /* σταθερό ύψος – χωρίς microFloat */
}

/* Κατάργηση animation και από τα ίδια τα κουμπιά ώστε να μην αλλάζει το οπτικό ύψος */
.right-side .lang-switch .lang-btn { animation: none !important; }

/* Καθαρισμός προηγούμενου γενικού ορισμού (αν υπάρχει) */

/* --- Αντιμετώπιση overlap σε desktop zoom: όταν το διαθέσιμο πλάτος μικραίνει πριν το mobile --- */
@media (max-width: 1800px) and (min-width: 1401px) {
  /* Απενεργοποιούμε το απόλυτο positioning νωρίτερα ώστε στο 120%-180% zoom να μην επικαλύπτονται */
  .header-container { display:grid; grid-template-columns: auto 1fr auto; align-items:center; }
  .logo-title { position:relative; top:auto; left:auto; transform:none; margin:0 auto; }
  .right-side { position:relative; left:auto; right:auto; top:auto; bottom:auto; display:flex; align-items:center; justify-content:flex-end; }
  .right-side .lang-switch { position:relative; left:auto; top:auto; bottom:auto; transform:none; margin:0 1rem 0 0; }
  .top-menu ul { flex-wrap:wrap; }
  .top-menu a { line-height:1.1; }
  .logo-title-text h1 { white-space:normal; overflow-wrap:anywhere; line-height:1.15; }
}
@media (max-width: 1400px) and (min-width: 769px) {
  .main-header { flex-wrap: wrap; padding-top:.4rem; }
  .header-container { display:flex; flex-wrap:wrap; justify-content:center; column-gap:.6rem; row-gap:.35rem; }
  .logo-title { position:relative; top:auto; left:auto; transform:none; order:1; }
  .top-menu { order:2; width:100%; display:flex; justify-content:center; }
  .top-menu ul { flex-wrap:wrap; justify-content:center; }
  .right-side { position:relative; left:auto; right:auto; top:auto; bottom:auto; order:3; width:100%; justify-content:center; padding-right:0; margin-top:.2rem; }
  .right-side .lang-switch { position:relative; left:auto; transform:none; top:auto; bottom:auto; margin:0 .75rem 0 0; }
  .header-phone { display:flex; align-items:center; }
  .header-phone a { font-size:1.2rem; }
  .logo-title-text h1 { max-width:100%; }
}

/* MENU LEFT */
.top-menu ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
}
.top-menu {
  grid-column: 1;
  justify-self: start;
}
.top-menu li a {
  text-decoration: none;
  color: green;
  font-size: 1.3rem;
  font-weight: normal;
  padding: 0.1rem 0.5rem;
}

/* === GREEK VERSION MENU TIGHTER & FURTHER LEFT === */
html[lang="el"] .top-menu ul { gap: 0.55rem; }
html[lang="el"] .top-menu { margin-left: -0.35rem; }
html[lang="el"] .top-menu li a { padding: 0.1rem 0.35rem; }
html[lang="el"] .top-menu li a { font-size: 1.20rem; line-height: 1.2; }

/* === LOGO IN CIRCLE === */
.logo-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: white;
  border: 2px solid rgba(0, 0, 0, 0.082);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo-circle img.logo {
  width: 70%;
  height: auto;
  animation: none !important; /* χωρίς καμία κίνηση στο ίδιο το img */
}

.logo-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* απόλυτο γεωμετρικό κέντρο */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  animation: none !important; /* αποφυγή αλλαγής transform από breathing */
  will-change: transform;
}
.logo-title:hover {
  /* κρατάμε τη βασική μετατόπιση κέντρου και προσθέτουμε το lift */
  transform: translate(-50%, calc(-50% - var(--hover-lift)));
}
.logo-title-text {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.logo-title-text h1 {
  font-size: 1.8rem;
  margin: 0;
  font-weight: normal;
  white-space: normal; /* επιτρέπουμε αναδίπλωση για αποφυγή επικάλυψης σε zoom */
  max-width: 58vw; /* περιορισμός ώστε να σπάει γραμμή όταν μεγαλώνει με zoom */
}
/* Προστασία: σε στενότερο desktop (ή μεγάλο zoom) επιτρέπουμε αναδίπλωση & ρευστό μέγεθος για να μην επικαλύπτονται γράμματα */
@media (max-width: 1600px) {
  .logo-title-text h1 {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.18;
    font-size: clamp(1.15rem, 1.1vw + .9rem, 1.7rem);
    text-align: center;
  }
  .logo-title { max-width: 60vw; }
}
@media (max-width: 1200px) { .logo-title { max-width: 70vw; } }
/* Global brand color utility classes (αντί για scoped μέσα στη .logo-title) */
.green { color: green !important; }
.dark { color: black !important; }
.red { color: red !important; }
.no-break { white-space:nowrap; }

/* Back to top background να ταιριάζει με header */
.back-to-top {
  background: #f0f4f8;
  display: inline-block;
}

.thea-inline {
  font-size: 1.8rem;
  font-weight: normal;
  margin-left: 0.5em;
}

/* RIGHT PHONE */
.header-phone a {
  color: red;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: normal;
}
/* (παλαιός ορισμός lang-switch αφαιρέθηκε υπέρ του absolute) */
.lang-btn {
  background: #fff;
  border: 1px solid #d0d5dc;
  width: 50px; /* πιο μεγάλο για ευδιάκριτη σημαία */
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background .3s, transform .3s, box-shadow .3s;
  overflow: hidden; /* καθαρές γωνίες της σημαίας */
 }
.lang-btn:hover { background:#f0f4f8; transform: translateY(-2px); }
.lang-btn.active { outline: 2px solid #087848; }
.lang-btn:focus { outline: 2px solid #087848; }
/* Flag SVG sizing */
.flag-icon { width: 36px; height: 24px; display:block; }
.lang-btn svg { pointer-events:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.header-phone {
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-left: .2rem;
}

/* === HOME === */
#home {
  position: relative;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease;
  z-index: 0;

  padding: 2rem 1rem 0 1rem;
  margin-bottom: 0;
  padding-bottom: 0;
  text-align: center;
  display: none;
}

#home.active {
  opacity: 1;
  transform: scale(1);
  display: block;
  z-index: 1;
}
.cat-intro-box {
  background:#f0f4f8; /* ίδιο "παγωμένο" φόντο με header */
  border:2px solid #e0e6ed;
  border-radius:22px;
  padding: .9rem 1.4rem 1rem;
  max-width: 600px;
  margin: -1rem auto 1.2rem; /* πιο κοντά στην εικόνα */
  box-shadow: 0 4px 14px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.cat-intro-box::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0));
  pointer-events:none;
  mix-blend-mode:overlay;
}
.cat-intro-text {
  margin:0;
  font-size:1.75rem; /* μειώθηκε ελαφρά από 1.9rem */
  letter-spacing:.5px;
  font-weight:normal;
  display:flex;
  gap:.85rem;
  white-space:nowrap;
}
@media (max-width:768px){
  .cat-intro-box { margin: .2rem auto 1rem; padding:.7rem 1rem .75rem; }
  .cat-intro-text { font-size:1.4rem; gap:.6rem; flex-wrap:wrap; white-space:normal; text-align:center; justify-content:center; }
}
.cat-intro-box:hover { transform: translate3d(0, calc(-1 * var(--hover-lift)),0); filter: drop-shadow(var(--hover-shadow-primary)) drop-shadow(var(--hover-shadow-secondary)); }
.hero-img-container {
  width: 95vw;
  max-width: 1400px;
  height: 700px;
  margin: 2rem auto 2rem auto;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-img {
  border-radius: 16px;
  width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  height: auto;
}
/* === CATEGORY BOXES BELOW HERO === */
.cat-box {
  width: 280px;
  background: #f0f4f8;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: inline-block;
  margin: 1.5rem;
  border-radius: 18px;
  vertical-align: top;
  padding: 1.2rem 1.1rem 1.1rem 1.1rem;
  text-align: center;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94), box-shadow .45s ease;
}
.cat-box img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
.cat-box h3 {
  font-size: 1.6rem;
  font-weight: normal;
  color: red;
}
.cat-box .desc {
  color: green;
  font-size: 1.4rem;
  margin-top: 0.4rem;
  font-weight: normal;
}

/* === CONTENT SECTIONS === */
/* ...existing code... */
.info-box {
  max-width: 600px;
  margin: 0 auto;
  background: #faf6ed;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.info-box img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 0.6rem;
}
.info-box h2 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  font-weight: normal;
}

/* === AboutUS === */
.about-section {
  padding: 2rem 1rem;                 /* λίγο μεγαλύτερο padding */
  margin: 0 auto;
  max-width: 1200px;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  background: url('about.jpg') no-repeat center center/cover;
  min-height: 700px;                  /* 👈 του δίνει ύψος */
  display: flex;                      /* κεντράρει το overlay */
  align-items: center;                /* κατακόρυφο κέντρο */
  justify-content: center;            /* οριζόντιο κέντρο */
}

.about-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1;
}

.about-overlay {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 800px;
  margin: 0;
  background: rgba(0,0,0,0.4);
    padding: 0 2rem 0 2rem;
  margin-bottom: 0;
  border-radius: 12px;
  text-align: center;
}

.about-overlay h2 {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  text-decoration: underline;
}

.about-overlay p {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  line-height: 1.6;
}
@media (max-width:768px){
  .about-overlay { padding: .4rem 1rem .6rem; }
  .about-overlay h2 { font-size:1.7rem; margin-bottom:.4rem; }
  .about-overlay p { font-size:1.05rem; line-height:1.45; margin-bottom:.4rem; }
  .about-overlay button.about-toggle { display:inline-block; margin-top:.3rem; background:#f0f4f8; color:#087848; border:2px solid #e0e6ed; border-radius:14px; padding:.45rem .9rem; font-family:cursive,sans-serif; font-size:1rem; cursor:pointer; }
  .about-overlay button.about-toggle:hover { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12)); transform: translate3d(0, calc(-1 * var(--hover-lift)),0); }
  .about-overlay .about-hidden { display:none; }
}


/* === FOOTER === */
.footer-bar {
  text-align: center;
  background: #f2f2f2;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  margin-top: 0;
  margin-bottom: 0; /* χωρίς κενό μετά το footer */
  padding: 2rem 2.5rem 1.2rem; /* λίγο μικρότερο κάτω padding */
  scroll-margin-top: 40px; /* για να μην κολλάει τελείως στην κορυφή μετά το scroll */
  transition: opacity .5s ease;
}
.footer-bar p {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.back-to-top {
  display: inline-block;
  margin-top: 2rem;
  padding: 1rem 2rem;
  border: 2px solid #087848;
  border-radius: 8px;
  font-size: 1.2rem;
  color: #087848;
  text-decoration: none;
}
.footer-bar h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #222;
  text-decoration: underline;
}

/* Απόκρυψη footer πριν ολοκλήρωση init ώστε να μη φαίνεται στο αρχικό flash */
body:not(.app-ready) #contact.footer-bar { opacity:0; visibility:hidden; }
body.app-ready #contact.footer-bar { opacity:1; visibility:visible; }

.contact-grid {
  display: flex;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
}

.contact-left, .contact-right {
  text-align: left;
  font-size: 1.2rem;
}

.contact-left p, .contact-right p {
  margin: 1rem 0;
}

.contact-left i, .contact-right i {
  color: red;
  margin-right: 0.6rem;
  font-size: 2.2rem;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .header-container {
    display: flex;              /* αλλάζουμε από grid σε flex για απλή αναδιάταξη */
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    width: 100%;
  }
  .main-header { min-height: auto; padding: .6rem .8rem; }
  .logo-title {
    position: static;
    transform: none !important;
    margin: 0 auto .15rem;
    order: 1;
    flex-wrap: wrap;
    max-width: 100%;
  display: flex;
  flex-direction: column; /* logo πάνω, τίτλος κάτω */
  align-items: center;
  }
  .logo-title:hover { transform: none !important; }
  .logo-title-text h1 {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  font-size: 1.65rem; /* αυξημένο μέγεθος τίτλου στο mobile */
    line-height: 1.25;
    text-align: center;
    max-width: 100%;
  }
  .logo-circle { margin: 0 auto .25rem; }
  .logo-title-text .thea-inline { font-size: inherit !important; margin-left: .35em; }
  .right-side {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    order: 2;
  }
  .right-side .lang-switch {
    position: static;
    transform: none;
    margin: .2rem 0 .1rem;
  }
  .right-side .lang-switch { margin-bottom:.45rem; }
  .header-phone { justify-content: center; padding-left:0; margin: .2rem 0 .25rem; }
  .top-menu { order: 4; width: 100%; margin-top: .15rem; }
  .top-menu ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  .top-menu li a { font-size: 1.05rem; }
  html[lang="el"] .top-menu ul { gap: .4rem; }
  html[lang="el"] .top-menu li a { font-size: .98rem; padding: 0.05rem .3rem; }
  /* Override: ζητήθηκε ίδιο μέγεθος με το τηλέφωνο (1.5rem) */
  .top-menu li a, html[lang="el"] .top-menu li a { font-size: 1.5rem !important; line-height:1.2; }
  .top-menu ul { gap: .35rem; }
  .cat-box {
    width: 90%;
    margin: .8rem auto;
    padding: 1rem;
  }
  /* Πιο μεγάλο ύψος hero στο mobile */
  .hero-img-container {
    width: 100%;
    max-width: 100%;
    aspect-ratio: unset; /* χωρίς σταθερή αναλογία */
    height: 65vh; /* λίγο χαμηλότερο */
    min-height: 440px; /* προσαρμοσμένο ελάχιστο */
    margin: 1rem auto 1rem;
  }
  .hero-img-container .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* γεμίζει όλο το container */
    /* ελαφριά μετατόπιση προς τα αριστερά του περιεχομένου (προβολή πιο δεξιάς περιοχής εικόνας) */
    --hero-mobile-x: 35%;
    object-position: var(--hero-mobile-x) center; 
    /* μικρή σμίκρυνση για να μη χαθεί περιεχόμενο όταν μειώθηκε το ύψος */
    transform: scale(.93);
    transform-origin: center center;
  }
  .hero-img { object-fit: cover; }
  .section-header { margin: .6rem auto 1rem; padding: .7rem 1rem; }
  .about-section { padding: 1.2rem .8rem; min-height: auto; }
  /* Μετατόπιση της εικόνας About πιο αριστερά στο mobile */
  .about-section { background-position: 35% center !important; }
  .about-overlay { padding: .6rem .9rem; }
  .content-section { padding: 1.2rem .8rem; }
  .footer-bar { padding: 1.4rem 1.2rem .8rem; }
  .contact-grid { gap: 1.8rem; }
  /* Εξίσωση αποστάσεων Contact στο mobile */
  .contact-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 1.1rem;
  }
  .contact-left, .contact-right {
    width: 100%;
    text-align: center;
  }
  .contact-left p, .contact-right p {
    margin: .45rem 0 !important;
  }
  .contact-left p:first-child, .contact-right p:first-child { margin-top: 0 !important; }
  .contact-left p:last-child, .contact-right p:last-child { margin-bottom: 0 !important; }
  /* Mobile buttons styling for header categories */
  .top-menu li a {
  background: transparent;
  color: #087848 !important;
  border: 2px solid #087848;
    border-radius: 18px;
    padding: .40rem .75rem !important;
    text-decoration: none !important;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: background .3s ease, box-shadow .3s ease, transform .35s ease;
  }
  .top-menu li a:hover, .top-menu li a:focus {
    background: rgba(8,120,72,0.12);
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
    transform: translateY(-2px);
  }
  .top-menu li a:active { transform: translateY(0); }
  .top-menu li a.active { background: #087848; color:#fff !important; box-shadow: 0 3px 10px rgba(0,0,0,0.22); }
  /* Phone pill */
  .header-phone a {
    display:inline-block;
    background:transparent;
    color:red !important; /* επαναφορά κόκκινου */
    border:2px solid red;
    border-radius:20px;
    padding:.45rem .85rem;
    line-height:1.1;
    font-size:1.35rem;
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
    transition: background .3s ease, box-shadow .3s ease, transform .35s ease, color .3s ease;
  }
  .header-phone a:hover, .header-phone a:focus { background:rgba(220,0,0,0.12); transform:translateY(-2px); }
  .header-phone a:active { transform:translateY(0); }
}
/* ...existing code... */

/* Τα sections που αλλάζουν */
.content-wrapper {
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;   /* δίνει λίγο κενό πριν το footer */
}

.content-section {
  position: relative;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease;
  background: #ede8d0;
  border-radius: 12px;
  padding: 2rem 1rem;
  display: none;
  min-height: 400px;
  will-change: opacity, transform; /* πιο ομαλή απόδοση */
}

.content-section.active {
  opacity: 1;
  transform: scale(1);
  display: block;
  z-index: 2;
}

.content-section.fade-out {
  opacity: 0;
  transform: scale(0.95);
}

/* === STOP CONTINUOUS ANIMATION ON SLIDER & HERO IMAGES (ONLY HOVER) === */
.slides img, .hero-img {
  animation: none !important; /* καμία αναπνοή */
}

/* === DESKTOP HEADER STABILITY OVERRIDE (αφαίρεση absolute για αποφυγή overlap σε zoom) === */
@media (min-width: 769px) {
  .header-container { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; column-gap:1.2rem; }
  .logo-title { position:static !important; top:auto; left:auto; transform:none !important; margin:0 auto; justify-content:center; }
  .logo-title:hover { transform:none !important; }
  .right-side { position:static !important; left:auto; right:auto; top:auto; bottom:auto; display:flex; align-items:center; justify-content:flex-end; width:100%; }
  .right-side .lang-switch { position:static !important; transform:none !important; margin:0 1rem 0 0; }
  .header-phone { display:flex; align-items:center; }
  .logo-title-text h1 { max-width:100%; white-space:normal; overflow-wrap:anywhere; line-height:1.15; }
  /* Κατάργηση ειδικών breakpoints που έκαναν wrap — δεν χρειάζονται με το νέο flow */
}