body {
  margin: 0;
  font-family: Arial, sans-serif;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f3f3f3;
  flex-wrap: wrap; /* Ensures header content wraps on smaller screens */
}

.header-left, .header-center, .header-right {
  flex: 1 1 auto; /* Allows each section to grow and shrink as needed */
  display: flex;
  align-items: center;
  justify-content: center; /* Center content for better alignment, especially on mobile */
  flex-wrap: wrap; /* Allows content within to wrap */
}

.header-left {
  justify-content: flex-start;
}

.header-right {
  justify-content: flex-end;
}

.header-left select {
  margin-right: 30px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.header-left .contact-number {
  font-size: 20px;
  font-weight: bold;
  color: #2F4F4F;
}

.company-logo {
  max-height: 100px; /* Ensures the logo is not too large */
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; /* Allows nav items to wrap */
}

nav ul li {
  margin-left: 25px;
  white-space: nowrap; /* Prevents nav items from breaking into multiple lines */
}

nav ul li a {
  text-decoration: none;
  color: #2F4F4F;
}

nav ul li a:hover {
  text-decoration: underline;
}

.social-icon {
  margin-left: 15px;
  font-size: 24px;
}

.social-icon:hover {
  opacity: 0.8;
}
/* Facebook icon color */
.social-icon.facebook i {
  color: #4267B2; /* Facebook's brand blue */
}
/* Instagram icon color */
.social-icon.instagram i {
  color: #C13584; /* Instagram's brand pinkish color */
}
/* Media query for smaller screens */
@media (max-width: 768px) {
  header {
    flex-direction: column; /* Stacks header sections vertically on small screens */
  }

  .header-left, .header-center, .header-right {
    justify-content: center;
    padding: 10px 0;
  }

  nav ul {
    justify-content: center;
  }

  .header-left select, .header-left .contact-number, .social-icon {
    margin: 5px; /* Adjusts margin for smaller screens */
  }

  nav ul li {
    margin: 5px 10px; /* Adjusts nav item spacing for smaller screens */
  }
}


/* Existing CSS for the hero section */
.hero-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width:  100%;
  height:  90vh; /* Adjust the height as needed */
  overflow: hidden; /* Ensures no overflow from the image */
}


  
  /* Update the hero image styling */
  .hero-image {
    max-width: 95%; /* Makes the image fit 80% of the hero section's width */
    max-height: 95vh; /* Adjusts the height to not exceed 80% of the viewport height */
    object-fit: contain; /* Ensures the image is scaled properly */
  }
  
  /* Adjust the hero content to be positioned over the image if needed */
  .hero-content {
    position: absolute;
    top: 25%; /* Adjust this value to position the text lower or higher at the top */
    left: 55%;
    transform: translate(-50%, 0); /* Adjusted to keep the content centered horizontally */
    text-align: center;
    color: #36454F; /* Ensure text color contrasts well with the hero image */
    width: 80%; /* Optional: Adjust the width of the text container */
  }
  
  /* Keep the rest of your CSS for .hero-title and .hero-buttons unchanged */
  
  /* Style for the info box */
