/*=============== FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');

@font-face {	
	font-family: 'helvetica_neueregular', sans-serif;	
	src: url('../fonts/helveticaneueroman-webfont.woff2') format('woff2'),	
	url('../fonts/helveticaneueroman-webfont.woff') format('woff');	
	font-weight: normal;	
	font-style: normal;	
	font-display: swap;	
}

@font-face {	
	font-family: 'helvetica_neuemedium', sans-serif;	
	src: url('../fonts/helveticaneuemedium-webfont.woff2') format('woff2'),	
	url('../fonts/helveticaneuemedium-webfont.woff') format('woff');	
	font-weight: normal;	
	font-style: normal;	
	font-display: swap;	
}

/* @font-face {	
	font-family: 'alluraregular', sans-serif;	
	src: url('../fonts/allura-regular.woff2') format('woff2'),	
	url('../fonts/allura-regular.woff') format('woff');	
	font-weight: normal;	
	font-style: normal;	
	font-display: swap;	
} */


/*=============== VARIABLES CSS ===============*/
:root {	
		
	/*========== Colors ==========*/	
	/*Color mode HEX*/	
	--white-color: #ffffff;	
	--black-color: #000000;	
	--red-color: #D41F3A;	
	--pink-color: #FD9ED0;	
	--heart: #fef7ff;	
	--bg: #ffe0f0;	
	--box-shadow: 0 0.2rem 0.4rem 0 #FD9ED0;	
		
	/*========== Font and typography ==========*/	
	/*.5rem = 8px | 1rem = 16px ...*/	
	--body-font: 'helvetica_neueregular', sans-serif;	
	--secondary-font: "Allura", serif;	
	--biggest-font-size: 3.5rem;	
	--h1-font-size: 2.2rem;	
	--h2-font-size: 2rem;	
	--h3-font-size: 1rem;	
	--normal-font-size: 1rem;	
	--small-font-size: 0.875rem;	
		
	/*========== Font weight ==========*/	
	--font-regular: 400;	
	--font-semi-bold: 600;	
	--font-bold: 700;	
		
	/*========== z index ==========*/	
	--z-tooltip: 10;	
	--z-fixed: 100;	
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1150px) {	
	:root {		
		--biggest-font-size: 3.5rem;		
		--h1-font-size: 3.5rem;		
		--h2-font-size: 3.5rem;		
		--h3-font-size: 1rem;		
		--normal-font-size: 1rem;		
		--small-font-size: 0.875rem;		
	}	
}

*,
::after,
::before {	
	box-sizing: border-box;	
}

html {	
	scroll-behavior: smooth;	
	scroll-padding-top: 6rem;	
}

body {	
	font-family: var(--body-font);	
	color: var(--thm-white);	
	font-size: 16px;	
	margin: 0;	
	padding: 0;	
}

a:active,
a:hover,
a:focus,
a:visited {	
	text-decoration: none;	
}

h1,
h2,
h3,
h4,
h5,
h6 {	
	font-family: var(--secondary-font);	
	font-weight: 400;	
	font-style: normal;	
	line-height: 1.4;	
	text-shadow: 0 0 1px var(--thm-text);	
}

img {	
	vertical-align: middle;	
	border-style: none;	
}

.img-fluid {	
	max-width: 100%;	
	display: block;	
	height: auto;	
}

p {	
	font-size: 1rem;	
	line-height: 1.2;	
	color: var(--thm-text);	
	margin-top: 0;	
	margin-bottom: 0;	
	font-family: var(--secondary-font);	
}

ul {	
	list-style: none;	
	margin: 0;	
	padding: 0;	
}

/*=============== REUSABLE CSS STARTS ===============*/
.section {	
	padding-block: 2rem 2rem;	
}

.text-start {	
	text-align: start;	
}

.text-center {	
	text-align: center;	
}

.text-end {	
	text-align: end;	
}

.text-white {	
	color: var(--white-color);	
}

.flex,
.row {	
	display: flex;	
}

.justify-content-center {	
	justify-content: center;	
}

.justify-content-start {	
	justify-content: flex-start;	
}

.justify-content-end {	
	justify-content: flex-end;	
}

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

.align-items-start {	
	align-items: start;	
}

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

.flex-wrap {	
	flex-wrap: wrap;	
}

.g-2 {	
	gap: 2rem;	
}

.col-12 {	
	-ms-flex: 0 0 100%;	
	flex: 0 0 100%;	
	max-width: 100%;	
}

.col-6 {	
	-ms-flex: 0 0 50%;	
	flex: 0 0 50%;	
	max-width: 50%;	
}

.col-3 {	
	-ms-flex: 0 0 25%;	
	flex: 0 0 25%;	
	max-width: 25%;	
}

.mt-0 {	
	margin-top: 0rem;	
}

.mt-1 {	
	margin-top: 1rem;	
}

.mt-2 {	
	margin-top: 2rem;	
}

.mb-0 {	
	margin-bottom: 0;	
}

.mb-1 {	
	margin-bottom: 1rem;	
}

.mb-2 {	
	margin-bottom: 2rem;	
}

.mb-3 {	
	margin-bottom: 3rem;	
}

.p-1 {	
	padding: 10px;	
}

.text-uppercase {	
	text-transform: uppercase;	
}

.w-100 {	
	width: 100%;	
	height: auto;	
}

.img-fluid {	
	display: block;	
	max-width: 100%;	
	height: auto;	
}

.d-none {	
	display: none;	
}

/*=============== REUSABLE CSS ENDS ===============*/

