html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Esto previene el desbordamiento horizontal */
  width: 100%; /* Asegura que el cuerpo no exceda el ancho de la pantalla */
}
body {
   background-color:#ffffff;
}
html {
  overflow: auto; /* Asegura el desplazamiento */
}

html::-webkit-scrollbar {
  display: none;
}

html {
  scrollbar-width: none; /* Firefox */
}

#preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}
/* Ocultar elementos mientras el preloader está activo */
body:not(.loaded) .menu,
body:not(.loaded) .icona2 {
    display: none; /* Oculta el menú y el ícono */
}

/* Mostrar el menú y el ícono después de que el preloader desaparece */
body.loaded .menu,
body.loaded .icona2 {
    display: block;
}

.logo-container {
  text-align: center;
}

.logo {
  width: 60%; /* Ajusta el tamaño del logo */
  animation: fadeIn 1.5s ease-in-out infinite; /* Añade animación opcional */
}

/* Animación de opacidad */
@keyframes fadeIn {
  0%, 100% {
      opacity: 0.5;
  }
  50% {
      opacity: 1;
  }
}

/* Oculta el contenido principal al inicio */
#main-content {
  display: none;
}


.container3{
  justify-content: center;
  align-items: center;
  margin: 0;
}



/* Contenedor general que agrupa el título y el grid */
.scroll-container {
  position: relative;
  /* Define un padding o margin inferior si quieres que, al acabar las imágenes,
     el título deje de estar "fijo" y continúe el scroll normal. */
 
}

.title1 {
  position: sticky;
  top: 40vh; /* Ajusta la distancia desde el top */
  z-index: -1;
  text-align: center;
 
 
}



/* Grid con dos columnas para mostrar parejas */
.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Dos columnas */
  grid-auto-rows: 40vh; /* Altura base para las filas */
  gap: 20px;
  padding: 20px;
 padding-top: 0vh;
 margin-bottom: 20vh;
 height: 300vh;
}

.image {
  position: relative;
  overflow: hidden;
}

.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ejemplo de disposición desordenada */

/* Primera imagen ocupa las dos columnas y es más alta */
.image-grid .image:nth-child(1) {
  width: 40vh;
  height: 50vh;
}

/* Segunda imagen, columna derecha */
.image-grid .image:nth-child(2) {
  width: 40vh;
  height: 50vh;
  margin-top: 30vh;
}

/* Tercera imagen, columna izquierda */
.image-grid .image:nth-child(3) {
  width: 40vh;
  height: 50vh;
  margin-top: 60vh;
  margin-left: 20vh;
}

/* Cuarta imagen, columna derecha */
.image-grid .image:nth-child(4) {
  width: 40vh;
  height: 50vh;
  margin-top: 80vh;
  margin-left: 50vh;
}

/* Quinta imagen, columna izquierda pero más pequeña */
.image-grid .image:nth-child(5) {
  width: 40vh;
  height: 50vh;
  margin-top: 100vh;
 
}

/* Sexta imagen, ocupa las dos columnas pero una sola fila */
.image-grid .image:nth-child(6) {
  width: 40vh;
  height: 50vh;
  margin-top: 110vh;
  margin-left: 0vh;
}


.grid-image,
.grid-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.grid-video {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.image:hover .grid-image {
  opacity: 0;
}

.image:hover .grid-video {
  opacity: 1;
  pointer-events: auto;
}

:root {
  --cursor-size: 40px;
  --bg: #Ffff;
}

.page-wrap {
  background: var(--bg);
  min-height: 50vh;
}

.page-wrap p{
  text-align: end;
  margin-right: 40px;
  font-size: 1.4em;
}
.page-wrap i{
  text-align: end;
  margin-left: 10px;
  font-size: 1em;

}
#cursor {
  position: fixed;
  top: calc(var(--cursor-size) * -0.5);
  left:  calc(var(--cursor-size) * -0.5);
  pointer-events: none;
  mix-blend-mode: difference;  
  filter: url(#goo);
  
}

.cursor-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cursor-size);
  height: var(--cursor-size);
  border-radius: var(--cursor-size);
  background: var(--bg);
  transform-origin: center center;
}



.page-wrap h1 {
  margin: 0;
  padding: 50px;
  text-align: center;
  font-size: 7em;
  line-height: 1;
  font-family: "nickel-gothic-variable",sans-serif;
  font-variation-settings: 'wdth' 100, 'slnt' 0;

  text-transform: uppercase;
  user-select: none;
}

.goo {
  display: none;
}
/* Ajustes responsive */
@media (max-width: 768px) {
  .title1 h1 {
    font-size: 3em;
  }
  .image {
    height: 200px;
  }
}

.project-images {
  display: none; /* Oculta por defecto */
 text-align: end;
  height: auto; /* Ajusta según el contenido */
}

.project-images img {
  width: 40%; /* Reduce el ancho */
  height: 40vh; /* Aumenta la altura vertical */
  transition: transform 0.3s;
  object-fit: cover; /* Asegura que la imagen llene el contenedor */
  position: absolute;
  top: -5px;
  right:6em;
 
}



.section-about{
  display: flex;
  background-color:#ffffff;
  height: 100vh;
}

.headline-main{
font-size: 1.6em;
font-family: "montserrat", sans-serif;
font-weight: 400;
  margin-bottom: 2em;
  margin-top: 5em;
  color:#282724;
  width: 90%;
  margin-left: 1em;
}
.headline-sub{
font-size: 1.6em;
font-family: "montserrat", sans-serif;
font-weight: 400;
  margin-bottom: 5em;
  margin-left: 1em;
  color:#282724;
  width: 90%;
}

.section-about img{
 width: 60%;
 margin-top: 8em;
  }

  .founder-image {
   
    object-fit: cover;
    filter: blur(5px); /* Aplica el efecto de desenfoque */
    transition: filter 0.3s ease; /* Suaviza el cambio al quitar el blur */
    border-radius: 5px;
    top: 0;
    left: 0;
    z-index: 1; /* Imagen base */
    margin-bottom: 1em;
  }
  
  .overlay-image {
   
    object-fit: cover;
    border-radius: 5px;
    position: absolute; /* Superposición */
    top: 10em; /* Ajuste vertical */
    left: 16em; /* Desplazamiento hacia la derecha */
    z-index: 2; /* Imagen encima */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Añade profundidad */
    transition: transform 0.3s ease, filter 0.3s ease;
  }
  
  .image-container:hover .founder-image {
    filter: blur(0); /* Quita el desenfoque al pasar el cursor */
  }
  
  .image-container:hover .overlay-image {
    transform: scale(1.1); /* Amplía ligeramente la imagen superior */
  }
  .about-text h4 {
    margin: 0;
    font-size: 14px;
    color: #888888; /* Color gris para el subtítulo */
    text-transform: uppercase;
    font-family: "montserrat", sans-serif;
  font-weight: 400;
  }
  
  .about-text h2 {
    margin: 5px 0 0;
    font-size: 18px;
    font-weight: bold;
    color: #888888;
    font-family: "montserrat", sans-serif;
 
  }

