/* ==========================================
   GLOBAL BUTTON STYLES
========================================== */

:root {
    --YB-Yellow: #EAFF01;
    --YB-Yellow-Hover: #F2FF4D;
    --YB-Yellow-Dark: #D6EB00;
    --YB-White: #FFFFFF;
    --YB-Black: #000000;
    --YB-Text: #0A0E2D;
    --YB-Text-Light: #646B79;
    --YB-Navy: #1C1D2C;
    --YB-Surface: #F0F4FC;
    --YB-Surface-Dark: #2F2073;
    --YB-Border: #B5C0DC;
    --YB-Tertiary-Pill: var(--YB-Yellow);
    --YB-Tertiary-Pill-Hover: var(--YB-Yellow-Hover);
    --YB-Tertiary-Arrow: var(--YB-Navy);
}

.btn,
a.btn,
button.btn,
html input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link {
    font-family: var(--body-font);
    font-weight: 400;
    margin: 0;
    padding: 8px 14px 8px 20px;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    color: var(--YB-White);
    letter-spacing: 0.01em;
    font-size: 18px;
    line-height: 1;
    position: relative;
    outline: none;
    box-shadow: none;
    text-align: center;
    text-decoration: none;
    transition: all 0.4s ease;
    text-transform: none;
    transform: none !important;
}

.btn span {
    position: relative;
}


/* ==========================================
   ANIMATED BACKGROUND SUPPORT
========================================== */

