/* ============================================================
   GLOBALTRUST LOGISTICS
   SECTION 01 — NAVBAR
============================================================ */


/* ============================================================
   01. GLOBAL VARIABLES
============================================================ */

:root {

    /* Brand Colors */
    --navy-dark: #06111f;
    --navy: #0a1b2f;
    --navy-light: #102a46;

    --gold: #c9a227;
    --gold-light: #e4c65a;
    --gold-dark: #9d7915;

    --white: #ffffff;
    --off-white: #f5f7fa;
    --text-dark: #111827;
    --text-muted: #8f9aaa;

    /* Borders */
    --border-dark: rgba(255, 255, 255, 0.10);
    --border-gold: rgba(201, 162, 39, 0.35);

    /* Effects */
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.18);

    /* Transitions */
    --transition: 0.35s ease;

    /* Layout */
    --container-width: 1400px;
}


/* ============================================================
   02. RESET
============================================================ */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Inter", sans-serif;
    background: var(--white);
    color: var(--text-dark);
}


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


ul {
    list-style: none;
}


button {
    font-family: inherit;
}


/* ============================================================
   03. CONTAINER
============================================================ */

.container {
    width: min(
        var(--container-width),
        calc(100% - 80px)
    );

    margin: 0 auto;
}


/* ============================================================
   04. TOP INFORMATION BAR
============================================================ */

.top-info-bar {

    height: 42px;

    background:
        linear-gradient(
            90deg,
            #050d18,
            #0b1d32,
            #050d18
        );

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

    color: #dce3eb;

    position: relative;
    z-index: 1000;
}


.top-info-container {

    height: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 30px;
}


.top-info-item {

    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 12px;
    font-weight: 500;

    color: #cbd5e1;

    transition: var(--transition);
}


.top-info-item i {

    color: var(--gold);

    font-size: 13px;
}


.top-info-item:hover {

    color: var(--white);
}


.customer-care-info {

    padding-left: 25px;

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


/* ============================================================
   05. MAIN NAVBAR
============================================================ */

.main-navbar {

    height: 88px;

    background:
        rgba(6, 17, 31, 0.97);

    border-bottom:
        1px solid
        rgba(201, 162, 39, 0.15);

    position: relative;

    z-index: 999;

    transition:
        background 0.35s ease,
        box-shadow 0.35s ease,
        height 0.35s ease;
}


/* Navbar after scrolling */

.site-header.scrolled .main-navbar {

    background:
        rgba(6, 17, 31, 0.94);

    backdrop-filter: blur(18px);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.30);

    border-bottom-color:
        rgba(201, 162, 39, 0.30);
}


/* ============================================================
   06. NAVBAR CONTAINER
============================================================ */

.navbar-container {

    height: 100%;

    display: flex;
    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


/* ============================================================
   07. BRAND
============================================================ */

.brand {

    display: flex;
    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}


/* ============================================================
   08. GT LOGO
============================================================ */

.brand-logo {

    width: 52px;
    height: 52px;

    border: 2px solid var(--gold);

    border-radius: 50%;

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

    position: relative;

    color: var(--white);

    font-family: "Montserrat", sans-serif;

    font-size: 18px;
    font-weight: 800;

    background:
        radial-gradient(
            circle at center,
            #173452,
            #081522
        );

    box-shadow:
        0 0 0 4px rgba(201, 162, 39, 0.06),
        0 5px 20px rgba(0, 0, 0, 0.25);

    transition: var(--transition);
}


.brand-logo::before {

    content: "";

    position: absolute;

    inset: 4px;

    border:
        1px solid
        rgba(201, 162, 39, 0.45);

    border-radius: 50%;
}


.brand:hover .brand-logo {

    transform: rotate(-8deg) scale(1.04);

    box-shadow:
        0 0 25px rgba(201, 162, 39, 0.20);
}


.brand-logo span {

    position: relative;

    z-index: 1;
}


/* ============================================================
   09. BRAND TEXT
============================================================ */

.brand-text {

    display: flex;
    flex-direction: column;

    line-height: 1;
}


.brand-name {

    color: var(--white);

    font-family: "Montserrat", sans-serif;

    font-size: 21px;

    font-weight: 800;

    letter-spacing: 1px;
}


.brand-name span {

    color: var(--gold);
}


.brand-subtitle {

    color: var(--gold-light);

    font-size: 10px;

    letter-spacing: 5px;

    font-weight: 600;

    margin-top: 6px;
}


/* ============================================================
   10. DESKTOP NAVIGATION
============================================================ */

.desktop-navigation {

    display: flex;
    align-items: center;

    gap: 32px;

    margin-left: auto;
}


.nav-links {

    display: flex;
    align-items: center;

    gap: 27px;
}


.nav-link {

    color: #cbd5e1;

    font-size: 13px;

    font-weight: 600;

    position: relative;

    padding: 34px 0;

    transition: var(--transition);
}


.nav-link::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 22px;

    width: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--gold-dark),
            var(--gold-light)
        );

    transform:
        translateX(-50%);

    transition: width 0.3s ease;

    border-radius: 5px;
}


.nav-link:hover,
.nav-link.active {

    color: var(--white);
}


.nav-link:hover::after,
.nav-link.active::after {

    width: 100%;
}


/* ============================================================
   11. CUSTOMER CARE BUTTON
============================================================ */

.customer-care-button {

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 13px 19px;

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

    border-radius: 4px;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-dark)
        );

    color: var(--navy-dark);

    font-size: 12px;

    font-weight: 800;

    white-space: nowrap;

    box-shadow:
        0 6px 20px
        rgba(201, 162, 39, 0.15);

    transition: var(--transition);

    position: relative;

    overflow: hidden;
}


.customer-care-button::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.35),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.7s ease;
}


.customer-care-button:hover::before {

    left: 150%;
}


.customer-care-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 30px
        rgba(201, 162, 39, 0.30);
}


.customer-care-icon {

    font-size: 13px;
}


/* ============================================================
   12. MOBILE MENU BUTTON
============================================================ */

.mobile-menu-button {

    display: none;

    width: 45px;
    height: 45px;

    border:
        1px solid
        rgba(201, 162, 39, 0.40);

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

    border-radius: 4px;

    cursor: pointer;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    transition: var(--transition);
}


.mobile-menu-button span {

    width: 21px;
    height: 2px;

    background: var(--white);

    border-radius: 10px;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


.mobile-menu-button:hover {

    border-color: var(--gold);

    background:
        rgba(201, 162, 39, 0.08);
}


/* Hamburger → X */

.mobile-menu-button.active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);
}


.mobile-menu-button.active span:nth-child(2) {

    opacity: 0;
}


.mobile-menu-button.active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* ============================================================
   13. MOBILE NAVIGATION
============================================================ */

.mobile-navigation {

    display: none;

    position: absolute;

    top: 130px;

    left: 0;

    width: 100%;

    background:
        rgba(6, 17, 31, 0.98);

    backdrop-filter: blur(20px);

    border-bottom:
        1px solid
        rgba(201, 162, 39, 0.25);

    box-shadow:
        0 20px 40px
        rgba(0, 0, 0, 0.30);

    transform:
        translateY(-15px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;

    z-index: 998;
}


.mobile-navigation.active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


.mobile-navigation-inner {

    padding:
        25px 20px 30px;
}


.mobile-nav-links {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.mobile-nav-link {

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 15px 14px;

    color: #cbd5e1;

    font-size: 14px;

    font-weight: 600;

    border-radius: 5px;

    transition: var(--transition);
}


.mobile-nav-link i {

    width: 20px;

    color: var(--gold);

    font-size: 14px;

    text-align: center;
}


.mobile-nav-link:hover {

    background:
        rgba(201, 162, 39, 0.08);

    color: var(--white);

    padding-left: 19px;
}


/* ============================================================
   14. MOBILE CUSTOMER CARE
============================================================ */

.mobile-customer-care {

    margin-top: 20px;

    padding: 16px;

    display: flex;
    align-items: center;

    gap: 13px;

    border:
        1px solid
        rgba(201, 162, 39, 0.35);

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            rgba(201, 162, 39, 0.14),
            rgba(201, 162, 39, 0.04)
        );

    color: var(--white);

    transition: var(--transition);
}


.mobile-customer-care > i:first-child {

    color: var(--gold);

    font-size: 20px;
}


.mobile-customer-care > i:last-child {

    margin-left: auto;

    color: var(--gold);

    font-size: 13px;

    transition: transform 0.3s ease;
}


.mobile-customer-care:hover {

    border-color: var(--gold);

    background:
        rgba(201, 162, 39, 0.12);
}


.mobile-customer-care:hover
> i:last-child {

    transform: translateX(5px);
}


.mobile-customer-care div {

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.mobile-customer-care strong {

    font-size: 13px;
}


.mobile-customer-care small {

    color: var(--text-muted);

    font-size: 10px;
}


/* ============================================================
   15. TEMPORARY HOME
============================================================ */

.temporary-home {

    min-height: 700px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            135deg,
            #071426,
            #102a46
        );

    color: var(--white);

    text-align: center;
}


.temporary-home .container {

    max-width: 800px;
}


.temporary-home p:first-child {

    color: var(--gold);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 20px;
}


.temporary-home h1 {

    font-family: "Montserrat", sans-serif;

    font-size: clamp(40px, 6vw, 72px);

    line-height: 1.05;

    margin-bottom: 25px;
}


.temporary-home h1 span {

    display: block;

    color: var(--gold-light);
}


.temporary-home p:last-child {

    color: #aebccc;

    font-size: 16px;
}


/* ============================================================
   16. RESPONSIVE — TABLET
============================================================ */

@media (max-width: 1200px) {

    .container {

        width:
            calc(100% - 50px);
    }


    .desktop-navigation {

        gap: 20px;
    }


    .nav-links {

        gap: 18px;
    }


    .nav-link {

        font-size: 12px;
    }


    .customer-care-button {

        padding:
            12px 14px;
    }

}


/* ============================================================
   17. RESPONSIVE — MOBILE
============================================================ */

@media (max-width: 950px) {

    .container {

        width:
            calc(100% - 36px);
    }


    /* Top information */

    .top-info-container {

        justify-content: center;

        gap: 15px;
    }


    .top-info-item {

        font-size: 10px;
    }


    .top-info-item:last-child {

        display: none;
    }


    .customer-care-info {

        padding-left: 15px;
    }


    /* Main navbar */

    .main-navbar {

        height: 78px;
    }


    .desktop-navigation {

        display: none;
    }


    .mobile-menu-button {

        display: flex;
    }


    .mobile-navigation {

        display: block;

        top: 120px;
    }


    /* Brand */

    .brand-logo {

        width: 45px;
        height: 45px;

        font-size: 15px;
    }


    .brand-name {

        font-size: 17px;
    }


    .brand-subtitle {

        font-size: 8px;

        letter-spacing: 4px;
    }

}


/* ============================================================
   18. RESPONSIVE — SMALL PHONES
============================================================ */

@media (max-width: 550px) {

    .container {

        width:
            calc(100% - 28px);
    }


    .top-info-bar {

        height: 36px;
    }


    .top-info-container {

        justify-content: center;
    }


    .top-info-item {

        font-size: 9px;
    }


    .top-info-item:first-child span {

        max-width: 210px;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }


    .main-navbar {

        height: 72px;
    }


    .brand {

        gap: 9px;
    }


    .brand-logo {

        width: 41px;
        height: 41px;
    }


    .brand-name {

        font-size: 15px;

        letter-spacing: 0.5px;
    }


    .brand-subtitle {

        font-size: 7px;

        letter-spacing: 3px;

        margin-top: 5px;
    }


    .mobile-menu-button {

        width: 42px;
        height: 42px;
    }


    .mobile-navigation {

        top: 108px;
    }

}


/* ============================================================
   END — SECTION 01 NAVBAR
============================================================ */







/* ============================================================
   GLOBALTRUST LOGISTICS
   SECTION 02 — HERO
============================================================ */


/* ============================================================
   01. HERO BASE
============================================================ */

.hero {

    min-height: calc(100vh - 130px);

    min-height: 760px;

    position: relative;

    overflow: hidden;

    display: flex;
    align-items: center;

    background: var(--navy-dark);

    color: var(--white);
}


/* ============================================================
   02. HERO BACKGROUND IMAGE
============================================================ */

.hero-background {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("assets/images/image.png");

    background-size: cover;

    background-position: center center;

    transform: scale(1.04);

    animation:
        heroBackgroundMove 18s ease-in-out infinite
        alternate;
}


/* Cinematic movement */

@keyframes heroBackgroundMove {

    from {

        transform:
            scale(1.04)
            translate3d(0, 0, 0);

    }

    to {

        transform:
            scale(1.10)
            translate3d(-1%, -0.5%, 0);

    }

}


/* ============================================================
   03. CINEMATIC OVERLAY
============================================================ */

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(4, 13, 25, 0.98) 0%,
            rgba(5, 17, 31, 0.91) 30%,
            rgba(5, 17, 31, 0.63) 53%,
            rgba(5, 17, 31, 0.25) 76%,
            rgba(5, 17, 31, 0.20) 100%
        );
}


/* Bottom cinematic fade */

.hero-overlay::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 180px;

    background:
        linear-gradient(
            to top,
            rgba(6, 17, 31, 0.75),
            transparent
        );
}


/* ============================================================
   04. HERO GLOW EFFECTS
============================================================ */

.hero-glow {

    position: absolute;

    z-index: 2;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(80px);

    opacity: 0.18;
}


.hero-glow-one {

    width: 420px;
    height: 420px;

    right: 12%;
    top: 8%;

    background:
        rgba(201, 162, 39, 0.45);
}


.hero-glow-two {

    width: 300px;
    height: 300px;

    left: 30%;
    bottom: -120px;

    background:
        rgba(18, 68, 110, 0.70);
}


/* ============================================================
   05. HERO CONTAINER
============================================================ */

.hero-container {

    position: relative;

    z-index: 5;

    min-height: 760px;

    display: flex;

    align-items: center;
}


/* ============================================================
   06. HERO CONTENT
============================================================ */

.hero-content {

    width: min(720px, 100%);

    padding-top: 50px;

    padding-bottom: 100px;
}


/* ============================================================
   07. HERO EYEBROW
============================================================ */

.hero-eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 24px;

    color: var(--gold-light);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2.2px;

    text-transform: uppercase;

    opacity: 0;

    animation:
        heroFadeUp 0.8s 0.15s ease forwards;
}


.eyebrow-line {

    width: 30px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold)
        );
}


.eyebrow-icon {

    font-size: 11px;

    color: var(--gold);
}


.eyebrow-dot {

    color: var(--gold);

    opacity: 0.6;
}


/* ============================================================
   08. HERO TITLE
============================================================ */

.hero-title {

    margin: 0 0 27px;

    font-family: "Montserrat", sans-serif;

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

    line-height: 0.99;

    letter-spacing: -2.8px;

    font-weight: 800;
}


.hero-title-line {

    display: block;

    opacity: 0;

    transform: translateY(35px);

    animation:
        heroTitleReveal
        0.9s
        0.35s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


.hero-title-line:nth-child(2) {

    animation-delay: 0.52s;
}


.hero-title-highlight {

    display: block;

    color: var(--gold-light);

    opacity: 0;

    transform: translateY(35px);

    animation:
        heroTitleReveal
        0.9s
        0.69s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


@keyframes heroTitleReveal {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ============================================================
   09. HERO DESCRIPTION
============================================================ */

.hero-description {

    max-width: 650px;

    margin-bottom: 14px;

    color: rgba(241, 245, 249, 0.90);

    font-size: 16px;

    line-height: 1.8;

    font-weight: 400;

    opacity: 0;

    transform: translateY(25px);

    animation:
        heroFadeUp
        0.8s
        0.95s
        ease
        forwards;
}


.hero-secondary-description {

    max-width: 620px;

    margin-bottom: 30px;

    color: rgba(203, 213, 225, 0.68);

    font-size: 13px;

    line-height: 1.75;

    opacity: 0;

    transform: translateY(20px);

    animation:
        heroFadeUp
        0.8s
        1.08s
        ease
        forwards;
}


/* ============================================================
   10. HERO ACTIONS
============================================================ */

.hero-actions {

    display: flex;

    align-items: center;

    gap: 13px;

    flex-wrap: wrap;

    margin-bottom: 22px;

    opacity: 0;

    transform: translateY(20px);

    animation:
        heroFadeUp
        0.8s
        1.2s
        ease
        forwards;
}


.hero-button {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 0 23px;

    border-radius: 4px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;

    position: relative;

    overflow: hidden;
}


/* Primary */

.hero-button-primary {

    color: var(--navy-dark);

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

    border:
        1px solid
        var(--gold-light);

    box-shadow:
        0 8px 28px
        rgba(201, 162, 39, 0.18);
}


.hero-button-primary::before {

    content: "";

    position: absolute;

    left: -130%;
    top: 0;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.35),
            transparent
        );

    transform: skewX(-20deg);

    transition:
        left 0.7s ease;
}


.hero-button-primary:hover::before {

    left: 150%;
}


.hero-button-primary:hover {

    transform: translateY(-3px);

    box-shadow:
        0 14px 35px
        rgba(201, 162, 39, 0.30);
}


.hero-button-primary i {

    transition:
        transform 0.3s ease;
}


.hero-button-primary:hover i {

    transform:
        translateX(5px);
}


/* Secondary */

.hero-button-secondary {

    color: var(--white);

    border:
        1px solid
        rgba(201, 162, 39, 0.60);

    background:
        rgba(6, 17, 31, 0.42);

    backdrop-filter: blur(10px);
}


.hero-button-secondary:hover {

    transform: translateY(-3px);

    background:
        rgba(201, 162, 39, 0.12);

    border-color:
        var(--gold-light);

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.25);
}


.hero-button-icon {

    color: var(--gold-light);

    font-size: 15px;
}


/* ============================================================
   11. PARCEL TICKET NOTICE
============================================================ */

.hero-ticket-notice {

    display: flex;

    align-items: center;

    gap: 13px;

    max-width: 580px;

    padding: 13px 15px;

    margin-bottom: 25px;

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

    background:
        linear-gradient(
            90deg,
            rgba(201, 162, 39, 0.09),
            rgba(201, 162, 39, 0.015)
        );

    opacity: 0;

    transform: translateY(20px);

    animation:
        heroFadeUp
        0.8s
        1.34s
        ease
        forwards;
}


.ticket-notice-icon {

    width: 35px;
    height: 35px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(201, 162, 39, 0.35);

    border-radius: 50%;

    color: var(--gold-light);

    font-size: 13px;
}


.ticket-notice-content {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.ticket-notice-content strong {

    color: var(--white);

    font-size: 11px;

    letter-spacing: 0.4px;
}


.ticket-notice-content span {

    color: #aebccc;

    font-size: 10px;

    line-height: 1.5;
}


/* ============================================================
   12. TRUST INDICATORS
============================================================ */

.hero-trust-list {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

    opacity: 0;

    transform: translateY(20px);

    animation:
        heroFadeUp
        0.8s
        1.47s
        ease
        forwards;
}


.hero-trust-item {

    display: flex;

    align-items: center;

    gap: 8px;

    color: rgba(226, 232, 240, 0.78);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.2px;
}


.trust-icon {

    color: var(--gold);

    font-size: 11px;
}


/* ============================================================
   13. FLOATING GLOBAL NETWORK CARD
============================================================ */

.hero-network-card {

    position: absolute;

    right: 5%;

    top: 29%;

    width: 205px;

    padding: 14px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 5px;

    background:
        rgba(6, 17, 31, 0.52);

    backdrop-filter: blur(14px);

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.25);

    opacity: 0;

    animation:
        networkCardReveal
        1s
        1.5s
        ease
        forwards,
        networkFloat
        5s
        2.5s
        ease-in-out
        infinite;
}


@keyframes networkCardReveal {

    from {

        opacity: 0;

        transform:
            translateY(20px)
            translateX(15px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            translateX(0);

    }

}


@keyframes networkFloat {

    0%,
    100% {

        margin-top: 0;

    }

    50% {

        margin-top: -8px;

    }

}


.network-card-icon {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(201, 162, 39, 0.35);

    border-radius: 50%;

    color: var(--gold-light);

    font-size: 13px;
}


.network-card-content {

    display: flex;

    flex-direction: column;

    gap: 4px;

    flex: 1;
}


.network-card-content span {

    color: #9aa8b8;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


.network-card-content strong {

    color: var(--white);

    font-size: 10px;

    letter-spacing: 0.5px;
}


.network-card-status {

    position: absolute;

    left: 14px;

    bottom: -20px;

    display: flex;

    align-items: center;

    gap: 5px;

    color: rgba(226, 232, 240, 0.65);

    font-size: 8px;
}


.network-card-status span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #63c174;

    box-shadow:
        0 0 8px
        rgba(99, 193, 116, 0.7);

}


/* ============================================================
   14. HERO SCROLL INDICATOR
============================================================ */

.hero-scroll {

    position: absolute;

    right: 34px;

    bottom: 45px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: rgba(255, 255, 255, 0.58);

    font-size: 8px;

    letter-spacing: 1.7px;

    text-transform: uppercase;

    opacity: 0;

    animation:
        heroFadeIn
        1s
        1.8s
        ease
        forwards;
}


.scroll-line {

    width: 1px;

    height: 42px;

    background:
        linear-gradient(
            to bottom,
            var(--gold),
            transparent
        );

    animation:
        scrollLinePulse
        2s
        ease-in-out
        infinite;
}


.hero-scroll i {

    color: var(--gold);

    font-size: 9px;

    animation:
        scrollArrow
        1.8s
        ease-in-out
        infinite;
}


@keyframes scrollLinePulse {

    0%,
    100% {

        opacity: 0.4;

    }

    50% {

        opacity: 1;

    }

}


@keyframes scrollArrow {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(4px);

    }

}


/* ============================================================
   15. HERO PARTICLES
============================================================ */

.hero-particle {

    position: absolute;

    z-index: 3;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: var(--gold-light);

    opacity: 0.45;

    box-shadow:
        0 0 12px
        rgba(201, 162, 39, 0.65);

    pointer-events: none;
}


.particle-one {

    top: 24%;
    left: 46%;

    animation:
        particleFloatOne
        6s
        ease-in-out
        infinite;
}


.particle-two {

    top: 68%;
    left: 55%;

    animation:
        particleFloatTwo
        7s
        ease-in-out
        infinite;
}


.particle-three {

    top: 17%;
    right: 25%;

    animation:
        particleFloatThree
        8s
        ease-in-out
        infinite;
}


.particle-four {

    bottom: 25%;
    right: 35%;

    animation:
        particleFloatOne
        9s
        ease-in-out
        infinite reverse;
}


.particle-five {

    top: 44%;
    right: 12%;

    animation:
        particleFloatTwo
        7s
        ease-in-out
        infinite reverse;
}


@keyframes particleFloatOne {

    0%,
    100% {

        transform:
            translate(0, 0);

        opacity: 0.25;

    }

    50% {

        transform:
            translate(12px, -18px);

        opacity: 0.75;

    }

}


@keyframes particleFloatTwo {

    0%,
    100% {

        transform:
            translate(0, 0);

        opacity: 0.20;

    }

    50% {

        transform:
            translate(-15px, 12px);

        opacity: 0.70;

    }

}


@keyframes particleFloatThree {

    0%,
    100% {

        transform:
            translate(0, 0);

        opacity: 0.30;

    }

    50% {

        transform:
            translate(10px, 15px);

        opacity: 0.75;

    }

}


/* ============================================================
   16. GENERAL HERO ANIMATION
============================================================ */

@keyframes heroFadeUp {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes heroFadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}


/* ============================================================
   17. TABLET RESPONSIVE
============================================================ */

@media (max-width: 1100px) {

    .hero {

        min-height: 720px;
    }


    .hero-container {

        min-height: 720px;
    }


    .hero-content {

        width: min(650px, 100%);

    }


    .hero-title {

        font-size: clamp(
            45px,
            6vw,
            70px
        );
    }


    .hero-network-card {

        right: 3%;

        top: 24%;
    }

}


/* ============================================================
   18. MOBILE RESPONSIVE
============================================================ */

@media (max-width: 950px) {

    .hero {

        min-height: 850px;

        align-items: flex-start;
    }


    .hero-container {

        min-height: 850px;

        align-items: flex-start;
    }


    .hero-background {

        background-position:
            64% center;

        animation-duration: 22s;
    }


    .hero-overlay {

        background:

            linear-gradient(
                180deg,
                rgba(4, 13, 25, 0.96) 0%,
                rgba(5, 17, 31, 0.88) 35%,
                rgba(5, 17, 31, 0.60) 65%,
                rgba(5, 17, 31, 0.72) 100%
            );
    }


    .hero-content {

        width: 100%;

        padding-top: 90px;

        padding-bottom: 150px;
    }


    .hero-title {

        font-size:
            clamp(
                42px,
                10vw,
                65px
            );

        letter-spacing:
            -1.8px;
    }


    .hero-description {

        max-width: 600px;

        font-size: 14px;

        line-height: 1.75;
    }


    .hero-secondary-description {

        font-size: 12px;
    }


    .hero-network-card {

        display: none;
    }


    .hero-scroll {

        right: 20px;

        bottom: 30px;
    }


    .hero-trust-list {

        gap: 13px 20px;
    }

}


/* ============================================================
   19. SMALL MOBILE
============================================================ */

@media (max-width: 550px) {

    .hero {

        min-height: 900px;
    }


    .hero-container {

        min-height: 900px;
    }


    .hero-background {

        background-position:
            66% center;
    }


    .hero-content {

        padding-top: 70px;

        padding-bottom: 130px;
    }


    .hero-eyebrow {

        font-size: 8px;

        letter-spacing: 1.5px;

        gap: 6px;

        margin-bottom: 19px;
    }


    .eyebrow-line {

        width: 20px;
    }


    .hero-title {

        font-size:
            clamp(
                39px,
                11vw,
                54px
            );

        line-height: 1.01;

        letter-spacing: -1.5px;

        margin-bottom: 22px;
    }


    .hero-description {

        font-size: 13px;

        line-height: 1.75;

        margin-bottom: 12px;
    }


    .hero-secondary-description {

        font-size: 11px;

        line-height: 1.7;

        margin-bottom: 25px;
    }


    .hero-actions {

        width: 100%;

        flex-direction: column;

        align-items: stretch;

        gap: 10px;
    }


    .hero-button {

        width: 100%;

        min-height: 53px;
    }


    .hero-ticket-notice {

        margin-top: 3px;

        padding: 12px;

        max-width: 100%;
    }


    .ticket-notice-content span {

        font-size: 9px;
    }


    .hero-trust-list {

        display: grid;

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

        gap: 13px 8px;
    }


    .hero-trust-item {

        font-size: 9px;
    }


    .hero-scroll {

        display: none;
    }


    .hero-particle {

        opacity: 0.25;
    }

}


/* ============================================================
   20. REDUCED MOTION ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .hero-background,
    .hero-title-line,
    .hero-title-highlight,
    .hero-eyebrow,
    .hero-description,
    .hero-secondary-description,
    .hero-actions,
    .hero-ticket-notice,
    .hero-trust-list,
    .hero-network-card,
    .hero-scroll,
    .hero-particle {

        animation: none;

        opacity: 1;

        transform: none;
    }

}


/* ============================================================
   END — SECTION 02 HERO
============================================================ */







/* ============================================================
   GLOBALTRUST LOGISTICS
   SECTION 03 — ABOUT
   PREMIUM NAVY / ROYAL BLUE / GOLD DESIGN
============================================================ */


/* ============================================================
   01. ABOUT SECTION BASE
============================================================ */

.about-section {

    position: relative;

    overflow: hidden;

    padding: 125px 0 115px;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(37, 99, 235, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 72%,
            rgba(201, 162, 39, 0.10),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #071a32 0%,
            #0b2747 45%,
            #0a2039 100%
        );

    color: #ffffff;
}


/* ============================================================
   02. MAIN CONTAINER
============================================================ */

.about-container {

    position: relative;

    z-index: 5;

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

    margin: 0 auto;
}


/* ============================================================
   03. DECORATIVE BACKGROUND GLOWS
============================================================ */

.about-bg-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(90px);

    opacity: 0.45;

    z-index: 0;
}


.about-bg-glow-one {

    width: 500px;

    height: 500px;

    top: -180px;

    left: -200px;

    background:
        rgba(37, 99, 235, 0.22);
}


.about-bg-glow-two {

    width: 450px;

    height: 450px;

    right: -180px;

    bottom: -100px;

    background:
        rgba(201, 162, 39, 0.12);
}


/* ============================================================
   04. SUBTLE GRID OVERLAY
============================================================ */

.about-section::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.035;

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

    background-size:
        60px 60px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );
}


/* ============================================================
   05. SECTION EYEBROW
============================================================ */

.section-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: #e5c45a;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.4px;

    text-transform: uppercase;
}


.section-eyebrow-line {

    width: 38px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d4af37
        );
}


.section-eyebrow-icon {

    width: 24px;

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(212, 175, 55, 0.45);

    border-radius: 50%;

    color: #f1d675;

    background:
        rgba(212, 175, 55, 0.08);

    font-size: 9px;
}


/* ============================================================
   06. ABOUT INTRO
============================================================ */

.about-intro {

    max-width: 850px;

    margin-bottom: 75px;
}


.about-heading {

    max-width: 900px;

    margin: 0 0 28px;

    color: #ffffff;

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        clamp(
            43px,
            5.2vw,
            70px
        );

    line-height: 1.04;

    letter-spacing: -2.7px;

    font-weight: 800;
}


.about-heading span {

    color: #e3bd42;

    text-shadow:
        0 0 25px
        rgba(212, 175, 55, 0.12);
}


.about-intro-text {

    max-width: 760px;

    margin: 0;

    color:
        rgba(235, 242, 250, 0.78);

    font-size: 16px;

    line-height: 1.9;
}


/* ============================================================
   07. STORY AREA
============================================================ */

.about-story {

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    gap: 75px;

    align-items: center;

    margin-bottom: 105px;
}


/* ============================================================
   08. ABOUT IMAGE WRAPPER
============================================================ */

.about-image-wrapper {

    position: relative;

    padding:
        0 30px
        30px
        0;
}


/* ============================================================
   09. IMAGE FRAME
============================================================ */

.about-image-frame {

    position: relative;

    min-height: 550px;

    overflow: hidden;

    border:
        1px solid
        rgba(226, 190, 68, 0.45);

    border-radius: 3px;

    background:
        linear-gradient(
            135deg,
            #0b2b4c,
            #07182c
        );

    box-shadow:
        0 30px 70px
        rgba(0, 0, 0, 0.28),

        0 0 0 1px
        rgba(255, 255, 255, 0.025);
}


.about-image {
    position: absolute;
    inset: 0;

    background-image: url("assets/images/image.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transform: scale(1.02);

    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-image-frame:hover
.about-image {

    transform: scale(1.08);
}


/* ============================================================
   10. IMAGE OVERLAY
============================================================ */

.about-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4, 20, 39, 0.02) 10%,
            rgba(4, 20, 39, 0.12) 45%,
            rgba(4, 20, 39, 0.88) 100%
        );
}


/* ============================================================
   11. IMAGE LABEL
============================================================ */

.about-image-label {

    position: absolute;

    left: 25px;

    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 13px 17px;

    border:
        1px solid
        rgba(226, 190, 68, 0.4);

    border-radius: 3px;

    background:
        rgba(5, 24, 44, 0.78);

    backdrop-filter:
        blur(16px);

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.2);
}


.about-image-label-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(226, 190, 68, 0.5);

    border-radius: 50%;

    color: #f0d36a;

    background:
        rgba(212, 175, 55, 0.08);

    font-size: 12px;
}


