.menu-banner {
    max-width: 740px; /* Sets a maximum width */
    margin: 0 auto; /* Centers the content horizontally */
    background-color: rgba(0, 0, 0, 0.8); /* Adds a slight transparency to the background */

    position: fixed; /* Keeps the banner at the top as you scroll */
    top: 0;
    left: 0;
    right: 0;
    color: rgb(255, 255, 255); /* Text color */
    z-index: 1000; /* High z-index to ensure it stays on top of other content */
    height: 60px; /* Height of the banner */
    display: flex; /* Flexbox to position content inside the banner */
    justify-content: space-around; /* Spreads items evenly */
    align-items: center; /* Center the content vertically */
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.3); /* Add a subtle shadow below the banner */
}
.menu-banner a {
    font-size: 20px; /* Increases text size */
    letter-spacing: 1px; /* Adds slight spacing between letters */
}

/* Style for adding an image to the center of the page */

/* Add perspective to the parent container to enable 3D effect */
.page-wrapper {
    margin-top: 30px; /* Adjust this value as needed */
    perspective: 800px; /* Sets the distance for the perspective effect */
    perspective-origin: 50% 30% /* Adjusts the vanishing point (50% horizontally, 30% vertically) */
}


:root {
    --scale-factor: 1.5; /* Variable to control the scale of the image */
}

.textbox-1 {
    position: absolute; /* Allows free positioning */
    top: -15%; /* Aligns vertically */
    left: -45%; /* Aligns horizontally */
    width: calc(350px * var(--scale-factor)); /* Scale the width by the scale factor */
    height: calc(230px * var(--scale-factor)); /* Maintain 3:2 ratio by scaling height */
    background: url(../Images/standard-frame.svg) no-repeat center; /* Loads and centers the image */
    background-size: contain; /* Ensures the image scales proportionally */
    
    z-index: 10; /* Ensures the image stays on top of other content */
    display: flex; /* Flexbox to center the text inside */
    align-items: center; /* Vertically centers the text */
    justify-content: center; /* Horizontally centers the text */
    text-align: justify; /* Justifies the text for a column-like appearance */
    padding: 60px; /* Adds padding inside the image */
    box-sizing: border-box; /* Ensures padding is included in the width */
    
    transform-style: preserve-3d; /* Ensures the element and its children preserve their 3D transformations */
    /*border: 2px solid red; /* Adds a border to visually confirm the element's position */

   /* Initial state */
   transform: rotateY(50deg) scaleX(0.7) translateX(0) translateY(0);
    
   transition: transform 0.5s linear; /* Use the same duration as the keyframes */
}

.textbox-1:hover {
   /* Final state on hover */
   transform: rotateY(0deg) scaleX(1) translateX(100px) translateY(300px);
}

.textbox-1 a {
    color: rgb(151, 238, 220); /* Same color as the text in the <p> */
    text-decoration: none; /* Remove the underline */
    font-size: 25px; /* Match the font size of the <p> tag */
    font-family: inherit; /* Ensure the font family matches */
}

.textbox-1 a:hover {
    text-decoration: underline; /* Optional: Add underline on hover if you want */
}
/* Styling for the textbox inside the image */
.image-textbox p {
    color: rgb(255, 255, 255); /* White text color */
    font-size: 25px; /* Adjusted text size */
    margin: 0; /* Removes default margin */
    line-height: 1.5; /* Increases line height for readability */
    word-wrap: break-word; /* Ensures long words break */
    max-width: 95%; /* Text takes the full width of the box */
    overflow-wrap: break-word; /* Breaks long words */
    text-align: justify; /* Justifies the text to stretch neatly across the width */
}

.button-1 {
    position: absolute; /* Allows free positioning */
    top: 30%;
    left: 77%;
    width: 20%;
    height: 20%;
    background: url(../src_images/audio_button.png) no-repeat center; /* Loads image */
    background-size: contain; /* Ensures the image scales proportionally */
    
    z-index: 10; /* Ensures the image stays on top of other content */
    transform: scale(1);
    transition: transform 0.5s ease; /* Graceful transition */
    cursor: pointer; /* Shows the pointer on hover to indicate it's clickable */
}
.button-1:hover {
    transform: scale(1.2);
    transition: transform 0.5s ease; /* Graceful transition */
}

.button-2 {
    position: absolute; /* Allows free positioning */
    top: 55%;
    left: 77%;
    width: 20%;
    height: 20%;
    background: url(../src_images/digital_button.png) no-repeat center; /* Loads image */
    background-size: contain; /* Ensures the image scales proportionally */
    
    z-index: 10; /* Ensures the image stays on top of other content */
    transform: scale(1);
    transition: transform 0.5s ease; /* Graceful transition */
    cursor: pointer; /* Shows the pointer on hover to indicate it's clickable */
}
.button-2:hover {
    transform: scale(1.2);
    transition: transform 0.5s ease; /* Graceful transition */
}

.button-3 {
    position: absolute; /* Allows free positioning */
    top: 80%;
    left: 77%;
    width: 20%;
    height: 20%;
    background: url(../Images/games-button.png) no-repeat center; /* Loads image */
    background-size: contain; /* Ensures the image scales proportionally */
    
    z-index: 10; /* Ensures the image stays on top of other content */
    transform: scale(1);
    transition: transform 0.5s ease; /* Graceful transition */
    cursor: pointer; /* Shows the pointer on hover to indicate it's clickable */
}
.button-3:hover {
    transform: scale(1.2);
    transition: transform 0.5s ease; /* Graceful transition */
}

.button-4 {
    position: absolute; /* Allows free positioning */
    top: 105%;
    left: 77%;
    width: 20%;
    height: 20%;
    background: url(../Images/baking-button.jpeg) no-repeat center; /* Loads image */
    background-size: contain; /* Ensures the image scales proportionally */
    
    z-index: 10; /* Ensures the image stays on top of other content */
    transform: scale(1);
    transition: transform 0.5s ease; /* Graceful transition */
    cursor: pointer; /* Shows the pointer on hover to indicate it's clickable */
}
.button-4:hover {
    transform: scale(1.2);
    transition: transform 0.5s ease; /* Graceful transition */
}