.container {
        display: flex;
        justify-content: center;
        align-items: flex-start; /* Aligns items to the start of the flex container */
        margin-top: 50px;
        min-height: 100vh; /* Minimum height to enable scrolling */
    }

      /* Typography Improvements */
      .left-column h3 {
          font-family: 'Arial', sans-serif; /* A modern, sans-serif font family */
          font-size: 24px; /* A larger size for headers */
          color: #333; /* A dark color for headers for better contrast */
          margin-bottom: 10px; /* Adjust space below headers */
      }

      .left-column p {
          font-family: 'Arial', sans-serif;
          font-size: 16px; /* A comfortable reading size for text */
          line-height: 1.6; /* Improving line spacing for readability */
          color: #555; /* A slightly lighter color than headers for text */
          margin-bottom: 20px; /* Increase bottom margin for paragraphs */
      }

      /* Color Scheme Improvements */
      /* Add a class to the HTML element you want to highlight, e.g., a class="highlight" */
      .left-column .highlight {
          background-color: #f2f4f8; /* A light background color for highlighting sections */
          padding: 15px;
          border-left: 4px solid #007bff; /* A colored border for emphasis */
          margin-bottom: 20px; /* Consistent bottom spacing */
      }

      /* Whitespace and Layout Improvements */
      .left-column {
          padding: 20px; /* More padding for the overall column */
      }

      /* Adding subtle shadows to the titles for depth */
      .left-column h3 {
          text-shadow: 1px 1px 1px rgba(0,0,0,0.1); /* Just a touch of shadow */
      }

      /* If you want to make any links stand out */
      .left-column a {
          color: #007bff; /* Bootstrap's default blue for consistency */
          text-decoration: none; /* Removing underline from links */
      }

      .left-column a:hover {
          text-decoration: underline; /* Underline on hover for indication */
      }

      /* If lists are present */
      .left-column ul {
          list-style-type: none; /* Removing default list style */
          padding-left: 0; /* Removing default padding */
      }

      .left-column li::before {
          content: '•'; /* Custom bullet */
          color: #007bff; /* Bullet color */
          font-weight: bold; /* Making the bullet bold */
          display: inline-block; 
          width: 1em; /* Width of the bullet */
          margin-left: -1em; /* Positioning the bullet */
      }

        .left-column {
            flex: 1; /* Takes up 1 fraction of the available space */
            padding-right: 20px; /* Adds spacing between columns */
        }

        .right-column {
            flex: 1; /* Takes up 1 fraction of the available space */
            flex-direction: column; /* Aligns children in a vertical stack */
            justify-content: center; /* Centers children vertically */
            height: 100vh;
        }



      /* Form Container */
      /* Sticky Form Container */
      .form-container {
          position: -webkit-sticky; /* For Safari browser support */
          position: sticky;
          top: 20px; /* Distance from the top when it starts sticking */
          max-width: 500px;
          margin: 20px auto;
          background: #fff;
          padding: 20px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          z-index: 10; /* Ensures the form stays above other content */
      }
  
      /* Form Styles */
      .form-group {
          margin-bottom: 15px;
      }
  
      .form-group label {
          display: block;
          margin-bottom: 5px;
          color: #333;
      }
  
      .form-group input[type="text"],
      .form-group input[type="tel"],
      .form-group input[type="email"] {
          width: 100%;
          padding: 10px;
          border: 1px solid #ddd;
          border-radius: 4px;
          box-sizing: border-box; /* Make sure padding doesn't affect the total width */
      }
  
      .form-group input[type="text"]:focus,
      .form-group input[type="tel"]:focus,
      .form-group input[type="email"]:focus {
          outline: none;
          border-color: #7a9eb1;
      }
  
      .form-group button {
          width: 100%;
          padding: 10px;
          border: none;
          border-radius: 4px;
          background-color: #333;
          color: white;
          cursor: pointer;
          font-size: 16px;
          transition: background-color 0.3s;
      }
  
      .form-group button:hover {
          background-color: #555;
      }

      .left-column p {
          margin-bottom: 1em;
      }

      .left-column h2 {
          margin-bottom: 0.5em;
      }
      
      .error-message {
        color: #ff0000; /* Red color for error message */
        font-size: 1.3em; /* Adjust font size */
        margin-top: 5px; /* Add some space between input field and error message */
      }
      
      .success-message {
            background-color: #dff0d8; /* Light green background */
            color: #3c763d; /* Dark green text color */
            border: 1px solid #d6e9c6; /* Light green border */
            padding: 15px; /* Padding around the text */
            margin-bottom: 20px; /* Spacing between the message and other elements */
            border-radius: 4px; /* Rounded corners */
        }


      @media (max-width: 768px) {
          .container {
              flex-direction: column; /* Stack columns on small screens */
              display: block;
          }

          .left-column {
              padding-right: 0;
              flex: none; /* Let the columns take their content's width */
          }

          .right-column {
              display: flex;
              flex-direction: column;
              justify-content: center; /* This will vertically center the form in the column */
              align-items: center; /* This will horizontally center the form if needed */
              height: 100vh; /* Adjust the height as needed for your design */
              padding: 20px 0; /* This gives some spacing at the top and bottom */
          }

          .form-container {
              width: 100%; /* This ensures the form takes the full width of the column */
              max-width: 500px; /* Keeps the form from stretching too wide on larger mobile devices */
              margin: 0 auto; /* Centers the form horizontally if it's not as wide as the column */
              align-items: center;
          }
      }