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

body{
font-family:'Poppins',sans-serif;
background:#050505;
color:white;
overflow-x:hidden;
}

/* BACKGROUND */

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:
radial-gradient(circle at top left,
rgba(255,0,0,0.08),
transparent 30%),
radial-gradient(circle at bottom right,
rgba(255,255,255,0.03),
transparent 25%),
#050505;
z-index:-1;
}

/* NAVBAR */

nav{
position:fixed;
top:0;
left:0;
width:100%;
height:90px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 6%;
z-index:1000;
background:rgba(0,0,0,0.35);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(255,255,255,0.05);
}

.logo img{
height:58px;
object-fit:contain;
}

/* NAV LINKS */

nav ul{
display:flex;
align-items:center;
gap:28px;
list-style:none;
}

nav ul li a{
color:white;
text-decoration:none;
font-size:15px;
font-weight:500;
transition:0.3s;
position:relative;
}

nav ul li a:hover{
color:#ff4d4d;
}

/* HAMBURGER */

.menu-toggle{
display:none;
width:34px;
height:26px;
flex-direction:column;
justify-content:space-between;
cursor:pointer;
z-index:1001;
}

.menu-toggle span{
height:3px;
width:100%;
background:white;
border-radius:10px;
transition:0.3s;
}

/* HERO SECTION */

.hero-layout{
min-height:100vh;
display:flex;
justify-content:space-between;
align-items:center;
padding:140px 6% 80px;
gap:60px;
}

/* LEFT SIDE */

.hero-left{
flex:1;
display:flex;
justify-content:center;
align-items:center;
}

.profile-image{
width:100%;
max-width:420px;
border-radius:30px;
object-fit:cover;
filter:
drop-shadow(0 0 30px rgba(255,0,0,0.15));
animation:float 4s ease-in-out infinite;
}

/* RIGHT SIDE */

.hero-right{
flex:1;
}

.intro-text{
font-size:15px;
opacity:0.7;
margin-bottom:20px;
letter-spacing:1px;
}

.hero-right h1{
font-size:72px;
line-height:0.95;
margin-bottom:25px;
font-weight:800;
text-transform:uppercase;
}

.typing{
height:40px;
font-size:28px;
font-weight:500;
color:#ff4d4d;
margin-bottom:25px;
}

.hero-description{
font-size:17px;
line-height:1.9;
opacity:0.78;
max-width:650px;
margin-bottom:35px;
}

/* BUTTONS */

.hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-bottom:35px;
}

.primary-btn,
.secondary-btn{
padding:15px 34px;
border-radius:50px;
text-decoration:none;
font-weight:600;
transition:0.35s;
display:inline-flex;
align-items:center;
justify-content:center;
}

.primary-btn{
background:#ff2a2a;
color:white;
box-shadow:0 0 25px rgba(255,0,0,0.3);
}

.primary-btn:hover{
transform:translateY(-5px);
background:#ff4040;
}

.secondary-btn{
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.08);
color:white;
}

.secondary-btn:hover{
transform:translateY(-5px);
background:rgba(255,255,255,0.15);
}

/* SOCIALS */

.social-row{
display:flex;
gap:18px;
margin-top:10px;
}

.social-row a{
width:54px;
height:54px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.06);
border-radius:18px;
backdrop-filter:blur(10px);
transition:0.35s;
}

.social-row a img{
width:24px;
height:24px;
object-fit:contain;
}

.social-row a:hover{
transform:translateY(-5px) scale(1.06);
background:rgba(255,0,0,0.12);
}

/* SKILLS */

.skills-preview{
padding:20px 6% 100px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:24px;
}

.skill-card{
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.06);
border-radius:30px;
padding:35px 25px;
text-align:center;
backdrop-filter:blur(12px);
transition:0.35s;
}

.skill-card:hover{
transform:translateY(-10px);
border-color:rgba(255,0,0,0.2);
box-shadow:0 10px 35px rgba(255,0,0,0.12);
}

.skill-card img{
width:58px;
height:58px;
object-fit:contain;
margin-bottom:20px;
}

.skill-card h3{
font-size:20px;
margin-bottom:12px;
}

.skill-card p{
font-size:16px;
color:#ff4d4d;
font-weight:600;
}

/* ANIMATIONS */

@keyframes float{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

/* MOBILE */

@media(max-width:992px){

.hero-layout{
flex-direction:column;
text-align:center;
padding-top:140px;
}

.hero-right{
display:flex;
flex-direction:column;
align-items:center;
}

.hero-right h1{
font-size:56px;
}

.hero-description{
max-width:100%;
}

.hero-buttons{
justify-content:center;
}

.social-row{
justify-content:center;
}

}

@media(max-width:768px){

.menu-toggle{
display:flex;
}

nav{
padding:0 20px;
}

nav ul{
position:absolute;
top:90px;
right:20px;
width:220px;
background:rgba(0,0,0,0.95);
border:1px solid rgba(255,255,255,0.08);
border-radius:24px;
padding:24px;
display:none;
flex-direction:column;
gap:20px;
backdrop-filter:blur(20px);
}

nav ul.show{
display:flex;
animation:menuFade 0.3s ease;
}

.hero-layout{
padding:130px 20px 60px;
gap:50px;
}

.profile-image{
max-width:320px;
}

.hero-right h1{
font-size:44px;
}

.typing{
font-size:22px;
}

.hero-description{
font-size:15px;
line-height:1.8;
}

.primary-btn,
.secondary-btn{
width:220px;
}

.skills-preview{
grid-template-columns:1fr 1fr;
padding:20px 20px 80px;
}

.skill-card{
padding:28px 18px;
}

}

@media(max-width:480px){

.hero-right h1{
font-size:38px;
}

.skills-preview{
grid-template-columns:1fr;
}

.logo img{
height:50px;
}

}

/* MENU ANIMATION */

@keyframes menuFade{

from{
opacity:0;
transform:translateY(-10px);
}

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

  }
/* CONTACT PAGE FIX */

.social-icons{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:22px;
margin-top:35px;
}

.icon-card{
width:72px;
height:72px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.06);
border-radius:22px;
overflow:hidden;
backdrop-filter:blur(12px);
transition:0.35s;
}

.icon-card img{
width:34px !important;
height:34px !important;
object-fit:contain;
}

.icon-card:hover{
transform:translateY(-6px) scale(1.08);
background:rgba(255,0,0,0.12);
  }