@import url("https://fonts.googleapis.com/css2?family=Michroma&display=swap");
*{
    margin: auto;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    background-color: transparent;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: "Poppins", sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

:root{
    --bg-color: #080808;
    --second-bg-color: #131313;
    --text-color: white;
    --main-color: #ead8c0;
    --third-color: #a98b63;
    --white-color: #FFF;  
    --nav-text: var(--text-color, #fff);
  /* fallback por si no estuviera definida */
   --gold: var(--third-color, #d4af37);
    /* brillo central (si hay color-mix lo usamos, si no un fallback cálido) */
  --gold-hi: #f5e6b3;
  --circuit-color: #71767b;
  --circuit-opacity: 0.18;   /* sube/baja intensidad */
 --circuit-color: #71767b;           /* gris del circuito */
  --circuit-size: 480px;              /* escala del patrón (tu SVG usa 400x400; aquí controlas densidad general con transform si quisieras) */

  /* Safe zone (hueco central) */
  --safe-x: 50%;
  --safe-y: 52%;
  --safe-r: clamp(160px, 26vmin, 320px);
  --safe-feather: 10px;               /* transición suave del borde */
  
  --ripple-color: 234,216,192;   /* #ead8c0 en RGB */
  --ripple-opacity: 0.45;        /* intensidad */
  --ripple-duration: 800ms;      /* tap corto */
  --ripple-duration-long: 1300ms;/* long-press */
  
  
  --shine-cycle: 5s;                 /* pausa entre pasadas */
  --shine-width: 30%;                /* ancho de la franja */
  --shine-color: rgb(63, 67, 73);    
  /*--shine-color: rgb(207,214,223); */
}



body, html {
    font-size: 1rem;
    height: 100%;
}

/*effect shine*/
/* Shine: base blanca (#FFF) + brillo en var(--main-color) */
/* Base blanca + destello en --shine-color */
.shine-text {
  position: relative; display:inline-block; line-height:1.1;
  padding-bottom:.1em; margin:.15em 0;
  color:#fff; /* fallback si no hay clip */

  background-image:
    linear-gradient(90deg,
      transparent 0%,
      var(--shine-color) 45%,
      transparent 100%
    ),
    linear-gradient(#fff,#fff); /* base blanca */
  background-size: var(--shine-width) 100%, 100% 100%;
  background-repeat:no-repeat;
  background-position:-40% 0, 0 0;

  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Pasada rápida + pausa */
.shine-text.run-shine {
  animation: shine-cycle var(--shine-cycle) linear infinite;
  /* con destello oscuro puedes quitar el brillo si quieres: */
  /* filter: none; */
}

@keyframes shine-cycle{
  0%      { background-position: -40% 0, 0 0; }
  14%     { background-position: 140% 0, 0 0; } /* pasada rápida */
  14.01%  { background-position: -40% 0, 0 0; } /* reset */
  100%    { background-position: -40% 0, 0 0; } /* pausa */
}
/*end effect shine*/


/**/
/* Contenedor del hero */
/* Canvas cubre el bloque, pero no ocupa espacio */
/* 1) Que .hero no meta hueco extra */
/* 1) Que .hero no meta hueco extra */

/* El contenedor actual actúa como “capa” del fondo */
/*#home-content{
 /* position: relative; */      /* importante para posicionar el canvas dentro */
 /* overflow: visible;      */ /* asegúrate de no recortar partículas */
/*} */

/* Canvas ocupa todo #home-content, pero NO empuja nada */
/*#home-content > #bg-particles{
  position: absolute;
  inset: 0;             
  width: 100%;
  height: 100%;
  pointer-events: none; 
  z-index: 0;           
}
*/

/* Todo lo demás por encima del canvas */
/*#home-content > *:not(#bg-particles){
   position: relative;
   z-index: 1;
 }
*/

/*end*/


/*effect*/
/* 1) el contenedor crea la “capa” del fondo */


/*end effect*/


/*code temporal to animate svg preloader*/
/*.logo-path es el stroke path*/
.logo-path {
  stroke: white;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: drawStroke 3s ease forwards;
}

.fill-path {
  opacity: 0;
  animation: showFill 0.3s ease forwards;
}

@keyframes drawStroke {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes showFill {
  to {
    opacity: 1;
  }
}
/*end code temporal to animate svg preloader*/
          
/*Begin Share Modal 2025-2026*/


@keyframes appearShare{
    0%{opacity: 0; transform: scale(0) }
    25%{opacity: 1; transform: scale(1.07)}
    50%{opacity: 1; transform: scale(1) }
    75%{opacity: 1; transform: scale(1.02) }
    100%{opacity: 1; transform: scale(1)}
}


@keyframes dissappearShare{
      0%{opacity: 1; transform: scale(1) }
      35%{opacity: 1; transform: scale(1.02)}
      70%{opacity: 1; transform: scale(1)}
      100%{opacity: 0; transform: scale(0)}
}

/*2025-2026 share container*/
#share-options{
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 2rem;
}

#share-options:hover{
cursor: url(assets/images/hand.png),auto;
}

#linkedin-share-option-id{
    font-size: 1.5rem;
    color: #FFF;
    background: none;
    border: none;
    transform: scale(1.5);
    transition: transform 0.2s ease;
    cursor: url(assets/images/hand.png),auto;
}

#linkedin-share-option-id:hover{
    transform: scale(1.6);
    color: #0077B5; /* color de LinkedIn */
    cursor: url(assets/images/hand.png),auto;
}

#whatsapp-share-option-id{
    font-size: 1.5rem;
    /*color: #444;*/
    transform: scale(1.5);
    color: #FFF;
    background: none;
    border: none;
    cursor: url(assets/images/hand.png),auto;
    transition: transform 0.2s ease;
}


#whatsapp-share-option-id:hover{
    transform: scale(1.6);
    color: #25D366; 
    cursor: url(assets/images/hand.png),auto;
}

#telegram-share-option-id{
    font-size: 1.5rem;
    color: #FFF;
    background: none;
    border: none;
    transform: scale(1.5);
    transition: transform 0.2s ease;
    cursor: url(assets/images/hand.png),auto;
}


#telegram-share-option-id:hover{
    transform: scale(1.6);
    color: #0088CC;
    cursor: url(assets/images/hand.png),auto;
}


#whatsapp-share-option-id, #linkedin-share-option-id, #telegram-share-option-id{
    display: flex;
    padding: 2rem;
}



.icon-share-title{
    margin: 0 1rem 0 0;
    color: var(--main-color);
   /* animation: 11s rotatingQr ease-in-out forwards infinite;*/
}


#share-code{
 will-change: filter;
 /*animation: 1.6s showShare ease-out forwards;*/
}

 

#modal-share{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.5);  /* fondo oscuro */
  backdrop-filter: blur(4px);           /* desenfoque suave */
  color: #2c3240;
  font-size: 15px;
  font-weight: 600;
  /* CENTRADO con FLEX */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;

  transition: 0.4s ease;
  transform-origin: center;
  flex-wrap: wrap;
  border-radius: 2px;
}

/* Mostrar modal con animación */
#modal-share.show-share {
  display: flex;
  animation: appearShare 0.6s ease-in-out forwards;
  visibility: visible;
}

/* Ocultar modal con animación */
#modal-share.remove-share {
  display: flex;
  animation: dissappearShare 0.6s ease-in-out forwards;
  visibility: hidden;
}


/*2025-2026*/
#content-share {
  background-color: rgba(0, 0, 0, 0.5); 
  border: solid red;
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  width: auto;
  /*padding: 0 3rem 0rem 3rem;*/
  padding: 3rem;
  border-radius: 1rem;
  gap: 3rem;
  box-shadow: 0 4px 7px #0d1117;
  border-top: 1px solid rgba(212, 167, 89, 0.3);
  border-right: 1px solid rgba(212, 167, 89, 0.3);
  border-bottom: 1px solid rgba(212, 167, 89, 0.3);
  border-left:  1px solid rgba(212, 167, 89, 0.3);
}

#share-text{
  display: flex;
  align-items: center;
  align-content: center;
  text-align: center;
  font-size: 1.7rem;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  color: #FFF;
  text-transform: uppercase;
  /*margin: 3rem auto 3rem auto;*/
  animation: appearQrtext 1.5s ease-in-out;
}

/*
.content-qr {
    background: white;
    border-radius: 8px;
    text-align: center;
    color: #FFF;
    box-shadow: 0 4px 7px #0d1117;
    border-top: 1px solid rgba(212, 167, 89, 0.3);
    border-right: 1px solid rgba(212, 167, 89, 0.3);
    border-left: 4px solid var(--third-color);
    border-bottom: 1px solid rgba(212, 167, 89, 0.3);
    padding: 41px 40px 16px 40px;
    justify-content: center;
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
}
*/
/**/
              



#close-share-button{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 1rem 4rem;
  font-size: 1.6rem;
  color: black;
  letter-spacing: 0.1rem;
  font-weight: 600;
  font-family: 'Barlow Semi Condensed', sans-serif;
  box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
  border-radius: 0.4rem;
  overflow: hidden;
  background: #ead8c0;
  outline: 1px solid #a98b63;
  border: solid 2px #010e19;
  /*margin: 2.5rem auto 3rem auto;*/
  transition: 0.3s ease-in-out;
}

#close-share-button:hover{
    color: #000;
    background: #b79f7f;
    outline: 1px solid #a98b63;
    border: solid 2px #010e19;
    box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
    cursor: url(assets/images/hand.png),auto;
    transition: 0.3s ease-in-out;
  }
  
#close-share-button:focus{
    color: #000;
    background: var(--third-color);
    outline: 1px solid #000;
    border: solid 2px #000;
    box-shadow: 0 4px 7px black, inset 0 0 15px #222733;
    text-shadow: 0px 1px rgba(255, 255, 255, 0.3);
  }
/*end button close qr*/
/*End Share Modal 2025-2026*/
            
/*modales QR y share*/

@keyframes rotatingQr{
    0%{
        opacity: 1; transform: rotate(0);
    }
    10%{
        opacity: 1; transform: rotate(90deg);
    }
    20%{
        opacity: 1; transform: rotate(90deg);
    }
    30%{
        opacity: 1; transform: rotate(180deg);
    }
    40%{
        opacity: 1; transform: rotate(180deg);
    }
    50%{
        opacity: 1; transform: rotate(270deg);
    }
    60%{
        opacity: 1; transform: rotate(270deg);
    }
    70%{
        opacity: 1; transform: rotate(270deg);
    }
    80%{
        opacity: 1; transform: rotate(360deg);
    }
    90%{
        opacity: 1; transform: rotate(360deg);
    }
    100%{
        opacity: 1; transform: rotate(360deg);
    }
}

.icon-share-title{
    margin: 0 1rem 0 0;
    color: var(--main-color);
    animation: 11s rotatingQr ease-in-out forwards infinite;
}

@keyframes appearQr{
    0%{opacity: 0; transform: scale(0) }
    25%{opacity: 1; transform: scale(1.07)}
    50%{opacity: 1; transform: scale(1) }
    75%{opacity: 1; transform: scale(1.02) }
    100%{opacity: 1; transform: scale(1)}
}


@keyframes dissappearQr{
      0%{opacity: 1; transform: scale(1) }
      35%{opacity: 1; transform: scale(1.02)}
      70%{opacity: 1; transform: scale(1)}
      100%{opacity: 0; transform: scale(0)}
}


@keyframes appearQrtext{
    0%{
        opacity: 0;
        transform: scale(0) translateY(200px);
    }
    5%{
        opacity: 0;
        transform: scale(1) translateY(190px);
    }
    10%{
        opacity: 0;
        transform: scale(1) translateY(180px);
    }
    15%{
        opacity: 0;
        transform: scale(1) translateY(170px);
    }
    20%{
        opacity: 0;
        transform: scale(1) translateY(160px);
    }
    25%{
        opacity: 0;
        transform: scale(1) translateY(150px);
    }
    30%{
        opacity: 0;
        transform: scale(1) translateY(140px);
    }
    35%{
        opacity: 0;
        transform: scale(1) translateY(130px);
    }
    40%{
        opacity: 0;
        transform: scale(1) translateY(120px);
    }
    45%{
        opacity:0;
        transform: scale(1) translateY(110px);
    }
    50%{
        opacity: 0;
        transform: scale(1) translateY(100);
    }
    55%{
        opacity: 0;
        transform: scale(1) translateY(90);
    }
    60%{
        opacity: 0;
        transform: scale(1) translateY(80px);
    }
   65%{
        opacity: 0;
        transform: scale(1) translateY(70px);
    }
    70%{
        opacity: 0;
        transform: scale(1) translateY(60px);
    }
    75%{
        opacity: 0;
        transform: scale(1) translateY(50px);
    }
    80%{
        opacity: 0;
        transform: scale(1) translateY(40px);
    }
    85%{
        opacity: 0;
        transform: scale(1) translateY(30);
    }
    90%{
        opacity: 1;
        transform: scale(1) translateY(20px);
    }
    95%{
        opacity: 1;
        transform: scale(1) translateY(10px);
    }
    100%{
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes showQr{
      0%{
          filter: blur(10px);
          opacity: 0;
      }    
      100%{
          filter: blur(0px);
          opacity: 1;
      }
}

@keyframes ShowQrClean {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#qr-code{
  background-color: white;
  padding: 0.5rem;
  border-radius: 0.5rem;
  will-change: filter;
  /*animation: 1.6s showQr ease-out forwards;*/
  animation: 0.5s showQrClean ease-out forwards;
}

 

#modal-qr-code {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.5); /* fondo oscuro */
  backdrop-filter: blur(4px);     /* desenfoque suave */
  /*backdrop-filter: none !important;*/
  /*background-color: rgba(0, 0, 0, 0.95) !important;*/
  color: #2c3240;
  font-size: 15px;
  font-weight: 600;
  /* CENTRADO con FLEX */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;

  transition: 0.4s ease;
  transform-origin: center;
  flex-wrap: wrap;
  border-radius: 2px;
}

/* Mostrar modal con animación */
#modal-qr-code.show-qr {
  display: flex;
  animation: appearQr 0.6s ease-in-out forwards;
  visibility: visible;
}

/* Ocultar modal con animación */
#modal-qr-code.remove-qr {
  display: flex;
  animation: dissappearQr 0.6s ease-in-out forwards;
  visibility: hidden;
}


/*2025-2026*/
#content-qr {
  /*background-color: #121212; */
  background-color: #000;
  backdrop-filter: blur(4px);
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  width: auto;
  padding: 3rem;
  border-radius: 1rem;
  gap: 3rem;
  box-shadow: 0 4px 7px #0d1117;
  border-top: 1px solid rgba(212, 167, 89, 0.3);
  border-right: 1px solid rgba(212, 167, 89, 0.3);
  border-bottom: 1px solid rgba(212, 167, 89, 0.3);
  border-left:  1px solid rgba(212, 167, 89, 0.3);
}

#qr-code canvas {
  background-color: #ffffff !important;
}
/*new*/
/*
#qr-code canvas {
  background-color: #ffffff !important;
  padding: 0.5rem;
  border-radius: 0.5rem;
  display: block;
}

#qr-code {
  background-color: white;
  padding: 1rem;
  border-radius: 0.8rem;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
*/



#qr-text{
  display: flex;
  align-items: center;
  align-content: center;
  text-align: center;
  font-size: 1.7rem;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  color: #FFF;
  text-transform: uppercase;
  /*margin: 3rem auto 3rem auto;*/
  /*animation: appearQrtext 1.5s ease-in-out;*/
  animation: appearQrtext 0.8s ease-in-out forwards;
}

/*
.content-qr {
    background: white;
    border-radius: 8px;
    text-align: center;
    color: #FFF;
    box-shadow: 0 4px 7px #0d1117;
    border-top: 1px solid rgba(212, 167, 89, 0.3);
    border-right: 1px solid rgba(212, 167, 89, 0.3);
    border-left: 4px solid var(--third-color);
    border-bottom: 1px solid rgba(212, 167, 89, 0.3);
    padding: 41px 40px 16px 40px;
    justify-content: center;
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
}
*/
/**/
              
.container-share-and-qr{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 2rem;
    margin: 0 2rem 6rem 2rem;
}



#close-qr-button{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 1rem 4rem;
  font-size: 1.6rem;
  color: black;
  letter-spacing: 0.1rem;
  font-weight: 600;
  font-family: 'Barlow Semi Condensed', sans-serif;
  box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
  border-radius: 0.4rem;
  overflow: hidden;
  background: #ead8c0;
  outline: 1px solid #a98b63;
  border: solid 2px #010e19;
  /*margin: 2.5rem auto 3rem auto;*/
  transition: 0.3s ease-in-out;
}

#close-qr-button:hover{
    color: #000;
    background: #b79f7f;
    outline: 1px solid #a98b63;
    border: solid 2px #010e19;
    box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
    cursor: url(assets/images/hand.png),auto;
    transition: 0.3s ease-in-out;
  }
  
#close-qr-button:focus{
    color: #000;
    background: var(--third-color);
    outline: 1px solid #000;
    border: solid 2px #000;
    box-shadow: 0 4px 7px black, inset 0 0 15px #222733;
    text-shadow: 0px 1px rgba(255, 255, 255, 0.3);
  }
/*end button close qr*/


#share-button, #qr-button{
      position: relative;
      display: inline-flex;
      align-items: center;
      padding: 1rem 2.8rem;
      font-size: 1.6rem;
      color: black;
      letter-spacing: 0.1rem;
      font-weight: 600;
      box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
      border-radius: 0.4rem;
      overflow: hidden;
      background: #ead8c0;
      outline: 1px solid #a98b63;
      border: solid 2px #010e19;
      margin: 11px auto;
      transition: 0.3s ease-in-out;
}

 #share-button:hover, #qr-button:hover{
    color: #000;
    background: #b79f7f;
    outline: 1px solid #a98b63;
    border: solid 2px #010e19;
    box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
    cursor: url(assets/images/hand.png),auto;
    transition: 0.3s ease-in-out;
  }

 #share-button:focus , #qr-button:focus{
    color: #000;
    background: var(--third-color);
    outline: 1px solid #000;
    border: solid 2px #000;
    box-shadow: 0 4px 7px black, inset 0 0 15px #222733;
    text-shadow: 0px 1px rgba(255, 255, 255, 0.3);
  }

.icon-share{
    margin: 0 5px 0 0;
}

.icon-scan-qr{
    margin: 0 5px 0 0;
    animation: 15s rotatingQr ease-in-out forwards infinite;
}



@keyframes appearContainerItems{
    0%{
        opacity: 0;
        transform: translateX(130px);
    }
    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}


@keyframes appearavoidmessageMdAlert{
    0%{opacity: 0; transform: scale(0) }
    25%{opacity: 1; transform: scale(1.07)}
    50%{opacity: 1; transform: scale(1) }
    75%{opacity: 1; transform: scale(1.02) }
    100%{opacity: 1; transform: scale(1)}
}


@keyframes dissappearavoidmessageMdAlert{
      0%{opacity: 1; transform: scale(1) }
      35%{opacity: 1; transform: scale(1.02)}
      70%{opacity: 1; transform: scale(1)}
      100%{opacity: 0; transform: scale(0)}
}

/* clases utilitarias */
#md_alert_inside.appearavoidmessage {
  animation: appearavoidmessageMdAlert 0.6s ease-out forwards;
}

#md_alert_inside.dissappearavoidmessage {
  animation: dissappearavoidmessageMdAlert  0.4s ease-in forwards;
}



.wrapper.scroll-lock {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  overflow-y: scroll;
  width: 100%;
}



.modal{
    /*display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 9998;
    */
    display: none;
    position: fixed;
    justify-content: center;
    align-content: center;
    align-items: center;
    /*background-color: #FFF;*/
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* sombra oscura */
    backdrop-filter: blur(4px);           /* desenfoque suave */
    color: #2c3240;
    /*border-left: 4px solid var(--main-color);*/
    border-radius: 2px;
    /*padding: 15px 15px 15px 15px;*/
    z-index: 9998;
    font-size: 15px;
    font-weight: 600;
    /*inset: 0;*/
    /*top: 20%;*/
    top: 0;
    left: 50%;
    transform: translate(-50%);
    transform-origin: center;
    flex-wrap: wrap;
    transition: 0.4s ease;
    gap: 10px;
    /*max-width: 300px;*/
   /* box-shadow: 0 4px 7px #0d1117;*/
    flex-direction: column;
   /* height: 30%;*/
}



.modal.mostrar{
    display: flex;
    animation: appearavoidmessageBlur 1s ease-in-out;
}

.modal.close{
    display: flex;
    animation: dissappearavoidmessageBlur 0.6s ease-in-out forwards;
}

.modal-content {
    background: #121212;
    border-radius: 8px;
    text-align: center;
    color: #FFF;
    box-shadow: 0 4px 7px #0d1117;
    border-top: 1px solid rgba(212, 167, 89, 0.3);
    border-right: 1px solid rgba(212, 167, 89, 0.3);
    border-left: 4px solid var(--third-color);
    border-bottom: 1px solid rgba(212, 167, 89, 0.3);
    padding: 41px 40px 16px 40px;
    justify-content: center;
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;

    /* líneas añadidas */
    position: absolute;
    top: 20%; /* O el valor que prefieras */
    left: 50%;
    transform: translate(-50%);
    transform-origin: center;
}


.modal-content{
white-space: nowrap;
text-align: center;
}

.modal-content.success {
  border-left: 2px solid var(--main-color);
  color: #FFF;
  visibility: visible;
  animation: appearavoidmessageBlur 1s ease-in-out;
  display:flex;
  position: absolute;
  /*top: 20%;*/

  /*width: 100%;*/
  /*height: 100%;*/
  /*top: 0%;*/
  left: 50%;
  background-color: rgba(0, 0, 0, 0.5); /* sombra oscura */
  backdrop-filter: blur(4px);           /* desenfoque suave */
  transform: translate(-50%);
  transform-origin:center;
  transition:0.4s ease-in-out;
  box-shadow:0 4px 7px #0d1117;
  padding: 4rem 6rem;
  /*padding: 41px 40px 16px 40px;*/
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
}

