body {
  width: 100%;
  height: 100%;
  margin: 0px;
  background-color: #e6e6e6;
  /* font-family: "Segoe Print", Tahoma, Geneva, Verdana, sans-serif; */
  /* font-family: Tahoma, Geneva, Verdana, sans-serif; */
  font-family: "Roboto", sans-serif;
}

.page-container {
  width: 100%;
  height: 100%;
}

.header {
  background-color: #99cccc;
}

.header-separator {
  width: 100%;
  height: 12px;
  background-color: black;
}

.header-shadow {
  box-shadow: 5px 5px 5px #aaaaaa;
}

.logo-container {
  display: flex;
  padding: 30px 40px 10px 40px;
  max-width: 1800px;
  margin: auto;
}

.address {
  font-weight: bold;
  font-size: 1.2em;
  text-align: end;
  margin-right: 10px;
}

.logo-img {
  flex: 1;
}

.logo-img img {
  width: 200px;
  -webkit-filter: drop-shadow(2px 2px 5px #757575);
  filter: drop-shadow(2px 2px 5px #757575);
}

.qr-code {
  padding-left: 10px;
}

.qr-code img {
  width: 110px;
}

.slogan-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 40px;
  justify-content: center;
  max-width: 1800px;
  margin: auto;
}

.slogan-text {
  font-weight: bold;
  font-size: 3rem;
  margin: auto 0;
  font-family: "Segoe Print", Tahoma, Geneva, Verdana, sans-serif;
  text-shadow: 2px 2px 5px #757575;
}

.images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1;
}

.img1-2-2 {
  display: none;
}

.img1-2 {
  display: block;
}

.img-1,
.img-2,
.img-3,
.img-4,
.img-5 {
  /*flex: 0 0 calc(33.33% - 30px);    flex-basis adjustment for margin */
  /*flex: 0 0 30%;*/
  flex: 1;
}

.img-1 img,
.img-2 img,
.img-3 img,
.img-4 img,
.img-5 img {
  /* height: 100%; */
  width: 100%;
  height: 100%;
}

.content-img-3 img {
  width: 100%;
  height: 100%;
}

.content {
  padding: 30px 40px;
  max-width: 1800px;
  margin: auto;
}

.content-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.content-item {
  flex: 0 0 30%;
  border: solid black 1px;
  min-width: 500px;
}

.content-row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  width: 100%;
  justify-content: space-between;
}

.content-row .content-row-item {
  flex: 0 0 30%;
  border: solid black 1px;
  min-width: 500px;
  box-shadow: 5px 5px 5px #aaaaaa;
}

.content-row .content-row-item .item-header {
  background: black;
  color: white;
  padding: 5px;
  text-align: center;
  font-weight: bold;
  font-size: 1.3em;
  height: 2.25rem;
  line-height: 1.6em;
}

.content-row .content-row-item .item-body {
  background-image: linear-gradient(to right, #e6e6e6, white);
  display: flex;
}

.text-body {
  height: calc(100% - 2.875rem);
}

.content-row .content-row-item .item-body img {
  width: 100%;
}

.content-item-header {
  width: 100%;
}

.content-item-header-title {
  background: black;
  color: white;
  padding: 5px;
  text-align: center;
  font-weight: bold;
  font-size: 1.3em;
}

.content-item-header-img {
  display: flex;
  width: 100%;
}

.content-item-header-img,
.content-item-header-img img {
  width: 100%;
  height: 100%;
}

.content-item-body {
  background-color: white;
  height: calc(100% - 56px);
  padding-top: 10px;
}

.content-row-item ul {
  font-size: 20px;
}

.content-row-item ul li {
  margin: 0 0 5px 0;
}

.content-item-detail {
  flex: 0 0 30%;
  text-align: center;
  min-width: 500px;
}

.content-item-detail h3 {
  font-weight: bold;
  margin-block-end: 5px;
}

a {
  color: #505050;
}

a:visited {
  color: #505050;
}

.social-media-logos {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 5px;
}

.fb-logo img,
.instagram-logo img {
  width: 35px;
}

.content-item-project {
  padding: 20px;
  flex: 0 0 40%;
  border: solid black 1px;
  background-color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.content-item-project a {
  font-weight: bold;
}

.project-header-logo img {
  max-width: 380px;
}

.project-footer-logo img {
  width: 100%;
}

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

@media (max-width: 1200px) {
  .content-item {
    flex: 1;
  }

  .content-row .content-row-item {
    flex: 1;
  }

  .content-item-project {
    flex: 1;
  }
}

@media (max-width: 1406px) {
  .slogan-container {
    flex-direction: column;
  }

  .slogan-text {
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }

  .images {
    flex: 1;
    width: 100%;
    margin-top: 20px;
  }

  .img1-2-2 {
    display: block;
  }

  .img1-2 {
    display: none;
  }

  .img-1,
  .img-2,
  .img-3,
  .img-4,
  .img-5 {
    flex: 1;
  }

  .content-container {
    justify-content: center;
  }

  .content-row {
    justify-content: center;
  }
}

@media (max-width: 1200px) {
  .content-container {
    justify-content: center;
  }

  .content-item-detail {
    min-width: unset;
    flex: 1;
  }
}