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

html{
scroll-behavior:smooth;
}

body{
background:#090909;
color:white;
overflow-x:hidden;
font-family:Arial, sans-serif;
}

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

.hero{
height:100vh;
width:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

position:relative;

background:#090909;

}

.hey{
position:absolute;
top:80px;
font-size:3rem;
font-family:'Cinzel', serif;
font-weight:700;

letter-spacing:3px;

animation:fadeDown 1.5s ease;

}

.name{
font-family:'Cinzel', serif;
font-size:8rem;

letter-spacing:50px;

font-weight:500;

text-transform:uppercase;

cursor:pointer;

transform-origin:center;

animation:introStretch 2s ease-in-out;

transition:
    transform 0.5s ease,
    letter-spacing 0.5s ease;

}

.name:hover{
transform:scaleY(1.3);
letter-spacing:30px;
}

.scroll-indicator{
position:absolute;

bottom:40px;

font-size:1rem;

animation:bounce 2s infinite;

}

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

.intro{
min-height:100vh;

background:#000;

position:relative;

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

overflow:hidden;

padding:0 8%;

}

/* GOLD STRIPES */

.pattern{
position:absolute;

top:0;
right:0;

width:45%;
height:100%;

background:
repeating-linear-gradient(
    -35deg,
    rgba(3, 3, 3, 0.95) 0px,
    rgba(12, 12, 12, 0.95) 70px,
    transparent 70px,
    transparent 140px
);

opacity:.75;

filter:blur(3px);

}

/* CONTENT */

.intro-content{
position:relative;

z-index:10;

text-align:center;

max-width:1100px;

}

.intro-content h1{
font-size:5rem;

font-weight:700;

line-height:1.1;

margin-bottom:30px;

animation:fadeUp 1s ease;

}

.glow-orb{
    position:absolute;
    width:600px;
    height:600px;

    right:15%;
    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,255,255,0.12) 0%,
        rgba(255,255,255,0.05) 40%,
        transparent 70%
    );

    filter:blur(80px);

    animation:floatGlow 8s ease-in-out infinite;
}

@keyframes floatGlow{
    0%,100%{
        transform:translateY(-50%) translateX(0);
    }
    50%{
        transform:translateY(-50%) translateX(40px);
    }
}

.particles span{
    position:absolute;
    width:4px;
    height:4px;

    background:white;
    border-radius:50%;

    opacity:.4;

    animation:floatParticle 10s linear infinite;
}

.particles span:nth-child(1){
    left:15%;
    top:80%;
}

.particles span:nth-child(2){
    left:30%;
    top:60%;
}

.particles span:nth-child(3){
    left:70%;
    top:75%;
}

.particles span:nth-child(4){
    left:80%;
    top:50%;
}

.particles span:nth-child(5){
    left:55%;
    top:85%;
}

@keyframes floatParticle{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-150px);
    }
}

.intro-content p{
color:#bfbfbf;

font-size:1.2rem;

margin-bottom:40px;

}

/* SOCIAL LINKS WITH GOLDEN GLOW */

.socials {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
}

