body{

background: black;
color:white;
font-family:'Times New Roman', Times, serif;

margin: 40px;

display:flex;
flex-direction:column;

align-items:center;

padding-right:0px;

}

/* name */

h1{

font-size:80px;

}

/* highlight name */

span{

color:orange;

}

.badge{

display:inline-block;

background:black;

color:white;

padding:6px 14px;

border-radius:20px;

font-size:14px;

margin-top:10px;

border:1px solid white;

}

.tech span{

border:1px solid orange;

padding:6px 14px;

border-radius:20px;

font-size:14px;

display:inline-block;

margin-right:6px;

}

.about{

max-width:600px;
text-align:left;
color:white;

margin-top:20px;
line-height:1.6;

}

.hero{

display:flex;
flex-direction:row-reverse;
justify-content:space-between;
align-items:center;
padding:80px;

}

.hero-left{
margin-right:auto;
}

/* image */

.profile{

width:550px;

border-radius:80px;

border:2px orange;

display:block;

margin-top:40px;

}

/* subtitle */

p{

font-size:18px;
color:#94a3b8;

}

.tech-title{

width:100%;

text-align:center;

margin-top:80px;

font-size: 40px;

}

/* ✅ FIXED PART */

.tech-grid{

display:grid;

grid-template-columns:repeat(3,200px);

gap:30px;

margin-top:40px;

justify-content:center;

}

/* tech cards */

.tech-card{

background:#0d0d0d;

padding:30px;

border-radius:15px;

text-align:center;

border:1px solid #222;

transition:0.3s;

}

.tech-card:hover{

transform:translateY(-8px);

border:1px solid orange;

}

.tech-card i{

font-size:40px;

color:orange;

margin-bottom:10px;

}

.tech-card p{

font-size:14px;

color:#9ca3af;

}

/* icons section */

.icons{

display:flex;
gap:20px;
margin-top:40px;

}

/* icon style */

.icons i{

font-size:60px;
color:orange;

background: black;

padding: 10px;

border-radius:20px;

transition:0.3s;

}

/* hover effect */

.icons i:hover{

transform:scale(1.4);

background:black;

cursor:pointer;

}

.projects-title{

margin-top:80px;
font-size:40px;

width:100%;

text-align:center;

padding-left:200px;
padding-right: 200px;

}

/* projects grid */

.projects{

display:grid;                 
grid-template-columns:repeat(2,1fr);
gap:40px;
margin-top:30px;

}

/* project card */

.card{

background:black;
padding:50px;
border-radius:10px;

width:80%;                

border:1px solid orange;

transition:0.3s;

}

/* hover effect */

.card:hover{

transform:scale(1.05);
background:black;

}

/* contact section */

.contact{

width:100%;

margin-top:100px;

text-align:center;

}

/* title */

.contact-title{

font-size:50px;

margin-bottom:10px;

}

/* subtitle */

.contact-subtitle{

color:#94a3b8;

margin-bottom:50px;

}

/* form box */

.contact-box{

display:flex;

justify-content:center;

}

/* contact form card */

.contact-box form{

background:#0d0d0d;

padding:40px;

border-radius:20px;

width:600px;

display:flex;

flex-direction:column;

gap:20px;

border:1px solid #222;

}

/* input fields */

.contact-box input,
.contact-box textarea{

background:#111;

border:1px solid #222;

padding:14px;

border-radius:10px;

color:white;

font-size:16px;

outline:none;

}

/* textarea height */

.contact-box textarea{

min-height:120px;

resize:none;

}

/* labels */

.contact-box label{

font-size:14px;

color:#cbd5e1;

}

/* send button */

.contact-box button{

background:orange;

color:black;

border:none;

padding:14px;

font-size:16px;

border-radius:10px;

cursor:pointer;

font-weight:bold;

transition:0.3s;

}

/* hover effect */

.contact-box button:hover{

background:#ff8c00;

transform:scale(1.05);

}