:root {
  --blue: #009ee0;
  --grey: #7f7f7f;
}

* { box-sizing: border-box; }
html, body, p, h1, h2, h3, ul, li, img { margin: 0; padding: 0; }
html { min-width: 320px; }
body {
  background: #6485a7 url("images/background.jpg") repeat-x;
  color: #000;
  font-family: Verdana, Arial, sans-serif;
  text-align: center;
}
img { border: 0; }
a { color: var(--blue); }

.site-wrapper {
  width: 1016px;
  margin: 8px auto 0;
  text-align: left;
}
.main-block {
  width: 1016px;
  min-height: 827px;
  background: url("images/mainblock2.jpg") no-repeat top left;
}
.top-container {
  position: relative;
  height: 66px;
  font-size: 10px;
}
.top-link {
  position: absolute;
  top: 49px;
  color: #b2b2b2;
  font-size: 10px;
  line-height: 1;
  text-decoration: none;
}
.top-link:hover { color: var(--blue); }
.top-link--left { left: 67px; }
.top-link--right { left: 197px; }

.brand-row {
  position: relative;
  height: 93px;
}
.payoff {
  position: absolute;
  top: 2px;
  left: 60px;
  width: 438px;
  height: 25px;
  margin-top: 68px;
  background: url("images/payoff.jpg") no-repeat;
}
.logo {
  position: absolute;
  z-index: 3;
  top: 47px;
  left: 769px;
  width: 124px;
  height: 123px;
}
.logo img { display: block; width: 124px; height: 123px; }

.banner {
  position: relative;
  width: 953px;
  height: 196px;
  margin: 15px 0 0 30px;
  overflow: hidden;
}
.banner img {
  position: absolute;
  inset: 0;
  display: block;
  width: 953px;
  height: 196px;
  opacity: 0;
  transition: opacity 1s ease;
}
.banner img.active { opacity: 1; }

.content-block {
  display: grid;
  grid-template-columns: 213px 598px 174px;
  width: 985px;
  min-height: 424px;
  margin-top: 35px;
}
.menu {
  width: 184px;
  height: 393px;
  margin-left: 29px;
  background: url("images/menu-seperator.jpg") no-repeat top right;
}
.menu ul { padding-right: 23px; list-style: none; text-align: right; }
.menu li { height: 19px; line-height: 15px; }
.menu a {
  color: var(--blue);
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
}
.menu a:hover,
.menu a[aria-current="page"] { color: var(--grey); }

.content {
  width: 554px;
  height: 393px;
  margin-left: 44px;
  padding-right: 44px;
  overflow-y: auto;
  scrollbar-color: #b7b7b7 transparent;
  scrollbar-width: thin;
}
.content h1,
.content h2 {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.2;
}
.content h2 { margin-bottom: 0; }
.content p {
  margin-bottom: 20px;
  color: var(--grey);
  font-size: 10px;
  line-height: 20px;
}
.content .blue { color: var(--blue); }
.content .grey { color: var(--grey); }
.content .no-margin { margin-bottom: 0; }
.content strong { font-weight: bold; }
.content .profile {
  min-height: 115px;
  margin-bottom: 10px;
}
.content .profile::after { display: block; clear: both; content: ""; }
.content .profile img {
  float: left;
  width: 115px;
  height: 115px;
  margin-right: 30px;
}
.content .profile strong { color: var(--blue); }
.content .services-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 20px;
  list-style: none;
}
.content .services-table li {
  font-size: 10px;
  line-height: 20px;
}
.content .services-table img {
  display: block;
  width: 151px;
  height: 56px;
  object-fit: contain;
  object-position: left center;
}

.sidebar {
  height: 393px;
  padding-left: 22px;
  background: url("images/menu-seperator.jpg") no-repeat top left;
}
.sidebar h2 {
  color: #7f7e7e;
  font-size: 10px;
  font-weight: bold;
}
.sidebar p {
  margin-bottom: 16px;
  font-size: 10px;
  line-height: 16px;
}
.sidebar .blue { color: var(--blue); }
.sidebar .grey { color: var(--grey); }
.sidebar .grey a { color: var(--grey); text-decoration: none; }
.sidebar .grey a:hover { color: var(--blue); }
.partner-logos { display: flex; align-items: flex-start; gap: 3px; }
.partner-logos img { display: block; }

@media (max-width: 800px) {
  body { background-size: auto 865px; }
  .site-wrapper,
  .main-block { width: 100%; min-height: 100vh; }
  .site-wrapper { margin-top: 0; }
  .main-block {
    padding-top: 1px;
    border-radius: 0;
    background: #fff;
  }
  .top-container { height: 48px; }
  .top-link { top: 27px; }
  .top-link--left { left: 20px; }
  .top-link--right { left: 150px; }
  .brand-row { height: 88px; }
  .payoff {
    top: 0;
    left: 20px;
    width: min(438px, calc(100% - 172px));
    margin-top: 30px;
    background-size: contain;
  }
  .logo { top: 0; right: 20px; left: auto; transform: scale(.7); transform-origin: top right; }
  .banner {
    width: 100%;
    height: auto;
    aspect-ratio: 953 / 196;
    margin: 0;
  }
  .banner img { width: 100%; height: 100%; object-fit: cover; }
  .content-block {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    margin-top: 24px;
    padding: 0 20px 32px;
  }
  .menu {
    width: 100%;
    height: auto;
    margin: 0 0 28px;
    background: none;
  }
  .menu ul { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 0; text-align: left; }
  .menu li { height: auto; }
  .menu a { font-size: 14px; }
  .content {
    order: 2;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .content h1, .content h2 { font-size: 20px; }
  .content p, .content .services-table li { font-size: 14px; line-height: 1.7; }
  .sidebar {
    order: 3;
    width: 100%;
    height: auto;
    margin-top: 12px;
    padding: 24px 0 0;
    border-top: 1px solid #ddd;
    background: none;
  }
  .sidebar h2, .sidebar p { font-size: 13px; line-height: 1.6; }
}

@media (max-width: 480px) {
  .payoff { width: calc(100% - 130px); }
  .logo { right: 10px; transform: scale(.58); }
  .content-block { padding-inline: 16px; }
  .content .profile img { width: 92px; height: 92px; margin-right: 18px; }
  .content .services-table { grid-template-columns: 1fr; gap: 24px; }
}