{

margin: 0;

      padding: 0;

      box-sizing: border-box;

  }



  body {

      font-family: 'Roboto', sans-serif;

      color: #eaeaea;

      background: #000000;

      overflow-x: hidden;

      transition: all 0.3s ease;

  }



  .background {

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background: #000;

      z-index: -1;

      overflow: hidden;

  }



  .particle {

      position: absolute;

      width: 10px;

      height: 10px;

      background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));

      border-radius: 50%;

      animation: moveParticle 15s infinite;

      filter: blur(2px);

  }



  @keyframes moveParticle {

      0% {

          transform: translateY(100vh) translateX(0);

          opacity: 0;

      }



      50% {

          opacity: 1;

      }



      100% {

          transform: translateY(-10vh) translateX(20vw);

          opacity: 0;

      }

  }



  header {

      background: transparent;

      color: #eaeaea;

      padding: 50px 20px;

      text-align: center;

      font-family: 'Playfair Display', serif;

  }



  header .profile-container {

      display: flex;

      justify-content: center;

      align-items: center;

      gap: 20px;

      opacity: 0;

      animation: fadeIn 1s ease-in-out forwards 1s;

  }



  header .profile-photo {

      width: 100px;

      height: 100px;

      border-radius: 50%;

      object-fit: cover;

      transition: transform 0.3s ease-in-out;

  }



  header h1 {

      font-size: 3.5rem;

      font-weight: 700;

      color: #ffffff;

      display: inline-block;

      overflow: hidden;

      white-space: nowrap;

      border-right: 4px solid #ffffff;

      animation: typing 3s steps(40) 1s forwards, blinkCaret 0.75s step-end infinite;

  }



  @keyframes typing {

      from {

          width: 0;

      }

      to {

          width: 100%;

      }

  }



  @keyframes blinkCaret {

      50% {

          border-color: transparent;

      }

  }



  @keyframes fadeIn {

      0% {

          opacity: 0;

      }

      100% {

          opacity: 1;

      }

  }



  header p {

      font-size: 1.5rem;

      margin-top: 10px;

      opacity: 0;

      animation: fadeIn 2s ease-in-out forwards 1.5s;

  }



  .social-links {

      margin-top: 20px;

      opacity: 0;

      animation: fadeIn 2s ease-in-out forwards 2s;

  }



  .social-links a {

      margin: 0 15px;

      font-size: 2rem;

      color: #ffffff;

      text-decoration: none;

  }



  .social-links a:hover {

      color: #ffcc00;

  }



  .contact-info {

      margin-top: 20px;

      opacity: 0;

      animation: fadeIn 2s ease-in-out forwards 2.5s;

  }



  .contact-info a {

      color: #ffffff;

      font-size: 1.2rem;

      text-decoration: none;

      display: block;

      margin: 10px 0;

  }



  .contact-info a:hover {

      color: #ffcc00;

  }



  .cv-btn {

      margin-top: 20px;

      padding: 15px 30px;

      font-size: 1.3rem;

      color: #ffffff;

      background: linear-gradient(to right, #434343, #000000);

      border: none;

      border-radius: 10px;

      cursor: pointer;

      transition: background 0.3s ease;

      text-align: center;

      display: inline-block;

  }



  .cv-btn:hover {

      background: linear-gradient(to right, #000000, #434343);

  }



  .container {

      max-width: 1200px;

      margin: 50px auto;

      padding: 20px;

      color: #eaeaea;

  }



  .section-title {

      font-family: 'Playfair Display', serif;

      font-size: 2.5rem;

      font-weight: 700;

      margin-bottom: 20px;

      text-align: center;

      color: #ffffff;

      opacity: 0;

      animation: fadeIn 1s ease-in-out forwards 2.5s;

  }



  .about,

  .projects,

  .skills,

  .services,

  .testimonials,

  .contact,

  .education,

  .internship {

      margin-bottom: 50px;

  }



  .about p,

  .education p,

  .internship p {

      font-size: 1.2rem;

      line-height: 1.8;

      text-align: center;

      color: #eaeaea;

      opacity: 0;

      animation: fadeIn 1.5s ease-in-out forwards 3s;

  }



  .skills-list,

  .services-list {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

      gap: 20px;

      margin-top: 20px;

      opacity: 0;

      animation: fadeIn 2s ease-in-out forwards 3.5s;

  }



  .skills-list div,

  .services-list div {

      background: rgba(255, 255, 255, 0.1);

      padding: 20px;

      border-radius: 15px;

      text-align: center;

      transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;

  }



  .skills-list div:hover,

  .services-list div:hover {

      transform: translateY(-10px);

      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);

  }



  .skills-list div h3,

  .services-list div h3 {

      font-size: 1.8rem;

      margin-bottom: 10px;

      color: #ffffff;

  }



  .projects-grid {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

      gap: 20px;

      margin-top: 20px;

      opacity: 0;

      animation: fadeIn 2s ease-in-out forwards 4s;

  }



  .project-card {

      background: rgba(255, 255, 255, 0.1);

      border-radius: 15px;

      overflow: hidden;

      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

      transition: transform 0.3s ease, box-shadow 0.3s ease;

  }



  .project-card:hover {

      transform: translateY(-10px);

      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);

  }



  .project-card img {

      width: 100%;

      height: 200px;

      object-fit: cover;

  }



  .project-card h3 {

      font-size: 1.8rem;

      margin: 15px;

      color: #ffffff;

  }



  .project-card p {

      font-size: 1rem;

      margin: 15px;

      color: #eaeaea;

  }



  .contact form {

      max-width: 600px;

      margin: 0 auto;

      display: flex;

      flex-direction: column;

      gap: 15px;

  }



  .contact input,

  .contact textarea {

      padding: 15px;

      font-size: 1rem;

      border: 1px solid #333;

      border-radius: 10px;

      background: #222;

      color: #eaeaea;

  }



  .contact button {

      padding: 15px;

      font-size: 1.3rem;

      color: #ffffff;

      background: linear-gradient(to right, #434343, #000000);

      border: none;

      border-radius: 10px;

      cursor: pointer;

      transition: background 0.3s ease;

  }



  .contact button:hover {

      background: linear-gradient(to right, #000000, #434343);

  }



  footer {

      text-align: center;

      padding: 30px;

      background: rgba(0, 0, 0, 0.9);

      color: #eaeaea;

      font-size: 1rem;

      opacity: 0;

      animation: fadeIn 2s ease-in-out forwards 5s;

  }



  footer a {

      color: #ffffff;

      text-decoration: none;

  }



  footer a:hover {

      text-decoration: underline;

  }