#offcanvasWithBothOptions,
  .z-i9999 {
    z-index: 9999;
  }

  .w-75 {
    width: 75%;
  }

  .w-80 {
    width: 80%;
  }

  .poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
  }

  .poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
  }

  .poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
  }

  .poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  .poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
  }

  .poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
  }

  .poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
  }

  .poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
  }

  .poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
  }

  .poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
  }

  .poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
  }

  .poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
  }

  .poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
  }

  .poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
  }

  .poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
  }

  .poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
  }

  .poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
  }

  .poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
  }

  .top-navigation {
    font-size: 0.8rem;
  }

  .top-navigation a {
    text-decoration: none;
  }

  .main-navigation .main-desktop-menu a {
    text-decoration: none;
    color: black;
    font-weight: 600;
    padding: 30px 30px;
  }


  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%;
    height: 100%; /* TOFix */
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }

  .b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
  }

  .b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
  }

  .bi {
    vertical-align: -.125em;
    fill: currentColor;
  }

  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
  }

  .bd-mode-toggle {
    z-index: 1500;
  }

  .bd-mode-toggle .dropdown-menu .active .bi {
    display: block !important;
  }

  .value {
    font-size: 150px;
    display: block;
    font-weight: bold;
  }

  .sticky-div {
      position: sticky;
      top: 0;
      background-color:white;
      border-bottom: solid 2px #818181;
      z-index: 99;
  }

  .logo {
    max-width: 180px;
  }

  .logo-footer {
    max-width: 260px;
  }

  .division-footer {
    border-top: 2px solid #eeeeee;
  }

  .sintec-footer h3 {
    font-size: 1.4rem;
  }

  .sintec-footer h4 {
    font-size: 0.8rem;
    font-weight: 900;
  }

  .sintec-footer ul {
    padding-left: 0;
    font-size: .8rem;
  }

  .sintec-footer li {
    list-style: none;
  }

  .footer-newsletter-wrapper {
    width: 100%;
    height: 27px;
  }

  .footer-newsletter-container {
    border-top: 1px solid #818181;
    border-bottom: 1px solid #818181;
    height: 27px;
  }

  .footer-newsletter-input {
    flex: 0 0 60%; border-right: none;
    height: 25px;
  }

  .footer-newsletter-button {
    flex: 0 0 40%;
    height: 25px;
    padding: 1px 0;
    text-transform: uppercase;
    font-size: .8rem;
  }

  .footer-bottom-links {
    font-size: .7rem;
    color: #818181;
  }

  .footer-bottom-links a {
    color: #818181;
    text-decoration: none;
  }

  .social-media {
    font-size: 1.4rem;
    margin: 0 0 0 10px;
  }

  .text-headings-blue {
    color: #0008ff;
  }

  .btn-read-more-variant-1:hover {
    background-color: blue;
  }

  .btn-read-more-variant-2 {
    border: 0;
    background-color: black;
    border: black solid 1px;
  }

  .btn-read-more-variant-2:hover {
    background-color: transparent;
    border: white solid 1px;
  }

  .text-block-dark-hover {
    width: 50%;
    background-color: black;
    padding: 5%;
    position: absolute;
    font-size: 1rem;
    right: -5%;
    bottom: -10%;
  }
  
  .text-block-dark-hover:hover {
    background-color: #0008ff;
  }

  .text-block-dark-hover .move-arrow-right {
    display: inline-block; /* Asegura que el transform funcione correctamente */
    transition: transform 0.5s ease-in-out; /* Aplica la transición con ease-in-out */
  }

  .text-block-dark-hover:hover .move-arrow-right {
    transform: translateX(40px); /* Mueve el texto 30px a la derecha */
  }

  .bg-quote-blue {
    background-image: url('../img/BannerQuote@2x.webp');
    background-size: cover;
  }

  .bg-careers-blue {
    background-image: url('../img/Careers@2x.webp');
    background-size: cover;    
  }

  .lateral-text {
    -webkit-transform: rotate(-90deg); /* Safari */
    -moz-transform: rotate(-90deg); /* Firefox */
    -ms-transform: rotate(-90deg); /* IE */
    -o-transform: rotate(-90deg); /* Opera */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
    transform: rotate(-90deg);
    position: absolute;
    right: 15%;
    top: 15%;
  }

  .lateral-text-2 {
    -webkit-transform: rotate(-90deg); /* Safari */
    -moz-transform: rotate(-90deg); /* Firefox */
    -ms-transform: rotate(-90deg); /* IE */
    -o-transform: rotate(-90deg); /* Opera */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
    transform: rotate(-90deg);
    position: absolute;
    right: 12%;
    top: 45%;
  }

  .lateral-text-3 {
    -webkit-transform: rotate(-90deg); /* Safari */
    -moz-transform: rotate(-90deg); /* Firefox */
    -ms-transform: rotate(-90deg); /* IE */
    -o-transform: rotate(-90deg); /* Opera */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
    transform: rotate(-90deg);
    position: absolute;
    left: -20%;
    top: 15%;
  }

  .text-highlight-blue {
    text-decoration: none;
    color: #0008ff;
  }

  .text-highlight-blue:hover {
    text-decoration: underline;
  }

  .kpi-value {
    background: linear-gradient(to bottom, white 29%, black 45%, black 55%, white 81%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 8rem; /* Ajusta según el tamaño de fuente deseado */
    font-weight: bold; /* Si deseas hacer el texto en negrita */
    display: inline-block; /* Asegura que el degradado se aplique correctamente */
    text-align: center; /* Centra el texto si es necesario */
    font-stretch: 90%;
    letter-spacing: -0.08em; /* Ajusta para reducir el espacio entre caracteres */
    padding: 0 0.2em; /* Ajusta según sea necesario para evitar el recorte */
  }

  .kpi-value::before {
    content: "+";
    -webkit-text-fill-color: #0008ff;
    color: #0008ff;
  }

  .kpi-headers {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.8rem;
    margin-bottom: 0.1rem;
  }

  .kpi-paragraph {
    padding: 0 100px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2rem;
  }

  .py-8 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }

  .bg-gray-home {
    background-color: #eceef4;
  }

  .service-grid-section {
    color: white;
  }

  .service-grid-section a {
    color: white;
    text-decoration: none;
  }

  .service-grid-section .services-bg-bigger-square {
    background-image: url('../img/futuristic-blue-background-with-glows@2x.webp');
    background-size: cover;
  }

  .service-grid-main-cta {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
  }

  .service-grid-main-cta img {
    transition: transform 0.3s ease;
  }

  .service-grid-main-cta:hover img {
    transform: translateX(100%); /* Desplaza la imagen SVG hacia la derecha */
  }

  .services-bg-bigger-square-p {
    padding: 30px 45px 0;
    margin-bottom: 0;
    font-size: 1.25rem;
  }

  .bg-over-bigger-square {
    background-image: url('./../img/PatronGris_Cuadrado.webp');
    background-size: cover;
    
  }

  /* SERVICE GRID STYLES ************************************************************* */

  .service-grid-section .services-grid-cell {
    display: block;
    height: 289px;
    padding: 25px 40px;
    position: relative;
  }
  
  .service-grid-section .services-grid-cell::after {
    content: ' ';
    height: 20px;
    background-image: url('./../img/arrow.svg');
    background-repeat: no-repeat;
    background-size: 68px;
    width: 100px;
    position: absolute;
    bottom: 18%;
    left: 8%; /* Posiciona el SVG inicialmente */
    transition: transform 0.3s ease;
  }

  .service-grid-section .inverted-color.services-grid-cell::after {
    filter: invert(1);
  }
  
  .service-grid-section .services-grid-cell:hover::after {
    transform: translateX(150%); /* Desplaza la imagen SVG hacia la derecha */
  }

  .service-grid-section .services-grid-cell a {
    font-size: 1.2rem;    
    margin-bottom: 0;
  }

  .service-grid-section .services-grid-cell a {
    color: white;
    text-decoration: none;
  }

  .service-grid-bg-gray a {
    color: black !important;
  }

  .services-grid-cell .service-grid-fade-in-text::before {
    content: "\a";
    white-space: pre;
  }

  .services-grid-cell .service-grid-fade-in-text {
    opacity: 0;
    transform: translateY(20px); /* Desplaza el texto 20px hacia abajo */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    display: block;
    font-size: 0.9rem;
  }
  
  .services-grid-cell:hover .service-grid-fade-in-text {
    opacity: 1;
    transform: translateY(0); /* Mueve el texto a su posición original */
  }

  .services-grid-cell .service-grid-title {
    transition: font-size 0.3s ease, line-height 0.3s ease;
  }
  
  .services-grid-cell .service-grid-title {
    transition: font-size 0.3s ease, line-height 0.3s ease;
    display: inline-block;
    font-weight: 400;
    font-size: 1.6rem;
  }
  
  .services-grid-cell:hover .service-grid-title {
    font-size: 1.2rem;
    line-height: 1.1;
  }

  .services-grid-cell-bg-black-pattern {
    background: url('./../img/PatronNegro_Cuadrado.webp');
    background-size: cover;
  }

  .services-grid-cell-bg-blue-ocean-pattern {
    background: url('./../img/PatronAzul_Cuadrado.webp');
    background-size: cover;
  }

  .services-grid-cell-bg-blue-electric-pattern {
    background: url('./../img/PatronElectric_Cuadrado.webp');
    background-size: cover;
  }

  /* END SERVICE GRID STYLES ************************************************************* */

  .fs-50 {
    font-size: 50px;
  }

  .custom-card {
    border: none; /* Elimina el borde */
    border-radius: 0; /* Quita las esquinas redondeadas */
    overflow: hidden; /* Asegura que los elementos hijos no sobresalgan */
  }
  
  .custom-card .rounded-circle {
    border-radius: 0; /* Quita el borde redondeado del SVG, si aplica */
  }
  

  #desktop-sticky-nav {
    opacity: 0;
    transform: translateY(-20px); /* Mueve el elemento hacia arriba inicialmente */
    position: fixed; /* Fija el elemento en la pantalla */
    top: 0; /* Ajusta la posición en la parte superior */
    left: 0; /* Ajusta la posición a la izquierda */
    width: 100%; /* Asegúrate de que el elemento tenga el ancho completo */
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  #main-navigation-transparent {
    border-bottom: solid 1px #fff;
  }

  #main-navigation-transparent .main-desktop-menu a {
    padding: 30px 15px;
  }

  #main-navigation-transparent,
  #main-navigation-transparent a,
  #main-navigation-transparent .btn {
    color: white;
    font-weight: 300;
    text-decoration: none;
  }

  #main-navigation-transparent:hover .main-desktop-menu a,
  #main-navigation-transparent:hover .btn, 
  #main-navigation-transparent:hover a {
  font-weight: 600 !important;
  }

  #main-navigation-transparent:hover a:hover {
    color: #0008ff;
  }

  #main-navigation-transparent:hover {
    background-color: #fff;
  }

  #main-navigation-transparent:hover a,
  #main-navigation-transparent:hover .btn {
    color: black;
  }

  #submenus-wrapper {
    display: none;
    position: fixed; /* Cambiado a fixed para que sea fácil de centrar en la pantalla */
    min-width: 70vw; /* Ancho mínimo del 70% del viewport */
    max-width: 90vw; /* Máximo ancho para evitar que el submenú sea demasiado grande */
    box-sizing: border-box; /* Incluye padding y borde en el ancho total */
    z-index: 1000;
    background-color: white;
    left: 50%;
    transform: translateX(-50%); /* Centra horizontalmente */
}

