@media (max-width: 767px) { /* Applies to screens smaller than 768px (common breakpoint for mobile) */
            body {
                background-color: #007bff; /* Or your desired background color for mobile */
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh; /* Ensures the body takes full viewport height */
                margin: 0;
                padding: 20px; /* Add some padding around the form */
                box-sizing: border-box; /* Include padding in the element's total width and height */
            }

            .bg-white.rounded-xl.shadow-md {
                width: 100%; /* Make the form take full width on mobile */
                max-width: 400px; /* Optional: set a max-width even on mobile to prevent it from becoming too wide on slightly larger phones */
                border-radius: 0; /* Remove rounded corners for a full-width look */
                box-shadow: none; /* Remove shadow for a flatter look */
                padding: 20px; /* Adjust padding as needed */
            }

            .max-w-md.mx-auto.mt-6 {
                max-width: 100%; /* Ensure inputs take full width of their parent */
                margin-left: 0;
                margin-right: 0;
                text-align: left; /* Align labels to the left */
            }
        }

        .content h1 {
          font-size: 2.25rem;
          font-weight: 700;
          line-height: 1.25;
          margin-bottom: 0.75rem;
          color: #222;
        }
        
        .content h2 {
          font-size: 1.75rem;
          font-weight: 600;
          line-height: 1.3;
          margin-bottom: 0.6rem;
          color: #2a2a2a;
        }
        
        .content h3 {
          font-size: 1.5rem;
          font-weight: 600;
          line-height: 1.35;
          margin-bottom: 0.6rem;
          color: #333;
        }
        
        .content h4 {
          font-size: 1.25rem;
          font-weight: 500;
          line-height: 1.5;
          margin-bottom: 0.6rem;
          color: #444;
        }
        
        .content h5 {
          font-size: 1.125rem;
          font-weight: 500;
          line-height: 1.5;
          margin-bottom: 0.5rem;
          color: #555;
        }
        
        .content a {
          color: #3273dc; /* Bulma’s primary blue */
          text-decoration: underline;
          text-underline-offset: 2px;
          transition: color 0.2s ease;
        }
        
        .content a:hover,
        .content a:focus {
          color: #1d4ed8; /* A deeper blue on hover */
          text-decoration-thickness: 2px;
        }

      
    
      /* Optional: spacing under the top block */
      .content {
        margin-bottom: 2rem;
      }
    
      /* Optional: soften the box for reading feel */
      .box {
        padding: 2rem;
      }