/* ---------------navbar------------- */
body {
  margin: 0;
  padding: 0;
  scroll-behavior:smooth;
  overflow-x: hidden;
}

  .tabnav {
      background-color: #31525bee;
      position: fixed;
      padding: 0;
      width: 12.5vw;
      top: 20%;
      transform: translateY(-50%);
      box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
      z-index: 1000;
  }
  
  .tabnav ul {
      list-style: none;
      border-radius: 0 10px 10px 0;
      margin: 10em 0;
      padding: 0;
  }
  
  .tabnav ul li .tabnav-dot {
      color: #ffa101;
      display: block;
      padding: 10px;
      width: 100%;
      position: relative;
      text-align: center;
      border-radius: 10px;
      transition: background-color 0.3s;
  }
  
  .tabnav ul li .tabnav-dot span {
      display: inline-flex;
      letter-spacing: 1px;
      transition: color 0.3s;
  }
  
  .tabnav ul li .tabnav-dot:hover {
      background-color: #31525B;
  }
  
  .tabnav ul li .tabnav-dot:hover span {
      font-family: 'Montserrat';
      color: #FAE6b1; 
  }
  
  @media (max-width: 1000px) {
      .tabnav {
        display: none; 
      }
  }

/* Map */
.map-container{
    width: 100%;
    min-height: fit-content;
    background-color: #D0EAF0;
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 2vh 0;
}

.map-img{
    min-height: fit-content;
    position: relative;
}

.map-img img[alt="hp-map"]{
    max-width: 50vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
}

/* Positioning of pins */
.pin-container {
    width: 2.5vw;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    display: block;
    transform-origin: bottom left;
    cursor: pointer;
}


.pin-container .img{
  z-index: 100;
}

.pin-container[data-location="Odense"] {
    left: 49%;
    bottom: 20.5%;
}

img[alt="pin-odense"] {
  transform-origin: left bottom; 
  transition: transform 0.3s ease; 
}

img[alt="pin-odense"]:hover {
    transform: scale(1.1); 
}

.pin-container[data-location="Fano"] {
    left: 21%;
    bottom: 21.5%;
}

img[alt="pin-"] {
  transform-origin: left bottom; 
  transition: transform 0.3s ease; 
}

img[alt="pin-fano"]:hover {
    transform: scale(1.1); 
}

.pin-container[data-location="Middelfart"] {
    left: 44%;
    bottom: 21%;
}

img[alt="pin-middelfart"] {
  transform-origin: left bottom; 
  transition: transform 0.3s ease; 
}

img[alt="pin-middelfart"]:hover {
    transform: scale(1.1) translate(0, 0); 
}

.pin-container[data-location="Bornholm"] {
    left: 71%;
    bottom: 87%;
}

img[alt="pin-bornholm"] {
  transform-origin: left bottom; 
  transition: transform 0.3s ease; 
}

img[alt="pin-bornholm"]:hover {
    transform: scale(1.1) translate(0, 0); 
}

.pin-container[data-location="Copenhagen"] {
    left: 78%;
    bottom: 32%;
}

img[alt="pin-cph"] {
  transform-origin: left bottom; 
  transition: transform 0.3s ease; 
}

img[alt="pin-cph"]:hover {
    transform: scale(1.1) translate(0, 0);
}


.pin-container[data-location="Kerteminde"] {
    left: 52%;
    bottom: 22%;
}

img[alt="pin-kerteminde"] {
  transform-origin: left bottom; 
  transition: transform 0.3s ease; 
}

img[alt="pin-kerteminde"]:hover {
    transform: scale(1.1) translate(0, 0);
}


.location-name {
    display: none;
    position: absolute;
    font-family: 'Montserrat';
    background-color: #ffa201cd;
    color: white;
    padding: 5px;
    border-radius: 10px;
    bottom: 100%;
    left: 50%;
    transform: translateX(50%) translateY(80%);
    pointer-events: none; 
    z-index: 500;
}

.pin-container:hover .location-name {
    display: block; 
}

/*-------------Modals-----------*/
/* The modal container */

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
}

  /* Modal content */
.modal-content {
    background-color: #FAE6B1 !important;
    padding: 5%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 80vw;
    max-height: 80vh;
    overflow-y: scroll; /* Enable vertical scrolling */
    transition: all 1s ease;
}

.modal-content::-webkit-scrollbar {
    display: none;
}

  
/* Close button */
/*
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}*/


