.white-bg {
    background-color: white;
}

.zr-gray-bg {
    background-color: var(--zr-gray);
    color: black;
}

.zr-blue-bg {
    background-color: var(--zr-blue);
    color: white;
}

.zr-blue-bg h2 {
    color: white;
    text-shadow: 2px 2px 2px var(--zr-darkblue);
}

.zr-darkblue-bg {
    background-color: var(--zr-darkblue);
}

.zr-darkblue-bg h2 {
    color: white;
    text-shadow: 2px 2px 2px var(--zr-blue);
}

.zr-orange-bg {
    background-color: var(--zr-orange);
}

.zr-orange-bg-v2 {
    background-color: var(--zr-orange);
    position: relative;
    color: var(--white);
    font-size: 5rem;
    overflow: hidden;
    z-index: 1;
}

.zr-orange-bg h2 {
    color: white;
    text-shadow: 2px 2px 2px var(--zr-darkorange);
}

.zr-orange-bg-v2 h2 {
    color: white;
    text-shadow: 2px 2px 2px var(--zr-darkorange);
}

.zr-darkorange-bg {
    background-color: var(--zr-darkorange);
}

.zr-darkorange-bg h2 {
    color: white;
    text-shadow: 2px 2px 2px var(--zr-orange);
}

.card,
.card::before,
.card::after {
    display: none;
}

.zr-lightblue-bg {
    background-color: var(--zr-lightblue);
    color: white;
    text-shadow: 2px 2px 2px var(--zr-darkblue);
    position: relative;
    color: var(--white);
    overflow: hidden;
    z-index: 1;
}

.zr-lightblue-bg h2 {
    color: white;
    text-shadow: 2px 2px 2px var(--zr-darkblue);
}

.zr-lightblue-bg::before {
    content: "";
    display: block;
    z-index: -1;
    padding: 100%;
    position: absolute;
    left: 0rem;
    top: 0rem;
    transform: rotate(0deg);
    background-image: linear-gradient(to right, rgba(0, 135, 222, .6), rgba(0, 135, 222, 1), rgba(0, 135, 222, .6)), radial-gradient(white, rgb(255, 255, 255, 8%) 0.35rem, transparent .25rem);
    background-size: 50% 1%, 2rem 2rem;
}

.zr-fire-small-txt {
    color:var(--zr-fire-small-txt);
}
.zr-fire-large-txt {
    color:var(--zr-fire-large-txt);
}