/* Επιτρέπουμε στο slider να εμφανίζει στοιχεία εκτός του container */
.custom-slider .slick-slider {
  overflow: visible;
}

/* Container του slider */
.custom-slider {
  position: relative;
}

/* Κάθε slide έχει σταθερό ύψος */
.custom-slider .slide {
  position: relative;
  width: 100%;
  height: 400px;  /* Προσαρμόστε το ύψος όπως επιθυμείτε */
  overflow: hidden;
}

/* Οι εικόνες γεμίζουν ολόκληρο το slide */
.custom-slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Το anchor που κάνει clickable ολόκληρο το slide */
.slide-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* Overlay κειμένου και logo με υψηλότερο z-index */
.slide-text,
.slide-logo {
  z-index: 15;
}
.slide-text {
  position: absolute;
}
.slide-logo {
  position: absolute;
}

/* Βελάκια του Slick - τοποθετούνται εκτός του slider, στα αριστερά και στα δεξιά στο κέντρο κάθε εικόνας */
.slick-prev,
.slick-next {
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  background: #000;    /* Μαύρο φόντο */
  color: #fff;          /* Λευρό εικονίδιο */
  border: none;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  z-index: 20;
  border-radius: 50%;
}

/* Τοποθέτηση των βελακιών εκτός του slider */
.slick-prev {
  left: -50px;
}
.slick-next {
  right: -50px;
}

/* Dots (Indicator) */
.slick-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 20;
}

/* Container για overlay κειμένου και logo στο κάτω μέρος (αν χρειάζεται) */
.overlay-bottom-container {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Media query για μικρότερες οθόνες */
@media (max-width: 768px) {
  .custom-slider .slide {
    height: 250px;
  }
  .slick-prev {
    left: -30px;
  }
  .slick-next {
    right: -30px;
  }
}
