html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

@media (max-width: 991.98px) {

  /* Mobile: normal scrolling */
  #home-mobile-1,
  #home-mobile-2 {
    min-height: auto !important;
  }

  /* Hide desktop bullets on mobile */
  .nav-bullets {
    display: none !important;
  }

  /* Uniform padding for all sections */
  section>.container,
  section>.container-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  section {
    margin-bottom: 0 !important;
  }

  /* Section-specific padding adjustments - remove top/bottom padding on mobile */
  #hero {
    min-height: 100vh !important;
    height: auto !important;
    padding: 0 !important;
  }

  #hero>.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #why {
    height: auto !important;
    padding: 0 !important;
  }

  #home {
    display: none !important;
  }

  #about-us {
    height: auto !important;
    padding: 0 !important;
  }

  #services {
    min-height: 80vh !important;
    height: auto !important;
  }

  #contact {
    height: auto !important;
    padding: 0 !important;
  }

  #info {
    height: auto !important;
    padding: 0 !important;
  }

  /* Section 02 mobile font reductions and button visibility */
  #about-us .section-02-header h2 {
    font-size: 2rem !important;
  }

  #about-us .section-02-list p {
    font-size: 0.95rem !important;
  }

  #about-us .create-btn {
    margin-top: 16px !important;
  }

  /* Contact heading: remove <br> on mobile */
  #contact h2 br {
    display: none !important;
  }

  /* Invert PRAKTISK INFO columns on mobile - accordion first, then title */
  /* Removed custom order overrides to allow Bootstrap classes to control layout */

  /* Section-specific heights on mobile - normal heights */
  #home {
    height: auto !important;
    padding-top: 2vh !important;
  }

  #about-us {
    height: auto !important;
  }

  #contact {
    height: auto !important;
  }

  /* Mobile center accordion */
  #info .praktisk-info-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #info .praktisk-info-content .p-5 {
    max-width: 90% !important;
    margin: 0 auto !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* WHY section: normal mobile layout */
  #why .row.g-0.align-items-stretch {
    flex-direction: column !important;
    min-height: auto !important;
  }

  #why .col-12.col-lg-6.order-lg-2.order-1>div {
    height: auto !important;
    min-height: 300px !important;
  }

  #why .col-12.col-lg-6.d-flex.align-items-center.order-lg-1.order-2 {
    height: auto !important;
    min-height: auto !important;
    align-items: center !important;
  }

  #why .why-section-content {
    max-width: 100% !important;
    padding: 20px !important;
    margin: 0 !important;
  }

  #why h2 {
    font-size: 1.8rem !important;
  }

  #why ul li {
    font-size: 1.1rem !important;
  }

  /* Remove global section min-heights on mobile to allow >200vh if needed */
  .container-fluid.p-0 .row {
    min-height: auto !important;
    height: auto !important;
  }

  .container-fluid.p-0 .col-12,
  .container-fluid.p-0 .col-lg-6 {
    height: auto !important;
  }

  .container-fluid.p-0 .col-lg-6>div {
    height: auto !important;
    min-height: auto !important;
  }

  /* Keep mobile visual order equal to desktop order-lg-* utilities */
  .row [class*="order-lg-1"] {
    order: 1 !important;
  }

  .row [class*="order-lg-2"] {
    order: 2 !important;
  }

  .row [class*="order-lg-3"] {
    order: 3 !important;
  }

  .row [class*="order-lg-4"] {
    order: 4 !important;
  }

  /* Hide info icon on mobile in Praktisk Info sections */
  .info-icon {
    display: none !important;
  }
}

/* Homepage contact form padding (desktop only) */
@media (min-width: 992px) {
  .contact-content-col {
    padding-top: 80px !important;
  }
}

/* Desktop accordion centering in Praktisk Info */
@media (min-width: 992px) {

  #info .col-12.col-lg-6.order-2,
  #info .col-12.col-lg-6.order-lg-2.order-2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #info .praktisk-info-content {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #info .praktisk-info-content .p-5 {
    margin: auto !important;
    max-width: 800px !important;
  }
}

