.ficons {
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  background: url('/view_file/4/0/css_sprites3.webp') no-repeat;
}

/* Social icons */
.icon-wa { background-position: -110px -169px; }
.icon-insta { background-position: -183px -60px; }
.icon-y { background-position: -160px -169px; }
.icon-t { background-position: -10px -169px; }
.icon-f { background-position: -60px -169px; }
.icon-e { background-position: -104px -90px; }
.icon-tel { background-position: -183px -10px; }

/* Office icons */
.icon-american {
  width: 26px !important;
  height: 67px !important;
  background-position: -49px -81px;
}

.icon-arab {
  width: 24px !important;
  height: 52px !important;
  background-position: -139px -11px;
}

.icon-nz {
  width: 32px !important;
  height: 70px !important;
  background-position: -5px -79px;
}

.icon-mu {
  width: 49px !important;
  height: 52px !important;
  background-position: -133.6px -85px;
}

.icon-castle {
  width: 49px !important;
  height: 68px !important;
  background-position: -9px -9px;
}

.icon-petronas {
  width: 40px !important;
  height: 67px !important;
  background-position: -79px -11px;
}

/* Share icons */
.icon-sh-f { background-position: -232px -100px; }
.icon-sh-w { background-position: -232px -143px; }
.icon-sh-t { background-position: -232px -55px; }
.icon-sh-i { background-position: -232px -9px; }
.icon-sh { background-position: -100px -129px; }

.btn_wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 200px;
  padding: 0 18px;
  overflow: hidden;
  cursor: pointer;
  background: #eeeeed;
  border-radius: 80px;
  transition: transform .2s ease-in-out;
}

.btn_wrap:hover,
.btn_wrap:focus-within {
  transform: scale(1.06);
}

.container1 {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 50px;
  height: 200px;
  border-radius: 80px;
}

.span1 {
  position: absolute;
  z-index: 2;
  width: 52px;
  height: 202px;
  color: #eeeeed;
  font-size: 20px;
  line-height: 200px;
  text-align: center;
  background: #1f1e1e;
  border-radius: 80px;
  transition: transform .55s ease;
}

.icon1 {
  width: 50px;
  margin: 0 0 0 10px;
  color: #1f1e1e;
  list-style: none;
  cursor: pointer;
  opacity: 0;
  transform: scale(.2);
  transition: opacity .25s ease, transform .25s ease;
}

.container1 li:nth-of-type(1) { transition-delay: .28s; }
.container1 li:nth-of-type(2) { transition-delay: .21s; }
.container1 li:nth-of-type(3) { transition-delay: .14s; }
.container1 li:nth-of-type(4) { transition-delay: .07s; }

.btn_wrap:hover .span1,
.btn_wrap:focus-within .span1 {
  transform: translateX(-280px);
}

.btn_wrap:hover .icon1,
.btn_wrap:focus-within .icon1 {
  opacity: 1;
  transform: scale(1);
}

.dr {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 100px;
}

/* Reduce motion for accessibility and lower rendering cost */
@media (prefers-reduced-motion: reduce) {
  .btn_wrap,
  .span1,
  .icon1 {
    transition: none;
  }
}