/* ===========================================================
   EVENTOS
   Gláucia Oliveira Locações
===========================================================*/

:root{

    --cor-principal:#1F5A44;
    --cor-secundaria:#F8F5EC;
    --cor-texto:#303030;
    --cor-clara:#FFFFFF;
    --cor-borda:#E8E2D6;

}

.eventos-hero{

    background:var(--cor-secundaria);

}

.titulo-eventos{

    color:var(--cor-principal);
    font-family:Georgia, serif;
    font-weight:700;

}

.eventos-hero .lead{

    max-width:700px;
    margin:auto;
}


/********************************************
                CARD
********************************************/

.evento-card{

    border-radius:24px;
    overflow:hidden;
    transition:.35s;
    background:#fff;

}

.evento-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.evento-card img{

    height:240px;

    object-fit:cover;

    transition:.4s;

}

.evento-card:hover img{

    transform:scale(1.05);

}

.evento-card .card-body{

    padding:28px;

}

.evento-card h3{

    font-weight:700;

    margin-top:20px;

    color:#1d3329;

}

.evento-card p{

    color:#6b6b6b;

    line-height:1.7;

}

.evento-card .btn-link{

    text-decoration:none;

    font-weight:700;

    color:var(--cor-principal);

}

.evento-card .btn-link:hover{

    color:#124531;

}


/********************************************
                ÍCONE
********************************************/

.evento-icone{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#F2F5F1;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-top:-65px;

    margin-left:auto;

    margin-right:auto;

    border:6px solid white;

    position:relative;

}


/********************************************
              INFORMAÇÕES
********************************************/

.evento-info{

    margin-top:25px;

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.evento-info span{

    background:#F5F5F5;

    border-radius:25px;

    padding:8px 14px;

    font-size:.92rem;

}

.evento-info i{

    margin-right:5px;

    color:var(--cor-principal);

}


/********************************************
          COMO FUNCIONA
********************************************/

.passo-circle{

    width:44px;

    height:44px;

    border-radius:50%;

    background:var(--cor-principal);

    color:white;

    font-weight:bold;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    margin-bottom:18px;

}

.seta{

    font-size:32px;

    color:#b7b7b7;

}


/********************************************
          DIFERENCIAIS
********************************************/

.diferenciais{

    background:#faf9f6;

}

.diferenciais i{

    width:90px;

    height:90px;

    border-radius:50%;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

}

.diferenciais h5{

    margin-top:20px;

    font-weight:700;

}


/********************************************
          CTA FINAL
********************************************/

.cta-orcamento{

    background:linear-gradient(135deg,#F8F5EC,#ffffff);

    border-radius:28px;

    padding:60px;

    border:1px solid var(--cor-borda);

}

.cta-orcamento h2{

    color:var(--cor-principal);

    font-weight:700;

}

.cta-orcamento p{

    color:#666;

}

.cta-orcamento .btn{

    border-radius:40px;

    padding:14px 30px;

}


/********************************************
          BOTÕES
********************************************/

.btn-success{

    background:var(--cor-principal);

    border:none;

}

.btn-success:hover{

    background:#164533;

}

.btn-outline-success{

    border-color:var(--cor-principal);

    color:var(--cor-principal);

}

.btn-outline-success:hover{

    background:var(--cor-principal);

}


/********************************************
          MOBILE
********************************************/

@media(max-width:991px){

    .seta{

        display:none;

    }

    .cta-orcamento{

        text-align:center;

    }

    .cta-orcamento .btn{

        margin-top:12px;

        width:100%;

    }

}

@media(max-width:768px){

    .titulo-eventos{

        font-size:2.3rem;

    }

    .evento-card img{

        height:220px;

    }

    .evento-card{

        margin-bottom:20px;

    }

}