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

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
font-family:'Poppins',sans-serif;
}

body{
background:#eef2f7;
color:#333;
line-height:1.7;
}

/* ===== NAVBAR ===== */

nav{

position:fixed;

top:0;

left:0;

width:100%;

background:#111827;

padding:18px 0;

z-index:1000;

box-shadow:0 5px 15px rgba(0,0,0,.2);

text-align:center;

}

nav a{

color:white;

text-decoration:none;

margin:0 18px;

font-size:17px;

font-weight:600;

transition:.3s;

}

nav a:hover{

color:#60a5fa;

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

header{

height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:20px;

background:
linear-gradient(rgba(15,23,42,.75),rgba(15,23,42,.75)),
url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1600&q=80");

background-size:cover;

background-position:center;

background-attachment:fixed;

color:white;

}

.avatar{

width:150px;

height:150px;

border-radius:50%;

background:white;

display:flex;

justify-content:center;

align-items:center;

font-size:70px;

margin-bottom:25px;

box-shadow:0 10px 30px rgba(0,0,0,.35);

transition:.3s;

}

.avatar:hover{

transform:scale(1.08);

}

header h1{

font-size:50px;

margin-bottom:15px;

}

header p{

font-size:21px;

max-width:700px;

margin-bottom:30px;

}

.buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

justify-content:center;

}

.btn{

padding:14px 28px;

border-radius:8px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.linkedin{

background:#0A66C2;

color:white;

}

.github{

background:#24292e;

color:white;

}

.cv{

background:#16a34a;

color:white;

}

.btn:hover{

transform:translateY(-3px);

opacity:.9;

}
/* ===== CONTENT SECTIONS ===== */

.container{

max-width:1100px;

margin:auto;

padding:90px 20px;

}

.card{

background:white;

padding:35px;

margin-bottom:30px;

border-radius:15px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.card h2{

font-size:30px;

color:#2563eb;

margin-bottom:18px;

}

.card p{

font-size:17px;

color:#555;

}

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

.skills{

display:grid;

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

gap:18px;

margin-top:20px;

}

.skill{

background:#eff6ff;

padding:18px;

border-radius:10px;

text-align:center;

font-weight:600;

transition:.3s;

cursor:pointer;

}

.skill:hover{

background:#2563eb;

color:white;

transform:translateY(-5px);

}

/* ===== PROJECT ===== */

.project{

background:#f8fafc;

padding:22px;

border-left:6px solid #2563eb;

border-radius:10px;

margin-top:20px;

transition:.3s;

}

.project:hover{

transform:scale(1.02);

}

.project h3{

margin-bottom:10px;

color:#111827;

}

ul{

padding-left:22px;

}

ul li{

margin:12px 0;

}
/* ===== FOOTER ===== */

footer{

background:#111827;

color:white;

text-align:center;

padding:30px 20px;

font-size:15px;

margin-top:50px;

}

/* ===== LINKS ===== */

a{

transition:.3s;

}

a:hover{

opacity:.9;

}

/* ===== SCROLLBAR ===== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#e5e7eb;

}

::-webkit-scrollbar-thumb{

background:#2563eb;

border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

background:#1d4ed8;

}

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

@media(max-width:768px){

nav{

padding:15px;

}

nav a{

display:block;

margin:12px 0;

}

header{

padding:130px 20px 80px;

height:auto;

}

header h1{

font-size:36px;

}

header p{

font-size:18px;

}

.avatar{

width:120px;

height:120px;

font-size:55px;

}

.buttons{

flex-direction:column;

align-items:center;

}

.btn{

width:220px;

text-align:center;

}

.card{

padding:25px;

}

.card h2{

font-size:26px;

}

}

html{

scroll-padding-top:80px;

}
/* ===== DARK MODE BUTTON ===== */

.dark-btn{
position:absolute;
right:20px;
top:50%;
transform:translateY(-50%);
background:#2563eb;
color:white;
border:none;
padding:8px 14px;
border-radius:8px;
cursor:pointer;
font-size:18px;
transition:.3s;
}

.dark-btn:hover{
background:#1d4ed8;
}

/* ===== DARK MODE ===== */

body.dark{
background:#0f172a;
color:white;
}

body.dark .card{
background:#1e293b;
color:white;
}

body.dark .card p,
body.dark .project p,
body.dark li{
color:#e5e7eb;
}

body.dark .project{
background:#334155;
border-left:6px solid #60a5fa;
}

body.dark .skill{
background:#334155;
color:white;
}

body.dark .skill:hover{
background:#2563eb;
}

body.dark nav{
background:#020617;
}

body.dark footer{
background:#020617;
}

body.dark .card h2{
color:#60a5fa;
}
/* ===== AVATAR IMAGE ===== */

.avatar{
width:150px;
height:150px;
border-radius:50%;
overflow:hidden;
margin:0 auto 25px;
box-shadow:0 10px 30px rgba(0,0,0,.35);
transition:.3s;
}

.avatar:hover{
transform:scale(1.05);
}

.avatar img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}