@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap");
:root {
  --layout-spacing: 1.5rem;
}

@media (min-width: 992px) {
  :root {
    --layout-spacing: 2rem;
  }
}
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

.font-display {
  font-size: 48px;
  line-height: 120%;
  font-weight: 700;
  letter-spacing: -0.0015em;
}
@media (max-width: 768px) {
  .font-display {
    font-size: 32px;
    line-height: 125%;
  }
}
[dir=rtl] .font-display {
  font-size: 2.45rem;
  line-height: 125%;
  letter-spacing: 0 !important;
}
@media (max-width: 768px) {
  [dir=rtl] .font-display {
    font-size: 1.813rem;
    line-height: 140%;
  }
}

h1 {
  font-size: 3rem;
  line-height: 80%;
  font-weight: 700;
}
@media (max-width: 768px) {
  h1 {
    font-size: 20px;
    line-height: 28px;
  }
}
[dir=rtl] h1 {
  font-size: 2.94rem;
  line-height: 80%;
  letter-spacing: 0 !important;
}
@media (max-width: 768px) {
  [dir=rtl] h1 {
    font-size: 19.6px;
    line-height: 28px;
  }
}

h2 {
  font-size: 2rem;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.002em;
}
@media (max-width: 768px) {
  h2 {
    font-size: 1.5rem;
    line-height: 26px;
  }
}
[dir=rtl] h2 {
  font-size: 1.96rem;
  line-height: 34px;
  letter-spacing: 0 !important;
}
@media (max-width: 768px) {
  [dir=rtl] h2 {
    font-size: 1.47rem;
    line-height: 26px;
  }
}

h3 {
  font-size: 1.5rem;
  line-height: 120%;
  font-weight: 700;
  letter-spacing: -0.002em;
}
@media (max-width: 768px) {
  h3 {
    font-size: 1.25rem;
    line-height: 135%;
  }
}
[dir=rtl] h3 {
  font-size: 1.47rem;
  line-height: 120%;
  letter-spacing: 0 !important;
}
@media (max-width: 768px) {
  [dir=rtl] h3 {
    font-size: 1.225rem;
    line-height: 135%;
  }
}

h4 {
  font-size: 1.125rem;
  line-height: 145%;
  font-weight: 700;
  letter-spacing: -0.002em;
}
@media (max-width: 768px) {
  h4 {
    font-size: 1rem;
    line-height: 145%;
  }
}
[dir=rtl] h4 {
  font-size: 1.1025rem;
  line-height: 145%;
  letter-spacing: 0 !important;
}
@media (max-width: 768px) {
  [dir=rtl] h4 {
    font-size: 0.98rem;
    line-height: 145%;
  }
}

p.font-large {
  font-size: 1.25rem;
  line-height: 140%;
  font-weight: 500;
  letter-spacing: 0.0185em;
}
@media (max-width: 768px) {
  p.font-large {
    font-size: 1.125rem;
    line-height: 25px;
  }
}
[dir=rtl] p.font-large {
  font-size: 1.225rem;
  line-height: 140%;
  letter-spacing: 0 !important;
}
@media (max-width: 768px) {
  [dir=rtl] p.font-large {
    font-size: 1.1025rem;
    line-height: 25px;
  }
}

p {
  font-size: 1.125rem;
  line-height: 136%;
  font-weight: 500;
  letter-spacing: -0.001em;
}
@media (max-width: 768px) {
  p {
    font-size: 16px;
    line-height: 26px;
  }
}
[dir=rtl] p {
  font-size: 1.1025rem;
  line-height: 136%;
  letter-spacing: 0 !important;
}
@media (max-width: 768px) {
  [dir=rtl] p {
    font-size: 15.68px;
    line-height: 26px;
  }
}

p.font-small {
  font-size: 1rem;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -0.0001em;
}
@media (max-width: 768px) {
  p.font-small {
    font-size: 15px;
    line-height: 1.4;
  }
}
[dir=rtl] p.font-small {
  font-size: 0.98rem;
  line-height: 26px;
  letter-spacing: 0 !important;
}
@media (max-width: 768px) {
  [dir=rtl] p.font-small {
    font-size: 14.7px;
    line-height: 25px;
  }
}

