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

body{

background:
radial-gradient(circle at top right,#1e3a8a 0%,transparent 35%),
radial-gradient(circle at bottom left,#172554 0%,transparent 40%),
linear-gradient(180deg,#030712,#050816,#020617);

color:white;

overflow-x:hidden;

scroll-behavior:smooth;

}

nav{

width:100%;

padding:22px 10%;

display:flex;

justify-content:space-between;

align-items:center;

position:fixed;

top:0;

left:0;

background:rgba(5,8,22,.55);

backdrop-filter:blur(20px);

border-bottom:1px solid rgba(255,255,255,.08);

z-index:999;

transition:.4s;

}

.logo{

font-size:30px;

font-weight:700;

color:#60a5fa;

letter-spacing:1px;

cursor:pointer;

transition:.35s;

}

nav ul{

    display:flex;

    list-style:none;

    gap:35px;

}

nav a{

text-decoration:none;

color:#e5e7eb;

font-weight:500;

transition:.35s;

position:relative;

}

nav a:hover{

color:#60a5fa;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:#60a5fa;

transition:.35s;

}

nav a:hover::after{

width:100%;

}

.hero{

    width:100%;

    min-height:95vh;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:120px 10%;

}

.hero-left{

    max-width:600px;

}

.hero-left h3{

    font-size:25px;

    color:#8cbcff;

}

.hero-left h1{

    font-size:65px;

    margin:10px 0;

}

.hero-left h2{

    color:#4da3ff;

    margin-bottom:20px;

}

.hero-left p{

    color:#cfcfcf;

    line-height:32px;

    font-size:18px;

}

.button{

    margin-top:40px;

}

.button a{

    text-decoration:none;

    padding:15px 28px;

    border-radius:50px;

    margin-right:15px;

    display:inline-block;

    transition:.3s;

}

.button a:first-child{

    background:#4da3ff;

    color:white;

}

.button a:last-child{

    border:2px solid #4da3ff;

    color:#4da3ff;

}

.button a:hover{

    transform:translateY(-5px);
    box-shadow:0 0 25px rgba(77,163,255,.5);

}

.hero-right img{

    width:320px;

    height:320px;

    object-fit:cover;

    border-radius:50%;

    border:6px solid #4da3ff;

    box-shadow:
0 0 20px rgba(77,163,255,.5),
0 0 50px rgba(77,163,255,.3);

animation:floating 4s ease-in-out infinite;

}
.stars,
.stars2,
.stars3{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:-3;
}

.stars{
    background-image:
    radial-gradient(circle,#ffffff 1px,transparent 1px);
    background-size:50px 50px;
    opacity:.3;
}

.stars2{
    background-image:
    radial-gradient(circle,#4da3ff 1px,transparent 1px);
    background-size:120px 120px;
    opacity:.2;
    animation:moveStars 90s linear infinite;
}

.stars3{
    background-image:
    radial-gradient(circle,#8fd3ff 2px,transparent 2px);
    background-size:200px 200px;
    opacity:.15;
    animation:moveStars 130s linear infinite;
}

@keyframes moveStars{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-300px);

    }

}
.moon{

position:fixed;

right:-120px;

top:-120px;

width:350px;

height:350px;

border-radius:50%;

background:#4da3ff;

filter:blur(40px);

opacity:.18;

z-index:-2;

}
@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0px);

}

}
.about{

padding:120px 10%;

max-width:1000px;

margin:auto;

}

.about h2{

font-size:42px;

margin-bottom:30px;

color:#4da3ff;

}

.about p{

font-size:19px;

line-height:40px;

color:#d9d9d9;

}
.skills{

padding:100px 10%;

max-width:900px;

margin:auto;

}

.skills h2{

font-size:42px;

color:#4da3ff;

margin-bottom:50px;

text-align:center;

}

.skill{

margin-bottom:35px;

}

.skill-info{

display:flex;

justify-content:space-between;

margin-bottom:12px;

font-size:18px;

}

.progress{

width:100%;

height:12px;

background:#1c2740;

border-radius:50px;

overflow:hidden;

}

.progress-bar{

height:100%;

border-radius:50px;

background:linear-gradient(90deg,#3b82f6,#60a5fa);

animation:grow 2s ease forwards;

}

.html{

width:90%;

}

.css{

width:85%;

}

.js{

width:70%;

}

.net{

width:80%;

}

@keyframes grow{

from{

width:0;

}

}
.experience{

padding:100px 10%;

text-align:center;

}

.experience h2{

font-size:42px;

color:#4da3ff;

margin-bottom:50px;

}

.exp-card{

max-width:850px;

margin:auto;

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

backdrop-filter:blur(15px);

padding:40px;

border-radius:25px;

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

transition:.4s;

}

.exp-card:hover{

transform:translateY(-8px);

box-shadow:0 0 35px rgba(77,163,255,.3);

}

.exp-card i{

font-size:60px;

color:#4da3ff;

margin-bottom:20px;

}

.exp-card h3{

font-size:30px;

margin-bottom:10px;

}

.exp-card h4{

color:#60a5fa;

margin-bottom:20px;

}

.exp-card p{

line-height:32px;

color:#d9d9d9;

}
.projects{

padding:100px 10%;

}

.projects h2{

text-align:center;

font-size:42px;

color:#4da3ff;

margin-bottom:50px;

}

.project-grid{

display:grid;

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

gap:30px;

}

.project-card{

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

padding:35px;

border-radius:20px;

text-align:center;

transition:.4s;

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

}

.project-card:hover{

transform:translateY(-8px);

box-shadow:0 0 30px rgba(77,163,255,.25);

}

.project-card i{

font-size:50px;

color:#4da3ff;

margin-bottom:20px;

}

.project-card h3{

margin-bottom:15px;

}

.project-card p{

line-height:28px;

margin-bottom:25px;

color:#d7d7d7;

}

.project-card a{

display:inline-block;

padding:12px 24px;

border-radius:30px;

background:#3b82f6;

color:white;

text-decoration:none;

}
.contact{

padding:100px 10%;

text-align:center;

}

.contact h2{

font-size:42px;

color:#4da3ff;

margin-bottom:50px;

}

.contact-container{

display:grid;

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

gap:25px;

}

.contact-card{

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

padding:30px;

border-radius:20px;

transition:.3s;

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

}

.contact-card:hover{

transform:translateY(-8px);

box-shadow:0 0 30px rgba(77,163,255,.25);

}

.contact-card i{

font-size:45px;

color:#4da3ff;

margin-bottom:20px;

}

.contact-card h3{

margin-bottom:10px;

}

.contact-card p{

color:#d7d7d7;

word-break:break-word;

}
footer{

padding:50px 10%;

text-align:center;

background:#030712;

border-top:1px solid rgba(255,255,255,.08);

margin-top:80px;

}

.footer-logo{

font-size:30px;

font-weight:700;

color:#4da3ff;

margin-bottom:20px;

}

footer p{

margin:8px 0;

color:#94A3B8;

font-size:15px;

}

footer strong{

color:white;

}
/* ===========================
   RESPONSIVE MOBILE
=========================== */

@media (max-width:768px){

nav{

padding:18px 6%;
flex-direction:column;
gap:15px;

}

nav ul{

flex-wrap:wrap;
justify-content:center;
gap:18px;

}

.hero{

flex-direction:column-reverse;
text-align:center;
padding:140px 8% 80px;

}

.hero-left{

max-width:100%;

}

.hero-left h1{

font-size:48px;

}

.hero-left h2{

font-size:24px;

}

.hero-right img{

width:240px;
height:240px;
margin-bottom:40px;

}

.button{

display:flex;
justify-content:center;
flex-wrap:wrap;
gap:15px;

}

.about,
.skills,
.experience,
.projects,
.contact{

padding:80px 8%;

}

.about h2,
.skills h2,
.experience h2,
.projects h2,
.contact h2{

font-size:34px;

}

}
/*==========================
GALAXY BACKGROUND
==========================*/

body::before{

content:"";

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background-image:

radial-gradient(white 1px,transparent 1px),
radial-gradient(#4da3ff 1px,transparent 1px),
radial-gradient(#60a5fa 2px,transparent 2px);

background-size:

80px 80px,
140px 140px,
220px 220px;

opacity:.18;

animation:starsMove 140s linear infinite;

pointer-events:none;

z-index:-3;

}

body::after{

content:"";

position:fixed;

top:-200px;

right:-200px;

width:450px;

height:450px;

background:#2563eb;

filter:blur(120px);

opacity:.15;

border-radius:50%;

z-index:-2;

animation:moonGlow 10s ease-in-out infinite;

}

@keyframes starsMove{

from{

transform:translateY(0);

}

to{

transform:translateY(-400px);

}

}

@keyframes moonGlow{

0%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

100%{

transform:scale(1);

}

}
/*==========================
BACK TO TOP
==========================*/

#topBtn{

position:fixed;

bottom:30px;

right:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#3b82f6;

color:white;

font-size:22px;

cursor:pointer;

display:none;

transition:.3s;

box-shadow:0 0 20px rgba(59,130,246,.45);

z-index:999;

}

#topBtn:hover{

transform:translateY(-5px);

box-shadow:0 0 35px rgba(59,130,246,.7);

}
.project-card,
.contact-card,
.exp-card{

position:relative;

overflow:hidden;

}

.project-card::before,
.contact-card::before,
.exp-card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.08),
transparent
);

