:root {
        --bg-dark: #000000;
        --card-bg: #e6e6e6;
        --primary-green: #017033;
        --accent-gold: #d4a373;
        --text-gray: #2f2f2f;
        --white: #bf6262;
          --warm-2: #104C64;
      }

      /* --- Filter Section --- */
      .filter-container {
        padding: 40px 8%;
        text-align: center;
      }
  @media (max-width: 710px) {
  .filter-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;

    padding: 20px 15px;   /* reduce side spacing */
    margin: 0;            /* remove unwanted outer space */
  }
   .filter-btn {
    width: 40%;          /* reduce width */
    margin: 0 auto;      /* center horizontally */
    display: block;
  }
}


  .filter-btn {
  background: var(--glass-white);
  backdrop-filter: blur(10px); /* The "Neo" glass effect */
  border: 2px solid #008489; /* Clean blue */
  color: #282828;
  padding: 12px 28px;
  border-radius: 18px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: var(--shadow-sm);
  letter-spacing: 0.5px;
}
 /*----Card Action Booking and Call Booking
      .filter-btn {
        background: transparent;
        border: 2px solid var( --warm-2);
        color: var(--black);
        padding: 10px 25px;
        margin: 5px;
        border-radius: 30px;
        cursor: pointer;
        transition: 0.3s;
        font-weight: 600;
      }
        ----*/

      .filter-btn.active,
      .filter-btn:hover {
        background: #40c4cc;
        color: var(--bg-dark);
      }

      /* --- Destination Grid --- */
      .dest-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 25px;
        padding: 0 8% 80px;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
      }

      .dest-card {
      
         background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        position: relative;
        transition: 0.3s;
        display: flex;
  flex-direction: column; /* important */
      }
 
      .dest-card:hover {
        transform: translateY(-10px);
      }

      .dest-card img {
        width: 100%;
        height: 250px;
        object-fit: cover;
      }

      .dest-info {
        
  padding: 20px;

  display: flex;
  flex-direction: column;
  height: 100%;
      }

 
      .dest-tag {
        font-size: 0.7rem;
        text-transform: uppercase;
        color: var(--primary-green);
        font-weight: 700;
        letter-spacing: 1px;
      }

      .dest-info h3 {
        margin: 10px 0;
        font-size: 1.3rem;
      }
      .dest-info p {
        font-size: 0.9rem;
        color: var(--text-gray);
      }
   /*----Card Action Booking and Call Booking----*/
     .card-actions {
        display: flex;
        gap: 10px;
        margin-top: auto;
      }
      .btn-book {
        flex: 1;
        background: #008489;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
      }
      .btn-tel {
        flex: 1;
        border: 2px solid #008489;
        color: #008489;
        padding: 10px;
        text-align: center;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
      }
 .dest-info p {
  font-size: 0.9rem;
  color: var(--text-gray);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dest-info p.expanded {
  -webkit-line-clamp: initial;
  display: block;
}

.read-toggle {
  color: #008489;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 5px;
  display: inline-block;
}