:root {
    --navy: #02253d;
    --ink: #02253d;
}
/* Primary UI font */
@font-face {
font-family: "Galano";
src: url("../fonts/GalanoGrotesque-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}

/* Fixed footer bar at the bottom of the viewport */
.footer-bottom {
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
display: flex;
width: 100%;
height: 58px;
min-height: 58px;
align-items: center;
justify-content: center;
padding: 0 50px;
background: var(--navy);
box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.5); /* Top shadow for depth */
color: #fff;
}

/* Shared styles for links and paragraphs in footer */
.footer-bottom a,
.footer-bottom p {
margin: 0;
color: #fff;
font-family: Galano, Arial, sans-serif;
font-size: 14px;
letter-spacing: 1px;
}

.footer-terms:hover {
    background: linear-gradient(
        90deg,
        #02BCDD 0%,
        #06D1E5 20.71%,
        #64EDA8 48.26%,
        #D0F88D 100%
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}


.footer-bottom p a:hover {
    background: linear-gradient(
        90deg,
        #02BCDD 0%,
        #06D1E5 20.71%,
        #64EDA8 48.26%,
        #D0F88D 100%
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.footer-media a {
    transition: all 0.3s ease;
}

.footer-media a:hover {
    background: linear-gradient(
        90deg,
        #02BCDD 0%,
        #06D1E5 20.71%,
        #64EDA8 48.26%,
        #D0F88D 100%
    ) !important;
}

.footer-media a:hover i {
    color: #02BCDD !important;
}


/* Terms link — pinned to the left */
.footer-terms {
position: absolute;
left: 50px;
}

/* Copyright text — centered horizontally */
.footer-bottom p {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
white-space: nowrap;
}

/* Social icons group — pinned to the right */
.footer-media {
position: absolute;
right: 50px;
display: flex;
align-items: center;
gap: 20px;
}

/* Gradient text effect on hover */
.footer-bottom > a:hover,
.footer-bottom p a:hover {
background: var(--top-gradient);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* Circular border style for each social icon */
.footer-media a {
display: flex;
width: 35px;
height: 35px;
align-items: center;
justify-content: center;
padding: 1px;
border: double 1px transparent;
border-radius: 50%;
background-image: linear-gradient(#01243d, #01243d), linear-gradient(180deg, #000, #01758a);
background-origin: border-box;
background-clip: content-box, border-box;
color: #fff;
cursor: pointer;
font-size: 16px;
}

/* Filled gradient background on icon hover */
.footer-media a:hover {
border: none;
background-image: var(--top-gradient);
background-origin: border-box;
background-clip: border-box;
color: var(--ink);
}

/* Reset icon color on hover */
.footer-media a:hover i {
background: none;
color: var(--ink);
-webkit-text-fill-color: var(--ink);
}

/* ── Tablet (769px–1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
.footer-bottom {
height: 42px;
min-height: 42px;
justify-content: center;
padding: 0 12px;
}

/* Hide terms and social icons on tablet */
.footer-terms,
.footer-media {
display: none;
}

/* Reset centering — let text flow normally */
.footer-bottom p {
position: static;
transform: none;
white-space: normal;
}

.footer-bottom p,
.footer-bottom p a {
font-size: 10px;
text-align: center;
}
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
.footer-bottom {
height: 42px;
min-height: 42px;
justify-content: center;
padding: 0 12px;
}

/* Hide terms and social icons on mobile */
.footer-terms,
.footer-media {
display: none;
}

.footer-bottom p {
position: static;
transform: none;
white-space: normal;
}

.footer-bottom p,
.footer-bottom p a {
font-size: 10px;
text-align: center;
}
}

/* ── Small mobile (≤360px) ── */
@media (max-width: 360px) {
/* Slightly smaller text for very narrow screens */
.footer-bottom p,
.footer-bottom p a {
font-size: 9px;
}
}