@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/*Custom class*/



.container{
    max-width: 82%;
}

.line-white{
    height: 0.2vw;
    width: 5vw;
    background: white;
    position: absolute;
}

.line-primary{
    background: #03e0bb;
    height: 0.2vw;
    width: 5vw;
    position: absolute;

}

.btn{
    border-radius: 0;
    background: #cacaca;
    padding: 0.6vw;
    padding-left: 2.6vw;
    padding-right: 2.6vw;
}

.btn-submit:disabled{
    color: #040603;
    background: #ffffff;
    border: none;
}

.language{
    z-index: 999999999999999;
    position: relative;
}

.dropdown-toggle{
    background: #04060300;
    border: none;
    color: white;
}

.dropdown-toggle:hover{
    color: #03e0bb;
}


/*alerts*/

.alerts{
    position: fixed;
    top: 8vw;
    right:2vw;
    z-index: 999999999;
    border: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 1vw;
    font-size: 1.5vw;
    background: rgba(0, 0, 0, 0.658);
    width: 30vw;
    font-family: "Roboto", sans-serif;
    display: none;

}

.error{
    display: none;
}

.check{
    display: none;
}


/*Header*/

.content-header{
    background: black;
    position: relative;
    z-index:101;
}

#header{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 0.8vw;
    letter-spacing: -0.06vw;
    position: relative;
    z-index:8;
    justify-content: end;
}


#header .item{
    color: white;
    padding: 0.3vw;
    padding-left: 0.7vw;
}
#header .item.number{
    background: #03e0bb;
    font-weight: 600;
    padding-right: 0.7vw;
}
#header .item.help{
    padding-right: 0;
}

.item.help{
    text-decoration: none;
    cursor: pointer;
}



/*Navbar*/

#navbar {
    transition: background-color 0.3s ease;
    transition: font-size 0.3s ease;
    background-color: white;
    z-index:5;
    padding: 0.41vw;
    padding-left: 0;
    padding-right: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 0.9vw;
    letter-spacing: -0.06vw;
}
.logo-responsive{
    display: none;
}
.navbar-responsive{
    display: none;
}
#space-fixed-nav.nav-fixed{
    height: 4vw;
    background-color: rgba(255, 255, 255, 0.664);

}

#navbar.scrolled {
    font-size: 0.91vw;
    background-color: rgba(255, 255, 255, 0.849);
    z-index: 999;
}

.nav-link.active-custom{
    color: #0cc9a9;
    font-weight: bolder;
}

.nav-link{
    transition: color 0.3s ease, font-size 0.3s ease;
    margin-right: 1vw;
    color: black;
}

.nav-link.last{
    transition: color 0.3s ease, font-size 0.3s ease;
    margin-right: 0;
}


.nav-link:hover{
    color: #0cc9a9;
    font-size: 0.8vw;

}
.logo{
    width: 11vw;
    transition: width 0.3s ease;
}

.logo.scrolled{
    width: 9vw;
}

/*fixed bar*/
.fixed-bar {
    position: fixed;
    z-index: 3; 
    height: 200%;
    margin-top: -8vw;
    background: #0cc9a9;
    margin-left: 6.2vw;
    width: 0.2vw;
}

.fixed-bar-item {
    position: fixed;
    z-index: 1000; 
    width: 3vw;
    margin-left: -1.5vw;
    transition: width 0.3s ease, margin-left 0.3s ease;
}

.fixed-bar-item:hover {
    width: 2.6vw;
    margin-left: -1.3vw;

}


.fixed-bar-item.item-1 {
    margin-top: 20vw;
}
.fixed-bar-item.item-2 {
    margin-top: 25vw;
}
.fixed-bar-item.item-3 {
    margin-top: 30vw;
}

/*video*/

.tree-home{
    position: absolute;
    bottom: 43px;
    left: 41.1vw;
    z-index: 2;
    width: 16vw;
}

.video{
    width: 100%;
}
.filtro-video{
    width: 100%;
    position: absolute;
    top: 1vw;
    left: 0vw;
}

.video-container {
    position: relative;
    width: 100%;
    margin-top: -7vw; 
}

.content-video{
    font-family: 'Montserrat', sans-serif;
    position: absolute;
    top: 28vw;
    left: 50vw;
    transform: translate(-50%, -50%);
    color: white; 
    z-index: 1;
    width: 80%;
}

