body {
            padding-top: 0;
        }

        .carousel-wrapper {
            position: relative;
            width: 100%;
            overflow: hidden;
            transition: height 0.5s ease;
            border-radius: 10px;
        }

        .carousel-slide {
            position: absolute;
            width: 100%;
            height: auto;
            top: 0;
            left: 100%;
            transition: left 1s ease-in-out;
        }

        .current-slide {
            left: 0;
        }

        .prev-slide {
            left: -100%;
        }

        .carousel-wrapper img {
            width: 100%;
            height: auto;
            display: block;
        }

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

        .carousel-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #bbb;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

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

        @media (max-width: 768px) {
            .header-title h1 {
                font-size: 1.5rem;
            }

            .carousel-dot {
                width: 6px;
                height: 6px;
            }
        }

        @media (max-width: 400px) {
            .header-title h1 {
                font-size: 1rem;
            }

            .carousel-dot {
                width: 4px;
                height: 4px;
            }
        }