@font-face { font-family: OpenSans; src: url(../fonts/OpenSans-Regular.ttf); }
@font-face { font-family: OpenSans-lite; src: url(../fonts/OpenSans-Light.ttf); }
*{ padding:0px; margin: 0px; box-sizing: border-box; font-size: 16px; font-family: OpenSans-lite, sans-serif;  }
:root{
    --blue:#0D4A9B;
    --orange:#F6801E;
}
/* body>div:last-child{display: none !important; } */
.container{ margin: 0px auto; width: 1200px; padding-left: 25px; padding-right: 25px;  }
.page-overlay  { position: absolute; z-index: 2; top:0px; left:0px; width: 100vw;  height: 100vh; background-color: #bcb3b3a3; display: none !important; }
.flex-center{ display: flex; justify-content: center; align-items: center; flex-direction: column; }
.page-wrapper{ position: relative; z-index: 1;  width: 100vw; height: 100vh; overflow-x: hidden; min-width: 1200px;  }

.header-section{ display: grid; grid-template-columns: 260px auto; gap:20px; padding-top: 10px; }
.logo{ width: 260px; display: grid; grid-template-columns: 12fr; padding:10px 0px;  }
.logo div>img{ width:100%; }
.logo .logo-name span{ color: var(--orange); font-size: 20px; }
.logo .logo-name span:first-child{ color: var(--blue); }
.menu{ display: flex; gap:20px; justify-content: right; align-items: center; font-family: OpenSans, sans-serif; }
.menu a{ display: block; color:var(--blue); text-decoration: none; padding:10px 20px; min-width: 50px; border-radius: 5px; text-align: center; font-weight: 500px; }
.menu a:hover{ background-color: var(--orange); } 

.page-banner{ border-bottom: solid 1px #e2e2e2; padding-bottom: 80px; background-image: linear-gradient(180deg, #ffffff, #bbb); }
.banner-section{  min-height: 400px; }

.blue-block{ background-color: var(--blue); min-height: 160px; border-radius: 15px; color: #fff; position: relative; top: -80px; }
.black-block{ background-color: #000; min-height: 160px; border-radius: 5px; color:#fff; position: relative; top: -80px; }
.white-block{ border: solid 0px #d5d5d5; min-height: 200px; border-radius: 5px; position: relative; top: -80px; background-color: #fff; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; }

.blue-font{ color:var(--blue) }
.orange-font{ color:var(--orange) }
.padb10{ padding: 10px; } .padb20{ padding: 20px; }
.grid2{ display: grid; grid-template-columns: auto auto; }

.grid3{ display: grid; grid-template-columns: 4fr 4fr 4fr; }
.grid4{ display: grid; grid-template-columns: 3fr 3fr 3fr 3fr; }

.card{ border-radius: 10px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; border:solid 1px #d5d5d5; }
.avatar{ width: 80px; height: 80px; border-radius: 50%; border: solid 1px #d5d5d5; overflow: hidden;  }
.avatar img{ width: 100%;  }