/* Reset and Basic Styles */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: Arial, sans-serif;

  background-color: #f4f4f4;

  color: #333;

  line-height: 1.6;

  padding: 20px;

}



header, main, footer {

  max-width: 1200px;

  margin: auto;

}



/* Header Styles */

header {

  text-align: center;

  margin-bottom: 20px;

}



header h1 {

  margin-bottom: 10px;

}



.timezone-clocks {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

}



.timezone-clock {

  margin: 0 10px;

  padding: 10px;

  background-color: #ffffff;

  border: 1px solid #ccc;

  border-radius: 5px;

}



/* Clock Section */

.clock-container {

  text-align: center;

  margin-bottom: 30px;

}



.digital-clock {

  font-size: 3rem;

  margin-bottom: 10px;

  transition: all 0.5s ease-in-out;

}



.toggle-button {

  padding: 10px 20px;

  font-size: 1rem;

  cursor: pointer;

}



/* Quarter Section */

#quarter-section {

  margin-bottom: 30px;

  background-color: #ffffff;

  padding: 20px;

  border-radius: 5px;

}



.quarter-info {

  text-align: center;

}



.progress-bar-container {

  background-color: #ddd;

  border-radius: 10px;

  overflow: hidden;

  margin: 10px 0;

  height: 20px;

  width: 80%;

  margin-left: auto;

  margin-right: auto;

}



.progress-bar {

  background-color: #4caf50;

  height: 100%;

  width: 0%;

  transition: width 1s ease-in-out;

}



/* Calendar Section */

#calendar-section {

  margin-bottom: 30px;

  background-color: #ffffff;

  padding: 20px;

  border-radius: 5px;

}



.calendar {

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  gap: 5px;

  text-align: center;

}



.calendar-day {

  padding: 10px;

  border: 1px solid #ccc;

  position: relative;

}



.calendar-day.current {

  background-color: #ffeb3b;

}



.calendar-day.weekend {

  background-color: #e0f7fa;

}



.calendar-day.past {

  background-color: #d3d3d3;

}



.event-marker {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  position: absolute;

  bottom: 5px;

  right: 5px;

}



.tooltip {

  visibility: hidden;

  background-color: #333;

  color: #fff;

  text-align: center;

  border-radius: 5px;

  padding: 5px;

  position: absolute;

  z-index: 1;

  bottom: 25px;

  right: 0;

  font-size: 0.8rem;

  white-space: nowrap;

}



.calendar-day:hover .tooltip {

  visibility: visible;

}



/* Events Section */

#events-section {

  margin-bottom: 30px;

  background-color: #ffffff;

  padding: 20px;

  border-radius: 5px;

}



.events-list {

  list-style: none;

}



.events-list li {

  margin-bottom: 10px;

  padding: 10px;

  border-bottom: 1px solid #ccc;

}



/* Notification Bar */

.notification-bar {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  background-color: #ff9800;

  color: #fff;

  padding: 15px;

  text-align: center;

  font-size: 1rem;

}



/* Responsive Design */

@media (max-width: 768px) {

  .calendar {

    grid-template-columns: repeat(7, 1fr);

  }



  .timezone-clocks {

    flex-direction: column;

    align-items: center;

  }

}