@media (max-width: 768px) {
  :root {
    --navbar-height: 4rem;
    --section-title-size: 5.5vw;
    --section-padding-vertical: 8vw;
    --section-separation: 8vw;
    --gallery-spacing: 70vw;
    --gallery-card-width: 70vw;
    --brands-spacing: 30.2vw;
    --brands-spacing-2: 44.7vw;
    --brands-spacing-3: 56.5vw;
  }

  .navbar {
    justify-content: flex-start;
  }

  .navbar-toggle {
    display: flex;
    order: 2;
    margin-left: auto;
  }

  .navbar-section-name {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-web-background);
    font-size: 3.5vw;
    font-weight: 700;
    letter-spacing: 0.03vw;
    pointer-events: none;
    white-space: nowrap;
  }

  .navbar-menu {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    width: 100%;
    background-color: var(--color-primary-background);
    border-bottom: 1px solid var(--color-primary-foreground);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  .navbar-menu.open {
    max-height: calc(100vh - var(--navbar-height));
  }

  .navbar-links {
    flex-direction: column;
    padding: 2vw 0;
    min-width: 50vw;
    align-items: stretch;
  }

  .navbar-links li + li {
    border-left: none;
  }

  .navbar-links li + li::before {
    display: none;
  }

  .navbar-links li {
    margin-bottom: 1.5vw;
  }

  .navbar-links li:last-child {
    margin-bottom: 0;
  }

  .navbar-links a {
    display: block;
    font-size: 3.5vw;
    padding: 1vw 5vw;
    margin: 0;
    text-align: center;
  }

  .hero-title {
    font-size: 9vw;
    white-space: nowrap;
  }

  .hero-subtitle {
    font-size: 3.6vw;
  }

  .hero-logo {
    width: 28vw;
  }

  .hero-separator {
    height: 6vw;
  }

  .about-content {
    flex-direction: column;
    gap: 5vw;
    padding: 0 8vw;
  }

  .about-image-left,
  .about-image-right {
    display: none;
  }

  .about-images-mobile {
    display: flex;
    justify-content: center;
    gap: 4vw;
  }

  .about-images-mobile .about-image {
    width: 30vw;
  }

  .about-images-mobile .about-image:first-child {
    transform: rotate(-6deg);
  }

  .about-images-mobile .about-image:last-child {
    transform: rotate(6deg);
  }

  .about-text {
    max-width: none;
    font-size: 3.8vw;
  }

  .gallery-card figcaption {
    font-size: 3.5vw;
  }

  .gallery-arrow {
    width: 10vw;
    height: 10vw;
    font-size: 6vw;
  }

  .gallery-prev {
    left: 3vw;
  }

  .gallery-next {
    right: 3vw;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 6vw;
    padding: 0 8vw;
  }

  .service-card h3 {
    font-size: 5vw;
  }

  .service-card p {
    font-size: 3.5vw;
  }

  .brands-carousel {
    height: 30vw;
    overflow: visible;
  }

  .brands-logo {
    width: 24vw;
    margin-left: -12vw;
    margin-top: -12vw;
  }

  .brands-logo span {
    font-size: 3vw;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 8vw;
    text-align: center;
  }

  .footer h3 {
    font-size: 5vw;
  }

  .footer li {
    justify-content: center;
    font-size: 3.5vw;
  }

  .footer li img {
    width: 4.5vw;
    height: 4.5vw;
  }

  .footer-slogan img {
    width: 18vw;
  }

  .footer-slogan p {
    font-size: 3.5vw;
  }

  .footer-copyright {
    font-size: 3vw;
  }
}