/* General Styles */
  * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Lato", sans-serif;
	font-weight: 300;
  }

  
  body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2355a5d3' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-size: repeat;
	background-position: center;*/
	opacity: .4; 
	z-index: -1; 
	pointer-events: none; 
  }
  

  body {
 
     background-color: white;
  }
  
   header {
	margin-top: 75px;
   }

	header div {
		text-align: center;
	}

	header h1 {
		font-size: 32pt;
		font-weight: 500;
	}

  .container {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
  }
  
  h3, h4 {
	font-size: 24px;
	margin-bottom: 15px;
  }

  /* MEET REMEE */

  .meet-remee .container {
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 40px;

  }
  
  .feature-text-dark {
	
	flex: 1;
	padding-right: 20px;
  }
  
  .feature-text-dark h4 {
	font-size: 24px;
	
  }
  
  .feature-text-dark p {
	margin-bottom: 20px;
	line-height: 1.6;

  }
  
  .feature-image img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
  }
  
  .order-btn {
	display: inline-block;
	margin-top: 15px;
	padding: 20px 20px;
	background-color: #ffd400;
	color: #111;
	text-decoration: none;
	border-radius: 35px;
	height: 60px;

  }

  .dark {
	width: 195px;
	color:white;
	font-size: 21px;
	font-weight: 600;
	background-color:#252525;
	display: flex;
	justify-content: space-between;
	line-height: 15px;
  }
  .buyarrow {
	color:  #ffd400;
	font-weight: 600;
	text-align:right
	font
  }

  .order-btn:hover {
	background-color: #f2ebc7;
  }

  .dark:hover {
	background-color: #ffd400;
	color: black;
  }

  .dark:hover .buyarrow {

	color: black;
  }
  
  /* What's Lucid Dreaming Section */
  .lucid-dreaming .container {

	padding: 30px;

	display: flex;
	justify-content: space-between;

  }
  
  .feature-text-left {
	flex: 1;
	text-align: left;
	padding-right: 20px;
  }
  
  .feature-text-right {
	flex: 2;
	text-align: left;
  }
  
  .feature-text-right p {
	margin-bottom: 10px;
  }
  
  .feature-text-right a {
	color: #47aed5;
	text-decoration: none;
  }
  
  .feature-text-right a:hover {
	text-decoration: underline;
  }

/* Sleep Your Way Section */
.sleep-your-way {
  padding: 30px;
  border-radius: 10px;
  margin-bottom: 30px;
}

  
  
  /* At a Glance Section */
  .at-a-glance {
	background-color: #fff;
	padding: 40px 20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	text-align: left;
  }
  
  .at-a-glance ul {
	text-align: left;
	list-style-type: disc;
	padding-left: 20px;
  }
  
  .at-a-glance img {
	max-width: 100%;
	margin-top: 20px;
  }
  
/* Feature Layout */
/* Feature Layout */
.features .feature,
.feature-row,
.no-image {

  display: flex;
  align-items: start;
  justify-content: space-between;
  padding: 20px;
  margin-bottom: 30px;

}
  .feature-row {
	display: flex;
	flex-direction: row;
  }
  
  .feature-text {
	flex: 1;
	padding-right: 20px;
  }
  
  .feature-image {
	flex: 1;
	text-align: right;
  }
  
  .feature-image img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
  }
  
  .feature p {
	font-size: 16px;
	line-height: 1.6;
	color: #333;
  }
  
  @media (max-width: 768px) {
	.feature-row {
	  flex-direction: column;
	}
  
	.feature-text {
	  padding-right: 0;
	  margin-bottom: 20px;
	}
  
	.feature-text-left {
	  text-align: center;
	}
  
	.feature-text-right {
	  text-align: center;
	}
  
	.feature-image {
	  text-align: center;
	}
  }

/* Recall, Clarity, Control Section */


