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

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

.wrapper {
    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.2; /* Variable to control the scale of the image */
}

.textbox-1 {
    position: absolute; /* Allows free positioning */
    top: -10%; /* Aligns vertically */
    left: 130%; /* 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: 50px 5px 5px 0px;
    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 */
   /* Initial state */
   transform: rotateY(-30deg) 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: 40%;
    left: 70%;
    width: 20%;
    height: 20%;
    background: url(../Images/software-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 */
}