@keyframes appearCheck{
    0%{
        opacity: 0;
        transform: scale(0);
    }
    50%{
        opacity: 1;
        transform: scale(1.1);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}

.icon-sent{
    color: var(--main-color);
    margin: 0 5px 0 0;
    opacity: 0;    
    transform: scale(0);
    animation: 0.6s appearCheck ease-in-out forwards;
}

.icon-fail{
    color: #de636f;
    margin: 0 5px 0 0;
    opacity: 0; 
    transform: scale(0);
    animation: 0.6s appearCheck ease-in-out forwards;
}

.modal-content.error {
  border-left: 2px solid #de636f;
  color: red;
  visibility: visible;
  animation: appearavoidmessageBlurTop 1s ease-in-out;
  display:flex;
  position: absolute;
  /*top: 20%;*/
  /*background-color: rgba(0, 0, 0, 0.5); *//* sombra oscura */
  /*backdrop-filter: blur(4px);    */       /* desenfoque suave */
  /*width: 100%;*/
  /*height: 100%;*/
  /*top: 0;*/
  left: 50%;
  transform: translate(-50%);
  transform-origin:center;
  transition:0.4s ease-in-out;
  box-shadow:0 4px 7px #0d1117;
  padding: 4rem 6rem;
  /*padding: 41px 40px 16px 40px;*/
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
}

.modal-content.successFinish {
  border-left: 2px solid var(--main-color);
  color: #FFF;
  visibility: hidden;
  animation: dissappearavoidmessageBlurTop 0.4s ease-in-out;
  display: flex;
  position: absolute;
  /*background-color: rgba(0, 0, 0, 0.5); *//* sombra oscura */
  /*backdrop-filter: blur(4px);  */         /* desenfoque suave */
  /*top: 0%;*/
  /*top: 20%;*/
  /*top: 20%;*/
  left: 50%;
  /*width: 100%;*/
 /* height: 100%;*/
  transform: translate(-50%);
  transform-origin:center;
  transition:0.4s ease-in-out;
  box-shadow:0 4px 7px #0d1117;
  /*padding: 41px 40px 16px 40px;*/
  padding: 4rem 6rem;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
}

.modal-content.errorFinish {
  border-left: 2px solid #de636f;
  color: #de636f;
  visibility: hidden;
  animation: dissappearavoidmessageBlurTop 0.4s ease-in-out;
  display: flex;
  position: absolute;
  /*top: 20%;*/
  /*background-color: rgba(0, 0, 0, 0.5);*/ /* sombra oscura */
  /*backdrop-filter: blur(4px); */          /* desenfoque suave */
 /* top: 20%;*/
  left: 50%;
  transform: translate(-50%);
  transform-origin:center;
  transition:0.4s ease-in-out;
  box-shadow:0 4px 7px #0d1117;
  padding: 4rem 6rem;
  /*padding: 41px 40px 16px 40px;*/
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
}



#modalBotones {
  margin-top: 39px;
  display: flex;
  justify-content: center;
  gap: 10px;
  /*color: #2c3240;*/
  font-size: 15px;
  font-weight: 600;
}

#confirmarEnvio{
  position: relative;
  color: #000;
  font-weight: 600;
  align-items: center;
  padding: 0.6rem 1.2rem;
  /*padding: 0.6rem 3.5rem;*/
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
  box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
  border-radius: 0.4rem;
  overflow: hidden;
  background: #ead8c0;
  outline: 1px solid #a98b63;
  border: solid 2px #010e19;
  transition: 0.3s ease-in-out;
  
}

#confirmarEnvio:hover{
    color: #000;
    background: #b79f7f;
    outline: 1px solid #a98b63;
    border: solid 2px #010e19;
    box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
    cursor: url(assets/images/hand.png),auto;
    transition: 0.3s ease-in-out;
  }

 #confirmarEnvio:focus{
    color: #FFF;
    background: var(--third-color);
    outline: 1px solid #000;
    border: solid 2px #000;
    box-shadow: 0 4px 7px black, inset 0 0 15px #222733;
    text-shadow: 0px 1px rgba(255, 255, 255, 0.3);
  }

#modalCerrar{
    position: relative;
    font-weight: 600;
    align-items: center;
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    border-radius: 0.4rem;
    overflow: hidden;
    background: transparent;
    outline: 1px solid #a98b63;
    border: solid 2px #010e19;
    padding: 0.6rem 1.2rem;
    /*padding: 1rem 3.5rem;*/
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
}
#modalCerrar:hover{
    cursor: url(assets/images/hand.png),auto;
    transition: 0.3s ease-in-out;
}

#modalCerrar:focus{
    cursor: url(assets/images/hand.png),auto;
    transition: 0.3s ease-in-out;
}
.border-line-alert-form{
  border: none;
  height: 1px;
  position: absolute;
  display: flex;
  margin: 0 0 25px 0;
  background: linear-gradient(to right, transparent, var(--third-color), transparent);
  width: 80%;
  /*width: 80%;*/
}
  
  




#contenedor-imagen-contactos{
  display: flex;       
  align-items: center;
  gap: 20px; 
}

.border-line-access-denied{
  border: none;
  height: 1px;
  position: absolute;
  display: flex;
  margin: 0 0 25px 0;
  background: linear-gradient(to right, transparent, #de636f, transparent);
  width: 80%;
}

.border-line{
  border: none;
  height: 1px;
  position: absolute;
  display: flex;
  /*background: linear-gradient(to right, #8883, #fff2, #8883); */ /* sutil degradado */
 /* background: linear-gradient(to right, blue, blue, red); */
  /*margin: 0 0 157px 0;*/
  margin: 0 0 22rem 0;
  background: linear-gradient(to right, transparent, #666, transparent);
  /*background-color: #444; */ /* o el color que combine con tu fondo */
  width: 80%;
}


.btn-contactar + .btn-about {
  margin-left: 2rem;
}

.btn-about{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 1rem 2.8rem;
  font-size: 1.6rem;
  color: #FFF;
  letter-spacing: 0.1rem;
  font-weight: 600;
  transform: scale(1);
  box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
  border-radius: 0.4rem;
  overflow: hidden;
  background: transparent;
  /*background: #ead8c0;*/
  /*
  outline: 1px solid #a98b63;
  border: solid 2px #010e19;
  */
  outline: 1px solid transparent;
  border: solid 2px #ead8c0;
  transition: all 0.8s ease-in-out;
  margin: 11px auto;
  transition: 0.3s ease-in-out;
  /*margin: 0 0 0 7.4rem;*/
  }


  .btn-about:hover{
    color: #000 !important;
    background: #b79f7f;
    outline: 1px solid #a98b63;
    border: solid 2px #010e19;
    box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
    transform: scale(1);
    cursor: url(assets/images/hand.png),auto;
    transition: all 0.3s ease-in-out;
  }

  .btn-about:focus{
    color: #000 !important;
    background: var(--third-color);
    outline: 1px solid #000;
    border: solid 2px #000;
    /* box-shadow: 0 0 0 black, inset 0 0 10px #222733; */
    transform: scale(1);
    box-shadow: 0 4px 7px black, inset 0 0 15px #222733;
    text-shadow: 0px 1px rgba(255, 255, 255, 0.3);
  }

@media screen and (min-width: 620px){
#identity{
  color: #FFFFFF;
  font-family: "Beatrice Regular",Arial,Helvetica,sans-serif;
  transform: uppercase;
  /*font-family: "poppins-medium", sans-serif;*/
  font-size: 8.4rem;
  line-height: 1.071;
  max-width: 900px;
  margin-top: 0;
  margin-bottom: .6rem;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  display: none;
}

.role{
  /*font-family: "lora-regular", serif;*/
  position: relative;
  display: inline-flex;
  font-family: "Beatrice Regular",Arial,Helvetica,sans-serif;
  transform: uppercase;
  font-size: 1.7rem;
  line-height: 2.4rem;
  text-transform: uppercase;
  letter-spacing: .2rem;
  color: #FFFFFF;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
  #first-position, #second-position{
    display: flex;
  }
  
  #stick{
    display: flex;
    /*color: rgba(255, 255, 255, 0.3);*/
    color: #ead8c0;
    margin: 0 11px;
  }
  
  .btn-contactar + .btn-about {
  margin-left: 2rem;
}

.btn-about{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 1rem 2.8rem;
  font-size: 1.6rem;
  color: #FFF;
  letter-spacing: 0.1rem;
  font-weight: 600;
  transform: scale(1);
  box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
  border-radius: 0.4rem;
  overflow: hidden;
  background: transparent;
  /*background: #ead8c0;*/
  /*
  outline: 1px solid #a98b63;
  border: solid 2px #010e19;
  */
  outline: 1px solid transparent;
  border: solid 2px #ead8c0;
  transition: all 0.8s ease-in-out;
  margin: 11px auto;
  transition: 0.3s ease-in-out;
  /*margin: 0 0 0 7.4rem;*/
  }


  .btn-about:hover{
    color: #000 !important;
    background: #b79f7f;
    outline: 1px solid #a98b63;
    border: solid 2px #010e19;
    box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
    transform: scale(1);
    cursor: url(assets/images/hand.png),auto;
    transition: all 0.3s ease-in-out;
  }

  .btn-about:focus{
    color: #000 !important;
    background: var(--third-color);
    outline: 1px solid #000;
    border: solid 2px #000;
    /* box-shadow: 0 0 0 black, inset 0 0 10px #222733; */
    transform: scale(1);
    box-shadow: 0 4px 7px black, inset 0 0 15px #222733;
    text-shadow: 0px 1px rgba(255, 255, 255, 0.3);
  }
  
  
}


@media screen and (max-width:744px){
.role{   
display: inline-grid;
text-transform: uppercase;
letter-spacing: 1px;
}
   #first-position, #second-position{
    display: inline-block;
}
#stick{
    display: none;
}

#identity{
  color: #FFFFFF;
  font-family: "Beatrice Regular",Arial,Helvetica,sans-serif;
  transform: uppercase;
  /*font-family: "poppins-medium", sans-serif;*/
  font-size: 8.4rem;
  line-height: 1.071;
  max-width: 900px;
  margin-top: 0;
  margin-bottom: .6rem;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  display: flex;
}

#identity-full{
  color: #FFFFFF;
  font-family: "Beatrice Regular",Arial,Helvetica,sans-serif;
  transform: uppercase;
  /*font-family: "poppins-medium", sans-serif;*/
  font-size: 8.4rem;
  line-height: 1.071;
  max-width: 900px;
  margin-top: 0;
  margin-bottom: .6rem;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  display: none;
}
    
}


.container_ncruztech_logo{
    display: flex;
    position: relative;
}

.ncruztech{
    display: flex;
    position: relative;
    text-align: center;
    align-items: center;
    align-content: center;
}

.container_text_ncruztech{
    display: flex;
    position: relative;
    flex-direction: row;
    text-transform: uppercase;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700; /* 700 es Bold */
    letter-spacing: 1px;
    animation: autoshowcomponentncruztech linear  both;
    animation-timeline: view(65% auto);
    /*animation-timeline: view(80% 5%);*/
    z-index: 1;
}

.text_ncruz{
    font-size: 50px;
    position: absolute;
    display: flex;
    margin: -40px 0 10px 11px;
}

.text_tech{
    font-size: 50px;
    position: absolute;
    display: flex;
    margin: 6px 0 0 11px;
}


/* begin initial css first page circular preloader */
.loader-initial {
  position: relative;
  margin: 0 auto;
  width: 35px;
  &:before {
    content: '';
    display: block;
    padding-top: 100%;
  }
}

.circular-initial {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  /*top: 32rem;*/
  top: 45rem;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  z-index: 99999;
}

.path-initial {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dashinitial 1.5s ease-in-out infinite, colorinitial 6s ease-in-out infinite;
  stroke-linecap: round;
}

