/* ======== Basic CSS Starts Here ======== */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    outline: none;
    border: none;
    font-family: 'Inter', sans-serif;
    color: white;
}

:root {
    /* ========= Background Color =========; */
    --first-bg-color: black;
    --second-bg-color: rgb(230, 83, 60);
    --third-bg-color: rgb(34, 34, 34);
    /* ========= Font Color =========; */
    --second-font-color: rgba(255, 255, 255, 0.5);
    /* ========= Font Size =========; */
    --font-size-48: 3rem;
    --font-size-36: 2.6rem;
    --font-size-32: 2rem;
    --font-size-24: 1.5rem;
    --font-size-28: 1.7rem;
    --font-size-18: 1.1rem;
    --font-size-15: 1rem;
    --font-size-14: .9rem;
    /* ========= Font Weight =========; */
    --font-weight-900: 900;
    --font-weight-800: 800;
    --font-weight-700: 700;
    --font-weight-600: 600;
    --font-weight-500: 500;
    --font-weight-400: 400;
    --font-weight-200: 200;
    --font-weight-100: 100;
    --line-height-120: 120%;
    --line-height-26: 1.6rem;
    --line-height-22: 1.2rem;
    --second-color: rgba(255, 255, 255, 0.1);
    --first-border-color: rgb(255, 255, 255);
    --first-border-radius: 2.6rem;
    --second-border-radius: 1rem;
    --transition: all 0.3s linear;
    --gap-80: 5rem;
    --gap-32: 2rem;
    --gap-26: 1.6rem;
    --gap-15: .8rem;
    --gap-7: .4rem;
    --gap-5: .2rem;
    --padding-16: 1rem;
    --padding-8: .5rem;
    --padding-7: .4rem;
    --padding-5: .2rem;
}

body {
    background-color: black;
}

.primary__btn {
    padding: .8rem 1.8rem;
    background-color: var(--second-bg-color);
    border-radius: var(--first-border-radius);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-26);
    transition: var(--transition);
    cursor: pointer;
}

.primary__btn:hover {
    background-color: transparent;
    border: 1px solid var(--first-border-color);
}

.transparent__btn {
    background-color: transparent;
    border: 1px solid var(--first-border-color);
}


.transparent__btn:hover {
    background-color: var(--second-bg-color);
    border: none;
}

.title {
    font-size: var(--font-size-48);
    font-weight: var(--font-weight-800);
    line-height: var(--line-height-120);
    text-align: center;
}

.description {
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-26);
    color: var(--second-font-color);
    padding: var(--gap-15) 0;
}

.section__description {
    text-align: center;
    width: 50%;
    margin: 0 auto;
}

.section__margin {
    margin: var(--gap-80) 10rem;
}

/* ======== Basic CSS Ends Here ======== */

/* ======== Header Section Starts Here ======== */

header {
    background: linear-gradient(180.00deg, rgb(17, 17, 17), rgba(119, 119, 119, 0) 100%);
    padding: 1rem 10rem;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-7) 0;
    margin-bottom: var(--margin-bottom);
}

nav ul {
    display: flex;
    align-items: center;
    gap: var(--gap-15);
    border: 1px solid var(--second-color);
    border-radius: var(--first-border-radius);
    padding: var(--padding-7);
    padding-right: var(--padding-16);
    line-height: var(--line-height-120);
}

nav ul li a:hover {
    color: var(--second-font-color);
}

.home {
    background-color: var(--second-bg-color);
    padding: var(--padding-7) 1rem;
    border-radius: var(--first-border-radius);
}

.home:hover {
    background-color: transparent;
}

.logo {
    color: var(--second-bg-color);
    font-size: var(--font-size-36);
    font-weight: var(--font-weight-800);
    font-style: italic;
}

.hamburger {
    display: none;
    font-size: var(--font-size-18);
    cursor: pointer;
}

.banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-15);
}

.banner__contents {
    width: 50%;
}

.banner__title {
    font-size: 4.8rem;
    font-weight: 900;
    line-height: 100%;
    margin-bottom: var(--gap-32);
}