.socials a {
  text-decoration: none;
  color: white;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  position: relative;
  padding: 10px 20px;
  border: 1px solid #555;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}

/* HOVER STATE WITH GLOW EFFECT */
.socials a:hover {
  /* Color change to gold */
  color: #ffd700;
  
  /* Lift animation */
  transform: translateY(-5px);
  
  /* Golden border */
  border-color: #ffd700;
  
  /* Background with gold tint */
  background: rgba(255, 215, 0, 0.1);
  
  /* THE GOLDEN GLOW EFFECT */
  box-shadow: 
    0 0 10px rgba(255, 215, 0, 0.4),
    0 0 20px rgba(255, 215, 0, 0.3),
    0 0 40px rgba(255, 215, 0, 0.15),
    0 10px 30px rgba(255, 215, 0, 0.1);
}

/* ACTIVE STATE (when clicked) */
.socials a:active {
  transform: translateY(-3px);
}

/* FOCUS STATE (keyboard navigation) */
.socials a:focus {
  outline: none;
  color: #ffd700;
  border-color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
  box-shadow: 
    0 0 10px rgba(255, 215, 0, 0.4),
    0 0 20px rgba(255, 215, 0, 0.3),
    0 0 40px rgba(255, 215, 0, 0.15),
    0 10px 30px rgba(255, 215, 0, 0.1);
}

.learn-more{
background:none;

border:none;

color:white;

cursor:pointer;

font-size:1rem;

animation:bounce 2s infinite;

}
/* ==========================
   ABOUT SECTION
========================== */

.about{
    min-height:100vh;

    background:
    radial-gradient(circle at top,
    rgba(255,215,120,.08),
    transparent 40%),
    #080808;

    position:relative;

    overflow:hidden;

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

    padding:100px 8%;
}

.about-content{
    max-width:1200px;
    text-align:center;
    z-index:2;
}

.about h2{
    font-size:6rem;
    font-weight:800;
    color:#fff5cc;

    margin-bottom:40px;
}

.about-main{
    font-size:2rem;
    line-height:1.5;

    color:#e0e0e0;

    max-width:1000px;
    margin:auto;

    margin-bottom:40px;
}

.about-sub{
    font-size:1.2rem;
    color:#9e9e9e;

    max-width:900px;
    margin:auto;

    margin-bottom:80px;
}

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

.stats{
    display:flex;
    justify-content:space-evenly;
    align-items:flex-start;

    width:100%;

    margin-top:80px;

    gap:60px;

    flex-wrap:nowrap;
}

.stat-card{
    text-align:center;

    max-width:320px;

    padding:30px 20px;

    border-radius:20px;

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        background .4s ease;

    cursor:pointer;
}

.stat-card:hover{

    transform:translateY(-12px);

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

    box-shadow:
        0 0 20px rgba(255,255,255,0.08),
        0 0 40px rgba(255,255,255,0.04);
}

/* ICONS */

.stat-card h3{
    font-size:5rem;
    margin-bottom:20px;
}

/* Adaptability */

.stat-card:nth-child(1) h3{
    color:#ffb400;
}

/* Ideas & Innovation */

.stat-card:nth-child(2) h3{
    color:#a55eea;
}

/* Continuous Growth */

.stat-card:nth-child(3) h3{
    color:#2ed573;
}

.stat-card h4{
    font-size:1.8rem;
    color:white;
    margin-bottom:15px;
}

.stat-card p{
    color:#8c8c8c;
    line-height:1.6;
    font-size:1rem;
}

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

@media(max-width:768px){

    .stats{
        flex-direction:column;
        align-items:center;
        gap:50px;
    }

    .stat-card h3{
        font-size:4rem;
    }

    .stat-card h4{
        font-size:1.5rem;
    }

}

.projects{
    min-height:100vh;
    background:#080808;
    padding:120px 8%;
}

.projects-header{
    text-align:center;
    margin-bottom:80px;
}

.projects-header h2{
    font-size:5rem;
    color:#fff5cc;
    margin-bottom:15px;
}

.projects-header p{
    color:#9e9e9e;
}

.project-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
}

.project-card{
    background:#111;
    border:1px solid rgba(255,255,255,.08);
    border-radius:25px;
    padding:35px;
    text-align:center;
    transition:.4s;
}

.project-card:hover{
    transform:translateY(-10px);
    box-shadow:0 0 30px rgba(255,215,0,.15);
    border-color:rgba(255,215,0,.3);
}

.project-icon{
    font-size:4rem;
    margin-bottom:20px;
}

.project-card h3{
    font-size:2rem;
    margin-bottom:15px;
}

.project-card p{
    color:#bdbdbd;
    line-height:1.8;
    margin-bottom:25px;
}

.tags{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:25px;
}

.tags span{
    padding:8px 15px;
    border-radius:30px;
    border:1px solid rgba(255,215,0,.25);
    font-size:.9rem;
}

