.sc-blog-hero
{
    position: relative;
    padding-top: 100px;
    padding-inline: 100px;
    padding-bottom: 50px;
    background: #ffffff;
    -webkit-background: #ffffff;
    -moz-background: #ffffff;
    -ms-background: #ffffff;
    -o-background: #ffffff;
    .container
    {
        .sc-blog-content
        {
            padding-top: 100px;
            h1
            {
                color: #113960;
                text-align: center;
                margin-top: 20px;
                font-size: 2.5rem;
            }
        }
    }
}

.sc-blog
{
    position: relative;
    padding: 100px;
    background: #ffffff;
    -webkit-background: #ffffff;
    -moz-background: #ffffff;
    -ms-background: #ffffff;
    -o-background: #ffffff;

    .container
    {
        .sc-content-blog
        {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;

            .sc-list-article
            {
                width: 400px;
                background-color: #ffffff;

                a
                {
                    text-decoration: none;
                    color: #113960;

                    .sc-article-image
                    {
                        width: 100%;
                        height: 220px;
                        overflow: hidden;
                        background-color: #252424;
                        img
                        {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                    .sc-article-details
                    {
                        padding: 12px;

                        .sc-article-title
                        {
                            font-size: 1.5rem;
                            text-align: justify;
                        }

                        .sc-article-description
                        {
                            padding-top: 20px;
                            text-align: justify;
                            font-size: 1rem;
                            font-weight: 500;
                        }
                    }
                }
            }
        }
    }
}

.sc-article-hero
{
    position: relative;
    padding-top: 100px;
    padding-inline: 100px;
    padding-bottom: 50px;
    background-color: #113960;
    height: 60vh;
    align-content: center;

    .container
    {
        .sc-article-content
        {
            display: flex;
            flex-wrap: nowrap;
            gap: 30px;

            .sc-article-title
            {
                width: 700px;
                h1
                {
                    color: #ffffff;
                    font-size: 3rem;
                }
                .sc-article-paragraph
                {
                    color: #ffffff;
                    font-size: 1.3rem;
                    font-weight: 500;
                    padding-block: 30px;
                }
                .sc-article-date 
                {
                    color: #ffffff;
                    font-size: 1rem;
                }
            }

            .sc-article-image
            {
                width: 700px;
                height: 300px;
                background-color: black;
            }
        }
    }
}

.sc-article
{
    padding: 100px;

    .container
    {
        .sc-article-wrapper
        {
            display: flex;
            align-items: start;
            gap: 30px;
            .sc-article-content-wrapper
            {
                width: 100%;
                overflow: hidden;
                .sc-table-content
                {
                    background-color: #ffffff;
                    height: auto;
                    overflow: hidden;
                    border-radius: 10px;
                    padding: 30px;
                    margin-bottom: 50px;

                    .sc-blog-heading
                    {
                        font-size: 2rem;
                        text-transform: uppercase;
                        font-weight: 600;
                    }

                    .sc-blog-content-category
                    {
                        font-size: 1.2rem;
                        padding-top: 30px;
                        p
                        {
                            a
                            {
                                text-decoration: none;
                                color: #000000;
                            }
                        }
                    }
                }

                .sc-article-category
                {
                    div
                    {
                        .sc-article-category-title
                        {
                            font-size: 1.5rem;
                            font-weight: 400;
                        }
                        .sc-article-category-paragraph
                        {
                            font-size: 1rem;
                            line-height: 30px;
                            text-align: justify;
                        }
                    }
                }

                .sc-blog-newsletter-box
                {
                    background-color: #fff;
                    padding: 30px;
                    border-radius: 10px;

                    .sc-blog-newsletter-title
                    {
                        font-size: 2.5rem;
                        font-weight: 600;
                    }

                    p
                    {
                        font-size: 1.2rem;
                    }

                    form
                    {
                        display: flex;
                        width: 100%;
                        height: auto;

                        input
                        {
                            width: 100%;
                            height: 50px;
                            border: none;
                            border-radius: 5px;
                            padding: 0 20px;
                            font-size: 1rem;
                            color: #000000;
                            background-color: #f0f0f0;
                            outline: none;
                        }

                        button
                        {
                            width: 150px;
                            height: 50px;
                            border: none;
                            border-radius: 5px;
                            background-color: #113960;
                            color: #ffffff;
                            font-size: 1rem;
                            font-weight: 600;
                            margin-left: 20px;
                            cursor: pointer;

                            &:hover
                            {
                                background-color: #0d2b4c;
                            }
                        }
                    }
                }
            }

            .sc-article-box
            {
                width: 800px;
                height: auto;
                img
                {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
    }
}

@media screen and (max-width: 575px)
{
    .sc-blog-hero
    {
        padding: 12px;
    }

    .sc-blog
    {
        padding: 12px;

        .container
        {
            .sc-content-blog
            {
                .sc-list-article
                {
                    margin-bottom: 30px;
                }
            }
        }
    }

    .sc-article-hero
    {
        padding-inline: 12px;
        padding-top: 130px;
        height: auto;

        .container
        {

            .sc-article-content
            {
                flex-wrap: wrap-reverse;

                .sc-article-title
                {
                    h1
                    {
                        font-size: 2rem;
                    }
                    .sc-article-paragraph
                    {
                        font-size: 1rem;
                        padding-block: 15px;
                    }
                }

                .sc-article-image
                {
                    width: 100%;
                    height: 200px;
                    background-color: black;
                    img
                    {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }
    }

    .sc-article
    {
        padding: 12px;

        .container
        {
            .sc-article-wrapper
            {
                flex-wrap: wrap-reverse;

                .sc-article-content-wrapper
                {
                    .sc-article-category
                    {
                        div
                        {
                            .sc-article-category-paragraph
                            {
                                text-align: justify;
                            }
                        }
                    }

                    .sc-blog-newsletter-box
                    {
                        .sc-blog-newsletter-title
                        {
                            text-align: center;
                            font-size: 1.5rem;
                        }
                        p
                        {
                            text-align: center;
                            font-size: 1rem;
                        }
                        .sc-blog-form
                        {
                            form
                            {
                                flex-direction: column;
                                input
                                {
                                    width: 100%;
                                    margin-bottom: 10px;
                                }
                                button
                                {
                                    width: 100%;
                                    margin-left: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}