/* Asegura que la barra de navegación use Flexbox y ocupe el 100% */
#templatemo_main_nav .navbar-nav {
    display: flex;
    justify-content: space-between; /* Distribuye los elementos de forma equitativa */
    width: 100%; /* Ocupa todo el ancho disponible */
    padding: 0; /* Elimina los rellenos adicionales */
    margin: 0; /* Elimina los márgenes adicionales */
    flex-wrap: nowrap; /* Evita que los elementos se envuelvan */
}

/* Ajusta los elementos de la lista para que estén en una sola línea */
#templatemo_main_nav .nav-item {
    display: inline-block; /* Cada elemento se mantiene en línea */
    margin-right: 10px; /* Espacio entre los elementos */
}

/* Asegura que no haya margen derecho en el último elemento */
#templatemo_main_nav .nav-item:last-child {
    margin-right: 0;
}

/* Asegura que los enlaces se vean correctamente alineados */
.navbar-nav .nav-link {
    display: inline-block;
    padding: 8px 16px; /* Ajusta el padding de los enlaces */
}
/* Evita que los enlaces se dividan en varias líneas */
.navbar-nav .nav-link {
    white-space: nowrap; /* Asegura que el texto no se divida en varias líneas */
    display: inline-block;
    padding: 8px 16px; /* Ajusta el padding de los enlaces */
}

/* Asegura que el contenedor sea cuadrado y que la imagen esté centrada */
.img-cuadrada-container {
    width: 300px;           /* Ajusta el tamaño según lo que necesites */
    height: 300px;          /* Asegura que el alto sea igual al ancho */
    display: flex;          /* Usamos Flexbox para centrar la imagen */
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center;    /* Centra la imagen verticalmente */
    overflow: hidden;       /* Evita cualquier desbordamiento */
    background-color: #f0f0f0;  /* Si quieres un fondo visible, ajusta el color */
    border-radius: 0px;     /* Asegura que el contenedor no tenga bordes redondeados */
}

.img-cuadrada {
    width: 100%;            /* Hace que la imagen ocupe todo el espacio del contenedor */
    height: 100%;           /* Asegura que la imagen se ajuste al contenedor */
    object-fit: contain;    /* Asegura que la imagen se ajuste sin recortarse */
    border-radius: 0 !important; /* Elimina cualquier borde redondeado */
}
.carousel-control-prev,
.carousel-control-next {
  background-color: rgba(255, 255, 255, 0.05); /* fondo casi transparente */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black; /* flecha negra */
  font-size: 2rem;
}

/* Flechas en sí (usaremos ::before con contenido) */
.carousel-control-prev-icon::before {
  content: "‹"; /* símbolo flecha izquierda */
}

.carousel-control-next-icon::before {
  content: "›"; /* símbolo flecha derecha */
}
.presentacion {
  text-align: justify;
  font-size: 1rem;
  color: #444;
  margin-top: 15px;
}
.contact-image {
  width: 100vw; /* Usa todo el ancho de la ventana del navegador */
  height: 50vh; /* Establece una altura proporcional al tamaño de la ventana */
  object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
  margin: 0; /* Elimina cualquier margen */
  padding: 0; /* Elimina cualquier padding */
  display: block; /* Asegura que la imagen se comporte como un bloque */
  position: relative; /* Posiciona la imagen de manera flexible */
}
.card-img2 {
  height: 355px; /* Ajusta la altura como desees */
  width: auto;   /* Mantiene la relación de aspecto del ancho */
}