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

html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Impede o scroll */
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.container {
    position: relative;
    height: 100%;
    width: 100%;
}
.info-container {
    visibility: hidden;
}
/* Imagem de fundo */
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("./src/fundo.jpg");
    background-size: cover; /* Cobre toda a tela */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Evita repetição */
    z-index: -1; /* Fica atrás do conteúdo */
}

/* Botões circulares */
.button-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    position: absolute;
    bottom: 240px; /* Posição ajustada para ficar acima da logo */
    width: 100%;
}

.circle-button {
    width: 100px;
    height: 100px;
    background-color:#D7B35D ;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.circle-button:hover {
    background-color: #806935;
}

/* Barra preta semitransparente */
.footer-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(to top, rgb(0, 0, 0), rgba(24, 24, 24, 0.674), rgba(24, 24, 24, 0));
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Logotipo */
.logo {
    width: 150px;
    height: auto;
}

/* Responsividade: tamanhos menores */
@media screen and (max-width: 768px) {
    .circle-button {
        width: 70px;
        height: 70px;
        font-size: 38px;
    }

    .button-container {
        bottom: 200px; /* Ajusta a posição dos botões para telas menores */
    }

    .logo {
        width: 160px;
        height: auto;

    }
}

@media screen and (min-width: 1024px) {
    .circle-button {
        color: rgba(0, 0, 0, 0.8);
        visibility: hidden;
    }
    .container {
        background-color: rgba(0, 0, 0, 0.8); /* 80% de transparência */
        z-index: -1; /* Fica atrás do conteúdo */
    }
    .background-image {
        background-image: url("./src/fundoDesk.jpg");

        width: 30%; /* Defina o tamanho desejado */
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 0%;
        z-index: 1;
    }
    .info-contact{
        width: 100px;
        height: 100px;
        
        font-size: 36px;
        color: white;
    }
    .info-container {
        visibility: visible;
        flex-direction: column;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 40%;
        left: 60%;
        transform: translate(-50%, -50%);
        z-index: 0;

        
    }


}