@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit.ttf");
}

* {
  font-family: "Outfit", sans-serif;
}

:root {
  --primary: #00b4e8;
  --secondary: #01566b;
  --tertiary: #26d0f4;
  --fourth: #4b4a4a;
  --btn-color: #00b4e8;
  --title: #1a1919;
  --text: #141414;
  --btn-hover-color: #0e98be;
  --btn-border-color: #045a72;
}

.bg-gradient-for {
  background: var(--primary);
  background: linear-gradient(60deg, var(--secondary) 9%, var(--fourth) 85%);
}

.submenu-container {
  display: block; /* Cambiado a block para permitir transiciones */
  opacity: 0; /* Iniciar invisible */
  transform: translateY(-10px); /* Mover ligeramente hacia arriba */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave */
  pointer-events: none; /* Evitar interacción cuando está oculto */
  z-index: 999 !important;
  /* ...otros estilos... */
}

.submenu-container {
  display: none;
}

.content_subItems:hover > .submenu-container {
  opacity: 1; /* Hacer visible al hacer hover */
  transform: translateY(0); /* Mover a la posición original */
  pointer-events: auto; /* Permitir interacción cuando está visible */
  z-index: 999 !important;
  display: block;
}

.content_scroll::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 50%;
}

.content_scroll::-webkit-scrollbar:vertical {
  width: 6px;
}

.content_scroll::-webkit-scrollbar-button:increment,
.content_scroll::-webkit-scrollbar-button {
  display: none;
}

.content_scroll::-webkit-scrollbar:horizontal {
  height: 10px;
}

.content_scroll::-webkit-scrollbar-thumb {
  background-color: #3f7acc;
  border-radius: 20px;
  border: 2px solid #f1f2f3;
  height: 50px;
}

.content_scroll::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #0f172a00;
}

.content_scroll::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 50%;
}

.content_scroll_hidden::-webkit-scrollbar:vertical {
  width: 0px;
}

.content_scroll_hidden::-webkit-scrollbar-button:increment,
.content_scroll_hidden::-webkit-scrollbar-button {
  display: none;
}

.content_scroll_hidden::-webkit-scrollbar:horizontal {
  height: 10px;
}

.content_scroll_hidden::-webkit-scrollbar-thumb {
  background-color: #8041b8;
  border-radius: 20px;
  border: 2px solid #f1f2f3;
  height: 50px;
}

.content_scroll_hidden::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #0f172a00;
}

/* Main CSS */
.grid-wrapper > div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.grid-wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
}
.grid-wrapper .wide {
  grid-column: span 2;
}
.grid-wrapper .tall {
  grid-row: span 2;
}
.grid-wrapper .big {
  grid-column: span 2;
  grid-row: span 2;
}

/* Animaciones de imagenes */

@keyframes zoomIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.zoom-in-animation {
  animation: zoomIn 0.5s ease forwards;
}

/* Responsive Marks */

.logo-container img {
  max-width: 100%; /* O un tamaño específico */
  max-height: 100px; /* Ajusta esto al tamaño deseado */
  object-fit: contain; /* Mantiene las proporciones sin recortar */
}

.loader {
  text-align: center;
  display: flex;
}
.loader span {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  background: black;
  border-radius: 16px;
  animation: loader 0.8s infinite alternate;
}
.loader span:nth-of-type(2) {
  animation-delay: 0.2s;
}
.loader span:nth-of-type(3) {
  animation-delay: 0.6s;
}
@keyframes loader {
  0% {
    opacity: 0.9;
    transform: scale(0.5);
  }
  100% {
    opacity: 0.1;
    transform: scale(1);
  }
}

.container-floating-widget:hover .plus {
  animation: plus-in 0.15s linear;
  animation-fill-mode: forwards;
}
.edit {
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  display: block;
  right: 0;
  padding: 0;
  opacity: 0;
  margin: auto;
  line-height: 65px;
  font-size: 32px;
  transform: rotateZ(-70deg);
  transition: all 0.3s;
  animation: edit-out 0.3s;
}
.container-floating-widget:hover .principal-btn {
  animation: edit-in 0.2s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}
