@font-face {
    font-family: 'NexaLight';
    src:url('../fonts/NexaLight.ttf.woff') format('woff'),
        url('../fonts/NexaLight.ttf.svg#NexaLight') format('svg'),
        url('../fonts/NexaLight.ttf.eot'),
        url('../fonts/NexaLight.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bitsumishi';
    src:url('../fonts/Bitsumishi.ttf.woff') format('woff'),
        url('../fonts/Bitsumishi.ttf.svg#Bitsumishi') format('svg'),
        url('../fonts/Bitsumishi.ttf.eot'),
        url('../fonts/Bitsumishi.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

html {
    font-size: 62.5%;
    /**reset para rems 62.5 = 10 px de 16px*/
    overflow-x: hidden;
}

nav img{
    width: 40%;
}

.btn-success{
    background-color: rgb(138, 184, 70);
    border-color: rgb(138, 184, 70);
    width: 20%;
    border-radius: 20px;
}

.btn-success:hover{
    background-color: rgb(37, 107, 175);
    border-color: rgb(37, 107, 175);
}

nav a{
    font-size: 1.6rem;
    font-family: 'NexaLight';
    margin-right: 1.2rem;
    font-weight: bold;
}

.carousel-caption h1{
    font-family: 'NexaLight';
    font-size: 4rem;
}

.carousel-caption h2{
    font-family: 'NexaLight';
    font-size: 2rem;
}

.carousel-caption{
    background-color: rgba(139, 139, 139, 0.123);
    border-radius: 3%;
    top: 25%;  /* Posiciona el contenido verticalmente a un 40% desde la parte superior */
    left: 15%;  /* Centra el contenido horizontalmente */
    transform: translateX(-40%);  /* Ajusta para que el contenido esté centrado */
    right: auto;  /* Elimina cualquier ajuste desde la derecha */
    bottom: auto;  /* Elimina cualquier ajuste desde la parte inferior */
    text-align: left;  /* Alinea el texto a la izquierda */
    width: 30%;
    padding: 2%;
}

.carousel-control-next, .carousel-control-prev{
    width: 5%;
}


.navbar-brand{
    margin-right:  0;
    width: auto;
}

.navbar{
    z-index: 1;
}

.navbar:hover{
    background-color: #ffffffc4;
}

.dropdown-menu{
    border-radius: 1rem;
}

#carouselExampleControls, .carousel-inner, .carousel-inner img{
    height: 100vh   
}

#Carrusel{
    margin-top: -11.2rem;
}

.container_ind{
    margin-left: 4rem;
    margin-right: 4rem;
}

.barra_verde{
    background-color: rgb(139, 184, 70);
    height: 10px;
}

.barra_azul{
    background-color: rgb(37, 107, 175);
    height: 10px;
}

.texto h1{
    font-family: 'Bitsumishi';
    font-size: 4rem;
    text-align: center;
}

.texto p{
    font-family: 'NexaLight';
    font-size: 1.8rem;
}

.col_texto{
    text-align: center;
}

.col_texto h1{
    font-family: 'Bitsumishi';
    font-size: 6rem;
    color: rgb(139, 184, 70);
    margin-bottom: 0;
}

.col_img_bien{
    text-align: center;
}

.col_img_bien img{
    width: 50%;
}

#Industria h1, #Productos h1{
    font-family: 'Bitsumishi';
    font-size: 4rem; 
    text-align: center;
}

.txt_h2{
    font-family: 'NexaLight';
    font-size: 2rem;
    margin-left: 3rem;
    margin-right: 3rem;
}

.fila_industria{
    position: relative;
    text-align: center;
    align-items: center;
    border-radius: 10px;
    display: flex;
    height: auto;
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
}

.fadein {
    opacity: 0;
    transition: all 0.7s;
    transform: translate(0, 100px);
  }
  
  .fadein.visible {
    opacity: 1;
    transform: translate(0, 0);
  }

