html, body {
  font-family: "Inter", sans-serif;
}
/* === RESET === */
* { margin:0; padding:0; box-sizing:border-box; font-family: Arial,sans-serif; }
body { line-height:1.6; background:#f9f9f9; }

/* === NAVBAR === */
.navbar { position:sticky; top:0; width:100%; background:#fff; display:flex; justify-content:space-between; align-items:center; padding:10px 20px; box-shadow:0 2px 5px rgba(0,0,0,0.1); z-index:1000; }
.brand { display:flex; align-items:center; gap:10px; }
.logo-img { height:40px; }
.nav-links { list-style:none; display:flex; gap:20px; transition:max-height 0.3s ease-in-out; }
.nav-link { text-decoration:none; color:#333; font-weight:bold; }
.nav-link:hover { color:#007BFF; }
.nav-toggle { display:none; flex-direction:column; justify-content:space-around; width:30px; height:25px; cursor:pointer; }
.nav-toggle span { width:100%; height:3px; background:#000; border-radius:3px; transition:all 0.3s ease; }
.nav-toggle.active span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }

/* === HERO === */
.hero { position:relative; min-height:70vh; display:flex; justify-content:center; align-items:center; text-align:center; background:#e0f0ff; overflow:hidden; padding:20px; }
.hero-content h1 { font-size:2.5rem; margin-bottom:15px; }
.hero-content p { font-size:1.2rem; margin-bottom:20px; }
.hero-btn { background:#222; color:#fff; border:none; padding:12px 25px; cursor:pointer; font-weight:bold; border-radius:5px; transition:all 0.3s ease; }
.hero-btn:hover { background:#007BFF; transform:scale(1.05); }
.hero-btn:focus, .hero-btn:active { background:#222 !important; outline:none; box-shadow:none; }

/* === SECTIONS === */
.section { padding:60px 20px; display:flex; flex-direction:column; align-items:center; }
.section h2 { text-align:center; margin-bottom:20px; }
.section h2::after { content:""; display:block; width:50%; height:3px; background:#007BFF; margin:8px auto 0; }

/* CARDS */
.cards { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:30px; }
.card { background:#fff; padding:20px; border-radius:10px; box-shadow:0 5px 10px rgba(0,0,0,0.1); flex:1 1 250px; max-width:90%; transition:all 0.3s ease; }
.card:hover { transform:translateY(-10px); box-shadow:0 10px 20px rgba(0,0,0,0.15); }

/* ABOUT */
.about-section { background:#f0f4f8; }
.about-container { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:40px; }
.about-icon { width:300px; border:3px solid #007BFF; border-radius:10px; }

/* CONTACT */
.contact-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin-top:30px; }
.contact-card { background:#fff; padding:20px; text-align:center; border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,0.1); width:300px; max-width:90%; overflow-wrap:break-word; }
.contact-card .icon { font-size:2rem; margin-bottom:10px; }
.contact-intro { text-align:center; }

/* FOOTER */
footer { text-align:center; padding:20px; background:#2f6fed; color:#fff; }

/* ANIMATIONS */
.fade-in, .slide-up { opacity:0; transform:translateY(20px); transition:all 0.6s ease-out; }
.appear { opacity:1; transform:translateY(0); }

/* FAQ */
.faq-container { max-width:800px; margin:0 auto; }
.faq { background:#fff; border-radius:10px; margin-bottom:15px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,0.08); }
.faq-question { width:100%; padding:18px 22px; background:#2f6fed; color:#fff; border:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:1.1rem; font-weight:600; }
.faq-answer { max-height:0; overflow:hidden; padding:0 22px; transition:max-height 0.35s ease; }
.faq-answer p { padding:15px 0; }
.faq-icon { font-size:1.4rem; transition:transform 0.3s ease; }

/* MEDIA QUERIES */
@media(max-width:768px){
.nav-links{ position:absolute; top:60px; right:0; background:#fff; width:100%; flex-direction:column; align-items:center; max-height:0; overflow:hidden; transition:max-height 0.3s ease-in-out;}
.nav-links.active{ max-height:600px; border-bottom:2px solid #000; box-shadow:0 4px 10px rgba(0,0,0,0.25);}
.nav-links li{ width:100%; text-align:center; padding:15px 0;}
.nav-toggle{ display:flex;}
.hero-content h1{ font-size:2rem;}
.hero-content p{ font-size:1rem;}
.hero-btn{ padding:17px 33px; font-size:1.1rem; border-radius:8px;}
.about-container{ flex-direction:column; text-align:center; align-items:center;}
.about-icon{ width:90%; margin:0 auto;}
.contact-grid{ flex-direction:column; align-items:center; gap:20px;}
.contact-card{ width:90%; max-width:350px;}
.opening-hours{ width:100%; margin-top:20px; font-weight:bold; text-align:center;}
}
@media(max-width:480px){
.hero{ min-height:60vh;}
.hero-content h1{ font-size:1.6rem;}
.hero-content p{ font-size:0.95rem;}
}
/* DESKTOP – Om oss justering */
@media (min-width: 769px) {
    .about-text {
        text-align: center;
        max-width: 700px;   /* litt smalere linjebredde for penere lesbarhet */
        margin: 0 auto;     /* sentrerer tekstblokken */
    }

    .about-visual img.about-icon {
        width: 380px;       /* øker bildet (standard var 300px) */
    }

    .about-container {
        justify-content: center;
        gap: 60px;          /* litt mer luft mellom tekst og bilde */
    }
}