@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=Dancing+Script:wght@400..700&family=Inter:wght@100..900&family=Italianno&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "slnt" 0;

}

.biggap {
    height: 12vh;
}

.meidumgap {
    height: 5vh;

}


.site-name {
    color: red;
    font-family: "Inter", sans-serif;
    font-weight: 900;
    font-size: 2rem;
    cursor: pointer;
}

Header {
    display: flex;
    justify-content: space-between;
    max-width: 80vw;
    margin: 20px auto;
}

Header ul li {
    list-style: none;
}

Header nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 50px 5px 5px;
    gap: 25px;
    border: 1px solid rgba(112, 112, 112, 0.684);
    width: 80vh;
    border-radius: 25px;
    height: 6vh
}

Header ul li a {
    text-decoration: none;
    color: white;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 1rem;

}

.home-red {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
    width: 15%;
    gap: 25px;
    border: 1px solid rgba(112, 112, 112, 0.684);
    border-radius: 20px;
    height: 6vh
}

.home-red a {
    text-align: center;
    font-size: 1rem;
}

.icon {
    display: none;
}

.headermain {

    max-width: 80vw;
    margin: 20px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: start;
    align-items: center;
    gap: 15px;
    overflow: hidden;
}

.desc2 {
    justify-self: center;
}

.big-word {
    font-family: "Inter", sans-serif;
    font-size: 4.5rem;
    color: white;
    padding-bottom: 15px;
}

.italic {
    font-family: "Dancing Script", cursive;
    font-size: 4.5rem;
    font-weight: 200;
    font-style: italic;
}

.small-word {
    font-family: "Inter", sans-serif;
    font-weight: 200;
    font-size: 1.1rem;
    padding-bottom: 15px;
    color: gray;
}

.black-btn {
    background-color: black;
    border: 1px solid white;
    color: white;
    padding: 20px 45px;
    border-radius: 30px;
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
}

.black-btn a {
    color: white;
    text-decoration: none;
}

.red-btn a {
    color: white;
    text-decoration: none;
}

.red-btn {
    cursor: pointer;
    background-color: red;
    color: white;
    padding: 20px 45px;
    border: 1px solid red;
    border-radius: 30px;
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
}


.bigword {
    font-family: "Inter", sans-serif;
    font-size: 2rem;
    font-weight: 900;
}

.smallword {
    font-family: "Inter", sans-serif;
    font-size: 1rem;
}

.image {
    position: relative;
}

.box1 {
    position: absolute;
    left: 1105px;
    top: 234px;
    background-color: #454444;
    color: white;
    opacity: 0.9;
    border: 0.1px solid #818181;
    border-radius: 11px;
    padding: 15px;
    backdrop-filter: blur(4px)
}

.box2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 785px;
    top: 512px;
    background-color: #454444;
    color: white;
    opacity: 0.9;
    border: 0.1px solid #818181;
    border-radius: 11px;
    padding: 15px;
    backdrop-filter: blur(4px);
    gap: 8px;
}


.bigword {
    font-family: "Inter", sans-serif;
    font-size: 2rem;
    font-weight: 900;
}

.smallword {
    font-family: "Inter", sans-serif;
    font-size: 1rem;
}

.red-circul {
    border: 2px solid red;
    border-radius: 20px;
    width: 35px;
    height: 35px;
    background-color: red;
}

.box2 p:nth-child(1) {
    font-family: "Inter", sans-serif;
    font-size: 2rem;
    font-weight: 900;
    padding: 0px 33px 0px 0px;

}

.box2 p:nth-child(2) {
    font-family: "Inter", sans-serif;
    font-size: 1rem;
}

.change-habit {
    width: 100%;
    text-align: center;
}

.head-of-h1 {
    font-family: "Inter", sans-serif;
    font-size: 2.5rem;
    color: white;
    padding: 20px 0px 20px 0px;
}

.change-habit-box {
    max-width: 80vw;
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}



.habitimage {
    text-align: center;
}

.habitimage img {
    border: 4px solid #2c2c2c;
    border-radius: 90px;
    cursor: pointer;
}

