:root {
	/* Colors */
	--color-primary: #339933;
	--color-background: #eafbe7;
	--color-text-dark: #1d2023;
	--color-text-gray: #707070;
	--color-white: #fff;
	--color-nav: #354b35;

	/* Font families */
	--font-primary: Roboto, sans-serif;

	/* Spacing */
	--spacing-xs: 8px;
	--spacing-sm: 12px;
	--spacing-md: 20px;
	--spacing-lg: 32px;
	--spacing-xl: 40px;

	/* Border radius */
	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--border-radius-lg: 12px;

	/* Box shadows */
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);
}

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	font-family: Arial, sans-serif;
	background: var(--color-background);
}

* {
	box-sizing: border-box;
}

.banner-section {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.banner-img {
	width: 100%;
	max-height: 60vh;
	object-fit: cover;
	display: block;
	margin: 0 auto 30px auto;
	border-radius: 0 0 20px 20px;
	box-shadow: var(--shadow-md);
}

.main-menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--color-nav);
	padding: 0 32px;
	height: 70px;
	position: relative;
	z-index: 1000;
	/* Increase z-index to ensure menu is above other elements */
}

.main-menu img {
	height: 60px;
	margin-right: 24px;
}

.main-menu ul {
	display: flex;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1001;
	/* Ensure menu items are above other elements */
}

.main-menu ul li a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	font-size: 18px;
}

.main-menu ul li a:hover {
	text-decoration-line: underline;
	text-underline-offset: 5px;
}

.main-menu button {
	margin-left: 24px;
	padding: 8px 18px;
	font-weight: bold;
	border-radius: 4px;
	border: none;
	background: #fff;
	color: var(--color-primary);
	cursor: pointer;
}

/* Hamburger only on small screens */
.menu-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 2em;
	color: #fff;
	cursor: pointer;
}

/* Responsive nav for small devices */
@media (max-width: 768px) {
	.main-menu {
		position: relative;
	}

	.menu-toggle {
		display: block;
		z-index: 101;
	}

	.main-menu ul.menu-items {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: -250px;
		/* hidden by default */
		width: 250px;
		height: 100vh;
		background: var(--color-nav);
		box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
		padding-top: 70px;
		gap: 0;
		transition: right 0.3s ease;
		z-index: 100;
	}

	.main-menu ul.menu-items.active {
		right: 0;
		/* slide in */
	}

	.main-menu button:not(.menu-toggle) {
		display: none;
	}

	.menu-items.active li {
		margin: 20px;
	}
}

.container {
	background: #fff;
	padding: 40px;
	border-radius: 20px;
	box-shadow: var(--shadow-lg);
	max-width: 600px;
	margin: 0 auto 20px auto;
	position: relative;
	z-index: 1;
}

h1 {
	color: #2e7d32;
	font-size: 3em;
	margin-bottom: 20px;
}

.logo {
	width: 150px;
	height: auto;
	margin: 20px 0;
	transition: transform 0.3s ease;
}

.logo:hover {
	transform: scale(1.1);
}

.banner {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.image-background-banner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	z-index: 1;
}

@media (max-width: 900px) {
	.banner {
		height: 60vh;
	}

	.image-background-banner {
		height: 60vh;
		min-height: 220px;
		object-fit: cover;
		object-position: center top;
	}

	.banner-content {
		height: 60vh !important;
	}
}

.banner-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	/* right align */
	z-index: 2;
}

.banner-headings {
	text-align: right;
	max-width: 900px;
	margin: 0 40px;
}

.banner-title {
	color: #fff;
	font-size: 4rem;
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 32px;
}

.banner-subtitle {
	color: #fff;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 900px) {
	.banner-title {
		font-size: 2.5rem;
	}

	.banner-subtitle {
		font-size: 1.1rem;
	}

	.banner-headings {
		max-width: 95vw;
		margin: 0 10px;
	}
}

.banner-spacer {
	height: 60vh;
	width: 100vw;
	opacity: 0;
}

.nc-video-section {
	width: 100%;
	background: var(--color-background);
	padding: 60px 0 40px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 10;
}

.nc-video-title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 32px;
	text-align: center;
}

