/* ================= GENERAL RESET ================= */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background-color:#000000;
color:#ffffff;
font-family:'Arial',sans-serif;
line-height:1.6;
scroll-behavior:smooth;
overflow-x:hidden;
}

/* make images responsive */
img{
max-width:100%;
height:auto;
display:block;
}

/* ================= HEADER ================= */
header{
padding:20px 50px;
background:linear-gradient(to right,#e61919,#0000ff);
display:flex;
justify-content:space-between;
align-items:center;
position:sticky;
top:0;
z-index:1000;
border-bottom:3px solid #ffffff;
flex-wrap:wrap;
}

.logo{
font-size:32px;
font-weight:bold;
color:#ffffff;
text-shadow:2px 2px 4px rgba(0,0,0,0.5);
}


nav a{
color:#ffffff;
margin-left:20px;
font-weight:600;
transition:color 0.3s ease;
text-decoration:none;
}

nav a:hover{
color:#e61919;
}
header{
  flex-wrap: wrap;
}

nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:10px;
}

nav a{
  margin: 10px;
}

/* ================= SECTIONS ================= */
section{
  padding: 80px 8%;
text-align:center;
width:100%;
max-width:1200px;
margin:auto;
}

/* ================= HOME ================= */
.home{
position:relative;
}

.wlc{
font-size:60px;
color:#e61919;
animation:fadeIn 2s ease;
}

.hii{
font-size:35px;
margin-top:10px;
}

.typing-wrapper{
display:flex;
justify-content:center;
align-items:center;
height:100px;
}

.typing-container{
font-size:2rem;
font-weight:bold;
white-space:nowrap;
overflow:hidden;
display:inline-block;
min-width:250px;
border-right:3px solid #ffffff;
text-align:left;
animation:blink 0.7s infinite,webEffect 3s infinite;
}

/* cursor */
@keyframes blink{
0%,50%,100%{border-color:#ffffff;}
25%,75%{border-color:transparent;}
}

/* typing glow */
@keyframes webEffect{
0%{opacity:1;}
50%{opacity:.7;}
100%{opacity:1;}
}

/* buttons */
.btn-box{
margin-top:20px;
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:15px;
}

.btn1{
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
border-radius:50px;
background:#e61919;
border:none;
height:50px;
width:160px;
font-size:18px;
font-weight:bold;
margin:10px;
cursor:pointer;
transition:.4s;
box-shadow:0 6px 20px rgba(0,0,0,0.25);
color:#ffffff;
}

.btn1:hover{
background:#0000ff;
transform:scale(1.05);
}

/* ================= SPIDERMAN ================= */
.spidy{
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: -60px;
  margin-bottom: 40px;
  z-index: 10;
}

.spidy img{
  width: 120px;
  height: auto;
  animation: swing 3s ease-in-out infinite alternate;
  transform-origin: top center;
}

@keyframes swing{
  0%{ transform: rotate(-8deg); }
  100%{ transform: rotate(8deg); }
}

/* ================= ABOUT ================= */
.abt{
padding:80px 10%;
position:relative;
}

.abut{
font-size:45px;
color:#e61919;
margin-bottom:40px;
}

.hme{
max-width:900px;
margin:auto;
padding:40px;
border:2px solid #ffffff;
border-radius:20px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
line-height:1.8;
font-size:17px;
position:relative;
transition:.4s;
}

.hme::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(230,25,25,0.5),transparent);
transition:.6s;
}

.hme:hover{
transform:translateY(-8px);
box-shadow:0 0 25px #e61919;
}

.hme:hover::before{
left:100%;
}

/* ================= SKILLS ================= */
.skm{
font-size:45px;
color:#e61919;
margin-bottom:20px;
}

.sk{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:35px;
padding:60px 10%;
max-width:1000px;
margin:auto;
}

.skl{
border:2px solid #ffffff;
padding:30px 20px;
border-radius:20px;
font-size:18px;
font-weight:600;
letter-spacing:1px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
transition:.4s;
position:relative;
overflow:hidden;
}

.skl::before{
content:"";
position:absolute;
width:100%;
height:100%;
top:0;
left:-100%;
background:linear-gradient(120deg,transparent,rgba(230,25,25,0.6),transparent);
transition:.6s;
}

.skl:hover::before{
left:100%;
}

.skl:hover{
transform:translateY(-12px) scale(1.05);
box-shadow:0 0 25px #e61919;
}

/* ================= PROJECTS ================= */
.pj{
font-size:45px;
color:#e61919;
margin-bottom:50px;
}

.project-list{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:35px;
padding:0 10%;
}

.web{
border:2px solid #ffffff;
border-radius:20px;
overflow:hidden;
padding:20px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
transition:.4s;
position:relative;
}

.web img{
width:100%;
height:160px;
object-fit:cover;
border-radius:10px;
margin-bottom:15px;
}

.web:hover{
transform:translateY(-12px) scale(1.03);
box-shadow:0 0 25px #e61919;
}

.web::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(230,25,25,0.5),transparent);
transition:.6s;
}

.web:hover::before{
left:100%;
}

/* ================= BUTTON ================= */
.btn{
display:inline-block;
margin-top:15px;
padding:10px 18px;
font-size:14px;
font-weight:600;
color:#ffffff;
background:linear-gradient(135deg,#e61919,#0000ff);
text-decoration:none;
border-radius:8px;
transition:.3s;
box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.btn:hover{
transform:translateY(-3px);
box-shadow:0 8px 18px rgba(0,0,0,.2);
background:linear-gradient(135deg,#b81414,#0000cc);
}

/* ================= CONTACT ================= */
.cnt h2{
font-size:32px;
margin-bottom:15px;
color:#e61919;
}

.cnt a{
color:#e61919;
margin:0 10px;
transition:.3s;
}

.cnt a:hover{
color:#0000ff;
}

/* ================= FOOTER ================= */
footer{
background:#111827;
padding:20px;
text-align:center;
color:#ccc;
border-top:3px solid #ffffff;
}

footer a{
color:#e61919;
text-decoration:none;
}

footer a:hover{
color:#0000ff;
}

/* ================= ANIMATION ================= */
@keyframes fadeIn{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* ================= RESPONSIVE ================= */

/* tablet */
@media (max-width:1024px){

section{
padding:70px 30px;
}

.wlc{
font-size:48px;
}

.hii{
font-size:28px;
}

}

/* mobile */
@media (max-width:768px){

header{
padding:15px 20px;
flex-direction:column;
}

nav{
justify-content:center;
margin-top:10px;
}

nav a{
margin:8px;
font-size:14px;
}

.wlc{
font-size:36px;
}

.hii{
font-size:22px;
}

.typing-container{
font-size:1.4rem;
}

.btn1{
width:130px;
height:45px;
font-size:16px;
}


.spidy img{
width:90px;
}

.project-list{
padding:0 20px;
}

.sk{
padding:40px 20px;
}

}

/* small phones */
@media (max-width:480px){

.wlc{
font-size:28px;
}

.hii{
font-size:18px;
}

.typing-container{
font-size:1.2rem;
}

.spidy img{
width:80px;
}

}