html,
body {
  position: relative;
  height: 100%;
}

@media screen and (max-width: 1100px) {
  html, body {
    font-size: 240% !important; /* Apply !important */
  }
 
}

.menu {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  > align-self: flex-end;
  text-align: left;
  display: flex;
  justify-content: center;
  font-size: .9rem;
  line-height: 1.5rem;
  >margin-right: 50px;
  vertical-align:central;
  font-family: Nimbus Sans, sans-serif;
  background-color: #44a2c8;
  height: 90px;
}
.menu-SG {
  width: 100%;
  margin-left: auto;
  margin-right: auto;

  text-align: left;
  display: flex;
  justify-content: center;
  font-size: .9rem;
  line-height: 1.5rem;

  vertical-align: central;
  font-family: Nimbus Sans, sans-serif;
  >background-color: transparent;
  >height: 65px;
}












body {
  background: white;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.dom {
  width: 25px;
  >margin-right: 7px;
  >margin-left: 7px;
  >margin-top: 0px;
  justify-content: center
}

.previews-container {
  display: flex;

  flex-wrap: wrap;
  justify-content: center;
  margin: 1rem auto 4rem;
  >max-width: 85%;
  width: 85%;
  box-sizing: border-box;
}








.article-preview-main {
  scroll-margin-top: 3.5rem;
  margin-bottom: 1rem;
  margin-right: .75rem;
  background-color: white;
  width: 45%;
  min-width: 630px;

  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

@media screen and (max-width: 1100px) {

  .previews-container {
    width: 90% !important;
  }
}
@media screen and (max-width: 1100px) {

  .article-container {
    width: 90% !important;
  }
}





  .article-preview {
    scroll-margin-top: 3.5rem;
    margin-bottom: 1rem;
    margin-right: .75rem;
    background-color: white;
    width: 30%;
    min-width: 350px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  }

    .article-preview:hover .preview-title {
      text-decoration: underline;
      text-decoration-color: #44a2c8;
      text-underline-offset: 0.2rem;
    }

    .article-preview:hover .preview-title-small {
      text-decoration: underline;
      text-decoration-color: #44a2c8;
      text-underline-offset: 0.2rem;
    }

  .image-container {
    overflow: hidden;
  }

  .preview-image {
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: transform .3s ease-out;
  }

    .preview-image:hover {
      transform: scale(1.1);
    }

  .preview-type {
    color: #121212;
    margin-top: .5rem;
    margin-bottom: 0rem;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .65rem;
    >>letter-spacing: .13rem;
    line-height: .8rem;
    font-family: GeographWeb, sans-serif;
  }

  .article-tags, .article-type-publication-date, .article-type-publication-text {
    color: #121212;
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .65rem;
    letter-spacing: .13rem;
    line-height: .8rem;
    font-family: GeographWeb, sans-serif;
  }

  .article-type-publication-text {
    border-right: #44a2c8 solid 0.2rem;
    padding-right: 0.5rem;
  }

  .article-type-publication-date {
    padding-left: 0.5rem;
  }

  .preview-title {
    color: #121212;
    >>margin-bottom: .05rem;
    font-weight: 500;
    font-size: 1.2rem;
    >>letter-spacing: .13rem;
    line-height: 1.5rem;
    font-family: GeographEditWeb, Helvetica, Arial, sans-serif
  }

  .preview-title-small {
    color: #121212;
    >>margin-bottom: .05rem;
    font-weight: 500;
    font-size: 1.1rem;
    >>letter-spacing: .13rem;
    line-height: 1.4rem;
    font-family: GeographEditWeb, Helvetica, Arial, sans-serif
  }

  a {
    text-decoration: none;
    color: #666;
    margin: 0;
    padding: 0;
  }

  .preview-tags {
    color: #666;
    font-size: .8rem;
    line-height: 1.5rem;
    font-family: GeographEditWeb, sans-serif
  }
.preview-text {
  color: #121212;
  font-family: GeographEditWeb, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

 

  .article-container {
    width: 85%;
    height: auto;
    > margin-top: 3.5rem;
    margin-top: 1.5rem;
    margin-left: auto;
    margin-right: auto;
  }

  .menu-image-container {
    background-color: #333333;
    width: 5rem;
    height: 5rem;
  }

  .menu-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .article-image-container {
    >padding-left: 1rem;
    height: auto;
    display: flex;
    justify-content: space-between;
    >>>align-items: center;
    background-color: #ececec;
  }

  .article-image-container1 {
    >padding-left: 1rem;
    display: flex;
    align-items:flex-start;

    background-color: #ececec;
    >margin-bottom: 300px;
  }

.container {
  width: 100%;
  gap:0;
}

.image-wrapper {
  background-color: #8a7d8e;
  height: 207px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

}

.przewodnik-image {
  max-height: 100%;
  height: auto;

}

.stacked-images {
  display: flex;
  
  flex-direction:column;
  max-height: 100%;
 
}


.clickable-image {
  cursor: pointer;
  max-height: 50%;
  height: auto;

}


  
 










  .article-description-container {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 0px;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
  }



  .article-image-description-container {
    flex: 0 0 50%;
    min-height: 13rem
  }

  .article-image-description-container1 {
    flex: 0 0 60%;
  
  }

.article-image-description-container2 {
 > flex: 0 0 60%;

}

  .map-responsive {
    position: relative;
    width: 100%; /* Set the width to 100% */
  }


    .map-responsive iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }




  .article-image {
    flex: 0 0 70%;
  }

  .article-logo {
   height: 40px;
    >width: 100px;
    display: flex;
    flex-wrap: wrap;
    vertical-align: central;
    justify-content: center;
    background-color: transparent;
    margin-bottom: 25px;
    margin-right: 25px;
    margin-top: 25px;
    >> padding-left: 1rem;
  }

.article-logo2 {
  >height: 40px;
  >width: 154px;
  >display: flex;
  > flex-wrap: wrap;
  >vertical-align: central;
  >justify-content: center;
  background-color: transparent;
  >margin-left: 120px;
  >margin-right: 120px;
  >margin-bottom: 25px;
  >margin-top: 25px;
}




  header {
    left: 0;
    top: 0;
    width: 100%;
    position: fixed;
    display: block;
    height: 3.1rem;
    z-index: 1000;
  }

{
  (.footer) > display: flex;
  > background-color: #333333;
  > width: 100%;
  > color: white;
  > font-family: GeographEditWeb, sans-serif;
  > font-size: .8rem;
  > line-height: 1.5;
  > height: 15rem;
}

.article-type {
  padding-top: 1rem;
}

.article-title, .top-preview-title {
  margin-top: 1rem;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  color: #121212;
  font-weight: 400;
  font-size: 2rem;
  >>letter-spacing: .08rem;
  line-height: 3rem;
  font-family: GeographEditWeb, sans-serif;
}

.article-introduction {
  text-align: left;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: calc(100% - 1rem);
  max-width: 180ch;
  display: flex;
  color: #121212;
  font-weight: 400;
  font-size: .9rem;
  >>letter-spacing: .08rem;
  line-height: 1.5rem;
  font-family: GeographEditWeb, sans-serif
}

.top-preview-introduction {
  text-align: center;
  margin-left: 2rem;
  width: calc(100% - 4rem);
  max-width: 130ch;
  display: flex;
  justify-content: center; /* Center the content horizontally */
  align-items: center; /* Center the content vertically */
  color: #121212;
  font-weight: 400;
  font-size: .9rem;
  >>letter-spacing: .08rem;
  line-height: 1.5rem;
  font-family: GeographEditWeb, sans-serif;
}

.article-text-title {
  text-align: left;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;
  color: #121212;
  font-weight: 400;
  font-size: 1.5rem;
  >>letter-spacing: .1rem;
  line-height: 1.5rem;
  font-family: GeographEditWeb, sans-serif;
  padding-left: 0rem;
  text-transform: uppercase;
}

.article-text {
  margin: 3rem auto;
  text-align: justify;
  text-justify: inter-word;
  width: 100%;
  color: #121212;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  font-family: GeographEditWeb, sans-serif;
  padding-left: 1rem;
}

.article-image-description-title, .article-image-description, .article-image-copyrights, .article-image-description-image-type {
  text-align: left;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: calc(100% - 1.5rem);
  color: #121212;
  font-weight: 400;
 
  >>letter-spacing: .08rem;
  line-height: 1.5rem;
  font-family: GeographEditWeb, sans-serif;
  padding-left: 1rem;
}

.article-image-description-image-type, .article-image-copyrights {
  font-size: 0.9rem;
}

.article-image-description {
  font-size: 0.9rem;
}

.article-image-description-title {
  text-transform: uppercase;
  font-size: 1.5rem;
}

.article-image-copyrights {
  border-left: #44a2c8 solid 0.2rem;
  column-count: 2;
  column-gap: 30px; /* Adjust the gap between columns as needed */
  text-align: left;
  margin-left: 1rem;
}


  .main-container {
  height: 350px;
  background-color: #44a2c8;
  position: relative;
  overflow: hidden;




}

.inner-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: start;
  overflow: hidden;
  >overflow-x: hidden;
  width: 100%;
  height: 100%; /* Takes the full height of .main-container */
}

.white-bar {
  position: absolute;
  width: 85%; /* 85% of the main container width */
  height: 10%; 
  bottom: 0;
 left: 7.5%; /* Centers the bar horizontally */

  background-color: white; /* White color */
}



  .inner-container img {
    max-width: 100%; /* Updated */
    max-height: 100%;
  }

    .inner-container img:hover {
      cursor: pointer;
    }

.preferred-trip-container {
  height: 350px;
  background-color: #6b838e;
  >position: relative;
  margin-bottom: 100px;
}

.inner-preferred-trip-container {
  >position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: start;
  overflow: auto;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  >left: 7.5%;
}

  .inner-preferred-trip-container img {
    max-width: none; /* Updated */
   > max-height: 85%; /* Modified */
    max-height: 100%;/* Modified */
    cursor: pointer;
  }

    .inner-preferred-trip-container img:hover {
      cursor: pointer;
    }

















.top-preview-articles-container {
  
  background-color: #44a2c8;
  height: 35px;
 > background-repeat: no-repeat;
 > background-size: contain;
 > background-position: center;
  display: flex;

 > align-items: center;
  justify-content: center;
}

.top-preview-texts-container {
  width: 85%;
  height: 35px;
  >margin-left: auto;
  >margin-right: auto;
  align-self:center;
  background-color: white;
  >text-align: center;
  display: flex;
  >align-items: center;
  >justify-content: center;
  >padding-bottom: 1.5%;
}


.main-container1 {
  height: 400px;
  background-color: #df6138;
  position: relative;
}

.main-container2 {
  height: 400px;
  background-color: #46a2cb;
  position: relative;
}

.main-container3 {
  height: 400px;
  background-color: #7f7e83;
  position: relative;
}

.main-container4 {
  height: 400px;
  background-color: #366541;
  position: relative;
}



  





























.top-preview-title {
  display: block;
}

.top-article-previews-divider {
  border-bottom: #da663e solid 0.2rem;
   height: 50%;
  width: 5rem;
  margin-right: auto;
  margin-left: auto;
 align-self:center;
}

.preview-texts-container {
  padding: 0rem 1rem 0.5rem 1rem;
}


footer {
  font-size: .8rem;
  line-height: 1.5rem;
  font-family: GeographEditWeb, sans-serif
}

.footer-upper {
  background-color: white;
  border-top: 1px solid #cecece;
  color: #cecece;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto; /* Allow horizontal scrolling */
  white-space: nowrap; /* Prevent content from wrapping */
}

.footer-lower {
  color: white;
  background-color: #44a2c8;
}

.footer-head {
  width: auto;
  padding: 0.7rem
}

.footer-icon {
  display: flex;
  align-items: center;
}

.footer-logo-partners {
  max-width: 130px;
  max-height: 50px;
  margin: 5px 15px; /* Use shorthand to set margin */
}

.footer-logo-zzt {
  / max-width: 30px;
  height: 35px;
  /margin: 0px 5px; /* Use shorthand to set margin */
}

.footer-logo {
  width: 35px;
  margin-right: 7px;
  margin-left: 7px;
  margin-top: 5px;
  justify-content: center
}
.footer-logo-f {
  width: 30px;
  margin-right: 7px;
  margin-left: 7px;
  margin-top: 5px;
  justify-content: center
}
.dom {
  width: 40px;
  margin-right: 40px;
  margin-left: 7px;
  margin-top: 0px;
  margin-bottom: 7px;
  justify-content: center
}


.footer-mid-bottom {
  display: flex;
  justify-content: center;
}

  .footer-mid-bottom a {
    color: white;
    text-decoration: none;
    transition: text-decoration 0.3s ease-in-out;
  }

    .footer-mid-bottom a:hover {
      text-decoration: underline;
    }

.footer-rights {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1rem;
  font-size: 0.6rem;
  text-align: center
}



#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 24px;
  background-color: #da663e;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;

}

  #back-to-top:hover {
    background-color: #555;
  }

