/* Slideshow Container */
.slideshow-container {
    max-width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px; /* Space between slideshows */
}

/* Styles for slides */
.mySlides, .mySlides2, .mySlides3, .mySlides4, .mySlides5 {
    display: none;
    width: 100%;
    text-align: center;
}

/* Slide Images with glow effect */
.slide-image {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 0 0 20px rgba(0, 0, 255, 0.8); /* Red and Blue glow */
    transition: transform 0.3s ease-in-out; /* Zoom effect */
}

.slide-image:hover {
    transform: scale(1.05); /* Slight zoom effect */
}

/* Common Navigation Buttons */
.prev, .next, .prev2, .next2, .prev3, .next3, .prev4, .next4, .prev5, .next5 {
    position: absolute;
    top: 50%;
    font-size: 18px;
    color: white;
    font-weight: bold;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    transform: translateY(-50%);
    display: none; /* Hidden by default */
}

/* Position left and right arrows on opposite sides */
.prev {
    left: 10px; /* Position left button on the left */
}

.next {
    right: 10px; /* Position right button on the right */
}

/* Show navigation buttons on screens larger than or equal to 768px */
@media only screen and (min-width: 768px) {
    .prev, .next, .prev2, .next2, .prev3, .next3, .prev4, .next4, .prev5, .next5 {
        display: block;
    }
}

/* Adjust navigation button position for smaller screens */
@media only screen and (max-width: 767px) {
    .prev, .next, .prev2, .next2, .prev3, .next3, .prev4, .next4, .prev5, .next5 {
        top: 40%; /* Adjust top position for better alignment on smaller screens */
    }
}

/* Hover effects */
.prev:hover, .next:hover, .prev2:hover, .next2:hover, .prev3:hover, .next3:hover,
.prev4:hover, .next4:hover, .prev5:hover, .next5:hover {
    background-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.1); /* Enlarge the button on hover */
}

/* Button Container (for Buy Button) */
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto; /* Adjust height as needed */
}

/* Adjust Buy Button Styles */
.buy-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #ff6347; /* Tomato color */
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    margin-top: 20px;
}

.buy-button:hover {
    background-color: #ff4500; /* Darker tomato color */
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.buy-button:active {
    background-color: #e63946; /* Even darker red for active state */
    transform: scale(1.05);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.buy-button:focus {
    outline: none;
}