/* Hide mobile home split on desktop */
@media (min-width: 992px) {

  #home-mobile-1,
  #home-mobile-2 {
    display: none !important;
  }
}

/* Desktop side bullets */
.nav-bullets {
  display: none !important;
}

.nav-bullets a {
  display: none !important;
}

/* Footer Styling */
.footer-home {
  background-color: #2a1a0a !important;
  width: 100%;
  margin-top: 0;
}

.footer-home a {
  transition: opacity 0.3s ease;
}

.footer-home a:hover {
  opacity: 0.8;
  text-decoration: underline !important;
}

.footer-logo img {
  max-width: 400px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

@media (min-width: 992px) {
  .footer-logo img {
    height: 75px;
    width: 373.93px;
    max-width: none;
  }
}

.footer-address,
.footer-email,
.footer-phone {
  line-height: 1.6;
}

.footer-links a {
  line-height: 2;
  font-weight: 500;
}

@media (max-width: 768px) {
  .footer-home {
    padding: 40px 20px 30px;
  }

  .footer-logo img {
    height: 40px;
    width: 199.422px;
    max-width: none;
  }

  .footer-address,
  .footer-email,
  .footer-phone {
    font-size: 1rem !important;
  }

  .footer-links a {
    font-size: 0.95rem !important;
  }
}

/* Footer styling */
.footer-home {
  position: relative !important;
  display: block !important;
  visibility: visible !important;
  z-index: 1000 !important;
  margin-top: 0 !important;
}

/* Import Gyaste font locally */
@font-face {
  font-family: 'Gyaste';
  src: url('/static/fonts/giyaste.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Global font override to Albert Sans */
* {
  font-family: 'Albert Sans', sans-serif !important;
}

/* Override global font for h1 with Albert Sans */
h1.display-4 {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 3.3rem !important;
}

/* Mobile responsive fixes - EXACT COPY FROM ARRANGEMENTER.CSS */
@media (max-width: 991.98px) {

  /* Remove padding from body on mobile */
  body {
    padding: 0 !important;
    padding-top: 0 !important;
    /* remove mobile gap under navbar */
  }

  /* Remove navbar gap on mobile */
  body {
    padding-top: 0 !important;
  }

  /* Ensure logo positioning matches meny.html on mobile */
  .navbar .container {
    justify-content: space-between !important;
  }

  .navbar .brand {
    position: relative !important;
    left: auto !important;
    transform: none !important;
  }

  .logo-img {
    vertical-align: middle !important;
    display: inline-block !important;
    max-height: 40px !important;
    width: auto !important;
  }

  /* Desktop navbar logo margin */
  @media (min-width: 992px) {
    .logo-img {
      margin-top: 15px !important;
    }
  }

  /* Remove global center alignment on mobile */

  /* Remove side paddings on mobile */
  .container,
  .row,
  .col-12,
  .col-lg-6,
  .col-lg-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Specific padding for text content */
  .p-3,
  .p-5 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Homepage cards mobile centering */
  .menu-cards .col-md-6.col-lg-3 {
    padding: 20px 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .menu-cards .card {
    max-width: 280px !important;
    width: 100% !important;
  }

  /* Banner content sizing to match banner-overlay */
  .banner-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;
  }

  .banner-content p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
  }

  .banner-content .btn {
    font-size: 16px !important;
    padding: 12px 24px !important;
  }
}

@media (max-width: 576px) {

  /* Further mobile adjustments for homepage */
  .banner-content p {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .banner-content .btn {
    font-size: 1rem !important;
    /* 16px */
    padding: 10px 30px !important;
    /* match btn-submit */
  }
}

/* Stili per la sezione di contatto */
.container-fluid.p-0 .row {
  min-height: 100vh;
}

.container-fluid.p-0 .col-lg-6:last-child>div {
  height: 100%;
}

.banner {
  width: 100%;
  height: 70vh;
  max-height: 70vh;
  background-image: url("/img/meny3.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-content {
  color: #fff;
  max-width: 800px;
  padding: 20px;
}

.banner-content p {
  font-size: 3.5rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.banner-content .btn {
  border: 2px solid #bf6d4b;
  border-radius: 0;
  padding: 12px 30px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #bf6d4b;
  background: transparent;
  font-size: 1.1rem;
}

.banner-content .btn:hover {
  background: #bf6d4b;
  color: #fff;
}

/* Specific styles for homepage buttons */
.btn-primary {
  background-color: #bf6d4b !important;
  border-color: #bf6d4b !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 12px 30px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 1.1rem !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover {
  background-color: #a85a3a !important;
  border-color: #a85a3a !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

.menu-card {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: transform 0.3s ease;
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1;
  pointer-events: none;
  aspect-ratio: 1 / 1;
  /* mantiene le card quadrate */
  width: 100%;
  border-radius: 0 !important;
}

.menu-card .card-overlay,
.menu-card {
  position: absolute;
  inset: 0;
}

.menu-card .card-title {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
}

.menu-card,
.menu-card,
.menu-card .card-overlay,
.card,
.fit-cover {
  border-radius: 0 !important;
}

.menu-card:hover {
  transform: translateY(-5px) scale(1.03);
}

@media (max-width: 991.98px) {
  .menu-cards .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}

@media (max-width: 767.98px) {

  .menu-cards .col-md-6,
  .menu-cards .col-lg-3 {
    width: 100%;
    margin-bottom: 0 !important;
  }

  .menu-card {
    aspect-ratio: 1 / 1;
  }
}

.card-overlay {
  position: absolute;
  inset: 0;
}

.menu-card .card-body {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
}

.menu-card .card-title {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
}

.cards-scroll-wrapper {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cards-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

.menu-gallery-card {
  flex: 0 0 240px !important;
  width: 240px !important;
  height: 240px !important;
  min-width: 240px !important;
  min-height: 240px !important;
  max-width: 240px !important;
  max-height: 240px !important;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.menu-gallery-card .card-body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.menu-gallery-card .card-title {
  color: #fff;
  font-weight: 700;
  font-family: 'Albert Sans', sans-serif;
  font-size: 22px;
  line-height: 1.15;
  margin: 0;
}

.card-overlay-gallery {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .menu-gallery-card {
    flex: 0 0 240px !important;
    width: 240px !important;
    height: 240px !important;
  }

}

/* Mobile-only line break */
.br-mobile {
  display: none;
}

@media (max-width: 768px) {
  .br-mobile {
    display: inline;
  }
}

@media (min-width: 992px) {
  h1.display-4 {
    font-size: 3.3rem !important;
  }
}

/* Section 01 subtitle + CTA mobile sizing */
@media (max-width: 768px) {
  .section-01-sub p {
    font-size: 2rem !important;
    line-height: 1.25 !important;
  }

  .section-01-sub .btn {
    padding: 14px 40px !important;
    font-size: 1rem !important;
  }
}

/* Section 01 cards - Unified sizing */

/* Desktop alignments */
@media (min-width: 992px) {
  .section-01-cards {
    justify-content: center;
  }

  .create-btn {
    margin-left: 12vw !important;
  }

  /* Card dimensions 300x300px on desktop */
  .menu-gallery-card {
    width: 300px !important;
    height: 300px !important;
    min-width: 300px !important;
    min-height: 300px !important;
    max-width: 300px !important;
    max-height: 300px !important;
    flex: 0 0 300px !important;
  }

  .menu-gallery-card .card-body {
    width: 300px !important;
    height: 300px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: absolute !important;
    inset: 0 !important;
  }

  .menu-gallery-card .card-title {
    text-align: center !important;
    margin: auto !important;
    font-size: 22px !important;
  }

  .menu-gallery-card .card-overlay-gallery {
    width: 300px !important;
    height: 300px !important;
    position: absolute !important;
    inset: 0 !important;
  }

}

/* Mobile alignments */
@media (max-width: 991.98px) {
  .create-btn {
    margin: 0 auto !important;
  }
}

/* Center block, keep text left-aligned */
.title-left-centered {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

@media (min-width: 992px) {
  .section-01-title.title-left-centered {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Section 02 - Mobile adjustments */
@media (max-width: 991.98px) {
  .row.g-0.align-items-stretch {
    flex-direction: column-reverse !important;
  }

  .row.g-0.align-items-stretch .col-lg-6:first-child {
    padding: 40px 20px !important;
  }

  .row.g-0.align-items-stretch .col-lg-6:last-child>div {
    min-height: 300px !important;
  }
}

/* Section 01 mobile: stack cards vertically (no horizontal scroll) and left-align header */
@media (max-width: 991.98px) {
  .cards-scroll-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    overflow: visible;
    padding-bottom: 0;
    justify-items: center;
  }

  .section-01-header {
    justify-content: flex-start;
  }

  .section-01-header h2 {
    font-size: 1.6rem;
  }

  .section-01-sub {
    height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .section-01-sub p {
    font-size: 2rem !important;
  }
}

/* Mobile section images: remove padding and put before text */
@media (max-width: 991.98px) {

  /* WHY section mobile tweaks: image on top full-width, left-align text */
  #why .row.g-0.align-items-stretch {
    flex-direction: column !important;
  }

  #why .col-12.col-lg-6.order-lg-2.order-1 {
    order: 1 !important;
  }

  #why .col-12.col-lg-6.order-lg-1.order-2 {
    order: 2 !important;
  }

  #why .col-12.col-lg-6.order-lg-2.order-1>div {
    min-height: 320px !important;
    width: 100% !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    width: calc(100% + 40px) !important;
  }

  #why h2 {
    white-space: normal !important;
    font-size: 1.8rem !important;
    text-align: left !important;
  }

  #why .p-5.w-100 {
    text-align: left !important;
  }

  #why ul {
    text-align: left !important;
    padding-left: 24px !important;
  }

  /* About-us section mobile: image first, remove padding */
  #about-us .row.g-0.align-items-stretch {
    flex-direction: column !important;
  }

  #about-us .col-12.col-lg-6:first-child {
    order: 2 !important;
  }

  #about-us .col-12.col-lg-6:last-child {
    order: 1 !important;
  }

  #about-us .col-12.col-lg-6:last-child>div {
    margin-left: -20px !important;
    margin-right: -20px !important;
    width: calc(100% + 40px) !important;
  }

  /* Contact section mobile: image first, remove padding */
  #contact .row.g-0.align-items-stretch {
    flex-direction: column !important;
  }

  #contact .col-12.col-lg-6:first-child {
    order: 2 !important;
  }

  #contact .col-12.col-lg-6:last-child {
    order: 1 !important;
  }

  #contact .col-12.col-lg-6:last-child>div {
    margin-left: -20px !important;
    margin-right: -20px !important;
    width: calc(100% + 40px) !important;
  }
}

