/*Inicio Contenido*/

/*Fin contenido*/

/* inicio mercados */
@keyframes blink-outline {
  0% {
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.5),
      0 0 5px 2px rgba(255, 255, 255, 0.3); /* Sombra blanca inicial */
    outline: 4px solid rgba(255, 255, 255, 0.4); /* Outline blanco inicial */
  }
  20% {
    box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.7),
      0 0 10px 5px rgba(255, 255, 255, 0.5); /* Sombra blanca más intensa */
    outline: 6px solid rgba(255, 255, 255, 0.6); /* Outline más visible */
  }
  40% {
    box-shadow: 0 0 60px 30px rgba(255, 255, 255, 0.9),
      0 0 15px 10px rgba(255, 255, 255, 0.7); /* Sombra blanca aún más intensa */
    outline: 8px solid rgba(255, 255, 255, 0.8); /* Outline más brillante */
  }
  60% {
    box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.7),
      0 0 10px 5px rgba(255, 255, 255, 0.5); /* Regresa a intensidad media */
    outline: 6px solid rgba(255, 255, 255, 0.6); /* Outline igual al 50% */
  }
  100% {
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.5),
      0 0 5px 2px rgba(255, 255, 255, 0.3); /* Regresa a intensidad inicial */
    outline: 4px solid rgba(255, 255, 255, 0.4); /* Outline igual al inicio */
  }
}

#mercados {
  width: 100%;
  height: 100vh;
  padding-block: 2rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;

  .container-hoja-grande {
    width: 18rem;
    height: 17rem;
    position: absolute;
    left: -5%;
    top: 0;
    transition: transform 0.3s ease-in-out;
  }

  .container-hoja-grande img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .container-hoja-grande:hover {
    transform: translateY(-20px);
  }

  h2 {
    color: #007000;
    text-align: center;
    font-family: var(--font-2);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 45px;
    margin-bottom: 6rem;
    width: fit-content;
        margin: auto;
        position:relative;
    
  }

  h2::before {
    content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSIzMSIgdmlld0JveD0iMCAwIDQ4IDMxIiBmaWxsPSJub25lIj4KPHBhdGggb3BhY2l0eT0iMC4yIiBkPSJNMCA0LjIwNTI1QzM1LjIwMDEgLTkuNTY4NzEgNDYuNTUwOSAxMy43NzA1IDQ3LjgyNjIgMjcuMTYxOEMzNC4wNTIzIDM0LjgxNCAyNC4yNTA4IDI3LjgzNzIgMjEuMDQzNSAyMS40MjI3QzE3LjIxNzQgMTMuNzcwNSAxMy43NzQgNS43MzU2NyAwIDQuMjA1MjVaIiBmaWxsPSIjOEVCRjM4Ii8+Cjwvc3ZnPg==);
        /* position: absolute; */
        
        left: 1rem;
  }
  .container {
    /* height: 100%; */
    width: 100%;
    /* background-position: center;
    background-repeat: no-repeat;
    background-size: contain; */
    position: relative;
    display: inline-block;

    img {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
    }

    .marker {
      width: 10px;
      height: 10px;
      background-color: green;
      border-radius: 50%;
      position: absolute;
      /* top: 35%;
    left: 20%; */
      transform: translate(-50%, -50%);

      .mundito {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        top: -98px;

        /* top: 50%;
      left: 50%; */
        .pais {
          opacity: 0;
          transition: opacity 0.4s ease;
          position: relative;
          top: -60px; /* Ajusta según la posición final que necesites */
          display: inline-flex;
          padding: 8px 20px;
          justify-content: center;
          align-items: center;
          width: max-content;
          border-radius: 15px 0px;
          background: var(--3, #2b0002);
          color: var(--2, #fff);
          text-align: center;
          font-family: var(--font-4);
          font-size: 25px;
          font-style: normal;
          font-weight: 400;
          line-height: 25px;
          z-index: 2;
        }

        .circle-top,
        .line,
        .circle-bot {
          transition: all 0.4s ease-in-out;
        }

        .circle-top {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          border: 4px solid #007000;
          outline: 3px solid rgba(0, 0, 0, 0.25);
          background-color: #d9d9d9;
          position: relative;
          z-index: 1;
          animation: blink-outline 2.5s infinite; /* Añade la animación */
        }

        .line {
          width: 4px;
          height: 50px;
          background-color: var(--color-3);
          position: relative;
          z-index: 0;
          margin-top: -30px;
        }
        .circle-bot {
          width: 15px;
          height: 15px;
          background-color: #007000;
          border-radius: 50%;
          position: relative;
          z-index: 1;
        }
      }

      .mundito:hover .line {
        height: 100px;
        margin-top: -80px;
      }

      .mundito:hover .circle-top {
        transform: translateY(-50px);
      }
         .mundito:hover .pais{
        opacity: 1;
      }
    }
  }
  #splide-wordl{
    display: none;
  }
}
/* fin mercados */


