@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,200,300,500,600,700,900);
* {
	font-family: "Tajawal", sans-serif;
}

/* width */
::-webkit-scrollbar {
	width: 9px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #555;
}

.btn-outline-primary {
	color: #2196f3;
	border-color: #2196f3;
}
.btn-outline-primary:hover {
	background-color: #2196f3;
	border-color: #2196f3;
}
.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus {
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
	background-color: #2196f3;
	border-color: #2196f3;
}
.btn-check:checked + .btn-outline-primary:focus,
.btn-check:active + .btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus {
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
	color: #2196f3;
}

.btn-primary,
.bg-primary {
	background-color: #2196f3 !important;
}
.btn-primary {
	border-color: #2090ec !important;
}
.text-primary {
	color: #2196f3 !important;
}
#header {
	height: calc(100vh - 50px);
}

.overlay-color {
	background: linear-gradient(-45deg, #e73c7e, #8a2be270, #23a6d5, #5a228f);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	opacity: 0.7;
	/* background-image: linear-gradient(#8a2be270, #5a228f); */
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.overlay-img {
	background-position: center;
	background-size: 150%;
}
.z-index {
	z-index: 1;
}
.z-index-n1 {
	z-index: -1;
}
.bi {
	margin-top: -4px;
}
.watch-now-container {
	animation: action 1s infinite alternate;
	color: white;
	text-decoration: none;
}
.watch-now-container:hover {
	color: white;
}
.watch-now-container > svg {
	animation: action2 1s infinite alternate;
}
.watch-now {
	transform: rotateZ(-90deg);
	text-transform: uppercase;
	font-size: 25px;
	width: 270px;
	font-weight: bold;
	cursor: pointer;
}
@keyframes action {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-10px);
	}
}
@keyframes action2 {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.2);
	}
}
.w-30px {
	width: 30px;
}
.w-50px {
	width: 50px;
}
.w-70px {
	width: 50px;
}
.w-100px {
	width: 100px;
}
.h-5px {
	height: 5px;
}
.h-30px {
	height: 30px;
}
.h-50px {
	height: 50px;
}
.h-70px {
	height: 50px;
}
.h-100px {
	height: 100px;
}
.h-100vh {
	height: 100vh;
}
.h-0 {
	height: 0 !important;
}
.bar-container > span {
	margin-bottom: 4px;
	background: white;
	width: 22px;
	height: 4px;
	display: block;
	border-radius: 3px;
	cursor: pointer;
}
.bar-container > span:nth-child(2) {
	width: 18px;
}

.bar-container > span:nth-child(3) {
	width: 10px;
}
.compatable-with {
	margin-top: -50px;
	max-width: 900px;
	box-shadow: 0 10px 30px #571c8d36;
}
.compatable-with .scroll-content {
	display: flex;
	justify-content: center;
	padding: 0 20px;
}
.compatable-with .scroll-content > div {
	margin: 0 10px;
}
#navigation {
	transition: all 0.3s ease;
}
#navigation.stick-nav .btn {
	color: #000000d1 !important;
	border-color: #000000d1;
}
#navigation.stick-nav .bar-container > span {
	background-color: #000000d1 !important;
}
.stick-nav {
	background-color: #ffffffeb;
	margin-top: 0px !important;
	padding: 10px 0;
	box-shadow: 0 1px 10px #00000029;
}
.text-shadow {
	text-shadow: 1px 1px 1px #000000d1;
}
.text-shadow2 {
	text-shadow: 1px 1px 1px #0000005e;
}
.card {
	box-shadow: 0 1px 20px #00000017;
	border: none;
	transition: all 0.3s ease !important;
	cursor: pointer;
}
.card svg,
.card img {
	transition: all 0.3s ease !important;
}
.card.active {
	background-color: #2196f3;
	color: white;
}
.card:hover {
	background-color: #2196f3;
}
.hovering:hover {
	color: white;
	transform: translateY(-10px) !important;
}
.card:hover img {
	filter: grayscale(1) brightness(1.5);
}
.card:hover svg {
	color: white !important;
}
.img-animation:hover {
	transform: scale(1.2) rotateZ(-5deg) !important;
}
.rounded-price {
	border-end-end-radius: 1rem;
	border-start-end-radius: 1rem;
	transition: all 0.5s ease;
}

#prices .card.active .rounded-price,
#prices .card:hover .rounded-price {
	background-color: white !important;
	color: #2196f3 !important;
}

