/* Apply styles only for screens larger than 1024px */
@media (min-width: 701px) {
    nav ul {
        display: flex;
    }

}


#content-wrap {
  padding-top: 12rem;    /* Footer height */
}

/* General Styles */
body {
    font-family: Poppins, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #ffffff;
    color: #000000;
    display: flex;

    height: 100vh;
}

/* Header */
header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #f6f5f3;
    z-index: 1000;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add shadow for separation */

}

/* Header Content */
.header-content {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center;
    padding: 20px;
    position: relative; /* To position the language selector */
    transition: padding 2.0s ease;
}



/* Logo */


.logo {

    cursor: pointer;
    text-transform: uppercase;
    margin-bottom: 20px; /* Space between logo and navigation */
    z-index: 2000;
	
}

.full-logo, .short-logo {
    margin: 0;
    transition: transform 0.5s ease, opacity 0.5zs ease;
}


.short-logo {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}


/* Navigation */
nav {
    z-index: 1000; /* Position navigation below the logo */
	
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 80px;
    transition: opacity 2.0s ease;
}

.scrolled nav ul {
    list-style: none;
    margin: 0;
    padding: 20px;
    display: flex;
    gap: 30px;
    transition: opacity 2.0s ease;
}

/* Scroll Effects */
.scrolled .header-content {
    flex-direction: row; /* Align items horizontally when scrolled */
    justify-content: center;
    padding: 10px 20px;
}

.scrolled .logo {
    font-size: 24px;
    text-align: left;
    margin-bottom: 0;

}

.scrolled .full-logo {
    display: none; /* Hide the full logo on scroll */
}

.scrolled .short-logo {
    display: block; /* Show the short logo on scroll */
    opacity: 1;
	padding: 10px;
}

/* Expanded Menu */
.expanded nav ul {
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: 50px;
    left: 10px;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    opacity: 1;

}



/* Navigation Link Styles */
nav ul li a {
    font-family: Poppins, sans-serif;
    font-size: 20px; /* Adjust the font size as needed */
    font-weight: 400; /* Set the font weight */
    color: #BD8BBE; /* Change this to your desired color */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Optional: Add transition for color change on hover */
}

/* Navigation Link Hover State */
nav ul li a:hover {
    font-weight: bold;
}



nav ul li a.active {
	
    color: inherit; /* Active link color */

}

html, body {
    height: 100%;
	width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
	
}



main {
    flex: 1; /* This makes the main content area take up the available space */

}
@media screen and (max-width: 1024px) {
	nav ul li a {
		font-size: 17px; /* Adjust the font size as needed */
	}
	nav ul {
		gap: 50px;
	}
	.scrolled nav ul {

		gap: 18px;

	}
	.header-content {

    align-items: center;

	}
	.expanded nav ul {
    right: 0;
	}
	
	header {
		right: 0;
	}
	.cls-1 {
		padding:10px;
	}
	#content-wrap {
		padding-top: 10rem;    /* Footer height */
	}
	@media screen and (min-width: 701px) {
		nav ul li .submenu li a {
			font-size: 17px;
		}
		nav ul li.work:hover {
			margin: 0 -28px;
		}
	}
}

@media screen and (max-width: 700px) {
	nav ul li a {
		font-size: 15px; /* Adjust the font size as needed */
	}
	nav ul {
		gap: 30px;
	}
	.scrolled nav ul {

		gap: 10px;

	}
	.header-content {

    align-items: center;

	}
	.expanded nav ul {
    right: 0;
	}
	
	header {
		right: 0;
	}
	.cls-1 {
		padding:10px;
	}
	#content-wrap {
		padding-top: 10rem;    /* Footer height */
	}
	.language-toggle {
	  right: 0px;
	  font-size: 12px;
	}
	.scrolled .language-toggle{
	  display: none;
	}
}

@media screen and (max-width: 450px) {
	nav ul li a {
		font-size: 12px; /* Adjust the font size as needed */
	}
	nav ul {
		gap: 25px;
	}
	.scrolled nav ul {
		gap: 10px;
		margin-left: 35px; /* Pushes this item to the right */
		justify-content: space-between; /* Ensures logo is on left and nav is on right */
		flex-direction: row; /* Align items horizontally when scrolled */
	}

	

	.cls-1 {
		padding:10px;
	}
	.logo {

		width:100%;
	
	}
	.full-logo {
	width:100%;
padding-top: 1rem;
	}
	#content-wrap {
		padding-top: 10rem;    /* Footer height */
	}
}

