body{
    width: 100%;
    
}
.header{
    width: inherit;
    display: flex;
    position: fixed;
    z-index: 2;
}
.topbar, .rrssbar{
    display: flex;
}
.topbar{
    flex-direction: column;
    width: 100%;
}
.rrssbar{
    /* padding: .25rem 5rem; */
    order: 1;
    background-color: var(--primary-color);
    justify-content: space-between;
}
.navbar{
    /* padding: .25rem 5rem; */
    justify-content: space-between;
    display: flex;
    order: 2;
    align-items: center;
    background-color: #fff;
    box-shadow: 0px 4px 8px 0px #485b445c;

}
.navbar-ul{
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}
.navbar-menu{
    display: flex;
    align-items: center;
}
.navbar-logo{
    width: 11.875rem;
    object-fit: contain;
}
.menu-li{
    padding: .5rem 1.5rem;
    font-weight: 600;
}
.menu-li:hover{
    background-color: var(--primary-color);
}

.navbar-icon{
    width: 2rem;
}
.a-icon-plus{
    display: flex;
    align-items: center;
    gap: .5rem;
    
}

.section-hero{
    /* padding: 16rem 5rem 17.5rem 5rem; */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    background-image: url(../img/hero_evaluaciones_de_impacto_ambiental.JPG);
    /* background-size: cover;
    background-repeat: no-repeat; */
}
.servicios{
   
    background-image: url(../img/servicios_hero.jpeg);
}
.contacto{
    background-image: url(../img/hero_contacto.jpg);
}
.galeria_hero{
    background-image: url(../img/hero_galeria.png);
}
.h1{
    /* font-size: 2.5rem; */
    font-weight: 700;
    color: white;
    text-align: center;
    text-shadow: 1px 1px 4px black;
}
.button-cta{
    display: flex;
    padding: .5rem 1rem .4rem;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    border-radius: .5rem;
    border-bottom: .125rem solid #6F9160;
    background-color: #6F9160;
    color: white;
    box-shadow: .125rem .125rem .25rem 0 rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: all .325s ease;
}
.button-cta:hover{
    background-color: #628353;
}

.section-cards{
    position: relative;
    /* padding: 0 5rem; */
    display: flex;
    justify-content: center;
    gap: 2rem;
    transform: translateY(-144px);
}
/* .section-card{
    width: 20rem;
    height: 21rem;
    border-radius: 1rem;
} */
.card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.card-p{
    width: 14rem ;
    /* font-size: 1rem; */
    font-weight: 700;
    text-align: center;
    line-height: normal;
}
.section-about{
    /* padding: 0 5rem; */
    /* transform: translateY(-80px); */
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}
.about-description{
    /* width: 75%; */
    text-align: center;
    line-height: normal;
}
.about-feature{
    /* padding: 0 2rem; */
    display: flex;
    flex-direction: row;
    gap: 2rem;
    line-height: normal;
}
.about-feature:nth-child(3){
    flex-direction: row-reverse;
}
.about-text{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    /* width: 32rem; */
}
.h2{
    /* font-size: 1.6rem; */
    font-weight: 600;
}

