/* Your existing styles */
    .card-custom-gradient {
        background: linear-gradient(to right, #D9FDE5, #6258a0);
    }

    .bottom-gradient {
        background: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 87%) 100%);
        height: 40%;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        z-index: 6;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
    }
    .slide-item {
        min-width: 250px;
        height: 150px;
        border-radius: 0.5rem;
        cursor: grab;
    }

    .slide-bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
        border-radius: 0.5rem;
    }

    .slide-title-image {
        position: absolute;
        top: 74px;
        left: 12px;
        height: 70px;
        width: 140px;
        object-fit: contain;
        z-index:10;
    }

    .slide-main-image {
        position: absolute;
        bottom: -16px;
        right: 5px;
        height: 140%;
        width: 70%;
        object-fit: contain;
        z-index: 5;
    }

    body {
        background: #0C0C0C;
        color: #FFF;
    }

    .scrolling-active {
        cursor: grabbing !important;
    }

    #hotSlidesContainer::-webkit-scrollbar {
        display: none;
    }

    #hotSlidesContainer {
        scrollbar-width: none;
        -ms-overflow-style: none;
        overflow-x: auto;
        overflow-y: hidden;
    }

    /* Optional: Customize animation duration */
    .slide-title-image {
        animation-duration: 1s;
    }