.hero-article {
    padding-top: 1rem;
    background: linear-gradient(
            110deg,
            rgba(0, 2, 44, 0.8) 0.31%,
            rgba(17, 61, 97, 0.8) 99.08%
        ),
        url("/themes/default/assets/article-bg.png") no-repeat;
    background-position: start;
    background-size: cover;
    min-height: 50vh;
    position: relative;
    nav {
        figure {
            .logo {
                width: 100%;
            }
        }
        .right-img2 {
            width: 1rem;
            padding: 0.5rem;
            border: 1px solid white;
            margin-left: 1rem;
            border-radius: 0.5rem;
        }
        .get-started {
            display: block;
            background-color: #00b67a;
            padding: 0.6rem 2rem;
            text-align: center;
            border-radius: 0.4rem;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            color: white;
            width: fit-content;
        }
    }

    .heading {
        width: 60%;
        margin: auto;
        color: white;
        /* margin-top: 2rem; */
        h2 {
            font-size: 2.5rem;
            text-align: center;
            font-weight: 600;
        }
        p {
            text-align: center;
            width: 70%;
            margin: auto;
            margin-top: 0.7rem;
            line-height: 1.5;
            font-weight: 300;
            margin-top: 0.8rem;
        }
        img {
            width: 50%;
            margin: auto;
            display: block;
            margin-top: 1rem;
        }
        .navigation {
            width: fit-content;
            margin: auto;
            margin-top: 2rem;
            a {
                font-size: 1.1rem;
                color: white;
                margin: 0 1rem;
            }
            .active {
                color: #00b67a;
            }
            span {
                font-size: 0.8rem;
                display: block;
            }
        }
    }
}

.trending-articles {
    margin-top: 2rem;
    .heading {
        span {
            font-size: 0.8rem;
            text-transform: uppercase;
        }
        h4 {
            font-size: 2rem;
            color: #00b67a;
            margin-top: 0.3rem;
            font-weight: 600;
        }
    }

    .banner-article {
        background: linear-gradient(rgba(0, 0, 0, 0.235)),
            url("/themes/default/assets/article-banner1.png") no-repeat;
        background-position: center;
        background-size: cover;
        height: 50vh;
        margin-top: 1rem;
        padding: 0 6.5rem;
        .content {
            background-color: #00b67a;
            padding: 2rem;
            height: fit-content;
            width: 38%;
            color: white;
            span {
                font-size: 0.7rem;
                font-weight: 300;
                small {
                    font-weight: 600;
                }
            }
            h6 {
                font-size: 1.8rem;
                margin-top: 0.3rem;
                line-height: 1.4;
                font-weight: 500;
            }
            p {
                font-weight: 300;
                margin-top: 0.5rem;
                font-size: 0.8rem;
                line-height: 1.4;
            }
        }
    }

    .list-of-articles {
        margin-top: 2rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 2rem;
        article {
            figure {
                /* background: url("/themes/default/assets/article/image1.png")
                    no-repeat;
                background-position: center;
                background-size: cover;*/
                height: 15rem;
            }
            .content {
                width: 65%;
                background-color: white;
                position: relative;
                top: -4rem;
                padding: 2rem;
                h6 {
                    font-size: 1.1rem;
                    font-weight: 600;
                    line-height: 1.2;
                    margin-bottom: 0.8rem;
                    padding-bottom: 1rem;
                    border-bottom: 1px solid gray;
                    span {
                        font-weight: 300;
                        font-size: 0.7rem !important;
                        display: block;
                        margin-top: 0.3rem;
                    }
                    .span-date {
                        color: black !important;
                        small {
                            font-weight: 600;
                        }
                    }
                }
                p {
                    font-size: 0.9rem;
                    line-height: 1.5;
                }
                a {
                    display: block;
                    display: flex;
                    align-items: center;
                    margin-top: 0.8rem;
                    span {
                        display: block;
                        width: fit-content;
                        color: #00b67a;
                        font-size: 0.9rem;
                    }
                    img {
                        display: block;
                        width: 2.5rem;
                        margin-left: 0.8rem;
                    }
                }
            }
        }
        article:nth-child(2) {
            figure {
                background: url("/themes/default/assets/article/image2.png")
                    no-repeat;
                background-position: center;
                background-size: cover;
                height: 15rem;
            }
        }
        article:nth-child(3) {
            figure {
                background: url("/themes/default/assets/article/image3.png")
                    no-repeat;
                background-position: center;
                background-size: cover;
                height: 15rem;
            }
        }
    }
}