.bordeado_verde{
    flex: 0 0 auto;
    height: 250px;
    width: 50%;
    position: absolute; /* Permite el posicionamiento absoluto dentro del contenedor */
    top: 0; /* Ubica el div en la parte inferior */
    right: 0; /* Ubica el div en la parte derecha */
    background-color: rgb(138, 184, 70); /* Solo para visualización */
    padding: 10px; /* Opcional: espacio interno */
    border-radius: 0 0 0 100%;
    z-index: -1;    
}

.bordeado_azul{
    flex: 0 0 auto;
    height: 250px;
    width: 50%;
    position: absolute; /* Permite el posicionamiento absoluto dentro del contenedor */
    top: 0; /* Ubica el div en la parte inferior */
    left: 0; /* Ubica el div en la parte derecha */
    background-color: rgb(37, 107, 175); /* Solo para visualización */
    padding: 10px; /* Opcional: espacio interno */
    border-radius: 0 0 100% 0;

}


.texto_industria h2{
    font-family: 'Bitsumishi';
    font-size: 3.5rem;
}

.texto_productos h2{
    font-family: 'Bitsumishi';
    font-size: 2.5rem;
}

.texto_industria p, .texto_productos p{
    font-family: 'NexaLight';
    font-size: 1.8rem;
    text-align: left;
    margin-left: 3rem;
    margin-right: 3rem;
}

.texto_industria ul{
    font-family: 'NexaLight';
    font-size: 1.8rem;
    text-align: left;
    color: rgb(139, 184, 70);
    font-weight: 600;
    
}

.texto_industria{
    z-index: 1;
}

