@font-face {
    font-family: 'GT Super Display';
    src: url('path-to-your-font-file.woff2') format('woff2');
    /* Add additional font formats if needed */
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'GT Super Display', serif;
    background-color: #EAE4D3;
    color: #1a4731;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}

.logo {
    max-width: 50%;
    height: auto;
    margin-bottom: 2rem;
}

.description {
    margin-bottom: 2rem;
    line-height: 1.8;
    text-align: center;
    max-width: 390px; /* Set the maximum width for the text */
    margin-left: auto; /* Center the text block */
    margin-right: auto; /* Center the text block */
}

.invitation {
    margin-bottom: 2rem;
    line-height: 1.8;
    text-align: center;
    max-width: 390px; /* Set the maximum width for the text */
    margin-left: auto; /* Center the text block */
    margin-right: auto; /* Center the text block */
}

/* Klaviyo form styles */
.klaviyo-form-container {
    position: relative;
    width: 100%;
    height: 200px; /* Adjust this value to control the vertical space for the form */
}

#klaviyo-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 600px;
}

footer {
    position: relative;
    height: 300px;
    margin-top: 50px;
}

.palm-leaves {
    width: 100%;
    max-width: 1920px;
    height: auto;
    position: absolute;
    bottom: -150px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    opacity: 1;
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }

    .logo {
        max-width: 70%;
    }

    .description, .invitation {
        font-size: 0.9em;
    }

    .klaviyo-form-container {
        height: 150px; /* Adjust this value for mobile vertical space */
    }

    #klaviyo-form {
        width: 95%; /* Increased width for mobile devices */
        max-width: none; /* Remove max-width constraint on mobile */
    }

    .palm-leaves {
        bottom: 0;
        height: 400px;
        object-fit: cover;
    }

    footer {
        height: 220px;
    }
}