@font-face {
    font-family: "Helvetica ";
    src:url('../fonts/Helvetica Light.otf') format('otf');


}
.swal2-popup{
    width: 30%;
}
.swal2-icon{
    font-size: 15px;
}
.swal2-title {
    font-family: 'Helvetica';
    font-size: 45px ;
    
  }
  
  .swal2-html-container{
    font-family: "Helvetica", Times, serif;
    font-size: 20px !important;

  }
  
  .swal2-confirm {
    font-size: 14px;    
    width: 100%;
  }
:root {
    --color-1: #0b6838;
}
body{
    font-family: "Helvetica";
    min-height: 100%;
}

*{
    font-family: 'Helvetica';
    scrollbar-color: #5e9a0f8c #ffffff;
    scrollbar-width:inherit;
}
/* Carga antes de que se ejecuten los elementos del DOM */
.container-float{
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}
.button-float{
    font-size: 20px;
    width: 40px;
    background-color: var(--color-1);
    color: white;
    border: none;
    padding: 10px;

    cursor: pointer;
    border-radius: 5px 0 0 5px;
    transition: transform 0.3s ease;
}
.float-text{
    background-color: white;
    padding: 15px;
    border-radius: 5px 0 0 5px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.219);
    width: 150px;
    position: absolute;
    right: 0;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease;
    font-size: 15px;
}
.container-float:hover .button-float{
    transform: translateX(-150px);
}
.container-float:hover .float-text{
    transform: translateX(0);
    opacity: 1;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  
  .spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #333;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  .suscribirse-blog{
    margin-top: 20px;
}
.suscribirse-blog-informativo{

    text-align: center;
    color: #000000;
    background: rgba(0, 0, 0, 0.055); 
    border-radius: 15px;
    padding: 20px;
    width: 1200px;
    margin-top: 50px;
    margin: auto;       
}
.suscribirse-blog-informativo h3{
    font-size: 28px;
    font-weight: 500;
}
.suscribirse-blog-informativo p{
    font-size: 20px;
    font-weight: 5  00;
}

.suscribirse-blog-informativo form{
    width: 80%;
    margin: auto;
}
.suscribirse-blog-informativo form input{
    margin-bottom: 10px;
    font-size: 15px;

}
.suscribirse-blog-informativo form .btn{
    font-size: 18px;
    width: 50%;
    background-color: #4CAF50;
    color:white;
    border-radius:2px ;

}
.suscribirse-blog-informativo form .btn:hover{
    background-color: #3a803c;

}
    div.buton-cerrar{
        object-fit: cover;
        height: 40px;
        width: 120px;
    }

    .imagen-perfil{
        width: 50px;
        margin: auto;
        object-fit: cover;
        border-radius: 50%;
        cursor: pointer;
        height: 50px;
    }

    .lista-perfil{       
        margin:15px 15px 15px 15px;
        opacity: 0;
        visibility: hidden;
        width: 260px;
        position: relative;
        right:250px;
        bottom: 15px;;
        background-color: rgb(255, 255, 255);
        height: 0px;
        box-shadow: 2px 4px 8px rgba(0,0,0,0.5);  
        padding: 10px 10px 10px 10px;
        border-radius: 8px;
        transition: all 400ms linear;
        animation-name: subir;
        animation-duration: 400ms;
        z-index: 99;

        li{
        
            list-style: none;
        }
        a{
            padding-left: 0;
            text-decoration: none;
            color: black;
        }

        .informacion-perfil h4{
            font-size: 24px;
            margin-top: 10px;
            text-align: center;
            margin-bottom: 0;

        }
        .correo-perfil p{
            margin-top: 0;
            text-align: center;
        }

    .perfil-cerrar{
        display: grid;
        grid-template-columns: repeat(2,50% 50%);
        
        i{
            color: var(--color-1);
            font-size: 17px;
        }
    }
        
    
    .imagen-perfil{
        position: relative;
        width: 75px;
        height: 70px;
        left: 80px;
        object-fit: cover;
    }
}

    
        
.active-perfil{
    
    height: 200px;
    visibility: visible;
    opacity: 1;
    transition: all 400ms ease;
}

/* Imágen de fondo*/
.container-img img{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 676px;
    object-fit: cover;
    z-index: -99;
}
.dolar-hoy{
    position: absolute;
    left: 10%;
    transform: translateX(-50%);
    top: 100px;
    font-size: 30px;


    color: #ffffff;
}

.flyer{
    /* Layer */
    position: absolute;
    width: 100%;
    height: 676px;
    left: 0px;
    top: 0px;
    background: linear-gradient(270deg, rgba(22, 28, 45, 0.8) 10.71%, rgba(0, 0, 0, 8e-05) 83.97%, rgba(22, 28, 45, 0.8) 104.09%);
    background-blend-mode: multiply;
    z-index: -99;
}


/* Letras Superiores de la imagen*/
.letras{
    height: 676px;
    width: 50%;
    display: flex;
    align-items: center;
    margin-left: 50%;

}
.LP h1{
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
    font-size: 60px;
    line-height: 65px;
    letter-spacing: -2px;
    color: #FFFFFF;    
}
.LP p{
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    letter-spacing: -0.2px;
    color: #FFFFFF;
    opacity: 0.6;
    width: 80%;
}
.LP button.boton-servicios{
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    
    background-color: #dddddd00;
    border-radius: 8px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    color: white;
    height: 50px;
    width: 150px;   
    transition: all 500ms ease-in-out
}
.LP button{
    font-family: 'Helvetica';

    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    background-color: var(--color-1);
    border-radius: 8px;
    border: var(--color-1);
    color: white;
    height: 50px;
    width: 150px;   
    transition: all 500ms ease-in-out
 
}
.LP button:hover{
    box-shadow: 2px 4px 4px rgba(255, 255, 255, 0.5);
    transform: translateY(-10px);
}


.LP button a{
    text-decoration: none;
    color: white;
    
}
.l{ 
    width: 80%;
    margin-left: 15%;
    margin: 0 auto;
    color: rgb(12, 12, 12);
}
.l h1{
    text-align: center;
}
.l p{
    text-align: justify;
}

/* Clientes */
.c{
    margin-bottom: 30px;
}
.l h1{
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 48px;
}
.l p{
        
    text-align: justify;
    width: 724px;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 32px;
    margin:0 auto;
    letter-spacing: -0.2px;

    color: #161C2D;

    mix-blend-mode: normal;
    opacity: 0.7;

}
.imagenes{
    margin: 0 auto;
    text-align: center;  
    max-width:822px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: 15px;
    row-gap: 15px;
    object-fit: cover;
}
.imagenes img{
    margin: 0 auto;
    text-align: center;  
    margin: auto;
    width: 173.04px;
    height: 41.01px;

}

.imagenes .lupatech{
    width: 181.23px;
    height: 44.44px;
  

}
.imagenes .gran{
   
    width: 190.58px;
    height: 51.79px;
  

}
.imagenes .mansa{
    object-fit: cover;
    width: 177.56px;
    
    
}
.imagenes .sygma{
  
    width: 144.98px;
    height: 69.05px;
  
}
.imagenes .setip{
    width: 147.32px;
    height: 69.05px;
}
.imagenes .cpp{

    width: 147.32px;
    height: 69.05px;
}
.imagenes .cppp{
 
    width: 147.32px;
    height: 69.05px;
}


