/* create a style for the root class */
:root {
    --clr-white: #ffffff;
    --clr-black: #000000;
	--clr-black-50: #00000080;
	--clr-black-10: #0000001A;
	--clr-grey: #D9D9D9;
	--clr-accent: #172332;
	--clr-accent-bright-blue: #143974;
	--clr-accent-green: #499860;


    /*font sizes */
    --fs-h1-desktop: 60px;
	--fs-h1-ipad: 50px;
    --fs-h1-mobile: 35px;
	--fs-h2-desktop: 40px;
	--fs-h2-ipad: 40px;
	--fs-h2-mobile: 30px;
	--fs-h3-desktop: 25px;
	--fs-h3-ipad: 25px;
	--fs-h3-mobile: 20px;
	--fs-h3: 20px;
	--fs-h4: 18px;
    --fs-p-desktop: 20px;
	--fs-p-ipad: 20px;
	--fs-p-mobile: 16px;
	--fs-p: 16px;
	--fs-button-desktop: 18px;
	--fs-button-ipad: 16px;
	--fs-button-mobile: 16px;

    /*font weights */
	--fw-h1: 700;
	--fw-h2: 500;
	--fw-h3: 500;
	--fw-h4: 500;
	--fw-p: 500;
	--fw-button: 600;
	--fw-nav: 700;
	--fw-very-light: 200;
    --fw-light: 300;
    --fw-normal: 400;
    --fw-med: 500;
    --fw-semi: 600;
    --fw-bold: 700;
    --fw-heavy: 800;

}
/* --- anmations --- */

.hidden {
	opacity: 0;
	filter: blur(5px);
	/* transform: translateX(-100%); */
	transition: all 0.3s;
}
.hidden-slide {
	opacity: 0;
	filter: blur(5px);
	transform: translateX(-100%);
	transition: all 0.3s;
}
.hidden-drop {
	opacity: 0;
	filter: blur(5px);
	transform: translateY(30%);
	transition: all 0.3s;
}
.support-logo-delay{
	transition-delay: 50ms;
}
.support-logo-delay:nth-child(2){
	transition-delay: 100ms;
}
.support-logo:nth-child(3){
	transition-delay: 150ms;
}
.support-logo:nth-child(4){
	transition-delay: 50ms;
}
.support-logo:nth-child(5){
	transition-delay: 100ms;
}
.support-logo:nth-child(6){
	transition-delay: 150ms;
}
.hiw-card:nth-child(2){
	transition-delay: 50ms;
}
.hiw-card:nth-child(3){
	transition-delay: 100ms;
}
.hiw-card:nth-child(4){
	transition-delay: 150ms;
}
.screenshot:nth-child(2){
	transition-delay: 50ms;
	/* transition-delay: 1s; */
}
.screenshot:nth-child(3){
	transition-delay: 100ms;
	/* transition-delay: 1s; */
}
.show {
	opacity: 1;
	filter: blur(0px);
	transform: translateX(0);
	transform: translateY(0);
}
/* --- end anmations --- */

html {
	font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue","Ubuntu";
	color: var( --clr-black);
	-webkit-appearance: none;
	overflow-x: hidden;  
}

body {
	background: var(--clr-white);
    margin: 0;
    padding: 0;
    /* display: flex;
    flex-direction: column; */
	display: block;
}

button {
    background: none;  
    color: inherit;    
    border: none;      
    padding: 0;        
    font: inherit;     
    cursor: pointer;   
    outline: inherit;  
}

.container-centered {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.container-centered.black {
	background-color: var(--clr-black);
	margin-top: -1px;
}
.container-centered.blue {
	background-color: var(--clr-accent);
	margin-top: -1px;
}

.container {
	width: 100%;
	display: flex;
    justify-content: center;
    flex-direction: column;
	/* gap: 40px; */
}

h1 {
	color: var( --clr-black);
	font-size: var( --fs-h1-mobile);
	font-weight: var(--fw-h1);
	margin: 5px 0px 5px 0px;
}

h2 {
	color: var( --clr-black);
	font-size: var(--fs-h2-mobile);
	font-weight: var(--fw-h2);
	margin: 0px;
}

h3 {
	color: var( --clr-black);
	font-size: var(--fs-h3-mobile);
	font-weight: var(--fw-h3);
	margin: 0px;
}

p {
	color: var( --clr-black);
	font-size: var( --fs-p);
	font-weight: var(--fw-p);
	margin-top: 10px;
}

a {
    text-decoration: none;
    color: inherit; 
}

/* a:hover {
    cursor: pointer;
	filter: brightness(75%);
}  */

.logo {
    width: 200px;
    height: auto;
    margin-top: 0px;
}

/* ------------------------------------------ NAV BAR ----------------------- */
/* Styling for a fixed navigation bar at the top */

header {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    z-index: 100; 
	padding: 10px;
}

nav {
    background-color: black;
    color: white;
    font-weight: var(--fw-h2);
    display: flex;
    justify-content: center;
    padding: 10px 0;
    width: 100%;
    border-radius: 10px;
    transition: background-color 0.7s ease, backdrop-filter 0.3s ease; ; /* Smooth transition */
}

nav.scrolled {
    background-color: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(10px); /* Apply blur effect */
}

nav a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth transition for color and movement */
    display: inline-block; /* Allows the transform to work properly */
}

