:root{
	--lytestick-blue: #112ad0;
	--lytestick-magenta: #e10ce9;
	--lytestick-aqua: #028a8e;
	--lytestick-voilet: #8e05f0;
	--lytestick-red: #f6132d;
	--lytestick-green: #00c700;
	--lytestick-yellow: #ffcc00;
	--lytestick-orange: #ff9900;
	--magenta-gradient: linear-gradient(135deg, #e10ce9, #ff1493, #8a2be2);
	--blue-gradient:linear-gradient(135deg, #112ad0, #4e73d0, #1e2d72);
	--red-gradient:linear-gradient(135deg, #f6132d, #ff5e5b, #b7001d);
	--voilet-gradient:linear-gradient(135deg, #8e05f0, #bc42f5, #4a0b8b);
	--aqua-gradient:linear-gradient(135deg, #028a8e, #026c70, #00434c);
	--green-gradient: linear-gradient(135deg, #00c700, #2dd62d, #007000);
	--orange-gradient: linear-gradient(135deg, #ff9900, #ffb84d, #cc7000);

}
body {
	background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	/* background: linear-gradient(135deg,#ff007f,#6a00ff,#00d0ff); */
    color: white;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
	letter-spacing: 2px;
	transition: background 1s ease-in-out;
}

h2 {
	color: var(--lytestick-blue);
}

.headline h2::before {
	color: var(--lytestick-blue);
	border-top: 2px solid var(--lytestick-magenta);
}
h3 {
	color: var(--lytestick-magenta)
}

h4 {
	color: #0bfefe;
}

a {
	/* color: var(--lytestick-blue) */
}

#header-sticky {
	display: none !important;
}


#lytestick-hero {
	z-index: 1;
	position: relative;
	max-width: none;
}

#lytestick-hero-small {
	display: none;
}

#lytestick-logo-element {
	position: relative; 
	bottom: auto; 
	left: auto; 
	margin:0px 200px;
}

#intro-lytestick {
	position: relative;
	z-index: 0;
}

#left-triangle, #right-triangle {
	position: relative;
}

.triangle {
    position: absolute;
    top: 0;
    width: 30vw;
    height: 100%;
    background: var(--magenta-gradient);
    transition: all 1s ease-in-out;
    /* transition: clip-path 1s ease-in-out; */
    /* clip-path: polygon(0 0, 0 100%, 100% 50%);  */
    clip-path: polygon(0% 0%, 0% 100%, 100% 50%, 100% 50%);
}

#right-triangle-background {
    clip-path: polygon(0% 50%, 0% 50%, 100% 0%, 100% 100%);
}

#left-triangle.in-view .triangle, #right-triangle.in-view .triangle  {
	width: 48vw;
}

#left-triangle-text, #right-triangle-text {
	min-width:340px;
	transition: margin 1s ease-in-out;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#left-triangle.in-view #left-triangle-text {
	margin-left:4vw;
}
#right-triangle.in-view #right-triangle-text {
	margin-right:10vw;
}

#left-triangle-header {
	font-size: 26px;
	line-height: 26px;
}
#left-triangle-body {
	font-size: 13px;
}

#about-lytestick {
	position: relative;
	z-index: 0;
}

#main-container {
	position: relative;
	z-index: 1;
	/* padding: 50px; */
	max-width: 100%;
	background: none;
	margin: auto;
}

.menu li a {
	color: #fff;
}

.dropdown ul li a {
	color: #000;
}

.hero-wrapper {
	width: 100%;
	display: flex;
	overflow: visible;
	height: 800px;
	/* min-height:90%; */
}

.hero-carousel {
	position: relative;
	width: 100%;
	height: 100%;
}

.hero {
	height: 900px;
}

.hero-background {
	width: 100%;
	height: 100%;
	opacity: 1;
	z-index: 20;
	visibility: inherit;
	position: inherit;
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	pointer-events: none;
	z-index: 0;
}

.parallax-element {
	position: absolute;
	will-change: transform;
	transition: transform 0.2s ease-out;
}

.parallax-element img {
	width: 100%;
	height: auto;
}

.sized-img {
	width:100%;
	height:auto;
}

.cta-button {
	display: inline-block;
	padding: 10px 20px;
	background-color: #00ff99;
	color: #1a1a1d;
	font-size: 1.2rem;
	text-transform: uppercase;
	margin-top: 20px;
	text-decoration: none;
}

.cta-button:hover {
	background-color: #00cc7a;
}

/* Features Section */
.features {
	padding: 60px;
	/* background-color: #1a1a1d; */
	/* background: radial-gradient(circle at center, 
		rgba(255, 20, 147, 0.4), 
		rgba(0, 170, 255, 0.4),  
		rgba(26, 9, 51, 0.8) 50%,
		rgba(10, 15, 30, 0.95) 100%
	); */
	text-align: center;
	position: relative;
	z-index: 1;
}