/* Servicios */
.servicios{     
    height: 100%;
    left: 0px;
    top: 1247px;
    background: #F4F7FA;
}
.servicios .let h1{
    text-align: center;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 48px;
    top: 25px;
}
.let{
    padding-top: 100px;
}
.servicios .let p{
    text-align: justify;
    width: 724px;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 32px;
    margin:0 auto;
    letter-spacing: -0.2px;

    color: #161C2D;

    mix-blend-mode: normal;
    opacity: 0.7;
}


/* Cartas promocinales de los servicios */
.card-group .card{

    top: 25px;
    margin: 12px ;
    border-radius: 15px;
    background-color: #F4F7FA ;
    border: #f4f7fab0;
}
.card-group .card .a{
   color:var(--color-1) ;
   text-decoration: none;
   font-size: 15px;
    transition: all 500ms ease-in-out;
}
.card-group .card .card-body a:hover {
    font-size: 17px;
}
.card-group .card img{
    margin-top: 15px;
    border-radius: 20px;
    object-fit: cover;

    height: 100%;
    width: 100%;
    height: 175px;
    
}
.card-group .card .card-body p{
    padding-top: 15px;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 29px;
    /* or 171% */
    letter-spacing: -0.2px;
    color: #161C2D;
    mix-blend-mode: normal;
    opacity: 0.7;
}
.card-group .card .card-title{
                   
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 21px;
    line-height: 32px;
    /* or 152% */
    letter-spacing: -0.5px;
    text-align: center;
    color: #161C2D;
}
.card-group{
    padding-top: 50px;
    top: 30px;
    width: 50%;
    margin: 0 auto;
    height: 50%;
    padding-bottom: 25px;
}


/* Medio ambiente*/
.ambiente{
    width: 90%;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 40% 60%);
    margin: auto;

}
.ambiente .imagen{
    width: 90%;
}
.ambiente .texto h1{
    padding-top: 25%;
    margin: 0 auto;
    width: 100%;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 58px;
    text-align: center;
    letter-spacing: -1.8px;
    color: #161C2D;
}
.ambiente .texto p {
    text-align: center;
    width: 100%;
    padding-top:50px;
    margin: 0 auto;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 32px;
    letter-spacing: -0.2px;
    color: #161C2D;
    mix-blend-mode: normal;
    opacity: 0.7;
}


/*Nosotros */
.nosotros{
    padding-top: 50px;
    position: relative;
    width: 100%;
    max-width: 1500px; /* Establece el ancho máximo deseado para el contenedor */
    margin: 0 auto; /* Centra el contenedor horizontalmente */

}
.nosotros .collage{
    position: relative;
    max-width: 900px;
    max-height: 300px;
    margin: auto;
    border-radius:10px ;
}

.nosotros img{
    width: 100%;
    height: 300px; /* Permite que la imagen se ajuste proporcionalmente */
    z-index: -2;
    object-fit: cover;
    transition: all 500ms ease-in-out;
}
.nosotros img:hover , .nosotros .collage .f:hover{
    box-shadow: 4px 8px 4px 0px rgba(0, 0, 0, 0.5);
 
}

.nosotros .collage .f{

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Color de fondo oscuro con opacidad del 50% */
    pointer-events: none;
    z-index: 2 ;
    

}
.nosotros .collage h1{
    color: #FFF;
    margin-top: 13%;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 100px;
    line-height: 65px;
    text-align: center;
    letter-spacing: 1px;
}


/* Pie de pagina*/

.pie_pagina{
    padding-top: 35px;
    width: 100%;
    background-color: #ffffff;
    margin: auto;
   
}

.grupo1{
    margin: auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}   

.box .red_social{
    display: flex;
    justify-content: center;
    align-items: center;
}

.box .red_social a {
    text-decoration: none;
    margin-top: 35px;
    font-size: 30px;
    color: var(--color-1);
    transition: all 300ms ease-in;
}
.box .red_social a:hover {
    
    background-color: var(--color-1);
    color: white;
    border-radius: 15px;
}
.box2 h3{
    color: var(--color-1);
}
.box2 p{
    margin-left:10px ;
    text-align: start;
    color:#009323;
    font-size:14px
} 
.box2 span{
    font-weight: 700;
    margin-left:10px ;
    text-align: start;
    color:var(--color-1)
} 

.box3 h3{
    color: var(--color-1);
    
}
.box3 .mapa{
    margin: auto;
    display: grid;
    width: 80%;
    grid-template-columns: repeat(2,1fr);
    font-size:14px

}
.box3 .mapa a{
    margin-top: 10px;
    text-decoration: none;
    color: #009323;
    transition: all 300ms ease-in;
    font-weight:400;
}
.box3 .mapa a:hover{
    font-size:20px ;
    transform: translateY(-10px);
}

.grupo2{
    margin: auto;
    text-align: center;
    width: 80%;
    font-size: 14px;
}
/*--------------------------------- servicios PAGINA------------------------------------------------- */

.header-nav{
   
   
    animation-name: YtoX;
    animation-duration: 500ms;
    animation-timing-function: linear;
    
}   

@keyframes YtoX {
    from{

        transform: translateY(-50%);
    }
    
    to{
        transform: translateY(0)
    }
    
}

/*barra de navegación */
    .nav-2{
        display: flex;
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 10;
        background-color: #ffffffcc;
        font-size: 15px;
        color: #000000;
    

    }
    .nav-2 .little-boton{

        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        padding: 20px;
        text-decoration: none;
        color: rgb(0, 0, 0);
        border-bottom: 2px solid rgb(0, 0, 0);

    }

    .nav-2 .boton{
        font-family: 'Helvetica' sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        padding: 20px;
        text-decoration: none;
        color: rgb(0, 0, 0);
    }
    .nav-2 .boton:hover, .nav-2 .little-boton:hover{
        background-color: #373d2e4d;
        text-decoration: none;
    }
    .nav-2 [type=button]{
        font-family: 'Helvetica' sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 15px;
        background-color: var(--color-1);
        border-radius: 8px;
        border: var(--color-1);
        color: white;
        height: 50px;
        width: 150px;
        transition: all 500ms ease-in-out;
    }
    .nav-2 [type=button]:hover{
        background-color: white;
        color: var(--color-1);
        
    }



/*------------------------------------- CONTACTO PAGINA ---------------------------------------------------*/
.container{
    
    margin-top: 50px;
    background: linear-gradient(to right, rgb(255, 255, 255) 70%, var(--color-1) 30%);
    border-radius: 15px;
    box-shadow: 3px 2px 2px 1px rgba(0, 0, 0, 0.2);
    margin-bottom: 50px;
    height: 1000px;
}


.contacto{
    margin: auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);

}
.con{
    margin-top: 15px;
    display: grid;
    grid-template-rows: 2, 1fr;
    font-size: 20;
    overflow: cover;
}

.bold{
    font-weight: 100;
    font-size: 15px;

}

.con .telefono{
      
    font-size: 17px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 1px;
  
}
.con .email{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 15px;

    width: 150px;
    height: 40px;

}

.mapa1{
    padding-top: 15px;
    border-radius: 15px;
    box-shadow: 0px 5px rgba(0, 0, 0, 0.185);
    height: 70%;
    width: 90%;
    margin: 0 auto;

}

/* Formulario  e información de la empresa*/
.formulario{
    width: 80%  ;
    z-index: 1;
}
.formulario h1{
    /* CONTÁCTANOS */
    width: 50%;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 54px;
    line-height: 64px;


    color: #000000;

  

}

