/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(135deg, #000 10%, #1a1a1a 100%);
    color: var(--text-color);
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    z-index: 0;
}

/* CSS Variables for Dark and Light Modes */
:root {
    /* Dark Mode Variables */
    --background-color: #000000; /* Black */
    --text-color: #fafafa; /* Light Grey */
    --primary-color: #00FFFF; /* Cyan */
    --accent-color: #43a8d0; /* Sky Blue */
    --nav-background: rgba(0, 0, 0, 0.9);
    --nav-link-hover-color: #17b3b3; /* Cyan */
    --divider-color: rgba(255, 255, 255, 0.2);
    --enhanced-title-gradient: linear-gradient(to right, #00FFFF, #87CEEB); /* Cyan to Sky Blue */
    --project-section-background: linear-gradient(135deg, #0d0d0d 0%, #000 100%);
    --card-background: rgba(255, 255, 255, 0.1);
    --secondary-color: #cccccc; /* Grey */
    --form-background: rgba(33, 33, 33, 0.5);
    --link-color: #43a8d0; /* Cyan */
    --social-icon-color: #ffffff; /* White */
    --social-icon-hover: #00FFFF; /* Cyan */
    --btn-gradient-light: linear-gradient(145deg, var(--primary-color), var(--accent-color));
    --btn-gradient-dark: linear-gradient(145deg, var(--primary-color), var(--accent-color));
    --btn-bg-light: var(--btn-gradient-light);
    --btn-bg-dark: var(--btn-gradient-dark);
    --btn-text-color-light: #ffffff;
    --btn-text-color-dark: #ffffff;
}

/* Light Mode Overrides */
body.light-mode {
    --background-color: #ffffff; /* White */
    --text-color: #000000; /* Black */
    --nav-background: rgba(255, 255, 255, 0.9);
    --nav-link-hover-color: #00FFFF; /* Cyan */
    --divider-color: rgba(0, 0, 0, 0.2);
    --enhanced-title-gradient: linear-gradient(to right, #00FFFF, #87CEEB); /* Cyan to Sky Blue */
    --project-section-background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    --card-background: rgba(255, 255, 255, 0.8);
    --form-background: rgba(33, 33, 33, 0.1);
    --link-color: #00FFFF; /* Cyan */
    --social-icon-color: #000000; /* Black */
    --social-icon-hover: #00FFFF; /* Cyan */
}

  /* Modern Navigation Styles */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 80px;
            background: transparent;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--divider-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem;
            z-index: 1000;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* Glassmorphism effect on scroll */
        nav.scrolled {
            height: 70px;
            background: var(--nav-background);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        /* Logo Section */
        nav h2 {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--text-color);
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: -0.5px;
            z-index: 1004;
            transition: all 0.3s ease;
        }

        .logo-image {
            width: 32px;
            height: 32px;
            object-fit: cover;
            border-radius: 50%;
            box-shadow: 0 4px 20px rgba(var(--primary-color), 0.3);
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .logo-image:hover {
            transform: rotate(360deg) scale(1.1);
            box-shadow: 0 6px 25px rgba(var(--primary-color), 0.5);
        }

        /* Desktop Navigation Links */
        nav .nav-links {
            display: flex;
            align-items: center;
            gap: 3rem;
            list-style: none;
            margin: 0;
            padding: 0;
            transition: all 0.3s ease;
        }

        nav .nav-links li {
            position: relative;
        }

        nav .nav-links li a {
            color: var(--text-color);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            letter-spacing: 0.3px;
            padding: 12px 20px;
            border-radius: 50px;
            position: relative;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            overflow: hidden;
        }

        /* Modern hover effects */
        nav .nav-links li a::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: all 0.6s ease;
        }

        nav .nav-links li a:hover::before {
            left: 100%;
        }

        nav .nav-links li a:hover {
            color: var(--primary-color);
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        /* Active state */
        nav .nav-links li a.active {
            color: var(--primary-color);
            background: rgba(var(--primary-color), 0.1);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 10px rgba(var(--primary-color), 0.2);
        }

        nav .nav-links li a.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 6px;
            background: var(--primary-color);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
            50% { opacity: 0.7; transform: translateX(-50%) scale(1.2); }
        }

        /* Ultra Modern Burger Menu */
        .burger {
            display: none;
            position: fixed;
            top: 50%;
            right: 2rem;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid var(--divider-color);
            border-radius: 50%;
            cursor: pointer;
            z-index: 1003;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            overflow: hidden;
        }

        .burger::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.6s ease;
        }

        .burger:hover::before {
            left: 100%;
        }

        .burger:hover {
            background: rgba(var(--primary-color), 0.2);
            border-color: var(--primary-color);
            transform: translateY(-50%) scale(1.05);
            box-shadow: 0 4px 20px rgba(var(--primary-color), 0.3);
        }

        .burger input {
            display: none;
        }

        .burger span {
            display: block;
            position: absolute;
            width: 20px;
            height: 2px;
            background: var(--text-color);
            border-radius: 3px;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            left: 50%;
            transform: translateX(-50%);
        }

        .burger span:nth-of-type(1) {
            top: 14px;
        }

        .burger span:nth-of-type(2) {
            top: 21px;
        }

        .burger span:nth-of-type(3) {
            top: 28px;
        }

        /* Burger animation */
        .burger input:checked ~ span:nth-of-type(1) {
            top: 21px;
            transform: translateX(-47%) rotate(45deg);
            background: var(--primary-color);
        }

        .burger input:checked ~ span:nth-of-type(2) {
            opacity: 0;
            transform: translateX(-47%) scale(50deg);
        }

        .burger input:checked ~ span:nth-of-type(3) {
            top: 21px;
            transform: translateX(-47%) rotate(-50deg);
            background: var(--primary-color);
        }

        /* Mobile Navigation Overlay */
        .nav-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            z-index: 999;
        }

        .nav-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        /* Mobile Menu Styles */
        @media (max-width: 768px) {
            .burger {
                display: block;
            }

           

            nav .nav-links {
                position: fixed;
                top: 0;
                left: -100%;
                width: 320px;
                max-width: 85vw;
                height: 100vh;
                background: var(--form-background);
                backdrop-filter: blur(30px) !important;
                -webkit-backdrop-filter: blur(30px) !important;
                border-right: 1px solid var(--divider-color);
                flex-direction: column;
                justify-content: flex-start;
                align-items: stretch;
                padding: 120px 2rem 2rem;
                gap: 0;
                transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                box-shadow: 10px 0 40px rgba(0, 0, 0, 0.1);
                z-index: 1002;
                overflow-y: auto;
                  
            }

            nav .nav-links.show-links {
                left: 0;
            }

            nav .nav-links li {
                width: 100%;
                margin-bottom: 8px;
            }

            nav .nav-links li a {
                display: block;
                width: 100%;
                padding: 20px 24px;
                font-size: 1.1rem;
                font-weight: 600;
                border-radius: 16px;
                border: 1px solid transparent;
                background: rgba(255, 255, 255, 0.02);
                transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                position: relative;
                overflow: hidden;
            }

            nav .nav-links li a::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 4px;
                height: 100%;
                background: var(--primary-color);
                transform: scaleY(0);
                transition: all 0.3s ease;
                transform-origin: top;
                  
            }

            nav .nav-links li a:hover,
            nav .nav-links li a.active {
                background: rgba(var(--primary-color), 0.1);
                border-color: rgba(var(--primary-color), 0.3);
                color: var(--primary-color);
                transform: translateX(8px);
                box-shadow: 0 4px 20px rgba(var(--primary-color), 0.2);
            }

            nav .nav-links li a:hover::before,
            nav .nav-links li a.active::before {
                transform: scaleY(1);
            }

       

            nav .nav-links::before:hover {
                background: rgba(var(--primary-color), 0.2);
                border-color: var(--primary-color);
                color: var(--primary-color);
                transform: rotate(90deg);
            }

            /* Stagger animation for mobile menu items */
            nav .nav-links.show-links li {
                animation: slideInFromLeft 0.5s ease forwards;
            }

            nav .nav-links.show-links li:nth-child(1) { animation-delay: 0.1s; }
            nav .nav-links.show-links li:nth-child(2) { animation-delay: 0.2s; }
            nav .nav-links.show-links li:nth-child(3) { animation-delay: 0.3s; }
            nav .nav-links.show-links li:nth-child(4) { animation-delay: 0.4s; }
            nav .nav-links.show-links li:nth-child(5) { animation-delay: 0.5s; }
            nav .nav-links.show-links li:nth-child(6) { animation-delay: 0.6s; }

            @keyframes slideInFromLeft {
                0% {
                    opacity: 0;
                    transform: translateX(-30px);
                }
                100% {
                    opacity: 1;
                    transform: translateX(0);
                }
            }
        }

        /* Desktop responsive */
        @media (min-width: 1200px) {
            nav {
                padding: 0 4rem;
            }
            
            nav .nav-links {
                gap: 4rem;
            }
        }



