h1 {
  color: #3c1d0c;
}

h2{
  color: #4d2c1e;
  margin: 0 auto;
  text-align: center;
  flex: 1;
  margin-top: 30px;
}

footer {
    background: #4d2c1e !important;
    color: #fff !important;
    padding: auto;
}

.faq{
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  border-radius: 20px;
   background: #ffffff;
   box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  
}

.target{
  color: rgba(10, 10, 10, 0.500); 
  padding: 10px; 
  border-radius: 15px;  
  height: 250px;
  margin-bottom: 50px;
}
.target p{
  background: #ffffff;
  width: 350px;
  word-break: break-word;
  text-align: center;
  margin: 0 auto;
 height: 70%;
 padding: 15px;
  border-radius: 20px;

}
.logo img{
  width: 60px; /* ή ό,τι μέγεθος θέλεις */
  height: auto; /* διατηρεί τις αναλογίες */
  }
.target h3{
  margin-top: 10px;
  margin-bottom: 10px;
  width: 260px;
  text-align: center;
  justify-self: center;
}
@media screen and (max-width: 900px) {
  .target p{
    width: 90%;
    justify-self: center;
  }
  .target h3{
    width: 90%;
    justify-self: center;
  }
  
}
details{
  border: 1px solid #dddddd21;
  border-radius: 20px;
  margin-bottom: 1rem;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}


.resources-list{
  max-width: 900px;
  margin: 2rem auto;
  padding: 1rem;
  border-radius: 20px;
   
   box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
   gap: 1rem;
   flex-direction: row;
}
.student{
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.student-name {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.student-father {
  color: #888;
  font-size: 0.9em;
  margin-bottom: 0.5rem;
}














body {
  font-family: 'Montserrat', Arial, sans-serif;
  background: #fff8e8;
  color: #4d2c1e;
  margin: 0;
  overflow-x: hidden;
  padding: 0;
}

header {
  background: #fff;
  box-shadow: 0 2px 8px #0001;
  padding: 0.5rem 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*
  max-width: 1200px;
  margin: auto;
  padding: 0 2rem;*/
  max-width: none;
  margin: 0;
  width: auto;
  max-width: 100vw;
  padding-left: 2vw;
  padding-right: 2vw;
  box-sizing: border-box;

}

.topbar nav a {
  color: #4d2c1e;
  text-decoration: none;
  margin: 0 0.5rem;
  font-weight: 700;
  transition: color 0.2s;
}

.topbar nav a:hover {
  color: #ff7e5f;
}

/* Dropdown styling */
.dropdown {
  position: relative;
  display: inline-block;
  
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 200px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  border-radius: 8px;
  z-index: 1000;
  top: 100%;
  left: 0;
  border: 1px solid #ddd;
  overflow: hidden;
  z-index: 64000;
}

.dropdown-content a {
  color: #4d2c1e !important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  margin: 0 !important;
  font-weight: 500;
  transition: background-color 0.2s;
    
}

.dropdown-content a:hover {
  background-color: #eeacac4a;
  color: #ff7e5f !important;
}

#dropdownMenu {

   transform: none;
  display: none;
}
#dropdownMenu.open {
  display: block;
}
#dropdownMenu2 {

  transform: none;
  display: none;
}
#dropdownMenu2.open {
  display: block;
  
}

 #dropdownMenu2.open a::after{
  
   transform: none;
 }

#dropdownMenu3 {

  transform: none;
  display: none;
}
#dropdownMenu3.open {
  display: block;
  
}

 #dropdownMenu3.open a::after{

   transform: none;
 }


.arrow {
  display: inline-block;
  transition: transform 0.3s;
    font-size: 1.2em;

}
.arrow.open {
  transform: rotate(180deg);
}
/* Όταν το dropdown είναι ανοιχτό, περιστρέφεται το βελάκι */

nav .login-btn {
  color: #fff !important;
}
nav .login-btn:hover {
  background: #F7C19C;
  color: #BC5E29;
  box-shadow: 0 0 0 2px rgba(183, 54, 22, 0.495)
}
nav{
  display: flex;
  align-items: center;
  gap: 15px;
}

.login-btn {
  background: #4d2c1e;
  color: #fff;

  border-radius: 20px;
  padding: 0.5rem 1.5rem;
  font-weight: 700;
  font-size:small;
  cursor: pointer;

  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  transition: background 0.2s;
}

.login-btn:hover {
  /*background: #ff7e5f;
  color: #4d2c1e;*/
    background: #F7C19C;
  color: #BC5E29;
  box-shadow: 0 0 0 2px rgba(183, 54, 22, 0.495)
}

.contact-btn{

  background: #4d2c1e;
  color: #fff;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

  border: none;
  border-radius: 20px;
  padding: 0.5rem 1.5rem;
  font-weight: 700;
    font-size: small;

  cursor: pointer;
  transition: background 0.2s;

}

#contact-btn1{
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

    margin-bottom: 100px;
    margin-left: 40%;
    margin-top: 10%;
     
}

.contact-btn:hover {
  background: #F7C19C;
  color: #BC5E29;
  box-shadow: 0 0 0 2px rgba(183, 54, 22, 0.495)
}

