@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;800&family=Raleway&display=swap');

* {
    margin: 0;
    padding: 0;
}
body {
    background: white;
    min-height: 1600px;
    max-width: 100%;
}
section.xlabonIntro {
    position: relative;
    /* top: -66px; */
    max-width: 100%;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
section.xlabonIntro:before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to top, #111, transparent);
    z-index: 10;
}
section.xlabonIntro:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    mix-blend-mode: color; 
}
section.xlabonIntro img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
#xlab, #luna {
    z-index: 1;
}
#xlab {
    left: 10%;
    width: 80%;
    margin-top: 20px;
}
#luna {
    margin-top: 60px;
}
#back {
    z-index: 0;
    top: 67px !important;
}
#sf, #rama {
    z-index: 1;
}
#rama {
    margin-top: 56px;
    z-index: 2;
}
#sf2 {
    z-index: 2;
}
#sf, #sf2 {
    top: 67px !important;
}
#cor1, #cor2 {
    z-index: 3;
    top: 67px !important;
}
#cant {
    z-index: 7;
}
#plantas {
    z-index: 8;
}
#flor {
    z-index: 9;
}

section.xlabonIntro2 {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
section.xlabonIntro2:before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to top, #1d320f, transparent);
    z-index: 6;
}
section.xlabonIntro2:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: #046c3a; */
    /* background: #c4fde2; */
    /* background: #53a1b6; */
    z-index: 6;
    /* mix-blend-mode: color; */
}
section.xlabonIntro2 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}