/*Lletra de Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Miniver&display=swap');
/*Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


*{
    /*Eliminem els espais */
    padding: 0;
    margin: 0;
    /*Eliminem tots els decorats */
    text-decoration: none; /* NO enllaços subratllats */
    list-style: none; /* NO puntets llista */
    box-sizing: border-box; /*Perquè els elements no surtin del contenidor */
}



nav{
    background-color:black;
    height: 80px;
    width: 100%;
    position: fixed; /*Fixar el menu a dalt de tot */
    z-index: 5000;
    
}

.enllas{
    position: absolute;
    padding-left: 80px;
}

.enllas h3{
    color: white;
    margin-top: 30px;
}

.logo{
   margin-top: 15px;
   
}

.logo img{
    width: 150px;
    height: auto;

}

nav ul{
    float: right; /*Posicionem el menú a la dreta */
    margin-right: 20px; /*Li posem un marge a la dreta de 20px perquè no quedi tan enganxat al final de la pantalla */
}

nav ul li{ /*Posem tots els enllaços en linia */
    display: inline-block;
    margin-top: 30px;
}

nav ul li a{ /*Anem a donar estils als enllaços del menú */
    font-size: 18px;
    padding: 8px 20px;
    text-transform: uppercase;
    color: aliceblue;
    border-radius: 30px;
}

li a.active, li a:hover{
    background-color:#f3961c;
    transition: 0.5s;
}

/*Ara anem a configurar el "Sanswitch" */

section{
    /*background:url("../img/cafe.jpg") no-repeat;*/
    background-size: cover;
    height: calc(100vh - 80px);
}

#check{
    display: none; /*Amaguem l'imput check */
}

.checkbtn{
    display: none; /* No vull que es vegi el "sanwitch" en versió escriptori */
    font-size: 30px; /*Modifico el tamany d */
    color: aliceblue;
    float: right;
    line-height: 80px; /*El centrem al mig del contenidor */
    margin-right: 40px;
    cursor:pointer; /*Quan passem per sobre del sandwitch surti una ma i no una fletxa */
   
}

/*NOVA SECCIO DEL CAFE*/

.hero-section{
    padding-top: 100px;
    background-color: #3b141c;
    height: 100vh;
   
    
}

.hero-section .section-content{
    display: flex;
    align-items: center;
    color: aliceblue;
    min-height: 100vh;
    justify-content: space-between;
    padding-left: 200px;
   
}

.hero-section .hero-details .title{
    font-size: 70px;
    color: #f3961c;
    font-family: "Miniver", sans-serif;

}

.hero-section .hero-details .subtitle{

    font-size: 40px;
    font-family: "Poppins";

}


.buttons{
    margin-top: 40px;
    display: flex;
    gap:23px
}

.hero-section .hero-details .button{

    padding: 10px 26px;
    background-color: #f3961c;
    border-radius: 30px;
    box-sizing: border-box; /*Perquè no faci un petit salt... */
    border:2px solid transparent;
    color: aliceblue;
   
}

.hero-section .hero-details .button:hover{
color: aliceblue;
border-color: white;
background-color: transparent;

}

.hero-section .hero-image-wrapper{
    padding-right: 60px;
}

.hero-section .hero-image-wrapper img{
    width: 600px;
    height: auto;
    padding-bottom: 100px;
}


/*****************************************************
ESTILS PER LA SECCIÓ DE PARALLAX 
*****************************************************/
.parallax-section {
    position: relative;
    height: 100vh; /* Alçada de la secció (pot canviar-se segons les necessitats) */
    background-image: url("../img/hero-img.avif"); /* Canvia per la teva imatge */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }
  /* Estils per al títol centrat */
.parallax-content {
    text-align: center;
    z-index: 10; /* S'assegura que el text estigui per sobre de la imatge */
}

.parallax-title {
    font-size: 80px;
    margin: 0;
    font-family: "Poppins", sans-serif;
    padding: 0 300px;
}

/******************************************************************************
ESTILS PER LA SECCIO DE 3 CAFES
*******************************************************************************/

