.header-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.logo-column {
    /* Desktop: 25% width minus the gap */
    flex: 1 1 calc(25% - 20px);
    display: flex;
    justify-content: flex-end; /* Keeps logo on the right on desktop */
}

.main-logo {
    max-width: 100%; /* Adjust based on your logo's size */
    height: auto;
}

/* --- THE BREAKPOINT --- */
@media (max-width: 1000px) {
    .text-column {
        flex: 1 1 100%;
        text-align: center; /* Optional: Centers text for mobile feel */
    }

    .logo-column {
        flex: 1 1 100%;    /* Logo container becomes full width */
        justify-content: center; /* Centers the logo horizontally */
        padding-top: 20px; /* Adds space between text and logo */
    }

    .main-logo {
        max-width: 100%; /* You can make the logo larger on mobile if desired */
    }
}

.background-tipt {
	background-color: #F5EDE2;
	color: black;
}

.background-adaptive-mobility {
	background-color: #F5EDE2;
	color: black;
}