html,
body,
.container-main {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-light-gray: #f5f5f5;
  --color-gray: #808080;
  --color-dark-blue: #163e7c;
  --color-blue-accent: #3ba9e4;
  --color-green: #5ea36c;
  --color-brown: #8b4d34;
  --color-yellow: #d3ab2a;
  --color-purple: #5142bb;
  --color-light-blue: #e3eafa;

  /* Background Colors */
  --color-form-background: #99aad4;
  --header-bg-color: var(--color-dark-blue);
  --row-even-bg: #f5f5f5;
  --row-odd-bg: #ffffff;
  --border-color: #d0d0d0;

  /* Text Colors */
  --text-color-main: var(--color-dark-blue);
  --text-color-accent: var(--color-blue-accent);
  --text-color-secondary: var(--color-white);

  /* Button Colors */
  --button-conocenos: var(--color-purple);
  --button-contactanos: var(--color-blue-accent);
  --button-conoce-mas: var(--color-blue-accent);

  /* Typography */
  --font-family-main: "Montserrat", sans-serif;
  --font-size-headings: 36px;
  --font-size-small-headings: 24px;
  --font-size-modal-headings: 18px;
  --font-size-card-headings: 16px;
  --font-size-general-text: 18px;
  --font-size-small-text: 14px;
  --font-size-quotes-text: 24px;
  --font-size-hero-cta: 92px;
}

section {
  background-color: var(--color-light-gray);
  line-height: 1.6;
  padding-top: 10px;
  padding-bottom: 10px;
}

h1,
h2,
h3,
h4 h5,
h6 {
  font-weight: 700;
  /* Montserrat Bold */
  color: var(--text-color-main);
  font-size: var(--font-size-headings);
  text-align: center;
}

/* Override Bootstrap's default heading font sizes */
h1 {
  font-size: var(--font-size-headings);
}

h2 {
  font-size: var(--font-size-headings);
}

h3 {
  font-size: var(--font-size-small-headings);
}

h4 {
  font-size: var(--font-size-modal-headings);
}

p {
  font-size: var(--font-size-general-text);
  font-weight: 400;
  /* Montserrat Regular */
}

.btn {
  border-radius: 50px !important;
  /* Rounded corners */
  font-weight: 700;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  white-space: nowrap;
}

.btn:hover {
  opacity: 0.8;
  /* Obscure background on hover */
}

.btn-primary-custom {
  background-color: var(--button-conocenos) !important;
  color: var(--text-color-secondary) !important;
  border-color: var(--button-conocenos) !important;
}

.btn-secondary-custom {
  background-color: var(--button-contactanos) !important;
  color: var(--text-color-secondary) !important;
  border-color: var(--button-contactanos) !important;
}

.btn-accent-custom {
  background-color: var(--button-conoce-mas) !important;
  color: var(--text-color-secondary) !important;
  border-color: var(--button-conoce-mas) !important;
}

.divider {
  width: 100%;
  height: 2px;
  background-color: var(--text-color-accent);
  margin: 10px auto;
}

/* Header */

