.clock-number,
.clock-center{
     transform: translate(-50%, -50%);
}

@keyframes motion {
     0%{
          transform: rotate(0deg);
          /* transform-origin: right center; */
     }
     50%{
          transform: rotate(180deg);
          /* transform-origin: right center; */
     }
     100%{
          transform: rotate(360deg);
          /* transform-origin: right center; */
     }
}

@keyframes anti_clockWise {
     0%{
          transform: rotate(0deg);
     }
     50%{
          transform: rotate(180deg);
     }
     100%{
          transform: rotate(360deg);
     }
}

@keyframes clockWise {
     0%{
          transform: rotate(360deg);
     }
     50%{
          transform: rotate(180deg);
     }
     100%{
          transform: rotate(0deg);
     }
}

.hour-hand{
     transform: rotate(90deg);
     transform-origin: right center;
     /* animation: motion 643200s linear 0s infinite; */
}
.minute-hand{
     transform: rotate(90deg);
     transform-origin: right center;
     /* animation: motion 3600s linear 5s infinite; */
}
.second-hand{
     transform: rotate(90deg);
     transform-origin: right center;
     /* animation: motion 60s linear 0s infinite; */
}

.year_item{
     position: absolute;
     width: 60px; /* Size of the small numbered divs */
     height: 50px;
     /* background-color: #ef4444; Red background for numbered divs */
     border-radius: 50%; /* Make them circular */
     display: flex;
     justify-content: center;
     align-items: center;
     /* background: linear-gradient(90deg,rgb(0, 0, 0) 0%, rgb(41, 30, 255) 50%, rgb(75, 78, 255) 100%); */
     color: rgb(255, 255, 255);
     /* border: 0.5px solid black; */
     font-weight: 600;
     font-size: 1.3rem;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* Shadow for numbered divs */
     /* rotate: 90deg; */
     /* animation: clockWise 10s linear 0s infinite; */
}

.other_item{
     position: absolute;
     width: 40px; /* Size of the small numbered divs */
     height: 30px;
     /* background-color: #ef4444; Red background for numbered divs */
     border-radius: 50%; /* Make them circular */
     display: flex;
     justify-content: center;
     align-items: center;
     /* background: linear-gradient(90deg,rgb(0, 0, 0) 0%, rgb(41, 30, 255) 50%, rgb(75, 78, 255) 100%); */
     color: rgb(0, 0, 0);
     /* border: 0.5px solid black; */
     font-weight: 600;
     font-size: 1rem;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* Shadow for numbered divs */
     /* rotate: 90deg; */
     /* animation: clockWise 10s linear 0s infinite; */
}

.small_item{
     position: absolute;
     width: 25px; /* Size of the small numbered divs */
     height: 20px;
     /* background-color: #ef4444; Red background for numbered divs */
     border-radius: 50%; /* Make them circular */
     display: flex;
     justify-content: center;
     align-items: center;
     /* background: linear-gradient(90deg,rgb(56, 255, 126) 0%, rgb(112, 255, 162) 50%, rgb(209, 255, 225) 100%); */
     color: rgb(255, 255, 255);
     /* border: 0.5px solid black; */
     font-weight: 600;
     font-size: 0.9rem;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* Shadow for numbered divs */
     /* rotate: 90deg; */
     /* animation: clockWise 10s linear 0s infinite; */
}

.sec,
.min,
.hour,
.date,
.month,
.day,
.year{
     rotate: 0deg;
     /* animation: anti_clockWise 10s linear 0s infinite; */
}
/* --- PAGE BACKGROUND --- */
body {
  background: linear-gradient(135deg, #41343a 0%, #2a1924 50%, #1A1423 100%);
}

/* --- CIRCLE COLORS --- */
.year {
  background-color: #96705B !important;
}
.sec {
  background-color: #a1866f !important;
}
.min {
  background-color: #b49782 !important;
}
.hour {
  background-color: #8b6d5c !important;
}
.date {
  background-color: #baa384 !important;
}
.month {
  background-color: #7c6650 !important;
}
.day {
  background-color: #c8b39a !important;
}

/* --- Text Color for Circles --- */
.year, .sec, .min, .hour, .date, .month, .day {
  color: #e1dacc !important; /* Light text for legibility */
}

/* --- Highlight for Active Value --- */
.high_light {
  background-color: #d4af7f !important;
  color: #1A1423 !important;
}

/* Horizontal or vertical strip (e.g., .strip) */
.strip {
  background-color: #508D7C; /* Deep Teal for bold accent */
  height: 8px;               /* adjust as needed */
  width: 100%;               /* or layout-specific width */
  border-radius: 4px;        /* optional for soft edges */
  margin: 16px 0;            /* add spacing if desired */
}

/* For a highlight strip */
.strip-highlight {
  background-color: #d4af7f; /* Soft gold for attention */
}

/* For a subtle divider strip */
.strip-divider {
  background-color: #c8b39a; /* Light neutral tone */
  height: 2px;
}