/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

* {
  font-family: "Poppins", sans-serif;
}

body {
  background: #fff !important;
}

.h2{
  font-size: 20px;
}

#filter-buttons button {
  padding: 1rem 2rem 1rem 2rem;
  font-size: 20px;
  border-radius: 3px;
  background: #EEEDEB;
  border-color: transparent;
}

#filter-buttons button:hover {
  background: #ddd;
}

#filter-buttons button.active {
  color: #fff;
  background: #3575BB;
}

#filterable-cards .card_filter {
  width: 30rem;
  border: 2px solid transparent;
}
#filterable-cards .card_filter:hover{
  transform: scale(0.96); /* Slightly increase the size */
  transition: transform 0.5s ease-in-out; /* Smooth transition */
}

#filterable-cards .card_filter.hide {
  display: none;
}

.card_filter{
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.card_filter .card-body{
  color: #231f20;

  padding: 15px;
}



@media (max-width: 767px){
  #filter-buttons button {
    padding: 1rem 2rem 1rem 2rem;
    font-size: 15px;
    border-radius: 3px;
    background: #fff;
    border-color: transparent;
  }
  
  #filter-buttons button:hover {
    background: #ddd;
  }
  
  #filter-buttons button.active {
    color: #fff;
    background: #3575BB;
  }
  
  #filterable-cards .card_filter {
    width: 30rem;
    border: 2px solid transparent;
  }
  
  #filterable-cards .card_filter.hide {
    display: none;
  }
}
@media (max-width: 365px){
  #filter-buttons button {
    padding: 1rem 2rem 1rem 2rem;
    font-size: 14px;
    border-radius: 3px;
    background: #fff;
    border-color: transparent;
  }
  
  #filter-buttons button:hover {
    background: #ddd;
  }
  
  #filter-buttons button.active {
    color: #fff;
    background: #3575BB;
  }
  
  #filterable-cards .card_filter {
    width: 30rem;
    border: 2px solid transparent;
  }
  
  #filterable-cards .card_filter.hide {
    display: none;
  }
}

@media (max-width: 600px) {
  #filterable-cards {
    justify-content: center;
  }

  #filterable-cards .card_filter {
    width: calc(100% / 2 - 10px);
  }
}