:root {
    --navy-950: #020817;
    --navy-900: #06152f;
    --navy-800: #0a2042;
    --navy-700: #0d2d58;
    --blue: #1677e8;
    --blue-2: #2299ff;
    --cyan: #42d8ff;
    --cyan-soft: #a9efff;
    --white: #ffffff;
    --text: #13243b;
    --muted: #65748a;
    --surface: #f4f8fc;
    --border: rgba(13,45,88,.10);
    --shadow: 0 24px 70px rgba(2,20,48,.12);
    --radius: 26px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Tajawal", sans-serif;
    background: #fff;
    color: var(--text);
    line-height: 1.8;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

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

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: .35s ease;
}

.site-header.scrolled {
    background: rgba(3,15,34,.90);
    backdrop-filter: blur(18px);
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
}

.navbar {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    direction: ltr;
}

.brand-mark {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(49,183,255,.20), rgba(20,100,220,.15));
    box-shadow: inset 0 0 25px rgba(66,216,255,.10);
}

.brand-mark img {
    width: 37px;
    height: 37px;
    object-fit: contain;
    display: block;
}

.brand-text {
    line-height: 1.15;
}

.brand-text strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
}

.brand-text small {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 9px;
    color: #8fcfff;
    letter-spacing: 1.5px;
    margin-top: 3px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
}

.nav-links a {
    color: rgba(255,255,255,.78);
    font-size: 14px;
    font-weight: 600;
    transition: .25s ease;
}

.nav-links a:hover {
    color: #fff;
}

.nav-cta {
    padding: 11px 19px !important;
    border: 1px solid rgba(66,216,255,.45);
    border-radius: 12px;
    color: #fff !important;
    background: rgba(31,137,236,.15);
}

.menu-btn {
    display: none;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
    font-size: 21px;
}

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

.hero {
    position: relative;
    min-height: 780px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 20%, rgba(36,159,255,.23), transparent 30%),
        radial-gradient(circle at 15% 80%, rgba(40,215,255,.10), transparent 28%),
        linear-gradient(135deg, #020817 0%, #061a39 52%, #082e5b 100%);
    color: #fff;
}

.hero::before {
    content: "";
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    border: 1px solid rgba(77,203,255,.12);
    left: -300px;
    bottom: -450px;
}

.hero::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    border: 1px solid rgba(77,203,255,.08);
    right: -220px;
    top: -260px;
}

.hero-grid {
    position: absolute;
    inset: 0;
    opacity: .10;
    background-image:
        linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 140px 0 100px;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 80px;
    align-items: center;
}

.hero-copy {
    max-width: 720px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid rgba(91,211,255,.25);
    background: rgba(32,139,231,.10);
    border-radius: 999px;
    color: #a9eaff;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 24px;
}

.eyebrow i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 14px var(--cyan);
}

.hero h1 {
    font-size: clamp(43px, 5vw, 72px);
    line-height: 1.15;
    letter-spacing: -2px;
    font-weight: 900;
    margin-bottom: 22px;
}

.hero h1 span {
    display: block;
    background: linear-gradient(90deg, #fff, #79dcff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-description {
    color: rgba(255,255,255,.72);
    font-size: 17px;
    line-height: 2.05;
    max-width: 650px;
    margin-bottom: 34px;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 23px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    transition: transform .25s, box-shadow .25s, background .25s;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: linear-gradient(135deg, #1685ef, #1caef4);
    color: #fff;
    box-shadow: 0 12px 35px rgba(22,133,239,.25);
}

.btn-secondary {
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
}

.hero-visual {
    position: relative;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbit {
    position: absolute;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(91,211,255,.17);
    border-radius: 50%;
}

.orbit::before {
    content: "";
    position: absolute;
    inset: 40px;
    border: 1px solid rgba(91,211,255,.13);
    border-radius: 50%;
}

.sky-emblem {
    position: relative;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 40% 30%, rgba(93,220,255,.30), transparent 35%),
        linear-gradient(145deg, #0c417b, #071a3a);
    border: 1px solid rgba(130,230,255,.24);
    box-shadow:
        0 0 80px rgba(26,154,242,.18),
        inset 0 0 60px rgba(19,135,224,.16);
}

.sky-emblem::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    border: 1px dashed rgba(112,221,255,.18);
}

.hero-logo {
    position: relative;
    z-index: 2;
    width: 175px;
    max-width: 70%;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 25px rgba(0,0,0,.25));
}

.sky-sub {
    position: absolute;
    bottom: 74px;
    font-family: Inter, sans-serif;
    color: #79dfff;
    font-size: 10px;
    letter-spacing: 3px;
    font-weight: 700;
}

.float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    background: rgba(7,27,58,.72);
    border: 1px solid rgba(117,218,255,.18);
    backdrop-filter: blur(15px);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.20);
}

.float-card strong {
    display: block;
    font-size: 12px;
}

.float-card small {
    display: block;
    color: #7fb0cf;
    font-size: 9px;
    font-family: Inter, sans-serif;
}

.float-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(36,158,244,.15);
    color: #6fddff;
}

.float-one {
    top: 34px;
    right: 0;
}

.float-two {
    bottom: 38px;
    left: 0;
}

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

.section {
    padding: 105px 0;
}

.section-soft {
    background: var(--surface);
}

.section-dark {
    background: var(--navy-900);
    color: #fff;
}

.section-head {
    max-width: 720px;
    margin-bottom: 55px;
}

.section-head.center {
    margin-inline: auto;
    text-align: center;
}

.section-kicker {
    color: var(--blue);
    font-family: Inter, "Tajawal", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.section-dark .section-kicker {
    color: var(--cyan);
}

.section-head h2 {
    font-size: clamp(31px, 4vw, 47px);
    line-height: 1.3;
    letter-spacing: -.8px;
    margin-bottom: 16px;
    font-weight: 900;
}

.section-head p {
    color: var(--muted);
    font-size: 15px;
    line-height: 2;
}

.section-dark .section-head p {
    color: rgba(255,255,255,.63);
}

/* =========================
   ABOUT
========================= */

.about-grid {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 80px;
    align-items: center;
}

.about-visual {
    position: relative;
    min-height: 450px;
}

.about-panel {
    position: absolute;
    inset: 20px 20px 20px 0;
    border-radius: 35px;
    background:
        radial-gradient(circle at 30% 20%, rgba(63,196,255,.25), transparent 30%),
        linear-gradient(145deg, #071b3a, #0a3769);
    overflow: hidden;
}

.about-panel::after {
    content: "SKY";
    position: absolute;
    left: -25px;
    bottom: -40px;
    font-family: Inter, sans-serif;
    font-size: 170px;
    font-weight: 900;
    letter-spacing: -14px;
    color: rgba(255,255,255,.035);
}

.about-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(120deg, transparent 48%, rgba(81,211,255,.10) 49%, transparent 50%),
        linear-gradient(30deg, transparent 48%, rgba(81,211,255,.08) 49%, transparent 50%);
    background-size: 160px 160px;
}

.about-stat {
    position: absolute;
    bottom: 38px;
    right: 38px;
    left: 38px;
    padding: 25px;
    border-radius: 20px;
    background: rgba(2,12,29,.52);
    border: 1px solid rgba(120,221,255,.15);
    backdrop-filter: blur(12px);
}

.about-stat strong {
    font-size: 19px;
    color: #fff;
}

.about-stat span {
    display: block;
    color: #8ccce8;
    font-size: 12px;
    margin-top: 3px;
}

.about-copy h3 {
    font-size: 28px;
    margin-bottom: 17px;
    line-height: 1.5;
}

.about-copy > p {
    color: var(--muted);
    font-size: 15px;
    line-height: 2.1;
}

.info-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px;
    margin-top: 28px;
}

