body:before,
body:after {
	position: fixed;
	content: "";
	z-index: -1;
	top: 75%;
	left: -1200px;
	height: 4025px;
	width: 4000px;
	border-radius: 35%;
}

body:before {
	background: var(--theme-primary);
	transform: rotate(-265deg);
	/* animation:gowave 15s linear infinite backwards; */
}

body:after {
	background: var(--theme-primary-trans4);
	transform: rotate(-260deg);
	/* animation:gowave2 15s linear infinite backwards; */
	/* animation-delay: .4s; */
}

@keyframes gowave {
	0% {
		transform: rotate(0deg)
	}

	100% {
		transform: rotate(360deg)
	}
}

@keyframes gowave2 {
	0% {
		transform: rotate(0deg)
	}

	100% {
		transform: rotate(360deg)
	}
}

body {
	background: center;
}

.conatiner {
	position: relative;
	margin: 0;
	padding: 0;
	background: bottom;
}

.Box {
	position: relative;
	padding: 0;
	height: 100vh;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	-ms-flex-item-align: center;
}

.section {
	position: relative;
	width: 500px;
	border-radius: 60px;
	margin: 50px auto;
	background: white;
	box-shadow: var(--shadow-color);
	border: 2px solid var(--theme-border-color1);
	animation: boxup .5s linear 1;
	overflow: hidden;
}

.section>form {
	margin: 0;
	padding: 0;
}

.section.sign-up {
	width: 650px;
}

@keyframes boxup {
	0% {
		transform-origin: bottom;
		transform: rotateX(90deg) scale(0);
	}

	100% {
		transform: rotateX(0deg) scale(1);
	}
}

.header {
	position: relative;
	width: 100%;
	display: flex;
	flex-flow: column;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	background: linear-gradient(var(--theme-secondary), var(--apaka-white));
}

.header,
.conatiner-body {
	padding: 30px 50px;
}

.header .logo {
	position: relative;
	width: 57px;
	height: 57px;
	background: url(../icon/MLogo.svg)center no-repeat;
	background-size: contain;
	z-index: 4;
}

.header .logo img {
	width: 100%;
	margin-bottom: 20px;
}

.header .header-details {
	position: relative;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: flex-start;
}

.header .header-details>h1 {
	position: relative;
	width: 100%;
	font-weight: bold;
	margin: 0 auto 3px auto;
	padding: 0;
	color: var(--apaka-white);
}

