body.mobile-nav-active {
  overflow: hidden; /* Prevents the background website from moving */
}

/* BUT ensure the nav inside it stays scrollable */
    body.mobile-nav-active .navmenu {
        pointer-events: auto;
    }
@media only screen and (min-width: 360px) and (max-width: 413px) {
    .header .header-social-links {
        padding-right: 16px !important;
    }
    .navmenu ul {
        list-style: none;
        position: fixed;
        inset: 60px 20px auto 20px;
        max-height: calc(100vh - 90px);
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 10px;
        margin: 0;
        border-radius: 6px;
        background-color: var(--nav-mobile-background-color);
        z-index: 9999;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
        transition: 0.3s;
    }
    .grit-hero {
        padding: 160px 24px 90px !important;
    }

    .grit-framer {
        width: 310px;
        height: 180px;
    }

    .head-pic {
        margin-top: 0rem
    }

    .bg-overlay {
        top: 34rem;
    }

    .services-container {
        gap: 32px;
    }

    .services-section-title-text h2 {
        font-size: calc(1rem *2.25);
    }

    .service-banner {
        height: 194px;
    }

    .services-overview {
        padding: 64px 24px;
    }

    .overview-container {
        flex-direction: column;
        gap: 32px;
    }

    .overview-container-left {
        top: unset;
        flex: none;
        order: 1;
        width: 100%;
        position: relative;
    }

    .overview-container-right {
        flex: none;
        order: 0;
        gap: 32px;
        width: 100%;
    }

    .container-left-img-frame {
        height: 274px;
    }

    .services-pricing {
        padding: 64px 24px;
    }

    .services .services-container {
        gap: 32px;
    }

    .pricing-container {
        gap: 24px;
        width: 100%;
    }

    .pricing-grid {
        flex-direction: column;
        width: 100%;
    }

    .price-container {
        align-self: unset;
        flex: none;
        width: 100%;
    }

    .right-text-title {
        font-size: calc(1rem *1.75);
    }

    .right-text-paragraph {
        font-size: calc(1rem * 1);
    }

    .services-hero-title .services-section-title-text {
        width: 100%;
    }

    .english-program {
        padding: 64px 24px;
    }

        .english-program .head-label {
            gap: 12px;
        }

    .section-title-text h2 {
        font-size: calc(1rem * 2);
    }

    .english-program .grit-service-item {
        align-content: unset;
        align-items: unset;
        display: grid;
        grid-auto-rows: minmax(0px, 1fr);
        grid-template-columns: repeat(1, minmax(50px, 1fr));
    }

    .english-program .service-item-container {
        place-self: start;
        height: 100%;
    }

    .services-item-item {
        flex-direction: column;
        gap: 24px;
        justify-content: flex-start;
        padding: 24px;
        width: 368px;
        will-change: transform;
        box-shadow: 0 5px 25px color-mix(in srgb, var(--default-color), transparent 90%);
        border-radius: 24px;
    }

    .service-item .service-title {
        display: none;
    }

    .service-item .service-item-desc {
        display: none;
    }

    .service-image {
        display: flex;
        height: 100%;
    }

    .service-title-mobile {
        display: flex;
    }

    .english-program .items-grid-card {
        gap: 24px;
        grid-auto-rows: 200px;
        display: grid;
        grid-auto-rows: minmax(0px, 1fr);
        grid-template-columns: repeat(1, minmax(50px, 1fr));
    }

    .item-card-container {
        height: auto;
    }

    .english-program .grit-container {
        gap: 32px;
    }

    .card-item {
        align-content: center;
        align-items: center;
        gap: 20px;
    }

        .card-item .card-text-title h3,
        .card-item .card-text-desc {
            text-align: center !important;
        }

    .make-gap {
        margin-bottom: 20px;
    }

    .tutor {
        background-color: #fffbf7;
        padding: 64px 24px;
    }

    .tutor-box {
        flex-direction: column;
        gap: 32px;
        padding: 0px;
        will-change: unset;
        background-color: #fffbf7;
    }

    .tutor-box-left {
        align-self: unset;
        aspect-ratio: 1.05 / 1;
        border-radius: 24px;
        flex: 0 0 auto;
        height: 326px;
        width: 100%;
    }

    .tutor-box-right {
        flex: 0 0 auto;
        gap: 32px;
        padding: 0px;
        width: 100%;
    }

    .tutor-content {
        gap: 24px;
    }

    .tutor-content-container {
        gap: 16px;
    }

    .tutor-content-header {
        gap: 12px;
    }

    .tutor-header-text h2 {
        font-size: calc(1rem * 2);
    }

    .tutor-text-desc p {
        font-size: calc(1rem * 1);
    }

    .tutor-cert {
        gap: 16px;
    }

    .tutor-cert-holder {
        height: 90px;
        width: 120px;
    }

    .step-card {
        padding-right: 0;
        padding-left: 0;
    }

    .step-item {
        padding: 20px;
    }

        .step-item p {
            font-size: calc(1rem * 1);
            text-align: center;
        }

    .trial-less {
        padding: 64px 24px;
    }

    .trial-less-container {
        gap: 32px;
    }

    .trial-content {
        order: 0;
        gap: 24px;
        width: 100%;
    }

    .trial-head-img-mobile {
        min-height: unset;
        width: 100%;
        display: flex;
    }

    .trial-img-mobile {
        min-height: unset;
        width: 100%;
        display: flex;
    }

    .trial-head-img {
        display: none;
    }

    .trial-head-img-text-mobile {
        width: 100%;
    }

    .swiper .swiper-wrapper .swiper-slide .swiper-group::before {
        width: 220px;
        height: 145px;
    }

    .swiper-wrapper .swiper-slide .swiper-group::before {
        top: -2.8em;
    }

    .swiper .swiper-wrapper .swiper-slide .swiper-group {
        font-size: 24px;
    }
    .mobile-nav-active .navmenu {
        position: fixed;
        overflow: scroll;
        inset: -10px -10px -1200px -10px;
        background: rgba(33, 37, 41, 0.8);
        transition: 0.3s;
    }

        .mobile-nav-active .navmenu > ul {
            display: block;
        }
    
}

