/* Media query for mobile devices (max-width: 768px or less) */
@media (max-width: 768px) {
    #main-header .navbar {
      padding: 0rem; /* override for mobile */
    }
  }
@media (min-width: 1400px) {
    .custom-navbar {
        width: 90%;
        /* width: 85%; */
    }
}

@media (max-width: 1200px) {
    .custom-navbar {
        width: 92%;
    }
}

@media (max-width: 992px) {
    .custom-navbar {
        width: 94%;
        top: 10px;
    }
}
@media (max-width: 576px) {
    .custom-navbar {
        width: 98% !important;
        top: 0px !important;
        border-radius: 8px !important;
        margin-top: .1rem !important;
    }
}
    @media (max-width: 768px) {

        .hero {
            height: 50vh;
            position: relative;
            color: #fff;
        }
    }

    @media (max-width: 768px) {

        .logo-light {
            display: inline-block;
            height: 50px;
        }
    }

    @media (max-width: 767.98px) {
        #main-header.show-white-header {
            background-color: #056A43 !important;
            border-top: none !important;
            box-shadow: none !important;
        }
    }

    @media (max-width: 767.98px) {
        #main-header.scrolled {
            background: #056A43 !important;
            border-top: none !important;
            box-shadow: none !important;
        }
    }
@media (max-width: 768px) {
    .carousel-inner img {
        width: 100%;
        height: 50vh;
        object-fit: cover;
    }
}

@media (max-width: 576px) {
    .school-name-text {
        font-size: 1rem;
    }

    .school-address-text {
        font-size: 0.75rem;
    }

    .logo-circle img {
        width: 60px !important;

    }
    .logo-container {
        position: relative;
        width: 0px;
        height: 40px;
    }
}