/* Off-canvas styles */
#offCanvasMenu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 279px;
  height: 100%;
  background: linear-gradient(to right, #38a169, #a3e635);
  z-index: 1050;
  transition: left 0.3s ease-in-out;
  border-radius: 0 12px 12px 0;
}


element.style {
}
<style>
[role=button], button {
    cursor: pointer;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto;
}
.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex
;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 2px !important;
    background: #16a34a;
    display: flex
;
    justify-content: center;
    align-items: center;
    /* width: 24px; */
    /* height: 24px; */
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 15px !important;
    color: #fff;
}

#offCanvasMenu.show {
  left: 0;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
  background-color: #16a34a !important;
}
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  display: none;
}

#overlay.show {
  display: block;
}
.whatsapp-float {
    position: fixed;
    width: fit-content;
    height: fit-content;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .whatsapp-float:hover {
    transform: scale(1.1);
  }

  .whatsapp-float img {
    width: 50px;
    height: 50px;
    opacity: 0.7;
  }
  .z-11{
    z-index: 11;
  }
@media (max-width: 778px) {
  .smHide {
    display: none !important;
  }
 .whatsapp-float img {
    width: 26px;
    height: 26px;
    opacity: 0.7;
  }
  #menuToggle {
    display: block;
  }
}

@media (min-width: 779px) {
  #menuToggle {
    display: none;
  }
}