body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    padding: 20px;
    flex-direction: column; /* Default to column layout for smaller screens */
}

/* Landing Page Styles */
.landing-page {
    background: linear-gradient(to right, rgb(222, 151, 231), lightblue);
    color: black;
}

.landing-page h1 {
    font-size: 2.5em; /* Larger heading for the landing page */
}

.landing-page p {
    font-size: 1.6em; /* Slightly larger paragraph text */
}

/* Second Page Styles */
.second-page {
    background: linear-gradient(to right, #f0e9f8, #bd9ceb); /* Creamish white with a touch of violet */
    color: black;
    justify-content: space-between;
    flex-direction: row; /* Switch to row layout for larger screens */
    padding: 30px;
}

.second-page h1 {
    font-size: 2.2em; /* Medium-sized heading for the second page */
}

.second-page p {
    font-size: 1.4em; /* Normal paragraph text size */
}

/* Third Page Styles */
.third-page {
    background: linear-gradient(to right, #f2e5ff, #d3c2ff); /* Slightly darker gradient to differentiate from the second page */
    color: black;
}

.third-page h1 {
    font-size: 2.2em; /* Heading size slightly different to stand out */
}

.third-page p {
    font-size: 1.5em; /* Keeping paragraph size consistent with the second page */
}

/* Logo styling */
.logo img {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px;
}

.content {
    max-width: 90%;
}

button {
    padding: 10px 20px;
    margin-top: 20px;
    border: none;
    background-color: darkviolet;
    color: white;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px
}

button:hover {
    background-color: purple;
}

/* Styling for the form container to ensure proper alignment */
form {
    display: flex; /* Align the input and button in a single row */
    justify-content: center; /* Center the form elements */
    align-items: center; /* Vertically align the items */
    margin-top: 20px; /* Add some margin above the form */
}

/* Styling for the email input box */
form input[type="email"] {
    padding: 0 15px; /* Padding inside the input box */
    width: 300px; /* Set the width of the input box */
    height: 48px; /* Match the height of the button */
    font-size: 15px; /* Font size for better readability */
    border: 1px solid #9e6bec; /* Border for the input box */
    border-right: none; /* Remove the right border to blend with the button */
    border-radius: 5px 0 0 5px; /* Rounded corners on the left side only */
    outline: none; /* Remove default outline */
    box-sizing: border-box; /* Include padding and border in the element's width */
}

/* Styling for the submit button */
form button {
    padding: 0 20px; /* Add padding inside the button */
    font-size: 16px; /* Font size for the button text */
    height: 48px; /* Match the height of the input box exactly */
    border: none; /* Remove the button border */
    border-radius: 0 5px 5px 0; /* Rounded corners on the right side only */
    cursor: pointer; /* Change the cursor to a pointer on hover */
    display: flex; /* Ensure button text stays centered */
    align-items: center; /* Vertically center text */
    justify-content: center; /* Horizontally center text */
    margin: 0; /* Remove any extra margin */
    position: relative; /* Use relative positioning for fine-tuning */
    top: 0px; /* Adjust the button alignment slightly */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

form-response {
    font-size: 10px; /* Adjust the font size as needed */
}


.social-media {
    margin-top: 20px;
}

.social-media a {
    margin: 0 10px;
}

.social-media img {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* Media Queries for Responsive Design */
@media (min-width: 768px) {
    .content {
        max-width: 50%;
    }

    .second-page {
        flex-direction: row; /* Row layout for tablets and larger screens */
    }
    
    .animation {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .animation img {
        max-width: 400px;
        height: auto;
    }
}

@media (max-width: 767px) {
    section {
        flex-direction: column; /* Column layout for smaller screens */
    }

    .animation img {
        max-width: 80%;
        height: auto;
        margin-top: 20px;
    }

    .logo img {
        width: 80px; /* Smaller logo for mobile */
    }

    .content h1 {
        font-size: 1.8em;
    }

    .content p {
        font-size: 1em;
    }
}