@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300&family=Oswald&family=Poppins:wght@100;200;300&display=swap');

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body
{
    font-family: 'Oswald',Helvetica,Arial,Lucida,sans-serif;
}

.navbar-1
{
    display: flex;
    justify-content: space-between;
    padding-left: 50px;
    padding-right: 50px;
    background-color:white;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 70px;
    
}

.nav-bar
{
    
 
}
.nav
{
    display: flex;
    
    
}
ul>li
{
    padding: 15px;
    list-style: none;
    font-weight: 600;
    
}

ul>li:hover
{
    
    color: #e24c27;
    border-radius: 10%;
    transform:scale(1.06);
    transition: 0.2s;
    
}
ul>li>a
{
    text-decoration: none;
    color: black;
}

.logo
{
    font-size: 30px;
    font-weight:800 ;
    color: #e24c27;
    
    
}

.logo:hover
{
    transform: translateX(12%);
    transition: 1s;
    color:black;
    
    cursor:move;
}

.hamb
{
    display: none;
}



.main-div
{
    background-color: rgb(37, 36, 36);
    height: 800px;
    position: relative;
    border-radius: 0px 0px 60% 0px;
}

.trainer01
{
    width:900px;
    height:800px;
    position: absolute;
    right:0%;
}

.orange-bg
{
    background-color: #ff4c00;
    height: 800px;
    width:50%;
}

.back-image
{
    background: rgb(47,49,62);
    background: linear-gradient(210deg, rgba(47,49,62,0.9837184873949579) 0%, rgba(255,255,255,0.7988445378151261) 82%);
    background-size: cover;
    height: 600px;
    width: 90%;
    border-radius: 350px 0px 350px 0px;
    position: absolute;
    top: 10%;
    left: 6%;
}

.trainer-02
{
    position: absolute;
    top:10%;
    left: 6%;
    height: 600px;
    width: 44%;
    border-radius: 350px 0px 0px 0px;
    opacity: 0.8;
    
}

.train-hed
{
    font-family: 'Oswald',Helvetica,Arial,Lucida,sans-serif;
    font-style: italic;
    font-size: 80px;
    word-spacing: 20px;
    letter-spacing: 15px;
    font-weight: bolder;
    color: white;
    position: absolute;
    top: 35%;
    left:30%;
    
        -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                
    
}

 @-webkit-keyframes train-hed {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(100px);
              transform: translateX(100px);
    }
  }
  @keyframes slide-right {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(100px);
              transform: translateX(100px);
    }
  }
  

.by
{
    font-size: 20px;
    font-weight:600;
    letter-spacing: 3px;
    position: absolute;
    top: 53%;
    right: 23%;
}

.invest
{
    font-style: italic;
    font-weight: bold;
    font-size:18px ;
    letter-spacing: 6px;
    color: white;
    position: absolute;
    top: 30%;
    right:14%;

    
        -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
               
   
}

 @-webkit-keyframes invest {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-100px);
              transform: translateX(-100px);
    }
  }
  @keyframes slide-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-100px);
              transform: translateX(-100px);
    }
  }
  

.line
{
    background-color: #ff4c00;
    height: 2px;
    width: 160px;
    position: absolute;
    top: 35%;
    right:10%;

    
        -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                

   
}

 @-webkit-keyframes line {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-100px);
              transform: translateX(-100px);
    }
  }
  @keyframes slide-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-100px);
              transform: translateX(-100px);
    }
  }
  


.start-bt
{
    background-color: #ff4c00;
    height: 70px;
    width: 250px;
    font-style: italic;
    font-weight: bolder;
    font-size: 18px;
    color: white;
    position: absolute;
    bottom: 30%;
    right: 28%;
    border-radius: 60px;
    text-align: center;
    line-height: 70px;
    letter-spacing: 6px;
    box-shadow: #ff4c00 0px 1px 15px;

    -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                


}
@-webkit-keyframes start-bt {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-100px);
              transform: translateX(-100px);
    }
  }
  @keyframes slide-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    50% {
      -webkit-transform: translateX(-100px);
              transform: translateX(-100px);
    }
  }
  

.start-bt:hover
{
    transform:scaleX(1.09);
    transition: 0.5s;
    cursor: pointer;
}

