/* ==========================================================================
   3. PAGE TITLE COMPONENTS
   ========================================================================== */

:root {
 --lingrad: linear-gradient(to bottom,
   hsla(0, 100%, 100%, 0) 25%,
   hsla(0, 100%, 100%, 1) 100%);
 --lingrad-horizontal: linear-gradient(to left,
   hsla(0, 100%, 100%, 1) 0%,
   hsla(0, 100%, 100%, 0.75) 10%,
   hsla(0, 100%, 100%, 0.25) 25%,
   hsla(0, 100%, 100%, 0) 50%,
   hsla(0, 100%, 100%, 0.25) 75%,
   hsla(0, 100%, 100%, 0.75) 90%,
   hsla(0, 100%, 100%, 1) 100%);
 --radgrad: radial-gradient(circle at 50% -100%,
   hsla(0, 100%, 100%, 0%) 65%,
   hsla(0, 100%, 100%, 25%) 75%,
   hsla(0, 100%, 100%, 75%) 85%,
   hsla(0, 100%, 100%, 1) 100%);
}


.page-title {
 position: relative;
 width: 100vw;
 height: 60vh;
 display: flex;
 align-items: flex-end;
 justify-content: center;
 background-size: cover;
 background-position: center;
 isolation: isolate;
}

.title-text {
 position: relative;
 width: 80%;
 text-align: center;
 font-size: calc(var(--font-base-size) * 1.4);
 font-weight: 700;
 color: var(--text-color-dark);
 /* background-color: hsla(0, 0%, 100%, 0.0125); */
 /* -webkit-text-stroke: 1px hsl(40, 100%, 100%); */
 margin-bottom: var(--space-md);
 /* backdrop-filter: blur(8px);  Reduced blur amount */
 /* -webkit-backdrop-filter: blur(8px); */
 z-index: 1;
 border-radius: var(--radius-md);
}

/* @keyframes shine {
 from {
  filter: brightness(1) saturate(0%) ;
 }

 to {
  filter: brightness(1.125) saturate(200%);
 }
} */

.page-title-home,
.page-title-aka,
.page-title-astral,
.page-title-checkin,
.page-title-home,
.page-title-intake,
.page-title-med,
.page-title-qhht,
.page-title-akastral {
 /* animation: shine 3s forwards; */
 filter: brightness(1.125) saturate(200%);
 box-shadow: var(--shadow-md);
}

.page-title-home {
 background-image: var(--radgrad), url('/images/backgrounds/white-rose.jpg');
}

.page-title-med {
 background-image: var(--radgrad), url('/images/backgrounds/meditation.jpg');
}

.page-title-aka {
 background-image: var(--radgrad), url('/images/backgrounds/aka.jpg');
}

.page-title-akastral {
 background-image: var(--lingrad), var(--lingrad-horizontal), url('/images/backgrounds/aka.jpg');
}

.page-title-astral {
 background-image: var(--radgrad), url('/images/backgrounds/astral.jpg');
}

.page-title-qhht {
 background-image: var(--radgrad), var(--lingrad), var(--lingrad-horizontal), url('/images/backgrounds/qhht.jpg');
}

.page-title-checkin {
 background-image: var(--radgrad), url('/images/backgrounds/checkin.jpg');
}

.page-title-intake {
 background-image: var(--radgrad), var(--lingrad-horizontal), url('/images/backgrounds/intake.jpg');
}

.page-subtitle-home {
 font-size: calc(1 * var(--font-base-size));
}

.text-color-dark {
 color:  hsl(270, 40%, 20%);
}





.aboutImage {
 margin-top: 4rem;
 margin-bottom: 4rem;
}

.aboutImage img {
 width: 60vw;
 aspect-ratio: 1;
 border: 0.25rem solid hsla(270,100%,60%, 0.5);
 margin: 16px auto;
 /* Changed: added auto for horizontal centering */
 border-radius: 50%;
 filter: saturate(80%) contrast(120%) brightness(80%);
 display: block;

}

/* ==========================================================================
   5. MEDIA QUERIES
   ========================================================================== */
@media (min-width: 576px) {

 .aboutImage img {
  width: 40vw;
 }
}

@media (min-width: 992px) {

 .aboutImage img {
  width: 30vw;
 }
}