.elementor .filter-trigger-livestock{/* 1. Normal State */
.custom-filter-box {
  cursor: pointer;
  /* We use a transparent border by default so the box doesn't "jump" in size when a border is added on hover */
  border: 3px solid transparent; 
  transition: all 0.3s ease-in-out;
}

/* 2. Hover State */
.custom-filter-box:hover {
  border: 3px solid #888888; /* Change this hex code to whatever color you want for the hover */
  transform: translateY(-2px); /* Optional: Gives it a slight "lift" effect when hovered */
}

/* 3. Active (Clicked) State */
.custom-filter-box.is-active {
  border: 3px solid #000000; /* Change to your brand's active color */
  background-color: rgba(0, 0, 0, 0.05); /* Optional: slightly darkens the background when active */
}\n}.elementor .filter-trigger-crops{/* Adds a border when the image is actively clicked or focused */
selector a:active img,
selector a:focus img {
  border: 1px solid orange !important;
  border-radius: 4px; /* Match this to your image's border radius if it has one */
  box-sizing: border-box; /* Prevents the image from shifting when the border appears */
}\n}.elementor .filter-trigger-service{/* 1. Normal State */
.custom-filter-box {
  cursor: pointer;
  /* We use a transparent border by default so the box doesn't "jump" in size when a border is added on hover */
  border: 3px solid transparent; 
  transition: all 0.3s ease-in-out;
}

/* 2. Hover State */
.custom-filter-box:hover {
  border: 3px solid #888888; 
  transform: translateY(-2px); 
}

/* 3. Active (Clicked) State */
.custom-filter-box.is-active {
  border: 3px solid #000000; 
  background-color: rgba(0, 0, 0, 0.05); 
}\n}.elementor .custom-filter-box{/* 1. Normal State */
.custom-filter-box {
  cursor: pointer;
  /* We use a transparent border by default so the box doesn't "jump" in size when a border is added on hover */
  border: 3px solid transparent; 
  transition: all 0.3s ease-in-out;
}

/* 2. Hover State */
.custom-filter-box:hover {
  border: 3px solid #888888; /* Change this hex code to whatever color you want for the hover */
  transform: translateY(-2px); /* Optional: Gives it a slight "lift" effect when hovered */
}

/* 3. Active (Clicked) State */
.custom-filter-box.is-active {
  border: 3px solid #000000; /* Change to your brand's active color */
  background-color: rgba(0, 0, 0, 0.05); /* Optional: slightly darkens the background when active */
}\n}