/* =======================================================
         s %}  RESET
        ======================================================= */

        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }

        :root{

            --card-width:20%;
            --card-height:30%px;

            --shadow:0 35px 70px rgba(0,0,0,.45);

            --transition:.45s cubic-bezier(.22,.61,.36,1);

            --glass:rgba(255,255,255,.08);

            --border:rgba(255,255,255,.18);

            --text:#ffffff;

            --accent:#8b5cf6;

        }

        /* =======================================================
           BODY
        ======================================================= */

        body{

            font-family:Segoe UI,Arial,sans-serif;

            width:100vw;
            height:100dvh;

            overflow:hidden;

            background:#070b16;

            color:white;

        }

        /* =======================================================
           Animated Background
        ======================================================= */

        .background{

            position:fixed;

            inset:0;

            background:

            radial-gradient(circle at 20% 20%,#5d3bff55,transparent 40%),

            radial-gradient(circle at 80% 25%,#00c3ff44,transparent 35%),

            radial-gradient(circle at 50% 80%,#ff3cb655,transparent 40%),

            linear-gradient(180deg,#090b14,#0d1325);

            filter:blur(10px);

            transform:scale(1.15);

        }

        /* =======================================================
           Main Container
        ======================================================= */

        .carousel-container{

            position:absolute;

            inset:0;

            display:flex;

            justify-content:center;

            align-items:center;

        }

        /* =======================================================
           3D Scene
        ======================================================= */

        .scene{

            width:1000px;

            height:700px;

            perspective:1800px;

            perspective-origin:center center;

        }



        .RF{

            position:absolute;

            bottom:150px;

            right:1%;

            display:grid;

            gap:15px;

            z-index:5000;
        }
        .RF button{


            color:rgba(21, 101, 192,.5);
            font-size:1.5vw;
            text-shadow: -1px -1px 2px rgba(255,255,255,.8), 1px 1px 2px rgba(0,0,0,.2);


            border:none;

            background:rgba(255,255,255,.12);

            backdrop-filter:blur(12px);

            border:1px solid rgba(255,255,255,.18);

            padding:8px 15px;

            border-radius:2px;

            cursor:pointer;

            transition:.3s;


        }




        .badge{
                    position:absolute;
                    top:10px;
                    left:10px;

                    background:#ff1744;
                    color:white;

                    padding:6px 10px;
                    border-radius:10px;

                    font-size:12px;
                    font-weight:bold;
                }

        /* =======================================================
           Rotating Ring
        ======================================================= */

        .carousel{

            position:relative;

            width:100%;

            height:100%;

            transform-style:preserve-3d;

            user-select:none;

            cursor:grab;


        }

        .carousel:active{

            cursor:grabbing;

        }

        /* =======================================================
           Card
        ======================================================= */

        .card{

            position:absolute;

            width: 300;
            height: 200px;

            left:50%;

            top:50%;

            border-radius:22px;

            overflow: auto;

            padding: 7px;

            background:var(--glass);

            border:1px solid var(--border);

            backdrop-filter:blur(16px);

            box-shadow:var(--shadow);

            transition:
                transform var(--transition),
                opacity var(--transition),
                filter var(--transition),
                box-shadow var(--transition);

            transform-style:preserve-3d;

        }

        .card::-webkit-scrollbar {
            width: 6px;                /* make scrollbar thinner */
        }

        .card::-webkit-scrollbar-track {
            border-radius: 12px;
        }

        .card::-webkit-scrollbar-thumb {
            background-color: rgba(255,255,0,.3); /* subtle thumb */
            border-radius: 12px;               /* rounded scrollbar */
        }

        /* =======================================================
           Image
        ======================================================= */

        .card img{

            width:100%;
            height:65%;
            object-fit:cover;
            display:block;

            -webkit-mask-image:linear-gradient(
                to bottom,
                black 65%,
                transparent 100%
            );

            mask-image:linear-gradient(
                to bottom,
                black 65%,
                transparent 100%
            );

        }
        /*.card img{

            width:100%;

            height:65%;

            object-fit:cover;

            display:block;

        }
        */

        /* =======================================================
           Content
        ======================================================= */

        .content{

            padding:18px;



        }

        .content h2{

            margin-bottom:10px;

            color:var(--text);

        }

        .content p{

            color:#d0d0d0;

            line-height:1.6;

            font-size:.95rem;

            margin-bottom:18px;

        }

        .content button{

            border:none;

            padding:12px 22px;

            border-radius:30px;

            cursor:pointer;

            color:white;

            background:linear-gradient(135deg,#7c3aed,#4f46e5);

            transition:.3s;

        }

        .content button:hover{

            transform:translateY(-3px);

        }

        /* =======================================================
           Reflection
        ======================================================= */

        .card::after{

            content:"";

            position:absolute;

            inset:0;

            background:

            linear-gradient(

                130deg,

                rgba(255,255,255,.45),

                transparent 25%,

                transparent 70%,

                rgba(255,255,255,.08)

            );

            pointer-events:none;

        }

        /* =======================================================
           Front Card
        ======================================================= */

        .card.active{

            filter:blur(0);

            opacity:1;

            z-index:999;

            box-shadow:

            0 45px 80px rgba(0,0,0,.55),

            0 0 40px rgba(140,92,255,.45);

        }

        /* =======================================================
           Cards behind
        ======================================================= */

        .card.back{

            filter:blur(2.5px);

            opacity:.45;

        }

        /* =======================================================
           Side cards
        ======================================================= */

        .card.side{

            opacity:.8;

        }


        /* =======================================================
           Search
        ======================================================= */
        .in{
            border:none;

            color:white;

            background:rgba(255,255,255,.12);

            backdrop-filter:blur(12px);

            border:1px solid rgba(255,255,255,.18);

            padding:14px 26px;

            border-radius:50px;

            transition:.3s;



        }
        .search{
            margin:40px;

            position:absolute;

            top:5px;

            right:5%;

            transform:translateX(+25%);

            display:flex;

            gap:15px;

            z-index:5000;

        }


        .search button{
            border:none;

            color:white;

            background:rgba(255,255,255,.12);

            backdrop-filter:blur(12px);

            border:1px solid rgba(255,255,255,.18);

            padding:14px 26px;

            border-radius:50px;

            cursor:pointer;

            transition:.3s;

        }

        .titl{
            position:absolute;

            top: 95px;

            left:90%;

            transform:translateX(-50%);

            display:flex;

            gap:15px;

            z-index:5000;

        }


        .sm{
            width:100%;

            height:2%

            position:absolute;

            top:5px;

            left:50%;

            display:flex;

            border:none;

            background:rgba(255,255,255,.12);

            backdrop-filter:blur(12px);

            border:1px solid rgba(255,255,255,.18);

            padding:14px 26px;

            border-radius:1px;

            cursor:pointer;

            transition:.3s;

        }

        .FD{
             color:rgba(255,255,255,.22);

        }

       /* small{
            color: rgba(255,255,255,.4);
            text-shadow: -1px -1px 3px rgba(0,0,0,.2), 1px 1px 2px rgba(255,255,255,.8);
            overflow: scroll;
        }
        */



        /* =======================================================
           Controls
        ======================================================= */

        .controls{

            position:absolute;

            bottom:35px;

            left:50%;

            transform:translateX(-50%);

            display:flex;

            gap:15px;

            z-index:5000;

        }

        .Tabs{

            position:absolute;

            bottom:5px;

            left:20%;

            transform:translateX(-50%);

            display:flex;

            gap:5px;

            z-index:5000;


        }


        .Tabs button{
            border:none;

            color:white;

            background:rgba(255,255,255,.12);

            backdrop-filter:blur(12px);

            border:1px solid rgba(255,255,255,.18);

            padding:8px 15px;

            border-radius:50px;

            cursor:pointer;

            transition:.3s;
        }

        .controls button{

            border:none;

            color:white;

            background:rgba(255,255,255,.12);

            backdrop-filter:blur(12px);

            border:1px solid rgba(255,255,255,.18);

            padding:14px 26px;

            border-radius:50px;

            cursor:pointer;

            transition:.3s;

        }

        .controls button:hover{

            background:rgba(255,255,255,.22);

            transform:translateY(-2px);

        }

        /* =======================================================
           Indicator Dots
        ======================================================= */

        .indicator{

            position:absolute;

            bottom:100px;

            left:50%;

            transform:translateX(-50%);

            display:flex;

            gap:10px;

        }

        .dot{

            width:10px;

            height:10px;

            border-radius:50%;

            background:#777;

            transition:.3s;

        }

        .dot.active{

            width:28px;

            border-radius:50px;

            background:white;

        }


        .form-box {
            position:absolute;

            top:120px;

            right:10px;

            background: #1e293b;

            margin-bottom: 20px;

            padding: 30px;

            border-radius: 20px;

            width: 20vw;

            height: 20vh;

            backdrop-filter: blur(20px);

            box-shadow: 0 0 25px rgba(0,0,0,0.8);
        }

        input, textarea{
            width:100%;
            padding:5px;
            margin:6px 0;
            border-radius:10px;
            border:1px solid #ddd;
        }

        button{
            background:#2563eb;
            color:white;
            border:none;
            padding:10px 20px;
            border-radius:12px;
            cursor:pointer;
        }


        /* =======================================================
           Responsive
        ======================================================= */

        @media(max-width:900px){

            :root{

                --card-width:240px;
                --card-height:360px;

            }

            .scene{

                width:100%;
                height:100%;

            }

        }

        @media(max-width:600px){

            :root{

                --card-width:190px;
                --card-height:300px;

            }

            .controls{

                bottom:18px;

            }

        }

        /* =======================================================
           Portrait phone layout
        ======================================================= */

        @media(max-width:600px) and (orientation:portrait){

            :root{

                --card-width:62vw;
                --card-height:42vh;

            }

            .scene{

                width:100vw;
                height:80vh;
                perspective:900px;

            }

            .search{

                position:absolute;
                top:8px;
                left:50%;
                right:auto;
                transform:translateX(-50%);
                width:92vw;
                margin:0;

            }

            .search form{

                display:flex;
                width:100%;
                gap:8px;

            }

            .in{

                flex:1;
                min-width:0;
                padding:10px 16px;
                font-size:.85rem;

            }

            .search button{

                padding:10px 16px;
                font-size:.85rem;

            }

            .titl{

                position:absolute;
                top:64px;
                left:50%;
                transform:translateX(-50%);
                width:92vw;
                text-align:center;
                justify-content:center;

            }

            .FD{

                font-size:1rem;

            }

            .sm{

                position:absolute;
                top:96px;
                left:50%;
                transform:translateX(-50%);
                width:92vw;
                height:auto;
                padding:8px 14px;
                text-align:center;
                justify-content:center;

            }

            .sm h6{

                font-size:.7rem;
                line-height:1.4;

            }

            .RF{

                position:absolute;
                bottom:120px;
                right:auto;
                left:50%;
                transform:translateX(-50%);
                grid-auto-flow:column;
                gap:10px;

            }

            .RF button{

                font-size:.75rem;
                padding:8px 12px;
                white-space:nowrap;

            }

            .Tabs{

                position:absolute;
                bottom:64px;
                left:50%;
                transform:translateX(-50%);
                width:96vw;
                justify-content:center;
                flex-wrap:wrap;

            }

            .Tabs button{

                font-size:.7rem;
                padding:6px 12px;

            }

            .controls{

                bottom:16px;

            }

            .indicator{

                bottom:150px;

            }

        }