body {
      background: radial-gradient(circle at center, #143d1a 0%, #0b1a09 100%);
      background-image: url(../images/welcome-bg.jpg);
      background-size: cover;
      background-position: center;
      color: #fff;
      font-family: "Poppins", sans-serif;
      overflow-x: hidden;
    }

    .calendar-container {
      max-width: 1100px;
      margin: 60px auto;
      background: rgba(0, 0, 0, 0.75);
      border: 2px solid #ffd700;
      border-radius: 20px;
      box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
      padding: 40px;
    }

    h1 {
      color: #ffd700;
      text-shadow: 2px 2px 8px #b22222;
      letter-spacing: 2px;
      font-weight: bold;
    }

    .day-box {
      background: radial-gradient(circle, #d63384, #a60038);
      border: 3px solid gold;
      border-radius: 50%;
      color: #fff;
      font-weight: bold;
      font-size: 2.5rem;;
      width: 100%;
      padding-top: 100%;
      position: relative;
      text-align: center;
      cursor: pointer;
      margin-bottom: 20px;
      transition: all 0.3s ease;
      box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    }

    .day-box-final {
      background: radial-gradient(circle, #009a47, #006830);
      border: 3px solid gold;
      border-radius: 50%;
      color: #fff;
      font-weight: bold;
      font-size: 2.5rem;
      width: 100%;
      /* padding-top: 44%; */
      position: relative;
      text-align: center;
      cursor: pointer;
      margin-bottom: 20px;
      transition: all 0.3s ease;
      box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
      max-width: 144.33px;
      margin: 0 auto 20px;
      height: 144.33px;
    }

    .day-box span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .day-box-final span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .day-box:hover {
      transform: scale(1.08);
      background: radial-gradient(circle, #ff4da6, #a60038);
      box-shadow: 0 0 25px rgba(255, 215, 0, 0.7);
    }

    .day-box-final:hover {
      transform: scale(1.08);
      background: radial-gradient(circle, #03ad52, #007536);
      box-shadow: 0 0 25px rgba(255, 215, 0, 0.7);
    }

    .modal-content {
      /* background: linear-gradient(145deg, #fffaf0, #ffe5b4); */
      border: 3px solid gold;
      border-radius: 20px;
      text-align: center;
      color: #333;
      padding: 20px;
      box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
    }

    .gift-icon {
      font-size: 3rem;
      color: #d63384;
      animation: bounce 1s infinite alternate;
    }

    @keyframes bounce {
      from { transform: translateY(0); }
      to { transform: translateY(-10px); }
    }

    .bonus-text {
      font-weight: 600;
      font-size: 1.2rem;
      color: #b22222;
    }

    /* Snow effect */
    .snowflake {
      position: fixed;
      top: 0;
      color: #fff;
      font-size: 1rem;
      opacity: 0.8;
      animation: fall linear infinite;
    }

    @keyframes fall {
      0% { transform: translateY(-10vh); }
      100% { transform: translateY(100vh); }
    }

    @media (max-width: 450px) and (orientation: portrait) { 
      .day-box-final {
    background: radial-gradient(circle, #009a47, #006830);
    padding-top: 100%;
    max-width: 144.33px;
    height: auto;
}
    }