:root {
    --mh-bg: #0a0e14;
    --mh-bg-alt: #0f141d;
    --mh-panel: #131a24ad;
    --mh-panel-2: rgba(255, 255, 255, 0.03);
    --mh-border: rgba(255, 255, 255, 0.08);
    --mh-border-strong: rgba(252, 129, 21, 0.71);
    --mh-text: #e7ecf3;
    --mh-text-dim: #8a94a6;
    --mh-cyan: #ff963f;
    --mh-gold: #d4af5a;
    --mh-gold-soft: #f0d999;
    --mh-green: #38d39f;
    --mh-red: #ff5c7a;
    --mh-radius: 16px;
    --mh-font-head: 'Rajdhani', 'Syne', sans-serif;
    --mh-font-body: 'DM Sans', 'Inter', sans-serif;
    --gold: #feba19;
    --orange: #f2760a;
    --orange-deep: #c93c00;
  }
    body {
      /* height: 100% !important; */
      margin: 0 !important;
      font-family: 'Segoe UI', sans-serif !important;
      background: radial-gradient(1100px 500px at 15% -10%, var(--mh-panel), #0a0e1482 60%), radial-gradient(900px 500px at 100% 0%, rgba(212, 175, 90, 0.10), transparent 55%), url(../../../assets/img/bg.png) center top / cover no-repeat, var(--mh-bg)
    }

    .bubble-container {
      position: fixed !important;
      width: 100% !important;
      height: 100% !important;
      overflow: hidden !important;
      z-index: -1 !important;
    }

      .bubble {
      position: absolute !important;
      border-radius: 50% !important;
      filter: blur(60px) !important;
      opacity: 0.4 !important;
      mix-blend-mode: screen !important;
      animation: floatBubble 25s infinite ease-in-out !important;
    }

    .bubble:nth-child(1) {
      background: #000000 !important;
      top: 10% !important;
      left: 5% !important;
      animation-delay: 0s !important;
    }

    .bubble:nth-child(2) {
      width: 600px !important;
      height: 600px !important;
      background: #000000 !important;
      top: 40% !important;
      left: 60% !important;
      animation-delay: 5s !important;
    }

    .bubble:nth-child(3) {
      width: 500px !important;
      height: 500px !important;
      background: #000000 !important;
      top: 70% !important;
      left: 20% !important;
      animation-delay: 10s !important;
    }

    .bubble:nth-child(4) {
      width: 350px !important;
      height: 350px !important;
      background: #ff9c381a !important;
      top: 30% !important;
      left: 80% !important;
      animation-delay: 15s !important;
    }

    @keyframes floatBubble {
      0% {
        transform: translateY(0px) translateX(0px) scale(1);
      }
      25% {
        transform: translateY(-80px) translateX(40px) scale(1.05);
      }
      50% {
        transform: translateY(-160px) translateX(-60px) scale(1.1);
      }
      75% {
        transform: translateY(-80px) translateX(20px) scale(1.05);
      }
      100% {
        transform: translateY(0px) translateX(0px) scale(1);
      }
    }