#prices .card.active svg,
#prices .card.active .btn,
#prices .card:hover .btn {
	color: white !important;
}

#prices .card.active .btn,
#prices .card:hover .btn {
	border-color: white !important;
}
.foot-shabe-left {
	height: 270px;
	width: 100%;
	margin-left: -55px;
}

.foot-shabe-right {
	height: 270px;
	width: 100%;
	margin-right: -48px;
}
.animation-links a {
	transition: all 0.5s ease;
}
.animation-links a:hover {
	padding: 0 5px;
}
.download-sec {
	margin: -140px 0 0 400px;
}

#btn-back-to-top {
	position: fixed;
	bottom: -100px;
	right: 20px;
	transition: all 0.6s ease;
}
#btn-back-to-top.stick-btn {
	bottom: 10px;
}

/*  ============== nav button =============== */
:root {
	--color-primary: #000000d6;
	--color-secondary: #f0f7ee;
	--duration: 1s;
	--nav-duration: calc(var(--duration) / 4);
	--ease: cubic-bezier(0.215, 0.61, 0.355, 1);
	--space: 1rem;
	--font-primary: "Helvetica", sans-serif;
	--font-heading: "Merriweather", serif;
	--font-size: 1.125rem;
	--line-height: 1.5;
}
.main-navigation-toggle {
	position: fixed;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.main-navigation-toggle + label {
	position: relative;
	cursor: pointer;
	z-index: 2;
}

.icon--menu-toggle {
	/* --size: calc(1rem + 4vmin); */
	/* display: flex; */
	/* align-items: center; */
	/* justify-content: center; */
	width: 40px;
	height: 40px;
	stroke-width: 4;
}

.icon-group {
	transform: translateX(0);
	transition: transform var(--nav-duration) var(--ease);
}

.icon--menu {
	stroke: white;
}
.stick-nav .icon--menu {
	stroke: black;
}

.icon--close {
	stroke: var(--color-secondary);
	transform: translateX(-100%);
}

.main-navigation {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	transform: translateX(-100%);
	transition: transform var(--nav-duration);
	z-index: 1;
}
.main-navigation:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-primary);
	transform-origin: 0 50%;
	z-index: -1;
}
.main-navigation ul {
	font-size: 12vmin;
	font-family: var(--font-heading);
	width: 100%;
}
.main-navigation li {
	--border-size: 1vmin;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.main-navigation li:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--border-size);
	background-color: var(--color-secondary);
	transform-origin: 0 50%;
	transform: translateX(-100%) skew(15deg);
}
.main-navigation a {
	display: inline-block;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	color: var(--color-secondary);
	line-height: 1;
	text-decoration: none;
	user-select: none;
	padding: var(--space) calc(var(--space) * 2)
		calc(var(--space) + var(--border-size) / 2);
	transform: translateY(100%);
}

.main-content {
	margin: 6rem auto;
	max-width: 70ch;
	padding: 0 calc(var(--space) * 2);
	transform: translateX(0);
	transition: transform calc(var(--nav-duration) * 2) var(--ease);
}
.main-content > * + * {
	margin-top: calc(var(--space) * var(--line-height));
}

.main-navigation-toggle:checked ~ label .icon--menu-toggle .icon-group {
	transform: translateX(100%);
}
.main-navigation-toggle:checked ~ .main-content {
	transform: translateX(10%);
}
.main-navigation-toggle:checked ~ .main-navigation {
	transition-duration: 0s;
	transform: translateX(0);
}
.main-navigation-toggle:checked ~ .main-navigation:after {
	animation: nav-bg var(--nav-duration) var(--ease) forwards;
}
.main-navigation-toggle:checked ~ .main-navigation li:after {
	animation: nav-line var(--duration) var(--ease) forwards;
}
.main-navigation-toggle:checked ~ .main-navigation a {
	animation: link-appear calc(var(--duration) * 1.5) var(--ease) forwards;
}
.main-navigation-toggle:checked ~ .main-navigation li:nth-child(1):after,
.main-navigation-toggle:checked ~ .main-navigation li:nth-child(1) a {
	animation-delay: calc((var(--duration) / 2) * 1 * 0.125);
}
.main-navigation-toggle:checked ~ .main-navigation li:nth-child(2):after,
.main-navigation-toggle:checked ~ .main-navigation li:nth-child(2) a {
	animation-delay: calc((var(--duration) / 2) * 2 * 0.125);
}
.main-navigation-toggle:checked ~ .main-navigation li:nth-child(3):after,
.main-navigation-toggle:checked ~ .main-navigation li:nth-child(3) a {
	animation-delay: calc((var(--duration) / 2) * 3 * 0.125);
}
.main-navigation-toggle:checked ~ .main-navigation li:nth-child(4):after,
.main-navigation-toggle:checked ~ .main-navigation li:nth-child(4) a {
	animation-delay: calc((var(--duration) / 2) * 4 * 0.125);
}