@keyframes rotateinitial {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dashinitial {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@keyframes colorinitial {
  100%,
  0% {
    stroke: var(--main-color);
  }
  40% {
    stroke: var(--main-color);
  }
  66% {
    stroke:  var(--main-color);
  }
  80%,
  90% {
    stroke: var(--white-color);
  }
}

.showbox-initial {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5%;
}


@media screen and (min-width: 2000px){
  .circular-initial {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 32rem;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  z-index: 99999;
  }
}

@media screen and (min-width: 1000px) and (max-width: 200px){
  .circular-initial {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 26rem;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  z-index: 99999;
  }
}

/*  ends css initial first page circular preloader */



/* css begin  for image pre loader*/


/*.loader {
  position: relative;
  margin: 0 auto;
  width: 35px;
  &:before {
    content: '';
    display: block;
    padding-top: 100%;
  }
}*/

/*2025*/

.loader {
  position: relative;
  margin: 0 auto;
  width: 35px;
}
  .loader:before {
    content: '';
    display: block;
    padding-top: 100%;
  }



.circular {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  /*top: 1%;
  left: 1%;*/
  /*margin: auto;*/
  z-index: 99999;
  /*2025-2026 latest*/
  margin: 0;
  display: flex;
  top: 0;
  left: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@keyframes color {
  100%,
  0% {
    stroke: var(--main-color);
  }
  40% {
    stroke: var(--gray);
  }
  66% {
    stroke:  var(--third-color);
  }
  80%,
  90% {
    stroke: var(--main-color);
  }
}

.showbox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5%;
}

/* css ends for image pre loader*/

/*Begin preloader style*/

body {
  font-family: "Michroma", sans-serif;
  height: 100vh;
  background-color: transparent;
}

.container {
  background-color: black;
  color: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.loaderimage{
    animation: slidein 3s linear 0s infinite;
}

@keyframes slidein{
    100%{ rotate: 360deg;}
}


@media screen and (min-width: 338px){


  .loading-page-responsive{
    display: none;
  }

/*
.loading-page {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #060606, #060606,#060606);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  color: #191654;
  z-index: 99999;
  overflow: hidden;
}
*/

/*2025-2026 loader*/

.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: black;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
  pointer-events: auto;
}



.loader-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


#svg {
  height: 400px;
  width: 400px;
  stroke: #FFF;
  fill-opacity: 0;
  stroke-width: 4px;
  stroke-dasharray: 16000;
  animation: draw 8s ease;
}
/*this bellow was addedd in 2025*/
}

@keyframes draw {
  0% {
    stroke-dashoffset: 16000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}




@keyframes norge{
    0%{opacity: 0; letter-spacing: 60px}
    25%{opacity: 0; letter-spacing: 55px}
    45%{opacity: 0; letter-spacing: 50px}
    50%{opacity: 0; letter-spacing: 30px}
    100%{opacity: 1; letter-spacing: 5px}
}


@keyframes surname{
  0%{opacity: 0; transform: translateY(-25px)}
  100%{opacity: 1; transform: translateY(0px)}
}

.name-container {
  height: 30px;
  overflow: hidden;
}

.logo-name {
  color: #FFF;
  font-size: 22px;
  /* letter-spacing: 12px; */
  letter-spacing: 10px;
  text-transform: uppercase;
  margin-left: -120px;
  margin-top: -120px;
  font-weight: bolder;
  animation: surname 3.5s ease-in-out;
  position: absolute;
  z-index: 4;
}

/*remove llave in 2025*/
/*}*/

/*Ends preloader style*/




@keyframes moveresfera{
    0%{transform: translateY(0px) rotate(0deg); display: flex; position: absolute; z-index: 2;box-shadow: inset 0 0 15px #0d1117, 0 4px 7px #0d1117; padding: 15px 15px 15px 15px;}
    30%{transform: translateY(-60px) rotate(360deg);display:flex; position: absolute; z-index: 2;box-shadow: inset 0 0 7px #0d1117;padding: 11px 18px 18px 11px;}
    60%{transform: translateY(0px) rotate(0deg);display:flex; position: absolute; z-index: 2;box-shadow: inset 0 0 7px #0d1117;padding: 15px 15px 15px 15px;}
    70%{transform: translateY(-20px) rotate(360deg);display:flex; position: absolute; z-index: 2;box-shadow: inset 0 0 7px #0d1117;padding: 11px 18px 18px 11px;}
    80%{transform: translateY(0px) rotate(0deg);display:flex; position: absolute; z-index: 2;box-shadow: inset 0 0 7px #0d1117;padding: 15px 15px 15px 15px;}
    90%{transform: translateY(-10px) rotate(360deg);display:flex; position: absolute; z-index: 2;box-shadow: inset 0 0 7px #0d1117;padding: 11px 18px 18px 11px;}
    95%{transform: translateY(0px) rotate(0deg);display:flex; position: absolute; z-index: 2;box-shadow: inset 0 0 7px #0d1117;padding: 15px 15px 15px 15px;}
    100%{transform: translateY(0px) rotate(0deg);display:flex; position: absolute; z-index: 2;box-shadow: inset 0 0 15px #0d1117, 0 4px 7px #0d1117;padding: 15px 15px 15px 15px;}
}


@keyframes movesphere{
    0%{transform: translateY(0px) rotate(0deg); display: flex; position: absolute; z-index: 2;box-shadow: inset 0 0 15px #0d1117, 0 4px 7px #0d1117; padding: 15px 15px 15px 15px;}
    100%{transform: translateY(0px) rotate(0deg);display:flex; position: absolute; z-index: 2;box-shadow: inset 0 0 15px #0d1117, 0 4px 7px #0d1117;padding: 15px 15px 15px 15px;}
}


@keyframes retornaresfera{
 0%{transform: translateY(-60px) rotate(360deg); display: flex; position: absolute; z-index: 2;}
    100%{transform: translateY(0px) rotate(0deg);display:flex; position: absolute; z-index: 2;}
}

/*static*/
.animation3d{
  margin: 13px 0 0 0;
  padding: 3px 10px 3px 10px;
  background-image: linear-gradient(to top right, #44484e , #2f3338);
  font-size:25px;
  color:#FFF;
  text-shadow:0 3px 5px #12151b;
  position: fixed;
  border-radius: 6px;
  z-index: 2;
  box-shadow: inset 0 0 15px #0d1117, 0 4px 7px #0d1117;
  animation: animatethisservice 1.7s infinite;
  transform: scale(1) translateY(0px);
  transition: 0.5s ease-in-out;
}


.animation3d:hover{
  margin: 13px 0 0 0;
  padding: 3px 10px 3px 10px;
  background-image: linear-gradient(to top right, #44484e , #2f3338);
  font-size:25px;
  color:var(--gold);
  position: fixed;
  border-radius: 6px;
  z-index: 2;
  box-shadow: inset 0 0 15px #0d1117, 0 4px 7px #0d1117;
  transform: scale(1) translateY(0px);
  transition: 0.5s ease-in-out;
}


.animation3d:focus{
  margin: 13px 0 0 0;
  padding: 3px 10px 3px 10px;
  background-image: linear-gradient(to top right, #44484e , #2f3338);
  font-size:25px;
  color:#FFF;
  position: fixed;
  border-radius: 6px;
  z-index: 2;
  box-shadow: inset 0 0 15px #0d1117, 0 4px 7px #0d1117;
  /*animation: stopthisanimation 0.7s ease-in-out;*/
  transform: scale(1) translateY(0px) translateX(3px); 
  transition: all 0s ease-in-out;
}


.objectsphere-static{
  margin: 0 0 20px 0;
  padding: 15px 15px 15px 15px;
  background-image: linear-gradient(to top right, #44484e , #2f3338);
  cursor: pointer;
  position: absolute;
  display: none;
  bottom: 23px;
  right: 25px;
  border-radius: 30px;
  box-shadow: inset 0 0 15px #0d1117, 0 4px 7px #0d1117;
  transition: all 0s ease-in-out;
  color: #000;
  font-size: 0rem;
  font-weight: 800;
  line-height: 2;
  z-index: 2;
}

.objectsphere{
  display: none;
  margin: 0 0 20px 0;
  padding: 15px;
  background-image: linear-gradient(to top right, #44484e , #2f3338);
  cursor: pointer;
  position: fixed;
  bottom: 25px;
  right: 25px;
  border-radius: 30px;
  z-index: 2;
  box-shadow: inset 0 0 5px #0d1117;
  transition: all 0s ease-in-out;
  color: #000;
  font-size: 0rem;
  font-weight: 800;
  line-height: 2;
  animation: x-axis 4s infinite linear;
}

@keyframes animatethisservice{
  0%{opacity: 1; transform: scale(1) translateY(-30px);  padding: 3px 10px 3px 10px; display: flex;} 
  25%{opacity: 1; transform: scale(1.03) translateY(0px); padding: 1px 18px 1px 18px; display: flex;}
  50%{opacity: 1; transform: scale(1) translateY(-30px); padding: 3px 10px 3px 10px; display: flex;}
  75%{opacity: 1; transform: scale(1.03) translateY(0px); padding: 1px 18px 1px 18px; display: flex;}
  100%{opacity: 1; transform: scale(1) translateY(-30px); padding: 3px 10px 3px 10px; display: flex;}
}


@keyframes stopthisanimation{
  0%{opacity: 1; transform: scale(1) translateY(-30px) translateX(3px);  padding: 3px 10px 3px 10px; display: flex;} 
  50%{opacity: 1; transform: scale(1) translateY(0px) translateX(3px); padding: 3px 10px 3px 10px; display: flex;}
  100%{opacity: 1; transform: scale(1) translateY(0px) translateX(3px);padding: 3px 10px 3px 10px; display: flex;}
}



@keyframes rotatingball{
    0%{transform: rotateZ(360deg)}
    100%{transform: rotateZ(0deg)}
} 


.wrapper-ball{
    animation: y-axis 1s infinite ease-in-out;
    position: absolute;
    margin: 10px 0 0 0;
}


@keyframes x-axis{
    50%{ transform: translateX(-10px)}
}

@keyframes y-axis{
    50%{ transform: translateY(10px)}
}



@keyframes x { to { left:calc(var(--x) + 1px); } }
@keyframes y { to { top :calc(var(--y) + 0.2px); } }



/* create the cube*/
@keyframes appearthings{
    0%{ opacity: 0; transform: scale(0)}
    25%{opacity: 1; transform: scale(1)}
    50%{opacity: 1; transform: scale(1)}
    75%{opacity: 1; transform: scale(1)}
    100%{opacity: 1; transform: scale(1)}
}


.cube{
  bottom: 35%;
  left: 76%;
  position: absolute;
  transform-style: preserve-3d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotateY(14deg) rotateX(-8deg);
  animation: animate 15s linear infinite alternate;

}
@keyframes animate{
to{
  transform: rotateY(360deg) rotateX(360deg);
}
}


@keyframes backtofloor{
from{
  transform: rotateY(90deg) rotateX(45deg);
  }
  to{
      transform: rotateY(14deg) rotateX(-8deg);
      }

}




.shadow{
   position: absolute;
   background-image: linear-gradient(to top right, #44484e, #2f3338);
   width: 2em;
   height: 2em;
   transform:translateZ(-130px)
   rotateX(90deg) rotateZ(3deg);
   bottom: 0em;  left: 4em;
   box-shadow: inset 0 0 5px #0d1117, 0 4px 7px #0d1117;
   filter: blur(100px);
}


.cube-top , .cube-left , .cube-right , .cube-front , .cube-back{
  height: 2em;
  width: 2em;
  background-image: linear-gradient(to top right, #44484e, #2f3338);
  position: absolute;
  top: 0;
  bottom: 0;
  box-shadow: inset 0 0 13px #0d1117, 0 1px 4px #0d1117;
  text-align: center;
  font-size: 3rem;
  font-weight: 800;
  line-height: 2;
  text-shadow:0 3px 5px #12151b;     /* profundidad extra */
}

.cube-bottom{
  height: 2em;
  width: 2em;
  background-image: linear-gradient(to top right, #44484e, #2f3338);
  box-shadow: inset 0 0 13px #0d1117;
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: center;
  font-size: 3rem;
  font-weight: 800;
  line-height: 2;
  text-shadow:0 3px 5px #12151b;
}




.cube-front{
  transform: translateZ(1em);
  text-align: center;
  text-shadow:0 3px 5px #12151b;
}

.cube-back{
  transform: translateZ(-1em);
  text-shadow:0 3px 5px #12151b;
}


.cube-top{
  transform: translateY(-1em) rotateX(90deg);
}
.cube-bottom{
  transform: translateY(1em) rotateX(90deg);
}
.cube-right{
  transform: translateX(1em) rotateY(90deg);
}
.cube-left{
  transform: translateX(-1em) rotateY(90deg);
}
/* create the cube */

/*begin preloader responsive */

@media screen and (max-width: 338px){
  .loading-page-responsive {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to right, #060606, #060606,#060606);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    color: #191654;
  }
  
  #svg-responsive {
    height: 200px;
    width: 200px;
    stroke: #FFF;
    fill-opacity: 0;
    stroke-width: 3px;
    stroke-dasharray: 20000;
    animation: drawresponsive 8s ease;
  }

  
 
  .name-container-responsive {
    height: 30px;
    overflow: hidden;
  }
  
  .logo-name-responsive {
    color: #FFF;
    font-size: 20px;
    /* letter-spacing: 12px; */
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-left: 5px;
    font-weight: bolder;
    animation: n 3.5s ease-in-out;
  }


.loading-page{
  display: none;
}

}

@keyframes drawresponsive{
    0%{
      stroke-dashoffset: 20000;
    }
    100%{
      stroke-dashoffset: 0;
    }
  }
  
  
  
  
  
  @keyframes n{
    0%{opacity: 0; transform: translateY(-25px)}
    100%{opacity: 1; transform: translateY(0px)}
  }
  

/* end responsive preloader N*/




html{
    font-size: 60%;
    overflow-x: hidden;
    cursor: url(assets/images/arrow_small.png), auto;
}

body{
    background: #000;
    /* background: var(--bg-color); */
    color: var(--text-color);
}

@keyframes appearheader{
    from{opacity: 0; transform: translateY(-50px);}
    to{opacity: 1; transform: translateY(0px);}
}

.avoidmessage-icon{
    margin: 0 4px 0 0;
    color: #de636f;
    display: flex;
}

/*2025-2026 latest */
#avoidmessage{
    display: none;
    position: fixed;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-color: #FFF;
    color: #2c3240;
    border-left: 4px solid #de636f;
    border-radius: 2px;
    padding: 15px 15px 15px 15px;
    z-index: 9999;
    font-size: 15px;
    font-weight: 600;
    /*top: 14rem;*/
    /*right: 38%;*/
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    transform-origin: center;
    flex-wrap: wrap;
    transition: 0.4s ease;
    /*box-shadow: 0 0 10px rgba(0,0,0,0.2);*/
    gap: 10px;
    max-width: 300px;
    box-shadow: 0 4px 7px #0d1117;
}

.avoidmessage-icon-forbidden{
    margin: 0 4px 0 0;
    color: #de636f;
    display: flex;
}

#avoidmessageforbidden{
    display: none;
    position: fixed;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-color: #FFF;
    color: #2c3240;
    border-left: 4px solid #de636f;
    border-radius: 2px;
    padding: 15px 15px 15px 15px;
    z-index: 9999;
    right: 38%;
    font-size: 15px;
    font-weight: 600;
    top: 14rem;
    flex-wrap: wrap;
    transition: 0.4s ease;
    box-shadow: 0 4px 7px #0d1117;
}



@keyframes appearavoidmessage{
    0%{opacity: 0; transform: scale(0) translate(-50%); left: 50%;}
    25%{opacity: 1; transform: scale(1.07) translate(-50%); left: 50%;}
    50%{opacity: 1; transform: scale(1) translate(-50%); left: 50%;}
    75%{opacity: 1; transform: scale(1.02) translate(-50%); left: 50%;}
    100%{opacity: 1; transform: scale(1) translate(-50%); left: 50%;}
}

@keyframes dissappearavoidmessage{
      0%{opacity: 1; transform: scale(1) translate(-50%); left: 50%;}
      35%{opacity: 1; transform: scale(1.02) translate(-50%); left: 50%;}
      70%{opacity: 1; transform: scale(1) translate(-50%);  left: 50%;}
      100%{opacity: 0; transform: scale(0) translate(-50%);  left: 50%;}
}

@keyframes appearavoidmessageBlur{
    0%{opacity: 0; transform: scale(0) translate(-50%); left: 50%;}
    25%{opacity: 1; transform: scale(1.07) translate(-50%); left: 50%;}
    50%{opacity: 1; transform: scale(1) translate(-50%); left: 50%;}
    75%{opacity: 1; transform: scale(1.02) translate(-50%); left: 50%;}
    100%{opacity: 1; transform: scale(1) translate(-50%); left: 50%;}
}

@keyframes dissappearavoidmessageBlur{
      0%{opacity: 1; transform: scale(1) translate(-50%); left: 50%;}
      35%{opacity: 1; transform: scale(1.02) translate(-50%); left: 50%;}
      70%{opacity: 1; transform: scale(1) translate(-50%);  left: 50%;}
      100%{opacity: 0; transform: scale(0) translate(-50%); left: 50%;}
}

@keyframes appearavoidmessageBlurTop{
    0%{opacity: 0; transform: scale(0) translate(-50%); left: 50%;}
    25%{opacity: 1; transform: scale(1.07) translate(-50%); left: 50%;}
    50%{opacity: 1; transform: scale(1) translate(-50%); left: 50%;}
    75%{opacity: 1; transform: scale(1.02) translate(-50%); left: 50%;}
    100%{opacity: 1; transform: scale(1) translate(-50%);  left: 50%;}
}

@keyframes dissappearavoidmessageBlurTop{
      0%{opacity: 1; transform: scale(1) translate(-50%); left: 50%;}
      35%{opacity: 1; transform: scale(1.02) translate(-50%); left: 50%;}
      70%{opacity: 1; transform: scale(1) translate(-50%); left: 50%;}
      100%{opacity: 0; transform: scale(0) translate(-50%); left: 50%;}
}



@keyframes appearavoidmessageforbidden{
    0%{opacity: 0; transform: scale(0); display: flex;}
    25%{opacity: 1; transform: scale(1.07); display: flex;}
    50%{opacity: 1; transform: scale(1); display: flex;}
    75%{opacity: 1; transform: scale(1.02); display: flex;}
    100%{opacity: 1; transform: scale(1); display: flex}
}

@keyframes dissappearavoidmessageforbidden{
      0%{opacity: 1; transform: scale(1); display: flex}
      35%{opacity: 1; transform: scale(1.02); display: flex;}
      70%{opacity: 1; transform: scale(1); display: flex;}
      100%{opacity: 0; transform: scale(0); display: flex;}
}


@keyframes opacityavoidmessage{
    0%{opacity: 1; transform: scale(1);}
    25%{opacity: 0.5; transform: scale(1)}
    50%{opacity: 0.2; transform: scale(1)}
    75%{opacity: 0; transform: scale(1)}
    100%{opacity: 0; transform: scale(0)}
}

/*2025-2026 latest*/
.shortestspan{
    display: flex;
    align-items: center;
    align-text: center;
    background-color: #FFF;
    color: #2c3240;
    z-index: 9999;
    font-size: 15px;
    font-weight: 600;
    /*margin: 0 0 0 4px;*/
    /*top: 14rem;*/
    /*right: 38%;*/
}


@media screen and (max-width: 690px){
    
#avoidmessage{
    display: none;
    position: fixed;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-color: #FFF;
    color: #2c3240;
    border-left: 4px solid #de636f;
    border-radius: 2px;
    padding: 15px 15px 15px 15px;
    z-index: 9999;
    font-size: 15px;
    font-weight: 600;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    transform-origin: center;
    flex-wrap: wrap;
    flex-direction: column;
    transition: 0.4s ease;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    gap: 10px;
    max-width: 300px;
    /*box-shadow: 0 4px 7px #0d1117;*/
}


#avoidmessageforbidden{
    display: none;
    position: fixed;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-color: #FFF;
    color: #2c3240;
    border-left: 4px solid #de636f;
    border-radius: 2px;
    padding: 15px 15px 15px 15px;
    z-index: 9999;
    right: 10rem;
    font-size: 15px;
    font-weight: 600;
    top: 14rem;
    flex-wrap: wrap;
    transition: 0.4s ease;
    box-shadow: 0 4px 7px #0d1117;
}


.shortestspan-forbidden{
    display: none;
}


}

/*2025-2026*/
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 7% 2rem;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(30px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 7;
    box-shadow: none;
}

    


.logo{
    font-size: 3rem;
    color: var(--text-color);
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s ease;
}


.logo:hover{
    transform: scale(1.1) perspective(400px) rotateY(20deg);
    transform-style: preserve-3d;  
}

logo:focus{
    transform: scale(1.1) perspective(400px) rotateY(20deg);
    transform-style: preserve-3d;
}

.logo span{
    text-shadow: 0 0 25px var(--main-color);
}

/* Solo anima transform + opacity. Nada de display en keyframes */
@keyframes appearnavbar{
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes dissappearnavbar{
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 1; visibility: hidden; }
}

/* opcional, ayuda al rendimiento */
.navbar { will-change: transform, opacity; }


/* Base del link del navbar: conservas tus márgenes y estilos */
/* Texto del navbar (sin cambios de color) */
.navbar a{
  position: relative;
  display: inline-block;
  color: var(--nav-text);
  font-weight: 700;
  font-size: clamp(1rem, 1.1vw + .9rem, 1.6rem);
  padding: .45rem .35rem .7rem;   /* deja espacio para la línea */
  margin: 0 1.1rem;
  text-decoration: none;
  border-bottom: none !important;
  transition: color .25s ease;
  cursor: url(assets/images/hand.png), auto;
}

/* Línea dorada fina que nace del centro (sin glow) */
.navbar a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:.18rem;                  /* sube/baja la línea si quieres */
  width:84%;                      /* ancho relativo al texto */
  height:2px;                     /* grosor FINO */
  border-radius:999px;
  /* Fallback simple: centro dorado, bordes transparentes */
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold) 50%,
    transparent 100%
  );
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}

/* Si hay soporte, suavizamos los bordes del degradado */
@supports (color-mix(in srgb, white 20%, black 80%)) {
  .navbar a::after{
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--gold) 0%,  transparent) 0%,
      color-mix(in srgb, var(--gold) 35%, transparent) 28%,
      var(--gold) 50%,
      color-mix(in srgb, var(--gold) 35%, transparent) 72%,
      color-mix(in srgb, var(--gold) 0%,  transparent) 100%
    );
  }
}

/* estados que muestran la línea */
.navbar a:hover::after,
.navbar a:focus-visible::after,
.navbar a.is-active::after,
.navbar a.active::after,
.navbar a[aria-current="page"]::after{
  transform:translateX(-50%) scaleX(1);
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .navbar a::after{ transition:none; }
}

/* Línea dorada fina que nace del centro + ANIMACIÓN */
.navbar a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:.18rem;
  width:84%;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  transform:translateX(-50%) scaleX(0);   /* ← arranca en 0 */
  opacity:0;                               /* ← y en fade-in */
  transform-origin:center;
  will-change: transform, opacity;
  transition:
    transform .24s cubic-bezier(.22,.61,.36,1),
    opacity   .18s ease-out;
}

/* Estados que muestran la línea (hover/focus/activo) */
.navbar a:hover::after,
.navbar a:focus-visible::after,
.navbar a.is-active::after,
.navbar a.active::after,
.navbar a[aria-current="page"]::after{
  transform:translateX(-50%) scaleX(1);   /* ← crece desde el centro */
  opacity:1;                               /* ← aparece suave */
}

/* (opcional) si quieres un micro-overshoot: cambia 1 por 1.02 arriba */
/*end navbar style*/


/* ACTIVO: texto dorado + subrayado visible */
.navbar a.is-active,
.navbar a[aria-current="page"]{
  color: var(--gold);
}

.navbar a.is-active::after,
.navbar a[aria-current="page"]::after{
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

.menu-icon{
    font-size: 3.6rem;
    color: var(--main-color);
    display: none;
}

section{
    min-height: 100vh;
    padding: 10rem 12% 10rem;
}

/*2025-2026 latest*/
.home{
    /*display: flex;*/
    display: flex;
    align-items: center;
    align-content: center;
    /*gap: 15rem;*/
    height: 100vh;

}


@keyframes homecontent{
    0%{opacity: 0; transform: scale(0)}
    25%{opacity: 0; transform: scale(0)}
    45%{opacity: 0; transform: scale(0)}
    50%{opacity: 0; transform: scale(1.1)}
    100%{opacity: 1; transform: scale(1)}
}


@keyframes homecontentimages{
    0%{opacity: 0; transform: scale(0);  box-shadow: 0 0 25px var(--main-color),
        0 0 50px var(--main-color),
        0 0 100px var(--main-color);}
    25%{opacity: 0; transform: scale(0);  box-shadow: 0 0 25px var(--main-color),
        0 0 50px var(--main-color),
        0 0 100px var(--main-color);}
    45%{opacity: 0; transform: scale(0);  box-shadow: 0 0 25px var(--main-color),
        0 0 50px var(--main-color),
        0 0 100px var(--main-color);}
    50%{opacity: 0; transform: scale(1.1);box-shadow: 0 0 15px var(--main-color),
        0 0 30px var(--main-color),
        0 0 60px var(--main-color);}
    100%{opacity: 1; transform: scale(1);  box-shadow: 0 4px 7px var(--main-color)}
}

/*@keyframes homecontentok{
  0%{opacity: 0; transform: scale(0);}
  25%{opacity: 0; transform: scale(0);}
  45%{opacity: 0; transform: scale(0);}
  50%{opacity: 0; transform: scale(1.1);}
  100%{opacity: 1; transform: scale(1);}
}*/

@keyframes homecontentok{
  0%{opacity: 0; transform: scale(0)}
  10%{opacity: 0; transform: scale(0);}
  20%{opacity: 0; transform: scale(0); }
  40%{opacity: 0; transform: scale(1.1);}
  50%{opacity: 1; transform: scale(1);}
  60%{opacity: 1; transform: scale(1);}
  70%{opacity: 1; transform: scale(1);}
  80%{opacity: 1; transform: scale(1);}
  90%{opacity: 1; transform: scale(1);}
  100%{opacity: 1; transform: scale(1);}
}


/*@keyframes homecontentok{
  0%{opacity: 0; transform: scale(0); background: var(--main-color);outline: solid 3px var(--main-color);border: solid 1px #222733;}
  10%{opacity: 0; transform: scale(0);background: var(--main-color);outline: solid 3px var(--main-color);border: solid 1px #222733;}
  20%{opacity: 0; transform: scale(0); background: var(--main-color);outline: solid 3px var(--main-color);border: solid 1px #222733;}
  40%{opacity: 0; transform: scale(1.1);background: var(--main-color);outline: solid 3px var(--main-color);border: solid 1px #222733;}
  50%{opacity: 1; transform: scale(1); background: var(--main-color);outline: solid 3px var(--main-color);border: solid 1px #222733;}
  60%{opacity: 1; transform: scale(1); background: #33cc53;outline: solid 3px #33cc53;border: solid 1px#33cc53;}
  70%{opacity: 1; transform: scale(1);background: #33cc53;outline: solid 3px #33cc53;border: solid 1px#33cc53;}
  80%{opacity: 1; transform: scale(1); background: #33cc53;outline: solid 3px #33cc53;border: solid 1px#33cc53;}
  90%{opacity: 1; transform: scale(1); background: var(--main-color);outline: solid 3px var(--main-color);border: solid 1px #222733;}
  100%{opacity: 1; transform: scale(1); background: var(--main-color);outline: solid 3px var(--main-color);border: solid 1px #222733;}
}
*/


@keyframes homecontentletter{
    0%{opacity: 0; transform: scale(0)perspective(400px) rotateY(20deg);}
    20%{opacity: 0; transform: scale(0)perspective(300px) rotateY(20deg);}
    40%{opacity: 1; transform: scale(1)perspective(300px) rotateY(20deg);}
    60%{opacity: 1; transform: scale(1)perspective(200px) rotateY(15deg);}
    80%{opacity: 1; transform: scale(1)perspective(100px) rotateY(10deg);}
    100%{opacity: 1; transform: scale(1)perspective(0px) rotateY(0deg);}
}


@keyframes orotation{
    0%{opacity: 1; transform: rotate3d(1,1,1,0deg);transform-origin: center;transform-style: preserve-3d;}
    100%{opacity: 1; transform: rotate3d(1,1,1,360deg); transform-origin: center;transform-style: preserve-3d; ;}
}


/*2025-2026 latest*/
.home-content{
    display: flex;
    flex-direction: column;
    /*align-items: baseline;*/
    text-align: center;
    justify-content: center;
   /* margin: auto 0 0 0;*/
   margin: auto;
}

 

span{
    color: var(--main-color);
}

#last-name{
  color: var(--main-color);
  display: inline-block;
  white-space: nowrap;
}


.logo span{
    color: var(--main-color);
}


.home-content h3{
     margin-bottom: 2rem;
     margin: 1.6rem 0 0 0;
     font-size: 3.5rem;
}

.home-content h1{
    /*font-size: 7rem;
    display: inline-block;
    font-weight: 700;
    margin: 1.5rem 0 0 0;
    line-height: 1;*/
    color: #FFFFFF;
    font-family: 'Barlow Semi Condensed', sans-serif;
    /*font-size: 8.4rem;*/
    font-size: 9rem;
    line-height: 1.071;
    max-width: 900px;
    margin-top: 0;
    margin-bottom: .6rem;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

#hi-there{
    font-size: 2rem;
    margin: 1.5rem 0 2rem 0;
    line-height: 1;
}



.home-content .o-rotation{
    position: absolute;
    display: inline-block;
    animation: orotation 2s infinite linear;
}



.home-img{
    border-radius: 50%;
}

.home-img img{
  position: relative;
  top: 3rem;
  width: 32vw;
  border-radius: 50%;
  /* box-shadow: 0, 0, 25px var(--main-color); */
  
  /*box-shadow: 0 4px 7px var(--main-color);*/
  cursor: pointer;
  transition: 0.4s ease-in-out;
  /*animation: homecontentimages 7s ease-in-out;*/
}

.home-img img:hover{
    filter: drop-shadow(
            0 0 10px rgba(234, 216, 192, .8)
            );
    transition: all 0.4s ease-in-out;
    cursor: url(assets/images/hand.png), auto;
}


.home-img img:focus{
    box-shadow: 0 4px 7px black, inset 0 0 10px #DDD;
    filter: none;
    transition: all 0.4s ease-in-out;
}


.home-content p{
    /*2025-2026 latest*/
    /*font-size: 1.5rem;*/
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.8;
    max-width: 1000px;
}



/* redes sociales */
.social{
  cursor: url(assets/images/hand.png), auto;
}
.social-icons a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4.5rem;
    height: 4.5rem;
    background: #FFF;
    border: 1.5px dashed #000;
    font-size: 2.5rem;
    border-radius: 50%;
    color: var(--main-color);
    margin: 3rem 1.5rem 3rem 0;
    box-shadow: 0 4px 7px black;
    transition: 0.3s ease-in-out;
}


.social-icons a:hover{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4.5rem;
    height: 4.5rem;
    color: var(--text-color);
    background: var(--text-color);
    border: 1.5px dashed #000;
    transform: scale(1.3) translateY(-5px);
    box-shadow: 0 4px 7px black, inset 0 0 10px var(--main-color);
    transition: 0.3s ease-in-out;
    background-color: var(--main-color);
    cursor: url(assets/images/hand.png),auto;
}


.social-icons a:focus{
    color: var(--text-color);
    transform: scale(1.1)translateY(-5px);
    box-shadow: 0 4px 7px black, inset 0 0 3px #222733;
    transition: 0.3s ease-in-out;
    background-color: var(--main-color);
}


.xtwitter{
  color: black;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 4.5rem;
  height: 4.5rem;
  font-size: 2.5rem;
  color: black;
  margin: 5.9rem 1.5rem 3rem 0;
  box-shadow: 0 4px 7px black;
}


.xtwitter:focus{
  color: var(--text-color);
  transform: scale(1.1)translateY(-5px);
  box-shadow: 0 4px 7px black, inset 0 0 3px #222733 !important;
  transition: 0.3s ease-in-out;
  background-color: var(--main-color);
}


.a-xtwitter{
  margin: 50rem 4.5rem 3rem 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  color: black;
}




.btn{
    display: inline-block;
    padding: 1rem 2.8rem;
    background: var(--main-color);
    /*box-shadow: 0 4px 7px #a98b63;*/
    box-shadow: 0 4px 7px transparent;
    transition: all 0.3s ease-in-out;
    border-radius: 4rem;
    font-size: 1.6rem;
    color: black !important;
    border: 2px solid transparent;
    letter-spacing: 0.1rem;
    font-weight: 600;
    transition: 0.3s ease-in-out;
    margin: 0 0 0 4.4rem;
    cursor: pointer;
}


.btn:hover{
    transform: scale(1.1);
    cursor: url(assets/images/hand.png),auto;
}

.btn:focus{
    box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
}



.btn-group{
    display: flex;
    align-items: center;
    gap: 1.5rem;
}


/*2025-2026*/
/*2025-2026*/
@media screen and (max-width: 371px){
    .btn-group{
        display: block !important;
        margin: 0 auto 0 auto;
        position: relative;
    }
    
    .btn-contactar + .btn-about {
    margin-left: auto;
    }
}

/*
.btn-group a:nth-of-type(2){ 
    background-color: black;
    color: var(--main-color);
    border: 2px solid var(--main-color);
    box-shadow: 0 0 25px transparent;
}

.btn-group a:nth-of-type(2):hover{
    box-shadow: 0 0 25px var(--main-color);
    background-color: var(--main-color);
    color: black;
}
*/

.text-animation{
    font-size: 34px;
    font-weight: 600;
    min-width: 280px;
}

.text-animation span{
    position: relative;
}

.text-animation span::before{
    content: "Desarrollador Web";
    color: #FFF;
    animation: words 20s infinite;
}

.text-animation span::after{
    content: "";
    background-color: var(--bg-color);
    position: absolute;
    width: calc(100% + 8px);
    height: 100%;
    border-left: 3px solid var(--bg-color);
    right: -8px;
    animation: cursor 0.6s infinite, typing 20s steps(14) infinite;
}


@keyframes cursor{
    to{
        border-left: 2px solid var(--main-color);
    }
}


@keyframes words{
    0%,
    20%{
        content: "Bilingüe";
    }
    21%,
    40%{
        content: "Administrador de Sistemas";
    }
    41%,
    60%{
        content: "Epecialista en Servidores";
    }
    61%,
    80%{
        content: "Soporte Técnico";
    }
    81%,
    100%{
        content: "Desarrollador Web";
    }
}


@keyframes typing{
    10%,
    15%,
    30%,
    35%,
    50%,
    55%,
    70%,
    75%,
    90%,
    95%{
       width: 0;
    }
    5%,
    20%,
    25%,
    40%,
    45%,
    60%,
    65%,
    80%,
    85%{
       width: calc(100% + 8px);
    }
}

/*@keyframes autoshoweducation{
    0%{
        filter: blur(48px);
    }
    45%, 55%{
        filter: blur(0px);
    }
    100%{
       filter: blur(48px);
    }
}*/



@keyframes autoshowcontactar{
    0%{
        filter: blur(0px);
    }
    100%{
        filter: blur(10px);
    }
}


@keyframes autoshownorge{
    0%{
        filter: blur(30px);
    }
    100%{
        filter: blur(0px);
    }
}


@keyframes autoshowncruztech{
  0%{
    filter: blur(30px);
  }
  100%{
    filte: blur(0px);
  }
}


@keyframes autoshowcomponent{
    from{
        opacity: 0; transform: translateX(-280px) scale(1.05);
    }
    to{
        opacity: 1; transform: translateX(0px) scale(1);
    }
}

/*2025-2026*/
@keyframes autoshowcomponentncruztech{
    from{
        opacity: 0; transform: translateX(-140px) scale(1.05); filter: blur(30px); letter-spacing: 32px;
    }
    to{
        opacity: 1; transform: translateX(0px) scale(1); filter: blur(0px);letter-spacing: 1px;
    }
}


@keyframes autoshowcomponentvertically{
    from{
        opacity: 0; transform: translateY(30px);
    }
    to{
        opacity: 1; transform: translateY(0px) ;
    }
}

@keyframes autoshowchecksvertically{
  0%{opacity: 0; transform: scale(1.9);}
  100%{opacity: 1 ; transform: scale(1);}
}


@keyframes autoshowchecksverticallycontainer{
  0%{opacity: 0; transform: scale(1.9);}
  100%{opacity: 1 ; transform: scale(1);}
}


@keyframes autoshowcomponentverticallycontainer{
  from{
      opacity: 0; transform: translateY(30px);
  }
  to{
      opacity: 1; transform: translateY(0px) ;
  }
}



/*2025 animation timeline*/
/*2025 animation timeline*/
.heading{
    font-size: 8rem;
    text-align: center;
    margin: 5rem 0;
    animation: autoshowcomponent linear  both;
    animation-timeline: view(80% 5%);
}




.education{
    padding: 100px 15px;
    background: var(--second-bg-color);
}


.education h2{
    margin-bottom: 5rem;
}

/*2025 animation timeline*/
.timeline-items{
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

/*2025 animation timeline*/
.timeline-items::before{
    content: "";
    position: absolute;
    width: 5px;
    height: 100%;
    background-color: var(--main-color);
    left: calc(50% - 1px);
    animation: autoshowcomponentvertically both;
    animation-timeline: view(70% 30%);
}


.timeline-item{
    margin-bottom: 40px;
    width: 100%;
    position: relative;
}


.timeline-item:last-child{
    margin-bottom: 0;
}


.timeline-item:nth-child(odd){
    padding-right: calc(50% + 30px);
    text-align: right;
}


.timeline-item:nth-child(even){
    padding-left: calc(50% + 30px);
}
/*2025 animation timeline*/
.timeline-dot{
    height: 21px;
    width: 21px;
    background-color: var(--main-color);
    /*box-shadow: 0 0 25px var(--main-color),
                0 0 50px var(--main-color);*/
    box-shadow: 0 0 25px transparent, 0 0 50px transparent;
    position: absolute;
    left: calc(50% - 8px);
    border-radius: 50%;
    top: 10px;
    animation: autoshowcomponent both;
    animation-timeline: view(70% 30%);
}

/*2025 animation timeline*/
.timeline-date{
    font-size: 20px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 6px 0 15px;
    animation: autoshowcomponentvertically both;
    animation-timeline: view(70% 30%);
}

/*2025 animation timeline*/
.timeline-content{
    background-color: var(--bg-color);
    border: 3px solid var(--main-color);
    padding: 30px 50px;
    border-radius: 2rem;
    /*box-shadow: 0 4px 7px var(--main-color);*/
    box-shadow: 0 4px 7px transparent;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    transform: scale(1);
    animation: autoshowcomponentvertically both;
    animation-timeline: view(70% 30%);
}

.timeline-content:hover{
    transform: scale(1) perspective(400px) rotateY(7deg);
    transform-style: preserve-3d;
    box-shadow: 0 4px 7px black, inset 0 0 10px var(--main-color);
    transition: 0.3s ease-in-out;
    cursor: url(assets/images/hand.png),auto;
}

.timeline-content:focus{
    transform: scale(1) perspective(400px) rotateY(7deg);
    border: 3px solid transparent;
    transform-style: preserve-3d;
    box-shadow: 0 4px 7px black, inset 0 0 10px var(--main-color);
    transition: 0.3s ease-in-out;
    cursor: url(assets/images/hand.png),auto;
}





.timeline-content h3{
    font-size: 20px;
    color: #FFFFFF;
    margin: 0 0 10px;
    font-weight: 500;
}

.timeline-content p{
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 300;
    line-height: 22px;
}


::-webkit-scrollbar{
    width: 15px;
}


::-webkit-scrollbar-thumb{
    background-color: var(--main-color);
}


::-webkit-scrollbar-track{
    background-color: var(--bg-color);
    width: 50px;
}


.services{
    background: var(--bg-color);
    color: black;
}


.services h2{
    margin-bottom: 5rem;
    color: white;
}


.services-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 2.5rem;
}

/*#44484e  #2f3338 */
/*2025 animation timeline*/
.service-box{
    color: #FFF;
    transform: scale(1);
    background-image: linear-gradient(to top right, #2f3338 , #2f3338); 
    height: 300px;
    border-radius: 3rem;
    border: 5px solid transparent;
    cursor: pointer;
    box-shadow: 0 4px 7px black, inset 0 0 15px black;
    transition: 0.4s ease-in-out;
    animation: autoshowcomponentvertically both;
    animation-timeline: view(70% 30%);
}

.service-box:hover{
    background-image: linear-gradient(to top right, #2f3338 , #2f3338);
    color: black;
    border: 5px solid  #2f3338;
    transform: scale(1.03) perspective(400px) rotateY(6deg);
    box-shadow: 0 4px 7px black, inset 0 0 15px black;
    cursor: url(assets/images/hand.png),auto;
}
 


.service-box:focus{
    background-image: linear-gradient(to top right, #2f3338 , #2f3338);
    color: #FFF;
    border: 5px solid #2f3338;
    transform: scale(1.03) perspective(400px) rotateY(6deg);
    box-shadow: 0 4px 7px black, inset 0 0 15px black;
    cursor: url(assets/images/hand.png),auto;
}


.service-box .service-info{
    display: flex;
    color: #FFF;
    flex-direction: column;
    text-align: left;
    max-height: 200px;
    justify-content: left;
    align-items: baseline;
    padding: 5rem 5rem;
}

.service-info h4{
    font-size: 3rem;
    font-weight: 800;
    line-height: 2;
}

.service-info p{
    font-size: 1.6rem;
    font-weight: 600;
    max-height: 100px;
    line-height: 1.7;
    margin: auto;
}

/*2025 animation timeline*/
/* Service-box of service animation */
.service-box-animation{
    transform: scale(1);
    background-image: linear-gradient(to top right, #2f3338 , #2f3338);
    height: 300px;
    border-radius: 3rem;
    border: 5px solid transparent;
    cursor: pointer;
    box-shadow: 0 4px 7px black, inset 0 0 15px black;
    transition: 0.4s ease-in-out;
    animation: autoshowcomponentvertically both;
    animation-timeline: view(70% 30%);
}


.service-box-animation:hover{
    background-image: linear-gradient(to top right,  #2f3338, #2f3338);
    color: #FFF;
    border: 5px solid #2f3338;
    box-shadow: 0 4px 7px black, inset 0 0 15px black;
    transform: scale(1.03) perspective(400px) rotateY(6deg);
    transition: 0.4s ease-in-out;
    cursor: url(assets/images/hand.png),auto;
}

.service-box-animation:focus{
    color: #FFF;
    background-image: linear-gradient(to top right, #2f3338, #2f3338);
    border: 5px solid #2f3338;
    transform: scale(1.03) perspective(400px) rotateY(6deg);
    box-shadow: 0 4px 7px black, inset 0 0 15px black;
    cursor: url(assets/images/hand.png),auto;
}


/*static*/
.service-box-animation .service-info-animation{
    display: flex;
    color: #FFF;
    font-size: 18px;
    flex-direction: column;
    text-align: left;
    max-height: 200px;
    justify-content: left;
    align-items: baseline;
    padding: 5rem 5rem;
}

.service-box-animation .service-info-animation:hover{
    cursor: url(assets/images/hand.png),auto;
}




.service-info-animation h4{
    font-size: 3rem;
    color: #FFF;
    font-weight: 800;
    line-height: 2;
}

.service-info-animation p{
    font-size: 1.6rem;
    font-weight: 600;
    max-height: 100px;
    line-height: 1.7;
    margin: auto;
}


/* Service-box of service animation */

.testimonials{
    background: var(--second-bg-color);
}

.testimonials-box{
    background-size: cover;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.testimonials .heading{
    margin-bottom: 5rem;
}

.testimonials-box img{
    width: 15rem;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    object-fit: cover;
    border: 3px solid var(--main-color);
    box-shadow: 0 0 25px var(--main-color);
}

.wrapper{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 3rem;
}


.testimonial-item{
    min-height: 550px;
    max-width: 450px;
    background: rgba(0, 0, 0, 0.7);
    border: 3px solid rgba(238, 238, 238, 0.2);
    border-radius: 2rem;
    margin: 0 2rem;
    padding: 40px 60px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
    color: #FFFFFF;
    transition: 0.4s ease-in-out;
}


.testimonial-item:hover{
    border: 3px solid var(--main-color);
    transform: translateY(-10px)scale(1.03);
    box-shadow: 0 0 50px var(--main-color);
}

.testimonial-item h2{
    font-size: 2.8rem;
}

.testimonial-item p{
    font-size: 1.3rem;
}

#star{
    color: gold;
    font-size: 2rem;
}

.contact{
    background-color: var(--bg-color)
}

.contact h2{
    margin-bottom: 3rem;
    color: #FFFFFF;
}

.contact form{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin: 5rem auto;
    text-align: center;
}

/*2025 animation timeline*/
.contact form .input-box{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    animation: autoshowcomponentvertically both;
    animation-timeline: view(70% 30%);
}

/*2025-2026 animation timeline*/
.contact form .input-box input,
.contact form .input-box select,  /* <-- mi select del form 202-2026 */
.contact form textarea{
    width: 100%;
    padding: 2.5rem;
    font-size: 1.8rem;
    color: var(--text-color);
    background: var(--second-bg-color);
    border-radius: 2rem;
    border: 2px solid var(--main-color);
    margin: 1.5rem 0;
    resize: none;
    animation: autoshowcomponentvertically both;
    animation-timeline: view(70% 30%);
}

/*2025 animation timeline*/
.contact form .btn{
    margin: 2rem 0 0 0;
    position: relative;
    padding: 1rem 2.8rem;
    font-size: 1.6rem;
    color: black !important;
    letter-spacing: 0.1rem;
    font-weight: 600;
    transform: scale(1);
    box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
    border-radius: 0.4rem;
    overflow: hidden;
    background: #ead8c0;
    outline: 1px solid #a98b63;
    border: solid 2px #010e19;
    transition: all 0.8s ease-in-out;
    animation: autoshownorge both;
    animation-timeline: view(95% auto);
}


  .contact form .btn:hover{
    color: white !important;
    background: #b79f7f;
    outline: 1px solid transparent !important;
    border: solid 2px transparent;
    border-color: #ead8c0;
    box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
    transform: scale(1.01);
    cursor: url(assets/images/hand.png),auto;
    transition: all 0.4s ease-in;
  }

  .contact form .btn:focus{
    color: white !important;
    background: var(--third-color);
    outline: 0px solid transparent !important;
    border: solid 2px transparent !important;
    transform: scale(1);
    box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
  }
/*2025 animation timeline*/
.footer{
    position: relative;
    bottom: 0;
    width: 100%;
    padding: 40px 0;
    background-color: var(--second-bg-color);
    animation: autoshowcomponentvertically both;
    animation-timeline: view(70% 30%);
}


/*2025-2026*/
.footer .social{
    text-align: center;
    padding-bottom: 25px;
    color: var(--main-color);
    display: flex;
    flex-wrap: wrap;
    /*margin: 0 1rem 1rem; */
    /*margin: 2rem 0 0rem 0;*/
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
}

/*2025-2026*/
.footer .social a box-icon {
  width: 2.5rem;
  height: 2.5rem;
  fill: var(--text-color); /* color inicial */
  transition: 0.3s ease-in-out;
}

.footer .social a:hover box-icon, footer .social a:focus box-icon {
  fill: #000; /* color al hacer hover */
}


.footer .social a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4.5rem;
    height: 4.5rem;
    background-color: transparent;
    border: 2px solid var(--main-color);
    font-size: 2.5rem;
    border-radius: 50%;
    color: var(--main-color);
    margin: 3rem 2rem 3rem 0;
    /*box-shadow: 0 4px 7px #a98b63;*/
    box-shadow: 0 4px 7px transparent;
    transition: 0.3s ease-in-out;
}


/*2025-2026 latest follow*/
.footer .social a:hover{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /*width: 4.5rem;
    height: 4.5rem;*/
    color: var(--text-color);
    background-color: var(--main-color);
    border: 2px solid var(--main-color);
    transform: scale(1.3) translateY(-5px);
    box-shadow: 0 4px 7px black, inset 0 0 10px #FFF;
    transition: 0.3s ease-in-out;
    cursor: url(assets/images/hand.png),auto;
}

footer .social a .whatsapp-socials:hover{
    cursor: url(assets/images/hand.png),auto;
}

.whatsapp-socials:hover{
    cursor: url(assets/images/hand.png),auto;
}



.footer .social a:focus{
    color: #000;
    transform: scale(1.1)translateY(-5px);
    box-shadow: 0 4px 7px black, inset 0 0 3px #222733;
    transition: 0.3s ease-in-out;
    background-color: var(--main-color);
    border: 2px solid var(--main-color);
}

  .footer .social a:hover button{
      cursor: pointer;
  }
  
  .footer .social a:focus button{
    cursor: pointer;
    color: #FFF;
    transform: scale(1.1)translateY(-5px);
    box-shadow: 0 4px 7px black, inset 0 0 3px #222733;
    transition: 0.3s ease-in-out;
    background-color:#FFF;
  }




.footer .followme{
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  align-content: center;
  justify-content: center;
  color: #FFF;
  font-size: 2.5rem;
  font-weight: 600;
  margin: 0;
  z-index: 1000
  cursor: url(assets/images/hand.png),auto;
}

/*2025*/
.footer ul{
    margin-top: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1.6;
    /*margin-bottom: 0;*/
    margin-bottom: 15px;
    text-align: center;
}


/*2025*/
.footer ul li a{
    /*color: #8a919c;*/
    color: #FFF;
    border-bottom: 2px solid transparent;
    transition: 0.3s ease-in-out;
}

.footer ul li a:hover{
    border-bottom: 3px solid var(--main-color);
    cursor: url(assets/images/hand.png),auto;
}

@keyframes appearlocation{
    0%{opacity: 0; transform:scale(0)}
    25%{opacity: 0;transform:scale(1.03)}
    50%{opacity: 0; transform:scale(1)}
    75%{opacity: 0; transform:scale(1.03)}
    100%{opacity: 0;transform:scale(1)}
}


.hreficons{
    color: var(--text-color);
}

.hreficons:hover{
    color: var(--main-color);
    cursor: url(assets/images/hand.png),auto;
}




.footer ul li .buttoncontainerlocation{
    font-size: 25px;
    transform: scale(1);
    color: #ead8c0;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.footer ul li .buttoncontainerlocation:hover{
    transform: scale(1.1);
    color: #ead8c0;
    background: transparent;
    border: 0;
    border-bottom: 3px solid #ead8c0;
    text-decoration: none;
    cursor: url(assets/images/hand.png),auto;
}

.footer ul li .buttoncontainer{
    font-size: 25px;
    transform: scale(1);
    color: #ead8c0;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.footer ul li .buttoncontainer:hover{
    transform: scale(1.1);
    color: #ead8c0;
    background: transparent;
    border: 0;
    border-bottom: 3px solid #ead8c0;
    text-decoration: none;
    cursor: url(assets/images/hand.png),auto;
}

.footer ul li{
    display: inline-block;
    padding: 0 15px;
}

/*2025 footer*/
.footer .copyright{
    /*margin: 17px 0 0 0;*/
    margin: 23px 0 0 0;
    text-align: center;
    font-size: 16px;
    color: #71767b;
}
.footer .developer-copyright{
    /*margin: 1px 0 40px 0;*/
    margin: 0.2rem 0 2rem 0;
    text-align: center;
    font-size: 16px;
    color: #71767b;
}

.footer #ncruztech-footer{
    text-transform: uppercase;
    font-weight: bold;
    color: #71767b;
}

.redirect_button{
    margin: 28px 4px 0 0;
    text-align: center;
    font-size: 16px;
    color: #71767b;
}

/*2025-2026 latest*/
.btn-contactar{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 1rem 2.8rem;
  font-size: 1.6rem;
  color: black !important;
  letter-spacing: 0.1rem;
  font-weight: 600;
  transform: scale(1);
  box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
  border-radius: 0.4rem;
  overflow: hidden;
  background: #ead8c0;
  outline: 1px solid #a98b63;
  border: solid 2px #010e19;
  transition: all 0.8s ease-in-out;
  margin: 11px auto;
  transition: 0.3s ease-in-out;
  }




  .btn-contactar:hover{
    color: #000;
    background: #b79f7f;
    outline: 1px solid #a98b63;
    border: solid 2px #010e19;
    box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
    transform: scale(1);
    cursor: url(assets/images/hand.png),auto;
    /*text-shadow: 0px 1px rgba(255, 255, 255, 0.3);*/
    /*transition: all 0.4s ease-in;*/
    transition: 0.3s ease-in-out;
  }

 .btn-contactar:focus{
    color: #000 !important;
    background: var(--third-color);
    outline: 1px solid #000;
    border: solid 2px #000;
    /* box-shadow: 0 0 0 black, inset 0 0 10px #222733; */
    transform: scale(1);
    box-shadow: 0 4px 7px black, inset 0 0 15px #222733;
    text-shadow: 0px 1px rgba(255, 255, 255, 0.3);
  }
  
  
/*2025-2026*/
  .md_alert_btn_close {
    color: black;
    font-size: 13px;
    display: block;
    font-weight: bold;
    width: 30%;
    text-decoration: none;
    text-align: center;
    padding: 0 auto;
    /*margin: 0 auto 18px auto;*/
    margin: 38px auto 18px auto;
    border-radius: 0.4rem;
    overflow: hidden;
    background: #ead8c0;
    outline: 1px solid #a98b63;
    border: solid 2px #010e19;
    padding: 5px 5px;
    transform: scale(1);
    box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
    transition: all .6s ease-in;
  }

  .container_norge{
    background-size: cover;
    display: flex;
    object-fit: cover;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

/*2025*/
  .container_ncruztech_logo{
    background-size: cover;
    display: flex;
    /*2025*/
    position: relative;
    object-fit: cover;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 20px -198px;
    z-index: 3;
  }
  /*2025 ncruztech animation timeline*/
  .container_ncruztech_logo img{
    position: relative;
    /*2025*/
    display: flex;
    /* width: 30rem; */
    width: 15rem;
    top: 2rem;
    z-index: 3;
    margin: 0 0 18px 0;
    object-fit: cover;
    animation: autoshowncruztech both;
    animation-timeline: view(65% auto);
  }

/*2025 animation timeline*/
  .container_norge img{
    position: relative;
    width: 30rem;
    top: 2rem;
    z-index: 2;
    object-fit: cover;
    animation: autoshownorge both;
    animation-timeline: view(65% auto);
  }

  .wrapper_norge{
    background-size: cover;
    display: flex;
    object-fit: cover;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  /*2025-2026*/
  .wrapper_norge img{
    /*position: relative;*/
    /*width: 40rem;*/
    width:6rem;
    top: 0;
    left: 0;
    z-index: 2;
    object-fit: cover;
    margin: 1rem 3rem;
    display: flex;
    position: absolute;
    /*margin: 0 0 0 -2rem;*/
    /* margin: 0 0 0 -5rem; */
  }
  
  

  /* begin styles for javascript*/

  @keyframes rotating{
    0%{opacity: 1; transform: translateY(0px) rotateY(0deg);}
    25%{opacity: 1; transform: translateY(-10px) rotateY(180deg);}
    50%{opacity: 1; transform: translateY(0px) rotateY(0deg);}
    75%{opacity: 1; transform: translateY(-10px) rotateY(180deg);}
    100%{opacity: 1; transform: translateY(0px) rotateY(0deg);}
  }
  
  
  @keyframes welcomemessagecontent{
     0%{opacity: 1; transform: translateZ(200px);}
     100%{opacity: 1; transform: translateZ(0px);}
  }
  
  
  .my-own-alert i.fa-info-circle{
      animation: inactiverouteranimation 18s infinite; 
  }
  
  
    .alert{
      padding: 5px 20px;
      margin-top: 20px;
      margin-bottom:10px;
      border:1px solid #dd7070;
      background-color: #dd7070;
      border-radius:4px;
      display: block !important;
      margin-right: auto;
      margin-left: auto;
      height: auto !important;
      width: auto !important;  
    }
  
    .unomasparacristo{
      margin-top: 10px;
      font-size: 30px;
      margin-bottom: 4px;
      font-weight: bold;
      color: #FFF;
      animation: animaunomas_para_cristo .9s ease-in-out;
      animation: unomas_para_cristo .9s ease-in-out infinite;
  
    }
  
  
  .mdalert{
    align-items: center;
    backdrop-filter: blur(5px);
    background-color: rgba(0,0,0, .5);
    color: #FFF;
    display: none;
    justify-content: center;
    height: 100vh;
    position: fixed !important;
    width: 100%;
    z-index: 9999;
    /*animation: welcomemessagecontent 1s ease-in-out;*/
  }
  
  
  
  .mdalert_terms{
    align-items: center;
    backdrop-filter: blur(5px);
    background-color: rgba(0,0,0, .5);
    color: #FFF;
    display: none;
    justify-content: center;
    height: 100vh;
    position: fixed !important;
    width: 100%;
    z-index: 9999;
    /*animation: welcomemessagecontent 1s ease-in-out;*/
  }
  
  
  /* 2025 */
  /* @keyframes welcomemessage{
    0%{opacity: 0; transform: scale(0) perspective(0px) rotate(0deg); }
    25%{opacity: 1; transform: scale(1) perspective(400px) rotate(-20deg);}
    50%{opacity: 1; transform: scale(1.2) perspective(0px) rotate(20deg);}
    75%{opacity: 1; transform: scale(1.2) perspective(400px) rotate(20deg);}
    100%{opacity: 1; transform: scale(1) perspective(0px) rotate(0deg);}
  }  */

  @keyframes welcomemessage{
    0%{opacity: 0; transform: scale(0); }
    50%{opacity: 1; transform: scale(1);}
    70%{opacity: 1; transform: scale(1);}
    100%{opacity: 1; transform: scale(1);}
  } 


.md_border_line_alert{
  border: none;
  height: 1px;
  position: absolute;
  display: flex;
  margin: 25.4rem auto 0 auto;
  background: linear-gradient(to right, transparent, var(--third-color), transparent);
  width: 100%;
}
  
  
  @media screen and (max-width: 768px){
  .md_alert_inside{
  /*backgound-image: linear-gradient(to op right. var(--bg-color), #1c3044);*/
  border-left: 4px solid var(--third-color);
  border-right: 1px solid rgba(212, 167, 89, 0.3);
  border-bottom: 1px solid rgba(212, 167, 89, 0.3);
  border-top: 1px solid rgba(212, 167, 89, 0.3);
  background: #121212;
  width: calc(94%) !important;
  box-shadow: 5px 5px 7px black;
  }
  
  .md_alert_inside_terms{
  /*background-image: linear-gradient(to top right, var(--bg-color) , #1c3044);*/
  width: calc(94%) !important;
  border-left: 4px solid var(--third-color);
  border-right: 1px solid rgba(212, 167, 89, 0.3);
  border-bottom: 1px solid rgba(212, 167, 89, 0.3);
  border-top: 1px solid rgba(212, 167, 89, 0.3);
  background: #121212; 
  box-shadow: 5px 5px 7px black;
  }
  
  
  .iconimage{
  width: 105px !important;
  height: 105px !important;
  display: block;
  object-fit: cover;
  background-size: 100px 100px;
  align-content: center;
  text-align: center;
  margin: 12px auto 25px 15px;
  border-radius: 50%;
  border: solid 0.9px #212529;
  box-shadow: 0 4px 7px black;
  }
  
  .iconimage_terms{
  width: 105px !important;
  height: 105px !important;
  display: block;
  object-fit: cover;
  background-size: 100px 100px;
  align-content: center;
  text-align: center;
  margin: 12px auto 25px 15px;
  border-radius: 50%;
  border: solid 3px #212529;
  outline: solid 2.4px #ead8c0;
  }
  
  .iconimagelogo{
  width: 105px !important;
  height: 105px !important;
  display: block;
  object-fit: cover;
  background-size: 100px 100px;
  align-content: center;
  text-align: center;
  margin: 12px auto 25px 15px;
  }
  
  .iconimagelogo_terms{
  width: 105px !important;
  height: 105px !important;
  display: block;
  object-fit: cover;
  background-size: 100px 100px;
  align-content: center;
  text-align: center;
  margin: 12px auto 25px 15px;
  }
  
  .iconimagelogo_thanks{
  width: 0px !important;
  height: 0px !important;
  display: none;
  object-fit: cover;
  background-size: 100px 100px;
  align-content: center;
  text-align: center;
  margin: 12px auto 25px 15px;
  }
  

  
  #tag_social_networks{
  font-weight: 600;
  background-color: #FFF;
  color: #222733 !important;
  border-radius: 5px;
  border: solid 2px #FFF;
  padding: 4px 7px;
  margin-left: 35px;
  cursor: pointer;
  transition: all 0s ease-in-out;
  }
  
  
  
  #follow{
    display: inline-block;
  }
  
  
  #tag_social_networks{
    margin-left: 14px !important;
  }
  
  #tag_social_networks:focus{
    margin-left: 14px !important;
    transition: all 0s ease-in-out;
  }
  
  #tag_social_networks:active{
    margin-left: 14px !important;
    transition: all 0s ease-in-out;
  }
  .navbar{
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 1500%;
    padding: 1rem 3%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(30px);
    border-bottom-left-radius: 2rem;
    border-bottom: 2px solid var(--main-color);
    display: none;
    transition: 0.4s ease-in-out;
}
  
  }
  
  
  @media screen and (min-width: 768px){
    #follow{
    display: none;
  }

  .md_alert_inside{
    border-left: 4px solid var(--third-color);
    border-right: 1px solid rgba(212, 167, 89, 0.3);
    border-bottom: 1px solid rgba(212, 167, 89, 0.3);
    border-top: 1px solid rgba(212, 167, 89, 0.3);
    background: #121212;
  }

  .navbar{
    transition: 0.3s ease-in-out;
    transform: translateX(0px);
  }
   
  }


  @media screen and (min-width: 800px) and (max-width: 350px){
    .md_alert_inside{
      /*backdrop-filter: blur(20px);*/
      border-radius: 12px;
      width: 388px;
      border-left: 4px solid var(--third-color);
      border-right: 1px solid rgba(212, 167, 89, 0.3);
      border-bottom: 1px solid rgba(212, 167, 89, 0.3);
      border-top: 1px solid rgba(212, 167, 89, 0.3);
      background: #121212;
      /*animation: welcomemessage .8s ease-in-out;*/
      box-shadow: 5px 5px 7px black;
      transition: all .5s cubic-bezier(0.68, -2, 0.265, 1.55) , border-top 0.5s ease-in-out;
    }
  }
  /*2025-2026*/
  .md_alert_inside{
    border-radius: 12px;
    width: 388px;
   /* animation: welcomemessage .4s ease-in-out;*/
    box-shadow: 5px 5px 7px black;
    border-left: 4px solid var(--third-color);
    border-right: 1px solid rgba(212, 167, 89, 0.3);
    border-bottom: 1px solid rgba(212, 167, 89, 0.3);
    border-top: 1px solid rgba(212, 167, 89, 0.3);
    background: #121212;
    position: absolute;
    transition: all .5s cubic-bezier(0.68, -2, 0.265, 1.55) , border-top 0.5s ease-in-out;
  }
  
  .md_alert_inside:hover{
    background-size: 250% 200%;
    border-left: 4px solid var(--third-color);
    box-shadow: 5px 5px 7px black;
  }

  .md_alert_inside:focus{
    /*background-image: linear-gradient(to top right, var(--bg-color) ,#131313);*/
    background-size: 250% 200%;
    border-left: 4px solid var(--third-color);
    box-shadow: 5px 5px 7px transparent;
  }
  
  .md_alert_content{
    color: #333;
    box-sizing: border-box;
    overflow: hidden;
    padding: 24px;
    width: 100%;
    /*animation: welcomemessagecontent .4s ease-in-out;*/
  }
  
  .md_alert_content_thanks{
    color: #333;
    box-sizing: border-box;
    overflow: hidden;
    padding: 24px;
    width: 100%;
    /*animation: welcomemessagecontent .4s ease-in-out;*/
  }
  
 
  /*2025-2026 latest ok*/

.container-all-alerts {
  font-size: 16px;
  font-weight: 700;
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  min-height: 80px;
  /*
  margin: 14px auto 105px auto;
  */
 /* align-items: flex-start;*/ /* o flex-end si querés forzar hacia la derecha */
 /*justify-content: flex-end;*/ /* ALINEA LOS HIJOS A LA DERECHA */
  margin: 0;           
  transition: none; 
}

.message_alert {
    max-width: 90%; 
  /* evita que se pase de ancho en móvil */
 /* width: fit-content; /* hace que el ancho se ajuste al contenido */
  /*margin-left: 40%; /* este valor controla qué tan a la derecha queda */
    font-weight: 700;
    color: #FFF;
    display: flex;       /* Activa el diseño en fila (uno al lado del otro) */
    align-items: center; /* Centra verticalmente los elementos */
    flex-direction: column;
    list-style: none;
    position: absolute;
    /*top: 31%;*/
    top: 28%;
    left: 59.4%;
    transition: 0.3s ease-in-out;
    border-bottom: solid 2px transparent;
}

.message_alert:hover{
border-bottom: solid 2px #B08D57;
}

  
  h5{
    color: #FFF;
  }
  
  
  .h5alert{
    font-size: 16px;
    font-weight: 700;
    margin: 10px 0 5px !important;
    color: #FFF;
    transform: scale(1);
  }
  
  .ul_alert{
    /*margin: 16px 0 0 0;
    padding: 0px;*/
    display: flex;       /* Activa el diseño en fila (uno al lado del otro) */
    align-items: center; /* Centra verticalmente los elementos */
    flex-direction: column;
    list-style: none;
    color: #FFF;
    gap: 12px;
    /*position: relative;*/
    position: absolute;
    /*top: 37%*/
    top: 38%;
    left: 57%;
    cursor: url(assets/images/hand.png),auto;
  }
  
  
  /*2025-2026 latest*/
  .li_alert{
  font-size: 16px;
  /*margin: 0 auto 17px auto;*/
  display: block;
  /*position: relative;*/
  position: relative;
  text-decoration: none;
  color: #FFF;
  font-weight: 700;
  border-bottom: solid 1px transparent;
  right: 1.5%; 
  transition: 0.3s ease-in-out;
  }
  
  
  .li_alert:hover{
  font-size: 16px;
  display: block;
  position: relative;
  text-decoration: none;
  color: #FFF;
  font-weight: 700;
  border-bottom: solid 1px #FFF;
  cursor: pointer;
  }
  
  /*2025-2026 latest*/
  .li_alert_2{
  font-size: 16px;
  /*margin: 0 auto 17px auto;*/
  display: block;
  /*position: relative;*/
  position: relative;
  text-decoration: none;
  color: #FFF;
  font-weight: 700;
  right: 8%;
  transition: 0.3s ease-in-out;
  border-bottom: solid 1.5px transparent;
  }
  
  
  .li_alert_2:hover{
  font-size: 16px;
  display: block;
  position: relative;
  text-decoration: none;
  border-bottom: solid 1.5px #FFF;
  color: #FFF;
  font-weight: 700;
  cursor: pointer;
  }
/*2025-2026*/
.li_alert_3{
  font-size: 16px;
  display: block;
  position: relative;
  text-decoration: none;
  color: #FFF;
  font-weight: 700;
  left: 8%;
  transition: 0.3s ease-in-out;
  border-bottom: solid 1.5px transparent;
  }
  
  
  .li_alert_3:hover{
  font-size: 16px;
  display: block;
  position: relative;
  text-decoration: none;
  border-bottom: solid 1.5px #FFF;
  color: #FFF;
  font-weight: 700;
  cursor: pointer;
  }

  
  
  .icon_alert{
    margin: 2px 4px 0 0;
    color: #ead8c0;
    position: relative;
  }
  
/*2025-2026 whatssapp*/
  .icon_alert_my_whatssapp_contact{
    margin: 0px 6px 0 0;
    color: #7d8b98;
    position: relative;
    display: inline-block;
  }
  
  
  .icon_alert_my_twitter_contact{
    margin: 2px 4px 0 0;
    color: #7d8b98;
    position: relative;
    display: inline-block;
  }
  
  .icon_alert_my_telegram_contact{
    margin: 2px 4px 0 0;
    color: #7d8b98;
    position: relative;
    display: inline-block;
  }

/*2025-2026 latest*/
  .icon_alert_location{
    margin: 2px 4px 0 0;
    color: var(--main-color);
    position: relative;
    display: inline-block;
  }
  
  
  .btn-show{
    display: flex;
    color: black;
    background-color: #FFF;
    top: 0;
    float: right;
    width: 100%;
  }
  
  
  .md_alert_footer{
    display: block;
    width: 100%;
  }
  
  
  /*2025-2026 latest*/
  .md_alert_btn_close{
    color:  black;
    font-size: 13px;
    display: block;
    font-weight: bold;
    width: 30%;
    text-decoration: none;
    text-align: center;
    /*margin: 0 auto 18px auto;*/
    /*margin-bottom: 29px;*/
    /*margin-top: 1rem;*/
    /*margin-top:3.4rem;
    margin-bottom: 2rem;*/
    margin-top: 3rem;
    margin-bottom: 2.3rem;
    border-radius: 0.4rem;
    overflow: hidden;
    background: #ead8c0;
    outline: 1px solid #a98b63;
    border: solid 2px #010e19;
    padding: 5px 5px;
    transform: scale(1);
    box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
    transition: all .3s ease-in-out;
  }
  
  .md_alert_btn_close:hover{
    font-size: 13px;
    color:  #000;
    width: 30%;
    font-weight: bold;
    display: block;
    padding: 5px 5px;
    text-decoration: none;
    text-align: center;
    background: #b79f7f;
    outline: 1px solid #a98b63;
    border: solid 2px #010e19;
    box-shadow: 0 4px 7px black, inset 0 0 10px #222733;
    transform: scale(1);
    cursor: url(assets/images/hand.png),auto;
  }
  
  .md_alert_btn_close:focus{
      color: #000;
      background: var(--third-color);
      outline: 1px solid #a98b63;
      border: solid 2px #010e19;
      transform: scale(1);
      box-shadow: 0 4px 7px black, inset 0 0 18px #222733;
      text-shadow: 0px 1px rgba(255, 255, 255, 0.3);
      cursor: url(assets/images/hand.png),auto;
      transition: all .3s ease-in-out;
  }
  
  /*2025-2026*/
@keyframes locationIndicator {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
  60% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}


  @keyframes appeardialoge{
    0%{opacity: 0; transform: translateY(-60px);}
    100%{opacity: 1;transform: translateY(0px);}
  }

  @keyframes appearheader{
    0%{opacity: 0; transform: translateY(-180px);}
    100%{opacity: 1; transform: translateY(0px);}
 }
  
  
  
  @keyframes welcomemessageimages{
     0%{opacity: 0; transform: translateY(-180px);}
     100%{opacity: 1; transform: translateY(0px);}
  }
  
  
  @keyframes welcomemessageimagesok{
     0%{opacity: 0; transform: rotateY(-180deg); backdrop-filter: blur(7px);}
     100%{opacity: 1; transform: rotateY(0deg);}
  }
  
  
  /*2025-2026 latest*/
  .iconimage{
  display: block;
  height: 107px;
  width: 107px;
  object-fit: cover;
  background-size: 100px 100px;
  align-content: center;
  text-align: center;
  /*margin: 25px auto 25px 15px;*/
  border-radius: 50%;
  border: solid 0.9px #212529;
  box-shadow: 0 4px 7px black;
  /* margin: 31px 0 0 4px;*/
  /*margin: 4.6rem 0 0 1rem;*/
  margin: 5.4rem 0 0 1rem;
  }
  
  .iconimage{
    transform: rotate(0deg);
  
    }
  
  
    .iconimagelogo{
  display: block;
  height: 107px;
  width: 107px;
  object-fit: cover;
  background-size: 100px 100px;
  align-content: center;
  text-align: center;
  margin: 12px auto 25px 15px;
  }
  
  .iconimagelogo{
    transform: rotate(0deg);
  }
  
  
  .md_alert_footer_other_btns{
    margin: 0 0 0 7%;
    width: 86%;
  }
  
  a.btn{
    color: #FFF;
    border: 0px;
    display: block;
    border-radius: 18px;
    margin: 0 0 24px 0;
    width: 100%;
    text-transform: uppercase;
    -webkit-box-shadow: 2px 12px 12px 0px rgba(0,0,0,0.15);
    box-shadow: 2px 12px 12px 0px rgba(0,0,0,0.15);
  }


  
  .message_alert .my-contact{
    color: #FFF;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
  }
  
  .my-contact{
  color: #FFF;
  text-decoration: none;
  transition: all 0.4s ease-in-out;
  display: flex;
  /*2025-2026 latest*/
  align-items: center;
  list-style: none;
  color: #FFF;
  position: absolute;
  width: 100%;
  }
  
  
  .message_alert .my-contact:hover{
    color: #FFF !important;
    cursor: url(assets/images/hand.png),auto;
  }
  
  
  
  .message_alert .my-contact-networks{
    color: #FFF;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
  }
  
  .my-contact-networks{
  color: #FFF;
  text-decoration: none;
  transition: all 0.4s ease-in-out;
  }
  
  
  .message_alert .my-contact-networks:hover{
    color: #FFF !important;
  }
  
  
    @keyframes  hovericon{
    0% { transform: rotate(0) scale(1.2) translateY(-7px); }
    5% { transform: rotate(30deg) scale(1.2) translateY(-7px); }
    10% { transform: rotate(-28deg) scale(1.2) translateY(-7px); }
    15% { transform: rotate(34deg) scale(1.2) translateY(-7px); }
    20% { transform: rotate(-32deg) scale(1.2) translateY(-7px); } 
    25% { transform: rotate(-1deg) scale(1.2) translateY(-7px); }
    30% { transform: rotate(1deg) scale(1.2) translateY(-7px); }
    35% { transform: rotate(0) scale(1) translateY(0px);}
    100% { transform: rotate(0) scale(1) translateY(0px);}
  }

  @keyframes  rotated{
    0% { transform: rotateY(0) scale(1.2); }
    0% { transform: rotateY(45deg) scale(1.2) ;}
    100% { transform: rotateY(0) scale(1) ;}
  }

  /* 2024 -*/

.message_alert .my-contact{
    transition: all 0.4s ease-in-out;
    border-bottom: solid 1.5px transparent;
  }
  
  .message_alert:hover .my-contact{
    cursor: url(assets/images/hand.png),auto;
    transition: 0.3s ease-in-out;
    border-bottom: solid 1.5px #FFF !Important;
  }

    .message_alert:focus .my-contact{
    cursor: url(assets/images/hand.png),auto;
    transition: 0.3s ease-in-out;
    border-bottom: solid 1.5px #FFF !Important;
  }

 
  .message_alert .my-contact .icon_alert_my_whatssapp_contact{
    transition: all 0.4s ease-in-out;
    color: #33cc53 !important;
  }
  
  .message_alert .my-contact:hover .icon_alert_my_whatssapp_contact{
    transform: scale(1) rotate(30deg);
    color: #33cc53 !important;
    cursor: url(assets/images/hand.png),auto;
    transition: 0.3s ease-in-out;
  }
  
  
  
  .message_alert .my-contact:focus .icon_alert_my_whatssapp_contact{
    transform: scale(1) rotate(30deg);
    color: #33cc53 !important;
    cursor: url(assets/images/hand.png),auto;
  }


  
  .message_alert:hover .my-contact .icon_alert_my_whatssapp_contact{
    transform: scale(1.1) translateY(-3px) rotate(30deg);
    color: #33cc53 !important;
    cursor: url(assets/images/hand.png),auto;
    transition: 0.3s ease-in-out;
  }
  
  
  
  .message_alert:focus .my-contact .icon_alert_my_whatssapp_contact{
    transform: scale(1.1) translateY(-3px) rotate(30deg);
    color: #33cc53 !important;
    cursor: url(assets/images/hand.png),auto;
  }

  
  
  .message_alert .my-contact-networks .icon_alert_my_twitter_contact{
    transition: all 0.4s ease-in-out;
    color: #1d9bf0 !important;
  }
  
  .message_alert .my-contact-networks:hover .icon_alert_my_twitter_contact{
    transform: scale(1.1) translateY(-3px) rotate(30deg);
    cursor: url(assets/images/hand.png),auto;
    color: #1d9bf0 !important;
  }
  
  
  
  .message_alert .my-contact-networks:focus .icon_alert_my_twitter_contact{
    transform: scale(1.1) translateY(-3px) rotate(30deg);
    color: #1d9bf0 !important;
    cursor: url(assets/images/hand.png),auto;
  }
  
  
  @keyframes  hovericon{
    0% { transform: rotate(0) scale(1.2) translateY(-7px); }
    5% { transform: rotate(30deg) scale(1.2) translateY(-7px); }
    10% { transform: rotate(-28deg) scale(1.2) translateY(-7px); }
    15% { transform: rotate(34deg) scale(1.2) translateY(-7px); }
    20% { transform: rotate(-32deg) scale(1.2) translateY(-7px); } 
    25% { transform: rotate(-1deg) scale(1.2) translateY(-7px); }
    30% { transform: rotate(1deg) scale(1.2) translateY(-7px); }
    35% { transform: rotate(0) scale(1) translateY(0px);}
    100% { transform: rotate(0) scale(1) translateY(0px);}
  }

 /*2025-2026 whatsapp*/
  .my-contact .icon_alert_my_whatssapp_contact{
    /*margin: 4px 6px 0 0;*/
    color: #7d8b98;
    position: relative;
    display: inline-block;
    transition: all 0.4s ease-in-out;
    transform: scale(1);
  }

 .my-contact:hover .icon_alert_my_telegram_contact{
    transform: scale(1.1) translateY(-3px) rotate(30deg);
    cursor: url(assets/images/hand.png),auto;
  }
 .my-contact:focus .icon_alert_my_telegram_contact{
    transform: scale(1.1) translateY(-3px) rotate(30deg);
    cursor: url(assets/images/hand.png),auto;
  }
  
  /*2025-2026 li linkedinnn*/
  .li_alert .icon_alert_my_linkedin_contact{
    margin: 2px 4px 0 0;
    transition: all 0.4s ease-in-out;
    transform: scale(1);
    color: #0077B5 !important;
    position: relative;
    display: inline-block;
  }
  
  
  .li_alert:hover .icon_alert_my_linkedin_contact{
    transform: scale(1.1) translateY(-5px);
    color: #0077B5!important;
    cursor: url(assets/images/hand.png),auto;
  }
  
  .li_alert:focus .icon_alert_my_linkedin_contact{
    transform: scale(1.1) translateY(-5px);
    color: #0077B5 !important;
    cursor: url(assets/images/hand.png),auto;
  }
  
  .li_alert:focus-within .icon_alert_my_linkedin_contact{
    color: #0077B5 !important;
    cursor: url(assets/images/hand.png),auto;
  }
  /*end 2025-2026 li linkedin*/
  
  .li_alert .icon_alert_my_telegram_contact{
    transition: all 0.4s ease-in-out;
    transform: scale(1);
    color: #0088cc !important;
  }
  
  
  .li_alert:hover .icon_alert_my_telegram_contact{
    transform: scale(1.1) translateY(-3px) rotate(30deg);
    color: #0088cc !important;
    cursor: url(assets/images/hand.png),auto;
  }
  
  .li_alert:focus .icon_alert_my_telegram_contact{
    transform: scale(1.1) translateY(-3px) rotate(30deg);
    color: #0088cc!important;
    cursor: url(assets/images/hand.png),auto;
  }
  
  .li_alert:focus-within .icon_alert_my_telegram_contact{
    color: #0088cc !important;
    cursor: url(assets/images/hand.png),auto;
  }
  
  
  .li_alert_2 .icon_alert_my_telegram_contact{
    transition: all 0.4s ease-in-out;
    transform: scale(1);
    color: #FFF !important;
  }
  
  
  .li_alert_2:hover .icon_alert_my_telegram_contact{
    transform: translateY(-2px) scale(1.1) !Important;
    color: #FFF!important;
    cursor: url(assets/images/hand.png),auto;
  }
  
  .li_alert_2:focus .icon_alert_my_telegram_contact{
    transform: translateY(-2px) scale(1.1) !Important;
    color: #FFF !important;
    cursor: url(assets/images/hand.png),auto;
  }
  
  .li_alert_2:focus-within .icon_alert_my_telegram_contact{
    color: #FFF !important;
    cursor: url(assets/images/hand.png),auto;
  }
  
  .ul_alert .li_alert{
    color: #FFF !important;
    transition: all 0.4s ease-in-out;
  }
  
  .ul_alert .li_alert:hover{
    color: #FFF !important;
    cursor: url(assets/images/hand.png),auto;
  }

/*2025-2026*/
  .li_alert_3 .icon_alert_location{
    transition: all 0.4s ease-in-out;
    transform: scale(1);
    color: var(--main-color);;
    animation: locationIndicator 1.2s ease-in-out infinite;
    transition: 0.3s ease-in-out;
  }
  
  
  .li_alert_3:hover .icon_alert_location{
    color: var(--third-color) !Important; /* dorado más brillante */
    transform: translateY(-2px) scale(1.1) !Important;
    cursor: url(assets/images/hand.png),auto;
  }
  
  .li_alert_3:focus .icon_alert_location{
    transform: scale(1) rotate(30deg);
    color: var(--main-color);
    cursor: url(assets/images/hand.png),auto;
  }
  
  
  @media screen and (max-width: 416px){
  .md_alert_inside{
  */background-image: linear-gradient(to top right, var(--bg-color) , #131313);*/
  background-image: none;
  background-size: 250% 200%;
  width: calc(94%) !important;
  border-left: 4px solid var(--third-color);
  border-right: 1px solid rgba(212, 167, 89, 0.3);
  border-bottom: 1px solid rgba(212, 167, 89, 0.3);
  border-top: 1px solid rgba(212, 167, 89, 0.3);
  background: #121212;
  box-shadow: 5px 5px 7px black;
  z-index: 9999;
  }

  .md_alert_inside:focus{
    background-image: linear-gradient(to top right, var(--bg-color) , #131313);
    background-size: 250% 200%;
    width: calc(94%) !important;
    transform: scale(1);
    border-left: solid 4px var(--main-color);
    box-shadow: 5px 5px 7px black;
     z-index: 9999;
    }
  

  }
  

 
  
  @media screen and (min-width: 554px) and  (max-width: 769px){
    .md_alert_inside{
        width: 62% !important;
        border-left: 4px solid var(--third-color);
        border-right: 1px solid rgba(212, 167, 89, 0.3);
        border-bottom: 1px solid rgba(212, 167, 89, 0.3);
        border-top: 1px solid rgba(212, 167, 89, 0.3);
        background: #121212;
        box-shadow: 5px 5px 7px black;
    }

    .md_alert_inside:focus{
      width: 62% !important;
      border-left: 4px solid var(--third-color);
      border-right: 1px solid rgba(212, 167, 89, 0.3);
      border-bottom: 1px solid rgba(212, 167, 89, 0.3);
      border-top: 1px solid rgba(212, 167, 89, 0.3);
      background: #121212;
      box-shadow: 5px 5px 7px black;
  }
  }
  
  @media screen and (min-width: 450px) and  (max-width: 554px){
    .md_alert_inside{
      /*background-image: linear-gradient(to top right, var(--bg-color) , #131313);*/
      background-size: 250% 200%;
      width: 70% !important;
      border-left: 4px solid var(--third-color);
      border-right: 1px solid rgba(212, 167, 89, 0.3);
      border-bottom: 1px solid rgba(212, 167, 89, 0.3);
      border-top: 1px solid rgba(212, 167, 89, 0.3);
      background: #121212;
      box-shadow: 5px 5px 7px black;
    }


    .md_alert_inside:hover{
      width: 70% !important;
      border-left: 4px solid var(--third-color);
      border-right: 1px solid rgba(212, 167, 89, 0.3);
      border-bottom: 1px solid rgba(212, 167, 89, 0.3);
      border-top: 1px solid rgba(212, 167, 89, 0.3);
      background: #121212;
      box-shadow: 5px 5px 7px black;
  }

    .md_alert_inside:focus{
      width: 70% !important;
      border-left: 4px solid var(--third-color);
      border-right: 1px solid rgba(212, 167, 89, 0.3);
      border-bottom: 1px solid rgba(212, 167, 89, 0.3);
      border-top: 1px solid rgba(212, 167, 89, 0.3);
      background: #121212;
      box-shadow: 5px 5px 7px black;
  }

  
  }
  
  
  @media screen and (max-width: 355px){


  .button-one{
    display: block;
    position: absolute;
    margin: 0px 44px 0 0px;
    top: 0;
    right: 0;
  }
  
  }
  
  @media screen and (max-width: 340px){

    
  .button-one{
    display: block;
    position: absolute;
    margin: 30px 10px;
    top: 0;
    right: 0;
  }
  
  }
  
  
  @media screen and (max-width: 305px){
 
  .button-one{
    display: block;
    position: absolute;
    margin: 3rem 1rem 0 0;
    top: 0;
    right: 0;
  }
  }
  
  
  @media screen and (max-width: 271px){
  .li-alert{
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 17px;
      display: flex;
      position: relative;
      left: 5px !important;
      color: #FFF !important;
      text-decoration: none;
      font-weight: 700;
  }
  }
  
  
  @keyframes titleappearing{
    0%{opacity: 0; letter-spacing: 25px}
    100%{opacity: 1; letter-spacing: 4px}
  }
  
  
  @keyframes titleappearingthanks{
    0%{opacity: 0; letter-spacing: 25px}
    100%{opacity: 1; letter-spacing: 4px}
  }
  
  
  @keyframes titleappearingunomas{
    0%{opacity: 0; transform: translateY(-30px);}
    100%{opacity: 1; transform: translateY(0px);}
  }
  
  .contact-title{
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    color: #FFF;
    display: flex;
    justify-content: center;
    animation: appeardialoge 1s ease-in-out;
  }
  
  .contact-title:hover{
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    color: #FFF;
    display: flex;
    justify-content: center;
    cursor: default;
  }
  
  /*2025-2026*/
  .border-line-alert-contact{
  border: none;
  height: 1px;
  position: absolute;
  display: flex;
  margin: 0 0 25px 0;
  background: linear-gradient(to right, transparent, #666, transparent);
  width: 80%;
}
  
  .contact-title-unomas{
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 4px;
    color: #FFF;
    display: flex;
    justify-content: center;
    animation: titleappearingunomas 1s ease-in-out;
  }
  
  .contact-title-unomas:hover{
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 4px;
    color: #FFF;
    display: flex;
    justify-content: center;
    cursor: default;
  }
  
  
  
  
  .developedby{
  margin-top: 15px;
  }
  
  /*2025 */
  
  #tag_social_networks{
  font-weight: 600;
  color: #FFF;
  border-radius: 5px;
  border: solid 2px transparent;
  padding: 0;
  margin-left: 35px;
  transition: all 0.3s ease-in-out;
  }
  
  #tag_social_networks:hover{
  font-weight: 600;
  color: #FFF;
  border-radius: 5px;
  border: solid 2px #FFF;
  padding: 4px 7px;
  margin-left: 35px;
  cursor: pointer;
  
  }
  
  #tag_social_networks:focus{
  font-weight: 600;
  background-color: #FFF;
  color: #222733;
  border-radius: 5px;
  border: solid 2px #FFF;
  padding: 4px 7px;
  margin-left: 35px;
  cursor: pointer;
  transition: all 0s ease-in-out;
  }
  
  #tag_social_networks:active{
  font-weight: 600;
  background-color: #FFF;
  color: #222733;
  border-radius: 5px;
  border: solid 2px #FFF;
  padding: 4px 7px;
  margin-left: 35px;
  cursor: pointer;
  transition: all 0s ease-in-out;
  }
  
  .instagram {
    display: inline-block;
    margin-top: -6px;
    margin-left: 2px;
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 40px;
    color: #fff;
    font-size: 20px;
    line-height: 10px;
    vertical-align: middle;
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    box-shadow: 0px 3px 10px rgba(0,0,0,.25);
  }
  
  
  .my-twitter{
    color: #00ACEE;
    font-size: 19px;
  }
  
  .facebook{
    font-size: 20px;
  }
  
  
  .my-links{
    color:#6c757d;
    padding: 4px 7px;
    background-color: transparent;
    border-radius: 5px;
    width: 38%;
    transition: all 0.3s ease-in-out;
  }
  
  
  .my-links:hover{
    color: #222733 !important;
    background-color: #FFF;
    padding: 4px 7px;
    border-radius: 5px;
    width: 38%;
    transform: translateX(11px);
  }
  
  .my-links:focus{
    color: #222733 !important;
    background-color: #FFF !important;
    padding: 4px 7px;
    border-radius: 5px;
    width: 38%;
    transform: translateX(11px);
  }
  
  .my-references{
    color:#6c757d;
    display: inline-block;
    width: 55%;
    padding: 4px 7px;
    background-color: transparent;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
  }
  
  
  .my-references:hover{
    color: #222733 !important;
    display: inline-block;
    background-color: #FFF;
    width: 55%;
    padding: 4px 7px;
    border-radius: 5px;
    cursor: pointer;
    transform: translateX(11px);
  }
  
  .my-references:focus{
    color: #222733 !important;
    display: inline-block;
    background-color: #FFF !important;
    width: 55%;
    padding: 4px 7px;
    border-radius: 5px;
  }
  
  .my-references-mission{
    color:#6c757d;
    display: inline-block;
    padding: 4px 7px;
    background-color: transparent;
    border-radius: 5px;
    width: 80%;
    transition: all 0.3s ease-in-out;
  }
  
  
  .my-references-mission:hover{
    color: #222733 !important;
    display: inline-block;
    background-color: #FFF;
    padding: 4px 7px;
    border-radius: 5px;
    width: 80%;
    cursor: pointer;
    transform: translateX(11px);
  }
  
  
  .my-references-mission:focus{
    color: #222733 !important;
    display: inline-block;
    background-color: #FFF !important;
    padding: 4px 7px;
    border-radius: 5px;
    width: 80%;
  }
  
  
  .my-references-thanks{
    color:#6c757d;
    display: inline-block;
    padding: 4px 7px;
    background-color: transparent;
    border-radius: 5px;
    width: 97%;
    transition: all 0.3s ease-in-out;
  }
  
  
  .my-references-thanks:hover{
    color: #222733 !important;
    display: inline-block;
    background-color: #FFF;
    padding: 4px 7px;
    border-radius: 5px;
    width: 97%;
    transform: translateX(11px);
    cursor: pointer;
  }
  
  .my-references-thanks:focus{
    color: #222733 !important;
    display: inline-block;
    background-color: #FFF !important;
    padding: 4px 7px;
    border-radius: 5px;
    width: 97%;
  }
  
  
  .my-links-auth{
    color:#6c757d;
    display: inline-block;
    padding: 4px 7px;
    background-color: transparent;
    border-radius: 5px;
    width: 85%;
    transition: all 0.3s ease-in-out;
  }
  
  
  .my-links-auth:hover{
    color: #222733;
    display: inline-block;
    background-color: #FFF;
    padding: 4px 7px;
    border-radius: 5px;
    width: 85%;
    cursor: pointer;
    transform: translateX(11px);
  }
  
  .my-links-auth:focus{
    color: #222733 !important;
    display: inline-block;
    background-color: #FFF !important;
    padding: 4px 7px;
    border-radius: 5px;
    width: 85%;
  }
  
  
  .my-links-more{
    color:#6c757d;
    display: inline-block;
    padding: 4px 7px;
    background-color: transparent;
    border-radius: 5px;
    width: 55%;
    transition: all 0.3s ease-in-out;
  }
  
  
  .my-links-more:hover{
    color: #222733 !important;
    display: inline-block;
    background-color: #FFF;
    padding: 4px 7px;
    border-radius: 5px;
    width: 55%;
    cursor: pointer;
    transform: translateX(11px);
  }
  
  .my-links-more:focus{
    color: #222733 !important;
    display: inline-block;
    background-color: #FFF !important;
    padding: 4px 7px;
    border-radius: 5px;
    width: 55%;
  }
  
    .border-top{
      border-top: solid thin #5e666f !important;
    }
  
  
  .contact-title-thanks{
  font-size: 19px !important;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 4px;
  color: #FFF;
  display: flex;
  justify-content: center;
  animation: titleappearingthanks 1.4s ease-in-out;
  }
  
  
  @media screen and (min-width: 769px) and (max-width: 992px){
  .my-references-mission{
    width: auto;
    padding: 0;
    height: 32px;
  }
  
  .info-top-references{
    margin-left: 35px;
  }
  
  #my-references-about-more{
     margin-left: 35px;
  }
  
  
  .my-references-mission:hover, .my-references-mission:focus{
    width: auto;
    padding: 0;
    height: 32px;
  }
  
  
  .my-references{
    width: auto;
    padding: 0;
    height: 32px;
  }
  
  .my-references:hover, .my-references:focus{
    width: auto;
    padding: 0;
    height: 32px;
  }
  
  
  .my-links-auth{
    width: auto;
    padding: 0;
    height: 32px;
  }
  
  .my-links-auth:hover, .my-links-auth:focus{
    width: auto;
    padding: 0;
    height: 32px;
  }
  
  
  .my-links-more{
    width: auto;
    padding: 0;
    height: 32px;
  }
  
  .my-links-more:hover, .my-links-more:focus{
    width: auto;
    padding: 0;
    height: 32px;
  }
  
  .my-references-thanks{
    width: auto;
    padding: 0;
    height: 32px;
  }
  
  .my-references-thanks:hover, .my-references-thanks:focus{
    width: auto;
    padding: 0;
    height: 32px;
  }
  
  
  .my-links{
    width: auto;
    padding: 0;
    height: 32px;
  }
  
  .my-links:hover, .my-links:focus{
    width: auto;
    padding: 0;
    height: 32px;
  }
  
  
  
  }
  
  
  
  .rights{
    display: block;
    margin: 55px auto 10px auto;
    position: absolute; 
    justify-content: center;  
    text-align: center; 
  }
  
  
  @media screen and (max-width: 511px){
  .rights{
    display: block;
    margin: 80px auto 10px auto;
    position: absolute; 
    justify-content: center;  
    text-align: center; 
  }
  }
  
      #whitelogo{
          object-fit: cover;
          display: block; 
          margin-left: auto; 
          margin-right: auto; 
          position: absolute; 
          margin-top: -50px; 
          justify-content: center; 
          width: 88px; height: 68px;
          transition: all 0.2s ease-in-out;
      }
      
          #whitelogo:hover{
           transform: perspective(400px) rotateY(35deg);
           transform-style: preserve-3d;
           object-fit: cover;
           cursor: pointer;
      }

  /* styles for javascript ends*/



  /* styles for button to top*/

@keyframes appearup{
  0%{opacity: 0; transform: scale(0);padding: 15px 15px 15px 15px;}
  25%{opacity: 1; transform: scale(1.3); padding: 7px 18px 7px 18px;}
  50%{opacity: 1; transform: scale(1); padding: 15px 15px 15px 15px;}
  75%{opacity: 1; transform: scale(1.3); padding: 7px 18px 7px 18px;}
  100%{opacity: 1; transform: scale(1); padding: 15px 15px 15px 15px;}
}


@keyframes appearupwhatsapp{
  0%{opacity: 0; transform: scale(0);padding: 15px 15px 15px 15px; display: flex;}
  25%{opacity: 1; transform: scale(1.3); padding: 7px 18px 7px 18px; display: flex;}
  50%{opacity: 1; transform: scale(1); padding: 15px 15px 15px 15px; display: flex;}
  75%{opacity: 1; transform: scale(1.3); padding: 7px 18px 7px 18px; display: flex;}
  100%{opacity: 1; transform: scale(1); padding: 15px 15px 15px 15px; display: flex;}
}

@keyframes dissappearup{
  0%{opacity: 1; transform: scale(1);}
  50%{opacity: 1; transform: scale(1.3);}
  100%{opacity: 0; transform: scale(0);}
}


.up-button{
  display:none;
  margin: 0 0 20px 0;
  padding:15px;
  background-image: linear-gradient(to top right, var(--main-color) , var(--third-color));
  background-size: 250% 200%;
  font-size:40px;
  color:black;
  cursor: url(assets/images/hand.png),auto;
  position: fixed;
  /*bottom:77px;
  right:25px;*/
  bottom: 7%;
  right: 5%;
  border-radius: 30px;
  /*z-index: 2;*/
  z-index: 5;
  opacity: 1;
  box-shadow: inset 0 0 15px transparent, 0 4px 7px #12151b;
  outline: solid 3px var(--main-color);
  border: solid 1px #222733;
  transition: all 0.4s ease-in-out;
}

.up-button:hover{
  display:none;
  margin: 0 0 20px 0;
  padding:15px;
  background-image: linear-gradient(to top right, var(--main-color) , var(--third-color));
  background-size: 250% 200%;
  transform: scale(1.1);
  font-size:40px;
  color:black;
  position: fixed;
  bottom: 7%;
  right: 5%;
  border-radius: 30px;
  /*z-index: 2;*/
  z-index: 5;
  /*box-shadow: inset 0 0 15px transparent, 0 4px 7px #0d1117;*/
  box-shadow: inset 0 0 8px #0d1117, 0 4px 7px #0d1117;
  outline: solid 3px var(--main-color);
  border: solid 1px #222733;
  cursor: url(assets/images/hand.png),auto;
  transition: all 0s ease;
}

.up-button:focus{
  display:none;
  margin: 0 0 20px 0;
  padding:15px;
  background-image: linear-gradient(to top right, var(--main-color) , var(--third-color));
  font-size:40px;
  color:#222733;
  cursor:pointer;
  position: fixed;
  bottom: 7%;
  right: 5%;
  border-radius: 30px;
  z-index: 2;
  box-shadow: inset 0 0 15px #0d1117, 0 4px 7px #0d1117;
  animation: appearupwhatsapp 0.7s ease-in-out;
  transition: all 0s ease-in-out;
}


.up-button:active{
  display:none;
  margin: 0 0 20px 0;
  padding:15px;
  background-image: linear-gradient(to top right, var(--main-color) , var(--third-color));
  transform: scale(0.8);
  font-size:40px;
  color:#222733;
  position: fixed;
  bottom: 7%;
  right: 5%;
  border-radius: 30px;
  z-index: 2;
  box-shadow: inset 0 0 15px #0d1117, 0 4px 7px #0d1117;
  cursor: pointer;
  transition: all 0s ease-in-out;
}

/*First whatsup button*/
/*2025-2026*/
.whatsapp-button{
  display:flex;
  margin: 0 0 20px 0;
  padding:15px;
  background-image: linear-gradient(to top right, var(--main-color) , var(--third-color));
  background-size: 250% 200%;
  font-size:40px;
  color:black;
  cursor:pointer;
  position: fixed;
  /*bottom:70px;*/
  bottom: 7%;
  /*right:55px;*/
  right:5%;
  border-radius: 30px;
  z-index: 2;
  opacity: 1;
  box-shadow: inset 0 0 15px transparent, 0 4px 7px #12151b;
  outline: solid 3px var(--main-color);
  border: solid 1px #222733;
  transform: scale(1);
  transition: all 0.4s ease-in-out;
}

.whatsapp-button:hover{
  display:flex;
  padding:15px;
  background-image: linear-gradient(to top right, var(--main-color) , var(--third-color));
  background-size: 250% 200%;
  transform: scale(1.2);
  font-size:40px;
  color:black;
  position: fixed;
  /*bottom:70px;*/
  bottom: 7%;
  right: 5%;
  /*right:55px;*/
  border-radius: 30px;
  z-index: 2;
  /*box-shadow: inset 0 0 15px transparent, 0 4px 7px #0d1117;*/
  box-shadow: inset 0 0 8px #0d1117, 0 4px 7px #0d1117;
  outline: solid 3px var(--main-color);
  /*outline: solid 3px var(--third-color);*/
  border: solid 1px #222733;
  cursor: url(assets/images/hand.png),auto;
  transition: all 0.4s ease-in-out;
}

.whatsapp-button:focus{
  display:flex;
  padding:15px;
  background-image: linear-gradient(to top right, var(--main-color) , var(--third-color));
  font-size:40px;
  transform: scale(1);
  color:#222733;
  cursor: url(assets/images/hand.png),auto;
  position: fixed;
  /*bottom:70px;
  right:55px;*/
  bottom: 7%;
  right: 5%;
  border-radius: 30px;
  z-index: 2;
  box-shadow: inset 0 0 15px #0d1117, 0 4px 7px #0d1117;
  animation: appearupwhatsapp 0.7s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.whatsapp-button:active{
  display:flex;
  padding:15px;
  background-image: linear-gradient(to top right, var(--main-color) , var(--third-color));
  font-size:40px;
  color:#222733;
  cursor: url(assets/images/hand.png),auto;
  position: fixed;
  bottom:7%;
  right:5%;
  border-radius: 30px;
  z-index: 2;
  box-shadow: inset 0 0 15px #0d1117, 0 4px 7px #0d1117;
  transition: all 0s ease-in-out;
  animation: appearup 0.7s ease-in-out;
}



/*2025-2026*/
.uparrow{
  font-size: 0.4em;
}

.whatsapp-button .uparrow{
  transition: 0.5s ease-in-out;
}

.whatsapp-button:hover .uparrow{
  transform: rotate(45deg)
}

.whatsapp-button:focus .uparrow{
  transform: rotate(0deg)
}
  /* end styles for button to top*/




  /*here begins hamburger menu */

/*here begins the hamburger menu style*/


.button-one:hover{
   cursor: pointer;
}


@media screen and (min-width: 897px){
  .button-one{
      display: none !important;
  }

  .header{
  box-shadow: none;
  }
  
  /*2025-2026 latest*/
  .navbar{
  transform: translateX(0px);
  transition: 0.3s ease;
  /*margin: 0 5rem 0 76rem;*/
  margin: 0 auto;
  }
  
 }
 
 
 
 button{
   background: transparent;
   border: 0px solid #FFF;
   border-radius: 5px;
 }
 
 
  button:hover{
   background: transparent;
   border: 0px solid #FFF;
   border-radius: 5px;
   cursor: url(assets/images/hand.png);
 }
 
 
 
 
 
 .button-one{
   --button-color: #FFF;
  position: relative !important;
   z-index: 9999;
   display: inline-flex;
   flex-wrap: wrap;
   margin: -7px -200px 0 20px;
   align-items: center;
   align-content: center;
   float: right;
   top: .25rem;
   right: 1rem;
 }
 
 
 .button-one .line{
   transition: 
              y 300ms ease-in 300ms,
              rotate 300ms ease-in,
              opacity 0ms 300ms;
              transform-origin: center;
 }
 
   .button-one[data-state="opened"] .line{
   transition: 
              y 300ms ease-in,
              rotate 300ms ease-in 300ms,
              opacity 0ms 300ms;
 }
 
 .button-one[data-state="opened"] :is(.top, .bottom){
   y: 45px;
   cursor: pointer;
 }
 
 
 
 .button-one[data-state="opened"] .top{
   rotate: 45deg;
 }
 
 .button-one[data-state="opened"] .bottom{
   rotate: -45deg;
 }
 
 
 .button-one[data-state="opened"] .middle{
   opacity: 0;
 }



 @media screen and (max-width:896px){
  .button-one{
     /*margin: -7px -507px 0 20px;  */ 
     display: block;
     margin: -7px -463px 0 20px;
  }

  .header{
  margin: auto;
  padding: 3rem auto 0 auto;
  top: 0;
  height: 8rem;
  box-shadow: 0 4px 7px #12151b;
  }
}

@media screen and (min-width: 400px) and (max-width:640px){
  .button-one{
    display: block;
     margin: -7px -200px 0 20px;
  }
}

@media screen and (min-width: 366px) and (max-width:400px){
  .button-one{
    display: block;
      /*margin: -7px -167px 0 20px*/
      margin: -7px -200px 0 20px
  }
}



@media screen and (max-width:366px){
  .button-one{
     display: block;
     margin: -7px -131px 0 20px;   
  }
}

@media screen and (max-width:288px){
  .button-one{
    display: block;
    margin: -7px -20px 0 20px;   
  }
}

 /*Here ends the hamburger menu style*/
 
 .navbar-dark .navbar-toggler {
   color: rgba(255,255,255,.55);
   border-color: transparent !important;
 }
 
 .navbar-dark .navbar-toggler:focus {
   color: transparent;
   border-color: transparent;
 }
 
 @media screen and (max-width:769px){
     .button-one{
        /*margin: -7px -507px 0 20px;  */ 
        display: block;
        margin: -7px -463px 0 20px;
     }
 }
 
 @media screen and (min-width: 400px) and (max-width:640px){
     .button-one{
      display: block;
        margin: -7px -200px 0 20px;
     }
     .navbar{
      position: absolute;
      top: 100%;
      right: 0;
      width: 100%;
      height: 1500%;
      padding: 1rem 3%;
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(30px);
      border-bottom-left-radius: 2rem;
      border-bottom: 2px solid var(--main-color);
      display: none;
      transition: 0.4s ease-in-out;
  }
 }
 
 @media screen and (min-width: 366px) and (max-width:400px){
     .button-one{
         /*margin: -7px -167px 0 20px*/
         display: block;
         margin: -7px -200px 0 20px
     }
 }
 
 
 
 @media screen and (max-width:366px){
     .button-one{
      display: block;
        margin: -7px -131px 0 20px;   
     }
 }
 
 @media screen and (max-width:288px){
     .button-one{
      display: block;
       margin: -7px -20px 0 20px;   
     }
 }
 

  /*here ends hamburger menu */


/* media queries */


@media screen and (max-width: 1285px){

    
    html{
        font-size: 55%;
    }

    .services-container{
        padding-bottom: 7rem;
        grid-template-columns: repeat(2,1fr);
        margin: 0 5rem;
    }
}




@media screen and (max-width: 991px){
    header{
        padding: 2rem 3%;
    }

    section{
        padding: 10rem 3% 2rem;
    }

    .timeline-content{
        background-color: var(--bg-color);
        border: 3px solid var(--main-color);
        padding: 30px 50px;
        border-radius: 4rem;
        box-shadow: 0 4px 7px #000;
        cursor: pointer;
        transition: 0.3s ease-in-out;
    }
    
    .timeline-content:hover{
        transform: scale(1) perspective(400px) rotateY(7deg);
        transform-style: preserve-3d;
        box-shadow: 0 4px 7px black, inset 0 0 10px var(--main-color);
        transition: 0.3s ease-in-out;
    }
    
    .timeline-content:focus{
        transform: scale(0.9) perspective(400px) rotateY(15deg);
        border: 3px solid var(--main-color);
        transform-style: preserve-3d;
        box-shadow: 0 4px 7px black, inset 0 0 10px var(--main-color);
        transition: 0.3s ease-in-out;
    }


    

    


      .social-icons a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4.5rem;
    height: 4.5rem;
    background:#fff;
    border: 2px dashed #000;
    font-size: 2.5rem;
    border-radius:50%;
    color: var(--main-color);
    margin:3rem 1.5rem 3rem 0;
    box-shadow: 0 4px 7px #000;
    transition:0.3s ease-in-out;
  }
    


    .timeline-items::before{
        left: 7px;
    }

    .timeline-item:nth-child(odd){
        padding-right: 0;
        text-align: left;
    }

    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even){
        padding-left: 37px;
    }

    .timeline-dot{
        left: 0;
    }

    .services{
        padding-bottom: 7rem;
    }


    .testimonials .wrapper{
        grid-template-columns: repeat(1,1fr);
    }


    .contact form{
        flex-direction: column;
    }


    .footer{
        padding: 2rem 3%;
    }
    
    .footer .followme{
    margin: 39px 0 0 0;
    /*margin: 24px 0 0 0;*/
    }

}


    @media screen and (min-width: 690px) and (max-width: 896px) {
 
    #menu-icon{
        display: block;
    }

    .navbar{
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        height: 1500%;
        padding: 1rem 3%;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(30px);
        border-bottom-left-radius: 2rem;
        border-bottom: 2px solid var(--main-color);
        display: none;
        z-index: 5;
        transition: 0.4s ease-in-out;
    }


    .navbar.active{
        display: flex;
        position: relative;
        width: 50%;
        z-index: 5;
    }

    /*.navbar a{
        display: block;
        font-size: 2rem;
        margin: 5rem 0rem 0rem 3rem;
        color: #FFFFFF;
        position: relative;
        z-index: 5;
    }*/
    
    
     .navbar a{
    display: flex;
    font-size: 2rem;
    margin: 5rem 0rem auto auto;
    color: #FFFFFF;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: relative;
    z-index: 5;
    }
    
    /*2025*/
    .navbar a:hover {
    display: flex;
    font-size: 2rem;
    margin: 5rem 0rem auto auto;
    color: #FFFFFF;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: relative;
    z-index: 5;
    }


    .home{
        flex-direction: column-reverse;
        /* margin: 5rem 4rem; */
       margin: -17rem 4rem 15rem 4rem;
        /* margin: -100px -29px; */
    }

    .social-icons{
        position: relative;
        top: 233px;
    }



    .btn {
        display: inline-block;
        position: relative;
        top: -248px;
      }

   


    .education h2 {
        margin-bottom: 7rem;
        margin-top: 11rem;
    }

    .heading {
        font-size: 6rem;
    }

    .contact form .btn {
        margin: 30rem 0 0 0;
    }


    .footer{
        margin: -25rem 0 0 0;
    }

    .contact{
        margin: -5rem 0 0 0;
    }


    .services{
        margin: 1rem 0 0 0;
    }


    .home-content h3{
        font-size: 2.6rem;
        top: 233px;
        position: relative;
    }

/*2025-2026 latest*/
    .home-content h1{
        font-size: 6rem;
        margin: auto;
        /*margin: -200px 50px -4px 50px;
        top: 233px;*/
    }



    .home-content p{
        max-width: 600px;
        margin: 0 auto;
    }

    .home-img img{
        width: 56vw;
    }


    .services h2{
        margin-bottom: 3rem;
    }

    .services-container{
        grid-template-columns: repeat(1,1fr);
    }

    .home-img img{
    /* top: -68rem; */
    /* top: -30rem; */
    top: -1rem;
    margin: -29rem 0 -17rem 0;
    }

    .container_norge img{
        top: -23rem;
    }


    /*2025-2026*/
       .container_ncruztech_logo img{
        top: -23rem;
    }

/*2025-2026 ncruzteh*/
.container_text_ncruztech {
 margin: -50rem 0 0 0;
}


    .button-one{
      display: block;
      position: absolute;
      margin: 3rem 0;
      top: 0;
      right: 0;
    }
    




}


@media screen and (max-width: 690px) {
    #menu-icon{
        display: block;
    }

    
    .navbar{
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        height: 1500%;
        padding: 1rem 3%;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(30px);
        border-bottom-left-radius: 2rem;
        border-bottom: 2px solid var(--main-color);
        display: none;
    }

/* ACTIVO: texto dorado + subrayado visible */
.navbar a.is-active,
.navbar a[aria-current="page"]{
  color: var(--gold);
}

.navbar a.is-active::after,
.navbar a[aria-current="page"]::after{
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

    /*.navbar a{
        display: block;
        font-size: 2rem;
        margin: 5rem 0rem 0rem 3rem;
        color: #FFFFFF;
    }*/
    
    .navbar a{
    display: flex;
    font-size: 2rem;
    margin: 5rem auto 0 auto;
    color: #FFFFFF;
    justify-content: center;
    align-content: center;
    align-items: center;
    }

    .home{
        /*margin: 5rem 4rem;*/
        /* margin: -100px -29px; */
        flex-direction: column-reverse;
        margin: -14rem 4rem 7rem 4rem;
        /*margin: 5rem 4rem 7rem 4rem;*/
        /* margin: -100px -29px; */
    }

    .social-icons{
        position: relative;
        top: -20px;
    }


    .btn {
        display: inline-block;
        position: relative;
        /* top: -20px; */
        top: -248px;
      }


    .education h2 {
        margin-bottom: 7rem;
        margin-top: 11rem;
    }

    .heading {
        font-size: 6rem;
    }

    .contact form .btn {
        margin: 30rem 0 0 0;
    }


    .footer{
        margin: -25rem 0 0 0;
    }

    .contact{
        margin: -5rem 0 0 0;
    }


    .services{
        margin: 1rem 0 0 0;
    }


    .home-content h3{
        font-size: 2.6rem;
        top: -20px;
        position: relative;
    }

/*2025-2026 latest*/
    .home-content h1{
        /*position: relative;*/
        font-size: 6rem;
        /*margin: -200px 50px -4px 50px;
        top: -20px;*/
    }



    .home-content p{
        max-width: 600px;
        margin: 0 auto;
    }

    .home-img img{
        width: 56vw;
    }


    .services h2{
        margin-bottom: 3rem;
    }

    .services-container{
        grid-template-columns: repeat(1,1fr);
    }

    .home-img img{
    /* top: -68rem; */
    top: -37rem;
    margin: -29rem 0 -17rem 0;
    }

    .container_norge img{
        top: -23rem;
    }

     /*2025-2026*/
    .container_ncruztech_logo img{
        top: -23rem;
    }
    
    /*2025-2026 ncruzteh*/
    .container_text_ncruztech {
     margin: -50rem 0 0 0;
    }

    .button-one{
      display: block;
      position: absolute;
      margin: 3rem 0;
      top: 0;
      right: 0;
    }
    .navbar{
      position: absolute;
      top: 100%;
      right: 0;
      width: 100%;
      height: 1500%;
      padding: 1rem 3%;
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(30px);
      border-bottom-left-radius: 2rem;
      border-bottom: 2px solid var(--main-color);
      display: none;
  }
  
  /*2025-2026*/
  .whatsapp-button{
  bottom: 0%;
  right: 8%;
  }
  
  .whatsapp-button:hover{
  bottom: 0%;
  right: 8%;
  }
  
  .whatsapp-button:focus{
  bottom: 0%;
  right: 8%;
  }
  
  .up-button{
  bottom: 11.5%;
  right: 8%;
  }
  
  .up-button:hover{
  bottom: 11.5%;
  right: 8%;
  }
  .up-button:active{
  bottom: 11.5%;
  right: 8%;
  }

}


@media screen and (min-width: 476px) and (max-width: 690px) {
    #menu-icon{
        display: block;
    }

    .navbar{
      position: absolute;
      top: 100%;
      right: 0;
      width: 100%;
      height: 1500%;
      padding: 1rem 3%;
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(30px);
      border-bottom-left-radius: 2rem;
      border-bottom: 2px solid var(--main-color);
      display: none;
  }


    .navbar.active{
        display: block;
    }

    /*.navbar a{
        display: block;
        font-size: 2rem;
        margin: 5rem 0rem 0rem 3rem;
        color: #FFFFFF;
    }*/
    
    .navbar a{
    margin: 5rem auto 0 auto;
    color: #FFFFFF;
    justify-content: center;
    align-content: center;
    align-items: center;
    }


    .home{
        flex-direction: column-reverse;
        margin: -14rem 4rem 7rem 4rem;
        /*margin: 5rem 4rem 7rem 4rem;*/
        /* margin: -100px -29px; */
    }

    .social-icons{
        position: relative;
        top: -34px;
    }


    .btn {
        position: relative;
        /* top: -34px; */
        top: -248px;
      }


    .education h2 {
        margin-bottom: 7rem;
        margin-top: 0rem;
    }

    .heading {
        font-size: 6rem;
    }

    .contact form .btn {
        margin: 30rem 0 0 0;
    }


    .footer{
        margin: -25rem 0 0 0;
    }

    .contact{
        margin: -15rem 0 0 0;
    }


    .services{
        margin: -14rem 0 0 0;
    }


    .home-content h3{
        font-size: 2.6rem;
        top: -34px;
        position: relative;
    }


    .home-content h1{
        position: relative;
        font-size:6rem;
        margin: auto;
        /*margin: -200px 50px -4px 50px;
        top: -34px;*/
    }

    .home-content p{
        max-width: 600px;
        margin: 0 auto;
    }

    .home-img img{
        width: 56vw;
    }


    .services h2{
        margin-bottom: 3rem;
    }

    .services-container{
        grid-template-columns: repeat(1,1fr);
    }

    .home-img img{
        top: -29rem;
        width: 35vw;
    /* top: -48rem; */
    margin: -29rem 0 -17rem 0;
    }


 

      .button-one{
        display: block;
        position: absolute;
        margin: 3rem 0;
        top: 0;
        right: 0;
      }
      


    
}