.header .header-details>p {
	font-weight: 500;
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.header .header-details .client-name {
	font-weight: 500;
	color: var(--theme-primary);
}

.header label {
	font-size: 15px;
	text-transform: capitilise;
	margin: 10px 0;
	display: block;
	text-align: center;
	font-weight: 500;
	color: var(--apaka-favrite);
}

.middel,
.foot {
	position: relative;
	display: block;
}

.inputfield {
	position: relative;
	display: block;
	margin-top: 30px;
}

.middel>.inputfield:last-child {
	margin-bottom: 40px;
}

.inputfield>.icoinp {
	position: relative;
	width: 100%;
	padding: 5px;
	margin: 0 auto;
	border-radius: 100px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.inputfield:not(.options)>.icoinp {
	border: 2px solid var(--theme-border-color1);
}

.inputfield>.icoinp>i {
	position: relative;
	padding-left: 15px;
	padding-right: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--theme-border-color1);
	transition: .3s;
	font-size: 18px;
}

.inputfield>.icoinp>i.eyes {
	cursor: pointer;
	padding-right: 15px;
	padding-left: 5px;
}


.inputfield:focus-within>.icoinp>i {
	color: var(--theme-primary);
}

.inputfield:focus-within:not(.options)>.icoinp {
	border-color: var(--theme-primary);
	box-shadow: var(--shadow-color);
}

.inputfield>.icoinp>*:not(i) {
	width: 100%;
	border: none;
	outline: none;
	resize: none;
	padding: 8px 10px;
	font-size: 15px;
	font-weight: normal;
	transition: .3s;
	border-radius: 100px;
	overflow: hidden;
	letter-spacing: .7px;
}

.inputfield>.icoinp>textarea {
	height: 100px;
}

.inputfield.options .icoinp {
	position: relative;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: start;
	gap: 5px;
}

.inputfield.options .icoinp>label {
	position: relative;
	display: block;
	padding: 0 15px;
	text-align: left;
	font-weight: 500;
	line-height: 1.5;
}

.inputfield.options .icoinp>.inputs,
.inputfield.options .icoinp>.inputs label {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: start;
}

.inputfield.options .icoinp>.inputs {
	gap: 15px;
}

.inputfield.options .icoinp>.inputs label {
	line-height: 1.5;
	gap: 2px;
}

.inputfield.options div>label>input[type='radio']:checked~span {
	font-weight: 500;
	color: var(--theme-primary);
}

.inputfield.options div>label:not(:first-child) input {
	margin: 0 5px 0 0;
}

.inputfield.options div>label:not(:first-child) {
	font-weight: normal;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}

.btns {
	position: relative;
	padding: 0;
	margin: 20px auto;
	display: flex;
	vertical-align: middel;
	align-items: center;
	justify-content: space-between;
}

.anchor-lbl {
	cursor: pointer;
}

.anchor-lbl span {
	transition: .3s;
}

.anchor-lbl:hover span {
	font-weight: 500;
	color: var(--theme-primary);
}

.btns .btn.full {
	width: 100%;
}

.btns .btn {
	padding: 18px 30px;
	font-size: 15px;
	font-weight: 500;
	text-transform: uppercase;
	outline: none;
	cursor: pointer;
	border-radius: 100px;
	transition: .3s;
}

.btns .btn:hover {
	font-weight: 500;
}

.btns .btn.filled {
	color: var(--apaka-white);
	border: 3px solid transparent;
}

.btns .btn.filled.light {
	color: var(--theme-primary);
	background: var(--apaka-white);
	border-color: var(--theme-border-color1);
}

.btns .btn.filled.primary {
	background: var(--theme-primary);
	box-shadow: 0 0 90px -8px var(--theme-primary);
}

.btns .btn.filled.secondary {
	background: var(--theme-secondary);
	box-shadow: 0 0 90px -8px var(--theme-secondary);
}

.btns .btn.filled.primary:hover {
	color: var(--theme-primary);
	background-color: var(--apaka-white);
}

.btns .btn.filled.secondary:hover {
	color: var(--theme-secondary);
	background-color: var(--apaka-white);
}


.btns .btn.outline {
	background: var(--apaka-white);
	border: 3px solid transparent;
}

.btns .btn.outline.light {
	color: var(--theme-primary);
	border-color: var(--theme-primary);
}

.btns .btn.outline.primary {
	color: var(--theme-primary);
	border-color: var(--theme-primary);
}

.btns .btn.outline.secondary {
	color: var(--theme-secondary);
	border-color: var(--theme-secondary);
}

.btns .btn.outline.primary:hover {
	background: var(--theme-primary);
	color: var(--apaka-white);
	box-shadow: 0 0 90px -8px var(--theme-primary);
}

.btns .btn.outline.secondary:hover {
	background: var(--theme-secondary);
	color: var(--apaka-white);
	box-shadow: 0 0 90px -8px var(--theme-secondary);
}

.mail-detailsBox {
	position: relative;
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	margin: 30px auto;
}

.emailBox {
	display: flex;
	position: relative;
	width: 100%;
}

.emailBox>label {
	margin: 0 auto 10px auto;
	padding: 7px 20px;
	border: 2px solid var(--apaka-BCR);
	border-radius: 100px;
	background: var(--apaka-bg);
	color: var(--apaka-black3);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .5px;
	text-transform: lowercase;
}

.col2Same {
	position: relative;
	display: flex;
	vertical-align: middle;
	align-items: center;
	justify-content: space-between;
	margin: 30px auto;
}

.col2Same div>label i {
	margin-right: 7px;
}

.col2Same div>label {
	position: relative;
	width: 100%;
	display: flex;
	vertical-align: middle;
	align-items: center;
	justify-content: space-between;
	gap: 5px;
	font-size: 14px;
	padding: 0;
	letter-spacing: .5px;
	color: var(--apaka-smoke);
	cursor: pointer;
}

fieldset[robar] {
	position: relative;
	padding: 0;
	margin: 0 auto;
	border-style: solid;
	border-width: 2px 0 0 0;
	border-color: var(--theme-border-color1);
	text-align: center;
	line-height: 1;
}

fieldset[robar] legend {
	letter-spacing: 1px;
	background: var(--apaka-white);
	border-radius: 100px;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--apaka-BCR);
	display: flex;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	box-shadow: var(--shadow-color);
	border: 2px solid var(--theme-border-color1);
	transform: scale(.8);
}

fieldset[robar] legend span {
	font-size: 15px;
	font-weight: 500;
}

@media screen and (max-width:700px) {
	.header .logo {
		width: 40px;
		height: 40px;
	}

	.section {
		width: 95%;
		margin: 0px auto;
		padding: 10px 20px;
		border-radius: 40px;
	}

	.header .header-details>h1 {
		font-size: 18px;
	}

	.header .header-details>p {
		font-size: 14px;
	}

	.col2grid,
	.col3grid,
	.col4grid {
		gap: 30px;
		margin-top: 30px;
	}

	.col2grid .inputfield,
	.col3grid .inputfield,
	.col4grid .inputfield {
		margin-top: 0;
	}
}