nav a:hover {
    color: #e0e0e0; /* Slightly lighter shade of white */
    transform: translateY(-2px); /* Move the link up by 2px */
}

.nav-max-size {
	max-width: 1340px;
    width: 100%;
    display: flex;
    flex-direction: row;
	padding: 0px 10px;
}

.nav_links {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* width: 100%; */
    margin: 0px 0px 0px 10px;
    padding: 0;
}
    .nav_links li {
        list-style: none;
		padding: 0px 20px 0px 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
    }
.nav_logo {
	/* display: none; */
	margin: 0px 20px 0px 0px;
}
	.nav_logo img {
		display: flex;
		align-items: center;
		height: 25px;
	}

.navLeft {
	display: flex;
    align-items: center;
}

.navRight {
	display: flex;
    flex-direction: row;
    justify-content: flex-end;
	align-items: center;
    width: 100%;
	list-style: none;
}
	.navRight img {
		display: flex;
		align-items: center;
		height: 20px;
	}

/* Dropdown menu Styling */
.dropdown-menu {
    display: none;
    position: absolute;
    border-radius: 5px;
    top: 42px;
    right: 3px;
    z-index: 10;
    background-color: var(--clr-black);
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 240px;
    list-style: none;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
    .dropdown-menu img {
        height: 24px;
    }
    .dropdown-menu li {
        padding: 10px;
    }
    .dropdown-menu.show { 
        /* class that toggles the hamburger menu */
        /* there's a script that uses this */
        display: block;
    }

/* ------------------------------------------ BUTTON STYLING ----------------------- */
.primary-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--clr-black);
    color: var(--clr-white);
    font-size: var(--fs-p);
    font-weight: var(--fw-p);
    width: 140px;
    height: 40px;
    border-radius: 20px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer; /* Change cursor to pointer on hover */
    text-decoration: none; /* Optional, if it's a link */
    overflow: hidden; /* Needed for certain hover effects */
}

.primary-button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for elevation */
    transform: translateY(-2px); /* Slightly raise the button */
    background: var(--clr-black); /* Optional: Slight color change on hover */
}


.primary-fill-button {
    color: var(--clr-black);
    background-color: var(--clr-white);
    border: 2px solid var(--clr-black);
    box-sizing: border-box;
    width: 150px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fs-button-mobile);
    font-weight: var(--fw-button);
    border-radius: 30px;
    transition: background-color 0.3s ease, color 0.3s ease, filter 1s ease;
    cursor: pointer; /* Change cursor to pointer on hover */
    overflow: hidden; /* Needed for certain hover effects */
    position: relative; /* For pseudo-elements */
    animation: growShrink 2s ease-in-out infinite; /* Apply continuous animation */
}

.primary-fill-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: var(--clr-black); /* Background color for the hover effect */
    transition: left 0.3s ease;
    border-radius: 20px; /* Match the border radius of the button */
    z-index: -1;
}

.primary-fill-button span {
    position: relative;
    z-index: 1; /* Ensure the text stays above the pseudo-element */
}

/* Define keyframes for the grow/shrink animation */
@keyframes growShrink {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.primary-fill-button:hover {
    color: var(--clr-white); /* Text color on hover */
}

.primary-fill-button:hover img {
    filter: invert(100%);
}

.primary-fill-button:hover::before {
    left: 0; /* Slide in the pseudo-element on hover */
}


.secondary-button {
    color: var(--clr-black);
    background-color: var(--clr-white);
	border: 2px solid var(--clr-grey);
    width: 165px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fs-button-mobile);
    font-weight: var(--fw-button);
    border-radius: 30px;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, filter 1s ease;
    cursor: pointer; /* Change cursor to pointer on hover */
    overflow: hidden; /* Needed for certain hover effects */
    position: relative; /* For pseudo-elements */
}
.secondary-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: var(--clr-accent); /* Background color for the hover effect */
    transition: left 0.3s ease;
    border-radius: 30px; /* Match the border radius of the button */
    z-index: -1;
}
.secondary-button span {
    position: relative;
    z-index: 1; /* Ensure the text stays above the pseudo-element */
}
.secondary-button:hover {
    color: var(--clr-white); /* Text color on hover */
    transform: scale(1.00); /* Slightly scale up the button */
}
.secondary-button:hover img {
    filter: invert(100%);
}
.secondary-button:hover::before {
    left: 0; /* Slide in the pseudo-element on hover */
}

.primary-button-inverted {
    display: flex;
    justify-content: center;
    align-items: center;
	background: var(--clr-white);
	color: var(--clr-black);
    font-size: var(--fs-p);
    font-weight: var(--fw-p);
    width: 150px;
    height: 35px;
    border-radius: 20px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer; /* Change cursor to pointer on hover */
    text-decoration: none; /* Optional, if it's a link */
    overflow: hidden; /* Needed for certain hover effects */
}

.primary-button-inverted:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for elevation */
    transform: translateY(-2px); /* Slightly raise the button */
    background: var(--clr-white); /* Optional: Slight color change on hover */
}

.secondary-button-inverted {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--clr-white);
    background-color: var(--clr-accent);
    font-size: var(--fs-p);
    font-weight: var(--fw-p);
    width: 150px;
    height: 35px;
    border-radius: 20px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer; /* Change cursor to pointer on hover */
    text-decoration: none; /* Optional, if it's a link */
    overflow: hidden; /* Needed for certain hover effects */
}

