/* =========================================================
   AL ABBAS RENT A CAR — Design Tokens
   Colors:
     --maroon       #4A121C  (deep heritage maroon, hero/footer bg)
     --maroon-2     #2E0B12  (near-black maroon, deepest bg)
     --gold         #D4A64A  (brass/gold accent / primary CTA)
     --cream        #FBF4E6  (warm cream section bg)
     --trust-teal   #1F6B63  (trust / whatsapp)
     --slate        #6B5D52  (secondary text, warm grey)
   Type:
     Display: 'Oswald'        (bold condensed, heritage signage feel)
     Body:    'Inter'
     Mono:    'JetBrains Mono' (plate/price numbers)
   Signature element: license-plate style price tag on car cards
   ========================================================= */

:root{
  --asphalt: #4A121C;
  --asphalt-2: #2E0B12;
  --amber: #D4A64A;
  --amber-dark: #B98A32;
  --cream: #FBF4E6;
  --signal-green: #1F6B63;
  --slate: #6B5D52;
  --white: #ffffff;

  --radius: 10px;
  --shadow: 0 10px 30px rgba(46, 11, 18, 0.14);
  --container: 1160px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: 'Inter', sans-serif;
  color: var(--asphalt-2);
  background: var(--cream);
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family:'Oswald', sans-serif; font-weight:700; letter-spacing:0.3px; margin:0 0 .3em; line-height:1.08; }

.container{
  max-width: var(--container);
  margin:0 auto;
  padding: 0 24px;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight:700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: linear-gradient(135deg, var(--amber) 0%, var(--amber-dark) 100%); color: var(--asphalt-2); }
