/* =========================================================
   33. FOOTER — FULL WIDTH FUTURISTIC
   ========================================================= */

.footer {

    width: 100%;

    margin-left: 0;
    margin-right: 0;

    padding:
        52px 40px 24px;

    background:
        linear-gradient(
            180deg,
            #080808 0%,
            #050505 55%,
            #030303 100%
        );

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

    box-sizing: border-box;

    position: relative;

    overflow: hidden;
}


/* =========================================================
   FUTURISTIC TOP GLOW
   ========================================================= */

.footer::before {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 70%;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 0, 70, 0.55),
            rgba(255, 255, 255, 0.18),
            rgba(255, 0, 70, 0.55),
            transparent
        );

    box-shadow:
        0 0 18px rgba(255, 0, 70, 0.18);

    pointer-events: none;
}


/* =========================================================
   SUBTLE GRID / TECH EFFECT
   ========================================================= */

.footer::after {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

    opacity: .25;

    pointer-events: none;
}


/* =========================================================
   FOOTER CONTAINER
   ========================================================= */

.footer-container {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr 1fr 1fr;

    align-items: center;

    gap: 35px;

    position: relative;

    z-index: 1;
}


/* =========================================================
   FOOTER COLUMNS
   ========================================================= */

.footer-left,
.footer-center,
.footer-right {

    display: flex;

    align-items: center;

    min-width: 50px;
}


/* =========================================================
   FOOTER LEFT
   ========================================================= */

.footer-left {

    gap: 16px;
    margin: right 0;
    margin-left: 0%;

    position: relative;
    width: 100px;
}


.footer-logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    transition:
        transform .3s ease,
        filter .3s ease;
}


.footer-logo:hover {

    transform:
        translateY(-2px);

    filter:
        drop-shadow(
            0 0 12px rgba(255, 0, 70, .18)
        );
}


.footer-logo img {

    width: 105px;

    max-width: 100%;

    height: auto;

    display: block;
}


.footer-left p,
.footer-center p {

    margin: 0;

    color: #707070;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 11px;

    line-height: 1.7;

    letter-spacing: .25px;
}


/* =========================================================
   FOOTER CENTER
   ========================================================= */

.footer-center {

    justify-content: center;

    gap: 11px;

    text-align: center;

    padding:
        8px 15px;
}


.footer-center::before {

    content: "";

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: var(--red);

    box-shadow:
        0 0 8px rgba(255, 0, 70, .55);

    flex-shrink: 0;
}


.whatsapp-logo {

    width: 31px;

    height: 31px;

    flex-shrink: 0;

    object-fit: contain;

    transition:
        transform .3s ease,
        filter .3s ease;
}


.footer-center:hover .whatsapp-logo {

    transform:
        translateY(-2px)
        scale(1.05);

    filter:
        drop-shadow(
            0 0 8px rgba(255, 255, 255, .12)
        );
}


/* =========================================================
   FOOTER RIGHT
   ========================================================= */

.footer-right {

    justify-content: flex-end;

    gap: 18px;

    flex-wrap: wrap;
}


.footer-right a {

    position: relative;

    color: #777;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 11px;

    font-weight: 500;

    letter-spacing: .3px;

    text-decoration: none;

    padding:
        5px 0;

    transition:
        color .25s ease,
        transform .25s ease;
}


/* =========================================================
   FOOTER LINK UNDERLINE
   ========================================================= */

.footer-right a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;

    height: 1px;

    background: var(--red);

    box-shadow:
        0 0 7px rgba(255, 0, 70, .45);

    transition:
        width .25s ease;
}


.footer-right a:hover,
.footer-right a.active {

    color: var(--red);

    transform:
        translateY(-1px);
}


.footer-right a:hover::after,
.footer-right a.active::after {

    width: 100%;
}


/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.footer-bottom {

    width: 100%;

    max-width: 1400px;

    margin:
        34px auto 0;

    padding-top: 18px;

    border-top:
        1px solid rgba(255, 255, 255, .055);

    text-align: center;

    position: relative;

    z-index: 1;
}


.footer-bottom::before {

    content: "";

    position: absolute;

    top: -1px;
    left: 50%;

    width: 70px;
    height: 1px;

    transform: translateX(-50%);

    background:
        var(--red);

    box-shadow:
        0 0 10px rgba(255, 0, 70, .25);
}


.footer-bottom p {

    margin: 0;

    color: #4f4f4f;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 10px;

    line-height: 1.7;

    letter-spacing: .35px;
}


/* =========================================================
   FOOTER RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .footer {

        padding:
            45px 30px 22px;
    }


    .footer-container {

        grid-template-columns:
            1fr 1fr;

        gap: 30px;
    }


    .footer-left {

        justify-content: flex-start;
    }


    .footer-center {

        justify-content: flex-end;
    }


    .footer-right {

        grid-column:
            1 / -1;

        justify-content: center;

        padding-top: 5px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .footer {

        padding:
            40px 25px 20px;
    }


    .footer-container {

        grid-template-columns:
            1fr;

        gap: 24px;

        text-align: center;
    }


    .footer-left,
    .footer-center,
    .footer-right {

        justify-content: center;
    }


    .footer-left {

        flex-direction: column;

        gap: 9px;
    }


    .footer-center {

        padding:
            5px 10px;
    }


    .footer-right {

        grid-column:
            auto;

        gap:
            10px 20px;

        padding-top: 0;
    }
}


/* =========================================================
   SMALL SCREENS
   ========================================================= */

@media (max-width: 500px) {

    .footer {

        padding:
            34px 18px 18px;
    }


    .footer::after {

        background-size:
            32px 32px;

        opacity: .18;
    }


    .footer-logo img {

        width: 90px;
    }


    .footer-left p,
    .footer-center p,
    .footer-right a {

        font-size: 10px;
    }


    .footer-left p {

        max-width: 240px;

        text-align: center;
    }


    .footer-center {

        gap: 9px;
    }


    .whatsapp-logo {

        width: 27px;

        height: 27px;
    }


    .footer-right {

        gap:
            8px 17px;
    }


    .footer-right a {

        padding:
            4px 0;
    }


    .footer-bottom {

        margin-top:
            25px;

        padding-top:
            14px;
    }


    .footer-bottom p {

        font-size: 9px;

        padding:
            0 5px;
    }
}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 360px) {

    .footer {

        padding:
            30px 14px 16px;
    }


    .footer-right {

        gap:
            7px 14px;
    }


    .footer-right a {

        font-size: 9px;
    }


    .footer-bottom p {

        font-size: 8.5px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .footer-logo,
    .whatsapp-logo,
    .footer-right a {

        transition: none;
    }
}