.formulario .comentario{
    
    width: 100%;
    height: 50px;
    
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    /* or 120% */
    letter-spacing: 0.01em;

    color: #0000009c;


    margin-top: 25px;
    margin-bottom: 35px;
}
.formulario p{
    
    width: 100%;
    height: 50px;
    
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    /* or 120% */
    letter-spacing: 0.01em;

    color: #0000009c;


    margin-top: 18px;
    margin-bottom: 18px;

}

.formulario input{
    font-size: 17px;
    font-family:'Times New Roman', Times, serif;
    width: 100%;
    height: 50px;
    border-radius: 15px;
    border-color: var(--color-1);
    border-width: 2px;

}

.formulario [type=submit]{
    font-size: 20px;
    letter-spacing: 2;
    color: #ffffff;
    height: 50px;
    background-color: var(--color-1);
    border: var(--color-1);
    border-radius: 15px;
    box-shadow: 0px 5px 5px 0px;
    gap: 20px;
    transition: all 500ms linear;
}
.formulario [type=submit]:hover{
    transform: translateY(-10px);
    box-shadow: 2px 6px 2px 0px rgba(0, 0, 0, 0.5);
}

.horario{
    font-family: 'Helvetica';
    font-style: normal;
    font-size: 15px;
    margin-top: 25px;
    position: absolute;
    width: 322px;
    left: 56%;
    background-color: var(--color-1);
    color: #FFF;
    box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.2);
    border-radius: 20px;
}
.horario2{
    display: none;
}

.horario ul, .horario li{
    list-style: none;
    right: 0;
}

.horario h1{
    margin-top: 5px;
    text-align: center;
}

.whatsapp .fa-whatsapp{
    font-size: 25px;
}
.whatsapp{
    margin-top: 25px;
    width: 50%;
    text-align: center;
}
.whatsapp button{  
    font-size: 15px;
    text-transform: uppercase;
    height: 50px;
    border-radius: 20px;
    border: var(--color-1);
    width: 463px;
    background-color: var(--color-1);
    text-decoration: none;
    color: white;
    transition: all 500ms linear;

}

.whatsapp button:hover{
    transform: translateY(-10px);
    box-shadow: 2px 6px 2px 0px rgba(0, 0, 0, 0.5);
}
#button-w2{
    display: none;
}

/*----------------------------------------Nosotros PAGINA -----------------------------------------------------------------------------------*/
.container-img2 img{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 434px;
    object-fit: cover;
    z-index: -1;
}

.flyer2{
    /* Layer */
    position: absolute;
    width: 100%;
    height: 434px;
    left: 0px;
    top: 0px;
    background: linear-gradient(270deg, rgba(22, 28, 45, 0.8) 10.71%, rgba(0, 0, 0, 8e-05) 83.97%, rgba(22, 28, 45, 0.8) 104.09%);
    background-blend-mode: multiply;
    z-index: -1;
}

/* Letras sobre la imagen*/
.letras1{
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 100%;
    padding-top:100px ;
    margin-bottom: 170px;
}
.LP1 h1{
    width: 50%;
    text-align: center;
    margin: 0 auto;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 80px;
    line-height: 65px;
    letter-spacing: -2px;
    color: #FFFFFF;    
}

/* Quienes somos*/
.quien{
    margin: 0 auto;
    width: 100%;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr)

}
.quien .imagen{
    width: 80%;
}
.quien .texto1{
    width: 80%;
}
.quien .texto1 h1{
    padding-top: 10%;
    margin: 0 auto;
    width: 50%;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 45px;
    line-height: 58px;
    text-align: center;
    letter-spacing: -1.8px;
    color: #161C2D;
}
.quien .texto1 p {
    text-align: center;
    width: 100%;
    padding-top:50px;
    margin: 0 auto;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 32px;
    letter-spacing: -0.2px;
    color: #161C2D;
    mix-blend-mode: normal;
    opacity: 0.7;
}


/* valores */

.valores .ir{
    z-index: -1;

    margin: auto;
}
.valores img{
    border-radius: 400%;
    box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
}

.valores{
    z-index: -1;
    margin: 0 auto;
    width: 80%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

.valores .lista{
    z-index: -1;
    display: flex;
    align-items: center ;
    justify-content: center;
}

.valores .lista ul li{
    gap: 50rem;
    list-style: none;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 500;
    font-size: 19px;
    line-height: 32px;
}
.valores .lista ul li .siglas{
    color: var(--color-1);
}

.servicios .let .valor{
    font-size: 20px;
    
}

/* mision */


.mision, .mision{
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    z-index: -999;
}


.mision .parrafo-mision, .vision .parrafo-vision{
    margin: auto;
    width: 50%;
    
}
.mision .parrafo-mision h1, .vision .parrafo-vision h1{
    width: 50%;
    /* Comfortable buds wit */
    padding-bottom: 20px;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 58px;
    /* identical to box height, or 121% */
    text-align: center;
    letter-spacing: -1.8px;

    color: #000000;


    margin: auto;

}
.mision .parrafo-mision p, .vision .parrafo-vision p{
    width: 100%;
  
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    /* or 160% */
    letter-spacing: -0.2px;

    color: #000000;

    mix-blend-mode: normal;
    opacity: 0.65;

    margin: auto;

}
.mision .imagen-mision, .vision .imagen-vision{ 
    width: 100%;
    display: flex;
    align-items: end;
}
.mision .imagen-mision img, .vision .imagen-vision img{ 
    width: 100%;
}

/* Vision */




/* Políticas */

.politicas-titulo{
    margin-top: 25px;
    text-align: center;

    font-family: 'Helvetica';
    font-weight: 700;
    font-size: 36px;
    line-height: 48px;
    letter-spacing: -1.2px;

    color: #161C2D;
}

.politicas-cuerpo{
    
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2 ,1fr);
    grid-column-gap:50px ;
}
.politicas-cuerpo .politicas-lista{
    margin: auto;
}
.politicas-cuerpo .politicas-lista1{
    display: none;
}
.politicas-cuerpo .politicas-lista ul{

    list-style: none;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 500;
    font-size: 19px;
    line-height: 50px;
}

.circulo{
    color: #936fe9;
    font-size: 30px;
    border-radius: 50%;
    background-color: #9d7ee644;
}
.politicas-imagen {
    margin: auto    ;
}
.politicas-imagen img{
    width: 80%;
}

.boton-politicas{
  
    text-align: center;
    height: 50px;
    padding-top: 30px;
    margin: auto;
    width: 100%;
    font-size: 17px;
    cursor: pointer;
}
.boton-politicas button{
    font-family: 'Helvetica';
    text-transform: uppercase;
    background: var(--color-1);
    border-radius: 15px;
    text-align: center;
    max-width: 500px;
    width: 80%;
    height: 50px;
    color: #FFF;
    border: none;
    transition: all 0.4s ease-out;
    font-size: 17px;
}

.boton-politicas button:hover{

    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}

.politicas_corporativas{
    padding-top: 100px;
    margin: auto;
    max-width: 1200px;
    width: 80%;
    display: grid;
    grid-template-columns: repeat(2, 70% 30%);
}
.politicas_texto_corp h1{
    font-size: 30px;
    color: #161C2D;
    margin-bottom: 30px;
}
.politicas_version{
    font-size: 18px;
    color: #464646b0;
}
.politicas_texto{
    font-size: 17px;
    color: #464646;
}
.bold{
    font-weight: 700;
    font-size: 17px;
}
.lista_politicas_corporativas {
    width: 80%;

}
.politicas_foto{
    margin: auto;
    padding-top: 40px;
    padding-bottom: 40px;

}
.politicas_foto img{
    width: 100%;
    height: 600px;
    max-height: 1300px;
    object-fit: cover;
}
.politicas_foto img.banner{
    width: 100%;
    height: 1000px;
    max-height: 1300px;
    object-fit: cover;
}
.lista_politicas_corporativas li{
    cursor: pointer;
    margin-bottom: 1.5rem;
    list-style:circle;
    font-size: 16px;
    color: #464646;
    transition: color 0.3s ease-in-out;
}
/*  Galeria de imagenes */

