/* =========================================================
ROOT
========================================================= */

:root {

--ink: #12212b;
--ink-light: #263943;
--muted: #6d7b83;

--paper: #ffffff;
--cream: #f6f3ed;
--soft: #eef3f4;

--line: #dce3e5;

--teal: #176f78;
--teal-dark: #10535b;
--teal-light: #dceff0;

--coral: #d96850;
--yellow: #e9c76b;

--green: #27805e;
--green-light: #e2f3eb;

--red: #b94d43;
--red-light: #f9e7e5;

--white: #ffffff;

--shadow:
0 20px 60px rgba(18, 33, 43, 0.08);

--radius: 18px;

}


/* =========================================================
RESET
========================================================= */

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}


html {

scroll-behavior: smooth;

}


body {

font-family:
Arial,
Helvetica,
sans-serif;

color: var(--ink);

background: var(--paper);

line-height: 1.6;

}


img {

max-width: 100%;

display: block;

}


a {

color: inherit;

text-decoration: none;

}


button,
input {

font: inherit;

}


/* =========================================================
CONTAINER
========================================================= */

.container {

width: min(
1180px,
calc(100% - 40px)
);

margin: 0 auto;

}


/* =========================================================
HEADER
========================================================= */

.site-header {

height: 78px;

background: rgba(255, 255, 255, 0.96);

border-bottom: 1px solid var(--line);

position: sticky;

top: 0;

z-index: 100;

}


.header-inner {

height: 100%;

display: flex;

align-items: center;

justify-content: space-between;

gap: 30px;

position: relative;

}


.brand {

display: inline-flex;

align-items: center;

gap: 10px;

flex-shrink: 0;

}


.brand-mark {

width: 38px;

height: 38px;

display: flex;

align-items: center;

justify-content: center;

background: var(--teal);

color: var(--white);

font-size: 18px;

font-weight: 700;

border-radius: 10px;

}


.brand-text {

font-size: 18px;

font-weight: 700;

letter-spacing: -0.3px;

}


.header-nav {

display: flex;

align-items: center;

gap: 30px;

}


.header-nav a {

color: var(--muted);

font-size: 14px;

font-weight: 600;

transition: 0.2s ease;

}


.header-nav a:hover,
.header-nav a.active {

color: var(--teal);

}


.header-button {

background: var(--ink);

color: var(--white);

padding: 11px 18px;

border-radius: 9px;

font-size: 13px;

font-weight: 700;

transition: 0.2s ease;

}


.header-button:hover {

background: var(--teal);

}


/* =========================================================
MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {

display: none;

width: 42px;

height: 42px;

padding: 8px;

border: 1px solid var(--line);

border-radius: 10px;

background: var(--white);

align-items: center;

justify-content: center;

flex-direction: column;

gap: 5px;

cursor: pointer;

}


.mobile-menu-button span {

display: block;

width: 20px;

height: 2px;

border-radius: 2px;

background: var(--ink);

}


/* =========================================================
AIRPLANE BACKGROUND SECTIONS
========================================================= */

.airplane-bg {

position: relative;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

overflow: hidden;

}


.airplane-bg::before {

content: "";

position: absolute;

inset: 0;

background:
rgba(255, 255, 255, 0.78);

z-index: 0;

}


.airplane-bg > .container {

position: relative;

z-index: 1;

}


.airplane-1 {

background-image:
url("imgs/airplane 1.png");

}


.airplane-2 {

background-image:
url("imgs/airplane 2.png");

}


.airplane-3 {

background-image:
url("imgs/airplane 3.png");

}


/* =========================================================
HERO
========================================================= */

.hero {

position: relative;

overflow: hidden;

background:
linear-gradient(
135deg,
rgba(237, 245, 245, 0.88) 0%,
rgba(248, 245, 239, 0.86) 60%,
rgba(244, 235, 228, 0.88) 100%
);

padding: 100px 0 90px;

}


.hero::before {

content: "";

position: absolute;

width: 500px;

height: 500px;

border-radius: 50%;

background:
rgba(23, 111, 120, 0.07);

right: -180px;

top: -180px;

}


.hero::after {

content: "";

position: absolute;

width: 300px;

height: 300px;

border-radius: 50%;

background:
rgba(217, 104, 80, 0.06);

left: -130px;

bottom: -150px;

}


