@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

.inter-font {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "slnt" 0;
}

/* miama font import */
@import url('https://fonts.cdnfonts.com/css/miama');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}


/* -----------------------shared class-------------------------  */
:root {
    --primary-color: rgb(230, 83, 60);
    --dark: rgba(255, 255, 255, 0.5);
    --bgDark: rgb(34, 34, 34);
}

.primaryBtn {
    border-radius: 42px;
    background: rgb(230, 83, 60);
    padding: 16px 40px 16px 40px;
    font-size: 18px;
    font-weight: 600;
    border: none;
    color: white;
}

/* header  */
body {
    max-width: 1440px;
    margin: 0 auto;
}

header {
    background: linear-gradient(180.00deg, rgb(17, 17, 17), rgba(119, 119, 119, 0) 100%),
        linear-gradient(0.00deg, rgb(17, 17, 17), rgba(119, 119, 119, 0) 100%), rgb(99, 97, 97);
}

nav {
    max-width: 1060px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 57px 0 32px 0;
}

nav>h1 {
    font-size: 36px;
    font-weight: 800;
    font-style: italic;
    color: var(--primary-color);
}

nav ul {
    border: 1px solid rgba(255, 255, 255, 0.1);
    list-style: none;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 30px;
    border-radius: 42px;
    padding: 4px;
}

nav ul li:hover {
    cursor: pointer;
}

nav ul li a {
    color: white;
    text-decoration: none;
    margin: 10px;

}

.homeBtn {
    border-radius: 42px;
    background: rgb(230, 83, 60);
    padding: 8px 20px 8px 20px;
    font-size: 18px;
    font-weight: 600;
    border: none;
}

.navIcon {
    display: none;
}

/* header main section  */
.headerMainSection {
    max-width: 1060px;
    margin: 0 auto;
    color: white;
    display: flex;
    align-items: center;
    gap: 54px;
}

/* left  */
.headerLeft {
    width: 50%;
}

.headerLeft>h1 {
    font-size: 78px;
    font-weight: 900;
    letter-spacing: 0%;
}

.miamaStyle {
    font-family: 'Miama', sans-serif;
    font-weight: 400;
}

.headerLeft>p {
    color: var(--dark);
    margin: 28px 0;
}

.btnSection {
    display: flex;
    gap: 14px;
}

.bigS {
    color: white;
}

.smallS {
    display: none;
    color: white;
}

.downloadAppBtn {
    border-radius: 42px;
    background: none;
    color: white;
    padding: 16px 40px 16px 40px;
    font-size: 18px;
    font-weight: 600;
    border: 1px solid white;
}

/* right  */
.headerRight {
    width: 50%;
    display: flex;
    justify-content: center;
    position: relative;
}

.workOutVideo,
.tutorialVideoMain {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.1);
}

.workOutVideo {
    padding: 10px 20px;
    right: 10px;
    top: 140px;
}

.workOutVideo>h1 {
    font-size: 40px;
    font-weight: 900;
}

.workOutVideo>p {
    font-size: 13px;
    color: var(--dark);
}

.tutorialVideoMain {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 15px;
    bottom: 50px;
    left: 0px;

}

.tutorialVideoMain>p {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

.tutorialVideo>h1 {
    font-size: 24px;
}

.tutorialVideo>p {
    color: var(--dark);
}


/* main section  */
main {
    background-color: rgb(0, 0, 0);
    color: white;
}

.mainContainer {
    max-width: 1060px;
    margin: 0 auto;
    padding: 100px 0px;
}

.HabitsSection {
    padding: 0px 0px;
}

.habits-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 65%;
    margin: 0 auto;
}

.habits-title>h1 {
    font-size: 48px;
    margin-bottom: 18px;
}

.habits-title>p {
    color: var(--dark);
    margin-bottom: 54px;
}

.habit-Content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content {
    text-align: center;
}

.content>img {
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 26px;
}

.content>h1 {
    font-size: 18px;
    font-weight: 600;
}

.content>p {
    color: var(--dark);
    margin-top: 6px;
}

/* run section start here  */
.runSection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 18px;
    background: rgb(34, 34, 34);
    margin-top: 100px;
    padding: 30px;
    gap: 150px;
}

.runSection-title {
    padding: 10px;
}

.runSection-title>h1 {
    font-size: 48px;
    font-weight: 900;
}

.runSection-title>p {
    margin: 14px 0 34px 0;
    color: var(--dark);
}