* {
  box-sizing: border-box;
}

.centered-container {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  >>>height: 40vh;
  height: auto;
  margin: 0;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem
}

.custom-image-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
  margin: 0 auto; /* Center the container horizontally */
  max-width: 100%; /* Ensure the container doesn't exceed the viewport width */
}


  .custom-image-container img {
    margin: 0;
    object-fit: cover; /* Ensure images are not stretched */
    width: auto;
    max-width: calc(100% / 3);
  > height: 40vh;
    max-height: 40vh;
  }

@media screen and (max-width: 1100px) {
  .custom-image-container img {
    margin: 0;
    object-fit: cover; /* Ensure images are not stretched */
    width: auto;
    max-width: calc(100% / 1);
    >height: 43vh;
    max-height: 43vh;
  }
}





.scroll-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  cursor: pointer;
  font-size: 1.5rem;
  z-index: 1;
}

.scroll-left {
  left: 0;
}

.scroll-right {
  right: 0;
}


.hidden {
  display: none;
}




#navbar {
  width: 85%;
  background-color: transparent;
  align-self:center;
  z-index: 9999;
  transition: transform 0.3s ease-in-out;
  position: fixed;
  top: 0;
}

  #navbar a {
    display: inline-block;
   > color: #474747;
    color:white;
    text-align: center;
    > padding: 14px 16px;
    padding: 24px 16px 16px 0;
    text-decoration: none;
    >font-size: 17px;
  }

    #navbar a:hover {
      > background-color: #ddd;
      > color: black;
      text-decoration: underline;
    }


#navbar1 {
  width: 100%;
  background-color: transparent;
  z-index: 9999;
  transition: transform 0.3s ease-in-out;
  position: fixed;
  top: 0;
}

  #navbar1 a {
    display: inline-block;
    color: white;
    text-align: center;
    > padding: 14px 16px;
    padding: 14px 16px 14px 0;
    text-decoration: none;
    >font-size: 17px;
  }

    #navbar1 a:hover {
      > background-color: #ddd;
      > color: black;
      text-decoration: underline;
    }