.info-card {
    padding: 23px;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(8,42,80,.05);
}

.info-card .mini-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin-bottom: 13px;
    color: var(--blue);
    background: #eaf5ff;
    font-weight: 800;
}

.info-card h4 {
    font-size: 16px;
    margin-bottom: 7px;
}

.info-card p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.9;
}

/* =========================
   VISION / MISSION
========================= */

.vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.vm-card {
    position: relative;
    overflow: hidden;
    padding: 42px;
    min-height: 300px;
    border-radius: 28px;
    background: linear-gradient(145deg, #0b2951, #071a37);
    border: 1px solid rgba(103,211,255,.14);
}

.vm-card::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px solid rgba(92,214,255,.10);
    top: -110px;
    left: -80px;
}

.vm-card .vm-number {
    font-family: Inter, sans-serif;
    color: #58d6ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.vm-card h3 {
    font-size: 27px;
    margin: 22px 0 15px;
}

.vm-card p {
    color: rgba(255,255,255,.68);
    font-size: 14px;
    line-height: 2.1;
    max-width: 530px;
}

/* =========================
   TRAINING FIELDS
========================= */

#fields {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 5% 20%, rgba(25,135,240,.07), transparent 28%),
        radial-gradient(circle at 95% 80%, rgba(64,216,255,.07), transparent 28%),
        #f7fbff;
}

#fields::before {
    content: "SKY";
    position: absolute;
    top: 20px;
    left: -25px;
    font-family: Inter, sans-serif;
    font-size: 190px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -16px;
    color: rgba(10,66,130,.025);
    pointer-events: none;
}

#fields .container {
    position: relative;
    z-index: 1;
}

.fields-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.field-card {
    position: relative;
    min-height: 295px;
    padding: 25px;
    border-radius: 24px;
    border: 1px solid rgba(9,67,126,.10);
    background: rgba(255,255,255,.88);
    box-shadow:
        0 12px 35px rgba(8,54,105,.055),
        inset 0 1px 0 rgba(255,255,255,.9);
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.field-card::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    top: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(35,154,242,.14), transparent 68%);
    transition: transform .45s ease;
    z-index: -1;
}

.field-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: linear-gradient(90deg, #147cf0, #42d8ff);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s ease;
}

.field-card:hover {
    transform: translateY(-9px);
    border-color: rgba(22,119,232,.32);
    background: #fff;
    box-shadow:
        0 25px 60px rgba(8,70,135,.13),
        0 0 0 1px rgba(22,119,232,.04);
}

.field-card:hover::before {
    transform: scale(1.5);
}

.field-card:hover::after {
    transform: scaleX(1);
}

.field-card.featured {
    border-color: rgba(22,119,232,.42);
    box-shadow:
        0 20px 55px rgba(22,119,232,.12),
        0 0 0 1px rgba(22,119,232,.05);
}

.field-number {
    position: absolute;
    top: 22px;
    right: 24px;
    font-family: Inter, sans-serif;
    color: #b9d1e7;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    transition: color .3s ease;
}

.field-card:hover .field-number {
    color: #1684ed;
}

.field-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    margin-top: 38px;
    margin-bottom: 24px;
    color: #fff;
    background: linear-gradient(145deg, #1685ef, #27b6f5);
    box-shadow:
        0 12px 25px rgba(22,133,239,.20),
        inset 0 1px 0 rgba(255,255,255,.28);
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-radius .35s ease;
}

