@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Italianno&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
*{
    margin: 0%;
    padding: 0%;;
}
body{
    font-family: "Inter", sans-serif;
}
body h1,h2,h3,h4{
    color: var(--secondary-color);
}
/* all-color */
:root{
    --primary-color:rgb(230, 83, 60);
    --secondary-color:rgb(255, 255, 255);
    --third-span-color: rgba(255, 255, 255, 0.5);
}
    /* share */
.btn1{
    color: rgb(255, 255, 255);  
    background: rgb(230, 83, 60);
    border-radius: 30px; 
    padding: 18px 35px;
    font-size: 1.5rem;
    font-weight: 500;
    border: none;
}
.btn2{
    color: rgb(255, 255, 255);  
    border: 2px solid rgb(255, 255, 255);
    border-radius: 30px;
    padding: 16px 35px;
    font-size: 1.5rem;
    font-weight: 500;
    background: transparent;
    margin-left: 15px;
}
.container{
    width: 80%;
    margin: 0px auto;
}
/* <!-- header-setion --> */
.headers-section{
    width: 90%;
    margin: auto;
    padding: 40px 0px 0px 0px;
    background: radial-gradient(circle, rgba(172,169,170,1) 0%, rgba(122,123,128,1) 0%, rgba(90,93,101,1) 0%, rgba(64,69,79,1) 0%, rgba(0,0,0,1) 79%);
}
.navber{
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin:auto;
}
.navber .logo{
    width: 132px;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
}
.navber ul{

    display: flex;
    justify-content: space-between;
    gap: 30px;
    border: 1px solid #888888;
    border-radius: 40px;
    padding: 4px 5px 1px 5px;
}
.navber ul li{
    list-style: none;
    line-height: 30px;
}
.navber ul li a{
    font-size: 1.5rem;
    font-weight: normal;
    color: var(--secondary-color);
    text-decoration: none;
    padding-left: 35px;
}
.navber ul li:first-child a{
    background: var(--primary-color);
    padding: 2px 20px;
    border-radius: 20px;
    border: none;
}
.navber .fa-bars{
    font-size: 2rem;
    color: aliceblue;
    display: none;
}

/* banner-container */
.banner-section{
    width: 100%;
    /* border: 2px solid yellowgreen; */

}
.banner-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.banner-section 
.banner-content{
    width: 44%;
    flex-direction: column;
    /* border: 2px solid red; */
}
.banner-section 
.banner-content h1 {
    font-size: 6rem;
    color: var(--secondary-color);
    margin: 20px 0px;
}
.banner-section 
.banner-content span {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: normal;
    display: block;
}
.banner-section 
.banner-content h1 p{
    font-family: "Italianno", cursive;
    font-weight: 500;
    line-height: 10px;
    font-size: 10rem;
    display: inline-block;
}
.banner-section 
.banner-content .btn{
    margin-top: 20px;
}
.banner-container 
.banner-image{
    width: 45%;
    height: 80%;
    /* border: 2px solid green; */
    position: relative;
}
.banner-container 
.banner-image img{
    width: 80%;
    height: 750px;
    margin-left: 7rem;
}
.banner-container 
.banner-image 
.free-workout{
    padding: 15px;
    position: absolute;
    top: 180px;
    right: 0px;
    border: none;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
}
.banner-container 
.banner-image 
.free-workout h1{
    font-size: 2.5rem;
    color: var(--secondary-color);
}
.banner-container 
.banner-image 
.free-workout span{
    font-size: 1rem;
    display: inline;
    color: var(--secondary-color);
}
.banner-container 
.banner-image 
.video-tuitorial{
    position: absolute;
    bottom: 120px;
    left: 20px;
    padding: 10px;
    align-items: center;
    /* border: 2px solid yellow; */
    width: 180px;
    height: 70px;
    display: flex;
    justify-content: space-around;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
}
.banner-container 
.banner-image 
.video-tuitorial 
.circle{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: var(--primary-color);
}
.banner-container 
.banner-image 
.video-tuitorial h1{
    display: block;
    font-size: 2.5rem;
    color: var(--secondary-color);
}
.banner-container 
.banner-image 
.video-tuitorial span{
    font-size: 1rem;
    display: inline;
    color: var(--secondary-color);
}

