 #active-filters {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 10px;
     font-size: 14px;
     width: fit-content;
     flex-direction: row;
     font-family: poppins;
 }

 #clear-all-btn {
     background-color: #fff;
     padding: 5px 10px;
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     border: 1px solid #1f4d53;
 }

 .filter-item {
     background-color: #fff;
     padding: 5px 10px;
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     border: 1px solid #1f4d53;
 }

 .remove-btn {
     background: none;
     border: none;
     color: #1f4d53;
     font-weight: bold;
     font-size: 14px;
     margin-left: 5px;
     cursor: pointer;
     font-family: poppins;
 }

 .remove-btn:hover {
     color: #1f4d53;
 }

 .filter-item span {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .dropdown {
     position: relative;
     font-size: 14px;
     color: #333;
 }

 .dropdown .dropdown-list {
     padding: 12px;
     background: #fff;
     position: absolute;
     top: 55px;
     left: 0px;
     right: 0px;
     box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
     transform-origin: 50% 0;
     transform: scale(1, 0);
     transition: transform 0.15s ease-in-out 0.15s;
     height: 21vh;
     overflow-y: scroll;
     z-index: 1000;
 }

 .dropdown .dropdown-option {
     display: block;
     padding: 8px 12px;
     opacity: 0;
     transition: opacity 0.15s ease-in-out;
 }

 .dropdown .dropdown-label {
     display: block;
     width: 100%;
     padding: 1rem 0.75rem;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     color: var(--bs-body-color);
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     background-color: #fff;
     border: none;
     border: 1px solid #dddddd;
     border-radius: 0px;
     box-shadow: none;
     font-family: "Poppins";
 }

 .dropdown .dropdown-label:before {
     content: "";
     display: block;
     background-image: url('data:image/svg+xml,%3Csvg width="10" height="7" viewBox="0 0 10 7" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1l4 4 4-4" stroke="%23666" stroke-width="2" fill="none" fill-rule="evenodd"/%3E%3C/svg%3E');
     background-repeat: no-repeat;
     background-position: center;
     background-size: 10px 7px;
     width: 10px;
     height: 7px;
     position: absolute;
     top: 50%;
     right: 15px;
     transform: translateY(-50%);
     pointer-events: none;
 }

 .dropdown.on .dropdown-list {
     transform: scale(1, 1);
     transition-delay: 0s;
 }

 .dropdown.on .dropdown-list .dropdown-option {
     opacity: 1;
     transition-delay: 0.2s;
     font-family: Poppins;
 }

 .dropdown.on .dropdown-label:before {
     content: "";
     display: block;
     background-image: url('data:image/svg+xml,%3Csvg width="10" height="7" viewBox="0 0 10 7" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1l4 4 4-4" stroke="%23666" stroke-width="2" fill="none" fill-rule="evenodd"/%3E%3C/svg%3E');
     background-repeat: no-repeat;
     background-position: center;
     background-size: 10px 7px;
     width: 10px;
     height: 7px;
     position: absolute;
     top: 50%;
     right: 15px;
     transform: translateY(-50%);
     pointer-events: none;
 }

 .dropdown [type=checkbox] {
     position: relative;
     top: -1px;
     margin-right: 4px;
 }

 .active>.page-link,
 .page-link.active {
     z-index: 3;
     color: #fff !important;
     background-color: #000 !important;
     border-color: #1f4d53 !important;
 }

 .page-link {
     color: #1f4d53 !important;
     padding: 10px 20px;
 }

 .page-link .fa {
     line-height: 24px !important;
 }

 /* .services-item a img {
        height: 45vh;
        object-fit: cover;
        width: 100%;
        /* border-radius: 20px 0 20px 0; */
 /*filter: drop-shadow(0px 2px 2px #ccc);
    } */

 /* .sect-pro {
        padding: 50px 0px ;
         background: #fff; 
    } */

 .grid-item_ {
     display: flex;
     flex-direction: column;
     padding: 10px;
     /* border: 1px solid #c7c7c7; */
 }

 .services-item img {
     width: 100%;
     height: 35vh;
     display: block;
     object-fit: cover;
 }

 .filter-menu li {
     cursor: pointer;
     padding: 5px 15px;
     display: inline-block;
 }

 .filter-menu li.active {
     background-color: #000;
     color: #fff;
 }

 .grid-wrapper {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .filter-clear {
     display: flex;
     flex-direction: row !important;
     align-items: baseline;
     gap: 25px !important;
     font-family: poppins;

 }

 select {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-color: #fff;
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
     font-family: poppins;
     width: 100%;
     background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='10' height='7' viewBox='0 0 10 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 10px center;
     background-size: 10px 7px;
 }

 .grid-wrapper.d-flex.gap-3.w-100 {
     font-family: 'Poppins';
 }

 /* .form-control {
        border-bottom: 0px solid transparent !important;
    } */
 .flex-pro {
     display: flex;
     justify-content: space-between;
 }

 @media only screen and (min-width: 360px) and (max-width: 767px) {
     .page-link {
         color: #1f4d53 !important;
         padding: 5px 15px !important;
     }

     .services-item img {
         width: 100%;
         height: 35vh;
         display: block;
         /* padding-bottom: 10px; */
         object-fit: cover;
     }
     
 }
 @media only screen and (min-width: 767) {
    .page-link {
        color: #1f4d53 !important;
        padding: 5px 15px !important;
    }
}