.secondary-button-inverted:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for elevation */
    transform: translateY(-2px); /* Slightly raise the button */
    background: var(--clr-accent); /* Optional: Slight color change on hover */
}

.button-icon {
	height: 14px;
	margin: 0px 0px 0px 7px;
}
.button-icon-left{
	height: 14px;
	margin: 0px 7px 0px 0px;
}

.text-button {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	font-size: var(--fs-p);
	font-weight: var(--fw-p);
	color: var(--clr-black);
}
.text-button img {
	display: flex;
	justify-content: center;
	width: 20px;
	height: auto;
	margin: 0px 0px 0px 5px;
}

/* ---- trying cool button animations ---- */



/* ------------------------------------------ HERO SECTION ----------------------- */
.hero {
	display: flex;
    flex-direction: column;
    width: 100%;
    margin: 20px 0px 0px 0px;
    /* opacity: 0; */
    transition: opacity 0.3s ease;
    align-items: center;
	overflow: hidden;
}
.header-span {
/* give it a black background with white text*/
	background-color: black;
	color: white;
	padding: 0px 4px;
}
.hero-left-top {
	padding: 0px 5px 0px 5px;
}
.hero-right-bottom {
	position: relative;
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	/* padding: 0px 5px 0px 5px;  /*FIX ME: remove padding below once video is added*/
	padding: 0px 5px 20px 5px;
	margin: 25px 0px 0px 0px;
}
.left-align-hero-header {
	text-align: left;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
	margin: 0px 0px 10px 0px;
}
.centered-align-hero-header {
	text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
	margin: 0px 0px 10px 0px;
}
.second-line-hero {
	text-align: center;
    display: flex;
    flex-direction: row;
	max-width: 490px;
    width: 95%;
    margin: 20px 0px 5px 0px;
}
.yc-backed-tag {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin: 25px 0px 0px 0px;
	border-radius: 10px;
	border: 1px solid #C9C9C9;
	background-color: var(--clr-white);
	width: 296px;
	height: 37px;
}
.yc-backed-tag img {
	height: 20px;
	margin: 0px 5px 0px 0px;
}
.yc-text {
	font-size: 16px;
	font-weight: 500;
	margin: 0px;
}
.hero-button-space {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	/* width: 100%; */
}
.hero-button-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
	margin-top: 30px;
	column-gap: 20px;
	padding-bottom: 5px;
}
.signup-card {
    z-index: 2;
	width: 280px;
	/* max-width: 315px;*/
	height: 260px; 
	overflow: hidden; 
	border-radius: 40px;
	border: 3px solid #000;
	background: #FFF;
	box-shadow: 5px 5px 0px 0px #374960, 8px 9px 0px 0px #000;
}
.signup-text {
	display: flex;
	flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
	width: 100%;
	height: 100%;
	padding: 10px;
}
.signup-header{
	text-align: center;
	margin: 10px 5px;
	/* width: 100%; */
}
.signup-form{
	display: flex;
    flex-direction: column;
	height: 100%;
	width: 100%;
}
.form-input{
	display: flex;
    flex-direction: column;
	justify-content: space-around;
	row-gap: 10px;
	width: 100%;
}
.form-group{
	display: flex;
    flex-direction: column;
	justify-content: flex-start;
	row-gap: 5px;
	width: 100%;
}
.label-text{
	font-size: 18px;
	font-weight: 500;
	margin: 0px;
}
/* Reset styling for all input fields within a form */
form input {
    background: none;  /* Remove default background */
    color: inherit;    /* Inherit font color from parent or set your own */
    border-radius: 10px;
	border: 1px solid #000;
    padding: 3px 10px;
    font: inherit;     /* Inherit font from parent */
    /* outline: var(--clr-accent);     Remove default focus outline */
}
form input:focus {
	transform: scale(1.02);
}

.input-field{
	width: 235px;
}
.form-submit-space {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	margin: 20px 0px 0px 0px;
}
input[type="submit"] {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--clr-black); /* Background color from .secondary-button-inverted */
    color: var(--clr-white); /* Text color from .secondary-button-inverted */
    font-size: var(--fs-p); /* Font size from .secondary-button-inverted */
    font-weight: var(--fw-p); /* Font weight from .secondary-button-inverted */
    width: 150px; /* Width from .form-submit */
    height: 35px; /* Height from .form-submit */
    border-radius: 20px; /* Border-radius from .form-submit */
    cursor: pointer; /* Keep the cursor as a pointer */
    text-decoration: none; /* Optional: No underline for text */
    outline: none; /* Remove default focus outline */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Transition for hover effects */
    overflow: hidden; /* Needed for certain hover effects */
    border: none; /* Remove default border */
}

input[type="submit"]:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for elevation from .secondary-button-inverted */
    transform: translateY(-2px); /* Slightly raise the button on hover */
    background: var(--clr-black); /* Maintain background color on hover */
}


.form-success-text{
	display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 45%;
}
.shape-positioning-div {
	position: relative; 
}
.signup-shape {
    position: absolute;
    top: 120px;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    overflow-x: hidden;
    overflow-y: hidden;
	/* width: 320px; */
} 
.signup-shape img {
	position: relative; 
	top: 10px;
    left: -220px;
    z-index: -1; 
}

