.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 */
        }
    }
	
	.scroll-button {
		border: 2px solid #d7b369;
		color: #d7b369;
		background-color: transparent;
		padding: 10px 20px;
		font-size: 16px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.scroll-button:hover {
		background-color: #A0522D;
		color: white;
	}