@charset "UTF-8";
* {
  margin: auto;
  padding: 0 auto;
}

body {
  background-image: url(../img/banner.png);
  background-size: 60%;
  background-attachment: fixed;
  /* Mantiene el fondo estático */
  /* Ajusta la imagen para cubrir todo el fondo */
  background-position: center;
  /* Centra la imagen */
  background-repeat: repeat;
  /* Evita que se repita */
}

.espaciador {
  display: none;
  width: 100%;
  height: 30px;
  background-image: url(../img/banner.png);
  background-position: center;
  background-repeat: repeat;
  background-size: 30%;
  padding: 20px 0px;
  margin: 0px;
}

nav {
  background-image: url(../img/contents/African-blackwood.webp);
  background-position: center;
  box-shadow: 0px 4px 3px rgba(66, 66, 66, 0.623);
}
nav .container-fluid button {
  border-color: rgba(39, 212, 212, 0);
}
nav .container-fluid button .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 30 30'><path stroke='rgba(255,255,255,1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}
nav .container-fluid img {
  width: 70px;
  height: 70px;
}
nav .container-fluid div .navbar-nav a {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  font-weight: bold;
  color: rgb(226, 225, 225);
}
nav .container-fluid div .navbar-nav a:hover {
  color: rgba(77, 109, 252, 0.808);
}

footer {
  padding-top: 40px;
  background-color: rgb(241, 245, 245);
}

@media screen and (max-width: 991px) {
  nav .container-fluid img {
    display: none;
  }
  /* Aquí van los estilos para pantallas pequeñas, como móviles */
}
.presentacion {
  box-shadow: 3px 4px 3px rgba(0, 0, 0, 0.507);
  background-image: url(../img/bkg2.jpg);
  background-repeat: repeat;
  background-size: cover;
  justify-content: center;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 10px;
  align-items: center;
}
.presentacion .div1 {
  grid-column: span 3/span 3;
  grid-row: span 5/span 5;
}
.presentacion .div1 .cardd .carousel-inner {
  border-radius: 20px;
}
.presentacion .div2 {
  display: flex;
  align-items: center;
  flex-direction: column;
  grid-column: span 2/span 2;
  grid-row: span 5/span 5;
  grid-column-start: 4;
}
.presentacion .div2 a {
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  border-color: #98fb98;
  background-color: rgb(9, 189, 24);
  margin: 10px 0px;
  padding: 16px 8px;
  width: 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  color: rgb(252, 252, 253);
  text-shadow: 2px 2px 8px black;
}
.presentacion .div2 a:hover {
  background-color: rgb(19, 155, 19);
}
.presentacion .div2 img {
  width: 80%;
}
.presentacion .div2 .columna {
  padding-bottom: 20xp;
  color: rgb(214, 175, 123);
  text-shadow: 1px 1px 2px black;
}
.presentacion .div2 .columna h3 {
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 4px solid rgb(95, 178, 216);
}
.presentacion .div2 .columna ul li {
  color: rgb(255, 255, 255);
}

.presentacion2 {
  background-color: rgb(31, 30, 29);
  padding: 10px 10px;
  margin: 10px;
  border-radius: 10px;
}
.presentacion2 .div1 {
  padding-bottom: 20xp;
  color: rgb(214, 175, 123);
  text-shadow: 1px 1px 2px black;
}
.presentacion2 .div1 h3 {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 4px solid rgb(95, 178, 216);
}
.presentacion2 .div1 ul li {
  color: rgb(255, 255, 255);
}