/* Theme Toggle Switch Styles */
.theme-toggle {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 1005;
    cursor: pointer;
}

/* Sun-Moon Toggle Button */
.st-sunMoonThemeToggleBtn {
    color: #bbb;
    width: 3em;
    position: relative;
}

.st-sunMoonThemeToggleBtn .themeToggleInput {
    opacity: 0;
    width: 100%;
    aspect-ratio: 1;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

.st-sunMoonThemeToggleBtn svg {
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease;
    transform: rotate(40deg);
}

.st-sunMoonThemeToggleBtn svg .sunMoon {
    transform-origin: center center;
    transition: inherit;
    transform: scale(1);
}

.st-sunMoonThemeToggleBtn svg .sunRay {
    transform-origin: center center;
    transform: scale(0);
    transition: transform 0.4s ease;
}

.st-sunMoonThemeToggleBtn svg mask > circle {
    transition: transform 0.64s cubic-bezier(0.41, 0.64, 0.32, 1.575);
    transform: translate(0px, 0px);
}

.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg {
    transform: rotate(90deg);
}

.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg mask > circle {
    transform: translate(16px, -3px);
}

.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg .sunMoon {
    transform: scale(0.55);
}

.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg .sunRay {
    transform: scale(1);
}

/* Light Mode Specific Styles */
body.light-mode nav {
    background: var(--nav-background);
    backdrop-filter: blur(5px);
}

body.light-mode nav h2,
body.light-mode nav .nav-links li a {
    color: var(--text-color);
    background-color: rgba(255, 255, 255, 0);
}

body.light-mode nav .nav-links li a::after {
    background: var(--primary-color); /* Cyan underline */
}

body.light-mode nav .nav-links a:hover {
    color: var(--primary-color);
}

body.light-mode .services-section {
    background-color: rgba(255, 255, 255, 0.9);
}

body.light-mode nav .nav-links li a.active {
    color: var(--primary-color); /* Cyan */
}

body.light-mode nav .nav-links li a:hover::after,
body.light-mode nav .nav-links li a.active::after {
    background: var(--primary-color); /* Cyan underline */
}


/* Hero Section */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -40px;
    overflow: hidden;
    color: var(--text-color);
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../projects/basement10.jpg') center center / cover no-repeat fixed;
    z-index: 0;
    filter: blur(0);
    transition: filter 1s ease-in-out;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.hero-content {
    position: relative;
    text-align: center;
    z-index: 2;
    padding: 0 20px;
}

/* Hero Title Effect */
.hero-title {
    font-size: 120px;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif; /* Updated font */
    letter-spacing: -3px;
    transition: 700ms ease;
    font-weight: 300; /* Light weight */
    margin-bottom: 0.8rem;
    color: #fafafa; /* Light Grey text */
    outline: none;
    text-align: center;
}

.hero-section:hover::before {
    filter: blur(5px);
}

.hero-title:hover {
    font-weight: 700;  /* Bold weight on hover */
    letter-spacing: 1px;
    color: var(--primary-color); /* Cyan on hover */
}

/* Hero Subtitle */
.hero-subtitle {
    font-size: 1.5em;
    line-height: 150%;
    text-align: center;
    color: #fafafa; /* Light Grey text */
    letter-spacing: 0.5px;
}

/* Call to Action Button */
.cti {
    margin-top: 30px;
}

/* Responsive Design for Hero */
@media (max-width: 900px) {
    .hero-title {
        font-size: 55px;
    }
    .hero-subtitle {
        font-size: 1.0em;
    }
    .hero-logo {
        width: 70px !important;
    }
}

.hero-logo {
    width: 120px; /* Adjust if your image has a different width */
    height: auto;
    display: inline-block;
    animation: slideInDown 1s ease-out forwards;
    position: relative;
    z-index: 3;
}

/* Glitch Effect */

/* Card Container to hold both cards side by side */
.card-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 40px; /* Adjust the spacing between cards as needed */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

/* New Card Styles */
.new-card {
    width: 210px;
    height: 400px;
    background: #f0f8ff; /* Alice Blue for a light, clean look */
    border-radius: 35px;
    border: 2px solid #87CEEB; /* Sky Blue border */
    padding: 7px;
    position: relative;
    box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.486);
}

