@font-face {
  font-family: Albra;
  src:
    url(../fonts/mdO66UXrumiT.woff2) format("woff2"),
    url(../fonts/Wvi5xrcMJJec.woff) format("woff"),
    url(../images/ra4M3BRWWDFi.svg#AlbraSemi) format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Izmir;
  src:
    url(../fonts/ucuAuXwgdCEz.woff2) format("woff2"),
    url(../fonts/e2VtKsCMtSZV.woff) format("woff"),
    url(../images/jJnF38ESW2oj.svg#Izmir-Bold) format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Izmir;
  src:
    url(../fonts/vsTCXdMa94IV.woff2) format("woff2"),
    url(../fonts/x4cNhuTbpwzO.woff) format("woff"),
    url(../images/ia1UtAzWAEfk.svg#Izmir-Regular) format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Izmir;
  src:
    url(../fonts/nqdPsP0YIrMX.woff2) format("woff2"),
    url(../fonts/Jm1N3p7ChjQ0.woff) format("woff"),
    url(../images/vBrstSGcG4fi.svg#Izmir-Medium) format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Izmir;
  src:
    url(../fonts/8isahjlIo5Re.woff2) format("woff2"),
    url(../fonts/cbx5i4l1iaEd.woff) format("woff"),
    url(../images/sjGCU9TBvHvH.svg#Izmir-Semibold) format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --color-accent: #272f3f;
  --color-text: #7d8aa8;
}

html,
body {
  min-height: 100vh;
  background-color: #fff;
  font-family: Izmir, sans-serif;
  font-size: 1rem;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: none;
  background: 0 0;
  cursor: pointer;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 2.875rem;
  gap: 2.3rem;
}

.cta-button {
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 2.3em;
  color: #ffffff;
  height: 2.75rem;
  background: #15a900;
  box-shadow: 0 2px #0d6501;
  border-radius: 0.875rem;
  padding: 0 1rem;
  transition: all 0.2s;
}

.cta-button strong {
  font-weight: 700;
}

.cta-button:hover {
  box-shadow: 0 3px #073500;
  transform: translateY(-1px);
}

.cta .watch-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  font-size: 1rem;
  color: var(--color-text);
  transition: all 0.2s;
}

.cta .watch-button svg {
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
  color: inherit;
}

.cta .watch-button span {
  font-weight: 500;
  font-size: 1rem;
  line-height: 1em;
}

.cta .watch-button:hover {
  color: var(--color-accent);
  transform: translateY(-1px);
}

@media screen and (max-width: 720px) {
  .cta {
    flex-direction: column;
    gap: 1.25rem;
  }
}