@import url('fonts.css');
@font-face {
    font-family: 'FinsFont';
    src: url('../font/arbfonts.com-(21)/arbfonts-dinnextltarabic-medium-2.ttf') format('truetype');
}
*:not(.fas) {
    font-family: 'FinsFont' !important;
}
.hide{
    display:none;
}
:root {
    --main: #f99d32;
    --Blue: #4ebfcc;
    --Dark-Blue: #108694;
    --Gray: #fdf7f7;
    --Light-Blue: #e1fbff;
    --Orange:#f37227;
    --Light-Orange:#ffd8ba;
    --Brown:#5f5f5f;
}
body {
    background-color: var(--Gray);
}
.Logo{
    width:180px;
}
#Menu{
    direction:rtl;
    padding:25px 100px;
    background-color:#fff;
}
#Menu .nav-link{
    font-size:22px;
    color:var(--main);
}
#Menu .nav-item .nav-link:hover{
    padding:3px 8px 8px 8px;
    border-radius:4px;
    color:#fff;

    background: linear-gradient(to left, var(--Blue) 50%, #fff 50%) right;
    background-size: 200%;
    transition: .3s ease-out;
}
#Menu .dropdown-item:hover{
    background-color:var(--Dark-Blue);
}
#Menu .dropdown-item {
    color:#fff;
}
#navbarNavDropdown ul{
    width:100%;
    justify-content: space-around;
}
#Menu .dropdown-menu {
    background-color: var(--Blue);
    border-radius: 4px;

    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
    }
    0% {
        -webkit-transform: scale(.7,1.3)
    }
    30% {
        -webkit-transform: translateY(-2px);
    }
    40% {
        -webkit-transform: scale(1,1)
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    0% {
        transform: scale(.7,1.3)
    }
    30% {
        transform: translateY(-2px);
    }
    40% {
        transform: scale(1,1)
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}

.navbar .nav-item:hover .dropdown-menu{ display: block; }

.Fins {
    position: fixed;
    width: 150px;
    bottom: 0px;
    z-index: 999;
}
.flipped {
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -khtml-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
}
#SeaWave1 {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    background-image: url('../img/seawave.png');
    background-repeat: repeat-x;
    z-index: 1000;
}
#SeaWave2 {
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -khtml-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    position: fixed;
    bottom: 10px;
    left: -20px;
    width: 120%;
    height: 50px;
    background-image: url('../img/seawave.png');
    background-repeat: repeat-x;
    z-index: 998;
}
.carousel-caption h5 {
    color: var(--main);
}
.carousel-caption p {
    color: var(--Dark-Blue);
}
.carousel-indicators li{
    border-radius:100% !important;
    background-color:var(--main);
    width:10px;
    height:10px;
    opacity:1!important;
}
.carousel-indicators li.active{
    background-color: var(--Blue);
}
#MainSlider .carousel-caption {
    position: absolute;
    right: unset;
    top: 20px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}
#OurCourses {
    background-image: url('../img/ourcourses.png');
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center; 
}
#OurCourses .carousel-item{
    height:100%;
}
#OurCourses h3,
#OurCourses p {
    color: #fff;
    text-align:center;
}

#OurCourses h3 {
    font-size:36px;
}
#OurCourses p {
    font-size:24px;
}
#OurCourses .carousel {
    margin-top: 50px;
}

#OurCourses .carousel-inner {
    height: 23vw;
    min-height: 350px;
}

#OurCourses .carousel-caption {
    color: #fff;
    top: 50%;
}


@media only screen and (max-width: 1024px) {

}

.slider {
    width: 50%;
    margin: 40px auto;
}

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-prev:before,
.slick-next:before {
    color: black;
}


.slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
}

.slick-active {
    opacity: .5;
}

