.mds-carousel {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Luckiest Guy';
}

/* Single unified style for carousel items */
.carousel-item {
    padding: 15px;
    text-align: center;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

/* Image */
.carousel-item img {
    max-width: 100%;
    width: 100%;
    height: 158.5px !important;
    margin-bottom: 10px;
    border-radius: 8px;
object-fit: scale-down;

}

/* Title */
.carousel-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    margin-bottom: 15px;
-webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: #000;
}

/* Button */
.carousel-btn {
    display: inline-block;
    background: #ff3c7d; /* Pink button */
    color: white;
    padding: 8px 20px;
    border-radius: 6px;
    text-decoration: none;
    transition: 0.3s ease;
border: solid 3px #000;
}

.carousel-btn:hover {
    background: #e8326d;
}

/* Optional: center polaroid style if needed */
.polaroid a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.upper-card {
    display: flex;
    font-family: 'Luckiest Guy';
    -webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: #000;
}
/* Slick Arrows */
.slick-prev,
.slick-next {
    position: absolute;
    top: 30% !important;
    transform: translateY(-50%);
    background: transparent !important; /* Black arrow background */
    color: #000 !important;
    border: none;
    border-radius: 50%;
    width: 70px !important;
    height: 70px !important;
    font-size: 50px !important;
    line-height: 40px;
    text-align: center;
    z-index: 10;
    cursor: pointer;
    transition: 0.3s ease;
}

.slick-prev:hover,
.slick-next:hover {
    background: black;
}

/* Arrow Positions */
.slick-prev {
    left: 10px !important;
}

.slick-next {
    right: 10px !important;
}
/* Fix Slick default arrow pseudo-elements */
.slick-prev::before,
.slick-next::before {
    content: '‹'; /* Left */
    color: #000; /* Black arrow */
    font-size: 30px !important; /* Match your button font size */
    line-height: 70px; /* Vertically center inside 70px button */
    opacity: 1; /* Ensure visible */
}

.slick-next::before {
    content: '›'; /* Right */
}

/* Adjust for smaller screens */
@media (max-width: 768px) {
    .slick-prev {
        left: -15px !important;
    }

    .slick-next {
        right: -15px !important;
    }
}