.project-btn{
    display:inline-block;
    padding:10px 20px;
    border-radius:10px;
    border:1px solid rgba(255,215,0,.3);
    color:white;
    text-decoration:none;
    transition:.3s;
}

.project-btn:hover{
    color:#ffd700;
    border-color:#ffd700;
    box-shadow:0 0 15px rgba(255,215,0,.3);
}
.projects-footer{
    width:100%;

    text-align:center;

    margin-top:60px;

    color:#8d8d8d;

    font-size:1.1rem;

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

    max-width:1400px;
    margin-left:auto;
    margin-right:auto;
}

.skills{
    min-height:100vh;
    background:#080808;
    padding:100px 8%;
}

.skills-header{
    text-align:center;
    margin-bottom:60px;
}

.skills-header h2{
    font-size:5rem;
    color:#fff5cc;
}

.skills-area{
    position:relative;
    width:100%;
    height:800px;
    max-width:1400px;
    margin:auto;
}

.skill-card{
    position:absolute;

    padding:18px 30px;

    border-radius:18px;

    background:#151515;

    color:white;

    font-size:1.1rem;
    font-weight:600;

    backdrop-filter:blur(10px);

    transition:.4s ease;

    cursor:pointer;
}

.skill-card:hover{
    transform:scale(1.1);
    box-shadow:0 0 25px rgba(255,215,0,.25);
}

/* Positions */

.python{top:35px;left:380px;}
.ml{top:180px;left:300px;}
.dl{top:80px;right:250px;}
.rl{top:300px;left:80px;}
.nlp{top:400px;left:420px;}

.cv{top:180px;right:100px;}

.tf{top:520px;left:200px;}
.pt{top:550px;right:300px;}

.streamlit{top:620px;right:40px;}

.github{top:120px;left:600px;}
.js{top:320px;left:650px;}
.next{top:580px;left:550px;}

.ai{top:30px;left:20px;}
.da{top:700px;left:100px;}
.opencv{top:100px;right:30px;}

.html{top:300px;right:220px;}

.css{top:420px;right:210px;}

.git{top:700px;right:250px;}
.vscode{top:750px;left:600px;}

/* Floating Animation */

.skill-card{
    position:absolute;

    padding:18px 30px;

    border-radius:18px;

    background:#151515;

    color:white;

    font-size:1.1rem;
    font-weight:600;

    backdrop-filter:blur(10px);

    transition:all .4s ease;

    cursor:pointer;
}

/* Different animation speeds */

.python{animation:float1 6s ease-in-out infinite;}
.ml{animation:float2 8s ease-in-out infinite;}
.dl{animation:float3 7s ease-in-out infinite;}
.rl{animation:float4 9s ease-in-out infinite;}
.nlp{animation:float5 5s ease-in-out infinite;}
.cv{animation:float6 10s ease-in-out infinite;}
.tf{animation:float7 7s ease-in-out infinite;}
.pt{animation:float8 6s ease-in-out infinite;}
.streamlit{animation:float9 8s ease-in-out infinite;}
.github{animation:float10 5s ease-in-out infinite;}
.js{animation:float11 9s ease-in-out infinite;}
.next{animation:float12 7s ease-in-out infinite;}
.ai{animation:float13 8s ease-in-out infinite;}
.da{animation:float14 7s ease-in-out infinite;}
.opencv{animation:float15 9s ease-in-out infinite;}
.html{animation:float16 6s ease-in-out infinite;}
.css{animation:float17 8s ease-in-out infinite;}
.git{animation:float18 7s ease-in-out infinite;}
.vscode{animation:float19 10s ease-in-out infinite;}

.skill-card i{
    margin-right:10px;
    font-size:1.2rem;
}

/* Official icon colors */

