/*
	Landing Page by Vălu Dimitrie and David Sedgwick, Predictive Equations Dev Team.
*/


/* TABLE OF CONTENTS

	1. Import section
	2. Basic styles
	3. Header
	4. Service Icons
	5. Subscribe
	6. Contact
	7. Footer
	8. Responsive

*/



/* 1. IMPORT SECTION */

/* 2. BASIC STYLES */
	html {
		background-color: #DFDFDF;
		position:relative;
		content: center;
		width:auto;
	}
	@media only screen and (max-width: 900px) {

		html {
		  background-color: #DFDFDF;
		  display:flex;
		  position:relative;
		  content: center;
		  width:auto;
		}
	}
	/* Dark Mode */
	.dark-mode {
		background-color: #000000;
		color: #FFFFFF;
	}

	/* Dark Mode Toggle */
	.dark-mode-toggle {
		position: absolute;
		top: 20px;
		right: 20px;
	}

	/* 2.5 NAVBAR */
	.navbar-section {
		background-color: #000000;
		padding: 10px 0;
		z-index: 9999;
	}

	.navbar {
		list-style-type: none;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 0;
		padding: 0;
		position: relative;
		z-index: 9999;
	}

	.navbar .dark-mode-toggle-wrapper {
		position: absolute;
		top: 10px;
		right: 10px;
		color: #FFFFFF; /* Set text color to white */
		font: 15px/1.5 Lato, "Trebuchet MS", sans-serif;
		z-index: 9999;
	}

	/* Dark Mode */
	.dark-mode .custom-text-container {
		color: #FFFFFF;
	}

	/* Dark Mode - Custom Text Container Paragraph */
	.dark-mode .custom-text-container p {
		margin-bottom: 10px;
		max-width: 700px; /* Adjust the desired width */
		font: 16px/1.5 Lato, "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
		color: #FFFFFF; /* Set font color to white */
	}

	/* Dark Mode - Contact Content Paragraph */
	.dark-mode .contact-content p {
		color: #FFFFFF; /* Set text color to white */
	}

	/* Dark Mode - Contact Content Paragraph */
	.dark-mode .founders-description p {
		color: #FFFFFF; /* Set text color to white */
	}


	.navbar li {
		margin: 0 10px;
		z-index: 9999;
		margin-bottom: .25%;
	}

	.navbar li a {
		display: inline-block;
		padding: 8px 16px;
		width: 140px; /* Adjust the width as needed */
		border-radius: 5px;
		text-decoration: none;
		font: 13.8px/1.5 Lato, "Trebuchet MS", sans-serif;
		color: #000000;
		background-color: #00AEEF;
		transition: background-color 0.3s ease;
		text-align: center; /* Center the text */
		z-index: 9999;
	}

	.navbar li a:hover {
		background-color: #008EC3;
		z-index: 9999;
	}

	/* Update the styles for the toggle bar */
	.toggle-bar {
		display: inline-block;
		width: 1px;
		height: 16px; /* Adjust the height as needed */
		background-color: #00AEEF;
		margin: 0 10px; /* Add some spacing around the bar */
	}

	/* Update the styles for the toggle bar */
	.toggle-bar {
		display: inline-block;
		width: 100px; /* Adjust the width of the toggle bar as needed */
		height: 6px; /* Adjust the height of the toggle bar as needed */
		background-color: #00AEEF;
		border-radius: 10px; /* Add border radius for rounded corners */
		margin-right: 10px; /* Add some spacing between the bar and icons */
	}

	/* Update the styles for the moon and sun icons */
	.toggle-icon {
		position: relative;
		top: 2px;
	}

	.moon-icon {
		float: left; /* Float the moon icon to the right */
	}

	.sun-icon {
		float: right; /* Float the sun icon to the left */
	}

	/* Hide the checkbox input */
	#darkModeToggle {
		display: none;
	}

	/* Add dropdown styles */
	/* Add dropdown styles */
	.dropdown,
	.dropdown-toggle::after,
	.dropdown-menu,
	.dropdown:hover .dropdown-menu,
	.dropdown-menu li,
	.dropdown-menu li a,
	.dropdown-menu li a:hover {
	z-index: 9999;
	}

	.dropdown {
	position: relative;
	}

	.dropdown-toggle::after {
	content: '\25BC';
	margin-left: 5px;
	}

	.dropdown-menu {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease-in, transform 0.5s ease-out, background-color 0.3s ease-in-out; /* Adjust transition properties */
	position: absolute;
	left: 50%;
	transform: translate(-50%, 10px); /* Adjust the translate value as needed */
	background-color: none; /* Set a background color for the dropdown menu */
	min-width: 140px;
	border-radius: 10px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	padding-top: 10px;
	margin-top: -3%; /* Add margin-top property */
	top: calc(100% + 5px); /* Adjust the top value as needed */
	}

	.navbar li:hover .dropdown-menu,
	.dropdown-menu:hover {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0); /* Adjust the translate value as needed */
	background-color: none; /* Add background color for hover */
	/* Remove the transition-delay property here */
	transition-delay: 0s, 0s, 0.3s; /* Adjust the delay for opacity transition */
	}

	.dropdown-menu li {
	padding: 7px;
	}

	.dropdown-menu li a {
	display: block;
	text-decoration: none;
	color: #000000;
	}

	.dropdown-menu li a:hover {
	background-color: #f1f1f1;
	}
	
