* {
  box-sizing: border-box; /* Asegura un modelo de caja consistente */
}

/*Cambios en el header*/
header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 2000; /* Incrementa el valor */
}

.custom-header {
  background-color: #2D2D2D;
}

.bg-custom-light {
  background-color: #7e8d9e; /* Elige el color que prefieras */
}

/*Espacio entre texto e icono del header*/
.contact-item {
  margin-right: 15px; 
}

.contact-item:last-child {
  margin-right: 0; /* Elimina el margen del último elemento del header */
}

/*Caracteristicas del NAV BAR*/
nav.navbar {
  position: fixed;
  top: 40px; /* Ajusta según la altura del header */
  width: 100%;
  z-index: 999;
}

.content {
  margin-top: 60px; /* Ajusta según la altura combinada del header y la barra de navegación */
}

/*Comportamiento del navbar al posicionar el puntero en una opción del menú*/
.navbar-nav .nav-link {
  position: relative;
  transition: color 0.3s;
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background-color: #A66D03; /* Cambia esto al color que prefieras */
  left: 0;
  bottom: 0px;
  transition: width 0.3s;
}

.navbar-nav .nav-link:hover::after,.nav-link.active::after {
  width: 100%;
}

.navbar-nav .nav-link.dropdown-toggle::after {
  display: none; /*comportamiento distinto */
}


/* Media queries pantalla pequeña*/
@media (max-width: 768px){
  #intro, #equipo {
    width: 90% !important;
  }

  #equipo p{
    display: none;
  }

  .servicio-fila{
    width: 100% !important;
    text-align: center;
  }

  nav.navbar {
    position: fixed;
    top: 40px; /* Ajusta según la altura del header */
    width: 100%;
    z-index: 999;
  }

  .icono-wrap{
    flex-wrap: wrap;
    justify-content: center !important;
  }
}

/* Media queries pantalla pequeña*/
@media (max-width: 522px){
  nav.navbar {
    position: fixed;
    top: 60px; /* Ajusta según la altura del header */
    width: 100%;
    z-index: 999;
  }
}

@media (max-width: 355px){
  #intro, #equipo {
    width: 90% !important;
  }

  #equipo p{
    display: none;
  }

  .servicio-fila{
    width: 100% !important;
    text-align: center;
  }

  nav.navbar {
    position: fixed;
    top: 90px; /* Ajusta según la altura del header */
    width: 100%;
    z-index: 999;
  }

  .icono-wrap{
    flex-wrap: wrap;
    justify-content: center !important;
  }
}

section[id]{
  scroll-margin-top: 120px;
}
/*Comportamiento del scroll*/
html{
  scroll-behavior: smooth;
}

/*Estilos para la página inicial*/
.hero {
  display: flex;
  justify-content: space-between;
  background-color: #593B02;
  color: white;
  height: auto;
}

.hero-content {
  flex-basis: 0 0 50%; /* Ocupará el 50% del ancho */
  padding: 40px 40px 40px 40px; /*TRBL*/
}

.hero h1 {
  font-size: 70px;
  margin-bottom: 20px;
}

.divider {
  width: 100%;
  height: 2px;
  background-color: #ffffff;

}

.hero p {
  font-size: 1rem;
  margin-bottom: 20px;
}

.hero .btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: white;
  color: #A66D03;
  border-radius: 25px;
  text-decoration: none;
  font-size: 1rem;
  align-self: flex-end; /* Alinea el botón a la derecha dentro del contenedor */
}

.hero-image {
  flex-basis: 0 0 50%; /* Ocupará el 50% del ancho */
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 100px; /* Borde redondeado en la esquina superior izquierda */
  margin-right: 0; /* Quita cualquier margen a la derecha */
  display: block;
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
  .hero {
    flex-direction: column; /* Pone los elementos en columna (uno debajo del otro) */
    text-align: center;
  }

  .hero h1 {
    font-size: 30px; /* Reduce el tamaño del texto en pantallas pequeñas */
  }
  
  .hero-content {
    padding-right: 0;
    margin-bottom: 20px; /* Añade espacio entre el texto y la imagen */
  }

  .hero-image {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho en pantallas pequeñas */
  }
}

.hero2 {
  display: flex;
  justify-content: space-between;
  background-color: #A6841F;
  height: auto;
  color: white;
}

.hero2-content {
  flex-basis: 0 0 50%; /* Ocupará el 50% del ancho */
  padding: 40px 40px 40px 40px; /*TRBL*/
}

.hero2 h1 {
  font-size: 50px;
  margin-bottom: 20px;
}

.hero2 p {
  font-size: 1rem;
  margin-bottom: 20px;
}

.hero2 .btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: white;
  color: #A66D03;
  border-radius: 25px;
  text-decoration: none;
  font-size: 1rem;
  align-self: flex-end; /* Alinea el botón a la derecha dentro del contenedor */
}

.hero2-image {
  flex-basis: 0 0 50%; /* Ocupará el 50% del ancho */
}

.hero2-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-bottom-left-radius: 100px; /* Borde redondeado en la esquina superior izquierda */
  margin-right: 0; /* Quita cualquier margen a la derecha */
  display: block;
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
  .hero2 {
    flex-direction: column; /* Pone los elementos en columna (uno debajo del otro) */
    text-align: center;
  }

  .hero2 h1 {
    font-size: 30px; /* Reduce el tamaño del texto en pantallas pequeñas */
  }

  .hero2-content {
    padding-right: 0;
    margin-bottom: 20px; /* Añade espacio entre el texto y la imagen */
  }

  .hero2-image {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho en pantallas pequeñas */
  }
}

/* Texto Dinámico*/
.container .text{
  position: relative;
  color: #A6841F;
  font-size: 30px;
  font-weight: 600;
  overflow: hidden;
}

