.car-selection{
    padding: 120px 0 105px;
    background-color: #18181B;
}
.car-selection h2{
    font-size: 50px;
    font-weight: normal;
    margin-bottom: 60px;
}
.car-list_item{
    margin-bottom: 15px;
    padding: 10px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #18181B;
    font-size: 20px;
    font-weight: 500;
    background-color: #fff;
    border: 3px solid #fff;
    border-radius: 30px;
    transition: 0.3s;
}
.service-item{
    justify-content: space-around;
}
.car-list_item:last-child{
    margin-bottom: 0;
}
.car-list_item:hover{
    border: 3px solid #F6D375;
}
.car-list_item-title{
    width: 350px;
}
.service-title{
    width: 700px;
}
.car-list_item-title img{
    margin-right: 10px;
    opacity: 0.7;
    width: 40px;
    position: relative;
    top: 5px;
}
.car-list_color{
    width: 33.54px;
    height: 33.54px;
    border-radius: 50%;
}
.car-list_color.silver{
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 78.2%, rgba(0, 0, 0, 0.1) 100%),
    radial-gradient(46.71% 46.71% at 75.92% 80.58%, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%),
    linear-gradient(0deg, #EAE8E2, #EAE8E2);
}
.car-list_color.black{
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 78.2%, rgba(0, 0, 0, 0.1) 100%),
    radial-gradient(46.71% 46.71% at 75.92% 80.58%, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%),
    linear-gradient(0deg, #23252D, #23252D);

}
.car-list_color.red{
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 78.2%, rgba(0, 0, 0, 0.1) 100%),
    radial-gradient(46.71% 46.71% at 75.92% 80.58%, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%),
    linear-gradient(0deg, #D23A3A, #D23A3A);

}
.car-list_color.yellow{
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 78.2%, rgba(0, 0, 0, 0.1) 100%),
    radial-gradient(46.71% 46.71% at 75.92% 80.58%, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%),
    linear-gradient(0deg, #CDAF45, #CDAF45);

}
.car-list_price{
    width: 260px;
    display: flex;
}
.car-list_price-1{
    width: 100px;
    margin-right: 20px;
}
.car-list_price-2{
    width: 140px;
}
.service-price{
    width: 200px;
}
.car-list_city{
    width: 120px;
}
.car-list_fav-btn{
    width: 46px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #18181B;
    border-radius: 50%;
    transition: 0.3s;
}
.car-list_fav-btn img:last-child{
    display: none;
}
.car-list_fav-btn:hover{
    background-color: #F6D375;
    border-color: #F6D375;
}
.car-list_fav-btn:focus{
    background-color: #BFAA70;
    border-color: #BFAA70;
}
.car-list_fav-btn:hover img:first-child{
    display: none;
}.car-list_fav-btn:hover img:last-child{
    display: block;
}
.car-list_buy-btn{
    border: 1px solid #18181B;
}
.car-list_link{
    font-weight: 600;
}
.category-mobile{
    display: none;
}
.category-desctop{
    display: block;
}
@media (min-width: 1501px){
    .product-location{
        display: none;
    }
}
@media (max-width:1500px){
    .car-list_item-title{
        width: 255px;
    }
    .car-list_city{
        display: none;
    }
}
@media (max-width:1250px){
    .car-list_year{
        display: none;
    }
    .car-list_fav-btn{
        display: none;
    }
    .car-list_buy-btn{
        display: none;
    }
}
@media (max-width:900px){
    .car-selection{
        padding: 60px 0;
    }
    .car-selection h2{
        font-size: 26px;
        font-weight: 500;
        margin-bottom: 30px;
    }
    .car-list_item{
        position: relative;
        cursor: pointer;
    }
    .car-list_item::before{
        content: "";
        width: 20px;
        height: calc(100% + 6px);
        position: absolute;
        top: -3px;
        left: -3px;
        border-radius: 30px 0 0 30px;
    }
    .car-list_item.silver::before{
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 78.2%, rgba(0, 0, 0, 0.1) 100%),
        linear-gradient(321.13deg, rgba(0, 0, 0, 0.3) -21.16%, rgba(255, 255, 255, 0.3) 64.17%),
        linear-gradient(0deg, #EAE8E2, #EAE8E2);        
    }
    .car-list_item.black::before{
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 78.2%, rgba(0, 0, 0, 0.1) 100%),
        linear-gradient(321.13deg, rgba(0, 0, 0, 0.3) -21.16%, rgba(255, 255, 255, 0.3) 64.17%),
        linear-gradient(0deg, #23252D, #23252D);
     
    }
    .car-list_item.red::before{
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 78.2%, rgba(0, 0, 0, 0.1) 100%),
        linear-gradient(321.13deg, rgba(0, 0, 0, 0.3) -21.16%, rgba(255, 255, 255, 0.3) 64.17%),
        linear-gradient(0deg, #D23A3A, #D23A3A);
     
    }
    .car-list_item.yellow::before{
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 78.2%, rgba(0, 0, 0, 0.1) 100%),
        linear-gradient(321.13deg, rgba(0, 0, 0, 0.3) -21.16%, rgba(255, 255, 255, 0.3) 64.17%),
        linear-gradient(0deg, #CDAF45, #CDAF45);
      
    }
    .car-list_color{
        display: none;
    }
    .car-list_link{
        display: none;
    }
    .car-list_item{
        flex-direction: column;
        align-items: start;
        border-radius: 10px;
    }
    .car-list_item::before{
        border-radius: 10px 0 0 10px;
    }
    .car-list_item-title{
        margin-bottom: 10px;
        margin-left: 20px;
        width: 100%;
    }
    .category-mobile{
        display: block;
    }
    .category-desctop{
        display: none;
    }
    .car-list_price{
        flex-direction: row;
        margin-left: 55px;
        width: 100%;
        text-align: right;
    }
    .car-list_price-1{
        margin-right: 0;
        width: auto;
        margin-left: 5px;
    }
    .car-list_price-2{
        padding-left: 10px;
        margin-right: 5px;
    }
    .mob-name{
        display: flex;
    }
}
@media (max-width:400px){
    .car-list_item-title{
        font-size: 14px;
    }
    .car-list_item-title img{
        width: 30px;
        margin-right: 5px;
    }
    .car-list_price{
        width: 245px;
        margin-left: 40px;
        font-size: 18px;
    }
    .car-list_price-2{
        width: 125px;
    }
}