p.font-xsmall {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
@media (max-width: 768px) {
  p.font-xsmall {
    font-size: 14px;
    line-height: 24px;
  }
}
[dir=rtl] p.font-xsmall {
  font-size: 13.72px;
  line-height: 24px;
  letter-spacing: 0 !important;
}
@media (max-width: 768px) {
  [dir=rtl] p.font-xsmall {
    font-size: 13.72px;
    line-height: 24px;
  }
}

p.font-xxsmall {
  font-size: 13px;
  line-height: 23px;
  font-weight: 500;
  letter-spacing: 0.025em;
}
@media (max-width: 768px) {
  p.font-xxsmall {
    font-size: 13px;
    line-height: 23px;
  }
}
[dir=rtl] p.font-xxsmall {
  font-size: 12.74px;
  line-height: 23px;
  letter-spacing: 0 !important;
}
@media (max-width: 768px) {
  [dir=rtl] p.font-xxsmall {
    font-size: 12.74px;
    line-height: 23px;
  }
}

body {
  width: 100%;
  overflow-x: hidden;
  font-family: "NotionInter", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.125rem;
  line-height: 136%;
  font-weight: 500;
  letter-spacing: -0.001em;
}
@media (max-width: 768px) {
  body {
    font-size: 16px;
    line-height: 26px;
  }
}
[dir=rtl] body {
  font-size: 1.1025rem;
  line-height: 136%;
  letter-spacing: 0 !important;
}
@media (max-width: 768px) {
  [dir=rtl] body {
    font-size: 15.68px;
    line-height: 26px;
  }
}
body {
  color: hsl(216, 22%, 18%);
  background-color: hsl(220, 13%, 96%);
  margin: 0;
  padding: 0;
  position: relative;
  background-position: top center;
  background-repeat: no-repeat;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
}
a.underline {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  white-space: nowrap;
}

a:hover, a:focus, a:active {
  color: inherit;
}

button {
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

[dir=rtl] body {
  font-family: "Cairo", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 20;
  transition: background-color 0.25s ease;
}
.site-header.is-scrolled {
  background: #113c6e;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--layout-spacing);
  min-height: 4rem;
}
@media (min-width: 48em) {
  .site-header__inner {
    min-height: 4.5rem;
  }
}
@media (min-width: 64em) {
  .site-header__inner {
    max-width: 75rem;
    margin-inline: auto;
    padding-inline: 2.5rem;
  }
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
}
.site-header__logo img {
  width: auto;
  height: 1.875rem;
}
@media (min-width: 64em) {
  .site-header__logo img {
    height: 2.125rem;
  }
}
.site-header__wordmark {
  margin-inline-start: 0.625rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: hsl(0, 0%, 100%);
}
.site-header__nav {
  display: none;
}
.site-header__nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: hsla(0, 0%, 100%, 0.82);
  transition: color 0.18s ease;
}
.site-header__nav a:hover {
  color: hsl(0, 0%, 100%);
}
.site-header__nav a:focus-visible {
  outline: 2px solid hsl(0, 0%, 100%);
  outline-offset: 3px;
  border-radius: 3px;
}
@media (min-width: 48em) {
  .site-header__nav {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
}
@media (min-width: 64em) {
  .site-header__nav {
    gap: 2.5rem;
  }
}
@media (max-width: 47.9975em) {
  .site-header.is-open .site-header__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    padding: 1.25rem var(--layout-spacing) 1.5rem;
    background: hsl(212, 72%, 22%);
    box-shadow: 0 20px 32px -18px hsla(0, 0%, 0%, 0.55);
  }
  .site-header.is-open .site-header__nav a {
    font-size: 1rem;
  }
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}
.nav-toggle:focus-visible {
  outline: 2px solid hsl(0, 0%, 100%);
  outline-offset: 3px;
  border-radius: 3px;
}
@media (min-width: 48em) {
  .nav-toggle {
    display: none;
  }
}

.site-header.is-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.is-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
.site-header.is-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.5rem;
  height: 3rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background-color: hsl(211, 100%, 53%);
  color: hsl(0, 0%, 100%);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background-color: hsl(211, 90%, 47%);
  color: hsl(0, 0%, 100%);
}