/*=============== BUTTON CSS STARTS ===============*/

/*=============== BUTTON CSS ENDS ===============*/

/*=============== MAIN SECTION STARTS ===============*/
.page__wrapper {	
	position: relative;	
	margin: 0 auto;	
	width: 100%;	
	min-width: 300px;	
	height: 100dvh;	
	overflow: hidden;	
	background: var(--bg);	
	padding: 5px;	
}

.page__heading h1 {	
	font-size: var(--h1-font-size);	
	line-height: 1.2;	
	font-weight: 700;	
	color: var(--white-color);	
	text-align: left;	
	margin-top: 0;	
	margin-bottom: 1.5rem;	
	text-shadow: var(--shadow-text);	
}

.section__heading h2 {	
	font-size: var(--h2-font-size);	
	line-height: 1.1;	
	font-weight: 700;	
	text-align: left;	
	margin-top: 0;	
	text-shadow: var(--shadow-text);	
}

/*=============== PRELOAD STARTS ===============*/

.sticker {	
	position: absolute;	
}

.sticker img {	
	max-width: 250px;	
	height: auto;	
}

.sticker img[data-v-76c54b36] {	
	background-color: transparent;	
	/* background-color: #6756ab; */	
	/* border: 4px solid #6756ab; */	
	/* border-radius: 50%; */	
}

.border2[data-v-76c54b36] {	
	border-radius: 44px;	
}

#loader[data-v-76c54b36] {	
	position: fixed;	
	transform-origin: right top;	
	z-index: 300;	
}

#loader[data-v-76c54b36],
#loader .bgfill[data-v-76c54b36] {	
	height: 100%;	
	left: 0;	
	top: 0;	
	width: 100%;	
}

#loader .bgfill[data-v-76c54b36] {	
	background-color: var(--color-primary2);	
	position: absolute;	
	transform-origin: left bottom;	
}

/* #loader .sticker-wrap[data-v-76c54b36] {	
	height: 1000px;	
	left: 50%;	
	margin: -50px 0 0 -900px;	
	position: absolute;	
	top: 50%;	
	width: 1800px;	
} */

#loader .sticker-wrap[data-v-76c54b36] {	
	min-height: 100%;	
	width: 650px;	
	position: absolute;	
	top: 0;	
	left: 50%;	
	transform: translateX(-50%);	
	/* margin: -50px 0 0 -50px; */	
}

#loader .sticker[data-type="1"][data-v-76c54b36] {	
	width: 498px;	
}

#loader .sticker[data-type="1"][data-num="1"][data-v-76c54b36] {	
	left: 241px;	
	top: 267px;	
	z-index: 13;	
}

#loader .sticker[data-type="1"][data-num="1"] img[data-v-76c54b36] {	
	transform: rotate(-23deg);	
}

#loader .sticker[data-type="1"][data-num="2"][data-v-76c54b36] {	
	left: 328px;	
	top: 139px;	
	z-index: 14;	
}

#loader .sticker[data-type="1"][data-num="2"] img[data-v-76c54b36] {	
	transform: rotate(4deg);	
}

#loader .sticker[data-type="1"][data-num="3"][data-v-76c54b36] {	
	left: 2px;	
	top: 150px;	
	z-index: 16;	
}

#loader .sticker[data-type="1"][data-num="3"] img[data-v-76c54b36] {	
	transform: rotate(20deg);	
}

#loader .sticker[data-type="1"][data-num="4"][data-v-76c54b36] {	
	left: 34px;	
	top: 275px;	
	z-index: 24;	
}

#loader .sticker[data-type="1"][data-num="4"] img[data-v-76c54b36] {	
	transform: rotate(20deg);	
}

#loader .sticker[data-type="1"][data-num="5"][data-v-76c54b36] {	
	left: 145px;	
	top: 200px;	
	z-index: 17;	
}

#loader .sticker[data-type="1"][data-num="5"] img[data-v-76c54b36] {	
	transform: rotate(20deg);	
}

#loader .sticker[data-type="2"][data-v-76c54b36] {	
	width: 498px;	
}

#loader .sticker[data-type="2"][data-num="1"][data-v-76c54b36] {	
	left: -82px;	
	top: 19px;	
	z-index: 10;	
}

#loader .sticker[data-type="2"][data-num="1"] img[data-v-76c54b36] {	
	transform: rotate(6deg);	
}

#loader .sticker[data-type="2"][data-num="2"][data-v-76c54b36] {	
	left: 195px;	
	top: -45px;	
	z-index: 6;	
}

#loader .sticker[data-type="2"][data-num="2"] img[data-v-76c54b36] {	
	transform: rotate(-39deg);	
}

#loader .sticker[data-type="2"][data-num="3"] img[data-v-76c54b36] {	
	right: 250px;	
	top: 0px;	
	z-index: 8;	
}

#loader .sticker[data-type="2"][data-num="3"] img[data-v-76c54b36] {	
	transform: rotate(-39deg);	
}

#loader .sticker[data-type="2"][data-num="4"][data-v-76c54b36] {	
	left: 202px;	
	top: 575px;	
	z-index: 12;	
}

#loader .sticker[data-type="2"][data-num="4"] img[data-v-76c54b36] {	
	transform: rotate(16deg);	
}

#loader .sticker[data-type="2"][data-num="5"][data-v-76c54b36] {	
	left: 322px;	
	top: 492px;	
	z-index: 7;	
}

#loader .sticker[data-type="2"][data-num="5"] img[data-v-76c54b36] {	
	transform: rotate(-39deg);	
}

