.travlink-connect {
    position: relative;
    overflow: hidden;
    padding-top: 10px;

    /* padding: clamp(88px, 9vw, 132px) 0; */
    background: #fff;
    isolation: isolate;
}

.travlink-connect::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(rgba(29, 99, 184, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29, 99, 184, .025) 1px, transparent 1px),
        url("/img/background/abtmap.webp") center 62% / min(1100px, 86vw) auto no-repeat;
    background-size: 78px 78px, 78px 78px, min(1100px, 86vw) auto;
    content: "";
    opacity: .075;
    pointer-events: none;
}

.travlink-connect__header {
    max-width: 900px;
    margin: 0 auto 62px;
    text-align: center;
}

.travlink-connect__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #1d63b8;
    font: 700 11px/1 Outfit, Inter, sans-serif;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.travlink-connect__eyebrow::before,
.travlink-connect__eyebrow::after {
    width: 30px;
    height: 1px;
    background: currentColor;
    content: "";
    opacity: .55;
}

.travlink-connect__header h2 {
    max-width: 830px;
    margin: 20px auto 0;
    color: #10233e;
    font: 500 clamp(48px, 5.4vw, 74px)/.98 "Cormorant Garamond", Georgia, serif;
    letter-spacing: -.045em;
}

.travlink-connect__header h2 em {
    display: block;
    color: #0e47a1;
    font-weight: 500;
}

.travlink-connect__audience {
    margin: 23px 0 0;
    color: #66768a;
    font: 500 15px/1.55 Outfit, Inter, sans-serif;
    letter-spacing: .06em;
}

.travlink-connect__statement {
    display: inline-block;
    margin: 24px auto 0;
    padding: 11px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(29, 99, 184, .08), rgba(47, 159, 230, .13), rgba(29, 99, 184, .08));
    color: #0e47a1;
    font: 600 17px/1.4 Outfit, Inter, sans-serif;
}

.travlink-connect__layout {
    display: grid;
    grid-template-columns: minmax(390px, .86fr) minmax(520px, 1.14fr);
    gap: clamp(48px, 6vw, 90px);
    align-items: center;
}

.travlink-connect__intro {
    max-width: 540px;
    margin: 0 0 28px;
    color: #020b17;
    font: 400 18px/1.75 Outfit, Inter, sans-serif;
}

.travlink-connect__cards {
    display: grid;
    gap: 9px;
}

.travlink-connect-card {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    width: 100%;
    padding: 13px 15px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: transparent;
    color: #172942;
    text-align: left;
    transition: opacity .3s ease, border-color .3s ease, background-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.travlink-connect-card__icon {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #eef5fc;
    color: #0e47a1;
    font-size: 16px;
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.travlink-connect-card strong {
    display: block;
    font: 600 15px/1.35 Outfit, Inter, sans-serif;
}

.travlink-connect-card strong i {
    padding: 0 3px;
    color: #2f9fe6;
    font-style: normal;
}

.travlink-connect-card small {
    display: block;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    color: #68778a;
    font: 400 12.5px/1.55 Outfit, Inter, sans-serif;
    opacity: 0;
    transform: translateY(6px);
    transition: max-height .4s ease, margin-top .3s ease, opacity .3s ease, transform .3s ease;
}

.travlink-connect-card:is(:hover, :focus-visible, .is-active) {
    border-color: rgba(29, 99, 184, .18);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 13px 32px rgba(19, 64, 104, .09);
    outline: 0;
    transform: translateX(6px);
}

.travlink-connect-card:is(:hover, :focus-visible, .is-active) .travlink-connect-card__icon {
    background: #0e47a1;
    color: #fff;
    transform: scale(1.06);
}

.travlink-connect-card:is(:hover, :focus-visible, .is-active) small {
    max-height: 90px;
    margin-top: 5px;
    opacity: 1;
    transform: none;
}

.travlink-connect__cards.has-active .travlink-connect-card:not(.is-active) {
    opacity: .5;
}

.travlink-connect-network {
    position: relative;
    max-width: 650px;
    margin: 0 auto;
}

.travlink-connect-network::before {
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 159, 230, .13), transparent 68%);
    content: "";
    filter: blur(12px);
}