.nc-video-container {
	width: 90%;
	max-width: 800px;
	box-shadow: var(--shadow-md);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.nc-video-container iframe {
	width: 100%;
	height: 400px;
	border: none;
	display: block;
}

@media (max-width: 900px) {
	.nc-video-container iframe {
		height: 220px;
	}

	.nc-video-title {
		font-size: 1.2rem;
	}
}

.featured-articles {
	width: 100%;
	background: var(--color-background);
	padding: 60px 0 40px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.articles-title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 32px;
	text-align: center;
}

.articles-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin: 32px;
}

.article-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: var(--shadow-md);
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.article-card h3 {
	margin-top: 0;
	color: var(--color-primary);
	font-size: 1.3rem;
	font-weight: 700;
}

.article-card p {
	margin: 16px 0;
	color: #333;
	font-size: 1rem;
}

.article-card a {
	color: var(--color-primary);
	font-weight: bold;
	text-decoration: underline;
	margin-top: auto;
}

.article-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.article-owner-logo {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

@media (max-width: 900px) {
	.articles-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* .article-card {
        padding: 20px 12px;
    } */
}

/* Footer styles */
.nc-footer {
	width: 100%;
	background: var(--color-primary);
	color: #fff;
	padding: 32px 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer-flex {
	width: 90%;
	max-width: 1100px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.footer-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	flex: 1;
}

.footer-logo {
	width: 100px;
	height: auto;
	margin-left: 32px;
}

.footer-content nav a {
	color: #fff;
	text-decoration: underline;
	margin: 0 8px;
	font-size: 1rem;
}

.footer-socials {
	margin-top: 18px;
	display: flex;
	gap: 18px;
	justify-content: center;
}

.social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
	transition: background 0.2s, transform 0.2s;
	border: 1px solid #e0e0e0;
}

.social-icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

.social-icon:hover svg {
	transform: scale(1.15);
	opacity: 0.85;
}

@media (max-width: 900px) {
	.footer-flex {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.footer-content {
		align-items: center;
		text-align: center;
	}

	.footer-logo {
		margin: 24px 0 0 0;
	}
}

#scrollToTopBtn {
	display: none;
	position: fixed;
	bottom: 40px;
	right: 40px;
	z-index: 100;
	font-size: 2rem;
	background: #0288d1;
	color: #fff;
	border: none;
	border-radius: 50%;
	padding: 0.5em 0.7em;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: opacity 0.3s;
}

#scrollToTopBtn:hover {
	background: #039be5;
}

/* about page */
.split-leaf {
	object-fit: cover;
	position: absolute;
	top: 222.934px;
	left: -61.875px;
	z-index: 1;
	/* Lower z-index for leaf */
}

.about-banner-section {
	width: 100%;
	height: 832px;
	max-width: 100%;
	grid-column-gap: 32px;
	grid-row-gap: 32px;
	justify-content: flex-start;
	align-items: center;
	padding: 10px 80px;
	display: flex;
	position: relative;
	z-index: 1;
	/* Lower z-index for banner section */
}

.banner-text {
	width: 448px;
	height: 378px;
	grid-column-gap: 32px;
	grid-row-gap: 32px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	display: flex;
}

.heading-and-caption {
	grid-column-gap: 8px;
	grid-row-gap: 8px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	display: flex;
}

.text {
	color: #459f5e;
	text-transform: undefined;
	font-family: Roboto, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
}

.heading {
	color: #1d2023;
	letter-spacing: -0.02em;
	font-family: Roboto, sans-serif;
	font-size: 48px;
	font-weight: 700;
	line-height: 120%;
}

.text-lg-medium-3 {
	color: #1d2023;
	font-family: Roboto, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 28px;
}

.banner-image {
	width: 640px;
	height: 502px;
	grid-column-gap: 32px;
	grid-row-gap: 32px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	display: flex;
	position: relative;
}

.vectors-wrapper-21 {
	z-index: -10;
	/* Ensure this is lower than .vector */
	object-fit: cover;
	display: flex;
	position: absolute;
	top: 50%;
	/* Center vertically */
	left: 50%;
	/* Center horizontally */
	width: 700px;
	/* Adjust size as needed */
	height: 900px;
	/* Adjust size as needed */
	transform: translate(-50%, -50%) rotate(26deg);
	/* Center and rotate by 26 degrees */
}