.anydesc {
    text-align: center;
}

.small-head {
    font-family: "Inter", sans-serif;
    font-weight: 200;
    font-size: 1rem;
    padding-bottom: 15px;
    color: gray;
}

.runextra {
    background-color: #2c2c2c;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    border-radius: 20px;
    max-width: 80vw;
    margin: 20px auto;
}

.runextradesc {
    justify-self: start;
    margin: 35px;
}

.runextradesc-of-h1,
.trainingdesc-of-h1,
.meet-team-of-h1 {
    font-family: "Inter", sans-serif;
    font-size: 2.8rem;
    color: white;
    padding: 20px 0px 20px 0px;
}

.runextradesc-head,
.trainingdesc,
.meet-teamdesc {
    font-family: "Inter", sans-serif;
    font-weight: 200;
    font-size: 1.1rem;
    padding-bottom: 15px;
    color: gray;
}

.red-btn1 {
    background-color: red;
    padding: 20px 68px;
    border: 1px solid red;
    border-radius: 30px;
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
}

.red-btn1 a {
    text-decoration: none;
    color: white;

}

.image2 img {
    width: 450px;
    margin: 35px;
    border-radius: 20px;
}

.training {
    max-width: 80vw;
    margin: 0px auto;
}


.trainingdesc-of-h1,
.meet-team-of-h1 {
    font-family: "Inter", sans-serif;
    font-size: 2.9rem;
    color: white;
    padding: 0px 0px 30px 0px;
}

.trainingdesc,
.meet-teamdesc {
    font-family: "Inter", sans-serif;
    font-weight: 200;
    font-size: 1.1rem;
    padding-bottom: 55px;
    color: gray;
}

.trainingbox1 {
    max-width: 80vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}



