@charset "UTF-8";
@font-face {
  font-family:InterVariable;
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/InterVariable.woff2)format("woff2")
}
@font-face {
  font-family:InterVariable;
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url(/InterVariable-Italic.woff2)format("woff2")
}
* {
  box-sizing:border-box
}
html {
  font-size:100%
}
@media(min-width:400px) {
  html {
    font-size:120%
  }
}
@media(min-width:700px) {
  html {
    font-size:150%
  }
}
body {
  font-family: 'Tajawal', sans-serif; 
  font-weight:500;
  font-optical-sizing:auto;
  line-height:1.5;
  margin:0;
  min-height:99vh;
  color:#fff;
  background:#285995;
  background:radial-gradient(at center top,#3477c8 0%,#13417b 75%)
}
main {
  padding:0 1rem;
  min-height:calc(100vh - 21.2rem)
}
@media(max-width:70rem) {
  main {
    min-height:calc(100vh - 25rem)
  }
}
main p,
main ul,
main ol {
  max-width:36rem;
  margin:1em auto;
  line-height:1.5
}
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  max-width:36rem;
  margin:1.5em auto 1em;
  line-height:1.2
}
hr {
  max-width:36rem;
  border:0;
  border-top:1px solid #ddd;
  margin:1rem auto
}
ol:not(.breadcrumb-ol) {
  counter-reset:list-number;
  text-align:left;
  margin:0 auto;
  padding:0 0 0 5rem
}
ol:not(.breadcrumb-ol) li {
  position:relative;
  list-style-type:none;
  padding:1rem;
  display: flex;
  align-items: center
}
ol:not(.breadcrumb-ol) li:before {
  counter-increment:list-number;
  content:counter(list-number);
  position:absolute;
  left:-5rem;
  top:0;
  margin:1rem;
  width:4rem;
  height:4rem;
  height: 3rem; 
  line-height: 3rem; 
  font-size:1.5rem;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-color:#0d2c54;
  border-radius:50%;
  color:#fff
}
ol:not(.breadcrumb-ol) li p {
  width:100%
}
ol:not(.breadcrumb-ol) li strong {
  font-size:1.3rem
}
html[dir=rtl] ol:not(.breadcrumb-ol) {
  padding:0 5rem 0 0
}
html[dir=rtl] ol:not(.breadcrumb-ol) li {
  text-align:right
}
html[dir=rtl] ol:not(.breadcrumb-ol) li:before {
  right:-5rem;
  left:100%
}
@media(max-width:30rem) {
  ol:not(.breadcrumb-ol) {
    padding:0 0 0 3rem
  }
  ol:not(.breadcrumb-ol) li:before {
    left:-3.5rem;
    width:3rem;
    height:3rem
  }
  html[dir=rtl] ol:not(.breadcrumb-ol) {
    padding:0 3rem 0 0
  }
  html[dir=rtl] ol:not(.breadcrumb-ol) li:before {
    right:-3.5rem
  }
}
a,
a:link {
  color:inherit;
  border-radius:.3rem
}
a:visited {
  color:inherit
}
a:hover,
a:active {
  color:inherit;
  background-color:#fff2;
  box-shadow:0 0 0 10px #fff2
}
a:focus {
  background-color:#fff2;
  box-shadow:0 0 0 10px #fff2;
  outline:none
}
.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden
}
main h1 {
  margin-bottom:.6em;
  text-align:center;
  max-width:30rem;
  display:flex;
  justify-content:center;
  gap:1rem;
  align-items:center
}
main h1 a.rss {
  line-height:0
}
main h1+time,
main h1+p,
main h1+p+p {
  text-align:center;
  max-width:30rem;
  display:block;
  margin:1em auto
}
.center {
  text-align:center
}
header {
  display:flex;
  flex-direction:column;
  margin-bottom: 2.5cm
}
header h1 {
  margin:1rem auto;
  text-align:center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  margin-bottom: 0
}
header small {
  display: block;
  font-size: 0.8rem;
  color: #eee; /* لون أفتح */
  margin-top: 0.2rem;
  text-align: center;
}