/*
.hero {
  position: relative;
  display: flex;
  gap: 50px;
  width: auto;
  margin: 0 auto;
  align-self: flex-start;
  box-sizing: border-box;
  margin-top: -10px !important;
  padding-top: 0 !important;
  z-index: 1300;
 
}

.hero-text {
  margin-top: 0px;
  padding: 0 1rem;
  z-index: 1320 !important;
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 50%;
  
}
.hero-logo{
  margin-bottom: 1.5rem;
  text-align: center;
  justify-self: center;
  position: relative;

}
#hero-logo{
  position: relative;
}  
.hero-text p {
  color: #562010aa;
  font-size: 4rem;
  justify-self: center;
  font-weight: 400;
  width: 40rem;
  display:inline-grid;
  margin-left:100px;
  margin-bottom: 120px;
  display: flex;
  
  font-size: clamp(14px, 4rem, 4rem);

  align-content: center;
  /* right: 80%; */
  /* Το right εφαρμόζεται μόνο σε στοιχεία με position: relative, absolute, fixed ή sticky */
  /* Αν θέλεις να δουλέψει το right, πρόσθεσε position: relative ή absolute 
  position: relative;
}

.slideshow-wrapper {
  width: 50%;
  height: auto;
  width: 100vw;
  height: 90vh;
  margin: 0 !important;
}
.slideshow-wrapper img {
  width: 50%;
  height: 60%;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.hero-text h1 {
  font-size: 4.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
}
.slide {
  position: absolute;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 0;
  border-radius: 16px;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}
*/

/* Hero Section Responsive Layout */
.hero {
  justify-self: center;
  width: 100vw;
  max-width: 100vw;
  
  padding: 0 0 20px 0;
  margin-top: 30px;
}
.hero-content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.hero-text {
  flex: 1 1 320px;
  justify-items: left;
}
.hero-text p{
  display:inline-grid;
  color: #562010aa;
  font-size: 4rem;
  font-weight: 400;
  width: 40rem;
  margin-top: -5px;
}
.hero-logo img {
  max-width: 320px;
  width: 100%;
  height: auto;
  margin-bottom: 0px;
}
.slideshow-wrapper {
  flex: 2 1 0;
  position: relative;
  width: 100vw;
  max-width: 950px;
  height: 50vh;
  margin-top: 50px;
  border-radius: 16px;

  overflow: hidden;
  display: block;
  align-self: flex-start;
}
.slideshow-wrapper img{
  object-fit: cover;
    height: 40vh !important;
    max-height: 100vh !important;
    width: 35vw !important;
    max-width: 40vw !important;
  
  
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s;
  z-index: 1;
}
.slide.active {
  opacity: 1;
  border-radius: 16px;

  z-index: 2;
}
@media (max-width: 1200px) {
  .hero-content {
    flex-direction: column;
    align-items: center;
  }
  .slideshow-wrapper {
    border-radius: 0px;
    width: 95vw;
    max-width: 95vw;
    height: 220px;
    align-self: center;
  }
}
@media (max-width: 1000px) {
  .slideshow-wrapper {
    width: 98vw;
        border-radius: 0px;

    max-width: 98vw;
    height: 140px;
  }
}
/* End Hero Section Responsive Layout */

.search-bar {
  margin: 1rem 0;
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  width: 350px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.182), inset 0 2px 8px rgba(0, 0, 0, 0.177);
}

.search-bar input {
  border: none;
  background: transparent;
  flex: 1;
  font-size: 1rem;
  outline: none;
}

.search-bar button {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

.contact-btn {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

  background: #4d2c1e;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1.5rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 1rem;
}

.facebook-icon {
  transition: filter 0.3s;
}

.facebook-icon:hover {
  /* Facebook blue: #1877f3 */
  filter: invert(34%) sepia(98%) saturate(7497%) hue-rotate(203deg) brightness(97%) contrast(101%);
}

.instagram-icon {
  transition: filter 0.3s;
}

/* Instagram εικονίδιο λίγο πιο μεγάλο */
.instagram-icon {
  width: 28px !important;
  height: 28px !important;
}

.instagram-icon:hover {
  /* Instagram gradient colors approximation */
  filter: invert(39%) sepia(72%) saturate(7491%) hue-rotate(320deg) brightness(95%) contrast(101%);
}
.mail-icon:hover {
  /* Gmail red: #D44638 */
  filter: invert(21%) sepia(91%) saturate(7473%) hue-rotate(357deg) brightness(95%) contrast(101%);
}

.mail-icon
{
  width: 26px !important;
  height: 26px !important;
}
.phone-icon:hover {
  /* Phone green: #34A853 */
  filter: invert(42%) sepia(72%) saturate(7493%) hue-rotate(100deg) brightness(95%) contrast(101%);
}
.icons {
  display: flex;
  gap: 15px;
  align-items: center;
}

.icons img {
  width: 24px;
  height: 24px;
  transition: filter 0.3s;
}





.programs-section {
  text-align: center;
  padding: 40px 20px;
  font-family: 'Arial', sans-serif;
  
}

.programs-section h2 {
  font-size: 2rem;
  color: #3c1c08;
  margin-bottom: 10px;
}

.programs-section p {
  color: #333;
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.5;
}

.programs-grid {
  display: flex;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
@media (max-width: 1200px) {
  .programs-grid {
    flex-direction: column;
    align-items: center;
    justify-items: center;

    display: flex;
    margin-top: 150px;
     background: #fff8e8
  }
  #grid-prog{
     align-items: center;
    display: flex;
    
    margin-top: 0px !important;
  }


  .contact-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
   /* z-index: 6000;*/

    
    
  }

 
  #contact-btn1{
    position: absolute;
    font-size: 1rem !important;
    left: 10%;
    transform: translateX(-50%);
    z-index: 6000;
     margin-top: 150px;
     width: 250px;
}
}
.program-category {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.program-category .icon {
  font-size: 30px;
  margin-bottom: 10px;
}

.program-category h3 {
  text-align: center;
  margin-bottom: 10px;
  color: #3c1c08;
}

.btn {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

  border: none;
  padding: 12px 20px;
  margin: 6px 0;
  width: 380px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 2px;
  cursor: pointer;
  transition: 0.2s;
}

.btn.brown {
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

  background-color: #fb6c41;
  color: #ffffff;
  /*3c1c08*/
}

.btn.yellow {
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

  background-color: #f5b07e;
  color: #ffffff;
}

.btn:hover {
  transform: scale(1.05);
}



.full-program-btn {
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

  text-decoration: none;
  background-color: #3c1c08;
  color: white;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: bold;
  box-shadow: 0 0 12px rgba(0,0,0,0.2);
  transition: 0.2s;
}

.full-program-btn:hover {
  background-color: #5b2c0e;
}


.program-table {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
}

.program-table div {
  background: #fff;
  border-radius: 12px;
  padding: 1rem 8rem;
  box-shadow: 0 2px 8px #0001;
}


.icon-circle {
  background-color: #FDE9DA; /* ανοιχτό μπεζ ή ό,τι ταιριάζει στο design σου */
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* προαιρετικά για βάθος */
  margin-bottom: 10px;
}

.box {
  /*background: #f4f4f4;*/
  padding: 20px;
}

#program-prog{
    font-size: 1.5rem;
    margin-left: 550px;
   /* margin-top: 20px;*/
}
#program-title-btm{
    font-size: 1.5rem;
    margin-left: 300px;
    margin-top: 20px;
}
.icon-circle img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.announcements {
  max-width: 900px;
  margin: 2rem auto;
  background: #f9be97;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  z-index: 1000;

  max-width: none;
  margin: 0;
  width: 100%;
  padding-left: 2vw;
  padding-right: 2vw;
  box-sizing: border-box;
}


