/* The original kit used Font Awesome. Bundle the same glyphs for offline use. */
@font-face {
  font-family: 'FA Solid';
  src: url('../fonts/fa-solid-900.woff2') format('woff2');
}
@font-face {
  font-family: 'FA Brands';
  src: url('../fonts/fa-brands-400.woff2') format('woff2');
}
.fa, .fas, .fab {
  display: inline-block;
  font-family: 'FA Solid';
  font-style: normal;
  line-height: 1;
}
.fab, .fa-instagram { font-family: 'FA Brands'; }
.fa-instagram::before { content: '\f16d'; }
.fa-phone::before { content: '\f095'; }
.fa-bars::before { content: '\f0c9'; }
.fa-times::before { content: '\f00d'; }
.fa-people-arrows::before { content: '\e068'; }
.fa-euro-sign::before { content: '\f153'; }
.fa-briefcase::before { content: '\f0b1'; }
.fa-heart::before { content: '\f004'; }
.fa-dharmachakra::before { content: '\f655'; }
.fa-centos::before { content: '\f789'; }
.fa-stethoscope::before { content: '\f0f1'; }
.fa-tachometer-alt::before { content: '\f3fd'; }
.fa-whatsapp::before { content: '\f232'; }

html { scroll-padding-top: 9rem; }
body.scrolled #connect { background: white; }
body.scrolled #nav { background: #dbc4cc; }
body.scrolled #showcase .container { visibility: hidden; }
#hamburger {
  padding: .45rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}
:focus-visible { outline: 2px solid #44273c; outline-offset: 3px; }
.js-slidein { transform: none; opacity: 1; }
.reveal-ready .js-slidein:not(.show) { opacity: 0; transform: translateY(100px); }
#about .wrapper { display: flow-root; }
.photo, .feedback-photo { height: auto; }

@media (min-width: 1024px) {
  html { scroll-padding-top: 10rem; }
  #feedback .box { width: 100%; max-width: 63rem; }
  #feedback .feedback-photo { width: 45%; max-width: 528px; flex: none; }
}
@media (max-width: 1023px) {
  #nav .menu.open {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(219, 196, 204, .96);
    animation: slideIn 250ms ease-out;
  }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 499px) {
  #connect { justify-content: space-around; gap: .35rem; padding-inline: .4rem; font-size: clamp(.85rem, 3.65vw, 1.1rem); }
  #connect i { font-size: 1.35rem; }
  #connect .fa-instagram { width: 1.45rem; height: 1.45rem; }
  #connect a { white-space: nowrap; }
  #nav h1 { font-size: clamp(1.2rem, 5.8vw, 1.7rem); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
