:root {
	/* CSS HEX */
--eggplant: #544355ff;
--black: #000000ff;
--black-2: #000000ff;
--black-3: #000000ff;
--moonstone: #68BCCEff;

/* CSS HSL */
--eggplant: hsla(297, 12%, 30%, 1);
--black: hsla(0, 0%, 0%, 1);
--black-2: hsla(0, 0%, 0%, 1);
--black-3: hsla(0, 0%, 0%, 1);
--moonstone: hsla(191, 51%, 61%, 1);

--color-mustard: #FFD700;
  --color-pink: #FADADD;
  --color-logo: #68BCCE;
  --color-peach: #F9E8E2;
  --color-purple: #9558cb;
  --color-apricot: #FFE5B4;
  --color-rose: #FF8FA3;
  --color-logo-text: #44180f;
  --color-text-copy: #47444B;
  --color-mint: #C4F1E0;
  --color-baby-blue: #BDE0FE;
  --color-yellow: #FFF8DC;
  --blush: #FADADD;
  --peach: #F9E8E2;
  --lavender: #D6C1E9;
  --apricot: #FFE5B4;
  --mint: #C4F1E0;
  --baby-blue: #BDE0FE;
  --yellow: #FFF8DC;
  --pink: #FF8FA3;
  --text-dark: #213547;
  --text-light: #ffffff;
  --shadow-sm: 0 2px 8px rgba(149, 88, 203, 0.10), 0 1.5px 6px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(149, 88, 203, 0.13), 0 2px 8px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 32px rgba(149, 88, 203, 0.16), 0 4px 16px rgba(0,0,0,0.09);
  --radius-sm: 0.75rem;
  --radius-md: 1.5rem;
  --radius-lg: 2.5rem;
  --radius-xl: 4rem;
  --transition: all 0.3s cubic-bezier(.68,-0.55,.27,1.55);
}

			/* Header Styles */
.header {
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-sm);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo Styles */
.logo {
  display: flex;
  align-items: center;
}

.logo a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.logo-image {
  height: 180px;
  width: auto;
}

.logo h1 {
  color: var(--color-logo);
  font-size: 1.75rem;
  margin: 0;
  letter-spacing: -0.5px;
  font-family: 'Poppins', sans-serif;
}

/* Navbar Styles */
.navbar {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

/* Button Styles */
.btn, .button, button, input[type="button"], input[type="submit"] {
  display: inline-block;
  background: linear-gradient(135deg, var(--moonstone, #68BCCE) 0%, var(--color-mint) 100%);
  color: var(--eggplant, #544355);
  border: none;
  border-radius: var(--radius-md);
  padding: 0.85rem 2rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  text-align: center;
  font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
  font-size: 1.12em;
  margin: 0.4em 0.2em;
}

.btn-primary {
  background-color: var(--pink);
}

			/* Headline & Logo font */
			#logo h1,
			h1, h2, h3, h4, h5, h6, .logo h1 {
      font-family: 'Poppins', 'Open Sans', Arial, sans-serif !important;
      letter-spacing: 0.02em;
				color: var(--color-logo-text);
			}

			/* Softer background and accents */
			body {
  background: linear-gradient(135deg, var(--color-logo) 0%, var(--color-mint) 100%) !important;
  font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
  font-size: 17px;
  color: var(--color-text-copy);
  font-weight: 400;
  line-height: 2.1em;
  padding: 0 0 2em 0;


				background: linear-gradient(135deg, var(--color-logo) 0%, var(--color-logo) 100%) !important;
			}
			#banner, .box.feature, .card, .testimonial-box, .feature-grid {
        background: linear-gradient(120deg, var(--color-logo) 60%, var(--color-mint) 100%);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        padding: 2.2em 2em 1.7em 2em;
        margin-bottom: 2em;


				background: var(--color-logo);
				border-radius: 1.5em;
			}

			#banner h2, .box.feature h2 {
				color: var(--color-logo-text);
			}
			.button, .button.alt {
				background: var(--color-rose);
				color: #fff;
				border: none;
				transition: background 0.2s;
			}
			
		/* Logo image styling */

        #logo span {
            color: var(--color-logo-text);
            font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
            font-size: 2.7em;
            color: var(--color-logo-text);
            font-weight: 800;
            margin-left: 0.2em;
        }

/* Header Nav */
#nav ul {
	display: flex;
	gap: 2em;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}