/* Specific styling for admin announcements container */
.announcements .container-2 .announcements {




  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  /* height: auto !important; - Commented out to allow JS control */
  /* overflow: visible !important; - Commented out to allow JS control */
}


.announcements-list {
  margin-top: 1rem;

}

.announcement {
  background: #f59f65;
  /*border-radius: 8px;*/
  
  padding: 0.7rem 0.7rem;
  margin-bottom: 0.7rem;
  margin-top:0.7rem;
  box-shadow: 0 1px 4px #0001;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.announcement .date {
  color: #f2e9e7;
  font-weight: 700;
  min-width: 70px;
}

.stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    background: linear-gradient(90deg, #f5b76d 0%, #f7e7db 100%);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    
    padding: 2rem 0;
    
    
    max-width: none;
    margin: 0;
    width: 100%;
    padding-left: 2vw;
    padding-right: 2vw;
    box-sizing: border-box;
}

.animation-for-section , .animation-for-section , .announcements,.container-2 {
  animation: appear 3s linear;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}

.resource-card {
  animation: appear 3s linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  width: 300px;

  
}

@keyframes appear {
  from { opacity: 0; scale: 0.4; }
  to { opacity: 1; scale: 1; }
}

@media (max-width: 1200px) {
  .animation-for-section, .goal-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-self: center !important;
    justify-content: center !important;
    width: 100vw !important;
    box-sizing: border-box;
    text-align: center !important;
    padding: 0 2vw !important;
  }
  .animation-for-section h2,
  .animation-for-section p,
  .goal-section h2,
  .goal-section p {
    justify-self: center !important;
    text-align: center !important;
    width: 95vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
  .announcements {
    max-width: 100vw !important;
    width: 100vw !important;
    box-sizing: border-box;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 0.5rem !important;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    /* Optional: always show scrollbar on mobile for clarity */
    scrollbar-width: thin;
    scrollbar-color: #ff874b #ffe5c2;
  }
  .announcements::-webkit-scrollbar {
    width: 10px;
    background: #ffe5c2;
    border-radius: 10px;
  }
  .announcements::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ff874b 40%, #A0522D 100%);
    border-radius: 10px;
  }
 .container-2 {
    max-width: 80vw !important;
    width: 80vw !important;
  

    box-sizing: border-box;
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;

  }
  .announcement-block, .announcement-card {
    max-width: 90vw !important;
    width: 90vw !important;
    margin: 18px auto !important;
    box-sizing: border-box;
    border-radius: 16px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    justify-content: center !important;
    padding: 18px 10px !important;
  }
  .goal-block, .goal-card, .program-category {
    max-width: 90vw !important;
    width: 90vw !important;
    margin: 18px auto !important;
    box-sizing: border-box;
    border-radius: 16px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px 10px !important;
  }
  .goal-section {
    padding-bottom: 30px !important;
  }


}

@media (max-width: 900px) {
  .hero, .program-table, .experience-list, .resources-list, .footer-content {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    z-index: 1320 !important; 
  }
  .hero-img img {
    width: 70%;/*100*/
    max-width: 350px;
    z-index: 1320 !important;
    
  }/*
  

  .hero-text p {
    padding: 10px;
    background-color: white;
    border-radius: 20px;
    font-size: 1.2rem;
    width: 80vw;
    max-width: 95vw;
    justify-self: center;
    text-align: center;
    z-index: 1320 !important;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
  }
  .hero .hero-text .hero-logo {
    width: 250px;
    margin-bottom: 30px;
    margin-top: 30vw;
    justify-self: center;
    justify-content: center;
    align-items: center;
    z-index: 1 !important;
    padding: 10px;
    border-radius: 30px;
  }
  .hero-logo {
    z-index: 1320 !important;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    text-align: center;
    width: 100vw !important;
    max-width: 90vw !important;
  }
   #hero-logo img {
    background: #ffffffbc;
    border-radius: 20px;
    padding: 10px;
    max-width: 95vw;
    text-align: center;
    z-index: 1320 !important;
    position: relative;
    left: 51%;
    transform: translateX(-50%);
    top: 0;
    display: block;
    margin: 0 auto;
    z-index: 50000 !important;
  }
  .hero-logo #footer-logo img {
    background: #ffffffbc;
    border-radius: 20px;
    padding: 10px;
    max-width: 95vw;
    text-align: center;
    z-index: 1320 !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    display: block;
    margin: 0 auto;
     z-index: 50000 !important;
}*/
}
.ball {
      position: absolute;
      margin-top: 5%;
      right: 10%;
      width: 100px;
      height: 100px;
      background-color: #ff7c4ce0;
      filter: blur(6px);
      border-radius: 50%;
      transform: translate(-50%, -80%);
      z-index: -1; /* Πίσω από όλα */
      animation: moveAndGrow 2s ease-out forwards;
    }

  @media (max-width: 900px) {
    .ball {
      display: none; /* Απόκρυψη σε μικρές οθόνες */
    }
    
  }  

    /* Animation */
    @keyframes moveAndGrow {
      0% {
        transform: translate(-50%, -50%) scale(1);
      }
      100% {
        transform: translate(45%, 100%) scale(5);
      }
    }