.python i{color:#3776AB;}
.html i{color:#E34F26;}
.css i{color:#1572B6;}
.js i{color:#F7DF1E;}
.git i{color:#F05032;}
.github i{color:#ffffff;}
.vscode i{color:#007ACC;}
.pt i{color:#EE4C2C;}
.tf i{color:#FF6F00;}
.streamlit i{color:#FF4B4B;}
.cv i{color:#2ED573;}
.nlp i{color:#A55EEA;}
.ml i{color:#FFB400;}
.ai i{color:#00D2D3;}
.da i{color:#FECA57;}
.rl i{color:#54A0FF;}
.opencv i{color:#5C6BC0;}
.next i{color:#ffffff;}
.dl i{color:#FF6B35;}

@keyframes float1{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(20px,-25px);}
}

@keyframes float2{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(-15px,20px);}
}

@keyframes float3{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(25px,15px);}
}

@keyframes float4{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(-25px,-20px);}
}

@keyframes float5{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(15px,-30px);}
}

@keyframes float6{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(-20px,25px);}
}

@keyframes float7{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(18px,-18px);}
}

@keyframes float8{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(-30px,10px);}
}

@keyframes float9{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(10px,-20px);}
}

@keyframes float10{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(-15px,-15px);}
}

@keyframes float11{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(30px,20px);}
}

@keyframes float12{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(-20px,30px);}
}
@keyframes float13{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(25px,-20px);}
}

@keyframes float14{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(-20px,25px);}
}

@keyframes float15{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(15px,-30px);}
}

@keyframes float16{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(30px,15px);}
}

@keyframes float17{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(-25px,-15px);}
}

@keyframes float18{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(20px,20px);}
}

@keyframes float19{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(-30px,10px);}
}
@keyframes floatSkill{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-15px);
    }
}
.ai:hover{
    box-shadow:0 0 30px #00d2d3;
    border-color:#00d2d3;
}

.ml:hover{
    box-shadow:0 0 30px #ffb400;
    border-color:#ffb400;
}

.dl:hover{
    box-shadow:0 0 30px #ff6b35;
    border-color:#ff6b35;
}

.rl:hover{
    box-shadow:0 0 30px #54a0ff;
    border-color:#54a0ff;
}

.nlp:hover{
    box-shadow:0 0 30px #a55eea;
    border-color:#a55eea;
}

.cv:hover{
    box-shadow:0 0 30px #2ed573;
    border-color:#2ed573;
}

.da:hover{
    box-shadow:0 0 30px #feca57;
    border-color:#feca57;
}

.python:hover{
    box-shadow:0 0 30px #3776ab;
    border-color:#3776ab;
}

.tf:hover{
    box-shadow:0 0 30px #ff6f00;
    border-color:#ff6f00;
}

.pt:hover{
    box-shadow:0 0 30px #ee4c2c;
    border-color:#ee4c2c;
}

.opencv:hover{
    box-shadow:0 0 30px #5c6bc0;
    border-color:#5c6bc0;
}

.streamlit:hover{
    box-shadow:0 0 30px #ff4b4b;
    border-color:#ff4b4b;
}

.html:hover{
    box-shadow:0 0 30px #e34f26;
    border-color:#e34f26;
}

.css:hover{
    box-shadow:0 0 30px #1572b6;
    border-color:#1572b6;
}

.js:hover{
    box-shadow:0 0 30px #f7df1e;
    border-color:#f7df1e;
}

.next:hover{
    box-shadow:0 0 30px #ffffff;
    border-color:#ffffff;
}

.git:hover{
    box-shadow:0 0 30px #f05032;
    border-color:#f05032;
}

.github:hover{
    box-shadow:0 0 30px #ffffff;
    border-color:#ffffff;
}

.vscode:hover{
    box-shadow:0 0 30px #007acc;
    border-color:#007acc;
}
.skills-disclaimer{
    text-align:center;

    margin-top:60px;

    color:#7a7a7a;

    font-size:1rem;

    font-style:italic;

    max-width:800px;

    margin-left:auto;
    margin-right:auto;

    line-height:1.6;

    opacity:.8;
}

/* ==========================
   DEVELOPER OS SECTION
========================== */