@media screen and (min-width: 435px) and (max-width: 477px){
    #menu-icon{
        display: block;
    }

    .navbar{
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        height: 1500%;
        padding: 1rem 3%;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(30px);
        border-bottom-left-radius: 2rem;
        border-bottom: 2px solid var(--main-color);
        display: none;
    }


    /* ACTIVO: texto dorado + subrayado visible */
.navbar a.is-active,
.navbar a[aria-current="page"]{
  color: var(--gold);
}

.navbar a.is-active::after,
.navbar a[aria-current="page"]::after{
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}


    /*.navbar a{
        display: block;
        font-size: 2rem;
        margin: 5rem 0rem 0rem 3rem;
        color: #FFFFFF;
    }*/
    
    .navbar a{
    display: flex;
    margin: 5rem auto 0 auto;
    color: #FFFFFF;
    justify-content: center;
    align-content: center;
    align-items: center;
    }


    .home{
        flex-direction: column-reverse;
        /* margin: 5rem 4rem -14rem 4rem; */
        margin:-16rem 4rem 10rem 4rem
        /*margin: 0rem 4rem 10rem 4rem;/*
        /* margin: -100px -29px; */
    }

    .social-icons{
        position: relative;
        top: 105px;
    }
/* 
    .btn{
        position: relative;
        top: -34px;
    } */

    .btn {
        position: relative;
        /* top: -34px; */
        top: -248px;
      }

  


    .education h2 {
        margin-bottom: 7rem;
        margin-top: 0rem;
    }

    .heading {
        font-size: 6rem;
    }

    .contact form .btn {
        margin: 30rem 0 0 0;
    }


    .footer{
        margin: -25rem 0 0 0;
    }

    .contact{
        margin: -15rem 0 0 0;
    }


    .services{
        margin: -14rem 0 0 0;
    }


    .home-content h3{
        font-size: 2.6rem;
        /* top: -196px; */
        top: 105px;
        position: relative;
    }

