.container-fluid {
    max-width: 1680px !important;
}

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

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

p {
    font-size: 16px !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;
    }
}

.bg-dark-red {
    background-color: #660708 !important;
    color: white !important;
}

.bg-hover-dark-red:hover {
    background-color: #a4161a !important;
}

.bg-light-red {
    background-color: #a4161a !important;
    color: white !important;
}

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

.navbar-brand:hover {
    color: #660708 !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: #a4161a !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: #660708;
}

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

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

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

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

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

.carousel-image {
    filter: brightness(70%);
    height: 550px;
    object-fit: cover;
}

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

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

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

/* discover */
.discover-card {
    border-radius: 0 !important;
    border: none !important;
}

.discover-image {
    height: 430px;
    object-fit: cover;
    filter: brightness(80%);
}

.discover-position-card {
    width: 480px !important;
    position: absolute !important;
    bottom: 30px !important;
    right: 0px !important;
    background: rgba(179, 110, 110, 0.8) !important;
}

@media only screen and (max-width: 600px) {
    .discover-position-card {
        width: 280px !important;
        bottom: 15px !important;
    }

    .discover-image {
        height: 320px;
    }
}

/* about */
.about-image {
    height: 100%;
    object-fit: cover;
}

/* teacher */
.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%;
}

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

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

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

/* photo slide */
.photo-slide {
    height: 550px;
    object-fit: cover;
    border-bottom-left-radius: 200px;
    border-bottom-right-radius: 200px;
    filter: brightness(70%);
}

@media only screen and (max-width: 577px) {
    .photo-slide {
        height: 250px !important;
        border-bottom-left-radius: 100px;
        border-bottom-right-radius: 100px;
        filter: brightness(100%);
    }
}

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

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

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

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

/* about */
.about-section {
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    overflow: hidden;
}

@media only screen and (max-width: 577px) {
    .about-section {
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
    }
}

/* gallery */
.gallery-image {
    width: 100%;
    object-fit: cover;
}

/* pagination */
.pagination-nav {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

/* about slide */
.about-slide {
    height: 550px;
    object-fit: cover;
}

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

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

/* building */
.building-image {
    width: 100% !important;
    object-fit: cover;
}

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

@media only screen and (max-width: 768px) and (min-width: 576px) {
    .building-image {
        width: 80%;
        /* height: 260px; */
    }
}

@media only screen and (max-width: 1200px) and (min-width: 992px) {
    .building-image {
        width: 90%;
        /* height: 260px; */
    }
}

@media only screen and (max-width: 577px) {
    .overview-image {
        height: 230px;
        object-fit: cover;
    }
}

@media only screen and (max-width: 768px) and (min-width: 576px) {
    .overview-image {
        height: 300px;
        object-fit: cover;
    }
}

/* school facilities card */

.facilities-card-image {
    width: 100px !important;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin: auto;
}

/* classroom */
.classroom-image {
    width: 240px;
    /* height: 260px; */
    object-fit: cover;
}

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

@media only screen and (max-width: 768px) and (min-width: 576px) {
    .classroom-image {
        width: 80%;
        /* height: 260px; */
    }
}

@media only screen and (max-width: 1200px) and (min-width: 992px) {
    .classroom-image {
        width: 90%;
        /* height: 260px; */
    }
}

/* core value */
.core-value-image {
    width: 5rem;
    /* height: 250px !important; */
    object-fit: contain !important;
    background-color: white;
    padding: 1rem;
    border-radius: 50%;
    margin: auto;
}

/* contact map */
.fa-square-facebook {
    font-size: 1.5rem;
}

.contact-map {
    height: 400px !important;
}

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

.social-button {
    background-color: #1877f2;
    opacity: 0.7;
}

.social-button:hover {
    opacity: 1;
}

@media only screen and (max-width: 768px) {
    .social-button {
        opacity: 1;
    }
}

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

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

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

.owl-carousel {
    .owl-stage {
        display: flex;
    }

    .owl-item {
        display: flex;
        flex: 1 0 auto;
    }
}

/* footer */
.quick-navigation {
    width: 17rem;
}