/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

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

body{
    font-family:Arial, Helvetica, sans-serif;
    line-height:1.6;
}

/* ================= NAVBAR ================= */

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 60px;
    background:#333;
}

.logo{
    color:#fff;
    text-decoration:none;
    font-family:'Poppins',sans-serif;
    font-size:28px;
    font-weight:700;
    letter-spacing:1px;
    transition:0.3s;
}

.logo:hover{
    color:#00bfff;
}

.nav-links{
    display:flex;
    list-style:none;
    gap:20px;
}

.nav-links a{
    color:#ffffff;
    text-decoration:none;
    transition:.3s;
}

.nav-links a:hover{
    color:#00bfff;
}

/* ================= BANNER ================= */

.banner{
    height:100vh;
    background:url("https://media.istockphoto.com/id/1390456645/photo/metaverse-and-blockchain-technology-concepts-person-with-an-experiences-of-metaverse-virtual.jpg?s=612x612&w=0&k=20&c=eoKihFdi8QF2s2WomQJxpiy-pvM5tKLYAIaWdP_kQwc=")
    center/cover no-repeat;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    text-align:center;
    color:rgb(255, 255, 255);
}

.banner::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

.banner-content{
    position:relative;
    z-index:1;
}

.banner h1{
    font-size:55px;
    margin-bottom:15px;
}

.banner p{
    font-size:20px;
}

/* ================= ABOUT ================= */

.about{

    padding:80px 10%;
    background:#bcbbbb;
}

.about-container{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
    flex-wrap:wrap;
}

.about-image img{
    width:420px;
    max-width:100%;
    border-radius:10px;
}

.about-content{
    max-width:500px;
}

.about-content h2{
    font-size:36px;
    margin-bottom:15px;
}

.about-content p{
    color:#555;
    margin-bottom:20px;
}

.btn{
    padding:12px 25px;
    border:none;
    background:#007BFF;
    color:#fff;
    border-radius:5px;
    cursor:pointer;
    transition:.3s;
}

.btn:hover{
    background:#0056b3;
}

/* ================= SERVICES ================= */

.services{
    padding:80px 10%;
    text-align:center;
}

.services h2{
    font-size:36px;
    margin-bottom:40px;
}

.services-container{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
}

.card{
    width:320px;
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
    transition:transform .3s ease;
}

.card:hover{
    transform:translateY(-10px);
}

.card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.card h3{
    margin:15px 0;
}

.card p{
    padding:0 15px 20px;
    color:#555;
}

/* ================= FOOTER ================= */

footer{
    background:#333;
    color:#fff;
    text-align:center;
    padding:20px;
}

/* ================= RESPONSIVE ================= */

@media(max-width:768px){

    .navbar{
        flex-direction:column;
        gap:15px;
        padding:20px;
    }

    .nav-links{
        flex-direction:column;
        text-align:center;
    }

    .banner h1{
        font-size:36px;
    }

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

    .about-container{
        flex-direction:column;
        text-align:center;
    }

    .about-image img{
        width:100%;
    }

    .services-container{
        flex-direction:column;
        align-items:center;
    }
}


/* register */
.register-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
    background: #fff;
}
.register-box{
    background: #fff;
    padding: 30px;
    width: 350px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 15px rgb(0, 0, 0 , 0.1);
    
}
.register-box h2{
    margin-bottom: 20px;
    color: #333;


}
.register-box input{
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    font-size: 16px;
}
.register-box button{
    width: 100%;
    padding: 10px;
    background: #2127dc;
    color: #ffffff;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px;
    border: none;
}
.login-link{
    margin-top: 50px;
    font-size: 14px;

}
.login-link a{
    color: #007BFF;
    text-decoration: none;
}



/* login */

.login-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
    background: #fff;
}
.login-box{
    background: #fff;
    padding: 30px;
    width: 350px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 15px rgb(0, 0, 0 , 0.1);
    
}
.login-box h2{
    margin-bottom: 20px;
    color: #333;


}
.login-box input{
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    font-size: 16px;
}
.login-box button{
    width: 100%;
    padding: 10px;
    background: #2127dc;
    color: #ffffff;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px;
    border: none;
}
.login-link{
    margin-top: 50px;
    font-size: 14px;

}
.login-link a{
    color: #007BFF;
    text-decoration: none;
}

/* covid */
.table-conatainoer{
display: flex;
justify-content: center;
margin: 30px 0;
}

table{
    border-collapse: collapse;
    width: 80%;
    background:white ;
    box-shadow: 0 0 10px rgb(0, 0, 0,.1);
    text-align: center;
}
th,td{
    padding: 12px;
    border:1px solid #ddd;
}
th{
    background: #333;
    color: #ffffff;
}
h2{
    text-align: center;
    margin-top: 20px;

}
@media(mex-width:600px){
    th,td{
        padding: 6px;
       font-size: 14px;

    }
}

body{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

main{
    flex:1;
}