/* X-Large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
    :root {
        --font-base: 15px;
    }
}

/* Medium devices (tablets, laptops between 992px to 1200px) */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    :root {
        --font-size--h1: 44px;
        --font-size--h2: 32px;
        --font-base: 15px;
    }

    .hero-banner.hero-banner_v1 {
        padding-top: 100px;
    }

    .hero-banner.hero-banner_v2 {
        padding-top: 150px;
        padding-bottom: 100px;
    }

    .hero-banner .banner-filter-form .btn {
        padding-inline: 0;
    }

    .hero-banner .banner-filter-form .btn span {
        display: none;
    }

    .hero-banner .banner-filter-form .btn i {
        display: inline-block;
    }
}

/* Medium devices (tablets, Between 768px to 992px) */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    :root {
        --font-size--h1: 44px;
        --font-size--h2: 38px;
        --font-size--h3: 22px;
        --font-size--h4: 22px;
    }

    .hero-banner.hero-banner_v1 {
        padding-top: 100px;
    }

    .hero-banner.hero-banner_v2 {
        padding-top: 150px;
        padding-bottom: 100px;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media only screen and (max-width: 767.98px) {

    /* Reset CSS */
    :root {
        --font-base: 15px;
        --font-sm: 12px;
        --font-xsm: 10px;
        --font-lg: 16px;
        --font-size--h1: 36px;
        --font-size--h2: 32px;
        --font-size--h3: 22px;
        --font-size--h4: 22px;
        --font-size--h5: 18px;
        --font-size--h6: 15px;
    }

    .ptb-100 {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .ptb-70 {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .pt-100 {
        padding-top: 70px;
    }

    .pt-70 {
        padding-top: 40px;
    }

    .pt-60 {
        padding-top: 30px !important;
    }

    .pb-100 {
        padding-bottom: 70px;
    }

    .pb-75 {
        padding-bottom: 45px;
    }

    .pb-70 {
        padding-bottom: 40px;
    }

    .pb-60 {
        padding-bottom: 30px !important;
    }

    .pb-30 {
        padding-bottom: 20px !important;
    }

    .px-5 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .px-60 {
        padding-inline: 20px;
    }

    .btn-lg,
    .btn-md {
        padding: 12px 26px;
        font-size: var(--font-base);
    }

    .w-sm-100 {
        width: 100% !important;
    }

    .w-sm-75 {
        width: 100% !important;
    }

    .go-top {
        width: 35px;
        height: 35px;
        font-size: 22px;
    }

    .section-title .title,
    .content-title h2 {
        margin-top: -4px;
    }

    .title-shape {
        display: none;
    }

    .title-md {
        font-size: 22px;
    }

    .hero-banner.hero-banner_v1 {
        padding-top: 70px;
    }

    .hero-banner.hero-banner_v2 {
        padding-top: 130px;
        padding-bottom: 70px;
    }

    .hero-banner.hero-banner_v3 {
        padding-top: 70px;
    }

    .hero-banner .form-wrapper {
        border: none !important;
        border-radius: 0 !important;
        background-color: transparent !important;
    }

    .hero-banner .banner-filter-form .input-group {
        height: 50px;
        line-height: 50px;
        -webkit-padding-start: 15px;
        padding-inline-start: 15px;
        border: 1px solid var(--border-color);
        margin-bottom: 15px;
        background-color: var(--bg-white) !important;
    }

    .hero-banner .banner-filter-form .input-group .nice-select {
        line-height: 48px;
    }

    .hero-banner .banner-filter-form .input-group .vr {
        display: none;
    }

    .feature-area .ratio.ratio-21-8::before {
        padding-bottom: 100%;
    }

    .instructor-area_v1 .card .card-content,
    .instructor-area_v2 .card .card-content {
        width: 100%;
    }

    .spacer {
        padding: 10px 0;
    }

    .tabs-navigation {
        overflow: hidden;
        overflow-x: auto;
    }

    .tabs-navigation .nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow: unset;
    }

    .tabs-navigation .nav li {
        flex: 0 0 auto;
    }

    .footer-area .footer-links {
        gap: 15px;
    }

    .footer-area .footer-widget h5 {
        margin-bottom: 20px;
    }
}

/* Small devices (landscape phones, between 576px to 768px) */