transition:.8s;

}

.project-card:hover::before,
.contact-card:hover::before,
.exp-card:hover::before{

left:100%;

}
.project-button{

display:flex;

justify-content:center;

gap:15px;

margin-top:20px;

}

.project-button a{

padding:12px 24px;

border-radius:30px;

text-decoration:none;

background:#2563eb;

color:white;

transition:.3s;

}

.project-button a:hover{

transform:translateY(-4px);

background:#3b82f6;

box-shadow:0 0 20px rgba(59,130,246,.4);

}
/*==========================
NAVBAR ACTIVE
==========================*/

.active-nav{

background:rgba(3,7,18,.92);

backdrop-filter:blur(25px);

box-shadow:0 8px 25px rgba(0,0,0,.35);

}
/*==========================
SCROLL ANIMATION
==========================*/

.about,
.skills,
.experience,
.projects,
.contact{

opacity:0;

transform:translateY(50px);

transition:all .8s ease;

}

.show{

opacity:1;

transform:translateY(0);

}
.logo:hover{

color:#93c5fd;

transform:scale(1.05);

text-shadow:0 0 15px rgba(96,165,250,.8);

}
/*==========================
SCROLLBAR
==========================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#020617;

}

::-webkit-scrollbar-thumb{

background:#3b82f6;

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#60a5fa;

}
::selection{

background:#2563eb;

color:white;

}