* {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         }
         :root {
         /* Light theme */
         --bg-primary: #ffffff;
         --bg-secondary: #f8fafc;
         --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         --text-primary: #1a202c;
         --text-secondary: #4a5568;
         --glass-bg: rgba(255, 255, 255, 0.25);
         --glass-border: rgba(255, 255, 255, 0.3);
         --shadow-light: 0 8px 32px rgba(31, 38, 135, 0.15);
         --shadow-hover: 0 15px 35px rgba(31, 38, 135, 0.25);
         --card-bg: rgba(255, 255, 255, 0.8);
         --nav-bg: rgba(255, 255, 255, 0.9);
         --particle-color: rgba(102, 126, 234, 0.4);
         --skill-border: rgba(102, 126, 234, 0.2);
         }
         [data-theme="dark"] {
         /* Dark theme */
         --bg-primary: #0f172a;
         --bg-secondary: #1e293b;
         --bg-gradient: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
         --text-primary: #f1f5f9;
         --text-secondary: #cbd5e1;
         --glass-bg: rgba(255, 255, 255, 0.1);
         --glass-border: rgba(255, 255, 255, 0.2);
         --shadow-light: 0 8px 32px rgba(31, 38, 135, 0.37);
         --shadow-hover: 0 15px 35px rgba(31, 38, 135, 0.5);
         --card-bg: rgba(255, 255, 255, 0.1);
         --nav-bg: rgba(15, 23, 42, 0.9);
         --particle-color: rgba(124, 58, 237, 0.6);
         --skill-border: rgba(124, 58, 237, 0.3);
         }
         body {
         font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
         background: var(--bg-primary);
         color: var(--text-primary);
         line-height: 1.6;
         overflow-x: hidden;
         transition: all 0.3s ease;
         }
         /* Theme Toggle with Dynamic Animation */
         .theme-toggle {
         position: fixed;
         bottom: 20px;
         right: 20px;
         z-index: 1001;
         width: 60px;
         height: 30px;
         background: var(--glass-bg);
         backdrop-filter: blur(20px);
         border: 1px solid var(--glass-border);
         border-radius: 50px;
         cursor: pointer;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         padding: 3px;
         box-shadow: var(--shadow-light);
         animation: themeTogglePulse 3s ease-in-out infinite;
         }
         @keyframes themeTogglePulse {
         0%, 100% { 
         transform: scale(1); 
         box-shadow: var(--shadow-light); 
         }
         50% { 
         transform: scale(1.05); 
         box-shadow: var(--shadow-hover), 0 0 20px rgba(102, 126, 234, 0.5); 
         }
         }
         .theme-toggle:hover {
         animation-play-state: paused;
         transform: scale(1.1);
         box-shadow: var(--shadow-hover), 0 0 25px rgba(102, 126, 234, 0.6);
         }
         .theme-toggle__indicator {
         width: 24px;
         height: 24px;
         background: var(--bg-gradient);
         border-radius: 50%;
         transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 12px;
         transform: rotate(0deg);
         }
         [data-theme="dark"] .theme-toggle__indicator {
         transform: translateX(30px) rotate(180deg);
         }
         /* Enhanced Particles */
         .particles {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         pointer-events: none;
         z-index: -1;
         }
         .particle {
         position: absolute;
         background: var(--particle-color);
         border-radius: 50%;
         animation: floatParticle 8s ease-in-out infinite;
         }
         .particle-small {
         width: 3px;
         height: 3px;
         }
         .particle-medium {
         width: 5px;
         height: 5px;
         }
         .particle-large {
         width: 8px;
         height: 8px;
         }
         @keyframes floatParticle {
         0%, 100% { 
         transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); 
         opacity: 0.3; 
         }
         25% { 
         transform: translateY(-30px) translateX(10px) rotate(90deg) scale(1.1); 
         opacity: 0.7; 
         }
         50% { 
         transform: translateY(-15px) translateX(-10px) rotate(180deg) scale(0.9); 
         opacity: 1; 
         }
         75% { 
         transform: translateY(-25px) translateX(15px) rotate(270deg) scale(1.05); 
         opacity: 0.6; 
         }
         }
         /* Modern Navigation */
         .nav {
         position: fixed;
         top: 20px;
         left: 50%;
         transform: translateX(-50%);
         z-index: 1000;
         background: var(--nav-bg);
         backdrop-filter: blur(20px);
         border: 1px solid var(--glass-border);
         border-radius: 50px;
         padding: 10px 30px;
         transition: all 0.3s ease;
         box-shadow: var(--shadow-light);
         }
         .nav:hover {
         background: var(--glass-bg);
         box-shadow: var(--shadow-hover);
         }
         .nav__toggle {
         display: none;
         background: none;
         border: none;
         color: var(--text-primary);
         font-size: 24px;
         cursor: pointer;
         padding: 8px;
         transition: all 0.3s ease;
         }
         .nav__toggle:hover {
         color: #667eea;
         transform: scale(1.1);
         }
         .nav__list {
         display: flex;
         list-style: none;
         gap: 15px;
         align-items: center;
         flex-wrap: nowrap;
         justify-content: center;
         }
         .nav__link {
         color: var(--text-primary);
         text-decoration: none;
         font-weight: 500;
         font-size: 14px;
         padding: 8px 16px;
         border-radius: 25px;
         transition: all 0.3s ease;
         position: relative;
         white-space: nowrap;
         }
         .nav__link:hover, .nav__link.active {
         background: var(--bg-gradient);
         color: white;
         transform: translateY(-2px);
         box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
         }
         /* Hero Section */
         .hero {
         min-height: 100vh;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0 5%;
         max-width: 1200px;
         margin: 0 auto;
         }
         .hero__content {
         flex: 1;
         max-width: 600px;
         animation: fadeInUp 1s ease-out;
         }
         .hero__greeting {
         font-size: 1.2rem;
         color: var(--text-secondary);
         margin-bottom: 10px;
         opacity: 0;
         animation: fadeInUp 0.8s ease-out 0.2s forwards;
         }
         .hero__title {
         font-size: clamp(2.5rem, 8vw, 5rem);
         font-weight: 800;
         margin-bottom: 20px;
         background: var(--bg-gradient);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
         opacity: 0;
         animation: fadeInUp 0.8s ease-out 0.4s forwards;
         white-space: nowrap;
         }
         .hero__subtitle {
         font-size: clamp(1.2rem, 3vw, 1.8rem);
         color: var(--text-secondary);
         margin-bottom: 30px;
         opacity: 0;
         animation: fadeInUp 0.8s ease-out 0.6s forwards;
         }
         .hero__cta {
         display: flex;
         gap: 20px;
         flex-wrap: wrap;
         opacity: 0;
         animation: fadeInUp 0.8s ease-out 0.8s forwards;
         }
         .hero__image {
         flex: 0 0 400px;
         display: flex;
         justify-content: center;
         align-items: center;
         opacity: 0;
         animation: fadeInUp 0.8s ease-out 1s forwards;
         }
         .hero__blob {
         width: 100%;
         height: auto;
         max-width: 400px;
         }
         .hero__blob-img {
         width: 300px;
         height: 300px;
         object-fit: cover;
         border-radius: 50%;
         }
         .btn {
         padding: 15px 30px;
         border: none;
         border-radius: 50px;
         font-weight: 600;
         text-decoration: none;
         display: inline-flex;
         align-items: center;
         gap: 10px;
         transition: all 0.3s ease;
         cursor: pointer;
         font-size: 16px;
         }
         .btn--primary {
         background: var(--bg-gradient);
         color: white;
         }
         .btn--secondary {
         background: var(--card-bg);
         backdrop-filter: blur(20px);
         border: 1px solid var(--glass-border);
         color: var(--text-primary);
         }
         .btn:hover {
         transform: translateY(-3px);
         box-shadow: var(--shadow-hover);
         }
         /* Social Links */
         .social-links {
         position: fixed;
         left: 30px;
         top: 50%;
         transform: translateY(-50%);
         display: flex;
         flex-direction: column;
         gap: 20px;
         z-index: 100;
         }
         .social-link {
         width: 50px;
         height: 50px;
         background: var(--card-bg);
         backdrop-filter: blur(20px);
         border: 1px solid var(--glass-border);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--text-primary);
         text-decoration: none;
         transition: all 0.3s ease;
         box-shadow: var(--shadow-light);
         }
         .social-link:hover {
         background: var(--bg-gradient);
         color: white;
         transform: translateX(10px);
         box-shadow: var(--shadow-hover);
         }
         /* Sections */
         .section {
         padding: 100px 20px;
         max-width: 1200px;
         margin: 0 auto;
         }
         .section__title {
         font-size: clamp(2.5rem, 5vw, 4rem);
         text-align: center;
         margin-bottom: 60px;
         background: var(--bg-gradient);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
         }
         /* Glass Cards */
         .card {
         background: var(--card-bg);
         backdrop-filter: blur(20px);
         border: 1px solid var(--glass-border);
         border-radius: 20px;
         padding: 30px;
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
         box-shadow: var(--shadow-light);
         }
         .card::before {
         content: '';
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
         transition: left 0.5s;
         }
         .card:hover::before {
         left: 100%;
         }
         .card:hover {
         transform: translateY(-10px);
         box-shadow: var(--shadow-hover);
         border-color: var(--glass-border);
         }
         /* Grid Layouts */
         .grid {
         display: grid;
         gap: 30px;
         }
         .grid--2 {
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         }
         .grid--3 {
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         }
         .grid--4 {
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         }
         /* Education Section */
         .education__item {
         border-left: 3px solid transparent;
         background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
         var(--bg-gradient) border-box;
         margin-bottom: 30px;
         padding: 25px;
         border-radius: 15px;
         position: relative;
         }
         .education__degree {
         font-size: 1.3rem;
         margin-bottom: 8px;
         color: var(--text-primary);
         font-weight: 600;
         }
         .education__institution {
         color: #667eea;
         font-weight: 600;
         margin-bottom: 5px;
         font-size: 1.1rem;
         }
         .education__duration {
         color: var(--text-secondary);
         font-size: 0.9rem;
         margin-bottom: 10px;
         }
         .education__grade {
         color: var(--text-secondary);
         font-size: 0.95rem;
         }
         /* Gallery Section */
         .gallery__grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 25px;
         margin-top: 40px;
         }
         .gallery__item {
         position: relative;
         overflow: hidden;
         border-radius: 20px;
         aspect-ratio: 1;
         cursor: pointer;
         transition: all 0.3s ease;
         }
         .gallery__item:hover {
         transform: scale(1.05);
         }
         .gallery__img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: all 0.3s ease;
         }
         .gallery__overlay {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: rgba(102, 126, 234, 0.8);
         display: flex;
         align-items: center;
         justify-content: center;
         opacity: 0;
         transition: all 0.3s ease;
         }
         .gallery__item:hover .gallery__overlay {
         opacity: 1;
         }
         .gallery__overlay i {
         font-size: 2rem;
         color: white;
         }
         /* Modal for gallery */
         .modal {
         display: none;
         position: fixed;
         z-index: 10000;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.9);
         backdrop-filter: blur(10px);
         }
         .modal__content {
         position: relative;
         margin: 5% auto;
         max-width: 90%;
         max-height: 80%;
         }
         .modal__img {
         width: 100%;
         height: auto;
         border-radius: 10px;
         }
         .modal__close {
         position: absolute;
         top: -40px;
         right: 0;
         color: white;
         font-size: 40px;
         cursor: pointer;
         transition: all 0.3s ease;
         }
         .modal__close:hover {
         color: #667eea;
         }
         /* Experience, Projects, Skills */
         .experience__item {
         border-left: 3px solid transparent;
         background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
         var(--bg-gradient) border-box;
         margin-bottom: 30px;
         padding: 25px;
         border-radius: 15px;
         }
         .experience__title {
         font-size: 1.5rem;
         margin-bottom: 10px;
         color: var(--text-primary);
         }
         .experience__company {
         color: #667eea;
         font-weight: 600;
         margin-bottom: 5px;
         }
         .experience__duration {
         color: var(--text-secondary);
         font-size: 0.9rem;
         margin-bottom: 15px;
         }
         .experience__description {
         color: var(--text-secondary);
         line-height: 1.6;
         }
         .skills__category {
         margin-bottom: 40px;
         }
         .skills__category-title {
         font-size: 1.3rem;
         margin-bottom: 20px;
         color: var(--text-primary);
         }
         .skills__badges {
         display: flex;
         flex-wrap: wrap;
         gap: 12px;
         }
         .badge {
         background: var(--card-bg);
         backdrop-filter: blur(20px);
         border: 2px solid var(--skill-border);
         color: var(--text-primary);
         padding: 10px 18px;
         border-radius: 25px;
         font-size: 14px;
         font-weight: 500;
         transition: all 0.3s ease;
         box-shadow: var(--shadow-light);
         }
         .badge:hover {
         background: var(--bg-gradient);
         color: white;
         transform: translateY(-2px);
         box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
         border-color: transparent;
         }
         .projects__item {
         position: relative;
         overflow: hidden;
         }
         .projects__title {
         font-size: 1.3rem;
         margin-bottom: 15px;
         color: var(--text-primary);
         }
         .projects__description {
         color: var(--text-secondary);
         margin-bottom: 20px;
         line-height: 1.6;
         }
         .projects__tech {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
         }
         /* Contact Form */
         .contact__form {
         max-width: 600px;
         margin: 0 auto;
         }
         .form__group {
         margin-bottom: 25px;
         }
         .form__label {
         display: block;
         margin-bottom: 8px;
         color: var(--text-primary);
         font-weight: 500;
         }
         .form__input {
         width: 100%;
         padding: 15px 20px;
         background: var(--card-bg);
         backdrop-filter: blur(20px);
         border: 1px solid var(--glass-border);
         border-radius: 10px;
         color: var(--text-primary);
         font-size: 16px;
         transition: all 0.3s ease;
         }
         .form__input:focus {
         outline: none;
         border-color: #667eea;
         box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
         }
         .form__input::placeholder {
         color: var(--text-secondary);
         }
         /* Animations */
         @keyframes fadeInUp {
         from {
         opacity: 0;
         transform: translateY(30px);
         }
         to {
         opacity: 1;
         transform: translateY(0);
         }
         }
         .fade-in {
         opacity: 0;
         transform: translateY(30px);
         transition: all 0.8s ease;
         }
         .fade-in.visible {
         opacity: 1;
         transform: translateY(0);
         }
         /* Mobile Responsive */
         @media (max-width: 768px) {
            
         .theme-toggle {
         bottom: 20px;
         right: 20px;
         }
         .nav {
         padding: 8px;
         top: 15px;
         right: 15px;
         left: auto;
         transform: none;
         border-radius: 50px;
         width: auto;
         min-width: 50px;
         }
         .nav__toggle {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 44px;
         height: 44px;
         border-radius: 50%;
         }
         .nav__list {
         display: none;
         position: absolute;
         top: 60px;
         right: 0;
         background: var(--nav-bg);
         backdrop-filter: blur(20px);
         border: 1px solid var(--glass-border);
         border-radius: 20px;
         padding: 20px;
         gap: 15px;
         flex-direction: column;
         box-shadow: var(--shadow-hover);
         opacity: 0;
         transform: translateY(-10px);
         transition: all 0.3s ease;
         min-width: 200px;
         }
         .nav__list.show {
         display: flex;
         opacity: 1;
         transform: translateY(0);
         }
         .nav__link {
         font-size: 16px;
         padding: 12px 20px;
         width: 100%;
         text-align: center;
         border-radius: 12px;
         }
         .social-links {
         position: absolute;
         left: 15px;
         top: 15px;
         flex-direction: column;
         gap: 12px;
         transform: none;
         }
         .social-link {
         width: 44px;
         height: 44px;
         font-size: 18px;
         }
         .hero {
         flex-direction: column;
         text-align: center;
         padding: 100px 20px 40px;
         gap: 30px;
         position: relative;
         }
         .hero__image {
         flex: none;
         order: -1;
         margin-top: 60px;
         margin-right: 60px;
         display: flex;
         justify-content: center;
         align-items: center;
         transform: translateY(-30px);
         }
         .hero__blob {
         max-width: 200px;
         margin: 0 auto;
         }
         .hero__blob-img {
         width: 160px;
         height: 160px;
         }
         .hero__content {
         max-width: 100%;
         }
         .hero__title {
         white-space: normal;
         word-break: keep-all;
         hyphens: none;
         font-size: clamp(2rem, 12vw, 3rem);
         line-height: 1.1;
         }
         .hero__cta {
         justify-content: center;
         flex-direction: column;
         align-items: center;
         }
         .btn {
         min-width: 200px;
         justify-content: center;
         }
         .section {
         padding: 80px 20px;
         }
         .grid--2, .grid--3, .grid--4 {
         grid-template-columns: 1fr;
         }
         .gallery__grid {
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         }
         }
         @media (max-width: 480px) {
         .nav {
         padding: 6px;
         top: 10px;
         right: 10px;
         }
         .nav__toggle {
         width: 40px;
         height: 40px;
         font-size: 20px;
         }
         .nav__list {
         top: 50px;
         padding: 16px;
         gap: 12px;
         min-width: 180px;
         }
         .nav__link {
         font-size: 14px;
         padding: 10px 16px;
         }
         .social-links {
         gap: 10px;
         left: 10px;
         top: 10px;
         }
         .social-link {
         width: 40px;
         height: 40px;
         font-size: 16px;
         }
         .hero {
         padding-top: 80px;
         }
         .hero__image {
         margin-top: 40px;
         margin-right: 50px;
         transform: translateY(-40px);
         }
         .hero__blob {
         max-width: 160px;
         }
         .hero__blob-img {
         width: 130px;
         height: 130px;
         }
         .hero__title {
         font-size: clamp(1.8rem, 10vw, 2.5rem);
         }
         }
         /* Preloader */
         .preloader {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: var(--bg-primary);
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 10000;
         transition: opacity 0.5s ease;
         }
         .preloader.fade-out {
         opacity: 0;
         pointer-events: none;
         }
         .loader {
         width: 50px;
         height: 50px;
         border: 3px solid var(--glass-border);
         border-top: 3px solid #667eea;
         border-radius: 50%;
         animation: spin 1s linear infinite;
         }
         @keyframes spin {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
         }
         /* Loading optimization */
         img {
         loading: lazy;
         }
         /* SEO improvements */
         h1, h2, h3 {
         font-weight: 600;
         }
         /* Alert Box Styles */
         .alert {
         position: fixed;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         background: white;
         padding: 1.5rem 2rem;
         border-radius: 16px;
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
         z-index: 1001;
         display: none;
         align-items: center;
         justify-content: space-between;
         min-width: 320px;
         max-width: 500px;
         border-left: 5px solid #10b981;
         font-family: inherit;
         }
         .alert.success {
         border-left-color: #10b981;
         background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
         }
         .alert.error {
         border-left-color: #ef4444;
         background: linear-gradient(135deg, #fef2f2 0%, #fef2f2 100%);
         }
         .alert span {
         font-weight: 500;
         color: #374151;
         font-size: 0.95rem;
         flex: 1;
         }
         .alert.success span {
         color: #065f46;
         }
         .alert.error span {
         color: #991b1b;
         }
         .alert button {
         background: rgba(107, 114, 128, 0.1);
         border: 1px solid rgba(107, 114, 128, 0.2);
         padding: 0.5rem 1rem;
         border-radius: 8px;
         cursor: pointer;
         margin-left: 1rem;
         color: #374151;
         font-weight: 500;
         transition: all 0.2s ease;
         }
         .alert button:hover {
         background: rgba(107, 114, 128, 0.2);
         }
         /* Overlay Styles */
         .overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.4);
         z-index: 1000;
         display: none;
         backdrop-filter: blur(2px);
         }
         /* Spinner Styles */
         .spinner-border {
         position: fixed;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 3rem;
         height: 3rem;
         border: 0.3rem solid rgba(255, 255, 255, 0.3);
         border-top: 0.3rem solid #667eea;
         border-radius: 50%;
         animation: spin 1s linear infinite;
         z-index: 1002;
         display: none;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         }
         @keyframes spin {
         0% { transform: translate(-50%, -50%) rotate(0deg); }
         100% { transform: translate(-50%, -50%) rotate(360deg); }
         }
         /* Alert animations */
         .alert {
         animation: slideIn 0.3s ease-out;
         }
         @keyframes slideIn {
         from {
         opacity: 0;
         transform: translate(-50%, -50%) scale(0.9);
         }
         to {
         opacity: 1;
         transform: translate(-50%, -50%) scale(1);
         }
         }