/* --- Icon-Only Floating Style CSS --- */

/* 1. Icon එක නියතව තැබීමට Card එකට position: relative ලබා දිය යුතුය */
/* ඔබගේ HTML හි මූලික Card පන්තිය .destination-card වේ */
.destination-card {
    position: relative; 
    overflow: hidden; /* පාවෙන අයිකනය Card එකෙන් පිටතට යාම වැළැක්වීමට */
}

/* 2. Floating Icon Styling */
.whatsapp-float-icon {
    /* Floating position for the icon */
    position: absolute;
    bottom: 10px; /* Card එකේ පහළින් තැබීමට */
    right: 10px; /* Card එකේ දකුණට තැබීමට */
    
    /* Icon Button Styling */
    background-color: #25d366; /* WhatsApp Green */
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* වටකුරු හැඩය */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* සෙවණැල්ලක් එකතු කිරීම */
    z-index: 5;
    text-decoration: none; /* යටින් ඉරි ඇඳීම ඉවත් කිරීම */
    transition: transform 0.3s ease;
}

.whatsapp-float-icon:hover {
    transform: scale(1.1); /* Hover කළ විට විශාල වීම */
}

/* 3. Card එකේ අනෙකුත් අන්තර්ගතය සමඟ ගැටීම වැළැක්වීමට */
/* ඔබගේ HTML හි Highlights ලැයිස්තුව අඩංගු වන්නේ .highlights පන්තිය තුළයි */
.destination-info .highlights {
    /* Icon එකේ ප්‍රමාණය සහ bottom margin සඳහා ඉඩක් තැබීමෙන් අන්තර්ගතය Icon එකෙන් උඩට ගනී */
    padding-bottom: 50px; 
}

/* ඔබගේ පැරණි HTML ව්‍යුහයෙහි Card පන්තිය තවමත් තිබේ නම්, මෙම කේතයද ආරක්ෂිතව තැබිය හැක */
.card {
    position: relative;
    overflow: hidden;
}

/* පැරණි ව්‍යුහයෙහි අන්තර්ගතය සඳහා: */
.card-content {
    padding-bottom: 50px;
}