/*========== Button Start ==========*/
.hr-btn {
    display: inline-block;
    background: linear-gradient(to right, #3c9091 0%, #3c9091 50%, #eca540 100%) !important;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25em;
    text-transform: capitalize;
    color: #fff;
    padding: 15px 24px 15px 24px;
    border: none;
    transition: .3s ease-in-out;
    z-index: 0;
    background-size: 100% auto;
    font-family: var(--font-01);
}
.btn-main {
    background: var(--color-2) !important;
    border-radius: 0;
    font-size: 20px;
}
.hr-btn.btn-main.header-appointment-btn-inner:hover {
}
.btn-main:hover {
  background: var(--color-2) !important;
}
.hr-btn:hover {
    background: linear-gradient(to right, #eca540 0%, #3c9091 50%, #3c9091 100%) !important;
    transition: .3s ease-in-out;
}
/*.btn-main:hover {
    color: var(--white);
    background-color: var(--color-1);
    border-color: var(--color-1);
}*/
.hr-btn1 {
    padding: 11px 30px 10px 30px;
    font-size: 15px;
    font-weight: var(--weight-600);
    font-weight: 600;
    text-transform: uppercase;
    border: 2px solid #fff;
    transition: all 900ms ease;
    z-index: 1;
}
.btn-main-2 {
    color: var(--white);
    background-color: transparent;
}

.btn-main-2:hover {
    color: var(--white);
    background-color: var(--color-7);
    border-color: var(--color-7);
}
/*========== Button End ==========*/
@media(max-width:1200px){
    .btn-main {
    background: var(--color-2) !important;
    border-radius: 0;
    font-size: 18px;
}
.header-appointment-btn-inner {
    width: 190px;
}
}
@media(max-width:576px){
.hr-btn {
    font-size: 13px;
    padding: 10px 15px 10px 15px;
}
}