/* Responsividade Celular*/
@media (max-width: 600px) {
    .custom-image{ 
        width: 330px;
        height: auto;
        
    }
    #secao-destaque {
        padding: 28px 30px 8px;
        text-align: center; 
    }

    .texto-superior-principal {
        font-size: 1.8em;
        text-align: center; 
        padding: 10px; 
    }

    .texto-superior-secundario {
        font-size: 1.5em; 
        text-align: center;
    }

    .logo {
        width: 100px; 
        margin: 0 auto; 
        display: block; 
    }

    h2, h3 {
        text-align: center; 
        margin: 10px 0; 
    }

    .topo {
        font-size: 1.5em; 
        text-align: center; 
        margin: 10px 0;
    }

    #secao-menu {
        padding: 10px 0; 
        background-color: #4F4F4F; 
    }

    #secao-menu  ul {
        list-style-type: none;
        display: flex;
        justify-content: center; 
        gap: 15px; /* Espaçamento entre os links */
        font-family: 'Georgia', serif;
        font-size: 16px;
        font-weight: 600;
    }

    #secao-menu  li {
        margin: 0; 
        display: inline-block; 
    }

    #secao-menu  a {
        font-size: 18px; 
        padding: 10px 20px; 
        text-decoration: none;
        color: #DAA520; 
        transition: background-color 0.3s, color 0.3s;
    }

    #secao-menu a:hover {
        background-color: rgba(44, 44, 44, 0.5); 
        color: yellow; 
    }

    .secao-meio h4 {
        font-size: 1.2em; /* Reduz um pouco o tamanho para caber */
        text-align: center; /* Centraliza */
        padding: 10px; /* Adiciona espaçamento interno */
        line-height: 1.5; /* Melhora a legibilidade */
    }
    .custom-section-wrapper {
        position: relative;
        width: 100%; 
        padding: 20px;
        background-color: #A87E5A; /* Cor de fundo lateral */
    }
    
    .custom-section {
        position: relative;
        max-width: 600px; /* Largura máxima do conteúdo */
        margin: 20px auto; /* Centraliza a seção */
        background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); /* Gradiente de branco para transparente */
        padding: 20px; /* Espaçamento interno */
        border-radius: 10px; /* Bordas arredondadas */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        
    }
    
    .custom-title {
        font-size: 2em;
        font-weight: bold;
        color: white;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 2px;
        z-index: 1;
        position: relative;
    }
}
/*

cores utilizadas no projeto: 

preto: #000000;
branco: #f4f4f4;
dourado: #DAA520;
amarelo: yellow
cor do fundo para transparencia nas fontes: rgba(44, 44, 44, 0.5)
cinza: #4F4F4F

FONTES: 

body: "JetBrains Mono", sans-serif
texto superior principal: 'Georgia', serif;



*/

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

body {
    font-family: "JetBrains Mono", sans-serif;
    height: 100vh;
    width: 100vw;
    line-height: 1.6;
    background-color: #f4f4f4; 
}

#secao-destaque {
    background-color: #000000;
    color: #DAA520;
    padding: 46px 0; 
  
}

.texto-superior-principal {
    font-family: 'Georgia', serif;
}


