/* 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;
        left:52%;
    }
}

@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;
    }
}