.elementor-886 .elementor-element.elementor-element-99086f1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:60px;--padding-bottom:60px;--padding-left:15px;--padding-right:15px;}.elementor-886 .elementor-element.elementor-element-99086f1:not(.elementor-motion-effects-element-type-background), .elementor-886 .elementor-element.elementor-element-99086f1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#DBE6ED8F;}.elementor-886 .elementor-element.elementor-element-448191a{text-align:center;}.elementor-886 .elementor-element.elementor-element-448191a .elementor-heading-title{font-family:"Merriweather", Sans-serif;font-size:28px;font-weight:600;}.elementor-886 .elementor-element.elementor-element-a4ded69{--e-filter-direction:row;--e-filter-white-space:nowrap;--e-filter-wrap:wrap;--e-filter-overflow-x:initial;}.elementor-886 .elementor-element.elementor-element-9159e52{--grid-columns:3;}.elementor-886 .elementor-element.elementor-element-1d4a3d8 > .elementor-widget-container{padding:0px 20px 0px 20px;}.elementor-886 .elementor-element.elementor-element-1d4a3d8{text-align:center;font-family:"Open Sans", Sans-serif;font-size:16px;color:var( --e-global-color-secondary );}.elementor-886 .elementor-element.elementor-element-ef55596 > .elementor-widget-container{padding:30px 0px 0px 0px;}@media(max-width:1024px){.elementor-886 .elementor-element.elementor-element-9159e52{--grid-columns:2;}}@media(max-width:767px){.elementor-886 .elementor-element.elementor-element-448191a .elementor-heading-title{font-size:24px;}.elementor-886 .elementor-element.elementor-element-9159e52{--grid-columns:1;}.elementor-886 .elementor-element.elementor-element-1d4a3d8{font-size:14px;}}/* Start custom CSS for html, class: .elementor-element-ef55596 */.cardscontainer {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }

  .filter-section {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    gap: 20px;
  }
input#searchInput {
    width: 100%;
    max-width: 350px;
}

select#filterDropdown {
    width: 100%;
    max-width: 350px;
}
  /*.filter-section input,*/
  /*.filter-section select {*/
  /*  padding: 10px;*/
  /*  font-size: 16px;*/
  /*}*/
  
.filter-section input,
.filter-section select {
    padding: 12px 15px; 
    font-size: 16px;
    border-radius: 20px;
    border: 2px solid transparent; 
    background: #fff; 
    /*box-shadow: 4px 4px 10px #d1d1d1, -4px -4px 10px #ffffff; */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease; 
    outline: none; 
    position: relative; 
    z-index: 1; 
}
.filter-section input:hover,
.filter-section select:hover {
    border: 2px solid #7a7a7a; 
  
}
  .cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

  .card {
    width: calc(33.333% - 20px);
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s, background-color 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 0.5s ease, transform 0.5s ease; 
  }

  .card.visible {
    opacity: 1; 
    transform: translateY(0); 
  }

  .card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }

  .card h3 {
    margin: 0;
    padding: 10px;
    font-size: 22px;
    color: #89140a;
  }

  .card p {
    padding: 0 10px 10px;
    color: #666;
  }

  .card:hover {
    transform: translateY(-5px);
    background-color: #89140a;
  }
  .card:hover * {
    color: #fff;
  }
  #loadMoreBtn {
    display: block;
    width: 100%;
    max-width: fit-content;
    padding: 10px;
    font-size: 18px;
    margin-top: 20px;
    margin-inline: auto;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  #loadMoreBtn:hover {
    background-color: #211339;
  }

  .no-results {
    display: none; 
    text-align: center;
    font-size: 18px;
    color: #666;
    margin-top: 20px;
  }
  /* Responsive Styles */
    @media (max-width: 768px) {
      .card {
        width: calc(50% - 20px); /* Adjust width for medium screens */
      }
    }

    @media (max-width: 480px) {
      .card {
        width: calc(100% - 20px); /* Adjust width for smaller screens */
      }

      .filter-section {
        flex-direction: column; /* Stack filters vertically on small screens */
      }

      .filter-section input,
      .filter-section select {
        width: 100%; /* Full width for filters on small screens */
      }
    }

    @media (max-width: 360px) {
      .card {
        width: calc(100% - 10px); /* Make cards full width on very small screens */
        margin-bottom: 10px; /* Add margin for spacing */
      }

      .cards-container {
        gap: 10px; /* Reduce gap between cards */
      }
    }/* End custom CSS */