@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,800');

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Nunito Sans', sans-serif;
}

.page {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F1F1F1;
}

.card {
    width: 960px;
    height: 540px;
    background-color: white;
    box-shadow: 0px 50px 100px rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.menu {
    width: 100%;
    height: 10%;
}

.menu h3 {
    font-size: 1em;
    margin-left: 25px;
    font-weight: 800;
    float: left;
}

.menu a {
    text-decoration: none;
    color: black
}

i {
    float: right;
    font-size: 0.8em;
    margin: 20px 25px;
    transition: font-size 0.2s;
}

i:hover {
    font-size: 1em;
}

.content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content .text {
    margin-bottom: 50px;
    text-align: center;
}

.text h1 {
    font-size: 2.5em;
    line-height: 1;
}

.text p {
    color: rgb(0, 0, 0, 0.5);
    margin-bottom: 40px;
    margin-top: -5px;
}

.text a {
    font-weight: 600;
    color: white;
    text-decoration: none;
    background-color: #fe864c;
    transition: background-color 0.2s;
    transition: color 0.2s;
    padding: 10px 20px;
    border: 2px solid #fe864c;
    border-radius: 5px;
}

.text a:hover,
.text a:active {
    background-color: white;
    color: #fe864c;
    transition: background-color 0.5s, color 0.5s;
}

.photo {
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("https://images.pexels.com/photos/33041/antelope-canyon-lower-canyon-arizona.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.quote {
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(211, 211, 211, 0.144);
    font-style: italic; /* Adds an elegant, quote-like style */
    font-size: 1.5em; /* Increases the font size for emphasis */
    color: #333; /* A darker shade for better readability */
    line-height: 1.8; /* Improves readability */
    text-align: center; /* Centers the text */
    font-family: 'Georgia', serif; /* Uses a serif font for a classic feel */
}

.quote p {
    padding: 0 50px;
}

/* ...existing code... */

/* Add this media query for mobile responsiveness */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden; /* Prevent scrolling in both directions */
    }

    .page {
        padding: 3rem 0; /* Add margin to the top and bottom of the page */
    }

    .card {
        width: 90vw; /* Set the card width to 90% of the viewport width */
        flex-direction: column; /* Stack the sections vertically */
        height: auto; /* Allow the card to adjust its height */
        margin: 0 auto; /* Center the card horizontally */
    }

    .container {
        width: 100%; /* Set the container to take full width of the card */
        height: auto; /* Adjust height dynamically */
        padding: 20px; /* Add some padding for better spacing */
    }

    .photo,
    .quote {
        width: 100%; /* Take full width on mobile */
        height: 300px; /* Set a fixed height for the photo/quote section */
    }

    .quote p {
        padding: 20px; /* Adjust padding for smaller screens */
    }

    .text h1 {
        font-size: 2em; /* Adjust font size for smaller screens */
    }

    .text p {
        font-size: 1em; /* Adjust font size for better readability */
    }

    .text a {
        font-size: 1em; /* Adjust button font size */
        padding: 10px 15px; /* Adjust button padding */
    }
}