/*2025-2026 latest*/
    .home-content h1{
        font-size: 6rem;
        margin: auto;
        /*margin: -200px 50px -4px 50px;
        top: 105px;*/
    }

    .home-content p{
        max-width: 600px;
        margin: 0 auto;
    }

    .home-img img{
        width: 56vw;
    }


    .services h2{
        margin-bottom: 3rem;
    }

    .services-container{
        grid-template-columns: repeat(1,1fr);
    }

    .home-img img{
    /* top: -48rem; */
    top: -16rem;
    margin: -29rem 0 -17rem 0;
    }

 

      .button-one{
        display: block;
        position: absolute;
        margin: 3rem 0;
        top: 0;
        right: 0;
      }

      


    }

    @media screen and (min-width: 425px) and (max-width: 435px){

      .btn-contactar{
        margin: -5rem 0 0 7.4rem;
        top: 20rem;
      }

       
     .home-img img{
    top: -25rem;
    margin: -29rem 0 -17rem 0;
  }
  
      .navbar a{
    display: flex;
    margin: 5rem auto 0 auto;
    color: #FFFFFF;
    justify-content: center;
    align-content: center;
    align-items: center;
    }

/* ACTIVO: texto dorado + subrayado visible */
.navbar a.is-active,
.navbar a[aria-current="page"]{
  color: var(--gold);
}

.navbar a.is-active::after,
.navbar a[aria-current="page"]::after{
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}


/*2025-2026 recently*/
/*.container_text_ncruztech{
margin: -50rem 0 0 0;
}*/

    /* @media screen and (min-width: 425px) and (max-width: 435px){
        .header { 
            position: fixed;
            left: 0;
            width: 100%;
            padding: 2rem 12% 1rem; 

            padding: 3rem auto 0 auto; 


            padding: 4rem 12% 4rem;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(30px);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 7; 

            
          }

          .home{
            margin: 1rem 4rem 10rem 4rem;
          }

       

        .contact form .btn {
            margin: 30rem 0 0 0;
        }



        .btn {
            position: relative;
            top: -248px;
          }
        
    
    
        .footer{
            margin: -25rem 0 0 0;
        }
    
        .contact{
            margin: -15rem 0 0 0;
        }
    
    
        .services{
            margin: -14rem 0 0 0;
        }
    
    
        .home-content h3{
            font-size: 2.6rem;
            top: 125px;
            position: relative;
        }
    
    
        .home-content h1{
            position: relative;
            font-size: 7rem;
            margin: -200px 50px -4px 50px;
            top: 125px;
    
        }

        .social-icons{
            top: 125px;
        }
    
        .home-content p{
            max-width: 600px;
            margin: 0 auto;
        }
    
    
    
        .services h2{
            margin-bottom: 3rem;
        }
    
        .services-container{
            grid-template-columns: repeat(1,1fr);
        }
    
        .home-img img{
         top: -48rem; 
        top: -10rem;
        width: 74vw;
        margin: -29rem 0 -17rem 0;
        }


        .btn-contactar{
            margin: -5rem 0 0 7.4rem;
            top: 20rem;
          }

          .wrapper_norge img{
            position: absolute;
            width: 33rem;
            top: 0;
            left: 0;
            z-index: 2;
            object-fit: cover;
            margin: 0 0 0 -5rem;
            z-index: 7;
          }

      .button-one{
        display: block;
        position: absolute;
        margin: 3rem 0;
        top: 0;
        right: 0;
      }

    
        } */



        /* The following media screen is for my smartphone xiaomi */
    @media screen and (min-width: 368px) and (max-width: 425px){

        .header {
            position: fixed;
            left: 0;
            width: 100%;
            padding: 3rem auto 0 auto;
            top: 0rem;
            height: 6rem;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(30px);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 7;
          }
          
          
          /*2025-2026 ncruztech latest*/
            .container_ncruztech_logo{
                margin: 0 0 20px -198px;
            }
          
             .container_text_ncruztech {
               margin: -50rem 0 0 0;
             }


          
        .btn-contactar{
            margin: -5rem 0 0 4.3rem;
            top: -8rem;
        }

          .home{
            /*margin: 1rem 4rem -7rem 4rem;*/
            margin: -4rem 4rem -7rem 4rem;
          }

       

        .contact form .btn {
            margin: 30rem 0 0 0;
        }
/*         
        .btn{
            margin: 0 0 0 4.4rem;
            top: -34px;
        } */

        
        .btn {
            position: relative;
            /* top: -34px; */
            top: -248px;
            /* top: 44px; */
          }
        
    
    
        .footer{
            margin: -25rem 0 0 0;
        }
    
        .contact{
            margin: -15rem 0 0 0;
        }
    
    
        .services{
            margin: -14rem 0 0 0;
        }
    
    
        .home-content h3{
            font-size: 2.6rem;
            /* top: -196px; */
            /* top: 125px; */
            top: -116px;
            position: relative;
        }
    
    /*2025-2026 latest*/
        .home-content h1{
            position: relative;
            font-size: 6rem;
            margin: auto;
            /*margin: -200px 50px -4px 50px;
            top: -116px;*/
        }

        .social-icons{
            top: -116px;
        }
    
        .home-content p{
            max-width: 600px;
            margin: 0 auto;
        }
    
    
    
        .services h2{
            margin-bottom: 3rem;
        }
    
        .services-container{
            grid-template-columns: repeat(1,1fr);
        }
        
                       
        
        /* 2025 */
    
        .home-img img{
        /*top: -37rem;*/
        top: -37rem;
        /*width: 66vw;*/
        width: 52vw;
        margin: -29rem 0 -17rem 0;
        }

        
        .wrapper_norge img{
            position: relative;
            width: 6rem;
            top: 0;
            left: 0;
            z-index: 2;
            object-fit: cover;
            margin: 0 0 0 -2rem;
          }

          .button-one{
            display: block;
            position: absolute;
            margin: 3rem 0;
            top: 0;
            right: 0;
          }

             
        }


    
    @media screen and (min-width: 340px) and (max-width: 368px){
    
 .btn-group{
        display: block;
        margin: 0 auto 0 auto;
        position: relative;
    }
    
    .btn-contactar + .btn-about {
    margin-left: 0;
    }

        .contact form .btn {
            margin: 30rem 0 0 0;
        }
        
                  /*2025-2026 ncruztech*/
            .container_ncruztech_logo{
                margin: auto;
            }
          
             .container_text_ncruztech {
               display: none;
             }
        
        /* .btn{
            margin: 0 0 0 4.4rem;
            top: -60px;
        } */


        
        .btn-contactar{
            margin: -5rem 0 0 7.4rem;
            top: 4rem;
          }
        

        .btn {
            position: relative;
            /* top: -34px; */
            top: -248px;
          }
    
    
        .footer{
            margin: -25rem 0 0 0;
        }
    
        .contact{
            margin: -15rem 0 0 0;
        }
    
    
        .services{
            margin: -14rem 0 0 0;
        }
    
    
        .home-content h3{
            font-size: 2.6rem;
            /* top: -196px; */
            top: -9px;
            position: relative;
        }
    
    
        .home-content h1{
            position: relative;
            font-size: 6rem;
            margin: -200px 50px -4px 50px;
            /* top: -196px; */
            /* top: 54px; */
            /* top: 105px; */
            top: -9px;
    
        }

        .social-icons{
            top: -9px;
        }
    
        .home-content p{
            max-width: 600px;
            margin: 0 auto;
        }
    
    
    
        .services h2{
            margin-bottom: 3rem;
        }
    
        .services-container{
            grid-template-columns: repeat(1,1fr);
        }
    
        .home-img img{
        /* top: -48rem; */
        top: -25rem;
        width: 74vw;
        margin: -29rem 0 -17rem 0;
        }
        
        .home{
         margin: 1rem 4rem -7rem 4rem
        }

        
        .wrapper_norge img{
            position: relative;
            width: 33rem;
            top: 0;
            left: 0;
            z-index: 2;
            object-fit: cover;
            margin: 0 0 0 -5rem;
          }

          .button-one{
            display: block;
            position: absolute;
            margin: 3rem 0;
            top: 0;
            right: 0;
          }

                             
                    
      .navbar a{
    display: flex;
    margin: 5rem auto 0 auto;
    color: #FFFFFF;
    justify-content: center;
    align-content: center;
    align-items: center;
    }
                    
                    
          
    
        }

/* 2024*/

        @media screen and (min-width: 340px) and (max-width: 368px){          
            .btn-contactar{
                margin: -5rem 0 0 4.4rem;
                top: 4rem;
              }

              
              
                        /*2025-2026 ncruztech*/
            .container_ncruztech_logo{
                margin: auto;
            }
          
             .container_text_ncruztech {
               display: none;
             }

            
             .home-img img{
                top: -37rem;
                width: 48vw;
                margin: -29rem 0 -17rem 0;
              }
            
            .home{
             margin: 0rem 4rem -7rem 4rem
            }

            
          .wrapper_norge img{
            position: relative;
            width: 6rem;
            top: 0;
            left: 0;
            z-index: 2;
            object-fit: cover;
            margin: 0;
          }

          .button-one{
            display: block;
            position: absolute;
            margin: 3rem 0;
            top: 0;
            right: 0;
          }

                              
                    
      .navbar a{
    display: flex;
    margin: 5rem auto 0 auto;
    color: #FFFFFF;
    justify-content: center;
    align-content: center;
    align-items: center;
    }
        
            }




 @media screen and (min-width: 325px) and (max-width: 340px){
    
    .contact form .btn {
        margin: 30rem 0 0 0;
    }
    
    
              /*2025-2026 ncruztech*/
            .container_ncruztech_logo{
                margin: auto;
            }
          
             .container_text_ncruztech {
               display: none;
             }

    
    .btn-contactar{
        margin: -5rem 0 0 7.4rem;
        top: 6rem;
      }
  
    


    .footer{
        margin: -25rem 0 0 0;
    }

    .contact{
        margin: -15rem 0 0 0;
    }


    .services{
        margin: -14rem 0 0 0;
    }


    .home-content h3{
        font-size: 2.6rem;
        top: 2px;
        position: relative;
    }


    .home-content h1{
        position: relative;
        font-size: 5.7rem;
        margin: -200px 50px -4px 50px;
        top: 2px;

    }

    .home-content p{
        max-width: 600px;
        margin: 0 auto;
    }



    .services h2{
        margin-bottom: 3rem;
    }

    .services-container{
        grid-template-columns: repeat(1,1fr);
    }

    .home-img img{
    top: -24rem;
    width: 52vw;
    margin: -29rem 0 -17rem 0;
    }
/* 
    .btn{
    top: -34px;
    }  */

    .btn {
        position: relative;
        /* top: -34px; */
        top: -248px;
      }


    .social-icons{
        top: 2px;
        display: flex;
        flex-wrap: wrap;
        } 
        .home{
        margin: 1rem 4rem -7rem 4rem
        }

        
        .wrapper_norge img{
            position: relative;
            width: 6rem;
            top: 0;
            left: 0;
            z-index: 2;
            object-fit: cover;
            margin: 0;
          }


          .button-one{
            display: block;
            position: absolute;
            margin: 3rem 0;
            top: 0;
            right: 0;
          }

           .header{
          margin: auto;
          padding: 3rem auto 0 auto;
          top: -1rem;
          height: 6rem;
           }


                              
      .navbar a{
    display: block;
    margin: 5rem 0rem 0rem 3rem;
    color: #FFFFFF;
    }
    
    .home{
    margin: -28rem 4rem -7rem 4rem;
    }
    
    
    }




@media screen and (min-width: 230px) and (max-width: 324px){
    
    
    .contact form .btn {
        margin: 30rem 0 0 0;
    }

    
    .btn-contactar{
    margin: 0 auto;
    top: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: 25%;
    }
    
    
              /*2025-2026 ncruztech*/
            .container_ncruztech_logo{
                margin: auto;
            }
          
             .container_text_ncruztech {
               display: none;
             }


    .footer{
        margin: -25rem 0 0 0;
    }

    .contact{
        margin: -15rem 0 0 0;
    }


    .services{
        margin: -14rem 0 0 0;
    }

           /* .btn{
            top: -34px;
            }  */

            .btn {
                position: relative;
                /* top: -34px; */
                top: -248px;
              }
        
        
            .social-icons{
            top: 42px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            align-content: center;
            margin: 0 auto;
            } 
            
            .home{
            margin: 1rem 4rem -7rem 4rem
            }


    .home-content h3{
        font-size: 2.5rem;
        top: 42px;
        position: relative;
        position: relative;
        display: flex;
        flex-direction: column;
        margin: 22px 0 0 19px;
        font-size: 9px;
        justify-content: center;
        align-content: center;
    }


    .home-content h1{
        position: relative;
        font-size: 4rem;
        margin: -200px 50px -4px 50px;
        /* top: -196px; */
        /* top: 54px; */
        top: 42px;
    }

    .home-content p{
        max-width: 600px;
        margin: 0 auto;
    }



    .services h2{
        margin-bottom: 3rem;
    }

    .services-container{
        grid-template-columns: repeat(1,1fr);
    }

    .home-img img{
    top: -19rem;
    width: 45.3vw;
    margin: -29rem 0 -17rem 0;
    }

    
    .wrapper_norge img{
        position: relative;
        width: 6rem;
        top: 0;
        left: 5%;
        z-index: 2;
        object-fit: cover;
        margin: 0 0 0 -2rem;
      }

      .button-one{
        display: block;
        position: absolute;
        margin: 3rem 0;
        top: 0;
        right: 0;
      }


      .button-one{
        display: block;
        position: absolute;
        margin: 0px 44px 0 0px;
        top: 0;
        right: 0;
      }

      
      .header{
        margin: auto;
        padding: 3rem auto 0 auto;
        top: 0;
        height: 6rem;
      }


                         
                    .education h2{
                        font-size: 2rem;
                    }
                    
                     .heading {
                        font-size: 3rem;
                      }
                      
                      
                      .service-box{
                          display: flex;
                          flex-wrap: wrap;
                          justify-content: center;
                          align-content: center;
                          align-items: center;
                          margin: 0 auto;
                          width: 70%;
                          left: -28%;
                          position: relative;
                      }
                      
                      .service-box-animation{
                          display: flex;
                          flex-wrap: wrap;
                          justify-content: center;
                          align-content: center;
                          align-items: center;
                          margin: 0 auto;
                          width: 70%;
                          left: -28%;
                          position: relative;
                      }
                      
                      .service-info h4 {
                         font-size: 1.5rem;
                       }
                       
                       
                       
      .navbar a{
    /*display: block;*/
    margin: 5rem 0rem 0rem 3rem;
    color: #FFFFFF;
    }

    }
    
    
    
@media screen and (min-width: 10px) and (max-width: 230px){
    
    
    .contact form .btn {
        margin: 30rem 0 0 0;
    }

    
    .btn-contactar{
    margin: 0 auto;
    top: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: 25%;
    }


    .footer{
        margin: -25rem 0 0 0;
    }

    .contact{
        margin: -15rem 0 0 0;
    }
    
    
              /*2025-2026 ncruztech*/
            .container_ncruztech_logo{
                margin: auto;
            }
          
             .container_text_ncruztech {
               display: none;
             }


    .services{
        margin: -14rem 0 0 0;
    }

           /* .btn{
            top: -34px;
            }  */

            .btn {
                position: relative;
                /* top: -34px; */
                top: -248px;
              }
        
        
            .social-icons{
            top: 42px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            align-content: center;
            margin: 0 auto;
            } 
            
            .home{
            margin: -12rem 4rem -7rem 4rem;
            }


    .home-content h3{
        font-size: 2.5rem;
        top: 42px;
        position: relative;
        position: relative;
        display: flex;
        flex-direction: column;
        margin: 22px 0 0 19px;
        font-size: 9px;
        justify-content: center;
        align-content: center;
    }


   .home-content h1 {
    position: relative;
    font-size: 2rem;
    margin: -200px 50px -4px 71px;
    top: -196px;
    top: 54px;
    top: 42px;
  }

    .home-content p{
        max-width: 600px;
        margin: 0 auto;
    }



    .services h2{
        margin-bottom: 3rem;
    }

    .services-container{
        grid-template-columns: repeat(1,1fr);
    }

    .home-img img{
    top: -18rem;
    width: 40vw;
    margin: -29rem 0 -17rem 0;
    }

    
    .wrapper_norge img{
        display: none;
        position: relative;
        width: 10rem;
        top: 0;
        left: 5%;
        z-index: 2;
        object-fit: cover;
        margin: 0 0 0 -5rem;
      }

      .button-one{
        display: block;
        position: absolute;
        margin: 3rem 0;
        top: 0;
        right: 0;
      }


        .button-one {
        display: block;
        position: absolute;
        margin: 0px auto 0 auto;
        top: 0;
        left: -52%;
        }

      
      .header{
        margin: auto;
        padding: 3rem auto 0 auto;
        top: 0;
        height: 6rem;
      }

                    
                    .education h2{
                        font-size: 2rem;
                    }
                    
                     .heading {
                        font-size: 3rem;
                      }
                      
                      
                      .service-box{
                          display: flex;
                          flex-wrap: wrap;
                          justify-content: center;
                          align-content: center;
                          align-items: center;
                          margin: 0 auto;
                          width: 70%;
                          left: -28%;
                          position: relative;
                      }
                      
                      
                      .service-box-animation{
                          display: flex;
                          flex-wrap: wrap;
                          justify-content: center;
                          align-content: center;
                          align-items: center;
                          margin: 0 auto;
                          width: 70%;
                          left: -28%;
                          position: relative;
                      }
                      .service-info h4 {
                         font-size: 1.5rem;
                       }
                       /*2025 animation timeline*/
                       .container_norge img {
                              position: relative;
                              width: 13rem;
                              top: -24rem;
                              z-index: 2;
                              object-fit: cover;
                              animation: autoshownorge both;
                              animation-timeline: view(65% auto);
                        }

                        .container_ncruztech img {
                              position: relative;
                              width: 13rem;
                              top: -24rem;
                              z-index: 2;
                              object-fit: cover;
                              animation: autoshowncruztech both;
                              animation-timeline: view(65% auto);
                        }

                        
                        
      .navbar a{
    display: block;
    margin: 5rem 0rem 0rem 3rem;
    color: #FFFFFF;
    }
    

}

/*2025-202 latest*/
.button-certificate{
    background: none;      
    border: none;          
    padding: 0;            
    margin: 0;             
    font: inherit;          
    color: inherit;        
    cursor: pointer;       
    outline: none; 
}
.button-certificate{
    background: none;      
    border: none;          
    padding: 0;            
    margin: 0;             
    font: inherit;          
    color: inherit;        
    cursor: pointer;       
    outline: none; 
    cursor: url(assets/images/hand.png),auto;
}




#JS-icon{
    font-size: 24px;
    text-transform: uppercase;
    display: inline-block;
}