.images-carousel{
    margin: auto;

    .carousel-inner{
        border-radius: 15px;
        max-height: 700px;
        display: flex;
        max-height: 700px;
        align-items: center;
        justify-content: center;
        
        object-fit: cover;

        img{
            
            object-fit: cover;
            transition: transform 0.5s ease-in-out;
           
        }
    }
}

/* Certificaciones */

.certificaciones{
    padding-top: 45px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax( 200px, 1fr));
    grid-column-gap: 10px;
    width: 85%;
    margin: auto;
}

.certificaciones .certificacion{
    position: relative;
 
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 4px 8px 4px 0px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    margin: auto;
    padding-top: 25px;
    transition: all 900ms ease;
}

.certificaciones .certificacion img{
    
    width: 100%;
    height: 100%;
    transition:all 900ms ease-out ;
  
}

.certificaciones .certificacion .text{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;   
    background: rgba(0, 0, 0, 0.5);
    color: white;
    transition:all 900ms linear ;
    opacity: 0;
    visibility: hidden;
    text-align: center;
 
}
.certificaciones .certificacion p {
    /* With lots of unique */

    width: 70%;
    position: absolute;
    
    right: 10%;
    top: 50%;
    bottom: 27.91%;

    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
    font-size: 23px;
    line-height: 32px;
    /* or 139% */
    letter-spacing: -0.2px;

    color: #ffffff;

    mix-blend-mode: normal;


}
.certificaciones .certificacion h1 {

    position: absolute;
    height: 116px;
    left: -2%;
    right: -12.97%;
    top: calc(50% - 116px/2 - 42px);

    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 58px;
    /* or 121% */
    letter-spacing: -1.8px;

    color: #ffffff;
}
.certificaciones .certificacion:hover{
    transform: translateY(-10px);
}
.certificaciones .certificacion:hover > .text{
    opacity: 1;
    visibility:visible ;
    
}
.certificaciones-titulo{
    text-align: center;
    padding-top: 45px;
    /* Politicas */
    height: 48px;
    left: 0%;
    right: 0%;
    top: calc(50% - 48px/2 - 40.71px);

    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 48px;
    /* identical to box height, or 133% */
    text-align: center;
    letter-spacing: -1.2px;

    color: #161C2D;
}

#sibate-path:hover{
    fill: #19847E;
}

/*mapa ubicacion*/
.mapa-ubicacion{
    width: 30%;
    height: 30%;
    margin: auto;
}
svg{
    width: 100%;
    height: 80%;
}

.ubicacion .titulo {
   /* Quienes somos */
    padding-top: 45px;
    text-align: center;
    margin: auto;

    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 58px;
    /* or 121% */
    letter-spacing: -1.8px;
    color: #000000;
}
 

.ubicacion .ciudades{

    text-align: center;
    margin: auto;
    width: 65%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    grid-gap: 10px;
}

#sibate{
    font-size: medium;
    border-radius: 15px;
    height: 70px;
    background: #009323;
    color: #FFF;
    border-width: 2px;
    border-color: #F4F7FA;
    box-shadow: 4px 2px 6px rgba(0, 0, 0, 0.5);
    transition: all 500ms ease-in-out;
}
#sibate:hover{
    background-color: #936fe9;
    transform: translateY(-10px);
}
#bogota{
    font-size: medium;
    border-radius: 15px;
    height: 70px;
    background: var(--color-1);
    color: #FFF;
    border-width: 2px;
    border-color: #F4F7FA;
    box-shadow: 4px 2px 6px rgba(0, 0, 0, 0.5);
    transition: all 500ms ease-in-out;
}
#bogota:hover{
    background-color: #03fff2;
    transform: translateY(-10px);
}
#meta:hover{
    background-color: rgba(214, 18, 18, 0.767);

    transform: translateY(-10px);

}
#meta{
    font-size: medium;
    border-radius: 15px;
    height: 70px;
    background: var(--color-1);
    color: #ffffff;
    border-width: 2px;
    border-color: #F4F7FA;
    box-shadow: 4px 2px 6px rgba(0, 0, 0, 0.5);
    transition: all 500ms ease-in-out;
}
#putumayo:hover{
    
    background-color: #dbc607cc;
    transform: translateY(-10px);

}
#putumayo{
    font-size: medium;
    border-radius: 15px;
    height: 70px;
    background: #009323;
    color: #FFF;
    border-width: 2px;
    border-color: #F4F7FA;
    box-shadow: 4px 2px 6px rgba(0, 0, 0, 0.5);
    transition: all 500ms ease-in-out;
}

.ubicacion .sibate-h1, .ubicacion  .bogota-h1,.ubicacion   .putumayo-h1,.ubicacion .meta-h1{
    padding-top: 150px;
    width: 50%;
    position: absolute;
    font-size: 70px;
    text-align: center;
    transition: all 500ms ease-out;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 600;
    font-size: 68px;
    line-height: 58px;
    /* or 121% */
    letter-spacing: -1.8px;
    color: #000000;
    display: none;
}


/* ---------------------------------- SERVICIOS PAGINA --------------------------------------------*/

.servicios-titulo{
    /* Big companies are he */
    margin: auto;
    padding-top: 50px;
    width: 50%;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 54px;
    line-height: 48px;
    /* or 89% */
    text-align: center;
    letter-spacing: -1.2px;

    color: #161C2D;


}

.cards{
    margin: auto;
    width: 80%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px,1fr));
    grid-row-gap: 15px;
}

.card__img{
    visibility: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 235px;
    border-radius:12px ;
}
.card__img--hover{
    transition: all 0.2s ease-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    height: 235px;
    border: 12px;
    top: 0;

}
.cards .card {
    
    margin: auto;
    position: relative;
    width: 85%;
    background-color: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 500ms ease;
  }

.cards .card:hover{

    box-shadow: 0px 30px 18px rgba(0,0,0,0.1);
    transform: scale(1.10, 1.10);

}

.card__info{
    z-index: 2;
    background-color: #fff;
    border-radius: 12px;
    padding: 16px 24px 24px 24px ;

}
.cards .card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.5);

}
  

.card__category{
    font-family:'Helvetica Neue',Helvetica,Arial;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
    color: #000000;
}

.cards .card__title{
    margin-top: 5px;
    font-size: 20px;
    margin-bottom: 10px;
    font-family:'Helvetica' ;
}
.cards .card:hover .cards .card__category{
    color: #000000;
}

.cards .card:hover  .card__img--hover{
    height: 100%;
    opacity: 0.6;
}

.cards .card:hover .card__info{
    background-color: transparent;
    position: relative;
}

.cards .card:hover .card__info-hover{
    opacity: 1;
}

.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 150%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.521);
    padding-top: 15%;
  }
  