.hero-grid {

display: grid;

grid-template-columns:
1.05fr
0.95fr;

align-items: center;

gap: 80px;

position: relative;

z-index: 2;

}


.eyebrow {

color: var(--teal);

font-size: 11px;

font-weight: 800;

letter-spacing: 2px;

margin-bottom: 15px;

}


.hero h1 {

max-width: 680px;

font-size: clamp(
48px,
6vw,
76px
);

line-height: 0.98;

letter-spacing: -3px;

font-weight: 800;

}


.hero h1 span {

color: var(--teal);

display: block;

}


.hero-description {

max-width: 570px;

color: var(--muted);

font-size: 17px;

margin-top: 26px;

}


/* =========================================================
TRACKING FORM
========================================================= */

.tracking-form {

margin-top: 35px;

max-width: 650px;

}


.tracking-form label {

display: block;

font-size: 12px;

font-weight: 800;

margin-bottom: 9px;

}


.tracking-input-row {

display: flex;

gap: 10px;

}


.tracking-input-row input {

flex: 1;

min-width: 0;

height: 56px;

padding: 0 17px;

border: 1px solid var(--line);

border-radius: 10px;

background: var(--white);

color: var(--ink);

outline: none;

box-shadow:
0 8px 25px rgba(18, 33, 43, 0.05);

}


.tracking-input-row input:focus {

border-color: var(--teal);

}


.tracking-input-row button {

height: 56px;

border: 0;

border-radius: 10px;

padding: 0 25px;

background: var(--teal);

color: var(--white);

font-weight: 700;

cursor: pointer;

transition: 0.2s ease;

}


.tracking-input-row button:hover {

background: var(--teal-dark);

}


.tracking-input-row button:disabled {

opacity: 0.6;

cursor: not-allowed;

}


.tracking-hint {

color: var(--muted);

font-size: 12px;

margin-top: 9px;

}


.tracking-message {

min-height: 20px;

margin-top: 8px;

font-size: 13px;

color: var(--red);

}


/* =========================================================
HERO VISUAL
========================================================= */

.hero-visual {

display: flex;

justify-content: center;

}


.hero-card {

width: min(
100%,
460px
);

background: var(--ink);

color: var(--white);

padding: 30px;

border-radius: 22px;

box-shadow:
0 30px 70px rgba(18, 33, 43, 0.2);

transform: rotate(2deg);

}


.hero-card-top {

display: flex;

justify-content: space-between;

align-items: center;

color: #b8c8cd;

font-size: 10px;

letter-spacing: 1.5px;

font-weight: 700;

}


.status-dot {

width: 9px;

height: 9px;

border-radius: 50%;

background: #57b98c;

box-shadow:
0 0 0 5px rgba(87, 185, 140, 0.12);

}


.hero-route {

display: grid;

grid-template-columns:
1fr
1.4fr
1fr;

align-items: center;

gap: 15px;

margin: 70px 0;

}


.hero-airport {

display: flex;

flex-direction: column;

}


.hero-airport:last-child {

text-align: right;

}


.hero-airport strong {

font-size: 36px;

line-height: 1;

}


.hero-airport span {

color: #94a7ad;

font-size: 11px;

margin-top: 8px;

}


.hero-plane {

display: flex;

flex-direction: column;

align-items: center;

gap: 9px;

}


.hero-plane span {

font-size: 22px;

}


.hero-line {

width: 100%;

height: 1px;

background:
repeating-linear-gradient(
to right,
#71858b 0,
#71858b 6px,
transparent 6px,
transparent 12px
);

}


.hero-card-footer {

display: flex;

justify-content: space-between;

color: #9eb0b5;

border-top:
1px solid rgba(255,255,255,0.12);

padding-top: 18px;

font-size: 11px;

}


/* =========================================================
QUICK SECTION
========================================================= */

.quick-section {

padding: 30px 0;

background: var(--white);

}


.quick-grid {

display: grid;

grid-template-columns:
repeat(3, 1fr);

gap: 16px;

}


.quick-card {

display: flex;

align-items: flex-start;

gap: 17px;

padding: 24px;

border: 1px solid var(--line);

border-radius: 14px;

background: var(--white);

transition: 0.2s ease;

}


.quick-card:hover {

transform: translateY(-3px);

border-color: var(--teal);

box-shadow: var(--shadow);

}


