*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-primary);background:var(--bg-dark);color:var(--text-primary);overflow-x:hidden;line-height:1.6}
img{width:100%;display:block}
.logo-img{height:40px;width:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button,input,textarea,select{font-family:inherit}
section{padding:100px 8%}

h1{font-size:var(--text-5xl);font-weight:var(--font-extrabold);line-height:1.1}
h2{font-size:var(--text-4xl);font-weight:var(--font-bold)}
h3{font-size:var(--text-xl);font-weight:var(--font-semibold)}
p{color:var(--text-secondary)}

.container{max-width:1280px;margin:auto}
.center{text-align:center}

.eyebrow{display:inline-block;padding:8px 16px;border-radius:999px;background:rgba(250,204,21,.1);color:var(--primary);font-size:14px;font-weight:600;margin-bottom:20px}
.eyebrow.dark{background:rgba(0,0,0,.15);color:#000}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border:none;cursor:pointer;border-radius:12px;font-weight:600;transition:var(--transition-normal)}
.btn-primary{background:var(--primary);color:#000}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-2px)}
.btn-outline{border:1px solid var(--primary);color:#fff;background:transparent}
.btn-outline:hover{background:var(--primary);color:#000}
.full-btn{width:100%}
.text-link{color:var(--primary);font-weight:700}
.testimonial-slide{flex:0 0 100%;display:flex;justify-content:center;padding:0 12px}
.testimonial-slide .testimonial-card{width:100%;max-width:620px;margin:0}

/* MOTOVEST SLIDER */

[data-slider]{
  position:relative;
  overflow:hidden;
}

[data-slider-track]{
  display:flex;
  transition:transform .4s ease;
}

[data-slide]{
  flex:0 0 100%;
}

/* Dots */
[data-slider-dots]{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:24px;
}

.slider-dot{
  width:10px;
  height:10px;
  padding:0;
  border:none;
  border-radius:50%;
  cursor:pointer;
  background:rgba(255,255,255,.25);
  transition:.25s ease;
}

.slider-dot.active{
  background:var(--primary);
  transform:scale(1.25);
}

/* Prev / next buttons (optional — only if your markup has them) */
[data-slider-prev],
[data-slider-next]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--border-color);
  border-radius:50%;
  background:var(--bg-card);
  color:#fff;
  cursor:pointer;
  transition:.25s ease;
}

[data-slider-prev]:hover,
[data-slider-next]:hover{
  background:var(--primary);
  color:#000;
  border-color:var(--primary);
}

.slider-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-top:28px;
}
.slider-controls [data-slider-dots]{ margin-top:0; } /* override the default top margin inside a row */

/* ========================================
   WHATSAPP FLOATING BUTTON
   Add this to ./assets/css/style.css or layout.css
   ======================================== */

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: #25d366;
  color: #fff;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.whatsapp-float:hover {
  background: #1ebd57;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

.whatsapp-float img {
  width: 24px;
  height: 24px;
  display: block;
}

.whatsapp-float span {
  display: inline-block;
}

/* Mobile: hide text, show only icon */
@media (max-width: 640px) {
  .whatsapp-float {
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }

  .whatsapp-float span {
    display: none;
  }

  .whatsapp-float img {
    width: 28px;
    height: 28px;
  }
}