/* ==========================================
   NIGHT SKY GRADIENT BACKGROUND
   ========================================== */

#outer-space {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 600px;

    background: linear-gradient(
        to bottom,
        var(--body-bg) 0%,
        var(--body-bg) 10%,
        var(--layer-04) 100%
    );
    overflow: hidden;
}

#stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.star {
    position: absolute;
    background: var(--header-text);
    border-radius: 50%;
    animation: starTwinkle var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes starTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--header-text);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1),
                0 0 0 4px rgba(255, 255, 255, 0.1),
                0 0 8px rgba(255, 255, 255, 0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 3;

    /* The glowing tail */
    &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 120px;
        height: 2px;
        background: linear-gradient(
            to left,
            var(--brand, rgb(255, 110, 199)) 0%,
            rgb(255, 255, 255) 50%,
            rgba(255, 255, 255, 0) 100%
        );
        transform: translateY(-50%);
        border-radius: 100%;
    }

    /* Optional: second, fainter tail for more depth */
    &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 80px;
        height: 2px;
        background: linear-gradient(
            to left,
            var(--brand-light, rgba(255, 110, 199, 0.6)) 0%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 100%
        );
        transform: translateY(-50%);
        border-radius: 100%;
    }

    &.active {
        animation: shootingStar var(--duration, 500ms) linear;
    }
}

@keyframes shootingStar {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0) rotate(var(--angle, -10deg));
    }
    5% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    70% {
        opacity: 0.5;
    }
    85% {
        opacity: 0.2;
    }
    100% {
        opacity: 0;
        transform: translateX(var(--end-x, -120vw)) translateY(var(--end-y, 30vh)) rotate(var(--angle, -15deg));
    }
}

/*#moon {
    width: var(--input-size);
    height: var(--input-size);
    border-radius: 50%;
    position: absolute;
    top: 10%;
    right: 20%;
    z-index: 2;
    cursor: pointer;
    transition: var(--transition);
    
    &:hover {
        filter: brightness(1.2) drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
        transition: filter 0ms;
        transform: translateY(2px);
    }
    
    &:active {
        transform: scale(0.95) translateY(6px);
        filter: brightness(1.5) drop-shadow(0 0 40px rgba(255, 255, 255, 0.9));
        transition: filter 0ms, transform 50ms ease-out;
    }
}*/

#moon-container {
    width: var(--input-size);
    height: var(--input-size);
    border-radius: 50%;
    position: absolute;
    top: 10%;
    right: 20%;
    z-index: 2;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 0 10px 10px black !important;
    border: 1px solid var(--body-bg);

    /* Crescent shadow overlay */
    &::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        /* Don't use inset: 0 - it overrides left/right! */
        background-color: var(--body-bg);
        border-radius: var(--moon-btlr, 0) var(--moon-btrr, 0) var(--moon-bbrr, 0) var(--moon-bblr, 0);
        right: var(--moon-right, auto);
        left: var(--moon-left, auto);
        width: var(--moon-shadow-width, 0%);
        mask: var(--moon-mask, none);
        pointer-events: none;
        z-index: 1;
        overflow: hidden;

    }

     &::before {
        content: '';
        position: absolute;
        inset: -4px; /* Extends 2px outside */
        border-radius: 50%;
        border: 3px solid var(--body-bg); /* Thick border in background color */
        pointer-events: none;
        z-index: 10;
    }

    & #moon {
        /*width: var(--input-size);
        height: var(--input-size);
        border-radius: 50%;
        position: absolute;
        top: 10%;
        right: 20%;
        z-index: 2;
        cursor: pointer;
        transition: filter 1500ms ease-out, transform 50ms ease-out;
        overflow: hidden;*/
        image-rendering: crisp-edges;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: block;
        position: relative;

        
        transform: scale(1.1);transform-origin: center center;

        &:hover {
            filter: brightness(1.2) drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
            transition: filter 0ms;
        }
        
        &:active {
            transform: scale(0.95) translateY(3px);
            filter: brightness(1.5) drop-shadow(0 0 40px rgba(255, 255, 255, 0.9));
            transition: filter 0ms, transform 50ms ease-out;
        }
    }
}