/* Contact right image: desktop width only */
@media (min-width: 992px) {
  .home-contact-image {
    width: 950px !important;
  }
}

@media (max-width: 991.98px) {
  .home-contact-image {
    width: 100% !important;
  }
}

/* Praktisk Info padding alignment */
@media (min-width: 992px) {
  .praktisk-info-content {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }

  .praktisk-info-content .p-5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100%;
  }

  /* Center align PRAKTISK INFO section with the p-5 w-100 section */
  .pi-scope .col-12.col-lg-6.order-lg-1.order-2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .pi-scope .pi-title-block {
    text-align: left !important;
    width: 100% !important;
    padding-bottom: 100px !important;
    padding-left: 160px !important;
  }

  .pi-scope .info-icon {
    padding-left: 160px !important;
  }

  .pi-scope .praktisk-info-title {
    padding-left: 160px !important;
  }

  /* Removed problematic padding-left rule */
}

@media (max-width: 991.98px) {
  .praktisk-info-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Remove line breaks from text on mobile */
  .section-02-list p br {
    display: none !important;
  }
}

/* Reduce top/bottom padding by half (desktop and mobile) */
.praktisk-info-content {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.praktisk-info-content .p-5 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

/* Contact right image: desktop width only */
@media (min-width: 992px) {
  .home-contact-image {
    width: 950px !important;
  }
}

@media (max-width: 991.98px) {
  .home-contact-image {
    width: 100% !important;
  }
}

/* Praktisk Info padding alignment */
@media (min-width: 992px) {
  .praktisk-info-content {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }

  .praktisk-info-content .p-5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100%;
  }

  /* Center align PRAKTISK INFO section with the p-5 w-100 section */
  .pi-scope .col-12.col-lg-6.order-lg-1.order-2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .pi-scope .pi-title-block {
    text-align: left !important;
    width: 100% !important;
    padding-bottom: 100px !important;
    padding-left: 160px !important;
  }

  .pi-scope .info-icon {
    padding-left: 160px !important;
  }

  .pi-scope .praktisk-info-title {
    padding-left: 160px !important;
  }

  /* Removed problematic padding-left rule */
}

