@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

body {
    font-family: "Roboto", sans-serif !important;
}

/* overide bootstrap*/
.container-fluid {
    max-width: 1680px !important;
}

h1 {
    font-size: 40px !important;
}

h4 {
    font-size: 20px !important;
}

p {
    font-size: 16px !important;
}

.bg-red {
    background-color: #d2222d !important;
}

.text-red {
    color: #d2222d !important;
}

.bg-hover-red:hover {
    background-color: #a8151c !important;
    color: white !important;
}

.bg-yellow {
    background-color: #ffbf00 !important;
}

.text-yellow {
    color: #ffbf00 !important;
}

.bg-hover-yellow:hover {
    background-color: #ffd147 !important;
    color: white !important;
}

.bg-green {
    background-color: #238823 !important;
}

.bg-hover-green:hover {
    background-color: #007000 !important;
}

.text-yellow {
    color: #ffbf00 !important;
}

@media only screen and (max-width: 577px) {
    h1 {
        font-size: 25px !important;
    }
}

@media only screen and (min-width: 768px) {
    h1 {
        font-size: 35px !important;
    }
}

@media only screen and (min-width: 769px) {
    h1 {
        font-size: 40px !important;
    }
}

.footer-bg-red-gradient {
    background: #d2222d;
    background: linear-gradient(90deg, #d2222d 0%, #701519 100%);
    /* background: -moz-linear-gradient(90deg, #d2222d 0%, #a8151c 100%);
  background: -webkit-linear-gradient(90deg, #d2222d 0%, #a8151c 100%); */
}

/* navbar */

.navbar-brand {
    padding-bottom: 12px !important;
}

.navbar-brand:hover {
    color: #ffbf00 !important;
}

.navbar-toggler {
    border: none !important;
}

.navbar-toggler:focus {
    box-shadow: none !important;
}

.dropdown-icon {
    width: 25px !important;
    margin-bottom: 3px;
}

.dropdown-language {
    font-size: 14px !important;
}

.dropdown-menu[data-bs-popper] {
    min-width: 80px !important;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: #ffbf00 !important;
    color: white !important;
}

@media only screen and (max-width: 991px) {
    .offcanvas-body {
        padding-left: 30px !important;
    }

    .navbar-brand {
        padding-bottom: 0px !important;
    }
}

.offcanvas-title {
    color: black;
    text-decoration: none;
}

.offcanvas-title:hover {
    color: #ffbf00;
}

.mobile-nav-close-btn {
    border: none !important;
    background: none;
    width: 30px;
    font-size: 25px;
}

.mobile-nav-close-btn:hover {
    color: #ffbf00;
}

a.nav-link:hover {
    color: #ffbf00;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: #ffbf00 !important;
}

/* owl */
.owl-carousel .owl-item img {
    /* width: 140px !important; */
}

.owl-theme .owl-dots .owl-dot span {
    background-color: #ffbf00 !important;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background-color: #ffbf00 !important;
}

.owl-prev span,
.owl-next span {
    color: #fff;
}

.owl-theme .owl-nav [class*="owl-"]:hover {
    background: none !important;
}

.owl-prev span:hover,
.owl-next span:hover {
    color: #ffbf00;
}

.owl-prev,
.owl-next {
    position: absolute;
    top: 0;
    height: 100%;
}

.owl-prev {
    left: 7px;
}

.owl-next {
    right: 7px;
}

/* slider banner */
.carousel-indicators [data-bs-target] {
    width: 10px !important;
    height: 10px !important;
    border-radius: 100%;
}

.carousel-image {
    height: 550px;
    object-fit: cover;
}

.main-section-banner-image {
    height: 400px;
    object-fit: cover;
}

@media only screen and (max-width: 576px) {
    .main-section-banner-image {
        height: 250px !important;
    }
}

@media only screen and (max-width: 768px) and (min-width: 576px) {
    .main-section-banner-image {
        height: 300px !important;
    }
}

.carousel-indicators [data-bs-target] {
    background-color: #ffbf00 !important;
}

@media only screen and (max-width: 577px) {
    .carousel-image {
        height: 250px !important;
    }
}

@media only screen and (max-width: 768px) {
    .carousel-image {
        height: 400px;
    }

    /* next added by kam */
    .owl-dots {
        display: none !important;
    }
}

/* @media (max-width: 768px) {
    .owl-dots {
        display: none;
    }
} */

/* home page  */
/* main image carousel */
.main-image {
    width: 100% !important;
    height: 350px;
    object-fit: cover;
}

@media only screen and (max-width: 577px) {
    .main-image {
        width: 100%;
        height: 100%;
    }
}

@media only screen and (max-width: 768px) and (min-width: 576px) {
    .main-image {
        width: 80%;
        height: 350px;
    }
}

@media only screen and (max-width: 1200px) and (min-width: 992px) {
    .main-image {
        width: 90%;
        height: 350px;
    }
}

/* about page */
/* teacher carousel */
.card-img-top-circle {
    width: 140px;
    height: 140px;
    left: 50%;
    top: -20%;
    transform: translateX(-50%);
    object-fit: cover;
    position: absolute;
    border: 7px;
    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.3);
}

.teacher-card {
    border: none !important;
    border-radius: 30px !important;
    margin-top: 70px;
}

.teacher-card-content {
    margin-top: 30%;
}

@media only screen and (max-width: 479px) {
    .teacher-card-content {
        margin-top: 5rem !important;
    }
}

@media only screen and (max-width: 767px) {
    .teacher-card-content {
        margin-top: 30%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .teacher-card-content {
        margin-top: 35%;
    }
}

.teacher-image {
    width: 140px !important;
}

.fa-quote-left {
    position: absolute;
    left: 0;
    top: 0;
}

.fa-quote-right {
    position: absolute;
    right: 0;
    bottom: 0;
}

/* overview page */
/* our campus */
.campus-image {
    height: 300px;
    object-fit: cover;
}

.campus-carousel-image {
    height: 250px;
    object-fit: cover;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .campus-carousel-image {
        height: 200px;
        object-fit: cover;
    }
}

/* campus carousel */
.fa-angle-right {
    font-size: 2rem;
    color: white;
}

.fa-angle-left {
    font-size: 2rem;
    color: white;
}

.fa-angle-right:hover {
    color: #ffbf00;
}

.fa-angle-left:hover {
    color: #ffbf00;
}

/* our classroom */
.our-classroom-svg {
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center;
}

/* our facilities page */
/* gallery card */
.gallery-card {
    cursor: pointer;
}

.gallery-banner-image {
    height: 250px;
    object-fit: cover;
}