@keyframes nav-bg {
	from {
		transform: translateX(-100%) skewX(-15deg);
	}
	to {
		transform: translateX(0);
	}
}
@keyframes nav-line {
	0% {
		transform: scaleX(0);
		transform-origin: 0 50%;
	}
	35% {
		transform: scaleX(1.001);
		transform-origin: 0 50%;
	}
	65% {
		transform: scaleX(1.001);
		transform-origin: 100% 50%;
	}
	100% {
		transform: scaleX(0);
		transform-origin: 100% 50%;
	}
}
@keyframes link-appear {
	0%,
	25% {
		transform: translateY(100%);
	}
	50%,
	100% {
		transform: translateY(0);
	}
}
/*  ============== nav button =============== */

/* ============== video popup =============== */
.lightbox {
	/** Default lightbox to hidden */
	/* display: none; */

	/** Position and style */
	overflow: hidden;
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: -100%;
	left: 0;
	background: rgba(0, 0, 0, 0.8);
	transition: all 0.5s ease;
}
.lightbox:target {
	/** Remove default browser outline */
	outline: none;
	top: 0;
	/** Unhide lightbox **/
	/* display: block; */
}

/** videoModal **/
#videoModal {
	border-radius: 0;
}
#videoModal .modal-header {
	background: #000;
	border: 0;
	color: #fff;
	position: relative;
	height: 35px;
}
#videoModal .modal-header h3 {
	font-size: 18px;
	line-height: 22px;
	padding: 5px;
}
#videoModal .modal-body {
	height: 489px;
	padding: 0;
	max-height: none;
	overflow: hidden;
}
#videoModal .close {
	background: transparent;
	color: #fff;
	border: none;
	font-size: 24px;
	margin: 0;
	opacity: 1;
	position: absolute;
	right: 20px;
	text-shadow: none;
	top: 20px;
	width: 38px;
}

/* ============== video popup =============== */