/

/* Cuando los modales sí están visibles, reactivar interacción */
#modal-share.show-share,
#modal-qr-code.show-qr{
  pointer-events: auto;
}

/* end 2025-2026 footer latest de estilos.css */


/* overlays/preloaders cuando no están activos */
#preloader,
#modal-share[style*="display: none"],
#modal-share[hidden]{
  pointer-events: none;
}



.js-container{
  display: flex;
  align-items: center; /* Alinea verticalmente al centro */
  gap: 10px; /* Espacio entre los elementos */
}


.web-icons{
  color: var(--main-color);  
  margin: 0px 10px 0 0;
}

.certificated{
    display: flex;
    align-items: flex-end;
    gap: 10px;
    color: var(--main-color); 
    right: 0;
    float: right;
    position: absolute;
}



.certificated-same-year{
    display: flex;
    align-items: flex-end;
    gap: 10px;
    color: var(--main-color); 
    right: 0;
    float: right;
    position: absolute;
    animation: autoshowchecksvertically both;
    animation-timeline: view(70% 30%);
    transition: 0.3s ease-in-out; 
}


#container-certificated{
  display: flex;
  align-items: flex-end;
  position: relative;
  float: right;
  font-size: 17px;
  top: 90px;
  z-index: 1;
  margin: auto 23px 0px 0px;
  animation: autoshowchecksverticallycontainer both;
  animation-timeline: view(70% 30%);
  transition: 0.3s ease-in-out;
}



