/* Recursos */
section.recursos {
    padding: 120px 0;
    background: url(../img/bg-recursos.jpg) center center no-repeat;
    background-size: cover;
}

body.page-template-page-funcionalidades section.recursos {
    padding-top: 120px;
}

section.recursos .title {
    text-align: center;   
    max-width: 810px;
    margin: auto;
    margin-bottom: 70px;
}

section.recursos h2 {
    font-size: 42px;
    font-weight: bold;
    text-align: center;   
    margin-bottom: 15px;
}

section.recursos h2::after {
    content: '.';
    color: var(--verde);
}

section.recursos .title p {
    line-height: 30px;
    color: #333;
}


section.recursos .box {
    background: #fff;
    box-shadow: 0 0 50px #00000011;
    border: 1px #dedede solid;
    border-radius: 50px;
    display: flex;
    align-items: stretch;
    position: relative;
}

section.recursos .box .flutua {
    position: absolute;
    bottom: -80px;
    right: -150px;
}

section.recursos .box .left {
    width: 33%;
    max-width: 33%;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

section.recursos .box .left__item {
    display: flex;
    gap: 20px;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding: 10px;
    border-radius: 10px;
    transition: all .5s;
}

section.recursos .box .left__item.active {
    background: #f5f5f5;
}

section.recursos .box .left__item.active:after {
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    border-top: 3px var(--verde) solid;
    border-right: 3px var(--verde) solid;
}


section.recursos .box .left__item .icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 30px #0000001f;
}

section.recursos .box .left__item .icon svg {
    width: 30px;
    height: 30px;
    fill: #4c4c4c;
    transition: all .5s;
}

section.recursos .box .left__item.active .icon svg,
section.recursos .box .left__item:hover .icon svg {
    fill: var(--verde);
}

section.recursos .box .left__item h4 {
    font-size: 20px;
    color: var(--azul);
    font-weight: bold;
}

section.recursos .box .left__item:hover h4,
section.recursos .box .left__item.active h4,
section.recursos .box .left__item:hover h4  {
    color: var(--blue)
}

section.recursos .box .right {
    border-left: 1px #dedede solid;
    padding: 50px;
    width: 67%;
    min-height: 100%;
}

section.recursos .box .right__box {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

section.recursos .box h5 {
    font-size: 20px;
    font-weight: bold;
    color: var(--azul);
    margin-bottom: 5px;
}

section.recursos .box p.description {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
    max-width: 500px;
    line-height: 24px;
}

section.recursos .box p.alerts {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 20px;
    background: var(--amarelo);
    display: flex;
    width: fit-content;
    border-radius: 40px;
    font-weight: bold;
    font-size: 14px;
}

section.recursos .box p.alerts svg {
    width: 15px;
    height: 15px;
}