body {font-family: 'Poppins', sans-serif;}
.btn-gradient {
  background: linear-gradient(45deg, #007bff, #00bfff);
  border: none;
  color: #fff;
  transition: 0.3s;
}
.btn-gradient:hover {opacity: .9;}
.hero {position: relative; color: #fff;}
.navbar-nav .nav-link {font-weight: 500; color: #333;}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {color: #007bff;}
footer a:hover {text-decoration: underline;}

.hero-section h1, .hero-section p {
  animation-duration: 1.2s;
}

.service-card {
  background: #fff;
  border-radius: 12px;
  padding: 30px 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all .3s ease-in-out;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.service-card i {
  color: #007bff;
  font-size: 28px;
  margin-bottom: 12px;
}

.btn-gradient {
  background: linear-gradient(45deg, #007bff, #00bfff);
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 10px 25px;
  transition: all .3s;
}
.btn-gradient:hover {opacity: 0.9; transform: scale(1.02);}

.hover-up {
  transition: transform .3s, box-shadow .3s;
}
.hover-up:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.service-card img {
  height: 120px;
  object-fit: cover;
}
#accessoryGrid img {
  height: 180px;
  object-fit: cover;
}