/* 3 PRELOADER STYLES */
.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 9995;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity 1s linear;
  }
  
  /* Hide the preloader once the page is loaded */
  .preloader.loaded {
	opacity: 0;
	pointer-events: none;
  }
  
  .loading-content {
	position: relative;
	text-align: center;
  }
  
  .loading-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
	color: #00AEEF;
	font-size: 12px;
  }

/* 4. HEADER */
/* Desktop styles */
	.black-box {
		background-color: rgba(192, 192, 192, 0.8);
		height: 350px; /* Adjust the height as needed */
		width: 100%;
		position: relative;
		top: 0;
		left: 0;
		z-index: 9998;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		opacity: 0; /* Set initial opacity to 0 */
		animation: fade-in 1s forwards; /* Apply the fade-in animation */
		margin-top:0 px;
		margin-bottom:0 px;
	}
	
	@keyframes fade-in {
		from {
		opacity: 0; /* Start with opacity 0 */
		}
		to {
		opacity: 1; /* End with opacity 1 */
		}
	}	

	.header-overlay {
		position: absolute;
		transform: translate(-50%, -50%);
		width: 100%; /*changing to pixels screws with the header-overlay img, an */
		height: 100%;
		z-index: 9998;
		display: flex;
		align-items: center;
		justify-content: center;
		mix-blend-mode: multiply;
		background-blend-mode: normal;
		opacity: 0;
		animation: fade-in 1s forwards;
		overflow: hidden; /* Added overflow: hidden to cut out the overflow */
		background-color: rgba(63, 63, 63, 0.8); /* Added background color */
	}
	
	.header-overlay img {
		min-height: 300%;
		min-width: 300%;
		max-width: 300%;
		max-height: 300%;
		object-fit: contain; /* Maintain the aspect ratio */
	}
	
	
	h2 {
		position: relative;
		font: 16px/1.5 Lato, "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
		color: white;
		text-align: center;
		font-size: 24px; /* Adjust the font size as needed */
		margin: 0;
		z-index: 2;
	}
	
	h2 span {
		font-weight: bold;
		color: #00AEEF;
	}
	
	.header-content {
		text-align: center;
		margin-top: 10px; /* Adjust the margin as needed */
		z-index: 9999;
	}
	
	p {
		position: relative;
		font: 18px/1.5 Lato, "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
		color: #ffffff;
		margin: 0;
		z-index: 2;
	}

	
	#unique-paragraph {
		position: relative;
		font: 20px/1.5 Lato, "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
		color: #00AEEF;
		margin: 0;
		z-index: 2;
		font-weight: 500;
		transition: color 0.6s ease-in-out;
	}

	#unique-paragraph:hover {
		color: #0f2730;
	}

	.mouse-icon {
		position: absolute;
		left: 50%;
		bottom: 10px; /* Adjust the position as needed */
		transform: translateX(-50%);
		/* Remaining CSS styles */
		border: 2px solid #fff;
		border-radius: 16px;
		height: 50px;
		width: 30px;
		display: block;
		z-index: 9999; /* Increase the z-index to appear above the header-overlay */
	}
	
	.mouse-icon:hover,
	.mouse-icon:active,
	.mouse-icon:focus {
		border: 2px solid #fff;
		z-index: 9999; /* Increase the z-index to appear above the header-overlay */
	}
	
	.mouse-icon .wheel {
		-webkit-animation-name: drop;
		-webkit-animation-duration: 1s;
		-webkit-animation-timing-function: linear;
		-webkit-animation-delay: 0s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-play-state: running;
		animation-name: drop;
		animation-duration: 1s;
		animation-timing-function: linear;
		animation-delay: 0s;
		animation-iteration-count: infinite;
		animation-play-state: running;
		z-index: 9999; /* Increase the z-index to appear above the header-overlay */
	}
	
	.mouse-icon .wheel {
		position: relative;
		border-radius: 10px;
		background: #fff;
		width: 4px;
		height: 10px;
		top: 4px;
		margin-left: auto;
		margin-right: auto;
		z-index: 9999; /* Increase the z-index to appear above the header-overlay */
	}
	
	@-webkit-keyframes drop {
		0% {
		top: 5px;
		opacity: 0;
		}
		30% {
		top: 10px;
		opacity: 1;
		}
		100% {
		top: 25px;
		opacity: 0;
		}
	}
	
	@keyframes drop {
		0% {
		top: 5px;
		opacity: 0;
		}
		30% {
		top: 10px;
		opacity: 1;
		}
		100% {
		top: 25px;
		opacity: 0;
		}
	}
	
	/* Mobile styles */
	@media (max-width: 1000px) {
		/* Adjust the breakpoint as needed */
		.black-box {
		height: 250px; /* Mobile height */
		}
	
		.header-overlay {
		/* Adjust mobile-specific styles here */
		background-color: rgba(63, 63, 63, 0.8); /* Added background color */
		}
	
		.header-overlay img {
		/* Adjust mobile-specific styles here */
		min-height: 200%;
		min-width: 200%;
		max-width: 200%;
		max-height: 200%;
		}
	
		h2 {
		font-size: 18px; /* Adjust the font size for mobile */
		}
	
		p {
		font-size: 16px; /* Adjust the font size for mobile */
		}
	
		.mouse-icon {
		/* Adjust mobile-specific styles here */
		height: 40px;
		width: 24px;
		}
	
		.mouse-icon .wheel {
		/* Adjust mobile-specific styles here */
		width: 3px;
		height: 8px;
		top: 3px;
		}
	}
  

