:root {
--bg: #f4f7f6;
--surface: #ffffff;
--muted-surface: #e8f2f0;
--text: #0c1f1c;
--muted-text: #5b6b66;
--primary: #0d5c56;
--primary-dark: #084540;
--accent: #c45c26;
--accent-2: #0e7490;
--gold: #b45309;
--border: rgba(13, 92, 86, 0.12);
--shadow: 0 12px 40px rgba(12, 31, 28, 0.08);
--radius: 14px;
}
html.dark-theme,
body.dark-theme {
--bg: #0b1220;
--surface: #111a2e;
--muted-surface: #0e172a;
--text: #e2e8f0;
--muted-text: #94a3b8;
--primary: #14b8a6;
--primary-dark: #0f766e;
--accent: #22d3ee;
--accent-2: #38bdf8;
--border: #24334f;
--shadow: 0 14px 34px rgba(2, 6, 23, 0.45);
color-scheme: dark;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-snap-type: none;
overflow-x: hidden;
}
body {
margin: 0;
font-family: "Plus Jakarta Sans", "Noto Sans Tamil", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
color: var(--text);
background:
radial-gradient(ellipse 80% 50% at 100% -10%, rgba(13, 92, 86, 0.07), transparent 55%),
radial-gradient(ellipse 60% 40% at 0% 20%, rgba(180, 83, 9, 0.04), transparent 50%),
var(--bg);
line-height: 1.65;
overflow-x: hidden;
max-width: 100vw;
}
html.dark-theme,
html.dark-theme body,
body.dark-theme {
background:
radial-gradient(ellipse 80% 50% at 100% -10%, rgba(20, 184, 166, 0.08), transparent 55%),
radial-gradient(ellipse 60% 40% at 0% 30%, rgba(56, 189, 248, 0.05), transparent 50%),
var(--bg);
color: var(--text);
}
h1, h2, h3, h4, h5, h6,
.brand-text {
font-family: "Sora", "Plus Jakarta Sans", "Noto Sans Tamil", system-ui, sans-serif;
letter-spacing: -0.015em;
}
html[lang="ta"] body {
font-family: "Noto Sans Tamil", "Plus Jakarta Sans", system-ui, sans-serif;
font-size: 1.06rem;
line-height: 1.75;
}
html[lang="ta"] h1,
html[lang="ta"] h2,
html[lang="ta"] h3,
html[lang="ta"] h4,
html[lang="ta"] h5,
html[lang="ta"] h6,
html[lang="ta"] .brand-text,
html[lang="ta"] .btn,
html[lang="ta"] .nav-dropdown-toggle,
html[lang="ta"] .site-nav a {
font-family: "Noto Sans Tamil", "Sora", "Plus Jakarta Sans", sans-serif;
letter-spacing: 0;
font-feature-settings: "kern" 1;
}
/* Keep Google translate chrome hidden; show only translated content */
body {
top: 0 !important;
}
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame.skiptranslate {
display: none !important;
visibility: hidden !important;
}
#google_translate_element {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
}
.goog-te-gadget,
.goog-logo-link,
.goog-te-gadget span {
display: none !important;
}
.ambient-bg {
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
}
.ambient-dot {
display: none;
}
.ambient-dot-a {
width: 240px;
height: 240px;
top: 9%;
left: 4%;
background: radial-gradient(circle, rgba(56, 189, 248, 0.36), transparent 70%);
}
.ambient-dot-b {
width: 280px;
height: 280px;
top: 38%;
right: 2%;
background: radial-gradient(circle, rgba(2, 132, 199, 0.22), transparent 72%);
animation-delay: 1.2s;
}
.ambient-dot-c {
width: 260px;
height: 260px;
bottom: 6%;
left: 22%;
background: radial-gradient(circle, rgba(20, 184, 166, 0.34), transparent 70%);
animation-delay: 2.2s;
}
.page-loader {
position: fixed;
inset: 0;
display: grid;
place-items: center;
background: rgba(244, 247, 246, 0.94);
backdrop-filter: blur(4px);
z-index: 1200;
transition: opacity 0.35s ease, visibility 0.35s ease;
}
.page-loader.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
z-index: 1201;
background: transparent;
}
.scroll-progress span {
display: block;
width: 0%;
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--accent), var(--accent-2));
box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}
.loader-orb {
width: 54px;
height: 54px;
border-radius: 999px;
background: conic-gradient(from 0deg, var(--primary), var(--accent), var(--accent-2), var(--primary));
-webkit-mask: radial-gradient(circle, transparent 48%, #000 50%);
mask: radial-gradient(circle, transparent 48%, #000 50%);
animation: loaderSpin 0.9s linear infinite;
}
.container {
width: min(1160px, calc(100% - 2.4rem));
margin-inline: auto;
}
.skip-link {
position: absolute;
top: -100px;
left: 0;
background: var(--primary);
color: #fff;
padding: 0.7rem 1rem;
z-index: 999;
}
.skip-link:focus {
top: 0;
}
.site-header {
position: sticky;
top: 0;
z-index: 40;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
box-shadow: 0 4px 24px rgba(12, 31, 28, 0.06);
overflow: visible;
}
.nav-wrap,
.header-wrap {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 72px;
gap: 2rem;
position: relative;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
flex-shrink: 0;
order: 1;
}
.brand img {
border-radius: 0.65rem;
box-shadow: var(--shadow);
background: #fff;
object-fit: contain;
width: 40px;
height: 40px;
}
.brand-text {
font-size: 1rem;
font-weight: 800;
color: var(--text);
}
.brand-text span {
color: var(--primary);
}
.site-nav {
display: flex;
gap: 0.5rem;
flex-wrap: nowrap;
align-items: center;
flex: 1;
justify-content: flex-end;
overflow: visible;
order: 2;
}
.site-nav a {
text-decoration: none;
color: var(--text);
font-weight: 600;
font-size: 0.8rem;
position: relative;
padding-bottom: 0.2rem;
white-space: nowrap;
}
.site-nav a:hover {
color: var(--primary);
}
.site-nav a::after {
content: "";
position: absolute;
left: 0;
bottom: -0.12rem;
width: 100%;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, var(--primary), var(--accent));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.22s ease;
}
.site-nav a:hover::after,
.site-nav a.active::after {
transform: scaleX(1);
}
.site-nav a.active {
color: var(--primary);
text-shadow: 0 0 10px color-mix(in srgb, var(--primary) 30%, transparent);
}
.nav-dropdown {
position: relative;
z-index: 50;
}
.nav-dropdown-toggle {
font-family: inherit;
font-weight: 600;
font-size: 0.8rem;
color: var(--text);
background: none;
border: 0;
cursor: pointer;
padding: 0.2rem 0.35rem;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 0.15rem;
}
.nav-dropdown-toggle::after {
content: none;
}
.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle {
color: var(--primary);
}
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 0.45rem);
right: 0;
min-width: 210px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.75rem;
box-shadow: var(--shadow);
padding: 0.4rem;
display: none;
flex-direction: column;
gap: 0.15rem;
z-index: 80;
}
.nav-dropdown-menu a {
padding: 0.55rem 0.75rem;
border-radius: 0.5rem;
font-size: 0.85rem;
display: block;
width: 100%;
}
.nav-dropdown-menu a::after {
display: none;
}
.nav-dropdown-menu a:hover {
background: var(--muted-surface);
}
.nav-dropdown.open .nav-dropdown-menu {
display: flex;
}
@media (hover: hover) and (pointer: fine) {
.nav-dropdown:hover .nav-dropdown-menu {
display: flex;
}
}
.menu-toggle {
display: none !important;
}
.nav-actions {
display: flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
padding: 0.2rem;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 4px 14px rgba(12, 31, 28, 0.05);
order: 3;
}
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.35rem;
height: 2.35rem;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--primary-dark);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.icon-btn:hover,
.icon-btn:focus-visible {
background: #e8f2f0;
color: var(--primary);
outline: none;
}
.icon-btn:focus-visible {
box-shadow: 0 0 0 3px rgba(13, 92, 86, 0.2);
}
.theme-toggle .icon-moon {
display: none;
}
body.dark-theme .theme-toggle .icon-sun {
display: none;
}
body.dark-theme .theme-toggle .icon-moon {
display: block;
}
.menu-toggle .icon-close {
display: none;
}
.menu-toggle[aria-expanded="true"] .icon-menu {
display: none;
}
.menu-toggle[aria-expanded="true"] .icon-close {
display: block;
}
.search-toggle,
.theme-toggle {
font-size: 0;
}
@media (max-width: 1200px) {
.site-nav {
gap: 0.4rem;
}
.site-nav a {
font-size: 0.75rem;
}
.nav-wrap {
gap: 1rem;
}
}
@media (max-width: 992px) {
.site-nav {
display: none;
order: 4;
}
.menu-toggle {
display: inline-flex !important;
}
.site-nav.active {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--surface);
padding: 1rem;
border: 1px solid var(--border);
border-top: none;
gap: 0.5rem;
align-items: flex-start;
overflow-x: clip;
}
.site-nav.active a {
font-size: 0.9rem;
}
.site-nav.active .nav-dropdown {
width: 100%;
}
.site-nav.active .nav-dropdown-toggle {
width: 100%;
justify-content: space-between;
padding: 0.45rem 0;
font-size: 0.9rem;
}
.site-nav.active .nav-dropdown-menu {
position: static;
display: none;
box-shadow: none;
border: 1px solid var(--border);
border-radius: 0.65rem;
padding: 0.35rem;
min-width: 0;
margin-top: 0.25rem;
background: var(--muted-surface);
}
.site-nav.active .nav-dropdown.open .nav-dropdown-menu {
display: flex;
}
.site-nav.active .nav-dropdown-toggle::after {
display: inline;
}
}
.hero {
position: relative;
padding: clamp(4.5rem, 8vw, 6.5rem) 0 clamp(3rem, 5vw, 4.5rem);
overflow: hidden;
background: linear-gradient(145deg, #062a27 0%, #0d5c56 42%, #0a4a55 100%);
border-bottom: 0;
color: #f8faf9;
}
.hero-glow {
position: absolute;
width: 520px;
height: 520px;
background: radial-gradient(circle, rgba(196, 92, 38, 0.22), transparent 68%);
right: -180px;
top: -160px;
pointer-events: none;
animation: floatGlow 10s ease-in-out infinite;
will-change: transform;
}
.hero-glow-two {
left: -160px;
bottom: -200px;
top: auto;
right: auto;
background: radial-gradient(circle, rgba(14, 116, 144, 0.25), transparent 70%);
animation-duration: 12s;
}
.hero-grid {
display: grid;
gap: clamp(1.5rem, 4vw, 3rem);
grid-template-columns: 1.15fr 0.85fr;
align-items: center;
}
.hero-grid > div {
position: relative;
}
.premium-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0 0 0.75rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fde68a;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(253, 230, 138, 0.35);
border-radius: 999px;
padding: 0.4rem 0.85rem;
}
.hero-brand {
margin: 0 0 0.35rem;
font-family: "Sora", sans-serif;
font-size: clamp(1.35rem, 2.8vw, 1.85rem);
font-weight: 800;
letter-spacing: -0.02em;
color: #fff;
}
.eyebrow {
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
margin: 0;
}
.highlight {
background: linear-gradient(120deg, #fbbf24, #fde68a);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero h1 {
font-size: clamp(2.15rem, 4.2vw, 3.35rem);
line-height: 1.12;
margin: 0 0 1rem;
color: #fff;
font-weight: 800;
}
.hero .lead {
color: rgba(248, 250, 249, 0.78);
max-width: 38ch;
font-size: 1.08rem;
}
h1 {
font-size: clamp(2rem, 3vw, 3rem);
line-height: 1.2;
margin: 0.6rem 0 0.9rem;
letter-spacing: -0.02em;
}
.lead {
color: var(--muted-text);
max-width: 65ch;
font-size: 1.04rem;
}
.quick-proof {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.9rem;
}
.quick-proof span {
display: inline-flex;
align-items: center;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.08);
padding: 0.32rem 0.72rem;
font-size: 0.84rem;
font-weight: 700;
color: #ecfdf5;
}
.quick-proof span::before {
content: "?";
margin-right: 0.35rem;
color: #fbbf24;
font-weight: 800;
}
.cta-row {
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
margin: 1.3rem 0 0.6rem;
}
.hero-book-link {
margin: 0 0 1rem;
font-size: 0.95rem;
color: rgba(248, 250, 249, 0.7);
}
.hero-book-link a {
color: #fde68a;
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid rgba(253, 230, 138, 0.55);
padding-bottom: 0.05rem;
text-underline-offset: 3px;
}
.hero-book-link a:hover {
border-bottom-color: #fde68a;
}
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin: 1.4rem 0 0.4rem;
padding-top: 1.1rem;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero-trust div {
min-width: 5.5rem;
}
.hero-trust strong {
display: block;
font-size: 1.35rem;
color: #fbbf24;
font-family: "Sora", sans-serif;
}
.hero-trust span {
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(248, 250, 249, 0.55);
}
.hero-subnote {
color: rgba(248, 250, 249, 0.55) !important;
font-size: 0.9rem;
max-width: 48ch;
}
.btn {
display: inline-block;
text-decoration: none;
border-radius: 0.7rem;
padding: 0.75rem 1.1rem;
font-weight: 700;
border: 0;
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.btn-primary {
background: linear-gradient(120deg, #c45c26, #b45309);
color: #fff;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(180, 83, 9, 0.34);
}
.hero .btn-secondary,
.hero .btn-ghost {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.35);
}
.hero-card {
background: rgba(255, 255, 255, 0.97);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 1.15rem;
padding: 0;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
overflow: hidden;
position: relative;
color: var(--text);
}
.hero-card img {
width: 100%;
aspect-ratio: 4 / 3;
height: auto;
object-fit: cover;
filter: saturate(1.05);
}
.hero-card h2,
.hero-card p {
padding-inline: 1.15rem;
color: var(--text);
}
.hero-card h2 {
margin-top: 0.95rem;
font-size: 1.15rem;
}
.hero-card .offer {
padding-bottom: 1.15rem;
}
.btn-secondary {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
}
.btn-whatsapp {
background: #16a34a;
color: #fff;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.btn-whatsapp::before {
content: "";
width: 16px;
height: 16px;
background: #fff;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21 5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm0 18.15c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 01-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23s8.24 3.69 8.24 8.23-3.7 8.24-8.24 8.24zm4.52-6.16c-.25-.12-1.47-.72-1.69-.8-.23-.08-.39-.12-.56.12-.16.25-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43h-.48c-.16 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.16 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21 5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-whatsapp:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(22, 163, 74, 0.32);
}
.hero-subnote {
margin-top: 1rem;
font-size: 0.9rem;
color: rgba(248, 250, 249, 0.55) !important;
max-width: 48ch;
}
.btn::after {
content: "";
position: absolute;
top: 0;
left: -130%;
width: 120%;
height: 100%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
transition: left 0.55s ease;
}
.btn:hover::after {
left: 130%;
}
.hero-points {
padding-left: 1.1rem;
color: var(--muted-text);
}
.hero-card {
background: rgba(255, 255, 255, 0.97);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 1.15rem;
padding: 0;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
overflow: hidden;
position: relative;
color: var(--text);
}
.hero-card img {
width: 100%;
aspect-ratio: 4 / 3;
height: auto;
object-fit: cover;
filter: saturate(1.05);
}
.hero-card h2,
.hero-card p {
padding-inline: 1.15rem;
color: var(--text);
}
.hero-card h2 {
margin-top: 0.95rem;
font-size: 1.15rem;
}
.hero-card .offer {
padding-bottom: 1.15rem;
}
.cities {
font-weight: 700;
}
.offer {
color: var(--muted-text);
}
.section {
padding: clamp(4.5rem, 8vw, 7.25rem) 0;
scroll-margin-top: 78px;
position: relative;
}
.section-head {
max-width: 40rem;
margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.section-head.center {
margin-inline: auto;
text-align: center;
}
.section-head.center .section-kicker,
.section-head.center h2 {
display: inline-block;
}
.section-head.center h2::after {
left: 50%;
transform: translateX(-50%);
width: 4.5rem;
}
.section-head .section-kicker {
margin-bottom: 0.55rem;
}
.section-head h2 {
margin-bottom: 0.7rem;
}
.section-head p {
margin: 0.85rem 0 0;
color: var(--muted-text);
font-weight: 500;
font-size: 1.05rem;
max-width: 52ch;
}
.section-head.center p {
margin-inline: auto;
}
.section-muted {
background: linear-gradient(180deg, #f0f7f5 0%, #f7faf9 100%);
}
.section-theme-mint,
.section-theme-lavender,
.section-theme-sky,
.section-theme-cyan,
.section-theme-ice,
.section-theme-rose,
.section-theme-lime,
.section-theme-gold,
.section-theme-violet,
.section-theme-slate,
.section-theme-teal,
.section-theme-indigo,
.section-theme-emerald,
.section-theme-azure {
background: #ffffff;
}
.section-theme-lavender,
.section-theme-slate,
.section-theme-gold,
.section-theme-cyan,
.section-theme-violet,
.section-theme-ice,
.section-theme-mint,
.section-muted {
background: linear-gradient(180deg, #f0f7f5 0%, #f7faf9 100%);
}
.section-theme-mint { background: #ffffff; }
.section-theme-lavender { background: #f0f7f5; }
.section-theme-sky { background: #ffffff; }
.section-theme-cyan { background: #f0f7f5; }
.section-theme-ice { background: #ffffff; }
.section-theme-rose { background: #f0f7f5; }
.section-theme-lime { background: #ffffff; }
.section-theme-gold { background: #f0f7f5; }
.section-theme-violet { background: #ffffff; }
.section-theme-slate { background: #f0f7f5; }
.section-theme-teal { background: #ffffff; }
.section-theme-indigo { background: #f0f7f5; }
.section-theme-emerald { background: #ffffff; }
.section-theme-azure { background: #f0f7f5; }
.section-theme-teal {
background: linear-gradient(180deg, rgba(204, 251, 241, 0.55), rgba(240, 253, 250, 0.9));
}
.section-theme-indigo {
background: linear-gradient(180deg, rgba(224, 231, 255, 0.6), rgba(238, 242, 255, 0.9));
}
.section-theme-emerald {
background: linear-gradient(180deg, rgba(209, 250, 229, 0.58), rgba(236, 253, 245, 0.88));
}
.section-theme-azure {
background: linear-gradient(180deg, rgba(186, 230, 253, 0.5), rgba(240, 249, 255, 0.9));
}
.section-theme-mint,
.section-theme-lavender,
.section-theme-sky,
.section-theme-cyan,
.section-theme-ice,
.section-theme-rose,
.section-theme-lime,
.section-theme-gold,
.section-theme-violet,
.section-theme-slate,
.section-theme-teal,
.section-theme-indigo,
.section-theme-emerald,
.section-theme-azure {
background: linear-gradient(180deg, rgba(240, 253, 250, 0.7), rgba(248, 250, 252, 0.9));
}
.section-theme-lavender,
.section-theme-slate,
.section-theme-gold,
.section-theme-cyan,
.section-theme-violet {
background: linear-gradient(180deg, #ffffff, rgba(241, 245, 249, 0.85));
}
.section-kicker {
margin: 0 0 0.45rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary);
}
.tools-hub {
padding-top: 3.2rem;
padding-bottom: 3.2rem;
background: linear-gradient(180deg, #e8f2f0 0%, #f4f7f6 100%) !important;
border-block: 1px solid var(--border);
}
.tools-hub-lead {
max-width: 58ch;
color: var(--muted-text);
margin: 0 0 1.4rem;
}
.tools-hub-grid {
display: grid;
gap: 0.85rem;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.tools-hub-card {
display: flex;
flex-direction: column;
gap: 0.25rem;
text-decoration: none;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 1rem 1.05rem;
box-shadow: 0 8px 24px rgba(12, 31, 28, 0.05);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tools-hub-card:hover {
transform: translateY(-3px);
border-color: rgba(13, 92, 86, 0.28);
box-shadow: 0 14px 32px rgba(12, 31, 28, 0.1);
}
.tools-hub-card strong {
font-family: "Sora", sans-serif;
font-size: 0.98rem;
color: var(--primary-dark);
}
.tools-hub-card span {
font-size: 0.84rem;
color: var(--muted-text);
}
.instant-value {
padding-top: clamp(3.8rem, 7vw, 6rem);
}
.instant-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
counter-reset: instant-step;
}
.instant-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1.2rem;
padding: 1.45rem 1.35rem 1.4rem;
box-shadow: 0 12px 36px rgba(12, 31, 28, 0.06);
border-top: 3px solid var(--primary);
transition: transform 0.22s ease, box-shadow 0.22s ease;
position: relative;
counter-increment: instant-step;
overflow: hidden;
}
.instant-card::before {
content: counter(instant-step, decimal-leading-zero);
position: absolute;
top: 0.85rem;
left: 0.85rem;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
height: 2rem;
padding: 0 0.45rem;
border-radius: 999px;
background: rgba(6, 42, 39, 0.82);
color: #fde68a;
font-family: "Sora", sans-serif;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.06em;
margin: 0;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.instant-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 40px rgba(12, 31, 28, 0.11);
}
.instant-card h3 {
margin-top: 0;
margin-bottom: 0.5rem;
}
.instant-card p {
margin-bottom: 0;
color: var(--muted-text);
}
.section-theme-lavender .legacy-card {
border-radius: 1.1rem;
border-top-color: var(--primary);
background: var(--surface);
}
.section-theme-ice .info-card {
border-radius: 1.1rem;
border-left: 4px solid var(--primary);
background: var(--surface);
}
.section-theme-rose .info-card {
border-radius: 1.1rem;
border-left: 4px solid var(--accent);
background: var(--surface);
}
.section-theme-slate .service-card {
border-radius: 1.1rem;
border-top: 4px solid var(--primary);
background: var(--surface);
}
.section-theme-violet .roadmap-form {
border: 1px solid var(--border);
border-radius: 1.15rem;
background: var(--surface);
}
.section-theme-azure .contact-form {
border: 1px solid var(--border);
border-radius: 1.15rem;
background: var(--surface);
}
.section-theme-indigo .testimonial {
border-top: 4px solid var(--primary);
border-radius: 1.1rem;
background: var(--surface);
}
.section h2 {
margin-top: 0;
font-size: clamp(1.6rem, 2.2vw, 2.2rem);
letter-spacing: -0.01em;
position: relative;
display: inline-block;
margin-bottom: 0.8rem;
color: var(--primary-dark);
}
.section p {
font-size: 1.01rem;
line-height: 1.72;
color: color-mix(in srgb, var(--text) 88%, #334155);
}
.section > .container > p:first-of-type {
font-size: 1.05rem;
font-weight: 500;
color: var(--muted-text);
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
display: block;
max-width: 62ch;
margin-bottom: 1.25rem;
}
.section h3 {
letter-spacing: -0.01em;
}
.info-card h3,
.service-card h3,
.legacy-card h3,
.instant-card h3,
.testimonial h3 {
color: var(--primary-dark);
font-size: 1.06rem;
}
.hero-points li,
.section li {
margin-bottom: 0.36rem;
}
.section ul:not(.contact-list):not(.hero-points) {
padding-left: 1.1rem;
}
.section h2::after {
content: "";
position: absolute;
left: 0;
bottom: -0.38rem;
width: 62%;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--primary), var(--accent));
opacity: 0.75;
}
.section-divider {
display: none;
}
.stats {
padding-top: clamp(3.5rem, 6vw, 5rem);
padding-bottom: clamp(3.5rem, 6vw, 5rem);
background: linear-gradient(135deg, #062a27 0%, #0d5c56 55%, #0a4a55 100%) !important;
color: #f8faf9;
}
.stats .stat-grid {
gap: 1.15rem;
}
.stat-grid {
display: grid;
gap: 1.15rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.stat {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 1.15rem;
padding: 1.45rem 1.1rem;
box-shadow: none;
text-align: center;
backdrop-filter: blur(6px);
}
.stat h2 {
margin: 0;
font-size: clamp(2.2rem, 4.2vw, 3.2rem);
color: #fbbf24;
text-shadow: none;
}
.stat h2::after {
display: none;
}
.stat p {
margin: 0.35rem 0 0;
color: rgba(248, 250, 249, 0.72) !important;
font-size: 0.92rem;
}
.legacy-grid {
display: grid;
gap: 1.2rem;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.legacy-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1.15rem;
padding: 1.35rem 1.25rem;
box-shadow: 0 10px 30px rgba(12, 31, 28, 0.05);
border-top: 3px solid var(--primary);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.legacy-card p,
.info-card p,
.service-card p,
.instant-card p,
.testimonial p,
.gallery-item figcaption {
color: color-mix(in srgb, var(--text) 82%, #475569);
}
.legacy-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
}
.filter-row {
display: flex;
align-items: center;
gap: 0.7rem;
margin: 1rem 0 1.3rem;
}
select,
input,
textarea {
font: inherit;
border: 1px solid var(--border);
border-radius: 0.65rem;
padding: 0.65rem 0.8rem;
}
.card-grid,
.service-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.info-card,
.service-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1.15rem;
padding: 1.35rem 1.3rem;
box-shadow: 0 10px 30px rgba(12, 31, 28, 0.05);
transition: transform 0.25s ease, box-shadow 0.25s ease;
background-image: none;
position: relative;
transform: translateZ(0);
}
.info-card::before,
.service-card::before,
.featured-card::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(120deg, var(--primary), var(--accent));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
}
.info-card:hover,
.service-card:hover,
.testimonial:hover {
transform: translateY(-6px);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}
.info-card:hover::before,
.service-card:hover::before,
.featured-card:hover::before {
opacity: 1;
}
.gallery-section {
background: #0a3d39 !important;
color: #f8faf9;
}
.gallery-section h2,
.gallery-section .section-kicker,
.gallery-section .section-head p {
color: #f8faf9;
}
.gallery-section .section-kicker {
color: #fbbf24;
}
.gallery-section .section-head p {
color: rgba(248, 250, 249, 0.72);
}
.gallery-section h2::after {
background: linear-gradient(90deg, #fbbf24, #fde68a);
}
.gallery-grid {
display: grid;
gap: 1.15rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.gallery-grid img {
width: 100%;
aspect-ratio: 4 / 3;
height: auto;
object-fit: cover;
border-radius: 0;
border: 0;
box-shadow: none;
transition: transform 0.45s ease, filter 0.35s ease;
}
.gallery-grid img:hover {
transform: scale(1.06);
filter: saturate(1.12) contrast(1.04);
}
.gallery-item {
margin: 0;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 1.1rem;
overflow: hidden;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gallery-item:hover {
transform: translateY(-6px);
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
}
.gallery-item figcaption {
padding: 0.75rem 0.9rem 0.95rem;
font-size: 0.92rem;
color: rgba(248, 250, 249, 0.78);
}
.featured-section {
background: linear-gradient(180deg, #f7faf9 0%, #eef6f4 100%) !important;
}
.featured-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.featured-card {
margin: 0;
background: #fff;
border: 1px solid var(--border);
border-radius: 1.2rem;
overflow: hidden;
box-shadow: 0 14px 36px rgba(12, 31, 28, 0.08);
position: relative;
transform-style: preserve-3d;
transition: transform 0.28s ease, box-shadow 0.28s ease;
will-change: transform;
}
.featured-card img {
width: 100%;
aspect-ratio: 4 / 3;
height: auto;
object-fit: cover;
transition: transform 0.5s ease;
}
.featured-card:hover {
transform: translateY(-6px);
box-shadow: 0 22px 46px rgba(12, 31, 28, 0.14);
}
.featured-card:hover img {
transform: scale(1.05);
}
.featured-card figcaption {
padding: 0.85rem 1rem;
font-weight: 700;
color: var(--primary-dark);
background: #fff;
font-family: "Sora", sans-serif;
font-size: 0.95rem;
}
.ticker-section {
padding-top: 1.2rem;
padding-bottom: 1.2rem;
background: #fff !important;
}
.ticker {
border: 1px solid var(--border);
border-radius: 999px;
background: linear-gradient(90deg, #ffffff, #f0f7f5);
overflow: hidden;
box-shadow: 0 8px 24px rgba(12, 31, 28, 0.05);
}
.ticker-track {
display: flex;
gap: 1rem;
white-space: nowrap;
padding: 0.65rem 0.8rem;
animation: tickerMove 22s linear infinite;
}
.ticker-track span {
background: linear-gradient(120deg, #dbeafe, #dcfce7);
color: #0f172a;
border: 1px solid #bfdbfe;
border-radius: 999px;
padding: 0.35rem 0.8rem;
font-size: 0.9rem;
font-weight: 600;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}
body.dark-theme .hero,
body.dark-theme .featured-section,
body.dark-theme .gallery-section,
body.dark-theme .section-muted,
body.dark-theme .roadmap-section {
background: linear-gradient(180deg, rgba(30, 41, 59, 0.65), rgba(15, 23, 42, 0.85));
}
body.dark-theme .section-theme-mint,
body.dark-theme .section-theme-lavender,
body.dark-theme .section-theme-sky,
body.dark-theme .section-theme-cyan,
body.dark-theme .section-theme-ice,
body.dark-theme .section-theme-rose,
body.dark-theme .section-theme-lime,
body.dark-theme .section-theme-gold,
body.dark-theme .section-theme-violet,
body.dark-theme .section-theme-slate,
body.dark-theme .section-theme-teal,
body.dark-theme .section-theme-indigo,
body.dark-theme .section-theme-emerald,
body.dark-theme .section-theme-azure {
background: linear-gradient(180deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
}
body.dark-theme .section-theme-lavender .legacy-card,
body.dark-theme .section-theme-ice .info-card,
body.dark-theme .section-theme-rose .info-card,
body.dark-theme .section-theme-slate .service-card,
body.dark-theme .section-theme-violet .roadmap-form,
body.dark-theme .section-theme-azure .contact-form,
body.dark-theme .section-theme-indigo .testimonial {
background: linear-gradient(180deg, #16233d, #0f1b31);
}
body.dark-theme .quick-proof span {
background: #1b2a46;
border-color: #2e4367;
color: #cbd5e1;
}
body.dark-theme .section > .container > p:first-of-type {
background: #15233b;
border-color: #2a3d5f;
color: #bfdbfe;
}
body.dark-theme .section p {
color: color-mix(in srgb, #e2e8f0 86%, #94a3b8);
}
body.dark-theme .btn-secondary {
background: #16233d;
}
body.dark-theme .nav-actions {
background: rgba(17, 26, 46, 0.94);
border-color: #24334f;
}
body.dark-theme .icon-btn,
body.dark-theme .theme-toggle,
body.dark-theme .menu-toggle {
background: transparent;
color: #e2e8f0;
}
body.dark-theme .icon-btn:hover,
body.dark-theme .theme-toggle:hover,
body.dark-theme .menu-toggle:hover {
background: rgba(20, 184, 166, 0.16);
color: #5eead4;
}
body.dark-theme .page-loader {
background: rgba(11, 18, 32, 0.88);
}
.testimonial-grid {
display: flex;
gap: 1rem;
overflow: hidden;
scroll-behavior: smooth;
}
.testimonial {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.95rem;
padding: 1rem;
box-shadow: var(--shadow);
transition: transform 0.25s ease, box-shadow 0.25s ease;
min-width: calc(33.333% - 0.67rem);
backdrop-filter: blur(3px);
}
.testimonial h3 {
margin-bottom: 0;
color: var(--primary-dark);
font-size: 0.95rem;
}
.faq-list {
display: grid;
gap: 0.7rem;
}
.wizard-wrap {
display: grid;
gap: 1rem;
grid-template-columns: 1.2fr 1fr;
}
.wizard-form {
display: grid;
gap: 0.65rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 1rem;
box-shadow: var(--shadow);
}
.wizard-result {
min-height: 1.8rem;
margin: 0.25rem 0 0;
color: var(--primary-dark);
font-weight: 600;
}
.testimonial-slider {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.6rem;
}
.slider-nav {
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
box-shadow: var(--shadow);
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
}
.image-fallback {
background: linear-gradient(120deg, #dbeafe, #f1f5f9);
display: grid;
place-items: center;
color: #334155;
font-weight: 700;
font-size: 0.92rem;
}
.roadmap-section {
background: linear-gradient(145deg, #062a27 0%, #0d5c56 48%, #0f4c5c 100%) !important;
color: #f8faf9;
}
.roadmap-section h2,
.roadmap-section .section-kicker,
.roadmap-section p,
.roadmap-section .hero-points {
color: #f8faf9;
}
.roadmap-section .section-kicker {
color: #fbbf24;
}
.roadmap-section h2::after {
background: linear-gradient(90deg, #fbbf24, #fde68a);
}
.roadmap-section .hero-points {
color: rgba(248, 250, 249, 0.8);
}
.roadmap-section p {
color: rgba(248, 250, 249, 0.75) !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
max-width: 42ch;
}
.roadmap-wrap {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(1.4rem, 3vw, 2.5rem);
align-items: start;
}
.roadmap-form {
display: grid;
gap: 0.7rem;
background: rgba(255, 255, 255, 0.97);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 1.2rem;
padding: 1.35rem 1.3rem;
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
color: var(--text);
}
.form-status {
min-height: 1.4rem;
margin: 0.2rem 0 0;
font-size: 0.95rem;
color: var(--primary-dark);
font-weight: 600;
}
.small-note {
margin: 0.2rem 0 0;
font-size: 0.86rem;
color: var(--muted-text);
}
.visitor-count {
margin: 0.2rem 0 0;
font-size: 0.86rem;
color: var(--muted-text);
font-weight: 600;
}
.visitor-count span {
color: var(--primary);
font-weight: 700;
}
.breadcrumbs {
padding: 1rem 0;
font-size: 0.9rem;
}
.breadcrumbs ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 0.5rem;
align-items: center;
}
.breadcrumbs li::after {
content: "/";
color: var(--muted-text);
margin-left: 0.5rem;
}
.breadcrumbs li:last-child::after {
content: "";
}
.breadcrumbs a {
color: var(--primary);
text-decoration: none;
font-weight: 500;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
details {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.8rem;
padding: 0.8rem 1rem;
box-shadow: var(--shadow);
}
summary {
cursor: pointer;
font-weight: 700;
}
.info-card h3,
.service-card h3 {
margin-top: 0;
line-height: 1.3;
}
.contact-wrap {
display: grid;
gap: 1.2rem;
grid-template-columns: 1.1fr 1fr;
}
.contact-list {
padding-left: 1rem;
}
.contact-list a {
color: var(--primary-dark);
}
.contact-form {
display: grid;
gap: 0.7rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 1rem;
background-image: linear-gradient(180deg, #ffffff, #f9fbff);
box-shadow: var(--shadow);
}
.site-footer {
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(135deg, #062a27 0%, #084540 100%);
color: #f1f5f4;
padding: 2.5rem 0 1.5rem;
margin-top: 3rem;
}
.site-footer,
.site-footer p,
.site-footer h3,
.site-footer h4,
.site-footer li,
.site-footer span,
.site-footer strong,
.site-footer .visitor-count {
color: #f1f5f4;
}
.site-footer a,
.site-footer .footer-wrap a,
.site-footer .footer-section nav a,
.site-footer .contact-info a,
.site-footer .footer-bottom a {
color: rgba(241, 245, 244, 0.88);
text-decoration: none;
}
.site-footer a:hover,
.site-footer .footer-wrap a:hover,
.site-footer .footer-section nav a:hover,
.site-footer .contact-info a:hover {
color: #ffffff;
}
.footer-wrap {
min-height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.footer-wrap p {
margin: 0;
color: rgba(241, 245, 244, 0.85);
font-size: 0.92rem;
}
.footer-wrap nav {
display: flex;
flex-wrap: wrap;
gap: 0.85rem 1rem;
}
.floating-cta {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 70;
background: linear-gradient(120deg, var(--primary), #0284c7);
color: #fff;
text-decoration: none;
padding: 0.7rem 1rem;
border-radius: 999px;
font-weight: 700;
box-shadow: var(--shadow);
animation: floatCta 2.8s ease-in-out infinite;
}
.floating-whatsapp {
position: fixed;
right: 1rem;
bottom: 4.35rem;
z-index: 70;
background: #16a34a;
color: #fff;
text-decoration: none;
padding: 0.7rem 1rem;
border-radius: 999px;
font-weight: 700;
box-shadow: var(--shadow);
animation: floatCta 3.1s ease-in-out infinite;
}
.sticky-enquiry {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 1rem;
z-index: 80;
display: flex;
gap: 0.5rem;
align-items: center;
background: rgba(15, 23, 42, 0.92);
color: #fff;
padding: 0.6rem 0.7rem;
border-radius: 999px;
box-shadow: var(--shadow);
}
.sticky-enquiry p {
margin: 0 0.35rem 0 0.2rem;
font-weight: 600;
}
.close-sticky {
width: 30px;
height: 30px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: transparent;
color: #fff;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
}
.sticky-enquiry.hidden {
display: none;
}
.sticky-enquiry.hidden-by-intent {
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(16px);
}
.sticky-enquiry {
transition: opacity 0.28s ease, transform 0.28s ease;
}
.reveal {
opacity: 0;
transform: translateY(28px) scale(0.985);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal.show {
opacity: 1;
transform: translateY(0) scale(1);
}
.about-layout {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: start;
}
.about-intro .about-lead {
font-size: 1.12rem;
line-height: 1.7;
color: var(--muted-text);
margin: 0 0 1.2rem;
max-width: 38ch;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
display: block !important;
}
.about-points {
display: grid;
gap: 0.9rem;
}
.about-point {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 1rem 1.1rem;
box-shadow: 0 8px 24px rgba(12, 31, 28, 0.04);
margin: 0;
color: var(--muted-text);
font-size: 0.98rem;
}
.mid-cta {
background: linear-gradient(120deg, #c45c26, #b45309) !important;
color: #fff;
text-align: center;
padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.mid-cta h2 {
color: #fff;
margin-bottom: 0.6rem;
display: block;
text-align: center;
width: 100%;
}
.mid-cta h2::after {
background: rgba(255, 255, 255, 0.55);
left: 50%;
transform: translateX(-50%);
width: 4rem;
}
.mid-cta p {
color: rgba(255, 255, 255, 0.88) !important;
max-width: 42ch;
margin: 0.8rem auto 1.3rem;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
.mid-cta .cta-row {
justify-content: center;
margin-top: 0;
}
.mid-cta .btn-primary {
background: #fff;
color: #9a3412;
}
.mid-cta .btn-whatsapp {
background: #166534;
}
.section-theme-mint:not(.stats),
.section-theme-sky,
.section-theme-ice,
.section-theme-lime:not(.gallery-section),
.section-theme-teal,
.section-theme-emerald {
background: #ffffff;
}
.section-theme-lavender,
.section-theme-cyan,
.section-theme-rose,
.section-theme-gold,
.section-theme-violet:not(.roadmap-section),
.section-theme-slate,
.section-theme-indigo,
.section-theme-azure,
.section-muted {
background: linear-gradient(180deg, #f0f7f5 0%, #f7faf9 100%);
}
.section-head.center .tools-hub-lead,
.tools-hub .tools-hub-lead {
margin-inline: auto;
text-align: center;
max-width: 54ch;
color: var(--muted-text);
font-weight: 500;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
display: block !important;
}
.parallax-layer {
will-change: transform;
}
.card-photo {
display: block;
width: 100%;
max-width: 100%;
margin: 0 0 1rem;
height: 160px;
object-fit: cover;
border-radius: 0.85rem;
}
.instant-card,
.info-card,
.service-card,
.blog-card,
.location-card,
.city-card {
overflow: hidden;
max-width: 100%;
}
.instant-card .card-photo {
height: 140px;
margin: 0 0 0.85rem;
border-radius: 0.75rem;
}
.city-card .card-photo,
.info-card .card-photo {
width: 100%;
max-width: 100%;
margin: 0 0 0.85rem;
height: 150px;
border-radius: 0.75rem;
}
.service-card .card-photo,
.blog-card .card-photo {
width: 100%;
max-width: 100%;
margin: 0 0 0.85rem;
height: 150px;
border-radius: 0.75rem;
}
.location-card {
padding: 0;
}
.location-card .card-photo {
width: 100%;
margin: 0;
height: 170px;
border-radius: 0;
}
.location-card h3,
.location-card p,
.location-card .btn {
margin-left: 0;
margin-right: 0;
}
.service-card .service-badge {
position: relative;
z-index: 1;
}
.about-visual {
display: grid;
gap: 1rem;
}
.about-photo {
width: 100%;
max-width: 100%;
height: 260px;
object-fit: cover;
border-radius: 1.2rem;
box-shadow: 0 16px 40px rgba(12, 31, 28, 0.12);
border: 1px solid var(--border);
}
.contact-photo {
width: 100%;
max-width: 100%;
height: 220px;
object-fit: cover;
border-radius: 1.1rem;
margin: 0.8rem 0 1rem;
box-shadow: 0 12px 32px rgba(12, 31, 28, 0.1);
border: 1px solid var(--border);
}
.gallery-grid-compact {
grid-template-columns: repeat(3, 1fr);
}
.photo-credit {
margin-top: 1rem;
font-size: 0.75rem;
color: var(--muted-text);
text-align: center;
}
.section-cta-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin-top: 1.8rem;
}
.stats-head {
margin-bottom: 1.6rem;
}
.stats-head h2,
.stats-head .section-kicker {
color: #f8faf9;
}
.stats-head .section-kicker {
color: #fbbf24;
}
.stats-head h2::after {
background: linear-gradient(90deg, #fbbf24, #fde68a);
}
.stat-unit {
font-size: 0.45em;
margin-left: 0.15rem;
vertical-align: middle;
color: #fde68a;
}
.benefit-rail {
display: grid;
gap: 0;
grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--border);
border-radius: 1.25rem;
overflow: hidden;
background: var(--surface);
box-shadow: 0 14px 40px rgba(12, 31, 28, 0.06);
}
.benefit-rail-item {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.85rem;
padding: 1.35rem 1.2rem;
border-right: 1px solid var(--border);
margin: 0;
}
.benefit-rail-item:last-child {
border-right: 0;
}
.benefit-icon {
font-family: "Sora", sans-serif;
font-weight: 800;
font-size: 0.85rem;
color: var(--accent);
letter-spacing: 0.04em;
}
.benefit-rail-item h3 {
margin: 0 0 0.35rem;
font-size: 1rem;
}
.benefit-rail-item p {
margin: 0;
font-size: 0.9rem;
color: var(--muted-text);
}
.founder-card {
display: flex;
align-items: center;
gap: 0.85rem;
margin: 0 0 1.1rem;
padding: 0.85rem 1rem;
border: 1px solid var(--border);
border-radius: 1rem;
background: #fff;
box-shadow: 0 8px 24px rgba(12, 31, 28, 0.05);
max-width: 22rem;
}
.founder-card img {
width: 56px;
height: 56px;
border-radius: 0.85rem;
object-fit: contain;
background: #fff;
}
.founder-card strong {
display: block;
font-family: "Sora", sans-serif;
font-size: 1rem;
}
.founder-card span {
color: var(--muted-text);
font-size: 0.86rem;
}
.about-proofs {
list-style: none;
margin: 0 0 1.2rem;
padding: 0;
display: grid;
gap: 0.55rem;
}
.about-proofs li {
position: relative;
padding-left: 1.35rem;
color: var(--text);
font-weight: 600;
font-size: 0.95rem;
}
.about-proofs li::before {
content: "";
position: absolute;
left: 0;
top: 0.45rem;
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: var(--primary);
}
.featured-spotlight {
display: grid;
grid-template-columns: 1.35fr 0.9fr;
gap: 1.1rem;
align-items: stretch;
}
.featured-lead {
margin: 0;
position: relative;
border-radius: 1.25rem;
overflow: hidden;
min-height: 100%;
box-shadow: 0 18px 44px rgba(12, 31, 28, 0.12);
}
.featured-lead img {
width: 100%;
height: 100%;
min-height: 360px;
object-fit: cover;
display: block;
}
.featured-lead figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1.4rem 1.3rem;
background: linear-gradient(transparent, rgba(6, 42, 39, 0.88));
color: #fff;
}
.featured-lead strong {
display: block;
font-family: "Sora", sans-serif;
font-size: 1.35rem;
}
.featured-lead span {
color: rgba(248, 250, 249, 0.78);
font-size: 0.92rem;
}
.featured-side {
display: grid;
gap: 1rem;
}
.card-eyebrow {
margin: 0 0 0.4rem;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
}
.card-meta {
list-style: none;
margin: 0.85rem 0 0.9rem;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.card-meta li {
margin: 0;
padding: 0.28rem 0.6rem;
border-radius: 999px;
background: #e8f2f0;
color: var(--primary-dark);
font-size: 0.78rem;
font-weight: 700;
}
.card-link {
display: inline-block;
margin-top: 0.35rem;
color: var(--primary);
font-weight: 700;
text-decoration: none;
}
.card-link:hover {
text-decoration: underline;
}
.pathway-block {
margin-top: 0.5rem;
}
.pathway-block + .pathway-block {
margin-top: 2rem;
}
.pathway-title {
margin: 0 0 1rem;
font-size: 1.15rem;
color: var(--primary-dark);
}
.abroad-block {
padding: 1.25rem;
border-radius: 1.25rem;
background: linear-gradient(180deg, #f0f7f5, #ffffff);
border: 1px solid var(--border);
}
.media-card {
display: grid;
grid-template-columns: 96px 1fr;
gap: 0.9rem;
align-items: center;
}
.media-card img {
width: 96px;
height: 72px;
object-fit: cover;
border-radius: 0.75rem;
}
.media-card h3 {
margin: 0 0 0.35rem;
font-size: 1rem;
}
.media-card p {
margin: 0;
}
.mid-cta-trust {
margin: -0.3rem auto 1rem !important;
font-size: 0.92rem !important;
color: rgba(255, 255, 255, 0.82) !important;
}
.mid-cta-chips {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
justify-content: center;
margin-bottom: 1.1rem;
}
.mid-cta-chips a {
text-decoration: none;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.12);
border-radius: 999px;
padding: 0.4rem 0.9rem;
font-size: 0.86rem;
font-weight: 700;
}
.mid-cta-chips a:hover {
background: rgba(255, 255, 255, 0.22);
}
.journey-strip {
display: grid;
grid-template-columns: repeat(6, minmax(140px, 1fr));
gap: 0.75rem;
margin-bottom: 1.5rem;
overflow-x: auto;
padding-bottom: 0.4rem;
}
.journey-step {
min-width: 150px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 1rem;
padding: 1rem 0.9rem;
}
.journey-step span {
display: block;
font-family: "Sora", sans-serif;
font-weight: 800;
color: #fbbf24;
margin-bottom: 0.45rem;
font-size: 0.85rem;
}
.journey-step h3 {
margin: 0 0 0.4rem;
font-size: 0.95rem;
color: #fff;
}
.journey-step p {
margin: 0;
font-size: 0.84rem;
color: rgba(248, 250, 249, 0.72) !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
.gallery-grid-compact {
grid-template-columns: repeat(3, 1fr);
}
.roadmap-preview {
margin-top: 1.25rem;
padding: 1rem 1.1rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.08);
}
.roadmap-preview-label {
margin: 0 0 0.35rem !important;
font-size: 0.72rem !important;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fbbf24 !important;
font-weight: 800;
}
.roadmap-preview h3 {
margin: 0 0 0.65rem;
font-size: 1rem;
color: #fff;
}
.roadmap-preview ol {
margin: 0;
padding-left: 1.1rem;
color: rgba(248, 250, 249, 0.82);
font-size: 0.9rem;
}
.roadmap-preview-note {
margin: 0.7rem 0 0 !important;
font-size: 0.82rem !important;
color: rgba(248, 250, 249, 0.55) !important;
}
.featured-service {
border-color: rgba(13, 92, 86, 0.28);
box-shadow: 0 16px 40px rgba(12, 31, 28, 0.1);
background: linear-gradient(180deg, #ffffff, #f0f7f5);
}
.service-badge {
display: inline-flex;
margin-bottom: 0.65rem;
padding: 0.28rem 0.65rem;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.service-outcome {
margin: 0.65rem 0 1rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--primary-dark);
}
.trust-lead {
display: grid;
grid-template-columns: 1.4fr 0.8fr;
gap: 1rem;
margin: 0 0 2rem;
padding: 1.35rem;
border-radius: 1.25rem;
border: 1px solid var(--border);
background: linear-gradient(135deg, #062a27, #0d5c56);
color: #fff;
box-shadow: 0 18px 40px rgba(12, 31, 28, 0.14);
}
.trust-lead-kicker {
margin: 0 0 0.35rem;
color: #fbbf24;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.trust-lead h3 {
margin: 0 0 0.55rem;
color: #fff;
font-size: 1.35rem;
}
.trust-lead p {
color: rgba(248, 250, 249, 0.78) !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
.trust-lead .btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-color: rgba(255, 255, 255, 0.28);
}
.trust-lead-score {
display: grid;
place-content: center;
text-align: center;
gap: 0.35rem;
padding: 1rem;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.16);
}
.trust-lead-score strong {
font-family: "Sora", sans-serif;
font-size: 1.2rem;
}
.trust-lead-score .stars {
color: #fbbf24;
letter-spacing: 0.08em;
}
.trust-lead-score p {
margin: 0;
font-size: 0.86rem;
}
.reviews-subhead {
margin: 0 0 0.35rem;
font-size: 1.2rem;
}
.reviews-subcopy {
margin: 0 0 1rem;
color: var(--muted-text);
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
@media (max-width: 980px) {
.benefit-rail,
.featured-spotlight,
.trust-lead,
.journey-strip {
grid-template-columns: 1fr 1fr;
}
.benefit-rail-item:nth-child(2) {
border-right: 0;
}
.gallery-grid-compact {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.benefit-rail,
.featured-spotlight,
.trust-lead,
.journey-strip,
.media-card {
grid-template-columns: 1fr;
}
.benefit-rail-item {
border-right: 0;
border-bottom: 1px solid var(--border);
}
.benefit-rail-item:last-child {
border-bottom: 0;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.parallax-layer,
.reveal,
.ambient-dot,
.floating-cta,
.floating-whatsapp,
.ticker-track {
animation: none !important;
transition: none !important;
transform: none !important;
}
.reveal {
opacity: 1 !important;
}
}
@keyframes floatGlow {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(20px);
}
}
@keyframes tickerMove {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@keyframes loaderSpin {
to {
transform: rotate(360deg);
}
}
@keyframes ambientFloat {
0%,
100% {
transform: translateY(0) translateX(0);
}
50% {
transform: translateY(-18px) translateX(8px);
}
}
@keyframes floatCta {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
@media (max-width: 860px) {
html {
scroll-behavior: auto;
}
.hero-grid,
.contact-wrap,
.roadmap-wrap,
.wizard-wrap,
.about-layout {
grid-template-columns: 1fr;
}
.hero {
padding-top: 3.3rem;
}
.footer-wrap {
flex-direction: column;
justify-content: center;
padding: 0.8rem 0;
}
.sticky-enquiry {
width: calc(100% - 1rem);
border-radius: 0.8rem;
justify-content: center;
bottom: 0.5rem;
}
.sticky-enquiry p {
display: none;
}
.floating-whatsapp {
bottom: 4.6rem;
}
.section h2::after {
width: 72%;
}
.testimonial {
min-width: 100%;
}
.premium-pill {
font-size: 0.72rem;
}
.quick-proof span {
font-size: 0.78rem;
}
.section > .container > p:first-of-type {
display: block;
}
}
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.blog-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 1.35rem 1.4rem;
box-shadow: 0 8px 28px rgba(12, 31, 28, 0.05);
transition: transform 0.25s ease, box-shadow 0.25s ease;
border-top: 3px solid var(--primary);
}
.blog-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 34px rgba(12, 31, 28, 0.1);
}
.blog-card h3 {
margin: 0 0 0.75rem 0;
font-size: 1.1rem;
color: var(--primary);
}
.blog-card p {
margin: 0 0 1rem 0;
font-size: 0.9rem;
color: var(--muted-text);
line-height: 1.5;
}
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.video-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.8rem;
padding: 1.5rem;
box-shadow: var(--shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.video-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15);
}
.video-card h3 {
margin: 0 0 0.75rem 0;
font-size: 1.1rem;
color: var(--primary);
}
.video-card p {
margin: 0 0 1rem 0;
font-size: 0.9rem;
color: var(--muted-text);
line-height: 1.5;
}
.location-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.location-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 0;
box-shadow: 0 10px 30px rgba(12, 31, 28, 0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
display: flex;
flex-direction: column;
}
.location-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15);
}
.location-card .card-photo {
width: 100%;
margin: 0;
height: 170px;
border-radius: 0;
object-fit: cover;
}
.location-card-body {
padding: 1.15rem 1.25rem 1.35rem;
}
.location-card:not(:has(.location-card-body)) {
padding: 1.15rem 1.25rem 1.35rem;
}
.section .breadcrumb {
background: transparent;
border-bottom: none;
padding: 0 0 1rem;
margin: 0 0 0.35rem;
}
.location-card h3 {
margin: 0 0 0.55rem;
font-size: 1.2rem;
color: var(--primary);
padding: 0;
}
.location-card p {
margin: 0 0 1rem;
font-size: 0.9rem;
color: var(--muted-text);
line-height: 1.5;
padding: 0;
}
.location-card .btn {
margin: 0;
align-self: flex-start;
}
#locations .section-head {
margin-bottom: 1.75rem;
padding-inline: 0.15rem;
}
#locations .section-head h2 {
margin-bottom: 0.75rem;
}
#locations .section-head p {
margin-top: 0.85rem;
max-width: 52ch;
}
.newsletter-form {
display: flex;
gap: 0.75rem;
max-width: 500px;
margin: 1.5rem auto 0;
}
.newsletter-form input {
flex: 1;
padding: 0.75rem 1rem;
border: 1px solid var(--border);
border-radius: 0.5rem;
font-size: 1rem;
background: var(--surface);
color: var(--text);
}
.newsletter-form input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}
.student-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-bottom: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border);
}
.student-name {
font-weight: 600;
color: var(--primary);
font-size: 0.95rem;
}
.student-college {
font-size: 0.85rem;
color: var(--muted-text);
}
.student-marks {
font-size: 0.8rem;
color: var(--accent);
font-weight: 500;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media only screen and (max-width: 767px) {
.newsletter-form {
flex-direction: column;
}
.blog-grid,
.video-grid,
.location-grid {
grid-template-columns: 1fr;
}
}
.breadcrumb {
background: var(--muted-surface);
padding: 0.75rem 0;
border-bottom: 1px solid var(--border);
}
.breadcrumb-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 0.5rem;
align-items: center;
}
.breadcrumb-list li {
font-size: 0.85rem;
color: var(--muted-text);
}
.breadcrumb-list li::after {
content: "?";
margin-left: 0.5rem;
color: var(--muted-text);
}
.breadcrumb-list li:last-child::after {
content: "";
}
.breadcrumb-list a {
color: var(--primary);
text-decoration: none;
}
.breadcrumb-list a:hover {
text-decoration: underline;
}
.search-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: none;
}
.search-modal.active {
display: flex;
align-items: center;
justify-content: center;
}
.search-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
}
.search-container {
position: relative;
background: var(--surface);
padding: 2rem;
border-radius: 1rem;
max-width: 600px;
width: 90%;
box-shadow: var(--shadow);
z-index: 1;
}
.search-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.search-header h2 {
margin: 0;
font-size: 1.5rem;
color: var(--text);
}
.search-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--muted-text);
padding: 0.5rem;
border-radius: 0.5rem;
transition: background 0.2s ease;
}
.search-close:hover {
background: var(--muted-surface);
color: var(--text);
}
.search-container input {
width: 100%;
padding: 1rem;
border: 2px solid var(--border);
border-radius: 0.5rem;
font-size: 1rem;
background: var(--surface);
color: var(--text);
margin-bottom: 1rem;
}
.search-container input:focus {
outline: none;
border-color: var(--primary);
}
.search-results {
max-height: 300px;
overflow-y: auto;
}
.search-result-item {
padding: 0.75rem;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background 0.2s ease;
}
.search-result-item:hover {
background: var(--muted-surface);
}
.search-result-item:last-child {
border-bottom: none;
}
.search-toggle,
.theme-toggle,
.menu-toggle.icon-btn {
background: transparent;
border: 0;
font-size: 0;
line-height: 0;
}
.search-toggle:hover,
.theme-toggle:hover,
.menu-toggle.icon-btn:hover {
background: #e8f2f0;
}
body.dark-theme .search-toggle:hover,
body.dark-theme .theme-toggle:hover,
body.dark-theme .menu-toggle.icon-btn:hover {
background: rgba(20, 184, 166, 0.16);
}
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--primary);
color: white;
border: none;
font-size: 1.5rem;
cursor: pointer;
box-shadow: var(--shadow);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 900;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--primary-dark);
transform: translateY(-4px);
}
.timeline-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.timeline-item {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.8rem;
padding: 1.5rem;
box-shadow: var(--shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.timeline-item:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15);
}
.timeline-month {
display: inline-block;
background: var(--primary);
color: white;
padding: 0.5rem 1rem;
border-radius: 2rem;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.timeline-item h3 {
margin: 0 0 0.5rem 0;
font-size: 1.1rem;
color: var(--text);
}
.timeline-item p {
margin: 0;
font-size: 0.9rem;
color: var(--muted-text);
line-height: 1.5;
}
.blog-meta {
color: var(--muted-text);
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
.blog-card-date {
margin: 0.35rem 0 0.5rem;
color: var(--muted-text);
font-size: 0.82rem;
font-weight: 600;
}
.lang-switch {
display: inline-flex;
align-items: center;
gap: 0;
margin-right: 0.15rem;
border: 1px solid var(--border);
border-radius: 999px;
overflow: hidden;
background: #fff;
}
.lang-switch a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.1rem;
height: 1.85rem;
padding: 0 0.55rem;
font-size: 0.72rem;
font-weight: 700;
text-decoration: none;
color: var(--muted-text);
font-family: "Noto Sans Tamil", "Plus Jakarta Sans", sans-serif;
}
.lang-switch a.is-active {
background: var(--primary);
color: #fff;
}
html.dark-theme .lang-switch,
body.dark-theme .lang-switch {
background: #111a2e;
border-color: var(--border);
}
html.dark-theme .lang-switch a.is-active,
body.dark-theme .lang-switch a.is-active {
background: var(--primary);
color: #0b1220;
}
.blog-layout {
max-width: 46rem;
margin: 0 auto;
}
.blog-layout > h1 {
font-size: clamp(1.65rem, 3.2vw, 2.35rem);
line-height: 1.25;
margin: 0 0 0.75rem;
color: var(--text);
}
.blog-layout > img,
.blog-hero-img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
max-height: 360px;
object-fit: cover;
border-radius: 1.2rem;
margin: 1rem 0 1.5rem;
border: 1px solid var(--border);
}
.blog-layout p,
.blog-layout li {
color: var(--text);
line-height: 1.7;
}
c.blog-layout a:not(.btn):not(.blog-tags a):not(.related-blog-card) {
color: var(--primary);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.blog-layout a:not(.btn):not(.blog-tags a):not(.related-blog-card):hover {
color: var(--primary-dark);
}
.blog-official-links {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 1.25rem 1.35rem;
margin: 1.75rem 0;
box-shadow: var(--shadow);
}
.blog-official-links h2 {
margin-top: 0;
font-size: 1.2rem;
}
.blog-official-links ul {
margin: 0.5rem 0 0;
}
.blog-official-links li {
margin-bottom: 0.55rem;
}
.blog-official-links a[target="_blank"]::after {
content: " ?";
font-size: 0.85em;
opacity: 0.75;
}
.blog-cta {
background: var(--muted-surface);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 1.75rem 1.5rem;
margin-top: 2.25rem;
text-align: center;
}
.blog-cta h3 {
margin: 0 0 0.75rem 0;
color: var(--primary);
}
.blog-cta p {
margin: 0 0 1.25rem 0;
color: var(--muted-text);
}
.blog-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
align-items: center;
}
.blog-cta .btn {
margin: 0;
}
article h2 {
margin-top: 2rem;
margin-bottom: 1rem;
color: var(--primary);
}
article h3 {
margin-top: 1.5rem;
margin-bottom: 0.75rem;
color: var(--text);
}
article ul,
article ol {
margin-bottom: 1rem;
padding-left: 1.35rem;
}
article li {
margin-bottom: 0.5rem;
line-height: 1.65;
}
body.dark-theme .blog-cta,
body.dark-theme .blog-official-links,
body.dark-theme .location-card,
body.dark-theme .info-card {
background: var(--surface);
border-color: var(--border);
}
body.dark-theme .blog-layout a:not(.btn):not(.blog-tags a):not(.related-blog-card):not(.path-card),
body.dark-theme article a:not(.btn):not(.blog-tags a):not(.related-blog-card):not(.path-card) {
color: #5eead4;
}
body.dark-theme .site-header {
background: rgba(11, 18, 32, 0.92);
border-bottom-color: var(--border);
}
body.dark-theme .site-footer {
background: linear-gradient(135deg, #041f1d 0%, #063a36 100%);
color: #f1f5f4;
border-top-color: rgba(255, 255, 255, 0.08);
}
body.dark-theme .site-footer,
body.dark-theme .site-footer p,
body.dark-theme .site-footer h3,
body.dark-theme .site-footer h4,
body.dark-theme .site-footer span,
body.dark-theme .site-footer strong,
body.dark-theme .footer-wrap p,
body.dark-theme .footer-brand p,
body.dark-theme .footer-brand h3,
body.dark-theme .contact-info p,
body.dark-theme .footer-bottom-left p {
color: #f1f5f4;
}
body.dark-theme .site-footer a,
body.dark-theme .footer-wrap a,
body.dark-theme .footer-section nav a,
body.dark-theme .contact-info a {
color: rgba(241, 245, 244, 0.9);
}
body.dark-theme .site-footer a:hover,
body.dark-theme .footer-wrap a:hover,
body.dark-theme .footer-section nav a:hover,
body.dark-theme .contact-info a:hover {
color: #ffffff;
}
body.dark-theme .footer-section h4 {
color: #fbbf24;
}
body.dark-theme .breadcrumb-list a {
color: #5eead4;
}
body.dark-theme .btn-secondary {
background: transparent;
color: var(--text);
border-color: var(--border);
}
.resource-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin-top: 1.25rem;
}
.resource-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 1.2rem 1.25rem;
box-shadow: var(--shadow);
}
.resource-card h3 {
margin: 0 0 0.5rem;
font-size: 1.05rem;
color: var(--primary);
}
.resource-card p {
margin: 0 0 0.85rem;
color: var(--muted-text);
font-size: 0.95rem;
}
.resource-card a {
font-weight: 600;
color: var(--primary);
}
body.dark-theme .resource-card a {
color: #5eead4;
}
@media (max-width: 640px) {
.blog-cta {
padding: 1.35rem 1rem;
}
.blog-cta-actions .btn {
width: 100%;
}
}
.appointment-form {
max-width: 800px;
margin: 2rem auto 0;
background: var(--surface);
padding: 2rem;
border-radius: 0.8rem;
box-shadow: var(--shadow);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--text);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--border);
border-radius: 0.5rem;
font-size: 1rem;
background: var(--surface);
color: var(--text);
font-family: inherit;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
}
.form-group textarea {
resize: vertical;
min-height: 100px;
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
}
.comparison-tool {
max-width: 900px;
margin: 2rem auto 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1.15rem;
padding: 1.35rem 1.4rem 1.5rem;
box-shadow: 0 10px 32px rgba(12, 31, 28, 0.06);
}
.comparison-selectors {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.comparison-selectors .form-group {
margin-bottom: 0;
}
#compareBtn {
width: 100%;
margin-bottom: 1.5rem;
}
.comparison-result {
background: var(--surface);
border-radius: 0.8rem;
padding: 1.5rem;
box-shadow: var(--shadow);
}
.comparison-result.hidden {
display: none;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
}
.comparison-table th,
.comparison-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
.comparison-table th {
background: var(--muted-surface);
font-weight: 600;
color: var(--text);
}
.comparison-table th:first-child {
width: 30%;
}
.comparison-table td {
color: var(--muted-text);
}
.comparison-table tr:last-child td {
border-bottom: none;
}
@media (max-width: 768px) {
.comparison-selectors {
grid-template-columns: 1fr;
}
.comparison-table {
font-size: 0.9rem;
}
.comparison-table th,
.comparison-table td {
padding: 0.75rem 0.5rem;
}
}
.calculator-tool {
max-width: 600px;
margin: 2rem auto 0;
background: var(--surface);
padding: 1.5rem 1.6rem;
border-radius: 1.15rem;
border: 1px solid var(--border);
box-shadow: 0 10px 32px rgba(12, 31, 28, 0.06);
}
.calculator-tool .form-group {
margin-bottom: 1.5rem;
}
#calculateBtn {
width: 100%;
margin-bottom: 1.5rem;
}
.calculator-result {
background: var(--muted-surface);
border-radius: 0.8rem;
padding: 1.5rem;
}
.calculator-result.hidden {
display: none;
}
.calculator-result h3 {
margin: 0 0 1rem 0;
color: var(--primary);
}
.college-options {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.college-option {
background: var(--surface);
padding: 1rem;
border-radius: 0.5rem;
border: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.college-option-name {
font-weight: 600;
color: var(--text);
}
.college-option-chance {
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 600;
}
.chance-high {
background: #dcfce7;
color: #166534;
}
.chance-medium {
background: #fef9c3;
color: #854d0e;
}
.chance-low {
background: #fee2e2;
color: #991b1b;
}
.aptitude-test {
max-width: 700px;
margin: 2rem auto 0;
background: var(--surface);
padding: 2rem;
border-radius: 0.8rem;
box-shadow: var(--shadow);
}
.aptitude-questions {
margin-bottom: 1.5rem;
}
.aptitude-question {
display: none;
}
.aptitude-question.active {
display: block;
}
.aptitude-question h3 {
margin: 0 0 1rem 0;
color: var(--primary);
}
.aptitude-question p {
margin: 0 0 1.5rem 0;
color: var(--muted-text);
font-size: 1.1rem;
}
.aptitude-options {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.aptitude-option {
display: flex;
align-items: center;
padding: 1rem;
border: 2px solid var(--border);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.2s ease;
}
.aptitude-option:hover {
border-color: var(--primary);
background: var(--muted-surface);
}
.aptitude-option input[type="radio"] {
margin-right: 1rem;
width: 1.2rem;
height: 1.2rem;
}
.aptitude-option span {
font-size: 1rem;
color: var(--text);
}
.aptitude-controls {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
}
.aptitude-controls button {
flex: 1;
}
.aptitude-result {
background: var(--muted-surface);
border-radius: 0.8rem;
padding: 2rem;
text-align: center;
}
.aptitude-result.hidden {
display: none;
}
.aptitude-result h3 {
margin: 0 0 1.5rem 0;
color: var(--primary);
}
.career-recommendation {
margin-bottom: 1.5rem;
padding: 1.5rem;
background: var(--surface);
border-radius: 0.5rem;
border: 1px solid var(--border);
}
.career-recommendation h4 {
margin: 0 0 0.75rem 0;
color: var(--text);
font-size: 1.2rem;
}
.career-recommendation p {
margin: 0 0 1rem 0;
color: var(--muted-text);
line-height: 1.6;
}
.career-recommendation ul {
text-align: left;
padding-left: 1.5rem;
color: var(--muted-text);
}
.career-recommendation li {
margin-bottom: 0.5rem;
}
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.news-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.8rem;
padding: 1.5rem;
box-shadow: var(--shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.news-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15);
}
.news-date {
display: inline-block;
background: var(--primary);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.news-card h3 {
margin: 0 0 0.75rem 0;
font-size: 1.1rem;
color: var(--text);
}
.news-card p {
margin: 0 0 1rem 0;
font-size: 0.9rem;
color: var(--muted-text);
line-height: 1.5;
}
.review-filters {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.filter-btn {
padding: 0.5rem 1.5rem;
border: 2px solid var(--border);
background: var(--surface);
color: var(--text);
border-radius: 2rem;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.2s ease;
}
.filter-btn:hover {
border-color: var(--primary);
color: var(--primary);
}
.filter-btn.active {
background: var(--primary);
border-color: var(--primary);
color: white;
}
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.review-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.8rem;
padding: 1.5rem;
box-shadow: var(--shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.review-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15);
}
.review-card.hidden {
display: none;
}
.review-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border);
}
.review-header h3 {
margin: 0;
font-size: 1rem;
color: var(--text);
flex: 1;
}
.review-rating {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.25rem;
}
.stars {
font-size: 1rem;
letter-spacing: 2px;
}
.rating-score {
font-size: 0.85rem;
color: var(--muted-text);
font-weight: 500;
}
.review-text {
margin: 0 0 0.75rem 0;
font-style: italic;
color: var(--text);
line-height: 1.6;
font-size: 0.95rem;
}
.review-author {
margin: 0;
font-size: 0.85rem;
color: var(--muted-text);
font-weight: 500;
}
.write-review {
background: var(--muted-surface);
border-radius: 0.8rem;
padding: 2rem;
text-align: center;
border: 1px solid var(--border);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.write-review h3 {
margin: 0;
color: var(--primary);
}
.write-review p {
margin: 0;
color: var(--muted-text);
max-width: 42ch;
}
.write-review .btn {
margin: 0.15rem;
}
.site-footer {
background: linear-gradient(135deg, #062a27 0%, #084540 100%);
color: #f1f5f4;
padding: 3rem 0 1.5rem;
margin-top: 4rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 2rem;
margin-bottom: 2rem;
}
.footer-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.footer-brand img {
border-radius: 0.5rem;
background: #fff;
padding: 0.5rem;
}
.footer-brand h3 {
margin: 0;
font-size: 1.4rem;
font-weight: 700;
color: #f8faf9;
}
.footer-brand p {
margin: 0;
font-size: 0.9rem;
color: rgba(248, 250, 249, 0.78);
line-height: 1.4;
}
.footer-section h4 {
margin: 0 0 1rem 0;
color: #fbbf24;
font-size: 1.1rem;
font-weight: 600;
}
.footer-section nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer-section nav a {
color: rgba(248, 250, 249, 0.82);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s ease;
}
.footer-section nav a:hover {
color: #fff;
}
.site-footer .contact-info p {
margin: 0.5rem 0;
font-size: 0.9rem;
color: rgba(248, 250, 249, 0.78);
}
.site-footer .contact-info strong {
color: #fff;
font-weight: 600;
}
.site-footer .contact-info a {
color: rgba(248, 250, 249, 0.9);
text-decoration: none;
transition: color 0.2s ease;
}
.site-footer .contact-info a:hover {
color: #fff;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-bottom-left p {
margin: 0;
font-size: 0.85rem;
color: rgba(248, 250, 249, 0.72);
}
.social-links {
display: flex;
gap: 1rem;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.12);
border-radius: 50%;
color: #fff;
transition: all 0.3s ease;
text-decoration: none;
}
.social-icon:hover {
background: rgba(255, 255, 255, 0.22);
transform: translateY(-2px);
color: #fff;
}
.site-footer p,
body.dark-theme .site-footer p {
color: rgba(248, 250, 249, 0.82);
}
.site-footer .footer-brand h3 {
color: #f8faf9;
}
.site-footer .footer-section h4,
body.dark-theme .site-footer .footer-section h4 {
color: #fbbf24;
}
@media (max-width: 992px) {
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.footer-bottom {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
@media (max-width: 576px) {
.footer-content {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.footer-brand {
text-align: center;
align-items: center;
}
.social-links {
justify-content: center;
}
}
.mobile-action-bar {
display: none;
}
@media (max-width: 768px) {
.mobile-action-bar {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background: var(--surface);
border-top: 1px solid var(--border);
box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
padding: 0.45rem 0.5rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
gap: 0.35rem;
}
.mab-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
text-decoration: none;
font-size: 0.72rem;
font-weight: 700;
border-radius: 0.65rem;
padding: 0.45rem 0.25rem;
color: #fff;
line-height: 1.1;
min-height: 3rem;
}
.mab-btn span {
font-size: 1rem;
line-height: 1;
}
.mab-call {
background: #0f766e;
}
.mab-wa {
background: #16a34a;
}
.mab-book {
background: #0284c7;
}
.floating-cta,
.floating-whatsapp,
.sticky-enquiry {
display: none !important;
}
body {
padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
}
.back-to-top {
bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}
}
.site-footer {
background: linear-gradient(135deg, #062a27 0%, #084540 100%) !important;
color: #f1f5f4 !important;
}
body.dark-theme .site-footer {
background: linear-gradient(135deg, #041f1d 0%, #063a36 100%) !important;
color: #f1f5f4 !important;
}
.site-footer p,
.site-footer span,
.site-footer li,
.site-footer strong,
.site-footer .visitor-count,
.site-footer .footer-wrap p,
.site-footer .footer-brand p,
.site-footer .contact-info p,
.site-footer .footer-bottom-left p,
body.dark-theme .site-footer p,
body.dark-theme .site-footer span,
body.dark-theme .site-footer .footer-wrap p,
body.dark-theme .site-footer .footer-brand p,
body.dark-theme .site-footer .contact-info p,
body.dark-theme .site-footer .footer-bottom-left p {
color: rgba(241, 245, 244, 0.86) !important;
}
.site-footer h3,
.site-footer .footer-brand h3,
body.dark-theme .site-footer h3,
body.dark-theme .site-footer .footer-brand h3 {
color: #ffffff !important;
}
.site-footer h4,
.site-footer .footer-section h4,
body.dark-theme .site-footer h4,
body.dark-theme .site-footer .footer-section h4 {
color: #fbbf24 !important;
}
.site-footer a,
.site-footer .footer-wrap a,
.site-footer .footer-section nav a,
.site-footer .contact-info a,
body.dark-theme .site-footer a,
body.dark-theme .site-footer .footer-wrap a,
body.dark-theme .site-footer .footer-section nav a,
body.dark-theme .site-footer .contact-info a {
color: rgba(241, 245, 244, 0.92) !important;
}
.site-footer a:hover,
body.dark-theme .site-footer a:hover {
color: #ffffff !important;
}
.site-footer .social-icon,
body.dark-theme .site-footer .social-icon {
color: #ffffff !important;
}
.site-footer .contact-info strong,
body.dark-theme .site-footer .contact-info strong {
color: #ffffff !important;
}
img,
video,
iframe,
svg {
max-width: 100%;
height: auto;
}
.container,
.hero-grid,
.instant-grid,
.blog-grid,
.location-grid,
.info-grid,
.service-grid,
.path-grid {
max-width: 100%;
min-width: 0;
}
.blog-layout {
max-width: min(46rem, 100%);
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.hero-card,
.hero-rotator,
.featured-card img,
.gallery-grid img,
.media-card img,
.featured-lead img {
max-width: 100%;
}
.related-blogs {
margin: 2rem 0 0.5rem;
padding: 1.35rem 0 0;
border-top: 1px solid var(--border);
}
.related-blogs h2 {
margin: 0 0 0.85rem;
font-size: 1.25rem;
}
.related-blogs-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.85rem;
}
@media (min-width: 560px) {
.related-blogs-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
.related-blog-card {
display: block;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.9rem;
padding: 1rem 1.05rem;
text-decoration: none;
color: var(--text);
box-shadow: 0 8px 22px rgba(12, 31, 28, 0.05);
transition: transform 0.2s ease, border-color 0.2s ease;
}
.related-blog-card:hover {
transform: translateY(-2px);
border-color: var(--primary);
color: var(--text);
}
.related-blog-card strong {
display: block;
color: var(--primary);
margin-bottom: 0.35rem;
font-size: 0.98rem;
}
.related-blog-card span {
display: block;
color: var(--muted-text);
font-size: 0.88rem;
line-height: 1.45;
}
body.dark-theme .related-blog-card strong {
color: #5eead4;
}
.start-here {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1.1rem;
padding: 1.35rem 1.4rem;
box-shadow: var(--shadow);
}
.start-here h2 {
margin: 0 0 0.5rem;
font-size: 1.35rem;
}
.start-here > p {
margin: 0 0 1rem;
color: var(--muted-text);
}
.start-here-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.65rem;
}
.start-here-list a {
display: flex;
gap: 0.75rem;
align-items: flex-start;
text-decoration: none;
color: var(--text);
padding: 0.75rem 0.85rem;
border-radius: 0.8rem;
background: var(--muted-surface);
border: 1px solid transparent;
}
.start-here-list a:hover {
border-color: var(--primary);
}
.start-here-list strong {
color: var(--primary);
display: block;
margin-bottom: 0.15rem;
}
.start-here-list span {
color: var(--muted-text);
font-size: 0.9rem;
}
.floating-cta,
.floating-whatsapp,
.sticky-enquiry {
display: none !important;
}
.mid-cta {
padding: clamp(2rem, 4vw, 3rem) 0;
}
.mid-cta .mid-cta-box {
text-align: center;
max-width: 40rem;
margin: 0 auto;
}
@media (max-width: 768px) {
.hero-subnote,
.ticker-section,
.gallery-section,
.featured-section {
display: none;
}
.hero-card {
margin-top: 1rem;
}
.hero-card img,
.hero-rotator {
max-height: 220px;
width: 100%;
object-fit: cover;
}
.about-photo,
.contact-photo,
.blog-hero-img {
max-height: 220px;
}
.card-photo,
.blog-card .card-photo,
.service-card .card-photo,
.city-card .card-photo,
.info-card .card-photo,
.instant-card .card-photo,
.location-card .card-photo {
height: 130px !important;
}
.quick-proof {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.quick-proof span {
font-size: 0.78rem;
}
.section {
padding: clamp(2.4rem, 6vw, 3.5rem) 0;
}
.blog-layout {
padding-inline: 0.1rem;
}
}
.path-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin-top: 1.25rem;
}
.path-card {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1.15rem 1.2rem;
border: 1px solid var(--border);
border-radius: 1rem;
background: var(--surface);
box-shadow: var(--shadow);
text-decoration: none;
color: inherit;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.path-card:hover {
transform: translateY(-2px);
border-color: var(--brand, #0d5c56);
}
.path-card strong {
font-family: Sora, sans-serif;
font-size: 1.05rem;
}
.path-card span {
color: var(--muted-text);
font-size: 0.9rem;
line-height: 1.45;
}
.path-why {
text-align: center;
color: var(--muted-text);
margin: 1.25rem auto 0.75rem;
max-width: 52ch;
font-size: 0.95rem;
}
.tools-mini-label {
text-align: center;
margin: 1.1rem 0 0.45rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted-text);
}
.tools-mini {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
justify-content: center;
margin-top: 0;
}
.tools-mini a,
.tools-mini a:link,
.tools-mini a:visited {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.55rem 1rem;
border-radius: 0.75rem;
border: 1px solid var(--border);
background: var(--muted-surface);
color: #0c1f1c !important;
font-weight: 600;
font-size: 0.88rem;
text-decoration: none !important;
line-height: 1.2;
white-space: nowrap;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.tools-mini a:hover,
.tools-mini a:focus-visible {
border-color: var(--primary);
background: var(--surface);
color: #0d5c56 !important;
text-decoration: none !important;
}
.hub-link-list {
columns: 2;
column-gap: 2rem;
padding-left: 1.15rem;
margin: 0.75rem 0 0;
}
.hub-link-list li {
break-inside: avoid;
margin: 0.4rem 0;
}
@media (max-width: 640px) {
.hub-link-list { columns: 1; }
}
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
.blog-layout,
.blog-layout *,
article.section,
.container {
min-width: 0;
}
.blog-layout img,
.blog-hero-img,
.blog-layout > img,
article img:not(.card-photo),
.about-photo,
.contact-photo,
.hero-rotator,
.hero-card img {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
display: block !important;
object-fit: cover;
box-sizing: border-box !important;
}
/* Keep card thumbnails same size even if source photo is portrait */
.card-photo,
.blog-card .card-photo,
.service-card .card-photo,
.city-card .card-photo,
.info-card .card-photo,
.instant-card .card-photo,
.location-card .card-photo {
width: 100% !important;
max-width: 100% !important;
height: 160px !important;
aspect-ratio: 2 / 1;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
box-sizing: border-box !important;
}
.blog-card .card-photo,
.service-card .card-photo {
height: 150px !important;
}
.city-card .card-photo,
.info-card .card-photo {
height: 150px !important;
}
.instant-card .card-photo {
height: 140px !important;
}
.location-card .card-photo {
height: 170px !important;
}
.blog-hero-img,
.blog-layout > img {
max-height: 220px !important;
}
@media (min-width: 769px) {
.blog-hero-img,
.blog-layout > img {
max-height: 360px !important;
}
}
.related-blog-card,
.blog-official-links,
.blog-cta,
.start-here,
.path-card {
max-width: 100%;
box-sizing: border-box;
}
.site-header .header-wrap,
.site-header .nav-wrap {
max-width: 100%;
min-width: 0;
}
html.dark-theme,
body.dark-theme {
--bg: #0b1220 !important;
--surface: #111a2e !important;
--muted-surface: #0e172a !important;
--text: #e2e8f0 !important;
--muted-text: #94a3b8 !important;
--primary: #14b8a6 !important;
--primary-dark: #5eead4 !important;
--accent: #22d3ee !important;
--accent-2: #38bdf8 !important;
--border: #24334f !important;
--shadow: 0 14px 34px rgba(2, 6, 23, 0.45) !important;
color-scheme: dark;
}
html.dark-theme body,
body.dark-theme {
background: var(--bg) !important;
color: var(--text) !important;
}
html.dark-theme .site-header,
body.dark-theme .site-header {
background: rgba(11, 18, 32, 0.94) !important;
border-bottom-color: var(--border) !important;
}
html.dark-theme .brand-text,
body.dark-theme .brand-text,
html.dark-theme .site-nav a,
body.dark-theme .site-nav a,
html.dark-theme .nav-dropdown-toggle,
body.dark-theme .nav-dropdown-toggle {
color: var(--text) !important;
}
html.dark-theme .section:not(.mid-cta),
body.dark-theme .section:not(.mid-cta),
html.dark-theme .section-theme-mint,
html.dark-theme .section-theme-lavender,
html.dark-theme .section-theme-sky,
html.dark-theme .section-theme-cyan,
html.dark-theme .section-theme-ice,
html.dark-theme .section-theme-rose,
html.dark-theme .section-theme-lime,
html.dark-theme .section-theme-gold,
html.dark-theme .section-theme-violet,
html.dark-theme .section-theme-slate,
html.dark-theme .section-theme-teal,
html.dark-theme .section-theme-indigo,
html.dark-theme .section-theme-emerald,
html.dark-theme .section-theme-azure,
html.dark-theme .section-muted,
html.dark-theme .hero,
html.dark-theme .featured-section,
html.dark-theme .gallery-section,
html.dark-theme .roadmap-section,
body.dark-theme .section-theme-mint,
body.dark-theme .section-theme-lavender,
body.dark-theme .section-theme-sky,
body.dark-theme .section-theme-cyan,
body.dark-theme .section-theme-ice,
body.dark-theme .section-theme-rose,
body.dark-theme .section-theme-lime,
body.dark-theme .section-theme-gold,
body.dark-theme .section-theme-violet,
body.dark-theme .section-theme-slate,
body.dark-theme .section-theme-teal,
body.dark-theme .section-theme-indigo,
body.dark-theme .section-theme-emerald,
body.dark-theme .section-theme-azure,
body.dark-theme .section-muted,
body.dark-theme .hero,
body.dark-theme .featured-section,
body.dark-theme .gallery-section,
body.dark-theme .roadmap-section {
background: linear-gradient(180deg, rgba(17, 26, 46, 0.92), rgba(11, 18, 32, 0.98)) !important;
color: var(--text) !important;
}
html.dark-theme .mid-cta,
body.dark-theme .mid-cta {
background: linear-gradient(120deg, #c45c26, #b45309) !important;
}
html.dark-theme .mid-cta h2,
body.dark-theme .mid-cta h2 {
color: #fff !important;
}
html.dark-theme .mid-cta p,
body.dark-theme .mid-cta p {
color: rgba(255, 255, 255, 0.88) !important;
}
html.dark-theme .section:not(.mid-cta) p,
html.dark-theme .section:not(.mid-cta) li,
html.dark-theme article p,
html.dark-theme article li,
html.dark-theme .blog-layout p,
html.dark-theme .blog-layout li,
body.dark-theme .section:not(.mid-cta) p,
body.dark-theme .section:not(.mid-cta) li,
body.dark-theme article p,
body.dark-theme article li,
body.dark-theme .blog-layout p,
body.dark-theme .blog-layout li {
color: #cbd5e1 !important;
background: transparent !important;
border-color: transparent !important;
}
html.dark-theme .section:not(.mid-cta) h1,
html.dark-theme .section:not(.mid-cta) h2,
html.dark-theme .section:not(.mid-cta) h3,
html.dark-theme .section:not(.mid-cta) h4,
html.dark-theme article h1,
html.dark-theme article h2,
html.dark-theme article h3,
html.dark-theme article h4,
html.dark-theme .blog-layout h1,
html.dark-theme .blog-layout h2,
html.dark-theme .blog-layout h3,
html.dark-theme .blog-layout h4,
html.dark-theme main > h1,
html.dark-theme .qr-card h1,
body.dark-theme .section:not(.mid-cta) h1,
body.dark-theme .section:not(.mid-cta) h2,
body.dark-theme .section:not(.mid-cta) h3,
body.dark-theme .section:not(.mid-cta) h4,
body.dark-theme article h1,
body.dark-theme article h2,
body.dark-theme article h3,
body.dark-theme article h4,
body.dark-theme .blog-layout h1,
body.dark-theme .blog-layout h2,
body.dark-theme .blog-layout h3,
body.dark-theme .blog-layout h4,
body.dark-theme .qr-card h1 {
color: #f1f5f9 !important;
}
html.dark-theme .info-card,
html.dark-theme .service-card,
html.dark-theme .location-card,
html.dark-theme .legacy-card,
html.dark-theme .featured-card,
html.dark-theme .path-card,
html.dark-theme .start-here,
html.dark-theme .related-blog-card,
html.dark-theme .resource-card,
html.dark-theme .blog-cta,
html.dark-theme .blog-official-links,
html.dark-theme .founder-card,
html.dark-theme .testimonial,
html.dark-theme .contact-form,
html.dark-theme .roadmap-form,
html.dark-theme .calc-card,
html.dark-theme .tool-card,
html.dark-theme .faq-item,
html.dark-theme .media-card,
html.dark-theme .benefit-rail-item,
body.dark-theme .info-card,
body.dark-theme .service-card,
body.dark-theme .location-card,
body.dark-theme .legacy-card,
body.dark-theme .featured-card,
body.dark-theme .path-card,
body.dark-theme .start-here,
body.dark-theme .related-blog-card,
body.dark-theme .resource-card,
body.dark-theme .blog-cta,
body.dark-theme .blog-official-links,
body.dark-theme .founder-card,
body.dark-theme .testimonial,
body.dark-theme .contact-form,
body.dark-theme .roadmap-form,
body.dark-theme .calc-card,
body.dark-theme .tool-card,
body.dark-theme .faq-item,
body.dark-theme .media-card,
body.dark-theme .benefit-rail-item {
background: var(--surface) !important;
border-color: var(--border) !important;
color: var(--text) !important;
background-image: none !important;
}
html.dark-theme input,
html.dark-theme select,
html.dark-theme textarea,
body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea {
background: #0e172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
html.dark-theme .btn-secondary,
body.dark-theme .btn-secondary {
background: #16233d !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
html.dark-theme .breadcrumb-list,
html.dark-theme .breadcrumb-list a,
html.dark-theme .breadcrumb-list li,
body.dark-theme .breadcrumb-list,
body.dark-theme .breadcrumb-list a,
body.dark-theme .breadcrumb-list li {
color: #94a3b8 !important;
}
html.dark-theme .breadcrumb-list a:hover,
body.dark-theme .breadcrumb-list a:hover {
color: #5eead4 !important;
}
html.dark-theme .blog-layout a:not(.btn):not(.path-card):not(.related-blog-card):not(.blog-tags a),
html.dark-theme article.blog-layout a:not(.btn):not(.blog-tags a),
html.dark-theme .blog-card > a:not(.btn),
body.dark-theme .blog-layout a:not(.btn):not(.path-card):not(.related-blog-card):not(.blog-tags a),
body.dark-theme article.blog-layout a:not(.btn):not(.blog-tags a),
body.dark-theme .blog-card > a:not(.btn) {
color: #5eead4 !important;
}
html.dark-theme .tools-mini a,
body.dark-theme .tools-mini a {
background: #16233d !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
text-decoration: none !important;
}
html.dark-theme .tools-mini a:hover,
body.dark-theme .tools-mini a:hover {
border-color: #5eead4 !important;
color: #5eead4 !important;
}
html.dark-theme .path-card,
body.dark-theme .path-card {
color: var(--text) !important;
text-decoration: none !important;
}
html.dark-theme .path-card span,
body.dark-theme .path-card span {
color: var(--muted-text) !important;
}
html.dark-theme .quick-proof span,
body.dark-theme .quick-proof span {
background: #1b2a46 !important;
border-color: #2e4367 !important;
color: #cbd5e1 !important;
}
html.dark-theme .start-here-list a,
body.dark-theme .start-here-list a {
background: var(--muted-surface) !important;
color: var(--text) !important;
}
html.dark-theme .nav-actions,
body.dark-theme .nav-actions {
background: rgba(17, 26, 46, 0.94) !important;
border-color: #24334f !important;
}
html.dark-theme .icon-btn,
html.dark-theme .theme-toggle,
html.dark-theme .menu-toggle,
body.dark-theme .icon-btn,
body.dark-theme .theme-toggle,
body.dark-theme .menu-toggle {
color: #e2e8f0 !important;
}
html.dark-theme .nav-dropdown-menu,
body.dark-theme .nav-dropdown-menu {
background: #111a2e !important;
border-color: #24334f !important;
}
html.dark-theme .mid-cta .btn-primary,
body.dark-theme .mid-cta .btn-primary {
background: #fff !important;
color: #9a3412 !important;
}
.site-footer,
html.dark-theme .site-footer,
body.dark-theme .site-footer {
background: linear-gradient(135deg, #062a27 0%, #084540 100%) !important;
color: #f1f5f4 !important;
border-top-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark-theme .site-footer,
body.dark-theme .site-footer {
background: linear-gradient(135deg, #041f1d 0%, #063a36 100%) !important;
}
.site-footer *,
html.dark-theme .site-footer *,
body.dark-theme .site-footer * {
border-color: rgba(255, 255, 255, 0.12);
}
.site-footer p,
.site-footer span,
.site-footer li,
.site-footer strong,
.site-footer .visitor-count,
.site-footer .footer-wrap p,
.site-footer .footer-brand p,
.site-footer .contact-info p,
.site-footer .footer-bottom-left p,
html.dark-theme .site-footer p,
html.dark-theme .site-footer span,
html.dark-theme .site-footer li,
html.dark-theme .site-footer strong,
body.dark-theme .site-footer p,
body.dark-theme .site-footer span,
body.dark-theme .site-footer li,
body.dark-theme .site-footer strong {
color: rgba(241, 245, 244, 0.9) !important;
background: transparent !important;
}
.site-footer h3,
.site-footer .footer-brand h3,
html.dark-theme .site-footer h3,
body.dark-theme .site-footer h3 {
color: #ffffff !important;
}
.site-footer h4,
.site-footer .footer-section h4,
html.dark-theme .site-footer h4,
body.dark-theme .site-footer h4 {
color: #fbbf24 !important;
}
.site-footer a,
.site-footer .footer-wrap a,
.site-footer .footer-section nav a,
.site-footer .contact-info a,
html.dark-theme .site-footer a,
body.dark-theme .site-footer a {
color: rgba(241, 245, 244, 0.92) !important;
}
.site-footer a:hover,
html.dark-theme .site-footer a:hover,
body.dark-theme .site-footer a:hover {
color: #ffffff !important;
}
.site-footer .social-icon,
html.dark-theme .site-footer .social-icon,
body.dark-theme .site-footer .social-icon {
color: #ffffff !important;
}

/* Blog topic tags — clean chips, not spam link bars */
.blog-tags {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.blog-tags li { margin: 0; padding: 0; list-style: none; }
.blog-tags a,
.blog-tags a:link,
.blog-tags a:visited,
.blog-layout .blog-tags a,
.blog-layout .blog-tags a:link,
.blog-layout .blog-tags a:visited,
article .blog-tags a,
article .blog-tags a:link,
article .blog-tags a:visited {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.9rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  background: var(--muted-surface) !important;
  color: #0c1f1c !important;
  text-decoration: none !important;
  text-underline-offset: unset !important;
  text-decoration-thickness: 0 !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.blog-tags a:hover,
.blog-tags a:focus-visible,
.blog-layout .blog-tags a:hover,
article .blog-tags a:hover {
  border-color: var(--primary) !important;
  background: var(--surface) !important;
  color: #0d5c56 !important;
  text-decoration: none !important;
}
html.dark-theme .blog-tags a,
html.dark-theme .blog-tags a:link,
html.dark-theme .blog-tags a:visited,
html.dark-theme .blog-layout .blog-tags a,
body.dark-theme .blog-tags a,
body.dark-theme .blog-tags a:link,
body.dark-theme .blog-tags a:visited,
body.dark-theme .blog-layout .blog-tags a,
body.dark-theme article .blog-tags a {
  background: #16233d !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
  text-decoration: none !important;
}
html.dark-theme .blog-tags a:hover,
body.dark-theme .blog-tags a:hover {
  border-color: #5eead4 !important;
  color: #5eead4 !important;
  background: #1a2744 !important;
}
.blog-tags-label {
  width: 100%;
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-text);
}

/* Card photo mobile height lock — must stay after desktop card-photo !important rules */
@media (max-width: 768px) {
  .card-photo,
  .blog-card .card-photo,
  .service-card .card-photo,
  .city-card .card-photo,
  .info-card .card-photo,
  .instant-card .card-photo,
  .location-card .card-photo {
    height: 130px !important;
  }
}
/* blog-card equal height lock */
.blog-grid {
  align-items: stretch;
}
.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.blog-card > p {
  flex: 1 1 auto;
}
.blog-card > .btn,
.blog-card > a.btn {
  margin-top: auto;
  align-self: flex-start;
}
/* Free lead magnets + local city hubs */
.magnet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.magnet-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
  text-decoration: none !important;
  color: var(--text) !important;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.magnet-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
}
.magnet-card strong {
  font-size: 1.05rem;
  color: var(--primary);
}
.magnet-card span {
  color: var(--muted-text);
  font-size: 0.92rem;
  line-height: 1.45;
}
.lead-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.75rem;
  align-items: start;
}
.checklist-preview {
  margin: 1rem 0;
  padding-left: 1.2rem;
}
.checklist-preview li { margin: 0.4rem 0; }
.checklist-unlock {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}
.city-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.city-hub-card {
  display: block;
  padding: 1.2rem 1.2rem 1.3rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--muted-surface);
  text-decoration: none !important;
  color: var(--text) !important;
}
.city-hub-card strong {
  display: block;
  font-size: 1.15rem;
  color: var(--primary);
  margin-bottom: 0.35rem;
}
.city-hub-card span {
  color: var(--muted-text);
  font-size: 0.9rem;
  line-height: 1.45;
}
.shortlist-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
@media (max-width: 768px) {
  .lead-split,
  .shortlist-form .form-row {
    grid-template-columns: 1fr;
  }
}
html.dark-theme .magnet-card,
body.dark-theme .magnet-card,
html.dark-theme .city-hub-card,
body.dark-theme .city-hub-card {
  background: #16233d !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}