.travlink-connect-network svg {
    position: center;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.travlink-connect-network__grid {
    fill: none;
    stroke: rgba(29, 99, 184, .1);
    stroke-width: 1;
}

.travlink-connect-network__routes path {
    fill: none;
    stroke: rgba(29, 99, 184, .23);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 5 8;
    transition: opacity .3s ease, stroke .3s ease, stroke-width .3s ease, filter .3s ease;
}

.travlink-connect:not(.is-in-view) .travlink-connect-network__routes path {
    stroke-dasharray: 0 600;
}

.travlink-connect.is-in-view .travlink-connect-network__routes path {
    animation: travlink-connect-draw 1.1s cubic-bezier(.22, 1, .36, 1) both;
}

.travlink-connect.is-in-view .travlink-connect-network__routes path:nth-child(2) {
    animation-delay: .12s;
}

.travlink-connect.is-in-view .travlink-connect-network__routes path:nth-child(3) {
    animation-delay: .24s;
}

.travlink-connect.is-in-view .travlink-connect-network__routes path:nth-child(4) {
    animation-delay: .36s;
}

.travlink-connect.is-in-view .travlink-connect-network__routes path:nth-child(5) {
    animation-delay: .48s;
}

.travlink-connect.is-in-view .travlink-connect-network__routes path:nth-child(6) {
    animation-delay: .6s;
}

.travlink-connect.is-in-view .travlink-connect-network__routes path:nth-child(7) {
    animation-delay: .72s;
}

@keyframes travlink-connect-draw {
    from {
        stroke-dasharray: 0 600;
    }

    to {
        stroke-dasharray: 5 8;
    }
}

.travlink-connect-network__routes path.is-active {
    stroke: #1688d1;
    stroke-width: 4;
    filter: url(#connectGlow);
}

.travlink-connect-network__routes path.is-muted {
    opacity: .22;
}

.travlink-connect-network__globe {
    filter: drop-shadow(0 20px 30px rgba(14, 71, 161, .2));
    opacity: 0;
    transform: scale(.86);
    transform-origin: 340px 340px;
    transition: opacity .8s ease, transform 1s cubic-bezier(.22, 1, .36, 1);
}

.travlink-connect.is-in-view .travlink-connect-network__globe {
    opacity: 1;
    transform: scale(1);
}

.travlink-connect-network__globe ellipse,
.travlink-connect-network__globe>path:not(.travlink-connect-network__land) {
    fill: none;
    stroke: rgba(255, 255, 255, .3);
    stroke-width: 1.2;
}

.travlink-connect-network__land {
    fill: rgba(255, 255, 255, .2);
    stroke: rgba(255, 255, 255, .36);
}

.travlink-connect-network__globe text {
    fill: #fff;
    font: 600 17px/1 Outfit, Inter, sans-serif;
    letter-spacing: .08em;
    text-anchor: middle;
    text-transform: uppercase;
}

.travlink-connect-network__nodes g {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity .3s ease, scale .35s ease, filter .3s ease;
}

.travlink-connect.is-in-view .travlink-connect-network__nodes g {
    opacity: 1;
    animation: travlink-connect-node-in .65s cubic-bezier(.22, 1, .36, 1) both;
}

.travlink-connect.is-in-view .travlink-connect-network__nodes g:nth-child(2) {
    animation-delay: .12s;
}

.travlink-connect.is-in-view .travlink-connect-network__nodes g:nth-child(3) {
    animation-delay: .24s;
}

.travlink-connect.is-in-view .travlink-connect-network__nodes g:nth-child(4) {
    animation-delay: .36s;
}

.travlink-connect.is-in-view .travlink-connect-network__nodes g:nth-child(5) {
    animation-delay: .48s;
}

.travlink-connect.is-in-view .travlink-connect-network__nodes g:nth-child(6) {
    animation-delay: .6s;
}

.travlink-connect.is-in-view .travlink-connect-network__nodes g:nth-child(7) {
    animation-delay: .72s;
}

@keyframes travlink-connect-node-in {
    from {
        opacity: 0;
        scale: .7;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

.travlink-connect-network__nodes circle {
    fill: #fff;
    stroke: rgba(29, 99, 184, .35);
    stroke-width: 2;
    filter: drop-shadow(0 8px 12px rgba(14, 71, 161, .12));
}

.travlink-connect-network__nodes text {
    fill: #174f98;
    font: 600 9px/1 Outfit, Inter, sans-serif;
    text-anchor: middle;
    text-transform: uppercase;
}

.travlink-connect-network__nodes g.is-active {
    filter: url(#connectGlow);
    scale: 1.16;
}

.travlink-connect-network__nodes g.is-active circle {
    fill: #0e47a1;
    stroke: #56b5ef;
}

.travlink-connect-network__nodes g.is-active text {
    fill: #fff;
}

.travlink-connect-network__nodes g.is-muted {
    opacity: .3;
}

.travlink-connect-network__traveler,
.travlink-connect-network__vessel {
    fill: #0e47a1;
    filter: drop-shadow(0 4px 6px rgba(14, 71, 161, .35));
}

.travlink-connect.is-in-view .travlink-connect-network__traveler {
    offset-path: path("M340 340Q250 205 140 126");
    animation: travlink-connect-travel 18s linear infinite;
}

.travlink-connect.is-in-view .travlink-connect-network__vessel {
    offset-path: path("M340 340Q505 432 574 492");
    animation: travlink-connect-travel 24s -8s linear infinite;
}

@keyframes travlink-connect-travel {
    from {
        offset-distance: 0;
    }

    to {
        offset-distance: 100%;
    }
}

.travlink-connect__closing {
    width: min(100%, 760px);
    margin: 64px auto 0;
    padding: 24px 30px;
    border: 1px solid rgba(29, 99, 184, .16);
    border-radius: 20px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 18px 48px rgba(20, 67, 108, .1);
    color: #405168;
    font: 500 clamp(18px, 2vw, 23px)/1.45 "Cormorant Garamond", Georgia, serif;
    text-align: center;
    backdrop-filter: blur(14px);
}

.travlink-connect__closing strong {
    color: #0e47a1;
    font-weight: 600;
}

@media (max-width: 991px) {
    .travlink-connect__layout {
        display: flex;
        flex-direction: column;
    }

    .travlink-connect-network {
        order: -1;
        width: min(100%, 620px);
    }

    .travlink-connect__content {
        width: min(100%, 680px);
    }
}

@media (max-width: 767px) {
    .travlink-connect {
        padding: 76px 0;
    }

    .travlink-connect__header {
        margin-bottom: 38px;
    }

    .travlink-connect__header h2 {
        font-size: clamp(41px, 11vw, 53px);
    }

    .travlink-connect__statement {
        border-radius: 14px;
        font-size: 15px;
    }

    .travlink-connect__layout {
        gap: 34px;
    }

    .travlink-connect-network {
        width: calc(100% + 20px);
        margin-left: -10px;
    }

    .travlink-connect__intro {
        font-size: 16px;
        text-align: center;
    }

    .travlink-connect-card {
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 14px 12px;
        border-color: rgba(29, 99, 184, .1);
        background: rgba(255, 255, 255, .84);
    }

    .travlink-connect-card small {
        max-height: 100px;
        margin-top: 5px;
        opacity: 1;
        transform: none;
    }

    .travlink-connect__cards.has-active .travlink-connect-card:not(.is-active) {
        opacity: 1;
    }

    .travlink-connect-card:is(:hover, :focus-visible, .is-active) {
        transform: translateY(-3px);
    }

    .travlink-connect__closing {
        margin-top: 44px;
        padding: 21px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .travlink-connect * {
        animation: none !important;
        transition: none !important;
    }

    .travlink-connect-network__globe {
        opacity: 1;
        transform: none;
    }

    .travlink-connect-network__nodes g {
        opacity: 1;
    }

    .travlink-connect-network__traveler,
    .travlink-connect-network__vessel {
        display: none;
    }
}