/* ========== PREMIUM FOOTER ========== */
.premium-footer {
  position: relative;
  width: 100%;
  z-index: 1;
  overflow: hidden; /* important */
}

/* Background image layer */
.premium-footer::before {
  content: "";
  position: absolute;
  inset: 0;

  background: url('../../img/header.jpeg') center/cover no-repeat;
  background-attachment: fixed;

  opacity: 0.8; /* 🔥 adjust transparency */
  z-index: -1;
}

/* Dark gradient overlay with extra depth */
.footer-overlay {
    background: linear-gradient(135deg, rgba(8, 25, 55, 0.055) 0%, rgba(3, 15, 35, 0.11) 100%);
    backdrop-filter: blur(2px);
    width: 100%;
    padding: 4rem 2rem 1.5rem;
}

/* circuit pattern overlay (subtle) */
.footer-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" opacity="0.04"><path fill="none" stroke="%2300e0ff" stroke-width="1.2" d="M0 200 L200 200 L250 150 L400 150 L450 200 L600 200 M800 100 L800 300 L850 350 L1000 350 M300 500 L300 600 L350 650 L500 650 M950 400 L950 550 L900 600 L800 600 M100 700 L250 700 L300 650 M1100 200 L1050 150 L950 150 L900 200" /><circle cx="200" cy="200" r="3" fill="%2300e0ff" /><circle cx="450" cy="200" r="3" fill="%2300e0ff" /></svg>');
    background-repeat: repeat;
    background-size: 380px;
    pointer-events: none;
    z-index: 1;
}

.footer-container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    color: #0A1F44;
    padding: 1rem 3rem;
}

/* 4-column grid */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

/* Column styling */
.footer-col h3 {
    color: #002c6d;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
    letter-spacing: -0.2px;
}
.footer-col h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #00ccff, #0077ff);
    border-radius: 2px;
}

.footer-logo {
    display: flex;
    align-items: center;
}

/* Logo Image Fix */
.footer-logo img {
    width: 140px;
    height: auto;
    object-fit: contain;
    display: block;
    background: transparent;
    padding: 4px;

    transition: all 0.3s ease;
}

/* Hover effect */
.footer-logo img:hover {
    transform: scale(1.05);
}

.company-tagline {
    font-size: 0.85rem;
    color: #002c6d;
    margin-top: 0.5rem;
    line-height: 1.4;
}
.company-desc {
    font-size: 1rem;
    color: #002c6d;
    line-height: 1.5;
    margin-top: 1rem;
    font-weight: 550;
}

/* link lists */
.footer-links {
    list-style: none;
    padding: 0;
}
.footer-links li {
    margin-bottom: 0.75rem;
}
.footer-links a {
    color: #002c6d;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.25s ease;
    position: relative;
    display: inline-block;
    font-weight: 500;
}
.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 1.5px;
    background: linear-gradient(90deg, #00e0ff, #0077ff);
    transition: width 0.25s ease;
}
.footer-links a:hover {
    color: #002c6d;
    text-shadow: 0 0 4px rgba(0, 224, 255, 0.5);
}
.footer-links a:hover::after {
    width: 100%;
}

/* contact info items */
.contact-item {
    display: flex;
    gap: 12px;
    margin-bottom: 1rem;
    align-items: flex-start;
}
.contact-item i {
    color: #063b8a;
    font-size: 1rem;
    margin-top: 2px;
    min-width: 20px;
    transition: 0.2s;
}
.contact-item span, .contact-item a {
    color: #002c6d;
    font-size: 0.85rem;
    line-height: 1.4;
    text-decoration: none;
    transition: 0.2s;
}
.contact-item a:hover {
    color: #00e0ff;
}
.contact-item:hover i {
    color: #00e0ff;
    text-shadow: 0 0 4px #00e0ff;
    transform: scale(1.05);
}

/* bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(0, 204, 255, 0.25);
    padding-top: 1.8rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.copyright {
    font-size: 0.8rem;
    color: #002c6d;
}
.social-icons {
    display: flex;
    gap: 1.2rem;
}
.social-icons a {
    color: #002c6d;
    font-size: 1.2rem;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
}
.social-icons a:hover {
    color: #0A1F44;
    background: linear-gradient(135deg, #00e0ff, #0077ff);
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 5px 12px rgba(0, 160, 255, 0.4);
}

/* optional glow for icons in contact */
.contact-item i {
    transition: all 0.2s;
}

.premium-footer {
    transition: background-position 0.2s ease-out;
    background-position: center center;
}

.footer-links a, .contact-item span, .contact-item a {
    font-family: 'Inter', sans-serif;
}
.company-desc {
    max-width: 260px;
}

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

/* Large Laptops / Desktops */
@media (max-width: 1200px) {
    .footer-container {
        padding: 2.5rem 2rem;
    }

    .footer-grid {
        gap: 2rem;
    }

    .footer-col h3 {
        font-size: 1.15rem;
    }

    .footer-links a, .contact-item span, .contact-item a {
        font-size: 0.85rem;
    }

    .company-desc {
        max-width: 220px;
    }
}

/* Tablets */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .footer-container {
        padding: 2rem 1.5rem;
    }

    .footer-col h3 {
        font-size: 1.1rem;
        margin-bottom: 1.2rem;
    }

    .footer-links a, .contact-item span, .contact-item a {
        font-size: 0.82rem;
    }

    .company-desc {
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .social-icons a {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
}

/* Mobile Large / Portrait Tablets */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .footer-container {
        padding: 1.5rem 1rem;
    }

    .footer-col h3 {
        font-size: 1rem;
    }

    .footer-links a, .contact-item span, .contact-item a {
        font-size: 0.8rem;
    }

    .company-desc {
        font-size: 0.9rem;
        line-height: 1.4;
        max-width: 100%;
    }

    .social-icons {
        justify-content: center;
        gap: 0.8rem;
        margin-top: 1rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
        text-align: center;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .footer-container {
        padding: 1rem 0.8rem;
    }

    .footer-col h3 {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .footer-links a, .contact-item span, .contact-item a {
        font-size: 0.78rem;
    }

    .company-desc {
        font-size: 0.85rem;
    }

    .social-icons a {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }

    .footer-bottom {
        padding-top: 1rem;
    }
}

/* Extra Small Mobile (Very small screens) */
@media (max-width: 360px) {
    .footer-links li {
        margin-bottom: 0.5rem;
    }

    .contact-item {
        gap: 8px;
    }

    .contact-item i {
        font-size: 0.9rem;
        min-width: 18px;
    }

    .company-desc {
        font-size: 0.8rem;
    }
}