/* =========================================================
   AKRODENTAL — Design tokens
   ========================================================= */

:root {
  --blue: #0e64ea;
  --blue-dark: #1958ba;
  --blue-mid: #2c7dfb;
  --ink: #25262a;
  --white: #ffffff;
  --tag-border: #d8e5f9;
  --card-blue: #c6dcff;
  --circle: #c0d8ff;
  --menu-blue: #82b3ff;
  --soft: rgba(255, 255, 255, 0.6);

  --font-display: "General Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-tag: "Switzer", "General Sans", sans-serif;

  --gutter: 50px;
  --radius-lg: 40px;
  --radius-md: 32px;
  --radius-sm: 24px;
  --maxw: 1440px;
}

/* =========================================================
   Reset / base
   ========================================================= */

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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-display);
  color: var(--ink);
  background: #fbfcff;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
video {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

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

ul {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}

/* =========================================================
   Shared typography
   ========================================================= */

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.section-title .accent {
  color: var(--blue);
}

.section-title em {
  font-style: italic;
  font-weight: 300;
}

.section-sub {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  opacity: 0.8;
  max-width: 404px;
}

.section-sub.italic {
  font-style: italic;
  font-weight: 300;
}

.tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  border: 1px solid var(--tag-border);
  border-radius: 28px;
  font-family: var(--font-tag);
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
}

.tag--on-blue {
  border-color: var(--white);
  color: #fbfbfc;
}

.tag--on-blue::before {
  background: var(--tag-border);
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 40px;
  padding: 10px 16px;
  border-radius: 28px;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  white-space: nowrap;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--primary {
  background: var(--blue);
  color: var(--white);
  padding-right: 8px;
}

.btn--primary:hover {
  box-shadow: 0 10px 24px -8px rgba(14, 100, 234, 0.6);
}

.btn--outline {
  border: 1px solid var(--blue);
  color: var(--blue);
  background: transparent;
}

.btn--outline:hover {
  background: var(--blue);
  color: var(--white);
}

.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--circle);
  flex: none;
}

/* ---- Animated arrow-in-circle (old slides out right, new slides in from left) ---- */

.icon-anim {
  position: relative;
  overflow: hidden;
}

.icon-anim svg {
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.icon-arrow--in {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(-220%);
}

.icon-arrow--out {
  transform: translateX(0);
}

.btn:hover .icon-arrow--out {
  transform: translateX(220%);
}

.btn:hover .icon-arrow--in {
  transform: translate(-50%, -50%) translateX(0);
}

.glass {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* =========================================================
   Header
   ========================================================= */

/* No frosted bar on the header itself: the blur now lives on two separate
   pills (nav + cta). A fixed height lets the enlarged logo overflow above and
   below the pill line instead of stretching the whole header taller. */

.header {
  position: fixed;
  top: 40px;
  left: var(--gutter);
  right: var(--gutter);
  margin: 0 auto;
  max-width: calc(var(--maxw) - 2 * var(--gutter));
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
  transition: top 0.35s ease;
  will-change: top;
}

.header--hidden {
  top: -160px;
}

.header__logo {
  flex: none;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 16px;
}

/* Box keeps its size; the artwork is zoomed ~20% and the overflow is cropped,
   so the logo inside reads larger without enlarging the header. */

.header__logo img {
  height: 104px;
  width: auto;
  max-width: none;
  transform: scale(1.2);
}

/* Frosted pill on a pseudo-element (not the element itself) so the pill never
   becomes a backdrop root — otherwise the lang menu / mobile dropdown blur
   that lives inside would break. */

.header__pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: -1;
  pointer-events: none;
}

.header__nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 19px 28px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
}

.header__nav a {
  position: relative;
  transition: color 0.2s ease;
}

.header__nav a:hover {
  color: var(--blue);
}

/* Links kept in markup but hidden from the header nav */

.header__nav .nav-hidden {
  display: none;
}

.header__cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 20px;
  border-radius: 999px;
}

.lang {
  position: relative;
}

.lang-picker {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-tag);
  font-size: 14px;
  text-transform: uppercase;
}

.lang-picker svg {
  transition: transform 0.25s ease;
}

.lang.is-open .lang-picker svg {
  transform: rotate(180deg);
}

.lang__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 44px -18px rgba(14, 38, 79, 0.35);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
  z-index: 60;
}

.lang.is-open .lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang__menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.lang__menu button:hover {
  background: var(--tag-border);
  color: var(--blue);
}

.lang__menu button[aria-current="true"] {
  color: var(--blue);
  background: rgba(14, 100, 234, 0.08);
}

/* Below 345px the header row has no space for the picker, so main.js moves
   it into the burger dropdown. There the list expands inline underneath its
   trigger instead of floating over the panel as a menu-inside-a-menu. */

.header__nav .lang {
  position: static;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid rgba(37, 38, 42, 0.12);
}

.header__nav .lang-picker {
  width: 100%;
  justify-content: space-between;
}

