/* ================= GLOBAL ================= */
body{
  font-family: 'Poppins', sans-serif;
  margin:0;
  padding:0;
  scroll-behavior:smooth;
}

h1,h2,h3{
  font-weight:700;
}

/* ================= TOP BAR ================= */
.topbar{
  background:#fff;
  padding:10px 0;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.logo{
  height:26px;
}

.top-actions a{
  text-decoration:none;
  padding:8px 15px;
  border-radius:6px;
  font-weight:600;
  margin-left:4px;
}

.call{
  background:#111;
  color:#fff;
}

.wa{
  background:#25D366;
  color:#fff;
}

/* ================= HERO PARALLAX ================= */
.hero-parallax{
  position:relative;
  background:url('https://images.unsplash.com/photo-1526256262350-7da7584cf5eb') center/cover fixed no-repeat;
  min-height:90vh;
  display:flex;
  align-items:center;
  color:#fff;
}

.hero-parallax .overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.65);
}

.hero-content{
  animation:fadeLeft 1s ease;
}

.hero-content ul{
  padding-left:18px;
}

.hero-content li{
  margin:10px 0;
}

/* FORM CARD */
.hero-form{
  background:#fff;
  color:#000;
  padding:25px;
  border-radius:15px;
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
  animation:fadeUp 1s ease;
}

.hero-form input{
  width:100%;
  padding:10px;
  margin:10px 0;
  border:1px solid #ddd;
  border-radius:8px;
}

.hero-form button{
  width:100%;
  padding:10px;
  background:#111;
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:600;
  transition:0.3s;
}

.hero-form button:hover{
  background:#25D366;
}

/* ================= ABOUT ================= */
.about{
  padding:80px 0;
}

.about p{
  color:#555;
  line-height:1.7;
}

/* ================= HIGHLIGHT ================= */
.highlight{
  background:#111;
  color:#fff;
  padding:60px 0;
  text-align:center;
  border-radius:20px;
  margin:20px;
}

.highlight-box{
  animation:fadeUp 1s ease;
}

/* ================= WHY ================= */
.why{
  padding:80px 0;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
}

.why-grid div{
  padding:20px;
  background:#f8f9fa;
  border-radius:12px;
  text-align:center;
  font-weight:600;
  transition:0.3s;
}

.why-grid div:hover{
  transform:translateY(-5px);
  background:#111;
  color:#fff;
}

/* ================= FOOTER ================= */
footer{
  background:#111;
  color:#fff;
  text-align:center;
  padding:30px 10px;
}

/* ================= ANIMATIONS ================= */
@keyframes fadeLeft{
  from{opacity:0; transform:translateX(-50px);}
  to{opacity:1; transform:translateX(0);}
}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(40px);}
  to{opacity:1; transform:translateY(0);}
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
  .hero-parallax{
    text-align:center;
    padding:60px 0;
  }

  .hero-form{
    margin-top:30px;
  }
}


.floating-buttons {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}

.float-btn {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  animation: bounce 2s infinite;
  transition: 0.3s ease;
  text-decoration: none;
}

.call-btn {
  background: linear-gradient(135deg, #ff512f, #dd2476);
}

.whatsapp-btn {
  background: linear-gradient(135deg, #25D366, #128C7E);
}

.float-btn:hover {
  transform: scale(1.15);
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}