@keyframes moonSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#moon-container.spinning {
    animation: moonSpin 1s ease-in-out;
}


/* Phase-specific shadow positioning */
/*#moon[phase*="first-quarter"],
#moon[phase*="waxing"] {
    --_ii: 0 auto;
}

#moon[phase*="crescent"],
#moon[phase*="first-quarter"],
#moon[phase*="waxing"] {
    --_bblr: 100%;
    --_btlr: 100%;
}

#moon[phase*="crescent"],
#moon[phase*="last-quarter"],
#moon[phase*="waning"] {
    --_btrr: 100%;
    --_bbrr: 100%;
}

#moon[phase="waxing gibbous"]::after {
    border-radius: 0;
    width: 100%;
    mask: radial-gradient(circle at 100% 50%,
        #0000 calc(100% - var(--_w)),
        #000 calc(100% - var(--_w) + 1px));
}

#moon[phase="waning gibbous"]::after {
    border-radius: 0;
    width: 100%;
    mask: radial-gradient(circle at 0% 50%,
        #0000 calc(100% - var(--_w)),
        #000 calc(100% - var(--_w) + 1px));
}*/

#ufo {
    position: absolute;
    top: 20%;
    right: -100px;
    width: 60px;
    height: 30px;
    z-index: 4;
    opacity: 0;

    &.flying {
        animation: ufoFlight 8s ease-in-out;
    }

    .ufo-dome {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 35px;
        height: 20px;
        background: linear-gradient(to bottom, var(--brand-light, #ff9ed8) 0%, var(--brand, #ff6ec7) 100%);
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
        box-shadow: 0 0 10px rgba(255, 110, 199, 0.5);
    }

    .ufo-body {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 12px;
        background: linear-gradient(to bottom, var(--gray-30) 0%, var(--gray-25) 100%);
        border-radius: 50%;
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);

        display: flex;
        align-items: center;
        justify-content: space-between;

        .ufo-light {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            animation: ufoLightBlink 0.8s ease-in-out infinite;

            &:nth-child(1) { 
                left: 6px; 
                background: var(--error);
                box-shadow: 0 0 4px var(--error);
                animation-delay: 0s; 
            }
            &:nth-child(2) { 
                left: 17px; 
                background: var(--warning);
                box-shadow: 0 0 4px var(--warning);
                animation-delay: 0.16s; 
            }
            &:nth-child(3) { 
                left: 28px; 
                background: var(--success);
                box-shadow: 0 0 4px var(--success);
                animation-delay: 0.32s; 
            }
            &:nth-child(4) { 
                left: 39px; 
                background: var(--error);
                box-shadow: 0 0 4px var(--warning);
                animation-delay: 0.48s; 
            }
            &:nth-child(5) { 
                left: 50px; 
                background: var(--warning);
                box-shadow: 0 0 4px var(--error);
                animation-delay: 0.64s; 
            }
        }
    }

    & .ufo-beam {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 0px solid transparent;
        border-right: 0px solid transparent;
        border-top: 0px solid rgba(255, 110, 199, 0);
        opacity: 0;
        filter: blur(3px);
        pointer-events: none;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 0;
            background: linear-gradient(
                to bottom,
                var(--brand, #ff6ec7) 0%,
                rgba(255, 110, 199, 0.5) 50%,
                rgba(255, 110, 199, 0) 100%
            );
            box-shadow: 
                0 0 20px var(--brand, #ff6ec7),
                0 0 40px var(--brand, #ff6ec7);
            animation: beamShimmer 0.3s ease-in-out infinite alternate;
        }

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 0;
            background: repeating-linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.8) 0px,
                rgba(255, 255, 255, 0) 10px,
                rgba(255, 255, 255, 0) 20px
            );
            animation: beamParticles 0.8s linear infinite;
        }

        &.active {
            animation: beamDeploy 4s ease-in-out;

            &::before {
                animation: beamCore 4s ease-in-out, beamShimmer 0.3s ease-in-out infinite alternate;
            }

            &::after {
                animation: beamCore 4s ease-in-out, beamParticles 0.8s linear infinite;
            }
        }
    }

    & #cow {
        position: absolute;
        top: calc(100% + 400px); /* Move it way down to beam tip */
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 30px;
        z-index: 5;
        opacity: 0;
        bottom: 0;

        &.visible {
            opacity: 1;
        }

        &.abducted {
            animation: cowAbducted 2.5s ease-in forwards;
        }

        & .cow-body {
            position: absolute;
            bottom: 10px;
            left: 5px;
            width: 30px;
            height: 18px;
            background: #fff;
            border-radius: 40% 40% 30% 30%;
            border: 2px solid #000;

            & .cow-spot {
                position: absolute;
                background: #000;
                border-radius: 50%;

                &:nth-child(1) { top: 3px; left: 5px; width: 8px; height: 6px; }
                &:nth-child(2) { top: 8px; right: 7px; width: 6px; height: 5px; }
                &:nth-child(3) { bottom: 4px; left: 12px; width: 5px; height: 4px; }
            }
        }

        & .cow-head {
            position: absolute;
            bottom: 12px;
            left: -8px;
            width: 12px;
            height: 14px;
            background: #fff;
            border: 2px solid #000;
            border-radius: 40% 40% 30% 30%;

            &::before,
            &::after {
                content: '';
                position: absolute;
                width: 4px;
                height: 6px;
                background: #fff;
                border: 1px solid #000;
                border-radius: 50%;
            }
            &::before { top: -2px; left: 1px; }
            &::after { top: -2px; right: 1px; }

        }

        & .cow-leg {
            position: absolute;
            bottom: 0;
            width: 3px;
            height: 12px;
            background: #fff;
            border: 2px solid #000;
            border-radius: 2px;

            &:nth-child(1) { left: 8px; }
            &:nth-child(2) { left: 14px; }
            &:nth-child(3) { left: 20px; }
            &:nth-child(4) { left: 26px; }
        }

        & .cow-tail {
            position: absolute;
            right: -5px;
            bottom: 15px;
            width: 8px;
            height: 2px;
            background: #000;
            border-radius: 2px;
            transform: rotate(-30deg);
        }
    }
}