/* ========== loader ============== */
#loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	overflow: hidden;
	background: radial-gradient(circle at center, #222, rgba(0, 0, 0, 0.884));
	transition: all 0.7s ease;
}
#loader svg {
	position: absolute;
	width: 0;
	height: 0;
}
#loader .wrap {
	width: 400px;
	height: 900px;
	position: relative;
	-webkit-animation: scrollup 6s linear infinite;
	animation: scrollup 6s linear infinite;
	filter: url("#goo");
}
@-webkit-keyframes scrollup {
	from {
		transform: scale(0.75) translateY(100px);
	}
	to {
		transform: scale(0.75) translateY(-100px);
	}
}
@keyframes scrollup {
	from {
		transform: scale(0.75) translateY(100px);
	}
	to {
		transform: scale(0.75) translateY(-100px);
	}
}
#loader .wrap .angle {
	position: absolute;
	width: 200px;
	height: 200px;
	left: calc(50% - 50px);
	filter: contrast(10px);
}
#loader .wrap .angle:first-of-type {
	-webkit-animation: rolldown 6s ease-in-out infinite;
	animation: rolldown 6s ease-in-out infinite;
}
@-webkit-keyframes rolldown {
	0% {
		transform: rotate(0deg);
	}
	10% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(180deg);
	}
}
@keyframes rolldown {
	0% {
		transform: rotate(0deg);
	}
	10% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(180deg);
	}
}
#loader .wrap .angle:first-of-type:before {
	-webkit-animation: rolldown2 6s ease-in-out infinite;
	animation: rolldown2 6s ease-in-out infinite;
	transform-origin: top right;
}
@-webkit-keyframes rolldown2 {
	0% {
		transform: rotate(0deg);
	}
	12.5% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(180deg);
	}
}
@keyframes rolldown2 {
	0% {
		transform: rotate(0deg);
	}
	12.5% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(180deg);
	}
}
#loader .wrap .angle:nth-of-type(2) {
	-webkit-animation: rolldown3 6s ease-in-out infinite;
	animation: rolldown3 6s ease-in-out infinite;
	transform-origin: left;
}
@-webkit-keyframes rolldown3 {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(0deg);
	}
	37.5% {
		transform: rotate(-180deg);
	}
	100% {
		transform: rotate(-180deg);
	}
}
@keyframes rolldown3 {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(0deg);
	}
	37.5% {
		transform: rotate(-180deg);
	}
	100% {
		transform: rotate(-180deg);
	}
}
#loader .wrap .angle:nth-of-type(2):before {
	-webkit-animation: rolldown4 6s ease-in-out infinite;
	animation: rolldown4 6s ease-in-out infinite;
	transform-origin: top left;
}
@-webkit-keyframes rolldown4 {
	0% {
		transform: rotate(0deg);
	}
	37.5% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(-180deg);
	}
	100% {
		transform: rotate(-180deg);
	}
}
@keyframes rolldown4 {
	0% {
		transform: rotate(0deg);
	}
	37.5% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(-180deg);
	}
	100% {
		transform: rotate(-180deg);
	}
}
#loader .wrap .angle:nth-of-type(3) {
	-webkit-animation: rolldown5 6s ease-in-out infinite;
	animation: rolldown5 6s ease-in-out infinite;
}
@-webkit-keyframes rolldown5 {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(0deg);
	}
	62.5% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(180deg);
	}
}
@keyframes rolldown5 {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(0deg);
	}
	62.5% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(180deg);
	}
}
#loader .wrap .angle:nth-of-type(3):before {
	-webkit-animation: rolldown6 6s ease-in-out infinite;
	animation: rolldown6 6s ease-in-out infinite;
	transform-origin: top right;
}
@-webkit-keyframes rolldown6 {
	0% {
		transform: rotate(0deg);
	}
	62.5% {
		transform: rotate(0deg);
	}
	75% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(180deg);
	}
}
@keyframes rolldown6 {
	0% {
		transform: rotate(0deg);
	}
	62.5% {
		transform: rotate(0deg);
	}
	75% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(180deg);
	}
}
#loader .wrap .angle:nth-of-type(4) {
	-webkit-animation: rolldown7 6s ease-in-out infinite;
	animation: rolldown7 6s ease-in-out infinite;
	transform-origin: left;
}
@-webkit-keyframes rolldown7 {
	0% {
		transform: rotate(0deg);
	}
	75% {
		transform: rotate(0deg);
	}
	87.5% {
		transform: rotate(-180deg);
	}
	100% {
		transform: rotate(-180deg);
	}
}
@keyframes rolldown7 {
	0% {
		transform: rotate(0deg);
	}
	75% {
		transform: rotate(0deg);
	}
	87.5% {
		transform: rotate(-180deg);
	}
	100% {
		transform: rotate(-180deg);
	}
}
#loader .wrap .angle:nth-of-type(4):before {
	-webkit-animation: rolldown8 6s ease-in-out infinite;
	animation: rolldown8 6s ease-in-out infinite;
	transform-origin: top left;
}
@-webkit-keyframes rolldown8 {
	0% {
		transform: rotate(0deg);
	}
	87.5% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-180deg);
	}
}
@keyframes rolldown8 {
	0% {
		transform: rotate(0deg);
	}
	87.5% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-180deg);
	}
}
#loader .wrap .angle:nth-of-type(1) {
	top: calc((50% - 250px) + (0 * 50px));
}
#loader .wrap .angle:nth-of-type(1):before {
	content: "";
	position: absolute;
	width: 50%;
	height: 50%;
	background: linear-gradient(to right, #e73c7e, #5a228f 150%);
}
#loader .wrap .angle:nth-of-type(even):before {
	-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
#loader .wrap .angle:nth-of-type(odd):before {
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
	clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
#loader .wrap .angle:nth-of-type(2) {
	top: calc((50% - 250px) + (1 * 50px));
}
#loader .wrap .angle:nth-of-type(2):before {
	content: "";
	position: absolute;
	width: 50%;
	height: 50%;
	background: linear-gradient(to right, #e73c7e, #5a228f 150%);
}
#loader .wrap .angle:nth-of-type(even):before {
	-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
#loader .wrap .angle:nth-of-type(odd):before {
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
	clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
#loader .wrap .angle:nth-of-type(3) {
	top: calc((50% - 250px) + (2 * 50px));
}
#loader .wrap .angle:nth-of-type(3):before {
	content: "";
	position: absolute;
	width: 50%;
	height: 50%;
	background: linear-gradient(to right, #e73c7e, #5a228f 150%);
}
#loader .wrap .angle:nth-of-type(even):before {
	-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
