#loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 5px;
  background-color: #6E5A54;
  width: 0;
  transition: width 0.3s ease-in-out;
  z-index: 9999;
}

/*--------------------------------------------------------------
# timer Section
--------------------------------------------------------------*/
.countdown-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: clamp(10px, 2vw, 20px);
  padding: clamp(10px, 2vw, 20px) clamp(15px, 3vw, 30px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  width: clamp(250px, 40vw, 450px);
}

.status-text {
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: clamp(1.3em, 1.5vw, 1.5em);
  color: #FFFFFF;
  font-weight: bold;
  margin-bottom: 3px;
  text-shadow: 1px 1px 1px #a69f9b;
}

.timer-display {
  display: flex;
  gap: clamp(8px, 1.5vw, 15px);
  justify-content: center;
}

.time-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: clamp(10px, 1.5vw, 15px);
  width: clamp(60px, 8vw, 90px);
  height: clamp(60px, 8vw, 90px);
  background: #6E5A54;
  background: -webkit-linear-gradient(top, #6E5A54, #917870);
  background: linear-gradient(to bottom, #6E5A54, #917870);
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.5);
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.time-value {
  font-size: clamp(2em, 2.5vw, 2.8em);
  font-weight: bold;
}

.time-label {
  font-size: clamp(0.5em, 0.7vw, 0.7em);
  text-transform: uppercase;
  margin-top: 3px;
  color: #555;
  text-shadow: 1px 1px 1px #ffffff;
}