#submenus-wrapper h3 {
  color: #333;
}

.stycky-submenu-desktop {
    position: fixed;
    top: 0;
    width: 70vw; /* Asegura que el ancho sea del 70% del viewport */
    left: 50%;
}

.grid-list {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* Crea 7 columnas de igual tamaño */
  gap: 10px; /* Espacio entre los elementos */
  list-style-type: none; /* Elimina los puntos de lista predeterminados */
  padding: 0; /* Elimina el padding por defecto */
  margin: 0; /* Elimina el margen por defecto */
}

.grid-list li {
  border: none; /* Agrega un borde opcional para ver los límites de los elementos */
  box-sizing: border-box; /* Asegura que el padding y el borde no aumenten el tamaño total del elemento */
}

.grid-list a {
  text-decoration: none; /* Elimina el subrayado predeterminado de los enlaces */
  color: #333 !important; /* Color del texto */
  display: block; /* Hace que el enlace ocupe todo el espacio del elemento de la lista */
  padding: 10px; /* Espacio interno en cada elemento */
  font-weight: 600 !important;
}

.grid-list a:hover {
  color: #0008ff !important;
}

/* Mantiene el estado hover mientras el cursor está sobre #submenus-wrapper */
#main-navigation-transparent.hover-active,
#submenus-wrapper:hover ~ #main-navigation-transparent {
    /* Estilos que deberían aplicarse durante el hover */
    background-color: #f0f0f0; /* Ejemplo: cambia el fondo durante el hover */
    /* Otros estilos de hover... */
}