.new-card-int {
    background-image: linear-gradient(to right bottom, #00FFFF, #87CEEB); /* Cyan to Sky Blue gradient */
    background-size: 200% 200%;
    background-position: 0% 0%;
    height: 100%;
    border-radius: 25px;
    transition: all 0.6s ease-out;
    overflow: hidden;
}

.new-card:hover .new-card-int {
    background-position: 100% 100%;
}

.new-top {
    position: absolute;
    top: 0px;
    right: 50%;
    transform: translate(50%, 0%);
    width: 35%;
    height: 18px;
    background-color: #00FFFF; /* Cyan */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.new-speaker {
    position: absolute;
    top: 2px;
    right: 84%;
    transform: translate(50%, 0%);
    width: 40%;
    height: 2px;
    border-radius: 50%;
    background-color: #87CEEB; /* Sky Blue */
}

.new-camera {
    position: absolute;
    top: 6px;
    right: 84%;
    transform: translate(50%, 0%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(0, 255, 255, 0.5); /* Semi-transparent Cyan */
}

.new-int {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    background-color: rgba(135, 206, 235, 0.5); /* Semi-transparent Sky Blue */
}

.new-btn1, .new-btn2, .new-btn3, .new-btn4 {
    position: absolute;
    width: 2px;
}

.new-btn1, .new-btn2, .new-btn3 {
    height: 45px;
    top: 30%;
    right: -4px;
    background-image: linear-gradient(to right, #00FFFF, #87CEEB);
}

.new-btn2, .new-btn3 {
    transform: scale(-1);
    left: -4px;
}

.new-btn2, .new-btn3 {
    height: 30px;
}

.new-btn2 {
    top: 26%;
}

.new-btn3 {
    top: 36%;
}

.new-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 25px;
}

/* Responsive Design for Cards */
@media (max-width: 768px) {
    .card-container {
        flex-direction: column;
        align-items: center;
    }
    .new-card, .card {
        margin-bottom: 20px;
    }
}

/* Existing Card Styles */
.card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    padding: 2px;
    border-radius: 24px;
    overflow: hidden;
    line-height: 1.6;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 34px;
    border-radius: 22px;
    color: #000000;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.light-mode .content {
    background-color: var(--card-background);
}

.content .heading {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.3;
    z-index: 1;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
    color: var(--background-color); /* Cyan */
}

.content .para {
    z-index: 1;
    opacity: 0.9;
    font-weight: 400;
    font-size: 18px;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
    color: #333333; /* Dark Grey */
}

/* Project Details Section */
.project-details {
    background: var(--project-section-background) !important;
    padding: 80px 0;
    text-align: center;
}

.project-features .features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.project-features .features-list li {
    font-size: 1.1em;
    line-height: 1.6;
    font-weight: 500 !important;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    color: #333333e6; /* Dark Grey with opacity */
}

.project-features .features-list li i {
    margin-right: 10px;
    color: var(--primary-color); /* Cyan */
}

.project-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.project-links .cti {
    margin: 10px 0;
}

/* Card Hover Effects */
.card::before {
    content: "";
    position: absolute;
    height: 160%;
    width: 160%;
    border-radius: inherit;
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    transform-origin: center;
    animation: moving 4.8s linear infinite paused;
    transition: all 0.88s cubic-bezier(0.23, 1, 0.32, 1);
    color: #000;
}

.card:hover::before {
    animation-play-state: running;
    z-index: -1;
    width: 20%;
}

.card:hover .content .para {
    color: #000000; /* Black */
}

.card:hover .content .heading {
    color: var(--primary-color); /* Cyan */
}

.card:hover {
    box-shadow: 0rem 6px 13px rgba(0, 0, 0, 0.1),
                0rem 24px 24px rgba(0, 0, 0, 0.09),
                0rem 55px 33px rgba(0, 0, 0, 0.05),
                0rem 97px 39px rgba(0, 0, 0, 0.01),
                0rem 152px 43px rgba(0, 0, 0, 0);
    transform: scale(1.05);
    color: #000000; /* Black */
}

@keyframes moving {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Responsive Design for Project Details */
@media (max-width: 768px) {
    .content .heading {
        font-size: 28px;
    }

    .content .para {
        font-size: 16px;
    }

    .project-features .features-list li {
        font-size: 1em;
    }

    .project-details {
        padding: 60px 20px;
    }

    .card {
        max-width: 100%;
    }

    .content .heading {
        font-size: 24px;
        text-align: center !important;
    }
}

/* Statistics Section */
.statistics {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 50px;
}

.stat-item {
    text-align: center;
}

.stat-item h3 {
    font-size: 3em;
    color: var(--accent-color); /* Sky Blue */
}

.stat-item p {
    font-size: 1.2em;
    color: #dddddd; /* Light Grey */
}

body.light-mode .stat-item h3 {
    color: var(--accent-color); /* Sky Blue */
}

body.light-mode .stat-item p {
    color: #333; /* Dark Grey */
}

/* Services Section */
.services-section {
    background-color: #111111; /* Dark Grey */
    padding: 80px 0;
    text-align: center;
}

.services-section h2 {
    font-size: 2.5em;
    margin-bottom: 50px;
    color: var(--accent-color); /* Sky Blue */
}

.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}

.service-item {
    background-color: #1a1a1a; /* Dark Grey */
    padding: 40px;
    border-radius: 10px;
    width: 300px;
    color: #fff;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.service-item i {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: var(--accent-color); /* Sky Blue */
}

.service-item h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
}