#contactanos {
  width: 100%;
  height: 100%;
  min-height: 25rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  /* padding-block-start: 8rem; */
  .container-flor-rosada {
    width: 23rem;
    height: 21rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -20%;
    left: -5%;
    img {
      height: 100%;
      width: 100%;
      object-fit: contain;
      object-position: center;
    }
  }

  .contenedor {
    height: 100%;
    .grid-contactanos {
      height: 100%;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      .box-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-inline: 1rem;
        position: relative;
        .container-svg {
          width: 3rem;
          height: 3rem;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
          }
        }

        .container-descripcion {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 1rem;
          h4 {
            color: var(--color-3);
            text-align: center;
            font-family: var(--font-3);
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
            line-height: 20px;
          }
          a {
            color: var(--color-3);
            text-align: center;
            font-family: var(--font-4);
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
          }
        }
      }

      .box-grid:nth-child(1)::after {
        content: "";
        position: absolute;
        height: 100%;
        width: 2px;
        right: 0;
        background-color: green;
        margin-left: 2rem;
      }
      .box-grid:nth-child(2)::after {
        content: "";
        position: absolute;
        height: 100%;
        width: 2px;
        right: 0;
        background-color: green;
        margin-left: 2rem;
      }
    }
  }
}


#contenido {
  height: 100%;
  width: 100%;
  padding-top: 4rem;
  position: relative;
  padding-bottom: 10rem;

  .contenedor {
  }

  .container-buttons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    position: relative;
    z-index: 3;

    button {
      border: none;
      padding: 15px 25px;
      align-items: center;
      align-items: center;
      border-radius: 25px 0px;
      color: var(--color-3);
      background: rgba(142, 191, 56, 0.1);
      text-align: center;
      font-family: "JostRegular";
      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: 20px;
    }
    button.active {
      display: inline-flex;
      padding: 15px 25px;
      justify-content: center;
      align-items: center;
      gap: 7px;
      border-radius: 25px 0px;
      background: var(--color-2);
      color: white;
    }
  }

  .container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    .content {
      display: none;
      flex: 1;
      padding: 20px;
      /* border: 1px solid #ddd; */
      /* border-radius: 5px; */
      /* background-color: #f9f9f9; */
    }
    #spanish-content,
    #english-content {
      display: flex; /* Mostrar el contenido en español inicialmente */
      gap: 2rem;
      padding-block: 5rem 0;
      .container-image {
        flex-basis: 50%;
        width: 100%;

        height: 29rem;
        max-width: 32rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 100%;
          height: 100%;

          object-fit: cover;
          object-position: center;
        }
      }

      .container-texto {
        flex-basis: 50%;
        width: 100%;
        height: max-content;
        padding-inline: 3rem;
        display: flex;
     
        flex-wrap: wrap;
        /* align-items: center; */
        align-self: center;
        justify-content: space-between;
        p {
          color: var(--color-3);
          font-family: var(--font-4);
          font-size: 20px;
          font-style: normal;
          font-weight: 300;
          line-height: 25px;
        }
        strong {
          font-weight: 700;
        }
      }
    }
    #english-content {
      display: none;
    }
  }

  .container-dientes-leon {
    width: 18rem;
    height: 20rem;
    position: absolute;
    bottom: -5%;
    right: -5%;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
}

