:root {
  --bg: #07111f;
  --surface: rgba(12, 20, 38, 0.9);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --accent: #d4932a;
  --text: #eef2ff;
  --muted: #b6c0dc;
  --border: rgba(255, 255, 255, 0.09);
}


@font-face {
  font-family: 'Comfortaa';
  src: local('Comfortaa Regular'),
       url('../Fonts/Comfortaa-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Comfortaa';
  src: local('Comfortaa Bold'),
       url('../Fonts/Comfortaa-Bold.ttf') format('truetype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Comfortaa';
  src: local('Comfortaa Light'),
       url('../Fonts/Comfortaa-Light.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

body {
  color: var(--text);
  background: #c6eff7;
  -webkit-text-stroke: 0.6px currentColor; 
background: linear-gradient(45deg, rgba(198, 239, 247, 1) 0%, rgba(176, 219, 233, 1) 50%, rgba(123, 189, 209, 1) 100%);
}

.contact-page {
  display: table;
  border-spacing: 0.15rem;
  margin: 0 auto;
  position: relative;
  z-index: 0;
  padding: 15%;
  text-align: left;
  font-family: 'Comfortaa', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  width: min(65%);
  color: black;
}

.contact-page img {
  width: clamp(28px, 8vw, 70px);
  height: auto;
  object-fit: contain;
}

.contact-page td {
  vertical-align: middle;
  padding: 0.35rem 0.5rem;
  font-size: clamp(18px, 2.5vw, 25px);
  word-break: break-word;
  text-align: center
}

.contact-page td:first-child {
  text-align: center;
}

@media (max-width: 700px) {
  .contact-page {
    display: block;
    margin: 0 auto;
    width: min(100%, 600px);
    padding-top: 55%;
    border-spacing: 0.8rem;
  }
  .contact-page tr {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
  }

  .contact-page td:last-child {
    flex: 1 1 auto;
    text-align: left;
    font-size: clamp(16px, 4vw, 20px);
  }
  .contact-page img {
    width: clamp(24px, 18vw, 60px);
  }
}