.service-item p {
    font-size: 1em;
    line-height: 1.6;
}

.service-item:hover {
    transform: translateY(-10px);
    background-color: #222222; /* Slightly lighter grey */
}

body.light-mode .service-item {
    background-color: var(--card-background);
}

body.light-mode .service-item:hover {
    background-color: #e0e0e0; /* Light Grey */
}

body.light-mode .services-section h2 {
    color: var(--accent-color); /* Sky Blue */
}

body.light-mode .service-item i {
    color: var(--accent-color); /* Sky Blue */
}

body.light-mode .service-item h3 {
    color: #000; /* Black */
}

body.light-mode .service-item p {
    color: #333; /* Dark Grey */
}

/* Image Gallery Section */
.image-gallery {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

/* Background and Gradient Overlay */
.gallery-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(10px);
    background: linear-gradient(
            rgba(0, 0, 0, 0.6), 
            rgba(0, 0, 0, 0.6)
        ), 
        url('../projects/electricals.jpg') center center / cover no-repeat;
    z-index: 1;
}

/* Gallery Content */
.gallery-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #FFFFFF;
}

/* Gallery Title */
.gallery-title {
    font-size: 3em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 40px;
    color: var(--primary-color); /* Cyan */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 0 20px;
}

/* Gallery Item */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
    border-radius: 15px;
}

/* Hover Effects */
.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* Gallery Links (Call-to-Action) */
.gallery-links {
    margin-top: 40px;
}

.gallery-links a {
    text-decoration: none !important;
}

