/**
 * Custom CSS for Mary's School Portal
 * Overrides and customizations for better layout on large screens
 */

/* Make containers wider on large screens */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px !important;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1400px !important;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1600px !important;
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 90% !important;
  }
}

/* Make container-fluid use more space */
.container-fluid {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

@media (min-width: 1920px) {
  .container-fluid {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
}

/* Reduce excessive margin-auto spacing on large screens */
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 1400px) {
  .mx-auto {
    max-width: 90% !important;
  }
}

/* Application form and contact form specific */
.application-form-card,
.contact-form {
  max-width: 100% !important;
}

@media (min-width: 1200px) {
  .application-form-card,
  .contact-form {
    max-width: 1200px !important;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Content areas */
.contact-area,
.application-area,
.about-area,
.course-area {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1400px) {
  .contact-area,
  .application-area,
  .about-area,
  .course-area {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}