.philosophy-section {
  height: 100% !important;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("../images/tom-black-texture-background.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.philosophy-section.body-control {
  background-image: url("../my-philosophy/body-control/images/body-control-bkgd.webp");
}

.philosophy-section.arise {
  background-image: url("../my-philosophy/arise-from-the-subconscious/images/arise-from-the-subconscious-bkgd.webp");
}

.philosophy-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 80%;
  margin: 0 auto;
  gap: 1rem;
  z-index: 1;
  padding: 4rem 2rem;
}

.philosophy-wrapper h1 {
  font-size: 4rem;
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  background: linear-gradient(
    180deg,
    #d0d0d0 0%,
    #b8b8b8 10%,
    #6f6f6f 20%,
    #d5d5d5 32%,
    #575757 46%,
    #c9c9c9 58%,
    #666666 72%,
    #b5b5b5 86%,
    #e0e0e0 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9),
    /* top highlight */ 0 -1px 0 rgba(70, 70, 70, 0.6),
    /* top shadow */ 0 2px 1px rgba(255, 255, 255, 0.4),
    0 3px 0 rgba(180, 180, 180, 0.4),
    0 4px 0 rgba(120, 120, 120, 0.3),
    0 8px 15px rgba(0, 0, 0, 0.45);
}

.philosophy-wrapper p {
  font-size: 1.2rem;
}

.philosophy-wrapper h2 {
  font-size: 2rem;
  text-align: center;
}

.philosophy-subtitle {
  font-size: 1.8rem !important;
  color: rgb(217, 217, 217);
  font-style: italic;
}

.philosophy-wrapper hr {
  background-color: #fff;
  height: 1px;
  width: 100%;
}

.p-bold {
  text-shadow:
    0 0 5px #fff,
    0 0 10px #2f0808,
    0 0 15px #2a1616,
    0 0 20px #4aff1821,
    0 0 30px #144f03,
    0 0 40px #124703,
    0 0 55px #0d3601,
    0 0 75px #0a2a01;
  color: #ffffff;
}

.philosophy-logo {
  width: 50%;
}

.writings-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.writing-link {
  flex-basis: 30%;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.writing-link:hover {
  cursor: pointer;
  transform: scale(1.05);
  filter: brightness(85%);
}

.writing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background-color: rgba(60, 60, 60, 0.8);
  padding: 1rem;
}

.writing-card img {
  width: 100%;
}

.writing-card h2 {
  font-size: 1.3rem;
  text-align: center;
}

.writing-card p {
  font-size: 1rem;
}

.read-more-btn {
  color: #fff;
  text-decoration: none;
  border: 1px solid #fff;
  padding: 10px;
  border-radius: 10px;
  display: block;
  display: none;
}

.read-more-btn:hover {
  transition: 0.3s ease-in-out;
  box-shadow:
    0 10px 20px 0 rgba(255, 255, 255, 0.2),
    0 12px 40px 0 rgba(255, 238, 84, 0.19);
}

@media screen and (max-width: 768px) {
  .philosophy-section {
    background-attachment: scroll;
  }

  .philosophy-wrapper {
    width: 100%;
  }

  .philosophy-wrapper h1 {
    font-size: 2.5rem;
  }

  .philosophy-logo {
    width: 100%;
  }

  .writings-container {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .writing-link:hover {
    cursor: none;
    transform: none;
  }

  .read-more-btn {
    display: block;
  }
}