:root {
    --bs-primary: #1c498e;
    color-scheme: light only;
  }
.text-primary{
    color: var(--bs-primary) !important;
}
.btn-primary{
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.navbar-img{
    height: 120px;
    -webkit-transition: height .5s, line-height .5s; /* Safari */
    transition: height .5s, line-height .5s;
    
}
header.scrolled .navbar-img{
    height: 50px;
}
header.navbar{
    background-color: rgba(255, 255, 255, 0.8);
}
header.navbar.scrolled{
    background-color: rgba(255, 255, 255);
}

.nav-link {
    color: var(--bs-primary);
    font-size: 1.2em;
}

.jumbo{
    background-image: url(/images/all_u1.jpg);
    min-height: 100vh;
    padding-top: 200px;
    background-repeat: no-repeat;
    background-size: auto;
}
.card-img{
    position: relative;
}
.card-img img{
    object-fit: cover;
}
.can-order{
    position: absolute;
    right: 20%;
    bottom: 0;
    z-index: 1;
    width: 65px;
    height: 65px;
    background-color: var(--bs-primary);
}
.can-order div{
    font-size: 45px;
}
.contact-table th{
    text-align: end;
    padding-right: 20px;
}
.contact-table td{
    text-align: start;
    padding-left: 20px;
}
.card-img{
    text-align: center;
}
#program .h3{
    font-size: larger;
    margin-bottom: 20px;
}
#program .list-group-item{
    padding-top: 30px;
    padding-bottom: 30px;
}

@media (max-height: 699.9px) {
    .jumbo{
        background-position: top 45% right 50%;
    }
}
@media (max-height: 500px) {
    .jumbo{
        background-position: top 40% right 50%;
    }
}
@media (min-height: 700px) {
    @media (max-width: 850px) {
        .jumbo{
            background-position: top -100px right 50%;
        }
    }
    @media (min-width: 850.1px) {
        .jumbo{
            background-position: top 45% right 50%;
        }
    }
}
@media (min-height: 800px) {
    .jumbo{
        background-position: top -50px right 50%;
    }
}

/* // Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... } */