.button__bg {
    position: absolute;
    inset: 0;
    background: var(--YB-Yellow);
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.button__bg::before,
.button__bg::after {
    content: '';
    position: absolute;
    background: var(--YB-Yellow);
}

.button__bg::before {
    width: 110%;
    height: 0;
    padding-bottom: 110%;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
}

.button__bg::after {
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.btn:hover .button__bg {
    transform: scale3d(1, 1, 1);
}

.btn:hover .button__bg::before {
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
    transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
}

.btn:hover .button__bg::after {
    opacity: 1;
    transition-duration: 0.01s;
    transition-delay: 0.3s;
}

.btn.btn-secondary .button__bg,
.btn.btn-tertiary .button__bg {
    background: transparent;
    border-radius: 4px;
}

/* Remove Bootstrap / theme focus shadows */

.btn-check:focus + .btn,
.btn-check:focus + input#gform_submit_button_1,
.btn-check:focus + input#gform_submit_button_2,
.btn-check:focus + input#gform_submit_button_3,
.btn:focus,
.contactbtn .btn-check:focus + a,
.contactbtn a:focus,
.searchicon .btn-check:focus + a,
.searchicon a:focus,
.woocommerce-info .btn-check:focus + a.button,
.woocommerce-info a.button:focus,
.woocommerce-notices-wrapper .woocommerce-message .btn-check:focus + a.button,
.woocommerce-notices-wrapper .woocommerce-message a.button:focus,
.wpcf7 .btn-check:focus + input[type="submit"],
.wpcf7 input[type="submit"]:focus,
input#gform_submit_button_1:focus,
input#gform_submit_button_2:focus,
input#gform_submit_button_3:focus {
    box-shadow: none !important;
}

.btn:focus,
.btn:focus-visible {
    outline: none;
    box-shadow: none !important;
}

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

.button-style-1 .btn-primary,
.button-style-1 .btn-secondary {
    padding: 25px 43px;
}

.button-style-1 .btn-primary {
    background: var(--YB-Yellow);
    color: var(--YB-Text);
    border: 1px solid var(--YB-Yellow);
    border-radius: 12px;
}

.button-style-1 .btn-primary:hover,
.button-style-1 .btn-primary:focus,
.button-style-1 .btn-primary:focus-visible {
    background: var(--YB-Yellow-Hover);
    border-color: var(--YB-Yellow-Hover);
    color: var(--YB-Text);
}

.button-style-1 .btn-secondary {
    background: transparent;
    color: var(--YB-White);
    border: 1px solid var(--YB-White);
    border-radius: 12px;
}

.button-style-1 .btn-secondary:hover,
.button-style-1 .btn-secondary:focus,
.button-style-1 .btn-secondary:focus-visible {
    background: var(--YB-White);
    color: var(--YB-Text);
    border-color: var(--YB-White);
}

/* Tertiary */

.button-style-1 .btn-tertiary {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--YB-Navy);
    font-family: "Reddit Sans", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.36px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.button-style-1 .btn-tertiary::after {
    content: '';
    width: 37px;
    height: 19px;
    flex-shrink: 0;
    border-radius: 6px;
    background-color: var(--YB-Tertiary-Pill);
    position: relative;
    display: inline-block;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

.button-style-1 .btn-tertiary::before {
    content: '';
    width: 13px;
    height: 7px;
    background-color: var(--YB-Tertiary-Arrow);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    -webkit-mask: url('../images/icons/arrow-style-1.svg') center / contain no-repeat;
    mask: url('../images/icons/arrow-style-1.svg') center / contain no-repeat;
    transition: transform 0.3s ease;
}

.button-style-1 .btn-tertiary:hover,
.button-style-1 .btn-tertiary:focus,
.button-style-1 .btn-tertiary:focus-visible {
    color: var(--YB-Navy);
    box-shadow: none;
    outline: none;
}

.button-style-1 .btn-tertiary:hover::after,
.button-style-1 .btn-tertiary:focus::after,
.button-style-1 .btn-tertiary:focus-visible::after {
    transform: translateX(4px);
    background-color: var(--YB-Tertiary-Pill-Hover);
}

.button-style-1 .btn-tertiary:hover::before,
.button-style-1 .btn-tertiary:focus::before,
.button-style-1 .btn-tertiary:focus-visible::before {
    transform: translateY(-50%) translateX(4px);
}

/* ==========================================
   BUTTON STYLE 2
========================================== */

.button-style-2 .btn-primary,
.button-style-2 .btn-secondary,
.button-style-2 .btn-tertiary {
    min-height: 43px;
    padding: 11px 14.5px 11px 17px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.button-style-2 .btn-primary {
    background: #002C3F;
    color: var(--YB-White);
    border: 1px solid rgba(0, 44, 63, 0.20);
}

.button-style-2 .btn-secondary {
    background: var(--YB-White);
    color: #002C3F;
    border: 1px solid rgba(0, 44, 63, 0.20);
}

.button-style-2 .btn-tertiary {
    background: transparent;
    color: #002C3F;
}

.button-style-2 .btn-primary::after,
.button-style-2 .btn-secondary::after,
.button-style-2 .btn-tertiary::after  {
    content: '';
    width: 31px;
    height: 31px;
    flex-shrink: 0;
    border-radius: 8px;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

.button-style-2 .btn-primary::after,
.button-style-2 .btn-tertiary::after {
    background-color: var(--YB-Yellow);
}

.button-style-2 .btn-secondary::after {
    background-color: #002C3F;
}

.button-style-2 .btn-primary::before,
.button-style-2 .btn-secondary::before,
.button-style-2 .btn-tertiary::before {
    content: '';
    width: 14px;
    height: 12px;
    position: absolute;
    right: 23px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    -webkit-mask: url('../images/icons/arrow-style-2.svg') center / contain no-repeat;
    mask: url('../images/icons/arrow-style-2.svg') center / contain no-repeat;
    transition: transform 0.3s ease;
}

.button-style-2 .btn-primary::before,
.button-style-2 .btn-tertiary::before {
    background-color: #002C3F;
}

.button-style-2 .btn-secondary::before  {
    background-color: var(--YB-White);
}

.button-style-2 .btn-primary:hover,
.button-style-2 .btn-primary:focus,
.button-style-2 .btn-primary:focus-visible {
    background: #003C56;
    border-color: rgba(0, 44, 63, 0.35);
    color: var(--YB-White);
}

.button-style-2 .btn-secondary:hover,
.button-style-2 .btn-secondary:focus,
.button-style-2 .btn-secondary:focus-visible {
    background: var(--YB-White);
    border-color: rgba(0, 44, 63, 0.35);
    color: #002C3F;
}

.button-style-2 .btn-tertiary:hover,
.button-style-2 .btn-tertiary:focus,
.button-style-2 .btn-tertiary:focus-visible {
    background: transparent;
    border-color: rgba(0, 44, 63, 0.35);
    color: #002C3F;
}

.button-style-2 .btn-primary:hover::after,
.button-style-2 .btn-primary:focus::after,
.button-style-2 .btn-primary:focus-visible::after,
.button-style-2 .btn-secondary:hover::after,
.button-style-2 .btn-secondary:focus::after,
.button-style-2 .btn-secondary:focus-visible::after,
.button-style-2 .btn-tertiary:hover::after,
.button-style-2 .btn-tertiary:focus::after,
.button-style-2 .btn-tertiary:focus-visible::after {
    transform: translateX(3px);
}

.button-style-2 .btn-primary:hover::after,
.button-style-2 .btn-primary:focus::after,
.button-style-2 .btn-primary:focus-visible::after,
.button-style-2 .btn-tertiary:hover::after,
.button-style-2 .btn-tertiary:focus::after,
.button-style-2 .btn-tertiary:focus-visible::after {
    background-color: var(--YB-Yellow-Hover);
}

.button-style-2 .btn-secondary:hover::after,
.button-style-2 .btn-secondary:focus::after,
.button-style-2 .btn-secondary:focus-visible::after {
    background-color: #003C56;
}

.button-style-2 .btn-primary:hover::before,
.button-style-2 .btn-primary:focus::before,
.button-style-2 .btn-primary:focus-visible::before,
.button-style-2 .btn-secondary:hover::before,
.button-style-2 .btn-secondary:focus::before,
.button-style-2 .btn-secondary:focus-visible::before,
.button-style-2 .btn-tertiary:hover::before,
.button-style-2 .btn-tertiary:focus::before,
.button-style-2 .btn-tertiary:focus-visible::before {
    transform: translateY(-50%) translateX(3px);
}

/* ==========================================
   BUTTON STYLE 3
========================================== */

.button-style-3 .btn-primary,
.button-style-3 .btn-secondary {
    padding: 21px 37px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.button-style-3 .btn-primary {
    background: var(--YB-Yellow);
    color: var(--YB-Text);
    border: 1px solid var(--YB-Yellow);
}

.button-style-3 .btn-primary:hover,
.button-style-3 .btn-primary:focus,
.button-style-3 .btn-primary:focus-visible {
    background: var(--YB-Yellow-Hover);
    border-color: var(--YB-Yellow-Hover);
    color: var(--YB-Text);
}

.button-style-3 .btn-secondary {
    background: var(--YB-White);
    color: #002C3F;
    border: 1px solid var(--YB-White);
}

.button-style-3 .btn-secondary:hover,
.button-style-3 .btn-secondary:focus,
.button-style-3 .btn-secondary:focus-visible {
    background: #F5F5F5;
    border-color: #F5F5F5;
    color: #002C3F;
}

/* Tertiary */

.button-style-3 .btn-tertiary {
    background: transparent;
    border: 0;
    padding: 0;
    color: #002C3F;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.button-style-3 .btn-tertiary::after {
    content: '';
    width: 14px;
    height: 12px;
    flex-shrink: 0;
    background-color: var(--YB-Text);

    -webkit-mask: url('../images/icons/arrow-style-3.svg') center / contain no-repeat;
    mask: url('../images/icons/arrow-style-3.svg') center / contain no-repeat;

    transition: transform 0.3s ease, background-color 0.3s ease;
}

.button-style-3 .btn-tertiary:hover,
.button-style-3 .btn-tertiary:focus,
.button-style-3 .btn-tertiary:focus-visible {
    color: var(--YB-Text);
    background: transparent;
    border: 0;
}

.button-style-3 .btn-tertiary:hover::after,
.button-style-3 .btn-tertiary:focus::after,
.button-style-3 .btn-tertiary:focus-visible::after {
    transform: translateX(4px);
    background-color: var(--YB-Text);
}

/* ==========================================
   BUTTON STYLE 4
========================================== */

.button-style-4 .btn-primary,
.button-style-4 .btn-secondary,
.button-style-4 .btn-tertiary {
    min-height: 43px;
    padding: 22px 36px;
    border-radius: 10000px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
	font-size:16px;
	text-transform:uppercase;
}

.button-style-4 .btn-primary {
    background: #002C3F;
    color: var(--YB-White);
    border: 1px solid rgba(0, 44, 63, 0.20);
}

.button-style-4 .btn-secondary {
    background: var(--YB-White);
    color: #002C3F;
    border: 1px solid rgba(0, 44, 63, 0.20);
}

.button-style-4 .btn-tertiary {
    background: transparent;
    color: #002C3F;
}

.button-style-4 .btn-primary::after,
.button-style-4 .btn-secondary::after,
.button-style-4 .btn-tertiary::after {
    content: '';
    width: 9px;
    height: 12px;
    flex-shrink: 0;

    -webkit-mask: url('../images/icons/arrow-style-4.svg') center / contain no-repeat;
    mask: url('../images/icons/arrow-style-4.svg') center / contain no-repeat;

    transition: transform 0.3s ease;
}

.button-style-4 .btn-primary::after,
.button-style-4 .btn-tertiary::after {
    background-color: var(--YB-White);
}

.button-style-4 .btn-secondary::after {
    background-color: #002C3F;
}

.button-style-4 .btn-primary:hover,
.button-style-4 .btn-primary:focus,
.button-style-4 .btn-primary:focus-visible {
    background: #003C56;
    border-color: rgba(0, 44, 63, 0.35);
    color: var(--YB-White);
}

.button-style-4 .btn-secondary:hover,
.button-style-4 .btn-secondary:focus,
.button-style-4 .btn-secondary:focus-visible {
    background: var(--YB-White);
    border-color: rgba(0, 44, 63, 0.35);
    color: #002C3F;
}

.button-style-4 .btn-tertiary:hover,
.button-style-4 .btn-tertiary:focus,
.button-style-4 .btn-tertiary:focus-visible {
    background: transparent;
    border-color: rgba(0, 44, 63, 0.35);
    color: #002C3F;
}

.button-style-4 .btn-primary:hover::after,
.button-style-4 .btn-primary:focus::after,
.button-style-4 .btn-primary:focus-visible::after,
.button-style-4 .btn-secondary:hover::after,
.button-style-4 .btn-secondary:focus::after,
.button-style-4 .btn-secondary:focus-visible::after,
.button-style-4 .btn-tertiary:hover::after,
.button-style-4 .btn-tertiary:focus::after,
.button-style-4 .btn-tertiary:focus-visible::after {
    transform: translateX(3px);
}



.button-style-4 .btn-secondary:hover::after,
.button-style-4 .btn-secondary:focus::after,
.button-style-4 .btn-secondary:focus-visible::after {
    background-color: #003C56;
}

/* ==========================================
   BUTTON STYLE 5
========================================== */

.button-style-5 .btn-primary,
.button-style-5 .btn-secondary,
.button-style-5 .btn-tertiary {
    min-height: 43px;
    padding: 17px 34px;
    border-radius: 102px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Primary */

.button-style-5 .btn-primary {
    background: #002C3F;
    color: var(--YB-White);
    border: 1px solid rgba(0, 44, 63, 0.20);
}

.button-style-5 .btn-primary:hover,
.button-style-5 .btn-primary:focus,
.button-style-5 .btn-primary:focus-visible {
    background: #003C56;
    border-color: rgba(0, 44, 63, 0.35);
    color: var(--YB-White);
}

/* Secondary */

.button-style-5 .btn-secondary {
    background: var(--YB-White);
    color: #002C3F;
    border: 1px solid rgba(0, 44, 63, 0.20);
}

.button-style-5 .btn-secondary:hover,
.button-style-5 .btn-secondary:focus,
.button-style-5 .btn-secondary:focus-visible {
    background: var(--YB-White);
    border-color: rgba(0, 44, 63, 0.35);
    color: #002C3F;
}

/* Tertiary */

.button-style-5 .btn-tertiary {
    background: transparent;
    color: #002C3F;
    border: none;
    padding-left: 0;
    padding-right: 0;
}

.button-style-5 .btn-tertiary:hover,
.button-style-5 .btn-tertiary:focus,
.button-style-5 .btn-tertiary:focus-visible {
    background: transparent;
    color: #002C3F;
}

/* Arrow */

.button-style-5 .btn-tertiary::after {
    content: '';
    width: 12px;
    height: 12px;
    flex-shrink: 0;

    -webkit-mask: url('../images/icons/arrow-style-5.svg') center / contain no-repeat;
    mask: url('../images/icons/arrow-style-5.svg') center / contain no-repeat;

    background-color: currentColor;

    transition: transform 0.3s ease;
}

.button-style-5 .btn-tertiary:hover::after,
.button-style-5 .btn-tertiary:focus::after,
.button-style-5 .btn-tertiary:focus-visible::after {
    transform: translateX(3px);
}

/* ==========================================
   RESPONSIVE
========================================== */

@media screen and (max-width: 991px) {
    .btn,
    a.btn,
    button.btn,
    html input[type="button"],
    input[type="reset"],
    input[type="submit"],
    .wp-block-button__link {
        font-size: 15px;
    }
}