.bg-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-image-top {
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-image-bottom {
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-image-right {
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-image-left {
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-image-con {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bg-image-con-left {
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
}

.bg-image-con-right {
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}

.bg-image-con-top {
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}

.bg-image-con-bottom {
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
}

.parallax {
    background-attachment: initial;
}

.text-image {
    /* background-image: url(/images/galaxy-11098_1920.webp); */ 
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* margin-top: 200px; */
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    background-position: center;
    -webkit-text-stroke: 1px #000000;
    letter-spacing: 6px;
    background-position: center;
    background-size: cover;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-size: cover;
    font-size: var(--medium); 
}

.bg-blend-mode {
    background-color: var(--bg-tint);
    background-blend-mode: multiply; 
}

@media (min-width: 375px) {
    .text-image {
        font-size: var(--large)
    }
}

@media (min-width: 768px) {
    .text-image {
        font-size: var(--xlarge)
    }
}

@media (min-width: 1024px) {
    .text-image {
        font-size: var(--xxlarge)
    }
}

@media (min-width: 1440px) {
    .parallax {
        background-attachment: fixed;
    }
}