.elementor-691 .elementor-element.elementor-element-1b5c34c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-691 .elementor-element.elementor-element-f2e8ed6{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-691 .elementor-element.elementor-element-9057d46{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-691 .elementor-element.elementor-element-362c762{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;text-align:center;}.elementor-691 .elementor-element.elementor-element-362c762 .elementor-heading-title{font-family:"DM Sans", Sans-serif;font-size:25px;font-weight:600;color:#000000;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-691 .elementor-element.elementor-element-15699d6{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Nunito", Sans-serif;font-size:18px;font-weight:400;color:#000000;}.elementor-691 .elementor-element.elementor-element-b6d4ef8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-691 .elementor-element.elementor-element-5afe07a{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-acc-button{background-color:#FFFFFF;color:#000000;border-color:#EAEAEA;margin-top:6px;margin-bottom:6px;padding:18px 18px 18px 18px;border-style:solid;border-width:1px 1px 1px 1px;border-radius:2px 2px 2px 2px;}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-acc-icon-box{width:70px;}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-acc-active .wpr-toggle-icon i{transform:rotate(0deg);transform-origin:center;}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-acc-active .wpr-toggle-icon svg{transform:rotate(0deg);transform-origin:center;}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-acc-button .wpr-acc-title-text{color:#000000;}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-acc-button, .elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-acc-button .wpr-acc-title-text{font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:600;}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion button.wpr-acc-button{transition:all 0.3s ease-in-out;}.elementor-691 .elementor-element.elementor-element-e733690.wpr-advanced-accordion-icon-no-box .wpr-acc-item-title .wpr-acc-title-text{margin-left:5px;}.elementor-691 .elementor-element.elementor-element-e733690.wpr-advanced-accordion-icon-side-box .wpr-acc-item-title .wpr-acc-title-text{margin-left:calc(70px + 5px);}.elementor-691 .elementor-element.elementor-element-e733690.wpr-advanced-accordion-icon-side-curve .wpr-acc-item-title .wpr-acc-title-text{margin-left:calc(70px + 30px + 5px);}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-acc-button .wpr-title-icon i{color:var( --e-global-color-astglobalcolor4 );font-size:15px;}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-acc-button .wpr-title-icon svg{fill:var( --e-global-color-astglobalcolor4 );width:15px;}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-acc-button .wpr-toggle-icon i{color:var( --e-global-color-astglobalcolor4 );font-size:15px;}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-acc-button .wpr-toggle-icon svg{fill:var( --e-global-color-astglobalcolor4 );width:15px;}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-acc-button .wpr-acc-icon-box{background-color:var( --e-global-color-primary );}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-toggle-icon i{transition:all 0.3s ease-in-out;}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-title-icon i{transition:all 0.3s ease-in-out;}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-toggle-icon svg{transition:all 0.3s ease-in-out;}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-title-icon svg{transition:all 0.3s ease-in-out;}.elementor-691 .elementor-element.elementor-element-e733690.wpr-advanced-accordion-icon-side-box .wpr-advanced-accordion .wpr-acc-icon-box{border-radius:2px 2px 2px 2px;}.elementor-691 .elementor-element.elementor-element-e733690.wpr-advanced-accordion-icon-side-curve .wpr-advanced-accordion .wpr-acc-icon-box{border-radius:2px 0 0 2px;}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-acc-panel .wpr-acc-panel-content{color:#000000;font-family:"Nunito", Sans-serif;font-size:15px;font-weight:400;}.elementor-691 .elementor-element.elementor-element-e733690 .wpr-advanced-accordion .wpr-acc-panel{background-color:#FFFFFF;border-color:#E8E8E8;padding:25px 25px 25px 25px;border-style:solid;border-width:1px 1px 1px 1px;border-radius:02px 02px 02px 02px;}.elementor-691 .elementor-element.elementor-element-bc391ad{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-acc-button{background-color:#FFFFFF;color:#000000;border-color:#EAEAEA;margin-top:6px;margin-bottom:6px;padding:18px 18px 18px 18px;border-style:solid;border-width:1px 1px 1px 1px;border-radius:2px 2px 2px 2px;}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-acc-icon-box{width:70px;}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-acc-active .wpr-toggle-icon i{transform:rotate(0deg);transform-origin:center;}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-acc-active .wpr-toggle-icon svg{transform:rotate(0deg);transform-origin:center;}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-acc-button .wpr-acc-title-text{color:#000000;}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-acc-button, .elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-acc-button .wpr-acc-title-text{font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:600;}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion button.wpr-acc-button{transition:all 0.3s ease-in-out;}.elementor-691 .elementor-element.elementor-element-5af2c6a.wpr-advanced-accordion-icon-no-box .wpr-acc-item-title .wpr-acc-title-text{margin-left:5px;}.elementor-691 .elementor-element.elementor-element-5af2c6a.wpr-advanced-accordion-icon-side-box .wpr-acc-item-title .wpr-acc-title-text{margin-left:calc(70px + 5px);}.elementor-691 .elementor-element.elementor-element-5af2c6a.wpr-advanced-accordion-icon-side-curve .wpr-acc-item-title .wpr-acc-title-text{margin-left:calc(70px + 30px + 5px);}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-acc-button .wpr-title-icon i{color:#FFFFFF;font-size:15px;}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-acc-button .wpr-title-icon svg{fill:#FFFFFF;width:15px;}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-acc-button .wpr-toggle-icon i{color:#FFFFFF;font-size:15px;}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-acc-button .wpr-toggle-icon svg{fill:#FFFFFF;width:15px;}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-acc-button .wpr-acc-icon-box{background-color:var( --e-global-color-primary );}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-toggle-icon i{transition:all 0.3s ease-in-out;}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-title-icon i{transition:all 0.3s ease-in-out;}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-toggle-icon svg{transition:all 0.3s ease-in-out;}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-title-icon svg{transition:all 0.3s ease-in-out;}.elementor-691 .elementor-element.elementor-element-5af2c6a.wpr-advanced-accordion-icon-side-box .wpr-advanced-accordion .wpr-acc-icon-box{border-radius:2px 2px 2px 2px;}.elementor-691 .elementor-element.elementor-element-5af2c6a.wpr-advanced-accordion-icon-side-curve .wpr-advanced-accordion .wpr-acc-icon-box{border-radius:2px 0 0 2px;}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-acc-panel .wpr-acc-panel-content{color:#000000;font-family:"Nunito", Sans-serif;font-size:15px;font-weight:400;}.elementor-691 .elementor-element.elementor-element-5af2c6a .wpr-advanced-accordion .wpr-acc-panel{background-color:#FFFFFF;border-color:#E8E8E8;padding:25px 25px 25px 25px;border-style:solid;border-width:1px 1px 1px 1px;border-radius:02px 02px 02px 02px;}@media(min-width:768px){.elementor-691 .elementor-element.elementor-element-f2e8ed6{--width:100%;}.elementor-691 .elementor-element.elementor-element-b6d4ef8{--width:100%;}.elementor-691 .elementor-element.elementor-element-5afe07a{--width:50%;}.elementor-691 .elementor-element.elementor-element-bc391ad{--width:50%;}}@media(max-width:1024px){.elementor-691 .elementor-element.elementor-element-362c762 .elementor-heading-title{font-size:40px;}}@media(max-width:767px){.elementor-691 .elementor-element.elementor-element-362c762 .elementor-heading-title{font-size:35px;}}/* Start custom CSS for html, class: .elementor-element-01b0c86 *//* ═══════════════════════════════════════════════════════════
STYLES.CSS — Healing Talks Booking Page
---------------------------------------------------------
HOW THIS FILE IS ORGANISED (search for these headings):
1. COLOR & FONT VARIABLES – change brand colors/fonts here ONLY
2. RESET & BASE
3. TOP TRUST BAR
4. HEADER
5. URGENCY BANNER
6. HERO CARD (psychologist profile)
7. TWO COLUMN LAYOUT
8. BOOKING PANEL (right sidebar form)
9. BLOGS & VIDEOS SECTION (new — bottom right)
10. CONTENT CARDS (left column: about, fees, schedule, etc.)
11. FINAL CTA CARD
12. MOBILE STICKY CTA
13. FOOTER
14. RESPONSIVE MEDIA QUERIES
═══════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────
1. COLOR & FONT VARIABLES
Change any brand color or font ONLY here.
Every other rule below reads from these variables,
so editing a value here updates the whole site.
─────────────────────────────────────── */
:root {
/* Core brand colors (as supplied) */
--brand-blue: #052E96; /* same as --blue-800 below, kept as alias */
--brand-tint: #D0DDFF; /* pale periwinkle tint for tags/badges */
--black: #000000;
--white: #ffffff;
/* Blue scale */
--blue-900: #031c5e; /* darkest shade — headings */
--blue-800: #052e96; /* BASE COLOR — buttons, links, tags */
--blue-700: #123a9f; /* slightly lighter — hover states */
--blue-600: #2148ad; /* mid shade — secondary text */
--blue-400: #6c85c9; /* light shade — muted text/borders */
--blue-100: #e4e9fa; /* pale tint — tag backgrounds */
--blue-50: #f5f7fd; /* near-white tint — section background */
/* Semantic colors kept for usability (NOT part of the brand palette,
but changing/removing them would hurt clarity — edit freely if you
want everything strictly on-brand) */
--status-green: #22c55e; /* "available" dot */
--status-green-bg: #f0fdf4;
--status-green-border: #bbf7d0;
--star-amber: #f59e0b; /* star ratings */
--whatsapp-green: #25d366; /* WhatsApp brand color */
--whatsapp-green-hover: #1db954;
--warning-bg: #fff3cd; /* urgency banner / fee note */
--warning-border: #fbbf24;
--warning-text: #78350f;
/* Fonts — DM Sans as primary display/body, Nunito & Open Sans as
fallbacks, per brief. Loaded via Google Fonts in the HTML. */
--font-main: 'DM Sans', 'Nunito', 'Open Sans', Arial, sans-serif;
/* Shared border + radius tokens — every card/button/input uses these
two values so the whole site's "boxiness" can be tuned from here */
--radius: 2px;
--border-thin: 1px solid var(--blue-400);
--border-thick: 2px solid var(--blue-800);
}
/* ───────────────────────────────────────
2. RESET & BASE
─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font-main);
background: var(--blue-50);
color: var(--black);
font-size: 15px;
line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
/* ───────────────────────────────────────
PAGE WRAPPER
─────────────────────────────────────── */
.page-wrap {
max-width: 1600px;
margin: 0 auto;
padding: 20px 16px 60px;
}
/* ───────────────────────────────────────
6. HERO CARD (psychologist profile)
─────────────────────────────────────── */
.hero-card {
background: var(--white);
border-radius: var(--radius);
border: var(--border-thin);
padding: 28px 28px 24px;
margin-bottom: 16px;
}
.hero-top-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
padding: 4px 12px;
border-radius: var(--radius);
border: 1px solid var(--blue-400);
}
/* Badge color variants — all mapped onto the blue scale so every badge
reads as one family instead of mixed teal/orange/red */
.badge-teal { background: var(--blue-100); color: var(--blue-900); border-color: var(--blue-400); }
.badge-blue { background: var(--blue-100); color: var(--blue-800); border-color: var(--blue-400); }
.badge-orange { background: var(--brand-tint); color: var(--blue-900); border-color: var(--blue-600); }
.badge-red { background: var(--white); color: var(--blue-800); border-color: var(--blue-800); }
.hero-inner { display: flex; gap: 24px; align-items: flex-start; }
.photo-col { flex-shrink: 0; text-align: center; }
.photo-wrap {
width: 180px; height: 180px;
border-radius: 0%; /* kept circular — a 2px-radius square photo would look like a bug */
overflow: hidden;
border: 3px solid var(--blue-800);
background: var(--blue-100);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
margin-bottom: 10px
}
.photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.photo-placeholder { font-size: 36px; font-weight: 800; color: var(--blue-800); letter-spacing: -1px; }
.verified-badge {
background: var(--brand-tint);
color: var(--blue-900);
font-size: 10px;
font-weight: 800;
padding: 8px 33px;
border-radius: var(--radius);
border: 1px solid var(--blue-600);
margin-top: 5px;
display: inline-block;
}
.hero-info { flex: 1; }
.hero-info h1 { font-size: 24px; font-weight: 800; color: var(--blue-900); margin-bottom: 8px; letter-spacing: -0.5px; }
.hero-info .title-line { font-size: 13.5px; color: var(--blue-800); font-weight: 600; margin-bottom: 8px; }
.hero-info .edu-line { font-size: 12.5px; color: var(--blue-600); margin-bottom: 14px; }
.rating-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.stars { color: var(--star-amber); font-size: 16px; letter-spacing: 1px; }
.rating-num { font-weight: 800; color: var(--blue-900); font-size: 15px; }
.rating-count { font-size: 12px; color: var(--blue-600); }
.spec-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.spec-tag {
font-size: 11.5px;
font-weight: 600;
background: var(--blue-50);
color: var(--blue-800);
border: 1px solid var(--blue-400);
padding: 3px 10px;
border-radius: var(--radius);
}
.avail-pill {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--status-green-bg);
border: 1px solid var(--status-green-border);
border-radius: var(--radius);
padding: 8px 14px;
font-size: 12.5px;
color: #065f46;
font-weight: 600;
}
.avail-pill .avail-dot { width: 8px; height: 8px; background: var(--status-green); border-radius: 50%; flex-shrink: 0; }
/* ───────────────────────────────────────
7. TWO COLUMN LAYOUT
─────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.content-col {}
.sidebar-col {
display: flex;
flex-direction: column;
gap: 16px; /* keeps booking panel and the new blogs card evenly spaced */
}
/* ───────────────────────────────────────
8. BOOKING PANEL (right sidebar form)
─────────────────────────────────────── */
.booking-panel {
background: var(--white);
border: var(--border-thick);
border-radius: var(--radius);
overflow: hidden;
position: sticky;
top: 4px;
}
.bp-header { background: var(--blue-800); color: var(--white); padding: 16px 20px; text-align: center; }
.bp-header h2 { font-size: 15.5px; font-weight: 800;
color: var(--blue-100);
margin-bottom: 3px; }
.bp-header p { font-size: 11.5px; color: var(--blue-100); }
.bp-body { padding: 18px; }
.fee-display {
background: var(--blue-50);
border: var(--border-thin);
border-radius: var(--radius);
padding: 13px 16px;
text-align: center;
margin-bottom: 16px;
}
.fee-label { font-size: 11px; color: var(--blue-600); margin-bottom: 3px; }
.fee-amount { font-size: 28px; font-weight: 900; color: var(--blue-900); letter-spacing: -1px; }
.fee-note { font-size: 10.5px; color: var(--blue-600); margin-top: 3px; }
.session-label { font-size: 11.5px; font-weight: 700; color: var(--blue-800); margin-bottom: 8px; }
.session-types { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.stype {
border: var(--border-thin);
border-radius: var(--radius);
padding: 10px 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.15s;
}
.stype:hover { border-color: var(--blue-800); background: var(--blue-50); }
.stype.active { border: 1.5px solid var(--blue-800); background: var(--blue-50); }
.stype-left { display: flex; align-items: center; gap: 9px; }
.radio {
width: 16px; height: 16px;
border-radius: 50%; /* kept circular — standard radio-button convention */
border: 2px solid var(--blue-400);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.15s;
}
.stype.active .radio { border-color: var(--blue-800); }
.stype.active .radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-800); display: block; }
.stype-name { font-size: 12.5px; font-weight: 700; color: var(--blue-900); }
.stype-desc { font-size: 10.5px; color: var(--blue-600); margin-top: 1px; }
.stype-price { font-size: 13px; font-weight: 800; color: var(--blue-900); white-space: nowrap; }
.form-field { margin-bottom: 11px; }
.form-field label { display: block; font-size: 11px; font-weight: 700; color: var(--blue-800); margin-bottom: 4px; letter-spacing: 0.02em; }
.form-field input, .form-field select, .form-field textarea {
width: 100%;
padding: 9px 12px;
border: var(--border-thin);
border-radius: var(--radius);
font-size: 13px;
color: var(--black);
font-family: inherit;
background: var(--blue-50);
transition: border-color 0.15s;
appearance: none;
-webkit-appearance: none;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
outline: none;
border-color: var(--blue-800);
background: var(--white);
}
.form-field textarea { resize: vertical; min-height: 68px; }
.notice-box {
background: var(--blue-50);
border: var(--border-thin);
border-radius: var(--radius);
padding: 10px 12px;
font-size: 11.5px;
color: var(--blue-800);
display: flex;
align-items: flex-start;
gap: 7px;
margin-bottom: 12px;
line-height: 1.55;
}
.notice-icon { flex-shrink: 0; font-size: 14px; margin-top: 1px; }
.submit-btn {
width: 100%;
background: var(--blue-800);
color: var(--white);
border: var(--border-thick);
padding: 14px;
border-radius: var(--radius);
font-size: 14.5px;
font-weight: 800;
cursor: pointer;
letter-spacing: 0.2px;
transition: background 0.15s;
line-height: 1.3;
}
.submit-btn:hover { background: var(--blue-700); }
.wa-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
background: var(--whatsapp-green); /* left as WhatsApp's own brand color for recognizability */
color: var(--white);
border: none;
padding: 11px;
border-radius: var(--radius);
font-size: 13px;
font-weight: 700;
cursor: pointer;
margin-top: 8px;
text-decoration: none;
transition: background 0.15s;
}
.wa-btn:hover { background:#25d366;
color:#ffffff;
}
.reply-promise {
background: var(--blue-50);
border: var(--border-thin);
border-radius: var(--radius);
padding: 8px 12px;
font-size: 11.5px;
color: var(--blue-800);
text-align: center;
margin-top: 10px;
font-weight: 600;
}
.privacy-note { font-size: 10.5px; color: var(--blue-600); text-align: center; margin-top: 10px; line-height: 1.55; }
/* ───────────────────────────────────────
9. BLOGS & VIDEOS SECTION (NEW)
Sits under the booking panel, in the bottom-right free
space of the sidebar column. Add/remove
blocks to add more blogs or videos — see HTML comments.
─────────────────────────────────────── */
.blogs-panel {
background: var(--white);
border: var(--border-thin);
border-radius: var(--radius);
}
.bv-header {
background: var(--blue-900);
color: var(--white);
padding: 14px 18px;
}
.bv-header h2 { font-size: 14.5px; font-weight: 800; margin-bottom: 2px; }
.bv-header p { font-size: 11px; color: var(--blue-100); }
.bv-tabs {
display: flex;
border-bottom: var(--border-thin);
}
.bv-tab {
flex: 1;
text-align: center;
padding: 10px 8px;
font-size: 11.5px;
font-weight: 700;
color: var(--blue-600);
cursor: pointer;
background: var(--blue-50);
border: none;
border-right: 1px solid var(--blue-100);
font-family: inherit;
}
.bv-tab:last-child { border-right: none; }
.bv-tab.active { background: var(--white); color: var(--blue-800); border-bottom: 2px solid var(--blue-800); }
.bv-list { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
/* ───────────────────────────────────────
10. CONTENT CARDS (left column)
─────────────────────────────────────── */
.card {
background: var(--white);
border: var(--border-thin);
border-radius: var(--radius);
padding: 22px 24px;
margin-bottom: 14px;
}
.card h2 { font-size: 16px; font-weight: 800; color: var(--blue-900); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--blue-100); }
.steps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.step { display: flex; align-items: flex-start; gap: 11px; background: var(--blue-50); border: var(--border-thin); border-radius: var(--radius); padding: 12px; }
.step-num {
width: 30px; height: 30px;
border-radius: 50%; /* kept circular — numbered "step" bullets read best as circles */
background: var(--blue-800);
color: var(--white);
font-size: 13px;
font-weight: 800;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.step-title { font-size: 12.5px; font-weight: 700; color: var(--blue-900); margin-bottom: 2px; }
.step-desc { font-size: 11px; color: var(--blue-600); line-height: 1.5; }
.about-text { font-size: 13.5px; color: var(--blue-600); line-height: 1.8; }
.about-text strong { color: var(--blue-900); }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.spec-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--black); padding: 6px 0; }
.spec-check { color: var(--blue-800); font-weight: 700; font-size: 14px; flex-shrink: 0; }
.fee-cards { display: flex; flex-direction: column; gap: 10px; }
.fee-row { background: var(--blue-50); border: var(--border-thin); border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; }
.fee-row-name { font-size: 14px; font-weight: 700; color: var(--blue-900); margin-bottom: 2px; }
.fee-row-desc { font-size: 11.5px; color: var(--blue-600); }
.fee-row-price { font-size: 20px; font-weight: 900; color: var(--blue-900); text-align: right; flex-shrink: 0; }
.fee-row-unit { font-size: 11px; color: var(--blue-600); display: block; text-align: right; font-weight: 400; }
.fee-info-box {
background: var(--warning-bg);
border: 1px solid var(--warning-border);
border-radius: var(--radius);
padding: 11px 14px;
font-size: 12px;
color: var(--warning-text);
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 10px;
line-height: 1.6;
}
.schedule-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.schedule-table th { background: var(--blue-900); color: var(--white); padding: 9px 14px; text-align: left; font-weight: 700; font-size: 12px; }
.schedule-table td { padding: 9px 14px; border-bottom: 1px solid var(--blue-100); color: var(--black); }
.schedule-table tr:last-child td { border-bottom: none; }
.schedule-table tr:nth-child(even) td { background: var(--blue-50); }
.avail-dot-green { display: inline-block; width: 8px; height: 8px; background: var(--status-green); border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.time-chip { background: var(--blue-100); color: var(--blue-900); font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: var(--radius); border: 1px solid var(--blue-400); }
.edu-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.edu-item { display: flex; align-items: flex-start; gap: 11px; background: var(--blue-50); border: var(--border-thin); border-radius: var(--radius); padding: 11px 14px; }
.edu-icon { font-size: 18px; flex-shrink: 0; }
.edu-degree { font-size: 13px; font-weight: 700; color: var(--blue-900); }
.edu-school { font-size: 11.5px; color: var(--blue-600); margin-top: 2px; }
.review-item { padding: 14px 0; border-bottom: 1px solid var(--blue-100); }
.review-item:last-child { border-bottom: none; }
.review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rev-avatar {
width: 36px; height: 36px;
border-radius: 50%; /* kept circular — standard avatar convention */
display: flex; align-items: center; justify-content: center;
font-size: 13px;
font-weight: 800;
flex-shrink: 0;
background: var(--blue-100);
color: var(--blue-800);
}
.rev-name { font-size: 13px; font-weight: 700; color: var(--blue-900); }
.rev-date { font-size: 11px; color: var(--blue-400); }
.rev-stars { color: var(--star-amber); font-size: 13px; margin-left: auto; }
.rev-badge { font-size: 10px; background: var(--blue-100); color: var(--blue-800); padding: 1px 7px; border-radius: var(--radius); border: 1px solid var(--blue-400); margin-left: 6px; }
.rev-text { font-size: 13px; color: var(--blue-600); font-style: italic; line-height: 1.65; }
.sat-bar-wrap { margin-bottom: 66px; }
.sat-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.sat-label { font-size: 12px; color: var(--black); width: 160px; flex-shrink: 0; }
.sat-track { flex: 1; height: 7px; background: var(--blue-100); border-radius: var(--radius); overflow: hidden; }
.sat-fill { height: 100%; background: var(--blue-800); border-radius: var(--radius); }
.sat-pct { font-size: 12px; font-weight: 700; color: var(--blue-900); width: 38px; text-align: right; }
.faq-item { padding: 13px 0; border-bottom: 1px solid var(--blue-100); }
.faq-item:last-child { border-bottom: none; }
.faq-q { font-size: 13.5px; font-weight: 700; color: var(--blue-900); margin-bottom: 6px; display: flex; gap: 9px; align-items: flex-start; }
.faq-q::before {
content: 'Q';
background: var(--blue-800);
color: var(--white);
width: 20px; height: 20px;
border-radius: var(--radius);
font-size: 11px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.faq-a { font-size: 12.5px; color: var(--blue-600); line-height: 1.7; padding-left: 29px; }
/* ───────────────────────────────────────
/* ───────────────────────────────────────
12. MOBILE STICKY CTA
─────────────────────────────────────── */
.mobile-cta {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--blue-900);
padding: 12px 16px;
z-index: 100;
gap: 10px;
border-top: var(--border-thick);
}
.mob-wa { flex: 1; background: var(--whatsapp-green); color: var(--white); border: none; padding: 13px; border-radius: var(--radius); font-size: 14px; font-weight: 800; cursor: pointer; text-align: center; }
.mob-bk { flex: 1; background: var(--blue-800); color: var(--white); border: var(--border-thin); padding: 13px; border-radius: var(--radius); font-size: 14px; font-weight: 800; cursor: pointer; text-align: center; }
/* ───────────────────────────────────────
13. FOOTER
─────────────────────────────────────── */
.site-footer { background: var(--blue-900); color: var(--blue-400); text-align: center; padding: 22px 20px; font-size: 12px; margin-top: 8px; }
.site-footer a { color: var(--brand-tint); }
/* ───────────────────────────────────────
14. RESPONSIVE MEDIA QUERIES
─────────────────────────────────────── */
@media (max-width: 720px) {
.two-col { grid-template-columns: 1fr; }
.sidebar-col { order: -1; }
.booking-panel { position: static; }
.hero-inner { flex-direction: column; align-items: center; text-align: center; }
.avail-pill { justify-content: center; }
.spec-tags { justify-content: center; }
.rating-row { justify-content: center; }
.steps-grid { grid-template-columns: 1fr; }
.spec-grid { grid-template-columns: 1fr; }
.mobile-cta { display: flex; }
body { padding-bottom: 70px; }
.trust-bar { gap: 12px; }
.hero-card { padding: 20px 16px; }
.card { padding: 18px 16px; }
}
@media (max-width: 480px) {
.fee-row { flex-direction: column; gap: 8px; }
.fee-row-price { text-align: left; }
.two-col { gap: 12px; }
}/* End custom CSS */