.container .text.first-text{
  color: #030303;
}

.container .text.second-text {
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 700px;
  font-style: italic;
}

.text.second-text::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #fff;
  border-left: 2px solid #A6841F;
  animation: animate 4s steps(12) infinite;
}

@keyframes animate {
  40%, 60%{
    left: 0;
  }
  100% {
    left: calc(100% + 4px);
  }
}
/*Contador de numeros*/

.section-work-data {
  background: linear-gradient(45deg, #402A22 0%, #E5B94C 100%);
  text-align: center;
  transition: all 0.7s linear;
  color: white;
  padding: 2rem 0;
}

.counter-numbers {
  font-size: 4.8rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.counter-numbers::before {
  color: inherit;
  margin-right: 2px;
}

.section-work-data p {
  color: white;
  margin: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .row {
    display: flex;
    justify-content: center;
  }
}

/*Estilo del footer*/
.custom-footer {
  background-color: #2D2D2D;
}

footer p {
  margin-bottom: 10px; /* Espacio entre párrafos */
}

footer .icon-spacing {
  color: #A6841F;
  margin-right: 10px; /* Margen entre el icono y el texto */
}

.email-paragraph {
  word-break: break-all; /* Solo aplica al párrafo del correo */
  max-width: 100%; /* Asegura que el párrafo no se desborde */
}

@media (max-width: 576px) {
  .email-paragraph {
    font-size: 14px; /* Ajusta el tamaño de la fuente si es necesario */
  }
}

/*Otros Estilos aplicados a lo largo del sitio*/
.text-custom-color {
  color: white; /*Color para textos*/
}

.custom-btn {
  background-color: #A66D03;
  color: white;  /*Color del texto */
}

.custom-btn:hover {
  background-color: #E5B94C; /* Amarillo más oscuro al pasar el ratón */
}

.text-justify-custom {
  text-align: left; /*Justificar párrafos*/
}

.centered-list {
    display: flex;
    justify-content: start; /* Centra horizontalmente */
    align-items: start; /* Centra verticalmente si el contenedor tiene una altura definida */
}

/*Inicio Estilos para las tarjetas del inicio de los servicios*/

.card{
  overflow: hidden;
  border: none;
  border-radius: 20px;
  background-color: #f8f9fa;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
}

.card:hover{
  border-color: #4f555c;
  transform: scale(1.05); /* Aumenta el tamaño de la tarjeta */
  box-shadow: 0 25px 40px rgba(0, 0, 0, 0.5); /* Aumenta la sombra */
}

/*Inicio de estilos para slider de logo de clientes*/
.partners-logo {
  padding: 20px; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.slick-slide {
  margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center; 
}

.slick-slide img {
  max-width: 100%; 
  max-height: 100px; 
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track, 
.slick-slider .slick-list {
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}  

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: none;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/*Estilos para el mapa*/
.map-responsive {
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%; /* Proporción de 16:9 */
  height: 0;
}

.map-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*Estilos pagina nosotros*/
.hero-nosotros {
  background-color: #593B02; /* Color de fondo */
  color: white; /* Color del texto */
  padding: 30px 30px 30px 30px; /* Espaciado en la sección */
  display: flex;
  justify-content: space-between;
  height: auto;
}

.hero-title {
  font-size: 90px;
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 40px;
  margin-bottom: 20px;
}

.hero-text {
  line-height: 1.6;
}

/* Media query para pantallas pequeñas de nosotros*/
@media (max-width: 768px) {
  .hero-title {
    font-size: 50px; /* Reduce el tamaño del título */
    text-align: center; /* Alinea el título al centro en pantallas pequeñas */
  }

  .hero-subtitle {
    font-size: 25px; /* Reduce el tamaño del subtítulo */
    text-align: center; /* Alinea el subtítulo al centro */
  }

  .hero-text {
    font-size: 1rem; /* Ajusta el tamaño del texto */
    text-align: center; /* Alinea los párrafos al centro */
    margin: 0; /* Añade un poco de margen para evitar que el texto toque los bordes */
  }

  .row {
    flex-direction: column; /* Coloca los elementos uno debajo del otro en pantallas pequeñas */
  }

  .col-lg-6 {
    width: 100%; /* Asegura que las columnas ocupen el 100% del ancho */
    margin-bottom: 20px; /* Añade espacio entre las secciones de texto */
  }
}

.banner-item {
  height: 300px; /* Ajusta la altura deseada */
  overflow: hidden;
  position: relative;
}

.banner-item {
  position: relative; /* posicionamiento absoluto de la imagen */
  overflow: hidden; /* Oculta cualquier parte de la imagen que sobresalga */
  border-top-left-radius: 100px; /* borde redondeado al contenedor */
  border-top-right-radius: 100px;
}

.banner-item img {
  width: 100%;
  height: 100%; 
  border-top-left-radius: 100px;
  object-fit: cover;
  position: absolute;
  top: 0; /* Alinea la imagen con la parte superior del contenedor */
  left: 0; /* Alinea la imagen con la parte izquierda del contenedor */
  transform: translate(0, 0); /* Elimina el desplazamiento, ya que se ajusta a la posición */
}

.img-fluid {
  border-radius: 80px; /* Ajusta este valor según tus preferencias */
  object-fit: cover; /* Esto ayuda a que la imagen cubra el área sin distorsionarse */
  height: auto; /* Mantiene la relación de aspecto */
}

.img-fluid2 {
  border-radius: 30px; /* Ajusta este valor según tus preferencias */
  width: 100%; /* Asegura que la imagen ocupe todo el ancho disponible */
  height: auto; /* Mantiene la relación de aspecto de la imagen */
}