.elementor-308 .elementor-element.elementor-element-49fb171{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-308 .elementor-element.elementor-element-49fb171.e-con{--flex-grow:0;--flex-shrink:0;}@media(min-width:768px){.elementor-308 .elementor-element.elementor-element-49fb171{--width:83.521%;}}/* Start custom CSS *//* ============================================================
TDB GROUP \u2014 tdb.group Landing Page
WordPress / Elementor Compatible \u2014 Pure CSS
Prefix: tdb- (style isolation)
FONT LOADING:
Paste these tags into your WordPress
via Elementor > Custom Code or theme header.php:
============================================================ */
/* ============================================================
0. CSS VARIABLES & RESETS
============================================================ */
.tdb-wrapper {
--tdb-gold: #caa963;
--tdb-gold-dark: #b08d45;
--tdb-gold-light: #ffeecf;
--tdb-orange: #ff6d38;
--tdb-orange-hover: #ff8559;
--tdb-bg-dark: #0A0A0F;
--tdb-surface-dark: #121218;
--tdb-blue-deep: #0A4D68;
--tdb-navy: #1A3A52;
--tdb-b2b-gold: #D4A574;
--tdb-white: #ffffff;
--tdb-text-muted: rgba(255, 255, 255, 0.7);
--tdb-text-faint: rgba(255, 255, 255, 0.4);
--tdb-border-faint: rgba(255, 255, 255, 0.1);
}
/* \u2014 Master Wrapper Reset \u2014 */
.tdb-wrapper,
.tdb-wrapper *,
.tdb-wrapper *::before,
.tdb-wrapper *::after {
box-sizing: border-box !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.tdb-wrapper {
font-family: 'Manrope', sans-serif !important;
color: #ffffff !important;
background-color: #0A0A0F !important;
overflow-x: hidden !important;
line-height: 1.6 !important;
margin: 0 !important;
padding: 0 !important;
position: relative;
width: 100%;
text-align: center !important;
}
/* Reset WordPress inherited spacing */
/* Let Elementor parents control width — just reset inner spacing */
.tdb-wrapper > section {
margin-left: auto !important;
margin-right: auto !important;
}
/* Force center alignment regardless of Elementor parent settings */
.elementor-widget-container .tdb-wrapper,
.elementor-element .tdb-wrapper {
text-align: center !important;
}
.elementor-widget-container .tdb-wrapper .tdb-branches__header,
.elementor-widget-container .tdb-wrapper .tdb-dual__header,
.elementor-widget-container .tdb-wrapper .tdb-dual__inner,
.elementor-widget-container .tdb-wrapper .tdb-branches__inner,
.elementor-widget-container .tdb-wrapper .tdb-history__inner,
.elementor-widget-container .tdb-wrapper .tdb-history__header {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Kill Elementor parent gaps (left, right, bottom) */
.elementor-widget-container:has(.tdb-wrapper),
.elementor-element:has(.tdb-wrapper),
.elementor-column:has(.tdb-wrapper),
.elementor-column-wrap:has(.tdb-wrapper),
.elementor-row:has(.tdb-wrapper),
.elementor-section:has(.tdb-wrapper),
.elementor-section .elementor-container:has(.tdb-wrapper),
.elementor-section-wrap:has(.tdb-wrapper),
.elementor-inner:has(.tdb-wrapper),
.e-con:has(.tdb-wrapper),
.e-con-inner:has(.tdb-wrapper) {
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
width: 100% !important;
gap: 0 !important;
}
/* Also kill Elementor default section padding */
.elementor-section:has(.tdb-wrapper) > .elementor-container {
padding: 0 !important;
max-width: 100% !important;
}
.elementor-column:has(.tdb-wrapper) > .elementor-widget-wrap,
.elementor-column:has(.tdb-wrapper) > .elementor-column-wrap > .elementor-widget-wrap {
padding: 0 !important;
}
/* Elementor Flexbox Container (newer versions) */
.e-con:has(.tdb-wrapper) {
--padding-top: 0px !important;
--padding-right: 0px !important;
--padding-bottom: 0px !important;
--padding-left: 0px !important;
--gap: 0px !important;
padding: 0 !important;
}
.tdb-wrapper h1,
.tdb-wrapper h2,
.tdb-wrapper h3,
.tdb-wrapper h4,
.tdb-wrapper p,
.tdb-wrapper ul,
.tdb-wrapper li,
.tdb-wrapper span,
.tdb-wrapper div,
.tdb-wrapper section,
.tdb-wrapper footer,
.tdb-wrapper nav,
.tdb-wrapper a,
.tdb-wrapper button {
margin: 0;
padding: 0;
border: none;
outline: none;
text-decoration: none !important;
list-style: none;
}
/* Reset link colors globally inside wrapper */
.tdb-wrapper a,
.tdb-wrapper a:link,
.tdb-wrapper a:visited,
.tdb-wrapper a:hover,
.tdb-wrapper a:active,
.tdb-wrapper a:focus {
color: inherit !important;
text-decoration: none !important;
outline: none !important;
box-shadow: none !important;
}
/* SVG icon base */
.tdb-wrapper .tdb-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
width: 24px !important;
height: 24px !important;
line-height: 0 !important;
}
.tdb-wrapper .tdb-icon svg {
width: 100% !important;
height: 100% !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
/* ============================================================
1. NOISE OVERLAY
============================================================ */
.tdb-noise-overlay {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
pointer-events: none;
opacity: 0.03;
z-index: 100;
background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
background-repeat: repeat;
}
/* ============================================================
2. HERO SECTION
============================================================ */
.tdb-hero {
position: relative !important;
width: 100% !important;
height: 100vh !important;
min-height: 700px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
padding: 2rem 1rem !important;
margin-top: 0 !important;
background-color: #0A0A0F !important;
background-image:
linear-gradient(to bottom, rgba(10,10,15,0.25), rgba(10,10,15,0.75)),
url('https://lh3.googleusercontent.com/aida-public/AB6AXuBfG8vwPYwGPhWsGk1f84zhWlkgST1oxYujt0DOcn262sFu9g27cfYpE17LU2WzVbMN10GYLkxFkXK4jg_tqxOWB-IakFbD8EL01vfmPsRQUNfY5_cGYaAKPWpNVtn7-Dkz_zTfQKrh1l9-v_5jWz9Rx6SYaORiS1bh9npzYblX1hRUUNe-hYL8i7q2VJGCF0x0FO4R7EBe43TIPkfzhQlpjeFIDrXdCh8nJZrSdqvDeNue8urYMqBJTXerwDFsSmi47D2U_wiKhDo') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
overflow: hidden !important;
}
/* Gradient fade to dark at bottom */
.tdb-hero__gradient-bottom {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(to bottom, transparent 40%, #0A0A0F 100%) !important;
pointer-events: none;
z-index: 1;
}
/* Dark overlay */
.tdb-hero__overlay {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0, 0, 0, 0.2) !important;
pointer-events: none;
z-index: 2;
}
/* Hero Content */
.tdb-hero__content {
position: relative !important;
z-index: 10 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
max-width: 72rem;
width: 100%;
margin: 0 auto;
animation: tdb-fadeInUp 1.2s ease-out both;
}
/* \u2014 Monogram Logo \u2014 */
.tdb-hero__logo {
width: 96px !important;
height: 96px !important;
position: relative;
margin-bottom: 2rem !important;
}
.tdb-hero__logo-circle {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border-radius: 50% !important;
border: 1px solid rgba(202, 169, 99, 0.3) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
background: rgba(0, 0, 0, 0.15) !important;
}
.tdb-hero__logo-text {
font-family: 'Cormorant Garamond', serif !important;
font-size: 2.8rem !important;
font-weight: 700 !important;
letter-spacing: -0.05em !important;
background: linear-gradient(135deg, #b38b38 0%, #ffdf9e 50%, #b38b38 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
color: transparent !important;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5));
line-height: 1 !important;
}
/* \u2014 Hero Title \u2014 */
.tdb-hero__title {
font-family: 'Cormorant Garamond', serif !important;
font-size: 3.5rem !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: 0.3em !important;
line-height: 1.1 !important;
text-shadow: 0 0 30px rgba(202, 169, 99, 0.3);
margin-bottom: 1.5rem !important;
font-weight: 400 !important;
}
@media (min-width: 768px) {
.tdb-hero__title {
font-size: 5rem !important;
letter-spacing: 0.35em !important;
}
}
@media (min-width: 1024px) {
.tdb-hero__title {
font-size: 6.5rem !important;
letter-spacing: 0.4em !important;
}
}
/* \u2014 Hero Subtitle \u2014 */
.tdb-hero__subtitle {
font-family: 'Manrope', sans-serif !important;
color: rgba(255, 255, 255, 0.8) !important;
font-size: 0.95rem !important;
letter-spacing: 0.15em !important;
font-weight: 300 !important;
max-width: 38rem;
margin: 0 auto 2rem auto !important;
line-height: 1.7 !important;
}
@media (min-width: 768px) {
.tdb-hero__subtitle {
font-size: 1.125rem !important;
}
}
/* \u2014 Hero Buttons Container \u2014 */
.tdb-hero__actions {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
margin-top: 1.5rem !important;
align-items: center !important;
}
@media (min-width: 768px) {
.tdb-hero__actions {
flex-direction: row !important;
gap: 1.5rem !important;
}
}
/* \u2014 Primary Button (Gold) \u2014 */
.tdb-wrapper .tdb-btn-primary,
.tdb-wrapper .tdb-btn-primary:link,
.tdb-wrapper .tdb-btn-primary:visited {
display: inline-block !important;
padding: 16px 40px !important;
background-color: #caa963 !important;
color: #0A0A0F !important;
font-family: 'Manrope', sans-serif !important;
font-weight: 600 !important;
font-size: 0.8rem !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
text-decoration: none !important;
border: none !important;
cursor: pointer !important;
transition: background-color 0.4s ease, transform 0.3s ease !important;
line-height: 1.2 !important;
}
.tdb-wrapper .tdb-btn-primary:hover {
background-color: #ffffff !important;
color: #0A0A0F !important;
transform: translateY(-2px) !important;
}
/* \u2014 Outline Button \u2014 */
.tdb-wrapper .tdb-btn-outline,
.tdb-wrapper .tdb-btn-outline:link,
.tdb-wrapper .tdb-btn-outline:visited {
display: inline-block !important;
padding: 16px 40px !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
color: #ffffff !important;
font-family: 'Manrope', sans-serif !important;
font-weight: 500 !important;
font-size: 0.8rem !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
text-decoration: none !important;
background: transparent !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
cursor: pointer !important;
transition: all 0.3s ease !important;
line-height: 1.2 !important;
}
.tdb-wrapper .tdb-btn-outline:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: #ffffff !important;
color: #ffffff !important;
}
/* \u2014 Scroll Indicator \u2014 */
.tdb-hero__scroll {
position: absolute !important;
bottom: 3rem !important;
left: 50% !important;
transform: translateX(-50%);
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.35rem !important;
opacity: 0.6;
color: #caa963 !important;
animation: tdb-bounce 2s infinite;
z-index: 10;
}
.tdb-hero__scroll-label {
font-size: 0.6rem !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
font-family: 'Manrope', sans-serif !important;
color: #caa963 !important;
}
.tdb-hero__scroll .tdb-icon {
color: #caa963 !important; width: 18px !important; height: 18px !important;
}
/* ============================================================
3. BRANCH SLIDER SECTION
============================================================ */
.tdb-branches {
position: relative !important;
background-color: #0A0A0F !important;
padding: 6rem 0 !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
/* Ambient Glow */
.tdb-branches__glow {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
pointer-events: none;
opacity: 0.1;
overflow: hidden;
}
.tdb-branches__glow-gold {
position: absolute;
top: -20%;
right: -10%;
width: 600px;
height: 600px;
border-radius: 50%;
background: #caa963;
filter: blur(150px);
}
.tdb-branches__glow-blue {
position: absolute;
bottom: -10%;
left: -10%;
width: 500px;
height: 500px;
border-radius: 50%;
background: #1e3a5f;
filter: blur(150px);
}
/* Inner Container */
.tdb-branches__inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
position: relative;
z-index: 10;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
}
@media (min-width: 768px) {
.tdb-branches__inner {
padding: 0 3rem;
}
}
/* Section Header */
.tdb-branches__header {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 1rem;
margin-bottom: 4rem !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
padding-bottom: 2rem !important;
width: 100% !important;
}
@media (min-width: 768px) {
.tdb-branches__header {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
}
.tdb-branches__title-wrap {
text-align: center !important;
width: 100% !important;
}
.tdb-branches__label {
color: #caa963 !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
margin-bottom: 1rem !important;
font-family: 'Manrope', sans-serif !important;
text-align: center !important;
}
.tdb-branches__title {
font-family: 'Cormorant Garamond', serif !important;
font-size: 2.5rem !important;
color: #ffffff !important;
font-weight: 400 !important;
line-height: 1.2 !important;
text-align: center !important;
}
@media (min-width: 768px) {
.tdb-branches__title {
font-size: 3.25rem !important;
}
}
/* Slider Nav Arrows */
.tdb-branches__nav {
display: none !important;
gap: 1rem;
margin-bottom: 0.5rem;
justify-content: center !important;
}
@media (min-width: 768px) {
.tdb-branches__nav {
display: flex !important;
justify-content: center !important;
}
}
.tdb-wrapper .tdb-branches__arrow {
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #ffffff !important;
background: transparent !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
padding: 0 !important;
}
.tdb-wrapper .tdb-branches__arrow:hover {
background: #caa963 !important;
color: #0A0A0F !important;
border-color: #caa963 !important;
}
.tdb-branches__arrow .tdb-icon {
width: 20px !important; height: 20px !important;
}
.tdb-branches__arrow:hover .tdb-icon svg { stroke: #0A0A0F !important; }
/* Slider Track */
.tdb-branches__slider {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: scroll !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x mandatory;
gap: 2rem !important;
padding: 0 5% 3rem 5% !important;
-ms-overflow-style: none;
scrollbar-width: none;
cursor: grab;
position: relative !important;
width: 100% !important;
touch-action: pan-x !important;
user-select: none !important;
-webkit-user-select: none !important;
}
.tdb-branches__slider::-webkit-scrollbar { display: none; }
.tdb-branches__slider:active { cursor: grabbing !important; }
.tdb-branches__slider.tdb-dragging {
cursor: grabbing !important;
scroll-snap-type: none !important;
}
.tdb-branches__slider.tdb-dragging .tdb-branch-card {
pointer-events: none !important;
}
/* ============================================================
BRANCH CARD
============================================================ */
.tdb-wrapper .tdb-branch-card,
.tdb-wrapper .tdb-branch-card:link,
.tdb-wrapper .tdb-branch-card:visited {
position: relative !important;
min-width: 85vw !important;
height: 550px !important;
border-radius: 12px !important;
overflow: hidden !important;
flex-shrink: 0 !important;
cursor: pointer !important;
scroll-snap-align: center;
display: block !important;
text-decoration: none !important;
color: #ffffff !important;
background: #111 !important;
}
@media (min-width: 768px) {
.tdb-wrapper .tdb-branch-card,
.tdb-wrapper .tdb-branch-card:link,
.tdb-wrapper .tdb-branch-card:visited {
min-width: 520px !important;
height: 580px !important;
}
}
@media (min-width: 1024px) {
.tdb-wrapper .tdb-branch-card,
.tdb-wrapper .tdb-branch-card:link,
.tdb-wrapper .tdb-branch-card:visited {
min-width: 680px !important;
height: 600px !important;
}
}
.tdb-branch-card__img {
position: absolute !important;
top: 0; right: 0; bottom: 0; left: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 1.5s ease !important;
filter: brightness(0.75);
}
.tdb-wrapper .tdb-branch-card:hover .tdb-branch-card__img {
transform: scale(1.05) !important;
filter: brightness(0.9);
}
.tdb-branch-card__gradient {
position: absolute !important;
top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(to top, #0A0A0F 0%, rgba(10,10,15,0.4) 40%, transparent 70%) !important;
z-index: 2;
}
/* Card Content */
.tdb-branch-card__content {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
padding: 2.5rem !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
z-index: 5 !important;
}
.tdb-branch-card__content > div {
text-align: center !important;
}
.tdb-branch-card__arrow {
display: none !important;
width: 48px !important; height: 48px !important; border-radius: 50% !important;
background: rgba(255,255,255,0.1) !important;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
align-items: center !important; justify-content: center !important;
color: #ffffff !important; transition: all 0.3s ease;
margin: 1rem auto 0 auto !important;
flex-shrink: 0 !important;
}
@media (min-width: 768px) {
.tdb-branch-card__content {
padding: 3.5rem !important;
}
}
.tdb-branch-card__region {
color: #caa963 !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
margin-bottom: 0.75rem !important;
display: block !important;
font-family: 'Manrope', sans-serif !important;
}
.tdb-branch-card__name {
font-family: 'Cormorant Garamond', serif !important;
font-size: 2.5rem !important;
color: #ffffff !important;
margin-bottom: 0.5rem !important;
transition: transform 0.5s ease !important;
font-weight: 400 !important;
line-height: 1.15 !important;
}
@media (min-width: 768px) {
.tdb-branch-card__name {
font-size: 3.5rem !important;
}
}
.tdb-wrapper .tdb-branch-card:hover .tdb-branch-card__name {
transform: scale(1.02) !important;
}
.tdb-branch-card__tagline {
color: rgba(255, 255, 255, 0.7) !important;
font-weight: 300 !important;
letter-spacing: 0.03em !important;
max-width: 24rem;
margin-top: 1rem !important;
font-size: 0.95rem !important;
font-family: 'Manrope', sans-serif !important;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s !important;
line-height: 1.6 !important;
text-align: center !important;
}
.tdb-wrapper .tdb-branch-card:hover .tdb-branch-card__tagline {
opacity: 1 !important;
transform: translateY(0) !important;
}
.tdb-branch-card__url {
font-size: 0.7rem !important;
color: rgba(255, 255, 255, 0.4) !important;
letter-spacing: 0.1em !important;
margin-top: 0.75rem !important;
display: block !important;
font-family: 'Manrope', sans-serif !important;
transition: color 0.3s ease !important;
}
.tdb-wrapper .tdb-branch-card:hover .tdb-branch-card__url {
color: #caa963 !important;
}
/* Arrow Circle on Card */
@media (min-width: 768px) {
.tdb-branch-card__arrow {
display: flex !important;
}
}
.tdb-wrapper .tdb-branch-card:hover .tdb-branch-card__arrow {
background: #caa963 !important;
color: #0A0A0F !important;
}
.tdb-branch-card__arrow .tdb-icon {
width: 24px !important; height: 24px !important;
transform: rotate(-45deg);
}
/* Progress Bar */
.tdb-branches__progress {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.1);
position: relative;
margin-top: 1rem;
}
.tdb-branches__progress-bar {
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 16.66%;
background: #caa963 !important;
border-radius: 999px;
box-shadow: 0 0 10px rgba(202, 169, 99, 0.5);
transition: width 0.5s ease;
}
.tdb-branches__counter {
display: flex !important;
justify-content: space-between !important;
width: 100% !important;
margin-top: 1rem !important;
font-size: 0.7rem !important;
font-family: 'Courier New', monospace !important;
color: rgba(255, 255, 255, 0.4) !important;
letter-spacing: 0.15em !important;
}
/* ============================================================
HISTORY / TIMELINE — Center-aligned
============================================================ */
.tdb-history {
padding: 6rem 1.5rem !important; background: #0A0A0F !important;
border-top: 1px solid rgba(202,169,99,0.08) !important;
display: flex !important; flex-direction: column !important;
align-items: center !important; justify-content: center !important;
}
.tdb-history__inner {
max-width: 800px !important; margin: 0 auto !important; width: 100% !important;
display: flex !important; flex-direction: column !important;
align-items: center !important;
}
.tdb-history__header {
text-align: center !important; margin-bottom: 3.5rem !important;
display: flex !important; flex-direction: column !important;
align-items: center !important; width: 100% !important;
}
.tdb-history__kicker {
font-size: 0.6rem !important; font-weight: 700 !important;
letter-spacing: 0.35em !important; text-transform: uppercase !important;
color: #caa963 !important; display: block !important; margin-bottom: 0.75rem !important;
text-align: center !important;
}
.tdb-history__heading {
font-family: 'Cormorant Garamond', serif !important;
font-size: 2.5rem !important; font-weight: 400 !important;
color: #ffffff !important; line-height: 1.1 !important; margin: 0 0 1rem 0 !important;
text-align: center !important;
}
@media (min-width: 768px) { .tdb-history__heading { font-size: 3rem !important; } }
.tdb-history__rule {
width: 50px !important; height: 1px !important;
background: #caa963 !important; margin: 0 auto !important;
}
/* Timeline track — centered vertical line */
.tdb-history__timeline {
position: relative !important;
display: flex !important; flex-direction: column !important;
align-items: center !important;
width: 100% !important;
}
.tdb-history__timeline::before {
content: '' !important;
position: absolute !important; left: 50% !important; top: 0; bottom: 0;
width: 1px !important; background: rgba(202,169,99,0.15) !important;
transform: translateX(-50%) !important;
}
/* Item */
.tdb-history__item {
position: relative !important; margin-bottom: 2.5rem !important;
width: 100% !important; max-width: 700px !important;
display: flex !important; flex-direction: column !important;
align-items: center !important; justify-content: center !important;
}
.tdb-history__item:last-child { margin-bottom: 0 !important; }
/* Year label — centered above dot */
.tdb-history__year {
font-family: 'Cormorant Garamond', serif !important;
font-size: 1.3rem !important; font-weight: 600 !important;
color: #caa963 !important; line-height: 1 !important;
margin-bottom: 0.5rem !important; display: block !important;
text-align: center !important; position: relative !important; z-index: 2;
width: 100% !important;
}
/* Dot on track — centered */
.tdb-history__dot {
width: 10px !important; height: 10px !important; border-radius: 50% !important;
background: #caa963 !important;
box-shadow: 0 0 0 4px rgba(202,169,99,0.12) !important;
margin: 0 auto 1rem auto !important; position: relative !important; z-index: 2;
flex-shrink: 0 !important; display: block !important;
}
/* "Soon" pulse */
.tdb-history__item--soon .tdb-history__dot {
animation: tdb-history-pulse 2s ease-in-out infinite !important;
}
@keyframes tdb-history-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(202,169,99,0.12); }
50% { box-shadow: 0 0 0 10px rgba(202,169,99,0.06); }
}
/* Card — centered below dot */
.tdb-history__card {
padding: 1.75rem 2rem !important;
background: rgba(255,255,255,0.02) !important;
border: 1px solid rgba(255,255,255,0.05) !important;
border-radius: 6px !important;
transition: border-color 0.3s ease !important;
width: 100% !important; max-width: 520px !important;
margin: 0 auto !important;
}
.tdb-history__card:hover {
border-color: rgba(202,169,99,0.15) !important;
}
.tdb-history__card h3 {
font-family: 'Montserrat', sans-serif !important;
font-size: 0.85rem !important; font-weight: 700 !important;
color: #ffffff !important; margin: 0 0 0.5rem 0 !important;
text-align: center !important;
}
.tdb-history__card p {
font-size: 0.82rem !important; color: rgba(255,255,255,0.85) !important;
font-weight: 300 !important; line-height: 1.8 !important;
margin: 0 !important; text-align: center !important;
}
.tdb-history__card strong {
color: #ffffff !important; font-weight: 600 !important;
}
/* Elementor nuclear center for history */
.elementor-widget-container .tdb-wrapper .tdb-history,
.elementor-element .tdb-wrapper .tdb-history,
.elementor-widget-container .tdb-wrapper .tdb-history__inner,
.elementor-element .tdb-wrapper .tdb-history__inner,
.elementor-widget-container .tdb-wrapper .tdb-history__header,
.elementor-element .tdb-wrapper .tdb-history__header,
.elementor-widget-container .tdb-wrapper .tdb-history__timeline,
.elementor-element .tdb-wrapper .tdb-history__timeline,
.elementor-widget-container .tdb-wrapper .tdb-history__item,
.elementor-element .tdb-wrapper .tdb-history__item {
display: flex !important; flex-direction: column !important;
align-items: center !important; text-align: center !important;
}
.elementor-widget-container .tdb-wrapper .tdb-history__card h3,
.elementor-element .tdb-wrapper .tdb-history__card h3,
.elementor-widget-container .tdb-wrapper .tdb-history__card p,
.elementor-element .tdb-wrapper .tdb-history__card p,
.elementor-widget-container .tdb-wrapper .tdb-history__year,
.elementor-element .tdb-wrapper .tdb-history__year,
.elementor-widget-container .tdb-wrapper .tdb-history__kicker,
.elementor-element .tdb-wrapper .tdb-history__kicker,
.elementor-widget-container .tdb-wrapper .tdb-history__heading,
.elementor-element .tdb-wrapper .tdb-history__heading {
text-align: center !important;
}
.elementor-widget-container .tdb-wrapper .tdb-history__dot,
.elementor-element .tdb-wrapper .tdb-history__dot {
margin-left: auto !important; margin-right: auto !important;
}
/* ============================================================
4. DUAL PATH SECTION (B2C / B2B)
============================================================ */
.tdb-dual {
position: relative !important;
background-color: #0A0A0F !important;
padding: 6rem 0 8rem 0 !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
}
.tdb-dual__inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
position: relative;
z-index: 10;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
}
@media (min-width: 768px) {
.tdb-dual__inner {
padding: 0 3rem;
}
}
/* Dual Header */
.tdb-dual__header {
text-align: center !important;
margin-bottom: 4rem !important;
width: 100% !important;
}
.tdb-dual__heading {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 2rem !important;
color: #ffffff !important;
margin-bottom: 1rem !important;
line-height: 1.2 !important;
}
@media (min-width: 768px) {
.tdb-dual__heading {
font-size: 3rem !important;
}
}
.tdb-dual__divider {
height: 4px !important;
width: 6rem !important;
background: #ff6d38 !important;
margin: 0 auto !important;
border-radius: 999px !important;
border: none !important;
}
.tdb-dual__desc {
margin-top: 1.5rem !important;
color: rgba(255, 255, 255, 0.5) !important;
max-width: 36rem;
margin-left: auto !important;
margin-right: auto !important;
font-size: 1.05rem !important;
font-weight: 300 !important;
font-family: 'Manrope', sans-serif !important;
line-height: 1.7 !important;
}
/* Dual Grid */
.tdb-dual__grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 2rem !important;
align-items: stretch;
grid-auto-rows: 1fr !important;
width: 100% !important;
}
@media (min-width: 1024px) {
.tdb-dual__grid {
grid-template-columns: 1fr 1fr !important;
gap: 3rem !important;
}
}
/* Path Card */
.tdb-path-card {
position: relative !important;
overflow: hidden !important;
border-radius: 16px !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65) !important;
transition: transform 0.5s ease, box-shadow 0.5s ease !important;
min-height: 580px !important;
height: 100% !important;
}
@media (min-width: 1024px) {
.tdb-path-card {
min-height: 650px !important;
}
}
.tdb-path-card:hover {
transform: scale(1.01) !important;
}
.tdb-path-card__bg {
position: absolute !important;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 0;
}
.tdb-path-card__bg img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.7s ease !important;
}
.tdb-path-card:hover .tdb-path-card__bg img {
transform: scale(1.1) !important;
}
/* Overlays */
.tdb-path-card__overlay {
position: absolute !important;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 5;
}
.tdb-path-card--b2c .tdb-path-card__overlay {
background: linear-gradient(to top, rgba(10, 77, 104, 0.95) 0%, rgba(10, 77, 104, 0.6) 50%, transparent 100%) !important;
}
.tdb-path-card--b2b .tdb-path-card__overlay {
background: linear-gradient(to top, rgba(26, 58, 82, 0.95) 0%, rgba(26, 58, 82, 0.7) 50%, transparent 100%) !important;
}
.tdb-path-card__overlay-dim {
position: absolute !important;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 6;
background: rgba(0, 0, 0, 0.2);
transition: background 0.5s ease;
}
.tdb-path-card:hover .tdb-path-card__overlay-dim {
background: rgba(0, 0, 0, 0.1);
}
/* Card Body */
.tdb-path-card__body {
position: relative !important;
z-index: 10 !important;
height: 100% !important;
min-height: inherit !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
align-items: center !important;
text-align: center !important;
padding: 2rem !important;
}
@media (min-width: 768px) {
.tdb-path-card__body {
padding: 3rem !important;
}
}
.tdb-path-card__badge {
display: inline-block !important;
padding: 4px 12px !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.2) !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
font-size: 0.7rem !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
margin-bottom: auto !important;
align-self: center !important;
margin-top: 2rem !important;
font-family: 'Manrope', sans-serif !important;
}
.tdb-path-card__heading {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 2rem !important;
color: #ffffff !important;
margin-bottom: 1rem !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
line-height: 1.15 !important;
text-align: center !important;
}
@media (min-width: 768px) {
.tdb-path-card__heading {
font-size: 3rem !important;
}
}
.tdb-path-card__text {
font-size: 1.05rem !important;
color: rgba(255, 255, 255, 0.85) !important;
max-width: 28rem;
font-weight: 300 !important;
margin-bottom: 2rem !important;
line-height: 1.7 !important;
font-family: 'Manrope', sans-serif !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Feature List */
.tdb-wrapper .tdb-feature-list {
list-style: none !important;
margin: 0 0 2.5rem 0 !important;
padding: 0 !important;
display: inline-flex !important;
flex-direction: column !important;
gap: 1rem !important;
align-items: flex-start !important;
text-align: left !important;
}
.tdb-wrapper .tdb-feature-list li {
display: flex !important;
align-items: center !important;
color: rgba(255, 255, 255, 0.9) !important;
font-size: 1rem !important;
font-family: 'Manrope', sans-serif !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.tdb-wrapper .tdb-feature-list li::before,
.tdb-wrapper .tdb-feature-list li::marker {
display: none !important;
content: none !important;
}
.tdb-wrapper .tdb-feature-list li .tdb-icon {
margin-right: 0.75rem !important;
width: 22px !important; height: 22px !important;
flex-shrink: 0;
}
.tdb-path-card--b2c .tdb-feature-list li .tdb-icon svg {
stroke: #ff6d38 !important;
}
.tdb-path-card--b2b .tdb-feature-list li .tdb-icon svg {
stroke: #D4A574 !important;
}
/* Action Buttons */
.tdb-path-card__actions {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
align-items: center !important;
width: 100% !important;
}
@media (min-width: 640px) {
.tdb-path-card__actions {
flex-direction: row !important;
justify-content: center !important;
}
}
.tdb-wrapper .tdb-btn-orange,
.tdb-wrapper .tdb-btn-orange:link,
.tdb-wrapper .tdb-btn-orange:visited {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
padding: 16px 32px !important;
background-color: #ff6d38 !important;
color: #ffffff !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
text-decoration: none !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: background-color 0.3s ease, transform 0.3s ease !important;
box-shadow: 0 4px 14px rgba(255, 109, 56, 0.3) !important;
line-height: 1.2 !important;
}
.tdb-wrapper .tdb-btn-orange:hover {
background-color: #ff8559 !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(255, 109, 56, 0.4) !important;
color: #ffffff !important;
}
.tdb-wrapper .tdb-btn-b2b-gold,
.tdb-wrapper .tdb-btn-b2b-gold:link,
.tdb-wrapper .tdb-btn-b2b-gold:visited {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 16px 24px !important;
background-color: #D4A574 !important;
color: #1a1a1a !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
text-decoration: none !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: background-color 0.3s ease, transform 0.3s ease !important;
box-shadow: 0 4px 14px rgba(212, 165, 116, 0.3) !important;
flex: 1 !important;
text-align: center !important;
line-height: 1.2 !important;
}
.tdb-wrapper .tdb-btn-b2b-gold:hover {
background-color: #e0b588 !important;
transform: translateY(-2px) !important;
color: #1a1a1a !important;
}
.tdb-wrapper .tdb-btn-ghost,
.tdb-wrapper .tdb-btn-ghost:link,
.tdb-wrapper .tdb-btn-ghost:visited {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
padding: 16px 24px !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
color: #ffffff !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
font-size: 0.85rem !important;
background: transparent !important;
border-radius: 8px !important;
cursor: pointer !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
flex: 1 !important;
text-align: center !important;
line-height: 1.2 !important;
}
.tdb-wrapper .tdb-btn-ghost:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: #ffffff !important;
color: #ffffff !important;
}
/* ============================================================
5. ANIMATIONS
============================================================ */
@keyframes tdb-fadeInUp {
from {
opacity: 0;
transform: translateY(2.5rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes tdb-bounce {
0%, 100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(8px);
}
}
/* Scroll Reveal */
.tdb-reveal {
opacity: 0;
transform: translateY(2rem);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.tdb-reveal.tdb-visible {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* ============================================================
WAVE TRANSITION — Content to Footer
============================================================ */
.tdb-gx-wave {
position: relative !important;
width: 100% !important;
height: 120px !important;
background: #0A0A0F !important;
margin: 0 !important; padding: 0 !important;
overflow: hidden !important;
display: block !important;
line-height: 0 !important;
border: none !important; outline: none !important;
}
@media (min-width: 768px) { .tdb-gx-wave { height: 160px !important; } }
@media (min-width: 1200px) { .tdb-gx-wave { height: 200px !important; } }
.tdb-gx-wave__svg {
position: absolute !important;
bottom: 0 !important; left: 0 !important;
width: 100% !important; height: 100% !important;
display: block !important;
}
.tdb-gx-wave__glow {
position: absolute !important;
top: 30% !important; left: 50% !important;
transform: translateX(-50%) !important;
width: 60% !important; height: 2px !important;
background: linear-gradient(90deg, transparent 0%, rgba(202,169,99,0.2) 30%, rgba(202,169,99,0.4) 50%, rgba(202,169,99,0.2) 70%, transparent 100%) !important;
filter: blur(8px) !important;
pointer-events: none !important;
}
/* BeTheme overrides for wave */
.sections_group .tdb-gx-wave,
.mcb-section .tdb-gx-wave,
.mcb-wrap .tdb-gx-wave,
.mcb-column .tdb-gx-wave,
.mcb-column-inner .tdb-gx-wave,
#Footer .tdb-gx-wave,
.mfn-footer-template .tdb-gx-wave,
.elementor-widget-container .tdb-gx-wave,
.elementor-element .tdb-gx-wave {
margin: 0 !important; padding: 0 !important;
border: none !important;
background: #0A0A0F !important;
}
/* ============================================================
GLOBAL FIXES — Mobile gap + Content/Footer seam
============================================================ */
/* Kill horizontal overflow */
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
/* Mobile left/right gap nuke */
@media (max-width: 767px) {
#Content,
#Content .content_wrapper,
#Content .sections_group,
#Content .section_wrapper,
.mcb-section,
.mcb-section-inner,
.mcb-wrap,
.mcb-column,
.mcb-column-inner,
.elementor-section,
.elementor-section-wrap,
.elementor-section-boxed > .elementor-container,
.elementor-column-wrap,
.elementor-widget-wrap,
.elementor-container {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
}
.elementor-column-gap-default > .elementor-column > .elementor-element-populated,
.elementor-column-gap-default > .elementor-column > .elementor-element-populated > .elementor-widget-wrap {
padding-left: 0 !important;
padding-right: 0 !important;
}
.section_wrapper {
max-width: 100% !important;
width: 100% !important;
}
}
/* Remove white line / gap between Elementor content and BeTheme footer */
.elementor:last-child,
.elementor > .elementor-section:last-child,
.elementor > .elementor-section-wrap > .elementor-section:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
#Content,
#Content .content_wrapper,
#Content .sections_group {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
background: #0A0A0F !important;
border-bottom: none !important;
}
#Footer,
.mfn-footer-template,
footer.mcb-footer,
.mcb-section.mcb-footer,
#Footer .footer_wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: none !important;
background: #0A0A0F !important;
}
.section_wrapper + .section_wrapper,
.mcb-section + .mcb-section,
#Content + #Footer,
.content_wrapper + footer {
border-top: none !important;
outline: none !important;
}
/* NUCLEAR: Kill every possible white line between content & footer */
#Content,
#Content *,
#Footer,
#Footer *,
.mfn-footer-template,
.mfn-footer-template * {
border-color: transparent !important;
outline-color: transparent !important;
}
/* Restore only our intentional borders */
.tdb-ft__bottom {
border-top: 1px solid rgba(255,255,255,0.1) !important;
}
.tdb-history__card {
border: 1px solid rgba(255,255,255,0.05) !important;
}
.tdb-history__card:hover {
border-color: rgba(202,169,99,0.15) !important;
}
/* BeTheme's hr, separator, and divider elements */
#Content hr,
#Footer hr,
.content_wrapper hr,
.mfn-footer-template hr,
.mcb-section hr,
.hr_color,
.hr_default,
.hr_dots,
.hr_zigzag {
display: none !important;
height: 0 !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* BeTheme section bottom border / box-shadow line */
.mcb-section,
.mcb-section-inner,
.mcb-wrap,
.mcb-column,
.mcb-column-inner,
.sections_group,
.sections_group > .mcb-section:last-child,
#Footer > .mcb-section:first-child,
.mfn-footer-template > .mcb-section:first-child {
border-top: none !important;
border-bottom: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Gap between last content section and footer */
#Content .sections_group::after,
#Content .content_wrapper::after,
.sections_group > .mcb-section:last-child::after {
display: none !important;
content: none !important;
}
/* ============================================================
OVERLAP FIX: Cover 1px sub-pixel rendering gap
============================================================ */
/* Pull footer up by 2px to overlap content edge */
#Footer,
.mfn-footer-template {
margin-top: -2px !important;
position: relative !important;
z-index: 1 !important;
}
/* Cover the seam with a pseudo-element */
#Footer::before,
.mfn-footer-template::before {
content: '' !important;
display: block !important;
position: absolute !important;
top: -5px !important;
left: 0 !important;
right: 0 !important;
height: 10px !important;
background: #0A0A0F !important;
z-index: 2 !important;
pointer-events: none !important;
}
/* Also push from content side — overlap downward */
#Content .sections_group::after {
content: '' !important;
display: block !important;
position: relative !important;
width: 100% !important;
height: 5px !important;
background: #0A0A0F !important;
margin-bottom: -5px !important;
z-index: 1 !important;
}/* End custom CSS */