.shape-abstract-blob-stars-spark-sparks-sparkle-shine-night-pattern-magic-dust-fairy {
	object-fit: cover;
	position: absolute;
	top: -33px;
	left: 69px;
	z-index: 1;
	/* Ensure this is above .vectors-wrapper-21 */
}

.vector {
	width: auto;
	max-width: 100%;
	object-fit: contain;
	position: absolute;
	z-index: 2;
	/* Higher z-index to place it in front */
	top: 50%;
	/* Center vertically */
	left: 50%;
	/* Center horizontally */
	transform: translate(-50%, -50%);
	/* Center the image */
}

.leaf-1 {
	object-fit: cover;
	position: absolute;
	bottom: 0;
	/* Align to the bottom edge of the .banner-image */
	right: 0;
	/* Align to the right edge of the .banner-image */
	top: auto;
	/* Ensure top is auto */
	left: auto;
	/* Ensure left is auto */
}

.leaf-11 {
	object-fit: cover;
	position: absolute;
	top: 0;
	/* Align to the top edge of the .banner-image */
	right: 0;
	/* Align to the right edge of the .banner-image */
	bottom: auto;
	/* Ensure bottom is auto */
	left: auto;
	/* Ensure left is auto */
}

.our-vision {
	width: 100%;
	max-width: 100%;
	grid-column-gap: 92px;
	grid-row-gap: 92px;
	justify-content: flex-start;
	align-items: center;
	padding: 120px 80px;
	display: flex;
	position: relative;
}

.frame-2022 {
	width: 100%;
	height: 482px;
	max-width: 484px;
	justify-content: center;
	align-items: center;
	display: flex;
	position: relative;
}

.vectors-wrapper-48 {
	object-fit: cover;
	flex: 0 auto;
	justify-content: center;
	align-items: center;
	display: flex;
	position: relative;
	z-index: 1;
	/* Lower z-index for vector wrappers */
}

.leaf-2 {
	object-fit: cover;
	position: absolute;
	top: -106.471px;
	left: 111.959px;
}

.vectors-wrapper-49 {
	object-fit: cover;
	flex: 0 auto;
	justify-content: center;
	align-items: center;
	display: flex;
	position: absolute;
	top: -38px;
	left: 0;
	z-index: 1;
	/* Lower z-index for vector wrappers */
}

.frame-1987 {
	z-index: 1;
	width: 100%;
	grid-column-gap: 12px;
	grid-row-gap: 12px;
	border-radius: 8px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	display: flex;
	position: relative;
}

.frame-1988 {
	width: 100%;
	grid-column-gap: 8px;
	grid-row-gap: 8px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	display: flex;
	position: relative;
}

.text-15 {
	color: #459f5e;
	text-transform: undefined;
	font-family: Roboto, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
}

.text-sm-bold-3 {
	color: #1d2023;
	font-family: Roboto, sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 38px;
}

.text-lg-medium-8 {
	color: #1d2023;
	font-family: Roboto, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 28px;
	position: relative;
	width: 75%;
}

.from-the-bottom-up {
	width: 100%;
	max-width: 100%;
	grid-column-gap: 112px;
	grid-row-gap: 112px;
	justify-content: flex-start;
	align-items: center;
	padding: 120px 80px;
	display: flex;
	position: relative;
}

.frame-1990 {
	width: 100%;
	max-width: 447px;
	grid-column-gap: 12px;
	grid-row-gap: 12px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	display: flex;
}

.frame-1989 {
	grid-column-gap: 8px;
	grid-row-gap: 8px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	display: flex;
	position: relative;
}

.text-16 {
	color: #459f5e;
	text-transform: undefined;
	font-family: Roboto, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
}

.text-lg-medium-9 {
	color: #1d2023;
	font-family: Roboto, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 28px;
}

.frame-2023 {
	width: 100%;
	height: 542px;
	max-width: 535px;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	display: flex;
	position: relative;
}