@keyframes ufoLightBlink {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes ufoFlight {
    0% {
        opacity: 0;
        right: -100px;
        transform: translateY(0) rotate(10deg);
    }
    10% {
        opacity: 1;
        transform: translateY(0) rotate(10deg);
    }
    35% { /* Arrives at center */
        right: 50%;
        transform: translateY(0) rotate(0deg);
    }
    40% { /* Smoothly hovers down */
        right: 50%;
        transform: translateY(15px) rotate(0deg);
    }
    70% { /* Stays hovering */
        right: 50%;
        transform: translateY(15px) rotate(0deg);
    }
    75% { /* Beam retracts, UFO rises */
        right: 50%;
        transform: translateY(0) rotate(0deg);
    }
    90% {
        opacity: 1;
        transform: translateY(0) rotate(-10deg);
    }
    100% {
        opacity: 0;
        right: -100px;
        transform: translateY(0) rotate(-10deg);
    }
}

@keyframes beamShimmer {
    0% { opacity: 0.8; transform: translateX(-50%) scaleX(1); }
    100% { opacity: 1; transform: translateX(-50%) scaleX(1.3); }
}

@keyframes beamParticles {
    0% { background-position: 0 0; }
    100% { background-position: 0 20px; }
}

@keyframes beamDeploy {
    0% {
        opacity: 0;
        border-left-width: 0px;
        border-right-width: 0px;
        border-top-width: 0px;
    }
    20% {
        opacity: 0.6;
        border-left-width: 30px;
        border-right-width: 30px;
        border-top-width: 200px;
        border-top-color: rgba(255, 110, 199, 0.3);
    }
    80% {
        opacity: 0.6;
        border-left-width: 30px;
        border-right-width: 30px;
        border-top-width: 200px;
        border-top-color: rgba(255, 110, 199, 0.3);
    }
    100% {
        opacity: 0;
        border-left-width: 0px;
        border-right-width: 0px;
        border-top-width: 0px;
    }
}

@keyframes beamCore {
    0%, 100% {
        height: 0;
    }
    20%, 80% {
        height: 200px;
    }
}

@keyframes cowAbducted {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) rotate(0deg);
    }
    15% {
        transform: translateX(-50%) translateY(-20px) rotate(-8deg);
    }
    30% {
        transform: translateX(-50%) translateY(-40px) rotate(8deg);
    }
    50% {
        opacity: 0.8;
        transform: translateX(-50%) translateY(-140px) rotate(-5deg);
    }
    70% {
        opacity: 0.4;
        transform: translateX(-50%) translateY(-170px);
    }
    85% {
        opacity: 0.1;
        transform: translateX(-50%) translateY(-185px);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-190px) rotate(0deg);
    }
}

