.navigation-logo img {


    height: 500px !important;

    width: 500px !important;
}

.navigation-container {


    display: flex;

    width: 100%;

    flex-direction: column;
}

.logo-container {


    display: flex;

    margin-right: auto;

    margin-left: auto;

    width: 100%;

    justify-content: center;


}

.logo {

}

#header {
    height: 100vh;
    position: relative;
  }
  
  #header::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('../../../static/splashpage/media/five-line-animation.gif');
    background-size: cover; /* Adjust this property based on your needs */
    opacity: 0.2; /* Set the desired opacity for the background image */
    z-index: -1; /* Ensure the pseudo-element is behind the content */
  }
  
#navigation-logo {

    animation: logoTransition 0.5s ease-in-out;
}

@keyframes logoTransition {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}