.slider{
    position:relative;
    height:100vh;
    overflow:hidden;
    background:linear-gradient(135deg,#050816,#090b22);
}

.bg-grid{
    position:absolute;
    inset:0;

    background:
        linear-gradient(rgba(0,255,255,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,0,255,.07) 1px,transparent 1px);

    background-size:50px 50px;

    animation:gridMove 10s linear infinite;
}

@keyframes gridMove{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(50px);
    }
}

.slides{
    height:100%;
    position:relative;
}

.slide{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0;
    transform:scale(1.05);
    transition:1.8s ease;
}

.slide.active{
    opacity:1;
    transform:scale(1);
}

.overlay{
    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at center,
        rgba(0,255,255,.12),
        rgba(0,0,0,.8));
}

.content{
    position:relative;
    z-index:2;

    text-align:center;
    color:#fff;

    max-width:800px;
    padding:20px;

    direction: rtl;
    text-align: right;

}

.content span{
    display:inline-block;
    color:#00f7ff;
    letter-spacing:3px;
    font-size:14px;
    margin-bottom:15px;

    text-shadow:0 0 12px #00f7ff;
}

.content h1{
    font-size:clamp(40px,7vw,88px);
    line-height:1.1;
    margin-bottom:20px;
}

.content h1 strong{
    color:#ff00ff;
    text-shadow:0 0 18px #ff00ff;
}

.content p{
    font-size:18px;
    color:#d6d6ff;
    margin-bottom:30px;
}

.content a{
    display:inline-block;
    padding:14px 28px;

    color:#fff;
    text-decoration:none;

    border-radius:12px;

    background:linear-gradient(135deg,#00eaff,#8c00ff);

    box-shadow:
        0 0 25px rgba(0,255,255,.35);

    transition:.3s;
}

.content a:hover{
    transform:translateY(-3px);
}

.nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:52px;
    height:52px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.08);
    color:#fff;

    font-size:24px;
    cursor:pointer;

    backdrop-filter:blur(10px);

    z-index:5;     
    
    align-items: center;
    justify-content: center;
}

.prev{ left:25px; }
.next{ right:25px; }

.dots{
    position:absolute;
    bottom:30px;
    left:50%;

    transform:translateX(-50%);
    display:flex;
    gap:12px;
}

.dot{
    width:12px;
    height:12px;
    border-radius:50%;

    background:#777;
    cursor:pointer;
}

.dot.active{
    background:#00f7ff;
    box-shadow:0 0 15px #00f7ff;
}

@media(max-width:768px){

    .nav{
        width:42px;
        height:42px;
    }

    .content p{
        font-size:16px;
    }
}