/* section background gray */
.bg-gray40-white60 {
  background: url('../img/bg-gray-40-white-60.png'); 
  background-repeat: repeat-y;
}

/*** PAGES ***/

.bg-page-blu-line {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

.jumbotron {
  background-image: url('../img/BannerAboutUs.webp');
  width: 100%;
  height: 731px;
}

.bg-culture-social-responsability-blue {
  background-image: url('../img/Culture.webp');
  background-size: cover;    
}

.lateral-text-4 {
  -webkit-transform: rotate(-90deg); /* Safari */
  -moz-transform: rotate(-90deg); /* Firefox */
  -ms-transform: rotate(-90deg); /* IE */
  -o-transform: rotate(-90deg); /* Opera */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
  transform: rotate(-90deg);
  position: absolute;
  left: -60%;
  top: 35%;
  font-size: 1.4rem;
}

.fs-6rem {
  font-size: 6rem;
}

.jumbotron h1 {
  margin: 0 0 4% 20%;
  font-size: 6rem;
  line-height: 100%;
  font-weight: 700;
}

.kpi-value-2 {
  background: linear-gradient(to bottom, white 29%, black 45%, black 55%, white 81%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 4rem; /* Ajusta según el tamaño de fuente deseado */
  font-weight: bold; /* Si deseas hacer el texto en negrita */
  display: inline-block; /* Asegura que el degradado se aplique correctamente */
  text-align: center; /* Centra el texto si es necesario */
  font-stretch: 90%;
  letter-spacing: -0.08em; /* Ajusta para reducir el espacio entre caracteres */
  padding: 0 0.2em; /* Ajusta según sea necesario para evitar el recorte */
  margin-left: -34%;
  margin-bottom: -13%;
  margin-top: -11%;
  width: 176px;
}

.kpi-value-2::before {
  content: "+";
  -webkit-text-fill-color: #0008ff;
  color: #0008ff;
}

.kpi-headers-2 {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1.6rem;
  margin-bottom: 0.1rem;
  margin-top: -8%;
}

.no-plus {
  margin: 0;
}

.no-plus::before {
  content: unset;
  margin: 0;
}

.lateral-text-4 {
    -webkit-transform: rotate(-90deg); /* Safari */
    -moz-transform: rotate(-90deg); /* Firefox */
    -ms-transform: rotate(-90deg); /* IE */
    -o-transform: rotate(-90deg); /* Opera */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
    transform: rotate(-90deg);
    position: absolute;
    left: 66%;
    top: 21%;
}

.lateral-text-5 {
  -webkit-transform: rotate(-90deg); /* Safari */
  -moz-transform: rotate(-90deg); /* Firefox */
  -ms-transform: rotate(-90deg); /* IE */
  -o-transform: rotate(-90deg); /* Opera */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
  transform: rotate(-90deg);
  position: absolute;
  left: -40%;
  top: 21%;
  font-size: 1.2rem;
}

.core-features-title {
  text-transform: uppercase;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.7rem;
}

.core-features-p {
  font-size: 1rem;
  font-weight: 500;
}

.jumbotron-2 {
  background-image: url('../img/BannerCapabilities.webp');
}

.jumbotron-3 {
  background-image: url('../img/BannerOperationStrategy.webp');
}