.center-xy{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.dir-rtl{
    direction: rtl;
}

.navanim{
    position: fixed;
    background-color: white;
    animation-name: fadeInUp;
    animation-duration: 500ms;
    box-shadow: 0px 0px 20px 0px #d1d1d1;
}
@keyframes fadeInUp {
    from {
      opacity: 0;
      top: -50px;
    }

    to {
      opacity: 1;
      top: 0;
    }
}

.floating{
  animation: floaty 7s infinite;
}
@keyframes floaty {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: translateY(8%);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-in-out;
  }
}
.floatingimg1{
  animation: floatyimg 5s infinite;
}
.floatingimg2{
  animation: floatyimg 2s infinite;
}
.floatingimg3{
  animation: floatyimg 3s infinite;
}@keyframes floatyimg {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: translateY(25%);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-in-out;
  }
}

.phonenavanim{
  right: 0px;
  animation-name: phonefadeInUp;
  animation-duration: 500ms;
  box-shadow: 0px 0px 20px 0px #d1d1d1;
}
@keyframes phonefadeInUp {
  from {
    opacity: 0;
    right: -100%;
  }

  to {
    opacity: 1;
    right: 0px;
  }
}
.active-transition{
transition: all 0.5s;
}
.noactive-content{
  max-height: 100px;
  color: #007db3;
  background-color: white;
}
.active-content{
  max-height: 500px;
  background-color: #007db3;
  color: white;
  transition: max-height 0.5s ease-out;
}

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