.container-image-text-overlay{
            position:absolute;
            bottom:0; 
            left:0;
            width:100%;
            height:45%;
            background: rgba(87, 87, 87, 0.22) !important;
            border-radius: 0px !important;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(4.2px);
            -webkit-backdrop-filter: blur(4.2px);
            transform: translateY(100%);
            transition: transform 0.4s ease; 
        }
        .carousel-card:hover .container-image-text-overlay {
            transform: translateY(0);             
        }


        .carousel-container {
            width: 90%;
            max-width: 1100px;
            position: relative;
            perspective: 2000px;       
            z-index: 10;
            margin:auto;
            overflow: hidden;
        }

        .carousel-track {
            display: flex;
            transition: transform 0.75s cubic-bezier(0.21, 0.61, 0.35, 1);
            transform-style: preserve-3d;
        }

        .carousel-card{
            width: 80vw;
            min-width: 820px;
            max-width: 820px;
            min-height: 420px;
            max-height: 420px;
            margin: 0 25px;
            border-radius: 1.2rem;
            overflow: hidden;
            backdrop-filter: blur(10px);
            transition: all 0.6s cubic-bezier(0.21, 0.61, 0.35, 1);
            transform-origin: center center; position: relative;
        }

        .carousel-card.is-active::before {
            opacity: 1;
            background-size: 300% 300%;
        }

        .carousel-card:not(.is-active) {
            transform: scale(0.8) rotateY(35deg) translateZ(-100px);
            opacity: 0.45;
            filter: saturate(0.6) brightness(0.7);
        }

        .carousel-card.is-prev {
            transform-origin: right center;
            transform: scale(0.75) rotateY(45deg) translateX(-80px) translateZ(-150px);
        }

        .carousel-card.is-next {
            transform-origin: left center;
            transform: scale(0.75) rotateY(-45deg) translateX(80px) translateZ(-150px);
        }

        .carousel-card.is-active {
            transform: scale(1) rotateY(0) translateZ(0);
            opacity: 1;
            z-index: 20;      
        }   

        .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 1.5s ease;
        }

        .carousel-card.is-active .card-image {
            transform: scale(1.05);
        }
    

        /* Futuristic navigation buttons */
        .carousel-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(12, 74, 110, 0.3);
            color: #38bdf8;
            border: 1px solid rgba(14, 165, 233, 0.4);
            border-radius: 50%;
            width: 48px;
            height: 48px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 20;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
        }

        .carousel-button:hover {
            background-color: rgba(14, 165, 233, 0.3);
            color: #e0f2fe;
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
        }

        .carousel-button:active {
            transform: translateY(-50%) scale(0.95);
        }

        /* Button hover effect */
        .carousel-button::before {
            content: "";
            position: absolute;
            inset: -2px;
            background: radial-gradient(circle, var(--bs-info), transparent 70%);
            border-radius: 50%;
            opacity: 0;
            z-index: -1;
            transition: opacity 0.3s ease;
        }

        .carousel-button.prev {
            left: 5px;
        }

        .carousel-button.next {
            right: 5px;
        }

        /* Indicator dots */
        .carousel-indicators {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 2rem;
        }

        .indicator {
            width: 24px;
            height: 6px;
            background: rgba(56, 189, 248, 0.2);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .indicator.active {
            background: var(--bs-info);
            box-shadow: 0 0 10px var(--bs-info);
        }   

        .is-far-next {
            transform: scale(0.8) rotateY(-45deg) translateZ(-100px) !important;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .carousel-button {
                width: 40px;
                height: 40px;
            }

            .carousel-button.prev {
                left: 5px;
            }

            .carousel-button.next {
                right: 5px;
            }

            
            .carousel-container{
                width: 100%;
                padding: 0 10px;
            }

            .carousel-card{
                width: 85vw;
                height: 260px;
                margin: 0 10px;           
                min-width: 320px; 
        }

            .carousel-card:not(.is-active){
                transform: scale(0.9);
                opacity: 0.6;
            }

           .carousel-card.is-prev,
            .carousel-card.is-next{
                transform: scale(0.85);
            }

            .card-image-container {
                height: 160px;
            }
        }