/* main-section  style*/
.main-section{
    width: 90%;
    margin: auto;
    padding: 40px 0px;
    background: rgb(0, 0, 0);
    /* border: 2px solid green; */
}
/* .habits-content style */
.main-section
.habits-content{
    width: 50%;
    margin: auto;
    color: var(--secondary-color);
    /* border: 2px solid yellow; */
    text-align: center;
    flex-direction: column;

}
.main-section
.habits-content h1{
    font-size: 3rem;
}
.main-section
.habits-content span{
    font-size: 1rem;
    color: var(--third-span-color);
}
.main-section
.habits-image{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 50px 0px;
}
.main-section
.habits-image
.img{
    text-align: center;
    width: 19%;
    height: 19%;
}
.main-section
.habits-image
.img img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    margin: 15px;
}
.main-section
.habits-image
.img h2{
    font-size: 1.5rem;
    color: var(--secondary-color);
}
.main-section
.habits-image
.img span{
    font-size: 1rem;
    color: var(--third-span-color);
}
/* extra-mile-easily-section */
.extra-mile-easily-section{
    display: flex;
    padding: 30px;
    border-radius: 18px;
    border-radius: 18px;
    background: rgb(34, 34, 34);
    justify-content: space-between;
}
.extra-mile-easily-section
.content{
    text-align: left;
    width: 35%;
}
.extra-mile-easily-section
.content h2{
    color: var(--secondary-color);
    font-size: 3rem;
}
.extra-mile-easily-section
.content span{
    padding: 15px 0px;
    font-size: 1rem;
    display: block;
    color: var(--third-span-color);
}
.extra-mile-easily-section
.image{
    width: 40%;
}
.extra-mile-easily-section
.image img{
    width: 100%;
    border-radius: 18px;
    /* height: 312px; */
}
/* Trainings and experiance section */
.trainings-and-experiance{
    padding: 30px;
    margin-top: 2rem;
}
.trainings-and-experiance .content{
    width: 60%;
    margin-bottom: 2.5rem;
}
.trainings-and-experiance
.content h2{
    font-size: 3rem;
    margin: 1.5rem 0rem;
    color: var(--secondary-color);
}
.trainings-and-experiance
.content span{
    font-size: 1rem;
    color: var(--third-span-color);
}
.trainings-and-experiance
.experiance-image{
    display: flex;
}
.trainings-and-experiance
.experiance-image .image{
    height: 15rem;
}
.trainings-and-experiance
.experiance-image .exercise1{
    width: 25%;
    background-image: url(../images/exercise1.jpg);
    background-position: center;
    /* background-repeat: no-repeat; */
    background-size: cover;
}
.trainings-and-experiance
.experiance-image .exercise2{
    width: 45%;
    background-image: url(../images/exercise2.png);
    background-position: center;
    /* background-repeat: no-repeat; */
    background-size: cover;
}
.trainings-and-experiance
.experiance-image .exercise3{
    width: 30%;
    background-image: url(../images/exercise3.png);
    background-position: center;
    /* background-repeat: no-repeat; */
    background-size: cover;
}
.trainings-and-experiance
.experiance-image .exercise4{
    width: 40%;
    background-image: url(../images/exercise4.png);
    background-position: center;
    /* background-repeat: no-repeat; */
    background-size: cover;
}
.trainings-and-experiance
.experiance-image .exercise5{
    width: 27%;
    background-image: url(../images/exercise5.jpg);
    background-position: center;
    /* background-repeat: no-repeat; */
    background-size: cover;
}
.trainings-and-experiance
.experiance-image .exercise6{
    width: 33%;
    background-image: url(../images/exercise6.jpg);
    background-position: center;
    /* background-repeat: no-repeat; */
    background-size: cover;
}
.trainings-and-experiance
.experiance-image .image
.image-title{
    width: 100%;
    height: 100%;
    /* border: 2px solid rgb(245, 202, 13); */
}
.trainings-and-experiance
.experiance-image .image
.image-title h3 {
    position: absolute;
}
.trainings-and-experiance
.experiance-image .exercise1
.image-title {
    background: rgba(6, 255, 210, 0.5);
    position: relative;
}
.trainings-and-experiance
.experiance-image .exercise1
.image-title h3 {
    bottom: 20px;
    left: 20px;
    color: #000;
}
.trainings-and-experiance
.experiance-image .exercise2
.image-title {
    background: rgba(255, 0, 0, 0.3);
    position: relative;
}
.trainings-and-experiance
.experiance-image .exercise2
.image-title h3 {
    top: 20px;
    left: 20px;
    color: var(--secondary-color);
}
.trainings-and-experiance
.experiance-image .exercise3
.image-title {
    background: rgba(0, 0, 0, 0.5);
    position: relative;
}
.trainings-and-experiance
.experiance-image .exercise3
.image-title h3 {
    bottom: 20px;
    left: 20px;
    color: var(--secondary-color);
}
.trainings-and-experiance
.experiance-image .exercise4
.image-title {
    background: rgba(0, 0, 0, 0.5);
    position: relative;
}
.trainings-and-experiance
.experiance-image .exercise4
.image-title h3 {
    top: 20px;
    right: 20px;
    color: var(--secondary-color);
}
.trainings-and-experiance
.experiance-image .exercise5
.image-title {
    background: rgba(66, 255, 0, 0.3);
    position: relative;
}
.trainings-and-experiance
.experiance-image .exercise5
.image-title h3 {
    bottom: 20px;
    left: 20px;
    color: var(--secondary-color);
}
.trainings-and-experiance
.experiance-image .exercise6
.image-title {
    background: rgba(0, 71, 255, 0.3);
    position: relative;
}
.trainings-and-experiance
.experiance-image .exercise6
.image-title h3 {
    bottom: 20px;
    left: 20px;
    color: var(--secondary-color);
}

