@import url('https://fonts.googleapis.com/css2?family=Anybody:ital,wght@0,100..900;1,100..900&display=swap');
 
 
 
 *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.container{
    margin-inline: outo;
    max-width: 1110%;
}
body{
   

    font-family: "Anybody", sans-serif;
  
    /* overflow: hidden; */
}

.video{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
    height: 20px;
    background: rgba(250, 250, 250, 0.1);
    z-index: -1;
    /* margin-top: 2rem; */
    color: rgba(35, 45, 57, 0.8);;
    object-fit: cover;
 
}
em{
    color: #E74C3C;
}

.header{
    /* height: 4.5rem;
    position: sticky;
    width: 100%;
    top: 0;

    background-color: linear-gradient(rgba(212, 146, 146, 0.5), rgba(30, 24, 24, 0.5)),; */


    position: sticky;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
    height: 80px;
    background: rgba(250, 250, 250, 0.1);





}    
.bt{
    background-color: #ed563b;
    color: white;
}
.top-nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 2rem;
}
.nav-links {
    display: flex;
   gap: 3rem;
    /* flex-direction: column; */
    align-items: center;
    padding: 1rem 0;
    margin-left: 13rem;
    /* width: 100%; */
 
}
 li{
    list-style: none;
  
 
   
}
 .nav-links li a{
    text-decoration: none;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 500;
  
   
}
.nav-links a:hover{
    color: #ed563b;
}       
.logo{
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    gap: 1rem;
}
.logo .h2{
    color:#ed563b ;
}

.btn{
    background-color: #ed563b;
    color: #fff;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    width: 100px;
    height: 40px;
}
.general{
   
    text-align: center;
    gap: 1rem;
    margin-top: 20rem;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 400;
}
.general .par{
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}
.general h1{
    color: #fff;
    font-size: 5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}
 .btns{
    background-color: #ed563b;
    color: #fff;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    width: 200px;
    height: 40px;
    text-transform: uppercase;
    
}

 .sec {
    font-size: 1rem;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: #070606;
    text-transform: uppercase;
  margin-top: -2rem;
    text-align: center;
   
}
 .second{
    
    height: 400px;
        background: linear-gradient(rgba(152, 151, 151, 0.5), rgba(111, 111, 111, 0.5)), url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW56XmCyz_fzDxEI3tCqmJQ9xbCYv8qMk3TH516qVrTsbDe329WKB8YreoZu3QuJvfi28&usqp=CAU') center/cover no-repeat;
        display: flex;

        justify-content: center;
        align-items: center;
        padding-block: 2rem;
        margin-block: 5rem;
        margin-top: 10rem;
        width: 100%;
  
 }
 .qoral2{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-transform: uppercase;
    align-items: center;
    align-content: center;
    text-align: center;
    color: white;
 }
 .qayb{
    font-size: 36px;
    text-transform: uppercase;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
    
 }
 .pa{
    font-size: 16px;
    color: #fff;
    margin: 15px 0px 25px 0px;
    font-weight: 700;
    margin-bottom: 2rem;
  
  text-align: center;
    /* align-content: center; */

 }
 /* .links {
    margin-bottom: 20px;
   
} */
.links a {
    /* text-transform: capitalize; */
    text-transform: capitalize;
    width: 400px;
    height: 100px;
    padding: 30px 30px;
    display: inline-block;
    background-color: #fff;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    font-size: 19px;
    color: #232d39;
    letter-spacing: 0.5px;
    font-weight: 600;
    transition: all 0.3s;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    margin: 3rem;
    
   
    
}

.links a:hover {
    background-color: white;
    color: #ed563b;
}

.row {
    display: flexbox;
    display: flex
;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    margin-bottom: 0rem;
}
.section-heading h2 {
    font-size: 28px;
    font-weight: 800;
    color: #232d39;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: rem;
    margin-bottom: 0px;
    text-align: center;
}
.section-heading img {
    margin: 20px auto;
}
/* p {
    font-size: 14px;
    line-height: 25px;
    color: #ea3a3a;
} */

.l {
    margin-bottom: 0px;
}

ul {
    margin-bottom: 0px;
}
ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.feature-item {
    display: inline-block;
    margin-bottom: 60px;
}

ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}
.feature-item .right-content {
    display: inline;
}

.feature-item .right-content h4 {
    margin-top: 0px;
    margin-bottom: 7px;
    letter-spacing: 0.25px;
    color: #232d39;
    font-size: 19px;
    font-weight: 600;
    text-transform: capitalize;
}