.certificated-1, .certificated-2, .certificated-3, .certificated-4{
  display: flex;
  align-items: flex-end;
  gap: 10px;
  color: var(--main-color); 
  right: 0;
  float: right;
  position: absolute;
}

#container-certificated-1, #container-certificated-2, #container-certificated-3, #container-certificated-4{
  display: flex;
  align-items: flex-end;
  position: relative;
  float: right;
  font-size: 17px;
  top: 90px;
  z-index: 1;
  margin: auto 23px 0px 0px;
  animation: autoshowchecksvertically both;
  animation-timeline: view(70% 30%);
  transition: 0.3s ease-in-out;
} 


#container-certificated-same-year{
  display: flex;
  align-items: flex-end;
  position: relative;
  float: right;
  font-size: 17px;
  top: 40px;
  z-index: 2;
  margin: auto 23px 0px 0px;
  animation: autoshowchecksvertically both;
  animation-timeline: view(70% 30%);
  transition: 0.3s ease-in-out; 
}


#container-certificated-left{
  display: flex;
  align-items: flex-end;
  position: relative;
  float: left;
  font-size: 17px;
  top: 90px;
  z-index: 2;
  margin: auto 23px 0px 38px;
  animation: autoshowchecksvertically both;
  animation-timeline: view(70% 30%);
  transition: 0.3s ease-in-out;
}