#nav ul li {
	margin: 0;
	padding: 0;
}
#nav ul li a, #nav ul li button, #nav ul li .button {
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 1.15em;
	color: #1F2937;
	background: none;
	border: none;
	padding: 0.3em 0.7em;
	border-radius: 0.7em;
	transition: background 0.2s, color 0.2s;
	text-decoration: none;
	font-weight: 600;
	
}
#nav ul li a:hover, #nav ul li .button:hover {
	background: #fff;
	color:#000;
}
#nav ul li .button.cta {
	background: var(--color-rose);
	color: #fff;
	font-weight: 700;
	padding: 0.4em 1.3em;
	border-radius: 1.2em;
	box-shadow: 0 2px 10px 0 var(--color-pink);
	margin-left: 0.5em;
}
#nav ul li .button.cta:hover {
	background: var(--color-purple);
	color: #fff;
}

/* Improved headline color for contrast */
#banner h2, .box.feature h2, .hero-text h1 {
	color: #000 !important;
}


/* Hero section */
#hero-section {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-apricot);
	border-radius: 2em;
	box-shadow: 0 4px 32px 0 var(--color-peach);
	margin-top: 2em;
	padding: 2.5em 2em 2em 2em;
	min-height: 350px;
}
.hero-flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2.5em;
}
.hero-text {
	max-width: 620px;
}
.hero-text h1 {
	font-size: 2.5em;
	color: #000;
	margin-bottom: 0.6em;
	font-weight: 700;
}
.hero-sub {
	font-size: 1.25em;
	color: var(--color-text-copy);
	margin-bottom: 1.4em;
}
.hero-image {
	flex: 1 1 320px;
	text-align: center;
}

.hero-image img {
  width: 100%;
  max-width: 420px;
}

/* Feature grid */
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5em;
  justify-content: center;
  background: linear-gradient(120deg, var(--color-baby-blue) 20%, var(--color-apricot) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2em 1em 1em 1em;


	display: flex;
	flex-wrap: wrap;
	gap: 2em;
	justify-content: center;
}
.box.feature {
	background: var(--color-apricot);
	border-radius: 1.5em;
	box-shadow: 0 2px 16px 0 var(--color-peach);
	padding: 1.5em 1.5em 1.2em 1.5em;
	flex: 1 1 320px;
	max-width: 350px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.feature-img {
	width: 100%;
	max-width: 250px;
	height: auto;
	border-radius: 1em;
	margin-bottom: 1.1em;
	box-shadow: 0 2px 12px 0 var(--color-purple);
}
.box.feature h2 {
	color: var(--color-rose);
	font-size: 1.45em;
	margin-bottom: 0.5em;
	font-weight: 700;
}
.box.feature p {
	color: var(--color-text-copy);
	font-size: 1.2em;
}

@media (max-width: 900px) {
	.hero-flex {
		flex-direction: column;
		gap: 1.5em;
	}
	.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5em;
  justify-content: center;
  background: linear-gradient(120deg, var(--color-baby-blue) 20%, var(--color-apricot) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2em 1em 1em 1em;


		flex-direction: column;
		gap: 1.5em;
		align-items: center;
	}
	.box.feature {
		max-width: 100%;
	}
}
.testimonials-grid {
	display: flex;
	gap: 2em;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 1.5em;
}
.testimonial-box {
  background: linear-gradient(120deg, #fff 60%, var(--color-mint) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2.5em 2em 2em 2em;
  max-width: 350px;
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2em;


	background: #fff;
	border-radius: 1.2em;
	box-shadow: 0 2px 16px 0 var(--color-peach);
	padding: 2em 1.5em 1.5em 1.5em;
	max-width: 350px;
	flex: 1 1 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.testimonial-quote {
  font-size: 1.15em;
  color: var(--color-purple);
  font-style: italic;
  margin-bottom: 1em;
  text-align: center;
  border-radius: var(--radius-md);
  background: var(--color-yellow);
  padding: 1em 1.5em;
  box-shadow: var(--shadow-sm);


	font-size: 1.15em;
	color: var(--color-purple);
	font-style: italic;
	margin-bottom: 1em;
	text-align: center;
}
.testimonial-author {
	font-size: 1em;
	color: var(--color-rose);
	font-weight: 600;
	text-align: center;
}

@media (max-width: 900px) {
	.testimonials-grid {
		flex-direction: column;
		gap: 1.5em;
		align-items: center;
	}
	.testimonial-box {
  background: linear-gradient(120deg, var(--color-pink) 60%, var(--color-mint) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2.5em 2em 2em 2em;
  max-width: 350px;
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2em;


		max-width: 100%;
	}
}

.footer-modal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #000;
  text-decoration: underline;
  cursor: pointer;
}



		input[type="button"]:active,
		input[type="submit"]:active,
		input[type="reset"]:active,
		button:active,
		.button:active {
			background: none;
		}