.info-box {
  position: absolute;
  top: 20%; /* Adjust as needed */
  left: 20%; /* Adjust as needed */
  width: 40mm;
  height: 30mm;
  background-color: rgba(0, 0, 255, 0.5); /* Blue with 50% transparency */
  color: rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hide the hover text by default */
.hover-text {
  display: none;
}

/* Style for the text inside the box */
.box-text, .hover-text {
  position: absolute;
  text-align: center;
  font-size: 18px; /* Adjust as needed */
}

/* Change styles on hover */
.info-box:hover {
  background-color: rgba(121, 228, 160, 0.309); /* Blue becomes opaque */
}

.info-box:hover .box-text {
  display: none; /* Hide the "apartment" text */
}

.info-box:hover .hover-text {
  display: block; /* Show the "virtual tour" text */
}
/* Define default values for custom properties at the :root or hero-section level */
:root {
    --box-width: 40mm;
    --box-height: 52mm;
    --box-vertical-position: 41%; /* Adjust for vertical positioning */
    --box-horizontal-position: 3%; /* Adjust for horizontal positioning */
  }
  
  /* Style for the info box, utilizing custom properties */
  .info-box {
    position: absolute;
    top: var(--box-vertical-position);
    left: var(--box-horizontal-position);
    width: var(--box-width);
    height: var(--box-height);
    background-color: rgba(9, 241, 13, 0.309); /* Blue with 70% transparency */
    color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  /* Hide the hover text by default */
  .hover-text {
    display: none;
  }
  
  /* Style for the text inside the box */
  .box-text, .hover-text {
    position: absolute;
    text-align: center;
    font-size: 18px; /* Adjust as needed */
  }
  
  /* Change styles on hover */
  .info-box:hover {
    background-color: rgba(228, 155, 121, 0.309); /* Blue becomes opaque */
  }
  
  .info-box:hover .box-text {
    display: none; /* Hide the "apartment" text */
  }
  
  .info-box:hover .hover-text {
    display: block; /* Show the "virtual tour" text */
  }
  /* Existing styles for the first box */

  
  /* New custom properties for the second box */
  :root {
    --box2-width: 50mm; /* Default width for the second box */
    --box2-height: 26mm; /* Default height for the second box */
    --box2-vertical-position: 52%; /* Default vertical position for the second box */
    --box2-horizontal-position: 14.7%; /* Default horizontal position for the second box */
  }
  
  /* Existing styles for .info-box */
  .info-box {
    position: absolute;
    width: var(--box-width);
    height: var(--box-height);
    top: var(--box-vertical-position);
    left: var(--box-horizontal-position);
    background-color: rgba(228, 155, 121, 0.309);
    color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  /* Change styles on hover */
.info-box:hover {
  background-color: #62a16b
}
  /* Additional styles for the second box */
  .second-box {
    width: var(--box2-width);
    height: var(--box2-height);
    top: var(--box2-vertical-position);
    left: var(--box2-horizontal-position);
  }
  
  /* Keep the rest of your CSS unchanged */
  /* Extend :root with custom properties for the third box */
:root {
    --box3-width: 50mm; /* Default width for the third box */
    --box3-height: 26mm; /* Default height for the third box */
    --box3-vertical-position: 63.5%; /* Default vertical position for the third box */
    --box3-horizontal-position: 14.7%; /* Default horizontal position for the third box */
  }
  
  /* Existing styles for .info-box reused for consistency */
  
  /* Additional styles for the third box */
  .third-box {
    width: var(--box3-width);
    height: var(--box3-height);
    top: var(--box3-vertical-position);
    left: var(--box3-horizontal-position);
  }
  
  /* Keep the rest of your CSS for .info-box and hover effects unchanged */
  /* Extend :root with color custom properties for each box */
:root {
    /* Colors for the first box */
    --box1-bg-color: rgba(228, 155, 121, 0.309); /* Default background color for the first box */
    --box1-hover-color: #707971; /* Hover color for the first box */
  
    /* Colors for the second box */
    --box2-bg-color: rgba(0228, 155, 121, 0.309); /* Default background color for the second box */
    --box2-hover-color: #62a16b; /* Hover color for the second box */
  
    /* Colors for the third box */
    --box3-bg-color: rgba(228, 155, 121, 0.309); /* Default background color for the third box */
    --box3-hover-color: #62a16b; /* Hover color for the third box */
  }
  
  /* Apply color custom properties to each box */
    /* Common styles */
  
  .first-box {
    background-color: var(--box1-bg-color);
  }
  
  .first-box:hover {
    background-color: var(--box1-hover-color);
  }
  
  .second-box {
    background-color: var(--box2-bg-color);
  }
  
  .second-box:hover {
    background-color: var(--box2-hover-color);
  }
  
  .third-box {
    background-color: var(--box3-bg-color);
  }
  
  .third-box:hover {
    background-color: var(--box3-hover-color);
  }
 /* Extend :root with custom properties for the fourth and fifth boxes */
:root {
  /* Fourth box properties */
  --box4-width:  39mm;
  --box4-height:  52mm;
  --box4-vertical-position:  41%;
  --box4-horizontal-position:  26%;
  --box4-bg-color: rgba(228,  155,  121,  0.309); /* Default background color */
  --box4-hover-color: rgba(98,  161,  107,  1); /* Corrected hover color */
 
  /* Fifth box properties */
  --box5-width:  50mm;
  --box5-height:  26mm;
  --box5-vertical-position:  63.5%;
  --box5-horizontal-position:  38%;
  --box5-bg-color: rgba(228,  155,  121,  0.309); /* Default background color */
  --box5-hover-color: #62a16b; /* Hover color */
}

/* Apply custom properties to the fourth box */
.fourth-box {
  width: var(--box4-width);
  height: var(--box4-height);
  top: var(--box4-vertical-position);
  left: var(--box4-horizontal-position);
  background-color: var(--box4-bg-color);
}

.fourth-box:hover {
  background-color: var(--box4-hover-color);
}

  
  /* Apply custom properties to the fifth box */
  .fifth-box {
    width: var(--box5-width);
    height: var(--box5-height);
    top: var(--box5-vertical-position);
    left: var(--box5-horizontal-position);
    background-color: var(--box5-bg-color);
  }
  
  .fifth-box:hover {
    background-color: var(--box5-hover-color);
  }
  /* Extend :root with custom properties for the sixth, seventh, and eighth boxes */
:root {
    /* Sixth box properties */
    --box6-width: 50mm;
    --box6-height: 26mm;
    --box6-vertical-position: 52%;
    --box6-horizontal-position: 38%;
    --box6-bg-color: rgba(228, 155, 121, 0.309); /* Default background color */
    --box6-hover-color: #62a16b; /* Hover color */
  
    /* Seventh box properties */
    --box7-width: 39mm;
    --box7-height: 52mm;
    --box7-vertical-position: 41%;
    --box7-horizontal-position: 49.7%;
    --box7-bg-color: rgba(255, 165, 0, 0.5); /* Default background color */
    --box7-hover-color: #62a16b; /* Hover color */
  
    /* Eighth box properties */
    --box8-width: 50mm;
    --box8-height: 26mm;
    --box8-vertical-position: 63%;
    --box8-horizontal-position: 61.6%;
    --box8-bg-color: rgba(228, 155, 121, 0.309); /* Default background color */
    --box8-hover-color: #62a16b; /* Hover color */
  }
  
  /* Apply custom properties to the sixth box */
  .sixth-box {
    width: var(--box6-width);
    height: var(--box6-height);
    top: var(--box6-vertical-position);
    left: var(--box6-horizontal-position);
    background-color: var(--box6-bg-color);
  }
  
  .sixth-box:hover {
    background-color: var(--box6-hover-color);
  }
  
  /* Apply custom properties to the seventh box */
  .seventh-box {
    width: var(--box7-width);
    height: var(--box7-height);
    top: var(--box7-vertical-position);
    left: var(--box7-horizontal-position);
    background-color: var(--box7-bg-color);
  }
  
  .seventh-box:hover {
    background-color: var(--box7-hover-color);
  }
  
  /* Apply custom properties to the eighth box */
  .eighth-box {
    width: var(--box8-width);
    height: var(--box8-height);
    top: var(--box8-vertical-position);
    left: var(--box8-horizontal-position);
    background-color: var(--box8-bg-color);
  }
  
  .eighth-box:hover {
    background-color: var(--box8-hover-color);
  }
  /* Extend :root with custom properties for the ninth, tenth, and eleventh boxes */
:root {
    /* Ninth box properties */
    --box9-width: 50mm;
    --box9-height: 26mm;
    --box9-vertical-position: 52%;
    --box9-horizontal-position: 61.7%;
    --box9-bg-color: rgba(228, 155, 121, 0.309); /* Default background color */
    --box9-hover-color: #62a16b; /* Hover color */
  
    /* Tenth box properties */
    --box10-width: 39mm;
    --box10-height: 52mm;
    --box10-vertical-position: 41%;
    --box10-horizontal-position: 73%;
    --box10-bg-color: rgba(228, 155, 121, 0.309); /* Default background color */
    --box10-hover-color: #62a16b; /* Hover color */
  
    /* Eleventh box properties */
    --box11-width: 50mm;
    --box11-height: 26mm;
    --box11-vertical-position: 52%;
    --box11-horizontal-position: 84.7%;
    --box11-bg-color: rgba(228, 155, 121, 0.309); /* Default background color */
    --box11-hover-color: #62a16b; /* Hover color */
  }
  
  /* Apply custom properties to the ninth box */
  .ninth-box {
    width: var(--box9-width);
    height: var(--box9-height);
    top: var(--box9-vertical-position);
    left: var(--box9-horizontal-position);
    background-color: var(--box9-bg-color);
  }
  
  .ninth-box:hover {
    background-color: var(--box9-hover-color);
  }
  
  /* Apply custom properties to the tenth box */
  .tenth-box {
    width: var(--box10-width);
    height: var(--box10-height);
    top: var(--box10-vertical-position);
    left: var(--box10-horizontal-position);
    background-color: var(--box10-bg-color);
  }
  
  .tenth-box:hover {
    background-color: var(--box10-hover-color);
  }
  
  /* Apply custom properties to the eleventh box */
  .eleventh-box {
    width: var(--box11-width);
    height: var(--box11-height);
    top: var(--box11-vertical-position);
    left: var(--box11-horizontal-position);
    background-color: var(--box11-bg-color);
  }
  
  .eleventh-box:hover {
    background-color: var(--box11-hover-color);
  }
  /* Extend :root with custom properties for the twelfth box */
:root {
    /* Twelfth box properties */
    --box12-width: 50mm;
    --box12-height: 26mm;
    --box12-vertical-position: 64%;
    --box12-horizontal-position: 84.5%;
    --box12-bg-color: rgba(228, 155, 121, 0.309); /* Default background color */
    --box12-hover-color: #62a16b; /* Hover color */
  }
  
  /* Apply custom properties to the twelfth box */
  .twelfth-box {
    width: var(--box12-width);
    height: var(--box12-height);
    top: var(--box12-vertical-position);
    left: var(--box12-horizontal-position);
    background-color: var(--box12-bg-color);
  }
  
  .twelfth-box:hover {
    background-color: var(--box12-hover-color);
  }
/* Your existing CSS styles here */

/* Add a media query to hide the info boxes on screens smaller than  768 pixels */
@media (max-width:  767px) {
  .info-box {
      display: none;
  }
  /* Ensure the hero image is visible on mobile */
  .hero-image {
      display: block;
  }
}

  footer {
    background-color: #015e0d;
    color: white;
    text-align: center;
    padding: 20px 0;
}

.footer-content {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.footer-section h3 {
    margin-bottom: 15px;
}

.footer-section p {
    margin: 5px 0;
}

.footer-section p a {
    color: #ffffff;
    text-decoration: none;
}

.footer-section p a:hover {
    text-decoration: underline;
}

.footer-bottom {
    padding: 10px 0;
    font-size: 0.8em;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
    }
    
    .footer-section {
        margin-bottom: 20px;
    }
}
.image-box img {
  width: 200%; /* Adjust to make the image width relative to its container */
  max-width: 1500px; /* Decrease the max-width to make images smaller */
  height: auto; /* Keeps the aspect ratio of the image */
}
.image-headline {
  margin-bottom: 10px;
  font-size: 20px; /* Adjust based on your preference */
  text-align: center; /* Centers the headline text */
}


.social-icon {
  margin-left: 15px;
  font-size: 24px; /* Icon size */
}

.social-icon:hover {
  opacity: 0.8; /* Slightly reduce opacity on hover for a subtle effect */
}
footer {
  background-color: #0d4414;
  color: white;
  text-align: center;
  padding: 20px 0;
}

.footer-content {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.footer-section h3 {
  margin-bottom: 15px;
}

.footer-section p {
  margin: 5px 0;
}

.footer-section p a {
  color: #ffffff;
  text-decoration: none;
}

.footer-section p a:hover {
  text-decoration: underline;
}

.footer-bottom {
  padding: 10px 0;
  font-size: 0.8em;
}

@media (max-width: 768px) {
  .footer-content {
      flex-direction: column;
  }
  
  .footer-section {
      margin-bottom: 20px;
  }
}