* {
  box-sizing: border-box;
}

html,
body {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  margin: 0;
}

a {
  color: white;
}

body {
  background-color: black;
  margin: 0;
  overflow-x: hidden;
  box-sizing: border-box;
  height: 100%;
}

.wrapper {
  box-sizing: border-box;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.page-body {
  flex-grow: 1;
}

ul {
  margin-bottom: 0;
}

.navbar-brand img {
  max-height: 100px;
}

.navbar-toggler {
  background-color: #ccc;
  margin-right: 15px;
}

nav.navbar.navbar-expand-lg {
  background-color: #515251;
}

.nav-item .nav-link {
  color: #ccc;
}

.nav-item .nav-link.active {
  color: #eee;
}

.headline {
  background-image: url("../images/patriots-asphalt-tow-truck-darken.png");
  background-repeat: no-repeat;
  background-position: 50% 65%;
  text-align: center;
  margin-bottom: 20px;
}

.headline h1 {
  color: white;
  text-shadow: 2px 2px 5px black;
  padding: 30px 0 30px 0;
}

.headline-summary {
  opacity: 0.7;
  margin: 0 10px;
}

.headline-summary p {
  border-radius: 10px;
  background-color: white;
  opacity: 1;
  margin: 0 auto;
  max-width: 600px;
  padding: 10px;
}

.headline ul {
  padding: 30px 0 30px 0;
  list-style-type: none;
}

.headline .call-to-action1 {
  color: red;
  text-shadow: 1px 1px white;
  font-size: 26pt;
  margin-bottom: -20px;
}

.headline .call-to-action2 {
  color: red;
  text-shadow: 1px 1px white;
  font-size: 36pt;
}

.services h3 {
  color: #c0ff3c;
  padding: 15px;
}

.services p {
  color: #ccc;
  padding: 5px 15px;
}

.content-section {
  background-color: #515251;
  margin-bottom: 20px;
}

.services .content-section img {
  width: 100%;
}

.content-section-text-left {
  background-color: #515251;
  padding: 20px 50px 20px 50px;

  --p: 100px; /* control the shape (can be percentage) */
  height: 250px;
  aspect-ratio: 1;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--p)) 100%, 0 100%);
}

.content-section-text-right {
  background-color: #515251;
  padding: 20px 50px 20px 100px;

  --p: 100px; /* control the shape (can be percentage) */
  height: 250px;
  aspect-ratio: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--p) 100%);
}

.content-section-image-right {
  --p: 100px; /* control the shape (can be percentage) */
  height: 250px;
  aspect-ratio: 1;
  clip-path: polygon(var(--p) 0, 100% 0, 100% 100%, 0 100%);
}

.content-section-image-left {
  --p: 100px; /* control the shape (can be percentage) */
  height: 250px;
  aspect-ratio: 1;
  clip-path: polygon(0 0, calc(100% - var(--p)) 0, 100% 100%, 0 100%);
}