.banner__shape {
    font-family: "Mea Culpa", cursive;
    font-size: 10rem;
    font-weight: 100;
    font-style: italic;
    line-height: 40%;
}

.banner__desc {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-400);
    color: var(--second-font-color);
}

.btn__container {
    display: flex;
    align-items: center;
    gap: var(--gap-15);
    margin-top: var(--gap-26);
}

.banner__img {
    width: 50%;
    height: 520px;
    background-image: url(images/banner.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 10rem 0;
    position: relative;
    margin-top: var(--gap-15);
}

.banner__top__card {
    position: absolute;
    top: 28%;
    left: 60%;
    transform: translateX(-50% -50%);
}

.banner__bottom__card {
    position: absolute;
    bottom: 12%;
    left: 5%;
    transform: translateX(-50% -50%);
}

.banner__card {
    width: fit-content;
    box-sizing: border-box;
    border: 0.70px solid var(--second-color);
    border-radius: 9.07px;
    backdrop-filter: blur(5px);
    background: rgba(48, 48, 48, 0.54);
    padding: var(--padding-8);
}

.banner__card__title {
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-800);
    margin-bottom: var(--gap-5);
}

.banner__card__desc {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-400);
    color: var(--second-font-color);
}

.play__btn {
    width: 30px;
    height: 30px;
    position: relative;
    background-color: var(--second-bg-color);
    border-radius: 100%;
}

.triangle {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid white;
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%) rotate(90deg);
}

.play__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-15);
}

/* ======== Header Section Ends Here ======== */

/* ======== Change Your Habit Section Starts Here ======== */
.change__your__habit__card__box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    gap: var(--gap-15);
    align-items: center;
    margin-top: var(--gap-80);
}

.change__your__habit__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--gap-15);
}

.change__your__habit__card__img {
    border: .1px solid var(--border-color);
    border-radius: 100%;
}

.change__your__habit__card__contents h3 {
    margin-bottom: var(--gap-15);
}

/* ======== Change Your Habit Section Ends Here ======== */

/* ========  Run an Extra Mile Easily Section Starts Here ======== */
.run__an__extra__mile__easily {
    padding: 1rem 1rem 1rem 3rem;
    border-radius: 18px;
    background: var(--third-bg-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.run__an__extra__mile__easily__contents {
    width: 45%;
}

.run__an__easily__extra__mile__contents__title {
    width: 70%;
    text-align: start;
    line-height: 100%;
    margin-bottom: var(--gap-7);
}

.run__an__easily__extra__mile__contents__desc {
    width: 100%;
    padding: var(--gap-32) 0;
}

.run__an__extra__mile__easily__img {
    width: 50%;
}

.run__an__extra__mile__easily__img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--second-border-radius);
}

/* ========  Run an Extra Mile Easily Section Ends Here ======== */

/* ======== Fitness and Blogs Section Starts Here ======== */
.fitness__and__blogs {
    margin: 0 10rem;
}

.fitness__and__blogs__box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-26);
    margin-top: var(--gap-32);
    align-items: center;
}

.fitness__and__blogs__card img {
    width: 100%;
    height: 20rem;
    object-fit: fill;
    border-radius: var(--second-border-radius);
}

.fitness__and__blogs__card {
    display: flex;
    height: fit-content;
    flex-direction: column;
    background: var(--third-bg-color);
    border-radius: var(--second-border-radius);
}

.card__contents {
    padding: var(--padding-16);
    display: flex;
    flex-direction: column;
}

.card__desc {
    font-size: var(--font-size-14);
    font-weight: 300;
}

.card__btn {
    text-align: center;
}

.card__button {
    width: 100%;
    border-radius: var(--second-border-radius);
}

/* ======== Fitness and Blogs Section Starts Here ======== */

/* ======== BMI Calculator Section Starts Here ======== */
.bmi__calculator__section {
    background: var(--third-bg-color);
    padding: 3rem 10rem;
}

.bmi__calculator {
    width: 50%;
    margin: auto;
    padding: var(--gap-80) 0;
}

.bmi__calculator__contents {
    display: flex;
    gap: var(--gap-15);
    justify-content: space-between;
}

.bmi__calculator__title {
    text-align: start;
    margin-bottom: var(--gap-15);
}

