/* Adjust the logo's margin to reduce space above and below */
.logo {
    display: block;
    margin: 10px auto; /* Reduced margin, adjust to taste */
    width: 300px; /* Maintain logo width */
    height: auto; /* Keep aspect ratio */
}

/* Tighten up the container's padding and adjust other properties as needed */
.container {
    max-width: 800px; /* Container width */
    margin: auto; /* Centering the container */
    padding: 10px; /* Reduced padding for a tighter layout */
    background-color: #f9f9f9; /* Background color */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

/* Ensure form titles and inputs are closer together */
h2 {
    margin-top: 0; /* Remove top margin to pull form elements closer */
    margin-bottom: 20px; /* Space between title and first input */
}

/* Form fields styling to minimize excessive space */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    margin-bottom: 10px; /* Smaller bottom margin */
    padding: 8px; /* Comfortable text padding */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 4px; /* Rounded edges */
}

/* Adjust checkbox spacing */
.checkbox-group {
    margin-bottom: 5px; /* Reduced space between checkboxes */
}

/* Responsive adjustments for the subject container */
#subjectsContainer {
    gap: 10px; /* Reduced gap between items */
}

/* Media Queries adjustments for responsiveness */
@media (max-width: 992px) {
    #subjectsContainer {
        grid-template-columns: repeat(3, 1fr); /* Three columns for medium screens */
    }
}

@media (max-width: 768px) {
    #subjectsContainer {
        grid-template-columns: repeat(2, 1fr); /* Two columns for small screens */
    }
}

@media (max-width: 480px) {
    #subjectsContainer {
        grid-template-columns: 1fr; /* Single column for extra small screens */
    }
}