.secao-meio {
    padding: 50px 0;
    background-image: url('imagens/imagemfundo2.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    height: 80vh;
    position: relative;
    z-index: -1;
}

.secao-meio h4 {
    font-size: 1.5em;
    color: white;
    text-align: center;
    font-family: 'Playfair Display', serif;
    background-color: rgba(44, 44, 44, 0.5);
    padding: 20px;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1.5;
}


.logo {
    width: 80px;
    margin-left: 12px;
}


/* Responsividade para computador */

@media (min-width: 1024px) {

    /*
    .topo {
        font-family: 'Georgia', serif;
        padding: 10px 0;
        font-weight: bold;
        font-size: 24px; 
        font-weight: 800; 
        text-align: right; 
        background-color: #000000; 
        color: #DAA520; 
        margin: 0 30px;
    }*/
    
    #secao-menu {

        background-color: #000000; 
        padding: 70px 45px 15px 10px;
        text-align: right; 
        position: relative; 

    }

    #secao-menu ul {
        list-style-type: none;
        gap: 30px;
        font-family: 'Georgia', serif;
        font-size: 16px;
        font-weight: 600;
    }

    #secao-menu li {
        display: inline-block; /* Mantém os itens do menu em linha */
    
    }

    #secao-menu a {
        text-decoration: none;
        color: #DAA520;
        padding: 10px 20px; 
        transition: background-color 0.3s, color 0.3s;
    }

    #secao-menu a:hover {
        background-color: rgba(218, 221, 40, 0.5);
        color: #f4f4f4; 
    }
        
    .texto-superior {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 10;
    }

    .texto-lateral {
        display: flex;
        flex-direction: row; /* Mantém D'BROTHERS e BARBEARIA lado a lado */
        align-items: center; /* Alinhamento vertical */
        gap: 6px; 

    }

    .texto-superior-principal {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 18px;
        font-weight: bold;
        padding-right: 95px;
        color: #D4AF37;
       
    }


    .texto-superior-secundario {
        font-size: 1em;
        color: #4F4F4F;
        transform: none;  /* Remove a rotação */
        writing-mode: initial;  /* Garante orientação horizontal */
    }

    .logo {
        position: absolute; 
        top: 20px; /* Alinha a logo com o texto */
        width: 80px;
        z-index: 1; /* Logo ficará atrás do texto */
    }

    .agendar-btn {
        background-color: #f4b400; /* Cor de fundo amarela */
        color: #000; /* Cor do texto preta */
        font-size: 16px; /* Tamanho da fonte */
        padding: 10px 20px; /* Espaçamento interno */
        border: none; /* Sem borda */
        border-radius: 5px; /* Bordas arredondadas */
        cursor: pointer; /* Muda o cursor para indicar que é clicável */
        transition: background-color 0.3s, transform 0.3s; /* Transições suaves */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    }
      
    .agendar-btn:hover {
        background-color: #d49f00; /* Cor de fundo mais escura ao passar o mouse */
        transform: translateY(-3px); /* Efeito de elevação */
    }
      
    .agendar-btn:active {
        background-color: #b38800; /* Cor de fundo quando clicado */
        transform: translateY(1px); /* Efeito de pressionar */


    }

    .custom-section-wrapper {
        position: relative;
        width: 100%; 
        padding: 20px;
        background-color: #A87E5A; /* Cor de fundo lateral */
    }
    
    .custom-section {
        position: relative;
        max-width: 600px; /* Largura máxima do conteúdo */
        margin: 20px auto; /* Centraliza a seção */
        background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); /* Gradiente de branco para transparente */
        padding: 20px; /* Espaçamento interno */
        border-radius: 10px; /* Bordas arredondadas */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        
    }
    
    .custom-title {
        font-size: 2em;
        font-weight: bold;
        color: white;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 2px;
        z-index: 1;
        position: relative;
    }
    
    .custom-image-container {
        position: relative;
        display: inline-block;
        width: 100%;
        max-width: 580px;
        border-radius: 5px;
        overflow: hidden;
        z-index: 1;
    }
    
    .custom-image {
        width: 100%;
        display: block;
    }
    
    .custom-navigation {
        position: absolute;
        top: 50%;
        width: 93%;
        display: flex;
        justify-content: space-between;
        transform: translateY(-50%);
        z-index: 1;
        pointer-events: all; /* Permite interações com as setas */
    }
    

    .arrow-left, .arrow-right {
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        cursor: pointer;
        transition: color 0.3s ease; /* Transição suave para as setas */
    }

    .arrow-left {
        border-right: 20px solid white; /* Seta para a esquerda */
        margin-left: 10px; /* Ajusta a margem da seta da esquerda */
    }
    
    .arrow-right {
        border-left: 20px solid white; /* Seta para a direita */
        margin-right: 10px; /* Ajusta a margem da seta da direita */
    }
    
    .arrow-left:hover, .arrow-right:hover {
        color: #FF6347; /* Cor de destaque quando passa o mouse */
    }


}



/* Estilos de texto */
h2 {
    font-family: 'Georgia', serif;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

h4 {
    color: white;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 2em;
    font-weight: 800;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(44, 44, 44, 0.5);
    padding: 20px;
    border-radius: 10px;
}


/* Estilos para o carrossel */
.secao-carrossel {
    display: flex;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(72deg, #4F4F4F 1%, #000000 99%);
}

.slides {
    display: flex;
    width: 500%;
    height: 100%;
}

.slide {
    width: 20%;
    transition: .6s;
    display: none; /* Ocultar slides inicialmente */
}

.slide img {
    width: 100%;
    height: 100%;
}

/* Navegação do carrossel */
.navigation {
    position: absolute;
    bottom: 20px;
    display: flex;
    justify-content: center;
}

.bar {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: .6s;
}

.bar:hover {
    background-color: #007BFF;
}