/* -- Mobile responsive -- */
@media screen and (min-width: 328px){
    /* -- Header container -- */
    .header {
        padding: 1rem 0;
    }
        .mobile-header {
            display: flex;
        }
        .desktop-header {
            display: none;
        }
    /* -- Main contaienr -- */
    .section {
        margin-top: 3rem;
    }
    .section:nth-child(1) {
        margin-top: 0;
    }
    .section:nth-child(2) {
        margin-top: -3rem;
    }
        .container {
            width: calc(100% - 4rem);
            margin: 0 auto;
        }
            .name {
                max-width: 16rem;
                font-size: 1.5rem;
                text-align: center;
            }
            .text {
                font-size: 0.875rem;
            }
    /* -- Hero section -- */
    .hero-section {
        max-width: 100%;
        max-height: 50rem;
    }
        .hero-container {
            padding-top: 16rem;
            padding-bottom: 10rem;
        }
            .hero-left {
                width: 100%;
                display: flex;
            }
            .hero-right {
                display: none;
            }
                .hero-description {
                    align-items: center;
                }
                    .hero-name {
                        font-size: 2rem;
                        max-width: 26.25rem;
                    }
                    .hero-text {
                        font-size: 1rem;
                        max-width: 28rem;
                        text-align: center;
                    }
    /* -- Review section -- */
    .review-group {
        gap: 1.5rem;
    }
        .review {
            width: 100%;
            padding: 1rem 1rem;
        }
            .review-description {
                gap: 1rem;
            }
                .review-name {
                    font-size: 1.25rem;
                }
                .review-text {
                    text-align: justify;
                }
    /* -- Banner section -- */
    .banner-section {
        width: 100%;
        height: 25rem;
        /* -- */
        padding-top: 4rem;
    }
        .banner-description {
            align-items: center;
        }
            .banner-name {
                text-align: center;
            }
            .banner-text {
                text-align: center;
            }
    /* -- Application section -- */
    .app-left {
        display: none;
    }
    .app-right {
        width: 100%;
    }
        .application-description {
            gap: 1rem;
            align-items: center;
            flex-direction: column;
        }
            .application-text {
                width: 100%;
                text-align: justify;
            }
            .slogan {
                max-width: 14rem;
            }
        .buttons-group {
            gap: 2rem;
            align-items: center;
        }
    /* -- Knowledge section -- */
    .blog-group {
        gap: 1.5rem;
    }     
        .blog-image {
            max-width: 20.5rem;
            padding: 1rem 3rem;
        }  
            .blog-name {
                max-width: 10rem;
            }
            .blog-text {
                max-width: 17rem;
            }
    /* -- Footer container -- */
    .footer {
        margin-top: 3rem;
    }
        .mobile-version {
            display: block;
        }
        .desktop-version {
            display: none;
        }
            .copyrights {
                width: 100%;
                text-align: start;
                font-size: 0.875rem;
            }
}
/* -- Tablet responsive -- */
@media screen and (width){
    
}
/* -- Desktop responsive -- */
@media screen and (min-width: 1024px){
    /* -- Header container -- */
    .navigation-menu {
        margin-left: 5rem;    
    }
        .mobile-header {
            display: none;
        }
        .desktop-header {
            display: flex;
        }
    /* -- Main container -- */
    .section {
        margin-top: 5rem;
    }
    .section:nth-child(1) {
        margin-top: 0;
    }
    .section:nth-child(2) {
        margin-top: -2rem;
    }
        .container {
            width: calc(100% - 14rem);
            margin: 0 auto;
        }
            .name {
                max-width: 16rem;
                font-size: 2rem;
                text-align: start;
            }
            .text {
                font-size: 1rem;
            }
    /* -- Hero section -- */
    .hero-section {
        max-width: 120rem;
        max-height: 50rem;
    }
        .hero-container {
            padding-top: 12rem;
            padding-bottom: 10rem;
        }
            .hero-left {
                width: 50%;
                display: flex;
            }
            .hero-right {
                width: 50%;
                display: block;
            }
                .hero-description {
                    margin-left: 3rem;
                    align-items: start;
                }
                    .hero-name {
                        text-align: start;
                        max-width: 26.25rem;
                    }
                    .hero-text {
                        max-width: 28rem;
                        text-align: start;
                    }
    /* -- Review section -- */
    .review-left {
        width: 50%;
    }
    .review-group {
        gap: 2rem;
    }
        .review {
            width: 100%;
            padding: 1rem 2rem;
        }
            .review-description {
                gap: 1rem;
            }
                .review-name {
                    font-size: 1.5rem;
                }
                .review-text {
                    text-align: justify;
                }
    /* -- Banner section -- */
    .banner-section {
        width: calc(100% - 14rem);
        height: auto;
        /* -- */
        padding: 2rem 1rem;
        border-radius: var(--radius);
    }
        .banner-container {
            width: calc(100% - 4rem);
        }
            .banner-description {
                align-items: start;
            }
                .banner-name {
                    max-width: 31rem;
                    text-align: start;
                }
                .banner-text {
                    max-width: 34rem;
                    text-align: justify;
                }
    /* -- Application section -- */
    .app-left {
        width: 50%;
        display: block;
    }
    .app-right {
        width: 50%;
    }
        .application-description {
            gap: 1rem;
            align-items: start;
            flex-direction: column;
        }
            .application-name {
                max-width: 100%;
            }
            .application-text {
                width: 100%;
                text-align: justify;
            }
            .slogan {
                max-width: 100%;
            }
        .buttons-group {
            gap: 2rem;
            align-items: start;
        }
    /* -- Knowledge section -- */
    .blog-group {
        gap: 1rem;
        width: 100%;
    }     
        .blog-image {
            max-width: 100%;
            padding: 1rem 2rem;
        }  
            .blog-name {
                max-width: 13rem;
            }
            .blog-text {
                max-width: 19.5rem;
            }
    /* -- Footer container -- */
    .footer {
        margin-top: 5rem;
    }
        .mobile-version {
            display: none;
        }
        .desktop-version {
            display: flex;
        }
            .copyrights {
                width: 100%;
                text-align: start;
                font-size: 1rem;
            }
}