:root{
  --primary:#0ea5e9;
  --dark:#0b1220;
  --muted:#6b7280;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';
  line-height:1.6;
  color:#111827;
  overflow-x: hidden;
}
.navbar-brand{
  font-weight:800;
  letter-spacing:0.5px;
}

/* Blinking effect */
.brand-blink {
  animation: blinkAnim 1s infinite; /* 1 second blink cycle */
}

@keyframes blinkAnim {
  0%, 49% { opacity: 1; }
  50%, 99% { opacity: 0; }
  100% { opacity: 1; }
}


.hero {
  background: url('../img/hero.jpg') center/cover no-repeat;
  min-height: 30vh;   /* desktop height */
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

@media (max-width: 768px) {
  .hero {
    background: url('../img/hero-mobile.jpg') no-repeat center top;
    background-size: contain;  /* show all 4 cars */
    background-color: #CFCFCF;    /* fill gaps if any */
    min-height: 110vh;         /* tall enough for full image */
  }
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.25));
}
.hero .content{
  position:relative;
  z-index:1;
  color:white;
}
.section-title{
  font-weight:800;
  margin-bottom:0.5rem;
}
.section-subtitle{
  color:var(--muted);
  margin-bottom:1.2rem;
}
.card{
  border:none;
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 10px 20px rgba(0,0,0,.07);
}
.card img{display:block; width:100%; height:220px; object-fit:cover;}
.badge-soft{
  background:rgba(14,165,233,.12);
  color:#0369a1;
  border:1px solid rgba(14,165,233,.25);
}
.footer{
  background:#0b1220;
  color:#cbd5e1;
}
.footer a{ color:#e2e8f0; text-decoration:none;}
.footer a:hover{ text-decoration:underline;}
.whatsapp-fab{
  position:fixed; right:18px; bottom:345px;
  width:56px; height:56px; border-radius:50%;
  background:#22c55e; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 24px rgba(0,0,0,.2); z-index:999; right: 25px;   
}
.whatsapp-fab svg{ width:28px; height:28px; fill:white;}
/* smooth card hover */
.card:hover{ transform: translateY(-2px); transition: .2s ease;}
/* utilities */
.bg-soft{ background: #f1f5f9;}


/* Custom bold carousel buttons */
.custom-carousel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 24px;
}

.custom-carousel-btn:hover {
  background: #0ea5e9;  /* blue hover */
  color: #fff;
}


#about .card img {
  width: 100%;         /* make the image stretch to full width of the card */
  height: 520px;       /* fixed height */
  object-fit: cover;   /* crop image proportionally to fit */
  border-radius: 10px; /* optional: rounded corners */
  display: block;      /* removes inline gap */
}

/* Custom carousel footer buttons */
.carousel-controls-footer button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease-in-out;
  margin: 0 5px;
}

.carousel-controls-footer button:hover {
  background: #0ea5e9; /* blue hover */
  color: #fff;
}

.nav-links {
  display: flex;
  gap: 20px; /* adjust spacing here */
  align-items: center;
}

.call-now-btn {
  position: fixed;
  top: 30px;
  right: 15px;
  background: linear-gradient(to bottom, #6dd5fa, #2980b9);
  color: #000;
  font-weight: 600;
  font-size: 16px;
  padding: 10px 18px;
  border-radius: 25px;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 2000;
  transition: all 0.3s ease;
}

.call-now-btn i {
  color: #000;
}

.call-now-btn:hover {
  background: linear-gradient(to bottom, #5cc0f5, #1f6fa3);
  color: #fff;
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .call-now-btn {
    font-size: 14px;
    padding: 8px 14px;
    top: 4px;
    right: 10px;
  }
}
.navbar {
  margin-top: 20px;
}

.nav-links a {
  font-weight: 500;
  font-size: 14px;
}

.nav-links a:hover {
  color: #0ea5e9;
  text-decoration: underline;
}