#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #023530, #9f8151); /* Dark teal to tan gradient */
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    display: flex;
    justify-content: space-between; /* Improved spacing */
    align-items: flex-end;
    width: 160px; /* Increased box size */
    height: 120px; /* Increased height */
    padding: 15px;
    background: #ebe1cf; /* Updated background color */
    border-radius: 12px; /* Slightly larger radius */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* Enhanced shadow for more depth */
}

.candle {
    width: 25%; /* Wider candles */
    height: 20%; /* Initial smaller height */
    background-color: #023530; /* Updated candle color to dark teal */
    border-radius: 3px; /* Adjusted for the bigger size */
    animation: grow 2s infinite ease-in-out;
}

@keyframes grow {
    0%, 100% {
        height: 20%; /* Smaller resting state */
    }
    50% {
        height: 100%; /* Full expansion */
    }
}

/* Customizing each candle to animate with different timing for a more dynamic effect */
.spinner .candle:nth-child(1) { animation-delay: -0.2s; }
.spinner .candle:nth-child(2) { animation-delay: -0.4s; }
.spinner .candle:nth-child(3) { animation-delay: -0.6s; }