.content-video h1{
    font-weight: bold;
    font-size: 7vw;

}

.content-video p{
    font-weight: 300;
    font-size: 2vw;
    margin-top: -2vw;
    margin-left: 0.3vw;
}

.text-video{
    margin-bottom: 1vw;
}

.button-video{
    border-radius: 0;
    background-color: #2ec0ab;
    margin-top: 0.1vw;
    padding: 0.7vw;
    padding-left: 3.1vw;
    padding-right: 3.1vw;
    border:none;
    color: white;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 1vw;
}

.button-video:hover{
    background-color: black;
    color:#2ec0ab;
}

/*About Us*/
#about-us{
    background: black;
    margin-top: -2vw;
    position: relative;
}

.about-us-content{
    padding-right: 5.2vw;
    padding-left: 13vw;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color:white;
    font-size: 1vw;
    text-align: right;
}

.img-about-us{
    width: 100%;
    z-index: -1;
    position: relative;
}

.img-about-us-content{
    z-index: 0;
    position: relative;
}

.text-about-us{
    top: 9vw;
    left: 12vw;
    padding-right:2.5vw;
    font-size: 5.2vw;
    position: absolute;
    z-index: 1;
    color: #03e0bb;
    background: rgba(0, 0, 0, 0.671);
    font-family: 'Montserrat', sans-serif;

}
.tree-desing-text{
    position: absolute;
    bottom: 15px;
    left: 44.4vw;
    z-index: 2;
    width: 10vw;
}

.tree-contact{
    position: absolute;
    bottom: 5vw;
    left: 48vw;
    z-index: 2;
    width: 6vw;
}


/*info*/
#info{
    background: black;
    margin-top: -0.7vw;
    position: relative;
    border-top: 0.2vw solid #03e0bb;
}

.text-about-us-info {
    font-family: 'Anton', sans-serif;
    top: 0.4vw;
    left: 20%;
    font-size: 11.5vw;
    position: absolute;
    z-index: 1;
    color: #03e0bb;
    letter-spacing: 1.8vw;
}

.line-developer{
    top: 16vw;
    left: 46.5vw;
    z-index: 100;
}

.more-info-content{
    padding-top: 20vw;
    padding-left: 4.16vw;
    padding-right: 10.4vw;
    color: white;
}
.more-info-title{
    font-size: 3vw;
    margin-bottom: 3.6vw;
}
.more-info-text{
    font-size: 1.4vw;
}
.text-desing-info {
    font-family: 'Anton', sans-serif;
    bottom: -4vw;
    left: 22vw;
    transform: translate(-50%, -50%);
    font-size: 10.4vw;
    position: absolute;
    z-index: 1;
    color: #ffffff;
    letter-spacing: 1.8vw;
}

.line-design-1{
    left: 16vw;
    bottom: 2.5vw;
    z-index: 100;
}
.line-design-2{
    right: 16vw;
    bottom: 2.5vw;
    z-index: 100;
}
/*Solutions*/
#solutions{
    margin-top: 5.2vw;
    margin-bottom: 5.2vw;
    position: relative;
}

.solutions-content{
    padding-top: 1vw;
    padding-right: 10.4vw;
}
.solutions-text{
    font-size: 1vw;
}
.solutions-title{
    font-size: 4.1vw;
    margin-bottom: 2vw;
}


.img-carousel{
    height: 27vw;
}
.container-gallery .carousel-indicators{
    padding-left: 7.8vw;
    color: #03e0bb;
 }
 .carousel .carousel-indicators button {
    width: 0.9vw;
    height: 0.9vw;
    margin-right: 0.5vw;
    border-radius: 100%;
    opacity: 0.9;
    background-color: #cacaca;

 }

 .carousel .carousel-indicators button.active {
    background-color: #03e0bb;
 }

 .carousel .carousel-indicators  {
    margin-left: 6.2vw  ;
    margin-bottom: -1vw;
}

.more-info-button{
    border: none;
    border-radius: 0;
    background-color: #03e0bb;
    color: white;
    padding: 0.6vw;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
    text-transform: uppercase;
    font-size: 1vw;
}

.more-info-button:hover{
    background-color: black;
    color: #03e0bb;
}

