@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
body {
    background-color: #ffffff;
}

.header {
    background-color: #ffffff;
}

nav {
    background-color: #ffffff;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16);
}

nav ul li {
    margin-right: 20px;
    font-family: 'Lato', sans-serif;
}

.about img,
.about .col-lg-4 {
    margin-bottom: 20px;
}

h1,
h2,
h3,
h5 {
    color: #002e4b;
    font-family: 'Alegreya', serif;
}

h4 {
    color: #155f8f;
    font-family: 'Lato', sans-serif;
}

p,
p ol li {
    color: #00131f;
    font-family: 'Lato', sans-serif;
}

.btn {
    background-color: #057ecd;
    color: #ffffff;
    font-family: 'Lato', sans-serif;
}

.btn:hover {
    color: #ffffff
}

.footer {
    background-color: #001a2b;
    color: #ffffff;
    padding: 20px 0px;
    font-family: 'Lato', sans-serif;
}

footer img {
    margin-right: 10px;
    margin-bottom: 5px;
}

.btm-center-bar:after {
    content: "";
    display: block;
    width: 4em;
    max-width: 70%;
    border-bottom: 0.3em solid #748189;
    margin: 1.3em auto 0;
}

.btm-bar {
    content: "";
    display: block;
    width: 4em;
    max-width: 70%;
    border-bottom: 0.3em solid #748189;
    margin: 1.3em 0;
}

.card {
    border: none;
}

.crdimg1 {
    border: none;
    background-image: url(images/fee_structure.jpg);
    background-size: cover;
    background-position: center;
}

.crdimg2 {
    border: none;
    background-image: url(images/application_download.jpg);
    background-size: cover;
    background-position: center;
}

.crdimg3 {
    border: none;
    background-image: url(images/online_application.jpg);
    background-size: cover;
    background-position: center;
}

.crdimg4 {
    border: none;
    background-image: url(images/documents.jpg);
    background-size: cover;
    background-position: center;
}

.cb1,
.cb2,
.cb3 {
    opacity: 0;
    transition-duration: 1s;
    padding: 100px 5px;
}

.cb4 {
    opacity: 0;
    transition-duration: 1s;
    padding: 84px 5px;
}

.cb1:hover,
.cb2:hover,
.cb3:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.5);
    padding: 100px 5px;
}

.cb4:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.5);
    padding: 84px 5px;
}

.card-title {
    color: #ffffff;
    font-family: 'Alegreya', serif;
}

.cancel_btn {
    background-color: grey;
}

legend {
    font-size: 2px;
}

label {
    font-family: 'Source Sans Pro', sans-serif
}

.facilities ul li {
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    color: #00131f;
    margin: 5px 0px;
}

.facilities_gallery img,
.annual_events img {
    margin-bottom: 20px;
}

#republicday .col-lg-3,
#annualday .col-lg-3,
#independenceday .col-lg-3,
#teachersday .col-lg-3,
#childrensday .col-lg-3,
#talentchampsexpo .col-lg-3,
#yellowday .col-lg-3 {
    margin-bottom: 30px;
}

.gallery .nav-link {
    border: 2px solid #057ecd;
    margin-bottom: 5px;
}

.gallery .nav-item {
    margin: 0px 2px;
}

details {
    margin-bottom: 20px;
}

details>summary {
    list-style-type: '+';
}

details[open]>summary {
    list-style-type: '-';
}

summary {
    background-color: #ececee;
    padding: 10px;
    font-weight: bold;
    font-size: 17px;
    font-family: 'Lato', sans-serif;
    color: #00131f;
}

address {
    padding: 20px 20px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 17px;
    color: #00131f;
}

.contact_links {
    color: #00131f;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
}

.contact_links:hover {
    color: #004673;
    text-decoration: none;
    font-weight: bold;
}

.dropdown-menu li a:active {
    background-color: white;
    font-weight: bold;
}

#carousel_buttons {
    background-color: #004673;
}

@media only screen and (min-width: 1200px) {
    .banner {
        height: 480px;
        background-image: url('images/banner.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding-top: 180px;
    }
}

@media only screen and (max-width: 1200px) {
    .banner {
        height: 350px;
        background-image: url('images/banner.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding-top: 130px;
    }
}