.link{
    color: var(--main-color);
    margin: 0 0 0 9px;
}

#border-line{
  border-bottom: solid thin #71767b;
  padding: 5px 5px 20px 5px;
  display: block;
  width: 90%;
  margin: 0 auto;
  position: relative;
}

#border-line::after {
  content: ""; /* Pseudo-elemento vacío */
  position: absolute; /* Posición relativa al contenedor */
  top: 100%; /* Coloca el triángulo justo debajo del contenedor */
  left: 50%; /* Posiciona horizontalmente al centro */
  transform: translateX(-50%); /* Centra el triángulo */
  border-left: 8px solid transparent; /* Lado izquierdo del triángulo */
  border-right: 8px solid transparent; /* Lado derecho del triángulo */
  border-top: 8px solid #71767b; /* Parte superior del triángulo (color visible) */
}


/* 2025-2026 footer latest de estilos.css */
.footer{
  position: relative;
  z-index: 10;
  isolation: isolate; /* evita que capas externas lo tapen */
}

@media (max-width: 600px){
  .btn{ z-index: 0; } /* en vez de dejar que flote sobre el footer */
}

/* --- FIX clic en iconos del footer en móvil --- */

/* Asegura que el footer quede por encima del contenido normal */
.footer{ position: relative; z-index: 1; }

/* Cuando estas capas están ocultas, que no intercepten toques */
#preloader.loading-page{ pointer-events: none; }

/* Modales “ocultos” por defecto */
#modal-share.remove-share,
#modal-qr-code.remove-qr{
  pointer-events: none;
}

/* Evitar que la línea/triángulo decorativo bloquee los clics en móvil */
#border-line,
#border-line::before,
#border-line::after{
  pointer-events: none;
}

.footer{ position: relative; z-index: 1; }


/*style spinner photo card*/
/* === Loader para la imagen del modal "Contactar" === */
#contenedor-imagen-contactos { position: relative; }

/* La imagen arranca oculta y hace fade-in al cargar */
#contenedor-imagen-contactos .iconimage{
  display:block;
  opacity:0;
  transition: opacity .25s ease;
}
#contenedor-imagen-contactos .iconimage.is-ready{ opacity:1; }
#contenedor-imagen-contactos .iconimage.fade-in{ animation: fadeInPop .25s ease-out both; }

/* Overlay centrado con spinner (toma el dorado de tu tema) */
#contenedor-imagen-contactos .img-loader{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(1px);
  color: var(--third-color);
}
#contenedor-imagen-contactos .img-loader.hidden{ display:none; }

/* Spinner sin “subir/bajar”, solo rota */
#contenedor-imagen-contactos .img-loader .spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid rgba(255,255,255,.25);
  border-top-color: currentColor;           /* dorado */
  animation: spinRotate 1s linear infinite;
}
@keyframes spinRotate{ to { transform: rotate(360deg); } }

/* Reaprovecho tu pop-in elegante */
@keyframes fadeInPop{
  0%{ opacity:0; transform:scale(.98) }
  100%{ opacity:1; transform:scale(1) }
}

/*end*/


/*styles navbar underline*/
:root{
  /* fallback por si no estuviera definida en tu tema */
  --gold: var(--third-color, #d4af37);
}

/* Asegura posicionamiento para la línea animada */
.navbar .nav-link{
  position: relative;
  display: inline-block;
  padding-bottom: 4px; /* espacio para la línea */
  text-decoration: none; /* por si el browser subraya */
}

/* Línea dorada que crece desde el centro */
.navbar .nav-link::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 2px;               /* grosor de la línea */
  background: var(--gold);
  border-radius: 999px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .28s ease;
}

/* Mostrar línea en hover, foco accesible y estados activos */
.navbar .nav-link:hover::after,
.navbar .nav-link:focus-visible::after,
.navbar .nav-link.is-active::after,
.navbar .nav-link.active::after,
.navbar .nav-link[aria-current="page"]::after,
.navbar .nav-link[aria-current="true"]::after{
  transform: translateX(-50%) scaleX(1);
}

/* Respeto a usuarios con “reducir movimiento” */
@media (prefers-reduced-motion: reduce){
  .navbar .nav-link::after{ transition: none; }
}


/*end styles navbar underline*/


/*ajuste de tarjetas*/

/*end ajuste de tarjetas*/

/*additional animation cubes */
/* Animaciones de aparición/desaparición */
@keyframes appearPlay {
  0%   { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes disappearPlay{
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0); }
}



/*end additional animation cubes */


/* El contenedor crea la capa para posicionar el SVG de fondo */


  /* Base gris */

.ripple {
  position: fixed;
  left: 0; top: 0;
  z-index: 2147483646;           /* por encima de todo */
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(var(--ripple-color), var(--ripple-opacity)) 0%,
      rgba(var(--ripple-color), .25) 25%,
      rgba(var(--ripple-color), .12) 45%,
      rgba(var(--ripple-color), 0) 70%);
  mix-blend-mode: screen;         /* se integra bien con fondo oscuro */
  transform: translate(-50%, -50%) scale(0.001);
  opacity: 1;
  will-change: transform, opacity;
  contain: layout paint style;
}

/* Animaciones separadas para tap y long-press */
.ripple.go    { animation: ripple var(--ripple-duration) ease-out forwards; }
.ripple.slow  { animation: ripple var(--ripple-duration-long) ease-out forwards; }

@keyframes ripple {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* Accesibilidad: si el usuario prefiere menos animación */
@media (prefers-reduced-motion: reduce){
  .ripple { animation: none !important; opacity: .18; }
}

/**/


/* Intensidad del patrón */
.circuit-bg{
  opacity: var(--circuit-opacity, .12); /* .10–.14 desktop suele ir bien */
  transition: opacity .2s ease;
}

/* En móvil: más suave */
@media (max-width:768px){
  :root{ --circuit-opacity: .06; }      /* 0.05–0.07 */
  .circuit-bg .circuit-spark{ display:none; } /* sin brillos en móvil (opcional) */
}