:root {
  --accent-color1: #11958c; /* AQUA - This is the primary accent color for the site, instead of using a hexadecimal code for the color, use this: var(--accent-color1) 
  ALSO, in the index.html file, search for this meta line and put the hexadecimal code for the color in this line:
        <meta name="theme-color" content="#FFF000"> (this line cannot use the variable) */
  --text-hover: #15b6ab; /* AQUA LIGHT Hover rollover for buttons, typically a lighter version of the accent color, use var(--text-hover) */
  --accent-color-dark: #107972; /* DARK AQUA Used for background behind accent color 2 */
  --accent-color2: #d4b26b; /* GOLD - This is the secondary accent color for the site */

    /* TEXT COLOR VARIABLES TO EASILY UPDATE SITE TEMPLATE */
  --text-color1: #f1d08b; /* CREAM Primary text color for paragraph body text, use var(--text-color1) */
  --text-color2: #dfbb6d; /* GOLD Accent text color for subheading text, use var(--text-color2) */
  --text-color3: #b99558; /* DARK GOLD Slightyly darker accent text color for subheading text, use var(--text-color3) */
}


.x .c1-1 { letter-spacing: normal }
.x .c1-2 { text-transform: none }
.x .c1-3 { background-color: rgb(255, 255, 255) }
.x .c1-4 { width: 100% }
.x .c1-5 > div { position: relative }
.x .c1-6 > div { overflow: hidden }
.x .c1-7 > div { margin-top: auto }
.x .c1-8 > div { margin-right: auto }
.x .c1-9 > div { margin-bottom: auto }
.x .c1-a > div { margin-left: auto }
.x .c1-b { font-family: 'Open Sans', Arial, sans-serif }
.x .c1-c { font-size: 16px }
.x .c1-h { background-color: rgb(0, 0, 0) }
.x .c1-i { padding-top: 40px }
.x .c1-j { padding-bottom: 40px }
.x .c1-k { padding: 0 !important }
.x .c1-l:before { content: "" }
.x .c1-m:before { display: table }
.x .c1-n:before { clear: both }
.x .c1-o:after { content: "" }
.x .c1-p:after { display: table }
.x .c1-q:after { clear: both }
.x .c1-t { position: relative }
.x .c1-u { margin-bottom: 24px }
.x .c1-w { margin-left: auto }
.x .c1-x { margin-right: auto }
.x .c1-y { padding-left: 24px }
.x .c1-z { padding-right: 24px }
.x .c1-10 { max-width: 100% }
.x .c1-11 { z-index: 3 }
.x .c1-12 { display: none }
.x .c1-16 { margin-left: 0px }
.x .c1-17 { margin-right: 0px }
.x .c1-18 { padding-left: 0px }
.x .c1-19 { padding-right: 0px }
.x .c1-1a { display: flex }
.x .c1-1b { align-items: center }
.x .c1-1c { flex-grow: 1 }
.x .c1-1d { justify-content: center }
.x .c1-1e { padding-top: 24px }
.x .c1-1f { padding-bottom: 24px }
.x .c1-1g { margin-top: 0px }
.x .c1-1h { margin-bottom: 0px }
.x .c1-1i { }
.x .c1-1w { padding-bottom: 0px }
.x .c1-1x { flex-direction: column }
.x .c1-1y > :not(:first-child) { margin-top: 24px }
.x .c1-21 { display: inline-block }
.x .c1-22 { font-family: 'Playfair Display', Georgia, serif }
.x .c1-23 { max-width: calc(100% - 0.1px) }
.x .c1-24 { flex-basis: 40% }
.x .c1-25 { text-align: center }
.x .c1-2a { letter-spacing: inherit }
.x .c1-2b { text-transform: inherit }
.x .c1-2c { text-decoration: none }
.x .c1-2d { word-wrap: break-word }
.x .c1-2e { overflow-wrap: break-word }
.x .c1-2f { display: inline }
.x .c1-2g { cursor: pointer }
.x .c1-2h { border-top: 0px }
.x .c1-2i { border-right: 0px }
.x .c1-2j { border-bottom: 0px }
.x .c1-2k { border-left: 0px }
.x .c1-2l { width: auto }
.x .c1-2m { color: rgb(241, 60, 110) }
.x .c1-2n { font-weight: inherit }
.x .c1-2o:hover { color: rgb(246, 170, 183) }
.x .c1-2p:active { color: rgb(250, 209, 215) }
.x .c1-2q { padding-top: 0px }
.x .c1-2r { vertical-align: middle }
.x .c1-2s { object-fit: contain }
.x .c1-2t { height: 80px }
.x .c1-2u { background-color: transparent }
.x .c1-2v { border-radius: 0px !important }
.x .c1-3d { justify-content: flex-end }
.x .c1-3e { line-height: 1.5 }
.x .c1-3f a { text-decoration: none }
.x .c1-3g { font-size: 22px }
.x .c1-3h { font-weight: 400 }
.x .c1-3m { color: inherit !important }
.x .c1-3n { font-size: inherit !important }
.x .c1-3p { box-sizing: border-box }
.x .c1-3q { flex-direction: row }
.x .c1-3r { flex-wrap: wrap }
.x .c1-3w { flex-shrink: 1 }
.x .c1-3x { flex-basis: 15% }
.x .c1-3y { max-width: 15% }
.x .c1-43 { flex-basis: 70% }
.x .c1-44 { max-width: 70% }
.x .c1-46 { padding-bottom: 32px }
.x .c1-4b { overflow: hidden }
.x .c1-4f { background-color: rgb(22, 22, 22) }
.x .c1-4g { padding-top: 56px }
.x .c1-4h { padding-bottom: 56px }
.x .c1-4r { height: 100% }
.x .c1-4t { max-width: 750px }
.x .c1-4u { letter-spacing: 0.125em }
.x .c1-4v { text-transform: uppercase }
.x .c1-4w { line-height: 1.25 }
.x .c1-4x { margin-bottom: 16px }
.x .c1-4y { text-align: inherit }
.x .c1-4z { width: inherit }
.x .c1-50 { line-height: 1.2 }
.x .c1-51 { display: block }
.x .c1-52 { letter-spacing: 0.023em }
.x .c1-53 { white-space: pre-line }
.x .c1-54 { color: rgb(247, 247, 247) }
.x .c1-55 { font-size: 32px }
.x .c1-5a { word-wrap: normal !important }
.x .c1-5b { overflow-wrap: normal !important }
.x .c1-5c { visibility: hidden }
.x .c1-5d { position: absolute }
.x .c1-5e { overflow: visible }
.x .c1-5f { left: 0 }
.x .c1-5g { font-size: 28px }
.x .c1-5l > p { margin-top: 0 }
.x .c1-5m > p { margin-right: 0 }
.x .c1-5n > p { margin-bottom: 0 }
.x .c1-5o > p { margin-left: 0 }
.x .c1-5p { color: rgb(164, 164, 164) }
.x .c1-5q { font-size: 20px }
.x .c1-5v { color: inherit }
.x .c1-5w { font-weight: 700 }
.x .c1-5x { line-height: inherit }
.x .c1-5y { font-style: italic }
.x .c1-5z { text-decoration: line-through }
.x .c1-60 { text-decoration: underline }
.x .c1-61 { letter-spacing: 0.214em }
.x .c1-62 { transition: all 0.3s }
.x .c1-63 { margin-top: 16px }
.x .c1-64 { border-style: none }
.x .c1-65 { display: inline-flex }
.x .c1-66 { padding-left: 32px }
.x .c1-67 { padding-right: 32px }
.x .c1-68 { padding-top: 8px }
.x .c1-69 { padding-bottom: 8px }
.x .c1-6a { min-height: 48px }
.x .c1-6b { border-radius: 4px }
.x .c1-6c { color: rgb(255, 255, 255) }
.x .c1-6d { background-color: rgb(241, 60, 110) }
.x .c1-6e { text-shadow: none }
.x .c1-6f { font-size: 14px }
.x .c1-6g:hover { background-color: rgb(243, 119, 144) }
.x .c1-6n { line-height: 1.4 }
.x .c1-6o { text-align: left }
.x .c1-6p { color: rgb(222, 44, 93) }
.x .c1-6q { font-size: unset }
.x .c1-6r { font-family: unset }
.x .c1-6s { letter-spacing: unset }
.x .c1-6t { text-transform: unset }
.x .c1-6u { justify-content: flex-start }
.x .c1-6v { margin-bottom: 0px !important }
.x .c1-70 { margin-right: -12px }
.x .c1-71 { margin-bottom: -24px }
.x .c1-72 { margin-left: -12px }
.x .c1-74 { flex-basis: 100% }
.x .c1-75 { padding-right: 12px }
.x .c1-76 { padding-left: 12px }
.x .c1-77 { min-height: 16em }
.x .c1-7e > * { max-width: 100% }
.x .c1-7f > :nth-child(n) { margin-bottom: 24px }
.x .c1-7g > :last-child { margin-bottom: 0 !important }
.x .c1-7h { background-size: cover }
.x .c1-7i { padding-left: 40px }
.x .c1-7j { padding-right: 40px }
.x .c1-7k { padding-top: 32px }
.x .c1-7l { order: -1 }
.x .c1-7m { border-bottom-style: solid }
.x .c1-7n { border-bottom-width: 1px }
.x .c1-7o { border-color: transparent }
.x .c1-7p { background-color: rgba(22, 22, 22, 0.5) }
.x .c1-7x { background-position: center }
.x .c1-7y { background-size: auto, cover }
.x .c1-7z { background-blend-mode: normal }
.x .c1-80 { background-repeat: no-repeat }
.x .c1-81 { text-shadow: 0px 2px 30px rgba(0, 0, 0, 0.12) }
.x .c1-82 { transition: opacity 0.25s, background-size 0.25s, background-position 0.25s }
.x .c1-83 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%), url("//img1.wsimg.com/isteam/ip/f1104fe2-63d1-4594-aac5-99977c889379/GoodKarmaZenShop_1-11-21_int9-1100x1467.jpg/:/rs=w:50,h:50,cg:true,m/cr=w:50,h:50,ax:50%25,ay:50%25/qt=q:1") }
.x .c1-84 > :nth-child(n) { margin-bottom: 0px }
.x .c1-85 { letter-spacing: 0.031em }
.x .c1-86 { top: 0 }
.x .c1-8a { text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3) }
.x .c1-8b { font-size: 19px }
.x .c1-8g { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0.23) 100%), url("//img1.wsimg.com/isteam/ip/f1104fe2-63d1-4594-aac5-99977c889379/GoodKarmaZenShop_1-11-21_int6-1100x1467.jpg/:/rs=w:50,h:50,cg:true,m/cr=w:50,h:50,ax:50%25,ay:50%25/qt=q:1") }
.x .c1-8h { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%), url("//img1.wsimg.com/isteam/ip/f1104fe2-63d1-4594-aac5-99977c889379/GoodKarmaZenShop_1-11-21_int10-1100x1467.jpg/:/rs=w:50,h:50,cg:true,m/cr=w:50,h:50,ax:50%25,ay:50%25/qt=q:1") }
.x .c1-8i { flex-basis: 0% }
.x .c1-8p > p > ol { text-align: left }
.x .c1-8q > p > ol { display: block }
.x .c1-8r > p > ol { padding-left: 1.3em }
.x .c1-8s > p > ol { margin-left: 32px }
.x .c1-8t > p > ol { margin-right: 32px }
.x .c1-8u > p > ol { margin-top: auto }
.x .c1-8v > p > ol { margin-bottom: auto }
.x .c1-8w > p > ul { text-align: left }
.x .c1-8x > p > ul { display: block }
.x .c1-8y > p > ul { padding-left: 1.3em }
.x .c1-8z > p > ul { margin-left: 32px }
.x .c1-90 > p > ul { margin-right: 32px }
.x .c1-91 > p > ul { margin-top: auto }
.x .c1-92 > p > ul { margin-bottom: auto }
.x .c1-93 > ul { text-align: left }
.x .c1-94 > ul { display: block }
.x .c1-95 > ul { padding-left: 1.3em }
.x .c1-96 > ul { margin-left: 32px }
.x .c1-97 > ul { margin-right: 32px }
.x .c1-98 > ul { margin-top: auto }
.x .c1-99 > ul { margin-bottom: auto }
.x .c1-9a > ol { text-align: left }
.x .c1-9b > ol { display: block }
.x .c1-9c > ol { padding-left: 1.3em }
.x .c1-9d > ol { margin-left: 32px }
.x .c1-9e > ol { margin-right: 32px }
.x .c1-9f > ol { margin-top: auto }
.x .c1-9g > ol { margin-bottom: auto }
.x .c1-9k { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.41) 0%, rgba(0, 0, 0, 0.41) 100%), url("//img1.wsimg.com/isteam/ip/f1104fe2-63d1-4594-aac5-99977c889379/Tarot%20Cards%20Yellow%20Crystals%2094456157_1200x801.jpg/:/rs=w:50,h:50,cg:true,m/cr=w:50,h:50,ax:48.61178090653057%25,ay:27.49275539232337%25/qt=q:1") }
.x .c1-9l { flex-direction: column !important }
.x .c1-9m > div:nth-child(2) { padding-left: 0 !important }
.x .c1-9q > div:nth-child(2) { padding-top: 24px }
.x .c1-a4 { margin-bottom: 0px }
.x .c1-a5 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.39) 0%, rgba(0, 0, 0, 0.39) 100%), url("//img1.wsimg.com/isteam/ip/f1104fe2-63d1-4594-aac5-99977c889379/Astrology%20AdobeStock%20218481860%201200x797.jpg/:/rs=w:50,h:50,cg:true,m/cr=w:50,h:50,a:cc/qt=q:1") }
.x .c1-a6 { min-height: 200px }
.x .c1-a7 { flex-basis: auto }
.x .c1-a8 { max-width: inherit }
.x .c1-ab { margin-top: 4px }
.x .c1-ac { color: rgb(169, 169, 169) }
.x .c1-ad { margin-top: 40px }
.x .c1-ae { max-width: none }
.x .c1-af { max-width: 360px }
.x .c1-ag { display: table }
.x .c1-ah { cursor: auto }
.x .c1-ai { height: auto }
.x .c1-aj { justify-content: space-between }
.x .c1-ak { margin-top: 32px }
.x .c1-ap { letter-spacing: 0.045em }
.x .c1-aq { margin-top: 8px }
.x .c1-ar { padding-top: .3em }
.x .c1-aw { line-height: 1 }
.x .c1-ax { border-color: rgb(42, 42, 42) }
.x .c1-ay { border-style: solid }
.x .c1-az { margin-bottom: 40px }
.x .c1-b0 { flex-basis: 83.33333333333334% }
.x .c1-b1 { max-width: 83.33333333333334% }
.x .c1-b2 { margin-left: 8.333333333333332% }
.x .c1-b3 { margin-top: 72px }
.x .c1-b5 { font-size: 12px }
.x .c1-ba { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 100%), url("//img1.wsimg.com/isteam/ip/f1104fe2-63d1-4594-aac5-99977c889379/Chakra-Flowers-Water-AdobeStock_37804567_1200x.jpg/:/rs=w:50,h:50,cg:true,m/cr=w:50,h:50,a:cc/qt=q:1") }
.x .c1-bb { padding-left: none }
.x .c1-bc { padding-right: none }
.x .c1-bd:hover { color: rgb(136, 25, 57) }
.x .c1-be:active { color: rgb(96, 15, 38) }
.x .c1-bf { color: rgb(27, 27, 27) }
.x .c1-bg { margin-left: 8px }
.x .c1-bh { margin-right: 8px }
.x .c1-bi { margin-bottom: 8px }
.x .c1-bv { padding-left: 0 !important }
.x .c1-bw { padding-right: 0 !important }
.x .c1-c2 { min-height: 300px }
.x .c1-c5 { font-size: 18px }
.x .c1-ca > :last-child { margin-bottom: 0 }
.x .c1-cb { flex: 1 }
.x .c1-cd { object-fit: cover }
.x .c1-ce { max-height: 800px }
.x .c1-cf { box-shadow: none }
.x .c1-cg { margin-top: 48px }
.x .c1-ch { padding-bottom: 30% }
.x .c1-ck { border-color: #999 }
.x .c1-cl { flex-grow: 3 }
.x .c1-co { letter-spacing: 0.083em }
.x .c1-cp { color: rgb(150, 150, 150) }
.x .c1-cq:hover { color: rgb(244, 141, 160) }
.x .c1-cr:active { color: rgb(247, 181, 192) }
.x .c1-cs { margin-top: 24px }
.x .c1-cu { position: fixed }
.x .c1-cv { right: 0px }
.x .c1-cw { z-index: 10000 }
.x .c1-cx { border-radius: 0px }
.x .c1-cy { overflow-y: auto }
.x .c1-cz { transition: all 1s cubic-bezier(0.49, -0.29, 0.4, 1.26) }
.x .c1-d0 { box-shadow: 0 2px 6px 0px rgba(0, 0, 0, 0.3) }
.x .c1-d1 { bottom: -500px }
.x .c1-d9 { max-height: 300px }
.x .c1-db { margin-bottom: 4px }
.x .c1-dc { word-break: break-word }
.x .c1-dd { flex-basis: 50% }
.x .c1-de { padding-left: 16px }
.x .c1-df { padding-right: 16px }
.x .c1-dg { padding-top: 4px }
.x .c1-dh { padding-bottom: 4px }
.x .c1-di { min-height: 32px }
.x .c1-dj { color: rgb(48, 48, 48) }
.x .c1-dk:hover { background-color: rgb(255, 255, 255) }
.x .c1-dl:nth-child(2) { margin-left: 24px }

/* Custom styles from index.html */
body {
    line-height: 1.5;
    color: var(--text-color1);
    background-color: #000;
}
a:hover {
    color: var(--text-hover);
}
img {
    max-width: 100%;
    height: auto;
}
p {
    margin-top: 0px; /* This gets rid of extra space between service name header and the description paragraph. */
    margin-bottom: 40px; /* This adds space after the description paragraph before the next section. */
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0px;
}

/* Header */
header {
    background-color: #090d10;
    padding: 24px 0 27px 0;
    text-align: center;
}
.logo {
    width: 400px;
    height: auto;
}
.header-phone {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 22px;
    color: var(--accent-color1);
    letter-spacing: 0.125em;
    text-transform: uppercase;
    margin-top: 8px;
    display: block;
    text-decoration: none;
}

/* Hero Section */
.hero {
    background-color: #000;
    padding: 42px 24px;
    text-align: center;
    min-height: 300px;
}
.hero-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.hero-image {
    flex: 1;
    max-width: 50%;
}
.hero-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.hero-text {
    flex: 1;
    text-align: left;
}
.hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 32px;
    line-height: 1.2;
    color: var(--accent-color2);
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.12);
    margin-bottom: 16px;
    letter-spacing: 0.023em;
}
.hero p {
    font-size: 19px;
    color: var(--text-color3);
    letter-spacing: 0.03em;
    margin-bottom: 16px;
}
.hero .highlight {
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-size: 16px;
    color: var(--accent-color1);
    letter-spacing: 0.125em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.call-now-btn {
    background-color: var(--accent-color-dark);
    color: #fff;
    padding: 8px 32px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.214em;
    display: inline-block;
    transition: background-color 0.3s;
    text-decoration: none;
}
.call-now-btn:hover {
    background-color: var(--text-hover);
    color: #fff;
}

/* Peek Inside Section */
.peek-section {
    background-color: #000;
    padding: 40px 0;
}
.peek-section h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.125em;
    margin-bottom: 24px;
    text-align: center;
    color: var(--text-color2);
    text-shadow: 2px 2px 10px rgba(0, 0, 0, .6);
}
.peek-items {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}
.peek-item {
    background-size: cover;
    padding: 40px 16px;
    min-height: 280px;
    flex: 1;
    flex-basis: 100%;
}
.peek-item:nth-child(1) {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%), url('images/Psychic-Third-Eye-Main-Room-Buddha-2-900x1200.jpg') center/cover no-repeat;
}
.peek-item:nth-child(2) {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%), url('images/reading-room-2_766x1021.jpg') center/cover no-repeat;
}
.peek-item:nth-child(3) {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%), url('images/meditation-triangle-900x1200.jpg') center/cover no-repeat;
}
.peek-item:nth-child(4) {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%), url('images/light-therapy-red_900x1200.jpg') center/cover no-repeat;
}
.peek-item h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.125em;
    margin-bottom: 16px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}
