/* Modal styles */
		#videoModal {
			display: none;
			position: fixed;
			z-index: 1000;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			background-color: rgba(0, 0, 0, 0.9);
			transition: opacity 0.5s ease;
		}
		#videoModalContent {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: transparent;
			padding: 20px;
			border: none;
			width: 80%;
			max-width: 1600px;
		}
		#videoModal video {
			width: 100%;
			height: auto;
		}
		#closeModal {
			position: absolute;
			top: 50px;
			right: 50px;
			color: white;
			font-size: 50px;
			font-weight: bold;
			cursor: pointer;
		}
		@keyframes pulse {
			0% {
				box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
			}
			70% {
				box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
			}
			100% {
				box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
			}
		}
		.title, .outline-text {
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            font-size: clamp(1.7rem, 4vw, 6rem);
            font-family: var(--title-font);
            white-space: nowrap; /* Prevent line breaks */
            overflow: hidden; /* Hide overflowed text */
        }

        .title {
            z-index: 1; /* Ensure title is above outline text */
            color: transparent; /* Transparent text */
            -webkit-text-stroke: 2px var(--tertiary-color); /* Outline */
            text-stroke: 2px #333; /* Outline */
            animation: fadeInAndExpand 3s ease forwards; /* Adjust duration to slow down */
        }

        .outline-text {
            z-index: 0; /* Ensure outline text is behind title */
            color: var(--tertiary-color); /* Text color */
            animation: fadeInAndExpand 3s ease forwards; /* Adjust duration to slow down */
        }

        @keyframes fadeInAndExpand {
            from {
                letter-spacing: 5px;
                opacity: 0;
            }
            to {
                letter-spacing: normal;
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .desc {
        	top: 50%;
        	position: absolute;
        	z-index: 1;
        	color: var(--tertiary-color);
        	font-size: clamp(1rem, 2vw, 2rem);
        	animation: fadeIn 2s ease forwards;
        }

	#heroBanner {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    margin-bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
}

#heroBanner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

	#scrollToVideoButton {
		filter: invert(1);
	    position: absolute;
	    bottom: 20px; /* Adjust top position as needed */
	    left: 50%; /* Center horizontally */
	    transform: translateX(-50%); /* Center horizontally */
	    z-index: 1; /* Ensure the button is on top of the hero banner */
	    transition: all 0.3s ease;
	}

	#scrollToVideoButton:hover,
	#scrollToVideoButton.active {
		filter: invert(76%) sepia(100%) saturate(1000%) hue-rotate(-45deg) brightness(110%) contrast(100%);
		bottom: 18px; /* Adjust top position as needed */
		cursor: pointer;
	}

	#videoContainer {
	    position: relative;
	}

	#video {
	    width: 100%;
	    height: auto;
	    display: block;
	}

	#videoOverlay {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0, 0, 0, 0.4); /* 40% opacity black overlay */
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    color: white;
	    text-align: center;
	}

	#videoOverlay h2 {
	    margin-bottom: 10px;
	    margin-left: 20px;
	    margin-left: 20px;
	}

	#videoOverlay p {
	    margin: 0;
	    max-width: 800px;
	    padding: 0 20px; /* Adjust as needed */
	}

	#letsgoLink {
    	width: 100%;
    	text-align: center;
	}

	#letsgoLink a {
	    display: block;
	    color: var(--secondary-color);
	    font-size: clamp(10vw, 100vw, 25vw); /* Adjust min, preferred, and max font sizes as needed */
	    text-decoration: none;
	    width: 100%;
	    transition: all 0.5s ease;
	}

	#letsgoLink a:hover,
	#letsgoLink a.active {
		text-decoration: underline;
		color: var(--tertiary-color);
	}

	#letsgoLink p {
		size: clamp(1rem, 5rem, 10rem);
		color: var(--secondary-color);
		text-align: center;
	}

	#mainherovids {
		position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	    z-index: -1;
	}

	@media screen and (max-width: 900px) {
	    #videoContainer {
	        display: flex;
	        flex-direction: column;
	    }

	    #videoOverlay {
	        position: static;
	        background-color: transparent;
	        height: auto;
	        margin-top: 20px; /* Adjust as needed */
	    }

	    #videoOverlay h2,
	    #videoOverlay p {
	    	padding-left: 25px;
	    	padding-right: 25px;
	        margin: 10px;
	        max-width: 800px;
	        text-align: justify;
	    }

	    #scrollToVideoButton {
	    bottom: 60px; /* Adjust top position as needed */
		}

		#scrollToVideoButton:hover,
		#scrollToVideoButton.active {
			filter: invert(76%) sepia(100%) saturate(1000%) hue-rotate(-45deg) brightness(110%) contrast(100%);
			bottom: 58px; /* Adjust top position as needed */
		}
	}