/*FOOTER*/


/* General */
.footer {
  background-color:#282724;
  color:white;
  padding: 6em 4em 4em 4em;
  font-family: "montserrat", sans-serif;
 
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* Para que se ajuste en pantallas pequeñas */
}

.footer-logo {
  width: 100%;
}


#footer-menu {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-bottom{display:flex;}
.footer-bottom p{
  margin-top: 4em;
  font-size: 1.2em;
  margin-left: 2em;
}

.contact-menu {
  display: flex;
  justify-content: flex-end;
  gap: 10em;

  text-align: right;
  margin-left: 0px;
}

.contact-info {
  text-align: right;

}

.contact-info a {
  color:white;
  text-decoration: none;
  margin-bottom: 10px;
  list-style: none;
  font-size: 14px;
}

.contact-info a:hover {
  color: #b8b8b8;
  text-decoration: none;
  list-style: none;
  
}

.contact-info p {
  margin: 5px 0;
  font-size: 14px;
  color:white;
  text-decoration: none;
}
.contact-info p:hover {
  color: #b8b8b8;
  text-decoration: none;
  cursor: pointer;
}
.menu-vertical {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.menu-vertical a {
  color:#282724;
  text-decoration: none;
  font-size: 14px;
}

.menu-vertical a:hover {
  color: #b8b8b8;
  text-decoration: none;
}

/* Sección derecha */



.contact-info {
  margin-bottom: 10px;
  align-items: flex-end;
  flex: 2;
  display: flex;
  flex-direction: column;
}

.contact-info p {
  margin: 5px 0;
  font-size: 1.2em;
}

.contact-info i {
  margin-right: 5px;
}

.footer-bottom {
  font-size: 0.8rem;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

.footer-content .privacity{
  display: flex;
  gap: 40px;
  margin: 6em 2em 0em;
}

.footer-content .privacity a{
 color: #282724;
 text-decoration: none;
}
.footer-content .privacity a:hover{
  color:#b8b8b8
 }

/* Responsivo */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }

  .footer-left,
  .footer-right {
    text-align: center;
    flex: none;
    margin-bottom: 20px;
  }
}




/*MENU*/

@media (max-width: 768px) {
 
  .menu .icona2 img {
    display: none;
     }}
  .menu .icona2 img{
    width: 100%;
    margin-top: 4vh;
  }

.menu{
 justify-content: center;
 position: fixed;
 z-index: 1000; 
}

.menu .options{
display: flex;
background-color: transparent;
margin-top: 3%;
}

.menu .options1{
margin-top:5.6vh;

}
 
@media (max-width: 768px) {
  .menu .options1{
   margin-top: 5.6vh;
   margin-right: 0vh;
  }
.menu .options{
  margin-left: -10vh;
  margin-top: 5.6vh;
}}

.options {
display: flex;
align-items: center;
justify-content: center;
}

.option {
  cursor: pointer;
  padding: 0.5vw 2vw;
  font-family: "montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px; 
  text-align: center;
  position: relative;
 
}


.option a {
  color:#282724;
  text-decoration: none;
  position: relative; 
  z-index: 1; 
  font-weight: 400;
}

.option:hover {

  border-radius: 0.6vw;
  text-decoration: none; 
}

.option:hover a {
  color:#b69fbc;
}

.active {
  border-color:#ffffff;
  color:#b69fbc;
  border-radius: 0.6vw; 
  text-decoration: none;
}

.active a{
 color:#b69fbc;
 }
  
.mobile-menu{
  display: none;
}

@media (max-width: 768px) {
  .menu ul {
    display: none; 
  }
  
  .mobile-menu {
    display: block; 
  } 
    .option {
   font-size:12px; 
   padding: 1vw 5vw; 
    }
    .active {
      border-radius: 2.4vw; 
    }
    .option:hover {
      background-color:#282724;
      border-radius: 2.4vw;
      text-decoration: none; 
    }
    
  }


/*DESTACATS*/

.fons{
  background: cover;
}




 .container{
  max-width: 100%;
  padding: 0px;
 }

 .container-fluid {
  display: flex;
  flex-wrap: nowrap;
  
 }
 
 .slide {
  flex: 0 0 auto;
  width: 85vh; 
  margin-right: 20px; 
  scroll-snap-align: start;
 }

 .slide img {
   width: 100%;
   height: 100%;
   border-radius: 2%;
   border: 2px solid transparent;
  transition: border-color 0.3s ease;
 }

 .slide img:hover{
  border-color:#282724;
   }

@media (max-width: 768px) {
.slide img{
 width: 100%;
 height: 100%;
 -o-object-fit: cover;
    object-fit: cover;
     }
.slide{
 width: 95%;
 height:55vh;
 margin-right: 10px;  
    }
  }


 
  .button_1 {
    background-color: transparent;
    color: #ffff;
    padding: 1vh 3vh;
    border: 1px solid #282724;
    border-radius: 15px;
    text-decoration: none;
    display: inline-block;
    font-size: 2vh;
    cursor: pointer;  
   }
   @media (max-width: 768px) {
     .button_1{
       font-size: 1.5vh;
       padding:1vh 2vh;
       text-align: center;
       border-radius: 1.6vh;
       }}
     
     .button_1 a {
       color:#282724;
       text-decoration: none;
       font-family: "montserrat", sans-serif;
font-weight: 400;
font-style: normal;
     }
     
     .button_1:hover,
     .button_1:hover a {
      background-color:#282724;
       
       color:#FFFEF6;
     }
     
 
.prem{
margin-left: 4vh;
margin-top: 2vh;
 }

.prem1{
margin-left: 2em;
margin-top: 14vh; 

 }
 @media (max-width: 768px) {
.prem1{
  margin-left: 13vh;
  margin-top: 14vh; 
  text-align: center;
     }
  .prem{
  text-align: center;
  margin-left: 0vh;
  margin-top: 0vh;
  }  
  }
