/* ---------- ROOT VARIABLES ---------- */
:root {
  --bg-color: #000000;
  --surface-color: #0a0a0a;
  --accent-color: #00f2ff;
  --text-primary: #ffffff;
  --text-secondary: #888888;
  --border-color: #1a1a1a;
  --header-height: 80px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ---------- CUSTOM NAVBAR (copied from home page) ---------- */
header {
  background-color: transparent !important;
  width: 100%;
  height: 6vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  font-family: "Inter", sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: background-color 0.3s ease-out;
}

header.menu-open {
  background-color: #fff !important;
  border-bottom: 1px solid #000;
}

header .menu button {
  width: 5.5vw;
  height: 2.3vw;
  border-radius: 30px;
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  font-size: 0.9rem;
  background-color: transparent !important;
  border: 1px solid #fff;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

header .menu button:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff;
}

header.menu-open .menu button {
  border: 1px solid #333;
  color: #000;
}

header.menu-open .menu button:hover {
  background-color: #f5f1ed !important;
  color: #000;
}

header .logo-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

header.menu-open .logo-center {
  opacity: 1;
  pointer-events: auto;
}

header .logo-center img {
  width: 15vw;
  height: auto;
}

header .logo img {
  width: 15rem;
}

/* Hamburger Menu */
.hamburger-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 999;
  display: none;
  flex-direction: row;
  padding: 0;
}

.hamburger-menu.active {
  display: flex;
  animation: slideLeft 0.5s ease-out forwards;
}

.hamburger-menu.closing {
  display: flex;
  animation: slideLeftOut 0.5s ease-out forwards;
}

@keyframes slideLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideLeftOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.menu-content {
  display: flex;
  width: 100%;
  height: 100%;
}

.menu-left {
  /* width: 30%; */
  background-color: #f5f1ed;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  border-right: 1px solid #000;
}

.menu-right {
  /* width: 70%; */
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.menu-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.4s ease-out, transform 0.6s ease-out;
  transform: scale(1);
  display: block;
}

.menu-right img.active {
  transform: scale(1.05);
}

