html, body {
    background-image: url(background1.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment:fixed;
    font-family: 'Abril Fatface', cursive; 
    background-color: #3c3c3c; /* Γκρι */
  }
  header {
    margin-top: -0.3em;
    position: sticky;
    height: 110px;
    top: 0;
    transition: transform 0.1s ease; /* Ομαλή μετάβαση */
}
  footer{
    text-align: center;
    font-size: small;
    font-family: Helvetica;
    font-style: italic;
    color: rgba(255, 254, 253, 0.459);
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.686); /* Adjust the shadow properties as needed */
  }
h1 {
    text-align: center;
    font-size: 50px; /* Adjust the value to your desired size */
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.686); /* Adjust the shadow properties as needed */
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.09); /* Stroke width and color */
    -webkit-text-fill-color: rgba(255, 255, 255, 0.808); /* Fill color */
    -webkit-text-stroke: 0.01cm rgba(0, 0, 0, 0.253); /* Stroke width and color for webkit browsers */
    -moz-text-stroke: 2px rgba(0, 0, 0, 0.347);
  }
h2{
  font-family: 'Calibri', 'Trebuchet MS', sans-serif;
  font-style: italic;
  position: static;
  text-align: center;
  margin-top: 5px;
  font-size:25px; /* Adjust the value to your desired size */
  text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.686); /* Adjust the shadow properties as needed */
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.09); /* Stroke width and color */
  -webkit-text-fill-color: rgba(255, 255, 255, 0.808); /* Fill color */
  -webkit-text-stroke: 0.01cm rgba(0, 0, 0, 0.253); /* Stroke width and color for webkit browsers */
  -moz-text-stroke: 2px rgba(0, 0, 0, 0.347);
  }
  h3 {
    font-family: 'Courier New', Courier, monospace;
    position: static;
    text-align: center;
    font-size: 20px;
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.686);
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.09);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.808);
    -webkit-text-stroke: 0.01cm rgba(0, 0, 0, 0.253);
    -moz-text-stroke: 2px rgba(0, 0, 0, 0.347);
    border-bottom: 2px solid rgba(184, 21, 176, 0.233); /* Προσομοίωση υπογράμμισης */
    padding-bottom: 3px; /* Απόσταση από το κείμενο */
}
h4{
  font-family: 'Courier New', Courier, monospace;
    position: static;
    text-align: center;
    font-size: 20px;
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.686);
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.09);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.808);
    -webkit-text-stroke: 0.01cm rgba(0, 0, 0, 0.253);
    -moz-text-stroke: 2px rgba(0, 0, 0, 0.347);
}


.price{
  font-family: 'Courier New', Courier, monospace;
    position: static;
    text-align: center;
    font-size:15px; /* Adjust the value to your desired size */
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.686); /* Adjust the shadow properties as needed */
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.09); /* Stroke width and color */
    -webkit-text-fill-color: rgb(255, 255, 255); /* Fill color */
    -webkit-text-stroke: 0.01cm rgba(0, 0, 0, 0.253); /* Stroke width and color for webkit browsers */
    -moz-text-stroke: 2px rgba(0, 0, 0, 0.347);
}
.subtitle {
    font-style: italic;
    text-align: center;
    font-size: 25px;
    margin-top: -40px;
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.686);
    color: rgba(184, 21, 176, 0.66);
    stroke: rgb(255, 249, 249);
}
.menu-container {
  position: static;
  text-align: center; /* Κεντράρει το περιεχόμενο μέσα στο container */
}

.menu{
    font-family: 'Abril Fatface', cursive; 
    text-align: center;
    position:static;
    font-size: 50px; /* Adjust the value to your desired size */
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.686); /* Adjust the shadow properties as needed */
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.09); /* Stroke width and color */
    -webkit-text-fill-color: rgba(255, 255, 255, 0.737); /* Fill color */
    -webkit-text-stroke: 0.01cm rgba(0, 0, 0, 0.253); /* Stroke width and color for webkit browsers */
    -moz-text-stroke: 2px rgba(0, 0, 0, 0.347);
    margin-top: -20px;
    margin-bottom: -12px;
}
.menu-button{
  position: absolute;
  right: 0; /* Τοποθέτηση στα δεξιά */
  transform: translateY(-150%); /* Ευθυγράμμιση στο κέντρο */
  background-color: #ffffffab;
  color: rgb(184, 21, 176);
  opacity:70%;
  cursor: pointer;
  margin-right: 10px;
  box-shadow:0px 0px 10px #ffffff;
  border-radius: 10px;
  border-color:#ffffff00;
}

/* Στοιχίζει τα προϊόντα σε δύο κουτιά ανά σειρά */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 προϊόντα ανά σειρά */
  gap: 10px; /* Απόσταση ανάμεσα στα προϊόντα */
}

/* Κάθε προϊόν σε μορφή κάρτας */
.product-card {
  perspective: 1000px; /* Προσθέτει βάθος για το flip effect */
  position: relative;
}

