.banner {
    min-height: 100px;
    background-image: url('/assets/img/banner.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
  }
  
  @media (max-width: 576px) {
    .banner {
      min-height: 70px;
      background-position: top center;
    }
  
    .list-group-item {
      font-size: 1rem;
    }

    .container-fluid {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }

    .dropdown-menu {
      font-size: 0.9rem;
    }

    .btn {
      font-size: 0.875rem;
    }
  }
  
  .card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  }
  
  @media (hover: hover) {
    .card-hover:hover {
      transform: translateY(-10px) scale(1.03);
      box-shadow: 0 1rem 2rem rgba(0,0,0,0.3);
      filter: brightness(1.05);
      cursor: pointer;
    }
  }
  
  @media (max-width: 768px) {
    .banner {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
  
    .dropdown.m-1 {
      margin-top: 0.5rem !important;
      margin-bottom: 0.5rem !important;
    }
  
    main.col-md-10.p-3 {
      padding: 1rem !important;
      width: 100% !important;
    }
  
    .offcanvas .list-group-item {
      font-size: 0.9rem;
      padding: 0.5rem 1rem;
    }
  
    .btn span.d-none.d-sm-inline {
      display: none !important;
    }
  
    .navbar-brand strong {
      font-size: 1rem;
    }
  }