.img-tape{
    /* padding: 16rem 5rem; */
    border: 5rem solid;
    display: flex;
    justify-content: center;
    background-image: url(../img/proyectos.JPG);
    background-size: cover;
    background-position: center;
}
.title-tape{
    padding: 0.25rem 1.5rem;
    width: fit-content;
    background-color: rgb(143 175 136 / 85%);
    color: white;
    /* font-size: 2.5rem; */
    text-shadow: .0625rem .0625rem .1875rem var(--secondary-color);
}
.valor-agregado{
    /* padding: 3.5rem 5rem 2.5rem; */
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}
.seccion-talleres{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background-color: var(--secondary-color);
    color: #fff;
}
.taller-lista{
    padding-left: 1rem;
}
.taller{
    list-style-type: auto;
}
.elemento{
    display: flex;
    flex-direction: row;
    gap: 2rem;
}
.elemento-extra{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}
.img-ampliaexperiencia,
.img-enfoquepersonalizado,
.img-innovacionconst,
.img-resonsabilidadsocial,
.img-compromisoconla,
.img-dictamenes,
.img-levantamientos,
.img-elabprogramas,
.img-gestionpermisos,
.img-ventaplantas,
.img-disenopaisaje,
.img-manifiestos{
    /* width: 32rem; */
    /* height: 24rem; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 35rem;

}
.img-ampliaexperiencia{
    background-image: url(../img/amplia_experiencia.JPG);
}
.img-enfoquepersonalizado{
    background-image: url(../img/enfoque_personalizado.jpg);
}
.img-compromisoconla{
    background-image: url(../img/compromiso_con_la_calidad.JPG);
}
.img-innovacionconst{
    background-image: url(../img/innovacion_constante.JPG);
}
.img-resonsabilidadsocial{
    background-image: url(../img/responsabilidad_social_tierra.jpg);
}
.img-dictamenes{
    background-image: url(../img/dictamenes_de_arbolado_NADF001.jpeg);
}
.img-levantamientos{
    background-image: url(../img/levantamientos_forestales_NADF001.jpeg);
}
.img-elabprogramas{
    background-image: url(../img/elaboracion_de_programas_de_plantacion.jpeg);
}
.img-gestionpermisos{
    background-image: url(../img/gestion_permisos_ArbolColapsado.jpg);
}
.img-ventaplantas{
    background-image: url(../img/venta_de_planta_medicinal_invernaderos.jpg);
}
.img-disenopaisaje{
    background-image: url(../img/diseno_de_arquitectura_del_paisaje_Diseno.jpeg);
}
.img-manifiestos{
    background-image: url(../img/diseno_para_manifiestos_de_impacto_ambiental.jpeg);
}
.title-valor-agregado{
    font-size: 1.25rem;
    font-weight: 700;
    width: 75%;
    text-align: center;
}
.subtitle-valor-agregado{
    font-size: 1.25rem;
}
.elemento-text{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    /* width: 32rem; */
}
.elemento-title{
    font-weight: 700;
}
.text-right{
    text-align: right;
    align-self: flex-end;
}
.elemento-parrafo{
    /* width: 80%; */
    line-height: normal;
}
.elemento-parrafo-extra{
    /* width: 100%; */
    line-height: normal;
}
.footer{
    /* padding: 2rem 5rem 1rem; */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background-color: var(--tertiary-color);
    background-image: url(../img/engranes.png);
    background-repeat: no-repeat;
}
.footer-ul{
    display: flex;
    gap: 1rem;
}


/* Estilos base */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-menu {
    display: flex;
    list-style: none;
}

.menu-li {
    margin: 0 10px;
}

.rrssbar {
    display: flex;
    justify-content: space-between;
}

/* Ocultar el menú hamburguesa por defecto */
.navbar-hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.navbar-hamburger div {
    background-color: #000;
    height: 3px;
    width: 100%;
    border-radius: 5px;
}

.formulario{
    display: flex;
    flex-direction: column;
}
.container-form{
    width: 100%;
    display: flex;
    justify-content: center;
}
.text-form{
    width: inherit;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}