/* section productos importacion */
#productos-importacion {
  width: 100%;
  height: 60vh;
    min-height: 30rem;
  position: relative;

  .container-hierba-grande {
    width: 17rem;
    height: 17rem;
    position: absolute;
    top: -5%;
    right: 0;
    display:none;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
  .contenedor {
    width: min(90%, 1550px);
    margin-inline: auto;
    .importacion-info {
      display: flex;
      flex-direction: column;
      align-items: center;
            justify-content: center;
      gap: 1rem;
      h2 {
        color: #007000;
        text-align: center;
        font-family: var(--font-2);
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 45px;
        width: fit-content;
        position:relative;
      }

      h2::before {
        content: "";
        position: relative;
        display: inline-flex;
        left: 0;
        width: 50px;
        height: 40px;
        background-image: url(../../images/hojita.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }
      p {
        color: var(--color-3);
        text-align: center;
        font-family: var(--font-4);
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 25px;
        max-width: 80%;
        margin: auto;
        strong {
          font-weight: 700;
        }
      }
    }

    #splide-productos-importacion {
      .splide__arrow {
        border-radius: 1px solid #4d4d4d !important;
      }
      .splide__arrow--prev {
        left: -3%;
        height: 40px;
        width: 40px;
        border-radius: 1px solid #4d4d4d !important;
      }
      .splide__arrow--next {
        right: -3%;
        height: 40px;
        width: 40px;
        border-radius: 1px solid #4d4d4d !important;
      }
      .splide__track {
        width: 100%;
        height: 100%;

        .splide__list {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          .splide__slide {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
              transition: all 0.3s ease-in-out;

            .container-image-producto {
              height: 18rem;
              width: 20rem;
                transition: all 0.3s ease-in-out;

              img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center;
                transform: scale(.8);
                transition: all 0.3s ease-in-out;
              }
            }
            .container-info-producto {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-inline: 1rem;
              p:nth-child(1) {
                color: var(--color-2);
                font-family: var(--font-4);
                font-size: 15px;
                font-style: normal;
                font-weight: 400;
                line-height: 15px;
              }
              p {
                /* width: 271px; */
                flex-shrink: 0;
                color: var(--color-3);
                font-family: var(--font-3);
                font-size: 20px;
                font-style: normal;
                font-weight: 500;
                line-height: 25px;
              }
            }
               &:hover{
                   
                      .container-image-producto{
                transform: scale(1.1);
              }
                   
              .container-info-producto{
                a,p{
                  font-weight: 700;
                }
              }
            }
          }
        }
      }
    }
  }
}
/* fin section productos importacion */

/* inicio proceso expotacion */