.quick-icon {

width: 43px;

height: 43px;

flex-shrink: 0;

border-radius: 11px;

display: flex;

align-items: center;

justify-content: center;

background: var(--teal-light);

color: var(--teal);

font-weight: 800;

}


.quick-card h3 {

font-size: 15px;

margin-bottom: 4px;

}


.quick-card p {

color: var(--muted);

font-size: 12px;

line-height: 1.5;

}


/* =========================================================
GENERAL SECTIONS
========================================================= */

.tracking-section,
.before-section,
.services-section,
.journey-info-section,
.faq-section,
.contact-section {

padding: 100px 0;

}


.section-heading {

max-width: 700px;

margin-bottom: 45px;

}


.section-heading.centered {

text-align: center;

margin-left: auto;

margin-right: auto;

}


.section-heading h2 {

font-size: clamp(
34px,
4vw,
50px
);

line-height: 1.05;

letter-spacing: -1.8px;

}


.section-heading p {

color: var(--muted);

margin-top: 15px;

font-size: 15px;

}


/* =========================================================
EMPTY TRACKING
========================================================= */

.tracking-empty {

padding: 75px 30px;

border: 1px dashed #cbd7da;

border-radius: var(--radius);

text-align: center;

background: #fafcfc;

}


.empty-icon {

width: 60px;

height: 60px;

margin: 0 auto 18px;

border-radius: 50%;

background: var(--teal-light);

color: var(--teal);

display: flex;

align-items: center;

justify-content: center;

font-size: 23px;

}


.tracking-empty h3 {

font-size: 22px;

}


.tracking-empty p {

max-width: 430px;

margin: 8px auto 18px;

color: var(--muted);

font-size: 14px;

}


.tracking-empty a {

color: var(--teal);

font-size: 13px;

font-weight: 700;

}


/* =========================================================
FLIGHT RESULT
========================================================= */

.flight-result {

border: 1px solid var(--line);

border-radius: 20px;

overflow: hidden;

background: var(--white);

box-shadow: var(--shadow);

}


.hidden {

display: none !important;

}


.flight-result-header {

padding: 30px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 25px;

background: var(--ink);

color: var(--white);

}


.result-label {

display: block;

color: var(--teal);

font-size: 10px;

letter-spacing: 1.7px;

font-weight: 800;

margin-bottom: 7px;

}


.flight-result-header .result-label {

color: #9bc5c9;

}


.flight-result-header h3 {

font-size: 25px;

}


.flight-result-header p {

color: #93a8ae;

font-size: 12px;

margin-top: 3px;

}


.flight-status {

padding: 9px 15px;

border-radius: 50px;

background: rgba(255,255,255,0.1);

color: #c7dbde;

font-size: 11px;

font-weight: 800;

text-transform: uppercase;

letter-spacing: 0.8px;

}


/* =========================================================
ROUTE CARD
========================================================= */

.flight-route-card {

display: grid;

grid-template-columns:
1fr
1.3fr
1fr;

align-items: center;

gap: 25px;

padding: 45px 35px;

border-bottom: 1px solid var(--line);

}


.route-location {

display: flex;

flex-direction: column;

}


.route-location-right {

text-align: right;

}


.route-label {

color: var(--muted);

font-size: 10px;

font-weight: 800;

letter-spacing: 1.5px;

margin-bottom: 5px;

}


.route-location strong {

font-size: 32px;

line-height: 1;

}


.route-location span:last-child {

color: var(--muted);

font-size: 12px;

margin-top: 8px;

}


.route-middle {

text-align: center;

}


.route-line {

position: relative;

height: 30px;

display: flex;

align-items: center;

}


.route-line::before {

content: "";

position: absolute;

left: 0;

right: 0;

height: 1px;

background:
repeating-linear-gradient(
to right,
#a9b7bb 0,
#a9b7bb 6px,
transparent 6px,
transparent 12px
);

}


.route-plane {

position: relative;

z-index: 1;

background: var(--white);

padding: 0 10px;

font-size: 19px;

}


.route-middle > span:last-child {

color: var(--muted);

font-size: 11px;

font-weight: 700;

}


/* =========================================================
FLIGHT INFORMATION
========================================================= */

.flight-information {

display: grid;

grid-template-columns:
repeat(4, 1fr);

border-bottom: 1px solid var(--line);

}