.presentacion3 {
  padding: 10px;
  background-image: url(../img/bkg\ madera\ cafe.jpg);
  background-position: center;
}
.presentacion3 h3 {
  box-shadow: 0px 4px rgb(95, 178, 216);
  color: white;
}
.presentacion3 .clientes {
  background-color: white;
  box-shadow: inset 8px 8px 3px rgba(0, 0, 0, 0.493);
  border-radius: 20px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.presentacion3 .clientes img {
  border-radius: 20px;
  width: 10%;
}

.presentacion4 {
  margin-top: 20px;
  display: flex;
  padding: 5%;
  background-image: url(../img/bkg\ madera\ cafe.jpg);
  color: white;
}
.presentacion4 .columna1 {
  padding: 20px;
}
.presentacion4 .columna1 h3 {
  font-weight: bold;
  font-size: 40px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif, "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
.presentacion4 .columna1 ul li {
  list-style: none;
  font-size: 20px;
}
.presentacion4 .columna1 a {
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  border-color: #98fb98;
  background-color: rgb(9, 189, 24);
  margin: 10px 0px;
  padding: 16px 8px;
  width: 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  color: rgb(252, 252, 253);
  text-shadow: 2px 2px 8px black;
}
.presentacion4 .columna1 a:hover {
  background-color: rgb(19, 155, 19);
}
.presentacion4 .card {
  width: 50%;
}
.presentacion4 .card .carousel-inner {
  width: 100%;
}

.presentacion5 {
  background-color: rgb(31, 30, 29);
  padding: 20px;
}
.presentacion5 .columna1 {
  padding: 8px 16px;
  border-radius: 20px;
  box-shadow: inset 2px 2px 4px rgb(112, 110, 110);
  background-color: white;
}
.presentacion5 .columna1 h3 {
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 4px solid rgb(95, 178, 216);
}

.presentacion6 {
  padding: 10px;
}
.presentacion6 .columna1 {
  color: white;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.342);
  padding: 10px;
  background-color: rgb(71, 69, 69);
  border-radius: 10px;
}

/***/
@media screen and (max-width: 992px) {
  .row.index1 .Title1 {
    padding: 0px;
  }
  .row.index1 .Title1 .display {
    flex-direction: column;
  }
  .row.index1 .Title1 .display .testo {
    display: none;
  }
  .row.index1 .Title1 .display .carrusell {
    padding: 0;
    width: 90%;
  }
  /**/
  .presentacion3 .clientes img {
    width: 100px;
  }
  .presentacion4 {
    display: flex;
    flex-wrap: wrap;
    padding: 10%;
    background-image: url(../img/bkg\ madera\ cafe.jpg);
    color: white;
  }
  .presentacion4 h3 {
    color: white;
  }
  .presentacion4 .columna1 {
    padding: 0px;
    gap: 20px;
  }
  .presentacion4 .columna1 .card {
    width: 50%;
  }
  .presentacion4 .columna1 .card .carousel-inner {
    width: 100%;
  }
}
/**/
@media screen and (max-width: 1244px) {
  /**/
  .presentacion4 {
    display: flex;
    flex-wrap: wrap;
    padding: 10%;
    background-image: url(../img/bkg\ madera\ cafe.jpg);
    color: white;
  }
  .presentacion4 h3 {
    color: white;
  }
  .presentacion4 .columna1 {
    padding: 10px;
    gap: 20px;
  }
}
/***/
.portfolio1 {
  margin: 2% 5%;
  margin-top: 10px;
}
.portfolio1 .grid {
  background-color: rgba(5, 0, 19, 0.945);
  border-style: solid;
  border-color: rgba(34, 31, 25, 0.733);
  border-radius: 20px;
  border-width: 10%;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.329);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
  margin: 0px 10px;
  padding: 10px;
  color: white;
}
.portfolio1 .grid .columna_p1 {
  background-color: grey;
  text-align: center;
  width: 100%;
}
.portfolio1 .grid .columna_p2 {
  text-align: center;
  width: 100%;
}
.portfolio1 .grid .columna_p2 h2 {
  font-size: 30px;
  font-weight: bold;
  font-family: monospace;
}

