/* ==========================
   GOOGLE FONT RESET
========================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:linear-gradient(135deg,#09090B,#111827,#1E1B4B);
    color:#fff;
    overflow-x:hidden;
}

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

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#09090B;
}

::-webkit-scrollbar-thumb{
    background:#7C3AED;
    border-radius:10px;
}

/* ==========================
   CURSOR GLOW
========================== */

#cursor-glow{
    position:fixed;
    width:35px;
    height:35px;
    border-radius:50%;
    background:rgba(103,232,249,.35);
    pointer-events:none;
    transform:translate(-50%,-50%);
    filter:blur(20px);
    z-index:9999;
}

/* ==========================
   LOADER
========================== */

#loader{
    position:fixed;
    inset:0;
    background:#09090B;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:10000;
    animation:loaderFade 2s forwards;
}

#loader h1{
    font-family:'Orbitron',sans-serif;
    font-size:60px;
    color:#67E8F9;
    letter-spacing:5px;
}

@keyframes loaderFade{

0%{
opacity:1;
}

80%{
opacity:1;
}

100%{
opacity:0;
visibility:hidden;
}

}

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

nav{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);

width:92%;

max-width:1350px;

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 40px;

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

backdrop-filter:blur(20px);

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

border-radius:18px;

z-index:999;

box-shadow:0 10px 40px rgba(0,0,0,.35);

}

.logo{

font-size:28px;

font-family:'Orbitron',sans-serif;

color:#67E8F9;

font-weight:bold;

}

nav ul{

display:flex;

gap:35px;

list-style:none;

}

nav ul li a{

text-decoration:none;

color:white;

transition:.35s;

font-weight:500;

}

nav ul li a:hover{

color:#67E8F9;

}

.nav-buttons{

display:flex;

gap:15px;

}

.github-btn,
.resume-btn{

padding:12px 22px;

border-radius:12px;

text-decoration:none;

font-weight:600;

transition:.35s;

}

.github-btn{

background:#7C3AED;

color:white;

}

.resume-btn{

border:1px solid #67E8F9;

color:#67E8F9;

}

.github-btn:hover,
.resume-btn:hover{

transform:translateY(-4px);

box-shadow:0 0 20px rgba(103,232,249,.35);

}

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

.hero{

min-height:100vh;

display:flex;

justify-content:space-between;

align-items:center;

padding:140px 10% 80px;

}

.hero-left{

width:55%;

}

.welcome{

letter-spacing:4px;

color:#F472B6;

margin-bottom:20px;

font-size:14px;

}

.hero h1{

font-family:'Orbitron',sans-serif;

font-size:72px;

line-height:1.2;

margin-bottom:20px;

}

