* {box-sizing:border-box; margin:0; padding:0;}
body {font-family:'Poppins',sans-serif; line-height:1.6; background:#f4f6f9; color:#333;}
a {text-decoration:none; color:#0077cc;}
a:hover {color:#005fa3;}
.container {max-width:1000px; margin:auto; padding:15px;}

/* Header */
.sticky-header {position:sticky; top:0; background:white; box-shadow:0 2px 6px rgba(0,0,0,0.1); z-index:1000;}
.header-container {display:flex; justify-content:space-between; align-items:center; padding:10px 0; flex-wrap:wrap;}
.header-container h1 {font-size:1.6em; color:#0077cc;}
.header-container p {color:#555; font-size:0.95em;}
header nav a {margin-left:15px; font-weight:500;}

/* Sections */
.section {padding:40px 0;}
.section h2 {text-align:center; font-size:1.8em; margin-bottom:30px; color:#0077cc;}

/* About */
.about-container {display:flex; gap:20px; align-items:center; flex-wrap:wrap;}
.about-container .avatar img {width:180px; border-radius:50%; box-shadow:0 4px 10px rgba(0,0,0,0.2);}
.about-info p {margin-bottom:10px; font-size:0.95em;}
.personal-info {list-style:none; margin-top:15px;}
.personal-info li {margin-bottom:6px; font-size:0.9em;}
.personal-info li i {margin-right:8px; color:#0077cc;}

/* Skills */
.skills-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(100px,1fr)); gap:15px;}
.skill-card {background:white; padding:18px; text-align:center; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,0.1); transition:transform 0.3s, box-shadow 0.3s;}
.skill-card i, .skill-card .docker-icon {font-size:1.8em; margin-bottom:8px; color:#0077cc; max-width:40px; height:auto;}
.skill-card:hover {transform:translateY(-3px); box-shadow:0 6px 15px rgba(0,0,0,0.15);}
.skill-card p {margin-top:5px; font-weight:600; font-size:0.9em; word-wrap:break-word;}
.docker-icon {
    width:40px;
    height:40px;
    margin-bottom:8px;
}

/* Experience */
.experience .card {background:white; padding:20px; border-radius:10px; margin-bottom:15px; box-shadow:0 4px 12px rgba(0,0,0,0.1);}
.experience .card h3 {color:#0077cc; margin-bottom:5px; font-size:1em; word-wrap:break-word;}
.experience .card span {font-size:0.85em; color:#555; display:block; margin-bottom:8px;}
.experience .card ul {margin-left:18px; list-style:disc; font-size:0.9em;}

/* Projects */
.projects-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:15px;}
.project-card {position:relative; border-radius:10px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.1);}
.project-card img {width:100%; max-height:180px; object-fit:cover; transition:transform 0.3s;}
.project-card:hover img {transform:scale(1.05);}
.project-card .overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); color:white; opacity:0; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:15px; text-align:center; transition:opacity 0.3s;}
.project-card:hover .overlay {opacity:1;}
.project-card .overlay h3 {margin-bottom:5px; font-size:1.1em;}
.project-card .overlay p {font-size:0.8em;}

/* Contact */
.contact form {display:flex; flex-direction:column; gap:12px; max-width:500px; margin:auto;}
.contact input, .contact textarea {padding:10px; border-radius:6px; border:1px solid #ccc; font-size:0.95em;}
.contact button {padding:10px; border:none; border-radius:6px; font-size:1em; font-weight:600; cursor:pointer; background:linear-gradient(45deg,#0077cc,#00bfff); color:white; transition:background 0.3s;}
.contact button:hover {background:linear-gradient(45deg,#005fa3,#0077cc);}

/* Footer */
footer {text-align:center; padding:15px; background:#222; color:white; font-size:0.9em;}

/* Responsive */
@media (max-width:768px){
    .about-container {flex-direction:column; align-items:center;}
    header nav a {margin-left:10px; margin-top:8px; display:inline-block;}
    .skills-grid {grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:10px;}
    .projects-grid {grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px;}
}