/* ==== Color Variables ==== */
:root {
  --main: #faaf31;
  --secmain: #aa792f;
  --dark-text: #000;
  --main-light: #f4ece3;
}

/* ==== Typography Weights ==== */
h1, h2, .font-weight-bold {
  font-weight: 700 !important;
}

h3, h4, .font-weight-semi-bold {
  font-weight: 600 !important;
}

h5, h6, .font-weight-medium {
  font-weight: 500 !important;
}
a {
  text-decoration: none;
}

/* =========================
  

Featured Cars 
   ========================= */
.fc { background:var(--main-light); padding:2px 0; margin-top: 70px;}
.fc-container { max-width:94%; margin:0 auto; padding:0 16px; }
.fc-head { text-align:center; margin-bottom:24px;  }
.fc-head h2 { color:var(--secmain); font-size:28px; font-weight:800; text-transform:uppercase; }
.fc-head p { color:#9ca3af; }

/* Grid: 1 column mobile, 2 tablet, 4 desktop */
.fc-grid {
  display:grid; gap:24px; grid-template-columns:1fr; justify-items:center;
}
@media (min-width:768px){
  .fc-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:1200px){
  .fc-grid {
    grid-template-columns: repeat(4, minmax(350px, 1fr));
    gap: 20px;
    justify-content: center;
  }
}


.fc-card{
  width:100%;
  background:var(--main-light); border:1px solid #a08254;
  border-radius:16px; overflow:hidden; box-shadow:0 6px 18px #f5bd5e54;
  transition:transform .2s ease, box-shadow .2s ease;
}
.fc-card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px #e6ab4785; }

.fc-media{
  position: relative;
  height: 240px;                 /* set the height you like */
  background: #f8eee2b6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fc-media img{
  height: 100%;
  width: auto;                    /* preserve proportions */
  object-fit: contain;
}

/* Location chip */

.loc{
  position:absolute; left:12px; bottom:12px; display:flex; align-items:center; gap:6px; width: 100px;
  color:var(--main-light); font-size:12px; background:#f8af328f; padding:6px 10px; border-radius:999px; justify-content: center;
}

.fc-body{ color:var(--secmain); padding:14px 16px 16px; }

/* Title + Price row */
.fc-toprow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fc-title{ font-size:18px; font-weight:700; line-height:1.2; }

.fc-price{ color:var(--main); font-weight:600; font-size:18px; white-space:nowrap; }
.fc-price small{ color:var(--secmain); font-weight:600; font-size:12px; margin-left:4px; }

/* Rating */
.fc-rating{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.fc-stars{ color:var(--main); font-size:14px; }
.fc-reviews{ color:#6c9609; font-size:13px; }
.fc-icon{
  color:#f5a823ce;
  font-size: 15px;
}
.fc-specs span {
  transition: all 0.3s ease;
}

.fc-specs span:hover {
  color: var(--secmain);
  cursor: pointer;
  font-size: 17px;
}

/* Divider */
.fc-divider{ height:1px; background: var(--main); margin:10px 0 12px; }

/* Specs row */
.fc-specs{
  display:flex; flex-wrap:wrap; gap:14px 18px;
  color:var(--secmain); font-size:13px; margin-bottom:14px;
  justify-content: space-between;
}
.fc-specs .spec{ display:flex; align-items:center; gap:6px;  }

/* CTA */
.fc-cta{
  width:100%; background:var(--secmain); color:var(--main-light);
  border:2px solid var(--main); padding:12px; border-radius:30px;
  font-weight:700; cursor:pointer;
    transition: all 0.3s ease;

  
}
.fc-cta:hover{
  background-color: var(--main-light);
  border: 2px solid var(--secmain);
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: var(--secmain);

}

/* Footer link */
.fc-foot{ margin-top:18px; text-align:center; }
.fc-viewmore{
  display:inline-block; color:var(--main-light); background:var(--main);
  padding:10px 16px; border-radius:50px; text-decoration:none;
  transition: all 0.3s ease;
    border:2px solid var(--secmain); padding:12px; border-radius:30px;


}
.fc-viewmore:hover{
  background-color: var(--main-light);
  border: 2px solid var(--secmain);
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: var(--secmain);
}
/* Hide extra cards on mobile */
@media (max-width: 992px) {
  .fc-grid .fc-card:nth-child(n+6) {
    display: none;
  }
}