/* ------------------------------------------ DEMO SECTION ----------------------- */
/* .demo-section-left-bottom, .demo-section-right-top {
    transform: translateX(-100px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
} */
.demo-section {
	margin: 80px 0px 40px 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 0px;
	/* opacity: 0; */
    transition: opacity 0.5s ease;
}
.demo-section-right-top {
	position: relative;
	text-align: center;
}
.demo-section-left-bottom {
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
	height: 100%;
    width: 100%;
	margin: 40px 0px 0px 0px;
}
.demo-section-subheader {
	max-width: 310px;
	margin: 20px 0px;
	text-align: center;
}
.demo-button-space {
	position: relative; 
    margin: 40px 0px 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-wrapper {
    max-width: 980px; /* Sets the maximum width */
    margin: auto; /* Centers the wrapper */
	width: 90%;
}
.video-container {
    position: relative;
    width: 100%; /* Ensures the container takes the full width of its parent */
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    height: 0; /* This effectively makes the padding-top control the height */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Make the iframe take full width of the container */
    height: 100%; /* Make the iframe take full height of the container */
}


.play-shape {
	position: absolute;
    top: -100px;
    left: -40px;
    height: 100%;
    width: 100%;
    z-index: -1;
}
.play-shape img {
	/* position: relative;  */
	width: 215px;
	top: 43px;
    left: 30px;
    z-index: -1; 
}
.video-shape {
	position: absolute;
    top: 80px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: -1;
	overflow-x: hidden;
    overflow-y: hidden;
}
.video-shape img {
	position: relative;
    width: 600px;
    top: 100px;
    left: -80px;
    z-index: -1;
}

/* ------------------------------------------ NO NEED TO MIGRATE SECTION ----------------------- */
.migrate-section {
    margin: 60px 0px 40px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0px;
    transition: opacity 0.5s ease;
}
.migrate-section-headers {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 980px;
    width: 95%;
}
.migrate-section-subheader {
    margin: 20px 0px 30px 0px;
    text-align: flex-start;
}
.sample-project-tabs-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 980px;
    width: 100%;
}
.sample-project-tabs {
    display: flex;
    flex-direction: row;
    column-gap: 20px;
    border-bottom: 2px solid var(--clr-black-10);
    width: 100%;
}
.tablinks {
    position: relative;
    background: none;
    border: none;
    padding: 10px 0;
    cursor: pointer;
}
.tablinks h4 {
    color: var(--clr-black-50);
    margin: 5px;
}
.tablinks.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--clr-accent-bright-blue);
}
.tablinks.active h4 {
    color: var(--clr-accent-bright-blue);
}
.tablinks:not(.active):hover::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--clr-black-50);
}
.sample-project-tab-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 980px;
    width: 100%;
}
.tabcontent {
	display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.tabcontent img {
    width: 100%;
}
.tabcontent.active {
	display: flex;
}
/* ------------------------------------------ DEVICES SECTION ----------------------- */
.device-image-container {
	width: 95%;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin: 20px 10px;
}
.device-image-container img {
	width: 100%;
}
/* ------------------------------------------ AI SEE SCREEN SECTION ----------------------- */
.screen-section {
	margin: 60px 0px 40px 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 0px;
	/* opacity: 0; */
    transition: opacity 0.5s ease;
}
.screen-section-text {
	display: flex;
    flex-direction: column;
    align-items: center;
	text-align: center;
}
.screen-section-subheader {
	max-width: 530px;
	margin: 20px 10px;
	text-align: center;
}
.screen-section-wiki-shots {
	width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
	margin: 20px 0px;
}
.screen-section-wiki-shots img {
	width: 40%;
}

/* ------------------------------------------ SUPPORT SECTION ----------------------- */
.support-section {
	margin: 80px 0px 80px 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 0px;
	/* opacity: 0; */
    transition: opacity 0.5s ease;
}
.support-section-text {
	display: flex;
    flex-direction: column;
    align-items: center;
	text-align: center;
}
.support-section-subheader {
	max-width: 530px;
	margin: 20px 0px;
	text-align: center;
}
.support-section-logos {
	display: grid;
	grid-template-columns: repeat(2, 100px); /* 2 columns of 100px each */
	grid-template-rows: repeat(3, auto); /* 3 rows, height adjusts automatically */    
	gap: 40px; /* Space between images */
    justify-content: center; /* Center grid within the container */
    margin: 20px 0;
}
h3.support-logos-text {
	display: flex;
    flex-direction: row;
    column-gap: 5px;

}
.support-section-logos img {
	width: 100px;
}
.hidden-text {
	display: none;
	opacity: 0;
	/* transition: opacity 0.5s ease; */
	filter: blur(5px);
	transform: translateY(30%);
	/* transition: all 2s; */
}
.visible {
    display: block;
    opacity: 1;
    transition: all 0.5s ease;

	filter: blur(0px);
	transform: translateX(0);
	transform: translateY(0);
}

img.opacity-50 {
	opacity: 0.5;
    transition: opacity 0.5s ease; /* Smooth transition for the logo image */
}

img.full-opacity {
    opacity: 1;
}

/* ------------------------------------------ CARD SECTION ----------------------- */
.cards-section {
	background-image: url('dashed-lines-mobile.png'); /* Replace with the path to your image */
    background-size: auto; /* Or use 'contain', depending on your needs */
    background-repeat: no-repeat;
    background-position: center;
	padding: 0px 0px 40px 0px;
	/* opacity: 0; */
    transition: opacity 0.5s ease;
}
.cards-section-header {
	background-color: var(--clr-black);
	min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
	padding: 0px 10px;
	position: relative;
}
.cards-section-span {
/* give it a black background with white text*/
	background-color: var(--clr-white);
	color: var(--clr-black);
}
.card-section-header-text {
	text-align: center;
	color: var(--clr-white);
}
.card-holder {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 25px;
	margin: 40px 0px 10px 0px;
	/* transition: transform 0.3s ease; */
}
/* .card-holder div:hover {
    transform: scale(1.01);
} */
.card {
	width: 100%;
	max-width: 315px;
	height: 380px;
	overflow: hidden; 
	/* box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25); */
	border-radius: 40px;
	border: 3px solid #000;
	background: #FFF;
	box-shadow: 5px 5px 0px 0px #374960, 8px 9px 0px 0px #000;
	transition: transform 0.3s ease;
}
.card div:hover {
    /* transform: scale(1.01); */

}
.card-image-mobile {
	display: flex;
	justify-content: center;
    align-items: center;
	padding: 10px;
}
	.card-image-mobile img {
		width: 300px;
		height: 190px;
	}
.card-image-not-mobile {
	display: none;
	justify-content: center;
	align-items: center;
	padding: 10px;
}
	.card-image-not-mobile img {
		width: 371px;
		height: 190px;
	}
.card-text {
	text-align: left;
	padding: 30px 10px;
	display: flex;
	flex-direction: column;
	row-gap: 20px;

}
.card-header {
	font-weight: 600;
}
.left-cards{
	display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin: 0px 10px;
}
.right-cards {
	display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin: 150px 10px 10px 10px
}

/* ------------------------------------------ HOW IT WORKS SECTION ----------------------- */
.how-it-works-section{
	background-color: var(--clr-black);
	/* margin: 40px 0px 0px 0px; */
	padding: 40px 0px 80px 0px;
}
.hiw-header-space {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0px 0px 30px 0px;
}
.how-it-works-subheader h3 {
	color: var(--clr-white);
	font-weight: 300;
	margin: 0px 0px 15px 0px;
}
.how-it-works-header {
	width: 260px;
}
.how-it-works-header h2 {
	color: var(--clr-white);
	text-align: center;
	padding: 0px 10px;
	margin: 0px 0px 10px 0px;
}
.hiw-card-holder{
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 20px;	
}
.hiw-card{
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
	min-width: 310px;
	width: 90%;
}
.hiw-number{
	display: flex;
    width: 50px;
    justify-content: center;
}
.hiw-number h3 {
	color: var(--clr-white);
}
/* .hiw-body{} */
.hiw-card-header {
	text-align: left;
}
	.hiw-card-header h3 {
		color: var(--clr-white);
	}
.hiw-card-text{
	text-align: left;
}
	.hiw-card-text p {
		color: var(--clr-white);
		padding: 0px 10px 0px 0px;
	}
.hiw-card-image-mobile {
	display: flex;
    justify-content: center;
	width: 100%;
}
	.hiw-card-image-mobile img {
		height: 100px;
	}
.hiw-card-image-not-mobile img{
	height: 100px;
}
.white-line {
	background-color: var(--clr-white);
	height: 3px;
	width: 100%;
	margin: 5px 0px 5px 0px;
	max-width: 700px;
	border-radius: 5px;
}
/* ------------------------------------------ GET STARTED SECTION ----------------------- */
.get-started-section{
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	background-color: var(--clr-accent);
	padding: 40px 0px 40px 0px;
	margin-top: 5px;
	row-gap: 30px;
}
.get-started-header{}
.get-started-header h3 {
	color: var(--clr-white);
}
.get-started-button-space{
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    max-width: 340px;
}

/* ------------------------------------------ FOOTER SECTION ----------------------- */
.footer-section {
	background-color: var(--clr-black);
    padding: 40px 20px 10px 20px;
	margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
	overflow: hidden;
}
.footer-header-section {
	height: 150px;
}
.footer-header img {
	width: 110px;
}
.footer-subheader p {
	color: var(--clr-white);
	font-size: medium;
	font-weight: 400;
}
.footer-social-links-section {
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 10px;
}
.footer-social-links-section img {
	width: 22px;
}
.foot-docs {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	column-gap: 10px;
}
.foot-docs p {
	color: var(--clr-white);
	font-size: small;
}
.footer-bottom {
	display: flex;
	justify-content: space-around;
	width: 100%;
	max-width: 400px;
	column-gap: 10px;
}
.footer-bottom p {
	color: var(--clr-white);
	font-size: x-small;
}
.footer-section-holder {
	width: 100%;
	padding: 0px 10px;
}
.footer-bottom-space{
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
}

.html5-video-player {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    outline: 0;
    font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
    color: #eee;
    text-align: left;
    direction: ltr;
    font-size: 11px;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
    -ms-high-contrast-adjust: none;
    forced-color-adjust: none;
}

.html5-video-container {
    z-index: 10;
    position: relative;
}
.html5-video-player .video-click-tracking, .html5-video-player .video-stream {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
}

.ytp-fit-cover-video .html5-main-video {
    -o-object-fit: cover;
    object-fit: cover;
}
.html5-main-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: 0;
}