.nom
{
    font-size: 200px;
    font-weight:700;
    font-style: oblique;
    text-shadow:lightgray 6px 6px 80px;
    color: white;      
}
.nom:hover
{
    transform: scale(1.06);
    transition:0.5s;
    cursor: pointer;
    
}

.lines
{
    position:relative;
    padding-left:150px;
}
.nom-1
{
    font-style: italic;
    font-weight: bold;
    letter-spacing: 10px;
     
    position: relative;
}

.line-1
{
    background-color: #ff4c00;
    height: 2px;
    width: 160px;
    position: absolute;
    top:102%;
    left:4%;
}

.fitnes-box
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 100px;
    margin-left: 80px;
    margin-right: 80px;
}

.box
{
    
    height: 350px;
    width: 350px;
    
}

.fitness-1
{
    font-size: 21px;
    font-weight: bold;
    font-style: italic;
    text-align: justify;  
}
.fitness-2
{
    font-size:18px;
    font-family: arial;
    text-align: justify;  
    line-height: 30px;
}

.fitness-22
{
    font-size:18px;
    font-family: arial;
    text-align: justify;  
    line-height: 30px;
}

.book-bt
{
    color: #ff4c00;
    background-color: white;
    height: 60px;
    width: 350px;
    box-shadow: lightgray 5px 5px 60px;
    margin-top: 30px;
    font-weight: bold;
    font-size: 18px;
    font-style: italic;
    letter-spacing: 6px;
    text-align: center;
    line-height: 60px;
    border-radius: 60px;
}
.book-bt:hover
{
    background-color: #ff4c00;
    color: white;
    transform:translate(5%);
    transition: 0.5s;
    cursor: pointer;
}

.get-shape
{
    position: relative;
    height: 600px;
}

.personal-trainer-05
{
    height: 550px;
    width: 450px;
    border-radius: 200px 0px 0px 0px;
    position: absolute;
    top: 25%;
    right: 12%;
}

.lets-go
{
    font-size: 20px;
    font-style: italic;
    letter-spacing: 4px;
    position: absolute;
    left: 20%;
    top: 50%;
}

.line-222
{
    background-color: #ff4c00;
    height: 2px;
    width: 80px;
    position: absolute;
    top:56%;
    left:17%;
}

.get-inn
{
    font-size: 40px;
    font-weight: bold;
    font-style: italic;
    position: absolute;
    top: 60%;
    left: 20%;
    letter-spacing: 7px;
}

.personal-trainer-13
{
    height: 500px;
    width: 350px;
    border-radius: 0px 0px 170px 0px;
    position: absolute;
    top: 75%;
    left: 22%;
    opacity:0.3;
}

.personal-trainer-13:hover
{
    opacity:1.5;
    cursor: move;
    
    transition: 1s;

}

.real-work
{
    font-style: italic;
    font-weight: bold;
    font-size:18px ;
    letter-spacing: 6px;
    color: black;
    position: absolute;
    top: 125%;
    right:14%;
}

.line-3
{
    background-color: #ff4c00;
    height: 3px;
    width: 170px;
    position: absolute;
    top:123%;
    right:12%;
}

.certified-trainer
{
    display: flex;
    justify-content:space-evenly;
    margin-left: 50px;
    margin-right: 50px;
    padding-top:35%;
}

.certfied-box-1
{
    height: 400px;
    width: 300px;
    text-align: center;
}

.certfied-box-1:hover
{
    transform: translateY(-10%);
    transition:1.5s;
}


.certfied-box-11
{
    height: 400px;
    width: 300px;
    text-align: center;
}
.certfied-box-11:hover
{
    transform: translateY(-10%);
    transition:1.5s; 
}
.icons
{
    font-size: 30px;
    background-color: #ff4c00;
    height:70px;
    width: 70px;
    border-radius: 60%;
    text-align: center;
    padding-top: 20px; 
}

.trainer-heding
{
    font-size: 40px;
    font-weight: bolder;
    font-style: italic;
    letter-spacing: 6px;
    padding-top: 20px;
}

.train-para
{
    font-family: arial;
    padding-top: 15px;
    line-height: 25px;
}

.certfied-box-2
{
    height: 400px;
    width: 300px;
    text-align: center;
    margin-top: 50px;
}

.certfied-box-2:hover
{
    transform: translateY(-10%);
    transition:1.5s;
}

