body {
            padding-top: 0;
        }

        .carousel-wrapper {
            position: relative;
            width: 100%;
            max-width: 100%;
            overflow: hidden;
            transition: height 0.5s ease;
            /* removed border-radius for full-width sleek look */
        }

        .carousel-slide {
            position: absolute;
            width: 100%;
            height: auto;
            top: 0;
            left: 100%;
            /* No transition on default so it snaps back to the right instantly */
            transition: none;
        }

        .carousel-slide::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 70%;
            background: linear-gradient(to top, rgba(18, 18, 18, 1) 0%, rgba(18, 18, 18, 0) 100%);
            pointer-events: none;
        }

        .current-slide {
            left: 0;
            transition: left 1s ease-in-out;
            z-index: 2;
        }

        .prev-slide {
            left: -100%;
            transition: left 1s ease-in-out;
            z-index: 1;
        }

        .carousel-wrapper img {
            width: 100%;
            height: auto;
            max-height: 80vh;
            object-fit: cover;
            display: block;
        }

        .carousel-dots {
            text-align: center;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 6px;
            z-index: 10;
        }

        .carousel-dot {
            width: 25px;
            height: 4px;
            border-radius: 2px;
            background-color: rgba(255, 255, 255, 0.4);
            display: inline-block;
            transition: background-color 0.4s ease, width 0.4s ease;
            cursor: pointer;
        }

        .active-dot {
            background-color: #fff;
            width: 40px;
        }

        @media (max-width: 768px) {
            .header-title h1 {
                font-size: 1.5rem;
            }
            .carousel-dot {
                width: 15px;
                height: 3px;
            }
            .active-dot {
                width: 25px;
            }
        }

        @media (max-width: 400px) {
            .header-title h1 {
                font-size: 1rem;
            }
            .carousel-dot {
                width: 10px;
                height: 2px;
            }
            .active-dot {
                width: 18px;
            }
        }