.date {
    font-family: "Playfair Display", serif;
    color: #e0b4b4;
    font-size: 1.2rem;
    margin: 0.5rem 0;
    letter-spacing: 2px;
  }
  
  .countdown-timer {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in;
    display: flex;
    justify-content: center;
    gap: 2rem; /* Space between time segments */
    align-items: center; /* Align text vertically */
    margin-top: 1rem;
    flex-wrap: wrap; /* Ensure responsiveness on smaller screens */
  }
  
  .time-segment {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    color: #f0d4d4;
    transition: opacity 0.3s ease-in;
    visibility: hidden;
    overflow: hidden;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-in;
  }
  
  .time {
    font-family: "Playfair Display", serif;
    font-size: 2.5rem;
    display: inline;
  }
  
  .label {
    font-family: "Dancing Script", cursive;
    font-size: 1.2rem;
  }
  
  
  .countdown-timer.loaded {
    opacity: 1;
    visibility: visible;
  }
  
  
  .countdown-timer.loaded .time-segment {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  
  .countdown-timer.loaded .time-segment {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  
  /* Staggered animation delays */
  .time-segment:nth-child(1) .text-wrapper { transition-delay: 0s; }
  .time-segment:nth-child(2) .text-wrapper { transition-delay: 0.1s; }
  .time-segment:nth-child(3) .text-wrapper { transition-delay: 0.2s; }
  .time-segment:nth-child(4) .text-wrapper { transition-delay: 0.3s; }
  
  /* Mobile */
  @media (max-width: 768px) {
    .countdown-timer {
      flex-wrap: wrap; /* Allow segments to wrap onto the next line */
      gap: 1.5rem; /* Reduce space between segments */
    }
  
    .time-segment {
      flex-direction: column; /* Stack time and label vertically */
      align-items: center; /* Center align text */
    }
  
    .time {
      font-size: 2.5rem; /* Reduce font size for smaller screens */
    }
  
    .label {
      font-size: 1.5rem; /* Reduce font size for the labels */
    }
  }
  
  
  @media (max-width: 440px) {
    .countdown-timer {
      flex-wrap: wrap; /* Allow segments to wrap onto the next line */
      gap: 1rem; /* Reduce space between segments */
    }
  
    .time-segment {
      flex-direction: column; /* Stack time and label vertically */
      align-items: center; /* Center align text */
    }
  
    .time {
      font-size: 2.5rem; /* Reduce font size for smaller screens */
    }
  
    .label {
      font-size: 1.5rem; /* Reduce font size for the labels */
    }
  }