/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/* ------ Medium screens (≤ 1024px): mobile layout shift ------ */
@media (max-width: 64em) {

  .main {
    margin-left: 0;
    padding-top: var(--menu-height-mobile);
    transition:
      margin-left var(--transition-default),
      padding-top var(--transition-default);
  }
}

/* ------ Small screens (≤ 768px): stacking and scaling ------ */
@media (max-width: 48em) {
 #contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-xl) var(--spacing-md);
    min-height: auto;
  }

  .section__content {
    max-width: 100%;
    text-align: center;
    padding: 0 var(--spacing-md);
  }
  .section__content--left {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    text-align: center;
    align-items: center;
  }

  .section__team-wrapper {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    padding: 0 var(--spacing-md);
   
  }  

  .section {
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .section--active
  {
    max-width: 100%;
     padding-left: auto; 
     padding-right: auto;
     padding-top: var(--spacing-xl);
  } 

  .process__sidebar {
    position: static;
    width: 100%;
    text-align: center;
    margin-bottom: var(--spacing-md);
  }
  
  .process__sidebar-title {
    font-size: var(--text-lg);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
  }

  .process__inner {
    flex-direction: column;
  }

  .process__content {
    padding: 0 var(--spacing-md);
  }
}