#banner-landing {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 90px;
}

#banner-landing img {
    width: 100%;
}

#s-historia {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('/src/img/landing/10.webp');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 50px 0px;
    gap: 30px;
}

#s-historia p{
    font-size: 18px;
    color: #606060;
    width: 80%;
    text-align: justify;
}

#s-historia h1{
    padding-top: 50px;
}

#s-origenes-fundacion {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: stretch;
}

#s-origenes-fundacion> div:nth-child(1) {
    background-color: #E6800C;
}

#s-origenes-fundacion> div:nth-child(2) {
    background-color: #799427;
}

.card-origen-fundacion {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 0px 30px 0px 50px;
}

.card-origen-fundacion div{
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}

.card-origen-fundacion div h3{
    font-size: 35px;
    color: #fff;
    font-family:"Muller Bold";
    text-align: start;
}

.card-origen-fundacion div a{
    border-radius: 30px;
    background-color: #fff;
    color: #606060;
    padding: 4px 30px;
    font-family:"Muller Bold";
    font-size: 18px;
}

.card-origen-fundacion img{
    width: 45%;
}

#s-atracciones {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 80px ;
}

#content-cards-atracciones {
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 80px 0px 40px;
    align-items: flex-start;
}

.card-atracciones {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.card-atracciones::before{
    width: 100%;
    content: "";
    height: 18px;
    background-image: url(/src/img/landing/11.webp);
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0px;
    position: absolute;
}

.card-atracciones >img{
    width: 100%;
}

.card-atracciones >div{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-color: #EFEDED;
    padding: 20px 30px;
}

.card-atracciones >div.azul h3{
    color: #00A695;
}

.card-atracciones >div.azul a{
    background-color: #00A695;
}

.card-atracciones >div.azul svg{
    fill: #00A695;
}

.card-atracciones >div.verde h3{
    color: #809A29;
}

.card-atracciones >div.verde a{
    background-color: #809A29;
}

.card-atracciones >div.verde svg{
    fill: #809A29;
}

.card-atracciones >div.naranja h3{
    color: #F0850D;
}

.card-atracciones >div.naranja a{
    background-color: #F0850D;
}

.card-atracciones >div.naranja svg{
    fill: #F0850D;
}

.card-atracciones >div.rojo h3{
    color: #D83231;
}

.card-atracciones >div.rojo a{
    background-color: #D83231;
}

.card-atracciones >div.rojo svg{
    fill: #D83231;
}

.card-atracciones >div h3{
    font-size: 25px;
    font-family:"Muller Bold";
}

.card-atracciones >div span{
    font-size: 16px;
    font-family:"Muller Bold";
    color: #606060;
    margin-bottom: 25px;
}

.card-atracciones >div p{
    font-size: 18px;
    color: #606060;
    text-align: justify;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 20px;
}

.card-atracciones >div >div{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-atracciones >div >div a{
    border-radius: 30px;
    color: #fff;
    padding: 4px 30px;
    font-family:"Muller Bold";
    font-size: 18px;
}

.card-atracciones >div >div svg{
    width: 80px;
}

#s-experiencias {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('/src/img/landing/14.webp');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px 0px;
    gap: 60px;
    position: relative;
}

#s-experiencias::before{
    width: 100%;
    content: "";
    height: 18px;
    background-image: url(/src/img/landing/11.webp);
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0px;
    position: absolute;
}

#content-info-experiencia {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

#content-info-experiencia >img{
    width: 40%;
    border-radius: 10px;
}

#info-experiencia {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

#info-experiencia >h4{
    font-size: 22px;
    color: #606060;
    font-family:"Muller Bold";
}

#content-card-info-experiencia {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.card-experiencia {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 30px 0px;
    position: relative;
}

.card-experiencia >svg{
    width: 80px;
    fill: #799427;
}

/* .card-experiencia::before {
    content: "";
    width: 1px;
    height: 50px;
    position: absolute;
    background-color: #799427;
    bottom: 0px;
    left: 30px;
} */

.card-experiencia >p{
    width: calc(100% - 80px);
    font-size: 18px;
    color: #606060;
}

.card-experiencia >p b{
    font-family:"Muller Bold";    
}

#s-gastronomia {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
    gap: 50px;
}

#s-gastronomia >h3{
    font-size: 30px;
    color: #606060;
    font-family:"Muller Bold";    
}

#content-cards-gastronomias {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.card-gastronomia {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.info-gastronomia {
    width: 65%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    gap: 30px;
}

.card-gastronomia.naranja{
    background-image: url('/src/img/landing/15.webp');
}

.card-gastronomia.rojo{
    background-image: url('/src/img/landing/17.webp');
}

.card-gastronomia.verde{
    background-image: url('/src/img/landing/16.webp');
}