.information-item {

padding: 23px 25px;

border-right: 1px solid var(--line);

border-bottom: 1px solid var(--line);

}


.information-item:nth-child(4n) {

border-right: 0;

}


.information-item span {

display: block;

color: var(--muted);

font-size: 10px;

text-transform: uppercase;

letter-spacing: 1px;

margin-bottom: 5px;

}


.information-item strong {

display: block;

font-size: 14px;

word-break: break-word;

}


/* =========================================================
JOURNEY
========================================================= */

.journey-section {

padding: 35px;

border-bottom: 1px solid var(--line);

}


.journey-heading {

display: flex;

justify-content: space-between;

align-items: flex-end;

gap: 20px;

margin-bottom: 35px;

}


.journey-heading h3 {

font-size: 22px;

}


.journey-heading > span {

color: var(--muted);

font-size: 11px;

}


.journey-progress {

position: relative;

display: grid;

grid-template-columns:
repeat(3, 1fr);

gap: 15px;

}


.progress-line {

position: absolute;

top: 18px;

left: 16%;

right: 16%;

height: 2px;

background: var(--line);

}


.progress-step {

position: relative;

z-index: 2;

display: flex;

align-items: center;

flex-direction: column;

text-align: center;

}


.progress-circle {

width: 36px;

height: 36px;

border-radius: 50%;

background: var(--soft);

border: 3px solid var(--white);

box-shadow:
0 0 0 1px var(--line);

display: flex;

align-items: center;

justify-content: center;

font-size: 11px;

font-weight: 800;

color: var(--muted);

margin-bottom: 10px;

}


.progress-step span {

color: var(--muted);

font-size: 11px;

font-weight: 700;

}


.progress-step.active .progress-circle {

background: var(--teal);

color: var(--white);

box-shadow:
0 0 0 1px var(--teal);

}


.progress-step.active span {

color: var(--teal);

}


.progress-step.completed .progress-circle {

background: var(--green);

color: var(--white);

box-shadow:
0 0 0 1px var(--green);

}


.progress-step.completed span {

color: var(--green);

}


/* =========================================================
ERROR
========================================================= */

.flight-error {

margin: 30px 35px;

padding: 22px;

border: 1px solid #efc6c1;

border-radius: 13px;

background: var(--red-light);

display: flex;

gap: 15px;

}


.error-icon {

width: 35px;

height: 35px;

flex-shrink: 0;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

background: var(--red);

color: var(--white);

font-weight: 800;

}


.flight-error span {

color: var(--red);

font-size: 10px;

letter-spacing: 1px;

font-weight: 800;

}


.flight-error h3 {

font-size: 17px;

margin: 2px 0 4px;

}


.flight-error p {

color: #704b47;

font-size: 13px;

}


/* =========================================================
TIMELINE
========================================================= */

.timeline-section {

padding: 35px;

}


.tracking-timeline {

border-left: 2px solid var(--line);

margin-left: 7px;

padding-left: 28px;

}


.timeline-item {

position: relative;

padding-bottom: 25px;

}


.timeline-item:last-child {

padding-bottom: 0;

}


.timeline-item::before {

content: "";

position: absolute;

width: 10px;

height: 10px;

border-radius: 50%;

background: var(--teal);

left: -34px;

top: 5px;

box-shadow:
0 0 0 4px var(--white),
0 0 0 5px var(--teal);

}


.timeline-item strong {

display: block;

font-size: 14px;

}


.timeline-item span {

color: var(--muted);

font-size: 11px;

}


.timeline-item p {

color: var(--muted);

font-size: 12px;

margin-top: 4px;

}


.timeline-empty {

color: var(--muted);

font-size: 13px;

}


/* =========================================================
POPULAR FLIGHTS
========================================================= */

.popular-section {

padding:
100px 0;

background:
var(--white);

}


.section-heading {

margin-bottom:
40px;

}


.section-eyebrow {

display:
block;

margin-bottom:
12px;

color:
var(--teal);

font-size:
12px;

font-weight:
800;

letter-spacing:
2px;

}


.section-heading h2 {

font-size:
clamp(
32px,
4vw,
48px
);

line-height:
1.05;

letter-spacing:
-1.5px;

}


.section-heading > p {

max-width:
580px;

margin-top:
12px;

color:
var(--muted);

}


