<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

    body {
      margin: 0;
      font-family: 'Poppins', sans-serif;
      background-color: #0f172a;
      color: #f1f1f1;
      line-height: 1.6;
    }

    .container {
      width: 90%;
      max-width: 1100px;
      margin: 2rem auto;
    }

    .main-heading {
      text-align: center;
      color: #f87171;
      font-size: 2.5rem;
      margin-bottom: 3rem;
      text-shadow: 0 2px 4px rgba(248, 113, 113, 0.3);
      font-weight: 600;
    }

    .achieve {
      margin-bottom: 3rem;
      background: rgba(169, 133, 133, 0.05);
      border-left: 5px solid #f87171;
      border-radius: 10px;
      padding: 1.5rem 2rem;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      transition: transform 0.3s;
    }

    .achieve:hover {
      transform: translateY(-5px);
    }

    h2 {
      color: #f87171;
      border-bottom: 2px solid #f87171;
      display: inline-block;
      margin-bottom: 1rem;
      padding-bottom: 4px;
    }

    .achieve ul {
      list-style: none;
      padding-left: 0;
    }

    .achieve li::before {
      content: "▹";
      color: #f87171;
      margin-right: 10px;
    }

    .card {
      background: rgba(255,255,255,0.08);
      padding: 1rem;
      margin: 0.5rem 0;
      border-radius: 8px;
    }

    /* Scroll Animation Styles */
    .animate-on-scroll {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .animate-on-scroll.visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 768px) {
      .main-heading {
        font-size: 2rem;
      }
      header h1 { font-size: 1.6rem; }
      .container { width: 95%; }
    }
  </style>