:root {
    --footer-bg: #07110a;
    --footer-bg-2: #0c1710;
    --footer-card:
        rgba(255, 255, 255, .03);
    --footer-border:
        rgba(64, 255, 159, .08);
    --footer-text: #fff;
    --footer-muted: #89ab96;
    --footer-accent: #22d46c;
    --footer-accent2: #00e692;
    --footer-glow:
        rgba(34, 212, 108, .18);
    --footer-shadow:
        rgba(34, 212, 108, .18);
}
/* SPO */
.spo {
    --footer-bg: #050913;
    --footer-bg-2: #0d1325;
    --footer-card:
        rgba(255, 255, 255, .03);
    --footer-border:
        rgba(82, 140, 255, .09);
    --footer-text: #fff;
    --footer-muted: #8ea2d8;
    --footer-accent: #5b8dff;
    --footer-accent2: #00c8ff;
    --footer-glow:
        rgba(91, 141, 255, .20);
    --footer-shadow:
        rgba(91, 141, 255, .22);
}
/* ==========================
MAIN
========================== */
.footer-premium {
    background:
        linear-gradient(180deg,
            var(--footer-bg),
            var(--footer-bg-2));
    position: relative;
    overflow: hidden;
    padding: clamp(30px, 3.5vw, 90px) clamp(15px, 4vw, 60px) 40px;
    margin: clamp(10px, 0.5vw, 15px);
    border-radius: clamp(20px, 2.5vw, 40px);
    margin-top: clamp(30px, 3.5vw, 50px);
}
.footer-premium .container{
    padding:0px;
}
/* GLOW */
.footer-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(500px at 15% 10%,
            var(--footer-glow),
            transparent 70%),
        radial-gradient(600px at 90% 20%,
            var(--footer-glow),
            transparent 75%);
    opacity: .9;
}
.footer-premium::after {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgb(255 255 255 / 25%) 1px, transparent 1px);
    background-size: 16px 16px;
    filter: blur(0.5px);
    opacity: 1;
    pointer-events: none;
}
/* ==========================
GRID
========================== */
.footer-wrapper.f-part {
    position: relative;
    z-index: 2;
    max-width: 1600px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr 1fr;
    gap: 18px;
}
.footer-column {
    min-width: 0;
}
/* ==========================
CARD
========================== */
.footer-links {
    height: 100%;
    padding: clamp(15px, 2.5vw, 30px);
    background:
        var(--footer-card);
    border:
        1px solid var(--footer-border);
    border-radius: clamp(15px, 2.5vw, 30px);
    backdrop-filter: blur(7px);
    transition:
        transform .25s,
        border-color .25s,
        box-shadow .25s;
}
.footer-links:hover {
    transform:
        translateY(-6px);
    border-color:
        var(--footer-accent);
    box-shadow:
        0 20px 60px var(--footer-shadow);
}
/* ==========================
LOGO
========================== */
footer .logo {
    display: flex;
    gap: 8px;
    align-items: center;
    text-decoration: none;
    color: var(--footer-text);
    margin-bottom: 28px;
}
.logo img {
    /* width:60px; */
    /* filter:
drop-shadow(
0 0 18px
var(--footer-shadow)
); */
}
footer .logo span {
    color:#fff;
}
.logo small {
    /* display:block; */
    /* margin-top:8px; */
    /* font-size:13px; */
    /* color:var(--footer-muted); */
}
/* ==========================
CONTACTS
========================== */
.footer_phone {
    padding: 16px;
    border-radius: 18px;
    background:
        rgba(255, 255, 255, .02);
    margin-bottom: 12px;
    transition: .2s;
}
.footer_phone:hover {
    background:
        rgba(255, 255, 255, .05);
}
.footer_phone a {
    color: white;
    font-size: 19px;
    font-weight: 600;
    text-decoration: none;
}
.footer_phone a:hover {
    color:
        var(--footer-accent);
}
.footer_label,
.footer_label_pre {
    margin-top: 6px;
    font-size: 13px;
    color:
        var(--footer-muted);
}
/* ==========================
HEADINGS
========================== */
.footer-links h4 {
    color: white;
    font-size: 22px;
    margin-bottom: 30px;
}
.footer-links ul {
    display: grid;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.footer-links li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e5ffe1;
    text-decoration: none;
    transition: .2s;
    font-size: 16px;
}.spo .footer-links li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #c5cfde;
    text-decoration: none;
    transition: .2s;
}
.footer-links li a::before {
    content: "";
    width: 0;
    height: 2px;
    background:
        linear-gradient(90deg,
            var(--footer-accent),
            var(--footer-accent2));
    transition: .25s;
}
.footer-links li a:hover {
    transform:
        translateX(6px);
    color: white;
}
.footer-links li a:hover::before {
    /* width:18px; */
}
/* ==========================
SOCIAL
========================== */
.social-mess {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}
.social-mess a {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background:
        rgba(255, 255, 255, .04);
    transition: .25s;
    position: relative;
}
.social-mess a:hover {
    transform:
        translateY(-5px);
    background:
        rgba(255, 255, 255, .08);
    box-shadow:
        0 14px 40px var(--footer-shadow);
    border: 1px #21d36c solid;
}.spo .social-mess a:hover {
    transform:
        translateY(-5px);
    background:
        rgba(255, 255, 255, .08);
    box-shadow:
        0 14px 40px var(--footer-shadow);
    border: 1px #1991ee solid;
}
.social-mess img {
    width: 26px;
}
/* ==========================
BUTTON
========================== */
.bvi-open {
    height: 60px;
    margin-top: 24px;
    border: none;
    width: 100%;
    border-radius: 18px;
    cursor: pointer;
    font-weight: 600;
    color: white;
    background:
        linear-gradient(135deg,
            var(--footer-accent),
            var(--footer-accent2));
    transition: .25s;
    background: linear-gradient(135deg, #05b368, #247c28);
    color: #ffffff;
    box-shadow: 9px 20px 26px rgb(77 165 54 / 31%);
    font-size: 15px;
}.spo .bvi-open {
  
background:
        linear-gradient(135deg,
            var(--footer-accent),
            var(--footer-accent2));
  
transition: .25s;
  
color: #ffffff;
  
box-shadow: 9px 20px 26px rgb(54 114 165 / 31%);
}
.bvi-open:hover {
    transform:
        translateY(-3px);
    box-shadow:
        0 14px 50px var(--footer-shadow);
}
/* ==========================
BOTTOM
========================== */
.footer-wrapper:not(.f-part) {
    max-width: 1600px;
    /* margin:
26px auto 0; */
    padding: 18px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    /* border-top:
1px solid
var(--footer-border); */
}
.footer-wrapper:not(.f-part) .footer-links {
    padding: 0;
    background: none;
    border: none;
}
.footer-wrapper:not(.f-part) a {
    color:
        var(--footer-muted);
}
/* ==========================
TOP BUTTON
========================== */
#toTop {
    box-shadow:
        0 20px 60px var(--footer-shadow);
}
/* ==========================
RESPONSIVE
========================== */
@media(max-width:1200px) {
    .footer-wrapper.f-part {
        grid-template-columns:
            1fr 1fr;
    }
}
@media(max-width:760px) {
    .footer-wrapper.f-part {
        grid-template-columns:
            1fr;
    }
    .footer-wrapper:not(.f-part) {
        flex-direction: column;
    }
}
/* ========= TOP LINE ========= */
.footer-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background:
        linear-gradient(90deg,
            transparent,
            var(--footer-accent),
            var(--footer-accent2),
            transparent);
    opacity: .8;
    z-index: 2;
}
/* ========= GRID ========= */
.footer-grid-bg {
    position: absolute;
    inset: 0;
    opacity: .05;
    background:
        linear-gradient(to right,
            white 1px,
            transparent 1px),
        linear-gradient(to bottom,
            white 1px,
            transparent 1px);
    background-size:
        60px 60px;
    mask-image:
        linear-gradient(180deg,
            white,
            transparent);
    pointer-events: none;
}
/* ========= MAGNET ========= */
.footer-links {
    transform-style:
        preserve-3d;
}
.footer-links:hover {
    transform:
        translateY(-8px) rotateX(2deg) rotateY(-2deg);
}
/* ========= LIVE DOT ========= */
footer .live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;position: relative;
    border: none;
    right: initial;
    bottom: initial;
    background:
        var(--footer-accent);
    box-shadow:
        0 0 20px var(--footer-accent);
    animation:
        pulseDot 2s infinite;
}
@keyframes pulseDot {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.7);
        opacity: .4;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* ========= SOCIAL ========= */
