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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
}

/* Controle de exibição das seções */
.section-content {
    display: none; /* Todas ocultas por padrão */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.section-content.active {
    display: block; /* Exibir apenas a ativa */
    opacity: 1;
}

.hidden {
    display: none !important; /* Força ocultação */
}


/* Container para largura máxima */
.container {
    max-width: 350px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centraliza os elementos verticalmente */
    min-width: 320px; /* Garante largura mínima para dispositivos menores */
}

/* Responsividade */

/* Smartphones médios (360px - 640px) */
@media (min-width: 360px) and (max-width: 640px) {
	.container {
		max-width: 620px;
		min-width: 350px;
	}
}

/* Smartphones grandes (641px - 768px) */
@media (min-width: 641px) and (max-width: 768px) {
	.container {
		max-width: 748px;
		min-width: 620px;
	}
}

/* Tablets pequenos (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
	.container {
		max-width: 1004px;
		min-width: 748px;
	}
}

/* Tablets grandes (1025px - 1280px) */
@media (min-width: 1025px) and (max-width: 1280px) {
	.container {
		max-width: 1140px;
		min-width: 1004px;
	}
}

/* Laptops pequenos (1281px - 1366px) */
@media (min-width: 1281px) and (max-width: 1366px) {
	.container {
		max-width: 1140px;
		min-width: 1004px;
	}
}

/* Laptops médios (1367px - 1440px) */
@media (min-width: 1367px) and (max-width: 1440px) {
	.container {
		max-width: 1140px;
		min-width: 1004px;
	}
}

/* Laptops grandes (1441px - 1920px) */
@media (min-width: 1441px) and (max-width: 1920px) {
	.container {
		max-width: 1140px;
		min-width: 1004px;
	}
}

/* Desktops Full HD (1921px - 2559px) */
@media (min-width: 1921px) and (max-width: 2559px) {
	.container {
		max-width: 1140px;
		min-width: 1004px;
	}
}

/* Resolução 2K (2560px - 3840px) */
@media (min-width: 2560px) and (max-width: 3840px) {
	.container {
		max-width: 1140px;
		min-width: 1004px;
	}
}

/* Resolução 4K (3840px e acima) */
@media (min-width: 3841px) {
	.container {
		max-width: 1140px;
		min-width: 1004px;
	}
}