@charset "UTF-8";
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Layer-2: Sidebar sliding in from the left */
.layer-2 {
  position: fixed;
  top: 0;
  left: -200px; /* Initially hidden */
  width: 200px;
  height: 100vh;
  background-color: #ffffff; /* Slight transparency for layered effect */
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3); /* Right-edge shadow */
  border-right: 1px solid black;
  z-index: 5; /* Above layer-1 */
  transition: left 1.5s cubic-bezier(0.1, 0.8, 0.1, 1)!important; /* Smooth slide-in */
}

.layer-2 .sidebar-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 20px;
}


/* Logo: Responsive and centered within sidebar */
.logo {
  margin-top: 2000% !important;
  margin-left: 0px;
  max-width: 450%; /* Resize proportionally within the sidebar width */
  height: auto; /* Maintain aspect ratio */
  transform: rotate(-90deg); /* Rotate to vertical */
}

/* Header with title and menu */
.header {
  display: flex;
  align-items: center;
  gap: 200px; /* Space between title and menu */
  margin-top: 20px;
  z-index: 15; 
}

.title {
  font-size: 2rem;
  color: black;
}

/* Menu styling */
.menu {
	z-index: 15;  /* Adjusted menu styles for in-page use */
}

.menu ul {
  display: flex;
  list-style: none;
}

.menu-item {
  margin-right: 20px;
}

/* Sidebar (Layer-2): Adjusted positioning to slide in 150px from the left */
.layer-2 {
  position: fixed;
  top: 0;
  left: -150px; /* Start 150px off-screen to the left */
  width: 100px; /* Reduced width */
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
  border-right: 1px solid black;
  z-index: 2;
  transition: left 1s cubic-bezier(0.1, 0.2, 0.2, 1); /* Smooth slide-in */
}

/* Sidebar when active: set to 0 to align with the edge */
.layer-2.active {
  left: 0; /* Position at the edge of the page */
}

.layer-4 {
  position: fixed;
  top: 0;
  left: -100%; /* Starts off-screen */
  width: 100vw;
  height: 100vh;
  background-color: white; /* White background */
  z-index: 10; /* Ensure it appears above other layers */
  transition: left 2s cubic-bezier(0.1, 0.8, 0.1, 1); /* Smooth swipe transition */
}

/* Loader overlay */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: white; /* Loader background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

/* Loader animation (simple spinning circle) */
.loader {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top: 4px solid #333;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

/* Keyframes for loader spin animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Hide loader after page load */
.hidden {
  display: none;
}

/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }

}