.field-card:nth-child(4n+4) .field-icon {
    background: linear-gradient(145deg, #3949db, #6759f4);
}

.field-card:nth-child(4n+5) .field-icon {
    background: linear-gradient(145deg, #e52f84, #f05aa5);
}

.field-card:nth-child(4n+6) .field-icon {
    background: linear-gradient(145deg, #00ae83, #19c99d);
}

.field-card:nth-child(4n+7) .field-icon {
    background: linear-gradient(145deg, #ef9a14, #f5b92d);
}

.field-card:nth-child(4n+8) .field-icon {
    background: linear-gradient(145deg, #09b9cc, #29d3dd);
}

.field-card:hover .field-icon {
    transform: translateY(-5px) rotate(-3deg) scale(1.06);
    border-radius: 20px;
    box-shadow:
        0 18px 35px rgba(22,133,239,.27),
        inset 0 1px 0 rgba(255,255,255,.35);
}

.field-icon svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.field-content {
    padding-right: 2px;
}

.field-card h3 {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 1px;
    color: #071a35;
    font-weight: 800;
}

.field-card small {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 10px;
    color: #7890a9;
    letter-spacing: .3px;
    margin-bottom: 11px;
}

.field-description {
    color: #718197;
    font-size: 11px;
    line-height: 1.9;
    max-width: 230px;
}

.field-link {
    position: absolute;
    left: 23px;
    bottom: 21px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #147cf0;
    font-size: 11px;
    font-weight: 800;
    transition: gap .3s ease;
}

.field-link span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eaf5ff;
    font-size: 16px;
    line-height: 1;
    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}

.field-card:hover .field-link {
    gap: 12px;
}

.field-card:hover .field-link span {
    background: #147cf0;
    color: #fff;
    transform: translateX(-2px);
}

/* ===== CENTER ALIGNMENT — TRAINING FIELDS ===== */

.fields-grid {
    justify-items: stretch;
}

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

.field-number {
    right: 24px;
    left: 24px;
    text-align: center;
}

.field-icon {
    margin: 38px auto 24px;
}

.field-content {
    padding: 0;
}

.field-card h3,
.field-card small,
.field-description {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.field-description {
    max-width: 220px;
}

.field-link {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    justify-content: center;
    white-space: nowrap;
}

.field-card:hover .field-link {
    gap: 12px;
    transform: translateX(-50%);
}

@media (max-width: 460px) {
    .field-number {
        right: 20px;
        left: 20px;
    }

    .field-description {
        max-width: 260px;
    }
}

/* =========================
   GOALS
========================= */


.goals-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.10);
}

.goal {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 22px;
    padding: 28px 25px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.goal:nth-child(odd) {
    border-left: 1px solid rgba(255,255,255,.10);
}

.goal-number {
    font-family: Inter, sans-serif;
    color: #54d8ff;
    font-size: 12px;
    font-weight: 800;
    padding-top: 4px;
}

.goal h3 {
    font-size: 16px;
    margin-bottom: 7px;
}

.goal p {
    color: rgba(255,255,255,.57);
    font-size: 12px;
    line-height: 2;
}

/* =========================
   AUDIENCE
========================= */

.audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.audience-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 23px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 19px;
    transition: .25s ease;
}

.audience-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(7,52,100,.08);
}

.audience-icon {
    flex: 0 0 49px;
    width: 49px;
    height: 49px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #edf7ff;
    color: var(--blue);
    font-size: 19px;
}

.audience-card h3 {
    font-size: 14px;
    line-height: 1.6;
}

.audience-card small {
    display: block;
    color: #8a9bad;
    font-family: Inter, sans-serif;
    font-size: 9px;
    margin-top: 2px;
}

/* =========================
   CORPORATE CTA
========================= */

.cta-section {
    padding: 95px 0;
    background:
        radial-gradient(circle at 80% 50%, rgba(50,190,255,.18), transparent 30%),
        linear-gradient(135deg, #06172f, #0b3970);
    color: #fff;
    overflow: hidden;
}

.cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.cta-copy {
    max-width: 700px;
}

.cta-copy .section-kicker {
    color: var(--cyan);
}

.cta-copy h2 {
    font-size: clamp(31px, 4vw, 48px);
    line-height: 1.35;
    margin-bottom: 14px;
}

.cta-copy p {
    color: rgba(255,255,255,.65);
    font-size: 14px;
    line-height: 2;
}

.cta-actions {
    flex: 0 0 auto;
}

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

.contact-grid {
    display: grid;
    grid-template-columns: 1fr .85fr;
    gap: 60px;
    align-items: start;
}

.contact-items {
    display: grid;
    gap: 13px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 19px;
    border: 1px solid var(--border);
    border-radius: 17px;
}

.contact-icon {
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #eaf6ff;
    color: var(--blue);
    font-size: 17px;
}

.contact-item strong {
    display: block;
    font-size: 13px;
}

.contact-item span,
.contact-item a {
    display: block;
    color: var(--muted);
    font-size: 12px;
    direction: ltr;
    text-align: right;
}

.contact-card {
    padding: 34px;
    border-radius: 27px;
    background: linear-gradient(145deg, #06182f, #0a3566);
    color: #fff;
    min-height: 300px;
    position: relative;
    overflow: hidden;
}

.contact-card::after {
    content: "SKY";
    position: absolute;
    left: -15px;
    bottom: -30px;
    font-family: Inter, sans-serif;
    font-size: 110px;
    font-weight: 900;
    letter-spacing: -9px;
    color: rgba(255,255,255,.04);
}

.contact-card h3 {
    font-size: 22px;
    margin-bottom: 12px;
}

.contact-card p {
    color: rgba(255,255,255,.60);
    font-size: 13px;
    line-height: 2;
    max-width: 400px;
}

.contact-card .contact-btn {
    margin-top: 28px;
    position: relative;
    z-index: 2;
}

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

footer {
    background: #020817;
    color: #fff;
    padding: 38px 0;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-logo img {
    width: 72px;
    height: auto;
    display: block;
    object-fit: contain;
}

.footer-brand span {
    color: #7b9bb8;
    font-size: 10px;
}

.footer-copy {
    color: #617a94;
    font-size: 10px;
}

/* =========================
   WHATSAPP
========================= */

.whatsapp-float {
    position: fixed;
    left: 23px;
    bottom: 23px;
    z-index: 999;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #19c66a;
    color: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,.20);
    transition: .25s ease;
}

.whatsapp-float:hover {
    transform: translateY(-4px) scale(1.03);
}

/* =========================
   REVEAL
========================= */

.reveal {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1000px) {
    .nav-links {
        gap: 16px;
    }

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 35px;
    }

    .hero-copy {
        margin-inline: auto;
    }

    .hero-description {
        margin-inline: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-visual {
        height: 360px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-visual {
        min-height: 380px;
    }

    .fields-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .container {
        width: min(100% - 28px, 600px);
    }

    .navbar {
        height: 72px;
    }

    .menu-btn {
        display: grid;
        place-items: center;
    }

    .nav-links {
        position: fixed;
        top: 72px;
        right: 14px;
        left: 14px;
        padding: 18px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        border-radius: 18px;
        background: rgba(3,15,34,.97);
        border: 1px solid rgba(255,255,255,.10);
        box-shadow: 0 20px 50px rgba(0,0,0,.30);
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links a {
        display: block;
        padding: 11px 12px;
    }

    .hero {
        min-height: auto;
    }

    .hero-content {
        padding: 125px 0 75px;
    }

    .hero h1 {
        font-size: 43px;
        letter-spacing: -1.5px;
    }

    .hero-description {
        font-size: 14px;
    }

    .hero-visual {
        height: 300px;
    }

    .orbit {
        width: 275px;
        height: 275px;
    }

    .sky-emblem {
        width: 195px;
        height: 195px;
    }

    .sky-emblem::before {
        width: 150px;
        height: 150px;
    }

    .hero-logo {
        width: 130px;
    }

    .sky-sub {
        bottom: 51px;
        font-size: 7px;
    }

    .float-card {
        transform: scale(.85);
    }

    .float-one {
        top: 15px;
        right: -5px;
    }

    .float-two {
        bottom: 10px;
        left: -5px;
    }

    .section {
        padding: 75px 0;
    }

    .vm-grid,
    .goals-list {
        grid-template-columns: 1fr;
    }

    .goal:nth-child(odd) {
        border-left: 0;
    }

    .fields-grid {
        grid-template-columns: 1fr 1fr;
    }

    .audience-grid {
        grid-template-columns: 1fr;
    }

    .info-cards {
        grid-template-columns: 1fr;
    }

    .cta-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 460px) {
    .fields-grid {
        grid-template-columns: 1fr;
    }

    .field-card {
        min-height: 190px;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .vm-card {
        padding: 28px;
    }

    .goal {
        grid-template-columns: 42px 1fr;
        gap: 10px;
        padding-inline: 0;
    }
}

/* =========================================================
   ABOUT CUSTOM IMAGE
   ========================================================= */

.about-custom-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    z-index: 1;
}

.about-panel .about-lines {
    z-index: 2;
    pointer-events: none;
}

.about-panel .about-stat {
    z-index: 3;
}


/* =========================================================
   ABOUT TWO IMAGE SLIDER
   ========================================================= */

.about-image-slider {
    position: relative;
    overflow: hidden;
}

.about-custom-image.about-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transform: scale(1.02);
    transition:
        opacity .8s ease,
        transform 5s ease;
}

.about-custom-image.about-slide.active {
    opacity: 1;
    transform: scale(1);
}

.about-panel .about-lines {
    z-index: 3;
    pointer-events: none;
}

.about-panel .about-stat {
    z-index: 4;
}

.about-slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.94);
    color: #0a3769;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s ease;
}

.about-slider-arrow:hover {
    transform: translateY(-50%) scale(1.08);
}

.about-slider-prev {
    left: 18px;
}

.about-slider-next {
    right: 18px;
}

.about-slider-dots {
    position: absolute;
    z-index: 6;
    bottom: 17px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
}

.about-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    cursor: pointer;
    transition: .25s ease;
}

.about-dot.active {
    width: 24px;
    border-radius: 8px;
    background: #fff;
}

@media (max-width: 700px) {

    .about-slider-arrow {
        width: 36px;
        height: 36px;
        font-size: 25px;
    }

    .about-slider-prev {
        left: 10px;
    }

    .about-slider-next {
        right: 10px;
    }
}




/* =========================================================
   FINAL RESPONSIVE FIX — TRAINING FIELDS
========================================================= */

/* Section heading */
#fields .section-head {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#fields .section-head h2 {
    text-align: center;
}

#fields .section-head p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 680px;
}

/* Desktop cards */
#fields .field-card {
    text-align: center;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#fields .field-number {
    top: 21px;
    right: 0;
    left: 0;
    text-align: center;
}

#fields .field-icon {
    flex: 0 0 auto;
    margin: 38px auto 20px;
}

#fields .field-content {
    width: 100%;
    text-align: center;
}

#fields .field-card h3 {
    text-align: center;
    margin: 0 auto 2px;
}

#fields .field-card small {
    text-align: center;
    margin: 0 auto 10px;
}

#fields .field-description {
    text-align: center;
    margin: 0 auto;
    max-width: 230px;
}

#fields .field-link {
    position: static;
    transform: none;
    margin-top: auto;
    padding-top: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

