/* =========================
   GLOBAL RESET & BASE
========================= */
* { margin:0; padding:0; box-sizing:border-box }
body { background:#000; color:#fff; line-height:1.6; font-family:"Segoe UI", Arial, sans-serif }

/* =========================
   HEADER
========================= */
header {
  background:#f2f2f2;
  border-bottom:1px solid #d6d6d6;
  padding:0.8rem 2rem;
  color:#000;
}
.container.nav {
  display:flex;
  align-items:center;
  justify-content:space-between; /* logo left, FAA badge right */
  flex-wrap:nowrap;              /* prevent wrapping */
  overflow-x:auto;               /* allow horizontal scroll if too narrow */
  gap:16px;
}

/* Brand / Logo */
.brand {
  display:flex;
  align-items:center;
  color:#000;
  text-decoration:none;
  font-size:1.2rem;
  font-weight:600;
  margin-right:auto;
}
.brand .logo { height:80px; width:auto; margin-right:10px }

/* Drone Services Tag (left of menu) */
.services-tag {
  display:flex;
  align-items:center;
  gap:8px;
  margin-right:1.5rem;
  font-weight:600;
  color:#000;
}
.services-tag .services-drone {
  height:30px;
  width:auto;
  image-rendering:crisp-edges;
}

/* Navigation: outlined rounded buttons */
.navlinks {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;         /* keep in one line */
  white-space:nowrap;       /* prevent text wrapping */
}
.navlinks a { text-decoration:none }
.btn {
  color:#000;
  text-decoration:none;
  border:2px solid #000;
  background:transparent;
  padding:8px 14px;
  border-radius:10px;
  font-weight:600;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { background:#000; color:#fff; transform:translateY(-1px) }

/* FAA badge */
.faa-badge img { height:60px; width:auto; display:block }

/* =========================
   HERO
========================= */
.hero {
  text-align:center;
  padding:2rem 1rem;
  background:radial-gradient(circle at center,#111 0%,#000 100%);
  color:#fff;
}
.hero h1 { font-size:2.4rem; margin-bottom:1rem }
.hero p  { font-size:1.2rem; margin-bottom:2rem; color:#ccc }

/* Primary CTA */
.cta {
  background:#fff; color:#000;
  padding:10px 18px;
  border-radius:10px;
  text-decoration:none; font-weight:700;
  border:2px solid #000;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.cta:hover { background:#000; color:#fff; transform:translateY(-1px) }

/* =========================
   CONTENT SECTIONS
========================= */
.intro, .about, .page { padding:3rem 2rem; max-width:1100px; margin:0 auto }
.intro h2, .about h1, .about h2, .page h1 { color:#fff; margin-bottom:.8rem }
.intro p,  .about p,  .page p  { color:#ccc; margin-bottom:1.2rem }

/* =========================
   GALLERY (Samples page)
========================= */
.gallery {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(520px,1fr));
  align-items:start;
  justify-items:center;
}
.gallery figure {
  background:#111;
  border:1px solid #222;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.gallery img {
  width:100%;
  height:620px;
  object-fit:cover;
  display:block;
  border-radius:12px;
}
.gallery figcaption { padding:10px 12px; color:#bbb; text-align:center }

/* =========================
   FOOTER
========================= */
footer {
  background:#000; color:#888;
  text-align:center; padding:1rem 0;
  font-size:.9rem; border-top:1px solid #222;
}
footer a { color:#bbb; text-decoration:none }
footer a:hover { color:#fff }

/* =========================
   SMALL DEVICES: logo/FAA sizing
========================= */
@media (max-width:640px) {
  .brand .logo { height:40px }
  .faa-badge img { height:28px }
}

/* =========================
   LOCATIONS PAGE
========================= */
.locations-gallery {
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.locations-gallery img {
  height:auto; width:100%; object-fit:contain; display:block; margin:0 auto;
  max-width:1000px; max-height:80vh;
}
.locations-gallery figure {
  background:#111; border:1px solid #222; border-radius:12px;
  overflow:hidden; padding:12px; text-align:center;
}
.locations-gallery figcaption { color:#bbb; font-size:.9rem; margin-top:8px }

/* =========================
   PAYMENT PAGE
========================= */
.pay-grid {
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:1rem;
}
.pay-card {
  background:#111; border:1px solid #222; border-radius:12px; padding:18px;
}
.pay-card h2 { color:#fff; margin-bottom:.4rem }
.pay-card p  { color:#ccc; margin:.4rem 0 }
.qr-wrap { margin-top:.6rem; display:flex; justify-content:center }
.qr-wrap img { width:160px; height:auto; border-radius:10px; border:1px solid #222; background:#000 }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Courier New",monospace }
.fineprint { color:#888; margin-top:1rem; font-size:.9rem }

/* Payment page buttons only */
.pay-card .btn {
  background:#e0e0e0; color:#000; border:2px solid #000; border-radius:10px;
  padding:8px 14px; font-weight:600; text-decoration:none; display:inline-block;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.pay-card .btn:hover { background:#cfcfcf; color:#000; transform:translateY(-1px) }

/* =========================
   MOBILE NAV + GALLERY FIX
========================= */
@media (max-width:720px) {
  .container.nav { flex-wrap:wrap; justify-content:center; gap:8px }
  .brand span { display:none }
  .navlinks { flex-wrap:wrap; justify-content:center }
  .navlinks a.btn { padding:6px 10px; font-size:.9rem }
  .faa-badge img { height:26px }

  /* Samples gallery: single column, no sideways scroll */
  .gallery { grid-template-columns:1fr; gap:16px; justify-items:stretch }
  .gallery img { height:auto; max-height:300px; object-fit:cover }

  /* smaller drone icon in services tag on mobile */
  .services-tag .services-drone { height:20px }
}

/* =========================
   VIDEO SECTION
========================= */
.video-grid {
  display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(520px,1fr));
  justify-items:center; margin-top:1rem;
}
.video-grid iframe { width:100%; height:440px; border-radius:12px }
@media (max-width:720px) {
  .video-grid { grid-template-columns:1fr; gap:16px }
  .video-grid iframe { height:260px }
}

/* =========================
   CUSTOM CURSOR
========================= */
html, body {
  cursor:url("assets/drone_cursor_32x32.png") 32 32, auto;
}
a, button, .btn {
  cursor:url("assets/drone_cursor_32x32.png") 32 32, pointer;
}
input, textarea, select { cursor:text }

.reviews-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  margin-top:1rem;
}
.review-card{
  background:#111; border:1px solid #222; border-radius:12px; padding:16px;
}
.review-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.review-author{ font-weight:700; }
.review-stars{ color:#ffd166; font-size:1rem; letter-spacing:1px; }
.review-date{ color:#aaa; font-size:.85rem; margin-left:8px; }
.review-text{ color:#ccc; margin:.4rem 0 0; }
.reviews-powered{ color:#999; margin-top:.8rem; font-size:.9rem; text-align:center; }
.reviews-powered a{ color:#bbb; }

/* tighten spacing between hero and next section */
.hero {
  padding-bottom: 1rem;           /* was ~5rem */
}
.intro:first-of-type {
  margin-top: 0;                  /* remove default gap */
  padding-top: 1rem;              /* optional small breathing room */
}

.reviews-cta{
  text-align:center;
  margin-top:0.8rem;
}
.btn-review{
  background:#e0e0e0;
  color:#000;
  border:2px solid #000;
  border-radius:10px;
  padding:8px 14px;
  font-weight:600;
}
.btn-review:hover{
  background:#cfcfcf;
  color:#000;
  transform:translateY(-1px);
}

/* =========================
   DRONE FLY-BY (CSS-only)
   - Every 60s: flies for ~5s, then rests with breeze/hover
========================= */
/* === DRONE FLY-BY: slow + soft motion trail === */
/* === DRONE FLY-BY: slow, bidirectional shadow, soft trail === */
/* === DRONE FLY-BY: slow, constant hover shadow, soft trail === */
/* === Drone fly-by (wrapper-based) — quicker start, constant hover shadow, soft trail === */
@keyframes droneFlyAcrossMinute {
  0%   { transform: translateX(-120vw) translateY(-6px) rotate(-15deg); opacity:0; filter:drop-shadow(0 0 0 rgba(0,0,0,0)); }
  1%   { opacity:1; }
  4%   { transform: translateX(40vw) translateY(-10px) rotate(8deg);  filter:drop-shadow(0 6px 3px rgba(0,0,0,0.4)); }
  7%   { transform: translateX(0) translateY(0) rotate(0);            filter:drop-shadow(0 4px 2px rgba(0,0,0,0.3)); }
  50%  { transform: translateY(0); }
  53%  { transform: translateY(-2px); }
  56%  { transform: translateY(2px); }
  59%  { transform: translateY(-1px); }
  100% { transform: translateY(0);                                    filter:drop-shadow(0 3px 2px rgba(0,0,0,0.25)); }
}

/* wrapper that carries the animation + effects */
.drone-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;            /* tight box around the image */
}
.drone-wrap.fly-in {
  z-index: 10;
  animation: droneFlyAcrossMinute 60s ease-in-out infinite; /* faster cycle; change to 75s if you prefer slower */
  animation-fill-mode: forwards;
  will-change: transform, opacity, filter;
  pointer-events: none;
}

/* constant “hover pad” shadow under drone */
.drone-wrap.fly-in::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 120%;
  height: 6px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 70%);
  opacity: 0.9;
  filter: blur(2px);
  pointer-events: none;
}

/* soft motion trail during the fly-in portion */
@keyframes whooshTrail {
  0%, 2%   { opacity: 0; transform: translateY(-50%) scaleX(0); }
  3%, 10%  { opacity: 0.7; transform: translateY(-50%) scaleX(1); }
  20%      { opacity: 0.3; transform: translateY(-50%) scaleX(0.8); }
  40%,100% { opacity: 0; transform: translateY(-50%) scaleX(0); }
}
.drone-wrap.fly-in::before {
  content: "";
  position: absolute;
  left: -40px; top: 50%;
  width: 80px; height: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(200,200,200,0.25) 50%, rgba(255,255,255,0) 100%);
  border-radius: 50%;
  opacity: 0;
  filter: blur(3px);
  transform: translateY(-50%) scaleX(0);
  pointer-events: none;
  animation: whooshTrail 60s ease-in-out infinite;
}

/* keep the image sizing as before */
.services-drone { height: 30px; width: auto; image-rendering: crisp-edges; }

/* if users prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .drone-wrap.fly-in,
  .drone-wrap.fly-in::before { animation: none; }
}

/*UPGRADE*/
/* Sticky header + soft shadow */
header { position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }

/* Hero background video */
.hero { position: relative; overflow: hidden; min-height: 56vw; } /* 16:9 ratio responsive */
.bg-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6; z-index:-1; }
.hero .hero-inner { position:relative; z-index:1; }

/* Page fade-in */
body { animation: siteFade .6s ease both; }
@keyframes siteFade { from{opacity:0} to{opacity:1} }

/* Button hover glow (subtle) */
.btn:hover { box-shadow: 0 0 8px rgba(255,255,255,0.35); }

/* Section reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(12px); transition: all .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Simple “Why choose us” list */
.why { list-style: none; display: grid; gap: 8px; }
.why li::before { content: "✓ "; color: #0f0; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
/* Tighten hero height on tablets/desktop */
@media (min-width: 768px){
  .hero{
    /* keep it responsive but not huge */
    min-height: clamp(360px, 48vh, 600px);
    padding-top: 3rem;
    padding-bottom: 2rem;
  }
}

/* Remove any extra gap before the next section */
.intro:first-of-type{
  margin-top: 0 !important;
  padding-top: 1.5rem;   /* small breathing room */
}

/* Just in case the video creates a hairline gap */
.bg-video{ display:block; margin-bottom:-1px; }
/* YouTube Follow Button with Icon */

/* YouTube Follow Button (Always Red Version) */
/* YouTube Follow Button with Logo */
.youtube-follow {
  margin-top: 1rem;
  text-align: center;
}

.btn-youtube {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #222;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1px solid #444;
}

.btn-youtube:hover {
  background: #ff0000;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
}

/* YouTube icon styling */
.yt-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.yt-logo svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}