<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact | Aerxia</title>
<style>
:root {
--obsidian: #0F1115;
--graphite: #2B313A;
--arctic: #F7F7F7;
--titanium: #B5BDC8;
--copper: #C68A3A;
--electric: #2F6BFF;
--border: rgba(255, 255, 255, 0.10);
--muted: rgba(247, 247, 247, 0.64);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: Inter, Arial, sans-serif;
background: var(--obsidian);
color: var(--arctic);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea,
select {
font: inherit;
}
.container {
width: min(1200px, calc(100% - 48px));
margin: 0 auto;
}
/* =========================
NAVIGATION
========================== */
.nav {
height: 88px;
display: flex;
align-items: center;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 1000;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
background: rgba(15, 17, 21, 0.82);
}
.nav-inner {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
/* OFFICIAL AERXIA LOGO */
.logo {
display: flex;
align-items: center;
flex-shrink: 0;
}
.aerxia-logo {
width: 148px;
height: auto;
display: block;
}
.nav-links {
display: flex;
align-items: center;
gap: 34px;
font-size: 14px;
color: var(--muted);
}
.nav-links a {
transition: color 0.2s ease;
}
.nav-links a:hover {
color: var(--arctic);
}
.nav-cta {
padding: 12px 19px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 100px;
color: white !important;
transition:
border-color 0.2s ease,
background 0.2s ease;
}
.nav-cta:hover {
border-color: rgba(198, 138, 58, 0.7);
background: rgba(198, 138, 58, 0.06);
}
/* =========================
HERO
========================== */
.hero {
padding: 120px 0 75px;
position: relative;
overflow: hidden;
}
.hero::after {
content: "";
position: absolute;
width: 650px;
height: 650px;
top: -250px;
right: -250px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(198, 138, 58, 0.12),
rgba(198, 138, 58, 0.03) 35%,
transparent 70%
);
pointer-events: none;
}
.eyebrow {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--copper);
margin-bottom: 24px;
}
.hero h1 {
font-size: clamp(50px, 7vw, 94px);
font-weight: 300;
line-height: 0.98;
letter-spacing: -0.045em;
max-width: 1000px;
}
.hero-copy {
margin-top: 32px;
max-width: 650px;
color: var(--muted);
font-size: 18px;
line-height: 1.8;
}
/* =========================
CONTACT SECTION
========================== */
.contact-section {
padding: 65px 0 125px;
}
.contact-grid {
display: grid;
grid-template-columns:
minmax(0, 0.85fr)
minmax(0, 1.15fr);
gap: 85px;
align-items: start;
}
/* =========================
LEFT INFORMATION
========================== */
.contact-info {
position: sticky;
top: 130px;
}
.contact-info h2 {
font-size: 36px;
font-weight: 300;
line-height: 1.18;
letter-spacing: -0.03em;
margin-bottom: 22px;
}
.contact-info > p {
color: var(--muted);
max-width: 460px;
margin-bottom: 50px;
font-size: 15px;
line-height: 1.85;
}
.info-block {
padding: 22px 0;
border-top: 1px solid var(--border);
}
.info-label {
font-size: 10px;
letter-spacing: 0.17em;
text-transform: uppercase;
color: var(--titanium);
margin-bottom: 8px;
}
.info-value {
font-size: 17px;
font-weight: 400;
}
.info-value a {
transition: color 0.2s ease;
}
.info-value a:hover {
color: var(--copper);
}
/* STATUS */
.status {
display: inline-flex;
align-items: center;
gap: 9px;
}
.status-dot {
width: 7px;
height: 7px;
background: #54d889;
border-radius: 50%;
box-shadow:
0 0 0 4px rgba(84, 216, 137, 0.06),
0 0 14px rgba(84, 216, 137, 0.45);
}
/* =========================
FORM CARD
========================== */
.form-card {
border: 1px solid var(--border);
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.035),
rgba(255, 255, 255, 0.012)
);
border-radius: 24px;
padding: 44px;
}
.form-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 40px;
}
.form-header h3 {
font-size: 28px;
font-weight: 400;
letter-spacing: -0.025em;
margin-bottom: 7px;
}
.form-header span {
font-size: 12px;
color: var(--muted);
}
/* =========================
QUICK OPTIONS
========================== */
.quick-actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 38px;
}
.quick-action {
border: 1px solid var(--border);
background: transparent;
color: var(--muted);
padding: 14px 10px;
border-radius: 10px;
cursor: pointer;
font-size: 13px;
transition:
color 0.2s ease,
border-color 0.2s ease,
background 0.2s ease;
}
.quick-action:hover,
.quick-action.active {
color: white;
border-color: rgba(198, 138, 58, 0.6);
background: rgba(198, 138, 58, 0.08);
}
/* =========================
FORM
========================== */
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.field {
margin-bottom: 22px;
}
label {
display: block;
font-size: 11px;
color: var(--titanium);
margin-bottom: 9px;
}
input,
select,
textarea {
width: 100%;
border: 1px solid var(--border);
background:
rgba(255, 255, 255, 0.025);
color: white;
border-radius: 11px;
padding: 15px 16px;
outline: none;
font-size: 14px;
transition:
border-color 0.2s ease,
background 0.2s ease;
}
input::placeholder,
textarea::placeholder {
color: rgba(247, 247, 247, 0.32);
}
input:focus,
select:focus,
textarea:focus {
border-color: rgba(198, 138, 58, 0.68);
background:
rgba(255, 255, 255, 0.045);
}
textarea {
min-height: 145px;
resize: vertical;
}
select {
cursor: pointer;
}
select option {
background: var(--graphite);
color: white;
}
/* =========================
SUBMIT
========================== */
.submit-btn {
width: 100%;
border: none;
background: var(--arctic);
color: var(--obsidian);
padding: 18px 24px;
border-radius: 11px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition:
transform 0.25s ease,
background 0.25s ease;
}
.submit-btn:hover {
transform: translateY(-2px);
background: white;
}
.privacy {
margin-top: 16px;
font-size: 10px;
line-height: 1.6;
color: rgba(247, 247, 247, 0.38);
text-align: center;
}
/* =========================
URGENT OPERATIONS
========================== */
.ops-banner {
margin-top: 80px;
padding: 31px 34px;
border: 1px solid var(--border);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
background:
rgba(255, 255, 255, 0.015);
}
.ops-banner strong {
display: block;
font-size: 18px;
font-weight: 500;
}
.ops-banner p {
color: var(--muted);
font-size: 14px;
margin-top: 5px;
}
.ops-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 190px;
padding: 14px 20px;
border-radius: 100px;
border: 1px solid
rgba(255, 255, 255, 0.18);
white-space: nowrap;
font-size: 13px;
transition:
border-color 0.2s ease,
background 0.2s ease;
}
.ops-button:hover {
border-color: var(--copper);
background:
rgba(198, 138, 58, 0.06);
}
/* =========================
FOOTER
========================== */
footer {
border-top: 1px solid var(--border);
padding: 45px 0;
color: var(--muted);
font-size: 12px;
}
.footer-inner {
display: flex;
justify-content: space-between;
gap: 20px;
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 18px;
}
.footer-logo {
width: 110px;
height: auto;
opacity: 0.9;
}
/* =========================
TABLET
========================== */
@media (max-width: 900px) {
.nav-links a:not(.nav-cta) {
display: none;
}
.hero {
padding-top: 85px;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 55px;
}
.contact-info {
position: static;
}
.contact-info > p {
max-width: 650px;
}
}
/* =========================
MOBILE
========================== */
@media (max-width: 620px) {
.container {
width: min(
100% - 28px,
1200px
);
}
.nav {
height: 76px;
}
.aerxia-logo {
width: 125px;
}
.nav-cta {
padding: 10px 14px;
font-size: 12px;
}
.hero {
padding:
70px 0
45px;
}
.hero h1 {
font-size: 49px;
}
.hero-copy {
font-size: 16px;
}
.contact-section {
padding-top: 40px;
}
.form-card {
padding: 28px 20px;
border-radius: 18px;
}
.form-header {
flex-direction: column;
}
.form-row {
grid-template-columns: 1fr;
gap: 0;
}
.quick-actions {
grid-template-columns: 1fr;
}
.ops-banner {
flex-direction: column;
align-items: flex-start;
}
.ops-button {
width: 100%;
}
.footer-inner {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- =========================
NAVIGATION
========================== -->
<header class="nav">
<div class="container nav-inner">
<!-- OFFICIAL AERXIA LOGO -->
<a href="/" class="logo">
<img
src="Recurso 3Aerxia-negative-logo.svg"
alt="Aerxia"
class="aerxia-logo"
/>
</a>
<nav class="nav-links">
<a href="/services">
Services
</a>
<a href="/about">
About
</a>
<a href="/network">
Network
</a>
<a href="/insights">
Insights
</a>
<a
href="#contact"
class="nav-cta"
>
Request Support
</a>
</nav>
</div>
</header>
<!-- =========================
HERO
========================== -->
<section class="hero">
<div class="container">
<div class="eyebrow">
Global Flight Support
</div>
<h1>
Let’s make your<br />
next operation seamless.
</h1>
<p class="hero-copy">
Tell us where you're flying and what you need.
Our operations team will coordinate the details,
from ground handling and permits to transportation,
fuel and crew assistance.
</p>
</div>
</section>
<!-- =========================
CONTACT
========================== -->
<section
class="contact-section"
id="contact"
>
<div class="container">
<div class="contact-grid">
<!-- =====================
LEFT SIDE
====================== -->
<div class="contact-info">
<div class="eyebrow">
Contact Aerxia
</div>
<h2>
Global support.<br />
One point of contact.
</h2>
<p>
Aviation operations require speed,
accuracy and dependable coordination.
Aerxia gives flight departments,
operators and crews a direct line
to experienced support.
</p>
<div class="info-block">
<div class="info-label">
Operations
</div>
<div class="info-value status">
<span
class="status-dot">
</span>
24 / 7 Global Support
</div>
</div>
<div class="info-block">
<div class="info-label">
Email
</div>
<div class="info-value">
<a
href="mailto:ops@aerxia.com"
>
ops@aerxia.com
</a>
</div>
</div>
<div class="info-block">
<div class="info-label">
Phone / WhatsApp
</div>
<div class="info-value">
<a href="#">
+52 XX XXXX XXXX
</a>
</div>
</div>
<div class="info-block">
<div class="info-label">
Headquarters
</div>
<div class="info-value">
Mexico
</div>
</div>
</div>
<!-- =====================
FORM
====================== -->
<div class="form-card">
<div class="form-header">
<div>
<h3>
Request Flight Support
</h3>
<span>
Tell us about your
upcoming operation.
</span>
</div>
<span>
24 / 7
</span>
</div>
<!-- REQUEST TYPE -->
<div class="quick-actions">
<button
type="button"
class="quick-action active"
data-value="Flight Support"
>
Flight Support
</button>
<button
type="button"
class="quick-action"
data-value="Request a Quote"
>
Request a Quote
</button>
<button
type="button"
class="quick-action"
data-value="Urgent Operations"
>
Urgent Operation
</button>
</div>
<form id="aerxiaContactForm">
<input
type="hidden"
id="requestType"
name="requestType"
value="Flight Support"
/>
<div class="form-row">
<div class="field">
<label
for="firstName"
>
First Name
</label>
<input
id="firstName"
name="firstName"
type="text"
placeholder="First name"
required
/>
</div>
<div class="field">
<label
for="lastName"
>
Last Name
</label>
<input
id="lastName"
name="lastName"
type="text"
placeholder="Last name"
required
/>
</div>
</div>
<div class="form-row">
<div class="field">
<label
for="company"
>
Company
</label>
<input
id="company"
name="company"
type="text"
placeholder="Company name"
/>
</div>
<div class="field">
<label
for="email"
>
Work Email
</label>
<input
id="email"
name="email"
type="email"
placeholder="name@company.com"
required
/>
</div>
</div>
<div class="form-row">
<div class="field">
<label
for="phone"
>
Phone / WhatsApp
</label>
<input
id="phone"
name="phone"
type="tel"
placeholder="+1..."
/>
</div>
<div class="field">
<label
for="service"
>
Service Required
</label>
<select
id="service"
name="service"
>
<option>
Complete Flight Support
</option>
<option>
Ground Handling
</option>
<option>
Landing Permit
</option>
<option>
Overflight Permit
</option>
<option>
Fuel Coordination
</option>
<option>
Transportation
</option>
<option>
Hotel
</option>
<option>
Passenger Assistance
</option>
<option>
Crew Assistance
</option>
<option>
Flight Planning
</option>
<option>
Other
</option>
</select>
</div>
</div>
<div class="form-row">
<div class="field">
<label
for="route"
>
Airport / Route
</label>
<input
id="route"
name="route"
type="text"
placeholder="KTEB – MMTO"
/>
</div>
<div class="field">
<label
for="flightDate"
>
Flight Date
</label>
<input
id="flightDate"
name="flightDate"
type="date"
/>
</div>
</div>
<div class="field">
<label
for="aircraft"
>
Aircraft Type / Tail Number
</label>
<input
id="aircraft"
name="aircraft"
type="text"
placeholder="Gulfstream G600 / N123AB"
/>
</div>
<div class="field">
<label
for="message"
>
How can we assist?
</label>
<textarea
id="message"
name="message"
placeholder="Tell us about your flight, required services, airports and any special requirements."
></textarea>
</div>
<button
type="submit"
class="submit-btn"
>
Send Request →
</button>
<div class="privacy">
By submitting this form
you agree to Aerxia's privacy
policy and communication terms.
</div>
</form>
</div>
</div>
<!-- =====================
URGENT OPERATIONS
====================== -->
<div class="ops-banner">
<div>
<div
class="eyebrow"
style="margin-bottom:6px;"
>
Urgent Operation
</div>
<strong>
Flying within the next 24 hours?
</strong>
<p>
Contact our operations team
directly for immediate assistance.
</p>
</div>
<a
href="https://wa.me/"
class="ops-button"
target="_blank"
rel="noopener"
>
Contact Operations →
</a>
</div>
</div>
</section>
<!-- =========================
FOOTER
========================== -->
<footer>
<div class="container footer-inner">
<div class="footer-brand">
<img
src="Recurso 3Aerxia-negative-logo.svg"
alt="Aerxia"
class="footer-logo"
/>
<div>
© 2026 Aerxia.
All rights reserved.
</div>
</div>
<div>
Global Aviation Support
</div>
</div>
</footer>
<!-- =========================
JAVASCRIPT
========================== -->
<script>
const buttons =
document.querySelectorAll(
".quick-action"
);
const requestType =
document.getElementById(
"requestType"
);
buttons.forEach(
button => {
button.addEventListener(
"click",
() => {
buttons.forEach(
btn =>
btn.classList.remove(
"active"
)
);
button.classList.add(
"active"
);
requestType.value =
button.dataset.value;
}
);
}
);
</script>
</body>
</html>