.trainer-heding-1
{
    font-size: 50px;
    font-weight: bolder;
    font-style: italic;
    letter-spacing: 6px;
    padding-top: 20px;
}

.value
{
    margin-top: 60px;
    position: relative;
}

.value-bg
{
    background-color: #ff4c00;
    height: 700px;
    width: 100%;
    clip-path: polygon(0 2%, 100% 60%, 100% 100%, 0% 100%);
    
}

.trainer-07
{
    border-radius: 100% 0px 0px 0px;
    height: 700px;
    width: 700px;
    position: absolute;
    top:0%;
    right:0%;
}



.value-go
{
    color: white;
    font-size: 20px;
    font-style: italic;
    letter-spacing: 4px;
    position: absolute;
    left: 10%;
    top: 35%;
}

.line-4
{
    background-color:white;
    height: 2px;
    width: 150px;
    position: absolute;
    top:40%;
    left:7.5%;
}

.offers
{
    font-size: 45px;
    font-weight: bolder;
    font-style: oblique;
    color: white;
    position: absolute;
    top: 41%;
    left: 10%;
    letter-spacing: 6px;
    text-shadow: orange 20px 20px 40px;
}

.list
{
    position: absolute;
    top: 50%;
    left: 15%;
}

ul>li
{
    
    color: white;
    line-height: 30px;
    font-family: arial;
    font-size: 18px;
    list-style: none;
}

.cont-bt
{
    color: #ff4c00;
    background-color: white;
    height: 60px;
    width: 200px;
    margin-top: 30px;
    font-weight: bold;
    font-size: 16px;
    font-style: italic;
    letter-spacing: 6px;
    text-align: center;
    line-height: 60px;
    border-radius: 60px;
    position: absolute;
    bottom: 2%;
    right: 70%;
}
.cont-bt:hover
{
    background-color: #ff4c00;
    border: white solid 1px;
    color: white;
    transform:translate(5%);
    transition: 0.5s;
    cursor: pointer;
    
}

.pain-gain
{
    position: relative;
    height: 500px;
}
.no-pain
{
    font-size: 20px;
    font-style: italic;
    letter-spacing: 4px;
    position: absolute;
    top: 15%;
    left: 20%;
}

.line-6
{
    background-color: #ff4c00;
    height: 2px;
    width: 120px;
    position: absolute;
    top:22%;
    left:17%;
}

.real-p
{
    font-size: 70px;
    font-weight: bolder;
    font-style: italic;
    letter-spacing: 15px;
    position: absolute;
    top: 25%;
    left: 18%;
}

.real-p1
{
    font-size: 70px;
    font-weight: bolder;
    font-style: italic;
    letter-spacing: 15px;
    position:absolute;
    top: 45%;
    left: 20%;
}

.work-bt
{
    color:white;
    background-color:#ff4c00 ;
    height: 60px;
    width: 250px;
    margin-top: 30px;
    font-weight: bold;
    font-size: 16px;
    font-style: italic;
    letter-spacing: 6px;
    text-align: center;
    line-height: 60px;
    border-radius: 60px;
    position: absolute;
    bottom: 16%;
    left: 40%;
}
.work-bt:hover
{
    background-color: #ff4c00;
    border: white solid 1px;
    color: white;
    transform:translate(5%);
    transition: 0.5s;
    cursor: pointer;  
}

.price-plans
{
    clip-path: polygon(100% 0, 100% 38%, 100% 100%, 0 100%, 0 22%);
    
    height:1100px;
    width: 100%;
    background-color: #ff4c00;
    position: relative;
}
.pr_1

{
    color: white;
    position: absolute;
    top: 20%;
    left:30%;
    font-size: 70px;
    font-style: italic;
    letter-spacing: 15px;
    font-weight: bold;
}

.pr_11
{
    font-family: arial;
    font-size: 20px;
    position: absolute;
    top: 30%;
    left: 30%;
    color: white;
}

.pr_111
{
    font-family: arial;
    font-size: 20px;
    position: absolute;
    top: 33%;
    left: 40%;
    color: white;
}



.plan
{
   
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-left: 80px;
    margin-right: 80px;
    
}

.plan-box
{
    height: 470px;
    width: 300px;
    background-color: white;
    text-align: center;
    line-height:35px;
    
    box-shadow: lightgray 6px 6px 60px;
    margin-top: 40%;
}

