/*AMAL - 12-08-24 - Destination card description on active*/
/* Hide the description by default */
.destination-description {
    margin-top: 8px;
    font-size: 14px;
    color: #ffffff;
    height: 0; /* Start with zero height */
    opacity: 0; /* Start with opacity 0 */
    visibility: hidden; /* Hide element initially */
    overflow: hidden; /* Prevent overflow */
    transition: height 0.6s ease-in-out, opacity 0.6s ease-in-out 0.6s; /* Smooth transition */
  }
  
  /* Show the description when the card is active */
  .destination-list-wrap.active .destination-description {
    height: 100px; /* Expand to the required height */
    opacity: 1; /* Fade in the text */
    visibility: visible; /* Make it visible */
  }
  
  /* Adjust content positioning */
  .destination-content {
    position: absolute;
    left: 40px;
    bottom: 100px; /* Adjusted to ensure enough space for the button */
    transform: none;
    transition: all 0.8s ease-in-out;
  }
  
  .destination-list .destination-content {
    bottom: 100px;
  }
  
  /* Adjust content positioning for mobile */
  @media (max-width: 767px) {
    .destination-content {
        position: absolute;
        left: 20px;
        bottom: 80px; /* Adjusted to ensure enough space for the button */
        right: 20px;  /* Added to center content and avoid overflow */
        text-align: left; /* Align text to the left */
        padding-right: 50px; /* Add padding to avoid overlap with the button */
    }
  
    .destination-description {
        margin-bottom: 40px; /* Add more space between description and button */
        font-size: 14px;
        color: #ffffff;
    }
  
    .destination-list .destination-content {
      bottom: -20px;
    }
    .destination-list:before {
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 60%) 55%), url(3727.jpg);
    }
  }