.bmi__calculator__chart {
    width: 50%;
}

table {
    width: max-content;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid var(--second-color);
    padding: 10px;
    color: var(--second-font-color);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-400);
}

th {
    color: white;
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-500);
    text-align: start;
}

.bmi__calculator__contents__title {
    margin-bottom: var(--gap-32);
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-900);
    line-height: var(--line-height-120);
}

.bmi__calculator__contents__desc {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-22);
    color: var(--second-font-color);
}

.bmi__calculator__form {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-32);
}

.form__item input,
select {
    border: none !important;
    padding: 10px;
    border-radius: 8px;
    background: var(--second-color);
}

option {
    background-color: #333333;
    padding: 5px;
}

.form__item {
    display: flex;
    gap: var(--gap-7);
    margin-bottom: var(--gap-15);
}

.form__select {
    width: 39%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
}

.activity__factor {
    width: 80%;
    margin-bottom: var(--gap-32);
}

/* ======== BMI Calculator Section Ends Here ======== */

/* ======== Meet Our Team Section Starts Here ======== */
.meet__our__team__card__box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
    gap: var(--gap-15);
    border-radius: 18px;
    background: var(--third-bg-color);
    padding: var(--padding-16);
}

.meet__our__team__container {
    margin-top: var(--gap-32);
}

.meet__our__team__card {
    position: relative;
}

.trainer__info {
    position: absolute;
    bottom: 5%;
    left: 5%;
    transform: translateX(-50% -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-400);
    transition: var(--transition);
}

.trainer {
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-900);
    line-height: var(--line-height-120);
}

.occupation{
    padding: 0;
    margin: 0;
}

.meet__our__team__card img {
    width: 100%;
    object-fit: fill;
    height: 250px;
    border-radius: var(--second-border-radius);
    filter: opacity(60%);
}

/* ======== Meet Our Team Section Ends Here ======== */

/* ======== Footer Section Starts Here ======== */
footer {
    background: var(--third-bg-color);
    padding: var(--gap-32) 10rem;
}

.footer__container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: var(--gap-80);
}

.footer__container-2 {
    width: 50%;
    display: flex;
    justify-content: space-between;
    gap: var(--gap-15);
}

.footer__contents-1 {
    width: 40%;
}

.footer__title {
    font-size: 4rem;
    font-weight: var(--font-weight-900);
    margin-bottom: var(--gap-7);
    font-style: italic;
    color: var(--second-bg-color)
}

.footer__desc {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-400);
    color: var(--second-font-color);
    line-height: var(--line-height-22);
}

.footer__subtitle {
    font-size: var(--font-size-32);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-120);
    margin-bottom: var(--gap-15);
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--gap-7);
}

.footer__link {
    color: var(--second-font-color);
}

.footer__hr {
    width: 100%;
    height: 1px;
    background: var(--second-font-color);
    margin-top: var(--gap-32);
}

.footer__copyright {
    margin-top: var(--gap-26);
    color: var(--second-color);
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-22);
}

.footer__copyright p {
    font-size: var(--sixth-font-size);
    font-weight: 200;
    color: var(--second-font-color);
    text-align: center;
}

/* ======== Footer Section Ends Here ======== */

/* ======== Responsive Styles Starts Here ======== */