.features h2 {
	font-size: 2.5rem;
	color: var(--lytestick-magenta);
}

.feature-cards {
	display: flex;
	justify-content: space-around;
	gap: 20px;
}

.card-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
	gap: 20px;
	padding: 20px;
	max-width: 1200px;
	margin: 0 auto;
}

.card.usbCard h4{
	color: #FFF;
}

.card {
	border: none;
}
.square-card {
    background: linear-gradient(135deg, rgba(255, 0, 128, 0.2), rgba(0, 170, 255, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.3); /* Soft border */
    padding: 25px;
    margin: 20px 0;
	height: 100%;
	border-radius: 0;
    /* box-shadow: 0 4px 30px rgba(0, 255, 255, 0.3),  */
                /* 0 0 20px rgba(255, 0, 128, 0.4); Neon glow */
    transition: all 1s ease-in-out;
}
.square-card:hover {
	transform: scale(1.05);
	box-shadow: 0 0 25px rgba(255, 20, 147, 0.6), 
				0 0 20px rgba(0, 170, 255, 0.4);
}
.square-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(135deg, 
		rgba(255, 20, 147, 0.2), 
		rgba(0, 170, 255, 0.2)   
	);
	opacity: 0.5;
	transition: opacity 0.3s ease-in-out;
}
.square-card:hover::before {
	opacity: 0.8;
}

.square-card img {
	height:200px;
}

.square-card h3, .square-card p {
    color: white;
    text-align: center;
}
.square-card h3 {
	font-size: 1.8rem;
}

.square-card p {
	font-size: 1.3rem;
}

.card.usbCard {
	border-radius: 0;
}

.timeline-item.style-1, .card:has(#tab-1-1.active)  {
	background: var(--red-gradient) !important;
}
.card > .tab-pane > div > h3 {
	color: #fff;
}
.card > .tab-pane > div > div > h5 {
	color: #000;
}
#card-1 {
	background-color: var(--lytestick-red) !important;
}
#card-2 {
	background-color: var(--lytestick-blue) !important;
}
#card-3 {
	background-color: var(--lytestick-voilet) !important;
}
#card-4 {
	background-color: var(--lytestick-aqua) !important;
}
#card-5 {
	background-color: var(--lytestick-green) !important;
}
#card-6 {
	background-color: var(--lytestick-orange) !important;
}
.timeline-item.style-2, .card:has(#tab-1-2.active) {
	background: var(--blue-gradient) !important;
}
.timeline-item.style-3, .card:has(#tab-1-3.active) {
	background: var(--voilet-gradient) !important;
}
.card:has(#tab-1-4.active)  {
	background: var(--aqua-gradient) !important;
}
.card:has(#tab-1-5.active) {
	background: var(--green-gradient) !important;
}
.card:has(#tab-1-6.active) {
	background: var(--orange-gradient) !important;
}
.step-section {
	color: #000;
	letter-spacing: normal;
	border-radius: 0;
}

.gallery {
	margin-bottom: 0px;
	text-align: center;
}

.gallery h2 {
	font-size: 2.5rem;
	margin-bottom: 75px;
	color: #0bfefe;
}
.gallery a:hover {
	color: #0bfefe;
}