#loader .sticker[data-type="2"][data-num="6"][data-v-76c54b36] {	
	left: 168px;	
	top: 97px;	
	z-index: 0;	
}

#loader .sticker[data-type="2"][data-num="6"] img[data-v-76c54b36] {	
	transform: rotate(0);	
}

#loader .sticker[data-type="2"][data-num="7"][data-v-76c54b36] {	
	left: 160px;	
	top: -23px;	
	z-index: 2;	
}

#loader .sticker[data-type="2"][data-num="7"] img[data-v-76c54b36] {	
	transform: rotate(6deg);	
}

#loader .sticker[data-type="2"][data-num="8"][data-v-76c54b36] {	
	left: 261px;	
	top: 324px;	
	z-index: 5;	
}

#loader .sticker[data-type="2"][data-num="8"] img[data-v-76c54b36] {	
	transform: rotate(0);	
}

#loader .sticker[data-type="2"][data-num="9"][data-v-76c54b36] {	
	right: -244px;	
	top: 7px;	
	z-index: 11;	
}

#loader .sticker[data-type="2"][data-num="9"] img[data-v-76c54b36] {	
	transform: rotate(-39deg);	
}

#loader .sticker[data-type="3"][data-v-76c54b36] {	
	width: 462px;	
}

#loader .sticker[data-type="3"][data-num="1"][data-v-76c54b36] {	
	left: 38px;	
	top: 5px;	
	z-index: 19;	
}

#loader .sticker[data-type="3"][data-num="1"] img[data-v-76c54b36] {	
	transform: rotate(12deg);	
}

#loader .sticker[data-type="3"][data-num="2"][data-v-76c54b36] {	
	right: -144px;	
	top: 344px;	
	z-index: 21;	
}

#loader .sticker[data-type="3"][data-num="2"] img[data-v-76c54b36] {	
	transform: rotate(-17deg);	
}

#loader .sticker[data-type="3"][data-num="3"][data-v-76c54b36] {	
	left: 122px;	
	top: 336px;	
	z-index: 20;	
}

#loader .sticker[data-type="3"][data-num="3"] img[data-v-76c54b36] {	
	transform: rotate(-17deg);	
}

#loader .sticker[data-type="3"][data-num="4"][data-v-76c54b36] {	
	left: 25px;	
	top: 490px;	
	z-index: 22;	
}

#loader .sticker[data-type="3"][data-num="4"] img[data-v-76c54b36] {	
	transform: rotate(-17deg);	
}

#loader .sticker[data-type="3"][data-num="5"][data-v-76c54b36] {	
	left: 258px;	
	top: -144px;	
	z-index: 23;	
}

#loader .sticker[data-type="3"][data-num="5"] img[data-v-76c54b36] {	
	transform: rotate(-17deg);	
}

#loader .sticker[data-type="3"][data-num="6"][data-v-76c54b36] {	
	left: 707px;	
	top: 812px;	
	z-index: 18;	
}

#loader .sticker[data-type="3"][data-num="6"] img[data-v-76c54b36] {	
	transform: rotate(-17deg);	
}

#loader .sticker[data-type="3"][data-num="7"][data-v-76c54b36] {	
	left: 1303px;	
	top: -99px;	
	z-index: 15;	
}

#loader .sticker[data-type="3"][data-num="7"] img[data-v-76c54b36] {	
	transform: rotate(-17deg);	
}

#loader .sticker[data-type="3"][data-num="8"][data-v-76c54b36] {	
	left: 204px;	
	top: 263px;	
	z-index: 25;	
}

#loader .sticker[data-type="3"][data-num="8"] img[data-v-76c54b36] {	
	transform: rotate(0);	
}

#loader .sticker[data-type="3"][data-num="9"][data-v-76c54b36] {	
	left: 1514px;	
	top: 759px;	
	z-index: 1;	
}

#loader .sticker[data-type="3"][data-num="9"] img[data-v-76c54b36] {	
	transform: rotate(0);	
}

#loader .sticker[data-type="3"][data-num="10"][data-v-76c54b36] {	
	left: 1465px;	
	top: -29px;	
	z-index: 2;	
}

#loader .sticker[data-type="3"][data-num="10"] img[data-v-76c54b36] {	
	transform: rotate(0);	
}

#loader .sticker[data-type="3"][data-num="11"][data-v-76c54b36] {	
	left: 91px;	
	top: 472px;	
	z-index: 3;	
}

#loader .sticker[data-type="3"][data-num="11"] img[data-v-76c54b36] {	
	transform: rotate(0);	
}

#loader .sticker[data-type="3"][data-num="12"][data-v-76c54b36] {	
	left: 1137px;	
	top: 211px;	
	z-index: 4;	
}

#loader .sticker[data-type="3"][data-num="12"] img[data-v-76c54b36] {	
	transform: rotate(0);	
}

/*=============== PRELOAD ENDS ===============*/

/*=============== LOGIN SECTION STARTS ===============*/

/* .heart__bg {	
	width: 100%;	
	height: 100dvh;	
	background-size: 100px 100px;	
	background-repeat: repeat;	
	background-image: 	
    radial-gradient(circle at 37% 42%, var(--heart) 17%, rgba(255, 255, 255, 0) 17%),	
    radial-gradient(circle at 63% 42%, var(--heart) 17%, rgba(255, 255, 255, 0) 17%),	
    linear-gradient(to top left, var(--bg) 37%, rgba(255, 255, 255, 0) 37%),	
    linear-gradient(to top right, var(--bg) 37%, rgba(255, 255, 255, 0) 37%),	
    radial-gradient(circle at 50% 58%, var(--heart) 30%, rgba(255, 255, 255, 0) 30%);	
	animation: heartAnim 10s infinite linear;	
} */
.heart__bg {	
	width: 100%;	
	height: 100dvh;	
	background-image: url("../images/page-bg.webp");	
	background-position: center center;	
	background-repeat: no-repeat;	
	background-size: cover;	
}