.runImage>img {
    width: 100%;
    border-radius: 18px;
}


/* bmi section  */
.BMI-Content {
    background-color: black;
    color: white;
}

.bmi-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 60%;
    margin: 0 auto 50px auto;
}

.bmi-title>h1 {
    color: white;
    font-size: 48px;
    margin-bottom: 10px;
}

.bmi-title>p {
    color: var(--dark);
}


/* main section  */
.BMI-main-section {
    background-color: #222222;
    color: white;
}

.bmi-under-section {
    max-width: 1060px;
    margin: 0 auto;
    padding: 50px;
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

.bmiLeft {
    width: 50%;
}

.bmiLeft>h1 {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 50px;
}

table {
    border-collapse: collapse;
    /* width: 100%; */
}

th {
    color: white;
}

td {
    color: var(--dark);
}

th,
td {
    border: 1px solid var(--dark);
    padding: 15px;
    text-align: left;
}

.bmiRight {
    width: 50%;
}

.bmiRight>h1 {
    font-size: 28px;
    font-weight: 900;
}

.bmiRight>p {
    color: var(--dark);
    margin: 20px 0px 40px 0;
}

.form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.form>input,
select {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 12px 40px 12px 20px;
    border: none;
    color: var(--dark);
}

input::placeholder {
    color: var(--dark);
}

.factoryOfGym {
    margin-top: 12px;
    width: 100%;
    color: var(--dark);
}

form>button {
    margin-top: 30px;
}

select>option {
    color: var(--dark);
    background-color: #222222;
    padding: 20px;
    border-bottom: white;
}

/* =============team section  =====================*/

.teamSection {
    background-color: black;
}

.teamUnderSection {
    max-width: 1060px;
    margin: 0 auto;
    padding-bottom: 80px;
}

.teamSection-title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 100px 0;
    color: white;
    width: 65%;
    margin: 0 auto;
    text-align: center;
}

.teamSection-title>h1 {
    font-size: 32px;
    margin-bottom: 10px;
}

.teamSection-title>p {
    color: var(--dark);
}

.teamContent {
    padding: 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.teamMemberInfo {
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    border-radius: 18px;
    color: white;
    display: flex;
    justify-content: end;
    flex-direction: column;
    padding: 20px;
    background-color: rgb(0, 0, 0, 0.3);
    background-blend-mode: overlay;

}

.teamMemberInfo>h1 {
    font-size: 20px;
    position: relative;

}

.teamMemberInfo>p {
    color: var(--dark);
}

.img1 {
    background-image: url('../images/trainer1.png');
    width: 100%;
    height: 272px;

}

.img2 {
    background-image: url('../images/trainer2.png');
    width: 100%;
    height: 272px;

}

.img3 {
    background-image: url('../images/trainer3.png');
    width: 100%;
    height: 272px;

}

.img4 {
    background-image: url('../images/trainer4.png');
    width: 100%;
    height: 272px;

}

.img5 {
    background-image: url('../images/trainer5.png');
    width: 100%;
    height: 272px;

}

.img6 {
    background-image: url('../images/trainer6.png');
    width: 100%;
    height: 272px;

}


/* ======================footer section =========== */
footer {
    background-color: #222222;
}

.footer-section {
    max-width: 1060px;
    margin: 0 auto;
    color: white;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 60px 0;
}

.footerLogo {
    grid-column: 2 span;
}

.footerLogo>h1 {
    font-size: 70px;
    font-weight: 800;
    font-style: italic;
    color: var(--primary-color);
}

.footerLogo>p {
    margin-top: 20px;
    color: var(--dark);
    margin-right: 80px;
}

.fStart {}

.fStart>h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 40px;
}

.fStart>ul>li {
    list-style: none;
    color: var(--dark);
    margin-bottom: 20px;
}

.footer-hr {
    max-width: 1060px;
    margin: 0 auto;
    color: white;
    opacity: 0.3;
    padding: 0px 0px 36px 0;
}

.footer-hr-under {
    width: 100%;
}

footer>p {
    color: var(--dark);
    text-align: center;
    padding-bottom: 35px;
}










