:root {
    --primary: #3cae49;
    --brightprimary: #3cae49;
    --secondary: #3d3d3d;
    --white: #FFFFFF;
    --darkgray: #545454;
    --lightgray: #F5F5F5;
    --mediumgray: #BABCBD;
    --primaryfontgradient: -webkit-linear-gradient(180deg, var(--primary) 0%, var(--primary) 100%);
    --sectiongradient: transparent linear-gradient(180deg, #F0F0F0 0%, #FFFFFF 5%, #FFFFFF 78%, #F0F0F0 100%) 0% 0% no-repeat padding-box;
    --lightprimaryfontgradient: linear-gradient(180deg, var(--primary) 0%, var(--primary) 100%) 0% 0% no-repeat padding-box;
    --primarygradient: linear-gradient(180deg, var(--primary) 0%, var(--primary) 100%);
    --primarygradientinverse: linear-gradient(180deg, var(--primary) 0%, var(--primary) 100%);
    /* Have to get RBGA of hex to do the opacity gradient */
    --lightprimarygradient: linear-gradient(to left, rgba(158, 40, 53, 0.75) 25%, rgba(158, 40, 53, 0.25) 50%, rgba(158, 40, 53, 0.50) 75%, rgba(158, 40, 53, 0.75) 100%);
    --logowidth: 200px;
}

.gradient-section {
    background: var(--sectiongradient);
}

.hp-hero .hp-hero-content h2 {
    text-align: left;
    font-size: 30px;
    line-height: 50px;
    letter-spacing: 0px;
    color: var(--darkgray);
}

    .hp-hero .hp-hero-content h2.accountpending {
        text-align: center;
        font: normal normal bold 41px/45px Lato;
        letter-spacing: 0px;
        color: var(--darkgray);
    }

.brightblue-button {
    background-color: var(--primary) !important;
}

.white-button:hover {
    color: var(--white) !important;
    background-color: var(--darkgray) !important;
    text-decoration: none;
}

.hp-section-2 h3 {
    text-align: center;
    font-size: 30px;
    line-height: 42px;
    letter-spacing: 0px;
    color: var(--darkgray);
    margin-bottom: 20px;
}

.hp-section-2 .hp-steps .step-desc {
    font-size: 24px;
    line-height: 30px;
    text-align: center;
    color: var(--darkgray);
}

.hp-section-2 .hp-steps .step-num {
    font-family: Montserrat, Lato, sans-serif;
    background: var(--lightprimaryfontgradient);
    opacity: 0.25;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    float: left;
    font-size: 84px;
}

.hp-section-3 h2 {
    text-align: left;
    font-size: 24px !important;
    line-height: 34px !important;
    color: var(--darkgray);
    margin: 20px 0;
}

.hp-section-4 h3 {
    font-size: 36px !important;
    font-weight: 700;
    letter-spacing: 0px;
    color: var(--darkgray);
}

.hp-section-5 h3 {
    font-size: 36px !important;
    font-weight: 700;
    letter-spacing: 0px;
    color: var(--darkgray);
}

.hp-section-6 h3 {
    font-size: 36px !important;
    font-weight: 700;
    letter-spacing: 0px;
    color: var(--darkgray);
}

.hp-section-7 h3 {
    font-size: 36px !important;
    font-weight: 700;
    letter-spacing: 0px;
    color: var(--darkgray);
}

.white-section h2 {
    text-align: center;
    font-size: 21px !important;
    line-height: 28px !important;
    font-weight: 700;
    letter-spacing: 0px;
    color: var(--darkgray);
}

.hp-nav > a > img {
    width: var(--logowidth) !important;
}

.page-title {
    background: none !important;
}

.page-title-with-image {
    background: none !important;
}

#userDropdownMenu a {
    color: var(--darkgray) !important;
}

    #userDropdownMenu a svg {
        color: var(--primary) !important;
    }

@media (max-width: 1199px) {
    .hp-nav > a > img {
        width: calc(var(--logowidth) * 0.7) !important;
    }
}

.dashboard-container:has(.rainbow-partial-section) {
    background: none;
}