.about-image-label div {

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.about-image-label strong {

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


.about-image-label span {

    color:
        rgba(220, 230, 240, 0.68);

    font-size: 8px;

    letter-spacing: 1.2px;
}


/* ============================================================
   12. IMAGE CORNER DETAILS
============================================================ */

.image-corner {

    position: absolute;

    width: 60px;

    height: 60px;

    pointer-events: none;
}


.image-corner-top {

    top: 14px;

    right: 14px;

    border-top:
        2px solid
        #d4af37;

    border-right:
        2px solid
        #d4af37;
}


.image-corner-bottom {

    bottom: 14px;

    left: 14px;

    border-bottom:
        2px solid
        #d4af37;

    border-left:
        2px solid
        #d4af37;
}


/* ============================================================
   13. LOCATION CARD
============================================================ */

.about-location-card {

    position: absolute;

    right: 0;

    bottom: 0;

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 230px;

    padding: 16px 18px;

    border:
        1px solid
        rgba(226, 190, 68, 0.35);

    border-radius: 3px;

    background:
        rgba(7, 30, 53, 0.94);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 20px 45px
        rgba(0, 0, 0, 0.3);
}


.location-card-icon {

    width: 39px;

    height: 39px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(226, 190, 68, 0.45);

    border-radius: 50%;

    color: #f0d36a;

    background:
        rgba(212, 175, 55, 0.08);

    font-size: 13px;
}


.location-card-content {

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.location-card-content span {

    color:
        rgba(190, 205, 220, 0.58);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.location-card-content strong {

    color: #ffffff;

    font-size: 11px;

    font-weight: 600;
}


/* ============================================================
   14. STORY CONTENT
============================================================ */

.about-story-content {

    position: relative;

    padding-left: 5px;
}


.story-number {

    margin-bottom: 12px;

    color:
        rgba(226, 190, 68, 0.45);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;
}


.story-small-title {

    display: block;

    margin-bottom: 13px;

    color: #e4c452;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.2px;

    text-transform: uppercase;
}


.story-heading-wrapper h3 {

    max-width: 580px;

    margin: 0 0 28px;

    color: #ffffff;

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        clamp(
            30px,
            3.4vw,
            47px
        );

    line-height: 1.12;

    letter-spacing: -1.4px;

    font-weight: 800;
}


.story-heading-wrapper h3 span {

    color: #e3bd42;
}


.about-story-content > p {

    max-width: 600px;

    margin: 0 0 18px;

    color:
        rgba(224, 234, 244, 0.72);

    font-size: 14px;

    line-height: 1.9;
}


/* ============================================================
   15. COMPANY INFORMATION
============================================================ */

.about-company-info {

    display: grid;

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

    gap: 12px;

    margin-top: 32px;
}


.company-info-item {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 16px;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 3px;

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

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}


.company-info-item:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(226, 190, 68, 0.4);

    background:
        rgba(226, 190, 68, 0.055);
}


.company-info-icon {

    width: 34px;

    height: 34px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(226, 190, 68, 0.35);

    border-radius: 50%;

    color: #f0d36a;

    background:
        rgba(212, 175, 55, 0.07);

    font-size: 11px;
}


.company-info-item > div:last-child {

    display: flex;

    flex-direction: column;

    gap: 6px;
}


.company-info-item span {

    color:
        rgba(190, 205, 220, 0.58);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.3px;
}


.company-info-item strong {

    color:
        rgba(247, 250, 252, 0.9);

    font-size: 10px;

    line-height: 1.55;

    font-weight: 600;
}


/* ============================================================
   16. MISSION SECTION
============================================================ */

.about-mission {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 310px;

    overflow: hidden;

    margin-bottom: 105px;

    padding: 55px 65px;

    border:
        1px solid
        rgba(226, 190, 68, 0.28);

    border-radius: 3px;

    background:
        linear-gradient(
            125deg,
            rgba(24, 74, 125, 0.48),
            rgba(16, 51, 87, 0.58),
            rgba(7, 28, 50, 0.65)
        );

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.18);
}


.about-mission::before {

    content: "";

    position: absolute;

    width: 390px;

    height: 390px;

    right: -145px;

    top: -145px;

    border:
        1px solid
        rgba(226, 190, 68, 0.15);

    border-radius: 50%;
}


.about-mission::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    right: -80px;

    top: -80px;

    border:
        1px solid
        rgba(226, 190, 68, 0.12);

    border-radius: 50%;
}


/* ============================================================
   17. MISSION DECORATION
============================================================ */

.mission-decoration {

    display: flex;

    flex-direction: column;

    gap: 7px;

    flex-shrink: 0;

    margin-right: 45px;
}


.mission-decoration span {

    display: block;

    height: 2px;

    background:
        #d4af37;

    opacity: 0.75;
}


.mission-decoration span:nth-child(1) {

    width: 50px;
}


.mission-decoration span:nth-child(2) {

    width: 34px;
}


.mission-decoration span:nth-child(3) {

    width: 19px;
}


/* ============================================================
   18. MISSION CONTENT
============================================================ */

.mission-content {

    position: relative;

    z-index: 3;
}


.mission-label {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 15px;

    color: #f0d36a;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


.mission-content h3 {

    max-width: 850px;

    margin: 0 0 19px;

    color: #ffffff;

    font-family:
        "Montserrat",
        sans-serif;

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

    line-height: 1.1;

    letter-spacing: -1.6px;

    font-weight: 800;
}


.mission-content h3 span {

    color: #e4c452;
}


.mission-content p {

    max-width: 730px;

    margin: 0;

    color:
        rgba(229, 238, 247, 0.72);

    font-size: 14px;

    line-height: 1.85;
}


/* ============================================================
   19. VALUES SECTION
============================================================ */

.about-values {

    margin-bottom: 110px;
}


.values-heading {

    display: grid;

    grid-template-columns:
        1fr 0.75fr;

    gap: 50px;

    align-items: end;

    margin-bottom: 42px;
}


.values-heading h3 {

    margin: 0;

    color: #ffffff;

    font-family:
        "Montserrat",
        sans-serif;

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

    letter-spacing: -1.5px;

    font-weight: 800;
}


.values-heading > p {

    margin: 0;

    color:
        rgba(215, 228, 239, 0.63);

    font-size: 13px;

    line-height: 1.85;
}


/* ============================================================
   20. VALUES GRID
============================================================ */

.values-grid {

    display: grid;

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

    gap: 15px;
}


/* ============================================================
   21. VALUE CARD
============================================================ */

.value-card {

    position: relative;

    min-height: 250px;

    overflow: hidden;

    padding: 26px;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 3px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}


.value-card::before {

    content: "";

    position: absolute;

    width: 130px;

    height: 130px;

    right: -65px;

    bottom: -65px;

    border-radius: 50%;

    background:
        rgba(212, 175, 55, 0.09);

    transition:
        transform 0.5s ease;
}


.value-card::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 45px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #d4af37,
            transparent
        );
}


.value-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(226, 190, 68, 0.4);

    background:
        linear-gradient(
            145deg,
            rgba(31, 90, 145, 0.18),
            rgba(255, 255, 255, 0.035)
        );

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


.value-card:hover::before {

    transform:
        scale(3);
}


/* ============================================================
   22. VALUE CARD TOP
============================================================ */

.value-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 35px;
}


.value-number {

    color:
        rgba(226, 190, 68, 0.5);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.6px;
}


.value-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(226, 190, 68, 0.35);

    border-radius: 50%;

    color: #f0d36a;

    background:
        rgba(212, 175, 55, 0.07);

    font-size: 13px;

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}


.value-card:hover
.value-icon {

    transform:
        rotate(8deg)
        scale(1.08);

    background:
        rgba(212, 175, 55, 0.13);
}


/* ============================================================
   23. VALUE CARD TEXT
============================================================ */

.value-card h4 {

    margin: 0 0 11px;

    color: #ffffff;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 17px;

    letter-spacing: -0.3px;

    font-weight: 700;
}


.value-card p {

    max-width: 280px;

    margin: 0;

    color:
        rgba(216, 228, 239, 0.63);

    font-size: 11px;

    line-height: 1.8;
}


/* ============================================================
   24. WHY GLOBALTRUST
============================================================ */

.why-globaltrust {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;

    padding: 65px;

    border:
        1px solid
        rgba(226, 190, 68, 0.28);

    border-radius: 3px;

    background:
        linear-gradient(
            120deg,
            rgba(18, 66, 111, 0.55),
            rgba(10, 38, 66, 0.7)
        );

    box-shadow:
        0 25px 65px
        rgba(0, 0, 0, 0.18);
}


/* ============================================================
   25. WHY CONTENT
============================================================ */

.why-globaltrust-content h3 {

    max-width: 560px;

    margin: 0 0 19px;

    color: #ffffff;

    font-family:
        "Montserrat",
        sans-serif;

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

    line-height: 1.1;

    letter-spacing: -1.5px;

    font-weight: 800;
}


.why-globaltrust-content > p {

    max-width: 510px;

    margin: 0 0 30px;

    color:
        rgba(221, 232, 242, 0.67);

    font-size: 13px;

    line-height: 1.85;
}


/* ============================================================
   26. SERVICES BUTTON
============================================================ */

.about-services-button {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    min-height: 52px;

    padding: 0 22px;

    border:
        1px solid
        #d4af37;

    border-radius: 2px;

    color: #f1d675;

    background:
        rgba(212, 175, 55, 0.04);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.1px;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.about-services-button:hover {

    color: #071a2f;

    background:
        #e3c352;

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 30px
        rgba(212, 175, 55, 0.18);
}


.about-services-button i {

    transition:
        transform 0.3s ease;
}


.about-services-button:hover i {

    transform:
        translateX(6px);
}


/* ============================================================
   27. WHY LIST
============================================================ */

.why-globaltrust-list {

    display: grid;

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

    gap: 13px;
}


.why-item {

    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 67px;

    padding: 13px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 3px;

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

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}


.why-item:hover {

    transform:
        translateX(5px);

    border-color:
        rgba(226, 190, 68, 0.35);

    background:
        rgba(226, 190, 68, 0.055);
}


.why-item > span {

    width: 28px;

    height: 28px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(226, 190, 68, 0.3);

    border-radius: 50%;

    color: #f0d36a;

    background:
        rgba(212, 175, 55, 0.07);

    font-size: 9px;
}


.why-item strong {

    color:
        rgba(245, 248, 251, 0.82);

    font-size: 10px;

    line-height: 1.45;

    font-weight: 600;
}


/* ============================================================
   28. BOTTOM BRAND STATEMENT
============================================================ */

.about-bottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-top: 75px;
}


.about-bottom-line {

    width: 90px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(226, 190, 68, 0.55)
        );
}


.about-bottom-line:last-child {

    transform:
        rotate(180deg);
}


.about-bottom p {

    margin: 0;

    color:
        rgba(216, 228, 239, 0.46);

    font-size: 9px;

    letter-spacing: 1px;

    text-align: center;

    text-transform: uppercase;
}


.about-bottom strong {

    color:
        rgba(226, 190, 68, 0.85);

    font-weight: 700;
}


/* ============================================================
   29. SCROLL REVEAL
============================================================ */
/* ============================================================
   29. ABOUT SECTION ANIMATION
============================================================ */

.about-intro,
.about-story,
.about-mission,
.about-values,
.why-globaltrust,
.about-bottom {

    animation:
        aboutFadeUp 1s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ) both;
}


.about-story {

    animation-delay: 0.12s;
}


.about-mission {

    animation-delay: 0.22s;
}


.about-values {

    animation-delay: 0.32s;
}


.why-globaltrust {

    animation-delay: 0.42s;
}


.about-bottom {

    animation-delay: 0.52s;
}


@keyframes aboutFadeUp {

    from {

        opacity: 0;

        transform:
            translateY(35px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ============================================================
   30. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .about-intro,
    .about-story,
    .about-mission,
    .about-values,
    .why-globaltrust,
    .about-bottom {

        animation: none;

        opacity: 1;

        transform: none;
    }

}













/* ============================================================
   GLOBALTRUST LOGISTICS
   SECTION 04 — OUR SERVICES
   PREMIUM / MODERN / RESPONSIVE DESIGN
============================================================ */


/* ============================================================
   01. SERVICES SECTION
============================================================ */

.services-section {
    position: relative;
    overflow: hidden;

    padding: 140px 0 100px;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(212, 175, 55, 0.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 45%,
            rgba(39, 92, 150, 0.12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #05080d 0%,
            #08111d 45%,
            #05080d 100%
        );

    color: #ffffff;
}


/* ============================================================
   02. BACKGROUND GLOW
============================================================ */

.services-bg-glow {
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    opacity: 0.22;
}


.services-bg-glow-one {
    top: 8%;
    left: -220px;

    background: rgba(212, 175, 55, 0.22);
}


.services-bg-glow-two {
    right: -220px;
    bottom: 10%;

    background: rgba(25, 87, 145, 0.28);
}


/* ============================================================
   03. GRID OVERLAY
============================================================ */

.services-grid-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.035;

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

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );
}


/* ============================================================
   04. CONTAINER
============================================================ */

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


/* ============================================================
   05. SECTION INTRO
============================================================ */

.services-intro {
    max-width: 850px;

    margin: 0 auto 100px;

    text-align: center;
}


.services-intro .section-eyebrow {
    justify-content: center;
}


.services-heading {
    margin: 25px 0 25px;

    font-family: "Montserrat", sans-serif;

    font-size: clamp(
        42px,
        6vw,
        78px
    );

    line-height: 1.02;

    font-weight: 800;

    letter-spacing: -2.5px;

    color: #ffffff;
}


.services-heading span {
    display: block;

    color: #d4af37;

    background:
        linear-gradient(
            90deg,
            #b88a20,
            #f5d76e,
            #d4af37
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.services-intro-text {
    max-width: 760px;

    margin: 0 auto 18px;

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

    font-size: 18px;

    line-height: 1.9;

    font-weight: 500;
}


.services-intro-subtext {
    max-width: 700px;

    margin: auto;

    color: rgba(255, 255, 255, 0.48);

    font-size: 15px;

    line-height: 1.8;
}


/* ============================================================
   06. GLOBAL REACH
============================================================ */

.global-reach-section {
    margin-bottom: 120px;

    padding: 55px;

    border: 1px solid rgba(212, 175, 55, 0.18);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 30px 80px rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(12px);
}


.global-reach-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 42px;
}


.services-small-label {
    display: inline-block;

    margin-bottom: 13px;

    color: #d4af37;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.global-reach-header h3,
.services-main-header h3,
.transport-content h3,
.statistics-heading h3 {
    margin: 0;

    font-family: "Montserrat", sans-serif;

    font-size: clamp(
        28px,
        4vw,
        44px
    );

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;

    color: #ffffff;
}


.global-reach-header h3 span,
.services-main-header h3 span,
.transport-content h3 span,
.statistics-heading h3 span {
    color: #d4af37;
}


.global-reach-header > p {
    max-width: 430px;

    margin: 0;

    color: rgba(255, 255, 255, 0.52);

    font-size: 14px;

    line-height: 1.8;
}


/* ============================================================
   07. CONTINENTS GRID
============================================================ */

.continents-grid {
    display: grid;

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

    gap: 14px;
}


.continent-card {
    display: flex;

    align-items: center;

    gap: 18px;

    min-height: 90px;

    padding: 18px 20px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 16px;

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

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease,
        box-shadow 0.4s ease;
}


.continent-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(212, 175, 55, 0.45);

    background:
        rgba(212, 175, 55, 0.055);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.25);
}


.continent-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    border: 1px solid
        rgba(212, 175, 55, 0.3);

    color: #d4af37;

    background:
        rgba(212, 175, 55, 0.07);

    font-size: 17px;
}


.continent-card strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;
}


.continent-card small {
    display: block;

    color: rgba(255, 255, 255, 0.42);

    font-size: 11px;

    line-height: 1.5;
}


/* ============================================================
   08. SERVICES MAIN HEADER
============================================================ */

.services-main-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 45px;
}


.services-main-header > p {
    max-width: 450px;

    margin: 0;

    color: rgba(255, 255, 255, 0.5);

    font-size: 14px;

    line-height: 1.8;
}


/* ============================================================
   09. SERVICES GRID
============================================================ */

.services-grid {
    display: grid;

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

    gap: 22px;

    margin-bottom: 110px;
}


/* ============================================================
   10. SERVICE CARD
============================================================ */

.service-card {
    position: relative;

    min-height: 460px;

    overflow: hidden;

    border-radius: 25px;

    border: 1px solid
        rgba(255, 255, 255, 0.08);

    background:
        #0b1420;

    isolation: isolate;

    transition:
        transform 0.5s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        border-color 0.4s ease,
        box-shadow 0.5s ease;
}


.service-card:hover {
    transform: translateY(-10px);

    border-color:
        rgba(212, 175, 55, 0.45);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.45);
}


/* ============================================================
   11. SERVICE CARD IMAGE
============================================================ */

.service-card-image {
    position: absolute;

    inset: 0;

    z-index: -3;

    background-size: cover;

    background-position: center;

    transform: scale(1.04);

    transition:
        transform 1s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.service-card:hover .service-card-image {
    transform: scale(1.1);
}


/* ============================================================
   12. SERVICE IMAGES
============================================================ */

/*
   These are external image URLs so the cards display
   immediately.

   You can later replace them with your own company images.
*/


.service-air-image {
    background-image:
        url(
            "https://images.unsplash.com/photo-1436491865332-7a61a109cc05?auto=format&fit=crop&w=1400&q=85"
        );
}


.service-ocean-image {
    background-image:
        url(
            "https://images.unsplash.com/photo-1494412651409-8963ce7935a7?auto=format&fit=crop&w=1400&q=85"
        );
}


.service-land-image {
    background-image:
        url(
            "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1400&q=85"
        );
}


.service-parcel-image {
    background-image:
        url(
            "https://images.unsplash.com/photo-1580674684081-7617fbf3d745?auto=format&fit=crop&w=1400&q=85"
        );
}


.service-home-image {
    background-image:
        url(
            "https://images.unsplash.com/photo-1605902711622-cfb43c4437b5?auto=format&fit=crop&w=1400&q=85"
        );
}


.service-international-image {
    background-image:
        url(
            "https://images.unsplash.com/photo-1526772662000-3f88f10405ff?auto=format&fit=crop&w=1400&q=85"
        );
}


/* ============================================================
   13. CARD OVERLAY
============================================================ */

.service-card-overlay {
    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            to top,
            rgba(3, 7, 12, 0.98) 0%,
            rgba(3, 7, 12, 0.78) 42%,
            rgba(3, 7, 12, 0.32) 75%,
            rgba(3, 7, 12, 0.15) 100%
        );

    transition:
        background 0.5s ease;
}


.service-card:hover
.service-card-overlay {
    background:
        linear-gradient(
            to top,
            rgba(3, 7, 12, 0.98) 0%,
            rgba(3, 7, 12, 0.75) 48%,
            rgba(3, 7, 12, 0.25) 100%
        );
}


/* ============================================================
   14. SERVICE CARD CONTENT
============================================================ */

.service-card-content {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 32px;
}


.service-card-top {
    position: absolute;

    top: 28px;
    left: 30px;
    right: 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.service-number {
    color: rgba(255, 255, 255, 0.45);

    font-family: "Montserrat", sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}


.service-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    border-radius: 50%;

    border: 1px solid
        rgba(212, 175, 55, 0.4);

    background:
        rgba(5, 8, 13, 0.65);

    color: #f1cc55;

    backdrop-filter: blur(10px);

    font-size: 19px;

    transition:
        transform 0.4s ease,
        background 0.4s ease;
}


.service-card:hover .service-icon {
    transform: rotate(-8deg) scale(1.08);

    background:
        rgba(212, 175, 55, 0.15);
}


.service-category {
    margin-bottom: 9px;

    color: #d4af37;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


.service-card h4 {
    margin: 0 0 13px;

    color: #ffffff;

    font-family: "Montserrat", sans-serif;

    font-size: 30px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -0.7px;
}


.service-card p {
    max-width: 520px;

    margin: 0 0 24px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 14px;

    line-height: 1.75;
}


/* ============================================================
   15. SERVICE LINK
============================================================ */

.service-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    width: fit-content;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        color 0.3s ease,
        gap 0.3s ease;
}


.service-link i {
    color: #d4af37;

    transition:
        transform 0.3s ease;
}


.service-link:hover {
    color: #d4af37;

    gap: 17px;
}


.service-link:hover i {
    transform: translateX(4px);
}


/* ============================================================
   16. TRANSPORTATION CAPABILITY
============================================================ */

.transport-capability {
    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap: 60px;

    align-items: center;

    margin-bottom: 110px;

    padding: 70px;

    border-radius: 30px;

    border: 1px solid
        rgba(212, 175, 55, 0.18);

    background:
        linear-gradient(
            120deg,
            rgba(212, 175, 55, 0.07),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.28);
}


.transport-content h3 {
    margin: 20px 0;

    font-size: clamp(
        30px,
        4vw,
        46px
    );
}


.transport-content > p {
    max-width: 520px;

    margin: 0;

    color: rgba(255, 255, 255, 0.52);

    font-size: 14px;

    line-height: 1.9;
}


/* ============================================================
   17. TRANSPORT FEATURES
============================================================ */

.transport-features {
    display: flex;

    flex-direction: column;

    gap: 13px;
}


.transport-feature {
    display: grid;

    grid-template-columns: 58px 1fr;

    gap: 17px;

    padding: 20px;

    border-radius: 16px;

    border: 1px solid
        rgba(255, 255, 255, 0.06);

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

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}


.transport-feature:hover {
    transform: translateX(7px);

    border-color:
        rgba(212, 175, 55, 0.35);

    background:
        rgba(212, 175, 55, 0.045);
}


.transport-feature-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    border-radius: 15px;

    color: #d4af37;

    background:
        rgba(212, 175, 55, 0.08);

    border: 1px solid
        rgba(212, 175, 55, 0.18);

    font-size: 19px;
}


.transport-feature span {
    display: block;

    margin-bottom: 5px;

    color: #d4af37;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.transport-feature strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-family: "Montserrat", sans-serif;

    font-size: 15px;
}


.transport-feature p {
    margin: 0;

    color: rgba(255, 255, 255, 0.42);

    font-size: 12px;

    line-height: 1.6;
}


/* ============================================================
   18. STATISTICS
============================================================ */

.services-statistics {
    margin-bottom: 110px;

    text-align: center;
}


.statistics-heading {
    margin-bottom: 45px;
}


.statistics-heading h3 {
    font-size: clamp(
        30px,
        4vw,
        48px
    );
}


.statistics-grid {
    display: grid;

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

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

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


.stat-item {
    position: relative;

    padding: 45px 30px;

    border-right: 1px solid
        rgba(255, 255, 255, 0.08);
}


.stat-item:last-child {
    border-right: none;
}


.stat-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin: 0 auto 18px;

    border-radius: 50%;

    border: 1px solid
        rgba(212, 175, 55, 0.28);

    color: #d4af37;

    background:
        rgba(212, 175, 55, 0.06);
}


.stat-item > strong {
    display: block;

    margin-bottom: 6px;

    color: #ffffff;

    font-family: "Montserrat", sans-serif;

    font-size: clamp(
        38px,
        5vw,
        58px
    );

    line-height: 1;

    font-weight: 800;
}


.stat-item > strong sup {
    color: #d4af37;

    font-size: 24px;

    vertical-align: top;
}


.stat-item > span {
    display: block;

    color: #d4af37;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


.stat-item p {
    max-width: 260px;

    margin: 13px auto 0;

    color: rgba(255, 255, 255, 0.4);

    font-size: 12px;

    line-height: 1.7;
}


/* ============================================================
   19. CUSTOMER SUPPORT CTA
============================================================ */

.services-cta {
    position: relative;

    overflow: hidden;

    margin-bottom: 70px;

    padding: 75px 60px;

    text-align: center;

    border-radius: 30px;

    border: 1px solid
        rgba(212, 175, 55, 0.35);

    background:
        radial-gradient(
            circle at center,
            rgba(212, 175, 55, 0.12),
            transparent 55%
        ),
        linear-gradient(
            135deg,
            #101722,
            #070b11
        );

    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.35);
}


.services-cta-glow {
    position: absolute;

    top: -160px;
    left: 50%;

    width: 420px;
    height: 300px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        rgba(212, 175, 55, 0.1);

    filter: blur(80px);

    pointer-events: none;
}


.services-cta-content {
    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: auto;
}


.services-cta-label {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: #d4af37;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.services-cta h3 {
    margin: 0 0 20px;

    font-family: "Montserrat", sans-serif;

    font-size: clamp(
        32px,
        5vw,
        58px
    );

    line-height: 1.08;

    letter-spacing: -1.5px;

    color: #ffffff;
}


.services-cta h3 span {
    color: #d4af37;
}


.services-cta p {
    max-width: 650px;

    margin: 0 auto 32px;

    color: rgba(255, 255, 255, 0.55);

    font-size: 15px;

    line-height: 1.8;
}


/* ============================================================
   20. CTA BUTTONS
============================================================ */

.services-cta-actions {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 13px;
}


.services-primary-button,
.services-secondary-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 52px;

    padding: 0 25px;

    border-radius: 9px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}


.services-primary-button {
    color: #080b10;

    background:
        linear-gradient(
            135deg,
            #b88a20,
            #f1d26a,
            #c49a2c
        );

    box-shadow:
        0 12px 30px rgba(212, 175, 55, 0.18);
}


.services-primary-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 38px rgba(212, 175, 55, 0.28);
}


.services-secondary-button {
    color: #ffffff;

    border: 1px solid
        rgba(212, 175, 55, 0.35);

    background:
        rgba(255, 255, 255, 0.035);
}


.services-secondary-button:hover {
    transform: translateY(-3px);

    color: #d4af37;

    border-color:
        rgba(212, 175, 55, 0.7);

    background:
        rgba(212, 175, 55, 0.07);
}


/* ============================================================
   21. SUPPORT EMAIL
============================================================ */

.services-support-email {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 25px;

    color: rgba(255, 255, 255, 0.38);

    font-size: 12px;
}


.services-support-email i {
    color: #d4af37;
}


/* ============================================================
   22. BOTTOM STATEMENT
============================================================ */

.services-bottom {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    padding-top: 15px;
}


.services-bottom-line {
    width: 90px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212, 175, 55, 0.5)
        );
}


.services-bottom-line:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(212, 175, 55, 0.5),
            transparent
        );
}


.services-bottom p {
    margin: 0;

    color: rgba(255, 255, 255, 0.38);

    font-size: 11px;

    letter-spacing: 1px;

    text-align: center;
}


.services-bottom strong {
    color: #d4af37;

    font-weight: 700;
}


/* ============================================================
   23. TABLET
============================================================ */

@media (max-width: 900px) {

    .services-section {
        padding:
            110px 0 80px;
    }


    .global-reach-section {
        padding: 40px 30px;
    }


    .global-reach-header,
    .services-main-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }


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


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


    .transport-capability {
        grid-template-columns: 1fr;

        padding: 45px 35px;

        gap: 40px;
    }


    .statistics-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .stat-item {
        padding:
            35px 15px;
    }

}


/* ============================================================
   24. MOBILE
============================================================ */

@media (max-width: 650px) {

    .services-section {
        padding:
            85px 0 65px;
    }


    .services-intro {
        margin-bottom: 70px;
    }


    .services-heading {
        font-size: 42px;

        letter-spacing: -1.5px;
    }


    .services-intro-text {
        font-size: 15px;

        line-height: 1.8;
    }


    .services-intro-subtext {
        font-size: 13px;
    }


    .global-reach-section {
        margin-bottom: 80px;

        padding:
            32px 20px;

        border-radius: 22px;
    }


    .global-reach-header h3,
    .services-main-header h3 {
        font-size: 30px;
    }


    .continents-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .continent-card {
        min-height: 75px;
    }


    .services-grid {
        grid-template-columns: 1fr;

        gap: 15px;

        margin-bottom: 80px;
    }


    .service-card {
        min-height: 430px;

        border-radius: 20px;
    }


    .service-card-content {
        padding: 25px;
    }


    .service-card-top {
        top: 23px;

        left: 23px;

        right: 23px;
    }


    .service-card h4 {
        font-size: 27px;
    }


    .service-card p {
        font-size: 13px;

        line-height: 1.7;
    }


    .transport-capability {
        margin-bottom: 80px;

        padding:
            35px 22px;

        border-radius: 22px;
    }


    .transport-content h3 {
        font-size: 31px;
    }


    .transport-feature {
        grid-template-columns:
            48px 1fr;

        padding: 15px;
    }


    .transport-feature-icon {
        width: 48px;
        height: 48px;

        font-size: 16px;
    }


    .transport-feature strong {
        font-size: 13px;
    }


    .transport-feature p {
        font-size: 11px;
    }


    .services-statistics {
        margin-bottom: 80px;
    }


    .statistics-grid {
        grid-template-columns: 1fr;

        border-bottom: none;
    }


    .stat-item {
        padding: 35px 20px;

        border-right: none;

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


    .stat-item:last-child {
        border-bottom: none;
    }


    .services-cta {
        margin-bottom: 50px;

        padding:
            50px 22px;

        border-radius: 22px;
    }


    .services-cta h3 {
        font-size: 35px;

        letter-spacing: -1px;
    }


    .services-cta p {
        font-size: 13px;
    }


    .services-cta-actions {
        flex-direction: column;

        width: 100%;
    }


    .services-primary-button,
    .services-secondary-button {
        width: 100%;
    }


    .services-support-email {
        flex-wrap: wrap;

        justify-content: center;

        font-size: 10px;
    }


    .services-bottom {
        gap: 12px;
    }


    .services-bottom-line {
        width: 35px;
    }


    .services-bottom p {
        font-size: 9px;

        line-height: 1.6;
    }

}


/* ============================================================
   25. VERY SMALL PHONES
============================================================ */

@media (max-width: 380px) {

    .services-heading {
        font-size: 36px;
    }


    .service-card {
        min-height: 410px;
    }


    .service-card h4 {
        font-size: 24px;
    }


    .services-cta h3 {
        font-size: 30px;
    }

}


/* ============================================================
   26. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .service-card,
    .service-card-image,
    .service-icon,
    .continent-card,
    .transport-feature,
    .service-link,
    .services-primary-button,
    .services-secondary-button {
        transition: none;
    }

}











/* =========================================================
   GLOBALTRUST LOGISTICS
   SECTION 05 — WHY CHOOSE US
   BEGINNING
========================================================= */

/* =========================================================
   01. SECTION FOUNDATION
========================================================= */

.why-choose-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 120px 0;
    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(212, 175, 55, 0.11),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 42%,
            rgba(29, 111, 165, 0.14),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #061426 0%,
            #081a30 48%,
            #0A1D35 100%
        );
    color: #ffffff;
}

.why-container {
    position: relative;
    z-index: 3;
}


/* =========================================================
   02. BACKGROUND GLOWS
========================================================= */

.why-bg-glow {
    position: absolute;
    z-index: -2;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(10px);
    animation: whyGlowFloat 9s ease-in-out infinite alternate;
}

.why-bg-glow-one {
    width: 480px;
    height: 480px;
    top: 120px;
    left: -260px;
    background: radial-gradient(
        circle,
        rgba(212, 175, 55, 0.14) 0%,
        rgba(212, 175, 55, 0.04) 42%,
        transparent 72%
    );
}

.why-bg-glow-two {
    width: 560px;
    height: 560px;
    right: -300px;
    top: 720px;
    background: radial-gradient(
        circle,
        rgba(56, 189, 248, 0.12) 0%,
        rgba(29, 111, 165, 0.06) 42%,
        transparent 72%
    );
    animation-delay: -3s;
}

@keyframes whyGlowFloat {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(25px, -25px, 0) scale(1.08);
    }
}


/* =========================================================
   03. GRID OVERLAY
========================================================= */

.why-grid-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.22;

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

    background-size: 55px 55px;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );
}


/* =========================================================
   04. SECTION INTRO
========================================================= */

.why-intro {
    max-width: 850px;
    margin: 0 auto 85px;
    text-align: center;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;

    color: #D4AF37;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.section-eyebrow-line {
    width: 38px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        #D4AF37
    );
}

.section-eyebrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 50%;

    background: rgba(212, 175, 55, 0.08);

    box-shadow:
        0 0 18px rgba(212, 175, 55, 0.12);

    font-size: 0.65rem;
}