#loader .wrap .angle:nth-of-type(odd):before {
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
	clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
#loader .wrap .angle:nth-of-type(4) {
	top: calc((50% - 250px) + (3 * 50px));
}
#loader .wrap .angle:nth-of-type(4):before {
	content: "";
	position: absolute;
	width: 50%;
	height: 50%;
	background: linear-gradient(to right, #e73c7e, #5a228f 150%);
}
#loader .wrap .angle:nth-of-type(even):before {
	-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
#loader .wrap .angle:nth-of-type(odd):before {
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
	clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
/* ========== loader ============== */
iframe {
	max-width: 870px;
	width: 870px;
}
@media (max-width: 576px) {
	section:not(section#header) {
		overflow: hidden;
	}
	.overlay-img {
		background-size: cover;
	}
	.watch-now {
		transform: rotateZ(0deg);
		width: unset;
	}
	.watch-now-container > svg {
		width: 30px;
	}
	.compatable-with {
		max-width: 350px;
	}
	.download-sec {
		margin: 50px 0;
	}
	iframe {
		max-width: 100%;
	}

	#pay .cardholder {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	#pay .cardholder input {
		width: calc(100% - 150px) !important;
	}
}

#pay {
	background: linear-gradient(-45deg, #171e3d, #24173dee, #171a3d, #2c173de7);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	font-family: "Lato", sans-serif !important;
}
#pay * {
	font-family: "Lato", sans-serif !important;
}
#pay .pay-title {
	font-weight: 300;
	letter-spacing: 2px;
}
#pay .pay-body {
	max-width: 520px;
	background-color: #242852;
	margin: 30px auto;
	border-radius: 10px;
	overflow: hidden;
}
#pay .pay-btn {
	margin: 30px auto;
	max-width: 520px;
}
#pay .pay-btn .btn {
	width: 100%;
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: 1px;
	border: none;
	color: #fff;
	padding: 18px;
	border-radius: 5px;
	outline: none;
	transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#pay .cardholder {
	border-bottom: 1.2px solid #292c58;
	padding: 30px 40px;
}
#pay .cardholder label {
	letter-spacing: 0.5px;
	color: #8f92c3;
	width: 110px;
	cursor: pointer;
}
#pay .cardholder input {
	background-color: transparent;
	font-family: "Source Code Pro" !important;
	border: none;
	outline: none;
	margin-left: 20px;
	color: white;
	width: calc(100% - 170px);
}
#pay .select-serveice {
	background-color: #1e2148;
}
#pay .info {
	text-align: center;
	display: inline-block;
	font-family: "Source Code Pro" !important;
	cursor: pointer;
	color: #2196f3;
	width: 24px;
	height: 24px;
	border: 2px solid #2196f3;
	border-radius: 50%;
	position: absolute;
}

#pay .method .left {
	float: left;
	margin-left: 20px;
}

#pay .method .left,
#pay .method .right {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
#pay .method .left input[type="radio"] {
	visibility: hidden;
}

#pay .method .left label {
	margin-left: 10px;
	font-size: 1rem;
	cursor: pointer;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #fff;
	width: unset;
}

#pay .method .left .radio {
	position: absolute;
	top: -2px;
	left: -20px;
	border: 3px solid #414365;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: #292b52;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#pay .method .left .radio::before {
	position: absolute;
	content: "";
	border-radius: 50%;
	top: 5px;
	left: 5px;
	width: 9px;
	height: 9px;
	background-color: transparent;
	transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#pay input[type="radio"]:checked ~ .radio {
	border: 3px solid #90e1e3;
	background-color: #2196f3;
}
#pay input[type="radio"]:checked ~ .radio::before {
	background-color: #fff;
}
#pay .method .right img {
	height: 30px;
	margin-left: 10px;
}

#pay .method .right {
	float: right;
	margin-right: 30px;
}
#pay #select-serveice > input {
	cursor: pointer;
}
#pay #select-serveice {
	/* height: 0px; */
	padding: 30px 40px;
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* #pay #select-serveice.open {
	height: 100%;
	padding: 30px 40px;
} */
#pay .services {
	position: absolute;
	width: 100%;
	height: 0;
	left: 0;
	top: 0;
	z-index: 1;
	background: #252852;
	color: white;
	text-align: center;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
}
#pay .services > div {
	cursor: pointer;
}
#pay .cardholder input::placeholder {
	font-family: "Source Code Pro" !important;
	color: #444880;
}