@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
  font-family: 'Poppins', sans-serif;
}

body,
html {
  height: 100%;
  margin: 0;
}

a {
  cursor: pointer;
}

h1 {
  font-weight: 600px;
  font-size: 70px;
  line-height: 105px;
}

h2 .services {
  padding-bottom: 42px;
  font-size: 30px;
  font-weight: 700;
  line-height: 45px;
  letter-spacing: 0em;
  text-align: left;
}

h2 .sustainability {
  padding-bottom: 24px;
}

.logo {
  padding-top: 39px;
}
 
.top-services-image {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background: url('../public/images/services-top-level-img.jpg') no-repeat
      center center/cover,
    linear-gradient(
      180deg,
      rgba(13, 13, 22, 0.48) 16.16%,
      rgba(13, 13, 22, 0) 48.49%
    );
  min-height: 800px;
  background-attachment: fixed;
  height: 100vh;
}

.about-section-second-img {
  background: url('../public/images/about-section-second-img.png') no-repeat
    center center/cover;
  min-height: 100%;
}

.sustainability-img {
  background: url('../public/images/sustainability.png') no-repeat center
    center/cover;
  min-height: 100%;
}

.old-street-works {
  position: relative;
  background-position: center;
  background: url('../public/images/old-street-works.jpeg') no-repeat center
    center/cover;
  background-image: url('../public/images/old-street-works.jpeg') no-repeat
      center center/cover,
    linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 41.21%);
  min-height: 60%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: 0em;
  text-align: left;
  color: #fff;
}
.old-street-works span {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 0 34px 35px;
}

.section {
  display: grid;
  min-height: 60%;
}

.section-no-padding {
  display: grid;
  min-height: 60%;
  padding-left: 50px;
}

.box {
  grid-column: span 2;
  position: relative;
}

.section-light {
  background-color: #fff;
  list-style-type: none;
}

.section-light ul {
  list-style-type: none;
  padding-left: 0;
}

.services-text li,
.sustainability-text {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 300;
  line-height: 30px;
  letter-spacing: 0em;
  text-align: left;
  margin-bottom: 31px;
}

.services-text > ul > li:nth-child(4) {
  margin-bottom: 25%;
}

.services-text {
  padding-top: 154px;
  position: relative;
}

.services-left-aligned-slider-box {
  padding-left: 50px;
}

/* icons */
.black-arrow-box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  width: 140px;
  height: 140px;
  bottom: 0;
  right: 0;
}

.black-arrow-box span.material-icons-outlined {
  color: #fff;
  margin: 0;
}

.content-padding {
  padding-left: 100px;
}

.section-padding {
  padding-left: 50px;
}

.section-margin {
  margin-left: 50px;
}

.top-services-text {
  display: table;
  min-height: 600px;
}

.middle-services-text {
  display: table;
  min-height: 600px;
}

.bottom-services-text {
  display: table;
  min-height: 600px;
  max-width: 800px;
  margin: 0 auto;
}

.top-services-text,
.middle-services-text,
.bottom-services-text {
  line-height: 34px;
  max-width: 800px;
  margin: 0 auto;
}

.services-text-container {
  vertical-align: middle;
  display: table-cell;
  margin: 0 auto;
  max-width: 800px;
}

.divide {
  height: 2px;
  background: black;
  margin-left: 50px;
}

.text-padding-services {
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 50px;
}

@media (max-width: 568px) {
  .top-building-image,
  .about-section-second-img,
  .top-services-image {
    background-attachment: scroll;
  }
}

@media (min-width: 700px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr repeat(2, minmax(auto, 25em)) 1fr;
  }
}