.slick-current {
    opacity: 1;
}
@media only screen and (max-width: 1440px) {
    .slider{
        width:75%;
    }
}
@media only screen and (max-width: 600px) {
    .slider{
        width:90%;
    }
}
@media only screen and (max-width: 480) {
    .slider{
        width:70%;
    }
}
#Levels{
    padding:50px 0;
}
#Levels .Info h2{
    color:var(--main);
}
#Levels .Info p {
    color: var(--Blue);
}
#OurTeam{
    background-color:#fff;
    padding:50px 0;
}
#OurTeam h2 {
    color: var(--Dark-Blue);
}
#OurTeam a{
    color:var(--main);
}
#OurTeam .Detail {
    margin-top: 180px;
}
#Counters {
    background-color: var(--Blue);
    padding: 50px 0;
    overflow-x: auto;
}
#Counters .Items{
    display:flex;
    justify-content: space-between;
}
#Counters .Items h3,
#Counters .Items p{
    color:#fff;
}
#Counters .Items p{
    font-size:85px;
}
#Counters .Items h3{
    font-size:28px;
}
#Counters .Items img{
    width:100px;
    /*height:100px;*/
    padding:10px;
}
#Counters .Items .count-up{
    display:flex;
    padding:0 25px;
    align-items: center;
}
.vl {
    border-left: 3px solid #fff;
    height: 200px;
}
#OurCouchs{
    padding:50px 0;
    background-color:#fff;
}
#OurCouchs h2{
    padding-bottom:50px;
    font-size:42px;
}
#OurCouchs h2,
#OurCouchs h4 {
    color: var(--main);
}
#OurCouchs .Detail{
    padding:20px;
}

.slick-center img{
    -webkit-transform: scale(1)!important;
}
.slick-slide img {
    -webkit-transform: scale(.7);
}
.Title-Center{
    width:100%;
    text-align:center;
    color:var(--Dark-Blue);
}
#OurStore{
    background-color:#fff;
    padding:50px;
}

#Comments{
    background-color:#fff;
    padding:50px 0;
}

#Comments h2{
    color:var(--Dark-Blue);
    padding-bottom:50px;
}

.slideshow-container .mySlides {
  display: none;
  padding: 80px;
  text-align: center;
}

.slideshow-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    min-width: 250px;
}

.slideshow-container .mySlides h3 {
    position: absolute;
    right: 50px;
    top: -25px;
    left: unset;
    z-index: 11;
    padding: 10px;
    text-align: center;
    background-color: var(--Blue);
    border-radius: 15px;
    color:#fff;
}
.slideshow-container .mySlides {
    background-color: var(--Light-Blue);
    border-radius: 15px;
    padding: 20px;
    padding-top: 50px;
    color: var(--Dark-Blue);
    position: inherit;
    min-width: 250px;
}
.slideshow-container .Coma {
    position: absolute;
    left: 50px;
    top: -25px;
    right: unset;
    z-index: 11;
}
.slideshow-container .mySlides p{
    color:var(--Dark-Blue);
}
#CourseTable{
    padding:50px 0;
}

.FinsTable{
    width:100%;
    margin:50px 0;
    margin-left: auto;
    margin-right: auto;
}
.FinsTable thead h6{
    position: relative;
    top: 25px;
}

.FinsTable td{
    text-align:center;
    text-align: -webkit-center;
    padding:50px 0;
}

.FinsTable th{
    text-align:center;
    text-align: -webkit-center;
}

.FinsTable th h6{
    width:100px;
    background-color:var(--Orange);
    color:#fff;
    border-radius:50px;
    padding:5px 5px 10px 5px;
}

.FinsTable td{
    color:var(--Blue);
    font-size:24px;
}

.FinsTable {
  border-collapse: collapse;
}
.FinsTable td {
  border: 2px solid var(--Orange);
  border-top:none;
}
.FinsTable thead::after {
    content: '';
    background-color: var(--Orange);
    position: absolute;
    left: 100px;
    right: 200px;
    height: 1px;
    z-index:-1;
}

.FinsTable td:first-child {
	border-right: none;
}

.FinsTable td:last-child {
    border-left: none;
}
#Detail h3,
#Detail p{
    color:#fff;
}
#Detail{
    padding:100px 0;
    background-color:var(--Orange);
}
#Detail2{
    padding:50px 0;
    background-color:var(--Gray);
}
#Detail3{
    padding:50px 0;
    background-color:var(--Gray);
}

#Detail4{
    padding:50px 0;
    background-color:var(--Light-Blue);
}

