@media only screen and (max-width: 768px) {
    *, *:before, *:after {
        box-sizing: border-box;
    }
    
    body {
        margin: 0 auto;
        padding: 0;
        min-height: 100vh; /* Use viewport height for full screen height */
        display: flex;
        overflow-x: hidden; /* Ensures no horizontal scroll */
        box-sizing: border-box;
        flex-direction: column;
        justify-content: center; /* Centers content vertically */
        align-items: center; /* Centers content horizontally */
        position: relative;
    }

    .fade-in {
        opacity: 0;
        transform: translateY(20px);
        visibility: hidden;
        transition: opacity 0.5s ease-out, transform 0.5s ease-out, visibility 0.5s; /* Shorten the visibility transition to match others */
    }

    .fade-in.is-visible {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }

    .content {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centers content vertically */
        align-items: center; /* Centers content horizontally */
        margin-left: 15px;
        margin-right: 15px;
    }

    .background-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Ensure it covers the full body height, add this line */
        background: url('pagefond_tache.png') no-repeat center center, linear-gradient(to bottom, #7d6a82, transparent);
        background-size: cover;
        opacity: 0.3;
        z-index: -1;
    }

    .logo {
        width: 250px; /* Scale based on viewport width */
        height: 250px; /* Maintain aspect ratio */
        margin: 0 auto;
        background: url('logo+typo2.png') no-repeat center center;
        background-size: contain; /* Ensure the logo is fully visible */
    }

    h1 {
        font-size: 2.5rem; /* Reduced for mobile screens */
        color: #7d6a82;
        font-weight: 600;
        font-family: 'Myanmar Text', sans-serif;
    }

    h2 {
        font-size: 1.5rem; /* Reduced for mobile screens */
        font-weight: 600; /* Slightly less weight for smaller screens */
        font-family: 'Jakarta Sans', sans-serif;
    }

    /* Add any additional styles you have below */
}