.epidemica-epigames-microsite {
  	width: 100%;
  	position: relative;
  	background-color: #fff;
  	overflow: hidden;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	text-align: left;
  	font-size: 14px;
  	color: #001e4a;
  	font-family: Inter;
}
.nav-bar {
  	width: 100%;
  	height: 64px;
  	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
  	background-color: #fff;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding: 8px 120px;
  	box-sizing: border-box;
  	min-height: 56px;
  	color: #262626;
}
.logo-horizontal-parent {
  	align-self: stretch;
  	flex: 1;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	gap: 20px;
  	max-width: 100%;
}
.logo-horizontal-icon {
  	width: 164.1px;
  	position: relative;
  	max-height: 100%;
  	object-fit: cover;
}
.nav-items {
  	align-self: stretch;
  	width: 365px;
  	border-radius: 16px;
  	display: flex;
  	align-items: center;
  	justify-content: flex-end;
  	padding: 0px 8px;
  	box-sizing: border-box;
  	gap: 32px;
}
.home {
  	position: relative;
  	line-height: 100%;
}
.about {
  	position: relative;
  	text-decoration: underline;
  	line-height: 100%;
  	font-weight: 500;
}
.main {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	padding: 104px 120px 40px;
  	position: relative;
  	isolation: isolate;
  	gap: 48px;
  	font-size: 44px;
  	font-family: 'Space Grotesk';
}
.hero-bg-icon {
  	width: 1440px;
  	position: absolute;
  	margin: 0 !important;
  	top: 0px;
  	left: 50%;
  	transform: translateX(-50%);
  	max-height: 100%;
  	object-fit: cover;
  	z-index: 0;
  	flex-shrink: 0;
}
.hero-foreground-icon {
  	width: 420px;
  	position: absolute;
  	margin: 0 !important;
  	top: 10%;
  	right: calc(50% - 600px);
  	max-height: 80%;
  	object-fit: contain;
  	z-index: 1;
  	flex-shrink: 0;
}
.div {
  	width: 100%;
  	max-width: 1200px;
  	position: relative;
  	z-index: 2;
  	flex-shrink: 0;
}
.heading {
  	width: 100%;
  	max-width: 1200px;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 8px;
}
.epigames-study-info {
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 48px;
}
.epigames-title {
  	width: 323px;
  	position: relative;
  	display: inline-block;
}
.container {
  	width: 589px;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	font-size: 26px;
}
.epigame-info-container {
  	position: relative;
}
.install-instructions-container {
  	width: 339px;
  	position: relative;
  	font-size: 14px;
  	font-family: Inter;
  	display: inline-block;
}
.div2 {
  	width: 100%;
  	max-width: 1200px;
  	position: relative;
  	z-index: 3;
  	flex-shrink: 0;
  	font-size: 20px;
  	font-family: Poppins;
}
.research-info-container {
  	font-weight: 500;
  	display: inline-block;
  	width: 538px;
}
.colubri-lab {
  	color: inherit;
}
.colubri-lab2 {
  	text-decoration: underline;
}
.spacer {
  	width: 1440px;
  	height: 48px;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  	padding: 24px 8px;
  	box-sizing: border-box;
}
.about-section {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	padding: 16px 120px;
  	font-size: 36px;
  	font-family: 'Space Grotesk';
}
.heading2 {
  	width: 1200px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	gap: 48px;
}
.epigame-section-container {
  	width: 384px;
  	position: relative;
  	display: inline-block;
  	flex-shrink: 0;
}
.epigame-text-container {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	font-size: 16px;
  	font-family: Inter;
}
.epigame-text-paragraph {
  	width: 440px;
  	position: relative;
  	line-height: 150%;
  	display: inline-block;
  	flex-shrink: 0;
}
.spacer2 {
  	width: 1440px;
  	height: 88px;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  	padding: 24px 8px;
  	box-sizing: border-box;
}
.how-to-play {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	padding: 0px 120px;
}
.heading3 {
  	width: 1200px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	gap: 40px;
}
.security-section {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
}
.app-illustration-icon {
  	width: 442.6px;
  	position: relative;
  	max-height: 100%;
  	object-fit: cover;
}
.all-user-data-is-secure-and-an-parent {
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
}
.all-user-data {
  	width: 440px;
  	position: relative;
  	line-height: 160%;
  	display: inline-block;
}
.instruction-list-parent {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  	gap: 8px;
  	font-size: 44px;
  	font-family: 'Space Grotesk';
}
.title-section {
  	width: 463px;
  	position: relative;
  	display: inline-block;
}
.how-to-play-container {
  	width: 440px;
  	position: relative;
  	font-size: 16px;
  	line-height: 160%;
  	font-family: Inter;
  	display: inline-block;
}
.how-to-play-title {
  	margin: 0;
}
.instruction-list-container {
  	margin: 0;
  	font-family: inherit;
  	font-size: inherit;
  	padding-left: 21px;
}
.instruction-item {
  	margin-bottom: 0px;
}
.footer-container {
  	align-self: stretch;
  	height: 358px;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	padding: 64px 120px;
  	box-sizing: border-box;
  	position: relative;
  	isolation: isolate;
  	gap: 48px;
  	font-size: 44px;
  	font-family: 'Space Grotesk';
}
.footer-bg-icon {
  	width: 1440px;
  	position: absolute;
  	margin: 0 !important;
  	top: 0.06px;
  	left: 50%;
  	transform: translateX(-50%);
  	max-height: 100%;
  	object-fit: cover;
  	z-index: 0;
  	flex-shrink: 0;
}
.footer-apple-qr-link {
  	display: block;
  	position: absolute;
  	width: 120px;
  	height: 165px;
  	margin: 0 !important;
  	top: 50%;
  	right: max(200px, calc(50% - 520px));
  	transform: translateY(-50%);
  	z-index: 3;
  	flex-shrink: 0;
}
.footer-google-qr-link {
  	display: block;
  	position: absolute;
  	width: 120px;
  	height: 165px;
  	margin: 0 !important;
  	top: 50%;
  	right: max(50px, calc(50% - 670px));
  	transform: translateY(-50%);
  	z-index: 3;
  	flex-shrink: 0;
}
.footer-apple-qr-icon,
.footer-google-qr-icon {
  	display: block;
  	width: 100%;
  	height: 100%;
  	object-fit: contain;
}
.container3 {
  	width: 100%;
  	max-width: 1200px;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: flex-start;
  	padding-top: 0;
  	box-sizing: border-box;
  	z-index: 2;
  	flex-shrink: 0;
}
.content {
  	align-self: stretch;
  	height: 230px;
  	display: flex;
  	align-items: flex-start;
  	justify-content: space-between;
  	gap: 20px;
}
.text {
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 8px;
}
.qr {
  	height: 230px;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: flex-end;
  	text-align: center;
  	font-size: 14px;
  	color: #b5472b;
  	font-family: Inter;
}
.if-you-install {
  	width: 434px;
  	position: relative;
  	display: inline-block;
}
.footnote {
  	align-self: stretch;
  	background-color: #000;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	padding: 8px 120px;
  	font-size: 16px;
  	color: #fff;
}
.by-the-colubri {
  	position: relative;
  	line-height: 150%;
}

