.navbar-color{
    background: #fdfffc;
    color: black;
}


.navbar {
    color: black; /* Cambia el color de texto predeterminado */
}
.nav-link{
    color: black;
}
.nav-link.active{
    color: black;
    text-decoration: underline; 
    text-decoration-color: greenyellow;
}

.navbar-nav{
    --bs-nav-link-hover-color: black;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
    color: black;
}
.subrayar {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: relative;
}

  /* Pseudo-elemento para el subrayado */
.subrayar::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: inline-block;
    margin-top: 5px;
    right: 0;
    bottom: 0;
    background: #008a36;
    transition: width 0.4s ease;
}

  /* Efecto de hover para el subrayado */
.subrayar:hover::after {
    width: 100%;
    left: 0;
    background: #008a36;
}

.subrayar-alt {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: relative;
}

  /* Pseudo-elemento para el subrayado */
.subrayar-alt::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: inline-block;
    margin-top: 5px;
    right: 0;
    bottom: 0;
    background: #008a36;
    transition: width 0.4s ease;
}

  /* Efecto de hover para el subrayado */
.subrayar-alt:hover::after {
    width: 100%;
    left: 0;
    background: #008a36;
}
.img-logo{
    width: 90px;
    height: auto;
}

.img-portada{
    width: 100%; /* Ocupa el 100% del ancho del viewport */
    height: 100vh; /* Ocupa el 100% del alto del viewport */
    object-fit: cover; /* Ajusta la imagen para llenar el área sin deformarla */
}

.portada-imagen {
    width: 100%; /* Asegura que la imagen se ajuste al ancho del contenedor */
    height: 100%; /* Asegura que la imagen cubra todo el contenedor verticalmente */
    object-fit: cover; /* Escala la imagen para cubrir el contenedor sin deformarla */
}

/* Estilo para el contenedor */
.contenedor-portada {
    position: relative; /* Necesario para posicionar elementos dentro */
    width: 100%; /* Ocupa todo el ancho del viewport */
    height: 100vh; /* Ocupa todo el alto del viewport */
    overflow: hidden;
}
.contenedor-portada-movil {
    position: relative; /* Necesario para posicionar elementos dentro */
    width: 100%; /* Ocupa todo el ancho del viewport */
    height: 25vh; /* Ocupa todo el alto del viewport */
    overflow: hidden;
}

/* Estilo para el texto */
.texto-portada {
    position: absolute; /* Permite posicionar el texto sobre la imagen */
    top: 50%; /* Centrado vertical */
    left: 50%; /* Centrado horizontal */
    transform: translate(-50%, -50%); /* Ajusta el texto al centro exacto */
    color: white; /* Color del texto */
    font-size: 4rem; /* Tamaño del texto, ajusta según necesites */
    text-align: center; /* Alineación del texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Opcional: sombra para que sea legible sobre la imagen */
    z-index: 2;
}

.video-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que el video cubra toda el área sin deformarse */
    z-index: 1; /* Envía el video al fondo */
}

.logo-superpuesto {
    max-width: 50%; /* Ajusta el tamaño de la imagen según sea necesario */
    height: auto;
}
.link-negro{
    color: black;
}

.imagen-redondeada {
    border-radius: 15px; /* Ajusta el valor para redondear más o menos */
    overflow: hidden; /* Asegura que los bordes de la imagen se recorten */
}
.banderas{
    width: 75px; /* Ajusta el ancho según sea necesario */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-left: 5px; /* Espaciado entre las banderas */
}
.parallax {
    /* The image used */
    background-image: url("images/productos-agricolas-3-firafresh.webp");

    /* Set a specific height */
    min-height: 500px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* Estilo para pantallas pequeñas (móviles) */
@media (max-width: 767px) {
    .parallax {
        /* Cambia la imagen de fondo en dispositivos móviles */
        background-image: url("images/productos-agricolas-5-firafresh.webp");
    }
}

.fondo-de-color{
    background: rgb(0,140,54);
    background: linear-gradient(126deg, rgba(0,140,54,1) 0%, rgba(0,107,51,1) 100%);
}

/* Ancho del 75% solo para dispositivos móviles */
@media (max-width: 767px) {
    .w-mobile-100 {
        width: 100% !important;
    }
}
#footer {
    background: rgb(162,26,36);
    background: linear-gradient(158deg, rgba(162,26,36,1) 62%, rgba(2,0,36,1) 100%);
}

