/*heropicture*/

.heropicture {
    height: 100vh;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.heropicture img {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.heropicture::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.hero-content {
    display: flex;
    /* Enable flex container */
    flex-direction: column;
    /* Stack children vertically */
    align-items: center;
    /* Center children horizontally */
    justify-content: center;
    /* Center children vertically */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #fff;
    text-align: center;
    width: 90%;
    max-width: 600px;
}

.hero-content h1 {
    font-size: 5rem;
    margin-bottom: 1rem;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

.scroll-icon {
    width: 100px;
    /* Adjust icon size */
    height: 100px;
    filter: invert(100%);
    animation: bounce 2s infinite;
    z-index: 10;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

/*infosection*/


/*kitchen*/
.kitchen {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem;
  color: white;
}

.image-kitchen {
  flex: 1;
  padding-right: 2rem;
}

.image-kitchen img {
  width: 100%;
  height: auto;
}

.details-kitchen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
  color: white;
}

.details-kitchen h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.kitchen-h2 {
  width: 100%;
}

.details-kitchen hr {
  width: 50%; /* Length of the horizontal rule */
  border: 1px solid #fff; /* Horizontal rule style */
  margin-bottom: 2rem;
}

.list-kitchen {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
}

.list-kitchen ul {
  padding: 0px;
  margin: 0;
  text-align: left;
}

.list-kitchen ul li {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}



/*bedroom*/

.bedroom {
  display: flex;
  align-items: center;
  justify-content: center; /* Center align items horizontally */
  padding: 2rem;
  color: white;
  background-color: #5f1629; /* This color will be the background for the bedroom section */
}

.image-bedroom {
  flex: 1;
  padding-left: 2rem; /* Add padding between text and image */
  order: 2; /* Image on the right */
}

.image-bedroom img {
  width: 100%;
  height: auto;
}

.details-bedroom {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center; /* Align text to the left */
  text-align: center; /* Text aligned left */
  padding: 2rem; /* Same padding as the kitchen for consistency */
  order: 1; /* Text on the left */
}

.details-bedroom h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  color: white; /* Text color white */
  align-self: center; /* Center the heading in the flex container */
}

.list-bedroom {
  display: flex;
  justify-content: flex-start; /* Align the list items to the start */
  flex-wrap: wrap; /* Wrap items in case of overflow */
  gap: 3rem; /* Gap between list columns */
  text-align: left;
}

.list-bedroom ul {
  padding: 0;
  margin: 0;
}

.list-bedroom ul li {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.details-bedroom hr {
  width: 50%; /* Length of the horizontal rule */
  border: 1px solid #fff; /* Horizontal rule style */
  margin-bottom: 2rem;
}


  /*outdoors*/
  .outdoorarea {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem;
    color: white;
  }
  
  .image-outdoorarea {
    flex: 1;
    padding-right: 2rem;
  }
  
  .image-outdoorarea img {
    width: 100%;
    height: auto;
  }
  
  .details-outdoorarea {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    color: white;
  }
  
  .details-outdoorarea h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
  }
  
  .kitchen-h2 {
    width: 100%;
  }
  
  .details-outdoorarea hr {
    width: 50%; /* Length of the horizontal rule */
    border: 1px solid #fff; /* Horizontal rule style */
    margin-bottom: 2rem;
  }
  
  .list-outdoorarea {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;
  }
  
  .list-outdoorarea ul {
    padding: 0px;
    margin: 0;
    text-align: left;
  }
  
  .list-outdoorarea ul li {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

/*bathroom*/

.bathroom {
  display: flex;
  align-items: center;
  justify-content: center; /* Center align items horizontally */
  padding: 2rem;
  color: white;
  background-color: #5f1629; /* This color will be the background for the bedroom section */
}

.image-bathroom {
  flex: 1;
  padding-left: 2rem; /* Add padding between text and image */
  order: 2; /* Image on the right */
}

.image-bathroom img {
  width: 100%;
  height: auto;
}

.details-bathroom {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center; /* Align text to the left */
  text-align: center; /* Text aligned left */
  padding: 2rem; /* Same padding as the kitchen for consistency */
  order: 1; /* Text on the left */
}

.details-bathroom h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  color: white; /* Text color white */
  align-self: center; /* Center the heading in the flex container */
}

.list-bathroom{
  display: flex;
  justify-content: flex-start; /* Align the list items to the start */
  flex-wrap: wrap; /* Wrap items in case of overflow */
  gap: 3rem; /* Gap between list columns */
  text-align: left;
}

.list-bathroom ul {
  padding: 0;
  margin: 0;
}

.list-bathroom ul li {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.details-bathroom hr {
  width: 50%; /* Length of the horizontal rule */
  border: 1px solid #fff; /* Horizontal rule style */
  margin-bottom: 2rem;
}

/*rules*/
.rules-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: white;
  }
  
  .rules-image {
    flex: 1;
    position: relative;
  }
  
  .rules-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .rules-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Adjust the opacity for desired shadow darkness */
    z-index: 0;
  }
  
  .rules-details {
    flex: 1;
    padding-left: 2rem;
    text-align: center;
    background: #5f1629; /* Assuming white background for the text box */
    border: 1px solid white;
    margin-left: -200px; /* Adjust as per your layout needs */
    padding: 1rem;
    z-index: 1;
  }
  
  .rules-details h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
  
  .rules-details hr {
    margin: 1rem auto;
    width: 50px;
    border: none;
    border-top: 3px solid white;
  }
  
  .rules-list {
    list-style: none;
    padding: 0;
    text-align: center; /* Align the rules text to the left */
  }
  
  .rules-list li {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }


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

    .hero-content h1{
      font-size: 3rem;
    }

    /* Adjustments for all sections in mobile view */
    .kitchen, .bedroom, .outdoorarea, .bathroom, .rules-section {
      flex-direction: column;
      align-items: center;
      padding: 1rem; /* Reduced padding for smaller screens */
    }
  
    .image-kitchen, .image-bedroom, .image-outdoorarea, .image-bathroom, .rules-image {
      order: 2;
      padding: 0;
      margin-top: 1rem; /* Adds margin above the image */
    }
  
    .image-kitchen img, .image-bedroom img, .image-outdoorarea img, .image-bathroom img, .rules-image img {
      width: 100%;
      height: auto;
      max-height: 300px; /* Optional: if you want to limit the height of the images */
    }
  
    .details-kitchen, .details-bedroom, .details-outdoorarea, .details-bathroom, .rules-details {
      order: 1;
      text-align: center;
      padding: 1rem 0; /* Top and bottom padding */

    }
  
    .details-kitchen h2, .details-bedroom h2, .details-outdoorarea h2, .details-bathroom h2, .rules-details h2,
    .details-kitchen hr, .details-bedroom hr, .details-outdoorarea hr, .details-bathroom hr, .rules-details hr {
      width: 100%;
      margin-bottom: 1rem; /* Adjust the space below the horizontal rule */
    }
  
    .list-kitchen, .list-bedroom, .list-outdoorarea, .list-bathroom, .rules-list {
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
  
    .list-kitchen ul, .list-bedroom ul, .list-outdoorarea ul, .list-bathroom ul, .rules-list ul {
      width: 100%; /* Full width for smaller screens */
      padding: 0;
      margin: 0;
    }
  
    .list-kitchen ul li, .list-bedroom ul li, .list-outdoorarea ul li, .list-bathroom ul li, .rules-list li {
      font-size: 1.2rem; /* Adjust font size for readability on mobile */
      margin-bottom: 0.5rem;
      text-align: center; /* Center text for list items */
    }
  
    /* Specific rules section adjustments if needed */
    .rules-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1rem;
      text-align: center;
    }
  
    .rules-details {
      width: 100%;
      border: none; /* Remove the border if it's not needed for mobile */
      margin: 0; /* Reset any specific margins */
      padding: 1rem 0; /* Provide some vertical padding */
      background: transparent; /* Make the background consistent */
    }
  
    .rules-details h2 {
      font-size: 2rem; /* Adjust font size if necessary */
      margin-bottom: 0.5rem;
    }
  
    .rules-details hr {
      width: 80%; /* Adjust the width of the horizontal rule to fit the content */
      margin: 0.5rem auto; /* Center the horizontal rule */
    }
  
    .rules-list {
      list-style-type: none; /* Remove list bullets */
      padding: 0;
      margin: 0 auto; /* Center the list */
      width: 100%; /* Adjust the width as necessary */
    }
  
    .rules-list li {
      font-size: 1.2rem; /* Adjust font size for readability */
      margin-bottom: 0.5rem; /* Add some space between the list items */
    }
  
    .rules-image {
      display: none; /* Hide the rules image on smaller screens if it's not needed */
    }
  }