.card {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
  }
  

  
  .icon {
    position: absolute;
    top:0;
    left: 0;
    display: flex;
    width: 30%;
    height: 100%;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    transition: background-color 0.3s;
    clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);

  }
  
  .content {
    position: relative;
    left: 15%;
    width: 70%;
    flex-grow: 1;
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
  }
  
  .content p {
    margin: 0;
    font-size: 16px;
  }
  
  .card:hover .icon {
    background-color: #333;
  }
  

  
  .bi {
    font-size: 23px;
  }


  #filters{
    box-shadow: 1px 1px 20px 2px rgba(0, 0, 0, 0.1);
    padding: 0;
  }
  .offcanvas-body #filters {
    box-shadow: none;
  }