@keyframes heartAnim {	
	0% {		
		background-position: 0 0;		
	}	
		
	100% {		
		background-position: 100px 100px;		
	}	
}

.main__wrapper {	
	display: flex;	
	justify-content: center;	
	align-items: center;	
	width: 100%;	
	height: 100%;	
	padding-inline: 1.5rem;	
}

/* Form css Starts */
.form-container {	
	max-width: 350px;	
	background: #f8f9fd;	
	background: linear-gradient(0deg,	
	rgb(255, 255, 255) 0%,	
	rgb(244, 247, 251) 100%);	
	border-radius: 40px;	
	padding: 25px 25px;	
	/* border: 5px solid rgb(255, 255, 255); */	
	/* box-shadow: rgba(253, 158, 208, 0.8784313725) 0px 30px 30px -20px; */	
	box-shadow: inset 4px -4px 10px #bcbcbc, inset -4px 4px 10px #ffffff;	
	margin: 10px;	
}

.heading {	
	text-align: center;	
	font-weight: 400;	
	font-size: 32px;	
	color: var(--red-color);	
	font-family: var(--secondary-font);	
	line-height: 1.2;	
}

.form {	
	margin-top: 12px;	
}

.form .input {	
	width: 100%;	
	background: white;	
	border: none;	
	padding: 15px 20px;	
	border-radius: 20px;	
	margin-top: 15px;	
	box-shadow: var(--pink-color) 0px 4px 10px -6px;	
	border-inline: 2px solid transparent;	
}

.form .input::-moz-placeholder {	
	color: rgb(170, 170, 170);	
}

.form .input::placeholder {	
	color: rgb(170, 170, 170);	
}

.form .input:focus {	
	outline: none;	
	border-inline: 2px solid var(--pink-color);	
}

.form .forgot-password {	
	display: block;	
	margin-top: 10px;	
	margin-left: 10px;	
}

.form .forgot-password a {	
	font-size: 11px;	
	color: #0099ff;	
	text-decoration: none;	
}

.form .login-button {	
	display: block;	
	width: 100%;	
	font-weight: bold;	
	background: rgb(255, 249, 251);	
	background: radial-gradient(circle, rgba(255, 249, 251, 1) 0%, rgba(253, 158, 208, 1) 100%);	
	color: var(--red-color);	
	padding-block: 15px;	
	margin: 20px auto;	
	border-radius: 20px;	
	box-shadow: var(--pink-color) 0px 20px 10px -15px;	
	border: none;	
	transition: all 0.2s ease-in-out;	
	cursor: pointer;	
	font-family: var(--body-font);	
	font-weight: 400;	
}

.form .login-button:hover {	
	transform: scale(1.03);	
	box-shadow: var(--pink-color) 0px 23px 10px -20px;	
}

.form .login-button:active {	
	transform: scale(0.95);	
	box-shadow: var(--pink-color) 0px 15px 10px -10px;	
}

.social-account-container {	
	margin-top: 25px;	
}

.social-account-container .title {	
	display: block;	
	text-align: center;	
	font-size: 10px;	
	color: rgb(170, 170, 170);	
}

.social-account-container .social-accounts {	
	width: 100%;	
	display: flex;	
	justify-content: center;	
	gap: 15px;	
	margin-top: 5px;	
}

.social-account-container .social-accounts .social-button {	
	background: linear-gradient(45deg, rgb(0, 0, 0) 0%, rgb(112, 112, 112) 100%);	
	border: 5px solid white;	
	padding: 5px;	
	border-radius: 50%;	
	width: 40px;	
	aspect-ratio: 1;	
	display: grid;	
	place-content: center;	
	box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 12px 10px -8px;	
	transition: all 0.2s ease-in-out;	
}

.social-account-container .social-accounts .social-button .svg {	
	fill: white;	
	margin: auto;	
}

.social-account-container .social-accounts .social-button:hover {	
	transform: scale(1.2);	
}

.social-account-container .social-accounts .social-button:active {	
	transform: scale(0.9);	
}

.agreement {	
	display: block;	
	text-align: center;	
	margin-top: 15px;	
}

.agreement a {	
	text-decoration: none;	
	color: #0099ff;	
	font-size: 9px;	
}

/* Form css Ends */
/*=============== LOGIN SECTION ENDS ===============*/

/*=============== QUESTIONS CARD PAGE STARTS ===============*/

.fx-wrap {	
	display: block;	
	width: 100%;	
	padding-top: 1rem;	
	padding-bottom: 1rem;	
	padding-left: 2px;	
	padding-right: 2px;	
	overflow: hidden;	
}

.fx-wrap .card {	
	perspective: 1000px;	
	width: 100%;	
	min-width: 324px;	
	height: 185px;	
	position: relative;	
}

.fx-wrap .card .front {	
	display: flex;	
	justify-content: flex-start;	
	align-items: center;	
}

.fx-wrap .card>.front,
.fx-wrap .card>.back {	
	transition: transform 3s, z-index 3s 0s, box-shadow 3s;	
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);	
	will-change: transform;	
	position: absolute;	
	left: 0;	
	right: 0;	
	top: 0;	
	bottom: 0;	
	border-radius: 4px;	
	background-color: #fff;	
	backface-visibility: hidden;	
}