.why-heading {
    margin: 0;

    font-size: clamp(2.6rem, 5vw, 4.6rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.045em;

    color: #ffffff;

    text-shadow:
        0 0 30px rgba(255, 255, 255, 0.03);
}

.why-heading span {
    display: inline-block;

    background: linear-gradient(
        110deg,
        #D4AF37,
        #F2D675,
        #D4AF37
    );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    filter:
        drop-shadow(
            0 0 20px rgba(212, 175, 55, 0.16)
        );
}

.why-intro-text {
    max-width: 700px;
    margin: 27px auto 0;

    color: #B8C5D6;

    font-size: 1.02rem;
    line-height: 1.9;
}


/* =========================================================
   05. PREMIUM FEATURE AREA
========================================================= */

.why-feature-area {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 75px;

    margin-bottom: 130px;
}


/* =========================================================
   06. IMAGE WRAPPER
========================================================= */

.why-image-wrapper {
    position: relative;
}

.why-image-frame {
    position: relative;
    min-height: 560px;

    overflow: hidden;

    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 24px;

    background: #0A1D35;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35),
        0 0 60px rgba(29, 111, 165, 0.08);

    transform: translateZ(0);
}

.why-image {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            145deg,
            rgba(6, 20, 38, 0.15),
            rgba(6, 20, 38, 0.68)
        ),
        url("/assets/images/global-logistics.jpg")
        center / cover no-repeat;

    transform: scale(1.02);
    transition: transform 1s ease;
}

.why-image-frame:hover .why-image {
    transform: scale(1.07);
}

.why-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(6, 20, 38, 0.08) 10%,
            rgba(6, 20, 38, 0.12) 35%,
            rgba(6, 20, 38, 0.85) 100%
        );
}


/* =========================================================
   07. IMAGE BADGE
========================================================= */

.why-image-badge {
    position: absolute;
    left: 28px;
    bottom: 28px;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 14px 18px;

    border: 1px solid rgba(212, 175, 55, 0.32);
    border-radius: 14px;

    background: rgba(6, 20, 38, 0.76);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.25),
        0 0 30px rgba(212, 175, 55, 0.07);
}

.why-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 11px;

    color: #061426;

    background: linear-gradient(
        135deg,
        #F2D675,
        #D4AF37
    );

    box-shadow:
        0 0 22px rgba(212, 175, 55, 0.2);
}

.why-image-badge strong {
    display: block;

    color: #ffffff;

    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.why-image-badge small {
    display: block;

    margin-top: 4px;

    color: #B8C5D6;

    font-size: 0.65rem;
    letter-spacing: 0.1em;
}


/* =========================================================
   08. IMAGE LABEL
========================================================= */

.why-image-label {
    position: absolute;
    top: 25px;
    left: 25px;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 9px 13px;

    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: 50px;

    color: #ffffff;

    background: rgba(6, 20, 38, 0.62);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.why-image-label i {
    color: #38BDF8;
}


/* =========================================================
   09. IMAGE CORNERS
========================================================= */

.why-image-corner {
    position: absolute;

    width: 55px;
    height: 55px;

    pointer-events: none;
}

.why-image-corner-top {
    top: 18px;
    right: 18px;

    border-top: 1px solid rgba(212, 175, 55, 0.7);
    border-right: 1px solid rgba(212, 175, 55, 0.7);
}

.why-image-corner-bottom {
    right: 18px;
    bottom: 18px;

    border-right: 1px solid rgba(56, 189, 248, 0.55);
    border-bottom: 1px solid rgba(56, 189, 248, 0.55);
}


/* =========================================================
   10. FEATURE CONTENT
========================================================= */

.why-feature-content {
    position: relative;
}

.why-feature-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    margin-bottom: 24px;

    border: 1px solid rgba(212, 175, 55, 0.32);
    border-radius: 14px;

    color: #F2D675;

    background: rgba(212, 175, 55, 0.07);

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.why-feature-content h3 {
    max-width: 550px;
    margin: 0 0 24px;

    color: #ffffff;

    font-size: clamp(2rem, 3.5vw, 3.25rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.why-feature-content h3 span {
    color: #F2D675;
}

.why-feature-content p {
    max-width: 590px;

    margin: 0 0 18px;

    color: #B8C5D6;

    font-size: 0.98rem;
    line-height: 1.85;
}


/* =========================================================
   11. MINI HIGHLIGHTS
========================================================= */

.why-mini-highlights {
    display: flex;
    flex-direction: column;
    gap: 13px;

    margin-top: 30px;
}

.why-mini-item {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #ffffff;

    font-size: 0.88rem;
}

.why-mini-item > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    flex-shrink: 0;

    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 50%;

    color: #F2D675;

    background: rgba(212, 175, 55, 0.07);

    font-size: 0.65rem;
}


/* =========================================================
   12. WHAT SETS US APART
========================================================= */

.why-apart-section {
    margin-bottom: 120px;
}

.why-apart-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;

    margin-bottom: 45px;
}

.why-apart-heading .section-eyebrow {
    margin-bottom: 16px;
}

.why-apart-heading h3 {
    max-width: 650px;
    margin: 0;

    color: #ffffff;

    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.why-apart-heading h3 span {
    color: #D4AF37;
}

.why-apart-heading > p {
    max-width: 350px;
    margin: 0;

    color: #B8C5D6;

    font-size: 0.92rem;
    line-height: 1.75;
}


/* =========================================================
   13. BENEFIT CARDS
========================================================= */

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

.why-benefit-card {
    position: relative;

    min-height: 260px;
    padding: 28px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;

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

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.16);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        background 0.4s ease;
}

.why-benefit-card::before {
    content: "";

    position: absolute;
    top: -100px;
    right: -100px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(212, 175, 55, 0.11),
        transparent 70%
    );

    opacity: 0;
    transition: opacity 0.4s ease;
}

.why-benefit-card:hover {
    transform: translateY(-8px);

    border-color: rgba(212, 175, 55, 0.35);

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

    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.24),
        0 0 35px rgba(212, 175, 55, 0.07);
}

.why-benefit-card:hover::before {
    opacity: 1;
}

.why-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 34px;
}

.why-card-number {
    color: #B8C5D6;

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.why-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 13px;

    color: #F2D675;

    background: rgba(212, 175, 55, 0.07);

    box-shadow:
        0 0 25px rgba(212, 175, 55, 0.06);

    transition:
        transform 0.4s ease,
        background 0.4s ease;
}

.why-benefit-card:hover .why-card-icon {
    transform: rotate(-5deg) scale(1.08);

    background: rgba(212, 175, 55, 0.13);
}

.why-benefit-card h4 {
    margin: 0 0 13px;

    color: #ffffff;

    font-size: 1.12rem;
    font-weight: 750;
}

.why-benefit-card p {
    max-width: 300px;
    margin: 0;

    color: #B8C5D6;

    font-size: 0.86rem;
    line-height: 1.75;
}

.why-card-line {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 0;

    height: 2px;

    transform: scaleX(0);
    transform-origin: left;

    background: linear-gradient(
        90deg,
        #D4AF37,
        #38BDF8,
        transparent
    );

    transition: transform 0.5s ease;
}

.why-benefit-card:hover .why-card-line {
    transform: scaleX(1);
}


/* =========================================================
   14. SPEED SECTION
========================================================= */

.why-speed-section {
    position: relative;

    display: grid;
    grid-template-columns: auto 1fr;
    gap: 25px;

    margin-bottom: 90px;
    padding: 45px;

    overflow: hidden;

    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.025)
        );

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

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

.speed-glow {
    position: absolute;
    width: 400px;
    height: 400px;

    right: -180px;
    top: -220px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(56, 189, 248, 0.14),
        transparent 70%
    );

    pointer-events: none;
}

.speed-icon {
    position: relative;

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

    width: 62px;
    height: 62px;

    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 17px;

    color: #061426;

    background: linear-gradient(
        135deg,
        #F2D675,
        #D4AF37
    );

    box-shadow:
        0 0 35px rgba(212, 175, 55, 0.14);

    font-size: 1.2rem;
}

.speed-content {
    position: relative;
}

.speed-content > span {
    display: block;

    margin-bottom: 8px;

    color: #38BDF8;

    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.speed-content h3 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: clamp(1.65rem, 3vw, 2.5rem);
    line-height: 1.15;
}

.speed-content h3 span {
    color: #F2D675;
}

.speed-content p {
    max-width: 680px;
    margin: 0;

    color: #B8C5D6;

    font-size: 0.9rem;
    line-height: 1.75;
}


/* =========================================================
   15. SPEED ROUTE
========================================================= */

.speed-route {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
    align-items: center;
    gap: 15px;

    margin-top: 25px;
    padding-top: 30px;

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

.speed-route-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.speed-route-item span {
    color: #D4AF37;

    font-size: 0.62rem;
    font-weight: 700;
}

.speed-route-item strong {
    color: #ffffff;

    font-size: 0.67rem;
    letter-spacing: 0.1em;
}

.speed-route-line {
    position: relative;

    height: 1px;

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

.speed-route-line span {
    position: absolute;
    top: 50%;
    left: 0;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #38BDF8;

    box-shadow:
        0 0 12px rgba(56, 189, 248, 0.65);

    transform: translateY(-50%);

    animation: routePulse 2s ease-in-out infinite;
}

@keyframes routePulse {
    0%,
    100% {
        opacity: 0.45;
        transform: translateY(-50%) scale(0.8);
    }

    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.25);
    }
}


/* =========================================================
   16. TRUST STATEMENT
========================================================= */

.why-trust-statement {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 28px;

    margin-bottom: 70px;
    padding: 42px;

    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(212, 175, 55, 0.06),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.03),
        0 25px 70px rgba(0, 0, 0, 0.16);
}

.trust-statement-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 66px;
    height: 66px;

    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 18px;

    color: #F2D675;

    background: rgba(212, 175, 55, 0.07);

    box-shadow:
        0 0 35px rgba(212, 175, 55, 0.08);

    font-size: 1.35rem;
}

.trust-statement-content > span {
    display: block;

    margin-bottom: 9px;

    color: #D4AF37;

    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.trust-statement-content h3 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: clamp(1.55rem, 3vw, 2.4rem);
    line-height: 1.2;
}

.trust-statement-content h3 span {
    color: #F2D675;
}

.trust-statement-content p {
    max-width: 850px;
    margin: 0;

    color: #B8C5D6;

    font-size: 0.9rem;
    line-height: 1.8;
}


/* =========================================================
   17. CUSTOMER CARE CTA
========================================================= */

.why-cta {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    padding: 42px 45px;

    overflow: hidden;

    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 90% 50%,
            rgba(56, 189, 248, 0.1),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #0A1D35,
            #07172a
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.25);
}

.why-cta::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background: linear-gradient(
        to bottom,
        #D4AF37,
        #38BDF8
    );
}

.why-cta-content {
    position: relative;
}

.why-cta-label {
    display: block;

    margin-bottom: 9px;

    color: #38BDF8;

    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.why-cta-content h3 {
    margin: 0 0 9px;

    color: #ffffff;

    font-size: clamp(1.7rem, 3vw, 2.6rem);
    line-height: 1.15;
}

.why-cta-content h3 span {
    color: #F2D675;
}

.why-cta-content p {
    max-width: 600px;
    margin: 0;

    color: #B8C5D6;

    font-size: 0.87rem;
    line-height: 1.7;
}


/* =========================================================
   18. CTA BUTTON
========================================================= */

.why-cta-button {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 13px;

    flex-shrink: 0;

    padding: 14px 18px;

    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 13px;

    color: #061426;

    background: linear-gradient(
        135deg,
        #F2D675,
        #D4AF37
    );

    text-decoration: none;

    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.03em;

    box-shadow:
        0 12px 35px rgba(212, 175, 55, 0.15);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.why-cta-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 17px 40px rgba(212, 175, 55, 0.25);
}

.why-cta-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    border-radius: 8px;

    background: rgba(6, 20, 38, 0.12);
}

.why-cta-button > i {
    transition: transform 0.3s ease;
}

.why-cta-button:hover > i {
    transform: translateX(4px);
}


/* =========================================================
   19. SCROLL REVEAL
========================================================= */

.why-reveal {
    opacity: 0;
    transform: translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

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


/* =========================================================
   20. TABLET
========================================================= */

@media (max-width: 1050px) {

    .why-feature-area {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .why-image-frame {
        min-height: 520px;
    }

    .why-feature-content {
        max-width: 750px;
    }

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

    .why-apart-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .why-apart-heading > p {
        max-width: 650px;
    }

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

    .why-cta-button {
        width: fit-content;
    }
}


/* =========================================================
   21. MOBILE
========================================================= */

@media (max-width: 700px) {

    .why-choose-section {
        padding: 80px 0;
    }

    .why-intro {
        margin-bottom: 60px;
    }

    .why-heading {
        font-size: clamp(2.25rem, 12vw, 3.25rem);
    }

    .why-intro-text {
        font-size: 0.91rem;
        line-height: 1.8;
    }

    .why-feature-area {
        margin-bottom: 90px;
    }

    .why-image-frame {
        min-height: 430px;
        border-radius: 19px;
    }

    .why-image-badge {
        left: 16px;
        bottom: 16px;
        right: 16px;
    }

    .why-image-label {
        top: 16px;
        left: 16px;
    }

    .why-feature-content h3 {
        font-size: 2rem;
    }

    .why-benefits-grid {
        grid-template-columns: 1fr;
    }

    .why-benefit-card {
        min-height: 230px;
    }

    .why-apart-section {
        margin-bottom: 85px;
    }

    .why-speed-section {
        grid-template-columns: 1fr;
        padding: 28px;
        gap: 20px;
        border-radius: 20px;
    }

    .speed-route {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-top: 25px;
    }

    .speed-route-line {
        width: 100%;
    }

    .speed-route-line span {
        animation: routePulseMobile 2s ease-in-out infinite;
    }

    @keyframes routePulseMobile {
        0%,
        100% {
            left: 0;
            opacity: 0.45;
        }

        50% {
            left: calc(100% - 7px);
            opacity: 1;
        }
    }

    .why-trust-statement {
        grid-template-columns: 1fr;
        padding: 30px;
        border-radius: 20px;
    }

    .why-cta {
        padding: 30px;
        border-radius: 20px;
    }

    .why-cta-button {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================
   22. SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .why-choose-section {
        padding: 70px 0;
    }

    .why-image-frame {
        min-height: 380px;
    }

    .why-image-badge {
        padding: 11px 13px;
    }

    .why-badge-icon {
        width: 37px;
        height: 37px;
    }

    .why-image-badge strong {
        font-size: 0.7rem;
    }

    .why-image-badge small {
        font-size: 0.57rem;
    }

    .why-benefit-card {
        padding: 24px;
    }

    .why-speed-section,
    .why-trust-statement,
    .why-cta {
        padding: 24px;
    }
}


/* =========================================================
   23. ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .why-bg-glow,
    .why-image,
    .why-benefit-card,
    .why-card-icon,
    .why-card-line,
    .why-cta-button,
    .why-cta-button > i,
    .why-reveal,
    .speed-route-line span {
        animation: none !important;
        transition: none !important;
    }

    .why-reveal {
        opacity: 1;
        transform: none;
    }
}


/* =========================================================
   SECTION 05 — WHY CHOOSE US
   END
========================================================= */











/* =========================================================
   GLOBALTRUST LOGISTICS
   SECTION 06 — HOW OUR DELIVERY WORKS
   BEGINNING
========================================================= */


/* =========================================================
   01. SECTION FOUNDATION
========================================================= */

.how-delivery-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding: 125px 0;

    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(212, 175, 55, 0.09),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 35%,
            rgba(56, 189, 248, 0.09),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #061426 0%,
            #081a30 48%,
            #0A1D35 100%
        );

    color: #ffffff;
}

.delivery-container {
    position: relative;
    z-index: 3;
}


/* =========================================================
   02. BACKGROUND GLOWS
========================================================= */

.delivery-bg-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(15px);

    z-index: -2;

    animation:
        deliveryGlowFloat
        10s
        ease-in-out
        infinite
        alternate;
}

.delivery-bg-glow-one {
    width: 500px;
    height: 500px;

    top: 150px;
    left: -300px;

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 55, 0.13),
            transparent 70%
        );
}

.delivery-bg-glow-two {
    width: 600px;
    height: 600px;

    right: -350px;
    top: 900px;

    background:
        radial-gradient(
            circle,
            rgba(56, 189, 248, 0.11),
            transparent 70%
        );

    animation-delay: -4s;
}

@keyframes deliveryGlowFloat {

    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(25px, -25px, 0) scale(1.08);
    }

}


/* =========================================================
   03. GRID OVERLAY
========================================================= */

.delivery-grid-overlay {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: 0.18;

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

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 10%,
            black 90%,
            transparent
        );
}


/* =========================================================
   04. SECTION INTRO
========================================================= */

.delivery-intro {
    max-width: 900px;

    margin: 0 auto 95px;

    text-align: center;
}

.section-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: #D4AF37;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}

.section-eyebrow-line {
    width: 38px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #D4AF37
        );
}

.section-eyebrow-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border:
        1px solid
        rgba(212,175,55,0.4);

    border-radius: 50%;

    background:
        rgba(212,175,55,0.07);

    box-shadow:
        0 0 18px
        rgba(212,175,55,0.1);

    font-size: 0.64rem;
}

.delivery-heading {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.5rem
        );

    line-height: 1.04;

    letter-spacing: -0.045em;

    font-weight: 800;
}

.delivery-heading span {
    display: inline-block;

    background:
        linear-gradient(
            110deg,
            #D4AF37,
            #F2D675,
            #D4AF37
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    filter:
        drop-shadow(
            0 0 20px
            rgba(212,175,55,0.13)
        );
}

.delivery-intro-text {
    max-width: 700px;

    margin: 28px auto 0;

    color: #B8C5D6;

    font-size: 1rem;

    line-height: 1.9;
}

.delivery-intro-promise {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 27px;
}

.delivery-intro-promise span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #ffffff;

    font-size: 0.74rem;

    font-weight: 600;
}

.delivery-intro-promise i {
    color: #D4AF37;
}


/* =========================================================
   05. DELIVERY JOURNEY
========================================================= */

.delivery-journey {
    position: relative;

    max-width: 1050px;

    margin: 0 auto 115px;

    display: flex;

    flex-direction: column;

    gap: 22px;
}

.delivery-journey-line {
    position: absolute;

    left: 34px;

    top: 35px;
    bottom: 35px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            rgba(212,175,55,0.55),
            rgba(56,189,248,0.35),
            rgba(212,175,55,0.25)
        );

    overflow: hidden;
}

.journey-progress {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 130px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #F2D675,
            #38BDF8,
            transparent
        );

    filter:
        drop-shadow(
            0 0 8px
            rgba(56,189,248,0.7)
        );

    animation:
        journeyProgress
        3.8s
        linear
        infinite;
}

@keyframes journeyProgress {

    0% {
        transform: translateY(-140px);
    }

    100% {
        transform: translateY(900px);
    }

}


/* =========================================================
   06. DELIVERY STEP
========================================================= */

.delivery-step {
    position: relative;

    display: grid;

    grid-template-columns:
        68px
        68px
        1fr;

    align-items: center;

    gap: 22px;

    padding: 28px 30px;

    margin-left: 0;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius: 19px;

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

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,0.13);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease,
        box-shadow 0.4s ease;
}

.delivery-step:hover {
    transform: translateX(8px);

    border-color:
        rgba(212,175,55,0.28);

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

    box-shadow:
        0 25px 60px
        rgba(0,0,0,0.22),
        0 0 35px
        rgba(212,175,55,0.05);
}

.delivery-step-number {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    border:
        1px solid
        rgba(212,175,55,0.35);

    border-radius: 14px;

    color: #F2D675;

    background:
        #061426;

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.08em;
}

.delivery-step-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    border:
        1px solid
        rgba(56,189,248,0.22);

    border-radius: 14px;

    color: #38BDF8;

    background:
        rgba(56,189,248,0.06);

    box-shadow:
        0 0 25px
        rgba(56,189,248,0.05);

    transition:
        transform 0.4s ease,
        color 0.4s ease;
}

.delivery-step:hover .delivery-step-icon {
    transform:
        scale(1.08)
        rotate(-4deg);

    color: #F2D675;
}

.delivery-step-content {
    padding-left: 5px;
}

.delivery-step-label {
    display: block;

    margin-bottom: 7px;

    color: #38BDF8;

    font-size: 0.62rem;

    font-weight: 700;

    letter-spacing: 0.16em;
}

.delivery-step-content h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 1.25rem;

    line-height: 1.2;
}

.delivery-step-content p {
    max-width: 700px;

    margin: 0;

    color: #B8C5D6;

    font-size: 0.87rem;

    line-height: 1.75;
}


/* =========================================================
   07. TICKET INFORMATION
========================================================= */

.ticket-info-mini {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 17px;
}

.ticket-info-mini span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 10px;

    border:
        1px solid
        rgba(212,175,55,0.18);

    border-radius: 8px;

    color: #DCE5EF;

    background:
        rgba(212,175,55,0.045);

    font-size: 0.65rem;
}

.ticket-info-mini i {
    color: #D4AF37;
}


/* =========================================================
   08. TRANSPORT TAGS
========================================================= */

.transport-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 17px;
}

.transport-tags span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    border:
        1px solid
        rgba(56,189,248,0.18);

    border-radius: 8px;

    color: #B8C5D6;

    background:
        rgba(56,189,248,0.04);

    font-size: 0.64rem;
}

.transport-tags i {
    color: #38BDF8;
}


/* =========================================================
   09. FAST DELIVERY FEATURE
========================================================= */

.delivery-fast-feature {
    position: relative;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 25px;

    margin-bottom: 90px;

    padding: 40px;

    overflow: hidden;

    border:
        1px solid
        rgba(212,175,55,0.2);

    border-radius: 23px;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,0.055),
            rgba(56,189,248,0.035)
        );

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

.fast-feature-glow {
    position: absolute;

    right: -150px;
    top: -180px;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(56,189,248,0.13),
            transparent 70%
        );

    pointer-events: none;
}

.fast-feature-icon {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 65px;
    height: 65px;

    border-radius: 18px;

    color: #061426;

    background:
        linear-gradient(
            135deg,
            #F2D675,
            #D4AF37
        );

    box-shadow:
        0 0 35px
        rgba(212,175,55,0.15);

    font-size: 1.25rem;
}

.fast-feature-content {
    position: relative;
}

.fast-feature-content > span {
    display: block;

    margin-bottom: 8px;

    color: #38BDF8;

    font-size: 0.63rem;

    font-weight: 700;

    letter-spacing: 0.17em;
}

.fast-feature-content h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: clamp(1.6rem, 3vw, 2.4rem);

    line-height: 1.15;
}

.fast-feature-content h3 span {
    color: #F2D675;
}

.fast-feature-content p {
    max-width: 700px;

    margin: 0;

    color: #B8C5D6;

    font-size: 0.88rem;

    line-height: 1.75;
}

.fast-feature-content strong {
    color: #F2D675;
}

.fast-feature-badge {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-width: 105px;
    height: 105px;

    border:
        1px solid
        rgba(212,175,55,0.3);

    border-radius: 50%;

    background:
        rgba(6,20,38,0.7);

    box-shadow:
        inset 0 0 30px
        rgba(212,175,55,0.04);
}

.fast-feature-badge strong {
    color: #F2D675;

    font-size: 1.65rem;

    line-height: 1;
}

.fast-feature-badge span {
    margin-top: 5px;

    color: #ffffff;

    font-size: 0.6rem;

    font-weight: 800;

    letter-spacing: 0.12em;
}

.fast-feature-badge small {
    margin-top: 4px;

    color: #7f93aa;

    font-size: 0.47rem;

    letter-spacing: 0.08em;
}


/* =========================================================
   10. DOORSTEP SECTION
========================================================= */

.doorstep-section {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, 0.9fr);

    gap: 70px;

    align-items: center;

    margin-bottom: 110px;
}

.doorstep-content h3 {
    max-width: 650px;

    margin: 0 0 20px;

    color: #ffffff;

    font-size:
        clamp(
            2rem,
            4vw,
            3.4rem
        );

    line-height: 1.1;

    letter-spacing: -0.04em;
}

.doorstep-content h3 span {
    color: #D4AF37;
}

.doorstep-content > p {
    max-width: 650px;

    margin: 0;

    color: #B8C5D6;

    font-size: 0.92rem;

    line-height: 1.85;
}

.doorstep-points {
    display: grid;

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

    gap: 12px;

    margin-top: 30px;
}

.doorstep-points > div {
    padding: 17px;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius: 14px;

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

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

.doorstep-points > div:hover {
    transform: translateY(-5px);

    border-color:
        rgba(212,175,55,0.25);
}

.doorstep-points span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    margin-bottom: 13px;

    border-radius: 10px;

    color: #F2D675;

    background:
        rgba(212,175,55,0.07);
}

.doorstep-points strong {
    display: block;

    color: #ffffff;

    font-size: 0.76rem;
}

.doorstep-points small {
    display: block;

    margin-top: 7px;

    color: #8fa2b7;

    font-size: 0.63rem;

    line-height: 1.5;
}


/* =========================================================
   11. DOORSTEP VISUAL
========================================================= */

.doorstep-visual {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 350px;

    border:
        1px solid
        rgba(56,189,248,0.15);

    border-radius: 24px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(56,189,248,0.08),
            transparent 60%
        ),
        #081a30;
}

.doorstep-glow {
    position: absolute;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,0.14),
            transparent 70%
        );

    animation:
        doorstepGlow
        4s
        ease-in-out
        infinite
        alternate;
}

@keyframes doorstepGlow {

    from {
        transform: scale(0.9);
        opacity: 0.65;
    }

    to {
        transform: scale(1.15);
        opacity: 1;
    }

}

.doorstep-card {
    position: relative;

    z-index: 2;

    width: min(330px, 80%);

    padding: 25px;

    border:
        1px solid
        rgba(212,175,55,0.28);

    border-radius: 17px;

    background:
        rgba(6,20,38,0.82);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,0.3);
}

.doorstep-card-top {
    display: flex;

    justify-content: space-between;

    color: #38BDF8;

    font-size: 0.6rem;

    font-weight: 700;

    letter-spacing: 0.14em;
}

.doorstep-card-top i {
    font-size: 0.9rem;
}

.doorstep-address {
    margin-top: 35px;

    padding-bottom: 25px;

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

.doorstep-address span {
    display: block;

    margin-bottom: 8px;

    color: #7f93aa;

    font-size: 0.57rem;

    letter-spacing: 0.14em;
}

.doorstep-address strong {
    color: #ffffff;

    font-size: 0.86rem;

    letter-spacing: 0.04em;
}

.doorstep-status {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 20px;

    color: #B8C5D6;

    font-size: 0.61rem;

    font-weight: 600;
}

.status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #38BDF8;

    box-shadow:
        0 0 13px
        rgba(56,189,248,0.7);

    animation:
        statusPulse
        1.8s
        ease-in-out
        infinite;
}

@keyframes statusPulse {

    0%,
    100% {
        transform: scale(0.8);
        opacity: 0.55;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }

}


/* =========================================================
   12. GLOBAL REACH
========================================================= */

.delivery-global-section {
    position: relative;

    display: grid;

    grid-template-columns:
        280px
        1fr;

    gap: 65px;

    align-items: center;

    margin-bottom: 105px;

    padding: 55px;

    overflow: hidden;

    border:
        1px solid
        rgba(56,189,248,0.16);

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(56,189,248,0.045),
            rgba(255,255,255,0.025)
        );
}

.global-earth {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 230px;
    height: 230px;

    margin: auto;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(56,189,248,0.18),
            rgba(29,111,165,0.1) 45%,
            transparent 70%
        );

    box-shadow:
        inset 0 0 50px
        rgba(56,189,248,0.06),
        0 0 60px
        rgba(56,189,248,0.07);
}

.earth-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 120px;
    height: 120px;

    border:
        1px solid
        rgba(56,189,248,0.35);

    border-radius: 50%;

    color: #38BDF8;

    background:
        rgba(6,20,38,0.72);

    box-shadow:
        0 0 45px
        rgba(56,189,248,0.12);

    font-size: 3.5rem;
}

.earth-ring {
    position: absolute;

    border:
        1px solid
        rgba(56,189,248,0.16);

    border-radius: 50%;

    animation:
        earthRotate
        8s
        linear
        infinite;
}

.earth-ring-one {
    inset: 10px;

    transform:
        rotateX(65deg)
        rotateZ(20deg);
}

.earth-ring-two {
    inset: 25px;

    transform:
        rotateX(65deg)
        rotateZ(-25deg);

    animation-direction: reverse;

    animation-duration: 6s;
}

@keyframes earthRotate {

    from {
        transform:
            rotateX(65deg)
            rotateZ(0deg);
    }

    to {
        transform:
            rotateX(65deg)
            rotateZ(360deg);
    }

}

.global-content > span {
    display: block;

    margin-bottom: 10px;

    color: #38BDF8;

    font-size: 0.63rem;

    font-weight: 700;

    letter-spacing: 0.17em;
}

.global-content h3 {
    max-width: 650px;

    margin: 0 0 16px;

    color: #ffffff;

    font-size:
        clamp(
            1.9rem,
            4vw,
            3.15rem
        );

    line-height: 1.12;
}

.global-content h3 span {
    color: #F2D675;
}

.global-content > p {
    max-width: 700px;

    margin: 0;

    color: #B8C5D6;

    font-size: 0.89rem;

    line-height: 1.8;
}

.global-stats {
    display: grid;

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

    gap: 10px;

    margin-top: 30px;
}

.global-stats > div {
    padding:
        15px 12px;

    border:
        1px solid
        rgba(255,255,255,0.06);

    border-radius: 12px;

    background:
        rgba(255,255,255,0.035);
}

.global-stats strong {
    display: block;

    color: #F2D675;

    font-size: 1rem;
}

.global-stats span {
    display: block;

    margin-top: 4px;

    color: #8295aa;

    font-size: 0.55rem;

    font-weight: 700;

    letter-spacing: 0.08em;
}


/* =========================================================
   13. CUSTOMER TRUST
========================================================= */

.delivery-trust-section {
    margin-bottom: 90px;

    text-align: center;
}

.trust-heading h3 {
    max-width: 750px;

    margin: 0 auto;

    color: #ffffff;

    font-size:
        clamp(
            2rem,
            4vw,
            3.2rem
        );

    line-height: 1.1;

    letter-spacing: -0.035em;
}

.trust-heading h3 span {
    color: #D4AF37;
}

.delivery-trust-section > p {
    max-width: 750px;

    margin: 20px auto 40px;

    color: #B8C5D6;

    font-size: 0.9rem;

    line-height: 1.8;
}

.trust-mini-cards {
    display: grid;

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

    gap: 15px;
}

.trust-mini-cards > div {
    padding: 25px;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius: 17px;

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

    transition:
        transform 0.35s ease,
        border-color 0.35s ease;
}

.trust-mini-cards > div:hover {
    transform: translateY(-6px);

    border-color:
        rgba(212,175,55,0.25);
}

.trust-mini-cards i {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    margin: 0 auto 16px;

    border-radius: 12px;

    color: #F2D675;

    background:
        rgba(212,175,55,0.07);

    font-size: 1rem;
}

.trust-mini-cards strong {
    display: block;

    color: #ffffff;

    font-size: 0.88rem;
}

.trust-mini-cards span {
    display: block;

    margin-top: 8px;

    color: #8295aa;

    font-size: 0.68rem;

    line-height: 1.5;
}


/* =========================================================
   14. FINAL CTA
========================================================= */

.delivery-final-cta {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 45px;

    padding: 45px;

    overflow: hidden;

    border:
        1px solid
        rgba(212,175,55,0.2);

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 90% 50%,
            rgba(56,189,248,0.09),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #0A1D35,
            #07172a
        );

    box-shadow:
        0 30px 80px
        rgba(0,0,0,0.23);
}

.delivery-final-cta::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            #D4AF37,
            #38BDF8
        );
}

.final-cta-content {
    position: relative;
}

