body {
  font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #6F6A64;
  background-color: #F8F6F5;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Outfit", "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #071F3D;
}

#hero h2 {color:#fff}

.font-mono { font-family: "JetBrains Mono", monospace; }
.glass-panel {
  background: rgba(248, 246, 245, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card-hover-effect {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.card-hover-effect:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgb(9 31 59 / 0.1);
}
.hero-bg {
  background-image: url('/assets/home/IMG_11.webp');
  background-size: cover;
  background-position: center;
}
.map-bg {
  background-image: url('/assets/home/IMG_26.webp');
  background-size: cover;
  background-position: center;
}

#flight-map {
    background: #071f3d;
}

/*
 * Make Leaflet itself disappear visually.
 */
#flight-map .leaflet-control-zoom {
    border: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
}

#flight-map .leaflet-control-zoom a {
    background: rgba(7, 31, 61, .9);
    color: #fff;
    border-color: rgba(255,255,255,.12);
}

#flight-map .leaflet-control-zoom a:hover {
    background: #00A5E7;
}

#flight-map .leaflet-control-attribution {
    background: rgba(7, 31, 61, .75);
    color: rgba(255,255,255,.5);
    font-size: 9px;
}

#flight-map .leaflet-control-attribution a {
    color: #8bdcff;
}


/*
 * SVG route overlay.
 */
.flight-route-overlay {
    position: absolute;
    inset: 0;
    z-index: 450;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.flight-route {
    fill: none;
    stroke: #44BCF9;
    stroke-width: 1.15;
    stroke-opacity: .17;
    vector-effect: non-scaling-stroke;
    transition:
        stroke-opacity .2s ease,
        stroke-width .2s ease,
        stroke .2s ease;
}

.flight-route.is-highlighted {
    stroke: #44BCF9;
    stroke-width: 2;
    stroke-opacity: .85;
}

.flight-route.is-selected {
    stroke: #EF541C;
    stroke-width: 2.5;
    stroke-opacity: 1;
}


/*
 * Destination marker.
 */
.nonstop-marker {
    position: relative;
    width: 12px;
    height: 12px;
}

.nonstop-marker-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 1px;
    left: 1px;

    border-radius: 50%;
    background: #00A5E7;
    border: 2px solid white;

    box-shadow:
        0 0 0 3px rgba(0,165,231,.10),
        0 2px 8px rgba(0,0,0,.45);

    transition:
        transform .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.nonstop-marker:hover .nonstop-marker-dot,
.nonstop-marker.marker-active .nonstop-marker-dot {
    transform: scale(1.55);
    background: #EF541C;

    box-shadow:
        0 0 0 5px rgba(239,84,28,.20),
        0 2px 10px rgba(0,0,0,.55);
}


/*
 * TPA/origin marker.
 */
.origin-marker {
    width: 26px;
    height: 26px;
    position: relative;
}

.origin-marker-core {
    position: absolute;
    width: 14px;
    height: 14px;
    left: 6px;
    top: 6px;

    background: #EF541C;
    border: 3px solid white;
    border-radius: 50%;

    box-shadow:
        0 0 15px rgba(239,84,28,.9);
}

.origin-marker-pulse {
    position: absolute;
    inset: 0;

    border: 2px solid rgba(239,84,28,.75);
    border-radius: 50%;

    animation: originPulse 2s infinite;
}

@keyframes originPulse {
    0% {
        transform: scale(.45);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}


/*
 * Leaflet destination tooltip.
 */
.nonstop-tooltip {
    background: rgba(7,31,61,.95);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 6px;

    color: white;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;

    padding: 3px 7px;
    box-shadow: 0 3px 10px rgba(0,0,0,.4);

    /* Don't animate coordinates */
    transition: opacity 0.15s ease !important;
}

.leaflet-tooltip {
    transition: opacity 0.15s ease !important;
}

.nonstop-tooltip:before {
    display: none;
}


/*
 * Loader
 */
.map-loading-spinner {
    width: 36px;
    height: 36px;

    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.18);
    border-top-color: #00A5E7;

    animation: mapSpin .8s linear infinite;
}

@keyframes mapSpin {
    to {
        transform: rotate(360deg);
    }
}