@media (max-width: 900px) {
     .stats-section {
      position: relative;
      /*overflow: visible !important;*/
      padding: 0px 0px;
      visibility: hidden;
      margin-bottom: 0px;
      margin-top: -200px;
    }
  
}

     .stats-section {
      position: relative;
      /*overflow: visible !important;*/
            visibility: hidden;

      padding: 0px 70px;
      margin-bottom: 50px;
    }
.blob-bg {
  position: absolute;
  width: 100%;
  height: 180px !important;
  z-index: 0;
  display: none;
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.blob-bg.visible {
  display: block !important;
  opacity: 1 !important;
}

    /* Blob 1 (από κάτω προς τα πάνω) */
    .blob1 {
      bottom: 0;
      left: 0;
      
      transform: translateY(20px);
    }

    .blob1.animate {
      transform: translateY(0);
    }

    /* Blob 2 (από πάνω προς τα κάτω) */
    .blob2 {
      bottom: 0;
      left: 0;
      
      transform: translateY(80px);
    }

    .blob2.animate {
      transform: translateY(0);
    }

    .stats-content {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      opacity: 0;
      transition: opacity 0.5s ease-out;
      color: #e7e7e7;
      font-size: 34px;
      font-weight: 500;
      text-align: center;
       -webkit-text-stroke: 1px #ffffff78;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.318);
      align-items: flex-end;
      
    }

    .stats-content.animate {
      opacity: 1;
    }

    .stat {
      margin: 20px;
      min-width: 150px;
    }

    @media (max-width: 600px) {
  .announcement-list-mobile {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .announcement-mobile-item {
    border-bottom: 1px solid #eee;
    padding: 1rem 0.5rem;
    cursor: pointer;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 0.5rem;
  }
  .announcement-mobile-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
    color: #3c1d0c;
  }
  .announcement-mobile-date {
    font-size: 0.95rem;
    color: #888;
    margin-bottom: 0.2rem;
  }
  .announcement-mobile-content {
    font-size: 1rem;
    color: #222;
    margin-top: 0.5rem;
    background: #f9f9f9;
    border-radius: 6px;
    padding: 0.7rem;
  }
}

    @media (max-width: 600px) {
      .stats-content {
        flex-direction: column;
        font-size: 24px;
      }
    }

.carousel-wrapper {
  position: relative;
  padding: 4rem 0;
  overflow: hidden;
}

.background-blob {
  position: absolute;
  bottom: 10;
  left: 50%;
  width: 900px;
  height: 700px;
  background: radial-gradient(circle, #FF9B69, #EB5A4A);
  border-radius: 50% ;
  transform: translateX(-50%) scale(1);
  z-index: 0;
  transition: transform 1s ease-in-out;
}

.carousel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.carousel-viewport {
  width: 640px; /* Width of one card */
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.card {
  position: relative;
  height: 200px;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  display: flex;
  align-items: flex-end;
}




.card-overlay{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(95, 65, 44, 0.55);
  
}
.card-overlay img {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
}
.card-overlay h2{
  color: #fff;
  font-size: 1.3em;
  margin: 0;
  text-align: center;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.3);
}
.card:hover .card-overlay h2 {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  transform: scale(1.05);
  transition: background 0.3s, transform 0.4s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}



.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 60px 20px;
}

@media (max-width: 700px) {
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 10px 30px 10px;
  }
}

