/* ========== Small Desktop / Laptop (1025px → 1200px) ==========
@media screen and (max-width: 1200px) {
    /* styles */


/* ========== Laptop (993px → 1024px) ========== */
@media screen and (max-width: 1024px) {
    /* styles */
}

/* ========== Small Laptop / Large Tablet (769px → 992px) ========== */
@media screen and (max-width: 992px) {

    .banner-img .tooltip-1 {
        position: absolute;
        right: -3%;
        top: 10%;
    }

    .banner-img .tooltip-2 {
        position: absolute;
        bottom: 26%;
        left: -7%;
    }

    .banner-content .white-btn {
        margin-top: 12px;
    }

    .habits-container .habits-img-box {
        grid-template-columns: repeat(2, 1fr);
    
    }

    .runs-content .runs-btn {
        padding: 8px 70px;
    }
}

/* ========== Tablet (641px → 768px) ========== */
@media screen and (max-width: 768px) {
    .banner-container {
        flex-direction: column;
    }

    .banner-content {
        margin-top: 40px;
    }

    .banner-img {
        margin-top: 50px;
        width: 100%;
    }

    .runs-container .runs-img {
        max-width: 325px;
        width: 100%;
        height: 236px;
    }

    .runs-container .runs-img img {
        width: 100%;
        height: 100%;
        padding-right: 4px;
    }

    .runs-container .runs-img {
        padding-right: 0px;
    }

    .runs-container .runs-content {
        padding: 29px 13px;
    }

    .training-box .box-4 .box4-info {
        top: 70%;
        left: 8%;
    }

    /* footer area */
    .footer-container {
        flex-direction: column;
    }

    .footer-about {
        width: 100%;
    }

    .footer-social {
        width: 100%;
        padding-right: 120px;
    }
}

/* ========== Large Mobile / Small Tablet (577px → 640px) ========== */
@media screen and (max-width: 640px) {
    .runs-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .runs-container .runs-img img {
        width: 100%;
        height: 100%;

    }

    .training-box .box-4 .box4-info {
        top: 70%;
        left: 8%;
    }

    /* ---footer area */
    .footer-social {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 0;
        row-gap: 20px;
    }

    .footer .copyright {
        line-height: 30px;
    }

}

/* ========== Mobile (415px → 576px) ========== */
@media screen and (max-width: 576px) {
    .nav-container .menu-icon {
        display: block;
        font-size: clamp(1.75rem, 3vw, 2.25rem);
    }

    .menu .menu-link {
        display: none;
    }

    .nav-container .menu {
        border: none;
    }

    .banner-btn {
        text-align: center;
    }

    .banner-join-btn {
        padding: 14px 18px;
    }

    .banner-content .white-btn {
        padding: 14px 18px;

    }

    .banner-img {
        text-align: center;
    }

    .banner-img .tooltip-2 {
        bottom: 40%;
        left: -3%;
    }

    /* change habit section*/
    .habits-container .habits-img-box {
        grid-template-columns: repeat(2, 1fr);
        place-items: center;
        column-gap: 12px;
        row-gap: 52px;
    }

    /* training exercises section */
    .training-container .training-box {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 200px);
    }

    .training-box .box-1,
    .training-box .box-2,
    .training-box .box-4,
    .training-box .box-5 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .box-3,
    .box-6 {
        display: none;
    }

    /* teams section */
    .teams-container .teams-box {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
    }
}

/* ========== Small Mobile (361px → 414px) ========== */
@media screen and (max-width: 414px) {
    .habits-container .habits-img-box {
        grid-template-columns: repeat(1, 1fr);
        place-items: center;
        gap: 24px;
    }

    .runs-content .runs-btn {
        padding: 8px 44px;
    }
}