/* Στυλ για τα κουμπιά πλοήγησης (προηγούμενο και επόμενο) */
.swiper-button-prev, .swiper-button-next {
    color: #ff0000;
    text-shadow: 0px 0px 5px #888888;
    position: absolute;
    width: 30px;
    height: 30px;
    top: 60%; /* Κεντράρισμα κατακόρυφα */
    transform: translateY(-50%);
    z-index: 10;
    background-color: transparent !important; /* Αφαίρεση φόντου */
    font-size: 20px; /* Μέγεθος για καλύτερη ορατότητα */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Αριστερό κουμπί πλοήγησης */
.swiper-button-prev {
    left: -5px; /* Αριστερά του swiper */
}

/* Δεξιό κουμπί πλοήγησης */
.swiper-button-next {
    right: 0px; /* Δεξιά του swiper */
}

/* Αύξηση μεγέθους γραμματοσειράς για τα κουμπιά */
.swiper-button-prev::after, .swiper-button-next::after {
    font-size: 24px;
}

/* Στυλ για τον κύριο container του swiper */
.swiper-container {
    position: absolute;
    width: 40%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Απόσταση μεταξύ εικόνας και κειμένου */
    background-color: transparent; /* Αφαίρεση οποιουδήποτε φόντου */
}

/* Στυλ για το swiper */
.swiper {
    position: absolute;
    left: 200px;
    background-color: transparent !important; /* Αφαίρεση φόντου */
    width: 90%;
    max-height: 300px;
    top: 80px;
    max-width: 900px;
}

/* Στυλ για κάθε swiper-slide */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Τοποθετεί το κείμενο κάτω από την εικόνα */
    text-align: center;
    background-color: transparent !important; /* Αφαίρεση φόντου */
}

/* Στυλ για τις εικόνες μέσα στο swiper-slide */
.swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 70%;
    background-color: transparent !important; /* Αφαίρεση φόντου */
    border: 1px solid red;
}

/* Στυλ για τα στοιχεία στο swiper-slide */
.slide-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: transparent !important; /* Αφαίρεση φόντου */
}

/* Στυλ για τις εικόνες στο slide-item */
.slide-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    -webkit-box-shadow:0px 0px 2px 1px rgba(255,0,0,0.55);
    -moz-box-shadow: 0px 0px 2px 1px rgba(255,0,0,0.55);
    box-shadow: 0px 0px 2px 1px rgba(255,0,0,0.55);
    background-color: transparent !important; /* Αφαίρεση φόντου */
}

/* Στυλ για το κείμενο στο slide-item */
.slide-text {
    margin-top: 8px;
    font-size: 14px;
    color: #333;
    font-weight: bold;
    background-color: transparent !important; /* Αφαίρεση φόντου */
}

/* Προσαρμογή για μικρές οθόνες */
@media (max-width: 768px) {
    .swiper-container {
        margin-top: 30px;
        width: 80%; /* Ρύθμιση πλάτους για μικρές οθόνες */
        max-width: 330px; /* Μέγιστο πλάτος */
        height: 250px; /* Μειώνουμε το ύψος για κινητά */
        margin-left: 5%; /* Μικρή μετατόπιση προς τα δεξιά */
        background-color: transparent !important; /* Αφαίρεση φόντου */
    }

    .swiper {
        display: absolute;
        width: 300px; /* Σταθερό μέγεθος */
        top: 0;
        left: 0;
        background-color: transparent !important;
        margin: 0; /* Αφαίρεση περιθωρίων */
        padding: 0px; /* Αφαίρεση του padding */
    }

    .title_stores {
        left: 10%;
    }

    .swiper-slide img {
        width: 90%;
        height: 180px;
        object-fit: cover;
        border-radius: 50%;
        background-color: transparent !important;
    }

    .swiper-button-prev, .swiper-button-next {
        top: 60%;
        width: 25px;
        height: 25px;
        background-color: transparent !important;
    }

    .swiper-button-prev {
        left: -3px;
    }

    .swiper-button-next {
        right: -5px;
    }

    .slide-text {
        font-size: 12px;
        background-color: transparent !important;
    }

    .slide-item img {
        width: 80px;
        height: 80px;
        background-color: transparent !important;
    }
}
