@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800;900&display=swap');

html {
	scroll-behavior: smooth;
	max-width: 100%;
	overflow-x: hidden;
	font-family: 'Mukta', sans-serif;
}

body {
	margin: 0;
	max-width: 100%;
	position: static;
	overflow-x: hidden;
	text-wrap: balance;

	font-family: 'Mukta', sans-serif;
	background-color: #958941;
	background-image: radial-gradient(at 84% 12%, hsla(212, 75%, 71%, 1) 0px, transparent 50%),
	radial-gradient(at 22% 27%, hsla(168, 89%, 62%, 1) 0px, transparent 50%),
	radial-gradient(at 22% 17%, hsla(351, 78%, 74%, 1) 0px, transparent 50%),
	radial-gradient(at 91% 82%, hsla(150, 65%, 76%, 0.6) 0px, transparent 50%),
	radial-gradient(at 48% 80%, hsla(227, 62%, 71%, 1) 0px, transparent 50%),
	radial-gradient(at 79% 9%, hsla(268, 63%, 67%, 1) 0px, transparent 50%),
	radial-gradient(at 91% 88%, hsla(357, 95%, 74%, 1) 0px, transparent 50%);
}

#gradient-canvas {
	width: 100%;
	height: 100%;
	--gradient-color-1: #04f2da;
	--gradient-color-2: #0491ea;
	--gradient-color-3: #04b6e7;
	--gradient-color-4: #176bfc;
	z-index: -1;
	position: fixed;
	filter: brightness(85%) saturate(140%);
}

a {
	color: #0123ff;
}

/* Pricing */

.checkbox {
	position: relative;
	overflow: hidden;
	width: 260px;
	min-height: 60px;
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	color: white;
	box-shadow: 0 0 16px 1px inset rgba(255, 255, 255, 0.3);
	user-select: none;
}

#checkbox_toggle {
	display: none;
}

.checkbox .toggle {
	width: 120px;
	height: 52px;
	position: absolute;
	border-radius: 50px;
	top: 4px;
	left: 4px;
	cursor: pointer;
	background: linear-gradient(40deg, #0035ff, #00ff97);
	transition: 0.4s;
}

.checkbox .slide {
	width: 260px;
	height: 60px;
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 1fr;
	cursor: pointer;
}

.checkbox .slide .text {
	font-size: 16px;
	font-weight: 700;
	z-index: 10;
	cursor: pointer;
}

.card h1 span.year-discount,
.year-discount {
	position: absolute;
	padding: 0 6px;
	background: linear-gradient(40deg, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.25));
	border-radius: 96px;
	margin: -6px 0 0 -2px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 12px;
}

.card h1 span.year-discount {
	margin: 20px 0 0 -75px;
}

.card h1 span.year-discount span,
.year-discount span {
	font-size: 10px;
}

.check:checked + .checkbox .slide .toggle {
	transform: translateX(130px);
	background: linear-gradient(40deg, #0035ff, #00ff97);
}

.pricing {
	width: 90%;
	height: max-content;
	min-height: 600px;
	margin-top: calc(11vh + 20px + 1%);
	padding-top: 48px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	user-select: none;
}

.pricing .cards {
	margin-top: 96px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
}

.cards .card {
	display: grid;
	grid-template-rows: 20% 55% 20%;
	justify-content: center;
	align-items: center;
	/*height: 500px;*/
	max-width: 460px;
	min-width: 340px;
	margin: 0 0 12px -12px;
	border-radius: 12px;
	color: white;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: contrast(120%) blur(20px);
	-webkit-backdrop-filter: contrast(120%) blur(20px);
	box-shadow: 0 0 24px 1px rgba(0, 0, 0, 0.2);
	transition: 0.3s;
}

.card.premium {
	margin-bottom: 18px;
	padding: 24px 0;
	transform: scale(1.1);
	border: 2px solid hsl(50, 95%, 45%);
	backdrop-filter: contrast(105%) blur(8px);
	-webkit-backdrop-filter: contrast(105%) blur(8px);
	background: radial-gradient(ellipse farthest-corner at right bottom, rgba(254, 219, 55, 0.25) 0%, rgba(253, 185, 49, 0.25) 8%, rgba(159, 121, 40, 0.25) 30%, rgba(138, 110, 47, 0.25) 40%, rgba(0, 0, 0, 0) 80%),
	radial-gradient(ellipse farthest-corner at left top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 172, 0.25) 8%, rgba(209, 180, 100, 0.25) 25%, rgba(93, 74, 31, 0.25) 62.5%, rgba(93, 74, 31, 0.25) 100%);
}

