body {
    font-family: "Bitter", serif;
    color: rgb(41, 112, 164);
    position: relative;
}

.scrolltop {
    padding-top: 200px;
}

.navbar-brand .img-fluid {  /*modify height of image inside navbar*/
    max-height: 130px;
}

#mainNavbar {
    font-size: 1.2rem;
    font-weight: bold;
    background: whitesmoke;
}

#mainNavbar .navbar-nav > li > .active {
    color: rgb(127, 194, 65);
}

#mainNavbar .nav-link {
    color: rgb(41, 112, 164);
    transition: color 300ms;
    transition: box-shadow 300ms;
}

#mainNavbar .nav-link:hover {    
    color: rgb(127, 194, 65);
    box-shadow: 0 2px rgb(127, 194, 65);
}

.navbarDropdown>a:hover {
    color: rgb(127, 194, 65);
}

#logobrand {
    height: auto;    
}

i {
    margin-right: 3%;
}

#main, #servicesContent, #trainingContent, #contactusContent {
    background-color: rgb(41, 112, 164);
    color: white;    
    font-size: 1.1em;
}

#aboutus, #technology, #products {
    font-size: 1.1em;
}

#giscards .col-md-4 {
    width: 80%;
}


.row .card {
    color: rgb(41, 112, 164);
}

#carouselimg {
    margin: auto;
}

@media (max-width: 1000px) {
    .bg {
        width: 42.5%;
    }
}

@media (max-width: 1500px) {
    #mainNavbar {
        font-size: 1rem;
    }

    #vision {
        font-size: 0.9em;
    }

    .card-body > .card-title {
        font-size: 0.8rem;
    }
}

@media (max-width: 1390px) {
    #mainNavbar {
        font-size: 0.8rem;
    }
}

@media (max-width: 1230px) {
    #mainNavbar {
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    #giscards .col-md-4 {
        height: 60%;
    }
}

@media (max-width: 458px) {
    .navbar-brand {
        width: 70%;
        height: auto;    
    }
}

@media (min-width: 500px) {
    #giscards .col-md-4 {
        width: 55%;
    }    
}