@font-face {
    font-family: 'SP Bold' ;
    src: url(/assets/fonts/Sofia\Pro\Bold.ttf);
}
@font-face {
    font-family: 'SP SemiBold' ;
    src: url(/assets/fonts/Sofia\Pro\SemiBold.ttf);
}
@font-face {
    font-family: 'SP Regular' ;
    src: url(/assets/fonts/Sofia\Pro\Regular.ttf);
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 12px;
  font-weight: 400;
  font-family: 'SP Regular';
}

.bg-blue {
  background-color: #03A9F4;
}
.bg-blue-light {
  background-color: rgba(203, 239, 255, 0.2);
}
.bg-blue-dark {
  background-color: #345868;
}

.ln-1xxl {
  line-height:56px;
}
.text-1xl {
  font-size: 22px;
}
.text-1xxl {
  font-size: 52px;
}
.text-blue {
  color: #345868;
}
.text-grey {
  color: #575757;
}
.fw-300 {
  font-weight: 300 !important;
}


.btnwa {
  position: absolute;
  display: sticky;
  text-decoration: none;
  transition: all 500ms ease-in-out;
  left: calc(30% - 50px);
  /* bottom: calc(10vh - 120px); */
  box-shadow: 1px 10px 6px rgba(0,0,0,0.3);
  z-index: 100;
}

.icon-btn {
  z-index: 2;
  transition: all 100ms ease-in-out;
}

.btnwahead .floating {
  position: fixed;
  width: 70px;
  height: 70px;
  /* left: calc(100% - 100px); */
  bottom: 30px;
}
.floating .text-floating {
  visibility: hidden;
}

.floating {
  width: 48px;
  height: 48px;
  position: fixed;
  left: calc(90% - 30px);
  right: 4px;
  bottom: 30px;
  box-shadow: 1px 4px 10px 3px rgba(0, 0, 0, .2);
}
.btnwa .floating {
  width: 48px;
  height: 48px;
  position: fixed;
  left: calc(90% - 30px);
  right: 4px;
  bottom: 30px;
  box-shadow: 1px 4px 10px 3px rgba(0, 0, 0, .2);
}

.floating:hover {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
}

@media only screen and (min-width: 1280px) {
  
  .fw-300 {
    font-weight: 300;
  }
  .fs-22 {
    font-size: 22px !important;
  }
  .lh-22 {
    line-height: 2rem !important;
  }
  .fs-52 {
    font-size: 52px !important;
  }
  .lh-1xxl {
    line-height: 60px !important;
  }

  .btnwa {
    width: auto;
    height: 48px;
    position: absolute;
    display: sticky;
    text-decoration: none;
    transition: all 500ms ease-in-out;
    left: calc(80% - 60px);
    /* bottom: calc(10vh - 120px); */
    box-shadow: 1px 10px 6px rgba(0,0,0,0.3);
    z-index: 100;
  }

  .icon-btn {
    z-index: 2;
    transition: all 100ms ease-in-out;
  }

  .btnwahead .floating {
    position: fixed;
    width: 70px;
    height: 70px;
    /* left: calc(100% - 100px); */
    bottom: 30px;
  }

  .floating .text-floating {
    visibility: visible;
  }
  .floating {
    width:auto;
    height: 48px;
    position: fixed;
    left: calc(80% - 20px);
    right: 4px;
    bottom: 30px;
    box-shadow: 1px 4px 10px 3px rgba(0, 0, 0, .2);
  }
  .floating:hover {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
  }
}