*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Work Sans", sans-serif;
}
:root{
    --bs--color1:#fd7e14;
    --bs--color2:#00000080;
}

/* Start of header */

header{
    padding: 20px 0;
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-between;
}
header ul{
    /* border: 1px solid; */
    display: none;
}
nav{
    /* border: 1px solid; */
}
nav .fa-bars{
    margin:10px 15px 0px 0px;
    border: 1px solid;
    padding: 5px; 
    color: var(--bs--color2);
    border-radius: 2px;
}
header h1{
    font-size: 26px;
    font-weight: 300;
    margin: 10px;
}
header h1 span{
    font-weight: 500;
}
/* -----------------End of Header----- */

/* ------------------Start of main Hero------------ */

.hero{
    /* border: 1px solid; */
    background: url(../images/background/hero_b1_1.jpg) fixed;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
   
}

.hero h2{
    /* border: 1px solid red; */
    font-size: 46px;
    color: white;
    text-align: center;
    margin: 215px 0;    
    flex-wrap: nowrap;
    
      
}
.hero span{
    display: block;
}
.hero h2 #hd{
    display: block;
    font-size: 12px;
    font-weight: 300;
    flex-wrap: nowrap;
   

}
.container{
    /* border: 2px solid red; */
}
.container .hero_Inner{
    /* border: 2px solid rebeccapurple; */
}
.body_building{
    /* border: 1px solid yellow; */

}
#first{
    margin: 20px 10px;
}
#first img{
    border-radius: 5px;
}
.sectionA,.sectionB,.sectionC,.sectionD{
    border-bottom: 1px solid var(--bs--color2);
}
i{
    color:var(--bs--color1);
    margin:0px 15px ;
}
.sectionA h3,.sectionB h3,.sectionC h3,.sectionD h3{
    font-size: 30px;
    font-weight: 400;
    margin: 0 15px;

}
.sectionA p,.sectionB p,.sectionC p,.sectionD p{
    font-size: 16px;
    margin: 0 15px;
    padding: 10px 0px;
}
.person{
    /* border: 5px solid; */
    margin: 0px 10px ;
    display: flex;
    position: relative;
}


.p2{
    position: absolute;
    left:30px;
}
.p3{
 position: absolute;
 left: 60px;
}

.person img{

    width: 50px;
    border-radius: 100%;
    
    /* margin:0px -20px 0 -10px; */
}
button{
    border: 0.1px solid var(--bs--color1);
    margin: 10px 15px;
    padding: 10px 20px;
    border-radius: 5px;
    color: var(--bs--color1);
}
button:hover{
    background-color: var(--bs--color1);
    color: var(--bs--color2);
    
}
/*------------------Crossfit secction start--------------*/
.Crossfit{
    /* border: 1px solid; */
    text-align: center;
}
.Crossfit .fa-minus{
    font-size: x-large;
    /* border: 1px solid green; */
    margin: 20px 0;
}
.Crossfit h3{
    /* border: 1px solid; */
    
    margin: 30px 0;
    font-size: 30px;
    font-weight: 400;
}
.inner{
    /* border: 1px solid red; */
    margin: 0 15px;
}
.inner div{
    border: 0.1px solid var(--bs--color2);
    padding: 5px;
    margin: 20px;
}
.Crossfit .inner div:hover{
    transform: translateY(-20px);
    box-shadow:0px 4px 9px 6px rgba(0, 0, 0, 0.1), 0px 0px 4px 0px rgba(0,0,0,0.1);
} 
.inner i{
    font-size: 50px;
}
.inner button{
    border: 0px;
    background-color: transparent;
}
.inner h4{
    font-size: 20px;
    font-weight: 400;
    margin: 5px 0;
}
.inner p{
    color: var(--bs--color2);
}
/* ----------------End of Main--------------- */
/* ------------------Starting of footer ------------*/
footer{
    background: #1E1E1C;
    color: rgb(255, 255, 255);
    padding:4rem 0;
}
.foot{
    /* border: 1px solid red; */
    padding: 0 15px;
}
.foot h5{
    margin-bottom: 24px;
    font-size:12px;
}
.foot p{
    color: #FFFFFF80;
    margin-bottom: 16px;
}
.foot button{
    
    background: var(--bs--color1);
    color: white;
    margin-bottom: 16px;
}
.foot button:hover{
    border: #fd7d149f;
    background: #fd7d149f;
    color: rgb(255, 255, 255);
}
ul{
    /* border: 1px solid; */
    list-style: none;
    padding: 5px;
}
ul li{
    margin: 10px 0 ;
    color: #FFFFFF80;
}
ul li a{
    font-size: 16px;
    text-decoration: none;
    margin: 10px 0 ;
    color: #FFFFFF80;
    padding: 0px 0px;
}
.copyrigt{  
    /* font-size: 16px; */
    text-align: center;
    color: #FFFFFF80;
}
.copyrigt h6{
    font-size: 16px;
    padding: 0 15px;
    font-weight: 400;
}
.copyrigt span{
    color: rgb(255, 0, 0);  
}
.copyrigt #Abc{
    color: #FFFFFF80;
    font-weight: 200;

}
/*-----------------End Of mobile view----------------------*/

/* -------------Start of Tablet view(768px)--------------- */
@media only screen and (min-width:768px) {
    .Crossfit .inner {
        /* border: 1px solid greenyellow; */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

    }

    .Crossfit .inner div {
        /* border: 1px solid red; */
        margin: 10px 20px;
        /* padding: 5px; */
        width:26%;
    }

    .foot {
        display: flex;
    }

    .foot div {
        width: 26%;
    }

    .icon {
        display: flex;
    }

    .icon i {
        margin: 5px;
    }

   
}

/*---------------------- End of tablate view------------ */
/*------------------- Start of pc view------------------*/
@media only screen and (min-width:1024px) {

    body{
        background: url(../images/background/bg.jpg);
        background-position:center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center; 

    }
    .FullBody{
        background: white;
        margin: 0 100px;
    }
    .fa-bars{
        display: none;
    }
    header ul{
        display: block;
        /* border: 1px solid; */
        display: flex;

    }
    header ul li a{
        color: var(--bs--color2);
        /* border: 1px solid; */
        padding: 0 10px;
      
    }
    header ul li a:hover{
        color: var(--bs--color1);
    }
    .Crossfit .inner div {
        /* border: 1px solid red; */
        margin: 20px;
        padding: 5px;
    }
    .body_building,.weight_lift{
        /* border: 1px solid yellow; */
        margin: 50px;
        display: flex; 
        justify-content:space-between;
        flex-wrap: nowrap;
        text-align: start;
       
    }  
    .boxing,.Body_Loss_Weight{
        margin: 50px;
        text-align: start;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;

    }
    #first
    {
        width: 49%;
    }
    .sectionA,.sectionB,.sectionC,.sectionD{
        /* border: 1px solid green; */
        width: 51%;
    }
    .hero h2{
        /* border: 1px solid red; */
        font-size: 64px;
      
}}