/* 
main color 
#FC5272
#0080BB
#ECE813
#002539
*/
@import url('https://fonts.googleapis.com/css?family=Cairo&display=swap');
@import url('https://fonts.googleapis.com/css?family=Amiri&display=swap');
@import url('https://fonts.googleapis.com/css?family=Aref+Ruqaa&display=swap');
@import url('https://fonts.googleapis.com/css?family=Markazi+Text&display=swap');
@import url('https://fonts.googleapis.com/css?family=Katibeh&display=swap');

*
{
    padding:0;
    margin:0;
}
html 
{
    overflow-x:hidden;
}
body
{
    font-family: 'Cairo', sans-serif;
    overflow-x: hidden;
}
ol , ul , dl
{
    margin-bottom:0;
}
.scrollToTop:hover
{
    color:#fff;
}
.scrollToTop
{
    background-color: #0080BB;
    color: #FFF;
    display: block;
    padding: 10px 15px;
    position: fixed;
    bottom: 0;
    right: 20px;
    font-size: 30px;
    border-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    display:none;
    z-index: 9999999;
}
.btn-warning
{
    color:#fff;
}
/* start loading style */
#loading
{
    position:fixed;
    width: 100%;
    height:100vh;
    background: #fff url('../../assets/img/loading.gif') no-repeat center;
    z-index:99999;
    overflow: hidden;
}
#loading h2
{
    font-size:2rem;
    color:#002539;
    margin-top:30%;
}
.typed-cursor
{
    display: none;
}
/* end loading style */


/* start fixed-menu style */
.fixed-menu
{
    background-color: #002539;
    color: #ccc;
    padding: 10px;
    position: fixed;
    left: -100px;
    top: 90px;
    height: 233px;
    width: 100px;
    z-index: 9999;
    border-radius: 0 10px 10px 0;
}
.fixed-menu .icon-color
{
    position: absolute;
    right: -40px;
    top:90px;
    background-color:#002539;
    width:40px;
    height:40px;
    line-height: 30px;
    text-align: center;
    border-radius: 0 10px 10px 0;
    padding:7px;
    cursor: pointer;

}

.lang
{
    position: absolute;
    background: #002539;
    color: #fff;
    padding: 10px;
    /*bottom: -45px;*/
    border-radius: 5px;
    left: 1%;
    top:34%;
}

.lang a, .lang a:hover
{
    color:#fff !important;
    text-decoration:none;
}


/* start menu navbar style */
.nav-header
{
    background-color:#002539;
    padding: 10px 0;
    box-shadow: 0 0 30px;
    position:fixed;
    width:100%;
    left:0;
    top:0;

}
.nav-header .row
{
    margin-left : 0;
    margin-right:0;
    margin: 0 60px;
}
.nav-links
{

    display:none;
}
.nav-links li a
{
    color:#fff;
    text-decoration:none;
    font-size:16px;
}
.logo-brand .navbar-brand img
{
    width: 7em;
}
@media screen and (max-width:768px)
{
    .nav-header .row
    {
       margin: 0;
       text-align: center;
    }
    .navlinks
    {
        display:none;
    }
    .nav-header
    {
        position:relative;
    }
    .lines
    {
        position:absolute;
        cursor:pointer;
        left:5%;
        top:50%;
        transform: translate(-5%,-50%);
        z-index:99;
    }
    .line
    {
        width:30px;
        height:3px;
        background:#002539;
        margin:5px;
    }
    .nav-links
    {
        position:fixed;
        background:#f8f9fa;
        height:100vh;
        width:100%;
        flex-direction: column;
        top:0;
        clip-path: circle(100px at 90% -10%);
        -webkit-clip-path: circle(30px at 90% -10%);
        transition: all 1s ease-out;
        pointer-events:none;
        display:inline-block;
        
    }
    .nav-links.open
    {
        clip-path: circle(1000px at 90%);
        -webkit-clip-path: circle(1000px at 90%);
        pointer-events:all;
        display:flex;
        list-style:none;
        justify-content:space-around;
        align-items:center;
    }
    .nav-header .container
    {
        width:100% !important;
        padding-right: 0;
        padding-left: 0;
        margin-right: 0;
        margin-left: 0;
    }
    .nav-links li
    {
        opacity:0;
    }
    .nav-links li a
    {
        color:#002539;
        font-size:25px;
    }
    .nav-links li:nth-child(1){transition: all 0.5s ease 0.2s;}
    .nav-links li:nth-child(2){transition: all 0.5s ease 0.3s;}
    .nav-links li:nth-child(3){transition: all 0.5s ease 0.4s;}
    .nav-links li:nth-child(4){transition: all 0.5s ease 0.5s;}
    .nav-links li:nth-child(5){transition: all 0.5s ease 0.6s;}
    .nav-links li:nth-child(6){transition: all 0.5s ease 0.7s;}
    .nav-links li:nth-child(7){transition: all 0.5s ease 0.8s;}
    .nav-links li:nth-child(8){transition: all 0.5s ease 0.9s;}
    li.slide
    {
        opacity:1;
    }
}


