.banners {
    background-color: var(--color-primary);
}
.banners .banner {
    text-align: center;
}
.banners .banner img {
    object-fit: cover;
    width: 100%;
}
.banners .search-banner {
    top: 10%;
}

/* top-news */
#top-news {
    background-color: #D9B98A;
}
#top-news .card {
    background-color: rgba(255, 255, 255, 0.9);
}
#top-news .card .loudspeaker {
    left: -8px;
    right: -8px;
    bottom: -14px;
}
@media(max-width: 991px) {
    #top-news .card .loudspeaker {
        left: 56px;
    }
    #top-news .card .loudspeaker img:nth-child(2) {
        max-width: 150px;
    }
}
#top-news .card .text-title img {
    max-width: 36px;
}

#top-hot-lessons,
#top-highlight-lessons,
#top-schools {
    padding-bottom: 200px;
}
@media(max-width: 991px) {
    #top-hot-lessons,
    #top-highlight-lessons {
        padding-bottom: 70px;
    }
}

/* top-hot-lessons */
#top-hot-lessons {
    background-color: #D9B98A;
    overflow: hidden;
}
#top-hot-lessons .lessons-list {
    background-color: #B98D5D;
    border-radius: 0 0 30px 30px;
}
#top-hot-lessons .title .position-absolute {
    top: 30%;
}
#top-hot-lessons .title .position-relative img {
    bottom: 100%;
    left: 0;
}
#top-hot-lessons .stone {
    bottom: -15px;
    right: -30px;
}

/* top-highlight-lessons */
#top-highlight-lessons {
    background-color: #B98D5D;
}
#top-highlight-lessons .position-relative img {
    bottom: 100%;
}

/* top-schools */
#top-schools {
    background-color: #8B5E34;
}

/* top-resources */
#top-resources {
    background-color: #3D2817;
}

#top-schools .btn-img,
#top-resources .btn-img {
    transition: .2s ease-in;
}
#top-schools .btn-img:hover,
#top-resources .btn-img:hover {
    transform: scale(1.1);
}

/* img-mountains */
.img-mountains {
    bottom: 100%;
}

/* moon object */
img.moon {
    max-width: 300px;
}
img.moon.shake.shake-slow.shake-constant {
    animation-duration: 50s;
}
@media(max-width: 991px) {
    img.moon {
        max-width: 150px;
    }
}
img.moon.moon-01,
img.moon.moon-03 {
    left: 0%;
}
img.moon.moon-02,
img.moon.moon-04 {
    right: 0%;
}
@media(max-width: 450px) {
    img.moon {
        max-width: 100px;
    }
}
img.moon.moon-01 {
    bottom: 30%;
}
@media(max-width: 991px) {
    img.moon.moon-01 {
        bottom: 10%;
    }
}
img.moon.moon-02 {
    bottom: 0% !important;
}
img.moon.moon-03 {
    top: -20%;
}
@media(max-width: 991px) {
    img.moon.moon-03 {
        top: -5%;
    }
}
img.moon.moon-04 {
    bottom: 5%;
}

.tooltip {
    inset: auto auto -100px 0px !important;
    z-index: 1000;
}

.tooltip .tooltip-inner {
    max-width: 500px !important;
    text-wrap: nowrap;
    font-size: 1.1rem;
}