.green{
    color:#306f36
}

.red{
    color:#a41e27;
    
}
.textcustom{
    color:rgba(255, 255, 255, 0.9) !important;
}
.textcustom2{
    color:rgba(255, 255, 255, 0.7) !important;
}


/* Sticky container */
.sticky-buttons {
  position: fixed;
  right: 0px;
  top:40%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10000;
  pointer-events: none; /* allow children to control pointer-events */
}

/* Each button */
.sticky-btn {
  pointer-events: auto;        /* re-enable pointer for buttons */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-top-left-radius:25px;
  border-bottom-left-radius:25px;
  text-decoration: none;
  color: #fff;
  
  transition: transform 0.18s ease;
  cursor: pointer;
  overflow: visible;           /* IMPORTANT: allow bubble to show outside */
}

/* Icon */
.sticky-btn i {
  font-size: 20px;
  line-height: 1;
}

/* Text bubble (hidden by default) */
.sticky-btn .btn-text {
  position: absolute;
  right: 45px;                 /* space between icon and bubble */
  top: 50%;
  transform: translate3d(8px, -50%, 0); /* start slightly slid to the right */
  padding: 10px 14px 10px 20px;
  border-top-left-radius:25px;
  border-bottom-left-radius:25px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 15px;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.22s cubic-bezier(.2,.9,.3,1), opacity 0.22s ease, visibility 0.22s;
  pointer-events: none;

  /* Use same background as parent (works since it's a child) */
  background: inherit;
  color: inherit;
}

/* Hover/focus/keyboard accessibility reveal */
.sticky-btn:hover,
.sticky-btn:focus-within,
.sticky-btn:focus {
  transform: translateY(-2px);
  border-top-left-radius:0px;
  border-bottom-left-radius:0px;
}
.sticky-btn:focus { outline: none; }

/* Reveal the bubble only for the hovered/focused button */
.sticky-btn:hover .btn-text,
.sticky-btn:focus-within .btn-text,
.sticky-btn:focus .btn-text {
  transform: translate3d(0, -50%, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Colors for each button */
.sticky-btn.whatsapp { background-color: #306f36; }
.sticky-btn.callnow   { background-color: #a41e27; }

/* Make bubble contrast (optional) — if you prefer white text on colored bubble, keep as-is.
   If you want a white bubble with colored text, uncomment these and adjust colors:
.sticky-btn .btn-text { background: #fff; color: #111; } 
*/

/* Small screens: hide bubble and keep round icons */
@media (max-width: 600px) {
  .sticky-buttons { right: 14px; bottom: 14px; gap: 10px; }
  .sticky-btn { width: 48px; height: 48px; }
  .sticky-btn .btn-text { display: none; }
}