.final-cta-content > span {
    display: block;

    margin-bottom: 9px;

    color: #38BDF8;

    font-size: 0.63rem;

    font-weight: 700;

    letter-spacing: 0.17em;
}

.final-cta-content h3 {
    margin: 0 0 11px;

    color: #ffffff;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.55rem
        );

    line-height: 1.13;
}

.final-cta-content h3 span {
    color: #F2D675;
}

.final-cta-content p {
    max-width: 620px;

    margin: 0;

    color: #B8C5D6;

    font-size: 0.85rem;

    line-height: 1.7;
}

.final-cta-actions {
    position: relative;

    display: flex;

    flex-direction: column;

    gap: 10px;

    min-width: 220px;
}

.delivery-primary-button,
.delivery-secondary-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 13px 17px;

    border-radius: 12px;

    text-decoration: none;

    font-size: 0.71rem;

    font-weight: 800;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.delivery-primary-button {
    color: #061426;

    background:
        linear-gradient(
            135deg,
            #F2D675,
            #D4AF37
        );

    box-shadow:
        0 12px 35px
        rgba(212,175,55,0.13);
}

.delivery-primary-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 40px
        rgba(212,175,55,0.23);
}

.delivery-secondary-button {
    border:
        1px solid
        rgba(56,189,248,0.2);

    color: #B8C5D6;

    background:
        rgba(56,189,248,0.035);
}

.delivery-secondary-button:hover {
    transform: translateY(-3px);

    border-color:
        rgba(56,189,248,0.4);

    color: #ffffff;
}

.delivery-secondary-button i {
    color: #38BDF8;
}


/* =========================================================
   15. SCROLL REVEAL
========================================================= */

.delivery-reveal {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.delivery-reveal.delivery-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   16. TABLET
========================================================= */

@media (max-width: 1050px) {

    .doorstep-section {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .doorstep-visual {
        min-height: 330px;
    }

    .delivery-global-section {
        grid-template-columns: 200px 1fr;

        gap: 45px;

        padding: 40px;
    }

    .global-earth {
        width: 190px;
        height: 190px;
    }

    .earth-icon {
        width: 100px;
        height: 100px;

        font-size: 3rem;
    }

    .delivery-final-cta {
        align-items: flex-start;

        flex-direction: column;
    }

    .final-cta-actions {
        width: 100%;

        max-width: 400px;
    }
}


/* =========================================================
   17. MOBILE
========================================================= */

@media (max-width: 700px) {

    .how-delivery-section {
        padding: 85px 0;
    }

    .delivery-intro {
        margin-bottom: 65px;
    }

    .delivery-heading {
        font-size:
            clamp(
                2.25rem,
                12vw,
                3.2rem
            );
    }

    .delivery-intro-text {
        font-size: 0.89rem;
    }

    .delivery-intro-promise {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        width: fit-content;

        margin-left: auto;
        margin-right: auto;
    }

    .delivery-journey {
        margin-bottom: 80px;
    }

    .delivery-journey-line {
        left: 24px;
    }

    .delivery-step {
        grid-template-columns:
            48px
            1fr;

        gap: 16px;

        padding: 23px 18px;

        border-radius: 16px;
    }

    .delivery-step-number {
        width: 42px;
        height: 42px;

        grid-row: 1;
    }

    .delivery-step-icon {
        width: 42px;
        height: 42px;

        grid-column: 2;

        margin-left: -58px;

        transform: translateX(58px);
    }

    .delivery-step-content {
        grid-column: 2;

        padding-left: 0;

        margin-top: 5px;
    }

    .delivery-step-content h3 {
        font-size: 1.1rem;
    }

    .delivery-step-content p {
        font-size: 0.82rem;
    }

    .ticket-info-mini,
    .transport-tags {
        flex-direction: column;

        align-items: flex-start;
    }

    .delivery-fast-feature {
        grid-template-columns: 1fr;

        padding: 30px;

        gap: 20px;
    }

    .fast-feature-badge {
        width: 95px;
        height: 95px;
    }

    .doorstep-points {
        grid-template-columns: 1fr;
    }

    .delivery-global-section {
        grid-template-columns: 1fr;

        padding: 30px;

        gap: 35px;

        text-align: center;
    }

    .global-earth {
        width: 190px;
        height: 190px;
    }

    .global-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .global-stats {
        grid-template-columns:
            repeat(2, 1fr);

        text-align: left;
    }

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

    .delivery-final-cta {
        padding: 30px;

        border-radius: 20px;
    }

    .final-cta-actions {
        max-width: none;
    }

    .delivery-primary-button,
    .delivery-secondary-button {
        width: 100%;
    }

}


/* =========================================================
   18. SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .how-delivery-section {
        padding: 70px 0;
    }

    .delivery-step {
        padding: 20px 15px;
    }

    .delivery-fast-feature,
    .delivery-global-section,
    .delivery-final-cta {
        padding: 24px;
    }

    .doorstep-visual {
        min-height: 300px;
    }

    .doorstep-card {
        width: 85%;

        padding: 20px;
    }

    .global-stats {
        gap: 8px;
    }

}


/* =========================================================
   19. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .delivery-bg-glow,
    .journey-progress,
    .delivery-step,
    .fast-feature-icon,
    .doorstep-glow,
    .status-dot,
    .earth-ring,
    .delivery-reveal,
    .trust-mini-cards > div,
    .delivery-primary-button,
    .delivery-secondary-button {
        animation: none !important;

        transition: none !important;
    }

    .delivery-reveal {
        opacity: 1;

        transform: none;
    }

}


/* =========================================================
   SECTION 06 — HOW OUR DELIVERY WORKS
   END
========================================================= */













/* =========================================================
   GLOBALTRUST LOGISTICS
   SECTION 07 — YOUR PARCEL'S JOURNEY
========================================================== */


/* =========================================================
   SECTION 07 — MAIN SECTION
========================================================== */

.parcel-journey-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background: #061426;
    color: #ffffff;
}


/* =========================================================
   SECTION 07 — BACKGROUND DECORATION
========================================================== */

.parcel-journey-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    opacity: 0.18;
}

.parcel-glow-gold {
    width: 420px;
    height: 420px;
    top: -160px;
    left: -150px;
    background: #d4af37;
}

.parcel-glow-blue {
    width: 500px;
    height: 500px;
    right: -200px;
    bottom: -200px;
    background: #1d6fa5;
}

.parcel-journey-grid {
    position: absolute;
    inset: 0;
    opacity: 0.035;

    background-image:
        linear-gradient(#38bdf8 1px, transparent 1px),
        linear-gradient(90deg, #38bdf8 1px, transparent 1px);

    background-size: 60px 60px;
    pointer-events: none;
}


/* =========================================================
   SECTION 07 — CONTAINER
========================================================== */

.parcel-journey-container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   SECTION 07 — INTRO
========================================================== */

.parcel-journey-intro {
    max-width: 760px;
    margin: 0 auto 85px;
    text-align: center;
}

.parcel-eyebrow {
    justify-content: center;
}

.parcel-journey-intro h2 {
    margin: 22px 0 18px;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.parcel-journey-intro h2 span {
    color: #d4af37;
}

.parcel-journey-intro p {
    max-width: 650px;
    margin: auto;
    color: #b8c5d6;
    font-size: 1.05rem;
    line-height: 1.8;
}


/* =========================================================
   SECTION 07 — ROUTE WRAPPER
========================================================== */

.parcel-route-wrapper {
    position: relative;
    padding: 40px 0 100px;
}


/* =========================================================
   SECTION 07 — ROUTE
========================================================== */

.parcel-route {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1100px;
    margin: auto;
}


/* =========================================================
   SECTION 07 — ROUTE LINE
========================================================== */

.parcel-route-line {
    position: absolute;
    top: 34px;
    left: 8%;
    right: 8%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.parcel-route-progress {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(
        90deg,
        #d4af37,
        #38bdf8
    );

    box-shadow:
        0 0 12px rgba(56, 189, 248, 0.7);

    transition: width 1s ease;
}


/* =========================================================
   SECTION 07 — MOVING PARCEL
========================================================== */

.moving-parcel {
    position: absolute;
    top: 16px;
    left: 8%;
    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    background: #061426;
    border: 2px solid #d4af37;

    color: #f2d675;

    z-index: 5;

    transform: translateX(-50%);

    transition: left 1.2s ease;
}

.moving-parcel i {
    font-size: 14px;
}

.moving-parcel-glow {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.18);
    filter: blur(8px);
    animation: parcelPulse 1.8s infinite;
}

@keyframes parcelPulse {

    0%,
    100% {
        transform: scale(0.8);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.9;
    }
}


/* =========================================================
   SECTION 07 — STAGES
========================================================== */

.parcel-stage {
    position: relative;
    width: 18%;
    text-align: center;
    z-index: 3;
}


/* =========================================================
   SECTION 07 — STAGE POINT
========================================================== */

.parcel-stage-point {
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;

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

    border-radius: 50%;

    background: #0a1d35;
    border: 2px solid rgba(255, 255, 255, 0.12);

    color: #7e91a8;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        color 0.4s ease,
        box-shadow 0.4s ease;
}

.parcel-stage-point i {
    font-size: 20px;
}


/* Active stage */

.parcel-stage.active .parcel-stage-point {
    color: #f2d675;
    border-color: #d4af37;

    box-shadow:
        0 0 0 7px rgba(212, 175, 55, 0.08),
        0 0 30px rgba(212, 175, 55, 0.2);

    transform: translateY(-5px);
}


/* Completed stage */

.parcel-stage.completed .parcel-stage-point {
    color: #38bdf8;
    border-color: #38bdf8;

    box-shadow:
        0 0 20px rgba(56, 189, 248, 0.2);
}


/* =========================================================
   SECTION 07 — STAGE TEXT
========================================================== */

.parcel-stage-number {
    display: block;
    margin-bottom: 7px;

    color: #d4af37;

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.parcel-stage h3 {
    margin: 0 0 7px;

    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.parcel-stage p {
    margin: 0;

    color: #8fa0b5;

    font-size: 0.8rem;
    line-height: 1.5;
}


/* =========================================================
   SECTION 07 — STATUS CARD
========================================================== */

.parcel-status-card {
    display: grid;

    grid-template-columns:
        auto
        1fr
        minmax(220px, 300px);

    gap: 30px;

    align-items: center;

    max-width: 1000px;

    margin: 0 auto;

    padding: 30px;

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

    border: 1px solid rgba(212, 175, 55, 0.2);

    border-radius: 20px;

    backdrop-filter: blur(15px);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   SECTION 07 — STATUS ICON
========================================================== */

.parcel-status-icon {
    position: relative;

    width: 64px;
    height: 64px;

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

    border-radius: 50%;

    background: rgba(56, 189, 248, 0.08);

    border: 1px solid rgba(56, 189, 248, 0.35);

    color: #38bdf8;
}

.parcel-status-icon i {
    position: relative;
    z-index: 2;
}

.status-pulse {
    position: absolute;
    inset: 0;

    border-radius: 50%;

    border: 1px solid #38bdf8;

    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {

    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}


/* =========================================================
   SECTION 07 — STATUS CONTENT
========================================================== */

.parcel-status-label {
    display: block;

    margin-bottom: 7px;

    color: #8fa0b5;

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.parcel-status-content h3 {
    margin: 0 0 5px;

    color: #f2d675;

    font-size: 1.35rem;
}

.parcel-status-content p {
    margin: 0;

    color: #b8c5d6;

    font-size: 0.9rem;
}


/* =========================================================
   SECTION 07 — PROGRESS
========================================================== */

.parcel-status-progress > span {
    display: block;

    margin-bottom: 6px;

    color: #8fa0b5;

    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.parcel-status-progress strong {
    display: block;

    margin-bottom: 10px;

    color: #ffffff;

    font-size: 1rem;
}

.parcel-progress-bar {
    height: 6px;

    overflow: hidden;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.08);
}

.parcel-progress-bar span {
    display: block;

    width: 20%;
    height: 100%;

    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #d4af37,
        #38bdf8
    );

    box-shadow:
        0 0 12px rgba(56, 189, 248, 0.5);

    transition: width 1s ease;
}


/* =========================================================
   SECTION 07 — JOURNEY MESSAGE
========================================================== */

.parcel-journey-message {
    display: flex;

    align-items: center;

    gap: 25px;

    max-width: 1000px;

    margin: 70px auto 0;

    padding: 35px;

    border-left: 3px solid #d4af37;

    background:
        linear-gradient(
            90deg,
            rgba(212, 175, 55, 0.07),
            rgba(56, 189, 248, 0.025),
            transparent
        );
}


/* =========================================================
   SECTION 07 — MESSAGE ICON
========================================================== */

.journey-message-icon {
    flex-shrink: 0;

    width: 58px;
    height: 58px;

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

    border-radius: 16px;

    color: #f2d675;

    background: rgba(212, 175, 55, 0.08);

    border: 1px solid rgba(212, 175, 55, 0.2);
}


/* =========================================================
   SECTION 07 — MESSAGE CONTENT
========================================================== */

.parcel-journey-message span {
    color: #d4af37;

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.parcel-journey-message h3 {
    margin: 7px 0 8px;

    font-size: 1.6rem;
}

.parcel-journey-message h3 span {
    color: #f2d675;

    font-size: inherit;
    letter-spacing: normal;
}

.parcel-journey-message p {
    max-width: 700px;

    margin: 0;

    color: #b8c5d6;

    font-size: 0.9rem;
    line-height: 1.7;
}


/* =========================================================
   SECTION 07 — RESPONSIVE TABLET
========================================================== */

@media (max-width: 850px) {

    .parcel-journey-section {
        padding: 90px 0;
    }

    .parcel-route {
        max-width: 700px;
    }

    .parcel-stage-point {
        width: 55px;
        height: 55px;
    }

    .parcel-stage h3 {
        font-size: 0.85rem;
    }

    .parcel-stage p {
        font-size: 0.72rem;
    }

    .parcel-status-card {
        grid-template-columns: auto 1fr;
    }

    .parcel-status-progress {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   SECTION 07 — RESPONSIVE MOBILE
========================================================== */

@media (max-width: 600px) {

    .parcel-journey-section {
        padding: 75px 0;
    }

    .parcel-journey-intro {
        margin-bottom: 55px;
    }

    .parcel-journey-intro h2 {
        font-size: 2.5rem;
    }


    /* Vertical route */

    .parcel-route-wrapper {
        padding: 20px 0 50px;
    }

    .parcel-route {
        display: block;
        padding-left: 70px;
    }

    .parcel-route-line {
        top: 20px;
        bottom: 20px;
        left: 30px;
        right: auto;

        width: 3px;
        height: auto;
    }

    .parcel-route-progress {
        width: 100%;
        height: 20%;
        transition: height 1s ease;
    }


    .moving-parcel {
        top: 20px;
        left: 30px;

        transform:
            translate(-50%, 0);
    }


    .parcel-stage {
        width: 100%;
        min-height: 125px;

        text-align: left;
    }

    .parcel-stage-point {
        position: absolute;

        left: -68px;
        top: 0;

        width: 55px;
        height: 55px;

        margin: 0;
    }

    .parcel-stage-number {
        margin-bottom: 5px;
    }

    .parcel-stage h3 {
        font-size: 0.95rem;
    }

    .parcel-stage p {
        font-size: 0.8rem;
    }


    /* Status */

    .parcel-status-card {
        grid-template-columns: 1fr;

        padding: 25px;

        gap: 20px;
    }

    .parcel-status-progress {
        grid-column: auto;
    }


    /* Message */

    .parcel-journey-message {
        align-items: flex-start;
        flex-direction: column;

        padding: 25px;

        margin-top: 45px;
    }

    .parcel-journey-message h3 {
        font-size: 1.35rem;
    }
}


/* =========================================================
   END — SECTION 07 CSS
========================================================== */















/* =========================================================
   GLOBALTRUST LOGISTICS
   SECTION 08 — GLOBAL REACH & CONNECTED DELIVERY
========================================================== */


/* =========================================================
   SECTION 08 — MAIN SECTION
========================================================== */

.global-reach-section {
    position: relative;

    display: block;

    width: 100%;

    margin: 0 !important;

    padding: 125px 0;

    background: #061426;

    color: #ffffff;

    overflow: hidden;

    isolation: isolate;

    box-sizing: border-box;
}


/* =========================================================
   SECTION 08 — BOX SIZING
========================================================== */

.global-reach-section *,
.global-reach-section *::before,
.global-reach-section *::after {
    box-sizing: border-box;
}


/* =========================================================
   SECTION 08 — BACKGROUND DECORATION
========================================================== */

.global-bg-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(100px);
}

.global-bg-glow-gold {
    width: 480px;
    height: 480px;

    top: -200px;
    left: -180px;

    background: #d4af37;

    opacity: 0.13;
}

.global-bg-glow-blue {
    width: 600px;
    height: 600px;

    right: -280px;
    bottom: -280px;

    background: #1d6fa5;

    opacity: 0.15;
}


/* =========================================================
   SECTION 08 — GRID OVERLAY
========================================================== */

.global-grid-overlay {
    position: absolute;

    inset: 0;

    opacity: 0.025;

    background-image:
        linear-gradient(
            #38bdf8 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            #38bdf8 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    pointer-events: none;
}


/* =========================================================
   SECTION 08 — CONTAINER
========================================================== */

.global-reach-container {
    position: relative;

    z-index: 2;

    margin-top: 0;

    margin-bottom: 0;
}


/* =========================================================
   SECTION 08 — INTRO
========================================================== */

.global-reach-intro {
    max-width: 850px;

    margin: 0 auto 80px;

    text-align: center;
}

.global-eyebrow {
    justify-content: center;
}

.global-reach-intro h2 {
    margin: 24px 0 20px;

    font-size: clamp(2.5rem, 5vw, 4.7rem);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -2px;
}

.global-reach-intro h2 span {
    display: block;

    color: #d4af37;
}

.global-reach-intro p {
    max-width: 700px;

    margin: auto;

    color: #b8c5d6;

    font-size: 1rem;

    line-height: 1.8;
}


/* =========================================================
   SECTION 08 — GLOBAL NETWORK CARD
========================================================== */

.global-network-card {
    position: relative;

    overflow: hidden;

    margin-bottom: 45px;

    padding: 35px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.065),
            rgba(255,255,255,0.025)
        );

    border: 1px solid rgba(212,175,55,0.2);

    border-radius: 28px;

    backdrop-filter: blur(18px);

    box-shadow:
        0 30px 80px rgba(0,0,0,0.3);
}


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

.global-network-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 35px;
}

.global-network-label {
    display: block;

    margin-bottom: 10px;

    color: #38bdf8;

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 2px;
}

.global-network-header h3 {
    margin: 0;

    font-size: 1.8rem;
}

.global-network-header h3 span {
    color: #d4af37;
}


/* =========================================================
   NETWORK STATUS
========================================================== */

.network-live-status {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 9px 14px;

    border: 1px solid rgba(56,189,248,0.2);

    border-radius: 50px;

    background: rgba(56,189,248,0.05);

    color: #9fb0c3;

    font-size: 0.65rem;

    font-weight: 700;

    letter-spacing: 1.2px;
}

.network-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #38bdf8;

    box-shadow:
        0 0 12px rgba(56,189,248,0.8);

    animation: networkStatusPulse 1.8s infinite;
}

@keyframes networkStatusPulse {

    0%,
    100% {
        opacity: 0.5;

        transform: scale(0.85);
    }

    50% {
        opacity: 1;

        transform: scale(1.15);
    }
}


/* =========================================================
   NETWORK MAP
========================================================== */

.global-network-map {
    position: relative;

    height: 510px;

    overflow: hidden;

    border-radius: 20px;

    background:
        radial-gradient(
            circle at center,
            rgba(29,111,165,0.13),
            transparent 55%
        ),
        #07182b;

    border: 1px solid rgba(56,189,248,0.08);
}


/* =========================================================
   NETWORK MAP GLOW
========================================================== */

.network-map-glow {
    position: absolute;

    width: 420px;
    height: 420px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(56,189,248,0.035);

    filter: blur(30px);
}


/* =========================================================
   WORLD DECORATIVE SHAPE
========================================================== */

.network-world {
    position: absolute;

    inset: 7%;

    opacity: 0.18;
}

.world-continent {
    position: absolute;

    display: block;

    border-radius: 45% 55% 50% 40%;

    background:
        linear-gradient(
            135deg,
            rgba(56,189,248,0.3),
            rgba(212,175,55,0.08)
        );

    filter: blur(1px);
}

.world-one {
    width: 19%;
    height: 24%;

    left: 10%;
    top: 23%;

    transform: rotate(-15deg);
}

.world-two {
    width: 25%;
    height: 18%;

    left: 31%;
    top: 18%;

    transform: rotate(8deg);
}

.world-three {
    width: 18%;
    height: 28%;

    left: 48%;
    top: 35%;

    transform: rotate(-12deg);
}

.world-four {
    width: 21%;
    height: 20%;

    right: 11%;
    top: 21%;

    transform: rotate(18deg);
}

.world-five {
    width: 12%;
    height: 13%;

    right: 18%;
    bottom: 18%;

    transform: rotate(-10deg);
}


/* =========================================================
   NETWORK ROUTES
========================================================== */

.network-route {
    position: absolute;

    height: 2px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,0.05),
            #38bdf8,
            rgba(56,189,248,0.05)
        );

    box-shadow:
        0 0 9px rgba(56,189,248,0.25);

    opacity: 0.65;

    overflow: hidden;
}

.network-route::after {
    content: "";

    position: absolute;

    top: 0;
    left: -30%;

    width: 30%;
    height: 100%;

    background: #f2d675;

    box-shadow:
        0 0 12px #f2d675;

    animation: routeLight 3s linear infinite;
}

@keyframes routeLight {

    from {
        left: -30%;
    }

    to {
        left: 100%;
    }
}


/* =========================================================
   NETWORK ROUTE POSITIONS
========================================================== */

.route-one {
    width: 27%;

    left: 18%;
    top: 36%;

    transform: rotate(-7deg);
}

.route-two {
    width: 30%;

    left: 18%;
    top: 39%;

    transform: rotate(17deg);
}

.route-three {
    width: 25%;

    left: 42%;
    top: 38%;

    transform: rotate(-18deg);
}

.route-four {
    width: 24%;

    left: 45%;
    top: 43%;

    transform: rotate(14deg);
}

.route-five {
    width: 22%;

    left: 61%;
    top: 38%;

    transform: rotate(19deg);
}

.route-six {
    width: 20%;

    left: 57%;
    top: 52%;

    transform: rotate(-18deg);
}


/* =========================================================
   NETWORK LOCATIONS
========================================================== */

.network-location {
    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 10px;
}

.location-dot {
    position: relative;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #f2d675;

    border: 2px solid #061426;

    box-shadow:
        0 0 15px rgba(242,214,117,0.8);
}

.location-pulse {
    position: absolute;

    left: -5px;
    top: -5px;

    width: 21px;
    height: 21px;

    border-radius: 50%;

    border: 1px solid #38bdf8;

    animation: locationPulse 2s infinite;
}

@keyframes locationPulse {

    0% {
        transform: scale(0.7);

        opacity: 0.8;
    }

    100% {
        transform: scale(1.8);

        opacity: 0;
    }
}

.location-label {
    display: flex;

    flex-direction: column;

    gap: 2px;

    padding: 7px 10px;

    border-radius: 7px;

    background: rgba(6,20,38,0.75);

    border: 1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(8px);
}

.location-label strong {
    color: #ffffff;

    font-size: 0.58rem;

    letter-spacing: 1px;
}

.location-label small {
    color: #6f849b;

    font-size: 0.5rem;

    letter-spacing: 1px;
}


/* =========================================================
   LOCATION POSITIONS
========================================================== */

.location-new-york {
    left: 11%;
    top: 32%;
}

.location-london {
    left: 40%;
    top: 25%;
}

.location-lagos {
    left: 42%;
    top: 53%;
}

.location-dubai {
    left: 59%;
    top: 42%;
}

.location-singapore {
    right: 16%;
    top: 57%;
}

.location-sydney {
    right: 7%;
    bottom: 17%;
}


/* =========================================================
   MOVING SHIPMENT
========================================================== */

.global-moving-shipment {
    position: absolute;

    z-index: 10;

    top: 34%;
    left: 18%;

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #061426;

    border: 1px solid #d4af37;

    color: #f2d675;

    box-shadow:
        0 0 20px rgba(212,175,55,0.25);

    animation:
        globalShipmentMove 9s ease-in-out infinite;
}

.global-moving-shipment i {
    position: relative;

    z-index: 2;

    font-size: 12px;
}

.shipment-glow {
    position: absolute;

    inset: -8px;

    border-radius: 50%;

    background: rgba(56,189,248,0.14);

    filter: blur(7px);

    animation: shipmentGlow 1.6s infinite;
}

@keyframes shipmentGlow {

    0%,
    100% {
        transform: scale(0.8);

        opacity: 0.35;
    }

    50% {
        transform: scale(1.2);

        opacity: 0.9;
    }
}

@keyframes globalShipmentMove {

    0% {
        left: 18%;
        top: 34%;
    }

    20% {
        left: 39%;
        top: 28%;
    }

    40% {
        left: 43%;
        top: 51%;
    }

    60% {
        left: 60%;
        top: 41%;
    }

    80% {
        left: 79%;
        top: 56%;
    }

    100% {
        left: 88%;
        top: 72%;
    }
}


/* =========================================================
   NETWORK BOTTOM
========================================================== */

.network-bottom {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    padding-top: 25px;
}

.network-bottom-item {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #9fb0c3;

    font-size: 0.62rem;

    font-weight: 700;

    letter-spacing: 1px;
}

.network-bottom-item i {
    color: #d4af37;
}

.network-bottom-line {
    width: 35px;
    height: 1px;

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


/* =========================================================
   SECTION 08 — GLOBAL STATISTICS
========================================================== */

.global-stats-grid {
    display: grid;

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

    gap: 18px;

    margin-bottom: 110px;
}

.global-stat-card {
    display: flex;

    align-items: center;

    gap: 17px;

    padding: 24px 20px;

    border-radius: 16px;

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

    border: 1px solid rgba(255,255,255,0.07);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

.global-stat-card:hover {
    transform: translateY(-7px);

    border-color: rgba(212,175,55,0.3);

    background: rgba(255,255,255,0.055);
}

.global-stat-icon {
    flex-shrink: 0;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: rgba(212,175,55,0.08);

    color: #d4af37;
}

.global-stat-card strong {
    display: block;

    color: #f2d675;

    font-size: 1.45rem;

    line-height: 1;
}

.global-stat-card span {
    display: block;

    margin-top: 5px;

    color: #ffffff;

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.global-stat-card p {
    margin: 5px 0 0;

    color: #71869c;

    font-size: 0.68rem;
}


/* =========================================================
   SECTION 08 — TRANSPORTATION
========================================================== */

.global-transport-section {
    margin-bottom: 110px;
}

.global-transport-heading {
    display: grid;

    grid-template-columns: 1fr 0.75fr;

    gap: 60px;

    align-items: end;

    margin-bottom: 45px;
}

.global-transport-heading h3 {
    margin: 18px 0 0;

    font-size: clamp(2rem, 4vw, 3.2rem);

    line-height: 1.1;
}

.global-transport-heading h3 span {
    color: #d4af37;
}

.global-transport-heading > p {
    margin: 0;

    color: #aebdcd;

    font-size: 0.92rem;

    line-height: 1.8;
}


/* =========================================================
   TRANSPORT CARDS
========================================================== */

.global-transport-grid {
    display: grid;

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

    gap: 20px;
}

.transport-card {
    position: relative;

    overflow: hidden;

    padding: 35px;

    min-height: 330px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.025)
        );

    border: 1px solid rgba(255,255,255,0.08);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.transport-card:hover {
    transform: translateY(-10px);

    border-color: rgba(56,189,248,0.3);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.25);
}

.transport-card-number {
    position: absolute;

    top: 25px;
    right: 25px;

    color: rgba(212,175,55,0.35);

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 2px;
}

.transport-icon {
    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    border-radius: 16px;

    background: rgba(56,189,248,0.07);

    border: 1px solid rgba(56,189,248,0.18);

    color: #38bdf8;

    font-size: 1.3rem;

    transition:
        transform 0.4s ease,
        background 0.4s ease;
}

.transport-card:hover .transport-icon {
    transform: rotate(-5deg) scale(1.08);

    background: rgba(212,175,55,0.08);

    color: #f2d675;
}

.transport-type {
    color: #d4af37;

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 2px;
}

.transport-card h4 {
    margin: 9px 0 12px;

    font-size: 1.2rem;
}

.transport-card p {
    margin: 0;

    color: #8fa3b8;

    font-size: 0.83rem;

    line-height: 1.75;
}

.transport-card-line {
    position: absolute;

    left: 35px;
    right: 35px;
    bottom: 24px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #d4af37,
            transparent
        );

    opacity: 0.35;
}


/* =========================================================
   SECTION 08 — ROUTE DEMONSTRATION
========================================================== */

.global-route-demo {
    margin-bottom: 100px;

    padding: 45px;

    border-radius: 24px;

    background:
        linear-gradient(
            120deg,
            rgba(29,111,165,0.07),
            rgba(212,175,55,0.04)
        );

    border: 1px solid rgba(56,189,248,0.12);
}

.route-demo-heading {
    text-align: center;

    margin-bottom: 50px;
}

.route-demo-heading > span {
    color: #38bdf8;

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 2px;
}

.route-demo-heading h3 {
    margin: 12px 0 0;

    font-size: 2rem;
}

.route-demo-heading h3 span {
    color: #d4af37;
}


/* =========================================================
   ROUTE DEMO TRACK
========================================================== */

.route-demo-track {
    display: flex;

    align-items: flex-start;

    justify-content: center;
}

.route-demo-stage {
    position: relative;

    width: 135px;

    text-align: center;
}

.route-demo-icon {
    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: #0a1d35;

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

    color: #71869c;

    transition:
        border-color 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease;
}

.route-demo-stage.active .route-demo-icon {
    color: #f2d675;

    border-color: #d4af37;

    box-shadow:
        0 0 25px rgba(212,175,55,0.2);
}

.route-demo-stage > span {
    display: block;

    color: #72869c;

    font-size: 0.58rem;

    font-weight: 800;

    letter-spacing: 1.3px;
}

.route-demo-stage strong {
    display: block;

    margin-top: 5px;

    color: #ffffff;

    font-size: 0.75rem;
}

.route-demo-connector {
    position: relative;

    width: 65px;

    height: 2px;

    margin-top: 28px;

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

    overflow: hidden;
}

.route-demo-connector span {
    position: absolute;

    top: 0;
    left: -30%;

    width: 30%;
    height: 100%;

    background: #38bdf8;

    box-shadow:
        0 0 10px rgba(56,189,248,0.8);

    animation: connectorMove 2.5s linear infinite;
}

@keyframes connectorMove {

    from {
        left: -30%;
    }

    to {
        left: 100%;
    }
}


/* =========================================================
   SECTION 08 — TRUST BLOCK
========================================================== */

.global-trust-block {
    display: flex;

    align-items: flex-start;

    gap: 30px;

    max-width: 1000px;

    margin: 0 auto 75px;

    padding: 40px;

    border-left: 3px solid #d4af37;

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,0.07),
            rgba(56,189,248,0.025),
            transparent
        );
}

.global-trust-icon {
    flex-shrink: 0;

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 17px;

    background: rgba(212,175,55,0.08);

    border: 1px solid rgba(212,175,55,0.2);

    color: #f2d675;

    font-size: 1.3rem;
}

.global-trust-content > span {
    color: #d4af37;

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 2px;
}

.global-trust-content h3 {
    margin: 10px 0 12px;

    font-size: 1.8rem;
}

.global-trust-content h3 span {
    color: #f2d675;
}

.global-trust-content > p {
    max-width: 750px;

    margin: 0;

    color: #aebdcd;

    font-size: 0.9rem;

    line-height: 1.8;
}


/* =========================================================
   TRUST POINTS
========================================================== */

.global-trust-points {
    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 22px;
}

.global-trust-points div {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #ffffff;

    font-size: 0.72rem;
}

.global-trust-points i {
    color: #38bdf8;
}


/* =========================================================
   SECTION 08 — DESTINATION TICKER
========================================================== */

.global-destination-ticker {
    overflow: hidden;

    margin-bottom: 80px;

    padding: 18px 0;

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

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

    background: rgba(255,255,255,0.015);
}

.destination-track {
    display: flex;

    align-items: center;

    justify-content: space-around;

    gap: 45px;

    white-space: nowrap;

    animation: destinationScroll 25s linear infinite;
}

.destination-track span {
    color: #71869c;

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 2px;
}

.destination-track i {
    color: #d4af37;

    font-size: 0.55rem;
}

@keyframes destinationScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-35%);
    }
}