.btn-primary:hover{ box-shadow: 0 8px 24px rgba(212,166,74,0.45); }
.btn-outline{ border-color: rgba(255,255,255,0.35); color:#fff; }
.btn-outline:hover{ border-color:#fff; background: rgba(255,255,255,0.06); }
.btn-whatsapp{ background: var(--signal-green); color:#fff; }
.btn-whatsapp:hover{ background:#18544D; box-shadow: 0 8px 20px rgba(31,107,99,0.4); }
.btn-book{ background: var(--asphalt); color:#fff; padding:10px 18px; font-size:0.85rem; }
.btn-book:hover{ background: var(--asphalt-2); }
.btn-lg{ padding:16px 30px; font-size:1.05rem; margin-top: 20px; }

/* ===== Header ===== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(46,11,18,0.96);
  backdrop-filter: blur(6px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px;
  gap: 16px;
  flex-wrap: nowrap;
}
.logo{ display:flex; flex-direction:column; line-height:1.1; min-width:0; flex-shrink:1; }
.logo-main{
  font-family:'Oswald', sans-serif;
  font-size: 1.7rem; letter-spacing:2px; color:#fff;
  white-space: nowrap;
}
.logo-sub{
  font-size: 0.62rem; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--amber); font-weight:600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav{ display:flex; gap: 28px; flex-shrink:0; }
.nav a{ color:#fff; font-weight:600; font-size:0.95rem; opacity:0.85; white-space:nowrap; position:relative; }
.nav a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background: var(--amber); transition: width .2s ease;
}
.nav a:hover{ opacity:1; color: var(--amber); }
.nav a:hover::after{ width:100%; }
.header-cta{ display:flex; gap:10px; flex-shrink:0; }
.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
  flex-shrink:0;
}
.nav-toggle span{ width:26px; height:3px; background:#fff; border-radius:2px; }

/* Mid-size squeeze fix: shrink text before the mobile menu kicks in at 780px */
@media (max-width: 1080px){
  .header-inner{ gap: 10px; }
  .logo-main{ font-size: 1.4rem; }
  .logo-sub{ font-size: 0.52rem; letter-spacing: 1px; }
  .nav{ gap: 16px; }
  .nav a{ font-size: 0.85rem; }
  .header-cta .btn{ padding: 9px 14px; font-size: 0.82rem; }
}

/* ===== Premium Hero Divider ===== */
.hero-light-line{width:100%;height:4px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.hero-light-line::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;background:#D4A64A;transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 12px #D4A64A,0 0 24px rgba(212,166,74,.7);z-index:2}
.hero-light-line span{position:absolute;top:0;left:-35%;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(212,166,74,.15),#D4A64A,#fff8d4,#D4A64A,rgba(212,166,74,.15),transparent);animation:shineMove 2.8s linear infinite}
@keyframes shineMove{0%{left:-35%}100%{left:105%}}


/* ===== Hero ===== */
.hero{
  background: radial-gradient(circle at 15% 20%, #7A2836 0%, var(--asphalt) 45%, var(--asphalt-2) 100%);
  color:#fff;
  padding: 90px 0 70px;
  position: relative;
}
.hero-inner{ max-width: 720px; }
.eyebrow{
  color: var(--amber); font-weight:700; letter-spacing: 2px;
  text-transform: uppercase; font-size: 0.8rem; margin-bottom: 10px;
}
.hero-banner{
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.9rem);
  letter-spacing: 1px;
  color: #fff;
  background: rgba(212,166,74,0.16);
  border: 1px solid rgba(212,166,74,0.45);
  display: inline-block;
  max-width: 100%;
  padding: 8px 18px;
  border-radius: 999px;
  margin: 0 0 18px;
}
.hero h1{
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  color:#fff;
}
.hero h1 span{ color: var(--amber); }
.hero-text{
  font-size: 1.05rem; color: rgba(255,255,255,0.8);
  max-width: 560px; margin-bottom: 30px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom: 50px; }
.hero-stats{ display:flex; gap: 40px; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; }
.stat-num{ font-family:'JetBrains Mono', monospace; font-weight:700; font-size:1.6rem; color: var(--amber); }
.stat-label{ font-size:0.78rem; color: rgba(255,255,255,0.65); text-transform:uppercase; letter-spacing:1px; }

/* ===== Section headings ===== */
.section-eyebrow{
  color: var(--signal-green); font-weight:700; letter-spacing:2px;
  text-transform:uppercase; font-size:0.78rem; margin-bottom:8px;
}
.section-title{ font-size: clamp(2rem, 4vw, 2.8rem); color: var(--asphalt-2); position:relative; padding-bottom:14px; }
.section-title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:56px; height:4px; border-radius:2px;
  background: linear-gradient(90deg, var(--amber), var(--amber-dark));
}
.why-us .section-title::after, .showcase-title::after{ background: linear-gradient(90deg, var(--amber), #fff2); }
.section-sub{ color: var(--slate); max-width: 560px; margin-bottom: 40px; }

/* ===== Fleet ===== */
.fleet{
  padding: 80px 0;
  background-image: radial-gradient(rgba(74,18,28,0.06) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}
.fleet-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}
.fleet-group-title{
  grid-column: 1 / -1;
  font-family:'Oswald', sans-serif;
  font-size: 1.3rem; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--signal-green);
  margin: 18px 0 -6px;
  padding-bottom: 8px;
  border-bottom: 2px dashed rgba(46,125,91,0.25);
}
.fleet-group-title:first-child{ margin-top:0; }
.car-card{
  background:#fff; border-radius: var(--radius); overflow:hidden;
  box-shadow: 0 4px 14px rgba(46,11,18,0.08);
  border: 1px solid rgba(46,11,18,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.car-card:hover{ transform: translateY(-5px); box-shadow: 0 14px 34px rgba(74,18,28,0.18), 0 0 0 1px rgba(212,166,74,0.25); }
.car-media{
  position:relative; aspect-ratio: 4/3; background: linear-gradient(135deg,#e7e1d2,#d9d2bd);
  display:flex; align-items:center; justify-content:center;
}
.car-media img{ width:100%; height:100%; object-fit:cover; }
.car-tag{
  position:absolute; top:10px; left:10px;
  background: var(--asphalt); color:#fff;
  font-size:0.72rem; font-weight:700; letter-spacing:0.5px;
  padding: 5px 12px; border-radius: 999px;
}
.car-body{ padding: 18px 18px 20px; }
.car-name{ font-size:1.5rem; margin-bottom:14px; color: var(--asphalt-2); }

.price-row{ display:flex; gap:10px; margin-bottom:16px; }

/* Signature: license-plate style price tag */
.plate-price{
  flex: 1;
  background: var(--asphalt-2);
  color: #fff;
  border: 2px solid var(--amber);
  outline: 2px solid var(--asphalt-2);
  border-radius: 4px;
  padding: 8px 8px;
  font-family: 'JetBrains Mono', monospace;
  text-align:center;
  transition: box-shadow .25s ease;
}
.car-card:hover .plate-price{ box-shadow: 0 0 10px rgba(212,166,74,0.5); }
.plate-price > small{
  display:block; font-family:'Inter',sans-serif; text-transform:uppercase;
  font-weight:700; letter-spacing:0.5px; font-size:0.62rem; opacity:0.75; margin-bottom:4px;
}
.plate-price > div{ font-weight:700; font-size:1rem; letter-spacing:0.5px; }
.plate-price span{ color: var(--amber); margin-right:3px; font-size:0.75rem; }
.plate-price small small{ font-weight:500; opacity:0.7; font-size:0.65rem; margin-left:3px; }

.price-row-single .plate-price{ flex: none; width: 100%; }

.car-actions{ display:flex; gap:8px; }
.car-actions .btn{ flex:1; justify-content:center; padding:10px 12px; font-size:0.85rem; }
.btn-call{ background: var(--asphalt); color:#fff; }
.btn-call:hover{ background: var(--asphalt-2); }

.btn-book-full{ width:100%; justify-content:center; }

.car-media.no-img{
  display:flex; align-items:center; justify-content:center;
}
.car-media.no-img::after{
  content:"🚘"; font-size: 3rem; opacity:0.45;
}

/* ===== Premium Showcase ===== */
.showcase{
  background: linear-gradient(160deg, var(--asphalt-2) 0%, var(--asphalt) 100%);
  color:#fff;
  padding: 70px 0;
}
.showcase-inner{
  display:grid; grid-template-columns: 1fr 0.85fr; gap:48px; align-items:center;
}
.showcase-title{ color:#fff; }
.showcase-copy{ color: rgba(255,255,255,0.75); margin-bottom: 26px; max-width: 480px; }
.showcase-media{ display:flex; justify-content:center; }
.showcase-video{
  width: 100%; max-width: 300px;
  border-radius: var(--radius);
  border: 3px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
  aspect-ratio: 9/16;
  object-fit: cover;
  background: #000;
}

/* ===== Why Us ===== */
.why-us{ background: var(--asphalt); color:#fff; padding: 70px 0 80px; }
.why-us .section-title{ color:#fff; }
.why-us .section-sub{ color: rgba(255,255,255,0.65); }
.why-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 22px; margin-top: 20px;
}
.why-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.why-card:hover{
  transform: translateY(-4px);
  border-color: rgba(212,166,74,0.5);
  background: rgba(255,255,255,0.08);
}
.why-icon{ font-size:1.8rem; margin-bottom:10px; }
.why-card h3{ font-family:'Inter',sans-serif; font-size:1.05rem; font-weight:700; margin-bottom:6px; }
.why-card p{ color: rgba(255,255,255,0.65); font-size:0.9rem; margin:0; }

/* ===== Contact ===== */
.contact{ padding: 80px 0; background: linear-gradient(180deg, var(--cream) 0%, #F3E6CE 100%); }
.contact-inner{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items:start;
}
.contact-details{ margin: 24px 0 10px; display:flex; flex-direction:column; gap: 14px; }
.contact-item{
  display:flex; align-items:center; gap:14px;
  background:#fff; border-radius: var(--radius);
  padding: 14px 16px; border:1px solid rgba(46,11,18,0.08);
  transition: border-color .15s ease, transform .15s ease;
}
.contact-item:hover{ border-color: var(--amber); transform: translateX(4px); box-shadow: 0 6px 18px rgba(74,18,28,0.1); }
.contact-icon{ font-size:1.4rem; }
.contact-item strong{ display:block; font-size:0.95rem; }
.contact-item span{ font-size:0.85rem; color: var(--slate); }

.map-card{
  display:flex; flex-direction:column; gap:6px;
  background: var(--asphalt); color:#fff;
  border-radius: var(--radius); padding: 30px 24px;
  height:100%; justify-content:center;
  border: 1px solid rgba(255,255,255,0.08);
}
.map-card-icon{ font-size:2rem; margin-bottom:6px; }
.map-card strong{ font-size:1.2rem; }
.map-card span{ color: rgba(255,255,255,0.7); font-size:0.9rem; }
.map-card-link{ color: var(--amber) !important; font-weight:700; margin-top:10px; }

/* ===== Footer ===== */
.site-footer{ background: var(--asphalt-2); color: rgba(255,255,255,0.7); padding: 40px 0; text-align:center; }
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.footer-logo{ align-items:center; }
.footer-copy{ font-size:0.78rem; opacity:0.6; margin:0; }

/* ===== Floating WhatsApp ===== */
.float-whatsapp{
  position:fixed; bottom:22px; right:22px; z-index:200;
  background: var(--signal-green); color:#fff;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  transition: transform .15s ease;
}
.float-whatsapp:hover{ transform: scale(1.08); }

/* ===== Scroll reveal ===== */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .contact-inner{ grid-template-columns: 1fr; }
  .showcase-inner{ grid-template-columns: 1fr; text-align:center; }
  .showcase-copy{ margin-left:auto; margin-right:auto; }
  .showcase-video{ max-width: 240px; }
}

@media (max-width: 780px){
  .nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--asphalt); flex-direction:column;
    padding: 10px 24px 24px; gap: 14px;
    display:none;
  }
  .nav.open{ display:flex; }
  .nav-toggle{ display:flex; }
  .header-cta{ display:none; }
  .header-cta.open{ display:flex; flex-direction:column; width:100%; padding: 0 24px 20px; }
  .hero{ padding: 60px 0 50px; text-align:left; }
  .hero-stats{ gap: 24px; }
}

@media (max-width: 480px){
  .hero h1{ font-size: 2.2rem; }
  .btn-lg{ width:100%; justify-content:center; }
  .float-whatsapp{ width:50px; height:50px; font-size:1.3rem; bottom:16px; right:16px; }
  .car-actions .btn{ font-size:0.8rem; padding:10px 6px; }
}