#modal .modal-content {
    margin: auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 80%;

    max-width: 800px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
  }
  #modal .close {
    color: #ff0000;
    text-align: end;
    font-size: 35px;
    font-weight: bold;
  }
  #modal-titulo{
    text-align: center;
    text-transform: uppercase;
    font-size: 25px;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  #modal-contenido{
    font-size: 17px;
    width: 80%;
    margin:auto;    
  }
  #modal .close:hover,
  #modal .close:focus {
    color: rgb(255, 0, 0);
    text-decoration: none;
    cursor: pointer;
  }
  
  
  
 /* ------------------------------------PQRS pagina ----------------------- */ 

 /* fondo e imagen*/
.fondo-pqrs{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 404px;
    z-index: -1;
 
    height: 300px;
    background-color: #F8F8F8 ;
    
}

.imagen-pqrs{
    height: 400px;
    margin: auto;
  
}
.imagen-pqrs img{
    height: 300px;
    position: absolute;
    top: 0;
    z-index: -1;
    margin: auto;
    
}

.letras-pqrs{
    padding-top: 70px;
    height: 300px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    
}
.l-pqrs .politica-atencion{
    margin-top: 30px;
}
.l-pqrs{
    width: 100%;
    height: 250px;
}
.l-pqrs h1{
    /* Make your business p */
    margin-left: 50px;
    height: 75px;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 45px;
    line-height: 48px;
    /* or 107% */
    letter-spacing: -1.2px;
    text-transform: uppercase;

    color: #161C2D;


}
.boton-formulario button{
    background-color: var(--color-1);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
/* BOLAS */
@keyframes mover-bola {
    0% { transform: translateX(0); }
    50% { transform: translateX(150px); }
    100% { transform: translateX(0); }
  }
@keyframes mover-bola1 {
    0% { transform: translateX(0); }
    50% { transform: translateX(-100px); }
    100% { transform: translateX(0); }
  }
  
  .bola-izquierda {
    /* Estilos de diseño */
    width: 50px;
    height: 50px;
    border: 2px solid var(--color-1); /* Cambia el color según tu preferencia */
    border-radius: 50%; /* Para hacerlo circular */
    position: absolute; /* Permite posicionarlas donde quieras en la página */
    /* Aquí puedes ajustar la posición de cada bola */
    top: 150px;
    left: 50px;
    z-index: -1;
    /* Animación */
    animation: mover-bola 10s infinite; /* Cambia la duración y otros valores según desees */
  }
  .bola-izquierda2 {
    /* Estilos de diseño */
    width: 50px;
    height: 50px;
    border: 2px solid var(--color-1); /* Cambia el color según tu preferencia */
    border-radius: 50%; /* Para hacerlo circular */
    position: absolute; /* Permite posicionarlas donde quieras en la página */
    /* Aquí puedes ajustar la posición de cada bola */
    top: 500px;
    left: 50px;
    z-index: -1;
    /* Animación */
    animation: mover-bola 10s infinite; 
  }
  .bola-izquierda3 {
    /* Estilos de diseño */
    width: 50px;
    height: 50px;
    border: 2px solid var(--color-1); /* Cambia el color según tu preferencia */
    border-radius: 50%; /* Para hacerlo circular */
    position: absolute; /* Permite posicionarlas donde quieras en la página */
    /* Aquí puedes ajustar la posición de cada bola */
    top: 300px;
    left: 50px;
    z-index: -1;
    /* Animación */
    animation: mover-bola 10s infinite; /* Cambia la duración y otros valores según desees */
  }
  .bola-izquierda4 {
    /* Estilos de diseño */
    width: 50px;
    height: 50px;
    border: 2px solid var(--color-1); /* Cambia el color según tu preferencia */
    border-radius: 50%; /* Para hacerlo circular */
    position: absolute; /* Permite posicionarlas donde quieras en la página */
    /* Aquí puedes ajustar la posición de cada bola */
    top: 700px;
    left: 50px;
    z-index: -1;
    /* Animación */
    animation: mover-bola 10s infinite; /* Cambia la duración y otros valores según desees */
  }
  .bola-izquierda5 {
    /* Estilos de diseño */
    width: 50px;
    height: 50px;
    border: 2px solid var(--color-1); /* Cambia el color según tu preferencia */
    border-radius: 50%; /* Para hacerlo circular */
    position: absolute; /* Permite posicionarlas donde quieras en la página */
    /* Aquí puedes ajustar la posición de cada bola */
    top: 1000px;
    left: 50px;
    z-index: -1;
    /* Animación */
    animation: mover-bola 10s infinite; /* Cambia la duración y otros valores según desees */
  }
  .bola-derecha {
    /* Estilos de diseño */
    width: 50px;
    background-color: #5e9a0fa2;

    height: 50px; 
    border-radius: 50%;
    position: absolute; 
    top: 100px;
    right: 50px;
    z-index: -1;
    /* Animación */
    animation: mover-bola1 10s infinite; /* Cambia la duración y otros valores según desees */
  }

  /* Texto introduccion y boton */
  .texto-principal{
    width: 100%;
    text-align: center;
  }
  .txt-pr{
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    /* or 120% */
    text-align: justify;

    color: #000000;
    margin: auto;
    width: 50%;
  }

  .texto-principal button{
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    height: 50px;
    border-radius: 15px;
    border: var(--color-1);
    width: 463px;
    background-color: var(--color-1);
    text-decoration: none;
    color: white;
    transition: all 500ms linear;
  }
  .texto-principal button:hover{
    transform: translateY(-10px);
    box-shadow: 0px 4px 2px  rgba(0, 0, 0, 0.384);
  }
  .texto-principal  button i{
    font-size: 25px;
  }
  
  /* GESTION DE REQUERIMENTOS*/

  .gestion-txt{
    width: 50%;
    margin: auto;
    /* Para la Gestión del Requerimiento nuestro Procedimiento será el Siguiente: */

    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 123.6%;

    /* Black */
    color: #2B2B2B;


  }
  .pasos-pqrs{  
    width: 50%;
    margin: auto;
  }

  .pasos-pqrs .paso_1 p, .paso_2 p, .paso_3 p , .paso_4 p{
  
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;

 

    color: #767676;
  }
  .paso_2 ul, .paso_3 ul{
    width: 80%;
    margin: auto;
  }
  .paso_2 ul li, .paso_3 ul li{
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 24px;



    color: #767676;
    margin-top: 15px;
    list-style-type: circle;
  }

  div.buton{
    height: 40px;
}


  /* inicio y registro*/


/* Media querys*/
@media screen and (min-width:1800px) {
    .imagenes{
        display: grid;
        width: 50%;
        grid-template-columns: repeat(4,1fr);
    
    }
    .card-group{
        top: 30px;
        width: 50%;
        margin: 0 auto;
        height: 50%;
    }


}
@media screen and (max-width:1800px) {
    .ambiente .texto h1{
        padding-top: 10%;
      }
}

@media screen and (max-width:1500px) {
    .swal2-popup{
        width: 50%;
    }
    .imagenes{
        width: 60%;
    }
    .dolar-hoy{
        left: 15%;
    }

    .ambiente .texto h1{
        padding-top: 5%;
        margin: 0 auto;
        width: 100%;
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 700;
        font-size: 40px;
        line-height: 58px;
        text-align: center;
        letter-spacing: -1.8px;
        color: #161C2D;
    }
    .ambiente .texto p {
        text-align: justify;
        width: 100%;

        margin: 0 auto;
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 400;
        font-size: 19px;
        line-height: 32px;
        letter-spacing: -0.2px;
        color: #161C2D;
        mix-blend-mode: normal;
        opacity: 0.7;
    }
    .card-group{
        width: 70%;
    }
    .quien{
        margin: auto;
        width: 100%;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, 1fr)
    
    }
    .quien .imagen{
        width: 100%;
    }

    .quien .texto1{
        width: 90%;
        margin: auto;
    }
    .quien .texto1 h1{
        padding-top: 1%;
        width: 60%;
        
    }

    .politicas-cuerpo{
        width: 90%;
    }
    .politicas-cuerpo .politicas-lista{
        margin: auto;
    }
    .politicas-cuerpo .politicas-lista ul{
        line-height: 40px;
    }

    .mapa-ubicacion{
        width: 50%;
        height: 40%;
        margin: auto;
    }
    .ubicacion .sibate-h1, .ubicacion  .bogota-h1,.ubicacion   .putumayo-h1,.ubicacion .meta-h1{

        width: 80%;
    }
    .pasos-pqrs{
        width:60%;
    }
}

