body {
            background-color: #1a1a1a;
            color: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: 'Inter', sans-serif;
            overflow: hidden;
        }


 .slider {
            position: relative;
            width: min(60vw, 300px); /* Responsive width, capping at 300px */
            height: min(60vw, 300px); /* Responsive height, capping at 300px */
            transform-style: preserve-3d;
            animation: rotate 30s linear infinite;
            margin: 50px auto;
        }

        /* * The perspective is critical for the 3D effect.
         * By setting it on the parent, all child elements are rendered in 3D space relative to this point.
         * The value is now relative to the slider's size.
         */
        .slider-container {
            perspective: min(100vw, 1500px); /* Responsive perspective */
        }

        /* Keyframe animation for the continuous rotation */
        @keyframes rotate {
            0% {
                transform: rotateY(0deg);
            }
            100% {
                transform: rotateY(360deg);
            }
        }

        /* Hide the first element, which would otherwise be a flat image on the front */
        .slider span:nth-child(1) {
            display: none;
        }

        /* * Each individual image container.
         * The transform property uses a CSS variable to calculate the rotation for a 5-image carousel (72deg per image).
         * The translateZ value is now relative to the slider's size for a consistent 3D effect.
         */
        .slider span {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform-origin: center;
            transform-style: preserve-3d;
            transform: rotateY(calc(var(--i) * 72deg)) translateZ(min(45vw, 450px)); /* Responsive distance from center */
        }

        /* Image styling */
        .slider span img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            object-fit: cover;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
            cursor: pointer;
        }

        /* Hover effect to bring the image forward and add a glowing box shadow */
        .slider span:hover img {
            transform: translateY(-20px) scale(1.1);
            box-shadow:
                0 20px 40px rgba(0, 0, 0, 0.6),
                0 0 25px rgba(0, 123, 255, 0.7),
                0 0 50px rgba(0, 123, 255, 0.5);
        }

        /* * The shadow effect for the carousel.
         * Using relative units to ensure it scales with the main slider container.
         */
        .slider::after {
            content: "";
            position: absolute;
            bottom: -8vmin; /* Responsive bottom position */
            left: 50%;
            transform: translateX(-50%);
            width: 50vmin; /* Responsive width */
            height: 4vmin; /* Responsive height */
            background: radial-gradient(rgba(0, 0, 0, 0.4), transparent);
            filter: blur(6px);
            z-index: -1;
        }