/*=== Basics ===*/

	* {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		text-decoration: none;
		box-sizing: border-box;
		font-family: "Google Sans", sans-serif;
		-webkit-tap-highlight-color: transparent;
	}

	:root {
		--theme-color: #404080;
		--white: #ffffff;
		--black: #000000;
		--yellow: #fac80f;
		--gold: #d4af37;
		--correct: #0cce6b;
		--incorrect: #ff5e5b;
		--unanswer: #ff9b54;
		--max-width: 1024px;
		--mid-width: 768px;
		--bg-color: #40408015;
		--border-color: #5553;
	}

	img, svg {
		vertical-align: bottom;
	}

	#app {
		min-height: 100dvh;
	}

/*=== Reusables ===*/

	.flex {
		display: flex;
		align-items: center;
	}

	.m-auto {
		margin: auto;
	}

	.w-mid {
		max-width: var(--mid-width);
	}

	.w-max {
		max-width: var(--max-width);
	}

	.header {
		position: sticky;
		top: 0; z-index: 100;
		background: var(--white);
	}

	.header-content {
		height: 60px;
		padding: 0 20px;
		max-width: var(--max-width);
	}

	.page-header {
		gap: 10px;
	}

	.page-back-btn {
		width: 36px;
		aspect-ratio: 1;
		cursor: pointer;
		color: rgb(70,80,90);
		justify-content: start;
		background: transparent;
	}

	.page-heading {
		font-size: 19px;
		color: rgb(70,80,90);
	}

	.sticky-btn-container {
		padding: 10px 20px;
		position: sticky;
		bottom: 0; z-index: 10;
		background: var(--white);
		box-shadow: 0 0 2px #0002;
	}

	.sticky-btn-wrap {
		margin: auto;
		text-align: center;
	}

	.button {
		width: 100%;
		display: block;
		cursor: pointer;
		font-size: 18px;
		font-weight: 500;
		padding: 15px 5px;
		line-height: 24px;
		text-align: center;
		color: var(--white);
		border-radius: 10px;
		background: var(--theme-color);
	}

	.no-data-wrap {
		gap: 15px;
		flex-direction: column;
		justify-content: center;
	}

	.no-data-icon {
		width: 48px;
		aspect-ratio: 1;
		color: rgb(142,145,148);
	}

	.no-data-text {
		font-size: 18px;
		font-weight: 450;
		color: rgb(70,80,90);
	}

/*=== Loader ===*/

	.loading-screen {
		min-height: 100dvh;
		background: var(--white);
		justify-content: center;
	}

	.loader {
	  height: 15px;
	  aspect-ratio: 6;
	  display: flex;
	}

	.loader:before,
	.loader:after {
	  content: "";
	  flex: 1;
	  padding-left: calc(100%/6);
	  background: radial-gradient(closest-side at calc(100%/3) 50%,var(--theme-color) 90%,transparent) 0/75% 100% content-box;
	  animation: l20 2s infinite;
	}

	.loader:after {
		--_s:-1;
	}

	@keyframes l20 {
		0%       {transform:scale(var(--_s,1)) translate(0)    rotate(0)}
		25%      {transform:scale(var(--_s,1)) translate(-25%) rotate(0)}
		50%      {transform:scale(var(--_s,1)) translate(-25%) rotate(1turn)}
		75%,100% {transform:scale(var(--_s,1)) translate(0)    rotate(1turn)}
	}