.big-text-solutions {
    font-family: 'Anton', sans-serif;
    bottom: -2.6vw;
    left: 9.5vw;
    padding-right: 2.6vw;
    font-size: 5.7vw;
    position: absolute;
    z-index: 1;
    color: #03e0bb;
    letter-spacing: 0.8vw;
}

.line-solutions{
    left: 3vw;
    bottom: 1.7vw;
}

/*literature*/

.img-background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -3;
}

.content-literature{
    padding: 4.1vw;
    padding-bottom: 0;
    padding-top: 7.8vw;
    padding-right: 10.4vw;
}
.content-literature h2{
    font-family: 'Montserrat', sans-serif;
    font-size: 5.2vw;
    color: #03e0bb;
    margin-bottom: 2.1vw;
}
.content-literature p{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1vw;
    color: white;
    margin-bottom: 2.1vw;
    line-height: 1.8vw;
}
.editorial-text{
    font-family: 'Anton', sans-serif;
    font-size: 6.7vw;
    letter-spacing: 1vw;
    padding-right: 2.1vw;
    color: white;
    text-align: end;
}

.line-editorial{
    bottom: 6.5vw;
    left: 8vw;
    z-index: 100;
}


/*how work*/
#how-work{
    background: #151515;
    padding: 15vw;
    padding-top: 5vw;
    padding-bottom: 0;
    margin-top: -3.5vw;
}


.content-how-work h2{
    font-family: 'Montserrat', sans-serif;
    font-size: 3vw;
    color: #03e0bb;
    margin-bottom: 4.1vw;
    margin-top: 2vw;
}

.content-how-work p{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.2vw;
    color: white;
    margin-bottom: 5.2vw;
    text-align: center;
}

.scrum-text{
    font-family: 'Anton', sans-serif;
    font-size: 8vw;
    letter-spacing: 1.2vw;
    text-align: center;
    margin-bottom: -2.5vw;
    color: white;
}   

.line-scrum-1{
    left: 8vw;
    bottom: 2.5vw;
}
.line-scrum-2{
    right: 9vw;
    bottom: 2.5vw;
}

/*clients*/

#clients{
    background: #eaeaea;
    position: relative;
    z-index: 1;
    padding: 7vw;
    font-family: 'Montserrat', sans-serif;
}

#clients h2{
    font-size: 4vw;
    margin-bottom: 3vw;
}

#clients .clients-info img{
    width: 14vw;
}

/*gallery*/

#gallery{
    background: black;
    margin-top: -0.2vw;
    position: relative;
    border-top: 0.2vw solid #03e0bb;
}

.gallery-img{
    opacity: 1;
    transition: opacity 0.5s ease;
}

.gallery-img img{
width: 100%;
}

.gallery-img:hover{
    opacity: 0.4;
}


.modal-content{
    border-radius: 0;
    background: rgba(0, 0, 0, 0.986);
    border:none;

}

.img-gallery-big{
    width: 60vw;
}

/*works*/
#works{
    padding: 10vw;
    padding-top: 4vw;
    padding-bottom: 4vw;
    background: #151515;
}

.btn-web{
    background: #e1faf7;
    font-size: 1.2vw;

}

.btn-app{
    background: #30bea8;
    font-size: 1.2vw;

}

.btn-book{
    background: #e5dec4;
    font-size: 1.2vw;

}

.btn-web:hover{
    background: #6c7c7a;
    color:white;

}

.btn-app:hover{
    background: #1a6156;
    color:white;

}

.btn-book:hover{
    background: #837e6a;
    color:white;

}

/*Team*/
#team{
    background: #040603;
    padding: 4vw;
    padding-top: 14vw;
    padding-bottom: 8vw;
    position: relative;
}

.card{
    border-radius: 0;
    margin: 1.4vw;
    z-index: 10;
}

