﻿
    .container {
        width: 100%;         /* 50%   bottao espaço */
        max-width: 100%;   /* 810 borda do menu */
        height: 450px;    /*  box menu      */        
        overflow: scroll; /* Adiciona barras de rolagem se o conteúdo exceder o tamanho do contêiner overflow-y: scroll*/
		overflow-x: hidden;  /* coloquei  elimina barra horizontal*/
        margin: 0 auto; /* Centraliza o contêiner horizontalmente */
        padding: 10px; /* Adiciona um pequeno espaçamento interno */
        box-sizing: border-box; /* Inclui padding e border no cálculo da largura e altura */
		margin-border: 2px;	         /*6px solid #FFFFFF   */ 
         border: 1px solid #000000;  /*borda do menu   */                         
    }

    .btn-blocks {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .button-wrapper {
        margin: 10px;
        flex: 0 0 auto;
    }

    .hov-button-1 {
        display: inline-flex; /* Usar flexbox para alinhar o texto */
        align-items: center; /* Centraliza verticalmente o texto */
        justify-content: center; /* Centraliza horizontalmente o texto */
        width: 230px; /* Largura do botão 160*/
        height: 55px; /* Altura do botão */
        text-align: center;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
        color: #fff; /* Cor do texto */
        position: relative;
        background-color: transparent;
        border: 2px solid transparent; /* Borda padrão transparente */
        border-radius: 5px; /* Arredonda as bordas do botão */
        overflow: hidden; /* Garante que o conteúdo não ultrapasse o botão */
        cursor: pointer;
        outline: none;
        font-family: 'SuaFonte', sans-serif; /* Substitua 'SuaFonte' pelo nome da fonte desejada */
        transition: border-color 0.4s ease, box-shadow 0.4s ease; /* Transição suave para borda e sombra */
    }

    .slm-icon {
        width: 100%; /* Largura do ícone ajustada para caber dentro do botão */
        height: 100%; /* Altura do ícone ajustada para caber dentro do botão */
        object-fit: cover; /* Garante que a imagem cubra o botão sem distorção */
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1; /* Garante que o ícone esteja atrás do texto */
    }

    .hov-button-1 span {
        position: relative;
        z-index: 2; /* Garante que o texto esteja acima do ícone */
        display: block;
        padding: 0; /* Remove qualquer padding adicional */
    }

    .hov-button-1:hover {
        border-color: #cccccc; /* Cor da borda ao passar o mouse */
        box-shadow: 0 0 10px rgba(255, 102, 0, 0.6); /* Sombra suave ao passar o mouse */
    }

    .hov-button-1::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background-color: #ff6600; /* Cor da borda animada */
        transition: width 0.4s ease, height 0.4s ease; /* Transição suave para a expansão */
        border-radius: 5px;
        z-index: 0; /* Coloca o efeito atrás do texto e do ícone */
        transform: translate(-50%, -50%); /* Centraliza o efeito */
    }

    .hov-button-1:hover::before {
        width: 120%;
        height: 120%;
    }
.search-box input[type="text"] {
	padding: 10px;
	font-size: 1em;
	width: 300px;
	border: 1px solid #92b7f6;
	border-radius: 5px;
	background-color: #333;
	color: #fff;
}

.search-box input[type="submit"] {
	padding: 10px;
	font-size: 1em;
	border: none;
	background-color: #92b7f6;
	color: #000;
	cursor: pointer;
	border-radius: 5px;
}

.search-box input[type="submit"]:hover {
	background-color: #d4c9a2;
}