/*5 Carousel Code */

	.youtube-carousel {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 2; /* Adjust the z-index if needed */
	}

/* 6 BODY & Slider */

	*,
	*::after,
	*::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}


	img {
	display: block;
	max-width: 100%;
	}
	

	main {
	display: grid;
	place-items: center;
	min-height: 100vh;
	}

	.container {
	display: grid;
	place-content: center;
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
	--position: 50%;
	max-width: 1200px; /* Adjust the desired maximum width */
	margin: 0 auto; /* Center the container horizontally */
	}
	

	.image-container {
	max-width: 100%;
	max-height: none;
	}

	.slider-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left;
	}

	.image-before {
	position: absolute;
	inset: 0;
	width: var(--position);
	}

	.slider {
	position: absolute;
	inset: 0;
	cursor: pointer;
	opacity: 0;
	/* for Firefox */
	width: 100%;
	height: 100%;
	}		

	.slider:focus-visible ~ .slider-button {
	outline: 5px solid black;
	outline-offset: 3px;
	}

	.slider-line {
	position: absolute;
	inset: 0;
	width: .2rem;
	height: 100%;
	background-color: #000000;
	/* z-index: 10; */
	left: var(--position);
	transform: translateX(-50%);
	pointer-events: none;
	}

	.slider-button {
	position: absolute;
	background-color: #00AEEF;
	color: black;
	padding: .2rem;
	border-radius: 100vw;
	display: grid;
	place-items: center;
	top: 50%;
	left: var(--position);
	transform: translate(-50%, -50%);
	pointer-events: none;
	/* z-index: 100; */
	box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
	}	

	.custom-text-container {
		text-align: center;
		margin-top: 20px;
		max-width: 700px; /* Adjust the desired width */
		margin-left: auto;
		margin-right: auto;
		border: 2px solid #00AEEF; /* Add a blue border */
		border-radius: 10px; /* Add rounded edges */
		padding: 10px; /* Optional: Add some padding around the container */
		color: black; /* Set font color to black */
	}
	
	.custom-text-container p {
		margin-bottom: 10px;
		max-width: 700px; /* Adjust the desired width */
		font: 16px/1.5 Lato, "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
		color: rgb(2, 2, 2); /* Set font color to black */
	}
	
	.custom-title {
		color: #00AEEF;
		font: 36px/1.5 Lato, "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
	}
	
	.custom-text-container:hover {
		filter: brightness(1.1);
		background-color: rgba(45, 199, 255, 0.2); /* Adjust alpha for a more toned-down color */
	}
	