/* =========================================================
   SECTION 08 — FINAL CTA
========================================================== */

.global-reach-cta {
    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    margin: 0;

    padding: 55px;

    border-radius: 25px;

    background:
        linear-gradient(
            120deg,
            rgba(212,175,55,0.09),
            rgba(29,111,165,0.08)
        );

    border: 1px solid rgba(212,175,55,0.2);

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

.global-cta-glow {
    position: absolute;

    width: 300px;
    height: 300px;

    right: -100px;
    top: -180px;

    border-radius: 50%;

    background: #d4af37;

    filter: blur(100px);

    opacity: 0.1;
}

.global-cta-content {
    position: relative;

    z-index: 2;
}

.global-cta-content > span {
    color: #38bdf8;

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 2px;
}

.global-cta-content h3 {
    margin: 10px 0;

    font-size: clamp(2rem, 4vw, 3rem);
}

.global-cta-content h3 span {
    color: #d4af37;
}

.global-cta-content p {
    max-width: 600px;

    margin: 0;

    color: #aebdcd;

    line-height: 1.7;
}


/* =========================================================
   CTA BUTTON
========================================================== */

.global-cta-button {
    position: relative;

    z-index: 2;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 16px 22px;

    border-radius: 10px;

    background: #d4af37;

    color: #061426;

    text-decoration: none;

    font-size: 0.72rem;

    font-weight: 900;

    letter-spacing: 0.8px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.global-cta-button:hover {
    transform: translateY(-4px);

    background: #f2d675;

    box-shadow:
        0 12px 30px rgba(212,175,55,0.25);
}

.global-cta-button i {
    transition: transform 0.3s ease;
}

.global-cta-button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   SECTION 08 — SCROLL REVEAL
========================================================== */

.reveal-global {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-global.global-visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   SECTION 08 — TABLET
========================================================== */

@media (max-width: 1000px) {

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

    .global-transport-heading {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .global-network-map {
        height: 450px;
    }

    .route-demo-connector {
        width: 35px;
    }

}


/* =========================================================
   SECTION 08 — MOBILE
========================================================== */

@media (max-width: 700px) {

    .global-reach-section {
        margin: 0 !important;

        padding: 85px 0;
    }


    /* =====================================================
       INTRO
    ====================================================== */

    .global-reach-intro {
        margin-bottom: 55px;
    }

    .global-reach-intro h2 {
        font-size: 2.5rem;

        letter-spacing: -1px;
    }


    /* =====================================================
       NETWORK
    ====================================================== */

    .global-network-card {
        padding: 20px;

        border-radius: 20px;
    }

    .global-network-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .global-network-header h3 {
        font-size: 1.5rem;
    }

    .global-network-map {
        height: 390px;
    }

    .network-bottom {
        flex-wrap: wrap;

        gap: 12px;
    }

    .network-bottom-line {
        display: none;
    }

    .network-bottom-item {
        font-size: 0.55rem;
    }


    /* =====================================================
       LOCATION LABELS
    ====================================================== */

    .location-label {
        padding: 5px 7px;
    }

    .location-label strong {
        font-size: 0.48rem;
    }

    .location-label small {
        font-size: 0.42rem;
    }


    /* =====================================================
       STATS
    ====================================================== */

    .global-stats-grid {
        grid-template-columns: 1fr;

        margin-bottom: 80px;
    }


    /* =====================================================
       TRANSPORT
    ====================================================== */

    .global-transport-section {
        margin-bottom: 80px;
    }

    .global-transport-grid {
        grid-template-columns: 1fr;
    }

    .transport-card {
        min-height: auto;
    }


    /* =====================================================
       ROUTE DEMONSTRATION
    ====================================================== */

    .global-route-demo {
        padding: 30px 20px;

        overflow: hidden;
    }

    .route-demo-track {
        flex-direction: column;

        align-items: center;
    }

    .route-demo-stage {
        width: 100%;
    }

    .route-demo-connector {
        width: 2px;

        height: 35px;

        margin: 0;

        background: rgba(255,255,255,0.09);
    }

    .route-demo-connector span {
        width: 100%;

        height: 30%;

        top: -30%;
        left: 0;

        animation:
            verticalConnectorMove 2.5s linear infinite;
    }

    @keyframes verticalConnectorMove {

        from {
            top: -30%;
        }

        to {
            top: 100%;
        }
    }


    /* =====================================================
       TRUST
    ====================================================== */

    .global-trust-block {
        flex-direction: column;

        padding: 28px;

        margin-bottom: 60px;
    }

    .global-trust-content h3 {
        font-size: 1.45rem;
    }

    .global-trust-points {
        flex-direction: column;

        gap: 12px;
    }


    /* =====================================================
       TICKER
    ====================================================== */

    .global-destination-ticker {
        margin-bottom: 60px;
    }


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

    .global-reach-cta {
        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

        padding: 32px 25px;

        margin-bottom: 0;
    }

    .global-cta-button {
        width: 100%;

        justify-content: center;
    }

}


/* =========================================================
   SECTION 08 — REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .global-moving-shipment,
    .network-route::after,
    .shipment-glow,
    .network-status-dot,
    .location-pulse,
    .destination-track,
    .route-demo-connector span {
        animation: none !important;
    }

    .reveal-global {
        opacity: 1;

        transform: none;

        transition: none;
    }

}


/* =========================================================
   SECTION 08 — FINAL SPACING PROTECTION
========================================================== */

.global-reach-section {
    margin-bottom: 0 !important;
}


/*
   The next section should begin immediately after
   Section 08 without an inherited top margin.
*/

.global-reach-section + section {
    margin-top: 0 !important;
}


/* Prevent the final element from creating
   unwanted external spacing. */

.global-reach-section .global-reach-cta {
    margin-bottom: 0 !important;
}


/* =========================================================
   END — SECTION 08 CSS
========================================================== */














/* =========================================================
   GLOBALTRUST LOGISTICS
   SECTION 10 — FREQUENTLY ASKED QUESTIONS
========================================================== */


/* =========================================================
   SECTION 10 — MAIN SECTION
========================================================== */

.faq-section {
    position: relative;
    overflow: hidden;

    padding: 125px 0 120px;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(212,175,55,0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(29,111,165,0.10),
            transparent 35%
        ),
        #061426;

    color: #ffffff;

    isolation: isolate;
}


/* =========================================================
   SECTION 10 — BACKGROUND GLOWS
========================================================== */

.faq-bg-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(100px);

    z-index: -1;
}

.faq-bg-glow-gold {
    width: 500px;
    height: 500px;

    top: -230px;
    left: -220px;

    background: #d4af37;

    opacity: 0.12;

    animation: faqGoldFloat 10s ease-in-out infinite;
}

.faq-bg-glow-blue {
    width: 600px;
    height: 600px;

    right: -300px;
    bottom: -280px;

    background: #1d6fa5;

    opacity: 0.14;

    animation: faqBlueFloat 12s ease-in-out infinite;
}

@keyframes faqGoldFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(35px, 25px) scale(1.08);
    }
}

@keyframes faqBlueFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-30px, -25px) scale(1.08);
    }
}


/* =========================================================
   SECTION 10 — GRID OVERLAY
========================================================== */

.faq-grid-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.025;

    background-image:
        linear-gradient(
            rgba(56,189,248,0.8) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(56,189,248,0.8) 1px,
            transparent 1px
        );

    background-size: 65px 65px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 85%,
            transparent
        );
}


/* =========================================================
   SECTION 10 — DECORATIVE ORBITS
========================================================== */

.faq-orbit {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    border: 1px solid rgba(212,175,55,0.07);

    z-index: -1;
}

.faq-orbit-one {
    width: 420px;
    height: 420px;

    top: 5%;
    right: -250px;

    animation: faqOrbitRotate 25s linear infinite;
}

.faq-orbit-two {
    width: 280px;
    height: 280px;

    bottom: 8%;
    left: -180px;

    border-color: rgba(56,189,248,0.07);

    animation: faqOrbitRotateReverse 20s linear infinite;
}

@keyframes faqOrbitRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes faqOrbitRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


/* =========================================================
   SECTION 10 — CONTAINER
========================================================== */

.faq-container {
    position: relative;

    z-index: 2;
}


/* =========================================================
   SECTION 10 — INTRO
========================================================== */

.faq-intro {
    max-width: 850px;

    margin: 0 auto 70px;

    text-align: center;
}

.faq-eyebrow {
    justify-content: center;
}

.faq-intro h2 {
    margin: 24px 0 20px;

    font-size: clamp(2.6rem, 5vw, 4.8rem);

    line-height: 1.05;

    letter-spacing: -2.5px;

    font-weight: 800;
}

.faq-intro h2 span {
    display: block;

    color: #d4af37;

    text-shadow:
        0 0 25px rgba(212,175,55,0.12);
}

.faq-intro > p {
    max-width: 720px;

    margin: 0 auto;

    color: #b8c5d6;

    font-size: 0.98rem;

    line-height: 1.85;
}


/* =========================================================
   SECTION 10 — TRUST BAR
========================================================== */

.faq-trust-bar {
    display: grid;

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

    align-items: center;

    gap: 25px;

    margin-bottom: 65px;

    padding: 20px 25px;

    border: 1px solid rgba(255,255,255,0.07);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.018)
        );

    backdrop-filter: blur(16px);

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

.faq-trust-item {
    display: flex;

    align-items: center;

    gap: 13px;
}

.faq-trust-icon {
    flex-shrink: 0;

    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(212,175,55,0.08);

    border: 1px solid rgba(212,175,55,0.18);

    color: #f2d675;

    font-size: 0.95rem;

    box-shadow:
        0 0 20px rgba(212,175,55,0.05);
}

.faq-trust-item strong {
    display: block;

    color: #ffffff;

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 1.2px;
}

.faq-trust-item small {
    display: block;

    margin-top: 4px;

    color: #72869c;

    font-size: 0.62rem;

    line-height: 1.4;
}

.faq-trust-divider {
    width: 1px;

    height: 38px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,0.12),
            transparent
        );
}


/* =========================================================
   SECTION 10 — FAQ MAIN AREA
========================================================== */

.faq-main-area {
    display: grid;

    grid-template-columns: 210px 1fr;

    gap: 45px;

    align-items: start;
}


/* =========================================================
   SECTION 10 — CATEGORY NAVIGATION
========================================================== */

.faq-category-nav {
    position: sticky;

    top: 110px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 10px;

    border-radius: 18px;

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

    border: 1px solid rgba(255,255,255,0.06);

    backdrop-filter: blur(14px);
}

.faq-category {
    position: relative;

    display: flex;

    align-items: center;

    gap: 11px;

    width: 100%;

    padding: 13px 14px;

    border: 1px solid transparent;

    border-radius: 10px;

    background: transparent;

    color: #8194a9;

    font-family: inherit;

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.7px;

    text-align: left;

    cursor: pointer;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.faq-category i {
    width: 18px;

    color: #557087;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.faq-category:hover {
    color: #ffffff;

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

    transform: translateX(3px);
}

.faq-category:hover i {
    color: #38bdf8;

    transform: scale(1.1);
}

.faq-category.active {
    color: #061426;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f2d675
        );

    border-color: rgba(242,214,117,0.6);

    box-shadow:
        0 8px 25px rgba(212,175,55,0.13);
}

.faq-category.active i {
    color: #061426;
}


/* =========================================================
   SECTION 10 — FAQ CONTENT
========================================================== */

.faq-content {
    min-width: 0;
}

.faq-category-group {
    display: none;

    animation: faqGroupEnter 0.45s ease both;
}

.faq-category-group.active {
    display: block;
}

@keyframes faqGroupEnter {

    from {
        opacity: 0;

        transform: translateY(12px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}


/* =========================================================
   SECTION 10 — FAQ ITEM
========================================================== */

.faq-item {
    position: relative;

    overflow: hidden;

    margin-bottom: 12px;

    border: 1px solid rgba(255,255,255,0.075);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.018)
        );

    transition:
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

.faq-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 2px;

    background:
        linear-gradient(
            to bottom,
            #d4af37,
            #38bdf8
        );

    opacity: 0;

    transition: opacity 0.35s ease;
}

.faq-item:hover {
    border-color: rgba(56,189,248,0.18);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.025)
        );

    transform: translateY(-2px);
}

.faq-item.active {
    border-color: rgba(212,175,55,0.22);

    box-shadow:
        0 15px 45px rgba(0,0,0,0.18);
}

.faq-item.active::before {
    opacity: 1;
}


/* =========================================================
   SECTION 10 — FAQ QUESTION
========================================================== */

.faq-question {
    display: grid;

    grid-template-columns: 45px 1fr 40px;

    align-items: center;

    gap: 15px;

    width: 100%;

    padding: 21px 22px;

    border: 0;

    background: transparent;

    color: #ffffff;

    font-family: inherit;

    text-align: left;

    cursor: pointer;
}

.faq-question-number {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    border-radius: 10px;

    background: rgba(212,175,55,0.06);

    border: 1px solid rgba(212,175,55,0.13);

    color: #8c7b43;

    font-size: 0.58rem;

    font-weight: 800;

    letter-spacing: 1px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.faq-item.active .faq-question-number {
    background: rgba(212,175,55,0.12);

    border-color: rgba(212,175,55,0.3);

    color: #f2d675;
}

.faq-question-text {
    color: #e9eef5;

    font-size: 0.88rem;

    font-weight: 700;

    line-height: 1.5;

    transition: color 0.3s ease;
}

.faq-item:hover .faq-question-text,
.faq-item.active .faq-question-text {
    color: #ffffff;
}


/* =========================================================
   SECTION 10 — QUESTION ICON
========================================================== */

.faq-question-icon {
    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(56,189,248,0.05);

    border: 1px solid rgba(56,189,248,0.13);

    color: #38bdf8;

    font-size: 0.65rem;

    transition:
        transform 0.4s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.faq-item.active .faq-question-icon {
    transform: rotate(45deg);

    background: rgba(212,175,55,0.1);

    border-color: rgba(212,175,55,0.25);

    color: #f2d675;
}


/* =========================================================
   SECTION 10 — FAQ ANSWER
========================================================== */

.faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows 0.45s ease;
}

.faq-answer p {
    min-height: 0;

    overflow: hidden;

    margin: 0;

    padding: 0 80px 0 82px;

    color: #9aabbd;

    font-size: 0.82rem;

    line-height: 1.85;

    opacity: 0;

    transform: translateY(-8px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        padding 0.35s ease;
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}

.faq-item.active .faq-answer p {
    padding-bottom: 24px;

    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   SECTION 10 — TRUST MESSAGE
========================================================== */

.faq-trust-message {
    display: flex;

    align-items: flex-start;

    gap: 25px;

    max-width: 1000px;

    margin: 90px auto 70px;

    padding: 35px;

    border-left: 3px solid #d4af37;

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,0.07),
            rgba(56,189,248,0.025),
            transparent
        );

    border-radius: 0 18px 18px 0;
}

.faq-trust-message-icon {
    flex-shrink: 0;

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: rgba(212,175,55,0.08);

    border: 1px solid rgba(212,175,55,0.2);

    color: #f2d675;

    font-size: 1.15rem;

    box-shadow:
        0 0 25px rgba(212,175,55,0.06);
}

.faq-trust-message-content > span {
    color: #38bdf8;

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 2px;
}

.faq-trust-message-content h3 {
    margin: 9px 0 12px;

    font-size: 1.65rem;

    line-height: 1.25;
}

.faq-trust-message-content h3 span {
    color: #f2d675;
}

.faq-trust-message-content p {
    max-width: 760px;

    margin: 0;

    color: #9aabbd;

    font-size: 0.84rem;

    line-height: 1.8;
}


/* =========================================================
   SECTION 10 — FINAL CTA
========================================================== */

.faq-final-area {
    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding: 48px 50px;

    border-radius: 23px;

    background:
        linear-gradient(
            120deg,
            rgba(212,175,55,0.09),
            rgba(29,111,165,0.08)
        );

    border: 1px solid rgba(212,175,55,0.18);

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

.faq-final-area::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -120px;
    top: -170px;

    border-radius: 50%;

    background: #d4af37;

    filter: blur(100px);

    opacity: 0.1;

    pointer-events: none;
}

.faq-final-content {
    position: relative;

    z-index: 2;
}

.faq-final-label {
    color: #38bdf8;

    font-size: 0.63rem;

    font-weight: 800;

    letter-spacing: 2px;
}

.faq-final-content h3 {
    margin: 9px 0 10px;

    font-size: clamp(2rem, 4vw, 2.8rem);

    line-height: 1.1;
}

.faq-final-content h3 span {
    color: #d4af37;
}

.faq-final-content p {
    max-width: 600px;

    margin: 0;

    color: #aebdcd;

    font-size: 0.86rem;

    line-height: 1.75;
}


/* =========================================================
   SECTION 10 — SUPPORT BUTTON
========================================================== */

.faq-support-button {
    position: relative;

    z-index: 2;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 15px 20px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f2d675
        );

    color: #061426;

    text-decoration: none;

    font-size: 0.68rem;

    font-weight: 900;

    letter-spacing: 0.8px;

    box-shadow:
        0 12px 30px rgba(212,175,55,0.12);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}

.faq-support-button:hover {
    transform: translateY(-4px);

    filter: brightness(1.05);

    box-shadow:
        0 16px 38px rgba(212,175,55,0.25);
}

.faq-support-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 8px;

    background: rgba(6,20,38,0.12);
}

.faq-support-button > i {
    transition:
        transform 0.3s ease;
}

.faq-support-button:hover > i {
    transform: translateX(5px);
}


/* =========================================================
   SECTION 10 — BOTTOM INDICATORS
========================================================== */

.faq-bottom-indicators {
    display: grid;

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

    gap: 12px;

    margin-top: 25px;
}

.faq-bottom-indicators > div {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 52px;

    padding: 10px;

    border: 1px solid rgba(255,255,255,0.05);

    border-radius: 10px;

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

    color: #71869c;

    font-size: 0.55rem;

    font-weight: 800;

    letter-spacing: 0.8px;

    text-align: center;

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

.faq-bottom-indicators > div:hover {
    color: #ffffff;

    border-color: rgba(56,189,248,0.14);

    background: rgba(56,189,248,0.025);
}

.faq-bottom-indicators i {
    color: #d4af37;

    font-size: 0.75rem;
}


/* =========================================================
   SECTION 10 — SCROLL REVEAL
========================================================== */

.faq-reveal {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.faq-reveal.faq-visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   SECTION 10 — TABLET
========================================================== */

@media (max-width: 1000px) {

    .faq-main-area {
        grid-template-columns: 170px 1fr;

        gap: 30px;
    }

    .faq-trust-bar {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .faq-trust-divider {
        display: none;
    }

    .faq-trust-item {
        padding: 5px 0;
    }

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

    .faq-final-area {
        padding: 40px;
    }
}


/* =========================================================
   SECTION 10 — MOBILE
========================================================== */

@media (max-width: 700px) {

    .faq-section {
        padding: 85px 0 80px;
    }


    /* Intro */

    .faq-intro {
        margin-bottom: 50px;
    }

    .faq-intro h2 {
        font-size: 2.45rem;

        letter-spacing: -1.2px;
    }

    .faq-intro > p {
        font-size: 0.86rem;

        line-height: 1.75;
    }


    /* Trust bar */

    .faq-trust-bar {
        margin-bottom: 45px;

        padding: 18px;

        border-radius: 15px;
    }

    .faq-trust-item {
        align-items: flex-start;
    }


    /* Main */

    .faq-main-area {
        display: block;
    }


    /* Categories */

    .faq-category-nav {
        position: relative;

        top: auto;

        display: flex;

        flex-direction: row;

        overflow-x: auto;

        margin-bottom: 20px;

        padding: 7px;

        scrollbar-width: none;
    }

    .faq-category-nav::-webkit-scrollbar {
        display: none;
    }

    .faq-category {
        flex-shrink: 0;

        width: auto;

        white-space: nowrap;

        padding: 11px 13px;
    }


    /* Questions */

    .faq-question {
        grid-template-columns: 34px 1fr 32px;

        gap: 10px;

        padding: 17px 15px;
    }

    .faq-question-number {
        width: 31px;
        height: 31px;

        font-size: 0.52rem;
    }

    .faq-question-text {
        font-size: 0.76rem;
    }

    .faq-question-icon {
        width: 29px;
        height: 29px;

        font-size: 0.58rem;
    }


    /* Answers */

    .faq-answer p {
        padding-left: 59px;

        padding-right: 18px;

        font-size: 0.74rem;

        line-height: 1.8;
    }

    .faq-item.active .faq-answer p {
        padding-bottom: 19px;
    }


    /* Trust message */

    .faq-trust-message {
        flex-direction: column;

        gap: 18px;

        margin: 65px auto 55px;

        padding: 27px 22px;
    }

    .faq-trust-message-content h3 {
        font-size: 1.4rem;
    }

    .faq-trust-message-content p {
        font-size: 0.77rem;
    }


    /* Final CTA */

    .faq-final-area {
        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

        padding: 32px 24px;

        border-radius: 18px;
    }

    .faq-final-content h3 {
        font-size: 2rem;
    }

    .faq-final-content p {
        font-size: 0.77rem;
    }

    .faq-support-button {
        width: 100%;

        justify-content: center;
    }


    /* Bottom indicators */

    .faq-bottom-indicators {
        grid-template-columns: 1fr;

        margin-top: 15px;
    }

    .faq-bottom-indicators > div {
        justify-content: flex-start;

        padding: 13px 15px;
    }


    /* Background decoration */

    .faq-bg-glow-gold {
        width: 300px;
        height: 300px;

        top: -120px;
        left: -140px;
    }

    .faq-bg-glow-blue {
        width: 350px;
        height: 350px;

        right: -180px;
        bottom: -150px;
    }

    .faq-orbit-one {
        width: 250px;
        height: 250px;

        right: -170px;
    }

    .faq-orbit-two {
        width: 190px;
        height: 190px;

        left: -130px;
    }
}


/* =========================================================
   SECTION 10 — SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

    .faq-intro h2 {
        font-size: 2.15rem;
    }

    .faq-category {
        font-size: 0.6rem;

        padding: 10px 11px;
    }

    .faq-question {
        grid-template-columns: 30px 1fr 29px;

        gap: 8px;

        padding: 15px 12px;
    }

    .faq-question-number {
        width: 28px;
        height: 28px;
    }

    .faq-question-text {
        font-size: 0.71rem;
    }

    .faq-answer p {
        padding-left: 50px;

        padding-right: 15px;

        font-size: 0.71rem;
    }
}


/* =========================================================
   SECTION 10 — REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .faq-bg-glow-gold,
    .faq-bg-glow-blue,
    .faq-orbit-one,
    .faq-orbit-two {
        animation: none !important;
    }

    .faq-reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }

    .faq-category-group {
        animation: none;
    }

    .faq-item,
    .faq-category,
    .faq-support-button {
        transition: none;
    }
}


/* =========================================================
   END — SECTION 10 FREQUENTLY ASKED QUESTIONS
========================================================== */















/* =========================================================
   GLOBALTRUST LOGISTICS
   SECTION 09 — CUSTOMER TESTIMONIALS
========================================================== */

.gt-testimonials-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(29, 111, 165, 0.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(212, 175, 55, 0.12),
            transparent 30%
        ),
        #061426;
    color: #ffffff;
}


/* =========================================================
   BACKGROUND EFFECTS
========================================================== */

.gt-testimonials-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(10px);
    opacity: 0.6;
}

.gt-testimonials-glow-one {
    width: 420px;
    height: 420px;
    top: 8%;
    left: -220px;
    background: rgba(29, 111, 165, 0.12);
}

.gt-testimonials-glow-two {
    width: 380px;
    height: 380px;
    right: -180px;
    bottom: 12%;
    background: rgba(212, 175, 55, 0.1);
}

.gt-testimonials-grid {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    pointer-events: none;

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

    background-size: 55px 55px;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 20%,
        black 80%,
        transparent
    );
}

.gt-testimonials-orbit {
    position: absolute;
    border: 1px solid rgba(56, 189, 248, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.gt-orbit-one {
    width: 620px;
    height: 620px;
    top: -300px;
    right: -300px;
}

.gt-orbit-two {
    width: 460px;
    height: 460px;
    bottom: -250px;
    left: -250px;
}


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

.gt-testimonials-container {
    position: relative;
    z-index: 2;
}


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

.gt-testimonials-header {
    max-width: 850px;
    margin: 0 auto 65px;
    text-align: center;
}

.gt-testimonials-eyebrow {
    justify-content: center;
}

.gt-testimonials-heading {
    margin: 22px 0 20px;
    font-size: clamp(2.3rem, 5vw, 4.2rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.gt-testimonials-heading span {
    display: block;
    color: #D4AF37;
    background: linear-gradient(
        90deg,
        #D4AF37,
        #F2D675,
        #D4AF37
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gtGoldFlow 5s linear infinite;
}

@keyframes gtGoldFlow {
    to {
        background-position: 200% center;
    }
}

.gt-testimonials-intro {
    max-width: 730px;
    margin: 0 auto;
    color: #B8C5D6;
    font-size: 1.05rem;
    line-height: 1.9;
}

.gt-rating-summary {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 28px;
    padding: 10px 18px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 50px;
    background: rgba(255,255,255,0.035);
    backdrop-filter: blur(12px);
}

.gt-rating-stars {
    display: flex;
    gap: 4px;
    color: #F2D675;
}

.gt-rating-stars i {
    animation: gtStarPulse 2.5s ease-in-out infinite;
}

.gt-rating-stars i:nth-child(2) {
    animation-delay: .15s;
}

.gt-rating-stars i:nth-child(3) {
    animation-delay: .3s;
}

.gt-rating-stars i:nth-child(4) {
    animation-delay: .45s;
}

.gt-rating-stars i:nth-child(5) {
    animation-delay: .6s;
}

@keyframes gtStarPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }
}

.gt-rating-summary > span {
    color: #B8C5D6;
    font-size: .85rem;
}


/* =========================================================
   TRUST BANNER
========================================================== */

.gt-testimonials-trust-banner {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 25px;
    padding: 32px;
    margin-bottom: 55px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.06),
            rgba(29,111,165,0.08)
        );

    border: 1px solid rgba(56,189,248,0.16);
    border-radius: 24px;

    box-shadow:
        0 25px 70px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.04);

    backdrop-filter: blur(16px);
}

.gt-trust-banner-icon {
    width: 65px;
    height: 65px;
    display: grid;
    place-items: center;

    color: #38BDF8;
    font-size: 1.5rem;

    border-radius: 18px;
    background: rgba(56,189,248,0.08);
    border: 1px solid rgba(56,189,248,0.2);

    box-shadow:
        0 0 30px rgba(56,189,248,0.1);
}

.gt-trust-banner-content > span {
    color: #38BDF8;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.gt-trust-banner-content h3 {
    margin: 8px 0;
    font-size: 1.6rem;
}

.gt-trust-banner-content h3 span {
    color: #D4AF37;
}

.gt-trust-banner-content p {
    margin: 0;
    color: #B8C5D6;
    line-height: 1.7;
    font-size: .92rem;
}

.gt-trust-route {
    display: flex;
    align-items: center;
}

.gt-route-dot {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #1D6FA5;
    box-shadow: 0 0 12px rgba(56,189,248,0.4);
}

.gt-route-dot.active {
    background: #F2D675;
    box-shadow:
        0 0 12px rgba(242,214,117,0.7),
        0 0 25px rgba(242,214,117,0.25);
    animation: gtRoutePulse 1.8s infinite;
}

@keyframes gtRoutePulse {
    50% {
        transform: scale(1.5);
    }
}

.gt-route-line {
    width: 30px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(56,189,248,.4),
        rgba(212,175,55,.6)
    );
}


/* =========================================================
   SLIDER
========================================================== */

.gt-testimonials-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

.gt-testimonials-slider {
    overflow: hidden;
    width: 100%;
}

.gt-testimonials-track {
    display: flex;
    transition:
        transform .65s cubic-bezier(.22,.61,.36,1);
}

.gt-testimonial-card {
    position: relative;
    flex: 0 0 calc(33.333333% - 16px);
    margin-right: 24px;
    padding: 30px;

    min-height: 385px;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );

    border: 1px solid rgba(212,175,55,.14);
    border-radius: 25px;

    overflow: hidden;

    backdrop-filter: blur(15px);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.gt-testimonial-card:hover {
    transform: translateY(-10px);
    border-color: rgba(212,175,55,.45);

    box-shadow:
        0 25px 60px rgba(0,0,0,.3),
        0 0 35px rgba(212,175,55,.07);
}

.gt-testimonial-card-glow {
    position: absolute;
    width: 130px;
    height: 130px;
    top: -70px;
    right: -60px;
    border-radius: 50%;
    background: rgba(212,175,55,.08);
    filter: blur(20px);
    transition: .4s ease;
}

.gt-testimonial-card:hover
.gt-testimonial-card-glow {
    background: rgba(212,175,55,.18);
}

.gt-testimonial-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.gt-quote-icon {
    color: #D4AF37;
    font-size: 1.4rem;
}

.gt-testimonial-stars {
    display: flex;
    gap: 3px;
    color: #F2D675;
    font-size: .78rem;
}

.gt-testimonial-text {
    margin: 28px 0;
    color: #E5ECF5;
    font-size: .97rem;
    line-height: 1.85;
    font-style: italic;
}

.gt-testimonial-divider {
    width: 100%;
    height: 1px;
    margin-top: auto;
    margin-bottom: 20px;
    background: linear-gradient(
        90deg,
        rgba(212,175,55,.35),
        transparent
    );
}

.gt-customer {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gt-customer-avatar {
    width: 46px;
    height: 46px;
    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #D4AF37,
            #8d711b
        );

    color: #061426;
    font-size: .8rem;
    font-weight: 900;

    box-shadow:
        0 0 20px rgba(212,175,55,.15);
}

.gt-customer-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gt-customer-info strong {
    font-size: .9rem;
    color: #fff;
}

.gt-customer-info span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #8fa1b7;
    font-size: .72rem;
}

.gt-customer-info span i {
    color: #38BDF8;
}

.gt-verified {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #75d7ff;
    font-size: .65rem;
    white-space: nowrap;
}

.gt-verified i {
    font-size: .72rem;
}

.gt-shipment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.gt-shipment-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;

    color: #9fb0c5;
    font-size: .64rem;

    border-radius: 8px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
}

.gt-shipment-meta i {
    color: #D4AF37;
}


/* =========================================================
   SLIDER CONTROLS
========================================================== */

.gt-testimonial-control {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

    display: grid;
    place-items: center;

    color: #D4AF37;
    background: rgba(255,255,255,.045);

    border: 1px solid rgba(212,175,55,.25);
    border-radius: 50%;

    cursor: pointer;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}

.gt-testimonial-control:hover {
    transform: scale(1.08);
    color: #061426;
    background: #D4AF37;
}

.gt-testimonial-control:active {
    transform: scale(.95);
}


/* =========================================================
   DOTS
========================================================== */

.gt-testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 30px 0 70px;
}

.gt-testimonial-dot {
    width: 24px;
    height: 5px;
    padding: 0;

    border: 0;
    border-radius: 10px;

    background: rgba(255,255,255,.12);
    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.gt-testimonial-dot.active {
    width: 42px;
    background: #D4AF37;
    box-shadow: 0 0 15px rgba(212,175,55,.35);
}


/* =========================================================
   CUSTOMER METRICS
========================================================== */

.gt-customer-metrics {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;

    padding: 35px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(29,111,165,.08),
            rgba(212,175,55,.05)
        );

    border: 1px solid rgba(255,255,255,.08);
}

