/* default - home */

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

	:root {
		--theme-color: #404080;
		--theme-light-bg: #40408025;
		--white: #ffffff;
		--black: #000000;
		--yellow: #fac80f;
		--correct: #0cce6b;
		--incorrect: #ff5e5b;
		--unanswer: #ff9b54;
	}

	img, svg {
		vertical-align: bottom;
	}

	#app {
		background: rgb(232 239 242);
	}

	.screen,
	.loading-screen {
		margin: 0 auto;
		max-width: 480px;
		min-height: 100dvh;
		background: rgb(255,255,255);
		box-shadow: 0 0 5px rgb(0 0 0 / .05);
	}

	.loading-screen {
		display: flex;
		align-items: center;
		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)}
	}

	.header {
		height: 60px;
		display: flex;
		padding: 0 20px;
		align-items: center;
		position: sticky;
		top: 0;
		z-index: 100;
		background: rgb(255,255,255);
		justify-content: space-between;
		border-bottom: 1px solid rgb(0 0 0 / .08);
	}

	.inner-header {
		display: flex;
		gap: 20px;
		align-items: center;
	}

	.page-back-btn {
		width: 32px;
		height: 32px;
		padding: 4px;
		display: flex;
		cursor: pointer;
		font-size: 24px;
		align-items: center;
		color: rgb(70,80,90);
		background: transparent;
	}

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

	.header-nav {
		width: 100px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header-nav .icon-wrap {
		width: 40px;
		aspect-ratio: 1;
		position: relative;
		border-radius: 50%;
		display: flex;
		cursor: pointer;
		align-items: center;
		justify-content: center;
		background: rgb(0,0,0,0.04);
		border: 1px solid rgb(0,0,0,0.08);
	}

	.header-nav .icon-wrap svg {
		width: 21px;
		color: rgb(70, 80, 90);
	}

	.header-nav .icon-wrap .nofit-dot {
		width: 8px;
		aspect-ratio: 1;
		border-radius: 50%;
		position: absolute;
		top: 0px; right: 3px;
		background: rgb(255, 106, 112);
		border: 1px solid rgb(200, 200, 200, 0.2);
	}

	.home-hero {
		min-height: 270px;
		padding: 70px 20px 47px;
		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 {
		margin: auto;
		max-width: 320px;
	}

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

	.digit.t {text-align: right; }
	.digit.o {text-align: left; }

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

	.quiz-list-wrap {
		padding: 0 20px 0;
	}

	.quiz-list-wrap .heading {
		font-size: 20px;
		padding: 20px 0;
	}

	.quiz-list {
		padding-bottom: 10px;
	}

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

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

	.quiz-list-card.no-quiz {
		display: flex;
		gap: 15px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

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

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

	.quiz-list-card .card-badge {
		padding: 4px 10px;
		top: 0; left: 0;
		font-size: 12px;
		font-weight: 550;
		display: inline-block;
		color: var(--theme-color);
		border-radius: 6px;
		margin-bottom: 15px;
		background: var(--theme-light-bg);
	}

	.quiz-info-text {
		margin-bottom: 15px;
	}

	.quiz-info-text .title {
		font-size: 18px;
		font-weight: 700;
		color: rgb(50,65,75);
	}

	.quiz-info-text .desc {
		height: 40px;
		font-size: 15px;
		font-weight: 450;
		line-height: 20px;
		margin-top: 5px;
		color: rgb(120,125,135);
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.join-btn {
		cursor: pointer;
		font-size: 15px;
		font-weight: 500;
		padding: 7px 20px;
		border-radius: 10px;
		display: inline-block;
		text-decoration: none;
		color: var(--white);
		background: var(--theme-color);
	}

	.about-wrap {
		font-weight: 450;
		line-height: 1.4;
		text-align: justify;
		color: rgb(80,86,95);
		padding: 30px 20px 40px;
	}

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

	.footer-wrap {
		padding: 50px 20px 30px;
		background: var(--theme-light-bg);
		border-top: 1px solid rgb(0,0,0,0.08);
	}

	.footer-logo {
		height: 18px;
		display: block;
		margin: 0 auto 20px;
		color: rgb(70,80,90);
	}

	.social-link-wrap,
	.info-link-wrap {
		display: flex;
		gap: 15px;
		align-items: center;
		justify-content: center;
	}

	.social-link-wrap a {
		font-size: 24px;
		color: rgb(70,80,90);
		text-decoration: none;
	}

	.info-link-wrap {
		gap: 25px;
		margin-top: 15px;
	}

	.info-link-wrap a {
		color: rgb(70,80,90);
		font-size: 15px;
		font-weight: 450;
		text-decoration: none;
	}

	.copyright-wrap {
		font-size: 13px;
		font-weight: 450;
		margin-top: 30px;
		text-align: center;
	}

	.copyright-wrap p:first-child {
		color: rgb(105,110,115);
		padding-bottom: 5px;
		display: flex;
		gap: 4px;
		align-items: center;
		justify-content: center;
	}

	.copyright-wrap p:last-child {
		color: rgb(170,175,180);
	}

/* custom alert */

	.alertbox {
		width: 100%;
		max-width: 480px;
		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;
	}

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

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

/* overlay */

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

	.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: var(--theme-color);
		background: linear-gradient(to bottom, #404080, #1b1b36);
	}

	.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);
	}

	.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 rgb(0,0,0,0.2);
	}

	.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 */

	.no-notification-wrap,
	.no-coins-history-wrap,
	.no-quiz-history-wrap {
		height: calc(100dvh - 60px);
		padding: 20px;
		display: flex;
		gap: 10px;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.no-notification-wrap i,
	.no-coins-history-wrap i,
	.no-quiz-history-wrap svg {
		width: 40px;
		font-size: 40px;
		color: rgb(170,178,185);
	}

	.no-notification-wrap .nn-text,
	.no-coins-history-wrap .nch-text,
	.no-quiz-history-wrap .nqh-text {
		font-size: 17px;
		font-weight: 450;
		color: rgb(70,80,90);
	}

	.notif-row {
		padding: 15px 40px 15px 20px;
		position: relative;
	}

	.notif-row:not(:last-child) {

		border-bottom: 1px solid rgb(0,0,0,0.08);
	}

	.notif-clear-btn {
		position: absolute;
		top: 8px;
		right: 15px;
		font-size: 18px;
		padding: 5px;
		cursor: pointer;
		color: rgb(255,106,112);
	}

	.notif-title {
		font-weight: 500;
		color: rgb(50,65,75);
	}

	.notif-text {
		font-size: 14px;
		padding: 3px 0 8px;
		color: rgb(120,124,128);
	}

	.notif-time {
		font-size: 12px;
		font-weight: 500;
		color: rgb(150,150,150);
	}

/* account */

	.account-hero {
		padding: 35px 20px;
		min-height: 240px;
		display: flex;
		gap: 15px;
		flex-direction: column;
		align-items: center;
		background: var(--theme-color);
	}

	.account-hero .avatar {
		width: 75px;
		aspect-ratio: 1;
	}

	.account-hero .user-name {
		font-size: 22px;
		font-weight: 600;
		text-align: center;
		color: rgb(255,255,255);
		margin-bottom: 4px;
	}

	.account-hero .user-phone {
		font-size: 17px;
		font-weight: 500;
		text-align: center;
		color: rgb(255,255,255);
	}

	.account-hero .user-email {
		font-size: 15px;
		line-height: 20px;
		font-weight: 500;
		text-align: center;
		margin-top: 8px;
		color: rgb(255,255,255);
	}

	.account-hero a {
		font-size: 14px;
		padding: 0 10px;
		line-height: 20px;
		color: rgb(255,255,255);
		text-decoration-style: dotted;
	}

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

	.account-navlink {
		display: flex;
		gap: 15px;
		padding: 20px;
		align-items: center;
		text-decoration: none;
	}

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

	.account-navicon,
	.account-navicon2 {
		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);
	}

	.account-navicon2 {
		font-size: 15px;
	}

/* profile */

	.profile-wrap {
		padding: 30px 20px 20px;
	}

	.profile-row {
		overflow: hidden;
		margin-bottom: 30px;
		border-radius: 15px;
		border: 1px solid rgb(70,80,90,0.2);
	}

	.profile-label {
		font-size: 12px;
		font-weight: 500;
		padding: 5px 20px;
		color: rgb(70,80,90);
		background: rgb(70,80,90,0.1);
	}

	.profile-input {
		width: 100%;
		height: 50px;
		font-size: 18px;
		font-weight: 500;
		padding: 0 20px;
	}

/* coins */

	.coins-card {
		height: 160px;
		position: sticky;
		padding: 40px 20px 0;
		top: 60px; z-index: 10;
		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;
		text-decoration: none;
	}

	.no-coins-history-wrap {
		height: calc(100dvh - 220px);
	}

	.coins-history-wrap {
		padding: 20px;
		background: rgb(0,0,0,0.05);
		min-height: calc(100dvh - 202px);
	}

	.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;
		text-decoration: none;
		display: inline-block;
		background: var(--theme-color);
	}

