/* ---------------- BODY ---------------- */

body {
  padding-top: 150px  !important;
  margin: 0  !important;
}

/* ---------------- HEADER ---------------- */

header {
    padding: 0 !important;
}

/* ---------------- NAVBAR ---------------- */

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: transform 0.5s ease;
}

.navbar {
    border-radius: 0 !important;
    transition: top 0.3s ease;
}

.main-header.hide {
    transform: translateY(-150px);
}

.main-header.show-navbar-only .top-navbar {
    display: none;
}

.main-header.show-navbar-only .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.navbar.hide-nav {
    transform: translateY(-150px);
}

/* ---------------- HERO ---------------- */
/* Fixing the hero overflow in firefox */

.hero {
    overflow: hidden !important;
    margin-top: 0 !important;
    padding-top: 150px;
}

.hero__shamse {
    top: 6.5rem !important;
}

@media screen and (min-width: 1140px) {
    .hero__content .block__header h2 {
        font-size: 3rem;
    }

    .hero__content .block__header p {
        font-size: 1.8rem;
    }
}

/* ---------------- TOOLTIP ---------------- */

.tooltip {
    opacity: 1 !important;
    text-align: center !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    z-index: 99 !important;
}

/* ---------------- STORIES ---------------- */

.stories {
    z-index: 99 !important;
}

/* ---------------- NOTABLE-STUDENTS ---------------- */