.img_trans img{
    text-align: center;
    width: 60%;
    border-radius: 5%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.img_alimen img{
    text-align: center;
    width: 70%;
    border-radius: 5%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.img_petro img{
    text-align: center;
    width: 60%;
    border-radius: 5%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.img_inst img{
    text-align: center;
    width: 70%;
    border-radius: 5%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.color-blue{
    color: rgb(34, 55, 83);
    font-weight: bold;
    font-size: 2.5rem;
}

.color-green{
    color: rgb(139, 184, 70);
    font-weight: bold;
    font-size: 1.8rem;
}

.color-bluel{
    color: rgb(37, 107, 175);
    font-weight: bold;
    font-size: 2.5rem;
}

.texto_productos{
    text-align: center;
}

i{
    color: green;
    font-size: 6rem;
}

.icono_footer img{
    width: 70%;
}

footer{
    background: linear-gradient(to bottom right, rgba(37, 106, 175, 0.877), rgb(138, 184, 70));
    padding: 0.6rem;
}

.footer_cont{
    margin-top: 1rem;
    align-items: center;
}

.footer_cont a{
    text-decoration: none;
    color: rgba(0, 0, 0, 0.63);
}

.footer_cont a:hover{
    color: rgb(138, 184, 70);
    font-weight: bold;
    text-decoration: underline;
}

footer p{
    font-family: 'NexaLight';
    font-size: 1.6rem;
}

.btn{
    font-size: 2em;
}

footer i{
    font-size: 3rem;
}

footer h6{
    font-family: 'NexaLight';
    font-size: 1.8rem;
    font-weight: bold;
    color: black;
}

.final a, .final p{
    font-family: 'NexaLight';
    font-size: 1.2rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.342);
}

/*Hoja de productos */
.titulos_prod{
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.titulos_prod h1{
    font-family: 'Bitsumishi';
    font-size: 5rem;
    margin-bottom: 0;
    text-align: center;
    margin-top: 0;
}


.titulos_prod h2{
    font-family: 'NexaLight';
    font-size: 2rem;
}


.grid_prod{
    text-align: center;
    margin-bottom: 2rem;
}

.grid_prod img{
    width: 50%;
}

.grid_prod h2{
    font-family: 'NexaLight';
    font-size: 2rem;
    font-weight: bold;
    text-align: left;

}

.grid_prod h3{
    font-family: 'NexaLight';
    font-size: 1.8rem;
    text-align: left;
}

.prod_img{
    background-color: rgba(34, 55, 83, 0.048);
    border-radius: 3%;
}

/*Nosotros*/
.bien_img{
    background-image: url("../img/Nosotros_11zon.webp");
    height: 85vh;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text_bien_ini{
    font-family: 'NexaLight';
    width: 40%;
    color: azure;
    margin-left: 3rem;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 2%;
}

.text_bien_ini h1{
    font-size: 6rem;
    font-weight: bold;
}

.text_bien_ini h2{
    font-size: 2rem;
}

.text_promain p{
    font-family: 'NexaLight';
    font-size: 1.8rem;
}

.text_promain h1{
    font-family: 'Bitsumishi';
    font-size: 5rem;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0rem;
}

.text_promain h2{
    font-family: 'Bitsumishi';
    font-size: 2.5rem;
    color: rgb(138, 184, 70);
    text-align: center;
    margin-top: 0;
    margin-bottom: 2rem;
}

.col_texto_no h1{
    font-family: 'Bitsumishi';
    text-align: center;
    color: rgb(37, 107, 175);
    font-size: 6rem;
    margin-bottom: 0;
}

.col_texto_no p{
    font-family: 'NexaLight';
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
}


.img_promain img{
    width: 40%;
}

.img_promain{
    text-align: center;
}

.cont_int, .cont_promain{
    margin-top: 3rem;
    margin-bottom: 3rem;
    margin-left: 2.5rem;
    margin-right: 2.5rem;
}

.text_integrate{
    margin-left: 3rem;
}

.text_integrate h1{
    font-family: 'NexaLight';
    font-size: 5rem;
    margin-top: 0;
    margin-bottom: 0rem;
    color: rgb(37, 107, 175);
    font-weight: bold;
}

.text_integrate h2{
    font-family: 'NexaLight';
    font-size: 3rem;
    margin-top: 0;
    margin-bottom: 0rem;
    color: rgb(138, 184, 70);
    font-weight: bold;
}

.text_integrate p{
    font-family: 'NexaLight';
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 0rem;
}

.text_integrate a{
    width: 25%;
}

.img_integrate{
    text-align: center;
}

.img_integrate img{
    width: 50%;
}

.text_integrate i{
    font-size: 3rem;
}

#Aviso h1{
    font-family: 'Bitsumishi';
    font-size: 7rem;
    margin-top: -4rem;
    margin-bottom: 0rem;
    text-align: center;
}

#Aviso h2{
    font-family: 'NexaLight';
    font-size: 2.5rem;
    text-align: justify;
    color: rgb(37, 107, 175);
}

#Aviso h3{
    font-family: 'NexaLight';
    font-size: 2.3rem;
    text-align: justify;
    margin-top: 2rem;
}

#Aviso h4{
    font-family: 'NexaLight';
    font-size: 2.6rem;
    text-align: left;
    font-weight: bold;
    margin-top: 3rem;
    margin-bottom: 2rem;
    color: rgb(138, 184, 70);
}

#Aviso p, #Aviso ul, #Aviso li{
    font-family: 'NexaLight';
    font-size: 1.8rem;
    text-align: justify;
    margin-bottom: 2rem;
}

.img_contactanos {
    text-align: center;
}

.img_contactanos img{
    width: 60%;
}

.cont_aviso{
    padding: 4%;
}

.text_conta h1{
    font-family: 'Bitsumishi';
    font-size: 5rem;
    margin-top: 0rem;
    text-align: center;
}

.text_conta h2{
    font-family: 'NexaLight';
    font-size: 2rem;
    text-align: justify;
    margin-bottom: 2rem;
}

.form-group label, 
.form-group input, 
.form-group small, .form-group textarea{
    font-family: 'NexaLight';
    font-size: 1.8rem;
}