#fields .field-card:hover .field-link {
    transform: none;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 760px) {

    #fields {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    #fields .section-head {
        width: 100%;
        margin-bottom: 38px;
        text-align: center;
    }

    #fields .section-head h2 {
        text-align: center;
        font-size: 30px;
        line-height: 1.45;
        margin-bottom: 12px;
    }

    #fields .section-head p {
        text-align: center;
        font-size: 13px;
        line-height: 2;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
    }

    .fields-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #fields .field-card {
        width: 100%;
        min-height: 0;
        height: auto;
        padding: 28px 22px 25px;
        border-radius: 22px;
    }

    #fields .field-number {
        top: 18px;
        right: 0;
        left: 0;
        font-size: 11px;
    }

    #fields .field-icon {
        width: 60px;
        height: 60px;
        margin: 34px auto 18px;
    }

    #fields .field-icon svg {
        width: 27px;
        height: 27px;
    }

    #fields .field-card h3 {
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 1px;
    }

    #fields .field-card small {
        font-size: 10px;
        margin-bottom: 10px;
    }

    #fields .field-description {
        width: 100%;
        max-width: 290px;
        font-size: 12px;
        line-height: 2;
        margin: 0 auto;
    }

    #fields .field-link {
        position: static;
        margin: 18px auto 0;
        padding-top: 0;
        min-height: 34px;
        font-size: 11px;
    }

    #fields .field-link span {
        width: 30px;
        height: 30px;
    }
}

/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 480px) {

    #fields {
        padding-top: 62px;
        padding-bottom: 62px;
    }

    #fields .section-head {
        margin-bottom: 30px;
    }

    #fields .section-head .section-kicker {
        font-size: 10px;
        margin-bottom: 7px;
    }

    #fields .section-head h2 {
        font-size: 27px;
        line-height: 1.45;
        letter-spacing: 0;
    }

    #fields .section-head p {
        font-size: 12px;
        line-height: 2;
        padding: 0 8px;
    }

    .fields-grid {
        gap: 14px;
    }

    #fields .field-card {
        padding: 25px 18px 22px;
        border-radius: 20px;
    }

    #fields .field-number {
        top: 17px;
    }

    #fields .field-icon {
        width: 57px;
        height: 57px;
        margin-top: 32px;
        margin-bottom: 16px;
        border-radius: 16px;
    }

    #fields .field-card h3 {
        font-size: 17px;
        line-height: 1.6;
    }

    #fields .field-card small {
        font-size: 9px;
    }

    #fields .field-description {
        max-width: 270px;
        font-size: 11px;
        line-height: 1.95;
    }

    #fields .field-link {
        margin-top: 16px;
        font-size: 10px;
    }

    #fields .field-link span {
        width: 28px;
        height: 28px;
        font-size: 15px;
    }
}



/* =========================================================
   PREMIUM AUDIENCE SECTION
========================================================= */

#audience {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 0% 30%, rgba(30,137,239,.09), transparent 28%),
        radial-gradient(circle at 100% 70%, rgba(55,207,255,.08), transparent 28%),
        linear-gradient(180deg, #f7fbff 0%, #f2f8fd 100%);
}

#audience::before {
    content: "SKY";
    position: absolute;
    top: 30px;
    left: -35px;
    font-family: Inter, sans-serif;
    font-size: 190px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -15px;
    color: rgba(7,49,99,.025);
    pointer-events: none;
}

#audience::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(25,135,240,.08);
    border-radius: 50%;
    right: -180px;
    bottom: -190px;
    pointer-events: none;
}

#audience .container {
    position: relative;
    z-index: 2;
}

/* ---------- Heading ---------- */

#audience .section-head {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#audience .section-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 13px;
    color: #147cf0;
}

#audience .section-kicker::before,
#audience .section-kicker::after {
    content: "";
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #2a9df5);
}

#audience .section-kicker::after {
    background: linear-gradient(90deg, #2a9df5, transparent);
}

#audience .section-head h2 {
    text-align: center;
    font-size: clamp(34px, 4vw, 49px);
    line-height: 1.35;
    color: #071b38;
    margin-bottom: 15px;
    letter-spacing: -.7px;
}

#audience .section-head p {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    color: #71839a;
    font-size: 14px;
    line-height: 2.1;
}

/* ---------- Grid ---------- */

.audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 48px;
}

/* ---------- Card ---------- */

#audience .audience-card {
    position: relative;
    min-height: 215px;
    padding: 30px 25px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    border: 1px solid rgba(8,67,128,.09);
    border-radius: 25px;
    background: rgba(255,255,255,.90);
    box-shadow:
        0 12px 35px rgba(9,61,113,.055),
        inset 0 1px 0 rgba(255,255,255,.95);
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;
}

#audience .audience-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    top: -120px;
    right: -90px;
    background: radial-gradient(
        circle,
        rgba(30,145,242,.13),
        transparent 70%
    );
    transition: transform .45s ease;
    z-index: -1;
}

#audience .audience-card::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #1684ee, #48d8ff);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .35s ease;
}

#audience .audience-card:hover {
    transform: translateY(-8px);
    border-color: rgba(22,124,240,.24);
    box-shadow:
        0 25px 60px rgba(9,67,128,.12),
        0 0 0 1px rgba(22,124,240,.04);
}

#audience .audience-card:hover::before {
    transform: scale(1.5);
}

#audience .audience-card:hover::after {
    transform: scaleX(1);
}

/* ---------- Icon ---------- */

#audience .audience-icon {
    flex: 0 0 auto;
    width: 67px;
    height: 67px;
    margin-bottom: 19px;
    display: grid;
    place-items: center;
    border-radius: 19px;
    background: linear-gradient(145deg, #eaf6ff, #d9efff);
    color: #147cf0;
    font-size: 23px;
    border: 1px solid rgba(22,124,240,.08);
    box-shadow:
        0 12px 25px rgba(20,125,235,.10),
        inset 0 1px 0 rgba(255,255,255,.9);
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        border-radius .35s ease,
        box-shadow .35s ease;
}

#audience .audience-card:hover .audience-icon {
    transform: translateY(-5px) scale(1.07);
    border-radius: 22px;
    box-shadow:
        0 18px 35px rgba(20,125,235,.18),
        inset 0 1px 0 rgba(255,255,255,.9);
}

/* Different accent colors */

#audience .audience-card:nth-child(1) .audience-icon {
    color: #1684ee;
    background: linear-gradient(145deg, #e5f3ff, #cfeaff);
}

#audience .audience-card:nth-child(2) .audience-icon {
    color: #6154e9;
    background: linear-gradient(145deg, #eeeaff, #e1ddff);
}

#audience .audience-card:nth-child(3) .audience-icon {
    color: #08a9c5;
    background: linear-gradient(145deg, #e1faff, #d0f5fb);
}

#audience .audience-card:nth-child(4) .audience-icon {
    color: #00ad86;
    background: linear-gradient(145deg, #e2faf3, #d1f4e9);
}

#audience .audience-card:nth-child(5) .audience-icon {
    color: #ee9b17;
    background: linear-gradient(145deg, #fff5df, #ffebc3);
}

#audience .audience-card:nth-child(6) .audience-icon {
    color: #e92d76;
    background: linear-gradient(145deg, #ffebf3, #ffdce9);
}

/* ---------- Text ---------- */

#audience .audience-card h3 {
    width: 100%;
    margin: 0 0 3px;
    color: #071b38;
    text-align: center;
    font-size: 17px;
    line-height: 1.65;
    font-weight: 800;
}

#audience .audience-card small {
    display: block;
    width: 100%;
    margin: 0;
    color: #8193a9;
    text-align: center;
    font-family: "Tajawal", sans-serif;
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: .2px;
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
    .audience-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    #audience .audience-card {
        min-height: 205px;
    }
}

@media (max-width: 760px) {

    #audience {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    #audience .section-head {
        width: 100%;
        margin-bottom: 0;
        text-align: center;
    }

    #audience .section-kicker {
        font-size: 10px;
        margin-bottom: 9px;
    }

    #audience .section-head h2 {
        text-align: center;
        font-size: 31px;
        line-height: 1.5;
        margin-bottom: 12px;
    }

    #audience .section-head p {
        text-align: center;
        font-size: 12px;
        line-height: 2;
        max-width: 520px;
        padding: 0 8px;
        margin-left: auto;
        margin-right: auto;
    }

    .audience-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 34px;
    }

    #audience .audience-card {
        width: 100%;
        min-height: 0;
        padding: 25px 20px;
        border-radius: 21px;
    }

    #audience .audience-icon {
        width: 61px;
        height: 61px;
        margin-bottom: 15px;
    }

    #audience .audience-card h3 {
        font-size: 17px;
        line-height: 1.6;
    }

    #audience .audience-card small {
        font-size: 9px;
    }
}

