body {
            background-image: url("21XCOVER.jpg");
            background-size: cover;        /* Καλύπτει όλη την οθόνη */
            background-position: center;   /* Κεντράρει την εικόνα */
            background-repeat: no-repeat;  /* Δεν επαναλαμβάνεται η εικόνα */
            background-attachment: fixed; /* (optional) σταθερό background */
            min-height: 100%;
            margin:0% 
            
}



  button {
    padding: 8px 12px;
    border: 2px solid #ccc;
    border-left: none;
    border-radius: 0 20px 20px 0;
    background-color: #007bff;
    color: white;
    cursor: pointer;
  }

  button:hover {
    background-color: #4cc9ef;
  }





.container {
  display: flex;              /* Δίπλα-δίπλα */
  justify-content: center;    /* Κεντράρισμα οριζόντια */
  align-items: center;        /* Κεντράρισμα κάθετα (αν έχει ύψος) */
  gap: 50px;                  /* Απόσταση μεταξύ τους */
  height: 100vh;              /* Για κάθετο κεντράρισμα στη σελίδα */
}
        

        h1 { 
         font-family: 'Playfair Display', serif;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;

  /* Χρυσό gradient */
  background: linear-gradient(to right, #d4af37, #ffd700, #b8962e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Διακριτική σκιά */
  

  text-align: center;
   text-shadow: 1px 1px 5px rgba(0,0,0,0.4);
    }
    h2 {
        font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 200;
  letter-spacing: 2px;
  text-transform: uppercase;

  /* Χρυσό gradient */
  background: linear-gradient(to right, #d4af37, #ffd700, #b8962e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Διακριτική σκιά */
  text-shadow: 1px 1px 5px rgba(0,0,0,0.4);

  text-align: center;
   
    }
    p { 
        color: rgb(249, 248, 251); 
        font-family: 'Open Sans', sans-serif; 
        font-size: 130%; 
        text-align: center;
        text-shadow: 1px 1px 5px rgba(0,0,0,0.4);
    }
    

  div {
         color: rgb(249, 248, 251); 
        font-family: 'Open Sans', sans-serif; 
        font-size: 100%; 
        text-align: center;
        display: flex;        /* 👈 ΑΠΑΡΑΙΤΗΤΟ */
        align-items: center;  /* κάθετη στοίχιση */
        justify-content: center; /* οριζόντια στοίχιση */
        gap: 5px; /* απόσταση μεταξύ εικόνας και κειμένου */
    }


.gold{
  font-family: 'Great Vibes', cursive;
  font-size: 110px;
  font-weight: normal;

  background: linear-gradient(
    180deg,
    #fff8dc 0%,
    #ffd700 30%,
    #daa520 50%,
    #ffd700 70%,
    #fff8dc 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    1px 1px 0 #b8860b,
    2px 2px 2px rgba(0,0,0,0.4),
    0 0 10px rgba(255,215,0,0.6);

    filter: drop-shadow(0 0 5px rgba(255,215,0,0.7));
}


h3{
        font-family: "Great Vibes"; 
        font-size: 170%; 
        text-align: center;
}



  li{
    color: rgb(224, 221, 227); 
        font-family: "Times New Roman"; 
        font-size: 160%; 
        padding-left: 0px;
      

}
  
    /* Αρχικά κρύβουμε το μενού */
.menu-hover-fill {
   display: none;
  list-style: none;
  padding: 0;
  margin: 0;

  position: absolute;
  top: 100%;   /* 👈 κάτω από το κουμπί */
  left: 0;     /* 👈 ευθυγράμμιση αριστερά */
  z-index: 1000;
  background: transparent;
}

/* Όταν ανοίγει */
.menu-hover-fill.active {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: transparent;
  
}

/* Τα links σαν κουμπιά */
.menu-hover-fill li a {
  display: inline-block;
  padding: 1px 1px;
  background:rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.15);
  text-decoration: none;
  border-radius: 6px;
  transition: 0.3s;
  box-shadow: 0 0 10px rgb(244, 244, 237);
  
}

/* hover effect */
.menu-hover-fill li a:hover {
  background: #54cdf5;
  transform: translateX(5px);
  box-shadow: 0 0 10px rgb(236, 236, 187);

  }
/* Αρχικά κρύβουμε το μενού */
.menu-hover-fill {
 display: none;
  position: absolute;  /* 👈 ΚΛΕΙΔΙ */
  top: 60px;           /* ρύθμισε ανάλογα */
  left: 0;
  background: rgba(255,255,255,0.15);
  padding: 15px;
  border-radius: 10px;
  z-index: 1000;       /* να είναι από πάνω */
}

.menu-hover-fill li a {
  text-decoration: none;
  color: rgb(248, 243, 243);
}

/* Όταν είναι ενεργό εμφανίζεται */
.menu-hover-fill.active {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.menu-container {
  position: relative;
  justify-content: flex-start;
}

/* Κουμπί menu */
.menu-btn {
  background: rgba(255,255,255,0.15);
  color: rgba(255, 255, 255, 0.888);
  font-family: "Courier New"; 
  border: none;
  padding: 15px 20px;
  cursor: pointer;
  border-radius: 5px;
    box-shadow: 0 0 10px rgb(244, 244, 237);
    font-size: 100%; 
   font-weight: bold;   /* πιο έντονα γράμματα */
}


 h6{
  font-family: "Great Vibes";
  font-size: 40px;
  color: rgb(167, 181, 4);
  text-shadow: 0 0 5px rgb(255, 255, 255);
    text-align: center;
 }


 h7{
  color: rgb(224, 221, 227);
  font-family: "Great Vibes"; 
  font-size: 40px;
         display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
        text-align: center;
        text-shadow: 1px 1px 5px rgba(0,0,0,0.4);
  }

  h8{
    color: rgb(224, 221, 227);
    font-family: "Times New Roman"; 
    font-size: 30px;
       display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
        text-align: center;
        text-shadow: 1px 1px 5px rgba(0,0,0,0.4);
  }


  h4{
   font-family: 'Playfair Display', serif;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;

  /* Χρυσό gradient */
  background: linear-gradient(to right, #d4af37, #ffd700, #b8962e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Διακριτική σκιά */
  text-shadow: 1px 1px 5px rgba(0,0,0,0.4);

  text-align: center;
   }

   h5{
    font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 200;
  letter-spacing: 2px;
  text-transform: uppercase;

  /* Χρυσό gradient */
  background: linear-gradient(to right, #d4af37, #ffd700, #b8962e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Διακριτική σκιά */
  text-shadow: 1px 1px 5px rgba(0,0,0,0.4);

  text-align: center;
   }

/* Gallery grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 στήλες */
  gap: 15px;
  padding: 20px;
  max-width: 650px; /* περιορισμός πλάτους για ωραίο layout */
  margin: 0 auto;   /* κεντράρει τη gallery */
}

.gallery img {
  width: 100%;       /* γεμίζει το grid cell */
  height: auto;      /* διατηρεί αναλογίες */
  border-radius: 8px; /* στρογγυλεμένες γωνίες */
  object-fit: cover;  /* γεμίζει το container χωρίς παραμόρφωση */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05); /* μικρό zoom στο hover */
}

/* Responsive: 1 στήλη σε μικρές οθόνες */
@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

.room {                           /* Κάθε δωμάτιο με τις τιμές του */
  display: flex;
  gap: 20px; /* απόσταση ανάμεσα στις τιμές */
  margin-bottom: 20px;
  margin-right: 10px;
}

.room p {
  margin: 0;
}







.center-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
}




/* Στρογγυλές εικόνες με εφέ κουμπιού */
.social-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;        /* στρογγυλό κουμπί */
  object-fit: cover;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
    margin: 5px; 
 
}

/* Εφέ hover για κουμπί */
.social-image:hover {
  transform: scale(1.1);                     /* λίγο μεγάλωμα */
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);   /* σκιά για βάθος */
}






