/*
Theme Name: Tech Meeva
Theme URI: https://techmeeva.com/
Author: Tech Meeva
Author URI: https://techmeeva.com/
Description: A custom WordPress theme for pixel art game developers, featuring retro aesthetics and portfolio showcases
Version: 1.0.0
Text Domain: tech-meeva
Tags: pixel-art, retro, portfolio, game-developer, custom-theme
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ===== CSS RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color Variables */
    --primary-color: #742a84;
    --primary-dark: #5a1f66;
    --primary-light: #8e3ba0;
    --secondary-color: #a09f9c;
    --secondary-dark: #787775;
    --secondary-light: #c8c7c4;
    
    /* Text Colors */
    --text-primary: #000;
    --text-light: #fff;
    --text-gray: #666;
    
    /* Background Colors */
    --bg-dark: #1a1a1a;
    --bg-light: #f5f5f5;
    --bg-card: #2d2d2d;
    
    /* Utility Colors */
    --success: #4caf50;
    --warning: #ff9800;
    --error: #f44336;
    --info: #000;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 4rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 50%;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ========== Pixel CTA — layout / hover / active match .tm-testimonial-nav-btn.pixel-nav-arrow (home.css) ========== */
.tm-pixel-btn,
a.tm-pixel-btn,
button.tm-pixel-btn,
.pixel-btn {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-light);
    text-decoration: none;
    transition: transform var(--transition-fast);
    box-sizing: border-box;
}

.tm-pixel-btn__shadow,
.pixel-btn .btn-shadow,
.tm-testimonial-nav-btn .tm-testimonial-nav-shadow {
    position: absolute;
    top: 4px;
    left: 4px;
    right: -4px;
    bottom: -4px;
    z-index: 1;
    border-radius: var(--radius-sm);
    pointer-events: none;
    transition: transform var(--transition-fast);
}

.tm-pixel-btn__inner,
.pixel-btn .btn-inner,
.tm-testimonial-nav-btn .tm-testimonial-nav-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    position: relative;
    z-index: 2;
    border-radius: var(--radius-sm);
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Primary */
.tm-pixel-btn.tm-pixel-btn--primary .tm-pixel-btn__shadow,
.pixel-btn.primary-btn .btn-shadow,
.category-cta .cta-shadow {
    background: var(--primary-dark);
}

.tm-pixel-btn.tm-pixel-btn--primary .tm-pixel-btn__inner,
.pixel-btn.primary-btn .btn-inner,
.category-cta .cta-inner {
    background: var(--primary-color);
    border: 2px solid var(--primary-light);
    color: var(--text-light);
}

@media (hover: hover) and (pointer: fine) {
    .tm-pixel-btn.tm-pixel-btn--primary:hover,
    .pixel-btn.primary-btn:hover,
    .category-cta:hover {
        transform: translate(-2px, -2px);
    }

    .tm-pixel-btn.tm-pixel-btn--primary:hover .tm-pixel-btn__inner,
    .pixel-btn.primary-btn:hover .btn-inner,
    .category-cta:hover .cta-inner {
        background: var(--primary-light);
        border-color: var(--secondary-light);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            0 0 20px rgba(116, 42, 132, 0.35);
    }

    .tm-pixel-btn.tm-pixel-btn--primary:hover .tm-pixel-btn__shadow,
    .pixel-btn.primary-btn:hover .btn-shadow,
    .category-cta:hover .cta-shadow {
        transform: translate(6px, 6px);
    }
}

.tm-pixel-btn.tm-pixel-btn--primary:focus-visible,
.pixel-btn.primary-btn:focus-visible,
.category-cta:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 4px;
}

.tm-pixel-btn.tm-pixel-btn--primary:active,
.pixel-btn.primary-btn:active,
.category-cta:active {
    transform: translate(1px, 1px);
}

.tm-pixel-btn.tm-pixel-btn--primary:active .tm-pixel-btn__inner,
.pixel-btn.primary-btn:active .btn-inner,
.category-cta:active .cta-inner {
    background: var(--primary-dark);
}