.prem1 a{
  color:#FFFEF6;
  font-family: "montserrat", sans-serif;
font-weight: 400;
font-style: normal;
border-color: #FFFEF6;
}
.prem1 a:hover{
background-color:#FFFEF6;
    
color:#282724;}


.prem3{
margin: 1em;
}
.prem3 .button{
  color:#282724;
background-color:#ffffff;
    border-radius: 10px;
    border-color: 1px #282724;
}
.prem3 .button:hover{
background-color:#a39ef7;
color: #ffffff;
}

.prem3 .button a{
  font-family: "montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #282724;
  text-decoration: none;
}
.prem3 .button a:hover{

  color:#ffffff;
  text-decoration: none;
}

/* SERVICES HOME*/
@font-face {
  font-family:'JudgeRegular' ;
  src: url(llibreria/fontawesome-free-6.2.1-web/webfonts/F37JudgeTrial-Bold.otf);
}

 
 
.portada {
 

  height: 100vh;
  width: 100%;
}

.container .section{
  position: relative;
  width: 100%;
 
  
 
}
#serveis{
  padding-bottom: 14vh;
}
.section{
  background-color:#282724;
 
}
#back{
  background-color: #282724;
  color:#FFFEF6 ;
}

.overlay-page {
 
  box-sizing: border-box;

 
}
.overlay-page.hide {
  transform: translateY(-0%); /* Utiliza un margen negativo para ocultar visualmente el overlayPage */
}

.overlay-page.show {
  transform: translateY(0);
}


.overlay-page{
  margin: 0;
 
  height: 100vh;
  display: flex;

}

.overlay-page h2 {
  width: 70%;
  padding-top: 30%;
  margin: auto;
  font-size: 3.5rem;
  font-family: "scale-variable", sans-serif;
  font-variation-settings: "wght" 400, "wdth" 100;
  animation: lights 5s 750ms linear infinite;
  font-size: 5vh;
  text-align: start;
  margin: 0 10vh;
}
@media (max-width: 768px) {
  .overlay-page h2{
 font-size: 2.2em;
 padding-top: 0%;
 text-align: center;
 width: 90%;
 margin: 5em 2em 0.5em 0.5em;
    }}


 .title2 h2{
  font-family: "scale-variable", sans-serif;
  font-variation-settings: "wght" 400, "wdth" 100;
  font-size: 8vh;
  color:#282724;
  margin-left: 6vh;
  margin-bottom:6vh;
  margin-top: 2em;
}

@media (max-width: 768px) {
  .title2 h2{
  margin-left: 4vh;
  margin-right: 4vh;
  font-size:42px ;
  text-align: center;
  margin-bottom: 4vh;
font-size: 6vh;
margin-top: 2em;
 
  } }
  
.servei1{
  display: flex;
  flex-wrap: wrap;
 
}
.targetas{
  display: flex;
 
}
.servei2{
  display: flex;
}
.servei3{
  display: flex;
}
@media (max-width: 768px) {
  .servei1 {
  display: block;
  
  }
.targetas{
  display: block;
  margin-top: 4vh;
}}

.targetas_1 img{
  width: 80%;
  max-height: 36vh;
  border-radius: 1vh;
  margin-left: 6vh;
  -o-object-fit: cover;
     object-fit: cover;
  
}
.targetas_2 img{
  width: 70vh;
  margin-top: 0vh;
  height: 36vh;
  border-radius: 1vh;
  margin-left: 6vh;
  -o-object-fit: cover;
     object-fit: cover;
  
}
@media (max-width: 768px) {
  .targetas_1 {
  width: 100%;
  }
.targetas_1 img{
  width: 100%;
  margin-left: 0vh;
}
.targetas_2 {
  width: 100%;
  }
.targetas_2 img{
  width: 100%;
  margin-left: 0vh;
}}

.left-column {
  font-family: 'Montserrat', sans-serif; /* Aplica Montserrat */
  font-size: 2rem; /* Ajusta el tamaño de la fuente */
  font-weight: 200; /* Aplica peso de fuente para destacar */
  margin: 0; /* Elimina márgenes innecesarios */
}
.section .content{
  margin-top: 4em;
}
.fa-handshake {
  font-size: 1.4rem; /* Ajusta el tamaño del icono */
  margin-left: 2em;
  margin-right: 0.5em;
  color: #a39ef7;
  margin-top: 6px;
}
.servei1 {
  display: flex;
  align-items: center; /* Centra verticalmente el texto e imagen */
  
}

.content_1 .servei1 h2, .content_1 .servei2 h2, .content_1 .servei3 h2{
  color:#ffffff;
  font-size: 10vh;
  font-family: "scale-variable", sans-serif;
  font-variation-settings: "wght" 400, "wdth" 100;
  

}
.content .servei1 h2, .content .servei2 h2, .content .servei3 h2{
  color:#ffffff;
  font-size: 9vh;
  font-family: "nickel-gothic-variable",sans-serif;
  font-variation-settings: 'wdth' 100, 'slnt' 0;

font-style: normal;
 
}
.content .servei1 h2:hover, .content .servei2 h2:hover, .content .servei3 h2:hover{
  color:#a39ef7;
cursor: pointer;
transition: 1s;
}


@media (max-width: 768px) {
  .content .servei1 h2, .content .servei2 h2, .content .servei3 h2{
color:#ffffff;
font-size: 26px;
margin-left: 0vh;
margin-top: 2vh;
text-align: center;
}
.content_1 .servei1 h2, .content_1 .servei2 h2, .content_1 .servei3 h2{
  color:#ffffff;
font-size: 26px;
margin-left: 2vh;
margin-top: 2vh;}

.servei2{
display: block;
}
.servei3{
  display: block;
}
}

.content p{
color:#282724;
font-size: 2vh;
margin-left:2em;
font-family: "montserrat", sans-serif;
font-weight: 200;
font-style: normal;
margin-right: 8vh;
}
@media (max-width: 768px) {

.row{
  flex-wrap: wrap;
}
.content p{
  font-size: 2.8vh;
  margin-right: 0vh;
  margin: 2vh 2vh;
  text-align: center;

}}
.content_1 p{
  color: #282724;
  font-size: 2vh;
  margin-top: 2vh;
  font-family: "montserrat", sans-serif;
font-weight: 300;
font-style: normal;
  margin-right: 8vh;
  }
  @media (max-width: 768px) {
 
  .content_1 p{
    font-size: 2.4vh;
    margin-right: 0vh;
    margin: 2vh 2vh;
  
  }}

.servei1 ul{
  margin-right: 5vh;
 
  padding: 0px;

}
.servei1 ul+ul{
  margin-left: 16vh;
}
.servei1 li{
  font-size: 2vh;
  font-family: "montserrat", sans-serif;
  font-weight: 300;
  font-style: normal;
  list-style: none;;
}
@media (max-width: 768px) {
  .servei1 ul+ul{
    margin-left: 0vh;
  }
.servei1 ul{
  margin-right: 0vh;
  
}}
.paquete h2{
  font-size: 2.8vh;
  margin-left: 2vh;
  margin-bottom: 2vh;
}
.paquete li{
  font-size: 2vh;
  font-family: "montserrat", sans-serif;
  font-weight: 300;
  font-style: normal;
  list-style:none;
 
}
.paquete ul{
  padding: 0px;
}
.paquete ul + ul {
  margin-left: 16vh; /* Ajusta el margen superior entre los bloques de listas */
}

