.body-content {
		display: none;
	}
	
	.overlay, .popup {
		display: block;
	}
	
	.content {
        padding: 20px;
    }
	
    .darken-effect {
        background-color: rgba(0, 0, 0, 0.9);
    }
	
    .popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #8B4513;
        padding: 20px;
        z-index: 1000;
        border-radius: 0;
        color: white;
        display: none;
        width: auto; /* Adjust width to be auto */
        max-width: 90%; /* Max width for better responsiveness */
        box-sizing: border-box; /* Ensure padding is included in the width */
    }

    .popup button {
        margin: 10px;
        padding: 10px 20px;
        cursor: pointer;
        border: 1px solid #FFFFFF;
        border-radius: 0;
        background-color: transparent;
        color: white;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.99);
        z-index: 999;
        display: none;
    }

    @media (max-width: 600px) {
        .content, .popup {
            padding: 10px;
        }

        .popup button {
            padding: 5px 10px;
            font-size: 14px;
        }
    }

    @media (min-width: 601px) {
        .popup {
            max-width: 600px; /* Optimal max width for desktop */
        }
    }
	
	.fixed-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000; /* Adjust z-index as needed */
	}