.hero-section {
    background: linear-gradient(to right, #007bff, #00c6ff);
    color: white;
    padding: 6rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .hero-section::after {
    content: "";
    background: url("{% static 'images/hero-bg.jpg' %}") no-repeat center center;
    background-size: cover;
    opacity: 0.2;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
  }
  .hero-section .container {
    position: relative;
    z-index: 1;
  }
  .search-form input,
  .search-form select {
    border-radius: 50px;
    padding-left: 20px;
  }
  .search-form button {
    border-radius: 50px;
  }
  .carousel-item {
    transition: transform 0.6s ease;
  }