.fw400{
    font-weight: 400!important;
}
.mb25 {
    margin-bottom: 25px;
}
.visible-md {
    display: none;
    @include max(991.98) {
        display: block!important;
    }
}
.hidden-md {
    display: block;
    @include max(991.98) {
        display: none !important;
    } 
}
.visible-mob {
    display: none;
    @include max(767) {
        display: block;
    }
}
.hidden-mob {
    @include max(767) {
        display: none;
    }
}
.full-width {
    @include min(1200) {
        max-width: inherit;
        padding:0 50px;
    }
    @include min(1600) {
        max-width: 2000px;
        padding:0 125px;
    }

}
.go-nextlevel {
    position: absolute;
    bottom: 200px;
    width: 360px;
    font-size: 2.1rem;
    @include max(1450) {
        bottom: 95px;
    }
    .glevel-ttl {
        font-size: 4rem;
        font-weight: bold;
        color: $black;
    }
    .text {
        padding-right: 85px;
        margin-bottom: 35px;
        color: $black;
        font-size: 1.8rem;
        line-height: 22px;
        @include max(991) {
            line-height: 30px;
        }
    }
    .stdnt {
        color: #32C5FF;
    }
    .prnts {
        color: #44D7B6;
    }
    @include max(991.98) {
        position:initial;
        margin: 0 auto;
        padding: 25px 0;
        text-align: center!important;
        .text {
            font-size: 2.5rem;
            width: 380px;
            color: $black;
            padding-right: 0;

        }
    }
    @include max(767.98) {
        width: 100%;
        padding-top: 25px;
        padding-bottom: 0;
        margin-bottom: 50px;
        .text {
            font-size: 2.5rem;
            width: 100%;
            color: $black;
            margin-bottom: 25px;

        }
    }
    @include max(320) {
        .btn {
            margin-bottom: 15px;
            margin: 0 auto;
        }
    }
}
.banner-image{
    .banner-cmb-icon4{
        position: absolute;
        right: 0;
        bottom: 16%;
    }
    .banner-cmb-icon3{
        position: absolute;
        left: 41%;
        bottom: 30%;
    }
    .banner-cmb-icon2{
        position: absolute;
        right: 15%;
        top: 30%;
    }
    .banner-cmb-icon1{
        position: absolute;
        right: 23%;
        bottom: 26%;
        width: 85px;
    }
    .banner-cmb-icon1, .banner-cmb-icon2, .banner-cmb-icon3, .banner-cmb-icon4{
        @include max(1279){
            display: none;
        }
    }
}
.about-us-banner{
    .go-nextlevel {
        bottom: 150px;
        @include max(991) {
            .page-title {
                text-align: center;
                width: 100%;
            }
            
        }
        h1 {
            color: $black;
        }
    }
}
.crs-listing {
    padding-bottom: 25px;
    @include max(767.98) {
        padding-bottom: 0;
    }
    .ts {
        min-width: 425px;
        font-size: 2rem;
        letter-spacing: 2.5px;
        @include max(767.98) {
            min-width: inherit;
            width: 100%;
        }
    }
    .crs-text {
        padding: 54px 35px 25px;
        @include max(991.98) {
            padding: 50px 0px;
            padding-top: 25px;
            padding-bottom: 40px;
            .ts {
                padding: 25px 0;
                margin: 25px 0; 
                font-size: 2.5rem;
            }
        }
        @include max(767.98) {
            padding-top: 0;
            padding-bottom: 0;
            margin-bottom: 50px;
            .ts {
                margin-top: 15px;
                margin-bottom: 0;
                padding: 15px 0;
            }
        }
       p {
        font-size: 2.4rem;
        margin-bottom: 25px;
        color: $black;
        @include max(767.98) {
            font-size: 2rem;
        }
        &+p {
            font-size: 2.8rem;  
            @include max(767.98) {
                font-size: 2.2rem;
            }
        }
       }
    }
}
.courses-bx {
    text-align: center;
    .courses-bx-wrp {
        @include max(991.98) {
            max-width: 400px;
            margin: 0 auto;
            margin-bottom: 55px;
        }
        @include max(767.98) {
            max-width: 100%;
            margin-bottom: 40px;
        }
        .cb-itm-img {
           margin-bottom: 25px;
        }
        .cb-itm-txt {
            margin-bottom: 25px;
            padding: 0 43px;
            min-height: 96px;
            @include max(1199.98) {
                min-height: 125px;
            }
            @include max(991.98) {
                margin-bottom: 15px;
                min-height: inherit;
               padding-right: 0;
               padding-left: 0;
               p {
                font-size: 2rem;
                color: #000;
               }
            }
        }
        .cb-itm-btn {

        }
    }
}
.competitions {
    background: #E8E8E8;
    width: 100%;
    position: relative;
    height: 530px;
    overflow: hidden;
    @include max(991.98) {
        height: inherit;
        padding:60px 0;
    }
    .rz-container {
        position: relative;
    }
    .cmb-icon1 {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 51px;
        animation: second 3s ease-in-out infinite;	
        -webkit-animation: second 3s ease-in-out infinite;
        @include max(767.98){
           width: 30px;
           top: 0;
        }
    }
    .cmb-icon2 {
        position: absolute;
        z-index: 1;
        right: 0;
        top: 51px;
        animation: second 3s ease-in-out infinite;	
        -webkit-animation: second 3s ease-in-out infinite;
        @include max(767.98){
           width: 30px;
           top:-51px;
           right: 25px;
        }
    }
    .cmb-icon3 {
        position: absolute;
        z-index: 1;
        bottom: -19px;
        right: 28%;
        animation: second 3s ease-in-out infinite;	
        -webkit-animation: second 3s ease-in-out infinite;
        @include max(1450) {
            bottom: -30px;
        }
        @include max(991) {
            bottom: -40px;
            right: 0;
        }
        @include max(767.98){
           width: 30px;
           bottom: -58px;
           right: 19px;
        }
    }
    &:before{
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 0;
        border-bottom: 55px solid white;
        border-left: 2000px solid transparent;
        @include max(991.98) {
            border-bottom: 90px solid white; 
        }
     }
     &:after{
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 0;
        border-top: 55px solid white;
        border-left: 2000px solid transparent;
        @include max(991.98) {
            border-top: 30px solid white;
        }
     }
}
.home-imgbx {
    padding-top: 20px;
    @include max(991.98) {
        .row {
            display: block;
        }
    }
    .hm-image {
        padding: 0 15px;
        @include flex(0 0 50%);
        max-width: 50%;
        @include max(991.98) {
            max-width: 100%;
            margin-bottom: 25px;
        }
        figure {
            position: relative;
            @include max(991.98) {
                top: inherit;
                margin: 0 auto;
                max-width: 400px;
            }
            @include max(767.98) {
                max-width: 100%;
                width: 300px;
                height: 300px;
                text-align:center;
            }
        }
    }
    .hm-ctn {
        padding: 0 15px;
        @include flex(0 0 50%);
        max-width: 50%;
        @include max(1450) {
            padding-top: 75px;
        }
        @include max(991.98) {
            max-width: 100%;
            padding-top: 0;
        }
        @include max(767.98) {
            text-align: center;
        }
        .ttl {
            font-size: 3.8rem;
            color: $black;
            font-family: $nt-b;
            @include max(767) {
                font-size: 3rem;
            }
           
        }
        .txt {
           p {
                color: $black;
                 font-size: 2.4rem;
                 font-family: $nt;
                 @include max(767) {
                    font-size: 1.8rem;
                }
           }
        }
        
    }
}
.competitions {
    .hm-image figure {
        max-width: 400px;
        padding-top: 20px;
    }
}
.learning-tips {
    padding-bottom: 65px;
    position: relative;
    overflow: hidden;
    @include max(991) {
        padding-top: 25px;
    }
    @include max(767.98) {
        padding-bottom: 45px;
    }
    .tec-dots {
        position: absolute;
        bottom: 40px;
        left: -11px;
        @include max(991) {
            bottom: -49px;
        }
        @include max(767) {
            bottom: inherit;
            top: -5%;
            left: inherit;
            z-index: 1;
        }
    }
    .row {
        flex-flow: row-reverse;
    }
    .hm-image {
        position: relative; 
        figure {
            top: inherit;
            max-width: 420px;
            margin-left: auto;
            @include max(767) {
                width: 352px;
            }
        }
    }
    .hm-ctn {
        padding-top: 0;
    }
}
.about-us {
    padding-top: 0;
    h1 {
        color: $black;
        font-size: 3.4rem;
    }
    h4 {
        color: $black;
        font-size: 2.2rem;
    }
    .hm-ctn .txt p {
        color: $black;
        font-size: 1.8rem;
    }
    @include min(1200) {
        .hm-image {
            @include flex(0 0 40%);
            max-width: 40%;
            position: relative;
            height: 555px;
            figure {
                position: absolute;
                width: 657px;
                top: 0;
                max-width: initial;
                img {
                    width: 655px;
                }
            }
        }
        .hm-ctn {
            @include flex(0 0 60%);
            max-width: 60%;
        }
    }
    @include max(1350) {
        .hm-image {
            figure {
                width: 455px;
            } 
        } 
    }
    @include max(991) {
        .hm-image {
            figure {
                width: inherit;
                max-width: 100%;
            } 
        } 
    }
}
.about-us {
    .tec-dots {
        @include max(767) {
            display: none;
        }
    }
    .hm-ctn {
        text-align: left!important;
    } 
}
.readyto-start {
    padding-bottom: 65px;
    @include max(767.98) {
        padding-bottom: 20px;
    }
    .tech-start {
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
    }
    .tech-start .rz-head-2 {
        padding-top: 0;
    }
    @include max(767.98) {
        .tech-start .rz-head-2 {
            margin-bottom: 15px;
            
        }
        .btn {
            margin: 0!important;
            margin-bottom: 35px!important;
        }
    }
}


