:root{
  --blue:#0089a9;
  --blue2:#006f91;
  --red:#f00016;
  --darkblue:#003366;
  --link:#000080;
  --border:#c7d0da;
  --light:#f6f8fb;
  --grey:#e9edf2;
  --text:#000;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial, Helvetica, sans-serif;
  background:
    repeating-linear-gradient(135deg,#f5f5f5 0,#f5f5f5 2px,#ececec 2px,#ececec 4px);
  color:var(--text);
  font-size:16px;
  line-height:1.12;
}
a{color:#000080;text-decoration:none}
a:hover{text-decoration:underline}
.page{
  width:1060px;
  max-width:calc(100% - 30px);
  margin:32px auto 0;
  background:#fff;
}
.header{
  height:122px;
  position:relative;
  overflow:hidden;
  background:#e9f0f6;
  display:grid;
  grid-template-columns:420px 1fr;
}
.logo-zone{
  position:relative;
  background:#edf3f8;
  overflow:hidden;
}
.logo-zone:before{
  content:"";
  position:absolute;
  right:-30px;
  top:-40px;
  width:230px;
  height:180px;
  border-radius:0 0 0 110px;
  background:#c5d2dd;
}
.bo-mark{
  position:absolute;
  left:33px;
  top:7px;
  width:160px;
  height:105px;
}
.bo-mark .b{
  position:absolute;
  left:0;
  top:0;
  width:42px;
  height:104px;
  border-left:14px solid var(--red);
  border-bottom:14px solid var(--red);
}
.bo-mark .o{
  position:absolute;
  left:64px;
  top:45px;
  width:54px;
  height:54px;
  border:17px solid var(--red);
  border-radius:50%;
}
.bo-mark .o:before{
  content:"";
  position:absolute;
  left:-26px;
  top:12px;
  width:22px;
  height:17px;
  background:var(--red);
}
.logo-vert{
  position:absolute;
  left:5px;
  top:7px;
  transform:rotate(-90deg);
  transform-origin:left top;
  color:#333;
  font-weight:bold;
  font-size:14px;
}
.logo-words{
  position:absolute;
  left:176px;
  top:25px;
  width:210px;
  color:#8e8e8e;
  letter-spacing:6px;
  text-align:center;
  font-size:16px;
  line-height:1.55;
}
.logo-words b{font-weight:400;color:#777}
.topnav{
  height:25px;
  background:var(--blue);
  color:#fff;
  text-align:right;
  padding-right:12px;
  white-space:nowrap;
}
.topnav a{
  display:inline-block;
  color:#fff;
  font-weight:bold;
  font-size:12px;
  padding:5px 9px 0;
  border-right:1px solid #e1f4fb;
  text-transform:uppercase;
}
.topnav a:first-child{border-left:1px solid #e1f4fb}
.circles{
  height:97px;
  display:flex;
  align-items:center;
  gap:26px;
  padding-left:85px;
  background:#c4d2dd;
}
.circle-img{
  width:72px;
  height:72px;
  border-radius:50%;
  border:3px solid #d3e6ef;
  background:
    linear-gradient(180deg,#cce7fb 0 45%,#787878 46% 100%);
  position:relative;
  overflow:hidden;
}
.circle-img:after{
  content:"";
  position:absolute;
  left:16px;right:16px;bottom:16px;height:32px;
  background:#555;
  clip-path:polygon(0 100%,20% 30%,50% 0,82% 35%,100% 100%);
}
.search-row{
  display:grid;
  grid-template-columns:215px 1fr 210px;
  gap:20px;
  padding:16px 4px 0;
  align-items:start;
}
.search input{
  width:210px;
  height:22px;
  border:1px solid #777;
  padding:2px 5px;
}
.search:after{
  content:"🔍";
  display:block;
  margin-top:2px;
  font-size:20px;
  color:#3aa6c5;
}
.breadcrumb{
  padding-top:14px;
  font-size:12px;
  color:#000;
}
.layout{
  display:grid;
  grid-template-columns:215px 1fr 210px;
  gap:20px;
  padding:16px 4px 24px;
}
.left-menu{
  padding-top:14px;
}
.menu-item{
  position:relative;
  min-height:34px;
  margin:0 0 13px;
  padding:8px 10px 8px 30px;
  background:#eef3fb;
  border-top:6px solid var(--blue);
  border-right:1px solid #c8d2dc;
  border-bottom:1px solid #c8d2dc;
  border-left:1px solid #c8d2dc;
  color:#000;
  font-weight:bold;
  font-size:13px;
}
.menu-item:before{
  content:"";
  position:absolute;
  left:7px;
  top:6px;
  width:16px;
  height:16px;
  border:6px solid var(--red);
  border-radius:50%;
  background:white;
}
.menu-item:after{
  content:"";
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:32px;
  height:15px;
  background:#eef3fb;
  clip-path:polygon(0 0,100% 0,100% 100%);
  border-right:1px solid #c8d2dc;
}
.content{
  min-height:700px;
}
.content h1{
  color:var(--darkblue);
  font-size:23px;
  margin:44px 0 18px;
  line-height:1.1;
  padding-bottom:6px;
  border-bottom:1px solid #9aa0a8;
}
.lead{
  font-size:18px;
  font-style:italic;
  font-weight:bold;
  text-align:justify;
  margin:0 0 16px;
}
.two-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  margin-top:16px;
}
.section-link{
  display:block;
  color:#000080;
  font-size:20px;
  font-weight:bold;
  margin:14px 0 2px;
}
.two-cols p{
  margin:0 0 16px;
  text-align:justify;
  font-size:18px;
}
.projects-title{
  margin:70px 0 25px;
  padding-top:25px;
  border-top:1px solid #999;
  text-align:center;
  font-weight:bold;
  font-size:18px;
  text-transform:uppercase;
}
.project-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px 34px;
  width:520px;
  max-width:100%;
  margin:0 auto;
}
.project-cat{
  text-align:center;
  color:#000080;
  font-size:18px;
}
.project-img{
  width:160px;
  height:90px;
  margin:0 auto 7px;
  background:
    linear-gradient(180deg,#d5efff 0 48%,#83bc5b 49% 100%);
  position:relative;
  border:1px solid #d2d2d2;
}
.project-img:after{
  content:"";
  position:absolute;
  left:25px;right:24px;bottom:17px;height:48px;
  background:#c5b391;
  clip-path:polygon(0 100%,22% 35%,50% 0,80% 38%,100% 100%);
}
.news-panel{
  padding-top:48px;
}
.news-head{
  background:linear-gradient(#13a1c3,#017fa2);
  color:#fff;
  font-weight:bold;
  padding:7px 10px;
  border-radius:8px 8px 0 0;
  font-size:16px;
}
.news-card{
  border:1px solid #cfd5da;
  min-height:116px;
  padding:16px 8px;
  font-size:14px;
  background:linear-gradient(#fbfcfd,#f1f1f1);
}
.news-date{
  color:red;
  font-weight:bold;
  margin-bottom:4px;
}
.footer{
  height:44px;
  background:#e7e7e7;
  color:#555;
  text-align:center;
  padding-top:12px;
  font-size:12px;
}
.inner-page .content h1{
  margin-top:16px;
}
.inner-card{
  border-top:1px solid #aaa;
  padding-top:18px;
}
.inner-card h2{
  color:#000080;
  font-size:22px;
  margin:16px 0 10px;
}
.inner-card p,.inner-card li{
  font-size:17px;
  line-height:1.25;
  text-align:justify;
}
.catalog-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.catalog-box{
  border:1px solid #cfd5da;
  background:#f8fbff;
  padding:18px;
}
.catalog-box h3{
  margin:0 0 10px;
  color:#000080;
}
@media(max-width:950px){
  .header{height:auto;grid-template-columns:1fr}
  .logo-zone{height:122px}
  .search-row,.layout{grid-template-columns:1fr}
  .left-menu{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .menu-item{margin:0}
  .two-cols,.project-grid,.catalog-grid{grid-template-columns:1fr}
  .news-panel{padding-top:10px}
}
@media(max-width:560px){
  .page{max-width:100%;margin:0}
  .left-menu{grid-template-columns:1fr}
  .topnav{text-align:left;height:auto}
  .topnav a{display:block;border:0}
  .circles{padding-left:15px;gap:10px;overflow:hidden}
}