@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);
    }


    .all-vechicle {

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

        width: 1380px;

        margin: 1.5rem auto;

        /*        margin-top: 1rem;*/

        display: flex;

        .search-left {

            width: 23%;

            margin-right: 2%;

            .search-body {

                border: 1px solid #D6D6D6;

                border-bottom-left-radius: 10px;

                border-bottom-right-radius: 10px;

                .search-item {

                    padding: 15px 0;

                    border-top: 1px solid #D6D6D6;

                    position: relative;

                    .input-word {

                        width: 90%;

                        margin: 0 auto;
                    }

                    .input-word input {

                        width: 100%;

                        height: 40px;

                        border-radius: 5px;

                        border: 1px solid var(--border-gird);

                        padding-left: 4%;

                        font-weight: 500;

                        color: #949494;

                        background-color: #F5F5F5;
                    }

                    .body-search {

                        margin-top: 10px;

                        max-height: 400px;

                        overflow-y: scroll;

                        overflow-x: hidden;

                        display: none;

                        transform-origin: top center;

                        select {

                            width: 96%;

                            height: 40px;

                            border-radius: 5px;

                            border: 1px solid var(--border-gird);

                            padding-left: 4%;

                            font-weight: 500;

                            font-size: 14px;

                            color: #242424;

                            margin: 0 2.5%;

                            background-color: #F5F5F5;
                        }

                        .list-items {

                            display: flex;

                            justify-content: space-between;

                            align-items: center;

                            margin: 0 5%;

                            cursor: pointer;

                            img {

                                width: 40px;

                                min-height: 50px;

                                object-fit: contain;

                            }

                            .maker h5 {

                                color: var(--black);

                                font-size: 15px;
                            }

                            h5 {
                                margin: 0;

                                font-size: 14px;

                                color: #949494;

                                font-weight: 500;

                                letter-spacing: .5px;

                            }
                        }
                    }

                    .title {

                        width: 90%;

                        margin: 0 auto;

                        display: flex;

                        justify-content: space-between;

                        align-items: center;

                        h4 {
                            padding: 0;

                            margin: 0 !important;

                            font-size: 17px;

                            font-weight: 600;
                        }

                        img {

                            width: 18px;

                            object-fit: contain;

                        }
                    }
                }
            }
        }

        .head-title {

            background-color: #2296D2;

            padding: 15px;

            text-align: center;

            color: #fff;

            margin: 0 !important;

            font-size: 18px;

            letter-spacing: .5;

            border: 1px solid #2296D2;

            border-top-left-radius: 10px;

            border-top-right-radius: 10px;

        }

        h5 a {

            text-decoration: none !important;

            margin: 0;

            font-size: 14px;

            color: #949494;

            font-weight: 500;

            letter-spacing: .5px;

        }

        .btn-primary {
            background: #2296D2;
        }

        .blogs {

            width: 75%;

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

                font-weight: 900;

                border-bottom: 3px solid #2296d2;

                width: 240px;
            }

        }

        .blog_title_down {

            padding: 10px 0px 0px 0px;

            h4 {
                font-weight: bold;
            }
        }

        .blog_info_down {

            p {
                text-align: justify;
            }

            .blog_datetime_down {

                width: 120px;

            }

        }

        .images_down {

            display: flex;

            justify-content: center;

            img {

                width: 50%;

                object-fit: fill;

                max-height: 600px;
            }
        }

        .blog_info_down {

            p {
                text-align: justify;
            }

        }

    }
    

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

        .all-vechicle {

            width: auto;

            .search-left {

                margin: 1%;

            }

            .blogs {
                width: auto;
                margin-right: 1%;

            }

        }
    }

    @media (max-width: 1270px) {

        .all-vechicle {

            .search-left {

                width: 25%;

                margin: 0 1%;

            }

            .blogs {

                width: 78%;

            }
        }
    }

    @media (max-width: 980px) {
        .all-vechicle {
            padding: 0 1rem;

            .search-left {
                display: none;
            }

            & .blog_title_down {
                h4 {
                    font-size: 18px;
                    font-weight: bold;
                }
            }
            .blog_datetime_down{
                font-size: 14px;
            }
            .blog_info_down{
                p{
                    font-size: 14px;
                }
            }
        }

        .blogs {
            width: 100% !important;

            & .main-info {
                h5 {
                    font-size: 22px;
                }
            }
        }
    }
     @media (max-width: 600px) {
        .all-vechicle {
            & .blog_title_down {
                h4 {
                    font-size: 16px;
                    font-weight: bold;
                }
            }
            .blog_datetime_down{
                font-size: 13px;
            }
            .blog_info_down{
                p{
                    font-size: 13px;
                }
            }
        }

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