/* ══════════════════════════════════════
AZ Pregnancy Help — Landing Page CSS
Fonts: Marcellus, Microsoft Tai Le, Modern No. 20
Container: 1560px
══════════════════════════════════════
TABLE OF CONTENTS
─────────────────
1. Font Faces
2. CSS Variables
3. Reset & Base
4. Layout / Container
5. Header
5a. Logo
5b. Top Header Bar
5c. Bottom Nav Bar
6. Hero Banner
6a. Banner Content
6b. CTA Buttons (Banner)
7. Podcast Section (Main)
7a. Birth Mother Intro
7b. Category Cards (3-col)
7c. Explore Episodes
7d. Episode Cards
7e. Episode Card Actions
8. Responsive
8a. ≤1400px — Large Desktop
8b. ≤1100px — Tablet Landscape
8c. ≤900px — Tablet Portrait
8d. ≤767px — Small Tablet / Large Mobile
8e. ≤680px — Episode Cards Mobile
8f. ≤600px — Mobile
══════════════════════════════════════ */
/* ══════════════════════════════════════
1. FONT FACES
══════════════════════════════════════ */
@font-face {
font-family: 'Marcellus';
src: url('../fonts/Marcellus-Regular.woff2') format('woff2'),
url('../fonts/Marcellus-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* playfair-display-regular - latin */
@font-face {
font-display: swap;
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
src: url('../fonts/playfair-display-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-500 - latin */
@font-face {
font-display: swap;
font-family: 'Playfair Display';
font-style: normal;
font-weight: 500;
src: url('../fonts/playfair-display-v40-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-600 - latin */
@font-face {
font-display: swap;
font-family: 'Playfair Display';
font-style: normal;
font-weight: 600;
src: url('../fonts/playfair-display-v40-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-700 - latin */
@font-face {
font-display: swap;
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
src: url('../fonts/playfair-display-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-regular - latin */
@font-face {
font-display: swap;
font-family: 'Noto Serif';
font-style: normal;
font-weight: 400;
src: url('../fonts/noto-serif-v33-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-500 - latin */
@font-face {
font-display: swap;
font-family: 'Noto Serif';
font-style: normal;
font-weight: 500;
src: url('../fonts/noto-serif-v33-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-600 - latin */
@font-face {
font-display: swap;
font-family: 'Noto Serif';
font-style: normal;
font-weight: 600;
src: url('../fonts/noto-serif-v33-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-700 - latin */
@font-face {
font-display: swap;
font-family: 'Noto Serif';
font-style: normal;
font-weight: 700;
src: url('../fonts/noto-serif-v33-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ══════════════════════════════════════
2. CSS VARIABLES
══════════════════════════════════════ */
:root {
/* Fonts */
--font-primary: 'Marcellus', serif;
--font-playfair: 'Playfair Display', serif;
--font-noto-serif: 'Noto Serif', serif;
/* Colors */
--color-navy: #2b3060;
--color-navy-dark: #1c2650;
--color-navy-hover: #3a4a8a;
--color-text-dark: #000000;
--color-text-muted: #4e4e5e;
--color-text-purple: #5a5282;
--color-orange-btn: #E86F47;
--color-blue-btn: #1E0D37;
--color-nav-bg: #82A6BF;
--color-top-header-bg: rgba(255, 255, 255, 0.49);
--color-white: #fff;
--color-link-blue: #3F65A9;
/* Layout */
--container-max: 1560px;
--header-radius: 19px;
}
/* ══════════════════════════════════════
3. RESET & BASE
══════════════════════════════════════ */
html,
body {
overflow-x: hidden;
max-width: 100vw;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-primary) !important;
}
/* ══════════════════════════════════════
4. LAYOUT / CONTAINER
══════════════════════════════════════ */
.az-container {
max-width: var(--container-max);
margin: 0 auto;
padding-left: 30px;
padding-right: 30px;
width: 100%;
}
/* ══════════════════════════════════════
5. HEADER
══════════════════════════════════════ */
.site-header {
position: relative;
z-index: 100;
padding-top: 50px;
}
.header-wrapper {
position: relative;
}
.header-top-row {
position: relative;
}
/* ── 5a. Logo ── */
.logo-wrapper {
position: absolute;
left: 0;
top: -40px;
z-index: 20;
}
.logo-wrapper a {
display: block;
}
.logo-wrapper img {
width: 300px;
height: 280px;
object-fit: contain;
display: block;
}
/* ── 5b. Top Header Bar ── */
.top-header {
background: var(--color-top-header-bg);
border-radius: var(--header-radius);
height: 100px;
display: flex;
align-items: center;
padding: 60px 30px;
}
.top-header-content {
width: 100%;
padding-left: 180px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 15px;
}
.phone-row {
display: flex;
align-items: baseline;
gap: 60px;
/* font-size: clamp(20px, 2.2vw, 31px); */
font-size: clamp(18px, 1.8vw, 28px);
font-family: var(--font-primary);
font-weight: normal;
color: var(--color-link-blue);
margin-bottom: 10px;
}
.phone-row a {
font-weight: normal !important;
}
.phone-left {
display: flex;
align-items: baseline;
gap: 50px;
}
.phone-left .label {
color: var(--color-text-dark);
}
.phone-left .number {
text-decoration: none;
}
.phone-left .call-text {
font-size: clamp(17px, 1.2vw, 20px);
}
.phone-right {
display: flex;
align-items: baseline;
gap: 20px;
}
.phone-right a {
text-decoration: none;
}
.location-row {
color: var(--color-text-dark);
/* font-size: clamp(24px, 1.8vw, 29px); */
font-size: clamp(20px, 1.6vw, 26px);
font-family: var(--font-primary);
letter-spacing: 0.3px;
}
/* ── 5c. Bottom Nav Bar ── */
.bottom-header {
background: var(--color-nav-bg);
border-radius: var(--header-radius);
margin-top: 8px;
padding: 10px;
display: flex;
align-items: center;
justify-content: end;
}
.nav-menu {
list-style: none;
display: flex;
align-items: center;
gap: 30px;
margin: 0;
padding: 0;
}
.nav-menu > li {
flex: 1;
text-align: center;
position: relative;
}
.nav-menu li a {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: var(--color-white);
font-family: var(--font-primary);
font-size: clamp(19px, 1.6vw, 25px);
font-weight: normal;
text-transform: uppercase;
padding: 15px 8px;
transition: color 0.2s, background 0.2s;
border-radius: 10px;
white-space: nowrap;
}
.nav-menu > li > a:hover {
color: var(--color-navy-hover);
background: rgba(255, 255, 255, 0.22);
}
/* CSS-only chevron arrows for parent items (top-level) */
.nav-menu > li.menu-item-has-children > a::after {
content: "";
display: inline-block;
width: 12px;
height: 8px;
margin-left: 6px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
transition: transform 0.3s ease;
flex-shrink: 0;
}
/* CSS-only side-chevron for nested parent items */
.sub-menu > li.menu-item-has-children > a::after {
content: "";
display: inline-block;
width: 8px;
height: 12px;
margin-left: auto;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
transition: transform 0.3s ease;
flex-shrink: 0;
}
/* Rotate top-level arrow on hover */
.menu-item-has-children:hover > a::after {
transform: rotate(180deg);
}
/* Rotate side arrow on hover for nested */
.sub-menu > .menu-item-has-children:hover > a::after {
transform: rotate(0);
}
/* ── Dropdown sub-menus (desktop) ── */
.sub-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
list-style: none;
background: var(--color-white);
min-width: 280px;
padding: 10px 0;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
z-index: 100;
}
.menu-item-has-children:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.sub-menu li {
text-align: left;
position: relative;
}
.sub-menu li a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
color: var(--color-text-dark);
font-size: 16px;
text-transform: none;
letter-spacing: 0;
padding: 10px 22px;
border-radius: 0;
white-space: normal;
}
.sub-menu li a:hover {
background: rgba(130, 166, 191, 0.15);
color: var(--color-nav-bg);
}
/* Deep (3rd-level) sub-menu — opens to the right */
.sub-menu .sub-menu {
top: 0;
left: 100%;
transform: translateX(10px) translateY(0);
margin-left: 4px;
}
.sub-menu .menu-item-has-children:hover > .sub-menu {
transform: translateX(0) translateY(0);
}
/* ── Hamburger (CSS-only with checkbox hack) ── */
.nav-toggle-checkbox {
display: none;
}
.nav-toggle {
display: none;
cursor: pointer;
padding: 8px;
margin-left: auto;
}
.hamburger-bar {
display: block;
width: 28px;
height: 3px;
background: var(--color-white);
border-radius: 2px;
margin: 5px 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle-checkbox:checked ~ .nav-toggle .hamburger-bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.nav-toggle-checkbox:checked ~ .nav-toggle .hamburger-bar:nth-child(2) {
opacity: 0;
}
.nav-toggle-checkbox:checked ~ .nav-toggle .hamburger-bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* ══════════════════════════════════════
HEADER — RESPONSIVE
══════════════════════════════════════ */
/* ── 1024px – 1100px: tight desktop — reduce sizes further ── */
@media (min-width: 1024px) and (max-width: 1100px) {
.logo-wrapper img {
width: 200px;
height: 190px;
}
.top-header {
height: 90px;
padding: 50px 24px;
}
.top-header-content {
padding-left: 120px;
gap: 10px;
}
.phone-row {
gap: 20px;
font-size: 18px;
margin-bottom: 6px;
}
.phone-left {
gap: 20px;
}
.phone-left .label,
.phone-left .number,
.phone-right a {
font-size: 17px;
}
.location-row {
font-size: 17px;
}
.bottom-header {
padding: 8px;
}
.nav-menu {
gap: 12px;
padding-left: 140px;
}
.nav-menu > li > a {
font-size: 14px;
letter-spacing: 0.5px;
padding: 12px 6px;
}
.nav-menu > li.menu-item-has-children > a::after {
width: 10px;
height: 6px;
margin-left: 4px;
}
}
@media (min-width: 1024px) and (max-width: 1400px) {
.logo-wrapper img {
width: 240px;
height: 230px;
}
.top-header-content {
padding-left: 150px;
}
.nav-menu {
padding-left: 170px;
}
.phone-row {
gap: 30px;
}
.phone-left {
gap: 30px;
}
.nav-menu > li > a {
font-size: 18px;
letter-spacing: 1px;
}
}
@media (max-width: 1023px) {
.site-header {
padding-top: 20px;
}
.header-top-row {
display: flex;
align-items: center;
gap: 20px;
}
.logo-wrapper {
position: relative;
left: auto;
top: auto;
flex-shrink: 0;
}
.logo-wrapper img {
width: 140px;
height: 140px;
}
.top-header {
flex: 1;
height: auto;
min-height: auto;
padding: 20px 24px;
border-radius: 16px;
}
.top-header-content {
padding-left: 0;
align-items: flex-start;
gap: 10px;
}
.phone-row {
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-bottom: 0;
font-size: 20px;
}
.phone-left {
gap: 8px;
}
.phone-left .number,
.phone-right a {
font-size: 20px;
}
.phone-left .label {
font-size: 18px;
}
.location-row {
font-size: 16px;
text-align: left;
}
/* Nav bar with hamburger */
.bottom-header {
margin-top: 10px;
padding: 8px 16px;
justify-content: flex-end;
position: relative;
}
.nav-toggle {
display: block;
}
.nav-menu {
display: none;
flex-direction: column;
align-items: stretch;
gap: 4px;
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: var(--color-nav-bg);
border-radius: 16px;
padding: 14px;
z-index: 50;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
max-height: 80vh;
overflow-y: auto;
}
.nav-toggle-checkbox:checked ~ .nav-menu {
display: flex;
}
.nav-menu > li {
flex: unset;
text-align: left;
width: 100%;
position: relative;
}
.nav-menu > li > a {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
font-size: 17px;
letter-spacing: 0.8px;
padding: 12px 16px;
border-radius: 8px;
}
/* Force all chevrons to white on mobile, regardless of nesting */
.nav-menu .menu-item-has-children > a::after {
background-image: url("data:image/svg+xml;utf8,") !important;
width: 12px !important;
height: 8px !important;
margin-left: auto !important;
transition: transform 0.3s ease !important;
}
/* Rotate chevron when submenu is open */
.nav-menu .menu-item-has-children.is-open-mobile > a::after {
transform: rotate(180deg) !important;
}
/* Reset ALL sub-menus on mobile — collapsed by default */
.nav-menu .sub-menu,
.nav-menu .sub-menu .sub-menu {
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
background: rgba(255, 255, 255, 0.08);
box-shadow: none;
padding: 0;
margin: 0;
min-width: 0;
border-radius: 8px;
max-height: 0;
overflow: hidden;
display: block;
width: 100%;
list-style: none;
transition: max-height 0.35s ease, padding 0.35s ease, margin 0.35s ease;
}
/* Open submenu when parent has is-open-mobile class */
.nav-menu .menu-item-has-children.is-open-mobile > .sub-menu {
max-height: 2000px;
padding: 6px 0;
margin: 4px 0 8px;
}
.nav-menu .sub-menu li {
width: 100%;
text-align: left;
position: relative;
}
.nav-menu .sub-menu li a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
color: var(--color-white);
font-size: 15px;
padding: 10px 16px 10px 28px;
text-transform: none;
letter-spacing: 0.4px;
white-space: normal;
border-radius: 6px;
}
.nav-menu .sub-menu li a:hover {
background: rgba(255, 255, 255, 0.15);
color: var(--color-white);
}
/* Deep sub-menu: darker bg + more indent */
.nav-menu .sub-menu .sub-menu {
background: rgba(0, 0, 0, 0.12);
}
.nav-menu .menu-item-has-children.is-open-mobile > .sub-menu .sub-menu {
margin: 4px 0;
}
.nav-menu .sub-menu .sub-menu li a {
padding-left: 44px;
font-size: 14px;
}
}
@media (max-width: 900px) {
.header-top-row {
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
}
.logo-wrapper img {
width: 130px;
height: 130px;
}
.top-header {
width: 100%;
padding: 18px 20px;
}
.top-header-content {
align-items: center;
}
.phone-row {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px;
}
.phone-left {
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.phone-right {
justify-content: center;
}
.location-row {
text-align: center;
}
.here-for-you{
background-position: 50%;
}
}
@media (max-width: 600px) {
.site-header {
padding-top: 14px;
}
.az-container {
padding-left: 16px;
padding-right: 16px;
}
.logo-wrapper img {
width: 110px;
height: 110px;
}
.top-header {
padding: 16px;
border-radius: 14px;
}
.phone-row {
font-size: 18px;
}
.phone-left .label {
font-size: 16px;
}
.phone-left .number,
.phone-right a {
font-size: 17px;
}
.location-row {
font-size: 14px;
}
.bottom-header {
border-radius: 14px;
padding: 6px 14px;
}
.nav-menu > li > a {
font-size: 15px;
padding: 10px 14px;
}
}
/* ── ≤900px: stack logo above top-header ── */
@media (max-width: 900px) {
.header-top-row {
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
}
.logo-wrapper img {
width: 130px;
height: 130px;
}
.top-header {
width: 100%;
padding: 18px 20px;
}
.top-header-content {
align-items: center;
}
.phone-row {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px;
}
.phone-left {
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.phone-right {
justify-content: center;
}
.location-row {
text-align: center;
}
}
/* ── ≤600px: small mobile tweaks ── */
@media (max-width: 600px) {
.site-header {
padding-top: 14px;
}
.az-container {
padding-left: 16px;
padding-right: 16px;
}
.logo-wrapper img {
width: 110px;
height: 110px;
}
.top-header {
padding: 16px;
border-radius: 14px;
}
.phone-row {
font-size: 18px;
}
.phone-left .label {
font-size: 16px;
}
.phone-left .number,
.phone-right a {
font-size: 17px;
}
.location-row {
font-size: 14px;
}
.bottom-header {
border-radius: 14px;
padding: 6px 14px;
}
.nav-menu > li > a {
font-size: 15px;
padding: 10px 14px;
}
}
/* ══════════════════════════════════════
6. HERO BANNER
══════════════════════════════════════ */
.hero-banner {
position: relative;
width: 100%;
min-height: 88vh;
overflow: hidden;
margin-top: -255px;
padding-top: 220px;
background-position: right center;
background-repeat: no-repeat;
background-size: cover;
}
/* ── 6a. Banner Content ── */
.banner-content {
position: relative;
z-index: 5;
padding: 120px 30px;
}
.banner-inner {
/* max-width: 620px; */
}
.podcast-icon {
margin-bottom: 25px;
padding: 0 45px;
}
.podcast-icon img {
width: 135px;
height: auto;
display: block;
}
.banner-heading {
font-family: var(--font-playfair) !important;
font-size: clamp(48px, 5vw, 79px);
font-weight: 400;
color: var(--color-white);
line-height: 1.1;
margin-bottom: 15px;
padding: 0;
}
.banner-subtext {
font-family: var(--font-primary) !important;
font-size: clamp(24px, 2.2vw, 33px);
color: var(--color-white);
line-height: 1.55;
margin-bottom: 40px;
}
/* ── 6b. CTA Buttons (Banner) ── */
/* Legacy .btn-podcast (commented-out markup) */
.banner-ctas {
display: flex;
gap: 18px;
}
.btn-podcast {
display: inline-flex;
align-items: center;
gap: 20px;
padding: 20px 60px 20px 20px;
border-radius: 9px;
font-family: var(--font-primary);
font-size: clamp(24px, 2.4vw, 38px);
font-weight: normal;
color: var(--color-white);
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
white-space: nowrap;
border: none;
cursor: pointer;
}
.btn-podcast svg {
width: 20px;
height: 30px;
}
.btn-podcast img {
height: 30px;
}
.btn-podcast-blue {
background: var(--color-blue-btn);
}
.btn-podcast-orange {
background: var(--color-orange-btn);
}
/* Active .az-cta-btn group */
.az-cta-btn-group {
display: flex;
gap: clamp(12px, 3vw, 24px);
}
.az-cta-btn {
display: inline-flex;
align-items: center;
gap: clamp(8px, 2vw, 14px);
padding: clamp(10px, 1.2vw, 12px)
clamp(24px, 4vw, 40px)
clamp(10px, 1.2vw, 12px)
clamp(14px, 2vw, 20px);
border: none;
border-radius: 8px;
font-family: var(--font-primary);
font-size: clamp(28px, 3vw, 30px);
font-weight: normal;
color: #fff;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
white-space: nowrap;
}
.az-cta-btn:hover {
transform: translateY(-2px);
filter: brightness(1.1);
}
.az-cta-btn:active {
transform: translateY(0);
filter: brightness(0.95);
}
.az-cta-btn--podcast {
background: var(--color-blue-btn);
box-shadow: 0 4px 14px rgba(45, 36, 80, 0.5);
}
.az-cta-btn--transcript {
background: var(--color-orange-btn);
box-shadow: 0 4px 14px rgba(232, 117, 58, 0.4);
}
/* CTA icon (CSS mask technique) */
.az-cta-btn__icon {
display: inline-block;
width: 30px;
height: 30px;
flex-shrink: 0;
background-color: #fff;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.icon-play {
-webkit-mask-image: url('../images/banner-play.svg');
mask-image: url('../images/banner-play.svg');
}
.icon-book {
-webkit-mask-image: url('../images/banner-read.svg');
mask-image: url('../images/banner-read.svg');
width: 40px;
}
/* ══════════════════════════════════════
7. PODCAST SECTION (MAIN)
══════════════════════════════════════ */
.podcast-section {
background: url('../images/podcast-bg.webp') center center / cover no-repeat !important;
width: 100%;
/* padding: 80px 30px; */
}
.birth-podcast-inner
{
padding-top: 110px;
}
/* ── 7a. Birth Mother Intro ── */
.az-content h2 {
font-family: var(--font-playfair) !important;
font-size: clamp(28px, 3vw, 46px);
color: var(--color-text-dark);
line-height: 1.1;
text-align: center;
}
.az-content p {
font-family: var(--font-primary) !important;
font-size: clamp(20px, 2vw, 33px);
font-weight: normal;
color: var(--color-text-dark);
line-height: 1.55;
text-align: center;
}
/* ── 7b. Category Cards (3-col) ── */
.category-cards {
padding: 40px 0 90px;
}
.category-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin: 0 auto;
}
.category-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 35px 20px;
background: #FEF7F7;
border-radius: 9px;
}
.category-card h3 {
font-family: var(--font-playfair) !important;
font-size: clamp(28px, 2.2vw, 46px);
color: var(--color-text-dark);
text-align: center;
margin-top: 10px;
}
.category-card p {
font-family: var(--font-primary) !important;
font-size: clamp(18px, 1.8vw, 23px);
color: var(--color-text-dark);
line-height: 1.5;
width: 55%;
text-align: center;
}
/* ── 7c. Explore Episodes ── */
.explore-episodes-intro {
margin-bottom: 40px;
}
/* ── 7d. Episode Cards ── */
.ep-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin: 0 auto;
}
.ep-card {
background: var(--color-white);
border-radius: 14px;
overflow: hidden;
box-shadow: 8px 10px 7px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
.ep-card:hover {
transform: translateY(-6px);
box-shadow: var(--ep-card-hover-shadow);
}
.ep-card-top {
display: flex;
gap: 16px;
padding: 20px 20px 0 20px;
}
.ep-card-thumb {
border-radius: 4px;
overflow: hidden;
flex-shrink: 0;
width: 200px;
}
.ep-card-thumb img {
width: 100%;
object-fit: cover;
display: block;
}
.ep-card-info {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 2px;
flex: 1;
min-width: 0;
}
.ep-card-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: #FBDED5;
border-radius: 2px;
padding: 3px 10px;
font-family: var(--font-primary);
font-size: clamp(14px, 1.2vw, 17px);
font-weight: 700;
color: #1E4838;
letter-spacing: 0.5px;
width: fit-content;
}
.ep-card-badge .sep {
color: var(--border-top);
font-weight: 400;
}
.ep-card-title {
font-family: var(--font-playfair);
font-size: clamp(16px, 2vw, 21px);
color: #1E4838;
line-height: 1.2;
width: 85%;
}
.ep-card-subtitle {
font-family: var(--font-noto-serif);
font-size: clamp(14px, 1.2vw, 16px);
font-weight: 700;
color: #4C91AE;
width: 51%;
}
.ep-card-body {
padding: 16px 20px 0 20px;
flex: 1;
}
.ep-card-description {
font-family: var(--font-primary) !important;
font-size: clamp(14px, 1.2vw, 17px);
color: #1E4838;
width: 65%;
}
.ep-card-meta {
display: flex;
align-items: center;
gap: 20px;
padding: 14px 20px 0 20px;
}
.meta-item {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-primary) !important;
font-size: clamp(11px, 0.8vw, 12px);
color: var(--color-text-dark);
font-weight: 600;
}
.meta-item img {
width: 16px;
height: 16px;
opacity: 0.55;
}
/* ── 7e. Episode Card Actions ── */
.ep-card-actions {
display: flex;
gap: 10px;
padding: 18px 20px 20px 20px;
margin-top: auto;
}
.ep-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 30px 10px 5px;
border-radius: 6px;
font-size: clamp(13px, 1vw, 15px);
font-weight: normal;
font-family: var(--font-primary) !important;
border: none;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
font-family: inherit;
}
.ep-btn img {
width: 16px;
height: 16px;
}
.ep-btn-listen {
background: var(--color-blue-btn);
color: var(--color-white);
}
.ep-btn-read {
background: var(--color-orange-btn);
color: var(--color-white);
}
.ep-button-wrapper {
display: flex;
justify-content: center;
margin-bottom: 55px;
}
.ep-button{
background: var(--color-white);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 50px;
padding: 20px 35px;
border-radius: 25px;
font-family: var(--font-primary) !important;
font-size: clamp(21px, 2.5vw, 33px);
font-weight: normal;
color: var(--color-text-dark);
border: none;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
}
/* ── Listening / Transcript CTA ── */
.ep-listening-wrapper {
background: #FDE4D6;
border-radius: 20px;
padding: 50px 40px 55px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
max-width: 75%;
margin: 0 auto;
}
.ep-book-icon {
margin-bottom: 10px;
}
.ep-book-icon img {
display: block;
width: 70px;
height: 70px;
object-fit: contain;
}
.ep-listen-content h3 {
font-family: var(--font-playfair) !important;
font-size: clamp(38px, 1.8vw, 46px);
font-weight: 400;
color: var(--color-text-dark);
line-height: 1.2;
}
.ep-listen-content p {
font-family: var(--font-primary) !important;
font-size: clamp(24px, 1.8vw, 28px);
color: var(--color-text-dark);
line-height: 1.5;
margin: 0;
}
.ep-transcript-btn, .ep-listening-wrapper a {
display: inline-block;
background: var(--color-orange-btn);
color: var(--color-white);
font-family: var(--font-primary);
font-size: clamp(20px, 1.8vw, 38px);
font-weight: 400;
text-decoration: none;
padding: 20px 44px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: transform 0.2s ease, filter 0.2s ease;
margin-top: 15px;
}
.ep-transcript-btn:hover, .ep-listening-wrapper a:hover {
transform: translateY(-2px);
filter: brightness(1.08);
}
.ep-transcript-btn:active, .ep-listening-wrapper a:active {
transform: translateY(0);
filter: brightness(0.95);
}
/* Responsive */
@media (max-width: 680px) {
.ep-listening-wrapper {
max-width: 100%;
padding: 36px 20px 40px;
border-radius: 16px;
}
.ep-book-icon img {
width: 50px;
height: 50px;
}
.ep-transcript-btn, .ep-listening-wrapper a {
padding: 12px 32px;
width: 100%;
text-align: center;
}
}
/* ── Topic Cards (2×2 Grid) ── */
.topic-cards {
padding: 40px 0 60px;
}
.topic-cards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 63px;
max-width: 75%;
margin: 0 auto;
}
.topic-card {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
background: #FEF7F7;
border-radius: 16px;
padding: 30px 27px;
}
.topic-card-icon {
flex-shrink: 0;
width: 115px;
}
.topic-card-icon img {
display: block;
/* width: 90px;
height: 90px; */
object-fit: contain;
}
.topic-card-text {
width: 65%;
}
.topic-card-text h3 {
font-family: var(--font-playfair) !important;
font-size: clamp(35px, 2.4vw, 50px);
font-weight: 400;
color: var(--color-text-dark);
line-height: 1.1;
margin: 0 0 6px;
}
.topic-card-text p {
font-family: var(--font-primary) !important;
font-size: clamp(20px, 1.4vw, 25px);
color: var(--color-text-dark);
line-height: 1.4;
margin: 0;
}
/* Responsive */
@media (max-width: 900px) {
.topic-cards-grid {
max-width: 100%;
}
}
@media (max-width: 768px) {
.topic-cards-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.topic-card {
padding: 24px 20px;
gap: 16px;
}
.topic-card-icon {
width: 80px;
}
.topic-card-icon img {
width: 70px;
height: 70px;
}
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
.ep-listening-wrapper {
max-width: 100%;
padding: 36px 20px 40px;
border-radius: 16px;
}
.topic-cards-grid {
grid-template-columns: 1fr;
gap: 20px;
max-width: 100%;
}
.topic-card{
min-height: 210px;
}
}
@media (min-width: 1025px) and (max-width: 1144px) {
.topic-cards-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* ── Podcast Community Section ── */
.podcast-community {
padding: 60px 0;
}
.pc-wrapper {
display: flex;
align-items: center;
}
.pc-content {
flex: 1;
min-width: 0;
}
.pc-phone {
flex-shrink: 0;
width: 42%;
display: flex;
justify-content: center;
align-items: center;
}
.pc-phone img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* Badge */
.pc-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--color-orange-btn);
border-radius: 8px;
padding: 10px 32px;
margin-bottom: 20px;
}
.pc-badge img {
/* width: 30px;
height: 30px; */
object-fit: contain;
}
.pc-badge span {
font-family: var(--font-noto-serif) !important;
font-size: clamp(18px, 2vw, 25px);
font-weight: 700;
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 1px;
}
/* Heading */
.pc-heading, .pc-content h2 {
font-family: var(--font-playfair) !important;
font-size: clamp(42px, 4.8vw, 64px);
font-weight: 400;
color: var(--color-text-dark);
line-height: 1.1;
margin: 0 0 12px;
}
.pc-subheading, .pc-content h3 {
font-family: var(--font-primary) !important;
font-size: clamp(24px, 2.6vw, 39px);
font-weight: 400;
color: var(--color-orange-btn);
line-height: 1.2;
}
.pc-description, .pc-content p {
font-family: var(--font-primary) !important;
font-size: clamp(15px, 1.4vw, 20px);
color: #707070;
line-height: 1.3;
margin: 0 0 28px;
}
/* Pills row — 100% Free / No Cost / No Fees */
.pc-badges-row {
display: flex;
gap: 14px;
margin-bottom: 40px;
}
.pc-pill {
display: inline-flex;
align-items: center;
gap: 10px;
background: #F2CCBF;
border-radius: 30px;
padding: 10px 24px;
}
.pc-pill img {
width: 32px;
height: 32px;
object-fit: contain;
}
.pc-pill span {
font-family: var(--font-primary) !important;
font-size: clamp(16px, 1.8vw, 26px);
font-weight: 400;
color: #1E0D37;
}
/* Follow bar */
.pc-follow-bar {
display: flex;
align-items: center;
gap: 14px;
background: var(--color-orange-btn);
border-radius: 10px;
padding: 16px 24px;
max-width: 520px;
}
.pc-follow-bar > img {
width: 50px;
height: 50px;
object-fit: contain;
flex-shrink: 0;
}
.pc-follow-text {
display: flex;
flex-direction: column;
gap: 10px;
}
.pc-follow-text strong {
font-family: var(--font-noto-serif) !important;
font-size: clamp(18px, 1.8vw, 28px);
font-weight: 700;
color: var(--color-white);
}
.pc-follow-text span {
font-family: var(--font-primary) !important;
font-size: clamp(13px, 1.4vw, 17px);
color: var(--color-white);
opacity: 0.9;
}
/* ── Responsive ── */
@media (max-width: 900px) {
.pc-wrapper {
flex-direction: column;
text-align: center;
}
.pc-content {
display: flex;
flex-direction: column;
align-items: center;
}
.pc-phone {
width: 60%;
}
.pc-badges-row {
justify-content: center;
}
.pc-follow-bar {
max-width: 100%;
justify-content: center;
}
}
@media (max-width: 680px) {
.podcast-community {
padding: 40px 0;
}
.pc-phone {
width: 80%;
}
.pc-badges-row {
flex-direction: column;
align-items: center;
gap: 10px;
}
.pc-pill {
width: 100%;
justify-content: center;
}
.pc-follow-bar {
/* flex-direction: column;
text-align: center; */
padding: 20px;
}
.pc-follow-text{
text-align: left;
}
}
/* ── Listen On Your Favourite Platform ── */
.listen-platforms {
background: var(--color-orange-btn);
padding: 60px 0 75px;
}
/* Header */
.lp-header {
text-align: center;
margin-bottom: 50px;
}
.lp-heading-row {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-bottom: 6px;
}
.lp-heading-row img {
/* width: 46px;
height: 46px; */
object-fit: contain;
}
.lp-header h2 {
font-family: var(--font-playfair) !important;
font-size: clamp(40px, 4.5vw, 52px);
font-weight: 400;
color: #1E0D37;
line-height: 1.2;
margin: 0;
}
.lp-header p {
font-family: var(--font-primary) !important;
font-size: clamp(18px, 1.8vw, 30px);
color: #DA400D;
margin: 0;
text-align: center;
}
/* Inner container with lighter orange */
.lp-inner {
background: #F2AB94;
border-radius: 42px;
padding: 50px 85px;
}
/* 4-column platform grid */
.lp-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin-bottom: 14px;
}
.lp-card {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
min-height: auto;
background: #fff;
border-radius: 10px;
padding: 0;
overflow: hidden;
box-shadow: 9px 10px 7px rgba(0, 0, 0, 0.1);
}
/* .lp-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
} */
.lp-card img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 11px;
}
/* YouTube full-width bar */
.lp-youtube {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
background: var(--color-white);
border-radius: 10px;
margin-top: 40px;
padding: 18px 30px;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-youtube:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.lp-youtube img {
width: 64px;
height: 64px;
object-fit: contain;
flex-shrink: 0;
}
.lp-youtube span {
font-family: var(--font-primary) !important;
font-size: clamp(23px, 3.0vw, 40px);
font-weight: 400;
color: var(--color-text-dark);
}
/* ── Responsive ── */
@media (max-width: 900px) {
.lp-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 680px) {
.listen-platforms {
padding: 36px 0 40px;
}
.lp-inner {
padding: 16px;
border-radius: 12px;
}
.lp-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-bottom: 10px;
}
.lp-card {
padding: 12px 10px;
/* min-height: 52px; */
border-radius: 8px;
}
.lp-card img {
/* max-height: 32px; */
}
.lp-heading-row img {
width: 32px;
height: 32px;
}
.lp-youtube {
padding: 14px 16px;
gap: 12px;
border-radius: 8px;
}
.lp-youtube img {
width: 34px;
height: 24px;
}
}
/* ══════════════════════════════════════
Here For You Section
══════════════════════════════════════ */
.here-for-you {
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
padding: 60px 0 70px;
}
/* ── Top Content ── */
.hfy-top {
max-width: 55%;
margin-top: 120px;
margin-bottom: 30px;
padding: 0px 30px;
}
/* .hfy-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--color-orange-btn);
border-radius: 32px;
padding: 15px 30px;
margin-bottom: 20px;
}
.hfy-badge img {
width: 28px;
height: 28px;
object-fit: contain;
}
.hfy-badge span {
font-family: var(--font-noto-serif) !important;
font-size: clamp(18px, 1.8vw, 30px);
font-weight: 400;
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 1px;
} */
.hfy-badge {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--color-orange-btn);
border-radius: 32px;
padding: 15px 30px 15px 80px;
margin-bottom: 20px;
}
.hfy-badge img {
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
width: 70px;
height: 70px;
object-fit: contain;
}
.hfy-badge span {
font-family: var(--font-primary) !important;
font-size: clamp(18px, 1.8vw, 30px);
font-weight: 400;
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 1px;
}
/* ── Responsive ── */
@media (max-width: 680px) {
.hfy-badge {
padding: 12px 22px 12px 60px;
}
.hfy-badge img {
width: 52px;
height: 52px;
left: -6px;
}
}
.hfy-top h2, .hfy-top h3 {
font-family: var(--font-playfair) !important;
font-size: clamp(38px, 4.2vw, 64px);
font-weight: 400;
color: var(--color-text-dark);
line-height: 1.1;
}
.hfy-top h3 {
margin: 0 0 10px;
color: var(--color-orange-btn);
}
.hfy-tagline, .hfy-top p {
font-family: var(--font-primary) !important;
font-size: clamp(15px, 1.4vw, 20px);
color: #707070;
margin: 0 0 24px;
}
/* Schedule pill */
.hfy-schedule {
display: inline-flex;
align-items: center;
gap: 26px;
background: #fadad1;
border-radius: 16px;
padding: 25px 60px 25px 50px;
}
.hfy-schedule img {
/* width: 36px;
height: 36px; */
object-fit: contain;
flex-shrink: 0;
}
.hfy-schedule p, .hfy-schedule span p {
display: block;
font-family: var(--font-noto-serif) !important;
font-size: clamp(18px, 1.8vw, 27px);
font-weight: 700;
color: #707070;
padding-bottom: 15px;
}
.hfy-schedule span {
color: var(--color-orange-btn);
}
/* .hfy-schedule em {
color: var(--color-orange-btn);
font-style: normal;
font-weight: 700;
} */
/* ── Support Label ── */
.hfy-support-label {
display: flex;
align-items: center;
gap: 10px;
margin: 30px 0 20px;
padding: 0px 30px;
}
.hfy-support-label img {
/* width: 28px;
height: 28px; */
object-fit: contain;
}
.hfy-support-label h3 {
font-family: var(--font-playfair) !important;
font-size: clamp(26px, 2.8vw, 41px);
font-weight: 400;
color: var(--color-text-dark);
margin: 0;
}
/* ── 4 Support Cards ── */
.hfy-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
margin-top: 50px;
margin-bottom: 40px;
padding: 0px 30px;
}
.hfy-card {
background: var(--color-white);
border-radius: 14px;
padding: 28px 20px;
text-align: center;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
transition: transform 0.2s ease;
}
.hfy-card:hover {
transform: translateY(-4px);
}
.hfy-card-icon {
/* width: 72px;
height: 72px; */
margin: 0 auto 14px;
/* background: #FAE0D6; */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.hfy-card-icon img {
/* width: 40px;
height: 40px; */
object-fit: contain;
}
.hfy-card h4 {
font-family: var(--font-noto-serif) !important;
font-size: clamp(18px, 1.8vw, 27px);
font-weight: 700;
color: var(--color-text-dark);
margin: 0 0 6px;
line-height: 1.2;
}
.hfy-card p {
font-family: var(--font-primary) !important;
font-size: clamp(16px, 1.6vw, 25px);
color: var(--color-text-dark);
line-height: 1.4;
margin: 0;
}
/* ── About Us Bar ── */
.hfy-about {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
background: #f8d3ca;
border-radius: 35px;
padding: 55px 50px;
margin-bottom: 24px;
}
.hfy-about-left {
flex: 1;
}
.hfy-about-badge {
display: inline-block;
background: var(--color-orange-btn);
color: var(--color-white);
font-family: var(--font-noto-serif) !important;
font-size: clamp(16px, 1.6vw, 27px);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 15px 35px 15px 25px;
border-radius: 25px;
margin-bottom: 10px;
}
.hfy-about-left p {
font-family: var(--font-primary) !important;
font-size: clamp(17px, 1.7vw, 28px);
color: var(--color-text-dark);
line-height: 1.4;
margin: 0;
}
.hfy-about-left p span {
color: var(--color-orange-btn);
}
.hfy-about-cta {
display: flex;
align-items: center;
gap: 30px;
background: var(--color-orange-btn);
border-radius: 12px;
padding: 16px 24px;
text-decoration: none;
flex-shrink: 0;
transition: filter 0.2s ease;
}
.hfy-about-cta:hover {
filter: brightness(1.08);
}
.hfy-about-cta > img {
/* width: 25px;
height: 25px; */
object-fit: contain;
}
.hfy-about-cta div:first-of-type span {
display: block;
font-family: var(--font-noto-serif) !important;
font-size: clamp(16px, 1.6vw, 28px);
color: var(--color-white);
}
.hfy-about-cta div:first-of-type strong {
display: block;
font-family: var(--font-noto-serif) !important;
font-size: clamp(28px, 3vw, 48px);
font-weight: 700;
color: var(--color-white);
line-height: 1.2;
}
.hfy-about-247 {
background: #F9DBD1;
color: var(--color-orange-btn);
font-family: var(--font-noto-serif) !important;
font-size: clamp(20px, 2vw, 33px);
font-weight: 700;
padding: 15px 20px;
border-radius: 37px;
line-height: 1;
}
/* ── You're Not Alone Bar ── */
.hfy-alone {
position: relative;
display: flex;
align-items: center;
gap: 30px;
width: 100%;
background: #FEF0ED;
border-radius: 35px;
padding: 10px 40px;
box-sizing: border-box;
box-shadow: 8px 10px 7px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.hfy-alone-img {
flex-shrink: 0;
width: 400px;
}
.hfy-alone-img img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
.hfy-alone-text {
flex: 1;
position: relative;
z-index: 2;
}
.hfy-alone-text h3 {
font-family: var(--font-playfair) !important;
font-size: clamp(38px, 4vw, 64px);
font-weight: 500;
color: var(--color-text-dark);
margin: 0 0 6px;
}
.hfy-alone-text p {
font-family: var(--font-noto-serif) !important;
font-size: clamp(20px, 2vw, 33px);
font-weight: 700;
color: #707070;
line-height: 1.2;
padding-bottom: 20px;
}
p.alone-orange-text {
font-family: var(--font-noto-serif);
font-size: clamp(20px, 2vw, 32px);
color: var(--color-orange-btn);
font-weight: 700;
width: 80%;
}
.hfy-alone-text p.hfy-alone-highlight {
color: var(--color-orange-btn);
}
/* Decorative leaf on right */
.hfy-alone-leaf {
position: absolute;
right: 0;
bottom: 0;
width: 400px;
pointer-events: none;
z-index: 1;
}
.hfy-alone-leaf img {
display: block;
width: 100%;
height: auto;
}
/* ── Responsive ── */
@media (max-width: 900px) {
.hfy-alone {
padding: 24px 30px;
gap: 20px;
}
.hfy-alone-img {
width: 170px;
}
.hfy-alone-leaf {
width: 150px;
opacity: 0.7;
}
}
@media (max-width: 680px) {
.hfy-alone {
flex-direction: column;
text-align: center;
padding: 24px 20px;
gap: 16px;
}
.hfy-alone-img {
width: 160px;
}
.hfy-alone-text{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
p.alone-orange-text {
text-align: center;
}
.hfy-alone-leaf {
width: 100px;
opacity: 0.5;
}
}
/* ══════════════════════════════════════
8. RESPONSIVE
══════════════════════════════════════ */
/* ── 8a. ≤1400px — Large Desktop ── */
/* ── 8b. ≤1100px — Tablet Landscape ── */
@media (max-width: 1100px) {
/* .logo-wrapper img {
width: 125px;
height: 125px;
}
.top-header {
height: 90px;
padding-right: 25px;
}
.top-header-content {
padding-left: 140px;
}
.nav-menu {
padding: 0 20px 0 150px;
}
.phone-left .number,
.phone-right a {
font-size: 20px;
}
.phone-left .label,
.phone-left .call-text {
font-size: 16px;
}
.phone-left {
margin-right: 35px;
gap: 10px;
}
.location-row {
font-size: 15px;
}
.nav-menu li a {
font-size: 13px;
letter-spacing: 1px;
} */
.hero-banner {
margin-top: -240px;
padding-top: 200px;
}
}
/* ── 8c. ≤1024px — Episode Cards Tablet ── */
@media (max-width: 1023px) {
.ep-cards-grid {
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
}
/* ── 8d. ≤900px — Tablet Portrait ── */
@media (max-width: 900px) {
/* .logo-wrapper {
position: relative;
left: auto;
top: auto;
display: flex;
justify-content: center;
margin-bottom: -25px;
z-index: 20;
}
.logo-wrapper img {
width: 115px;
height: 115px;
}
.top-header {
height: auto;
padding: 35px 25px 20px;
}
.top-header-content {
padding-left: 0;
align-items: center;
}
.phone-row {
flex-direction: column;
align-items: center;
gap: 6px;
}
.phone-left {
margin-right: 0;
justify-content: center;
}
.phone-right {
justify-content: center;
}
.location-row {
text-align: center;
}
.bottom-header {
height: auto;
min-height: 48px;
}
.nav-menu {
padding: 6px 15px;
flex-wrap: wrap;
justify-content: center;
}
.nav-menu li {
flex: unset;
}
.nav-menu li a {
font-size: 13px;
padding: 12px;
letter-spacing: 0.8px;
} */
.hero-banner {
min-height: auto;
margin-top: -365px;
padding-top: 370px;
background-position: 75%;
}
.hero-banner .bg-overlay {
background: linear-gradient(
to bottom,
rgba(225, 222, 218, 0.93) 0%,
rgba(230, 228, 224, 0.78) 50%,
rgba(240, 238, 234, 0.4) 100%
);
}
.banner-content {
padding-top: 30px;
padding-bottom: 60px;
}
.banner-inner {
max-width: 100%;
}
.podcast-icon img {
width: 60px;
}
.birth-podcast-inner{
padding-top: 50px;
}
}
/* ── 8e. ≤767px — Small Tablet / Large Mobile ── */
@media (max-width: 767px) {
.hero-banner::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 1;
}
.hero-banner .az-container {
position: relative;
z-index: 2;
}
.banner-ctas {
gap: 12px;
flex-direction: column;
}
.btn-podcast {
width: 60%;
}
.az-cta-btn-group {
flex-direction: column;
align-items: start;
}
.category-cards-grid {
grid-template-columns: 1fr;
}
}
/* ── 8f. ≤680px — Episode Cards Mobile ── */
@media (max-width: 768px) {
.ep-cards-grid {
grid-template-columns: 1fr;
gap: 20px;
max-width: 100%;
}
/* Stack the thumbnail on top of the info */
.ep-card-top {
flex-direction: column;
gap: 12px;
padding: 0;
}
.ep-card-thumb {
width: 100%;
min-width: unset;
height: auto;
border-radius: 14px 14px 0 0;
}
.ep-card-thumb img {
width: 100%;
height: 200px;
object-fit: cover;
}
.ep-card-info {
padding: 0 16px;
gap: 4px;
}
.ep-card-title {
font-size: clamp(20px, 5vw, 26px);
width: 100%;
line-height: 1;
}
.ep-card-subtitle {
width: 100%;
}
.ep-card-body {
padding: 10px 16px 0;
}
.ep-card-meta {
padding: 10px 16px 0;
}
.ep-card-actions {
padding: 14px 16px 16px;
flex-direction: column;
gap: 8px;
}
.ep-btn {
padding: 12px 16px;
justify-content: center;
font-size: 14px;
}
.page-header h1 {
font-size: 1.7rem;
}
.explore-episodes-intro {
margin-bottom: 24px;
}
.podcast-section {
padding: 40px 0px 0px;
}
.category-card p{
width: auto;
}
.le-grid{
grid-template-columns: 1fr;
gap: 20px;
}
}
@media (min-width: 768px) and (max-width: 886px) {
.ep-cards-grid {
grid-template-columns: repeat(1, 1fr);
gap: 20px;
max-width: 100%;
}
.ep-card-title {
font-size: clamp(20px, 5vw, 26px);
}
.category-card p{
width: auto;
}
}
@media (min-width: 887px) and (max-width: 952px) {
.ep-card-title {
font-size: clamp(18px, 5vw, 20px);
}
.ep-card-subtitle {
width: 80%;
}
.category-card p{
width: auto;
}
}
@media (min-width: 952px) and (max-width: 1025px) {
.category-card p{
width: auto;
}
}
@media (min-width: 1025px) and (max-width: 1218px) {
.ep-cards-grid{
grid-template-columns: repeat(2, 1fr);
}
.category-card p{
width: auto;
}
}
/* @media (min-width: 1218px) and (max-width: 1514px) {
.ep-cards-grid{
grid-template-columns: repeat(2, 1fr);
}
} */
@media (min-width: 1025px) and (max-width: 1318px) {
.ep-btn{
padding: 10px;
}
.category-card p{
width: auto;
}
}
@media (min-width: 1318px) and (max-width: 1504px) {
.category-card p{
width: auto;
}
}
/* ── 8g. ≤600px — Mobile ── */
@media (max-width: 600px) {
.az-container {
padding-left: 20px;
padding-right: 20px;
}
.site-header {
padding-top: 6px;
}
/* .top-header {
border-radius: 14px;
padding: 28px 14px 16px;
}
.logo-wrapper img {
width: 95px;
height: 95px;
}
.phone-left {
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.phone-left .label {
font-size: 14px;
}
.phone-left .number {
font-size: 17px;
}
.phone-left .call-text {
font-size: 13px;
}
.phone-right a {
font-size: 16px;
}
.phone-right .sep {
font-size: 16px;
}
.location-row {
font-size: 13px;
}
.bottom-header {
border-radius: 14px;
margin-top: 6px;
}
.nav-menu {
padding: 4px 8px;
}
.nav-menu li a {
font-size: 11px;
padding: 10px 7px;
letter-spacing: 0.4px;
} */
.hero-banner {
margin-top: -320px;
padding-top: 320px;
background-position: 75% 50%;
}
.banner-content {
padding-top: 20px;
padding-bottom: 50px;
}
.banner-subtext {
margin-bottom: 30px;
}
.podcast-icon img {
width: 50px;
margin-bottom: 18px;
}
.btn-podcast {
width: 60%;
}
.banner-ctas {
gap: 12px;
flex-direction: column;
}
.hero-banner::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 1;
}
.hero-banner .az-container {
position: relative;
z-index: 2;
}
.birth-podcast-inner{
padding-top: 10px;
}
}
/* ══════════════════════════════════════
Here For You Section — Responsive
══════════════════════════════════════ */
/* ── Tablet (≤900px) ── */
@media (max-width: 900px) {
.here-for-you {
padding: 40px 0 50px;
background-position: 50%;
}
.hfy-top {
max-width: 100%;
margin-top: 40px;
padding: 0;
}
.hfy-top h2 br {
display: none;
}
.hfy-schedule {
padding: 20px 30px;
gap: 18px;
margin: 0 0 10px;
}
.hfy-support-label {
padding: 0;
margin: 30px 0 10px;
}
.hfy-cards {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 0;
margin-top: 30px;
margin-bottom: 30px;
}
.hfy-about {
flex-direction: column;
align-items: stretch;
text-align: left;
padding: 30px 24px;
gap: 20px;
}
.hfy-about-cta {
justify-content: center;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
}
/* ── Mobile (≤680px) ── */
@media (max-width: 680px) {
.here-for-you {
padding: 30px 0 40px;
}
.lp-heading-row {
flex-direction: column;
}
/* Top heading area */
.hfy-top {
margin-top: 20px;
margin-bottom: 20px;
}
.hfy-top h2 {
font-size: clamp(28px, 7vw, 38px);
}
.hfy-tagline, .hfy-top p {
font-size: 14px;
}
/* Schedule pill */
.hfy-schedule {
width: 100%;
padding: 18px 20px;
gap: 14px;
border-radius: 12px;
}
.hfy-schedule img {
width: 36px;
height: 36px;
}
.hfy-schedule p,
.hfy-schedule span p {
font-size: 15px;
padding-bottom: 6px;
}
/* Support label */
.hfy-support-label {
gap: 8px;
margin: 24px 0 8px;
}
.hfy-support-label img {
width: 24px;
height: 24px;
}
.hfy-support-label h3 {
font-size: 24px;
}
/* 4 support cards → single column with horizontal layout */
.hfy-cards {
grid-template-columns: 1fr;
gap: 12px;
margin-top: 20px;
margin-bottom: 30px;
}
.hfy-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: left;
gap: 16px;
padding: 18px 20px;
}
.hfy-card-icon {
margin: 0;
flex-shrink: 0;
width: 56px;
height: 56px;
}
.hfy-card-icon img {
width: 56px;
height: 56px;
}
.hfy-card h4 {
font-size: 17px;
margin-bottom: 2px;
}
.hfy-card p {
font-size: 14px;
}
/* About Us bar */
.hfy-about {
padding: 24px 18px;
border-radius: 14px;
}
.hfy-about-badge {
font-size: 14px;
padding: 8px 20px 8px 16px;
}
.hfy-about-left p {
font-size: 14px;
}
.hfy-about-cta {
flex-direction: row;
align-items: center;
/* gap: 12px; */
padding: 14px 16px;
border-radius: 10px;
}
.hfy-about-cta > img {
width: 28px;
height: 28px;
}
.hfy-about-cta div:first-of-type span {
font-size: 13px;
}
.hfy-about-cta div:first-of-type strong {
font-size: 22px;
}
.hfy-about-247 {
font-size: 16px;
padding: 10px 14px;
border-radius: 24px;
}
.pc-badge img{
width: 28px;
height: 28px;
}
}
/* ── Small Mobile (≤400px) ── */
@media (max-width: 400px) {
.hfy-about-cta {
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.hfy-about-247 {
margin: 0 auto;
}
}
@media (min-width: 681px) and (max-width: 809px) {
.lp-heading-row {
flex-direction: column;
}
.le-grid {
grid-template-columns: 1fr;
}
}
/* ══════════════════════════════════════
Want to Learn More Section
══════════════════════════════════════ */
.want-learn {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
/* padding: 70px 0; */
}
.wl-wrapper {
display: flex;
align-items: center;
gap: 60px;
background: #FEF1EE;
padding: 30px 60px 30px 50px;
border-radius: 35px;
margin-top: -10px;
}
/* Left: laptop image */
.wl-image {
flex-shrink: 0;
width: 45%;
}
.wl-image img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* Right: content */
.wl-content {
flex: 1;
min-width: 0;
}
.wl-badge {
display: inline-block;
background: var(--color-orange-btn);
border-radius: 25px;
padding: 12px 30px;
margin-bottom: 22px;
}
.wl-badge span {
font-family: var(--font-noto-serif) !important;
font-size: clamp(16px, 1.6vw, 24px);
font-weight: 700;
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 1.2px;
}
.wl-content h2 {
font-family: var(--font-playfair) !important;
font-size: clamp(38px, 4.0vw, 59px);
font-weight: 500;
color: var(--color-text-dark);
line-height: 1.1;
margin: 0 0 18px;
}
.wl-content p {
font-family: var(--font-primary) !important;
font-size: clamp(18px, 1.8vw, 28px);
font-weight: normal;
color: #707070;
line-height: 1.5;
margin: 0 0 30px;
width: 80%;
}
.wl-content p span, .wl-content p span a {
color: var(--color-orange-btn);
font-weight: 700;
}
.wl-btn {
display: inline-block;
background: var(--color-orange-btn);
color: var(--color-white);
font-family: var(--font-primary) !important;
font-size: clamp(20px, 2vw, 32px);
font-weight: 400;
text-decoration: none;
padding: 16px 50px;
border-radius: 10px;
border: none;
cursor: pointer;
transition: transform 0.2s ease, filter 0.2s ease;
}
.wl-btn:hover {
transform: translateY(-2px);
filter: brightness(1.08);
}
.wl-btn:active {
transform: translateY(0);
filter: brightness(0.95);
}
/* ── Responsive ── */
@media (max-width: 900px) {
.wl-wrapper {
flex-direction: column;
text-align: center;
gap: 30px;
}
.wl-image {
width: 70%;
max-width: 500px;
}
.wl-content {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
}
@media (max-width: 680px) {
.want-learn {
padding: 40px 0;
}
.wl-image {
width: 100%;
}
.wl-content{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.wl-content h2 {
font-size: clamp(28px, 7vw, 38px);
}
.wl-content p {
font-size: 16px;
}
.wl-badge {
padding: 8px 22px;
}
.wl-badge span {
font-size: 14px;
}
.wl-btn {
padding: 14px 36px;
font-size: 18px;
}
}
.pc-badge-transparent{
background: transparent;
border: 1px solid #E86F47;
border-radius: 30px;
}
.pc-badge-transparent span{
color: #E86F47;
font-weight: normal;
}
.pc-badge-orange{
border: 1px solid #E86F47;
border-radius: 48px;
padding: 30px 85px 30px 60px;
}
.pc-badge-orange span{
font-weight: normal;
}
/* ══════════════════════════════════════
Latest Episodes Section
══════════════════════════════════════ */
/* .latest-episodes {
background: #FEE9E0;
padding: 70px 0 80px;
} */
.latest-episodes {
padding: 50px 0;
}
.pc-badge-blog{
border-radius: 37px;
}
.le-inner {
background: #FDECEA;
border-radius: 35px;
padding: 72px 48px 67px 48px;
}
/* ── Top Header ── */
.le-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-bottom: 50px;
}
.le-header-left {
flex: 1;
padding: 0px 15px;
}
.le-header-left h2 {
font-family: var(--font-playfair) !important;
font-size: clamp(38px, 3.1vw, 60px);
font-weight: 400;
color: var(--color-text-dark);
line-height: 1.1;
margin: 20px 0 14px;
}
.le-header-left h2 span {
color: var(--color-orange-btn);
}
.le-header-left > p {
font-family: var(--font-primary) !important;
font-size: clamp(16px, 1.6vw, 22px);
color: #707070;
margin: 0;
font-weight: 400;
}
/* Explore the Podcast card */
.le-header-right {
display: flex;
align-items: center;
gap: 20px;
background: #FCE5E0;
border-radius: 20px;
padding: 24px 32px;
max-width: 520px;
flex-shrink: 0;
}
.le-explore-icon {
flex-shrink: 0;
width: 125px;
height: 125px;
background: #FEE9E0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.le-explore-icon img {
/* width: 48px;
height: 48px; */
object-fit: contain;
}
.le-explore-text h3 {
font-family: var(--font-noto-serif) !important;
font-size: clamp(18px, 1.8vw, 25px);
font-weight: 700;
color: var(--color-text-dark);
margin: 0 0 6px;
}
.le-explore-text p {
font-family: var(--font-primary) !important;
font-size: clamp(16px, 1.4vw, 22px);
color: var(--color-text-dark);
line-height: 1.4;
margin: 0;
}
/* ── Episode Cards Grid ── */
.le-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-bottom: 50px;
}
.le-card {
background: var(--color-white);
border-radius: 16px;
padding: 18px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
}
/* Card thumbnail */
.le-thumb {
position: relative;
border-radius: 12px;
overflow: hidden;
margin-bottom: 18px;
}
.le-thumb img {
display: block;
width: 100%;
height: 240px;
object-fit: cover;
}
.le-thumb-badge {
position: absolute;
left: 14px;
bottom: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
background: #FBE7E0;
border-radius: 20px;
padding: 6px 14px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.le-thumb-badge img {
width: 18px;
height: 18px;
object-fit: contain;
}
.le-thumb-badge span {
font-family: var(--font-noto-serif) !important;
font-size: clamp(12px, 1vw, 14px);
font-weight: 700;
color: var(--color-text-dark);
letter-spacing: 0.5px;
}
/* Card title */
.le-card h3 {
font-family: var(--font-playfair) !important;
font-size: clamp(16px, 1.6vw, 21px);
font-weight: 700;
color: #1E4838;
line-height: 1.3;
margin: 0 0 14px;
text-align: center;
}
/* Card meta (author + date) */
.le-meta {
font-family: var(--font-primary);
font-size: clamp(13px, 1.1vw, 17px);
color: #1E4838;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0px 20px 14px;
border-bottom: 1px solid #F2D9CC;
margin-bottom: 14px;
}
.le-author {
}
.le-date {
display: inline-flex;
align-items: center;
gap: 6px;
}
.le-date img {
width: 16px;
height: 16px;
}
/* Tags pill */
.le-tags {
background: #FBE7E0;
border-radius: 17px;
padding: 15px 40px 15px 20px;
margin-bottom: 14px;
}
.le-tags p, .le-tags p a {
font-family: var(--font-primary) !important;
font-size: clamp(12px, 1.1vw, 17px);
font-weight: normal;
color: #1E4838;
line-height: 1.4;
margin: 0;
}
/* Excerpt */
.le-excerpt {
margin-bottom: 20px;
padding: 0 10px;
flex: 1;
}
.le-excerpt p {
font-family: var(--font-primary) !important;
font-size: clamp(13px, 1.2vw, 18px);
color: #1E4838;
line-height: 1.55;
margin: 0;
}
/* Actions: Listen Now + Read More */
.le-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 16px;
padding: 0 10px;
}
.le-listen-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-blue-btn);
color: var(--color-white);
font-family: var(--font-noto-serif) !important;
font-size: clamp(13px, 1.2vw, 15px);
font-weight: 500;
padding: 10px 22px;
border-radius: 17px;
text-decoration: none;
transition: filter 0.2s ease, transform 0.2s ease;
}
.le-listen-btn:hover {
filter: brightness(1.15);
transform: translateY(-1px);
}
.le-listen-btn img {
width: 20px;
height: 20px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.le-read-more {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-noto-serif) !important;
font-size: clamp(13px, 1.2vw, 15px);
font-weight: 700;
color: var(--color-orange-btn);
text-decoration: none;
transition: gap 0.2s ease;
}
.le-read-more:hover {
gap: 8px;
}
.le-read-more span {
font-size: 18px;
line-height: 1;
}
/* Waveform */
.le-waveform {
border-top: 1px solid #F2D9CC;
padding-top: 14px;
}
.le-waveform img {
display: block;
width: 100%;
/* height: 40px; */
object-fit: contain;
}
/* ── Pagination ── */
.le-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
}
.le-page-btn {
display: inline-flex;
align-items: baseline;
gap: 10px;
font-family: var(--font-noto-serif) !important;
font-size: clamp(18px, 1.8vw, 27px);
font-weight: 600;
padding: 30px 60px;
border-radius: 50px;
text-decoration: none;
transition: transform 0.2s ease, filter 0.2s ease;
}
.le-page-btn:hover {
transform: translateY(-2px);
filter: brightness(1.05);
}
.le-page-prev {
background: #FCD6C8;
color: var(--color-text-dark);
}
.le-page-next {
background: var(--color-orange-btn);
color: var(--color-white);
}
.le-page-btn span {
font-size: 1.2em;
line-height: 1;
}
.le-page-count {
font-family: var(--font-noto-serif) !important;
font-size: clamp(16px, 1.6vw, 22px);
color: var(--color-text-dark);
font-weight: 500;
}
/* ── Responsive ── */
@media (max-width: 1023px) {
.le-grid {
grid-template-columns: repeat(2, 1fr);
}
.le-header {
flex-direction: column;
align-items: flex-start;
}
.le-header-right {
max-width: 100%;
width: 100%;
}
}
@media (max-width: 680px) {
/* .latest-episodes {
padding: 40px 0 50px;
} */
.latest-episodes {
padding: 40px 0;
}
.le-inner {
padding: 40px 24px;
border-radius: 24px;
}
.le-header {
margin-bottom: 30px;
}
.le-header-left h2 br {
display: none;
}
.le-header-right {
padding: 18px 20px;
gap: 14px;
border-radius: 14px;
}
.le-explore-icon {
width: 60px;
height: 60px;
}
.le-explore-icon img {
width: 34px;
height: 34px;
}
.le-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 30px;
}
.le-thumb img {
/* height: 200px; */
}
.le-actions {
flex-wrap: wrap;
}
.le-pagination {
flex-wrap: wrap;
gap: 14px;
}
.le-page-btn {
padding: 12px 10px;
font-size: 15px;
}
.comm-badge {
padding: 15px 20px !important;
}
.le-page-prev,
.le-page-next {
flex: 1;
justify-content: center;
}
.le-page-count {
width: 100%;
text-align: center;
order: -1;
}
}
/* ══════════════════════════════════════
Our Partners & Sponsors Section
══════════════════════════════════════ */
.partners-sponsors {
background: #fff;
padding: 35px 0px 20px;
}
/* Header */
.ps-header {
text-align: center;
margin-bottom: 20px;
}
.ps-header h2 {
font-family: var(--font-playfair) !important;
font-size: clamp(40px, 4.8vw, 64px);
font-weight: 500;
color: var(--color-text-dark);
margin: 0 0 14px;
line-height: 1.1;
}
.ps-divider {
display: block;
width: 450px;
max-width: 60%;
height: 2px;
background: var(--color-orange-btn);
margin: 0 auto;
}
/* Logos row */
.ps-logos {
display: flex;
align-items: center;
justify-content: space-between;
/* gap: 40px; */
flex-wrap: wrap;
}
.ps-logo {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-width: 140px;
padding: 10px;
transition: filter 0.3s ease, transform 0.3s ease;
}
.ps-logo img {
display: block;
max-width: 100%;
height: auto;
object-fit: contain;
transition: filter 0.3s ease;
}
.ps-logo:hover img {
filter: grayscale(0%) opacity(1);
}
/* ── Responsive ── */
@media (max-width: 900px) {
.ps-logos {
gap: 24px;
}
.ps-logo {
flex: 0 0 calc(33.333% - 24px);
min-width: unset;
}
}
@media (max-width: 600px) {
.partners-sponsors {
padding: 40px 0;
}
.ps-header {
margin-bottom: 30px;
}
.ps-logos {
gap: 18px;
}
.ps-logo {
flex: 0 0 calc(50% - 18px);
}
.ps-logo img {
max-height: 50px;
}
}
/* ══════════════════════════════════════
Communities Across Arizona Section
══════════════════════════════════════ */
.communities {
background: #FEEFED;
padding: 80px 0;
}
/* ── Top: Heading + Image ── */
.comm-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
margin-bottom: 60px;
padding: 0 30px;
}
.comm-top-content {
flex: 1;
min-width: 0;
}
.comm-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--color-orange-btn);
border-radius: 30px;
padding: 15px 35px;
margin-bottom: 22px;
}
.comm-badge img {
width: 35px;
height: 35px;
object-fit: contain;
}
.comm-badge span {
font-family: var(--font-noto-serif) !important;
font-size: clamp(16px, 1.5vw, 25px);
font-weight: 700;
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 1px;
}
.comm-top-content h2 {
font-family: var(--font-playfair) !important;
font-size: clamp(40px, 4.5vw, 59px);
font-weight: 500;
color: var(--color-text-dark);
line-height: 1.2;
margin: 0 0 16px;
}
.comm-top-content h2 span {
color: var(--color-orange-btn);
}
.comm-top-content > p {
font-family: var(--font-primary) !important;
font-size: clamp(16px, 1.4vw, 22px);
font-weight: 400;
color: #707070;
margin: 0;
}
.comm-top-image {
flex-shrink: 0;
width: 38%;
max-width: 460px;
}
.comm-top-image img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* ── Bottom: We Serve Card ── */
.comm-serve {
background: #FCF1EE;
border-radius: 50px;
padding: 60px 50px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.comm-serve-header {
display: flex;
align-items: center;
gap: 22px;
margin-bottom: 40px;
}
.comm-serve-icon {
flex-shrink: 0;
width: 90px;
height: 90px;
background: #FBD9D0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.comm-serve-icon img {
width: 50px;
height: 50px;
object-fit: contain;
}
.comm-serve-heading h3 {
font-family: var(--font-playfair) !important;
font-size: clamp(34px, 3.8vw, 54px);
font-weight: 500;
color: var(--color-text-dark);
line-height: 1.2;
margin: 0 0 4px;
}
.comm-serve-heading h3 span {
color: var(--color-orange-btn);
}
.comm-serve-heading p {
font-family: var(--font-noto-serif) !important;
font-size: clamp(16px, 1.6vw, 22px);
font-weight: 400;
color: #707070;
margin: 0;
}
/* City pills */
.comm-cities {
list-style: none;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
}
.comm-cities li {
display: flex;
}
.comm-cities li a {
display: inline-flex;
align-items: center;
justify-content: start;
gap: 12px;
width: 100%;
background: var(--color-white);
border-radius: 40px;
padding: 14px 20px;
font-family: var(--font-noto-serif) !important;
font-size: clamp(17px, 1.7vw, 25px);
font-weight: 700;
color: #707070;
text-decoration: none;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
pointer-events: none;
}
.comm-cities li a::before {
content: "";
flex-shrink: 0;
width: 24px;
height: 24px;
background-image: url('../images/location-pin-orange.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.comm-cities li a:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
/* ── Responsive ── */
@media (max-width: 1100px) {
.comm-cities {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 900px) {
.comm-top {
flex-direction: column;
text-align: center;
gap: 30px;
}
.comm-top-image {
width: 70%;
max-width: 380px;
}
.comm-cities {
grid-template-columns: repeat(3, 1fr);
}
.comm-serve {
padding: 40px 30px;
border-radius: 30px;
}
}
@media (max-width: 600px) {
.communities {
padding: 50px 0;
}
.comm-top {
margin-bottom: 40px;
}
.comm-cities {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.comm-cities li a {
padding: 12px 14px;
font-size: 14px;
gap: 8px;
}
.comm-cities li a::before {
width: 18px;
height: 18px;
}
.comm-serve {
padding: 30px 18px;
border-radius: 24px;
}
.comm-serve-header {
flex-direction: column;
text-align: center;
gap: 14px;
margin-bottom: 28px;
}
.comm-serve-icon {
width: 56px;
height: 56px;
}
}
/* ══════════════════════════════════════
Footer Bottom CTA
══════════════════════════════════════ */
.footer-cta {
background: #1E0D37;
padding: 70px 0;
text-align: center;
}
.footer-cta h2 {
font-family: var(--font-playfair) !important;
font-size: clamp(38px, 4.5vw, 65px);
font-weight: 400;
color: var(--color-white);
line-height: 1.2;
margin: 0 0 40px;
}
.footer-cta a {
display: inline-block;
font-family: var(--font-noto-serif) !important;
font-size: clamp(20px, 2vw, 30px);
font-weight: 400;
padding: 16px 64px;
border-radius: 10px;
text-decoration: none;
transition: transform 0.2s ease, filter 0.2s ease;
margin: 0 25px;
}
.footer-cta a:hover {
transform: translateY(-3px);
filter: brightness(1.08);
}
.footer-cta a:first-of-type {
background: #435582;
color: var(--color-white);
}
.footer-cta a:last-of-type {
background: #F9AC92;
color: var(--color-text-dark);
}
/* ── Responsive ── */
@media (max-width: 680px) {
.footer-cta {
padding: 50px 0;
}
.footer-cta h2 {
margin-bottom: 30px;
}
.footer-cta a {
display: block;
width: 80%;
max-width: 320px;
padding: 14px 30px;
text-align: center;
margin: 0 auto 16px;
}
.footer-cta a:last-of-type {
margin-bottom: 0;
}
}
@media (min-width: 1023px) and (max-width: 1155px) {
.le-meta{
gap: 5px;
padding: 0px 0px 14px !important;
}
.le-listen-btn{
padding: 10px 14px !important;
}
}
@media (min-width: 1024px) and (max-width: 1100px) {
.logo-wrapper img {
width: 190px;
height: 250px;
}
}
@media (min-width: 1101px) and (max-width: 1161px) {
.logo-wrapper img {
width: 215px;
height: 270px;
}
.nav-menu{
gap: 20px;
}
}
@media (min-width: 1162px) and (max-width: 1400px) {
.logo-wrapper img {
width: 220px;
height: 280px !important;
}
.nav-menu{
gap: 20px;
}
}
@media (max-width: 768px) {
.le-grid{
grid-template-columns: repeat(1, 1fr);
}
.pc-badge-orange{
padding: 20px 40px 20px 30px;
}
}
@media (min-width: 769px) and (max-width: 810px) {
.le-meta{
padding: 0px 5px 14px;
}
}
.podcast-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
justify-content: center;
align-items: center;
}
.podcast-modal-content {
background: #fff;
padding: 20px;
border-radius: 10px;
width: 90%;
max-width: 600px;
position: relative;
}
.podcast-close {
position: absolute;
/* right: 15px;
top: 10px;
font-size: 22px; */
top: -50px;
right: -30px;
font-size: 100px;
color: red;
cursor: pointer;
}
@media (min-width: 1023px) and (max-width: 1025px) {
.ep-cards-grid{
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (min-width: 1026px) and (max-width: 1506px) {
.ep-card-title{
width: 100% !important;
}
}
.ep-card-subtitle{
display: none;
}
/* ══════════════════════════════════════
GET IN TOUCH & EXPLORE Section
══════════════════════════════════════ */
.git-section {
padding: 35px 0 50px;
}
/* ── Top Heading ── */
.git-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-bottom: 50px;
}
.git-top-content {
flex: 1;
min-width: 0;
}
.git-top-decor {
flex-shrink: 0;
width: 380px;
max-width: 30%;
}
.git-top-decor img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
.git-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--color-orange-btn);
border-radius: 40px;
padding: 15px 40px;
margin-bottom: 22px;
}
.git-badge img {
width: 35px;
height: 40px;
object-fit: contain;
}
.git-badge span {
font-family: var(--font-primary) !important;
font-size: clamp(22px, 2vw, 35px);
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 1px;
}
.git-top h2 {
font-family: var(--font-playfair) !important;
font-size: clamp(38px, 4.2vw, 67px);
font-weight: 400;
color: var(--color-text-dark);
line-height: 1.1;
margin: 0 0 16px;
}
.git-top h2 span {
color: var(--color-orange-btn);
}
.git-top p {
font-family: var(--font-noto-serif) !important;
font-size: clamp(15px, 1.4vw, 22px);
font-weight: 600;
color: #707070;
margin: 0;
}
/* ── 3-Column Grid ── */
.git-grid {
display: grid;
grid-template-columns: 1fr 1.3fr 1.1fr;
gap: 28px;
align-items: stretch;
}
.git-col {
display: flex;
flex-direction: column;
gap: 24px;
height: 100%;
}
.git-card {
background: var(--color-white);
border-radius: 24px;
padding: 28px 32px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
flex: 1;
}
/* ── Map Card ── */
.git-map-card {
padding: 18px 18px 24px;
}
.git-map {
position: relative;
border-radius: 16px;
overflow: hidden;
margin-bottom: 50px;
}
.git-map img {
display: block;
width: 100%;
object-fit: cover;
}
.git-office {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
padding: 0 8px;
}
.git-office-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.git-office-icon img {
display: block;
max-width: 100%;
height: auto;
object-fit: contain;
}
.git-office h3 {
font-family: var(--font-noto-serif) !important;
font-size: clamp(24px, 2.2vw, 29px);
font-weight: 700;
color: var(--color-text-dark);
margin: 0;
}
.git-map-card address {
font-style: normal;
padding: 0 8px;
}
.git-map-card address p {
font-family: var(--font-primary) !important;
font-size: clamp(16px, 1.6vw, 22px);
font-weight: 500;
color: #707070;
line-height: 1.6;
margin: 0;
}
/* ── Adoptive Parent CTA ── */
.git-parent-card {
text-align: center;
padding: 30px 24px;
}
.git-parent-icon {
margin: 0 auto 20px;
width: 300px;
}
.git-parent-icon img {
display: block;
width: 100%;
height: auto;
}
.git-parent-card h3 {
font-family: var(--font-noto-serif) !important;
font-size: clamp(26px, 2.6vw, 32px);
font-weight: 700;
color: var(--color-text-dark);
line-height: 1.2;
margin: 0 0 18px;
}
.git-learn-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-orange-btn);
color: var(--color-white);
font-family: var(--font-noto-serif) !important;
font-size: clamp(17px, 1.7vw, 24px);
font-weight: 700;
padding: 14px 40px;
border-radius: 30px;
text-decoration: none;
transition: filter 0.2s, transform 0.2s;
margin-bottom: 40px;
}
.git-learn-btn:hover {
filter: brightness(1.08);
transform: translateY(-2px);
}
.git-learn-btn span {
font-size: 1.2em;
line-height: 1;
}
.git-baf-logo img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
/* ── Card Header (Useful Links + Contact Us) ── */
.git-card-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
}
.git-card-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.git-card-icon img {
display: block;
max-width: 100%;
height: auto;
object-fit: contain;
}
.git-card-header h3 {
font-family: var(--font-playfair) !important;
font-size: clamp(30px, 2.8vw, 39px);
font-weight: 400;
color: var(--color-text-dark);
margin: 0;
}
/* ── Useful Links ── */
.git-links {
list-style: none;
padding: 0;
margin: 0;
}
.git-links li a {
display: flex;
align-items: center;
gap: 18px;
padding: 10px 0;
font-family: var(--font-primary) !important;
font-size: clamp(17px, 1.5vw, 25px);
font-weight: normal;
color: var(--color-text-dark);
text-decoration: none;
transition: color 0.2s;
}
.git-links li a::before {
content: "";
flex-shrink: 0;
width: 60px;
height: 60px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
display: inline-block;
}
.git-links li a::after {
content: "\203A";
margin-left: auto;
font-size: 36px;
color: var(--color-orange-btn);
line-height: 1;
}
.git-links li a:hover {
color: var(--color-orange-btn);
}
/* Icon per link item — SVGs include their own circular bg + color */
.git-link-heart a::before { background-image: url('../images/footer-icon-heart.svg'); }
.git-link-feet a::before { background-image: url('../images/footer-icon-feet.svg'); }
.git-link-hand a::before { background-image: url('../images/footer-icon-hand.svg'); }
.git-link-shield a::before { background-image: url('../images/footer-icon-shield.svg'); }
.git-link-pill a::before { background-image: url('../images/footer-icon-pill.svg'); }
.git-link-hands a::before { background-image: url('../images/footer-icon-hands.svg'); }
.git-link-home a::before { background-image: url('../images/footer-icon-home.svg'); }
.git-link-people a::before { background-image: url('../images/footer-icon-people.svg'); }
.git-link-dollar a::before { background-image: url('../images/footer-icon-dollar.svg'); }
.git-link-list a::before { background-image: url('../images/footer-icon-list.svg'); }
.git-link-lock a::before { background-image: url('../images/footer-icon-lock.svg'); }
.git-link-doc a::before { background-image: url('../images/footer-icon-doc.svg'); }
/* ── Contact Us — Phone cards ── */
.git-phones {
display: flex;
flex-direction: column;
gap: 20px;
margin: 50px 0;
}
.git-phone-item {
display: flex;
align-items: center;
justify-content: start;
gap: 5px;
background: #FCDED2;
border-radius: 16px;
padding: 18px 22px 25px;
}
.git-phone-icon {
/* flex-shrink: 0; */
/* width: 50px;
height: 50px; */
display: flex;
align-items: center;
justify-content: center;
}
.git-phone-icon img {
/* width: 45px;
height: 45px; */
object-fit: contain;
}
.git-phone-text {
display: flex;
flex-direction: column;
gap: 20px;
}
.git-phone-label {
font-family: var(--font-primary) !important;
font-size: clamp(18px, 1.4vw, 25px);
color: var(--color-text-dark);
font-weight: 500;
}
.git-phone-num {
font-family: var(--font-noto-serif) !important;
font-size: clamp(23px, 2.2vw, 35px);
font-weight: 700;
color: var(--color-orange-btn);
text-decoration: none;
}
/* ── Text & Email sections ── */
.git-contact-section {
margin-bottom: 30px;
}
.git-section-heading {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 30px;
}
.git-section-heading h4 {
font-family: var(--font-playfair) !important;
font-size: clamp(27px, 2.5vw, 39px);
font-weight: 400;
color: var(--color-text-dark);
margin: 0;
}
.git-text-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.git-text-label {
font-family: var(--font-primary) !important;
font-size: clamp(16px, 1.6vw, 22px);
color: var(--color-text-dark);
font-weight: 500;
}
.git-text-num {
font-family: var(--font-noto-serif) !important;
font-size: clamp(24px, 2.4vw, 35px);
font-weight: 700;
color: var(--color-orange-btn);
text-decoration: none;
}
/* ── Send a Message button ── */
.git-message-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
background: var(--color-orange-btn);
color: var(--color-white);
font-family: var(--font-playfair) !important;
font-size: clamp(20px, 2vw, 28px);
font-weight: 500;
padding: 18px 24px;
border-radius: 50px;
text-decoration: none;
transition: filter 0.2s, transform 0.2s;
}
.git-message-btn:hover {
filter: brightness(1.08);
transform: translateY(-2px);
}
.git-message-btn img {
width: 24px;
height: 24px;
filter: brightness(0) invert(1);
}
/* ── Socials ── */
.git-socials {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.git-social {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: transform 0.2s, filter 0.2s;
}
.git-social:hover {
transform: translateY(-3px);
filter: brightness(1.05);
}
.git-social img {
object-fit: contain;
}
/* ── Responsive ── */
@media (max-width: 1100px) {
.git-grid {
grid-template-columns: 1fr 1fr;
}
.git-col:last-child {
grid-column: 1 / -1;
}
}
@media (max-width: 900px) {
.git-top {
flex-direction: column;
text-align: center;
gap: 20px;
}
.git-top-decor {
width: 240px;
max-width: 60%;
}
.git-map img {
height: 220px;
}
.git-links li a {
font-size: 16px;
gap: 14px;
}
.git-links li a::before {
width: 48px;
height: 48px;
}
.git-phone-item {
padding: 14px 18px;
gap: 14px;
}
.git-social {
width: 52px;
height: 52px;
}
}
@media (max-width: 680px) {
.git-section {
padding: 40px 0;
}
.git-top {
margin-bottom: 30px;
}
.git-top-decor {
width: 180px;
}
.git-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.git-col:last-child {
grid-column: auto;
}
.git-card {
padding: 22px;
border-radius: 20px;
}
.git-map img {
height: 180px;
}
.git-parent-icon {
width: 160px;
}
.git-links li a {
font-size: 15px;
padding: 8px 0;
}
.git-links li a::before {
width: 42px;
height: 42px;
}
.git-links li a::after {
font-size: 28px;
}
.git-phone-item {
padding: 12px 14px;
}
.git-phone-icon {
width: 40px;
height: 40px;
}
.git-message-btn {
font-size: 18px;
padding: 14px 20px;
}
}
/***** customiser CSS *****/
.fe-parent-card h3{
font-size: clamp(24px, 1.9vw, 32px) !important;
}
.az-content h2, .category-card h3{
font-weight: 500 !important;
}
.git-text-num{
font-size: clamp(24px, 1.7vw, 35px) !important;
}
.git-parent-card h3{
font-size: clamp(24px, 1.6vw, 32px) !important;
}
@media (max-width: 680px) {
.hfy-about-left p {
font-size: 13px !important;
}
}
.pc-follow-text span{
font-size: clamp(12px, 1.4vw, 17px);
}
.banner-heading{
font-size: clamp(40px, 5vw, 79px);
}
.banner-subtext{
font-size: clamp(21px, 2.2vw, 33px);
}
.le-header-left h2 {
font-size: clamp(36px, 3.1vw, 60px);
}
.git-badge span {
font-size: clamp(19px, 2vw, 35px);
}
.podcast-close{
color: #fff;
right: -20px;
}
/* Portrait */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
/* styles */
.hero-banner{
background-position: 75%;
}
.hero-banner::before {
content: "";
position: absolute;
inset: 0;
background: rgb(0 0 0 / .45);
z-index: 1;
}
.nav-menu > li > a {
font-size: 16px;
letter-spacing: 1px;
}
}
.skeleton-loader {
position: relative;
height: 160px;
}
.skeleton-loader:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-repeat: no-repeat;
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%),
linear-gradient(#aaaaaa 16px, transparent 0),
linear-gradient(#aaaaaa 16px, transparent 0),
linear-gradient(#aaaaaa 16px, transparent 0),
linear-gradient(#aaaaaa 16px, transparent 0),
linear-gradient(#aaaaaa 72px, transparent 0),
linear-gradient(#ffffff 100%, transparent 0);
background-size: 264px 100%, 128px 16px, 256px 16px, 496px 16px, 496px 16px, 81px 72px, 100% 100%;
background-position: 0 0, 128px 29px, 128px 62px, 16px 103px, 16px 130px, 16px 15px, 0 0;
animation: skeleton-animation 2000ms infinite;
}
@keyframes skeleton-animation {
to {
background-position: 100% 0, 128px 29px, 128px 62px, 16px 103px, 16px 130px, 16px 15px, 0 0;
}
}