.hero-section {
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url("/assets/banners/home-banner.webp") no-repeat center center;
  background-size: cover;
  background-position: center;
  /* margin-top: 80px; */
}

.carousel-caption {
  margin-bottom: 150px !important;
}

.about-section-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("/assets/about-banner.webp") no-repeat center center;
  background-size: cover;
  background-position: center;
}

.feature-icon {
  background-color: #0dcaf0 !important;
  width: 50px;
  height: 50px;
}

.product-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 5px 5px 0 0;
}

.product-card {
  background-color: #3f3f3f !important;
}

.product-button:hover {
  border-color: #0dcaf0 !important;
  color: #0dcaf0 !important;
}

.carousel-item img {
  /* width: 50%; */
  height: 250px;
  align-self: center;
  border-radius: 10px;
  border: 5px solid grey;
}

/* Remove background color */
.carousel,
.carousel-item,
.carousel-inner {
  background-color: transparent !important;
}

@media only screen and (max-width: 1000px) {
  .carousel-item img {
    width: 80%;
    height: 250px;
  }
}

@media only screen and (max-width: 500px) {
  .carousel-item img {
    width: 100%;
    height: 150px;
  }

  .carousel-caption {
    margin-bottom: 80px !important;
  }
}