.feature-item .right-content a.text-button {
    margin-top: 7px;
    display: inline-block;
    font-size: 13px;
    text-transform: uppercase;
    color: #ed563b;
    font-weight: 500;
}







.feature-item {
    display: inline-block;
    margin-bottom: 60px;
}


ul {
    margin-bottom: 0px;
}
ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}


    .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }



    .offset-lg-3 {
        margin-left: 25%;
    }



#imageContainer img  a{
    /* max-width: 100%; */
  
  bottom: 20rem;
  max-width: 100%;

  
 
}
/* .links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.links a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #ff5733;
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 250px;
    transition: background 0.3s;
}
.links a:hover {
    background-color: #ffecec;
} */
.links img {
    width: 30px;
    height: 30px;
    /* margin-right: 40px; */
}
#imageContainer {
   
    display: flex;
    justify-content: center;
    margin-left: 100px;
    position: relative;
   
}

#displayedImage {
    position: absolute;
    /* width: 400px; */
    /* height: auto; */
    border-radius: 1px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    top: -710px;
   margin-left: 2rem;
   width: 300px;
   height: 200px;
   
}


    .b a{
        
        display: inline-block;
        margin-top: 2px;
        background: #E74C3C;
        color: white;
        padding: 8px 12px;
        border-radius: 5px;
        text-decoration: none;
        font-size: 14px;
        text-align: center;
        align-items: center;
        align-content: center;
        width: 400px;
        height: 70px;
        margin-right: 50rem;

    }
    .training{
        position: absolute;
        top: -380px;
       margin-left: 27rem;
       font-size: 1rem;
       margin-top: 2rem;
       color: #070606;
      
    }
    .head{
        font-size: 23px;
        font-weight: 700;
        color: #232d39;
        letter-spacing: 0.5px;
        margin-bottom: 20px;
        margin-top: 30px;
    }
    .pa{
        font-size: 14px;
        color:rgb(65, 63, 63);
        margin-bottom: 28px;
    }
    .btnss a{
        display: inline-block;
    font-size: 15px;
    padding: 12px 20px;
    background-color: #ed563b;
    color: #fff;
    text-align: center;
    font-weight: 400;
    text-transform: uppercase;
    transition: all .3s;
    text-decoration: none;
    }
    .last{
        
      
        height: 800px;
        background: linear-gradient(rgba(2, 3, 42, 0.9), rgba(5, 7, 20, 0.9)), url("https://images.pexels.com/photos/4376869/pexels-photo-4376869.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1") center/cover no-repeat;
        display: flex;



        justify-content: center;
        align-items: center;
        padding-block: 2rem;
        margin-block: 5rem;
        margin-top: 8rem;
        width: 100%;
  
    }
    
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f0f0;
        color: white;
        text-align: center;
    }
    .tabs {
        margin: 20px;
    }
    .tabs button {
        background: none;
        border: none;
        color: white;
        font-size: 18px;
        margin: 5px;
        cursor: pointer;
    }
    .tabs button.active {
        color: red;
    }
    .schedule {
        display: none;
        margin-top: 20px;
    }
    table {
        width: 80%;
        margin: auto;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid white;
        padding: 10px;
        text-align: center;}




        #trainers .trainer-item {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
            padding: 40px;
        }
    
        

 .trainer-item {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    width: 310px;
    height: 500px;
  
  
   
 }
 .image-thumb img{
    width: 90%;
    padding: 2rem 1rem 1rem 1rem;
    


 }
 .down-content{
    margin-right: 7rem;
    text-transform: lowercase;
    margin-top: 0.125rem;
    margin-left: 0.9rem;
 }
 .down-content span{
    margin-top: -1rem;
    margin-right: 5rem;
    font-size: 10px;
    margin-top: 0.125rem;
    font-weight: 500;
    color: rgb(237, 86, 59);
    display: inline-block;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: lowercase;

 }
 .down-content h4{
    font-size: 16px;
    font-weight: 600;
    color: rgb(35, 45, 57);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    margin-right: 2.7rem;
 }

.down-content p{
    font-size: 14px;
    margin-left: 0.9rem;
    line-height: 25px;
    color: #7a7a7a;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  
}
.fa {
    display: inline;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
  
    color: #232d39;
   
}
.social-icons{
    display: flex;
    gap: 1rem;
   
}
.all
{  display: flex;
    gap: 5rem;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    margin-left: 5rem;
    /* height: 100px; */
  
}

