/* =============================================
       RESPONSIVE
       ============================================= */
    @media (min-width: 769px) and (max-width: 1100px) {
      :root { --sidebar-width: 210px; }
      nav ul li a { padding: 0.8rem 1.25rem; font-size: 0.8rem; }
      .sidebar-logo { padding: 2rem 1.25rem 1.5rem; }
      .sidebar-footer { padding: 1.25rem; }
    }

    @media (max-width: 768px) {
      #hamburger { display: flex; }

      #sidebar {
        transform: translateX(-100%);
      }

      #sidebar.open {
        transform: translateX(0);
      }

      #overlay.open {
        display: block;
      }

      #main {
        margin-left: 0;
      }

      section,
      #home {
        padding: 5rem 1.5rem 4rem;
      }

      .hero-title {
        font-size: 3rem;
      }

      h2.section-title {
        font-size: 2.2rem;
      }

      .hero-stats {
        gap: 1.5rem;
        flex-wrap: wrap;
      }

      footer {
        margin-left: 0;
        padding: 1.5rem;
        text-align: left;
      }
      .footer-cols {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
      .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
        margin-top: 1.5rem;
      }
    }

    .lang-toggle {
      display: block;
      margin-top: 0.75rem;
      background: #2a2a2a;
      border: 1px solid #3a3a3a;
      color: #aaa;
      font-family: 'Barlow', sans-serif;
      font-size: 0.75rem;
      padding: 0.4rem 0.75rem;
      cursor: pointer;
      letter-spacing: 1px;
      width: 100%;
      text-align: left;
      transition: background 0.2s, color 0.2s;
    }

    .lang-toggle:hover {
      background: #333;
      color: #fff;
    }

    /* =============================================
       BILLEDKARRUSEL
       ============================================= */
    .carousel {
      position: relative;
      width: 100%;
      height: 160px;
      overflow: hidden;
      margin-bottom: 1rem;
    }

    .carousel-slides {
      display: flex;
      height: 100%;
      transition: transform 0.35s ease;
    }

    .carousel-slides img {
      min-width: 100%;
      height: 160px;
      object-fit: cover;
      cursor: zoom-in;
      flex-shrink: 0;
    }

    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.45);
      border: none;
      color: #fff;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 0.85rem;
      line-height: 28px;
      text-align: center;
      z-index: 2;
      transition: background 0.2s;
      padding: 0;
    }

    .carousel-btn:hover { background: rgba(0,0,0,0.7); }
    .carousel-btn.prev { left: 6px; }
    .carousel-btn.next { right: 6px; }

    .carousel-dots {
      position: absolute;
      bottom: 6px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 5px;
    }

    .carousel-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(255,255,255,0.5);
      transition: background 0.2s;
    }

    .carousel-dot.active { background: #fff; }