.os-section{

    min-height:100vh;

    background:#050505;

    padding:100px 8%;

    position:relative;

    overflow:hidden;
}

/* Header */

.os-header{

    text-align:center;

    margin-bottom:80px;
}

.os-header h2{

    font-size:5rem;

    color:#fff5cc;
}

.os-header p{

    color:#888;

    margin-top:10px;

    font-size:1.1rem;
}

/* Grid */

.os-container{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:30px;
}

/* ==========================
   FLIP CARD
========================== */

.flip-card{

    background:transparent;

    width:100%;

    height:240px;

    perspective:1000px;
}

.flip-card-inner{

    position:relative;

    width:100%;
    height:100%;

    transition:transform .8s;

    transform-style:preserve-3d;
}

.flip-card:hover .flip-card-inner{

    transform:rotateY(180deg);
}

/* FRONT + BACK */

.flip-card-front,
.flip-card-back{

    position:absolute;

    width:100%;
    height:100%;

    border-radius:20px;

    backface-visibility:hidden;

    display:flex;

    flex-direction:column;

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

    padding:30px;

    overflow:hidden;
}

/* FRONT */

.flip-card-front{

    background:#101010;

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

    box-shadow:
    0 0 20px rgba(255,215,0,.08);
}

/* Shine Effect */

.flip-card-front::before{

    content:"";

    position:absolute;

    top:-100%;
    left:-100%;

    width:200%;
    height:200%;

    background:
    linear-gradient(
        45deg,
        transparent,
        rgba(255,215,0,.08),
        transparent
    );

    transition:.8s;
}

.flip-card:hover .flip-card-front::before{

    top:100%;
    left:100%;
}

/* BACK */

.flip-card-back{

    background:
    linear-gradient(
        135deg,
        #151515,
        #0d0d0d
    );

    border:1px solid #ffd700;

    color:#fff5cc;

    text-align:center;

    transform:rotateY(180deg);

    box-shadow:
    0 0 30px rgba(255,215,0,.2);
}

.flip-card-front h3{

    font-size:2rem;
}

.flip-card-back p{

    line-height:1.8;

    font-size:1rem;
}

/* Label */

.label{

    display:block;

    color:#ffd700;

    font-size:.8rem;

    letter-spacing:2px;

    margin-bottom:15px;
}

/* Footer */

.os-footer{

    text-align:center;

    margin-top:70px;

    color:#777;

    font-family:monospace;

    font-size:1rem;
}

/* Glow Background */

.os-section::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:-150px;
    right:-100px;

    border-radius:50%;

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

    filter:blur(80px);
}

.os-section::after{

    content:"";

    position:absolute;

    width:400px;
    height:400px;

    bottom:-100px;
    left:-100px;

    border-radius:50%;

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

    filter:blur(80px);
}

/* Mobile */

@media(max-width:768px){

    .os-header h2{

        font-size:3rem;
    }

    .flip-card{

        height:220px;
    }
}


/* Floating Particles */

.particles span{
    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    opacity:.7;

    animation:floatStars 15s linear infinite;
}

.particles span:nth-child(1){
    top:10%;
    left:15%;
    background:#ffb400;
}

.particles span:nth-child(2){
    top:25%;
    left:70%;
    background:#2ed573;
}

.particles span:nth-child(3){
    top:80%;
    left:10%;
    background:#a55eea;
}

.particles span:nth-child(4){
    top:60%;
    left:85%;
    background:#00d2d3;
}

.particles span:nth-child(5){
    top:40%;
    left:25%;
    background:#ffb400;
}

.particles span:nth-child(6){
    top:90%;
    left:60%;
    background:#2ed573;
}

.particles span:nth-child(7){
    top:15%;
    left:50%;
    background:#a55eea;
}

.particles span:nth-child(8){
    top:70%;
    left:75%;
    background:#ffb400;
}

@keyframes floatStars{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-30px);
    }

    100%{
        transform:translateY(0);
    }
}

/* ==========================
   ACHIEVEMENTS
========================== */