.peek-item p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    color: #f7f7f7;
    text-align: center;
    line-height: 1.5;
    padding-right: 16px;
    padding-left: 16px;
}

/* Guidance Section */
.guidance-section {
    background-color: #000;
    padding: 40px 24px;
    text-align: center;
}

.guidance-section h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    line-height: 1.25;
    color: var(--text-color2);
    margin-bottom: 16px;
}
.guidance-section p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 18px;
    color: var(--text-color3);
    line-height: 1.5;
}

/* Yesterday Section */
.yesterday-section {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url('images/Spiritual-Candles-251939239_1200x800.jpg') center/cover no-repeat;
    background-size: cover;
    background-position: center 26%; /* This makes the focal point of the image 26% down from the top. */
    min-height: 200px;
    display: flex;
    padding: 24px; 
    align-items: center;         /* ← Vertically centers the content */
    justify-content: center;     /* ← Horizontally centers (replaces text-align) */
    text-align: center;
    background-color: var(--accent-color-dark); /* Updated background color */
}
.yesterday-section h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 42px; /* 32pt = 42px (1pt = 1.333px) */
    line-height: 1.25;
    color: var(--accent-color3);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Services Section */
.services-section {
    background-color: #000;
    padding: 40px 0;
}
.services-section h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 32px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.125em;
    margin-bottom: 16px;
    text-align: center;
    color: var(--text-color2);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.services-section .subheading {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 24px;
    color: var(--accent-color1);
    text-align: center;
    margin-bottom: 24px;
}
.services-items {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.service-item {
    flex: 1;
    flex-basis: 100%;
    text-align: center;
}
.service-item .image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 66.67%; /* 3:2 aspect ratio (2/3 = 0.6667) */
    /* padding-bottom: 75%; /* 4:3 aspect ratio (3/4 = 0.75) */
    margin-bottom: 0px; /* Increase this for more space under service images */
}
.service-item .image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service-item .header-row {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: baseline; /* This makes the price align to the top row of the service title, necessary if the service title goes beyond one line. */
    justify-content: space-between;
    margin-bottom: 0px; /* increasing this will increase the space under service titles */
}
.service-item h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: 0.05em;
    text-align: left;
    color: var(--text-hover);
}
.service-item .price {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 22px;
    color: var(--accent-color1);
    text-align: right;
    vertical-align: top; /* Trying to get price to align with top of section title. */
}
.service-item p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 18px;
    color: var(--text-color1);
    text-align: left;
    line-height: 1.5;
}

