@media (max-width: 1400px) {

}

@media (max-width: 1200px) {
    .service-card {
        margin-bottom: 30px;
        height: 216px;
    }

    .service-card .category-title {
        font-size: 18px;
    }

    .service-link:hover .service-card {
        transform: translateY(-15px);
    }

    .service-link:hover .service-card .overlay .overlay-content {
        transform: translateY(9px);
    }

    .hero-banner h1 {
        font-size: 42px;
    }

    .hero-search {
        padding: 17px;
    }

    .top-bar li > a {
        font-size: 14px;
    }

    .listing-course-title {
        width: 100%;
    }

    .listing-course-details {
        display: none;
    }

    .row.course ul li {
        padding: 0;
    }

    .listing-course-responsive {
        padding: 0 10px;
        margin-bottom: 12px;
    }

    .row.course .course-title {
        padding: 10px 10px 3px 10px;
    }

    .listing-course-responsive {display: block}
}

@media (max-width: 992px) {
    .container {
        max-width: 90%;
    }

    .bg-hero-inner {
        width: 65%;
    }

    .main-bar .navbar-nav li .nav-link {
        text-align: right;
        border-bottom: #e3e3e3 solid 1px;
    }

    .main-bar .navbar-nav li:last-child .nav-link {
        border-bottom: none;
    }

    .archive .container {
        max-width: 100%;
    }

    .menu-image-title-after.menu-image-not-hovered img, .menu-image-hovered.menu-image-title-after .menu-image-hover-wrapper, .menu-image-title-before.menu-image-title {
        padding-right: 0;
    }

    .sidebar-menu .sub-menu > li a {
        padding-left: 33px;
    }

    .sidebar-menu li a {
        font-size: 13px;
    }

    .row.course {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .bg-hero-inner {
        width: 100%;
    }

    .category .right-col {
        padding-left: 15px;
    }

    .category .left-col {
        padding-right: 15px;
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .mob-hide {
        display: none;
    }

    .container {
        max-width: 100%;
    }

    .top-bar .container {
        padding: 0;
    }

    .hero-banner .container,
    .main-bar .container {
        padding-left: 30px;
        padding-right: 30px;
    }

    .bg-hero {
        min-height: 375px;
        background: #F6F6F6 url(../img/hero-banner.png) 75px -32px no-repeat;
    }

    .featured-categories h2 {
        padding: 25px;
        font-weight: bold;
        font-size: 28px;
    }

    .d-none-xs {
        display: none;
    }
}