/* ======== Small Device Styles Starts Here ======== */
@media screen and (max-width: 576px) {

    .primary__btn {
        padding: 0.4rem 0.8rem;
        font-size: var(--font-size-14);
        line-height: var(--line-height-22);
    }

    .title {
        font-size: var(--font-size-32);
        font-weight: var(--font-weight-800);
        line-height: var(--line-height-120);
        margin-top: var(--gap-32);
    }

    .description {
        width: fit-content;
        font-size: var(--font-size-15);
        font-weight: var(--font-weight-400);
        line-height: var(--line-height-26);
        color: var(--second-font-color);
        padding: var(--gap-5) 0;
    }

    .section__description {
        margin-bottom: var(--gap-15);
        padding: 1rem 0;
        width: 80%;
    }

    .section__margin {
        margin: 1rem;
        padding: 0;
    }

    /* ======== Basic CSS Ends Here ======== */

    /* ======== Header Section Starts Here ======== */

    header {
        margin: 0;
        padding: 1rem;
    }

    nav ul {
        display: none;
    }

    nav {
        display: flex;
        justify-content: space-between;
    }

    .logo {
        color: var(--second-bg-color);
        font-size: var(--font-size-36);
        font-weight: var(--font-weight-800);
        font-style: italic;
    }

    .hamburger {
        display: block;
    }

    .banner {
        flex-direction: column;
        gap: var(--gap-5);
        margin: 0;
        padding: 0;
    }

    .banner__contents {
        width: fit-content;
    }

    .banner__title {
        font-size: 3rem;
        margin: var(--gap-32) 0;
    }

    .banner__shape {
        font-size: 6rem;
        font-weight: var(--font-weight-400);
        line-height: 40%;
    }

    .banner__desc {
        font-size: var(--font-size-14);
        font-weight: var(--font-weight-100);
    }

    .btn__container {
        gap: var(--gap-7);
        margin: var(--gap-7) 0;
    }

    .banner__img {
        width: 80%;
        height: 420px;
        margin-top: var(--gap-32);
    }

    .banner__card {
        width: max-content;
    }

    /* ======== Header Section Ends Here ======== */

    /* ======== Change Your Habit Section Starts Here ======== */
    .change__your__habit__card__box {
        grid-template-columns: repeat(1, 1fr);
        gap: var(--gap-32);
        margin-top: var(--gap-80);
    }

    .change__your__habit__card__contents h3 {
        margin-bottom: var(--gap-5);
    }

    /* ======== Change Your Habit Section Ends Here ======== */

    /* ========  Run an Extra Mile Easily Section Starts Here ======== */
    .run__an__extra__mile__easily {
        padding: 0 2rem;
        flex-direction: column;
        align-items: baseline;
        height: fit-content;
    }

    .run__an__extra__mile__easily__contents {
        width: 100%;
    }

    .run__an__easily__extra__mile__contents__title {
        width: 100%;
        margin-bottom: var(--gap-7);
    }

    .run__an__easily__extra__mile__contents__desc {
        width: 100%;
        padding: var(--gap-15) 0;
        margin-bottom: var(--gap-15);
    }

    .run__an__extra__mile__easily__img {
        width: 100%;
        padding: var(--padding-16) 0;
        margin-top: var(--gap-15);
    }

    .run__an__extra__mile__easily__img img {
        width: 100%;
        border-radius: var(--second-border-radius);
    }

    /* ========  Run an Extra Mile Easily Section Ends Here ======== */

    /* ======== Fitness and Blogs Section Starts Here ======== */
    .fitness__and__blogs {
        margin: 0 1rem;
    }

    .fitness__and__blogs__box {
        grid-template-columns: repeat(1, 1fr);
        gap: var(--gap-26);
    }

    .fitness__and__blogs__card img {
        height: 15rem;
    }

    .card__desc {
        font-size: var(--font-size-14);
        font-weight: 200;
    }

    /* ======== Fitness and Blogs Section Starts Here ======== */

    /* ======== BMI Calculator Section Starts Here ======== */
    .bmi__calculator__section {
        padding: 1rem;
    }

    .bmi__calculator {
        width: 100%;
        margin: auto;
        padding: var(--gap-32) 1rem;
    }

    .bmi__calculator__contents {
        flex-direction: column;
        gap: var(--gap-15);
    }

    .bmi__calculator__title {
        text-align: start;
        margin-bottom: var(--gap-26);
    }

    .bmi__calculator__chart {
        width: 100%;
    }

    .bmi__calculator__contents__title {
        margin: var(--gap-26) 0;
        font-size: var(--font-size-24);
        font-weight: var(--font-weight-800);
        text-align: start;
    }

    .bmi__calculator__form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--gap-26);
    }

    .form__item input {
        width: 100%;
    }

    .form__select {
        width: 100%;
    }

    .activity__factor {
        width: 100%;
        margin-bottom: var(--gap-26);
    }

    /* ======== BMI Calculator Section Ends Here ======== */

    /* ======== Meet Our Team Section Starts Here ======== */
    .meet__our__team__card__box {
        grid-template-columns: repeat(1, 1fr);
        gap: var(--gap-26);
    }

    /* ======== Meet Our Team Section Ends Here ======== */

    /* ======== Footer Section Starts Here ======== */
    footer {
        padding: 1rem;
    }

    .footer__container {
        flex-direction: column;
        gap: var(--gap-26);
    }

    .footer__contents-1 {
        width: 100%;
    }

    .footer__container-2 {
        width: 70%;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--gap-26);
    }

    .footer__title {
        font-size: 3rem;
        font-weight: var(--font-weight-800);
    }

    .footer__desc {
        font-size: var(--font-size-16);
        font-weight: var(--font-weight-200);
        line-height: var(--line-height-26);
        margin-top: var(--gap-15);
    }

    .footer__subtitle {
        font-size: var(--font-size-24);
    }

    .footer__links {
        font-size: var(--font-size-16);
    }

    .footer__hr {
        margin-top: var(--gap-26);
    }

    .footer__copyright {
        margin-top: var(--gap-26);
    }

    .footer__copyright p {
        font-size: var(--font-size-14e);
        font-weight: var(--font-weight-100);
        line-height: var(--line-height-22);
    }
}