.middle-banner-article {
    margin-top: 2rem;
    article {
        figure {
            background: url("/themes/default/assets/article/middle-article.png")
                no-repeat;
            background-position: center;
            background-size: cover;
            min-height: 50vh;
            height: auto;
            max-height: 80vh;
        }
        .flex40 {
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(110deg, #113d61 0.32%, #00022c 133.62%);
        }
        .content {
            background: linear-gradient(110deg, #113d61 0.32%, #00022c 133.62%);
            padding: 0rem 3rem;
            color: white;
            height: fit-content;
            padding-bottom: 1rem !important;
            h4 {
                font-size: 2rem;
                line-height: 1.3;
                font-weight: 600;
                span {
                    font-size: 0.8rem;
                }
            }
            p {
                font-weight: 300;
                line-height: 1.3;
                width: 90%;
                font-size: 1.1rem;
            }
            a {
                display: block;
                border: 1px solid white;
                width: fit-content;
                padding: 0.8rem 2.5rem;
                margin-top: 1rem;
                color: white;
                font-weight: 600;
                text-transform: uppercase;
            }
        }
    }
}

.latest-articles {
    margin-top: 2rem;
    .heading {
        span {
            font-size: 0.8rem;
            text-transform: uppercase;
        }
        h4 {
            font-size: 2rem;
            color: #00b67a;
            margin-top: 0.3rem;
            font-weight: 600;
        }
    }

    .list-of-articles {
        margin-top: 2rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 2rem;
        article {
            figure {
                background: url("/themes/default/assets/article/image1.png")
                    no-repeat;
                background-position: center;
                background-size: cover;
                height: 15rem;
            }
            .content {
                background-color: white;
                padding: 2rem 0rem;
                width: 85%;
                h6 {
                    font-size: 1.3rem;
                    line-height: 1.2;
                    margin-bottom: 0.8rem;
                    padding-bottom: 1rem;
                    border-bottom: 1px solid gray;
                    span {
                        font-weight: 300;
                        font-size: 0.8rem;
                        display: block;
                        margin-top: 0.3rem;
                    }
                }
                p {
                    font-size: 0.9rem;
                    line-height: 1.5;
                }
                a {
                    display: block;
                    display: flex;
                    align-items: center;
                    margin-top: 0.8rem;
                    span {
                        display: block;
                        width: fit-content;
                        color: #00b67a;
                        font-size: 0.9rem;
                    }
                    img {
                        display: block;
                        width: 2.5rem;
                        margin-left: 0.8rem;
                    }
                }
            }
        }
        article:nth-child(2) {
            figure {
                background: url("/themes/default/assets/article/image2.png")
                    no-repeat;
                background-position: center;
                background-size: cover;
                height: 15rem;
            }
        }
        article:nth-child(3) {
            figure {
                background: url("/themes/default/assets/article/image3.png")
                    no-repeat;
                background-position: center;
                background-size: cover;
                height: 15rem;
            }
        }
    }

    .view-more-btn {
        width: fit-content;
        padding: 0.8rem 2.8rem;
        display: block;
        margin: auto;
        margin-top: 3rem;
        background-color: #00b67a;
        color: white;
        text-transform: uppercase;
        font-weight: 600;
        border-radius: 0.2rem;
    }
}

.bottom-banner-sec {
    margin: 4rem 0;
    article {
        background: linear-gradient(rgba(0, 0, 0, 0.235)),
            url("/themes/default/assets/article/article-bottom-banner.png")
                no-repeat;
        background-position: center;
        background-size: cover;
        height: 50vh;
        margin-top: 1rem;
        padding: 0 8rem;
        .content {
            width: 100%;
            padding: 2rem;
            height: fit-content;
            color: white;
            span {
                font-size: 0.7rem;
                font-weight: 300;
                small {
                    font-weight: 600;
                }
            }
            h5 {
                font-size: 2.8rem;
                margin-top: 0.3rem;
                line-height: 1.2;
                color: white;
                font-weight: 500;
            }
            a {
                font-weight: bold;
                margin-top: 0.5rem;
                font-size: 0.8rem;
                line-height: 1.4;
                color: white;
                background-color: #00b67a;
                padding: 0.8rem 2rem;
                border-radius: 0.5rem;
                text-transform: uppercase;
            }
        }
    }
}

/* single article */

.content-article {
    margin-top: 3rem;
    .content-data {
        width: 90%;
        margin: auto;
        .article-left-content {
            figure {
                /* background: url("/themes/default/assets/article/middle-article.png")
                    no-repeat;
                background-size: cover;
                background-position: center;*/
                height: 50vh;
            }
            span {
                font-size: 0.8rem;
                font-weight: 300;
                display: block;
                margin: 1rem 0;
                small {
                    font-weight: 700;
                }
            }
            h2 {
                font-size: 1.8rem;
                color: #00b67a;
                font-weight: 600;
                margin-bottom: 1rem;
            }
            p {
                margin-bottom: 1rem;
                line-height: 1.6;
                font-size: 0.9rem;
                font-weight: 300;
            }
            h3 {
                font-size: 1.4rem;
                font-weight: 500;
                margin-bottom: 0.6rem;
                margin-top: 2rem;
            }

            ul {
                list-style: disc;
                list-style-position: inside;
                li {
                    line-height: 1.8;
                    font-size: 0.8rem;
                }
            }

            form {
                margin-top: 4rem;
                width: 90%;
                label {
                    font-size: 1.3rem;
                }
                .input-sec {
                    border: 1px solid gray;
                    margin-top: 0.7rem;
                    border-radius: 0.3rem;
                }
                input {
                    background: none;
                    border: none;
                    outline: none;
                    width: 94%;
                    padding: 0.8rem 0;
                    display: block;
                }
                button {
                    border: none;
                    background: none;
                    display: block;
                    img {
                        width: 1.6rem;
                        display: block;
                    }
                }
            }
        }
        .latest-article {
            article {
                padding: 0;
                padding-left: -2rem;
                figure {
                    background: url("/themes/default/assets/article/image1.png")
                        no-repeat;
                    background-position: center;
                    background-size: cover;
                    height: 15rem;
                    width: 100%;
                }
                .content {
                    width: 70%;
                    background-color: white;
                    position: relative;
                    top: -4rem;
                    margin-left: 0rem;
                    padding: 2rem;
                    padding-bottom: 0rem;
                    h6 {
                        font-size: 1.3rem;
                        line-height: 1.2;
                        font-weight: 600;
                        margin-bottom: 0.8rem;
                        padding-bottom: 1rem;
                        border-bottom: 1px solid gray;
                        span {
                            font-weight: 300;
                            font-size: 0.8rem;
                            display: block;
                            margin-top: 0.3rem;
                        }
                    }
                    p {
                        font-size: 0.8rem !important;
                        line-height: 1.5;
                    }
                    a {
                        display: block;
                        display: flex;
                        align-items: center;
                        margin-top: 0.8rem;
                        span {
                            display: block;
                            width: fit-content;
                            color: #00b67a;
                            font-size: 0.9rem;
                        }
                        img {
                            display: block;
                            width: 2.5rem;
                            margin-left: 0.8rem;
                        }
                    }
                }
            }
            article:nth-child(2) {
                figure {
                    background: url("/themes/default/assets/article/image2.png")
                        no-repeat;
                    background-position: center;
                    background-size: cover;
                    height: 15rem;
                }
            }
            article:nth-child(3) {
                figure {
                    background: url("/themes/default/assets/article/image3.png")
                        no-repeat;
                    background-position: center;
                    background-size: cover;
                    height: 15rem;
                }
            }
        }
    }
}