@font-face {
    font-family: 'Mo3alem';
    src: url('../fonts/Alexandria-VariableFont_wght.ttf');
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


body{
    font-family: 'Mo3alem', sans-serif;
}

.nb_footer{
    border-radius: 20px;
    background: linear-gradient(-45deg, #acff7c, #7ef1b8, #ff8d4c, #a7f5c6);
    /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    padding-bottom: 0;
    margin-bottom: 30px;
}

.app_body{
    border-radius: 10px;
    background: linear-gradient(-45deg, #e6e6e6, #b2ffd8, #ffede2, #cbffe0);
    /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    padding-bottom: 0;
    margin-bottom: 30px;
}

.nb_balance{
    border-radius: 20px;
    background: linear-gradient(-45deg, #020202, #021b0e, #2b0308, #021b0c);
    /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    padding-bottom: 0;
    margin-bottom: 30px;
}

.social-footer{
    font-size: 25px;
}


.email-bt {
    background:#F95C18;
    border:2px solid #F95C18;
    border-radius:50%;
    box-shadow:0 8px 10px rgba(249,92,24,0.3);
    cursor:pointer;
    height:69px;
    text-align:center;
    width:69px;
    position: fixed;
    left: 4%;
    bottom: 5%;
    z-index:999;
    transition:.3s;
    -webkit-animation:email-an linear 1s infinite;
    animation:email-an linear 1s infinite;
}

.email-bt .text-call{
    height:68px;
    width:68px;        
    border-radius:50%;
    position:relative;
    overflow:hidden;
}

.email-bt .text-call span {
text-align: center;
color:#F95C18;
opacity: 0;
font-size: 0;
    position:absolute;
    right: 13px;
    top: 20px;
line-height: 14px;
    font-weight: 600;
text-transform: uppercase;
transition: opacity .3s linear;
font-family: 'Mo3alem', Arial, Helvetica, sans-serif;
}

.email-bt .text-call:hover span {
opacity: 1;
text-align: center;
    font-size: 13px;
}
.email-bt:hover i {
display:none;
}

.email-bt:hover {
    z-index:1;
    background:#fff;
    transition:.3s;
}
.email-bt:hover i {
    color:#38a3fd;
    font-size:40px;
    transition:.3s;
}
.email-bt i {
    color:#fff;
    font-size:29px;
    transition:.3s;
    line-height: 66px;
}

.email-bt i  {
    -webkit-animation: opsimple 3s infinite;
    animation: opsimple 3s infinite;
}

@-webkit-keyframes email-an {
    0% {
    box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
40% {
    box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
80% {
    box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(249,92,24,0.067)
}
100% {
    box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 40px rgba(249,92,24,0.0)
}
}@keyframes email-an {
    0% {
    box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
40% {
    box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
80% {
    box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(249,92,24,0.067)
}
100% {
    box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 40px rgba(249,92,24,0.0)
}
}

@keyframes opsimple {
0% {
opacity: 0;
}
40% {
opacity: 1;
}

80% {
opacity: 1;
}
100% {
opacity: 0;
}
}

@-webkit-keyframes opsimple {
0% {
opacity: 0;
}
40% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}

.egypt-flag{
    width: 22px;
    margin-right: 5px;
}

.top-50{
 margin-top: 50px;
}


.marquee {
    /* background-color: #ddd; */
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
  }
  .marquee img {
    display: inline-block;
    /* font-size: 20px; */
    position: relative;
    margin-right: 8px;

    left: 100%;
    animation: marquee 30s linear infinite;
  }
  .marquee:hover img {
    animation-play-state: paused;
  }
  
  .marquee img:nth-child(1) {
    animation-delay: 0s;
  }
  .marquee img:nth-child(2) {
    animation-delay: 0.8s;
  }
  .marquee img:nth-child(3) {
    animation-delay: 1.6s;
  }
  .marquee img:nth-child(4) {
    animation-delay: 2.4s;
  }
  .marquee img:nth-child(5) {
    animation-delay: 3.2s;
  }
  
  @keyframes marquee {
    0%   { left: 100%; }
    100% { left: -100%; }
  }

  .medica-block{
    margin-top: 50px;
    margin-bottom: 50px;
  }