/* css/main.css */

/* 1. GLOBAL STYLES & RESET */
@import url('base.css');

/* 2. COMPONENT STYLES */
@import url('header.css');
@import url('hero.css');
@import url('services.css');
@import url('worked-with.css');
@import url('about.css');
@import url('footer.css');

/* 3. PAGE LAYOUT RULES */
/* Only add code here that handles how sections sit on the page */
/* Update in css/main.css */

/* Update in css/main.css */

/* Update in css/main.css */

.page-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;               /* Fluid for mobile */
  max-width: 1220px;         /* Overall page boundary */
  margin: 0 auto;            /* Centers the site */
  min-height: 100vh;
  background-color: var(--neutral-gray);
  position: relative;
  
  /* Vertical Lines for Desktop */
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}

#main-content {
  width: 100%;
  padding-top: 0; 
}



#hero {
  width: 100%;
  /* Content Width Requirement: 1220px */
  max-width: 1220px; 
  margin: 0 auto;
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
  .page-wrapper {
    width: auto;             /* Lets margins work */
    margin: 0 auto;          /* Proper 16px spacing */
    border-left: none;       /* Remove lines on mobile */
    border-right: none;
  }
}