:root {
  --maroon: #780202;
  --black: black;
  --white: white;
  --white-smoke: #ebebeb;
}

.top-section {
  justify-content: center;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;
}

.top-div {
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 980px;
  display: flex;
}

.image {
  background-image: linear-gradient(to bottom, var(--maroon), var(--maroon));
}

.section {
  background-image: linear-gradient(#78020280, #78020280), url('../images/businessman-3213659_1920.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  height: 500px;
}

.body {
  font-family: Droid Serif, serif;
}

.link {
  color: var(--black);
  text-decoration: none;
}

.link-2 {
  color: var(--black);
  margin-bottom: 2px;
  text-decoration: none;
}

.main-image-div {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.main-image-content-div {
  flex-direction: column;
  align-items: center;
  width: 90%;
  max-width: 980px;
  display: flex;
}

.email-div {
  text-align: right;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 33%;
  display: flex;
}

.tel-div, .co-logo {
  width: 33%;
}

.heading {
  color: var(--white);
  text-align: center;
  width: 80%;
  margin-top: 0;
  margin-bottom: 20px;
}

.paragraph {
  color: var(--white);
  text-align: center;
  font-size: 16px;
  line-height: 24px;
}

.contact-button {
  background-color: var(--black);
  border: .5px solid #ffffff80;
  border-radius: 5px;
  margin-top: 20px;
  box-shadow: inset -1px -1px 3px #00000080;
}

.contact-buttons-div {
  justify-content: center;
  align-items: center;
  width: 270px;
  display: flex;
}

.what-we-do-button {
  background-color: var(--maroon);
  border: .5px solid #ffffff80;
  border-radius: 5px;
  margin-top: 20px;
  box-shadow: inset -1px -1px 3px #00000080;
}

.main-body-section {
  justify-content: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  display: flex;
}

.body-div {
  width: 90%;
  max-width: 980px;
}

.h2 {
  color: var(--maroon);
  margin-top: 0;
  margin-bottom: 20px;
}

.body-text {
  color: var(--black);
  text-align: center;
  margin-bottom: 0;
}

.body-text.padded {
  width: 100%;
  margin-bottom: 20px;
}

.larger {
  font-size: 16px;
  line-height: 22px;
}

.boxes-div {
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  margin-top: 0;
  display: flex;
}

.boxes-div.bottom {
  margin-top: 20px;
}

._3-box-div {
  border: 1px solid var(--white-smoke);
  width: 100%;
  margin-bottom: 30px;
  display: flex;
}

._3-box-div.bottom {
  margin-bottom: 0;
}

.div-block-2 {
  width: 30%;
}

.grey-stripe {
  background-color: var(--white-smoke);
  width: 10%;
  padding: 20px 10px 10px;
}

.white-div {
  flex-direction: column;
  width: 100%;
  padding: 20px;
  display: flex;
}

.red-heading {
  color: var(--maroon);
  margin-top: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

.paragraph-2 {
  margin-bottom: 0;
}

.red-body-section {
  background-color: var(--maroon);
  justify-content: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  display: flex;
}

.h3 {
  color: var(--white);
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 30px;
  line-height: 40px;
}

.body-text-white {
  color: var(--white);
  text-align: center;
  width: 100%;
  margin-bottom: 0;
}

.body-text-white.no-padding {
  margin-bottom: 0;
}

.body-text-white-larger {
  color: var(--white);
  text-align: center;
  font-size: 20px;
  line-height: 24px;
}

.black-button {
  background-color: var(--black);
  border: 1px solid #ebebeb80;
  border-radius: 10px;
  margin-top: 10px;
}

.black-body-section {
  background-color: var(--black);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 30px;
  display: flex;
}

.red-button {
  background-color: var(--maroon);
  border: 1px solid #ebebeb80;
  border-radius: 10px;
  margin-top: 10px;
}

.body-text-no-padding {
  color: var(--white);
  text-align: center;
  width: 100%;
  margin-bottom: 0;
}

.body-div-horizontal {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 90%;
  max-width: 980px;
  display: flex;
}

.body-div-horizontal.padded {
  justify-content: center;
}

.footer-3-divs {
  width: 100%;
}

.bold {
  color: var(--maroon);
}

.divider {
  background-color: #0003;
  width: 100%;
  height: 1px;
  margin-top: 20px;
  margin-bottom: 40px;
}

.bold-heading {
  text-transform: uppercase;
  font-size: 16px;
}

.footer-text {
  color: var(--white-smoke);
  margin-bottom: 0;
  font-size: 20px;
  line-height: 26px;
}

.h3-link {
  color: var(--white-smoke);
  text-decoration: none;
}

.top-div-mobile {
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 980px;
  display: none;
}

.mobile-icon {
  display: none;
}

.lightbox-section {
  justify-content: center;
  align-items: center;
  display: flex;
}

.lightbox-div {
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 980px;
  height: 300px;
  display: flex;
}

.lightboxlink {
  width: 18%;
}

.whatsapp {
  background-image: url('../images/images.png');
  background-position: 50%;
  background-size: cover;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 20px;
  left: 20px;
  box-shadow: 2px 2px 13px -1px #000000b3;
}

@media screen and (max-width: 991px) {
  .top-section {
    flex-direction: column;
    padding-bottom: 10px;
  }

  .top-div {
    display: none;
  }

  .section {
    height: auto;
    padding: 40px;
  }

  .link-2 {
    text-align: center;
    width: 35%;
  }

  .link-2._2 {
    text-align: left;
    width: 49%;
  }

  .link-2._1 {
    text-align: center;
    width: 49%;
  }

  .email-div {
    text-align: center;
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }

  .tel-div {
    text-align: center;
    width: 50%;
  }

  .co-logo {
    width: 50%;
  }

  .heading {
    width: 100%;
  }

  .grey-stripe {
    width: 12%;
  }

  .footer-text {
    text-align: center;
  }

  .top-div-mobile {
    flex-direction: column;
    justify-content: center;
    margin-bottom: 20px;
    display: flex;
  }

  .top-div-mobile._2 {
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 767px) {
  .main-image-content-div {
    width: 100%;
  }

  .co-logo {
    width: 80%;
  }

  .grey-stripe {
    width: 15%;
  }
}

@media screen and (max-width: 479px) {
  .section {
    height: auto;
    padding: 30px 20px;
  }

  .link-2._2, .link-2._1 {
    text-align: center;
    width: 100%;
  }

  .email-div {
    flex-direction: column;
    align-items: center;
  }

  .tel-div {
    width: 100%;
  }

  .co-logo {
    width: 95%;
  }

  .heading {
    font-size: 30px;
    line-height: 35px;
  }

  ._3-box-div {
    border-color: #0000004d;
  }

  .grey-stripe {
    width: 30%;
    display: none;
  }

  .h3 {
    font-size: 28px;
    line-height: 36px;
  }

  .top-div-mobile._2 {
    flex-direction: column;
  }

  .mobile-icon {
    width: 50px;
    margin-bottom: 5px;
    display: block;
  }
}