/* =========================================================
   BLOG CONTENT BUTTONS
========================================================= */

.bh-button-wrap {
    display: flex;
    margin: 25px 0;
}

.bh-button-left {
    justify-content: flex-start;
}

.bh-button-center {
    justify-content: center;
}

.bh-button-right {
    justify-content: flex-end;
}


/* Common Button */

.bh-blog-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 15px 28px;

    text-decoration: none !important;

    font-size: 14px;
    font-weight: 600;

    letter-spacing: 3px;
    text-transform: uppercase;

    transition: all 0.3s ease;
}


/* =========================================================
   STYLE 1
   REFERENCE BUTTON
========================================================= */

.bh-btn-frame {

    background: #24142c;

    color: #ffffff !important;

    border: none;

    margin: 8px;

}


/* top-left corner */

.bh-btn-frame::before {

    content: "";

    position: absolute;

    width: 28px;
    height: 28px;

    left: -7px;
    top: -7px;

    border-left: 2px solid #d6a936;
    border-top: 2px solid #d6a936;

    transition: all 0.3s ease;

}


/* bottom-right corner */

.bh-btn-frame::after {

    content: "";

    position: absolute;

    width: 28px;
    height: 28px;

    right: -7px;
    bottom: -7px;

    border-right: 2px solid #d6a936;
    border-bottom: 2px solid #d6a936;

    transition: all 0.3s ease;

}


.bh-btn-frame:hover {

    background: #d6a936;

    color: #24142c !important;

}


.bh-btn-frame:hover::before,
.bh-btn-frame:hover::after {

    width: 100%;
    height: 100%;

}


/* =========================================================
   STYLE 2
   SOLID DARK BUTTON
========================================================= */

.bh-btn-solid {

    background: #24142c;

    color: #ffffff !important;

    border: 2px solid #24142c;

}


.bh-btn-solid:hover {

    background: #d6a936;

    border-color: #d6a936;

    color: #24142c !important;

}


/* =========================================================
   STYLE 3
   GOLD OUTLINE
========================================================= */

.bh-btn-outline {

    background: transparent;

    color: #24142c !important;

    border: 2px solid #d6a936;

}


.bh-btn-outline:hover {

    background: #d6a936;

    color: #24142c !important;

}


/* =========================================================
   STYLE 4
   MODERN ARROW BUTTON
========================================================= */

.bh-btn-arrow {

    background: #24142c;

    color: #ffffff !important;

    padding-right: 22px;

}


.bh-btn-arrow::after {

    content: "→";

    position: relative;

    font-size: 20px;

    letter-spacing: 0;

    transition: transform 0.3s ease;

}


.bh-btn-arrow:hover {

    background: #d6a936;

    color: #24142c !important;

}


.bh-btn-arrow:hover::after {

    transform: translateX(5px);

}


/* Mobile */

@media(max-width: 576px) {

    .bh-blog-btn {

        padding: 13px 20px;

        font-size: 12px;

        letter-spacing: 2px;

    }

}

/* =========================================================
   BUTTON SIZES
========================================================= */

.bh-btn-small {
    padding: 10px 18px;
    font-size: 11px;
    letter-spacing: 2px;
}

.bh-btn-medium {
    padding: 15px 28px;
    font-size: 14px;
    letter-spacing: 3px;
}

.bh-btn-large {
    padding: 19px 36px;
    font-size: 16px;
    letter-spacing: 3.5px;
}