.card h2{
    font-size: 1.2vw;
    text-transform: uppercase;
    letter-spacing: 0.1vw;
    color: #202020;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}

.card p{
    font-size: 0.9vw;
    color: #686868;
    padding-bottom: 1vw;

}

.phone-number{
    font-size: 1.08vw;
    color: #555555;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    padding-bottom: 0.7vw;
}
.account{
    font-size: 0.9vw;
    color: #808080;
    margin-bottom: 4vw;
}

.card-img{
    padding: 1.8vw;
    padding-bottom: 2.5vw;

}
.card .card-img img{
    width: 14vw;
}

.team-text {
    font-family: 'Anton', sans-serif;
    top: 3vw;
    left: 30vw;
    font-size: 13vw;
    position: absolute;
    z-index: 1;
    color: #30bea8;
    letter-spacing: 1.5vw;
}

.line-team-1{
    left: 23vw;
    top: 13vw;
}
.line-team-2{
    right: 21vw;
    top: 13vw;
}

/*contact*/
#contact{
    position: relative;
}
.content-contact{
    padding: 8vw;
    padding-bottom: 18vw;
    padding-left: 10vw;
    padding-right: 10vw;
}
.form-action {
    font-size: 3vw;
    text-transform: uppercase;
    color: white;
    width: 21vw;
    margin-bottom: 4vw;
    margin-right: 4vw;
    transition: color 0.7s ease;
    position: relative; /* Para posicionar el pseudo-elemento */
    cursor: pointer; /* Para indicar que es clicable */
    overflow: hidden; /* Para ocultar el subrayado cuando no se muestra */
}

.form-action-m.in-modal{
    font-size: 28px;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    text-transform: uppercase;
    color: white;
    margin-bottom: 0;
    transition: color 0.7s ease;
    position: relative; /* Para posicionar el pseudo-elemento */
    cursor: pointer; /* Para indicar que es clicable */
    overflow: hidden; /* Para ocultar el subrayado cuando no se muestra */

}
.form-action-m.in-modal.support{
    width: 100%;
}


.form-action::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.3vw; /* Grosor del subrayado */
    background-color: #03e0bb; /* Color del subrayado */
    transform: translateX(-102%); /* Comienza fuera de la vista */
    transition: transform 0.8s ease; /* Transición de la animación */
}

.form-action.active::after {
    transform: translateX(0); /* Muestra el subrayado */
}

.form-action-m::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.3vw; /* Grosor del subrayado */
    background-color: #03e0bb; /* Color del subrayado */
    transform: translateX(-102%); /* Comienza fuera de la vista */
    transition: transform 0.8s ease; /* Transición de la animación */
}

.form-action-m.active::after {
    transform: translateX(0); /* Muestra el subrayado */
}

.form-action:hover {
    color: #03e0bb;
}

.input-custom-an {
    transition: opacity 0.5s ease, max-height 1s ease; 
    opacity: 0;
    max-height: 0; 
    overflow: hidden;
    margin: 0;
}

.custom-input{
    background: #00000000;
    border: none;
    border-radius: 0;
    border-bottom: 0.25vw solid #03e0bb;

}

.field {
    display: flex;
    flex-flow: column-reverse;
    margin-bottom: 1em;
  }
  /**
  * Add a transition to the label and input.
  * I'm not even sure that touch-action: manipulation works on
  * inputs, but hey, it's new and cool and could remove the 
  * pesky delay.
  */
  label, input {
    transition: all 0.2s;
    touch-action: manipulation;
  }
  
  input {
    font-size: 0.8vw;
    border: 0;
    border-bottom: 0.25vw  solid #03e0bb;
    font-family: inherit;
    background: transparent;
    -webkit-appearance: none;
    border-radius: 0;
    padding: 0;
    padding-bottom: 1vw;
    cursor: text;
    color: white;
  }
  
  input:focus {
    outline: 0;
    border-bottom: 0.15vw solid #4affe1;
  }
  
  label {
    letter-spacing: 0.05vw;
    color: white;
    font-size: 0.7vw;

  }
  /**
  * Translate down and scale the label up to cover the placeholder,
  * when following an input (with placeholder-shown support).
  * Also make sure the label is only on one row, at max 2/3rds of the
  * field—to make sure it scales properly and doesn't wrap.
  */
  input:placeholder-shown + label {
    cursor: text;
    max-width: 66.66%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left bottom;
    transform: translate(0, 2.125vw) scale(1.5);
  }
  /**
  * By default, the placeholder should be transparent. Also, it should 
  * inherit the transition.
  */
  ::-webkit-input-placeholder {
    opacity: 0;
    transition: inherit;
  }
  /**
  * Show the placeholder when the input is focused.
  */
  input:focus::-webkit-input-placeholder {
    opacity: 1;
  }
  /**
  * When the element is focused, remove the label transform.
  * Also, do this when the placeholder is _not_ shown, i.e. when 
  * there's something in the input at all.
  */
  input:not(:placeholder-shown) + label,
  input:focus + label {
    transform: translate(0, 0) scale(1);
    cursor: pointer;
  }