.info-gastronomia img{
    width: 20%;
}

.info-gastronomia >div{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
}

.info-gastronomia >div h4{
    font-size: 22px;
    color: #fff;
    font-family:"Muller Bold";    
}

.info-gastronomia >div p{
    font-size: 18px;
    color: #fff;
    text-align: start;
}

.card-gastronomia >img {
    width: 35%;
}

#s-actividades {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('/src/img/landing/13.webp');
    background-repeat: no-repeat;
    background-size: cover;
    gap: 60px;
    padding: 50px 0px;
}

#content-actividades {
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 60px;
    justify-content: center;
    align-items: flex-start;
}

.card-actividades {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.card-actividades >img{
    width: 30%;
}

.card-actividades >h4{
    text-align: center;
    width: 100%;
    color: #606060;
    font-family:"Muller Bold";   
}

.card-actividades >p{
    width: 100%;
    text-align: justify;
    color: #606060;
}

.card-actividades >a{
    border-radius: 30px;
    color: #fff;
    padding: 4px 30px;
    font-family:"Muller Bold";
    font-size: 18px;
}

.card-actividades >a.azul{
    background-color: #00A695;
}

.card-actividades >a.verde{
    background-color: #799427;
}

#s-informacion {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 50px 0px;
}

.content-informacion {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: relative;
}

.content-informacion >img{
    width: 45%;
}

.content-informacion::before{
    width: 100%;
    content: "";
    height: 18px;
    background-image: url(/src/img/landing/11.webp);
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0px;
    position: absolute;
}

.info-informacion {
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0px;
    position: relative;
}

.info-informacion::before{
    width: 100%;
    content: "";
    height: 18px;
    background-image: url(/src/img/landing/11.webp);
    background-repeat: no-repeat;
    background-size: cover;
    top: 0px;
    position: absolute;
}

.info-informacion >div {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 30px;
}

.info-informacion >div h4{
    font-size: 25px;
    color: #799427;
    font-family:"Muller Bold";
}

.info-informacion >div h5{
    font-size: 22px;
    color: #606060;
    font-family:"Muller Bold";
}

.info-informacion >div p{
    font-size: 18px;
    color: #606060;
}

.info-informacion >div a{
    border-radius: 30px;
    color: #fff;
    padding: 4px 30px;
    font-family:"Muller Bold";
    font-size: 18px;
    background-color: #799427;    
}

#s-como-llegar {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
    gap: 50px;
}

#s-como-llegar >h3{
    font-size: 30px;
    color: #606060;
    font-family:"Muller Bold";    
}

#content-card-como-llegar {
    width: 90%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.card-como-llegar {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-como-llegar.verde {
    background-color: #799427;
}

.card-como-llegar.azul {
    background-color: #00A695;
}

.card-como-llegar.naranja {
    background-color: #E6800C;
}

.card-como-llegar img{
    width: 100%;
}

.card-como-llegar >div{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 20px;
}

.card-como-llegar >div span{
    font-size: 18px;
    color: #fff;
    font-family:"Muller Bold";    
}

.card-como-llegar >div p{
    font-size: 18px;
    color: #fff;
}

#s-transporte {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
    gap: 30px;
}

#s-transporte >h3{
    font-size: 30px;
    color: #606060;
    font-family:"Muller Bold";    
}

#s-transporte >p{
    width: 90%;
    font-size: 18px;
    color: #606060;
    text-align: center;
}

.s-silder {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #EBEDED;
    padding: 50px 0px;
}

.principal-content-slider {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-carousel-slider {
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#carousel-slider-1 {
    width: 100%;
    display: block;
}

.content-info-slider {
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding: 40px;
}

.content-info-slider h3{
    font-size: 22px;
    color: #606060;
    font-family: "Muller Bold";
}

.content-info-slider >p {
    width: calc(100% - 80px);
    font-size: 18px;
    color: #606060;
}

.content-info-slider >b {
    font-family:"Muller Bold";    
}

.content-info-slider >a {
    border-radius: 30px;
    color: #fff;
    padding: 4px 30px;
    font-family:"Muller Bold";
    font-size: 18px;
    background-color: #799427;    
}


#s-consejos {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 50px 0px;
}

#s-consejos >h3{
    font-size: 30px;
    color: #606060;
    font-family:"Muller Bold";    
}

#content-consejos {
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

.card-consejos {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

.card-consejos a{
    border-radius: 30px;
    color: #00A695;
    padding: 4px 30px;
    font-family:"Muller Bold";
    font-size: 18px;
    background-color: #fff;    
}

.card-consejos >img{
    width: 50%;
}

.card-consejos >h4{
    text-align: center;
    width: 100%;
    color: #ffff;
    font-family:"Muller Bold";   
}

.card-consejos >p{
    width: 100%;
    text-align: justify;
    color: #ffff;
}

.card-consejos.azul{
    background-color: #00A695;
}

.card-consejos.verde{
    background-color: #799427;
}

.card-consejos.naranja{
    background-color: #E6800C;
}

.card-consejos.rojo{
    background-color: #D83231;
}

#s-comentarios-landing {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('/src/img/landing/37.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#p-content-comentarios {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#carousel-comentarios {
    width: 100%;
}

