@import url('padrao.css');

.container {
	position: relative;
	width: 100%;
	height: 70%; 
	overflow: hidden;
}

.background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("assets/logo.png");
	/*background-image: url("https://cdn.hubblecontent.osi.office.net/m365content/publish/0bfe1df9-1096-4d68-80b9-5e3f1b8b24e7/thumbnails/xxlarge.jpg");*/
	background-size:  auto 100%;
	background-position: center;
	/*filter: brightness(0.52);	*/
}
.container__imagem_quadra {
	position: relative; /* Para ficar acima do background-image */
	z-index: 1;
	display:flex;
	flex-direction: column;
	padding-top: 8em;
}

.container__apresentacao {
	color: var(--cor-branca);
	font-family: 'Montserrat', sans-serif;
	font-size: 40px;
	line-height: 44px;
	font-weight: 500;
	text-align:center;
}
.container__texto {
	color: var(--cor-branca);
	font-family: 'Montserrat', sans-serif;
	font-size: 25px;
	font-weight: 700;
	text-align: center;	
	margin: 0 0 12em 0;
}

.inicial__segunda_tela {
	background-color: var(--cor-quase-preta);
	display: grid;
	grid-template-columns: 30% 30%; 
	justify-content: center;
	padding: 4em 3em;
}

.segunda__imagem_correndo img {
	width: 90%; /* Largura fixa de 300 pixels */
	height: 100%; /* Altura fixa de 200 pixels */
	border-radius: 8px;
}

.segunda__coluna_texto {
	display: flex;
	flex-direction: column;
	margin-left: 3em;
}

.segunda__titulo {
	color: var(--cor-branca);
	font-family: 'Montserrat', sans-serif;
	font-size: 36px;
	font-weight: 400;
	margin: 1em 0 0.5em 0;
}

.segunda__texto {
	color: var(--cor-branca);
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 300;
}

.inicial__terceira_tela {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 3.5em;
}


.escrevendo {
	width: 82%; 
	height: 70%;	
	border-radius: 8px;
}

.equipe {
	width: 78%; 
	height: 48.5%;	
	border-radius: 8px;
}

.cabeca__criancas {
	width: 78%; 
	height: 49%;	
	border-radius: 8px;
}

.terceiro__container {
	display: flex;
	flex-direction: column;
	width: 20%;
}

.terceiro__titulo {
	font-family: 'Montserrat', sans-serif;
	font-size: 26px;
	font-weight: 400;
	margin: 1em 0 0.5em 0;
}

.terceiro__texto {
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 400;
	padding: 0 4em 0 0;
	margin-bottom: 4em;
}

@media (max-width: 1200px) {
	
    .container {
        /* Permita que a altura do container seja determinada pelo seu conteúdo */
        height: auto;
        /* Remova overflow: hidden; se ele estiver cortando algo indesejado em mobile */
    }

    .background-image {
        /* Remova o position: absolute para que ele volte ao fluxo normal e ocupe espaço */
        position: relative; /* Ou simplesmente remova a propriedade position */
        width: 100%; /* Garante que ocupe a largura total */
        /* Ajuste a altura para que a imagem apareça com um tamanho razoável no celular.
           O truque do padding-top é excelente para imagens de fundo que precisam
           manter uma proporção responsiva. */
        height: 0; /* Zera a altura real do elemento */
        padding-top: 25%; /* **AJUSTE ESTE VALOR:** Calcule (altura_da_imagem_original / largura_da_imagem_original) * 100.
                           Por exemplo, se sua `logo.png` tem 412px de largura e 180px de altura (estimativa da imagem fornecida),
                           seria (180 / 412) * 100 = ~43.7%. Use um valor próximo à proporção da sua imagem real. */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center top;
    }

    .container__imagem_quadra {
		position: absolute; 
        /* Este elemento contém seu H2 e P.
           Se o .background-image agora ocupa espaço no fluxo,
           você provavelmente não precisa de padding-top aqui para afastar do topo. */
        padding-top: 0; /* Remova o padding-top que estava empurrando para baixo */
        /* Se o H2 e o P ainda estiverem em cima da imagem,
           você pode ajustar a margem superior deles ou colocar um `margin-top` no
           `.container__imagem_quadra` para empurrar para baixo, se necessário.
           Ou, se eles não devem sobrepor a imagem, você pode movê-los para fora
           do `.container` ou ter um layout diferente para mobile. */
    }

    
    .inicial__segunda_tela {
		position: relative; 
		z-index: 100;
		top: 20%;
        /* Em mobile, é comum que colunas virem linhas */
        grid-template-columns: 1fr; /* Uma coluna, ocupa 100% da largura disponível */
        padding: 2em 1em; /* Ajustar padding para mobile */
    }
    .segunda__imagem_correndo img {
        width: 100%; /* Imagem ocupa 100% da largura do seu container grid */
        height: auto; /* Altura se ajusta automaticamente */
        margin-bottom: 1em; /* Espaço abaixo da imagem */
    }
    .segunda__coluna_texto {
        margin-left: 0; /* Remover margem extra */
        text-align: center; /* Centralizar texto se preferir */
    }
    .inicial__terceira_tela {
        flex-direction: column; /* As caixas empilham-se verticalmente */
        align-items: center; /* Centraliza as caixas */
    }
    .terceiro__container {
        width: 90%; /* As caixas ocupam mais largura */
        margin-bottom: 2em; /* Espaço entre as caixas empilhadas */
        text-align: center;
    }
    .terceiro__container img {
        width: 100%; /* Imagens dentro dos containers ocupam 100% da largura */
        height: auto;
    }
    .terceiro__texto {
        padding: 0; /* Remover padding que pode causar espaço extra */
    }
}