* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
      }

      body {
        min-height: 100vh;
        overflow-x: hidden; 
        overflow-y: auto; /* allow scrolling on mobile */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        background: linear-gradient(-45deg, #0f172a, #1d4ed8, #2563eb, #38bdf8);
        background-size: 400% 400%;
        animation: gradientMove 15s ease infinite;
        padding: 20px 0; /* added breathing room */
      }

      /* Animated Background */

      @keyframes gradientMove {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

      /* Floating particles */

      .background {
        position: absolute;
        inset: 0;
        overflow: hidden;
      }

      .background::before,
      .background::after {
        content: "";
        position: absolute;
        width: 650px;
        height: 650px;
        border-radius: 50%;
        filter: blur(120px);
        opacity: 0.18;
        animation: float 10s ease-in-out infinite;
      }

      .background::before {
        background: #60a5fa;
        top: -200px;
        left: -150px;
      }

      .background::after {
        background: #38bdf8;
        bottom: -250px;
        right: -180px;
        animation-delay: 5s;
      }

      @keyframes float {
        0% {
          transform: translateY(0px);
        }

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

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

      .container {
        position: relative;
        z-index: 5;

        width: min(650px, 92%);

        text-align: center;

        color: white;

        padding: 10px 0; /* added slight padding */
      }

      /* Logo */

      .logo-wrapper {
        position: relative;

        width: 220px;
        height: 220px;
        
        margin: auto;
      }

      .logo-wrapper img {
        position: absolute;

        inset: 0;

        width: 180px;
        height: 180px;

        margin: auto;

        border-radius: 50%;

        object-fit: cover;

        border: 6px solid rgba(255, 255, 255, 0.18);

        box-shadow:
          0 0 30px rgba(255, 255, 255, 0.2),
          0 0 60px rgba(59, 130, 246, 0.5);

        animation:
          pop 0.8s ease,
          breathe 2.5s ease-in-out infinite;
      }

      @keyframes pop {
        from {
          transform: scale(0.2) rotate(-180deg);

          opacity: 0;
        }

        to {
          transform: scale(1);

          opacity: 1;
        }
      }

      @keyframes breathe {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.06);
        }

        100% {
          transform: scale(1);
        }
      }

      /* Rotating Rings */

      .ring {
        position: absolute;

        inset: 0;

        margin: auto;

        border-radius: 50%;

        border: 2px solid rgba(255, 255, 255, 0.2);
      }

      .ring1 {
        width: 205px;
        height: 205px;

        animation: spin 12s linear infinite;
      }

      .ring2 {
        width: 225px;
        height: 225px;

        border-style: dashed;

        animation: spinReverse 18s linear infinite;
      }

      @keyframes spin {
        from {
          transform: rotate(0);
        }

        to {
          transform: rotate(360deg);
        }
      }

      @keyframes spinReverse {
        from {
          transform: rotate(360deg);
        }

        to {
          transform: rotate(0);
        }
      }

      /* Heading */

      h1 {
        margin-top: 40px;

        font-size: 2.8rem;

        font-weight: 700;

        /* FIX: prevent overflow */
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        max-width: 100%;
      }

      h2 {
        margin-top: 15px;

        font-weight: 400;

        color: #dbeafe;

        font-size: 1.0rem;

        /* FIX: prevent overflow */
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        max-width: 100%;
      }

      p {
        margin-top: 25px;

        color: #e2e8f0;

        font-size: 1rem;

        line-height: 1.8;

        /* FIX: prevent overflow */
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      /* Course Box */

      .course-box {
        margin: 35px auto;

        width: 320px;

        padding: 18px;

        border-radius: 18px;

        backdrop-filter: blur(20px);

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

        border: 1px solid rgba(255, 255, 255, 0.15);

        font-size: 1.25rem;

        font-weight: 600;

        color: white;

        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);

        /* FIX: prevent overflow */
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      /* Progress */

      .progress-container {
        width: 100%;

        height: 12px;

        border-radius: 100px;

        overflow: hidden;

        background: rgba(255, 255, 255, 0.15);
      }

      .progress {
        width: 0%;

        height: 100%;

        border-radius: 100px;

        background: linear-gradient(90deg, #38bdf8, white, #38bdf8);

        background-size: 300%;

        animation: shine 2s linear infinite;

        transition: width 4s linear;
      }

      @keyframes shine {
        from {
          background-position: 0%;
        }

        to {
          background-position: 300%;
        }
      }

      .loading-text {
        margin-top: 25px;

        font-size: 0.95rem;

        color: #dbeafe;

        letter-spacing: 1px;

        animation: blink 1.5s infinite;

        /* FIX: prevent overflow */
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      @keyframes blink {
        50% {
          opacity: 0.4;
        }
      }

      /* ===== MOBILE RESPONSIVENESS FIXES ===== */
      /* Keeping your existing media query but enhancing it */

      @media (max-width: 768px) {
        .logo-wrapper {
          width: 180px;
          height: 180px;
        }

        .logo-wrapper img {
          width: 150px;
          height: 150px;
        }

        .ring1 {
          width: 170px;
          height: 170px;
        }

        .ring2 {
          width: 190px;
          height: 190px;
        }

        h1 {
          font-size: 2rem;
        }

        h2 {
          font-size: 1rem;
        }

        .course-box {
          width: 100%;
        }
      }

      /* EXTRA SMALL SCREENS (phones) */
      @media (max-width: 480px) {
        .container {
          width: 95%;
        }

        .logo-wrapper {
          width: 150px;
          height: 150px;
        }

        .logo-wrapper img {
          width: 130px;
          height: 130px;
        }

        .ring1 {
          width: 140px;
          height: 140px;
        }

        .ring2 {
          width: 160px;
          height: 160px;
        }

        h1 {
          font-size: 1.6rem;
          margin-top: 25px;
        }

        h2 {
          font-size: 0.9rem;
        }

        .course-box {
          padding: 14px 12px;
          font-size: 1rem;
        }

        .stats {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 8px;
        }

        .stat-card {
          padding: 8px 12px;
          font-size: 0.85rem;
          flex: 1 1 auto;
          min-width: 80px;
          max-width: 120px;
        }

        .stat-card strong {
          font-size: 1.1rem;
        }

        .stat-card span {
          font-size: 0.7rem;
        }

        .loading-text {
          font-size: 0.8rem;
        }

        .footer {
          font-size: 0.8rem;
        }
      }

      @media (max-width: 360px) {
        .container {
          width: 98%;
          padding: 0 5px;
        }

        h1 {
          font-size: 1.3rem;
        }

        h2 {
          font-size: 0.8rem;
        }

        .course-box {
          font-size: 0.85rem;
          padding: 12px 8px;
        }

        .stat-card {
          min-width: 70px;
          padding: 6px 8px;
        }

        .badge {
          font-size: 0.7rem;
          padding: 4px 10px;
          white-space: normal; /* allow badge text to wrap */
        }
      }

      /* Fix for badge on small screens */
      .badge {
        display: inline-block;
        padding: 6px 18px;
        border-radius: 50px;
        background: rgba(255, 255, 255, 0.08);
        font-size: 0.85rem;
        font-weight: 500;
        color: #dbeafe;
        margin-bottom: 10px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
      }

      /* Stats row - ensure wrapping */
      .stats {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin: 20px 0;
      }

      .stat-card {
        background: rgba(255, 255, 255, 0.06);
        padding: 10px 18px;
        border-radius: 50px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
      }

      .stat-card strong {
        font-size: 1.3rem;
        color: white;
      }

      .stat-card span {
        font-size: 0.85rem;
        color: #dbeafe;
        opacity: 0.9;
      }

      /* Ensure text doesn't overflow anywhere */
      * {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      /* Fix for the loading message */
      .loading-message {
        font-size: 10px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
      }