/* ============================================================
   custom.css — MiSatelital Landing Page Styles
   ============================================================ */

/* ─── Base ─────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Poppins', sans-serif;
}

/* ─── Navbar ────────────────────────────────────────────────── */
#navbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ─── Hero background ───────────────────────────────────────── */
.hero-bg {
  background-color: #003087; /* fallback if image not found */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url('../images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Parallax effect */
}

/* Disable parallax on mobile (performance) */
@media (max-width: 768px) {
  .hero-bg {
    background-attachment: scroll;
  }
}

/* ─── Bounce animation (scroll arrow) ──────────────────────── */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(10px); }
}

.animate-bounce-slow {
  animation: bounce 2s infinite;
}

/* ─── Service cards ─────────────────────────────────────────── */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* ─── Mobile menu transition ────────────────────────────────── */
#mobile-menu {
  transition: max-height 0.35s ease, opacity 0.35s ease;
}

/* ─── Testimonial — scroll snap on mobile ───────────────────── */
@media (max-width: 768px) {
  .testimonials-container {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-bottom: 1.25rem;
    /* Hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .testimonials-container::-webkit-scrollbar {
    display: none;
  }

  .testimonial-card {
    min-width: 85vw;
    scroll-snap-align: center;
    flex-shrink: 0;
  }
}

/* ─── Form focus styles ─────────────────────────────────────── */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #003087 !important;
  box-shadow: 0 0 0 3px rgba(0, 48, 135, 0.15);
}

/* ─── Select custom arrow ───────────────────────────────────── */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem !important;
}

/* ─── Lucide icons ──────────────────────────────────────────── */
[data-lucide] {
  display: inline-block;
  vertical-align: middle;
}

/* ─── WhatsApp FAB pulse ────────────────────────────────────── */
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
}

.whatsapp-fab {
  animation: pulse-green 2.5s infinite;
}

/* ─── Counter number ────────────────────────────────────────── */
.counter {
  display: inline-block;
  min-width: 2ch;
}

/* ─── Section transitions ───────────────────────────────────── */
section {
  position: relative;
}

/* ─── Smooth image loading ──────────────────────────────────── */
img {
  transition: opacity 0.3s ease;
}