/* Εργαλεία Μαθητή - Βελτιωμένο layout και responsive */
.student-tools-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px 20px;
}
.student-tools-grid {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.student-tool-card {
  flex: 1 1 220px;
  min-width: 220px;
  max-width: 320px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px #0001;
  text-align: center;
  text-decoration: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

.student-tool-card img {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
}
.student-tool-card h2 {
  color: #595756ce;
  font-size: 1.3em;
  margin: 0;
}



@media (max-width: 900px) {
  .student-tools-grid {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  .student-tool-card {
    max-width: 95vw;
  }
}

/* Πανελλαδικές Κάρτες */
.panelladikes-card {
  position: relative;
  height: 200px;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

.panelladikes-card:hover {
  filter: brightness(1.1) contrast(1.05);
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);
  transform: translateY(-10px) scale(1.03);
}


/* Νέο CSS για τις κάρτες πανελλαδικών */
.panelladikes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 60px 20px;
}

@media (max-width: 700px) {
  .panelladikes-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 10px 30px 10px;
  }
}

.panelladikes-grid .card-overlay{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(95, 65, 44, 0.55);
  
}

/* Αφαίρεση hover εμφάνισης για blobs ώστε να μην εξαφανίζονται */
.stats-section:hover .blob-bg {
  /* display: block !important; */
  /* opacity: 1 !important; */
}
.stats-section:hover .blob1 {
  /* transform: translateY(0); */
}
.stats-section:hover .blob2 {
  /* transform: translateY(0); */
}

/* Custom scrollbar for progressList - thicker version */
#progressList::-webkit-scrollbar {
  width: 18px;
  background: #ffe5c2;
  padding: 10px;
  border-radius: 20px;
}
#progressList::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #ff874b 40%, #A0522D 100%);
  border-radius: 10px;
  border: 4px solid #ffe5c2;
}
#progressList::-webkit-scrollbar-track {
  background: #ffe5c2;
  border-radius: 10px;
}
#progressList {
  scrollbar-width: thick;
  scrollbar-color: #A0522D #ff874b00;
  padding-right: 40px;
}
@media (max-width: 900px) {

  .logo {
    max-width: 120px;
    height: auto;
  }
  nav {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100vw;
    background: #fff8e8;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 100;
  }
  nav.open {
    font-size: 1.3em !important;
    height: 100vh !important;
    min-height: 100vh !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 60px !important;
    z-index: 9999 !important;
  }
  nav.open a, nav.open .dropdown > a {
    font-size: 1.2em !important;
    padding: 18px 0 !important;
    width: 100vw !important;
    text-align: center !important;
    display: block !important;
  }
  nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 248, 232, 0.95);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 150;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding-top: 60px;
    padding-bottom: 80px;
  }
  .menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 2rem;
    margin-left: auto;
    cursor: pointer;
    /*z-index: 200;*/
  }


    
}
@media (min-width: 1201px) {
  .menu-toggle {
    display: none;
  }
  nav {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: none;
    box-shadow: none;
  }
}
@media (max-width: 900px) {
  
  html, body {
    width: 100vw;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    touch-action: manipulation;
    
  }
  footer {
    padding: 2rem 0.5rem 1rem 0.5rem !important;
    margin-top: 30px !important;
    background: #4d2c1e !important;
    color: #fff !important;
    font-size: 1.05em;
    text-align: center !important;
  }
  .footer-content {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 100vw !important;
    padding: 0 !important;
    gap: 18px;
  }
  .footer-logo {
    font-size: 1.3em !important;
    margin-bottom: 10px !important;
  }
  .footer-links {
    font-size: 1em !important;
    margin-bottom: 10px !important;
    text-align: center !important;
  }
  .footer-map img {
    width: 90vw !important;
    max-width: 320px !important;
    border-radius: 12px;
    margin: 0 auto 10px auto !important;
    display: block;
  }
  .footer-contact {
    margin-bottom: 10px !important;
    text-align: center !important;
    word-break: break-word;
  }
  .footer-copyright {
    font-size: 0.95em !important;
    margin-top: 10px !important;
    text-align: center !important;
  }


}


