strong {
  font-weight: bold; /* or any other weight, like 700 */
}

.article-title {
  background-image: linear-gradient(to bottom, white, green);
  padding: 20px;
  display: flex;
  padding-top: 6rem;
}

.article-title .title-icon {
  width: fit-content;
  overflow: hidden; /* Clear float */
}

.article-title .title-icon img {
  float: left;
  width: 125px;
  height: auto;
  margin: 0 0 10px 50px;
  flex: 1;
}

.title-text {
  padding-top: 5vh;
}

.title-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-icon img {
  max-width: 100%;
}

.bryant-profile {
  font-size: 1.99rem;
  color: darkblue; /* Inherit the text color */
  text-decoration: underline; /* Add subtle underline */
  background-color: transparent; /* Ensure no background */
  border: none; /* Remove any border */
  padding: 0; /* Remove button-like padding */
  margin: 0; /* Remove margin */
  display: inline; /* Ensure it's inline, not block or button-like */
}

.bryant-profile:hover {
  color: blue; /* Subtle color change on hover */
  text-decoration: none; /* Keep underline on hover */
  cursor: pointer;
  background-color: transparent; /* Ensure no background */
}

.nature-vs-asphalt-main {
  padding: 0 25rem;
  background-color: linear-gradient(to top, #000, #1b1f23);
}

.nature-vs-asphalt-article {
  border: 10px solid var(--site-color-02);
  border-radius: 4px;
}

.nature-vs-asphalt-article .article-title h1 {
  margin: 0;
  font-size: 3.2rem;
  color: #000;
  padding-left: 4vw;
}

.nature-vs-asphalt-article .article-title p {
  margin: 0;
  padding-left: 4rem;
  font-size: 1.8rem;
  color: #1e1e1e;
}

.article-text h2 {
  color: #000;
  padding-top: 25px;
}

.article-indent {
  padding-left: 50px;
}

.nature-vs-asphalt-article .article-text {
  padding: 10px 15rem;
  background-color: #eaeaea;
}

.article-text img:nth-child(2) {
  border-radius: 50px;
  width: 50vw;
  height: auto;
}

.article-text img:nth-child(3) {
  border-radius: 50px;
  width: 50vw;
  height: auto;
}

.nature-vs-asphalt-article img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 25px;
}

.image-caption-container {
  text-align: center; /* Center-align the container content */
  margin: 20px; /* Add some margin around the container */
}

.image-caption-container img {
  max-width: 100%; /* Ensure the image fits within the container */
  height: auto; /* Maintain aspect ratio */
  border-radius: 50px;
}

.image-caption-container figcaption {
  color: #666; /* Set the color of the caption */
  font-size: 1.6rem; /* Increase the font size for captions */
  padding-top: 1px; /* Space between image and caption */
}

.before-after-container {
  position: relative; /* Make the container element the reference for the position of the caption */
  display: inline-block; /* Make the container element only take up the space necessary for the image and the caption */
  margin-bottom: 3vh;
}

.ba-caption {
  position: absolute; /* Position the caption absolutely within the container element */
  bottom: -25px; /* Position the caption at the bottom of the container element */
  left: 0; /* Position the caption at the left of the container element */
  width: 100%; /* Make the caption span the entire width of the container element */
  color: #808080; /* Set the color of the caption text to white */
  padding: 15px; /* Add some padding to the caption */
  box-sizing: border-box; /* Include the padding in the width of the caption */
  text-align: center;
  font-size: 1.6rem;
  font-family: Roboto;
}

.nature-vs-asphalt-article p {
  color: #1e1e1e;
  margin: 0;
  line-height: 1.5;
  font-size: 1.8rem;
  max-width: 100%;
  text-align: justify;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 10px 15px;
}

.nature-vs-asphalt-article .footer-tags {
  padding: 20px;
  background-image: linear-gradient(to bottom, green, white);
  align-items: center;
}

.nature-vs-asphalt-article .footer-tags a {
  font-size: 1.6rem;
  color: darkblue;
  text-decoration: underline;
  background-color: transparent;
  padding: 0;
  margin: 0 5px;
  display: inline;
}

.nature-vs-asphalt-article .footer-tags a:hover {
  color: blue;
}

.footer-tags {
  padding: 20px;
  text-align: center;
}

/* Mobile Version */

@media only screen and (max-width: 600px) {
  .title-icon img {
    display: none;
  }

  .nature-vs-asphalt-article .article-text {
    padding: 10px 2rem;
    background-color: #fafafa;
  }

  .article-text img:nth-child(2) {
    border-radius: 35px;
    width: 100vw;
    height: auto;
  }

  .nature-vs-asphalt-article img {
    padding: 10px;
  }

  .before-after-container {
    padding-bottom: 18px;
  }
}

/* Tablet Version */

@media only screen and (max-width: 768px) {
  .title-icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title-icon img {
    max-width: 100%;
  }

  .nature-vs-asphalt-main {
    padding: 0;
    background-image: none;
  }

  .nature-vs-asphalt-article {
    border: none;
    width: 100vw;
  }

  .ba-caption {
    bottom: -35px;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .nature-vs-asphalt-main {
    width: 100vw; /* This sets the container to the full viewport width */
    padding: 0; /* Adjust or remove padding if necessary */
    margin: 0; /* Adjust or remove margin if necessary */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
  }

  .nature-vs-asphalt-article {
    width: 100%; /* This ensures the text takes the full width of its container */
  }
}