/* ==============================
   GLOBAL FUTURISTIC THEME
================================ */

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


body{

    background:
    radial-gradient(circle at top,#06264a,#010712 60%);

    color:white;
    font-family:"Segoe UI",Arial;
    overflow-x:hidden;

}



/* ==============================
   DIGITAL BACKGROUND
================================ */


.digital-bg{

    position:fixed;

    width:100%;
    height:100%;

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

    background-size:60px 60px;

    animation:gridMove 20s linear infinite;

    z-index:-3;

}


@keyframes gridMove{

    from{
        background-position:0 0;
    }

    to{
        background-position:500px 500px;
    }

}



/* ==============================
   NAVIGATION
================================ */


.navbar{

    background:
    rgba(0,0,0,.25);

    backdrop-filter:blur(20px);

}


.brand{

    display:flex;
    gap:15px;
    align-items:center;

}


.logo-box{

    width:50px;
    height:50px;

    border:3px solid #22ffd2;

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

    font-size:25px;
    font-weight:bold;

    clip-path:
    polygon(
    25% 0,
    75% 0,
    100% 50%,
    75% 100%,
    25% 100%,
    0 50%
    );

}


.brand span{

    color:#22ffd2;

}


.navbar a{

    color:white;
    margin:0 20px;
    text-decoration:none;

}


.navbar a:hover{

    color:#22ffd2;

}


.moon{

    border:1px solid #22ffd2;

    background:transparent;

    color:white;

    border-radius:20px;

    padding:8px 25px;

}




/* ==============================
   SOCIAL BAR
================================ */


.social{

    position:fixed;

    left:20px;
    top:250px;

    background:
    rgba(255,255,255,.05);

    border:
    1px solid rgba(0,255,255,.3);

    border-radius:15px;

    padding:20px;


    z-index:10;

}


.social i{

    display:block;

    font-size:25px;

    margin:25px 0;

}



/* ==============================
   HERO
================================ */


.hero{

    min-height:650px;

    padding-top:130px;

}



.holo{

    width:380px;
    height:380px;

    margin:auto;

    border-radius:50%;


    background:
    conic-gradient(
    #00ffff,
    transparent,
    #00ff99,
    transparent
    );


    padding:15px;


    /* animation:rotate 8s linear infinite;*/

}


.holo img{

    width:100%;
    height:100%;

    border-radius:50%;

    object-fit:cover;


}


@keyframes rotate{

    to{

        transform:rotate(360deg);

    }

}



.experience{

    width:160px;

    padding:15px;

    margin:-30px auto 0;


    background:
    rgba(0,255,255,.1);

    border:
    1px solid #00eaff;


    border-radius:15px;

}




.intro h1{

    font-size:75px;
    font-weight:800;

}



.intro span,
#typing{

    color:#22ffd2;

}



.intro button{

    margin-top:30px;

    border:0;

    padding:15px 35px;


    background:
    linear-gradient(
    90deg,
    #00eaff,
    #22ffd2
    );


    border-radius:10px;


}




/* ==============================
   DIGITAL AFRICA
================================ */


.universe{

    position:relative;

}


.universe img{

    width:100%;

    filter:

    drop-shadow(
    0 0 50px #00ffff
    );

   animation:
    globeSpin 25s linear infinite;
}

@keyframes globeSpin{

    from{

        transform:
        rotate(0deg);

    }


    to{

        transform:
        rotate(360deg);

    }

}

.tech{

    position:absolute;

    padding:15px;

    background:
    rgba(0,0,0,.4);

    border:
    1px solid #00ffff;


    border-radius:15px;


}



.t1{

top:10%;
left:10%;

}


.t2{

top:20%;
right:20%;

}


.t3{

bottom:20%;
right:5%;

}




/* ==============================
   GLASS CARDS
================================ */


.dashboard{

    padding:40px;

}



.glass{

    height:100%;

    padding:30px;


    background:
    rgba(255,255,255,.06);


    border:
    1px solid rgba(0,255,255,.3);


    border-radius:15px;


    backdrop-filter:blur(20px);


    transition:.5s;


}



.glass:hover{

    transform:
    translateY(-10px);


    box-shadow:
    0 0 40px #00ffff;

}


.glass h4{

    color:#22ffd2;

}





/* ==============================
   SKILLS
================================ */


.skill{

margin-top:20px;

}


.skill div{

height:8px;

background:#142033;

border-radius:10px;


}


.skill span{

display:block;

height:100%;

background:
linear-gradient(
90deg,
#00eaff,
#22ffd2
);

border-radius:10px;

}



/* ==============================
   LAB
================================ */


.lab-card{

    margin:15px 0;

    padding:15px;

    background:
    rgba(255,255,255,.07);

    border-radius:10px;

}





/* ==============================
   RADAR
================================ */


.circle{

    margin:50px auto;

    width:160px;
    height:160px;


    border-radius:50%;


    border:

    2px dashed #00ffff;


    display:flex;

    justify-content:center;

    align-items:center;


    font-size:60px;


    color:#22ffd2;

}




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


footer{

    margin:30px;

    padding:40px;

    background:
    rgba(255,255,255,.05);


    border-radius:20px;


    text-align:center;


}



.stat{

    display:flex;

    justify-content:space-around;

}


.stat span{

    color:#22ffd2;

    font-size:35px;

    font-weight:bold;

}