.elementor-584 .elementor-element.elementor-element-0946cdb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-584 .elementor-element.elementor-element-c203a2d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-584 .elementor-element.elementor-element-23b1591{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-584 .elementor-element.elementor-element-1f8a78b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}body.elementor-page-584:not(.elementor-motion-effects-element-type-background), body.elementor-page-584 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#050505;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-b45531a */<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">

<section class="comunic-blocks">

    <!-- PRODUÇÃO -->

    <a href="#" class="comunic-service service-producao">

        <div class="service-left">
            <span class="service-number">01</span>
            <span class="service-arrow">→</span>
        </div>

        <div class="service-content">
            <h2>PRODUÇÃO</h2>

            <p>
                Encontramos a atração ideal<br>
                para bares, empresas e eventos.
            </p>
        </div>

    </a>

    <!-- CURADORIA -->

    <a href="#" class="comunic-service service-curadoria">

        <div class="service-left">
            <span class="service-number">02</span>
            <span class="service-arrow">→</span>
        </div>

        <div class="service-content">
            <h2>CURADORIA</h2>

            <p>
                Selecionamos artistas alinhados<br>
                ao público e ao evento.
            </p>
        </div>

    </a>

    <!-- GESTÃO -->

    <a href="#" class="comunic-service service-gestao">

        <div class="service-left">
            <span class="service-number">03</span>
            <span class="service-arrow">→</span>
        </div>

        <div class="service-content">
            <h2>GESTÃO</h2>

            <p>
                Cuidamos do contato, negociação<br>
                e alinhamento da atração.
            </p>
        </div>

    </a>

    <!-- EXPERIÊNCIA -->

    <a href="#" class="comunic-service service-experiencia">

        <div class="service-left">
            <span class="service-number">04</span>
            <span class="service-arrow">→</span>
        </div>

        <div class="service-content">
            <h2>EXPERIÊNCIA</h2>

            <p>
                Criamos momentos que geram<br>
                conexão e lembrança.
            </p>
        </div>

    </a>

</section>

<style>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.comunic-blocks{
    width:100vw;
    position:relative;
    left:50%;
    margin-left:-50vw;
    background:#050505;
    overflow:hidden;
}

/* BLOCO */

.comunic-service{
    width:100%;
    height:285px;

    position:relative;

    display:flex;
    align-items:center;

    text-decoration:none !important;

    border-top:1px solid rgba(255,255,255,.08);

    overflow:hidden;

    background:#050505;
}

/* IMAGEM */

.comunic-service::before{

    content:"";
    position:absolute;
    inset:0;

    background-size:50% auto;
    background-repeat:no-repeat;
    background-position:right center;

    filter:grayscale(100%) brightness(.55);

    transition:.6s ease;
}

/* OVERLAY PREMIUM */

.comunic-service::after{

    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to right,
        #050505 0%,
        #050505 25%,
        rgba(5,5,5,.95) 45%,
        rgba(5,5,5,.75) 60%,
        rgba(5,5,5,.35) 80%,
        rgba(5,5,5,.05) 100%
    );

    z-index:1;
}

/* IMAGENS */

.service-producao::before{
    background-image:url("SUA-IMAGEM-01");
}

.service-curadoria::before{
    background-image:url("SUA-IMAGEM-02");
}

.service-gestao::before{
    background-image:url("SUA-IMAGEM-03");
}

.service-experiencia::before{
    background-image:url("SUA-IMAGEM-04");
}

/* HOVER */

.comunic-service:hover::before{

    background-size:53% auto;

    filter:grayscale(100%) brightness(.72);
}

/* LEFT */

.service-left{

    width:150px;
    height:100%;

    position:relative;
    z-index:3;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:55px 0 55px 70px;
}

.service-number{

    color:#B7FF00;

    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
}

.service-arrow{

    color:#B7FF00;

    font-size:34px;
    font-weight:300;

    transition:.3s ease;
}

.comunic-service:hover .service-arrow{

    transform:translateX(10px);
}

/* CONTEÚDO */

.service-content{

    position:relative;
    z-index:3;

    margin-left:20px;
}

.service-content h2{

    font-family:'Anton',sans-serif;

    font-size:74px;
    line-height:.9;

    color:#fff;

    text-transform:uppercase;

    font-weight:400;

    margin-bottom:24px;
}

.service-content p{

    color:rgba(255,255,255,.78);

    font-family:Arial,sans-serif;

    font-size:13px;
    line-height:1.8;
    letter-spacing:3px;

    text-transform:uppercase;
}

/* REMOVE ESTILOS AZUIS */

.comunic-service,
.comunic-service *,
.comunic-service:hover,
.comunic-service:focus,
.comunic-service:active,
.comunic-service:visited{

    text-decoration:none !important;
    outline:none !important;
    box-shadow:none !important;
}

/* MOBILE */

@media(max-width:980px){

    .comunic-service{
        height:250px;
    }

    .service-left{
        width:90px;
        padding:40px 0 40px 28px;
    }

    .service-content{
        margin-left:10px;
        padding-right:20px;
    }

    .service-content h2{
        font-size:48px;
    }

    .service-content p{
        font-size:10px;
        letter-spacing:2px;
    }

    .comunic-service::before{

        background-size:85% auto;
        background-position:right center;
    }
}

</style>/* End custom CSS */