:root {
    --accent-green: #2ecc71;
    --danger-color: #ff4d4d;
}

.otp-notification-container {
   position: fixed;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 9999;
   width: 350px;
   max-width: 90%;
}

.otp-notification {
   font-family: 'Heebo', sans-serif;
   padding: 15px 20px;
   margin-bottom: 10px;
   border-radius: 8px;
   color: #fff;
   font-size: 16px;
   opacity: 1;
   transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
   box-shadow: 0 4px 15px rgba(0,0,0,0.2);
   border: 1px solid rgba(255, 255, 255, 0.1);
   text-align: center;
}

.otp-notification.otp-success {
   background-color: var(--accent-green);
}

.otp-notification.otp-error {
   background-color: var(--danger-color);
}

.otp-notification.fade-out {
   opacity: 0;
   transform: translateY(-20px);
}