/* ==================== Mobile Device Responsive Start Hear ==================== */
@media screen and (max-width: 576px) {

    body,
    nav,
    .header-text {
        width: 100%;
    }

    .none {
        display: none;
    }

    button {
        padding: 10px 20px 10px 20px;
    }

    header {
        height: auto;
    }

    .header-text,
    nav {
        padding: 10px;
    }

    #circle {
        display: none;
    }

    #bar {
        display: block;
    }

    .nav-ul .text {
        display: none;
    }

    .header {
        flex-direction: column;
    }

    .header-text h1 {
        font-size: 4rem;
        width: auto;
    }

    .img-card-1 {
        width: 9.119rem;
        top: 2.975rem;
        left: 55%;
    }

    .img-card-1 h3 {
        font-size: 1.875rem;
    }

    .img-card-1 p,
    .img-card-2 #text p {
        font-size: 9.8px;
    }

    .img-card-2 {
        left: 0;
        width: 9.119rem;
    }

    .img-card-2 .img {
        display: block;
    }

    .img-card-2 h3 {
        font-size: 1.125rem;
    }

    /* Change Your Habits start hear */
    .habit-container {
        padding-top: 1rem;
    }

    .habit-card {
        grid-template-columns: repeat(1, 1fr);
    }

    /* run extra section start hear */
    .run-container {
        flex-direction: column;
        gap: 1.938rem;
    }

    .run-text h2 {
        font-size: 2rem;
    }

    .run-text button {
        width: 100%;
    }

    .run-img {
        width: 100%;
        height: 100%;
    }


    /* training exercises section start hear */
    .training-exercises-container h2 {
        font-size: 2rem;
    }

    .training-exercises-content-1 {
        grid-template-columns: 1fr 0.9fr;
    }

    .training-exercises-content-2 {
        grid-template-columns: 0.9fr 1fr;
    }

    .exercises-text-1 {
        padding-top: 50%;
    }

    .exercises-text-4 {
        padding-left: 29%;
    }

    .exercises-text-5 {
        padding-top: 50%;
    }

    /* BMI Calculator section start hear */
    .bmi-content {
        flex-direction: column;
        height: 100%;
        width: 100%;
        padding: 2rem 0;
    }

    .bmi-child {
        flex-direction: column;
        gap: 5rem;
    }

    input,
    select {
        width: 100%;
    }

    /* featured section start hear */
    .featured-container {
        margin-top: 3rem;
    }

    .featured,
    .featured-card {
        flex-direction: column;
    }

    .featured-content-1,
    .featured-content-2 {
        width: 100%;
    }
    .featured-content-1 h3{
        font-size: 1.5rem;
    }
    .featured-card img {
        width: 100%;
    }

    /* Meet our term start hear */
    .photo-gallery {
        grid-template-columns: repeat(1, 1fr);
    }

    /* footer section start hear */
    footer {
        height: 100%;
    }

    .footer-container {
        flex-direction: column;
    }

    .footer-section-1 {
        align-items: start;
        justify-content: flex-start;
        margin-right: auto;
    }
}



/* ==================== Table Device Responsive Start Hear ==================== */
@media screen and (min-width:576.1px) and (max-width:976px) {

    body,
    nav,
    .header-text {
        width: 100%;
    }

    .table-none {
        display: none;
    }

    header {
        height: auto;
    }

    .header-text,
    nav {
        padding: 10px;
    }

    .header {
        flex-direction: column;
    }

    /* habit card section start hear */
    .habit-card {
        grid-template-columns: repeat(2, 1fr);
    }

    /* run container section start hear */
    .run-container {
        width: 90%;
    }

    .run-img {
        width: 100%;
    }


    /* training exercises section start hear */
    .training-img-text p {
        font-size: 0.5rem;
        line-height: 120%;
    }

    /* bmi section start hear */
    .bmi-content {
        flex-direction: column;
        height: 100%;
        width: 100%;
        padding: 2rem 0;
    }

    .bmi-child {
        flex-direction: column;
        gap: 5rem;
    }

    input,
    select {
        width: 100%;
    }

    th {
        text-align: left;
    }

    table {
        width: 30rem;
    }

    /* featured section start hear */
    .featured {
        flex-direction: column;
    }

    .featured-content-1,
    .featured-content-2 {
        width: 100%;
    }

    .featured-content-1 h3 {
        font-size: 2.5rem;
    }

    /* Meet our term start hear */
    .photo-card {
        position: absolute;
        bottom: -25%;
        left: 5%;
    }

    /* footer section start hear */
    footer {
        height: 100%;
    }

    .footer-section h1 {
        font-size: 5rem;
    }

    .footer-section p {
        font-size: 1.2rem;
    }

    .footer-container {
        flex-direction: column;
    }

    .footer-section-1 {
        align-items: start;
        justify-content: flex-start;
        margin-right: auto;
    }

    .footer-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-section {
        grid-column: 1/3;
    }
}




/* ==================== Laptop Device Responsive Start Hear ==================== */
@media screen and (min-width:976.1px) and (max-width:1184px) {

    body,
    nav,
    .header-text {
        width: 100%;
    }

    .table-none {
        display: none;
    }

    header {
        height: auto;
    }

    .header-text,
    nav {
        padding: 10px;
    }

    .header {
        flex-direction: column;
    }

    /* Change Your Habits start hear */
    .habit-card .card img {
        border-radius: 50%;
        margin-bottom: 26px;
        background: rgb(34, 34, 34);
        padding: 0.2rem;
    }

    .habit-container .card p {
        font-size: 0.5rem;
    }

    /* run container section start hear */
    .run-container {
        width: 90%;
    }

    .run-img {
        width: 100%;
    }


    /* training exercises section start hear */
    .exercises-text-4 {
        padding-left: 30%;
    }

    .exercises-text-5 {
        padding-left: 5%;
    }



    /* bmi section start hear */
    .bmi-content {
        flex-direction: column;
        height: 100%;
        width: 100%;
        padding: 2rem 0;
    }

    .bmi-child {
        flex-direction: column;
        gap: 5rem;
    }

    input,
    select {
        width: 100%;
    }

    th {
        text-align: left;
    }

    table {
        width: 30rem;
    }

    /* featured section start hear */
    .featured {
        flex-direction: column;
    }

    .featured-content-1,
    .featured-content-2 {
        width: 100%;
    }

    .featured-content-1 h3 {
        font-size: 2.5rem;
    }

    .featured-card {
        gap: 4rem;
    }

    .featured-card h6 {
        font-size: 2rem;
    }

    .featured-card p {
        font-size: 1rem;
    }

    /* footer section start hear */
    footer {
        height: 100%;
    }

    .footer-section h1 {
        font-size: 5rem;
    }

    .footer-section p {
        font-size: 1.2rem;
    }

    .footer-container {
        flex-direction: column;
    }

    .footer-section-1 {
        align-items: start;
        justify-content: flex-start;
        margin-right: auto;
    }

    .footer-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-section {
        grid-column: 1/3;
    }
}