.card.premium::after {
    content: "Best Deal";
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 14px;
    padding: 2px 24px;
    background: linear-gradient(40deg, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.25));
	border-radius: 6px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-weight: 700;
}

.card.middle {
	margin: -18px 0 0 0;
	/*height: 524px;*/
	/*width: 30%;*/
	max-width: 500px;
	min-width: 380px;
	border: 2px solid white;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: contrast(150%) blur(8px);
	-webkit-backdrop-filter: contrast(150%) blur(8px);
	box-shadow: none;
}

.card h3 {
	margin: 0;
	align-self: end;
	font-size: 18px;
}

.card h1 {
	font-size: 64px;
	font-weight: 900;
	transition: .25s;
	position: relative;
}

.card h1 span {
	font-size: 20px;
}

.card ul {
	list-style-type: none;
	border-top: 1px solid rgba(255, 255, 255, 0.4);
	padding: 12px 0 0;
}

.card ul li {
	display: flex;
	align-items: center;
}

.card ul li i {
	margin-right: 6px;
}

.card ul li p {
	font-size: 14px;
	font-weight: 500;
	margin: 4px;
}

.card a {
	height: 50px;
	padding: 0 32px;
	display: flex;
    align-items: center;
    justify-content: center;
	color: white;
	background: transparent;
	border: 2px solid white;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 800;
	transition: 0.3s;
	transform: scale(1.1, 1);
	text-decoration: none;
}

.card a:hover {
	color: #14ADE3;
	background: white;
	font-weight: 900;
}

.card.middle a {
	/*transform: scale(1.3, 1);*/
	color: #14ADE3;
	background: white;
}

.card.middle a:hover {
	color: white;
	background: transparent;
}

.card.premium a {
	transition: 0.3s;
	background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #b5851f 30%, #a6822e 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #7c6021 62.5%, #5d4a1f 100%);
}

.card.premium a:hover {
	color: white;
	background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #b5851f 30%, #a6822e 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #7c6021 62.5%, #5d4a1f 100%);
}

.card:has(a:hover) {
	transform: scale(0.98);
}

.card.premium:has(a:hover) {
	transform: scale(1.08);
	filter: contrast(140%) saturate(140%);
	background: radial-gradient(ellipse farthest-corner at right bottom, rgba(254, 219, 55, 0.4) 0%, rgba(253, 185, 49, 0.4) 8%, rgba(159, 121, 40, 0.4) 30%, rgba(138, 110, 47, 0.4) 40%, rgba(0, 0, 0, 0) 80%),
	radial-gradient(ellipse farthest-corner at left top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 172, 0.4) 8%, rgba(209, 180, 100, 0.4) 25%, rgba(93, 74, 31, 0.4) 62.5%, rgba(93, 74, 31, 0.4) 100%);
}

.learners {
	margin-top: 16dvh;
	width: 90%;
	height: 40dvh;
	display: flex;
	justify-content: center;
	flex-direction: column;
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(48px);
	-webkit-backdrop-filter: blur(48px);
	color: white;
}

.clarification {
	padding: 0;
	margin: 0;
	font-size: 10px;
}

@media screen and (max-width: 750px) {
	.cards .card {
		min-width: 400px;
	}

	.card.middle {
		min-width: 440px;
	}

	.pricing {
		padding-top: 64px;
	}

	.pricing .cards {
		margin: 48px 0;
	}
}

@media screen and (max-width: 550px) {
	.cards .card,
	.card.middle {
		min-width: 90%;
		margin: 0;
	}
}

@media screen and (max-width: 385px) {
	li a .full_button {
		margin-left: 100%;
	}

	.navbar ul li a.empty_button {
		display: none;
	}
}