footer{
    position: relative;
    width: 100%;
    background-color: #3586ff;
    min-height: 5vw;
    padding: 1vw 2.5vw;
    display: flex;
    color: white !important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    }
    footer  .Social_icon,
    footer  .menu{
      position: inherit;
      display: inherit;
      justify-content: inherit;
      align-items: inherit;
      margin: 0.5vw 0;
      flex-wrap: wrap ;
    }
    footer  .Social_icon li,
    footer  .menu li{
    list-style: none;
    }
    footer .Social_icon li a,
    footer .menu li a{
    font-size: 2em;
    margin: 0 0.5vw;
    display: inline-block;
    transition: 0.5s;
    }
    footer .menu li a{
    opacity: 0.65;
    }
    footer .Social_icon li a:hover{
    transform: translateY(-0.5vw);
    }
    footer .meun li a:hover{
    opacity: 1;
    }
    footer .menu li a{
    font-size: 1.2em;
    }
    footer p{
    text-align: center;
    margin-top: 0.78vw;
    margin-bottom: 0.5vw;
    font-size: 1.1em;
    }
    footer .wave{
    position: absolute;
    top: -4.8vw;
    left: 0;
    width: 100%;
    height: 5vw; 
    background:  url('photos/wave.png');
    background-size: 52vw 5vw;
    }
    footer .waves #wave1{
    z-index: 1000;
    opacity: 1;
    bottom: 0;
    animation: animateWave 6s linear infinite;
    }
    footer .waves #wave2{
    z-index: 999;
    opacity: 0.5;
    bottom: 0.5vw;
    animation: animateWave_2 6s linear infinite;
    }
    footer .waves #wave3{
    z-index: 1000;
    opacity: 0.2;
    bottom: 0.78vw;
    animation: animateWave 4s linear infinite;
    }
    footer .waves #wave4{
    z-index: 999;
    opacity: 0.7;
    bottom: 1vw;
    animation: animateWave_2 4s linear infinite;
    } 
    
@media only screen and (max-width: 768px) {
  footer .waves #wave1{animation-duration: 12s;}
  footer .waves #wave2{animation-duration: 12s;}
  footer .waves #wave3{animation-duration: 8s;}
  footer .waves #wave4{animation-duration: 8s;}
}