.navlinks
{
  position:absolute;
  width:80%;
  top:20%;
  left:60px;
}
.navlinks a 
{
  margin:6px 1px;
  display:inline-block;
  width:100px;
  background:#2c3e50;
  height:70px;
  line-height:70px;
  color:#fff;
  font-weight:600;
  transition:0.3s;
  position:relative;
  padding-left:26px;
  font-size:13px;
  text-align:center;
}

.navlinks a::before,.navlinks a::after
{
  content: '';
  position:absolute;
  border-top:40px solid transparent;
  border-bottom:30px solid transparent;
}
.num::before
{
  left:100%;
  z-index:99;
}
.num:nth-child(1)::before{border-left:20px solid #FC5272;}
.num:nth-child(2)::before{border-left:20px solid #0080BB;}
.num:nth-child(3)::before{border-left:20px solid #ECE813;}
.num:nth-child(4)::before{border-left:20px solid #FC5272;}
.num:nth-child(5)::before{border-left:20px solid #0080BB;}
.num:nth-child(6)::before{border-left:20px solid #ECE813;}
.num:nth-child(7)::before{border-left:20px solid #FC5272;}
.num:nth-child(8)::before{border-left:20px solid #0080BB;}
/*.num:nth-child(9)::before{border-left:20px solid #ECE813;}*/

.num::after
{
  border-left:20px solid #f8f9fa ;
  left:0;
}
@media screen and (max-width: 768px)
{
    .nav-links
    {
        display: flex;
        list-style: none;
        justify-content: space-around;
        align-items: center;
    }
}
/* end menu navbar style */

/* start media query for navbar */
@media only screen and (max-width: 1246px) and (min-width: 1143px)
{
    .navlinks a
    {
      width:100px;
    }
}
@media only screen and (max-width: 1142px) and (min-width: 990px)
{
    .navlinks a 
    {
        width:84px;
        font-size:12px;
    }
    .navbar-brand img
    {
        width: 6.5em !important;
        margin-right: -25px;

    }
}
@media only screen and (max-width: 989px) and (min-width: 948px)
{
    .navlinks a 
    {
        width:80px;
        font-size:11px;
    }
    .logo-brand .navbar-brand img
    {
        width: 6em !important;
    }
        .logo-brand .navbar-brand img
    {
        margin-right:-30px;
    }
}
@media only screen and (max-width: 947px) and (min-width: 899px)
{
    .navlinks
    {
        top: 15%;
        left: 50px;
    }
    .navlinks a 
    {
        width: 79px;
        font-size: 10px;    
    }
    .logo-brand .navbar-brand img
    {
        width: 6em !important;
        margin-right: -30px;
    }
    .nav-header .row
    {
        margin: 0 40px;
    }
}
@media only screen and (max-width: 900px) and (min-width: 850px)
{
    .navlinks {
        top: 17%;
        left: 50px;
    }
    .navlinks a 
    {
        width:75px;
        font-size:10px;
        height: 65px;
        line-height: 65px;
    }
    .logo-brand .navbar-brand img
    {
        width: 5.5em !important;
            margin-right: -25px;

    }
    .nav-header .row
    {
        margin: 0 30px;
    }
    .navlinks a::before, .navlinks a::after
    {
        border-top: 35px solid transparent;
    }
}
@media only screen and (max-width: 849px) and (min-width: 800px)
{
    .navlinks {
        top: 15%;
        left: 50px;
    }
    .navlinks a 
    {
        width:70px;
        font-size:9px;
        height: 60px;
        line-height: 60px;
    }
    .logo-brand .navbar-brand img
    {
        width: 5em !important;
        margin-right: -20px;
    }
    .nav-header .row
    {
        margin: 0 20px;
    }
    .navlinks a::before, .navlinks a::after
    {
        border-top: 30px solid transparent;
    }
    .lang
    {
        top: 30%;
    }
}
@media only screen and (max-width: 799px) and (min-width: 769px)
{
    .navlinks {
        top: 16%;
        left: 28px;
    }
    .navlinks a 
    {
        width:70px;
        font-size:9px;
        height: 60px;
        line-height: 60px;
    }
    .logo-brand .navbar-brand img
    {
        width: 5em !important;
        margin-right: -12px;
    }
    .nav-header .row
    {
        margin: 0 5px 0 10px;
    }
    .navlinks a::before, .navlinks a::after
    {
        border-top: 30px solid transparent;
    }
        .lang
    {
        padding: 4px;
        left: 0.5%;
        top: 36%;
    }
}

@media only screen and (max-width: 768px) 
{
    .navbar-brand
    {
        margin-right: 3rem;
    }
}

a.active::before
{
    border-left:20px solid #002539 !important;
}
.navlinks a.active
{
    background-color:#002539 !important;
}


@media only screen and (max-width:989px)  and (min-width: 901px) 
{
    body
    {
        padding-top:113px !important;
    }
}
@media only screen and (max-width:900px)  and (min-width: 851px) 
{
    body
    {
        padding-top:105px !important;
    }
}
@media only screen and (max-width:850px) and (min-width: 769px)
{
    body
    {
        padding-top:100px !important;
    }
}
@media only screen and (max-width:768px)
{
    body
    {
        padding-top:0 !important;
    }
}
/* end media query for navbar */


/* start main carousel style */

#carouselExampleFade .carousel-item img
{
    height: calc(100vh - 126px);
}
.carousel-indicators
{
    margin-bottom:1em;
}
.carousel-indicators li
{
    height: 30px;
    border : 0;
    border-radius: 50px;
    bottom:5px;
}
@media screen and (max-width: 650px)
{
    #carouselExampleFade .carousel-item img
    {
        height: 400px;
    }
}
@media screen and (max-width: 500px)
{
    #carouselExampleFade .carousel-item img
    {
        height: 250px;
    }
}
/* end main carousel style */

/* start owl carousel most news style */
.testimonials
{
    margin-top:30px;
    width: 100%;
    height: auto;
    background-image: url('../img/bk2.png');
    background-size: cover;
    padding-bottom: 60px;
    clip-path: polygon(0 80%,100% 100%,100% 0, 0 0);
    /*-webkit-clip-path: polygon(0 0 ,100% 100% , 0 0 ,100% 80%);*/
}
.shadow-effect
{
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    text-align: center;
    border:1px solid #ECECEC;
    box-shadow: 0 19px 38px rgba(0,0,0,0.10), 0 15px 12px rgba(0,0,0,0.02);
    position: relative;
    grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
    grid-template-rows: auto;
    grid-gap: 0 40px;
}
.shadow-effect:before
{
    content: '';
    position: absolute;
    top:-2px;
    left:-2px;
    right:-2px;
    bottom:-2px;
    background:#fff;
    transform:skew(2deg,2deg);
    z-index: -1;
    background: linear-gradient(315deg,#FC5272,#0080BB)
}
#customers-testimonials .shadow-effect p
{
    font-family: inherit;
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 17px 0;
    font-weight: 300;
}
.testimonial-name,.testimonial-name:hover
{
    margin: -17px auto 0;
    display: table;
    width: auto;
    background: #0080BB;
    padding: 9px 35px;
    border-radius: 7px;
    text-align: center;
    color: #fff;
    box-shadow: 0 9px 18px rgba(0,0,0,0.12), 0 5px 7px rgba(0,0,0,0.05);
    position:relative;
    text-decoration:none;
}

#customers-testimonials .item 
{
    text-align: center;
    padding: 50px;
    margin-bottom:80px;
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#customers-testimonials .item img,#customers-testimonials .shadow-effect p
{
    opacity: .2;
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    height:110px;
	    text-align: justify;
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    max-height: 100px;
}

#customers-testimonials .owl-item.active.center .item,
#customers-testimonials .owl-item.active.center .shadow-effect p,
#customers-testimonials .owl-item.active.center .shadow-effect img
{
    opacity: 1;
    -webkit-transform: scale3d(1.0, 1.0, 1);
    transform: scale3d(1.0, 1.0, 1);
     height:110px;
}
.owl-carousel .owl-item img
{
    transform-style: preserve-3d;
    max-width: 90px;
    margin: 0 auto 17px;
}
#customers-testimonials.owl-carousel .owl-dots .owl-dot.active span,
#customers-testimonials.owl-carousel .owl-dots .owl-dot:hover span
{
    background: #3190E7;
    transform: translate3d(0px, -50%, 0px) scale(0.7);
}
#customers-testimonials.owl-carousel .owl-dots
{
    display: inline-block;
    width: 100%;
    text-align: center;
}
#customers-testimonials.owl-carousel .owl-dots .owl-dot
{
    display: inline-block;
    box-shadow: none;
    outline: none;
}
#customers-testimonials.owl-carousel .owl-dots .owl-dot span
{
    background: #3190E7;
    display: inline-block;
    height: 20px;
    margin: 0 2px 5px;
    transform: translate3d(0px, -50%, 0px) scale(0.3);
    transform-origin: 50% 50% 0;
    transition: all 250ms ease-out 0s;
    width: 20px;
}
.owl-carousel .owl-stage-outer
{
    margin-bottom:-60px;
}
@media screen and (max-width:767px)
{
    .testimonials .container
    {
        padding :0;
    }
    #customers-testimonials .item
    {
        padding: 50px 20px;
    }
}
@media screen and (max-width:499px)
{
    #customers-testimonials .item
    {
        margin:20px;
        padding: 50px 45px;
    }
    .owl-carousel .owl-stage-outer
    {
        margin-bottom:-30px;
    }
}
@media screen and (max-width:370px)
{
    #customers-testimonials .item
    {
        padding: 50px 20px;
    }
}
/* end owl carousel most news style */



/* start social icon */
.share 
{
  position:fixed;
  top:30%;
  left:10px;
  transform: rotate(45deg);
  width:70px;
  height:70px;
  z-index:9999;
}
.share ul 
{
  position:relative;
  margin:0%;
  padding:0%;
  width:100%;
  height:100%;
}
.share ul li 
{
  position:absolute;
  top:0%;
  left:0%;
  list-style:none;
  width:100%;
  height:100%;
  border-radius:50px;
  background:#fff;
  transition:0.5s;
  overflow:hidden;
}
.share ul.active li 
{
  transform:scale(0.75);
}
.share ul li a 
{
  position:absolute;
  top: -6%;
  left: 1%;
  width:100%;
  line-height:80px;
  text-align:center;
  font-size:30px;
  transition: 0.5s;
  transform: rotate(-43deg);
  color:#fff;
}
.share ul li a .fab 
{
  transform: rotate(-45deg);
}

.toggle
{
  position:absolute;
  top:0%;
  left:0%;
  width:100%;
  height:100%;
  background:#060c21;
  transform: scale(0.95);
  overflow:hidden;
  border-radius:50px;
  z-index:1;
  cursor:pointer;
}
.fa-share-alt
{
  position:absolute;
  width:100%;
  height:100%;
  line-height:80px;
  color:#fff;
  font-size:30px;
  top:5%;
  left:23%;
  text-align:center;
  font-size:40px;
  transform:rotate(-45deg);
}
.fa-times
{
  position:absolute;
  width:100%;
  height:100%;
  line-height:80px;
  color:#fff;
  font-size:30px;
  top: 3%;
  left: 31%;
  text-align:center;
  font-size:40px;
  transform:rotate(-45deg);
}
.share ul li a .fab
{
transform: rotate(-45deg);
}
/* facebook */
.share ul.active li:nth-child(1)
{
background-color:#3b5998;
top: -83%;
left: -68%;
transition-delay: 0.5s;
}
/* twitter */
.share ul.active li:nth-child(2)
{
background-color:#1DA1F2;
top: -110%;
left: 14%;
transition-delay: 0.2s;
}
/* youtube */
.share ul.active li:nth-child(3)
{
background-color:#ff0000;
top: 2%;
left: 111%;
transition-delay: 0.4s;
}
/* instagram */
.share ul.active li:nth-child(4)
{
background-image: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
top: 83%;
left: 87%;
transition-delay: 0.6s;
}
/* whatsapp */
.share ul.active li:nth-child(5)
{
background-color:#25d366;
top: -78%;
left: 90%;
transition-delay: 0.8s;
}
/* end social icon */

/* goshan style */

.goshan 
{
  position:fixed;
  top:50%;
  left:10px;
  /* transform: rotate(45deg); */
  width:75px;
  height:75px;
  z-index:9999;
}

.goshan .toggle
{
  position:absolute;
  top:0%;
  left:0%;
  width:100%;
  height:100%;
  background:#060c21;
  transform: scale(0.95);
  overflow:hidden;
  border-radius:50px;
  z-index:1;
  cursor:pointer;
  border:2.5px solid #fff

}


/* start theme color style */
[data-default-color="navyblue"] .skin-color
{
    color:#002539;
}
[data-default-color="navyblue"] .skin-background
{
    background-color: #002539;
    color:#fff;
}
[data-default-color="navyblue"] .skin-border
{
    border-color:#002539;
}
[data-default-color="navyblue"] .skin-optical-background
{
    background-color:#00253933;
}
[data-default-color="pink"] .skin-color
{
    color:#FC5272;
}
[data-default-color="pink"] .skin-background
{
    background-color: #FC5272;
    color:#fff;
}
[data-default-color="pink"] .skin-border
{
    border-color:#FC5272;
}
[data-default-color="pink"] .skin-optical-background
{
    background-color:#fc525236;
}
[data-default-color="blue"] .skin-color
{
    color:#0080BB;
}
[data-default-color="blue"] .skin-background
{
    background-color: #0080BB;
    color:#fff;
}
[data-default-color="blue"] .skin-border
{
    border-color: #0080BB;
}
[data-default-color="blue"] .skin-optical-background
{
    background-color:#0080bb33;
}
[data-default-color="yellow"] .skin-color
{
    color:#ECE813;
}
[data-default-color="yellow"] .skin-background
{
    background-color: #ECE813;
    color:#fff;
}
[data-default-color="yellow"] .skin-border
{
    border-color:#ECE813;
}
[data-default-color="yellow"] .skin-optical-background
{
    background-color:#ece81330;
}
/* end theme color style */

.info-takeachance
{
    margin:0;
    padding:50px 0px;
    padding-bottom: 50px;
    width: 100%;
    height: 600px;
    background-image: url(../img/info-bg.png);
    background-size: cover;
}
/* .info-takeachance .container
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
} */


.col-img img
{
    border:2px double #c5c5c5;
    border-radius:7px;
    padding:10px;
    width:300px;

}
.body-info
{
    margin-top:50px;
}
.info-text
{
    font-size: 25px;
    margin-top:10px;
}
.video-fluid
{
    width: 100%;
    height: auto;
}

.our-programs
{
    position: relative;
    height: 700px;
    background-color: #002539;
    clip-path: polygon(0 0,100% 0,100% 80%, 0% 100%);
}
.our-programs .container .row h2
{
    color:#fff;
    margin-top:30px;
} 
@media screen and (max-width:767px) and (min-width:500px)
{
 .our-programs
 {
     height: 1165px;
 }
 .program2
 {
     margin-top:30px;
 }
}
@media screen and (max-width:499px) and (min-width:400px)
{
 .our-programs
 {
     height: 1300px;
 }
 .program2
 {
     margin-top:30px;
 }
}
@media screen and (max-width:399px) and (min-width:380px)
{
 .our-programs
 {
     height: 1200px;
 }
 .program2
 {
     margin-top:30px;
 }
}
@media screen and (max-width:379px) and (min-width:360px)
{
 .our-programs
 {
     height: 1150px;
 }
 .program2
 {
     margin-top:30px;
 }
}
@media screen and (max-width:359px)
{
 .our-programs
 {
     height: 1000px;
 }
 .program2
 {
     margin-top:30px;
 }
}
/* start about app */


/* Start donate */
.row-donate
{
    margin:0;
    padding: 0;
    /* min-height: 100vh; */
    background:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.donate
{
    width:100%;
    position: relative;
    display:flex;
    justify-content: center;
    align-items: center;
    margin:20px;
}
.donate .donate-card
{
    position: relative;
    padding:20px;
}
.donate .donate-card .face
{
    width:230px;
    height:200px;
    transition: 0.5s;
}
.donate .donate-card .face.face1
{
    position: relative;
    background:#012638;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:1;
    transform: translateY(100px);
}
.donate .donate-card:hover:nth-child(1) .face.face1
{
    background: #ECE813;
    transform: translateY(0px);
}
.donate .donate-card:hover:nth-child(2) .face.face1
{
    background: #0080BB;
    transform: translateY(0px);
}
.donate .donate-card:hover:nth-child(3) .face.face1
{
    background: #FC5272;
    transform: translateY(0px);
}
.donate .donate-card:hover:nth-child(4) .face.face1
{
    background: #0080BB;
    transform: translateY(0px);
}
.donate .donate-card .face.face1 .content-donate
{
    opacity: 0.2;
    transition: 0.5s;
}
.donate .donate-card:hover .face.face1 .content-donate
{
    opacity: 1;
}
.donate .donate-card .face.face1 .content-donate img
{
    width:100px;
}
.donate .donate-card .face.face1 .content-donate h3
{
    margin: 10px 0 0;
    padding: 0;
    color:#fff;
    text-align: center;
    font-size: 1.5em;
}
.donate .donate-card .face.face2
{
    position: relative;
    background:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    transition: 0.5s;
    transform: translateY(-100px);
    height:150px
}
.donate .donate-card:hover .face.face2
{
    position: relative;
    background:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    transition: 0.5s;
    transform: translateY(0px);
}
.donate .donate-card .face.face2 .content-donate p
{
    margin:0;
    padding: 0;
}
.donate .donate-card .face.face2  .content-donate a
{
    margin:15px 0 0;
    display: inline-block;
    text-decoration: none;
    font-weight:900;
    color:#333;
    padding:5px;
    border:1px solid #333;
}
.donate .donate-card .face.face1  .content-donate 
{
    text-align: center;
}
.donate .donate-card .face.face2  .content-donate a:hover
{
    background: #333;
    color:#fff;
}


@media screen and (max-width:1010px)
{
    .donate .donate-card .face
    {
        width: 225px;
        height: 200px;
        transition: 0.5s;
    }
    .donate .donate-card
    {
        padding: 10px;
    }
}
@media screen and (max-width:968px)
{
    .donate .donate-card .face
    {
        width: 200px;
    }
}
@media screen and (max-width:870px)
{
    .donate .donate-card .face
    {
        width: 185px;
    }
}
@media screen and (max-width:810px)
{
    .donate
    {
        display: block;
        text-align: -webkit-center;
    }
    .donate .donate-card .face
    {
        width: 300px;
        height: 200px;
        transition: 0.5s;
    }
    .donate .donate-card
    {
        padding: 0;
    }
}
@media screen and (max-width:657px)
{
    .donate
    {
        display: block;
        text-align: -webkit-center;
    }
    .donate .donate-card .face
    {
        width: 300px;
        height: 200px;
        transition: 0.5s;
    }
    .donate .donate-card
    {
        padding: 0;
    }
}
@media screen and (max-width:338px)
{

    .donate .donate-card .face
    {
        width: 230px;
        height: 200px;
        transition: 0.5s;
    }

}
/* End donate */
/* mobile body style */
.row-body
{
    width: 100%;
    height: auto;
    background-image: url('../img/bk1.png');
    background-size: cover;
    padding-top: 100px;
    margin-top:-140px;
}
.dm-width
{
width: 300px;
margin: 0 20px;
margin-top:-10px;
}
.iphone-mockup 
{
position: relative;
z-index: 5;
}
.dm-device
{
position: relative;
width: 100%;
padding-bottom:203.477897%;
}
.device
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
-webkit-background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url('../img/mobileDesign/apple-iphone.png');
background-size: cover;
background-position: center center;
}
.screen
{
overflow: hidden;
position: absolute;
top: 18.1%;
bottom: 20.6%;
left: 12.49%;
right: 17.4%;
background-color: #E91E63;
background-image: url('../img/mobileDesign/menu.jpg');
background-size: cover;
}
.slider__item 
{
font-size: 100px;
color: rgba(255,255,255,0.7);
display: flex;
justify-content: center;
align-items: center;
}
.slider__item--1
{
background-image: url('../img/mobileDesign/beach-cold-daylight-1002106.jpg');
background-size: cover;
}
.slider__item--2
{
background-image: url('../img/mobileDesign/menu.jpg');
background-size: cover;
}
.slider__item--3
{
background-image: url('../img/mobileDesign/uko.jpg');
background-size: cover;
background-position: center;
}
.slider__item--4
{
background-image: url('../img/mobileDesign/pexels-photo-445109.jpeg');
background-size: cover;
background-position: center;
}

 /* timeline style */
.main-timeline
{
overflow: hidden;
position: relative;
text-align:right;
}
.main-timeline:before
{
content: "";
width: 10px;
height: 72%;
border: 3px solid #959595;
position: absolute;
top: 40px;
left: 5%;
transform: translateX(-50%);
}
.main-timeline .timeline
{
padding: 10px 60px 10px 100px;
/* float: right; */
position: relative;
}
.main-timeline .timeline:before
{
content: "";
width: 50px;
height: 50px;
border-radius: 50%;
background: #FC5272;
box-shadow: 0 0 1px 5px #FC5272;
position: absolute;
top: 42px;
left: 8px;
font-family: 'Font Awesome 5 Free';
content: "\f129";
font-weight: 900;
color: #fff;
text-align: center;
font-size:33px;
}
.main-timeline .timeline-content
{
display: block;
background: #e9e9e7;
padding: 70px 30px 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.2) inset;
position: relative;
}
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .label-timeline
{
display: block;
width: 60%;
height: 50px;
background: #FC5272;
padding: 0 10px 10px 0;
font-size: 20px;
font-weight: 800;
color: #fff;
line-height: 50px;
box-shadow: 0 0 20px rgba(0,0,0,0.4) inset;
border-radius: 10px 10px 10px 0;
position: absolute;
top: 20px;
left: -20px;
}
.main-timeline .label-timeline:before
{
content: "";
border-top: 40px solid #FC5272;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
position: absolute;
bottom: -60px;
left: 0;
}
.main-timeline .title
{
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
color: #4a4a4a;
}
.main-timeline .description
{
font-size: 14px;
color: #6f6f6f;
margin: 10px 0 5px 0;
display: flex;
}
.main-timeline .timeline:nth-child(2n):before
{
background: #0080BB;
box-shadow: 0 0 1px 5px #0080BB;
content: "\f083";
}
.main-timeline .timeline:nth-child(2n) .label-timeline{ background: #0080BB; }
.main-timeline .timeline:nth-child(2n) .label-timeline:before{ border-top-color: #0080BB; }
.main-timeline .timeline:nth-child(3n):before
{
background: #ECE813;
box-shadow: 0 0 1px 5px #ECE813;
content: "\f381";
}   
.main-timeline .timeline:nth-child(3n) .label-timeline{ background: #ECE813; } 
.main-timeline .timeline:nth-child(3n) .label-timeline:before{ border-top-color: #ECE813; }

@media screen and (max-width:1440px)
{
    .main-timeline:before
    {
        transform: translateX(-75%);
        left: 6%;
    }
}
@media screen and (max-width:1240px)
{
    .main-timeline:before
    {
        left: 7%;
    }
}
@media screen and (max-width:1140px)
{
    .main-timeline:before
    {
        transform: translateX(-45%);
    }
}
@media screen and (max-width:1000px)
{
    .main-timeline:before
    {
        transform: translateX(-15%);
    }
}
@media screen and (max-width:950px)
{
    .main-timeline:before
    {
        left: 6%;
    }
}
@media screen and (max-width:850px)
{
    .main-timeline:before
    {
        left: 7%;
    }
}
@media screen and (max-width:767px)
{
    .main-timeline .timeline
    {
        padding: 10px 60px 10px 150px;
    }
    .main-timeline .timeline:before
    {
        left: 4%;
    }
    .dm-width
    {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media screen and (max-width:630px)
{
    .main-timeline .timeline:before
    {
        left: 3.5%;
    }
    .main-timeline .timeline
    {
        padding: 10px 60px 10px 115px;
    }
}
@media screen and (max-width:530px)
{
    .main-timeline .timeline:before
    {
        left: 3%;
    }
}
@media screen and (max-width:480px)
{
    .main-timeline .timeline:before
    {
        left: 2.5%;
    }
}
@media screen and (max-width:450px)
{
    .main-timeline .timeline
    {
        padding: 10px 30px 10px 130px;
    }
    .main-timeline .timeline:before
    {
        left: 7%;
    }
    .main-timeline:before
    {
        left: 12%;
    }
}
@media screen and (max-width:1269px) and (min-width:1119px)
{
    .main-timeline:before
    {
        height:76%;
    }
}
@media screen and (max-width:1118px) 
{
    .main-timeline:before
    {
        height:80%;
    }
}
@media screen and (max-width:900px)  and (min-width:768px)
{
    .main-timeline .timeline:before
{
    left: -41px;
}
.main-timeline .timeline {
    padding: 10px 60px 10px 50px;
    /* float: right; */
    position: relative;
    left: 50px;
}
}
@media screen and (max-width:767px)  and (min-width:482px)
{
    .main-timeline:before {
    height: 75%;
}
}

/* end about app */

#row-footer
{
    background-color: #002539 !important;
    padding: 40px 20px 13px 20px;
    clip-path: polygon(0 100%,100% 100%,100% 50%, 0% 0);
    position: absolute;
direction: rtl;

}
#row-footer span {margin-left: 5px;font-weight: 600;font-size:20px;}
#row-footer span:nth-child(1){color:#FC5272}
#row-footer span:nth-child(2){color:#0080BB}
#row-footer span:nth-child(3){color:#ECE813}

@media only screen and (max-width:643px) and (min-width:588px)
{
    #row-footer span {
        margin-left: 5px;
        font-weight: 600;
        font-size: 18px;
    } 
}
@media only screen and (max-width:587px) and (min-width:550px)
{
    #row-footer span {
        margin-left: 5px;
        font-weight: 600;
        font-size: 16px;
    } 
}
@media only screen and (max-width:549px)
{
    #row-footer span {
        display:block;
    } 
    #row-footer
    {
        padding-top:50px
    }
}
/* .button-showMore
{
    position: absolute;
    left: 50%;
    bottom: 0
} */
.button-showMore
{
    position:relative;
}
@media screen and (max-width:991px)
{
    .body-info .col-img img
    {
        max-width: 300px;
    }
    .col-info .info-text {
        font-size: 20px;
    }
    .button-showMore a
    {
        width:150px;
    }
}
@media screen and (max-width:767px)
{
    .body-info .col-img img
    {
        max-width: 250px;
    }

    .button-showMore a
    {
        width:132px;
    }
    .info-takeachance .container {
        max-width: 90%;
    }
}
@media screen and (max-width:580px) and (min-width:576px)
{
    .body-info .col-img img
    {
        max-width: 200px;
    }

    .button-showMore a
    {
        width:100px;
        font-size:14px;
    }
    .info-takeachance .container {
        max-width: 90%;
    }
}
@media screen and (max-width:575px) 
{
    .info-takeachance
    {
        height: 900px;
    }
    .button-showMore a
    {
        width:150px;
        font-size:20px;
    }
    .button-showMore
    {
        top:120%;
    }
}
@media screen and (max-width:767px) and (min-width:450px)
{
.button-showMore {
    position: absolute;
    left: 20%;
    bottom: -20%;
}
}
@media screen and (max-width:449px) 
{
.button-showMore {
    position: absolute;
    left: 30%;
    bottom: -20%;
}
}
/* about us page */
/*.aboutus-row*/
/*{*/
    /* background-image:url('../img/carousel1.jpg'); */
/*    background-position: center;*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*    height:300px;*/
/*}*/
.label-about
{
    /*position:absolute;*/
    /*left:50%;*/
    /*top:50%;*/
    /*transform:translate(-50%,-50%);*/
    color:#002539;
    padding:20px 20px 10px 20px;
    /*background-color:rgba(255,255,255,0.5);*/
    /*border-radius:5px;*/
    /*border:2px solid #002539*/
}
#row-about p , #row-Ourvision p,#row-ourmessage p,#row-goals p ,ul
{
    font-size:20px;
    /* font-family: 'Droid Arabic Kufi',sans-serif; */

}
#row-about h2
{
    color:#FC5272;
    padding:10px;
}
#row-Ourvision h2
{
    color:#0080BB;
    padding:10px;
}
#row-ourmessage h2
{
    color:#ECE813;
    padding:10px;
}
#row-goals h2
{
    color:#FC5272;
    padding:10px;
}
#row-value h2
{
    color:#0080BB;
    padding:10px;
}

/* our team */
.our-team
{
    background-color:#fff;
}
/* animation img */
.animated-team
{
    -webkit-animation: swinging 4s infinite ease-in-out;
    -moz-animation: swinging 4s infinite ease-in-out;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    background: transparent url(https://s3-eu-west-1.amazonaws.com/static.jbcgroup.com/amd/bundles/acmealmadeena/images/icon-hang.png) no-repeat center top;
    padding-top: 30px;
    margin-top: -14px;
}
@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -webkit-transform: rotate(5deg); }
    40% { -webkit-transform: rotate(-5deg); }
    60% { -webkit-transform: rotate(5deg); }
    80% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes swing {
    20% { -moz-transform: rotate(5deg); }
    40% { -moz-transform: rotate(-5deg); }
    60% { -moz-transform: rotate(5deg); }
    80% { -moz-transform: rotate(-5deg); }
    100% { -moz-transform: rotate(0deg); }
}

@-o-keyframes swing {
    20% { -o-transform: rotate(5deg); }
    40% { -o-transform: rotate(-5deg); }
    60% { -o-transform: rotate(5deg); }
    80% { -o-transform: rotate(-5deg); }
    100% { -o-transform: rotate(0deg); }
}

@keyframes swing {
    20% { transform: rotate(5deg); }
    40% { transform: rotate(-5deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
} 
.swing {
    -webkit-animation: swing 8s infinite ease-in-out;
    -moz-animation: swing 8s infinite ease-in-out;
    -o-animation: swing 8s infinite ease-in-out;
    animation: swing 8s infinite ease-in-out;
}
.animated-team img
{
    max-width: 80%;
}
#text-team
{
    padding: 35px 0 10px 10px;
}
#text-team p
{
    text-align: right;
    line-height: initial;
    font-size: 18px;
    color: #002539;
    margin-top: 25px;
}
#text-team h4
{
    color:#002539;
    text-align:right;
}
#img-team
{
    text-align: -webkit-center;
}
@media only screen and (max-width:991px)
{
    .animated-team img
    {
        max-width:100%;
    }
    #text-team h4
    {
        font-size:1.3rem
    }
    #text-team p
    {
        font-size:15px;
        margin-top:15px;
    }
}

.button-showMore a {
    position: absolute;
    left:0;
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%,-50%); */
    width: 180px;
    height: 50px;
    background: #fff;
    text-align: center;
    line-height: 50px;
    color: #0080BB;
    text-decoration: none;
    font-size: 20px;
  }

  .button-showMore a:before,
  .button-showMore a:after,
  .button-showMore span:before,
  .button-showMore span:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #0080BB;
    transition: 1s;
    mix-blend-mode: hue;
  }

  .button-showMore a:before {
    top: -2px;
    left: -2px;
  }
  
  .button-showMore a:after {
    top: -2px;
    right: -2px;
  }

  .button-showMore span:before {
    bottom: -2px;
    left: -2px;
  }
  .button-showMore span:after {
    bottom: -2px;
    right: -2px;
  }

.button-showMore a:hover:before,
.button-showMore a:hover:after,
.button-showMore a:hover span:before,
.button-showMore a:hover span:after {
  width: calc( 180px / 2);
  height: calc( 50px / 2);
}
@media screen and (max-width:991px) and (min-width:767px)
{
    .button-showMore {
    position: absolute;
    left: 30%;
    bottom: -10%;
}
}
.download {
    animation: wiggle 2s linear infinite;
    background-color: transparent;
    border: none;
    display:inline-block;
    /* width:50%; */
    box-shadow: none !important;
    outline: none !important;
  }
  .download img
  {
      width:80%;
  }
  @media screen and (max-width:400px)
{
    .download img
    {
    width: 100%;
    padding-right: 1px;
    }
}
/* Keyframes */
@keyframes wiggle {
    0%, 7% {
      transform: rotateZ(0);
    }
    15% {
      transform: rotateZ(-15deg);
    }
    20% {
      transform: rotateZ(10deg);
    }
    25% {
      transform: rotateZ(-10deg);
    }
    30% {
      transform: rotateZ(6deg);
    }
    35% {
      transform: rotateZ(-4deg);
    }
    40%, 100% {
      transform: rotateZ(0);
    }
  }

  [data-notify="container"] {
	text-align: center !important;
}

.cursor {
    width: 20px;
    height: 20px;
    border: 1px solid #3190E7;
    border-radius: 50%;
    position: absolute;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
    animation: cursorAnim .5s infinite alternate;
    pointer-events: none;
}

.cursor::after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    border: 8px solid #FC5272;
    border-radius: 50%;
    opacity: .5;
    top: -8px;
    left: -8px;
    animation: cursorAnim2 .5s infinite alternate;
}

@keyframes cursorAnim {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(.7);
    }
}

@keyframes cursorAnim2 {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(.4);
    }
}

@keyframes cursorAnim3 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(3);
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.expand {
    animation: cursorAnim3 .5s forwards;
    border: 1px solid #FC5272;
}

.about-team h5
{
    margin-bottom: 1.5rem;
    font-weight: 500;
    line-height: 2.2;
}

.notAva
{
    display:none;
}

@media only screen and (max-width:768px)
{
    .lang 
    {
        display:none;
    }
}

@media only screen and (max-width:982px)
{
    .info-takeachance
    {
        background-image: none;
        background-size:unset;
        background:#fff;
    }
}
@media only screen and (max-width:1030px)
{
    .row-body {
        background-image: none;
        background-size:unset;
        background:#002539;
    }
}

@media only screen and (max-width:1050px)
{
    .donate .donate-card
     {
        padding:10px
    }
}
@media only screen and (max-width:767px)
{
    #row-footer
    {
        position: initial !important;
        bottom:0;
    }
}