/* 7. SERVICE ICONS */
/* CSS box-section1*/
	.box-section {
		display: flex;
		justify-content: space-between;
	}
	
	.box {
		flex: 1;
		padding: 20px;
		border: 1px solid #00AEEF;
		border-radius: 5px;
		margin-left: 10px;
		margin-right: 10px; /* Add margin between boxes */
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		font: 20px/1.5 Lato, "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
	}
	
	.box h4 {
		color: #00AEEF;
	}
	
	.box p {
		color: rgb(255, 255, 255);
	}
	
	.box h4, .box p {
		margin: 0;
	}

	.box:hover {
		filter: brightness(1.1);
		background-color: rgba(45, 199, 255, 0.2); /* Adjust alpha for a more toned-down color */
	}
	
	.box:hover h4,
	.box:hover p {
		filter: brightness(1.1);
	}

/* Blog Section Styling*/
	#blog-content-introduction,
    #blog-content-enhancement,
    #blog-content-analysis {
	  display: relative;
      text-align: left;
      margin: 0;
      font-size: 16px;
      line-height: 1.5;
      font-family: "Lato", "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
	  float: left;
      clear: both;
      width: 100%;
      
    }
  
    #blog-content-introduction h4,
    #blog-content-enhancement h4,
    #blog-content-analysis h4 {
      text-align: left;
      font-size: 18px;
      font-family: "Lato", "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
      margin: 20px 0 10px;
	  
    }
  
    #blog-content-introduction p,
    #blog-content-enhancement p,
    #blog-content-analysis p {
      text-align: left;
      font-size: 14px;
      font-family: "Lato", "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
      margin: 10px 0;
    }
  
    /* Additional CSS for aligning the sections to the left */
    #blog-content-introduction,
    #blog-content-enhancement,
    #blog-content-analysis {
      float: left;
      clear: both;
      width: 100%;
    }
  
    /* Adding bullet points to each line of text */
    #blog-content-introduction li,
    #blog-content-enhancement li,
    #blog-content-analysis li {
      list-style-type: disc;
      margin-left: 20px;
    }

/* color: #2dc7ff; */
/* 8.5 CSS box-section2 */
/* CSS */
	.box-section2 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 20px;
	}
	
	.box2 {
		width: 600px; /* Set width to 600 pixels */
		height: 400px; /* Set height to 400 pixels */
		margin-bottom: 20px; /* Add margin between boxes */
		padding: 20px;
		border: 1px solid #00AEEF;
		border-radius: 5px;
		margin-left: 10px;
		margin-right: 10px; /* Add margin between boxes */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		font: 30px/1.5 Lato, "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
	}
	
	.box2 h5 {
		color: #00AEEF; /* Set title color to #00AEEF */
	}
	
	.box2 p {
		color: #ffffff; /* Set text color to black */
		margin: 0;
	}

	.box2:hover {
		filter: brightness(1.1); /* Increase gamma/brightness on hover */
		background-color: rgba(45, 199, 255, 0.2); /* Adjust alpha for a more toned-down color */
	}

	.box2:hover h5,
	.box2:hover p {
		filter: brightness(1.1); /* Increase gamma/brightness on hover */
		
	}
	
	.box-section3 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 20px;
	}
	
	.box3 {
		width: 600px; /* Set width to 600 pixels */
		height: 250px; /* Set height to 400 pixels */
		margin-bottom: 20px; /* Add margin between boxes */
		padding: 20px;
		border: 1px solid #00AEEF;
		border-radius: 5px;
		margin-left: 10px;
		margin-right: 10px; /* Add margin between boxes */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		font: 30px/1.5 Lato, "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
	}
	
	.box3 h5 {
		color: #00AEEF; /* Set title color to #00AEEF */
	}
	
	.box3 p {
		color: #ffffff; /* Set text color to black */
		margin: 0;
	}

	.box3:hover {
		filter: brightness(1.1); /* Increase gamma/brightness on hover */
		background-color: rgba(45, 199, 255, 0.2); /* Adjust alpha for a more toned-down color */
	}

	.box3:hover h5,
	.box3:hover p {
		filter: brightness(1.1); /* Increase gamma/brightness on hover */
		
	}

	.box-section4 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 20px;
	}

	.box4 {
		width: 1200px; /* Set width to 600 pixels */
		height: 300px; /* Set height to 400 pixels */
		margin-bottom: 20px; /* Add margin between boxes */
		padding: 20px;
		border: 1px solid #00AEEF;
		border-radius: 5px;
		margin-left: 10px;
		margin-right: 10px; /* Add margin between boxes */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		font: 30px/1.5 Lato, "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
	}
	
	.box4 h5 {
		color: #00AEEF; /* Set title color to #00AEEF */
	}
	
	.box4 p {
		color: #ffffff; /* Set text color to black */
		margin: 0;
	}

	.box4:hover {
		filter: brightness(1.1); /* Increase gamma/brightness on hover */
		background-color: rgba(45, 199, 255, 0.2); /* Adjust alpha for a more toned-down color */
	}

	.box4:hover h5,
	.box4:hover p {
		filter: brightness(1.1); /* Increase gamma/brightness on hover */
		
	}
		