.achievements{
    min-height:100vh;
    background:#050505;
    padding:100px 8%;
}

.achievement-header{
    text-align:center;
    margin-bottom:80px;
}

.achievement-header h2{
    font-size:5rem;
    color:#fff5cc;
}

.achievement-header p{
    color:#888;
    margin-top:10px;
}

/* Grid */

.achievement-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:60px;
}

/* Stack */

.glass-stack{
    position:relative;
    height:280px;
}

.stack{
    position:absolute;
    inset:0;

    border-radius:28px;

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

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

    border:1px solid rgba(255,255,255,0.04);
}

.layer1{
    transform:translate(12px,-12px);
    opacity:.35;
}

.layer2{
    transform:translate(24px,-24px);
    opacity:.20;
}

.layer3{
    transform:translate(36px,-36px);
    opacity:.12;
}

/* Main Card */

.achievement-card{
    position:absolute;
    inset:0;

    z-index:10;

    padding:30px;

    border-radius:28px;

    /* APPLE GLASS EFFECT */

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

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

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

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.15),
        0 8px 32px rgba(0,0,0,0.25);

    transition:all .4s ease;

    overflow:hidden;
}

.achievement-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.12),
            transparent 30%
        );

    pointer-events:none;
}
.achievement-card::before{
    content:"";

    position:absolute;

    top:-100%;
    left:-100%;

    width:200%;
    height:200%;

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

    transition:.8s;
}

.achievement-card:hover::before{
    top:100%;
    left:100%;
}

.achievement-card:hover{

    transform:
        translateY(-12px)
        scale(1.02);

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

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.25),
        0 0 30px rgba(255,255,255,0.08),
        0 0 60px rgba(255,255,255,0.05);
}

.icon{

    width:70px;
    height:70px;

    border-radius:50%;

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

    font-size:2rem;

    margin-bottom:20px;

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

    backdrop-filter:blur(20px);

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

    box-shadow:
        0 0 20px rgba(255,255,255,0.04);
}

.achievements{
    min-height:100vh;

    padding:120px 8%;

    position:relative;

    overflow:hidden;

    background:#050505;
}

.achievements::before{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    top:-200px;
    left:-100px;

    border-radius:50%;

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

    filter:blur(100px);
}

.achievements::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    bottom:-150px;
    right:-100px;

    border-radius:50%;

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

    filter:blur(100px);
}
.achievement-card h3{

    font-size:1.6rem;

    margin-bottom:15px;
}

.achievement-card p{

    color:#bdbdbd;

    line-height:1.7;
}

.achievement-card span{

    position:absolute;

    top:25px;
    right:25px;

    color:#888;

    font-size:1rem;
}

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

.contact{
    min-height:100vh;

    position:relative;

    overflow:hidden;

    background:#050505;

    padding:120px 8%;
}

/* Aurora */

.aurora{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.25;
}

.aurora1{

    width:500px;
    height:500px;

    background:#00d2ff;

    top:10%;
    left:-150px;

    animation:floatGlow 10s ease-in-out infinite;
}

.aurora2{

    width:450px;
    height:450px;

    background:#a855f7;

    bottom:0;
    right:-100px;

    animation:floatGlow 12s ease-in-out infinite reverse;
}

/* Grid */

.grid{

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.03) 1px,
            transparent 1px
        );

    background-size:50px 50px;

    mask-image:
    radial-gradient(
        circle at center,
        white 20%,
        transparent 90%
    );

    opacity:.4;
}

@keyframes floatGlow{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-50px);
    }
}
.contact-card{

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

    backdrop-filter:blur(20px);

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

    border-radius:25px;

    transition:.4s;
}

.contact-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 0 30px rgba(255,255,255,.08);
}
/* ==========================
ANIMATIONS
========================== */

@keyframes fadeDown{
from{
    opacity:0;
    transform:translateY(-40px);
}

to{
    opacity:1;
    transform:translateY(0);
}

}

