* {
margin: 0;
padding: 0; 
box-sizing: border-box;
}

body, input, textarea{
font-family: "Roboto", sans-serif;
}

/* Container responsivo */
.container {
max-width: 1280px;
width: 100%;
margin: 0 auto;
padding: 0 16px; /* importante no mobile */
}

/* HEADER */
header {
padding: 16px 0;
background-color: #182c61;
color: #ecf0f1;
}

header, section h2, .contact-methods h3, form button {
font-family: "Bungee", sans-serif;
font-weight: normal;
}

header .container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap; /* deixa quebrar no mobile */
}

header h1 {
font-weight: normal;
}

header nav ul {
list-style: none;
}

header nav li {
display: inline-block;
margin-left: 16px;
font-size: 18px;
}

header nav li a {
color: #ecf0f1;
text-decoration: none;
}

header nav li a:hover {
text-decoration: underline;
}

/* SEÇÃO */
section {
padding: 24px 0;
}

section .container {
display: flex;
align-items: flex-start;
gap: 32px;
}

.store-front {
width: 100%;
max-width: 50%;
height: auto; /* imagem não distorce */
display: block;
}

.store-content {
display: flex;
flex-direction: column;
gap: 16px;
}

section h2 {
margin-bottom: 16px;
font-weight: normal;
color: #182c61;
}

section p {
margin-bottom: 8px;
}

/* LOGOS */
.brands-list li {
display: inline-block;
margin-right: 10px;
}

.brands-list img {
height: 24px;
width: auto;
display: block;
}

.contact-methods {
    display: flex; /*alinha na horizontal*/
    justify-content: space-between; /*espaçamento entre os elementos*/
}

/* ========== MOBILE ========== */
/* 
    @media = "aplique este bloco de CSS somente quando..."
    (max-width: 768px) = quando a largura da tela for 768px OU MENOR
    */
    @media (max-width: 768px) {

    /* 
        header .container é o "pai" que está em flex (normalmente em linha no desktop).
        No mobile, colocamos em coluna para o título ficar em cima e o menu embaixo.
    */
    header .container {
        flex-direction: column;   /* muda de linha (row) para coluna (column) */
        align-items: flex-start;  /* alinha os itens à esquerda */
    }

    /*
        header nav li são os <li> do menu no topo.
        No desktop você tinha margin-left para separar os itens.
        No mobile, tiramos margin-left e usamos margin-right pra espaçar.
    */
    header nav li {
        margin-left: 0;          /* remove espaçamento da esquerda */
        margin-right: 16px;      /* adiciona espaçamento à direita */
    }

    /*
        section .container também é flex (imagem + texto lado a lado no desktop).
        No mobile, empilhamos (imagem em cima, texto embaixo).
    */
    section .container {
        flex-direction: column;  /* empilha os elementos */
    }

    /*
        .store-front é a imagem da fachada.
        No desktop ela estava com max-width: 50% (por exemplo).
        No mobile queremos ela ocupando toda a largura disponível.
    */
    .store-front {
        max-width: 100%;         /* imagem pode ocupar 100% da largura */
        width: 100%;             /* garante que ela realmente use a largura */
        height: auto;            /* mantém a proporção (não distorce) */
    }

    /*
        No contato, você tem 3 colunas lado a lado (flex).
        No mobile, fica melhor empilhar elas.
    */
    .contact-methods {
        flex-direction: column;  /* empilha as colunas do contato */
        gap: 24px;               /* espaço entre os blocos */
    }
}


.social-links img{
    height:24px;
}


.social-links li{
    display: inline; /*alinha na horizontal*/
    margin-right:8px; /*espaçamento entre os ícones*/
}

.social-links li a {
    text-decoration: none;
}

#contact .container {
    display: block; /*faz esse elemento se comportar como “bloco”*/
}

form input, form textarea, form button {
    display: block;
    width: 320px;
    margin-bottom: 8px; /*espaçamento entre os elementos do formulário*/
    padding: 8px; /*espaçamento interno*/
}
form textarea {
    resize: none; /*impede o redimensionamento do campo de texto*/
    height:180px; /*altura do campo de texto*/
}

.contact-methods h3 {
    color: #182c61;
    margin-bottom: 16px;
}

form button {
    background-color: #182c61; /*cor de fundo do botão*/
    color: #ecf0f1; /*cor do texto do botão*/
    border: none;
    cursor: pointer;
}

form button:hover {
    background-color: #435ca2; /*cor de fundo do botão ao passar o mouse*/
}

input:focus, textarea:focus {
    outline:1px solid #182c61; /*cor da borda ao focar no campo*/
}

footer {
    background-color: #182c61;
    color: #ecf0f1;
    padding: 16px 0; /*espaçamento interno*/
    text-align: center; /*centraliza o texto*/
    font-size: 14px; /*tamanho da fonte*/
}