/* Estilos para o modo claro */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    color: #2B2B2D; /* Cor do texto */
}

h1 {
    font-size: 3.3em; /* Aumenta o tamanho do hello */
    margin-block-start: 2.5em;
    margin-block-end: 0.2em;
    font-weight: bold; /* Mantém o negrito no título Hello */
}

p {
    color: #2B2B2D;
    font-family: 'Inter', sans-serif;
    margin: 0;
    font-weight: 300; /* Remove o negrito do parágrafo */
}

p subtitle {
    color: #ff0000;
}

.container {
    max-width: 440px;
    margin: 0 auto;
    padding: 0 10px;
}

/* Estilos para o header */
#custom-header {
    background-color: #fcfcfc; /* Cor de fundo do cabeçalho */
    color: #000; /* Cor do texto do cabeçalho */
    font-weight: bold;
    padding: 20px;
    display: flex;
    justify-content: space-between; /* Distribui os itens horizontalmente */
    align-items: center;
}

.header-center {
    flex: 1; 
    text-align: center; 
    min-width: 0; 
    margin-left: 44px; 

}

.header-logo {
    font-size: 1.1em; 
    font-weight: 300;
    color: #333333;
    margin: 0;
}

.theme-toggle {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    position: relative;
    color: #898762;
    border-radius: 99px; 
    padding: 10px;
	width: 44px;
	height: 44px;

}

.theme-toggle:hover {
    background-color: rgba(43, 43, 43, 0.1); /* Cor de fundo com 10% de opacidade */
}

.theme-toggle img {
    width: 24px;
    height: 24px;
}

/* Estilos para os cartões e demais elementos - mantidos para referência */
.card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 0px;
    margin-bottom: 50px;
    max-width: 500px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    padding-bottom: 20px;
    transition: height 0.5s ease;
}

.card:hover {
    box-shadow: 0 0 0 2px #2196F3; /* Adiciona uma sombra simulando uma borda azul */

}

.card img {
    width: 100%;
    height: 400px;
    object-fit: cover;
/*    margin-bottom: 10px;*/
}

/* Efeito de desfoque na imagem ao passar o mouse sobre ela */
.card img:hover {
    filter: blur(40px); /* Desfoque com raio de 8 pixels */
	opacity: 0.3;
}

.card h4 {
/*    margin-top: 10px;*/
    margin-left: 20px;
    margin-bottom: 5px;
    font-weight: 300;
}

.card p {
    padding: 5px 20px;
}

.card .subtitle {
	color: #919091;
}

.card .description-title{
	font-weight: 600;
}

.card .description {
	color: #2B2B2D;
}

/* Container da imagem */
.image-container {
	height: 400px;
}

/* Efeito de desfoque na imagem ao passar o mouse sobre ela */
.image-container:hover img {
    filter: blur(80px); /* Aplica um desfoque de 8 pixels à imagem */
	opacity: 0.3;
    transition: opacity 0.9s; /* Transição suave da opacidade */

}

/* Overlay sobre a imagem */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0); /* Cor azul com transparência */
    opacity: 0; /* Inicialmente transparente */
    transition: opacity 0.3s; /* Transição suave da opacidade */
	color: #2196F3;
}

.divider-first {
    border: none;
    height: 1px;
    background-color: #E2E2E2;
    margin-top: 40px;
    margin-bottom: 40px;
}

.divider-card {
    border: none;
    height: 1px;
    background-color: #f0f0f0;
    margin: 20px 0px;
}

.divider2-card {
    border: none;
    height: 1px;
    background-color: #f0f0f0;
    margin: 0px 0px;
}

/* Link "See more" no overlay */
.see-more {
    color: #2196F3; /* Cor do texto branco */
	font-size: 1.3em;
	font-weight: 500;
	text-decoration: none;
}
.see-more:hover {
	text-decoration: underline;
}

/* Mostra o overlay quando passa o mouse sobre a imagem */
.image-container:hover .image-overlay {
    opacity: 1; /* Torna o overlay visível */
}

.see-more2 {
    top: 50%; /* Alinhar o botão ao centro verticalmente */
    left: 50%; /* Alinhar o botão ao centro horizontalmente */
    transform: translate(-50%, -50%); /* Centralizar o botão */
    color: #ffffff; /* Cor do texto branco */
    padding: 10px 20px; /* Espaçamento interno do botão */
    text-decoration: none; /* Remover sublinhado do link */
    opacity: 0; /* Inicialmente invisível */
    transition: opacity 0.3s ease; /* Transição suave da opacidade */
}

