:root {
  --page-padding-x-sm: 1rem;
  --page-padding-x-lg: 1rem;
  --page-padding-head: 10rem;
  --page-padding-y: 2rem;
  --page-padding-y-grid-spacing: 2.75rem;

  --section-padding: var(--page-padding-y-grid-spacing);
}

html {
  font-size: 12px;
}

@media screen and (min-width: 375px) {
  html {
      font-size: 14px;
  }
}

@media screen and (min-width: 640px) {
  :root {
    --page-padding-x-lg: 5rem;
  }
}

@media screen and (min-width: 768px) {
  html {
      font-size: 14px;
  }
}

@media screen and (min-width: 992px) {
  html {
      font-size: 16px;
  }
}

@media screen and (min-width: 1200px) {
  html {
      font-size: 18px;
  }
}


body {
  background-color: var(--color-bg);
  /* background-color: #000; */
  color: var(--color-text);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-font-height);
}

body:not(.post-type-contact, .post-type-post, .has-hero-heading-split) main {
  padding-top: var(--page-padding-head);
}

/* Utility classes for manual padding control */
.pt-none { padding-top: 0 !important; }
.pt-half { padding-top: calc(var(--section-padding) / 2) !important; }
.pt-full { padding-top: var(--section-padding) !important; }

.pb-none { padding-bottom: 0 !important; }
.pb-half { padding-bottom: calc(var(--section-padding) / 2) !important; }
.pb-full { padding-bottom: var(--section-padding) !important; }

p a,
a.hlink {
  background-color: var(--color-text-link-bg);
  border-radius: .125rem;
  color: var(--color-text-link);
  padding: .3rem .4rem;
  text-decoration: none;
}

a.slink {
  border-radius: .125rem;
  padding: .2rem .4rem;
  text-decoration: none;
}

p a:hover,
a.hlink:hover,
a.slink:hover {
  background-color: var(--color-text-link-bg-hover);
}





.background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.btn {
  font-family: var(--btn-font-family);
  font-weight: var(--btn-font-weight);
  text-transform: var(--btn-text-transform);
  display: inline-block;
  background-color: var(--button-color-bg);
  color: var(--button-color-text);
  border-radius: .25rem;
  user-select: none;
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  word-break: break-all;
}
.btn svg path {
  fill: var(--button-color-text) !important;
  transition: fill 0.2s ease, color 0.2s ease;
}
.btn:hover {
  background-color: var(--button-color-hover-bg);
  color: var(--button-color-hover-text);
  transform: translateY(-1px);
}
.btn:hover svg path {
  fill: var(--button-color-hover-text) !important;
}
@media (pointer: coarse) {
  .btn {
    padding: 0.75rem 1.5rem;
  }
}
.btn-lg {
    padding: 0.75rem 1rem;
    font-family: var(--btn-lg-font-family);
    font-size: var(--btn-lg-font-size);
    line-height: var(--btn-lg-line-height);
    font-weight: var(--btn-lg-font-weight);
    text-transform: var(--btn-lg-text-transform);
}