/* ------------------------------------------ BLOG PAGE Styling --------------------------------------------------- */
.blog-title {
	width: 100%;
	padding: 0px 0px 30px 0px;
	max-width: 700px;
}
.blog-title h2 {
	
}
.blog-section {
	display: flex;
    flex-direction: column;
    align-items: center;
	margin: 40px 10px 40px 10px;	
	height: 60vh;
	max-width: 720px;
}

.blog-preview {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    padding: 25px;
    row-gap: 10px;
    background-color: var(--clr-white); /* Initial background color */
    border: 2px solid var(--clr-black);
    max-width: 700px;
    width: 85%;
    height: auto;
    transition: background-color 0.3s ease, color 0.3s ease, filter 1s ease;
    cursor: pointer;
    position: relative;
	overflow: hidden;
}

.blog-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: var(--clr-black); /* Hover background color */
    transition: left 0.3s ease;
    border-radius: 5px;
    z-index: 0; /* Ensure it slides under the text but over the background */
}

.blog-preview span {
    position: relative;
    z-index: 2; /* Ensure the text stays above the pseudo-element */
}

.blog-preview:hover {
    color: var(--clr-white); /* Text color on hover */
    background-color: transparent; /* Make background transparent to reveal pseudo-element */
}

.blog-preview:hover::before {
    left: 0; /* Slide in the pseudo-element on hover */
}

