/* Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Roboto', sans-serif; }
body { line-height:1.6; scroll-behavior:smooth; }

/* Hero Section */
.hero { background:#f0f4f8; text-align:center; padding:80px 20px; }
.profile-pic { width:150px; height:150px; border-radius:50%; object-fit:cover; margin-bottom:20px; }
.hero h1 { font-size:2.5rem; margin-bottom:10px; }
.hero p { font-size:1.2rem; color:#555; margin-bottom:20px; }
.btn { display:inline-block; padding:10px 25px; margin:5px; background:#1e90ff; color:#fff; border-radius:25px; text-decoration:none; transition:0.3s; }
.btn:hover { background:#187bcd; }
.btn-secondary { background:#555; }
.btn-secondary:hover { background:#333; }

/* Container */
.container { max-width:1100px; margin:0 auto; padding:20px; }

/* Portfolio Grid */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:30px; }

/* Card */
.card { background:#fff; border-radius:10px; box-shadow:0 4px 6px rgba(0,0,0,0.1); padding:20px; text-align:center; transition: transform 0.3s, box-shadow 0.3s; }
.card:hover { transform: translateY(-10px) scale(1.03); box-shadow:0 8px 20px rgba(0,0,0,0.2); }
.card img { width:100%; border-radius:10px; margin-bottom:15px; }
.card h3 { margin-bottom:10px; }
.card p { color:#555; margin-bottom:15px; }

/* Sections */
section { padding:60px 20px; }
section h2 { text-align:center; margin-bottom:30px; font-size:2rem; color:#333; }

/* Skills Grid */
.skills-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:15px; }
.skill { background:#1e90ff; color:#fff; padding:10px 20px; border-radius:25px; }

/* Contact */
#contact p, #contact a { text-align:center; display:block; color:#333; margin:5px 0; text-decoration:none; }
.social a { margin:0 10px; color:#1e90ff; }
.social a:hover { text-decoration:underline; }