.cartivate-main-slider { width: 100%; height: 500px; }

.cartivate-main-slider img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    border-radius: 5px; /* Smooth edges for main images */
}

.cartivate-thumbnail-slider { margin-top: 10px; width: 100%; height: 100px; }

.cartivate-thumbnail-slider img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    cursor: pointer; 
    border-radius: 5px; /* Smooth edges for thumbnails */
}

/* Change arrow color to red */
.swiper-button-next, .swiper-button-prev {
    color: white !important;
}

.single-gallery-slider .swiper-button-next, .single-gallery-slider .swiper-button-prev {
    width: calc(var(--swiper-navigation-size) / 24* 27) !important;
}

/* Adjust height for mobile screens */
@media (max-width: 500px) {
    .cartivate-main-slider { height: 250px; }
}

/* Play button in bottom right */
.cartivate-play-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 12px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
}

.cartivate-play-button i {
    font-size: 18px;
}

/* Remove default Swiper icons */
.swiper-button-next::after,
.swiper-button-prev::after {
    content: "\e94b" !important; /* uses your provided icon */
    font-family: 'motorx' !important; /* adjust if icon font uses a different name */
    font-size: 20px !important;
    padding: 12px;
    background-color: #0102057a !important;
    border-radius: 100%;
}

.swiper-button-next:hover::after,
.swiper-button-prev:hover::after {
    background-color: red !important;
}

/* Rotate the left arrow to indicate direction */
.swiper-button-prev::after {
    transform: rotate(180deg);
}

/* Ensure full image is shown without cropping */
.mfp-image-holder .mfp-content img {
    object-fit: contain; /* Ensure the entire image fits inside the container */
    max-width: 100%; /* Prevent image from overflowing */
    max-height: 100%; /* Prevent image from overflowing */
    margin: 0 auto; /* Center the image */
    display: block; /* Make sure the image is displayed as a block element */
}

/* Apply the max-width: 99% for screens below 768px */
@media (max-width: 1240px) {
    .mfp-image-holder .mfp-content {
        max-width: 99% !important; /* Make content width almost full on small screens */
        margin: 0 auto; /* Center the content */
    }
}