.btn-style-one:before{
    -webkit-transition-duration: 800ms;
    transition-duration: 800ms;
    position: absolute;
    width: 200%;
    height: 200%;
    content: "";
    top: -200%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 1;
    background: var(--main-color);
    }
    .btn-style-two:before{
    -webkit-transition-duration: 800ms;
    transition-duration: 800ms;
    position: absolute;
    width: 200%;
    height: 200%;
    content: "";
    top: -200%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 1;
    background: #171819;
}
.bannerbtn{background: #e4c590;padding: 15px 50px;text-transform: uppercase;}
.aboutbtn{background: #171819;padding: 15px 50px;border: 2px solid var(--main-color);text-transform: uppercase;}
@media screen and (min-width: 768px) 
{
   .btn-style-one:before{
    -webkit-transition-duration: 800ms;
    transition-duration: 800ms;
    position: absolute;
    width: 200%;
    height: 200%;
    content: "";
    top: -200%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 1;
    background: var(--main-color);
    }
    
    .btn-style-one:hover:before{
        top: 0%;
    }
    .btn-style-one:hover .btn-wrap  .text-one:first-child{
    -webkit-transform: translateY(-150%);
    -ms-transform: translateY(-150%);
    transform: translateY(-150%);
}
 .btn-style-one:hover:before{
    top: -40%;
}

.btn-style-two:before{
    -webkit-transition-duration: 800ms;
    transition-duration: 800ms;
    position: absolute;
    width: 200%;
    height: 200%;
    content: "";
    top: -200%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 1;
    background: #171819;
}

.btn-style-two:hover:before{
    top: 0%;
}
.btn-style-two:hover .btn-wrap  .text-one:first-child{
    -webkit-transform: translateY(-150%);
    -ms-transform: translateY(-150%);
    transform: translateY(-150%);
}

.btn-style-one:hover .btn-wrap .text-two{
    color: var(--white-color);
}

.btn-style-one:hover{
    
}
.btn-style-one:hover .btn-wrap .text-two{
    top: 50%;
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.btn-style-two:hover .btn-wrap .text-two{
    top: 50%;
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.btn-style-two:hover .btn-wrap .text-two{
    color: var(--color-two);
}

.btn-style-two:hover{
    
}

.btn-style-two:hover:before{
    top: -40%;
}

}