/* Special Offer Section */
.special-offer-section {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url('images/Palm-&-Tarot-Reading-251455634_1200x800.jpg') center/cover no-repeat;
    background-size: cover;
    background-position: center 57%; /* This makes the focal point of the image 65% down from the top. */
    padding: 24px; 
    min-height: 200px;
    display: flex;
    align-items: center; /* Vertically centers the content */
    justify-content: center; /* Horizontally centers (replaces text-align) */
    text-align: center;
    background-color: var(--accent-color-dark); /* Updated background color */
}
.special-offer-section h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 42px; /* 32pt = 42px (1pt = 1.333px) */
    line-height: 1.25;
    color: var(--text-color2);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Contact Section */
.contact-section {
    background-color: #161616;
    padding: 28px 0;
}
.contact-section .subheading {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 22px;
    color: var(--accent-color1);
    letter-spacing: 0.125em;
    margin-bottom: 24px;
    text-align: center;
}
.contact-section h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: 0.125em;
    margin-bottom: 18px;
    text-align: center;
}
.contact-section p {
    font-size: 20px;
    text-align: center;
    padding: 0 10px;
}
.contact-section a {
    color: var(--accent-color1);
}
.contact-section a:hover {
    color: var(--text-hover);
}
.contact-section .hours {
    max-width: 750px;
    margin: 24px auto;
}
.contact-section .hours h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: 0.125em;
    margin-bottom: 16px;
    text-align: center;
}
.contact-section .hours ul {
    list-style: none;
    font-size: 20px;
    color: var(--text-color1);
    padding: 0 10px;
}
.contact-section .hours li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 8px 0;
}
.contact-section .hours li span {
    flex: 1;
    text-align: left;
}
.contact-section .hours li span:last-child {
    text-align: right;
}
.contact-form {
    max-width: 750px;
    margin: 0 auto;
}
.contact-form label {
    display: block;
    font-size: 14px;
    color: #a4a4a4;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.214em;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 8px 16px;
    margin-bottom: 24px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    color: #303030;
}
.contact-form textarea {
    min-height: 100px;
}
.contact-form button {
    background-color: var(--accent-color1);
    color: #fff;
    padding: 8px 32px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.214em;
    cursor: pointer;
    transition: background-color 0.3s;
}
.contact-form button:hover {
    background-color: var(--text-hover);
}

