body, html{
  overflow-x: hidden;
  overflow-y: scroll !important;
} 

.intro {
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7%;
  }

.group {
    margin-top: 10%;
} 

.about-hosts {
    margin-top: 10%;
    margin-bottom: 10%;
}
  

h2 {
    font-family: "vollkorn", serif;
    font-weight: 800;
    font-style: normal;
    font-size: 4.5em;
    color: #335772 !important;
  }
  
 a {
    color: #f2f4ea;
    text-decoration: none !important;
  }

  .btn-bnb {
    margin-top: 1em;
  }

  .more-info {
    color: #335772 !important;
    text-decoration: underline !important;

  }


  /* Desktop styles - your existing styles should already handle this */


  /* Ensure images are always visible */
.image-container div {
  min-height: 200px; /* Or any appropriate height */
  width: 100%;
  background-size: cover;
  background-position: center;
}


@media (max-width: 767px) {

  .group {
    margin-bottom: 7em !important;
  }
  h2 {
    padding-top: .5em !important;
  }
  .group a {
    margin-top: 1em !important;
  }
  .mmore-info {
    margin-top: 1em !important;
  }
  
}

@media (max-width: 767px) {

  img.img-fluid:nth-child(4) {
    padding-top: 1em;
  }
  
  .text {
    padding: 1em 1em 0em 1em !important;
  }
  
  .eco-pods {
    margin-top: 5em !important;
  }
  .bedbreakfast {
    margin-top: 0em !important;
  }
  .button {
    margin-top: 1em;
    margin-bottom: 5em;
  }
  a.btn:nth-child(6) {
    margin-bottom: 5em;
  }
  .about-hosts {
    margin-bottom: 5em !important;
  }
  
}