.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: #11100e;
    border-bottom: 1px solid #3f3d38;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:20px;
}

.btn-navbar img {
    position: absolute; /* Stack images on top of each other */
    top: 5px;
    left: 20px;
    right: 20px;
    width: 100%; /* Adjust based on the image size, if needed */
    height: 100%;
    opacity: 0; /* Initially hide all images */
    transition: opacity 0.3s ease; /* Add transition for smooth visibility change */
}

.navbutton-text {
    position: absolute;  /* Position the text absolutely */
    top: 50%;  /* Center it vertically */
    left: 50%;  /* Center it horizontally */
    transform: translate(-50%, -20%);  /* Center the text exactly */
    color: #fff;  /* Adjust text color */
    font-family: 'calibri';
    font-weight: bold;  /* Optional: make the text bold */
    z-index: 10;  /* Ensure text is on top of images */
    font-size: 20px;
}
/* Navbar Styling */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.navbutton-text:hover{color:cyan;}
.navbutton-text:active{color:#32332c;}