/* Root variables from the new footer CSS */
        :root {
            --gradient: linear-gradient(90deg, #ff6a00, #ff2d55);
            --primary-orange: #ff6a00;
            --primary-pink: #ff2d55;
            --white: #ffffff;
            --black: #000000;
            --text-gray: #4a4a4a; /* Not directly used for main text, but kept for reference */

            --footer-bg: #1a1a1a; /* Explicitly kept for footer */
            --footer-text: #f1f1f1;
            --footer-link: #d0d0d0;
            --accent: #ff2d55; /* Main accent color */
            --accent-light: #ff6a00; /* Secondary accent color */
            --accent-green: #4CAF50; /* Specific green for UI designs */
            --social-bg: #262626;

            /* New theme colors for main content - balanced dark/light */
            --main-bg-dark: #F0F2F5; /* Very light gray */
            --main-bg-light: #FFFFFF; /* White */
            --card-bg: #F8F8F8; /* Off-white for cards */
            --text-color-primary: #333333; /* Dark gray */
            --text-color-secondary: #555555; /* Medium gray */

            --card-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
            --circle-gradient: radial-gradient(circle at center, #ffc0cb, #ffa07a);
            --ff-primary: 'Poppins', sans-serif;
            --fs-xl: 3rem;
            --fs-lg: 2rem;
            --fs-md: 1.2rem;
            --fs-sm: 1rem;
            --radius: 16px;
            --transition: 0.3s ease;
        }

        body {
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            background-color: var(--main-bg-dark); /* Use new main background */
            color: var(--text-color-primary); /* Use new primary text color */
            animation: backgroundPulse 30s ease-in-out infinite; /* Very subtle background pulse */
        }

        /* Background pulse animation */
        @keyframes backgroundPulse {
            0% { background-color: var(--main-bg-dark); }
            50% { background-color: var(--main-bg-light); }
            100% { background-color: var(--main-bg-dark); }
        }

        /* Floating elements animation */
        .floating-element {
            animation: float 10s ease-in-out infinite; /* Slower float for more subtlety */
        }

        @keyframes float {
            0% { transform: translate(0, 0) scale(1); opacity: 0.08; }
            25% { transform: translate(10px, -15px) scale(1.02); opacity: 0.12; }
            50% { transform: translate(0, -25px) scale(1.05); opacity: 0.15; }
            75% { transform: translate(-10px, -15px) scale(1.02); opacity: 0.12; }
            100% { transform: translate(0, 0) scale(1); opacity: 0.08; }
        }

        /* Custom scrollbar for better aesthetics */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #D0D0D0; /* Lighter track for light theme */
        }

        ::-webkit-scrollbar-thumb {
            background: #A0A0A0; /* Lighter thumb */
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #808080; /* Darker on hover */
        }

        .section-title {
            position: relative;
            display: inline-block;
            padding-bottom: 8px;
            color: var(--text-color-primary); /* Ensure title color matches theme */
        }

        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0; /* Initially hidden */
            height: 3px;
            background-color: var(--accent); /* Use accent color */
            border-radius: 2px;
            transition: width 0.6s ease-out; /* Smooth transition for width */
        }

        .section-title.animated::after { /* Class added by JS when visible */
            width: 50%; /* Animates to 50% width */
        }

        .card {
            background-color: var(--card-bg); /* Use new card background */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #E0E0E0; /* Lighter border for light theme */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Initial subtle shadow */
            color: var(--text-color-primary); /* Ensure card text color matches theme */
        }

        .card:hover {
            transform: perspective(1000px) rotateY(5deg) translateY(-5px); /* Add perspective and rotation */
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* More pronounced shadow on hover */
        }

        .btn-primary {
            background-color: var(--accent); /* Use accent color */
            color: var(--white);
            padding: 10px 20px;
            border-radius: 8px;
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
            z-index: 1; /* Ensure shimmer is above */
        }

        .btn-primary:hover {
            background-color: var(--accent-light); /* Use accent-light for hover */
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(255, 45, 85, 0.6); /* Stronger glow effect on hover */
        }

        .btn-primary::before { /* Shimmer effect for buttons */
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: all 0.5s ease;
            z-index: -1; /* Place shimmer behind text */
        }

        .btn-primary:hover::before {
            left: 100%;
        }

        .gradient-text {
            background: var(--gradient); /* Use the defined gradient */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Hero section specific styles */
        .hero-section {
            background: linear-gradient(135deg, var(--main-bg-dark), var(--main-bg-light)); /* Adjust gradient to new theme */
            position: relative;
            overflow: hidden;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at center, rgba(255, 45, 85, 0.08) 0%, transparent 70%); /* Use accent color with more transparency */
            animation: rotateBackground 25s linear infinite; /* Slower rotation */
        }

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

        /* Text reveal animation for hero section */
        .text-reveal-animation {
            opacity: 0;
            animation: textReveal 1s cubic-bezier(0.23, 1, 0.32, 1) forwards; /* Smoother ease-out */
            animation-delay: var(--delay);
        }

        @keyframes textReveal {
            0% { opacity: 0; transform: translateY(30px) scale(0.95); } /* More pronounced initial state */
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* New Footer Styles (Unchanged as per request) */
        .footer {
            background: var(--footer-bg);
            padding: 90px 20px 50px;
            margin-top: 100px;
            border-top: 1px solid #333;
            box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
            border-radius: 80px 80px 0 0;
            position: relative;
            z-index: 1;
            overflow: hidden;
            color: var(--footer-text);
            font-family: var(--ff-primary); /* Apply Poppins to footer */
        }

        .footer::before {
            content: '';
            position: absolute;
            top: -60px;
            left: 0;
            width: 100%;
            height: 120px;
            background: linear-gradient(to top, var(--accent), var(--accent-light));
            border-radius: 0 0 80px 80px;
            z-index: -1;
        }

        .footer .container {
            max-width: 1200px;
            margin: auto;
            padding: 0 20px;
        }

        .footer-top {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 50px;
            margin-bottom: 40px;
        }

        .footer-brand .logo {
            font-size: 26px;
            font-weight: bold;
            color: var(--accent);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-brand .logo:hover {
            color: var(--accent-light);
        }

        .footer-text {
            margin-top: 12px;
            font-size: 15px;
            color: var(--footer-link);
            line-height: 1.8;
        }

        .footer-list-title {
            font-weight: 600;
            font-size: 16px;
            color: var(--accent);
            margin-bottom: 12px;
        }

        .footer-list {
            list-style: none;
            padding-left: 0;
            margin: 0;
        }

        .footer-list li {
            margin-bottom: 10px;
        }

        .footer-link {
            display: inline-block;
            font-size: 15px;
            color: var(--footer-link);
            text-decoration: none;
            position: relative;
            transition: all 0.3s ease;
            display: flex; /* For ion-icon alignment */
            align-items: center; /* For ion-icon alignment */
            gap: 8px; /* Space between icon and text */
        }

        .footer-link::after {
            content: '';
            display: block;
            height: 2px;
            width: 0;
            background-color: var(--accent);
            transition: width 0.3s ease;
            position: absolute;
            bottom: -4px;
            left: 0;
        }

        .footer-link:hover {
            color: var(--accent);
        }

        .footer-link:hover::after {
            width: 100%;
        }

        .social-list {
            display: flex;
            gap: 14px;
            margin-top: 20px;
            list-style: none;
            padding-left: 0;
        }

        .social-link {
            font-size: 18px;
            color: var(--accent);
            background: var(--social-bg);
            padding: 12px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(246, 193, 119, 0.15); /* Keep original shadow color or adjust */
        }

        .social-link ion-icon {
            font-size: 22px;
        }

        .social-link:hover {
            background: var(--accent);
            color: #1a1a1a; /* Dark text on hover */
            transform: scale(1.1);
            box-shadow: 0 6px 18px rgba(246, 193, 119, 0.3);
        }

        .footer-bottom {
            text-align: center;
            font-size: 14px;
            color: #aaa;
            padding-top: 25px;
            border-top: 1px solid #333;
        }

        /* Adjust global Tailwind classes to match new theme */
        .bg-gray-900 {
            background-color: var(--footer-bg); /* Header background remains dark for contrast */
        }
        /* Text colors now map to the new light theme variables */
        .text-gray-300 {
            color: var(--text-color-secondary);
        }
        .text-gray-200 { /* For contact section links */
            color: var(--text-color-primary);
        }
        .text-blue-400 {
            color: var(--accent);
        }
        .text-purple-400 {
            color: var(--accent-light);
        }
        .text-green-400 {
            color: var(--accent-green);
        }
        .text-blue-500 { /* For project links */
            color: var(--accent);
        }
        .hover\:text-blue-400:hover {
            color: var(--accent-light);
        }

        /* New animations for elements on scroll */
        .animate-fade-in-up {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s ease-out forwards;
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-scale-in {
            opacity: 0;
            transform: scale(0.9);
            animation: scaleIn 0.8s ease-out forwards;
        }

        @keyframes scaleIn {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Animation delays for staggered effects */
        .animation-delay-0-1s { animation-delay: 0.1s; }
        .animation-delay-0-2s { animation-delay: 0.2s; }
        .animation-delay-0-3s { animation-delay: 0.3s; }
        .animation-delay-0-4s { animation-delay: 0.4s; }
        .animation-delay-0-5s { animation-delay: 0.5s; }
        .animation-delay-0-6s { animation-delay: 0.6s; }
        .animation-delay-0-7s { animation-delay: 0.7s; }
        .animation-delay-0-8s { animation-delay: 0.8s; }
        .animation-delay-0-9s { animation-delay: 0.9s; }
        .animation-delay-1s { animation-delay: 1s; }
        .animation-delay-1-1s { animation-delay: 1.1s; }
        .animation-delay-1-2s { animation-delay: 1.2s; }
        .animation-delay-1-3s { animation-delay: 1.3s; }
        .animation-delay-1-4s { animation-delay: 1.4s; }
        .animation-delay-1-5s { animation-delay: 1.5s; }
        .animation-delay-1-6s { animation-delay: 1.6s; }

        /* Icon container and icon styling for project cards */
        .icon-container {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px; /* Larger container */
            height: 80px; /* Larger container */
            border-radius: 50%; /* Circular background */
            margin: 0 auto 1rem; /* Center and space below */
            background: linear-gradient(45deg, var(--accent), var(--accent-light)); /* Gradient background */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Subtle shadow for depth */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .icon-container:hover {
            transform: translateY(-5px) rotate(5deg); /* Lift and slight rotate on hover */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
        }

        .icon-container .project-icon {
            font-size: 3.8rem; /* Slightly larger icon inside container */
            color: var(--white); /* White icon on gradient background */
            margin-bottom: 0; /* Remove margin as container handles spacing */
            transition: none; /* Disable individual icon transition as container handles it */
        }

        /* Active navigation link styling */
        .nav-link.active {
            color: var(--accent); /* Highlight active link with accent color */
            font-weight: 600;
            position: relative;
        }

        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--accent);
            border-radius: 1px;
        }

        /* Mobile navigation specific styles */
        .mobile-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 40; /* Below header, above content */
            display: none; /* Hidden by default */
        }

        .mobile-menu {
            position: fixed;
            top: 0;
            right: -250px; /* Hidden off-screen */
            width: 250px;
            height: 100%;
            background-color: var(--footer-bg); /* Use footer background for consistency */
            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
            z-index: 50; /* Above overlay */
            transition: right 0.3s ease-in-out;
            padding-top: 4rem; /* Space for close button */
        }

        .mobile-menu.open {
            right: 0; /* Slide in */
        }

        .mobile-menu ul {
            list-style: none;
            padding: 0;
            margin-top: 2rem;
        }

        .mobile-menu ul li {
            padding: 1rem 1.5rem;
            border-bottom: 1px solid #333;
        }

        .mobile-menu ul li:last-child {
            border-bottom: none;
        }

        .mobile-menu ul li a {
            color: var(--footer-text);
            font-size: 1.1rem;
            display: block;
            transition: color 0.2s ease;
        }

        .mobile-menu ul li a:hover, .mobile-menu ul li a.active {
            color: var(--accent);
        }

        .close-button {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            font-size: 2rem;
            color: var(--white);
            cursor: pointer;
            z-index: 60;
        }