*{margin:0px; padding:0px;box-sizing: border-box; font-family: "Montserrat", sans-serif;}
img{max-width: 100%;}

.main{display: flex;flex-direction: column;justify-content: space-between;min-height: 100vh;
background-color: rgba(239, 239, 255, 1);padding:20px 20px 50px 20px;align-items: center;}
.main h1{text-align: center;margin-bottom: 20px;color: #1D1D1D;font-weight: 500;font-size: 40px;line-height: 100%;
}


.main .cta{background-color: #fff;border-radius: 30px;padding: 30px 40px;text-align: center;width: 668px;
margin: 20px auto 0;}
.main .cta h3{margin-bottom: 48px;color: #1D1D1D;font-size: 36px;font-weight: 500;}

.pay-form{display: flex;flex-direction: column;gap: 20px;}
.input-label{font-size: 16px;color: #6B6B6B;text-align: left;}
.input-row{display: flex;align-items: center;gap: 12px;background: #F5F6FA;border: 1px solid #E2E5F1;border-radius: 18px;padding: 12px 16px;}
.input-row input{flex: 1;border: none;background: transparent;font-size: 18px;color: #1D1D1D;outline: none;}
.currency{font-weight: 600;color: #1D1D1D;}

.btn{color: #fff;display: block;cursor: pointer;width: 100%;border-radius: 20px;
padding: 16px 30px;transition: 0.3s;position: relative; border: none;
  overflow: hidden;
text-decoration: none;}

.btn:hover{transition: 0.3s;}

.btn span{color: #fff;position: relative;z-index: 3;}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #96588C, #268EE4);
  transition: opacity 0.6s ease;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #268EE4, #96588C);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.btn:hover::after {
  opacity: 1;
}


@media(max-width: 767px){
.main{padding-top: 76px;padding-bottom: 80px;}
    .main h1{font-size: 30px;margin-bottom: 57px;}
    .hero img{max-width: 188px;}
    .main .cta{width: 100%;padding: 36px;}
    .main .cta h3{font-size: 26px;}
    .input-row{padding: 12px 14px;}
    .btn{font-size: 20px;padding:12px 20px;}
}








/* / */