.maps{
    
  
    background: linear-gradient(rgba(2, 3, 42, 0.9), rgba(5, 7, 20, 0.9)), url("https://images.pexels.com/photos/4376869/pexels-photo-4376869.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1") center/cover no-repeat;
    
    /* justify-content: center;
    align-items: center; */
    margin-bottom: 20rem;
  margin-left: rem;
  width: 500px;
  height: 400px;

}
.all-of-them{
    display: flex;
}


.row{
    display: flex;
    margin-top: 18rem;
}
.contact-form{
   
    background-color: hsl(0, 0%, 100%);
    margin: 5rem;
    width: 400px;
 
    height: 300px;
    padding:1rem


}
 input{
    padding: 0.128rem;
}
.sub{
    margin-right: 20rem;
}
button{
    background-color: #C0392B;
    color: white;
    border: none;
    height: 30px;
    width: 100px;
}
footer {
    text-align: center;
    padding: 30px 0px;
    
}
/* header, nav, section, article, aside, footer, hgroup {
    display: block;
} */
/* @media (min-width: 768px) {
    .continer {
        max-width: 720px;
    }
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
} */

.foter{
    margin-top: 2rem;
    margin-left: -55rem;
    flex-direction: column;
    align-items: center;
    align-content: center;
    text-align: center;
}
    
footer p {
    color: #232d39;
    font-size: 13px;
}
p {
    font-size: 14px;
    line-height: 25px;
    color: #7a7a7a;
}


.row {
    display: -ms-flexbox;
    display: flex
;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}element.style {
    display: block;
}





.menu-link  li a{
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 500;
    color:white;

}

.row1{
    display: -ms-flexbox;
    display: flex
;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}




header{
    position: sticky;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
    height: 80px;
    background: rgba(250, 250, 250, 0.1);
    color: white;

 }
 
    .desktop-menu{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        padding: 0 2rem;
    }
   
    .menu-link{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding: 0 2rem;
        gap: 1.25rem;

    }
    .mobile-menu  li a{
        text-decoration: none;
        font-size: 1.25rem;
        font-weight: 500;
        color:black !important;
       
    }

    .navigation h1{
       color: #070606;
    }
    .menu-link li{
        list-style: none;
      
    }
    .menu-link  li a{
        text-decoration: none;
        font-size: 1.25rem;
        font-weight: 500;
        color: white    
    }
    .menu-link  li a:hover{
        color: #E74C3C;
    }
    .desktop-menu h1{
    font: size 1.5625rem; 
    color: white;
    font-weight: 700;
    }


    .humberger{
        display: none;
    }
   
    .mobile-menu{
        display: none;
    }
    @media( Max-width: 768px){
        .video{
            max-width: 100%;
            height: auto;
        }

        .desktop-menu {
            display: none;
        }
           .row{
            max-width: 100%;
            height: auto;
           }
        
           .second{
            max-width: 100%;
            height: auto;
           }
           .last{
            max-width: 100%;
            height: auto;
           }
        header{
                height: 0;
            }
            i{z-index: 11111;}
            .humberger{
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 2%;
                padding: 0.625rem;
                background-color:#5f6ad4;
                height: 2.5rem;
                width: 2.5rem;
                color: #1b1b1a;
                font-size: 2rem;
                right: 5%;
                border-radius: 50%;
                font-size: 1.25rem;
            }
            .mobile-menu{
                display: flex;
                align-items: center;
                position: fixed;
                background-color: white;
                inset: 0 0 0 0;
             margin-right: 20rem;
                bottom:85rem;
                /* position: sticky; */
                justify-content: center;
                transform: translateX(0%); 
                transition: transform 350ms ease-in-out;  
        }
        .mobile-menu[data-visible="false"]{
            transform:translateX(100%)
        }
        .humberger i[data-visible="true"]{
            display: block;

        }
        .humberger i[data-visible="false"]{
            display: none;
        }
        .mobile-menu .navigation{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 5rem;
            /* gap: 1.5rem; */
            
           
          
        }
        img {
            /* max-width: 100%;
            height: auto; */
        }
    .mobile-menu .navigation{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 5rem;
        /* gap: 1.5rem; */
        
       
      
    }
.mobile-menu .navigation .menu-link{
    display: flex;
    flex-direction: column;

    /* justify-content: center; */
    align-items: center;
}
.offset-lg-3 {
    margin-left: 25%;
}

.row{
    flex-direction: column;
    max-width: 100%;
    height: auto;
}
.view{
    flex-direction: column;
    max-width: 100%;
    height: auto;
}
.all-of-them{
    flex-direction: column;
    max-width: 100%;
    height: auto;
}

}