.vectors-wrapper-50 {
	object-fit: cover;
	flex: 0 auto;
	justify-content: center;
	align-items: center;
	display: flex;
	position: relative;
}

.evergreen {
	object-fit: cover;
	position: absolute;
	top: 217.485px;
	left: 487.962px;
}

.vectors-wrapper-51 {
	object-fit: cover;
	flex: 0 auto;
	justify-content: center;
	align-items: center;
	display: flex;
	position: absolute;
	top: 2px;
	left: -7px;
}

.vectors-wrapper-22 {
	object-fit: cover;
	flex: 0 auto;
	justify-content: center;
	align-items: center;
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 600px;
	z-index: -15;
}

.text-sm-bold-2 {
	font-size: 24px;
	font-weight: bold;
	text-align: left;
	margin-bottom: 20px;
	z-index: 2;
	position: relative;
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	width: 80%;
	/* Set the desired width */
	height: auto;
	/* Set the desired height */
	max-width: 1200px;
	/* Maximum width to control stretching on larger screens */
	margin: 0 auto;
	/* Center the grid container */
	position: relative;
	/* Ensure this is relative to position the grid items correctly */
	z-index: 2;
	/* Ensure this is higher than the background image */
	padding-top: 20px;
	/* Add padding to create space between text and grid */
}

.grid-item {
	background-color: #f1faf3;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.content-wrapper {
	display: flex;
	align-items: flex-start;
}

.icons-label {
	object-fit: cover;
	position: relative;
	margin-right: 20px;
	margin-bottom: 10px;
	left: auto;
	border: 2px solid green;
	border-radius: 10%;
	padding: 5px;
}

.text-lg-regular {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 10px;
}

.text-div {
	font-size: 14px;
}

.text-sm-medium {
	opacity: 0.8;
	color: #1d2023;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.our-values-container {
	width: 100%;
	padding: 120px 100px;
	display: flex;
	flex-direction: column;
	/* Ensure content stacks vertically */
	align-items: flex-start;
	/* Align content to the start of the container */
	justify-content: flex-start;
	/* Align content to the start vertically */
	position: relative;
	box-sizing: border-box;
	/* Ensure padding and border are included in total width and height */
	background-color: #f9f9f9;
	/* Background color for visibility */
}

@media (max-width: 1400px) {
	.leaf-1,
	.leaf-11,
	.evergreen,
	.vectors-wrapper-21 {
		display: none;
	}
}

@media (max-width: 900px) {
	.about-banner-section,
	.from-the-bottom-up {
		flex-direction: column;
	}

	.about-banner-section {
		padding: 30px;
	}

	.our-vision {
		flex-direction: column-reverse;
		padding: 120px 80px 0px 80px;
	}

	.vector {
		padding: 50px;
	}

	.frame-1987,
	.frame-1988,
	.frame-1989,
	.frame-1990,
	.heading-and-caption {
		align-items: center;
	}
}

