/* Style each section */
section {
  padding: 2%;
  text-align: center;
}

/* home page styling */
#home {
  height: 100vh;
  background-image: url("/images/torshavnSnowy.webp ");
  max-width: 100%;
  background-size: cover;
}
#home .landingText {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 1px; /* Adjust margin as needed */
  width: 50%; /* Set a maximum width for the container */
  padding: 5px; /* Adjust padding as needed */
  background-color: rgba(0, 0, 0, 0.337); 
  text-align: left;
}

#home h1, #home p {
  color: white;
}


#home .bottom-left-text h1 {
  margin-bottom: 2%; /* Adjust the margin-bottom as needed */
}



/* end home page styling */


/* styling for my about us */
#about {
  height: 50vh;
}

.aboutContainer {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* Align flex items to the start of the cross axis (vertically) */
  text-align: left;
}

.aboutImage, .textContainer {
  width: 50%;
}

.aboutImage {
  margin-right: 2%;
  height: 50vh;
  overflow: hidden;
}

.aboutImage img {
  width: 100%;
  height: auto;
}

/* text to take up all available horizontal space */
.textContainer {
  flex: 1;
}

/* end of about us section */


/* Safety Page */
#safety {
  height: 50vh;
}

.safetyContainer {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
}

.safetyImage, .textContainer {
  width: 50%;
}

.safetyImage {
  margin-left: 2%; /* Adjust margin for spacing */
  height: 50vh;
  overflow: hidden;
}

.safetyImage img {
  width: 100%;
  height: auto;
}

.textContainer {
  flex: 1;
}
/* end of satefy page */

/* start of places */

/* this is the actual space of the page */
#places {
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}


.place {
  text-align: center;
  cursor: pointer;
}

.place img {
  width: 100%;
  max-width: 80vw; /* after playing, this makes it look better on smaller screen. Remember if changing!! */
  border-radius: 15px;
}

.placesHolder {
  border: 0.2vw solid #bd5800;
  border-radius: 2%;
  margin-right: 1%;
  padding: 10px;
  position: relative;
  overflow: hidden; 
  margin-bottom: 1%; 
}

.placesHolder .place {
  position: relative;
}

.placesHolder .place img {
  width: 100%;
  height: auto;
  display: block;
}

.placesHolder h3 {
  position: absolute;
  bottom: 0;
  left: 0%;
  width: 98%;
  background-color: #b0b0b0;
  margin: 0;
  padding: 1%;
  color: white;
}



/* end of places */

#newsletter {
  background-color: #bd5800;
}

#contact {
  background-color: #b0b0b0;
}

/* Responsive - for smaller screens less than 600px */
@media screen and (max-width: 600px)  {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .aboutContainer {
    flex-direction: column;
  }

  .aboutImage, .textContainer {
    width: 100%; /* On smaller screens, make them each take up the full width */
  }
  .safetyContainer {
    flex-direction: column-reverse; /* Ah okay, so colum reverse, flips it and makes it how I want it. So TEXT BELOW the image */
  }

    .safetyImage, .textContainer {
      width: 100%;
      margin: 0; /* Remove margin on smaller screen */
    }
  
  /* This gets rid of the gap between image and text */
  .safetyImage, .aboutImage{
    height: auto;
    margin-bottom: 2%;
  }

  /* this makes the section smaller (having it auto), just not sure why so much space still. */
  #safety, #about{
    height: fit-content;
  }

  #places {
    flex-direction: column; /* Stack items vertically on smalle */
    align-items: center; /* Center items vertically */
    height: 140vh;
  }
  
  .placesHolder {
    margin-right: 0; /* Remove margin on smaller screens */
    border: 0.2em solid #bd5800;
    margin-bottom: 1%;
  }

  #about h1 p, #safety h1 p{
   padding-left: 1%; 
  }
}