.text-boxes-parent {
  display: flex;
  justify-content: space-between;
  gap: 2%;
  width: 100%;
}

.text-boxes-child {
  flex: 1;
  background-color: transparent;
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
  padding: 2% 2%;
  border: solid;
  border-width: 5px;
  border-color: #FFA101;
  border-radius: 10px;
}

@media screen and (max-width: 800px) {
  .text-boxes-parent {
      flex-direction: column;
      column-gap: 2%;
  }
}

/* ---------------Accordion------------- */
.accordion {
    background-color: #E0F4F8;
    padding: 2vh 10vw;
}

.accordion-item {
    padding: 1vh 0;
    background-color: #E0F4F8 !important;
    border: none !important;
}

.accordion-button {
    background-color: #31525B !important;
    color: #FFA101 !important;
}

.accordion-button.collapsed::after {
    color: #fff !important;
}

.accordion-body {
    background-color: #fff;
    font-family: 'Montserrat';
    color: #31525B;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

.accordion-container{
    width: 40%;
    height: auto;   
    margin-left: auto;
    margin-left: auto;
}

.accordion-container img{
    width: 100%; 
    height: auto;
    text-align: center;
    transition: all 0.3s ease;
}

@media screen and (max-width: 800px) {
    .accordion-container {
        width: 100%;
        padding: 0 0;
        margin: 0 0;
        float: none;
    }
}

    
  /* ------Timeline------ */
  .timeline {
    background-color: transparent;
    margin: 20px auto;
    padding: 20px;
  }
  
  /* Card container */
  .card {
    position: relative;
    max-width: 3000px;
  }
    
  /* setting padding based on even or odd */
  .card:nth-child(odd) {
    padding: 30px 0 30px 30px;
    background-color: transparent;
    border: none;
  }
  .card:nth-child(even) {
    padding: 30px 30px 30px 0;
    background-color: transparent;
    border: none;
  }
  /* Global ::before */
  .card::before {
    content: "";
    position: absolute;
    width: 50%;
    border: solid #FFA101;
  }
  
  /* Setting the border of top, bottom, left */
  .card:nth-child(odd)::before {
    left: 0px;
    top: -4.5px;
    bottom: -4.5px;
    border-width: 5px 0 5px 5px;
    border-radius: 50px 0 0 50px;
  }
  
  /* Setting the top and bottom to "-5px" because earlier it was out of a pixel in mobile devices */
  @media only screen and (max-width: 400px) {
    .card:nth-child(odd)::before {
      top: -5px;
      bottom: -5px;
    }
  }
  
  /* Setting the border of top, bottom, right */
  .card:nth-child(even)::before {
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 5px 5px 5px 0;
    border-radius: 0 50px 50px 0;
  }
  
  /* Removing the border if it is the first card */
  .card:first-child::before {
    border-top: 0;
    border-top-left-radius: 0;
  }
  
  /* Removing the border if it is the last card  and it's odd */
  .card:last-child:nth-child(odd)::before {
    border-bottom: 0;
    border-bottom-left-radius: 0;
  }
  
  /* Removing the border if it is the last card  and it's even */
  .card:last-child:nth-child(even)::before {
    border-bottom: 0;
    border-bottom-right-radius: 0;
  }
  
  .info {
    display: flex;
    flex-direction: column;
    background: #31525b;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  }
  
  .info img{
    width: 25vw; 
    height: auto;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    margin-right: 10px; 
    vertical-align: top; 
    transition: all 0.3s ease;
    display: inline-block; 
}


.info p {
    clear: both; /* Clear the float property so that paragraphs stack below floated image */
    color:#E0F4F8;
    margin: 0;
    padding: 5px 0;
  }

  /* Title of the card */
  .title {
    color: #FFA101;
    padding: 10px 20px 5px 20px;
    position: relative;
  }
  
  /* Timeline dot  */
  .title::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: #FAE6B1;
    border-radius: 999px;
    border: 5px solid #FFA101;
  }
  
  /* text right if the card is even  */
  .card:nth-child(even) > .info > .title {
    text-align: right;
  }
  
  /* setting dot to the left if the card is odd */
  .card:nth-child(odd) > .info > .title::before {
    left: -45px;
  }
  
  /* setting dot to the right if the card is odd */
  .card:nth-child(even) > .info > .title::before {
    right: -45px;
  }
  
  .timeline li {
    color: #D0EAF0;
  }
/*------------HP figures--------------*/
.value-img {
  width: 100%;
}