/* General Classes */


.tekst-antialias {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



/* Hero Section */
.seksjon-helt {
  background-color: transparent;
}

.varsling-bar {
  background-color: #31BA96;
  padding: 0.25rem;
}

.varsling-innhold {
  display: flex;
  justify-content: center;
  align-items: center;
}

.varsling-tekst {
  color: #ffffff;
  font-size: 1rem;
  font-weight: bold;
  margin-left: 0.5rem;
  padding-top: 15px;
}

.beholder {
  max-width: 1600px;
  margin: 0 auto;
}

.seksjon-topp {
  display: flex;
  align-items: center;
  margin: 2rem 0 2.5rem;
}

.etikett-søk {
  font-weight: bold;
  margin-right: 3.5rem;
}

.søkeboks {
  margin-right: auto;
  background-color: transparent;
  border-radius: 0.5rem;
}

/* Social Icons */
.sosiale-ikoner {
  display: flex;
}

.ikon-lenke {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  margin-right: 0.5rem;
  border-radius: 9999px;
}

.ikon-facebook {
  background-color: #849fef;
}

.ikon-twitter {
  background-color: #a692ff;
}


/* Content Section */
.seksjon-innhold {
  display: flex;
  gap: 1rem;
  align-items: stretch; /* Ensure both sections align to the same height */
  
  
}

.hovedinnhold {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Ensure the promo banner takes up full space */
}

.promo-banner {
  position: relative;
  background-color: #2a2a2a;
  overflow: hidden;
  border: 1px solid #ffffff15;
  border-radius: 8px;
  justify-content: center;
  flex-grow: 1; /* Allow it to grow to match the height of the right side */
  
}

.bilde-promo {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.promo-tekst {
  position: relative;
  max-width: 36rem;
  padding: 8rem 2rem 6rem;
}

.merkelapp {
  padding: 0.25rem 0.75rem;
  border: 1px solid #ffffff15;
  color: #31BA96;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 9999px;
}

.overskrift {
  font-size: 3rem;
  font-weight: bold;
  margin: 1.5rem 0 2rem;
}

.høydepunkt {
  color: #31BA96;
}

.undertekst {
  color: #fff;
  font-size: 1.125rem;
  margin-bottom: 5rem;
}

.knapp-cta {
  background-color: #31BA96;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  padding: 1.5rem 2rem;
  border-radius: 0.375rem;
  transition: background-color 0.2s;
}

.knapp-cta:hover {
  background-color: #31BA9615;
}

.sideinnhold {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Evenly space the images */
  gap: 1rem; /* Reduced gap between images */
}

.bilde-plassholder {
  width: 100%; /* Ensure images take the full width of the container */
  height: 400px; /* Explicitly set a smaller height */
  object-fit: cover; /* Scale images without distortion */
  border-radius: 8px; /* Match the corner styling */
  border: 1px solid #ffffff15; /* Consistent border style */
}

.bilde-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ffffff15; /* Consistent border style */
}

/* Overlay itself */
.bilde-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent dark overlay */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 1; /* Initially hidden */
  transition: opacity 0.3s ease; /* Smooth fade-in effect */
}

/* Show overlay on hover */
.bilde-container:hover .bilde-overlay {
  opacity: 1;
}

/* Headings inside overlay */
.bilde-heading {
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Button inside overlay */
.bilde-button {
  background-color: #31BA96;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.375rem;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s;
}

.bilde-button:hover {
  background-color: rgba(49, 186, 150, 0.8); /* Slightly lighter on hover */
}


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

  .seksjon-topp {
    padding-left: 2%;
    padding-right: 2%;
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start; /* Align items to the left */
  }

  .etikett-søk {
    margin-bottom: 1rem; /* Add spacing between label and search box */
  }

  .søkeboks {
    width: 100%; /* Make search box take full width */
    margin-right: 0; /* Reset right margin */
    margin-bottom: 1rem; /* Add spacing between search box and icons */
  }

  .sosiale-ikoner {
    display: none;
  }


  .seksjon-innhold {
    flex-direction: column; /* Stack sections vertically */
    padding-left: 2%;
    padding-right: 2%;
  }

  .hovedinnhold,
  .sideinnhold {
    flex: 1;
  }

  .merkelapp {
    font-size: 0.40rem;
  }

  .bilde-plassholder {
    max-height: none;
    margin-bottom: 1rem;
  }

  .promo-tekst {
    padding: 4rem 1rem 2rem;
  }

  .overskrift {
    font-size: 2rem;
  }
}