@media (min-width: 601px) and (max-width: 1024px) {
    .desktop-navbar-brand{
        display: none;
    }
    .hero-section {
        min-height: 40vh;
    }
    .hero-text h1 {
        font-size: 37px;
    }
    .hero-text h2 {
        font-size: 41px;
    }
    .hero-text p {
        font-size: 20px;
    }
    .hero-image img {
        max-height: 500px;
    }
    .btn-custom {
        margin: 0 auto;
        padding: 15px 45px;
        font-size: 20px;
    }

    .social-icons {
        display: flex;
        justify-content: center;
        margin: 20px !important;
    }

    .social-icons i {
        margin: 8px 0;
        padding: 12px;
    }

    .counter-section{
        margin-top: 20px;
    }
    .counter {
        font-size: 36px;
    }
    .about-me{
        margin-top: -30px;
    }

    .section-title {
        font-size: 30px;
        margin-bottom: -8px;
    }

    .about-line {
        width: 210px;
    }

    .exp-line {
        width: 475px;
    }

    .about-text h5 {
        font-size: 22px;
    }

    .about-text h5 {
        font-size: 18px;
    }

    .about-image img {
        height: 100%;
    }
    /*  ============ education experience =========== */
        .edu-exp-section-title {
            display: flex;
            align-items: center;
            gap: 10px;
        }
    /* ======== testimonial ====== */
        .carousel-inner .row>div {
            flex: 0 0 100%;
            max-width: 100%;
        }
    /* ========= recent works ========== */
    .portfolio-overlay {
        padding: 15px;
    }

    .portfolio-title {
        font-size: 18px;
    }

    .portfolio-desc {
        font-size: 13px;
    }

    .portfolio-arrow {
        font-size: 16px;
        top: 15px;
        right: 15px;
    }
    .recent_work-line {
        width: 350px;
    }

    /* ========= recent bolg ========= */
    .recent-blog-line {
        width: 290px;
    }

    .blog-card .overlay {
        padding: 5px;
    }

    .highlight {
        margin-top: 12px;
    }
    /* ========= contact =========== */
    .contact-line {
        width: 250px;
    }

    .contact-btn-custom {
        font-size: 18px;
        padding: 12px 35px;
    }

    .contact-section h2 {
        font-size: 35px;
    }
}