.gt-metric-item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.gt-metric-icon {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    color: #D4AF37;
    background: rgba(212,175,55,.08);
    border: 1px solid rgba(212,175,55,.16);
}

.gt-metric-item strong {
    display: block;
    color: #fff;
    font-size: 1.5rem;
}

.gt-metric-item small {
    display: block;
    margin-top: 3px;
    color: #8fa1b7;
    font-size: .7rem;
    letter-spacing: .5px;
}

.gt-metric-divider {
    width: 1px;
    height: 45px;
    background: rgba(255,255,255,.1);
}


/* =========================================================
   FINAL TRUST MESSAGE
========================================================== */

.gt-final-trust {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 25px;

    margin-top: 35px;
    padding: 38px;

    border-radius: 26px;

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(212,175,55,.09),
            transparent 30%
        ),
        rgba(255,255,255,.025);

    border: 1px solid rgba(212,175,55,.15);
}

.gt-final-trust-mark {
    width: 60px;
    height: 60px;

    display: grid;
    place-items: center;

    border-radius: 17px;

    color: #D4AF37;
    font-size: 1.3rem;

    background: rgba(212,175,55,.08);
    border: 1px solid rgba(212,175,55,.2);
}

.gt-final-trust-content > span {
    color: #38BDF8;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.gt-final-trust-content h3 {
    margin: 7px 0;
    font-size: 1.55rem;
}

.gt-final-trust-content h3 span {
    color: #D4AF37;
}

.gt-final-trust-content p {
    margin: 0;
    color: #9eafc3;
    line-height: 1.7;
    font-size: .88rem;
}

.gt-testimonial-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 14px 20px;

    color: #061426;
    background: #D4AF37;

    border-radius: 10px;

    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;

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

.gt-testimonial-cta:hover {
    transform: translateY(-3px);
    background: #F2D675;
    box-shadow: 0 12px 30px rgba(212,175,55,.18);
}


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

.reveal-testimonial {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

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


/* =========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 1100px) {

    .gt-testimonial-card {
        flex: 0 0 calc(50% - 12px);
    }

    .gt-testimonials-trust-banner {
        grid-template-columns: auto 1fr;
    }

    .gt-trust-route {
        grid-column: 1 / -1;
        justify-content: center;
        margin-top: 8px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 700px) {

    .gt-testimonials-section {
        padding: 85px 0;
    }

    .gt-testimonials-header {
        margin-bottom: 45px;
    }

    .gt-testimonials-heading {
        font-size: 2.25rem;
    }

    .gt-testimonials-intro {
        font-size: .9rem;
        line-height: 1.75;
    }

    .gt-rating-summary {
        flex-direction: column;
        gap: 6px;
        border-radius: 15px;
    }

    .gt-testimonials-trust-banner {
        padding: 24px;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .gt-trust-banner-icon {
        margin: 0 auto;
    }

    .gt-trust-route {
        justify-content: center;
    }

    .gt-testimonials-slider-wrapper {
        gap: 8px;
    }

    .gt-testimonial-control {
        width: 40px;
        height: 40px;
        font-size: .75rem;
    }

    .gt-testimonial-card {
        flex: 0 0 100%;
        margin-right: 0;
        min-height: 400px;
        padding: 25px;
    }

    .gt-customer-metrics {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 28px 20px;
    }

    .gt-metric-divider {
        width: 70%;
        height: 1px;
        margin: 0 auto;
    }

    .gt-final-trust {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 30px 22px;
    }

    .gt-final-trust-mark {
        margin: 0 auto;
    }

    .gt-testimonial-cta {
        justify-content: center;
        width: 100%;
    }

}


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

@media (max-width: 430px) {

    .gt-testimonials-heading {
        font-size: 2rem;
    }

    .gt-testimonial-control {
        width: 36px;
        height: 36px;
    }

    .gt-testimonial-card {
        min-height: 420px;
    }

    .gt-customer {
        align-items: flex-start;
    }

    .gt-verified {
        font-size: .58rem;
    }

    .gt-shipment-meta span {
        font-size: .58rem;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .gt-testimonials-section *,
    .gt-testimonials-section *::before,
    .gt-testimonials-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

}


/* =========================================================
   END — SECTION 09 CUSTOMER TESTIMONIALS
========================================================== */















/* =========================================================
   GLOBALTRUST LOGISTICS
   SECTION 10 — FREQUENTLY ASKED QUESTIONS
   PREMIUM / MODERN / TRUSTWORTHY DESIGN
========================================================== */


/* =========================================================
   SECTION 10 — MAIN SECTION
========================================================== */

.faq-section {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding: 125px 0;

    background: #050d18;

    color: #ffffff;
}


/* =========================================================
   SECTION 10 — BACKGROUND DECORATION
========================================================== */

.faq-bg-glow {
    position: absolute;

    z-index: -3;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(110px);

    will-change: transform;
}


/* GOLD GLOW */

.faq-bg-glow-gold {
    width: 500px;
    height: 500px;

    top: -240px;
    left: -220px;

    background: #d4af37;

    opacity: 0.07;
}


/* BLUE GLOW */

.faq-bg-glow-blue {
    width: 560px;
    height: 560px;

    right: -300px;
    bottom: -280px;

    background: #1677a8;

    opacity: 0.06;
}


/* =========================================================
   GRID OVERLAY
========================================================== */

.faq-grid-overlay {
    position: absolute;

    z-index: -2;

    inset: 0;

    pointer-events: none;

    opacity: 0.018;

    background-image:
        linear-gradient(
            rgba(56, 189, 248, 0.8) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(56, 189, 248, 0.8) 1px,
            transparent 1px
        );

    background-size: 65px 65px;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 20%,
        black 80%,
        transparent
    );

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent,
        black 20%,
        black 80%,
        transparent
    );
}


/* =========================================================
   ORBIT DECORATIONS
========================================================== */

.faq-orbit {
    position: absolute;

    z-index: -1;

    pointer-events: none;

    border: 1px solid rgba(212, 175, 55, 0.035);

    border-radius: 50%;
}


/* FIRST ORBIT */

.faq-orbit-one {
    width: 620px;
    height: 620px;

    top: -310px;
    right: -280px;

    transform: rotate(25deg);
}


/* SECOND ORBIT */

.faq-orbit-two {
    width: 420px;
    height: 420px;

    left: -250px;
    bottom: -220px;

    border-color: rgba(56, 189, 248, 0.025);

    transform: rotate(-25deg);
}


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

.faq-container {
    position: relative;

    z-index: 5;
}


/* =========================================================
   INTRO
========================================================== */

.faq-intro {
    max-width: 850px;

    margin: 0 auto 65px;

    text-align: center;
}


/* =========================================================
   EYEBROW
========================================================== */

.faq-eyebrow {
    justify-content: center;
}


/* =========================================================
   INTRO HEADING
========================================================== */

.faq-intro h2 {
    margin: 22px 0 20px;

    color: #ffffff;

    font-size: clamp(2.5rem, 5vw, 4.4rem);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -2px;
}


.faq-intro h2 span {
    display: block;

    color: #d4af37;
}


/* =========================================================
   INTRO DESCRIPTION
========================================================== */

.faq-intro p {
    max-width: 720px;

    margin: 0 auto;

    color: #aebdcd;

    font-size: 0.95rem;

    line-height: 1.85;
}


/* =========================================================
   TRUST BAR
========================================================== */

.faq-trust-bar {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 25px;

    margin-bottom: 65px;

    padding: 22px 28px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 18px;

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

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.22);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);
}


/* =========================================================
   TRUST ITEM
========================================================== */

.faq-trust-item {
    display: flex;

    align-items: center;

    gap: 13px;
}


.faq-trust-icon {
    flex-shrink: 0;

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(212, 175, 55, 0.07);

    border: 1px solid rgba(212, 175, 55, 0.15);

    color: #d4af37;

    font-size: 0.9rem;
}


.faq-trust-item strong {
    display: block;

    color: #ffffff;

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.faq-trust-item small {
    display: block;

    margin-top: 5px;

    color: #71869c;

    font-size: 0.62rem;
}


/* =========================================================
   TRUST DIVIDER
========================================================== */

.faq-trust-divider {
    width: 1px;

    height: 38px;

    background: rgba(255, 255, 255, 0.08);
}


/* =========================================================
   FAQ MAIN AREA
========================================================== */

.faq-main-area {
    position: relative;

    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 35px;

    align-items: start;

    margin-bottom: 85px;
}


/* =========================================================
   CATEGORY NAVIGATION
========================================================== */

.faq-category-nav {
    position: sticky;

    top: 110px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 10px;

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 18px;

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

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);
}


/* =========================================================
   CATEGORY BUTTON
========================================================== */

.faq-category {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 14px;

    border: 1px solid transparent;

    border-radius: 11px;

    background: transparent;

    color: #8193a7;

    cursor: pointer;

    font-family: inherit;

    font-size: 0.7rem;

    font-weight: 800;

    text-align: left;

    letter-spacing: 0.7px;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.faq-category i {
    width: 18px;

    color: #62778d;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.faq-category:hover {
    color: #ffffff;

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

    transform: translateX(3px);
}


.faq-category:hover i {
    color: #38bdf8;
}


/* ACTIVE CATEGORY */

.faq-category.active {
    color: #061426;

    background: #d4af37;

    border-color: #d4af37;

    box-shadow:
        0 8px 25px rgba(212, 175, 55, 0.12);
}


.faq-category.active i {
    color: #061426;
}


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

.faq-content {
    min-width: 0;
}


/* =========================================================
   FAQ CATEGORY GROUP
========================================================== */

.faq-category-group {
    display: none;

    animation: faqGroupEnter 0.45s ease both;
}


.faq-category-group.active {
    display: block;
}


@keyframes faqGroupEnter {

    from {
        opacity: 0;

        transform: translateY(12px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


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

.faq-item {
    position: relative;

    overflow: hidden;

    margin-bottom: 12px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 15px;

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

    transition:
        border-color 0.35s ease,
        background 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.faq-item:hover {
    border-color: rgba(56, 189, 248, 0.18);

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

    transform: translateY(-2px);
}


/* ACTIVE ITEM */

.faq-item.active {
    border-color: rgba(212, 175, 55, 0.25);

    background:
        linear-gradient(
            135deg,
            rgba(212, 175, 55, 0.055),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.18);
}


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

.faq-question {
    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns: 42px 1fr 38px;

    align-items: center;

    gap: 15px;

    padding: 21px 22px;

    border: 0;

    background: transparent;

    color: #ffffff;

    cursor: pointer;

    font-family: inherit;

    text-align: left;
}


/* =========================================================
   QUESTION NUMBER
========================================================== */

.faq-question-number {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    border-radius: 9px;

    background: rgba(56, 189, 248, 0.055);

    border: 1px solid rgba(56, 189, 248, 0.12);

    color: #38bdf8;

    font-size: 0.58rem;

    font-weight: 900;

    letter-spacing: 1px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


.faq-item.active .faq-question-number {
    background: rgba(212, 175, 55, 0.1);

    border-color: rgba(212, 175, 55, 0.22);

    color: #f2d675;
}


/* =========================================================
   QUESTION TEXT
========================================================== */

.faq-question-text {
    color: #ffffff;

    font-size: 0.9rem;

    font-weight: 700;

    line-height: 1.5;
}


/* =========================================================
   QUESTION ICON
========================================================== */

.faq-question-icon {
    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

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

    border: 1px solid rgba(255, 255, 255, 0.08);

    color: #8fa3b8;

    font-size: 0.7rem;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
}


.faq-item.active .faq-question-icon {
    transform: rotate(45deg);

    background: rgba(212, 175, 55, 0.1);

    border-color: rgba(212, 175, 55, 0.25);

    color: #f2d675;
}


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

.faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    opacity: 0;

    transition:
        grid-template-rows 0.45s ease,
        opacity 0.35s ease;
}


.faq-answer p {
    min-height: 0;

    overflow: hidden;

    margin: 0;

    padding: 0 75px;

    color: #9eafc1;

    font-size: 0.82rem;

    line-height: 1.85;

    transition:
        padding 0.45s ease;
}


/* =========================================================
   ACTIVE ANSWER
========================================================== */

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;

    opacity: 1;
}


.faq-item.active .faq-answer p {
    padding-bottom: 25px;
}


/* =========================================================
   ANSWER LEFT ACCENT
========================================================== */

.faq-item.active::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 2px;

    background: linear-gradient(
        to bottom,
        #d4af37,
        #38bdf8
    );

    animation: faqAccentReveal 0.5s ease both;
}


@keyframes faqAccentReveal {

    from {
        opacity: 0;

        transform: scaleY(0);
    }

    to {
        opacity: 1;

        transform: scaleY(1);
    }

}


/* =========================================================
   TRUST MESSAGE
========================================================== */

.faq-trust-message {
    display: flex;

    align-items: flex-start;

    gap: 25px;

    max-width: 1000px;

    margin: 0 auto 70px;

    padding: 38px;

    border-left: 3px solid #d4af37;

    background:
        linear-gradient(
            90deg,
            rgba(212, 175, 55, 0.055),
            rgba(56, 189, 248, 0.018),
            transparent
        );
}


/* =========================================================
   TRUST MESSAGE ICON
========================================================== */

.faq-trust-message-icon {
    flex-shrink: 0;

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: rgba(212, 175, 55, 0.07);

    border: 1px solid rgba(212, 175, 55, 0.18);

    color: #f2d675;

    font-size: 1.15rem;
}


/* =========================================================
   TRUST MESSAGE CONTENT
========================================================== */

.faq-trust-message-content > span {
    color: #d4af37;

    font-size: 0.62rem;

    font-weight: 900;

    letter-spacing: 2px;
}


.faq-trust-message-content h3 {
    margin: 9px 0 11px;

    color: #ffffff;

    font-size: 1.7rem;

    line-height: 1.2;
}


.faq-trust-message-content h3 span {
    color: #f2d675;
}


.faq-trust-message-content p {
    max-width: 760px;

    margin: 0;

    color: #a4b4c5;

    font-size: 0.85rem;

    line-height: 1.8;
}


/* =========================================================
   FINAL HELP AREA
========================================================== */

.faq-final-area {
    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding: 45px;

    border: 1px solid rgba(212, 175, 55, 0.17);

    border-radius: 23px;

    background:
        linear-gradient(
            120deg,
            rgba(212, 175, 55, 0.055),
            rgba(29, 111, 165, 0.035)
        );

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


/* =========================================================
   FINAL AREA GLOW
========================================================== */

.faq-final-area::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -120px;
    top: -150px;

    border-radius: 50%;

    background: #d4af37;

    filter: blur(90px);

    opacity: 0.055;

    pointer-events: none;
}


/* =========================================================
   FINAL CONTENT
========================================================== */

.faq-final-content {
    position: relative;

    z-index: 2;
}


.faq-final-label {
    color: #38bdf8;

    font-size: 0.62rem;

    font-weight: 900;

    letter-spacing: 2px;
}


.faq-final-content h3 {
    margin: 9px 0 10px;

    color: #ffffff;

    font-size: clamp(2rem, 4vw, 2.8rem);

    line-height: 1.1;
}


.faq-final-content h3 span {
    color: #d4af37;
}


.faq-final-content p {
    max-width: 600px;

    margin: 0;

    color: #9eafc1;

    font-size: 0.85rem;

    line-height: 1.75;
}


/* =========================================================
   SUPPORT BUTTON
========================================================== */

.faq-support-button {
    position: relative;

    z-index: 3;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    min-height: 52px;

    padding: 0 20px;

    border: 1px solid rgba(212, 175, 55, 0.25);

    border-radius: 11px;

    background: #d4af37;

    color: #061426;

    text-decoration: none;

    font-size: 0.66rem;

    font-weight: 900;

    letter-spacing: 0.9px;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.faq-support-button:hover {
    transform: translateY(-4px);

    background: #f2d675;

    box-shadow:
        0 14px 35px rgba(212, 175, 55, 0.22);
}


.faq-support-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 8px;

    background: rgba(6, 20, 38, 0.1);
}


.faq-support-button > i {
    transition: transform 0.3s ease;
}


.faq-support-button:hover > i {
    transform: translateX(5px);
}


/* =========================================================
   BOTTOM TRUST INDICATORS
========================================================== */

.faq-bottom-indicators {
    display: grid;

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

    gap: 15px;

    margin-top: 35px;
}


.faq-bottom-indicators > div {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 45px;

    padding: 10px;

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

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

    color: #71869c;

    font-size: 0.56rem;

    font-weight: 800;

    text-align: center;

    letter-spacing: 0.9px;

    transition:
        color 0.3s ease,
        border-color 0.3s ease;
}


.faq-bottom-indicators > div:hover {
    color: #ffffff;

    border-color: rgba(212, 175, 55, 0.2);
}


.faq-bottom-indicators i {
    color: #d4af37;

    font-size: 0.7rem;
}


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

.faq-reveal {
    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


.faq-reveal.faq-visible {
    opacity: 1;

    transform: translateY(0);
}


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

.faq-trust-bar.faq-visible {
    transition-delay: 0.08s;
}


.faq-main-area.faq-visible {
    transition-delay: 0.14s;
}


.faq-trust-message.faq-visible {
    transition-delay: 0.1s;
}


.faq-final-area.faq-visible {
    transition-delay: 0.14s;
}


.faq-bottom-indicators.faq-visible {
    transition-delay: 0.18s;
}


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

@media (max-width: 1000px) {

    .faq-main-area {
        grid-template-columns: 180px 1fr;

        gap: 25px;
    }


    .faq-trust-bar {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .faq-trust-divider {
        width: 100%;

        height: 1px;
    }


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

}


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

@media (max-width: 700px) {

    .faq-section {
        padding: 85px 0;
    }


    /* Background */

    .faq-bg-glow-gold {
        width: 320px;
        height: 320px;

        top: -160px;
        left: -150px;

        opacity: 0.055;
    }


    .faq-bg-glow-blue {
        width: 350px;
        height: 350px;

        right: -190px;
        bottom: -170px;

        opacity: 0.045;
    }


    /* Intro */

    .faq-intro {
        margin-bottom: 45px;
    }


    .faq-intro h2 {
        font-size: 2.45rem;

        letter-spacing: -1px;
    }


    .faq-intro p {
        font-size: 0.83rem;

        line-height: 1.75;
    }


    /* Trust bar */

    .faq-trust-bar {
        margin-bottom: 45px;

        padding: 20px;
    }


    .faq-trust-item {
        align-items: flex-start;
    }


    /* Main FAQ */

    .faq-main-area {
        display: block;

        margin-bottom: 65px;
    }


    /* Category navigation */

    .faq-category-nav {
        position: relative;

        top: auto;

        display: grid;

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

        margin-bottom: 22px;

        padding: 8px;
    }


    .faq-category {
        justify-content: center;

        padding: 12px 8px;

        font-size: 0.62rem;

        text-align: center;
    }


    .faq-category i {
        width: auto;
    }


    /* Last category */

    .faq-category:last-child {
        grid-column: 1 / -1;
    }


    /* FAQ question */

    .faq-question {
        grid-template-columns: 34px 1fr 32px;

        gap: 10px;

        padding: 17px 15px;
    }


    .faq-question-number {
        width: 30px;
        height: 30px;

        font-size: 0.52rem;
    }


    .faq-question-text {
        font-size: 0.76rem;
    }


    .faq-question-icon {
        width: 30px;
        height: 30px;

        font-size: 0.62rem;
    }


    /* Answer */

    .faq-answer p {
        padding: 0 15px;

        font-size: 0.75rem;

        line-height: 1.75;
    }


    .faq-item.active .faq-answer p {
        padding-bottom: 20px;
    }


    /* Trust message */

    .faq-trust-message {
        flex-direction: column;

        gap: 18px;

        padding: 28px 22px;

        margin-bottom: 55px;
    }


    .faq-trust-message-content h3 {
        font-size: 1.45rem;
    }


    .faq-trust-message-content p {
        font-size: 0.78rem;
    }


    /* Final CTA */

    .faq-final-area {
        flex-direction: column;

        align-items: flex-start;

        padding: 30px 23px;

        gap: 25px;
    }


    .faq-final-content h3 {
        font-size: 2rem;
    }


    .faq-support-button {
        width: 100%;

        justify-content: center;
    }


    /* Bottom indicators */

    .faq-bottom-indicators {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .faq-bottom-indicators > div {
        justify-content: flex-start;

        padding: 13px 5px;

        text-align: left;
    }


    /* Orbits */

    .faq-orbit-one {
        width: 350px;
        height: 350px;

        top: -180px;
        right: -200px;
    }


    .faq-orbit-two {
        width: 280px;
        height: 280px;

        left: -180px;
        bottom: -150px;
    }

}


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

@media (max-width: 400px) {

    .faq-intro h2 {
        font-size: 2.15rem;
    }


    .faq-category-nav {
        grid-template-columns: 1fr;
    }


    .faq-category:last-child {
        grid-column: auto;
    }


    .faq-question {
        grid-template-columns: 30px 1fr 30px;

        padding: 15px 12px;
    }


    .faq-question-number,
    .faq-question-icon {
        width: 28px;
        height: 28px;
    }


    .faq-question-text {
        font-size: 0.72rem;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .faq-category-group,
    .faq-item.active::before,
    .faq-reveal,
    .faq-category,
    .faq-item,
    .faq-question-icon,
    .faq-support-button {
        animation: none !important;

        transition: none !important;
    }


    .faq-reveal {
        opacity: 1;

        transform: none;
    }

}


/* =========================================================
   IMPORTANT SAFETY OVERRIDES
   Prevent accidental blue backgrounds from other styles
========================================================== */

.faq-section,
.faq-section::before,
.faq-section::after {
    background-color: transparent;
}


.faq-section {
    background: #050d18 !important;
}


.faq-section > .faq-bg-glow,
.faq-section > .faq-grid-overlay,
.faq-section > .faq-orbit {
    pointer-events: none;
}


/* Keep FAQ content above every decorative layer */

.faq-section .faq-container {
    position: relative;

    z-index: 10;
}


/* =========================================================
   END — SECTION 10 CSS
========================================================== */














/* =========================================================
   SECTION 10 — EMERGENCY VISIBILITY / BACKGROUND FIX
========================================================= */

section.faq-section {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(212, 175, 55, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(29, 111, 165, 0.12),
            transparent 38%
        ),
        #061426 !important;

    color: #ffffff !important;
}

/* Make FAQ content visible even if reveal JS isn't running */
section.faq-section .faq-reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Prevent the decorative overlay from becoming a solid layer */
section.faq-section .faq-grid-overlay {
    z-index: 0 !important;
    background-color: transparent !important;
    opacity: 0.025 !important;
    pointer-events: none !important;
}

/* Keep all actual FAQ content above decoration */
section.faq-section .faq-container {
    position: relative !important;
    z-index: 5 !important;
}

section.faq-section .faq-intro,
section.faq-section .faq-trust-bar,
section.faq-section .faq-main-area,
section.faq-section .faq-trust-message,
section.faq-section .faq-final-area,
section.faq-section .faq-bottom-indicators {
    position: relative;
    z-index: 5;
}














/* =========================================================
   GLOBALTRUST LOGISTICS
   SECTION 11 — REGISTER PARCEL
   PREMIUM SHIPMENT REGISTRATION
========================================================== */

/* =========================================================
   GLOBALTRUST LOGISTICS
   SECTION 11 — REGISTER PARCEL
   PREMIUM DARK / GOLD DESIGN
========================================================= */


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

:root {

    --register-bg: #07111f;
    --register-bg-deep: #040a13;
    --register-bg-soft: #0b1829;

    --register-card: rgba(13, 29, 48, 0.88);
    --register-card-light: rgba(19, 39, 62, 0.82);

    --register-border: rgba(255, 255, 255, 0.10);
    --register-border-gold: rgba(212, 175, 55, 0.40);

    --register-gold: #d4af37;
    --register-gold-light: #f5d878;
    --register-gold-dark: #9c7922;

    --register-blue: #2478d4;
    --register-blue-light: #55a8ff;

    --register-white: #ffffff;
    --register-text: #e9eef5;
    --register-muted: #9caabd;
    --register-placeholder: #6f8095;

    --register-danger: #ff6262;
    --register-success: #48d597;

    --register-radius: 24px;
    --register-radius-small: 14px;

    --register-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35);

    --register-transition:
        all 0.35s cubic-bezier(.22, 1, .36, 1);

}


/* =========================================================
   MAIN SECTION
========================================================= */

.register-parcel-section {

    position: relative;

    width: 100%;

    padding: 120px 0 110px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(36, 120, 212, 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 12%,
            rgba(212, 175, 55, 0.12),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #040a13 0%,
            #07111f 45%,
            #09192b 100%
        );

    color: var(--register-white);

    isolation: isolate;

}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.register-bg-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;

    z-index: -2;

}


.register-bg-glow-gold {

    width: 450px;
    height: 450px;

    top: 5%;
    left: -180px;

    background: rgba(212, 175, 55, 0.10);

    animation: registerGlowMove 12s ease-in-out infinite alternate;

}


.register-bg-glow-blue {

    width: 500px;
    height: 500px;

    right: -220px;
    bottom: 8%;

    background: rgba(36, 120, 212, 0.13);

    animation: registerGlowMove 15s ease-in-out infinite alternate-reverse;

}


@keyframes registerGlowMove {

    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(40px, -30px) scale(1.08);
    }

    100% {
        transform: translate(-20px, 40px) scale(.94);
    }

}


/* =========================================================
   GRID OVERLAY
========================================================= */

.register-grid-overlay {

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    opacity: .35;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 85%,
            transparent
        );

}


/* =========================================================
   PARTICLES
========================================================= */

.register-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: -1;

}


.register-particle {

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--register-gold);

    opacity: .45;

    box-shadow:
        0 0 12px rgba(212,175,55,.8);

    animation:
        registerParticleFloat 8s ease-in-out infinite;

}


.particle-one {
    top: 13%;
    left: 8%;
}

.particle-two {
    top: 32%;
    left: 4%;
    animation-delay: 1s;
}

.particle-three {
    top: 72%;
    left: 12%;
    animation-delay: 2s;
}

.particle-four {
    top: 85%;
    left: 35%;
    animation-delay: 3s;
}

.particle-five {
    top: 17%;
    right: 10%;
    animation-delay: 1.5s;
}

.particle-six {
    top: 48%;
    right: 6%;
    animation-delay: 2.5s;
}

.particle-seven {
    top: 77%;
    right: 13%;
    animation-delay: 4s;
}

.particle-eight {
    top: 92%;
    right: 38%;
    animation-delay: 5s;
}


@keyframes registerParticleFloat {

    0%,
    100% {
        transform: translateY(0);
        opacity: .25;
    }

    50% {
        transform: translateY(-35px);
        opacity: .75;
    }

}


/* =========================================================
   FLIGHT ROUTES
========================================================= */

.register-flight-route {

    position: absolute;

    width: 300px;
    height: 150px;

    border-top: 1px dashed rgba(212,175,55,.20);

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;

}


.register-flight-route-one {

    top: 15%;
    right: -60px;

    transform: rotate(-18deg);

}


.register-flight-route-two {

    bottom: 15%;
    left: -80px;

    transform: rotate(18deg);

}


.register-flight-route span {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--register-gold);

    box-shadow:
        0 0 15px var(--register-gold);

    animation: registerRouteDot 4s linear infinite;

}


@keyframes registerRouteDot {

    0% {
        left: 0;
        top: 0;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        left: 100%;
        top: 100%;
        opacity: 0;
    }

}


/* =========================================================
   AIRCRAFT
========================================================= */

.register-aircraft {

    position: absolute;

    color: rgba(212,175,55,.28);

    font-size: 18px;

    pointer-events: none;

    z-index: -1;

}


.register-aircraft-one {

    top: 19%;
    right: 12%;

    animation:
        registerAircraftOne 12s linear infinite;

}


.register-aircraft-two {

    bottom: 16%;
    left: 10%;

    animation:
        registerAircraftTwo 15s linear infinite;

}


@keyframes registerAircraftOne {

    0% {
        transform: translate(0, 0) rotate(-12deg);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        transform: translate(-250px, 100px) rotate(-12deg);
        opacity: 0;
    }

}


@keyframes registerAircraftTwo {

    0% {
        transform: translate(0, 0) rotate(12deg);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        transform: translate(250px, -100px) rotate(12deg);
        opacity: 0;
    }

}


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

.register-parcel-container {

    position: relative;

    width: min(1380px, 92%);

    margin: 0 auto;

}


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

.register-reveal {

    opacity: 0;

    transform: translateY(35px);

    animation:
        registerReveal .9s cubic-bezier(.22,1,.36,1)
        forwards;

}


.register-parcel-intro {
    animation-delay: .1s;
}

.register-trust-indicators {
    animation-delay: .2s;
}

.register-form-card {
    animation-delay: .3s;
}

.register-side-panel {
    animation-delay: .4s;
}

.register-contact-section {
    animation-delay: .5s;
}

.register-bottom-trust {
    animation-delay: .6s;
}

.register-final-cta {
    animation-delay: .7s;
}


@keyframes registerReveal {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================================
   COMPANY BRAND
========================================================= */

.register-company-brand {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 30px;

}


.register-logo-wrapper {

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid var(--register-border-gold);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,.14),
            rgba(212,175,55,.03)
        );

    box-shadow:
        0 0 30px rgba(212,175,55,.08);

}


.register-company-logo {

    width: 42px;

    height: 42px;

    object-fit: contain;

}


.register-company-name {

    display: flex;

    flex-direction: column;

    gap: 2px;

    line-height: 1;

}


.register-company-name strong {

    font-size: 17px;

    letter-spacing: 2px;

}


.register-company-name span {

    color: var(--register-gold-light);

    font-size: 10px;

    letter-spacing: 4px;

    font-weight: 700;

}


/* =========================================================
   INTRO
========================================================= */

.register-parcel-intro {

    max-width: 850px;

    margin-bottom: 55px;

}


.register-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: var(--register-gold-light);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

}


.section-eyebrow-line {

    width: 34px;

    height: 1px;

    background: var(--register-gold);

}


.section-eyebrow-icon {

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid var(--register-border-gold);

    border-radius: 50%;

    background: rgba(212,175,55,.08);

}


.register-parcel-intro h2 {

    margin: 0 0 20px;

    font-size: clamp(42px, 5vw, 72px);

    line-height: 1.04;

    letter-spacing: -2px;

    font-weight: 900;

}


.register-parcel-intro h2 span {

    display: block;

    color: var(--register-gold-light);

    text-shadow:
        0 0 35px rgba(212,175,55,.16);

}


.register-parcel-intro p {

    max-width: 760px;

    margin: 0;

    color: var(--register-muted);

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   TRUST INDICATORS
========================================================= */

.register-trust-indicators {

    display: grid;

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

    align-items: center;

    gap: 25px;

    padding: 24px 30px;

    margin-bottom: 45px;

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

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );

    backdrop-filter: blur(18px);

}


.register-trust-indicator {

    display: flex;

    align-items: center;

    gap: 13px;

}


.register-trust-indicator-icon {

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: var(--register-gold-light);

    background:
        rgba(212,175,55,.08);

    border: 1px solid var(--register-border-gold);

}


.register-trust-indicator strong {

    display: block;

    margin-bottom: 4px;

    color: var(--register-white);

    font-size: 10px;

    letter-spacing: 1px;

}


.register-trust-indicator span {

    display: block;

    color: var(--register-muted);

    font-size: 11px;

    line-height: 1.4;

}


.register-trust-divider {

    width: 1px;

    height: 45px;

    background: var(--register-border);

}


/* =========================================================
   WORKSPACE
========================================================= */

.register-workspace {

    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(320px, .75fr);

    gap: 28px;

    align-items: start;

}


/* =========================================================
   FORM CARD
========================================================= */

