:root {
  --Blue: #003c4b;
  --Dark-Teal: #035059;
  --Lime-Green: #c6d533;
  --Beige: #9d8d70;
  --Black: #000;
  --White: #fff;
  --Light-Blue: #729399;
  --Gradient: linear-gradient(90deg, #02586e 0%, #01080a 100%);
  --BlueHeader: #003c4b;
  --WhiteHeader: #fff;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 250px;
}

body {
  margin: 0;
  padding: 0;
  margin: auto;
  background-color: var(--White);
  font-family: "Work Sans", sans-serif;
}
main {
  overflow: hidden;
}

header {
  z-index: 100;
  position: relative;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 155px;
}

header.default-header-color {
  --BlueHeader: #003c4b;
  --WhiteHeader: #fff;
  background-color: var(--Blue);
}

header.custom-header-color {
  --BlueHeader: #fff;
  --WhiteHeader: #003c4b;
  background-color: var(--White);
}

header .container {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 1280px;
}

header .container .topNavbar {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 25% 1fr 25%;
  align-items: center;
}

.topNavbar .topNavbarLeft {
  height: 100%;
  display: inline-flex;
  align-items: center;
}

.topNavbarLeft img {
  width: 170px;
}

.topNavbar .topNavbarMiddle {
  display: inline-flex;
  justify-content: center;
}

.topNavbarMiddle ul {
  padding: 0;
  list-style: none;
  display: inline-flex;
}

.topNavbarMiddle ul a {
  color: var(--WhiteHeader);
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  margin-left: 10px;
  margin-right: 10px;
}

.topNavbarMiddle ul a:hover {
  color: var(--Lime-Green);
}

.topNavbarMiddle ul li.current_page_item a {
  color: var(--Lime-Green);
}

.topNavbar .topNavbarRight {
  display: inline-flex;
  align-items: center;
  justify-content: end;
}

.lang_nav {
  position: relative;
  display: inline-block;
  list-style: none;
  padding: 0;
  margin-right: 30px;
}

.lang_nav > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--WhiteHeader);
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.lang_nav > li > a::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 7px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'><path d='M1 1L6 6L11 1' stroke='%23C6D533' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

.lang_nav > li:hover > a::after {
  transform: rotate(180deg);
}

.lang_nav > li > ul {
  display: none;
  position: absolute;
  background-color: var(--White);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
  border-radius: 5px;
  text-align: center;
  list-style: none;
}

.lang_nav > li > ul a {
  color: var(--Blue);
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
}

.lang_nav > li > ul li:not(:last-child) {
  border-bottom: 1px solid var(--Lime-Green);
}

.lang_nav:hover li > ul {
  display: block;
}

.topNavbarRight .hamburgerMenu {
  cursor: pointer;
}

.topNavbarRight .hamburgerMenu:hover svg path {
  stroke: var(--Lime-Green);
}

@media (max-width: 768px) {
  header {
    height: 100px; /* Reduce header height */
  }

  header .container {
    width: 95%;
    margin: auto;
  }

  header .container .topNavbar {
    grid-template-columns: 1fr 1fr; /* Simplify layout for small screens */
  }

  .topNavbarLeft img {
    width: 140px; /* Adjust logo size */
  }

  .topNavbar .topNavbarMiddle {
    display: none;
  }

  .topNavbarMiddle ul a {
    font-size: 14px; /* Reduce font size for small screens */
    margin-left: 5px;
    margin-right: 5px;
  }

  .lang_nav > li > a {
    font-size: 14px; /* Reduce font size */
  }

  .lang_nav {
    margin-right: 10px; /* Adjust margin */
  }
}

.sideMenu {
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  max-width: 415px;
  right: 0;
  top: 0;
  background-color: var(--Beige);
  color: var(--White);
  transition: max-width 500ms ease-in-out;
  overflow: hidden;
  border-radius: 0px 0px 0px 10px;
}

.topSideMenu {
  margin-top: 44px;
  margin-left: 49px;
  margin-right: 48px;
  display: inline-flex;
  align-content: center;
  justify-content: space-between;
  width: calc(100% - 97px);
}

.topSideMenu .sideMenuSocials a {
  margin-right: 15px;
  text-decoration: none;
}

.middleSideMenu {
  margin-left: 49px;
  margin-top: 25px;
}

.middleSideMenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.middleSideMenu li {
  margin-bottom: 24px;
}

.middleSideMenu li a {
  color: var(--White);
  font-family: "Work Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  margin: 0;
}