@keyframes fadeUp{
from{
    opacity:0;
    transform:translateY(40px);
}

to{
    opacity:1;
    transform:translateY(0);
}

}

@keyframes bounce{
0%,100%{
    transform:translateY(0);
}

50%{
    transform:translateY(10px);
}


}

@keyframes introStretch{
0%{
    opacity:0;
    transform:scaleY(0.5);
}

40%{
    opacity:1;
    transform:scaleY(1.8);
}

100%{
    transform:scaleY(1);
}


}

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

.contact{
    min-height:100vh;
    background:#050505;
    position:relative;
    overflow:hidden;

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

    padding:120px 8%;
}

/* CONTENT */

.contact-content{
    position:relative;
    z-index:10;

    width:100%;
    max-width:1400px;

    text-align:center;
}

.contact h2{
    font-size:5rem;
    color:#fff5cc;

    margin-bottom:20px;
}

.contact-subtitle{
    color:#9c9c9c;
    font-size:1.2rem;

    margin-bottom:80px;
}

/* CARDS */

.contact-cards{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
}

/* FLIP CARD */

.contact-flip-card{
    width:350px;
    height:260px;

    perspective:1000px;
}

.contact-flip-inner{
    width:100%;
    height:100%;

    position:relative;

    transform-style:preserve-3d;

    transition:transform .8s;
}

.contact-flip-card:hover .contact-flip-inner{
    transform:rotateY(180deg);
}

/* FRONT & BACK */

.contact-front,
.contact-back{

    position:absolute;

    width:100%;
    height:100%;

    border-radius:25px;

    backface-visibility:hidden;

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

    text-align:center;

    padding:30px;

    overflow:hidden;
}

/* FRONT */

.contact-front{

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

    backdrop-filter:blur(25px);

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

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

    transition:.4s;
}

/* BACK */

.contact-back{

    transform:rotateY(180deg);

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

    backdrop-filter:blur(25px);

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

/* ICONS */

.contact-front i{

    font-size:3.5rem;

    margin-bottom:20px;
}

.github-front i{
    color:white;
}

.linkedin-front i{
    color:#0A66C2;
}

.email-front i{
    color:#FFD700;
}

/* TEXT */

.contact-front h3,
.contact-back h3{
    margin-bottom:15px;
}

.contact-front p,
.contact-back p{
    color:#bdbdbd;
    line-height:1.6;
}

/* LINKS */

.contact-back a{

    margin-top:15px;

    color:#fff5cc;

    text-decoration:none;

    transition:.3s;
}

.contact-back a:hover{
    color:#ffd700;
}

/* FOOTER */

.contact-footer{

    margin-top:80px;

    color:#7f7f7f;

    font-size:1rem;
}

/* AURORA */

.aurora{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.15;
}

.aurora1{
    width:500px;
    height:500px;

    background:#00d2ff;

    top:-100px;
    left:-150px;
}

.aurora2{
    width:500px;
    height:500px;

    background:#a855f7;

    bottom:-100px;
    right:-150px;
}

/* MOBILE */

@media(max-width:768px){

    .contact h2{
        font-size:3rem;
    }

    .contact-flip-card{
        width:100%;
        max-width:350px;
    }
}
/* ==========================
   MOUSE SPOTLIGHT EFFECT
========================== */

.spotlight{
    position:fixed;

    width:300px;
    height:300px;

    border-radius:50%;

    left:0;
    top:0;

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

    pointer-events:none;

    background:radial-gradient(
        circle,
        rgba(255,255,255,0.15) 0%,
        rgba(255,255,255,0.08) 30%,
        transparent 70%
    );

    filter:blur(40px);

    z-index:9999;
}

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

@media(max-width:768px){
.hey{
    font-size:2rem;
}

.name{
    font-size:4rem;
    letter-spacing:8px;
    text-align:center;
}

.intro-content h1{
    font-size:2.5rem;
}

.intro-content p{
    font-size:1rem;
}

.socials{
    gap:20px;
}

.pattern{
    width:70%;
}

}