:root {
	/* Base Colors */
	--dark-green: #124942;
	--light: #EBFAE6;
	--accent-red: #F13A2D;
	--accent-blue: #4897FF;
	--accent-yellow: #FFE434;

	/* Transparent Versions */
	--dark-green-trans1: rgba(18, 73, 66, 0.7);
	/* 70% opacity */
	--dark-green-trans2: rgba(18, 73, 66, 0.3);
	/* 30% opacity */
	--light-trans1: rgba(235, 250, 230, 0.7);
	/* 70% opacity */
	--light-trans2: rgba(235, 250, 230, 0.3);
	/* 30% opacity */
	--accent-red-trans2: rgba(241, 58, 45, 0.3);
	/* 30% opacity */
	--accent-blue-trans2: rgba(72, 151, 255, 0.3);
	/* 30% opacity */
	--accent-yellow-trans2: rgba(255, 228, 52, 0.3);
	/* 30% opacity */
}

/* Color Classes */
.dark {
	color: var(--dark-green);
}

.light {
	color: var(--light);
}

.red {
	color: var(--accent-red);
}

.blue {
	color: var(--accent-blue);
}

.yellow {
	color: var(--accent-yellow);
}

.small {
	font-size: clamp(1rem, 1.2vw, 1.2rem);
	padding: 0;
	margin: 0;
}

.medium {
	font-size: clamp(1.5rem, 2vw, 2rem);
	padding: 0;
	margin: 0;
}

.large {
	font-size: clamp(2rem, 3vw, 3rem);
	padding: 0;
	margin: 0;
}

.xlarge {
	font-size: clamp(2.5rem, 4vw, 4rem);
	padding: 0;
	margin: 0;
}

.xxlarge {
	font-size: clamp(3rem, 5vw, 5rem);
	padding: 0;
	margin: 0;
}

/* Font Weight Classes */
.light-weight {
	font-weight: 300;
}

.normal-weight {
	font-weight: 400;
}

.bold-weight {
	font-weight: 700;
}

.superbold-weight {
	font-weight: 1200;
}


/* Boxes  */
.red-box {
	border: 2px solid var(--accent-red);
	border-radius: 8px;
	background-color: var(--accent-red-trans2);
}

.red-box:hover {
	background-color: var(--accent-red);
}

.blue-box {
	border: 2px solid var(--accent-blue);
	border-radius: 8px;
	background-color: var(--accent-blue-trans2);
}

.blue-box:hover {
	background-color: var(--accent-blue);
}

.green-box {
	border: 2px solid var(--dark-green);
	border-radius: 8px;
	background-color: var(--dark-green-trans2);
}

.green-box:hover {
	background-color: var(--dark-green);
}

.light-box {
	border: 2px solid var(--light);
	border-radius: 8px;
	background-color: var(--light-trans2);
}

.light-box:hover {
	background-color: var(--light);
}

.yellow-box {
	border: 2px solid var(--accent-yellow);
	border-radius: 8px;
	background-color: var(--accent-yellow-trans2);
}

.yellow-box:hover {
	background-color: var(--accent-yellow);
}

body {
	font-family: 'Kameron', Arial, sans-serif;
	background-color: var(--dark-green);
	/* Dark green */
	color: var(--light-trans1);
	padding: 0;
	margin: 0;
}

.nomp {
	padding: 0;
	margin: 0;
}

/* Header Styles */
.header {
	background-color: var(--dark-green);
	/* Darker green */
}

.nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 6rem;
	margin-left: 2rem;
	margin-right: 2rem;
}


.nav-list {
	list-style-type: none;
	display: flex;
	align-items: center;
	padding-left: 0;
	/* Remove default padding */
}

.nav-item {
	margin-left: 1.5rem;
}

.nav-link {
	color: white;
	text-decoration: none;
}

.cta-link {
	text-decoration: none;
	/* Remove underline from the link itself */
}



.hero {
	background: linear-gradient(to bottom,
			var(--dark-green) 0%,
			var(--accent-red) 70%,
			var(--accent-red) 100%);
	min-height: 400px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: flex-end;
	text-align: center;
	padding-top: 3rem;
}

.hero-copy {
	width: 95%;
	height: auto;
	display: flex;
	flex-direction: column;
	margin: 1%;
	gap: 1rem;
}

.hero-copy-bullets {
	width: 100%;
	display: flex;
	flex-grow: 1;
	border: 2px solid var(--dark-green);
	border-radius: 8px;
	background-color: var(--dark-green-trans2);
	justify-content: space-evenly;
	flex-direction: row;
}

.hero-bullet {
	width: 22%;
	text-align: center;
	display: flex;
	justify-content: space-evenly;
	flex-direction: column;
	align-items: center;
}

