/* DKL dotted globe - [dkl_globe] shortcode. Colours are CSS variables so they
   can be changed on the Elementor widget without touching this file. */
.dkl-globe{
  --dkl-globe-land:#1F4B58;
  --dkl-globe-accent:#00A3E7;
  --dkl-globe-pulse:#60D3F7;
  position:relative; width:100%; height:680px; overflow:hidden;
  font-family:'ITC Avant Garde Gothic Pro',sans-serif;
}
.dkl-globe__canvas{ position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:pan-y; }
.dkl-globe__canvas:active{ cursor:grabbing; }
.dkl-globe__cards{ position:absolute; inset:0; pointer-events:none; }
.dkl-globe__card{
  position:absolute; left:0; top:0; min-width:150px; padding:12px 34px 12px 16px;
  background:#FFFFFF; border-top:3px solid #60D3F7;
  box-shadow:0 10px 28px rgba(31,75,88,.14);
  direction:ltr; text-align:left; opacity:0; transition:opacity .35s ease;
  will-change:transform,opacity;
}
.dkl-globe__card b{ display:block; font-weight:400; font-size:15px; line-height:20px; color:#1F4B58; }
.dkl-globe__card i{ display:block; font-style:normal; font-size:11px; line-height:16px; letter-spacing:1.5px; text-transform:uppercase; color:#00A3E7; margin-top:2px; }
.dkl-globe__card small{ display:block; font-size:10px; line-height:14px; letter-spacing:1.2px; text-transform:uppercase; color:#7A8C94; margin-top:6px; }
.dkl-globe__card::before{
  content:""; position:absolute; top:15px; right:14px; width:7px; height:7px; border-radius:50%; background:#C9D4D9;
}
.dkl-globe__card.is-active::before{ background:#00A3E7; box-shadow:0 0 0 4px rgba(96,211,247,.28); }

/* text list under the globe: search engines and screen readers cannot read a canvas (spec 4.5) */
.dkl-globe-list{ margin:28px auto 0; max-width:960px; text-align:center; }
.dkl-globe-list ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0; }
.dkl-globe-list li{ font-size:13px; line-height:22px; letter-spacing:2px; text-transform:uppercase; color:#1F4B58; }
.dkl-globe-list li + li::before{ content:"\00B7"; margin:0 12px; color:#00A3E7; }

@media (max-width:1024px){ .dkl-globe{ height:560px; } }
@media (max-width:767px){
  .dkl-globe{ height:380px; }
  .dkl-globe__card{ display:none; }          /* spec 4.5: a still globe plus the list on phones */
  .dkl-globe__canvas{ cursor:default; }
  .dkl-globe-list li{ font-size:12px; letter-spacing:1.5px; }
}