html, body {
    width: 100%;
    height: 100%; /* Full height for the root element */
    overflow: hidden;
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: #F6EADE;
}

.landing-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 100vw;
    height: 100vh; /* Adjust the container height to fill the viewport */
    flex-direction: column;
}

.container {
    display: flex;
    height: 90vh;
    align-items: center;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 460px;
    height: 550px;
    padding: 60px;
}

.privacy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100vh;
    padding: 60px;
    margin: auto;
    max-width: 50%;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.icon-header {
    flex-grow: 0;
    align-self: flex-start;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #545454;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    gap: 8px;
    height: 50px;

    img {
        height: 24px;
        animation: rotate 20s linear infinite;
    }
}

.title {
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 16px; /* Adjusted to 16px */
    color: #000; /* Sample color */
}

.tagline {
    font-family: 'Lato', sans-serif;
    font-weight: 900; /* Black */
    font-size: 50px; /* Adjusted to 50px */
    margin: 0;
    line-height: 1.2em;
}


.description {
    font-family: 'Inter', sans-serif;
    font-weight: 300; /* Light */
    line-height: 1.7em;
    color: #545454;
    margin: 20px 0;
}

.footer {
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    color: #858585;
    padding: 16px;

    a {
        text-decoration: none;
        font-weight: 800;
        color: #545454;
    }
}

.break {
    flex-basis: 100%;
}

.app-store-link {
    display: flex;
    flex-direction: column;
    align-items: start;

    p {
        font-size: 12px;
        font-family: 'Inter', sans-serif;
        font-weight: 300;
        color: #858585;
    }

    img {
        height: 100%; /* Adjust as necessary */
    }

    a {
        text-decoration: none;
        font-weight: 800;
        color: #F76E11;;
    }
}

.video-container video {
    width: 380px;
    object-fit: contain;
}

/* Base styles */
/* ... */

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
    html, body {
        overflow: auto; /* Allow scrolling on mobile */
        scroll-behavior: smooth;
    }

    .landing-container {
        height: auto; /* Allow the container to grow with the content */
        padding-bottom: 20px;
    }

    .container {
        display: inline;
        height: auto;
        flex-direction: column; /* Stack children vertically */
        justify-content: center; /* Center content vertically */
        align-items: center; /* Center items horizontally */
    }

    .content, .footer, .app-store-link {
        width: 90%; /* Set to full width */
        align-items: center; /* Center these items horizontally */
        text-align: center; /* Center the text for all items */
        gap: 8px; /* Maintain a gap between items */
        padding: 0;
    }

    .content {
        margin: auto;
        height: auto;
    }

    .icon-header {
        display: inline;
        margin: 24px auto;
        padding-top: 24px;
        padding-bottom: 32px;
    }

    .icon-header img {
        height: 60px;
        max-height: 60px; /* Maximum height for the image */
        padding: 0;
        margin: 0;
    }

    .title {
        font-size: 16px; /* Smaller font size for mobile */
        padding: 0;
    }

    .tagline {
        font-size: 36px; /* Smaller font size for mobile */
        padding: 0;
    }

    .description {
        font-size: 16px; /* Smaller font size for mobile */
        padding: 0;
    }

    .footer {
        flex-grow: 0;
        align-self: center;
        font-size: 12px;
        font-family: 'Inter', sans-serif;
        font-weight: 300;
        color: #858585;
        /* margin: 16px 16px 16px 0; */
        margin-top: auto;
    }

    .app-store-link {
        flex-direction: column; /* Stack children vertically */
        justify-content: center; /* Center content vertically */
        align-items: center; /* Center items horizontally */
        padding: 8px;
        margin: 0;
        padding-bottom: 16px;

        p {
            font-size: 12px;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            color: #545454;
            margin: 0;
        }
    }

    .app-store-link img {
        /* width: 100%; Responsive width for mobile */
        max-height: 190px; /* Maximum width for the image */
    }

    .testflight-copy {
        margin-left: 0
    }

    .video-container {
        width: 100%; /* Full width */
        margin: auto;
    }

    .video-container video {
        width: 100%; /* Full width */
        height: auto;
        display: block;
        margin: auto;
    }
}