/* === Center the whole block in the middle of the page (not fixed) === */
          .panel-wrap-Lu-down {
            background: linear-gradient(50deg, #363c61, #6d2c2c);
            display: flex;
            align-items: center;      /* vertical centering within the section */
            justify-content: center;  /* horizontal centering */
            min-height: 20vh;         /* puts it roughly in the middle of the page */
            padding: 4px 16px;
              
            /* ADD THESE TWO LINES */
              position: relative;
              z-index: 50;
            }

          /* container with no visual background (per your request) */
          .button-panel-Lu-down {
            position: static;
            display: block;
            max-width: 760px;
            width: 70%;
            background: transparent;
            border: none;
            box-shadow: none;
          }

          /* === Horizontal row that adapts === */
          .button-row-Lu-down {
            display: flex;
            gap: 12px;                /* space between buttons */
            justify-content: center;  /* center the row contents */
            align-items: center;
            flex-wrap: wrap;          /* allows wrapping on narrow screens */
          }

          /* === Buttons with bigger bevel and responsive sizing === */
          .btn-Lu-down-long {
            flex: 1 0 250px; /* grow, shrink, preferred min width The 0px forces them to share the space equally, ignoring text length*/
            max-width: 320px;
 /*           padding: clamp(10px, 1.5vw, 14px) clamp(14px, 2vw, 18px);*/
            font-family: "Poppins", sans-serif;
            font-weight: 500; /* or 600 if you want bolder */
            font-size: clamp(16px, 2.2vw, 24px);
            line-height: 9.6;
            border-radius: 6px;  /* ← bigger bevel; increase to 28px or 32px if you want even rounder */
            border: 0px solid rgba(0,0,0,0.2);
            cursor: pointer;
            transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease, color 0.2s ease;
            background: #363c61;
            color: #d1b994;
          }
          .btn-Lu-down {
            flex: 1 1 200px; /* grow, shrink, preferred min width The 0px forces them to share the space equally, ignoring text length*/
            max-width: 200px;
 /*           padding: clamp(10px, 1.5vw, 14px) clamp(14px, 2vw, 18px);*/
            font-family: "Poppins", sans-serif;
            font-weight: 500; /* or 600 if you want bolder */
            font-size: clamp(16px, 2.2vw, 24px);
            line-height: 9.6;
            border-radius: 6px;  /* ← bigger bevel; increase to 28px or 32px if you want even rounder */
            border: 0px solid rgba(0,0,0,0.2);
            cursor: pointer;
            transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease, color 0.2s ease;
            background: #363c61;
            color: #d1b994;
          }

          .btn-Lu-down-long:hover {
            background: #4153d9;
             color: #fff;
          }
         .btn-Lu-down-long:active {
            transform: translateY(0);
          }

          .btn-Lu-down:hover {
            background: #4153d9;
             color: #fff;
          }
          .btn-Lu-down:active {
            transform: translateY(0);
          }

          /* Accent (Back to Portal) */
          .btn-accent-Lu-down {
            background: #d09b34;
            color: #6d6d6d;
              
          }
          .btn-accent-Lu-down:hover { background: #4153d9; color: #fff;}

          /* Ghost (Go To Top) */
          .btn-ghost-Lu-down {
            background: #536957;
            color: #d1b994;
          }
          .btn-ghost-Lu-down:hover { background: #4153d9; color: #fff; }

          /* === Optional: on very small phones, stack them vertically === */
        /* Mobile size adjustments */
        @media (max-width: 580px) {

          /* Reduce the panel height by lowering button padding */
          .btn-Lu-down {
            padding: 10px 12px !important;     /* shrink height */
            font-size: 14px !important;        /* smaller text */
            border-radius: 8px !important;    /* less tall bevel */
          }
            
            .btn-Lu-down-long {
            padding: 10px 12px !important;     /* shrink height */
            font-size: 16px !important;        /* smaller text */
            border-radius: 8px !important;    /* less tall bevel */
           width: 100% !important;
        max-width: 200px !important; /* Make sure this matches the class above */
        box-sizing: border-box !important;     
          }

          /* If your accent/ghost buttons have different padding, normalize them too */
          .btn-accent-Lu-down,
          .btn-ghost-Lu-down {
            padding: 10px 12px !important;
            font-size: 14px !important;
            border-radius: 6px !important;
          }

          /* Make the container more compact on mobile */
          .button-row-Lu-down {
            gap: 8px !important;               /* less vertical spacing */
          }

          /* If buttons were stacked vertically, keep them slim */
          .panel-wrap-Lu-down {
            padding: 70px !important;
            min-height: 10vh !important;       /* reduce the vertical center space */
          }
        }