// Animations
@keyframes third {
    0% {
      -webkit-transform: translate(0px, 0px);
      -moz-transform: translate(0px, 0px);
      -o-transform: translate(0px, 0px);
      -ms-transform: translate(0px, 0px);
      transform: translate(0px, 0px);
    }
    20% {
      -webkit-transform: translate(-3px, 9px);
      -moz-transform: translate(-3px, 9px);
      -o-transform: translate(-3px, 9px);
      -ms-transform: translate(-3px, 9px);
      transform: translate(-3px, 9px);
    }
    40% {
      -webkit-transform: translate(0px, -8px);
      -moz-transform: translate(0px, -8px);
      -o-transform: translate(0px, -8px);
      -ms-transform: translate(0px, -8px);
      transform: translate(0px, -8px);
    }
    60% {
      -webkit-transform: translate(4px, 7px);
      -moz-transform: translate(4px, 7px);
      -o-transform: translate(4px, 7px);
      -ms-transform: translate(4px, 7px);
      transform: translate(4px, 7px);
    }
    80% {
      -webkit-transform: translate(-5px, -8px);
      -moz-transform: translate(-5px, -8px);
      -o-transform: translate(-5px, -8px);
      -ms-transform: translate(-5px, -8px);
      transform: translate(-5px, -8px);
    }
    100% {
      -webkit-transform: translate(0px, 0px);
      -moz-transform: translate(0px, 0px);
      -o-transform: translate(0px, 0px);
      -ms-transform: translate(0px, 0px);
      transform: translate(0px, 0px);
    }
  }