.form{
    padding: 2rem;
    width: inherit;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--primary-color);
}
.form-p{
    color: #fff;
    font-size: 1.2rem;
}
.formulario{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.label{
    width: 100%;
    color: white;
}
.input,
.textarea{
    width: 100%;
    background-color: white;
    color: var(--secondary-color);
    padding: .5rem;
}

.button{
    font-family: var(--tipo-principal);
    padding: .5rem;
    color: #fff;
    background-color: var(--secondary-color);
}
.button:hover{
    background-color: #314f35;
    cursor: pointer;
}
.whatsapp__img{
    width: 60px;
    position: fixed;
    bottom: 40px;
    right: 40px;
    filter: drop-shadow(1px 2px 16px #00000042);
}

/* Estilos para pantallas menores a 768px */
@media (max-width: 768px) {
    .navbar-menu {
        display: none; /* Ocultar el menú inicialmente */
        flex-direction: column;
        position: absolute;
        top: 70px; /* Ajusta según la altura de tu navbar */
        right: 0;
        background-color: #fff;
        width: 100%;
        z-index: 1000;
    }

    .navbar-menu.active {
        display: flex;
    }

    .navbar-hamburger {
        display: flex;
    }

    .rrssbar {
        flex-direction: column;
    }
    .container-form {
        flex-direction: column;
        gap: 1rem;
    }
    .whatsapp__img{
        width: 2.5rem;
        right: 16px;
    }
}

@media (width <= 768px) {

    .navbar-menu {
        display: none; /* Ocultar el menú inicialmente */
        flex-direction: column;
        position: absolute;
        top: 70px; /* Ajusta según la altura de tu navbar */
        right: 0;
        background-color: #fff;
        width: 100%;
        z-index: 1000;
    }

    .navbar-menu.active {
        display: flex;
    }

    .navbar-hamburger {
        display: flex;
    }

    .rrssbar {
        flex-direction: column;
    }

    .h1,
    .title-tape{
        font-size: 1.75rem;
    }
    .h2{
        font-size: 1.5rem;
    }
    .card-p,
    .about-description,
    .p-feature,
    .elemento-parrafo,
    .a-icon-plus,
    .menu-li{
        font-size: 1rem;
        text-align: center;
    }
    .menu-li{
        width: 100%;
    }
    .title-valor-agregado{
        width: 100%;
    }
    .about-feature,
    .elemento{
        flex-wrap: wrap;
        justify-content: center;
    }
    .elemento-parrafo{
        width: 100%;
    }
    .movil{
        flex-direction: column-reverse;
    }
    .elemento-title,
    .elemento-parrafo{
        text-align: center;
    }
    .text-right{
        align-self: center;

    }
    .footer-p{
        font-size: .5rem;
    }
    .rrssbar,
    .navbar{
        padding: .2rem 1rem;
        justify-content: center;
    }
    .section-hero{
        padding: 2rem 0 0 0;
    }
    .section-cards,
    .section-about,
    .about-description{
        padding: 0 1rem;
        flex-wrap: wrap;
    }
    .img-tape{
        padding: 6rem 1rem;
        border: 1.5rem solid;
    }
    .valor-agregado{
        padding: 3rem 1rem 1rem;
    }
    .seccion-talleres{
        padding: 3rem 1rem 1rem;
    }
    .footer{
        padding: 1.5rem 1rem .5rem;
        background-image: none;
    }

    .about-text,
    .about-img,
    .elemento-text{
        width: 100%;
        max-width: 36rem;
        min-width: 20rem;
    }
    .img-ampliaexperiencia,
    .img-enfoquepersonalizado,
    .img-innovacionconst,
    .img-resonsabilidadsocial,
    .img-compromisoconla,
    .img-dictamenes,
    .img-levantamientos,
    .img-elabprogramas,
    .img-gestionpermisos,
    .img-ventaplantas,
    .img-disenopaisaje,
    .img-manifiestos{
        width: 100%;
        max-width: 36rem;
        min-width: 22rem;
        height: 16rem;
    }
    
    .section-card{
        width: 100%;
        max-width: 26rem;
        min-width: 24rem;
        height: 16rem;
        border-radius: 1rem;
    }
    .menu-footer{
        flex-direction: column;
        
    }
    .navbar-hamburger{
        display: none;
    }
    
}


@media (768px < width <= 1280px) {
    .h1,
    .title-tape{
        font-size: 2rem;
    }
    .h2{
        font-size: 1.4rem;
    }
    .card-p,
    .about-description,
    .p-feature,
    .elemento-parrafo,
    .a-icon-plus,
    .menu-li{
        font-size: .9rem;
    }
    .footer-p{
        font-size: .75rem;
    }
    .rrssbar,
    .navbar{
        padding: .25rem 2.5rem;
    }
    .section-hero{
        padding: 3rem 0 0 0;
    }
    .section-cards,
    .section-about,
    .about-description{
        padding: 0 2.5rem;
    }
    .img-tape{
        padding: 8rem 2.5rem;
        border: 1.75rem solid;
    }
    .valor-agregado{
        padding: 3.5rem 2.5rem 2.5rem;
    }
    .seccion-talleres{
        padding: 3.5rem 2.5rem 2.5rem;
    }
    .footer{
        padding: 2rem 2.5rem 1rem;
    }

    .about-text,
    .about-img,
    .elemento-text{
        min-width: 20rem;
        /* max-width: 28rem; */
        width: 100%;
    }
    .img-ampliaexperiencia,
    .img-enfoquepersonalizado,
    .img-innovacionconst,
    .img-resonsabilidadsocial,
    .img-compromisoconla,
    .img-dictamenes,
    .img-levantamientos,
    .img-elabprogramas,
    .img-gestionpermisos,
    .img-ventaplantas,
    .img-disenopaisaje,
    .img-manifiestos{
        min-width: 20rem;
        /* max-width: 28rem; */
        width: 100%;
        height: 16rem;
    }
    
    .section-card{
        width: 16rem;
        height: 18rem;
        border-radius: 1rem;
    }
    
}

@media (1280px < width <= 1940px) {
    .h1,
    .title-tape{
        font-size: 2.5rem;
    }
    .h2{
        font-size: 1.5rem;
    }
    .card-p,
    .about-description,
    .p-feature,
    .elemento-parrafo,
    .a-icon-plus,
    .menu-li{
        font-size: 1rem;
    }
    .footer-p{
        font-size: .85rem;
    }
    .rrssbar,
    .navbar{
        padding: .5rem 5rem;
    }
    .section-hero{
        padding: 5rem 0 0 0;
    }
    .section-cards,
    .section-about,
    .about-description{
        padding: 0 5rem;
    }
    .img-tape{
        padding: 16rem 5rem;
        border: 2rem solid;
    }
    .valor-agregado{
        padding: 4rem 5rem 3.5rem;
    }
    .seccion-talleres{
        padding: 4rem 5rem 3.5rem;
    }
    .footer{
        padding: 4rem 5rem 2rem;
    }

    .about-text,
    .about-img,
    .elemento-text{
        width: 32rem;
    }
    .img-ampliaexperiencia,
    .img-enfoquepersonalizado,
    .img-innovacionconst,
    .img-resonsabilidadsocial,
    .img-compromisoconla,
    .img-dictamenes,
    .img-levantamientos,
    .img-elabprogramas,
    .img-gestionpermisos,
    .img-ventaplantas,
    .img-disenopaisaje,
    .img-manifiestos{
        width: 32rem;
        height: 24rem;
    }
    
    .section-card{
        width: 24rem;
        height: 26rem;
        border-radius: .5rem;
    }
    
}

@media (1940px < width <= 3400px) {
    .h1,
    .title-tape{
        font-size: 4rem;
    }
    .h2,
    .elemento-title{
        font-size: 2.5rem;
    }
    .card-p,
    .about-description,
    .p-feature,
    .elemento-parrafo,
    .a-icon-plus,
    .menu-li{
        font-size: 1.5rem;
    }
    .footer-p{
        font-size: 1.25rem;
    }
    .rrssbar,
    .navbar{
        padding: .75rem 7.5rem;
    }
    .section-hero{
        padding: 18rem 0 18.5rem 0;
    }
    .section-cards,
    .section-about,
    .about-description{
        padding: 0 7.5rem;
    }
    .img-tape{
        padding: 16rem 7.5rem;
        border: 4rem solid;
    }
    .valor-agregado{
        padding: 5rem 7.5rem 4.5rem;
    }
    .seccion-talleres{
        padding: 5rem 7.5rem 4.5rem;
    }
    .footer{
        padding: 6rem 7.5rem 2rem;
    }

    .about-text,
    .about-img,
    .elemento-text{
        width: 40rem;
    }
    .img-ampliaexperiencia,
    .img-enfoquepersonalizado,
    .img-innovacionconst,
    .img-resonsabilidadsocial,
    .img-compromisoconla,
    .img-dictamenes,
    .img-levantamientos,
    .img-elabprogramas,
    .img-gestionpermisos,
    .img-ventaplantas,
    .img-disenopaisaje,
    .img-manifiestos{
        width: 40rem;
        height: 42rem;
    }
    
    .section-card{
        width: 24rem;
        height: 26rem;
        border-radius: 1.5rem;
    }
    
}