@media screen and (max-width: 350px) {
	nav ul li a {
		font-size: 11px; /* Adjust the font size as needed */
	}
	nav ul {
		gap: 20px;
	}
	.scrolled nav ul {
		gap: 8px;
		margin-left: 30px; /* Pushes this item to the right */
		justify-content: space-between; /* Ensures logo is on left and nav is on right */
		flex-direction: row; /* Align items horizontally when scrolled */
	}

	

	.cls-1 {
		padding:5px;
	}
	
	.logo {

		width:100%;
	
	}
	.full-logo {
	width:100%;
	}
	#content-wrap {
	  padding-top: 10rem;    /* Footer height */
	}
}

footer {
	font-family: Poppins, sans-serif;
	
    display: flex;
    justify-content: space-around;
    background-color: #f6f5f3;
    color: #000000;
    padding: 20px;
	width:100%;
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optional: add shadow for separation */

    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease;
	text-transform: uppercase; /* Capitalize all text */
}
footer ul{
	list-style:none;
	text-align: center;
}

footer ul li a {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000000; /* Match the header text color */
    text-decoration: none;
    transition: color 0.3s ease;
	text-transform: uppercase; /* Capitalize all text */
	
}
* {
  box-sizing: border-box;
}

footer ul li a:hover {
	font-weight: bold;
}

.foot {
    font-family: Poppins, sans-serif;
    font-size: 30px;
	text-transform: uppercase; /* Capitalize all text */
}

		
a {
	text-decoration:none;
}

footer h1{
	text-transform: uppercase; /* Capitalize all text */
	text-align: center;
}
	
.cls-1 {
    animation: col steps(1) alternate;
	animation-iteration-count: infinite;
    animation-duration: 15.0s;
	animation-play-state: running;
}

@keyframes col {
	0% { fill: #f7e932; }
    15% { fill: #f9cbd0; }
    30% { fill: #10934f; }
    45% { fill: #bbcbd4; }
    60% { fill: #443a38; }
    75% { fill: #d1c3ac; }
    90% { fill: #bd8bbe; }
    100% { fill: #443a38; }

}
.cls-2 {
    animation: colh steps(1) alternate;
	animation-iteration-count: infinite;
    animation-duration: 6.0s;
	animation-play-state: running;
}
@keyframes colh {
    0% { fill: #443a38; }
    15% { fill: #bd8bbe; }
    30% { fill: #f9cbd0; }
    45% { fill: #d1c3ac; }
    60% { fill: #10934f; }
    75% { fill: #bbcbd4; }
    90% { fill: #f7e932; }
    100% { fill: #443a38; }
}
#logo-container {
	display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Full width to ensure it fills horizontally */
    height: 60vh; /* 60% of the viewport height */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center using absolute positioning */
}

#soon-container {
	display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh; /* 60% of the viewport height */
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%); /* Center using absolute positioning */
}

/* Image styles */
#image-container img {
	max-height: 60vh; /* Ensure image fits within 80% of screen height */
}

#image-container {
	opacity: 0; /* Invisible at the start */
}
/* Style the SVG to fill 80% of the viewport */
.home-logo {
	width: 80vw; /* 80% of the viewport width */
	position: relative;
	animation: scale-animation 2s infinite;
}


.language-toggle {
  position: absolute;
  top: 10px;
  right: 20px;
  font-family: 'Poppins', sans-serif;
}

.language-option {
  cursor: pointer;
}

.language-option.active {
  text-decoration: underline;
}

/* Language-specific visibility */
.hidden {
    opacity: 0;
    visibility: hidden;
    display: none; /* Ensures the element is completely removed from the layout */
}

.visible {
    opacity: 1;
    visibility: visible;
    display: block; /* Ensures it's displayed in the layout */
}

nav ul li.hidden {
    display: none !important; /* Ensures it's completely removed from layout */
    padding: 0;
    margin: 0;
}