/* Mobile QR codes container - hidden on desktop */
.qr-codes-mobile {
  	display: none;
}

/* Mobile foreground hero image - hidden on desktop */
.hero-foreground-mobile {
  	display: none;
}

/* Mobile Responsive Styles */
@media screen and (max-width: 768px) {
  	/* Navigation */
  	.nav-bar {
    		width: 100%;
    		padding: 8px 20px;
  	}
  	
  	/* Hero Section */
  	.main {
    		padding: 40px 20px;
    		gap: 24px;
    		/* Switch to background-image so the section always fully contains it */
    		background-image: url('/epigames/assets/bg.png');
    		background-size: cover;
    		background-position: center top;
  	}

  	/* Hide the absolutely-positioned <img> on mobile; background-image takes over */
  	.hero-bg-icon {
    		display: none;
  	}
  	
  	.hero-foreground-icon {
    		display: none;
  	}

  	.hero-foreground-mobile {
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		width: 100%;
    		padding: 0 20px;
    		box-sizing: border-box;
  	}

  	.hero-foreground-mobile img {
    		width: 80%;
    		max-width: 320px;
    		height: auto;
    		object-fit: contain;
  	}
  	
  	.div {
    		width: 100%;
    		max-width: 100%;
    		padding: 0 10px;
  	}
  	
  	.heading {
    		width: 100%;
    		max-width: 100%;
  	}
  	
  	.epigames-title {
    		width: 100%;
    		font-size: 32px;
  	}
  	
  	.container {
    		width: 100%;
    		font-size: 20px;
  	}
  	
  	.install-instructions-container {
    		width: 100%;
  	}
  	
  	.div2 {
    		width: 100%;
    		max-width: 100%;
    		padding: 0 10px;
  	}
  	
  	.research-info-container {
    		width: 100%;
    		font-size: 18px;
  	}
  	
  	/* About Section */
  	.about-section {
    		padding: 16px 20px;
  	}
  	
  	.heading2 {
    		width: 100%;
    		flex-direction: column;
    		gap: 24px;
  	}
  	
  	.epigame-section-container {
    		width: 100%;
    		font-size: 28px;
  	}
  	
  	.epigame-text-paragraph {
    		width: 100%;
  	}
  	
  	/* How to Play Section */
  	.how-to-play {
    		padding: 0 20px;
  	}
  	
  	.heading3 {
    		width: 100%;
    		flex-direction: column;
    		gap: 24px;
  	}
  	
  	.security-section {
    		order: 2;
    		width: 100%;
  	}
  	
  	.app-illustration-icon {
    		width: 100%;
    		max-width: 300px;
  	}
  	
  	.all-user-data-is-secure-and-an-parent {
    		width: 100%;
  	}
  	
  	.all-user-data {
    		width: 100%;
  	}
  	
  	.instruction-list-parent {
    		order: 1;
    		width: 100%;
  	}
  	
  	.title-section {
    		width: 100%;
    		font-size: 32px;
  	}
  	
  	.how-to-play-container {
    		width: 100%;
  	}
  	
  	/* Footer Section */
  	.footer-container {
    		height: auto;
    		padding: 30px 20px;
    		gap: 16px;
    		/* Same trick as the hero: use background-image so the section
    		   always fully contains the background regardless of height */
    		background-image: url('/epigames/assets/footer-bg.png');
    		background-size: cover;
    		background-position: center center;
  	}

  	/* Hide the absolutely-positioned <img>; background-image takes over */
  	.footer-bg-icon {
    		display: none;
  	}

  	/* Put the text block first, QR codes below it */
  	.container3 {
    		width: 100%;
    		max-width: 100%;
    		align-items: center;
    		padding: 0;
    		margin-top: 0;
    		order: -1;
  	}

  	.footer-container a {
    		display: flex;
    		justify-content: center;
  	}

  	.footer-apple-qr-link,
  	.footer-google-qr-link {
    		position: static;
    		transform: none;
    		width: auto;
    		height: auto;
  	}

  	.footer-apple-qr-icon,
  	.footer-google-qr-icon {
    		width: 130px;
    		height: auto;
    		object-fit: contain;
  	}
  	
  	.content {
    		flex-direction: column;
    		align-items: center;
    		height: auto;
    		padding-top: 30px;
  	}
  	
  	.text {
    		width: 100%;
    		align-items: center;
    		text-align: center;
    		max-width: 90%;
    		margin: 0 auto;
  	}
  	
  	.epigames-title {
    		font-size: 32px;
  	}
  	
  	.install-instructions-container {
    		width: 100%;
  	}
  	
  	.text .epigames-title {
    		font-size: 28px;
    		margin-bottom: 8px;
  	}
  	
  	.text .install-instructions-container {
    		font-size: 16px;
  	}
  	
  	/* Footnote */
  	.footnote {
    		padding: 8px 20px;
  	}
  	
  	/* Spacers */
  	.spacer,
  	.spacer2 {
    		width: 100%;
  	}
}