@media screen and (max-width: 1081px) and (orientation: landscape) {
    /* Full image container (ensure the image displays properly) */
     .nav {
        max-height: calc(70vh - 50px) !important; /* Make the menu fit the screen */
        overflow-y: scroll !important;  /* Make sure the menu is scrollable */
        padding-right: 10px;  /* Optional: Adjust the right padding to make sure it doesn't cut off */
    }
	.full-image-container {
        position: relative !important;
        min-height: 100vh !important;
        overflow: visible !important;
        display: flex !important;  /* Flexbox to align content side by side */
        flex-direction: row !important;  /* Align content horizontally */
    }

    .full-image-container img {
        width: 75% !important;  /* Image takes 50% of the screen width */
        height: 100vh !important;  /* Set image height to viewport height */
        object-fit: cover !important;  /* Ensure the image covers the area without stretching */
        display: block !important;
        margin-top: 0 !important;
    }

    /* Tagline positioning */
    .tagline {
        position: absolute !important;
        top: 5px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 16px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        color: white !important;
        padding: 8px 12px !important;
        border-radius: 5px !important;
        z-index: 10 !important;
		width: 70% !important;
    }

    /* Content container layout adjustment */
    .content-container {
        display: flex !important;  /* Align content horizontally */
        min-height: 100vh !important;  /* Full viewport height */
        flex-direction: row !important;  /* Ensure image and text stay side by side */
        padding-top: 0 !important; /* No top padding */
        margin-top: 0 !important; /* Remove margin-top */
    }

    /* Image section adjustments */
    .image-section {
        width: 50% !important;  /* Image section takes up 50% of the width */
        height: 100vh !important;  /* Set image height to 100vh (viewport height) */
        position: relative !important;
        margin: 0 !important;  /* Remove extra margin */
    }

    /* Image itself inside the image section */
    .image-section img {
        width: 100% !important;  /* Ensure image takes full width of container */
        height: 100% !important;  /* Make image height fill the container */
        object-fit: cover !important;  /* Ensure image covers the container properly */
        display: block !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Text section adjustments */
    .text-section {
        width: 50% !important;  /* Text takes up remaining 50% */
        padding: 20px !important;
        font-size: 18px;
        line-height: 1.6;
        position: relative;
        display: flex !important;
        flex-direction: column !important;  /* Ensure text stacks vertically */
        justify-content: flex-start !important;  /* Align text at the top */
        flex-grow: 1 !important;  /* Allow the text section to grow with content */
        min-height: 100vh !important;  /* Ensure text section fills the height of the image */
        margin: 0 !important;  /* Remove unnecessary margin */
    }

    /* Adjustments for header and list inside text-section */
    .text-section h1 {
        margin-top: 0 !important;  /* Remove extra margin above the heading */
    }

    .text-section ul {
        padding-left: 20px; /* Adjust list indentation */
    }
}