* {
   margin: 0;
   padding: 0;
   font-family: 'Open Sans', sans-serif;
   font-family: 'Raleway', sans-serif;
}

body {
   max-width: 100%;
   overflow-x: hidden;
}

.header {
 width: 1920px;
 background-color: #1B3954;
 position: relative;
}

nav {
   display: flex;
   padding: 1% 6%;
   justify-content: space-between;
   align-items: center;
}

nav img {
   width: 75px;
}

.nav-links {
   flex: 1;
   text-align: right;
}

.nav-links ul li {
   display: inline-block;
   list-style: none;
   padding: 8px 12px;
   position: relative;
}

.nav-links ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

.nav-links ul li::after {
   content: '';
   width: 0%;
   height: 2px;
   display: block;
   margin: auto;
   background: #12D1A2;
   transition: 0.25s;
}

.nav-links ul li:hover::after {
   width: 100%;
}

.hero-image{
   background-image: url('../images/fotobox.png');
   height: 50%;
   width: 1920px;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
}

.hero-box {
   -webkit-text-fill-color: #fff;
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   width: 50%;
   height: 50%;
   transform: translate(-50%, -50%);
   background-color: #1B3954;
   margin: auto;
   padding: 10px;
}

.hero-box img {
   float: left;
   padding: 5%;
   size: 30%;
   width: 30%;
   margin-top: -10px;
   }

.right {
   float: center;
   padding: 5%;
   text-align: left;
}

.right h2 {
   margin-top: 10px;
}

.right p {
   margin-top: 10px;
}

.button {
   border: none;
   color: #1B3954;
   background-color: #12D1A2;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   margin-top: 20px;
   font-size: 16px;
   cursor: pointer;
   transition-duration: 0.25s;
}

.button:hover {
   border: none;
   color: #1B3954;
   background-color: #0FB28A;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   margin-top: 20px;
   font-size: 16px;
   cursor: pointer;
}

.highlightscontainer h2 {
   color: #1B3954;
}

.highlightscontainer {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
}

.extracards {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
}

.highlightscontainer .cards {
  grid-column-start: 4;
  grid-column-end: 10;
  margin-top: 50px;
  margin-bottom: 50px;
}

.extracards #column1 {
   grid-column-start: 2;
   grid-column-end: 5;
   align-items: center;
}

.extracards #column2 {
   grid-column-start: 6;
   grid-column-end: 9;
   align-items: center;
}

.extracards #column3 {
   grid-column-start: 10;
   grid-column-end: 13;
   align-items: center;
}

.extracards img {
   max-width: 500px;
   max-height: 500px;
}
/* second card section */

.navbox {
   background-color: #12D1A2;
   margin-top: 50px;
}

.navcards {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
}

.navcards #nav1 {
   grid-column-start: 4;
   grid-column-end: 8;
   align-items: center;
}

.navcards #nav2 {
   grid-column-start: 8;
   grid-column-end: 12;
   align-items: center;
   padding-left: 40px;
}

.navcards img {
   max-width: 250px;
   max-height: 250px;
   margin-top: 50px;
   margin-bottom: 5px;
   align-content: center;
}

.cardheader {
   margin-top: 20px;
   color: #fff;
}

.cardtext {
   margin-top: 20px;
   color: #fff;
   max-width: 250px;
}

.navbutton {
   border: none;
   color: #1B3954;
   background-color: #fff;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   margin-top: 20px;
   margin-bottom: 50px;
   font-size: 16px;
   cursor: pointer;
   transition-duration: 0.25s;
}

.navbutton:hover {
   border: none;
   color: #fff;
   background-color: #1B3954;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   margin-top: 20px;
   font-size: 16px;
   cursor: pointer;
}

.footercontainer {
   display: flex;
   background-color: #1B3954;
   width: 100%;
   justify-content: center;
}

.footercontainer div {
   justify-content: center;
   margin: 30px;
   height: 35px;
   width: 35px;
}

.copyright {
   background-color: #1B3954;
   width: 100%;
   color: #fff;
   padding: 15px 32px;
   margin-top: -30px;
}