/* Responsive Design for Gallery */
@media (max-width: 900px) {
    .gallery-title {
        font-size: 2em;
        margin-bottom: 30px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-item {
        max-width: 90%;
        margin: 0 auto;
    }

    .gallery-links .btn {
        padding: 12px 25px;
        font-size: 0.9em;
    }

    /* Adjust linear gradient for mobile */
    .gallery-background {
        background: linear-gradient(
                rgba(0, 0, 0, 0.6), 
                rgba(0, 0, 0, 0.6)
            ), 
            url('../projects/electricals.jpg') center center / cover no-repeat;
    }

    .statistics { 
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* Customized Button (Cyan and Sky Blue Theme) */
.cti {
    background-color: var(--primary-color); /* Cyan */
    padding: 17px 30px;
    border: 3px solid transparent;
    border-radius: 0.6em;
    transition: 0.2s;
    display: inline-block;
    text-decoration: none;
}

.cti:hover {
    background-color: transparent;
    border: 3px solid var(--primary-color); /* Cyan border on hover */
    box-shadow: 0px 0px 27px 5px rgba(0, 255, 255, 0.5); /* Cyan shadow */
}

.CTI {
    color: var(--btn-text-color-dark); /* White */
    font-family: 'Courier New', Courier, monospace;
    font-size: 17px;
    font-weight: bold;
    overflow: hidden;
    border-right: 4px solid transparent;
    white-space: nowrap;
    margin: 0 auto;
    text-decoration: none;
}

.cti:hover .CTI {
    border-right: 4px solid var(--primary-color); /* Cyan cursor */
    animation: letters 1.75s steps(22, end), cursor 0.4s step-end infinite;
    color: #333333 !important; /* Dark Grey on hover */
}

.gallery-links:hover .CTI {
    border-right: 4px solid var(--primary-color); /* Cyan cursor */
    animation: letters 1.75s steps(22, end), cursor 0.4s step-end infinite;
    color: #ffffff !important; /* White on hover */
}

.hero-content .cti:hover .CTI {
    color: #ffffff !important; /* White on hover */
}

.hero-content .cti:hover {
    border: 3px solid var(--accent-color); /* Sky Blue border on hover */
    box-shadow: 0px 0px 27px 5px rgba(135, 206, 235, 0.5); /* Sky Blue shadow */
}

/* Keyframes for Button Animation */
@keyframes letters {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes cursor {
    from {
        border-color: transparent;
    }
    50% {
        border-color: var(--primary-color); /* Cyan cursor */
    }
}

/* Footer Section */
.footer-section {
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 60px 40px;
    border-top: 1px solid var(--divider-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Footer Top */
.footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.body.dark-mode .footer-top {
    background: rgba(33, 33, 33, 0.5);
}

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

.footer-logo .logo-image {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer-logo .logo-image:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.footer-description {
    font-size: 1em;
    max-width: 600px;
    line-height: 1.6;
    color: var(--text-color);
}

/* Footer Middle */
.footer-middle {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-social {
    margin-top: 25px;
}

.footer-contact,
.footer-social {
    flex: 1 1 200px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background 0.3s ease;
}

body.light-mode .footer-contact,
body.light-mode .footer-social {
    background: rgba(0, 0, 0, 0.05);
}

.footer-contact h4,
.footer-social h4 {
    font-size: 1.2em;
    margin-bottom: 15px;
    color: var(--primary-color); /* Cyan */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-contact p,
.footer-social p {
    font-size: 1em;
    margin-bottom: 10px;
    line-height: 1.5;
}

.footer-contact a,
.footer-social a {
    color: var(--link-color); /* Cyan */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact a:hover,
.footer-social a:hover {
    color: var(--social-icon-hover); /* Cyan */
    text-decoration: underline;
}

.footer-social .social-icons {
    display: flex;
    gap: 15px;
}

.footer-social .social-icons a {
    color: var(--social-icon-color); /* White */
    font-size: 1.5em;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-social .social-icons a:hover {
    color: var(--social-icon-hover); /* Cyan */
    transform: scale(1.2);
}

.footer-bottom img {
    width: 20px;
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background 0.3s ease;
}

.body.light-mode .footer-bottom {
    background: rgba(0, 0, 0, 0.05);
}

.footer-credits p {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1em;
    color: var(--text-color);
}

.footer-bottom p {
    font-size: 0.9em;
    color: var(--text-color);
}

.footer-bottom a {
    color: var(--primary-color); /* Cyan */
    text-decoration: none;
    margin-left: 5px;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

/* Responsive Design for Footer */
@media (max-width: 992px) {
    .footer-middle {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .footer-contact,
    .footer-social {
        width: 100%;
        max-width: 500px;
    }
}

@media (max-width: 600px) {
    .footer-section {
        padding: 40px 20px;
    }

    .footer-top,
    .footer-middle,
    .footer-bottom {
        padding: 15px;
    }

    .footer-logo .logo-image {
        width: 25px;
        height: 25px;
    }

    .footer-description {
        font-size: 0.9em;
    }

    .footer-contact h4,
    .footer-social h4 {
        font-size: 1em;
    }

    .footer-credits p {
        flex-direction: column;
        gap: 5px;
    }

    .social-icons a {
        font-size: 1.3em;
    }
}

/* Smooth Transitions for Background Gradient */
.footer-section,
.footer-top,
.footer-middle,
.footer-bottom,
.footer-contact,
.footer-social {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blob-bounce {
    0% {
        transform: translate(-50%, -50%) translate3d(0, 0, 0);
    }
    25% {
        transform: translate(-50%, -50%) translate3d(100%, 0, 0);
    }
    50% {
        transform: translate(-50%, -50%) translate3d(100%, 100%, 0);
    }
    75% {
        transform: translate(-50%, -50%) translate3d(0, 100%, 0);
    }
    100% {
        transform: translate(-50%, -50%) translate3d(0, 0, 0);
    }
}

/* Smooth transitions for background gradient */
.card1 {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Back to Top Button Styling */
.Btn {
    width: 40px;
    height: 40px;
    background: var(--btn-bg-dark); /* Dark mode button background */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    position: fixed;
    bottom: 30px;
    right: 30px;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: background 0.3s ease, transform 0.3s ease;
}

body.light-mode .Btn {
    background: var(--btn-bg-light); /* Light mode button background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.Btn:hover {
    transform: translateY(-5px);
}

.arrow path {
    fill: var(--btn-text-color-dark); /* Dark mode arrow color */
    transition: fill 0.3s ease;
}

body.light-mode .arrow path {
    fill: var(--btn-text-color-light); /* Light mode arrow color */
}

.text {
    font-size: 0.8em;
    width: 120px;
    position: absolute;
    color: var(--btn-text-color-dark); /* Dark mode text color */
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: -25px;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 10px;
    border-radius: 4px;
    pointer-events: none;
}

body.light-mode .text {
    background: rgba(255, 255, 255, 0.8);
    color: #000; /* Black text in light mode */
}

.Btn:hover .text {
    opacity: 1;
}

/* Keyframes for Slide-in Animation */
@keyframes slide-in-bottom {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Loader Styles */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-color); /* Use CSS variable */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    height: 55px;
    width: 200px;
    overflow: hidden;
}

.loader .loader-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 200px;
    position: relative;
    align-items: center;
}

.loader .carousel {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    position: absolute;
    width: 100%;
    transform-origin: center;
}

.loader .loader-container:nth-child(3) {
    justify-content: flex-start;
    justify-items: flex-start;
    animation: scroll-up 4s infinite ease-in-out;
    animation-delay: 2s;
}

.loader .loader-container:nth-child(2) {
    justify-content: flex-end;
    justify-items: flex-end;
    animation: scroll-down 4s infinite ease-in-out;
    animation-delay: 2s;
}

.loader .loader-container:nth-child(1) {
    justify-content: flex-end;
    justify-items: flex-end;
    animation: scroll-down 3s infinite ease-in-out;
    animation-delay: 2s;
}

.love {
    background: var(--primary-color); /* Cyan */
    display: flex;
    width: 30px;
    height: 30px;
    position: relative;
    align-items: center;
    justify-content: center;
    left: 8px;
    margin: 0.8rem 4px;
    transform: rotate(45deg);
}

.love::before, .love::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-color); /* Cyan */
}

.love::before {
    left: -16px;
}

.love::after {
    top: -16px;
}

.death {
    display: flex;
    width: 100%;
    height: 55px;
    position: relative;
    align-items: center;
    justify-content: center;
    animation: rotation 3s infinite ease-in-out;
}

.death::after {
    content: '';
    height: 63px;
    position: absolute;
    border-left: 12px solid var(--primary-color); /* Cyan */
    transform: rotate(45deg);
    border-radius: 8px;
    top: -4px;
}

.death::before {
    content: '';
    height: 60px;
    position: absolute;
    border-left: 12px solid var(--primary-color); /* Cyan */
    transform: rotate(-45deg);
}

.robots {
    display: flex;
    width: 100%;
    height: 55px;
    justify-content: space-between;
    background-color: var(--primary-color); /* Cyan */
    border-radius: 0 8px 8px;
    padding: 8px;
    animation-delay: 5s;
}

.robots::after,
.robots::before {
    content: '';
    width: 12px;
    height: 12px;
    top: 0;
    left: 0;
    background-color: var(--social-icon-color); /* White */
    border-radius: 50%;
    animation-delay: 2s;
    animation: blink 0.5s 2 forwards;
}

/* Keyframe Animations */
@keyframes scroll-up {
    0% {
        transform: translateY(0);
        filter: blur(0);
    }
    30% {
        transform: translateY(-150%);
        filter: blur(10px);
    }
    60% {
        transform: translateY(0);
        filter: blur(0px);
    }
}

@keyframes scroll-down {
    0% {
        transform: translateY(0);
        filter: blur(0);
    }
    30% {
        transform: translateY(150%);
        filter: blur(10px);
    }
    60% {
        transform: translateY(0);
        filter: blur(0px);
    }
}

@keyframes rotation {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
}

@keyframes blink {
    0% {
        height: 0;
    }
    100% {
        height: 12px;
    }
}

/* Loader Color Adjustments */
.loader .love {
    background-color: var(--primary-color); /* Cyan */
}

.loader .love::before,
.loader .love::after,
.loader .death::before,
.loader .death::after {
    background-color: var(--primary-color); /* Cyan */
}

/* Light Mode Styles */
@media (prefers-color-scheme: light) {
    :root {
        --background-color: #ffffff; /* Light mode background */
        --text-color: #000000; /* Light mode text color */
        /* Other variables inherit from :root or can be adjusted as needed */
    }

    .page-loader {
        background: var(--background-color);
    }

    .loader .love,
    .loader .death,
    .loader .robots {
        background-color: var(--primary-color); /* Cyan */
    }

    .loader .love::before,
    .loader .love::after,
    .loader .death::before,
    .loader .death::after,
    .loader .robots::before,
    .loader .robots::after {
        background-color: var(--primary-color); /* Cyan */
    }
}

/* Hero Logo Responsive */
@media (max-width: 768px) {
    .hero-logo {
        width: 70px !important;
    }
}

/* Lightbox Styles */
.lightbox {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1005;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8); /* Black with opacity */
}

.lightbox-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    border-radius: 10px;
}

.caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
}

.close {
    position: absolute;
    top: 30px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: color 0.3s;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Footer Bottom Image */
.footer-bottom img {
    width: 20px;
}

/* Additional Responsive Adjustments */
@media (max-width: 600px) {
    .footer-section {
        padding: 40px 20px;
    }

    .footer-top,
    .footer-middle,
    .footer-bottom {
        padding: 15px;
    }

    .footer-logo .logo-image {
        width: 25px;
        height: 25px;
    }

    .footer-description {
        font-size: 0.9em;
    }

    .footer-contact h4,
    .footer-social h4 {
        font-size: 1em;
    }

    .footer-credits p {
        flex-direction: column;
        gap: 5px;
    }

    .social-icons a {
        font-size: 1.3em;
    }
}



/* ===== ULTRA-MODERN FOOTER 2025 ===== */

/* Main Footer Container */
.ultra-footer {
  position: relative;
  background: var(--background-color);
  overflow: hidden;
  padding: 80px 0 0;
  border-top: 1px solid rgba(185, 28, 28, 0.2);
}

/* Animated Background Effects */
.footer-bg-effects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.floating-orbs {
  position: absolute;
  width: 100%;
  height: 100%;
}

.orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 28, 28, 0.4), rgba(185, 28, 28, 0.1), transparent);
  animation: float 6s ease-in-out infinite;
  filter: blur(1px);
}

.orb-1 {
  width: 150px;
  height: 150px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
  animation-duration: 8s;
}

.orb-2 {
  width: 100px;
  height: 100px;
  top: 60%;
  right: 15%;
  animation-delay: -2s;
  animation-duration: 10s;
}

.orb-3 {
  width: 80px;
  height: 80px;
  bottom: 20%;
  left: 70%;
  animation-delay: -4s;
  animation-duration: 7s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  25% { transform: translateY(-20px) rotate(90deg); opacity: 0.8; }
  50% { transform: translateY(-40px) rotate(180deg); opacity: 1; }
  75% { transform: translateY(-20px) rotate(270deg); opacity: 0.8; }
}

.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(185, 28, 28, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 28, 28, 0.03) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(30px, 30px); }
}

/* Footer Container */
.footer-container {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Footer Hero Section */
.footer-hero {
  text-align: center;
  margin-bottom: 80px;
  padding: 60px 0;
}

.brand-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.logo-container {
  position: relative;
}

.logo-ring {
  position: relative;
  width: 80px;
  height: 80px;
  border: 3px solid rgba(185, 28, 28, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotate 8s linear infinite;
}

.logo-ring::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid rgba(185, 28, 28, 0.3);
  border-radius: 50%;
  animation: rotate 12s linear infinite reverse;
}

.ultra-footer .logo-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 2;
  filter: drop-shadow(0 0 10px rgba(185, 28, 28, 0.5));
}

.logo-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 28, 28, 0.2) 0%, transparent 70%);
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 1; }
}

