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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

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

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

html{
    scroll-behavior:smooth;
}


body{

    background:#000;
    color:#fff;
    font-family:'Inter',sans-serif;
    overflow-x:hidden;

}

button {
    border-radius: 0.25rem!important;
}

/* ==========================
   GRID BACKGROUND
========================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),

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

    background-size:120px 120px;

    pointer-events:none;

    z-index:-2;

}

/* ==========================
   LIGHT EFFECT
========================== */

body::after{

    content:"";

    position:fixed;

    width:700px;

    height:700px;

    background:radial-gradient(circle,
    rgba(255,255,255,.06),
    transparent 70%);

    left:50%;

    top:50%;

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

    filter:blur(80px);

    z-index:-1;

}

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

.navbar{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    padding:25px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

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

    backdrop-filter:blur(15px);

    z-index:1000;

}

.logo{

    font-size:22px;

    letter-spacing:4px;

    font-weight:600;

}

.navbar ul{

    display:flex;

    gap:35px;

    list-style:none;

}

.navbar a{

    color:white;

    text-decoration:none;

    font-size:15px;

    transition:.35s;

}

.navbar a:hover{

    opacity:.55;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    position:relative;

    padding:0 30px;

}

.hero-image{

    position:absolute;

    width:520px;

    opacity:.08;

    filter:grayscale(100%);

    pointer-events:none;

}

.hero-content{

    position:relative;

    z-index:10;

}

.intro{

    color:#9f9f9f;

    letter-spacing:8px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.hero h1{

    font-size:72px;

    font-weight:600;

    margin-bottom:20px;

}

.hero h2{

    color:#bcbcbc;

    font-weight:300;

    margin:10px 0;

}

.buttons{

    margin-top:55px;
}

.btn{

    display:inline-block;

    color:black;

    background:white;

    padding:16px 42px;

    text-decoration:none;

    margin-right:18px;

    transition:.4s;

}

.btn:hover{

    transform:translateY(-5px);

}

.btn-outline{
    display:inline-block;

    padding:16px 42px;

    border:1px solid white;

    color:white;

    text-decoration:none;

    transition:.4s;

}

.btn-outline:hover{

    background:white;

    color:black;

}

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

section{

    width:min(1150px,90%);

    margin:auto;

    padding:140px 0;

}

section h2{

    font-size:45px;

    margin-bottom:35px;

}

section p{

    color:#9d9d9d;

    line-height:1.9;

    max-width:760px;

}

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

.skills{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:40px;

}

.skills span{

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

    padding:14px 24px;

    transition:.35s;

}

.skills span:hover{

    background:white;

    color:black;

}

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

.project-grid{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}

.card{

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

    padding:40px;

    transition:.4s;

}

.card:hover{

    transform:translateY(-10px);

    border-color:white;

}

.card h3{

    margin-bottom:20px;

}

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

#contact{

    text-align:center !important;

}

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

footer{

    padding:40px;

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

    text-align:center;

    color:#777;

}



/* Reveal Animation */

.hidden{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.show{

opacity:1;

transform:translateY(0);

}

/* Active Menu */

.navbar a.active{

color:white;

border-bottom:1px solid white;

padding-bottom:5px;

}

/* Progress Bar */

.progress{

position:fixed;

top:0;

left:0;

height:3px;

background:white;

width:0;

z-index:99999;

transition:.2s;

}

/* Loader */

.loader{

position:fixed;

inset:0;

background:black;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

letter-spacing:8px;

z-index:999999;

transition:1s;

}

/* Mobile */

.menu-btn{

display:none;

font-size:28px;

cursor:pointer;

}


/* EXPERIENCE */

.timeline{

margin-top:60px;

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

padding-left:35px;

}

.timeline-item{

margin-bottom:60px;

position:relative;

}

.timeline-item::before{

content:"";

width:14px;

height:14px;

background:white;

border-radius:50%;

position:absolute;

left:-42px;

top:8px;

}

.timeline span{

color:#777;

font-size:14px;

}

.timeline h3{

margin:15px 0;

}

/* TECH */

.tech-grid{

display:grid;

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

gap:20px;

margin-top:50px;

}

.tech-grid div{

padding:30px;

text-align:center;

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

transition:.4s;

}

.tech-grid div:hover{

background:white;

color:black;

transform:translateY(-8px);

}

/* STATS */

#stats{

display:grid;

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

gap:30px;

text-align:center;

}

.stat-box{

padding:50px;

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

}

.stat-box h2{

font-size:55px;

margin-bottom:10px;

}

/* CONTACT */

.contact-form{

margin-top:60px;

display:flex;

flex-direction:column;

gap:20px;

max-width:700px;

margin-inline:auto;

}

.contact-form input,

.contact-form textarea{

background:#111;

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

padding:18px;

color:white;

font-size:16px;

}

.contact-form textarea{

height:180px;

resize:none;

}

.contact-form button{

padding:18px;

background:white;

border:none;

font-size:17px;

cursor:pointer;

}

/* FOOTER */

footer{

padding:80px 30px;

text-align:center;

}

.social{

margin:30px 0;

display:flex;

justify-content:center;

gap:25px;

}

.social a{

color:#888;

text-decoration:none;

transition:.4s;

}

.social a:hover{

color:white;

}



/* ==========================
CUSTOM CURSOR
========================== 

.cursor{

position:fixed;

width:18px;

height:18px;

border-radius:50%;

background:white;

pointer-events:none;

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

mix-blend-mode:difference;

z-index:999999;

transition:.08s;

}


/* ==========================
MOUSE GLOW
========================== 

.glow{

position:fixed;

width:350px;

height:350px;

background:radial-gradient(circle,
rgba(255,255,255,.12),
transparent 70%);

pointer-events:none;

border-radius:50%;

filter:blur(80px);

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

z-index:-1;

}


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

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

.hero-image{

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

}


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

.hero h1{

animation:fadeUp 1.2s;

}

.hero h2{

animation:fadeUp 1.6s;

}

.intro{

animation:fadeUp 2s;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}*/

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

.cursor{

position:fixed;

width:18px;

height:18px;

background:white;

border-radius:50%;

pointer-events:none;

mix-blend-mode:difference;

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

z-index:999999;

transition:transform .1s;

}


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

.hero-image{

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

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

100%{

transform:translateY(0);

}

}


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

.hero h1{

animation:fadeUp 1.2s ease;

}

.hero h2{

animation:fadeUp 1.6s ease;

}

.buttons{

animation:fadeUp 2s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/* ==========================
CARD GLOW
========================== */

.card:hover{

box-shadow:

0 0 35px rgba(255,255,255,.12);

}


/* ==========================
TECH GLOW
========================== */

.tech-grid div:hover{

box-shadow:

0 0 30px rgba(255,255,255,.10);

}


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

.btn{

box-shadow:

0 0 25px rgba(255,255,255,.2);

}

.cu {
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    position: fixed;
    border-radius: 50%;
    z-index: 9999999999!important;
    mix-blend-mode:difference;
    pointer-events:none;
    transform:translate(-43%,-43%);
    transition:transform .1s;
}