/* ============================================================
ALFALAH WEALTH — MAIN STYLESHEET
File: alfalah-main.css
Usage:
Place this link as the LAST item inside on every page
so it overrides any inline or earlier styles.
============================================================ */
/* ============================================================
1. DESIGN TOKENS
============================================================ */
:root {
/* ── New naming convention ── */
--green-deep: #0d3320;
--green: #1a4d2e;
--gold: #d4a843;
--gold-light: #e8c668;
--cream: #faf8f5;
--text-dark: #2c2c2a;
--text-muted: #5f5e5a;
--border-gold: rgba(212,168,67,0.25);
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'Lora', Georgia, serif;
--font-ui: 'Inter', Arial, sans-serif;
/* ── Original naming convention (used by inner pages) ── */
--forest-green: #1a4d2e;
--deep-green: #0d3320;
--mid-green: #2d7a4a;
--light-green: #4a9d6a;
--light-gold: #e8c668;
--dark-gold: #b8922e;
--pale-gold: #f0d88a;
--white: #ffffff;
--text-grey: #555555;
--soil-dark: #3d2914;
--soil-mid: #5c3d1e;
--border: #dde8e3;
--light-bg: #f0f7f3;
}
/* ============================================================
NAV — SINGLE AUTHORITATIVE SECTION
Covers desktop and mobile for ALL pages.
All other nav rules elsewhere in this file are overridden by this.
============================================================ */
/* ── Desktop nav base ── */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
background: rgba(13,51,32,0.95);
backdrop-filter: blur(10px);
padding: 15px 0;
width: 100%;
box-sizing: border-box;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.nav-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
flex-shrink: 0;
}
.nav-logo img {
height: 45px;
width: auto;
}
.nav-logo-text {
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
font-weight: 600;
color: #ffffff;
letter-spacing: 0.03em;
white-space: nowrap;
}
.nav-logo-text span {
color: #e8c668;
}
/* Desktop — nav links visible as row */
.nav-links {
display: none;
list-style: none;
margin: 0;
padding: 0;
gap: 40px;
align-items: center;
}
.nav-links a {
color: rgba(255,255,255,0.85);
text-decoration: none;
font-family: 'Lora', serif;
font-size: 0.95rem;
letter-spacing: 0.02em;
position: relative;
transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active {
color: #e8c668;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -5px; left: 0;
width: 0; height: 2px;
background: #d4a843;
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
.nav-cta {
background: #d4a843;
color: #0d3320;
padding: 10px 25px;
border-radius: 4px;
text-decoration: none;
font-family: 'Lora', serif;
font-weight: 600;
font-size: 0.9rem;
transition: background 0.2s;
white-space: nowrap;
}
.nav-cta:hover {
background: #e8c668;
}
.nav-flag {
display: flex;
align-items: center;
margin-left: 10px;
text-decoration: none;
}
.nav-flag img {
height: 32px;
width: auto;
border-radius: 50%;
}
/* Language item inside menu — hidden on desktop */
.nav-lang-item {
display: none;
}
/* Hamburger — hidden on desktop */
.mobile-menu-btn {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
flex-shrink: 0;
}
.mobile-menu-btn span {
display: block;
width: 24px; height: 2px;
background: #ffffff;
border-radius: 2px;
transition: all 0.3s ease;
}
.mobile-menu-btn.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* ── Desktop only — nav-links flex layout ── */
@media (min-width: 769px) {
.nav-links {
display: flex !important;
}
.nav-logo-text {
display: inline-block !important;
}
.mobile-menu-btn {
display: none !important;
}
.nav-flag {
display: flex !important;
}
.nav-cta {
display: inline-block !important;
}
}
/* ── Mobile — hamburger layout ── */
@media (max-width: 768px) {
.nav-container {
padding: 0 16px;
flex-wrap: nowrap;
}
/* Logo text hidden */
.nav-logo-text {
display: none !important;
}
/* Flag hidden — language link inside hamburger instead */
.nav-flag {
display: none !important;
}
/* Nav CTA hidden */
.nav-cta {
display: none !important;
}
/* Hamburger visible */
.mobile-menu-btn {
display: flex !important;
margin-left: auto;
}
/* Nav links — hidden by default, JS controls via inline style */
.nav-links {
display: none;
position: absolute;
top: 60px; left: 0; right: 0;
background: rgba(13,51,32,0.98);
flex-direction: column;
padding: 20px 24px;
gap: 16px;
z-index: 999;
width: 100%;
box-sizing: border-box;
list-style: none;
margin: 0;
}
.nav-links a {
font-size: 1rem;
padding: 6px 0;
display: block;
}
/* Language item visible inside open menu */
.nav-lang-item {
display: list-item !important;
border-top: 1px solid rgba(255,255,255,0.15);
margin-top: 8px;
padding-top: 8px;
}
.nav-lang-item a {
color: #e8c668 !important;
font-weight: 600 !important;
}
}
/* ============================================================
2. RESET & BASE
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: var(--font-body);
font-size: 16px;
color: var(--text-dark);
background: var(--cream);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
}
a {
text-decoration: none;
transition: color 0.2s ease;
}
ul {
padding-left: 1.2rem;
}
/* ============================================================
3. TYPOGRAPHY
============================================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--green-deep);
line-height: 1.25;
margin-top: 0;
margin-bottom: 0.75rem;
}
h1 { font-size: clamp(28px, 5vw, 52px); font-weight: 700; }
h2 { font-size: clamp(22px, 3.5vw, 36px); font-weight: 700; }
h3 { font-size: clamp(18px, 2.5vw, 24px); font-weight: 700; }
h4 { font-size: 16px; font-weight: 600; }
p {
margin-top: 0;
margin-bottom: 1rem;
}
.eyebrow {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold);
display: block;
margin-bottom: 10px;
}
/* ============================================================
4. LAYOUT UTILITIES
============================================================ */
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
width: 100%;
}
.container-narrow {
max-width: 780px;
margin: 0 auto;
padding: 0 24px;
width: 100%;
}
.section {
padding: 80px 24px;
}
.section-sm {
padding: 48px 24px;
}
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-gold { color: var(--gold) !important; }
.text-cream { color: var(--cream) !important; }
.text-muted { color: var(--text-muted) !important; }
.bg-green-deep { background: var(--green-deep) !important; }
.bg-green { background: var(--green) !important; }
.bg-cream { background: var(--cream) !important; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: 16px; }
.gap-md { gap: 24px; }
.gap-lg { gap: 40px; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 20px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 20px;
}
/* ============================================================
5. NAV / HEADER — handled by authoritative nav section above
============================================================ */
.nav-cta,
.nav-links a.nav-cta {
background: var(--gold) !important;
color: var(--green-deep) !important;
padding: 8px 20px !important;
border-radius: 6px !important;
font-weight: 600 !important;
font-size: 13px !important;
}
.nav-cta:hover {
background: var(--gold-light) !important;
}
/* ============================================================
6. BUTTONS
============================================================ */
.btn,
button,
input[type="submit"],
a.btn {
display: inline-block;
padding: 12px 28px;
border-radius: 6px;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
border: none;
text-align: center;
}
.btn-primary,
input[type="submit"] {
background: var(--gold) !important;
color: var(--green-deep) !important;
}
.btn-primary:hover,
input[type="submit"]:hover {
background: var(--gold-light) !important;
}
.btn-outline {
background: transparent !important;
border: 2px solid var(--gold) !important;
color: var(--gold) !important;
}
.btn-outline:hover {
background: var(--gold) !important;
color: var(--green-deep) !important;
}
/* ============================================================
7. FORMS
============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-gold);
border-radius: 6px;
font-family: var(--font-body);
font-size: 14px;
color: var(--text-dark);
background: #fff;
box-sizing: border-box;
margin-bottom: 14px;
transition: border-color 0.2s;
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(212,168,67,0.15);
}
label {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
color: var(--text-dark);
display: block;
margin-bottom: 6px;
}
/* ============================================================
8. CARDS
============================================================ */
.card {
background: #fff;
border: 1px solid var(--border-gold);
border-radius: 12px;
padding: 24px;
box-sizing: border-box;
}
.card-dark {
background: rgba(0,0,0,0.2);
border: 1px solid rgba(212,168,67,0.25);
border-radius: 12px;
padding: 24px;
box-sizing: border-box;
}
.card-stat {
background: rgba(0,0,0,0.2);
border: 1px solid rgba(212,168,67,0.3);
border-radius: 12px;
padding: 28px 20px;
text-align: center;
}
.card-stat .stat-num {
font-family: var(--font-display);
font-size: 36px;
font-weight: 700;
color: var(--gold);
display: block;
line-height: 1;
margin-bottom: 8px;
}
.card-stat .stat-lbl {
font-size: 12px;
color: #9FE1CB;
line-height: 1.5;
}
.card-quote {
background: rgba(0,0,0,0.15);
border: 1px solid rgba(212,168,67,0.3);
border-left: 4px solid var(--gold);
border-radius: 0 10px 10px 0;
padding: 20px 22px;
}
.card-quote p {
font-style: italic;
font-size: 14px;
color: rgba(250,248,245,0.9);
margin-bottom: 10px;
}
.card-quote span {
font-size: 12px;
color: #9FE1CB;
font-weight: 600;
}
/* ============================================================
9. FOOTER
Targets footer.php class names exactly:
.footer / .footer-container / .footer-main /
.footer-brand / .footer-links / .footer-bottom
============================================================ */
/* Outer wrapper */
.footer {
background: #0d3320 !important;
background-color: #0d3320 !important;
padding: 56px 32px 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Inner max-width container */
.footer-container {
max-width: 1100px !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
/* Three-column row: brand + 2x links */
.footer-main {
display: flex !important;
flex-wrap: wrap !important;
gap: 48px !important;
align-items: flex-start !important;
padding-bottom: 32px !important;
}
/* ── Brand column ── */
.footer-brand {
flex: 2 1 300px !important;
min-width: 260px !important;
box-sizing: border-box !important;
}
/* Logo link row — prevent text wrapping */
.footer-brand .nav-logo {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 10px !important;
text-decoration: none !important;
margin-bottom: 16px !important;
white-space: nowrap !important;
}
.footer-brand .nav-logo img {
height: 38px !important;
width: 38px !important;
min-width: 38px !important;
display: block !important;
flex-shrink: 0 !important;
}
.footer-brand .nav-logo-text {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: 18px !important;
font-weight: 700 !important;
color: #faf8f5 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
display: inline !important;
}
.footer-brand .nav-logo-text span {
color: #d4a843 !important;
white-space: nowrap !important;
}
/* Tagline */
.footer-brand p {
font-size: 13px !important;
line-height: 1.75 !important;
color: rgba(250,248,245,0.65) !important;
max-width: 300px !important;
margin: 0 !important;
white-space: normal !important;
}
/* ── Link columns (Pautan & Hubungi) ── */
.footer-links {
flex: 1 1 160px !important;
min-width: 140px !important;
box-sizing: border-box !important;
}
.footer-links h4 {
font-family: 'Inter', Arial, sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: #d4a843 !important;
margin: 0 0 16px 0 !important;
}
.footer-links ul {
list-style: none !important;
padding: 0 !important;
margin: 0 0 12px 0 !important;
}
.footer-links ul li {
margin-bottom: 10px !important;
}
.footer-links ul li a {
font-size: 13px !important;
color: rgba(250,248,245,0.75) !important;
text-decoration: none !important;
line-height: 1.6 !important;
transition: color 0.2s !important;
word-break: break-word !important;
display: inline-block !important;
}
.footer-links ul li a:hover {
color: #d4a843 !important;
}
/* ── Copyright bar — always full width below columns ── */
.footer-bottom {
width: 100% !important;
padding: 20px 0 24px !important;
text-align: center !important;
clear: both !important;
flex-basis: 100% !important;
border-top: 1px solid rgba(212,168,67,0.2) !important;
margin-top: 0 !important;
}
.footer-bottom p {
font-size: 12px !important;
color: rgba(250,248,245,0.4) !important;
margin: 0 !important;
font-family: 'Inter', Arial, sans-serif !important;
}
/* ============================================================
9a. FOOTER RESPONSIVE
============================================================ */
/* Tablet — 768px and below */
@media (max-width: 768px) {
.footer {
padding: 48px 24px 0 !important;
}
.footer-main {
flex-direction: column !important;
gap: 28px !important;
padding-bottom: 28px !important;
}
.footer-brand,
.footer-links {
flex: 1 1 100% !important;
min-width: unset !important;
width: 100% !important;
}
.footer-brand p {
max-width: 100% !important;
}
.footer-brand .nav-logo {
white-space: nowrap !important;
}
.footer-bottom {
padding: 16px 0 20px !important;
}
}
/* Mobile — 480px and below */
@media (max-width: 480px) {
.footer {
padding: 36px 16px 0 !important;
}
.footer-brand .nav-logo img {
height: 30px !important;
}
.footer-brand .nav-logo-text {
font-size: 16px !important;
}
.footer-brand p {
font-size: 12px !important;
}
.footer-links h4 {
font-size: 10px !important;
margin-bottom: 12px !important;
}
.footer-links ul li a {
font-size: 12px !important;
}
.footer-bottom {
padding: 16px 0 20px !important;
}
.footer-bottom p {
font-size: 11px !important;
}
}
/* ============================================================
10. PAGE-SPECIFIC — LANDAI.PHP
Extracted directly from original landai.php HTML source.
All class names, colours and values are verbatim from the file.
============================================================ */
/* ── CSS VARIABLES (landai-specific, extends root tokens) ── */
.hero, .learn-section, .trainer-section, .cta-band,
.nav, .reg-card, section, footer {
--forest-green: #1a4d2e;
--deep-green: #0d3320;
--mid-green: #2d7a4a;
--light-green: #4a9d6a;
--gold: #d4a843;
--light-gold: #e8c668;
--dark-gold: #b8922e;
--pale-gold: #f0d88a;
--cream: #faf8f5;
--white: #ffffff;
--text-dark: #1a1a1a;
--text-grey: #555;
--border: #dde8e3;
--light-bg: #f0f7f3;
}
/* ── NAVIGATION ── */
.nav {
position: fixed !important;
top: 0 !important; left: 0 !important; right: 0 !important;
z-index: 1000 !important;
background: rgba(13,51,32,0.95) !important;
backdrop-filter: blur(10px) !important;
padding: 15px 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.nav-container {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 30px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.nav-logo {
display: flex !important;
align-items: center !important;
gap: 12px !important;
text-decoration: none !important;
}
.nav-logo img {
height: 45px !important;
width: auto !important;
}
.nav-logo-text {
font-family: 'Playfair Display', serif !important;
font-size: 1.3rem !important;
font-weight: 600 !important;
color: #ffffff !important;
letter-spacing: 0.03em !important;
white-space: nowrap !important;
}
.nav-logo-text span {
color: #e8c668 !important;
}
@media (min-width: 769px) {
.nav-links {
display: flex !important;
gap: 40px !important;
align-items: center !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
}
.nav-links a {
color: rgba(255,255,255,0.85) !important;
text-decoration: none !important;
font-family: 'Lora', serif !important;
font-size: 0.95rem !important;
letter-spacing: 0.02em !important;
position: relative !important;
transition: color 0.2s !important;
}
.nav-links a:hover,
.nav-links a.active {
color: #e8c668 !important;
}
.nav-links a::after {
content: '' !important;
position: absolute !important;
bottom: -5px !important;
left: 0 !important;
width: 0 !important;
height: 2px !important;
background: #d4a843 !important;
transition: width 0.3s ease !important;
}
.nav-links a:hover::after {
width: 100% !important;
}
.nav-cta,
.nav-links a.nav-cta {
background: #d4a843 !important;
color: #0d3320 !important;
padding: 0.5rem 1.3rem !important;
border-radius: 4px !important;
font-weight: 600 !important;
transition: background 0.2s !important;
}
.nav-cta:hover {
background: #e8c668 !important;
color: #0d3320 !important;
}
/* ── NAV FLAG ── */
.nav-flag {
display: flex !important;
align-items: center !important;
margin-left: 10px !important;
text-decoration: none !important;
}
.nav-flag img {
height: 32px !important;
width: auto !important;
border-radius: 50% !important;
}
/* ── MOBILE HAMBURGER ── */
.mobile-menu-btn {
display: none !important;
flex-direction: column !important;
gap: 5px !important;
background: none !important;
border: none !important;
cursor: pointer !important;
padding: 6px !important;
margin-left: 8px !important;
flex-shrink: 0 !important;
}
.mobile-menu-btn span {
display: block !important;
width: 24px !important;
height: 2px !important;
background: #ffffff !important;
border-radius: 2px !important;
transition: all 0.3s ease !important;
}
.mobile-menu-btn.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px) !important;
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0 !important;
}
.mobile-menu-btn.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px) !important;
}
/* ── HERO ── */
.hero {
min-height: 100vh !important;
background: linear-gradient(135deg, #0d3320 0%, #1a4d2e 60%, #2d7a4a 100%) !important;
display: flex !important;
align-items: center !important;
padding: 100px 30px 60px !important;
position: relative !important;
overflow: hidden !important;
width: 100% !important;
box-sizing: border-box !important;
}
.hero-inner {
max-width: 1200px !important;
margin: 0 auto !important;
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr 400px !important;
gap: 4rem !important;
align-items: start !important;
}
.hero-badge {
display: inline-block !important;
background: rgba(212,168,67,0.2) !important;
border: 1px solid rgba(212,168,67,0.5) !important;
color: #e8c668 !important;
font-size: 0.75rem !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
padding: 0.4rem 1rem !important;
border-radius: 20px !important;
margin-bottom: 1.5rem !important;
font-family: 'Lora', serif !important;
}
.hero h1 {
font-family: 'Playfair Display', serif !important;
font-size: clamp(2.2rem, 4vw, 3.4rem) !important;
font-weight: 700 !important;
color: #ffffff !important;
line-height: 1.2 !important;
margin-bottom: 1.2rem !important;
}
.hero h1 span {
color: #e8c668 !important;
}
.hero-desc {
font-size: 1rem !important;
color: rgba(255,255,255,0.8) !important;
max-width: 500px !important;
margin-bottom: 2rem !important;
line-height: 1.85 !important;
}
.hero-details {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.8rem !important;
margin-bottom: 2rem !important;
}
.detail-chip {
display: flex !important;
align-items: center !important;
gap: 0.45rem !important;
background: rgba(255,255,255,0.1) !important;
border: 1px solid rgba(255,255,255,0.2) !important;
color: rgba(255,255,255,0.9) !important;
font-size: 0.82rem !important;
padding: 0.4rem 0.9rem !important;
border-radius: 20px !important;
}
.hero-quote {
border-left: 3px solid #d4a843 !important;
padding-left: 1rem !important;
margin-top: 2.5rem !important;
font-style: italic !important;
color: rgba(255,255,255,0.65) !important;
font-size: 0.9rem !important;
line-height: 1.7 !important;
}
.hero-quote strong {
color: #e8c668 !important;
font-style: normal !important;
}
/* ── REGISTRATION CARD ── */
.reg-card {
background: #ffffff !important;
border-radius: 8px !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
overflow: hidden !important;
position: sticky !important;
top: 84px !important;
}
.card-header {
background: #1a4d2e !important;
padding: 1.5rem !important;
text-align: center !important;
}
.card-header-label {
font-size: 0.7rem !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
color: #e8c668 !important;
margin-bottom: 0.5rem !important;
font-family: 'Lora', serif !important;
}
.price-was {
font-size: 0.85rem !important;
color: rgba(255,255,255,0.55) !important;
text-decoration: line-through !important;
}
.price-now {
font-family: 'Playfair Display', serif !important;
font-size: 3rem !important;
font-weight: 700 !important;
color: #ffffff !important;
line-height: 1 !important;
}
.price-sup {
font-size: 1.3rem !important;
vertical-align: super !important;
}
.price-tag {
font-size: 0.72rem !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #e8c668 !important;
margin-top: 0.4rem !important;
}
.spots-bar {
margin: 1rem 0 0.3rem !important;
height: 4px !important;
background: rgba(255,255,255,0.2) !important;
border-radius: 2px !important;
overflow: hidden !important;
}
.spots-fill {
height: 100% !important;
width: 60% !important;
background: #d4a843 !important;
border-radius: 2px !important;
}
.spots-text {
font-size: 0.72rem !important;
color: rgba(255,255,255,0.65) !important;
}
.card-body {
padding: 1.5rem !important;
}
.form-group {
margin-bottom: 0.9rem !important;
}
.form-group label {
display: block !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: #555 !important;
margin-bottom: 0.35rem !important;
font-family: 'Lora', serif !important;
}
.form-group input,
.form-group select {
width: 100% !important;
border: 1px solid #dde8e3 !important;
border-radius: 4px !important;
padding: 0.7rem 0.9rem !important;
color: #1a1a1a !important;
font-family: 'Lora', serif !important;
font-size: 0.88rem !important;
background: #faf8f5 !important;
outline: none !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
box-sizing: border-box !important;
}
.form-group input:focus,
.form-group select:focus {
border-color: #1a4d2e !important;
box-shadow: 0 0 0 3px rgba(26,77,46,0.1) !important;
background: #ffffff !important;
}
.btn-register {
width: 100% !important;
background: #d4a843 !important;
color: #0d3320 !important;
border: none !important;
padding: 1rem !important;
font-family: 'Playfair Display', serif !important;
font-size: 1rem !important;
font-weight: 600 !important;
border-radius: 4px !important;
cursor: pointer !important;
transition: background 0.2s, transform 0.15s !important;
margin-top: 0.3rem !important;
letter-spacing: 0.02em !important;
}
.btn-register:hover {
background: #e8c668 !important;
transform: translateY(-1px) !important;
}
.btn-register:disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
transform: none !important;
}
.loading-msg {
display: none !important;
text-align: center !important;
color: #1a4d2e !important;
font-size: 0.82rem !important;
margin-top: 0.6rem !important;
}
.loading-msg.active {
display: block !important;
}
.secure-note {
font-size: 0.72rem !important;
color: #555 !important;
text-align: center !important;
margin-top: 0.8rem !important;
line-height: 1.6 !important;
}
/* ── GENERAL SECTION STYLES ── */
.landai section {
padding: 80px 30px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.landai .container {
max-width: 1100px !important;
margin: 0 auto !important;
}
.landai .section-label {
font-size: 0.75rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: #2d7a4a !important;
margin-bottom: 0.8rem !important;
font-family: 'Lora', serif !important;
}
.landai .section-title {
font-family: 'Playfair Display', serif !important;
font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
font-weight: 700 !important;
color: #1a4d2e !important;
line-height: 1.25 !important;
margin-bottom: 0.8rem !important;
}
.landai .section-sub {
color: #555 !important;
font-size: 0.95rem !important;
max-width: 540px !important;
margin-bottom: 3rem !important;
line-height: 1.8 !important;
}
/* ── LEARN / MODULES SECTION ── */
.learn-section {
background: #f0f7f3 !important;
}
.learn-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 1.2rem !important;
}
.learn-card {
background: #ffffff !important;
border: 1px solid #dde8e3 !important;
border-top: 3px solid #d4a843 !important;
border-radius: 6px !important;
padding: 1.8rem !important;
transition: box-shadow 0.2s, transform 0.2s !important;
}
.learn-card:hover {
box-shadow: 0 6px 20px rgba(26,77,46,0.1) !important;
transform: translateY(-2px) !important;
}
.learn-num {
font-family: 'Playfair Display', serif !important;
font-size: 2.4rem !important;
font-weight: 700 !important;
color: rgba(212,168,67,0.3) !important;
line-height: 1 !important;
margin-bottom: 0.7rem !important;
}
.learn-card h3 {
font-family: 'Playfair Display', serif !important;
font-size: 1.05rem !important;
font-weight: 600 !important;
color: #1a4d2e !important;
margin-bottom: 0.5rem !important;
}
.learn-card p {
font-size: 0.87rem !important;
color: #555 !important;
line-height: 1.75 !important;
}
/* ── SCHEDULE ── */
.schedule-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.schedule-item {
display: flex !important;
gap: 1.5rem !important;
padding: 1.2rem 0 !important;
border-bottom: 1px solid #dde8e3 !important;
align-items: flex-start !important;
}
.schedule-item:first-child {
border-top: 1px solid #dde8e3 !important;
}
.schedule-time {
font-family: 'Playfair Display', serif !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
color: #d4a843 !important;
min-width: 85px !important;
padding-top: 2px !important;
flex-shrink: 0 !important;
}
.schedule-title {
font-family: 'Playfair Display', serif !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
color: #1a4d2e !important;
}
.schedule-desc {
font-size: 0.83rem !important;
color: #555 !important;
margin-top: 0.2rem !important;
}
/* ── TRAINER / FACILITATOR ── */
.trainer-section {
background: #f0f7f3 !important;
}
.trainer-card {
display: grid !important;
grid-template-columns: 120px 1fr !important;
gap: 2.5rem !important;
align-items: start !important;
background: #ffffff !important;
border: 1px solid #dde8e3 !important;
border-left: 5px solid #1a4d2e !important;
border-radius: 6px !important;
padding: 2.5rem !important;
box-sizing: border-box !important;
}
.trainer-avatar {
width: 100px !important;
height: 100px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #1a4d2e, #2d7a4a) !important;
border: 3px solid #d4a843 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-family: 'Playfair Display', serif !important;
font-size: 2.2rem !important;
font-weight: 700 !important;
color: #ffffff !important;
}
.trainer-name {
font-family: 'Playfair Display', serif !important;
font-size: 1.7rem !important;
font-weight: 700 !important;
color: #1a4d2e !important;
margin-bottom: 0.2rem !important;
}
.trainer-role {
font-size: 0.82rem !important;
color: #d4a843 !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
margin-bottom: 1rem !important;
font-family: 'Lora', serif !important;
}
.trainer-bio {
font-size: 0.9rem !important;
color: #555 !important;
line-height: 1.85 !important;
}
.trainer-tags {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.5rem !important;
margin-top: 1rem !important;
}
.tag {
font-size: 0.72rem !important;
padding: 0.3rem 0.8rem !important;
background: #f0f7f3 !important;
border: 1px solid #dde8e3 !important;
border-radius: 20px !important;
color: #1a4d2e !important;
font-family: 'Lora', serif !important;
font-weight: 600 !important;
}
/* ── FAQ ── */
.faq-item {
border-bottom: 1px solid #dde8e3 !important;
}
.faq-q {
padding: 1.1rem 0 !important;
font-family: 'Playfair Display', serif !important;
font-size: 0.98rem !important;
font-weight: 600 !important;
color: #1a4d2e !important;
cursor: pointer !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 1rem !important;
user-select: none !important;
}
.faq-icon {
width: 24px !important;
height: 24px !important;
flex-shrink: 0 !important;
border: 1px solid #dde8e3 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1rem !important;
color: #d4a843 !important;
font-family: monospace !important;
transition: background 0.2s !important;
}
.faq-item.open .faq-icon {
background: #f0f7f3 !important;
}
.faq-a {
font-size: 0.87rem !important;
color: #555 !important;
max-height: 0 !important;
overflow: hidden !important;
transition: max-height 0.3s ease, padding 0.2s !important;
line-height: 1.8 !important;
}
.faq-item.open .faq-a {
max-height: 200px !important;
padding-bottom: 1rem !important;
}
/* ── CTA BAND ── */
.cta-band {
background: linear-gradient(135deg, #0d3320, #1a4d2e) !important;
color: #ffffff !important;
text-align: center !important;
padding: 5rem 2rem !important;
width: 100% !important;
box-sizing: border-box !important;
}
.cta-band h2 {
font-family: 'Playfair Display', serif !important;
font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
font-weight: 700 !important;
color: #ffffff !important;
margin-bottom: 0.8rem !important;
}
.cta-band p {
color: rgba(255,255,255,0.75) !important;
margin-bottom: 2rem !important;
}
.btn-gold {
display: inline-block !important;
background: #d4a843 !important;
color: #0d3320 !important;
padding: 1rem 2.8rem !important;
font-family: 'Playfair Display', serif !important;
font-size: 1rem !important;
font-weight: 600 !important;
border-radius: 4px !important;
text-decoration: none !important;
transition: background 0.2s, transform 0.15s !important;
}
.btn-gold:hover {
background: #e8c668 !important;
transform: translateY(-2px) !important;
}
/* ── ANIMATIONS ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-left > * {
animation: fadeUp 0.5s ease both !important;
}
.hero-left > *:nth-child(1) { animation-delay: 0.1s !important; }
.hero-left > *:nth-child(2) { animation-delay: 0.2s !important; }
.hero-left > *:nth-child(3) { animation-delay: 0.3s !important; }
.hero-left > *:nth-child(4) { animation-delay: 0.4s !important; }
.hero-left > *:nth-child(5) { animation-delay: 0.5s !important; }
/* ── PROOF SECTION (added separately) ── */
.afw-proof-section {
background: #1a4d2e !important;
background-color: #1a4d2e !important;
padding: 72px 30px !important;
text-align: center !important;
width: 100% !important;
box-sizing: border-box !important;
}
.afw-proof-inner {
max-width: 860px !important;
margin: 0 auto !important;
}
.afw-proof-eyebrow {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #d4a843 !important;
display: block !important;
margin-bottom: 12px !important;
text-align: center !important;
}
.afw-proof-heading {
font-family: 'Playfair Display', serif !important;
font-size: clamp(20px, 3.5vw, 30px) !important;
font-weight: 700 !important;
color: #faf8f5 !important;
margin-bottom: 10px !important;
line-height: 1.3 !important;
text-align: center !important;
}
.afw-proof-sub {
font-size: 14px !important;
color: #9FE1CB !important;
margin-bottom: 40px !important;
max-width: 560px !important;
margin-left: auto !important;
margin-right: auto !important;
line-height: 1.7 !important;
text-align: center !important;
}
.afw-proof-stats {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
margin-bottom: 16px !important;
}
.afw-proof-stat {
background: rgba(0,0,0,0.2) !important;
border: 1px solid rgba(212,168,67,0.25) !important;
border-radius: 12px !important;
padding: 28px 16px !important;
box-sizing: border-box !important;
}
.afw-proof-num {
font-family: 'Playfair Display', serif !important;
font-size: 38px !important;
font-weight: 700 !important;
color: #d4a843 !important;
display: block !important;
line-height: 1 !important;
margin-bottom: 8px !important;
}
.afw-proof-lbl {
font-size: 12px !important;
color: #9FE1CB !important;
line-height: 1.5 !important;
}
.afw-proof-caption {
font-size: 11px !important;
color: rgba(159,225,203,0.6) !important;
font-style: italic !important;
margin: 8px 0 24px !important;
}
.afw-uni-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
justify-content: center !important;
}
.afw-uni-tag {
font-size: 11px !important;
font-weight: 600 !important;
background: rgba(212,168,67,0.15) !important;
color: #e8c668 !important;
border: 1px solid rgba(212,168,67,0.3) !important;
border-radius: 20px !important;
padding: 4px 14px !important;
}
/* ── WHY SECTION (added separately) ── */
.afw-why-section {
background: #0d3320 !important;
background-color: #0d3320 !important;
padding: 72px 30px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.afw-why-heading {
font-family: 'Playfair Display', serif !important;
font-size: clamp(20px, 3vw, 28px) !important;
font-weight: 700 !important;
color: #faf8f5 !important;
text-align: center !important;
margin-bottom: 40px !important;
max-width: 700px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.afw-why-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0,1fr)) !important;
gap: 16px !important;
max-width: 960px !important;
margin: 0 auto !important;
}
.afw-why-card {
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(212,168,67,0.2) !important;
border-radius: 12px !important;
padding: 22px 20px !important;
box-sizing: border-box !important;
}
.afw-why-title {
font-family: 'Playfair Display', serif !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #e8c668 !important;
margin-bottom: 8px !important;
line-height: 1.3 !important;
}
.afw-why-body {
font-size: 12px !important;
color: rgba(250,248,245,0.75) !important;
line-height: 1.7 !important;
margin: 0 !important;
}
/* ── QUOTES (added separately) ── */
.afw-lp-quotes {
background: #faf8f5 !important;
background-color: #faf8f5 !important;
padding: 56px 30px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.afw-lp-quotes-inner {
max-width: 860px !important;
margin: 0 auto !important;
}
.afw-lp-quotes-inner h3 {
font-family: 'Playfair Display', serif !important;
font-size: clamp(18px, 2.5vw, 24px) !important;
font-weight: 700 !important;
color: #0d3320 !important;
max-width: 580px !important;
line-height: 1.35 !important;
margin-bottom: 32px !important;
}
.afw-lp-q-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0,1fr)) !important;
gap: 16px !important;
}
.afw-lp-q-card {
background: #ffffff !important;
border: 1px solid rgba(212,168,67,0.3) !important;
border-left: 4px solid #d4a843 !important;
border-radius: 0 10px 10px 0 !important;
padding: 20px 20px 16px !important;
box-sizing: border-box !important;
}
.afw-lp-q-text {
font-family: 'Lora', serif !important;
font-size: 13px !important;
font-style: italic !important;
color: #2c2c2a !important;
line-height: 1.75 !important;
margin-bottom: 10px !important;
}
.afw-lp-q-attr {
font-size: 11px !important;
color: #5f5e5a !important;
font-weight: 600 !important;
}
/* ── RESPONSIVE — LANDAI ONLY ── */
@media (max-width: 900px) {
.hero-inner { grid-template-columns: 1fr !important; }
.reg-card { position: static !important; max-width: 520px !important; margin: 0 auto !important; }
.trainer-card { grid-template-columns: 1fr !important; }
.trainer-avatar { margin: 0 auto !important; }
.afw-why-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
.afw-proof-stats { grid-template-columns: 1fr !important; }
.afw-lp-q-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
/* Nav */
.nav-container {
flex-wrap: nowrap !important;
position: relative !important;
padding: 0 16px !important;
}
.nav-links {
display: none;
position: absolute !important;
top: 60px !important;
left: 0 !important;
right: 0 !important;
background: rgba(13,51,32,0.98) !important;
flex-direction: column !important;
padding: 20px 24px !important;
gap: 16px !important;
z-index: 999 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.nav-links.active { display: flex; }
.nav-links li { list-style: none !important; }
.nav-links a { font-size: 1rem !important; padding: 6px 0 !important; display: block !important; }
.mobile-menu-btn { display: flex !important; }
.nav-cta { display: none !important; }
/* nav-flag: hidden on mobile — language link is inside hamburger menu */
.nav-flag { display: none !important; }
/* Hero */
.hero { padding: 80px 16px 40px !important; }
.hero h1 { font-size: clamp(1.8rem, 7vw, 2.8rem) !important; }
.hero-desc { font-size: 0.95rem !important; }
.detail-chip { font-size: 0.75rem !important; padding: 0.35rem 0.7rem !important; }
/* Reg card */
.card-body { padding: 1rem !important; }
.price-now { font-size: 2.2rem !important; }
/* Sections */
.landai section { padding: 48px 16px !important; }
.learn-grid { grid-template-columns: 1fr !important; }
.schedule-item { flex-direction: column !important; gap: 6px !important; }
.schedule-time { min-width: unset !important; }
.trainer-card { padding: 1.5rem !important; gap: 1.5rem !important; }
.afw-why-grid { grid-template-columns: 1fr !important; }
.faq-q { font-size: 0.9rem !important; }
.cta-band { padding: 3rem 1rem !important; }
}
@media (max-width: 480px) {
.hero { padding: 70px 16px 32px !important; }
.learn-card { padding: 1.2rem !important; }
.trainer-card { padding: 1.2rem !important; }
.reg-card .card-header { padding: 1rem !important; }
.price-now { font-size: 2rem !important; }
.btn-register { font-size: 0.9rem !important; }
.afw-proof-num { font-size: 28px !important; }
.landai section { padding: 40px 16px !important; }
}
/* ============================================================
11. PAGE-SPECIFIC — ABOUT.PHP / ABOUTBM.PHP
============================================================ */
.afw-bio-section {
background: var(--green) !important;
background-color: var(--green) !important;
padding: 80px 24px !important;
}
.afw-bio-section .afw-eyebrow,
.afw-bio-section .afw-section-label {
color: var(--gold) !important;
text-align: center !important;
display: block !important;
}
.afw-bio-headline {
color: #faf8f5 !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.afw-bio-body {
color: rgba(250,248,245,0.85) !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.afw-stat-box {
background: rgba(0,0,0,0.2) !important;
border: 1px solid rgba(212,168,67,0.35) !important;
}
.afw-quotes-section {
background: var(--green) !important;
background-color: var(--green) !important;
padding: 0 24px 80px !important;
}
.afw-section-heading {
color: #faf8f5 !important;
}
.afw-quote-card {
background: rgba(0,0,0,0.2) !important;
border-left: 4px solid var(--gold) !important;
}
.afw-quote-text {
color: rgba(250,248,245,0.9) !important;
}
.afw-quote-attr {
color: #9FE1CB !important;
}
.afw-reasons-section {
background: var(--green) !important;
background-color: var(--green) !important;
padding: 0 24px 80px !important;
}
.afw-reason-card {
background: rgba(0,0,0,0.2) !important;
border: 1px solid rgba(212,168,67,0.25) !important;
}
.afw-reason-title {
color: var(--gold-light) !important;
}
.afw-reason-body {
color: rgba(250,248,245,0.8) !important;
}
/* ============================================================
12. RESPONSIVE — TABLET (max-width: 768px)
============================================================ */
@media (max-width: 768px) {
/* Nav */
nav,
header nav,
.navbar {
padding: 14px 20px !important;
gap: 16px !important;
}
nav ul,
.navbar ul {
gap: 14px !important;
font-size: 13px !important;
}
/* Layout */
.section { padding: 56px 20px !important; }
.section-sm { padding: 36px 20px !important; }
.container { padding: 0 20px !important; }
.grid-2,
.grid-3 {
grid-template-columns: 1fr !important;
}
/* Footer */
footer {
padding: 48px 20px 20px !important;
}
.footer-inner {
flex-direction: column !important;
gap: 32px !important;
}
.footer-brand,
.footer-col {
flex: 1 1 100% !important;
min-width: unset !important;
width: 100% !important;
}
.footer-brand p {
max-width: 100% !important;
}
footer > div {
flex-direction: column !important;
gap: 28px !important;
}
footer > div > div {
flex: 1 1 100% !important;
min-width: unset !important;
width: 100% !important;
}
/* About sections */
.afw-stat-row,
.afw-quotes-grid,
.afw-reasons-grid,
.afw-why-grid,
.afw-proof-stats {
grid-template-columns: 1fr !important;
}
/* Reg form */
.reg-form,
#reg-form {
padding: 28px 20px !important;
margin: 0 16px !important;
}
}
/* ============================================================
13. RESPONSIVE — MOBILE (max-width: 480px)
============================================================ */
@media (max-width: 480px) {
/* Nav */
nav,
header nav,
.navbar {
padding: 12px 16px !important;
flex-direction: column !important;
align-items: flex-start !important;
}
nav ul,
.navbar ul {
gap: 10px !important;
font-size: 13px !important;
flex-wrap: wrap !important;
}
nav img,
.navbar img {
height: 28px !important;
}
/* Typography */
h1 { font-size: clamp(24px, 7vw, 36px) !important; }
h2 { font-size: clamp(20px, 5vw, 28px) !important; }
h3 { font-size: clamp(17px, 4vw, 22px) !important; }
/* Layout */
.section { padding: 40px 16px !important; }
.section-sm { padding: 28px 16px !important; }
.container { padding: 0 16px !important; }
/* Footer */
footer {
padding: 36px 16px 16px !important;
}
footer h4 {
font-size: 11px !important;
margin-bottom: 10px !important;
}
footer a,
footer p {
font-size: 12px !important;
}
footer ul li {
margin-bottom: 10px !important;
}
footer img {
height: 30px !important;
}
.footer-bottom {
font-size: 11px !important;
padding-top: 14px !important;
}
/* Cards */
.card,
.card-dark,
.afw-reason-card,
.afw-quote-card {
padding: 18px 16px !important;
}
/* Stat nums */
.afw-stat-num,
.card-stat .stat-num {
font-size: 28px !important;
}
/* Forms */
.reg-form,
#reg-form {
padding: 24px 16px !important;
margin: 0 8px !important;
}
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
font-size: 16px !important;
}
/* Buttons */
.btn,
input[type="submit"] {
width: 100% !important;
padding: 14px 20px !important;
font-size: 15px !important;
}
/* YouTube embed */
.video-wrap,
.yt-embed {
padding: 0 !important;
border-radius: 0 !important;
}
}
/* ============================================================
12. PAGE-SPECIFIC — INDEX.PHP / INDEXBI.PHP (HOMEPAGE)
Extracted verbatim from original style.css.
Scoped to .homepage body class to prevent conflicts.
Add class="homepage" to in index.php and indexBI.php
============================================================ */
.homepage {
font-family: 'Lora', serif;
color: #1a1a1a;
background: #faf8f5;
line-height: 1.7;
}
/* ── NAV ── */
.homepage .nav {
position: fixed !important;
top: 0 !important; left: 0 !important; right: 0 !important;
z-index: 1000 !important;
background: rgba(13,51,32,0.95) !important;
backdrop-filter: blur(10px) !important;
padding: 15px 0 !important;
transition: all 0.3s ease !important;
}
.homepage .nav-container {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 30px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
position: relative !important;
}
.homepage .nav-logo {
display: flex !important;
align-items: center !important;
gap: 12px !important;
text-decoration: none !important;
}
.homepage .nav-logo img { height: 45px !important; width: auto !important; }
.homepage .nav-logo-text {
font-family: 'Playfair Display', serif !important;
font-size: 1.3rem !important;
font-weight: 600 !important;
color: #ffffff !important;
letter-spacing: 0.03em !important;
}
.homepage .nav-logo-text span { color: #e8c668 !important; }
@media (min-width: 769px) {
.homepage .nav-links {
display: flex !important;
gap: 40px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
}
.homepage .nav-cta {
background: #d4a843 !important;
color: #0d3320 !important;
padding: 10px 25px !important;
border-radius: 4px !important;
text-decoration: none !important;
font-family: 'Lora', serif !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
transition: all 0.3s ease !important;
}
.homepage .nav-cta:hover {
background: #e8c668 !important;
transform: translateY(-2px) !important;
}
.homepage .homepage .nav-flag {
display: flex !important;
align-items: center !important;
margin-left: 15px !important;
}
.homepage .mobile-menu-btn {
display: none !important;
background: none !important;
border: none !important;
cursor: pointer !important;
padding: 5px !important;
}
.homepage .mobile-menu-btn span {
display: block !important;
width: 25px !important; height: 2px !important;
background: #ffffff !important;
margin: 5px 0 !important;
transition: all 0.3s ease !important;
}
/* ── HERO ── */
.homepage .hero {
min-height: 100vh !important;
background: linear-gradient(135deg, #0d3320 0%, #1a4d2e 50%, #2d7a4a 100%) !important;
display: flex !important;
align-items: center !important;
position: relative !important;
overflow: hidden !important;
padding-top: 80px !important;
}
.homepage .hero-container {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 30px !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 60px !important;
align-items: center !important;
position: relative !important;
z-index: 1 !important;
}
.homepage .hero-tagline {
font-family: 'Cormorant Garamond', serif !important;
font-size: 1.1rem !important;
color: #e8c668 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
margin-bottom: 20px !important;
}
.homepage .hero-title {
font-family: 'Playfair Display', serif !important;
font-size: 3.5rem !important;
font-weight: 700 !important;
color: #ffffff !important;
line-height: 1.2 !important;
margin-bottom: 25px !important;
}
.homepage .hero-title span { color: #e8c668 !important; }
.homepage .hero-description {
font-size: 1.15rem !important;
color: rgba(255,255,255,0.85) !important;
margin-bottom: 35px !important;
max-width: 500px !important;
}
.homepage .hero-buttons {
display: flex !important;
gap: 20px !important;
}
.homepage .hero-visual {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.homepage .hero-diamonds svg {
width: 350px !important;
height: 300px !important;
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3)) !important;
}
/* ── BUTTONS ── */
.homepage .btn-primary {
background: #d4a843 !important;
color: #0d3320 !important;
padding: 15px 35px !important;
border-radius: 4px !important;
text-decoration: none !important;
font-family: 'Lora', serif !important;
font-weight: 600 !important;
font-size: 1rem !important;
transition: all 0.3s ease !important;
display: inline-block !important;
}
.homepage .btn-primary:hover {
background: #e8c668 !important;
transform: translateY(-3px) !important;
}
.homepage .btn-secondary {
background: transparent !important;
color: #ffffff !important;
padding: 15px 35px !important;
border: 2px solid #ffffff !important;
border-radius: 4px !important;
text-decoration: none !important;
font-family: 'Lora', serif !important;
font-weight: 600 !important;
font-size: 1rem !important;
transition: all 0.3s ease !important;
display: inline-block !important;
}
.homepage .btn-secondary:hover {
background: #ffffff !important;
color: #0d3320 !important;
}
/* ── SECTION STYLES ── */
.homepage .section-label {
font-family: 'Cormorant Garamond', serif !important;
font-size: 0.95rem !important;
color: #d4a843 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
margin-bottom: 15px !important;
}
.homepage .section-title {
font-family: 'Playfair Display', serif !important;
font-size: 2.8rem !important;
color: #0d3320 !important;
margin-bottom: 30px !important;
line-height: 1.3 !important;
}
/* ── PHILOSOPHY ── */
.homepage .philosophy {
padding: 120px 0 !important;
background: #faf8f5 !important;
}
.homepage .philosophy-container {
max-width: 1000px !important;
margin: 0 auto !important;
padding: 0 30px !important;
text-align: center !important;
}
.homepage .philosophy-text {
font-size: 1.2rem !important;
color: #555 !important;
max-width: 750px !important;
margin: 0 auto 50px !important;
line-height: 1.9 !important;
}
.homepage .philosophy-quote {
background: #0d3320 !important;
padding: 50px 60px !important;
border-radius: 8px !important;
position: relative !important;
margin-top: 40px !important;
}
.homepage .philosophy-quote p {
font-family: 'Playfair Display', serif !important;
font-size: 1.6rem !important;
color: #ffffff !important;
font-style: italic !important;
position: relative !important;
z-index: 1 !important;
}
.homepage .philosophy-quote cite {
display: block !important;
margin-top: 20px !important;
font-family: 'Lora', serif !important;
font-size: 1rem !important;
color: #e8c668 !important;
font-style: normal !important;
}
/* ── PILLARS ── */
.homepage .pillars {
padding: 100px 0 !important;
background: #ffffff !important;
}
.homepage .pillars-container {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 30px !important;
}
.homepage .pillars-header {
text-align: center !important;
margin-bottom: 70px !important;
}
.homepage .pillars-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 40px !important;
}
.homepage .pillar-card {
background: #faf8f5 !important;
padding: 45px 35px !important;
border-radius: 8px !important;
text-align: center !important;
transition: all 0.4s ease !important;
border: 2px solid transparent !important;
}
.homepage .pillar-card:hover {
transform: translateY(-10px) !important;
border-color: #d4a843 !important;
box-shadow: 0 20px 50px rgba(26,77,46,0.1) !important;
}
.homepage .pillar-icon {
width: 80px !important; height: 80px !important;
margin: 0 auto 25px !important;
background: #0d3320 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.homepage .pillar-icon svg {
width: 40px !important; height: 40px !important;
fill: #d4a843 !important;
}
.homepage .pillar-title {
font-family: 'Playfair Display', serif !important;
font-size: 1.5rem !important;
color: #0d3320 !important;
margin-bottom: 15px !important;
}
.homepage .pillar-description {
font-size: 1rem !important;
color: #555 !important;
line-height: 1.7 !important;
}
/* ── CTA SECTION ── */
.homepage .cta-section {
padding: 100px 0 !important;
background: linear-gradient(135deg, #0d3320 0%, #1a4d2e 100%) !important;
text-align: center !important;
}
.homepage .cta-container {
max-width: 800px !important;
margin: 0 auto !important;
padding: 0 30px !important;
}
.homepage .cta-title {
font-family: 'Playfair Display', serif !important;
font-size: 2.5rem !important;
color: #ffffff !important;
margin-bottom: 20px !important;
}
.homepage .cta-text {
font-size: 1.15rem !important;
color: rgba(255,255,255,0.85) !important;
margin-bottom: 35px !important;
}
/* ── FOOTER (homepage version) ── */
.homepage .footer {
background: #0d3320 !important;
padding: 60px 0 30px !important;
}
.homepage .footer-container {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 30px !important;
}
.homepage .footer-main {
display: grid !important;
grid-template-columns: 2fr 1fr 1fr !important;
gap: 60px !important;
margin-bottom: 50px !important;
}
.homepage .footer-brand p {
color: rgba(255,255,255,0.7) !important;
margin-top: 20px !important;
font-size: 0.95rem !important;
line-height: 1.7 !important;
max-width: 300px !important;
}
.homepage .footer-links h4 {
font-family: 'Playfair Display', serif !important;
color: #ffffff !important;
font-size: 1.1rem !important;
margin-bottom: 20px !important;
}
.homepage .footer-links ul { list-style: none !important; padding: 0 !important; }
.homepage .footer-links li { margin-bottom: 12px !important; }
.homepage .footer-links a {
color: rgba(255,255,255,0.7) !important;
text-decoration: none !important;
font-size: 0.95rem !important;
transition: color 0.3s ease !important;
}
.homepage .footer-links a:hover { color: #e8c668 !important; }
.homepage .footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1) !important;
padding-top: 30px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.homepage .footer-bottom p {
color: rgba(255,255,255,0.5) !important;
font-size: 0.9rem !important;
}
/* ── COURSE TOPICS — fix the giant tick ── */
.homepage .course-topics { list-style: none !important; margin-bottom: 25px !important; padding: 0 !important; }
.homepage .course-topics li {
padding: 8px 0 8px 25px !important;
position: relative !important;
color: #1a1a1a !important;
font-size: 0.95rem !important;
}
.homepage .course-topics li::before {
content: '✓' !important;
position: absolute !important;
left: 0 !important;
color: #2d7a4a !important;
font-weight: bold !important;
font-size: 0.95rem !important;
}
/* ── RESPONSIVE — HOMEPAGE ── */
@media (max-width: 992px) {
.homepage .hero-container { grid-template-columns: 1fr !important; text-align: center !important; }
.homepage .hero-description { margin: 0 auto 35px !important; }
.homepage .hero-buttons { justify-content: center !important; }
.homepage .hero-title { font-size: 2.8rem !important; }
.homepage .pillars-grid { grid-template-columns: 1fr !important; }
.homepage .footer-main { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 768px) {
.homepage .nav-links {
display: none;
position: absolute !important;
top: 70px !important; left: 0 !important; right: 0 !important;
background: rgba(13,51,32,0.98) !important;
flex-direction: column !important;
padding: 20px 30px !important;
gap: 15px !important;
}
.homepage .nav-links.active { display: flex; }
.homepage .nav-cta { display: none !important; }
.homepage .mobile-menu-btn { display: block !important; }
.homepage .mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px) !important; }
.homepage .mobile-menu-btn.active span:nth-child(2) { opacity: 0 !important; }
.homepage .mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px) !important; }
/* .homepage .nav-flag mobile position handled globally in Section 20 */
.homepage .hero { text-align: center !important; padding: 120px 20px 60px !important; }
.homepage .hero-container { display: flex !important; flex-direction: column !important; align-items: center !important; }
.homepage .hero-title { font-size: 2.2rem !important; }
.homepage .hero-visual img, .homepage .hero-diamonds img { width: 50% !important; max-width: 175px !important; height: auto !important; }
.homepage .section-title { font-size: 2rem !important; }
.homepage .philosophy-quote { padding: 40px 30px !important; }
.homepage .philosophy-quote p { font-size: 1.3rem !important; }
.homepage .footer-bottom { flex-direction: column !important; gap: 15px !important; text-align: center !important; }
}
/* ============================================================
13. PAGE-SPECIFIC — INNER PAGES
courses.php / about.php / contact.php / outreach.php
Extracted from courses.php internal stylesheet.
Scoped where needed; most classes are page-unique already.
============================================================ */
/* ── PAGE HEADER (used by courses, about, contact, outreach) ── */
.page-header {
background: linear-gradient(135deg, #0d3320 0%, #1a4d2e 100%) !important;
padding: 150px 0 80px !important;
text-align: center !important;
width: 100% !important;
box-sizing: border-box !important;
}
.page-header h1 {
font-family: 'Playfair Display', serif !important;
font-size: 3rem !important;
color: #ffffff !important;
margin-bottom: 15px !important;
line-height: 1.2 !important;
}
.page-header p {
font-size: 1.15rem !important;
color: rgba(255,255,255,0.8) !important;
max-width: 600px !important;
margin: 0 auto !important;
}
/* ── CURRICULUM SECTION ── */
.curriculum-section {
padding: 80px 0 !important;
background: #ffffff !important;
width: 100% !important;
box-sizing: border-box !important;
}
.curriculum-container {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 30px !important;
}
.curriculum-intro {
text-align: center !important;
margin-bottom: 60px !important;
}
.curriculum-description {
font-size: 1.1rem !important;
color: #555 !important;
max-width: 700px !important;
margin: 0 auto !important;
}
.tree-visual {
display: flex !important;
justify-content: center !important;
margin-bottom: 80px !important;
overflow-x: auto !important;
}
.tree-visual svg {
max-width: 100% !important;
height: auto !important;
}
/* ── COURSE CARDS ── */
.courses-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
gap: 30px !important;
margin-top: 60px !important;
}
.course-card {
background: #faf8f5 !important;
border-radius: 12px !important;
overflow: hidden !important;
transition: all 0.4s ease !important;
border: 2px solid transparent !important;
}
.course-card:hover {
transform: translateY(-8px) !important;
border-color: #d4a843 !important;
box-shadow: 0 20px 50px rgba(26,77,46,0.12) !important;
}
.course-card-header {
background: #0d3320 !important;
padding: 25px 30px !important;
position: relative !important;
}
.course-card-header.gold {
background: linear-gradient(135deg, #b8922e 0%, #d4a843 100%) !important;
}
.course-level {
font-family: 'Cormorant Garamond', serif !important;
font-size: 0.8rem !important;
color: #e8c668 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
margin-bottom: 8px !important;
display: block !important;
}
.course-card-header.gold .course-level {
color: rgba(255,255,255,0.8) !important;
}
.course-card-header h3 {
font-family: 'Playfair Display', serif !important;
font-size: 1.4rem !important;
color: #ffffff !important;
font-weight: 600 !important;
}
.course-card-body {
padding: 30px !important;
}
.course-card-body p {
color: #555 !important;
margin-bottom: 20px !important;
line-height: 1.7 !important;
}
.course-topics {
list-style: none !important;
margin-bottom: 25px !important;
padding: 0 !important;
}
.course-topics li {
padding: 8px 0 8px 25px !important;
position: relative !important;
color: #1a1a1a !important;
font-size: 0.95rem !important;
}
.course-topics li::before {
content: '✓' !important;
position: absolute !important;
left: 0 !important;
color: #2d7a4a !important;
font-weight: bold !important;
font-size: 0.95rem !important;
}
.course-cta {
display: inline-block !important;
background: #1a4d2e !important;
color: #ffffff !important;
padding: 12px 28px !important;
border-radius: 4px !important;
text-decoration: none !important;
font-family: 'Lora', serif !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
transition: all 0.3s ease !important;
}
.course-cta:hover {
background: #0d3320 !important;
transform: translateX(5px) !important;
}
/* ── FLYERS SECTION ── */
.flyers-section {
padding: 80px 0 !important;
background: #faf8f5 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.flyers-container {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 30px !important;
text-align: center !important;
}
.flyers-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 30px !important;
margin-top: 50px !important;
}
.flyer-placeholder {
background: #ffffff !important;
border: 2px dashed #d4a843 !important;
border-radius: 12px !important;
padding: 60px 30px !important;
text-align: center !important;
}
.flyer-placeholder-icon {
width: 60px !important;
height: 60px !important;
margin: 0 auto 20px !important;
background: #faf8f5 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.flyer-placeholder-icon svg {
width: 30px !important;
height: 30px !important;
fill: #d4a843 !important;
}
.flyer-placeholder p {
color: #555 !important;
font-style: italic !important;
}
/* ── SECTION LABELS & TITLES (inner pages) ── */
.section-label {
font-family: 'Cormorant Garamond', serif !important;
font-size: 0.95rem !important;
color: #d4a843 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
margin-bottom: 15px !important;
display: block !important;
}
.section-title {
font-family: 'Playfair Display', serif !important;
font-size: 2.5rem !important;
color: #0d3320 !important;
margin-bottom: 20px !important;
line-height: 1.3 !important;
}
/* ── BLOG / OUTREACH CONTENT ── */
.blog-content {
max-width: 800px !important;
margin: 0 auto !important;
padding: 80px 30px !important;
}
.blog-content h2 {
font-family: 'Playfair Display', serif !important;
font-size: 2rem !important;
color: #0d3320 !important;
margin: 50px 0 25px !important;
line-height: 1.3 !important;
}
.blog-content p {
font-size: 1.1rem !important;
color: #555 !important;
margin-bottom: 25px !important;
}
.blog-content ul {
margin: 0 0 30px 20px !important;
color: #555 !important;
}
.blog-content ul li {
margin-bottom: 12px !important;
font-size: 1.05rem !important;
}
.blog-image {
margin: 40px 0 !important;
border-radius: 12px !important;
overflow: hidden !important;
}
.blog-image img {
width: 100% !important;
height: auto !important;
display: block !important;
}
.highlight-box {
background: #0d3320 !important;
padding: 40px !important;
border-radius: 12px !important;
margin: 50px 0 !important;
}
.highlight-box h3 {
font-family: 'Playfair Display', serif !important;
font-size: 1.5rem !important;
color: #e8c668 !important;
margin-bottom: 20px !important;
}
.highlight-box p {
color: rgba(255,255,255,0.9) !important;
margin-bottom: 15px !important;
}
.highlight-box ul {
color: rgba(255,255,255,0.85) !important;
margin-left: 20px !important;
}
.highlight-box ul li {
margin-bottom: 10px !important;
color: rgba(255,255,255,0.85) !important;
}
.highlight-box ul li strong {
color: #e8c668 !important;
font-weight: 600 !important;
}
margin-bottom: 15px !important;
}
.quote-block {
border-left: 4px solid #d4a843 !important;
padding: 20px 30px !important;
margin: 40px 0 !important;
background: #ffffff !important;
}
.quote-block p {
font-family: 'Playfair Display', serif !important;
font-size: 1.3rem !important;
color: #0d3320 !important;
font-style: italic !important;
margin: 0 !important;
}
/* ── CONTACT FORM ── */
.contact-section {
padding: 80px 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.contact-container {
max-width: 1100px !important;
margin: 0 auto !important;
padding: 0 30px !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 60px !important;
}
.contact-info h3 {
font-family: 'Playfair Display', serif !important;
font-size: 1.3rem !important;
color: #0d3320 !important;
margin-bottom: 10px !important;
}
.contact-info p {
font-size: 0.95rem !important;
color: #555 !important;
line-height: 1.7 !important;
}
.contact-form {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.form-group label {
font-family: 'Lora', serif !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
color: #1a1a1a !important;
display: block !important;
margin-bottom: 6px !important;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100% !important;
padding: 12px 16px !important;
border: 1px solid #dde8e3 !important;
border-radius: 4px !important;
font-family: 'Lora', serif !important;
font-size: 0.95rem !important;
color: #1a1a1a !important;
background: #faf8f5 !important;
box-sizing: border-box !important;
transition: border-color 0.2s !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none !important;
border-color: #1a4d2e !important;
box-shadow: 0 0 0 3px rgba(26,77,46,0.1) !important;
}
.btn-submit,
.contact-form button[type="submit"],
.contact-form input[type="submit"] {
background: #d4a843 !important;
color: #0d3320 !important;
border: none !important;
padding: 14px 32px !important;
border-radius: 4px !important;
font-family: 'Lora', serif !important;
font-weight: 600 !important;
font-size: 1rem !important;
cursor: pointer !important;
transition: background 0.2s !important;
width: 100% !important;
}
.btn-submit:hover {
background: #e8c668 !important;
}
/* ── RESPONSIVE — INNER PAGES ── */
@media (max-width: 992px) {
.contact-container {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
}
@media (max-width: 768px) {
.page-header {
padding: 120px 20px 60px !important;
text-align: center !important;
}
.page-header h1 {
font-size: 2.2rem !important;
text-align: center !important;
}
.page-header p {
text-align: center !important;
margin: 0 auto !important;
}
.section-title {
font-size: 2rem !important;
}
.courses-grid {
grid-template-columns: 1fr !important;
}
.blog-content {
padding: 50px 20px !important;
}
.blog-content h2 {
font-size: 1.6rem !important;
}
.curriculum-container {
padding: 0 16px !important;
}
}
@media (max-width: 480px) {
.page-header h1 {
font-size: 1.8rem !important;
}
.section-title {
font-size: 1.7rem !important;
}
.course-card-body {
padding: 20px !important;
}
.flyers-section,
.curriculum-section {
padding: 48px 16px !important;
}
}
/* ============================================================
14. PAGE-SPECIFIC — OUTREACH.PHP
Extracted from original outreach.php internal stylesheet.
============================================================ */
/* ── Hero Banner ── */
.hero-banner {
background: linear-gradient(135deg, #0d3320 0%, #1a4d2e 100%) !important;
padding: 150px 0 80px !important;
text-align: center !important;
width: 100% !important;
box-sizing: border-box !important;
}
.hero-banner h1 {
font-family: 'Playfair Display', serif !important;
font-size: 3rem !important;
color: #ffffff !important;
margin-bottom: 15px !important;
}
.hero-banner p {
font-size: 1.15rem !important;
color: rgba(255,255,255,0.8) !important;
max-width: 600px !important;
margin: 0 auto !important;
}
/* ── Blog image float styles ── */
.blog-image.float-left {
float: left !important;
width: 45% !important;
margin: 10px 30px 20px 0 !important;
}
.blog-image.float-right {
float: right !important;
width: 45% !important;
margin: 10px 0 20px 30px !important;
}
.blog-image.full-width {
width: 100% !important;
float: none !important;
clear: both !important;
}
.blog-image.medium {
width: 70% !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
clear: both !important;
}
.clearfix::after {
content: "" !important;
display: table !important;
clear: both !important;
}
/* ── Placeholder images ── */
.blog-image.placeholder {
background: #ffffff !important;
border: 2px dashed #d4a843 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 300px !important;
box-shadow: none !important;
border-radius: 12px !important;
}
.blog-image.placeholder .placeholder-content {
text-align: center !important;
color: #555 !important;
padding: 40px !important;
}
.blog-image.placeholder svg {
width: 60px !important;
height: 60px !important;
fill: #d4a843 !important;
opacity: 0.5 !important;
margin-bottom: 15px !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
.blog-image.placeholder p {
font-style: italic !important;
margin: 0 !important;
}
/* ── CTA Section ── */
.cta-section {
background: #ffffff !important;
padding: 60px 40px !important;
border-radius: 12px !important;
text-align: center !important;
margin: 50px 0 !important;
clear: both !important;
box-shadow: 0 10px 40px rgba(0,0,0,0.05) !important;
}
.cta-section h3 {
font-family: 'Playfair Display', serif !important;
font-size: 1.8rem !important;
color: #0d3320 !important;
margin-bottom: 15px !important;
}
.cta-section p {
color: #555 !important;
font-size: 1.1rem !important;
margin-bottom: 25px !important;
}
.cta-section .contact-info {
display: flex !important;
justify-content: center !important;
gap: 30px !important;
flex-wrap: wrap !important;
margin-bottom: 25px !important;
}
.cta-section .contact-item {
display: flex !important;
align-items: center !important;
gap: 10px !important;
color: #1a1a1a !important;
}
/* ── THE FIX — contact item SVG icons must be small ── */
.cta-section .contact-item svg {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
max-width: 22px !important;
fill: #1a4d2e !important;
display: inline-block !important;
flex-shrink: 0 !important;
}
.cta-section .contact-item a {
color: #1a4d2e !important;
text-decoration: none !important;
font-weight: 600 !important;
}
.cta-section .contact-item a:hover {
color: #d4a843 !important;
}
/* ── Responsive — outreach ── */
@media (max-width: 768px) {
.hero-banner h1 {
font-size: 2.2rem !important;
}
.blog-image.float-left,
.blog-image.float-right {
float: none !important;
width: 100% !important;
margin: 30px 0 !important;
}
.cta-section {
padding: 40px 20px !important;
}
.cta-section .contact-info {
flex-direction: column !important;
gap: 15px !important;
align-items: center !important;
}
}
/* ============================================================
15. PAGE-SPECIFIC — ABOUT.PHP
============================================================ */
/* ── About intro layout ── */
.about-section {
padding: 80px 0 !important;
background: #faf8f5 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.about-container {
max-width: 1100px !important;
margin: 0 auto !important;
padding: 0 30px !important;
}
.about-intro {
display: grid !important;
grid-template-columns: 350px 1fr !important;
gap: 60px !important;
align-items: start !important;
}
.about-photo {
position: sticky !important;
top: 100px !important;
}
.photo-frame {
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
border: 4px solid #d4a843 !important;
aspect-ratio: 3/4 !important;
background: #0d3320 !important;
}
.photo-frame img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.about-text h2 {
font-family: 'Playfair Display', serif !important;
font-size: 2rem !important;
color: #0d3320 !important;
margin-bottom: 20px !important;
line-height: 1.3 !important;
}
.about-text p {
font-size: 1.05rem !important;
color: #555 !important;
margin-bottom: 20px !important;
line-height: 1.8 !important;
}
/* ── Philosophy section ── */
.philosophy-section {
padding: 80px 0 !important;
background: #0d3320 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.philosophy-container {
max-width: 900px !important;
margin: 0 auto !important;
padding: 0 30px !important;
}
.philosophy-card {
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(212,168,67,0.3) !important;
border-radius: 12px !important;
padding: 50px 60px !important;
text-align: center !important;
}
.philosophy-card h3 {
font-family: 'Playfair Display', serif !important;
font-size: 1.8rem !important;
color: #e8c668 !important;
margin-bottom: 20px !important;
}
.philosophy-card p {
font-size: 1.1rem !important;
color: rgba(255,255,255,0.85) !important;
margin-bottom: 15px !important;
line-height: 1.8 !important;
}
.philosophy-card .arabic {
font-family: 'Playfair Display', serif !important;
font-size: 1.6rem !important;
color: #ffffff !important;
font-style: italic !important;
margin: 20px 0 !important;
}
/* ── Credentials section ── */
.credentials-section {
padding: 80px 0 !important;
background: #ffffff !important;
width: 100% !important;
box-sizing: border-box !important;
}
.credentials-container {
max-width: 1100px !important;
margin: 0 auto !important;
padding: 0 30px !important;
}
.credentials-header {
text-align: center !important;
margin-bottom: 50px !important;
}
.credentials-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
}
.credential-card {
background: #faf8f5 !important;
border: 1px solid #dde8e3 !important;
border-top: 3px solid #d4a843 !important;
border-radius: 8px !important;
padding: 28px !important;
transition: box-shadow 0.2s !important;
}
.credential-card:hover {
box-shadow: 0 8px 24px rgba(26,77,46,0.1) !important;
}
.credential-card h4 {
font-family: 'Playfair Display', serif !important;
font-size: 1.1rem !important;
color: #0d3320 !important;
margin-bottom: 10px !important;
}
.credential-card p {
font-size: 0.9rem !important;
color: #555 !important;
line-height: 1.7 !important;
}
/* ── Values section ── */
.values-section {
padding: 80px 0 !important;
background: #faf8f5 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.values-container {
max-width: 1100px !important;
margin: 0 auto !important;
padding: 0 30px !important;
}
.values-header {
text-align: center !important;
margin-bottom: 50px !important;
}
.values-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 24px !important;
}
.value-card {
text-align: center !important;
padding: 32px 20px !important;
background: #ffffff !important;
border-radius: 8px !important;
border: 1px solid #dde8e3 !important;
transition: all 0.3s ease !important;
}
.value-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 32px rgba(26,77,46,0.1) !important;
border-color: #d4a843 !important;
}
.value-icon {
width: 56px !important;
height: 56px !important;
margin: 0 auto 16px !important;
background: #0d3320 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.value-icon svg {
width: 28px !important;
height: 28px !important;
fill: #d4a843 !important;
}
.value-card h4 {
font-family: 'Playfair Display', serif !important;
font-size: 1.1rem !important;
color: #0d3320 !important;
margin-bottom: 10px !important;
}
.value-card p {
font-size: 0.88rem !important;
color: #555 !important;
line-height: 1.7 !important;
}
/* ── About CTA section ── */
.about-section ~ .cta-section,
.values-section + .cta-section {
background: linear-gradient(135deg, #0d3320 0%, #1a4d2e 100%) !important;
padding: 80px 30px !important;
text-align: center !important;
width: 100% !important;
box-sizing: border-box !important;
}
.about-section ~ .cta-section .cta-title,
.values-section + .cta-section .cta-title {
color: #ffffff !important;
font-family: 'Playfair Display', serif !important;
font-size: 2.2rem !important;
margin-bottom: 16px !important;
}
.about-section ~ .cta-section .cta-text,
.values-section + .cta-section .cta-text {
color: rgba(255,255,255,0.8) !important;
margin-bottom: 28px !important;
}
.about-section ~ .cta-section .btn-primary,
.values-section + .cta-section .btn-primary {
background: #d4a843 !important;
color: #0d3320 !important;
padding: 14px 36px !important;
border-radius: 4px !important;
font-family: 'Lora', serif !important;
font-weight: 600 !important;
font-size: 1rem !important;
text-decoration: none !important;
display: inline-block !important;
transition: background 0.2s !important;
}
.about-section ~ .cta-section .btn-primary:hover,
.values-section + .cta-section .btn-primary:hover {
background: #e8c668 !important;
}
/* ── About responsive ── */
@media (max-width: 992px) {
.about-intro {
grid-template-columns: 1fr !important;
}
.about-photo {
position: static !important;
max-width: 300px !important;
margin: 0 auto !important;
}
.credentials-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.values-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 768px) {
.about-section { padding: 50px 0 !important; }
.about-container { padding: 0 16px !important; }
.philosophy-card { padding: 32px 24px !important; }
.credentials-grid { grid-template-columns: 1fr !important; }
.values-grid { grid-template-columns: repeat(2, 1fr) !important; }
.credentials-container,
.values-container { padding: 0 16px !important; }
}
@media (max-width: 480px) {
.values-grid { grid-template-columns: 1fr !important; }
}
/* ============================================================
16. PAGE-SPECIFIC — CONTACT.PHP
============================================================ */
.contact-section {
padding: 80px 0 !important;
background: #faf8f5 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.contact-container {
max-width: 960px !important;
margin: 0 auto !important;
padding: 0 24px !important;
box-sizing: border-box !important;
width: 100% !important;
overflow: hidden !important;
}
.contact-grid {
display: flex !important;
flex-direction: column !important;
gap: 40px !important;
align-items: center !important;
width: 100% !important;
}
.contact-info {
max-width: 720px !important;
width: 100% !important;
}
.contact-info h2 {
font-family: 'Playfair Display', serif !important;
font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
color: #0d3320 !important;
margin-bottom: 16px !important;
line-height: 1.3 !important;
}
.contact-info > p {
font-size: 1rem !important;
color: #555 !important;
margin-bottom: 32px !important;
line-height: 1.8 !important;
}
.contact-details {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.contact-item {
display: flex !important;
align-items: flex-start !important;
gap: 16px !important;
}
/* ── THE FIX — contact icons must be small ── */
.contact-icon {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
background: #0d3320 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.contact-icon svg {
width: 22px !important;
height: 22px !important;
max-width: 22px !important;
fill: #d4a843 !important;
}
.contact-item-text h4 {
font-family: 'Playfair Display', serif !important;
font-size: 1rem !important;
color: #0d3320 !important;
margin-bottom: 4px !important;
}
.contact-item-text p {
font-size: 0.9rem !important;
color: #555 !important;
margin: 0 !important;
}
.contact-item-text a {
color: #1a4d2e !important;
text-decoration: none !important;
font-weight: 600 !important;
}
.contact-item-text a:hover {
color: #d4a843 !important;
}
/* ── Contact form ── */
.contact-form-wrapper {
background: #ffffff !important;
border-radius: 12px !important;
padding: 40px 48px !important;
min-width: 0 !important;
width: 100% !important;
max-width: 720px !important;
overflow: hidden !important;
box-sizing: border-box !important;
box-shadow: 0 10px 40px rgba(0,0,0,0.06) !important;
}
.contact-form-wrapper h3 {
font-family: 'Playfair Display', serif !important;
font-size: 1.5rem !important;
color: #0d3320 !important;
margin-bottom: 24px !important;
}
.form-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 16px !important;
min-width: 0 !important;
}
.form-row .form-group {
min-width: 0 !important;
}
.form-row .form-group input {
min-width: 0 !important;
width: 100% !important;
}
@media (max-width: 560px) {
.form-row {
grid-template-columns: 1fr !important;
}
.contact-form-wrapper {
padding: 24px 20px !important;
}
}
.contact-form-wrapper .form-group {
margin-bottom: 16px !important;
}
.contact-form-wrapper .form-group label {
display: block !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
color: #1a1a1a !important;
margin-bottom: 6px !important;
font-family: 'Lora', serif !important;
}
.contact-form-wrapper .form-group input,
.contact-form-wrapper .form-group select,
.contact-form-wrapper .form-group textarea {
width: 100% !important;
padding: 12px 16px !important;
border: 1px solid #dde8e3 !important;
border-radius: 4px !important;
font-family: 'Lora', serif !important;
font-size: 0.95rem !important;
color: #1a1a1a !important;
background: #faf8f5 !important;
box-sizing: border-box !important;
transition: border-color 0.2s !important;
}
.contact-form-wrapper .form-group textarea {
min-height: 140px !important;
resize: vertical !important;
}
.contact-form-wrapper .form-group input:focus,
.contact-form-wrapper .form-group select:focus,
.contact-form-wrapper .form-group textarea:focus {
outline: none !important;
border-color: #1a4d2e !important;
box-shadow: 0 0 0 3px rgba(26,77,46,0.1) !important;
background: #ffffff !important;
}
.btn-submit {
width: 100% !important;
background: #d4a843 !important;
color: #0d3320 !important;
border: none !important;
padding: 14px 32px !important;
border-radius: 4px !important;
font-family: 'Lora', serif !important;
font-weight: 600 !important;
font-size: 1rem !important;
cursor: pointer !important;
transition: background 0.2s !important;
margin-top: 8px !important;
}
.btn-submit:hover {
background: #e8c668 !important;
}
.form-note {
font-size: 0.78rem !important;
color: #999 !important;
text-align: center !important;
margin-top: 12px !important;
margin-bottom: 0 !important;
}
/* ── Contact responsive ── */
@media (max-width: 1024px) {
.contact-grid {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.contact-form-wrapper {
max-width: 640px !important;
margin: 0 auto !important;
}
.contact-info {
max-width: 640px !important;
margin: 0 auto !important;
}
.contact-info h2 {
font-size: 1.8rem !important;
}
}
@media (max-width: 768px) {
.contact-section { padding: 50px 0 !important; }
.contact-container { padding: 0 16px !important; }
.contact-form-wrapper { padding: 24px 16px !important; }
.form-row { grid-template-columns: 1fr !important; }
}
/* ── About page — quotes section inner container ── */
.afw-quotes-section {
padding: 80px 0 !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.afw-quotes-inner {
max-width: 1100px !important;
margin: 0 auto !important;
padding: 0 30px !important;
}
.afw-quotes-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 24px !important;
margin-top: 32px !important;
}
.afw-quote-card {
background: #ffffff !important;
border: 1px solid rgba(212,168,67,0.3) !important;
border-left: 4px solid #d4a843 !important;
border-radius: 0 8px 8px 0 !important;
padding: 24px !important;
box-sizing: border-box !important;
}
.afw-quote-text {
font-family: 'Lora', serif !important;
font-size: 0.95rem !important;
font-style: italic !important;
color: #1a1a1a !important;
line-height: 1.8 !important;
margin-bottom: 12px !important;
}
.afw-quote-attr {
font-size: 0.82rem !important;
color: #d4a843 !important;
font-weight: 600 !important;
display: block !important;
}
.afw-section-label {
font-size: 0.78rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #1a4d2e !important;
display: block !important;
margin-bottom: 12px !important;
}
.afw-section-heading {
font-family: 'Playfair Display', serif !important;
font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
font-weight: 700 !important;
color: #0d3320 !important;
max-width: 680px !important;
line-height: 1.35 !important;
margin-bottom: 8px !important;
}
.afw-divider {
border: none !important;
border-top: 1px solid #dde8e3 !important;
margin: 48px 0 0 !important;
}
/* ── About bio section inner container ── */
.afw-bio-section {
padding: 80px 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.afw-bio-inner {
max-width: 900px !important;
margin: 0 auto !important;
padding: 0 30px !important;
}
.afw-eyebrow {
font-size: 0.78rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #d4a843 !important;
display: block !important;
margin-bottom: 16px !important;
text-align: center !important;
}
.afw-bio-headline {
font-family: 'Playfair Display', serif !important;
font-size: clamp(1.4rem, 3vw, 2.2rem) !important;
font-weight: 700 !important;
color: #faf8f5 !important;
text-align: center !important;
margin-bottom: 32px !important;
line-height: 1.35 !important;
}
.afw-bio-body {
font-size: 1rem !important;
color: rgba(250,248,245,0.85) !important;
line-height: 1.85 !important;
margin-bottom: 20px !important;
max-width: 820px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.afw-stat-row {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
margin: 40px auto !important;
max-width: 820px !important;
}
.afw-stat-box {
background: rgba(0,0,0,0.2) !important;
border: 1px solid rgba(212,168,67,0.25) !important;
border-radius: 12px !important;
padding: 28px 16px !important;
text-align: center !important;
box-sizing: border-box !important;
}
.afw-stat-num {
font-family: 'Playfair Display', serif !important;
font-size: 2.4rem !important;
font-weight: 700 !important;
color: #d4a843 !important;
display: block !important;
line-height: 1 !important;
margin-bottom: 8px !important;
}
.afw-stat-lbl {
font-size: 0.82rem !important;
color: rgba(250,248,245,0.75) !important;
line-height: 1.5 !important;
display: block !important;
}
.afw-stat-source {
font-size: 0.78rem !important;
color: rgba(250,248,245,0.5) !important;
font-style: italic !important;
text-align: center !important;
margin: -24px auto 32px !important;
max-width: 820px !important;
}
/* ── Responsive about extras ── */
@media (max-width: 768px) {
.afw-quotes-grid {
grid-template-columns: 1fr !important;
}
.afw-stat-row {
grid-template-columns: 1fr !important;
}
.afw-bio-inner,
.afw-quotes-inner {
padding: 0 16px !important;
}
.afw-bio-section,
.afw-quotes-section {
padding: 56px 0 !important;
}
}
/* ============================================================
17. MOBILE NAV — FLAG IMAGE HIDE + BM TEXT LINK
On mobile: hide the flag image, show a "BM" text pseudo-link
The .nav-flag tag already has href="/" so we just
hide the ![]()
inside it and show text content instead.
============================================================ */
/* Mobile — hide flag entirely; language link moves inside hamburger menu */
@media (max-width: 768px) {
.nav-flag,
.nav-flag-bi,
.nav-flag-bm,
a.nav-flag {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
}
/* ============================================================
18. MOBILE NAV — LANGUAGE LINK INSIDE HAMBURGER MENU
.nav-lang-item is a added inside
in both menu.php and menuBM.php.
Desktop: hidden (flag handles language switching).
Mobile: visible inside the dropdown menu.
============================================================ */
/* Hide language menu item on desktop */
.nav-lang-item {
display: none !important;
}
@media (max-width: 768px) {
/* Show inside hamburger menu whenever nav-links is visible */
.nav-links .nav-lang-item {
display: list-item !important;
}
.nav-lang-item a {
color: #e8c668 !important;
font-size: 1rem !important;
padding: 12px 0 6px !important;
display: block !important;
font-weight: 600 !important;
letter-spacing: 0.05em !important;
text-decoration: none !important;
border-top: 1px solid rgba(255,255,255,0.15) !important;
margin-top: 8px !important;
}
}
/* ============================================================
19. MOBILE NAV — LOGO TEXT ABBREVIATION
On mobile: hide "Al Falah Wealth" text, show "AFW" instead.
The contains the full name.
============================================================ */
/* Desktop — show full name normally */
.nav-logo-text {
white-space: nowrap !important;
}
/* Mobile — hide logo text completely, logo image only */
@media (max-width: 768px) {
.nav-logo-text {
display: none !important;
}
.nav-logo::after {
content: '' !important;
display: none !important;
}
}
/* Extra insurance — hide flag images directly on mobile */
@media (max-width: 768px) {
.nav-flag img,
.nav-flag-bi img,
.nav-flag-bm img,
img[src*="Flag_BM"],
img[src*="Flag_NZ"],
img[src*="flag_BM"],
img[src*="flag_NZ"] {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
}
}
/* ============================================================
RESPONSIVE — MERGED FROM ORIGINAL HTML FILES
============================================================ */
/* ============================================================
MERGED RESPONSIVE CSS — extracted from original HTML files
index.html + courses.html + about.html + contact.html
============================================================ */
/* ── 992px — Tablet ── */
@media (max-width: 992px) {
/* index — hero stacks */
.hero-container {
grid-template-columns: 1fr;
text-align: center;
}
.hero-content { order: 1; }
.hero-visual { order: 0; margin-bottom: 40px; }
.hero-description { margin: 0 auto 35px; }
.hero-buttons { justify-content: center; }
.hero-title { font-size: 2.8rem; }
.pillars-grid { grid-template-columns: 1fr; }
/* about — bio stacks */
.about-intro { grid-template-columns: 1fr; text-align: center; }
.about-photo { display: flex; justify-content: center; }
/* contact — grid stacks */
.contact-grid { grid-template-columns: 1fr; gap: 60px; }
/* all pages — footer stacks */
.footer-main { grid-template-columns: 1fr; gap: 40px; }
}
/* ── 768px — Mobile ── */
@media (max-width: 768px) {
/* ── NAV — identical across all pages ── */
.nav-links {
display: none;
position: absolute;
top: 70px;
left: 0;
right: 0;
background: rgba(13, 51, 32, 0.98);
flex-direction: column;
padding: 20px 30px;
gap: 15px;
}
.nav-links.active {
display: flex;
}
.nav-cta {
display: none;
}
.nav-logo-text {
display: none;
}
.nav-flag {
display: none;
}
.mobile-menu-btn {
display: block;
}
.mobile-menu-btn.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* ── PAGE HEADER — courses, about, contact ── */
.page-header {
text-align: center;
padding: 120px 20px 60px;
}
.page-header h1 {
font-size: 2.2rem;
text-align: center;
}
.page-header p {
text-align: center;
margin: 0 auto;
}
/* ── INDEX — hero mobile ── */
.hero-title { font-size: 2.2rem; }
.hero-buttons {
flex-direction: column;
align-items: center;
}
.section-title { font-size: 2rem; }
.philosophy-quote { padding: 40px 30px; }
.philosophy-quote p { font-size: 1.3rem; }
.footer-bottom {
flex-direction: column;
gap: 15px;
text-align: center;
}
/* ── COURSES — grid stacks ── */
.courses-grid { grid-template-columns: 1fr; }
/* ── ABOUT — philosophy card ── */
.philosophy-card { padding: 40px 25px; }
.philosophy-card h3 { font-size: 1.6rem; }
/* ── CONTACT — form adjustments ── */
.contact-form-wrapper { padding: 30px 25px; }
.form-row { grid-template-columns: 1fr; }
}
/* ── Language switcher link ── */
.nav-lang-link {
color: #d4a843 !important;
font-family: 'Lora', serif !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
}
.nav-lang-link:hover {
color: #e8c668 !important;
}