/* Animation for mobile slideshow images */
@keyframes mobileSlideAppear {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(0px);
  }
  60% {
    opacity: 1;
    transform: scale(1.03) translateY(0px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@media (max-width: 900px) {
  .slideshow-wrapper img {
    animation: mobileSlideAppear 0.5s forwards;
        border-radius: 0px;

  }
}
.divider {
  height: 2px;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  margin: 2rem 0;
}

.programs-title-center {
  text-align: center;
  margin-bottom: 2rem;
}

.programs-title-center h2 {
  font-size: 2.5rem;
  color: #3c1c08;
   margin-left: 110px;
  margin: 0;
}

 
    .filters-sidebar {
      flex: 0 0 250px;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
    .filter-dropdown {
      position: relative;
      width: 100%;
    }

    @media (max-width: 900px) {
          .filter-dropdown {
            position: relative;
            width: 100%;
            align-self: center;
          }
    }
    
   .filters-sidebar {
      flex: 0 0 250px;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    .filter-dropdown {
      position: relative;
    }
    .filter-button {
      width: 100%;
      background: #f08955;
      border: 2px solid transparent;
      border-radius: 15px;
      padding: 8px 40px 8px 16px;
      font-size: 16px;
      font-weight: 500;
      color: #eaeaea;
      text-align: left;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }
    .filter-button:hover {
      background: #cf5b20;
      border-color: #ffffff;
    }
    .filter-button.active {
      background: #cf5b20;
      border-color: #ffffff;
    }
    .filter-button::after {
      content: '▼';
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 12px;
      transition: transform 0.2s ease;
    }
    .filter-button.active::after {
      transform: translateY(-50%) rotate(180deg);
    }
    .filter-options {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid #ffb8a1;
      border-top: none;
      border-radius: 0 0 8px 8px;
      max-height: 200px;
      overflow-y: auto;
      z-index: 1000;
      display: none;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .filter-options.show {
      display: block;
    }
    .filter-option {
      padding: 10px 16px;
      cursor: pointer;
      transition: background-color 0.2s ease;
      border-bottom: 1px solid #faf9f8;
    }
    .filter-option:hover {
      background: #ffcaa7;
    }
    .filter-option:last-child {
      border-bottom: none;
    }
    .filter-option.selected {
      background: #fdf0e3;
      color: #d25a19;
      font-weight: 500;
    }
    
    .content-area {
      flex: 1;
    }
    
    .clear-filters-btn {
        box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

      background: #461e00;
      color: white;
      border: none;
      padding: 12px 16px;
      border-radius: 20px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: background-color 0.2s ease;
      margin-top: 10px;
    }
    
    .clear-filters-btn:hover {
      background: #d86710;
    }
    
    main{
      max-width: 1200px;
      min-height: 800px;
      justify-self: center;
    }

    @media (max-width: 900px) {
       main{
            justify-self: center;
            min-height: auto;
    
          }
      
    }
    @media (max-width: 768px) {
     

      .main-content {
        flex-direction: column;
      }
      
      .filters-sidebar {
        flex: none;
        width: 100%;
      }
      
      .filter-dropdown {
        margin-bottom: 10px;
      }
    }  
    

   
    .pdf-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }
    
    .pdf-item {
      background: white;
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      transition: transform 0.2s;
    }
    
    .pdf-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
    
    .pdf-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    
    .pdf-icon {
      width: 40px;
      height: 40px;
      margin-right: 15px;
      color: #d32f2f;
    }
    
    .pdf-title {
      font-weight: bold;
      font-size: 16px;
      color: #5b3c2a;
      margin: 0;
    }
    
    .pdf-info {
      margin-bottom: 15px;
    }
    
    .pdf-meta {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
    }
    
    .pdf-description {
      font-size: 14px;
      color: #666;
      line-height: 1.4;
    }
    
    .pdf-actions {
      display: flex;
      gap: 10px;
    }
    
    .btn-view {
        box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

      flex: 1;
      background: #28a745;
      color: white;
      border: none;
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
      text-decoration: none;
      text-align: center;
      font-size: 14px;
    }
    
    .btn-view:hover {
      background: #218838;
    }
    
    .btn-download {
        box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

      flex: 1;
      background: #007bff;
      color: white;
      border: none;
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
      text-decoration: none;
      text-align: center;
      font-size: 14px;
    }
    
    .btn-download:hover {
      background: #0056b3;
    }
    
    .loading {
      text-align: center;
      padding: 40px;
      color: #666;
      font-size: 18px;
    }
    
    .no-files {
      text-align: center;
      padding: 40px;
      color: #666;
    }
    
    .no-files h3 {
      margin-bottom: 10px;
    }
    
    .pdf-badge {
      display: inline-block;
      background: #5b3c2a;
      color: white;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 12px;
      margin-left: 10px;
    }
    
    .admin-notice {
      background: #fff3cd;
      border: 1px solid #ffeeba;
      color: #856404;
      padding: 15px;
      border-radius: 5px;
      margin-bottom: 20px;
    }
    
    .admin-notice a {
      color: #5b3c2a;
      font-weight: bold;
    }    
.programs-title-center p {
  color: #333;
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}
@media  (max-width: 1200px) {

  .filter-container{
   justify-self: center;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
  }
    th, td {
      padding: 12px 15px;
      text-align: left;
    }
    th:last-child, td:last-child {
      border-right: none;
    }
    th {
      background: #E39C50;
      color: #000;
      font-weight: bold;
    }
    td:nth-child(2), th:nth-child(2) {
      text-align: left;
      width: 700px;
      font-weight: bold;
      min-width: 100px;
      max-width: 700px;
      padding-left: 20px;
    }

 


  
}

.line {
  width: 1000px; 
  height: 2px; 
  background-color: rgb(253, 198, 150);
   justify-content:center;
    margin: auto;
}
@media(max-width: 1200px) {
.programs-title-center {
  padding: 0 0.2rem;
  margin-bottom: 0rem;
  text-align: center;
  justify-content: center;
  justify-self: center;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0  ; /* Ελέγχει το κενό ανάμεσα σε σειρά και p */
}

  #program-description {
    position: relative; 
    z-index: 5000;
    width: 90%;
    justify-self: center;
    text-align: center;

  }
  .height-adjust2 .line{
    background: #3c1c0800;
  }
  #line2{
    background: #3c1c0800;
  }
  .height-adjust2{
    position: relative;
    z-index: 5000;
  }
  .height-adjust3{
    position: relative;
    z-index: 5000;
  }
  .height-adjust4
  {
    position: relative;
    z-index: 5000;
  }
  .height-adjust-space{
    height: 1000px;
 
    position: relative;
    z-index: 5000;
    
  }
  
  .height-adjust {
    position: absolute;
    z-index: 5000;
    justify-self: center;
    margin-top: 0px;
  }
  #full-program{
    position: flex;
    margin-top: 280px;
    z-index:5000 !important;/*5000*/
    font-size: 1rem;

    
  }
  .programs-title-row{
    margin-top: 180px;
  }
  .programs-title-center h2 {
    font-size: 1.6rem;
    width: 100%;
    /* left: 50%; */
    justify-self: center;
    text-align: center;
    
    z-index: 5000;  

  }
  .programs-title-center p {
    font-size: 1rem;
    padding: 0 1rem;
    text-align: center;
    margin-top: -50px;
    
  }
  #h-a-1{
    padding-top: 0;
  }
  #program-description {
  font-size: 1rem;
  padding: 0 1rem;
  text-align: center;
  margin-top: 0.5rem; /* ή όσο χρειάζεσαι */
}
  
}
.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.program-category {
  border-radius: 12px;
  padding: 1.5rem;
  transition: transform 0.3s;
}

.program-category:hover {
  transform: translateY(-5px);
}

.program-category h3 {
  font-size: 1.5rem;
  color: #3c1c08;
  margin: 0 0 1rem 0;
}

.program-category p {
  color: #666;
  font-size: 1rem;
  margin: 0;
}

.announcements {
  background: #f9be97;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 3rem;
}

.announcement {
  background: #f9be97;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.announcement .date {
  color: #3c1d0c;
  font-weight: 700;
  min-width: 80px;
}

.announcement .content {
  flex: 1;
  margin-left: 1rem;
}

.announcement .content h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  color: #3c1c08;
}

.announcement .content p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

.goal-block {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 3rem;
}

.goal-block h2 {
  font-size: 2rem;
  color: #3c1c08;
  margin: 0 0 1rem 0;
}

.goal-block p {
  color: #666;
  font-size: 1rem;
  margin: 0;
}

.stats {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 2rem 0;
}

.stat {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 1rem;
  flex: 1 1 200px;
  text-align: center;
}

.stat h3 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  color: #3c1c08;
}

.stat p {
  margin: 0;
  color: #666;
  font-size: 1rem;
}