/* ΜΟΝΟ για αυτή τη σελίδα */
.festival-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Τίτλος */
.festival-page h1 {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  font-weight: 300;
  margin-bottom: 40px;
}

/* Cards layout */
.festival-page .cards {
  display: flex;
  flex-direction: row;    /* Οριζόντια διάταξη */
  flex-wrap: wrap;        /* Πηγαίνει στην επόμενη γραμμή αν δεν χωράει */
  justify-content: center; 
  gap: 25px;
}
/* Κάρτα */
.festival-page .card {
  width: 300px;
  padding: 20px;
  border-radius: 12px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  min-height: 350px;

  display: flex;
  flex-direction: column; /* πολύ σημαντικό: περιεχόμενο από πάνω προς τα κάτω */
  gap: 5px;              /* μικρό κενό ανάμεσα στα <p> */
  
  white-space: normal;    
  word-wrap: break-word;  
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Βεβαιωνόμαστε ότι τα p και strong τυλίγονται σωστά */
.festival-page .card p,
.festival-page .card strong {
  display: block;
  margin: 0 0 8px 0;
  line-height: 1.4em;
}

.festival-page .card h3 span {
  font-size: 14px;
  font-weight: normal;
}

/* Κείμενα */
.festival-page .card p {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 8px;
}

.festival-page .card strong {
  display: block;
  font-weight: bold;
}

/* Highlight section */
.festival-page .highlight {
  margin-top: 20px;
  font-style: italic;
}
/*Γραμμές πιο εντονες*/
.festival-page .card p strong {
  display: block;
  margin-top: 15px;
  padding-top: 10px;
  border-top: 2px solid rgba(255,255,255,0.3);
}

.festival-page .card p strong + p {
  font-weight: bold;
  color: #ffd369;
}

.festival-page .card p {
  margin-bottom: 8px;
}



@media (max-width: 768px) {
  .festival-page .cards {
    flex-direction: column;  /* κάθετα σε μικρές οθόνες */
    align-items: center;
  }
}


/* Πίνακες για την σελίδα Competition*/
/* Κεντρικό wrapper */
.main-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px;
}

