.mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}


.black_btn {
    color: var(--text-white);
    background-color: black;
    font-size: 16px;
    padding: 9px 30px;
    border-radius: 35px;
    margin-left: 20px;
    position: relative;
    transform: translate3d(-3px, -4px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    transition: .4s all;
    z-index: 2;
}

.black_btn:hover {
    color: var(--text-white);
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
}


.nav-item .active{
    background-color: white !important;
}

.btn_download_hero{
    min-width: 250px !important;
}


@media (max-width: 768px) {

    .btn_download_hero img{
        width: 132px;
    }
    



    .hero_image::before {
        width: 0px;
    }
    
    .hero_image::after {
        width: 0px;
    }

}



/* Para dispositivos móviles */
.view-mobile {
  display: none; /* Oculta por defecto */
}

@media (max-width: 768px) {
  .view-mobile {
      display: block; /* Muestra en dispositivos con ancho máximo de 768px (ajusta este valor según tus necesidades) */
  }
}

/* Para computadoras de escritorio */
.view-pc {
  display: block; /* Muestra por defecto */
}

@media (max-width: 768px) {
  .view-pc {
      display: none !important; /* Oculta en dispositivos con ancho máximo de 768px (ajusta este valor según tus necesidades) */
  }
}



.icon-caracteristica{
    width: 56px !important;
}

.img-tarjeta-uan-1{
    width: 400px;
}


@media (max-width: 768px) {

    .img-tarjeta-uan-1{
        margin-top: 40px;
        width: 250px;
    }
    
}
  
  

.form-control{
    color: black !important;
}

.btn_enviar_form{
    min-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.experts_box:hover{
    background-color: #062C2D !important;

}

/* Media query para dispositivos móviles */
@media (max-width: 767.98px) {
    .p-3-mobile {
      padding: 1.3rem !important;
    }
}

/* Clase para aplicar borde rojo */
.border-red {
  border: 2px solid red;
}




/* Estilos específicos para móviles */
@media (max-width: 600px) {
    .links li {
        width: 100%;
    }
}


.circle-background {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150px; /* Ajusta el tamaño del círculo */
    height: 150px; /* Ajusta el tamaño del círculo */
    background-color: rgba(0, 0, 0, 0.5); /* Color y transparencia del círculo */
    border-radius: 50%;
    z-index: 1;
}

.text img {
    position: relative;
}


.punto-negro::before {
    content: ''; /* Contenido vacío para crear el pseudoelemento */
    display: inline-block; /* Mostrar como elemento en línea para ajustar el tamaño */
    width: 8px; /* Ancho del punto negro */
    height: 8px; /* Alto del punto negro */
    background-color: rgba(182, 182, 182, 0.384); /* Color del punto negro */
    margin-right: 8px; /* Espacio a la derecha del punto */
    border-radius: 50%; /* Hace que el punto sea redondeado */
  }
  


@media (max-width: 576px) {
  .mt-4-mobile {
    margin-top: 1rem !important; /* Ajusta el tamaño según tus necesidades */
  }

  .mb-4-mobile {
    margin-top: 1rem; /* Ajusta el tamaño según tus necesidades */
  }

  .mb-5-mobile {
    margin-bottom: 1.5rem; /* Ajusta el tamaño según tus necesidades */
  }

  .h2-title-descarga{
    font-size: 30px !important;
  }


  
}



@media (max-width: 320px) {
    .btn_descarga_mobile{

        left: -6% !important;
    
      }
    
}


.value_slider {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  
  .item {
    flex: 1 0 100%; /* Ajusta el ancho de los elementos como sea necesario */
    display: flex;
  }
  
  .value_block {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    flex-grow: 1;
  }
  
  .value_block .text {
    flex-grow: 1;
  }
  
  .owl-carousel .owl-item {
    display: flex;
  }
  


@media (max-width: 900px) {
    .nav-item a:hover{
        color: rgb(0, 82, 31) !important;
        text-decoration: underline;
    }

}