@media (max-width: 1200px) {

  .logo {
    
    max-width: 4rem;
    height: auto;
  }
  nav {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100vw;
    background: #ffffff;
    flex-direction: column;
    
    
    z-index: 100;
  }
  nav.open {
    font-size: 1.3em !important;
    height: 100vh !important;
    min-height: 100vh !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 60px !important;
    z-index: 9999 !important;
  }
  nav.open a, nav.open .dropdown > a {
    font-size: 1.2em !important;
    padding: 18px 0 !important;
    width: 100vw !important;
    text-align: center !important;
    display: block !important;
  }
  nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    z-index: 150;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    
  }

  .menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 2rem;
    margin-left: auto;
    cursor: pointer;
    /*z-index: 200;*/
    
  }
  .icons {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.1rem !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    max-width: 320px !important;
  }
  .icons img {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 30px !important;
    max-height: 30px !important;
    object-fit: contain !important;
  }

}
@media (min-width: 1201px) {
  .menu-toggle {
    display: none;
  }
  nav {
    display: flex !important;
    position: static;
    
    flex-direction: row;
    background: none;
    box-shadow: none;
    
  }
}
@media (max-width: 900px) {
  
  html, body {
    width: 100vw;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .slideshow-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
    box-sizing: border-box;
    position: fixed !important;
    min-height: 180px;
    padding-top: 0 !important;
        border-radius: 0px;

    visibility: hidden;/**/
    
    top: 45%;
    position: absolute;
    left: 50%;
  }
  .slideshow-wrapper img {
    max-width: 90vw !important;
    width: 90vw !important;
    
    
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    object-fit: cover;
    background: #fff8e8;
    border: 1px solid #f3e2d2;
    transition: opacity 0.7s;
    z-index: 1;
    display: block;
    visibility: hidden;
  }
  footer {
    padding: 2rem 0.5rem 1rem 0.5rem !important;
    margin-top: 30px !important;
    background: #4d2c1e !important;
    color: #fff !important;
    font-size: 1.05em;
    text-align: center !important;
  }
  .footer-content {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 100vw !important;
    padding: 0 !important;
    gap: 18px;
  }
  .footer-logo {
    font-size: 1.3em !important;
    margin-bottom: 10px !important;
  }
  .footer-links {
    font-size: 1em !important;
    margin-bottom: 10px !important;
    text-align: center !important;
  }
  .footer-map img {
    width: 90vw !important;
    max-width: 320px !important;
    border-radius: 12px;
    margin: 0 auto 10px auto !important;
    display: block;
  }
  .footer-contact {
    margin-bottom: 10px !important;
    text-align: center !important;
    word-break: break-word;
  }
  .footer-copyright {
    font-size: 0.95em !important;
    margin-top: 10px !important;
    text-align: center !important;
  }
}

@media (max-width: 900px) {
  .slideshow-wrapper {
    min-height: 300px !important;
    justify-self: center;
    display: flex;
        border-radius: 0px;

    position: absolute;

    width: 100vw !important;


    visibility: visible;
  }
  .slideshow-wrapper img {
    height: 80vh !important;
    max-height: 80vh !important;
    width: 100vw !important;
        border-radius: 0px;

    max-width: 100vw !important;
  }

}
/* Animation for mobile slideshow images */
@keyframes mobileSlideAppear {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(30px);
  }
  60% {
    opacity: 1;
    transform: scale(1.03) translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@media (max-width: 900px) {
  .slideshow-wrapper img {
    animation: mobileSlideAppear 0.8s cubic-bezier(0.4, 0.2, 0.2, 1) both;
        border-radius: 0px;

  }
}


@media (max-width: 1200px) {

  
  header{
    background: #e9000000;
    box-shadow: none;
  }

    .topbar {
    display: flex;    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    position: relative !important;
  }
    .menu-toggle {
    display: block;
    background: none;
    border: none;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 50px;
    padding: 18px 25px;
    font-size: 2rem;
    margin-left: auto;
    cursor: pointer;
    /*z-index: 200;*/
  }
  .logo{
   /* background: #ffffff;*/

    border-radius: 50px;
    padding: 9px 9px;
  }

}
@media (max-width: 900px) {
   .slideshow-wrapper {
    height: 100vh !important;
        border-radius: 0px;

     left: 0; 
    right: 0;
    top: 0; 
     bottom: 0;
     
  }
  .slideshow-wrapper img {
    height: 100vh !important;
    max-height: 100vh !important;
    width: 100vw !important;
        border-radius: 0px;

    object-fit: cover;
    display: block;

    margin: 0 auto;
  }
  .slideshow-image {
    width: 100vw !important;
    height: 100vh !important;  /*apo edo alaz*/
    max-width: 100vw !important;
    max-height: 150vh !important;
    object-fit: cover !important;
    position: absolute !important;
    left: 0; 
    right: 0;
    top: 0; 
     bottom: 0;
    border-radius: 0 !important;
     z-index: 1320 !important;
     
  }
}

@media (max-width: 1200px) {

  .experience{
    position: relative;

  }
  #ex2{
    margin-top: 700px !important;
  }
  #ex1{
    margin-top: -1000px !important;
    background: #fff8e8;
  }
  .faq{
    background: #ffffff;
    margin-bottom: -50px !important;

  }
  .program-table,
  .experience-list,
  .resources-list,
  .footer-content,
  .hero-img img,
  .hero-text p,
  .hero .hero-text .hero-logo {
    z-index: 10 !important;
    position: relative !important;
  }

  .hero-text{
    height: 30px;      /* ή ό,τι ύψος θέλεις */
    padding-top: 150px;  /* προσαρμόζεις ανάλογα */
    padding-bottom:0px;
    margin-bottom:0px;
    overflow: hidden;
  }
  .hero-text p{
    justify-self: center !important;
    position: relative !important;
    text-align: center !important;
    font-size: 2.5rem;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #562010aa;
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }
  #hero-logo  {
    justify-self: center !important;
    text-align: center !important;

    padding: 15px;
    border-radius: 70px;
    margin-bottom: 10px;
  }


