* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
  }
body {font-family: inter, Helvetica, sans-serif;}

footer{background-color: #001036;padding: 20px 20px; text-align: center;}
footer >p{color:#ffffff;padding:10px}
footer >i:hover{margin:0px 5px 0px 5px;transform: scale(1.2);cursor: pointer;transition: 0.5s}
footer .ShareIcon{font-size:30px;color:white;transition: 0.5s;}
footer >nav >a{text-decoration: none; color:white;transition: 0.5s;}
footer >nav >a:hover{letter-spacing: 5px;transition: 0.5s;}

.ShrIcn:hover{margin:0px 5px 0px 5px;transform: scale(1.2);cursor: pointer;transition: 0.5s}

.navigation{
  background-image: linear-gradient(rgb(255, 255, 255, 1)90%, rgba(49, 49, 49, 0.9)); padding-bottom:10px; position:fixed; z-index: 100; width: 100%;}

.title p > a{
  width: 100%;
  text-align: center;
  display: block;
  font-size: 2.3em;
  margin-block-start: 0.1em;
  margin-block-end: 0.1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  color:orangered;
  text-shadow: 1px 1px 3px #8d8c8c;
  text-decoration: none;
}

.Menubar {width: 100%;overflow: auto;}

.Menubar a {
  float: left;
  padding: 5px 10px 5px 10px;
  color: white;
  text-decoration: none;
  font-size: 1.5em;
  width: calc(33.3% - 10px); /* Four links of equal widths */
  text-align: center;
  border-radius: 10px;
  background-color: #002069;
  margin:0px 5px 0px 5px;
  text-shadow: 1px 1px 3px #141414;
}

.Menubar a:hover {
  border-radius: 10px;
  background-color: #002c94;
  color: white;
  text-shadow: 1px 1px 3px #141414;
}

.Menubar a.active {
  border-radius: 10px;
  background-color: orangered;
  text-shadow: 1px 1px 3px #141414;
}

.hero-image {background-color: #002069; height: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative;}

.Hero {object-fit: cover;width:100%; height:50vh; padding-top: 50px;}

#GoToTop {position: fixed; bottom: 20px; right: 20px;}
#GoToTop > a >i{font-size:40px; color:rgb(88, 88, 88);text-shadow: 0px 0px 4px #ffffff;transition: 0.5s}
#GoToTop > a >i:hover{transform: scale(1.2);cursor: pointer;transition: 0.5s}

.NewsSection {color:#002069; background-color: white;padding: 0px 20px 50px 20px; text-align: left;}
.NewsSection > h3{font-size: 1.5em; padding: 0px 0px 20px 0px; text-align: center;}
.NewsCardContainer{display: flex; flex-wrap: wrap;}

.card {box-shadow: 0px 3px 10px 1px rgba(0,0,0,0.2); transition: 0.3s; border-radius: 5px; margin: 12px; padding: 10px 16px; width: 30%; display: flex; flex-direction: column; align-content: flex-start;}
  .card > h3 {padding-top: 10px; padding-bottom: 10px;text-align: justify}
  .card > h4 {padding-top: 10px; padding-bottom: 10px;text-align: justify}
  .card > p {padding-top: 10px; padding-bottom: 10px; text-align: justify; color: #7e7e7e;}
  .card > img {border-radius: 5px;}
  .card > a { width:100%;color: orangered;text-align: right;}
  .card:hover {box-shadow: 0 8px 16px 5px rgba(0,0,0,0.2);}

.Boxed{width: 60%;margin:auto;}

.article{color:#002069; background-color: white;padding: 150px 20px 50px 20px; text-align: left;}
  .article > p{color:#636D76; padding: 20px 20px 0px 20px;width: 100%; left: 0px; text-align: justify; line-height: normal;}
  .article > ul{color:#636D76; padding: 20px 20px 0px 40px;width: 100%; left: 0px; text-align: justify; line-height: normal;}
  .article > img{padding:20px;width:100%; height:50vh;object-fit: cover}
  .article > h2{padding:20px 10px 0px 20px;letter-spacing: 1px}
  .article > h3{padding:20px 10px 0px 20px;letter-spacing: 1px}

.table-1 { width: 70%; border-color:black;border-collapse:collapse;border-spacing:0;margin:0px auto;}
  .table-1 td{border-color:black;border-style:solid;border-width:1px;font-family:inter, sans-serif;font-size:16px; overflow:hidden;padding:10px 5px;word-break:normal;}
  .table-1 th{border-color:black;border-style:solid;border-width:1px;font-family:inter, sans-serif;font-size:16px; font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
  .table-1 .table-1-column-1{border-color:black;color:#555555;font-size:18px;text-align:left;vertical-align:middle; font-weight: bold;}
  .table-1 .table-1-column-2{border-color:black;color:#555555;font-size:16px;text-align:right;vertical-align:middle;}
  .table-1 .table-1-header{background-color:#002069;border-color:black;color:#ffffff;font-size:16px;position:-webkit-sticky;position:sticky; text-align:left;top:-1px;vertical-align:middle;will-change:transform}
  .table-1 .table-2-header{background-color:#002069;border-color:black;color:#ffffff;font-size:20px;position:-webkit-sticky;position:sticky; text-align:center;top:-1px;vertical-align:middle;will-change:transform}

.selectmenu { background-color: #cbe8f8;border-radius: 4px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); margin: 5px 0px; border: #8d0000;border-width: 2px;}
.selectmenu:active { background-color: #ffc8c8;color: black;}


@media screen and (max-width: 720px) {
  .Menubar a {float: left; width: calc(33.3% - 6px); margin:3px; text-align: center;  font-size: .8em;  padding: 10px 5px 10px 5px;}

  .Hero { object-fit: cover; width:100%; height:70vh;}

  .Boxed {width: 100%;}

  .card {width: 100%;}

  .table-1 {width: auto !important;}
    .table-1 col {width: auto !important;}
    .table-1 td{font-size:14px;}
    .table-1 th{font-size:14px;}
    .table-1 .table-1-column-2 {font-size:14px;} 
    .table-1 .table-1-column-1 {font-size:14px;}
    .table-1 .table-1-header {font-size:14px;}
}