/* Floating WhatsApp Icon */
.whatsapp-icon {
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 100;
   transition: bottom 0.3s ease-in-out; /* Animation for smooth transition */
}

.whatsapp-icon img {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
   transition: transform 0.3s ease-in-out; /* Smooth transform on hover */
}

.whatsapp-icon img:hover {
   transform: scale(1.1); /* Slightly enlarge the icon on hover */
}

/* Floating Email Icon (under WhatsApp) */
.email-icon {
   position: fixed;
   bottom: 100px; /* Place the email icon below WhatsApp */
   right: 20px;
   z-index: 100;
   transition: bottom 0.3s ease-in-out; /* Animation for smooth transition */
}

.email-icon img {
   width: 40px;
   height: 40px;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
   transition: transform 0.3s ease-in-out; /* Smooth transform on hover */
}

.email-icon img:hover {
   transform: scale(1.1); /* Slightly enlarge the icon on hover */
}

/* WhatsApp Message Box Styling */
.whatsapp-message-box, .email-message-box {
   display: none; /* Hidden by default */
   position: fixed;
   bottom: 120px; /* Adjust based on icon position */
   right: 20px;
   background: #ffffff;
   border: 1px solid #ddd;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
   padding: 15px;
   width: 250px;
   z-index: 200;
   border-radius: 8px;
   transform: translateY(20px);
   opacity: 0;
   animation: fadeInUp 0.4s ease-in-out forwards; /* Add fade in and upward animation */
}

/* WhatsApp and Email Message Box Fade In Animation */
@keyframes fadeInUp {
   0% {
      transform: translateY(20px);
      opacity: 0;
   }
   100% {
      transform: translateY(0);
      opacity: 1;
   }
}

.message-box-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 16px;
   font-weight: bold;
   color: #333;
}

.close-btn {
   background: transparent;
   border: none;
   font-size: 16px;
   cursor: pointer;
   color: #555;
}

textarea {
   width: 100%;
   height: 120px; /* Make the text area taller */
   margin: 10px 0;
   padding: 12px;
   border: 1px solid #ddd;
   border-radius: 5px;
   font-size: 14px;
   resize: none;
   box-sizing: border-box;
   font-family: 'Arial', sans-serif;
   transition: all 0.3s ease; /* Smooth transition */
}

textarea:focus {
   border-color: rgb(22, 218, 22); /* WhatsApp green border color on focus */
   box-shadow: 0 0 5px rgba(11, 203, 82, 0.5); /* Subtle green glow */
}

textarea:focus, textarea {
   font-size: 14px;
   transition: border 0.3s ease, box-shadow 0.3s ease;
}

.send-btn {
   width: 100%;
   background-color: #25d366; /* WhatsApp color */
   color: white;
   border: none;
   padding: 10px;
   border-radius: 5px;
   cursor: pointer;
   font-size: 16px;
   transition: background-color 0.3s ease; /* Smooth background color change */
}

.send-btn:hover {
   background-color: #128c7e; /* WhatsApp color */
}

/* Email specific button color */
.email-message-box .send-btn {
   background-color: #007bff; /* Email button color */
}

.email-message-box .send-btn:hover {
   background-color: #0056b3;
}

/* Add subtle animation when the user focuses on the input fields */
.email-message-box textarea:focus, .whatsapp-message-box textarea:focus {
   border-color: #007bff;
   box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}