.paquete{
  margin-top: 2vh;
  display: flex;
}

.paquete1 h2{
  font-size: 2.8vh;
  margin-left: 2vh;
  margin-bottom: 2vh;
}
.paquete1 li{
  font-size: 2vh;
  font-family: "montserrat", sans-serif;
  font-weight: 300;
  font-style: normal;
}
@media (max-width: 768px) {
  .servei1 ul{
    margin-top: 2vh;
    text-decoration: none;
  }
  .servei1 li{
    font-size: 2.4vh;
    font-family: "montserrat", sans-serif;
font-weight: 300;
font-style: normal;
  text-decoration: none;
  list-style: none;
  }
  .paquete{
    display: block;
    margin-left: 2vh;
    margin-top: 4vh;
  }
.paquete h2{
  text-align: start;
}
.paquete li{
  list-style: none;
  font-size: 2.4vh;
  
}
.paquete1 ul{
  margin-right: 0vh;
}
.paquete1 li{
  list-style: none;
}
.paquete ul + ul {
  margin-left: 0vh; /* Ajusta el margen superior entre los bloques de listas */
}}

.section hr {
border: none;
border-top: 1px solid #333;
margin: 100px 8vh; 

}
.header hr{
border: none;
border-top: 1px solid #ffffff; 
margin: 4vh 1vh; 


}

 
@media (max-width: 768px) {
 #serveis{
  height: 180vh;
  }
  .section hr {
    border: none;
    border-top: 1px solid #333;
    margin: 100px 8vh; 
    
    }
    .header hr{
    border: none;
    border-top: 1px solid #333; 
    margin: 8vh 8vh; 
    
    }}

 /* ABOUT*/

#seccion img{
  opacity: 20%;
}

@media (max-width: 768px) {
 #serveis_about{
  height: 110vh;
  
  }}
.video_about{
position: absolute;
z-index: -1;
width: 100%;
-o-object-fit: cover;
   object-fit: cover;
}

.video_about img{
 width: 100%;
 height: 100em;
 -o-object-fit: cover;
    object-fit: cover;
}
@media (max-width: 768px) {
  .video_about{
    width: 100%;
  height: 100vh;
  overflow: hidden;
  }
.video_about img{
  width: 150%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}}

.seccion h1{
margin-top: 3em;
margin-bottom: 6em;
margin-left: 6vh;
font-family: "scale-variable", sans-serif;
font-variation-settings: "wght" 400, "wdth" 100;
font-size: 8vh;
color:#282724;
width:90%
}

@media (max-width: 768px) {
  .seccion h1{
  margin-left: 0vh;
  margin-top: 34vh;
  text-align: center;
  margin-bottom: 30vh;
  font-size: 4.8vh;
  width: 100%;
 
  }}
  .seccion h2{
    margin-top: 2.5em;
    margin-bottom: 20vh;
    margin-left: 6vh;
    font-family: "scale-variable", sans-serif;
    font-variation-settings: "wght" 400, "wdth" 100;
    font-size: 10vh;
    color:#282724
    }
    
    @media (max-width: 768px) {
      .seccion h2{
      margin-left: 0vh;
      margin-top: 40vh;
      text-align: center;
      margin-bottom: 30vh;
      font-size: 6vh;
     
      }}
 

 /* Estilos generales */
.container6 {
  width: 100vw;
  display: flex;
  justify-content: center;
}

.media {
  width: 90%;
}

.media video {
  width: 100vw;
  height: 40vh;
  -o-object-fit: cover;
     object-fit: cover;
}


@media only screen and (max-width: 768px) {
  /* Asegura que el h1 ocupe toda la pantalla */
  .title1 {
    height: 100vh; /* Ocupa la altura completa de la pantalla */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* El video estará por debajo del título */
  .container6 {
    position: relative;
    z-index: -1; /* Coloca el video detrás del contenido */
    margin-top: -100vh; /* Ajusta el margen superior si es necesario */
    width: 100vw;
    height: 100vh;
  }

  .media {
    width: 100%; /* Asegura que el video ocupe el ancho completo */
    height: 100vh; /* Asegura que el video ocupe la altura completa */
  }
  .media video{
   height: 90vh;
  }

  .mobile-video {
    display: block; /* Muestra el video móvil */
  }

  .desktop-video {
    display: none; /* Oculta el video de escritorio en dispositivos móviles */
  }
  .title1 h1{
  z-index: 1;
  
   
  }
}

.info{
  margin-bottom: 20vh;
  margin-top: 10vh;


  }
  
  .icona{
    margin: 50px;
  }
  .icona img{
    width: 5%;
  }

 @media (max-width: 768px) {
    .icona img{
     width: 10%;
    }
  .info{
    margin-top: 0vh;
    margin-bottom: 10vh;
  }}

.servei {
height: 60vh; 
width: 100vw;
display: flex;
align-items: center; 
overflow: hidden; 
    }
    
.servei img {
width: 100vw; 
height: auto; 
    }
    

@media (max-width: 768px) {
.servei {
height: auto; 
width: 100%; 
 }
    
.servei img {
width: 100%; 
height: auto; 
    }
  }

  .text{

    display: flex;
  }

  @media (max-width: 768px) {
    .text{
     display: block;
     margin: 10px 10px;
     margin-top: 2vh;
     justify-content: center;
    
    }}

.text h2{
color:#282724;
font-size: 62px;
font-family: "scale-variable", sans-serif;
font-variation-settings: "wght" 400, "wdth" 100;
margin-left: 4vh;

}

@media (max-width: 768px) {
  .text h2{
   font-size: 6vh;
   margin-left: 0vh;
   margin-top: 20vh;
   text-align: center;
  }}

.text2{
margin-bottom: 20vh;
   display: flex;
   margin-left: 4vh;
   
 }
 @media (max-width: 768px) {
  .text2{
   display: block;
   margin: 100px 10px;
   justify-content: center;
  }}

.text2 h2{
color:#282724;
font-size: 62px;
font-family: "scale-variable", sans-serif;
font-variation-settings: "wght" 400, "wdth" 100;
margin-left: 2vh;


}

@media (max-width: 768px) {
  .text2 h2{
   font-size: 6vh;
   text-align: center;
   margin-top: 2vh;
  }}
#servicios{
  background-color: #282724;
  height: 80vh;

}
  .text3{
  
     display: flex;
   }
 
   @media (max-width: 768px) {
     .text3{
      display: block;
      
      justify-content: center;
     }}
 
 .text3 h2{
 color:#FFFEF6;
 font-size: 10vh;
 font-family: "scale-variable", sans-serif;
 font-variation-settings: "wght" 400, "wdth" 100;
 margin-left: 10vh;
 margin-top: 16vh;
 }
 
 @media (max-width: 768px) {
   .text3 h2{
    font-size: 5vh;
    margin-left: 0vh;
    margin-top: 10vh;
    text-align: center;
   }}