.register-form-card {

    position: relative;

    min-width: 0;

    padding: 38px;

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

    border-radius: var(--register-radius);

    background:
        linear-gradient(
            145deg,
            rgba(17,36,58,.94),
            rgba(7,18,31,.96)
        );

    box-shadow: var(--register-shadow);

    backdrop-filter: blur(25px);

    overflow: hidden;

}


.register-form-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--register-gold),
            transparent
        );

    opacity: .7;

}


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

.register-form-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;

    padding-bottom: 30px;

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

}


.register-form-label {

    display: inline-block;

    margin-bottom: 10px;

    color: var(--register-gold-light);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.register-form-header h3 {

    margin: 0 0 12px;

    font-size: clamp(25px, 3vw, 36px);

    line-height: 1.15;

}


.register-form-header h3 span {

    color: var(--register-gold-light);

}


.register-form-header p {

    max-width: 650px;

    margin: 0;

    color: var(--register-muted);

    line-height: 1.7;

    font-size: 14px;

}


.register-secure-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

    padding: 10px 13px;

    border-radius: 100px;

    color: var(--register-success);

    background: rgba(72,213,151,.06);

    border: 1px solid rgba(72,213,151,.18);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

}


/* =========================================================
   PROGRESS
========================================================= */

.register-progress-wrapper {

    position: relative;

    padding: 34px 5px 25px;

}


.register-progress-line {

    position: absolute;

    top: 51px;

    left: 8%;

    right: 8%;

    height: 2px;

    background: rgba(255,255,255,.08);

}


.register-progress-fill {

    display: block;

    width: 0%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--register-gold-dark),
            var(--register-gold-light)
        );

    box-shadow:
        0 0 12px rgba(212,175,55,.4);

    transition:
        width .5s cubic-bezier(.22,1,.36,1);

}


.register-progress-steps {

    position: relative;

    display: grid;

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

}


.register-progress-step {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

    color: var(--register-muted);

}


.register-step-number {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.14);

    border-radius: 50%;

    background: #0c1c2e;

    font-size: 10px;

    font-weight: 800;

    transition: var(--register-transition);

}


.register-step-label {

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    transition: var(--register-transition);

}


.register-progress-step.active .register-step-number {

    color: #07111f;

    background:
        linear-gradient(
            145deg,
            var(--register-gold-light),
            var(--register-gold)
        );

    border-color: var(--register-gold-light);

    box-shadow:
        0 0 0 5px rgba(212,175,55,.08),
        0 0 25px rgba(212,175,55,.30);

}


.register-progress-step.active .register-step-label {

    color: var(--register-gold-light);

}


.register-progress-step.completed .register-step-number {

    color: #07111f;

    background: var(--register-success);

    border-color: var(--register-success);

}


/* =========================================================
   FORM STEPS
========================================================= */

.register-form-step {

    display: none;

    animation:
        registerStepIn .45s cubic-bezier(.22,1,.36,1);

}


.register-form-step.active {

    display: block;

}


@keyframes registerStepIn {

    from {

        opacity: 0;

        transform: translateX(15px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}


/* =========================================================
   STEP HEADING
========================================================= */

.register-step-heading {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    margin: 10px 0 30px;

}


.register-step-heading-icon {

    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--register-gold-light);

    border: 1px solid var(--register-border-gold);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,.15),
            rgba(212,175,55,.03)
        );

    box-shadow:
        0 10px 25px rgba(0,0,0,.15);

}


.register-step-heading span {

    display: block;

    margin-bottom: 5px;

    color: var(--register-gold-light);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

}


.register-step-heading h4 {

    margin: 0 0 5px;

    font-size: 25px;

    font-weight: 850;

}


.register-step-heading p {

    margin: 0;

    color: var(--register-muted);

    font-size: 13px;

    line-height: 1.6;

}


/* =========================================================
   FORM GRID
========================================================= */

.register-form-grid {

    display: grid;

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

    gap: 22px;

}


/* =========================================================
   FORM FIELD
========================================================= */

.register-field {

    min-width: 0;

}


.register-field-full {

    grid-column: 1 / -1;

}


.register-field label {

    display: block;

    margin-bottom: 9px;

    color: var(--register-text);

    font-size: 12px;

    font-weight: 750;

}


.register-field label span {

    color: var(--register-gold-light);

}


.register-input-wrapper {

    position: relative;

}


.register-input-wrapper > i {

    position: absolute;

    top: 50%;
    left: 17px;

    transform: translateY(-50%);

    color: #8192a8;

    font-size: 14px;

    pointer-events: none;

    z-index: 2;

    transition: var(--register-transition);

}


.register-input-wrapper textarea + i {

    top: 20px;

    transform: none;

}


.register-input-wrapper input,
.register-input-wrapper select,
.register-input-wrapper textarea {

    width: 100%;

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 14px;

    outline: none;

    background:
        linear-gradient(
            145deg,
            rgba(5,14,25,.86),
            rgba(11,27,44,.78)
        );

    color: var(--register-white);

    font-family: inherit;

    font-size: 14px;

    transition: var(--register-transition);

    box-sizing: border-box;

}


.register-input-wrapper input,
.register-input-wrapper select {

    height: 56px;

    padding: 0 17px 0 48px;

}


.register-input-wrapper textarea {

    min-height: 135px;

    padding: 17px 17px 17px 48px;

    resize: vertical;

    line-height: 1.6;

}


.register-input-wrapper select {

    appearance: none;

    cursor: pointer;

}


.register-input-wrapper select option {

    background: #0b1829;

    color: #fff;

}


.register-input-wrapper input::placeholder,
.register-input-wrapper textarea::placeholder {

    color: var(--register-placeholder);

}


.register-input-wrapper input:hover,
.register-input-wrapper select:hover,
.register-input-wrapper textarea:hover {

    border-color: rgba(212,175,55,.28);

}


.register-input-wrapper input:focus,
.register-input-wrapper select:focus,
.register-input-wrapper textarea:focus {

    border-color: var(--register-gold);

    background:
        linear-gradient(
            145deg,
            rgba(10,24,40,.98),
            rgba(12,31,51,.95)
        );

    box-shadow:
        0 0 0 4px rgba(212,175,55,.07),
        0 12px 35px rgba(0,0,0,.18);

}


.register-input-wrapper:focus-within > i {

    color: var(--register-gold-light);

}


/* =========================================================
   VALIDATION STATES
========================================================= */

.register-field.error input,
.register-field.error select,
.register-field.error textarea {

    border-color: var(--register-danger);

    box-shadow:
        0 0 0 3px rgba(255,98,98,.07);

}


.register-field.success input,
.register-field.success select,
.register-field.success textarea {

    border-color: var(--register-success);

}


.register-field.error label {

    color: #ff8585;

}


.register-field-help {

    display: block;

    margin-top: 8px;

    color: var(--register-muted);

    font-size: 11px;

    line-height: 1.6;

}


/* =========================================================
   MESSAGE CARD
========================================================= */

.register-message-card {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 25px;

    padding: 20px;

    border: 1px solid rgba(212,175,55,.16);

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.07),
            rgba(212,175,55,.015)
        );

}


.register-message-icon {

    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: var(--register-gold-light);

    background: rgba(212,175,55,.09);

}


.register-message-card strong {

    display: block;

    margin-bottom: 6px;

    font-size: 14px;

}


.register-message-card p {

    margin: 0;

    color: var(--register-muted);

    font-size: 12px;

    line-height: 1.7;

}


/* =========================================================
   FORM NAVIGATION
========================================================= */

.register-form-navigation {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 32px;

    padding-top: 25px;

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

}


.register-form-note {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--register-muted);

    font-size: 11px;

}


.register-form-note i {

    color: var(--register-gold-light);

}


/* =========================================================
   BACK BUTTON
========================================================= */

.register-back-button {

    min-height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 0 18px;

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 12px;

    background: rgba(255,255,255,.03);

    color: var(--register-muted);

    font-family: inherit;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    cursor: pointer;

    transition: var(--register-transition);

}


.register-back-button:hover {

    color: var(--register-white);

    border-color: rgba(255,255,255,.25);

    background: rgba(255,255,255,.06);

    transform: translateX(-3px);

}


/* =========================================================
   NEXT BUTTON
========================================================= */

.register-next-button {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 0 23px;

    border: 1px solid var(--register-gold);

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--register-gold-light),
            var(--register-gold)
        );

    color: #07111f;

    font-family: inherit;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.2px;

    cursor: pointer;

    box-shadow:
        0 10px 30px rgba(212,175,55,.15);

    transition: var(--register-transition);

}


.register-next-button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 16px 35px rgba(212,175,55,.25);

}


.register-next-button i {

    transition: transform .3s ease;

}


.register-next-button:hover i {

    transform: translateX(4px);

}


/* =========================================================
   REVIEW GRID
========================================================= */

.register-review-grid {

    display: grid;

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

    gap: 17px;

}


.register-review-card {

    min-width: 0;

    padding: 20px;

    border: 1px solid rgba(255,255,255,.09);

    border-radius: 16px;

    background:
        rgba(255,255,255,.025);

    transition: var(--register-transition);

}


.register-review-card:hover {

    border-color: rgba(212,175,55,.25);

    transform: translateY(-2px);

}


.register-review-card-full {

    grid-column: 1 / -1;

}


.register-review-card-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 13px;

    margin-bottom: 14px;

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

}


.register-review-card-header span {

    color: var(--register-gold-light);

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1.8px;

}


.register-review-card-header i {

    color: var(--register-muted);

}


.register-review-content {

    display: flex;

    flex-direction: column;

    gap: 6px;

}


.register-review-content strong {

    color: var(--register-white);

    font-size: 14px;

}


.register-review-content span {

    color: var(--register-text);

    font-size: 12px;

}


.register-review-content small {

    color: var(--register-muted);

    font-size: 11px;

    line-height: 1.5;

}


.register-review-content p {

    margin: 0;

    color: var(--register-muted);

    font-size: 12px;

    line-height: 1.7;

    white-space: pre-wrap;

    overflow-wrap: anywhere;

}


/* =========================================================
   CONFIRMATION
========================================================= */

.register-confirmation {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-top: 25px;

    padding: 17px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 14px;

    background: rgba(255,255,255,.025);

    cursor: pointer;

}


.register-confirmation input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


.register-custom-checkbox {

    width: 21px;
    height: 21px;

    flex: 0 0 21px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.20);

    border-radius: 6px;

    background: #091522;

    transition: var(--register-transition);

}


.register-custom-checkbox i {

    color: #07111f;

    font-size: 11px;

    transform: scale(0);

    transition: transform .2s ease;

}


.register-confirmation input:checked + .register-custom-checkbox {

    background: var(--register-gold);

    border-color: var(--register-gold);

}


.register-confirmation input:checked + .register-custom-checkbox i {

    transform: scale(1);

}


.register-confirmation-text {

    color: var(--register-muted);

    font-size: 11px;

    line-height: 1.7;

}


/* =========================================================
   SUBMIT ASSURANCE
========================================================= */

.register-submit-assurance {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 24px;

    padding: 20px;

    border-radius: 16px;

    border: 1px solid rgba(72,213,151,.13);

    background:
        linear-gradient(
            135deg,
            rgba(72,213,151,.055),
            rgba(255,255,255,.015)
        );

}


.register-submit-assurance-icon {

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: var(--register-success);

    background: rgba(72,213,151,.08);

}


.register-submit-assurance strong {

    display: block;

    margin-bottom: 4px;

    font-size: 11px;

    letter-spacing: 1px;

}


.register-submit-assurance p {

    margin: 0;

    color: var(--register-muted);

    font-size: 11px;

    line-height: 1.6;

}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.register-submit-button {

    min-height: 57px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    padding: 0 28px;

    border: 1px solid var(--register-gold-light);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #f5d878,
            #d4af37
        );

    color: #07111f;

    font-family: inherit;

    font-size: 10px;

    font-weight: 950;

    letter-spacing: 1.2px;

    cursor: pointer;

    box-shadow:
        0 14px 35px rgba(212,175,55,.18);

    transition: var(--register-transition);

}


.register-submit-button:hover {

    transform: translateY(-3px) scale(1.01);

    box-shadow:
        0 18px 45px rgba(212,175,55,.28);

}


.register-submit-button i {

    transition: transform .3s ease;

}


.register-submit-button:hover i {

    transform:
        translate(4px, -3px)
        rotate(5deg);

}


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

.register-form-footer {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 20px;

    color: var(--register-muted);

    font-size: 10px;

    line-height: 1.6;

}


.register-form-footer i {

    color: var(--register-success);

}


/* =========================================================
   RIGHT SIDE PANEL
========================================================= */

.register-side-panel {

    display: flex;

    flex-direction: column;

    gap: 20px;

    min-width: 0;

}


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

.register-journey-card {

    position: relative;

    padding: 28px;

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

    border-radius: var(--register-radius);

    background:
        linear-gradient(
            145deg,
            rgba(16,34,55,.94),
            rgba(7,17,29,.96)
        );

    box-shadow:
        0 25px 60px rgba(0,0,0,.25);

    overflow: hidden;

}


.register-journey-card::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -80px;
    right: -80px;

    border-radius: 50%;

    background: rgba(212,175,55,.07);

    filter: blur(30px);

}


.register-journey-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 20px;

}


.register-journey-header span {

    color: var(--register-gold-light);

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1.8px;

}


.register-journey-header i {

    color: var(--register-gold-light);

    font-size: 18px;

}


.register-journey-card h3 {

    margin: 0 0 12px;

    font-size: 27px;

    line-height: 1.15;

}


.register-journey-card h3 span {

    display: block;

    color: var(--register-gold-light);

}


.register-journey-card > p {

    margin: 0 0 28px;

    color: var(--register-muted);

    font-size: 12px;

    line-height: 1.7;

}


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

.register-journey-timeline {

    position: relative;

}


.register-journey-point {

    position: relative;

    display: grid;

    grid-template-columns: 46px 1fr;

    gap: 13px;

    align-items: center;

}


.register-journey-icon {

    position: relative;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 13px;

    color: #94a5b8;

    background: #0a192a;

    z-index: 2;

    transition: var(--register-transition);

}


.register-journey-point.active .register-journey-icon {

    color: #07111f;

    background:
        linear-gradient(
            145deg,
            var(--register-gold-light),
            var(--register-gold)
        );

    border-color: var(--register-gold-light);

    box-shadow:
        0 0 25px rgba(212,175,55,.18);

}


.register-journey-point > div:last-child {

    min-width: 0;

}


.register-journey-point span {

    display: block;

    margin-bottom: 4px;

    color: var(--register-gold-light);

    font-size: 8px;

    font-weight: 850;

    letter-spacing: 1.5px;

}


.register-journey-point strong {

    display: block;

    margin-bottom: 3px;

    color: var(--register-white);

    font-size: 12px;

}


.register-journey-point small {

    display: block;

    color: var(--register-muted);

    font-size: 10px;

    line-height: 1.5;

}


.register-journey-connector {

    position: relative;

    width: 42px;

    height: 32px;

    display: flex;

    justify-content: center;

}


.register-journey-connector::before {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            rgba(212,175,55,.35),
            rgba(255,255,255,.08)
        );

}


.register-journey-connector span {

    position: absolute;

    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--register-gold);

    box-shadow:
        0 0 10px rgba(212,175,55,.7);

}


/* =========================================================
   ASSURANCE CARD
========================================================= */

.register-assurance-card {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 23px;

    border: 1px solid rgba(212,175,55,.16);

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.065),
            rgba(255,255,255,.015)
        );

}


.register-assurance-icon {

    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--register-gold-light);

    border-radius: 13px;

    background: rgba(212,175,55,.09);

}


.register-assurance-card > div:last-child {

    min-width: 0;

}


.register-assurance-card span {

    display: block;

    margin-bottom: 6px;

    color: var(--register-gold-light);

    font-size: 8px;

    font-weight: 850;

    letter-spacing: 1.5px;

}


.register-assurance-card h4 {

    margin: 0 0 9px;

    font-size: 15px;

    line-height: 1.4;

}


.register-assurance-card h4 strong {

    color: var(--register-gold-light);

}


.register-assurance-card p {

    margin: 0;

    color: var(--register-muted);

    font-size: 10px;

    line-height: 1.7;

}


/* =========================================================
   SUPPORT CARD
========================================================= */

.register-support-card {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 21px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 18px;

    background:
        rgba(255,255,255,.025);

    transition: var(--register-transition);

}


.register-support-card:hover {

    transform: translateY(-3px);

    border-color: rgba(212,175,55,.20);

}


.register-support-icon {

    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--register-blue-light);

    border-radius: 13px;

    background: rgba(36,120,212,.09);

}


.register-support-card span {

    display: block;

    margin-bottom: 4px;

    color: var(--register-gold-light);

    font-size: 8px;

    font-weight: 850;

    letter-spacing: 1.5px;

}


.register-support-card strong {

    display: block;

    margin-bottom: 4px;

    font-size: 14px;

}


.register-support-card small {

    display: block;

    color: var(--register-muted);

    font-size: 10px;

    line-height: 1.5;

}


/* =========================================================
   CONTACT CUSTOMER CARE
========================================================= */

.register-contact-section {

    position: relative;

    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 25px;

    margin-top: 70px;

    padding: 32px;

    border: 1px solid rgba(212,175,55,.20);

    border-radius: 23px;

    background:
        linear-gradient(
            110deg,
            rgba(212,175,55,.09),
            rgba(255,255,255,.025),
            rgba(36,120,212,.05)
        );

    overflow: hidden;

}


.register-contact-section::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.035),
            transparent
        );

    transform: translateX(-100%);

    animation:
        registerShimmer 7s ease-in-out infinite;

}


@keyframes registerShimmer {

    0%,
    65% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }

}


.register-contact-icon {

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 18px;

    color: var(--register-gold-light);

    border: 1px solid var(--register-border-gold);

    background: rgba(212,175,55,.08);

    font-size: 22px;

}


.register-contact-content span {

    display: block;

    margin-bottom: 6px;

    color: var(--register-gold-light);

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1.7px;

}


.register-contact-content h3 {

    margin: 0 0 7px;

    font-size: 24px;

}


.register-contact-content h3 span {

    display: inline;

    font-size: inherit;

}


.register-contact-content p {

    margin: 0;

    color: var(--register-muted);

    font-size: 12px;

    line-height: 1.6;

}


.register-contact-button {

    position: relative;

    z-index: 2;

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 0 22px;

    border: 1px solid rgba(212,175,55,.55);

    border-radius: 13px;

    color: var(--register-gold-light);

    background: rgba(212,175,55,.08);

    text-decoration: none;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1px;

    white-space: nowrap;

    transition: var(--register-transition);

}


.register-contact-button:hover {

    color: #07111f;

    background:
        linear-gradient(
            135deg,
            var(--register-gold-light),
            var(--register-gold)
        );

    border-color: var(--register-gold-light);

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(212,175,55,.20);

}


.register-contact-button i {

    transition: transform .3s ease;

}


.register-contact-button:hover i {

    transform: translateX(4px);

}


/* =========================================================
   BOTTOM TRUST
========================================================= */

.register-bottom-trust {

    display: grid;

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

    margin-top: 28px;

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

    border-radius: 18px;

    overflow: hidden;

    background: rgba(255,255,255,.02);

}


.register-bottom-trust > div {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 65px;

    padding: 12px;

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

}


.register-bottom-trust > div:last-child {

    border-right: none;

}


.register-bottom-trust i {

    color: var(--register-gold-light);

    font-size: 13px;

}


.register-bottom-trust span {

    color: var(--register-muted);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .8px;

}


/* =========================================================
   FINAL CTA
========================================================= */

.register-final-cta {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 45px;

    padding: 40px 45px;

    border: 1px solid rgba(212,175,55,.25);

    border-radius: 25px;

    background:
        linear-gradient(
            120deg,
            #0b1b2e,
            #0c2036
        );

    overflow: hidden;

}


.register-final-cta::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(212,175,55,.12),
            transparent 35%
        );

    pointer-events: none;

}


.register-final-cta-glow {

    position: absolute;

    width: 220px;
    height: 220px;

    top: -100px;
    right: 15%;

    border-radius: 50%;

    background: rgba(212,175,55,.08);

    filter: blur(40px);

    animation:
        registerCtaGlow 6s ease-in-out infinite alternate;

}


@keyframes registerCtaGlow {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(70px);
    }

}


.register-final-content {

    position: relative;

    z-index: 1;

}


.register-final-content > span {

    display: block;

    margin-bottom: 8px;

    color: var(--register-gold-light);

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 2px;

}


.register-final-content h3 {

    margin: 0 0 8px;

    font-size: clamp(25px, 3vw, 36px);

}


.register-final-content h3 span {

    color: var(--register-gold-light);

}


.register-final-content p {

    max-width: 600px;

    margin: 0;

    color: var(--register-muted);

    font-size: 12px;

    line-height: 1.7;

}


.register-final-button {

    position: relative;

    z-index: 2;

    min-height: 55px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    padding: 0 25px;

    flex-shrink: 0;

    border: 1px solid var(--register-gold-light);

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--register-gold-light),
            var(--register-gold)
        );

    color: #07111f;

    font-family: inherit;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;

    cursor: pointer;

    transition: var(--register-transition);

}


.register-final-button:hover {

    transform: translateY(-4px);

    box-shadow:
        0 18px 40px rgba(212,175,55,.22);

}


.register-final-button i {

    transition: transform .3s ease;

}


.register-final-button:hover i {

    transform: translateY(-4px);

}


/* =========================================================
   RESPONSIVE — LARGE TABLETS
========================================================= */

@media (max-width: 1150px) {

    .register-workspace {

        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(290px, .8fr);

    }


    .register-trust-indicators {

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

        row-gap: 20px;

    }


    .register-trust-divider:nth-of-type(2),
    .register-trust-divider:nth-of-type(3) {

        display: none;

    }

}


/* =========================================================
   RESPONSIVE — TABLETS
========================================================= */

@media (max-width: 900px) {

    .register-parcel-section {

        padding: 90px 0;

    }


    .register-workspace {

        grid-template-columns: 1fr;

    }


    .register-side-panel {

        display: grid;

        grid-template-columns: 1fr 1fr;

    }


    .register-journey-card {

        grid-column: 1 / -1;

    }


    .register-assurance-card,
    .register-support-card {

        height: 100%;

    }


    .register-contact-section {

        grid-template-columns: auto 1fr;

    }


    .register-contact-button {

        grid-column: 1 / -1;

        justify-self: start;

    }


    .register-bottom-trust {

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

    }


    .register-bottom-trust > div:nth-child(2) {

        border-right: none;

    }


    .register-bottom-trust > div:nth-child(-n+2) {

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

    }


    .register-bottom-trust > div:nth-child(3) {

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

    }


    .register-final-cta {

        flex-direction: column;

        align-items: flex-start;

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 650px) {

    .register-parcel-section {

        padding: 70px 0 70px;

    }


    .register-parcel-container {

        width: calc(100% - 28px);

    }


    .register-company-brand {

        margin-bottom: 24px;

    }


    .register-logo-wrapper {

        width: 50px;
        height: 50px;

    }


    .register-company-logo {

        width: 35px;
        height: 35px;

    }


    .register-parcel-intro {

        margin-bottom: 35px;

    }


    .register-parcel-intro h2 {

        font-size: 40px;

        letter-spacing: -1.5px;

    }


    .register-parcel-intro p {

        font-size: 13px;

        line-height: 1.7;

    }


    .register-eyebrow {

        font-size: 9px;

        letter-spacing: 1.2px;

    }


    /* Trust */

    .register-trust-indicators {

        grid-template-columns: 1fr;

        gap: 15px;

        padding: 20px;

    }


    .register-trust-divider {

        display: none;

    }


    /* Form */

    .register-form-card {

        padding: 22px 17px;

        border-radius: 19px;

    }


    .register-form-header {

        flex-direction: column;

        gap: 15px;

        padding-bottom: 23px;

    }


    .register-secure-badge {

        align-self: flex-start;

    }


    /* Progress */

    .register-progress-wrapper {

        padding-top: 27px;

    }


    .register-progress-line {

        top: 44px;

        left: 9%;

        right: 9%;

    }


    .register-step-number {

        width: 32px;
        height: 32px;

        font-size: 8px;

    }


    .register-step-label {

        font-size: 7px;

        letter-spacing: .8px;

    }


    /* Step */

    .register-step-heading {

        gap: 12px;

        margin-top: 8px;

        margin-bottom: 22px;

    }


    .register-step-heading-icon {

        width: 43px;
        height: 43px;

        flex: 0 0 43px;

    }


    .register-step-heading h4 {

        font-size: 20px;

    }


    .register-step-heading p {

        font-size: 11px;

    }


    /* Fields */

    .register-form-grid {

        grid-template-columns: 1fr;

        gap: 17px;

    }


    .register-field-full {

        grid-column: auto;

    }


    .register-input-wrapper input,
    .register-input-wrapper select {

        height: 53px;

    }


    /* Navigation */

    .register-form-navigation {

        align-items: stretch;

        flex-direction: column;

        gap: 13px;

    }


    .register-form-note {

        order: 2;

    }


    .register-next-button,
    .register-submit-button,
    .register-back-button {

        width: 100%;

    }


    .register-back-button {

        order: 3;

    }


    /* Review */

    .register-review-grid {

        grid-template-columns: 1fr;

    }


    .register-review-card-full {

        grid-column: auto;

    }


    /* Side */

    .register-side-panel {

        display: flex;

        flex-direction: column;

    }


    .register-journey-card {

        padding: 23px 19px;

    }


    /* Contact */

    .register-contact-section {

        grid-template-columns: 1fr;

        gap: 18px;

        padding: 25px 20px;

        margin-top: 45px;

    }


    .register-contact-button {

        width: 100%;

        grid-column: auto;

    }


    /* Bottom trust */

    .register-bottom-trust {

        grid-template-columns: 1fr;

    }


    .register-bottom-trust > div,
    .register-bottom-trust > div:nth-child(3) {

        min-height: 55px;

        border-right: none;

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

    }


    .register-bottom-trust > div:last-child {

        border-bottom: none;

    }


    /* CTA */

    .register-final-cta {

        padding: 28px 22px;

        margin-top: 30px;

        border-radius: 20px;

    }


    .register-final-button {

        width: 100%;

    }


    .register-form-footer {

        align-items: flex-start;

    }

}


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

@media (max-width: 380px) {

    .register-parcel-intro h2 {

        font-size: 34px;

    }


    .register-company-name strong {

        font-size: 14px;

    }


    .register-company-name span {

        font-size: 8px;

    }


    .register-form-card {

        padding: 19px 14px;

    }


    .register-progress-step {

        gap: 7px;

    }


    .register-step-label {

        font-size: 6px;

    }


    .register-message-card {

        padding: 15px;

    }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .register-parcel-section *,
    .register-parcel-section *::before,
    .register-parcel-section *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;

    }

}















/* =========================================================
   GLOBALTRUST LOGISTICS
   PREMIUM CONTACT SECTION
   DARK BLUE / GOLD
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --gt-contact-bg: #050c15;
    --gt-contact-bg-secondary: #081522;

    --gt-contact-card: rgba(10, 27, 45, 0.90);

    --gt-contact-gold: #d8b45a;
    --gt-contact-gold-light: #f3da91;
    --gt-contact-gold-dark: #a88431;

    --gt-contact-blue: #1c527f;
    --gt-contact-blue-light: #3479aa;

    --gt-contact-text: #f4f7fb;
    --gt-contact-text-soft: #b1bfcd;
    --gt-contact-text-muted: #71869a;

    --gt-contact-border: rgba(255,255,255,0.10);
    --gt-contact-border-gold: rgba(216,180,90,0.25);

    --gt-contact-radius: 24px;

    --gt-contact-shadow:
        0 30px 80px rgba(0,0,0,0.40);

}


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

.gt-contact-section {

    position: relative;

    padding:
        110px 0
        100px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(30,83,128,0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(216,180,90,0.08),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #040a12,
            #071421 50%,
            #091a2a
        );

    color:
        var(--gt-contact-text);

}


/* =========================================================
   BACKGROUND
========================================================= */

.gt-contact-glow {

    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    opacity: 0.20;

}


.gt-contact-glow-gold {

    top: -260px;
    right: -180px;

    background:
        rgba(216,180,90,0.30);

}


.gt-contact-glow-blue {

    bottom: -280px;
    left: -220px;

    background:
        rgba(28,82,127,0.40);

}


.gt-contact-grid {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.10;

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

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 92%
        );

}


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

.gt-contact-container {

    position: relative;

    z-index: 2;

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

    margin:
        0 auto;

}


/* =========================================================
   INTRO
========================================================= */

.gt-contact-intro {

    max-width: 820px;

    margin:
        0 auto
        55px;

    text-align: center;

}


.gt-contact-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color:
        var(--gt-contact-gold);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.22em;

}


.gt-contact-eyebrow-line {

    width: 38px;
    height: 1px;

    background:
        var(--gt-contact-gold);

}


.gt-contact-eyebrow-icon {

    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        var(--gt-contact-border-gold);

    border-radius: 50%;

    background:
        rgba(216,180,90,0.08);

}


.gt-contact-intro h2 {

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        clamp(
            38px,
            6vw,
            64px
        );

    line-height: 1.05;

    letter-spacing: -0.045em;

}


.gt-contact-intro h2 span {

    color:
        var(--gt-contact-gold);

}


.gt-contact-intro p {

    max-width: 720px;

    margin:
        22px auto
        0;

    color:
        var(--gt-contact-text-soft);

    font-size: 15px;

    line-height: 1.9;

}


/* =========================================================
   TRUST BAR
========================================================= */

.gt-contact-trust-bar {

    display: grid;

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

    margin-bottom: 32px;

    border:
        1px solid
        var(--gt-contact-border);

    border-radius: 18px;

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

    backdrop-filter:
        blur(14px);

}


.gt-contact-trust-item {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 21px;

}


.gt-contact-trust-item + .gt-contact-trust-item {

    border-left:
        1px solid
        var(--gt-contact-border);

}


.gt-contact-trust-icon {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(216,180,90,0.22);

    border-radius: 12px;

    color:
        var(--gt-contact-gold);

    background:
        rgba(216,180,90,0.07);

}


.gt-contact-trust-item strong {

    display: block;

    font-size: 9px;

    letter-spacing: 0.12em;

}


.gt-contact-trust-item span {

    display: block;

    margin-top: 5px;

    color:
        var(--gt-contact-text-muted);

    font-size: 10px;

}


/* =========================================================
   MAIN GRID
========================================================= */

.gt-contact-main-grid {

    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap: 28px;

}


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

.gt-contact-information {

    padding:
        38px;

    border:
        1px solid
        var(--gt-contact-border);

    border-radius:
        var(--gt-contact-radius);

    background:
        linear-gradient(
            145deg,
            rgba(15,38,61,0.82),
            rgba(7,20,34,0.90)
        );

    box-shadow:
        var(--gt-contact-shadow);

}


.gt-contact-information-header > span {

    color:
        var(--gt-contact-gold);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.18em;

}


.gt-contact-information-header h3 {

    margin-top: 10px;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 31px;

}


.gt-contact-information-header h3 span {

    color:
        var(--gt-contact-gold);

}


.gt-contact-information-header p {

    margin-top: 13px;

    color:
        var(--gt-contact-text-muted);

    font-size: 12px;

    line-height: 1.8;

}


/* =========================================================
   INFO CARDS
========================================================= */

.gt-contact-info-card {

    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 17px;

    padding: 17px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 15px;

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

    color:
        inherit;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;

}


.gt-contact-info-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(216,180,90,0.35);

    background:
        rgba(216,180,90,0.045);

}


.gt-contact-info-icon {

    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(216,180,90,0.25);

    border-radius: 13px;

    color:
        var(--gt-contact-gold);

    background:
        rgba(216,180,90,0.07);

}


.gt-contact-info-content {

    min-width: 0;

    flex: 1;

}


.gt-contact-info-content span {

    display: block;

    color:
        var(--gt-contact-gold);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 0.14em;

}


.gt-contact-info-content strong {

    display: block;

    margin-top: 5px;

    font-size: 12px;

    word-break: break-word;

}