@media (max-width: 480px) {

    #audience {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    #audience .section-head h2 {
        font-size: 27px;
        line-height: 1.5;
    }

    #audience .section-head p {
        font-size: 11px;
        line-height: 2;
        padding: 0 10px;
    }

    .audience-grid {
        margin-top: 28px;
        gap: 12px;
    }

    #audience .audience-card {
        padding: 23px 18px;
        border-radius: 19px;
    }

    #audience .audience-icon {
        width: 57px;
        height: 57px;
        border-radius: 16px;
        font-size: 21px;
    }

    #audience .audience-card h3 {
        font-size: 16px;
    }

    #audience .audience-card small {
        font-size: 8.5px;
    }
}



/* =========================================================
   PREMIUM CONTACT SECTION
========================================================= */

#contact {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 15%, rgba(25,137,240,.07), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}

#contact .container {
    position: relative;
    z-index: 2;
}

#contact .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, .75fr);
    gap: 46px;
    align-items: stretch;
}

/* ---------- Heading ---------- */

#contact .section-head {
    text-align: right;
    margin-bottom: 28px;
}

#contact .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #147cf0;
    font-family: "Tajawal", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 9px;
}

#contact .section-kicker::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 10px;
    background: linear-gradient(90deg, #147cf0, #45d5ff);
}

#contact .section-head h2 {
    color: #061a36;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.35;
    margin: 0 0 9px;
    letter-spacing: -.8px;
}

#contact .section-head p {
    max-width: 610px;
    margin: 0 0 0 auto;
    color: #78899e;
    font-size: 13px;
    line-height: 2;
}

/* ---------- Contact cards ---------- */

#contact .contact-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#contact .contact-item {
    position: relative;
    min-height: 132px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: right;
    border: 1px solid rgba(7,62,120,.09);
    border-radius: 20px;
    background: rgba(255,255,255,.92);
    box-shadow:
        0 12px 35px rgba(8,58,110,.045),
        inset 0 1px 0 rgba(255,255,255,.95);
    overflow: hidden;
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

#contact .contact-item::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 70px;
    height: 3px;
    border-radius: 10px 0 0 0;
    background: linear-gradient(90deg, #147cf0, #42d8ff);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s ease;
}

#contact .contact-item:hover {
    transform: translateY(-5px);
    border-color: rgba(20,124,240,.22);
    box-shadow: 0 20px 45px rgba(8,66,125,.10);
}

#contact .contact-item:hover::after {
    transform: scaleX(1);
}

/* ---------- Icon ---------- */

#contact .contact-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #147cf0;
    background: linear-gradient(145deg, #eaf6ff, #dff2ff);
    border: 1px solid rgba(20,124,240,.08);
    transition:
        transform .3s ease,
        border-radius .3s ease;
}

#contact .contact-item:hover .contact-icon {
    transform: translateY(-3px) scale(1.05);
    border-radius: 16px;
}

#contact .contact-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Content ---------- */

#contact .contact-content {
    width: 100%;
}

#contact .contact-content strong {
    display: block;
    margin-bottom: 5px;
    color: #071b38;
    font-size: 15px;
    font-weight: 800;
}

#contact .contact-content span,
#contact .contact-content a {
    display: block;
    color: #71849b;
    font-family: "Tajawal", sans-serif;
    font-size: 11px;
    line-height: 1.9;
    text-decoration: none;
    word-break: break-word;
}

#contact .contact-content a {
    transition: color .25s ease;
}

#contact .contact-content a:hover {
    color: #147cf0;
}

/* ---------- Dark CTA card ---------- */

#contact .contact-card {
    position: relative;
    min-height: 100%;
    padding: 42px 38px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: right;
    border-radius: 30px;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background:
        radial-gradient(circle at 85% 15%, rgba(61,210,255,.20), transparent 32%),
        radial-gradient(circle at 10% 90%, rgba(24,105,235,.30), transparent 34%),
        linear-gradient(145deg, #061a36 0%, #092e5a 55%, #064878 100%);
    box-shadow:
        0 30px 70px rgba(5,43,83,.20);
}

#contact .contact-card::before {
    content: "SKY";
    position: absolute;
    left: -22px;
    bottom: -35px;
    font-family: Inter, sans-serif;
    font-size: 145px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -13px;
    color: rgba(255,255,255,.055);
    z-index: -1;
}

#contact .contact-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -75px;
    border-radius: 50%;
    border: 1px solid rgba(76,214,255,.16);
    box-shadow:
        0 0 0 25px rgba(76,214,255,.025),
        0 0 0 50px rgba(76,214,255,.018);
    z-index: -1;
}

#contact .contact-card-badge {
    color: #49d6ff;
    font-family: Inter, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;
    margin-bottom: 18px;
}

#contact .contact-card h3 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 31px;
    line-height: 1.4;
    font-weight: 800;
}

#contact .contact-card p {
    max-width: 360px;
    margin: 0;
    color: rgba(255,255,255,.70);
    font-size: 12px;
    line-height: 2.1;
}

#contact .contact-card-line {
    width: 52px;
    height: 3px;
    margin: 23px 0 25px;
    border-radius: 10px;
    background: linear-gradient(90deg, #1b91f5, #43d8ff);
}

#contact .contact-btn {
    min-width: 155px;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(20,146,235,.28);
}

#contact .contact-btn span {
    display: inline-flex;
    margin-right: 8px;
    color: inherit;
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {

    #contact .contact-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    #contact .contact-card {
        min-height: 330px;
        order: -1;
    }

    #contact .section-head {
        text-align: center;
    }

    #contact .section-head p {
        margin-left: auto;
        margin-right: auto;
    }

    #contact .section-kicker {
        justify-content: center;
    }
}

@media (max-width: 620px) {

    #contact {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    #contact .contact-grid {
        gap: 22px;
    }

    #contact .contact-card {
        min-height: 300px;
        padding: 32px 25px;
        border-radius: 24px;
        text-align: center;
        align-items: center;
    }

    #contact .contact-card-badge {
        font-size: 8px;
    }

    #contact .contact-card h3 {
        font-size: 27px;
    }

    #contact .contact-card p {
        font-size: 11px;
    }

    #contact .contact-card-line {
        margin: 20px auto 22px;
    }

    #contact .contact-items {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #contact .contact-item {
        min-height: 0;
        padding: 20px;
        align-items: center;
        text-align: center;
    }

    #contact .contact-content {
        text-align: center;
    }

    #contact .contact-icon {
        margin-bottom: 11px;
    }

    #contact .contact-content strong {
        font-size: 14px;
    }

    #contact .contact-content span,
    #contact .contact-content a {
        font-size: 10px;
    }

    #contact .section-head h2 {
        font-size: 29px;
        line-height: 1.5;
    }

    #contact .section-head p {
        font-size: 11px;
        line-height: 2;
    }
}




.stc-partners {
    position: relative;
    padding: 72px 0 76px;
    background:
        radial-gradient(circle at 50% 0%, rgba(37, 99, 235, .07), transparent 45%),
        #ffffff;
    overflow: hidden;
}

.stc-partners-head {
    text-align: center;
    margin-bottom: 38px;
}

.stc-partners-head > span {
    display: inline-block;
    margin-bottom: 9px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.stc-partners-head h2 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
}

.stc-partners-head p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
}

.stc-partners-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    direction: ltr;
    padding: 8px 0 14px;
}

