@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700,900");

:root {

    --grey: #DFDFDF;

    --white: #ffff;

    --main-color: #2296D2;

    --black: #000000;

    --text-color: #707578;

    --main-width: 1380px;

    --border-gird: #D6D6D6;
    --bs-font-sans-serif: "Roboto", sans-serif;

}


body {
    font-family: var(--bs-font-sans-serif);
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px
}

.pagination>li {
    display: inline
}

.pagination>li>a,
.pagination>li>span {
    display: inline-block;
    padding: 8px 16px;
    margin-left: -1px;
    line-height: 1.42857143;
    /*    color: #ffffff;*/
    text-decoration: none;
    /*    background-color: #126fb7;*/
    border: 1px solid #ddd;
    font-size: 12px;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.pagination>li:last-child>a,
.pagination>li:last-child>span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
    z-index: 2;
    color: #418BC5;
    background-color: #e1e3e5;
    border-color: #ddd
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #2296d2;
}

.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.pagination>.disabled>span:hover {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd
}

.pagination-lg>li>a,
.pagination-lg>li>span {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333
}

.pagination-lg>li:first-child>a,
.pagination-lg>li:first-child>span {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px
}

.pagination-lg>li:last-child>a,
.pagination-lg>li:last-child>span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
}

.pagination-sm>li>a,
.pagination-sm>li>span {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5
}

.pagination-sm>li:first-child>a,
.pagination-sm>li:first-child>span {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px
}

.pagination-sm>li:last-child>a,
.pagination-sm>li:last-child>span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px
}

.blogs {

    width: var(--main-width);

    margin: 0 auto;

    .main-info {

        font-family: "Roboto", sans-serif;

        margin: 1rem 0;

        h5 {
            font-size: 30px;
            padding: 7px 0;

            font-weight: 900;

            border-bottom: 3px solid #2296d2;

            width: 240px;
        }

        .grid-wrap-up {

            /*display: grid;

                grid-template-columns: repeat(1, 1fr);*/

            .title {

                h4 {
                    font-weight: bold;
                }

            }

            .info {

                border: 1px solid #c4c4c4;

                height: auto;

                padding: 10px 0px;

                margin: 10px 0px;

                .detail {

                    p {
                        text-align: justify;
                    }
                }

                .image {
                    /*                        max-height: 360px;*/

                    img {
                        width: 100%;

                        height: 400px;
                    }
                }

                .datetime {

                    margin: 1rem 0;

                    width: 120px;

                    /*                        border-bottom: 2px solid #2296d2;*/
                }
            }

        }

        .grid-wrap-down {

            /*                font-family: "Roboto", sans-serif;*/

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            /*                gap: 1rem;*/

            column-gap: .5rem;

            row-gap: .5rem;

            margin: 2rem auto;

            .grid-item {

                cursor: pointer;

                border: 1px solid #c4c4c4;

                padding: 10px;

                a {
                    text-decoration: none;

                    color: black;



                    .blogs_main_down {

                        /*                            position: relative;*/

                        /*                          height: 200px;*/

                        .images_down {

                            width: 100%;

                            height: 250px;

                            img {

                                width: 100%;

                                height: 100%;

                                object-fit: fill;

                                /*                                    max-height: 370px;*/
                            }
                        }

                        .blog_title_down {

                            padding: 10px 0px 0px 0px;

                            h4 {
                                font-weight: bold;
                            }
                        }

                        .blog_info_down {

                            p {
                                text-align: justify;
                            }

                            .blog_datetime_down {

                                width: 120px;

                                /*                                border-bottom: 1px solid #2296d2;*/

                            }

                        }
                    }

                }

                a:hover .blog_title_down {
                    color: #2296d2;
                }

            }

        }
    }
}

@media (max-width: 1400px) {
    .blogs {
        width: auto;
        padding: 0 1rem;
    }

    .blogs {
        & .main-info {
            h5 {
                font-size: 25px;
            }

            & .grid-wrap-down {
                & .grid-item {
                    & a {
                        & .blogs_main_down {
                            .blog_title_down {
                                h4 {
                                    font-size: 20px;
                                }

                               
                            }
                            .blog_info_down {
                                 p {
                                    font-size: 15px;
                                }
                            }
                        }
                    }
                }
            }

        }
    }
}

@media (max-width: 1200px) {
    .blogs {
        & .main-info {
            & .grid-wrap-down {
                & .grid-item {
                    & a {
                        & .blogs_main_down {
                            .images_down {
                                width: 100%;
                                height: 230px;
                            }
                            
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 1080px) {
    .blogs {
        & .main-info {
            & .grid-wrap-down {
                & .grid-item {
                    & a {
                        & .blogs_main_down {
                            .images_down {
                                width: 100%;
                                height: 200px;
                            }
                             .blog_title_down {
                                h4 {
                                    font-size: 18px;
                                }

                               
                            }
                            .blog_info_down {
                                 p {
                                    font-size: 14px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 980px) {
    .blogs {
        & .main-info {
             h5 {
                font-size: 22px;
            }
            & .grid-wrap-down {
                grid-template-columns: repeat(3, 1fr);

                column-gap: 1rem;

                row-gap:1rem;

                margin: 2rem auto;
                & .grid-item {
                    & a {
                        & .blogs_main_down {
                            .images_down {
                                width: 100%;
                                height: 180px;
                            }
                             .blog_title_down {
                                h4 {
                                    font-size: 16px;
                                }

                               
                            }
                            .blog_info_down {
                                 p {
                                    font-size: 13px;
                                }
                            }
                            .blog_datetime_down{
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 780px) {
    .blogs {
        & .main-info {
             h5 {
                font-size: 22px;
            }
            & .grid-wrap-down {
                grid-template-columns: repeat(3, 1fr);

                column-gap: 1rem;

                row-gap:1rem;

                margin: 2rem auto;
                & .grid-item {
                    & a {
                        & .blogs_main_down {
                            .images_down {
                                width: 100%;
                                height: 150px;
                            }
                             .blog_title_down {
                                h4 {
                                    font-size: 16px;
                                }

                               
                            }
                            .blog_info_dow {
                                 p {
                                    font-size: 13px;
                                }
                            }
                            .blog_datetime_down{
                                font-size: 13px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 680px) {
    .blogs {
        & .main-info {
             h5 {
                font-size: 20px;
            }
            & .grid-wrap-down {
                grid-template-columns: repeat(2, 1fr);

                column-gap: 1rem;

                row-gap:1rem;

                margin: 2rem auto;
                & .grid-item {
                    & a {
                        & .blogs_main_down {
                            .images_down {
                                width: 100%;
                                height: 180px;
                            }
                             .blog_title_down {
                                h4 {
                                    font-size: 14px;
                                }

                               
                            }
                            .blog_info_dow {
                                 p {
                                    font-size: 12px;
                                }
                            }
                            .blog_datetime_down{
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}