.input-custom-an.show {
    opacity: 1;
    max-height: 100px; 
}

.form-action.support{
    width: 13vw;
}

.input-custom{
    margin-top: 2vw;
    margin-bottom: 2vw;
    border-bottom: 0.25vw solid #03e0bb;
    color: white;
    width: 35vw;
} 

.input-custom.in-modal{
    margin-top: 0;
    width: 24vw;
} 

.input-custom.in-modal input{
    width: 18.8vw;
}

.input-custom label{
    font-size: 0.8vw;
}

.input-custom input{
    width: 30.8vw;
    background: #04060300;
    border: none;
    color: white;
}



.input-custom textarea{
    width: 30.8vw;
    background: #04060300;
    border: none;
    color: white;
}

.input-custom.in-modal textarea{
    width: 18.8vw;
}

.btn-submit{
    background: #30bea8;
    color: white;
    text-transform: uppercase;
    font-size: 0.9vw;
}

.btn-submit:hover{
    background: rgb(218, 218, 218);
    color: #30bea8;
    text-transform: uppercase;
}

#contact h2{
    margin-top: 2vw;
    font-size: 4vw;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    color: white;
    font-weight: 400;
}

.contact-info{
    display: flex;
    justify-content: start;
}

.contact-info p{
    margin-right: 2vw;
    font-size: 0.9vw;
    color: white;
    margin-top: 33px;
}

/*footer*/
#footer{
    color: white;
    background: black;
    font-size: 13px;
    position: relative;
    z-index: 10000;
}
.grecaptcha-badge,
.btn-recaptcha{
    visibility: hidden !important;
    overflow: hidden !important;
    opacity: 0;
}
::selection {
    background: #04bd9e;
    color: #fff;
    text-shadow: none;
}

@media(max-width:991px){

    .tree-contact{
        position: absolute;
        bottom: 9vw;
        left: 45vw;
        z-index: 2;
        width: 12vw;
    }

    #header{
        font-size: 2vw;
    }
    #navbar{
        font-size: 2vw;
    }

    #navbar.scrolled {
        font-size: 2vw;
    }
    .content-logo{
        display: none;
    }
    .content-nav{
        width: 100%;
    }
    .logo-responsive{
        display: flex;
        align-items: end;
    }
    .logo{
        width: 18vw;
    }

    input {
        font-size: 1.2vw;
      }
      
    label {
        font-size: 1vw;
    
    }
    #navbar .container{
        max-width: 90%;;
    }
    .navbar-responsive{
        display: flex;
    }
    .nav-link:hover{
        color: #0cc9a9;
        font-size: 1.8vw;    
    }
    #header .item{
        padding: 0.8vw;
    }

    .content-video h1{
        font-size: 7vw;
        margin-top: 1vw;
    
    }
    .content-video p{
        font-size: 3vw;
    }
    .button-video{
        margin-top: 0.1vw;
    }

    .fixed-bar-item {
        width: 4vw;
        margin-left: -2vw;
    }
    
    .fixed-bar-item:hover {
        width: 3.2vw;
        margin-left: -1.5vw;
    
    }

    .fixed-bar-item.item-1 {
        margin-top: 20vw;
    }
    .fixed-bar-item.item-2 {
        margin-top: 27vw;
    }
    .fixed-bar-item.item-3 {
        margin-top: 34vw;
    }

    .about-us-content{
        font-size: 1.2vw;
        margin-top: 5vw;
    }

    .solutions-text{
        font-size: 1.5vw;
    }
    .solutions-content{
        padding-right: 3.4vw;
    }

    .content-literature h2{
        font-size: 4.2vw;
    }
    .content-literature p{
        font-size: 1.4vw;
    }

    .content-how-work h2{
        font-size: 4vw;
        margin-bottom: 7vw;
        margin-top: 7vw;
    }
    
    .content-how-work p{
        font-size: 1.6vw;
        margin-bottom: 5.2vw;
    }
    .card h2{
        font-size: 1.7vw;
        text-transform: uppercase;
        letter-spacing: 0.1vw;
        color: #202020;
        font-family: 'Montserrat', sans-serif;
        font-weight: 800;
    }    
    .card p{
        font-size: 1.4vw;
        color: #686868;
        padding-bottom: 1vw;
    
    }    
    .phone-number{
        font-size: 1.5vw;
        color: #555555;
        font-family: 'Montserrat', sans-serif;
        font-weight: 800;
        padding-bottom: 0.7vw;
    }
    .account{
        font-size: 1.4vw;
        color: #808080;
        margin-bottom: 4vw;
    }    
    .card-img{
        padding: 0.2vw;
        padding-bottom: 2.5vw;    
    }
    .card .card-img img{
        width: 12vw;
    }
    .input-custom label{
        font-size: 1.8vw;
    }    
    .input-custom input{
        width: 25.8vw;
        background: #04060300;
        border: none;
        color: white;
    }
    
    .input-custom textarea{
        width: 25.8vw;
        background: #04060300;
        border: none;
        color: white;
    }

    .btn-submit{
        background: #30bea8;
        color: white;
        text-transform: uppercase;
        font-size: 1.2vw;
    }

    .contact-info p{
        font-size: 1.2vw;
    }
    
    #footer{
        font-size: 1.4vw;
    }

    #contact h2{
        font-size: 5vw;
    }
    
}

