:root {
  --brand-yellow: #f7b733;
  --dark-gray: #222;
  --light-gray: #f8f9fa;
}

/* Base Layout */
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  background-color: #fff;
  color: #333;
}

/* Navbar */
.navbar { background-color: rgba(0, 0, 0, 0.85); }
.navbar .navbar-brand {
  font-weight: 600;
  color: var(--brand-yellow) !important;
}
.navbar .nav-link {
  color: #ddd !important;
  transition: color 0.3s ease;
}
.navbar .nav-link:hover {
  color: var(--brand-yellow) !important;
}

/* Hero Section - uses your kitchen image with a dark overlay */
.hero-section {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.65)),
    url('../images/hero-kitchen.jpg') center/cover no-repeat;
  height: 90vh;
  position: relative;
  text-align: center;
}
.hero-overlay {
  background: transparent; /* overlay handled by gradient above */
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Hero Text */
.hero-section h1 {
  color: var(--brand-yellow);
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7);
  font-weight: 700;
}
.hero-section p {
  color: #ffffff;
  font-size: 1.3rem;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

/* Sections */
section { padding: 80px 0; }
section h2 {
  font-weight: 700;
  color: #222;
}

/* About */
#about p {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Services */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
  border-radius: 8px;
}
.service-card i {
  font-size: 40px;
  color: var(--brand-yellow);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Projects */
#projects img {
  border-radius: 8px;
  transition: transform 0.3s ease;
}
#projects img:hover {
  transform: scale(1.03);
}

/* Contact */
form .form-control {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 12px;
}
form .btn {
  background-color: var(--brand-yellow);
  border: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
}
form .btn:hover { background-color: #ffcc33; }

/* Footer */
footer {
  background-color: var(--dark-gray);
  color: #fff;
  padding: 40px 0;
}
footer small i {
  color: var(--brand-yellow);
  margin-right: 4px;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-section { height: 70vh; background-position: center 40%; }
  h1.display-4 { font-size: 2.2rem; }
  section { padding: 60px 0; }
}