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

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

html{
    scroll-behavior:smooth;
}

body{
    background:#09090B;
    color:#fff;
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
}

/* ===========================
   BACKGROUND GLOW
=========================== */

body::before{
    content:"";
    position:fixed;
    width:700px;
    height:700px;
    right:-250px;
    top:-250px;
    background:radial-gradient(circle,#A4161A,transparent 70%);
    filter:blur(170px);
    opacity:.15;
    z-index:-2;
}

body::after{
    content:"";
    position:fixed;
    width:600px;
    height:600px;
    left:-250px;
    bottom:-250px;
    background:radial-gradient(circle,#7F1D1D,transparent 70%);
    filter:blur(170px);
    opacity:.12;
    z-index:-2;
}

/* ===========================
   HEADER
=========================== */

header{

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    width:90%;

    max-width:1350px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 40px;

    background:rgba(15,15,18,.65);

    backdrop-filter:blur(18px);

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

    border-radius:18px;

    z-index:1000;

}

/* ===========================
   LOGO
=========================== */

.logo{

    font-size:34px;

    font-weight:800;

    font-family:'Space Grotesk',sans-serif;

    color:#C1121F;

    letter-spacing:2px;

}

/* ===========================
   NAV
=========================== */

nav{

    display:flex;

    gap:40px;

}

nav a{

    text-decoration:none;

    color:white;

    font-weight:600;

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#C1121F;

    transition:.35s;

}

nav a:hover::after{

    width:100%;

}

nav a:hover{

    color:#C1121F;

}

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

.hero{

    min-height:100vh;

    display:flex;

    justify-content:space-between;

    align-items:center;

    max-width:1350px;

    margin:auto;

    padding:120px 40px 40px;

}

/* ===========================
   LEFT
=========================== */

.left{

    width:55%;

}

.hello{

    color:#C1121F;

    font-size:28px;

    font-weight:700;

}

h1{
width:360px;
    margin-top:20px;

    font-family:'Space Grotesk',sans-serif;

    font-size:100px;

    line-height:92px;

}

h1 span{

    color:#C1121F;

}

h2{

    margin-top:20px;

    font-size:60px;

    color:#8D99AE;

}

p{

    margin-top:30px;

    width:70%;

    color:#B0B0B0;

    line-height:35px;

    font-size:20px;

}

button{

    margin-top:40px;

    padding:18px 40px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    color:white;

    font-size:17px;

    background:linear-gradient(90deg,#8B0000,#C1121F);

    transition:.35s;

    box-shadow:0 0 25px rgba(193,18,31,.3);

    font-weight:700;
letter-spacing:.5px;

}

button:hover{

    transform:translateY(-6px);

    box-shadow:0 0 45px rgba(193,18,31,.6);

}

/* ===========================
   PHOTO
=========================== */

.right{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-right:40px;

}

.photo{

    width:430px;

    height:430px;

    border-radius:50%;

    border:4px solid #C1121F;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:90px;

    font-weight:800;

    font-family:'Space Grotesk',sans-serif;

    box-shadow:
    0 0 50px rgba(193,18,31,.25),
    inset 0 0 35px rgba(193,18,31,.15);

    overflow:hidden;
cursor:pointer;

}

.photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:50%;

}

/* ===========================
   Typing Animation
=========================== */

#typing{

transition:.35s;

}


/* ===========================
   Mouse Glow
=========================== */

.mouse-glow{

position:fixed;

width:320px;

height:320px;

border-radius:50%;

background:radial-gradient(circle,
rgba(193,18,31,.22),
transparent 70%);

pointer-events:none;

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

z-index:-1;

filter:blur(40px);

transition:left .08s linear,
top .08s linear;

}


/* ===========================
   Photo Hover
=========================== */

.photo{

transition:.45s;

}

.photo:hover{

transform:scale(1.05) rotate(2deg);

box-shadow:

0 0 90px rgba(193,18,31,.45),

inset 0 0 45px rgba(193,18,31,.20);

}


/* ===========================
   Rotating Ring
=========================== */

/* ===========================
   Scroll Indicator
=========================== */

.scroll-indicator{

position:absolute;

left:50%;

bottom:40px;

transform:translateX(-50%);

width:28px;

height:50px;

border:2px solid rgba(255,255,255,.25);

border-radius:30px;

display:flex;

justify-content:center;

padding-top:8px;

}

.scroll-indicator span{

width:6px;

height:6px;

background:#C1121F;

border-radius:50%;

animation:scrollDown 2s infinite;

}

@keyframes scrollDown{

0%{

transform:translateY(0);

opacity:1;

}

100%{

transform:translateY(18px);

opacity:0;

}

}

/* ===========================
   ABOUT
=========================== */

.about{

max-width:1350px;

margin:auto;

padding:140px 40px;

}

.about-title{

text-align:center;

margin-bottom:80px;

}

.about-title span{

color:#C1121F;

font-weight:700;

letter-spacing:3px;

}

.about-title h2{

font-size:54px;

margin:20px 0;

color:white;

}

.about-title p{

width:700px;

max-width:100%;

margin:auto;

line-height:35px;

font-size:19px;

color:#A8A8A8;

}

.about-grid{

display:grid;

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

gap:30px;

}

.card{

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

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

border-radius:20px;

padding:35px;

transition:.35s;

backdrop-filter:blur(15px);

}

.card:hover{

transform:translateY(-12px);

border-color:#C1121F;

box-shadow:0 0 35px rgba(193,18,31,.18);

}

.card h3{

font-size:28px;

margin-bottom:20px;

}

.card p{

width:100%;

margin:0;

font-size:18px;

line-height:32px;

color:#B8B8B8;

}

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

.skills{

max-width:1200px;

margin:auto;

padding:140px 40px;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

color:#C1121F;

letter-spacing:3px;

font-weight:700;

}

.section-title h2{

font-size:55px;

margin-top:20px;

}

.skills-wrapper{

display:grid;

gap:35px;

}

.skill-top{

display:flex;

justify-content:space-between;

margin-bottom:14px;

font-size:20px;

font-weight:600;

}

.progress{

height:14px;

background:#1C1C1F;

border-radius:20px;

overflow:hidden;

}

.progress-fill{

height:100%;

border-radius:20px;

background:linear-gradient(90deg,#8B0000,#D00000);

box-shadow:0 0 20px rgba(193,18,31,.45);

animation:grow 2s ease;

}

.w95{

width:95%;

}

.w82{

width:82%;

}

.w88{

width:88%;

}

.w78{

width:78%;

}

@keyframes grow{

from{

width:0;

}

}

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

.projects{

max-width:1300px;

margin:auto;

padding:140px 40px;

}

.projects-grid{

display:grid;

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

gap:30px;

}

.project-card{

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

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

border-radius:22px;

overflow:hidden;

transition:.35s;

cursor:pointer;

transform-style:preserve-3d;

will-change:transform;

}

.project-card:hover{

transform:translateY(-12px);

border-color:#C1121F;

box-shadow:0 0 35px rgba(193,18,31,.18);

}

.project-image{

height:220px;

background:linear-gradient(135deg,#8B0000,#1A1A1A);

display:flex;

justify-content:center;

align-items:center;

font-size:70px;

font-weight:800;

font-family:'Space Grotesk',sans-serif;

color:white;

}

.project-card h3{

padding:25px 25px 10px;

font-size:30px;

}

.project-card p{

padding:0 25px;

width:100%;

line-height:32px;

font-size:17px;

}

.tags{

display:flex;

gap:10px;

padding:25px;

flex-wrap:wrap;

}

.tags span{

background:#1D1D22;

padding:8px 16px;

border-radius:30px;

font-size:14px;

color:#ddd;

}

.buttons{

display:flex;

gap:15px;

padding:0 25px 30px;

}

.buttons a{

text-decoration:none;

padding:12px 24px;

border-radius:10px;

background:#C1121F;

color:white;

font-weight:600;

transition:.3s;

}

.buttons a:hover{

transform:translateY(-4px);

background:#D00000;

}