.popular-heading {

display:
flex;

justify-content:
space-between;

align-items:
flex-end;

gap:
40px;

}


.popular-heading > p {

max-width:
390px;

margin-bottom:
5px;

}


.popular-grid {

display:
flex;

gap:
18px;

overflow-x:
auto;

padding:
5px 0 15px;

scroll-snap-type:
x mandatory;

scrollbar-width:
none;

}


.popular-grid::-webkit-scrollbar {

display:
none;

}


.destination-card {

position:
relative;

flex:
0 0 270px;

height:
330px;

overflow:
hidden;

border-radius:
18px;

background:
var(--ink);

scroll-snap-align:
start;

}


.destination-card img {

width:
100%;

height:
100%;

object-fit:
cover;

transition:
transform 0.45s ease;

}


.destination-card:hover img {

transform:
scale(1.07);

}


.destination-card::after {

content:
"";

position:
absolute;

inset:
0;

background:
linear-gradient(
to top,
rgba(
10,
22,
28,
0.90
),
rgba(
10,
22,
28,
0.08
) 65%
);

}


.destination-overlay {

position:
absolute;

z-index:
2;

left:
23px;

right:
23px;

bottom:
22px;

color:
var(--white);

}


.destination-overlay span {

display:
block;

margin-bottom:
6px;

color:
#c8e1e3;

font-size:
10px;

font-weight:
800;

letter-spacing:
1.3px;

text-transform:
uppercase;

}


.destination-overlay strong {

display:
block;

font-size:
21px;

line-height:
1.2;

}


/* =========================================================
BEFORE YOU FLY
========================================================= */

.before-section {

background-color: var(--cream);

}


.before-section::before {

background:
rgba(246, 243, 237, 0.76);

}


.before-grid {

display: grid;

grid-template-columns:
repeat(4, 1fr);

gap: 18px;

}


.before-card {

background: rgba(255, 255, 255, 0.94);

border: 1px solid var(--line);

border-radius: 15px;

padding: 27px;

backdrop-filter: blur(3px);

}


.card-number {

color: var(--coral);

font-size: 11px;

font-weight: 800;

}


.before-card h3 {

font-size: 19px;

margin: 28px 0 9px;

}


.before-card p {

color: var(--muted);

font-size: 13px;

line-height: 1.6;

}


.before-card a {

display: inline-block;

margin-top: 22px;

color: var(--teal);

font-size: 12px;

font-weight: 800;

}


/* =========================================================
SERVICES
========================================================= */

.services-section {

background-color: var(--white);

}


.services-section::before {

background:
rgba(255, 255, 255, 0.82);

}


.services-layout {

display: grid;

grid-template-columns:
0.8fr
1.2fr;

gap: 100px;

}


.services-intro h2 {

font-size: clamp(
34px,
4vw,
52px
);

line-height: 1.05;

letter-spacing: -1.8px;

}


.services-intro p {

color: var(--muted);

max-width: 450px;

margin: 18px 0 28px;

font-size: 14px;

}


.primary-button {

display: inline-flex;

background: var(--teal);

color: var(--white);

padding: 13px 20px;

border-radius: 9px;

font-size: 12px;

font-weight: 700;

}


.service-item {

display: grid;

grid-template-columns: 55px 1fr;

gap: 20px;

padding: 25px 0;

border-bottom: 1px solid var(--line);

}


.service-item:first-child {

border-top: 1px solid var(--line);

}


.service-number {

color: var(--coral);

font-size: 11px;

font-weight: 800;

}


.service-item h3 {

font-size: 18px;

margin-bottom: 5px;

}


.service-item p {

color: var(--muted);

font-size: 13px;

max-width: 570px;

}


/* =========================================================
JOURNEY INFORMATION
========================================================= */

.journey-info-section {

background: var(--ink);

color: var(--white);

}


.journey-info-card {

display: grid;

grid-template-columns:
0.9fr
1.1fr;

gap: 100px;

align-items: center;

}


.journey-info-content .eyebrow {

color: #9bc5c9;

}


.journey-info-content h2 {

font-size: clamp(
35px,
4vw,
53px
);

line-height: 1.05;

letter-spacing: -2px;

}


.journey-info-content p {

color: #a6b6bb;

max-width: 500px;

margin-top: 20px;

font-size: 14px;

}