#proceso-exportacion {
  width: 100%;
  height: 100%;
  .contenedor {
    padding-bottom: 4rem;
    .texts {
        display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
      h2 {
        color: #007000;
        text-align: center;
        font-family: var(--font-2);
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 45px;
        
        &::before{
            content:'';
              display: inline-block;
            position: relative;
            left: 1rem;
            
            width: 47px;
            height: 30px;
            /* margin-right: 10px; */
            background-image: url(../../images/hojita.svg);
            background-size: contain;
         
            background-repeat: no-repeat;
            background-position: center;

            
        }
            
      }
      p {
        flex-shrink: 0;
        color: var(--color-3);
        font-family: var(--font-3);
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 25px;
        text-align: center;
        strong {
          font-weight: 700;
        }
      }
    }
  }
  .row {
    min-height: 20rem;
  }

  .progressbar {
    margin: 50px 0 50px 0;
    counter-reset: step;
  }

  .progressbar li {
    list-style-type: none;
    width: 25%;
    float: left;
    font-size: 12px;
    position: relative;
    text-align: center;
    /*text-transform: uppercase;*/
    color: #7d7d7d;
  }

  .progressbar li .textos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .progressbar li .textos button {
    border-radius: 15px 0px;
    background: rgba(0, 112, 0, 0.1);
    display: inline-flex;
    height: 36px;
    padding: 8px 16px;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    border: none;
    color: #007000;
    text-align: center;
    font-family: var(--font-4);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }

  .progressbar li .textos p {
    max-width: 150px;
    color: #2b0002;
    font-family: var(--font-4);
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 29px;
  }

  .progressbar li:before {
    width: 40px;
    height: 40px;
    content: "";
    line-height: 30px;
    border: 4px solid #7d7d7d;
    background-color: #7d7d7d;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    opacity: 0;
    transition: all 1s ease-in-out;
  }

  @keyframes blink-combined {
    0% {
      box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.5),
        0 0 5px 2px rgba(255, 255, 255, 0.3); /* Sombra blanca inicial */
      outline: 4px solid rgba(255, 255, 255, 0.4); /* Outline blanco inicial */
    }
    50% {
      box-shadow: 0 0 60px 30px rgba(255, 255, 255, 0.9),
        0 0 15px 10px rgba(255, 255, 255, 0.7); /* Sombra blanca intensa */
      outline: 8px solid rgba(255, 255, 255, 0.8); /* Outline más brillante */
    }
    80% {
      box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.7),
        0 0 10px 5px rgba(255, 255, 255, 0.5); /* Regresa a intensidad media */
      outline: 6px solid rgba(255, 255, 255, 0.6); /* Outline igual al 50% */
    }
    100% {
      box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.5),
        0 0 5px 2px rgba(255, 255, 255, 0.3); /* Regresa a intensidad inicial */
      outline: 4px solid rgba(255, 255, 255, 0.4); /* Outline igual al inicio */
    }
  }
  
  

  .progressbar li:after {
    width: 0; /* Inicia con ancho 0 */
    height: 4px;
    content: "";
    position: absolute;
    background: #ededed;
    top: 19px;
    left: -50%;
    z-index: -1;
    transition: width 2s ease; /* Transición para el cambio suave de ancho */
  }

  .progressbar li:first-child:after {
    content: none;
  }

  .progressbar li.active .textos button {
    color: white;
    background: var(--7, #007000);
  }

  .progressbar li.active .textos p {
    font-weight: 700;
  }

  .progressbar li.active:before {
    border-color: #55b776;
    background: var(--7, #007000);
    opacity: 1;
    animation: blink-combined 2s infinite ease-in-out !important;
  }

  .progressbar li.active:after {
    width: 100%; /* Se extiende el ancho al 100% cuando el <li> está activo */
    background: var(--7, #007000);
    transition: width 1s ease; /* Suaviza la transición del ancho */
  }
}
/* fin proceso exportacion */

/* inicio casos exito */

#casos-exito {
  width: 100%;
  height: 100%;
  padding-block: 2rem;
  min-height: 90vh;
  position: relative;

  .container-image-mani {
    width: 22rem;
    height: 15rem;
    position: absolute;
    top: -11rem;
    left: 0;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
  }

  .container-hoja-1 {
    position: absolute;
    width: 6rem;
    height: 5rem;
    filter: blur(2px);
    left: 20%;
    top: 20%;
    transition: transform 0.3s ease-in-out;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  .container-hoja-2 {
    position: absolute;
    height: 5rem;
    width: 6rem;
    filter: blur(2px);
    bottom: 0;
    right: 0;
    transition: transform 0.3s ease-in-out;
    display:none;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  .container-hoja-1:hover,
  .container-hoja-2:hover {
    transform: translateY(-20px);
  }

  .contenedor {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    .texts {
        display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
      h2 {
        color: #007000;
        text-align: center;
        font-family: var(--font-2);
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 45px;
        position:relative;
        margin: auto;
        width: max-content;
      }

      h2::before {
       content: "";
                position: absolute;
                display: flex;
                left: -1rem;
                transform: translateX(-42%);
                width: 50px;
                height: 40px;
                background-image: url(../../images/hojita.svg);
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
      }
      p {
        flex-shrink: 0;
        color: var(--color-3);
        font-family: var(--font-3);
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 25px;
        text-align: center;
        strong {
          font-weight: 700;
        }
      }
    }

    #splide-casos-exito {
      .splide__arrow.splide__arrow--prev,
      .splide__arrow.splide__arrow--next {
        height: 40px;
        width: 40px;
        border: 1px solid var(--color-2);
      }
      .splide__arrow.splide__arrow--prev {
        left: -3%;
      }
      .splide__arrow.splide__arrow--next {
        right: -3%;
      }
      .splide__arrow:disabled {
        opacity: 1;
      }
      .splide__arrow svg {
        fill: var(--color-2) !important;
        font-size: 16px;
      }
      .splide__track {
        .splide__list {
          .splide__slide {
            display: flex;
            justify-content: center;
            align-items: center;
            .box-splide {
              display: flex;
              width: 347px;
              padding: 38.805px 41.451px;
              flex-direction: column;
              align-items: flex-end;
              background: #f6f6f6;
              filter: blur(1.2619144916534424px);
              .texts {
                height: 100%;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                gap: 1rem;
                p
                 {
                  font-family: var(--font-4);
                  font-size: 17.639px;
                  font-style: normal;
                  font-weight: 500;
                  line-height: 22.049px;
                  text-align: start;
                }
                 .info-colaborador{
                  display: flex;
                  flex-direction: column;
                 width: 100%;
                  h4,p{
                    font-family: var(--font-4);
                    font-size: 17.639px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 22.049px;
                    text-align: start;
                  }
                }
                
                
              }
              .container-img {
                  width: 5rem;
              height: 5rem;
              img{
                    width: 100%;
                    height:100%;
                object-fit: cover;
                object-position: center;
              }
              }
            }
            &.is-active {
              .box-splide {
                background-color: #007000;
                border-radius: 22.049px 0px;
                box-shadow: 0px 0.882px 8.819px 0px rgba(0, 0, 0, 0.1);
                filter: unset;
                p,
                h4 {
                  color: white;
                }
                .container-img {
                     width: 5rem;
              height: 5rem;
              img{
                      width: 100%;
                        height:100%;
                object-fit: cover;
                object-position: center;
              }
                  
                }
              }
            }
          }
        }
      }
    }
  }
}

/* fin casos exito */

/* inicio queries */

@media (max-width: 768px) {
  /* inicio queries contenido */

  #contenido {
    padding-block-end: 3rem;

    .container-mortero {
        width: 15rem !important;
        height: 15rem !important;
        position: absolute !important;
        top: 5rem !important;
        right: -5rem !important;
    }

    .contenedor {
      .container-buttons {
        padding-block-end: 1rem;
      }

      .container {
        .content {
          display: flex;
          flex-direction: column-reverse;
          .container-image{
            position: relative;
            left: unset;
            
          }
          .container-texto{
            padding-inline: unset !important;;
          }
        }
      
      }
    }
    .container-dientes-leon{
        width: 14rem;
        height: 16rem;
        position: absolute;
        bottom: -4rem;
        right: -5%;
        img{
            object-fit:contain;
        }
    }
  }
  /* fin queries contenido */

  /* inicio queries mercados */

  
  #mercados {
    height: 100%;
    
   
    .container-hoja-grande {
      width: 9rem;
      height: 9rem;
      top: -20%;
      left: -12%;
      z-index: -1;
    }
    h2 {
      font-size: 35px;
      width: unset;
      padding-bottom: 2rem;
    }

    .container {
        
      padding-block: 6rem;
        display: block;
      width: 100%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth; /* Smooth scrolling */
      white-space: nowrap; /* Ensure the items do not wrap */
      &::-webkit-scrollbar {   display: none; /* Oculta la barra de desplazamiento en navegadores basados en WebKit (Chrome, Safari, etc.) */ }

      
  
      img {
        width: auto;
        max-width: unset;
      }
      .marker{
        .mundito{
          .pais{
            opacity: 1;
            top: -27px;

          }
          .circle-top{

          }
          .line{
        
         
          }
          .circle-bot{

          }
        
        }
        
         .mundito:hover .line {
         
          margin-top: 0px;
          width: 4px;
          height: 20px;
        }
  
        .mundito:hover .circle-top {
          transform: translateY(0px);
        }

          &:nth-child(3){
          .mundito{
            .pais{
              opacity: 1;
              top: 119px;
  
            }
            .circle-top{
                top: 41px;
            }
            .line{
             

  
            }
            .circle-bot{
              top: -58px;
            }
          }

          .mundito:hover .line {
         
            width: 4px;
            height: 50px !important;
            margin-top: -25px;
      
          }
          .mundito:hover .circle-top {
            transform: translateY(0px);
          }
  
          
          
          
        }
    
      }
   
    }


 
  }
  /* fin queries mercados */

  /* inicio queries productos importacion */
  #productos-importacion {
    padding-block-end: 10rem;
    .container-hierba-grande {
      width: 9.5rem;
      height: 9rem;
      bottom: 0;
      top: unset;
    }
    .importacion-info {
      h2 {
        font-size: 35px;
      }
    }

    #splide-productos-importacion {
      .splide__arrow.splide__arrow--prev,
      .splide__arrow.splide__arrow--next {
        border: 1px solid rgba(142, 191, 56);

        background: rgba(142, 191, 56, 0.1);
      }
      .splide__arrow.splide__arrow--prev {
        left: 3%;
        height: 23px;
        width: 23px;
      }
      .splide__arrow.splide__arrow--next {
        right: 3%;
        height: 23px;
        width: 23px;
      }
      .splide__arrow svg {
        fill: #007000;
        font-size: 12px;
      }
      .splide__track {
        .splide__list {
          .splide__slide {
            .container-info-producto {
              a,p {
                font-weight: 700 !important
              }
            }
          }
        }
      }
    }
  }
  /* fin queries importacion */

  #proceso-exportacion {

    .contenedor{
      .texts{
        h2{
          font-size: 35px;
        }
      }
    }
  }

  #casos-exito{


    .container-image-mani{
      width: 11rem;
      height: 8rem;
    }
    .container-hoja-1{
      display: none;
    }
    .container-hoja-2{
      display: none;
    }
    .contenedor{
      gap: unset;
      .texts{
        display: flex;
        flex-direction: column;
        align-items: center;
        h2{
          font-size: 35px;
            max-width: fit-content;
        position: relative;

        }
      }

      #splide-casos-exito{
        .splide__arrow.splide__arrow--prev,
        .splide__arrow.splide__arrow--next {
          border: 1px solid rgba(142, 191, 56);
  
          background: rgba(142, 191, 56, 0.1);
        }
        .splide__arrow.splide__arrow--prev {
          left: -4%;
          height: 23px;
          width: 23px;
        }
        .splide__arrow.splide__arrow--next {
          right: -4%;
          height: 23px;
          width: 23px;
        }
        .splide__arrow svg {
          fill: #007000;
          font-size: 12px;
        }

        .splide__track{
          .splide__list{
            .splide__slide{

              .box-splide{
                .texts{
                  p, h4 {
                    font-size: 15.928px;
                  }
                }

              }
            
              &.is-next{
                .box-splide{
                  background: #f6f6f6;
                  filter: blur(1.2619144916534424px);
                }
              }
              &.is-active {
                .box-splide {
                  background-color: #007000;
                  border-radius: 22.049px 0px;
                  box-shadow: 0px 0.882px 8.819px 0px rgba(0, 0, 0, 0.1);
                  filter: unset;
                  p,
                  h4 {
                    color: white;
                  }
                  .container-img {
                    svg {
                      path {
                        fill: white !important;
                      }
                    }
                  }
                }
              }
            
           
            }
          }
        }
      }
    }

  }

  /* inicio queries contactanos */
  #contactanos{

    .informacion{
      display: flex;
      flex-direction: column;
      align-items: center;
      h2{
        font-size: 35px;
        max-width: 60%;
      }
    }

    

    .contenedor{

      .grid-contactanos{
        display: flex !important;
        flex-direction: column;
        background-image: url();
        gap: 2rem;
        .box-grid{
          position:relative;
          padding-bottom: 2rem;

        }

        .box-grid:nth-child(1)::after {
          content: "";
          position: absolute;
          height: 2px !important;
          width: 55% !important;
          
          bottom: 0;
          transform: translateX(-50%) !important;
          background-color: green;
       
        }
        .box-grid:nth-child(2)::after {
           content: "";
          position: absolute;
          height: 2px !important;
          width: 55% !important;
          
          bottom: 0;
          transform: translateX(-50%) !important;
          background-color: green;
      }
  
      }

    }

  }
  /* fin queries contactanos */


  /*Inicio de queries proceso exportacion */
  #proceso-exportacion{
    .contenedor{
      .texts{
        h2{

        }
        p{

        }
      }

      .row{
        .col{
          padding-block: 4rem;
          .progressbar{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px 0;
            padding-left: 0;
            height: 560px;


            
            li{
              position: relative;
              width: 25%;
              height: 30%;
              /*margin-bottom: 15px; *//* Espacio entre cada paso */
              display: flex;
              background-color: whhite;
              /* border: 1px solid red; */
              display: flex;
            flex-direction: column;
            align-items: center;
              .textos{
                display: flex;
                flex-direction: column-reverse;
                margin-left: 10px;
                gap: unset;
                p{
                  font-size: 12px !important;
                  line-height: 18px;
                }
                button{
                  font-size: 15px;
                }
              }
              &:nth-child(1),
              &:nth-child(3)
              {
                .textos{
                  position: relative;
                  left: -8rem;
                  top: -4rem;
                }
          
              }

              &:nth-child(2),
              &:nth-child(4){
                .textos{
                  position: relative;
                  right: -8rem;
                }
              }
            }

            li::before{
              content: '';
              width: 21px;
              height: 21px;
          
            }
            
               
      
            li::after{
              content: '';
              width: 4px; /* Grosor de la línea vertical */
              height: 0; /* Inicia con altura de 0 */
              background: green;
              position: absolute;
              top: 10px; /* Ajusta para que comience justo después de la bolita */
              left: 50%;
              transform: translateX(-50%);
              z-index: -1;
              transition: height 2s ease-in-out; /* Transición suave para el crecimiento */
            }
            li:last-child:after {
              display: none; /* No muestra la línea después del último elemento */
            }

            li.active::after{
              height: 155px; /* La altura aumenta a 100px cuando el paso está activo */
              width: 4px;
              transition: height 2s ease; /* Suaviza la transición del ancho */
            }
          }
        }
      }
    }
  }
  /*Fin de queries proceso exportacion */

}

/* fin queries */