/* ========== Base ========== */
html, body {
  background: #0e0e10;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: "Segoe UI", sans-serif;
  color: #e9e9ee;
}

/* ========== Utilities ========== */
.page-dark { background:#0e0e10; color:#e9e9ee; }
.muted { color:#9ca3af; }
.accent { color:#00d26a; }

.card-dark {
  background:#121216;
  border:1px solid #1f1f24;
  border-radius:14px;
}

.btn-accent {
  background:#00d26a;
  border-color:#00d26a;
  color:#0b0b0b;
}
.btn-accent:hover {
  background:#00b65a;
  border-color:#00b65a;
  color:#0b0b0b;
}

/* ========== Hero ========== */
.hero-section {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #ffffff;
}
.hero-section h1 {
  text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}

.hero-dark h1 {
  font-size: 3rem;
  line-height: 1.2;
}
.hero-dark p {
  font-size: 1.15rem;
  color: #cccccc;
}
.hero-dark .btn-success {
  background-color: #00d26a;
  border-color: #00d26a;
  color:#0b0b0b;
}
.hero-dark .btn-success:hover {
  background-color: #00b65a;
  border-color: #00b65a;
  color:#0b0b0b;
}

/* ========== Media helpers ========== */
.hero-img {
  max-width: 100%;
  height: auto;
  margin-top: 20px;
}
@media (max-width: 768px) {
  .hero-img { margin-top: 0; }
}

.about-img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.img-fit { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.img-hero { width:100%; max-width:560px; height:340px; border-radius:14px; overflow:hidden; }
.img-tile { height:220px; border-radius:12px; overflow:hidden; }
.video-tile { height:250px; }

@media (max-width: 768px) {
  .img-hero { height:260px; }
  .img-tile { height:180px; }
  .video-tile { height:220px; }
}

/* ========== Gallery ========== */
.card-img-top {
  height: 250px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  transition: transform 0.3s ease;
}
.card-img-top:hover { transform: scale(1.03); }

/* ========== Forms ========== */
.form-control-dark {
  background: #0d0d10 !important;
  color: #e6e6e6 !important;
  border: 1px solid #2a2a30 !important;
  border-radius: 8px;
  box-shadow: none !important;
}
.form-control-dark::placeholder { color: #8a8a93; }
.form-control-dark:focus {
  border-color: #00d26a !important;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0,210,106,0.1) !important;
}

/* ========== Footer ========== */
footer {
  background: #0e0e10;
  font-size: 14px;
  text-align: center;
  padding: 24px 0;
  border-top:1px solid #1f1f24;
}

/* ========== Floating WhatsApp ========== */
.floating-whatsapp {
  position: fixed !important;
  right: 16px !important;
  bottom: calc(env(safe-area-inset-bottom,0) + 16px) !important;
  width: 56px !important;
  height: 56px !important;
  background: #25D366 !important;
  border-radius: 50% !important;
  padding: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.25) !important;
  z-index: 2147483647 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: transform .2s, box-shadow .2s;
}
.floating-whatsapp img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
.floating-whatsapp:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
@media (max-width: 768px) {
  .floating-whatsapp {
    width: 46px !important;
    height: 46px !important;
  }
}

/* ========== Split video overlay controls ========== */
/* wrapper to position the button over the video */
.video-wrap { position: relative; }
.mute-toggle{
  position: absolute; right: 12px; bottom: 12px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #1f1f24; background: rgba(14,14,16,.72);
  color: #fff; font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  z-index: 20;                    /* ensure above video */
}
.mute-toggle:hover{ transform: scale(1.06); background: rgba(14,14,16,.9); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
@media (max-width: 768px){ .mute-toggle{ width: 40px; height: 40px; font-size: 18px; right: 10px; bottom: 10px; } }