.red-text {
  color:#FFFEF6;
}
.text .about0 {
  text-align: end;
}
.text{
  margin-right: 6vh;
}

.text .about0 p {
  color: #282724;
  width: 28%; 
  font-family: "montserrat", sans-serif;
font-weight: 300;
font-style: normal;
  font-size: 2vh;
  margin-left: auto;
 
}

@media (max-width: 768px) {
  .text .about0 p{
    width: 100%;
    margin-left:0px;
    font-size: 2.4vh;
    margin-bottom:2vh;
    text-align: center;
  }
.text{
  margin-right: 0vh;
}}
.text2 .about0 p{
  color:#282724;
  width: 60%;
  font-family: "montserrat", sans-serif;
  font-weight: 300;
  font-style: normal;
font-size: 2vh;
margin-left: 2vh;



 
}
@media (max-width: 768px) {
  .text2 .about0 p{
   font-size: 2.4vh;
   width: 100%;
   margin-left: 0vh;
   text-align: center;
  }}
  .text .about1 p{
    color: #CC5F54;
    font-family: "montserrat", sans-serif;
font-weight: 300;
font-style: normal;

    
  }
  .text3 .about0 p{
    color:#FFFEF6;
    width: 90%;
    margin-left: 10vh;
    font-family: "montserrat", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 2.8vh;
 
  
  
  }
  @media (max-width: 768px) {
    .text3 .about0 p{
      width: 100%;
      margin-left:0px;
      font-size: 2.4vh;
      text-align: center;
      margin-top: 2em;
    }}

  @media (max-width: 768px) {
    .text .about1 p{
     font-size:20px;
     text-align: center;
  
     
    }}

.text2 .about1 p{
  color: #CC5F54;
  font-family: "montserrat", sans-serif;
  font-weight: 300;
  font-style: normal;
  
}
@media (max-width: 768px) {
  .text2 .about1 p{
   font-size:20px;
  }}

 .text4{
   margin: 150px 40px;
    display: flex;
    
  }
  @media (max-width: 768px) {
   .text4{
    display: block;
    margin: 100px 10px;
    justify-content: center;
   }}
 
 .text4 h2{
 color:#282724;
 font-size: 62px;
 font-family: "scale-variable", sans-serif;
 font-variation-settings: "wght" 300, "wdth" 100;
text-align: center;
 }
 
 @media (max-width: 768px) {
   .text4 h2{
    font-size: 6vh;
    text-align: center;
    margin-top: 2vh;
   }}

.text4 p{
  font-size: 2.8vh;
  font-family: "montserrat", sans-serif;
font-weight: 300;
font-style: normal;
  text-align: center;
  margin-top: 4vh;
}

.prem2{
 text-align: center;
  margin-top: 4vh; 
  margin-bottom: 20vh;
   }
   @media (max-width: 768px) {
  .prem2{
    margin-left: 13vh;
    margin-top: 14vh; 
    text-align: center;
       }
    }

  .prem2 a{
    color: #282724;
    font-family: "montserrat", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  .text2 .about1 img{
    display: block;
         }
.about1 img{
width: 100%;
}
.about0 img{
  display: none;
}
@media (max-width: 768px) {
  .text2 .about1 img{
  display: none;
       }
    .about0 img{
      width: 100%;
    }
    .about0 img{
      display: block;
    }
    }


/*works*/

.espai h1{
 
 margin:24vh 6vh 0vh;
  color:#282724;
  font-family: "scale-variable", sans-serif;
  font-variation-settings: "wght" 400, "wdth" 100;
  font-size: 8vh;
}
@media (max-width: 768px) {
  .espai h1{
   margin: 18vh 0vh 0vh;
   text-align: center;
   font-size: 6vh;
  }}



.col-lg-12{
  margin-bottom: 60px;
  margin-top: 80px;
}
.photo-group {
  display: flex;
  justify-content: center; /* Centra horizontalmente las imágenes */
  
}

.photo-container {
  position: relative;
  width: 84vh;
  height: 55vh;
  margin: 20px;
}

.photo-container img {
  width: 100%;
  height: 55vh;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}
.photo-group1 {
  display: flex;
  justify-content: center;
  align-items: center;

}

.photo-container1 {
  position: relative;
  width: 100%; /* Ocupa el 90% del ancho de la pantalla */
  height: 100%; /* Ajusta la altura del contenedor */
  justify-content: center;
  text-align: center;
  padding: 0px 65px;
  margin: 20px 0px;


}

.photo-container1 img {
  width: 173vh; 
  height: 70vh;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
 
}
@media (max-width: 768px) {
  .photo-container1{
    width: 100%;
    height: 100%;
   padding: 0px 0px;
  }
  .photo-container1 img{ 
    width: 100%;
    height: 60vh;
   padding: 0px 0px;
  }
  .photo-container img{
    width: 100%;
    height: 60vh;
   padding: 0px 0px;
  }
  .row{
    flex-wrap: wrap;
  }
    }

.title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  color: #ffff;
  text-align: center;
  font-family: "montserrat", sans-serif;
font-weight: 400;
font-style: normal;
  font-size: 36px;
  opacity: 0;
  transition: opacity 0.3s;
}
.title3{
  position: absolute;
  bottom: 20px; /* Ajusta la posición del título dentro del contenedor */
  left: 0;
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-family: "montserrat", sans-serif;
font-weight: 400;
font-style: normal;
  font-size: 36px;
  opacity: 0;
  transition: opacity 0.3s;
}

.photo-container:hover .title {
  opacity: 1;
}
.photo-container1:hover .title3 {
  opacity: 1;
}
@media (max-width: 768px) {
  .photo-group {
    flex-wrap: wrap;
    margin-bottom: 0px;

  }
  .photo-container {
   
      margin: 10px 0px; /* Ajusta los valores según el margen deseado */
      width: 100%;
      height: auto;
    }

.title{
  font-size: 21px;
}
}

.grayscale {
  filter: grayscale(100%);
  transition: filter 0.1s;
}

.grayscale:hover {
  filter: grayscale(0%);
}


  



.info img{
  border-radius: 5px;
}

.row {
  display: flex;
 
}


