body {
    /*background-color: #1b1b1b;*/
    
    background-image: url('fundo.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: Arial, sans-serif;
}
/* Estilo para a logo */
.logo {
	max-width: 200px;
	margin: 20px auto;
	display: block;
}

/* Texto abaixo da logo */
.intro-text {
	font-family: 'Poppins', sans-serif; /* Fonte Poppins */
	color: #ffffff; /* Cor branca */
	text-align: center;
	margin-bottom: 30px;
}

/* Estilo para o Título dos Cards */
.titulo-carde h2 {
	font-family: 'Poppins', sans-serif; /* Fonte Poppins */
	color: #ffffff; /* Cor branca */
	text-align: center;
	margin-bottom: 20px;
	font-weight: 700; /* Deixa o texto mais forte */
}

/* Estilo do Carrossel */
.carousel-inner img {
	width: 100%;
	height: 100%;
	object-fit: contain; /* Ajusta a imagem para caber completamente, sem cortar */
	max-height: 400px; /* Ajusta a altura máxima para a imagem */
}

.carousel-indicators button {
	background-color: #007bff;
}

/* Estilo dos Cards */
.card {
	transition: transform 0.3s, box-shadow 0.3s;
	border: 2px solid #00b387; /* Borda de 1px */
	border-radius: 10px; /* Cantos arredondados */
	overflow: hidden; /* Garante que a imagem fique dentro dos cantos arredondados */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Sombra suave */
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.card img {
	object-fit: contain;
	width: 100%;
	background-color: #f1f1f1;
}



/* Estilo geral para a custom-menu */
.custom-menu.container {
    display: flex;                /* Faz as divs internas ficarem lado a lado */
    justify-content: space-evenly; /* Espaço uniforme entre as imagens */
    gap: 10px;                    /* Espaço entre as imagens */
    padding: 25px;                /* Adiciona um padding de 25px ao redor do conteúdo */
    width: 100%;                  /* Garante que o container ocupe 100% da largura disponível */
    box-sizing: border-box;       /* Garante que o padding não afete o tamanho total */
}

/* Estilo para as imagens */
.image-container img {
    width: 250px;                /* Define a largura das imagens para 250px */
    height: auto;                /* Mantém a proporção da imagem */
    border-radius: 15px;         /* Arredonda os cantos das imagens */
    transition: all 0.3s ease;   /* Transição suave para o efeito de hover */
    max-width: 100%;             /* Garante que a imagem não ultrapasse a largura do container */
}

/* Efeito de hover nas imagens */
.image-container img:hover {
    transform: scale(1.05);           /* Leve aumento de tamanho da imagem */
    box-shadow: 0 0 8px 3px rgba(183, 146, 45, 0.7); /* Efeito de brilho com cor #b7922d */
}

/* Imagens padrão para Desktop */
@media (min-width: 768px) {
    .image-container img {
        content: url('imagens/desk_tele.png');
    }

    .image-container:nth-child(2) img {
        content: url('imagens/desk_aula.png');
    }

    .image-container:nth-child(3) img {
        content: url('imagens/desk_insta.png');
    }
}

/* Imagens para dispositivos móveis */
@media (max-width: 767px) {
    .image-container img {
        content: url('imagens/Prancheta 1.png');
    }

    .image-container:nth-child(2) img {
        content: url('imagens/Prancheta 3.png');
    }

    .image-container:nth-child(3) img {
        content: url('imagens/Prancheta 2.png');
    }
}

@media (max-width: 767px) {
  .more-games-btn {
    margin: 0; /* Reduz o espaçamento em móveis */
  }
}

/* Botão "Mais Jogos" */
.more-games-btn {
	margin: 40px 0;
	text-align: center;
}

.more-games-btn button {
	background-color: #b7922d;
	color: white;
	padding: 15px 30px;
	border-radius: 30px;
	border: none;
	transition: background-color 0.3s;
}

.more-games-btn button:hover {
	background-color: #343a40;
}

/* Footer */
footer {
	text-align: center;
	padding: 20px 0;
	background-color: #343a40;
	color: white;
}