.resources-list{
  margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
  header,.topbar, .logo, .menu-toggle {
    z-index: 40000 !important;
    position: relative !important;
  }


    .shape{
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;

      z-index: 1 !important;
    position: absolute !important;
    height: 6450px !important;
      left: 50%;
       transform: translateX(-50%);
    width: 100% !important;
    margin-bottom: -1000px;
    background: #fff8e8 !important;
    align-self: flex-start !important;
    /*border-radius: 100vw 100vw 0 0/ 100vw 100vw 0 0 !important;
    */
    border-top-left-radius: 50px !important;
    border-top-right-radius: 50px !important;
    margin-top: 250px !important;
    overflow: hidden;
    z-index: 5000 !important;
  }

  footer{
    position: relative;
    z-index: 5100;
  }


}
@media (max-width: 900px) {
  .hero{
    justify-content: center;
    align-items: center;
    height: 350px;
  }
  .hero-text p{
    justify-self: center !important;
    position: relative !important;
    text-align: center !important;
    font-size: 2.0rem;
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 20px;
    padding-left: 10px;
    width: 60%;
    padding-right: 10px;
    text-shadow: #00000080 1px 1px 1px, #00000080 0 0 0.5em, #00000080 0 0 0.2em;
    color: #ffffff;
  }
  #hero-logo  {
    justify-self: center !important;
    text-align: center !important;

    padding: 15px;
    width: 240px;
    border-radius: 70px;
    margin-bottom: 10px;
    
  }
}




@media (max-width: 900px) {
  .hero-text p {
    width: 90%;
    margin: 0 auto;
    font-size: 1.1rem;
    display: block;
  
  }
  #hero-logo {
    width: 70%;
    margin: 0 auto 10px auto;
    display: block;
    
  }
  .hero {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: flex;
  }



}




  .progr-tit h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
  }



  .filter-container{
   justify-self: center;
    align-items: center;
    justify-content: center;

  }
  /* Ειδικό reset για το login κουμπί στο mobile menu */
  nav.open .login-btn {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0.5rem 1.2rem !important;
    margin: 0.5rem 0 !important;
    text-align: center !important;
    background: #4d2c1e !important;
    color: #fff !important;
    border-radius: 20px !important;
    font-weight: 500 !important;
    font-size: medium !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2) !important;
    transition: background 0.2s !important;
  }
  nav.open .login-btn:hover {
    background: #F7C19C !important;
    color: #BC5E29 !important;
    box-shadow: 0 0 0 2px rgba(183, 54, 22, 0.495) !important;
  }







.filterType {
    padding: 8px 16px;
    border-radius: 20px;
    border: 2px solid #c055319e;
    font-size: 15px;
    color: white;
    background: #f1b774;
  }

  /* Remove default blue highlight on focus */


  /* Option styling (note: option:hover is not supported in most browsers) */
  .filterType option {
    background: rgb(246, 246, 246);
    border: 1px solid #ffb8a1;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    color: #f1b774;
  }





  #program-description{
    color: rgba(10, 10, 10, 0.500);
    margin-top: 10px;
    padding: 10px;
    margin-bottom: 50px;
    text-align: center;
  }



  .btn-info {
    background: #ec9a42;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.5rem 1.5rem;
    font-weight: 700;
    font-size: small;
    cursor: pointer;
    transition: background 0.2s;
  }

  .btn-info:hover {
    background: #bd7b35;
  }
  .btn-warning{
    background: #b6c761;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 0.5rem 1.5rem;
    font-weight: 700;
    font-size: small;
    cursor: pointer;
    transition: background 0.2s;
  }
  .btn-warning:hover {
    background: #79843f;
  }

.btn-secondary{
    background: #4a7044;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.5rem 1.5rem;
    font-weight: 700;
    font-size: small;
    cursor: pointer;
    transition: background 0.2s;
  }
  .btn-secondary:hover {
    background: #2f492b;
  }

  .btn-light{
    background: #78530e;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 0.5rem 1.5rem;
    font-weight: 700;
    font-size: small;
    cursor: pointer;
    transition: background 0.2s;
  }
  .btn-light:hover {
    background: #4d3509;
  }


    .height-adjust2{
      margin-top: -300px;
    }
  @media (max-width: 900px) {
    .height-adjust2{
      margin-top: -150px;
    }
    
  }

  .height-adjust3{
      margin-top: -200px;
    }
  @media (max-width: 900px) {
    .height-adjust3{
      margin-top: -100px;
    }
        #hero-logo img{
    filter:  brightness(0) saturate(100%) invert(1) sepia(1) hue-rotate(200deg) saturate(500%) brightness(1);
  }
  }
    @media (max-width: 1000px) {
      .student-container{
        min-width: auto;
      }
      
    }



@media (max-width: 1300px) {
.animation-for-section{
  justify-self: center;
}
 .faq details {
word-break: break-word; text-align: center; margin: 0 auto; max-width: 800px; width: 90vw; font-size: clamp(1rem, 2vw, 1.2rem);


  }


  
}
.logo img{
  max-width: 520px; 
  width: 100%; 
  height: auto;
  }

@media(max-width: 1200px) {
.logo img{
  width: 250px !important; /* ή ό,τι μέγεθος θέλεις */
  height: auto !important; /* διατηρεί τις αναλογίες */

  }

}


/* Beautiful contact items styling */
.contact-item:hover {
    background: rgba(255,255,255,0.2) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  
  .contact-item a:hover {
    text-decoration: underline !important;
    transform: scale(1.05);
  }
  
  @media (max-width: 768px) {
    .footer-content {
      flex-direction: column !important;
      align-items: center !important;
      gap: 2em !important;
    }
    
    .contact-item {
      flex-direction: column !important;
      text-align: center !important;
      gap: 0.4em !important;
    }
    
    .footer-links h3 {
      font-size: 1.2em !important;
    }
  }