/* 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 {
		--100vh: calc(var(--vh, 1vh) * 100);
		--background-color: #ffad0d12;
	}

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

	.screen,
	.loading-screen {
		margin: 0 auto;
		max-width: 480px;
		min-height: var(--100vh);
		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%,rgb(255,106,112) 90%,rgb(255,106,112,0)) 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 {
		color: rgb(70,80,90);
		font-size: 24px;
		display: flex;
		padding: 5px 5px 5px 0;
		align-items: center;
		text-decoration: none;
	}

	.header-logo {
		height: 16px;
		color: rgb(255,106,112);
	}

	.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%;
		background: rgb(255,106,112);
		position: absolute;
		top: 0px; right: 3px;
		border: 1px solid rgb(200,200,200,0.2);
	}

	.home-hero {
		height: 270px;
		padding: 70px 20px 47px;
		background: linear-gradient(
			to bottom,
			rgb(255,106,112,0.05) 0%,
			rgb(255,106,112,0.06) 10%,
			rgb(255,106,112,0.07) 25%,
			rgb(255,106,112,0.09) 40%,
			rgb(255,106,112,0.11) 55%,
			rgb(255,106,112,0.13) 70%,
			rgb(255,106,112,0.15) 85%,
			rgb(255,106,112,0.20) 100%
		);
		border-radius: 0 0 20px 20px;
	}

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

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

	.home-hero .heading span {
		color: rgb(255,106,112);
	}

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

	.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: 40px 15px 15px;
		border-radius: 20px;
		background: #fff;
		position: relative;
		overflow: hidden;
		border: 1px solid rgb(0,0,0,0.08);
	}

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

	.quiz-list-card.ongoing {
		background: rgb(255,106,112,0.08);
		border-color: rgb(255,106,112,0.2);
	}

	.quiz-list-card.upcoming {
		background: rgb(128,135,145,0.08);
		border-color: rgb(128,135,145,0.3);
	}

	.quiz-list-card .card-badge {
		padding: 4px 16px;
		position: absolute;
		top: 0; left: 0;
		font-size: 13px;
		font-weight: 500;
		color: rgb(255,255,255);
		border-radius: 18px 0;
	}

	.quiz-list-card.ongoing .card-badge {
		background: rgb(255,106,112);
	}

	.quiz-list-card.upcoming .card-badge {
		background: rgb(128,135,145);
	}

	.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;
		color: rgb(255,255,255);
		background: rgb(255,106,112);
	}

	.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: rgb(255,106,112);
	}

	.footer-wrap {
		padding: 50px 20px 30px;
		background: rgb(255,106,112,0.05);
		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;
	}

	.copyright-wrap p:first-child i {
		color: rgb(255,106,112);
	}

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

/* 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(var(--100vh) - 60px);
	}

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

	.contact-opt-wrap a {
		text-decoration: none;
	}

	.contact-opt {
		color: rgb(0 0 0);
		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.12);
	}

	.contact-opt.ii {
		background: rgb(37 211 102 / 0.12);
	}

	.contact-opt i {
		font-size: 34px;
	}

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

	.contact-opt.ii i {
		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;
	}

/* custom alert */

	.alertbox {
		width: 100%;
		max-width: 480px;
		min-height: 60px;
		position: fixed;
		top: -100px; left: 50%;
		transform: translateX(-50%);
		background: rgb(70,80,90);
		color: #fff; z-index: 150;
		padding: 15px 20px;
		transition: top 250ms cubic-bezier(0.77,0,0.18,1);
	}

	.alertbox.show {
		top: 0;
	}

/* login */

	.login-wrap {
		padding: 80px 20px 20px;
		height: calc(var(--100vh) - 60px);
	}

	.login-text {
		height: 60px;
		font-size: 23px;
		font-weight: 650;
		text-align: center;
		color: rgb(95,102,110);
	}

	.login-text span {
		font-size: 16px;
		font-weight: 550;
		color: rgb(255,106,112);
		text-decoration: underline dotted;
	}

	.login-form {
		margin: 30px 0 10px;
	}

	.login-label {
		display: block;
		font-size: 14px;
		color: rgb(70,80,90);
		display: none;
	}

	.login-input {
		width: 100%;
		height: 50px;
		padding: 0 20px;
		font-size: 18px;
		font-weight: 600;
		border-radius: 10px;
		border: 1px solid rgb(115,122,130);
	}

	.login-submit {
		width: 100%;
		height: 50px;
		font-size: 18px;
		font-weight: 550;
		margin-top: 30px;
		cursor: pointer;
		border-radius: 10px;
		color: rgb(255,255,255);
		background: rgb(255,106,112);
	}

	.login-notice {
		font-size: 13px;
		line-height: 20px;
		text-align: center;
		color: rgb(70,80,90);
	}

	.login-notice a {
		color: rgb(255,106,112);
	}

/* notifications */

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

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

	.no-notification-wrap .nn-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: 200px;
		display: flex;
		gap: 15px;
		flex-direction: column;
		align-items: center;
		background: rgb(255,106,112);
	}

	.account-hero .avatar {
		width: 80px;
		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-navigation {
		min-height: calc();
	}

	.account-navlink {
		display: flex;
		gap: 20px;
		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 {
		font-size: 22px;
		display: block;
		color: rgb(120,125,125);
	}

	.account-navtext {
		font-size: 16px;
		font-weight: 450;
		color: rgb(70,80,90);
		width: 100%;
	}

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

/* profile */

/*404 page*/

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

	.page-not-found i {
		font-size: 40px;
		display: block;
		margin-bottom: 15px;
		color: rgb(255,106,122);
	}

	.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: rgb(255,255,255);
		background: rgb(255,106,122);
	}