/* Secondary */
.tm-pixel-btn.tm-pixel-btn--secondary .tm-pixel-btn__shadow,
.pixel-btn.secondary-btn .btn-shadow {
    background: var(--secondary-dark);
}

.tm-pixel-btn.tm-pixel-btn--secondary .tm-pixel-btn__inner,
.pixel-btn.secondary-btn .btn-inner {
    background: var(--secondary-color);
    border: 2px solid var(--secondary-light);
    color: var(--text-light);
}

@media (hover: hover) and (pointer: fine) {
    .tm-pixel-btn.tm-pixel-btn--secondary:hover,
    .pixel-btn.secondary-btn:hover {
        transform: translate(-2px, -2px);
    }

    .tm-pixel-btn.tm-pixel-btn--secondary:hover .tm-pixel-btn__inner,
    .pixel-btn.secondary-btn:hover .btn-inner {
        background: var(--secondary-light);
        border-color: var(--primary-light);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            0 0 20px rgba(160, 159, 156, 0.45);
    }

    .tm-pixel-btn.tm-pixel-btn--secondary:hover .tm-pixel-btn__shadow,
    .pixel-btn.secondary-btn:hover .btn-shadow {
        transform: translate(6px, 6px);
    }
}

.tm-pixel-btn.tm-pixel-btn--secondary:focus-visible,
.pixel-btn.secondary-btn:focus-visible {
    outline: 2px solid var(--secondary-light);
    outline-offset: 4px;
}

.tm-pixel-btn.tm-pixel-btn--secondary:active,
.pixel-btn.secondary-btn:active {
    transform: translate(1px, 1px);
}

.tm-pixel-btn.tm-pixel-btn--secondary:active .tm-pixel-btn__inner,
.pixel-btn.secondary-btn:active .btn-inner {
    background: var(--secondary-dark);
}

.btn-icon {
    font-size: 1.2rem;
    animation: tm-pixel-btn-icon-pulse 2s infinite;
}

@keyframes tm-pixel-btn-icon-pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-dark);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-light);
        }

/* ===== TYPOGRAPHY ===== */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-light);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
}

h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: var(--spacing-md);
    color: var(--text-gray);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

/* a:hover {
    color: var(--primary-dark);
} */

/* ===== LAYOUT COMPONENTS ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.section {
    padding: var(--spacing-xl) 0;
}

.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Base Footer Styles */
.pixel-footer {
    position: relative;
    background: var(--bg-dark);
    color: var(--text-light);
    overflow: hidden;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Animated Pixel Stars Background */
.pixel-stars {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, white, transparent),
        radial-gradient(2px 2px at 40px 70px, white, transparent),
        radial-gradient(1px 1px at 50px 160px, white, transparent),
        radial-gradient(1px 1px at 130px 40px, white, transparent),
        radial-gradient(2px 2px at 80px 10px, white, transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: pixelStarsMove 100s linear infinite;
    opacity: 0.3;
}

@keyframes pixelStarsMove {
    from { transform: translateX(0); }
    to { transform: translateX(200px); }
}

/* Container Styles */
.footer-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-lg);
}

/* Footer Top Section */
.footer-top {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.footer-logo-section {
    display: inline-block;
    position: relative;
}

.footer-logo {
    height: 80px;
    image-rendering: auto;
    filter: drop-shadow(0 0 10px var(--primary-color));
}

/* Pixel Decorations */
.pixel-decorations {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.pixel-controller,
.pixel-coin,
.pixel-heart {
    position: absolute;
    width: 20px;
    height: 20px;
    background-size: contain;
    animation: floatPixel 3s ease-in-out infinite;
}

.pixel-controller {
    top: -30px;
    left: -40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='8' width='16' height='8' fill='%23742a84'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%23742a84'/%3E%3Crect x='12' y='6' width='2' height='2' fill='%23742a84'/%3E%3C/svg%3E");
    animation-delay: 0s;
}

.pixel-coin {
    top: -20px;
    right: -30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='6' y='2' width='8' height='16' fill='%23ff9800'/%3E%3Crect x='8' y='8' width='4' height='4' fill='%23fff'/%3E%3C/svg%3E");
    animation-delay: 1s;
}

.pixel-heart {
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 17l-7-7c-2-2-2-5 0-7s5-2 7 0c2-2 5-2 7 0s2 5 0 7l-7 7z' fill='%23f44336'/%3E%3C/svg%3E");
    animation-delay: 2s;
}

@keyframes floatPixel {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.1); }
}

