/* Reset and Core Variables */
:root {
/* Color Palette */
--primary: #0A0F1D; /* Midnight Iron */
--primary-light: #0F172A; /* Midnight Slate Blue */
--secondary: #C8860A; /* Molten Gold */
--secondary-hover: #A46D08; /* Dark Bronze */
--accent: #D4401A; /* Forge Orange */
--bg-dark: #060A13; /* Extreme Midnight Slate */
--bg-dark-card: #0A1224; /* Dark Brushed Slate Steel Card */
--text-light: #F8FAFC; /* Crisp Off-White */
--text-muted: #94A3B8; /* Cool Muted Gray */
--text-on-dark: #FFFFFF; /* Text for dark panels (buttons, footer, dark overlays) */
--text-on-dark-muted: #CBD5E1; /* Muted text for dark panels */
--border-color: rgba(255, 255, 255, 0.08); /* Subtle steel border */
/* Header & Section Variable Overrides */
--header-bg: rgba(10, 15, 29, 0.98);
--header-scrolled-bg: rgba(6, 10, 19, 0.98);
--hero-overlay-bg: linear-gradient(135deg, rgba(10, 15, 29, 0.95) 30%, rgba(30, 41, 59, 0.6) 100%);
--features-overlap-bg: rgba(10, 15, 29, 0.85);
/* Typography */
--font-heading: 'Barlow Condensed', sans-serif;
--font-body: 'DM Sans', sans-serif;
/* Transitions */
--transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
--transition-fast: all 0.25s ease;
/* Shadows & Glows */
--shadow-premium: 0 15px 35px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.3);
--gold-glow: 0 0 25px rgba(200, 134, 10, 0.25); /* Molten gold shadow glow */
--orange-glow: 0 0 25px rgba(212, 64, 26, 0.25); /* Forge orange glow */
}
/* Light Theme Variables */
.light-theme {
--primary: #F1F5F9; /* Slate Silver Light Background */
--primary-light: #E2E8F0; /* Slate Silver Borders & Accents */
--bg-dark: #F8FAFC; /* Crisp Soft White Background */
--bg-dark-card: #FFFFFF; /* Solid White Card Backdrops */
--text-light: #0F172A; /* Deep Midnight Blue */
--text-muted: #475569; /* Slate Muted Blue-Gray */
--border-color: rgba(15, 23, 42, 0.08);
--header-bg: rgba(248, 250, 252, 0.98);
--header-scrolled-bg: rgba(248, 250, 252, 0.98);
--hero-overlay-bg: linear-gradient(135deg, rgba(241, 245, 249, 0.95) 30%, rgba(203, 213, 225, 0.6) 100%);
--features-overlap-bg: rgba(255, 255, 255, 0.85);
--shadow-premium: 0 15px 30px rgba(15, 23, 42, 0.06), 0 5px 15px rgba(15, 23, 42, 0.04);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
background-color: var(--bg-dark);
color: var(--text-light);
font-family: var(--font-body);
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
body {
overflow-x: hidden;
line-height: 1.6;
}
/* Industrial Preloader */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: var(--bg-dark);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 1;
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.preloader.fade-out {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Prevent body scrolling while preloader is active */
body:has(#preloader:not(.fade-out)) {
overflow: hidden;
}
.loader-ring {
width: 120px;
height: 120px;
border: 3px solid transparent;
border-top: 3px solid var(--secondary);
border-bottom: 3px solid var(--secondary);
border-radius: 50%;
animation: rotateLoader 1.5s cubic-bezier(0.53, 0.21, 0.29, 0.67) infinite;
}
.loader-logo {
position: absolute;
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 900;
color: var(--text-light);
letter-spacing: 2px;
animation: pulseLogo 1.5s ease-in-out infinite alternate;
}
@keyframes rotateLoader {
0% { transform: rotate(0deg); border-top-color: var(--secondary); border-bottom-color: var(--secondary); }
50% { transform: rotate(180deg); border-top-color: var(--accent); border-bottom-color: var(--accent); }
100% { transform: rotate(360deg); border-top-color: var(--secondary); border-bottom-color: var(--secondary); }
}
@keyframes pulseLogo {
0% { transform: scale(0.9); opacity: 0.6; }
100% { transform: scale(1.05); opacity: 1; }
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
background: var(--primary-light);
border: 2px solid var(--bg-dark);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--secondary);
}
/* Typography Base styling */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
color: var(--text-light);
}
a {
color: inherit;
text-decoration: none;
transition: var(--transition-fast);
}
p {
font-weight: 300;
color: var(--text-muted);
}
/* Button & CTA System */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 0;
transition: var(--transition-smooth);
cursor: pointer;
border: none;
position: relative;
overflow: hidden;
z-index: 1;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -150%;
width: 150%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
z-index: 2;
pointer-events: none;
transform: skewX(-20deg);
}
.btn:hover::before {
left: 150%;
transition: all 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primary {
background: var(--secondary);
color: var(--text-on-dark);
box-shadow: 0 4px 15px rgba(90, 110, 127, 0.2);
}
.btn-primary:hover {
background: var(--secondary-hover);
transform: translateY(-3px);
box-shadow: var(--gold-glow);
}
.btn-secondary {
background: transparent;
color: var(--text-light);
border: 2px solid var(--text-light);
}
.btn-secondary:hover {
background: var(--text-light);
color: var(--bg-dark);
transform: translateY(-3px);
}
.btn-accent {
background: var(--accent);
color: var(--text-on-dark);
box-shadow: 0 4px 15px rgba(212, 64, 26, 0.2);
}
.btn-accent:hover {
background: #e6512b;
transform: translateY(-3px);
box-shadow: var(--orange-glow);
}
/* Layout Utilities */
.section {
padding: 6rem 5% 6rem 5%;
position: relative;
z-index: 2;
}
.section-dark {
background-color: var(--bg-dark);
}
.section-navy {
background-color: var(--primary);
}
.container {
max-width: 1600px;
margin: 0 auto;
width: 100%;
padding: 0 4%;
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-header h2 {
font-size: 3rem;
color: var(--text-light);
margin-bottom: 1rem;
position: relative;
display: inline-block;
}
.section-header h2 span {
color: var(--secondary);
}
.section-header h2::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: var(--secondary);
margin: 0.75rem auto 0 auto;
}
.section-header p {
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
/* ==========================================================================
NAVIGATION BAR
========================================================================== */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
transition: var(--transition-smooth);
padding: 0;
color: var(--text-light);
background: var(--header-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
}
.header.scrolled {
background: var(--header-scrolled-bg) !important;
border-bottom: 2px solid var(--secondary) !important;
box-shadow: var(--shadow-premium) !important;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 100%;
width: 100%;
padding: 1.25rem 4%;
transition: var(--transition-smooth);
}
/* Position desktop nav-menu cleanly to the right, next to buttons, leaving a spacious center gap */
@media (min-width: 769px) {
.nav-container nav {
margin-left: auto;
margin-right: 2.5rem;
}
}
.header.scrolled .nav-container {
padding: 0.8rem 4%;
}
/* Top Info Bar styling */
.top-bar {
background: rgba(6, 10, 19, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding: 0.6rem 4%;
transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
max-height: 50px;
opacity: 1;
overflow: hidden;
}
.header.scrolled .top-bar {
max-height: 0;
padding: 0 4%;
opacity: 0;
border-bottom: none;
}
.top-bar-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 100%;
width: 100%;
}
.top-bar-left, .top-bar-right {
display: flex;
align-items: center;
gap: 1.8rem;
}
.top-bar-item {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--text-on-dark-muted);
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: var(--transition-fast);
}
.top-bar-item svg {
color: var(--secondary);
stroke-width: 2.2px;
}
a.top-bar-item:hover {
color: var(--secondary);
}
/* Floating Action Sidebar */
.floating-sidebar {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: flex-end; /* Crucial fix: prevents stretch so only the hovered card slides out! */
gap: 0.5rem;
z-index: 999;
}
.sidebar-item {
display: flex;
align-items: center;
justify-content: flex-end;
background: var(--bg-dark-card);
border: 1.5px solid var(--border-color);
border-right: none;
color: var(--text-light);
padding: 0.85rem 1rem;
border-radius: 30px 0 0 30px;
transition: var(--transition-smooth);
width: 50px;
overflow: hidden;
white-space: nowrap;
box-shadow: var(--shadow-premium);
position: relative;
}
.sidebar-item svg {
flex-shrink: 0;
transition: var(--transition-smooth);
}
.sidebar-item .action-label {
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-left: 0;
width: 0;
opacity: 0;
transition: var(--transition-smooth);
}
.sidebar-item:hover {
width: 160px;
padding-right: 1.25rem;
background: var(--secondary);
color: var(--text-on-dark);
border-color: var(--secondary);
}
.sidebar-item.call-action:hover {
background: var(--secondary);
border-color: var(--secondary);
}
.sidebar-item.whatsapp-action:hover {
background: #25D366;
border-color: #25D366;
}
.sidebar-item.quote-action:hover {
background: var(--accent);
border-color: var(--accent);
}
.sidebar-item:hover .action-label {
margin-left: 0.75rem;
width: auto;
opacity: 1;
}
.sidebar-item:hover svg {
transform: scale(1.15) rotate(-10deg);
}
/* Pulsing action dot for quote */
.sidebar-item.quote-action::after {
content: '';
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 10px var(--accent);
animation: sidebarPulse 2s infinite;
}
.sidebar-item.quote-action:hover::after {
background: var(--text-light);
box-shadow: 0 0 10px var(--text-light);
}
@keyframes sidebarPulse {
0% { transform: scale(0.9); opacity: 0.6; box-shadow: 0 0 0 0 rgba(212, 64, 26, 0.7); }
70% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 0 6px rgba(212, 64, 26, 0); }
100% { transform: scale(0.9); opacity: 0.6; box-shadow: 0 0 0 0 rgba(212, 64, 26, 0); }
}
@media (max-width: 768px) {
.top-bar {
display: none !important;
}
.floating-sidebar {
bottom: 20px;
top: auto;
right: 15px;
transform: none;
flex-direction: row;
}
.sidebar-item {
border-radius: 50%;
border-right: 1.5px solid var(--border-color);
width: 46px;
height: 46px;
justify-content: center;
padding: 0;
}
.sidebar-item:hover {
width: 46px;
padding-right: 0;
}
.sidebar-item .action-label {
display: none;
}
}
.dms-logo {
display: inline-flex;
align-items: center;
gap: 15px; /* Upgraded from 12px to space the larger brand mark beautifully */
text-decoration: none;
line-height: 1.1;
transition: var(--transition-smooth);
flex-shrink: 0;
margin-right: 2.5rem;
}
.dms-logo .dms-mark {
flex: 0 0 auto;
display: block;
width: 55px; /* Upgraded from 44px to make it highly prominent and prestigious */
height: 55px; /* Upgraded from 44px to match */
transition: var(--transition-smooth);
}
.dms-logo:hover .dms-mark {
transform: scale(1.05) rotate(5deg);
}
.dms-logo .dms-mark path {
stroke: var(--text-light);
transition: var(--transition-smooth);
}
.dms-logo .dms-mark text {
fill: var(--text-light);
font-family: var(--font-heading);
font-weight: 800;
transition: var(--transition-smooth);
}
.dms-logo .dms-mark .dms-arrow {
stroke: var(--text-light);
fill: var(--text-light);
transition: var(--transition-smooth);
}
.dms-logo:hover .dms-mark .dms-arrow {
transform: translateX(2px);
}
.dms-logo .dms-words {
display: flex;
flex-direction: column;
gap: 2px;
}
.dms-logo .dms-name {
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.6rem;
line-height: 0.95;
letter-spacing: 0.02em;
color: var(--text-light);
text-transform: uppercase;
white-space: nowrap;
transition: var(--transition-smooth);
}
.dms-logo .dms-name .accent {
color: var(--secondary);
transition: var(--transition-smooth);
}
.dms-logo .dms-tag {
font-family: var(--font-body);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
transition: var(--transition-smooth);
}
/* Footer-specific logo branding: larger size */
.footer .dms-logo {
gap: 16px;
}
.footer .dms-logo .dms-mark {
width: 58px;
height: 58px;
}
.footer .dms-logo .dms-name {
font-size: 2.1rem;
}
.footer .dms-logo .dms-tag {
font-size: 0.75rem;
letter-spacing: 0.22em;
}
/* Scrolled Header Adjustments */
.header.scrolled .dms-logo .dms-name {
color: var(--text-light);
}
.header.scrolled .dms-logo .dms-tag {
color: var(--text-muted);
}
.nav-menu {
display: flex;
align-items: center;
list-style: none;
gap: 2rem; /* Reduced gap slightly for absolute straight line balance */
}
.nav-item a {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
position: relative;
padding: 0.5rem 0;
color: var(--text-light);
transition: var(--transition-smooth);
white-space: nowrap; /* Prevents "ABOUT US" wrapping under any screen width */
}
.header.scrolled .nav-item a {
color: var(--text-light);
}
.nav-item a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: var(--secondary);
transition: var(--transition-smooth);
}
.nav-item a:hover::after,
.nav-item.active a::after {
width: 100%;
}
.nav-item a:hover {
color: var(--secondary) !important;
}
.nav-phone {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.1rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--secondary);
border: 1px solid var(--secondary);
padding: 0 1.25rem;
height: 42px; /* Matches theme-toggle height to the pixel for a straight line alignment */
transition: var(--transition-smooth);
white-space: nowrap; /* Prevents wrapping of call button contents */
flex-shrink: 0;
}
.nav-phone:hover {
background: var(--secondary);
color: var(--text-on-dark);
box-shadow: var(--gold-glow);
}
/* Mobile Nav Toggle */
.mobile-nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
width: 30px;
height: 24px;
position: relative;
z-index: 1100;
}
.mobile-nav-toggle span {
display: block;
width: 100%;
height: 3px;
background: #FFFFFF;
position: absolute;
left: 0;
transition: var(--transition-smooth);
}
.header.scrolled .mobile-nav-toggle span {
background: #FFFFFF;
}
.mobile-nav-toggle span:nth-child(1) { top: 0; }
.mobile-nav-toggle span:nth-child(2) { top: 10px; }
.mobile-nav-toggle span:nth-child(3) { top: 20px; }
.mobile-nav-toggle.open span:nth-child(1) {
transform: rotate(45deg);
top: 10px;
}
.mobile-nav-toggle.open span:nth-child(2) {
opacity: 0;
}
.mobile-nav-toggle.open span:nth-child(3) {
transform: rotate(-45deg);
top: 10px;
}
/* ==========================================================================
HERO SECTION
========================================================================== */
.hero {
--text-light: #FFFFFF;
--text-muted: #CBD5E1;
--bg-dark: #1E293B;
height: 100vh;
min-height: 650px;
position: relative;
overflow: hidden;
}
.hero-slides {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
z-index: 1;
transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
padding-top: 135px; /* Premium symmetrical clearance for fixed header */
padding-bottom: 195px; /* Premium symmetrical clearance for bottom overlapping cards */
}
.hero-slide.active {
opacity: 1;
visibility: visible;
z-index: 2;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 1;
filter: brightness(0.72) contrast(1.1) saturate(0.9); /* Cinematic industrial color grading - made brighter for clarity */
transition: var(--transition-smooth);
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(6, 10, 19, 0.72) 0%, rgba(10, 15, 29, 0.5) 100%); /* Premium dark luxury backdrop enforcement - slightly lighter for image clarity */
z-index: 2;
}
.hero-content {
position: relative;
z-index: 3;
text-align: center;
max-width: 950px;
padding: 0 2rem; /* Clean layout for perfect centering within visual area */
margin: 0;
}
.hero-badge {
display: inline-block;
padding: 0.5rem 1.2rem;
background: rgba(2, 132, 199, 0.15);
border: 1px solid var(--secondary);
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
color: var(--secondary);
letter-spacing: 2px;
margin-bottom: 2rem;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* Symmetrical smooth fade-out on slide transition */
}
.hero-slide.active .hero-badge {
opacity: 1;
transform: translateY(0);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: 0.2s;
}
.hero h1 {
font-size: 5rem;
line-height: 1.05;
margin-bottom: 1.5rem;
font-weight: 900;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1rem;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8); /* Exceptional contrast protection */
}
/* Text split word-by-word slide-up classes */
.word-wrapper {
overflow: hidden;
display: inline-block;
}
.word-inner {
display: inline-block;
transform: translateY(110%) rotate(4deg) scale(0.9);
transform-origin: bottom left;
will-change: transform;
}
.hero-slide.active .word-inner {
transform: translateY(0) rotate(0) scale(1);
transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.hero-subheadline {
font-size: 1.35rem;
color: #CBD5E1 !important; /* Force high-contrast off-white in all themes */
max-width: 680px;
margin: 0 auto 2.5rem auto;
font-weight: 400;
opacity: 0;
transform: translateY(20px);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); /* Exceptional contrast protection */
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* Smooth fade-out on slide transition */
}
.hero-slide.active .hero-subheadline {
opacity: 1;
transform: translateY(0);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: 0.6s;
}
.hero-actions {
display: flex;
gap: 1.5rem;
justify-content: center;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* Smooth fade-out on slide transition */
}
.hero-actions .btn-secondary {
color: #F8FAFC !important;
border-color: #F8FAFC !important;
}
.hero-actions .btn-secondary:hover {
background: #F8FAFC !important;
color: #060A13 !important;
}
.hero-slide.active .hero-actions {
opacity: 1;
transform: translateY(0);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: 0.8s;
}
/* Slider Controls */
.slider-controls {
position: absolute;
bottom: 4.2rem; /* Lowered from 8.5rem to prevent overlap with hero actions */
left: 5%;
right: 5%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
pointer-events: none;
}
.slider-arrow {
background: rgba(10, 15, 29, 0.6);
border: 1.5px solid var(--border-color);
color: var(--text-light);
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
cursor: pointer;
pointer-events: auto;
transition: var(--transition-smooth);
backdrop-filter: blur(5px);
}
.slider-arrow:hover {
background: var(--secondary);
border-color: var(--secondary);
color: var(--text-on-dark);
transform: scale(1.1);
}
.slider-dots {
display: flex;
gap: 0.75rem;
pointer-events: auto;
}
.slider-dot {
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
cursor: pointer;
transition: var(--transition-smooth);
}
.slider-dot:hover {
background: rgba(255, 255, 255, 0.6);
}
.slider-dot.active {
background: var(--secondary);
width: 25px;
border-radius: 5px;
}
/* Overlapping Features Section styling */
.features-overlap-section {
position: relative;
z-index: 100;
margin-top: -40px; /* Overlap with Hero section bottom */
padding: 0 5%;
}
.features-overlap-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
max-width: 1600px;
margin: 0 auto;
width: 100%;
}
.overlap-card {
background: var(--features-overlap-bg);
border: 1.5px solid var(--border-color);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
padding: 2.2rem 1.8rem;
border-radius: 12px;
transition: var(--transition-smooth);
box-shadow: var(--shadow-premium);
}
.overlap-card:hover {
transform: translateY(-8px);
border-color: var(--secondary);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), var(--gold-glow);
}
.overlap-card-icon {
background: rgba(200, 134, 10, 0.1);
color: var(--secondary);
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
margin-bottom: 1.5rem;
transition: var(--transition-smooth);
}
.overlap-card:hover .overlap-card-icon {
background: var(--secondary);
color: var(--text-on-dark);
transform: rotateY(180deg);
}
.overlap-card h4 {
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: 700;
color: var(--text-light);
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.overlap-card p {
font-family: var(--font-body);
font-size: 0.92rem;
line-height: 1.5;
color: var(--text-muted);
}
@media (max-width: 1024px) {
.features-overlap-grid {
grid-template-columns: repeat(2, 1fr);
}
.features-overlap-section {
margin-top: -60px;
}
}
@media (max-width: 600px) {
.features-overlap-grid {
grid-template-columns: 1fr;
}
.features-overlap-section {
margin-top: -30px;
}
}
.hero-scroll-indicator {
position: absolute;
bottom: 1.5rem; /* Lowered from 5.5rem to prevent overlap with hero actions */
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-family: var(--font-heading);
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.8rem;
color: var(--text-muted);
transition: var(--transition-fast);
}
.hero-scroll-indicator:hover {
color: var(--secondary);
}
.scroll-arrow {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 2.5;
fill: none;
animation: bounceIndicator 2s infinite;
}
@keyframes bounceIndicator {
0% { transform: translateY(-5px); opacity: 0.5; }
50% { transform: translateY(8px); opacity: 1; filter: drop-shadow(0 0 8px rgba(90, 110, 127, 0.4)); }
100% { transform: translateY(-5px); opacity: 0.5; }
}
/* ==========================================================================
BRAND TRUST BAR
========================================================================== */
.brand-bar {
background-color: var(--bg-dark);
border-bottom: 1px solid var(--border-color);
padding: 2.5rem 5%;
position: relative;
z-index: 10;
}
.brand-bar-inner {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1600px;
margin: 0 auto;
flex-wrap: wrap;
gap: 2rem;
width: 100%;
}
.brand-bar-text {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1.5px;
}
.brand-bar-logos {
display: flex;
align-items: center;
gap: 3.5rem;
flex-wrap: wrap;
}
.brand-bar-logo-card {
display: flex;
align-items: center;
justify-content: center;
width: 250px; /* Enhanced larger card width for better desktop scaling */
height: 75px; /* Enhanced larger card height for premium display */
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
padding: 0.6rem 1.35rem;
transition: all var(--transition-fast);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}
.brand-bar-logo-card:hover {
border-color: var(--secondary);
transform: translateY(-3px) scale(1.03); /* Rich 3D responsive lift physics */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* High end premium glow shadow */
}
.brand-bar-logo-card svg,
.brand-bar-logo-card img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
/* ── HTML-based brand logos (replaces SVG text approach) ── */
.brand-logo-html {
display: flex;
align-items: center;
gap: 0.75rem; /* Enhanced gap for clean alignment */
width: 100%;
height: 100%;
}
.brand-logo-svg {
width: 44px !important; /* Enhanced crisp SVG icon dimensions */
height: 44px !important;
flex-shrink: 0 !important;
transition: all var(--transition-fast) !important;
}
.brand-logo-icon {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 900;
font-size: 0.72rem;
letter-spacing: 0.5px;
text-align: center;
line-height: 1.1;
}
.brand-logo-text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.brand-logo-name {
font-family: var(--font-heading);
font-weight: 900;
font-size: 1.12rem; /* Significantly enlarged for maximum legibility */
letter-spacing: 0.5px;
line-height: 1.1;
white-space: nowrap;
}
.brand-logo-sub {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.65rem; /* Significantly enlarged subheadings */
letter-spacing: 0.5px;
text-transform: uppercase;
line-height: 1.1;
white-space: nowrap;
}
/* Brand Bar Marquee */
.brand-bar-marquee-wrapper {
flex: 1;
min-width: 0;
overflow: hidden;
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.brand-bar-marquee-track {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 2.5rem;
animation: brandBarScroll 22s linear infinite;
width: max-content;
}
.brand-bar-marquee-wrapper:hover .brand-bar-marquee-track {
animation-play-state: paused;
}
@keyframes brandBarScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Prevent marquee logo cards from shrinking — they must stay at fixed width */
.brand-bar-marquee-track .brand-bar-logo-card {
flex-shrink: 0;
}
/* SVG logo support inside logo containers */
.brand-bar-logo-card svg,
.marquee-logo-container svg {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: block;
}
/* ==========================================================================
ABOUT SNAPSHOT
========================================================================== */
.about-snapshot {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 5rem;
align-items: center;
}
/* Double Image Collage styling */
.about-image-collage {
position: relative;
width: 100%;
height: 520px;
display: flex;
align-items: center;
}
.collage-bg-glow {
position: absolute;
top: 15%;
left: 10%;
width: 70%;
height: 70%;
background: radial-gradient(circle, rgba(200, 134, 10, 0.15) 0%, transparent 70%);
z-index: 1;
pointer-events: none;
filter: blur(30px);
}
.about-img-box {
position: absolute;
overflow: hidden;
box-shadow: var(--shadow-premium);
transition: var(--transition-smooth);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.about-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
}
.about-img-box.img-primary {
top: 0;
left: 0;
width: 72%;
height: 420px;
border-radius: 40px 10px 40px 10px;
z-index: 2;
}
.about-img-box.img-secondary {
bottom: 0;
right: 0;
width: 58%;
height: 290px;
border-radius: 10px 40px 10px 40px;
z-index: 3;
}
.about-image-collage:hover .about-img-box img {
transform: scale(1.05);
}
.about-image-collage:hover .about-img-box.img-primary {
transform: translate(-10px, -10px);
}
.about-image-collage:hover .about-img-box.img-secondary {
transform: translate(10px, 10px);
border-color: var(--secondary);
box-shadow: var(--gold-glow);
}
/* Experience Badge */
.about-experience-badge {
position: absolute;
bottom: 80px;
left: 20px;
background: var(--secondary);
color: var(--text-on-dark);
padding: 1.2rem 1.6rem;
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
box-shadow: var(--shadow-premium), var(--gold-glow);
border: 1px solid rgba(255, 255, 255, 0.2);
animation: badgeFloat 4s ease-in-out infinite;
}
@keyframes badgeFloat {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
.about-experience-badge .badge-num {
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 900;
line-height: 1;
margin-bottom: 0.15rem;
}
.about-experience-badge .badge-text {
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
line-height: 1.2;
}
/* Bullets styling */
.about-bullets {
list-style: none;
margin-bottom: 2.5rem;
}
.about-bullets li {
font-size: 1.15rem;
font-weight: 500;
margin-bottom: 1.1rem;
display: flex;
align-items: center;
gap: 1rem;
color: var(--text-light);
}
.bullet-check {
background: rgba(200, 134, 10, 0.1);
color: var(--secondary);
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(200, 134, 10, 0.25);
transition: var(--transition-smooth);
}
.about-bullets li:hover .bullet-check {
background: var(--secondary);
color: var(--text-on-dark);
transform: scale(1.15);
}
.bullet-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* Rating Widget styling */
.about-rating-widget {
background: var(--bg-dark-card);
border: 1px solid var(--border-color);
padding: 1.2rem 1.6rem;
border-radius: 12px;
margin-bottom: 2.5rem;
display: inline-flex;
flex-direction: column;
gap: 0.5rem;
position: relative;
overflow: hidden;
}
.about-rating-widget::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--secondary);
}
.rating-stars {
display: flex;
align-items: center;
gap: 0.8rem;
}
.stars-val {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 900;
color: var(--text-light);
}
.stars-svg {
display: flex;
gap: 0.2rem;
}
.star-icon {
width: 16px;
height: 16px;
color: var(--secondary);
filter: drop-shadow(0 0 5px rgba(200, 134, 10, 0.5));
}
.rating-label {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--text-muted);
}
.about-link {
font-family: var(--font-heading);
font-weight: 700;
text-transform: uppercase;
font-size: 1.2rem;
color: var(--secondary);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.about-link:hover {
color: var(--secondary-hover);
}
.about-link svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2.5;
transition: var(--transition-fast);
}
.about-link:hover svg {
transform: translateX(5px);
}
/* ==========================================================================
STATS COUNTER SECTION
========================================================================== */
.stats-counter-section {
background: linear-gradient(180deg, var(--bg-dark-card) 0%, var(--bg-dark) 100%);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding: 5rem 5%;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
}
.stat-card {
padding: 2rem 1.5rem;
background: var(--bg-dark-card);
border: 1px solid var(--border-color);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-premium);
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--secondary), transparent);
}
.stat-number {
font-family: var(--font-heading);
font-size: clamp(2.5rem, 5.5vw, 4.2rem);
font-weight: 900;
color: var(--text-light);
line-height: 1;
margin-bottom: 0.5rem;
white-space: nowrap;
}
.stat-number span {
color: var(--secondary);
}
.stat-label {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1.5px;
}
/* ==========================================================================
PRODUCTS GRID SECTION
========================================================================== */
/* Product Category Tabs */
.product-tabs {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 3.5rem;
flex-wrap: wrap;
}
.tab-btn {
background: transparent;
border: 1.5px solid var(--border-color);
color: var(--text-muted);
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0.75rem 1.8rem;
cursor: pointer;
transition: var(--transition-smooth);
border-radius: 6px;
}
.tab-btn:hover {
color: var(--text-light);
border-color: rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.02);
}
.tab-btn.active {
background: var(--secondary);
border-color: var(--secondary);
color: var(--text-on-dark);
box-shadow: var(--gold-glow);
}
.products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.product-card {
background: var(--bg-dark-card);
border: 1px solid rgba(255, 255, 255, 0.04);
padding: 1.5rem;
display: flex;
flex-direction: column;
position: relative;
transition: var(--transition-smooth);
transform-style: preserve-3d;
perspective: 1000px;
}
.product-card.hidden-card {
display: none !important;
}
.product-card.fade-in-up {
animation: fadeInUpCard 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInUpCard {
from {
opacity: 0;
transform: translateY(25px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.product-card-hover-btn {
position: absolute;
bottom: 12px;
right: 12px;
background: var(--secondary);
color: var(--text-on-dark);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transform: translate(10px, 10px) scale(0.8);
transition: var(--transition-smooth);
z-index: 5;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.product-card:hover .product-card-hover-btn {
opacity: 1;
transform: translate(0, 0) scale(1);
}
.product-card-hover-btn:hover {
background: var(--accent);
transform: scale(1.1) rotate(45deg);
}
.product-card-inner {
transform: translateZ(20px); /* 3D lift */
display: flex;
flex-direction: column;
height: 100%;
}
.product-image-container {
width: 100%;
height: 200px;
overflow: hidden;
margin-bottom: 1.5rem;
position: relative;
}
.product-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-smooth);
}
.product-card:hover .product-img {
transform: scale(1.1);
}
.product-badge {
position: absolute;
top: 10px;
right: 10px;
background: rgba(6, 15, 24, 0.85);
border: 1px solid var(--secondary);
color: var(--secondary);
padding: 0.25rem 0.6rem;
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.product-card h3 {
font-size: 1.6rem;
margin-bottom: 0.5rem;
line-height: 1.2;
}
.product-card p {
font-size: 0.95rem;
margin-bottom: 1.5rem;
flex-grow: 1;
}
.product-card .btn {
width: 100%;
font-size: 1rem;
padding: 0.7rem;
}
/* Card Glow Effect on Hover */
.product-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid transparent;
transition: var(--transition-smooth);
pointer-events: none;
box-sizing: border-box;
}
.product-card:hover {
box-shadow: var(--shadow-premium), var(--gold-glow);
border-color: transparent;
}
.product-card:hover::after {
border-color: var(--secondary);
}
/* ==========================================================================
WHY CHOOSE US SECTION
========================================================================== */
.why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.why-card {
background: var(--bg-dark-card);
border: 1px solid var(--border-color);
padding: 3rem 2rem;
text-align: center;
position: relative;
box-shadow: var(--shadow-premium);
transition: var(--transition-smooth);
}
.why-card:hover {
transform: translateY(-5px);
border-color: var(--secondary);
box-shadow: var(--shadow-premium), var(--gold-glow);
}
.why-icon-container {
width: 70px;
height: 70px;
background: rgba(2, 132, 199, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem auto;
color: var(--secondary);
transition: var(--transition-smooth);
}
.why-card:hover .why-icon-container {
background: var(--secondary);
color: var(--text-on-dark);
transform: scale(1.1) rotate(5deg);
}
.why-icon {
width: 32px;
height: 32px;
}
.why-card h3 {
font-size: 1.4rem;
margin-bottom: 1rem;
}
.why-card p {
font-size: 0.95rem;
}
/* ==========================================================================
COVERAGE MAP SECTION
========================================================================== */
.coverage-layout {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 4rem;
align-items: center;
}
.map-container {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* India SVG Map styling */
.india-svg-map {
width: 100%;
height: auto;
max-height: 550px;
filter: drop-shadow(0 15px 30px rgba(15, 23, 42, 0.08));
}
.india-svg-map path {
fill: #E2E8F0;
stroke: #FFFFFF;
stroke-width: 1.5;
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
cursor: pointer;
}
.india-svg-map path:hover {
fill: #CBD5E1;
}
/* Glowing active states */
.india-svg-map path.highlight-state {
fill: rgba(2, 132, 199, 0.15);
stroke: var(--secondary);
stroke-width: 2.2;
}
.india-svg-map path.glow-state {
fill: var(--secondary);
stroke: #fff;
stroke-width: 2.5;
filter: drop-shadow(0 0 12px var(--secondary));
}
.map-tooltip {
position: fixed;
background: rgba(6, 10, 19, 0.95); /* Fixed premium dark background for universal contrast */
border: 1px solid var(--secondary);
color: #F8FAFC; /* Fixed crisp white text for universal legibility */
padding: 0.6rem 1.2rem;
font-family: var(--font-body);
font-size: 0.9rem;
pointer-events: none;
z-index: 1000;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.2s, transform 0.2s;
box-shadow: var(--shadow-premium), var(--gold-glow);
}
.map-tooltip-title {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
color: var(--secondary);
text-transform: uppercase;
margin-bottom: 0.2rem;
}
.map-tooltip-desc {
font-size: 0.8rem;
color: var(--text-muted);
}
.map-legend {
display: flex;
gap: 1.5rem;
margin-top: 1.5rem;
justify-content: center;
}
.legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}
.legend-item span {
color: var(--text-light) !important;
}
.legend-color {
width: 15px;
height: 15px;
border-radius: 2px;
}
.legend-color.served {
background-color: var(--secondary);
box-shadow: 0 0 5px var(--secondary);
}
.legend-color.other {
background-color: #E2E8F0;
border: 1px solid #CBD5E1;
}
/* ==========================================================================
INFINITE PARTNERS MARQUEE
========================================================================== */
.partners-marquee-container {
width: 100%;
overflow: hidden;
background-color: var(--bg-dark-card);
padding: 4.5rem 0; /* Expanded padding for greater prominence */
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.marquee-wrapper {
display: flex;
overflow: hidden;
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.marquee-track {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 5.5rem;
animation: marqueeScroll 28s linear infinite;
padding-left: 2.5rem;
width: max-content;
}
.marquee-wrapper:hover .marquee-track {
animation-play-state: paused;
}
.marquee-logo-container {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 320px;
height: 104px;
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 8px;
padding: 1.25rem 2.25rem;
transition: all var(--transition-fast);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.marquee-logo-container:hover {
border-color: var(--secondary);
transform: translateY(-4px) scale(1.04); /* More dynamic lift and scale */
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); /* Rich premium shadow */
background: #FFFFFF;
}
.marquee-logo {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: none;
opacity: 1;
transition: all var(--transition-fast);
}
.marquee-logo-container:hover .marquee-logo {
transform: scale(1.06);
}
@keyframes marqueeScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ==========================================================================
TESTIMONIALS SECTION
========================================================================== */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
/* Horizontal double marquee wrapper */
.testimonials-marquee-wrapper {
display: flex;
flex-direction: column;
gap: 2.5rem;
width: 100%;
overflow: hidden;
padding: 3rem 0;
position: relative;
}
/* Fade gradients on left & right boundaries for smooth professional visual transition */
.testimonials-marquee-wrapper::before,
.testimonials-marquee-wrapper::after {
content: '';
position: absolute;
top: 0;
width: 18%;
height: 100%;
z-index: 5;
pointer-events: none;
}
.testimonials-marquee-wrapper::before {
left: 0;
background: linear-gradient(90deg, var(--bg-dark) 0%, transparent 100%);
}
.testimonials-marquee-wrapper::after {
right: 0;
background: linear-gradient(270deg, var(--bg-dark) 0%, transparent 100%);
}
.light-theme .testimonials-marquee-wrapper::before {
background: linear-gradient(90deg, var(--primary) 0%, transparent 100%) !important;
}
.light-theme .testimonials-marquee-wrapper::after {
background: linear-gradient(270deg, var(--primary) 0%, transparent 100%) !important;
}
.testimonials-marquee-row {
display: flex;
width: 100%;
overflow: hidden;
white-space: nowrap;
position: relative;
padding: 0.5rem 0;
}
.testimonials-marquee-track {
display: flex;
gap: 2rem;
width: max-content;
animation-duration: 26s; /* Sped up from 40s for premium, dynamic B2B social proof flow */
animation-iteration-count: infinite;
animation-timing-function: linear;
}
/* Left-to-Right track animation */
.marquee-ltr .testimonials-marquee-track {
animation-name: slide-ltr;
}
/* Right-to-Left track animation */
.marquee-rtl .testimonials-marquee-track {
animation-name: slide-rtl;
}
/* Play/Pause state on cursor hover */
.testimonials-marquee-row:hover .testimonials-marquee-track {
animation-play-state: paused;
}
@keyframes slide-ltr {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
@keyframes slide-rtl {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Horizontal testimonial card wrapper */
.testimonial-marquee-card {
flex-shrink: 0;
width: 440px;
background: var(--bg-dark-card);
border: 1.5px solid var(--border-color);
padding: 2.5rem;
border-radius: 12px;
display: inline-flex;
flex-direction: column;
gap: 1.5rem;
white-space: normal;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.testimonial-marquee-card:hover {
transform: translateY(-8px) scale(1.02);
border-color: var(--secondary);
box-shadow: var(--gold-glow);
}
.testimonial-marquee-card .quote-icon {
position: absolute;
top: 1rem;
right: 1.5rem;
font-size: 3.5rem;
font-family: Georgia, serif;
color: rgba(200, 134, 10, 0.08);
line-height: 1;
user-select: none;
pointer-events: none;
}
.testimonial-marquee-card p {
font-size: 0.98rem;
line-height: 1.6;
color: var(--text-muted);
font-style: italic;
margin-bottom: 0;
z-index: 2;
}
.testimonial-marquee-card:hover p {
color: var(--text-light);
}
.testimonial-card {
background: var(--bg-dark-card);
border: 1px solid rgba(255,255,255,0.03);
padding: 3rem 2.5rem;
position: relative;
transition: var(--transition-smooth);
}
.testimonial-card:hover {
border-color: rgba(200, 134, 10, 0.2);
transform: translateY(-5px);
box-shadow: var(--shadow-premium);
}
.quote-icon {
position: absolute;
top: 2rem;
right: 2rem;
font-size: 5rem;
font-family: Georgia, serif;
line-height: 1;
color: rgba(200, 134, 10, 0.1);
user-select: none;
}
.testimonial-card p {
font-size: 1.05rem;
font-style: italic;
margin-bottom: 2rem;
position: relative;
z-index: 2;
}
.testimonial-client {
display: flex;
align-items: center;
gap: 1rem;
}
.client-avatar {
width: 50px;
height: 50px;
background: var(--primary-light);
border-radius: 50%;
border: 1px solid var(--secondary);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.2rem;
color: var(--secondary);
}
.client-info h4 {
font-size: 1.15rem;
margin-bottom: 0.1rem;
}
.client-info p {
font-size: 0.85rem;
color: var(--text-muted);
font-style: normal;
margin: 0;
}
/* ==========================================================================
CTA BANNER SECTION
========================================================================== */
.cta-banner {
--text-light: #FFFFFF;
--text-muted: #E2E8F0;
--bg-dark: #1E293B;
background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
border-top: 3px solid var(--secondary);
border-bottom: 3px solid var(--secondary);
padding: 5rem 5%;
position: relative;
text-align: center;
}
.cta-banner-inner {
max-width: 800px;
margin: 0 auto;
}
.cta-banner h2 {
font-size: 3.5rem;
margin-bottom: 1rem;
line-height: 1.1;
}
.cta-banner p {
font-size: 1.25rem;
margin-bottom: 2.5rem;
color: var(--text-light);
opacity: 0.85;
}
.cta-actions {
display: flex;
gap: 1.5rem;
justify-content: center;
}
/* ==========================================================================
FOOTER SECTION
========================================================================== */
.footer {
--text-light: #FFFFFF;
--text-muted: #94A3B8;
--bg-dark: #090D16;
background-color: #090D16;
border-top: 3px solid var(--secondary);
padding: 6rem 5% 3rem 5%;
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 10%;
width: 80%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--secondary), transparent);
box-shadow: var(--gold-glow);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
gap: 4rem;
max-width: 1600px;
margin: 0 auto 4rem auto;
width: 100%;
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.footer-brand p {
font-size: 0.95rem;
}
.footer-socials {
display: flex;
gap: 1rem;
}
.social-link {
width: 40px;
height: 40px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-light);
transition: var(--transition-fast);
}
.social-link:hover {
background: var(--secondary);
color: var(--text-light);
transform: translateY(-3px);
box-shadow: var(--gold-glow);
}
.social-link svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.footer-column h3 {
font-size: 1.35rem;
margin-bottom: 2rem;
position: relative;
display: inline-block;
color: #FFFFFF;
letter-spacing: 0.5px;
}
.footer-column h3::after {
content: '';
display: block;
width: 35px;
height: 3px;
background: var(--secondary);
margin-top: 0.6rem;
border-radius: 2px;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer-links li a {
font-size: 0.95rem;
color: var(--text-muted);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
display: inline-block;
}
.footer-links li a:hover {
color: var(--secondary);
transform: translateX(8px);
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.footer-contact-item {
display: flex;
gap: 1.1rem;
font-size: 0.95rem;
color: var(--text-muted);
transition: all 0.3s ease;
}
.footer-contact-item:hover {
color: #FFFFFF;
}
.footer-contact-item svg {
width: 20px;
height: 20px;
stroke: var(--secondary);
fill: none;
stroke-width: 2;
flex-shrink: 0;
margin-top: 2px;
transition: all 0.3s ease;
}
.footer-contact-item:hover svg {
transform: scale(1.2);
filter: drop-shadow(0 0 5px var(--secondary));
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.05);
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1600px;
margin: 0 auto;
flex-wrap: wrap;
gap: 1.5rem;
width: 100%;
}
.copyright {
font-size: 0.85rem;
color: var(--text-muted);
}
.stockist-badge {
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--secondary);
}
/* ==========================================================================
INTERACTIVE SUBPAGE BANNER (ABOUT, PRODUCTS, COVERAGE, CONTACT)
========================================================================== */
.subpage-hero {
--text-light: #FFFFFF;
--text-muted: #CBD5E1;
--bg-dark: #1E293B;
height: 45vh;
min-height: 350px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
padding-top: 110px; /* Extra clearance — prevents fixed header from overlapping hero image */
}
.subpage-hero h1 {
font-size: 4.5rem;
margin-bottom: 1rem;
}
.subpage-breadcrumbs {
font-family: var(--font-heading);
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--secondary);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.subpage-breadcrumbs a {
color: var(--text-muted);
}
.subpage-breadcrumbs a:hover {
color: var(--text-light);
}
/* ==========================================================================
ABOUT PAGE TIMELINE
========================================================================== */
.timeline-section {
padding: 6rem 5%;
}
.timeline {
position: relative;
max-width: 1000px;
margin: 0 auto;
}
.timeline::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: rgba(15, 23, 42, 0.08); /* Subtle track */
}
/* Timeline Dynamic Scroll progress line */
.timeline-line-progress {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 0;
background: var(--accent); /* Forge Orange */
box-shadow: 0 0 10px rgba(212, 64, 26, 0.5);
z-index: 2;
transition: height 0.1s ease-out;
}
.timeline-item {
margin-bottom: 5rem;
position: relative;
width: 50%;
}
.timeline-item.reveal-element {
opacity: 1;
transform: none;
transition: none;
}
.timeline-item:nth-child(odd) {
left: 0;
padding-right: 3rem;
}
.timeline-item:nth-child(even) {
left: 50%;
padding-left: 3rem;
}
.timeline-badge {
position: absolute;
top: 5px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--bg-dark-card);
border: 3px solid rgba(15, 23, 42, 0.15); /* Inactive gray border */
z-index: 10;
transform: scale(0);
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.timeline-item.visible .timeline-badge {
transform: scale(1);
}
.timeline-item.active-milestone .timeline-badge {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 0 12px var(--accent);
}
.timeline-item:nth-child(odd) .timeline-badge {
right: -12px;
}
.timeline-item:nth-child(even) .timeline-badge {
left: -12px;
}
.timeline-content {
background: var(--bg-dark-card);
border: 1px solid var(--border-color);
padding: 2.5rem;
position: relative;
box-shadow: var(--shadow-premium);
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.timeline-item:nth-child(odd) .timeline-content {
transform: translateX(-40px);
opacity: 0;
}
.timeline-item:nth-child(even) .timeline-content {
transform: translateX(40px);
opacity: 0;
}
.timeline-item.visible .timeline-content {
transform: translateX(0);
opacity: 1;
}
.timeline-item.active-milestone .timeline-content {
border-color: rgba(212, 64, 26, 0.3);
box-shadow: var(--shadow-premium), 0 5px 15px rgba(212, 64, 26, 0.05);
}
.timeline-content h3 {
font-size: 1.8rem;
color: var(--secondary);
margin-bottom: 0.5rem;
transition: color 0.3s ease;
}
.timeline-item.active-milestone .timeline-content h3 {
color: var(--accent); /* Highlight year in forge orange */
}
.timeline-content h4 {
font-size: 1.25rem;
margin-bottom: 1rem;
}
/* ==========================================================================
PRODUCTS DETAIL PAGE & CATALOG SYSTEM
========================================================================== */
.catalog-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 3rem;
}
.catalog-sidebar {
background: var(--bg-dark-card);
border: 1px solid var(--border-color);
padding: 2rem;
height: fit-content;
}
.sidebar-title {
font-size: 1.4rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--secondary);
padding-bottom: 0.5rem;
}
.sidebar-menu {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.sidebar-menu-item a {
font-weight: 500;
color: var(--text-muted);
display: block;
padding: 0.5rem 0;
}
.sidebar-menu-item.active a,
.sidebar-menu-item a:hover {
color: var(--secondary);
font-weight: 700;
}
/* Specifications Table */
.spec-table-container {
overflow-x: auto;
margin: 2.5rem 0;
border: 1px solid var(--border-color);
}
.spec-table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
.spec-table th, .spec-table td {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border-color);
}
.spec-table th {
background-color: var(--primary);
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
color: var(--secondary);
text-transform: uppercase;
}
.spec-table tr:nth-child(even) {
background-color: rgba(15, 23, 42, 0.02);
}
.spec-table tr:hover {
background-color: rgba(2, 132, 199, 0.05);
}
/* Details Section Layout */
.product-details-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-bottom: 4rem;
}
.product-gallery {
position: relative;
}
.product-gallery-main {
width: 100%;
height: 400px;
object-fit: cover;
border: 1px solid var(--secondary);
}
.product-info-block {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.product-info-block .brand-badges {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.brand-badge-item {
background: var(--primary-light);
border: 1px solid var(--border-color);
padding: 0.4rem 1rem;
font-family: var(--font-heading);
font-weight: 700;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 1px;
}
.brand-badge-item.highlight {
border-color: var(--secondary);
color: var(--secondary);
}
/* Quote Request Form styling */
.quote-form-card {
background: var(--bg-dark-card);
border: 2px solid var(--secondary);
padding: 3rem;
margin-top: 4rem;
border-radius: 12px;
box-shadow: var(--shadow-premium);
}
.quote-form-card h3 {
font-size: 2.2rem;
margin-bottom: 0.5rem;
}
.quote-form-card p {
margin-bottom: 2.5rem;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem 2rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group.full-width {
grid-column: span 2;
}
.form-group label {
font-family: var(--font-heading);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.95rem;
}
.form-control {
background: var(--bg-dark);
border: 1px solid var(--border-color);
padding: 0.85rem 1.2rem;
color: var(--text-light);
font-family: var(--font-body);
font-size: 1rem;
transition: var(--transition-fast);
border-radius: 6px;
}
.form-control:focus {
outline: none;
border-color: var(--secondary);
box-shadow: 0 0 10px rgba(200, 134, 10, 0.25);
background: var(--bg-dark-card);
}
textarea.form-control {
height: 120px;
resize: none;
}
.quote-form-card .btn {
margin-top: 2rem;
width: 100%;
}
/* ==========================================================================
CONTACT PAGE SPECIFIC STYLING
========================================================================== */
.contact-layout {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 5rem;
}
.contact-info-panel {
display: flex;
flex-direction: column;
gap: 3rem;
}
.contact-method-card {
display: flex;
gap: 1.8rem;
background: var(--bg-dark-card);
padding: 2.2rem;
border-radius: 12px;
border: 1.5px solid var(--border-color);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
.contact-method-card:hover {
transform: translateY(-5px);
border-color: var(--secondary);
box-shadow: var(--gold-glow);
}
.contact-method-icon {
width: 60px;
height: 60px;
background: rgba(200, 134, 10, 0.08);
border: 1.5px solid var(--secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary);
flex-shrink: 0;
transition: all 0.4s ease;
}
.contact-method-card:hover .contact-method-icon {
background: var(--secondary);
color: #FFFFFF !important;
transform: rotate(10deg);
}
.contact-method-icon svg {
width: 26px;
height: 26px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
.contact-method-details h4 {
font-size: 1.3rem;
margin-bottom: 0.4rem;
}
.contact-method-details p {
font-size: 1.05rem;
}
.map-embed-wrapper {
margin-top: 4rem;
border: 2px solid var(--secondary);
border-radius: 12px;
overflow: hidden;
line-height: 0;
box-shadow: var(--shadow-premium);
transition: all 0.4s ease;
}
.map-embed-wrapper:hover {
box-shadow: var(--gold-glow);
}
.map-embed {
width: 100%;
height: 480px;
border: none;
filter: contrast(1.05) saturate(1.02);
transition: all 0.6s ease;
}
/* ==========================================================================
INTERACTIVE ANIMATION INTERFACE (SCROLL TRIGGERED REVEALS)
========================================================================== */
.reveal-element {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
/* CSS fallback: if JS IntersectionObserver doesn't fire within 2s, reveal anyway */
animation: reveal-fallback 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2s forwards;
}
@keyframes reveal-fallback {
to { opacity: 1; transform: translateY(0); }
}
.reveal-element.visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger reveals based on --delay inline custom properties */
.reveal-element.visible[style*="--delay"] {
transition-delay: calc(var(--delay) * 0.15s);
}
@keyframes reveal-card-fallback {
to { opacity: 1; transform: translateY(0); }
}
/* Card Stagger Entrance Animations inside Revealed Sections */
.reveal-element .stat-card,
.reveal-element .product-card,
.reveal-element .why-card,
.reveal-element .state-card {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
/* CSS fallback: if JS delayed, reveal cards gracefully */
animation: reveal-card-fallback 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.2s forwards;
}
.reveal-element.visible .stat-card,
.reveal-element.visible .product-card,
.reveal-element.visible .why-card,
.reveal-element.visible .state-card {
opacity: 1;
transform: translateY(0);
}
/* Stagger delays matching elements */
.reveal-element .stat-card:nth-child(1),
.reveal-element .product-card:nth-child(1),
.reveal-element .why-card:nth-child(1),
.reveal-element .state-card:nth-child(1) { transition-delay: 0.1s; }
.reveal-element .stat-card:nth-child(2),
.reveal-element .product-card:nth-child(2),
.reveal-element .why-card:nth-child(2),
.reveal-element .state-card:nth-child(2) { transition-delay: 0.2s; }
.reveal-element .stat-card:nth-child(3),
.reveal-element .product-card:nth-child(3),
.reveal-element .why-card:nth-child(3),
.reveal-element .state-card:nth-child(3) { transition-delay: 0.3s; }
.reveal-element .stat-card:nth-child(4),
.reveal-element .product-card:nth-child(4),
.reveal-element .why-card:nth-child(4),
.reveal-element .state-card:nth-child(4) { transition-delay: 0.4s; }
.reveal-element .product-card:nth-child(5),
.reveal-element .state-card:nth-child(5) { transition-delay: 0.5s; }
.reveal-element .product-card:nth-child(6),
.reveal-element .state-card:nth-child(6) { transition-delay: 0.6s; }
.reveal-element .product-card:nth-child(7),
.reveal-element .state-card:nth-child(7) { transition-delay: 0.7s; }
.reveal-element .product-card:nth-child(8),
.reveal-element .state-card:nth-child(8) { transition-delay: 0.8s; }
/* ==========================================================================
FLOATING WHATSAPP BUTTON
========================================================================== */
.floating-whatsapp {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 60px;
height: 60px;
background-color: #25D366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
color: #fff;
cursor: pointer;
transition: var(--transition-smooth);
animation: pulseRing 3s infinite;
}
.floating-whatsapp:hover {
transform: scale(1.1) rotate(5deg);
background-color: #22c35e;
}
.whatsapp-icon {
width: 32px;
height: 32px;
fill: currentColor;
}
@keyframes pulseRing {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
}
70% {
box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}
/* Enquiry & Map Section styling */
.enquiry-map-section {
background-color: var(--bg-dark);
padding: 6rem 5%;
border-top: 1px solid var(--border-color);
}
.enquiry-map-container {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 4rem;
max-width: 1300px;
margin: 0 auto;
align-items: stretch;
}
.enquiry-form-card {
background: var(--bg-dark-card);
border: 1px solid var(--border-color);
padding: 3rem;
border-radius: 16px;
box-shadow: var(--shadow-premium);
display: flex;
flex-direction: column;
}
.enquiry-header {
margin-bottom: 2.5rem;
}
.enquiry-header h3 {
color: var(--secondary);
font-size: 1.15rem;
letter-spacing: 2px;
margin-bottom: 0.5rem;
font-family: var(--font-heading);
text-transform: uppercase;
}
.enquiry-header h2 {
font-size: 2.8rem;
line-height: 1.1;
margin-bottom: 0.75rem;
color: var(--text-light);
font-family: var(--font-heading);
text-transform: uppercase;
}
.enquiry-header p {
font-size: 0.95rem;
color: var(--text-muted);
}
/* Floating label form styling scoped to homepage enquiry card to fix overlapping globally */
.enquiry-form-card .form-group-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.enquiry-form-card .form-group {
position: relative;
margin-bottom: 1.5rem;
}
.enquiry-form-card .form-group-row .form-group {
margin-bottom: 0;
}
.enquiry-form-card .form-group input,
.enquiry-form-card .form-group select,
.enquiry-form-card .form-group textarea {
width: 100%;
padding: 0.95rem 1rem;
background: rgba(6, 10, 19, 0.4);
border: 1.5px solid var(--border-color);
border-radius: 8px;
color: var(--text-light);
font-family: var(--font-body);
font-size: 0.95rem;
transition: var(--transition-fast);
outline: none;
}
.enquiry-form-card .form-group select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 2.5rem;
}
.enquiry-form-card .form-group select:invalid {
color: var(--text-muted);
}
.enquiry-form-card .form-group input:focus,
.enquiry-form-card .form-group select:focus,
.enquiry-form-card .form-group textarea:focus {
border-color: var(--secondary);
background: rgba(6, 10, 19, 0.6);
box-shadow: 0 0 10px rgba(200, 134, 10, 0.15);
}
/* Float labels - Scoped to homepage enquiry form card */
.enquiry-form-card .form-group label {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 0.95rem;
pointer-events: none;
transition: var(--transition-fast);
}
.enquiry-form-card .form-group textarea ~ label {
top: 1.5rem;
transform: none;
}
/* Floating effect - Scoped to homepage enquiry form card and enhanced with :has() parent selectors */
.enquiry-form-card .form-group input:focus ~ label,
.enquiry-form-card .form-group input:not(:placeholder-shown) ~ label,
.enquiry-form-card .form-group select:focus ~ label,
.enquiry-form-card .form-group select:valid ~ label,
.enquiry-form-card .form-group textarea:focus ~ label,
.enquiry-form-card .form-group textarea:not(:placeholder-shown) ~ label,
.enquiry-form-card .form-group:has(input:focus) label,
.enquiry-form-card .form-group:has(input:not(:placeholder-shown)) label,
.enquiry-form-card .form-group:has(select:focus) label,
.enquiry-form-card .form-group:has(select:valid) label,
.enquiry-form-card .form-group:has(textarea:focus) label,
.enquiry-form-card .form-group:has(textarea:not(:placeholder-shown)) label {
top: -8px;
left: 0.75rem;
font-size: 0.75rem;
padding: 0 0.4rem;
background: var(--bg-dark-card);
color: var(--secondary);
font-weight: 700;
}
/* Static forms design (non-homepage quote pages and product pages) label enhancements */
.quote-form-card .form-group label {
margin-bottom: 0.55rem;
color: var(--text-muted);
font-size: 0.9rem;
font-family: var(--font-heading);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.message-group {
margin-bottom: 2rem;
}
.btn-submit {
width: 100%;
padding: 1rem 2rem;
border-radius: 8px;
}
/* Map Card styling */
.enquiry-map-card {
background: var(--bg-dark-card);
border: 1px solid var(--border-color);
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-premium);
display: flex;
flex-direction: column;
}
.map-iframe-wrapper {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.map-iframe {
width: 100%;
height: 100%;
filter: invert(90%) hue-rotate(180deg) opacity(0.85); /* Premium dark map effect */
transition: var(--transition-smooth);
}
.enquiry-map-card:hover .map-iframe {
filter: invert(90%) hue-rotate(180deg) opacity(1);
}
.map-info-box {
padding: 2.2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
flex: 1;
justify-content: space-between;
}
.info-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.info-item h4 {
font-family: var(--font-heading);
font-size: 1.15rem;
color: var(--text-light);
margin-bottom: 0.25rem;
text-transform: uppercase;
}
.info-item p {
font-size: 0.95rem;
line-height: 1.5;
color: var(--text-muted);
}
.info-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 6px;
cursor: pointer;
transition: var(--transition-smooth);
}
.map-directions-btn {
background: transparent;
border: 1.5px solid var(--secondary);
color: var(--secondary);
width: 100%;
}
.map-directions-btn:hover {
background: var(--secondary);
color: var(--text-on-dark);
box-shadow: var(--gold-glow);
}
@media (max-width: 1024px) {
.enquiry-map-container {
grid-template-columns: 1fr;
gap: 3rem;
}
}
@media (max-width: 600px) {
.form-group-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.enquiry-form-card {
padding: 2rem 1.5rem;
}
.enquiry-header h2 {
font-size: 2.2rem;
}
}
/* ── Map info box mobile: two-location layout ── */
@media (max-width: 768px) {
.map-info-box {
padding: 1.5rem;
gap: 1rem;
}
.info-item { gap: 0.75rem; }
.info-item h4 { font-size: 1rem; }
.info-item p { font-size: 0.88rem; }
.info-item-row { margin-bottom: 0 !important; }
.map-directions-btn { padding: 0.6rem 1rem; font-size: 0.88rem; }
}
@media (max-width: 480px) {
.map-info-box { padding: 1.1rem; gap: 0.85rem; }
.info-item svg { width: 18px !important; height: 18px !important; }
.info-item h4 { font-size: 0.92rem; letter-spacing: 0.5px; }
.info-item p { font-size: 0.82rem; }
.map-directions-btn { padding: 0.55rem 0.9rem; font-size: 0.82rem; }
.map-iframe-wrapper { height: 220px; }
}
/* ==========================================================================
RESPONSIVE LAYOUT STYLING (MEDIA QUERIES)
========================================================================== */
@media (max-width: 1200px) {
.dms-logo {
gap: 11px; /* Upgraded from 8px */
}
.dms-logo .dms-mark {
width: 48px; /* Upgraded from 38px */
height: 48px; /* Upgraded from 38px */
}
.dms-logo .dms-name {
font-size: 1.35rem;
}
.dms-logo .dms-tag {
font-size: 0.58rem;
letter-spacing: 0.12em;
}
.nav-container nav {
margin-right: 1.5rem;
}
.nav-menu {
gap: 0.95rem;
}
.nav-item a {
font-size: 0.95rem;
}
.nav-phone {
font-size: 0.9rem;
padding: 0 0.85rem;
height: 38px;
}
.theme-toggle {
width: 38px;
height: 38px;
margin-left: 0.5rem;
flex-shrink: 0;
}
.nav-container {
padding: 1rem 3%;
}
.section-header h2 { font-size: 2.6rem; }
.products-grid { grid-template-columns: repeat(3, 1fr); }
.why-grid { grid-template-columns: repeat(2, 1fr); }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.testimonials-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
}
@media (max-width: 992px) {
.section { padding: 4.5rem 5% 4.5rem 5%; }
.hero h1 { font-size: 3.8rem; }
.about-snapshot { grid-template-columns: 1fr; gap: 3rem; }
.about-img { height: 350px; }
.coverage-layout { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
.catalog-layout { grid-template-columns: 1fr; }
.product-details-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.contact-layout { grid-template-columns: 1fr; gap: 4rem; }
}
@media (max-width: 768px) {
.header {
padding: 0.8rem 4% !important;
}
/* Hide theme toggle on mobile — always light mode */
.theme-toggle {
display: none !important;
}
.dms-logo {
gap: 6px;
flex-shrink: 0;
margin-right: 0;
}
.dms-logo .dms-mark {
width: 35px;
height: 35px;
}
.dms-logo .dms-name {
font-size: 1.2rem;
}
.dms-logo .dms-tag {
display: none !important;
}
.nav-phone {
width: 38px;
height: 38px;
padding: 0 !important;
justify-content: center;
border-radius: 50% !important;
margin-left: auto;
}
.nav-phone span {
display: none !important;
}
.nav-phone svg {
margin: 0 !important;
width: 18px;
height: 18px;
}
.theme-toggle {
margin-left: 0.5rem;
flex-shrink: 0;
}
.nav-menu {
position: fixed;
top: 0;
right: -100%;
width: 280px;
height: 100vh;
background: var(--bg-dark);
border-left: 2px solid var(--secondary);
display: flex;
flex-direction: column;
justify-content: center;
gap: 2rem;
padding: 3rem;
transition: var(--transition-smooth);
box-shadow: var(--shadow-premium);
}
.nav-menu.open {
right: 0;
}
.mobile-nav-toggle {
display: block;
}
.products-grid { grid-template-columns: repeat(2, 1fr); }
.testimonials-grid { grid-template-columns: 1fr; }
.cta-banner h2 { font-size: 2.6rem; }
.timeline::before, .timeline-line-progress { left: 30px; }
.timeline-item { width: 100%; }
.timeline-item:nth-child(odd), .timeline-item:nth-child(even) {
left: 0;
padding-left: 5rem;
padding-right: 0;
}
.timeline-item:nth-child(odd) .timeline-badge, .timeline-item:nth-child(even) .timeline-badge {
left: 18px;
}
.form-grid { grid-template-columns: 1fr; }
.form-group.full-width { grid-column: span 1; }
.cta-actions { flex-direction: column; gap: 1rem; }
/* Mobile Footer Optimization */
.footer-grid {
grid-template-columns: 1fr !important;
gap: 2.5rem !important;
}
.footer-column h3 {
margin-bottom: 1.25rem !important;
}
.footer-bottom {
flex-direction: column !important;
text-align: center !important;
gap: 1.2rem !important;
}
.stockist-badge {
text-align: center !important;
line-height: 1.5 !important;
font-size: 0.8rem !important;
}
/* Mobile Reviews Carousel Optimization */
.reviews-carousel-container {
height: 480px !important;
padding: 1.5rem !important;
}
.reviews-slider-track {
left: 0 !important;
right: 0 !important;
}
.review-item-card {
padding: 1.5rem !important;
}
}
@media (max-width: 576px) {
.hero h1 { font-size: 2.8rem; }
.hero-subheadline { font-size: 1.15rem; }
.products-grid { grid-template-columns: 1fr; }
.why-grid { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; text-align: center; }
.quote-form-card { padding: 1.5rem; }
}
/* ==========================================================================
PREMIUM CUSTOM STYLING (DARK LUXURY PIVOT & RADAR PULSE)
========================================================================== */
/* Molten Gold Text Gradient */
.section-header h2 span,
.logo-text span,
.dms-logo .dms-name .accent,
.timeline-content h3,
.hero h1 span,
.hero-content h1 span,
h2 span {
background: linear-gradient(135deg, #C8860A 0%, #FFB300 50%, #C8860A 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: goldShimmerText 6s linear infinite;
}
@keyframes goldShimmerText {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Card Spotlight Hover Shine Effect */
.product-card, .why-card, .stat-card {
position: relative;
overflow: hidden;
}
.product-card::before,
.why-card::before,
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(350px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(200, 134, 10, 0.08), transparent 80%);
z-index: 2;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.product-card:hover::before,
.why-card:hover::before,
.stat-card:hover::before {
opacity: 1;
}
/* Hyderabad Radar Pulse inside SVG Map */
.radar-dot {
fill: var(--accent); /* Forge Orange */
transition: var(--transition-fast);
}
.radar-pulse {
fill: var(--accent);
fill-opacity: 0.35;
animation: radarPulseAnimation 2.2s infinite ease-out;
}
@keyframes radarPulseAnimation {
0% {
r: 3px;
opacity: 1;
}
100% {
r: 25px;
opacity: 0;
}
}
.map-city-marker:hover .radar-dot {
fill: #FFFFFF;
filter: drop-shadow(0 0 6px var(--accent));
}
/* Frosted glass header scrolled style overrides */
.header.scrolled {
background: var(--header-scrolled-bg) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-bottom: 2px solid var(--secondary) !important;
box-shadow: var(--shadow-premium) !important;
}
/* General improvements to dark panels and elements */
.section-dark {
background-color: var(--primary) !important;
}
.stats-counter-section {
background: linear-gradient(180deg, var(--bg-dark) 0%, var(--primary) 100%) !important;
}
/* Map adaptation overrides for Dark theme */
.india-svg-map {
background: var(--bg-dark-card) !important;
border: 1px solid var(--border-color);
}
.india-svg-map path {
fill: #0F172A !important; /* Dark slate base for map states */
stroke: rgba(255, 255, 255, 0.08) !important; /* Subtle steel borders */
transition: var(--transition-smooth);
}
.india-svg-map path:hover {
fill: #1E293B !important;
}
.india-svg-map path.glow-state {
fill: rgba(200, 134, 10, 0.2) !important; /* Molten Gold shade */
stroke: var(--secondary) !important;
}
.india-svg-map path.highlight-state {
fill: rgba(200, 134, 10, 0.12) !important;
stroke: var(--secondary) !important;
}
/* Light Theme overrides for Map */
.light-theme .india-svg-map path {
fill: #CBD5E1 !important;
stroke: #FFFFFF !important;
}
.light-theme .india-svg-map path:hover {
fill: #94A3B8 !important;
}
.light-theme .india-svg-map path.glow-state {
fill: rgba(200, 134, 10, 0.18) !important;
stroke: var(--secondary) !important;
filter: drop-shadow(0 0 8px rgba(200, 134, 10, 0.35));
}
.light-theme .india-svg-map path.highlight-state {
fill: rgba(200, 134, 10, 0.12) !important;
stroke: var(--secondary) !important;
}
/* Premium Light Mode Card Borders & Shadows */
.light-theme .overlap-card,
.light-theme .product-card,
.light-theme .why-card,
.light-theme .state-card {
border: 1.5px solid rgba(15, 23, 42, 0.12) !important;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
background: #FFFFFF !important;
}
.light-theme .overlap-card:hover,
.light-theme .product-card:hover,
.light-theme .why-card:hover,
.light-theme .state-card:hover {
box-shadow: 0 15px 35px rgba(15, 23, 42, 0.10), var(--gold-glow) !important;
}
/* Brand bar logo cards are always white-background, so hardcoded dark SVG fills
work correctly in both dark and light themes. No fill overrides needed. */
/* Theme Toggle Button Styling */
.theme-toggle {
background: transparent;
border: 1px solid var(--secondary);
color: var(--secondary);
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--transition-smooth);
margin-left: 1rem;
padding: 0;
z-index: 1010;
flex-shrink: 0;
}
.theme-toggle:hover {
background: var(--secondary);
color: #FFFFFF;
box-shadow: var(--gold-glow);
transform: scale(1.05);
}
.theme-icon {
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
pointer-events: none;
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}
/* Toggle Transitions */
.light-theme .sun-icon {
opacity: 0;
transform: rotate(90deg) scale(0);
}
.light-theme .moon-icon {
opacity: 1;
transform: rotate(0) scale(1);
color: var(--text-light);
}
.theme-toggle:hover .moon-icon {
color: #FFFFFF;
}
body:not(.light-theme) .sun-icon {
opacity: 1;
transform: rotate(0) scale(1);
color: var(--secondary);
}
body:not(.light-theme) .moon-icon {
opacity: 0;
transform: rotate(-90deg) scale(0);
}
@media (max-width: 768px) {
.theme-toggle {
margin-left: auto;
margin-right: 1.5rem;
}
}
/* Coordinated Map Pings styling */
.map-city-marker {
cursor: pointer;
}
.radar-pulse {
fill: none;
stroke-width: 2px;
transform-origin: center;
}
.radar-dot {
transform-origin: center;
}
/* HQ Ping (Telangana / Hyderabad) - Glowing Orange Pulse */
.radar-hq .radar-pulse {
stroke: var(--accent) !important;
animation: radarPulseAnim 2.5s infinite ease-out;
}
.radar-hq .radar-dot {
fill: var(--accent) !important;
}
/* Served Ping (Subtle Molten Gold) */
.radar-served .radar-pulse {
stroke: var(--secondary) !important;
animation: radarPulseAnim 2.5s infinite ease-out;
animation-delay: 0.5s;
}
.radar-served .radar-dot {
fill: var(--secondary) !important;
}
@keyframes radarPulseAnim {
0% {
r: 3px;
opacity: 0.8;
}
100% {
r: 16px;
opacity: 0;
}
}
/* Trust & Verified Reviews Section */
.reviews-section {
padding: 6rem 5%;
background-color: var(--primary);
position: relative;
z-index: 2;
border-top: 1px solid var(--border-color);
}
.reviews-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 4rem;
max-width: 1600px;
margin: 0 auto;
align-items: center;
width: 100%;
}
@media (max-width: 992px) {
.reviews-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
}
.reviews-intro {
display: flex;
flex-direction: column;
justify-content: center;
}
.reviews-intro h3 {
color: var(--secondary);
font-size: 1.1rem;
letter-spacing: 2px;
margin-bottom: 1rem;
}
.reviews-intro h2 {
font-size: 2.8rem;
line-height: 1.2;
margin-bottom: 1.5rem;
color: var(--text-light);
}
.reviews-intro h2 span {
color: var(--secondary);
}
.reviews-intro p {
font-size: 1.1rem;
color: var(--text-muted);
margin-bottom: 2rem;
line-height: 1.6;
}
.reviews-badges {
display: flex;
gap: 1.5rem;
margin-top: 1rem;
}
@media (max-width: 768px) {
.reviews-badges {
flex-direction: column;
gap: 1rem;
}
}
.trust-badge-card {
background: var(--bg-dark-card);
border: 1px solid var(--border-color);
padding: 1.5rem;
border-radius: 8px;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: var(--shadow-premium);
flex: 1;
}
/* Interactive Clickable Review and Trust Cards */
.clickable-trust-card {
text-decoration: none !important;
color: inherit !important;
cursor: pointer;
transition: var(--transition-fast) !important;
}
.clickable-trust-card:hover {
transform: translateY(-4px) scale(1.02) !important;
border-color: var(--secondary) !important;
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25), var(--gold-glow) !important;
}
.clickable-review-card {
text-decoration: none !important;
color: inherit !important;
display: block;
cursor: pointer;
transition: var(--transition-fast) !important;
}
.clickable-review-card:hover {
transform: translateY(-4px) !important;
border-color: var(--secondary) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), var(--gold-glow) !important;
}
.trust-badge-logo {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.trust-badge-logo.indiamart {
color: #00A699; /* Indiamart Teal/Green */
}
.trust-badge-logo.justdial {
color: #FF5A5F; /* Justdial Orange-Red */
}
.rating-info {
display: flex;
flex-direction: column;
}
.rating-stars-small {
color: var(--secondary);
font-size: 0.9rem;
margin-bottom: 0.2rem;
letter-spacing: 1px;
}
.rating-score {
font-size: 0.9rem;
font-weight: 700;
color: var(--text-light);
}
/* Vertical Auto-Scroller Reviews Carousel */
.reviews-carousel-container {
background: var(--bg-dark-card);
border: 1px solid var(--border-color);
border-radius: 12px;
box-shadow: var(--shadow-premium);
padding: 2.5rem;
overflow-y: auto;
scroll-behavior: smooth;
height: 380px; /* Bounded height for reviews window */
position: relative;
}
/* Custom premium scrollbar for B2B Testimonials scroll container */
.reviews-carousel-container::-webkit-scrollbar {
width: 6px;
}
.reviews-carousel-container::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.02);
border-radius: 10px;
}
.reviews-carousel-container::-webkit-scrollbar-thumb {
background: var(--secondary); /* Brand Gold */
border-radius: 10px;
}
.reviews-carousel-container::-webkit-scrollbar-thumb:hover {
background: #E5A93C; /* Brighter gold hover */
}
.reviews-slider-track {
display: flex;
flex-direction: column;
gap: 2rem;
position: relative;
top: 0;
left: 0;
right: 0;
}
.review-item-card {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
padding: 2rem;
border-radius: 8px;
min-height: 160px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: background 0.3s ease, border-color 0.3s ease;
}
.review-item-card:hover {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.18);
}
.light-theme .review-item-card {
background: #FFFFFF;
border: 1.5px solid rgba(15, 23, 42, 0.10);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
.light-theme .review-item-card:hover {
border-color: rgba(15, 23, 42, 0.20);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.review-text {
font-size: 1.05rem;
font-style: italic;
color: var(--text-light);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.review-meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.review-author {
font-weight: 700;
color: var(--secondary);
font-family: var(--font-heading);
text-transform: uppercase;
font-size: 1rem;
letter-spacing: 0.5px;
}
.review-source {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--text-muted);
}
.source-dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
.source-dot.indiamart {
background-color: #00A699;
}
.source-dot.justdial {
background-color: #FF5A5F;
}
/* Premium Subpage Hero Background Clarity Overrides */
.subpage-hero .hero-bg {
filter: brightness(0.68) contrast(1.1) !important; /* Brighter for image clarity */
}
.subpage-hero .hero-overlay {
background: rgba(6, 15, 24, 0.35) !important; /* Slightly lighter for clarity */
}
/* ==========================================================================
GLOBAL CRO POPUP MODAL (ENQUIRE NOW)
========================================================================== */
.global-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(6, 10, 19, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
padding: 1.5rem;
}
.global-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.global-modal-card {
background: #FFFFFF;
width: 100%;
max-width: 500px;
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
overflow: hidden;
position: relative;
transform: translateY(30px) scale(0.95);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 1px solid rgba(255, 255, 255, 0.8);
display: flex;
flex-direction: column;
}
.global-modal-overlay.active .global-modal-card {
transform: translateY(0) scale(1);
}
.global-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 2rem 0.75rem 2rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.global-modal-title {
font-size: 1.8rem;
font-weight: 800;
color: #C8860A;
margin: 0;
font-family: 'Inter', sans-serif;
letter-spacing: -0.5px;
}
.global-modal-close {
background: none;
border: none;
cursor: pointer;
color: #94A3B8;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
border-radius: 50%;
}
.global-modal-close:hover {
color: #C8860A;
background-color: rgba(200, 134, 10, 0.08);
transform: scale(1.1);
}
.global-modal-body {
padding: 1.5rem 2rem 2rem 2rem;
}
.global-modal-form {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.global-modal-field {
display: flex;
flex-direction: column;
position: relative;
}
.global-modal-input,
.global-modal-select,
.global-modal-textarea {
width: 100%;
padding: 0.85rem 1.2rem;
border: 1px solid #E2E8F0;
border-radius: 12px;
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
color: #1E293B;
background-color: #FFFFFF;
transition: all var(--transition-fast);
}
.global-modal-input::placeholder,
.global-modal-textarea::placeholder {
color: #64748B;
opacity: 0.8;
}
.global-modal-input:focus,
.global-modal-select:focus,
.global-modal-textarea:focus {
border-color: #C8860A;
box-shadow: 0 0 0 3px rgba(200, 134, 10, 0.12);
outline: none;
}
.global-modal-textarea {
resize: none;
height: 110px;
}
.global-modal-submit-btn {
align-self: flex-start;
display: inline-flex;
align-items: stretch;
border: 2px solid #C8860A;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
background: none;
padding: 0;
transition: all var(--transition-fast);
}
.global-modal-submit-left {
padding: 0.75rem 1.5rem;
background: #FFFFFF;
color: #1E293B;
font-weight: 700;
font-size: 1.05rem;
font-family: 'Inter', sans-serif;
display: flex;
align-items: center;
transition: all var(--transition-fast);
}
.global-modal-submit-right {
padding: 0.75rem 1.25rem;
background: #C8860A;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
}
.global-modal-submit-right svg {
width: 18px;
height: 18px;
transition: transform var(--transition-fast);
}
.global-modal-submit-btn:hover {
box-shadow: 0 6px 20px rgba(200, 134, 10, 0.3);
border-color: #A46D08;
}
.global-modal-submit-btn:hover .global-modal-submit-left {
color: #A46D08;
}
.global-modal-submit-btn:hover .global-modal-submit-right {
background: #A46D08;
}
.global-modal-submit-btn:hover .global-modal-submit-right svg {
transform: translate(2px, -2px);
}
/* ==========================================================================
LIGHT THEME ENQUIRY FORM BRIGHT CONTRAST FIXES
========================================================================== */
.light-theme .enquiry-form-card .form-group input,
.light-theme .enquiry-form-card .form-group select,
.light-theme .enquiry-form-card .form-group textarea,
.light-theme .form-control {
background-color: #FFFFFF !important;
border-color: #CBD5E1 !important;
color: #0F172A !important;
}
.light-theme .enquiry-form-card .form-group input::placeholder,
.light-theme .enquiry-form-card .form-group textarea::placeholder,
.light-theme .form-control::placeholder {
color: #64748B !important;
opacity: 0.8;
}
.light-theme .enquiry-form-card .form-group input:focus,
.light-theme .enquiry-form-card .form-group select:focus,
.light-theme .enquiry-form-card .form-group textarea:focus,
.light-theme .form-control:focus {
background-color: #FFFFFF !important;
border-color: var(--secondary) !important;
box-shadow: 0 0 10px rgba(200, 134, 10, 0.15) !important;
}
/* Darker dropdown arrow for Light Theme - with strict non-repeating layouts */
.light-theme .enquiry-form-card .form-group select {
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
}
/* Floating labels contrast in Light Theme */
.light-theme .enquiry-form-card .form-group label {
color: #64748B !important;
}
.light-theme .enquiry-form-card .form-group input:focus ~ label,
.light-theme .enquiry-form-card .form-group select:focus ~ label,
.light-theme .enquiry-form-card .form-group select:valid ~ label,
.light-theme .enquiry-form-card .form-group textarea:focus ~ label,
.light-theme .enquiry-form-card .form-group:has(input:focus) label,
.light-theme .enquiry-form-card .form-group:has(input:not(:placeholder-shown)) label,
.light-theme .enquiry-form-card .form-group:has(select:focus) label,
.light-theme .enquiry-form-card .form-group:has(select:valid) label,
.light-theme .enquiry-form-card .form-group:has(textarea:focus) label,
.light-theme .enquiry-form-card .form-group:has(textarea:not(:placeholder-shown)) label {
color: var(--secondary) !important;
}
/* ==========================================================================
NEXT-LEVEL WHY US SECTION
========================================================================== */
.why-us-section {
position: relative;
padding: 6rem 0 12rem 0; /* Expanded bottom padding for overlap card clearance */
overflow: visible;
background-color: #0B0F19; /* Immersive dark background like hero */
}
.why-us-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-attachment: fixed;
filter: brightness(0.8) contrast(1.05) saturate(1.0); /* Brightened & premium cinematic color grading */
z-index: 1;
}
.why-us-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(11, 15, 25, 0.45) 0%, rgba(11, 15, 25, 0.8) 100%); /* Perfect readability gradient overlay */
z-index: 2;
}
.why-us-content {
position: relative;
z-index: 3;
}
/* Header layout: side-by-side flex grid */
.why-us-header-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 4rem;
margin-bottom: 4.5rem;
}
.why-us-title-block {
flex: 1.2;
display: flex;
flex-direction: column;
gap: 1rem;
}
.why-us-desc-block {
flex: 1;
padding-top: 1.5rem;
}
.why-us-desc-block p {
color: #F1F5F9; /* Enhanced light contrast color from #94A3B8 */
font-size: 1.15rem;
line-height: 1.8;
margin: 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95); /* Deep B2B contrast protection */
}
.why-us-desc-block p strong {
color: var(--secondary);
}
.why-us-tag {
align-self: flex-start;
display: inline-flex;
align-items: center;
padding: 0.4rem 1rem;
border-radius: 30px;
background: rgba(200, 134, 10, 0.12);
border: 1px solid rgba(200, 134, 10, 0.3);
color: var(--secondary);
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 1.5px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.why-us-title-block h2 {
font-size: 2.8rem;
font-weight: 900;
line-height: 1.25;
color: #FFFFFF;
letter-spacing: -0.5px;
margin: 0;
text-shadow: 0 4px 18px rgba(0, 0, 0, 0.95); /* Extremely readable deep drop-shadow */
}
.why-us-title-block h2 .light-text {
font-weight: 300;
display: block;
color: var(--secondary); /* Swapped from #CBD5E1 to stunning brand gold to highlight excellence */
text-shadow: 0 4px 15px rgba(0, 0, 0, 0.95);
}
/* Overlapping Featured Card styling */
.why-us-overlap-card {
background: #FFFFFF;
border-radius: 24px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
padding: 3rem 2rem 4rem 2rem;
margin-bottom: -15rem; /* Drives the premium overlap layout downwards */
position: relative;
z-index: 5;
border: 1px solid rgba(255, 255, 255, 0.8);
transition: all var(--transition-fast);
}
.why-us-overlap-card:hover {
box-shadow: 0 35px 80px rgba(0, 0, 0, 0.25);
transform: translateY(-5px);
}
.why-us-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
/* Individual features column layout */
.why-us-feature {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1.5rem 1rem;
position: relative;
}
/* Vertical boundary lines between features */
.why-us-feature:not(:last-child)::after {
content: '';
position: absolute;
right: -1rem;
top: 15%;
height: 70%;
width: 1px;
background: rgba(0, 0, 0, 0.08);
}
.why-us-feature-icon {
width: 65px;
height: 65px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(200, 134, 10, 0.1) !important;
border-radius: 50%;
color: #C8860A !important;
margin-bottom: 1.5rem;
transition: all var(--transition-fast);
}
.why-us-feature-icon svg {
width: 32px;
height: 32px;
stroke: #C8860A !important;
color: #C8860A !important;
}
.why-us-feature-icon svg path,
.why-us-feature-icon svg circle,
.why-us-feature-icon svg rect,
.why-us-feature-icon svg polygon,
.why-us-feature-icon svg line,
.why-us-feature-icon svg polyline {
stroke: #C8860A !important;
}
.why-us-feature:hover .why-us-feature-icon {
background: #C8860A !important;
color: #FFFFFF !important;
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 20px rgba(200, 134, 10, 0.3);
}
.why-us-feature:hover .why-us-feature-icon svg {
stroke: #FFFFFF !important;
color: #FFFFFF !important;
}
.why-us-feature:hover .why-us-feature-icon svg path,
.why-us-feature:hover .why-us-feature-icon svg circle,
.why-us-feature:hover .why-us-feature-icon svg rect,
.why-us-feature:hover .why-us-feature-icon svg polygon,
.why-us-feature:hover .why-us-feature-icon svg line,
.why-us-feature:hover .why-us-feature-icon svg polyline {
stroke: #FFFFFF !important;
}
.why-us-feature h3 {
font-size: 1.15rem;
font-weight: 800;
color: #0F172A; /* Slate-dark text matching screenshot */
margin: 0;
line-height: 1.4;
font-family: 'Inter', sans-serif;
letter-spacing: -0.2px;
}
/* overlapping Learn More CTA layout */
.why-us-cta-container {
position: absolute;
bottom: -22px; /* Pulls button centered overlapping card boundary */
left: 50%;
transform: translateX(-50%);
}
.why-us-learn-more-btn {
display: inline-flex;
align-items: stretch;
border: 2px solid #C8860A;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
background: none;
padding: 0;
box-shadow: 0 10px 25px rgba(200, 134, 10, 0.2);
transition: all var(--transition-fast);
white-space: nowrap;
}
.why-us-btn-left {
padding: 0.75rem 1.5rem;
background: #FFFFFF;
color: #1E293B;
font-weight: 700;
font-size: 1.05rem;
font-family: 'Inter', sans-serif;
display: flex;
align-items: center;
transition: all var(--transition-fast);
}
.why-us-btn-right {
padding: 0.75rem 1.25rem;
background: #C8860A;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
}
.why-us-btn-right svg {
width: 18px;
height: 18px;
transition: transform var(--transition-fast);
}
.why-us-learn-more-btn:hover {
box-shadow: 0 12px 30px rgba(200, 134, 10, 0.35);
border-color: #a36d08;
transform: translateY(-2px);
}
.why-us-learn-more-btn:hover .why-us-btn-left {
color: #a36d08;
}
.why-us-learn-more-btn:hover .why-us-btn-right {
background: #a36d08;
}
.why-us-learn-more-btn:hover .why-us-btn-right svg {
transform: translate(2px, -2px);
}
/* Responsive adjustments for Why Us Section */
@media (max-width: 992px) {
.why-us-header-row {
flex-direction: column;
gap: 1.5rem;
margin-bottom: 3.5rem;
}
.why-us-desc-block {
padding-top: 0;
}
.why-us-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.why-us-feature:not(:last-child)::after {
display: none;
}
.why-us-section {
padding: 5rem 0 15rem 0;
}
}
@media (max-width: 576px) {
.why-us-title-block h2 {
font-size: 2.2rem;
}
.why-us-section {
padding: 4rem 0 18rem 0;
}
.why-us-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.why-us-overlap-card {
padding: 2rem 1.25rem 5rem 1.25rem;
overflow: visible;
margin-left: 1rem;
margin-right: 1rem;
}
.why-us-cta-container {
position: absolute;
bottom: -24px;
left: 50%;
transform: translateX(-50%);
width: max-content;
}
.why-us-learn-more-btn {
white-space: nowrap;
}
.why-us-btn-left {
font-size: 0.95rem;
padding: 0.7rem 1.25rem;
}
.why-us-btn-right {
padding: 0.7rem 1rem;
}
}
/* ==========================================================================
HERO OVERLAP & RESPONSIVE INSULATION FIXES
========================================================================== */
/* Target laptop heights and compact viewports (height <= 850px or width <= 1366px) */
@media (max-height: 850px), (max-width: 1366px) {
.hero {
min-height: 550px !important; /* Allow compact sizing without breaking layout */
}
.hero-slide {
align-items: center !important; /* Center content symmetrically within clear visual area */
padding-top: calc(140px + 1vh) !important; /* Premium header clearance */
padding-bottom: calc(105px + 1vh) !important; /* Optimized bottom padding to naturally fill empty space */
}
.hero-content {
padding: 0 2rem !important; /* Reset paddings to allow perfect flex centering */
max-width: 850px !important; /* Keep text perfectly readable and spacious */
}
.hero-badge {
font-size: 0.95rem !important;
padding: 0.45rem 1.1rem !important;
margin-bottom: 1.5rem !important;
}
.hero h1, .hero-content h1 {
font-size: 3.8rem !important; /* Enhanced font size to act as a spectacular visual filler */
line-height: 1.1 !important;
margin-bottom: 1.25rem !important;
gap: 0.35rem 0.75rem !important;
}
.hero-subheadline {
font-size: 1.25rem !important; /* Enhanced subheadline size to enrich visual depth */
margin-bottom: 2rem !important;
max-width: 650px !important;
}
.hero-actions {
gap: 1.25rem !important;
}
.hero-actions .btn {
padding: 0.85rem 1.8rem !important;
font-size: 0.98rem !important;
}
}
/* Extra tight viewports (height <= 720px) */
@media (max-height: 720px) {
.hero-slide {
padding-top: 120px !important; /* Scale top/bottom clearances tightly for extremely short screens while clearing 120px header */
padding-bottom: 100px !important; /* Precise mathematical sweet spot for extremely short screens */
}
.hero h1, .hero-content h1 {
font-size: 3.0rem !important;
margin-bottom: 0.85rem !important;
}
.hero-subheadline {
font-size: 1.1rem !important;
margin-bottom: 1.5rem !important;
}
.hero-badge {
font-size: 0.9rem !important;
padding: 0.35rem 0.9rem !important;
margin-bottom: 1rem !important;
}
}
/* Prevent slider dot navigation or arrows from colliding with buttons */
@media (max-height: 850px) {
.slider-controls {
bottom: 2.5rem !important; /* Keep slider controls tightly tucked at the bottom */
}
}
/* ==========================================================================
B2B FAQ ACCORDION SECTION DESIGN
========================================================================== */
.faq-section {
padding: 7rem 5%;
background: var(--bg-dark);
position: relative;
border-top: 1px solid var(--border-color);
}
.faq-grid {
max-width: 950px;
margin: 3.5rem auto 0 auto;
display: flex;
flex-direction: column;
gap: 1.25rem;
width: 100%;
}
.faq-item {
background: var(--bg-dark-card);
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
transition: var(--transition-smooth);
box-shadow: var(--shadow-premium);
}
.faq-item:hover {
border-color: var(--secondary);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), var(--gold-glow);
transform: translateY(-2px);
}
.faq-question {
padding: 1.6rem 2.2rem;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
transition: var(--transition-fast);
gap: 1.5rem;
}
.faq-question h3 {
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: 700;
color: var(--text-light);
margin: 0;
letter-spacing: 1px;
text-transform: uppercase;
}
.faq-toggle-icon {
color: var(--secondary);
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
flex-shrink: 0;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s ease;
padding: 0 2.2rem;
border-top: 1px solid transparent;
}
.faq-item.active {
border-color: var(--secondary);
}
.faq-item.active .faq-answer {
max-height: 250px; /* Safe expanded limit */
padding: 1.6rem 2.2rem;
border-top: 1px solid var(--border-color);
}
.faq-item.active .faq-toggle-icon {
transform: rotate(45deg);
color: var(--accent); /* Rotates plus symbol into active X state */
}
.faq-answer p {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.65;
color: var(--text-muted);
margin: 0;
}
@media (max-width: 768px) {
.faq-section {
padding: 5rem 5%;
}
.faq-question {
padding: 1.25rem 1.5rem;
}
.faq-question h3 {
font-size: 1.15rem;
}
.faq-item.active .faq-answer {
padding: 1.25rem 1.5rem;
}
}
/* ==========================================================================
ULTIMATE MOBILE RESPONSIVE OPTIMIZATION & SPECIFICITY OVERRIDES
========================================================================== */
/* Apply global viewport and scroll locks for mobile devices */
html, body {
max-width: 100%;
overflow-x: hidden !important;
position: relative;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: border-box !important;
}
/* Prevent horizontal overflow on major layout panels */
section, header, footer, main, div, .container, .wrapper {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Force standard grid layouts to fall back to flawless single column on mobile */
@media (max-width: 600px) {
.features-overlap-grid,
.why-grid,
.products-grid,
.stats-grid,
.footer-grid,
.why-us-grid,
.about-snapshot,
.catalog-layout,
.product-details-grid,
.about-grid {
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
width: 100% !important;
max-width: 100% !important;
}
.overlap-card,
.why-card,
.product-card,
.stat-card,
.why-us-overlap-card {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Prevent clipping on specification cards and buttons */
.product-card-inner {
padding: 1.5rem 1.2rem !important;
width: 100% !important;
box-sizing: border-box !important;
}
.product-card .btn,
.products-grid .btn {
width: 100% !important;
display: block !important;
text-align: center !important;
padding: 0.85rem 1rem !important;
font-size: 0.95rem !important;
box-sizing: border-box !important;
white-space: nowrap !important;
}
}
/* B2B Enquiry Form Grid Adjustments */
@media (max-width: 768px) {
.form-grid {
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
.form-group.full-width {
grid-column: span 1 !important;
}
}
/* Proud Stockists Brand Bar Centering on Mobile */
@media (max-width: 768px) {
.brand-bar {
padding: 2rem 5% !important;
}
.brand-bar-inner {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 1.5rem !important;
width: 100% !important;
}
.brand-bar-text {
width: 100% !important;
text-align: center !important;
font-size: 1.15rem !important;
margin-bottom: 0.25rem !important;
}
.brand-bar-logos {
justify-content: center !important;
align-items: center !important;
width: 100% !important;
gap: 1rem !important;
}
.brand-bar-logo-card {
width: 200px !important;
height: 60px !important;
margin: 0 auto !important;
padding: 0.4rem 1rem !important;
}
}
/* Specificity Bypass media query for Hero Crowding and Overlaps */
@media (max-width: 576px) {
/* Scale down hero titles beautifully to avoid massive congested layout overlays */
.hero h1,
.hero-content h1,
.hero-slide.active h1 {
font-size: 2.2rem !important;
line-height: 1.2 !important;
margin-bottom: 1rem !important;
letter-spacing: 0.5px !important;
gap: 0.2rem 0.4rem !important;
}
.hero-subheadline,
.hero-slide.active .hero-subheadline {
font-size: 1.05rem !important;
line-height: 1.5 !important;
margin-bottom: 1.5rem !important;
max-width: 100% !important;
}
.hero-badge,
.hero-slide.active .hero-badge {
font-size: 0.85rem !important;
padding: 0.35rem 0.85rem !important;
margin-bottom: 1rem !important;
}
/* Stack Hero Call to Actions vertically to fit comfortably on narrow screens */
.hero-actions,
.hero-slide.active .hero-actions {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 320px !important;
margin: 0 auto !important;
gap: 0.75rem !important;
opacity: 1 !important;
transform: none !important;
}
.hero-actions .btn,
.hero-actions .btn-secondary {
width: 100% !important;
display: block !important;
text-align: center !important;
margin: 0 !important;
padding: 0.8rem 1.5rem !important;
font-size: 0.95rem !important;
}
/* Adjust slide clearances and height for mobile viewports */
.hero {
min-height: 600px !important;
height: auto !important;
}
.hero-slide {
padding-top: 110px !important;
padding-bottom: 110px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 600px !important;
}
.hero-content {
padding: 0 1.25rem !important;
max-width: 100% !important;
}
/* Lower slider dot controls on mobile viewports to prevent interaction blocks */
.slider-controls {
bottom: 2rem !important;
}
}
/* Ensure absolute safety for marquees and overflow zones */
.partners-marquee-container,
.testimonials-marquee-wrapper,
.marquee-wrapper,
.testimonials-marquee-row {
max-width: 100% !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
/* Light Theme Mobile Navigation Toggle Visibility Fix */
.light-theme .mobile-nav-toggle span {
background: #0F172A !important;
}
.light-theme .header.scrolled .mobile-nav-toggle span {
background: #0F172A !important;
}
/* ==========================================================================
COMPREHENSIVE ALL-DEVICE MOBILE RESPONSIVE SYSTEM
Breakpoints:
≤768px → Tablets & large phones (iPad mini portrait, Android tablets)
≤600px → Standard phones (most Android, iPhone 8 Plus)
≤480px → Medium phones (iPhone 12/13/14, Pixel)
≤375px → Small phones (iPhone SE, Galaxy S8)
========================================================================== */
/* ── Dynamic Viewport Height: Safari address bar safe (mobile ONLY) ── */
/* IMPORTANT: nav-menu height must ONLY apply on mobile. On desktop the nav
is a horizontal bar and setting height: 100dvh breaks the entire layout. */
@media (max-width: 768px) {
@supports (height: 100dvh) {
.hero { height: 100dvh; min-height: 580px; }
.hero-slide { min-height: 100dvh; }
.nav-menu { height: 100dvh; }
}
@supports (height: 100svh) {
.hero { height: 100svh; min-height: 580px; }
.hero-slide { min-height: 100svh; }
.nav-menu { height: 100svh; }
}
}
/* ==========================================================================
≤ 768px — Tablets & Large Phones
========================================================================== */
@media (max-width: 768px) {
/* ── Global ── */
html, body { overflow-x: hidden !important; }
.section { padding: 4rem 5%; }
.container { padding: 0 5%; }
.section-header { margin-bottom: 2.5rem; }
.section-header h2 { font-size: 2.4rem; }
.section-header p { font-size: 1rem; }
/* ── Header ── */
.top-bar { display: none !important; }
.header {
padding: 0 !important; /* Prevent double-padding layout conflicts on mobile headers */
}
.nav-container {
padding: 0.8rem 4% !important;
gap: 0.5rem !important; /* Premium micro-gap spacing to prevent button overlapping */
flex-wrap: nowrap !important;
align-items: center !important;
}
.nav-container nav {
display: contents !important; /* Elegant modern layout: removes wrapper from flex calculations but keeps .nav-menu functional */
}
.dms-logo {
gap: 8px;
flex-shrink: 1 !important;
min-width: 0;
margin-right: auto !important; /* Perfect push of logo to left and B2B controls to right */
}
.dms-logo .dms-mark { width: 36px !important; height: 36px !important; flex-shrink: 0; }
.dms-logo .dms-name { font-size: 1.1rem !important; white-space: nowrap; }
.dms-logo .dms-tag { display: none !important; }
.nav-phone {
width: 38px !important; height: 38px !important;
padding: 0 !important;
border-radius: 50% !important;
margin-left: 0 !important; /* Rely on container gap layout spacing */
flex-shrink: 0 !important;
}
.nav-phone span { display: none !important; }
.nav-phone svg { width: 18px !important; height: 18px !important; margin: 0 !important; }
.theme-toggle {
width: 38px !important; height: 38px !important;
padding: 0 !important;
flex-shrink: 0 !important;
margin-left: 0 !important; /* Rely on container gap layout spacing */
}
.mobile-nav-toggle {
display: block !important;
flex-shrink: 0 !important;
margin-left: 0 !important; /* Rely on container gap layout spacing */
}
.nav-menu {
position: fixed;
top: 0; right: -100%;
width: 75vw; max-width: 300px;
height: 100vh;
background: var(--bg-dark);
border-left: 2px solid var(--secondary);
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.75rem;
padding: 4rem 2rem 2rem;
transition: var(--transition-smooth);
box-shadow: var(--shadow-premium);
z-index: 1050;
}
.nav-menu.open { right: 0; }
.nav-item a { font-size: 1.35rem; padding: 0.5rem 0; }
/* ── Hero ── */
.hero { min-height: 580px; }
.hero-slide {
padding-top: 100px;
padding-bottom: 120px;
min-height: 580px;
align-items: center;
justify-content: center;
}
.hero-content { padding: 0 1.5rem; max-width: 100%; width: 100%; margin-top: 45px !important; }
.hero h1, .hero-headline-split {
font-size: 2.8rem;
line-height: 1.15;
margin-bottom: 1rem;
gap: 0.2rem 0.5rem;
}
.hero-subheadline {
font-size: 1.05rem;
line-height: 1.55;
margin-bottom: 1.5rem;
max-width: 100%;
}
.hero-badge {
font-size: 0.85rem;
padding: 0.35rem 0.9rem;
margin-bottom: 1rem;
}
.hero-actions {
flex-direction: column;
align-items: center;
width: 100%;
max-width: 360px;
margin: 0 auto;
gap: 0.75rem;
}
.hero-actions .btn {
width: 100%;
padding: 0.9rem 1.5rem;
font-size: 1rem;
text-align: center;
}
.slider-controls { bottom: 2rem; }
.slider-arrow { width: 42px; height: 42px; }
/* ── Features Overlap ── */
.features-overlap-section {
margin-top: 0 !important;
padding: 2rem 5%;
}
.features-overlap-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 1.25rem;
}
.overlap-card { padding: 1.75rem 1.5rem; }
/* ── About Snapshot ── */
.about-snapshot {
grid-template-columns: 1fr !important;
gap: 2.5rem;
}
.about-image-collage { height: 380px; }
/* ── Stats Grid ── */
.stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem; }
/* ── Products Grid ── */
.products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem; }
/* ── Product Tabs ── */
.product-tabs {
display: flex;
gap: 0.75rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
justify-content: flex-start;
padding-bottom: 0.5rem;
scrollbar-width: none;
margin-bottom: 2rem;
}
.product-tabs::-webkit-scrollbar { display: none; }
.tab-btn { flex-shrink: 0; white-space: nowrap; font-size: 0.95rem; padding: 0.6rem 1.25rem; }
/* ── Why Grid ── */
.why-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem; }
.why-card { padding: 2rem 1.5rem; }
/* ── Coverage ── */
.coverage-layout { grid-template-columns: 1fr !important; gap: 2.5rem; text-align: center; }
/* ── Catalog / Products Page ── */
.catalog-layout { grid-template-columns: 1fr !important; gap: 2rem; }
.catalog-sidebar { padding: 1.5rem; height: auto; }
.sidebar-title { font-size: 1.1rem; margin-bottom: 1rem; }
.sidebar-menu {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 0.5rem !important;
}
.sidebar-menu-item a {
display: inline-block !important;
padding: 0.4rem 1rem !important;
border: 1px solid var(--border-color) !important;
border-radius: 20px !important;
font-size: 0.85rem !important;
white-space: nowrap !important;
background: var(--bg-dark) !important;
}
.sidebar-menu-item.active a,
.sidebar-menu-item a:hover {
background: var(--secondary) !important;
color: #fff !important;
border-color: var(--secondary) !important;
}
/* ── Product Details ── */
.product-details-grid { grid-template-columns: 1fr !important; gap: 2.5rem; }
/* ── Subpage Hero ── */
.subpage-hero {
min-height: 260px;
padding-top: 90px;
height: auto;
}
.subpage-hero h1 { font-size: 2.8rem; margin-bottom: 0.5rem; }
.subpage-breadcrumbs { font-size: 0.9rem; letter-spacing: 1.5px; }
/* ── Enquiry / Map Section ── */
.enquiry-map-container { grid-template-columns: 1fr !important; gap: 2.5rem; }
.enquiry-form-card { padding: 2.5rem; }
.enquiry-header h2 { font-size: 2.2rem; }
.form-group-row { grid-template-columns: 1fr !important; gap: 1.25rem; }
/* ── Contact ── */
.contact-layout { grid-template-columns: 1fr !important; gap: 3rem; }
.map-embed { height: 300px; }
.map-embed-wrapper { margin-top: 2.5rem; }
/* ── Reviews ── */
.reviews-grid { grid-template-columns: 1fr !important; gap: 2.5rem; }
.reviews-carousel-container {
height: auto !important;
max-height: 380px !important;
padding: 1.5rem !important;
scroll-behavior: auto !important;
}
.review-item-card { padding: 1.5rem !important; }
.reviews-badges { flex-direction: column; gap: 1rem; }
/* ── Brand Bar ── */
.brand-bar { padding: 2rem 5% !important; }
.brand-bar-inner {
flex-direction: column !important;
align-items: center !important;
gap: 1.5rem !important;
text-align: center !important;
}
.brand-bar-logos {
justify-content: center !important;
gap: 1rem !important;
flex-wrap: wrap !important;
}
.brand-bar-logo-card { width: 180px !important; height: 58px !important; }
/* ── Testimonials ── */
.testimonials-grid { grid-template-columns: 1fr !important; }
.testimonial-marquee-card { width: 320px; padding: 2rem; }
/* ── Timeline ── */
.timeline::before, .timeline-line-progress { left: 24px !important; transform: none; }
.timeline-item { width: 100%; left: 0 !important; padding-left: 3.25rem !important; padding-right: 0 !important; margin-bottom: 3.5rem !important; }
.timeline-item:nth-child(odd) .timeline-badge,
.timeline-item:nth-child(even) .timeline-badge { left: 12px !important; right: auto !important; }
.timeline-item:nth-child(odd) .timeline-content,
.timeline-item:nth-child(even) .timeline-content {
transform: translateY(20px) !important;
opacity: 0 !important;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}
.timeline-item.visible .timeline-content,
.timeline-item.active-milestone .timeline-content {
transform: translateY(0) !important;
opacity: 1 !important;
}
/* ── CTA Banner ── */
.cta-banner { padding: 3.5rem 5%; }
.cta-banner h2 { font-size: 2.4rem; }
.cta-banner p { font-size: 1.05rem; }
.cta-actions { flex-direction: column; align-items: center; gap: 1rem; }
.cta-actions .btn { width: 100%; max-width: 360px; text-align: center; }
/* ── Footer ── */
.footer { padding: 4rem 5% 2rem; }
.footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2.5rem !important; }
.footer-brand { grid-column: span 2; }
.footer-bottom { flex-direction: column !important; text-align: center !important; gap: 1rem !important; }
.stockist-badge { text-align: center !important; font-size: 0.8rem !important; line-height: 1.6 !important; }
/* ── Forms ── */
.form-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
.form-group.full-width { grid-column: span 1 !important; }
.quote-form-card { padding: 2rem; }
/* ── Floating elements ── */
.floating-sidebar {
bottom: 20px;
top: auto;
right: 15px;
transform: none;
flex-direction: row;
gap: 0.5rem;
}
.sidebar-item {
border-radius: 50%;
border-right: 1.5px solid var(--border-color);
width: 46px; height: 46px;
justify-content: center;
padding: 0;
}
.sidebar-item:hover { width: 46px; padding-right: 0; }
.sidebar-item .action-label { display: none; }
.floating-whatsapp { bottom: 90px; right: 18px; width: 54px; height: 54px; }
.whatsapp-icon { width: 28px; height: 28px; }
}
/* ==========================================================================
≤ 600px — Standard Phones
========================================================================== */
@media (max-width: 600px) {
.section { padding: 3rem 4.5%; }
.section-header h2 { font-size: 2.1rem; }
.container { padding: 0 4.5%; }
/* ── Header ── */
.nav-container { padding: 0.75rem 4% !important; gap: 0.5rem !important; }
.dms-logo .dms-mark { width: 32px !important; height: 32px !important; }
.dms-logo .dms-name { font-size: 1.05rem !important; }
.nav-phone { width: 36px !important; height: 36px !important; }
.theme-toggle { width: 36px !important; height: 36px !important; }
/* ── Hero ── */
.hero { min-height: 100svh; height: 100svh; }
.hero-slide { padding-top: 90px; padding-bottom: 100px; min-height: 100svh; }
.hero h1, .hero-headline-split { font-size: 2.4rem; }
.hero-subheadline { font-size: 1rem; }
.hero-actions { max-width: 100%; padding: 0 0.5rem; }
/* ── Features ── */
.features-overlap-grid { grid-template-columns: 1fr !important; gap: 1rem; }
.overlap-card { padding: 1.5rem 1.25rem; }
.overlap-card h4 { font-size: 1.2rem; }
/* ── About ── */
.about-image-collage { height: 300px; }
.about-bullets li { font-size: 1.05rem; }
.about-experience-badge { padding: 0.9rem 1.2rem; }
.about-experience-badge .badge-num { font-size: 1.8rem; }
/* ── Stats ── */
.stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
.stat-card { padding: 1.75rem 1rem; }
.stat-number { font-size: 2.8rem; }
.stat-label { font-size: 1rem; letter-spacing: 1px; }
/* ── Products ── */
.products-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
.product-card-inner { padding: 1.25rem 1.1rem; }
.product-card h3 { font-size: 1.4rem; }
.product-card .btn { padding: 0.75rem; font-size: 0.95rem; }
.product-image-container { height: 180px; }
/* ── Why ── */
.why-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
.why-card { padding: 2rem 1.5rem; }
/* ── Subpage Hero ── */
.subpage-hero { min-height: 220px; padding-top: 80px; }
.subpage-hero h1 { font-size: 2.2rem; }
.subpage-breadcrumbs { font-size: 0.85rem; letter-spacing: 1px; }
/* ── Enquiry form ── */
.enquiry-form-card { padding: 2rem 1.5rem; }
.enquiry-header h2 { font-size: 2rem; }
.enquiry-map-section { padding: 3rem 4.5%; }
/* ── Contact method cards ── */
.contact-method-card { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 1.75rem; }
.contact-method-icon { width: 50px; height: 50px; }
/* ── Timeline ── */
.timeline-content { padding: 1.75rem; }
.timeline-section { padding: 4rem 4.5%; }
/* ── Reviews ── */
.reviews-carousel-container { max-height: 340px !important; }
/* ── CTA ── */
.cta-banner { padding: 3rem 5%; }
.cta-banner h2 { font-size: 2rem; }
.cta-banner p { font-size: 1rem; margin-bottom: 1.75rem; }
/* ── Brand bar ── */
.brand-bar-logos {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.75rem !important;
justify-items: center !important;
width: 100% !important;
}
.brand-bar-logo-card { width: 100% !important; max-width: 170px !important; height: 54px !important; }
/* ── Footer ── */
.footer { padding: 3rem 4.5% 1.75rem; }
.footer-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
.footer-brand { grid-column: span 1; }
.footer-column h3 { font-size: 1.15rem; margin-bottom: 1.25rem !important; }
/* ── Quote form ── */
.quote-form-card { padding: 1.75rem; }
.quote-form-card h3 { font-size: 1.8rem; }
/* ── Marquee ── */
.testimonials-marquee-wrapper { padding: 1.5rem 0; }
.testimonial-marquee-card { width: 290px; padding: 1.75rem; }
/* ── Floating ── */
.floating-whatsapp { bottom: 85px; right: 16px; width: 50px; height: 50px; }
}
/* ==========================================================================
≤ 480px — Medium Phones (iPhone 12/13/14, Pixel 5/6)
========================================================================== */
@media (max-width: 480px) {
.section { padding: 2.75rem 4%; }
.section-header h2 { font-size: 1.9rem; }
.section-header p { font-size: 0.95rem; }
.container { padding: 0 4%; }
/* ── Header ── */
.theme-toggle { width: 36px; height: 36px; padding: 0.3rem; }
.mobile-nav-toggle { width: 26px; height: 20px; }
.mobile-nav-toggle span { height: 2.5px; }
.mobile-nav-toggle span:nth-child(1) { top: 0; }
.mobile-nav-toggle span:nth-child(2) { top: 8px; }
.mobile-nav-toggle span:nth-child(3) { top: 16px; }
.mobile-nav-toggle.open span:nth-child(1) { transform: rotate(45deg); top: 8px; }
.mobile-nav-toggle.open span:nth-child(3) { transform: rotate(-45deg); top: 8px; }
.nav-menu { width: 85vw; padding: 5rem 1.75rem 2rem; }
.nav-item a { font-size: 1.3rem; }
/* ── Hero ── */
.hero-slide { padding-top: 85px; padding-bottom: 90px; }
.hero-content { padding: 0 0.75rem; }
.hero h1, .hero-headline-split { font-size: 2.1rem; letter-spacing: 0.5px; }
.hero-badge { font-size: 0.78rem; padding: 0.3rem 0.75rem; margin-bottom: 0.75rem; }
.hero-subheadline { font-size: 0.95rem; margin-bottom: 1.25rem; }
.hero-actions { gap: 0.65rem; }
.hero-actions .btn { padding: 0.8rem 1rem; font-size: 0.9rem; }
.slider-controls { bottom: 1rem; left: 2.5%; right: 2.5%; }
.slider-arrow { width: 38px; height: 38px; }
.slider-dot { width: 8px; height: 8px; }
.slider-dot.active { width: 18px; }
/* ── Features overlap ── */
.features-overlap-section { padding: 1.5rem 4%; }
.overlap-card { padding: 1.4rem 1.1rem; }
.overlap-card h4 { font-size: 1.15rem; }
.overlap-card p { font-size: 0.88rem; }
.overlap-card-icon { width: 44px; height: 44px; }
/* ── About ── */
.about-image-collage { height: 260px; }
.about-img-box.img-primary { height: 200px; width: 68%; }
.about-img-box.img-secondary { height: 160px; width: 55%; }
.about-experience-badge { left: 5px; bottom: 5px; padding: 0.75rem 1rem; }
.about-experience-badge .badge-num { font-size: 1.6rem; }
.about-experience-badge .badge-text { font-size: 0.7rem; }
.about-bullets li { font-size: 1rem; }
.about-link { font-size: 1.05rem; }
/* ── Stats ── */
.stat-number { font-size: 2.4rem; }
.stat-label { font-size: 0.9rem; letter-spacing: 0.75px; }
/* ── Products ── */
.product-card { padding: 1.25rem; }
.product-card-inner { padding: 1rem !important; transform: none; }
.product-card h3 { font-size: 1.3rem; }
.product-image-container { height: 160px; }
.product-card .btn { font-size: 0.9rem; padding: 0.7rem; }
.tab-btn { font-size: 0.88rem; padding: 0.5rem 1rem; }
/* ── Why ── */
.why-card { padding: 1.75rem 1.25rem; }
.why-card h3 { font-size: 1.25rem; }
.why-icon-container { width: 58px; height: 58px; margin-bottom: 1.5rem; }
/* ── Reviews ── */
.reviews-intro h2 { font-size: 2rem; }
.reviews-badges { flex-direction: column; gap: 0.75rem; }
.trust-badge-card { padding: 1rem 1.25rem; }
.reviews-carousel-container { max-height: 320px !important; padding: 1rem !important; }
.review-item-card { padding: 1.25rem !important; }
.review-text { font-size: 0.9rem; line-height: 1.55; }
/* ── Subpage hero ── */
.subpage-hero { min-height: 200px; padding-top: 75px; }
.subpage-hero h1 { font-size: 1.9rem; }
/* ── Enquiry form ── */
.enquiry-form-card { padding: 1.75rem 1.25rem; }
.enquiry-header h2 { font-size: 1.85rem; }
.enquiry-map-section { padding: 2.75rem 4%; }
/* ── Contact ── */
.contact-method-card { padding: 1.1rem; gap: 0.85rem; }
.contact-method-icon { width: 42px; height: 42px; flex-shrink: 0; }
.contact-method-icon svg { width: 19px; height: 19px; }
.contact-method-details { min-width: 0; overflow: hidden; }
.contact-method-details h4 { font-size: 0.95rem; margin-bottom: 0.2rem; }
.contact-method-details p { font-size: 0.85rem; word-break: break-word; overflow-wrap: break-word; line-height: 1.5; }
.contact-method-details a { font-size: 0.82rem !important; }
.contact-info-panel { gap: 0.85rem; }
.map-embed { height: 240px; }
/* ── Timeline ── */
.timeline-content { padding: 1.5rem; }
.timeline-content h3 { font-size: 1.5rem; }
.timeline-content h4 { font-size: 1.1rem; }
.timeline-section { padding: 3rem 4%; }
/* ── CTA ── */
.cta-banner { padding: 2.5rem 4%; }
.cta-banner h2 { font-size: 1.8rem; }
.cta-banner p { font-size: 0.95rem; }
/* ── Brand bar ── */
.brand-bar { padding: 1.75rem 4% !important; }
.brand-bar-logos { gap: 0.6rem !important; }
.brand-bar-logo-card { max-width: 150px !important; height: 50px !important; padding: 0.4rem 0.65rem !important; }
/* ── Footer ── */
.footer { padding: 2.5rem 4% 1.5rem; }
.footer-grid { gap: 1.75rem !important; }
.footer-column h3 { font-size: 1.1rem; }
.footer-links li a { font-size: 0.9rem; }
.footer-contact-item { font-size: 0.9rem; }
.footer-bottom { padding-top: 1.5rem; font-size: 0.8rem; gap: 0.75rem !important; }
.stockist-badge { font-size: 0.72rem !important; letter-spacing: 1px !important; }
/* ── Quote form ── */
.quote-form-card { padding: 1.5rem; }
.quote-form-card h3 { font-size: 1.6rem; }
.form-control { padding: 0.75rem 1rem; font-size: 0.95rem; }
/* ── Floating ── */
.floating-whatsapp { bottom: 80px; right: 14px; width: 48px; height: 48px; }
.whatsapp-icon { width: 26px; height: 26px; }
.floating-sidebar { bottom: 14px; right: 12px; gap: 0.4rem; }
.sidebar-item { width: 42px; height: 42px; }
}
/* ==========================================================================
≤ 375px — Small Phones (iPhone SE, Galaxy S8)
========================================================================== */
@media (max-width: 375px) {
.section { padding: 2.25rem 3.5%; }
.section-header h2 { font-size: 1.7rem; }
.container { padding: 0 3.5%; }
/* ── Header ── */
.nav-container { padding: 0.6rem 3%; }
.dms-logo .dms-mark { width: 26px; height: 26px; }
.dms-logo .dms-name { font-size: 0.92rem; }
.nav-phone { width: 32px; height: 32px; }
.nav-phone svg { width: 14px; height: 14px; }
.theme-toggle { width: 32px; height: 32px; }
.mobile-nav-toggle { width: 22px; height: 18px; }
.nav-menu { width: 90vw; }
/* ── Hero ── */
.hero-slide { padding-top: 75px; padding-bottom: 80px; }
.hero-content { padding: 0 0.5rem; }
.hero h1, .hero-headline-split { font-size: 1.85rem; line-height: 1.15; }
.hero-badge { font-size: 0.72rem; padding: 0.28rem 0.65rem; }
.hero-subheadline { font-size: 0.88rem; line-height: 1.5; }
.hero-actions .btn { padding: 0.75rem 0.85rem; font-size: 0.85rem; }
/* ── Features ── */
.overlap-card { padding: 1.2rem 1rem; }
.overlap-card h4 { font-size: 1.1rem; }
/* ── Stats ── */
.stat-card { padding: 1.25rem 0.75rem; }
.stat-number { font-size: 2.1rem; }
.stat-label { font-size: 0.82rem; }
/* ── Products ── */
.product-image-container { height: 145px; }
.product-card h3 { font-size: 1.2rem; }
.product-card p { font-size: 0.88rem; }
/* ── Section headers ── */
.cta-banner h2 { font-size: 1.6rem; }
.subpage-hero h1 { font-size: 1.75rem; }
.enquiry-header h2 { font-size: 1.7rem; }
/* ── Timeline ── */
.timeline-content { padding: 1.25rem; }
.timeline-content h3 { font-size: 1.35rem; }
/* ── Footer ── */
.footer { padding: 2rem 3.5% 1.25rem; }
.footer-grid { gap: 1.5rem !important; }
/* ── Brand bar ── */
.brand-bar-logo-card { max-width: 130px !important; height: 46px !important; }
/* ── Floating ── */
.floating-whatsapp { bottom: 75px; right: 12px; width: 44px; height: 44px; }
.sidebar-item { width: 38px; height: 38px; }
}
/* ==========================================================================
GLOBAL SAFETY OVERRIDES (apply at all mobile widths)
========================================================================== */
@media (max-width: 768px) {
/* Prevent horizontal scroll — exclude SVG/img so logos don't collapse */
*:not(svg):not(img):not(video):not(iframe), *::before, *::after {
max-width: 100%;
box-sizing: border-box;
}
img, video { max-width: 100% !important; }
/* SVGs scale with their container but don't get a hard max-width that collapses them */
svg { overflow: visible; }
/* Kill 3D transforms that break mobile layout */
.product-card-inner { transform: none !important; }
/* Spec table — allow horizontal scroll inside a contained box */
.spec-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec-table th, .spec-table td { padding: 0.75rem 1rem; font-size: 0.9rem; white-space: nowrap; }
/* Marquee — don't overflow */
.partners-marquee-container,
.testimonials-marquee-wrapper,
.marquee-wrapper,
.testimonials-marquee-row {
overflow: hidden !important;
max-width: 100vw !important;
}
/* Ensure the India SVG map doesn't overflow */
.india-svg-map { max-width: 100%; height: auto; }
/* Map embed in contact page */
.map-iframe-wrapper { height: 250px; }
.map-iframe { height: 100%; }
/* FAQ ── */
.faq-question { padding: 1.1rem 1.25rem; }
.faq-question h3 { font-size: 1.05rem; }
.faq-item.active .faq-answer { padding: 1.1rem 1.25rem; }
/* Global modal ── */
.global-modal-card {
width: 92vw !important;
max-width: 410px !important;
padding: 0 !important; /* Zero parent padding so headers and forms span perfectly */
margin: auto !important;
border-radius: 16px !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
background: #FFFFFF !important;
}
.global-modal-header {
padding: 1.1rem 1.25rem 0.65rem 1.25rem !important;
}
.global-modal-title {
font-size: 1.45rem !important;
}
.global-modal-body {
padding: 0.9rem 1.25rem 1.45rem 1.25rem !important;
}
.global-modal-form {
gap: 0.75rem !important;
}
.global-modal-input,
.global-modal-select,
.global-modal-textarea {
font-size: 16px !important; /* Enforces absolute immune behavior against iOS Safari automatic zoom-on-focus! */
padding: 0.75rem 1rem !important;
border-radius: 10px !important;
background-color: #F8FAFC !important;
}
.global-modal-textarea {
height: 85px !important;
}
.global-modal-submit-btn {
width: 100% !important;
display: flex !important;
align-self: stretch !important;
margin-top: 0.35rem !important;
}
.global-modal-submit-left {
flex-grow: 1 !important;
justify-content: center !important;
padding: 0.75rem 1rem !important;
font-size: 0.95rem !important;
}
.global-modal-submit-right {
padding: 0.75rem 1rem !important;
}
/* Scroll-reveal ── reduce transform distance for smooth mobile entry */
.reveal-element { transform: translateY(20px); }
}
/* ==========================================================================
RESPONSIVE SCALING FOR BRAND CARDS AND MARQUEE LOGOS
========================================================================== */
/* For Tablets and Mid-size screens (max-width: 1024px) */
@media (max-width: 1024px) {
.brand-bar-logo-card {
width: 220px !important;
height: 68px !important;
padding: 0.5rem 1.15rem !important;
}
.marquee-logo-container {
width: 280px !important;
height: 90px !important;
padding: 1rem 1.85rem !important;
}
.brand-logo-svg {
width: 40px !important;
height: 40px !important;
}
.brand-logo-icon {
width: 38px !important;
height: 38px !important;
font-size: 0.65rem !important;
}
.brand-logo-name {
font-size: 1.05rem !important;
}
.brand-logo-sub {
font-size: 0.6rem !important;
}
}
/* For Mobile Landscape and Small Tablets (max-width: 768px) */
@media (max-width: 768px) {
.brand-bar-logo-card {
width: 180px !important;
height: 58px !important;
padding: 0.45rem 0.85rem !important;
}
.marquee-logo-container {
width: 240px !important;
height: 80px !important;
padding: 0.85rem 1.5rem !important;
}
.brand-logo-html {
gap: 0.65rem !important;
}
.brand-logo-svg {
width: 36px !important;
height: 36px !important;
}
.brand-logo-icon {
width: 34px !important;
height: 34px !important;
font-size: 0.6rem !important;
}
.brand-logo-name {
font-size: 0.95rem !important;
}
.brand-logo-sub {
font-size: 0.56rem !important;
}
}
/* For Mobile Portrait (max-width: 480px) */
@media (max-width: 480px) {
.brand-bar-logo-card {
width: 100% !important;
max-width: 170px !important; /* Perfect fit in 2-column mobile layout */
height: 54px !important;
padding: 0.4rem 0.65rem !important;
}
.marquee-logo-container {
width: 200px !important; /* Perfectly sized to show clearly in infinite marquee loop */
height: 72px !important;
padding: 0.65rem 1rem !important;
}
.brand-logo-html {
gap: 0.5rem !important;
}
.brand-logo-svg {
width: 32px !important;
height: 32px !important;
}
.brand-logo-icon {
width: 30px !important;
height: 30px !important;
font-size: 0.55rem !important;
}
.brand-logo-name {
font-size: 0.88rem !important;
letter-spacing: 0.3px !important;
}
.brand-logo-sub {
font-size: 0.52rem !important;
letter-spacing: 0.3px !important;
}
}
/* For Small Mobile Devices (max-width: 360px) */
@media (max-width: 360px) {
.brand-bar-logo-card {
max-width: 135px !important;
height: 48px !important;
padding: 0.3rem 0.5rem !important;
}
.marquee-logo-container {
width: 180px !important;
height: 64px !important;
padding: 0.5rem 0.75rem !important;
}
.brand-logo-html {
gap: 0.4rem !important;
}
.brand-logo-svg {
width: 28px !important;
height: 28px !important;
}
.brand-logo-icon {
width: 26px !important;
height: 26px !important;
font-size: 0.5rem !important;
}
.brand-logo-name {
font-size: 0.78rem !important;
}
.brand-logo-sub {
font-size: 0.48rem !important;
display: none !important; /* Hide subtext on super-small screens to prevent overlap/wrapping */
}
}
/* ==========================================================================
INTERACTIVE B2B SITE-GUIDE TOUR STYLES
========================================================================== */
.tour-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(4, 9, 20, 0.75);
z-index: 9998;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tour-overlay.active {
opacity: 1;
pointer-events: auto;
}
.tour-card {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 390px;
background: var(--bg-dark-card);
border: 2px solid var(--secondary);
border-radius: 12px;
padding: 1.75rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), var(--gold-glow);
z-index: 9999;
display: flex;
flex-direction: column;
gap: 1.1rem;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.tour-card.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Light theme overrides for tour card */
.light-theme .tour-card {
background: #FFFFFF;
border-color: var(--secondary);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12), var(--gold-glow);
}
.tour-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.65rem;
}
.tour-badge {
background: var(--secondary);
color: var(--text-on-dark);
font-family: var(--font-heading);
font-weight: 900;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0.25rem 0.5rem;
border-radius: 4px;
line-height: 1;
}
.tour-progress {
font-family: var(--font-heading);
font-size: 0.8rem;
color: var(--text-muted);
font-weight: 700;
}
.tour-title {
font-family: var(--font-heading);
font-size: 1.25rem;
color: var(--text-light);
font-weight: 950;
margin-bottom: 0.45rem;
}
.light-theme .tour-title {
color: #0F172A;
}
.tour-desc {
font-family: var(--font-body);
font-size: 0.94rem;
color: var(--text-muted);
line-height: 1.5;
}
.light-theme .tour-desc {
color: #475569;
}
.tour-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--border-color);
padding-top: 0.85rem;
margin-top: 0.4rem;
}
.tour-btn {
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 800;
padding: 0.5rem 1rem;
border-radius: 6px;
cursor: pointer;
transition: all var(--transition-fast);
border: none;
}
.tour-btn.btn-text {
background: transparent;
color: var(--text-muted);
padding-left: 0;
padding-right: 0;
}
.tour-btn.btn-text:hover {
color: #EF4444;
}
.tour-btn.btn-secondary {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
color: var(--text-light);
}
.light-theme .tour-btn.btn-secondary {
background: #F1F5F9;
color: #475569;
border: 1px solid rgba(15, 23, 42, 0.1);
}
.tour-btn.btn-secondary:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.1);
}
.light-theme .tour-btn.btn-secondary:hover:not(:disabled) {
background: #E2E8F0;
}
.tour-btn.btn-primary {
background: var(--secondary);
color: var(--text-on-dark);
}
.tour-btn.btn-primary:hover {
background: #E5A93C;
transform: translateY(-1px);
}
.tour-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
transform: none !important;
}
/* Pulsing highlight effectScoped to highlighted selector */
.tour-highlighted {
position: relative;
z-index: 9999 !important;
outline: 3px solid var(--secondary) !important;
outline-offset: 6px;
box-shadow: 0 0 45px rgba(212, 163, 89, 0.5) !important;
border-radius: 6px;
background: var(--bg-dark) !important;
transition: all 0.4s ease;
}
.light-theme .tour-highlighted {
background: #FFFFFF !important;
}
/* Floating Tour Action Trigger Button */
.floating-tour-trigger {
position: fixed;
bottom: 2rem;
left: 2rem;
width: 48px;
height: 48px;
background: var(--secondary);
color: var(--text-on-dark);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(212, 163, 89, 0.35), var(--gold-glow);
z-index: 9990;
cursor: pointer;
border: none;
transition: all var(--transition-fast);
}
.floating-tour-trigger:hover {
transform: scale(1.1) rotate(15deg);
background: #E5A93C;
box-shadow: 0 10px 28px rgba(212, 163, 89, 0.45);
}
@media (max-width: 500px) {
.tour-card {
bottom: 1rem;
right: 1rem;
left: 1rem;
width: auto;
padding: 1.35rem;
}
.floating-tour-trigger {
bottom: 75px; /* Offset to prevent overlap with floating WhatsApp */
left: 12px;
width: 44px;
height: 44px;
}
}
/* Hide tour elements completely on mobile views (<=768px) */
@media (max-width: 768px) {
.tour-overlay,
.tour-card,
.floating-tour-trigger {
display: none !important;
}
}