/* CSS para pagina y Navbar*/
.lawbusiness{
  background-color: white;
  color: #00442b;
  box-shadow: 0 -5px 10px rgba(0,68,43,1), 0 5px 10px rgba(0,68,43,1);
}
.linknavbusiness{
  color: #00442b;
  text-decoration: none;
}
.linknavbusiness:hover{
  color: #00442b;
  text-decoration: none;
}
.logohol{
  max-height: 70px;
  width: auto;
}
.bg-business{
  background-color: #00442b;
  color: white;
  -webkit-box-shadow: 13px 11px 20px 0px rgba(0,0,0,0.59);
  box-shadow: 13px 11px 20px 0px rgba(0,0,0,0.59);
}
.bg-business-img {
  position: relative;
  width: 100%;
  max-height: 95vh;
  overflow: hidden;
}
.bg-business-bg{
  background-image: url("../img/Fondo verde BC&B.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 50%;
  max-height: 50vh;
  color: white;
  overflow: hidden;
  -webkit-box-shadow: 13px 11px 20px 0px rgba(0,0,0,0.59);
  box-shadow: 13px 11px 20px 0px rgba(0,0,0,0.59);
  padding-bottom: 30px;
}
.responsive-img {
  width: 100%;
  height: auto;
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-left: 2%;
}

.text-section {
  background-color: #00442b;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(2% + 1vw);
}

.text-section p {
  font-size: calc(0.5rem + 1vw);
  text-align: justify;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 50px;
  animation: aparecer 3s forwards;
}


/* Textos Especiales de CSS */
.tituloswhite{
  color: white;
  font-weight: bolder;
  padding-top: 30px;
}
.titulosblack{
  font-weight: bolder;
  padding-top: 30px;
}
.tituloespecial{
  padding-top: 50px;
  font-size: 2.7rem;
  margin: 50px;
}
.tituloespecialgreen{
  padding-top: 50px;
  font-size: 2.7rem;
  margin: 50px;
  color: #00442b;
}
.titulobcbusiness{
  color: white !important;
  font-weight: bolder;
  font-size: calc(2rem + 3vw);
  opacity: 0; /* Inicialmente, el texto estará invisible */
  animation: aparecer 3s forwards; /* Utiliza la animación llamada "aparecer" durante 2 segundos y mantiene el último estado */
}
@media (min-width: 1440px) {
    .titulobcbusiness {
        font-size: calc(4rem + 3vw); /* Ajusta el tamaño base y el valor de vw según lo que necesites */
    }
}

.titespbuss{
  color: white !important;
  font-size: calc(1rem + 1vw) !important;
  max-width: 1600px !important;
  text-align: justify;
  color: white;
  opacity: 0; /* Inicialmente, el texto estará invisible */
  animation: aparecer 3s forwards; /* Utiliza la animación llamada "aparecer" durante 2 segundos y mantiene el último estado */
}
.line{
  border-color: #00442b !important;
  border-width: .2rem !important;
}


/* Textos en Pagina web*/
.wowinf p{
  font-size: 1.6rem;
  margin: 50px;
  text-align: justify;
  color: white;
  opacity: 0; /* Inicialmente, el texto estará invisible */
  animation: aparecer 3s forwards; /* Utiliza la animación llamada "aparecer" durante 2 segundos y mantiene el último estado */
}
.wowinf ul{
  font-size: 1.6rem;
  margin-left: 50px;
  margin-bottom: 50px;
  text-align: justify;
  color: white;
  opacity: 0; /* Inicialmente, el texto estará invisible */
  animation: aparecer 3s forwards; /* Utiliza la animación llamada "aparecer" durante 2 segundos y mantiene el último estado */
}
.wowinf h1{
  padding-top: 30px;
  /*font-size: 2.3rem;*/
  margin: 50px;
  color: white;
}
.wow p{
  padding-top: 20px;
  font-size: 1.6rem;
  margin: 50px;
  color: #00442b;
  text-align: justify;
  opacity: 0; /* Inicialmente, el texto estará invisible */
  animation: aparecer 3s forwards; /* Utiliza la animación llamada "aparecer" durante 2 segundos y mantiene el último estado */
}
.wow ul{
  padding-top: 20px;
  font-size: 1.6rem;
  margin: 50px;
  color: #00442b;
  text-align: justify;
  opacity: 0; /* Inicialmente, el texto estará invisible */
  animation: aparecer 3s forwards; /* Utiliza la animación llamada "aparecer" durante 2 segundos y mantiene el último estado */
}
.wow h1{
  padding-top: 30px;
  font-size: 2.3rem;
  color: #00442b;
  margin: 50px;
}
.imagenidioma{
  width: 60%; /* Ancho deseado */
  height: auto; /* Altura deseada */
  margin-left: 20%;
}

/* Links a las demas paginas */
.linkgreen{
  padding-top: 50px;
  font-size: 1.4rem;
  margin: 50px;
  color: #00442b;
  text-decoration: none;
}
.linkgreen:hover{
  color: #00442b;
}
.linkwhite{
  padding-top: 50px;
  font-size: 1.4rem;
  margin: 50px;
  color: white;
  text-decoration: none;
}
.linkwhite:hover{
  color: white;
}

/*Boton flotante Idioma*/
.btn-flotante-idioma {
	border-radius: 10px; /* Borde del boton */
	background-color: white; /* Color de fondo */
	padding: 18px 30px; /* Relleno del boton */
	position: fixed;
  width: 100px; /* Ajusta el ancho deseado */
  text-align: center; /* Centra el contenido del botón horizontalmente */
  line-height: 50px; /* Centra el contenido del botón verticalmente */
	bottom: 40px;
	right: 40px;
	box-shadow: 10px 10px 23px -2px rgba(0,0,0,0.76);
	z-index: 99;
  text-decoration: none;
}
@media (max-width: 1344px) {

  .bg-business-bg{
    max-height: 100vh;
  }
  }

@media (max-width: 768px) {
  .imagenidioma{
    width: 38%; /* Ancho deseado */
    height: auto; /* Altura deseada */
    margin-left: 30%;
  }
  .bg-business-bg{
    width: 100%;
  }
  }
  @media only screen and (max-width: 600px) {
   .btn-flotante-idioma{
     font-size: 14px;
     padding: 12px 20px;
     bottom: 20px;
     right: 20px;
     width: 70px; /* Ajusta el ancho deseado */
   }
  }
  /*Prueba Boton*/
.btn-flotante {
	border-radius: 10px; /* Borde del boton */
	background-color: white; /* Color de fondo */
	padding: 18px 30px; /* Relleno del boton */
	position: fixed;
  width: 100px; /* Ajusta el ancho deseado */
  text-align: center; /* Centra el contenido del botón horizontalmente */
  line-height: 50px; /* Centra el contenido del botón verticalmente */
	bottom: 40px;
	right: 150px;
	transition: all 300ms ease 0ms;
	box-shadow: 10px 10px 23px -2px rgba(0,0,0,0.76);
	z-index: 99;
  text-decoration: none;
}
.btn-flotante:hover {
  color: white;
	box-shadow: 10px 10px 23px -2px rgba(0,0,0,0.76);
	transform: translateY(-7px);
}
/*Boton flotante Idioma*/
.btn-flotante-idioma {
	border-radius: 10px; /* Borde del boton */
	background-color: white; /* Color de fondo */
	padding: 18px 30px; /* Relleno del boton */
	position: fixed;
  width: 100px; /* Ajusta el ancho deseado */
  text-align: center; /* Centra el contenido del botón horizontalmente */
  line-height: 50px; /* Centra el contenido del botón verticalmente */
	bottom: 40px;
	right: 40px;
	box-shadow: 10px 10px 23px -2px rgba(0,0,0,0.76);
	z-index: 99;
  text-decoration: none;
}
@media only screen and (max-width: 600px) {
 	.btn-flotante {
		font-size: 14px;
		padding: 12px 20px;
		bottom: 20px;
		right: 100px;
    width: 70px; /* Ajusta el ancho deseado */
	}
  .btn-flotante-idioma{
    font-size: 14px;
		padding: 12px 20px;
		bottom: 20px;
		right: 20px;
    width: 70px; /* Ajusta el ancho deseado */
  }
}

  /*Animacion*/
@keyframes aparecer {
  from {
    opacity: 0; /* Empieza con una opacidad de 0 (invisible) */
    transform: translateY(20px); /* Puedes agregar transformaciones, como desplazar el texto hacia abajo */
  }
  to {
    opacity: 1; /* Termina con una opacidad de 1 (totalmente visible) */
    transform: translateY(0); /* Termina en su posición original */
  }
}


.llig{
    background-image: url("../img/fondo.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}