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

.text-white-50 {
    color: rgba(255, 255, 255, 0.7);
}

/* Animation */
@keyframes sparkle {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/*------------- sparkle divider-----------------*/

.sparkle-divider {
    height: 4px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8),
                    rgba(180, 180, 180, 0.6),
                    rgba(255, 255, 255, 0.8),
                    rgba(50, 50, 50, 0.7),
                    rgba(255, 255, 255, 0.8));
    background-size: 300% 100%;
    animation: shimmer 8s ease infinite;
    border-radius: 50px;
    margin: 40px auto 40px;
    width: 100%;
}

.mission-icon {
    position: relative;
    display: inline-block;
    font-size: 5rem;
    font-weight: bold;
    background: linear-gradient(135deg, rgb(2, 45, 138),
  rgb(0, 174, 255),
  rgb(93, 255, 255),
  rgb(0, 183, 255),
  rgb(0, 47, 255));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }


.mission-card {
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.014);
}