/* SVG CLASSES HAVE TO BE CALL EXPLISITLY AND NOT HAVE ANY STYLE DECLARATIONS IN THE SVG FILE ITSELF IN ORDER TO ADJUST IT PROGRAMATICALLY HERE */

svg rect.building-window {
    fill: var(--brand);
    opacity: 0.8;
    animation: windowFlicker var(--flicker-duration, 3s) ease-in-out infinite;
    animation-delay: var(--flicker-delay, 0s);
}

@keyframes windowFlicker {
    0%, 100% { 
        opacity: 0.3; 
        fill: var(--body-bg, #ffd700);
    }
    50% { 
        opacity: 1; 
        fill: var(--warning, #ffed4e);
    }
}

html {

    & body {

        /*

        ▗▄▄▖  ▗▄▖ ▗▄▄▖  ▗▄▖ ▗▖   ▗▖    ▗▄▖ ▗▖  ▗▖
        ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌▐▌   ▐▌   ▐▌ ▐▌ ▝▚▞▘ 
        ▐▛▀▘ ▐▛▀▜▌▐▛▀▚▖▐▛▀▜▌▐▌   ▐▌   ▐▛▀▜▌  ▐▌  
        ▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌▐▙▄▄▖▐▙▄▄▖▐▌ ▐▌▗▞▘▝▚▖

        */

        & #parallax {

            padding: 0px;
            margin  : 50vh 0px -1px 0px;
            width: 100%;
            height: 150vh;
            aspect-ratio: 16/9;
            background-color: var(--body-bg);
            position: relative;
            overflow: hidden;
            z-index: 0;

            /*#night-sky-contaner {

                background: linear-gradient(to bottom, var(--body-bg), var(--color-10))
                z-index: 1;

            }*/

            & .plx_layer {
                /*background-size: 100% auto;
                background-repeat: no-repeat;
                background-position: bottom center;
                position: absolute; top: 0; right: 0; bottom: 0; left: 0;*/

                /*
                The SVG element itself (which has plx_layer class) must be positioned
                and sized to fill the #parallax container.
                */
                position: absolute;
                bottom: 0; /* Anchor the SVG to the bottom of the parallax container */
                left: 0;
                
                /* 1. Control the size/width */
                width: 100%; /* Make the SVG stretch to the full width of #parallax */
                
                /* 2. Remove default background properties */
                background-color: transparent; /* SVG element itself doesn't need background */
                background-image: none;
                
                /* 3. Ensure the height is automatically scaled to maintain the viewBox aspect ratio */
                height: auto;
            }
            
            & .layer1  { z-index: 2; } 
            & .layer2  { z-index: 3; }
            /*& .layer3  { z-index: 3; margin-top: 80px; }
            & .layer4  { z-index: 4; margin-top: 200px !important; }
            & .layer5  { z-index: 5; margin-top: 80px; }*/

            & .layer3  { z-index: 4; }
            & .layer4  { z-index: 5; }
            & .layer5  { z-index: 6; }
            & .layer6  { z-index: 7; }
            & .layer7  { z-index: 8; }
            & .layer8  { z-index: 9; }
            & .layer9  { z-index: 10; }
            & .layer10 { z-index: 111; }

            & .layer1  { fill: var(--layer-01); }
            & .layer2  { fill: var(--layer-02); }
            & .layer3  { fill: var(--layer-03); }
            & .layer4  { fill: var(--layer-04); }
            & .layer5  { fill: var(--layer-05); }
            & .layer6  { fill: var(--layer-06); }
            & .layer7  { fill: var(--layer-07); }
            & .layer8  { fill: var(--layer-08); }
            & .layer9  { fill: var(--layer-09); }
            & .layer10 { fill: var(--layer-10); }

        }

        & .footer-city-fence,
        & .footer-city-buildings {
            width: 100%;
            display: flex;
            justify-content: space-between;

            margin: 0px;
            padding: 0px;

            left: 0;
            right: 0;
            bottom: 2px; 

            background-color: var(--footer-bg);

            & [class^="col-"] {
                padding: 0;
                margin: 0;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
            }

            & div {
                padding: 0px !important;
                margin: 0px !important;
            }
        }

        & .footer-city-buildings {

            background-color: var(--layer-06);
            align-items: flex-start;
            margin-bottom: -12px !important;

            & i {

                color: var(--footer-bg);
                display: inline;

                &::before {

                    /* KEEP WINDOWS TRANSPARENT SO THE BACKGROUND COLOR SHOWS THROUGH */
                    /*opacity: 0 !important;*/
                }
            }
        }

        & .footer-city-fence {
            color: var(--footer-text);
            align-items: flex-end;
            position: absolute;
            bottom: -5px;

            & i {
                color: var(--subfooter-bg);
                display: inline;

                &:not(:last-child) {
                    margin-right: 5px;
                } 
            }
        }

        /*
        ▗▄▄▄▖ ▗▄▖  ▗▄▖▗▄▄▄▖▗▄▄▄▖▗▄▄▖ 
        ▐▌   ▐▌ ▐▌▐▌ ▐▌ █  ▐▌   ▐▌ ▐▌
        ▐▛▀▀▘▐▌ ▐▌▐▌ ▐▌ █  ▐▛▀▀▘▐▛▀▚▖
        ▐▌   ▝▚▄▞▘▝▚▄▞▘ █  ▐▙▄▄▖▐▌ ▐▌

        */

        & footer {

            width: 100%;
            padding: var(--gap) !important;
            margin: 0;
            font-weight: lighter;
            background-color: var(--footer-bg);
            position: relative;

            color: var(--color-30) !important;

            & * {
                color: var(--color-30) !important;

                
            }

            & .client-type-icon {
                margin-right: 0px 30px -30px 0px;
                font-size: 300px;
                color: var(--color-03);
                position: absolute;
                bottom: -30px;
                right: 30px;
            }

            & .tab-content {
                height: fit-content;
            }

            ul {

                li {

                    background: transparent !important;

                    & a.nav-link {
                        background-color: var(--layer-06);

                        &:hover {
                            color: var(--brand);
                            background-color: var(--brand-light);

                            & * {
                                color: var(--brand);
                            }
                        }

                        & * {
                            color: var(--color-38);
                        }

                        & .badge {
                            background-color: var(--footer-bg);
                        }
                    }
                    
                    &.active,
                    &.active:hover {
                        color: var(--white);
                        background-color: var(--brand);

                        &  * {
                            color: var(--white);
                        }

                        & .badge {
                            color: var(--brand);
                            background-color: var(--white);
                        }
                    }
                }
            }

            & #browse-properties {

                margin-top: 100px;
                margin-bottom: 100px;

                & * {

                    box-shadow: none;
                }

                & h1 {

                    color: var(--header-bg);
                    font-size: 70px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: var(--gap);

                    & * {
                        color: var(--header-bg);
                        font-size: var(--gap);
                    }

                }

                & .radchecks[role="tablist"] {

                    & a {

                        justify-content: space-between;

                        color: var(--footer-bg);
                        background-color: var(--footer-browse-tabs);
                        
                        & * { color: var(--footer-bg); }

                        &:hover {
                            /*color: var(--header-bg);*/
                            background-color: var(--footer-browse-tabs-hover);
                            /*& * { color: var(--header-bg); }*/
                        }

                        &.active,
                        &:active {
                            /*color: var(--header-bg);*/
                            background-color: var(--footer-browse-tabs-active);
                            /*& * { color: var(--header-bg); }*/
                        }
                    }

                }

                & .tab-content {
                    margin-bottom: 0px !important;
                }

                & .radchecks {
                    /*margin-right: 0px;*/
                    margin-top: var(--gap);
                    margin: 0px !important;

                    & li {

                        & a {

                            justify-content: space-between;

                            color: var(--header-bg);
                            background-color: transparent;
                            & * { color: var(--header-bg); }

                            &:hover {
                                color: var(--header-bg);
                                background-color: var(--button-hover);
                                & * { color: var(--header-bg); }
                            }

                            &.active,
                            &:active {
                                color: var(--header-bg);
                                background-color: var(--button-active);
                                & * { color: var(--header-bg); }
                            }
                        }

                        /*& a {

                            background-color: transparent;

                            &:hover {
                                color: var(--white);
                                background-color: rgba(255, 255, 255, .033);

                                & * {
                                    color: var(--white);
                                }
                            }

                            &.active,
                            &:active,
                            &:active:hover {
                                background-color: rgba(255, 255, 255, .1);
                            }

                            & .badge { 
                                color: var(--subfooter-bg); 
                            }
                        }*/
                    }
                }
            }

            & #footer-widgets {

                margin-bottom: 100px;

                & .widget {

                    padding: 15px;
                    padding-bottom: 0px;
                    margin-bottom: 0px;
                    height: 100%;
                    background-color: rgba(255,255,255,.0) !important;
                    border-color: rgba(255,255,255,.1) !important;
                    border: 0;

                    & .widget-title {
                        padding-bottom: 12px;
                        margin-bottom: 15px;
                        color: #373D46;
                        font-size: 18px;
                        text-transform: uppercase;
                        border-bottom: 1px solid var(--footer-text);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    & .tagcloud {

                        padding-left: 15px;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;

                        & a {
                            padding: 5px 15px;
                            margin: 0px 15px 15px 0px;
                            color: var(--footer-text) !important;
                            font-size: 18px;
                            text-align: center;
                            background-color: rgba( 255, 255, 255, .1 );
                            border-radius: 16px;
                            display: inline;

                            &:hover {
                                color: var(--white) !important;
                                background-color: rgba( 255, 255, 255, .2 ) !important;
                            }
                        }
                    }

                    & ul {

                        padding-left: 15px;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;

                        & li {

                            padding: 5px 15px;
                            margin: 0px 15px 15px 0px;
                            background-color: rgba( 255, 255, 255, .1 );
                            border-radius: 16px;

                            &:hover a { 

                                color: var(--white) !important; 

                            }

                            & a { 

                                color: var(--footer-text) !important; 

                            }
                        }
                    }
                }
            }

            /*
             ▗▄▄▖▗▖ ▗▖▗▄▄▖ ▗▄▄▄▖ ▗▄▖  ▗▄▖▗▄▄▄▖▗▄▄▄▖▗▄▄▖ 
            ▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌   ▐▌ ▐▌▐▌ ▐▌ █  ▐▌   ▐▌ ▐▌
             ▝▀▚▖▐▌ ▐▌▐▛▀▚▖▐▛▀▀▘▐▌ ▐▌▐▌ ▐▌ █  ▐▛▀▀▘▐▛▀▚▖
            ▗▄▄▞▘▝▚▄▞▘▐▙▄▞▘▐▌   ▝▚▄▞▘▝▚▄▞▘ █  ▐▙▄▄▖▐▌ ▐▌            

            */

            /* When container is narrow (items wrap to separate lines) */
            /*@container subfooter (max-width: 768px) {
                & .tagline {
                    justify-content: center;
                    margin-bottom: calc(var(--gap) * 2);
                }
                
                & .brand-social-icons {
                    justify-content: center;
                    
                    & ul {
                        justify-content: center;
                    }
                }
            }*/

            & .subfooter {

                container-type: inline-size;
                container-name: subfooter;

                width: 100%;
                /*padding: var(--gap);*/
                margin-top: var(--gap);
                color: var(--subfooter-text); 
                background-color: var(--subfooter-bg);
                bottom: 0;
                z-index: 4;
                width: 100%;
                bottom: 0;
                z-index: 1;
                padding-bottom: 80px;

                /*& *:not(i) {
                    font-weight: normal !important;
                }*/

                & a { 
                    
                    color: var(--subfooter-text); 

                    &:hover {
                        background-color: transparent;
                        color: var(--header-text);
                        /*text-decoration: underline;*/
                    }
                    &:active {
                        color: var(--color-26) !important;
                    }
                }

                & a.nav-link {

                    color: var(--subfooter-text);
                    background-color: var(--subfooter-bg);
                    width: fit-content;
                    transition: var(--transition);

                    & * {
                        /*color: #292B51;*/
                        transition: var(--transition);
                    }

                }

                & .tagline, 
                & .brand-social-icons {
                    margin-bottom: var(--gap);
                    display: flex;
                    align-items: center;

                    font-size: 24px !important;
                    font-weight: 400;
                }

                & .tagline {

                    
                    font-size: 24px !important;
                    font-weight: 400;

                    & * { font-size: 24px !important; }

                    /*& .icon:first-of-type {
                        width: auto;
                        min-width: auto;
                        margin-right: 15px;
                    }*/

                    & i {
                        
                        color: var(--subfooter-text);
                        font-size: 20px;

                        &.fa-location-dot {
                            margin: 5px -6px;
                        }
                        
                        &.fa-heart { 

                            color: var(--heart); 
                            margin: 6px 6px;

                            &::after {
                                opacity: 0.6 !important;
                            }

                        }

                        &.heart {
                            color: var(--heart) !important;
                        }


                        &.heart-beat {
                            overflow: visible;
                            overflow-x: visible;
                            overflow-y: visible;
                            animation: heart-beat 2000ms linear infinite !important;
                            backface-visibility: hidden;
                        }

                        &.fa-mug, &.fa-mug-hot, &.fa-coffee-pot {
                            margin: 4px 6px;
                            color: var(--coffee) !important;
                        }

                    }
                }

                & .brand-social-icons {

                    max-width: 100%;
                    justify-content: flex-end;

                    & ul {

                        width: 100%;
                        justify-content: space-between;

                        & li {

                            &:not(:last-child) {
                                margin-right: 15px !important;
                                min-width: var(--input-size) !important;
                            }

                            & a {

                                background-color: var(--color-30);

                                min-width: var(--input-size) !important;
                                min-height: var(--input-size);
                                max-width: var(--input-size) !important;

                                &:not(:last-child) {
                                    margin-right: 5px;
                                }

                                & i {
                                    color: var(--footer-bg) !important;
                                    font-size: 28px;
                                }

                                &:hover {
                                    background: var(--header-text);
                                }

                                &:active {
                                    background: var(--color-26);
                                }
                            }
                        }
                    }

                    & svg.eoe path:first-child {
                        fill: transparent;
                    }
                    & svg.eoe path:not(:first-child),
                    & a svg:not(.eoe) path {
                        fill: var(--subfooter-text);
                    }
                    & a:hover svg.eoe path:not(:first-child),
                    & a:hover svg:not(.eoe) path {
                        fill: var(--white);
                    }
                }

                & .fine-print {

                    font-size: 14px !important;
                    line-height: 21px;
                    font-weight: normal;
                    text-align: justify;
                    
                    & * {
                        font-size: 14px !important;
                        line-height: 21px;
                        font-weight: normal;
                    }

                    /*a { text-decoration: underline; }*/

                    & i {
                        color: var(--subfooter-text);
                    }

                    & ul { 

                        display: inline-flex; 

                    }

                    & span:not(.powered-by)::before {
                        content: ' \00a0 | \00a0 ';
                    }

                    & .subfooter-menu { 

                        margin-left: 5px; 

                        & li {

                            &:not(last-child) { 
                                margin-right: 5px; 
                            }

                            &:not(.powered-by)::before {
                                content: ' \00a0 | \00a0 ';
                            }

                            & a { 

                                background-color: transparent !important;

                                &:hover {
                                    background-color: transparent !important;
                                }
                            }
                        }
                    }
                }
            }   
        }

        & .fixed-tools {

            padding: 15px !important;
            position: fixed;
            bottom: var(--gap);
            right: var(--gap);
            flex-direction: row-reverse !important;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            background-color: var(--header-bg);
            opacity: 1;
            z-index: 999;
            
            border: 1px solid var(--box-border) !important;
            /*background-color: var(--header-bg) !important;*/

            &.show,
            &.slide-up {
                z-index: 100;
                opacity: 1;
                /*transform: translateY(0px) !important;*/
            }

            &.show-primary-nav {

                & .nav-item:not(.scroll-up) {
                    position        : relative;
                    opacity         : 1;
                    transform       : translateX(0);
                    pointer-events  : auto;
                    z-index         : auto;
                }
            }

            & .nav-item {

                &:nth-child(1) { transition-delay: 200ms; }
                &:nth-child(2) { transition-delay: 150ms; }
                &:nth-child(3) { transition-delay: 100ms; }
                &:nth-child(4) { transition-delay: 50ms; }
                &:nth-child(5) { transition-delay: 0ms; }

            }

            & li {
            
                margin: 0 !important;
                transition: none !important; 

                &:not(:first-child) {
                    margin-right: 15px !important;
                }

                &.scroll-up {

                    display: none;
                    /*box-shadow: 0px 0px 0px 15px var(--white);
                    border-radius: 0px !important;*/
                }

                & .visible {
                    
                    transform       : translateX(0px);
                    opacity         : 1;
                    z-index         : 9999;
                }

                &:not(.visible) {
                    position        : absolute;
                    /*top             : 0;
                    left            : right;
                    transform       : translateX(300px);*/
                    opacity         : 0;
                    z-index         : -1;
                    pointer-events  : none;
                }
                
                /*&:not(.scroll-up) {
                    position        : absolute;
                    top             : 0;
                    left            : right;
                    transform       : translateX(300px);
                    opacity         : 0;
                    transition      : var(--transition);
                    z-index         : -1;
                    pointer-events  : none;
                }*/

                & a:not(:has(.text)) {
                    width: var(--input-size);
                    max-width: var(--input-size);
                }

                & a {
                    color: var(--header-text) !important;
                    background-color: var(--box-border) !important;

                    &:hover {
                        color: var(--header-text) !important;
                        background-color: var(--button-hover) !important;
                    }

                    &:active {
                        color: var(--white) !important;
                        background-color: var(--button-active) !important;
                    }
                }
            }
        }
    }
}