uix-home-page hr {
    border: none;
    border-top: 2px solid grey;
    width: 90%;
    margin: 10px auto;
}
uix-home-page .front-page {
    margin-top: -70px;
    padding-top: 70px;
    height: 100vh;
    position: relative;
    width: 100%;
    overflow-x: clip;
    color: white;
    --unyt-text-primary: var(--unyt-dark-text-primary);
    --unyt-text-secondary: var(--unyt-dark-text-secondary);
    & .unyt-tag {
        --unyt-text-primary: var(--unyt-light-text-primary);
        --tag-bg-primary: var(--unyt-dark-text-primary);
    }

uix-home-page     & .unyt-button.primary {
        --button-bg-primary: var(--unyt-dark-button-primary);
        --button-border-primary: var(--unyt-dark-button-primary);
        --button-text-primary: var(--unyt-light-text-primary);
    }

uix-home-page     & .background-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 130svh;
        mask-image: linear-gradient(rgb(0 0 0 / 100%) 45%, transparent);
        pointer-events: none;
        user-select: none;

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

uix-home-page     & section {
        height: 100%;
        display: flex;
        justify-content: center;
        padding-bottom: 200px;
    }

uix-home-page     & div.cta-buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        max-width: 330px;
        margin: auto;
        & > button {
            min-width: 140px;
            flex: 1;
            & > a {
                word-break: keep-all;
                white-space: nowrap;
            }
        }
    }
}

uix-home-page .hero-section {
    position: relative;
    z-index: 1;
}

uix-home-page section {
    height: 100%;
    display: flex;
    justify-content: center;
    &:not(.no-margin) {
        margin-top: 80px;
    }
}

uix-home-page .supranet-section {
    padding-top: 120px;
    padding-bottom: 80px;
}

@media screen and (max-width: 700px) {
uix-home-page     .no-margin {
        padding-top: 0;
        padding-bottom: 0;
    }

uix-home-page     section:not(.no-margin) {
        margin-top: 40px;
    }

uix-home-page     .supranet-section {
        padding-top: 80px;
        padding-bottom: 40px;
    }

uix-home-page     uix-cards-wrapper {
        --card-gap-y: 1rem !important;
        --card-gap-x: 1rem !important;
    }
}
uix-home-page .image {
    min-width: 300px;
    & img[src*="datex.jpg"] {
        filter: hue-rotate(60deg) saturate(1.4);
    }
uix-home-page     & img[src*="uix.jpg"] {
        filter: hue-rotate(60deg) saturate(1.4);
    }
}

uix-home-page .front-section {
    position: relative;
    z-index: 1;
}

uix-home-page .support-section .unyt-banner {
    --banner-text-primary: var(--unyt-dark-text-primary);
}

uix-home-page .scroll-indicator {
    animation: bounce 2s infinite;
    color: white;
    font-size: 3rem;
    opacity: 0.2;
    z-index: 1;
}
uix-home-page .core-focus {
    filter: grayscale(1) brightness(1.5) opacity(0.8);
}

uix-home-page .chevron {
    position: absolute;
    bottom: 0px;
    transition: opacity 0.3s ease-in-out;
    height: 140px;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
uix-home-page .chevron.hidden {
    opacity: 0;
}

uix-home-page .frames {
    z-index: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

uix-home-page .frame {
    position: absolute;
    width: 100%;
    height: 100%;
}

uix-home-page .canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

@media screen and (max-width: 700px) {
uix-home-page     .front-page {
        padding-top: 0;
        & > section {
            padding-top: 140px;
            justify-content: flex-start !important;
        }
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@media screen and (min-width: 700px) {
uix-home-page     .values-section {
        margin-top: 160px !important;
    }

uix-home-page     .hero-section {
        padding: 0 !important;
    }
}

@media (max-width: 1100px) {
uix-home-page     blockquote {
        font-size: 1.5rem !important;
    }

uix-home-page     .animate, uix-home-page .animate-reverse {
        animation-duration: 0.3s !important;
        animation-timing-function: ease-out !important;
        animation-range: entry 20% cover 50% !important;

        &.left, &.right {
            transform: none !important;
        }
    }
}