:root {
	/* Define color variables for light and dark themes */
	--bg-color: white;
	--text-color: black;
	--title-color: rgb(3, 46, 162);
	
	--nav-hover-color: #dedede;
}

body.dark-mode {
	--bg-color: black;
	--text-color: white;
}

html, body {
  height: 100%;
  margin: 0;
}



/* Navbar custom transparency */
.navbar {
	background-color: color(display-p3 0.09 0.2 0.188); /* Slightly transparent */
	backdrop-filter: blur(10px); /* Smooth effect on the background */
	position: fixed; /* Fixed at the top */
	width: 100%; /* Cover the full width */
	z-index: 1030; /* High z-index to stay on top */
	text-shadow: darkblue;
}

.navbar-brand {
	color: white;
}

.nav-link {
	color: white;
}

.nav-link:hover {
	color: var(--nav-hover-color);
}

.navbar-brand {
	color: white;
	transition: color 0.2s ease;
}

.navbar-brand:hover {
	color: var(--nav-hover-color);
	text-decoration: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.branded-bg {
	background-color: color(display-p3 0.533 0.643 0.522)
}

/* .custom-toggler .navbar-toggler-icon {
	background-color: white;
} */

.custom-toggler, .custom-toggler .navbar-toggler-icon {
	color: white;
	border-color: white; /* If the button has a border you wish to change */
}


.hero-section {
	background-image: url('images/hero-alt2.png');
	background-size: cover;
	background-position: center;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: white;
	position: relative; /* Required for layering */
	overflow: hidden;
	padding-top: 8vh; /* Try between 8vh–15vh */
	 padding-bottom: 15vh;
}

.hero-section::before {
	content: '';
	position: absolute;
	inset: 0; /* top: 0; bottom: 0; left: 0; right: 0 */
	background-color: rgba(0, 0, 0, 0.2); /* Adjust opacity here */
	z-index: 1; /* Below your text */
}

.hero-section .container {
	position: relative;
	z-index: 2; /* Above the overlay */
}


/* Styling the main text */
.hero-text {
	position: relative; /* Relative positioning */
	z-index: 2; /* Above the dimming layer */
	color: white;
	font-size: 4rem; /* Large text size */
	padding-top: 100px; /* Adjust based on navbar height */
	text-align: center; /* Center the text */
}


.hero-title {
  max-width: 1200px; /* Adjust the max width as needed */
  margin: 0 auto;
  padding: 20px;
  color: white;
}

.app-screenshot {
  position: absolute;
  left: 10%; /* Adjust the position as needed */
  top: 50%;
  transform: translateY(-50%);
  width: 20%; /* Adjust the width as needed */
}

.title {
	color: var(--title-color);
	font-size: 5em;
}

.product-image img {
	max-width: 100%; /* Adjust the width as necessary */
	height: auto; /* Maintain aspect ratio */
	position: relative; /* Relative positioning */
	z-index: 2; /* Above the dimming layer */
	/* Add more styling as per your design */
}

.secondary-product-image img {
	max-width: 75%; /* Adjust the width as necessary */
	height: auto; /* Maintain aspect ratio */
	position: relative; /* Relative positioning */
	z-index: 2; /* Above the dimming layer */
	/* Add more styling as per your design */
}

.nav-app-icon {
	height: 28px; /* or any other height */
	width: auto; /* maintain aspect ratio */
	padding-right: 10px;
	padding-bottom: 4px;
}

.app-store-badge {
	width: 160px; /* or whatever size you prefer */
	height: auto; /* maintains the aspect ratio */
}

.subtitle {
	font-size: 2rem; /* Large text size */
}

.main-video {
	height: 400px; /* Restrict the height to 300px or any other value */
	width: auto; /* Maintain the aspect ratio */
}



.bg-black {
	background-color: #000; /* black */
}

.text-white a { /* Ensuring all links are also white */
	color: #fff; /* white */
}

.content-wrap {
	flex: 1; /* Grow to absorb all space except what the footer takes */
}

.pt-10 {
	padding-top: 400px;
}

.nav-padding-top {
	padding-top: 56px;
}

.footer {
	min-height: 120px;
}

.footer a {
	color: #fff; /* white */
	
}

.footer p {
	color: #fff; /* white */
}

.screenshot {
	background-color: color(display-p3 0.737 0.831 0.711);
}
.screenshot-alt {
	background-color: color(display-p3 0.9 0.933 0.891);
}


.legal-container {
	background-color: color(display-p3 0.083 0.176 0.157);
}

.legal {
	color: rgb(162, 161, 161);
	padding: 20px;
	text-align: center;
    font-size: 0.75rem;       /* reset the default margin so it doesn’t push your layout around */
}

/*nice boxes */
.custom-box {
	padding: 20px;
	background-color: #f8f9fa; /* Light gray background */
	position: relative;
	text-align: center;
	margin-bottom: 30px; /* Space between the rows */
	border: 2px solid #2575fc; /* Blue border */
}

.custom-box:before {
	content: '';
	position: absolute;
	bottom: -22px; /* Slightly lower than the :after pseudo-element to create the border effect */
	left: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 22px 22px 0 22px; /* Slightly larger than the :after pseudo-element */
	border-color: #2575fc transparent transparent transparent; /* Border color for the stroke effect */
	transform: translateX(-50%);
	z-index: -1; /* Ensure it sits behind the :after pseudo-element */
}


.custom-box:after {
	content: '';
	position: absolute;
	bottom: -20px; /* Adjust based on the size of the point */
	left: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 20px 0 20px; /* Adjust size of the point here */
	border-color: #f8f9fa transparent transparent transparent; /* Same as box bg */
	transform: translateX(-50%);
	
}


.icon {
	font-size: 3rem; /* Large icon size */
	margin-bottom: 10px; /* Space between icon and text */
}

h3 {
	margin-bottom: 10px; /* Space between header and paragraph */
}

@media (max-width: 575.98px) { /* targeting only the sizes below the 'sm' breakpoint */
  .product-image img {
	 display: none;
  }
}
/* Adjust text color for light and dark themes */
body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: 'Lato', sans-serif;
}

#email-signup-message {
  display: none;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-weight: 500;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.9);
  color: #212529;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Override color for success */
#email-signup-message.text-success {
  border-left: 4px solid #198754; /* Bootstrap success green */
}

/* Override color for error */
#email-signup-message.text-danger {
  border-left: 4px solid #dc3545; /* Bootstrap danger red */
}