body {
            background-color: #f8f9fa; /* Light gray background */
        }
        .dot {
            border: dashed 3px red;
            border-radius: 10px;
            padding: 15px;
            margin: 10px 0;
        }

        form {
            box-shadow: 0px 0px 25px rgba(0,0,0,0.3);
        }

        input:focus,
        select:focus {
            outline: none;
            box-shadow: none;
        }
        
        .school-header {
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            font-weight: bold;
            color: #333;
        }

        .header-row {
            padding: 15px;
        }

        /* Desktop view: display header elements in a row */
        @media (min-width: 768px) {
            .header-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-align: left;
            }
            .header-row .school-details {
                margin: 0 20px;
            }
        }
        
        /* Mobile view: stack header elements in a column */
        @media (max-width: 767px) {
            .header-row {
                flex-direction: column;
                text-align: center;
            }
            .header-row img {
                margin: 5px auto;
            }
            .header-row .school-details {
                margin-top: 10px;
            }
            .header-row .right-logo {
                order: 3; /* Places the right logo below the text on mobile */
            }
            .header-row .school-details {
                order: 2; /* Places the text in the middle */
            }
            .header-row .left-logo {
                order: 1; /* Places the left logo on top */
            }
        }
        
        /* Center form on larger screens and make it full width on small screens */
        .registration-form-container {
            max-width: 600px;
            margin: auto;
        }