.image-container {
    display: flex;
    gap: 20px;
}
.matched-size {
    width: 700px;
    height: auto;
    object-fit: cover;
    border: 2px solid #ccc;
}
#background-container {
    position: relative;
    width: 100%; /* Adjust to fit your design */
    max-width: 800px; /* Limit size for responsiveness */
    height: 500px; /* Match the terminal's height */
    margin: 0 auto; /* Center the container */
    background-color: black; /* Or use an image: url('../../images/background.jpg'); */
    overflow: hidden; /* Prevent overflow issues */
}

#terminal-iframe {
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
}

.content {
    position: relative;
    margin-top: 520px; /* Adjust to move below the terminal section */
}

.inner {
    padding: 20px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional, for a cleaner look */
}
.text-and-video {
    display: flex;
    align-items: stretch; /* Ensures both the paragraph and the iframe are the same height */
    gap: 20px; /* Adds space between the paragraph and iframe */
}

.text-and-video p {
    flex: 1; /* Makes the paragraph take up the remaining width */
    margin: 0;
    height: 315px; /* Matches the iframe's height */
    overflow: auto; /* Adds a scrollbar if the text overflows the container */
    line-height: 1.5; /* Adjusts line spacing for better readability */
    padding: 10px; /* Optional: Adds padding inside the paragraph */
    box-sizing: border-box; /* Includes padding in the height calculation */
}

.text-and-video iframe {
    flex-shrink: 0; /* Keeps the iframe at its natural size */
}