.journey-info-list {

border-top:
1px solid rgba(255,255,255,0.12);

}


.journey-info-item {

display: grid;

grid-template-columns: 45px 1fr;

gap: 15px;

padding: 23px 0;

border-bottom:
1px solid rgba(255,255,255,0.12);

}


.journey-info-item > span {

color: #83b6bb;

font-size: 11px;

font-weight: 800;

}


.journey-info-item strong {

font-size: 16px;

}


.journey-info-item p {

color: #91a4aa;

font-size: 12px;

margin-top: 3px;

}


/* =========================================================
FAQ
========================================================= */

.faq-section {

background: var(--cream);

}


.faq-list {

max-width: 850px;

margin: 0 auto;

}


.faq-item {

background: var(--white);

border: 1px solid var(--line);

margin-bottom: 10px;

border-radius: 11px;

overflow: hidden;

}


.faq-item summary {

cursor: pointer;

padding: 20px 23px;

font-size: 14px;

font-weight: 700;

list-style: none;

position: relative;

padding-right: 50px;

}


.faq-item summary::-webkit-details-marker {

display: none;

}


.faq-item summary::after {

content: "+";

position: absolute;

right: 22px;

top: 17px;

color: var(--teal);

font-size: 20px;

font-weight: 400;

}


.faq-item[open] summary::after {

content: "−";

}


.faq-item p {

color: var(--muted);

font-size: 13px;

padding:
0 23px
22px;

}


/* =========================================================
CONTACT
========================================================= */

.contact-section {

background: var(--white);

}


.contact-card {

padding: 55px;

border-radius: 20px;

background:
linear-gradient(
135deg,
#edf5f5,
#f7f0e8
);

display: flex;

justify-content: space-between;

align-items: center;

gap: 50px;

}


.contact-card h2 {

max-width: 650px;

font-size: clamp(
34px,
4vw,
52px
);

line-height: 1.05;

letter-spacing: -2px;

}


.contact-card p {

color: var(--muted);

max-width: 600px;

margin-top: 15px;

font-size: 14px;

}


.contact-actions {

display: flex;

flex-direction: column;

align-items: flex-start;

gap: 15px;

flex-shrink: 0;

}


.contact-button {

background: var(--teal);

color: var(--white);

padding: 14px 21px;

border-radius: 9px;

font-size: 12px;

font-weight: 700;

}


.contact-link {

color: var(--teal);

font-size: 12px;

font-weight: 700;

}


/* =========================================================
FOOTER
========================================================= */

.site-footer {

background: #0c191f;

color: var(--white);

padding-top: 65px;

}


.footer-inner {

display: grid;

grid-template-columns:
1fr
0.7fr;

gap: 80px;

padding-bottom: 50px;

}


.footer-brand p {

max-width: 350px;

color: #82959b;

font-size: 12px;

margin-top: 17px;

}


.footer-links {

display: grid;

grid-template-columns:
repeat(2, 1fr);

gap: 30px;

}


.footer-links div {

display: flex;

flex-direction: column;

gap: 9px;

}


.footer-links strong {

font-size: 11px;

letter-spacing: 1px;

text-transform: uppercase;

margin-bottom: 5px;

}


.footer-links a {

color: #82959b;

font-size: 12px;

}


.footer-links a:hover {

color: var(--white);

}


.footer-bottom {

border-top:
1px solid rgba(255,255,255,0.1);

padding:
20px 0;

display: flex;

justify-content: space-between;

color: #64777d;

font-size: 10px;

}


/* =========================================================
FLIGHT ACCESS POPUP
========================================================= */

.flight-popup {

position: fixed;

inset: 0;

z-index: 9999;

display: flex;

align-items: center;

justify-content: center;

padding: 20px;

}


.flight-popup.hidden {

display: none;

}


.flight-popup-overlay {

position: absolute;

inset: 0;

background: rgba(
0,
0,
0,
0.55
);

}


.flight-popup-card {

position: relative;

z-index: 2;

width: min(
440px,
100%
);

padding: 38px 32px;

background: #ffffff;

border-radius: 20px;

text-align: center;

box-shadow:
0 25px 70px
rgba(
0,
0,
0,
0.22
);

}


.flight-popup-close {

position: absolute;

top: 14px;

right: 16px;

width: 36px;

height: 36px;

border: 0;

border-radius: 50%;

background: #f2f4f6;

color: #333;

font-size: 24px;

line-height: 1;

cursor: pointer;

}