.right {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .right{
width: 80%;
margin-left: 20px;

  }}

.contact{
      
  text-decoration: none;

}
  

@media (max-width: 768px) {
 .contact{
text-align: center;

  }}

.contact button {
  background-color: transparent;
  border: none;
  display: flex;
  font-size: 20px;
  cursor: pointer;
  font-weight: bold;
  padding: 0;
  margin-left: 100px;
}
@media (max-width: 768px) {
  .contact button{
    font-size: 18px;
    padding: 0px;
  }}

.contact .button-text {
  color:white;
}

.contact .icon i {
  font-size: 20px;
  color: white;
  margin-top: 5px;
  margin-left: 15px;
}
@media (max-width: 768px) {
  .contact .icon i{
font-size: 16px;
margin-left: 10px;
margin-top: 0px;
  }}

.contact button:hover .button-text,
.contact button:hover .icon i {
  color:#CC5F54;
}

.title5 h1{
  color:white;
  margin: 50px 50px;
  margin-top: 150px;
  font-size: 64px;
  font-family: "nickel-gothic-variable",sans-serif;
  font-variation-settings: 'wdth' 100, 'slnt' 0;
  
}
@media (max-width: 768px) {
  .title5 h1{
font-size: 50px;
margin:100px 0px;

  }}



  /*valora about*/
.valora_info{
  display: flex;
  padding: 4vh 8vh;
}
.valora_info h2{
  font-size: 2vh;
  font-family: "montserrat", sans-serif;
font-weight: 400;
font-style: normal;
margin-bottom: 2vh;
}
.valora_info h3{
  font-size: 2vh;
  font-family: "montserrat", sans-serif;
font-weight: 400;
font-style: normal;
margin-bottom: 2vh;
}
.valora_info p{
  font-size: 2vh;
  font-family: "montserrat", sans-serif;
font-weight: 300;
font-style: normal;
margin-bottom: 0px;
}
.valora_info_1{
  margin-right: 20vh;
}
.prototip {
 width: 100%;
 height: 0;
 padding-bottom: 56.25%; 
  }
  @media (max-width: 768px) {
    .prototip{
      height: 100%;
      padding-bottom:100%
    }
    .valora_info{
      display: block;
      padding: 4vh 4vh;
      margin-bottom: 4vh;
    }
    .valora_info h2{
      font-size: 2vh;
      font-family: "montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 0.5em;
    margin-top: 1em;
    }
    .valora_info h3{
      font-size: 2vh;
      font-family: "montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 0.5em;
    margin-top: 1em;
    }
    .valora_info p{
      font-size: 2vh;
      font-family: "montserrat", sans-serif;
    font-weight: 300;
    font-style: normal;
    margin-bottom: 0px;
    }
    .valora_info_1{
      margin-right: 20vh;
    }
  }
  
  #myVideo1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 8px;
    transform: translate(-50%, -50%);
  }
  @media (max-width: 768px) {
    #myVideo1 {
      position: absolute;
      width: 100%;
      height: 60vh;
      top: 50%;
      left: 50%;
      -o-object-fit: cover;
         object-fit: cover;
    
    }}
  

  #myVideo {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .title4{
    top:0px;
    
   }
   .title4 h1{
    color: #282724;
    font-size: 10vh;
    font-family: "scale-variable", sans-serif;
    font-variation-settings: "wght" 400, "wdth" 100;
    margin: 20vh 8vh 1vh; 
   }

   @media (max-width: 768px) {
    .title4 h1{
     margin: 16vh 2vh 0vh;
     font-size: 8vh;
    }
  }
  .container1 .content p{
    font-size: 6vh;
    font-family: "scale-variable", sans-serif;
    font-variation-settings: "wght" 400, "wdth" 100;
    padding: 0vh 30vh;
  }
 
  .container1{
display: flex;
margin-top: 20vh;

margin-bottom: 10vh;
  }
  @media (max-width: 768px) {
    .container1 {
    margin-top: 4vh;
    margin-left: 0vh;
    margin-bottom: 4vh;
    }
    .context .container1 .content p{
      margin-top: 4vh;
    }
    .container1 .content p{
      font-size: 4vh;
      padding: 0vh 0vh;
      margin-top: 10vh;
    }
    
  }
  .about{
    top: 0px;
  }
  
  .container1 .about h2{
    font-family: "montserrat", sans-serif;
font-weight: 400;
font-style: normal;
    font-size: 6vh;
    color:#282724;
    margin-right: 6vh;
  }
  @media (max-width: 768px) {
    .container1 .about h2 {
    font-size: 3vh;
      margin-top: 2vh;
      margin-right: 4vh;
      font-weight: 600;

    }
  }

  @media (max-width: 768px) {  
  .image img{
    display: none;
  }}

  .image img{
   width: 90%; }

.mockup{
  width: 100%;
  height: auto;
 justify-content: center;
 align-items: center;
 display: flex;
}
  .mockup img {
   width: 100%;
   height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
   border-radius: 15px;
  }