header p {
  max-width:36rem;
  margin:1rem auto;

  text-align:center
}
header h1 a {
  text-decoration:none;
  text-transform:uppercase;
  font-weight:900;
  display:block;
  height:5rem;
  padding-top:.6em;
  background-image:url(https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg);
  background-position:50%;
  background-size:2.8em 2.8em;
  background-repeat:no-repeat;
  overflow:visible;
  border-radius:1rem
}
header nav {
  width:100%
}
header nav ul {
  display:flex;
  justify-content:center;
  padding:0
}
header nav ul li {
  display:block;
  text-align:center
}
header nav ul li a:link {
  width:10rem;
  margin:0 .4rem;
  padding:.3rem .5rem
}
footer {
  background:#082142;
  padding:1rem;
  margin-top:4rem;
  font-size:.9rem;
  color:#fffa
}
footer p {
  max-width:36rem;
  margin:1rem auto
}
footer nav {
  max-width:36rem;
  margin:1rem auto 2rem
}
footer nav>ul {
  display:grid;
  padding:0;
  justify-items:stretch;
  align-items:stretch;
  gap:.3rem 1rem;
  grid-auto-flow:column;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:1fr 1fr 1fr
}
@media(max-width:50rem) {
  footer nav>ul {
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr 1fr 1fr
  }
}
footer nav>ul li {
  list-style:none;
  min-width:5rem
}
footer nav>ul li a {
  display:inline-block;
  padding:0 .3rem;
  margin:.2rem 0;
  border-radius:.5rem
}
.breadcrumb {
  padding:0 .5rem;
  font-size:.9rem
}
.breadcrumb ol {
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  align-items:end
}
.breadcrumb ol li {
  padding:0;
  margin:0
}
.breadcrumb a,
.breadcrumb a:visited {
  color:#fff
}
.breadcrumb a:hover,
.breadcrumb a:active {
  color:#ff5
}
.breadcrumb li:not(:last-child)::after {
  display:inline-block;
  margin:0 .25rem;
  content:"→"
}
a.btn {
  display:inline-block;
  padding:.6em 2em;
  border-radius:99999px;
  text-decoration:none;
  background-color:#0d2c54;
  color:#fff;
  font-weight:500;
  transition:all .35s cubic-bezier(.17,.89,.32,1.28)
}
a.btn.large {
  margin:1rem 0 0;
  padding:.8rem 2.6rem;
  font-size:1.2em
}
a.btn.btn_mt {
  margin-top:.5rem;
  padding:.3em 1em
}
a.btn:hover {
  box-shadow:0 0 0 3px #fff4
}
a.btn:active {
  transform:scale(.98)
}
.box {
  width:32rem;
  max-width:90%;
  margin:1rem auto;
  padding:.7rem .4rem;
  border-radius:1.5rem;
  background:#bbcfe8;
  color:#000;
  font-weight:600;
  text-align:center
}
.box.box-warning {
  color:#f8e45c;
  background:#08214299;
  border-color:#e2bb0b;
  display:flex;
  text-align:left;
  align-items:center;
  padding:1rem;
  margin:3rem auto 1.5rem
}
.box.box-warning::before {
  content:url(/warning.svg);
  margin:0 1rem 0 .5rem;
  display:block
}
#map {
  margin:1rem auto;
  height:20rem;
  max-width:36rem;
  display:block;
  background-image:url(/map.png);
  background-repeat:no-repeat;
  background-size:100% 100%;
  text-align:center;
  border-radius:1.5rem;
  display:flex;
  align-items:center;
  transition:all 1s cubic-bezier(.17,.89,.32,1.28)
}
#map.loaded {
  max-width:90%;
  height:40rem;
  max-height:90vh
}
#map-overlay {
  margin:0 auto;
  padding:1rem 2rem;
  border-radius:1.5rem;
  max-width:20rem;
  background:#fff;
  color:#1f5496;
  display:inline-block
}
#map-overlay>p {
  font-size:.7rem
}
.maplibregl-popup-anchor-top>div.maplibregl-popup-tip {
  border-bottom-color:#0f325e
}
.maplibregl-popup-anchor-bottom>div.maplibregl-popup-tip {
  border-top-color:#204878
}
.maplibregl-popup-anchor-left>div.maplibregl-popup-tip {
  border-right-color:#163c69
}
.maplibregl-popup-anchor-right>div.maplibregl-popup-tip {
  border-left-color:#163c69
}
.maplibregl-popup-anchor-top-left>div.maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right>div.maplibregl-popup-tip {
  border-bottom-color:#163c69
}
.maplibregl-popup-anchor-bottom-left>div.maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right>div.maplibregl-popup-tip {
  border-top-color:#204878
}
.maplibregl-popup>.maplibregl-popup-content {
  font-size:.6rem;
  font-family:InterVariable,Helvetica,Roboto,sans-serif;
  text-align:initial;
  border-radius:.7rem!important;
  background:#21497a;
  background:linear-gradient(170deg,#0e315c 0%,#21497a 100%);
  color:#fff
}
.maplibregl-popup>.maplibregl-popup-content .maplibregl-popup-close-button {
  color:#fff;
  right:5px!important;
  top:5px!important;
  font-size:1rem
}
.maplibregl-popup>.maplibregl-popup-content a:hover,
.maplibregl-popup>.maplibregl-popup-content a:active,
.maplibregl-popup>.maplibregl-popup-content a:focus {
  text-decoration:underline;
  background:0 0;
  box-shadow:none
}
.maplibregl-popup>.maplibregl-popup-content h3 {
  margin:0 1.5rem .5rem .5rem;
  font-size:1.4em
}
.maplibregl-popup>.maplibregl-popup-content h3 a:link {
  text-decoration:none
}
.maplibregl-popup>.maplibregl-popup-content h3 a:hover,
.maplibregl-popup>.maplibregl-popup-content h3 a:active,
.maplibregl-popup>.maplibregl-popup-content h3 a:focus {
  text-decoration:underline
}
.maplibregl-popup>.maplibregl-popup-content ul {
  margin:0 .5rem;
  padding:0;
  align-items:center;
  column-gap:1rem;
  row-gap:.7rem
}
.maplibregl-popup>.maplibregl-popup-content ul li {
  list-style:none;
  margin:0;
  padding:0
}
.maplibregl-popup>.maplibregl-popup-content p {
  margin-left:.5rem
}
.maplibregl-popup>.maplibregl-popup-content p.pe_icblock:last-of-type {
  margin-bottom:0
}
.maplibregl-control-container .maplibregl-ctrl-top-left {
  left:.5rem;
  top:.5rem
}
.maplibregl-control-container .maplibregl-ctrl-top-right {
  right:.5rem;
  top:.5rem
}
.maplibregl-control-container .maplibregl-ctrl-bottom-left {
  left:.5rem;
  bottom:.5rem
}
.maplibregl-control-container .maplibregl-ctrl-bottom-right {
  right:.5rem;
  bottom:.5rem
}
main>.home {
  text-align:center
}
main>.home h2 {
  margin-top:4rem
}
main>.home h2 strong {
  display:block;
  font-size:3rem
}
@media(min-width:60rem) {
  main>.home h2 strong {
    margin-top:10rem
  }
  main>.home h2 strong:before {
    content:" ";
    margin:-6rem 12.5rem;
    width:7rem;
    height:7rem;
    display:block;
    background-color:#0d2c54;
    border-radius:50%
  }
}
@media(min-width:60rem) {
  main>.home h2 strong.inverted-5-reasons {
    margin-top:0
  }
  main>.home h2 strong.inverted-5-reasons:before {
    margin:-3.5rem 12.5rem
  }
}
main>.home p {
  max-width:30rem
}
main>.home .card {
  margin:4rem auto 6rem;
  padding:1rem 2rem;
  border-radius:3rem;
  max-width:30rem;
  background:#21497a;
  background:linear-gradient(0deg,#21497a 0%,#0e315c 75%)
}
main>.home .homeTeaser {
  font-size:1.5rem;
  margin:2rem auto;
  padding:1rem;
  line-height:1.2
}
main>.home .homeTeaser div {
  max-width:37rem;
  margin:0 auto
}
main>.home .homeTeaser div>img {
  width:100%;
  max-width:30rem;
  height:auto;
  transform:scale(1.1);
  margin:2rem 0 0
}
main>.home .homeTeaser svg {
  width:100%;
  max-width:30rem;
  font-weight:800;
  font-family:InterVariable,Helvetica,Roboto,sans-serif;
  font-size:2rem
}
main>.home .homeTeaser p {
  margin-bottom:1.2em;
  max-width:17em
}
.supporters {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:2rem;
  max-width:33rem;
  margin:3rem auto 1rem;
  justify-content:center
}
.supporters a {
  line-height:0
}
@media(max-width:45rem) {
  .supporters {
    gap:1rem
  }
  .supporters svg {
    max-height:32px
  }
  .supporters a {
    margin-bottom:1rem
  }
}
.search {
  max-width:36rem;
  margin:2.5rem auto 1.5rem
}
.search input {
  width:100%;
  max-width:30rem;
  display:block;
  margin:0 auto;
  padding:.5rem 1rem;
  border:none;
  outline:none;
  border-radius:9999px;
  background:#fff3;
  color:#fff;
  font-size:1rem;
  box-shadow:none
}
.search input:focus {
  outline:2px solid #fff8
}
ul.news,
ul.places,
ul.events {
  overflow-wrap:anywhere;
  margin:1rem auto;
  padding:0
}
ul.news>li,
ul.places>li,
ul.events>li {
  background:#21497a;
  background:linear-gradient(170deg,#0e315c 0%,#21497a 100%);
  list-style:none;
  border-radius:1.5rem;
  padding:1.5rem;
  margin-bottom:1.5rem
}
ul.news>li h3,
ul.places>li h3,
ul.events>li h3 {
  margin-top:0;
  margin-bottom:.5em;
  font-size:1.4em
}
ul.news>li h3 a,
ul.places>li h3 a,
ul.events>li h3 a {
  text-decoration:none
}
ul.news>li ul,
ul.places>li ul,
ul.events>li ul {
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:2rem;
  row-gap:.7rem
}
ul.news>li ul li,
ul.places>li ul li,
ul.events>li ul li {
  list-style:none;
  margin:0;
  padding:0
}
ul.news .pe_icblock,
ul.places .pe_icblock,
ul.events .pe_icblock {
  display:flex;
  gap:.5rem;
  margin-bottom:.5em
}
ul.news .pe_icblock .pe_icon,
ul.news .pe_icblock .pe_content,
ul.news .pe_icblock .pe_content a,
ul.places .pe_icblock .pe_icon,
ul.places .pe_icblock .pe_content,
ul.places .pe_icblock .pe_content a,
ul.events .pe_icblock .pe_icon,
ul.events .pe_icblock .pe_content,
ul.events .pe_icblock .pe_content a {
  display:block
}
@media(min-width:57rem) {
  ul.news .pe_leftright,
  ul.places .pe_leftright,
  ul.events .pe_leftright {
    display:flex
  }
  ul.news .pe_leftright p,
  ul.places .pe_leftright p,
  ul.events .pe_leftright p {
    width:50%
  }
}
span.searchonly {
  display:none;
  aria-hidden:true
}