@media (max-width: 1300px) {
    .primary_btn {
        padding: 17px 45px;
        max-width: 190px;
        max-height: 45px;
        width: 100%;
        height: 100%;
        font-weight: 600;
        font-size: 16px;
    }

    .subbadge_hero {
        gap: 7px;
        font-weight: 600;
        font-size: 18px;
    }

    .hero_title {
        font-size: 50px;
        line-height: 60px;
    }

    .hero_desc {
        font-size: 18px;
        line-height: 28px;
    }
}

@media (max-width: 1200px) {
    .subbadge_hero {
        font-size: 16px;
    }

    .hero_title {
        font-size: 40px;
        line-height: 40px;
    }

    .hero_desc {
        font-size: 16px;
        line-height: 22px;
    }

    .hr_section {
        padding: 2rem 0 !important;
    }
}

@media (max-width: 991px) {
    .btn_login {
        font-size: 20px;
        padding: 0.5rem;
        width: 40px;
        height: 40px;
        color: var(--white_color) !important;
        border-radius: calc(var(--radius) * 1.1);
        border-width: 1px;
        background: linear-gradient(180deg, var(--accent_color) 0%, var(--third_color) 100%);
    }

        .btn_login i {
            line-height: 0.3rem;
        }

        .btn_login span {
            display: none;
        }

    #navbar_content:not(.show) {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        transform: translateX(-100%);
        top: 0;
        height: 100vh;
        overflow: auto;
    }

    #navbar_content.collapse_content_shadow:not(.show) {
        display: flex;
        transform: translateX(-100%);
        height: 100vh;
        overflow: auto;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: #000000cc;
    }

    #navbar_content.collapse_content_shadow {
        display: flex !important;
        position: fixed;
        height: 100%;
        width: 100%;
        transition: transform 0.4s, visibility 0.4s;
        will-change: transform, visibility;
        background: #000000cc;
        overflow: auto;
        overflow-x: hidden !important;
        left: 0;
        transform: translateX(0);
        padding: 1rem;
        z-index: 99;
    }

    #navbar_content {
        /* display: block !important; */
        flex-direction: column;
        position: fixed;
        top: 0;
        width: 320px;
        transition: transform 0.4s, visibility 0.4s;
        will-change: transform, visibility;
        background: var(--surface_color);
        height: 100vh;
        overflow: auto;
        overflow-x: hidden !important;
        left: 0;
        transform: translateX(0);
        z-index: 99;
        padding: 1rem 1rem 1rem;
    }

        #navbar_content.navbar_collapse_shadow {
            width: 100%;
            background: #04233ed8;
            z-index: 99;
        }

    .nav-item {
        width: 100%;
    }

    .nav_item {
        border-bottom: 1px solid var(--border_color);
        justify-content: space-between;
    }

    .navbar-toggler {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        color: var(--white_color);
        padding: 8px;
        border: 1px solid var(--accent_color);
        border-radius: calc(var(--radius) * 1.1);
        box-shadow: none !important;
        transition: var(--transition);
        background: linear-gradient(135deg, var(--primary_color), var(--accent_color));
    }

    .btnnav_close {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 30px;
        height: 30px;
        z-index: 9;
        border-color: var(--red_color);
        color: var(--white_color);
        background: var(--red_color);
    }

        .btnnav_close i,
        .navbar-toggler i {
            line-height: 0.3rem !important;
        }

    .drop_menu {
        transform: none !important;
        left: 0 !important;
    }

    .hero_title {
        font-size: 35px;
        line-height: 35px;
    }

    .title_section {
        font-size: 28px;
    }
}


@media (max-width: 767px) {
    .noran-logo {
        max-width: 100px;
    }

    .hero_title {
        font-size: 35px;
        line-height: 102%;
    }

    .title_section,
    .ready_begin .ready_begin_content h4,
    .blogDetais_content h2 {
        font-size: 25px;
    }

    .banner_section .container {
        padding: 40px 0;
    }

    .swiper-pagination {
        gap: 10px;
    }

    .stats_section {
        padding: 30px 0;
    }

    .blogDet_image {
        height: 300px;
    }
}


@media (max-width: 575px) {
    .stats_section {
        padding: 15px 0 20px;
    }

    .container_counterBg {
        padding: 30px 10px;
    }

    .card_stats {
        padding: 0 5px;
    }

    .stats_section .title_stats {
        font-size: 20px;
    }

    .stats_section .desc_content {
        font-size: 12px;
    }

    .title_section, .ready_begin .ready_begin_content h4,
    .blogDetais_content h2 {
        font-size: 20px;
    }

    .section_descon {
        font-size: 16px;
    }
}

@media (max-width: 567px) {
    .hr_section {
        padding: 1.3rem 0 !important;
    }

    .banner_section .subtitle_banner {
        font-size: 25px;
    }
}


@media (max-width: 400px) {
    .btns_hero {
        flex-wrap: wrap;
    }
}