/* #portada{
    width: 100%;
    height: 400px;
}
#dogPortada {
  width: 100%;
  height: 400px;
} */





#home {
    display: flex; /* Esto convierte #home en un contenedor flex */
    justify-content: center; /* Esto centra los elementos hijos horizontalmente */
    align-items: center; /* Esto centra los elementos hijos verticalmente */
    background-color: #f2f2f2;
    padding: 20px;
    margin: 0 auto;
}


#menuBar {
    position: fixed; /* Esto hace que #menuBar siempre se mantenga en la parte superior */
    top: 0; /* Esto coloca #menuBar en la parte superior de la página */
    width: 100%; /* Esto hace que #menuBar tenga el ancho completo de la página */
    z-index: 1; /* Esto coloca la barra de menú por encima de #dogPortada */
}

#dogPortada {
    position: relative; /* Cambia esto a relative para que #dogPortada se posicione en relación a #home */
    width: 90%;
    height: 600px;
    background-image: url('../img/galeria/foto8.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0; /* Esto coloca #dogPortada debajo de la barra de menú */
}

#about{
    font-family: 'Raleway', sans-serif;
    padding: 100px 20% 0 20%;
    
}
#about p{
    
    color: #4d4d4d;
    margin-bottom: 20px;
    text-align: justify;
}
#about h3{
    font-size: 30px;
    color: #4d4d4d;
    margin-bottom: 20px;
    text-align: center;
}
#about{
    text-align: center;
}


#clients{
    font-family: 'Raleway', sans-serif;
    padding: 100px 20% 0 20%;
    
}
#clients p{
    
    color: #4d4d4d;
    margin-bottom: 20px;
    text-align: justify;
}
#clients h3{
    font-size: 30px;
    color: #4d4d4d;
    margin-bottom: 20px;
    text-align: center;
}
#clients{
    text-align: center;
}


#galery{
    font-family: 'Raleway', sans-serif;
    padding: 100px 20% 0 20%;
    text-align: center; /* Centra todo el contenido dentro de la galería */
}


#contact{
    font-family: 'Raleway', sans-serif;
    padding: 100px 20% 0 20%;
    /* fijar anchos para el label y el input */
}

#contact label {
    width: 200px; /* Fija el ancho deseado para los labels */
}

#contact input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"] {
    width: 300px; /* Fija el ancho deseado para los inputs de tipo texto, email y password */
    
}

#formContact{
    margin: 0 auto;
    padding: 15px;
}

.centerImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

footer{
    padding-top: 40px;
    text-align: center;
    height: 50px;
    font-family: 'Raleway' ;
}

#wsp{
    border-top: #4d4d4d 1px solid;
    text-align: center;
    width: 100%;
    margin-top: 20px;
    padding: 10px
}

#wsp a{
    font-size: 20px;
    color : green;
    
}
#wsp a:hover{
    color : gray;
    cursor: pointer;
    text-decoration: none;
    transition: 0.3s;
}
#videoYT{
    width: 100%;
    height: 400px;
}

#galleryVideo {
    display: block;
    margin: 0 auto; /* Centra el video horizontalmente */
    width: 100%;
    max-width: 400px; /* Ajusta el ancho máximo para dispositivos más grandes */
    height: auto; /* Mantiene la proporción del video */
    border-radius: 10px; /* Opcional: agrega bordes redondeados para un diseño más atractivo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Opcional: agrega sombra para destacar el video */
}

#galery div {
    display: inline-block;
    margin: 5px;
    width: 300px; /* Ajustar a 300px */
    height: 500px; /* Ajustar a 500px */
    text-align: center;
    vertical-align: top; /* Asegura que los elementos se alineen correctamente */
}

#galery div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.3s; /* Transición para la opacidad */
}

#galery div img:hover {
    cursor: pointer; /* Cambia el cursor a pointer */
    opacity: 0.5; /* Reduce la opacidad al hacer hover */
}

@media (max-width: 600px) {

    #dogPortada {
      position: relative; /* Cambia esto a relative para que #dogPortada se posicione en relación a #home */
     
      height: 250px;
      background-image: url('../img/galeria/foto8.jpeg');
      background-repeat: no-repeat;
      background-size: cover;  
      z-index: 0; /* Esto coloca #dogPortada debajo de la barra de menú */
    }
  }