:root{
    --color-ink:#14194D;
    --color-white: #fff;
    --color-cta:#84CEFF;
    --color-cta-hover:#3EA2F9;
}

.bg_snorkel_hero{
    background-image:var(--wpr-bg-f6b90356-7a7a-4506-909d-226a5e0b0127);
    background-size: cover;
    background-position: center;
    &>.x-bg{
        display: none !important;
    }
}
.bg_snorkel_dds{
    background: linear-gradient(180deg, #07091B 0%, #14194D 100%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    &>.x-bg{
        display: none !important;
    }
    &:before{
        content: '';
        background: var(--wpr-bg-e945b209-58da-497f-bd62-2b60b370c972);
        background-size: contain;
        background-repeat: no-repeat;
        width: 1730px !important;
        height: 100%;
        background-position: center;
        left: 44%;
        position: absolute;
        opacity: 1.2;
        top: 80px;
        
    }
    @media(max-width:979px){
        &:before{
            left: 0;
            width: 1200px !important;
            background-position: bottom center;
            top: 40px;
        }
    }
}

.cta-primary{
    background-color: var(--color-cta) !important;
    border-color: var(--color-cta) !important;
    color: var(--color-ink) !important;
    *{
        color: var(--color-ink) !important;
    }
    &:hover{
        background-color: var(--color-cta-hover) !important;
        border-color: var(--color-cta-hover) !important;
    }
}

.cta-secondary{
    background-color: transparent !important;
    border-color: var(--color-ink) !important;
    color: var(--color-ink) !important;
    *{
        color: var(--color-ink) !important;
    }
    &:hover{
        background-color: var(--color-ink) !important;
        border-color: var(--color-ink) !important;
        color: #fff !important;
        *{
            color: #fff !important;
        }
    }
}

.cta-white-outline{
    background-color: transparent !important;
    border-color: #fff !important;
    color: #fff !important;
    *{
        color: #fff !important;
    }
    &:hover{
        background-color: #fff !important;
        border-color: #fff !important;
        color: var(--color-ink) !important;
        *{
            color: var(--color-ink) !important;
        }
    }
}

.gform_footer input[type="submit"],
.mktoForm .mktoButtonWrap.mktoBluePill .mktoButton,
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton{
    background-color: var(--color-cta) !important;
    border-color: var(--color-cta) !important;
    color: var(--color-ink) !important;
    &:hover{
        background-color: var(--color-cta-hover) !important;
        border-color: var(--color-cta-hover) !important;
        color: var(--color-ink) !important;
    }
}

:is(.cta-primary, .cta-secondary, .cta-white-outline, .gform_footer input[type="submit"], .mktoForm .mktoButtonWrap.mktoBluePill .mktoButton, .mktoForm .mktoButtonWrap.mktoSimple .mktoButton){
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.28571 !important;
    letter-spacing: -0.01em !important;
    *{
        font-family: "Poppins", sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.28571 !important;
        letter-spacing: -0.01em !important;
    }
}