/*======================================
    BACK TO TOP
======================================*/

.back-to-top{

    position: fixed;

    right: 30px;

    bottom: 30px;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    text-decoration: none;

    font-size: 18px;

    z-index: 999;

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition: .35s ease;

    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    border:2px solid rgba(255,255,255,.15);

}
.back-to-top::before{

    content:"";

    position:absolute;

    inset:4px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.25);

}
.back-to-top:hover{

    background: var(--primary-hover);

    color: #fff;

    transform: translateY(-5px);

}

.back-to-top.show{

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

@media (max-width:768px){

    .back-to-top{

        width:45px;

        height:45px;

        right:20px;

        bottom:20px;

    }

}