.fx-wrap .card>.front:before,
.fx-wrap .card>.back:before {	
	transition: all 1s;	
	content: '';	
	display: block;	
	position: absolute;	
	width: 100%;	
	height: 100%;	
	background-size: contain;	
	background-image: linear-gradient(135deg, rgba(238, 238, 238, 0) 0%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0.4) 36%, rgba(255, 255, 255, 0.4) 68%, rgba(247, 247, 247, 0) 69%, rgba(238, 238, 238, 0) 70%);	
	background-repeat: no-repeat;	
	background-position: 324px 0;	
	pointer-events: none;	
	z-index: 20;	
}

.fx-wrap .card>.front>*,
.fx-wrap .card>.back>* {	
	height: 100%;	
}

.fx-wrap .card>.front .image,
.fx-wrap .card>.back .image {	
	/* float: left; */	
	background-position: center center;	
	background-repeat: no-repeat;	
	background-size: cover;	
}

.fx-wrap .card .front .image {	
	-ms-flex: 0 0 30%;	
	flex: 0 0 30%;	
	max-width: 30%;	
}

/* .fx-wrap .card>.front .text,	
	.fx-wrap .card>.back .text {	
	display: flex;	
	flex-direction: column;	
	justify-content: space-between;	
	width: 216px;	
	float: right;	
} */

.fx-wrap .card .front .text {	
	display: flex;	
	flex-direction: column;	
	justify-content: space-between;	
	-ms-flex: 0 0 70%;	
	flex: 0 0 70%;	
	max-width: 70%;	
	padding: 20px;	
}

.fx-wrap .card>.front .text button.flip,
.fx-wrap .card>.back .text button.flip {	
	border-radius: 50%;	
	width: 30px;	
	max-width: 30px;	
	height: 30px;	
	margin-left: 10px;	
	border: 0;	
	background-color: var(--pink-color);	
	color: var(--white-color);	
	font-size: 1.5em;	
	outline: 0;	
	transition: background-color 0.3s ease-in, transform 0.4s;	
	transition-delay: 0.1s;	
	cursor: pointer;	
	display: flex;	
	justify-content: center;	
	align-items: center;	
}

.fx-wrap .card>.front .text button.flip:hover,
.fx-wrap .card>.back .text button.flip:hover {	
	background-color: var(--red-color);	
}

.fx-wrap .card>.front .text button.flip:focus,
.fx-wrap .card>.back .text button.flip:focus {	
	transform: rotate(-360deg);	
}

.fx-wrap .card>.front .text button.flip svg {	
	width: 30px;	
	height: 30px;	
}

.fx-wrap .card>.front .text p,
.fx-wrap .card>.back .text p {	
	/* margin: 20px auto;		
		width: 80%;		
		flex: 2;		
		display: flex;		
		justify-content: center;		
	align-items: center; */	
	font-family: var(--body-font);	
	font-size: 14px;	
	line-height: 1.2;	
}

.fx-wrap .card>.front .text a,
.fx-wrap .card>.back .text a {	
	text-transform: none;	
	margin: 10px auto;	
	text-align: right;	
	/* width: 80%; */	
	display: block;	
	flex: 1;	
	text-decoration: none;	
	color: var(--red-color);	
	font-size: 14px;	
}

.fx-wrap .card>.front .image,
.fx-wrap .card>.back .image {	
	border-top-left-radius: 4px;	
	border-bottom-left-radius: 4px;	
	background-size: cover;	
	width: 108px;	
	background-color: #f5f5f5;	
	position: relative;	
}

.fx-wrap .card>.front .image .heading,
.fx-wrap .card>.back .image .heading {	
	position: absolute;	
	bottom: 0;	
	left: 0;	
	right: 0;	
	margin: 0;	
	padding: 10px;	
	font-size: 1.5em;	
	font-weight: 700;	
	text-align: right;	
	color: var(--red-color);	
	text-transform: uppercase;	
}

.fx-wrap .card>.front {	
	z-index: 2;	
	transform: rotateY(0deg);	
}

.fx-wrap .card>.back {	
	z-index: 1;	
	transform: rotateY(180deg);	
}

.fx-wrap .card>.back .text {	
	display: flex;	
	justify-content: center;	
	align-items: center;	
	padding: 10px;	
}

.fx-wrap .card>.back header,
.fx-wrap .card>.back .text {	
	width: 100%;	
}

.fx-wrap .card>.back header b,
.fx-wrap .card>.back .text b {	
	color: var(--red-color);	
	width: 80%;	
	margin: 0 auto;	
}

.fx-wrap .card>.back .text b {	
	font-size: 3rem;	
	text-align: center;	
}

.fx-wrap .card>.back header p,
.fx-wrap .card>.back .text p {	
	margin: 20px auto;	
}

.fx-wrap .card.flip-it>.front {	
	transform: rotateY(-180deg);	
	z-index: 1;	
}

.fx-wrap .card.flip-it>.back {	
	transform: rotateY(0deg);	
	z-index: 2;	
}

.fx-wrap .card.flip-it>.front:before,
.fx-wrap .card.flip-it>.back:before {	
	background-position: -324px 0;	
}

.clearfix {	
	display: flex;	
	justify-content: flex-end;	
	align-items: center;	
}

.heart-icon {	
	color: var(--red-color);	
}

/*=============== QUESTIONS CARD PAGE ENDS ===============*/

