* {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            overflow-x: hidden;
        }

        /* Hero carousel */
        .hero-carousel {
            position: relative;
            width: 100%;
            background: #080d16;
            overflow: hidden;
        }

        .hero-carousel,
        .hero-carousel .carousel-inner,
        .hero-carousel .carousel-item {
            height:auto;
        }

        /* Images use normal img src */
        .hero-carousel .carousel-item img {
            display: block;
            width: 100%;
            object-fit: cover;
            object-position: center;
        }

        /* Soft fade transition */
        .carousel-fade .carousel-item {
            opacity: 0;
            transition: opacity 0.8s ease-in-out;
        }

        .carousel-fade .carousel-item.active {
            opacity: 1;
        }

        /* Navigation arrows */
        .hero-carousel .carousel-control-prev,
        .hero-carousel .carousel-control-next {
            width: 8%;
            opacity: 1;
        }

        .hero-carousel .carousel-control-prev-icon,
        .hero-carousel .carousel-control-next-icon {
            width: 48px;
            height: 48px;
            padding: 14px;
            border-radius: 50%;
            background-size: 42%;
            background-color: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(8px);
            transition: transform 0.25s ease,
                        background-color 0.25s ease;
        }

        .hero-carousel .carousel-control-prev:hover
        .carousel-control-prev-icon,
        .hero-carousel .carousel-control-next:hover
        .carousel-control-next-icon {
            transform: scale(1.08);
            background-color: rgba(0, 0, 0, 0.72);
        }

        /* Indicators */
        .hero-carousel .carousel-indicators {
            margin-bottom: 22px;
            gap: 7px;
        }

        .hero-carousel .carousel-indicators button {
            width: 9px;
            height: 9px;
            margin: 0;
            border: 0;
            border-radius: 50%;
            background-color: #ffffff;
            opacity: 0.5;
            transition: width 0.3s ease,
                        border-radius 0.3s ease,
                        opacity 0.3s ease;
        }

        .hero-carousel .carousel-indicators .active {
            width: 30px;
            border-radius: 20px;
            opacity: 1;
        }

        @media (max-width: 991.98px) {
            .hero-carousel,
            .hero-carousel .carousel-inner,
            .hero-carousel .carousel-item {
                height: 620px;
            }

            .hero-carousel .carousel-control-prev,
            .hero-carousel .carousel-control-next {
                width: 11%;
            }
        }

        @media (max-width: 767.98px) {
            .hero-carousel,
            .hero-carousel .carousel-inner,
            .hero-carousel .carousel-item {
                height: 520px;
            }

            .hero-carousel .carousel-control-prev-icon,
            .hero-carousel .carousel-control-next-icon {
                width: 40px;
                height: 40px;
            }

            .hero-carousel .carousel-indicators {
                margin-bottom: 14px;
            }
        }

        @media (max-width: 575.98px) {
            .hero-carousel,
            .hero-carousel .carousel-inner,
            .hero-carousel .carousel-item {
                height: 130px;
            }

            .hero-carousel .carousel-item img {
                object-position: center;
            }

            .hero-carousel .carousel-control-prev,
            .hero-carousel .carousel-control-next {
                width: 14%;
            }

            .hero-carousel .carousel-control-prev-icon,
            .hero-carousel .carousel-control-next-icon {
                width: 36px;
                height: 36px;
            }
        }

        /* Respect reduced-motion preferences */
        @media (prefers-reduced-motion: reduce) {
            .carousel-fade .carousel-item {
                transition: none;
            }
        }