@keyframes edit-in {
  from {
    opacity: 0;
    transform: rotateZ(-70deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}
@keyframes edit-out {
  from {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  to {
    opacity: 0;
    transform: rotateZ(-70deg);
  }
}
@keyframes plus-in {
  from {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  to {
    opacity: 0;
    transform: rotateZ(180deg);
  }
}
@keyframes plus-out {
  from {
    opacity: 0;
    transform: rotateZ(180deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}
.nds {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-self: center;
  z-index: 1;
  cursor: pointer;
}
.nd1 {
  background: #2bd34b;
  animation-delay: 0.2s;
  animation: bounce-out-nds 0.3s linear;
}
.nd2 {
  background: var(--secondary-color);
  animation-delay: 0.15s;
  animation: bounce-out-nds 0.15s linear;
}
.nd3 {
  background: #00aae8;
  animation-delay: 0.1s;
  animation: bounce-out-nds 0.1s linear;
}
.nd4 {
  background: #f29d35;
  animation-delay: 0.1s;
  animation: bounce-out-nds 0.1s linear;
}
.nd4 {
  background: #410202;
  animation-delay: 0.1s;
  animation: bounce-out-nds 0.1s linear;
}
@keyframes bounce-nds {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounce-out-nds {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}

/* Hero Section */

.pic-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pic-wrapper:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.597);
}

@media only screen and (max-width: 600px) {
  .pic-wrapper::after {
    background: rgba(0, 0, 0, 0.541);
  }
}

figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /*animation*/
  background-size: cover;

  animation: slideShow 24s linear infinite 0s;
  -o-animation: slideShow 24s linear infinite 0s;
  -moz-animation: slideShow 24s linear infinite 0s;
  -webkit-animation: slideShow 24s linear infinite 0s;
}

figurecaption {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
}

.pic-1 {
  opacity: 1;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover !important;
  background-repeat: no-repeat;
}

.pic-2 {
  animation-delay: 6s;
  -o-animation-delay: 6s;
  -moz--animation-delay: 6s;
  -webkit-animation-delay: 6s;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.pic-3 {
  animation-delay: 12s;
  -o-animation-delay: 12s;
  -moz--animation-delay: 12s;
  -webkit-animation-delay: 12s;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-repeat: no-repeat;
  background-size: cover !important;
}

.pic-4 {
  animation-delay: 18s;
  -o-animation-delay: 18s;
  -moz--animation-delay: 18s;
  -webkit-animation-delay: 18s;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-repeat: no-repeat;
  background-size: cover !important;
}

/* keyframes*/

@keyframes slideShow {
  0% {
    opacity: 0;
    transform: scale(1);
    -ms-transform: scale(1);
  }

  5% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
    transform: scale(1.1);
    -ms-transform: scale(1.1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
    -ms-transformm: scale(1);
  }
}

@-o-keyframes slideShow {
  0% {
    opacity: 0;
    -o-transform: scale(1);
  }

  5% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
    -o-transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -o-transformm: scale(1);
  }
}

@-moz-keyframes slideShow {
  0% {
    opacity: 0;
    -moz-transform: scale(1);
  }

  5% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
    -moz-transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -moz-transformm: scale(1);
  }
}

@-webkit-keyframes slideShow {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
  }

  5% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
    -webkit-transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transformm: scale(1);
  }
}

/* Animación de apertura y cierre */
/* Agrega esto en tu archivo styles.css */
@keyframes abrirObturador {
  from {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
  to {
    clip-path: polygon(0% 100%, 0 0, 100% 0, 100% 100%);
  }
}

@keyframes cerrarObturador {
  from {
    clip-path: polygon(0% 100%, 0 0, 100% 0, 100% 100%);
  }
  to {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
}

.obturador {
  transition: transform 0.9s ease-in-out;
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
}

.group:hover .obturador {
  animation: abrirObturador 0.5s forwards;
}

.group .obturador {
  animation: cerrarObturador 0.5s forwards;
}

.counter-sec5:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/update_4/bg/counter_bg_1.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #10131c;
  -webkit-clip-path: path(
    "M542.491 19.8743C554.97 7.16177 572.036 0 589.849 0H1129.15C1146.96 0 1164.03 7.16177 1176.51 19.8743C1188.99 32.5868 1206.05 39.7485 1223.87 39.7485H1640C1684.18 39.7485 1720 75.5658 1720 119.749V491.253C1720 535.436 1684.18 571.253 1640 571.253H1225.55C1207.29 571.253 1189.79 578.594 1177 591.626C1164.21 604.658 1146.71 612 1128.45 612H590.549C572.288 612 554.793 604.658 542.001 591.626C529.208 578.594 511.714 571.253 493.452 571.253H80C35.8172 571.253 0 535.435 0 491.253V119.749C0 75.5658 35.8173 39.7485 80.0001 39.7485H495.132C512.946 39.7485 530.012 32.5868 542.491 19.8743Z"
  );
  clip-path: path(
    "M542.491 19.8743C554.97 7.16177 572.036 0 589.849 0H1129.15C1146.96 0 1164.03 7.16177 1176.51 19.8743C1188.99 32.5868 1206.05 39.7485 1223.87 39.7485H1640C1684.18 39.7485 1720 75.5658 1720 119.749V491.253C1720 535.436 1684.18 571.253 1640 571.253H1225.55C1207.29 571.253 1189.79 578.594 1177 591.626C1164.21 604.658 1146.71 612 1128.45 612H590.549C572.288 612 554.793 604.658 542.001 591.626C529.208 578.594 511.714 571.253 493.452 571.253H80C35.8172 571.253 0 535.435 0 491.253V119.749C0 75.5658 35.8173 39.7485 80.0001 39.7485H495.132C512.946 39.7485 530.012 32.5868 542.491 19.8743Z"
  );
  z-index: -1;
}

/* Clip path forma para las imagenes de services home */
.hexa-img {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.card_services_hover {
  background: #fff;
}
/* en el hover proner el main color per o coin un transción suave */
.card_services_hover:hover {
  background: var(--tertiary);
  background: linear-gradient(
    60deg,
    var(--tertiary) 20%,
    var(--fourth) 100%
  );
  transition: 0.5s;
  color: white !important;
  /* hacer que se agrande un poco no mucho */
  transform: scale(1.05);
}