body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    
}

.container {
    display: flex;
    width: 90%; /* Адаптивная ширина */
    max-width: 1200px;
    align-items: center; /* Выравнивание элементов по вертикали */
    
}

.image-container img {
    width: 100%; /* Динамическая ширина */
    max-width: 450px; /* Максимальная ширина картинки */
}

.login-container {
    flex: 1; /* Занимает все оставшееся пространство */
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.logo-image {
    width: 100%; /* Ширина логотипа относительно контейнера */
    max-width: 200px; /* Максимальная ширина логотипа */
    margin: 0 auto 20px; /* Автоматическое центрирование и отступ снизу */
}

input[type="text"], input[type="password"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
}

button {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #4CB5F9;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.facebook-login {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #385185;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 14px;
    text-decoration: none;
    width: auto; /* Автоматическая ширина по содержимому */
    cursor: pointer;
}


.facebook-login img {
    width: 17px; /* Ширина иконки */
    height: 17px; /* Высота иконки */
    margin-right: 8px; /* Отступ справа от иконки */
}

.forgot-password {
    display: block; /* Ссылка занимает всю доступную ширину */
    color: #003569; /* Цвет текста ссылки */
    text-decoration: none; /* Убираем подчеркивание */
    margin-top: 10px; /* Отступ сверху */
    font-size: 12px; /* Размер шрифта */
    text-align: center;
}


.divider {
    color: #8e8e8e;
    margin: 20px 0;
    text-align: center;
}

.forgot-password {
    display: block;
    color: #003569;
    margin-bottom: 20px;
    text-decoration: none;
}

.sign-up {
    border-top: 1px solid #dbdbdb;
    padding-top: 15px;
    font-size: 14px;
    color: #0095F6;
}

.app-download-text {
    margin-top: 20px; /* Отступ сверху для разделения */
    font-size: 14px; /* Размер шрифта текста */
    color: #262626; /* Цвет текста */
}

.app-links img {
    width: 140px; /* Фиксированная ширина для всех иконок */
    height: 40px; /* Фиксированная высота для всех иконок */
    object-fit: contain; /* Гарантирует, что изображение будет полностью видно, не обрезая его */
    margin: 10px 5px; /* Отступы вокруг изображений */
}

.app-links{
    margin-top: 15px;
}



/* Стили для мобильных телефонов */

@media (max-width: 400px) {
    .app-links img{
        width: 90px;
    }

    .image-container img{
        display: none;
    }

}


@media (max-width: 600px) {
    .container {
        flex-direction: column;
        align-items: stretch;
        width: 80%;
    }

    .image-container img{
        display: none;
    }
    .logo-image {
        max-width: 80%;
        height: auto;
    }

    .login-container,
    .image-container {
        
        padding: 10px;
    }

    .facebook-login,
    button,
    input[type="text"],
    input[type="password"] {
       
        margin: 8px 0;
    }

    
}

/* Стили для планшетов */
@media (min-width: 601px) and (max-width: 1024px) {
    .container {
        flex-direction: row;
    }

    .image-container img {
        max-width: 300px; /* Немного уменьшаем изображение */
    }

    .login-container {
        padding: 15px;
        justify-content: flex-start; /* Выравнивание содержимого в начало контейнера */
    }

    .facebook-login,
    button,
    input[type="text"],
    input[type="password"] {
        width: 90%; /* Немного уменьшаем ширину элементов управления */
    }

    .app-links img {
        width: 120px; /* Уменьшаем размеры иконок приложений */
    }
}

/* Стили для десктопов */
@media (min-width: 1025px) {
    .container {
        flex-direction: row;
        justify-content: center;
    }

    .image-container img,
    .logo-image {
        max-width: 450px; /* Поддерживаем большой размер изображений */
    }

    .login-container {
        padding: 20px;
        justify-content: center; /* Центрирование содержимого в контейнере */
    }

    .facebook-login,
    button,
    input[type="text"],
    input[type="password"] {
        width: 100%; /* Восстанавливаем полную ширину элементов управления */
    }

    .app-links img {
        width: 140px; /* Возвращаем исходный размер иконок */
    }
}