*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Open Sans', sans-serif;
}

/* dar espacio entre secciones*/
.contenedor {
  padding: 60px 0; /*arriba y abajo de 60px y a los lados 0px */
  width: 90%;
  max-width: 1000px;
  margin: auto; /* para centrar todo automaticamente*/
  overflow: hidden; /* esconde la imagen o letra, si es k sale fuera del contenedor*/
}
.titulo {
  color: #642a73;
  font-size: 30px;
  text-align: center;
  margin-bottom: 60px; /* dintinguir del contenido de cada seccion */
}

/* Header */
/* para la imagen principal y para darle colores */
header {
  width: 100%;
  height: 700px;
  background: #bc4e9c;  /* fallback for old browsers */
    /*opacity: 0.6; */
    /* imagen a proyectar */
  background: -webkit-linear-gradient(to right,  hsla(340, 95%, 50%, 0.459), hsla(317, 45%, 52%, 0.664)), url("../fotosautos/minivan7.png");  /* Chrome 10-25, Safari 5.1-6 */
  /* , url(C:/Walter/RubenAlvino/img/Autos/viajaentaxi2.jpg) */

  background: linear-gradient(to right, hsla(340, 95%, 50%, 0.459), hsla(317, 45%, 52%, 0.664)), url("../fotosautos/minivan7.png");
  /* url('../fotosautos/minivan7.png') */
  background-size: cover;
  background-attachment: fixed;
  position: relative;
 /* position: relative; /* para k muestre el corte de la ola*/

}

nav{
  text-align: right;
  padding: 30px 50px 0 0;
}
 nav > a{
   color: #fff;
   font-weight: 300;
   text-decoration: none; /* quita el subrayado debajo de la letra */
   font-size: 16px;  /* viene por default, pero igual se coloca */
   margin-right: 10px; /* separación entre palabras */
 }

 /* Cuando se pasa el mouse sobre las letras, se coloca hover */
 nav > a:hover {
   text-decoration: underline; /* subraya la palabra */
 }

header .textos-header {
  display: flex;
  height: 430px;
  width: 100%;
  align-items: center;
  justify-content: center;
  /* para separar en 2 columnas */
  flex-direction: column;
  text-align: center;
}

.textos-header h1{
  font-size: 60px;
  color: #fff;
}

.textos-header h2{
  font-size: 40px;
  font-weight: 300;
  color: #fff;
}

.wave { /* hace que la imagen ola baje */
  position: absolute;
  bottom: 0;
  width: 100%;

}

/* ABOUT US*/
main .sobre-nosotros{
  padding: 30px 0 60px 0;

}

.contenedor-sobre-nosotros {
  display: flex;
  justify-content: space-evenly;  /* reparte el espacio equitativamente */
}

.imagen-about-us {
  width: 40%; /*tamaño de la imagen nuestro servicio */
}

.sobre-nosotros .contenido-textos {
  width: 50%;
}

.contenido-textos h3 {
  margin-bottom: 15px;
}

.contenido-textos h3 span {
  background: #4d0686;
  color: #fff;
  border-radius: 50%; /* contorno al rededor del numero */
  display: inline-block;  /*para k tenga propiedad de bloque */
  text-align: center;
  width: 30px;
  height: 30px;
  padding: 2px; /* para centrar el número dentro del círculo */
  box-shadow: 0 0 6px 0 rgba(230, 0, 0, 0.5); /* resalta el circulo del número */
  margin-right: 5px; /*separar el texto a la derecha del círculo */
}


.contenido-textos p {
 padding: 0px 0px 30px 15px; /*alínea el contenido arriba, abajo, derecha, izquierda */
 font-weight: 300;
 text-align: justify;
}

/* Nuestros servicios,   en la fuente es: portafolio */

.nuestro-servicios {
  background: #f2f2f2;
}

.galeria-servicios {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap; /* divide la cantidad de fotos en 2 columnas */
}

/* configuracion de las 8 imagenes a mostrar*/
.imagen-servicios {
  width: 22%;
  height: 248px;
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}

.imagen-servicios > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hover-galeria {  /* muestra el numero de celular cuando coloca
                    el mouse sobre la foto */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  transform: scale(0);
  background: hsla(273, 91%, 27%, 0.7);
  transition: transform 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.hover-galeria img {
  width: 50px;

}

.hover-galeria p {
  color: #fff;

}

.imagen-servicios:hover .hover-galeria {
  /* scaleX(0) cierra con direccion a las  X */
  /* scaleY(0) cierra con direccion a las  Y */
  /* scale(0) cierra con direccion al centro  */
  transform: scale(1);
}

/* Opinión de clientes  ********/

/* En la fuente principal es:  cards.card, lo reemplazamos por cards.opina*/

.cards {
  display: flex;
  /*justify-content: space-between; /* separacion mas amplia entre los 2 cuadros */
  justify-content: space-evenly;
}

.cards .opina {
  background: #4d0686;
  display: flex;
  width: 46%;
  height: 200px;
  align-items: center;
  justify-content: space-around;
  border-radius: 10px;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.6);

}

