body {
  scroll-behavior: smooth;
  font-family: "Google Sans", sans-serif;
}

section {
  padding: 80px 0;
}

nav {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background-color: rgba(34, 34, 34, 0.8);
  backdrop-filter: blur(8px);
}

nav .bi {
  font-size: 1.5rem;
}

.placeholder-icons {
  color: black;
}

.form-control {
  height: 30px;
  margin-top: 5px;
}

.placeholder-box {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: white;
}

.custom-search {
  background-color: #1c1c1f;
  color: #fff;
  border: 1px solid #444;
  border-radius: 10px;
}

.custom-search::placeholder {
  color: #aaa;
}

.custom-search:focus {
  background-color: #1e1e2f;
  color: #fff;
  border-color: #6c8cff;
  box-shadow: none;
}

.featured-item {
  min-height: 115px;
}

#categories-section h2 {
  font-weight: 900;
}

#home {
  background-image: 
  linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0.7)),
  url('./images/homebg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: white;
  min-height: 80vh;
  display: flex;
  align-items: center;
  text-align: center;
}

.card:hover {
  transform: translateY(-5px);
  transition: 0.3s ease;
}

.placeholder-box{
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:3rem;
  color:#333;
}

.placeholder-icons{
  font-size:3rem;
}

.mission-wrap{
  display:flex;
  gap:20px;
  align-items:stretch;
}

.mission-line{
  width:4px;
  background:#0d6efd;
  border-radius:10px;
}

.mission-text{
  font-style:italic;
  max-width: 400px;
}

footer {
  background: #222;
  color: #aaa;
  text-align: center;
  padding: 20px;
}