body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%; /* Ensure body takes the full height of the viewport */
  display: flex;
}

.header {
  display: flex;
  justify-content: space-between; /* Ensures logo is on the left and nav on the right */
  align-items: center; /* Vertically centers the logo and nav */

  position: fixed; /* Keeps header fixed on scroll */
  width: 100%; /* Full width of the screen */
  top: 0; /* Stick to the top */
  right: 0%;
  background-color: rgb(238, 234, 234); /* Transparent background */
  z-index: 1000; /* Ensures header stays on top of other elements */
}

.logo-pic {
  max-width: 150px; /* Adjust the size of the logo */
  height: auto; /* Keeps the aspect ratio */
  display: block;
  padding-left: 40px;
}

.navlist {
  display: flex;
  gap: 20px; /* Adds space between menu items */
  list-style: none; /* Removes bullet points */
}

.navlist li {
  display: inline-block;
}

.navlist a {
  text-decoration: none;
  color: black; /* Adjust color */
  font-weight: 500;
  padding: 10px;
}

/* Menu icon styling for mobile, hidden on desktop */
.nav-icons {
  display: none;
}

.main-content {
  min-height: calc(100vh - 60px); /* Adjust based on the height of the header */
  padding-top: 60px; /* Ensure the header space is accounted for */
}

/* Style for both halves */
.half-page {
  width: 50%; /* Each half takes 50% of the width */
  height: 100vh; /* Full viewport height */
  display: block; /* Ensures the anchor tags behave like block elements */
  transition: opacity 0.3s ease-in-out; /* Smooth transition for hover effect */
  align-items: center;
  position: relative;
}

.left-link {
  background-image: url('assets/fastighetsutveckling_half.png'); /* Background for the left half */
  background-size: cover;
  background-position: center;
}

.right-link {
  background-image: url('assets/forhandlargruppen_half.png'); /* Background for the right half */
  background-size: cover;
  background-position: center;
}

/* Optional: Add hover effects for better user experience */
.half-page:hover {
  opacity: 0.8; /* Slightly darkens the section on hover */
}

.scroll {
  display: none; /* Hide arrow initially */
  position: fixed;
  bottom: 2.2rem;
  border-top: 2rem;
  right: 3.2rem;
}

.scroll i {
  font-size: 32px;
  color: #3eaeef;
  background: white;
  padding: 10px;
  border-radius: 2rem;
}

/* Define the slide-in animation */
@keyframes slideIn {
  0% {
    bottom: -100px; /* Off-screen initially */
    opacity: 0; /* Invisible */
  }
  100% {
    top: 50px; /* Final position */
    opacity: 1; /* Fully visible */
  }
}

/* Mobile responsiveness */
@media (max-width: 970px) {
  .half-page {
    width: 100%; /* Full width on mobile */
    height: 50vh; /* Half the height */
  }

  body {
    flex-direction: column; /* Stack vertically */
  }
}