.buttons {
    display: inline-block;
    padding: 13px 22px;
    border: 1px solid rgb(0 0 0/5%);
    border-radius: 7px;
    line-height: 1.2;
    text-transform: uppercase;
    font-family: "Roboto Condensed", -apple-system,system-ui,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
    font-weight: 600;
    font-size: 13pt;
    letter-spacing: 1px;
    color: #fff;
    box-shadow: 0 3px 6px 1px rgb(0 0 0 / 11%), 0 0px 15px 9px rgb(0 0 0 / 5%);
    transition: all 0.2s cubic-bezier(0.27, 0, 0.175, 1);
}
.button_blue {
    background: #0098c5
}
.button_blue:hover {
    background: #0183ab;
}
.button_green {
    background: #7B9F2D;
}
.button_green:hover {
    background: #628021;
}
.button_red {
    background: #c50019;
}
.button_red:hover { 
    background: #8c0012;
}
.button_orange {
    background: #f9a619;
}
.button_orange:hover {
    background: #d78d0c;
}
a.buttons.button_yellow {
    background: #fad576;
    color: #137691;
}
a.buttons.button_yellow:hover {
    background: #fdce56; 
    color: #137691;
}
a.buttons.button_white {
    background: #FFF;
    color: #055268;
}
a.buttons.button_white:hover {
    background: #FFF;
    color: #024558;
}
a.buttons.button_black {
    background: #4a4d59;
}
a.buttons.button_black:hover {
    background: #383a43;
}
.buttons_group_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
.button_lower_case {
    text-transform: capitalize;
}
.buttons_group_grid a {
    text-align: center;
}
.buttons:hover, p.buttons:hover {
    transform: scale(0.97);
    color: #fff;
    text-decoration: none;
}
.button_grid_center {
    display: grid;
    width: max-content;
    margin: auto;
    grid-template-columns: min-content max-content;
    grid-gap: 5px;
} 
/*  */
.button-icon {
    border-radius: 30px;
    border: 1px solid rgba(175,175,175,.8);
    font-size: 17px;
    color: #666!important;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    text-align: center
}

.button-icon:hover {
    background: #f1f1f1
}

.button-icon i {
    text-align: center;
    width: 100%
}