// type elements
body {
    font-family: 'Nunito Sans', sans-serif;
}

h1 {
    font-size: calc(2.214581rem + 1vw);
    font-weight: 700;
    line-height: 58px;
}

.consumer-brand {
    h1 {
        color: $consumer-primary;
    }
}

.business-brand {
    h1 {
        color: $business-primary;
    }
}

h2 {
    font-size: calc(1.3rem + 1vw);
    font-weight: 700;
    line-height: 55px;
}

.consumer-brand {
    h2 {
        color: $consumer-primary;
    }
}

.business-brand {
    h2 {
        color: $business-primary;
    }
}

h3 {
    font-size: 30px;
    font-weight: 700;
    line-height: 40px;
}

.consumer-brand {
    h3 {
        color: $consumer-primary;
    }
}

.business-brand {
    h3 {
        color: $business-primary;
    }
}

h4 {
    font-size: 26px;
    font-weight: 700;
    line-height: 34px;
}

.consumer-brand {
    h4 {
        color: $consumer-primary;
    }
}

.business-brand {
    h4 {
        color: $business-primary;
    }
}

p {
    font-size: 22px;
    line-height: 32px;
    font-weight: lighter;
    color: $light-gray;
}

a {
    color: $light-gray;
    text-decoration: none;
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
}

ul,
ol {
    font-size: 22px;
    line-height: 45px;
    margin-bottom: unset;
    font-weight: lighter;
    color: $light-gray;
}

// cta
a.button--primary,
input[type="submit"].gform_button,
button[type="submit"].single_add_to_cart_button,
#searchBtn {
    border: none;
    padding: 8px 20px;
    background-color: $orange !important;
    color: $white !important;
    font-size: 25px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
    display: inline-block;
    line-height: 36px;
}

.button--primary {
    border: none;
    padding: 8px 20px;
    background-color: $orange; /* Define the actual color, not a variable */
    color: $white; /* Define the actual color, not a variable */
    font-size: 25px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    line-height: 36px;
    /* Add any additional styles you want here */
}

// Background Colors Configurations
.bg-color-white {
    background-color: $white;
}

.bg-color-pink {
    background-color: $light-pink;
    p {
        color: $light-gray;
    }
}

.bg-color-red {
    background-color: $consumer-primary;
    p {
        color: $white;
    }
}

.bg-color-light-blue {
    background-color: $light-blue;
}

.bg-color-blue {
    background-color: $consumer-primary;
}

// Top and Bottom Background Color Configurations
.bg-color-top-white {
    position: relative;
    width: 100%;
    &::before {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 50%;
        background-color: $white;
        left: 0;
        right: 0;
        top: 0;
    }
}

.bg-color-bottom-white {
    position: relative;
    width: 100%;
    &::after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 50%;
        background-color: $white;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
    }
}

.bg-color-top-pink {
    position: relative;
    width: 100%;
    &::before {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 50%;
        background-color: $light-pink;
        left: 0;
        right: 0;
        top: 0;
    }
}

.bg-color-bottom-pink {
    position: relative;
    width: 100%;
    &::after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 50%;
        background-color: $light-pink;
        z-index: -1;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

.bg-color-top-red {
    position: relative;
    width: 100%;
    &::before {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 50%;
        background-color: $consumer-highlight;
        left: 0;
        right: 0;
        top: 0;
    }
}

.bg-color-bottom-red {
    position: relative;
    width: 100%;
    &::after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 50%;
        background-color: $consumer-highlight;
        z-index: -1;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

.bg-color-top-light-blue {
    position: relative;
    width: 100%;
    &::before {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 50%;
        background-color: $light-blue;
        left: 0;
        right: 0;
        top: 0;
    }
}

.bg-color-bottom-light-blue {
    position: relative;
    width: 100%;
    &::after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 50%;
        background-color: $light-blue;
        z-index: -1;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

// Border Color Configurations
.border-color-none {
    border: none;
}

.border-color-white {
    border: 2px solid $white;
}

.border-color-red {
    border: 2px solid $consumer-primary;
}

.border-color-black {
    border: 2px solid $black;
}

.padding-top-none {
    padding-top: 0;
}

.padding-bottom-none {
    padding-bottom: 0;
}

// Padding classes for slice configs
.padding-top-small {
    @include media-breakpoint-up(xs) {
        padding-top: 0.25rem;
    }
    @include media-breakpoint-up(md) {
        padding-top: 0.5rem;
    }
    @include media-breakpoint-up(lg) {
        padding-top: 1rem;
    }
}

.padding-top-medium {
    @include media-breakpoint-up(xs) {
        padding-top: .75rem;
    }
    @include media-breakpoint-up(md) {
        padding-top: 1rem;
    }
    @include media-breakpoint-up(md) {
        padding-top: 2rem;
    }
}

.padding-top-large {
    @include media-breakpoint-up(xs) {
        padding-top: 0.75rem;
    }
    @include media-breakpoint-up(md) {
        padding-top: 1.5rem;
    }
    @include media-breakpoint-up(lg) {
        padding-top: 3rem;
    }
}

.padding-bottom-small {
    @include media-breakpoint-up(xs) {
        padding-bottom: 0.25rem;
    }
    @include media-breakpoint-up(md) {
        padding-bottom: 0.5rem;
    }
    @include media-breakpoint-up(lg) {
        padding-bottom: 1rem;
    }
}

.padding-bottom-medium {
    @include media-breakpoint-up(xs) {
        padding-bottom: .75rem;
    }
    @include media-breakpoint-up(md) {
        padding-bottom: 1rem;
    }
    @include media-breakpoint-up(lg) {
        padding-bottom: 2rem;
    }
}

.padding-bottom-large {
    @include media-breakpoint-up(xs) {
        padding-bottom: 0.75rem;
    }
    @include media-breakpoint-up(md) {
        padding-bottom: 1.5rem;
    }
    @include media-breakpoint-up(lg) {
        padding-bottom: 3rem;
    }
}