.brand-text {
  text-align: left;
}

.brand-name {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  margin: 0;
  line-height: 1;
}

.text-gradient {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 50%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.brand-tagline {
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  color: var(--text-color);
  opacity: 0.8;
  margin-top: 8px;
  letter-spacing: 1px;
}

.hero-description {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--text-color);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
  opacity: 0.9;
}

.highlight {
  color: #b91c1c;
  font-weight: 600;
  position: relative;
}

.highlight::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #b91c1c, transparent);
  animation: underlineExpand 2s ease-in-out infinite;
}

@keyframes underlineExpand {
  0%, 100% { width: 0; }
  50% { width: 100%; }
}

/* Footer Grid Layout */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  margin-bottom: 60px;
}

.footer-column {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(185, 28, 28, 0.1);
  border-radius: 20px;
  padding: 35px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.footer-column::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(185, 28, 28, 0.1), transparent);
  transition: left 0.6s ease;
}

.footer-column:hover::before {
  left: 100%;
}

.footer-column:hover {
  transform: translateY(-8px);
  border-color: rgba(185, 28, 28, 0.3);
  box-shadow: 0 20px 40px rgba(185, 28, 28, 0.1);
}

.column-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 25px;
  position: relative;
  padding: 0 5px;
  line-height: 1.2;
}

