/* Your existing CSS remains unchanged */
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Segoe UI', sans-serif;
      }

      html {
          scroll-behavior: smooth;
      }

      body {
          background: linear-gradient(135deg, #1e0033, #2575fc);
          transition: background-color 0.5s ease;
          line-height: 1.8;
          overflow-x: hidden;
          position: relative;
          min-height: 100vh;
      }

      body::before {
          content: '';
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"%3E%3Ccircle cx="50" cy="50" r="5" fill="rgba(255,255,255,0.2)" /%3E%3Ccircle cx="150" cy="150" r="3" fill="rgba(255,255,255,0.1)" /%3E%3C/svg%3E');
          animation: particleMove 20s infinite linear;
          z-index: -1;
      }

      @keyframes particleMove {
          0% { transform: translateY(0); }
          100% { transform: translateY(-100vh); }
      }

      .welcomeMessage {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: rgba(71, 72, 66, 0.9);
          padding: 40px;
          color: #fff;
          font-size: 2rem;
          border-radius: 20px;
          text-align: center;
          z-index: 1000;
          box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
          animation: welcomePulse 3s ease-in-out;
      }

      @keyframes welcomePulse {
          0% { transform: translate(-50%, -60%) scale(0.8); opacity: 0; }
          20% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
          80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
          100% { transform: translate(-50%, -40%) scale(0.8); opacity: 0; }
      }

      header {
          background: rgba(30, 30, 47, 0.95);
          color: white;
          padding: 2.5rem 5%;
          position: fixed;
          width: 100%;
          z-index: 2000;
          backdrop-filter: blur(20px);
          box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
          transition: padding 0.3s ease, opacity 0.3s ease; /* Added opacity transition */
      }

      header.shrink {
          padding: 1rem 5%;
      }

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

      .logo {
          font-size: 2.5rem;
          font-weight: 700;
          background: linear-gradient(45deg, #ff007a, #00d4ff, #74b9ff);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          text-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
          animation: logoGlow 2s infinite alternate;
          transition: font-size 0.3s ease;
      }

      header.shrink .logo {
          font-size: 1.8rem;
      }

      @keyframes logoGlow {
          0% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }
          100% { text-shadow: 0 0 20px rgba(116, 185, 255, 0.8); }
      }

      .nav-links {
          display: flex;
          gap: 2rem;
          font-size: 18px;
      }

      .nav-links a {
          color: #fff;
          text-decoration: none;
          padding: 12px 25px;
          border-radius: 30px;
          transition: all 0.5s ease;
          position: relative;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.05);
          white-space: nowrap;
      }

      .nav-links a::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 0;
          height: 0;
          background: rgba(116, 185, 255, 0.5);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          transition: width 0.5s ease, height 0.5s ease;
      }

      .nav-links a:hover::before {
          width: 300%;
          height: 300%;
      }

      .nav-links a:hover {
          color: #ff007a;
          background: rgba(255, 255, 255, 0.2);
          box-shadow: 0 0 20px rgba(116, 185, 255, 0.7);
          transform: scale(1.15) translateY(-3px);
      }

      .hamburger {
          display: none;
          font-size: 35px;
          color: white;
          cursor: pointer;
          transition: all 0.3s ease;
      }

      .hamburger:hover {
          transform: rotate(180deg);
          color: #74b9ff;
      }

      @media screen and (max-width: 768px) {
          .nav-links {
              display: none;
              flex-direction: column;
              position: absolute;
              top: 100%;
              left: 0;
              width: 100%;
              background: rgba(30, 30, 47, 0.95);
              padding: 25px 0;
              backdrop-filter: blur(15px);
          }

          .nav-links.active {
              display: flex;
          }

          .hamburger {
              display: block;
          }

          .logo {
              margin-right: 0;
          }

          header {
              padding: 1.5rem 5%;
          }

          header.shrink {
              padding: 0.8rem 5%;
          }

          header.shrink .logo {
              font-size: 1.5rem;
          }
      }

      .hero {
          height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          background: linear-gradient(45deg, #1e0033, #0984e3, #2d3436);
          color: #fff;
          padding: 0 10%;
          font-size: 30px;
          position: relative;
          overflow: hidden;
          transition: background 1s ease;
          padding-top: 100px;
      }

      .hero::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.5) 100%);
          animation: pulseGlow 10s infinite alternate;
          z-index: 0;
      }

      @keyframes pulseGlow {
          0% { opacity: 0.5; }
          50% { opacity: 0.8; }
          100% { opacity: 0.5; }
      }

      .hero-content {
          z-index: 1;
          animation: float 8s ease-in-out infinite;
          max-width: 900px;
      }

      .hero-content h1 {
          font-size: 4rem;
          margin-bottom: 2rem;
          text-shadow: 0 0 25px rgba(116, 185, 255, 0.9);
          background: linear-gradient(45deg, #74b9ff, #ff007a);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
      }

      .hero-content p {
          font-size: 1.5rem;
          margin-bottom: 2rem;
          color: #e0e0e0;
          text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
      }

      .hero-extra {
          margin-top: 2rem;
          font-size: 1.2rem;
          color: #fff;
          padding: 15px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 15px;
          box-shadow: 0 0 20px rgba(116, 185, 255, 0.5);
          animation: fadeIn 2s ease-in;
      }

      @keyframes fadeIn {
          0% { opacity: 0; transform: translateY(50px); }
          100% { opacity: 1; transform: translateY(0); }
      }

      .profile-container {
          width: 300px;
          height: 300px;
          border-radius: 50%;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
          border: 6px solid #74b9ff;
          margin: 2rem auto;
          transition: all 0.6s ease;
          position: relative;
          z-index: 10;
      }

      .profile-container::after {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: radial-gradient(circle, rgba(116, 185, 255, 0.3) 0%, transparent 70%);
          opacity: 0;
          transition: opacity 0.6s ease;
      }

      .profile-container:hover::after {
          opacity: 1;
      }

      .profile-container:hover {
          transform: scale(1.15) rotate(8deg);
          box-shadow: 0 0 40px rgba(116, 185, 255, 1);
      }

      .profile-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          display: block;
          transition: transform 0.6s ease;
      }

      .profile-container:hover .profile-image {
          transform: scale(1.1);
      }

      .buttons {
          padding: 30px;
          display: flex;
          gap: 1.5rem;
          justify-content: center;
          flex-wrap: wrap;
      }

      .btn {
          padding: 15px 30px;
          background: linear-gradient(45deg, #74b9ff, #ff007a);
          color: #fff;
          border: 3px solid #fff;
          border-radius: 35px;
          font-size: 20px;
          cursor: pointer;
          transition: all 0.5s ease;
          position: relative;
          overflow: hidden;
          box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
      }

      .btn::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 0;
          height: 0;
          background: rgba(255, 255, 255, 0.4);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          transition: width 0.5s ease, height 0.5s ease;
      }

      .btn:hover::before {
          width: 400%;
          height: 400%;
      }

      .btn:hover {
          background: linear-gradient(45deg, #ff007a, #0984e3);
          transform: scale(1.2) translateY(-5px);
          box-shadow: 0 0 40px rgba(116, 185, 255, 1);
      }

      section {
          padding: 6rem 5%;
          font-size: 20px;
          display: none;
          background: rgba(0, 0, 0, 0.05);
          border-radius: 20px;
          margin: 2rem 0;
      }

      #home {
          display: flex;
      }

      .section-title {
          text-align: center;
          margin-bottom: 4rem;
          font-size: 40px;
          color: #fff;
          text-shadow: 0 0 20px rgba(116, 185, 255, 0.7);
          background: linear-gradient(45deg, #74b9ff, #ff007a);
          -webkit-background-clip: text;
          background-clip: text;
          animation: titleGlow 2s infinite alternate;
          letter-spacing: 2px;
      }

      @keyframes titleGlow {
          0% { text-shadow: 0 0 15px rgba(116, 185, 255, 0.5); }
          100% { text-shadow: 0 0 25px rgba(255, 255, 255, 0.8); }
      }

      .skills-container {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 2rem;
          perspective: 1000px;
      }

      .skill-card {
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(200, 200, 255, 0.7));
          padding: 2rem;
          border-radius: 25px;
          text-align: center;
          transition: all 0.6s ease;
          backdrop-filter: blur(15px);
          border: 2px solid rgba(116, 185, 255, 0.5);
          box-shadow: 0 15px 50px rgba(31, 38, 135, 0.3);
          transform-style: preserve-3d;
          position: relative;
          overflow: hidden;
      }

      .skill-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(45deg, rgba(116, 185, 255, 0.2), rgba(255, 0, 122, 0.2));
          opacity: 0;
          transition: opacity 0.6s ease;
      }

      .skill-card:hover::before {
          opacity: 1;
      }

      .skill-card:hover {
          transform: translateY(-15px) rotateX(10deg) rotateY(10deg);
          box-shadow: 0 0 50px rgba(116, 185, 255, 0.9);
          background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(116, 185, 255, 0.9));
      }

      .skill-card i {
          font-size: 3rem;
          margin-bottom: 1.5rem;
          color: #0984e3;
          transition: all 0.4s ease;
      }

      .skill-card:hover i {
          transform: scale(1.3) rotate(15deg);
          color: #ff007a;
          text-shadow: 0 0 15px rgba(255, 0, 122, 0.7);
      }

      .skill-card h3 {
          font-size: 1.5rem;
          margin-bottom: 1rem;
          color: #1e0033;
          text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
      }

      .skill-card p {
          font-size: 1rem;
          color: #333;
          transition: color 0.4s ease;
      }

      .skill-card:hover p {
          color: #fff;
      }

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

      .project-card {
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(200, 200, 255, 0.7));
          border-radius: 20px;
          overflow: hidden;
          transition: all 0.7s ease;
          backdrop-filter: blur(15px);
          border: 2px solid rgba(116, 185, 255, 0.5);
          box-shadow: 0 15px 50px rgba(31, 38, 135, 0.3);
          position: relative;
          transform-style: preserve-3d;
      }

      .project-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(45deg, rgba(116, 185, 255, 0.3), rgba(255, 0, 122, 0.3));
          opacity: 0;
          transition: opacity 0.7s ease;
          z-index: 1;
      }

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

      .project-card:hover {
          transform: translateY(-15px) scale(1.1) rotateY(5deg);
          box-shadow: 0 0 60px rgba(116, 185, 255, 1);
      }

      .project-img {
          width: 100%;
          height: 200px;
          object-fit: cover;
          display: block;
          transition: transform 0.7s ease;
      }

      .project-card:hover .project-img {
          transform: scale(1.15);
      }

      .project-info {
          padding: 2rem;
          position: relative;
          z-index: 2;
          background: rgba(0, 0, 0, 0.85);
          color: #fff;
          transition: background 0.7s ease;
      }

      .project-card:hover .project-info {
          background: rgba(0, 0, 0, 0.95);
      }

      .project-info h3 {
          font-size: 1.5rem;
          margin-bottom: 1rem;
          text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
      }

      .tech-tags {
          display: flex;
          gap: 0.8rem;
          flex-wrap: wrap;
          margin: 1.5rem 0;
      }

      .tag {
          background: linear-gradient(45deg, #74b9ff, #ff007a);
          color: #fff;
          padding: 0.5rem 1rem;
          border-radius: 30px;
          font-size: 0.9rem;
          transition: all 0.4s ease;
      }

      .project-card:hover .tag {
          transform: scale(1.15) rotate(5deg);
          box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
      }

      .project-btn {
          display: inline-block;
          margin-top: 15px;
          padding: 12px 25px;
          background: linear-gradient(45deg, #0984e3, #74b9ff);
          color: #fff;
          text-decoration: none;
          border-radius: 30px;
          font-weight: bold;
          transition: all 0.5s ease;
          position: relative;
          overflow: hidden;
          box-shadow: 0 0 15px rgba(116, 185, 255, 0.5);
      }

      .project-btn::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 0;
          height: 0;
          background: rgba(255, 255, 255, 0.4);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          transition: width 0.5s ease, height 0.5s ease;
      }

      .project-btn:hover::before {
          width: 400%;
          height: 400%;
      }

      .project-btn:hover {
          background: linear-gradient(45deg, #ff007a, #0984e3);
          transform: scale(1.15) translateY(-5px);
          box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
      }

      .contact-container {
          max-width: 700px;
          margin: 0 auto;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(200, 200, 255, 0.7));
          backdrop-filter: blur(15px);
          border: 2px solid rgba(116, 185, 255, 0.5);
          box-shadow: 0 15px 50px rgba(31, 38, 135, 0.3);
          padding: 3rem;
          border-radius: 20px;
          transition: all 0.6s ease;
      }

      .contact-container:hover {
          transform: translateY(-15px);
          box-shadow: 0 0 50px rgba(116, 185, 255, 0.9);
      }

      .contact-form {
          display: grid;
          gap: 1.5rem;
      }

      input, textarea {
          padding: 1rem;
          border: 3px solid rgba(255, 255, 255, 0.5);
          border-radius: 10px;
          width: 100%;
          background: rgba(255, 255, 255, 0.2);
          color: #fff;
          font-size: 1rem;
          transition: all 0.4s ease;
      }

      input:focus, textarea:focus {
          border-color: #ff007a;
          box-shadow: 0 0 25px rgba(255, 0, 122, 0.5);
          background: rgba(255, 255, 255, 0.3);
      }

      .contact-form a {
          display: inline-block;
          padding: 12px 30px;
          background: linear-gradient(45deg, #0984e3, #74b9ff);
          color: #fff;
          text-decoration: none;
          border-radius: 30px;
          font-size: 1.2rem;
          transition: all 0.5s ease;
          text-align: center;
      }

      .contact-form a:hover {
          background: linear-gradient(45deg, #ff007a, #0984e3);
          transform: scale(1.1);
          box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
      }

      footer {
          background: linear-gradient(135deg, #1e1e2f, #2d3436);
          color: #fff;
          padding: 4rem 5%;
          text-align: center;
          border-top: 2px solid rgba(255, 255, 255, 0.2);
          box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
      }

      .social-links {
          display: flex;
          gap: 2rem;
          justify-content: center;
          margin: 2rem 0;
          flex-wrap: wrap;
      }

      .social-links a {
          color: #fff;
          font-size: 2.5rem;
          transition: all 0.5s ease;
      }

      .social-links a:hover {
          color: #ff007a;
          transform: scale(1.3) rotate(15deg);
          text-shadow: 0 0 20px rgba(255, 0, 122, 0.8);
      }

      .back-to-top button {
          background: linear-gradient(45deg, #74b9ff, #ff007a);
          color: #fff;
          padding: 12px 25px;
          border: none;
          border-radius: 30px;
          cursor: pointer;
          margin-top: 20px;
          transition: all 0.5s ease;
          font-size: 1.2rem;
      }

      .back-to-top button:hover {
          background: linear-gradient(45deg, #0984e3, #ff007a);
          transform: scale(1.15);
          box-shadow: 0 0 25px rgba(116, 185, 255, 0.8);
      }

      .bubbles {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 0;
      }

      .bubble {
          position: absolute;
          background: linear-gradient(45deg, rgba(116, 185, 255, 0.4), rgba(255, 0, 122, 0.4));
          border-radius: 50%;
          animation: floatBubble 15s infinite ease-in-out;
          box-shadow: 0 0 20px rgba(116, 185, 255, 0.5);
      }

      @keyframes floatBubble {
          0% { transform: translateY(150vh) scale(0.5); opacity: 0.9; }
          50% { opacity: 1; transform: translateY(75vh) scale(0.8); }
          100% { transform: translateY(-20vh) scale(1.2); opacity: 0; }
      }

      ::-webkit-scrollbar {
          width: 12px;
      }

      ::-webkit-scrollbar-track {
          background: #1e1e2f;
      }

      ::-webkit-scrollbar-thumb {
          background: linear-gradient(45deg, #74b9ff, #ff007a);
          border-radius: 12px;
          box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
      }

      .progress-bar {
          position: fixed;
          top: 0;
          left: 0;
          height: 8px;
          background: linear-gradient(45deg, #ff007a, #74b9ff);
          width: 0;
          transition: width 0.3s ease;
          z-index: 2001;
          box-shadow: 0 0 15px rgba(116, 185, 255, 0.7);
      }

      @media screen and (max-width: 480px) {
          .hero-content h1 {
              font-size: 2.5rem;
          }

          .hero-content p {
              font-size: 1rem;
          }

          .profile-container {
              width: 200px;
              height: 200px;
          }

          .btn {
              padding: 10px 20px;
              font-size: 16px;
          }

          .section-title {
              font-size: 30px;
          }
      }