/* ======== Small Device Styles Ends Here ======== */

/* ======== Medium Device Styles Starts Here ======== */
@media screen and (min-width: 576px) and (max-width: 768px) {

    .title {
        font-size: var(--font-size-36);
        margin-top: var(--gap-32);
    }

    .description {
        width: fit-content;
        font-size: var(--font-size-15);
        font-weight: var(--font-weight-400);
        line-height: var(--line-height-26);
        padding: var(--gap-5) 0;
    }

    .section__description {
        margin-bottom: var(--gap-15);
        padding: 1rem 0;
        width: 80%;
    }

    .section__margin {
        margin: 1rem;
        padding: 0;
    }

    /* ======== Basic CSS Ends Here ======== */

    /* ======== Header Section Starts Here ======== */

    header {
        margin: 0;
        padding: 1rem 2rem;
    }

    .banner {
        flex-direction: column;
        gap: var(--gap-5);
        margin: 0;
        padding-left: 3rem;
    }

    .banner__contents {
        width: fit-content;
    }

    .banner__title {
        font-size: 5rem;
        font-weight: var(--font-weight-900);
        margin: var(--gap-32) 0;
    }

    .banner__shape {
        font-size: 12rem;
        font-weight: var(--font-weight-400);
        line-height: 40%;
    }

    .banner__desc {
        font-size: var(--font-size-14);
        font-weight: var(--font-weight-100);
        margin-bottom: var(--gap-15);
    }

    .banner__img {
        width: 100%;
        height: 420px;
        margin-top: var(--gap-32);
    }

    .banner__card {
        width: max-content;
    }


    .banner__bottom__card {
        bottom: 12%;
        left: 15%;
    }

    /* ======== Header Section Ends Here ======== */

    /* ======== Change Your Habit Section Starts Here ======== */
    .change__your__habit__card__box {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-32);
        width: 80%;
        margin: auto;
        padding: var(--gap-32);
    }

    /* ======== Change Your Habit Section Ends Here ======== */

    /* ========  Run an Extra Mile Easily Section Starts Here ======== */
    .run__an__extra__mile__easily {
        padding: 0 2rem;
        height: max-content;
        gap: var(--gap-15);
        align-items: flex-start;
    }

    .run__an__extra__mile__easily__contents {
        width: 100%;
    }

    .run__an__easily__extra__mile__contents__title {
        width: 100%;
        margin-bottom: var(--gap-15);
    }

    .run__an__easily__extra__mile__contents__desc {
        margin-bottom: var(--gap-15);
    }

    .run__an__extra__mile__easily__img {
        width: 50%;
        border-radius: var(--second-border-radius);
    }

    .run__an__extra__mile__easily__img img {
        width: 250px;
        height: 360px;
        background-position: center;
        padding: var(--padding-8) 0;
        margin-top: var(--gap-15);
    }

    /* ========  Run an Extra Mile Easily Section Ends Here ======== */

    /* ======== Fitness and Blogs Section Starts Here ======== */
    .fitness__and__blogs {
        margin: 0 1rem;
    }

    .fitness__and__blogs__box {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-26);
    }

    .fitness__and__blogs__card {
        display: flex;
        height: fit-content;
        flex-direction: column;
        background: var(--third-bg-color);
        border-radius: var(--second-border-radius);
    }

    .card__contents {
        height: 17rem;
        justify-content: space-between;
    }

    .fitness__and__blogs__card img {
        height: 15rem;
    }

    .card__desc {
        font-size: var(--font-size-14);
        font-weight: 200;
        height: fit-content;
        margin-bottom: var(--gap-15);
    }

    /* ======== Fitness and Blogs Section Starts Here ======== */

    /* ======== BMI Calculator Section Starts Here ======== */
    .bmi__calculator__section {
        padding: 1rem;
    }

    .bmi__calculator {
        width: 100%;
        margin: auto;
        padding: var(--gap-32) 1rem;
    }

    .bmi__calculator__contents {
        flex-direction: column;
        gap: var(--gap-15);
    }

    .bmi__calculator__title {
        text-align: start;
        margin-bottom: var(--gap-26);
    }

    .bmi__calculator__chart {
        width: 100%;
    }

    .bmi__calculator__contents__title {
        margin: var(--gap-26) 0;
        font-size: var(--font-size-24);
        font-weight: var(--font-weight-800);
        text-align: start;
    }

    .bmi__calculator__form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--gap-26);
    }

    .form__item input {
        width: 100%;
    }

    .form__select {
        width: 100%;
    }

    .activity__factor {
        width: 100%;
        margin-bottom: var(--gap-26);
    }

    /* ======== BMI Calculator Section Ends Here ======== */

    /* ======== Meet Our Team Section Starts Here ======== */
    .meet__our__team__card__box {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-26);
    }

    /* ======== Meet Our Team Section Ends Here ======== */

    /* ======== Footer Section Starts Here ======== */
    footer {
        padding: 1rem;
    }

    .footer__container {
        flex-direction: column;
        gap: var(--gap-26);
    }

    .footer__container-2 {
        width: 70%;
        display: flex;
        justify-content: space-between;
        gap: var(--gap-15);
    }

    .footer__contents-1 {
        width: 70%;
    }

    .footer__title {
        font-size: 3rem;
        font-weight: var(--font-weight-800);
    }

    .footer__desc {
        font-size: var(--font-size-16);
        font-weight: var(--font-weight-200);
        line-height: var(--line-height-26);
        margin-top: var(--gap-15);
    }

    .footer__subtitle {
        font-size: var(--font-size-24);
    }

    .footer__links {
        font-size: var(--font-size-16);
    }

    .footer__hr {
        margin-top: var(--gap-26);
    }

    .footer__copyright {
        margin-top: var(--gap-26);
    }

    .footer__copyright p {
        font-size: var(--font-size-14e);
        font-weight: var(--font-weight-100);
        line-height: var(--line-height-22);
    }
}