@media (max-width: 991.98px) {
  .praktisk-info-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Remove line breaks from text on mobile */
  .section-02-list p br {
    display: none !important;
  }
}

/* Desktop centering fix for Section 01 when container has asymmetric margins */
@media (min-width: 992px) {
  /* removed asymmetric offset */
}

/* Responsive H1 (display-4) on hero */
h1.display-4 {
  font-size: 3.3rem !important;
}

@media (max-width: 768px) {
  h1.display-4 {
    font-size: 2.0rem !important;
    line-height: 1.25;
  }

  /* Mobile button styles */
  .btn.create-btn {
    font-size: 32px !important;
  }

  /* Mobile contact number */
  .contact-number {
    font-size: 48px !important;
  }

  /* Mobile praktisk info title */
  .praktisk-info-title {
    font-size: 48px !important;
    text-align: center !important;
  }
}

/* Banner text uses Gyaste with responsive sizing */
.banner-text {
  font-size: 3.0rem !important;
}

@media (max-width: 768px) {
  .banner-text {
    font-size: 2.0rem !important;
  }
}

/* Desktop: remove lateral paddings for f5f0e8 sections */
@media (min-width: 992px) {
  section[style*="background: #f5f0e8"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Accordion button font size increase and arrow fix */
.accordion-button {
  font-size: 20px !important;
  padding: 1rem 1.25rem !important;
  height: auto !important;
  min-height: 50px !important;
}

/* Fix accordion arrow positioning */
.accordion-button::after {
  margin-left: auto !important;
  margin-right: 0 !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  background-size: 1.25rem !important;
}

/* Specific fix for Praktisk Info accordion arrows */
.pi-scope .accordion-button {
  padding-right: 2.5rem !important;
  position: relative !important;
}

.pi-scope .accordion-button::after {
  position: absolute !important;
  right: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: 1rem !important;
  height: 1rem !important;
  background-size: 1rem !important;
  flex-shrink: 0 !important;
}

/* SECTION 01 - Allineamento e dimensioni card aumentate */
@media (min-width: 992px) {

  /* Contenitore principale - centrato con margini auto */
  section:has(.section-01-header) .container {
    max-width: 1600px !important;
  }

  /* Cards unified sizing handled above */

  /* Cards wrapper - centrare le card */
  .cards-scroll-wrapper {
    justify-content: center !important;
    max-width: 100% !important;
  }
}

/* Home contact submit hover */
.home-contact-submit:hover {
  background-color: #bf6d4b !important;
  color: #ffffff !important;
  border: none !important;
}

/* Accordion item base height - collapsed state */
.pi-scope .accordion-item {
  margin-bottom: 24px !important;
  min-height: 50px !important;
  height: auto !important;
}

/* Accordion header fixed height */
.pi-scope .accordion-header {
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
}

/* Accordion button takes full header height */
.pi-scope .accordion-button {
  height: 50px !important;
  padding: 0 1rem !important;
  display: flex !important;
  align-items: center !important;
}

/* Smooth accordion collapse/expand - let Bootstrap handle states natively */
.pi-scope .accordion-collapse {
  transition: height 0.35s ease !important;
}

/* Body padding */
.pi-scope .accordion-body {
  padding: 1rem !important;
}

/* Vertical alignment for section 01 and 02 text */
@media (min-width: 992px) {
  .section-01-sub {
    text-align: center !important;
    padding-left: 0 !important;
  }

  /* Desktop-only padding for WHY section */
  .why-section-content {
    padding-left: 250px !important;
  }

  /* Section 02 header padding */
  .section-02-header {
    padding-left: 180px !important;
  }

  /* Section 02 list padding */
  .section-02-list {
    padding-left: 180px !important;
  }

  /* Align LAG NÅ button with din meny text */
  .create-btn {
    margin-left: 180px !important;
  }

  /* Keep section 01 sub centered */
  .section-01-sub {
    text-align: center !important;
    padding-left: 0 !important;
  }
}

/* Hover effect for second SE MER button */
.btn-outline-light:hover {
  background-color: white !important;
  color: #bf6d4b !important;
  border-color: white !important;
  transform: translateY(-2px) !important;
}

/* ================================================================
   CONTACT FORM - RICOSTRUITO DA ZERO
   ================================================================ */

/* --- LAYOUT BASE --- */
#contact {
  background: #fff5ee;
  min-height: 100vh;
}

#contact .container-fluid {
  height: 100%;
}