.gt-contact-info-content small {

    display: block;

    margin-top: 4px;

    color:
        var(--gt-contact-text-muted);

    font-size: 10px;

}


.gt-contact-info-arrow {

    color:
        var(--gt-contact-text-muted);

    font-size: 11px;

}


/* =========================================================
   TRUST MESSAGE
========================================================= */

.gt-contact-trust-message {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-top: 20px;

    padding: 17px;

    border:
        1px solid
        rgba(216,180,90,0.16);

    border-radius: 15px;

    background:
        rgba(216,180,90,0.035);

}


.gt-contact-trust-message-icon {

    color:
        var(--gt-contact-gold);

    font-size: 18px;

}


.gt-contact-trust-message strong {

    font-size: 11px;

}


.gt-contact-trust-message p {

    margin-top: 5px;

    color:
        var(--gt-contact-text-muted);

    font-size: 10px;

    line-height: 1.7;

}


/* =========================================================
   FORM CARD
========================================================= */

.gt-contact-form-card {

    position: relative;

    padding:
        38px;

    border:
        1px solid
        var(--gt-contact-border);

    border-radius:
        var(--gt-contact-radius);

    background:
        linear-gradient(
            145deg,
            rgba(17,43,68,0.92),
            rgba(6,19,32,0.97)
        );

    box-shadow:
        var(--gt-contact-shadow);

    overflow: hidden;

}


.gt-contact-form-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 8%;

    width: 84%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gt-contact-gold),
            transparent
        );

}


.gt-contact-form-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    padding-bottom: 25px;

    border-bottom:
        1px solid
        var(--gt-contact-border);

}


.gt-contact-form-header span {

    color:
        var(--gt-contact-gold);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.18em;

}


.gt-contact-form-header h3 {

    margin-top: 8px;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 29px;

}


.gt-contact-form-header h3 span {

    color:
        var(--gt-contact-gold);

    font-size: inherit;

    letter-spacing: normal;

}


.gt-contact-secure-badge {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 9px 12px;

    border:
        1px solid
        rgba(216,180,90,0.20);

    border-radius: 100px;

    background:
        rgba(216,180,90,0.06);

    color:
        var(--gt-contact-gold);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 0.12em;

}


/* =========================================================
   FORM GRID
========================================================= */

.gt-contact-form-grid {

    display: grid;

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

    gap: 20px;

    margin-top: 27px;

}


.gt-contact-field {

    min-width: 0;

}


.gt-contact-field-full {

    grid-column:
        1 / -1;

}


.gt-contact-field label {

    display: block;

    margin-bottom: 8px;

    color:
        #e9eef4;

    font-size: 10px;

    font-weight: 700;

}


.gt-contact-field label span {

    color:
        var(--gt-contact-gold);

}


.gt-contact-input-wrapper {

    position: relative;

}


.gt-contact-input-wrapper > i {

    position: absolute;

    top: 50%;
    left: 17px;

    transform:
        translateY(-50%);

    color:
        #71879b;

    font-size: 13px;

    pointer-events: none;

    transition:
        color 0.25s ease;

}


.gt-contact-input-wrapper:has(textarea) > i {

    top: 20px;

    transform: none;

}


.gt-contact-input-wrapper input,
.gt-contact-input-wrapper select,
.gt-contact-input-wrapper textarea {

    width: 100%;

    outline: none;

    border:
        1px solid
        rgba(255,255,255,0.11);

    border-radius: 13px;

    background:
        rgba(3,13,24,0.70);

    color:
        var(--gt-contact-text);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

}


.gt-contact-input-wrapper input,
.gt-contact-input-wrapper select {

    height: 54px;

    padding:
        0 16px 0 47px;

}


.gt-contact-input-wrapper textarea {

    min-height: 145px;

    padding:
        16px 16px 16px 47px;

    resize: vertical;

    line-height: 1.65;

}


.gt-contact-input-wrapper select {

    appearance: none;

    cursor: pointer;

}


.gt-contact-input-wrapper select option {

    background:
        #0a1b2c;

    color:
        #ffffff;

}


.gt-contact-input-wrapper input::placeholder,
.gt-contact-input-wrapper textarea::placeholder {

    color:
        #5f7487;

}


.gt-contact-input-wrapper input:focus,
.gt-contact-input-wrapper select:focus,
.gt-contact-input-wrapper textarea:focus {

    border-color:
        rgba(216,180,90,0.60);

    background:
        rgba(5,17,29,0.95);

    box-shadow:
        0 0 0 4px
        rgba(216,180,90,0.06);

}


.gt-contact-input-wrapper:focus-within > i {

    color:
        var(--gt-contact-gold);

}


.gt-contact-field small {

    display: block;

    margin-top: 7px;

    color:
        var(--gt-contact-text-muted);

    font-size: 9px;

    line-height: 1.5;

}


/* =========================================================
   CONFIRMATION
========================================================= */

.gt-contact-confirmation {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-top: 22px;

    cursor: pointer;

}


.gt-contact-confirmation input {

    position: absolute;

    opacity: 0;

}


.gt-contact-checkbox {

    width: 21px;
    height: 21px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,0.20);

    border-radius: 6px;

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

    color:
        #081522;

}


.gt-contact-checkbox i {

    opacity: 0;

    font-size: 10px;

    transform:
        scale(0.5);

    transition:
        0.2s ease;

}


.gt-contact-confirmation input:checked
+ .gt-contact-checkbox {

    background:
        var(--gt-contact-gold);

    border-color:
        var(--gt-contact-gold);

}


.gt-contact-confirmation input:checked
+ .gt-contact-checkbox i {

    opacity: 1;

    transform:
        scale(1);

}


.gt-contact-confirmation > span:last-child {

    color:
        var(--gt-contact-text-soft);

    font-size: 10px;

    line-height: 1.7;

}


/* =========================================================
   SUBMIT
========================================================= */

.gt-contact-submit {

    width: 100%;

    min-height: 56px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 23px;

    border: none;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--gt-contact-gold-light),
            var(--gt-contact-gold)
        );

    color:
        #101820;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.13em;

    cursor: pointer;

    box-shadow:
        0 14px 32px
        rgba(216,180,90,0.16);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;

}


.gt-contact-submit:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 18px 40px
        rgba(216,180,90,0.23);

    filter:
        brightness(1.05);

}


.gt-contact-submit:disabled {

    cursor:
        wait;

    opacity:
        0.75;

    transform:
        none;

}


/* =========================================================
   STATUS
========================================================= */

.gt-contact-form-status {

    display: none;

    margin-top: 18px;

    padding: 15px;

    border-radius: 12px;

    font-size: 10px;

    line-height: 1.6;

    text-align: center;

}


.gt-contact-form-status.success {

    display: block;

    border:
        1px solid
        rgba(91,190,125,0.30);

    background:
        rgba(91,190,125,0.07);

    color:
        #a7e8b9;

}


.gt-contact-form-status.error {

    display: block;

    border:
        1px solid
        rgba(220,100,100,0.30);

    background:
        rgba(220,100,100,0.07);

    color:
        #ffb0b0;

}


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

.gt-contact-form-footer {

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 8px;

    margin-top: 19px;

    color:
        var(--gt-contact-text-muted);

    font-size: 9px;

    text-align: center;

}


.gt-contact-form-footer i {

    color:
        var(--gt-contact-gold);

}


/* =========================================================
   MAP SECTION
========================================================= */

.gt-contact-map-section {

    margin-top: 30px;

    padding:
        34px;

    border:
        1px solid
        var(--gt-contact-border);

    border-radius:
        var(--gt-contact-radius);

    background:
        rgba(8,24,40,0.80);

    box-shadow:
        var(--gt-contact-shadow);

}


.gt-contact-map-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 30px;

    margin-bottom: 24px;

}


.gt-contact-map-header > div:first-child > span {

    color:
        var(--gt-contact-gold);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.18em;

}


.gt-contact-map-header h3 {

    margin-top: 9px;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 29px;

}


.gt-contact-map-header h3 span {

    color:
        var(--gt-contact-gold);

}


.gt-contact-map-header p {

    margin-top: 8px;

    color:
        var(--gt-contact-text-muted);

    font-size: 11px;

}


.gt-contact-map-address {

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        13px 16px;

    border:
        1px solid
        rgba(216,180,90,0.20);

    border-radius: 13px;

    background:
        rgba(216,180,90,0.045);

}


.gt-contact-map-address > i {

    color:
        var(--gt-contact-gold);

    font-size: 17px;

}


.gt-contact-map-address strong {

    display: block;

    font-size: 11px;

}


.gt-contact-map-address span {

    display: block;

    margin-top: 3px;

    color:
        var(--gt-contact-text-muted);

    font-size: 9px;

}


/* =========================================================
   MAP
========================================================= */

.gt-contact-map-wrapper {

    position: relative;

    overflow: hidden;

    min-height: 450px;

    border:
        1px solid
        rgba(255,255,255,0.10);

    border-radius: 18px;

    background:
        #071522;

}


.gt-contact-map-wrapper iframe {

    display: block;

    width: 100%;

    min-height: 450px;

    filter:
        grayscale(0.15)
        contrast(1.05);

}


/* =========================================================
   MAP LABEL
========================================================= */

.gt-contact-map-overlay {

    position: absolute;

    left: 20px;
    bottom: 20px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        12px 15px;

    border:
        1px solid
        rgba(216,180,90,0.28);

    border-radius: 13px;

    background:
        rgba(5,14,24,0.90);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,0.30);

}


.gt-contact-map-pin {

    width: 37px;
    height: 37px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        rgba(216,180,90,0.10);

    color:
        var(--gt-contact-gold);

}


.gt-contact-map-overlay strong {

    display: block;

    font-size: 10px;

}


.gt-contact-map-overlay span {

    display: block;

    margin-top: 3px;

    color:
        var(--gt-contact-text-muted);

    font-size: 8px;

}


/* =========================================================
   FINAL TRUST
========================================================= */

.gt-contact-final-trust {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 30px;

    padding:
        25px 28px;

    border:
        1px solid
        rgba(216,180,90,0.17);

    border-radius:
        var(--gt-contact-radius);

    background:
        linear-gradient(
            135deg,
            rgba(216,180,90,0.055),
            rgba(21,63,96,0.18)
        );

}


.gt-contact-final-icon {

    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(216,180,90,0.27);

    border-radius: 15px;

    color:
        var(--gt-contact-gold);

    background:
        rgba(216,180,90,0.07);

    font-size: 19px;

}


.gt-contact-final-trust strong {

    color:
        var(--gt-contact-gold);

    font-size: 9px;

    letter-spacing: 0.14em;

}


.gt-contact-final-trust p {

    margin-top: 5px;

    color:
        var(--gt-contact-text-muted);

    font-size: 10px;

    line-height: 1.7;

}


/* =========================================================
   BOTTOM
========================================================= */

.gt-contact-bottom {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    margin-top: 35px;

    color:
        var(--gt-contact-text-muted);

    font-size: 9px;

    text-align: center;

}


.gt-contact-bottom a {

    color:
        var(--gt-contact-text-muted);

    text-decoration: none;

    transition:
        color 0.25s ease;

}


.gt-contact-bottom a:hover {

    color:
        var(--gt-contact-gold);

}


.gt-contact-bottom i {

    margin-right: 5px;

    color:
        var(--gt-contact-gold);

}


.gt-contact-bottom-divider {

    width: 1px;
    height: 17px;

    background:
        var(--gt-contact-border);

}


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

.gt-contact-reveal {

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity 0.75s ease,
        transform 0.75s ease;

}


.gt-contact-reveal.revealed {

    opacity: 1;

    transform:
        translateY(0);

}


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

@media (max-width: 900px) {

    .gt-contact-main-grid {

        grid-template-columns:
            1fr;

    }

}


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

@media (max-width: 650px) {

    .gt-contact-section {

        padding:
            75px 0
            65px;

    }


    .gt-contact-container {

        width:
            calc(100% - 20px);

    }


    .gt-contact-intro {

        margin-bottom: 35px;

    }


    .gt-contact-eyebrow {

        font-size: 8px;

        letter-spacing: 0.14em;

    }


    .gt-contact-intro h2 {

        font-size:
            clamp(
                34px,
                10vw,
                45px
            );

    }


    .gt-contact-intro p {

        font-size: 12px;

    }


    .gt-contact-trust-bar {

        grid-template-columns:
            1fr;

    }


    .gt-contact-trust-item + .gt-contact-trust-item {

        border-left: none;

        border-top:
            1px solid
            var(--gt-contact-border);

    }


    .gt-contact-information,
    .gt-contact-form-card {

        padding:
            23px 17px;

        border-radius: 19px;

    }


    .gt-contact-information-header h3,
    .gt-contact-form-header h3 {

        font-size: 25px;

    }


    .gt-contact-form-header {

        flex-direction: column;

    }


    .gt-contact-form-grid {

        grid-template-columns:
            1fr;

    }


    .gt-contact-field-full {

        grid-column:
            auto;

    }


    .gt-contact-map-section {

        padding:
            21px 16px;

        border-radius: 19px;

    }


    .gt-contact-map-header {

        flex-direction: column;

        align-items: flex-start;

    }


    .gt-contact-map-address {

        width: 100%;

    }


    .gt-contact-map-wrapper,
    .gt-contact-map-wrapper iframe {

        min-height: 380px;

    }


    .gt-contact-map-overlay {

        left: 12px;
        right: 12px;
        bottom: 12px;

    }


    .gt-contact-final-trust {

        align-items: flex-start;

        padding:
            20px 17px;

    }


    .gt-contact-bottom {

        flex-direction: column;

        gap: 12px;

    }


    .gt-contact-bottom-divider {

        display: none;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}

















/* =========================================================
   GLOBALTRUST LOGISTICS
   PREMIUM FOOTER CSS
========================================================= */


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

:root {

    --gt-footer-bg: #030914;
    --gt-footer-bg-2: #061323;

    --gt-footer-card: rgba(12, 30, 49, 0.72);

    --gt-footer-gold: #d8b45a;
    --gt-footer-gold-light: #f3d98d;
    --gt-footer-gold-dark: #a98532;

    --gt-footer-blue: #1b5b8e;
    --gt-footer-blue-light: #3178ad;

    --gt-footer-white: #f4f7fb;
    --gt-footer-text: #aebdcb;
    --gt-footer-muted: #71869b;

    --gt-footer-border: rgba(255,255,255,0.09);
    --gt-footer-gold-border: rgba(216,180,90,0.22);

}


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

.gt-footer {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    color:
        var(--gt-footer-white);

    background:

        radial-gradient(
            circle at 10% 10%,
            rgba(31,91,139,0.16),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 20%,
            rgba(216,180,90,0.08),
            transparent 28%
        ),

        linear-gradient(
            145deg,
            #020811 0%,
            #040d19 48%,
            #07182a 100%
        );

}


/* =========================================================
   BACKGROUND GLOWS
========================================================= */

.gt-footer-glow {

    position: absolute;

    width: 480px;
    height: 480px;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    opacity: 0.16;

    z-index: -1;

}


.gt-footer-glow-gold {

    top: -250px;
    right: -160px;

    background:
        rgba(216,180,90,0.32);

    animation:
        gtFooterGlowGold
        9s
        ease-in-out
        infinite alternate;

}


.gt-footer-glow-blue {

    bottom: -250px;
    left: -180px;

    background:
        rgba(25,99,155,0.40);

    animation:
        gtFooterGlowBlue
        11s
        ease-in-out
        infinite alternate;

}


@keyframes gtFooterGlowGold {

    from {
        transform: translate(0,0) scale(1);
    }

    to {
        transform: translate(-35px,30px) scale(1.12);
    }

}


@keyframes gtFooterGlowBlue {

    from {
        transform: translate(0,0) scale(1);
    }

    to {
        transform: translate(35px,-25px) scale(1.10);
    }

}


/* =========================================================
   GRID
========================================================= */

.gt-footer-grid {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.07;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.08) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 92%
        );

}


/* =========================================================
   PARTICLES
========================================================= */

.gt-footer-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

}


.gt-footer-particles span {

    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        var(--gt-footer-gold);

    opacity: 0.35;

    animation:
        gtFooterParticle
        7s
        ease-in-out
        infinite;

}


.gt-footer-particles span:nth-child(1) {
    left: 7%;
    top: 18%;
}

.gt-footer-particles span:nth-child(2) {
    left: 18%;
    top: 72%;
    animation-delay: 1s;
}

.gt-footer-particles span:nth-child(3) {
    left: 35%;
    top: 42%;
    animation-delay: 2s;
}

.gt-footer-particles span:nth-child(4) {
    left: 51%;
    top: 82%;
    animation-delay: 3s;
}

.gt-footer-particles span:nth-child(5) {
    left: 68%;
    top: 28%;
    animation-delay: 1.5s;
}

.gt-footer-particles span:nth-child(6) {
    left: 78%;
    top: 65%;
    animation-delay: 2.5s;
}

.gt-footer-particles span:nth-child(7) {
    left: 89%;
    top: 17%;
    animation-delay: 4s;
}

.gt-footer-particles span:nth-child(8) {
    left: 94%;
    top: 78%;
    animation-delay: 5s;
}


@keyframes gtFooterParticle {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);

        opacity: 0.15;
    }

    50% {
        transform:
            translateY(-25px)
            scale(1.5);

        opacity: 0.55;
    }

}


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

.gt-footer-container {

    position: relative;

    z-index: 2;

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

    margin: 0 auto;

    padding:
        80px 0 28px;

}


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

.gt-footer-cta {

    text-align: center;

    max-width: 850px;

    margin:
        0 auto;

}


.gt-footer-cta-decoration {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin-bottom: 25px;

}


.gt-footer-cta-line {

    width: 70px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gt-footer-gold)
        );

}


.gt-footer-cta-line:last-child {

    background:
        linear-gradient(
            90deg,
            var(--gt-footer-gold),
            transparent
        );

}


.gt-footer-cta-icon {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        var(--gt-footer-gold-border);

    border-radius: 50%;

    color:
        var(--gt-footer-gold);

    background:
        rgba(216,180,90,0.07);

    box-shadow:
        0 0 30px
        rgba(216,180,90,0.10);

    animation:
        gtPlanePulse
        3s
        ease-in-out
        infinite;

}


@keyframes gtPlanePulse {

    0%,
    100% {
        box-shadow:
            0 0 15px
            rgba(216,180,90,0.08);
    }

    50% {
        box-shadow:
            0 0 30px
            rgba(216,180,90,0.20);
    }

}


.gt-footer-overline {

    display: block;

    margin-bottom: 13px;

    color:
        var(--gt-footer-gold);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.25em;

}


.gt-footer-cta h2 {

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size:
        clamp(34px, 5vw, 58px);

    line-height: 1.06;

    letter-spacing: -0.04em;

}


.gt-footer-cta h2 span {

    color:
        var(--gt-footer-gold);

}


.gt-footer-cta p {

    max-width: 700px;

    margin:
        20px auto 0;

    color:
        var(--gt-footer-text);

    font-size: 14px;

    line-height: 1.85;

}


.gt-footer-cta-actions {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 29px;

}


/* =========================================================
   BUTTONS
========================================================= */

.gt-footer-primary-button,
.gt-footer-secondary-button {

    min-height: 52px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 11px;

    padding:
        0 22px;

    border-radius: 13px;

    text-decoration: none;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.12em;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;

}


.gt-footer-primary-button {

    color:
        #101923;

    background:
        linear-gradient(
            135deg,
            var(--gt-footer-gold-light),
            var(--gt-footer-gold)
        );

    box-shadow:
        0 14px 35px
        rgba(216,180,90,0.14);

}


.gt-footer-primary-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 45px
        rgba(216,180,90,0.24);

}


.gt-footer-primary-button i {

    transition:
        transform 0.25s ease;

}


.gt-footer-primary-button:hover i {

    transform:
        translateX(4px);

}


.gt-footer-secondary-button {

    border:
        1px solid
        var(--gt-footer-border);

    color:
        var(--gt-footer-text);

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

}


.gt-footer-secondary-button:hover {

    transform:
        translateY(-3px);

    color:
        var(--gt-footer-gold);

    border-color:
        var(--gt-footer-gold-border);

    background:
        rgba(216,180,90,0.05);

}


/* =========================================================
   DIVIDER
========================================================= */

.gt-footer-divider {

    margin:
        65px 0 50px;

}


.gt-footer-divider span {

    display: block;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(216,180,90,0.30),
            transparent
        );

}


/* =========================================================
   MAIN GRID
========================================================= */

.gt-footer-main {

    display: grid;

    grid-template-columns:
        1.5fr
        0.8fr
        0.9fr
        1.2fr;

    gap: 55px;

}


/* =========================================================
   BRAND
========================================================= */

.gt-footer-brand {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    text-decoration: none;

    color: inherit;

}


.gt-footer-logo-box {

    width: 57px;
    height: 57px;

    padding: 7px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        var(--gt-footer-gold-border);

    border-radius: 15px;

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

    box-shadow:
        0 12px 35px
        rgba(0,0,0,0.25);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.gt-footer-brand:hover .gt-footer-logo-box {

    transform:
        translateY(-3px)
        rotate(-2deg);

    box-shadow:
        0 15px 40px
        rgba(216,180,90,0.14);

}


.gt-footer-logo-box img {

    width: 100%;
    height: 100%;

    object-fit: contain;

}


.gt-footer-brand-name {

    display: flex;

    flex-direction: column;

    line-height: 1;

}


.gt-footer-brand-name strong {

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 17px;

    letter-spacing: 0.12em;

}


.gt-footer-brand-name span {

    margin-top: 5px;

    color:
        var(--gt-footer-gold);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.34em;

}


.gt-footer-company-description {

    max-width: 360px;

    margin-top: 22px;

    color:
        var(--gt-footer-muted);

    font-size: 11px;

    line-height: 1.8;

}


.gt-footer-company-status {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 20px;

    color:
        var(--gt-footer-text);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.12em;

}


.gt-status-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--gt-footer-gold);

    box-shadow:
        0 0 12px
        rgba(216,180,90,0.65);

    animation:
        gtStatusPulse
        2s
        ease-in-out
        infinite;

}


@keyframes gtStatusPulse {

    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

}


/* =========================================================
   SOCIALS
========================================================= */

.gt-footer-socials {

    display: flex;

    gap: 8px;

    margin-top: 22px;

}


.gt-footer-social {

    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        var(--gt-footer-border);

    border-radius: 10px;

    color:
        var(--gt-footer-muted);

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

    text-decoration: none;

    transition:
        all 0.25s ease;

}


.gt-footer-social:hover {

    color:
        var(--gt-footer-gold);

    border-color:
        var(--gt-footer-gold-border);

    background:
        rgba(216,180,90,0.06);

    transform:
        translateY(-3px);

}


/* =========================================================
   COLUMNS
========================================================= */

.gt-footer-column-title {

    display: block;

    margin-bottom: 20px;

    color:
        var(--gt-footer-gold);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.20em;

}


.gt-footer-column ul {

    list-style: none;

}


.gt-footer-column li {

    margin-bottom: 12px;

}


.gt-footer-column li a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    color:
        var(--gt-footer-muted);

    text-decoration: none;

    font-size: 10px;

    line-height: 1.4;

    transition:
        color 0.25s ease,
        transform 0.25s ease;

}


.gt-footer-column li a i {

    opacity: 0;

    font-size: 8px;

    transform:
        translateX(-5px);

    transition:
        all 0.25s ease;

}


.gt-footer-column li a:hover {

    color:
        var(--gt-footer-white);

    transform:
        translateX(3px);

}


.gt-footer-column li a:hover i {

    opacity: 1;

    color:
        var(--gt-footer-gold);

    transform:
        translateX(0);

}


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

.gt-footer-contact-item {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-bottom: 19px;

}


.gt-footer-contact-icon {

    flex-shrink: 0;

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        var(--gt-footer-gold-border);

    border-radius: 9px;

    color:
        var(--gt-footer-gold);

    background:
        rgba(216,180,90,0.05);

    font-size: 11px;

}


.gt-footer-contact-item > div:last-child {

    min-width: 0;

}


.gt-footer-contact-item span {

    display: block;

    margin-bottom: 5px;

    color:
        var(--gt-footer-gold);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 0.14em;

}


.gt-footer-contact-item p {

    color:
        var(--gt-footer-muted);

    font-size: 10px;

    line-height: 1.6;

}


.gt-footer-contact-item a {

    display: block;

    max-width: 190px;

    color:
        var(--gt-footer-muted);

    font-size: 9px;

    line-height: 1.5;

    text-decoration: none;

    word-break: break-word;

    transition:
        color 0.25s ease;

}


.gt-footer-contact-item a:hover {

    color:
        var(--gt-footer-gold);

}


.gt-footer-contact-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 3px;

    color:
        var(--gt-footer-gold);

    text-decoration: none;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.08em;

}


.gt-footer-contact-link i {

    transition:
        transform 0.25s ease;

}


.gt-footer-contact-link:hover i {

    transform:
        translate(3px,-3px);

}


/* =========================================================
   GLOBAL PRESENCE
========================================================= */

.gt-footer-global {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 60px;

    padding:
        25px 28px;

    border:
        1px solid
        rgba(216,180,90,0.15);

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            rgba(216,180,90,0.045),
            rgba(24,70,106,0.16)
        );

}


.gt-footer-global-content {

    display: flex;

    align-items: center;

    gap: 16px;

}


.gt-footer-global-icon {

    width: 51px;
    height: 51px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        var(--gt-footer-gold-border);

    border-radius: 15px;

    color:
        var(--gt-footer-gold);

    background:
        rgba(216,180,90,0.06);

    font-size: 20px;

    animation:
        gtGlobeRotate
        8s
        linear
        infinite;

}


@keyframes gtGlobeRotate {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}


.gt-footer-global-content > div:last-child > span {

    color:
        var(--gt-footer-gold);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.18em;

}


.gt-footer-global h3 {

    margin-top: 5px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 20px;

}


.gt-footer-global h3 strong {

    color:
        var(--gt-footer-gold);

}


.gt-footer-global p {

    max-width: 600px;

    margin-top: 5px;

    color:
        var(--gt-footer-muted);

    font-size: 10px;

    line-height: 1.6;

}


.gt-footer-global-stat {

    flex-shrink: 0;

    min-width: 120px;

    text-align: center;

    padding-left: 25px;

    border-left:
        1px solid
        var(--gt-footer-border);

}


.gt-footer-global-stat strong {

    display: block;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    color:
        var(--gt-footer-gold);

    font-size: 42px;

    line-height: 0.9;

}


.gt-footer-global-stat span {

    display: block;

    margin-top: 7px;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 0.17em;

}


.gt-footer-global-stat small {

    display: block;

    margin-top: 4px;

    color:
        var(--gt-footer-muted);

    font-size: 7px;

    letter-spacing: 0.15em;

}


/* =========================================================
   TRUST STRIP
========================================================= */

.gt-footer-trust {

    display: grid;

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

    margin-top: 35px;

    padding:
        22px 0;

    border-top:
        1px solid
        var(--gt-footer-border);

    border-bottom:
        1px solid
        var(--gt-footer-border);

}


.gt-footer-trust-item {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        0 15px;

}


.gt-footer-trust-item + .gt-footer-trust-item {

    border-left:
        1px solid
        var(--gt-footer-border);

}


.gt-footer-trust-item > i {

    color:
        var(--gt-footer-gold);

    font-size: 17px;

}


.gt-footer-trust-item strong {

    display: block;

    color:
        var(--gt-footer-white);

    font-size: 8px;

    letter-spacing: 0.12em;

}


.gt-footer-trust-item span {

    display: block;

    margin-top: 4px;

    color:
        var(--gt-footer-muted);

    font-size: 7px;

    letter-spacing: 0.08em;

}


/* =========================================================
   BOTTOM
========================================================= */

.gt-footer-bottom {

    display: grid;

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

    align-items: center;

    gap: 20px;

    padding-top: 25px;

}


.gt-footer-bottom p {

    color:
        var(--gt-footer-muted);

    font-size: 9px;

}


.gt-footer-bottom-center {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color:
        rgba(216,180,90,0.48);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 0.10em;

}


.gt-footer-bottom-center b {

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        var(--gt-footer-gold);

    opacity: 0.5;

}


.gt-footer-bottom-links {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 15px;

}


.gt-footer-bottom-links a {

    color:
        var(--gt-footer-muted);

    text-decoration: none;

    font-size: 8px;

    transition:
        color 0.25s ease;

}


.gt-footer-bottom-links a:hover {

    color:
        var(--gt-footer-gold);

}


#gt-back-to-top {

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        var(--gt-footer-gold-border);

    border-radius: 10px;

    background:
        rgba(216,180,90,0.05);

    color:
        var(--gt-footer-gold);

    cursor: pointer;

    transition:
        all 0.25s ease;

}


#gt-back-to-top:hover {

    transform:
        translateY(-3px);

    background:
        var(--gt-footer-gold);

    color:
        #101923;

}


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

/*
   IMPORTANT:
   Elements are visible by default.
   JavaScript only adds the animation
   when supported.
*/

.gt-footer-reveal {

    opacity: 1;

    transform: none;

}


.gt-footer-reveal.gt-footer-hidden {

    opacity: 0;

    transform:
        translateY(25px);

}


.gt-footer-reveal.gt-footer-visible {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;

}


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

@media (max-width: 950px) {

    .gt-footer-main {

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

        gap: 40px;

    }


    .gt-footer-company {

        grid-column:
            1 / -1;

        padding-bottom: 10px;

    }


    .gt-footer-company-description {

        max-width: 600px;

    }


    .gt-footer-trust {

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

        gap: 20px;

    }


    .gt-footer-trust-item:nth-child(3) {

        border-left: none;

    }


    .gt-footer-bottom {

        grid-template-columns:
            1fr;

        text-align: center;

    }


    .gt-footer-bottom-center,
    .gt-footer-bottom-links {

        justify-content: center;

    }

}


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

@media (max-width: 600px) {

    .gt-footer-container {

        width:
            calc(100% - 24px);

        padding:
            55px 0 22px;

    }


    .gt-footer-cta h2 {

        font-size: 34px;

    }


    .gt-footer-cta p {

        font-size: 11px;

        line-height: 1.75;

    }


    .gt-footer-cta-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .gt-footer-primary-button,
    .gt-footer-secondary-button {

        width: 100%;

    }


    .gt-footer-divider {

        margin:
            45px 0 35px;

    }


    .gt-footer-main {

        grid-template-columns:
            1fr;

        gap: 32px;

    }


    .gt-footer-company {

        grid-column: auto;

    }


    .gt-footer-column {

        padding-top: 4px;

    }


    .gt-footer-global {

        flex-direction: column;

        align-items: stretch;

        gap: 22px;

        padding:
            20px 17px;

    }


    .gt-footer-global-content {

        align-items: flex-start;

    }


    .gt-footer-global h3 {

        font-size: 18px;

    }


    .gt-footer-global p {

        font-size: 9px;

    }


    .gt-footer-global-stat {

        display: flex;

        align-items: baseline;

        justify-content: center;

        gap: 9px;

        padding:
            17px 0 0;

        border-left: none;

        border-top:
            1px solid
            var(--gt-footer-border);

    }


    .gt-footer-global-stat strong {

        font-size: 37px;

    }


    .gt-footer-global-stat span,
    .gt-footer-global-stat small {

        margin-top: 0;

    }


    .gt-footer-trust {

        grid-template-columns:
            1fr;

        gap: 0;

    }


    .gt-footer-trust-item {

        justify-content: flex-start;

        padding:
            13px 4px;

    }


    .gt-footer-trust-item + .gt-footer-trust-item {

        border-left: none;

        border-top:
            1px solid
            var(--gt-footer-border);

    }


    .gt-footer-bottom-center {

        flex-wrap: wrap;

        line-height: 1.7;

    }


    .gt-footer-bottom-links {

        flex-wrap: wrap;

    }


    .gt-footer-particles span:nth-child(n+5) {

        display: none;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .gt-footer *,
    .gt-footer *::before,
    .gt-footer *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}