.btn--ghost {
  background-color: hsla(0, 0%, 100%, 0.07);
  color: hsl(0, 0%, 100%);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background-color: hsla(0, 0%, 100%, 0.14);
  color: hsl(0, 0%, 100%);
}

.btn--sm {
  height: 2.375rem;
  padding: 0 1.125rem;
  font-size: 0.9375rem;
  border-radius: 0.625rem;
}

.btn--block {
  width: 100%;
}

.c-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--c-icon) center/contain no-repeat;
  mask: var(--c-icon) center/contain no-repeat;
}
[dir=rtl] .c-icon--arrow-circle {
  transform: scaleX(-1);
}

.c-icon--card {
  --c-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M2.99956 9.29986H20.9996M6.59956 13.4999H9.59956M4.80002 5.10001H19.1996C20.5251 5.10001 21.5996 6.17369 21.5996 7.49914L21.5999 16.501C21.5999 17.8265 20.5254 18.9 19.1999 18.9L4.80026 18.8998C3.47481 18.8998 2.40032 17.8254 2.40028 16.4999L2.40002 7.50008C2.39999 6.17457 3.47451 5.10001 4.80002 5.10001Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");
}

.c-icon--coupon {
  --c-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M19.5 12.5C19.5 11.12 20.62 10 22 10V9C22 5 21 4 17 4H7C3 4 2 5 2 9V9.5C3.38 9.5 4.5 10.62 4.5 12C4.5 13.38 3.38 14.5 2 14.5V15C2 19 3 20 7 20H17C21 20 22 19 22 15C20.62 15 19.5 13.88 19.5 12.5Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M10 4L10 20' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='5 5'/%3E %3C/svg%3E");
}

.c-icon--copy {
  --c-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M1.04169 13.667V10.4997C1.04173 8.77153 1.38346 7.39912 2.30796 6.47462C3.23246 5.55012 4.60487 5.20839 6.33303 5.20834H8.83303C9.17821 5.20834 9.45803 5.48817 9.45803 5.83334C9.45803 6.17852 9.17821 6.45834 8.83303 6.45834H6.33303C4.7282 6.45839 3.76716 6.783 3.19175 7.35841C2.61635 7.93381 2.29173 8.89486 2.29169 10.4997V13.667C2.29173 15.2718 2.61635 16.2329 3.19175 16.8083C3.76716 17.3837 4.7282 17.7083 6.33303 17.7083H9.50035C11.1052 17.7083 12.0662 17.3837 12.6416 16.8083C13.217 16.2329 13.5416 15.2718 13.5417 13.667V11.167C13.5417 10.8218 13.8215 10.542 14.1667 10.542C14.5119 10.542 14.7917 10.8218 14.7917 11.167V13.667C14.7916 15.3952 14.4499 16.7676 13.5254 17.6921C12.6009 18.6166 11.2285 18.9583 9.50035 18.9583H6.33303C4.60487 18.9583 3.23246 18.6166 2.30796 17.6921C1.38346 16.7676 1.04173 15.3952 1.04169 13.667Z' fill='%23292D32'/%3E %3Cpath d='M8.59406 5.25553C8.82759 5.15883 9.09648 5.21271 9.27521 5.39144L14.6089 10.7251C14.7874 10.9038 14.8406 11.1728 14.744 11.4063C14.6472 11.6395 14.4195 11.7919 14.167 11.792H11.5001C10.4656 11.792 9.57693 11.6273 8.97491 11.0254C8.37293 10.4234 8.20833 9.53472 8.20831 8.50016V5.83333C8.20831 5.58055 8.36051 5.35227 8.59406 5.25553ZM9.45831 8.50016C9.45833 9.46543 9.6274 9.9103 9.8587 10.1416C10.0901 10.3728 10.535 10.542 11.5001 10.542H12.6582L9.45831 7.34212V8.50016Z' fill='%23292D32'/%3E %3Cpath d='M13 1.04166C13.3452 1.04166 13.625 1.32148 13.625 1.66666C13.625 2.01183 13.3452 2.29166 13 2.29166H9.66669C9.32151 2.29166 9.04169 2.01183 9.04169 1.66666C9.04169 1.32148 9.32151 1.04166 9.66669 1.04166H13Z' fill='%23292D32'/%3E %3Cpath d='M5.20831 4.16666C5.20831 2.43815 6.6048 1.04166 8.33331 1.04166H10.5167C10.8619 1.04171 11.1417 1.32151 11.1417 1.66666C11.1417 2.0118 10.8619 2.2916 10.5167 2.29166H8.33331C7.29516 2.29166 6.45831 3.1285 6.45831 4.16666C6.45831 4.51183 6.17849 4.79166 5.83331 4.79166C5.48814 4.79166 5.20831 4.51183 5.20831 4.16666Z' fill='%23292D32'/%3E %3Cpath d='M17.7079 11.8253V6.66666C17.7079 6.3216 17.9879 6.04185 18.3329 6.04166C18.6781 6.04166 18.9579 6.32148 18.9579 6.66666V11.8253C18.9578 13.462 17.6284 14.7917 15.9916 14.7917C15.6465 14.7917 15.3666 14.5118 15.3666 14.1667C15.3666 13.8215 15.6465 13.5417 15.9916 13.5417C16.938 13.5417 17.7078 12.7717 17.7079 11.8253Z' fill='%23292D32'/%3E %3Cpath d='M13.0941 1.08888C13.3276 0.992176 13.5965 1.04605 13.7752 1.22478L18.7752 6.22478C18.9539 6.40352 19.0078 6.6724 18.9111 6.90594C18.8144 7.13948 18.5861 7.29168 18.3333 7.29168H15.8333C14.8612 7.29168 14.0143 7.13767 13.4383 6.5617C12.8623 5.98572 12.7083 5.1388 12.7083 4.16668V1.66668C12.7083 1.41389 12.8605 1.18562 13.0941 1.08888ZM13.9583 4.16668C13.9583 5.06955 14.1168 5.47263 14.3221 5.67791C14.5274 5.88318 14.9304 6.04168 15.8333 6.04168H16.8245L13.9583 3.17547V4.16668Z' fill='%23292D32'/%3E %3C/svg%3E");
}

