body{

    margin:0;
    background:#050505;
    color:white;
    font-family:Arial, Helvetica, sans-serif;

}


/* NAVBAR */

nav{

    position:fixed;
    top:0;
    left:0;

    width:100%;

    background:#111;

    display:flex;

    gap:15px;

    padding:15px;

    align-items:center;

    z-index:100;

    box-sizing:border-box;

}


nav div{

    flex:1;

}


button{

    background:#222;

    color:white;

    border:1px solid #333;

    padding:10px 20px;

    cursor:pointer;

    border-radius:8px;

    transition:0.3s;

}


button:hover{

    background:#444;

    transform:scale(1.05);

}





/* HERO */

.hero{

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    text-align:center;

}



.hero img{

    width:300px;

    animation:float 3s infinite;

    filter:drop-shadow(0 0 20px white);

}



@keyframes float{

    50%{

        transform:scale(1.15);

    }

}



.hero h1{

    font-size:50px;

}







/* SECTIONS */

section{

    min-height:70vh;

    padding:100px 40px;

    box-sizing:border-box;

}





.card{

    max-width:900px;

    margin:60px auto;

    padding:35px;


    background:linear-gradient(
        145deg,
        #0d0d0d,
        #070707
    );


    border:1px solid #222;

    border-radius:25px;


    box-shadow:

    0 0 25px rgba(255,255,255,0.08),

    inset 0 0 20px rgba(255,255,255,0.03);


    transition:0.5s;

}




.card:hover{

    transform:translateY(-8px);

    border-color:#555;


    box-shadow:

    0 0 35px rgba(255,255,255,0.15);

}





.animate{

    transition:1s;

    opacity:0.7;

}





.card h1{

    text-align:center;

    font-size:32px;

}



.card h2{

    text-align:center;

}



.card p{

    text-align:center;

    max-width:700px;

    margin:auto;

    font-size:17px;

    line-height:1.8;

    color:#ddd;

}







/* FOOTER */

footer{

    background:#111;

    padding:40px;

    text-align:center;

    border-top:1px solid #333;

}








/* LOGIN SIGNUP POPUP */


.popup{

    display:none;

    position:fixed;

    top:0;

    left:0;


    width:100%;

    height:100%;


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


    justify-content:center;

    align-items:center;


    z-index:9999;

}






.popup-box{


    background:#050505;


    color:white;


    width:320px;


    padding:30px;


    border-radius:20px;


    border:1px solid #444;


    text-align:center;


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


    animation:popupShow 0.3s;


}





@keyframes popupShow{


    from{

        transform:scale(0.7);

        opacity:0;

    }


    to{

        transform:scale(1);

        opacity:1;

    }


}






.popup-box input{


    width:90%;


    padding:12px;


    margin:8px;


    background:#111;


    color:white;


    border:1px solid #444;


    border-radius:10px;


}






.close{


    position:absolute;


    right:20px;


    top:10px;


    font-size:30px;


    cursor:pointer;


}







/* PHONE */

@media(max-width:700px){


    nav{

        gap:5px;

        padding:10px;

    }



    nav button{

        padding:8px;

        font-size:12px;

    }




    .hero img{

        width:200px;

    }



    .hero h1{

        font-size:35px;

    }



    .card{

        margin:25px 15px;

        padding:25px;

    }



}