/* styles.css */

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.6;
  background-color: #ffffff;
  color: #ffffff; /* #2c2c2c */
}

header {
  background-color: #5c754c; /* #2e4f2e; /* #5c754c; /* Forest green #2e4f2e*/
  color: #ffffff;
  padding: 2rem;
  text-align: center;
  font-size: 1.5rem;
  font-family: 'Brush Script MT', cursive;
}

h1, h2 {
  margin-bottom: 1rem;
}

.stripe {
  height: 10px;
  background-color: #ffffff; /* Slightly lighter forest green */
}

.image-block-1 {
  position: relative;
  overflow: hidden;
  height: 700px; /* Cropped height */
  /*justify-content: center;*/
  align-items: center;
}

.image-block-2 {
  /*position: relative;*/
  overflow: hidden;
  /*height: 300px; /* Cropped height */
}

.full-width-image {
  width: 100%;
  /*height: auto;*/
  height: 100%;
  object-fit: cover; /* Crops the image instead of squishing */
  /*max-height: 80%;*/
  display: block;
  align-items: center;
}

.text-block-1 {
  position: absolute;
  top: 16%;
  /*left: 7%;*/
  right: 12%;
  align-items: center;
  background-color: rgba(46,79,46,0.8);
  color: white;
  padding: 1rem;
  text-align: center;
  /*transform: translate(-50%, 75%);*/
  font-size: 1.5rem;
  max-width: 35vw;
  min-width: 10vw;
}

.welcome {
  font-size: 2.5vw;
}

.welcome-content {
  font-size: 1.5vw;
}

.img-inset-1 {
  position: absolute;
  top: 10%;
  right: 12%;
  background-color: rgba(46,79,46,0.8);
  color: white;
  padding: 1rem;
  text-align: center;
  font-size: 1.5rem;
  max-width: 35vw;
  z-index: 9;
  /*border-radius: 8px;*/
  /*transform: translateY(-10%);*/
  /*width: 27vw;*/
  height: auto;
  /*object-fit: cover;*/
  border-radius: 8px;
}

.img-inset-1 img {
  width: 22vw;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

.overlay-element-1 {
  position: absolute;
  top: 16%;
  /*left: 50%;*/
  /*transform: translate(-10%, -50%);*/
  z-index: 10;
  background-color: rgba(46,79,46,0.8);
  color: white;
  padding: 1rem;
  /*max-width: 30%;*/
  border-radius: 8px;
  /*bottom: 10%;*/
  left: 7%;
  text-align: center;
  /*transform: translateY(-120%);*/
  font-size: 1.5rem;
  /*max-width: 500px;*/
  max-width: 35vw;
}

.overlay-element-2 {
  position: absolute;
  top: 16%;
  /*bottom: 10%;*/
  right: 12%;
  /*left: 50%;*/
  /*transform: translate(-10%, -50%);*/
  z-index: 9;
  background-color: rgba(46,79,46,0.8);
  color: white;
  padding: 1rem;
  /*max-width: 30%;*/
  border-radius: 8px;
  transform: translateY(-10%);
  font-size: 1.5rem;
  max-width: 35vw;
}

.overlay-element-2 img {
  width: 27vw;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

.overlay {
  position: absolute;
  background-color: rgba(46,79,46,0.8); /*rgba(92, 117, 76, 0.8); /* Forest green with opacity */
  color: white;
  padding: 1rem;
  max-width: 80%;
  border-radius: 8px;
  /*font-size: 1.5rem; /* Larger text */
}

.overlay.left {
  bottom: 10%;
  left: 7%;
  text-align: center;
  transform: translateY(-30%);
  font-size: 1.5rem;
  max-width: 500px;
}

.overlay.right {
  bottom: 10%;
  right: 12%;
  text-align: center;
  transform: translateY(-10%);
  font-size: 1.5rem;
  max-width: 500px;
}

.overlay.right img {
  width: 350px;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

.overlay.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  min-width: 500px;
}

.details-section {
  background-color: #5c754c; /* Light green background #e6f0e6*/
  padding: 4rem 2rem;
  text-align: center;
}

.short-section {
  background-color: #5c754c; /* Pale forest green tint #f4f9f4*/
  padding: 2rem;
  text-align: center;
}

.content-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .overlay {
    font-size: 1rem;
    padding: 0.75rem;
  }

  .text-block-1 {
    position: absolute;
    font-size: 2rem;
    padding: 0.75rem;
    top: 30%;
    right: 25%;
    max-width: 50vw;

    /*
    position: absolute;
    top: 16%;
    left: 7%;
    right: 12%;
    align-items: center;
    background-color: rgba(46,79,46,0.8);
    color: white;
    padding: 1rem;
    text-align: center;
    transform: translate(-50%, 75%);
    font-size: 1.5rem;
    max-width: 35vw;
    min-width: 10vw;
    */
  }
  
  .welcome {
    font-size: 1.5rem;
  }
  
  .welcome-content {
    font-size: 0.75rem;
  }

  .details-section, .short-section {
    padding: 2rem 1rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.3rem;
  }
}