.c-icon--info {
  --c-icon: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M7.5 7.5L7.5 10.3125M7.5 5.41534V5.39062M1.875 7.5C1.875 4.3934 4.3934 1.875 7.5 1.875C10.6066 1.875 13.125 4.3934 13.125 7.5C13.125 10.6066 10.6066 13.125 7.5 13.125C4.3934 13.125 1.875 10.6066 1.875 7.5Z' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");
}

.c-icon--shield {
  --c-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M9.60005 11.5751L11.4 13.3751L15.0001 9.77508M4.80005 6.17508L10.3901 3.38006C11.4036 2.87331 12.5965 2.87331 13.61 3.38006L19.2001 6.17508C19.2001 6.17508 19.2001 10.4311 19.2001 13.2031C19.2001 15.9751 16.6377 17.8463 12 20.7751C7.36245 17.8463 4.80005 15.3751 4.80005 13.2031V6.17508Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");
}

.c-icon--clock-check {
  --c-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M14.875 14.25L11.5 13.125V8.42087M20.5 12C20.5 7.02944 16.4706 3 11.5 3C6.52944 3 2.5 7.02944 2.5 12C2.5 16.9706 6.52944 21 11.5 21C12.0768 21 12.6409 20.9457 13.1875 20.8421M15.4375 18.1875L17.125 19.875L21.625 15.375' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");
}