.hamburger-menu .menu-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.hamburger-menu .menu-items li a {
  color: #000;
  font-size: 18px;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  transition: all 0.3s ease-out;
  display: block;
  padding: 0.5rem 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hamburger-menu .menu-items li a:hover {
  color: #666;
}

/* Ensure the menu content is above the background and clickable */
.hamburger-menu {
  pointer-events: none; /* Block clicks when hidden */
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}

.hamburger-menu.active {
  pointer-events: auto; /* Enable clicks when visible */
  opacity: 1;
  visibility: visible;
}

.menu-items li a {
  display: block;
  position: relative;
  z-index: 100; /* Force links to the top */
  cursor: pointer !important;
}

/* ---------- MOBILE NAVBAR STYLES (copied from home page) ---------- */
@media (max-width: 768px) {
  header {
    height: 20vw !important;
    padding: 0 1rem !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  header .logo {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  header .logo img {
    width: auto;
    height: 100%;
    max-height: 12vw;
    object-fit: contain;
    padding-right: 0;
  }

  header .logo-center img {
    display: none;
  }

  header.menu-open {
    background-color: #fff !important;
    border-bottom: 1px solid #000;
  }

  header .menu button {
    width: 60px !important;
    height: 40px !important;
    font-size: 0.8rem !important;
  }

  .hamburger-menu .menu-right {
    display: none;
  }

  .hamburger-menu .menu-left {
    width: 100%;
    border-right: none;
    padding: 0 1rem;
  }

  .hamburger-menu .menu-items li a {
    font-size: 1.2rem;
    padding: 0.3rem 0;
  }
}

/* ---------- PAGE STYLES (component theme) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono:wght@400;500&display=swap");

.mono {
  font-family: "JetBrains Mono", monospace;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.85rem;
}

.hero-avionics {
  position: relative;
  height: 90vh;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  background: linear-gradient(to right, #000 30%, transparent 100%),
    url("https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?auto=format&fit=crop&q=80&w=2000")
      center/cover no-repeat;
  z-index: 1;
}

.hero-title {
  z-index: 10;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title h1 {
  font-size: clamp(3rem, 10vw, 6rem);
  line-height: 0.9;
  text-transform: uppercase;
  font-weight: 900;
  margin: 1rem 0;
  text-align: center;
}

.hero-title h1 span {
  color: var(--accent-color);
}

.content-wrap {
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
}

section {
  position: relative;
  padding: 120px 0;
  border-bottom: 1px solid var(--border-color);
  z-index: 5;
}

.split-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}

.sticky-side {
  position: sticky;
  top: 120px;
}

.sub-header {
  font-size: clamp(2rem, 5vw, 3rem);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.body-text {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  max-width: 700px;
}

.spec-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.spec-item {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  padding: 2rem 1.5rem;
  transition: 0.4s;
  font-size: 0.9rem;
  font-weight: 500;
}

.spec-item:hover {
  border-color: var(--accent-color);
  transform: translateY(-5px);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 50px;
}

.feature-card {
  background: #080808;
  padding: 3rem 2rem;
  border: 1px solid var(--border-color);
}

.feature-card i {
  color: var(--accent-color);
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.feature-card h3 {
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

.feature-card ul {
  list-style: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.feature-card li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.feature-card li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent-color);
}

.accent-box {
  border-left: 3px solid var(--accent-color);
  padding-left: 2rem;
  margin: 2rem 0;
}

.img-container {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.img-container img {
  width: 100%;
  display: block;
  filter: grayscale(1) contrast(1.2);
  transition: 1s;
}

.img-container:hover img {
  filter: grayscale(0);
  transform: scale(1.05);
}

.cta-btn {
  display: inline-block;
  background: var(--accent-color);
  color: #000;
  padding: 1.2rem 3.5rem;
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: 800;
  text-decoration: none;
  margin-top: 2rem;
  transition: 0.3s;
}

.cta-btn:hover {
  box-shadow: 0 0 30px rgba(0, 242, 255, 0.5);
  transform: translateY(-3px);
}

.text-center {
  text-align: center;
}

/* alternating blocks with boxes */
.alternating-block {
  display: flex;
  align-items: center;
  gap: 4rem;
  margin-bottom: 6rem;
}

.alternating-block:nth-child(even) {
  flex-direction: row-reverse;
}

.block-image {
  flex: 1;
}

.block-content {
  flex: 1;
}

.trust-box {
  background: var(--surface-color);
  border-left: 4px solid var(--accent-color);
  padding: 2rem;
  margin: 2rem 0;
  border-radius: 0 8px 8px 0;
}

.trust-box ul {
  list-style: none;
  padding-left: 0;
}

.trust-box li {
  margin-bottom: 1rem;
  padding-left: 1.8rem;
  position: relative;
  color: var(--text-secondary);
}

.trust-box li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent-color);
  font-weight: bold;
}

/* ---------- MODERN FOOTER ---------- */
footer {
  background-color: var(--bg-color);
  color: var(--text-primary);
  padding: 4rem 2rem 2rem;
  font-family: "Inter", sans-serif;
  border-top: 1px solid var(--border-color);
  position: relative;
  z-index: 10;
}

.footer-container {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3rem;
}

.footer-left {
  flex: 0 0 250px;
}

.footer-left img {
  width: 200px;
  height: 150px;
}

.footer-left a {
  text-transform: uppercase;
  font-size: 0.7rem;
  text-decoration: none;
  color: var(--text-primary);
}

.footer-left h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 1.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.social-links {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.social-links a {
  color: var(--text-secondary);
  font-size: 1.3rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

.social-links a:hover {
  color: var(--accent-color);
  transform: translateY(-3px);
}

.copyright {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 2rem;
  line-height: 1.5;
}

.footer-right {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: flex-end;
}

.footer-column {
  min-width: 160px;
}

.footer-column h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-links a:hover {
  color: var(--accent-color);
  padding-left: 5px;
}

.footer-bottom {
  max-width: 1400px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: center; /* center legal links on desktop */
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center; /* ensure links are centered */
}

.legal-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.legal-links a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* Mobile copyright – hidden on desktop, visible on mobile */
.mobile-copyright {
  display: none;
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
  width: 100%;
  margin-top: 1rem;
}

.footer-year {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .footer-container {
    gap: 2rem;
  }
  .footer-left {
    flex: 0 0 200px;
  }
  .footer-right {
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  footer {
    padding: 3rem 1.5rem 1.5rem;
  }

  /* Make footer a column and reorder children */
  footer {
    display: flex;
    flex-direction: column;
  }

  /* Hide original copyright inside footer-left */
  .footer-left .copyright {
    display: none;
  }

  /* Show mobile copyright */
  .mobile-copyright {
    display: block;
  }

  /* Footer container becomes a column */
  .footer-container {
    flex-direction: column;
    gap: 2.5rem;
  }

  /* Left section (logo, social) appears after the columns */
  .footer-left {
    order: 2;
    width: 100%;
    flex: none;
    margin-top: 2rem;
  }

  /* Right section (columns) appears first */
  .footer-right {
    order: 1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr; /* two equal columns */
    gap: 2rem;
    justify-content: flex-start;
  }

  /* Remove previous flex‑based sizing for columns */
  .footer-column {
    min-width: 0; /* reset min-width */
    width: 100%;
  }

  /* First two columns (Quick Links, Company) – they will naturally fill grid cells */
  .footer-column:nth-child(1),
  .footer-column:nth-child(2) {
    width: auto;
  }

  /* Third column (Media) spans both columns? Actually we want it to start a new row.
     With grid-template-columns: 1fr 1fr, the third item will automatically go to the next row.
     We can optionally make it span both columns if desired, but the user likely wants it below.
     Leave as is – it will occupy the first column of the second row.
     To make it full width, uncomment the following:
  */
  .footer-column:nth-child(3) {
    grid-column: 1 / -1; /* make it span both columns */
    margin-top: 1rem;
  }

  /* Footer bottom (legal links) appears before the mobile copyright */
  .footer-bottom {
    order: 3;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
  }

  .legal-links {
    order: 1;
    justify-content: center;
    width: 100%;
  }

  .mobile-copyright {
    order: 2;
  }
}

@media (max-width: 480px) {
  .footer-right {
    gap: 1.5rem;
  }
  .footer-column {
    min-width: 100%; /* ensure columns stack on very small screens */
  }
  /* On very small screens, maybe keep legal links centered */
  .legal-links {
    justify-content: center;
    gap: 1rem;
  }
}