/* bmi-calculator style */
.bmi-calculator-section{
    padding: 30px;
    margin-top: 3rem;
}
.bmi-calculator-section
.bmi-containner{
    width: 100%;
}
/* .bmi-content-style */
.bmi-calculator-section
.bmi-containner
.bmi-content{
    width: 50%;
    margin: 30px auto;
}
.bmi-calculator-section
.bmi-containner
.bmi-content h1{
    color: var(--secondary-color);
    font-size: 3.5rem;
    text-align: left;
    padding-bottom: 15px;
}
.bmi-calculator-section
.bmi-containner
.bmi-content span{
    color: var(--third-span-color);
    font-size: 1rem;
    text-align: left;
}
/* bmi-calculator-container */
.bmi-calculator-container{
    width: 100%;
    /* height: 500px; */
    color: aliceblue;
    border-radius: 18px;
    background: rgb(34, 34, 34);
}
.bmi-chart-and-calculate{
    display: flex;
    justify-content: space-between;
}
.bmi-calculator-chart{
    margin-top: 3rem;
    padding: 1rem;
    width: 30%;
}
.bmi-calculator-chart
.title h1{
    font-size: 1.8rem;
    text-align: left;
}
.bmi-calculator-chart table{
    border-collapse: collapse;
    margin-top: 3rem;
}
.bmi-calculator-chart table
.th td{
    font-size: 1.2rem;
    color: var(--secondary-color);
    padding: 12px 15px;
}
.bmi-calculator-chart table
tr td{
    border: 0.3px solid #636262;
    color: var(--third-span-color);
    font-size: 1rem;
    padding: 12px 15px;
}
/* bmi-calculat style */
.bmi-calculat{
    width: 55%;
    margin-top: 3rem;
    padding: 1rem;
}
.bmi-calculat
.bmi-calculat-content h1{
    font-size: 1.8rem;
    text-align: left;
    margin-bottom: 1rem;
}
.bmi-calculat
.bmi-calculat-content span{
    font-size: 1rem;
    text-align: left;
    color: var(--third-span-color);
}
/* bmi-input-style */
.bmi-calculat
.bmi-input{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    padding: 2.5rem 0rem;
}
.bmi-calculat
.bmi-input
input,select{
    padding: 0.8rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    color: var(--third-span-color);
    background-color: #413e3e;
}
.bmi-calculat
.cal-btn{
    font-size: 1.2rem;
    width: 200px;
    margin-bottom: 3rem;
}
#activity{
    grid-column: span 2;
}
/* meet-our-team-section-style */
.team-container{
    margin-top: 3rem;
}
.team-container
.team-content{
    width: 80%;
    margin: auto;
}
.team-container
.team-content h1{
    margin: 1.5rem;
    text-align: center;
    font-size: 4rem;
    text-transform: capitalize;
}
.team-container
.team-content span{
    text-align: center;
    font-size: 1rem;
    text-transform: capitalize;
    color: var(--third-span-color);
}
/* .all-trainer */
.team-container
.all-trainer{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    gap: 20px;
    padding: 20px;
    border-radius: 1.5rem;
    margin: 2rem 0rem;
}