/* Footer Content Grid */
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

/* Pixel Headings */
.pixel-heading {
    font-size: 12px;
    margin-bottom: var(--spacing-lg);
    color: var(--primary-light);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Pixel heading icons — SVG (theme stroke icons on primary badge) */
.pixel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    background-color: #ffffff;
}

.pixel-icon-svg {
    width: 28px;
    height: 28px;
    background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border: 2px solid var(--primary-light);
    border-radius: var(--radius-sm);
    box-shadow:
        0 3px 0 var(--primary-dark),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: var(--text-light);
}

.pixel-icon-svg .tm-icon,
.pixel-icon-svg svg {
    width: 15px;
    height: 15px;
    display: block;
}

/* Pixel List */
.pixel-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pixel-list li {
    margin-bottom: var(--spacing-md);
    position: relative;
    padding-left: 20px;
}

.pixel-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border: 1px solid var(--primary-light);
    border-radius: 1px;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}

.pixel-list li.pixel-list-more {
    padding-left: 0;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(116, 42, 132, 0.25);
}

.pixel-list li.pixel-list-more::before {
    display: none;
}

.pixel-link-all {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary-light) !important;
}

.pixel-link-all:hover {
    color: var(--text-light) !important;
}

.pixel-link-muted {
    cursor: default;
    color: var(--secondary-dark) !important;
    font-style: italic;
}

.pixel-link-muted:hover {
    transform: none;
    text-shadow: none;
}

/* Pixel Links */
.pixel-link {
    color: var(--secondary-light);
    text-decoration: none;
    font-size: 10px;
    transition: var(--transition-fast);
    display: inline-block;
}

.pixel-link:hover {
    color: var(--primary-light);
    transform: translateX(4px);
    text-shadow: 2px 2px 0 rgba(116, 42, 132, 0.3);
}

/* contact-foo Section */
.contact-foo-info {
    margin-bottom: var(--spacing-lg);
}

.contact-foo-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.contact-foo-icon-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border: 1px solid var(--primary-light);
    border-radius: var(--radius-sm);
    color: var(--text-light);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.contact-foo-icon-pill .tm-icon,
.contact-foo-icon-pill svg {
    width: 14px;
    height: 14px;
    display: block;
}

.contact-foo-item .pixel-link {
    font-size: 10px;
    line-height: 1.4;
    word-break: break-all;
}

/* Social Links */
.social-links {
    display: flex;
    gap: var(--spacing-md);
}

.social-pixel {
    width: 32px;
    height: 32px;
    background: var(--bg-card);
    border: 2px solid var(--primary-color);
    position: relative;
    transition: var(--transition-fast);
    cursor: pointer;
}

.social-pixel:hover {
    background: var(--primary-color);
    transform: translateY(-4px);
}

