/* Add this CSS to your existing styles */

/* Ensure the button stays fixed on the bottom right */
.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #448c74;
    padding: 10px;
    border-radius: 15px; /* Adjust the border-radius to make it rounded */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Ensure it appears above other elements */
  }
  
  /* Add some padding to the bottom of the body to prevent overlapping */
  body {
    padding-bottom: 70px; /* Adjust the value based on your button's height and spacing */
  }
  
  /* Media query for larger screens (desktop view) */
  @media (min-width: 768px) {
    .whatsapp-button {
      padding: 8px; /* Decrease the padding for larger screens */
    }
  
    .whatsapp-button img {
      width: 20px; /* Decrease the size of the WhatsApp logo for larger screens */
      border-radius: 50%; /* Make the WhatsApp icon rounded */
    }
  }
  
  /* Media query for smaller screens */
  @media (max-width: 768px) {
    .whatsapp-button {
      padding: 8px; /* Decrease the padding for smaller screens */
    }
  
    .whatsapp-button img {
      width: 25px; /* Default size for smaller screens */
      border-radius: 50%; /* Make the WhatsApp icon rounded */
    }
  }
  
  /* Style for "Need Help" text */
  .whatsapp-button span {
    color: #fff !important; /* White text color with !important */
    font-weight: bold;
  }
  
  /* Style for green background of "Need Help" */
  .whatsapp-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    height: 100%;
  }