/* Readable neutral palette, shared by all editorial sections. */
.about-us > .container > p,
.portfolio > .container > p,
.portfolio-2 > .container > p,
.comment-section > .container > p,
.blog p,
footer p {
  color: #505050;
  font-weight: 400;
  line-height: 1.65;
}

footer p {
  font-size: 14px;
}

/* Keep the photograph bright away from the centrally placed hover copy. */
.overlay-image .overlay {
  background: linear-gradient(to bottom, rgba(20, 20, 20, .12),
    rgba(20, 20, 20, .65) 28%, rgba(20, 20, 20, .65) 76%,
    rgba(20, 20, 20, .18));
}

.overlay .text {
  width: 88%;
}

.overlay .text p {
  color: #fff;
  line-height: 1.5;
  font-weight: 400;
}

.overlay .small-text p {
  font-size: 14px !important;
}

.overlay-image:focus-within .overlay {
  transform: scale(1);
}

/* Entered values must remain as legible as their placeholders. */
.quote-content .contact-form .form-control,
.quote-content .text-pink {
  color: #fff;
}

.quote-content .contact-form .form-control {
  border-bottom-color: #aaa;
}

.quote-content .contact-form .form-control::placeholder {
  color: #e5e5e5;
  opacity: 1;
}

.footer-social-icons ul li a:hover,
.footer-social-icons ul li a:focus-visible {
  color: #fff;
  background-color: #313131;
}

.about-us .card:hover .card-body p,
.comment-section .card:hover .card-body p {
  color: #fff !important;
}

a:focus-visible,
button:focus-visible,
.contact-form .form-control:focus-visible {
  outline: 2px solid #767676;
  outline-offset: 4px;
}

@media (max-width: 767px) {
  .blog .text-area,
  .blog .text-area-2 {
    padding-left: 28px;
    padding-right: 28px;
  }

  .blog h4 {
    font-size: 32px;
    line-height: 1.25;
  }

  .blog p {
    text-align: left;
  }

  .quote-content h2 {
    font-size: 28px;
    overflow-wrap: anywhere;
  }
}