/* ======== Medium Device Styles Ends Here ======== */

/* ======== Large Device Styles Starts Here ======== */

@media (min-width: 768px) and (max-width: 1024px) {

    .title{
        font-size: var(--font-size-36);
    }
    .primary__btn {
        padding: .6rem 1.2rem;
    }

    .section__description {
        margin-bottom: var(--gap-15);
        padding: 1rem 0;
        width: 80%;
    }

    .section__margin {
        margin: 1rem;
        padding: 2rem 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* ======== Basic CSS Ends Here ======== */

    /* ======== Header Section Starts Here ======== */

    header {
        margin: 0;
        padding: 1rem;
    }

    .banner {
        width: 100%;
        margin: 0;
        padding: 1rem;
    }

    .banner__contents {
        width: 50%;
    }

    .banner__title {
        font-size: 4rem;
    }

    .banner__shape {
        font-size: 8rem;
    }

    .banner__img {
        width: 40%;
    }

    .banner__card {
        width: max-content;
    }

    /* ======== Header Section Ends Here ======== */

    /* ======== Change Your Habit Section Starts Here ======== */
    .change__your__habit__card__box {
        gap: var(--gap-32);
        padding: 1rem;
    }

    /* ======== Change Your Habit Section Ends Here ======== */

    /* ========  Run an Extra Mile Easily Section Starts Here ======== */
    .run__an__extra__mile__easily {
        flex-direction: row;
        padding: 1rem;
        height: max-content;
        gap: var(--gap-15);
        margin: 0 3rem;
    }

    .run__an__extra__mile__easily__contents {
        padding:0;
        width: 50%;
    }

    .run__an__easily__extra__mile__contents__title {
        width: 100%;
        margin-bottom: var(--gap-15);
    }

    .run__an__easily__extra__mile__contents__desc {
        width: 100%;
        margin-bottom: var(--gap-15);
    }
    /* ========  Run an Extra Mile Easily Section Ends Here ======== */

    /* ======== Fitness and Blogs Section Starts Here ======== */
    .fitness__and__blogs {
        margin: 3rem;
    }

    .fitness__and__blogs__box {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-26);
        margin: 1rem;
    }

    .fitness__and__blogs__card {
        display: flex;
        height: fit-content;
        flex-direction: column;
        background: var(--third-bg-color);
        border-radius: var(--second-border-radius);
    }

    .card__contents {
        height: 17rem;
        justify-content: space-between;
    }

    .fitness__and__blogs__card img {
        height: 15rem;
    }

    .card__desc {
        font-size: var(--font-size-14);
        font-weight: 200;
        height: fit-content;
        margin-bottom: var(--gap-15);
    }

    /* ======== Fitness and Blogs Section Starts Here ======== */

    /* ======== BMI Calculator Section Starts Here ======== */
    .bmi__calculator__section {
        padding: 1rem;
    }

    .bmi__calculator {
        width: 50%;
        margin: auto;
        padding: var(--gap-32) 1rem;
    }

    .bmi__calculator__contents {
        padding: 1rem 3rem;
        gap: var(--gap-32);
    }

    .bmi__calculator__title {
        text-align: start;
        margin-bottom: var(--gap-26);
    }

    .bmi__calculator__chart {
        width: 100%;
    }

    .bmi__calculator__contents__title {
        margin: var(--gap-26) 0;
        font-size: var(--font-size-24);
        font-weight: var(--font-weight-800);
        text-align: start;
    }

    .bmi__calculator__form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--gap-26);
    }

    .form__item input {
        width: 100%;
    }

    .form__select {
        width: 100%;
    }

    .activity__factor {
        width: 100%;
        margin-bottom: var(--gap-26);
    }

    /* ======== BMI Calculator Section Ends Here ======== */

    /* ======== Meet Our Team Section Starts Here ======== */
    .meet__our__team__container{
        margin: 0 3rem;
    }
    .meet__our__team__card__box {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-26);
    }

    /* ======== Meet Our Team Section Ends Here ======== */

    /* ======== Footer Section Starts Here ======== */
    footer {
        padding: 2rem 4rem;
    }

    .footer__container {
        flex-direction: column;
        gap: var(--gap-26);
    }

    .footer__container-2 {
        width: 70%;
        display: flex;
        justify-content: space-between;
        gap: var(--gap-15);
    }

    .footer__contents-1 {
        width: 70%;
    }

    .footer__title {
        font-size: 3rem;
        font-weight: var(--font-weight-800);
    }

    .footer__desc {
        font-size: var(--font-size-16);
        font-weight: var(--font-weight-200);
        line-height: var(--line-height-26);
        margin-top: var(--gap-15);
    }

    .footer__subtitle {
        font-size: var(--font-size-24);
    }

    .footer__links {
        font-size: var(--font-size-16);
    }

    .footer__hr {
        margin-top: var(--gap-26);
    }

    .footer__copyright {
        margin-top: var(--gap-26);
    }

    .footer__copyright p {
        font-size: var(--font-size-14e);
        font-weight: var(--font-weight-100);
        line-height: var(--line-height-22);
    }
}

/* ======== Large Device Styles Ends Here ======== */
/* ======== Responsive Styles Ends Here ======== */