.banner-cmb-icon3{
    animation: third 14s infinite;
    -webkit-animation: third 14s ease-in-out infinite;
}

@-webkit-keyframes second {
	30%  { -webkit-transform: rotate(-5deg) translateY(-10px); }
}


.banner-cmb-icon2{
    animation: second 3s ease-in-out infinite;
    -webkit-animation: second 3s ease-in-out infinite;
}

@keyframes one {
    from {
      transform: rotate(0deg);
    }
    to {
     transform: rotate(180deg);
    }
  }
  
.banner-cmb-icon1{
    animation: second 3s ease-in-out infinite;	
    -webkit-animation: second 3s ease-in-out infinite;
}

.banner-cmb-icon4{
    animation: third 14s infinite;
    -webkit-animation: third 14s ease-in-out infinite;
}

html[dir="rtl"] { 
    .banner-image {
        .banner-cmb-icon1{
            right: 73%;
        }
        .banner-cmb-icon2{
            right: 85%;
        }
        .banner-cmb-icon3{
            right: 41%;
            left: inherit;
        }
        .banner-cmb-icon4{
            left: 0;
            right: inherit;
            transform: rotate(90deg);
        }
    }
    .go-nextlevel {
        text-align: right;
        @include max(767) {
            text-align: center;
        }
        
    }
    .competitions .cmb-icon1 {
        left: inherit;
    }
    .competitions .cmb-icon2 {
        right: inherit;
        top: 13px;
    }
    .home-imgbx .hm-ctn {
        text-align: right;
    }
    .go-nextlevel .text {
        padding-right: 0;
        margin-top: 30px;
    }
    .banner-image .go-nextlevel .glevel-ttl{
        font-family: "FrutigerLTArabicBold" !important;
    }
    .banner-image .go-nextlevel .text{
        font-family: "FrutigerLTArabicBold" !important;
        margin-top: 15px;
    }
    .crs-listing .crs-text p{
        text-align: center!important;
    }   
    .courses-bx .courses-bx-wrp .cb-itm-img{
        min-height: 75px;
        margin-bottom: 0px;
        img{
            max-height: 50px;
        }
    }
    .crs-listing .cb-itm-btn .btn-rm{
        font-family: 'FrutigerLTArabicBold' !important;
    }
    .courses-bx .courses-bx-wrp .cb-itm-txt{
        min-height: 75px;
        @include max(1440){
            min-height: 96px;
        }
        @include max(993){
            min-height: inherit ;
        }
    }
    .crs-listing .crs-text p{
        font-size: 2.0rem;
    }
    .home-imgbx .hm-ctn .txt p{
        font-size: 2.0rem;
    }
    .home-imgbx .hm-ctn .ttl{
        font-family: 'FrutigerLTArabicBold' !important;
    }
}


    
