@font-face{
font-family: 'Playfair Display';
src: url('../fonts/PlayfairDisplay.woff2') format('woff2'),
url('../fonts/PlayfairDisplay.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: 'Montserrat';
src: url('../fonts/Montserrat-Regular.woff2') format('woff2'),
url('../fonts/Montserrat-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: 'Montserrat';
src: url('../fonts/Montserrat-Bold.woff2') format('woff2'),
url('../fonts/Montserrat-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: 'Montserrat';
src: url('../fonts/Montserrat-Italic.woff2') format('woff2'),
url('../fonts/Montserrat-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face{
font-family: 'Montserrat';
src: url('../fonts/Montserrat-BoldItalic.woff2') format('woff2'),
url('../fonts/Montserrat-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face{
font-family: 'RoxboroughCF';
src: url('../fonts/roxborough-cf-regular.woff2') format('woff2'),
url('../fonts/roxborough-cf-regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.skip-link{
position: absolute;
top: -100px;
left: 0;
background: var(--primary);
color: white;
padding: 1rem;
z-index: 10000;
transition: top 0.3s;
text-decoration: none;
font-weight: 700;
}
.skip-link:focus{top: 0}
:focus{
outline: 3px solid var(--secondary);
outline-offset: 4px;
}
:focus:not(:focus-visible){
outline: none;
}
:focus-visible{
outline: 3px solid var(--secondary);
outline-offset: 4px;
}
:root{
--primary: #D32C7C;
--secondary: #1e6b6d;
--accent: #F2BDD7;
--accent-light: #60C5C7;
--text: #1e293b;
--text-light: #475569;
--white: #fff;
--font-heading: 'RoxboroughCF','Playfair Display',serif;
--font-body: 'Montserrat',sans-serif;
--transition: all 0.3s ease;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
font-family: var(--font-body);
line-height: 1.7;
color: var(--text);
background: linear-gradient(135deg,#fae6f2 0%,#e0f2f2 100%);
background-attachment: fixed;
scroll-behavior: smooth;
}
h1,h2,h3,h4{
font-family: var(--font-heading);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
}
header{
background: rgba(255,255,255,0.98);
padding: 0.5rem 5%;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
nav{
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
position: relative;
min-height: 60px;
}
.nav-logo{
display: flex;
align-items: center;
}
.nav-logo-img{
height: 40px;
width: auto;
display: block;
}
.menu-toggle{
display: none;
flex-direction: column;
justify-content: space-around;
width: 35px;
height: 30px;
background: transparent;
border: none;
cursor: pointer;
padding: 5px;
z-index: 1001;
}
.menu-toggle span{
width: 25px;
height: 3px;
background-color: var(--primary);
border-radius: 10px;
transition: all 0.3s ease;
}
nav ul{
display: flex;
list-style: none;
}
nav ul li{
margin-left: 25px;
}
nav ul li a{
text-decoration: none;
color: var(--text);
font-weight: 700;
transition: var(--transition);
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1.5px;
}
nav ul li a:hover{
color: var(--primary);
}
.lang-switcher{
display: flex;
gap: 6px;
align-items: center;
}
.lang-switcher a,
.lang-switcher button{
display: inline-flex;
align-items: center;
gap: 4px;
background: transparent;
border: 1px solid var(--secondary);
color: var(--text);
padding: 4px 10px;
border-radius: 20px;
font-size: 0.72rem;
font-weight: 600;
font-family: var(--font-body);
letter-spacing: 0.04em;
text-decoration: none;
cursor: pointer;
transition: var(--transition);
line-height: 1;
}
.lang-switcher a:hover,
.lang-switcher button:hover{
background: var(--accent);
border-color: var(--primary);
color: var(--primary);
}
.lang-switcher a.active,
.lang-switcher button.active{
background: var(--primary);
color: var(--white);
border-color: var(--primary);
}
.hero{
background: linear-gradient(135deg,rgba(211,44,124,0.7),rgba(40,150,152,0.7)),
url('../images/hero.webp') 25% center/cover;
min-height: 90vh;
margin-top: 70px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: var(--white);
padding: 100px 20px;
}
.hero-content{
max-width: 900px;
}
.hero-logo img{
height: 200px;
width: auto;
margin-bottom: 2rem;
filter: brightness(0) invert(1);
opacity: 0.9;
}
.hero h1{
font-size: 2.2rem;
line-height: 1.1;
margin-bottom: 1.5rem;
text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
.hero-subtitle{
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--accent);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 4px;
}
.hero-text{
font-size: 1.1rem;
margin-bottom: 2.5rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.welcome-text{
margin-top: 3rem;
font-style: italic;
opacity: 0.8;
}
.hero-cta-group{
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-top: 1rem;
}
@media (min-width: 768px){
.hero-cta-group{
flex-direction: row;
justify-content: center;
gap: 2rem;
}
}
.cta-button{
display: inline-block;
background-color: var(--primary);
color: var(--white);
padding: 15px 40px;
text-decoration: none;
border-radius: 50px;
transition: var(--transition);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border: 2px solid transparent;
text-align: center;
}
.cta-button:hover,
.cta-button:focus{
background-color: var(--secondary);
border-color: var(--secondary);
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
outline: none;
}
.cta-button:active,.floating-btn:active,.contact-btn:active,.event-cta:active{
transform: scale(0.95) translateY(0);
filter: brightness(0.8);
transition: transform 0.1s;
}
.cta-button.secondary-cta{
background-color: var(--secondary);
}
.cta-button.secondary-cta:hover,
.cta-button.secondary-cta:focus{
background-color: var(--primary);
border-color: var(--primary);
color: var(--white);
}
.container{
padding: 2rem 0;
max-width: 1200px;
margin: 0 auto;
text-align: center;
width: 90%;
}
.site-accordion{
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 4rem;
}
.section-accordion-item{
border-radius: 20px;
overflow: hidden;
background: var(--white);
border: 2px solid var(--secondary);
transition: var(--transition);
}
.section-header{
padding: 2rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
background: var(--white);
transition: background-color 0.3s ease;
}
.section-header:hover{background-color: #fdf5f9}
.section-header h2{margin: 0;font-size: 2rem;color: var(--secondary)}
.section-header i{
font-size: 1.8rem;
color: var(--primary);
transition: transform 0.6s cubic-bezier(0.4,0,0.2,1),color 0.3s ease;
position: relative;
z-index: 1;
}
.always-visible-content{
padding: 2rem 5% 1rem;
}
.about-visual-flex{
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
width: 100%;
}
.about-visual-flex .image-content{
flex: 0 0 400px;
position: relative;
}
.about-visual-flex .image-content img{
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.experience-box{
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.experience-box h2{
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 400;
text-transform: uppercase;
color: var(--secondary);
background: #f1f5f9;
}
.experience-box span{
font-family: 'Montserrat',sans-serif;
font-size: 1rem;
font-weight: 400;
text-transform: uppercase;
color: var(--secondary);
background: #f1f5f9;
padding: 12px 20px;
border-radius: 8px;
border-left: 5px solid var(--primary);
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
box-sizing: border-box;
text-align: left;
min-height: 60px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
@media (max-width: 992px){
.about-visual-flex{
flex-direction: column;
text-align: center;
}
.about-visual-flex .image-content{
flex: 1;
width: 100%;
max-width: 500px;
}
}
.about-intro-text{
margin-bottom: 2rem;
padding-top: 1rem;
border-top: 1px solid #f1f5f9;
}
.about-subtitle{
font-family: var(--font-heading);
margin-bottom: 1.5rem;
font-weight: 700;
color: var(--secondary);
}
.section-intro{
font-family: 'Montserrat',sans-serif;
font-size: 1.1rem;
color: var(--text-light);
margin-bottom: 2rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.sub-section-title{
font-family: var(--font-heading);
font-size: 1.3rem;
color: var(--secondary);
margin-bottom: 1rem;
font-weight: 700;
}
.section-content{
max-height: 0;
overflow: hidden;
transition: max-height 0.6s cubic-bezier(0.4,0,0.2,1),padding 0.6s cubic-bezier(0.4,0,0.2,1);
padding: 0 5%;
text-align: left;
}
.section-accordion-item.active{border-color: var(--primary);box-shadow: 0 15px 40px rgba(0,0,0,0.08)}
.section-accordion-item.active .section-content{
max-height: 15000px;
transition: max-height 1.2s cubic-bezier(0.4,0,0.2,1),padding 0.6s cubic-bezier(0.4,0,0.2,1);
padding-bottom: 4rem;
padding-top: 2rem;
}
.section-accordion-item.active .section-header{border-bottom: 1px solid #f1f5f9}
.section-accordion-item.active .section-header i{transform: rotate(180deg);color: var(--secondary)}
.accordion-item{background: #f8fafc;border-radius: 15px;margin-bottom: 1rem;overflow: hidden;border: 1px solid #eee}
.accordion-header{padding: 1.2rem 2rem;display: flex;justify-content: space-between;align-items: center;cursor: pointer;transition: background-color 0.3s ease}
.accordion-header:hover{background: #fdf5f9}
.accordion-header h3{font-size: 1.2rem;color: var(--primary);display: flex;flex-direction: column}
.accordion-header h3 span{font-family: var(--font-heading);font-size: 1.1rem;color: var(--secondary);text-transform: none;font-weight: 600;margin-top: 5px}
.accordion-header i{
font-size: 1.2rem;
color: var(--primary);
transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
position: relative;
z-index: 1;
}
.accordion-content{max-height: 0;overflow: hidden;transition: max-height 0.5s ease;padding: 0 2rem}
.accordion-item.active .accordion-content{max-height: 5000px;padding: 2rem;background: var(--white)}
.accordion-item.active .accordion-header{background: var(--accent)}
.accordion-item.active .accordion-header i{transform: rotate(180deg);color: var(--secondary)}
.section-accordion-item:not(.active) .section-header i::after,
.accordion-item:not(.active) .accordion-header i::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 45px;
height: 45px;
background-color: var(--primary);
border-radius: 50%;
z-index: -1;
transform: translate(-50%,-50%) scale(0.5);
opacity: 0;
pointer-events: none;
animation: ripplePulse 2s infinite ease-out;
}
@keyframes ripplePulse{
0%{transform: translate(-50%,-50%) scale(0.5);opacity: 0.4}
100%{transform: translate(-50%,-50%) scale(1.5);opacity: 0}
}
.accordion-header:hover i{
transform: scale(1.2);
}
.accordion-item.active .accordion-header:hover i{
transform: rotate(180deg) scale(1.2);
}
.services-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(280px,1fr));gap: 20px}
.service-card{background: #f8fafc;padding: 1.5rem;border-radius: 15px;border-left: 5px solid var(--primary);text-align: left}
.service-card h4{font-family: var(--font-heading);font-size: 1.2rem;color: var(--primary);margin-bottom: 1rem}
.table-cat-title{font-family: var(--font-heading);font-size: 1.2rem;color: var(--secondary);margin: 2rem 0 0.5rem;text-transform: uppercase;letter-spacing: 1px}
.table-cat-subtitle{font-family: var(--font-body);font-size: 1rem;color: var(--primary);font-style: italic;margin-bottom: 1.5rem}
.sub-section-full-image{
margin: 2rem 0;
width: 100%;
}
.full-service-img{
width: 100%;
height: auto;
max-height: 400px;
object-fit: cover;
border-radius: 20px;
box-shadow: 10px 10px 0 var(--accent);
}
@media (max-width: 992px){
.full-service-img{
box-shadow: 8px 8px 0 var(--accent);
}
}
.rituals-section{
margin-top: 4rem;
padding-top: 3rem;
border-top: 1px solid #f1f5f9;
text-align: center;
}
.rituals-title{
font-size: 2.2rem;
color: var(--secondary);
margin-bottom: 2rem;
}
.rituals-intro{
max-width: 800px;
margin: 0 auto 2.5rem;
text-align: center;
font-size: 1.1rem;
color: var(--text-light);
line-height: 1.8;
}
.rituals-intro p{
margin-bottom: 1.5rem;
}
.rituals-cta{
margin-bottom: 4rem;
}
.rituals-sub-title{
font-size: 1.8rem;
color: var(--primary);
margin-bottom: 2.5rem;
text-align: center;
}
.rituals-grid{
margin-bottom: 4rem;
}
.ritual-card{
border-bottom: 4px solid var(--secondary) !important;
}
.how-it-works-section{
background: #f8fafc;
padding: 3rem 5%;
border-radius: 20px;
margin-bottom: 3rem;
}
.how-it-works-grid{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
gap: 30px;
text-align: left;
}
.step-card h4{
color: var(--primary);
margin-bottom: 1rem;
font-size: 1.2rem;
}
.rituals-investment{
font-size: 1.2rem;
color: var(--secondary);
font-weight: 700;
margin-top: 2rem;
font-style: italic;
}
@media (max-width: 768px){
.rituals-title{font-size: 1.8rem}
.rituals-sub-title{font-size: 1.5rem}
}
.specialized-paths{background: var(--secondary);color: var(--white);padding: 2rem;border-radius: 15px;margin-top: 2rem;text-align: left}
.specialized-paths h4{font-family: var(--font-heading);font-size: 1.2rem;color: var(--white);margin-bottom: 1rem}
.specialized-paths ul{list-style: none;display: grid;grid-template-columns: repeat(auto-fit,minmax(220px,1fr));gap: 15px;margin-top: 1rem}
.specialized-paths li{position: relative;padding-left: 25px;margin-bottom: 1rem;line-height: 1.4}
.specialized-paths li::before{position: absolute;left: 0;top: 0;content: '✦';color: var(--accent)}
.services-footer-cta{
margin-top: 3rem;
text-align: center;
}
.table-responsive{overflow-x: auto;margin-top: 1rem}
table{width: 100%;border-collapse: collapse;background: var(--white);border-radius: 10px;overflow: hidden}
th,td{padding: 12px 15px;text-align: left;border-bottom: 1px solid #f1f5f9}
th{background-color: var(--secondary);color: var(--white);font-size: 0.75rem;text-transform: uppercase}
.section-flex{display: flex;align-items: flex-start;gap: 40px;text-align: left}
.image-content img{width: 100%;border-radius: 20px;box-shadow: 10px 10px 0 var(--accent)}
.philosophy-section{margin-top: 4rem;padding-top: 3rem;border-top: 1px solid #eee}
.philosophy-quote{
font-family: 'Montserrat',sans-serif;
font-size: 1.8rem;
font-style: italic;
color: var(--secondary);
margin-bottom: 2rem;
line-height: 1.3;
}
.principles-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 20px;text-align: left}
.principle-card{padding: 1.5rem;background: #f8fafc;border-radius: 20px;border-bottom: 4px solid var(--primary)}
.events-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(280px,1fr));gap: 20px;text-align: left;margin-bottom: 2rem}
.event-card{background: var(--white);padding: 1.5rem;border-radius: 15px;border: 1px solid #eee}
.event-cta{color: var(--primary);font-weight: 700;text-decoration: none;border-bottom: 2px solid var(--primary)}
.reviews-slider-container{
max-width: 800px;
margin: 0 auto;
position: relative;
overflow-x: auto;
padding: 2rem 0;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.reviews-slider-container::-webkit-scrollbar{
display: none;
}
.reviews-wrapper{
display: flex;
}
.review-card{
flex: 0 0 100%;
padding: 2.5rem 2rem;
box-sizing: border-box;
text-align: center;
scroll-snap-align: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 380px;
}
.review-stars{
color: #ffc107;
font-size: 1.2rem;
margin-bottom: 1rem;
}
.review-text{
font-size: 1.2rem;
font-style: italic;
color: var(--text);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.review-author{
font-family: 'Montserrat',sans-serif;
font-weight: 700;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 1px;
}
.slider-dots{
display: flex;
justify-content: center;
gap: 10px;
margin-top: 1rem;
}
.dot{
width: 10px;
height: 10px;
border-radius: 50%;
background: #cbd5e1;
cursor: pointer;
transition: var(--transition);
}
.dot.active{
background: var(--primary);
transform: scale(1.2);
}
.contact-wrapper{max-width: 1000px;margin: 0 auto}
.contact-info-container{text-align: left}
.map-link{
color: var(--text);
text-decoration: none;
transition: var(--transition);
display: block;
}
.map-link:hover{
color: var(--primary);
text-decoration: underline;
}
.contact-methods{display: flex;flex-direction: column;gap: 15px;margin-top: 2rem}
.contact-btn{display: flex;align-items: center;justify-content: center;gap: 10px;padding: 15px;border-radius: 10px;text-decoration: none;font-weight: 700;color: #fff;transition: 0.3s}
.whatsapp-btn{background: #25D366}
.treatwell-btn{background: #1a1a1a}
.fixed-nav-buttons{position: fixed;bottom: 20px;right: 20px;display: flex;flex-direction: column;gap: 10px;z-index: 2500}
.floating-btn{width: 50px;height: 50px;background: var(--primary);color: var(--white);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 1.2rem;box-shadow: 0 5px 20px rgba(0,0,0,0.2);text-decoration: none;transition: var(--transition)}
.floating-btn:hover{transform: scale(1.1) translateY(-5px);background: var(--secondary)}
#btn-to-top{background: var(--secondary)}
footer{background: #1e293b;color: var(--white);padding: 4rem 5% 2rem}
.footer-top{max-width: 1200px;margin: 0 auto 3rem;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid rgba(255,255,255,0.1);padding-bottom: 2rem}
.footer-logo{font-family: var(--font-heading);font-weight: 900;color: var(--primary);font-size: 1.5rem;text-transform: uppercase}
.social-bar{display: flex;gap: 15px}
.social-bar a{color: var(--white);font-size: 1.2rem;width: 40px;height: 40px;background: rgba(255,255,255,0.05);display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: var(--transition)}
.social-bar a:hover{background: var(--primary);transform: translateY(-5px)}
.footer-links{display: flex;flex-wrap: wrap;justify-content: center;gap: 25px;margin-bottom: 3rem}
.footer-links a{color: var(--white);text-decoration: none;opacity: 0.7;font-size: 0.85rem;text-transform: uppercase}
.footer-bottom{text-align: center;border-top: 1px solid rgba(255,255,255,0.1);padding-top: 2rem;font-size: 0.8rem;display: flex;flex-direction: column;gap: 10px}
.legal-links{display: flex;justify-content: center;gap: 20px}
.legal-links a{color: var(--white);opacity: 0.5;text-decoration: none}
#cookie-consent-banner{position: fixed;bottom: 0;left: 0;right: 0;background: #fff;box-shadow: 0 -4px 24px rgba(0,0,0,0.12);border-radius: 16px 16px 0 0;z-index: 9000;transition: opacity 0.35s ease,transform 0.35s ease}
#cookie-consent-banner.ccb-hiding{opacity: 0;transform: translateY(100%)}
.ccb-inner{display: flex;align-items: center;justify-content: space-between;gap: 16px;padding: 16px 24px}
.ccb-msg{margin: 0;font-size: 0.85rem;color: #333;line-height: 1.5;flex: 1}
.ccb-link{color: var(--primary);text-decoration: underline}
.ccb-btn{background: var(--primary);color: #fff;border: none;padding: 10px 24px;border-radius: 8px;cursor: pointer;font-size: 0.9rem;font-family: var(--font-body);font-weight: 600;white-space: nowrap;transition: background 0.2s;flex-shrink: 0}
.ccb-btn:hover{background: var(--secondary)}
.policy-page{padding: 6rem 0 4rem}
.policy-container{max-width: 860px;margin: 0 auto;padding: 0 2rem}
.policy-container h1{font-family: var(--font-heading);color: var(--secondary);font-size: 2.2rem;margin-bottom: 0.5rem}
.policy-container .policy-date{font-size: 0.85rem;color: #888;margin-bottom: 2.5rem}
.policy-container h2{font-family: var(--font-heading);color: var(--primary);font-size: 1.3rem;margin: 2rem 0 0.75rem;border-bottom: 1px solid var(--light-bg);padding-bottom: 0.4rem}
.policy-container h3{color: var(--secondary);font-size: 1.05rem;margin: 1.25rem 0 0.4rem}
.policy-container p,.policy-container li{font-size: 0.95rem;line-height: 1.8;color: #444}
.policy-container ul{padding-left: 1.5rem;margin: 0.5rem 0 1rem}
.policy-container li{margin-bottom: 0.4rem}
.policy-container a{color: var(--primary)}
.policy-container table{width: 100%;border-collapse: collapse;margin: 1rem 0;font-size: 0.9rem}
.policy-container th{background: var(--light-bg);padding: 10px 12px;text-align: left;font-weight: 600;color: var(--secondary)}
.policy-container td{padding: 9px 12px;border-bottom: 1px solid #eee;color: #444;vertical-align: top}
.policy-container .policy-box{background: var(--light-bg);border-left: 4px solid var(--primary);padding: 1rem 1.25rem;border-radius: 0 8px 8px 0;margin: 1.5rem 0}
.policy-container .policy-box p{margin: 0}
html{scroll-padding-top: 100px}
@media (max-width: 992px){
.section-flex,.footer-top{flex-direction: column;text-align: center;gap: 20px}
.hero h1{font-size: 1.8rem}
.section-header h2{font-size: 1.4rem}
}
@media (max-width: 768px){
.menu-toggle{display: flex}
nav ul{display: none;flex-direction: column;position: absolute;top: 100%;left: -5%;width: 110%;background: #fff;padding: 20px;box-shadow: 0 10px 20px rgba(0,0,0,0.1)}
nav ul.active{display: flex}
nav ul li{margin: 10px 0}
.services-grid{grid-template-columns: 1fr}
.specialized-paths{padding: 1.2rem}
.specialized-paths ul{grid-template-columns: 1fr;gap: 10px}
.cta-button{padding: 12px 20px;font-size: 0.85rem;width: auto;max-width: 100%;box-sizing: border-box}
.accordion-header{padding: 1rem 1.2rem}
.accordion-content{padding: 0 1.2rem}
td{display: block;padding: 12px 15px 12px 45%;position: relative;text-align: right;font-size: 0.85rem;border: none;border-bottom: 1px solid #f1f5f9}
td::before{content: attr(data-label);position: absolute;left: 15px;font-weight: 800;color: var(--secondary);font-size: 0.7rem;text-transform: uppercase;top: 50%;transform: translateY(-50%)}
tr{display: block;margin-bottom: 1rem;border: 1px solid #eee;border-radius: 10px}
thead{display: none}
.ccb-inner{flex-direction: row;gap: 12px;padding: 12px 16px;flex-wrap: nowrap}
.ccb-msg{font-size: 0.78rem;line-height: 1.4}
.ccb-btn{padding: 8px 14px;font-size: 0.82rem;width: auto}
.floating-btn{width: 50px;height: 50px;font-size: 1.1rem}
}
@media (max-width: 992px){
.nav-logo{
display: none !important;
}
}
.section-accordion-item,.section-accordion-item.active{
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.section-header{
cursor: default !important;
justify-content: center !important;
text-align: center;
padding-bottom: 1rem;
}
.section-header:hover{
background-color: var(--white) !important;
}
.section-header h2{
font-size: 2.5rem !important;
}
.homepage-box{
background: var(--white);
border: 2px solid var(--secondary);
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0,0,0,0.06);
margin-bottom: 4rem;
overflow: hidden;
position: relative;
}
.homepage-box .section-header{
background: transparent !important;
cursor: default !important;
padding-top: 2rem;
padding-bottom: 1rem;
border-bottom: 0 !important;
}
.homepage-box .section-content{
opacity: 1 !important;
visibility: visible !important;
max-height: none !important;
padding: 0 5% 3rem 5%;
}
.meditation-grid{
display: flex;
gap: 3rem;
align-items: center;
margin-top: 2rem;
margin-bottom: 3rem;
}
.meditation-image-container{
flex: 1;
min-width: 300px;
}
.meditation-image{
width: 100%;
height: auto;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
border: 1px solid rgba(193,153,107,0.2);
transition: all 0.4s ease;
}
.meditation-image:hover{
transform: translateY(-5px);
box-shadow: 0 20px 45px rgba(0,0,0,0.15);
}
.meditation-table-container{
flex: 1.5;
}
@media (max-width: 992px){
.meditation-grid{
flex-direction: column;
gap: 2rem;
}
.meditation-image-container{
width: 100%;
max-width: 600px;
order: -1;
}
}
.reveal-on-scroll{
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1),transform 0.8s cubic-bezier(0.4,0,0.2,1);
will-change: opacity,transform;
}
.reveal-on-scroll.is-revealed{
opacity: 1;
transform: translateY(0);
}
body.high-contrast{
background: #000 !important;
color: #ffff00 !important;
}
body.high-contrast :not(#accessibility-widget *){
background-color: #000 !important;
background-image: none !important;
color: #ffff00 !important;
border-color: #ffff00 !important;
text-shadow: none !important;
box-shadow: none !important;
filter: none !important;
}
body.high-contrast .hero,
body.high-contrast header,
body.high-contrast nav,
body.high-contrast footer,
body.high-contrast .container,
body.high-contrast section,
body.high-contrast div{
background: #000 !important;
background-image: none !important;
}
body.high-contrast img{
filter: grayscale(100%) contrast(1.2) !important;
opacity: 0.8 !important;
}
body.high-contrast a{
color: #00ffff !important;
text-decoration: underline !important;
}
body.high-contrast .cta-button,
body.high-contrast button{
background: #ffff00 !important;
color: #000 !important;
border: 2px solid #ffff00 !important;
}
html.large-text{
font-size: 130% !important;
}
html.large-text body{
line-height: 1.5 !important;
}
html.large-text .hero h1,
html.large-text .section-header h2,
html.large-text h3,
html.large-text h4{
letter-spacing: normal !important;
}
body.dyslexia-font{
font-family: Arial,sans-serif !important;
letter-spacing: 0.1em !important;
word-spacing: 0.2em !important;
line-height: 1.8 !important;
}
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after{
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
body.reduce-motion .reveal-on-scroll{
opacity: 1 !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce){
html{
scroll-behavior: auto;
}
*,
*::before,
*::after{
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.reveal-on-scroll{
opacity: 1 !important;
transform: none !important;
}
}
#accessibility-widget{
position: fixed;
bottom: 20px;
left: 20px;
z-index: 2000;
}
#accessibility-toggle{
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--secondary);
color: white;
border: none;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease,background 0.3s ease;
}
#accessibility-toggle:hover{
transform: scale(1.1);
background: var(--primary);
}
#accessibility-menu{
position: absolute;
bottom: 60px;
left: 0;
width: 250px;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
padding: 1.5rem;
border: 1px solid #eee;
}
#accessibility-menu h3{
font-size: 1rem;
margin-bottom: 1rem;
color: var(--text);
text-align: center;
}
#accessibility-menu ul{
list-style: none;
padding: 0;
margin: 0;
}
#accessibility-menu li{
margin-bottom: 0.5rem;
}
#accessibility-menu button{
width: 100%;
padding: 10px;
border: 1px solid #eee;
background: #f8fafc;
border-radius: 8px;
cursor: pointer;
text-align: left;
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: 0.9rem;
transition: all 0.3s ease;
}
#accessibility-menu button:hover{
background: #f1f5f9;
border-color: var(--secondary);
}
#accessibility-menu button[aria-pressed="true"]{
background: var(--accent);
border-color: var(--primary);
color: var(--primary);
font-weight: bold;
}
#reset-accessibility{
margin-top: 0.5rem;
color: var(--text-light);
font-style: italic;
}
#reset-accessibility:hover{
color: var(--primary);
}
@media (max-width: 768px){
#accessibility-widget{
bottom: 80px;
}
}
.footer-logo img{
height: 100px;
width: auto;
display: block;
filter: brightness(0) invert(1);
opacity: 0.9;
}
.direct-contact-section .info-item{
background: var(--light-bg);
padding: 2rem;
border-radius: 15px;
border: 1px solid var(--secondary);
}
.contact-info-container .info-item:nth-child(n+2){
margin-top: 3rem;
}
.direct-contact-links{
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 1rem;
}
.contact-link-item{
display: flex;
align-items: center;
gap: 1rem;
font-size: 1.2rem;
}
.contact-link-item i{
color: var(--primary);
font-size: 1.5rem;
width: 30px;
text-align: center;
}
.contact-link-item a{
color: var(--secondary);
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
.contact-link-item a:hover{
color: var(--primary);
}
.mini-map-container{
width: 100%;
margin-top: 1rem;
order: 2;
overflow: visible !important;
}
.mini-map-container img{
display: block;
width: 100%;
height: auto;
border-radius: 20px;
box-shadow: 10px 10px 0 var(--accent);
}
.mini-map-container iframe{
display: block;
border: none;
}
#btn-to-contact{
background-color: #25D366;
color: white;
}
#btn-to-contact:hover{
background-color: #128C7E;
transform: scale(1.1);
}
@media (max-width: 600px){
.direct-contact-section .info-item{
padding: 1.25rem !important;
overflow: hidden;
}
.contact-link-item{
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
gap: 0.5rem;
font-size: 1rem;
width: 100%;
}
.contact-link-item i{
margin-bottom: 0.2rem;
width: auto !important;
font-size: 1.25rem !important;
margin-left: 0 !important;
}
.contact-link-item a{
flex-basis: 100%;
text-align: left;
width: 100%;
margin-left: 0 !important;
word-break: break-all;
overflow-wrap: anywhere;
}
}
@media (max-width: 340px){
.contact-link-item{
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.contact-link-item i{
text-align: left;
margin-bottom: 0px;
}
}
#faq .faq-list{
margin: 2rem auto 0;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.contact-eyebrow{font-family:var(--font-body);font-size:.85rem;color:var(--text-light);text-transform:uppercase;letter-spacing:2px;margin-bottom:.5rem;animation:fadeUp .5s ease forwards}
.contact-header h2{animation:fadeUp .5s ease .1s forwards;opacity:0}
.contact-grid{display:grid;grid-template-columns:55% 45%;gap:2.5rem;align-items:stretch;animation:fadeUp .5s ease .2s forwards;opacity:0}
.contact-left{display:flex;flex-direction:column;gap:1.5rem}
.contact-card{background:var(--white);padding:1.5rem;border-radius:15px;border:1px solid #eee;text-align:left}
.contact-card .sub-section-title{margin-bottom:1rem}
.booking-buttons{display:flex;flex-wrap:wrap;gap:1rem}
.booking-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.75rem;border-radius:50px;text-decoration:none;font-weight:700;font-size:.95rem;color:var(--white);transition:var(--transition);border:none;cursor:pointer;font-family:var(--font-body)}
.booking-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.booking-btn.whatsapp{background:#25D366}
.booking-btn.treatwell{background:#1a1a1a}
.contact-info-list{display:flex;flex-direction:column}
.contact-info-row{display:flex;align-items:center;gap:1rem;padding:1rem 0;text-decoration:none;color:var(--text);transition:var(--transition);border-bottom:1px solid #f1f5f9}
.contact-info-row:last-child{border-bottom:none}
.contact-info-row:hover .contact-info-value{color:var(--primary)}
.contact-info-icon{width:40px;height:40px;border-radius:50%;background:rgba(211,44,124,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-info-icon i{color:var(--primary);font-size:1rem}
.contact-info-text{display:flex;flex-direction:column}
.contact-info-value{font-weight:700;font-size:1rem;color:var(--text);transition:color .3s}
.contact-info-label{font-size:.8rem;color:var(--text-light);margin-top:2px}
.address-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}
.address-dot{width:10px;height:10px;border-radius:50%;background:var(--primary);display:inline-block}
.address-card address{font-style:normal;margin-bottom:1rem}
.address-line{color:var(--text-light);font-size:.95rem;line-height:1.6}
.map-external-link{display:inline-flex;align-items:center;gap:.25rem;color:var(--primary);text-decoration:none;font-weight:600;font-size:.9rem;transition:var(--transition)}
.map-external-link:hover{text-decoration:underline}
.map-external-link span[aria-hidden="true"]{display:inline-block;transition:transform .3s ease}
.map-external-link:hover span[aria-hidden="true"]{transform:translateX(4px)}
.contact-right{min-height:420px}
.map-wrapper{position:relative;width:100%;height:100%;min-height:420px;border-radius:15px;overflow:hidden;border:1px solid #eee}
.map-wrapper>a:first-child{display:block;width:100%;height:100%;min-height:420px}.map-wrapper img{width:100%;height:100%;min-height:420px;object-fit:cover;display:block}
.map-pill{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);background:var(--white);border:1px solid #eee;border-radius:50px;padding:.5rem 1.25rem;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--text);font-size:.85rem;font-weight:600;box-shadow:0 4px 15px rgba(0,0,0,.08);transition:var(--transition);white-space:nowrap}
.map-pill:hover{box-shadow:0 6px 20px rgba(0,0,0,.12);transform:translateX(-50%) translateY(-2px)}
.map-pill-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);display:inline-block}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr}.contact-right{order:2}.map-wrapper{min-height:300px}.map-wrapper>a:first-child{min-height:300px}.map-wrapper img{min-height:300px}.booking-buttons{flex-direction:column}.booking-btn{width:100%}}