@media screen and(max-width:1400px) {
    .card-group{
        top: 30px;
        width: 70%;
        margin: 0 auto;
       
    }
    .mapa .mapa1{
        width: 100%;
        text-align: center;
    }
    .container .mapa1{
        width: 90%;
    }

    .quien .texto1{
        width: 95%;
    }
   
}

@media screen and (max-width:1340px) {
    .l-pqrs h1{
        margin-left: 0;
        width: 150%;
        font-size: 35px;
    }
    .certificaciones .certificacion h1{
        font-size: 35px;
        line-height: 30px;
    }
    
}

@media screen and (max-width:1300px) {
    .politicas_corporativas{
        width:80%;

    }
    .card-group{
        padding-top: 50px;
        top: 30px;
        width: 70%;
        margin: 0 auto;
        height: 50%;
        padding-bottom: 25px;
    }

    .imagenes{
        width: 60%;
    }
    .imagenes img{
        margin-left: 5%;
        margin-right: 50%;
        text-align: center;
    }

    .ambiente{
        width: 90%;
    }
    .ambiente .imagen{
        width: 100%;
    }

    .ambiente .texto h1{
        padding-top: 10;
        
        width: 100%;
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 700;
        font-size: 30px;
        line-height: 58px;
        text-align: center;
        letter-spacing: -1.8px;
        color: #161C2D;
    }
    
    .ambiente .texto p {
        width: 100%;
        padding-top: 30px;
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 400;
        font-size: 19px;
        line-height: 25px;
        letter-spacing: -0.2px;
        color: #161C2D;
        mix-blend-mode: normal;
        opacity: 0.7;
    }

    .quien .imagen{
        width: 100%;
        
    }
  

    .mision , .vision{
        margin: auto;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 50% 50%);
       
    }
    
    .mision .parrafo-mision, .vision .parrafo-vision{
      
        width: 70%;
        
    }
    .mision .parrafo-mision h1 , .vision .parrafo-vision h1{
        width: 50%;
        font-weight: 700;
        font-size: 45px;
        margin: auto;
    
    }
    .mision .parrafo-mision p, .vision .parrafo-vision p{
        width: 100%;
        font-weight: 400;
        font-size: 20px;
        line-height: 32px;
        
        margin: auto;
    
    }
   
  
    
    .mapa-ubicacion{
        width: 50%;
        height: 40%;
        margin: auto;
        color: rgba(214, 18, 18, 0.767);
        
    }
    svg{
        width: 100%;
        height: 80%;
        
    }
   
}

@media screen and (max-width:1200px) {
    
    .imagenes{
        grid-template-columns: repeat(4, 1fr);
    }
    .imagenes img{
        margin: auto;
    }
    .card-group{
        width: 80% ;
    }
    .ambiente{
        width: 95%;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, 1fr)
    } 
    
    .mapa .mapa1{
        width: 100%;
        text-align: center;
    }
    .mapa1{
        text-align: center;
        width: 90%;
        margin: 0 auto;
    }

    .container{
        height: 1000px;
    }

    .quien{
        width: 100%;
    }
    .quien .texto1{
        width: 100%;
    }
    .quien .imagen{
        width: 100%;
    }

    .quien .texto1 h1{
        font-size: 35px;
        width: 100%;
    }
    .politicas-cuerpo{
        width: 100%;
    }

    nav #pqrs-btn{
        color: white;
    }

    .pasos-pqrs{
        width:65%;
    }
    .suscribirse-blog-informativo{
        width: 100%;
    }
    
}

@media screen and (max-width:1060px)  {
    .boton , .buton, .little-boton{
        display: none;
    }
    .container-float{
        opacity: 1;
        visibility: visible;
    }
    
    .letras{
        height: 676px;
        width: 70%;
        display: flex;
        align-items: center;
        margin-left: 15%;
    
    }
    .imagenes{
        grid-template-columns: repeat(3, 1fr);
    }
    .imagenes img{
        margin: auto;
    }

    .card-group{
        width: 70%;
        margin: 0 auto;
        height: 50%;
    } 
    
    .ambiente .imagen{
        width: 100%;
        margin: auto;
    }

    .ambiente .texto h1{
        padding-top:0;
        margin: 0 auto;
        width: 90%;

    }

    .ambiente .texto p{
        width: 100%;
        padding-top:20px;
        margin: 0 auto;
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 400;
        font-size: 17px;
        color: #161C2D;
        mix-blend-mode: normal;
        opacity: 0.7;
    }

    .quien .texto1{
        width: 100%;
        margin-left: 0;
    }

    .quien .texto1 h1{
        font-size: 35px;
    }

    .quien .texto1 p{
        padding-top: 40px;
        font-size: 17px;
        letter-spacing: -0.1;
    }

    .quien .imagen{
        width: 100%;
        margin: auto;
    }

    .valores{

        margin: 0 auto;
        width: 90%;
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }

    .valores .ir{
        margin: auto;
        padding-top: 25px;
        padding-bottom: 25px;
    }

 
    .politicas-cuerpo{
        width: 100%;
 
        grid-column-gap:20px ;
    }

    .politicas-imagen img{
        width: 100%;
    }

    .pasos-pqrs{
        width:75%;
    }
    .dolar-hoy{
        opacity: 0;
        visibility: hidden;

    }
}

