html{
    overflow-x: hidden;
}

body{
    overflow-x: hidden;
    position: relative;
  }

.image-container {
    /* position: relative; */
    overflow: hidden; /* Oculta el desbordamiento para evitar el desplazamiento lateral */
}

.embedded-image {
    position: absolute;
    left: 0;
    transform: translate(-50%, -50%) translateY(60px); /* Mueve la imagen 10px hacia abajo */
    z-index: 10;
    width: 50%; /* Ajusta el tamaño de la imagen como porcentaje del ancho del contenedor */
    height: auto;
    max-width: 300px; /* Tamaño máximo de la imagen */
    overflow-x: hidden;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear; 
    transform-origin: bottom left;
}

.leaves{ 
    animation: mymove 25s infinite;
    transform-origin: left center;
}

@keyframes mymove {
    50% {transform: rotate(15deg);}
}

.sideleaves{ 
    animation: mymoverig 25s infinite;
    transform-origin: right bottom;
}

@keyframes mymoverig {
    50% {transform: rotate(10deg);}
}

@media (max-width: 768px) {
    .embedded-image {
        width: 70%; /* Ajusta el tamaño de la imagen para pantallas más pequeñas */
        max-width: 200px; /* Tamaño máximo de la imagen en pantallas más pequeñas */
        margin-top: -50px;
    }
}

@media (max-width: 576px) {
    .embedded-image {
        width: 90%; /* Ajusta el tamaño de la imagen para pantallas aún más pequeñas */
        max-width: 150px; /* Tamaño máximo de la imagen en pantallas muy pequeñas */
        margin-top: -50px;
    }
}

@media (max-width: 480px) {
    .embedded-image {
        width: 95%; /* Ajusta el tamaño de la imagen para pantallas muy pequeñas */
        max-width: 120px; /* Tamaño máximo de la imagen en pantallas muy pequeñas */
        margin-top: -50px;
    }
}

@media (max-width: 360px) {
    .embedded-image {
        width: 100%; /* Ajusta el tamaño de la imagen para pantallas extremadamente pequeñas */
        max-width: 100px; /* Tamaño máximo de la imagen en pantallas extremadamente pequeñas */
        margin-top: -50px;
    }
}

/* ------------------------------------------------------------------------------------------------------ */

.embedded-image2 {
    position: absolute;
    right: 0;
    transform: translate(0%, -50%) translateY(60px); /* Mueve la imagen 10px hacia abajo */
    z-index: 10;
    width: 50%; /* Ajusta el tamaño de la imagen como porcentaje del ancho del contenedor */
    height: auto;
    max-width: 200px; /* Tamaño máximo de la imagen */
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .embedded-image2 {
        width: 70%; /* Ajusta el tamaño de la imagen para pantallas más pequeñas */
        max-width: 200px; /* Tamaño máximo de la imagen en pantallas más pequeñas */
        margin-top: -50px;
    }
}

@media (max-width: 576px) {
    .embedded-image2 {
        width: 90%; /* Ajusta el tamaño de la imagen para pantallas aún más pequeñas */
        max-width: 100px; /* Tamaño máximo de la imagen en pantallas muy pequeñas */
        margin-top: -50px;
    }
}

@media (max-width: 480px) {
    .embedded-image2 {
        width: 95%; /* Ajusta el tamaño de la imagen para pantallas muy pequeñas */
        max-width: 90px; /* Tamaño máximo de la imagen en pantallas muy pequeñas */
        margin-top: -50px;
    }
}

@media (max-width: 360px) {
    .embedded-image2 {
        width: 100%; /* Ajusta el tamaño de la imagen para pantallas extremadamente pequeñas */
        max-width: 50px; /* Tamaño máximo de la imagen en pantallas extremadamente pequeñas */
        margin-top: -50px;
    }
}

/* rama entre google maps y contacto*/

/* palmera */
.palm-container {
    position: relative;
    /* Oculta el desbordamiento para evitar el desplazamiento lateral */
}

.palm-image {
    position: absolute;
    width: 30%;
    transform: translate(-50%, -50%) translateY(60px); 
    top: -20px;
    left: 2%;
    z-index: 10;
}

@media (max-width: 768px) {
    .palm-image {
        width: 70%; /* Ajusta el tamaño de la imagen para pantallas más pequeñas */
        max-width: 200px; /* Tamaño máximo de la imagen en pantallas más pequeñas */
        margin-top: -50px;
    }
}

@media (max-width: 576px) {
    .palm-image {
        width: 90%; /* Ajusta el tamaño de la imagen para pantallas aún más pequeñas */
        max-width: 150px; /* Tamaño máximo de la imagen en pantallas muy pequeñas */
        margin-top: -50px;
    }
}

@media (max-width: 480px) {
    .palm-image {
        width: 95%; /* Ajusta el tamaño de la imagen para pantallas muy pequeñas */
        max-width: 120px; /* Tamaño máximo de la imagen en pantallas muy pequeñas */
        margin-top: -50px;
    }
}

@media (max-width: 360px) {
    .palm-image {
        width: 100%; /* Ajusta el tamaño de la imagen para pantallas extremadamente pequeñas */
        max-width: 100px; /* Tamaño máximo de la imagen en pantallas extremadamente pequeñas */
        margin-top: -50px;
    }
}