.asphalt-paving-image {
  background-image: url("../images/asphalt-paving.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

.sealcoating-image {
  background-image: url("../images/sealcoating.JPG");
  background-repeat: no-repeat;
  background-position: bottom;
}

.hauling-excavating {
  background-image: url("../images/hauling-excavating-2.jpeg");
  background-repeat: no-repeat;
  background-position: center;
}

/* About Page */

header h1 {
  color: #c0ff3c;
  padding: 10px 0 10px 20px;
}

.content-section-text {
  background-color: #515251;
  padding: 15px;
  margin: 0 20px;
}

.content-subtitle {
  color: #c0ff3c;
}

.content-section-text p {
  color: white;
  margin-top: 15px;
}

.col-form-label {
  color: #c0ff3c;
  text-align: right;
  font-size: 14pt;
}

.customer-message {
  padding: 0 10px;
}

.customer-message-label {
  color: #c0ff3c;
  font-size: 14pt;
  margin-bottom: 10px;
  padding-left: 5px;
}

.customer-message textarea {
  margin-left: 2px;
}

.about-us-points {
  list-style-type: none;
  line-height: 2.5;
  margin-left: -15px;
  margin-top: 5px;
}

.point-title {
  color: #c0ff3c;
}

.point-description {
  color: white;
}

.contact-us-section {
  background-color: #515251;
  margin: 0 20px;
}

.contact-us-photo {
  background-image: url("../images/hauling-truck.jpg");
  min-height: 557px;
  background-repeat: no-repeat;
  background-position: right;
}

.content-section-text .about-us-points .point-description a {
  color: white;
}

/* Error Handling */
body .name_error,
body .email_error,
body .message_error,
body .name_valid_error,
body .company_valid_error,
body .email_valid_error,
body .phone_valid_error,
body .message_valid_error {
  display: none;
  color: red;
  font-size: 12px;
  background-color: white;
  padding-left: 5px;
}

.submit-form {
  width: 93px;
  margin-left: auto;
}

.submit-form input {
  background-color: #c0ff3c;
  color: black;
  padding: 10px 15px;
  font-weight: bold;
  border-radius: 10px;
}

.card {
  margin: 50% 0;
}

.content-section-text .card .card-body {
  text-align: center;
}

.content-section-text p.card-text {
  color: black;
}

.content-section-text .card-link {
  margin-bottom: 20px;
}

.footer {
  background-color: #515251;
  color: #c0ff3c;
  padding: 10px 0;
  margin-top: 20px;
  flex-grow: 0;
  flex-shrink: 0;
}

.footer ul {
  list-style-type: none;
  margin: 0 auto;
  text-align: center;
}

@media only screen and (min-width: 1200px) {
  .content-section-text-left {
    height: 310px;
    font-size: 14pt;
  }

  .content-section-text-right {
    height: 310px;
    font-size: 13pt;
  }

  .content-section-image-right {
    height: 310px;
  }

  .content-section-image-left {
    height: 310px;
  }

  .col-form-label {
    font-size: 14pt;
  }

  .customer-message-label {
    font-size: 14pt;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .content-section-text-left {
    height: 310px;
    font-size: 14pt;
  }

  .content-section-text-right {
    height: 350px;
    font-size: 12pt;
  }

  .content-section-image-right {
    height: 310px;
  }

  .content-section-image-left {
    height: 350px;
  }

  .col-form-label {
    font-size: 12pt;
  }

  .customer-message-label {
    font-size: 12pt;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .content-section-text-left {
    height: 310px;
    font-size: 12pt;
  }

  .content-section-text-right {
    height: 400px;
    font-size: 11pt;
  }

  .content-section-image-right {
    height: 310px;
  }

  .content-section-image-left {
    height: 400px;
  }

  .col-form-label {
    font-size: 11pt;
  }

  .customer-message-label {
    font-size: 11pt;
  }
}

@media only screen and (max-width: 767px) {
  .call-to-action1 {
    font-size: 20pt;
  }

  .call-to-action2 {
    font-size: 30pt;
  }

  .content-section-text-left {
    overflow: auto;
    height: 250px;
    width: 100%;
    clip-path: none;
  }

  .content-section-text-right {
    overflow: auto;
    padding-left: 50px;
    height: 250px;
    width: 100%;
    font-size: 10pt;
    clip-path: none;
  }

  .content-section-image-right {
    overflow: auto;
    height: 250px;
    width: 100%;
    clip-path: none;
  }

  .content-section-image-left {
    height: 250px;
    width: 100%;
    clip-path: none;
  }

  #asphalt-paving.content-section {
    min-height: 300px;
  }

  #asphalt-paving .content-section-text-left {
    overflow: auto;
    height: 300px;
    width: 100%;
    clip-path: none;
  }

  #hauling-and-paving.content-section {
    overflow: auto;
    min-height: 300px;
  }

  #hauling-and-paving .content-section-text-left {
    overflow: auto;
    height: 300px;
    width: 100%;
    clip-path: none;
  }

  #sealcoating.content-section {
    min-height: 300px;
  }

  #sealcoating .content-section-text-right {
    overflow: auto;
    padding-left: 50px;
    height: 300px;
    width: 100%;
    font-size: 10pt;
    clip-path: none;
  }

  .col-form-label {
    font-size: 12pt;
    text-align: left;
  }

  .customer-message-label {
    font-size: 12pt;
  }

  .footer ul {
    padding-right: 30px;
  }
}