@media(max-width:767px){


    .alerts{
        top: 18vw;
        right:2vw;
        padding: 2vw;
        font-size: 4vw;
        width: 60vw;
    }

    .btn-submit{
       width: 100%;
    }

    .form-action {
        font-size: 4.5vw;
        width: 32vw;
    }
    .form-action.support {
        width: 20vw;
    }

    .form-action-m.in-modal{
        font-size: 14px;
    }

    input {
        font-size: 3.2vw;
      }
      
      
      label {
        font-size: 2vw;
    
      }

    .tree-contact{
        display: none;
    }

    .tree-home{
        position: absolute;
        bottom: 1vw;
        left: 32vw;
        z-index: 2;
        width: 36vw;
    }

    .tree-desing-text{
        position: absolute;
        bottom: 0vw;
        left: 45vw;
        z-index: 2;
        width: 12vw;
    }

    .logo{
        width: 30vw;
    }
    #navbar{
        font-size: 3.5vw;
    }

    #header{
        font-size: 3.1vw;
        text-align: center;
        justify-content: center;
    }

    .navbar-toggler-icon{
        width: 20px;
        height: 20px;
    }

    .video-container {
        max-width: 100%;
        overflow: hidden;
        position: relative;
    }

    .video-container video {
        width: 200%;
        height: 100%;
        object-fit: cover; /* Cambia a 'contain' si prefieres ver el video completo */
        object-position: center; /* Ajusta la posición del video */
    }

    .content-video h1{
        font-size: 10vw;
        margin-top: 50vw;
    
    }
    .content-video p{
        font-size: 4vw;
    }
    .button-video{
        margin-top: 0.1vw;
        font-size: 3vw;
    }

    .about-us-content{
        position: absolute;
        top: -10vw;
        width: 80vw;
        left: 4vw;

        text-align: center;
        font-size: 3.5vw;
        margin: 3vw;
        padding-top: 26vw;
        padding-bottom: 1vw;
        z-index: 10;
    }

    .img-about-us-content .img-about-us{
        filter: brightness(0.2); 
    }

    .text-about-us{
        top: 4vw;
        left: 19vw;
        font-size: 6.2vw;
    }

    .text-desing-info {
        bottom: -4.6vw;
        left: 18vw;
        font-size: 14.4vw;
        letter-spacing: 1vw;
    }
    
    .line-design-1{
        left: 10vw;
        bottom: 4.5vw;
        z-index: 100;
        height: 0.5vw;
    }
    .line-design-2{
        right: 10vw;
        bottom: 4.5vw;
        z-index: 100;
        height: 0.5vw;
    }

    .text-about-us-info {
        top: 28vw;
        left: 13.5vw;
        font-size: 16.5vw;
        letter-spacing: 1vw;
    }
    
    .line-developer{
        top: 49vw;
        left: 46.5vw;
        z-index: 100;
        height: 0.5vw;
        width: 8vw;
    }
    .more-info-content{
        padding-top: 10vw;
        padding-bottom: 10vw;
        padding-left: 13.16vw;
        padding-right: 11.4vw;

    }
    .more-info-title{
        font-size: 8vw;
    }

    .more-info-text{
        font-size: 4vw;
    }

    .solutions-text{
        font-size: 4vw;
    }
    .solutions-title{
        font-size: 8.6vw;
        margin-bottom: 2vw;
    }

    .more-info-button{
        font-size: 3vw;
        padding: 2vw;
        padding-left: 6vw;
        padding-right: 6vw;
    }


     .carousel .carousel-indicators button {
        width: 2.9vw;
        height: 2.9vw;
     }
     .carousel .carousel-indicators  {
        margin-left: 10vw  ;
        margin-bottom: -5vw;
    }

    .big-text-solutions {
        font-family: 'Anton', sans-serif;
        top: 59vw;
        left: 47vw;
        padding-right: 0;
        font-size: 5vw;
        position: absolute;
        z-index: 1;
        color: #03e0bb;
        letter-spacing: 0.8vw;
    }
    .line-solutions{
        left: 40vw;
        top: 62.6vw;
    }

    .content-literature{
        padding-right: 10.4vw;
        padding-left: 13.4vw;
    }
    .content-literature h2{
        font-size: 9.2vw;
    }
    .content-literature p{
        font-size: 4vw;
        line-height: 5vw;
    }
    .editorial-text{
        font-size: 10.7vw;
        letter-spacing: 1vw;
    }
    
    .line-editorial{
        bottom: 7.5vw;
        left: 43vw;
        height: 0.5vw;
    }
    
    #how-work{
        padding: 0;
        padding-top: 4vw;
    }
    .content-how-work h2{
        font-size: 8vw;
        margin-bottom: 4vw;
        margin-top: 2vw;
    }
    
    .content-how-work p{
        font-size: 4vw;
        margin-bottom: 5.2vw;
        text-align: center;
    }
    
    .scrum-text{
        font-family: 'Anton', sans-serif;
        font-size: 14vw;
        letter-spacing: 1.2vw;
        text-align: center;
        margin-bottom: -4vw;
        color: white;
    }   
    
    .line-scrum-1{
        left: 12vw;
        bottom: 3.5vw;
    }
    .line-scrum-2{
        right: 12vw;
        bottom: 3.5vw;
    }

    #clients h2{
        font-size: 12vw;
    }

    .clients-info .col-md-3{
        margin: 1vw;
    }

    .btn-web{
        font-size: 3.2vw;
        margin-bottom: 2vw;
    }
    
    .btn-app{
        font-size: 3.2vw;
        margin-bottom: 2vw;

    }
    
    .btn-book{
        font-size: 3.2vw;
    }

    
    
    .card h2{
        font-size: 4.2vw;
    }
    
    .card p{
        font-size: 3.9vw;
    }
    
    .phone-number{
        font-size: 3.78vw;
    }
    .account{
        font-size: 3.9vw;
    }
    
    .card .card-img img{
        width: 24vw;
    }


    .content-contact{
        padding-right: 13vw;
    }

    
    .input-custom{
        width: 100%;
    } 
    
    .input-custom label{
        font-size: 3vw;
    }

    
    .input-custom input{
        width: 54.8vw;
    }
    
    .input-custom textarea{
        width: 54.8vw;
    }
    

    .btn-submit{
        margin-top: 6vw;
        font-size: 3.9vw;
    }
    
    
    #contact h2{
        margin-top: 8vw;
        font-size: 7vw;
    }
    
    .contact-info{
        display: block;
    }

    .contact-info p{
        font-size: 2.6vw;
    }

    #footer{
        font-size: 2.4vw;
    }

    .fixed-bar {
        width: 0.4vw;
    }
    
    .fixed-bar-item {
        position: fixed;
        z-index: 1000; 
        width: 9vw;
        margin-left: -4.5vw;
    }

    .fixed-bar-item:hover {
        width: 7vw;
        margin-left: -2.9vw;
    
    }
    
    
    .fixed-bar-item.item-1 {
        margin-top: 45vw;
    }
    .fixed-bar-item.item-2 {
        margin-top: 60vw;
    }
    .fixed-bar-item.item-3 {
        margin-top: 75vw;
    }
    
}