/* Reset some default styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Loader Styles */
		#loader {
			position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(197, 198, 200, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
            transition: opacity 0.5s ease;
		}
		.spinner {
		width: 35px;
			aspect-ratio: .75;
			--c: no-repeat linear-gradient(#C07934 0 0);
			background: 
			var(--c) 0%   100%,
			var(--c) 50%  100%,
			var(--c) 100% 100%;
			background-size: 20% 65%;
			animation: l5 1s infinite linear;
		}
		@keyframes l5 {
			20% {background-position: 0% 50% ,50% 100%,100% 100%}
			40% {background-position: 0% 0%  ,50% 50% ,100% 100%}
			60% {background-position: 0% 100%,50% 0%  ,100% 50% }
			80% {background-position: 0% 100%,50% 100%,100% 0%  }
		}

body, html {
	height: 100%;
	font-family: 'Poppins', sans-serif;
	overflow: hidden; /* Prevent overflow due to pseudo-element */
}

	#content {
			display: none; /* Hide content until fully loaded */
	}
	
/* Background setup */
.background {
	position: fixed;
	top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url('images/light_bg.jpg') center/cover no-repeat;
    /*filter: brightness(0.8); /* Darken background image */
    z-index: -1;
}

.layer {
    background-color: rgba(ff, ff, ff, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Header section */
.header-strip {
	width: 100%;
    background-color: rgba(197, 198, 200, 0.3); /* Dark grey background strip */
    padding: 3vh 0;
    text-align: center;
    color: #C07934;
    font-weight: 600;
    font-size: 4vw;
    position: fixed;
    top: 0;
    z-index: 10;
}

/* Main content styling */
.main-content {
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #000;
    text-align: center;
    padding: 5vh 3vw;
    padding-top: calc(10vh + 3vw); /* Offset for header strip */
}

/* Welcome message */
.welcome {
	font-family: 'Poppins', body;
    font-size: 8vw !important;
    font-weight: 550;
    margin-bottom: 1vh;
}

/* Subtitle */
.subtitle {
	font-size: 3vw !important;
	font-weight: 400;
	color: #000;
	margin-top: 1vh;
}

/* Divider line */
.divider {
	width: 25vw;
	height: 1vh;
	background-color: #C07934;
	margin: 2vh 0;
}

h1 {
  margin-bottom: 2vh;
  margin-top: 5vh;
  font-size: 4vw;
  font-weight: 600;
  height: 5vh; /* Fixed height to avoid movement */
  overflow: hidden; /* Prevents any overflow due to larger font sizes */
  color: #C07934;
  text-align: center;
}

.language-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1vh;
}

.language-buttons button {
	font-family: 'Raleway', sans-serif;
	font-size: 3.5vw;
    color: #fff;
    background-color: rgba(45, 45, 45, 0.8);
    padding: 1.5vh 25vw;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 80%; /* Adjusts with screen width */
	display: flex;
	align-items: center;
    justify-content: center;
    text-align: center !important;
    transition: background-color 0.3s ease;
    max-width: 200px; /* Prevents buttons from becoming too wide on larger screens */
	margin-bottom: 1vh;
}

.language-item {
	color: #fff;
    font-size: 4vw;
    padding: 1vh 0;
    cursor: pointer;
    transition: color 0.3s ease;
}

.language-item:hover {
	color: #fff;
}

/* Responsive for mobile screens */
@media (max-width: 600px) {
	.welcome {
		font-size: 10vw;
	}
	.subtitle {
		font-size: 5vw;
	}
	.language-item {
		font-size: 5vw;
	}
}