/* 9. Contact Form */

.contact-form-separator {
	border-top: 2px solid #000;
	margin-top: 10px;
	margin-bottom: 10px;
  }
  
.contact {
	padding-top: 60px;
	padding-bottom: 60px;
  }
  
  .contact-title {
	 color: #00AEEF;
  font-family: 'Lato', 'Century Gothic', 'Trebuchet MS', Helvetica, sans-serif;
	font-weight: 700;
	font-size: 30px;
	margin: 0 0 20px;
  }
  
	.contact-info {
		display: flex;
		flex-wrap: wrap-reverse;
	}

	.contact-content {
		flex: 0 0 50%;
		max-width: 50%;
		margin-bottom: 30px;
	}

  
	.contact-content p {
		margin-bottom: 10px;
	}
  
	.contact-content p {
		color: black; /* Set the text color to black */
	}

	.contact-content p i {
		color: #00aeef; /* Keep the icon color unchanged */
		font-size: 18px;
		text-align: center;
		width: 20px;
		margin-right: 10px;
	}

  
	.contact-form {
		flex: 0 0 50%;
		max-width: 50%;
		opacity: 0; /* Initially hide the form */
		animation: fade-in 1s forwards; /* Apply the fade-in animation */
	}
  
  @keyframes fade-in {
	from {
	  opacity: 0; /* Start with opacity 0 */
	  transform: translateY(20px); /* Apply a slight upward translation */
	}
	to {
	  opacity: 1; /* End with opacity 1 */
	  transform: translateY(0); /* Reset the translation */
	}
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea {
	display: block;
	width: 100%;
	height: 48px;
	padding-left: 15px;
	border: 1px solid #666666;
	border-radius: 3px;
	margin-bottom: 20px;
	outline: none;
	background-color: #dfdfdf;
  }
  
  .contact-form textarea {
	padding-top: 10px;
  }
  
  .contact-form input[type="submit"] {
	background-color: #00aeef;
	border: 1px solid #00aeef;
	color: #000000;
	font-weight: 700;
	font-family: 'Raleway';
	border-radius: 3px;
	padding: 15px 20px;
	outline: none;
  }
  
  .contact-form input[type="submit"]:hover {
	background-color: #008ec3;
	border: 1px solid #008ec3;
  }
  
  .st-contact-message {
	font-size: 14px;
	margin-bottom: 20px;
	margin-left: 15px;
	color: #000;
  }
  
  .st-contact-message i {
	margin-right: 5px;
  }
  
  .st-contact-message .fa-warning {
	color: #ffffff;
  }
  
  .st-contact-message .fa-check {
	color: #68c3a3;
  }
  
  /* 6. Responsive Styling */
  
  @media (max-width: 767px) {
	.contact {
	  padding-top: 100px;
	  padding-bottom: 100px;
	}
  
	.contact-info,
	.contact-form {
	  flex: 0 0 100%;
	  max-width: 100%;
	}
  
	.contact-content p,
	.contact-form input[type="text"],
	.contact-form input[type="email"],
	.contact-form textarea {
	  margin-bottom: 15px;
	}
  
	.contact-title {
	  text-align: center;
	}
  }
  

/* 10. FOOTER */
/* CSS for Footer */
	.site-footer {
	  background-color: black;
	  color: white;
	  text-align: center;
	  padding: 20px;
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  z-index: 999; /* Add a higher z-index value to ensure the footer appears above other elements */
	}
  
	/* Add some spacing to the bottom of the page to prevent content from being hidden by the fixed footer */
	body {
	  margin-bottom: 60px; /* Adjust the value as needed based on the footer height */
	}