/* General styles for both desktop and mobile */
.banner {
    padding: 20px;
    height: 100vh;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align items horizontally */
    justify-content: center; /* Center align items vertically */
    text-align: justify; /* Center text by default */
}

.parallax {
    width: 100%;
    max-width: 700px; /* Limit the max width for desktop */
    color: #000000;
    padding: 20px; /* Ensure padding for the content */
    box-sizing: border-box; /* Include padding in the element's total width and height */
}

.parallax-description {

    width: 100%;
    max-width: 700px; /* Limit the max width for desktop */
    color: #000000;
    font-weight: lighter;
    padding: 20px; /* Ensure padding for the content */
    box-sizing: border-box; /* Include padding in the element's total width and height */
    margin: 0; /* Reset margin */
}

/* Styles for mobile screens */
@media (max-width: 820px) {
    .banner {
        padding: 20px;
        height: auto; /* Allow the height to adjust based on content */
    }

	.parallax {
		margin-top: 100px;
	}

	.parallax-description {
		height: 100vh;
	}

    .parallax, .parallax-description {
        width: 100%;
        max-width: none; /* Remove max width restriction for mobile */
    }
}