/* =====================================
   Cyber Security Dashboard Portfolio
   Meas Seyha
===================================== */


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


body {

    font-family:
    'Inter',
    'Segoe UI',
    sans-serif;

    background:#050816;

    color:#dbeafe;

    line-height:1.7;

}


/* BACKGROUND EFFECT */

body::before {

    content:"";

    position:fixed;

    width:100%;

    height:100%;

    background:

    linear-gradient(
    90deg,
    rgba(56,189,248,0.05) 1px,
    transparent 1px
    ),

    linear-gradient(
    rgba(56,189,248,0.05) 1px,
    transparent 1px
    );

    background-size:40px 40px;

    z-index:-1;

}






/* HERO */


.hero {

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    text-align:center;

    padding:40px;

}



.profile {

    width:170px;

    height:170px;

    border-radius:20px;

    object-fit:cover;


    border:2px solid #22d3ee;


    box-shadow:

    0 0 40px rgba(34,211,238,.4);


}



.hero h1 {

    margin-top:25px;

    font-size:55px;

    font-weight:800;

    color:white;

}



.hero h2 {

    color:#22d3ee;

    margin:10px;

}



.hero p {

    max-width:750px;

    color:#94a3b8;

    font-size:18px;

}





/* BUTTON */


.buttons {

    margin-top:30px;

}


.buttons a {


    display:inline-block;


    padding:12px 28px;


    margin:10px;


    border-radius:30px;


    text-decoration:none;


    color:white;


    background:

    linear-gradient(
    135deg,
    #0284c7,
    #22d3ee
    );


    transition:.3s;


}



.buttons a:hover {


    transform:translateY(-5px);


    box-shadow:

    0 0 25px #22d3ee;


}






/* NAV */


nav {


    position:sticky;


    top:0;


    z-index:20;


    background:

    rgba(5,8,22,.85);


    backdrop-filter:blur(15px);


    padding:20px;


    text-align:center;


    border-bottom:

    1px solid #1e293b;


}



nav a {


    color:#94a3b8;


    margin:15px;


    text-decoration:none;


}



nav a:hover {


    color:#22d3ee;


}








/* SECTION */


section {


    padding:80px 10%;


}



section h2 {


    text-align:center;


    font-size:36px;


    margin-bottom:50px;


    color:#22d3ee;


}









/* CARDS */


.cards {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(300px,1fr));


    gap:30px;


}



.card {


    background:


    rgba(15,23,42,.7);


    backdrop-filter:blur(10px);


    border-radius:20px;


    padding:30px;


    border:

    1px solid #1e293b;


    transition:.4s;


}




.card:hover {


    border-color:#22d3ee;


    transform:

    translateY(-10px);


    box-shadow:

    0 20px 40px rgba(0,0,0,.4);


}



.card h3 {


    color:#38bdf8;


    margin-bottom:15px;


}




.card ul li {


    margin-left:20px;


    color:#cbd5e1;


}








/* CERTIFICATE */


.certificate-box {


    display:flex;

    justify-content:center;


}



.certificate-image {


    width:90%;


    max-width:1000px;


    padding:15px;


    background:white;


    border-radius:20px;


    border:

    3px solid #22d3ee;


    box-shadow:

    0 0 30px rgba(34,211,238,.3);


}







/* CODE */


pre {


    background:#020617;


    color:#4ade80;


    padding:25px;


    border-radius:15px;


    border-left:

    4px solid #22d3ee;


}







/* LINKS */


a {


    color:#22d3ee;


}








/* FOOTER */


footer {


    padding:40px;


    text-align:center;


    color:#64748b;


    border-top:

    1px solid #1e293b;


}







/* MOBILE */


@media(max-width:700px){


.hero h1 {


    font-size:36px;


}



.hero h2 {


    font-size:20px;


}



nav a {


    display:block;


    margin:10px;


}



section {


    padding:50px 5%;


}


}