.header__nav .lang__menu {
  position: static;
  min-width: 0;
  gap: 4px;
  padding: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transform: none;
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.25s ease,
    margin-top 0.25s ease,
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.header__nav .lang.is-open .lang__menu {
  margin-top: 12px;
  max-height: 320px;
}

.header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
}

.header__burger span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 2px;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

/* Burger morphs into an X while the menu is open */

.header.nav-open .header__burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.header.nav-open .header__burger span:nth-child(2) {
  opacity: 0;
}

.header.nav-open .header__burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* =========================================================
   Hero
   ========================================================= */

/* =========================================================
   Languages
   ========================================================= */

/* =========================================================
   Offer / services
   ========================================================= */

/* =========================================================
   Benefits
   ========================================================= */

/* =========================================================
   Ukraine
   ========================================================= */

/* =========================================================
   Priority / about
   ========================================================= */

/* =========================================================
   FAQ
   ========================================================= */

/* =========================================================
   Join / patients CTA
   ========================================================= */

/* =========================================================
   IKP steps
   ========================================================= */

/* =========================================================
   Footer
   ========================================================= */

/* Grid rather than flex: the tracks stay a true 1 : 1.5 regardless of the
   cards' own padding, which is what keeps these columns lined up with the
   final-cta section above. */

.footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 24px;
  padding: 40px var(--gutter) 0;
}

.footer__info {
  background: var(--menu-blue);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer__map {
  min-height: 460px;
  border: 1px solid var(--blue);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.footer__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer__col-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 16px;
}

.footer__links a:hover {
  text-decoration: underline;
}

.footer__address {
  font-size: 16px;
  font-style: normal;
  line-height: 1.5;
}

/* =========================================================
   Footer bottom
   ========================================================= */

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px var(--gutter);
  font-size: 14px;
}

