/* =================================================
   MÍDIA QUERIES - RESPONSIVIDADE PARA CELULARES (Telas até 768px)
   ============================================== */

@media (max-width: 768px) {
    
    /* Ajustes do Banner */
    .banner-two img {
        height: 400px; /* Reduz a altura da imagem no celular para não sumir com o conteúdo */
        object-fit: cover; /* Mantém a proporção da imagem sem distorcer */
    }

    /* Ajustes do Título sobre o Banner */
    .title-main {
        position: absolute;
        top: 25%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%); /* Centraliza perfeitamente em telas menores */
        width: 90%;
    }

    .title-main h1 {
        font-size: 2.8rem; /* Diminui o tamanho da fonte para não quebrar linha feio */
    }

    .title-main h2 {
        font-size: 1.8rem;
    }

    .title-main hr {
        width: 250px;
        margin-left: 50px;
    }

    /* Ajustes do Container do Formulário */
    .container {
        margin-top: 40px;
        margin-bottom: 40px;
        padding: 0 20px; /* Evita que o formulário cole nas bordas da tela do celular */
    }

    .menu-container {
        width: 100%;
        max-width: 100%; /* Permite ocupar o espaço correto no mobile */
        padding: 25px 15px;
    }

    /* Ajustes do Rodapé (Footer) */
    .footer-website {
        flex-direction: column; /* Transforma as colunas em linhas horizontais empilhadas */
        align-items: center;
        gap: 35px; /* Espaçamento entre os blocos de texto no celular */
        padding: 40px 20px;
    }

    /* Garante que as listas do rodapé não herdem alinhamentos desalinhados */
    .footer-website .option, 
    .footer-website .contact, 
    .footer-website .opening-hours, 
    .footer-website .website-menu,
    .footer-website .logo-text {
        width: 100%;
        text-align: center;
    }
}