/* Style the meme slider container */
.meme-slider-wrapper {
    background-color: black; /* Black background for the wrapper */
    border-radius: 10px;
    overflow: hidden;
    height: 650px; /* Fixed height for the meme slider */
}

/* Style for the image and video inside the slider */
.slider-item {
    position: relative;
    display: flex;
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Centers the content vertically */
    height: 600px; /* Ensure the slider item takes full height of the container */
}

/* Style for the media inside the slider (image/video) */
.slider-media {
    max-width: 100%; /* Ensure media is responsive */
    max-height: 600px; /* Ensure media does not exceed the container height */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove any inline spacing */
    object-fit: contain; /* Ensures media fits inside the container without distortion */
}

/* Style the arrow buttons */
.slick-prev, .slick-next {
    font-size: 24px;
    color: #FFD700 !important; /* Gold arrows */
    z-index: 1;
}

.slick-prev {
    left: 10px; /* Position left arrow */
}

.slick-next {
    right: 10px; /* Position right arrow */
}

/* Style the bottom navigation dots */
.slick-dots li button {
    background-color: #FFD700 !important; /* Gold dots */
}

.slick-dots li.slick-active button {
    background-color: #FFD700 !important; /* Darker gold for active dot */
}

/* Styling for the title of the image at the bottom */
.slider-item::after {
     content: attr(data-title); /* Display the title using the data-title attribute */
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: bold;
    color: gold; /* Gold text */
    background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent black background */
    padding: 5px;
    text-align: center;
    border-radius: 5px; /* Optional: rounds the corners of the background */
}

/* Styling for buttons */
.button-animation-slide button:before, 
.button-animation-slide .button:before, 
.button-animation-slide .widget a.button:before, 
.button-animation-slide .wp-block-button__link:before {
    background-color: #000000 !important;
}

/* Styling for the bottom navigation dots container */
.slick-dots {
    position: absolute;
    bottom: -50px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    color: #FFD700;
}

.the_content_wrapper ul, .column_product_short_description ul, .column_product_content .source-editor ul, .elementor-widget-text-editor ul, .mfn-toggle .toggle-content ul {
    list-style: disc outside;
    margin: 0 0 15px 0 !important;
}