@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

header {
    z-index: 9999;
}

/* Config del Hero Section ------------------------------------ */

#hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
}

.mtc {
    margin-top: 215px !important;
}

.hero-content {
    position: relative;
    z-index: 1;
    color: white;
    left: 100px;
    padding-top: 30vh;
}

h1 {

    font-family: "Work Sans", sans-serif;
    width: 650px;
    font-weight: 600;
    color: white;
}

@media (max-width: 1080px) {
    .mtc {
        margin-top: 25px !important;
    }
}

@media (max-width: 600px) {
    .mtc {
        margin-top: 25px !important;
    }
    h1 {
        font-family: "Work Sans", sans-serif;
        width: 365px;
        font-weight: 600;
        color: white;
    }

    .custom-video {
    object-position: 80% !important;    
}

}


#typed-text {
    color: rgb(133, 131, 236);
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
}

.cursor {
    display: inline-block;
    margin-left: 2px;
    width: 10px;
    animation: blink 2s infinite;
    color: rgb(133, 131, 236); /* Igual al texto */
}

@keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

/* Config del Main Section ------------------------------------ */
.text-primary {
    color: rgb(133, 131, 236) !important;
}

.varo {
    width: 100%;
    height: auto;
}

.varo2 {
    width: 75%;
    height: auto;
}

.bg-secondary{
    background-color: #F3F6FF !important;
}

.card-hover:hover {
    scale: 1.05;
}


/* Loader background ------------------------------------ */
 body.loading {
      overflow: hidden;
    }

.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Spinner simple */
.spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #007bff; /* o tu color primario */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 0.8s linear infinite;
}

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