/*---------------------------------------
    ## Button
---------------------------------------*/

.btn_wrapper {
    display: block;
    &.d-flex {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }
}

.cmn_btn {
    color: var(--hex-paragraph-color);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    font-family: var(--hex-body-font);
    display: inline-block;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    padding: 10px 30px;
    white-space: nowrap;
    transition: all .3s;
    background-color: unset;
    @include responsive(xs) {
        padding: 10px 25px;
        font-size: 15px;
        line-height: 28px;
    }
    @include responsive(vxxs) {
        padding: 5px 15px;
        font-size: 14px;
    }
    &.btn_bg_1 {
        background: var(--hex-main-color-one);
        color: var(--hex-white-text);
        border: 2px solid transparent;
        &:hover {
            background: unset;
            border-color: var(--hex-main-color-one);
            color: var(--hex-main-color-one);
        }
    }
    &.btn_bg_black {
        background-color: var(--hex-border-color);
        color: var(--heading-color);
        border: 2px solid transparent;
        &:hover {
            background-color: var(--hex-main-color-one);
            color: var(--hex-white-text);
        }
    }
    &.btn_bg_white {
        background-color: var(--hex-white-bg);
        color: var(--heading-color);
        border: 2px solid var(--hex-border-color);
        &:hover {
            background-color: var(--hex-main-color-one);
            border-color: var(--hex-white-text);
            color: var(--hex-white-text);
            border-radius: 30px;
        }
    }
    &.btn_border_1 {
        background: transparent;
        color: var(--hex-main-color-one);
        border: 2px solid var(--hex-main-color-one);
        &:hover {
            background: var(--hex-main-color-one);
            border-color: var(--hex-main-color-one);
            color: var(--hex-white-text);
        }
    }
    &.btn_border {
        border: 2px solid var(--hex-border-color);
        &:hover {
            background-color: var(--hex-main-color-one);
            color: var(--hex-white-text);
            border-color: var(--hex-main-color-one);
        }
    }
    &.btn_outline_1 {
        padding: 7px 35px;
        border: 2px solid var(--hex-main-color-one);
        &.color_one {
            color: var(--hex-main-color-one);
        }
        &:hover {
            background: var(--hex-main-color-one);
            color: var(--hex-white-text);
        }
        @include responsive(xs) {
            padding: 8px 23px;
            font-size: 15px;
            line-height: 28px;
        }
        @include responsive(vxxs) {
            padding: 4px 13px;
            font-size: 14px;
        }
    }
    &.btn_outline_white {
        padding: 7px 35px;
        border: 2px solid var(--hex-border-color);
        color: var(--hex-white-text);
        &:hover {
            background: var(--hex-white-bg);
            color: var(--hex-main-color-one);
        }
        @include responsive(xs) {
            padding: 8px 23px;
            font-size: 15px;
            line-height: 28px;
        }
        @include responsive(vxxs) {
            padding: 4px 13px;
            font-size: 14px;
        }
    }
    &.btn_medium {
        padding: 7px 15px;
        @include responsive(vxxs) {
            padding: 5px 13px;
            font-size: 14px;
        }
    }
    &.btn_small {
        padding: 5px 10px;
        @include responsive(vxxs) {
            padding: 5px 7px;
            font-size: 14px;
        }
    }
}

.desktop-center .flex-btn, 
.desktop-center .flex_btn, 
.desktop-center .btn-flex, 
.desktop-center .btn_flex {
    justify-content: center;
}
.desktop-center .flex-btn, 
.desktop-center .flex_btn, 
.desktop-center .btn-flex, 
.desktop-center .btn_flex,
.text-center .flex-btn, 
.text-center .flex_btn, 
.text-center .btn-flex, 
.text-center .btn_flex,
.center-text .flex-btn, 
.center-text .flex_btn, 
.center-text .btn-flex, 
.center-text .btn_flex {
    justify-content: center;
}

.btn-flex,
.btn_flex,
.flex_btn,
.flex-btn {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px 20px;
}