/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 07 2025 | 08:58:14 */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

/* WhatsApp Button Hover Effect - Mobile Responsive Version */
.whatsapp_respmobi {
  background-color: #fff !important;
  border: 1px solid #25D366 !important;
  color: #25D366 !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px; /* slightly smaller spacing for mobile */
  padding: 6px 14px; /* reduced padding for mobile */
  border-radius: 0.4em;
  font-size: 15px; /* slightly smaller text */
  transition: all 0.5s ease;
  overflow: hidden;
  text-align: center;
}

/* Text animation */
.whatsapp_respmobi .button-text {
  position: relative;
  transition: all 0.5s ease;
}

/* Hide icon initially */
.whatsapp_respmobi i,
.whatsapp_respmobi svg {
  opacity: 0;
  transition: all 0.5s ease;
  color: #fff !important;
  font-size: 1em;
}

/* Hover Effects */
.whatsapp_respmobi:hover {
  background-color: #25D366 !important;
  color: #fff !important;
}

.whatsapp_respmobi:hover .button-text {
  transform: translateX(-4px);
}

.whatsapp_respmobi:hover i,
.whatsapp_respmobi:hover svg {
  opacity: 1;
  transform: translateX(2px);
}

/* Extra mobile-friendly tweaks (optional) */
@media (max-width: 480px) {
  .whatsapp_respmobi {
    width: 100%;
    justify-content: center;
    padding: 8px 0;
    font-size: 16px;
  }
}