@media only screen and (min-width: 414px) and (max-width: 768px) and (orientation: portrait) /*Mobile-Display*/ {
    .grit-hero {
        padding: 160px 24px 90px !important;
    }

    .bg-overlay {
        top: 34rem;
    }

    .head-pic {
        margin-top: 0rem
    }

    .grit-framer {
        width: 350px;
        height: 204px;
    }

    .services-container {
        gap: 32px;
    }

    .services-section-title-text h2 {
        font-size: calc(1rem *2.25);
    }

    .service-banner {
        height: 194px;
    }

    .services-overview {
        padding: 64px 24px;
    }

    .overview-container {
        flex-direction: column;
        gap: 32px;
    }

    .overview-container-left {
        top: unset;
        flex: none;
        order: 1;
        width: 100%;
        position: relative;
    }

    .overview-container-right {
        flex: none;
        order: 0;
        gap: 32px;
        width: 100%;
    }

    .container-left-img-frame {
        height: 274px;
    }

    .services-pricing {
        padding: 64px 24px;
    }

    .services .services-container {
        gap: 32px;
    }

    .pricing-container {
        gap: 24px;
        width: 100%;
    }

    .pricing-grid {
        flex-direction: column;
        width: 100%;
    }

    .price-container {
        align-self: unset;
        flex: none;
        width: 100%;
    }

    .right-text-title {
        font-size: calc(1rem *1.75);
    }

    .right-text-paragraph {
        font-size: calc(1rem * 1);
    }

    .services-hero-title .services-section-title-text {
        width: 100%;
    }

    .english-program {
        padding: 64px 24px;
    }

        .english-program .head-label {
            gap: 12px;
        }

    .section-title-text h2 {
        font-size: calc(1rem * 2);
    }

    .english-program .grit-service-item {
        align-content: unset;
        align-items: unset;
        display: grid;
        grid-auto-rows: minmax(0px, 1fr);
        grid-template-columns: repeat(1, minmax(50px, 1fr));
    }

    .english-program .service-item-container {
        place-self: start;
        height: 100%;
    }

    .services-item-item {
        flex-direction: column;
        gap: 24px;
        justify-content: flex-start;
        padding: 24px;
        width: 368px;
        will-change: transform;
        box-shadow: 0 5px 25px color-mix(in srgb, var(--default-color), transparent 90%);
        border-radius: 24px;
    }

    .service-item .service-title {
        display: none;
    }

    .service-item .service-item-desc {
        display: none;
    }

    .service-image {
        display: flex;
        height: 100%;
    }

    .service-title-mobile {
        display: flex;
    }

    .english-program .items-grid-card {
        gap: 24px;
        grid-auto-rows: 200px;
        display: grid;
        grid-auto-rows: minmax(0px, 1fr);
        grid-template-columns: repeat(1, minmax(50px, 1fr));
    }

    .item-card-container {
        height: auto;
    }

    .english-program .grit-container {
        gap: 32px;
    }

    .card-item {
        align-content: center;
        align-items: center;
        gap: 20px;
    }

        .card-item .card-text-title h3,
        .card-item .card-text-desc {
            text-align: center !important;
        }

    .make-gap {
        margin-bottom: 20px;
    }

    .tutor {
        background-color: #fffbf7;
        padding: 64px 24px;
    }

    .tutor-box {
        flex-direction: column;
        gap: 32px;
        padding: 0px;
        will-change: unset;
        background-color: #fffbf7;
    }

    .tutor-box-left {
        align-self: unset;
        aspect-ratio: 1.05 / 1;
        border-radius: 24px;
        flex: 0 0 auto;
        height: 326px;
        width: 100%;
    }

    .tutor-box-right {
        flex: 0 0 auto;
        gap: 32px;
        padding: 0px;
        width: 100%;
    }

    .tutor-content {
        gap: 24px;
    }

    .tutor-content-container {
        gap: 16px;
    }

    .tutor-content-header {
        gap: 12px;
    }

    .tutor-header-text h2 {
        font-size: calc(1rem * 2);
    }

    .tutor-text-desc p {
        font-size: calc(1rem * 1);
    }

    .tutor-cert {
        gap: 16px;
    }

    .tutor-cert-holder {
        height: 90px;
        width: 120px;
    }

    .step-card {
        padding-right: 0;
        padding-left: 0;
    }

    .step-item {
        padding: 20px;
    }

        .step-item p {
            font-size: calc(1rem * 1);
            text-align: center;
        }

    .trial-less {
        padding: 64px 24px;
    }

    .trial-less-container {
        gap: 32px;
    }

    .trial-content {
        order: 0;
        gap: 24px;
        width: 100%;
    }

    .trial-head-img-mobile {
        min-height: unset;
        width: 100%;
        display: flex;
    }

    .trial-img-mobile {
        min-height: unset;
        width: 100%;
        display: flex;
    }

    .trial-head-img {
        display: none;
    }

    .trial-head-img-text-mobile {
        width: 100%;
    }

    .swiper .swiper-wrapper .swiper-slide .swiper-group::before {
        width: 220px;
        height: 145px;
    }

    .swiper-wrapper .swiper-slide .swiper-group::before {
        top: -2.8em;
    }

    .swiper .swiper-wrapper .swiper-slide .swiper-group {
        font-size: 24px;
    }
    .mobile-nav-active .navmenu {
        position: fixed;
        overflow: scroll;
        inset: -10px -10px -1200px -10px;
        background: rgba(33, 37, 41, 0.8);
        transition: 0.3s;
    }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }

}
@media only screen and (min-width: 780px) and (max-width: 851px) and (orientation: landscape) {
    .navmenu ul {
        list-style: none;
        position: fixed;
        inset: 60px 20px auto 20px;
        max-height: calc(100vh - 90px);
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 10px;
        margin: 0;
        border-radius: 6px;
        background-color: var(--nav-mobile-background-color);
        z-index: 9999;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
        transition: 0.3s;
    }

    .header .header-container {
        margin-left: 39px !important;
        margin-right: 39px !important;
        padding: 10px 5px 10px 15px !important;
    }

    .header .header-social-links {
        padding-right: 24px !important;
    }

    /*.navmenu {
        padding-right: 20px !important;
    }*/

    .grit-hero {
        padding: 160px 24px 90px !important;
    }

        .grit-hero .hero-text .hero-title {
            font-size: 2.4rem !important;
        }

        .grit-hero .hero-text .hero-subtitle {
            font-size: 1.2rem !important;
        }

    .grit-framer {
        width: 708px !important;
        height: 400px !important;
    }

    .bg-overlay {
        top: 30rem !important;
    }

    .services {
        padding: 160px 24px 90px !important;
    }

    .price-card {
        height: 100% !important;
        width: 100% !important;
    }

    .services-container {
        gap: 32px;
    }

    .services-section-title-text h2 {
        font-size: calc(1rem *2.25);
    }

    .service-banner {
        height: 194px;
    }

    .services-overview {
        padding: 64px 24px;
    }

    .overview-container {
        flex-direction: column;
        gap: 32px;
    }

    .overview-container-left {
        top: unset;
        flex: none;
        order: 1;
        width: 100%;
        position: relative;
    }

    .overview-container-right {
        flex: none;
        order: 0;
        gap: 32px;
        width: 100%;
    }

    .container-left-img-frame {
        height: 274px;
    }

    .services-pricing {
        padding: 64px 24px;
    }

    .services .services-container {
        gap: 32px;
    }

    .pricing-container {
        gap: 24px;
        width: 100%;
    }

    .pricing-grid {
        flex-direction: column;
        width: 100%;
    }

    .price-container {
        align-self: unset;
        flex: none;
        width: 100%;
    }

    .right-text-title {
        font-size: calc(1rem *1.75);
    }

    .right-text-paragraph {
        font-size: calc(1rem * 1);
    }

    .services-hero-title .services-section-title-text {
        width: 100%;
    }

    .english-program {
        padding: 64px 24px;
    }

        .english-program .head-label {
            gap: 12px;
        }

    .section-title-text h2 {
        font-size: calc(1rem * 2);
    }

    .english-program .grit-service-item {
        align-content: unset;
        align-items: unset;
        display: grid;
        grid-auto-rows: minmax(0px, 1fr);
        grid-template-columns: repeat(1, minmax(50px, 1fr));
    }

    .english-program .service-item-container {
        place-self: start;
        height: 100%;
    }

    .services-item-item {
        flex-direction: column;
        gap: 24px;
        justify-content: flex-start;
        padding: 24px;
        width: 368px;
        will-change: transform;
        box-shadow: 0 5px 25px color-mix(in srgb, var(--default-color), transparent 90%);
        border-radius: 24px;
    }

    .service-item .service-title {
        display: none;
    }

    .service-item .service-item-desc {
        display: none;
    }

    .service-image {
        display: flex;
        height: 100%;
    }

    .service-title-mobile {
        display: flex;
    }

    .english-program .items-grid-card {
        gap: 24px;
        grid-auto-rows: 200px;
        display: grid;
        grid-auto-rows: minmax(0px, 1fr);
        grid-template-columns: repeat(1, minmax(50px, 1fr));
    }

    .item-card-container {
        height: auto;
    }

    .english-program .grit-container {
        gap: 32px;
    }

    .card-item {
        align-content: center;
        align-items: center;
        gap: 20px;
    }

        .card-item .card-text-title h3,
        .card-item .card-text-desc {
            text-align: center !important;
        }

    .make-gap {
        margin-bottom: 20px;
    }

    .tutor {
        background-color: #fffbf7;
        padding: 64px 24px;
    }

    .tutor-box {
        flex-direction: column;
        gap: 32px;
        padding: 0px;
        will-change: unset;
        background-color: #fffbf7;
    }

    .tutor-box-left {
        align-self: unset;
        aspect-ratio: 1.05 / 1;
        border-radius: 24px;
        flex: 0 0 auto;
        height: 326px;
        width: 100%;
    }

    .tutor-box-right {
        flex: 0 0 auto;
        gap: 32px;
        padding: 0px;
        width: 100%;
    }

    .tutor-content {
        gap: 24px;
    }

    .tutor-content-container {
        gap: 16px;
    }

    .tutor-content-header {
        gap: 12px;
    }

    .tutor-header-text h2 {
        font-size: calc(1rem * 2);
    }

    .tutor-text-desc p {
        font-size: calc(1rem * 1);
    }

    .tutor-cert {
        gap: 16px;
    }

    .tutor-cert-holder {
        height: 90px;
        width: 120px;
    }

    .step-card {
        padding-right: 0;
        padding-left: 0;
    }

    .step-item {
        padding: 20px;
    }

        .step-item p {
            font-size: calc(1rem * 1);
            text-align: center;
        }

    .trial-less {
        padding: 64px 24px;
    }

    .trial-less-container {
        gap: 32px;
    }

    .trial-content {
        order: 0;
        gap: 24px;
        width: 100%;
    }

    .trial-head-img-mobile {
        min-height: unset;
        width: 100%;
        display: flex;
    }

    .trial-img-mobile {
        min-height: unset;
        width: 100%;
        display: flex;
    }

    .trial-head-img {
        display: none;
    }

    .trial-head-img-text-mobile {
        width: 100%;
    }

    .swiper .swiper-wrapper .swiper-slide .swiper-group::before {
        width: 220px;
        height: 145px;
    }

    .swiper-wrapper .swiper-slide .swiper-group::before {
        top: -2.8em;
    }

    .swiper .swiper-wrapper .swiper-slide .swiper-group {
        font-size: 24px;
    }

    .mobile-nav-active .navmenu {
        position: fixed;
        overflow: scroll;
        inset: -10px -40px 0px -70px;
        z-index: 9997;
        background: rgba(33, 37, 41, 0.8);
        transition: 0.3s;
        height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        /* Layout */
        display: block !important;
    }

        .mobile-nav-active .navmenu > ul {
            display: block;
        }
}
/* Mobile Landscape (481px to 767px) */
@media only screen and (min-width: 852px) and (max-width: 915px) and (orientation: landscape) {
    .navmenu ul {
        list-style: none;
        position: fixed;
        inset: 60px 20px auto 20px;
        max-height: calc(100vh - 90px);
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 10px;
        margin: 0;
        border-radius: 6px;
        background-color: var(--nav-mobile-background-color);
        z-index: 9999;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
        transition: 0.3s;
    }

    .header .header-container {
        margin-left: 64px !important;
        margin-right: 64px !important;
        padding: 10px 5px 10px 15px !important;
    }

    .header .header-social-links {
        padding-right: 24px !important;
    }

    /*.navmenu {
        padding-right: 20px !important;
    }*/

    .grit-hero {
        padding: 160px 24px 90px !important;
    }

        .grit-hero .hero-text .hero-title {
            font-size: 2.4rem !important;
        }

        .grit-hero .hero-text .hero-subtitle {
            font-size: 1.2rem !important;
        }

    .grit-framer {
        width: 808px !important;
        height: 481px !important;
    }

    .bg-overlay {
        top: 30rem !important;
    }

    .services {
        padding: 160px 24px 90px !important;
    }

    .price-card {
        height: 100% !important;
        width: 100% !important;
    }

    .services-container {
        gap: 32px;
    }

    .services-section-title-text h2 {
        font-size: calc(1rem *2.25);
    }

    .service-banner {
        height: 194px;
    }

    .services-overview {
        padding: 64px 24px;
    }

    .overview-container {
        flex-direction: column;
        gap: 32px;
    }

    .overview-container-left {
        top: unset;
        flex: none;
        order: 1;
        width: 100%;
        position: relative;
    }

    .overview-container-right {
        flex: none;
        order: 0;
        gap: 32px;
        width: 100%;
    }

    .container-left-img-frame {
        height: 274px;
    }

    .services-pricing {
        padding: 64px 24px;
    }

    .services .services-container {
        gap: 32px;
    }

    .pricing-container {
        gap: 24px;
        width: 100%;
    }

    .pricing-grid {
        flex-direction: column;
        width: 100%;
    }

    .price-container {
        align-self: unset;
        flex: none;
        width: 100%;
    }

    .right-text-title {
        font-size: calc(1rem *1.75);
    }

    .right-text-paragraph {
        font-size: calc(1rem * 1);
    }

    .services-hero-title .services-section-title-text {
        width: 100%;
    }

    .english-program {
        padding: 64px 24px;
    }

        .english-program .head-label {
            gap: 12px;
        }

    .section-title-text h2 {
        font-size: calc(1rem * 2);
    }

    .english-program .grit-service-item {
        align-content: unset;
        align-items: unset;
        display: grid;
        grid-auto-rows: minmax(0px, 1fr);
        grid-template-columns: repeat(1, minmax(50px, 1fr));
    }

    .english-program .service-item-container {
        place-self: start;
        height: 100%;
    }

    .services-item-item {
        flex-direction: column;
        gap: 24px;
        justify-content: flex-start;
        padding: 24px;
        width: 368px;
        will-change: transform;
        box-shadow: 0 5px 25px color-mix(in srgb, var(--default-color), transparent 90%);
        border-radius: 24px;
    }

    .service-item .service-title {
        display: none;
    }

    .service-item .service-item-desc {
        display: none;
    }

    .service-image {
        display: flex;
        height: 100%;
    }

    .service-title-mobile {
        display: flex;
    }

    .english-program .items-grid-card {
        gap: 24px;
        grid-auto-rows: 200px;
        display: grid;
        grid-auto-rows: minmax(0px, 1fr);
        grid-template-columns: repeat(1, minmax(50px, 1fr));
    }

    .item-card-container {
        height: auto;
    }

    .english-program .grit-container {
        gap: 32px;
    }

    .card-item {
        align-content: center;
        align-items: center;
        gap: 20px;
    }

        .card-item .card-text-title h3,
        .card-item .card-text-desc {
            text-align: center !important;
        }

    .make-gap {
        margin-bottom: 20px;
    }

    .tutor {
        background-color: #fffbf7;
        padding: 64px 24px;
    }

    .tutor-box {
        flex-direction: column;
        gap: 32px;
        padding: 0px;
        will-change: unset;
        background-color: #fffbf7;
    }

    .tutor-box-left {
        align-self: unset;
        aspect-ratio: 1.05 / 1;
        border-radius: 24px;
        flex: 0 0 auto;
        height: 326px;
        width: 100%;
    }

    .tutor-box-right {
        flex: 0 0 auto;
        gap: 32px;
        padding: 0px;
        width: 100%;
    }

    .tutor-content {
        gap: 24px;
    }

    .tutor-content-container {
        gap: 16px;
    }

    .tutor-content-header {
        gap: 12px;
    }

    .tutor-header-text h2 {
        font-size: calc(1rem * 2);
    }

    .tutor-text-desc p {
        font-size: calc(1rem * 1);
    }

    .tutor-cert {
        gap: 16px;
    }

    .tutor-cert-holder {
        height: 90px;
        width: 120px;
    }

    .step-card {
        padding-right: 0;
        padding-left: 0;
    }

    .step-item {
        padding: 20px;
    }

        .step-item p {
            font-size: calc(1rem * 1);
            text-align: center;
        }

    .trial-less {
        padding: 64px 24px;
    }

    .trial-less-container {
        gap: 32px;
    }

    .trial-content {
        order: 0;
        gap: 24px;
        width: 100%;
    }

    .trial-head-img-mobile {
        min-height: unset;
        width: 100%;
        display: flex;
    }

    .trial-img-mobile {
        min-height: unset;
        width: 100%;
        display: flex;
    }

    .trial-head-img {
        display: none;
    }

    .trial-head-img-text-mobile {
        width: 100%;
    }

    .swiper .swiper-wrapper .swiper-slide .swiper-group::before {
        width: 220px;
        height: 145px;
    }

    .swiper-wrapper .swiper-slide .swiper-group::before {
        top: -2.8em;
    }

    .swiper .swiper-wrapper .swiper-slide .swiper-group {
        font-size: 24px;
    }

    .mobile-nav-active .navmenu {
        position: fixed;
        overflow: scroll;
        inset: -10px -70px 0px -70px;
        z-index: 9997;
        background: rgba(33, 37, 41, 0.8);
        transition: 0.3s;
        height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        /* Layout */
        display: block !important;
    }

        .mobile-nav-active .navmenu > ul {
            display: block;
        }
}
/* smallest phone */
@media only screen and (min-width: 667px) and (max-width: 760px) and (orientation: landscape) {
    .header .header-container {
        margin-left: 60px;
        margin-right: 415px;
        padding: 10px 5px 10px 15px;
    }

    .grit-hero {
        padding: 180px 24px 120px;
    }

    .grit-framer {
        width: 616px;
        height: 345px;
    }

    .head-pic {
        margin-top: 0rem;
    }

    .bg-overlay {
        top: 31rem;
    }
    .navmenu ul {
        list-style: none;
        position: fixed;
        inset: 60px 20px auto 20px;
        max-height: calc(100vh - 0px);
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 10px;
        margin: 0;
        border-radius: 6px;
        background-color: var(--nav-mobile-background-color);
        z-index: 9999;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
        transition: 0.3s;
    }
    .mobile-nav-active .navmenu {
        position: fixed;
        overflow: scroll;
        inset: -10px -110px 0px -60px;
        z-index: 9997;
        background: rgba(33, 37, 41, 0.8);
        transition: 0.3s;
        height: 200vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        /* Layout */
        display: block !important;
    }

        .mobile-nav-active .navmenu > ul {
            display: block;
        }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Your CSS here */
    .header .header-container {
        margin-left: 20px;
        margin-right: 310px;
        padding: 10px 5px 10px 15px;
    }
    .grit-hero {
        padding: 180px 24px 120px;
    }
    .grit-framer {
        width: 750px;
        height: 450px;
    }
    .head-pic {
        margin-top: 0rem;
    }
    .bg-overlay {
        top: 35rem;
    }
    .mobile-nav-active .navmenu {
        position: fixed;
        overflow: scroll;
        inset: -10px -70px 0px -70px;
        z-index: 9997;
        background: rgba(33, 37, 41, 0.8);
        transition: 0.3s;
        height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        /* Layout */
        display: block !important;
    }

        .mobile-nav-active .navmenu > ul {
            display: block;
        }
}
/* Tablet Landscape (1025px to 1280px) */
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
    /* Your CSS here */
}
/* Small Laptops (1281px to 1440px) */
@media only screen and (min-width: 1281px) and (max-width: 1440px) {
    /* Your CSS here */
}