/*=============== CONGRATULATIONS PAGE STARTS ===============*/
.congratulations-con {	
	padding: 10px;	
}

.message-con {	
	text-align: center;	
	position: fixed;	
	width: 100%;	
	height: 100%;	
	top: 0px;	
	left: 0px;	
	display: flex;	
	flex-wrap: wrap;	
	flex-direction: column;	
	justify-content: center;	
	align-items: center;	
	padding: 10px;	
}

.message-con p {	
	font-size: 14px;	
	line-height: 1.2;	
	width: 95%;		font-family: var(--body-font);	
}

@keyframes confetti-slow {	
	0% {		
		transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);		
	}	
		
	100% {		
		transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);		
	}	
}

@keyframes confetti-medium {	
	0% {		
		transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);		
	}	
		
	100% {		
		transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);		
	}	
}

@keyframes confetti-fast {	
	0% {		
		transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);		
	}	
		
	100% {		
		transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);		
	}	
}

.conf-bg-container {	
	width: 100vw;	
	height: 100vh;	
	background: #ffffff;	
	border: 1px solid white;	
	display: fixed;	
	top: 0px;	
}

.confetti-container {	
	perspective: 700px;	
	position: absolute;	
	overflow: hidden;	
	top: 0;	
	right: 0;	
	bottom: 0;	
	left: 0;	
}

.confetti {	
	position: absolute;	
	z-index: 1;	
	top: -10px;	
	border-radius: 0%;	
}

.confetti--animation-slow {	
	animation: confetti-slow 2.25s linear 1 forwards;	
}

.confetti--animation-medium {	
	animation: confetti-medium 1.75s linear 1 forwards;	
}

.confetti--animation-fast {	
	animation: confetti-fast 1.25s linear 1 forwards;	
}

/* Checkmark */
.checkmark-circle {	
	width: 150px;	
	height: 150px;	
	position: relative;	
	display: inline-block;	
	vertical-align: top;	
	margin-left: auto;	
	margin-right: auto;	
}

.checkmark-circle .background {	
	width: 150px;	
	height: 150px;	
	border-radius: 50%;	
	background: var(--red-color);	
	position: absolute;	
}

.checkmark-circle .checkmark {	
	border-radius: 5px;	
}

.checkmark-circle .checkmark.draw:after {	
	-webkit-animation-delay: 100ms;	
	-moz-animation-delay: 100ms;	
	animation-delay: 100ms;	
	-webkit-animation-duration: 3s;	
	-moz-animation-duration: 3s;	
	animation-duration: 3s;	
	-webkit-animation-timing-function: ease;	
	-moz-animation-timing-function: ease;	
	animation-timing-function: ease;	
	-webkit-animation-name: checkmark;	
	-moz-animation-name: checkmark;	
	animation-name: checkmark;	
	-webkit-transform: scaleX(-1) rotate(135deg);	
	-moz-transform: scaleX(-1) rotate(135deg);	
	-ms-transform: scaleX(-1) rotate(135deg);	
	-o-transform: scaleX(-1) rotate(135deg);	
	transform: scaleX(-1) rotate(135deg);	
	-webkit-animation-fill-mode: forwards;	
	-moz-animation-fill-mode: forwards;	
	animation-fill-mode: forwards;	
}

.checkmark-circle .checkmark:after {	
	opacity: 1;	
	height: 75px;	
	width: 37.5px;	
	-webkit-transform-origin: left top;	
	-moz-transform-origin: left top;	
	-ms-transform-origin: left top;	
	-o-transform-origin: left top;	
	transform-origin: left top;	
	border-right: 15px solid white;	
	border-top: 15px solid white;	
	border-radius: 2.5px !important;	
	content: "";	
	left: 32px;	
	top: 80px;	
	position: absolute;	
}

@-webkit-keyframes checkmark {	
	0% {		
		height: 0;		
		width: 0;		
		opacity: 1;		
	}	
		
	20% {		
		height: 0;		
		width: 37.5px;		
		opacity: 1;		
	}	
		
	40% {		
		height: 75px;		
		width: 37.5px;		
		opacity: 1;		
	}	
		
	100% {		
		height: 75px;		
		width: 37.5px;		
		opacity: 1;		
	}	
}

@-moz-keyframes checkmark {	
	0% {		
		height: 0;		
		width: 0;		
		opacity: 1;		
	}	
		
	20% {		
		height: 0;		
		width: 37.5px;		
		opacity: 1;		
	}	
		
	40% {		
		height: 75px;		
		width: 37.5px;		
		opacity: 1;		
	}	
		
	100% {		
		height: 75px;		
		width: 37.5px;		
		opacity: 1;		
	}	
}

@keyframes checkmark {	
	0% {		
		height: 0;		
		width: 0;		
		opacity: 1;		
	}	
		
	20% {		
		height: 0;		
		width: 37.5px;		
		opacity: 1;		
	}	
		
	40% {		
		height: 75px;		
		width: 37.5px;		
		opacity: 1;		
	}	
		
	100% {		
		height: 75px;		
		width: 37.5px;		
		opacity: 1;		
	}	
}

.submit-btn {	
	height: 45px;	
	width: 200px;	
	font-size: 1.2rem;	
	background-color: var(--red-color);	
	border: 1px solid var(--red-color);	
	color: var(--white-color);	
	border-radius: 5px;	
	box-shadow: 0 2px 4px 0 rgba(87, 71, 81, 0.2);	
	cursor: pointer;	
	transition: all 2s ease-out;	
	transition: all 0.2s ease-out;	
}