/* Botão "See More" visível quando o mouse passa por cima da imagem */
.image-container:hover .see-more2 {
    opacity: 1; /* Torna o botão visível */
}


.footer {
    bottom: 0;
    width: 100%;
    overflow-x: auto;
    margin: 0;
    margin-bottom: 40px;
}

a {
    display: block;
    color: #3C3C3C;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 2.2em;
    margin: 0;
    text-decoration: none;
}

a:hover {
    color: #2196F3;
}

a2 {
    display: block;
    color: #3C3C3C;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 1em;
    margin: 0;
    text-decoration: none;
}

a2:hover {
    color: #2196F3;
}

.switch-container {
    display: flex;
    align-items: center;
}

.switch-label {
    margin-right: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    color: #919091;
}

.switch {
    margin-left: 10px;
}

.footer-icons {
    display: flex;
    margin-top: 10px;
}

.footer-icons a {
    margin-right: 10px;
}

.textcolumn {
    float: left;
    margin-right: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.textcolumn2 {
    float: inherit;
    width: 100%;
    margin-bottom: 12px;
}

@media screen and (max-width: 480px) {
    .container {
        max-width: 300px;
        margin: 0 auto;
    }
	.card img {
    height: 300px;
	}
	/* Container da imagem */
	.image-container {
	height: 300px;
	}
	.image-overlay {
    height: 300px;
	}
}

.expand-link {
    text-align: center;
    padding: 10px;
}

.expand-link i {
    color: #3c3c3c;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease;
    margin: 0 auto;
    display: block;
}

.card.expanded .expand-link i {
    transform: rotate(180deg); /* Rotação para cima quando expandido */
}

.card.expanded .expanded-info {
    display: block;
}

.card.expanded .expand-link {
    position: relative;
    z-index: 1;
}

.card.expanded .divider-card {
    display: block;
    margin: 20px 0px; /* Ajuste conforme necessário */
}

.card.expanded .divide2r-card {
    display: block;
    margin: 0px 0px; /* Ajuste conforme necessário */
}

.expanded-info {
    max-height: 0; /* Começa com altura zero para estar oculto */
    overflow: hidden; /* Oculta qualquer conteúdo que ultrapasse a altura máxima */
    transition: max-height 0.5s ease; /* Adiciona uma transição suave de altura */
}

.card.expanded .expanded-info {
    display: block;
	transition: max-height:0.5s ease;

}

.card.expanded .expand-link i {
    transform: rotate(180deg); /* Rotação para cima quando expandido */
}




/* Estilos para o modo escuro */
body {
	background-color: #F2F2F2;
	
}

.dark-mode {
    background-color: #2B2B2D;
    color: #ffffff;
}

.dark-mode #custom-header {
    background-color: #333333;
    color: #ffffff;
}

.dark-mode .blue-square {
    background-color: #666666;
}

.dark-mode .header-logo {
    color: #d3d3d3;
}

.dark-mode .divider-first {
    background-color: #575758;
}

.dark-mode .divider-card {
    background-color: #575758;
}

.dark-mode .divider2-card {
    background-color: #575758;
}

.dark-mode .card {
    background-color: #404042;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Estilo para o cartão quando hover no modo escuro */
.dark-mode .card:hover {
    box-shadow: 0 0 0 2px #64B5F6; /* Adiciona uma sombra simulando uma borda azul mais clara */
}

.dark-mode .card h3,
.dark-mode .card p {
    color: #ffffff;
}

.dark-mode .expand-link i {
    color: #fff;
}

.dark-mode p {
    color: #d3d3d3;
}

.dark-mode .card .subtitle {
	color: #B0AFB0;
}

.dark-mode .card .description {
	color: #ffffff;
}

.dark-mode a {
    color: #d3d3d3;
}

.dark-mode a:hover {
    color: #2196F3;
}

.dark-mode .see-more {
    color: #2196F3; /* Cor do texto branco */
	font-size: 1.3em;
}

.dark-mode .switch-label {
    color: #d3d3d3;
}

.dark-mode #theme-icon {
    filter: brightness(0) invert(1);
}

.dark-mode .theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Cor de fundo com 10% de opacidade */
}