@charset "utf-8";
/* CSS Document */

.logo {
    width: 100%;
    margin: 0;
}

.logo img {
    width: 100%;
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes whitespace under images */
}

.footer-logo {
    margin: 0 auto;
    width: 100%;
    padding: 10px 0;

    text-align: center;
}

.footer-logo img {
    display: block;
    margin: 0 auto;
}

.footer-logo p {
    margin: 10px 0 0; /* Add spacing between the logo and text */
    font-size: 14px; /* Adjust font size as needed */
    color: #333; /* Customize text color */
}

.gradient-custom {
    position: relative;
    overflow: hidden;
    padding-top: 2rem;

    /* Modern sci-fi gradient background */
    background: linear-gradient(135deg, #0a1f4f, #0d1b60, #06194f, #1d0a61);
    background-size: 400% 400%;
    animation: gradientAnimation 20s ease infinite;
}

/* Gradient animation */
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Glowing neon dots overlay */
.gradient-custom::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        radial-gradient(circle, rgba(255,0,255,0.6) 2px, transparent 1px),
        radial-gradient(circle, rgba(0,255,255,0.4) 2px, transparent 1px),
        radial-gradient(circle, rgba(0,255,0,0.3) 3px, transparent 2px);
    background-size: 30px 30px, 50px 50px, 80px 80px;
    animation: moveDots 20s linear infinite;
    filter: blur(1.2px); /* subtle glow */
    pointer-events: none;
    z-index: 1;
}

/* Animate dots in multi-directional movement */
@keyframes moveDots {
    0% { background-position: 0 0, 0 0, 0 0; }
    50% { background-position: 250px 200px, 150px 300px, 350px 250px; }
    100% { background-position: 0 0, 0 0, 0 0; }
}

/* Ensure content stays above overlay */
.gradient-custom > * {
    position: relative;
    z-index: 2;
}

/* .gradient-custom{ 
    background-color: #1d0a61!important; 
} */

.align-top {
      align-self: flex-start;
      margin-top: 0.3rem; /* Adjust this value as needed */
    }

.custom-checkbox {
      width: 20px;
      height: 15px;
    }