.three
{
    
    font-size: 65px;
    color:black;
}
.three-1
{
    
    font-size: 65px;
    color:black;
    padding-top: 60px;
    
}

.three-11
{
    padding-top: 30px;
    padding-bottom: 30px;
}



.plan-box-11
{
    height: 470px;
    width: 300px;
    background-color: white;
    text-align: center;
    line-height:30px;
    
    box-shadow: lightgray 6px 6px 60px;
    margin-top: 40%;
}

.plan-box-22
{
    height: 470px;
    width: 300px;
    background-color: white;
    text-align: center;
    line-height:35px;
    
    box-shadow: lightgray 6px 6px 60px;
    margin-top: 40%;
}

.getstart_bt
{
    background-color: #ff4c00;
    height: 50px;
    width: 230px;
    border-radius: 60px;
    line-height:50px ;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    letter-spacing: 3px;
    color: white;
    margin: auto;
    margin-top: 15px;

}

.getstart_bt:hover
{
    transform: scale(1.04);
    transition: 0.2s;
    border:#ff4c00 solid 2px;
    background-color: white;
    color:#ff4c00;
}

.org_bg
{
    background-color: #ff4c00;
    background-size: cover;
    background-repeat: no-repeat;
    height:900px;

}

.pr_a

{
    color: white;
    text-align: center;
    font-size: 70px;
    font-style: italic;
    letter-spacing: 15px;
    font-weight: bold;
}

.pr_aa
{
    font-family: arial;
    font-size: 20px;
   text-align: center;
    color: white;
}

.pr_aaa
{
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: white;
}

.pass
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    
    align-items: center;
    
    width:80%;
    height: 150px;
    
    margin: auto;
    margin-top:2%;
    
}
.pass-1
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    
    align-items: center;
    
    width:80%;
    height: 150px;
    
    margin: auto;
    margin-top:2%;
    
}
.tick-1
{
    height: 60px;
    width: 60px;
    
}
.pass-1:hover
{

    box-shadow: black 0.1px 0.1px 12px;
    transform:scale(1.02);
    transition: 0.5s;
}


.pass:hover
{

    box-shadow: black 0.1px 0.1px 12px;
    transform:scale(1.02);
    transition: 0.5s;
}

.tick
{
    height: 60px;
    width: 60px;
    
}

.per-pass
{
    font-size: 25px;
    letter-spacing:3px;
    font-weight: bold;
    font-style: italic;
}

.footer_login
{
    background-image:linear-gradient(135deg,rgba(38,45,63,0.8) 0%,#262d3f 100%),url("../css/assets/images/personal-trainer-08.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: contain;
    height: 600px;
    width: 100%;
    
}
.input
{
padding: 14px;
font-size: 16px;
color: #666;
background-color: #fff;
width: 40%;
font-weight: 400;
border-width: 0;
border-radius: 3px;
line-height: 1.9em;
border-radius: 100px 100px 100px 100px;
margin-top: 10px;

}

.footer_login
{
    
    font-family: 'Oswald',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    font-size: 40px;
    color: white;
    letter-spacing: 0.18em;
    line-height: 1.4em;
    text-shadow: 0em 0em 0.4em rgba(255,255,255,0.6);
    text-align: center;
    display: block;
    padding-top: 8%;
}

.proin
{
    font-size: 15px;
    font-family: arial;
    letter-spacing: 0;
    padding-top: 25px;
}
.proin-1
{
    font-size: 15px;
    font-family: arial;
    letter-spacing: 0;
    
}
.input-bt
{
    width: 40%;
border-width: 10px;
border-color: #ff4c00;
border-radius: 100px;
letter-spacing: 5px;
font-size: 18px;
font-weight: 900!important;
font-style: italic!important;
text-transform: uppercase;
padding-right: 2em;
padding-left: 0.7em;
background-color: #ff4c00;
margin: auto;
margin-top: 10px;
}

.input-bt:hover
{
    transform: scale(1.02);
    color: black;
    transition-duration: 300ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
}

.powered
{
    display: block;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: black;
    color: #8b8e92;
    text-align: center;
    padding-top: 20px;
    font-size: 20px;
}
.icons-22
{
    font-size: 40px;
    word-spacing: 20px;
}