/* =========================================================
   ERA HERBAL — FLOATING BUTTONS & SCROLL TO TOP CSS
   ========================================================= */

/* Common styles for floating buttons */
  a.floating-button {
    position: fixed;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    color: #fff !important;
    border-radius: 50px;
    border: 1px solid #1c1743;
    text-align: center;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: pulsess 3s infinite;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
  }

  /* Individual button positions and colors */
  #whatsapp-float {
    bottom: 240px;
    right: 30px;
    background-color:#5B79BC;
  }

  #tel-float {
    bottom: 160px;
    right: 30px;
    background-color: #5B79BC;
  }

  #email-float {
    bottom: 80px;
    right: 30px;
    background-color: #233F2E;
  }

  /* Hover effect (for desktop) */
  a.floating-button:hover {
    color: #fff;
    animation-play-state: paused;
  }
  #whatsapp-float:hover,
  #tel-float:hover,
  #email-float:hover {
    background-color: #233F2E;
	  animation: nano;
  }
  #whatsapp-float:hover i,
  #tel-float:hover i,
  #email-float:hover i {
    color: #F6c846;
  }
	#whatsapp-float:active,
   #tel-float:active,
   #email-float:active {
	   background-color: #233F2E;
	}
	#whatsapp-float:active i,
   #tel-float:active i,
   #email-float:active i {
	   color: #F6c846;
	}
  /* Active state (for mobile touch) */
  .floating-button.active {
    background-color: #1c174c !important;
  }
  .floating-button.active i {
    color: #F6c846 !important;
  }

  /* Animation keyframes */
  @keyframes pulsess {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
    }
    30%, 80% {
      box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.3);
    }
  }

  /* Mobile responsiveness */
  @media only screen and (max-width: 767px) {
    #side-contact {
      padding: 15px;
      background: #fff;
      display: flex;
      justify-content: center;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 9999;
      transition: all 0.5s ease-in-out;
    }

    a.floating-button {
      position: initial;
      margin: 0 15px;
      width: 45px;
      height: 45px;
    }
  }

#scrollToTopIcon {
    position: fixed;
    bottom: 15px;
    right: 30px;
    z-index: 1000;
    font-size: 48px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;
    color: #233F2E;
  }
	#scrollToTopIcon:hover{
		color: #F6C846;
	}
  #scrollToTopIcon.show {
    opacity: 1;
  }

  @media (max-width: 480px) {
    #scrollToTopIcon {
      bottom: 100px;
    }
  }