.team-container
.all-trainer
.member{
    border-radius: 1.5rem;
    /* width: 92%; */
    height: 350px;
    position: relative;
}
.all-trainer
.content{
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.all-trainer
.member-content{
    height: 100%;
    width: 100%;
    border-radius: 1.5rem;
    position: absolute;
    background-color: rgba(12, 11, 11, 0.4);
}
.all-trainer
.content h2{
    font-size: 1.5rem;
    padding: 10px 0;
}
.all-trainer
.content span{
    color: var(--third-span-color);
    font-size: 1rem;
}

.team-container
.member1{
    background-image: url(../images/trainer1.png);
    background-size: cover;
    /* background-position: center; */
}
.team-container
.member2{
    background-image: url(../images/trainer2.png);
    background-size: cover;
    /* background-position: center; */
}
.team-container
.member3{
    background-image: url(../images/trainer3.png);
    background-size: cover;
    /* background-position: center; */
}
.team-container
.member4{
    background-image: url(../images/trainer4.png);
    background-size: cover;
    background-position: center;
}
.team-container
.member5{
    background-image: url(../images/trainer5.png);
    background-size: cover;
    /* background-position: center; */
}
.team-container
.member6{
    background-image: url(../images/trainer6.png);
    background-size: cover;
    /* background-position: center; */
}
/* our-pricing-section-style */
.our-pricing-section
.our-pricing-container{
    background: rgba(255, 255, 255, 0.1);
    /* border: 2px solid yellow; */
    border-radius: 18px;
    padding: 1rem 0rem;
}
.our-pricing-section
.our-pricing-container h1{
    font-size: 4rem;
    text-align: center;
}
.our-pricing-section
.our-pricing-container
.pricing-box{
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}
.our-pricing-section
.our-pricing-container
.pricing-box
.box{
    width: 26%;
    /* height: 450px; */
    border-left: 2px solid rgb(242, 243, 240);
    border-radius: 18px;
    margin: 1.5rem;
}
.our-pricing-section
.our-pricing-container
.pricing-box
.box h2{
    font-size: 2rem;
    text-align: center;
    padding: 1.5rem 0rem;
    border-bottom: 1px solid #ffff;
    color: var(--primary-color);
}
.our-pricing-section
.our-pricing-container
.pricing-box
.box h3{
    padding: 1.5rem 0;
    text-align: center;
    font-size: 3rem;
}
.our-pricing-section
.our-pricing-container
.pricing-box
.box h3 span{
    font-size: 1rem;
    font-weight: normal;
    color: var(--secondary-color);
}
.our-pricing-section
.our-pricing-container
.pricing-box
.box ul li{
    color: var(--secondary-color);
    margin: 1rem 2rem;
    font-weight: normal;
}
.our-pricing-section
.our-pricing-container
.pricing-box
.box .btn{
    width: 330px;
}
.our-pricing-section
.our-pricing-container
.pricing-box
.btn0{
    margin-top: 2.5rem;
}

/* footer-section-style */
.footer-section{
    width: 90%;
    /* height: 350px; */
    margin: auto;
    padding: 40px 0px;
    background: #161616fb;
    /* background: linear-gradient(180.00deg, rgb(17, 17, 17),rgba(119, 119, 119, 1) 100%); */
}
.footer-section
.footer-container{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 10px;
    width: 80%;
}
.footer-section 
.footer-container 
.get-started-container{
    display: flex;
    justify-content: space-around;
}
.footer-section 
.footer-container 
.get-started-container .section{
    padding-left: 10rem;
}
.footer-section
.footer-container
.section1 h1{
    color: var(--primary-color);
    font-size: 5rem;
    text-transform: capitalize;
    margin-bottom: 1.5rem;
}
.footer-section
.footer-container
.section2 h1, .section3 h1{
    font-size: 2rem;
    margin-bottom: 0.8rem;
}
.footer-section
.footer-container p{
    color: var(--third-span-color);
    font-size: 1.2rem;
    padding: 10px 0px;
}
.footer-section
.footer-container
.section1{
    width: 40%;
}
.footer-section
.footer-container ul{
    color: var(--secondary-color);
}
.footer-section
.footer-container ul li{
    font-size: 1.5rem;
    font-weight: normal;
    list-style: none;
    color: var(--third-span-color);
    padding: 0.6rem 0;
}
.bottom{
    width: 90%;
    margin: auto;
    color: var(--third-span-color);
    padding: 2rem;
}
.bottom span{
    border-top: 2px solid rgb(66, 66, 66);
    display: block;
    width: 90%;
    margin: auto;
    font-size: 1.5rem;
    text-align: center;
    text-transform: capitalize;
    padding-top: 3rem;
}

/* responsive-desing */
/* responsive-desing */
@media screen and (max-width: 576px) {
    .headers-section{
        width: 100%;
    }
    .navber{
        justify-content: space-between;
        width: 90%;
        margin:auto;
    }
    .navber ul{
        display: none;
    }
    .navber .fa-bars{
        display: block;
    }
    .container{
        width: 100%;
        margin:auto;
        flex-direction: column;
    }
    .headers-section{
        padding-bottom: 0px;
    }
    .banner-section .banner-content h1 p {
        font-size: 5rem;
    }
    .banner-container
    .banner-content{
        width: 90%;
        padding: 20px;
        margin: auto;
    }
    .banner-section 
    .banner-content{
        flex-direction: column;
    }
    .banner-section 
    .banner-content h1{
        font-size: 3rem;
    }
    .banner-section 
    .banner-content span{
        display: block;
    }
    .banner-section 
    .banner-content .btn{
        font-size: 1rem;
        width: 46%;
        margin-left: 10px;
    }
    .banner-container 
    .banner-image{
        width: 100%;
    }
    .banner-container 
    .banner-image img{
        margin-left: 2rem;
    }
    .banner-container .banner-image img {
        height: 620px;;
    }
    .banner-container 
    .banner-image 
    .free-workout{
        padding: 1rem;
        top: 90px;
        right: 1.5rem;
    }
    .banner-container 
    .banner-image 
    .video-tuitorial{
        padding: 1rem;
        top: 320px;
        left: 1.5rem;
        }
    /* main-section>habits-container */
    .main-section{
        width: 100%;
        padding-top: 0;
    }
    .main-section
    .habits-container{
        padding-top: 0;
        flex-direction: column;
        align-items: center;
    }
    .main-section
    .habits-container 
    .habits-image{
        flex-direction: column;
        align-items: center;
    }
    .main-section
    .habits-container
    .habits-content{
        width: 92%;
    }
    .main-section
    .habits-container
    .habits-content h1{
        font-size: 2rem;
    }
    .main-section
    .habits-container
    .habits-image .img{
        width: 50%;
        margin: 20px 10px;
        flex-direction: column;
        align-items: center;
    }
    .main-section
    .habits-container
    .habits-image img{
        width: 100%;
    }
    .main-section
    .habits-container
    .habits-image h2{
        font-size: 1.5rem;
    }
    .main-section
    .habits-container
    .habits-image span{
        font-size: 1rem;
    }
    /* Run an Extra Mile Easily */
    .extra-mile-easily-section{
        flex-direction: column;
        width: 95%;
        padding: 10px 0px;
        margin: auto;
    }
    .extra-mile-easily-section
    .content{
        width: 80%;
        margin: auto;
        /* padding: 10px; */
        text-align: left;
    }
    .extra-mile-easily-section
    .content h2{
        font-size: 3rem;
    }
    .extra-mile-easily-section
    .content span{
        font-size: 1.3rem;
        line-height: 1.8rem;
    }
    .extra-mile-easily-section
    .content button{
        width: 100%;
        font-size: 1.8rem;
        padding: 15px;
        border-radius: 40px;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }
    .extra-mile-easily-section
    .image{
        width: 90%;
        padding: 30px;
        margin: auto;
    }
    .extra-mile-easily-section
    .image img{
        width: 90%;
        margin-left: 6px;
    }
    /* Trainings and experiance section */
    .trainings-and-experiance-section{
        padding: 20px;
        align-items: center;
    }
    .trainings-and-experiance{
        padding: 0%;
        margin: auto;
    }
    .trainings-and-experiance
    .content{
        width: 80%;
    }
    .trainings-and-experiance
    .content h2{
        font-size: 2.5rem;
        width: 80%;
    }
    .trainings-and-experiance
    .content span{
        font-size: 1.3rem;
        line-height: 1.8rem;
    }
    /* Trainings and experiance section */
    /* experiance-image */
    .trainings-and-experiance .experiance-image .exercise4 .image-title h3 {
        top: 0px;
        right: 0px;
    }
    .trainings-and-experiance
    .experiance-image .exercise3,.exercise6 {
        display: none;
    }
    .trainings-and-experiance
    .experiance-image .exercise1{
            width: 50%;
            height: 170px;
    }
    .trainings-and-experiance
    .experiance-image .exercise2{
            width: 50%;
            height: 170px;
    }

    .trainings-and-experiance
    .experiance-image .exercise4{
            width: 40%;
            height: 170px;
    }
    .trainings-and-experiance
    .experiance-image .exercise4
    .image-title h3 {
        padding-top: 110px;
        padding-right: 35px;
    }
    .trainings-and-experiance
    .experiance-image .exercise5{
            width: 60%;
            height: 170px;
    }
    /* bmi-calculato */
    /* bmi-calculato */
    .bmi-calculator-section {
        padding: 0px;
    }
    .bmi-calculator-section .bmi-containner .bmi-content {
        width: 92%;
    }
    .bmi-calculator-section .bmi-containner .bmi-content h1 {
        font-size: 2.5rem;
    }
    .bmi-calculator-section .bmi-containner .bmi-content span {
        font-size: 1.2rem;
        line-height: 1.8rem;
    }
    .bmi-calculator-chart {
        width: 100%;
        padding: 0;
    }
    .bmi-calculator-chart .title, table{
        margin-left: 20px;
    }
    .bmi-calculator-chart table tr td {
        font-size: 1.2rem;
        padding: 15px 18px;
    }
    .bmi-calculat {
        width: 93.5%;
    }
    /* .bmi-calculat .bmi-calculat-content span {
    } */
    .bmi-calculat .cal-btn {
        margin-top: 1rem;
    }
    .bmi-calculat .bmi-input input, select {
        font-size: 1rem;
        padding: 0.8rem 0rem 0.8rem 0.2rem;
    }
    .bmi-calculat {
        padding: 1rem 1rem 0rem 1rem;
    }

    .team-container .team-content h1 {
        font-size: 2rem;
    }
    .bmi-calculat .bmi-calculat-content span,
    .team-container .team-content span {
        line-height: 30px;
        font-size: 1.2rem;
    }
    /* meet-our-team-section */
    .team-container .all-trainer {
        grid-template-columns: repeat(1, 1fr);
        margin: 1rem 3rem;
    }
    .team-container
    .all-trainer
    .member{
    height: 290px;
    }
    /*our-pricing-section */
    .our-pricing-section
    .our-pricing-container h1{
        font-size: 3rem;
    }
    .our-pricing-section
    .our-pricing-container
    .pricing-box{
        flex-direction: column;
        padding: 1rem 2.5rem;
    }
    .our-pricing-section
    .our-pricing-container
    .pricing-box .box{
        width: 100%;
        margin: 10px 0px;
    }
    /* footer-section */
    .footer-section .footer-container {
        padding: 10px 35px 10px 45px;
        /* width: 85%; */
    }
    .footer-section{
        width: 100%;
    }
    .footer-section
    .container {
        width: 85%;
        margin: auto;
        flex-direction: column;
    }
    .footer-section 
    .footer-container 
    .get-started-container{
    flex-direction: column;
    }
    .footer-section 
    .footer-container 
    .get-started-container 
    .section {
        padding-left: 0rem;
    }
    .footer-section 
    .footer-container 
    .section1{
        width: 100%;
    }
    .footer-section .footer-container .section1 p{
        font-size: 1.2rem;
    }
    .bottom span {
        width: 100%;
        margin: 0;
        font-size: 1.5rem;
    }
}
/* mediam device specific media query */
@media screen and (min-width: 576px) and (max-width:990px) {
    .headers-section,
    .main-section,
    .footer-section{
        width: 100%;
    }
    .headers-section
    .navber{
        display: flex;
        justify-content: space-between;
    }
    .headers-section
    .navber h1{
        font-size: 2.1rem;
    }
    .navber ul{
        border: 1px solid #888888;
        padding: 5px 10px;
    }
    .navber ul li a {
        padding: 0;
        font-size: 1rem;
    }
    .banner-section .banner-content h1 p {
        font-size: 8rem;
    }
    .banner-container {
        flex-direction: column;
    }
    .banner-container
    .banner-content{
        width: 100%;
    }
    .banner-section
    .banner-container
    .banner-content  h1{
        font-size: 5rem;
    }
    .banner-container .banner-image {
        width: 90%;
    }
    .banner-container .banner-image .free-workout {
        top: 100px;
    }
    .banner-container .banner-image .video-tuitorial {
        bottom: 160px;
    }
    .main-section .habits-content {
        width: 80%;
    }
    .main-section .habits-image .img h2 {
        font-size: 2rem;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }
    .main-section .habits-image {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        height: 950px;
        margin-bottom: 4rem;
        margin-top: 0;
        align-items: center;
    }
    .main-section
    .habits-image
    .img{
        width: 95%;
        height: 280px;
    }
    /* Run an Extra Mile Easily */
    .extra-mile-easily-section{
        margin-top: 6rem;
    }
    .extra-mile-easily-section .content {
        width: 55%;
        padding-right: 1rem;
    }
    .extra-mile-easily-section .image{
        width: 48%;
        margin-top: 1rem;
    }
    .extra-mile-easily-section .image img {
        width: 100%;
        border-radius: 18px;
        height: 280px;
    }
    /* trainings-and-experiance */
    .trainings-and-experiance .experiance-image .image {
        height: 10rem;
    }
    .trainings-and-experiance .content {
        width: 100%;
    }
    .trainings-and-experiance-section
    .trainings-and-experiance .experiance-image .image-title h3 {
        font-size: 15px;
    }
    .trainings-and-experiance .experiance-image .exercise1 {
        width: 38%;
        height: 180px;
    }
    .trainings-and-experiance .experiance-image .exercise2 {
        width: 42%;
        height: 180px
    }
    .trainings-and-experiance .experiance-image .exercise3 {
        width: 35%;
        height: 180px
    }
    .trainings-and-experiance .experiance-image .exercise4 {
        width: 45%;
        height: 180px
    }
    .trainings-and-experiance .experiance-image .exercise5{
        width: 40%;
        height: 180px
    }
    .trainings-and-experiance .experiance-image .exercise6 {
        width: 40%;
        height: 180px
    }
    /* bmi-calculator-section */
    .bmi-calculator-section .bmi-containner .bmi-content {
        width: 100%;
    }
    .bmi-chart-and-calculate {
        flex-direction: column;
    }
    .bmi-calculator-chart {
        width: 100%;
        padding: 0;
    }
    .bmi-calculat {
        width: 100%;
        padding: 0;
    }
    /* meet-our-team-section */
    .team-container .team-content {
        width: 100%;
    }
    .team-container .all-trainer .member {
        height: 240px;
        background-position: center;
    }
    .all-trainer .content h2 {
        font-size: 1rem;
    }
    /* .our-pricing-section */
    .our-pricing-section .our-pricing-container .pricing-box .box {
        margin: 1.5rem 0rem;
        padding: 10px 0px;
        
    }
    .our-pricing-section .our-pricing-container .pricing-box .box h2 {
        font-size: 1rem;
    }
    .our-pricing-section .our-pricing-container .pricing-box .box h3{
        font-size: 1.5rem;
        padding-bottom: 0;
        padding-top: 1rem;
    }
    .our-pricing-section .our-pricing-container .pricing-box .box  ul{
        padding-left: 15px;
    }
    .our-pricing-section .our-pricing-container .pricing-box .box  ul li p{
    font-size: 0.8rem;
    }
    .our-pricing-section .our-pricing-container .pricing-box .box .btn {
        width: 120px;
    }
    .our-pricing-section .our-pricing-container
    .btn2 {
        padding: 5px 3px;
        font-size: 0.9rem;
        border: 1px solid #ffff;
    }
    .our-pricing-section .our-pricing-container .pricing-box .box ul li {
        margin: 1rem 0rem 1.2rem 1rem;
    }
    /* footer-section */
    .footer-section .footer-container {
        flex-direction: column;
    }
    .footer-section .footer-container .section1 {
        width: 100%;
    }
    .footer-section .footer-container
    .get-started-container{
        display: flex;
        width: 100%;
        justify-content: start;
    } 
    .footer-section .footer-container
    .get-started-container .section{
        margin-right: 7rem;
    }   
    .footer-section .footer-container .get-started-container .section {
        padding-left: 0rem;
    }
}
/* large device specific media query */
@media screen and (min-width: 990px) and (max-width:1440px) {
    .headers-section,
    .main-section,
    .footer-section{
        width: 100%;
    }
    .banner-container .banner-image img {
        height: 660px;
}
    .banner-container .banner-image img {
        margin-left: 5rem;
    }
    .banner-section .banner-content h1 {
        font-size: 5rem;
    }
    .our-pricing-section .our-pricing-container .pricing-box .box .btn {
        width: 18rem;
    }
    .btn2 {
        padding: 1rem 1.8rem;
    }
}