.cards .opina img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 50%;
  display: block;
}

.cards .opina > .contenido-texto-card {
  width: 60%;
  color: #fff;
}

/* **** Para llenar el formulario con nombre: escribenos */

form {
  width: 60%;
  margin: auto;
  background: #4d0686;  /*rgba(0, 0, 0, 0.4); */
  padding: 10px 20px;
  box-sizing: border-box;
  margin-top: 20px;
  border-radius: 7px;
  font-family: Arial, Helvetica, sans-serif;
}

form > h2 {
  color: #fff;
  text-align: center;
  margin: 0;
  font-size: 30px;
  margin-bottom: 20px;
}

form > input, textarea {
  width: 100%;
  margin-bottom: 20px;
  padding: 7px;
  box-sizing: border-box; /* para k no se salga del formulario*/
  font-size: 17px;
  border: none; /* para quitar el borde*/

}

form > textarea {
  min-height: 100px; /* el cuadro de texto, solo c reduce hasta 100px*/
  max-height: 250px; /* se puede ampliar hasta el limite especificado*/
  max-width: 515px; /* ancho maximo*/
  min-width: 100px;  /* ancho minimo*/
}

/* para dar estilos al boton Enviar ****/

#boton {
  background: rgba(230, 224, 224, 0.4);  /* se asigna un color al boton*/
  color: #1c1b1bc7;
  padding: 20px;
  text-align: center;

}

/*cuando pasa el cursor cambia el icono a mano, se utiliza la
  seudoclase hover*/
  /* hover le va indicar que estilo va ha tener el boton cuando
     pongan el cursor sobre el boton*/
#boton:hover {
  cursor: pointer;
}


/* para alinear el contenido de la opinión del cliente */

.cards .opina > .contenido-texto-card P {
  font-weight: 300;
  padding-top: 5px;
  align-items: center;
}

/* Servicio especial */
/* en la fuente principal es: our team, lo reemplazamos con */
/* Se utiliza flex box  */

.about-service {
background: #f2f2f2;
padding-bottom: 30px;
}

.servicio-cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.servicio-ind {
  width: 28%; /* que se repartan entre los 3*/
  text-align: center;
}
.servicio-ind img {
  width: 90%; /*para que se ordenen las imagenes */
}

.servicio-ind h3 {
  margin: 10px 0;  /*margen arriba y abajo 10px y a los costados 0px*/
}

/* para ordenar los parrafos*/
.servicio-ind p {
  font-weight: 300;
  text-align: justify;
}

/* pie de página */

footer {
  /* colocar fondo negro */
  background: #414141;
  padding: 60px 0 30px 0;  /* 60 arriba, 0 a la derecha, 30px abajo, 0 a la izquierda */
  margin: auto; /* para centrar todo*/
  overflow: hidden; /* si sale algo fuera del cuadro lo oculte y no se rompa la maqueta */
}

 /* .contenedor-footer > .content-foot  img {
  width: 20%;
  height: 20%;
  object-fit: cover;
  display: block;
} */

.contenedor-footer {
  display: flex; /* flex, Sube la imagen y letra y coloca todo en una fila */
  width: 90%;
  justify-content: space-evenly; /*reparte los elementos equitativamente*/
  margin: auto;
  padding-bottom: 50px; /* Para tener un espacio con la última línea*/
  border-bottom: 1px solid #ccc; /*linea delgada de color gris debajo*/
}

.content-foot {
  text-align: center;

}

.content-foot img {
  width: 40%;
}

.content-foot h2 {
  font-size: 40px;
  color: #fff;

  /* margin-bottom: 20px; */

}
.content-foot h4 {
  color: #fff;
  border-bottom: 3px solid #af20d3;
  padding-bottom: 5px; /* margen para que no se apegue tanto*/
  margin-bottom: 20px;

}

.content-foot p {
  color: #ccc;
}

.titulo-final {
  text-align: center;
  font-size: 15px;
  margin: 20px 0 0 0;
  color: #9e9797; /*color gris claro*/
}

/*  **********************************************************  */
/* Desde este punto, se empieza a escribir los códigos para moviles,
   utilizando Responsive*/
   /* en video 14.32 */

   /* pantalla de 900 px, se programa modificando algunas sesiones y
     cambiando las lineas de comandos para llegue hasta los 500px*/

