body {
  scroll-behavior: smooth;
  background-color: #111;
  color: white;
}

.hero-section {
   background-image: url("bgi.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh;
}

.hero-section h1,
.hero-section p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

img {
  transition: transform 0.3s ease;
}
img:hover {
  transform: scale(1.05);
}
.navbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.85) !important; /* Solid color when scrolled */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);         /* Optional shadow */
}