/* Pixelated Social Icons */
.discord::before {
    content: '';
    position: absolute;
    inset: 4px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.59 5.88997C17.36 5.31997 16.05 4.89997 14.67 4.65997C14.5 4.95997 14.3 5.36997 14.17 5.69997C12.71 5.47997 11.26 5.47997 9.83001 5.69997C9.69001 5.36997 9.49001 4.95997 9.32001 4.65997C7.94001 4.89997 6.63001 5.31997 5.40001 5.88997C2.92001 9.62997 2.25001 13.28 2.58001 16.87C4.23001 18.1 5.82001 18.84 7.39001 19.33C7.78001 18.8 8.12001 18.23 8.42001 17.64C7.85001 17.43 7.31001 17.16 6.80001 16.85C6.94001 16.75 7.07001 16.64 7.20001 16.54C10.33 18 13.72 18 16.81 16.54C16.94 16.65 17.07 16.75 17.21 16.85C16.7 17.16 16.15 17.42 15.59 17.64C15.89 18.23 16.23 18.8 16.62 19.33C18.19 18.84 19.79 18.1 21.43 16.87C21.82 12.7 20.76 9.08997 18.61 5.88997H18.59ZM8.84001 14.67C7.90001 14.67 7.13001 13.8 7.13001 12.73C7.13001 11.66 7.88001 10.79 8.84001 10.79C9.80001 10.79 10.56 11.66 10.55 12.73C10.55 13.79 9.80001 14.67 8.84001 14.67ZM15.15 14.67C14.21 14.67 13.44 13.8 13.44 12.73C13.44 11.66 14.19 10.79 15.15 10.79C16.11 10.79 16.87 11.66 16.86 12.73C16.86 13.79 16.11 14.67 15.15 14.67Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.twitter::before {
    content: '';
    position: absolute;
    inset: 4px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.instagram::before {
    content: '';
    position: absolute;
    inset: 4px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM12 15.88C9.86 15.88 8.12 14.14 8.12 12C8.12 9.86 9.86 8.12 12 8.12C14.14 8.12 15.88 9.86 15.88 12C15.88 14.14 14.14 15.88 12 15.88ZM17.92 6.88C17.87 7 17.8 7.11 17.71 7.21C17.61 7.3 17.5 7.37 17.38 7.42C17.26 7.47 17.13 7.5 17 7.5C16.73 7.5 16.48 7.4 16.29 7.21C16.2 7.11 16.13 7 16.08 6.88C16.03 6.76 16 6.63 16 6.5C16 6.37 16.03 6.24 16.08 6.12C16.13 5.99 16.2 5.89 16.29 5.79C16.52 5.56 16.87 5.45 17.19 5.52C17.26 5.53 17.32 5.55 17.38 5.58C17.44 5.6 17.5 5.63 17.56 5.67C17.61 5.7 17.66 5.75 17.71 5.79C17.8 5.89 17.87 5.99 17.92 6.12C17.97 6.24 18 6.37 18 6.5C18 6.63 17.97 6.76 17.92 6.88Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.whatsapp::before {
    content: '';
    position: absolute;
    inset: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M 15 3 C 8.373 3 3 8.373 3 15 C 3 17.251208 3.6323415 19.350068 4.7109375 21.150391 L 3.1074219 27 L 9.0820312 25.431641 C 10.829354 26.425062 12.84649 27 15 27 C 21.627 27 27 21.627 27 15 C 27 8.373 21.627 3 15 3 z M 10.892578 9.4023438 C 11.087578 9.4023438 11.287937 9.4011562 11.460938 9.4101562 C 11.674938 9.4151563 11.907859 9.4308281 12.130859 9.9238281 C 12.395859 10.509828 12.972875 11.979906 13.046875 12.128906 C 13.120875 12.277906 13.173313 12.453437 13.070312 12.648438 C 12.972312 12.848437 12.921344 12.969484 12.777344 13.146484 C 12.628344 13.318484 12.465078 13.532109 12.330078 13.662109 C 12.181078 13.811109 12.027219 13.974484 12.199219 14.271484 C 12.371219 14.568484 12.968563 15.542125 13.851562 16.328125 C 14.986562 17.342125 15.944188 17.653734 16.242188 17.802734 C 16.540187 17.951734 16.712766 17.928516 16.884766 17.728516 C 17.061766 17.533516 17.628125 16.864406 17.828125 16.566406 C 18.023125 16.268406 18.222188 16.319969 18.492188 16.417969 C 18.766188 16.515969 20.227391 17.235766 20.525391 17.384766 C 20.823391 17.533766 21.01875 17.607516 21.09375 17.728516 C 21.17075 17.853516 21.170828 18.448578 20.923828 19.142578 C 20.676828 19.835578 19.463922 20.505734 18.919922 20.552734 C 18.370922 20.603734 17.858562 20.7995 15.351562 19.8125 C 12.327563 18.6215 10.420484 15.524219 10.271484 15.324219 C 10.122484 15.129219 9.0605469 13.713906 9.0605469 12.253906 C 9.0605469 10.788906 9.8286563 10.071437 10.097656 9.7734375 C 10.371656 9.4754375 10.692578 9.4023438 10.892578 9.4023438 z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.social-pixel:hover::before {
    transform: scale(1.1);
}

/* Footer Bottom */
.footer-bottom {
    position: relative;
    padding-top: var(--spacing-lg);
}

.pixel-divider {
    height: 4px;
    background: repeating-linear-gradient(
        to right,
        var(--primary-color) 0px,
        var(--primary-color) 8px,
        transparent 8px,
        transparent 16px
    );
    margin-bottom: var(--spacing-lg);
}

.bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.copyright {
    font-size: 10px;
    color: var(--secondary-light);
    margin: 0;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.bottom-link {
    color: var(--secondary-light);
    text-decoration: none;
    font-size: 10px;
    transition: var(--transition-fast);
}

.bottom-link:hover {
    color: var(--primary-light);
}

.pixel-dot {
    width: 4px;
    height: 4px;
    background: var(--primary-color);
    display: inline-block;
}

/* Animated Pixel Character */
.pixel-character {
    position: absolute;
    bottom: 20px;
    left: -40px;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='12' y='4' width='8' height='8' fill='%23742a84'/%3E%3Crect x='8' y='12' width='16' height='12' fill='%23742a84'/%3E%3Crect x='8' y='24' width='6' height='4' fill='%23742a84'/%3E%3Crect x='18' y='24' width='6' height='4' fill='%23742a84'/%3E%3Crect x='14' y='6' width='4' height='4' fill='%23fff'/%3E%3C/svg%3E");
    background-size: contain;
    animation: walkAcross 30s linear infinite;
}

@keyframes walkAcross {
    0% {
        left: -40px;
        transform: scaleX(1);
    }
    49% {
        transform: scaleX(1);
    }
    50% {
        left: calc(100% + 40px);
        transform: scaleX(-1);
    }
    99% {
        transform: scaleX(-1);
    }
    100% {
        left: -40px;
        transform: scaleX(1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .pixel-heading {
        justify-content: center;
    }
    
    .pixel-list li {
        padding-left: 0;
    }
    
    .pixel-list li::before {
        display: none;
    }
    
    .social-links {
        justify-content: center;
    }
    
    .bottom-content {
        flex-direction: column;
        text-align: center;
    }
    
    .pixel-form {
        flex-direction: column;
    }
    
    .pixel-character {
        display: none;
    }
}

/* Hover Effects for Fun Interactions */
.footer-container:hover .pixel-decorations > * {
    animation-duration: 1.5s;
}

/* Custom Scrollbar for Footer Content */
.pixel-footer ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.pixel-footer ::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

.pixel-footer ::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border: 2px solid var(--bg-dark);
}

.pixel-footer ::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}

/* Easter Egg - Konami Code Effect */
.pixel-footer.konami-activated {
    animation: rainbowBg 2s linear infinite;
}

@keyframes rainbowBg {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Loading Animation for Newsletter Submission */
.pixel-button.loading span:first-child {
    display: none;
}

.pixel-button.loading::after {
    content: '...';
    animation: loadingDots 1s infinite;
}

@keyframes loadingDots {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
}


/* Header Code */

/* Base Header Styles - Matching Footer */
.pixel-header {
    position: relative;
    background: var(--bg-dark);
    color: var(--text-light);
   font-family : 'Press Start 2P', 'Courier New', monospace;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    /* overflow: hidden; */
}

/* Reuse pixel stars from footer */
.pixel-header .pixel-stars {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, white, transparent),
        radial-gradient(2px 2px at 40px 70px, white, transparent),
        radial-gradient(1px 1px at 50px 160px, white, transparent),
        radial-gradient(1px 1px at 130px 40px, white, transparent),
        radial-gradient(2px 2px at 80px 10px, white, transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: pixelStarsMove 100s linear infinite;
    opacity: 0.3;
}

/* Header Container */
.header-container {
    position: relative;
    z-index: 1;
}

/* Top Bar Ticker */
.header-top-bar {
    background: var(--primary-dark);
    padding: var(--spacing-xs) 0;
    overflow: hidden;
    border-bottom: 2px solid var(--primary-color);
}

.ticker-wrapper {
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    overflow: hidden;
}

.pixel-ticker {
    display: flex;
    white-space: nowrap;
}

.ticker-content {
    display: inline-flex;
    padding-right: 50px;
    animation: ticker 30s linear infinite;
    align-items: anchor-center;
}

.ticker-item {
    font-size: 10px;
    color: var(--text-light);
    padding: 0 var(--spacing-md);
}

.ticker-separator {
    color: var(--primary-light);
}

@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Main Header */
.header-main {
    max-width: 100%;
    margin: 0 auto;
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    width: 1360px;
    justify-content: space-between;
}

/* Logo Section - Matching Footer Style */
.header-logo-section {
    position: relative;
    width: 25% !important;
}

.header-logo-section .custom-logo-link {
    display: inline-block;
    position: relative;
}

.header-logo-section img {
    height: auto;
    filter: drop-shadow(0 0 10px var(--primary-color));
    transition: var(--transition-fast);
    width: 45%;
}

.header-logo-section:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px var(--primary-light));
}

.site-title {
    font-size: 18px;
    margin: 0;
    color: var(--primary-light);
    text-transform: uppercase;
}

.site-title-link {
    text-decoration: none;
    color: inherit;
}

/* Pixel Decorations - Different from footer */
.pixel-decorations {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.pixel-sword,
.pixel-potion,
.pixel-star {
    position: absolute;
    width: 20px;
    height: 20px;
    background-size: contain;
    animation: floatPixel 3s ease-in-out infinite;
}

.pixel-sword {
    top: -25px;
    left: -35px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='9' y='2' width='2' height='12' fill='%23742a84'/%3E%3Crect x='7' y='14' width='6' height='2' fill='%23742a84'/%3E%3Crect x='8' y='16' width='4' height='2' fill='%23a09f9c'/%3E%3C/svg%3E");
    animation-delay: 0s;
}

.pixel-potion {
    top: -20px;
    right: -30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='8' y='4' width='4' height='4' fill='%23742a84'/%3E%3Crect x='6' y='8' width='8' height='10' fill='%234caf50'/%3E%3C/svg%3E");
    animation-delay: 1s;
}

.pixel-star {
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2l2 6h6l-5 4 2 6-5-4-5 4 2-6-5-4h6z' fill='%23ff9800'/%3E%3C/svg%3E");
    animation-delay: 2s;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
    flex-direction: column;
    gap: 4px;
}

.menu-bar {
    width: 24px;
    height: 3px;
    background: var(--primary-color);
    transition: var(--transition-fast);
}

.pixel-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--spacing-sm);
}

.pixel-menu li {
    position: relative;
}

.pixel-menu a {
    display: block;
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--secondary-light);
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
    transition: var(--transition-fast);
    position: relative;
}

.pixel-menu a::before {
    content: '▶';
    position: absolute;
    left: 16px;
    color: var(--primary-color);
    font-size: 8px;
    opacity: 0;
    transition: var(--transition-fast);
}

.pixel-menu a:hover::before,
.pixel-menu .current-menu-item a::before {
    opacity: 1;
}

.pixel-menu a:hover,
.pixel-menu .current-menu-item a {
    color: var(--primary-light);
    transform: translateY(-2px);
    text-shadow: 2px 2px 0 rgba(116, 42, 132, 0.3);
}

/* Dropdown Menu */
.pixel-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-dark);
    border: 2px solid var(--primary-color);
    min-width: 200px;
    list-style: none;
    padding: var(--spacing-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition-fast);
}