.backgroundimage1 {
    width: 100%;
    margin: auto;
    height: 207px;
    background-image: url(./images/exercise1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: rgb(57 176 163 / 69%);
    background-blend-mode: overlay;
}

.train1 {
    position: relative;
}

.backgroundimage1-desc {
    top: 140px;
    left: 46px;
    position: absolute;
    color: black;
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
}

.backgroundimage2 {
    width: 100%;
    margin: auto;
    height: 207px;
    background-image: url(./images/exercise2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: rgb(177 100 75 / 80%);
    background-blend-mode: overlay;
}

.train2 {
    position: relative;
}

.backgroundimage2-desc {
    top: 32px;
    left: 79px;
    position: absolute;
    color: white;
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
}

.backgroundimage3 {
    width: 100%;
    margin: auto;
    height: 207px;
    background-image: url(./images/exercise3.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 120%;
    background-color: rgb(89 82 79 / 99%);
    background-blend-mode: overlay;
}

.train3 {
    position: relative;
}

.backgroundimage3-desc {
    top: 143px;
    left: 11px;
    position: absolute;
    color: white;
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
}

.trainingbox2 {
    max-width: 80vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 31vw 20vw 29vw;
}

.backgroundimage4 {
    width: 100%;
    margin: auto;
    height: 207px;
    background-image: url(./images/exercise4.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: rgb(89 82 79 / 99%);
    background-blend-mode: overlay;
}

.train4 {
    position: relative;
}

.backgroundimage4-desc {
    top: 18px;
    right: 20px;
    position: absolute;
    color: white;
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
}

.backgroundimage5 {
    width: 100%;
    margin: auto;
    height: 207px;
    background-image: url(./images/exercise5.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: rgb(89 185 110 / 64%);
    background-blend-mode: overlay;
}

.train5 {
    position: relative;
}

.backgroundimage5-desc {
    top: 141px;
    left: 28px;
    position: absolute;
    color: white;
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
}

.backgroundimage6 {
    width: 100%;
    margin: auto;
    height: 207px;
    background-image: url(./images/exercise6.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: rgb(89 89 185 / 43%);
    background-blend-mode: overlay;
}

.train6 {
    position: relative;
}

.backgroundimage6-desc {
    top: 141px;
    left: 57px;
    position: absolute;
    color: white;
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
}

.secHead,
.thirdHead {
    text-align: center;
}

.tableinput {
    background-color: #2c2c2c;
}

table {
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #545353;
    padding: 15px;
}

.thead {
    font-family: "Inter", sans-serif;
    font-size: 2rem;
    color: white;
}

th {
    color: white;
}

td {
    color: #818181;
}

.thead-desc {
    font-family: "Inter", sans-serif;
    font-weight: 200;
    font-size: 1.1rem;
    padding-bottom: 20px;
    color: gray;
}

.tableinput {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.bmi1 {
    justify-self: center;
    margin-top: 20px;
}

.bmi2 {
    justify-self: center;
    align-self: center;
    margin-top: 20px;
}

.calculate {
    display: grid;
    grid-template-columns: 300px 300px;
    gap: 20px;
}


.item-5 {
    grid-column: 1/3;
}

.item-5 select {
    width: 100%;
}


input,
select {
    width: 295px;
    height: 42px;
    border-radius: 10px;
    background-color: #4c4c4c;
    color: #c1bcbc;
    font-size: 1rem;
    box-sizing: border-box;
}

input::placeholder {
    color: #818181;
    padding: 5px;
    font-size: 1rem;
}


.background {
    background-color: #2c2c2c;
    max-width: 70vw;
    margin: 0 auto;
    border-radius: 20px;
}

.trainerintro {
    max-width: 80vw;
    margin: 0 auto;
    padding: 25px;
    display: grid;
    grid-template-columns: repeat(3, 327px);
    grid-template-rows: 295px 295px;
    gap: 20px;
}


.trainerimage,
.trainerimage2,
.trainerimage3,
.trainerimage4,
.trainerimage5,
.trainerimage6 {
    position: relative;
}

.trainerimage,
.trainerimage2,
.trainerimage3,
.trainerimage4,
.trainerimage5,
.trainerimage6,
img {
    border-radius: 20px;
}


.trainername {
    top: 230px;
    left: 21px;
    position: absolute;
    color: white;
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
}

.trainerdesignation {
    top: 248px;
    left: 21px;
    position: absolute;
    color: white;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
}

footer {
    background-color: #2c2c2c;
}

.innerbox {
    width: 80vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 50% 25% 25%;

}

.firstbox,
.secondbox,
.thirdbox {
    justify-self: center;
}

.footred {
    color: red;
}

.secondbox,
.thirdbox {
    display: flex;
    flex-direction: column;
}

.secondbox,
.thirdbox,
h1 {
    color: white;
    font-size: 2rem;
    padding-bottom: 10px;
}

.secondbox a {
    text-decoration: none;
    color: gray;
    padding: 10px;
    font-family: "Inter", sans-serif;
    font-size: 1.6rem;
    cursor: pointer;
}

.thirdbox a {
    text-decoration: none;
    color: gray;
    padding: 10px;
    font-family: "Inter", sans-serif;
    font-size: 1.6rem;
    cursor: pointer;
}

.endbox {
    width: 80vw;
    margin: 0 auto;
    color: white;
    border-top: 2px solid #86868657;
    text-align: center;
    padding: 45px;
    color: gray;
    font-size: 1.6rem;
    cursor: pointer;
}


/* challenge part CSS start */
.box {
    max-width: 80vw;
    margin: 15px auto;
    padding: 5px;
    border: 2px solid #d3d3d369;
    background-color: #000000de;
    border-radius: 12px;
    gap: 10px;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;

}

.logo1 {
    width: 5vw;
    height: 9vh;
    /* border: 2px solid black; */
    background-color: white;
    background-image: url(./images/Run.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px;
    background-color: #23232300;
    animation: Run 3s cubic-bezier(0.74, -0.01, 0.5, 0.99) 2s infinite;
}

.logo2 {
    width: 5vw;
    height: 9vh;
    /* border: 2px solid black; */
    background-color: white;
    background-image: url(./images/Swim.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px;
    background-color: #23232300;
    animation: Run 6s cubic-bezier(0.14, 0, 0.82, 0.98) 2s infinite;
}

.logo3 {
    width: 5vw;
    height: 9vh;
    /* border: 2px solid black; */
    background-color: white;
    background-image: url(./images/Walk.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px;
    background-color: #23232300;
    animation: Run 8s cubic-bezier(0.13, 0.01, 0.5, 0.99) 2s infinite;
}


.desc-text {
    color: #dddddde8;
    text-align: center;
    font-family: "Inter", sans-serif;

}

@keyframes Run {
    from {}

    to {
        transform: translateX(40vw);
    }
}

@media screen and (max-width:440px) {}


/* challenge part CSS End */















/* media quary for nav and icon */
@media screen and (max-width: 440px) {

    nav {
        display: none;
    }

    .icon {
        display: inline;
    }

    Header {
        margin-top: 20px;

    }

    /* headermain on mobile mode */
    .headermain {

        display: grid;
        grid-template-columns: 1fr;
    }

    .big-word {
        font-size: 2.8rem;
        color: white;
    }

    /* Imange two box */

    .box1 {
        position: absolute;
        left: 226px;
        top: 426px;
    }

    .box2 {
        left: 60px;
        top: 660px;
    }

    /* Change your habit section */

    .change-habit-box {
        max-width: 80vw;
        margin: 20px auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 4fr;
    }

    /* challenge part CSS media queary Start */
    .box {
        grid-template-columns: 1fr;
    }

    .logo1 {
        width: 10vw;
        height: 32px;
    }

    .logo2 {
        width: 8vw;
        height: 37px;
    }

    .logo3 {
        width: 10vw;
        height: 45px;
    }


    @keyframes Run {
        from {}

        to {
            transform: translateX(70vw);
        }
    }

    /* challenge part CSS media queary End */

    /* Run extra section */
    .runextra {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 1px;
    }

    .image2 img {
        width: 300px;
        margin: 25px;
        border-radius: 20px;
    }

    .black-btn {
        background-color: black;
        padding: 10px 22px;
        border: 1px solid white;
        border-radius: 20px;
        font-size: 1rem;
    }

    .black-btn a {
        color: white;
        text-decoration: none;
    }

    .red-btn a {
        color: white;
        text-decoration: none;
    }

    .red-btn {
        background-color: red;
        color: white;
        padding: 10px 22px;
        border: 1px solid red;
        border-radius: 20px;
        font-size: 1rem;


    }

    /* Training and excersies section */
    .trainingbox1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .train3 {
        display: none;
    }

    .backgroundimage1 {
        background-size: 185%;
    }

    .backgroundimage1-desc {
        color: white;
    }

    .backgroundimage2 {
        background-position: right;
        background-size: 230%;
    }

    .trainingbox2 {
        grid-template-columns: 42vw 37vw;
    }

    .train6 {
        display: none;
    }

    .backgroundimage4-desc {
        display: none;
    }

    .backgroundimage5-desc {
        display: none;
    }

    /* Section BMI Calculator and meet our team part started */
    .secHead,
    .thirdHead {
        text-align: start;
        margin-left: 35px;
    }

    .bmi1 {
        justify-self: start;
        margin: 0px 0px 0px 10px;
    }

    .bmi2 {
        justify-self: start;
        margin: 0px 0px 0px 10px;
    }

    .tableinput {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .calculate {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    input,
    select {
        width: 100%;
        height: 42px;
        border-radius: 10px;
        background-color: #4c4c4c;
        color: #c1bcbc;
        font-size: 1rem;
        box-sizing: border-box;
    }

    .item-5 select {
        width: 100%;
    }

    .thead {
        font-size: 1rem;
        margin: 20px 0px;
    }

    /* Meet my team */
    .trainerintro {
        grid-template-columns: repeat(1, 327px);
        grid-template-rows: 295px 295px 295px 295px;
    }

    .trainerimage,
    .trainerimage4 {
        display: none;
    }

    .background {
        max-width: 88vw;
    }

    /* Footer section */
    .innerbox {
        display: grid;
        grid-template-columns: 1fr;

    }

    .footred {
        color: red;
    }


    .firstbox,
    .secondbox,
    .thirdbox {
        justify-self: start;
    }
}