#Detail5 {
    padding: 50px 0;
}

#Detail5 .BG{
    background: url('../img/02.png') center center no-repeat;
    background-size: contain;
    min-height:500px;
    padding:50px 0;
}
@media only screen and (max-width: 450px){
    #Detail5 .BG{
    padding:150px 0;
    }
}
#Detail5 h2{
    color:var(--Light-Orange);
}

#Detail5 p{
    color:#fff;
}

#Comments2{
    padding:50px 0;
}

#Comments2 .BG {
    background: url('../img/comments.png') center center no-repeat;
    background-size: contain;
    min-height: 500px;
    padding: 75px 0;
}

@media only screen and (max-width: 600px){
    #Comments2 .BG {
    padding: 175px 0;
    }
    #Comments2 h2{
        font-size:24px;
    }
    #Comments2 p{
        font-size:18px;
    }
}

#Comments2 h2,
#Comments2 p{
    color:#fff;
}
#OurTeamPage {
    padding: 50px 0;
    background-color:var(--Blue);
}
#OurTeamPage h2,
#OurTeamPage p{
    color:#fff;
}
.WhiteSpace{
    width:100%;
    height:75px;
}

#OurTeamPage2 {
    padding: 50px 0;
    background-color:var(--Orange);
}
#OurTeamPage2 h2,
#OurTeamPage2 p{
    color:#fff;
}
#OurTeamPage3{
    padding:50px 0;
}

#OurTeamPage3 p{
    padding:20px;
    color:#fff;
}

.Title{
    color:var(--Brown);
    padding:50px 0;
}

.BGOrange{
    background-color:var(--Orange);
}

.BGBlue{
    background-color:var(--Blue);
}

.input-icons i {
    position: absolute;
}
  
.input-icons {
    width: 100%;
    margin-bottom: 10px;
}
  
.icon {
    padding: 10px;
    color:#fff;
    font-size:24px;
    cursor:pointer;
}
  
.input-field {
    width: 100%;
    padding: 10px;
    border-radius:25px;
    border:0;
    background-color:var(--Orange);
    color:#fff;
}

#OurCouches .Item img{
    border-radius:100%;
}
.BorderOrange{
    border:10px solid var(--Orange);
}

.BorderBlue{
    border:10px solid var(--Blue);
}
#OurCouches h3{
    color:var(--Blue);
}
#SearchBar{
    padding:100px 0;
}
#AboutUs-1 {
    padding: 50px 0;
    background-color:var(--Blue);
}
#AboutUs-1 h2,
#AboutUs-1 p{
    color:#fff;
}
.WhiteSpace2{
    width:100%;
    height:100px;
}

#AboutUs-2 {
    padding: 50px 0;
    background-color:var(--Orange);
}
#AboutUs-2 h2,
#AboutUs-2 p{
    color:#fff;
}

#AboutUs-3 {
    padding: 50px 0;
}
#AboutUs-3 h2{
    color:var(--Orange);
}

#AboutUs-3 p{
    color:var(--Brown);
}
#AboutUsSliderSection{
    padding:50px 0;
}
#AboutUsSlider{
    padding-bottom:50px;
}
#AboutUsSlider p{
    color:#fff;
}
.carousel-caption{
    bottom:unset;
    top:20px;
}
.Title2{
    color:var(--Orange);
    padding:25px 0;
}

#AboutUs-4 {
    padding: 50px 0;
}
#AboutUs-4 h2{
    color:var(--Dark-Blue);
}

#AboutUs-4 p{
    color:var(--Brown);
}
#OurMembers{
    padding: 50px 0;
    background-color:var(--Blue);
}
#OurMembers h2,
#OurMembers h3,
#OurMembers h4{
    color:#fff;
}
#OurMembers p{
    padding:10px;
    border-radius:15px;
    background-color:var(--Light-Orange);
    color:var(--Brown);
}
#OurMembers .Stars{
    color:#f99d32;
    font-size:24px;
}
#LevelPage-1{
    padding: 50px 0;
    background-color:var(--Orange);
}
#LevelPage-1 h2,
#LevelPage-1 p{
    color:#fff;
}