/* RESET */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Poppins',sans-serif; line-height:1.6; }

/* CONTAINER */
.container { width:90%; max-width:1100px; margin:auto; }

/* KNAPPAR */
.btn {
  display:inline-block;
  padding:0.7rem 1.5rem;
  border-radius:4px;
  text-decoration:none;
  font-weight:600;
}
.btn-primary { background:#ff5e57; color:#fff; }
.btn-primary:hover { opacity:0.9; }

/* HEADER */
header {
  background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
  position:sticky; top:0; z-index:100;
}
.nav-container {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 0;
}
.logo { font-size:1.5rem; font-weight:600; }
.logo span { color:#ff5e57; }
header nav {
  display:flex; gap:1.2rem;
}
header nav a {
  text-decoration:none; color:#333; font-weight:500;
}
/* Mobil-meny */
.menu-toggle { display:none; background:none; border:none; font-size:1.2rem; }

/* HERO (externa bilder) */
.hero {
  position:relative;
  height:80vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  background:
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
    url('/ImageBG.png?auto=format&fit=crop&w=1600&q=80')
    center/cover no-repeat;
}
.hero-text h2 { font-size:2.8rem; margin-bottom:1rem; text-shadow:0 2px 6px rgba(0,0,0,0.7); }
.hero-text p  { margin-bottom:1.5rem; text-shadow:0 2px 4px rgba(0,0,0,0.5); }

/* SEKTIONSSTILAR */
.section-light { background:#f9f9f9; padding:4rem 0; }
.section-dark  { background:#222; color:#fff; padding:4rem 0; }
.section-dark a { color:#ff5e57; text-decoration:none; }

/* OM-SEKTIONEN */
.features {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2rem; margin-top:2rem;
}
.feature {
  text-align:center;
}
.feature i {
  font-size:2rem; color:#ff5e57; margin-bottom:0.5rem;
}

/* GALLERI */
.gallery {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1rem; margin-top:2rem;
}
.gallery-item img {
  width:100%; display:block;
  border-radius:4px;
  transition:transform 0.3s;
}
.gallery-item img:hover { transform:scale(1.05); }

/* FOOTER */
footer .container {
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.social a {
  color:#eee; margin:0 0.5rem; font-size:1.2rem;
}

/* RESPONSIVT */
@media(max-width:768px) {
  .menu-toggle { display:block; }
  header nav {
    display:none;
    flex-direction:column;
    background:#fff;
    position:absolute; top:100%; right:0;
    width:200px; padding:1rem;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
  }
  header nav.show { display:flex; }
}