.stc-partners-slider::before,
.stc-partners-slider::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    width: 90px;
    pointer-events: none;
}

.stc-partners-slider::before {
    left: 0;
    background: linear-gradient(to right, #fff, transparent);
}

.stc-partners-slider::after {
    right: 0;
    background: linear-gradient(to left, #fff, transparent);
}

.stc-partners-track {
    display: flex;
    align-items: stretch;
    width: max-content;
    animation: stcPartnerScroll 32s linear infinite;
}

.stc-partners-slider:hover .stc-partners-track {
    animation-play-state: paused;
}

.stc-partner-card {
    flex: 0 0 220px;
    min-height: 128px;
    margin: 0 10px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    direction: rtl;
    background: rgba(255,255,255,.96);
    border: 1px solid #e8edf5;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .06);
    transition: .25s ease;
}

.stc-partner-card:hover {
    transform: translateY(-4px);
    border-color: rgba(37,99,235,.22);
    box-shadow: 0 14px 34px rgba(15,23,42,.10);
}

.stc-partner-logo {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stc-partner-logo img {
    display: block;
    max-width: 150px;
    max-height: 65px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.stc-partner-card span {
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
}

@keyframes stcPartnerScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {

    .stc-partners {
        padding: 54px 0 58px;
    }

    .stc-partners-head {
        margin-bottom: 28px;
    }

    .stc-partners-head h2 {
        font-size: 25px;
    }

    .stc-partners-head p {
        padding: 0 20px;
        font-size: 14px;
    }

    .stc-partner-card {
        flex-basis: 175px;
        min-height: 112px;
        margin: 0 7px;
        padding: 14px;
        border-radius: 15px;
    }

    .stc-partner-logo {
        height: 60px;
    }

    .stc-partner-logo img {
        max-width: 125px;
        max-height: 55px;
    }

    .stc-partners-slider::before,
    .stc-partners-slider::after {
        width: 45px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stc-partners-track {
        animation: none;
    }
}





.about-panel.about-image-slider {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 35px;
}

.about-panel.about-image-slider .about-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    z-index: 1 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .8s ease !important;
}

.about-panel.about-image-slider .about-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.about-panel.about-image-slider .about-lines {
    position: absolute;
    inset: 0;
    z-index: 3 !important;
    pointer-events: none;
}

.about-panel.about-image-slider .about-stat {
    z-index: 5 !important;
}

.about-slider-arrow {
    position: absolute !important;
    top: 50% !important;
    z-index: 10 !important;
    width: 42px !important;
    height: 42px !important;
    border: 0 !important;
    border-radius: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255,255,255,.95) !important;
    color: #0a3769 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.about-slider-prev {
    left: 18px !important;
}

.about-slider-next {
    right: 18px !important;
}

.about-slider-dots {
    position: absolute !important;
    z-index: 10 !important;
    bottom: 17px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 7px !important;
}

.about-dot {
    width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.6) !important;
    cursor: pointer !important;
}

.about-dot.active {
    width: 24px !important;
    background: #fff !important;
}

@media (max-width: 700px) {
    .about-slider-arrow {
        width: 36px !important;
        height: 36px !important;
    }

    .about-slider-prev {
        left: 10px !important;
    }

    .about-slider-next {
        right: 10px !important;
    }
}


/* =========================================================
   SKY BRAND
   الشعار يمين اسم المركز - RTL
   ========================================================= */

.site-header .brand {
    direction: rtl !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    text-decoration: none !important;
}

.site-header .brand-mark {
    order: 1 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.site-header .brand-text {
    order: 2 !important;
    text-align: right !important;
    direction: rtl !important;
    flex: 0 0 auto !important;
}

.site-header .brand-mark img {
    display: block !important;
    max-width: 100% !important;
}

/* اسم المركز */
.site-header .brand-text strong {
    display: block;
}

/* الاسم الإنجليزي */
.site-header .brand-text small {
    display: block;
    direction: ltr;
    text-align: right;
}

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

@media (max-width: 700px) {

    .site-header .brand {
        gap: 9px !important;
        max-width: calc(100% - 55px) !important;
    }

    .site-header .brand-mark {
        order: 1 !important;
    }

    .site-header .brand-text {
        order: 2 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .site-header .brand-text strong,
    .site-header .brand-text small {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

}


/* =========================================================
   SKY HEADER BRAND
   الشعار على يمين اسم المركز في جميع الصفحات
   ========================================================= */

.site-header .brand {
    direction: rtl !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    text-decoration: none !important;
}

.site-header .brand-mark {
    order: 1 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.site-header .brand-text {
    order: 2 !important;
    flex: 0 0 auto !important;
    text-align: right !important;
    direction: rtl !important;
}

.site-header .brand-text strong {
    display: block !important;
    text-align: right !important;
}

.site-header .brand-text small {
    display: block !important;
    direction: ltr !important;
    text-align: right !important;
}

.site-header .brand-mark img {
    display: block !important;
}

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

@media (max-width: 700px) {

    .site-header .brand {
        gap: 9px !important;
        max-width: calc(100% - 55px) !important;
    }

    .site-header .brand-mark {
        order: 1 !important;
    }

    .site-header .brand-text {
        order: 2 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .site-header .brand-text strong,
    .site-header .brand-text small {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

}


/* =========================================================
   FINAL BRAND ORDER
   الاسم ثم الشعار في HTML
   الشعار يظهر يمين الاسم
   ========================================================= */

.site-header .brand {
    display: flex !important;
    flex-direction: row !important;
    direction: rtl !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}

.site-header .brand-text {
    order: 1 !important;
    text-align: right !important;
    direction: rtl !important;
}

.site-header .brand-mark {
    order: 2 !important;
    flex: 0 0 auto !important;
}

.site-header .brand-text strong {
    display: block !important;
    text-align: right !important;
}

.site-header .brand-text small {
    display: block !important;
    direction: ltr !important;
    text-align: right !important;
}

.site-header .brand-mark img {
    display: block !important;
}

/* الهاتف */
@media (max-width: 700px) {

    .site-header .brand {
        gap: 9px !important;
        max-width: calc(100% - 55px) !important;
    }

    .site-header .brand-text {
        order: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .site-header .brand-mark {
        order: 2 !important;
    }

    .site-header .brand-text strong,
    .site-header .brand-text small {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

}


/* =========================================================
   FINAL SKY BRAND POSITION
   الشعار يمين اسم المركز فعليًا
   ========================================================= */

.site-header .brand {
    display: grid !important;
    grid-template-columns: minmax(0, auto) auto !important;
    grid-template-areas: "text logo" !important;

    direction: ltr !important;

    align-items: center !important;
    justify-content: start !important;

    column-gap: 12px !important;

    width: auto !important;
    text-decoration: none !important;
}

.site-header .brand-text {
    grid-area: text !important;

    direction: rtl !important;
    text-align: right !important;

    min-width: 0 !important;
}

.site-header .brand-mark {
    grid-area: logo !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
}

.site-header .brand-mark img {
    display: block !important;
}

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

@media (max-width: 700px) {

    .site-header .brand {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "text logo" !important;
        column-gap: 8px !important;

        max-width: calc(100% - 55px) !important;
    }

    .site-header .brand-text {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .site-header .brand-text strong,
    .site-header .brand-text small {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .site-header .brand-mark {
        flex-shrink: 0 !important;
    }

}


/* =========================================================
   SKY HEADER — SAME COLOR EVERYWHERE
   ========================================================= */

.site-header {
    background:
        linear-gradient(
            110deg,
            #071a38 0%,
            #0a2850 48%,
            #126cff 100%
        ) !important;

    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

.site-header .brand-text,
.site-header .brand-text strong,
.site-header .brand-text small {
    color: #ffffff !important;
}

.site-header .brand-text small {
    opacity: .78 !important;
}

.site-header .nav-links a {
    color: rgba(255,255,255,.82) !important;
}

.site-header .nav-links a:hover,
.site-header .nav-links a.active {
    color: #ffffff !important;
}

.site-header .nav-cta {
    background: rgba(255,255,255,.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.25) !important;
}

.site-header .nav-cta:hover {
    background: rgba(255,255,255,.16) !important;
    border-color: rgba(255,255,255,.40) !important;
}

.site-header .menu-btn {
    color: #ffffff !important;
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.20) !important;
}


/* =========================================================
   LOGO — BLUE BOX CONSISTENT WITH HEADER
   ========================================================= */

.site-header .brand-mark {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
}


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

@media (max-width: 700px) {

    .site-header {
        background:
            linear-gradient(
                110deg,
                #071a38 0%,
                #0a2850 55%,
                #126cff 100%
            ) !important;
    }

    .site-header .nav-links {
        background: #071a38 !important;
        border-color: rgba(255,255,255,.12) !important;
    }

    .site-header .nav-links a {
        color: #ffffff !important;
    }

}


/* =========================================================
   SKY — DARK HEADER MATCHING HERO
   ========================================================= */

.site-header {
    background:
        linear-gradient(
            135deg,
            #071a38 0%,
            #0a2850 55%,
            #126cff 100%
        ) !important;

    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.12) !important;
}

.site-header.scrolled {
    background:
        linear-gradient(
            135deg,
            #071a38 0%,
            #0a2850 55%,
            #126cff 100%
        ) !important;
}

.site-header .brand-text,
.site-header .brand-text strong,
.site-header .brand-text small {
    color: #fff !important;
}

.site-header .nav-links a {
    color: rgba(255,255,255,.86) !important;
}

.site-header .nav-links a:hover,
.site-header .nav-links a.active {
    color: #fff !important;
}

.site-header .nav-cta {
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.25) !important;
}

.site-header .nav-cta:hover {
    background: rgba(255,255,255,.14) !important;
}

.site-header .brand-mark {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
}

.site-header .menu-btn {
    color: #fff !important;
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.20) !important;
}


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

@media (max-width: 700px) {

    .site-header,
    .site-header.scrolled {
        background:
            linear-gradient(
                135deg,
                #071a38 0%,
                #0a2850 55%,
                #126cff 100%
            ) !important;
    }

    .site-header .nav-links {
        background: #071a38 !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.30) !important;
    }

}



/* =========================================================
   SKY ARTICLE — SOCIAL SHARE ICONS
   ========================================================= */

.article-share-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 14px !important;

    width: 100% !important;
    margin: 26px 0 34px !important;
    padding: 0 !important;
}

.article-share-buttons .share-btn {
    width: 48px !important;
    height: 48px !important;

    min-width: 48px !important;
    min-height: 48px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: #fff !important;

    border: 1px solid rgba(7,26,56,.08) !important;

    text-decoration: none !important;

    box-shadow:
        0 6px 18px rgba(7,26,56,.08) !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease !important;

    overflow: hidden !important;
}


/* لا تظهر أسماء المنصات */
.article-share-buttons .share-btn span,
.article-share-buttons .share-btn i {
    display: none !important;
}


/* الشعارات الحقيقية */
.article-share-buttons .share-btn img {
    display: block !important;

    width: 23px !important;
    height: 23px !important;

    min-width: 23px !important;
    min-height: 23px !important;

    max-width: 23px !important;
    max-height: 23px !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Hover */
.article-share-buttons .share-btn:hover {
    transform: translateY(-4px) scale(1.06) !important;

    box-shadow:
        0 12px 28px rgba(7,26,56,.16) !important;
}


/* Facebook */
.article-share-buttons .share-facebook:hover {
    border-color: rgba(24,119,242,.45) !important;
}


/* WhatsApp */
.article-share-buttons .share-whatsapp:hover {
    border-color: rgba(37,211,102,.45) !important;
}


/* X */
.article-share-buttons .share-x:hover {
    border-color: rgba(0,0,0,.35) !important;
}


/* Instagram */
.article-share-buttons .share-instagram:hover {
    border-color: rgba(228,64,95,.45) !important;
}


/* Telegram */
.article-share-buttons .share-telegram:hover {
    border-color: rgba(34,158,217,.45) !important;
}


/* Email */
.article-share-buttons .share-email:hover {
    border-color: rgba(18,108,255,.45) !important;
}


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

@media (max-width: 600px) {

    .article-share-buttons {
        gap: 10px !important;
        margin: 22px 0 28px !important;
    }

    .article-share-buttons .share-btn {
        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;
        min-height: 44px !important;
    }

    .article-share-buttons .share-btn img {
        width: 20px !important;
        height: 20px !important;

        min-width: 20px !important;
        min-height: 20px !important;
    }
}



/* =========================================================
   SKY — CONTACT MOBILE CENTERING
   ========================================================= */

@media (max-width: 768px) {

    /* بطاقات التواصل */
    .contact-card,
    .contact-item,
    .contact-box,
    .contact-info-card {
        text-align: center !important;
    }

    /* محتوى البطاقة */
    .contact-card > *,
    .contact-item > *,
    .contact-box > *,
    .contact-info-card > * {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* الأيقونة */
    .contact-card .contact-icon,
    .contact-item .contact-icon,
    .contact-box .contact-icon,
    .contact-info-card .contact-icon {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* العنوان */
    .contact-card h3,
    .contact-card h4,
    .contact-item h3,
    .contact-item h4,
    .contact-box h3,
    .contact-box h4,
    .contact-info-card h3,
    .contact-info-card h4 {
        text-align: center !important;
        width: 100% !important;
    }

    /* البيانات */
    .contact-card p,
    .contact-card span,
    .contact-card a,
    .contact-item p,
    .contact-item span,
    .contact-item a,
    .contact-box p,
    .contact-box span,
    .contact-box a,
    .contact-info-card p,
    .contact-info-card span,
    .contact-info-card a {
        text-align: center !important;
    }

    /* البريد */
    .contact-card .contact-value,
    .contact-item .contact-value,
    .contact-box .contact-value,
    .contact-info-card .contact-value {
        display: block !important;
        width: 100% !important;
    }

    /* الروابط الطويلة */
    .contact-card a,
    .contact-item a,
    .contact-box a,
    .contact-info-card a {
        justify-content: center !important;
    }

    /* =====================================================
       زر حجم الخط
       ===================================================== */

    #fontSizeBtn,
    #font-size-btn,
    .font-size-btn,
    .font-size-toggle,
    .font-size-control,
    .accessibility-font-size {
        margin-left: auto !important;
        margin-right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* إذا كان الزر داخل حاوية */
    .font-size-wrapper,
    .font-size-control-wrap,
    .accessibility-controls {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
}


/* =========================================================
   CONTACT DESKTOP — الحفاظ على شكل مرتب
   ========================================================= */

.contact-card,
.contact-item,
.contact-box,
.contact-info-card {
    box-sizing: border-box;
}


/* =========================================================
   SOCIAL CARD
   ========================================================= */

.contact-card .social-links,
.contact-item .social-links,
.contact-box .social-links,
.contact-info-card .social-links {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* =========================================================
   SKY — CONTACT MOBILE CENTER FIX
   ========================================================= */

@media (max-width: 768px) {

    #contact .contact-items {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 12px;
    }

    #contact .contact-item {
        width: 100%;
        min-height: 72px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 8px;
        padding: 16px 12px;
    }

    #contact .contact-icon {
        width: 42px;
        height: 42px;
        margin: 0 auto;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #contact .contact-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 auto;
    }

    #contact .contact-content strong {
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 4px;
    }

    #contact .contact-content a,
    #contact .contact-content span {
        display: block;
        width: 100%;
        text-align: center;
        word-break: break-word;
    }

    #contact .contact-card {
        text-align: center;
    }

    #contact .contact-card-badge,
    #contact .contact-card h3,
    #contact .contact-card p,
    #contact .contact-card-line {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    #contact .contact-btn {
        margin-left: auto;
        margin-right: auto;
    }

}


/* SKY CONTACT MOBILE - LARGER TEXT */
@media (max-width: 768px) {
    #contact .contact-content strong {
        font-size: 16px !important;
        font-weight: 800 !important;
    }

    #contact .contact-content a,
    #contact .contact-content span {
        font-size: 17px !important;
        line-height: 1.7 !important;
        font-weight: 600 !important;
    }

    #contact .contact-content a[href^="mailto:"] {
        font-size: 16px !important;
    }

    #contact .contact-content a[href^="tel:"] {
        font-size: 19px !important;
        font-weight: 700 !important;
    }

    #contact .contact-card p,
    #contact .contact-card-line {
        font-size: 16px !important;
        line-height: 1.8 !important;
    }

    #contact .contact-card h3 {
        font-size: 21px !important;
    }
}

/* SKY AUDIENCE - PROFESSIONAL SVG ICONS */
.audience-icon {
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    border-radius: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(145deg, #eef7ff, #dceeff) !important;
    border: 1px solid rgba(18,108,255,.14) !important;
    box-shadow:
        0 12px 28px rgba(18,108,255,.12),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
    color: #126cff !important;
    transition: .3s ease !important;
}

.audience-icon svg {
    width: 38px !important;
    height: 38px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.audience-card:hover .audience-icon {
    transform: translateY(-4px) scale(1.04);
    box-shadow:
        0 16px 34px rgba(18,108,255,.18),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.audience-card:nth-child(4) .audience-icon {
    color: #087fdb !important;
}

.audience-card:nth-child(5) .audience-icon {
    color: #126cff !important;
}

.audience-card:nth-child(6) .audience-icon {
    color: #174ea6 !important;
}

@media (max-width: 768px) {
    .audience-icon {
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
        border-radius: 20px !important;
    }

    .audience-icon svg {
        width: 34px !important;
        height: 34px !important;
    }
}

/* =========================================================
   SKY TRAINING CENTER - PROFESSIONAL AUDIENCE ICONS
   Font Awesome Icon System
   ========================================================= */

.audience-icon {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 22px !important;

    border-radius: 22px !important;

    background:
        linear-gradient(145deg, #f8fbff 0%, #e8f2ff 100%) !important;

    border: 1px solid rgba(18,108,255,.10) !important;

    box-shadow:
        0 12px 30px rgba(7,45,95,.09),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    color: #126cff !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease !important;
}

.audience-icon i {
    display: block !important;
    font-size: 32px !important;
    line-height: 1 !important;
}

.audience-card:hover .audience-icon {
    transform: translateY(-5px) !important;

    background:
        linear-gradient(145deg, #ffffff 0%, #e1efff 100%) !important;

    box-shadow:
        0 18px 38px rgba(18,108,255,.16),
        inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* Different professional accents */
.audience-card:nth-child(1) .audience-icon {
    color: #126cff !important;
}

.audience-card:nth-child(2) .audience-icon {
    color: #087fdb !important;
}

.audience-card:nth-child(3) .audience-icon {
    color: #1557b0 !important;
}

.audience-card:nth-child(4) .audience-icon {
    color: #0b75c9 !important;
}

.audience-card:nth-child(5) .audience-icon {
    color: #126cff !important;
}

.audience-card:nth-child(6) .audience-icon {
    color: #174ea6 !important;
}

/* Mobile */
@media (max-width: 768px) {

    .audience-icon {
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
        margin-bottom: 18px !important;
        border-radius: 19px !important;
    }

    .audience-icon i {
        font-size: 28px !important;
    }
}

/* =========================================================
   SKY HERO - MOBILE CENTER
   ========================================================= */

@media (max-width: 768px) {

    .hero,
    .hero-section,
    #hero {
        text-align: center !important;
    }

    .hero-content,
    .hero-copy,
    .hero-text,
    .hero-inner {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-content *,
    .hero-copy *,
    .hero-text * {
        text-align: center !important;
    }

    .hero-content h1,
    .hero-copy h1,
    .hero-text h1 {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-content p,
    .hero-copy p,
    .hero-text p {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-buttons,
    .hero-actions,
    .hero-cta,
    .hero-content .buttons {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-buttons a,
    .hero-actions a,
    .hero-cta a,
    .hero-content .btn {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* =========================================================
   SKY CTA - MOBILE PERFECT CENTER
   ========================================================= */

@media (max-width: 768px) {

    .cta-section {
        width: 100% !important;
        text-align: center !important;
    }

    .cta-section .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .cta-section .cta-box {
        width: 100% !important;
        min-height: 460px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;

        padding: 55px 24px !important;
        box-sizing: border-box !important;
    }

    .cta-section .cta-copy {
        width: 100% !important;
        max-width: 620px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 auto !important;
        text-align: center !important;
    }

    .cta-section .cta-copy .section-kicker {
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .cta-section .cta-copy h2 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 12px auto 18px !important;

        text-align: center !important;
    }

    .cta-section .cta-copy p {
        width: 100% !important;
        max-width: 520px !important;

        margin: 0 auto !important;

        text-align: center !important;
        line-height: 2 !important;
    }

    .cta-section .cta-actions {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 28px auto 0 !important;
        text-align: center !important;
    }

    .cta-section .cta-actions .btn {
        margin: 0 auto !important;
    }
}

/* =========================================================
   SKY LANGUAGE SWITCHER
   ========================================================= */

.language-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-inline-start: 18px;
    white-space: nowrap;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 800;
}

.language-switcher a {
    color: rgba(255,255,255,.65);
    text-decoration: none;
    transition: .2s ease;
}

.language-switcher a:hover,
.language-switcher a.active {
    color: #ffffff;
}

.language-switcher span {
    color: rgba(255,255,255,.35);
}

@media (max-width: 768px) {
    .language-switcher {
        margin-inline-start: auto;
        margin-inline-end: 12px;
        font-size: 12px;
    }
}

/* =========================================================
   SKY HERO — PREMIUM GRID BACKGROUND
   ========================================================= */

.hero,
.hero-section,
#hero {
    position: relative !important;
    overflow: hidden !important;
}

/* Grid layer */
.hero::before,
.hero-section::before,
#hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;

    background-image:
        linear-gradient(
            rgba(82, 180, 255, 0.10) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(82, 180, 255, 0.10) 1px,
            transparent 1px
        );

    background-size: 54px 54px !important;

    opacity: .55 !important;
}

/* Soft grid glow */
.hero::after,
.hero-section::after,
#hero::after {
    content: "" !important;
    position: absolute !important;
    width: 620px !important;
    height: 620px !important;
    top: -260px !important;
    right: -180px !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 0 !important;

    background:
        radial-gradient(
            circle,
            rgba(42, 181, 255, 0.18) 0%,
            rgba(42, 181, 255, 0.07) 38%,
            transparent 72%
        ) !important;
}

/* Keep all hero content above the grid */
.hero > *,
.hero-section > *,
#hero > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Stronger grid on desktop */
@media (min-width: 769px) {
    .hero::before,
    .hero-section::before,
    #hero::before {
        background-size: 48px 48px !important;
        opacity: .62 !important;
    }
}

/* More subtle grid on mobile */
@media (max-width: 768px) {
    .hero::before,
    .hero-section::before,
    #hero::before {
        background-size: 34px 34px !important;
        opacity: .38 !important;
    }
}