/* redeem store */

	.redeem-store-wrap {
		min-height: calc(100dvh - 60px);
	}

	.no-store-wrap {
		min-height: calc(100dvh - 60px);
		display: flex;
		gap: 10px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.no-store-wrap .text {
		font-size: 17px;
		font-weight: 450;
		text-align: center;
		color: rgb(70,80,90);
	}

/* refer */

	.refer-hero-wrap {
		height: 150px;
		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.8);
		align-items: center;
		justify-content: center;
		background: transparent;
	}

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

	.referral-btn {
		width: 100%;
		height: 50px;
		color: #fff;
		cursor: pointer;
		font-size: 18px;
		font-weight: 500;
		background: var(--theme-color);
		border-radius: 10px;
	}

/* 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.4;
		color: rgb(80,80,80);
	}

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

	.topic-btn-wrap {
		text-align: center;
		padding: 10px 20px;
		position: sticky;
		bottom: 0; z-index: 10;
		background: var(--white);
		border-radius: 12px 12px 0 0;
		box-shadow: 0 0 5px rgb(0,0,0,0.25);
	}

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

	.topic-btn {
		display: block;
		font-size: 18px;
		font-weight: 500;
		line-height: 24px;
		padding: 13px 10px;
		color: var(--white);
		border-radius: 10px;
		text-decoration: none;
		background: var(--theme-color);
	}

/*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-start-btn {
		width: 100%;
		height: 50px;
		font-size: 18px;
		cursor: pointer;
		font-weight: 500;
		color: var(--white);
		border-radius: 10px;
		background: var(--theme-color);
	}

	.quiz-question-wrap {
		padding: 20px;
	}

	.quiz-question-wrap .topbar {
		display: flex;
		align-items: center;
		margin-bottom: 30px;
		justify-content: space-between;
	}

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

	.quiz-question-wrap .qt-right {
		display: flex;
		gap: 4px;
		align-items: center;
	}

	.quiz-question-wrap .question-timer {
		font-size: 17px;
		font-weight: 500;
	}

	.quiz-question-wrap .question {
		font-size: 18px;
		min-height: 50px;
		line-height: 25px;
		font-weight: 600;
		text-align: center;
		margin-bottom: 25px;
	}

	.question-option-wrap {
		display: flex;
		gap: 20px;
		flex-direction: column;
	}

	.quiz-question-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);
	}

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

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

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

	.quiz-question-wrap .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-wrap a {
		text-decoration: none;
	}

	.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 page */

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

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

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

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

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