.form_h2{
    font-family: 'NexaLight';
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: rgb(138, 184, 70);
    font-weight: bold;
}

.form_promain h1{
    font-family: 'Bitsumishi';
    font-size: 5rem;
    text-align: center;
    margin-top: 0rem;
    margin-bottom: 2rem;
    color: rgb(34, 55, 83);
}

.text_conta, .form_promain{
    margin-bottom: 2rem;
}

.form_ini{
    width: 70%;
    top: 50%;  /* Posiciona el contenido verticalmente a un 40% desde la parte superior */
    left:45%;  /* Centra el contenido horizontalmente */
    transform: translateX(-40%);  /* Ajusta para que el contenido esté centrado */
}

.area_boton{
    text-align: center;
}

/*Responsibe*/
@media only screen and (max-width:600px){
    #carouselExampleControls, .carousel-inner, .carousel-inner img{
        height: 300px;   
    }

    .carousel-caption{
        display: inherit !important;
        background-color: rgba(139, 139, 139, 0.548);
        border-radius: 3%;
        top: auto;  /* Posiciona el contenido verticalmente a un 40% desde la parte superior */
        left: 50%;  /* Centra el contenido horizontalmente */
        transform: translateX(-50%);  /* Ajusta para que el contenido esté centrado */
        right: auto;  /* Elimina cualquier ajuste desde la derecha */
        bottom: 12%;  /* Elimina cualquier ajuste desde la parte inferior */
        text-align: left;  /* Alinea el texto a la izquierda */
        width: 70%;
        padding: 2%;

    }

    .carousel-caption h1{
        font-size: 1.3rem;
        font-weight: bold;
    }

    .carousel-caption h2{
        font-size: 1rem;
    }

    .col_img_bien{
        width: 50%;
    }

    .fila_industria{
        height: auto;
        margin-bottom: 2rem;
        margin-top: 2rem;
    }

    .texto_industria{
        z-index: 1;
    }

    .texto_industria h2{
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .img_alimen, .img_trans, .img_inst, .img_petro{
        margin-bottom: 2rem;
        margin-top: 2rem;
    }

    .img_alimen img, .img_trans img, .img_inst img, .img_petro img{
        width: 80%;
    }

    .text_bien_ini{
        width: 90%;
        color: azure;
        margin-left: 1rem;
        margin-right: 1rem;
        background-color: rgba(0, 0, 0, 0.568);
        padding: 4%;
    }

    .text_bien_ini h1{
        font-size: 4rem;
    }

    .text_bien_ini h2{
        font-size: 2rem;
    }

    .img_promain img{
        width: 80%;
    }

    .text_promain{
        margin-bottom: 0.5rem;
    }

    .cont_promain{
        margin-top: 0;
    }

    .img_integrate{
        margin-top: 2rem;
    }

    .img_integrate img{
        width: 80%;
    }

    #Aviso h1{
        font-family: 'Bitsumishi';
        font-size: 5rem;
        margin-top: -1rem;
        margin-bottom: 1rem;
        text-align: center;
    }
    
    #Aviso h2{
        font-family: 'NexaLight';
        font-size: 2rem;
        text-align: justify;
        color: rgb(37, 107, 175);
    }
    
    #Aviso h3{
        font-family: 'NexaLight';
        font-size: 1.9rem;
        text-align: justify;
        margin-top: 2rem;
    }

    .img_contactanos img{
        width: 80%;
    }

    .btn-success{
        width: 50%;
    }

}

.float-wa{
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    z-index:100;
}

.fa-whatsapp, .fab{
    color: white;
}

-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:0.6s;
}

.fadeIn.first {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.fadeIn.second {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.fadeIn.third {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.fadeIn.fourth {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
  display: block;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 2px;
  background-color: #56baed;
  content: "";
  transition: width 0.2s;
}

.underlineHover:hover {
  color: #0d0d0d;
}

.underlineHover:hover:after{
  width: 100%;
}