*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: Arial, sans-serif;
  background:#ECEEEC;
}

.container {
  display: flex;
  flex-direction: row;
  width: 100vw;
  position: relative;
  z-index: 1;
}

.video-side,
.text-side {
  flex: 1 1 50%;
  min-height: 100vh;
}

.video-side {
  position: relative;
}

.video-side video {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  object-fit: cover;
}

.text-side {
  background: #ECEEEC;
  color: #141414;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  padding: 2rem;
}

.content-block {
  max-width: 600px;
  width: 100%;
}

.content-block h1 {
  font-size: 2rem;
  margin: 0;
}

.content-block p {
  margin: 1rem 0 2rem;
  font-size: 1rem;
  color: #141414;
}

.cta-button {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background-color: #00CED1;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #009fa1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-1);
  font-weight: 500;
  font-size: calc(var(--text-size) * 0.35);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  padding: 0 3.6rem;
  height: var(--vspace-btn);
  color: var(--color-btn-text);
  background-color: var(--color-btn);
  border: 2px solid var(--color-btn);
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
}

.btn:hover,
.btn:focus,
.btn:active {
  background-color: var(--color-btn-hover);
  border-color: var(--color-btn-hover);
  color: var(--color-btn-hover-text);
  outline: none;
  text-decoration: none;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.btn-group .btn {
  flex: 1 1 40%;
  min-width: 140px;
  text-align: center;
}

:root {
  --font-1: "Public Sans", sans-serif;
  --font-mono: "Courier New", monospace;
  --color-btn: #000000;
  --color-btn-text: #ffffff;
  --color-btn-hover: #1dafc9;
  --color-btn-hover-text: #ffffff;
  --vspace-btn: 3.2rem;
  --text-size: 2rem;
  --text-sm: 1rem;
  --vspace-1_5: 2.4rem;
  --vspace-0_5: 1.2rem;
  --text-display-1: clamp(3.6rem, 6vw, 6.2rem);
}

h1 {
  font-size: clamp(4.2rem, 8.2vw, 8.8rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: var(--vspace-1_5);
}

h2 {
  font-size: calc(var(--text-size) * 0.65);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: var(--vspace-1_5);
}

.text-display-title {
  font-size: var(--text-display-1);
  line-height: 1.0717;
  letter-spacing: -0.015em;
  margin-top: 0;
  margin-bottom: var(--vspace-1_5);
}

p {
  font-size: var(--text-sm);
  line-height: 1.571;
  letter-spacing: -0.05em;
  font-family: var(--font-1);
}

ul{
  font-size: var(--text-sm);
  line-height: 1.571;
  letter-spacing: -0.05em;
  font-family: var(--font-1);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  z-index: 10;
  animation: fadeOut 1.5s ease-out forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* 📱 Responsive 1024px */
@media (max-width: 1024px) {
  .container {
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  .video-side,
  .text-side {
    width: 100%;
    height: auto;
    min-height: unset;
  }

  .video-side video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
  }

  .text-side {
    padding: 1.5rem;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
  }

  .content-block {
    max-width: 90%;
    width: 100%;
  }

  .content-block h1 {
    font-size: 1.5rem;
  }

  .content-block p {
    font-size: 0.95rem;
  }
}

h1, h2 {
  font-family: "Castoro", serif;
}

p {
  font-family: "applied-sans-pro", sans-serif;
}

/* --- Matches fonts and text styles with the main page for visual coherence --- */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600;700;900&display=swap");

:root {
  --font-strong: "IBM Plex Sans", "Inter", "Segoe UI", system-ui, sans-serif;
}

/* Ensures heading typography matches the main page */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-strong);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #141414;
}