/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* LAYOUT */
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
font-family: 'Inter', sans-serif;
background: #f4f7f6;
}
main {
flex: 1;
}
/* NAVBAR */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 80px;
background: white;
}
.nav-left {
display: flex;
align-items: center;
gap: 12px;
}
/* FIXED LOGO SIZE */
.logo-img {
width: 68px;
height: 68px;
object-fit: contain;
margin-right: -30px;
position: relative;
z-index: 2;
}
.logo-text {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 24px;
font-weight: 800;
letter-spacing: -0.5px;
color: #1a202c;
text-transform: none;
}
.logo-link {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: inherit;
}
/* NAV LINKS */
.nav-center a {
margin: 0 15px;
text-decoration: none;
color: #333;
position: relative;
}
.nav-center a:hover {
color: #000;
}
/* BUTTON */
.btn-primary, .btn-dark {
background: #1f1f1f;
color: white;
padding: 10px 24px;
border-radius: 25px;
text-decoration: none;
display: inline-block;
}
/* HERO */
.hero-wrapper {
padding: 50px 80px 30px;
}
.hero-card {
background: #e4e9ec;
border-radius: 30px;
padding: 60px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}
/* TEXT FIX */
.hero-text {
flex: 1;
max-width: 520px;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero-text h1 {
font-family: 'Playfair Display', serif;
font-size: 46px;
margin-bottom: 18px;
line-height: 1.2;
color: #1e293b;
}
.hero-text p {
color: #4f4f4f;
line-height: 1.7;
margin-bottom: 25px;
}
/* BUTTON POSITION FIX */
.hero-text .btn-dark {
align-self: flex-start;
background: #9bbf8f;
color: #1e293b;
}
/* IMAGE */
.hero-image {
flex: 1;
display: flex;
justify-content: flex-end;
}
.hero-image img {
width: 100%;
max-width: 850px;
height: auto;
object-fit: cover;
border-radius: 25px;
}
@media (max-width: 768px) {
.hero-card {
flex-direction: column;
text-align: center;
}
.hero-image {
order: 2;
}
.hero-text {
order: 1;
}
}
/* CARDS */
.kurds-section {
display: flex;
gap: 20px;
padding: 30px 80px 50px;
}
.info-kurd {
flex: 1;
padding: 35px;
border-radius: 20px;
transition: 0.3s;
}
.info-kurd h3 {
margin-bottom: 10px;
font-family: 'Playfair Display', serif;
}
.info-kurd p {
color: #555;
}
.info-kurd:hover {
transform: translateY(-6px);
}
/* COLORS */
.kurd-1 { background: #e0e6f3; }
.kurd-2 { background: #eef3e9; }
.kurd-3 { background: #f3dce0; }
/* NEW SECTION BENEFITS SECTIONS */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600&display=swap');
/* NO rounded corners - flat edges */
.benefits-section {
background: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
padding: 1.2rem 2rem;
border: 1px solid #e8e2d9;
border-radius: 0px;
width: 100%;
}
.benefits-container {
width: 100%;
}
/* Horizontal line layout */
.benefits-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1.5rem 2rem;
list-style: none;
margin: 0;
padding: 0;
}
.benefit-item {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.4rem 0;
}
/* Icon wrapper - clean & consistent */
.benefit-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8rem;
height: 1.8rem;
}
.benefit-icon svg {
width: 1.5rem;
height: 1.5rem;
stroke-width: 1.6;
fill: none;
}
/* Text styling - soft & readable */
.benefit-text {
font-size: 1rem;
font-weight: 500;
color: #292928;
white-space: nowrap;
letter-spacing: -0.2px;
}
/* "Start your journey" gets a gentle highlight (therapy CTA) */
.benefit-item:last-child .benefit-text {
color: #0f0f0ed8;
font-weight: 600;
}
.benefit-item:last-child .benefit-icon svg {
stroke: #6b8c6e;
}
/* Responsive - keeps horizontal feel */
@media (max-width: 800px) {
.benefits-section {
padding: 1rem 1.5rem;
}
.benefit-text {
font-size: 0.9rem;
white-space: nowrap;
}
.benefit-icon svg {
width: 1.3rem;
height: 1.3rem;
}
}
@media (max-width: 620px) {
.benefits-list {
justify-content: center;
gap: 1rem 1.5rem;
}
.benefit-text {
font-size: 0.85rem;
}
}
/* ========== THERAPY HERO SECTION ========== */
.therapy-hero {
position: relative;
min-height: 90vh;
background: linear-gradient(135deg, #2f5f5d 0%, #1f4d4c 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px;
overflow: hidden;
}
.therapy-hero::before {
content: '';
position: absolute;
top: -200px;
right: -100px;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(155, 191, 143, 0.1) 0%, transparent 70%);
border-radius: 50%;
}
.therapy-hero::after {
content: '';
position: absolute;
bottom: -150px;
left: -150px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(155, 191, 143, 0.08) 0%, transparent 70%);
border-radius: 50%;
}
/* ========== CONTAINER ========== */
.therapy-container {
max-width: 1400px;
width: 100%;
z-index: 2;
position: relative;
}
/* ========== HEADER SECTION - CENTERED ========== */
.therapy-header {
text-align: center;
margin-bottom: 100px;
}
.therapy-hero h1 {
color: white;
font-size: 56px;
font-weight: 900;
margin-bottom: 40px;
line-height: 1.2;
text-align: center;
letter-spacing: -1px;
}
.therapy-hero h1 span {
color: #9bbf8f;
}
/* ========== CARDS SECTION ========== */
.therapy-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
justify-content: center;
}
/* ========== INDIVIDUAL CARD ========== */
.therapy-card {
min-height: 380px;
border-radius: 24px;
overflow: hidden;
position: relative;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding: 40px;
color: white;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.therapy-card:hover {
transform: translateY(-16px);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
/* ========== CARD COLORS ========== */
.therapy-card:nth-child(1):hover {
background: linear-gradient(135deg, #10B981 0%, #10B981 100%);
}
.therapy-card:nth-child(2):hover {
background: linear-gradient(135deg, #334155 0%, #334155 100%);
}
.therapy-card:nth-child(3):hover {
background: linear-gradient(135deg, #DDB2B9 0%, #DDB2B9 100%);
}
.therapy-card:nth-child(4):hover {
background: linear-gradient(135deg, #172130 0%, #1a283b 100%);
}
/* ========== CARD CONTENT ========== */
.card-content {
max-width: 70%;
z-index: 3;
position: relative;
margin-bottom: 40px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.card-content h2 {
font-size: 28px;
font-weight: 800;
margin-bottom: 12px;
line-height: 1.3;
}
.card-content span {
font-size: 15px;
opacity: 0.95;
line-height: 1.6;
font-weight: 500;
}
/* ========== CARD ICON/IMAGE ========== */
.card-icon {
width: 100%;
position: absolute;
bottom: 0;
right: 0;
height: 200px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
z-index: 1;
}
.therapy-card img {
width: 65%;
height: auto;
object-fit: contain;
pointer-events: none;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.therapy-card:nth-child(3) img {
width: 55%;
transform: translateY(10px); /* slight adjustment */
}
/* ========== WAVE BOTTOM ========== */
/* =========================
WAVE
========================= */
.wave {
position: absolute;
bottom: 0;
width: 100%;
height: 120px;
background: #fff;
border-top-left-radius: 60% 100%;
border-top-right-radius: 60% 100%;
}
/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
.therapy-hero h1 {
font-size: 48px;
}
.therapy-cards {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.therapy-card {
min-height: 360px;
padding: 36px;
}
.card-content h2 {
font-size: 24px;
}
}
@media (max-width: 1024px) {
.therapy-hero {
padding: 40px 20px;
min-height: auto;
}
.therapy-header {
margin-bottom: 80px;
}
.therapy-hero h1 {
font-size: 42px;
}
.therapy-hero p {
font-size: 16px;
}
.therapy-cards {
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.therapy-card {
min-height: auto;
padding: 20px;
}
.card-content h2 {
font-size: 18px;
}
.card-content span {
font-size: 13px;
}
.card-content {
margin-bottom: 20px;
}
.therapy-card img {
width: 50%;
}
}
@media (max-width: 768px) {
.therapy-hero {
padding: 40px 20px;
min-height: auto;
}
.therapy-header {
margin-bottom: 60px;
}
.therapy-hero h1 {
font-size: 32px;
}
.therapy-hero p {
font-size: 15px;
}
.therapy-cards {
grid-template-columns: 1fr;
gap: 24px;
}
.therapy-card {
min-height: 320px;
padding: 28px;
}
.card-content {
max-width: 100%;
margin-bottom: 30px;
}
.card-content h2 {
font-size: 20px;
}
.card-content span {
font-size: 13px;
}
.card-icon {
height: 120px;
}
.therapy-card img {
width: 60%;
}
}
@media (max-width: 480px) {
.therapy-hero {
padding: 30px 16px;
min-height: 80vh;
}
.therapy-header {
margin-bottom: 50px;
}
.therapy-hero h1 {
font-size: 24px;
margin-bottom: 16px;
}
.therapy-hero p {
font-size: 14px;
}
.therapy-cards {
grid-template-columns: 1fr;
gap: 20px;
}
.therapy-card {
min-height: 300px;
padding: 24px;
border-radius: 20px;
}
.card-content h2 {
font-size: 18px;
margin-bottom: 8px;
}
.card-content span {
font-size: 12px;
}
.card-icon {
height: 150px;
}
.therapy-card img {
width: 55%;
}
.wave {
height: 80px;
}
}
/* ============================================
HOW IT WORKS SECTION
============================================ */
/* Main Section Container */
.hiw-section {
padding: 80px 80px;
background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
position: relative;
overflow: hidden;
}
/* Decorative background elements */
.hiw-section::before {
content: '';
position: absolute;
top: -20%;
right: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(155, 191, 143, 0.1) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.hiw-section::after {
content: '';
position: absolute;
bottom: -15%;
left: -5%;
width: 450px;
height: 450px;
background: radial-gradient(circle, rgba(221, 178, 185, 0.08) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
/* Container */
.hiw-container {
max-width: 1300px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Header Styles */
.hiw-header {
text-align: center;
margin-bottom: 70px;
}
.hiw-title {
font-size: 3rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 16px;
letter-spacing: -0.02em;
position: relative;
display: inline-block;
}
.hiw-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #DDB2B9, #DDB2B9);
border-radius: 4px;
}
.hiw-subtitle {
font-size: 1.15rem;
color: #64748b;
max-width: 650px;
margin: 28px auto 0;
line-height: 1.6;
}
/* Step Wrapper */
.hiw-step-wrapper {
margin-bottom: 60px;
position: relative;
}
.hiw-step-wrapper:last-child {
margin-bottom: 0;
}
.hiw-step-wrapper:last-child .hiw-arrow-down {
display: none;
}
/* Step Content - NO BOXES */
.hiw-step-content {
display: flex;
align-items: center;
gap: 80px;
padding: 20px 0;
}
/* Text side - left */
.hiw-step-text {
flex: 1;
}
.hiw-step-number {
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 3px;
color: #9bbf8f;
margin-bottom: 15px;
text-transform: uppercase;
}
.hiw-step-title {
font-size: 2rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 20px;
line-height: 1.3;
}
.hiw-step-description {
font-size: 1.05rem;
color: #64748b;
line-height: 1.7;
margin-bottom: 25px;
}
/* Tags */
.hiw-step-tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.hiw-step-tags span {
background: #9bbf8f;
color: #1e293b;
padding: 6px 18px;
border-radius: 40px;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.2s ease;
}
.hiw-step-tags span:hover {
background: #DDB2B9;
color: white;
transform: translateY(-2px);
}
/* ========== IMAGE STYLES - ORGANIC CURVES ========== */
.hiw-step-image {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
/* Image wrapper with organic shape - WAVY BOTTOM */
.hiw-image-wrapper {
position: relative;
width: 100%;
max-width: 400px;
overflow: visible;
}
/* The actual image - with organic curved bottom */
.hiw-organic-image {
width: 100%;
height: auto;
display: block;
border-radius: 60px 60px 80px 80px;
object-fit: cover;
aspect-ratio: 1 / 1;
transition: all 0.4s ease;
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);
}
/* Organic shape variations for each step */
/* Step 1 - Wavy bottom + rounded top */
.hiw-img-1 .hiw-organic-image {
border-radius: 70px 70px 100px 100px;
clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 85% 92%, 70% 88%, 50% 95%, 30% 89%, 15% 93%, 0% 86%);
}
/* Step 2 - Curved sides + wavy bottom */
.hiw-img-2 .hiw-organic-image {
border-radius: 100px 100px 80px 80px;
clip-path: polygon(8% 0%, 92% 0%, 100% 15%, 100% 85%, 92% 100%, 8% 100%, 0% 85%, 0% 15%);
}
/* Step 3 - Flowing organic shape */
.hiw-img-3 .hiw-organic-image {
border-radius: 80px 80px 60px 60px;
clip-path: polygon(0% 10%, 15% 0%, 85% 0%, 100% 10%, 100% 80%, 85% 92%, 70% 88%, 50% 95%, 30% 89%, 15% 93%, 0% 82%);
}
/* Alternative: If you want simpler CSS-only curves without clip-path */
.hiw-organic-simple {
width: 100%;
max-width: 380px;
border-radius: 50px 50px 80px 80px;
overflow: hidden;
position: relative;
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
}
.hiw-organic-simple img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 1 / 1;
object-fit: cover;
}
/* Hover effect on images */
.hiw-image-wrapper:hover .hiw-organic-image,
.hiw-organic-simple:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 30px 50px rgba(0, 0, 0, 0.15);
}
/* Arrow pointing down */
.hiw-arrow-down {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 25px 0;
position: relative;
left: 50%;
transform: translateX(-50%);
width: 60px;
}
.hiw-arrow-down i {
font-size: 1.3rem;
color: #9bbf8f;
margin: -8px 0;
animation: bounce 1.5s ease infinite;
}
.hiw-arrow-down i:nth-child(1) {
animation-delay: 0s;
}
.hiw-arrow-down i:nth-child(2) {
animation-delay: 0.2s;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
opacity: 0.5;
}
50% {
transform: translateY(10px);
opacity: 1;
}
}
/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 1024px) {
.hiw-section {
padding: 60px 40px;
}
.hiw-title {
font-size: 2.5rem;
}
.hiw-step-content {
flex-direction: column;
text-align: center;
gap: 40px;
}
.hiw-step-text {
order: 1;
}
.hiw-step-image {
order: 0;
}
.hiw-step-tags {
justify-content: center;
}
.hiw-step-title {
font-size: 1.8rem;
}
.hiw-image-wrapper,
.hiw-organic-simple {
max-width: 350px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.hiw-section {
padding: 50px 25px;
}
.hiw-title {
font-size: 2rem;
}
.hiw-subtitle {
font-size: 1rem;
}
.hiw-step-title {
font-size: 1.5rem;
}
.hiw-step-description {
font-size: 0.95rem;
}
.hiw-image-wrapper,
.hiw-organic-simple {
max-width: 280px;
}
}
@media (max-width: 480px) {
.hiw-section {
padding: 40px 20px;
}
.hiw-title {
font-size: 1.6rem;
}
.hiw-step-title {
font-size: 1.3rem;
}
.hiw-step-description {
font-size: 0.9rem;
}
.hiw-image-wrapper,
.hiw-organic-simple {
max-width: 240px;
}
}
/* Animations */
@keyframes hiwFadeInLeft {
from {
opacity: 0;
transform: translateX(-40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes hiwFadeInRight {
from {
opacity: 0;
transform: translateX(40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.hiw-step-1 .hiw-step-text {
animation: hiwFadeInLeft 0.6s ease forwards;
}
.hiw-step-1 .hiw-step-image {
animation: hiwFadeInRight 0.6s ease forwards;
}
.hiw-step-2 .hiw-step-text {
animation: hiwFadeInLeft 0.6s ease 0.2s forwards;
opacity: 0;
}
.hiw-step-2 .hiw-step-image {
animation: hiwFadeInRight 0.6s ease 0.2s forwards;
opacity: 0;
}
.hiw-step-3 .hiw-step-text {
animation: hiwFadeInLeft 0.6s ease 0.4s forwards;
opacity: 0;
}
.hiw-step-3 .hiw-step-image {
animation: hiwFadeInRight 0.6s ease 0.4s forwards;
opacity: 0;
}
/* Just border-radius curves */
.hiw-organic-image {
width: 100%;
height: auto;
display: block;
border-radius: 50px 50px 90px 90px;
object-fit: cover;
aspect-ratio: 1 / 1;
transition: all 0.4s ease;
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);
}
/* Different curve for each step */
.hiw-img-1 .hiw-organic-image {
border-radius: 60px 60px 100px 100px;
}
.hiw-img-2 .hiw-organic-image {
border-radius: 100px 100px 60px 60px;
}
.hiw-img-3 .hiw-organic-image {
border-radius: 50px 90px 50px 90px;
}
/* ============================================
FAQ SECTION
============================================ */
/* Main Section Container */
.faq-section {
padding: 80px 80px;
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
position: relative;
overflow: hidden;
}
/* Decorative background elements */
.faq-section::before {
content: '';
position: absolute;
top: -20%;
left: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(155, 191, 143, 0.06) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.faq-section::after {
content: '';
position: absolute;
bottom: -15%;
right: -5%;
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(221, 178, 185, 0.05) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
/* Container */
.faq-container {
max-width: 1300px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Header Styles */
.faq-header {
text-align: center;
margin-bottom: 60px;
}
.faq-title {
font-size: 2.8rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 16px;
letter-spacing: -0.02em;
position: relative;
display: inline-block;
}
.faq-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #DDB2B9, #DDB2B9);
border-radius: 4px;
}
.faq-subtitle {
font-size: 1.15rem;
color: #64748b;
max-width: 650px;
margin: 28px auto 0;
line-height: 1.6;
}
/* FAQ Grid - Two Columns */
.faq-grid {
display: flex;
gap: 50px;
margin-bottom: 50px;
}
/* Left Sidebar */
.faq-sidebar {
flex: 0 0 300px;
background: #ffffff;
border-radius: 24px;
padding: 30px 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(155, 191, 143, 0.15);
height: fit-content;
position: sticky;
top: 100px;
}
.faq-sidebar-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid #C9D4EB;
}
.faq-sidebar-header i {
font-size: 1.8rem;
color: #9bbf8f;
}
.faq-sidebar-header h3 {
font-size: 1.2rem;
font-weight: 600;
color: #1e293b;
}
.faq-quick-links {
list-style: none;
margin-bottom: 30px;
}
.faq-quick-links li {
margin-bottom: 12px;
}
.faq-quick-links a {
display: block;
padding: 10px 15px;
color: #64748b;
text-decoration: none;
font-size: 0.9rem;
border-radius: 12px;
transition: all 0.3s ease;
}
.faq-quick-links a:hover {
background: #C9D4EB;
color: #1e293b;
transform: translateX(5px);
}
.faq-sidebar-cta {
background: linear-gradient(135deg, #9bbf8f, #9bbf8f);
border-radius: 16px;
padding: 20px;
text-align: center;
}
.faq-sidebar-cta i {
font-size: 2rem;
color: white;
margin-bottom: 10px;
}
.faq-sidebar-cta p {
color: white;
font-weight: 500;
margin-bottom: 15px;
}
.faq-contact-btn {
display: inline-block;
background: white;
color: #1e293b;
padding: 10px 25px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.faq-contact-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Right Accordions */
.faq-accordions {
flex: 1;
}
/* FAQ Item */
.faq-item {
background: #ffffff;
border-radius: 16px;
margin-bottom: 16px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(155, 191, 143, 0.15);
transition: all 0.3s ease;
}
.faq-item:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
/* Question */
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
cursor: pointer;
transition: all 0.3s ease;
}
.faq-question:hover {
background: #f8fafc;
}
.faq-question-text {
font-size: 1rem;
font-weight: 600;
color: #1e293b;
}
.faq-arrow {
font-size: 1rem;
color: #9bbf8f;
transition: transform 0.3s ease;
}
/* Active state for arrow */
.faq-item.active .faq-arrow {
transform: rotate(180deg);
}
/* Answer */
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
padding: 0 24px;
}
.faq-item.active .faq-answer {
max-height: 300px;
padding: 0 24px 20px 24px;
}
.faq-answer p {
color: #64748b;
font-size: 0.95rem;
line-height: 1.7;
margin: 0;
}
/* More Questions Link */
.faq-more-link {
text-align: center;
margin-top: 40px;
}
.faq-view-more {
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
color: #9bbf8f;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
padding: 12px 25px;
border-radius: 40px;
transition: all 0.3s ease;
}
.faq-view-more:hover {
gap: 15px;
color: #DDB2B9;
}
/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 1024px) {
.faq-section {
padding: 60px 40px;
}
.faq-title {
font-size: 2.3rem;
}
.faq-grid {
flex-direction: column;
}
.faq-sidebar {
flex: auto;
position: static;
margin-bottom: 30px;
}
.faq-quick-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.faq-quick-links li {
margin-bottom: 0;
}
.faq-quick-links a {
padding: 8px 16px;
font-size: 0.85rem;
}
}
@media (max-width: 768px) {
.faq-section {
padding: 50px 25px;
}
.faq-title {
font-size: 2rem;
}
.faq-subtitle {
font-size: 1rem;
}
.faq-question {
padding: 16px 18px;
}
.faq-question-text {
font-size: 0.9rem;
}
.faq-answer p {
font-size: 0.85rem;
}
.faq-sidebar {
padding: 20px 15px;
}
}
@media (max-width: 480px) {
.faq-section {
padding: 40px 18px;
}
.faq-title {
font-size: 1.6rem;
}
.faq-question {
padding: 14px 16px;
}
.faq-question-text {
font-size: 0.85rem;
}
.faq-answer p {
font-size: 0.8rem;
}
.faq-quick-links a {
font-size: 0.75rem;
padding: 6px 12px;
}
}
/* Animation for FAQ items */
@keyframes faqSlideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.faq-item {
animation: faqSlideIn 0.4s ease forwards;
opacity: 0;
}
.faq-item:nth-child(1) { animation-delay: 0.05s; }
.faq-item:nth-child(2) { animation-delay: 0.1s; }
.faq-item:nth-child(3) { animation-delay: 0.15s; }
.faq-item:nth-child(4) { animation-delay: 0.2s; }
.faq-item:nth-child(5) { animation-delay: 0.25s; }
.faq-item:nth-child(6) { animation-delay: 0.3s; }
.faq-item:nth-child(7) { animation-delay: 0.35s; }
.faq-item:nth-child(8) { animation-delay: 0.4s; }
.faq-item:nth-child(9) { animation-delay: 0.45s; }
.faq-item:nth-child(10) { animation-delay: 0.5s; }
.faq-item:nth-child(11) { animation-delay: 0.55s; }
.faq-item:nth-child(12) { animation-delay: 0.6s; }
/* SHARED PAGE STYLES */
/* PROFESSIONAL ICONS + ABOUT PAGE */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap');
/* ========== HERO BADGE ========== */
.about-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #9bbf8f, #9bbf8f);
color: #1e293b;
padding: 12px 24px;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 25px;
box-shadow: 0 10px 30px rgba(17, 37, 27, 0.3);
}
.about-badge i {
font-size: 1.1rem;
}
/* ========== HERO LAYOUT ========== */
.about-hero {
display: grid;
grid-template-columns: 1fr 420px;
gap: 40px;
padding: 100px 40px;
align-items: center;
max-width: 1500px;
margin: 0 auto;
}
/* LEFT CONTENT */
.about-hero-content {
width: 100%;
}
/* TITLE */
.about-hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 6vw, 4.5rem);
line-height: 1.1;
margin-bottom: 24px;
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.about-hero h1 span {
color: #9bbf8f;
}
/* TEXT */
.hero-subtitle {
font-size: 1.2rem;
color: #64748b;
line-height: 1.6;
margin-bottom: 30px;
max-width: 500px;
}
.hero-note {
font-size: 1rem;
color: #475569;
line-height: 1.6;
max-width: 500px;
}
/* IMAGE */
.about-hero-image {
position: relative;
margin-left: auto;
width: 100%;
max-width: 420px;
}
.about-hero-image img {
width: 100%;
height: 460px;
object-fit: cover;
border-radius: 24px;
}
/* OVERLAY */
.image-overlay {
position: absolute;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(10px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #BFC5B9;
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
cursor: pointer;
transition: 0.3s ease;
}
.image-overlay:hover {
transform: scale(1.1);
}
/* ========== TABLET FIX ========== */
@media (max-width: 1024px) {
.about-hero {
grid-template-columns: 1fr;
text-align: center;
padding: 70px 30px;
}
.about-hero-content {
margin: 0 auto;
max-width: 700px;
}
.hero-subtitle,
.hero-note {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.about-hero-image {
margin: 0 auto;
}
}
/* ========== MOBILE FIX (MAIN FIX) ========== */
@media (max-width: 768px) {
.about-hero {
grid-template-columns: 1fr;
padding: 60px 20px;
gap: 30px;
text-align: center;
}
.about-hero h1 {
font-size: 2.2rem;
}
.hero-subtitle {
font-size: 1rem;
}
.hero-note {
font-size: 0.95rem;
}
.about-hero-content {
margin: 0 auto;
}
.hero-subtitle,
.hero-note {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.about-hero-image {
margin: 0 auto;
max-width: 100%;
}
.about-hero-image img {
height: 300px;
}
.image-overlay {
width: 50px;
height: 50px;
font-size: 1.2rem;
bottom: 15px;
right: 15px;
}
}
/* Story Section */
.about-story {
padding: 100px 60px;
background: linear-gradient(135deg, #f8fafc 0%, white 100%);
}
.story-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.about-story h2 {
font-family: 'Playfair Display', serif;
font-size: 2.8rem;
color: #1e293b;
margin-bottom: 30px;
}
.story-content p {
font-size: 1.25rem;
color: #64748b;
line-height: 1.8;
max-width: 750px;
margin: 0 auto;
}
/* about-professional - ABOUT PAGE VIBE */
.about-professional {
padding: 100px 20px;
background: #ffffff;
position: relative;
overflow: hidden;
}
.about-professional::before {
content: '';
position: absolute;
top: -200px;
left: -100px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(155, 191, 143, 0.06) 0%, transparent 70%);
border-radius: 50%;
}
.about-professional::after {
content: '';
position: absolute;
bottom: -150px;
right: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(155, 191, 143, 0.04) 0%, transparent 70%);
border-radius: 50%;
}
.about-container {
max-width: 1100px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.prof-header {
margin-bottom: 70px;
text-align: left;
}
.prof-header h2 {
font-size: 48px;
font-weight: 700;
color: #1a202c;
margin-bottom: 8px;
line-height: 1.2;
}
.prof-header h2 span {
color: #9bbf8f;
}
.prof-subtitle {
font-size: 16px;
color: #64748b;
font-weight: 500;
}
.professional-list {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.professional-list li {
display: flex;
flex-direction: column;
gap: 16px;
padding: 32px;
background: linear-gradient(135deg, #ffffff 0%, #f9fdf7 100%);
border-radius: 12px;
border: 1px solid #e2e8f0;
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
.professional-list li::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #9bbf8f 0%, #7d9d7a 100%);
transform: translateX(-100%);
transition: transform 0.4s ease;
}
.professional-list li::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(155, 191, 143, 0.05) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.professional-list li:hover {
border-color: #9bbf8f;
box-shadow: 0 8px 24px rgba(155, 191, 143, 0.12);
transform: translateY(-4px);
background: linear-gradient(135deg, #ffffff 0%, #fbfef9 100%);
}
.professional-list li:hover::before {
transform: translateX(0);
}
.professional-list li:hover::after {
opacity: 1;
}
.professional-list li:hover .prof-icon {
transform: scale(1.08);
background: linear-gradient(135deg, #9bbf8f 0%, #7d9d7a 100%);
color: white;
box-shadow: 0 6px 16px rgba(155, 191, 143, 0.25);
}
.professional-list li:hover .prof-text strong {
color: #9bbf8f;
}
.prof-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f6 100%);
border-radius: 10px;
font-size: 24px;
color: #9bbf8f;
flex-shrink: 0;
transition: all 0.35s ease;
}
.prof-text {
display: flex;
flex-direction: column;
gap: 8px;
}
.prof-text strong {
font-size: 15px;
color: #1a202c;
font-weight: 700;
line-height: 1.4;
transition: color 0.3s ease;
}
.prof-detail {
font-size: 13px;
color: #94a3b8;
font-weight: 500;
line-height: 1.5;
}
/* Unique color coding for each item */
.professional-list li:nth-child(1) .prof-icon {
background: linear-gradient(135deg, #cfdfc5 0%, #cfdfc5 100%);
color: #059669;
}
.professional-list li:nth-child(2) .prof-icon {
background: linear-gradient(135deg, #cfdfc5 0%, #cfdfc5 100%);
color: #059669;
}
.professional-list li:nth-child(3) .prof-icon {
background: linear-gradient(135deg, #cfdfc5 0%, #cfdfc5 100%);
color: #059669;
}
.professional-list li:nth-child(4) .prof-icon {
background: linear-gradient(135deg, #cfdfc5 0%, #cfdfc5 100%);
color: #059669;
}
.professional-list li:nth-child(5) .prof-icon {
background: linear-gradient(135deg, #cfdfc5 0%, #cfdfc5 100%);
color: #059669;
}
.professional-list li:nth-child(6) .prof-icon {
background: linear-gradient(135deg, #cfdfc5 0%, #cfdfc5 100%);
color: #059669;
}
.professional-list li:nth-child(1):hover .prof-icon {
background: linear-gradient(135deg, #cfdfc5 0%, #cfdfc5 100%);
color: white;
}
.professional-list li:nth-child(2):hover .prof-icon {
background: linear-gradient(135deg, #cfdfc5 0%, #cfdfc5 100%);
color: white;
}
.professional-list li:nth-child(3):hover .prof-icon {
background: linear-gradient(135deg, #cfdfc5 0%, #cfdfc5 100%);
color: white;
}
.professional-list li:nth-child(4):hover .prof-icon {
background: linear-gradient(135deg, #cfdfc5 0%, #cfdfc5 100%);
color: white;
}
.professional-list li:nth-child(5):hover .prof-icon {
background: linear-gradient(135deg, #cfdfc5 0%, #cfdfc5 100%);
color: white;
}
.professional-list li:nth-child(6):hover .prof-icon {
background: linear-gradient(135deg, #cfdfc5 0%, #cfdfc5 100%);
color: white;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.about-professional {
padding: 80px 20px;
}
.prof-header {
margin-bottom: 50px;
}
.prof-header h2 {
font-size: 36px;
}
.prof-subtitle {
font-size: 15px;
}
.professional-list {
grid-template-columns: 1fr;
gap: 24px;
}
.professional-list li {
padding: 28px;
gap: 14px;
}
.prof-icon {
width: 48px;
height: 48px;
font-size: 20px;
}
.prof-text strong {
font-size: 14px;
}
.prof-detail {
font-size: 12px;
}
}
@media (max-width: 480px) {
.about-professional {
padding: 60px 16px;
}
.prof-header h2 {
font-size: 28px;
}
.prof-header {
margin-bottom: 40px;
}
.professional-list li {
padding: 24px;
gap: 12px;
}
.prof-icon {
width: 44px;
height: 44px;
font-size: 18px;
}
.prof-text strong {
font-size: 13px;
}
.prof-detail {
font-size: 11px;
}
}
.hero-note {
margin-top: 10px;
font-size: 14px;
color: #555;
}
/* Responsive */
@media (max-width: 1024px) {
.about-hero { grid-template-columns: 1fr; text-align: center; gap: 60px; }
.hero-stats { justify-content: center; }
}
@media (max-width: 768px) {
.about-hero, .about-story, .about-approach, .about-cta { padding-left: 30px; padding-right: 30px; }
.about-hero { padding-top: 80px; padding-bottom: 80px; }
}
/* =========================
CONTACT PAGE (CLEAN FINAL)
========================= */
.contact-main {
background: #f4f7f6;
}
/* HERO */
.contact-hero {
text-align: center;
padding: 80px 20px 40px;
}
.contact-hero h1 {
font-size: 42px;
font-family: 'Playfair Display', serif;
color: #1e293b;
}
.contact-hero p {
color: #64748b;
margin-top: 10px;
font-size: 16px;
}
/* GRID (FIXED BALANCE) */
.contact-grid {
display: grid;
grid-template-columns: 0.9fr 1.2fr; /* form bigger */
gap: 50px;
padding: 40px 80px 80px;
align-items: start;
}
/* =========================
CONTACT INFO (LEFT SIDE)
========================= */
.contact-info {
display: flex;
flex-direction: column;
gap: 18px; /* tighter spacing */
}
/* CARDS (SHORTER & CLEAN) */
.contact-card {
display: flex;
align-items: center;
gap: 15px;
padding: 30px 20px; /* reduced height */
border-radius: 16px;
background: white;
box-shadow: 0 8px 25px rgba(0,0,0,0.06);
transition: 0.3s ease;
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
/* ICON */
.contact-card i {
font-size: 18px;
width: 42px;
height: 42px;
background: #e6f0ee;
color: #6b8c6e;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
/* TEXT */
.contact-card h3 {
font-size: 15px;
margin-bottom: 3px;
color: #1e293b;
}
.contact-card p {
font-size: 14px;
color: #64748b;
}
.contact-card a {
text-decoration: none;
color: #6b8c6e;
}
/* =========================
FORM (RIGHT SIDE - BIGGER)
========================= */
.contact-form {
background: white;
padding: 50px;
border-radius: 22px;
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}
/* TITLE */
.contact-form h3 {
margin-bottom: 25px;
font-family: 'Playfair Display', serif;
font-size: 22px;
color: #1e293b;
}
/* SUCCESS */
.success-msg {
background: #d1fae5;
color: #065f46;
padding: 12px;
border-radius: 8px;
margin-bottom: 15px;
font-size: 14px;
}
/* INPUTS */
.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100%;
padding: 14px;
margin-bottom: 15px;
border: 1px solid #e5e7eb;
border-radius: 10px;
font-size: 14px;
background: #fafafa;
transition: 0.3s;
}
/* FOCUS */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
outline: none;
border-color: #6b8c6e;
background: white;
box-shadow: 0 0 0 3px rgba(107,140,110,0.1);
}
/* ROW */
.form-row {
display: flex;
gap: 15px;
}
/* TEXTAREA */
.contact-form textarea {
height: 120px;
resize: none;
}
/* BUTTON */
.contact-form button {
width: 100%;
padding: 15px;
background: #6b8c6e;
color: white;
border: none;
border-radius: 12px;
font-size: 15px;
cursor: pointer;
transition: 0.3s;
}
.contact-form button:hover {
background: #5a7a5d;
transform: translateY(-2px);
}
/* =========================
RESPONSIVE
========================= */
@media (max-width: 900px) {
.contact-grid {
grid-template-columns: 1fr;
padding: 20px;
}
.form-row {
flex-direction: column;
}
}
@media (max-width: 600px) {
.contact-form {
padding: 30px;
}
.contact-hero h1 {
font-size: 32px;
}
}
/* SERVICES*/
/* MODERN SERVICES PAGE - 100% UNIQUE */
.services-modern-wrapper {
background: linear-gradient(145deg, #f4f7f6 0%, #f4f7f6 100%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
overflow-x: hidden;
min-height: 100vh;
}
.services-hero-modern {
position: relative;
padding: 120px 20px 80px;
text-align: center;
overflow: hidden;
}
.hero-bg-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(246, 92, 226, 0.06) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(246, 92, 226, 0.06) 0%, transparent 50%);
z-index: 0;
}
.hero-content-modern {
position: relative;
z-index: 1;
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.hero-badge-modern {
display: inline-block;
background: linear-gradient(135deg, #DDB2B9 0%, #DDB2B9);
color: #222425;
padding: 8px 24px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.5px;
margin-bottom: 20px;
box-shadow: 0 8px 25px rgba(42, 45, 68, 0.3);
}
.hero-title-modern {
font-size: clamp(3rem, 8vw, 5rem);
font-weight: 800;
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
margin-bottom: 40px;
}
.hero-title-modern span {
background: linear-gradient(135deg, #9bbf8f, #9bbf8f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-info-modern {
display: flex;
gap: 25px;
margin-top: 25px;
flex-wrap: wrap;
justify-content: center;
}
.info-item-modern {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #374151;
}
.info-item-modern i {
color: #9bbf8f;
font-size: 16px;
}
/* talk-haven-services-SECTION */
.talk-haven-services-section {
padding: 100px 20px;
background: linear-gradient(135deg, #ffffff 0%, #f8fafb 50%, #f0f4f8 100%);
position: relative;
overflow: hidden;
}
.services-container {
max-width: 1200px;
margin: 0 auto;
}
/* Section Header */
.services-header {
text-align: center;
margin-bottom: 60px;
}
.services-header h2 {
font-size: 48px;
font-weight: 700;
color: #1a202c;
margin-bottom: 12px;
}
.services-header p {
font-size: 18px;
color: #64748b;
font-weight: 500;
}
/* Tabs Navigation */
.services-tabs-nav {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 60px;
flex-wrap: wrap;
}
.service-tab-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: white;
border: 2px solid #e2e8f0;
border-radius: 10px;
color: #64748b;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
}
.service-tab-btn:hover {
border-color: #9bbf8f;
color: #9bbf8f;
}
.service-tab-btn.active {
background: linear-gradient(135deg, #9bbf8f 0%, #7d9d7a 100%);
color: white;
border-color: transparent;
box-shadow: 0 6px 20px rgba(155, 191, 143, 0.3);
}
.service-tab-btn i {
font-size: 18px;
}
/* Tab Content */
.service-tab-content {
display: none;
animation: fadeIn 0.4s ease;
}
.service-tab-content.active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Service Layout */
.service-layout {
display: grid;
grid-template-columns: 1fr 420px;
gap: 50px;
margin-bottom: 50px;
align-items: start;
}
.service-features h3 {
font-size: 36px;
font-weight: 700;
color: #1a202c;
margin-bottom: 16px;
}
.service-intro {
font-size: 16px;
color: #64748b;
line-height: 1.7;
margin-bottom: 32px;
}
/* Features List */
.features-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.feature-item {
display: flex;
gap: 16px;
}
.feature-dot {
width: 12px;
height: 12px;
background: linear-gradient(135deg, #9bbf8f 0%, #7d9d7a 100%);
border-radius: 50%;
flex-shrink: 0;
margin-top: 6px;
}
.feature-item h4 {
font-size: 16px;
font-weight: 700;
color: #1a202c;
margin-bottom: 6px;
}
.feature-item p {
font-size: 14px;
color: #64748b;
line-height: 1.6;
}
/* Pricing Card */
.service-pricing-card {
background: white;
border-radius: 16px;
padding: 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid #e2e8f0;
position: sticky;
top: 100px;
transition: all 0.3s ease;
}
.service-pricing-card:hover {
box-shadow: 0 12px 40px rgba(155, 191, 143, 0.15);
transform: translateY(-4px);
}
.pricing-badge {
display: inline-block;
background: #e8f5e9;
color: #2e7d32;
padding: 6px 14px;
border-radius: 50px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 16px;
}
.couples-badge {
background: #fce4ec;
color: #c2185b;
}
.future-badge {
background: #e8eaf6;
color: #3f51b5;
}
/* Pricing Display */
.pricing-display {
margin-bottom: 28px;
padding-bottom: 28px;
border-bottom: 2px solid #f0f4f8;
}
.price-amount {
font-size: 48px;
font-weight: 800;
color: #9bbf8f;
}
.price-period {
font-size: 14px;
color: #94a3b8;
font-weight: 500;
}
/* Pricing Details */
.pricing-details {
margin-bottom: 24px;
}
.pricing-details p {
font-size: 13px;
color: #64748b;
line-height: 1.8;
margin-bottom: 6px;
}
.pricing-details strong {
color: #1a202c;
font-weight: 600;
}
/* Pricing Discount */
.pricing-discount {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
padding: 20px;
border-radius: 12px;
margin-bottom: 28px;
text-align: center;
}
.discount-badge {
display: inline-block;
background: #f59e0b;
color: white;
padding: 4px 10px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 8px;
}
.discount-price {
font-size: 32px;
font-weight: 700;
color: #d97706;
}
.discount-price span {
font-size: 13px;
font-weight: 500;
color: #b45309;
}
.discount-note {
font-size: 12px;
color: #b45309;
font-weight: 600;
margin-top: 6px;
}
/* Pricing Note Box */
.pricing-note-box {
background: #f0fdf4;
padding: 16px;
border-radius: 10px;
border-left: 4px solid #9bbf8f;
margin-bottom: 28px;
display: flex;
align-items: center;
gap: 12px;
}
.pricing-note-box i {
font-size: 20px;
color: #9bbf8f;
flex-shrink: 0;
}
.pricing-note-box p {
font-size: 13px;
color: #1a202c;
line-height: 1.6;
margin: 0;
}
/* CTA Button */
.service-cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 24px;
background: linear-gradient(135deg, #9bbf8f 0%, #7d9d7a 100%);
color: white;
border: none;
border-radius: 10px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
margin-bottom: 16px;
}
.service-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(155, 191, 143, 0.3);
}
.couples-btn {
background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
}
.couples-btn:hover {
box-shadow: 0 8px 24px rgba(244, 114, 182, 0.3);
}
.future-btn {
background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
}
.future-btn:hover {
box-shadow: 0 8px 24px rgba(129, 140, 248, 0.3);
}
/* Service Note */
.service-note {
font-size: 12px;
color: #94a3b8;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.service-note i {
color: #9bbf8f;
}
/* Future Icon */
.future-icon {
font-size: 48px;
color: #818cf8;
text-align: center;
margin-bottom: 16px;
}
/* Interest Checkboxes */
.interest-options {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.interest-check {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 10px;
border-radius: 6px;
transition: all 0.2s ease;
}
.interest-check:hover {
background: #f8fafb;
}
.interest-check input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #9bbf8f;
cursor: pointer;
}
.interest-check span {
font-size: 13px;
color: #64748b;
font-weight: 500;
}
/* Additional Info */
.service-additional-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
margin-top: 40px;
}
.info-card {
background: white;
padding: 32px;
border-radius: 12px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.info-card:hover {
box-shadow: 0 8px 24px rgba(155, 191, 143, 0.12);
transform: translateY(-4px);
}
.info-card i {
font-size: 28px;
color: #9bbf8f;
margin-bottom: 12px;
}
.info-card h4 {
font-size: 16px;
font-weight: 700;
color: #1a202c;
margin-bottom: 8px;
}
.info-card p {
font-size: 13px;
color: #64748b;
line-height: 1.6;
}
/* RESPONSIVE */
@media (max-width: 1024px) {
.service-layout {
grid-template-columns: 1fr;
gap: 30px;
}
.service-pricing-card {
position: relative;
top: 0;
}
.services-header h2 {
font-size: 36px;
}
}
@media (max-width: 768px) {
.talk-haven-services-section {
padding: 60px 20px;
}
.services-header h2 {
font-size: 28px;
}
.services-tabs-nav {
flex-direction: column;
gap: 10px;
}
.service-tab-btn {
width: 100%;
justify-content: center;
}
.service-features h3 {
font-size: 28px;
}
.service-pricing-card {
padding: 32px;
}
.price-amount {
font-size: 36px;
}
.service-additional-info {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.services-container {
padding: 0;
}
.service-features h3 {
font-size: 24px;
}
.service-pricing-card {
padding: 24px;
}
.service-tab-btn {
padding: 12px 20px;
font-size: 13px;
}
.service-tab-btn i {
font-size: 16px;
}
.features-list {
gap: 18px;
}
}
/* ============================================
UNIQUE NAMESPACE
============================================ */
.pgc-wrapper * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.pgc-wrapper {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.5;
color: #2c2a28;
background: linear-gradient(145deg, #f1faf4 0%, #f1faf4 100%);
padding: 0; /* REMOVED padding - no space around */
margin: 0;
}
/* main card section — NO outer box, NO shadow, NO border-radius, NO margin */
.pgc-growth-card {
max-width: 100%; /* Full width */
margin: 0; /* No margin */
background: #ffffff;
border-radius: 0;
box-shadow: none;
overflow: visible;
transition: none;
}
/* two-column layout */
.pgc-grid {
display: flex;
flex-wrap: wrap;
}
/* left hero side */
.pgc-hero {
flex: 1.2;
background: #fefaf5;
padding: 2.8rem 2.5rem;
border-right: 1px solid #f0eae2;
}
/* right content side */
.pgc-main-content {
flex: 2;
padding: 2.8rem 2.8rem;
background: #ffffff;
}
/* unique typography */
.pgc-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #222425;
font-weight: 600;
margin-bottom: 1rem;
display: inline-block;
background: #DDB2B9;
padding: 0.25rem 0.9rem;
border-radius: 40px;
}
.pgc-title {
font-size: 2.8rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: #2c3a2b;
margin: 1rem 0 1.2rem 0;
}
.pgc-title span {
color: #9bbf8f;
border-bottom: 3px solid #dce8d4;
display: inline-block;
}
.pgc-quote {
font-size: 1rem;
color: #5b6e5a;
border-left: 3px solid #cfdfc5;
padding-left: 1.2rem;
margin: 1.8rem 0 2rem 0;
font-style: normal;
font-weight: 400;
}
/* consultation block */
.pgc-consult-block {
background: #f1f5eb;
border-radius: 1.25rem;
padding: 1.4rem 1.8rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.pgc-consult-text {
display: flex;
align-items: center;
gap: 1rem;
font-weight: 600;
font-size: 1.1rem;
}
.pgc-consult-text i {
font-size: 1.8rem;
color: #9bbf8f;
}
.pgc-btn-contact {
background: transparent;
border: 1.5px solid #cfdfc5;
padding: 0.6rem 1.8rem;
border-radius: 60px;
font-weight: 600;
font-size: 0.9rem;
color: #3a5a3a;
cursor: pointer;
transition: 0.2s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.pgc-btn-contact:hover {
background: #e9f0e3;
border-color: #9bbf8f;
transform: translateY(-2px);
}
/* headings inside content */
.pgc-main-content h2 {
font-size: 1.7rem;
font-weight: 600;
letter-spacing: -0.3px;
color: #2c3a2b;
margin: 1.8rem 0 1rem 0;
}
.pgc-main-content p {
font-size: 1rem;
color: #3d3c3a;
margin-bottom: 1.2rem;
font-weight: 400;
line-height: 1.6;
}
.pgc-main-content h3 {
font-size: 1.2rem;
font-weight: 600;
color: #4b6b48;
margin: 1.5rem 0 0.8rem 0;
display: flex;
align-items: center;
gap: 0.6rem;
}
.pgc-highlight-badge {
background: #eef3e9;
padding: 0.2rem 0.8rem;
border-radius: 40px;
font-size: 0.75rem;
font-weight: 500;
color: #5f7e5a;
}
/* specialties grid */
.pgc-specialties-grid {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
margin: 1.8rem 0 1rem 0;
}
.pgc-spec-item {
background: #f0e9ea;
padding: 0.5rem 1.2rem;
border-radius: 40px;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.01em;
color: #4a5c48;
transition: all 0.2s;
border: 1px solid #ece3da;
}
.pgc-spec-item i {
margin-right: 6px;
font-size: 0.75rem;
color: #5f7e5a;
}
.pgc-spec-item:hover {
background: #eef3e9;
transform: translateY(-2px);
border-color: #cbdcc0;
}
/* divider */
.pgc-soft-divider {
width: 60px;
height: 3px;
background: #DDB2B9;
margin: 1.5rem 0;
}
/* insight note */
.pgc-insight-note {
background: #fefaf5;
border-radius: 20px;
padding: 1.2rem;
margin: 1rem 0;
font-size: 0.9rem;
border-left: 4px solid #cfdfc5;
color: #4f5e4a;
}
.pgc-small-note {
font-size: 0.8rem;
color: #7c8b78;
margin-top: 0.8rem;
}
/* full responsiveness */
@media (max-width: 980px) {
.pgc-grid {
flex-direction: column;
}
.pgc-hero {
border-right: none;
border-bottom: 1px solid #f0eae2;
padding: 2rem;
}
.pgc-main-content {
padding: 2rem;
}
.pgc-title {
font-size: 2.2rem;
}
}
@media (max-width: 640px) {
.pgc-wrapper {
padding: 0; /* Keep flush */
}
.pgc-title {
font-size: 1.8rem;
}
.pgc-consult-block {
flex-direction: column;
align-items: flex-start;
}
.pgc-main-content h2 {
font-size: 1.4rem;
}
.pgc-spec-item {
font-size: 0.75rem;
padding: 0.4rem 1rem;
}
}
@media (max-width: 480px) {
.pgc-hero, .pgc-main-content {
padding: 1.5rem;
}
.pgc-title {
font-size: 1.6rem;
}
}
/* ============================================
YOUR EXISTING RESPONSIVE RULES
============================================ */
@media (max-width: 1024px) {
.service-feature-grid { grid-template-columns: 1fr; }
.hero-stats-modern { gap: 40px; }
}
@media (max-width: 768px) {
.tabs-nav-modern { flex-wrap: wrap; }
.tabs-container-modern { padding: 30px 20px; margin: 0 10px; }
.hero-stats-modern { gap: 30px; }
.stat-number-modern { font-size: 2rem; }
.cta-buttons-modern { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
.services-hero-modern,
.services-tabs-section,
.features-section-modern,
.final-cta-modern { padding-left: 15px; padding-right: 15px; }
}
/* ===== mh-clinical-section ===== */
.mh-clinical-section {
position: relative;
background: #fff;
padding: 120px 20px 100px;
overflow: hidden;
font-family: Arial, sans-serif;
}
/* ===== TOP WAVE ===== */
.mh-wave {
position: absolute;
top: 0;
left: 0;
width: 65%;
height: 160px;
background: linear-gradient(135deg, #9bbf8f, #7da874);
border-bottom-right-radius: 100% 80%;
z-index: 0;
}
/* ===== CONTAINER ===== */
.mh-container {
position: relative;
z-index: 2;
max-width: 1200px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;
}
/* ===== LEFT CONTENT ===== */
.mh-left {
max-width: 520px;
}
.mh-left h2 {
font-size: 32px;
color: #2f3e3b;
margin-bottom: 18px;
font-weight: 600;
}
.mh-left p {
color: #555;
line-height: 1.8;
margin-bottom: 25px;
}
/* ===== RIGHT AREA ===== */
.mh-right {
position: relative;
width: 540px;
height: 400px;
}
/* ===== CIRCLES (UPGRADED) ===== */
.mh-circle {
position: absolute;
width: 240px;
height: 240px;
background: linear-gradient(135deg, #f4d7dc, #ddb2b9);
border-radius: 50%;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.12),
inset 0 2px 6px rgba(255, 255, 255, 0.4);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.35s ease;
}
/* Hover effect */
.mh-circle:hover {
transform: translateY(-8px) scale(1.03);
box-shadow:
0 25px 60px rgba(0, 0, 0, 0.18),
inset 0 2px 8px rgba(255, 255, 255, 0.5);
}
/* POSITIONING */
.mh-circle-1 {
left: 50px;
bottom: 20px;
}
.mh-circle-2 {
right: 50px;
top: 20px;
}
/* ===== INNER CONTENT ===== */
.mh-circle-inner {
text-align: center;
padding: 28px;
max-width: 180px;
}
/* ICON STYLE (OPTIONAL IF YOU ADD ICONS) */
.mh-circle-inner i {
font-size: 26px;
color: #7da874;
margin-bottom: 10px;
}
/* TITLE */
.mh-circle-inner h3 {
font-size: 20px;
font-weight: 600;
color: #1e293b;
margin-bottom: 8px;
}
/* DESCRIPTION */
.mh-circle-inner p {
font-size: 14px;
color: #475569;
line-height: 1.5;
}
/* ===== FOOTNOTE ===== */
.mh-note {
text-align: center;
margin-top: 60px;
font-size: 13px;
color: #777;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
.mh-container {
flex-direction: column;
text-align: center;
}
.mh-right {
width: 100%;
height: auto;
display: flex;
justify-content: center;
gap: 25px;
margin-top: 40px;
}
.mh-circle {
position: static;
width: 180px;
height: 180px;
}
.mh-circle-inner {
padding: 20px;
}
.mh-circle-inner h3 {
font-size: 16px;
}
.mh-circle-inner p {
font-size: 13px;
}
}
/* ========== TRUST & SECURITY SECTION ========== */
.talk-haven-trust-security {
padding: 100px 20px;
background: linear-gradient(135deg, #f9fdf7 0%, #f0f4f8 100%);
position: relative;
overflow: hidden;
}
.talk-haven-trust-security::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(155, 191, 143, 0.08) 0%, transparent 70%);
border-radius: 50%;
}
.talk-haven-trust-security::after {
content: '';
position: absolute;
bottom: -80px;
left: -80px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(125, 157, 122, 0.06) 0%, transparent 70%);
border-radius: 50%;
}
.trust-security-container {
max-width: 1300px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* Section Header */
.trust-header {
text-align: center;
margin-bottom: 70px;
}
.trust-header h2 {
font-size: 48px;
font-weight: 700;
color: #1a202c;
margin-bottom: 12px;
}
.trust-header p {
font-size: 17px;
color: #64748b;
font-weight: 500;
}
/* Trust Layout */
.trust-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
margin-bottom: 60px;
}
/* Trust Message */
.trust-message {
background: white;
padding: 48px;
border-radius: 16px;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.trust-icon-large {
font-size: 64px;
color: #9bbf8f;
margin-bottom: 24px;
}
.trust-message h3 {
font-size: 32px;
font-weight: 700;
color: #1a202c;
margin-bottom: 12px;
}
.trust-intro {
font-size: 16px;
color: #64748b;
line-height: 1.7;
margin-bottom: 36px;
}
/* Trust Features */
.trust-features {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 32px;
}
.trust-feature {
display: flex;
gap: 16px;
align-items: flex-start;
}
.trust-check {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f6 100%);
border-radius: 50%;
color: #9bbf8f;
flex-shrink: 0;
font-size: 16px;
}
.trust-feature h4 {
font-size: 15px;
font-weight: 700;
color: #1a202c;
margin-bottom: 4px;
}
.trust-feature p {
font-size: 13px;
color: #64748b;
line-height: 1.6;
}
/* Trust CTA */
.trust-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #9bbf8f 0%, #7d9d7a 100%);
color: white;
padding: 14px 28px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
}
.trust-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(155, 191, 143, 0.3);
}
/* Trust Cards Section */
.trust-cards-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.trust-card {
background: white;
padding: 32px;
border-radius: 12px;
border: 1px solid #e2e8f0;
transition: all 0.35s ease;
text-align: center;
}
.trust-card:hover {
box-shadow: 0 12px 40px rgba(155, 191, 143, 0.12);
transform: translateY(-6px);
border-color: #9bbf8f;
}
.card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: 14px;
margin: 0 auto 20px;
font-size: 32px;
transition: all 0.3s ease;
}
.lock-icon {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
color: #d97706;
}
.data-icon {
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
color: #0284c7;
}
.ethics-icon {
background: linear-gradient(135deg, #f5d4e6 0%, #fbcfe8 100%);
color: #be185d;
}
.rights-icon {
background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
color: #4f46e5;
}
.trust-card:hover .card-icon {
transform: scale(1.1);
}
.trust-card h3 {
font-size: 18px;
font-weight: 700;
color: #1a202c;
margin-bottom: 12px;
}
.trust-card p {
font-size: 14px;
color: #64748b;
line-height: 1.6;
}
/* Exception Notice */
.trust-exceptions {
margin-bottom: 60px;
}
.exceptions-card {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-left: 4px solid #f59e0b;
padding: 28px;
border-radius: 10px;
}
.exceptions-card h4 {
font-size: 16px;
font-weight: 700;
color: #92400e;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.exceptions-card h4 i {
color: #f59e0b;
}
.exceptions-card p {
font-size: 14px;
color: #b45309;
line-height: 1.7;
}
/* Bottom CTA */
.trust-bottom-cta {
background: white;
padding: 48px;
border-radius: 16px;
text-align: center;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.trust-bottom-cta h3 {
font-size: 32px;
font-weight: 700;
color: #1a202c;
margin-bottom: 12px;
}
.trust-bottom-cta p {
font-size: 16px;
color: #64748b;
margin-bottom: 32px;
line-height: 1.7;
}
.btn-start-journey {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #9bbf8f 0%, #7d9d7a 100%);
color: white;
padding: 16px 40px;
border-radius: 10px;
text-decoration: none;
font-weight: 700;
font-size: 16px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn-start-journey:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(155, 191, 143, 0.35);
}
/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
.trust-layout {
grid-template-columns: 1fr;
gap: 40px;
}
.trust-cards-section {
grid-template-columns: 1fr;
}
.trust-header h2 {
font-size: 36px;
}
}
@media (max-width: 768px) {
.talk-haven-trust-security {
padding: 70px 20px;
}
.trust-header h2 {
font-size: 28px;
}
.trust-message {
padding: 32px;
}
.trust-message h3 {
font-size: 26px;
}
.trust-cards-section {
grid-template-columns: 1fr;
}
.trust-features {
gap: 16px;
}
.trust-bottom-cta {
padding: 32px;
}
.trust-bottom-cta h3 {
font-size: 24px;
}
}
@media (max-width: 480px) {
.talk-haven-trust-security {
padding: 50px 16px;
}
.trust-header {
margin-bottom: 50px;
}
.trust-header h2 {
font-size: 22px;
}
.trust-message {
padding: 24px;
}
.trust-message h3 {
font-size: 20px;
}
.trust-icon-large {
font-size: 48px;
margin-bottom: 16px;
}
.trust-intro {
font-size: 14px;
margin-bottom: 24px;
}
.trust-card {
padding: 24px;
}
.trust-bottom-cta {
padding: 24px;
}
.btn-start-journey {
width: 100%;
justify-content: center;
}
}
/* =====gh-gift-SECTION ===== */
.gh-gift-section {
position: relative;
background: #eef3e9;
padding: 100px 20px;
overflow: hidden;
font-family: Arial, sans-serif;
}
/* ===== TOP WAVE ===== */
.gh-wave-top {
position: absolute;
top: 0;
left: 0;
width: 65%;
height: 140px;
background: #9bbf8f;
border-bottom-right-radius: 100% 80%;
z-index: 0;
}
/* ===== CONTAINER ===== */
.gh-container {
position: relative;
z-index: 2;
max-width: 1200px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}
/* ===== LEFT ===== */
.gh-left {
max-width: 520px;
}
.gh-left h1 {
font-size: 38px;
line-height: 1.3;
color: #2f3e3b;
margin-bottom: 20px;
}
.gh-left h1 span {
color: #3f7f5f;
}
.gh-left p {
color: #555;
line-height: 1.7;
margin-bottom: 30px;
}
/* BUTTON */
.gh-btn {
display: inline-block;
padding: 14px 28px;
border-radius: 30px;
border: 1.5px solid #2f3e3b;
color: #2f3e3b;
text-decoration: none;
transition: 0.3s ease;
}
.gh-btn:hover {
background: #9bbf8f;
color: #fff;
border-color: #9bbf8f;
}
/* ===== RIGHT ===== */
.gh-right {
position: relative;
}
/* CURVED IMAGE */
.gh-image-wrap {
width: 320px;
height: 320px;
overflow: hidden;
border-radius: 60% 40% 50% 50%;
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.gh-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* DECORATIVE CURVE */
.gh-decor {
position: absolute;
bottom: -40px;
right: -30px;
width: 120px;
height: 120px;
border: 2px solid #2f3e3b;
border-radius: 50%;
border-left-color: transparent;
border-top-color: transparent;
transform: rotate(30deg);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
.gh-container {
flex-direction: column;
text-align: center;
}
.gh-image-wrap {
width: 260px;
height: 260px;
}
.gh-left h1 {
font-size: 30px;
}
}
/* ========== RESOURCES PAGE - TALK HAVEN THEME ========== */
/* HERO SECTION */
.resources-hero-section {
position: relative;
padding: 100px 20px;
background: linear-gradient(135deg, #ffffff 0%, #f8fafb 50%, #f0f4f8 100%);
overflow: hidden;
}
.hero-wave-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px;
background: url('data:image/svg+xml,') repeat-x;
background-size: 300px 100%;
}
.hero-content-resources {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 2;
text-align: center;
}
.hero-badge-resources {
display: inline-flex;
align-items: center;
gap: 8px;
background: #e8f5e9;
color: #2e7d32;
padding: 10px 18px;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hero-title-resources {
font-size: 48px;
font-weight: 800;
color: #1a202c;
margin-bottom: 16px;
line-height: 1.2;
}
.hero-title-resources span {
color: #9bbf8f;
}
.hero-description {
font-size: 17px;
color: #64748b;
margin-bottom: 32px;
line-height: 1.6;
}
.hero-search-modern {
display: flex;
align-items: center;
gap: 0;
background: white;
border-radius: 10px;
padding: 2px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
margin-bottom: 24px;
border: 1px solid #e2e8f0;
}
.hero-search-modern i {
color: #94a3b8;
margin-left: 16px;
font-size: 18px;
}
.hero-search-modern input {
flex: 1;
border: none;
padding: 14px 16px;
font-size: 15px;
color: #1a202c;
background: transparent;
}
.hero-search-modern input::placeholder {
color: #cbd5e1;
}
.hero-search-modern input:focus {
outline: none;
}
.search-btn {
background: linear-gradient(135deg, #DDB2B9 0%, #DDB2B9 100%);
color: white;
border: none;
padding: 14px 24px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
margin-right: 2px;
}
.search-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(155, 191, 143, 0.3);
}
.popular-tags {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.popular-tags span {
color: #64748b;
font-weight: 600;
font-size: 14px;
}
.popular-tags a {
display: inline-flex;
align-items: center;
gap: 4px;
color: #9bbf8f;
text-decoration: none;
font-size: 13px;
padding: 6px 12px;
background: rgba(155, 191, 143, 0.08);
border-radius: 20px;
transition: all 0.3s ease;
}
.popular-tags a:hover {
background: rgba(155, 191, 143, 0.15);
color: #7d9d7a;
}
/* CATEGORIES CONTAINER */
.rsrc-categories-container {
display: grid;
grid-template-columns: 280px 1fr;
gap: 40px;
max-width: 1200px;
margin: 60px auto;
padding: 0 20px;
}
.rsrc-sidebar {
position: sticky;
top: 100px;
height: fit-content;
}
.rsrc-sidebar-title {
font-size: 18px;
font-weight: 700;
color: #1a202c;
margin-bottom: 20px;
}
.rsrc-menu {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 40px;
}
.rsrc-menu li {
padding: 12px 16px;
background: #f8fafb;
border-radius: 8px;
color: #64748b;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
border-left: 3px solid transparent;
}
.rsrc-menu li:hover {
background: #f0f4f8;
color: #9bbf8f;
}
.rsrc-menu li.active {
background: white;
color: #9bbf8f;
border-left-color: #9bbf8f;
box-shadow: 0 2px 8px rgba(155, 191, 143, 0.1);
}
.rsrc-sidebar-info {
background: linear-gradient(135deg, #f9fdf7 0%, #f1f8f6 100%);
padding: 20px;
border-radius: 10px;
border-left: 4px solid #9bbf8f;
}
.rsrc-sidebar-info h4 {
font-size: 14px;
font-weight: 700;
color: #1a202c;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.rsrc-sidebar-info h4 i {
color: #9bbf8f;
}
.rsrc-sidebar-info p {
font-size: 13px;
color: #64748b;
line-height: 1.5;
margin-bottom: 8px;
}
/* MAIN CONTENT */
.rsrc-main {
min-height: 500px;
}
.rsrc-content {
display: none;
}
.rsrc-content.active {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.rsrc-content h2 {
font-size: 32px;
font-weight: 700;
color: #1a202c;
margin-bottom: 32px;
}
.rsrc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 28px;
}
/* RESOURCE CARDS */
.rsrc-card {
background: white;
border-radius: 12px;
padding: 28px;
border: 1px solid #e2e8f0;
transition: all 0.35s ease;
overflow: hidden;
position: relative;
}
.rsrc-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #9bbf8f 0%, #7d9d7a 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.rsrc-card:hover {
box-shadow: 0 8px 24px rgba(155, 191, 143, 0.12);
border-color: #9bbf8f;
transform: translateY(-4px);
}
.rsrc-card:hover::before {
transform: scaleX(1);
}
.rsrc-card-type {
display: inline-block;
background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f6 100%);
color: #9bbf8f;
padding: 6px 12px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 16px;
}
.rsrc-card h3 {
font-size: 17px;
font-weight: 700;
color: #1a202c;
margin-bottom: 8px;
line-height: 1.4;
}
.rsrc-meta {
font-size: 12px;
color: #94a3b8;
font-weight: 500;
margin-bottom: 16px;
}
.rsrc-toggle-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: transparent;
border: none;
color: #9bbf8f;
font-weight: 600;
cursor: pointer;
padding: 0;
font-size: 14px;
transition: all 0.3s ease;
}
.rsrc-toggle-btn:hover {
color: #7d9d7a;
}
.rsrc-toggle-btn .arrow {
display: inline-block;
transition: transform 0.3s ease;
}
.rsrc-card.active .rsrc-toggle-btn .arrow {
transform: rotate(180deg);
}
.rsrc-card-extra {
display: none;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #e2e8f0;
}
.rsrc-card.active .rsrc-card-extra {
display: block;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.rsrc-card-extra p {
font-size: 14px;
color: #64748b;
line-height: 1.6;
margin-bottom: 12px;
}
.rsrc-read-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #9bbf8f;
text-decoration: none;
font-weight: 600;
font-size: 13px;
transition: all 0.3s ease;
}
.rsrc-read-link:hover {
gap: 10px;
color: #7d9d7a;
}
/* TRUST & ETHICS SECTION */
.talk-haven-trust-zone {
position: relative;
padding: 100px 20px;
background: linear-gradient(135deg, #f9fdf7 0%, #f1f8f6 100%);
margin-top: 80px;
overflow: hidden;
}
.trust-wave-top {
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 60px;
background: url('data:image/svg+xml,') repeat-x;
background-size: 300px 100%;
}
.trust-inner {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 2;
text-align: center;
}
.trust-content h2 {
font-size: 42px;
font-weight: 700;
color: #1a202c;
margin-bottom: 16px;
}
.trust-content p {
font-size: 16px;
color: #64748b;
margin-bottom: 40px;
line-height: 1.6;
}
.trust-badges {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
}
.trust-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 24px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(155, 191, 143, 0.15);
}
.trust-badge i {
font-size: 32px;
color: #9bbf8f;
}
.trust-badge span {
font-size: 13px;
color: #64748b;
text-align: center;
line-height: 1.5;
}
.trust-badge span strong {
color: #1a202c;
display: block;
margin-bottom: 4px;
}
.trust-wave-bottom {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 60px;
background: url('data:image/svg+xml,') repeat-x;
background-size: 300px 100%;
}
/* SESSION FLOW SECTION */
.talk-haven-flow {
position: relative;
padding: 100px 20px;
background: white;
overflow: hidden;
}
.flow-curve-top {
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 60px;
background: url('data:image/svg+xml,') repeat-x;
background-size: 300px 100%;
}
.flow-container {
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 2;
text-align: center;
}
.flow-container h2 {
font-size: 42px;
font-weight: 700;
color: #1a202c;
margin-bottom: 8px;
}
.flow-subtitle {
font-size: 16px;
color: #64748b;
margin-bottom: 50px;
}
.flow-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 32px;
}
.flow-step {
position: relative;
padding: 32px 24px;
text-align: left;
}
.flow-step::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 50px;
background: linear-gradient(180deg, #9bbf8f 0%, transparent 100%);
}
.flow-number {
display: inline-block;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #9bbf8f 0%, #7d9d7a 100%);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 20px;
margin-bottom: 16px;
}
.flow-step h3 {
font-size: 18px;
font-weight: 700;
color: #1a202c;
margin-bottom: 12px;
}
.flow-step p {
font-size: 14px;
color: #64748b;
line-height: 1.6;
}
.flow-curve-bottom {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 60px;
background: url('data:image/svg+xml,') repeat-x;
background-size: 300px 100%;
}
/* ACCESSIBILITY SECTION */
.talk-haven-access {
padding: 100px 20px;
background: linear-gradient(135deg, #f8fafb 0%, #f0f4f8 100%);
text-align: center;
}
.talk-haven-access h2 {
font-size: 42px;
font-weight: 700;
color: #1a202c;
margin-bottom: 50px;
}
.access-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 28px;
max-width: 900px;
margin: 0 auto 40px;
}
.access-card {
background: white;
padding: 32px;
border-radius: 12px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.access-card i {
font-size: 36px;
color: #9bbf8f;
margin-bottom: 16px;
}
.access-card h3 {
font-size: 18px;
font-weight: 700;
color: #1a202c;
margin-bottom: 12px;
}
.access-card p {
font-size: 14px;
color: #64748b;
line-height: 1.6;
}
.access-card:hover {
box-shadow: 0 8px 24px rgba(155, 191, 143, 0.12);
transform: translateY(-4px);
}
.access-info {
max-width: 700px;
margin: 0 auto;
background: white;
padding: 28px;
border-radius: 10px;
border-left: 4px solid #9bbf8f;
}
.access-info p {
font-size: 15px;
color: #64748b;
line-height: 1.6;
}
.access-info a {
color: #9bbf8f;
text-decoration: none;
font-weight: 600;
}
.access-info a:hover {
text-decoration: underline;
}
/* RESPONSIVE */
@media (max-width: 1024px) {
.rsrc-categories-container {
grid-template-columns: 1fr;
gap: 20px;
}
.rsrc-sidebar {
position: relative;
top: 0;
}
.flow-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.hero-title-resources {
font-size: 36px;
}
.hero-description {
font-size: 15px;
}
.hero-search-modern {
flex-direction: column;
}
.hero-search-modern i {
margin-left: 0;
margin-top: 12px;
}
.search-btn {
width: 100%;
margin: 12px 2px 2px 2px;
}
.rsrc-grid {
grid-template-columns: 1fr;
}
.flow-grid {
grid-template-columns: 1fr;
}
.trust-badges {
grid-template-columns: repeat(2, 1fr);
}
.flow-container h2 {
font-size: 32px;
}
.talk-haven-access h2 {
font-size: 32px;
}
}
@media (max-width: 480px) {
.hero-title-resources {
font-size: 28px;
}
.rsrc-grid {
gap: 16px;
}
.rsrc-card {
padding: 20px;
}
.trust-badges {
grid-template-columns: 1fr;
}
.access-cards {
grid-template-columns: 1fr;
}
.popular-tags {
flex-direction: column;
gap: 8px;
}
.popular-tags a {
width: 100%;
justify-content: center;
}
}
/* hidden utility */
.hidden {
display: none;
}
/* responsive */
@media (max-width: 900px) {
.modern-quick-exercises {
padding: 70px 30px 90px;
}
.modern-exercises-header h2 {
font-size: 2.3rem;
}
.modern-exercise-card h3 {
font-size: 1.35rem;
}
}
@media (max-width: 680px) {
.modern-quick-exercises {
padding: 60px 20px 80px;
}
.modern-exercises-header h2 {
font-size: 1.9rem;
flex-wrap: wrap;
justify-content: center;
}
.modern-exercises-grid {
gap: 24px;
}
.modern-exercise-card {
padding: 28px 20px;
}
.modern-start-btn {
padding: 10px 18px;
min-width: 130px;
}
}
/* additional micro interactions */
.modern-exercise-card {
transition: all 0.3s ease;
}
/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
.category-card-resources {
flex: 0 0 calc(50% - 25px);
}
}
@media (max-width: 1024px) {
.resources-hero-section, .categories-section-resources,
.featured-resources-section, .quick-exercises-section,
.latest-resources-section, .trusted-sources-section,
.newsletter-section, .resources-cta-section {
padding-left: 40px;
padding-right: 40px;
}
.hero-title-resources { font-size: 2.8rem; }
}
@media (max-width: 768px) {
.hero-title-resources { font-size: 2rem; }
.hero-search-modern { max-width: 100%; }
.carousel-controls { position: static; justify-content: center; margin-top: 20px; }
.category-card-resources { flex: 0 0 100%; min-width: auto; }
.categories-grid-centered { gap: 15px; }
.resource-card-modern { min-width: 260px; }
.sources-content-resources { flex-direction: column; text-align: center; }
.trust-badge { justify-content: center; }
.hero-search-modern .fa-search { padding: 14px 0 14px 20px; }
.hero-search-modern input { padding: 14px 14px; font-size: 1rem; }
.search-btn { padding: 14px 25px; }
}
@media (max-width: 480px) {
.hero-title-resources { font-size: 1.6rem; }
.resources-hero-section, .categories-section-resources,
.featured-resources-section, .quick-exercises-section,
.latest-resources-section, .trusted-sources-section,
.newsletter-section, .resources-cta-section {
padding-left: 20px;
padding-right: 20px;
}
.cta-box-resources { padding: 30px 20px; }
.cta-box-resources h2 { font-size: 1.3rem; }
}
/* Initial hidden state/animations */
.animate {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s ease;
}
/* Active state */
.animate.show {
opacity: 1;
transform: translateY(0);
}
/* Card movement on load */
.therapy-card,
.info-card,
.hero-text,
.hero-image {
transition: transform 0.6s ease, opacity 0.6s ease;
}
/* Slight movement effect */
.float-in {
transform: translateY(20px);
}
/* ========== SCROLL INDICATOR ========== */
#scroll-indicator {
will-change: width;
}
/* ========== ANIMATION UTILITIES ========== */
[data-animate] {
opacity: 0;
}
/* ========== SMOOTH PAGE TRANSITIONS ========== */
body {
transition: opacity 0.3s ease;
}
body.page-loaded {
opacity: 1;
}
/* ========== FLOATING EFFECT ========== */
.floating {
will-change: transform;
}
/* ========== PARALLAX OPTIMIZATION ========== */
.hero-image img,
.hiw-organic-image {
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
/* END ANIMATIONS */
/* LOGIN-STYLES */
.login-page {
display: flex;
justify-content: center;
align-items: center;
min-height: 70vh;
}
.login-container {
background: #fff;
padding: 40px;
width: 350px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
text-align: center;
}
.login-container h2 {
margin-bottom: 20px;
}
.login-container input {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border-radius: 8px;
border: 1px solid #ddd;
}
.login-container button {
width: 100%;
padding: 12px;
background: #9bbf8f;
border: none;
color: #fff;
border-radius: 8px;
cursor: pointer;
}
.login-container button:hover {
background: #7da874;
}
.error-msg {
background: #ffe5e5;
color: #c0392b;
padding: 10px;
margin-bottom: 15px;
border-radius: 6px;
}
/* FOOTER */
.footer {
background: #13202e;
color: white;
padding: 60px 20px 20px;
}
.footer-container {
max-width: 1100px;
margin: 0 auto;
display: flex;
justify-content: space-between;
gap: 40px;
}
.footer-container > div {
flex: 1;
}
.footer-brand img {
width: 55px;
margin-bottom: 10px;
}
.footer-brand h3 {
font-family: 'Forte', cursive;
margin-bottom: 10px;
}
.footer-links a {
display: block;
margin-top: 8px;
color: #ccc;
text-decoration: none;
}
.footer-contact p {
margin-top: 8px;
color: #ccc;
}
.footer-bottom {
text-align: center;
margin-top: 40px;
font-size: 13px;
color: #aaa;
}
.footer-note {
font-size: 12px;
color: #94a3b8;
margin-top: 5px;
}
.footer-contact p {
margin-bottom: 8px;
}
.footer-bottom-content {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
gap: 15px;
overflow-x: auto;
}
.footer-credit {
font-size: 13px;
color: #94a3b8;
white-space: nowrap;
}
.footer-credit a {
color: #9bbf8f;
text-decoration: none;
font-weight: 500;
}
.footer-credit a:hover {
text-decoration: underline;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.navbar {
padding: 20px;
flex-direction: column;
gap: 15px;
}
.hero-card {
flex-direction: column;
text-align: center;
}
.hero-text {
align-items: center;
}
.hero-text .btn-dark {
align-self: center;
}
.hero-image img {
width: 100%;
height: auto;
}
.cards-section {
flex-direction: column;
}
.process-steps {
flex-direction: column;
}
.footer-container {
flex-direction: column;
}
}
@media (max-width: 768px) {
.footer-bottom-content {
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.footer-credit {
white-space: normal;
}
}