:root {
    --white: #FFFFFF;
    --black: #020508;
    --dark-grey: #333333;
    --light-grey: #E5E3E3;
    --green: #0D8837;
    --aqua-green: #F6FEF9;
    --white-blue: #F7F9FD;
    --blue: #172D4C;
    --green-musgo: #12A182;
    --brown: #B65D2A;
    --blue-aqua: #367588;
}

p {
    color: var(--dark-grey);
}

header {
    background: linear-gradient(120deg,
            rgba(0, 48, 25, 0.973),
            rgba(0, 28, 61, 0.973),
            rgba(0, 60, 30, 0.979));
    background-size: 300% 300%;
    animation: waterFlow 15s ease-in-out infinite alternate;
    position: relative;
}

.section-hero {
    width: 100%;
    height: 450px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/backgrounds/1581_BANNER_SITE_WF4L_F4L_1920x450.webp);
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;

    article {
        display: flex;
        align-items: center;
    }
}

.section-content{
    margin: 60px auto 60px auto;
    
    .article-intro{
        margin-bottom: 40px;
    }
}

.intro-text {
    color: var(--dark-grey);
    text-align: center;
    font-size: 17px;
    font-weight: 400;
    line-height: 23px;
}

.feature-card {
    background-color: var(--white-blue);
    border: 1px solid var(--light-grey);
    border-radius: 25px;
    padding: 40px;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.icon-box img {
    opacity: 0.8;
}

.card-number {
    color: var(--green);
    font-size: 96px;
    font-weight: 700;
    line-height: normal;
    opacity: 0.3;
}

.feature-card h2 {
    color: var(--blue);
    font-size: 26px;
    font-weight: 700;
    line-height: 31px;
}

.feature-card p {
    font-size: 19px;
    font-weight: 400;
    line-height: 28px;
}

.section-footer-cta {
    padding: 120px 0;
    text-align: center;

    &.bg-aqua-footer {
        background: url(../images/backgrounds/bg-built.png);
    }

    .cta-box {
        .titulo-p {
            color: var(--blue);
            font-size: 42px;
            font-weight: 700;
            max-width: 800px;
            margin: 0 auto 20px;
        }

        p {
            color: var(--dark-grey);
            font-size: 20px;
            margin-bottom: 40px;
        }
    }
}

@media (max-width: 768px) {
    .card-number {
        font-size: 3rem;
    }

    .feature-card {
        padding: 25px;
    }
}