/* Estils generals per a la secció amb tres columnes */
.three-columns-section {
    display: flex; /* Utilitzem Flexbox per crear les tres columnes */
    justify-content: space-between; /* Espaiat entre les columnes */
    gap: 20px; /* Espai entre les columnes */
    margin: 20px 20px; /* Margen superior i inferior de la secció */
    height: auto;

  }
  
  /* Estils per a cada columna */
  .column {
    flex: 1; /* Cada columna ocupa el mateix espai */
    background-color: #f4f4f4; /* Fons lleugerament gris per a cada columna */
    padding: 20px; /* Espai intern dins de la columna */
    text-align: center; /* Centrem el text dins de la columna */
    border-radius: 8px; /* Cantos arrodonits per a les columnes */
    
  }
  
  /* Estils per a les imatges dins de cada columna */
  .column-image {
    width: 50%; /* Les imatges ocupen el 100% de l'amplada de la columna */
    height: auto; /* Manté les proporcions de la imatge */
    border-radius: 8px; /* Cantos arrodonits per a les imatges */
    margin-bottom: 15px; /* Espai entre la imatge i el títol */
  }
  
  /* Estils per als títols */
  .column-title {
    font-size: 40px; /* Mida de la font del títol */
    margin: 10px 0; /* Margen superior i inferior al títol */
    color: #333; /* Color del títol */
    font-family: "Poppins";
  }
  
  /* Estils per al text dins de cada columna */
  .column-text {
    font-size: 1em; /* Mida de la font per al text */
    color: #666; /* Color més suau per al text */
    line-height: 1.6; /* Augmentem l'espai entre línies per fer el text més llegible */
  }

/***********************************************************************************
  Seccio de saldo de per vida
***********************************************************************************/

.perVida {
    display: flex; /* Permet centrar el contingut */
    align-items: center; /* Centra verticalment */
    justify-content: center; /* Centra horitzontalment */
    height: 100vh; /* Ocupa tota l'alçada de la pantalla */
    background-image: url("../img/fons1.jpg"); /* Imatge de fons */
    background-size: cover; /* Ajusta la imatge perquè cobreixi tota la secció */
    background-position: center; /* Centra la imatge de fons */
    color: white; /* Text en color blanc per visibilitat */
    padding: 20px; /* Espaiat intern */
}

 /* Contenidor principal de les dues columnes */
 .container {
    display: flex; /* Disposició en fila per a les columnes */
    width: 100%; /* Que ocupi tot l'espai disponible */
    border-radius: 10px; /* Cantonades arrodonides */
    overflow: hidden; /* Evita desbordament de contingut */
}

/* Columnes individuals */
.columna {
    flex: 1; /* Cada columna ocupa el mateix espai */
    padding: 20px; /* Espai intern per al contingut */
}

/* Columna de text amb distribució vertical */
.text-columna {
    display: flex;
    flex-direction: column; /* Elements en columna */
    justify-content: center; /* Centrar contingut verticalment */
    text-align: center;
}

.text-columna h2{
    font-size: 70px;
    color: white;
}

.text-columna p{
    margin-top: 40px;
    font-size: 24px;
}

 /* Estil per a la imatge dins de la segona columna */
 .imatge-columna img {
    width: 80%; /* L'imatge ocupa tota l'amplada disponible */
    height: auto; /* Manté la proporció de l'imatge */
    display: block; /* Evita espais addicionals al voltant de la imatge */
}

/********************************
            FOOTER
*******************************/
/*Donem estil al contingut del footer*/
footer{
    display: flex;
    background-color: black;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: white;
    position: relative;
    
}



/***********************************
       PAGINA SOBRE NOSALTRES
************************************/

