.page-nav{
    background: #e7e7e7;
    font-size: 14px;
    padding: 5px 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.page-nav p {
    padding-top: 10px;
    width: 80%;
    margin: 0 auto;
}
.page-nav p a{
    color: #111;
    text-decoration: none;
}
@media(max-width:450px){
   .page-nav p {
    font-size: 11px;
    } 
    .page-nav p {
        padding-top: 5px;
        width: 94%;
    }
}

/*============================================ About ==============================================================*/

.about h2{
   font-weight: 600;
}
.about .about-us{
  text-align: center;
}
.about .about-us img{
 height: 250px;
 width: 250px;
 border-radius: 50%;
}
.about .about-us h2{
 margin: 2% 0 1%;
}
.about .about-us p{
  width: 70%;
  margin: 2% auto;
}
.about .mission{
   margin: 5% 0;
}
.about .mission .empty{
    width: 100%;
    height: 200px;
    background: #2C4358;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
}
.about .mission .mission-cont{
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
.about .mission .mission-cont img{
    width: 90%;
    height: 400px;
    margin: -100px auto 0;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.about .mission .mission-cont .mission-cont1{
    text-align: left;
    margin: 3% 0 ;
}
.about .mission .mission-cont .mission-cont1 h2{
    text-align: left;
}
.about .mission .mission-cont .mission-cont1 p{
    text-align: left;
    margin: 5% 0 ;
    font-size: 16px;
}
/* Why Choose Us */
.why_choose{ 
  width:100%; 
  margin: 0 0 50px; 
}
.why_choose .row{ 
  margin: 3% 0; 
}
.text-down { 
  position:relative; 
  overflow:hidden;
}
.text-down img{ 
  width:100%; 
  height:200px;
}
.text-down .textbox { 
  width:100%; 
  height:300px; 
  position:absolute; 
  top:0; 
  left:0; 
  margin-top:-255px;
  background-color: #03063161; 
  -webkit-transition: all 0.7s ease; 
  transition: all 0.7s ease; 
}
.text-down:hover .textbox { 
  margin-top:0;
}
.details{ 
  width:100%; 
  padding: 20px 10px 0;  
  text-align:center; 
  color:rgba(255,255,255,1); 
  font-size: 16px;
}
.text { 
  text-align:center; 
  padding-top: 70px; 
  color:rgba(255,255,255,1);
}
.top { 
  padding-top:10px;
}
@media(max-width: 992px){
    .about .mission .mission-cont img{
        width: 100%;
        height: 300px;
        margin: -50px auto 0;
    }
    .about .mission .mission-cont .mission-cont1 h2{
        text-align: center;
    }
    .about .mission .mission-cont .mission-cont1 p{
        text-align: justify;
    }
}
@media(max-width: 767px){
    .about .about-us p{
        width: 90%;
        margin: 2% auto;
        text-align: justify;
    }
    .about .about-us h2{
        margin: 5% 0;
    }
    .about .about-us p{
        width: 90%;
        margin: 3% auto ;
        font-size: 14px;
        text-align: justify;
    }
    .about .mission{
        margin: 10% 0 5%;
        
    }
    .about .mission .empty{
        height: 100px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
    }
    .about .mission .mission-cont {
       width: 90%;
    }
    .about .mission .mission-cont .mission-cont1 p{
        text-align: justify;
        font-size: 14px;
    }
    .details{ 
        font-size: 14px;
    }

}
@media(max-width: 450px){
   .about h2{
        font-weight: 600;
    }
    .about .about-us img{
        height: 200px;
        width: 200px;
    }
    .about .about-us p{
        width: 90%;
        font-size: 12px;
    }
    .about .mission .empty{
        height: 80px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }
    .about .mission .mission-cont img{
        width: 96%;
        height: 200px;
        margin: -50px auto 0;
    }  
    .about .mission .mission-cont .mission-cont1 p{
        font-size: 12px;
    }
    .details{ 
        font-size: 12px;
    }
}
/*============================================ coach ==============================================================*/

.coach{
    margin: 3% 0;
}
.coach h2{
    text-align: center;
    margin: 3% 0;
}
.coach .coach1{
   width: 80%;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
.coach .coach1 a{
   padding: 20px;
   text-decoration: none;
}   
.coach .coach1 a .item {
   border-radius: 5px;
   box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}   
.coach .coach1 a .item .img{
 width: 100%;
 height: 170px;
 overflow: hidden;
}   
.coach .coach1 a .item .img img{
 width: 100%;
 height: 170px;
 border-top-right-radius: 5px;
 border-top-left-radius: 5px;
 box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 transition: 1s ease-in-out;
}   
.coach .coach1 a .item img:hover{
 transform: scale(1.1);
}   
.coach .coach1 a .item h4{
 color: rgb(44, 44, 44);
 font-size: 16px;
 padding: 10px 5px;
}   
@media(max-width:992px){
    .coach .coach1{
        width: 94%;
    }
}
@media(max-width:450px){
    .coach .coach1 a{
        padding: 5px;
    }  
    .coach .coach1 a .item .img{
        height: 100px;
    }   
    .coach .coach1 a .item .img img{
        height: 100px;
    } 
    .coach .coach1 a .item h4{
        font-size: 14px;
        padding: 10px 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; 
        width: 100%;
    }   
}

/*============================================ course ==============================================================*/
.course{
   margin-bottom: 3%; 
}
.course h2{
    margin: 5% 0 2%;
    font-size: 40px;
}
.course .course1{
    justify-content: space-around;
}
.course .course11{
   margin-top:30px;
}
.course p{
    width: 70%;
    margin: 2% auto 5%;
    text-align: center;
}
.course a {
   text-decoration: none;
}
.course a .course2 {
    width: 80%;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.course a .course2 img {
    width: 100%;
    height: 120px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
.course a .course2 h6 {
    padding: 10px 5px;
    text-decoration: none;
}

@media(max-width:992px){
    .course p{
        width: 90%;
        margin: 2% auto 5%;
        text-align: center;
    }
    .course a .course2 {
        width: 90%;
    }
}
@media(max-width:767px){
    .course h2{
        margin: 5% 0 2%;
        font-size: 30px;
    }
    .course p{
        font-size: 14px;
    }
}
@media(max-width:450px){
    .course h2{
        font-size: 20px;
    }
    .course p{
        width: 100%;
        font-size: 12px;
        text-align: justify;
    }
    .course a .course2 {
        width: 96%;
        margin: 5% auto;
    }
    .course .course11{
        margin-top:10px;
    }
    .course a .course2 img {
        width: 100%;
        height: 100px;
    }
    .course a .course2 h6 {
       font-size: 14px;
    }
}

/*============================================ shop ==============================================================*/

.shop{
    margin: 3% 0;
}
.shop h2{
   font-size: 40px;
}
.shop .shop1{
    width: 80%;
    margin: 0 auto;
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.shop .shop1 a{
  text-align: center; 
  text-decoration: none; 
  margin: 5% 0;
  padding:20px 10px;
  border-radius: 5px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.shop .shop1 a:hover{
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  transition: 5s ease-in-out;
}
.shop .shop1 .item .img{
    overflow: hidden;
}
.shop .shop1 .item .img img{
    width: 50px;
    height: 50px;
    overflow: hidden;
}
.shop .shop1 .item .item1 h4{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
    width: 100%;
    font-size: 16px;
    margin: 10px 0;
    color: #424242;
}
@media(max-width:992px){
    .shop .shop1{
        width: 94%;
        gap: 10px;
    }
}
@media(max-width:767px){
    .shop  h2{
        font-size: 30px;
    }
}
@media(max-width:450px){
    .shop h2{
        margin: 5% 0;
        font-size: 20px;
    }
    .shop .shop1 a{
      padding:10px 5px;
    }.shop .shop1 .item .img img{
        width: 30px;
        height: 30px;
        overflow: hidden;
    }
    .shop .shop1 .item .item1 h4{
        font-size: 12px;
    }
}


/*============================================ Contact ==============================================================*/

.contact-img{
    text-align: center;
}
.contact-img img{
    border-radius: 10px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
@media(max-width:767px){
    .contact-img{
      padding: 0 20px;
    }
}
@media(max-width:575px){
    .contact-img{
       padding: 20px 10px;
       margin: 3% 0;
    }
    .contact-img img{
       width: 90%;
       margin: 0 auto;
       height: 200px;
    }
}


/*============================================ Animation ==============================================================*/       

h2, p , img{
   animation: app linear;
   animation-timeline: view();
   animation-range: entry 0% cover 30%;
}

  @keyframes app {
    from {
      transform: scale(0.4);
    }
    to {
      transform: scale(1);
    
    }
  }