/* Το εσωτερικό της κάρτας που κάνει το flip */
.flip-card {
  width: 100%;
  height: 230px; /* Προσαρμόσιμο μέγεθος */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;

}

/* Κάνε flip όταν η κάρτα έχει την κλάση flipped */
.product-card.flipped .flip-card-inner {
  transform: rotateY(180deg); /* Το flip όταν γίνει κλικ */
}

/* Όψεις της κάρτας */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(22, 2, 2, 0.411);
}

/* Στυλ για την μπροστινή όψη */
.flip-card-front {
  background-color: rgba(223, 24, 186, 0.174);
  color: white;
}

/* Στυλ για την πίσω όψη */
.flip-card-back {
  background-color: rgba(223, 24, 187, 0.174);
  color: white;
  transform: rotateY(180deg); /* Κάνει την πίσω όψη ανάποδη */
}

/* Διπλή στήλη για τις δύο υποκατηγορίες */
.subcategory-container {
  display: flex;
  justify-content: space-between;
  margin-top: -25px;
}

.subcategory-left, .subcategory-right {
  width: 48%;
}

.pricea {
  font-size: 20px;
  margin-top: 50px;
  font-family: 'Courier New', Courier, monospace;
    position: static;
    text-align: center;
    font-size:18px; /* Adjust the value to your desired size */
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.686); /* Adjust the shadow properties as needed */
}
.priceb {
  font-size: 18px;
  margin-top: 20px;
  font-family: 'Courier New', Courier, monospace;
    position: static;
    text-align: center;
    font-size:18px; /* Adjust the value to your desired size */
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.686); /* Adjust the shadow properties as needed */
}


/*  */
hr{
    border-color: rgba(223, 24, 186, 0.174);
    border-width: 3px;
    border-style:solid;
}
.button-container {
  display:grid; /* Display buttons in a row */
  justify-content: center; /* Center buttons horizontally */
  flex-wrap: wrap; /* Allow buttons to wrap to a new row */
  margin-top: 10px; /* Add some space between the header and buttons */
  padding-block-start: 6px;
  padding-block-end:45px;
  padding-inline:20px;

}
.button-container a {
  box-shadow: 0px 4px 50px rgba(255, 255, 255, 0.123);
  display: inline-block;
  width: 290px;
  height: 40px;
 font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.911);
 -webkit-text-stroke: 2px rgba(25, 0, 255, 0.13); /* Stroke width and color */
 margin: 5px; /* Add some space between buttons */
 background-image: url(button2.png);
 border-radius: 50px  50px 50px 50px;
 background-position: center;
 background-repeat: no-repeat;
 color: #ffffff;
 font-size: 20px; /* Button text color */
 cursor:pointer;
 text-align: center;
 text-decoration: none;  
 line-height: 36px;
} 
.button-container a:hover {
    color: rgba(255, 0, 0, 0.925);
  }

.modal {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5); /* Μαύρο φόντο με διαφάνεια */
    }

/* Στυλ για το περιεχόμενο του modal */
.modal-content {
    margin: 15% auto;
    padding: 20px;
    width: 95%;
}

/* Κουμπί κλεισίματος */
.close {
  color: #aaa;
  font-size: 50px;
  font-weight: bold;
  position: absolute; /* Αλλάζει τη θέση του */
  top: 10px; /* Απόσταση από την κορυφή */
  right: 20px; /* Απόσταση από τη δεξιά πλευρά */
  z-index: 1001; /* Βεβαιώνει ότι είναι πάνω από άλλα στοιχεία */
}

.close:hover,
.close:focus {
  color: rgba(0, 0, 0, 0.8); /* Μπορείς να αλλάξεις το χρώμα στο hover */
  text-decoration: none;
  cursor: pointer;
}
#modal-iframe {
  display: none;
  width: 90%; /* Ή το επιθυμητό πλάτος */
  height: 90%; /* Ή το επιθυμητό ύψος */
  position: fixed; /* Κάνει το iframe σταθερό */
  top: 55%; /* 50% από την κορυφή της οθόνης */
  left: 50%; /* 50% από την αριστερή πλευρά της οθόνης */
  transform: translate(-50%, -55%) scale(0); /* Κεντράρει το iframe */
  border-color: #ede7ec00; /* Χρώμα border */
  border-radius: 20px;
  border-style: solid; /* Στυλ border */
  border-width: 1px; /* Πλάτος border */
  z-index: 1000; /* Διασφαλίζει ότι είναι πάνω από άλλα στοιχεία */
  box-shadow: 0 0 10px rgba(184, 21, 176, 0.233), 0 0 20px rgba(184, 21, 176, 0.233), 0 0 30px rgba(184, 21, 176, 0.233);
  opacity: 0; /* Αρχικό opacity 0 */
  transition: transform 0.7s ease, opacity 0.7s ease; /* Προσθέτουμε transition 1s */
}
#modal-iframe.show {
  transform: translate(-50%, -55%) scale(1); /* Τελικό scale στο 100% */
  opacity: 1; /* Εμφανίζεται */
}