.countdown {
	display: flex;
	justify-content: center;
	gap: 30px;
	padding: 20px;
	background-color: rgba(18, 18, 18, 0.8);
	border-radius: 10px;
	margin: 0 auto;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.counter-2 {
	text-align: center;
	color: var(--lytestick-magenta);
	font-size: 3rem;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 20px;
	border-radius: 10px;
	transition: transform 0.3s ease;
}

.counter-2-label {
	text-align: center;
	color: var(--lytestick-red) !important;
}

.info-section {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    padding: 50px;
}

.info-section img {
	height: 400px;
}

.wow2 {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.wow2.in-view {
    opacity: 1;
    transform: translateY(0);
}

.info-graphic {
    width: 60%;
    max-width: 500px;
    margin-top: 30px;
    filter: drop-shadow(0 0 20px rgba(255, 0, 255, 0.5));
}


/* Initial styling for the section */
.ribbon-section {
	position: relative;
  }
  
  .ribbon {
	position: absolute;
	top: 0px;
	left: -1600px; 
	width: 5000px;  /* Adjust the ribbon width */
	height: 30px;  /* Adjust the ribbon height */
	background: linear-gradient(45deg, #f6132d, #8e05f0); /* Ribbon gradient */
	transform: translate(-5000px, 5000px) rotate(-45deg); /* Create the diagonal effect */
	opacity: 0; /* Initially invisible */
	transition: transform 1s ease, opacity 1s ease; /* Smooth transition */
	z-index: -1;
  }
  .ribbon-2 {
	position: absolute;
	bottom: 1000px;
	right: -2500px; 
	width: 5000px;  
	height: 30px;  
	background: linear-gradient(45deg, #f6132d, #8e05f0); 
	transform: translate(-3000px, 3000px) rotate(-45deg); 
	opacity: 0; 
	transition: transform 1s ease, opacity 1s ease; 
  }
  .ribbon-3 {
	position: absolute;
	bottom: 0px;
	right: -2200px; 
	width: 5000px;  
	height: 30px;  
	background: linear-gradient(45deg, #f6132d, #8e05f0); 
	transform: translate(-5000px, 5000px) rotate(-45deg); 
	opacity: 0; 
	transition: transform 1s ease, opacity 1s ease; 
  }
  
  @keyframes ribbonAnimation {
	to {
	  transform: translate(0) rotate(-45deg); 
	  opacity: 1;
	}
  }
  
  /* Class to trigger animation when the section is in view */
  .ribbon-section.in-view .ribbon {
	animation: ribbonAnimation 2s forwards;
  }
  .ribbon-section.in-view .ribbon-2 {
	animation: ribbonAnimation 2s forwards;
  }
  .ribbon-section.in-view .ribbon-3 {
	animation: ribbonAnimation 2s forwards;
  }
  .ribbon-section.out-view .ribbon {
	transform: translate(-5000px, 5000px) rotate(-45deg); /* Create the diagonal effect */
  }
  .ribbon-section.out-view .ribbon-2 {
	transform: translate(-5000px, 5000px) rotate(-45deg); /* Create the diagonal effect */
  }
  .ribbon-section.out-view .ribbon-3 {
	transform: translate(-5000px, 5000px) rotate(-45deg); /* Create the diagonal effect */
}
@media(max-width: 600px) {
	#lytestick-hero {
		width: 300px;
	}
	.hero-wrapper {
		height: 300px;
	}
	.hidden-mobile {
		display:none;
	}
}

@media(min-width: 600px) {
	.hero-wrapper {
		height: 350px;
	}
}

@media(min-width: 900px) {
	.hero-wrapper {
		height: 400px;
	}

}

@media(max-width: 800px) {
	.card-container {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media(max-width: 1000px) {
	#lytestick-logo-element {
		margin:0 100px;
	}
	.hero {
		height: 90vh;
	}
	.hero-center-img {
	height: 300px !important;
	}

	.big-revolution, .title2{ 
		font-size: 80px !important;
		margin-left: 10%;

	}
	.small-title, .small-revolution, .medium-revolution {
		font-size: 50px !important;
		margin-left: 10%;

	}
	.card-container {
		grid-template-columns: repeat(2, 1fr); 
	}
}
@media(min-width: 1000px) {

	.hero-wrapper {
	height: 670px;
	}
	.hero-center-img {
	height: 500px !important;
	}
}

@media(max-width: 600px) {
	#lytestick-hero-small {

        top: 70px !important;
	}
	#lytestick-logo-element {
		margin: 0 50px;
	}
	.big-revolution, .title2{ 
		font-size: 60px !important;
		margin-left: 10%;
	}
	.small-title, .small-revolution, .medium-revolution {
		font-size: 30px !important;
		margin-left: 10%;
	}
	.card-container {
		grid-template-columns: 1fr; /* Single column on smaller screens */
	}
	
	#lytestick-hero {
		z-index: 1;position: relative;max-width: none;
	}

}

@media(max-width: 500px) {
	#lytestick-hero-small {

        top: 80px !important;
	}
	.hero-center-img {
		display:none !important;
	}
	.hero-background:nth-child(1) {
		background: url(/assets/images/backgrounds/unsplash1.jpg);
	}
	.wow {
		/* animation: none !important; */
	}
	#features {
		padding: 0;
	}
}

@media(max-width: 1200px) {
	#left-triangle-body {
		font-size: 16px;
	}
	#lytestick-hero-small {
		display: flex;
		position: absolute;
        top: 10px;
	}
	#triangle-container {
		display: flex;
		flex-direction: column;
		pointer-events: none;
		height: auto;
	}
	#left-triangle-background:has(+ #left-triangle-text.in-view) {
		height: 1000px !important;
		width: 2000px !important	;
	}
	#left-triangle-background, #right-triangle-background {
		width: 130% !important;
		height: 100%;
	}

	/* #left-triangle.in-view {
		width:100%;
	} */

	#left-triangle-background, #right-triangle-background {
		height: 800px !important;
	}
	#right-triangle-background {
		/* display: none; */
	}
	#right-triangle {
		opacity: 0;
		visibility: hidden;
	}
	#left-triangle-text, #right-triangle-text {
		position: absolute;
	}
	#left-triangle #left-triangle-text {
		margin-left: 0;
		top:45%;
	}
	#right-triangle.in-view #right-triangle-text {
		margin-right: 0;
	}

	.timeline-item * img {
		max-height: 600px;
	}
}

@media(max-width: 450px) {
	#lytestick-hero-small {

        top: 160px !important;
	}
}
@media(max-width: 400px) {
	#lytestick-hero-small {

        top: 220px !important;
	}
}