.hero h1 span{

background:linear-gradient(90deg,#67E8F9,#8B5CF6);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero h2{

font-size:34px;

color:#67E8F9;

height:50px;

margin-bottom:20px;

}

.hero-text{

font-size:18px;

color:#CBD5E1;

line-height:1.9;

max-width:700px;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

}

.primary-btn,
.secondary-btn{

padding:16px 30px;

border-radius:12px;

text-decoration:none;

transition:.35s;

font-weight:600;

}

.primary-btn{

background:linear-gradient(90deg,#8B5CF6,#06B6D4);

color:white;

}

.secondary-btn{

border:1px solid #67E8F9;

color:#67E8F9;

}

.primary-btn:hover,
.secondary-btn:hover{

transform:translateY(-5px);

box-shadow:0 0 25px rgba(103,232,249,.35);

}

.hero-right{

display:flex;

justify-content:center;

align-items:center;

width:40%;

}

.hero-circle{

width:340px;

height:340px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:120px;

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

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

backdrop-filter:blur(20px);

box-shadow:0 0 60px rgba(124,58,237,.35);

animation:float 5s ease-in-out infinite;

}

@keyframes float{

50%{

transform:translateY(-20px);

}

}
/* ==========================
   SECTION STYLES
========================== */

section{
    padding:100px 10%;
}

.section-title{
    font-size:42px;
    font-family:'Orbitron',sans-serif;
    text-align:center;
    margin-bottom:60px;
    color:#67E8F9;
    letter-spacing:3px;
}

.glass-card{

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

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

    backdrop-filter:blur(20px);

    border-radius:25px;

    padding:45px;

    color:#CBD5E1;

    font-size:18px;

    line-height:2;

    transition:.4s;

}

.glass-card:hover{

transform:translateY(-8px);

box-shadow:0 0 40px rgba(124,58,237,.25);

}

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

.skills-grid{

display:grid;

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

gap:25px;

}

.skill-card{

padding:35px;

text-align:center;

font-size:20px;

font-weight:600;

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

border-radius:20px;

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

backdrop-filter:blur(20px);

transition:.35s;

cursor:pointer;

}

.skill-card:hover{

transform:translateY(-10px) scale(1.05);

background:linear-gradient(135deg,#7C3AED,#06B6D4);

box-shadow:0 0 30px rgba(103,232,249,.35);

}

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

.projects-grid{

display:grid;

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

gap:35px;

}

.project-card{

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

border-radius:25px;

padding:35px;

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

transition:.35s;

backdrop-filter:blur(20px);

}

.project-card:hover{

transform:translateY(-12px);

box-shadow:0 0 35px rgba(124,58,237,.3);

}

.project-card h3{

font-size:28px;

margin-bottom:20px;

color:#67E8F9;

}

.project-card p{

line-height:1.9;

margin-bottom:30px;

color:#CBD5E1;

}

.project-card a{

display:inline-block;

padding:14px 24px;

border-radius:10px;

text-decoration:none;

background:linear-gradient(90deg,#8B5CF6,#06B6D4);

color:white;

transition:.3s;

}

.project-card a:hover{

transform:translateY(-4px);

}

/* ==========================
   TIMELINE
========================== */

.timeline{

display:flex;

justify-content:space-between;

gap:25px;

flex-wrap:wrap;

}

.timeline-item{

flex:1;

min-width:220px;

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

border-radius:20px;

padding:35px;

text-align:center;

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

transition:.35s;

}

.timeline-item:hover{

transform:translateY(-10px);

box-shadow:0 0 30px rgba(103,232,249,.25);

}

.timeline-item h3{

color:#67E8F9;

font-size:30px;

margin-bottom:15px;

}

.timeline-item p{

color:#CBD5E1;

line-height:1.8;

}

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

.contact-card{

display:flex;

flex-direction:column;

gap:20px;

max-width:700px;

margin:auto;

}

.contact-card input,
.contact-card textarea{

padding:18px;

border:none;

outline:none;

border-radius:12px;

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

color:white;

font-size:16px;

}

.contact-card textarea{

resize:none;

height:180px;

}

.contact-card button{

padding:18px;

border:none;

border-radius:12px;

font-size:18px;

font-weight:600;

background:linear-gradient(90deg,#8B5CF6,#06B6D4);

color:white;

cursor:pointer;

transition:.35s;

}

.contact-card button:hover{

transform:translateY(-5px);

box-shadow:0 0 30px rgba(103,232,249,.35);

}

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

footer{

padding:40px;

text-align:center;

color:#94A3B8;

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

margin-top:80px;

}

footer p{

line-height:2;

font-size:15px;

}
/* ==========================
   FLOATING PARTICLES
========================== */

#particles{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:-1;
}

.particle{
    position:absolute;
    width:4px;
    height:4px;
    background:#67E8F9;
    border-radius:50%;
    opacity:.6;
    animation:particleFloat linear infinite;
}

@keyframes particleFloat{

0%{
transform:translateY(100vh) scale(0);
opacity:0;
}

20%{
opacity:.7;
}

100%{
transform:translateY(-100px) scale(1);
opacity:0;
}

}

/* ==========================
   SAKURA PETALS
========================== */

.petal{

position:fixed;

width:12px;

height:12px;

background:#F9A8D4;

border-radius:60% 40% 70% 30%;

opacity:.8;

pointer-events:none;

animation:fall linear infinite;

z-index:-1;

}

@keyframes fall{

0%{

transform:translateY(-50px) rotate(0deg);

opacity:0;

}

15%{

opacity:1;

}

100%{

transform:translateY(110vh) translateX(120px) rotate(720deg);

opacity:0;

}

}

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

.primary-btn,
.secondary-btn,
.github-btn,
.resume-btn,
.contact-card button{

position:relative;

overflow:hidden;

}

.primary-btn::after,
.secondary-btn::after,
.github-btn::after,
.resume-btn::after,
.contact-card button::after{

content:"";

position:absolute;

width:0;

height:0;

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

border-radius:50%;

top:50%;

left:50%;

transform:translate(-50%,-50%);

transition:.5s;

}

.primary-btn:hover::after,
.secondary-btn:hover::after,
.github-btn:hover::after,
.resume-btn:hover::after,
.contact-card button:hover::after{

width:300px;

height:300px;

}

/* ==========================
   INPUT EFFECTS
========================== */

.contact-card input:focus,
.contact-card textarea:focus{

border:1px solid #67E8F9;

box-shadow:0 0 20px rgba(103,232,249,.35);

}

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

.hero-left{

animation:slideLeft 1s ease;

}

.hero-right{

animation:slideRight 1s ease;

}

@keyframes slideLeft{

from{

opacity:0;

transform:translateX(-80px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes slideRight{

from{

opacity:0;

transform:translateX(80px);

}

to{

opacity:1;

transform:translateX(0);

}

}

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

section{

animation:fadeUp .9s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

@media(max-width:1100px){

.hero{

flex-direction:column;

text-align:center;

}

.hero-left,
.hero-right{

width:100%;

}

.hero-circle{

margin-top:60px;

}

nav{

padding:15px 20px;

}

nav ul{

gap:18px;

}

}

@media(max-width:900px){

.hero h1{

font-size:48px;

}

.hero h2{

font-size:26px;

}

.section-title{

font-size:34px;

}

.timeline{

flex-direction:column;

}

.projects-grid{

grid-template-columns:1fr;

}

.skills-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

nav{

flex-direction:column;

gap:18px;

}

.nav-buttons{

width:100%;

justify-content:center;

}

.hero{

padding-top:180px;

}

.hero-buttons{

flex-direction:column;

}

.hero-circle{

width:240px;

height:240px;

font-size:80px;

}

}

@media(max-width:600px){

.hero h1{

font-size:38px;

}

.hero h2{

font-size:22px;

}

.hero-text{

font-size:16px;

}

.skills-grid{

grid-template-columns:1fr;

}

.contact-card{

padding:25px;

}

.glass-card{

padding:25px;

}

.section{

padding:80px 7%;

}

}

@media(max-width:420px){

.logo{

font-size:20px;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

}

.hero-circle{

width:180px;

height:180px;

font-size:60px;

}

footer{

font-size:13px;

}

}