@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Open+Sans:wght@300;400;600;700&display=swap');

/* =========================================================
   Aurex Cargo AU — COMMON styles (shared by every page)
   Loaded on every web page via _Layout.cshtml.
   Page-specific styles live in /wwwroot/resource/css/aurex-<page>.css
   Palette from logo: blue #045F80, gold #F5B61C, gray #6F727B.
   ========================================================= */
:root {
    --blue:        #045F80;
    --blue-dark:   #044c68;
    --blue-deep:   #033849;
    --gold:        #F5B61C;
    --gold-bright: #ffc93c;
    --gray:        #6F727B;
    --ink:         #2a2a2a;
    --line:        #ececec;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Anchor targets must clear the fixed header when jumped to */
[id] { scroll-margin-top: 96px; }

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--ink);
    margin: 0;
    background: #fff;
    overflow-x: hidden;
    font-size: 15px;
    line-height: 1.7;
}

h1, h2, h3, h4, .oswald { font-family: 'Oswald', sans-serif; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
section { position: relative; }

.container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Grid helpers (lightweight, no framework) */
.row { display: flex; flex-wrap: wrap; margin: 0 -16px; }
.row > [class^="col"] { padding: 0 16px; }
.col-6 { width: 50%; }
.col-5 { width: 41.6667%; }
.col-7 { width: 58.3333%; }
.col-4 { width: 33.3333%; }
.col-12 { width: 100%; }
.align-center { align-items: center; }
.text-center { text-align: center; }

/* Common section eyebrow + title + tag */
.eyebrow {
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 10px;
}
.sec-title {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    color: var(--blue);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.15;
    margin: 0 0 20px;
}
.tag {
    display: inline-block;
    background: var(--gold);
    color: var(--blue-deep);
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 14px;
    margin-bottom: 18px;
}
.lead { color: #555; line-height: 1.85; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 13px;
    font-weight: 500;
    padding: 12px 26px;
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.btn-gold::after, .btn-blue::after {
    content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: 11px; margin-left: 9px; display: inline-block; transition: transform .25s ease;
}
.btn-gold:hover::after, .btn-blue:hover::after { transform: translateX(4px); }
.btn-gold   { background: var(--gold); color: var(--blue-deep); border-color: var(--gold); }
.btn-gold:hover { background: transparent; color: var(--gold); }
.btn-blue   { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-blue:hover { background: transparent; color: var(--blue); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline-light:hover { background: #fff; color: var(--blue); border-color: #fff; }
.btn + .btn { margin-left: 10px; }

/* Button group: wraps cleanly with consistent gaps */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.btn-row .btn { margin: 0; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 14px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background: linear-gradient(180deg, rgba(3,40,54,.55), rgba(3,40,54,0));
    transition: background-color .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.scrolled {
    background: #fff;
    padding: 6px 40px;
    box-shadow: 0 2px 18px rgba(0,0,0,.12);
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; order: 2; }
.brand img {
    height: 90px; width: auto; display: block;
    filter: drop-shadow(0 2px 7px rgba(0,0,0,.55));
    transition: height .35s ease, filter .35s ease;
}
.site-header.scrolled .brand img { height: 48px; filter: none; }
.site-header.scrolled .burger { color: var(--blue); }

/* Header logo swap: white-text logo on transparent top, colour logo when scrolled */
.brand img.brand-solid { display: none; }
.site-header.scrolled .brand img.brand-top { display: none; }
.site-header.scrolled .brand img.brand-solid { display: block; }

/* Left cluster: nav + language switcher (the logo sits on the right) */
.header-right { display: flex; align-items: center; gap: 30px; order: 1; flex: 1; }

.main-nav { display: flex; align-items: center; gap: 40px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    transition: color .2s ease;
}
.main-nav a:hover { color: var(--gold-bright); }
.main-nav a.active { color: var(--gold); font-weight: 500; }

.burger { display: none; background: none; border: 0; color: #fff; font-size: 24px; cursor: pointer; }

/* Scrolled (white) header nav colours — desktop only; mobile menu stays on dark dropdown */
@media (min-width: 992px) {
    .site-header.scrolled .main-nav a { color: var(--blue); }
    .site-header.scrolled .main-nav a:hover { color: var(--gold); }
    .site-header.scrolled .main-nav a.active { color: var(--blue); font-weight: 600; }

    /* animated underline */
    .main-nav a::after {
        content: ""; position: absolute; left: 0; bottom: -5px;
        height: 2px; width: 0; background: var(--gold); transition: width .25s ease;
    }
    .main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
}

/* ---------- Dropdown submenu (dynamic menu children) ---------- */
.main-nav .has-sub { position: relative; }

/* Caret indicator on parent items that have children — reuses the language caret */
.main-nav .has-sub > a { display: inline-flex; align-items: center; gap: 6px; }
.main-nav .has-sub > a .caret { font-size: 10px; transition: transform .25s ease; }
.main-nav .has-sub:hover > a .caret { transform: rotate(180deg); }

.sub-nav {
    list-style: none; margin: 0; padding: 6px;
    position: absolute; top: calc(100% + 10px); left: 0;
    min-width: 220px; border-radius: 8px;
    background: #fff; border: 1px solid var(--line);
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease,
                background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
    z-index: 1001;
}
/* Transparent hover-bridge so the menu doesn't drop while the cursor crosses the gap */
.sub-nav::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.main-nav .has-sub:hover > .sub-nav { opacity: 1; visibility: visible; transform: none; }
.sub-nav li { width: 100%; }
.sub-nav a {
    display: block; padding: 9px 14px; border-radius: 4px;
    color: var(--ink);
    font-family: 'Oswald', sans-serif; font-weight: 300;
    font-size: 13px; letter-spacing: .8px; text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.sub-nav a::after { display: none !important; }
.sub-nav a:hover, .sub-nav a.active {
    background: #f0f5f7; color: var(--blue);
    box-shadow: inset 3px 0 0 var(--gold);
}
.sub-nav a.active { font-weight: 600; }

/* ---------- Language switcher (keeps multi-language support) ---------- */
.lang-switch { position: relative; margin-left: auto; }
.lang-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 1px solid rgba(255,255,255,.40); border-radius: 999px;
    padding: 6px 15px; cursor: pointer; color: #fff;
    font-family: 'Oswald', sans-serif; text-transform: uppercase;
    letter-spacing: 1.4px; font-size: 13px; font-weight: 300;
    transition: color .2s ease, border-color .2s ease;
}
.lang-toggle .fi { border-radius: 2px; font-size: 16px; }
.lang-toggle .caret { font-size: 10px; transition: transform .25s ease; }
.lang-switch.open .lang-toggle .caret { transform: rotate(180deg); }
.lang-toggle:hover { color: var(--gold-bright); }
.site-header.scrolled .lang-toggle { color: var(--blue); border-color: rgba(4,95,128,.32); }
.site-header.scrolled .lang-toggle:hover { color: var(--gold); }
.lang-menu {
    position: absolute; right: 0; top: calc(100% + 12px);
    min-width: 180px; border-radius: 8px;
    background: #fff; border: 1px solid var(--line);
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
    list-style: none; margin: 0; padding: 6px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease,
                background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
    z-index: 1001;
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 4px;
    color: var(--ink); font-size: 13.5px;
    transition: background-color .18s ease, color .18s ease;
}
.lang-menu a .fi { font-size: 18px; border-radius: 2px; }
.lang-menu a:hover { background: #f0f5f7; color: var(--blue); }
.lang-menu a.active { background: #eaf1f4; color: var(--blue); font-weight: 600; }

/* ---------- Adaptive dropdown: dark glass at page top, white once scrolled ----------
   Both the submenu and the language menu switch together so they always match the
   header state. Desktop only — mobile keeps the inline dark burger menu (see bottom). */
@media (min-width: 992px) {
    .site-header:not(.scrolled) .sub-nav,
    .site-header:not(.scrolled) .lang-menu {
        background: rgba(3, 56, 73, .90);
        border-color: rgba(255, 255, 255, .10);
        box-shadow: 0 18px 42px rgba(0, 0, 0, .38);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }
    .site-header:not(.scrolled) .sub-nav a,
    .site-header:not(.scrolled) .lang-menu a { color: rgba(255, 255, 255, .85); }
    .site-header:not(.scrolled) .sub-nav a:hover,
    .site-header:not(.scrolled) .sub-nav a.active,
    .site-header:not(.scrolled) .lang-menu a:hover,
    .site-header:not(.scrolled) .lang-menu a.active {
        background: rgba(255, 255, 255, .07); color: var(--gold);
    }
    .site-header:not(.scrolled) .sub-nav a:hover,
    .site-header:not(.scrolled) .sub-nav a.active {
        box-shadow: inset 3px 0 0 var(--gold);
    }
}

/* =========================================================
   PAGE BANNER (inner-page hero — shared by all non-home pages)
   ========================================================= */
.page-banner {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 120px 24px 60px;
    overflow: hidden;
    background: var(--blue-deep);
}
.page-banner::before {
    content: "";
    position: absolute; inset: 0; z-index: 0;
    background: url('../images/aurex/hero-pallet-loader.jpg') center 35% / cover no-repeat;
}
.page-banner::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(3,40,54,.70) 0%, rgba(3,40,54,.52) 50%, rgba(3,40,54,.62) 100%);
}
.page-banner > * { position: relative; z-index: 2; }
.page-banner h1 {
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin: 0 0 16px;
    text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.page-banner p {
    max-width: 720px;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.7;
    margin: 0 auto;
    text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.banner-scroll { margin-top: 30px; color: #fff; font-size: 24px; animation: bounce 2s infinite; }
@keyframes bounce { 0%,100% { transform: translateY(0);} 50% { transform: translateY(8px);} }

/* Breadcrumb — dải bar mờ ghim sát đáy .page-banner. Absolute nên không đẩy lệch
   tiêu đề canh giữa. Bar cao ~42px, luôn nằm gọn trong padding-bottom 60px của banner
   -> phần nội dung theo luồng (kể cả .banner-scroll) không bao giờ bị đè.
   Lề ngang do .container bên trong partial lo (nhịp mặc định của site) -> bar không tự
   set padding ngang. Trang nào có nhịp riêng thì override .breadcrumb .container trong
   CSS của trang đó (vd Category full-bleed 8% trong aurex-services.css).
   Chữ nhỏ/nhạt để không tranh chấp với tiêu đề; mắt xích cuối (trang hiện tại) tô gold. */
.page-banner .breadcrumb {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    margin: 0; padding: 12px 0;
    background: rgba(3,40,54,.35);
    border-top: 1px solid rgba(255,255,255,.12);
}
.breadcrumb ol {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: 10px; margin: 0; padding: 0; list-style: none;
}
.breadcrumb li { display: flex; align-items: center; gap: 10px; }
.breadcrumb li + li::before { content: "/"; color: rgba(255,255,255,.45); }
.breadcrumb a, .breadcrumb span {
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.breadcrumb a { color: rgba(255,255,255,.75); transition: color .2s ease; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb [aria-current="page"] { color: var(--gold); }

/* =========================================================
   SECTION WRAPPERS (shared)
   ========================================================= */
.section-white { padding: 90px 0; background: #fff; }
.section-light { padding: 90px 0; background: #f6f8f9; }
.section-blue  { padding: 90px 0; background: var(--blue); color: #fff; }
.section-blue .sec-title { color: #fff; }
.section-blue .eyebrow { color: var(--gold); }

/* Shared call-to-action band (home, service detail, ...) */
.cta-band { background: linear-gradient(120deg, var(--blue-deep) 0%, var(--blue) 100%); color: #fff; padding: 60px 0; text-align: center; }
.cta-band h2 { color: #fff; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 14px; }
.cta-band p { color: rgba(255,255,255,.8); max-width: 640px; margin: 0 auto 26px; }
/* Nhiều nút trong band: căn giữa, tự xuống dòng đều nhau trên mobile. */
.cta-band .btn-row { justify-content: center; margin-top: 0; }

/* =========================================================
   WHY CHOOSE US — icon cards (dùng chung Home + About; mặc định 3/hàng, .why-grid-4 = 4/hàng)
   ========================================================= */
.why-us .why-head { max-width: 720px; margin: 0 auto; }
.why-us .why-head .lead { color: var(--gray); margin-top: 8px; }

/* Flex thay vì grid: 3 card/hàng như cũ, nhưng hàng cuối thiếu card thì tự căn giữa
   thay vì dồn trái (grid không làm được). flex-basis = đúng bề rộng cột grid cũ. */
.why-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
    margin-top: 50px;
}
.why-card {
    flex: 0 1 calc((100% - 52px) / 3);
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 40px 30px 34px;
    overflow: hidden;
    perspective: 620px;
    box-shadow: 0 22px 44px -20px rgba(3,40,54,0);
    transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow 1.05s cubic-bezier(.22,.61,.36,1), border-color .5s ease;
}
.why-card::before {
    content: ""; position: absolute; left: 0; top: 0;
    height: 3px; width: 0; background: var(--gold);
    transition: width .5s ease;
}
.why-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 44px -20px rgba(3,40,54,.4);
    border-color: transparent;
}
.why-card:hover::before { width: 100%; }

.why-ico {
    position: relative;
    width: 68px; height: 68px; border-radius: 50%;
    display: grid; place-items: center;
    margin-bottom: 24px;
    background: var(--blue-deep); color: var(--gold);
    font-size: 26px;
    box-shadow: 0 0 0 7px rgba(4,95,128,.07);
    transition: transform .6s cubic-bezier(.4,.2,.2,1), background .4s ease, box-shadow .4s ease;
}
.why-card:hover .why-ico {
    transform: rotateY(360deg);
    background: var(--blue);
    box-shadow: 0 0 0 7px rgba(245,182,28,.16);
}
.why-card h3 {
    font-size: 18px; line-height: 1.4;
    text-transform: uppercase; letter-spacing: .3px;
    color: var(--blue-deep); font-weight: 600;
    margin: 0 0 10px;
}
.why-card p {
    color: var(--gray); font-size: 14.5px; line-height: 1.75; margin: 0;
}

/* .why-grid-5 (About) đã bỏ: .why-grid nay tự căn giữa hàng cuối cho mọi số card. */

/* Đúng 4 card -> 1 hàng 4 cột. Từ 5 card trở lên KHÔNG gắn class này -> giữ mặc định
   3/hàng (hàng cuối tự căn giữa). View gắn class theo số card; hiện chỉ About dùng,
   Home gắn thêm được nếu cần. 78px = 3 gap × 26px. */
.why-grid-4 .why-card { flex: 0 1 calc((100% - 78px) / 4); }

/* 4 cột hẹp dần -> dưới 1100px chuyển 2×2 (card 4 cột ở đây chỉ còn ~190px, tiêu đề vỡ dòng). */
@media (max-width: 1100px) {
    .why-grid-4 .why-card { flex-basis: calc((100% - 26px) / 2); }
}
@media (max-width: 900px) {
    .why-grid { gap: 20px; }
    /* .why-grid-4 .why-card có specificity cao hơn .why-card -> phải kể tên, không thì không đè được. */
    .why-card,
    .why-grid-4 .why-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 560px) {
    .why-card,
    .why-grid-4 .why-card { flex-basis: 100%; }
}

/* =========================================================
   SHARED CONTENT COMPONENTS (used across several pages)
   ========================================================= */
/* Side image (About intro, Our Airline intro) */
.airline-img { width: 100%; border-radius: 4px; box-shadow: 0 18px 50px rgba(0,0,0,.18); }

/* Dark highlight box (About team, Our Airline future) */
.team-box { background: var(--blue-deep); color: #fff; padding: 40px 42px; margin-top: 34px; }
.team-box h3 { color: #fff; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 16px; }
.team-box p { color: rgba(255,255,255,.8); }

/* Stats band (About, Services, Our Airline) */
.stats { padding: 80px 0; background: var(--blue-deep); }
.stat-item { text-align: center; color: #fff; }
.stat-item i { font-size: 36px; color: var(--gold); margin-bottom: 14px; }
.stat-item .num { font-family: 'Oswald', sans-serif; font-size: 54px; font-weight: 600; line-height: 1; margin-bottom: 8px; }
.stat-item .stat-label { text-transform: uppercase; letter-spacing: 1.5px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.85); }
@media (max-width: 991px) {
    .stats { padding: 56px 0; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--blue); color: rgba(255,255,255,.78); padding: 60px 0 30px; border-top: 3px solid var(--gold); }
.foot-cols { display: flex; flex-wrap: wrap; gap: 30px; }
.foot-cols .fcol { flex: 1 1 220px; }
.foot-brand img { height: 115px; width: auto; margin-bottom: 16px; }
.foot-brand p { font-size: 14px; color: rgba(255,255,255,.7); }
.widget-title {
    color: var(--gold); font-family: 'Oswald', sans-serif; text-transform: uppercase;
    letter-spacing: 1.5px; font-size: 17px; font-weight: 500; margin: 0 0 16px;
    padding-bottom: 10px; position: relative;
}
.widget-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 2px; background: var(--gold); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 9px; }
.site-footer ul li a { color: rgba(255,255,255,.72); font-size: 14px; transition: color .2s ease, padding-left .2s ease; }
.site-footer ul li a:hover { color: var(--gold); padding-left: 5px; }
.foot-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin-bottom: 12px; }
.foot-contact li i { color: var(--gold); margin-top: 4px; }

.copyright { background: var(--blue-deep); color: rgba(255,255,255,.6); padding: 16px 0; font-size: 13px; }
.copyright .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.copyright a { color: rgba(255,255,255,.6); }
.copyright a:hover { color: var(--gold); }
.copyright .social a { margin-left: 12px; font-size: 16px; }

/* back to top */
.to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 900;
    width: 44px; height: 44px; border-radius: 3px;
    background: var(--gold); color: var(--blue-deep);
    display: none; align-items: center; justify-content: center; font-size: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer;
}
.to-top.show { display: flex; }

/* =========================================================
   FIXED UI WIDGETS (scroll progress, quote tab, contact FAB, cookie bar)
   ========================================================= */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--gold); z-index: 1100; transition: width .1s linear; }

.quote-tab {
    position: fixed; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 950; background: var(--gold); color: var(--blue-deep);
    font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 2px;
    font-size: 12px; font-weight: 600; padding: 16px 10px 16px 8px;
    writing-mode: vertical-rl; border-radius: 6px 0 0 6px;
    box-shadow: -3px 4px 14px rgba(0,0,0,.22);
    display: flex; align-items: center; gap: 10px;
    transition: padding-right .2s ease, background .2s ease;
    animation: quoteGlow 3s ease-in-out infinite;
}
.quote-tab i { transform: rotate(90deg); }
.quote-tab:hover { padding-right: 16px; background: var(--gold-bright); animation-play-state: paused; }
@keyframes quoteGlow {
    0%, 100% { box-shadow: -3px 4px 14px rgba(0,0,0,.22), 0 0 0 0 rgba(245,182,28,0); }
    50%      { box-shadow: -3px 4px 14px rgba(0,0,0,.22), 0 0 16px 2px rgba(245,182,28,.6); }
}

.fab-contact {
    position: fixed; left: 22px; bottom: 22px; z-index: 950;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--blue); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
    transition: transform .2s ease, background .2s ease, bottom .4s ease;
}
.fab-contact:hover { transform: translateY(-3px) scale(1.05); background: var(--blue-dark); }
.cookie-open .fab-contact, .cookie-open .to-top { bottom: 90px; }
.fab-contact::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--blue); animation: fabPulse 2s infinite; }
@keyframes fabPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.55); opacity: 0; } }

.cookie-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    background: var(--blue-deep); color: rgba(255,255,255,.85);
    padding: 14px 22px; display: flex; align-items: center; justify-content: center;
    gap: 18px; flex-wrap: wrap; font-size: 14px;
    box-shadow: 0 -4px 18px rgba(0,0,0,.25);
    transform: translateY(110%); transition: transform .4s ease;
}
.cookie-bar.show { transform: translateY(0); }
.cookie-actions { display: flex; gap: 10px; align-items: center; }
.cookie-accept {
    background: var(--gold); border: 1px solid var(--gold); color: var(--blue-deep);
    font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px;
    font-size: 12px; padding: 9px 20px; cursor: pointer; border-radius: 2px; transition: background .2s ease, color .2s ease;
}
.cookie-accept:hover { background: transparent; color: var(--gold); }
.cookie-reject {
    background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff;
    font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px;
    font-size: 12px; padding: 9px 18px; cursor: pointer; border-radius: 2px; transition: border-color .2s ease, color .2s ease;
}
.cookie-reject:hover { border-color: var(--gold); color: var(--gold); }

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader {
    position: fixed; inset: 0; z-index: 3000;
    background: var(--blue-deep);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .5s ease, visibility .5s ease;
}
.pre-inner { position: relative; width: 230px; height: 230px; display: grid; place-items: center; }
.preloader img { width: 138px; height: auto; animation: pulse 1.8s ease-in-out infinite; }
.pre-ring {
    position: absolute; top: 50%; left: 50%; width: 206px; height: 206px;
    transform: translate(-50%,-50%); border-radius: 50%;
    border: 1.5px dashed rgba(245,182,28,.35);
}
.pre-orbit {
    position: absolute; top: 50%; left: 50%; width: 206px; height: 206px;
    transform: translate(-50%,-50%);
    animation-name: preSpin; animation-duration: 2s;
    animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes preSpin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
.pre-plane {
    position: absolute; top: 0; left: 50%;
    color: var(--gold); font-size: 22px;
    transform: translate(-50%,-50%);
    text-shadow: 0 0 12px rgba(245,182,28,.55);
}
.preloader.hide { opacity: 0; visibility: hidden; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }

/* =========================================================
   ANIMATION BASE (activated only when JS adds .anim to <html>)
   Per-page reveal overrides live in the page CSS.
   ========================================================= */
.anim .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.anim .reveal-zoom { opacity: 0; transform: scale(1.06); transition: opacity .8s ease, transform .8s ease; }
.anim .reveal.in, .anim .reveal-zoom.in { opacity: 1; transform: none; }

/* Inner-page banner staggered entrance */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.anim .page-banner > * { opacity: 0; animation: fadeUp .8s ease forwards; }
.anim .page-banner .breadcrumb   { animation-delay: .05s; }
.anim .page-banner h1            { animation-delay: .15s; }
.anim .page-banner p             { animation-delay: .34s; }
.anim .page-banner .banner-scroll{ animation-delay: .5s; }

/* Ken Burns slow zoom on banner background */
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
.anim .page-banner::before {
    animation: kenburns 26s ease-in-out infinite alternate;
    transform-origin: center;
}

/* =========================================================
   RESPONSIVE (shared: header, grid, section padding, copyright)
   ========================================================= */

/* ---------------------------------------------------------
   HEADER — laptop / smaller-desktop scaling (Full HD is the
   baseline; below it the nav is progressively tightened so the
   9-item menu + language switch never crowd the logo). Desktop
   only (>=992px); the mobile menu below is untouched.
   The logo keeps its aspect ratio via .brand{flex-shrink:0};
   here we shrink the *menu* footprint, not the logo.
   --------------------------------------------------------- */

/* Tier A — large laptops (1440 / 1536 / 1600 / 1680) */
@media (min-width: 992px) and (max-width: 1680px) {
    .site-header { padding: 14px 30px; gap: 26px; }
    .site-header.scrolled { padding: 6px 30px; }
    .header-right { gap: 24px; }
    .main-nav { gap: 26px; }
    .main-nav a { font-size: 15px; letter-spacing: 0.8px; }
    .lang-toggle { font-size: 12.5px; letter-spacing: 0.8px; }
}

/* Tier B — standard laptops (1366 / 1280) */
@media (min-width: 992px) and (max-width: 1400px) {
    .site-header { padding: 13px 24px; gap: 20px; }
    .site-header.scrolled { padding: 6px 24px; }
    .header-right { gap: 18px; }
    .main-nav { gap: 18px; }
    .main-nav a { font-size: 13.5px; letter-spacing: 0.4px; }
    .lang-toggle { font-size: 12px; letter-spacing: 0.4px; padding: 5px 13px; }
    .lang-toggle .fi { font-size: 14px; }
}

/* Tier C — cramped small desktops (1024–1200); logo scales down a
   notch proportionally so the row still fits before the mobile menu. */
@media (min-width: 992px) and (max-width: 1200px) {
    .site-header { padding: 12px 18px; gap: 16px; }
    .site-header.scrolled { padding: 6px 18px; }
    .brand img { height: 70px; }
    .site-header.scrolled .brand img { height: 44px; }
    .header-right { gap: 14px; }
    .main-nav { gap: 13px; }
    .main-nav a { font-size: 12.5px; letter-spacing: 0.3px; }
    .lang-toggle { font-size: 11.5px; letter-spacing: 0.3px; padding: 5px 12px; }
}

@media (max-width: 991px) {
    .site-header { padding: 12px 20px; gap: 14px; }
    .site-header.scrolled { padding: 8px 20px; }
    .burger { display: block; order: 0; margin-left: 0; margin-right: auto; }
    .header-right { gap: 14px; }
    .main-nav {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: flex-start; gap: 0;
        background: var(--blue-deep); padding: 0 24px;
        max-height: 0; overflow: hidden;
        transition: max-height .35s ease, padding .35s ease;
    }
    .site-header.nav-open .main-nav { max-height: 85vh; padding: 12px 24px; overflow-y: auto; }
    .main-nav li { width: 100%; }
    .main-nav a { display: block; padding: 12px 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); }

    /* parent item spans full width; caret sits at the right as a "has children" hint */
    .main-nav .has-sub > a { display: flex; width: 100%; justify-content: space-between; align-items: center; }

    /* submenus expand inline inside the mobile dropdown */
    .sub-nav {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; background: transparent; border: 0; border-radius: 0;
        padding: 0 0 6px 16px; min-width: 0;
    }
    .sub-nav::before { display: none; }
    .sub-nav a { color: rgba(255,255,255,.7); padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); box-shadow: none; }
    .sub-nav a:hover, .sub-nav a.active { background: transparent; color: var(--gold); box-shadow: none; }

    /* language switcher stays inline in the header bar on mobile */
    .lang-menu { position: absolute; }

    .col-6, .col-5, .col-7, .col-4 { width: 100%; }
    .section-white, .section-light, .section-blue { padding: 56px 0; }

    .copyright .container { flex-direction: column; text-align: center; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .anim .reveal, .anim .reveal-zoom { opacity: 1 !important; transform: none !important; transition: none !important; }
    .anim .page-banner > * { opacity: 1 !important; animation: none !important; }
    .anim .page-banner::before { animation: none !important; }
    .btn:hover { transform: none; }
    .preloader { display: none !important; }
    .quote-tab { animation: none !important; }
    .fab-contact::after { animation: none; }
    .scroll-progress { transition: none; }
}

/* =========================================================
   FLIGHT NETWORK (route map) — Home + Airline detail
   ========================================================= */
.flight-network .fn-head { max-width: 760px; margin: 0 auto; }
.flight-network .fn-head .lead { color: var(--gray); margin-top: 8px; }
.fn-arrow { color: var(--gold); font-weight: 400; margin: 0 5px; }

.fn-map-card {
    --afm-bg: var(--blue-deep);
    position: relative;
    margin-top: 42px;
    padding: 22px 22px 16px;
    border-radius: 14px;
    border: 1px solid rgba(245,182,28,.16);
    background: var(--afm-bg);
    background: radial-gradient(130% 150% at 50% -10%,
        color-mix(in srgb, var(--afm-bg) 92%, #ffffff) 0%,
        var(--afm-bg) 58%,
        color-mix(in srgb, var(--afm-bg) 62%, #000000) 100%);
    box-shadow: 0 34px 64px -34px rgba(3,40,54,.7);
    overflow: hidden;
}

.fn-map-card,
.fn-map-card .afm {
    --afm-accent: var(--gold);
    --afm-cool: #8fe0f2;
    --afm-star-stroke: #fff3d2;
}

.fn-map-card .afm {
    --afm-land: #0c4a63;
    --afm-cool-arc: #74cfe8;
    --afm-dom: #ffd873;
}

.fn-legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; margin: 16px 0 2px; padding: 0; }
.fn-legend li { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.78); font-size: 13px; }
.fn-key { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fn-key-hub { width: 13px; height: 13px; }
.fn-key-hub svg { width: 13px; height: 13px; display: block; }
.fn-key-hub polygon { fill: var(--afm-accent); stroke: var(--afm-star-stroke); stroke-width: .5; }
.fn-key-gateway { width: 11px; height: 11px; border-radius: 50%; background: var(--afm-cool); }
.fn-key-destination { width: 8px; height: 8px; border-radius: 50%; background: var(--afm-accent); }