.title-icon {
  font-size: 1.3rem;
  color: #b91c1c;
  animation: iconBounce 2s ease-in-out infinite;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

@keyframes iconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nav-link {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1rem;
  padding: 10px 0;
  transition: all 0.3s ease;
  position: relative;
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-icon {
  font-size: 1rem;
  color: #b91c1c;
  transition: all 0.3s ease;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.nav-link span {
  flex: 1;
}

.nav-link:hover {
  color: #b91c1c;
  opacity: 1;
  transform: translateX(5px);
}

.nav-link:hover .nav-icon {
  color: #dc2626;
  transform: scale(1.2);
}

/* Contact Info Styling */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-link, .location {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-color);
  text-decoration: none;
  font-size: 1rem;
  padding: 12px 15px;
  border-radius: 12px;
  transition: all 0.3s ease;
  background: rgba(185, 28, 28, 0.05);
  border: 1px solid rgba(185, 28, 28, 0.1);
}

.contact-link:hover {
  background: rgba(185, 28, 28, 0.1);
  transform: translateX(5px);
  border-color: rgba(185, 28, 28, 0.2);
}

.contact-icon {
  font-size: 1.1rem;
  color: #b91c1c;
  transition: all 0.3s ease;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.contact-link:hover .contact-icon {
  color: #dc2626;
  transform: scale(1.1);
}

.contact-link span, .location span {
  flex: 1;
}

/* Social Grid */
.social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  background: rgba(185, 28, 28, 0.05);
  border: 1px solid rgba(185, 28, 28, 0.1);
  border-radius: 15px;
  text-decoration: none;
  color: var(--text-color);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.social-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(185, 28, 28, 0.1), transparent);
  transform: scale(0);
  transition: transform 0.4s ease;
  border-radius: 15px;
}

.social-card:hover::before {
  transform: scale(1);
}

.social-card:hover {
  transform: translateY(-5px) scale(1.05);
  border-color: rgba(185, 28, 28, 0.3);
  box-shadow: 0 15px 30px rgba(185, 28, 28, 0.2);
}

.social-icon {
  font-size: 1.8rem;
  transition: all 0.3s ease;
  z-index: 2;
  position: relative;
}

.social-card:hover .social-icon {
  color: #b91c1c;
  transform: rotate(10deg) scale(1.2);
}

.social-label {
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 2;
  position: relative;
}

/* Newsletter Section */
.newsletter-section {
  background: linear-gradient(135deg, rgba(185, 28, 28, 0.1) 0%, rgba(185, 28, 28, 0.05) 100%);
  border: 1px solid rgba(185, 28, 28, 0.2);
  border-radius: 25px;
  padding: 50px;
  margin-bottom: 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.newsletter-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(185, 28, 28, 0.1), transparent);
  animation: rotate 10s linear infinite;
  z-index: 1;
}

