.heading{
    font-size: 4.5rem;
    text-align: center;
    margin-bottom: 2rem;
}

.heading span{
    color: var(--cor-principal);
}

.services-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 2rem;
}

.services-container .services-box{
    padding: 3rem 2.5rem;
    background: var(--segunda-cor-de-fundo);
    border: .2rem solid var(--segunda-cor-de-fundo);
    border-radius: 1rem;
    transition: .5s;
}

.services-container .services-box:hover{
    border-color: var(--cor-principal);
    transform: scale(1.02);
}

.services-box .icon{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.services-box .icon i{
    font-size: 4.5rem;
    transition: .5s;
}

.services-box:hover .icon :not(a i){
    color: var(--cor-principal);
}

.services-box .icon a{
    display: inline-flex;
    background: var(--cor-branca);
    border-radius: 50%;
    padding: 1rem;
    transition: 0.5s;
}

.services-box:hover .icon a{
    background: var(--cor-principal);
}

.services-box .icon a i{
    font-size: 3rem;
    color: var(--cor-de-fundo);
    /* transform: rotate(225deg); */
}

.services-box .icon a:hover i{
    transform: rotate(180deg);
}

.services-box h3{
    font-size: 3rem;
    margin: .5rem 0 2rem;
    transition: .5s;
}

.services-box:hover h3{
    color: var(--cor-principal);
}

.services-box p{
    font-size: 1.6rem;
}