@media screen and (max-width:1000px) {
   

    .ambiente .texto h1{
        
        margin: 0 auto;
        width: 80%;
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 600;
        font-size: 35px;
        line-height: 50px;
        text-align: center;
        letter-spacing: -1.5px;
        color: #161C2D;
    }

    .ambiente .texto p{
        width: 90%;
        padding-top:15px;
        margin: 0 auto;
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        color: #161C2D;
        mix-blend-mode: normal;
        opacity: 0.7;
    }
    .card-group{
        width: 90%;
    }
    .nosotros img{
        width: 100%;
        height: 300px;

        object-fit: cover;
        display: block;
        z-index: -1;
    }

    .container{
        height: 1000px;
    }
    
    .contacto{
        display: grid;
        grid-template-columns:repeat(1, 1fr);
    }

    .formulario .button{
        border: #FFF;
    }
        
    .formulario{
        margin: 0 auto;
        width: 80%  ;
       
    }
    .formulario h1{
        /* CONTÁCTANOS */

        width: 50%;
        height: 64px;

        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 700;
        font-size: 54px;
        line-height: 64px;


        color: #000000;

    

    }

    .formulario p{
        
        width: 100%;
        height: 48px;

        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 24px;
        /* or 120% */
        letter-spacing: 0.01em;

        color: #0000009c;


        margin-top: 25px;
        margin-bottom: 25px;

    }

    .whatsapp button{
        display: none;
    }
    .horario{
        display: none;
    }

    .horario2{
        display: block;
        margin-top: 20px;
        margin-bottom: 20px;
        gap: 15px;
        border: #ffffff;
    }

    .horario2 .button{
        background: var(--color-1);
        color: white;
        font-size: 20px;
        letter-spacing: 2;
    }
    .horario2 .accordion-body {
        background: linear-gradient(to right, rgb(255, 255, 255) 70%, var(--color-1) 30%);

        color: #000000;
    }
    .horario2 .accordion-body p{
        background: linear-gradient(to right, rgb(255, 255, 255) 70%, var(--color-1) 30%);
        font-size: 15px;
        color: #000000;
    }
    .horario2 .accordion-body ul li{
        font-size: 15px;
    }
    .con{
        display: none;
    }

    #button-w2{
        display: block;
    }
    .mapa-ubicacion{
        width: 60%;
        height: 40%;
        margin: auto;
    }
    .ubicacion .sibate-h1, .ubicacion  .bogota-h1,.ubicacion   .putumayo-h1,.ubicacion .meta-h1{

        padding-top: 100px;
        font-size: 40px;
    }
    .ubicacion .ciudades{
     
        width: 70%;
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
      
    }

    .cards-servicios{
        margin: auto;
        width: 90%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px,1fr));
        grid-row-gap: 15px;
    }


}

@media screen and (max-width:910px) {
    
    .politicas_corporativas{
        width: 90%;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(1, 1fr);
    }
    .politicas_foto img{
        width: 100%;
        height: 700px;
        max-height: 1300px;
        object-fit: cover;
    }
    .imagenes img{
        margin: auto;
    }
    .imagenes{
        display: grid;
        width: 75%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    
    }

    .ambiente{
        width: 100%;
    }
    .ambiente .imagen{
        width: 100%;
    }

    .ambiente .texto h1{
        margin: 0 auto;
        width: 80%;


    }

    .ambiente .texto p{
        width: 90%;
        padding-top:0px;
        margin: 0 auto;
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        color: #161C2D;
        mix-blend-mode: normal;
        opacity: 0.7;
    }  

    .servicios .let p, .l p{
        width: 80%;
        text-align: justify;
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 400;
        font-size: 19px;
        line-height: 32px;
        margin:0 auto;
        letter-spacing: -0.2px;
        color: #161C2D;
        mix-blend-mode: normal;
        opacity: 0.7;
    }
    .card-group{
        width: 85%;
        margin: 0 auto;
        height: 50%;
    }
    .quien .texto1 p{
        padding-top: 15px;
        font-size: 16px;
        font-weight: 200;
        line-height: 23px;
        letter-spacing: -0.3;
    }
    .quien .texto1{
        padding-top: 0;
    }
    .quien .texto1 h1{
        padding-top: 0;
        font-size: 30px;
        font-weight: 700;
        line-height: 40px;
        
    }

   
    .mision .parrafo-mision h1{
        width: 50%;
        font-weight: 700;
        font-size: 40px;
        margin: auto;
    
    }
    .mision .parrafo-mision p{
        width: 90%;
        font-weight: 400;
        font-size: 18px;
        line-height: 25px;
        margin: auto;  
    }

   
    .mision .imagen-mision{ 
        width: 100%;
        display: flex;
        align-items: end;
    }

    .mision .imagen-mision img{ 
        width: 100%;
    }


    .vision .imagen-vision img{
        width: 100%;
       
    }

    .vision .parrafo-vision{
        width: 100%;
        
    }
    .politicas-cuerpo{
        width: 100%;
        grid-column-gap:10px ;
    }
    .politicas-cuerpo .politicas-lista ul{

    
        list-style: none;
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 500;
        font-size: 19px;
        line-height: 30px;
    }
    .cards-servicios{
        margin: auto;
        width: 90%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
        grid-row-gap: 15px;
    }
    .certificaciones .certificacion h1{
        font-size: 30px;
        line-height: 30px;
    }
    .certificaciones .certificacion p{
        font-size: 15px;
        line-height: 30px;
    }
}
 @media screen and (max-width: 820px) {
    .ambiente{
        width: 100%;
    }
    .ambiente .imagen{
        width: 100%;
    }

    .ambiente .texto h1{
        margin: 0 auto;
        width: 80%;
        font-size: 30px;

    }
 }

@media screen and (max-width:760px) {
    .nosotros img{
        margin: auto;
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    .politicas_lista_corp{
        width: 90%;
    }

    .politicas_foto{
        margin: auto;
    }
    .politicas_foto img{
        margin: auto;
        
        width: 80%;
        height: 300px;
        object-fit: cover;
    }
    .ambiente .texto h1{
        margin: 0 auto;
        width: 90%;
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 600;
        font-size: 25px;
        line-height: 20px;
        text-align: center;
        letter-spacing: -1.0px;
        color: #161C2D;
    }
    .ambiente .texto p{
        width: 100%;
        padding-top: 5px;

        font-size: 14px;
    
    }  

    .card-group{
        width: 90%;
    }

    .pie_pagina .grupo1{
        width:80%;
        grid-template-columns: repeat(1, 1fr);
        grid-gap:30px;
        padding: 35px 0px;
        align-items: center;
        justify-content: center;
    
    }
    
    
    .container{
        width: 100%;
        margin-top: 50px;
        background: linear-gradient(to right, rgb(255, 255, 255) 70%, var( --color-1) 30%);
        border-radius: 15px;
        box-shadow: 3px 2px 2px 1px rgba(0, 0, 0, 0.2);
        margin-bottom: 50px;
        height: 1000px;
    }
    
    .letras1{
        display: flex;
        justify-content: center;
        align-items: center;
        
        width: 100%;
        padding-top:100px ;
        margin-bottom: 240px;
    }
    .LP1 h1{
        width: 100%;
        font-size: 60px;
    
    }
    .ubicacion .ciudades{
     
        width: 80%;
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
      
    }
    .suscribirse-blog-informativo h3{
        font-size: 20px;
    }
    .suscribirse-blog-informativo{
        font-size: 15px;

    }

}

@media screen and (max-width:700px) {
    .imagenes{
        grid-template-columns: repeat(3, 1fr);
    }

    .imagenes img{
        margin: auto;
    }

    .ambiente{
        width: 100%;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(1, 1fr)
    
    }
    .ambiente .imagen{
        text-align: center;
        
    }
    .ambiente img{
        margin-top: 50px;
        border-radius: 20px;
        width: 80%;
        height: 80%;

    }
    .ambiente .texto .h1{
        padding-top: -50%;
    }
    .ambiente .texto p{
        width: 70%;
        padding-top:30px;
        margin: 0 auto;
        font-family: 'Helvetica';
        font-weight: 400;
        font-size: 15px;
        color: #161C2D;
            
        }

    .card-group{
            width: 95%;
        }

    .quien{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .quien .texto1{
        width: 90%;
        margin: auto;
        padding-bottom:15px;
    }

    .quien .texto1 h1{
        padding-top: 20px;
        font-size: 35px;
    }
    .quien .texto1 p{
        padding-top: 20px;
        font-size: 19px;
        letter-spacing: -0.2;
        padding-bottom: 15px;
    }
    .quien .imagen{
        padding-top: 0;
        width: 90%;
        margin: auto;
    }
    .quien img{
        border-radius: 25px;
        box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.5);
    }


    .mision{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        
    }
    
    .mision .parrafo-mision{
        margin: auto;
        text-align: center;
        width: 90%;
        padding-bottom: 25px;
        padding-top: 25px;
        grid-row: 1;
        
    }
    

   
    .vision .imagen-vision{
        display: flex;
        width: 100%;
    }
    .mision .imagen-mision img{
        
        width: 80%;
        margin: auto;
        border-radius: 25px;
        box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.5);

    }

    
    .politicas{
        padding: -10px;
    }
    .boton-politicas .btn{
        width: 80%;
    }
    .politicas-cuerpo .politicas-lista{
        display: none;
    }
    
    .politicas-cuerpo .politicas-imagen img{
        border-radius: 25px;
        border-radius: 25px;
        box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.5);
    }
    .politicas-cuerpo .politicas-imagen{
        width: 80%;
        padding-top: 25px;
        margin: auto;
    }
    .politicas-cuerpo{
     
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }
    .politicas-cuerpo .politicas-lista1{
        grid-column-gap: 5px;
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
   
    .politicas-cuerpo .politicas-lista1 ul{

        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 400;
        font-size: 19px;
        line-height: 40px;
        list-style: none;
        

}
    .ubicacion .titulo{
        width: 80%;
    }
    .ubicacion .ciudades{
     
        width: 90%;
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
      
    }
    .ubicacion .sibate-h1, .ubicacion  .bogota-h1,.ubicacion   .putumayo-h1,.ubicacion .meta-h1{
        margin-top: 15px ;
        margin-left: 180px;
        width: 30%;
    }
    .cards-servicios{
        margin: auto;
        width: 90%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px,1fr));
        grid-row-gap: 15px;
    }
    .servicios-titulo{
        width: 90%;
        font-size: 50px;
    }
    .swal2-popup{
        width: 80%;
    }
}

