#loader {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-loader {
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle {
    position: absolute;
    border: 3.5px solid transparent;
    border-radius: 50%;
    animation: rotate 3s infinite ease-in-out;
}

.circle-1 {
    width: 250px;
    height: 250px;
    border-top-color: #cc7d1d;
    border-right-color: #cc7d1d;
    animation-delay: -0.15s;
}

.circle-2 {
    width: 200px;
    height: 200px;
    border-top-color: #404041;
    border-right-color: #404041;
    animation-delay: -0.3s;
}

.circle-3 {
    width: 150px;
    height: 150px;
    border-top-color: #cc7d1d;
    border-right-color: #cc7d1d;
    animation-delay: -0.45s;
}

.circle-4 {
    width: 100px;
    height: 100px;
    border-top-color: #404041;
    border-right-color: #404041;
    animation-delay: -0.6s;
}

@keyframes rotate {
    50% {
        transform: rotate(360deg);
    }
}

.timer-text {
    position: absolute;
    font-size: 48px;
    color: black;
}