/* Font + Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Poppins', sans-serif; }
body { background:#cad2c5; color:#2f3e46; line-height:1.6; }

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

/* Header / Hero Section */
header {
  background: url('hero-bg.jpg') no-repeat center center/cover;
  color: white;
  text-align: center;
  padding: 100px 20px;
  position: relative;
  border-radius: 0 0 50% 50% / 15%;
}

/* Dark overlay for readability */
header::before {
  content: "";
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.4);
  z-index:1;
  border-radius: 0 0 50% 50% / 15%;
}

/* Content above overlay */
header .container { position: relative; z-index:2; }
header h1 { font-size:3rem; font-weight:700; margin-bottom:15px; }
header p { font-size:1.2rem; margin-bottom:20px; }
header .btn { background:#52796f; color:white; padding:12px 25px; text-decoration:none; border-radius:30px; font-weight:600; transition:0.3s; }
header .btn:hover { background:#354f52; }

/* Sections */
section { padding:60px 0; }
section h2 { text-align:center; margin-bottom:40px; font-size:2.5rem; color:#354f52; }
section p { text-align:center; max-width:700px; margin:auto; margin-bottom:20px; }

/* Skills */
.skills { text-align:center; margin-top:20px; }
.skills span { display:inline-block; background:#84a98c; color:white; padding:7px 18px; margin:5px; border-radius:25px; font-weight:500; }

/* Projects */
.projects { display:flex; justify-content: space-around; flex-wrap:wrap; }
.project { background:#52796f; padding:15px; margin:15px; border-radius:15px; text-align:center; width:250px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s, background 0.3s;}
.project img { width:100%; border-radius:12px; margin-bottom:10px; }
.project h3 { margin:10px 0; color:#cad2c5; }
.project a { text-decoration:none; color:#cad2c5; font-weight:600; }
.project:hover { transform: translateY(-5px); background:#354f52; }

/* Services */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:20px; text-align:center; }
.service { background:#2f3e46; color:white; padding:25px; border-radius:15px; font-weight:600; transition:0.3s; }
.service:hover { background:#354f52; transform: translateY(-5px); }

/* Contact */
#contact p { text-align:center; margin-bottom:10px; }
#contact a { color:#52796f; text-decoration:none; font-weight:600; }
#contact a:hover { color:#354f52; }

/* Responsive */
@media(max-width:768px){
  header h1 { font-size:2rem; }
  section h2 { font-size:2rem; }
  .projects { flex-direction:column; align-items:center; }
}