@media screen and (max-width:650px) {

    .imagenes{
        grid-template-columns: repeat(2, 1fr);
    }
    .imagenes img{
        margin: auto;
    }
    .card-group{
        width: 100%;
    }
    .nosotros .collage h1{
        color: #FFF;
        display: flex;
        margin-top: 15%;
        align-items: center;
        justify-content: center;
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 700;
        font-size: 55px;
        line-height: 65px;
        text-align: center;
        letter-spacing: -2px;
    }
    .mapa-ubicacion{
        width: 80%;
        height: 40%;
        margin: auto;
    }
    .ubicacion .sibate-h1, .ubicacion  .bogota-h1,.ubicacion   .putumayo-h1,.ubicacion .meta-h1{
        margin-top: 20px ;
        margin-left: 250px;
        width: 30%;
       
    }

    .letras-pqrs{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .letras-pqrs img{
        display: none;
    }
    .l-pqrs{
        margin: auto;
        text-align: center;
    }
    .l-pqrs h1{
        width: 100%;
        font-size: 30px;

    }

    .txt-pr{
        width:80% ;
    }
    
}

@media screen and (max-width:576px) {

    .card-group{
        width: 50%;
    }
    div.buton-cerrar{
        object-fit: cover;
        height: 50px;
        display: none;
    }
    .nosotros .collage .f button{
        position: absolute;
        top: 70%;
        right: 37%;
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 500;
        font-size: 15px;
        background-color: var(--color-1);
        border-radius: 8px;
        border: var(--color-1);
        color: white;
        height: 50px;
        width: 150px;   
    }

   
    .valores .ir{
        width: 90%;
        margin: auto;
    }
    .valores img{
        width: 90%;
        margin: auto;
    }
}

@media screen and (max-width:520px) {
    .LP h1{
        font-size: 40px;
        }
    .LP p{
        width: 100%;
        opacity: 1;
        color: white;
        }
    .LP button{
        top:95%
        }
        
    .ambiente .texto p{
        width: 80%;
        padding-top:30px;
        margin: 0 auto;
        font-family: 'Helvetica';
        font-weight: 400;
        font-size: 15px;
        color: #161C2D;
            
        }

    .imagenes{
        
        display: grid;
        width: 90%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    
    }

    .card-group{
        width: 65%;
    }

    .formulario h1{
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 700;
        font-size: 45px;
        line-height: 64px;     
        color: #000000;  
    }
    .formulario .comentario{
        margin-bottom: 75px;
    }
    .LP1 h1{
        width: 90%;
        font-size: 45px;
        
        margin-bottom: -70px;
    }
    .ubicacion .ciudades{
     
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
      
    }
    .ubicacion .sibate-h1, .ubicacion  .bogota-h1,.ubicacion   .putumayo-h1,.ubicacion .meta-h1{
        margin-top: 18px ;
        margin-left: 185px;
        font-size: 30px;
        width: 30%;
       
        
    }

    .texto-principal button{
        width: 80%;
    }
    
    .pasos-pqrs{
        width:95%;
    }
 #modal .modal-content {
   
    width: 100%;
    
  }   
}


@media screen and (max-width:400px) {
    .swal2-popup{
        width: 100%;
    }

    .imagenes{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-row:auto;
    
    }
    .imagenes img{
        margin: auto;
    }
    .ambiente .texto p{
        width: 90%;
        padding-top:30px;
        margin: 0 auto;
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        color: #161C2D;
        mix-blend-mode: normal;
        opacity: 0.7;
    }
    .card-group{
        width: 70%;
    }
  
    .pie_pagina .grupo1 .box figure{
        width: 250px;
        padding-left: 20px;
    }

    .letras1{
        margin-top: 10%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    
    }
    .formulario h1{
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 700;
        font-size: 40px;
        line-height: 64px;     
        color: #000000;  
    }
    .formulario .comentario{
        padding-bottom: 10px;
    }
    .container{
        width: 100%;
        margin-top: 50px;
        background: linear-gradient(to right, rgb(255, 255, 255) 70%, var(--color-1) 30%);
        border-radius: 15px;
        box-shadow: 3px 2px 2px 1px rgba(0, 0, 0, 0.2);
        margin-bottom: 50px;
        height: 1000px;
    }
    .con{
        width: 50%;
    }
    
    .valores .lista {
        margin: auto;
        width: 90%;
        list-style: none;
        font-family: 'Helvetica';
        font-style: normal;
        font-weight: 500;
        font-size: 19px;
        line-height: 32px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .boton-politicas .btn{
        width: 80%;
    }
    .mapa-ubicacion{
        width: 100%;
        height: 60%;
        margin: auto;
    }
    .ubicacion .sibate-h1, .ubicacion  .bogota-h1,.ubicacion   .putumayo-h1,.ubicacion .meta-h1{
        margin-top: 20px ;
        margin-left: 200px;
        font-size: 25px;
        width: 30%;
       
    }
    .servicios-titulo{
        font-size: 40px;
    }
    .cards .card {
        
        width:60%;
    }

    .l-pqrs h1{
        width: 100%;
        font-size: 25px;

    }
  
}

@media screen and (max-width:383px){
    .imagenes{
        width: 100%;
    }

    .formulario h1{
        font-size: 30px;
    }
    .imagenes img{
      margin: auto;
    }
    .card-group{
        width: 70%;
    }
    .LP1 h1{
        width: 100%;
        font-size: 50px;
    
    }

    .nosotros .collage h1{
        font-size: 35px;

    }
    .l-pqrs h1{
        width: 100%;
        font-size: 20px;

    }
 
}

/* Media query de largo */

@media screen and (max-height:705px) {
    .container{
        height: 1300px;
    }
    
}