@media screen and (max-width:900px){
  header{
    background-position: center; /* para que la imagen principal se
                                    centre */
  }

  /* en el portal lo tenemos como: Que te ofrecemos*/
  .contenedor-sobre-nosotros{
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .sobre-nosotros .contenido-textos {
    width: 100%;

  }

  /* muestra la foto */
  .imagen-about-us{
    width: 75%;  /* foto en: Que te ofrecemos*/
    margin-bottom: 20px; /*la parte inferior de la imagen se le asigna un espaciado*/
  }

  /* Galeria (portafolio), lo tenemos como: nuestras unidades a su servicio*/
  /*  muestra las fotos de autos y su conductor*/

  .imagen-servicios {
    width: 45%;
  }

  /* Clientes*/
  /* Opiniones de nuestros clientes*/

  .cards {
    /* justify-content: center; */
    flex-direction: column; /* ordena las opiniones em columnas*/
    justify-content: center;
    align-items: center;
  }

  /*las imagenes de los clientes se le puso  .opina */

  .cards .opina{
    width: 90%; /* para que las tarjetas ocupen 90% de la pamtalla*/
  }

  /* se debe dar un margen en la parte de abajo de la primera imagen
      para que no choque con la segunda imagen*/
  .cards .opina:first-child{ /* aplica espacio solo el cuadro 1 */
    margin-bottom: 15px;
  }




  /* servicio Especial*/

  .servicio-cont{
    justify-content: center;
    flex-direction: column;
  }

  .servicio-ind {
    width: 90%;
    text-align: center;
  }

  /* colocar margen a la primera y segunda imagen, esto se especifica
     entre parentesis y el numero de imagen correspondiente*/
  .servicio-ind:nth-child(1), .servicio-ind:nth-child(2) {
      margin-bottom: 60px;
  }

  /* ampliar la imagen para que abarque la pantalla*/
  .servicio-ind img {
    width: 90%;
  }

/* *** footer ***/
.contenedor-footer{
  flex-direction: column; /* para k la imagen y letras las ordene en columnas*/
  justify-content: center;
  border: none; /* quita el borde gris antes de &copy*/
}

/* para ordenar en columnas, whatsapp, email, direccion*/
.content-foot{
  margin-bottom: 25px; /* espaciado horizontal entre whats, email, direc*/
  text-align: center; /* centra el texto de whats, email, direction*/
}

.content-foot h4{
  border-bottom: 0px none; /* retira el borde*/
}
/* el parrafo donde viene los numeros*/
.content-foot p{
  color: #ccc;/**/
  border-bottom: 2px solid #f2f2f2; /* grosor de la linea y color de fondo de la pagina*/
  padding-bottom: 15px;/* para que no se pegue el borde al elemento*/
}
.content-foot h2{
  font-size: 30px;
  border-bottom: 2px solid #f2f2f2;
  padding-bottom: 15px;
}

/* derechos reservados*/
.titulo-final{
  font-size: 15px; /* el tamaño de letra de, elaborado por: wb service*/
}

}

/*  **********************************************************  */
/* Referencia video2, empieza en el minuto 22.05 para configurar a*/
/* pantalla de 500 px */

@media screen and (max-width:500px) {
  nav{   /* para el menu de navegación*/
    text-align: center;
    padding: 30px 0 0 0;
  }

  /* solo para los enlaces que estan dentro de nav */
  nav > a {
    margin-right: 5px; /* para que el menu d opciones tenga espacio*/
  }

  /* el texto de la cabecera disminuye en su tamaño y lo centra*/
  /* donde dice  Chacarilla Remisse */
  .textos-header h1{
    font-size: 35px;
  }

  .textos-header h2{
    font-size: 20px;
  }


  /* About us*/
  /* En la pagina dice: Qué te ofrecemos*/

  .imagen-about-us {
    margin-bottom: 20px; /*la parte inferior de la imagen se le asigna un espaciado*/
    width: 99%;
  }

  .sobre-nosotros .contenido-textos {
    width: 95%;
    justify-content:center;
  }

/* Galeria */
/* lo tenemos como: nuestras unidades a su servicio*/
.imagen-servicios{
  width: 95%; /* las fotos se le asigna mas espacio*/
}

/* opiniones de nuestros clientes*/
/* la fuente principal esta como: que dicen nuestros clientes*/
.cards .opina{
  height: 450px;
  display: flex;
  flex-direction: column; /* hace k el cuadro de las opiniones, este en columna*/
  align-items: center; /* para k el texto este centrada horizontalmente*/
}

/* tamaño de la imagen de clientes que opinan*/
.cards .opina img{
  width: 96px;  /* ancho*/
  height: 96px; /* altura */
}



/* ********* footer ************/

.contenedor-footer{
  /*flex-direction: column; /* para k las letras las ordene en columnas*/
  border: none; /* quita el borde gris antes de &copy*/
}

/* para ordenar en columnas, whatsapp, email, direccion*/
.content-foot{
  margin-bottom: 20px; /* espaciado horizontal entre whats, email, direc*/
  text-align: center; /* centra el texto de whats, email, direction*/
}

.content-foot h4{
  border-bottom: 0px none; /* retira el borde*/
}
/* el parrafo donde viene los numeros*/
.content-foot p{
  color: #ccc;/* color gris*/
  border-bottom: 1px solid #f2f2f2; /* color de fondo de la pagina*/
  padding-bottom: 20px;/* para que no se pegue el borde al elemento*/
}

/* derechos reservados*/
.titulo-final{
  font-size: 12px; /* el tamaño de letra de: wb service*/
}

/* termina la elaboracion en el minuto 35.30seg*/
}

/* estilos de h1 de la pagina creada gracias.html ********/
h6{
  text-align: center;
  color: #fff;
  font-size: 40px;
  background: rgba(0, 0, 0, 0.4);
  margin-top: 20px;
}