.mockup_1{
  display: flex;
  margin-top: 10vh;
  width: 100%;
  height: auto;
  padding: 0px;
}
.mockup_1 img{
  width: 100%;
  height: 80vh;
  border-radius: 15px;
  -o-object-fit: cover;
     object-fit: cover;
}
  @media (max-width: 768px) {
    .mockup{
    height: 60vh;
    }
  .mockup img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 0.8vh;
  }
  .mockup_1{
    display: block;
  }
  .aplicacion_1{
    margin-bottom: 4vh;
  }
  .mockup_1 img{
    width: 100%;
    height: 50vh;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 0.8vh;
  }
}
  
  .wireframes{
    margin-top: 20px;
    width: 100%;
    margin-bottom: 100px;
  }
  @media (max-width: 768px) {
    .wireframes{
     margin-top: 5px;
     margin-bottom: 40px;
     width: 100%;
     height: 100%;
    }}
  .pantalles {
    width: 100%;
    height: 100%;
 justify-content: center;
 align-items: center;
 display: flex;
}
  .pantalles img {
    width: 100%;
    height: 100vh;
    border-radius: 15px;
    -o-object-fit: cover;
       object-fit: cover;
  }

  @media (max-width: 768px) {
    .pantalles{
    margin-bottom: 0vh;
    height: 60vh;
    }
  .pantalles img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    margin-bottom: 10px;
    border-radius: 8px;
   
  }}


  .icono {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30vh; 
  }
  
  .icono img {
    max-width: 60%;
    max-height: 60%;
  }
  @media (max-width: 768px) {
    .icono img {
      max-width: 100%;
    max-height: 100%;
   
    }
  .icono{
    height: 10vh;
    margin-top: 4vh;
   
  }}

  /*CONTACTE*/
  
  .container2{
    background-color: #282724;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
  width: 1366px;
  height: 700px;
 
  }
  
  .contacte{
    margin-top: 4vh;
    justify-content: center;
    text-align: center;
    margin-bottom: 0vh;
   
  }
  .contacte h2{
    font-family: "scale-variable", sans-serif;
    font-variation-settings: "wght" 400, "wdth" 100;
    font-size: 2.8em;
    color:#FFFEF6;
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  @media (min-width: 1900px) and (min-height: 1080px) {
    .contacte h2{
      font-size: 4em;
    }
    .contacte{
      margin-top: 4em;
    }
     
    }
  @media (max-width: 768px) {
    .contacte{
  margin-top: 0vh;
  }
.col-md-6 .contacte{
  margin-top:50px }}
 

  @media (max-width: 768px) {
    .container2{
      width: 100%;
      height: auto;
    }
 

  .container2 .contacte{
    margin-top: 14vh;}

  
    }
 

  .email{
    margin-bottom: 1vh;
    margin-top: 4vh;
  }
  .email p{
    font-family: "montserrat", sans-serif;
    font-weight: 400;
    font-size: 4vh;
    color:#FFFEF6;
    text-align: center;
   
   
   
  }
  @media (max-width: 768px) {
    .email{
     margin-top: 6vh;
     }
    .email p{
     font-size: 3vh; 
     color:#FFFEF6;
     font-weight:bold;
    
     }}
 
  .email2 {
    
    display: flex;
    align-items: center;
    justify-content: center;
    
  }
  .email2 a{
    display: flex;
    text-decoration: none;}

  .email2 i{
    font-size: 2.6vh;
    color:#FFFEF6;
    margin-right: 20px;
  margin-top: 0vh;}
 
  .email2 p{
    font-size: 2.6vh;
    color:#FFFEF6;
    font-family: "montserrat", sans-serif;
font-weight: 400;
    font-style: normal; 
  margin-top: 1vh;
}

  @media (max-width: 768px) {
    .email2 i{
 display: none;
  }

.email2 p{
  font-size: 2.8vh;
  margin-top: 1.8vh;
  }
.email2{
  margin-top: 0px;
  }
}


  .button2,.button3 {
  background-color: transparent;
  color:#FFFEF6;
  padding: 1vh 2vh;
  border: 2px solid #FFFEF6;
  border-radius: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 2.6vh;
  cursor: pointer;
  margin-top: 4vh;
 
}

.button2 a,.button3 a {
  color:#FFFEF6;
  text-decoration: none;
  font-family: "montserrat", sans-serif;
font-weight: 400;
font-style: normal;
}

.button2:hover,
.button3:hover {
  background-color:#FFFEF6;
  border-color:#FFFEF6;
 
}

.button2:hover a,
.button3:hover a {
  color:#282724;
}

@media (max-width: 768px) {
  .button2,
  .button3 {
    padding: 1vh 2vh;
    font-size: 2.6vh;
  }}

.xarxes {
  margin-top: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px;
}
@media (max-width: 768px) {
  .xarxes{
margin-top: 3vh;
gap: 80px;
}}

  .back {
    display: flex;
   text-align: center;
   justify-content: center;
    margin-left: 4em;
    margin-top: 0em;
  }
  
  .back button {
    background-color: transparent;
    color:#FFFEF6;
    border: transparent;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 2.6vh;
    cursor: pointer;
    outline: none;
  }
  
  .back button a {
    color: inherit;
    text-decoration: none;
    font-family: "montserrat", sans-serif;
font-weight: 400;
font-style: normal;
  }
  
  .back button:hover,
  .back button:hover + .icon a i {
    color: white;
  }
  
  .back .icon a i {
    font-size: 2.6vh;
    color:#FFFEF6;
   margin-top: 0em;
    margin-left: 2vh;
  }
  @media (max-width: 768px) {
   .back {
      text-align: center;
      justify-content: center;
      margin-right: 0vh;
      margin-top: 0em;
      margin-left: 0vh;
     
    }
  .back button{
    font-size: 1em;
  }

  .back .icon a i{
    font-size: 14px;
    margin-left: 5px;
    margin-top: 1em;
  }
  .xarxes_1{
    gap: 5px;
  }
  .social i{
    font-size: 1em;
  }
}
  
  .container2 {
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.5s ease;
    pointer-events: none;
    position: fixed; /* Agrega esta línea para ajustar la posición del contenedor */
    top: 0; /* Ajusta la posición vertical según tus necesidades */
    left: 0; /* Ajusta la posición horizontal según tus necesidades */
    width: 100%; /* Ajusta el ancho según tus necesidades */
    height: 100%; /* Ajusta la altura según tus necesidades */
    z-index: 9999; /* Ajusta el valor del z-index para superponer al contenido anterior */
  }
  
  .container2.show {
    opacity: 1;
    transform: translateY(0%);
    transition: transform 2s ease-in-out;
    pointer-events: auto;
  }
  
    
/*Slide recent*/

.circle{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid white; /* Establece el borde inicialmente como transparente */
  border-top-color:  #C48167;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
  margin-left: -40px;
  position: absolute;
 
}

@media (max-width: 768px) {
  .circle{
    display: none;
  }}

.slideText {
  color: #C48167;
}

    
    
    
/*part de mi*/
.partdemi img{
  width: 100%;
  height: 80vh;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 15px;
}
.content1{

   width: 100%;
    margin-left: 100px;
    font-size: 20px;
    font-family: "montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
  } 
  .content1 p{
    width: 80%;
    margin-left: 120px;
    font-size: 2.8vh;
  }
  @media (max-width: 768px) {
    .content1 {
    width: 100%;
    margin-left: 20px;
    
    }
    .content1 p{
    width: 80%;
    margin-left: 20px;
    font-size: 2.8vh;
    font-family: "montserrat", sans-serif;
    font-weight: 300;
    font-style: normal;
    }
  }
  .container4{
    width: 100%;
    display: flex;
    margin: 20px;
  }

  .container4 h2{
    margin-left: 80px;
    font-family: "montserrat", sans-serif;
font-weight: 400;
font-style: normal;
  }
  @media (max-width: 768px) {
    .container4 h2{
      margin-left: 10px;
      font-size: 20px;
      font-weight: 600;
    }}
 

.anys{
display: flex;
margin-right:30px;
margin-left: 30px;
margin-top: 50px;
flex-wrap: wrap;
}

@media (max-width: 768px) {
  .anys{
    margin-top: 10px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 0px;
  }
.anys img{
  width: 100%;
  height: 60vh;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 2vh;
}}
.anys img{
  width: 100%;
  border-radius: 10px;
}

.anys1{
  display: flex;
  margin-right:30px;
  margin-left: 30px;
  margin-top: 50px;
  }
  
  /*VALORA BRAND*/
  @media (max-width: 768px) {
    .anys1{
      display: block;
      margin-top: 5px;
      margin-bottom: 20px;
      margin-right: 0px;
      margin-left: 0px;
    }
  .anys1 img{
    width: auto;
    height: 36vh;
    -o-object-fit: cover;
       object-fit: cover;
    margin-bottom: 2vh;
  }}
  .anys1 img{
    width: 100%;
    border-radius: 10px;
  }
  /*VALORA BRAND*/


.text1{
  display: flex;
  margin-right: 20px;
  margin-top: 50px;
}
.text1 img{
  width: 100%;
  border-radius: 10px;
 
}

.text1 p{
  margin-top: 80px;
  margin-left: 40px;
  font-size: 2.8vh;
  font-family: "montserrat", sans-serif;
  font-weight: 300;
  font-style: normal;
  
}
@media (max-width: 768px) {
  .text1 p {
font-size: 2.8vh;
margin-top: 5px;
margin: 20px;

}
.text1{
display: block;
margin-right: 0px;
margin-top: 0px;

}
.text1 img{
  height: 60vh;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
}
@media (min-width: 1900px) and (min-height: 1080px) {
  .text1 p{
    font-size: 24px;
   margin-top: 150px;
   }}
.text3{
  display: flex;
  margin-right: 20px;
  margin-top: 50px;
}

.text3 p{
  margin-top: 120px;
  margin-left: 40px;
  font-size: 2.8vh;
  font-family: "montserrat", sans-serif;
font-weight: 300;
font-style: normal;
  
}
.text4 img{
  width: 100%;
  border-radius: 10px;
  margin-left: 3vh;
}
@media (max-width: 768px) {
  .text3 p {
    margin-top: 1vh; 
    margin-left: 20px; 
    font-size: 2.8vh; 
    margin-bottom: 3vh;
  }
  .text4{
   display: block;
  }
 
  .text3 img{
 justify-content: center;
    width: 100%;
    height: 100%;
    margin-left: 0vh;
  }
  .versions{
    width: 100%;
  }
}

.text1 .flower p{
  margin-top: 20px;
  margin-left: 40px;
  font-size: 2.8vh;
  font-family: "montserrat", sans-serif;
font-weight: 300;
font-style: normal; 
}
@media (max-width: 768px) {
  .text1 .flower p {
font-size: 2.8vh;
margin-top: 5px;
margin: 20px;
margin-bottom: 50px;

}}

.flower{
  margin-top: 50px;
}
@media (max-width: 768px) {
  .flower{
margin-top: 5px;

}}
.flower_1 img{
  width: 100%;
  height: 80vh;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 15px;
}
.flower1{
  margin-top: 150px;
  display: flex;
}

.flower1 img{
  width: 50%;
  margin-left: 150px;
}
.flower1 p{
margin-top: 200px;
width: 80%;
font-family: "montserrat", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 2.8vh;

}
.flower2{
  margin-top: 150px;
  display: flex;
  margin-bottom: 50px;
}

.flower2 img{
  width: 50%;
  margin-left: 150px;
  margin-top: 20px;
}
.flower2 p{
margin-top: 200px;
width: 80%;
margin-left: 100px;
font-family: "montserrat", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 2.8vh;
}
@media (max-width: 768px) {
  .flower1{
    margin-top: 50px;
  }
  .flower1 p {
font-size: 2vh;
margin-top: 6em;
margin-left: 0vh;
margin-right: 2vh;
width: 100%;
}
.flower1 img{
  margin-left:20px;
  width: 80%;
  margin-top: 4vh;
}
.flower2{
  margin-top: 50px;
}
.flower2 p{
  font-size: 2vh;
margin-top: 6em;
margin-left:2vh;
width: 100%;

}
.flower2 img{
  margin-left: 20px;
  width: 80%;
  margin-top: 4vh;
}
}

.projecte-col-md-12 img{
  width: 100%;
  border-radius: 10px;
  margin-top: 50px;
  
}
@media (max-width: 768px) {
  .projecte-col-md-12 img {
  height: 80vh;
  width: 100%;
   -o-object-fit: cover;
      object-fit: cover; 
   margin-top: 4vh;
  }}

.projecte-col-md-12 {
  position: relative;
  margin-bottom: 50px;
 
}

.image-container {
  position: relative;
  
 
}


.projecte-col-md-12 h2 {
 text-align: end;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 10px;
  color:#282724;
  font-family: "montserrat", sans-serif;
font-weight: 400;
font-style: normal;
  font-size:3vh;
  margin-right: 40px;
  margin-top:10px ;
 
}
.projecte-col-md-12 h2:hover {
  color:#b69fbc;
  cursor: pointer;
}
.projecte-col-md-12 a{
  text-decoration: none;
}
@media (max-width: 768px) {
  .projecte-col-md-12 h2 {
    font-size: 16px;
    margin-right: 20px;
  }}

/*palyground*/

.mico img{
  width: 40%;
  margin-bottom: 50px;
}
@media (max-width: 768px) {
  .mico img {
   width: 60%;
   margin-bottom: 1em;
   margin-top: 3em;
  }}

/*TERMINIS*/

.avis{
  margin: 40px;
}
.avis h2{
  color:#CC5F54;
  margin-bottom: 40px;
}

.inici .col-md-6{
  max-width: 100%;
  flex: 0 0 100%;
}
.inici{
  display:flex;
}

.avis{
  overflow-y: auto;
    max-height: 1000px;
    scrollbar-width: thin;
}
.avis::-webkit-scrollbar {
  width: 0rem; /* Ancho de la barra en Chrome */
}
.avis::-webkit-scrollbar-thumb {
  background-color: transparent; /* Color del "pulgarcito" en Chrome */
}
.fuera{
  display: none;
}
/* CSS para dispositivos móviles */
@media (max-width: 768px) {
  .inici{
    max-width: 100%;
    display: block;
    margin: 20px;
  }
  
  .avis {
    overflow-y: auto;
    max-height: none;
   
  }
  .avis::-webkit-scrollbar {
    width: 0rem;
  }
  .avis::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
  .aviso-legal,
  .politica-privacidad {
    overflow: visible; /* Elimina el desbordamiento */
    max-height: none; /* Elimina la restricción de altura */
  }
  .aviso-legal,
  .politica-privacidad {
    display: inline;
    width: 100%; 
  }
  .aviso-legal h1,
  .politica-privacidad h1{
   margin-top: 80px;

  }
  .fuera{
    display: none;
  }
}