/* SawaHost Placeholder Page (light, simple) */
:root {
  --brand: #2D3C58;
  /* SawaHost deep slate */
  --brand-blue: #2B67D1;
  /* Sawa-ish blue */
  --bg: #fcfcff;
  /* light background */
  --text: #2B2F3A;
  --muted: #727586;
  --card: #FFFFFF;
  --stroke: #E5E7EF;
  --accent: #FFA92C;
  /* Orange */
  --container: min(1140px, 94vw);
  --nav-h: 72px;
}

.iconbox-icon-container {
  background-color: #FFFFFF;
  font-size: 60px;
  border-radius: 25px;
  width: 100px;
  height: 100px;
  color: var(--e-global-color-secondary);
  box-shadow: 0px 20px 55px 0px rgba(185, 208, 250, 0.29);
  padding: 20px;
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.nav {
  min-height: 70px;
  height: var(--nav-h);
  background: #fff;
  border-bottom: 1px solid #EEF1F8;
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--brand)
}

.nav-logo img {
  height: 32px;
  display: block
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px
}

.btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--accent), #FD982B);
  color: #ffffff;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  box-shadow: none;
}

.content {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  text-align: center;
  width: var(--container);
  background: url('map.png') center/contain no-repeat;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
}
@media (max-width: 720px) {
  .card {
    background: url('map.png') center/cover no-repeat;
    padding: 20px;
    height: 40%;
  }  
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  margin: 0 auto 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #0151AA;
  background: #0151AA15;
  border: 1px solid #0151AA;
  border-radius: 999px;
}

.art {
  width: min(650px, 90%);
  margin: 0 auto 12px;
  display: flex;
  justify-content: center
}

.art svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto
}

.art img {
  width: 300px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto
}

/* Hide inline SVG icon when swapping to image */
.art .iconbox-icon-container {
  display: none
}

.h1 {
  margin: 8px 0 6px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .1px
}

.h1 .grad {
  background: linear-gradient(90deg, #2B67D1 0%, #FFA92C 65%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.lead {
  margin: 0 auto;
  color: var(--muted);
  max-width: 560px
}

.links {
  margin: 24px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  color: #ffffff;
  background: linear-gradient(90deg, var(--accent), #FD982B);
  box-shadow: none;
}

.link {
  font-weight: 700;
  font-size: 14px;
  color: var(--brand);
  text-decoration: none
}

.link:hover {
  color: var(--accent);
  text-decoration: underline
}

.footer {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px
}

.copy {
  color: #8a8fa3;
  font-size: 13px;
  margin: 0
}

@media (max-width:580px) {

  .h1,
  .lead,
  .links {
    width: 86%
  }

  .card {
    align-items: center
  }

  .h1 {
    margin-left: auto;
    margin-right: auto
  }

  .links {
    margin-left: auto;
    margin-right: auto
  }
}