/* css/main.css */

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

/* 2. COMPONENT STYLES */
@import url('header.css');
@import url('super-hero.css');
@import url('hero.css');
@import url('skills.css');
@import url('worked-with.css');
@import url('about.css');
@import url('academy.css');
@import url('why-choose-us.css');
@import url('contact-cta.css');
@import url('footer.css');
@import url('contact-form.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 */
  
  margin: 0 auto;            /* Centers the site */
  min-height: 100vh;
  background-color: var(--neutral-gray);
  overflow-x: clip;
  position: relative;
  
  
  
}

#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 */
    max-width: 100%;        /* Full width on mobile */
    margin: 0 auto;          /* Proper 16px spacing */
    border-left: none;       /* Remove lines on mobile */
    border-right: none;
  }
}