.submit-btn:hover {	
	background-color: #2ca893;	
	transition: all 0.2s ease-out;	
}

/*=============== CONGRATULATIONS PAGE ENDS ===============*/

/*=============== TEMPLATE GIFT CARD PAGE STARTS ===============*/
.temp-container {	
	position: relative;	
}

.temp-container .valentines {	
	position: relative;	
	top: 50px;	
	cursor: pointer;	
	animation: up 3s linear infinite;	
}

@keyframes up {	
		
	0%,	
	100% {		
		transform: translateY(0);		
	}	
		
	50% {		
		transform: translateY(-30px);		
	}	
}


.temp-container .envelope {	
	position: relative;	
	width: 300px;	
	height: 200px;	
	background-color: #f08080;	
}

.temp-container .envelope:before {	
	background-color: #f08080;	
	content: "";	
	position: absolute;	
	width: 212px;	
	height: 212px;	
	transform: rotate(45deg);	
	top: -105px;	
	left: 44px;	
	border-radius: 30px 0 0 0;	
}

.temp-container .card {	
	position: absolute;	
	background-color: #fbd7d7;	
	width: 270px;	
	height: 170px;	
	top: 5px;	
	left: 15px;	
	box-shadow: -5px -5px 100px rgba(0, 0, 0, 0.4);	
	background-image: url("../images/card-bg.png");	
	background-position: center center;	
	background-repeat: no-repeat;	
	background-size: cover;	
}

.temp-container .card:before {	
	content: "";	
	position: absolute;	
	border: 6px solid transparent;	
	padding: 8px;	
	border-image: url("../images/heart-border.png") 30 round;	
	width: 246px;	
	heighT: 146px;	
	left: 12px;	
	top: 12px;	
	display: none;	
}

.temp-container .text {	
	font-size: 1rem;	
	text-align: center;	
	line-height: 1;	
	color: var(--red-color);	
	padding: 12px 10px;	
	font-family: var(--secondary-font);	
	font-weight: 500;	
}

.text-message {	
	padding: 10px 5px 0px 5px;	
	width: 246px;	
}

.text-message p {	
	font-size: 6px;	
	font-weight: 400;	
	text-align: left;	
	line-height: 1.4;	
	color: #003049;	
	font-family: var(--body-font);	
}

.regards-text {	
	padding-top: 8px;	
}

.text-message strong {	
	font-size: 6px;	
	font-weight: 400;	
	line-height: 1;	
	color: #003049;	
}

.temp-container .heart {	
	background-color: #d62828;	
	display: inline-block;	
	height: 30px;	
	margin: 0 10px;	
	position: relative;	
	top: 110px;	
	left: 105px;	
	transform: rotate(-45deg);	
	width: 30px;	
}

.heart:before,
.heart:after {	
	content: "";	
	background-color: #d62828;	
	border-radius: 50%;	
	height: 30px;	
	position: absolute;	
	width: 30px;	
}

.heart:before {	
	top: -15px;	
	left: 0;	
}

.heart:after {	
	left: 15px;	
	top: 0;	
}

.hearts {	
	position: absolute;	
	top: 0;	
	left: 0;	
	right: 0;	
}

.one,
.two,
.three,
.four,
.five {	
	background-color: red;	
	display: inline-block;	
	height: 10px;	
	margin: 0 10px;	
	position: relative;	
	transform: rotate(-45deg);	
	width: 10px;	
	top: 50px;	
}

.one:before,
.one:after,
.two:before,
.two:after,
.three:before,
.three:after,
.four:before,
.four:after,
.five:before,
.five:after {	
	content: "";	
	background-color: red;	
	border-radius: 50%;	
	height: 10px;	
	position: absolute;	
	width: 10px;	
}

.one:before,
.two:before,
.three:before,
.four:before,
.five:before {	
	top: -5px;	
	left: 0;	
}

.one:after,
.two:after,
.three:after,
.four:after,
.five:after {	
	left: 5px;	
	top: 0;	
}

.one {	
	left: 10px;	
	animation: heart 1s ease-out infinite;	
}

.two {	
	left: 30px;	
	animation: heart 2s ease-out infinite;	
}

.three {	
	left: 50px;	
	animation: heart 1.5s ease-out infinite;	
}

.four {	
	left: 70px;	
	animation: heart 2.3s ease-out infinite;	
}

.five {	
	left: 90px;	
	animation: heart 1.7s ease-out infinite;	
}

@keyframes heart {	
	0% {		
		transform: translateY(0) rotate(-45deg) scale(0.3);		
		opacity: 1;		
	}	
		
	100% {		
		transform: translateY(-150px) rotate(-45deg) scale(1.3);		
		opacity: 0.5;		
	}	
}

.temp-container .front {	
	position: absolute;	
	border-right: 180px solid #f4978e;	
	border-top: 95px solid transparent;	
	border-bottom: 100px solid transparent;	
	left: 120px;	
	top: 5px;	
	width: 0;	
	height: 0;	
	z-index: 10;	
}

.temp-container .front:before {	
	position: absolute;	
	content: "";	
	border-left: 300px solid #f8ad9d;	
	border-top: 195px solid transparent;	
	left: -120px;	
	top: -95px;	
	width: 0;	
	height: 0;	
}

.shadow {	
	position: absolute;	
	width: 330px;	
	height: 25px;	
	border-radius: 50%;	
	background-color: rgba(0, 0, 0, 0.3);	
	top: 265px;	
	left: -15px;	
	animation: scale 3s linear infinite;	
	z-index: 1;	
}