.hero-bullet-image {
	width: 40%;
	aspect-ratio: 1;
}

.hero-bullet-text {
	height: 3rem;
	display: flex;
	align-items: center;
}

.hero-cta {
	width: 100%;
	height: auto;
	margin: 1%;
	border-radius: 8px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	text-align: center;
}

.centered {
	justify-content: center;
}

/* Store Buttons */
.store-buttons {
	display: flex;
	width: 100%;
	max-width: 500px;
	gap: 1.5rem;
	justify-content: center;
	align-items: center;
	margin: 2rem auto;
}

.store-button {
	width: 45%;
	max-width: 200px;
	min-width: 120px;
	transition: transform 0.2s ease;
}

.store-button:hover {
	transform: scale(1.05);
}

.store-badge {
	width: 100%;
	height: auto;
}


/* Input Row */
.input-row {
	display: flex;
	width: 100%;
	gap: 10px;
	justify-content: center;
	/* Space between input and button */
}

.input-field {
	font-size: 1rem;
	padding: 1rem;
	border: 2px solid var(--light);
	border-radius: 8px;
	/* Rounded borders */
	background-color: var(--light-trans2);
	color: var(--light);
	width: 60%;
	/* Fixed width for input */
}

.input-field::placeholder {
	color: var(--light);
	opacity: 0.7;
}

.input-field:focus {
	outline: none;
	border-color: var(--accent-blue);
	/* Highlight input when focused */
}

/* Button */
.sign-up-button {
	padding: 1rem;
	width: 10rem;
	cursor: pointer;
	transition: background-color 0.3s, border-color 0.3s;
}

.sign-up-text {
	margin: 0;
	padding: 0;
}


.howitworks {
	position: relative;
	width: 100%;
}

.background-image {
	width: 100%;
	height: auto;
	display: block;
}

.demo-screens {
	position: absolute;
	top: 52%;
	left: 73%;
	height: 55%;
	z-index: 10;
}

.demo-screen {
	height: 100%;
	width: auto;
	position: absolute;
	top: 0;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.demo-screen.active {
	opacity: 1;
}
.iphone-image {
	position: absolute;
	top: 52%;
	/* This positions the image relative to the parent container */
	left: 73%;
	/* Move the image 73% from the left side */
	height: 55%;
	/* Set the image height to 90% of the parent */
	z-index: 10;
	/* Ensure this image appears above the background */
	transform: translate(-50%, -50%);
	/* Adjust for proper centering if necessary */
}
.rewards {
	margin-left: 2rem;
	margin-right: 2rem;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.rewards-copy {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;

}

.rewards-image-section {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 50%;
}

.rewards-image {
	width: 50%;
	aspect-ratio: 1;
}

footer {
	height: 6rem;
	text-align: center;
	padding: 1rem 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

@media (max-width: 768px) {
	.nav-link {
		display: none;
	}
}

@media (max-width: 480px) {
	.nav-list {
		display: none;
	}
}

@media (max-width: 768px) {
	.hero {
		flex-direction: column;
		height: auto;
		padding: 2rem;
	}

	.hero-copy, .hero-cta {
		width: 100%;
		height: auto;
		margin: 1rem 0;
	}
}
@media (max-width: 768px) {
	.hero-copy-bullets {
		display: none;
	}
	
}
@media (max-width: 767px) {
	.store-buttons {
		gap: 1rem;
		align-items: center;
	}

	.store-button {
		width: 70%;
	}
}

/* Privacy Policy Styles */
.privacy-content {
    background-color: var(--dark-green);
    padding: 2rem;
}

.privacy-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--dark-green-trans1);
    padding: 2rem;
    border-radius: 8px;
    color: var(--light);
}

.privacy-title {
    color: var(--light);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.privacy-date {
    color: var(--accent-blue);
    margin-bottom: 2rem;
}

.privacy-container h2 {
    color: var(--accent-yellow);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.privacy-container h3 {
    color: var(--accent-blue);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.privacy-container ul {
    list-style-type: disc;
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.privacy-container p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.privacy-note {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--light-trans2);
    font-style: italic;
}

@media (max-width: 768px) {
    .privacy-container {
        padding: 1rem;
    }
    
    .privacy-title {
        font-size: 2rem;
    }
}

/* Countdown Timer Styles */
.countdown-container {
    text-align: center;
    margin: 1rem auto;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    width: fit-content;
    min-width: 300px;
}

.countdown-text {
    color: var(--light);
    font-size: 1.2rem;
    margin: 0;
    white-space: nowrap;
}

.countdown-text span {
    color: var(--accent-yellow);
    font-weight: bold;
    font-family: monospace;
    font-size: 1.3rem;
}