* { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
      background: #0A0E1A; 
      color: #FFFFFF; 
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      overflow-x: hidden;
    }
    .container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
    .nav-container { background: rgba(10, 14, 26, 0.9); backdrop-filter: blur(10px); position: fixed; top: 0; width: 100%; z-index: 50; }
    .nav-content { display: flex; justify-content: space-between; align-items: center; height: 80px; }
    .logo { font-weight: bold; font-size: 1.5rem; color: #1BF1B1; }
    .logo-img {   height: 50px; width: auto;}
    .nav-links { display: flex; gap: 2rem; list-style: none; }
    .nav-links a { color: #FFFFFF; text-decoration: none; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; transition: color 0.3s; }
    .nav-links a:hover { color: #1BF1B1; }
    .hero { min-height: 100vh; display: flex; align-items: center; padding-top: 80px; }
    .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
    .hero-text h1 { font-size: 3rem; font-weight: 300; line-height: 1.2; margin-bottom: 1.5rem; }
    .hero-text .highlight { color: #1BF1B1; font-weight: bold; }
    .hero-text p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 2rem; color: #B0B6C3; }
    .btn { display: inline-block; padding: 1rem 2rem; background: rgba(27, 241, 177, 0.1); border: 2px solid #1BF1B1; color: #1BF1B1; text-decoration: none; border-radius: 50px; font-weight: 600; transition: all 0.3s; }
    .btn:hover { background: #1BF1B1; color: #0A0E1A; transform: translateY(-2px); }
    .hero-image { text-align: center; }
    .hero-image img { max-width: 100%; height: auto; border-radius: 10px; }
    .section { padding: 5rem 0; }
    .section h2 { font-size: 2.5rem; margin-bottom: 3rem; text-align: center; }
    .section h2 .highlight { color: #1BF1B1; }
    .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }
    .stat-card { background: rgba(255, 255, 255, 0.05); padding: 2rem; text-align: center; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); }
    .stat-card h3 { font-size: 2rem; color: #1BF1B1; margin-bottom: 0.5rem; }
    .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
    .project-card { background: rgba(255, 255, 255, 0.05); border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.3s; }
    .project-card:hover { transform: translateY(-5px); }
    .project-card img { width: 100%; height: 200px; object-fit: cover; }
    .project-card-content { padding: 1.5rem; }
    .project-card h3 { margin-bottom: 0.5rem; color: #1BF1B1; }
    .experience { background: rgba(255, 255, 255, 0.02); }
    .experience-item { background: rgba(255, 255, 255, 0.05); padding: 2rem; margin-bottom: 2rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); }
    .experience-item h3 { color: #1BF1B1; margin-bottom: 0.5rem; }
    .experience-item .duration { color: #B0B6C3; font-size: 0.9rem; }
    .testimonials { text-align: center; }
    .testimonial { background: rgba(255, 255, 255, 0.05); padding: 2rem; margin: 2rem auto; border-radius: 10px; max-width: 600px; border: 1px solid rgba(255, 255, 255, 0.1); }
    .testimonial p { font-style: italic; margin-bottom: 1rem; }
    .testimonial .client { font-weight: bold; color: #1BF1B1; }
    .contact { background: rgba(255, 255, 255, 0.02); }
    .contact-form { max-width: 600px; margin: 0 auto; }
    .contact-form input, .contact-form textarea { width: 100%; padding: 1rem; margin-bottom: 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 5px; color: #FFFFFF; }
    .contact-form input::placeholder, .contact-form textarea::placeholder { color: #B0B6C3; }
    .contact-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; }
    
    .contact-info a { text-decoration: none;}
    
    .contact-item { text-align: center; padding: 10px 5px;border: solid 1px #1bf1b1; border-radius: 5px; }
    .contact-item:hover { border: solid 1px #b277cf; transition: 0.3s ease-in-out; cursor: pointer; }
    .contact-item a { color: #1BF1B1; text-decoration: none; }
    .contact-item a:hover { color: #5a6ded; transition: 0.3s ease-in-out; }
    .footer { text-align: center; padding: 2rem 0; background: rgba(0, 0, 0, 0.5); }
    .social-links { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
    .social-links a { color: #B0B6C3; font-size: 1.5rem; transition: color 0.3s; }
    .social-links a:hover { color: #1BF1B1; }
    @media (max-width: 768px) {
      .hero-content { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
      .hero-text h1 { font-size: 2rem; }
      .nav-links { display: none; }
      .stats { grid-template-columns: repeat(2, 1fr); }
      .projects-grid { grid-template-columns: 1fr; }
    }
    
      .section.experience {
        padding: 40px 0;
        
      }

      .container1 {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 20px;
        
      }

      .experience-item {
        margin-bottom: 30px;
        padding-bottom: 20px;
        
      }

      .experience-item:last-child {
        border-bottom: none;
      }

      .experience-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
      }

      .job-title {
        flex: 1;
        min-width: 0;
      }

      .job-title h3 {
        margin: 0;
        font-size: 1.2em;
        font-weight: 600;
      }

      .duration {
        flex: 0 0 auto;
        text-align: center;
        font-weight: 500;
        color: #666;
        white-space: nowrap;
        padding: 0 20px;
      }

      .employer {
        flex: 1;
        text-align: right;
        min-width: 0;
      }

      .employer strong {
        display: block;
        margin-bottom: 4px;
      }

      .employer small {
        color: #666;
        font-size: 0.9em;
      }

      /* Responsive design */
      @media (max-width: 768px) {
        .experience-row {
          flex-direction: column;
          gap: 10px;
        }
        
        .job-title,
        .duration,
        .employer {
          text-align: left;
          flex: none;
        }
        
        .duration {
          padding: 0;
          order: 2;
        }
        
        .employer {
          order: 3;
        }
      }



        h2 {
            text-align: center;
            margin-bottom: 3rem;
            font-size: 2.5rem;
        }

        .highlight {
            color: #1BF1B1;
        }

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

        .project-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
        }

        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(27, 241, 177, 0.2);
        }

        .project-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .project-card-content {
            padding: 1.5rem;
        }

        .project-card h3 {
            margin-bottom: 0.5rem;
            color: #1BF1B1;
            font-size: 1.2rem;
        }

        .project-card p {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.5;
        }

        /* Modal Styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(5px);
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal {
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            border-radius: 20px;
            max-width: 900px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            border: 1px solid rgba(27, 241, 177, 0.3);
            position: relative;
            animation: modalSlideIn 0.3s ease-out;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(-50px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .modal-header {
            padding: 2rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
        }

        .modal-title {
            font-size: 2rem;
            color: white;
            margin-bottom: 1rem;
        }

        .modal-role {
            color: #1BF1B1;
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }

        .modal-duration {
            color: #1BF1B1;
            font-size: 1.1rem;
        }

        .close-button {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }

        .close-button:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .modal-content {
            display: flex;
            gap: 2rem;
            padding: 2rem;
            flex-wrap: wrap;
        }

        .modal-left {
            flex: 1;
            min-width: 300px;
        }

        .modal-right {
            flex: 1;
            min-width: 300px;
        }

        .tech-stack {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 2rem;
        }

        .tech-tag {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .project-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            margin-bottom: 2rem;
        }

        .project-features {
            margin-bottom: 2rem;
        }

        .project-features h4 {
            color: #1BF1B1;
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }

        .features-list {
            list-style: none;
        }

        .features-list li {
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 0.5rem;
            padding-left: 1rem;
            position: relative;
        }

        .features-list li::before {
            content: "•";
            color: #1BF1B1;
            position: absolute;
            left: 0;
        }

        .project-showcase {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 2rem;
        }

        .project-showcase img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }
        .modal-buttons {
            display: flex;
            gap: 1rem;
        }

        .modal-button {
            flex: 1;
            padding: 1rem 2rem;
            border: 2px solid #1BF1B1;
            background: transparent;
            color: #1BF1B1;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: bold;
            transition: all 0.3s;
            text-decoration: none;
            text-align: center;
            display: block;
        }

        .modal-button:hover {
            background: #1BF1B1;
            color: #1a1a2e;
        }

        .modal-button.live-site {
            background: #1BF1B1;
            color: #1a1a2e;
        }

        .modal-button.live-site:hover {
            background: transparent;
            color: #1BF1B1;
        }

        @media (max-width: 768px) {
            .modal-content {
                flex-direction: column;
            }
            
            .modal {
                width: 95%;
                margin: 1rem;
            }
            
            .modal-buttons {
                flex-direction: column;
            }
        }
        


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

.contact-left {
  order: 1;
}

.contact-right {
    padding-top: 10vh;
    order: 2;
}

/* Mobile Responsive */
@media (max-width: 768px) {

  /* Contact Section Mobile Layout */
  .contact-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .contact-intro {
    order: 1; /* "Ready to make..." comes first */
    margin: 0;
    padding-left: -70rem;
  }

  .contact-title {
    order: 2; /* "Let's get on a call" comes second */
  }

  .contact-right {
    order: 3; /* Form comes third */
  }

  .contact-info {
    order: 4; /* Social media links come last */
    margin-top: 2rem;
  }
  .contact-right {
    padding-top: 10vh;
  }
}