.footer{
    color: white;
    padding: 3.4rem 0rem 4rem 0rem;
}
footer>div>div>div>div>p>a{
    text-decoration: none;
    color: white;

}
.footer-logo {
    width: 100%;
    max-height:  200px;
    max-width: 200px;
}

.img-grow{
    transition: transform 0.3s;
}
.img-grow:hover{
    transform: scale(1.05);
}
.ham-menu{
    height: 50px;
    width: 50px;
    position: relative;
}
.ham-menu span{
    width: 100%;
    height: 5px;
    background-color: #000000;
    color: #000000;
    border-radius: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease;
}
.ham-menu span:nth-child(1) {
    top: 25%;
}
.ham-menu span:nth-child(3) {
    top: 75%;
}
.ham-menu.active span:nth-child(1) {
    top: 50%;
    transform: translate(-50%,-50%)
    rotate(45deg);
}
.ham-menu.active span:nth-child(2) {
opacity: 0;
}
.ham-menu.active span:nth-child(3) {
    top: 50%;
    transform: translate(-50%,-50%)
    rotate(-45deg);
}
.navbar-toggler-icon{
    background-image: none;
}

/* From Uiverse.io by reshades */ 
.buttoncss {
    background-color: #ffffff00;
    color: #fff;
    width: 8.5em;
    height: 2.9em;
    border: #fff 0.2em solid;
    border-radius: 11px;
    text-align: right;
    transition: all 0.6s ease;
}

.buttoncss:hover {
    background-color: #063f1d;
    cursor: pointer;
}

.buttoncss svg {
    width: 1.6em;
    margin: -0.2em 0.8em 1em;
    position: absolute;
    display: flex;
    transition: all 0.6s ease;
}

.buttoncss:hover svg {
    transform: translateX(5px);
}

.text {
    margin: 0 1.5em
}

@media (max-width: 767px) {
    .buttoncss {
        text-align: center;
    }
}

.card-neu{
    border-radius: 30px;
    background: #063f1d;
    border: #fff 2px solid;
    height: 125px;
    width: 100%;
}

.contact-column {
    position: relative;
    padding: 20px;
}

.contact-column:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 10%;
    right: 0;
    width: 1px;
    height: 80%;
    background-color: white;
}
/* Ocultar las líneas en pantallas pequeñas */
@media (max-width: 768px) {
    .contact-column:not(:last-child)::after {
        display: none;
    }
}

.contact-item {
    color: white;
}

.contact-item i {
    color: white; /* Cambia el color según tu branding */
}

.contact-item h5 {
    font-weight: bold;
    margin-top: 10px;
}

.contact-item a {
    color: white;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: white; /* Efecto hover */
}

#botonWhatsApp {
    position: fixed;
    z-index: 1000;
    bottom: 3.75rem;
    right: 1.3rem;
    width: 3.125rem;
  }
  
  @media (max-width: 960px) {
    #botonWhatsApp {
        bottom: 3.75rem;
        right: 1.3rem;
        width: 2.75rem;
        position: fixed;
    }
  }
  #botonWhatsApp a {
    display: block;
  }
  
  #botonWhatsApp img {
    width: 100%;
    height: auto;
    display: block;
  }

.video-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Altura del viewport completo */
    overflow: hidden;
}
.video-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover; /* Ajusta el video para cubrir completamente */
}

.video-containerM {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.video-bgM {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.logo-overlayM {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%; /* Ajusta el tamaño del logo en móviles */
    width: 100%;
    z-index: 10; /* Asegura que el logo esté por encima del video */
    pointer-events: none;
}

.justificar{
    text-align: justify;
}
.texto-grande{
    font-size: 1.2rem;
}