/* Geographic map: marker and raster positions are owned only by Leaflet. */
.geographic-map{isolation:isolate;min-width:0;height:630px;align-self:center;scroll-margin-top:18px}
.geographic-map:before{display:none!important}
#geographicMap{position:absolute;inset:0;z-index:0;background:#071923;direction:ltr;font:inherit}
#geographicMap .geo-satellite{filter:saturate(.82) contrast(1.05) brightness(.84)}
#geographicMap .geo-city-anchor{background:none;border:0}
#geographicMap .geo-city-button{position:relative!important;inset:auto!important;transform:none!important;display:block;width:44px;height:44px;margin:0;border:0;padding:0;background:none;color:#fff;cursor:pointer;pointer-events:none}
#geographicMap .geo-city-button .pin{pointer-events:none;position:absolute;display:block;width:12px;height:12px;left:16px;top:16px;margin:0;border:1px solid #d1faff;border-radius:50%;background:#60e6ff;box-shadow:0 0 0 5px #60e6ff26,0 0 20px #3ddfff}
#geographicMap .geo-city-button .pin:before{width:24px;height:24px}
#geographicMap .geo-city-button .tag{pointer-events:auto;top:41px;left:22px;transform:translateX(-50%);font-size:11px;line-height:1.3;letter-spacing:0;padding:7px 11px;min-width:48px;text-align:center}
#geographicMap .geo-city-button[data-city="dammam"] .tag{top:auto;bottom:40px}
#geographicMap .geo-city-button[data-city="second"] .tag{top:auto;bottom:40px;left:-2px;transform:translateX(-100%)}
#geographicMap .geo-city-button.active .pin{background:#fff;box-shadow:0 0 0 6px #fff3,0 0 25px #61e6ff}
#geographicMap .geo-city-button:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:50%}
#geographicMap .geo-country-anchor{pointer-events:none!important}
#geographicMap .geo-country-text{width:190px;height:28px;text-align:center;font-size:11px;color:#ffffffe0;letter-spacing:.10em;text-shadow:0 1px 5px #000,0 0 12px #000;font-weight:700;pointer-events:none}
html[lang="ar"] #geographicMap .geo-country-text{letter-spacing:0;font-size:12px}
.geo-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,#03101885,transparent 15%,transparent 85%,#03101844),radial-gradient(ellipse at center,transparent 52%,#03101850 100%)}
.geographic-map .mapHint{z-index:2;pointer-events:none;font-size:10px}
.geographic-map .mapCaption{z-index:2;left:12px;right:12px;bottom:12px;width:max-content;max-width:calc(100% - 24px);font-size:8px;line-height:1.4;color:#d4e0e4;pointer-events:none}
.geo-controls{position:absolute;z-index:3;left:12px;top:12px;display:flex;flex-direction:column;border:1px solid #67e4ff55;border-radius:10px;background:#041119e0;overflow:hidden}
.geo-controls button{width:36px;height:36px;background:none;border:0;color:#fff;font-size:21px;cursor:pointer}
.geo-controls button+button{border-top:1px solid #67e4ff33}
.geo-controls button:hover,.geo-controls button:focus-visible{background:#194957}
.rtl .geo-controls{left:auto;right:12px}
@media(min-width:981px){.hero{grid-template-columns:minmax(190px,.7fr) minmax(0,1.7fr) minmax(205px,.8fr)}}
@media(min-width:701px) and (max-width:980px){.geographic-map{height:630px;min-height:0}}
@media(max-width:700px){.geographic-map{height:470px;min-height:470px;width:100%}.geographic-map .geo-country-text{font-size:10px}.geographic-map .mapCaption{font-size:7px}#geographicMap .geo-city-button .tag{font-size:10px;padding:6px 9px}}
@media(prefers-reduced-motion:reduce){#geographicMap .pin:before{animation:none}}