/* Fix for navigation bar covering content headings */

/* Add proper padding to all main section containers */
main, 
.section-content, 
.login-section, 
.register-section, 
.contact-section {
    padding-top: 80px !important; /* Reduced padding to move content closer to navbar */
}

/* Additional padding for specific sections that might need it */
#hero {
    padding-top: 0 !important; /* Hero already has full viewport height and centers content */
}

/* Ensure h2 elements have proper visibility */
h2 {
    margin-top: 0; /* Reset any margins that might push content into the navbar */
    padding-top: 10px; /* Small padding to ensure it's not directly against the navigation */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    main, 
    .section-content, 
    .login-section, 
    .register-section, 
    .contact-section {
        padding-top: 70px !important; /* Slightly smaller padding on mobile */
    }
}

/* This CSS file adds padding to the main sections to prevent content from being hidden by the fixed navigation bar */

main {
    padding-top: 80px; /* Add padding to push content down below the navigation bar */
}

.login-section, 
.section-content,
main > section {
    padding-top: 40px; /* Additional top padding for sections with h2 headings */
}

/* Ensure h2 elements are visible */
h2 {
    margin-top: 20px;
    padding-top: 20px;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    main {
        padding-top: 70px; 
    }
    
    .login-section, 
    .section-content,
    main > section {
        padding-top: 30px;
    }
    
    h2 {
        margin-top: 15px;
        padding-top: 15px;
    }
}