/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* 2. Remove default margin */
  * {
    margin: 0;
    font-family: 'poppins';
  }
  
  body {
    -webkit-font-smoothing: antialiased;
  }
  
  /* 5. Improve media defaults */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  
  /* 6. Inherit fonts for form controls */
  input, button, textarea, select {
    font: inherit;
  }
  
  /* 7. Avoid text overflows */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  
  /* 8. Improve line wrapping */
  p {
    text-wrap: pretty;
  }
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }
  ul, li {
    list-style: none;
  }
  a {
    text-decoration: none;
    color: black;
  }
  button {
    background-color: rgb(235, 235, 235);
  }

/* CSS Start */
@font-face {
    font-family: poppins;
    src: url(./assets/fonts/poppins-regular.ttf);
}
@font-face {
    font-family: poppins;
    src: url(./assets/fonts/Poppins-Light.ttf);
    font-weight: 300;
}

.wrapper {
    padding: 0 40px;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    margin: auto;
    margin-top: 40px;
    max-width: 1200px;
}
    .menu {
        display: flex;
        gap: 40px;
    }
    .mobile-menu-button {
      display: none;
      justify-content: center;
      align-items: center;
    }
    #menu-button {
      background: none;
      border: none;
      min-width: 32px;
    }

button, li, .service, .content-child, .content-child-right, .workflow-container img {
  cursor: pointer;
  transition: all 0.2s ease;
}
.service:hover, .content-child:hover, .content-child-right:hover, .workflow-container img:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 10px rgba(37, 37, 37, 0.3);
}
li:hover, button:hover{
  transform: translateY(-4px);
}

.banner {
    display: flex;

    margin: auto;
    margin-top: 120px;
    width: 100%;
    max-width: 1200px;
}
    .banner-text {
        flex: 1;
    }
        .banner-text > h1 {
            font-size: 3.6rem;
            margin-bottom: 40px;
            max-width: 580px;
        }
        .banner-text > p {
        max-width: 400px;
        margin-bottom: 40px;
        font-family: 'poppins', sans-serif; 
        font-weight: 300;
        }
        .banner-text > button {
            border: none;
            border-radius: 24px;
            background-color: black;
            color: white;
            padding: 12px 20px;
            cursor: pointer;
            }
        .banner-text > button > a {
            color: white;
            }
    .banner-image {
        flex: 1;
    }  

.past-customers {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;

  margin-top: 120px;
  width: 100%;
  max-width: 1200px;
}
  .past-customers .logo {
    filter:brightness(0);
    width: 8%;
  }

.service-header {
  display: flex;
  justify-content: center;

  margin-top: 120px;
  font-size: 1.6rem;
}

.services-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;

  max-width: 1200px;
  margin: auto;
  margin-top: 120px;
  padding-bottom: 100px;
}
  .service {
    display: flex;
    flex: 1;

    border: 2px solid rgb(0, 0, 0);
    border-radius: 24px;
    border-bottom: 6px solid black;
    min-width: 380px;
    padding: 40px;
  }
  .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;

    padding: 22px 0;
  }
    .text > p{
      font-size: 22px;
      font-weight: bold;
    }
  .right {
    flex: 1;
    filter: grayscale(100%);
  }
  .service .link {
    display: flex;
  }

.workflow-header {
  display: flex;
  justify-content: center;

  margin-top: 120px;
  font-size: 1.6rem;
}

.workflow-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;

  margin: auto;
  margin-top: 120px;
  padding-bottom: 120px;
  max-width: 1200px;
  
}
  .workflow-content {
    flex: 1;
    display: flex;
    flex-direction: column;

    min-width: 400px;
    font-family: 'poppins';
    font-weight: 300;
  }
  .workflow-content > img{
    height: 660px;
    width: 100%;
    object-fit: cover;
    border-radius: 38px;
  }
  .workflow-content > .image-1{
    margin-top: 40px;
  }
  .workflow-content > .image-2{
    margin-bottom: 40px;
  }

.why-header {
  display: flex;
  justify-content: center;

  margin-top: 120px;
  font-size: 1.6rem;
}

.why-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;

  margin: auto;
  margin-top: 120px;
  padding-bottom: 120px;
  max-width: 1200px;
}
  .why-content{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    
  }
  .why-content:first-child {
    flex: 2;
  }
  .why-content:last-child {
    flex: 1;
  }
  .why-content p {
    font-size: .9rem;
    max-width: 300px;
    margin: 0 auto;
  }
  .content-child {
    flex: 1;

    color: white;
    min-width: 330px;
    padding: 40px;
    min-height: 280px;
    text-align: center;
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat;
  }
    .content-child.first {
      background-image: url(./assets/images/why7.jpg);
    }
    .content-child.second {
      background-image: url(./assets/images/why6.jpg);
    }
    .content-child.third {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;

      background-image: url(./assets/images/why3.jpg);
    }
  .content-child-right {
    flex: 1;
    color: white;
    padding: 40px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    
    background-image: url(./assets/images/why4.jpg);
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat;
  }
  .why-content > div {
    border-radius: 20px;
  }

.contact-us {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  
  margin-top: 120px;
  padding-bottom: 120px;
}
  .contact-us > .image {
    padding: 20px;
    border-radius: 50%;
    background-color: rgb(245, 245, 245);
  }
  .image > img {
    width: 60px;
  }
  .contact-us > .text {
    max-width: 740px;
  }
  .buttons > button {
    border: none;
    border-radius: 24px;
    padding: 12px 20px;
    margin-top: 20px;
    min-width: 90px
  }
  .buttons > button:first-child {
    background-color: black;
  }
  .buttons > button:first-child > a{
    color: white;
  }

  .contact-us > .text > h1 {
    text-align: center;
    font-size: 3rem;
    
  }

.footer-content {
  display: flex;
  justify-content: space-between;

  margin: auto;
  margin-top: 120px;
  padding-bottom: 20px;
  max-width: 1200px;
  font-size: .8rem;
  font-weight: 300;
}

  .footer-social > ul{
    display: flex;
    gap: 20px;
    
  }

/* For when the right box of why us content wraps to bottom */
  @media screen and (max-width: 760px) {
      .banner {
    flex-direction: column-reverse;
} 
    .menu {
      gap: 20px;
  }
    .why-container {
      gap: 20px;
    }
  }

@media screen and (max-width: 452px) {
  .wrapper {
    padding: 0 30px;
}
  .banner-text > h1 {
    font-size: 3rem;
}
  .nav > ul {
    display: none;
  }
  .mobile-menu-button {
      display: flex;
      justify-content: center;
      align-items: center;
    }


  .service, .workflow-content, .content-child, .content-child-right {
    min-width: 240px;
  }
  .content-child.third {
    justify-content: flex-start;
  }
  .content-child-right > div:last-child {
    display: none;
  }
  .workflow-content.second > img {
    order: 3;
    margin-top: 40px;
  }
  .workflow-content.fourth > img {
    order: 3;
    margin-top: 40px;
  }

}