.recall-clarity-control {
	position: relative;
	padding: 0;
	height: 450px;
  }

  .sliding-section .container {
	min-height: 200px;
  }
  
  .recall-clarity-control .sliding-section, .threem .sliding-section{
	position: relative;
	width: 100%;
	height: 300px;  /* Adjust height as needed */
	background-size: cover;
	background-position: center;
	padding: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0px; /* No rounded corners on the background */
  }
  
  .recall-clarity-control .feature-row, .threem .feature-row {
	display: none; /* Hide all content rows by default */
	color:black;
	background-color: transparent;
	box-shadow: none;
  }
  
  .recall-clarity-control .feature-row.active, .threem .feature-row.active {
	display: block; /* Only the active row is displayed */
  }
  
  /* Text Styling for Recall, Clarity, Control Section */
  .recall-clarity-control .feature-text h4, .threem .feature-text h4  {
	font-size: 24px; /* Larger heading size */
	color: black; /* White text */
	margin-bottom: 20px;

  }
  .recall-clarity-control .feature-text h4 div  {
	min-width: 450px;
  }
  
  .recall-clarity-control .feature-text p, .threem .feature-text p {
	font-size: 24px; /* Larger paragraph text */
	color: black; /* White text */
	line-height: 1.6; /* Adjust for readability */
  }
  
  /* Remove any background and shadow from the container */
  .recall-clarity-control .container,  .threem .container {
	background: none; /* No white background */
	box-shadow: none; /* No drop shadow */
  }
  
  /* Buttons for Manual Sliding */
  .recall-clarity-control .buttons {
	margin-top: 20px;
	text-align: center;
  }
  
  .recall-clarity-control .buttons button {
	padding: 10px 20px;
	margin: 5px;
	font-size: 16px;
	cursor: pointer;
	background-color: #ffd400;
	border: none;
	border-radius: 5px;
  }
  
  .recall-clarity-control .buttons button:hover {
	background-color: #f2ebc7;
  }

  footer p {
	text-align: center;
  }

  .slider-container {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	height: 400px; /* Fixed height for the container */
	margin-bottom:25px;
  }
  
  .slider {
	display: flex;
	transition: transform 1s ease-in-out;
  }
  
  .slide {
	position: relative;
	min-width: 100%;
  }
  
  .slide .bg {
	position: relative;
	width: 100%;
	height: 200px; /* Fixed height for images */
	object-fit: cover; /* Ensures the image covers the entire container */
	opacity:1;
	filter: blur(3px);
	filter:saturate(.6) blur(3px);
  }

  .slide .logo {
	position:absolute;
	bottom: 20px;
	right: 20px;
	width: 75px !important;
	height: 75px !important;
	opacity: 1;
  }
  
  .slide-text {
	position: absolute;
	bottom: 20px;
	left: 20px;
	color: white;
	background-color: rgb(0,0,0,.4);
	padding: 20px;
	width: 45%;
  }
  
  .slide-text h2 {
	font-size: 22pt;
	font-weight: 500;
	margin: 0;
  }
  
  .slide-text p {
	font-size: 14pt;
	margin-top: 10px;
  }

  /* Hidden state for sections */
/* Hidden state for sections */
.section-hidden {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  /* When in view, sections animate in */
  .section-visible {
	opacity: 1;
	transform: translateY(0);
  }

  .bold {
	font-weight: 500;
  }

  .bolder {
	font-weight: 700;
  }

  .red {
  color:crimson;
  }

  .reverse {
	color: white;
	padding: 2px 5px;
	background-color:black;
	border-radius: 5px;
  }

	.black {
		color: black;
	}

  .blue {
	color:  rgb(0, 170, 255);
  }

  .yellow {
	color: #ffaa00;
  }

  .cream {
	color: #fff8befb;
  }

  .word {
	color: #444;
	transition: color 0.2s;
  }

  .multiply {
	mix-blend-mode: multiply !important;
  }

  .helpsyou {
	font-size: 32pt;
  }


  canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1; /* Ensure it is behind all other content */
  }

      /* Navigation Bar Styles */
	  nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 30px;
		background-color: rgba(255,255,255,1);
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
	  }
  
	  nav img {
		width: 100px;
	  }
  
	  .nav-menu {
		display: flex;
		gap: 20px;
		list-style: none;
	  }
  
	  .nav-menu a {
		text-decoration: none;
		color: #333;
		font-weight: 600;
		font-size: 16px;
	  }
  
	  /* Burger Menu */
	  .burger {
		display: none;
		cursor: pointer;
		flex-direction: column;
		gap: 4px;
	  }
  
	  .burger div {
		width: 25px;
		height: 3px;
		background-color: #333;
	  }
  
	  @media (max-width: 768px) {
		.nav-menu {
		  display: none;
		  position: absolute;
		  top: 60px;
		  right: 0;
		  flex-direction: column;
		  background-color: white;
		  width: 200px;
		  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
		}
  
		.nav-menu.active {
		  display: flex;
		}
  
		.burger {
		  display: flex;
		}
		li {
			padding: 3px;
		}
	  }


	  #specs li {
		line-height: 30px;
	  }