.carousel-parent {
    position: relative !important;

}

.h-100 {
    max-height: 638px !important;
    object-fit: cover;
}

.play-btn {
    background-color: rgba(160, 0, 0, 0.6) !important;
    z-index: 10;
    position: absolute;
    opacity: 1;
    padding: 28px !important;
    border-radius: 50% !important;
    /*opacity: 0;*/
    /*transition: opacity 0.3s ease;*/
    opacity: 0.7; /* Slightly transparent by default */
    transition: opacity 0.3s ease;
}

/* Add hover effect for the button */


/* Show the button on hover */
.carousel-parent:hover .play-btn {
    opacity: 1;
    /*pointer-events: auto;*/
    /* Enable interaction when visible */
}

@media (hover: none) {
    .play-btn {
        opacity: 1 !important; /* Always visible on touch devices */
        z-index: 100;
    }
}

@media (max-width: 450px) {
    .play-btn {
        opacity: 1 !important; /* Always visible on touch devices */
        z-index: 100;
    }
}

/* Button and icon styling */
.play-btn button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.play-btn img {
    width: 40px;
    height: 40px;
    pointer-events: none;
    /* Ensure hover effect applies to the button */
}

.carousel-indicators {
    margin-top: 26px !important;
}

li::marker {
    content: "";
}

@media screen and (max-width: 768px) {
    .play-btn img {
        width: 12px !important;
        height: 12px !important;
        pointer-events: none;
        /* Ensure hover effect applies to the button */
    }

    .play-btn {
        background-color: rgba(160, 0, 0, 0.6) !important;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 21px !important;
        height: 21px !important;
        position: absolute;
        opacity: 1;
        border-radius: 50% !important;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
}