@keyframes scale {	
		
	0%,	
	100% {		
		transform: scaleX(1);		
	}	
		
	50% {		
		transform: scaleX(0.85);		
	}	
}

.share-buttons {	
	position: absolute;	
	bottom: -9rem;	
	left: 0;	
	right: 0;	
}

.button-download {	
	display: flex;    justify-content: center;    align-items: center;    width: 100%;    margin: 0;    padding: 0;	
}

.bottom-content {	
	position: absolute;	
	left: 0;		right: 0;	
	bottom: -13em;	
}
.open-card p {	
	font-size: 14px;	
	line-height: 1.2;	
	text-align: center;		font-family: var(--body-font);	
}

.social-share {	
	padding: 10px 0;	
	display: flex;	
	justify-content: center;	
	align-items: center;	
}

.social-share a {	
	border-radius: 50%;	
	background-color: var(--pink-color);	
	width: 50px;	
	height: 50px;	
	display: flex;	
	justify-content: center;	
	align-items: center;	
	margin-right: 10px;	
	transition: all .4s;	
}

.social-share a svg {	
	width: 25px;	
	height: 25px;	
	fill: var(--white-color);	
}

.social-share a:hover {	
	transform: scale(0.9);	
	box-shadow: var(--box-shadow);	
}

/* Download Button */
.Btn {	
	width: 50px;	
	height: 50px;	
	border: none;	
	border-radius: 50%;	
	background-color: var(--pink-color);	
	display: flex;	
	flex-direction: column;	
	align-items: center;	
	justify-content: center;	
	cursor: pointer;	
	position: relative;	
	transition-duration: .3s;	
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11);		margin: 0 5px;	
}
.Btn svg {  fill: #ffffff;  }
.svgIcon {	
	fill: #ffffff;	
}

.icon2 {	
	width: 18px;	
	height: 5px;	
	border-bottom: 2px solid #ffffff;	
	border-left: 2px solid #ffffff;	
	border-right: 2px solid #ffffff;	
}

.tooltip {	
	position: absolute;	
	right: -105px;	
	opacity: 0;	
	background-color: rgb(12, 12, 12);	
	color: white;	
	padding: 5px 10px;	
	border-radius: 5px;	
	display: flex;	
	align-items: center;	
	justify-content: center;	
	transition-duration: .2s;	
	pointer-events: none;	
	letter-spacing: 0.5px;	
}

.tooltip::before {	
	position: absolute;	
	content: "";	
	width: 10px;	
	height: 10px;	
	background-color: rgb(12, 12, 12);	
	background-size: 1000%;	
	background-position: center;	
	transform: rotate(45deg);	
	left: -5%;	
	transition-duration: .3s;	
}

.Btn:hover .tooltip {	
	opacity: 1;	
	transition-duration: .3s;	
}

.Btn:hover {	
	background-color: var(--red-color);	
	transition-duration: .3s;	
}

.Btn:hover .icon2 {	
	border-bottom: 2px solid rgb(235, 235, 235);	
	border-left: 2px solid rgb(235, 235, 235);	
	border-right: 2px solid rgb(235, 235, 235);	
}

.Btn:hover .svgIcon {	
	fill: rgb(255, 255, 255);	
	animation: slide-in-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;	
}

@keyframes slide-in-top {	
	0% {		
		transform: translateY(-10px);		
		opacity: 0;		
	}	
		
	100% {		
		transform: translateY(0px);		
		opacity: 1;		
	}	
}

.temp-logo {	
	max-width: 50px;	
	margin: 5px 0;	
}

/* Download Template Card Starts */

.temp-container .download-template .card {	
	width: 576px;	
	height: 350px;	
	display: flex;	
	justify-content: center;	
	align-items: center;	
}

.temp-container .download-template .card .text {	
	width: 100%;	
	font-size: 1.5rem;	
}

.temp-container .download-template .card .text .text-message {	
	padding: 30px 16px 30px 16px;	
}

.temp-container .download-template .card .text .text-message p {	
	font-size: 16px;	
}

.temp-container .download-template .card .text .text-message strong {	
	font-size: 16px;	
	font-weight: 400;	
	line-height: 1;	
	color: #003049;	
}

.temp-container .download-template .card .text .text-message .regards-text .temp-logo {	
	max-width: 134px;	
	margin: 8px 0;	
}

/* Download Template Card Ends */

/*=============== TEMPLATE GIFT CARD PAGE ENDS ===============*/

/*=============== MAIN SECTION ENDS ===============*/

/*=============== DESKTOP CONTENT STARTS ===============*/
/* .desktop-screen {	
	width: 100%;	
	height: 100dvh;	
	display: block;	
	}	
		
	.desktop-bg img {	
	width: 100%;	
	height: 100dvh;	
	position: relative;	
	}	
		
	.gif-element {	
	position: absolute;	
	top: 0;	
	left: 0;	
	right: 0;	
	bottom: 0;	
	z-index: 2;	
	text-align: center;	
	}	
		
	.gif-element img {	
	width: auto;	
	height: 100dvh;	
	}	
		
	.pageBlock {	
	display: none;	
} */
/*=============== DESKTOP CONTENT ENDS ===============*/

/*=============== RESPONSIVE STARTS ===============*/

@media (max-width: 768px) {	
	.desktop-screen {		
		display: none;		
	}	
		
	.pageBlock {		
		display: block;		
	}	
}

/*=============== RESPONSIVE ENDS ===============*/