.header-main {
  background-color: var(--color-white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo-container {
  padding: 15px 0;
  display: flex;
  justify-content: center;
}

.logo {
  height: 60px;
}

.navbar-brand .logo-img {
  max-height: 60px;
  /* Adjust logo height */
  width: auto;
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons .fa-brands {
  color: var(--color-blue-accent);
  font-size: 24px;
}

.navbar {
  /* Remove default padding */
  padding: 0;
  background-color: var(--color-light-gray);
}

.navbar-nav {
  padding: 10px 0;
}

.social-icons-header {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  display: flex;
  gap: 15px;
}

.navbar-nav .nav-link {
  font-size: var(--font-size-general-text);
  color: var(--text-color-main) !important;
  font-weight: 700;
  padding: 5px 0;
  white-space: normal;
  /* Allow text to wrap */
  max-width: 250px;
  /* Set max width */
  text-align: center;
  /* Center text when wrapped */
}

.navbar-toggler {
  border: none;
  padding: 0;
  font-size: 1.25rem;
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* Hero Section (Carousel) */
.hero-section {
  max-height: 450px;
  color: var(--text-color-secondary);
  text-align: center;
  overflow: hidden;
  position: relative;
}

.carousel-inner{
  width: 100%;
  margin: 0 auto;
}

.carousel-item {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
}

.carousel-item img{
    object-fit: scale-down;
    width: 100%;
    height: 100%;
    max-width: 1140px;
    display: block;
}

@media (max-width: 480px) {
  .carousel-item img{
    object-fit: scale-down;
    height: 100%;
    width: 100%;
      max-height: 400px;
      display: block;
  }
}

.hero-text h2 {
  font-size: var(--font-size-headings);
  color: var(--text-color-secondary);
  margin-top: 0;
}

.hero-text h2 .text-accent {
  font-size: var(--font-size-headings);
  color: var(--text-color-accent);
  margin: 20px auto 20px auto;
}

.hero-text p {
  font-size: var(--font-size-quotes-text);
}

.hero-buttons {
  position: absolute;
  bottom: 50px;
  margin: 0 auto 0 auto;
  left: 0;
  right: 0;
  text-align: center;
}

.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

.carousel-indicators .active {
  background-color: var(--color-white);
}

.main-section {
  background-color: var(--color-dark-blue);
  text-align: center;
}

.events-section {
  background-color: var(--color-light-blue);
  text-align: center;
}

.card {
  background-color: var(--color-white);
  padding: 30px;
  position: relative;
}

.card,
.pillar-card,
.whom-card {
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.card-icon {
  width: 60px;
  height: 60px;
  background-color: var(--color-blue-accent);
  border-radius: 50%;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-color-secondary);
  font-size: 30px;
}

.card h3 {
  font-size: var(--font-size-small-headings);
  margin-bottom: 10px;
  color: var(--text-color-main);
}

.card p {
  font-size: var(--font-size-general-text);
  margin-bottom: 15px;
}

.read-more {
  color: var(--text-color-accent);
  font-weight: 700;
  font-size: var(--font-size-general-text);
  display: flex;
  align-items: center;
  align-self: self-end;
  transition: color 0.3s ease;
}

.read-more:hover {
  color: var(--color-dark-blue);
}

.read-more .fa-solid {
  font-size: var(--font-size-general-text);
}

.main-section-paragraph {
  margin-top: 60px;
  font-size: var(--font-size-general-text);
  text-align: center;
  color: var(--text-color-secondary);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

/* Mission/Purpose Section */
.mission-section {
  background-color: var(--color-light-gray);
  padding: 20px 0;
  color: var(--text-color-main);
}

.mission-text h2,
.mission-text h3 {
  color: var(--text-color-main);
  text-align: right;
  /* Align text right within column */
  font-size: var(--font-size-headings);
  /* Apply heading size */
}

.mission-text > h2.text-accent,
.mission-text > h3.text-accent {
  color: var(--text-color-accent);
  text-align: right;
  /* Align text right within column */
}

.accordion-button {
  font-size: var(--font-size-small-headings);
  font-weight: 700;
}

.mission-text p {
  font-size: var(--font-size-general-text);
  margin-bottom: 15px;
}

.mission-image-placeholder {
  height: 250px;
  /* Placeholder height */
  background-color: rgba(0, 0, 0, 0.2);
  /* Placeholder */
  border-radius: 8px;
  display: contents;
}

.mission-image-placeholder img {
  height: 350px;
  width: 540px;
  /* Placeholder height */
  background-color: rgba(0, 0, 0, 0.2);
  /* Placeholder */
  border-radius: 8px;
  object-fit: cover;
}

/* Pillars Section */
.pillars-section {
  background-color: var(--color-light-gray);
  padding: 20px 0;
  text-align: center;
  color: var(--text-color-secondary);
}

.pillars-section h2 {
  margin-bottom: 10px;
}

.pillar-card {
  overflow: hidden;
  padding-bottom: 20px;
  padding-top: 20px;
  height: 100%;
  /* Make cards equal height */
}

.pillar-card-text-logo{
  font-size: var(--font-size-headings) !important;
  color: var(--color-white);
  margin-top: 30px;
}

.pillar-card-image {
  width: 80%;
  height: 200px;
  /* Square image placeholder */
  background-color: rgba(0, 0, 0, 0.2);
  /* Placeholder */
  display: contents;
}

.pillar-card-image img {
  width: 80%;
  height: 200px;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  align-self: center;
  justify-self: center;
}

.pillar-card.expande-t {
  background-color: var(--color-blue-accent);
}

.pillar-card.comuniser {
  background-color: var(--color-green);
}

.pillar-card-content {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.pillar-card-content img {
  height: 150px;
  max-height: 150px;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  align-self: center;
  justify-self: center;
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pillar-card h3 {
  font-size: var(--font-size-card-headings);
  margin-bottom: 10px;
}

.pillar-card .divider {
  width: 100%;
  height: 2px;
  background-color: var(--text-color-secondary);
  margin: 10px auto;
}

.pillar-card .read-more {
  color: var(--text-color-secondary);
}

.modal-accent-text {
  font-size: var(--font-size-general-text);
  font-weight: bold;
}

.modal-body {
  padding: 20px;
  color: var(--text-color-main);
}

/* Ambassadors Section */
.ambassadors-section {
  background-image: url("/assets/images/coparticipe.jpeg"); /* Reemplaza con la ruta de tu imagen de fondo */
  background-size: cover; /* Asegura que la imagen cubra toda el área */
  background-position: center center; /* Centra la imagen de fondo */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  height: 70vh;
  display: flex; /* Para centrar el contenido vertical y horizontalmente */
  justify-content: center; /* Centra horizontalmente el contenido flex */
  align-items: center; /* Centra verticalmente el contenido flex */
  text-align: center; /* Centra el texto dentro del hero-content */
  position: relative; /* Necesario para el overlay si lo usas */
  padding: 20px; /* Espaciado interno para que el contenido no toque los bordes */
  box-sizing: border-box; /* Incluye el padding en el ancho/alto */
  overflow: hidden;
}

.ambassadors-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-color: rgba(22, 65, 124, 0.95); */
  background-color: rgba(0, 0, 0, 0.99);
  /*background-color: #163e7c;*/
  opacity: 0.7;
  z-index: 1;
}

.ambassadors-section h2 {
  color: var(--text-color-main);
  font-size: var(--font-size-hero-cta);
  margin-bottom: 30px;
}

.ambassadors-content {
  /* Overlay for readability */
  border-radius: 8px;
  max-width: 80%;
  margin: 0 auto;
  z-index: 2;
  position: relative; /* Necesario para que el contenido esté por encima del overlay */
}

.ambassadors-content h3 {
  font-size: var(--font-size-hero-cta);
  /* CEA text size */
  color: var(--text-color-secondary);
  margin-bottom: 10px;
}

.ambassador-subtitle {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--text-color-accent);
}

.ambassador-description {
  font-size: 26px;
  margin-top: 100px;
  margin-bottom: 40px;
  color: var(--text-color-secondary);
    line-height: 90%;
}

.ambassadors-section .btn {
  margin-bottom: 24px;
  /* Bottom margin for button */
}

@media (max-width: 576px) {
    .ambassadors-content {
        max-height: 500px;
        overflow-x: hidden;
    }
    .ambassadors-content h3 {
        font-size: 36px;
    }
    .ambassadors-subtitle {
        font-size: 28px;
    }
    .ambassador-description {
        font-size: 18px;
        line-height: 90%;
    }
}

/* A quiénes ayudamos Section */
.whom-we-help-section {
  background-color: var(--color-light-gray);
  text-align: center;
}

.whom-card {
  padding: 20px;
  overflow: hidden;
  color: var(--text-color-secondary);
  /* Default text color for cards */
}

.whom-card.keren-zohar {
  background-color: var(--color-yellow);
}

.whom-card.we-women {
  background-color: var(--color-purple);
}

.whom-card-logo {
  height: 70px;
  width: auto;
  /* Placeholder for logo */
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: var(--text-color-main);
}

.whom-card p {
  padding: 0 20px;
  margin-bottom: 20px;
  font-size: var(--font-size-general-text);
}

.whom-card-image {
  width: 80%;
  height: 217px;
  margin-top: 20px;
  display: contents;
}

.whom-card-image img {
  width: 80%;
  height: 217px;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  align-self: center;
  justify-self: center;
}

.whom-card .divider {
  background-color: var(--text-color-secondary);
  /* Divider on colored background */
}

.whom-card .read-more {
  color: var(--text-color-secondary);
  /* Link on colored background */
  font-weight: 700;
}

.whom-card .read-more .fa-solid {
  color: var(--text-color-secondary);
}

/* Strategic Alliances Section */
.alliances-section {
  background-color: var(--color-light-gray);
  padding: 10px 0;
}

.alliances-section h2 {
  margin-bottom: 40px;
}

.alliance-right-image img {
  /* Specified height */
  height: 285px;
  /* Specified width */
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  /* Placeholder */
  border-radius: 8px;
  margin: 0 auto;
  /* Center image on smaller screens */
  display: block;
  object-fit: cover;
}

/* Footer/Contact Section */
.contact-header {
  background-color: var(--color-light-blue);
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-header .logo-placeholder {
  width: 200px;
  /* Placeholder for Sin Fronteras logo */
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-color-secondary);
  font-size: 24px;
}

.contact-section {
  background-color: var(--color-dark-blue);
  padding: 60px 0;
  color: var(--text-color-secondary);
  text-align: center;
}

.contact-section h2 {
  color: var(--text-color-secondary);
  margin-bottom: 40px;
}

.contact-form-container {
  background-color: var(--color-form-background);
  padding: 40px;
  border-radius: 8px;
  max-width: 600px;
  margin: 0 auto 40px auto;
  text-align: left;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.form-group label,
.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--font-size-general-text);
  color: var(--text-color-secondary);
}

.form-control-custom {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background-color: var(--color-white);
  color: var(--text-color-main);
  font-family: var(--font-family-main);
  font-size: var(--font-size-general-text);
}

.form-control-custom::placeholder {
  color: var(--text-color-main);
}

.form-control-custom:focus {
  background-color: rgba(255, 255, 255, 0.404);
  border-color: var(--text-color-secondary);
  box-shadow: none;
}

select.form-control-custom option {
  background-color: var(--color-white);
  color: var(--color-dark-blue);
}

/* Floating Social Icons */
.floating-social-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.social-toggle-btn {
  width: 50px;
  height: 50px;
  background-color: var(--color-blue-accent);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.social-toggle-btn:hover {
  transform: scale(1.1);
}

.social-toggle-btn i {
  font-size: 24px;
  transition: transform 0.3s ease;
}

.social-icons-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  background-color: var(--color-white);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.floating-social-container.active .social-icons-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.social-icon {
  color: var(--color-blue-accent);
  font-size: 24px;
  transition: color 0.3s ease;
}

.social-icon:hover {
  color: var(--color-dark-blue);
}

/* Ajusta el ancho del campo de teléfono con bandera */
.iti {
  width: 100%;
}

/* Back to Top Button */
.back-to-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--color-blue-accent);
  color: var(--color-white);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  z-index: 1100;
}

.back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top-btn:hover {
  background-color: var(--color-dark-blue);
  color: var(--color-white);
}

/* Back to Index Button */
.back-to-index-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: var(--color-blue-accent);
  color: var(--color-white);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  text-decoration: none;
  transition: background 0.2s;
  z-index: 1100;
}
.back-to-index-btn:hover {
  background-color: var(--color-dark-blue);
  color: #fff;
}

.iti__country-name {
  color: var(--text-color-main);
}

/* Estilos para la pagina CEA */

/* Hero Section (Carousel) */
.cea-hero-section {
  max-height: 500px;
  /* Specified height */
  background-color: var(--color-light-gray);
  /* Placeholder background */
  color: var(--text-color-secondary);
  text-align: center;
  overflow: hidden;
  position: relative;
}

.cea-hero-section img {
  object-fit: cover;
  width: 100%;
  /* Full height for carousel */
  height: 480px;
}

.acercade-section {
  background-color: var(--color-light-gray);
  max-height: 480px; /* Limitar la altura máxima */
  overflow: hidden; /* Evitar desbordamiento */
}

.membresias-section,
.unete-section {
  background-color: var(--color-blue-accent);
  max-height: 480px; /* Limitar la altura máxima */
  overflow: hidden; /* Evitar desbordamiento */
}

.acercade-right-image,
.membresias-right-image {
  display: contents; /* Permitir que el contenido ocupe todo el espacio */
  background-color: inherit; /* Mantener el fondo del contenedor padre */
}

.acercade-right-image img,
.membresias-right-image img,
.unete-right-image img {
  width: 300px; /* Tamaño fijo para las imágenes */
  height: 300px; /* Tamaño fijo para las imágenes */
  object-fit: fill;
  border-radius: 8px;
}

/* Estilos para la tabla de beneficios */

.table-responsive-container {
  width: 100%;
  overflow-x: auto; /* Permite desplazamiento horizontal en pantallas pequeñas */
  -webkit-overflow-scrolling: touch; /* Mejora el desplazamiento en iOS */
  margin: 20px auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: var(--row-odd-bg); /* Fondo del contenedor */
}

.data-table {
  width: 100%; /* La tabla ocupará el 100% del ancho de su contenedor */
  border-collapse: collapse; /* Elimina el espacio entre los bordes de las celdas */
  min-width: 700px; /* Ancho mínimo para la tabla, forzando el scroll en móviles */
  font-size: 0.9em; /* Tamaño de fuente base para la tabla */
}

.data-table th,
.data-table td {
  padding: 12px 10px;
  border: 1px solid var(--border-color);
  text-align: center; /* Centrar contenido por defecto */
  vertical-align: middle;
}

/* Estilos para el encabezado (thead) */
.data-table thead {
  background-color: var(--header-bg-color);
  color: white;
  text-transform: uppercase;
  font-weight: bold;
}

.data-table thead th {
  white-space: nowrap; /* Evita que el texto del encabezado se rompa */
}

/* Estilos específicos para las columnas de membresía en el encabezado */
.data-table thead th:nth-child(4) {
  /* SILVER */
  background-color: var(--color-dark-blue);
}

.data-table thead th:nth-child(5) {
  /* GOLD */
  background-color: var(--color-dark-blue);
}

.data-table thead th:nth-child(6) {
  /* PLATINUM */
  background-color: var(--color-dark-blue);
}

.data-table thead th span {
  /* "PLAZAS DISPONIBLES" numbers */
  display: block; /* Muestra el número en una nueva línea debajo del nombre */
  font-size: 0.8em;
  opacity: 0.8;
  margin-top: 2px;
}

/* Estilo para las filas de categoría (Beneficios Corporativos, etc.) */
.data-table .category-row td {
  background-color: var(--color-dark-blue);
  color: white;
  font-weight: bold;
  text-align: left; /* Alinear el texto de categoría a la izquierda */
  padding-left: 15px;
  font-size: 1em;
}

/* Estilos para el cuerpo de la tabla (tbody) */
.data-table tbody tr:nth-child(odd) {
  background-color: var(--row-odd-bg);
}

.data-table tbody tr:nth-child(even) {
  background-color: var(--row-even-bg);
}

/* Alineación de texto en columnas específicas */
.data-table tbody td:nth-child(2) {
  /* Columna de descripción del beneficio */
  text-align: left;
  white-space: normal; /* Permite que el texto se rompa en varias líneas */
  min-width: 250px; /* Ancho mínimo para la columna de descripción */
}

/* Símbolo de "check" */
.check-icon {
  color: var(--color-dark-blue); /* Color azul para los checks */
  font-weight: bold;
  font-size: 1.2em;
}

/* Media Queries para responsividad */

/* Pantallas Medianas (ej. tablets en vertical) */
@media (max-width: 768px) {
  .data-table {
    font-size: 0.85em; /* Reducir un poco el tamaño de fuente */
    min-width: 650px; /* Puede que necesites ajustar este valor */
  }

  .data-table th,
  .data-table td {
    padding: 10px 8px; /* Menos padding */
  }

  .data-table tbody td:nth-child(2) {
    min-width: 200px; /* Reducir el ancho mínimo de la columna de descripción */
  }
}

/* Pantallas Pequeñas (ej. móviles) */
@media (max-width: 480px) {
  .data-table {
    font-size: 0.8em; /* Tamaño de fuente más pequeño para móviles */
    min-width: 600px; /* Asegura que la tabla sigue siendo lo suficientemente ancha para el scroll */
  }

  .data-table th,
  .data-table td {
    padding: 8px 6px; /* Padding reducido */
  }

  .data-table thead th span {
    font-size: 0.7em; /* Números más pequeños en el encabezado */
  }

  .data-table tbody td:nth-child(2) {
    min-width: 180px; /* Ancho mínimo más pequeño */
  }
}

.events-container {
  margin-bottom: 16px;
}

.events-container .carousel-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);   /* Puedes ajustar la opacidad aqui */
}

.events-container .carousel-caption {
  /*top: 25%;*/
  /*width: 80%;*/
  /*text-align: center;*/
  justify-content: center;
}

.events-container .carousel-caption h5 {
  font-size: var(--font-size-headings);
}

.events-container .carousel-caption p {
    font-size: var(--font-size-small-headings);
}

@media (max-width: 768px) {
  .events-container .carousel-caption h5 {
    font-size: var(--font-size-small-headings);
  }

    .events-container .carousel-caption p {
        font-size: var(--font-size-small-text);
        line-height: 95%;
    }
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: var(--color-dark-blue) !important;
  border-radius: 50%;
}

.events-container .h5{
  font-size: var(--font-size-headings);
}

.text-justify {
  text-align: justify;
}

footer {
  background-color: var(--color-gray);
  color: var(--text-color-secondary);
  padding: 20px 0 10px 0;
  text-align: center;
}