/*=== Homepage ===*/

	.header-content {
		justify-content: space-between;
	}

	.header-logo {
		height: 18px;
		color: rgb(70,80,90);
	}

	.header-navbar {
		gap: 30px;
	}

	.header-navlink {
		width: 40px;
		height: 40px;
		gap: 12px;
		padding: 8px;
		position: relative;
		color: rgb(70,80,90);
		border-radius: 50%;
		justify-content: center;
		background: rgb(0,0,0,0.04);
		border: 1px solid rgb(0,0,0,0.08);
	}

	.header-navicon {
		width: 24px;
		aspect-ratio: 1;
	}

	.header-navtext {
		display: none;
		font-size: 16px;
		font-weight: 500;
	}

	.nofit-dot {
		width: 12px;
		aspect-ratio: 1;
		border-radius: 50%;
		position: absolute;
		top: 0px; left: 28px;
		background: rgb(255, 106, 112);
		border: 2px solid var(--white);
	}

	.home-hero-section {
		min-height: 270px;
		padding: 60px 20px 50px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23404080'/%3E%3Cstop offset='1' stop-color='%236669A4'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%23535592'/%3E%3Cstop offset='1' stop-color='%236669A4'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='rotate(0 0 0)'%3E%3Cg transform='rotate(0 0 0)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(0 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.1' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center / cover;
	}

	.home-hero-text {
		max-width: 320px;
	}

	.home-hero-text .heading {
		font-size: 36px;
		text-align: center;
		padding-bottom: 15px;
		color: rgb(70, 80, 90);
		color: var(--white);
	}

	.home-hero-text .sub-heading {
		font-size: 15px;
		line-height: 1.6;
		text-align: center;
		color: #fffa;
	}

	.home-quiz-section,
	.home-installation-section {
		padding: 30px 20px 0;
	}

	.installation-card {
		padding: 20px 20px;
		position: relative;
		border-radius: 20px;
		background: #afa5;
	}

	.installation-text {
		font-size: 16px;
		font-weight: 500;
		padding: 0 60px 15px 0;
	}

	.installation-text span {
		font-size: 20px;
		font-weight: 700;
		line-height: 1.5;
	}

	.installation-card svg {
		color: var(--correct);
		position: absolute;
		top: 50%; right: 10px;
		transform: translateY(-50%);
	}

	.installation-btn {
		width: 128px;
		font-size: 17px;
		padding: 8px 5px;
	}

	.home-quiz-section .section-heading {
		margin-bottom: 24px;
	}

	.home-quiz-section .section-heading h2 {
		font-size: 21px;
	}

	.home-quiz-grid {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: 1fr;
	}

	.home-quiz-card {
		min-height: 150px;
		padding: 15px;
		border-radius: 20px;
		background: #fff;
		position: relative;
		overflow: hidden;
		border: 1px solid rgb(225,225,225);
	}

	.home-quiz-card-label {
		font-size: 12px;
		font-weight: 550;
		padding: 4px 10px;
		border-radius: 6px;
		display: inline-block;
		color: var(--unanswer);
		background: #fac80f20;
		border: 1px solid #fac80f50;
	}

	.home-quiz-card-text .title {
		font-size: 18px;
		font-weight: 700;
		margin-top: 15px;
		color: rgb(50,65,75);
	}

	.home-quiz-card-text .description {
		height: 40px;
		font-size: 15px;
		font-weight: 450;
		line-height: 20px;
		margin: 8px 0 12px;
		color: rgb(120,125,135);
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.home-quiz-card-btn {
		font-size: 15px;
		font-weight: 500;
		padding: 10px 20px;
		border-radius: 8px;
		display: inline-block;
		color: var(--white);
		background: var(--theme-color);
	}

	.home-quiz-card-btn.lock {
		color: #999;
		background: #9993;
		pointer-events: none;
	}

	.home-quiz-card.no-quiz {
		gap: 15px;
		flex-direction: column;
		justify-content: center;
	}

	.home-quiz-card.no-quiz svg {
		color: rgb(120,125,130);
	}

	.home-quiz-card.no-quiz .text {
		font-size: 17px;
		font-weight: 450;
		color: rgb(62,65,68);
	}

	.home-about-section {
		max-width: var(--max-width);
		font-size: 17px;
		font-weight: 450;
		line-height: 1.4;
		text-align: justify;
		color: rgb(80,86,95);
		padding: 30px 20px 40px;
	}

	.home-about-section p {
		padding: 10px 0;
	}

	.home-about-section .divider {
		width: 180px;
		display: block;
		margin: 0 auto 25px;
		color: var(--theme-color);
	}

	.footer {
		padding-top: 60px;
		background: #242832;
		border-top: 1px solid rgb(0,0,0,0.08);
	}

	.footer-logo-wrap {
		text-align: center;
		margin-bottom: 30px;
	}

	.footer-logo {
		height: 24px;
		color: var(--white);
	}

	.social-link-wrap {
		gap: 15px;
		margin-bottom: 30px;
		justify-content: center;
	}

	.social-link-wrap a {
		width: 34px;
		aspect-ratio: 1;
		padding: 5px;
		color: var(--white);
		border-radius: 8px;
		background: #fff3;
	}

	.legal-link-wrap {
		gap: 25px;
		padding: 20px 0;
		margin-bottom: 30px;
		justify-content: center;
	}

	.legal-link-wrap a {
		color: #fff8;
		font-weight: 450;
	}

	.footer-copyright-text {
		color: #fff4;
		padding: 12px 0;
		font-size: 13px;
		font-weight: 450;
		background: #fff1;
		justify-content: center;
	}

/*=== Alerts ===*/

	.alertbox {
		width: 90%;
		max-width: var(--mid-width);
		position: fixed;
		line-height: 1.35;
		padding: 12px 20px;
		top: -100px; left: 50%;
		transform: translateX(-50%);
		background: rgb(70,80,90);
		color: #fff; z-index: 150;
		border-radius: 10px;
	}

	.alertbox.show {
		animation: animateAlert 3s ease;
	}

	@keyframes animateAlert {
		0% { top: -100px; }
		15% { top: 7px; }
		85% { top: 7px; }
		100% { top: -100px; }
	}

/*=== Overlay ===*/

	.overlay {
		width: 100%;
		height: 100dvh;
		position: fixed;
		top: 0; left: 50%;
		transform: translateX(-50%);
		background: rgb(0,0,0,0.5);
		backdrop-filter: blur(1px);
		z-index: 140; padding: 12px 20px;
		
	}

	.confirm-modal {
		width: 100%;
		padding: 20px 20px 15px;
		max-width: 480px;
		position: absolute;
		left: 50%; bottom: 0;
		border-radius: 20px 20px 0 0;
		background: rgb(255,255,255);
		transform: translateX(-50%);
	}

	.confirm-modal-title {
		font-size: 22px;
		text-align: center;
		padding-bottom: 15px;
	}

	.confirm-modal-text {
		color: rgb(42,46,48);
		text-align: center;
		font-size: 16px;
		line-height: 1.5;
	}

	.confirm-modal .button-wrap {
		display: flex;
		align-items: center;
		gap: 15px;
		margin-top: 40px;
	}

	.reconfirm-cancel-btn,
	.reconfirm-confirm-btn {
		width: 50%;
		height: 50px;
		font-size: 17px;
		font-weight: 500;
		cursor: pointer;
		border-radius: 15px;
	}

	.reconfirm-cancel-btn {
		color: rgb(70,80,90);
		background: rgb(220,225,235);
	}

	.reconfirm-confirm-btn {
		color: var(--white);
		background: var(--theme-color);
	}

/*=== Login ===*/

	.login-container {
		padding: 80px 20px 20px;
		height: calc(100dvh - 60px);
		background: linear-gradient(to bottom, #404080, #224);
	}

	.login-form-wrap {
		margin: 0 auto;
		max-width: 400px;
		background: white;
		overflow-x: hidden;
		border-radius: 20px;
		padding: 40px 0 20px;
		transition: all 300ms ease;
		background: var(--white);
		background: #ffff;
		backdrop-filter: blur(1px);
	}

	.login-form {
		display: grid;
		padding: 0 20px;
		position: relative;
		grid-gap: 20px; left: 0;
		transition: left 300ms ease;
		grid-template-columns: repeat(3, 100%);
	}

	.login-form[data-step="2"] {
		left: calc(-100% + 20px);
	}

	.login-form[data-step="3"] {
		left: calc(-200% + 40px);
	}

	.login-step-title {
		height: 60px;
		font-size: 20px;
		font-weight: 650;
		text-align: center;
		margin-bottom: 20px;
	}

	.login-step-title span {
		font-size: 16px;
		font-weight: 550;
		cursor: pointer;
		color: var(--theme-color);
	}

	.login-input {
		width: 100%;
		height: 52px;
		color: #484850;
		padding: 0 20px;
		font-size: 18px;
		font-weight: 600;
		border-radius: 10px;
		border: 1px solid #0002;
	}

	.login-submit-btn,
	.profile-submit-btn {
		width: 100%;
		height: 50px;
		font-size: 18px;
		font-weight: 550;
		margin-top: 30px;
		cursor: pointer;
		border-radius: 10px;
		color: var(--white);
		background: var(--theme-color);
	}

	.login-disclaimer,
	.otp-countdown-wrap {
		font-size: 14px;
		font-weight: 450;
		line-height: 20px;
		text-align: center;
		color: rgb(70,80,90);
		margin-top: 15px;
	}

	.login-disclaimer a,
	.otp-countdown-wrap a {
		color: var(--theme-color);
	}

/*=== Notifications ===*/

	.notifications-container {
		padding: 20px;
		background: var(--bg-color);
		min-height: calc(100dvh - 60px);
	}

	.notification-card {
		padding: 15px 40px 15px 20px;
		position: relative;
		background: var(--white);
		border-radius: 10px;
		overflow: hidden;
		border: 1px solid #4482;
	}

	.notification-card:not(:last-child) {
		margin-bottom: 15px;
	}

	.notification-title {
		font-size: 18px;
		font-weight: 550;
		color: rgb(50,65,75);
	}

	.notification-text {
		font-size: 14px;
		padding: 5px 0 10px;
		color: rgb(128,132,135);
	}

	.notification-time {
		font-size: 12px;
		font-weight: 500;
		color: rgb(148,152,155);
	}

	.notification-delete-btn {
		width: 30px;
		aspect-ratio: 1;
		padding: 3px;
		justify-content: center;
		position: absolute;
		top: 2px; right: 2px;
		cursor: pointer;
		color: var(--incorrect);
		border-top-right-radius: 8px;
		border-bottom-left-radius: 8px;
		background: rgb(0,0,0,0.04);
	}

	.notification-list .no-data-wrap {
		min-height: calc(100dvh - 100px);
	}

/*=== Account ===*/

	.account-hero {
		padding-top: 30px;
		overflow: hidden;
		border-radius: 0 0 15px 15px;
		background: var(--theme-color);
		background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1094%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(64%2c 64%2c 128%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c482.651C87.887%2c470.034%2c143.516%2c387.52%2c217.402%2c338.284C289.732%2c290.085%2c392.14%2c274.619%2c429.761%2c196.265C467.438%2c117.795%2c421.021%2c27.406%2c407.992%2c-58.66C395.074%2c-143.994%2c412.441%2c-243.254%2c353.659%2c-306.447C295.033%2c-369.472%2c191.872%2c-348.543%2c110.979%2c-377.961C22.591%2c-410.105%2c-50.678%2c-504.94%2c-143.018%2c-487.074C-234.888%2c-469.299%2c-293.984%2c-374.87%2c-336.315%2c-291.419C-373.361%2c-218.388%2c-349.703%2c-132.981%2c-363.573%2c-52.274C-377.982%2c31.571%2c-437.744%2c108.438%2c-419.304%2c191.49C-399.608%2c280.201%2c-336.234%2c355.216%2c-261.593%2c407.046C-185.497%2c459.886%2c-91.703%2c495.816%2c0%2c482.651' fill='%233a3a73'%3e%3c/path%3e%3cpath d='M1440 1016.385C1529.314 1023.297 1623.15 1010.627 1697.2559999999999 960.298 1770.594 910.491 1826.806 830.873 1841.807 743.499 1855.693 662.615 1799.44 590.044 1774.23 511.945 1753.79 448.624 1743.063 384.401 1707.696 328.03999999999996 1667.366 263.769 1626.156 193.69099999999997 1556.154 164.416 1483.554 134.05399999999997 1396.154 134.58499999999998 1324.883 167.947 1256.792 199.82 1237.291 285.1 1184.333 338.46299999999997 1125.91 397.334 1023.6669999999999 417.446 998.768 496.56 973.769 575.994 1023.394 658.7429999999999 1059.995 733.543 1095.79 806.696 1141.792 873.738 1207.123 922.364 1275.665 973.381 1354.811 1009.7919999999999 1440 1016.385' fill='%2346468d'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1094'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e") no-repeat center / cover;
	}

	.account-hero .avatar {
		display: block;
		width: 75px;
		aspect-ratio: 1;
		margin: 0 auto 20px;
	}

	.user-datails {
		font-size: 15px;
		color: var(--white);
		text-align: center;
		padding: 0 20px 20px;
	}

	.user-datails--name {
		font-size: 22px;
		font-weight: 600;
	}

	.user-datails--phone {
		padding: 4px 0;
	}

	.user-datails--email {
		padding: 2px 0 10px;
	}

	.user-datails--email a {
		line-height: 20px;
		color: var(--white);
		text-decoration: dotted underline;
	}

	.plus-wrap {
		height: 60px;
		padding: 0 20px;
		color: var(--gold);
		border-top: 1px solid #fff3;
		justify-content: space-between;
	}

	.plus-wrap .pwl {
		gap: 10px;
	}

	.plus-wrap .pwl span {
		font-size: 10px;
		font-weight: 600;
		color: var(--white);
		padding: 3px 10px;
		border-radius: 15px;
		background: var(--correct);
	}

	.plus-wrap .pwl span.na {
		background: var(--incorrect);
	}

	.plus-icon-wrap {
		width: 25px;
		aspect-ratio: 1;
		border-radius: 50%;
		background: linear-gradient(
			135deg,
			#ffd700 0%,
			#ffec8b 25%,
			#d4af37 50%,
			#b8860b 75%,
			#ffd700 100%
		);
		color: white;
		justify-content: center;
	}

	.account-navigation {
		padding-bottom: 40px;
		min-height: calc(100dvh - 300px);
	}

	.account-navlink {
		gap: 15px;
		padding: 20px;
	}

	.account-navlink:hover {
		background: #4481;
		border-radius: 10px;
	}

	.account-navlink:not(:last-child) {
		border-bottom: 1px solid rgb(0,0,0,0.05);
	}

	.account-navicon {
		width: 24px;
		aspect-ratio: 1;
		display: block;
		color: rgb(120,125,125);
	}

	.account-navtext {
		flex: 1;
		font-size: 18px;
		font-weight: 450;
		color: rgb(70,80,90);
	}

/*=== Get plus ===*/

	.get-plus-container {
		padding: 20px;
		background: #282320;
		min-height: calc(100dvh - 60px);
	}

	.plus-hero-card,
	.plus-benefit-card {
		padding: 0 10px;
		background: #fff1;
		border-radius: 15px;
		text-align: center;
		margin-bottom: 20px;
		border: 1px solid #fff2;
	}

	.plus-hero-card .title {
		font-size: 21px;
		color: var(--white);
		padding: 30px 0 20px;
	}

	.plus-hero-card .logo {
		height: 24px;
		color: var(--gold);
	}

	.validity-text {
		font-size: 12px;
		font-weight: 500;
		color: var(--gold);
		text-align: center;
		letter-spacing: 2px;
		padding: 20px 0 30px;
		text-transform: uppercase;
	}

	.plus-benefit-heading {
		gap: 10px;
		padding: 20px 0;
		font-weight: 500;
		color: var(--white);
		letter-spacing: 4px;
		justify-content: center;
		text-transform: uppercase;
	}

	.plus-benefit-card {
		text-align: left;
		padding: 10px 15px;
	}

	.plus-benefit-row {
		padding: 15px 0;
	}

	.plus-benefit-title {
		font-weight: 550;
		padding-left: 11px;
		color: var(--white);
	}

	.plus-benefit-text {
		color: #fff8;
		font-size: 15px;
		line-height: 20px;
		padding: 5px 0 0 35px;
	}

	.get-plus-btn {
		background: linear-gradient(-45deg, #7f6000, #d4af37, #dfd394, #d4af37, #7f6000);
	}

/*=== Profile ===*/

	.profile-container {
		padding: 30px 20px 20px;
		background: rgb(232,235,238);
		background: var(--bg-color);
		min-height: calc(100dvh - 60px);
	}

	.profile-row {
		overflow: hidden;
		margin-bottom: 30px;
	}

	.profile-label {
		display: block;
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 5px;
		padding-left: 20px;
		color: var(--theme-color);
	}

	.profile-input {
		width: 100%;
		height: 54px;
		font-size: 18px;
		font-weight: 500;
		padding: 0 20px;
		border-radius: 10px;
		border: 1px solid var(--border-color);
	}

	.profile-submit-btn-wrap {
		padding-top: 20px;
	}

/*=== Quiz history ===*/

	.quiz-history-container {
		padding: 20px;
		background: var(--bg-color);
		min-height: calc(100dvh - 60px);
	}

	.quiz-history-card {
		display: block;
		border-radius: 10px;
		border: 1px solid #4482;
		padding: 15px 25px 15px 15px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='30' height='30' fill='rgba(85,85,85,.2)'%3E%3Cpath d='M15.6315 12L10.8838 3.03212L9.11622 3.9679L13.3685 12L9.11622 20.0321L10.8838 20.9679L15.6315 12Z'%3E%3C/path%3E%3C/svg%3E") center right / auto no-repeat #fff;
	}

	.quiz-history-card:not(:last-child) {
		margin-bottom: 15px;
	}

	.quiz-history-status {
		color: white;
		font-size: 12px;
		font-weight: 500;
		padding: 3px 6px;
		border-radius: 5px;
		display: inline-flex;
		margin-bottom: 10px;
		background: var(--correct);
		gap: 8px; align-items: center;
	}

	.quiz-history-status.live {
		color: var(--unanswer);
		background: transparent;
		animation: liveBlink 1s infinite;
	}

	.quiz-history-status.live::before {
		content: "";
		width: 5px;
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--unanswer);
		animation: livePulse 1.2s infinite;
	}

	@keyframes livePulse {
	    0% {
	        transform: scale(1);
	        opacity: 1;
	    }
	    75% {
	        transform: scale(2);
	        opacity: 0;
	    }
	    100% {
	        transform: scale(1);
	        opacity: 0;
	    }
	}

	.quiz-history-topic {
		height: 20px;
		font-size: 17px;
		font-weight: 700;
		line-height: 20px;
		color: var(--theme-color);
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.quiz-history-id {
		font-size: 13px;
		font-weight: 500;
		padding-top: 5px;
		color: #888;
	}

	.quiz-history-date {
		gap: 5px;
		color: #bbb;
		font-size: 14px;
		font-weight: 500;
		padding-top: 10px;
	}

	.quiz-history-container .no-data-wrap {
		min-height: calc(100dvh - 100px);
	}

/*=== Coins ===*/

	.coins-card {
		height: 180px;
		position: sticky;
		padding: 40px 20px 0;
		top: 60px; z-index: 10;
		border-radius: 0 0 15px 15px;
		background-color: var(--theme-color);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='92' height='92' fill='rgba(255,255,255,0.4)'%3E%3Cpath d='M18.0049 6.99979H21.0049C21.5572 6.99979 22.0049 7.4475 22.0049 7.99979V19.9998C22.0049 20.5521 21.5572 20.9998 21.0049 20.9998H3.00488C2.4526 20.9998 2.00488 20.5521 2.00488 19.9998V3.99979C2.00488 3.4475 2.4526 2.99979 3.00488 2.99979H18.0049V6.99979ZM4.00488 8.99979V18.9998H20.0049V8.99979H4.00488ZM4.00488 4.99979V6.99979H16.0049V4.99979H4.00488ZM15.0049 12.9998H18.0049V14.9998H15.0049V12.9998Z'%3E%3C/path%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 30px top 25px;
	}

	.coins-card-value {
		font-size: 30px;
		font-weight: 700;
		color: white;
	}

	.coins-card-text {
		color: white;
		font-size: 14px;
		margin: 6px 0 15px;
	}

	.coin-redeem-link {
		font-size: 13px;
		font-weight: 500;
		padding: 5px 10px;
		color: var(--theme-color);
		background: white;
		border-radius: 6px;
		display: inline-block;
	}

	.coin-history-wrap {
		padding: 20px;
		min-height: calc(100dvh - 240px);
	}

	.coin-history-wrap .no-data-wrap {
		min-height: calc(100dvh - 280px);
	}

	.coins-history-list h3 {
		margin-bottom: 15px;
		color: rgb(70,80,90);
	}

	.coins-history-row {
		padding: 15px 20px;
		display: grid;
		grid-gap: 10px;
		background: white;
		margin-bottom: 10px;
		border-radius: 10px;
		border: 1px solid rgb(0,0,0,0.1);
		grid-template-columns: 1fr 60px;
	}

	.coins-history-row-title {
		font-size: 15px;
		font-weight: 600;
		color: rgb(40,50,60);
		padding-bottom: 4px;
	}

	.coins-history-row-time {
		font-size: 12px;
		font-weight: 450;
		line-height: 18px;
		color: rgb(150,155,160);
	}

	.coins-history-row-amt {
		font-size: 16px;
		font-weight: 700;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.coins-history-row-amt.credit {
		color: rgb(15,189,73);
	}

	.coins-history-row-amt.debit {
		color: rgb(255,55,55);
	}

	.coins-history-link-wrap {
		margin-top: 20px;
		text-align: center;
	}

	.coins-history-link-wrap a {
		color: white;
		padding: 8px 16px;
		border-radius: 10px;
		display: inline-block;
		background: var(--theme-color);
	}

/*=== Redeems ===*/

	.redemption-container {
		padding: 20px;
		min-height: calc(100dvh - 60px);
	}

	.redemption-form {
		padding-top: 30px;
		max-width: 480px;
	}

	.available-coins {
		font-size: 17px;
		font-weight: 500;
		text-align: center;
		color: #777;
	}

	.redemption-form-field {
		padding: 40px 0;
	}

	.coin-input {
		width: 100%;
		height: 52px;
		color: #484850;
		padding: 0 20px;
		font-size: 20px;
		font-weight: 600;
		border-radius: 10px;
		border: 1px solid #0002;
	}

	.redemption-container .no-data-wrap {
		min-height: calc(100dvh - 100px);
	}

	.link.cr-activate {
		font-weight: 500;
		color: var(--incorrect);
	}

/*=== Refer ===*/

	.refer-hero-wrap {
		height: 200px;
		border-radius: 0 0 15px 15px;
		background-color: #e3f0ff;
		background-image: url('../images/refer.jpeg');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}

	.refer-earn-wrap {
		padding: 20px;
		min-height: calc(100dvh - 210px);
	}

	.refer-earn-wrap .title {
		padding: 10px 0;
		font-weight: 600;
		padding-bottom: 10px;
	}

	.refer-earn-wrap .text {
		font-size: 15px;
		color: rgb(80, 85, 88);
	}

	.referral-link-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 1px solid rgb(0, 0, 0, 0.25);
		padding-left: 15px;
		border-radius: 10px;
		margin-top: 30px;
	}

	.referral-link-text {
		flex: 1;
		height: 50px;
		font-size: 15px;
		font-weight: 500;
		line-height: 50px;
		word-break: break-all;
		color: rgb(0, 0, 0, 0.7);
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.refer-copy-btn {
		width: 50px;
		aspect-ratio: 1;
		display: flex;
		cursor: pointer;
		color: rgb(0, 0, 0, 0.7);
		align-items: center;
		justify-content: center;
		background: transparent;
	}

	.refer-action-wrap {
		padding-top: 30px;
	}

/*=== Topic page ===*/

	.topic-hero-wrap {
		padding: 20px;
		height: 140px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 510 760' fill='rgba(255,255,255,0.05)'%3E%3Cpath d='M222 361 0 205V140L234 356 0 37V0H55.5L245 355 112 0H176.8L252 354 225.25 0H225.43 284.57 284.75L260 354 333.18 0H397.6L269 355 454.56 0H510V36.98L278 358 510 140.04V205.55L292 365 510 253.98V304.7L302 373 510 360.29V360.41 403.94 404.16L302 388 510 455.3V506.02L288 398 510 554.45V619.96L275 403 510 723.02V760H454.56L266 404 397.6 760H333.18L258 405 284.75 760H284.57 225.43 225.25L251 405 176.82 760H112.4L243 404 55.44 760H0V723.02L234 402 0 619.96V554.45L222 398 0 506.02V455.3L208 387 0 399.71V399.59 356.06 355.84L208 372 0 304.7V253.98L222 361Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center bottom / cover, linear-gradient(to bottom, #404080, #504f8b, #605e96, #6f6ea1, #7f7eac);
	}

	.topic-title-wrap {
		color: var(--white);
		text-align: center;
	}

	.topic-content-wrap {
		padding: 30px 20px 40px;
		min-height: calc(100dvh - 200px);
	}

	.topic-content {
		font-size: 16px;
		font-weight: 450;
		line-height: 1.5;
		color: rgb(80,80,80);
	}

	.topic-content .para-gap {
		height: 10px;
		display: block;
	}

	.topic-btn-info {
		display: block;
		font-size: 13px;
		font-weight: 450;
		padding-bottom: 8px;
		color: rgb(120,120,120);
	}

/*=== Quiz page ===*/

	.quiz-instruction-wrap{
		padding: 20px;
		min-height: calc(100dvh - 60px);
	}

	.quiz-instructions {
		padding: 20px 0 40px;
	}

	.quiz-instructions h3 {
		margin-bottom: 20px;
	}

	.quiz-instructions p {
		font-size: 15px;
		line-height: 1.3;
		padding-left: 8px;
		margin-bottom: 15px;
		border-left: 3px solid var(--theme-color);
	}

	.quiz-container {
		padding: 20px;
		min-height: 100dvh;
	}

	.quiz-container .topbar {
		margin-bottom: 30px;
		justify-content: space-between;
	}

	.question-counter {
		font-size: 14px;
		font-weight: 500;
		color: rgb(120,125,130);
	}

	.question-timer {
		gap: 4px;
	}

	.question-countdown {
		font-size: 17px;
		font-weight: 500;
	}

	.quiz-question {
		height: 100px;
		padding: 0 20px;
		font-size: 18px;
		font-weight: 600;
		line-height: 24px;
		text-align: center;
		margin-bottom: 30px;
		border-radius: 10px;
		justify-content: center;
	}

	.quiz-options-wrap {
		gap: 20px;
		flex-direction: column;
	}

	.quiz-options-wrap .option {
		width: 100%;
		height: 50px;
		font-size: 16px;
		font-weight: 500;
		cursor: pointer;
		border-radius: 10px;
		background: transparent;
		border: 1px solid rgb(0, 0, 0, 0.1);
	}

	.option.selected {
		pointer-events: none;
		color: white;
		background: var(--theme-color);
		border-color: var(--theme-color);
	}

	.option.correct {
		color: rgb(255,255,255);
		background: rgb(70,200,140);
		border-color: rgb(70,200,140);
	}

	.option.incorrect {
		color: rgb(255,255,255);
		background: rgb(235,100,100);
		border-color: rgb(235,100,100);
	}
	/*========================*/


	/*======================*/
	.answer-result-wrap {
		padding: 20px;
		width: calc(100% - 40px);
		max-width: 440px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: 1px solid;
		border-radius: 20px;
	}

	.answer-result-wrap .icon {
		width: 72px;
		aspect-ratio: 1;
		display: block;
		margin: 0 auto 15px;
	}

	.answer-result-wrap .message {
		font-size: 25px;
		font-weight: 600;
		text-align: center;
	}

	.answer-result-wrap .score-wrap {
		display: flex;
		gap: 10px;
		flex-direction: column;
		margin: 30px 0;
	}

	.answer-result-wrap .score-wrap .row {
		display: flex;
		gap: 10px;
		align-items: center;
	}

	.answer-result-wrap .score-wrap .row .heading {
		flex: 1;
		text-align: right;
	}

	.answer-result-wrap .score-wrap .row .value {
		flex: 1;
		text-align: left;
		font-weight: 600;
	}

	.answer-result-wrap.correct .icon,
	.answer-result-wrap.correct .score-wrap .value {
		color: var(--correct);
	}

	.answer-result-wrap.incorrect .icon,
	.answer-result-wrap.incorrect .score-wrap .value {
		color: var(--incorrect);
	}

	.answer-result-wrap.unanswered .icon,
	.answer-result-wrap.unanswered .score-wrap .value {
		color: var(--unanswer);
	}

	.answer-result-wrap .next {
		padding: 25px 0 10px;
		text-align: center;
		font-weight: 450;
		color: rgb(70, 75, 80);
		border-top: 1px dashed rgb(0, 0, 0, 0.3);
	}

/*=== Quiz result ===*/

	.quiz-result-wrap {
		padding: 20px;
		min-height: calc(100dvh - 60px);
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 510 760' fill='rgba(255,255,255,0.08)'%3E%3Cpath d='M222 361 0 205V140L234 356 0 37V0H55.5L245 355 112 0H176.8L252 354 225.25 0H225.43 284.57 284.75L260 354 333.18 0H397.6L269 355 454.56 0H510V36.98L278 358 510 140.04V205.55L292 365 510 253.98V304.7L302 373 510 360.29V360.41 403.94 404.16L302 388 510 455.3V506.02L288 398 510 554.45V619.96L275 403 510 723.02V760H454.56L266 404 397.6 760H333.18L258 405 284.75 760H284.57 225.43 225.25L251 405 176.82 760H112.4L243 404 55.44 760H0V723.02L234 402 0 619.96V554.45L222 398 0 506.02V455.3L208 387 0 399.71V399.59 356.06 355.84L208 372 0 304.7V253.98L222 361Z'%3E%3C/path%3E%3C/svg%3E") no-repeat fixed center / 150%, linear-gradient(to bottom, #7f7eac, #9190ba, #a4a3c8, #b7b6d7, #cacae5);
	}

	.quiz-result-wrap .info-card,
	.quiz-result-wrap .result-card {
		padding: 15px;
		margin-bottom: 20px;
		border-radius: 15px;
		background: var(--white);
	}

	.quiz-result-wrap .info-card .img-holder,
	.quiz-result-wrap .result-card .img-holder {
		width: 60px;
		margin: 0 auto;
		aspect-ratio: 1;
		color: var(--yellow);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: var(--theme-color);
	}

	.quiz-result-wrap .info-card .heading,
	.quiz-result-wrap .result-card .heading {
		padding: 20px 0;
		font-size: 18px;
		line-height: 1.4;
		font-weight: 600;
		text-align: center;
		color: var(--theme-color);
	}

	.quiz-result-wrap .info-card .heading.et {
		font-size: 16px;
	}

	.quiz-result-wrap .info-card .desc {
		font-size: 14px;
		font-weight: 500;
		text-align: center;
		padding-bottom: 10px;
		color: rgb(120, 120, 120);
	}

	.quiz-result-wrap .result-card .score-card {
		padding: 15px;
		display: flex;
		border-radius: 15px;
		border: 1px dashed rgb(0, 0, 0, 0.5);
	}

	.quiz-result-wrap .score-card .data-col {
		flex: 1;
		display: flex;
		gap: 5px;
		flex-direction: column;
		align-items: center;
	}

	.quiz-result-wrap .score-card .data-col:first-child {
		border-right: 1px solid rgb(0, 0, 0, 0.5);
	}

	.quiz-result-wrap .score-card .data-col:last-child {
		border-left: 1px solid rgb(0, 0, 0, 0.5);
	}

	.quiz-result-wrap .score-card .data-col .data-value {
		font-size: 19px;
		font-weight: 650;
		color: var(--theme-color);
	}

	.quiz-result-wrap .score-card .data-col .data-title {
		font-size: 14px;
		font-weight: 550;
		color: rgb(0, 0, 0, 0.8);
	}

	.quiz-result-wrap .reward-card,
	.quiz-result-wrap .leaderboard-card {
		padding: 40px 15px 15px;
		margin-bottom: 20px;
		border-radius: 15px;
		background: var(--white);
		position: relative;
		margin-top: 40px;
	}

	.quiz-result-wrap .reward-card {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 140' fill='currentColor'%3e%3cdefs%3e%3clinearGradient id='grad' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3e%3cstop offset='0%25' stop-color='%23ffd700' /%3e%3cstop offset='50%25' stop-color='%23ffca00' /%3e%3cstop offset='100%25' stop-color='%23ff8f00' /%3e%3c/linearGradient%3e%3c/defs%3e%3cpath fill='url(%23grad)' d='M41 34.4 44 41.7 51.9 42.3 45.9 47.5 47.7 55.2 41 51.1 34.2 55.2 36 47.5 30 42.3 37.9 41.7 41 34.4ZM35.2 25V38H32.3V25H35.2ZM49.6 25V38H46.7V25H49.6ZM42.4 25V32.2H39.5V25H42.4ZM279 34.4 282 41.7 289.9 42.3 283.9 47.5 285.7 55.2 279 51.1 272.2 55.2 274 47.5 268 42.3 275.9 41.7 279 34.4ZM273.2 25V38H270.3V25H273.2ZM287.6 25V38H284.7V25H287.6ZM280.4 25V32.2H277.5V25H280.4Z'%3e%3c/path%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}

	.reward-card .reward-value {
		font-size: 40px;
		font-weight: 700;
		text-align: center;
	}

	.reward-card .reward-value span {
		font-size: 16px;
		font-weight: 500;
	}

	.reward-card .reward-status {
		font-size: 14px;
		font-weight: 500;
		margin: 4px 0 10px;
		text-align: center;
		color: rgb(160, 160, 160);
	}

	.quiz-result-wrap .leaderboard-card {
		min-height: 280px;
		margin-bottom: 0;
	}

	.reward-card .heading,
	.leaderboard-card .heading {
		width: 170px;
		font-size: 18px;
		font-weight: 600;
		color: var(--white);
		text-align: center;
		padding: 10px 20px;
		position: absolute;
		top: 4px; left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 30px;
		border: 4px solid var(--white);
		background: var(--theme-color);
	}

	.leaderboard-row {
		display: grid;
		padding: 10px 0;
		font-weight: 600;
		align-items: center;
		color: var(--theme-color);
		grid-template-columns: 45px 1fr 65px;
	}

	.leaderboard-row:not(:last-child) {
		border-bottom: 1px dashed rgb(0, 0, 0, 0.3);
	}

	.leaderboard-row .rank {
		display: flex;
		width: 30px;
		aspect-ratio: 1;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}

	.leaderboard-row [class*="rank r"] {
		color: var(--white);
		font-weight: 800;
		background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' fill='currentColor'%3e%3cdefs%3e%3cradialGradient id='blue' cx='30%25' cy='40%25' r='70%25'%3e%3cstop offset='0%25' stop-color='%23eef2ff' /%3e%3cstop offset='35%25' stop-color='%2394a3b8' /%3e%3cstop offset='70%25' stop-color='%2364748b' /%3e%3cstop offset='100%25' stop-color='%23334155' /%3e%3c/radialGradient%3e%3c/defs%3e%3cpath fill='url(%23blue)' d='M8.48.65C7.08.2 5.55.83 4.88 2.14L4.08 3.72C3.98 3.91 3.83 4.06 3.64 4.16L2.06 4.96C.75 5.63.12 7.16.57 8.56L1.12 10.24C1.18 10.44 1.18 10.66 1.12 10.86L.57 12.54C.12 13.94.75 15.47 2.06 16.14L3.64 16.94C3.83 17.04 3.98 17.19 4.08 17.38L4.88 18.96C5.55 20.27 7.08 20.9 8.48 20.45L10.16 19.9C10.36 19.84 10.58 19.84 10.78 19.9L12.46 20.45C13.86 20.9 15.39 20.27 16.06 18.96L16.86 17.38C16.96 17.19 17.11 17.04 17.3 16.94L18.88 16.14C20.19 15.47 20.82 13.94 20.37 12.54L19.82 10.86C19.76 10.66 19.76 10.44 19.82 10.24L20.37 8.56C20.82 7.16 20.19 5.63 18.88 4.96L17.3 4.16C17.11 4.06 16.96 3.91 16.86 3.72L16.06 2.14C15.39.83 13.86.2 12.46.65L10.78 1.2C10.58 1.26 10.36 1.26 10.16 1.2L8.48.65Z'%3e%3c/path%3e%3c/svg%3e");
	}

	.leaderboard-row .rank.r1 {
		background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' fill='currentColor'%3e%3cdefs%3e%3cradialGradient id='gold' cx='30%25' cy='40%25' r='70%25'%3e%3cstop offset='0%25' stop-color='%23fff7c2' /%3e%3cstop offset='35%25' stop-color='gold' /%3e%3cstop offset='70%25' stop-color='%23d4a017' /%3e%3cstop offset='100%25' stop-color='%238b6508' /%3e%3c/radialGradient%3e%3c/defs%3e%3cpath fill='url(%23gold)' d='M8.48.65C7.08.2 5.55.83 4.88 2.14L4.08 3.72C3.98 3.91 3.83 4.06 3.64 4.16L2.06 4.96C.75 5.63.12 7.16.57 8.56L1.12 10.24C1.18 10.44 1.18 10.66 1.12 10.86L.57 12.54C.12 13.94.75 15.47 2.06 16.14L3.64 16.94C3.83 17.04 3.98 17.19 4.08 17.38L4.88 18.96C5.55 20.27 7.08 20.9 8.48 20.45L10.16 19.9C10.36 19.84 10.58 19.84 10.78 19.9L12.46 20.45C13.86 20.9 15.39 20.27 16.06 18.96L16.86 17.38C16.96 17.19 17.11 17.04 17.3 16.94L18.88 16.14C20.19 15.47 20.82 13.94 20.37 12.54L19.82 10.86C19.76 10.66 19.76 10.44 19.82 10.24L20.37 8.56C20.82 7.16 20.19 5.63 18.88 4.96L17.3 4.16C17.11 4.06 16.96 3.91 16.86 3.72L16.06 2.14C15.39.83 13.86.2 12.46.65L10.78 1.2C10.58 1.26 10.36 1.26 10.16 1.2L8.48.65Z'%3e%3c/path%3e%3c/svg%3e");
	}

	.leaderboard-row .rank.r2 {
		background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' fill='currentColor'%3e%3cdefs%3e%3cradialGradient id='silver' cx='30%25' cy='40%25' r='70%25'%3e%3cstop offset='0%25' stop-color='white' /%3e%3cstop offset='35%25' stop-color='%23d9d9d9' /%3e%3cstop offset='70%25' stop-color='%23a8a8a8' /%3e%3cstop offset='100%25' stop-color='%236e6e6e' /%3e%3c/radialGradient%3e%3c/defs%3e%3cpath fill='url(%23silver)' d='M8.48.65C7.08.2 5.55.83 4.88 2.14L4.08 3.72C3.98 3.91 3.83 4.06 3.64 4.16L2.06 4.96C.75 5.63.12 7.16.57 8.56L1.12 10.24C1.18 10.44 1.18 10.66 1.12 10.86L.57 12.54C.12 13.94.75 15.47 2.06 16.14L3.64 16.94C3.83 17.04 3.98 17.19 4.08 17.38L4.88 18.96C5.55 20.27 7.08 20.9 8.48 20.45L10.16 19.9C10.36 19.84 10.58 19.84 10.78 19.9L12.46 20.45C13.86 20.9 15.39 20.27 16.06 18.96L16.86 17.38C16.96 17.19 17.11 17.04 17.3 16.94L18.88 16.14C20.19 15.47 20.82 13.94 20.37 12.54L19.82 10.86C19.76 10.66 19.76 10.44 19.82 10.24L20.37 8.56C20.82 7.16 20.19 5.63 18.88 4.96L17.3 4.16C17.11 4.06 16.96 3.91 16.86 3.72L16.06 2.14C15.39.83 13.86.2 12.46.65L10.78 1.2C10.58 1.26 10.36 1.26 10.16 1.2L8.48.65Z'%3e%3c/path%3e%3c/svg%3e");
	}

	.leaderboard-row .rank.r3 {
		background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' fill='currentColor'%3e%3cdefs%3e%3cradialGradient id='bronze' cx='30%25' cy='40%25' r='70%25'%3e%3cstop offset='0%25' stop-color='%23f7d7b5' /%3e%3cstop offset='35%25' stop-color='%23cd7f32' /%3e%3cstop offset='70%25' stop-color='%23a65a2a' /%3e%3cstop offset='100%25' stop-color='%236b3e1e' /%3e%3c/radialGradient%3e%3c/defs%3e%3cpath fill='url(%23bronze)' d='M8.48.65C7.08.2 5.55.83 4.88 2.14L4.08 3.72C3.98 3.91 3.83 4.06 3.64 4.16L2.06 4.96C.75 5.63.12 7.16.57 8.56L1.12 10.24C1.18 10.44 1.18 10.66 1.12 10.86L.57 12.54C.12 13.94.75 15.47 2.06 16.14L3.64 16.94C3.83 17.04 3.98 17.19 4.08 17.38L4.88 18.96C5.55 20.27 7.08 20.9 8.48 20.45L10.16 19.9C10.36 19.84 10.58 19.84 10.78 19.9L12.46 20.45C13.86 20.9 15.39 20.27 16.06 18.96L16.86 17.38C16.96 17.19 17.11 17.04 17.3 16.94L18.88 16.14C20.19 15.47 20.82 13.94 20.37 12.54L19.82 10.86C19.76 10.66 19.76 10.44 19.82 10.24L20.37 8.56C20.82 7.16 20.19 5.63 18.88 4.96L17.3 4.16C17.11 4.06 16.96 3.91 16.86 3.72L16.06 2.14C15.39.83 13.86.2 12.46.65L10.78 1.2C10.58 1.26 10.36 1.26 10.16 1.2L8.48.65Z'%3e%3c/path%3e%3c/svg%3e");
	}

	.leaderboard-row .name {
		height: 30px;
		line-height: 30px;
		word-break: break-all;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.leaderboard-row .score {
		text-align: right;
	}

	.no-leaderboard {
		min-height: 245px;
		display: flex;
		font-weight: 500;
		color: rgb(120,120,130);
		align-items: center;
		justify-content: center;
	}

	.leaderboard-disclaimer {
		padding: 5px 0;
		margin-top: 10px;
		font-size: 13px;
		font-style: italic;
		font-weight: 500;
		text-align: center;
		color: rgb(160, 160, 160);
	}

/*=== Policies ===*/

	.policy-text-wrap {
		padding: 30px 20px;
	}

	.policy-updation-date {
		font-size: 14px;
		font-weight: 500;
		font-style: italic;
		margin-bottom: 30px;
		color: rgb(170 175 180);
	}

	.policy-text-wrap .para {
		font-weight: 450;
		line-height: 1.4;
		text-align: justify;
		color: rgb(80 86 95);
		padding-bottom: 15px;
	}

	.policy-text-wrap .para .title {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 5px;
	}

	.policy-text-wrap .para .tab {
		padding: 0 0 5px 20px;
	}

	.contact-us-wrap {
		line-height: 1.4;
		padding: 30px 20px;
		min-height: calc(100dvh - 60px);
	}

	.contact-opt-wrap {
		margin-top: 20px;
	}

	.contact-opt {
		color: var(--black);
		padding: 15px 20px;
		margin-bottom: 20px;
		display: flex;
		gap: 20px;
		align-items: center;
		border-radius: 20px;
	}

	.contact-opt.i {
		background: rgb(209,72,54,0.11);
		border: 1px solid rgb(209,72,54,0.15);
	}

	.contact-opt.ii {
		background: rgb(37,211,102,0.11);
		border: 1px solid rgb(37,211,102,0.15);
	}

	.contact-opt svg {
		width: 32px;
		aspect-ratio: 1;
	}

	.contact-opt.i svg {
		color: rgb(209,72,54);
	}

	.contact-opt.ii svg {
		color: rgb(37,211,102);
	}

	.contact-opt-text .t {
		font-size: 18px;
		font-weight: 500;
	}

	.contact-opt-text .d {
		font-size: 12px;
		line-height: 2;
	}

/*=== 404 / offline page ===*/

	.page-not-found,
	.offline-wrap {
		padding: 20px;
		flex-direction: column;
		justify-content: center;
		height: 100dvh;
		text-align: center;
	}

	.page-not-found svg,
	.offline-wrap svg {
		display: block;
		margin-bottom: 15px;
		color: var(--theme-color);
		color: var(--incorrect);
	}

	.page-not-found h2,
	.offline-wrap h2 {
		font-size: 22px;
		color: rgb(50,65,75);
	}

	.page-not-found p,
	.offline-wrap p {
		font-size: 15px;
		font-weight: 450;
		padding: 10px 0;
		color: rgb(120,120,120);
	}

	.page-not-found a {
		padding: 10px 25px;
		border-radius: 10px;
		margin-top: 40px;
		color: var(--white);
		background: var(--theme-color);
	}

@media (min-width: 768px){

	.page-heading {
		font-size: 22px;
	}

/*=== Home Page ===*/

	.header-logo {
		height: 20px;
	}

	.header-navbar {
		gap: 40px;
	}

	.header-navlink {
		border: 0;
		width: auto;
		border-radius: 0;
		background: transparent;
	}

	.header-navtext {
		display: block;
	}

	.home-hero-text {
		max-width: 500px;
	}

	.home-hero-text .heading {
		font-size: 48px;
	}

	.home-hero-text .sub-heading {
		font-size: 20px;
	}

	.home-quiz-section .section-heading h2 {
		font-size: 24px;
	}

	.home-quiz-grid {
		grid-template-columns: 1fr 1fr;
	}

	.home-quiz-card-text .title {
		font-size: 20px;
	}

	.home-quiz-card-text .description {
		height: 48px;
		font-size: 17px;
		line-height: 24px;
	}

	.home-quiz-card-btn {
		font-size: 16px;
	}

	.installation-card {
		padding: 30px 20px;
	}

	.installation-text {
		font-size: 17px;
	}

	.home-about-section {
		font-size: 22px;
	}

	.home-about-section .divider {
		width: 220px;
	}

	.footer-logo {
		height: 28px;
	}

	.social-link-wrap {
		gap: 20px;
	}

	.legal-link-wrap {
		gap: 40px;
	}

	.legal-link-wrap a {
		font-size: 20px;
	}

	.footer-copyright-text {
		font-size: 16px;
	}

/*=== Topic Page ===*/

	.topic-content {
		font-size: 19px;
	}

/*=== Quiz page ===*/

	.quiz-instructions p {
		font-size: 18px;
	}

/*=== Policies ===*/

	.policy-updation-date {
		font-size: 16px;
	}

	.policy-text-wrap .para {
		font-size: 18px;
	}

	.policy-text-wrap .para .title {
		font-size: 20px;
	}

}