@charset "utf-8";
/* CSS Document */
*{margin: 0 auto; font-family: "Roboto", sans-serif;scroll-behavior: smooth;color: white;}
header {background-color: deeppink;height: auto;display: block;z-index: 1000;box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); position: fixed; width: 100%;}
nav { padding: 15px 0 15px 0;overflow: hidden;}
/*le doy estilo a mi capa nav menu1*/
.menu1 {float: left; width: 20%;}
.menu1 img {margin-left: 40%;}
/*le doy estilo a mi capa nav menu2*/
.menu2 {float: left; width: 60%;padding-top: 2.5%;}
.menu2 ul  {list-style-type: none; text-align: center;}
.menu2 ul li {text-align: center; display: inline; padding: 5px;text-transform: uppercase;font-weight: bold;}
.menu2 ul li a {text-decoration: none;}
/*le doy estilo a mi capa nav menu3*/
.menu3 {float: left; width: 20%;padding-top: 2.5%;}
.menu3 p {text-align: center;}
.menu3 a{text-decoration: none;}
/*este es el estilo de mis 3 capas enlazadas*/
.cuerpo {height: 500px;}
#servicios {background-color: purple;background-image: url("../img/Bull.png");background-repeat: no-repeat; background-position: center bottom; }
#disenos {background-color: deepskyblue;background-image: url("../img/Bull.png");background-repeat: no-repeat; background-position: left bottom; }
#contacto {background-color: paleturquoise;background-image: url("../img/Bull.png");background-repeat: no-repeat; background-position: right bottom; }
/*Aqui le ponemos un icono de fondo a los item de menú al pasar el ratón*/
.menu-item {
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.3s ease; /* Para una transición suave */
}
.menu-item:hover {
  background-image: url( "../img/bull.png"); /* Imagen al pasar el ratón */
  cursor: pointer; /* Opcional, para indicar interactividad */
}
footer {display: block; background-color: #000; padding: 10px; overflow: hidden;}
footer div {float:left;}
footer div p {padding: 10px;text-align: justify;}
footer img {float:left;margin-right: 50px;width: 100px;} 
footer h2{text-align: center;}
.pie1 {width: 20%;}
.pie2 {width: 60%;}
.pie3 {width: 20%;}