.newsletter-content {
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
}

.newsletter-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--text-color);
  margin-bottom: 10px;
}

.newsletter-subtitle {
  font-size: 1.1rem;
  color: var(--text-color);
  opacity: 0.8;
}

.newsletter-form {
  position: relative;
  z-index: 2;
}

.input-group {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(185, 28, 28, 0.2);
  border-radius: 60px;
  padding: 8px;
  transition: all 0.3s ease;
}

.input-group:focus-within {
  border-color: rgba(185, 28, 28, 0.5);
  box-shadow: 0 0 30px rgba(185, 28, 28, 0.2);
}

.newsletter-input {
  flex: 1;
  padding: 15px 25px;
  border: none;
  background: transparent;
  color: var(--text-color);
  font-size: 1rem;
  outline: none;
}

.newsletter-input::placeholder {
  color: var(--text-color);
  opacity: 0.6;
}

.newsletter-btn {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
}

.newsletter-btn:hover {
  transform: translateX(-5px);
  box-shadow: 0 10px 25px rgba(185, 28, 28, 0.4);
}

.btn-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.newsletter-btn:hover .btn-icon {
  transform: translateX(5px);
}

/* Footer Bottom */
.ultra-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 0;
  border-top: 1px solid rgba(185, 28, 28, 0.2);
  flex-wrap: wrap;
  gap: 20px;
}

.footer-credits {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.credit-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--text-color);
  flex-wrap: wrap;
}

.heart {
  color: #b91c1c;
  animation: heartbeat 2s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.creator-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(185, 28, 28, 0.1);
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(185, 28, 28, 0.2);
}

.creator-logo {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.creator-name {
  font-weight: 600;
  color: #b91c1c;
}

.copyright {
  font-size: 0.9rem;
  color: var(--text-color);
  opacity: 0.7;
}

.footer-tech-stack {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.tech-label {
  font-size: 0.9rem;
  color: var(--text-color);
  opacity: 0.7;
}

.tech-icons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tech-item {
  background: rgba(185, 28, 28, 0.1);
  color: var(--text-color);
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid rgba(185, 28, 28, 0.2);
  transition: all 0.3s ease;
}

.tech-item:hover {
  background: rgba(185, 28, 28, 0.2);
  transform: translateY(-2px);
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(185, 28, 28, 0.2);
}

.scroll-line {
  height: 100%;
  background: linear-gradient(90deg, #b91c1c, #dc2626);
  width: var(--scroll-progress, 0%);
  transition: width 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
  .ultra-footer .footer-container {
    padding: 0 20px;
  }
  
  .footer-hero {
    padding: 40px 0;
    margin-bottom: 50px;
  }
  
  .brand-section {
    flex-direction: column;
    gap: 20px;
  }
  
  .brand-text {
    text-align: center;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .footer-column {
    padding: 25px;
  }
  
  .social-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .newsletter-section {
    padding: 30px 20px;
    margin-bottom: 40px;
  }
  
  .input-group {
    flex-direction: column;
    border-radius: 20px;
  }
  
  .newsletter-input {
    border-bottom: 1px solid rgba(185, 28, 28, 0.2);
    border-radius: 0;
  }
  
  .newsletter-btn {
    border-radius: 15px;
    margin-top: 5px;
  }
  
  .ultra-footer .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .footer-tech-stack {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .orb {
    display: none;
  }
  
  .social-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .social-card {
    padding: 15px;
  }
}