.flight-popup-icon {

width: 64px;

height: 64px;

margin: 0 auto 18px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

background: #eef5f8;

font-size: 28px;

}


.flight-popup-label {

display: block;

margin-bottom: 8px;

font-size: 12px;

font-weight: 700;

letter-spacing: 1.5px;

color: #2f5f77;

}


.flight-popup-card h2 {

margin: 0 0 12px;

font-size: 26px;

line-height: 1.2;

color: #17212b;

}


.flight-popup-card p {

margin: 0 auto 24px;

max-width: 350px;

font-size: 15px;

line-height: 1.6;

color: #66727d;

}


.flight-popup-button {

width: 100%;

padding: 13px 20px;

border: 0;

border-radius: 10px;

background: #2f5f77;

color: #ffffff;

font-size: 15px;

font-weight: 700;

cursor: pointer;

}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 950px) {

.header-nav {

display: none;

position: absolute;

top: calc(100% + 1px);

left: 0;

right: 0;

padding: 12px 14px;

background: var(--white);

border-bottom: 1px solid var(--line);

box-shadow:
0 15px 30px rgba(18, 33, 43, 0.08);

flex-direction: column;

align-items: stretch;

gap: 3px;

}


.header-nav.mobile-open {

display: flex;

}


.header-nav a {

padding: 13px 12px;

border-radius: 8px;

}


.header-nav a:hover {

background: var(--soft);

}


.mobile-menu-button {

display: flex;

}


.hero-grid {

grid-template-columns: 1fr;

gap: 55px;

}


.hero-content {

text-align: center;

}


.hero-description,
.tracking-form {

margin-left: auto;

margin-right: auto;

}


.hero-visual {

padding: 0 20px;

}


.quick-grid {

grid-template-columns: 1fr;

}


.before-grid {

grid-template-columns:
repeat(2, 1fr);

}


.services-layout {

grid-template-columns: 1fr;

gap: 50px;

}


.journey-info-card {

grid-template-columns: 1fr;

gap: 50px;

}


.contact-card {

flex-direction: column;

align-items: flex-start;

}

}


@media (max-width: 700px) {

.container {

width: min(
100% - 28px,
1180px
);

}


.site-header {

height: 68px;

}


.header-button {

display: none;

}


.brand-text {

font-size: 16px;

}


.hero {

padding: 70px 0;

}


.hero h1 {

font-size: 48px;

letter-spacing: -2px;

}


.tracking-input-row {

flex-direction: column;

}


.tracking-input-row input {

height: 64px;

padding:
0 18px;

font-size: 16px;

}


.tracking-input-row button {

width: 100%;

height: 64px;

font-size: 15px;

}


.hero-card {

padding: 23px;

}


.hero-route {

margin: 50px 0;

}


.hero-airport strong {

font-size: 28px;

}


.tracking-section,
.before-section,
.services-section,
.journey-info-section,
.faq-section,
.contact-section {

padding: 70px 0;

}


.flight-result-header {

align-items: flex-start;

flex-direction: column;

}


.flight-route-card {

grid-template-columns: 1fr;

text-align: center;

}


.route-location,
.route-location-right {

align-items: center;

text-align: center;

}


.flight-information {

grid-template-columns:
repeat(2, 1fr);

}


.information-item:nth-child(2n) {

border-right: 0;

}


.information-item {

padding: 19px;

}


.journey-section,
.timeline-section {

padding: 25px 20px;

}


.journey-heading {

align-items: flex-start;

flex-direction: column;

}


.flight-error {

margin: 25px 20px;

}


.before-grid {

grid-template-columns: 1fr;

}


.contact-card {

padding: 35px 25px;

}


.footer-inner {

grid-template-columns: 1fr;

gap: 40px;

}


.footer-bottom {

flex-direction: column;

gap: 8px;

}

}


@media (max-width: 430px) {

.header-button {

display: none;

}


.hero h1 {

font-size: 42px;

}


.flight-information {

grid-template-columns: 1fr;

}


.information-item,
.information-item:nth-child(2n),
.information-item:nth-child(4n) {

border-right: 0;

}


.journey-progress {

gap: 5px;

}


.progress-step span {

font-size: 9px;

}

}