*{margin:0;padding:0;box-sizing:border-box}
html, body{
    overflow-x: hidden;
    width: 100%;   
}
body{
font-family:Arial,sans-serif;
background:#ffffff;
color:#222;
}

.header{
    background:#1b1b1b;
    color:#fff;
    padding:12px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-weight: bold;
    height: 60px;
}
.header-center{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}
.header img{/* header image */
    width: 60px;   
}  
.header a{
color:white;
text-decoration:none;
margin-left:25px;
}



.car-count{
    z-index: 1000;
}




.filters{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
    padding:15px;
    background:white;
    box-shadow:0 2px 8px rgba(0, 0, 0, 0.466);
    border-radius:10px;
    width:min(1600px,95%);
    margin:30px auto;
}

.filters select,
.filters input{
    padding:8px 10px;
    border:1px solid #00000000;
    border-radius:8px;
    outline:none;
    min-width:120px;
    background:#f0f0f0;
    box-shadow:0 2px 8px rgba(0, 0, 0, 0.466);
     cursor:pointer;
}

.filters button{
    padding:8px 12px;
    border:none;
    border-radius:8px;
    background:#1b1b1b;
    color:#fff;
    cursor:pointer;
    border:1px solid transparent;
    transition: 0.3s;
}

.filters button:hover{
    background:#f5f5f5;
    border-color:#000;
    color:#1b1b1b;
}






.car-title h3{
    font-size:22px;
}

.car-title span{
    font-size:22px;
}

.specs{
    grid-template-columns:1fr;
}

.price{
    font-size:28px;
}

.car-cards-button{
    gap:10px;
}

.details-button{
    width:85%;
}

.phone-button{
    width:15%;
    height:55px;
}

.info-footer{
    width:100%;
    flex-direction:column;
    gap:10px;
}






.catalog-hero{
    padding:80px 40px;
    text-align:center;
    background:#ffffff00;
}
.catalog-hero{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .8s ease, transform .8s ease;
}

.catalog-hero.show{
    opacity:1;
    transform:translateY(0);
}



.catalog-hero h1{
    font-size:55px;
    margin:20px 0;
}

.catalog-hero p{
    max-width:700px;
    margin:auto;
    font-size:20px;
    color:#666;
}

.badge{
    display:inline-block;
    background:#ffd000;
    padding:10px 18px;
    border-radius:9px;
    font-weight:bold;
}

.hero-features{
    margin-top:30px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

.hero-features span{
    background:#f0f0f0;
    padding:12px 18px;
    border-radius:25px;
    font-weight:600;
}






.block-auto{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:25px;
    width:min(1600px,95%);
    margin:30px auto;
    align-items:start;
}

.car-card{
    width:100%;
    max-width:420px;
    background:#ffffff;
    border-radius:9px;
    overflow:hidden;
    margin:0;
    display:flex;
    flex-direction:column;
    box-shadow:0 2px 8px rgba(0, 0, 0, 0.685);
}
.hidden {
    display: none !important;
}
/* анімація появи */
.car-card{
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .6s ease, transform .6s ease;
}

.car-card.show{
    opacity: 1;
    transform: translateY(0);
}
/*  */

.car-image{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
    transition: 0.3s;
}
.car-image:hover{
    transform: scale(1.05);

}

.car-info{
    display:flex;
    flex-direction:column;
    padding:15px;
    flex:1;
}

.car-title{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    min-height:72px;
    align-items:start;
}

.car-title h3{
    font-size:28px;
    line-height:1.2;
}

.car-title span{
    font-size:28px;
    font-weight:bold;
}
.specs{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 20px;
}

.specs p{
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.specs img{
    width: 30px;
    height: 30px;
}


.price{
    margin-top: 20px;
    font-size: 30px;
    color: rgb(0, 151, 0);
    font-weight: bold;
}


.car-cards-button{
   display: flex;
   justify-content: space-between;
}
.car-cards-button{
    display:flex;
    gap:10px;
    align-items:center;
    margin-top:auto;
}

.details-button{
    flex:1;
    width:auto;
    margin-top:20px;
    background:#1b1b1b;
    color:#fff;
    padding:14px 22px;
    border-radius:10px;
    text-decoration:none;
    text-align: center;
    border:2px solid transparent;
    transition: 0.5s;
}
.details-button:hover{
    background:#f5f5f5;
    border-color:#000;
    color:#1b1b1b;
}

.phone-button{
    flex:0 0 55px;
    margin-top:20px;
    margin-right:0;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top: 20px;
    margin-right: 5px;
    background:#1b1b1b;
    border: 2px solid #000000;
    border-radius:10px;
    transition: 0.5s;
    padding-top: 5px;
    padding-right: 3px;
}
.phone-button:hover{
    background:#f5f5f5;
    border-color:#000;
}
.phone-button img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin: 5%;
}

.btn-load-more{
    flex:1;
    width:20%;
    margin-top:20px;
    background:#1b1b1b;
    color:#fff;
    padding:14px 22px;
    border-radius:10px;
    margin-left: 40%;
    text-decoration:none;
    text-align: center;
    border:2px solid transparent;
    transition: 0.5s;
}
.btn-load-more:hover{
    background:#f5f5f5;
    border-color:#000;
    color:#1b1b1b;
}



footer{
    background:#1b1b1b;
    color:#fff;
    text-align:center;
    padding:30px;
    margin-top:40px;
}
.info-footer{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 25%;
    margin: auto;
}
.footer-logo img{
    width: 30px;
    height: 30px;
    margin-right: 6px;
}


@media (max-width: 768px){

.header{
    padding:10px;
    flex-wrap:wrap;
    height:auto;
    gap:10px;
    flex-direction:column;
}
.header-center{
    position:static;
    transform:none;
}

.header img{
    width:45px;
}

.header h2{
    font-size:20px;
}

.header div:last-child{
    width:100%;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

.header a{
    margin:0;
    font-size:14px;
}

.catalog-hero{
    padding:30px 20px;
    text-align:center;
    background:#fff;
}
.catalog-hero-text{
    font-size: smaller ;
}
.catalog-hero h1{
    font-size:40px;
    margin:20px 0;
}
.catalog-hero p{
    font-size: medium;
    margin:20px 0;
}
.badge{
padding:5px 9px;
}
.container{
    padding:15px;
}

.hero-features{
    gap:10px;
}

.hero-features span{
    font-size:14px;
    padding:8px 12px;
}


.filters{
    flex-wrap: wrap;
    padding:10px;
}

.filters select,
.filters input,
.filters button{
    width:45%;
}



.block-auto{
    display:flex;
    flex-direction:column;
    gap:20px;
}
.car-card{
    width:100% !important;
    max-width:none !important;
 
}

.car-image{
    width:100% !important;
    height:220px !important;
    object-fit:cover;
}  


.details-button{
    width: 75%;
}
.phone-button{
    width: 20%;
}

.btn-load-more{
    width:40%;
    margin-left: 30%;
}

.info-footer{
    width:100%;
    flex-direction:column;
    gap:15px;
}
.info-footer a{
    color: inherit;
}
}