/* ===== RESET ===== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
    scroll-behavior:smooth;
}


body{

    background:
    radial-gradient(circle at top,#1f1b4d,#080808 55%);

    color:white;
    line-height:1.6;
    overflow-x:hidden;

}



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

nav{

    width:90%;
    margin:20px auto;

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

    padding:18px 40px;

    background:rgba(255,255,255,0.08);

    -webkit-backdrop-filter:blur(15px);
    backdrop-filter:blur(15px);

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

    border-radius:20px;

    position:fixed;

    left:5%;
    top:0;

    z-index:1000;

}


.logo{

    font-size:30px;

    font-weight:800;

    background:linear-gradient(45deg,#00eaff,#a855f7);

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;

    animation:float 3s infinite;

}



nav ul{

    display:flex;
    list-style:none;

}


nav ul li{

    margin-left:30px;

}


nav ul li a{

    color:#ddd;
    text-decoration:none;
    transition:.3s;

}


nav ul li a:hover,
nav ul li a.active{

    color:#00eaff;

}





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


.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:120px 20px;

}



.hero-text{

    animation:hero 1s ease;

}



.hero-text h3{

    color:#aaa;
    font-size:28px;

}



.hero-text h1{

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

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

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;

}



.hero-text h2{

    font-size:40px;

}



.hero-text p{

    max-width:700px;

    margin:20px auto;

    color:#bbb;

}



#typing{

    color:#00eaff;

}





/* ===== BUTTON ===== */


.btn{

    display:inline-block;

    margin-top:25px;

    padding:15px 40px;

    border-radius:50px;

    background:linear-gradient(45deg,#00eaff,#a855f7);

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.4s;

    animation:pulse 2s infinite;

}


.btn:hover{

    transform:scale(1.1);

}





/* ===== SECTION ===== */


section{

    padding:100px 10%;

}


.title{

    text-align:center;

    font-size:45px;

    margin-bottom:50px;

}





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


.about-box,
.skill,
.card{

    background:rgba(255,255,255,0.07);

    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);

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

    box-shadow:0 20px 50px rgba(0,0,0,.5);

}



.about-box{

    padding:45px;

    border-radius:25px;

    color:#ddd;

    position:relative;

}



.about-content{

    position:relative;

    z-index:2;

}





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


.skills{

    display:grid;

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

    gap:30px;

}



.skill{

    padding:30px;

    border-radius:20px;

    text-align:center;

    font-size:20px;

    transition:.4s;

}



.skill:hover{

    transform:translateY(-15px);

    border-color:#00eaff;

    box-shadow:0 0 30px rgba(0,234,255,.4);

}





/* ===== PROJECTS ===== */


.projects{

    display:grid;

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

    gap:30px;

}



.card{

    padding:35px;

    border-radius:25px;

    transition:.4s;

}



.card h3{

    color:#00eaff;

}



.card:hover{

    transform:translateY(-15px);

    box-shadow:0 0 40px rgba(168,85,247,.4);

}





/* ===== CONTACT ===== */


#contact{

    background:#050505;

    text-align:center;

}


#contact a{

    color:#00eaff;

}





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


footer{

    background:#000;

    padding:30px;

    text-align:center;

    color:#777;

}





/* ===== ANIMATION ===== */


@keyframes hero{

from{

opacity:0;

transform:translateY(-80px);

}

to{

opacity:1;

transform:translateY(0);

}

}



@keyframes float{

50%{

transform:translateY(-8px);

}

}



@keyframes pulse{

0%{

box-shadow:0 0 0 0 #00eaff;

}

70%{

box-shadow:0 0 0 20px transparent;

}

100%{

box-shadow:0 0 0 0 transparent;

}

}





/* ===== SCROLL REVEAL ===== */


.reveal{

opacity:0;

transition:1s ease;

}


.reveal-up{

transform:translateY(80px);

}


.reveal-down{

transform:translateY(-80px);

}


.reveal-left{

transform:translateX(-80px);

}


.reveal-right{

transform:translateX(80px);

}


.reveal-zoom{

transform:scale(.7);

}


.reveal.active{

opacity:1;

transform:translate(0) scale(1);

}





/* ===== BORDER ANIMATION ===== */


.reveal-border{

position:relative;

overflow:hidden;

}


.reveal-border::before{

content:"";

position:absolute;

inset:0;

border:2px solid #00eaff;

border-radius:25px;

opacity:0;

transition:.5s;

pointer-events:none;

}



.reveal-border.active::before{

opacity:1;

box-shadow:0 0 20px #00eaff;

}





/* ===== MOBILE ===== */


@media(max-width:768px){


nav{

width:95%;

left:2.5%;

flex-direction:column;

padding:15px 20px;

}



nav ul{

margin-top:15px;

flex-wrap:wrap;

justify-content:center;

}



nav ul li{

margin:8px 12px;

}



.hero-text h1{

font-size:45px;

}



.hero-text h2{

font-size:25px;

}



.title{

font-size:35px;

}

}

.card,
.card h3,
.card p {
  color: white;
  text-decoration: none;
}

.card:hover h3,
.card:hover p {
  text-decoration: none;
}