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

     :root {
         --primary-color: #667eea;
         --secondary-color: #764ba2;
         --accent-color: #f093fb;
         --text-primary: #2d3748;
         --text-secondary: #4a5568;
         --text-light: #a0aec0;
         --bg-primary: #ffffff;
         --bg-secondary: #f7fafc;
         --bg-dark: #1a202c;
         --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
         --gradient-hover: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
         --shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.15);
     }

     [data-theme="dark"] {
         --text-primary: #e2e8f0;
         --text-secondary: #cbd5e0;
         --text-light: #718096;
         --bg-primary: #1a202c;
         --bg-secondary: #2d3748;
     }

     html {
         scroll-behavior: smooth;
     }

     body {
         font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
         line-height: 1.6;
         color: var(--text-primary);
         background-color: var(--bg-primary);
         transition: all 0.3s ease;
         overflow-x: hidden;
     }

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

     /* Navigation */
     .navbar {
         position: fixed;
         top: 0;
         width: 100%;
         background: rgba(255, 255, 255, 0.95);
         backdrop-filter: blur(10px);
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         z-index: 1000;
         transition: all 0.3s ease;
     }

     [data-theme="dark"] .navbar {
         background: rgba(26, 32, 44, 0.95);
     }

     .nav-container {
         max-width: 1200px;
         margin: 0 auto;
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 1rem 20px;
     }

     .nav-logo a {
         font-size: 1.5rem;
         font-weight: 700;
         color: var(--text-primary);
         text-decoration: none;
     }

     .nav-logo span {
         color: var(--primary-color);
     }

     .nav-menu {
         display: flex;
         list-style: none;
         gap: 2rem;
     }

     .nav-link {
         color: var(--text-secondary);
         text-decoration: none;
         font-weight: 500;
         transition: color 0.3s ease;
         position: relative;
     }

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

     .nav-link::after {
         content: '';
         position: absolute;
         width: 0;
         height: 2px;
         bottom: -5px;
         left: 0;
         background: var(--gradient);
         transition: width 0.3s ease;
     }

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

     .theme-toggle {
         background: none;
         border: none;
         color: var(--text-primary);
         font-size: 1.2rem;
         cursor: pointer;
         padding: 0.5rem;
         border-radius: 50%;
         transition: all 0.3s ease;
         margin-left: 1rem;
     }

     .theme-toggle:hover {
         background: var(--bg-secondary);
         transform: rotate(180deg);
     }

     .nav-toggle {
         display: none;
         flex-direction: column;
         cursor: pointer;
     }

     .bar {
         width: 25px;
         height: 3px;
         background: var(--text-primary);
         margin: 3px 0;
         transition: 0.3s;
     }

     /* Hero Section */
     .hero {
         min-height: 100vh;
         display: flex;
         align-items: center;
         background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
         position: relative;
         overflow: hidden;
     }

     .hero::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="%23667eea" fill-opacity="0.05" points="0,0 1000,300 1000,1000 0,700"/></svg>');
         z-index: -1;
     }

     .hero-container {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 4rem;
         align-items: center;
         max-width: 1200px;
         margin: 0 auto;
         margin-top: 25px;
         padding: 0 20px;
     }

     .hero-title {
         font-size: 3.5rem;
         font-weight: 700;
         margin-bottom: 1rem;
         line-height: 1.2;
     }

     .gradient-text {
         background: var(--gradient);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
     }

     .hero-subtitle {
         font-size: 1.5rem;
         color: var(--primary-color);
         margin-bottom: 1rem;
         font-weight: 500;
     }

     .hero-description {
         font-size: 1.1rem;
         color: var(--text-secondary);
         margin-bottom: 2rem;
         max-width: 500px;
     }

     .hero-buttons {
         display: flex;
         gap: 1rem;
         margin-bottom: 2rem;
     }

     .btn {
         padding: 0.8rem 2rem;
         border-radius: 50px;
         text-decoration: none;
         font-weight: 600;
         transition: all 0.3s ease;
         display: inline-block;
         border: none;
         cursor: pointer;
         font-size: 1rem;
     }

     .btn-primary {
         background: var(--gradient);
         color: white;
     }

     .btn-primary:hover {
         background: var(--gradient-hover);
         transform: translateY(-2px);
         box-shadow: var(--shadow-hover);
     }

     .btn-secondary {
         background: transparent;
         color: var(--primary-color);
         border: 2px solid var(--primary-color);
     }

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

     .hero-social {
         display: flex;
         gap: 1rem;
     }

     .social-link {
         width: 50px;
         height: 50px;
         border-radius: 50%;
         background: var(--bg-secondary);
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--text-secondary);
         text-decoration: none;
         transition: all 0.3s ease;
         font-size: 1.2rem;
     }

     .social-link:hover {
         background: var(--gradient);
         color: white;
         transform: translateY(-2px);
     }

     .hero-image {
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .hero-avatar {
         width: 300px;
         height: 300px;
         border-radius: 50%;
         background: var(--gradient);
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
         animation: float 6s ease-in-out infinite;
         padding: 10px;
     }

     .avatar-placeholder {
         width: 280px;
         height: 280px;
         border-radius: 50%;
         background: var(--bg-primary);
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 4rem;
         color: var(--text-light);
         overflow: hidden;
         position: relative;
     }

     .avatar-placeholder img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: 50%;
         /* Removed mix-blend-mode that was causing invisibility */
     }

     @keyframes float {

         0%,
         100% {
             transform: translateY(0px);
         }

         50% {
             transform: translateY(-20px);
         }
     }

     .hero-scroll {
         position: absolute;
         bottom: 2rem;
         left: 50%;
         transform: translateX(-50%);
     }

     .scroll-indicator {
         display: block;
         width: 30px;
         height: 50px;
         border: 2px solid var(--primary-color);
         border-radius: 25px;
         position: relative;
         text-decoration: none;
     }

     .scroll-indicator span {
         position: absolute;
         top: 8px;
         left: 50%;
         width: 4px;
         height: 8px;
         background: var(--primary-color);
         border-radius: 2px;
         transform: translateX(-50%);
         animation: scroll 2s infinite;
     }

     @keyframes scroll {
         0% {
             opacity: 0;
         }

         10% {
             transform: translateX(-50%) translateY(0);
             opacity: 1;
         }

         100% {
             transform: translateX(-50%) translateY(24px);
             opacity: 0;
         }
     }

     /* Section Styles */
     section {
         padding: 5rem 0;
     }

     .section-header {
         text-align: center;
         margin-bottom: 4rem;
     }

     .section-title {
         font-size: 2.5rem;
         font-weight: 700;
         margin-bottom: 1rem;
         position: relative;
         display: inline-block;
     }

     .section-title::after {
         content: '';
         position: absolute;
         bottom: -10px;
         left: 50%;
         transform: translateX(-50%);
         width: 50px;
         height: 3px;
         background: var(--gradient);
         border-radius: 2px;
     }

     .section-subtitle {
         font-size: 1.2rem;
         color: var(--text-secondary);
     }

     /* About Section */
     .about {
         background: var(--bg-secondary);
     }

     .about-content {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 4rem;
         align-items: center;
     }

     .about-text h3 {
         font-size: 1.8rem;
         margin-bottom: 1.5rem;
         color: var(--text-primary);
     }

     .about-text p {
         margin-bottom: 1.5rem;
         color: var(--text-secondary);
         font-size: 1.1rem;
     }

     .about-stats {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 2rem;
         margin-top: 2rem;
     }

     .stat {
         text-align: center;
         padding: 1.5rem;
         background: var(--bg-primary);
         border-radius: 10px;
         box-shadow: var(--shadow);
     }

     .stat h4 {
         font-size: 2rem;
         font-weight: 700;
         color: var(--primary-color);
         margin-bottom: 0.5rem;
     }

     .stat p {
         color: var(--text-secondary);
         font-size: 0.9rem;
     }

     .about-img-container {
         width: 300px;
         height: 300px;
         border-radius: 20px;
         background: var(--gradient);
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto;
         position: relative;
         overflow: hidden;
         padding: 10px;
     }

     .img-placeholder {
         width: 280px;
         height: 280px;
         border-radius: 15px;
         background: var(--bg-primary);
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 3rem;
         color: var(--text-light);
         overflow: hidden;
         position: relative;
     }

     .img-placeholder img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: 15px;
         /* Removed mix-blend-mode that was causing invisibility */
     }

     /* Skills Section */
     .skills-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 2rem;
     }

     .skill-category {
         background: var(--bg-primary);
         padding: 2rem;
         border-radius: 15px;
         box-shadow: var(--shadow);
         transition: transform 0.3s ease;
     }

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

     .skill-category h3 {
         font-size: 1.5rem;
         margin-bottom: 1.5rem;
         color: var(--primary-color);
         text-align: center;
     }

     .skill-items {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
         gap: 1rem;
     }

     .skill-item {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 1rem;
         background: var(--bg-secondary);
         border-radius: 10px;
         transition: all 0.3s ease;
     }

     .skill-item:hover {
         background: var(--gradient);
         color: white;
         transform: translateY(-2px);
     }

     .skill-item i {
         font-size: 2rem;
         margin-bottom: 0.5rem;
     }

     .skill-item span {
         font-size: 0.9rem;
         font-weight: 500;
     }

     /* Projects Section */
     .projects {
         background: var(--bg-secondary);
     }

     .projects-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
         gap: 2rem;
     }

     .project-card {
         background: var(--bg-primary);
         border-radius: 15px;
         overflow: hidden;
         box-shadow: var(--shadow);
         transition: all 0.3s ease;
     }

     .project-card:hover {
         transform: translateY(-10px);
         box-shadow: var(--shadow-hover);
     }

     .project-image {
         position: relative;
         height: 200px;
         overflow: hidden;
     }

     .project-placeholder {
         width: 100%;
         height: 100%;
         background: var(--gradient);
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 3rem;
         color: white;
     }

     .project-overlay {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: rgba(0, 0, 0, 0.8);
         display: flex;
         align-items: center;
         justify-content: center;
         opacity: 0;
         transition: opacity 0.3s ease;
     }

     .project-card:hover .project-overlay {
         opacity: 1;
     }

     .project-links {
         display: flex;
         gap: 1rem;
     }

     .project-link {
         width: 50px;
         height: 50px;
         border-radius: 50%;
         background: var(--gradient);
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         text-decoration: none;
         font-size: 1.2rem;
         transition: transform 0.3s ease;
     }

     .project-link:hover {
         transform: scale(1.1);
     }

     .project-content {
         padding: 2rem;
     }

     .project-content h3 {
         font-size: 1.3rem;
         margin-bottom: 1rem;
         color: var(--text-primary);
     }

     .project-content p {
         color: var(--text-secondary);
         margin-bottom: 1.5rem;
     }

     .project-tech {
         display: flex;
         gap: 0.5rem;
         flex-wrap: wrap;
     }

     .project-tech span {
         padding: 0.3rem 0.8rem;
         background: var(--bg-secondary);
         border-radius: 20px;
         font-size: 0.8rem;
         color: var(--primary-color);
         font-weight: 500;
     }

     
     /* Contact Section */
     .contact-content {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 4rem;
         align-items: start;
     }

     .contact-info h3 {
         font-size: 1.8rem;
         margin-bottom: 1rem;
         color: var(--text-primary);
     }

     .contact-info p {
         margin-bottom: 2rem;
         color: var(--text-secondary);
         font-size: 1.1rem;
     }

     .contact-details {
         display: flex;
         flex-direction: column;
         gap: 1rem;
     }

     .contact-item {
         display: flex;
         align-items: center;
         gap: 1rem;
         padding: 1rem;
         background: var(--bg-secondary);
         border-radius: 10px;
     }

     .contact-item i {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background: var(--gradient);
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 1rem;
     }

     .contact-form {
         background: var(--bg-secondary);
         padding: 2rem;
         border-radius: 15px;
         box-shadow: var(--shadow);
     }

     .form-group {
         margin-bottom: 1.5rem;
     }

     .form-group input,
     .form-group textarea {
         width: 100%;
         padding: 1rem;
         border: 2px solid transparent;
         border-radius: 10px;
         background: var(--bg-primary);
         color: var(--text-primary);
         font-family: inherit;
         font-size: 1rem;
         transition: all 0.3s ease;
     }

     .form-group input:focus,
     .form-group textarea:focus {
         outline: none;
         border-color: var(--primary-color);
         transform: translateY(-2px);
         box-shadow: var(--shadow);
     }

     .form-group textarea {
         resize: vertical;
         min-height: 120px;
     }

     /* Footer */
     .footer {
         background: var(--bg-dark);
         color: var(--text-light);
         padding: 2rem 0;
     }

     [data-theme="dark"] .footer {
         background: #0d1117;
     }

     .footer-content {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .footer-social {
         display: flex;
         gap: 1rem;
     }

     .footer .social-link {
         background: rgba(255, 255, 255, 0.1);
         color: var(--text-light);
     }

     .footer .social-link:hover {
         background: var(--gradient);
         color: white;
     }

     /* Responsive Design */
     @media (max-width: 768px) {
         .nav-menu {
             position: fixed;
             left: -100%;
             top: 70px;
             flex-direction: column;
             background-color: var(--bg-primary);
             width: 100%;
             text-align: center;
             transition: 0.3s;
             box-shadow: var(--shadow);
             padding: 2rem 0;
         }

         .nav-menu.active {
             left: 0;
         }

         .nav-toggle {
             display: flex;
         }

         .nav-toggle.active .bar:nth-child(2) {
             opacity: 0;
         }

         .nav-toggle.active .bar:nth-child(1) {
             transform: translateY(8px) rotate(45deg);
         }

         .nav-toggle.active .bar:nth-child(3) {
             transform: translateY(-8px) rotate(-45deg);
         }

         .hero-container {
             grid-template-columns: 1fr;
             text-align: center;
             gap: 2rem;
         }

         .hero-title {
             font-size: 2.5rem;
         }

         .hero-buttons {
             justify-content: center;
             flex-wrap: wrap;
         }

         .about-content {
             grid-template-columns: 1fr;
             gap: 2rem;
             text-align: center;
         }

         .about-stats {
             grid-template-columns: 1fr;
         }

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

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

         .contact-content {
             grid-template-columns: 1fr;
             gap: 2rem;
         }

         .footer-content {
             flex-direction: column;
             gap: 1rem;
             text-align: center;
         }

         .section-title {
             font-size: 2rem;
         }

         section {
             padding: 3rem 0;
         }
     }

     @media (max-width: 480px) {
         .hero-title {
             font-size: 2rem;
         }

         .hero-avatar {
             width: 250px;
             height: 250px;
         }

         .avatar-placeholder {
             width: 230px;
             height: 230px;
             font-size: 3rem;
         }

         .btn {
             padding: 0.7rem 1.5rem;
             font-size: 0.9rem;
         }

         .container {
             padding: 0 15px;
         }
     }

     /* Loading and Success States */
     .loading {
         opacity: 0.7;
         pointer-events: none;
     }

     .success-message {
         color: #10b981;
         font-weight: 500;
         margin-top: 1rem;
         padding: 1rem;
         background: rgba(16, 185, 129, 0.1);
         border-radius: 8px;
         border-left: 4px solid #10b981;
     }

     .error-message {
         color: #ef4444;
         font-weight: 500;
         margin-top: 1rem;
         padding: 1rem;
         background: rgba(239, 68, 68, 0.1);
         border-radius: 8px;
         border-left: 4px solid #ef4444;
     }

     /* Smooth scroll offset for fixed navbar */
     .section-offset {
         padding-top: 80px;
         margin-top: -80px;
     }