* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

/* =====================================================
COLORS
===================================================== */

:root {
--purple: #4b245d;
--dark-purple: #35183f;

 --gold: #d4af37;
--yellow: #d6a900;

--text: #222222;
--muted: #666666;

--border: #dddddd;
--light-bg: #fafafa;
 
}

/* =====================================================
BODY
===================================================== */

body {
min-height: 100vh;

 display: flex;
flex-direction: column;

font-family:
    Arial,
    Helvetica,
    sans-serif;

color: var(--text);

background: #ffffff;
 
}

/* =====================================================
HEADER
===================================================== */

.main-header {
width: 100%;
height: 72px;

 padding: 0 45px;

display: flex;
align-items: center;
justify-content: space-between;

background: #ffffff;

border-bottom:
    1px solid #e5e5e5;
 
}

/* =====================================================
LOGO
===================================================== */

.logo-container {
display: flex;
align-items: center;
}

.logo-container a {
display: flex;
align-items: center;
}

.site-logo {
width: 165px;
height: auto;

 display: block;
 
}

/* =====================================================
NAVIGATION
===================================================== */

.main-header nav a {
color: var(--purple);

 text-decoration: none;

font-size: 15px;
font-weight: 600;
 
}

.main-header nav a:hover {
color: var(--gold);
}

/* =====================================================
CARS PAGE
===================================================== */

.cars-page {
flex: 1;

 width: 100%;

padding: 60px 25px 70px;
 
}

.cars-container {
width: 100%;
max-width: 950px;

 margin: 0 auto;
 
}

/* =====================================================
HEADING
===================================================== */

.cars-heading {
margin-bottom: 40px;

 text-align: center;
 
}

.cars-heading h1 {
margin-bottom: 9px;

 color: var(--purple);

font-size: 34px;
font-weight: 700;
 
}

.cars-heading p {
color: var(--muted);

 font-size: 14px;
 
}

/* =====================================================
CAR LIST
===================================================== */

.car-list {
display: grid;

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

gap: 20px;

max-width: 800px;

margin: 0 auto;
 
}

/* =====================================================
CAR CARD
===================================================== */

.car-card {
overflow: hidden;

 background: #ffffff;

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

border-radius: 10px;
 
}

/* =====================================================
CAR IMAGE
===================================================== */

.car-card img {
width: 100%;
height: 220px;

 display: block;

object-fit: contain;

background: #fafafa;

border-bottom:
    1px solid #eeeeee;
 
}

/* =====================================================
CAR DETAILS
===================================================== */

.car-details {
padding: 25px;

 text-align: center;
 
}

.car-details h2 {
margin-bottom: 15px;

 color: var(--purple);

font-size: 21px;
font-weight: 700;
 
}

.car-details p {
margin-bottom: 8px;

 color: var(--muted);

font-size: 14px;

line-height: 1.5;
 
}

/* =====================================================
BOOK BUTTON
===================================================== */

.btn {
display: inline-block;

 margin-top: 17px;

padding: 10px 20px;

color: #ffffff;

background: var(--purple);

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

border-radius: 5px;

text-decoration: none;

font-size: 13px;
font-weight: 600;
 
}

.btn:hover {
background: var(--dark-purple);
}

/* =====================================================
FOOTER
===================================================== */

footer {
padding: 17px 20px;

 text-align: center;

background: var(--light-bg);

border-top:
    1px solid #e5e5e5;
 
}

footer p {
color: #888888;

 font-size: 11px;
 
}

/* =====================================================
TABLET
===================================================== */

@media (max-width: 750px) {

 .main-header {
    padding: 0 30px;
}

.car-list {
    grid-template-columns: 1fr;

    max-width: 420px;
}
 
}

/* =====================================================
MOBILE
===================================================== */

@media (max-width: 600px) {

 .main-header {
    height: 65px;

    padding: 0 20px;
}

.site-logo {
    width: 135px;
}

.main-header nav a {
    font-size: 14px;
}


.cars-page {
    padding: 45px 18px 55px;
}


.cars-heading {
    margin-bottom: 30px;
}

.cars-heading h1 {
    font-size: 29px;
}

.cars-heading p {
    font-size: 14px;
}


.car-list {
    width: 100%;

    grid-template-columns: 1fr;

    gap: 18px;
}


.car-card img {
    height: 200px;
}


.car-details {
    padding: 23px;
}
 
}

/* =====================================================
SMALL MOBILE
===================================================== */

@media (max-width: 380px) {

 .cars-heading h1 {
    font-size: 27px;
}

.car-card img {
    height: 180px;
}
 
}