/* -- General components -- */
.content-group {
    display: flex;
}
    .link-span {
        font-size: 1rem;
        line-height: 2rem;
    }
/* -- Hero section -- */
.hero-section {
    display: block;
    background: var(--element-l);
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    
}
/* -- Hero section -- */
.hero-description {
    gap: 2rem;
}
    .hero-name {
        color: var(--text-w);
    }
    .hero-text {
        color: var(--text-w);
    }
/* -- Reviews section -- */
.review-group {
    align-items: center;
    flex-direction: column;
}  
    .review {
        opacity: 0;
        transform: translateX(-50px);
        transition: opacity 0.6s ease, transform 0.6s ease;
        /* -- */
        background: var(--bg);
        box-shadow: var(--shadow-b);
        border-radius: var(--radius);
        
    }
    .review.show {
        opacity: 1;
        transform: translateX(0);
    }
        .title-group {
            gap: 0.5rem;
            display: flex;
            align-items: center;
            flex-direction: row;
        }
            .review-name {
                line-height: 2rem;
                color: var(--element-l);
            }
/* -- Banner section -- */
.banner-section {
    color: var(--text-w);
    background: var(--element-l);
}
    .banner-description {
        gap: 1rem;
    }
        .banner-link {
            width: 15rem;
            height: 3rem;
            /* -- */
            border-radius: 3rem;
            box-shadow: var(--shadow-b);
            /* -- */
            color: var(--text-b);
            background: var(--active);
            /* -- */
            display: flex;
            align-items: center;
            justify-content: center;
        }
/* -- Application section -- */
.buttons-group {
    width: 100%;
    margin-top: 2rem;
    /* -- */
    display: flex;
    flex-direction: column;
}
    .app-link {
        height: 5rem;
        width: 20.5rem;
        /* -- */
        box-shadow: var(--shadow-b);
        border-radius: var(--radius);
        /* -- */
        gap: 1rem;
        display: flex;
        align-items: center;
        flex-direction: row;
    }
        .link-img {
            width: 5rem;
            height: 5rem;
            /* -- */
            display: flex;
            align-items: center;
            /* -- */
            background: var(--active);
            border-top-left-radius: 1rem;
            border-top-right-radius: 3rem;
            border-bottom-left-radius: 1rem;
            border-bottom-right-radius: 3rem;
        }
            .link-svg {
                margin-left: 0.75rem;
            }
        .link-name {
            font-size: 1.25rem;
            font-weight: 500;
            color: var(--element-l);
        }
            .link-subtitle {
                line-height: 1rem;
                font-size: 0.65rem;
                color: var(--text-b);
            }
/* -- Knowledge section -- */
.blog-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
}
    .blog-box {
        gap: 1rem;
        display: flex;
        flex-direction: column;
    }
        .blog-image {
            gap: 1rem;
            display: flex;
            align-items: center;
            flex-direction: row;
            /* -- */
            box-shadow: var(--shadow-b);
            border-radius: var(--radius);
            background: var(--element-l);
        }
            .blog-name {
                color: var(--text-w);
            }
            .blog-description {
                gap: 1rem;
            }
                .blog-text {
                    margin-left: 1rem;
                }
                .blog-link {
                    margin-left: 1rem;
                    color: var(--active);
                }