.middleSideMenu li a:hover {
  color: var(--Light-Blue);
}

.bottomSideMenu {
  margin-top: 24px;
  margin-left: 49px;
  margin-bottom: 41px;
}

.bottomSideMenu h4 {
  color: var(--Lime-Green);
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.bottomSideMenu p {
  color: var(--White);
  font-family: "Work Sans", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  max-width: 317px;
}

.bottomSideMenu button {
  display: flex;
  padding: 13px 19.5px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 25px;
  background-color: var(--White);
  color: var(--Black);
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border: none;
}

.bottomSideMenu button:hover {
  background-color: var(--Light-Blue);
  color: var(--White);
}

@media (max-width: 768px) {
  .sideMenu {
    max-width: 100%; /* Make the side menu full-width */
  }

  .topSideMenu {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 30px; /* Adjust margins */
    width: calc(100% - 40px);
  }

  .middleSideMenu {
    margin-left: 20px; /* Adjust margin for smaller screens */
    margin-top: 50px; /* Reduce top margin */
  }

  .middleSideMenu li a {
    font-size: 30px; /* Reduce font size for small screens */
  }

  .bottomSideMenu {
    margin-left: 20px; /* Adjust margin for smaller screens */
    margin-top: 50px; /* Reduce top margin */
    margin-bottom: 30px; /* Adjust bottom margin */
  }

  .bottomSideMenu p {
    font-size: 16px; /* Adjust paragraph font size */
    max-width: 100%; /* Use full width */
  }

  .bottomSideMenu button {
    padding: 10px 15px; /* Adjust button padding */
    font-size: 14px; /* Adjust button font size */
  }
}

.personInfo {
  width: 100%;
  margin: auto;
  padding: 20px; /* Original padding */
  padding-top: 155px;
  padding-bottom: 119px;
  box-sizing: border-box;
}

.personInfo_Block {
  display: grid;
  grid-template-columns: 1fr 55%; /* Two columns by default */
  gap: 40px; /* Space between items */
  width: 100%;
  margin: auto;
  box-sizing: border-box;
  max-width: 1280px;
  color: #000000;
}

.personInfo_Column {
  position: relative;
  display: flex;
  flex-direction: column; /* Arrange children in a column */
  align-items: start; /* Align children to the left horizontally */
  min-height: 80vh;
}

.personInfo_Column a {
  text-decoration: none;
  color: var(--Black);
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  margin-left: auto;
}

.personInfo_Column a svg {
  margin-right: 10px;
}

.personInfo_Column > h4 {
  color: var(--Lime-Green);
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0;
}

.personInfo_contactDiv h3 {
  margin: 0;
  color: var(--Black);
  font-family: "Work Sans", sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 15px;
}

.personInfo_contactDiv p {
  margin: 0;
  color: var(--Black);
  font-family: "Work Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 5px;
}

.personInfo_contactDiv .personInfo_contactDivBoldP {
  font-weight: 700;
  color: var(--Blue);
}

.personInfo_Buttons {
  margin-top: 30px;
  display: inline-block;
}

.personInfo_image {
  position: relative;
  margin: 0;
  width: 595px;
  height: 100%;
  min-height: 80vh;
  position: absolute;
  top: 0;
  right: 0;
}

.personInfo_image img {
  width: 100%; /* Make image responsive */
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 10px;
  object-position: top;
}

@media (max-width: 1200px) {
  .personInfo_Block {
    grid-template-columns: 1fr; /* Single column for medium screens */
    gap: 30px; /* Reduce gap */
  }

  .personInfo_image {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 30px; /* Add margin-top for image */
  }

  .personInfo_Column h3 {
    font-size: 24px; /* Adjust heading font size */
  }

  .personInfo_contactDiv p {
    font-size: 16px; /* Adjust paragraph font size */
  }
}

@media (max-width: 768px) {
  .personInfo {
    padding: 20px; /* Reduce padding for small screens */
    padding-top: 100px; /* Adjust padding top */
    padding-bottom: 80px; /* Adjust padding bottom */
  }

  .personInfo_Column {
    min-height: 0px;
  }

  .personInfo_Column h3 {
    font-size: 22px; /* Further adjust heading font size */
  }

  .personInfo_contactDiv p {
    font-size: 15px; /* Further adjust paragraph font size */
  }

  .personInfo_image {
    margin-top: 20px; /* Adjust margin-top */
  }
}

@media (max-width: 480px) {
  .personInfo {
    padding: 15px; /* Further reduce padding */
    padding-top: 80px; /* Adjust padding top */
    padding-bottom: 60px; /* Adjust padding bottom */
  }

  .personInfo_Column h3 {
    font-size: 20px; /* Further adjust heading font size */
  }

  .personInfo_contactDiv p {
    font-size: 14px; /* Further adjust paragraph font size */
  }

  .personInfo_image {
    width: 100%; /* Ensure image takes full width */
    height: auto;
  }
}

.error-404 {
  padding-top: 155px;
  padding-bottom: 140px;
  text-align: center;
}

.error-404 h1 {
  color: #fff;
  font-family: "Work Sans";
  font-size: 220px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.error-404 h3 {
  color: var(--Beige, #9d8d70);
  font-family: "Work Sans";
  font-size: 60px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 20px;
}

.error-404 p {
  color: #fff;
  font-family: "Work Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 30px;
}

.error-404 a {
  border-radius: 25px;
  background: var(--White, #fff);
  display: inline-flex;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--Black, #000);
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
}

.error-404 a:hover {
  background-color: var(--Black);
  color: var(--White);
}

@media (max-width: 1200px) {
  .error-404 h1 {
    font-size: 180px; /* Adjust font size */
  }

  .error-404 h3 {
    font-size: 50px; /* Adjust subheading font size */
  }

  .error-404 p {
    font-size: 20px; /* Adjust paragraph font size */
  }

  .error-404 a {
    font-size: 14px; /* Adjust button font size */
    padding: 10px 20px; /* Adjust button padding */
  }
}

@media (max-width: 768px) {
  .error-404 h1 {
    font-size: 140px; /* Further adjust font size */
  }

  .error-404 h3 {
    font-size: 40px; /* Further adjust subheading font size */
  }

  .error-404 p {
    font-size: 18px; /* Further adjust paragraph font size */
  }
}

@media (max-width: 480px) {
  .error-404 h1 {
    font-size: 100px; /* Further adjust font size */
  }

  .error-404 h3 {
    font-size: 30px; /* Further adjust subheading font size */
  }

  .error-404 p {
    font-size: 16px; /* Further adjust paragraph font size */
  }

  .error-404 a {
    font-size: 12px; /* Adjust button font size */
    padding: 8px 16px; /* Adjust button padding */
  }
}

.postContent {
  position: relative;
  width: 95%;
  padding: 20px;
  max-width: 1280px;
  margin: auto;
  margin-top: 155px;
}

.postContent div {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.postContent.postContent div a {
  color: var(--Black, #000);
  font-family: "Work Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-decoration: none;
}

.postContent .postDate {
  color: var(--Lime-Green, #c6d533);
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.postContent h1 {
  color: var(--Black, #000);
  font-family: "Work Sans", sans-serif;
  font-size: 60px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  width: 100%;
}

.postContent img {
  width: 100%;
  max-height: 700px;
  object-fit: cover;
  object-position: top;
  border-radius: 5px;
}

.back-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: "Work Sans", sans-serif;
  color: var(--Lime-Green, #c6d533);
  font-weight: bold;
}

.back-link svg {
  display: inline-block;
}


@media (max-width: 1200px) {
  .postContent h1 {
    font-size: 50px; /* Adjust heading font size */
  }

  .postContent .postDate {
    font-size: 14px; /* Adjust date font size */
  }

  .postContent div a {
    font-size: 14px; /* Adjust link font size */
  }
}

@media (max-width: 768px) {
  .postContent {
    padding: 20px; /* Reduce padding for smaller screens */
    margin-top: 120px; /* Adjust margin-top */
    width: 90vw;
  }

  .postContent h1 {
    font-size: 40px; /* Further adjust heading font size */
    max-width: 100%; /* Use full width */
  }

  .postContent img {
    max-height: 400px; /* Adjust image height */
  }
}

@media (max-width: 480px) {
  .postContent h1 {
    font-size: 32px; /* Further adjust heading font size */
  }

  .postContent img {
    max-height: 300px; /* Further adjust image height */
  }

  .postContent .postDate,
  .postContent div a {
    font-size: 12px; /* Adjust font sizes */
  }
}

.footer {
  position: relative;
  padding-top: 57px;
  background-color: var(--Blue);
}


.footer .footer-logo {
  width: 95%;
  margin: auto;
  margin-bottom: 35px;
}

.footer .footer-top {
  margin: auto;
  max-width: 1280px;
  width: 95%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two equal columns */
}

.footer-top .footer-logo {
  position: relative;
}

.footer-logo img {
  width: 100%;
  max-width: 400px;
}

.footer-top .footer-links {
  display: grid;
  position: relative;
  grid-template-columns: repeat(
    2,
    1fr
  ); /* Two columns within the footer-links */
  gap: 20px; /* Add spacing between link columns */
}

.footer-links .column:first-child ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns for sub-links */
}

.footer-top ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-top .footer-links h3 {
  color: var(--White, #fff);
  font-family: "Work Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 25px;
}

.footer-top li {
  color: var(--White, #fff);
  font-family: "Work Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.footer-top a {
  text-decoration: none;
  color: var(--White, #fff);
  font-family: "Work Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.footer-top ul svg {
  margin-right: 20px;
}

.footer hr {
  margin-top: 10px;
  height: 1px;
  background-color: var(--Lime-Green);
  border: none;
}

/* Adjust the bottom footer section */
.footer .footer-bottom {
  margin: auto;
  position: relative;
  padding: 20px 0; /* Add padding for spacing */
  background-color: var(--Blue); /* Ensure consistent background */
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: var(--White);
}

.footer-bottom a {
  color: var(--White);
  text-decoration: none;
}
/*
.footer-bottom > div {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}
*/
.footer-bottom > div > div {
  display: flex;
  align-items: center;
}

.footer-bottom span {
  color: var(--Lime-Green) !important;
  margin-left: 5px;
  margin-right: 5px;
  display: flex;
  align-items: center;
}

.footer-bottom svg {
  margin-left: 15px;
}

.footer .link-container p {
  font-size: 14px;
}

.container-wrap {
  max-width: 1280px;
  margin: auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}

@media (min-width: 1260px) {
  .link-container {
      position: absolute;
      right: 0;
      bottom: 25px;
      padding-right: 10px;
  }
}

/* Responsive styles for footer */
@media (max-width: 1200px) {
  .footer .footer-top {
    grid-template-columns: 1fr; /* Single column for medium screens */
    text-align: center; /* Center text alignment */
  }

  .footer-top .footer-links {
    grid-template-columns: 1fr; /* Single column for links */
    margin-top: 20px; /* Add margin */
  }

  .footer-top .footer-links h3,
  .footer-top li,
  .footer-top a {
    font-size: 16px; /* Adjust font sizes */
  }

  .footer .footer-bottom {
    flex-direction: column; /* Stack items vertically on smaller screens */
    gap: 20px; /* Add space between stacked items */
  }

  .footer-bottom > div {
    flex-direction: column; /* Stack items vertically */
    text-align: center; /* Center align content */
  }

  .footer-bottom span {
    display: none;
  }
}

@media (max-width: 768px) {
  .footer .footer-logo {
    margin-bottom: 20px; /* Adjust margin-bottom */
  }

  .footer-top h3 {
    text-align: start;
  }

  .footer-top .footer-links {
    margin-top: 15px; /* Further adjust margin-top */
  }

  .footer hr {
    margin-top: 5px; /* Adjust margin-top */
  }

  .footer-bottom > div {
    flex-direction: column; /* Stack items vertically */
    align-items: center;
    gap: 15px; /* Adjust gap */
  }

  .footer-bottom span,
  .footer-bottom svg {
    margin: 10px 0; /* Adjust margins for alignment */
  }
  .footer-links .column:first-child ul {
    grid-template-columns: repeat(1, 1fr); /* Two columns for sub-links */
  }
}

@media (max-width: 480px) {
  .footer-top .footer-links h3,
  .footer-top li,
  .footer-top a {
    font-size: 14px; /* Further adjust font sizes */
  }

  .footer-bottom > div {
    text-align: center; /* Center align content */
  }

  .footer-bottom > div > div:first-child {
    flex-direction: column; /* Stack inner items vertically */
    align-items: center; /* Center align content */
  }

  .footer-socials a {
    margin-left: 5px;
    margin-right: 5px;
  }
}

.capitalize-words {
  text-transform: capitalize;
}

.lowercase-words {
  text-transform: lowercase;
}

.normal-words {
  text-transform: none;
}

html[lang="en"] p.special-text {
  text-transform: capitalize;
}

html[lang="sv"] p.special-text {
  text-transform: lowercase;
}

html:not([lang="en"]):not([lang="sv"]) p.special-text {
  text-transform: none;
}