.footer-bottom__policies {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-bottom__policies a,
.footer-bottom__policies span {
  opacity: 0.8;
}

.footer-bottom__credits {
  opacity: 0.8;
}

.footer-bottom__credits a {
  text-decoration: underline;
}

/* =========================================================
   Modals (forms)
   ========================================================= */

@keyframes modal-fade {
  from {
    opacity: 0;
  }
}

@keyframes modal-pop {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

body.modal-locked {
  overflow: hidden;
}

/* =========================================================
   Responsive — Tablet
   ========================================================= */

@media (max-width: 1100px) {
  :root {
      --gutter: 32px;
    }

  .section-title {
      font-size: 38px;
    }

  .footer {
      grid-template-columns: minmax(0, 1fr);
    }
}

/* Header switches to the mobile (burger) layout early so it never crowds
   on small laptops (~1024px). */

@media (max-width: 1080px) {
  .header__nav {
      display: none;
    }

  .header__nav.is-open {
      display: flex;
      position: absolute;
      top: calc(100% + 12px);
      left: 0;
      right: 0;
      transform: none;
      flex-direction: column;
      gap: 20px;
      padding: 24px;
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 20px 44px -18px rgba(14, 38, 79, 0.25);
    }

  /* Dropdown paints its own frosted background, so drop the pill pseudo. */

  .header__nav.is-open::before {
      display: none;
    }

  .header__burger {
      display: flex;
    }
}

/* =========================================================
   Responsive — Mobile
   ========================================================= */

@media (max-width: 560px) {
  :root {
      --gutter: 16px;
    }

  .section-title {
      font-size: 30px;
    }

  .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
}

/* Phones (≤425px): hero video is not loaded — show the #d9d9d9 fallback */

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  * {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
}

/* =========================================================
   About (O przychodni)
   ========================================================= */

/* =========================================================
   Role cards (services)
   ========================================================= */

/* =========================================================
   Realizowane świadczenia
   ========================================================= */

/* =========================================================
   Join CTA banner
   ========================================================= */

/* Darker blue so the button stands out against the blue CTA background */

/* photo strip — only shown on the stacked mobile layout */

/* =========================================================
   Ways to join (Instrukcja)
   ========================================================= */

/* =========================================================
   Prevention (Profilaktyka)
   ========================================================= */

/* =========================================================
   Funding (Dofinansowanie)
   ========================================================= */

/* =========================================================
   Document lightbox
   ========================================================= */

/* =========================================================
   Responsive additions — new sections
   ========================================================= */

@media (max-width: 560px) {
  .footer__info {
      padding: 32px 24px;
    }

  .footer__map {
      min-height: 320px;
    }
}

/* CTA banner — stacked layout on phones / small tablets so the doctors
   sit in their own strip below the text instead of behind it. */

/* =========================================================
   Stomatologia (Dental) page
   ========================================================= */

/* Hero */

.dhero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 240px var(--gutter) 40px;
}

.dhero__top {
  flex: 0 0 auto;
}

.dhero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.dhero__title-wrap {
  flex: 1 1 auto;
  max-width: 955px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dhero__title {
  font-size: 64px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.dhero__title .accent {
  color: var(--blue);
}

.dhero__aside {
  flex: 0 0 345px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dhero__desc {
  opacity: 0.8;
}

.dhero__aside .btn {
  align-self: flex-start;
}

.dhero__img {
  flex: 1 1 0;
  min-height: 200px;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.dhero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* About */

.dabout {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 80px var(--gutter);
}

.dabout__img {
  flex: 0 0 299px;
  height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.dabout__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dabout__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dabout__title {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.dabout__title .accent {
  color: var(--blue);
}

.dabout__body {
  font-size: 16px;
  line-height: 1.5;
}

.dabout__note {
  font-size: 14px;
  line-height: 1.3;
  opacity: 0.6;
}

/* Cards */

.dcards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 80px var(--gutter);
}

.dcards__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.dcards__head .tag {
  align-self: center;
}

.dcards__title {
  font-size: 48px;
}

.dcards__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.dcard {
  min-height: 341px;
  background: var(--white);
  border: 1px solid #eef2f8;
  border-radius: var(--radius-md);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.dcard__icon img {
  width: 60px;
  height: 60px;
  display: block;
}

.dcard__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dcard__title {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--blue-dark);
}

.dcard__text {
  font-size: 16px;
  line-height: 1.5;
}

/* Final CTA */

/* Same grid as the footer (gutter, 24px gap, 1 : 1.5 split) so the text and
   slider edges line up with the contact card and map below. */

.final-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  align-items: center;
  gap: 24px;
  padding: 80px var(--gutter);
}

/* The shell caps content at --maxw, so the white band is painted by a
   full-viewport pseudo-element to reach both edges of the page. */

.final-cta::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #ffffff;
  z-index: -1;
  pointer-events: none;
}

.final-cta__text {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.final-cta__head {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.final-cta__title {
  font-size: 48px;
}

.final-cta__sub {
  opacity: 0.8;
  max-width: 404px;
}

.final-cta__call {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 60px;
  padding: 10px 8px 10px 24px;
  border-radius: 28px;
  background: var(--blue);
  color: var(--white);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.final-cta__call:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(14, 100, 234, 0.6);
}

.final-cta__call span:first-child {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.final-cta__call-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--circle);
  flex: none;
}

/* Before / after comparison slider */

.ba {
  --pos: 50;
  position: relative;
  aspect-ratio: 790 / 406;
  border-radius: var(--radius-lg);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: ew-resize;
}

.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.ba__before {
  clip-path: inset(0 calc((100 - var(--pos)) * 1%) 0 0);
}

.ba__label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 14px 16px;
  border: 1px solid var(--white);
  border-radius: 28px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  pointer-events: none;
}

.ba__label--before {
  left: 24px;
}

.ba__label--after {
  right: 24px;
}

.ba__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pos) * 1%);
  width: 2px;
  margin-left: -1px;
  background: var(--white);
  pointer-events: none;
}

.ba__handle {
  position: absolute;
  top: 50%;
  left: calc(var(--pos) * 1%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--white);
  border-radius: 50%;
  pointer-events: none;
}

.ba:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* Dental — responsive */

@media (max-width: 1100px) {
  .dhero__title {
      font-size: 52px;
    }

  .dcards__grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 860px) {
  .dhero__top {
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
    }

  .dhero__aside {
      flex-basis: auto;
    }

  .dhero__img {
      min-height: 320px;
    }

  .dabout {
      flex-direction: column;
      align-items: flex-start;
    }

  .dabout__img {
      flex-basis: auto;
      width: 100%;
      max-width: 360px;
      height: 300px;
      align-self: center;
    }

  /* align-items stays `center` from the base rule: stretching a grid item
     whose height comes only from aspect-ratio collapses it to 0 in WebKit,
     and it buys nothing here — a single column already fills the width. */

  .final-cta {
      grid-template-columns: minmax(0, 1fr);
    }

  .dcards__title,
    .dabout__title,
    .final-cta__title {
      font-size: 34px;
    }
}

@media (max-width: 560px) {
  .dhero {
      padding-top: 128px;
    }

  .dhero__title {
      font-size: 38px;
    }

  .dhero__img {
      min-height: 220px;
    }

  .dcards__grid {
      grid-template-columns: 1fr;
    }

  .final-cta__call span:first-child {
      font-size: 17px;
    }
}

/* =========================================================
   Small phones (≤560 / ≤400): keep the header inside the
   viewport and never squish the logo
   ========================================================= */

/* Cookie consent banner must never exceed the viewport width
   (its own overflow widens the layout viewport and pushes the fixed header).
   High specificity (#cc-main + two classes) to beat the library's own rule. */

#cc-main .cm.cm--box {
  max-width: min(440px, calc(100vw - 24px)) !important;
  box-sizing: border-box !important;
}

@media (max-width: 420px) {
  #cc-main .cm.cm--box {
      max-width: 300px !important;
    }
}

@media (max-width: 560px) {
  .header {
      gap: 10px;
      height: 60px;
    }

  .header__logo img {
      height: 76px;
    }

  .header__cta {
      gap: 6px;
      padding: 6px 6px 6px 14px;
    }

  .header__cta .btn--primary {
      gap: 8px;
      padding-left: 12px;
    }
}

@media (max-width: 345px) {
  .header__logo img {
      height: 64px;
    }
}