.notable-student {
  height: 100% !important;
  text-align: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.notable-student .card,
.notable-student .card__header,
.notable-student .card__body {
  width: 100% !important;
  min-width: 0 !important;
}

.notable-student .card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.notable-student .card__body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.notable-student .card__body .btn {
  margin-top: auto !important;
}

/* ---------------- Grid ---------------- */

.items-grid {
    gap: 2rem;
}

@media screen and (min-width: 600px) {
    .items-grid {
        grid-template: repeat(6, 1fr) / repeat(2, 1fr);
    }
}

@media screen and (min-width: 961px) {
    .items-grid {
        grid-template: repeat(4, 1fr) / repeat(3, 1fr);
    }
}

@media screen and (min-width: 1200px) {
    .items-grid {
        grid-template: repeat(3, 1fr) / repeat(4, 1fr);
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .container {
        width: unset !important;
    }
}

/* ---------------- COURSE ---------------- /
/ Fixing course card overflowing the container */
.container::before {
    content: unset;
}

.items-grid {
    gap: 2rem;
}

.card {
    justify-content: space-between;
}

.card .card__header,
.card .card__body {
    padding: 0.5rem;
}

.course__header {
    display: block;
    margin-bottom: 1rem;
}

.course__header .course__like {
    display: none;
}

.course__heading {
    font-size: 2.5rem !important;
    line-height: 1.2;
    margin: 0;
}

.course__session-price {
    margin-top: 0;
}

.enroll__btns {
    padding: 1rem 0;
}

.course {
    height: 100% !important;
    text-align: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.course.card {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.course .card__header,
.course .card__body {
    width: 100% !important;
    min-width: 0 !important;
}

.course .card__body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.course .course__content.course__location-date {
    font-size: 1.2rem !important;
}
/* ---------------- Input Group Form  ---------------- */

.input-group__form {
    display: flex;
    white-space: nowrap;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    width: 100%;
}

/* ---------------- Pagination  ---------------- */

.pagination {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: unset !important;
    display: unset !important;
}

.pagination a,
.pagination span {
    background-color: unset !important;
    border: none !important;
    color: #333 !important;
    float: none !important;
    line-height: 30px !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    position: unset !important;
}

.pagination a {
    font-family: "nian" !important;
    font-weight: inherit !important;
}

.pagination span {
    border-radius: none !important;
}

/* ---------------- Bootstrap ---------------- */
/* Fixing some issuses that bootstrap cause */

.pager:after,
.pager:before {
    content: unset !important;
}

.container::before,
.container::after {
    content: unset !important;
}

/* ---------------- User-panel in navbar ---------------- */

.navbar {
    gap: 1rem;
}

.navbar__signin-signup {
    display: flex;
    justify-content: flex-end;
    margin-left: 0;
}

.navbar__signin-signup .user-panel {
    margin-top: 2rem;
    margin-left: -1rem;
}

.navbar__signin-signup .user-panel .user-panel__name {
    display: none;
}

.navbar__signin-signup .user-panel .user-panel__list {
    left: 11px;
}

@media screen and (min-width: 600px) {
    .navbar__signin-signup .user-panel .user-panel__name {
        display: block;
        color: #fff;
        text-align: left;
    }
}

@media screen and (min-width: 600px) and (max-width: 960px) {
    .navbar__toggle {
        flex: 1;
        display: flex;
        justify-content: flex-start;
    }

    .navbar__signin-signup {
        flex: 1;
    }
}

@media screen and (min-width: 961px) {
    .navbar__signin-signup {
        max-width: 180px;
    }
}

@media screen and (min-width: 1140px) {
    .navbar__signin-signup {
        max-width: 250px;
    }
}

@media screen and (min-width: 1280px) {
    .navbar__signin-signup {
        max-width: 350px;
    }
}

/* ---------------- SIGNUP/SIGNIN PAGE ---------------- */

.form-signin-signup__container {
    overflow-y: scroll !important;
}

.iycs-reg-preview {
    max-width: 80% !important;
    margin-top: 15px;
}

.error-message,
#file-name,
.help-block,
.error-summary {
    color: red;
}

.error-summary {
    text-align: right;
    font-size: small;
}

.dropdown-instructor .input-group {
    margin-top: 1.3rem;
}
.search-sort-filter .btn {
    margin-top: 0;
}

header nav.navbar {
    padding: 0 2rem !important;
    top: 0px;
}

/* ---------------Pre-Registration --------------*/

.pre-registration-enroll {
    margin-bottom: 0px;
}

/* --------------- config icon ----------------- */

.widget-config i.config-icon {
    background: #0c606a;
    color: #fff !important;
    padding: 5px 15px 5px;
    border-radius: 15px 0 0 15px;
}

.homeLayout-config-icon {
    border-radius: 0 0 15px 15px !important
}

.top-navbar__number a {
    color:#fff !important;
}

.why-us__text{
    text-align: justify;
    padding-left: 1.5rem;
}

/* course date length fix */
.course__location-date .course__content-date {
    font-size: 1.2rem;
}

.enroll__btns {
    padding: 1rem 0;
}


/* swiperjs */
.slider-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.swiper {
    padding: 10px;
    max-width: 1280px;
}

.swiper-slide {
    height: auto;
}

.swiper-button-next,
.swiper-button-prev {
    color: #00897b;
    width: 44px;
    height: 44px;
    background: #f9fbfd;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 22px;
    font-weight: bold;
}

/*** map ***/
.provinces a path{
    -webkit-transition: 0ms linear !important;
        transition: 0ms linear !important;
}

/* ----------------- OFFICE LIST ----------------- */
/* Adding some space to the bottom of the .items-grid */

.items-grid .card.office-card-item {
    margin-bottom: 5rem;
}

/* ----------------- WHY US ----------------- */
/* Adding a little margin to the why-us text */
.why-us .why-us__text {
    margin-bottom: 2rem;
}

/* ----------------- BLOCK-BOXES ----------------- */
/* Reducing the space between block-boxes component and the faq component */
.block-boxes {
    margin-top: 2rem !important;
}

/* ----------------- BLOCK FAQ ----------------- */
/* Adding some space between the faq and the button */
.block-faq .courses__btn {
    margin-top: 2rem;
}

/* ----------------- QUOTE ----------------- */

.quote {
    margin-bottom: 7rem;
}

/* ----------------- HEADER & HERO ----------------- */
@media screen and (max-width: 960px) {
    .top-navbar {
        display: none !important;
    }
}

body {
    padding-top: 100px !important;
    margin: 0 !important;
}

.hero {
    padding-top: 0 !important;
}

.hero__shamse {
    top: 0 !important;
}

@media screen and (min-width: 961px) {
    body {
        padding-top: 150px !important;
    }
}