.social-mess a {
    overflow: hidden;
}
.social-mess a::before {
    content: "";
    position: absolute;
    inset: -120%;
    background:
        linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .16),
            transparent);
    transition: 1s;
}
.social-mess a:hover::before {
    transform:
        translateX(250%);
}
/* ========= LOGO ========= */
.logo img {
    /* animation:
floatLogo
5s ease-in-out infinite; */
}
@keyframes floatLogo {
    0%,
    100% {
        transform:
            translateY(0);
    }
    50% {
        transform:
            translateY(-6px);
    }
}
/* ========= TO TOP ========= */
#toTop {
    overflow: hidden;
}
#toTop::before {
    content: "";
    position: absolute;
    inset: -100%;
    background:
        conic-gradient(transparent,
            rgba(255, 255, 255, .4),
            transparent);
    animation:
        spinRing 5s linear infinite;
}
#toTop img {
    position: relative;
    z-index: 2;
}
@keyframes spinRing {
    to {
        transform:
            rotate(360deg);
    }
}
/* ========= HOVER TEXT ========= */
.footer-links li a {
    position: relative;
}
.footer-links li a::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background:
        var(--footer-accent);
    transition: .3s;
}
.footer-links li a:hover::after {
    width: 100%;
}
/* ========= GOV LOGO ========= */
.footer-column>img {
    opacity: .65;
    transition: .4s;
    filter:
        grayscale(1);
}
.footer-column>img:hover {
    opacity: 1;
    transform:
        translateY(-4px);
    filter:
        grayscale(0);
}
/* ========= FOOTER DEPTH ========= */
.footer-wrapper.f-part {
    perspective:
        2000px;
}
/* ==========================
BOTTOM PREMIUM
========================== */
.footer-bottom {
    max-width: 1600px;
    margin:
        24px auto 0;
    padding:
        24px 32px;
    display: flex;
    justify-content:
        space-between;
    align-items:
        center;
    gap: 30px;
    border-top:
        1px solid var(--footer-border);
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .015),
            rgba(255, 255, 255, .01));
    backdrop-filter:
        blur(12px);
    border-radius:
        28px;
}
/* LEFT */
.footer-bottom-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.footer-copy {
    font-size: 17px;
    font-weight: 700;
    color:
        var(--footer-text);
}
.footer-legal-status {
    font-size: 13px;
    color:
        var(--footer-muted);
}
/* RIGHT */
.footer-bottom-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-bottom-nav a {
    height: 44px;
    padding:
        0 18px;
    display: flex;
    align-items: center;
    border-radius:
        999px;
    text-decoration: none;
    color:
        var(--footer-muted);
    background:
        rgba(255, 255, 255, .03);
    border:
        1px solid transparent;
    transition: .25s;
}
.footer-bottom-nav a:hover {
    color:
        white;
    border-color:
        var(--footer-accent);
    background:
        rgba(255, 255, 255, .05);
    transform:
        translateY(-2px);
    box-shadow:
        0 10px 30px var(--footer-shadow);
}
/* MOBILE */
@media(max-width:760px) {
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-bottom-nav {
        width: 100%;
    }
    .footer-bottom-nav a {
        flex: 1;
        justify-content: center;
    }
}