html {scroll-behavior: smooth;}
section .button-nav {
    position: fixed;
    top: 60%;
    right: 30px;
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    z-index: 200;
}
section .button-nav .button-nav-buy { display: none; }
section .button-nav-item, section .back-top {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    margin-bottom: 8px;
}
section .back-top svg {
    width: 25px;
    height: 25px;
    font-weight: bold;
}
section .button-nav-item img {width: 100%; height: 100%; object-fit: cover; max-width: 25px; max-height: 25px}
section .recommend-buy {
    position: fixed;
    top: 10%;
    right: 30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    z-index: 200;
}
section .recommend-buy:before {
    position: absolute;
    content: '';
    background-color: transparent;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    z-index: -1;
    animation: sonarEffect ease 1s infinite;
    transition: 0.5s;
}
section .recommend-buy p {color: #fff; margin: 0}
@media (max-width: 576px) {
    section .button-nav-item, section .back-top {width: 35px; height: 35px; font-size: 14px; padding: 8px; margin-bottom: 0}
    section .recommend-buy {display: none}
    section .button-nav {top: 90%; right: 50%; transform: translatex(50%); flex-direction: row; align-items: center;}
    section .button-nav .button-nav-buy {display: block; padding: 8px 20px; width: max-content; border-radius: 30px; color: #fff; font-size: 16px}
    section .button-nav .button-nav-buy p {margin: 0}
    section .button-nav a + a { margin-left: 10px; }
}
@keyframes sonarEffect {
  0% {
    filter: alpha(opacity=30);
    opacity: 0.3; }
  40% {
    filter: alpha(opacity=50);
    opacity: 0.7;
    /* box-shadow: 0 0 0 1px rgba(239, 0, 50, 0.5);
    -webkit-box-shadow: 0 0 0 1px #0d73bb;  */
    }
  100% {
    /* box-shadow: 0 0 0 1px rgba(239, 0, 50, 0.5);
    -webkit-box-shadow: 0 0 0 1px #0d73bb; */
    -o-transform: scale(1.75);
    -webkit-transform: scale(1.75);
    -ms-transform: scale(1.75);
    transform: scale(1.75);
    filter: alpha(opacity=0);
    opacity: 0; } 
}