/* ---------- ROOT VARIABLES (avionics theme) ---------- */
: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,
html {
  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 {
  background-color: #f5f1ed;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  border-right: 1px solid #000;
}

.menu-right {
  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 ---------- */
@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 (about 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-about {
  position: relative;
  height: 90vh;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  background: linear-gradient(to right, #000 30%, transparent 100%),
    url("/images/headerabout.png") center/cover no-repeat;
  z-index: 1;
}

.hero-title {
  z-index: 10;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  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 p {
  color: var(--text-primary);
}

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

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

section {
  position: relative;
  padding: 2rem 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;
}

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

.img-container {
  /* width: 50%; */
  overflow: hidden;
  border: 1px solid var(--border-color);
  /* height: 300px; */
}

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

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

/* ---------- INDIVIDUAL IMAGE CONTAINER SIZES ---------- */
/* All three images use the same desktop height (700px) initially.
   Modify each class below to set different heights. */
.img-about-corporate,
.img-about-mission,
.img-about-executive {
  /* height: 700px; */
}

.img-about-corporate {
  width: 50%;
  height: 300px;
}
.img-about-corporate img {
  width: 100%;
  height: 100%;
}

.img-about-mission {
  width: 100%;
  height: 800px;
}

.img-about-executive {
  width: 100%;
  height: 500px;
  /* background-color: red; */
}
.img-about-executive {
  width: 100%;
  height: 100%;
}

/* Example of different heights (uncomment and adjust values) */
/*
.img-about-corporate { height: 600px; }
.img-about-mission   { height: 800px; }
.img-about-executive { height: 500px; }
*/

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

.about-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  padding: 2rem;
  transition: 0.4s;
}

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

.about-card i {
  color: var(--accent-color);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.about-card h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.about-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

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

.founder-quote p {
  color: var(--text-secondary);
  font-style: italic;
}

.founder-quote .author {
  color: var(--accent-color);
  font-weight: 600;
  margin-top: 1rem;
}

.bullet-list {
  list-style: none;
  padding-left: 0;
}

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

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

/* ---------- ADDITIONAL MOBILE STYLES FOR ABOUT PAGE SECTIONS ---------- */
@media (max-width: 768px) {
  /* Hero section adjustments */
  .hero-about {
    height: auto;
    min-height: 80vh;
    padding: 6rem 1rem 3rem;
    overflow: hidden;
  }

  .hero-title {
    align-items: flex-start;
    text-align: left;
    gap: 0.5rem;
  }

  .hero-title h1 {
    font-size: clamp(2.2rem, 8vw, 3rem);
    text-align: left;
    margin: 0;
  }

  .hero-title .mono {
    font-size: 0.7rem;
  }

  /* Split layout sections */
  .split-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .sticky-side {
    position: relative;
    top: 0;
  }

  .sub-header {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  .body-text {
    font-size: 0.95rem;
    max-width: 100%;
  }

  /* Accent boxes and quotes */
  .accent-box {
    padding-left: 1rem;
    margin: 1.5rem 0;
  }

  .founder-quote {
    padding: 1.5rem;
    margin: 1.5rem 0;
  }

  .founder-quote p {
    font-size: 0.95rem;
  }

  /* Image containers – mobile override */
  .img-container {
    margin-top: 1rem !important;
  }

  .img-container img {
    filter: grayscale(0.8) contrast(1.1);
  }

  /* Individual image heights on mobile – set to auto or a fixed value */
  .img-about-corporate,
  .img-about-mission,
  .img-about-executive {
    height: auto; /* let the image determine height, or set a fixed value */
    min-height: 300px; /* optional, ensures a minimum height */
  }

  /* About grid */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

  .about-card {
    padding: 1.5rem;
  }

  .about-card i {
    font-size: 1.8rem;
  }

  .about-card h3 {
    font-size: 1.2rem;
  }

  .about-card p {
    font-size: 0.9rem;
  }

  /* Bullet lists */
  .bullet-list li {
    font-size: 0.9rem;
    padding-left: 1.5rem;
  }

  /* Content wrap padding */
  .content-wrap {
    padding: 0 1rem;
  }

  /* Section spacing */
  section {
    padding: 20px 0;
  }
  .img-about-corporate {
    width: 100%;
    height: 300px;
  }
  .img-about-corporate img {
    width: 100%;
    height: 100%;
  }
}

/* Extra small devices (max-width: 480px) */
@media (max-width: 480px) {
  .hero-title h1 {
    font-size: 2rem;
  }

  .sub-header {
    font-size: 1.5rem;
  }

  .body-text {
    font-size: 0.9rem;
  }

  .about-card {
    padding: 1.2rem;
  }
}

/* ---------- 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;
  }
}