::-webkit-scrollbar {
  width: 7px;
  -webkit-appearance: none;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  grid-template-columns: [line1] minmax(320px, auto) [line2];
  grid-template-rows: [row1] 120px [row2] 1fr [row3] 10px [row4];
  grid-template-areas: 'header' 'main';
  font: 400 14px/1 Roboto, Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #4b4b4b;
  background-color: white;
}

.menu {
    font-size: 20px;
}

header {
  grid-area: header;
  grid-column: line1 / line2;
  grid-row: row1 / row2;
}

main {
  overflow-y: auto;
  grid-area: main;
  grid-column: line1 / line2;
  grid-row: row2 / row3;
  font-size: 1.125rem;
  line-height: 1.55em;
}

main section {
  padding: 20px;
}

section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

header {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

header section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

header div {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  margin-left: 20px;
  font-size: calc((1.8em + 1.8vw + 1.5vmin) / 2.9);
}

@media only screen and (max-width: 514px) {
  header figure img {
    display: none;
  }
}

footer section {
  justify-content: center;
}

figure {
  display: flex;
  align-items: center;
  margin: 0;
  font: 400 calc(1.8em + 1.8vw + 1.5vmin)/1 Roboto, Arial, Helvetica, sans-serif;
  white-space: nowrap;
  text-transform: uppercase;
}

figcaption {
  margin-left: 1.875rem;
}

figcaption small {
  display: block;
  font-size: calc((1.8em + 1.8vw + 1.5vmin) / 5);
  font-weight: normal;
}

a {
  text-decoration: none;
  color: #4b4b4b;
}

p {
  margin: 0.5rem 0;
  word-break: break-word;
}

.phone {
  line-height: 1.4rem;
}

@media only screen and (max-width: 732px) {
  .phone {
    display: none;
  }
}

.cards {
  display: grid;
  grid-template-columns: minmax(280px, 1fr);
  gap: 20px;
  margin: 2rem 0;
}

.card {
  align-items: center;
  padding: 1.5em;
  border-radius: 1em;
  background: linear-gradient(0deg, rgba(250, 255, 201, 1) 0%, rgba(221, 237, 255, 1) 100%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.card svg {
  max-width: 280px;
}

.ua {
  background: url(assets/ukr.png);
}
.en {
  background: url(assets/eng.png);
}
.fr {
  background: url(assets/frn.png);
}
.it {
  background: url(assets/ita.png);
}

td {
  text-align: center;
}

.lang-menu {
  position: relative;
  justify-content: center;
  height: 62px;
  text-align: right;
}

.lang-menu .selected-lang {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  line-height: 2;
}

.lang-menu .selected-lang:before {
  display: inline-block;
  width: 32px;
  height: 32px;
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
}

.lang-menu .selected-lang.ua:before {
  background-image: url(assets/ukr.png);
}

.lang-menu .selected-lang.en:before {
  background-image: url(assets/eng.png);
}

.lang-menu .selected-lang.fr:before {
  background-image: url(assets/frn.png);
}

.lang-menu .selected-lang.it:before {
  background-image: url(assets/ita.png);
}

.lang-menu ul {
  position: absolute;
  top: 52px;
  right: 0;
  display: none;
  margin: 0;
  padding: 0;
  border: 1px solid #f8f8f8;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 1px 10px rgba(0,0,0,0.2);
}

.lang-menu ul li {
  display: flex;
  justify-content: space-between;
  width: 136px;
  list-style: none;
  text-align: left;
}

.lang-menu ul li a {
  display: block;
  padding: 5px 10px;
  font-size: 14px;
  text-decoration: none;
}

.lang-menu ul li:hover {
  background-color: #f2f2f2;
}

.lang-menu ul li a:before {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  content: '';
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: contain;
}

.lang-menu:hover ul {
  display: block;
}

.en:before {
  background-image: url(assets/eng.png);
}

.ua:before {
  background-image: url(assets/ukr.png);
}

.fr:before {
  background-image: url(assets/frn.png);
}

.it:before {
  background-image: url(assets/ita.png);
}

.de:before {
  background-image: url(assets/deu.png);
}

footer {
  display: flex;
  justify-content: space-between;
}

footer div {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.2em;
}

footer a {
  text-decoration: underline;
  color: #518df2;
}

footer p {
  margin: 0;
}

footer a:after {
  padding-right: 14px;
  content: '';
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQ4RUJDOTZGRTBDOTExRTc5MERBQTJCNDQxQTQzODExIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjQ4RUJDOTcwRTBDOTExRTc5MERBQTJCNDQxQTQzODExIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OENGOUI3QzBFMEM4MTFFNzkwREFBMkI0NDFBNDM4MTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDhFQkM5NkVFMEM5MTFFNzkwREFBMkI0NDFBNDM4MTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6D7JNDAAAAYElEQVR42nSP3Q3AIAiE1bgXc7gBIzEBezDZNbRK1NBLeAC+46cCKLeY+Si2kqvO+BJVRUaZ2YLRN+cOgIgCbskEB3ZTDWiM8QJenKtCPTn4kIjk33njcP59t/p+xiPAAIgBI+Fw0CHaAAAAAElFTkSuQmCC') 100% 4px no-repeat;
}