.c-icon--arrow-circle {
  --c-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M13.1431 7.62241C12.9221 7.35724 12.528 7.32141 12.2628 7.54239C11.9977 7.76336 11.9618 8.15747 12.1828 8.42264L12.6629 8.02252L13.1431 7.62241ZM15.9775 12L16.4577 12.4001C16.6508 12.1684 16.6508 11.8317 16.4577 11.5999L15.9775 12ZM12.1828 15.5774C11.9618 15.8426 11.9977 16.2367 12.2628 16.4577C12.528 16.6786 12.9221 16.6428 13.1431 16.3776L12.6629 15.9775L12.1828 15.5774ZM8.02253 11.375C7.67735 11.375 7.39753 11.6548 7.39753 12C7.39753 12.3452 7.67735 12.625 8.02253 12.625V12L8.02253 11.375ZM12.6629 8.02252L12.1828 8.42264L15.4974 12.4001L15.9775 12L16.4577 11.5999L13.1431 7.62241L12.6629 8.02252ZM15.9775 12L15.4974 11.5999L12.1828 15.5774L12.6629 15.9775L13.1431 16.3776L16.4577 12.4001L15.9775 12ZM15.9775 12V11.375L8.02253 11.375L8.02253 12V12.625L15.9775 12.625V12ZM18.364 5.63604L17.922 6.07798C21.1927 9.34862 21.1927 14.6514 17.922 17.922L18.364 18.364L18.8059 18.8059C22.5647 15.0471 22.5647 8.95289 18.8059 5.1941L18.364 5.63604ZM18.364 18.364L17.922 17.922C14.6514 21.1927 9.34862 21.1927 6.07798 17.922L5.63604 18.364L5.1941 18.8059C8.95289 22.5647 15.0471 22.5647 18.8059 18.8059L18.364 18.364ZM5.63604 18.364L6.07798 17.922C2.80734 14.6514 2.80734 9.34862 6.07798 6.07798L5.63604 5.63604L5.1941 5.1941C1.4353 8.95289 1.4353 15.0471 5.1941 18.8059L5.63604 18.364ZM5.63604 5.63604L6.07798 6.07798C9.34862 2.80734 14.6514 2.80734 17.922 6.07798L18.364 5.63604L18.8059 5.1941C15.0471 1.4353 8.95289 1.4353 5.1941 5.1941L5.63604 5.63604Z' fill='black'/%3E %3C/svg%3E");
}

.c-icon--tick-circle {
  --c-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M7.75 12L10.58 14.83L16.25 9.17004' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");
}

.site-footer {
  background: linear-gradient(180deg, hsl(212, 76%, 21%) 0%, hsl(212, 89%, 11%) 100%);
  color: hsl(0, 0%, 100%);
  padding: 2.25rem 1.25rem 2.5rem;
}
@media (min-width: 48em) {
  .site-footer {
    padding: 3rem 2rem 2.5rem;
  }
}
@media (min-width: 64em) {
  .site-footer {
    padding: 4rem 2.5rem 3rem;
  }
}
.site-footer__inner {
  max-width: 33rem;
  margin-inline: auto;
}
@media (min-width: 48em) {
  .site-footer__inner {
    max-width: none;
  }
}
@media (min-width: 64em) {
  .site-footer__inner {
    max-width: 70rem;
  }
}
@media (min-width: 64em) {
  .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 6rem;
    align-items: start;
  }
}
.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 64em) {
  .site-footer__top {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: hsl(0, 0%, 100%);
}
.site-footer__brand img {
  height: 1.75rem;
  width: auto;
}
.site-footer__brand span {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.site-footer__lang {
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  background: hsla(0, 0%, 100%, 0.12);
  color: hsl(0, 0%, 100%);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.18s ease;
}
.site-footer__lang:hover {
  background: hsla(0, 0%, 100%, 0.18);
}
.site-footer__lang:focus-visible {
  outline: 2px solid hsl(0, 0%, 100%);
  outline-offset: 2px;
}
.site-footer__cols {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}
@media (min-width: 48em) {
  .site-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
@media (min-width: 64em) {
  .site-footer__cols {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    display: flex;
    flex-direction: row;
    gap: 5rem;
  }
}
.site-footer__copy {
  margin: 3rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: hsla(0, 0%, 100%, 0.66);
}
@media (min-width: 48em) {
  .site-footer__copy {
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid hsla(0, 0%, 100%, 0.1);
    text-align: start;
  }
}
@media (min-width: 64em) {
  .site-footer__copy {
    grid-column: 1/-1;
    grid-row: 2;
  }
}

.footer-col__title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: hsl(0, 0%, 100%);
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.footer-col a {
  font-size: 0.875rem;
  color: hsla(0, 0%, 100%, 0.6);
  transition: color 0.18s ease;
}
.footer-col a:hover {
  color: hsla(0, 0%, 100%, 0.9);
}
@media (min-width: 64em) {
  .footer-col a {
    font-size: 0.9375rem;
  }
}