@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");*{ margin:0; padding:0; box-sizing:border-box;}body,input,select{ font-family:"Poppins",sans-serif;}.container{ position:relative; width:100%; min-height:100vh; padding:2rem; background-color:#fafafa; overflow:hidden; display:flex; align-items:center; justify-content:center;}.form{ width:100%; max-width:820px; background-color:#fff; border-radius:10px; box-shadow:0 0 20px 1px rgba(0,0,0,0.1); z-index:1000; overflow:hidden; display:grid; grid-template-columns:repeat(2,1fr);}option,.purchase-form{ background-color:#8356ed; position:relative;}.circle{ border-radius:50%; background:linear-gradient(135deg,transparent 20%,#6025e8); position:absolute;}.circle.one{ width:130px; height:130px; top:130px; right:-40px;}.circle.two{ width:80px; height:80px; top:10px; right:30px;}.purchase-form:before{ content:""; position:absolute; width:26px; height:26px; background-color:#8356ed; transform:rotate(45deg); top:50px; left:-13px;}form{ padding:2.3rem 2.2rem; z-index:10; overflow:hidden; position:relative;}.title{ color:#fff; font-weight:500; font-size:1.5rem; line-height:1; margin-bottom:1.5rem;}.input-container{ position:relative; margin:1.5rem 0;}.input-container:last-of-type{ margin-bottom:2rem;}.input{ width:100%; outline:none; border:2px solid #fafafa; background:none; padding:0.6rem 1.2rem; color:#fff; font-weight:500; font-size:0.95rem; letter-spacing:0.5px; border-radius:5px; transition:0.3s;}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0;}input[type=number]{ -moz-appearance:textfield;}.input-container label{ position:absolute; top:50%; left:15px; transform:translateY(-50%); padding:0 0.4rem; color:#fafafa; font-size:0.9rem; font-weight:400; pointer-events:none; z-index:1000; transition:0.5s;}.btn{ padding:0.6rem 1.3rem; border:2px solid #fafafa; font-size:1.2rem; font-weight:800; color:#8356ed; line-height:1; border-radius:5px; outline:none; cursor:pointer; transition:0.3s; margin:0; width:100%;}.btn:hover{ background-color:transparent; color:#fff; box-shadow:0px 0px 5px 5px #ccc;}.input-container span{ position:absolute; top:0; left:25px; transform:translateY(-50%); font-size:0.8rem; padding:0 0.4rem; color:transparent; pointer-events:none; z-index:500;}.input-container span:before,.input-container span:after{ content:""; position:absolute; width:10%; opacity:0; transition:0.3s; height:5px; background-color:#8356ed; top:50%; transform:translateY(-50%);}.input-container span:before{ left:50%;}.input-container span:after{ right:50%;}.input-container.focus label{ top:0; transform:translateY(-50%); left:25px; font-size:0.8rem;}.input-container.focus span:before,.input-container.focus span:after{ width:50%; opacity:1;}.purchase-info{ padding:2.3rem 2.2rem; position:relative;}.purchase-info .title{ color:#8356ed;}.text{ color:#333; margin:1.5rem 0 2.5rem 0;}.information{ display:flex; color:#555; margin:0.7rem 0; align-items:center; font-size:0.95rem;}.information i{ color:#8356ed;}.icon{ width:28px; margin-right:0.7rem;}.social-media{ padding:2rem 0 0 0;}.social-media p{ color:#333;}.social-icons{ display:flex; margin-top:0.5rem;}.social-icons a{ width:35px; height:35px; border-radius:5px; background:linear-gradient(45deg,#8356ed,#6025e8); color:#fff; text-align:center; line-height:35px; margin-right:0.5rem; transition:0.3s;}.social-icons a:hover{ transform:scale(1.05);}.purchase-info:before{ content:""; position:absolute; width:110px; height:100px; border:22px solid #8356ed; border-radius:50%; bottom:-77px; right:50px; opacity:0.3;}.big-circle{ position:absolute; width:500px; height:500px; border-radius:50%; background:linear-gradient(to bottom,#8356ed,#8356ed); bottom:50%; right:50%; transform:translate(-40%,38%);}.big-circle:after{ content:""; position:absolute; width:360px; height:360px; background-color:#fafafa; border-radius:50%; top:calc(50% - 180px); left:calc(50% - 180px);}.right-circle{ position:absolute; width:350px; height:350px; border-radius:50%; background:linear-gradient(to right,#8356ed 0,#6025e8 70%); bottom:30%; left:72%; transform:translate(-40%,38%); opacity:.6;}.right-circle::after{ content:''; position:absolute; width:250px; height:250px; background-color:#fafafa; border-radius:50%; top:calc(66% - 180px); left:calc(66% - 180px);}.validate{ position:relative; margin:1.5rem 0 !important;}.validate::before{ position:absolute; content:"\f06a"; font-family:FontAwesome; display:block; color:#0ff; font-size:.9rem; top:30%; right:5%; opacity:1; z-index:12;}.validate::after{ color:#0ff; font-size:.75rem; position:absolute; display:block; content:attr(data-validator); top:105%; left:2%;}.validate:last-of-type{ margin-bottom:2rem !important;}@media (max-width:850px){ .form{ grid-template-columns:1fr; } .purchase-info:before{ bottom:initial; top:-75px; right:65px; transform:scale(0.95); } .purchase-form:before{ top:-13px; left:initial; right:70px; } .square{ transform:translate(140%,43%); height:350px; } .big-circle{ bottom:75%; transform:scale(0.9) translate(-40%,30%); right:50%; } .text{ margin:1rem 0 1.5rem 0; } .social-media{ padding:1.5rem 0 0 0; }}@media (max-width:480px){ .container{ padding:1.5rem; } .purchase-info:before{ display:none; } .square, .big-circle{ display:none; } form, .purchase-info{ padding:1.7rem 1.6rem; } .text, .information, .social-media p{ font-size:0.8rem; } .title{ font-size:1.15rem; } .social-icons a{ width:30px; height:30px; line-height:30px; } .icon{ width:23px; } .input{ padding:0.45rem 1.2rem; } .btn{ padding:0.45rem 1.2rem; }}

/* 
Developed by Hero Expert 
Telegram channel: @HeroExpert_ir
*/