.portfolio2 {
  margin: 2% 5%;
  margin-top: 10px;
}
.portfolio2 .grid {
  background-color: rgba(5, 0, 19, 0.945);
  border-style: solid;
  border-color: rgba(34, 31, 25, 0.733);
  border-radius: 10px;
  border-width: 10%;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.329);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
  margin: 0px 10px;
  padding: 10px;
  color: white;
}
.portfolio2 .grid .columna_p1 {
  background-color: grey;
  text-align: center;
  width: 100%;
}
.portfolio2 .grid .columna_p2 {
  text-align: center;
  width: 100%;
}
.portfolio2 .grid .columna_p2 h2 {
  font-size: 30px;
  font-weight: bold;
  font-family: monospace;
}

.portfolio3 {
  margin: 2% 5%;
  margin-top: 10px;
}
.portfolio3 .grid {
  background-color: rgba(5, 0, 19, 0.945);
  border-style: solid;
  border-color: rgba(34, 31, 25, 0.733);
  border-radius: 10px;
  border-width: 10%;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.329);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
  margin: 0px 10px;
  padding: 10px;
  color: white;
}
.portfolio3 .grid .columna_p1 {
  background-color: grey;
  text-align: center;
  width: 100%;
}
.portfolio3 .grid .columna_p2 {
  text-align: center;
  width: 100%;
}
.portfolio3 .grid .columna_p2 h2 {
  font-size: 30px;
  font-weight: bold;
  font-family: monospace;
}

.portfolio4 {
  margin: 2% 5%;
  margin-top: 10px;
}
.portfolio4 .grid {
  background-color: rgba(5, 0, 19, 0.945);
  border-style: solid;
  border-color: rgba(34, 31, 25, 0.733);
  border-radius: 10px;
  border-width: 10%;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.329);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
  margin: 0px 10px;
  padding: 10px;
  color: white;
}
.portfolio4 .grid .columna_p1 {
  background-color: grey;
  text-align: center;
  width: 100%;
}
.portfolio4 .grid .columna_p2 {
  text-align: center;
  width: 100%;
}
.portfolio4 .grid .columna_p2 h2 {
  font-size: 30px;
  font-weight: bold;
  font-family: monospace;
}

@media screen and (max-width: 768px) {
  .portfolio1 {
    margin: 2% 0%;
  }
  .portfolio1 .grid {
    display: flex;
    flex-direction: column;
  }
  .portfolio2 {
    margin: 3% 0%;
  }
  .portfolio2 .grid {
    display: flex;
    flex-direction: column-reverse;
  }
  .portfolio3 {
    margin: 3% 0%;
  }
  .portfolio3 .grid {
    display: flex;
    flex-direction: column;
  }
  .portfolio4 {
    margin: 3% 0%;
  }
  .portfolio4 .grid {
    display: flex;
    flex-direction: column-reverse;
  }
}
/***/
.contacto1 .grid {
  background-color: rgba(5, 0, 19, 0.945);
  border-style: solid;
  border-color: rgba(34, 31, 25, 0.733);
  border-radius: 20px;
  border-width: 10%;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.329);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin: 30px 10px;
  padding: 10px;

}
.contacto1 .grid .columna_c1 {
  width: fit-content;
}
.contacto1 .grid .columna_c1 form {
  margin: 0 auto;
  padding: 2rem;
  font-family: "Segoe UI", sans-serif;
}
.contacto1 .grid .columna_c1 form h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: white;
}
.contacto1 .grid .columna_c1 form label {
  display: block;
  font-weight: bold;
  color: white;
}
.contacto1 .grid .columna_c1 form input,
.contacto1 .grid .columna_c1 form textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}
.contacto1 .grid .columna_c1 form button {
  margin-top: 2rem;
  width: 100%;
  padding: 1rem;
  background-color: #2e7d32;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1.1rem;
  cursor: pointer;
}
.contacto1 .grid .columna_c1 form button:hover {
  background-color: #1b5e20;
}
.contacto1 .grid .columna_p1 {
  padding: 10px;
  background-color: grey;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .contacto1 {
    margin: 2% 0%;
  }
  .contacto1 .grid {
    display: flex;
    flex-direction: column;
  }
}

/*# sourceMappingURL=style.css.map */