body {
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
  margin: 0;
  padding: 0;
}

#background-video {
  z-index: 0; /* Set a lower z-index for the video */
}

.background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Set z-index as needed */
}

.background-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This ensures the image covers the entire container */
}



/* below line is testing/dev-mode :*/
/* below line is testing/dev-mode :*/
 
.wrapper{
    position: absolute;
    bottom: 29%;
    right: 3%;
    z-index: 2; /* Set a higher z-index for the wrapper/menu */
}

@media screen and (max-width: 768px) {
    /* Adjust styles for smaller screens */
    .wrapper {
		/* background-color: red;
		border-color: aquamarine; */
        position: absolute;
        bottom: 10%;
        right: 10%;
        z-index: 2;
    }
}

.menu-container { /* -> The menu-container keeps both line and menu icons in place */
  position: relative;
} 


.icon-container {
  position: relative;
  overflow: hidden;  
	/* background-color: red; */
	width: 250px;
	display: flex;
	align-content:flex-end;
}

/*
.icon-container .item { 
} */

#photo { background-image: url('files/ico_cam.png'); }
#lights { background-image: url('files/ico_lights.png'); }
#com { background-image: url('files/ico_tlk.png'); }

.icon {
  opacity: 0;
  width: 42px;
  height: 42px;
  background-size: cover;
  display: inline-block;
  transform: translateY(150px); /* Set initial position below the line */
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
  margin-right: 18px; 
}


.line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 4px;
  background-color: cyan;
  opacity: 0;
  transition: width 0.8s, opacity 1s; /* Updated transition properties */
}

.menu-container.loaded .line {
  width: 250px;
  opacity: 1;
}

.menu-container.loaded .icon {
  
  transform: translateY(0); /* Adjust the value to stop the icons above the line */
  opacity: 1;
  transition-delay: 5.5s; 
}

/* Apply a delay for the line and icons */
.line, .icon {
  transition-delay: 5s; /* 10 seconds delay */
}


/* Add styles for the submenu-container */
/* Add styles for the submenu-container */

/*
.submenu-container {
    position: absolute;
    bottom: 30%;
    right: 3%;
    display: flex;
    background-color: rgba(0, 0, 0, 0.18);
    flex-direction: column;
    position: absolute;
    opacity: 0;
    pointer-events: none; /* Disable pointer events when hidden
    transition: opacity 0.3s; /* Smooth transition for opacity 
}

/* Styles for the submenu items */


.overlay {
    position: absolute;
    bottom: 1%; /* Height of the icon container */
	left: 1000px;
    /* right: 30px; */
    transform: translateX(-50%);
    height: 10px;
    width: 250px; /* Adjust the width as needed */
    background-color: rgba(0, 0, 0, 0.5); /* Semitransparent black */
    transition: height 1s; /* Smooth transition for height */
    pointer-events: none; /* Allow pointer events to pass through */
}

/* For dev-mode/testing purposes */

.d_container {
	
    position: absolute;
	width: 100%;
	background-color: red;
	z-index: 4;

	
}
.d_button {
	position: absolute;
	z-index: 4;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: cyan;
    color: white;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/*
.d_button:hover {
    opacity: 1;
} */