/* ======= Google font import -poppins ====== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
/* ====== Colors ======= */

:root {
    --red: #A50029;
    --white: #ffff;
    --black: #000;
    --gray: #858585;
    --light-gray: #F2F2F2;
    --main-width: 1500px;
}

body{
    height: 100vh;
    position: relative;
}


.all_vehicle{
    padding-top: 100px;
    margin: 0 3%;
    
}

.info_all_vehicle span{
    text-align: justify;
    color: var(--gray);
    font-size: 16px;
}

.content_search{
    width: 100%;
    border: 2px solid var(--red);
    border-radius: 10px;
    padding: 1.5%;
    margin: 1rem 0rem;
}
.grid_search{
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding-bottom: 1rem;
}
.grid-contant{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    /* padding-bottom: 1rem; */
}
.car-result{
    display: flex;
    /* padding-bottom: 1rem; */
    border-bottom: 1px solid var(--black);
    text-decoration: none;
}
.car_vehicle_list{
    width: 100%;
    display: flex;
    .vehicle_img{
        width: 35%;
        height: 200px;
        /* background-color: #4e0000; */
        img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    .vehicle_info{
        color: var(--gray);
        padding-left: 1rem;
        width: 65%;
        .car_model_name{
            color: var(--black);
            font-size: 20px;
            padding-bottom: 1rem;
        }
        .item_info .list_iteam{
            background-color: var(--light-gray);
            padding: 3px;
            border-radius: 7px;
            margin-right: 10px;
            color: var(--red);
        }
        .car_sell_price{
            color: var(--red);
            float: right;
            padding-top: 1rem;
        }
        .car_stock_id{
            padding-bottom: 1rem;
        }
        .car_chassis{
            padding-bottom: 1rem;
        }
        .item_info{
            padding-bottom: 1rem;
        }
    }
}

@media (min-width: 1582px ){
    .all_vehicle{
       margin: 0 10%;
    }
}

@media (max-width: 952px ){

    .grid_search{
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr 1fr ;
        padding-bottom: 1rem;
    }

    .grid-contant {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        /* padding-bottom: 2rem; */
    }

}

@media (max-width: 858px ){
    .form-select {
        font-size: 12px !important;
    }
    .form-control{
        font-size: 12px !important;
    }
    .btn {
        font-size: 12px !important;
    }
    .info_all_vehicle span {
        text-align: justify;
        color: var(--gray);
        font-size: 14px;
    }
    .car-result {
        display: flex;
        padding-bottom: 0rem;
        border-bottom: 1px solid var(--black);
        text-decoration: none;
    }
    .car_vehicle_list {
        .vehicle_img {
            width: 35%;
            height: 200px;
        }
        .vehicle_info {
            font-size: 14px;
            color: var(--gray);
            padding-left: 1rem;
            width: 65%;
            .car_model_name {
                color: var(--black);
                font-size: 17px;
                padding-bottom: 0.5rem;
            }
            .car_stock_id {
                padding-bottom: 0.5rem;
            }
            .car_chassis {
                padding-bottom: 0.5rem;
            }
            .car_sell_price {
                color: var(--red);
                float: right;
                padding-top: 0rem;
            }
        }
    }
}


@media (max-width: 600px){
    h4{
        font-size: 17px !important;
    }
    .form-select {
        font-size: 10px !important;
    }
    .form-control{
        font-size: 10px !important;
    }
    .btn {
        font-size: 10px !important;
    }
    .info_all_vehicle span {
        text-align: justify;
        color: var(--gray);
        font-size: 12px;
    }
    .car_vehicle_list {
        .vehicle_img {
            width: 35%;
            height: 160px;
        }
        .vehicle_info {
            font-size: 12px;
            color: var(--gray);
            padding-left: 1rem;
            width: 65%;
            .car_model_name {
                color: var(--black);
                font-size: 12px;
                padding-bottom: 0.2rem;
            }
            .car_stock_id {
                padding-bottom: 0.2rem;
            }
            .car_chassis {
                padding-bottom: 0.2rem;
            }
            .car_sell_price {
                color: var(--red);
                float: right;
                padding-top: 0rem;
            }
        }
    }
    
    .menu_icon{
        display: block;
    }

    #menuList{
        z-index: 1000;
        transition: all 0.5s;
    }

}