@media screen and (max-width: 1200px) {
  .demo-space, .navbar, .team-brand-containers, .cta-container {
    max-width: 72.75rem;
  }

  .benefits-container{
    max-width: 71.563rem;
    gap: var(--size-5);
  }

  .testimonials-container { 
    max-width: 68.75rem;
    margin: var(--size-100) auto;
  }

  .logos {
    max-width: 62.5rem;
    margin: 0 auto;
  }

  .hire-us-container {
    padding: var(--size-100);
  }
  footer div { width: 13.75rem; }
}


@media screen and (max-width: 992px){
  .demo-space, .navbar, 
  .team-brand-containers, 
  .cta-container { max-width: 55.625rem; }

  .team-brand-containers, .cta-container { flex-wrap: wrap; }

  .teams, .brands { 
    width: 55.625rem;
    margin: 0;
    justify-content: center;
  }


  .benefits-container { max-width: 53rem; }

  .google { 
    bottom: -0.875rem;
    left: 7.562rem;
  }

  .paypal { 
    left: 11.625rem;  
    bottom: 4.187rem;
   }

  .atlas {
    position: relative; 
    bottom: -8.937rem;
    left: -925rem;
  }
  
  .asana { bottom: 8.938; }

  .benefits-card { justify-self: center; }

  .cta-img-container, .cta-img-container img { box-shadow: 0 -2.188rem var(--size-25) #ebf0f7; }

  .cta-img-container img { top: 0; }

  .why-me-container { max-width: 55.625rem; }

  .line { display: none;}

  .featured-video {
    width: 43.75rem;
    height: 20rem;
  }

  .testimonials-container {flex-wrap: wrap; }

  .message-container { 
    text-align: center; 
    top: var(--size-20);
  }
  
  .logos-container { max-width: 55rem; }

  .pricing-card-container { 
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }

  .pricing-card { margin: 0; }

  .perk-card { 
    justify-self: center;
    margin-bottom: var(--size-20); 
  }

  .hire-us-container { flex-wrap: wrap;}

  .hire-us { margin: 0;}


  .company-contact { grid-area: contact;}

  .company { grid-area: company; }

  .features { grid-area: features; }

  .documentation { grid-area: documentation; }

  .resources { grid-area: resources; }

  footer div { justify-self: center; }
}

@media screen and (max-width: 780px) {

  .responsive {
    position: absolute;
    top: 7rem;
    right: 2rem;
  }

  .responsive { display: none; }

  .responsive.active-nav { display: block; }

  .nav-links {
    flex-direction: column;
    align-items: self-end;
    height: 20rem;
    justify-content: space-between;
    background-color: var(--bg-color-light);
  }

  .burger-menu {
    display: block;
    cursor: pointer; 
    }

  .demo-space, .navbar, 
  .team-brand-containers, 
  .cta-container { max-width: 37.5rem; }

  .team-brand-containers { padding: var(--size-80) 0 ;} 

  .team-brand-containers, .cta-container { flex-wrap: wrap; }

  .brands {
    height: 12.5rem;
    width: 37.5rem;
  }

  .google { 
    bottom: -0.875rem;
    left: 7.562rem;
  }

  .paypal { 
    left: 7.625rem;
    bottom: -11.813rem;
   }

  .atlas {
    position: relative; 
    bottom: -8.937rem;
    left: -925rem;
  }
  
  .asana { 
    bottom: -9.941rem;
    left: -24.375rem;
   }

  .benefits-container { max-width: 37.5rem; }

  .featured-video {
    width: 35.75rem;
    height: 23.25rem;
  }

  .cta-img-container .banner { box-shadow: 0 -13px var(--size-10) #ebf0f7; }

  .why-me-container {
    max-width: 42.5rem; 
    margin: 0 auto; 
  }

  .line { display: none; }

  .combined, .basic { bottom: -1.25rem;}

  .components, .page { bottom: var(--size-20); }

  .circle-meaning { justify-content: space-around; }

  .meaning { padding: 0 1.063rem; }

  .testimonials-container { 
    max-width: var(--size-600);
    flex-wrap: wrap;
  }

  .message-container { 
    text-align: center; 
    top: var(--size-20);
  }

  .logos-container { max-width: 45.5rem; }

  .hire-us-container { flex-wrap: wrap;}

  .hire-us { margin: 0;}

  .pricing-card-container { 
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }

  .message-container {  
    text-align: center; 
    top: var(--size-20);
  }

  .pricing-card { margin: 0; }
}


@media screen and (max-width: 600px){

  .more-wrapper {
     display: block; 
     cursor: pointer;
    }

  .demo-docs-container { display: none; }

  .demo-docs-container.slide-active { display: block; }

  .demo-space {
    max-width: 350px;
    justify-content: space-evenly;
    width: 25rem;
    margin: 0;
    position: absolute;
    top: 2.25rem;
    animation-name: fade-in;
    animation-duration: 3s;
   } 
  
  .responsive { display: none;}

  .responsive.active-nav { display: block; }

  .burger-menu { display: block; }

  .navbar, 
  .team-brand-containers, 
  .cta-container { max-width: 28.75rem; }

  .team-brand-containers { padding: 0 0 var(--size-40); }

  .teams {
    margin-right: 0; 
    width: 28.75rem;
  }

  .teams h1 { font-size: var(--size-40); }

  .team-brand-containers, .cta-container, .hire-us-container { flex-wrap: wrap; }

  .google { 
    bottom: -6.5rem;
    right: 3.25rem;
   }

  .paypal { 
    top: 0.75rem;
    left: -0.75rem;
  }

  .google-ads { 
    left: 2rem;
    top: 1rem;
   }

  .atlas { 
    left: 2.125rem;
    top: var(--size-100);
  }

  .weave {
    top: 0.55rem;
    left: 1.25rem;
  }

  .asana { display: none; }

  .calendar { display: none; }

  .benefits-container { width: 17.75rem;}

  .cta-img-container .banner { box-shadow: 0 -2.188 var(--size-10) #ebf0f7;}

  .why-me-container { max-width: var(--size-600); }

  .why-me {
    width: 25rem;
    margin: 0 auto;
  }

  .why-me p { font-size: var(--size-18); }

  .components-container{ 
    flex-direction: column;
    height: 18.75rem;
    justify-content: space-between;
  }

  .circle-container { 
    display: flex; 
    flex-direction: row;
    width: 15.625rem;
    left: 0;
    justify-content: left;
  }

  .components, .page { bottom: 0; }

  .combined, .basic { bottom: 0; }

  .featured-video {
    width: 29.563rem;
    height: 15.625rem;
  }

  .testimonials-container {
    max-width: 30rem;
    margin: 0 auto;
  }

  .img-container { width: 29rem;}
  
  .woman-image { width: 25rem; }

  .dots {
    width: 11.125rem;
    bottom: 17.688rem;
  }

  .message-container { width: 25rem; }

  .logos-container { max-width: 29.75rem; }

  #logo-title { 
    max-width: 31.25rem; 
    margin: 0 auto;
  }

  .logos { 
    flex-direction: column;
    max-width: 29.75rem;
    margin: 0 auto;
    align-items: center;
    justify-content: space-around; 
    height: 18.75rem;
  }

  .logos img { width: 6.5rem;}

  .pricing-container { padding: var(--size-20) 0;}

  .pricing-card-container { flex-wrap: wrap-reverse; }

  .pricing-card { margin: 0; }

  .pricing-perks { 
    width: 19.75rem; 
    padding-bottom: var(--size-20);
  }
  
  .hire-us-container { padding: var(--size-100) 0;}

  .hire-us { margin: 0; }
} 

@media screen and (max-width: 430px) {
  .navbar, .team-brand-containers, .cta-container, 
  .why-me-container, .featured-video,
  .testimonials-container, .logos-container {
    max-width: 400px; 
    margin: 0 auto; 
  }
  
  .benefits-container {  max-width: 380px; }

  .benefits-card { 
    width: 21.875rem;
    padding: 20px 40px;
    margin: 30px 0; 
  }


  .weave { left: -6px }

  .woman-image { width: 350px; }

  .dots { 
    width: 130px;
    bottom: 207px;
    left: 19px;
  }

  .hire-us, .hire-us-form { max-width: 380px; }

  .input-section input { width: 100%; }

  .input-section .budget { width: 100%; }

  .input-section .country { width: 100%; }
}