/***********************************
    ESTILS PER LA SECCIO PARALLAX
************************************/
.parallax-section2{
    position: relative;
    height: 100vh;
    width: 100%;
    background-image: url(../img/cafe.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    color: wheat;
}

.parallax-content2{
    text-align: center;
    z-index: 10;
}

.parallax-title2{
    font-size: 80px;
    margin: 0;
    font-family: "Poppins";
    padding: 0 300px;
}

/*********************************
          ESTILS COLUMNNES
*********************************/
.container2{
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dues columnes iguals */
    gap: 0; /* Espai entre columnes */
    width: 100vw;   
}

.columna {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/*Estils columna imatge*/
.columna-image img{
    display: flex;
    width: 100%;
    height: auto;
}

/*Estils columna text*/
.columna-text{
    display: flex;
    font-family: "Poopins";
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    padding: 0 30px;
    background-image: url(../img/patro-cafe.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.columna-text h1{
    font-size: 40px;

}

.columna-text p{
    font-size: 30px;
    margin: 15px;
    text-align: center;
}


/*********************************
          PAGINA SERVEIS
*********************************/
.parallax-services{
    background-image: url(../img/parallax-services.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;

}

.content-parallax-services{
    text-align: center;
    z-index: 10;
}

.title-services{
    font-size: 70px;
    margin: 0;
    padding: 0 300px;
}

/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* Estilos per a les seccions */
.section {
    margin: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.section-title {
    text-align: center;
    color: #333;
    margin-top: 30px;
}

/* Estils per al menú d'apertura */
.menu-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.menu-item {
    background-color: #e0e0e0;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estils per als esdeveniments */
.event-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.event-item {
    background-color: #cce5ff;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}



/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

h2 {
    text-align: center;
    color: #333;
    margin-top: 30px;
}

/* Estilos de las secciones */
.section {
    margin: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estilos para el menú */
.menu-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.menu-item {
    background-color: #e0e0e0;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    cursor: pointer;
}

/* Estilo para las descripciones del menú */
.menu-description {
    display: none;
    position: absolute;
    bottom: -10px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    width: 100%;
}

/* Hover para mostrar la descripción */
.menu-item:hover .menu-description {
    display: block;
}

/* Estilos para los eventos */
.event-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.event-item {
    background-color: #cce5ff;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    cursor: pointer;
}

/* Estilo para las descripciones de los eventos */
.event-description {
    display: none;
    position: absolute;
    bottom: -10px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    width: 100%;
}

/* Hover para mostrar la descripción de los eventos */
.event-item:hover .event-description {
    display: block;
}

/*********************************
          PAGINA CONTACTE
*********************************/

.banner-contact{
    position: relative;
    height: 100vh;
    background-image: url(../img/cafe2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.content-banner{
    position: absolute;
    margin-left: 200px;
    margin-top: 100px;
    width: 40%;
    text-align: center;
    color: white;
    
}

.content-banner h1{
    font-weight: bold;
    font-size: 100px;
    margin-bottom: 20px;
}

/* Estilos generales */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fffaf5;
    color: #4b3b28;
}
  
/* Sección de contacto */
.contact {
    padding: 2rem;
    min-height: 100vh;
    margin: auto;
    text-align: center;
}
  
.contact h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #6b4f29;
}
  
.intro {
    margin-bottom: 2rem;
    font-size: 1.2rem;
}
  
/* Grilla de métodos de contacto */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
  
.contact-item {
    background-color: #f7f1e8;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
  
.contact-item h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
  
.contact-item p {
    margin-bottom: 1rem;
}
  
.contact-item a {
    color: #6b4f29;
    text-decoration: underline;
    font-weight: bold;
}

/* Redes sociales */
.redes-sociales {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
}
  
/* Mensaje final */
.mensaje-final {
    margin-top: 3rem;
    font-weight: bold;
    font-size: 1.2rem;
}
  

/*Comensem amb la part responsive */

/*Treballarem per la part de tauleta i la part movil */

@media (max-width: 952px){ /*Tablet */

    /*Faig que responsive quedi el menu fixe a dalt */
    nav{
        position: fixed;
    }
    .enllas{
        padding-left: 15px;
    }

    nav ul li a{
        font-size: 16px;
    }

}

@media (max-width: 858px){ /*movil */
    .checkbtn{
        display: block; /*mostru l'icona */
    }
    ul{
        position: fixed;
        width: 100%;
        height: 100vh;
        background-color: rgb(73, 43, 5);
        top: 80px;
        left:100%; /*Trec el menu fora de la pantalla */
        text-align: center;
        transition: all 0.5s;
    }

    /*Faig que responsive quedi el menu fixe a dalt */
    nav{
        position: fixed;
    }

    nav ul li{
        display: block;
        margin: 50px 0;
        line-height: 30px;
    }


    nav ul li a{
        font-size: 20px;
    }

    li a:hover, li a.active{
        background: none;
        color: red;
    }

    #check:checked ~ul{ /*Que me busqui la ul i la torni a fer apareixer */
        left: 0;
    }
}