/* Footer */
footer {
    background-color: #161616;
    padding: 24px 0;
    text-align: center;
    font-size: 12px;
    color: #969696;
}
footer a {
    color: var(--accent-color1);
    text-decoration: underline;
}
footer a:hover {
    color: var(--text-hover);
}
footer hr {
    border: none;
    border-top: 1px solid #999;
    margin: 24px 0;
}

/* Responsive Design */
@media (min-width: 1024px) {
    .peek-items {
        flex-wrap: nowrap;
    }
    .peek-item {
        flex-basis: calc(33.33% - 16px); /* Adjusted for gap */
    }
    .services-items {
        flex-wrap: wrap;
    }
    .service-item {
        flex: 0 0 calc(33.33% - 16px); /* Force 3 tiles wide, accounting for gap */
        max-width: calc(33.33% - 16px); /* Ensure max-width matches */
        min-width: 0; /* Prevents flex items from growing too large */
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .logo {
        width: clamp(250px, 100%, 400px);
    }
    .peek-items {
        flex-wrap: wrap;
    }
    .peek-item {
        flex-basis: calc(50% - 12px);
    }
    .peek-item:nth-child(3) {
        flex-basis: 100%;
    }
    .peek-item p {
    font-size: 18px;
    padding-right: 30px;
    padding-left: 30px;
}
    
    .services-items {
        flex-wrap: wrap;
    }
    .service-item {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
    .service-item:nth-child(3n) {
        flex-basis: 100%;
        max-width: 100%;
    }
    .yesterday-section h2 {
        font-size: 36px; /* Scaled down from 42px */
    }
    .special-offer-section h2 {
        font-size: 36px; /* Scaled down from 42px */
    }
}
@media (max-width: 767px) {
    .logo {
        width: 250px;
    }
    .hero {
        padding: 32px 0px;
    }
    .hero-content {
        flex-direction: column;
        align-items: center;
    }
    .hero-image {
        max-width: 100%;
        margin-bottom: 24px;
    }
    .hero-text {
        text-align: center;
        padding: 0px 24px;
    }
    .hero h1 {
        font-size: 28px;
    }
    .hero p {
        font-size: 18px;
    }
    
    /* Max 767 px */
    .special-offer-section  {
        padding: 0 26px 0 26px;
    }
    
    .peek-section,
    .peek-item,
    .guidance-section,
    .yesterday-section,
    .services-section,
    /* Removed .service-item, from this list >*/
    .special-offer-section {
        padding: 32px 0px;
        background-size: cover;
    }
      
    .peek-section h2,
    .guidance-section h2,
    .yesterday-section h2,
    .services-section h2,
    .special-offer-section h2 {
        font-size: 28px;
    }
    
    .peek-item h3,
    .service-item h3 {
        font-size: 24px;
    }
    
    .peek-item p {
    font-size: 18px;
    padding-right: 24px;
    padding-left: 24px;
}
    
    
    .peek-items {
        flex-direction: column;
    }
    .peek-item {
        flex-basis: 100%;
        min-height: 400px; /* ON A PHONE: This sets the minimum height for images in the peek section. */
    }
    .services-items {
        flex-direction: column;
    }
    .service-item {
        flex-basis: 100%;
    }
    .service-item .image-wrapper {
        margin-left: 0px; /* Extend to left edge */
        margin-right: 0px; /* Extend to right edge */
        margin-bottom: 0px; /*Increase to add space after service image on a phone */
    }
    .contact-section {
        padding: 24px 0;
    }
}