/* styles.css */

	.fixed-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: auto; /* Adjust to match your header height */
		z-index: 1000; /* Ensures it stays above other content */
		background-color: transparent; /* Or a fallback color if needed */
		pointer-events: auto;

	}

	.top-row {
		display: flex;
		background-color: rgba(10,10,10,0.5);
		flex-direction: row;      
		justify-content: space-between;
		align-items: center;
		height: auto;
		flex-wrap: nowrap;
		margin: 15px;
		padding: 0px;
		border-radius: 25px;
		flex: 10 10 100px;
		
		a:link {
			color: #e6ff99; /* default state */
			text-decoration: none;
			font-weight: bold;
		}

		a:visited {
			color: #d9a300; /* after clicking */
		}

		a:hover {
			color: #8600b3; /* on mouse hover */
		}

		a:active {
			color: #E74C3C; /* while clicking */
		}
		
	}

	.top-row > div {
		background-color: rgba(10, 10, 10, 0.7);
		color: #6c00d9; /* Font color */
		margin: 0px;
		padding: 10px 10px;
		font-size: 16px;
		font-family: Arial, sans-serif;
		text-align: center;
	}

	.group-left,
	.group-right {
		display: flex;
		flex-direction: row;   
		margin: 5px;
		border-radius: 25px;
		gap: 30px;
	}

	.full-width-object {
		width: 100vw;       /* Full viewport width */
		height: 100vh;      /* Optional: full viewport height */
		border: none;       /* Removes default border */
		display: block;     /* Prevents inline spacing issues */
	}
	.auto-frame {
		width: 100%;
		height: auto;
		display: block;
	}


	.container {
		display: flex;
		margin: 20px;
		padding: 10px;
		background-color: rgba(0,0,0,0.5);
		flex-direction: column;      
		justify-content: center;
		align-items: center;
		height: auto;
		flex-wrap: nowrap;
		flex: 10 10 100px;
		border-radius: 25px;
	}

	.containerDark {
		display: flex;
		flex-wrap: nowrap;
		flex: 10 10 100px;
		border: 3px solid #000;
		margin: 5px 20px 40px 20px;
		padding: 10px;
		background-color: rgba(0, 0, 0, 0.5);
		font-size: 30px;
		text-align: center;
		color: white;
		border-radius: 25px;
	}

	.containerLite {
		display: flex;
		flex-wrap: nowrap;
		flex: 10 10 100px;
		margin: 5px 20px 60px 20px;
		padding: 10px;
		background-color: rgba(250,250,250,0.5);
		flex-direction: column;      
		justify-content: center;
		align-items: center;
		height: auto;
		border-radius: 25px;
	}

	.containerLite > div {
		background-color: rgba(200,200,200, 0.5);
		border: 3px solid #000;
		margin: 10px;
		padding: 10px;
		font-size: 30px;
		text-align: center;
		color: black;
		border-radius: 20px;
	}
	
	.slider-container {
		aspect-ratio: 1 / 0.9;
		position: relative;
		width: 90%;
		max-width: 800px;
		margin: 5px 20px 40px 20px;
		padding: 10px;
		overflow: hidden;
		border: 3px solid #000;
		border-radius: 10px;
		user-select: none; /* prevents accidental selection and highlighting inside this container */
		-webkit-user-select: none; /* specific to Safari */
		-ms-user-select: none;     /* specific to IE/Edge */

	}

	/* Before and after images */
	.slider-container img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		cursor: ew-resize;
		object-fit: cover;
	}

	.slider-container .after-image {
		clip-path: inset(0 0 0 50%); /* Initially show half of the after image */
	}

	/* Slider handle */
	.slider-handle {
		position: absolute;
		top: 0;
		left: 50%;
		width: 4px;
		height: 100%;
		background-color: #000;
		z-index: 2;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	}

	.slider-handle::before {
		content: '';
		position: absolute;
		top: 50%;
		left: -48px;
		width: 100px;
		height: 100px;
		background-color: RGB(27, 217, 157);
		border-radius: 50%;
		transform: translateY(-50%);
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	}

	@keyframes sliderHandleHint {
		0%   { left: 50%; }
		25%  { left: 80%; }
		50%  { left: 10%; }
		75%  { left: 55%; }
		100% { left: 50%; }
	}

	@keyframes sliderClipHint {
		0%   { clip-path: inset(0 0 0 50%); }
		25%  { clip-path: inset(0 0 0 80%); }
		50%  { clip-path: inset(0 0 0 10%); }
		75%  { clip-path: inset(0 0 0 55%); }
		100% { clip-path: inset(0 0 0 50%); }
	}

	.slider-container.animate .slider-handle {
		animation: sliderHandleHint 4s ease-in-out;

	}

	.slider-container.animate .after-image {
		animation: sliderClipHint 4s ease-in-out;

	}

	#iframe3 {
		width: 100%;
		height: 600px;
		border: none;
		opacity: 0;
		transition: opacity 0.6s ease;
	}