.div1 {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-left: 150px;
  margin-right: 150px;
}

.but1 {
  width: 25px;
  height: 25px;
}

.div2 {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-left: 350px;
}

.but2 {
  width: 25px;
  height: 25px;
}

.visa-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 400px;
  height: 234px;
  background-image: radial-gradient(
    circle 897px at 9% 80.3%,
    rgba(55, 60, 245, 1) 0%,
    rgba(234, 161, 15, 0.9) 100.2%
  );
  border-radius: 10px;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  gap: 15px;
}
.logoContainer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: fit-content;
  position: absolute;
  top: 0;
  left: 0;
  padding: 18px;
}
.svgLogo {
  height: 40px;
  width: auto;
}
.inputstyle::placeholder {
  color: #ffffff;
}
.inputstyle {
  background-color: transparent;
  border: none;
  outline: none;
  color: white;
  caret-color: red;
  font-size: 13px;
  height: 25px;
  letter-spacing: 1.5px;
}
.number-container {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
}
#cardNumber {
  width: 100%;
  height: 25px;
}
.name-date-cvv-container {
  width: 100%;
  height: 25px;
  display: flex;
  gap: 10px;
}
.name-wrapper {
  width: 60%;
  height: fit-content;
  display: flex;
  flex-direction: column;
}
.expiry-wrapper,
.cvv-wrapper {
  width: 30%;
  height: fit-content;
  display: flex;
  flex-direction: column;
}
.cvv-wrapper {
  width: 10%;
}
#expiry,
#cvv {
  width: 100%;
}
.input-label {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #e2e2e2;
  width: 100%;
}