/* ======================================================
   PORTOFOLIO WEBSITE STYLESHEET
   ======================================================
   Stylesheet ini berisi semua gaya untuk website portofolio.
   Termasuk tema gelap/terang, animasi, dan responsivitas.
   
   DAFTAR ISI:
   1. Gradient & Background Styles
   2. Dark Mode Styles
   3. Component Styles (Cards, Buttons, etc)
   4. Animation Effects
   5. Responsive Adjustments
   ====================================================== */

/* ==================== 
   1. GRADIENT & BACKGROUND STYLES 
   ==================== */
.gradient-bg {
            background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
        }
        
        /* ==================== 
           2. DARK MODE STYLES 
           ==================== */
        /* Dark Mode Enhancements */
        body:not(.light-mode) {
            background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%) !important;
            color: #e5e7eb !important;
        }
        
        /* Dark Mode Text Colors */
        body:not(.light-mode) .text-white {
            color: #e5e7eb !important;
        }
        
        body:not(.light-mode) .text-gray-300 {
            color: #d1d5db !important;
        }
        
        body:not(.light-mode) .text-gray-400 {
            color: #9ca3af !important;
        }
        
        body:not(.light-mode) .text-gray-500 {
            color: #6b7280 !important;
        }
        
        body:not(.light-mode) .text-gray-600 {
            color: #4b5563 !important;
        }
        
        /* Dark Mode Background Colors */
        body:not(.light-mode) .bg-gray-800 {
            background: #1f2937 !important;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        body:not(.light-mode) .bg-gray-900 {
            background: #111827 !important;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        body:not(.light-mode) .bg-gray-700 {
            background: #374151 !important;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        body:not(.light-mode) .bg-gray-600 {
            background: #4b5563 !important;
        }
        
        /* Dark Mode Sections */
        body:not(.light-mode) section {
            background: transparent !important;
            color: #e5e7eb !important;
        }
        
        body:not(.light-mode) #home {
            background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%) !important;
        }
        
        body:not(.light-mode) #about {
            background: #111827 !important;
        }
        
        body:not(.light-mode) #skills {
            background: #1f2937 !important;
        }
        
        body:not(.light-mode) #projects {
            background: #111827 !important;
        }
        
        body:not(.light-mode) #experience {
            background: #1f2937 !important;
        }
        
        body:not(.light-mode) #certificates {
            background: #111827 !important;
        }
        
        /* ==================== 
           PROFILE PHOTO ENHANCEMENT STYLES 
           ==================== */
        /* Profile Photo - Always Bright and Smooth */
        .profile-photo-container {
            position: relative !important;
            z-index: 9999 !important;
        }
        
        .profile-photo-container img {
            filter: brightness(1.3) contrast(1.1) saturate(1.1) blur(0px) !important;
            -webkit-filter: brightness(1.3) contrast(1.1) saturate(1.1) blur(0px) !important;
            position: relative !important;
            z-index: 9999 !important;
            transition: all 0.7s ease !important;
            image-rendering: -webkit-optimize-contrast !important;
            image-rendering: crisp-edges !important;
            -webkit-backface-visibility: hidden !important;
            backface-visibility: hidden !important;
            -webkit-transform: translateZ(0) !important;
            transform: translateZ(0) !important;
        }
        
        .profile-photo-container img:hover {
            filter: brightness(1.5) contrast(1.25) saturate(1.25) blur(0px) !important;
            -webkit-filter: brightness(1.5) contrast(1.25) saturate(1.25) blur(0px) !important;
            transform: scale(1.1) translateZ(0) !important;
            -webkit-transform: scale(1.1) translateZ(0) !important;
        }
        
        /* Ensure photo stays bright in all themes */
        body.light-mode .profile-photo-container img,
        body:not(.light-mode) .profile-photo-container img {
            filter: brightness(1.3) contrast(1.1) saturate(1.1) blur(0px) !important;
            -webkit-filter: brightness(1.3) contrast(1.1) saturate(1.1) blur(0px) !important;
        }
        
        body.light-mode .profile-photo-container img:hover,
        body:not(.light-mode) .profile-photo-container img:hover {
            filter: brightness(1.5) contrast(1.25) saturate(1.25) blur(0px) !important;
            -webkit-filter: brightness(1.5) contrast(1.25) saturate(1.25) blur(0px) !important;
        }
        
        /* Photo frame enhancement */
        .photo-frame {
            position: relative !important;
            z-index: 9999 !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        
        .photo-inner {
            position: relative !important;
            z-index: 9999 !important;
            overflow: hidden !important;
        }
        
        /* Responsive Text Sizes for Home Section */
        @media (max-width: 640px) {
            .profile-photo-container {
                margin-top: 2rem !important;
            }
            
            .profile-photo-container .w-80 {
                width: 18rem !important;
                height: 18rem !important;
            }
        }
        
        @media (min-width: 641px) and (max-width: 1024px) {
            .profile-photo-container .w-80 {
                width: 20rem !important;
                height: 20rem !important;
            }
        }
        
        body:not(.light-mode) #contact {
            background: #1f2937 !important;
        }
        
        /* Dark Mode Cards and Components */
        body:not(.light-mode) .bg-gray-800\/50,
        body:not(.light-mode) .bg-gray-800\/80,
        body:not(.light-mode) .bg-gray-800\/30 {
            background: rgba(31, 41, 55, 0.8) !important;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        body:not(.light-mode) .bg-gray-900\/50,
        body:not(.light-mode) .bg-gray-900\/80,
        body:not(.light-mode) .bg-gray-900\/30 {
            background: rgba(17, 24, 39, 0.8) !important;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        body:not(.light-mode) .bg-gray-700\/30,
        body:not(.light-mode) .bg-gray-700\/50 {
            background: rgba(55, 65, 81, 0.5) !important;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        /* Dark Mode Hover Effects */
        body:not(.light-mode) .hover\:bg-gray-700:hover,
        body:not(.light-mode) .hover\:bg-gray-600:hover {
            background: #374151 !important;
        }
        
        body:not(.light-mode) .hover\:bg-gray-700\/50:hover,
        body:not(.light-mode) .hover\:bg-gray-600\/30:hover {
            background: rgba(55, 65, 81, 0.5) !important;
        }
        
        /* Dark Mode Border Colors */
        body:not(.light-mode) .border-gray-700 {
            border-color: rgba(255, 255, 255, 0.1) !important;
        }
        
        body:not(.light-mode) .border-gray-600 {
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        
        body:not(.light-mode) .border-gray-800 {
            border-color: rgba(255, 255, 255, 0.05) !important;
        }
        
        /* Dark Mode Headers and Text */
        body:not(.light-mode) h1,
        body:not(.light-mode) h2,
        body:not(.light-mode) h3,
        body:not(.light-mode) h4,
        body:not(.light-mode) h5,
        body:not(.light-mode) h6 {
            color: #e5e7eb !important;
        }
        
        body:not(.light-mode) p {
            color: #d1d5db !important;
        }
        
        /* Dark Mode Navigation */
        body:not(.light-mode) .header-nav {
            background: rgba(17, 24, 39, 0.95) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }
        
        body:not(.light-mode) .nav-item {
            background: rgba(31, 41, 55, 0.3) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            color: #e5e7eb !important;
        }
        
        body:not(.light-mode) .nav-item:hover {
            background: rgba(55, 65, 81, 0.5) !important;
            border-color: rgba(139, 92, 246, 0.3) !important;
        }
        
        body:not(.light-mode) .nav-link {
            color: #e5e7eb !important;
        }
        
        body:not(.light-mode) .nav-item:hover .nav-link {
            color: #a855f7 !important;
        }
        
        /* Dark Mode Theme Toggle */
        body:not(.light-mode) .theme-toggle {
            background: rgba(31, 41, 55, 0.8) !important;
            border-color: rgba(255, 255, 255, 0.2) !important;
        }
        
        body:not(.light-mode) .theme-toggle:hover {
            background: rgba(55, 65, 81, 0.8) !important;
            border-color: rgba(139, 92, 246, 0.4) !important;
        }
        
        /* Dark Mode Buttons */
        body:not(.light-mode) button {
            transition: all 0.3s ease !important;
        }
        
        body:not(.light-mode) .bg-primary {
            background: #8b5cf6 !important;
            color: #ffffff !important;
        }
        
        body:not(.light-mode) .bg-secondary {
            background: #06b6d4 !important;
            color: #ffffff !important;
        }
        
        /* Dark Mode Forms and Inputs */
        body:not(.light-mode) input,
        body:not(.light-mode) textarea,
        body:not(.light-mode) select {
            background: #374151 !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            color: #e5e7eb !important;
        }
        
        body:not(.light-mode) input:focus,
        body:not(.light-mode) textarea:focus,
        body:not(.light-mode) select:focus {
            border-color: #8b5cf6 !important;
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
        }
        
        /* Dark Mode Modals */
        body:not(.light-mode) .modal {
            background: rgba(0, 0, 0, 0.8) !important;
        }
        
        body:not(.light-mode) .modal .bg-gray-800 {
            background: #1f2937 !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }
        
        body:not(.light-mode) .modal .bg-gray-700 {
            background: #374151 !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
        }
        
        /* Global Transition for Theme Changes */
        * {
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
        }
        
        /* Dark Mode Footer */
        body:not(.light-mode) footer {
            background: #111827 !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }
        
        body:not(.light-mode) footer .text-gray-400 {
            color: #9ca3af !important;
        }
        
        body:not(.light-mode) footer .bg-gray-800 {
            background: #1f2937 !important;
        }
        
        /* Dark Mode Cards */
        body:not(.light-mode) .card,
        body:not(.light-mode) [class*="card"] {
            background: #1f2937 !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            color: #e5e7eb !important;
        }
        
        body:not(.light-mode) .card:hover,
        body:not(.light-mode) [class*="card"]:hover {
            background: #374151 !important;
            border-color: rgba(139, 92, 246, 0.3) !important;
        }
        
        /* Dark Mode Project Cards */
        body:not(.light-mode) .project-card {
            background: #1f2937 !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }
        
        body:not(.light-mode) .project-card:hover {
            background: #374151 !important;
            transform: translateY(-5px) !important;
            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2) !important;
        }
        
        /* Dark Mode Skill Cards */
        body:not(.light-mode) .skill-card {
            background: #1f2937 !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }
        
        body:not(.light-mode) .skill-card:hover {
            background: #374151 !important;
        }
        
        /* Dark Mode Certificate Cards */
        body:not(.light-mode) .certificate-card {
            background: #1f2937 !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }
        
        body:not(.light-mode) .certificate-card:hover {
            background: #374151 !important;
        }
        
        /* Dark Mode Education Cards */
body:not(.light-mode) .education-card {
    background: #1f2937 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body:not(.light-mode) .education-card:hover {
    background: #374151 !important;
}

/* ==================== 
   5. RESPONSIVE ADJUSTMENTS 
   ==================== */
/* Education and Experience Section Mobile Responsiveness - Penyesuaian tampilan untuk layar kecil/mobile */
@media (max-width: 640px) {
    /* Perbaiki education section agar benar-benar tengah seperti experience */
    #education .max-w-4xl {
        padding-left: 2rem;
        padding-right: 1rem;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
        max-width: 100% !important;
    }
    
    #education .container {
        padding-left: 2rem;
        padding-right: 1rem;
        max-width: 100%;
        width: 100%;
    }
    
    /* Kembalikan timeline line seperti di experience */
    #education .absolute.left-0.top-0.w-0\.5 {
        display: block !important; /* Tampilkan timeline line */
        background: linear-gradient(to bottom, #8b5cf6, #a855f7, #6b7280) !important;
        left: 2rem !important;
    }
    
    #education .absolute.left-0.top-6 {
        display: block !important; /* Tampilkan timeline dot */
        left: 2rem !important;
    }
    
    /* Atur padding dan margin yang tepat untuk centering */
    #education .relative.pl-6 {
        padding-left: 3rem !important; /* Lebih ke kanan */
    }
    
    #education .ml-4,
    #education .ml-4.lg\:ml-6 {
        margin-left: 2.5rem !important; /* Lebih ke kanan */
    }
    
    /* Hanya education cards - atur margin yang tepat */
    #education .education-item .bg-gradient-to-br,
    #education .group .bg-gradient-to-br {
        margin-left: 2.5rem !important; /* Lebih ke kanan */
        margin-right: 0 !important;
        width: calc(100% - 2.5rem) !important;
        max-width: calc(100% - 2.5rem) !important;
    }
    
    /* Pastikan flex layout bekerja dengan baik untuk education */
    #education .flex-col.lg\:flex-row {
        display: flex;
        flex-direction: column;
        align-items: center; /* Tengah */
    }
    
    #education .flex-shrink-0.mt-2.lg\:mt-0 {
        margin-top: 0.5rem;
        align-self: center; /* Tengah */
    }
    
    #education .flex-col.sm\:flex-row {
        display: flex;
        flex-direction: column;
        align-items: center; /* Tengah */
        gap: 0.75rem;
    }
    
    #education .self-start.sm\:self-auto.lg\:self-center {
        align-self: center; /* Tengah */
        margin-top: 0.5rem;
    }
    
    /* Hover effects hanya untuk education */
    #education .group-hover\:transform {
        transition: all 0.3s ease;
    }
    
    #education .group-hover\:scale-\[1\.02\] {
        transform: scale(1.01);
    }
    
    #education .group-hover\:shadow-2xl {
        box-shadow: 0 0 15px rgba(79, 70, 229, 0.15);
    }
    
    /* Tambahan untuk memastikan konten education seimbang seperti experience */
    #education .bg-gradient-to-br.from-gray-800\/80.via-gray-900\/80.to-gray-800\/80 {
        margin-left: 2.5rem !important; /* Lebih ke kanan */
        margin-right: 0 !important;
        width: calc(100% - 2.5rem) !important;
        max-width: calc(100% - 2.5rem) !important;
    }
    
    /* Pastikan container education memiliki padding yang sama */
    #education .container.mx-auto.px-0 {
        padding-left: 2rem !important;
        padding-right: 1rem !important;
    }
    
    /* Tambahan untuk memastikan education section terlihat sama dengan experience */
    #education .relative.pl-6.lg\:pl-8 {
        padding-left: 3rem !important; /* Lebih ke kanan */
    }
    
    #education .ml-4.lg\:ml-6 {
        margin-left: 2.5rem !important; /* Lebih ke kanan */
    }
    
    /* Tambahan khusus untuk education agar pas tengah */
    #education .education-item {
        padding-left: 3rem !important; /* Lebih ke kanan */
    }
    
    #education .education-item .bg-gradient-to-br {
        margin-left: 2.5rem !important; /* Lebih ke kanan */
        width: calc(100% - 2.5rem) !important;
    }
    
    /* Pastikan timeline dot terlihat dengan baik */
    #education .absolute.left-0.top-6.w-4.h-4 {
        display: block !important;
        background: linear-gradient(to right, #8b5cf6, #a855f7) !important;
        border: 4px solid #111827 !important;
        transform: translateX(-50%) !important;
        z-index: 10 !important;
        left: 2rem !important;
    }
    
    /* Pastikan timeline dot animation terlihat */
    #education .absolute.left-0.top-6.w-4.h-4 .absolute.inset-0 {
        display: block !important;
        background: linear-gradient(to right, #8b5cf6, #a855f7) !important;
        border-radius: 50% !important;
        animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important;
        opacity: 0.75 !important;
    }
    
    /* Tambahan untuk memastikan konten terpusat */
    #education .education-item {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    #education .education-item > div {
        width: 100%;
        max-width: 100%;
    }
}
        
        /* ==================== 
   3. COMPONENT STYLES - EXPERIENCE CARDS 
   ==================== */
        /* Dark Mode Experience Cards - Kartu untuk menampilkan pengalaman kerja */
        body:not(.light-mode) .experience-card {
            background: #1f2937 !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }
        
        body:not(.light-mode) .experience-card:hover {
            background: #374151 !important;
        }
        
        /* ==================== 
   4. ANIMATION EFFECTS - SCROLLBARS 
   ==================== */
        /* Dark Mode Scrollbars - Kustomisasi tampilan scrollbar untuk tema gelap */
        body:not(.light-mode) ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        body:not(.light-mode) ::-webkit-scrollbar-track {
            background: #1f2937;
        }
        
        body:not(.light-mode) ::-webkit-scrollbar-thumb {
            background: #374151;
            border-radius: 4px;
        }
        
        body:not(.light-mode) ::-webkit-scrollbar-thumb:hover {
            background: #4b5563;
        }
        
        /* ==================== 
   4. ANIMATION EFFECTS - SHADOWS 
   ==================== */
        /* Dark Mode Shadows - Efek bayangan untuk elemen dalam tema gelap */
        body:not(.light-mode) .shadow-lg {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
        }
        
        body:not(.light-mode) .shadow-md {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
        }
        
        body:not(.light-mode) .shadow-sm {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        }
        
        /* ==================== 
   4. ANIMATION EFFECTS - BLUR 
   ==================== */
        /* Dark Mode Backdrop Blur - Efek blur untuk latar belakang elemen */
        body:not(.light-mode) .backdrop-blur-sm {
            backdrop-filter: blur(4px) !important;
        }
        
        body:not(.light-mode) .backdrop-blur {
            backdrop-filter: blur(8px) !important;
        }
        
        body:not(.light-mode) .backdrop-blur-lg {
            backdrop-filter: blur(16px) !important;
        }
        
        /* Enhanced Particle Animation */
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }
        
        .particle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            animation: float 8s ease-in-out infinite;
        }
        
        .particle-1 {
            background: radial-gradient(circle, #8b5cf6, #a855f7);
            box-shadow: 0 0 20px #8b5cf6, 0 0 40px #8b5cf6;
            animation-delay: 0s;
        }
        
        .particle-2 {
            background: radial-gradient(circle, #06b6d4, #0891b2);
            box-shadow: 0 0 20px #06b6d4, 0 0 40px #06b6d4;
            animation-delay: -1.6s;
        }
        
        .particle-3 {
            background: radial-gradient(circle, #10b981, #059669);
            box-shadow: 0 0 20px #10b981, 0 0 40px #10b981;
            animation-delay: -3.2s;
        }
        
        .particle-4 {
            background: radial-gradient(circle, #f59e0b, #d97706);
            box-shadow: 0 0 20px #f59e0b, 0 0 40px #f59e0b;
            animation-delay: -4.8s;
        }
        
        .particle-5 {
            background: radial-gradient(circle, #ef4444, #dc2626);
            box-shadow: 0 0 20px #ef4444, 0 0 40px #ef4444;
            animation-delay: -6.4s;
        }
        
        @keyframes float {
            0% {
                transform: translateY(100vh) translateX(0px) rotate(0deg) scale(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
                transform: translateY(90vh) translateX(10px) rotate(36deg) scale(1);
            }
            25% {
                transform: translateY(75vh) translateX(-20px) rotate(90deg) scale(1.2);
                opacity: 0.8;
            }
            50% {
                transform: translateY(50vh) translateX(30px) rotate(180deg) scale(0.8);
                opacity: 1;
            }
            75% {
                transform: translateY(25vh) translateX(-15px) rotate(270deg) scale(1.1);
                opacity: 0.6;
            }
            90% {
                transform: translateY(10vh) translateX(5px) rotate(324deg) scale(0.9);
                opacity: 0.3;
            }
            100% {
                transform: translateY(-10vh) translateX(0px) rotate(360deg) scale(0);
                opacity: 0;
            }
        }
        
        /* Floating Geometric Shapes */
        .floating-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            z-index: 1;
        }
        
        .floating-shape {
            position: absolute;
            opacity: 0.1;
            animation: floatShape 15s ease-in-out infinite;
        }
        
        .shape-triangle {
            width: 0;
            height: 0;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-bottom: 43px solid #8b5cf6;
            animation-delay: 0s;
        }
        
        .shape-square {
            width: 40px;
            height: 40px;
            background: linear-gradient(45deg, #06b6d4, #0891b2);
            transform: rotate(45deg);
            animation-delay: -3s;
        }
        
        .shape-circle {
            width: 30px;
            height: 30px;
            background: radial-gradient(circle, #10b981, #059669);
            border-radius: 50%;
            animation-delay: -6s;
        }
        
        .shape-hexagon {
            width: 40px;
            height: 23px;
            background: #f59e0b;
            position: relative;
            animation-delay: -9s;
        }
        
        .shape-hexagon:before,
        .shape-hexagon:after {
            content: "";
            position: absolute;
            width: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }
        
        .shape-hexagon:before {
            bottom: 100%;
            border-bottom: 12px solid #f59e0b;
        }
        
        .shape-hexagon:after {
            top: 100%;
            border-top: 12px solid #f59e0b;
        }
        
        @keyframes floatShape {
            0%, 100% {
                transform: translateY(100vh) translateX(-50px) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.1;
            }
            50% {
                transform: translateY(-20vh) translateX(50px) rotate(180deg);
                opacity: 0.2;
            }
            90% {
                opacity: 0.1;
            }
        }
        
        /* Animated Background Gradient */
        .animated-bg {
            background: linear-gradient(-45deg, #0f0f23, #1a1a2e, #16213e, #0f3460, #8b5cf6, #06b6d4);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
        }
        
        /* Education Slider Animation */
        .education-slider-container {
            mask: linear-gradient(90deg, transparent, white 5%, white 95%, transparent);
            -webkit-mask: linear-gradient(90deg, transparent, white 5%, white 95%, transparent);
        }
        
        .education-slider {
            animation: slideRight 25s linear infinite;
            width: max-content;
        }
        
        .education-slider:hover {
            animation-play-state: paused;
        }
        
        @keyframes slideRight {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }
        
        .education-card {
            min-height: 280px;
            height: auto;
            max-height: 320px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        /* Mobile Education Slider */
        @media (max-width: 640px) {
            .education-slider {
                animation: slideRight 20s linear infinite;
            }
            
            .education-card {
                width: 260px !important;
                min-height: 240px;
                height: auto;
                max-height: 280px;
            }
            
            .education-card h3 {
                font-size: 0.875rem !important;
                line-height: 1.2;
            }
            
            .education-card p {
                font-size: 0.75rem !important;
            }
        }
        
        /* Line clamp utility */
        .line-clamp-1 {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }
        
        .line-clamp-2 {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        
        .line-clamp-4 {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
        }
        
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        /* Morphing Shapes */
        .morphing-shape {
            position: absolute;
            width: 200px;
            height: 200px;
            background: linear-gradient(45deg, rgba(139, 92, 246, 0.1), rgba(6, 182, 212, 0.1));
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            animation: morph 8s ease-in-out infinite;
            opacity: 0.3;
        }
        
        .morphing-shape:nth-child(2) {
            animation-delay: -2s;
            background: linear-gradient(45deg, rgba(16, 185, 129, 0.1), rgba(245, 158, 11, 0.1));
        }
        
        .morphing-shape:nth-child(3) {
            animation-delay: -4s;
            background: linear-gradient(45deg, rgba(239, 68, 68, 0.1), rgba(139, 92, 246, 0.1));
        }
        
        @keyframes morph {
            0%, 100% {
                border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
                transform: translateX(0) translateY(0) rotate(0deg);
            }
            25% {
                border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
                transform: translateX(50px) translateY(-30px) rotate(90deg);
            }
            50% {
                border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
                transform: translateX(-20px) translateY(50px) rotate(180deg);
            }
            75% {
                border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
                transform: translateX(-50px) translateY(-20px) rotate(270deg);
            }
        }
        
        /* Glowing Orbs */
        .glowing-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(1px);
            animation: glow 4s ease-in-out infinite alternate;
        }
        
        .orb-1 {
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(139, 92, 246, 0.4), transparent);
            top: 20%;
            right: 10%;
            animation-delay: 0s;
        }
        
        .orb-2 {
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, rgba(6, 182, 212, 0.3), transparent);
            bottom: 30%;
            left: 5%;
            animation-delay: -1s;
        }
        
        .orb-3 {
            width: 80px;
            height: 80px;
            background: radial-gradient(circle, rgba(16, 185, 129, 0.4), transparent);
            top: 60%;
            right: 30%;
            animation-delay: -2s;
        }
        
        @keyframes glow {
            0% {
                transform: scale(1) translateY(0px);
                opacity: 0.3;
            }
            100% {
                transform: scale(1.2) translateY(-20px);
                opacity: 0.6;
            }
        }
        
        /* Floating Text Animation */
        .floating-text {
            position: absolute;
            font-size: 12px;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.1);
            animation: floatText 20s linear infinite;
            pointer-events: none;
        }
        
        @keyframes floatText {
            0% {
                transform: translateY(100vh) translateX(0);
                opacity: 0;
            }
            10%, 90% {
                opacity: 0.1;
            }
            50% {
                opacity: 0.2;
            }
            100% {
                transform: translateY(-100px) translateX(100px);
                opacity: 0;
            }
        }
        .modal {
            display: none;
        }
        .modal.active {
            display: flex;
        }
        .skill-bar {
            transition: width 1s ease-in-out;
        }
        .animate-fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Education Gallery Styles */
        #mainGalleryImage {
            transition: transform 0.3s ease;
            transform-origin: center center;
        }
        
        /* Project Gallery Styles */
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        
        /* Smooth transitions for image transforms */
        #mainGalleryImage, #fullscreenImage {
            transition: transform 0.3s ease;
        }
        
        /* Fullscreen modal z-index */
        #imageFullscreenModal {
            z-index: 9999;
        }
        
        /* Draggable cursor for zoomed images */
        
        /* Typing Animation Styles */
        .typing-animation {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            min-height: 1.5em;
            position: relative;
            background: linear-gradient(90deg, #06B6D4, #8B5CF6, #10B981);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientShift 3s ease-in-out infinite;
        }
        
        .blinking-cursor {
            animation: blink 1.2s infinite;
            font-weight: 300;
            color: #06B6D4;
        }
        
        @keyframes blink {
            0%, 45% { opacity: 1; }
            46%, 100% { opacity: 0; }
        }
        
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }
        
        @keyframes erasing {
            from { width: 100%; }
            to { width: 0; }
        }
        .cursor-grab {
            cursor: grab;
        }
        .cursor-grab:active {
            cursor: grabbing;
        }
        
        /* Hover effects for control buttons */
        .control-btn {
            transition: all 0.2s ease;
        }
        .control-btn:hover {
            transform: scale(1.1);
        }
        
        /* Thumbnail selection */
        .thumbnail-selected {
            border: 2px solid #8b5cf6 !important;
            box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
        }
        
        #mainImageContainer {
            overflow: hidden;
            position: relative;
        }
        
        #mainImageContainer:hover #zoomControls {
            opacity: 1 !important;
        }
        
        /* Line clamp utility */
        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .thumbnail-active {
            border-color: #8b5cf6 !important;
        }
        
        /* Smooth transitions for zoom controls */
        #zoomControls {
            transition: opacity 0.3s ease;
        }
        
        /* Custom scrollbar for thumbnails */
        #thumbnailContainer::-webkit-scrollbar {
            height: 4px;
        }
        
        #thumbnailContainer::-webkit-scrollbar-track {
            background: #374151;
            border-radius: 2px;
        }
        
        #thumbnailContainer::-webkit-scrollbar-thumb {
            background: #8b5cf6;
            border-radius: 2px;
        }
        
        #thumbnailContainer::-webkit-scrollbar-thumb:hover {
            background: #7c3aed;
        }

        /* Header Styles */
        .header-nav {
            backdrop-filter: blur(20px);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .header-animated::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
            animation: headerShimmer 3s infinite;
            z-index: -1;
        }
        
        @keyframes headerShimmer {
            0% { left: -100%; }
            50% { left: 100%; }
            100% { left: 100%; }
        }
        
        .logo-animated {
            background: linear-gradient(45deg, #8B5CF6, #06B6D4, #10B981, #8B5CF6);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: logoGradient 4s ease-in-out infinite;
        }
        
        @keyframes logoGradient {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        .logo-dot {
            animation: logoDotBlink 2s ease-in-out infinite;
        }
        
        @keyframes logoDotBlink {
            0%, 50%, 100% { opacity: 1; }
            25%, 75% { opacity: 0.3; }
        }
        
        .nav-item {
            position: relative;
            padding: 8px 16px;
            border-radius: 10px;
            background: transparent;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.02);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateY(0);
            overflow: hidden;
        }
        
        .nav-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(6, 182, 212, 0.1), rgba(16, 185, 129, 0.1));
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: -1;
        }
        
        .nav-item:hover::before {
            opacity: 1;
        }
        
        .nav-item:hover {
            background: rgba(255, 255, 255, 0.03);
            border-color: rgba(139, 92, 246, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(139, 92, 246, 0.2);
        }
        
        .nav-item:active {
            transform: translateY(0) scale(0.98);
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.15);
        }
        
        .nav-link {
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0.5px;
            position: relative;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #8B5CF6, #06B6D4);
            transition: width 0.3s ease;
        }
        
        .nav-item:hover .nav-link::after {
            width: 100%;
        }
        
        /* Dark/Light Mode Toggle */
        .theme-toggle {
            position: relative;
            width: 60px;
            height: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 25px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .theme-toggle:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(139, 92, 246, 0.4);
        }
        
        .theme-toggle-slider {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 26px;
            height: 26px;
            background: linear-gradient(135deg, #8B5CF6, #06B6D4);
            border-radius: 50%;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        
        .theme-toggle.light .theme-toggle-slider {
            transform: translateX(30px);
            background: linear-gradient(135deg, #FCD34D, #F59E0B);
        }
        
        /* Light Mode Styles */
        body.light-mode {
            background: #ffffff !important;
            color: #000000 !important;
        }
        
        body.light-mode .header-nav {
            background: rgba(255, 255, 255, 0.98);
            border-color: rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }
        
        body.light-mode .nav-item {
            background: rgba(255, 255, 255, 0.9);
            border-color: rgba(0, 0, 0, 0.1);
            color: #000000 !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        body.light-mode .nav-item::before {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(6, 182, 212, 0.08), rgba(16, 185, 129, 0.08));
        }
        
        body.light-mode .nav-item:hover {
            background: rgba(255, 255, 255, 1);
            border-color: rgba(139, 92, 246, 0.3);
            color: #7c3aed !important;
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.15);
        }
        
        body.light-mode .nav-link {
            color: #000000 !important;
            font-weight: 600;
        }
        
        body.light-mode .nav-item:hover .nav-link {
            color: #7c3aed !important;
        }
        
        body.light-mode .theme-toggle {
            background: rgba(0, 0, 0, 0.1);
            border-color: rgba(0, 0, 0, 0.2);
        }
        
        /* Light Mode Home Section */
        body.light-mode #home {
            background: #ffffff !important;
        }
        
        body.light-mode .particle {
            background: rgba(139, 92, 246, 0.4);
            box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
        }
        
        body.light-mode .particle:nth-child(odd) {
            background: rgba(6, 182, 212, 0.35);
            box-shadow: 0 0 20px rgba(6, 182, 212, 0.25);
        }
        
        body.light-mode .particle:nth-child(3n) {
            background: rgba(16, 185, 129, 0.3);
            box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
        }
        
        /* Light Mode Sections */
        body.light-mode section {
            background: #ffffff !important;
            color: #000000 !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        }
        
        body.light-mode .bg-gray-900 {
            background: #ffffff !important;
            color: #000000 !important;
        }
        
        body.light-mode .bg-gray-800 {
            background: #ffffff !important;
            color: #000000 !important;
            border: 1px solid rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        body.light-mode .text-white {
            color: #000000 !important;
        }
        
        body.light-mode .text-gray-300 {
            color: #000000 !important;
        }
        
        body.light-mode .text-gray-400 {
            color: #333333 !important;
        }
        
        body.light-mode .text-gray-500 {
            color: #555555 !important;
        }
        
        body.light-mode .text-gray-600 {
            color: #000000 !important;
        }
        
        /* Light Mode Cards and Components */
        body.light-mode .bg-gray-700 {
            background: #ffffff !important;
            color: #000000 !important;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        body.light-mode .bg-gray-600 {
            background: #ffffff !important;
            color: #000000 !important;
        }
        
        body.light-mode .border-gray-700 {
            border-color: rgba(0, 0, 0, 0.1) !important;
        }
        
        body.light-mode .border-gray-600 {
            border-color: rgba(0, 0, 0, 0.08) !important;
        }
        
        /* Light Mode Buttons */
        body.light-mode .bg-primary {
            background: #8b5cf6 !important;
            color: #ffffff !important;
        }
        
        body.light-mode .bg-secondary {
            background: #06b6d4 !important;
            color: #ffffff !important;
        }
        
        /* Light Mode Text Colors */
        body.light-mode h1,
        body.light-mode h2,
        body.light-mode h3,
        body.light-mode h4,
        body.light-mode h5,
        body.light-mode h6 {
            color: #000000 !important;
            font-weight: 700;
        }
        
        body.light-mode p {
            color: #000000 !important;
        }
        
        body.light-mode .text-primary {
            color: #7c3aed !important;
        }
        
        body.light-mode .text-secondary {
            color: #0891b2 !important;
        }
        
        /* Light Mode Modals */
        body.light-mode .modal {
            background: rgba(0, 0, 0, 0.6) !important;
        }
        
        body.light-mode .modal .bg-gray-800 {
            background: #ffffff !important;
            border: 1px solid rgba(0, 0, 0, 0.1);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
        }
        
        /* Project Modal Dark Mode Support */
        body.light-mode #projectModal .bg-gray-900 {
            background: #ffffff !important;
        }
        
        body.light-mode #projectModal .bg-gray-800\/80 {
            background: rgba(248, 250, 252, 0.8) !important;
        }
        
        body.light-mode #projectModal .text-white {
            color: #0f172a !important;
        }
        
        body.light-mode #projectModal .text-gray-300 {
            color: #374151 !important;
        }
        
        body.light-mode #projectModal .text-gray-400 {
            color: #6b7280 !important;
        }
        
        body.light-mode #projectModal .border-gray-700 {
            border-color: rgba(0, 0, 0, 0.1) !important;
        }
        
        body.light-mode #projectModal .bg-black\/70 {
            background: rgba(255, 255, 255, 0.9) !important;
        }
        
        body.light-mode #projectModal .bg-black\/70 .text-white {
            color: #0f172a !important;
        }
        
        /* Dark Mode Font Colors - NO WHITE (#ffffff) */
        body:not(.light-mode) #projectModal .text-white {
            color: #e5e7eb !important; /* Light gray instead of white */
        }
        
        body:not(.light-mode) #projectModal .text-gray-300 {
            color: #d1d5db !important; /* Lighter gray */
        }
        
        body:not(.light-mode) #projectModal .text-gray-400 {
            color: #9ca3af !important; /* Medium gray */
        }
        
        body:not(.light-mode) #projectModal h2,
        body:not(.light-mode) #projectModal h3,
        body:not(.light-mode) #projectModal p {
            color: #e5e7eb !important; /* Consistent light gray for all text */
        }
        
        body:not(.light-mode) #projectModal .bg-black\/70 .text-white {
            color: #e5e7eb !important; /* Light gray for button text */
        }
        
        /* Dark mode specific styles - NO WHITE COLORS */
        body:not(.light-mode) #projectModal {
            background: rgba(0, 0, 0, 0.8) !important;
        }
        
        body:not(.light-mode) #projectModal .bg-gray-900 {
            background: #111827 !important;
        }
        
        /* Fix gray colors in project modal for dark mode */
        body:not(.light-mode) #projectModal .bg-gray-900\/95 {
            background: rgba(17, 24, 39, 0.95) !important;
        }
        
        body:not(.light-mode) #projectModal .border-gray-700 {
            border-color: #374151 !important;
        }
        
        body:not(.light-mode) #projectModal .text-gray-400 {
            color: #9ca3af !important;
        }
        
        body:not(.light-mode) #projectModal .hover\:text-red-500:hover {
            color: #ef4444 !important;
        }
        
        body:not(.light-mode) #projectModal .hover\:bg-gray-700:hover {
            background-color: #374151 !important;
        }
        
        body:not(.light-mode) #projectModal .bg-gradient-to-r.from-gray-700.to-gray-800 {
            background: linear-gradient(to right, #374151, #1f2937) !important;
        }
        
        body:not(.light-mode) #projectModal .hover\:from-gray-600.hover\:to-gray-700:hover {
            background: linear-gradient(to right, #4b5563, #374151) !important;
        }
        
        body:not(.light-mode) #projectModal .bg-black\/70 {
            background: rgba(0, 0, 0, 0.7) !important;
        }
        
        body:not(.light-mode) #projectModal .bg-blue-500\/5 {
            background: rgba(59, 130, 246, 0.05) !important;
        }
        
        body:not(.light-mode) #projectModal .to-cyan-600\/5 {
             background: linear-gradient(to right, rgba(59, 130, 246, 0.05), rgba(8, 145, 178, 0.05)) !important;
         }
         
         /* Additional fixes for selected elements in dark mode */
         body:not(.light-mode) #projectModal .sticky.top-0 {
             background: rgba(17, 24, 39, 0.95) !important;
             backdrop-filter: blur(8px) !important;
         }
         
         body:not(.light-mode) #projectModal .bg-gradient-to-r.from-gray-700 {
             background: linear-gradient(to right, #1f2937, #111827) !important;
         }
         
         body:not(.light-mode) #projectModal .absolute.top-4.right-4 {
             background: transparent !important;
         }
         
         body:not(.light-mode) #projectModal .absolute.inset-0.bg-gradient-to-r {
             background: linear-gradient(to right, rgba(139, 92, 246, 0.05), rgba(6, 182, 212, 0.05)) !important;
         }
         
         body:not(.light-mode) #projectModal .absolute.top-4.left-4 {
             background: rgba(0, 0, 0, 0.8) !important;
             color: #e5e7eb !important;
         }
         
         /* Force all gray backgrounds to dark theme colors */
         body:not(.light-mode) #projectModal [class*="bg-gray"] {
             background: #1f2937 !important;
         }
         
         body:not(.light-mode) #projectModal [class*="text-gray"] {
             color: #e5e7eb !important;
         }
         
         body:not(.light-mode) #projectModal [class*="border-gray"] {
             border-color: #374151 !important;
         }
        
        /* Remove any remaining white colors */
        body:not(.light-mode) #projectModal * {
            color: #e5e7eb !important; /* Force all text to light gray */
        }
        
        body:not(.light-mode) #projectModal .text-transparent {
            color: transparent !important; /* Keep gradient text transparent */
        }
        
        body:not(.light-mode) #projectModal .bg-clip-text {
            -webkit-text-fill-color: transparent !important;
        }
        
        /* Technology tags styling */
        #modalProjectTechnologies {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 0.75rem !important;
            justify-content: flex-start !important;
        }
        
        #modalProjectTechnologies span {
            display: inline-block !important;
            margin-bottom: 0.5rem !important;
        }
        
        /* Dark mode technology tags */
        body:not(.light-mode) #modalProjectTechnologies span {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(124, 58, 237, 0.2)) !important;
            border: 1px solid rgba(139, 92, 246, 0.4) !important;
            color: #a78bfa !important;
        }
        
        body:not(.light-mode) #modalProjectTechnologies span:hover {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(124, 58, 237, 0.3)) !important;
            border-color: rgba(139, 92, 246, 0.6) !important;
            color: #c4b5fd !important;
        }
        
        /* Light mode technology tags */
        body.light-mode #modalProjectTechnologies span {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.1)) !important;
            border: 1px solid rgba(139, 92, 246, 0.3) !important;
            color: #7c3aed !important;
        }
        
        body.light-mode #modalProjectTechnologies span:hover {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(124, 58, 237, 0.2)) !important;
            border-color: rgba(139, 92, 246, 0.5) !important;
            color: #6d28d9 !important;
        }
        
        /* Ensure buttons work in both modes */
        #projectModal button {
            transition: all 0.3s ease !important;
        }
        
        #projectModal button:hover {
            transform: scale(1.1) !important;
        }
        
        body.light-mode .modal .bg-gray-700 {
            background: #ffffff !important;
            border: 1px solid rgba(0, 0, 0, 0.08);
        }
        
        body.light-mode .modal .text-gray-300 {
            color: #000000 !important;
        }
        
        body.light-mode .modal .text-gray-400 {
            color: #000000 !important;
        }
        
        body.light-mode .modal .text-white {
            color: #000000 !important;
        }
        
        /* Light Mode Forms */
        body.light-mode input,
        body.light-mode textarea,
        body.light-mode select {
            background: #ffffff !important;
            color: #000000 !important;
            border-color: rgba(0, 0, 0, 0.15) !important;
        }
        
        body.light-mode input:focus,
         body.light-mode textarea:focus,
         body.light-mode select:focus {
             border-color: #8b5cf6 !important;
             box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
         }
         
         /* Light Mode Additional Components */
         body.light-mode .skill-bar {
             background: #e2e8f0 !important;
         }
         
         body.light-mode .skill-bar .bg-primary {
             background: linear-gradient(90deg, #8b5cf6, #7c3aed) !important;
         }
         
         body.light-mode .skill-bar .bg-secondary {
             background: linear-gradient(90deg, #06b6d4, #0891b2) !important;
         }
         
         /* Light Mode Timeline */
         body.light-mode .timeline-item {
             background: #ffffff !important;
             border: 1px solid rgba(0, 0, 0, 0.08);
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
         }
         
         body.light-mode .timeline-item:hover {
             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
         }
         
         /* Light Mode Project Cards */
         body.light-mode .project-card {
             background: #ffffff !important;
             border: 1px solid rgba(0, 0, 0, 0.08);
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
         }
         
         body.light-mode .project-card:hover {
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
         }
         
         /* Light Mode Certificate Cards */
         body.light-mode .certificate-card {
             background: #ffffff !important;
             border: 1px solid rgba(0, 0, 0, 0.08);
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
         }
         
         body.light-mode .certificate-card:hover {
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
         }
         
         /* Light Mode Contact Cards */
         body.light-mode .contact-card {
             background: #ffffff !important;
             border: 1px solid rgba(0, 0, 0, 0.08);
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
         }
         
         body.light-mode .contact-card:hover {
             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
         }
         
         /* Light Mode Statistics */
         body.light-mode .stat-card {
             background: #ffffff !important;
             border: 1px solid rgba(0, 0, 0, 0.08);
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
         }
         
         body.light-mode .stat-number {
             color: #7c3aed !important;
         }
         
         /* Light Mode Icons */
         body.light-mode .icon {
             color: #000000 !important;
         }
         
         body.light-mode .icon-primary {
             color: #7c3aed !important;
         }
         
         body.light-mode .icon-secondary {
             color: #0891b2 !important;
         }
         
         /* Light Mode Badges */
         body.light-mode .badge {
             background: #ffffff !important;
             color: #000000 !important;
             border: 1px solid rgba(0, 0, 0, 0.1);
         }
         
         body.light-mode .badge-primary {
             background: #8b5cf6 !important;
             color: #ffffff !important;
         }
         
         body.light-mode .badge-secondary {
             background: #06b6d4 !important;
             color: #ffffff !important;
         }
         
         /* Light Mode Dividers */
         body.light-mode .divider {
             border-color: rgba(0, 0, 0, 0.1) !important;
         }
         
         /* Light Mode Scrollbars */
         body.light-mode ::-webkit-scrollbar {
             background: #f8fafc;
         }
         
         body.light-mode ::-webkit-scrollbar-thumb {
             background: #cbd5e1;
         }
         
         body.light-mode ::-webkit-scrollbar-thumb:hover {
             background: #94a3b8;
         }
         
         /* Light Mode Back to Top Button */
         body.light-mode #backToTop {
             background: #ffffff !important;
             color: #000000 !important;
             border: 1px solid rgba(0, 0, 0, 0.1);
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
         }
         
         body.light-mode #backToTop:hover {
             background: #8b5cf6 !important;
             color: #ffffff !important;
         }
         
         /* Light Mode Footer */
         body.light-mode footer {
             background: #ffffff !important;
             border-top: 1px solid rgba(0, 0, 0, 0.1);
         }
         
         body.light-mode footer .text-gray-400 {
             color: #000000 !important;
         }
         
         body.light-mode footer .bg-gray-800 {
             background: #ffffff !important;
             border: 1px solid rgba(0, 0, 0, 0.1);
         }
         
         body.light-mode footer .border-gray-700 {
              border-color: rgba(0, 0, 0, 0.1) !important;
          }
          
          /* Light Mode About Section */
          body.light-mode #about {
              background: linear-gradient(135deg, #ffffff 0%, #f8fafc 30%, #f1f5f9 70%, #e2e8f0 100%) !important;
          }
          
          body.light-mode #about .text-gray-400 {
              color: #000000 !important;
          }
          
          body.light-mode #about .bg-gradient-to-br.from-gray-800 {
              background: linear-gradient(to bottom right, #ffffff, #f8fafc, #ffffff) !important;
              border: 1px solid rgba(0, 0, 0, 0.08);
          }
          
          body.light-mode #about .border-gray-700 {
              border-color: rgba(0, 0, 0, 0.1) !important;
          }
          
          body.light-mode #about .text-gray-300 {
               color: #000000 !important;
           }
           
           body.light-mode #about .bg-gray-700 {
               background: #ffffff !important;
               border: 1px solid rgba(0, 0, 0, 0.08);
           }
           
           body.light-mode #about .text-white {
               color: #000000 !important;
           }
           
           body.light-mode #about .hover\:bg-gray-600 {
               background: #f8fafc !important;
           }
           
           /* Light Mode Certificates Section */
           body.light-mode #certificates {
               background: linear-gradient(135deg, #f8fafc, #ffffff) !important;
           }
           
           body.light-mode .certificate-card {
               background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
               border: 1px solid rgba(0, 0, 0, 0.08);
               box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
           }
           
           body.light-mode .certificate-card .text-white {
               color: #0f172a !important;
           }
           
           body.light-mode .certificate-card .text-gray-400 {
               color: #374151 !important;
           }
           
           body.light-mode .certificate-card .text-gray-300 {
               color: #4b5563 !important;
           }
           
           body.light-mode .certificate-card .bg-gray-700 {
               background: #f3f4f6 !important;
               color: #0f172a !important;
               border: 1px solid rgba(0, 0, 0, 0.1);
           }
           
           body.light-mode .certificate-card .bg-gray-800 {
               background: #f8fafc !important;
           }
           
           body.light-mode .certificate-card .bg-gray-900 {
               background: #ffffff !important;
           }
           
           body.light-mode .certificate-filter-btn {
               background: #f3f4f6 !important;
               color: #374151 !important;
               border: 1px solid rgba(0, 0, 0, 0.1);
           }
           
           body.light-mode .certificate-filter-btn:hover {
               background: #e5e7eb !important;
               color: #0f172a !important;
           }
           
           body.light-mode .certificate-filter-btn.active {
               background: #8b5cf6 !important;
               color: #ffffff !important;
           }
           
           body.light-mode #certificateExtraCategories {
               background: #f8fafc !important;
               border: 1px solid rgba(0, 0, 0, 0.1);
           }
           
           body.light-mode #loadMoreCertificatesBtn,
           body.light-mode #showLessCertificatesBtn {
               background: #f3f4f6 !important;
               color: #374151 !important;
               border: 1px solid rgba(0, 0, 0, 0.1);
           }
           
           body.light-mode #loadMoreCertificatesBtn:hover,
           body.light-mode #showLessCertificatesBtn:hover {
               background: #e5e7eb !important;
               color: #0f172a !important;
           }
           
           /* Light Mode Container Fixes - Remove All Gray Backgrounds */
           body.light-mode .bg-gradient-to-br.from-gray-900,
           body.light-mode .bg-gradient-to-br.from-gray-800 {
               background: linear-gradient(135deg, #ffffff, #f8fafc, #ffffff) !important;
           }
           
           body.light-mode .bg-gradient-to-br.via-gray-800,
           body.light-mode .bg-gradient-to-br.via-gray-900 {
               background: linear-gradient(135deg, #ffffff, #f8fafc, #ffffff) !important;
           }
           
           body.light-mode .bg-gradient-to-br.to-gray-800,
           body.light-mode .bg-gradient-to-br.to-gray-900 {
               background: linear-gradient(135deg, #ffffff, #f8fafc, #ffffff) !important;
           }
           
           body.light-mode section {
               background: #ffffff !important;
           }
           
           body.light-mode #home,
           body.light-mode #education,
           body.light-mode #skills,
           body.light-mode #projects,
           body.light-mode #experience,
           body.light-mode #contact {
               background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
           }
           
           /* Fix specific gray containers */
           body.light-mode .bg-gradient-to-br.from-gray-800\/80.via-gray-900\/80.to-gray-800\/80 {
               background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #ffffff 100%) !important;
           }
           
           body.light-mode .border-gray-700\/50 {
               border-color: rgba(0, 0, 0, 0.1) !important;
           }
           
           body.light-mode .hover\:border-primary\/50:hover {
               border-color: rgba(139, 92, 246, 0.3) !important;
           }
           
           body.light-mode .hover\:border-secondary\/50:hover {
               border-color: rgba(6, 182, 212, 0.3) !important;
           }
           
           /* Fix all gray background containers */
           body.light-mode [class*="bg-gray-"] {
               background: #ffffff !important;
               color: #0f172a !important;
           }
           
           body.light-mode [class*="from-gray-"] {
               background: linear-gradient(135deg, #ffffff, #f8fafc, #ffffff) !important;
           }
           
           body.light-mode [class*="via-gray-"] {
               background: linear-gradient(135deg, #ffffff, #f8fafc, #ffffff) !important;
           }
           
           body.light-mode [class*="to-gray-"] {
               background: linear-gradient(135deg, #ffffff, #f8fafc, #ffffff) !important;
           }
           
           body.light-mode .bg-gray-800\/80,
           body.light-mode .bg-gray-900\/80,
           body.light-mode .bg-gray-800\/50,
           body.light-mode .bg-gray-900\/50,
           body.light-mode .bg-gray-800\/30,
           body.light-mode .bg-gray-900\/30 {
               background: #ffffff !important;
               border: 1px solid rgba(0, 0, 0, 0.08);
           }
           
           body.light-mode .bg-gray-700\/30,
           body.light-mode .bg-gray-700\/50 {
               background: #f8fafc !important;
               border: 1px solid rgba(0, 0, 0, 0.08);
           }
           
           body.light-mode .hover\:bg-gray-700\/50:hover,
           body.light-mode .hover\:bg-gray-600\/30:hover {
               background: #f1f5f9 !important;
           }
           
           body.light-mode .border-gray-700,
           body.light-mode .border-gray-600,
           body.light-mode .border-gray-800 {
               border-color: rgba(0, 0, 0, 0.1) !important;
           }
           
           body.light-mode .border-gray-700\/50,
           body.light-mode .border-gray-600\/50,
           body.light-mode .border-gray-600\/30 {
               border-color: rgba(0, 0, 0, 0.08) !important;
           }
           
           body.light-mode #about .hover\:bg-gray-600\/30:hover {
               background: #f1f5f9 !important;
           }
           
           /* 3D Photo Frame Animation */
           .profile-photo-container {
               perspective: 1000px;
           }
           
           .photo-frame {
               transform-style: preserve-3d;
               position: relative;
           }
           
           .photo-frame::before {
               content: '';
               position: absolute;
               top: -10px;
               left: -10px;
               right: -10px;
               bottom: -10px;
               background: linear-gradient(45deg, #8b5cf6, #06b6d4, #10b981, #f59e0b);
               background-size: 400% 400%;
               border-radius: 2rem;
               z-index: -1;
               opacity: 0;
               transition: all 0.7s ease;
               animation: gradientShift 3s ease-in-out infinite;
           }
           
           .photo-frame:hover::before {
               opacity: 0.7;
               filter: blur(20px);
           }
           
           .photo-frame:hover {
               transform: rotateY(5deg) rotateX(5deg) translateZ(20px);
               box-shadow: 
                   0 25px 50px rgba(139, 92, 246, 0.3),
                   0 0 0 1px rgba(255, 255, 255, 0.1),
                   inset 0 1px 0 rgba(255, 255, 255, 0.2);
           }
           
           .photo-inner:hover {
               transform: translateZ(10px);
           }
           
           @keyframes gradientShift {
               0%, 100% {
                   background-position: 0% 50%;
               }
               50% {
                   background-position: 100% 50%;
               }
           }
           
           /* Floating animation for the photo container */
           .profile-photo-container {
               animation: float 6s ease-in-out infinite;
           }
           
           @keyframes float {
               0%, 100% {
                   transform: translateY(0px);
               }
               50% {
                   transform: translateY(-10px);
               }
           }
           
           /* Pulse glow effect */
           .photo-frame {
               position: relative;
           }
           
           .photo-frame::after {
               content: '';
               position: absolute;
               top: 50%;
               left: 50%;
               width: 100%;
               height: 100%;
               background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
               border-radius: 50%;
               transform: translate(-50%, -50%);
               opacity: 0;
               transition: all 0.7s ease;
               z-index: -1;
           }
           
           .photo-frame:hover::after {
               opacity: 1;
               width: 120%;
               height: 120%;
               animation: pulse 2s ease-in-out infinite;
           }
           
           @keyframes pulse {
               0%, 100% {
                   transform: translate(-50%, -50%) scale(1);
                   opacity: 0.3;
               }
               50% {
                   transform: translate(-50%, -50%) scale(1.1);
                   opacity: 0.1;
               }
           }
        
        /* Mobile Header Styles */
        @media (max-width: 768px) {
            .header-nav {
                padding: 8px 0;
            }
            
            .header-nav .container {
                padding: 8px 16px;
            }
            
            .header-nav .text-2xl {
                font-size: 1.25rem;
            }
            
            .nav-item {
                padding: 8px 14px;
                margin: 3px 0;
                font-size: 13px;
            }
            
            .mobile-menu {
                background: rgba(17, 24, 39, 0.98);
                backdrop-filter: blur(20px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 16px;
                margin: 6px;
                padding: 12px;
                top: 60px;
            }
            
            body.light-mode .mobile-menu {
                background: rgba(255, 255, 255, 0.98);
                border-color: rgba(0, 0, 0, 0.1);
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
            }
            
            .hamburger {
                padding: 6px;
                border-radius: 8px;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                width: 40px;
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            
            .hamburger span {
                display: block;
                width: 20px;
                height: 2px;
                background: currentColor;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                transform-origin: center;
            }
            
            .hamburger span:nth-child(1) {
                transform: translateY(-4px);
            }
            
            .hamburger span:nth-child(3) {
                transform: translateY(4px);
            }
            
            .hamburger.active span:nth-child(1) {
                transform: rotate(45deg) translateY(0);
            }
            
            .hamburger.active span:nth-child(2) {
                opacity: 0;
                transform: scaleX(0);
            }
            
            .hamburger.active span:nth-child(3) {
                transform: rotate(-45deg) translateY(0);
            }
            
            .hamburger:hover {
                background: rgba(139, 92, 246, 0.2);
                border-color: rgba(139, 92, 246, 0.4);
                transform: scale(1.05);
            }
            
            body.light-mode .hamburger {
                background: rgba(0, 0, 0, 0.08);
                border-color: rgba(0, 0, 0, 0.15);
                color: #0f172a !important;
            }
            
            body.light-mode .hamburger:hover {
                background: rgba(139, 92, 246, 0.15);
                border-color: rgba(139, 92, 246, 0.3);
                color: #7c3aed !important;
            }
            
            body.light-mode .hamburger span {
                background: #0f172a !important;
            }
            
            body.light-mode .hamburger:hover span {
                background: #7c3aed !important;
            }
            
            /* Certificate Filter Responsiveness */
            .certificate-filter-container {
                flex-direction: column;
                gap: 12px;
            }
            
            .certificate-filter-buttons {
                flex-wrap: wrap;
                gap: 8px;
                justify-content: center;
            }
            
            .certificate-filter-btn {
                font-size: 12px !important;
                padding: 8px 12px !important;
                min-width: auto;
                flex-shrink: 0;
            }
            
            /* Certificate Grid Responsiveness */
            #certificatesGrid {
                grid-template-columns: 1fr !important;
                gap: 16px !important;
            }
            
            .certificate-card {
                padding: 16px !important;
                margin: 0 8px;
            }
            
            .certificate-card .w-full.h-48 {
                height: 200px !important;
            }
            
            .certificate-card h3 {
                font-size: 16px !important;
            }
            
            .certificate-card p {
                font-size: 14px !important;
            }
            
            /* Certificate Category Toggle */
            #certificateCategoryToggle {
                font-size: 12px !important;
                padding: 8px 16px !important;
            }
        }
        
        /* Tablet Responsiveness */
        @media (min-width: 769px) and (max-width: 1024px) {
            /* Certificate Grid for Tablet */
            #certificatesGrid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 20px !important;
            }
            
            .certificate-filter-btn {
                font-size: 13px;
                padding: 10px 16px;
            }
            
            .certificate-card {
                padding: 20px;
            }
            
            .certificate-card .w-full.h-48 {
                height: 180px;
            }
        }
        
        /* Mobile Responsiveness for Modals */
        @media (max-width: 767px) {
            .modal-content-mobile-full {
                max-width: 100%;
                width: 100%;
                margin: 0;
                border-radius: 0;
                height: 100vh; /* Full viewport height on mobile */
                overflow-y: auto;
            }
        }
        
        /* Dark Mode Support */
        {% if website_settings.dark_mode_enabled %}
        .dark-mode {
            background-color: #0f172a;
            color: #f8fafc;
        }
        
        .dark-mode .bg-gray-900 {
            background-color: #020617 !important;
        }
        
        .dark-mode .bg-gray-800 {
            background-color: #0f172a !important;
        }
        
        .dark-mode .text-gray-400 {
            color: #94a3b8 !important;
        }
        {% endif %}
        
        /* Custom Colors from Settings */
        :root {
            --primary-color: {{ website_settings.primary_color|default:'#8B5CF6' }};
            --secondary-color: {{ website_settings.secondary_color|default:'#06B6D4' }};
            --accent-color: {{ website_settings.accent_color|default:'#F59E0B' }};
        }
        
        .text-primary {
            color: var(--primary-color) !important;
        }
        
        .bg-primary {
            background-color: var(--primary-color) !important;
        }
        
        .text-secondary {
            color: var(--secondary-color) !important;
        }
        
        .bg-secondary {
            background-color: var(--secondary-color) !important;
        }
        
        .text-accent {
            color: var(--accent-color) !important;
        }
        
        .bg-accent {
            background-color: var(--accent-color) !important;
        }