#contact .row {
  min-height: 100vh;
}

/* --- WRAPPER DEL FORM --- */
.contact-form-wrapper {
  max-width: 580px;
  width: 100%;
  padding: 30px 20px;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* --- HEADER --- */
.contact-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.contact-number {
  font-size: 3rem;
  font-weight: 700;
  color: #bf6d4b;
  line-height: 1;
}

.contact-title h2 {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
}

.contact-title .highlight {
  color: #b4ba93;
  font-weight: 700;
}

.contact-subtitle {
  color: #666;
  font-size: 1rem;
  margin-bottom: 20px;
  line-height: 1.6;
}

.contact-label {
  color: #000;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

/* --- FORM STYLING --- */
.contact-form {
  width: 100%;
}

.form-group {
  margin-bottom: 12px;
}

.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 12px;
}

.form-col {
  flex: 1;
}

.form-input {
  width: 100%;
  border: none;
  border-bottom: 2px solid #bf6d4b;
  border-radius: 0;
  background: transparent;
  padding: 8px 0;
  font-size: 1rem;
  color: #333;
  transition: border-color 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-bottom-color: #a85a3a;
}

.form-input::placeholder {
  color: #999;
}

textarea.form-input {
  resize: vertical;
  min-height: 80px;
}

.form-submit {
  text-align: center;
  margin-top: 20px;
}

.btn-submit {
  background: transparent;
  border: 2px solid #bf6d4b;
  border-radius: 0;
  color: #bf6d4b;
  padding: 10px 30px;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-submit:hover {
  background: #bf6d4b;
  color: #fff;
}

/* --- IMAGE SECTION --- */
.contact-image {
  height: 100%;
  min-height: 500px;
  width: 100%;
}

/* --- DESKTOP OPTIMIZATIONS --- */
@media (min-width: 992px) {
  .contact-form-wrapper {
    padding: 40px 60px;
    padding-top: 0 !important;
    max-width: 600px;
    margin-left: 0;
    margin-right: auto;
  }

  .contact-title h2 {
    font-size: 2.6rem;
  }

  .contact-image {
    min-height: 100vh;
  }
}

/* --- MOBILE ADJUSTMENTS --- */
@media (max-width: 991.98px) {
  #contact .row {
    flex-direction: column;
    min-height: auto;
  }

  .contact-form-wrapper {
    padding: 40px 20px;
  }

  .contact-header {
    gap: 15px;
  }

  .contact-number {
    font-size: 2.5rem;
  }

  .contact-title h2 {
    font-size: 1.8rem;
  }

  .contact-title h2 br {
    display: none;
  }

  .form-row {
    flex-direction: column;
    gap: 30px;
  }

  .contact-image {
    min-height: 300px;
    order: -1;
  }
}

/* --- MOBILE SMALL --- */
@media (max-width: 576px) {
  .contact-number {
    font-size: 2rem;
  }

  .contact-title h2 {
    font-size: 1.5rem;
  }

  .form-input {
    font-size: 1rem;
    padding: 10px 0;
  }

  .btn-submit {
    padding: 10px 30px;
    font-size: 1rem;
  }
}