.hero {
  background: url('/images/services-bg.jpg') center/cover no-repeat;
  color: #fff;
  padding: 80px 20px;
  text-align: center;
}
.hero h2 { font-size: 2.4rem; margin-bottom: 10px; }
.hero p { font-size: 1.05rem; max-width: 900px; margin: 0 auto; }

.container { max-width: 1200px; margin: 40px auto; padding: 0 20px; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

/* Restrict image height and make it responsive */
.service-image img {
  width: 100%;
  max-height: 350px;   /* keeps it neat */
  object-fit: cover;   /* crop nicely instead of stretching */
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.service-text h2 { color: #333; font-size: 1.6rem; margin-bottom: 12px; }
.service-text p { color: #555; line-height: 1.6; margin-bottom: 14px; }

.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.tech {
  background: #f4f4f4;
  padding: 8px 12px;
  border-radius: 20px;
  font-weight: 600;
  color: #333;
}

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.feature {
  flex: 1 1 calc(50% - 16px);
  background: #fff;
  padding: 18px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.feature h4 { margin-bottom: 8px; color: #333; }
.feature p { color: #666; margin: 0; }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
.portfolio-grid img {
  width: 100%;
  border-radius: 8px;
}

.cta {
  background: #f4a300;
  color: #111;
  padding: 32px 20px;
  text-align: center;
  border-radius: 8px;
  margin: 40px 0;
}
.cta a {
  display:inline-block;
  margin-top: 12px;
  background: #111;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2,1fr); }
  .feature { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .hero { padding: 50px 12px; }
  .portfolio-grid { grid-template-columns: 1fr; }
}
.hero-webdev {
  background: url('/images/code-bg.jpg') center/cover no-repeat;
  color: white;
}

.badge {
  padding: 0.8rem 1.2rem;
  font-size: 1rem;
  border-radius: 30px;
}

.cta {
  background-color: #0d6efd;
  padding: 3rem 0;
  color: white;
}

.features .feature {
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 10px;
  text-align: center;
}