/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
font-weight: 400;
}
body{
top: 0px !important;
line-height: 1.6;
color: #344621;
background: #fefae0;
position: static !important;
top: 0px !important;
}
.goog-te-gadget {
display: block !important;
}
#google_translate_element,
select.goog-te-combo {
position: fixed;
z-index: 999;
top: -999px;
}
.skiptranslate {
display: none;
}
#goog-gt-tt{
display: none !important;
}
/* Match the common dynamic class prefix used by the translate overlay */
font{
background: transparent !important;
-webkit-box-shadow: none !important;
}
.nav a font:hover{
color: #344621;
font-weight: 600;
}
.footer-col ul {
padding-left: 0rem !important;
}
@font-face {
font-family: 'Crimson Pro';
src: url('../fonts/CrimsonPro-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
/* Center primary/secondary buttons on mobile inside their parent containers */
@media (max-width: 768px) {
.btn-primary, .btn-light, .btn-outline {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
@font-face {
font-family: 'Crimson Pro';
src: url('../fonts/CrimsonPro-Bold.ttf') format('truetype');
font-weight: 700;
font-style: bold;
}
@font-face {
font-family: 'Crimson Pro';
src: url('../fonts/CrimsonPro-Italic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
#chat-widget-container {
bottom: 18px !important;
}
/* Fix body shift caused by Translate */
/* Make header tags render with the same (non-bold) weight and inherit the body font — this keeps the HTML structure while avoiding bold headings per the design request. */
h1, h2, h3, h4, h5, h6, .font-header {
font-family: 'Crimson Pro', serif;
font-weight: 100;
}
/* Ensure strong/b and other bold semantics aren't visually bold */
strong, b {
font-weight: 400;
}
/* Utility class to force non-bold on any element */
.no-bold {
font-weight: 400 !important;
}
/* Prevent browser/user-agent default italic on from affecting layout. Make render normal by default so it doesn't unintentionally italicize text. Use the `.use-italic` class when you need italics intentionally. */
/* .italic-font{
font-size: ;
}
*/
/* Utility class to opt-in to italics where needed */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
@media (max-width: 720px) {
table {
table-layout: auto;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
}
/* =====================================================
SVG Icon Color Styles
- .icon (white icons - used in buttons, headers)
- .green-icon (green icons - used for feature highlights)
- .white-icon (explicit white icons)
===================================================== */
/* Base icon styles - default white color for buttons and dark backgrounds */
.icon {
width: 15px;
}
/* Green icon style for feature cards and highlights */
.green-icon {
width: 30px;
margin: 5px;
filter: brightness(0) saturate(100%) invert(24%) sepia(15%) saturate(1200%) hue-rotate(60deg) brightness(95%) contrast(90%); /* #344621 green */
}
/* White icon style - explicit white */
.white-icon {
/* color: white; */
width: 15px;
filter: brightness(0) invert(1); /* Makes SVG white */
}
/* Icons in primary buttons (white on green background) */
.btn-primary .icon,
.btn-primary object {
filter: brightness(0) invert(1);
}
/* Icons in light/outline buttons (green on light background) */
.btn-light .icon,
.btn-light object,
.btn-outline .icon,
.btn-outline object {
filter: brightness(0) saturate(100%) invert(24%) sepia(15%) saturate(1200%) hue-rotate(60deg) brightness(95%) contrast(90%);
}
/* Header support button icon (white) */
.btn-support .icon,
.btn-support object {
filter: brightness(0) invert(1);
}
/* Mobile controls icons (white on dark background) */
.mobile-controls .icon,
.mobile-controls object {
filter: brightness(0) invert(1);
}
/* Ensure embedded objects/SVGs inside the mobile controls don't steal pointer events
so the parent button reliably receives clicks (fixes non-responsive burger). */
.mobile-menu-btn object,
.mobile-menu-btn svg {
pointer-events: none;
}
/* Pricing card icons */
.pricing-card .icon,
.pricing-card object {
width: 40px;
height: 20px;
}
/* Featured pricing card (dark background) - white icons */
.pricing-card.featured .icon,
.pricing-card.featured object,
.pricing-card.featured .green-icon {
filter: brightness(0) invert(1);
}
/* Non-featured pricing cards - green icons */
.pricing-card:not(.featured) .icon,
.pricing-card:not(.featured) object {
filter: brightness(0) saturate(100%) invert(24%) sepia(15%) saturate(1200%) hue-rotate(60deg) brightness(95%) contrast(90%);
}
/* CTA section icons (green on light button) */
.cta-box .icon,
.cta-box object {
filter: brightness(0) saturate(100%) invert(24%) sepia(15%) saturate(1200%) hue-rotate(60deg) brightness(95%) contrast(90%);
}
/* Footer icons - keep original colors for payment methods */
.payment-methods img,
.payment-methods object {
filter: none;
}
/* Remove margin from icons inside pricing cards for consistent spacing */
.pricing-card .icon,
.pricing-card .green-icon {
margin: 0;
}
/* Header */
.header {
background: #fefae0;
border-bottom: 1px solid #e5e5e5;
padding: 16px 24px;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
.header.sticky-header {
position: fixed;
background: #fefae0;
border-bottom: 1px solid #e5e5e5;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header .container {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: #344621;
font-family: 'Crimson Pro', serif;
}
.header-logo{
margin-right: 20px;
}
.logo span {
font-size: 20px;
font-weight: 600;
font-family: 'Crimson Pro', serif;
color: #344621;
}
.nav {
display: flex;
align-items: center;
gap: 32px;
}
.nav a {
text-decoration: none;
color: #666;
font-size: 14px;
transition: color 0.3s;
font-weight: 400;
}
.nav a:hover, .nav a.active {
color: #344621;
font-weight: 600;
}
.header-actions {
display: flex;
align-items: center;
gap: 12px;
}
/* Mobile-only header controls (hidden by default on desktop) */
.mobile-controls {
display: none;
}
.language-dropdown {
position: relative;
}
.btn-lang {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 4px;
transition: background 0.3s;
}
.btn-lang:hover {
background: rgba(0, 0, 0, 0.05);
}
.btn-lang .flag-icon {
width: 20px;
height: 20px;
object-fit: cover;
border-radius: 2px;
}
.btn-lang .arrow {
font-size: 10px;
color: #666;
}
.language-menu {
position: absolute;
top: 100%;
right: 0;
background: white;
border: 1px solid #e5e5e5;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
min-width: 180px;
margin-top: 8px;
display: none;
z-index: 1000;
}
.language-menu.show {
display: block;
}
.language-option {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
text-decoration: none;
color: #344621;
font-size: 14px;
transition: background 0.2s;
}
/* .language-option:hover {
background: #f5f5f5;
} */
.language-option img {
width: 20px;
height: 15px;
object-fit: cover;
border-radius: 2px;
}
.btn-icon {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
}
.btn-support {
background: #344621;
color: white;
padding: 8px 20px;
border-radius: 4px;
text-decoration: none;
font-size: 14px;
transition: background 0.3s;
display: flex;
align-items: center;
gap: 6px;
}
.btn-support i {
font-size: 16px;
}
.btn-support:hover {
background: #3d4d34;
}
/* Hero Section */
.hero {
background-color: #e8e9f3;
background-image: url('../images/hero-background.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 80px 24px;
padding-top: 120px; /* Account for header height */
padding-bottom: 0; /* Ticker will be at the bottom */
position: relative;
overflow: visible; /* Allow hero-image to extend outside */
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero-text {
margin-left: 100px;
margin-bottom: 90px;
}
.feature-card.feature-card-bg,.feature-card-bg-1,.join-bg-1,.join-bg-2 {
position: relative;
/* containing block for pseudo */
overflow: hidden;
/* clip the pseudo-element so it behaves as a cover */
}
.join-bg-1::before{
position: relative;
/* containing block for pseudo */
overflow: hidden;
content: '';
position: absolute;
/* position image lower-right so text at top-left stays clear */
right: 8px;
bottom:30px;
width: 100%;
height: calc(100% - 24px);
/* use only the image you added in the Features section */
background-image: url('../images/sign-now-bg-left.png');
background-repeat: no-repeat;
/* size by height so people are not cropped */
background-size: auto 92%;
background-position: right 8px bottom 6px;
pointer-events: none;
/* Small chevron used by footer toggles */
.chev-icon {
width: 16px;
height: auto;
margin-left: 8px;
display: inline-block;
vertical-align: middle;
}
z-index: 1;
/* behind card content (which uses z-index:2) */
filter: none;
opacity: 1;
border-radius: 6px;
/* slightly match card rounding */
transform: translateY(6%);
/* lo
/* */
}
.feature-card-bg-1::before {
content: '';
position: absolute;
/* position image lower-right so text at top-left stays clear */
right: 8px;
width: 100%;
height: calc(100% - 24px);
/* use only the image you added in the Features section */
background-image: url('../images/connect_with_learners.png');
background-repeat: no-repeat;
/* size by height so people are not cropped */
background-size: auto 92%;
background-position: right 8px bottom 6px;
pointer-events: none;
z-index: 1;
/* behind card content (which uses z-index:2) */
filter: none;
opacity: 1;
border-radius: 6px;
/* slightly match card rounding */
transform: translateY(6%);
/* lower the visual o */
}
/* Make the portrait act as a cover on the right side of the card */
.feature-card.feature-card-bg::before {
content: '';
position: absolute;
/* position image lower-right so text at top-left stays clear */
right: 8px;
bottom:-30px;
width: 100%;
height: calc(100% - 24px);
/* use only the image you added in the Features section */
background-image: url('../images/girl_with_laptop-removebg-preview.png');
background-repeat: no-repeat;
/* size by height so people are not cropped */
background-size: auto 92%;
background-position: right 8px bottom 6px;
pointer-events: none;
z-index: 1;
/* behind card content (which uses z-index:2) */
filter: none;
opacity: 1;
border-radius: 6px;
/* slightly match card rounding */
transform: translateY(6%);
/* lower the visual object slightly */
}
/* Repatcha */
@media screen and (max-width: 375px) {
.g-recaptcha {
-webkit-transform: scale(0.77);
transform: scale(0.77);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
}
/* Accessibility helper - visually hidden (screen-reader only) */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* FAQ price table styling (desktop design inspired) */
.faq-price-table {
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 24px 0;
}
.faq-price-table caption {
caption-side: top;
text-align: left;
font-weight: 600;
padding: 10px 12px;
color: #344621;
}
.faq-price-table {
/* make table use fixed layout so columns distribute evenly */
table-layout: fixed;
border-collapse: collapse;
}
.faq-price-table thead th {
background: #33582a; /* dark olive header */
color: #ffffff;
font-weight: 700;
padding: 10px 12px; /* slightly reduced padding for a slimmer look */
text-align: left;
border-bottom: 1px solid #cfe4b6; /* thinner divider */
font-size: 16px;
}
.faq-price-table tbody td {
padding: 8px 12px; /* reduce vertical padding to make rows less tall */
vertical-align: middle;
color: #344621;
border-top: 1px solid rgba(174,191,145,0.28); /* slightly lighter thin line */
word-wrap: break-word;
}
.faq-price-table tbody tr:nth-child(odd) td {
background: #eaf1da;
}
.faq-price-table tbody tr:nth-child(even) td {
background: #f6f9ef;
}
.faq-price-table tbody tr td:first-child {
font-weight: 600;
}
/*
=================================================================
13 - TOOLTIPS (HOVER DESTINATION STYLES)
=================================================================
*/
/* Show destination tooltip for buttons/links on hover.
- Anchors use their `href` via `attr(href)`.
- Buttons and other clickable elements should have `data-href` (populated by JS fallback) and use `attr(data-href)`.
This is a progressive enhancement: if an element has no href/data-href nothing is shown.
*/
/* Only apply tooltip visuals to elements that explicitly have `data-href`.
This prevents primary buttons and header links from showing the custom
destination tooltip so they behave like normal site navigation. */
[data-href] {
position: relative;
}
/* Elements using data-href (buttons, divs used as nav) */
button[data-href]:hover::after, [data-href]:hover::after {
content: attr(data-href);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.8);
color: #fff;
font-size: 12px;
padding: 6px 8px;
border-radius: 4px;
white-space: nowrap;
z-index: 9999;
pointer-events: none;
opacity: 0;
transition: opacity 120ms ease-in-out;
max-width: 90vw;
overflow: hidden;
text-overflow: ellipsis;
}
/* Show the tooltip when hovered */
button[data-href]:hover::after, [data-href]:hover::after {
opacity: 1;
}
/* Small arrow for data-href tooltips */
[data-href]::before, button[data-href]::before {
content: '';
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: rgba(0,0,0,0.8);
z-index: 9998;
opacity: 0;
transition: opacity 120ms ease-in-out;
}
[data-href]:hover::before, button[data-href]:hover::before {
opacity: 1;
}
/* Responsive: allow horizontal scrolling on narrow viewports */
@media (max-width: 720px) {
.faq-price-table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.faq-price-table thead, .faq-price-table tbody, .faq-price-table tr, .faq-price-table th, .faq-price-table td {
display: table-cell; /* keep normal table behaviors inside scrollable block */
}
.faq-price-table thead th {
white-space: nowrap;
}
}
@media (max-width: 900px) {
/* hide portrait overlay on small screens */
.feature-card.feature-card-bg::before {
display: none;
}
}
@media (max-width: 1045px) {
.nav a{
font-size: 2cqmin;
}
}
.feature-card.feature-card-bg {
color: #344621;
/* restore dark text so it reads on the light card area */
}
.feature-card.feature-card-bg p, .feature-card.feature-card-bg h3 {
position: relative;
z-index: 2;
color: inherit;
text-shadow: none;
}
/* Keep hero content above the portrait */
.hero-content {
position: relative;
z-index: 1;
}
@media (max-width: 1100px) {
.hero-image img {
max-height: 380px;
}
}
@media (max-width: 768px) {
.hero-content {
display: flex !important;
flex-direction: column !important;
text-align: center;
gap: 40px;
}
.hero-text {
order: 1 !important;
margin: 0 !important;
}
.hero-image {
order: 2 !important;
}
.hero-image img {
max-height: 320px;
}
}
.hero-decorations {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.decoration-square {
position: absolute;
background: #7b92f3;
opacity: 0.8;
border-radius: 0;
}
.decoration-square:nth-child(1) {
top: 0;
left: 60px;
width: 60px;
height: 60px;
}
.decoration-square:nth-child(2) {
top: 0;
right: 80px;
width: 80px;
height: 80px;
}
.decoration-square:nth-child(3) {
bottom: 40px;
left: 0;
width: 70px;
height: 70px;
}
.decoration-square:nth-child(4) {
bottom: 0;
right: 0;
width: 100px;
height: 100px;
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
position: relative;
z-index: 1;
max-width: 1400px;
margin: 0 auto;
}
.hero-title {
font-size: 48px;
line-height: 1.3;
margin-bottom: 24px;
color: #344621;
font-weight: 400;
}
.hero-title em {
font-style: italic;
font-weight: 700;
}
.hero-subtitle {
font-size: 16px;
font-weight: 400;
margin-bottom: 32px;
color: #344621;
line-height: 1.6;
}
.hero-subtitle strong {
font-weight: 600;
}
.hero-image {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
}
.hero-image img {
max-width: 100%;
height: auto;
max-height: 480px;
object-fit: contain;
}
/* Buttons */
.btn-primary {
background: #344621;
color: white;
padding: 12px 24px;
border-radius: 4px;
border: none;
font-size: 14px;
font-weight: 500;
cursor: pointer;
/* display: inline-flex; */
align-items: center;
justify-content: center;
gap: 8px;
transition: background .18s, transform .18s, box-shadow .18s;
text-align: center;
text-decoration: none;
}
/* Slight lighter hover + lift for primary buttons */
.btn-primary:hover {
background: #415e3a;
/* lighter than the default */
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}
.btn-light {
background: transparent;
color: white;
padding: 12px 22px;
border-radius: 4px;
border: 1px solid white;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
width: 100%;
}
.btn-light:hover {
background: #f3f6ef;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}
.btn-outline {
background: transparent;
color: #344621;
padding: 12px 32px;
border-radius: 4px;
border: 2px solid #344621;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
text-align: center;
display: inline-block;
text-decoration: none;
}
.btn-outline:hover {
background: #f5f5f5;
}
.btn-outline-custom {
background: white;
color: #344621;
padding: 12px 24px;
border-radius: 4px;
border: 2px solid #344621;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
text-align: center;
display: inline-block;
text-decoration: none;
}
.btn-outline-custom .icon,
.btn-outline-custom object {
filter: brightness(0) saturate(100%) invert(24%) sepia(15%) saturate(1200%) hue-rotate(60deg) brightness(95%) contrast(90%);
}
.btn-outline-custom:hover {
background: transparent;
color: white;
border-color: white;
}
.btn-outline-custom:hover .icon,
.btn-outline-custom:hover object {
filter: brightness(0) invert(1);
}
.thumbnail{
width: 150px;
}
.full-width {
width: 100%;
margin-top: 20px;
}
/* Ticker */
.ticker {
background: #CCD5AE;
border-top: 2px solid #344621;
border-bottom: 2px solid #344621;
padding: 12px 0;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
}
.ticker-content {
display: flex;
animation: scroll 20s linear infinite;
white-space: nowrap;
}
.ticker-item {
display: flex;
align-items: center;
gap: 12px;
margin: 0 32px;
padding-bottom: 1px;
}
.ticker-item span {
display: inline-block;
/* match the icon height so the text centers vertically */
line-height: 20px;
padding-bottom: 2px;
/* small visual nudge to align with the icon */
font-style: italic;
font-family: 'Crimson Pro', serif;
font-size: 20px;
font-weight: 500;
}
.ticker-item img {
width: 20px;
}
.ticker-dot {
width: 24px;
height: 24px;
background: #344621;
border-radius: 50%;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Features Section */
.features {
padding: 80px 24px;
}
.section-title {
text-align: left;
font-size: 48px;
margin-bottom: 48px;
line-height: 1.3;
font-weight: 400;
color: #344621;
}
.section-title-center{
text-align: center;
}
.section-title strong {
color: #344621;
font-weight: 700;
}
.section-title em {
font-style: italic;
font-weight: 700;
}
span.text-light {
color: #99a87f !important;
font-weight: 400;
}
.features-grid {
display: grid;
/* 5 columns lets us make 3/5 = 60% and 2/5 = 40% spans for precise control */
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 1fr;
/* make rows equal-height so cards match heights */
gap: 24px;
align-items: stretch;
}
/* Place cards precisely so each row has two cards with asymmetric widths Top row: toolkit (large) | mentors (small) Bottom: connect (small) | terms (large) Implemented on a 4-column grid: large = span 3 columns, small = span 1 column. */
.feature-card {
box-sizing: border-box;
min-height: 0;
height: 100%;
}
.feature-card.toolkit {
grid-column: 1 / span 3;
grid-row: 1;
}
.feature-card.mentors {
grid-column: 4 / span 2;
grid-row: 1;
}
.feature-card.connect {
grid-column: 1 / span 2;
grid-row: 2;
}
.feature-card.terms {
grid-column: 3 / span 3;
grid-row: 2;
}
@media (max-width: 1100px) {
.feature-card.toolkit, .feature-card.mentors, .feature-card.connect, .feature-card.terms {
min-height: 200px;
}
}
@media (max-width: 900px) {
.features-grid {
grid-template-columns: 1fr;
grid-auto-rows: auto;
/* revert to auto rows on small screens */
grid-template-rows: none;
}
.feature-card.toolkit, .feature-card.mentors, .feature-card.connect, .feature-card.terms {
grid-column: auto;
grid-row: auto;
width: 100%;
min-height: 160px;
height: auto;
/* allow natural height on mobile */
}
}
.feature-card {
padding: 32px;
border-radius: 8px;
position: relative;
overflow: hidden;
min-height: 0;
display: flex;
flex-direction: column;
height: 100%;
}
.feature-card h3 {
font-size: 20px;
margin-bottom: 32px;
color: #344621;
font-weight: 600;
}
.feature-card.toolkit h3 {
position: relative;
z-index: 2;
text-align: left;
align-self: flex-start;
}
.feature-card.toolkit {
background: #CCD5AE;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
overflow: hidden;
}
/* Ensure the toolkit title (uses a in the markup) is left-aligned */
.feature-card.toolkit p {
width: 100%;
text-align: left;
align-self: flex-start;
margin: 0 0 16px 0;
color: #344621;
font-weight: 500;
}
.toolkit-items {
background: #344621;
padding: 24px;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
z-index: 2;
width: 200px;
}
.toolkit-item {
background: #e8ead4;
padding: 12px 16px;
border-radius: 4px;
margin-bottom: 0;
display: flex;
align-items: center;
gap: 12px;
font-weight: 500;
font-size: 14px;
color: #344621;
}
/* Make toolkit items behave like interactive controls */
.toolkit-item {
border: none;
cursor: pointer;
transition: background .15s ease, transform .12s ease, box-shadow .12s ease;
}
.toolkit-item:hover, .toolkit-item:focus {
background: #f3f4eb;
/* subtle lighter background */
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(0,0,0,0.06);
outline: none;
}
.toolkit-item:focus-visible {
box-shadow: 0 0 0 4px rgba(65,94,58,0.12);
}
.toolkit-item i {
font-size: 18px;
color: #344621;
width: 20px;
text-align: center;
}
.toolkit-item:last-child {
margin-bottom: 0;
}
.feature-card.mentors {
background: #e8dff5;
}
.feature-card.connect {
background: #d9edf7;
}
.feature-card.terms {
background: #C8D5B9;
display: flex;
flex-direction: column;
}
.feature-placeholder {
height: 160px;
background: linear-gradient(135deg, #ddd, #ccc);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
}
.terms-buttons {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 6px;
margin-top: auto;
}
.terms-buttons button {
background: #344621;
color: white;
padding: 10px 6px;
border-radius: 4px;
border: none;
cursor: pointer;
font-size: 11px;
font-weight: 500;
text-align: center;
transition: all 0.3s;
min-height: 38px;
}
.terms-buttons button.light {
background: #a8b88f;
opacity: 0.7;
color: #344621;
}
.terms-buttons button.dark {
background: #344621;
opacity: 1;
color: white;
}
/* Button sizes */
.terms-buttons button:nth-child(1) {
grid-column: span 2;
}
.terms-buttons button:nth-child(2) {
grid-column: span 4;
}
.terms-buttons button:nth-child(3) {
grid-column: span 2;
}
.terms-buttons button:nth-child(4) {
grid-column: span 1;
}
.terms-buttons button:nth-child(5) {
grid-column: span 4;
}
.terms-buttons button:nth-child(6) {
grid-column: span 2;
}
.terms-buttons button:nth-child(7) {
grid-column: span 1;
}
.terms-buttons button:nth-child(8) {
grid-column: span 3;
}
.terms-buttons button:nth-child(9) {
grid-column: span 3;
}
.terms-buttons button:nth-child(10) {
grid-column: span 2;
}
.terms-buttons button:nth-child(11) {
grid-column: span 1;
}
.terms-buttons button:nth-child(12) {
grid-column: span 1;
}
.terms-buttons button:nth-child(13) {
grid-column: span 8;
}
.terms-buttons button:hover {
opacity: 0.85;
transform: translateY(-1px);
}
/* Build Website Section */
.build-website {
padding: 80px 24px;
}
.build-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.build-preview {
position: relative;
}
.preview-decorations {
position: absolute;
width: 100%;
height: 100%;
}
.preview-decorations .decoration {
position: absolute;
background: #E8A87C;
border-radius: 8px;
}
.preview-decorations .decoration:nth-child(1) {
top: -40px;
left: -40px;
width: 80px;
height: 80px;
}
.preview-decorations .decoration:nth-child(2) {
top: 0;
left: 40px;
width: 64px;
height: 64px;
background: #D4937C;
}
.preview-decorations .decoration:nth-child(3) {
bottom: -40px;
left: 80px;
width: 48px;
height: 48px;
}
.preview-decorations .decoration:nth-child(4) {
bottom: 80px;
left: -20px;
width: 56px;
height: 56px;
background: #F5C4A3;
}
.browser-window {
background: linear-gradient(135deg, #555, #222);
border-radius: 8px;
padding: 32px;
position: relative;
z-index: 1;
}
.browser-header {
background: white;
border-radius: 8px 8px 0 0;
padding: 16px;
margin-bottom: 16px;
}
.browser-dots {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.browser-dots span {
width: 12px;
height: 12px;
border-radius: 50%;
}
.browser-dots span:nth-child(1) {
background: #ff5f56;
}
.browser-dots span:nth-child(2) {
background: #ffbd2e;
}
.browser-dots span:nth-child(3) {
background: #27c93f;
}
.browser-bar {
background: #2563eb;
padding: 12px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 8px;
color: white;
}
.browser-icon {
width: 24px;
height: 24px;
background: white;
border-radius: 50%;
}
.browser-content {
background: #2C5F7F;
color: white;
padding: 32px;
border-radius: 8px;
}
.browser-content h3 {
font-size: 32px;
}
.browser-badge {
position: absolute;
bottom: -24px;
left: 25%;
background: #E8734C;
color: white;
padding: 12px 24px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.badge-icon {
width: 24px;
height: 24px;
background: white;
border-radius: 50%;
}
.build-steps {
text-align: center;
}
.build-steps h3 {
font-size: 32px;
margin-bottom: 32px;
color: #344621;
}
.steps-list {
margin-bottom: 32px;
}
.step-item {
display: flex;
gap: 16px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
.step-number {
font-size: 24px;
font-weight: bold;
font-style: italic;
}
.step-item p {
font-weight: 500;
}
.cta-section {
padding: 80px 24px;
}
.cta-box {
background: #344621;
border-radius: 8px;
padding: 64px;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-decorations {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.cta-decorations div {
position: absolute;
background: #5a6d4d;
opacity: 0.5;
border-radius: 8px;
}
.cta-decorations div:nth-child(1) {
top: 40px;
left: 40px;
width: 80px;
height: 80px;
}
.cta-decorations div:nth-child(2) {
top: 80px;
right: 80px;
width: 96px;
height: 96px;
}
.cta-decorations div:nth-child(3) {
bottom: 40px;
left: 25%;
width: 64px;
height: 64px;
}
.cta-decorations div:nth-child(4) {
bottom: 80px;
right: 25%;
width: 80px;
height: 80px;
}
.cta-box h2 {
font-size: 36px;
color: white;
margin-bottom: 32px;
position: relative;
z-index: 1;
}
.cta-box button {
position: relative;
z-index: 1;
}
/* Join Us Section */
.join-us {
padding: 80px 24px;
}
.join-subtitle {
font-weight: 500;
margin-bottom: 48px;
}
.join-content {
display: grid;
grid-template-columns: 30% 70%; /* try 30% stats / 70% images as requested */
gap: 24px; /* reduce gap so images sit closer to stats */
align-items: stretch; /* make both columns equal height */
}
.stats {
display: flex;
flex-direction: column;
gap: 48px;
}
.stat-number {
font-size: 40px;
font-weight: bold;
font-style: italic;
margin-bottom: 8px;
color: #344621;
}
.stat-label {
color: #666;
}
.join-images {
position: relative;
display: flex;
gap: 12px; /* tighten spacing between the two image panels */
align-items: stretch; /* stretch both columns to equal height */
justify-content: flex-start;
margin-left: 0; /* avoid intruding into stats column */
}
/* Left / right image panels used in the Join Us section */
.join-bg-1, .join-bg-2 {
border-radius: 8px;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
box-shadow: 0 8px 20px rgba(34,34,34,0.06);
}
.join-bg-1 {
flex: 1.4 1 60%;
/* left panel now flexible and will match the column height; bias toward larger left image */
height: auto;
min-height: 420px; /* make the photo bigger so content is visible */
}
.join-right {
flex: 0 0 50%;
}
.join-bg-2 {
position: relative;
/* let the inner image grow to fill the right column */
flex: 1 1 auto;
min-height: 0; /* allow flex children to shrink properly */
background-image: url('../images/sign-now-bg-right.png');
}
/* Decorative pink squares (behind the right image) */
.join-bg-2::before {
content: '';
position: absolute;
/* reduce the negative offset and size so decorations don't intrude into the left column */
left: -12px;
top: -12px;
width: 120px;
height: 120px;
background: linear-gradient(90deg, #f6d6db 50%, transparent 50%);
box-shadow: none;
transform: rotate(0deg);
opacity: 1;
z-index: 0;
}
/* Add a second square pattern for layered look */
.join-bg-2::after {
content: '';
position: absolute;
left: 24px;
top: 20px;
width: 72px;
height: 72px;
background: #f6d6db;
opacity: 0.95;
z-index: 0;
}
/* Ensure the image content sits above decorative squares */
.join-bg-2 > *, .join-bg-1 > * {
position: relative;
z-index: 2;
}
/* Right column that stacks the right image and the CTA vertically */
.join-right {
display: flex;
flex-direction: column;
gap: 20px;
align-items: flex-start; /* keep the button aligned left */
justify-content: flex-start;
}
/* Ensure CTA inside the right column is normal (not full-width) and left aligned */
.join-right .btn-primary {
width: auto !important;
padding: 10px 18px;
display: inline-flex;
align-items: center;
}
/* Make the right placeholder fill the height of the right column */
.join-right .placeholder-image {
flex: 1 1 40%;
height: 100%;
width: 100%;
overflow: hidden;
min-height: 360px; /* keep right image sizable but slightly smaller than left */
}
/* Ensure images fill their containers and crop nicely */
.placeholder-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
/* Increase sizes on very large screens */
@media (min-width: 1400px) {
.join-bg-1 { min-height: 520px; }
.join-right .placeholder-image { min-height: 460px; }
.join-images { gap: 24px; }
}
/* Adjust sizes on medium screens to keep images visible */
@media (min-width: 1000px) and (max-width: 1399px) {
.join-bg-1 { min-height: 480px; }
.join-right .placeholder-image { min-height: 420px; }
}
/* ======================================================
First-letter capitalization (CSS-only approach)
- Applies visual uppercase to the first letter of many
common text-bearing elements using ::first-letter.
- Limitation: this only affects the first letter of each
element, not the first letter of every sentence inside
an element. For sentence-level capitalization, a JS
transformation is required.
====================================================== */
font::first-letter,
p::first-letter,
li::first-letter,
a::first-letter,
span::first-letter,
h1::first-letter,
h2::first-letter,
h3::first-letter,
h4::first-letter,
h5::first-letter,
h6::first-letter,
.stat-label::first-letter,
.join-subtitle::first-letter,
.section-title::first-letter,
.feature-card p::first-letter,
.terms-buttons button::first-letter,
.language-option::first-letter {
text-transform: uppercase;
}
/* Allow opting out on specific elements via the .no-first-uppercase class */
.no-first-uppercase::first-letter {
text-transform: none !important;
}
/* ==================================================
Nav overflow collapse: show extras under a three-dot
"more" menu on wide (desktop) viewports.
- Add `.no-overflow-collapse` to `.nav` to opt-out.
==================================================*/
@media (min-width: 1024px) {
.nav {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: nowrap;
overflow: visible; /* we'll manage overflow with JS */
}
.nav .nav-overflow {
position: relative;
display: inline-flex;
align-items: center;
}
.nav .nav-overflow-btn {
background: transparent;
border: none;
font-size: 20px;
line-height: 1;
padding: 6px 10px;
cursor: pointer;
color: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav .nav-overflow-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 8px);
background: white;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
min-width: 180px;
z-index: 1500;
padding: 6px 0;
border-radius: 6px;
}
.nav .nav-overflow-menu a {
display: block;
padding: 8px 14px;
color: inherit;
text-decoration: none;
white-space: nowrap;
}
.nav .nav-overflow-menu a:hover {
background: rgba(0,0,0,0.03);
}
.nav .nav-overflow.open .nav-overflow-menu {
display: block;
}
}
/* Keep the button left-aligned and placed after the image */
.join-right .button-container {
margin-top: 0;
align-self: flex-start;
}
/* ensure the left stats column visually stays above decorative elements */
.join-content .stats {
position: relative;
z-index: 3;
}
/* keep join images below the stats layer so decorations don't visually overlap */
.join-images {
z-index: 1;
}
/* CTA button positioned over the right image when it's a direct child of .join-images */
.join-images > .btn-primary.full-width {
position: absolute;
right: 22px;
bottom: 30px;
width: auto;
padding: 10px 18px;
z-index: 3;
}
/* When the CTA is inside the right panel, position it at the left-bottom corner */
.join-bg-2 {
position: relative; /* ensure positioned parent */
}
.join-bg-2 .btn-primary.full-width {
position: absolute;
left: 22px;
bottom: 30px;
width: auto;
padding: 10px 18px;
z-index: 3;
}
@media (max-width: 900px) {
.join-images {
flex-direction: column;
align-items: center;
margin-left: 0; /* remove extra left margin on small screens */
gap: 16px;
}
.join-bg-1, .join-bg-2 {
width: 100%;
flex-basis: auto;
/* reduce height for smaller screens so layout remains balanced */
}
.join-images .btn-primary.full-width {
position: static;
padding: 10px 40px;
}
}
.image-decorations div:nth-child(1) {
background: #E8A8B8;
}
.image-decorations div:nth-child(2) {
background: #D88AA8;
}
.image-decorations div:nth-child(3) {
background: #C87A98;
}
.image-decorations div:nth-child(4) {
background: #E8A8B8;
}
.image-decorations div:nth-child(5) {
background: #D88AA8;
}
.placeholder-image {
border: solid #d55a6c75 1px;
border-radius: 8px;
display: flex;
justify-content: center;
font-size: 96px;
/* remove the large top gap so images sit at the top of `.join-content` */
margin-top: 0;
margin-bottom: 0;
align-self: stretch;
align-items: stretch; /* let the inner img fill the panel */
flex-basis: auto;
/* ensure panel stretches to the full column height */
}
.border-green{
border: solid #344621 1px;
}
.border-white{
border: solid #ffffff 1px;
}
.border-purple{
border: solid #cca0ed 1px;
}
.border-blue{
border: solid #93bbd6 1px;
}
.border-red{
border: solid #f5ccbd 1px;
}
/* Pricing Section */
.pricing {
padding: 80px 24px;
overflow: visible;
position: relative;
z-index: 1;
}
.pricing .container {
position: relative;
z-index: 2;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
width: 100%;
max-width: 100%;
}
.pricing-card {
background: #CCD5AE;
border-radius: 8px;
padding: 32px;
box-sizing: border-box;
min-width: 0; /* prevent grid blowout */
display: flex;
flex-direction: column;
}
.pricing-card.featured {
background: #344621;
color: white;
}
.pricing-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
}
.pricing-icon {
width: 24px;
height: 24px;
border: 2px solid currentColor;
border-radius: 50%;
}
.pricing-desc {
margin-bottom: 32px;
font-size: 14px;
opacity: 0.8;
}
.pricing-price {
margin-bottom: 32px;
}
.price {
font-size: 24px;
font-weight: bold;
margin-bottom: 4px;
}
.period {
font-size: 14px;
opacity: 0.8;
}
.pricing-benefits {
margin-bottom: 32px;
}
.benefit-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 16px;
}
.benefit-item {
display: flex;
gap: 8px;
margin-bottom: 12px;
align-items: flex-start;
}
.benefit-item span:first-child {
flex-shrink: 0;
}
.benefit-item span:last-child {
font-size: 14px;
}
.pricing-card.featured .btn-outline {
background: #344621;
color: white;
border: 1px solid white;
width: 100%;
margin-top: auto;
}
.pricing-card:not(.featured) .btn-outline {
width: 100%;
margin-top: auto;
}
/* Footer */
.footer {
background: #344621;
color: #CCD5AE;
padding: 48px 24px 24px;
}
/* Contact list (footer) */
.contact {
color: #CCD5AE;
}
.footer .contact-list {
list-style: none;
padding: 0;
margin: 0;
}
.footer .contact-list li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.6rem;
color: #CCD5AE;
font-size: 14px;
}
.footer .contact-list li a {
color: #CCD5AE;
text-decoration: none;
}
/* Inline