.pixel-menu li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pixel-menu .sub-menu a {
    font-size: 10px;
    padding: var(--spacing-sm) var(--spacing-md);
}

.pixel-menu .sub-menu a:hover {
    color: var(--primary-light);
    background-color: var(--bg-light);
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Search Button */
.pixel-search-btn {
    width: 40px;
    height: 40px;
    background: var(--bg-card);
    border: 2px solid var(--primary-color);
    cursor: pointer;
    position: relative;
    transition: var(--transition-fast);
}

.pixel-search-btn:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

.search-icon {
    position: absolute;
    inset: 8px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
}

.search-icon::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 8px;
    background: var(--primary-color);
    bottom: -6px;
    right: -2px;
    transform: rotate(-45deg);
}

.pixel-search-btn:hover .search-icon,
.pixel-search-btn:hover .search-icon::after {
    border-color: var(--text-light);
    background: var(--text-light);
}

/* CTA Button - Matching Footer Style */
.pixel-cta-button {
    padding: 12px 24px;
    background: var(--primary-color);
    border: none;
    color: var(--text-light);
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
    position: relative;
    transition: var(--transition-fast);
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.pixel-cta-button:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--primary-dark);
}

/* Search Overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 26, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-container {
    max-width: 600px;
    width: 90%;
    position: relative;
}

.search-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: var(--primary-light);
    font-size: 40px;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-fast);
}

.search-close:hover {
    transform: scale(1.2);
    color: var(--text-light);
}

.pixel-search-form {
    display: flex;
    gap: var(--spacing-sm);
}

.pixel-search-input {
    flex: 1;
    padding: 16px;
    background: var(--bg-card);
    border: 2px solid var(--primary-color);
    color: var(--text-light);
    font-family: inherit;
    font-size: 12px;
    outline: none;
    transition: var(--transition-fast);
}

.pixel-search-input:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 2px rgba(142, 59, 160, 0.3);
}

.pixel-search-submit {
    padding: 16px 32px;
    background: var(--primary-color);
    border: none;
    color: var(--text-light);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    text-transform: uppercase;
    transition: var(--transition-fast);
}

.pixel-search-submit:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--primary-dark);
}

/* Mobile Menu */
@media (max-width: 768px) {
    .header-top-bar {
        display: none;
    }
    
    .header-main {
        padding: var(--spacing-md);
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .pixel-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 300px;
        height: 100vh;
        background: var(--bg-dark);
        border-right: 4px solid var(--primary-color);
        flex-direction: column;
        padding: var(--spacing-xl) var(--spacing-lg);
        transition: var(--transition-normal);
        overflow-y: auto;
        z-index: 0;
    }
     .header-logo-section img {
        width: 100%;
    }
    .pixel-menu.active {
        left: 0;
    }
    
    .pixel-menu li {
        width: 100%;
    }
    
    .pixel-menu a {
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--primary-dark);
    }
    
    .pixel-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        padding-left: var(--spacing-lg);
    }
    
    .pixel-decorations {
        display: none;
    }
    
    .header-actions {
        gap: var(--spacing-sm);
        display: none;
    }
    
    .pixel-cta-button {
        padding: 8px 16px;
        font-size: 9px;
    }
    .pixel-nav {
        justify-items: self-end;
    }
}

/* Sticky Header */
.pixel-header.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Loading State */
.pixel-header.loading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary-color);
    animation: loadingBar 2s ease-in-out infinite;
}

@keyframes loadingBar {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}
/* .whatsapp-icon {
    width: 60px;
    height: auto;
} */
/* .whatsapp-link {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 43;
} */