body {
    margin: 0;
    background-color: #f5f5f5;

}

.Container{
    margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
  font-family: Arial, sans-serif;
}

.HeaderContainer{
    width: 414px;
    display: flex;
    justify-content: center;
    background-color: rgb(255, 255, 255);

}

.WalletTitle{
    display: flex;
}

    
.AppleLogo{
    width: 35px;
    height: 35px;
}

.back-button {
  position: absolute;
  top: 20px; 
  left: 16px;
  padding: 10px 15px;
  background-color: #002955; 
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
.back-button:hover {
  background-color: #005bb5; 
}
.phone {
  width: 414px;
  height: 896px;
  background-color: #ffffff;
  overflow: hidden;
  position: relative;
  background-image: url('logoapple.png'); 
  background-repeat: no-repeat;
  background-size: 300px; 
  background-position: center;
  
}
.wallet-view, .payment-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  display: none;
 
  
}
.wallet-view.active, .payment-view.active {
  display: flex;
}
.ov-card {
  background: #f2f2f2;
  width: 280px;
  height: 160px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  margin: 20px auto;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  position: relative;
  animation: moveUp 1.5s forwards;
}


.ov-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ffce35, #ffce35); 
  border-radius: 20px;
 
  
  
}
.ov-card .logo-ns {
  font-size: 24px;
  font-weight: bold;
  color: white;
  position: relative;
  z-index: 1;
}
.ov-card .card-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  position: relative;
  z-index: 1;
}
.card-details img {
  width: 60px;
}
.confirmation {
  text-align: center;
  margin-top: 20px;
  display: none;
}
.confirmation .checkmark {
  font-size: 48px;
  color: #007aff;
  margin-bottom: 10px;
}
.confirmation .done {
  font-size: 18px;
  color: #333;
}
.pay-button {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 40px;
  
}
.pay-button:hover {
  background-color: #ffcf36;
}

@keyframes moveUp {
    0% {
        bottom: 120%; /* Start below */
    }
    100% {
        bottom: 18.5%; /* End in the center */
        transform: translateY(50%); /* Adjust to center the text */
    }
}