body {
    background-color: #1a1a1a !important; /* Dark gray background */
    margin-top: 40px;
}
.card {
    background-color: #2c2c2c; /* Darker card background */
    border: 1px solid #444; /* Subtle border */
}
.logo-container {
    position: relative; /* For absolute positioning of hover text */
    margin-bottom: 1rem;
}
.card-body img {
    width: 100%; /* Matches card width */
    height: auto;
    display: block;
    border-radius: 10px; /* Rounded border */
}
.logo-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the text */
    color: #fff; /* White text */
    font-family: 'Orbitron', sans-serif; /* Fancy Google Font */
    font-size: 3rem; /* Adjust size as needed */
    font-weight: 700;
    text-shadow: 0 0 5px rgba(0, 123, 255, 0.8); /* Blue glow */
    opacity: 1; /* Always visible */
    transition: opacity 0.3s ease; /* Smooth fade */
    z-index: 10000;
}
.form-label, .card-body p, .card-body a {
    color: #d3d3d3; /* Light gray text */
}
.form-control {
    background-color: #3a3a3a; /* Dark input background */
    color: #fff; /* White text */
    border-color: #555; /* Subtle border */
}
.form-control:focus {
    background-color: #3a3a3a;
    color: #fff;
    border-color: #007bff; /* Blue focus ring */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.btn-primary {
    background-color: #007bff; /* Keep blue button */
    border-color: #007bff;
}
.btn-primary:hover {
    background-color: #0056b3; /* Darker blue on hover */
    border-color: #0056b3;
}
.card-body a {
    color: #4dabf7; /* Lighter blue for links */
}
.card-body a:hover {
    color: #80c1ff; /* Even lighter on hover */
}

/* Tree - Now a cluster of circles */
.tree {
    position: relative;
    width: 120px; /* Wider to fit 10 circles */
    height: 120px; /* Square container */
    margin: 0 auto 1rem; /* Center it */
}

/* Remove trunk and branches */
.tree::before, .tree::after {
    content: none; /* No trunk or main branch */
}

/* 10 animated nodes */
.tree .node {
    position: absolute;
    width: 34px; /* Slightly larger circles */
    height: 34px;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Glow effect */
    animation: pulse 2s infinite ease-in-out; /* Animation */
}

/* Shades of blue */
.tree .node:nth-child(1) { background: #003087; top: 10px; left: 20%; animation-delay: 0s; }
.tree .node:nth-child(2) { background: #0044b3; top: 10px; right: 20%; animation-delay: 0.2s; }
.tree .node:nth-child(3) { background: #0056b3; top: 30px; left: 10%; animation-delay: 0.4s; }
.tree .node:nth-child(4) { background: #0066cc; top: 30px; right: 10%; animation-delay: 0.6s; }
.tree .node:nth-child(5) { background: #007bff; top: 50px; left: 25%; animation-delay: 0.8s; }
.tree .node:nth-child(6) { background: #1a88ff; top: 50px; right: 25%; animation-delay: 1s; }
.tree .node:nth-child(7) { background: #4dabf7; top: 70px; left: 15%; animation-delay: 1.2s; }
.tree .node:nth-child(8) { background: #66b3ff; top: 70px; right: 15%; animation-delay: 1.4s; }
.tree .node:nth-child(9) { background: #80c1ff; top: 90px; left: 30%; animation-delay: 1.6s; }
.tree .node:nth-child(10) { background: #99ccff; top: 90px; right: 30%; animation-delay: 1.8s; }

/* Pulse animation */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}