*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Cairo',sans-serif;
}



body{

    background:

    linear-gradient(
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.88)
    ),

    url("https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1920&auto=format&fit=crop");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

    color:white;

    overflow-x:hidden;
}



nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 10%;

    background:rgba(0,0,0,0.35);

    backdrop-filter:blur(10px);

    border-bottom:1px solid rgba(255,255,255,0.05);

    position:sticky;

    top:0;

    z-index:1000;
}

.logo{

    color:#38bdf8;

    font-size:32px;

    font-weight:bold;

    text-shadow:0 0 15px #00ffff88;
}

nav ul{

    display:flex;

    gap:25px;

    list-style:none;
}

nav a{

    color:white;

    text-decoration:none;

    transition:.3s;

    font-size:18px;
}

nav a:hover{

    color:#38bdf8;

    text-shadow:0 0 10px #00ffff;
}

/* القسم الرئيسي */

.hero{

    height:90vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;
}

.hero-box{

    padding:60px;

    border-radius:25px;

    background:rgba(0,0,0,0.45);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,0.08);

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

    transform-style:preserve-3d;

    animation:float 5s ease-in-out infinite;
}

@keyframes float{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-20px);
    }
}

.hero h2{

    font-size:65px;

    margin-bottom:20px;

    text-shadow:0 0 20px #00ffff88;
}

.hero p{

    font-size:24px;

    color:#d1d5db;

    margin-bottom:35px;
}

/* الأزرار */

button{

    padding:16px 35px;

    border:none;

    border-radius:12px;

    background:#0ea5e9;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.4s;

    box-shadow:0 0 20px #00ffff55;
}

button:hover{

    transform:scale(1.08);

    background:#38bdf8;

    box-shadow:
    0 0 20px #00ffff,
    0 0 50px #00ffff66;
}

/* الخدمات */

.services{

    padding:120px 10%;

    text-align:center;
}

.services h2{

    font-size:50px;

    margin-bottom:60px;

    text-shadow:0 0 15px #00ffff88;
}

.cards{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:35px;
}

.card{

    padding:40px;

    border-radius:25px;

    background:rgba(0,0,0,0.45);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,0.08);

    transition:.4s;

    transform-style:preserve-3d;

    box-shadow:
    0 0 20px rgba(0,255,255,0.08);
}

.card:hover{

    transform:
    rotateY(10deg)
    rotateX(10deg)
    scale(1.05);

    background:rgba(0,0,0,0.6);

    box-shadow:
    0 0 25px #00ffff55,
    0 0 60px #00ffff22;
}

.card h3{

    color:#38bdf8;

    margin-bottom:20px;

    font-size:28px;
}

.card p{

    color:#d1d5db;

    line-height:1.8;
}

/* لوحة التحكم */

.dashboard{

    padding:120px 10%;

    text-align:center;
}

.dashboard h2{

    font-size:50px;

    margin-bottom:50px;

    text-shadow:0 0 15px #00ffff88;
}

.dashboard-box{

    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;
}

.stat{

    width:230px;

    padding:45px;

    border-radius:25px;

    background:rgba(0,0,0,0.45);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,0.08);

    transition:.4s;

    box-shadow:
    0 0 20px rgba(0,255,255,0.08);
}

.stat:hover{

    transform:translateY(-12px);

    box-shadow:
    0 0 25px #00ffff55;
}

.stat h3{

    font-size:55px;

    color:#38bdf8;

    margin-bottom:10px;
}

/* التواصل */

.contact{

    padding:120px 10%;

    text-align:center;
}

.contact h2{

    font-size:45px;

    margin-bottom:40px;
}

.whatsapp{

    display:inline-block;

    padding:20px 45px;

    background:#22c55e;

    color:white;

    text-decoration:none;

    border-radius:15px;

    font-size:24px;

    transition:.4s;

    box-shadow:
    0 0 20px #22c55e88;
}

.whatsapp:hover{

    transform:scale(1.08);

    box-shadow:
    0 0 25px #22c55e,
    0 0 50px #22c55e66;
}



footer{

    text-align:center;

    padding:35px;

    background:rgba(0,0,0,0.7);

    color:#94a3b8;

    border-top:1px solid rgba(255,255,255,0.05);
}



@media(max-width:768px){

    .hero h2{
        font-size:42px;
    }

    .hero p{
        font-size:18px;
    }

    nav{
        flex-direction:column;
        gap:20px;
    }

    nav ul{
        flex-wrap:wrap;
        justify-content:center;
    }

}