/* Τίτλος */
.main-wrapper h1 {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  font-weight: 300;
  margin-bottom: 20px;
}

/* Περιγραφή */
.main-wrapper p:first-of-type {
  margin-bottom: 30px;
  font-style: italic;
}

/* Πίνακες / Panels */
.tables {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 30px;
  align-items: flex-start; 
    flex-wrap: nowrap; /* δεν επιτρέπει να πάνε κάτω */
}

/* Κάθε “πίνακας” / κάρτα */
.table-box {
  width: 45%;
  min-width: 350px;
  max-width: 500px;
  padding: 20px;
  border-radius: 15px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);

  display: flex;
  flex-direction: column;
  gap: 5px;

  text-align: left;

  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  flex-wrap: nowrap; /* δεν επιτρέπει να πάνε κάτω */
}

/* Τίτλοι μέσα σε κάθε box */
.table-box h3 {
  margin-bottom: 10px;
  border-bottom: 2px solid rgba(255,255,255,0.1);
  padding-bottom: 5px;
}

/* Κείμενα μέσα στα <p> */
.table-box p {
  margin: 0;
  line-height: 1.6;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 8px;
}

/* Strong μέσα στα <p> */
.table-box strong {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

/* Responsive: σε κινητά οι δύο πίνακες γίνονται ένα κάτω από το άλλο */
@media (max-width: 800px) {
  .table-box {
    width: 90%;
  }
}




/* Footer με χορηγούς */

.sponsors-footer {
  display: flex;
  justify-content: center;   /* κεντράρει τις εικόνες οριζόντια */
  align-items: center;
  gap: 30px;                 /* διάστημα μεταξύ εικόνων */
  padding: 20px 0;
  background: rgba(255, 255, 255, 0.1); /* προαιρετικό background */
  flex-wrap: wrap;           /* σε μικρές οθόνες οι εικόνες πηγαίνουν κάτω */
   margin-top: 10px;
}

.sponsors-footer img {
  max-height: 80px;          /* μέγιστο ύψος για να είναι ομοιόμορφες */
  height: auto;
  width: auto;
  object-fit: contain;       /* κρατάει αναλογία εικόνας */
  transition: transform 0.3s ease;
}

/* Εφέ hover */
.sponsors-footer img:hover {
  transform: scale(1.1);
}

/* Responsive για κινητά */
@media (max-width: 600px) {
  .sponsors-footer img {
    max-height: 60px;
    margin-bottom: 10px;
  }
}



/* info Bytton */
#social-page .social-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 50px;
  }

  #social-page .social-btn-info {
    display: flex;
    align-items: center;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.3); /* 30% ορατό */;
    padding: 10px 15px;
    border-radius: 10px;
    transition: 0.3s;
  }

  #social-page .social-btn-info:hover {
    background-color: #e0e0e0;
  }

  #social-page .social-image {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }

  #social-page .social-title {
    font-size: 16px;
    color: #333;
    font-weight: bold;
  }



 #my-page p {
     color: rgb(224, 221, 227);
  font-family: "Great Vibes"; 
        font-size: 200%; 
        text-align: center;
        padding-left: 550px;
  }




.back-btn {
  font-size: 17px;   /* 👈 μέγεθος γραμμάτων */
}








/* Footer */
.footer {
  left: 0;
  width: 100%;
  text-align: center;

  padding: 2px;
  background: gold;
  color: black;
  font-weight: bold;

  z-index: 9999; /* 👈 ΚΛΕΙΔΙ για να μένει πάνω από όλα */
  background: gold;
  color: black;
  font-weight: bold;
  border-radius: 6px;
}





/* ΕΙΚΟΝΑ ΤΙΤΛΟΣ*/
.cover {
  display: block;
  margin: 0 auto;
 box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
}


.poster{
  display: block;
  margin: 0 auto;
  width: 50%;
  height: auto;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
}