.background-media {
            position: absolute;
            inset: 0;
        }

        .background-video,
        .background-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .background-image {
            background-size: cover;
            background-position: center;
        }

        .dark-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(294deg,rgb(253 253 253 / 14%), rgb(15 24 46 / 81%));
        }
        .slider-container {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .main-content {
            position: relative;
            z-index: 10;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: left;
            padding: 0 12rem;
        }
        #titleText,  #titleText em{font-weight:bold}

        .content-wrapper {
            max-width: 72rem;
            padding: 0 1rem;
            text-align: left;
        }

        .category-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 2rem;
            border-radius: 9999px;
            color: white;
            font-size: 0.75rem;
            font-weight: 500;
            margin-bottom: 2rem;
            backdrop-filter: blur(12px);
            transition: all 0.5s ease;
            min-width: 200px;
            border: 1px solid;
            opacity: 1;
            transform: translateY(0);
        }

        .category-badge.transitioning {
            opacity: 0;
            transform: translateY(1rem);
        }

        .category-icon {
            padding: 0.375rem;
            border-radius: 9999px;
            color: white;
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .category-text {
            text-transform: uppercase;
            letter-spacing: 0.1em;
            float: left;
    width: 100%;
    text-align: center;
        }

        .main-title {
            font-size: 3.5rem;
            font-weight: 900;
            color: white;
            margin-bottom:.5rem;
            line-height: 1.2;
            min-height: 1.2em;
            transition: opacity 0.3s ease;
            word-break: break-word;
            hyphens: auto;
            opacity: 1;
        }

        .main-title.transitioning {
            opacity: 0.3;
        }

        .title-cursor {
            display: inline-block;
            width: 4px;
            background-color: white;
            margin-left: 0.5rem;
            transition: opacity 0.2s ease;
            height: 0.8em;
            vertical-align: baseline;
        }

        .subtitle {
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 2rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            transition: all 0.5s ease;
            transition-delay: 0.1s;
            opacity: 1;
            transform: translateY(0);
        }

        .subtitle.transitioning {
            opacity: 0;
            transform: translateY(2rem);
        }

        .description {
            color: #d1d5db;
            font-size: 1rem;
            margin-bottom: 2.5rem;
            line-height: 1.45;
            max-width: 48rem;
            transition: all 0.5s ease;
            transition-delay: 0.2s;
            opacity: 1;
            transform: translateY(0);
        }

        .description.transitioning {
            opacity: 0;
            transform: translateY(2rem);
        }

        .cta-buttons {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            justify-content: left;
            transition: all 0.5s ease;
            transition-delay: 0.3s;
            opacity: 1;
            transform: translateY(0);
        }

        .cta-buttons.transitioning {
            opacity: 0;
            transform: translateY(2rem);
        }

        .btn-primary,
        .btn-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding:0.85rem 1.8rem 0.85rem 2.3rem;
            font-weight: 600;
            font-size: 1rem;
            border-radius: 1.5rem;
            transition: all 0.3s ease;
            text-decoration: none;
            border: none;
            cursor: pointer;
        }

        .btn-primary {
            color: white;
        }

        .btn-primary:hover {
            transform: scale(1.05);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .btn-secondary {
            border: 2px solid white;
            color: white;
            background: transparent;
            border-radius: 1.5rem;
        }

        .btn-secondary:hover {
            background: white;
            color: #111827;
            transform: scale(1.05);
        }

        .nav-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 20;
            width: 3rem;
            height: 3rem;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(12px);
            color: white;
            border-radius: 50%;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        .nav-arrow:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .nav-arrow:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .nav-arrow.prev {
            left: 2rem;
        }

        .nav-arrow.next {
            right: 2rem;
        }

        .autoplay-control {
            position: absolute;
            bottom: 2rem;
            right: 2rem;
            z-index: 20;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            font-weight: 500;
            border-radius: 9999px;
            backdrop-filter: blur(12px);
            transition: all 0.3s ease;
            border: 1px solid;
            cursor: pointer;
        }

        .autoplay-control.playing {
            background: rgb(194 194 194 / 20%);
    color: #ffffff;
    border-color: rgb(246 246 246 / 30%);
        }

        .autoplay-control.playing:hover {
            background:#b22560;
        }

        .autoplay-control.paused {
            background: rgba(239, 68, 68, 0.2);
            color: #fca5a5;
            border-color: rgba(239, 68, 68, 0.3);
        }

        .autoplay-control.paused:hover {
            background: rgba(239, 68, 68, 0.3);
        }

        .slide-indicators {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 20;
            display: flex;
            gap: 0.75rem;
        }

        .indicator {
            height: 1rem;
            border-radius: 50%;
            transition: all 0.3s ease;
            cursor: pointer;
            transform: scale(0.5);
            background: rgba(255, 255, 255, 0.4);
            border:1px solid #c2c908
        }

        .indicator:hover {
            background: rgba(255, 255, 255, 0.6);
        }

        .indicator.active {
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
        }

        .progress-bar {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
        }

        .progress-fill {
            height: 100%;
            transition: all 0.3s ease-out;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        }

        /* Responsive Design */
        @media (min-width: 640px) {
            .content-wrapper {
                padding: 0 2rem;
            }

            .main-title {
                font-size: 3.5rem;
            }

            .description {
                font-size: 1.125rem;
            }

            .cta-buttons {
                flex-direction: row;
            }

            .nav-arrow {
                width: 4rem;
                height: 4rem;
            }

            .nav-arrow.prev {
                left: 2rem;
            }

            .nav-arrow.next {
                right: 2rem;
            }

            .autoplay-control {
                font-size: 0.875rem;
                padding: 0.5rem 1rem;
            }
        }

        @media (min-width: 768px) {
            .main-title {
                font-size:3rem;
            }
        }

        @media (min-width: 1024px) {
            .content-wrapper {
                padding: 0rem;
            }

            .main-title {
                font-size: 2rem;
            }

            .description {
                font-size: 1.8rem;
            }
        }

        @media (min-width: 1280px) {
            .main-title {
                font-size: 3rem;
            }
        }

        @media (min-width: 1536px) {
            .main-title {
                font-size: 1.8rem;
            }
        }

        @media (max-width: 639px) {
            .nav-arrow.prev {
                left: 1rem;
            }

            .nav-arrow.next {
                right: 1rem;
            }

            .autoplay-control {
                bottom: 1rem;
                right: 1rem;
                padding: 0.5rem 0.75rem;
                font-size: 0.75rem;
            }

            .autoplay-text {
                display: none;
            }
        }

        /* Icon styles */
        .icon {
            width: 1rem;
            height: 1rem;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .icon-small {
            width: 0.875rem;
            height: 0.875rem;
        }

        .icon-nav {
            width: 1.25rem;
            height: 1.25rem;
        }

        @media (min-width: 640px) {
            .icon-nav {
                width: 1.5rem;
                height: 1.5rem;
            }
        }