.blog-preview-header h3, .blog-preview-subheader p {
    position: relative; /* This may not be necessary unless you have specific z-index values */
    z-index: 2; /* Ensure these elements also stay above the pseudo-element */
    color: var(--clr-black); /* Initial text color */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

.blog-preview:hover .blog-preview-header h3, .blog-preview:hover .blog-preview-subheader p {
    color: var(--clr-white); /* Ensure text color changes on hover */
}

/* -------- Blog posts ------ */
.blog-post-container {
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 20px 10px 40px 10px;
	row-gap: 20px;
}
.blog-post-header-section {
	display: flex;
    flex-direction: column;
    border-radius: 10px;
	width: 85%;
    padding: 25px;
    row-gap: 10px;
    background-color: var(--clr-black); /* Initial background color */
    border: 2px solid var(--clr-black);
}
.blog-post-header-section h3, .blog-post-header-section p {
	color: var(--clr-white);
}
.blog-post-header-section p {
	margin: 0px;
}
.blog-post-body {
	max-width: 1200px;
	margin: 0px 0px 0px 5px;
}
.blog-post-body img {
    max-height: 600px;
    max-width: 100%; /* Ensure image does not exceed the width of its container */
    height: auto; /* Maintain aspect ratio */
    width: auto; /* Allow image to scale down if necessary */
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	margin: 20px 0px 20px 0px;
}
.blog-post-body img.img-outline {
    border-radius: 10px;
    max-height: 300px;
    max-width: 100%; /* Ensure image does not exceed the width of its container */
    height: auto; /* Maintain aspect ratio */
    width: auto; /* Allow image to scale down if necessary */
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}
.blog-post-body p {
	font-size: var(--fs-p);
	font-weight: var(--fw-light);
}
.blog-post-body p.blog-list-item-header {
	font-weight: var(--fw-semi);
	color: var(--clr-accent);
}
.blog-post-body ol {
	margin: 10px 0px 10px -20px;
}
.blog-post-body li {
	margin: 10px 0px 30px 0px;
}
.blog-post-body li::marker {
	font-weight: var(--fw-semi);
	color: var(--clr-accent);
	margin: 0px;
}
img.group-pic {
	width: 300px;
	height: auto;
}
.img-holder {
	display: flex;
	justify-content: center;
	width: 100%;
}
.blog-side-by-side-img {
	display: flex;
    align-items: center;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 0px;
    justify-content: center;
}
.blog-side-by-side-img.stacked {
	display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column;
    row-gap: 0px;
    justify-content: center;
}
img.blog-inline-logo {
	width: 16px; 
	height: auto; 
	vertical-align: middle;
	box-shadow: none;
	border-radius: 0px;
	margin: 0px;
}
.underline {
	text-decoration: underline;
}



/* ------------------------------------------ Terms Styling --------------------------------------------------- */
.terms-section {
	display: flex;
	flex-direction: column;
	margin: 20px 10px 20px 10px;

}
.terms-section a {
	text-decoration: underline;
}
.terms-section h1 {
	font-size: var(--fs-h3);
	font-weight: 600;	
	padding: 10px 0px;
}
.terms-section h2 {
	font-size: var(--fs-h4);
	padding: 5px 0px;
	font-weight: 600;	
}
.terms-section h3 {
	font-size: var(--fs-p);
	font-weight: 500;	
	padding: 3px 0px;
}
.terms-section p {
	font-size: var(--fs-p);
	font-weight: 400;	
}

/* ------------------------------------------ RESPONSIVE Styling --------------------------------------------------- */

/* for people who don't like animations */
@media(prefers-reduced-motion) {
	.hidden {
		transition: none;
	}
}

.showMobile {
	display: flex;
}
.showNotMobile {  /* for tablet and desktop */
	display: none;
}
.showNotDesktop {  /* for tablet and mobile */
	display: flex;
}
.showDesktop {
	display: none;
}

.showMobile-400 {
	display: flex;
}
.showNotMobile-400 {  /* for tablet and desktop */
	display: none;
}

.show460 {
	display: block;
}
.hide460 {
	display: none;
}

/* iphone pro */
@media (min-width: 360px) {
	/* ---------------------------- HERO SECTION ----------------------- */
	.hero-left-top {
		padding: 0px 15px;
	}
	.hero-right-bottom {
		/*padding: 0px 15px; FIX ME: remove padding below once video is added*/
		padding: 0px 15px 20px 15px;
	}
	.signup-shape img{
		top: 10px;
		left: -150px;
	}
	/* ---------------------------- DEMO SECTION ----------------------- */
	/* .video-shape img {
		position: relative;
		width: 100%;
		top: 100px;
		left: 0px;
		z-index: -1;
	} */
}

/* styles for bigger phone */
@media (min-width: 370px) {
	/* ---------------------------- HERO SECTION ----------------------- */
	.signup-shape img{
		top: 70px;
		left: 0px;
		height: 50%;
		width: 100%;
	}
	/* ---------------------------- DEMO SECTION ----------------------- */

}

/* iphone max */
@media (min-width: 400px) {
	.showMobile-400 {
		display: none;
	}
	.showNotMobile-400 {  /* for tablet and desktop */
		display: flex;
	}
	/* ---------------------------- DEMO SECTION ----------------------- */
	.video-shape img {
		top: 140px;
		left: -20px;
	} 
	/* ---------------------------- HIW SECTION ----------------------- */
	.hiw-card {
		/* display: flex;
		flex-direction: row;
		justify-content: flex-start;
		min-width: 310px; */
		width: 95%;
	}
}

/* bigger than a phone, smaller than ipad? */
@media (min-width: 460px) {
	/* ---------------------------- HERO SECTION ----------------------- */
	.left-align-hero-header {
		width: 400px;
	}
	.hero-button-container {
		column-gap: 50px;
	}
	.show460 {
		display: none;
	}
	.hide460 {
		display: block;
	}
	/* ---------------------------- SUPPORT SECTION ----------------------- */
	.support-section-logos {
		grid-template-columns: repeat(3, 100px); /* 3 columns of 100px each */
		grid-template-rows: repeat(2, auto); /* 2 rows, height adjusts automatically */
	}
	/* ---------------------------- HIW SECTION ----------------------- */
	.how-it-works-header {
		width: auto;
	}
	.hiw-card {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		min-width: 310px;
		width: 90%;
		max-width: 700px;
	}
	.hiw-body {
		/* margin-left: -80px; */
		width: 480px;
	}
	.hiw-card-image-not-mobile {
		display: flex;
		width: 160px;
		align-items: center;
		justify-content: center;
	}
}


@media (min-width: 570px) {
	/* ------------------------------------------ AI SEE SCREEN SECTION ----------------------- */
	.screen-section-wiki-shots {
		width: 100%;
		max-width: 1000px;
		display: flex;
		justify-content: space-evenly;
		flex-direction: row;
		margin: 20px 0px;
	}
	.screen-section-wiki-shots img {
		width: 260px;
	}
}

/* styles for tablet */
@media (min-width: 768px) {
	.showMobile {
		display: none;
	}
	.showNotMobile {
		display: flex;
	}
	.showNotDesktop { 
		display: flex;
	}
	.showDesktop {
		display: none;
	}
	

	h1 {
		font-size: var(--fs-h1-ipad);
	}
	h2 {
		font-size: var(--fs-h2-ipad);
	}
	h3 {
		font-size: var(--fs-h3-ipad);
	}
	p {
		font-size: var(--fs-p-ipad);
	}
	.primary-button {
		font-size: var(--fs-button-ipad);
	}
	.secondary-button {
		font-size: var(--fs-button-ipad);
	}
	.container {
		max-width: 1340px;
		width: 100%;
		/* margin: 20px; */
		gap: 40px;
	}
	.container.blog {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	/* ---------------------------- NAV BAR ----------------------- */
	.navRight {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		width: 100%;
	}
	/* ---------------------------- HERO ----------------------- */
	.hero {
		display: flex;
		flex-direction: column;
		row-gap: 10px;
		width: 100%;
		padding: 0px 0px 0px 0px;
		margin: 40px 0px 0px 0px;
		justify-content: space-around;
		padding: 0px 0px 90px 0px;
		/* overflow: hidden;*/
	}
	.left-align-hero-header {
		margin: 20px 0px 10px 0px;
		/* width: 393px; */
		width: 400px;
	}
	.hero-right-bottom {
		padding: 20px 0px;
	}
	.signup-shape {
		overflow-x: visible;
		overflow-y: visible;
	} 
	.signup-shape img {
		top: 180px;
		left: 0px;
		width: 100%;
		height: 150px;
	}
	/* ---------------------------- DEMO SECTION ----------------------- */
	.cool-shape {
		max-width: 560px;
	}
	.demo-section {
		margin: 0px 10px;
		row-gap: 0px;
		padding: 0px 0px 30px 0px;
	}
	.demo-button-space {
		margin: 70px 0px 0px 0px;
	}
	.demo-section-text {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	/* ---------------------------- CARDS SECTION ----------------------- */
	.cards-section {
		background-image: url('dashed-lines-ipad.png'); /* Replace with the path to your image */
		background-size: auto; /* Or use 'contain', depending on your needs */
		background-repeat: no-repeat;
		background-position: center;
	}
	.card-holder {
		row-gap: 20px;
	}
	.card-holder div:hover {
		transform: scale(1.01);
	}
	.card {
		max-width: 381px;
		height: 381px;
	}
	.card-image-mobile {
		display: none;
	}
	.card-image-not-mobile {
		display: flex;
	}

	/* ---------------------------- HIW SECTION ----------------------- */
	.hiw-card {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		min-width: 310px;
		width: 90%;
		max-width: 700px;
	}
	.hiw-body {
		/* margin-left: -80px; */
		width: 480px;
	}
	.hiw-card-image-not-mobile {
		display: flex;
		width: 160px;
		align-items: center;
		justify-content: center;
	}
	/* ---------------------------- GET STARTED SECTION ----------------------- */
	.get-started-section{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
	/* ---------------------------- FOOTER SECTION ----------------------- */
	.footer-social-links-section img {
		width: 24px;
	}
	/* ---------------------------- BLOG SECTION ----------------------- */
	.blog-preview {
		width: auto;
	}
	.blog-post-container {
		margin: 40px 10px 40px 10px;
	}
	.blog-post-header-section {
		width: 90%;
	}
	.blog-post-body {
		max-width: 1200px;
		margin: 0px 0px 0px 20px;
	}
}




/* styles for desktop */
@media (min-width: 991px) {
	.showNotDesktop { 
		display: none !important;
	}
	.showDesktop {
		display: flex;
	}

	h1 {
		font-size: var(--fs-h1-desktop);
	}
	h2 {
		font-size: var(--fs-h2-desktop);
	}
	h3 {
		font-size: var(--fs-h3-desktop);
	}
	p {
		font-size: var(--fs-p-desktop);
	}
	.primary-button {
		font-size: var(--fs-button-desktop);
	}
	.primary-fill-button {
		font-size: var(--fs-button-desktop);
	}
	.secondary-button {
		font-size: var(--fs-button-desktop);
	}
	.button-icon {
		height: 14px;
		margin: 0px 0px 0px 9px;
	}
	.container {
		gap: 60px;
	}
	/* ---------------------------- HERO SECTION ----------------------- */
	.left-align-hero-header {
		margin: 20px 0px 10px 0px;
		width: 600px;
	}
	.signup-card {
		width: 300px;
	}
	.signup-shape {
		position: absolute;
		/* top: 80px;
		left: -90px; */
		overflow-x: visible;
		overflow-y: visible;
	}
	.signup-shape img{
		top: 180px;
		left: 0px;
		width: 100%;
		height: 200px;
	}
	/* ---------------------------- DEMO SECTION ----------------------- */
	.demo-section {
		flex-direction: column;
		align-items: center;
		row-gap: 0px;
		justify-content: space-around;
		/* overflow: hidden; */
		margin: 0px 70px;
		padding: 0px 0px 40px 0px;
	}
	.demo-section-subheader {
		max-width: 600px;	
	}
	.demo-section-right-top {
		text-align: right;
		display: block;
		width: auto;
	}
	.demo-section-left-bottom {
		justify-content: flex-start;
	}
	.demo-section-text {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.play-shape img {
		position: relative;
		width: 215px;
		top: -100px;
		left: 10px;
		z-index: -1;
	}
	.demo-button-space {
		justify-content: center;
	}
	.video-shape {
		position: absolute;
		width: 100%;
		top: 230px;
    	left: -70px;
		z-index: -1;
	}	
	.video-shape img {
		position: relative;
		width: 800px;
		top: 0px;
		left: -90px;
		z-index: -1;
	}	
	/* ---------------------------- CARDS SECTION ----------------------- */
	.card-holder {
		display: flex;
		flex-direction: row;
		justify-content: center;
		row-gap: 20px;
		margin: 0px 0px 10px 0px;
	}
	.cards-section {
		background-image: url('dashed-lines-desktop.png'); /* Replace with the path to your image */
		background-size: auto; /* Or use 'contain', depending on your needs */
		background-repeat: no-repeat;
		background-position: center;
	}
	/* ---------------------------- HIW SECTION ----------------------- */
	.hiw-card {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 850px;
		max-width: 850px;
	}
	.hiw-body {
		margin-left: -80px;
		width: 556px;
	}
	.hiw-card-image-not-mobile {
		display: flex;
		width: 160px;
		align-items: center;
		justify-content: center;
	}
	.white-line {
		max-width: 900px;
	}
	/* ---------------------------- FOOTER SECTION ----------------------- */
	.footer-section-holder {
		width: 920px;
	}
	/* ---------------------------- BLOG SECTION ----------------------- */
	.blog-post-header-section {
		width: 95%;
	}
}


/* styles for desktop */
@media (min-width: 1330px) {
.container-centered {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}
.slash {
	background-color: var(--clr-black);
	height: 100px;
	width: 100%;
	z-index: -100;
	position: absolute;
	top: 1471px;  
	/* top: 513px; */
}
}