@media (max-width: 768px) {
	.banner-image {
		width: 400px;
	}

	img.leaf-1,
	.shape-abstract-blob-stars-spark-sparks-sparkle-shine-night-pattern-magic-dust-fairy,
	.evergreen,
	img.vectors-wrapper-21,
	img.vectors-wrapper-48,
	img.vectors-wrapper-50 {
		display: none;
	}

	.from-the-bottom-up {
		grid-row-gap: 50px;
	}

	.grid-container {
		grid-template-columns: repeat(1, 1fr);
	}

	.text-sm-bold-2 {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 768px) {
	img.vectors-wrapper-49,
	.vectors-wrapper-51 {
		width: auto;
		max-width: 100%;
		object-fit: contain;
	}
}

@media (max-width: 450px) {
	.heading {
		font-size: 30px;
	}

	.banner-text {
		width: 100%;
		border-radius: 8px;
		position: relative;
		margin-top: 20px;
	}

	.about-banner-section {
		height: auto;
	}

	.leaf-2,
	.vectors-wrapper-49,
	.frame-2022,
	.frame-2023,
	.vector,
	.banner-image {
		width: 90%;
	}

	.about-banner-section,
	.our-vision,
	.from-the-bottom-up {
		padding: 20px;
	}

	.leaf-2 {
		display: none;
	}

	.frame-1987 {
		align-items: flex-start;
	}

	.frame-1988 {
		align-items: flex-start;
	}

	.our-values-container {
		padding: 10px;
	}
}

/* end about page */

/* getting started page */
.desktop-getting-started {
	width: 100%;
	max-width: 100%;
	/* Changed from 1280px */
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	display: flex;
	margin: 0 auto;
	/* Add this */
}

.frame-1528 {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 80px;
	display: flex;
	gap: 32px;
}

.frame-1519 {
	width: 100%;
	max-width: 256px;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	padding-top: 152px;
	display: flex;
}

.frame-1518 {
	grid-column-gap: 12px;
	grid-row-gap: 12px;
	flex: 0 auto;
	justify-content: flex-start;
	align-items: center;
	display: flex;
}

.vectors-wrapper-23 {
	width: 24px;
	height: 24px;
	object-fit: cover;
	justify-content: center;
	align-items: center;
	display: flex;
}

.text-2 {
	color: #1d2023;
	font-family: Roboto, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 100%;
}

.help-center-links {
	grid-column-gap: 24px;
	grid-row-gap: 24px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	display: flex;
}

.help-center-link {
	grid-column-gap: 8px;
	grid-row-gap: 8px;
	color: #707070;
	-webkit-text-stroke-color: #707070;
	flex: 0 auto;
	justify-content: flex-start;
	align-items: center;
	display: flex;
}

.icon-help-center {
	-webkit-text-fill-color: inherit;
	object-fit: cover;
	background-color: rgba(0, 0, 0, 0);
	background-clip: border-box;
}

.text-help-center-link {
	color: #707070;
	-webkit-text-fill-color: inherit;
	background-clip: border-box;
	font-family: Roboto, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 100%;
}

.vectors-wrapper-25 {
	width: 28px;
	height: 28px;
	object-fit: cover;
	justify-content: center;
	align-items: center;
	display: flex;
}

.text-4 {
	color: #707070;
	font-family: Roboto, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 100%;
}

.frame-1526 {
	width: 100%;
	grid-column-gap: 80px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	padding-top: 60px;
	display: flex;
}

.frame-1746 {
	width: 100%;
	grid-column-gap: 32px;
	grid-row-gap: 32px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	display: flex;
}

.text-xs-medium {
	color: #1d2023;
	font-family: Roboto, sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 32px;
}

.text-5 {
	color: #1d2023;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 170%;
}

.mockup {
	box-shadow: none;
	object-fit: contain;
	border: 7.71297px #205451;
	border-radius: 19.2824px;
	align-self: auto;
	padding-left: 0;
}

/* App Guide Section Styles */
.app-guide {
	padding: 60px 0;
	background: var(--color-background);
}

.app-guide .container {
	max-width: 1200px;
}

.guide-modules {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-top: 40px;
}

.module {
	background: #fff;
	padding: 30px;
	border-radius: 12px;
	text-align: center;
	box-shadow: var(--shadow-md);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.module:hover {
	transform: translateY(-5px);
}

.module i {
	font-size: 2.5rem;
	color: var(--color-primary);
	margin-bottom: 20px;
	transition: transform 0.3s ease;
}

.module:hover i {
	transform: scale(1.1);
}

.module h3 {
	color: var(--color-primary);
	margin: 0 0 15px 0;
	font-size: 1.5rem;
}

.module p {
	color: #666;
	margin: 0 0 20px 0;
	line-height: 1.6;
}

.new-badge {
	background: #ff4757;
	color: white;
	padding: 3px 8px;
	border-radius: 12px;
	font-size: 0.8rem;
	margin-left: 8px;
	display: inline-block;
}

.module-link {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: bold;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	transition: color 0.3s ease;
}

.module-link:hover {
	color: #2b802b;
}

.module-link i {
	font-size: 1rem;
	margin: 0;
}

.module-link:hover i {
	transform: translateX(5px);
}

/* FAQ Section Styles */
.faq-section {
	padding: 60px 0;
	background: var(--color-background);
}

.faq-section .container {
	max-width: 800px;
	width: 90%;
	margin: 0 auto;
	background: transparent;
	box-shadow: none;
	padding: 0;
}

.faq-section h2 {
	color: var(--color-primary);
	text-align: center;
	margin-bottom: 40px;
	font-size: 2rem;
}

.faq-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.faq-item {
	background: #fff;
	border-radius: 12px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.faq-question {
	padding: 20px;
	cursor: pointer;
	position: relative;
	font-weight: 600;
	color: var(--color-primary);
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background-color 0.3s ease;
}

.faq-question:hover {
	background-color: #f8fff8;
}

.faq-question::after {
	content: "+";
	font-size: 24px;
	color: var(--color-primary);
	transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
	transform: rotate(45deg);
}

.faq-answer {
	padding: 0;
	max-height: 0;
	overflow: hidden;
	color: #666;
	line-height: 1.6;
	transition: all 0.3s ease-in-out;
	border-top: 1px solid #eee;
	opacity: 0;
}

.faq-item.active .faq-answer {
	padding: 20px;
	max-height: 300px;
	opacity: 1;
}

@media (max-width: 768px) {
	.faq-section .container {
		width: 95%;
	}

	.faq-question {
		font-size: 0.95rem;
		padding: 15px;
	}

	.faq-answer {
		font-size: 0.9rem;
	}

	.faq-item.active .faq-answer {
		padding: 15px;
	}
}

/* Update the side navigation styles */
.frame-1519 {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	padding: 24px;
	margin: 20px 0px;
	width: 280px;
	position: sticky;
	/* Add this */
	top: 20px;
	/* Add this */
}

.frame-1518 {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 8px;
	background: var(--color-background);
	margin-bottom: 24px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.frame-1518:hover {
	transform: translateX(-4px);
	background: #d9f0d9;
}

.help-center-links {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.help-center-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 8px;
	transition: all 0.2s ease;
	text-decoration: none !important;
	color: #454545;
	width: 100%;
}

.help-center-link:hover,
.help-center-link:focus {
	background: var(--color-background);
	color: var(--color-primary);
	transform: translateX(4px);
}

.help-center-link.active {
	background: var(--color-background);
	color: var(--color-primary);
	font-weight: 500;
}

.icon-help-center {
	font-size: 18px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: currentColor;
	/* Use current text color */
	transition: color 0.2s ease;
}

.text-help-center-link,
.text-4 {
	font-size: 15px;
	font-weight: 400;
	color: inherit;
	/* Use parent element's color */
	transition: color 0.2s ease;
}

/* Back button styles */
.frame-1518 {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 8px;
	background: var(--color-background);
	margin-bottom: 24px;
	cursor: pointer;
	transition: all 0.2s ease;
	color: #454545;
	text-decoration: none !important;
}

.frame-1518:hover {
	transform: translateX(-4px);
	background: #d9f0d9;
	color: var(--color-primary);
}

.text-2 {
	color: inherit;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 500;
}

/* Add these new styles and override any conflicting styles */
.help-center-links a,
.help-center-links a:hover,
.help-center-links a:focus,
.help-center-links a:visited {
	text-decoration: none !important;
	color: inherit;
}

.no-underline-link {
	text-decoration: none !important;
	color: inherit;
}

/* Also update the help-center-link styles */
.help-center-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 8px;
	transition: all 0.2s ease;
	text-decoration: none !important;
	color: #454545;
	width: 100%;
}

/* Update the frame-1518 styles */
.frame-1518,
.frame-1518:hover,
.frame-1518:focus {
	text-decoration: none !important;
	color: inherit;
}

/* Add this to ensure no text-decoration on any anchor tags within the side nav */
.frame-1519 a {
	text-decoration: none !important;
}

/* Add these styles for mobile responsiveness */
@media (max-width: 768px) {
	#side-nav-placeholder {
		display: none;
		/* Hides the side nav on mobile */
	}

	.frame-1528 {
		padding: 0 20px;
	}

	.frame-1526 {
		width: 100%;
		padding: 20px 0;
	}

	.desktop-getting-started {
		padding: 0;
	}
}

@media (min-width: 768px) and (max-width: 1040px) {
	.identity,
	.explore,
	.journal {
		display: block !important;
		position: relative;
	}
	dfdksfhk
}