#intro-video, #intro-image {
    /* filter: var(--videofilter); */
}

.Introduction-success-send {
    display: none;

}


/*----------- DESCTOP ---------------------------------------------------*/
@media screen and (min-width: 769px) {

    .Introduction {
        position: relative;
        width: 100%;
        overflow: hidden;
        /* margin-top: -120px; */
        z-index: 200;
        background: var(--gradient1);
        min-height: 460px;
        display: flex;
        align-items: center;
    }

    #intro-video, #intro-image {
        position: absolute;
        top: 0;
        min-width: 1835px;
        display: block;
    }

    /* .intro-video-wrapper,
    .intro-image-wrapper,
    .Introduction-Desc {
        overflow: hidden;
        height: 668px;

    } */

    .intro-video-wrapper {
        max-width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .Introduction-Desc {
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        z-index: 400;
        padding-bottom: 24px;
    }

    .Introduction-Header {
        display: block;
        transform: translateX(-7.2%) scale(0.86);
        font-size: xx-large;
        font-weight: 500;
        margin-bottom: 14px;
        color: var(--color6);
    }

    .Introduction-About {
        display: block;
        font-weight: 400;
        font-size: larger;
        margin: 8px 0 24px 0px;
        color: var(--color7);
    }

    .intro-content-wrapper {
        /* height: 264px; */
        padding: 26px 0 38px 32px;
        width: calc(var(--contentWidth) - 64%);
        /* background: var(--gradient1); */
        /* background-image: linear-gradient(45deg, transparent 32px, var(--color3) 0, var(--color2) calc(100% - 32px), transparent 0), linear-gradient(45deg, transparent 31px, #ffffff66 0, #ffffff66 calc(100% - 31px), transparent 0);  */
        background-image: linear-gradient(45deg, transparent 32px, var(--color2) 0, var(--color3) calc(100% - 32px), transparent 0), linear-gradient(45deg, transparent 31px, #ffffff66 0, #ffffff66 calc(100% - 31px), transparent 0);
        background-position: 0 0, right -6px bottom -6px;
        background-repeat: no-repeat;
        background-size: calc(100% - 5px) calc(100% - 5px), 100% 100%;
    }

    .intro-illustration {
        display: flex;
        flex-direction: row-reverse;
    }

    .intro-monitor {
        width: 350px;
        position: relative;
        filter: var(--brightness);
    }

    .intro-content {
        text-align: left;
    }

    .intro-content a, .intro-content span{
        margin: 0 18px 18px 0;
        width: 14vw;
    }

    .intro-WhatsApp-icon {
        width: 24px;
        height: 24px;
        margin-right: 14px;
    }


}


/*----------- MOBILE ----------------------------------------------------*/
@media screen and (max-width: 768px) {

    /*--------- CONTENT ----------------------------*/

    .Introduction {
        position: relative;
        width: 100%;
        /* margin-top: -44vw; */
        z-index: 200;
        display: flex;
        flex-direction: column-reverse;
        background: var(--color2);
    }

    /* .intro-video-wrapper,
    .intro-image-wrapper,
    .Introduction-Desc {
        overflow: hidden;
        height: 856px;

    } */

    .Introduction-Desc {
        /* position: absolute;
        margin-top: 0vw; */
        padding: 18px 0 40px 0;
        box-sizing: border-box;
        z-index: 500;
        /* background: linear-gradient(180deg, #ffffff00 94%, var(--color0) 40px, var(--color2)); */
    }


    .Introduction-Header {
        display: block;
        font-size: xx-large;
        margin-bottom: 24px;
        font-weight: 500;
        color: var(--color6);
        /*	text-shadow: 1px 1px 14px #00000059;*/
    }


    .Introduction-About {
        display: block;
        font-size: x-large;
        color: var(--color8);
        line-height: 1.5;
        margin-bottom: 1.8rem;
        /*	text-shadow: 1px 1px 14px #00000059;*/
    }

    .intro-content {
        text-align: left;
    }

    .intro-content a{
        margin: 0 0 18px 0;
        width: 40vw;
    }

    .intro-illustration {
        padding: 40px 0 0 0;
    }

    .intro-WhatsApp-icon {
        width: 24px;
        height: 24px;
        margin-right: 14px;
    }



}