/* small devices responsive site  */
@media screen and (max-width:576px) {

    .primaryBtn {
        border-radius: 32px;
        background: rgb(230, 83, 60);
        padding: 15px 30px;
        font-size: 18px;
        font-weight: 600;
        border: none;
    }

    header {
        padding: 20px;
    }

    nav {
        padding: 0;
    }

    nav>ul {
        display: none;
    }

    .navIcon {
        display: block;
    }

    /* header main section  */
    .headerMainSection {
        gap: 48px;
        flex-direction: column;
        margin-top: 50px;
    }

    /* left  */
    .headerLeft {
        width: 100%;
    }

    .headerLeft>h1 {
        font-size: 36px;
    }

    .btnSection {
        justify-content: space-between;
    }

    .bigS {
        color: white;
        display: none;
    }

    .smallS {
        display: block;
        color: white;
    }

    .downloadAppBtn {
        border-radius: 32px;
        padding: 10px 20px 10px 20px;
    }

    /* right  */
    .headerRight {
        width: 100%;
    }

    .workOutVideo {
        padding: 10px 15px;
        right: 10px;
        top: 70px;
    }

    .workOutVideo>h1 {
        font-size: 30px;
    }

    .workOutVideo>p {
        font-size: 10px;
    }

    .tutorialVideoMain {
        gap: 5px;
        padding: 10px;
        bottom: 100px;
        left: 0px;

    }

    .tutorialVideoMain>p {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: var(--primary-color);
    }

    .tutorialVideo>h1 {
        font-size: 20px;
    }

    .tutorialVideo>p {
        font-size: 10px;
        color: var(--dark);
    }


    /* main section  */
    main {
        padding: 20px;
    }

    /* habit section start here  */
    .HabitsSection {
        padding: 0px 0px;
    }

    .habits-title {
        width: 100%;
    }

    .habits-title>h1 {
        font-size: 32px;
        margin-bottom: 14px;
    }

    .habit-Content {
        flex-direction: column;
        gap: 40px;
    }

    .content>img {
        margin-bottom: 16px;
    }

    .content>h1 {
        margin: 0 0 8px 0;
    }

    .content>p {
        width: 70%;
        margin: 0 auto;
    }


    /* run section start here  */
    .runSection {
        flex-direction: column;
        gap: 50px;
        margin-top: 20px;
    }

    .runSection-title {
        padding: 0px;
    }

    .runSection-title>h1 {
        font-size: 32px;
        font-weight: 900;
    }

    .runSection-title>p {
        margin: 24px 0;
    }

    /* BMI section  */


    /* bmi section  */
    .BMI-Content {
        background-color: black;
        color: white;
    }

    .bmi-title {
        display: flex;
        justify-content: start;
        flex-direction: column;
        margin-bottom: 50px;
        width: 100%;
        padding: 20px;
    }

    .bmi-title>h1 {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .bmi-title>p {
        color: var(--dark);
    }


    /* BMI section  */

    .bmi-under-section {
        padding: 20px;
        gap: 20px;
        flex-direction: column;
    }

    .bmiLeft {
        width: 100%;
    }

    .bmiLeft>h1 {
        margin-bottom: 30px;
    }

    .bmiRight {
        width: 100%;
    }

    .bmiRight>p {
        margin: 10px 0px 30px 0;
    }

    .form {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }

    .form>input,
    select {
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        /* padding: 12px 40px 12px 20px; */
        border: none;
        color: var(--dark);
        width: 100%;
    }

    input::placeholder {
        color: var(--dark);
    }

    .gender {}

    .factoryOfGym {
        margin-top: 5px;
        width: 100%;
        color: var(--dark);
    }

    form>button {
        margin-top: 30px;
    }

    select>option {
        color: var(--dark);
        background-color: #222222;
        padding: 20px;
        border-bottom: white;
        overflow: hidden;
    }


    /* =========================team section  =========================*/

    .teamUnderSection {
        padding: 20px 20px 50px 20px;
    }

    .teamSection-title {
        width: 100%;
    }

    .teamContent {
        grid-template-columns: repeat(1, 1fr);
        justify-content: center;
        align-items: center;
    }



    /* ======================footer section =========== */
    footer {
        background-color: #222222;
        padding: 20px;
    }

    .footer-section {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
        padding: 30px 0;
    }
    .fStart>h1{
        margin-bottom: 20px;
    }

    .footerLogo {
        grid-column: 1 span;
    }

    .fStart>ul>li {
        margin-bottom: 15px;
    }

    .footer-hr {
        padding: 0px 0px 26px 0;
    }

    footer>p {
        padding-bottom: 25px;
    }
}