/* Desktop-only duplicate styles, namespaced to avoid conflicts */

@media (min-width: 768px) {
    .simple-dropdown-desktop {
        position: fixed;
        background: var(--background-color, rgba(10, 20, 30, 1.0));
   
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease-in-out, visibility .25s ease-in-out;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        overflow: hidden;
        max-width: 100%;
        max-height: 100%;
    }
    .simple-dropdown-desktop.show {
        opacity: 1;
        visibility: visible;
    }

    .simple-dropdown-desktop .simple-dropdown-bg { position: absolute; inset: 0; z-index: 0; opacity: .58; pointer-events: none; }
    .simple-dropdown-desktop .simple-dropdown-bg svg { width: 100%; height: 100%; object-fit: cover; }

    .simple-dropdown-desktop > .left-div { position: relative; z-index: 1; }

    .simple-dropdown-desktop .left-div { flex: 0 0 60%; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
    /* right-div removed */

    /* remove right title styles */

    .verticle-carousel-desktop { position: relative; width: 100%; height: 400px; overflow: hidden; border-radius: 8px; }
    .verticle-carousel-container { position: relative; width: 100%; height: 100%; }
    .verticle-carousel-slides { position: relative; width: 100%; height: 100%; overflow: hidden; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
    .verticle-carousel-slide { position: absolute; left: 0; width: 100%; height: 33.333%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
    /* Make the entire slide capture clicks even over SVG holes */
    .verticle-carousel-slide::after { content: ""; position: absolute; inset: 0; z-index: 1; background: transparent; pointer-events: auto; }
    .verticle-carousel-slide > * { position: relative; z-index: 2; }
    .verticle-carousel-slide:hover { transform: scale(1.02); }
    .verticle-carousel-slide.top-off-screen { top: -33.333%; opacity: 0; z-index: 1; transform: scale(0.9); }
    .verticle-carousel-slide.top { top: 5%; opacity: 0.3; z-index: 5; transform: scale(0.5); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; }
    .verticle-carousel-slide.active { top: 33.333%; opacity: 1; z-index: 10; transform: scale(1); }
    .verticle-carousel-slide.bottom { top: 60%; opacity: 0.3; z-index: 5; transform: scale(0.5); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; }
    .verticle-carousel-slide.bottom-off-screen { top: 100%; opacity: 0; z-index: 1; transform: scale(0.9); }
    .verticle-carousel-slide.hidden { opacity: 0; z-index: 0; transform: scale(0.8); }
    .verticle-carousel-nav { position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px; display: flex; gap: 10px; }
    .verticle-carousel-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--border-color, rgba(80, 100, 120, 0.5)); border: none; cursor: pointer; transition: all 0.3s ease; }
    .verticle-carousel-dot.active { background: var(--accent-color-1, rgba(138, 1, 88, 1.0)); box-shadow: 0 0 10px var(--glow-color-1, rgba(138, 1, 88, 1.0)); }
    .verticle-carousel-dot:hover { background: var(--highlight-color, rgba(220, 230, 240, 0.9)); transform: scale(1.2); }
}

/* Hide desktop module on small screens */
@media (max-width: 767px) {
    .simple-dropdown-desktop { display: none !important; }
}