@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  --fuente-principal: "Poppins", sans-serif;
  font-family: "Poppins";
  font-weight: 400;
}

:root {
  --light-primary-color: #003e61;
  --primary-color: #00263b;
  --dark-primary-color: #000508;
  --secondary-color: #a3c200;
  --dark-secondary-color: #788f00;
  --light-accent-color: #fff;
  --accent-color: #ffb300;
  --dark-accent-color: #cc8f00;
  --gray-color: #55565b;
  --white-color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif !important;
  font-weight: 500;
}

.text-gray {
  color: var(--gray-color);
}
.text-gray-50 a {
  color: #55565bbd !important;
}

.text-light-primary {
  color: var(--light-primary-color) !important;
}
.text-primary {
  color: var(--primary-color) !important;
}
.text-dark-primary {
  color: var(--dark-primary-color) !important;
}

.text-secondary {
  color: var(--secondary-color) !important;
}
.text-dark-ternary {
  color: var(--dark-ternary-color) !important;
}

.text-accent {
  color: var(--accent-color) !important;
}

.text-dark-accent {
  color: var(--dark-accent-color) !important;
}

.capitalizer {
  text-transform: capitalize;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}

.hover-text-gray a:hover,
.hover-text-gray:hover {
  color: var(--gray-color) !important;
}

.bg-ds-primary {
  background-color: var(--primary-color) !important;
}

.bg-ds-light {
  background-color: var(--light-accent-color);
}
.bg-ds-dark {
  background-color: var(--dark-primary-color);
}
.bg-ds-secondary {
  background-color: var(--secondary-color);
}

.bg-ds-ternary {
  background-color: var(--light-primary-color);
  color:white;
}
.bg-ds-dark-ternary {
  background-color: var(--dark-ternary-color);
}

.font-weight-light {
  font-weight: 200;
}

.font-weight-normal {
  font-weight: 400;
}

.font-weight-semibold {
  font-weight: 600;
}

/*  -------------------------------------------------------- estilos de header navegación -------------------------------------------------------- */

/* Estilo inicial del enlace dentro del span */
.ds-link-item {
  transition: background-color 0.3s ease, color 0.3s ease;
  padding: 2px 12px; /* Mantén el mismo padding que en el estado normal */
  width: auto; /* Ajusta la width según el contenido */
  display: inline-block; /* Asegura que el padding no expanda el ancho del contenedor */
  color: var(--primary-color) !important;
  font-size: medium;
}

/* Estilo aplicado cuando el elemento padre está en hover */
.ds-link-menu:hover .ds-link-item {
  color: var(--accent-color) !important;
  padding: 2px 12px; /* Mantén el mismo padding que en el estado normal */
  width: auto; /* Mantén el width consistente */
}

.ds-link-item-accent {
  color: var(--light-accent-color) !important;
  background-color: var(--accent-color) !important;
  border-radius: 20px; /* Manten el border-radius consistente */
  padding: 4px 12px; /* Mantén el mismo padding que en el estado normal */
  width: auto; /* Mantén el width consistente */
  font-size: medium;
}

/* Estilo aplicado cuando el elemento padre está en hover */
.ds-link-menu-accent:hover .ds-link-item {
  color: var(--light-accent-color) !important;
  background-color: var(--accent-color) !important;
  border-radius: 20px; /* Manten el border-radius consistente */
  padding: 2px 12px; /* Mantén el mismo padding que en el estado normal */
  width: auto; /* Mantén el width consistente */
}

.ds-link-menu-accent {
  border-radius: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
  padding: 2px 12px; /* Mantén el mismo padding que en el estado normal */
  width: auto; /* Ajusta la width según el contenido */
  display: inline-block; /* Asegura que el padding no expanda el ancho del contenedor */
}

#navbar-inner-container
  > div.nav-trigger.navbar-pos-search.overlay-trigger
  > a
  > span {
  padding: 10px;
  font-weight: 600;
  background-color: #ffb300;
  color: white !important;
  border-radius: 100%;
}
#navbar-inner-container
  > div.nav-trigger.navbar-pos-search.overlay-trigger
  > a
  > span:hover {
  transform: scale(0.9);
}

.ds-link-item-sub {
  transition: background-color 0.3s ease, color 0.3s ease;
  padding: 2px 12px; /* Mantén el mismo padding que en el estado normal */
  width: auto; /* Ajusta la width según el contenido */
  display: inline-block; /* Asegura que el padding no expanda el ancho del contenedor */
  color: var(--primary-color) !important;
  font-size: small;
}

@media screen and (max-width: 1360px) {
  .ds-link-item,
  .ds-link-item-accent {
    font-size: small;
  }
}

/*  -------------------------------------------------------- estilos de header navegación -------------------------------------------------------- */
.rounded-pill {
  border-radius: 9999px !important;
}
.rounded-full {
  border-radius: 9999px !important;
}

.text-ds-blue {
  color: var(--primary-color);
}

.hover\:text-.text-light-primary {
  color: var(--light-primary-color);
}

.dropdown-menu {
  padding: 1rem;
  width: 520px; /* Ajusta el ancho según sea necesario */
}

.dropdown-header {
  font-weight: bold;
  font-size: 0.875rem; /* Tamaño de fuente más pequeño */
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.dropdown-item {
  padding: 0.25rem 0;
}
@media only screen and (min-width: 991px) {
  .page-main-content {
    margin-top: 112px;
  }
  .glass-effect {
    background: rgba(225, 225, 225, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(225, 225, 225, 0.3);
  }
}