#carousel-comentarios .owl-stage-outer {
    padding: 60px 0px;
}

.card-comentario {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 20px;
    position: relative;
}

.name-comentario {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    padding: 20px 40px;
}

.name-comentario img{
    width: 15% !important;
}

.name-comentario div{
    width: 85%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.name-comentario div h3{
    font-size: 22px;
    color: #799427;
    font-family:"Muller Bold";   
}

.name-comentario div span{
    font-size: 12px;
    color: #606060;
}

.info-comentario {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    padding: 20px 40px;
    border-top: 1px solid #dddddd;
}

.info-comentario h3{
    font-size: 20px;
    color: #606060;
    font-family:"Muller Bold";   
}

.info-comentario p{
    font-size: 18px;
    color: #606060;
}

.card-comentario >img {
    width: 70px !important;
    position: absolute;
    top: -35px;
    z-index: 99;
}


@media screen and (max-width: 1024px) {
    #banner-landing {
        margin-top: 90px;
    }

    #s-historia {
        padding: 20px;
    }

    #s-historia p {
        width: 100%;
    }

    #s-historia h1 {
        padding-top: 20px;
    }

    h1.titulo_pagina {
        font-size: 30px;
    }

    #s-origenes-fundacion {
        grid-template-columns: 1fr;
    }

    .card-origen-fundacion div h3 {
        font-size: 22px;
    }

    .card-origen-fundacion {
        gap: 20px;
        padding: 20px;
    }

    #s-atracciones {
        padding-top: 40px;
    }

    #content-cards-atracciones {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 20px;
    }

    #content-info-experiencia {
        width: 100%;
        gap: 30px;
        flex-direction: column;
    }

    #s-experiencias {
        padding: 60px 20px;
    }

    #content-info-experiencia >img {
        width: 70%;
    }

    #info-experiencia {
        width: 100%;
    }

    .card-experiencia >svg {
        width: 40px;
    }

    .card-experiencia >p {
        width: calc(100% - 40px);
    }

    .card-experiencia {
        align-items: flex-start;
    }

    .card-gastronomia {
        flex-direction: column-reverse;
    }
    .info-gastronomia {
        width: 100%;
        padding: 20px;
        gap: 10px;
        flex-direction: column;
        align-items: flex-start;
    }

    .card-gastronomia >img {
        width: 100%;
    }

    .info-gastronomia >div {
        width: 100%;
    }

    #s-actividades {
        padding: 0px;
        gap: 20px;
    }

    #content-actividades {
        width: 100%;
        display: grid;
        grid-template-columns:  1fr;
        gap: 40px;
        padding: 20px;
    }

    .card-actividades >img {
        width: 20%;
    }

    .content-informacion {
        flex-direction: column;
    }

    .content-informacion >img {
        width: 100%;
    }

    .info-informacion {
        width: 100%;
    }

    .info-informacion >div {
        margin-top: 20px;
        align-items: center;
        padding: 0px 20px;
    }

    .info-informacion >div h5 {
        font-size: 20px;
    }

    .info-informacion >div a {
        margin-bottom: 20px;
    }

    .info-informacion >div p {
        text-align: center;
    }

    #s-como-llegar {
        padding:  0px;
        gap: 30px;
    }

    #content-card-como-llegar {
        width: 100%;
        padding: 20px;
        display: grid;
        grid-template-columns:  1fr;
    }

    #s-transporte {
        padding: 20px;
    }

    .s-silder {
        padding: 0px;
    }

    .principal-content-slider {
        width: 100%;
        flex-direction: column;
        padding: 20px;
    }

    .content-carousel-slider {
        width: 100%;
    }

    .content-info-slider {
        width: 100%;
        padding: 20px;
        align-items: center;
    }

    .content-info-slider >p {
        width: 100%;
    }

    #s-consejos {
        gap: 40px;
        padding: 20px 0px;
    }

    #content-consejos {
        width: 100%;
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .card-consejos >img {
        width: 40%;
    }

    #s-transporte >h3 {
        font-size: 22px;
        text-align: center;
    }

    .name-comentario {
        padding: 30px 40px;
    }

	#carousel-comentarios .owl-stage-outer {
		padding: 60px 0px 0px;
	}

    .info-informacion >div:last-child{
        margin-bottom: 20px;
    }

    #banner-landing img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        object-position: left;
    }

}