/* Global Design System & Variables for Global Asia Exporters WP Theme */
:root {
/* Color Palette */
--primary: #0B4F9C; /* Maersk/DP World Premium Blue */
--primary-light: #1e6ac5;
--secondary: #00B8D9; /* Deep Cyan / Teal */
--secondary-rgb: 0, 184, 217;
--accent: #19C37D; /* Eco / Logistic Green */
--dark: #0F172A; /* Slate Dark Backgrounds */
--dark-light: #1E293B; /* Lighter Slate for Cards */
--light: #F8FAFC; /* Soft Background White */
--white: #FFFFFF;
--gray: #64748B;
--border-light: rgba(148, 163, 184, 0.15);
/* Fonts */
--font-headings: 'Montserrat', sans-serif;
--font-body: 'Poppins', sans-serif;
--font-mono: 'Inter', sans-serif;
/* Spacing */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.75rem;
--space-lg: 2.5rem;
--space-xl: 4.5rem;
/* Transitions */
--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
--transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
/* Shadows */
--shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
--shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
--shadow-glass: 0 8px 32px 0 rgba(11, 79, 156, 0.05);
/* Borders */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 24px;
}
/* Reset and Base Styles */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-body);
background-color: var(--light);
color: var(--dark);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-headings);
font-weight: 700;
color: var(--dark);
line-height: 1.2;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition-fast);
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul {
list-style: none;
}
/* Premium Preloader */
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--dark);
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: opacity 0.6s var(--transition-slow), visibility 0.6s var(--transition-slow);
}
.loader-container {
position: relative;
width: 120px;
height: 120px;
}
.loader-circle {
border: 4px solid rgba(255, 255, 255, 0.05);
border-top: 4px solid var(--secondary);
border-radius: 50%;
width: 100%;
height: 100%;
animation: spin 1.5s linear infinite;
}
.loader-ship {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
fill: var(--white);
animation: pulse 2s ease-in-out infinite;
}
.loader-text {
margin-top: 2rem;
font-family: var(--font-headings);
font-size: 0.9rem;
letter-spacing: 0.3em;
color: var(--white);
text-transform: uppercase;
font-weight: 600;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--light);
}
::-webkit-scrollbar-thumb {
background: rgba(11, 79, 156, 0.2);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary);
}
/* Layout Utilities */
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--space-md);
}
.section {
padding: var(--space-xl) 0;
position: relative;
}
.section-dark {
background-color: var(--dark);
color: var(--white);
}
.section-dark h1, .section-dark h2, .section-dark h3 {
color: var(--white);
}
.section-header {
max-width: 700px;
margin-bottom: var(--space-lg);
}
.section-subtitle {
font-family: var(--font-mono);
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
color: var(--secondary);
letter-spacing: 0.15em;
margin-bottom: 0.75rem;
display: block;
}
.section-title {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: var(--space-sm);
}
.section-desc {
font-size: 1.1rem;
color: var(--gray);
}
.section-dark .section-desc {
color: #94A3B8;
}
/* Header & Navigation */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: background var(--transition-normal), backdrop-filter var(--transition-normal);
}
header.scrolled {
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Light Header Theme for Inner Pages */
header.header-light {
background: rgba(255, 255, 255, 0.72) !important;
backdrop-filter: blur(18px) saturate(160%) !important;
-webkit-backdrop-filter: blur(18px) saturate(160%) !important;
border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
box-shadow: var(--shadow-sm) !important;
}
header.header-light .logo {
color: var(--primary) !important;
}
header.header-light .logo-accent {
color: var(--secondary) !important;
}
header.header-light .nav-link {
color: #334155 !important;
}
header.header-light .nav-link:hover,
header.header-light .nav-link.active {
color: var(--primary) !important;
}
header.header-light .mobile-menu-btn {
color: var(--dark) !important;
}
header.header-light .logo img,
header.header-light .custom-logo {
background-color: transparent !important;
padding: 0 !important;
}
.custom-logo {
height: 50px;
width: auto;
background-color: #ffffff;
padding: 4px 12px;
border-radius: 4px;
object-fit: contain;
display: block;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
}
/* ── Sailboat ocean strip ───────────────────────────────────────
A slim animated wave + sailboat that glides along the very
bottom edge of the header on every page and every breakpoint.
Pure CSS/SVG, GPU-friendly (transform-only animation), so it
stays smooth even on low-powered phones. */
.header-ocean-strip {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 18px;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.ocean-wave-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.wave-path {
fill: rgba(56, 189, 248, 0.22);
}
.wave-path-back {
fill: rgba(25, 195, 125, 0.16);
animation: gae-wave-drift 9s ease-in-out infinite alternate;
}
.wave-path-front {
animation: gae-wave-drift 6.5s ease-in-out infinite alternate-reverse;
}
header.header-light .wave-path-back {
fill: rgba(11, 79, 156, 0.10);
}
header.header-light .wave-path-front {
fill: rgba(56, 189, 248, 0.28);
}
@keyframes gae-wave-drift {
0% { transform: translateX(0); }
100% { transform: translateX(-3%); }
}
.sailboat-wrap {
position: absolute;
bottom: 1px;
left: -12%;
width: 30px;
height: 19px;
filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.75));
animation: gae-boat-sail 7s ease-in-out infinite;
}
@keyframes gae-boat-sail {
0% { left: -12%; transform: translateY(0) rotate(-2deg); }
25% { transform: translateY(-1.5px) rotate(1.5deg); }
50% { left: 50%; transform: translateY(0) rotate(-1.5deg); }
75% { transform: translateY(-1.5px) rotate(1.5deg); }
100% { left: 112%; transform: translateY(0) rotate(-2deg); }
}
.sailboat-icon {
width: 100%;
height: 100%;
display: block;
}
.sailboat-icon .hull {
fill: var(--white, #ffffff);
}
.sailboat-icon .mast {
fill: rgba(255, 255, 255, 0.85);
}
.sailboat-icon .sail {
fill: var(--secondary, #19C37D);
}
.sailboat-icon .sail-small {
fill: rgba(255, 255, 255, 0.9);
}
header.header-light .sailboat-icon .hull {
fill: var(--primary, #0B4F9C);
}
header.header-light .sailboat-icon .mast {
fill: rgba(11, 79, 156, 0.8);
}
header.header-light .sailboat-icon .sail {
fill: var(--secondary, #19C37D);
}
header.header-light .sailboat-icon .sail-small {
fill: rgba(11, 79, 156, 0.55);
}
.boat-glow {
position: absolute;
bottom: 2px;
left: -10px;
width: 22px;
height: 6px;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.55) 0%, rgba(56, 189, 248, 0) 75%);
filter: blur(2px);
}
.boat-bubble {
position: absolute;
bottom: 3px;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.75);
opacity: 0;
animation: gae-bubble-rise 2.2s ease-in-out infinite;
}
header.header-light .boat-bubble {
background: rgba(11, 79, 156, 0.45);
}
.boat-bubble.b1 { left: 2px; animation-delay: 0s; }
.boat-bubble.b2 { left: 10px; animation-delay: 0.5s; }
.boat-bubble.b3 { left: 18px; animation-delay: 1s; }
@keyframes gae-bubble-rise {
0% { opacity: 0; transform: translateY(0) scale(0.6); }
25% { opacity: 0.85; }
100% { opacity: 0; transform: translateY(-10px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
.sailboat-wrap,
.wave-path-back,
.wave-path-front,
.boat-bubble {
animation: none !important;
}
}
@media (max-width: 480px) {
.header-ocean-strip {
height: 14px;
}
.sailboat-wrap {
width: 24px;
height: 15px;
}
}
.logo {
display: flex;
align-items: center;
gap: var(--space-xs);
font-family: var(--font-headings);
font-weight: 800;
font-size: 1.25rem;
color: var(--white);
}
.logo-accent {
color: var(--secondary);
}
/* ── Header travel strip: tiny plane + boat looping across the nav bar ──
Purely decorative (aria-hidden), CSS-driven so it runs independently
of GSAP/Lenis. Sits in the empty space between the logo and the nav
links on desktop; hidden on mobile to keep the compact header clean. */
.header-travel-strip {
position: relative;
flex: 1 1 auto;
height: 24px;
margin: 0 var(--space-md);
overflow: hidden;
pointer-events: none;
}
.header-travel-strip svg {
position: absolute;
width: 20px;
height: 20px;
}
.travel-boat {
bottom: 0;
left: -10%;
color: var(--secondary, #19C37D);
animation: gae-sail-across 14s linear infinite;
}
.travel-plane {
top: 0;
left: -10%;
color: var(--white, #ffffff);
opacity: 0.85;
animation: gae-fly-across 9s linear infinite;
animation-delay: 1.5s;
}
header.header-light .travel-plane {
color: var(--primary, #0B4F9C);
}
@keyframes gae-sail-across {
0% { left: -8%; opacity: 0; transform: translateY(0) scaleX(1); }
8% { opacity: 1; }
92% { opacity: 1; }
100% { left: 104%; opacity: 0; }
}
@keyframes gae-fly-across {
0% { left: -8%; opacity: 0; transform: translateY(0) rotate(90deg); }
10% { opacity: 0.85; }
90% { opacity: 0.85; }
100% { left: 104%; opacity: 0; transform: translateY(-6px) rotate(90deg); }
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
.travel-boat,
.travel-plane {
animation: none;
display: none;
}
}
/* Hide the travel strip on mobile/tablet — header is too compact for it */
@media (max-width: 992px) {
.header-travel-strip {
display: none;
}
}
.nav-links {
display: flex;
gap: var(--space-md);
}
.nav-link {
font-weight: 500;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
padding: 0.5rem 0;
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--secondary);
transition: width var(--transition-fast);
}
.nav-link:hover, .nav-link.active {
color: var(--white);
}
.nav-link:hover::after, .nav-link.active::after {
width: 100%;
}
.nav-cta {
background: var(--primary);
color: var(--white);
font-weight: 600;
font-size: 0.9rem;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-sm);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: var(--shadow-sm);
}
.nav-cta:hover {
background: var(--secondary);
border-color: transparent;
transform: translateY(-2px);
}
/* Mobile CTA inside the slide-out drawer — hidden on desktop */
.nav-cta-mobile {
display: none;
}
/* Mobile Menu Toggle */
.mobile-menu-btn {
display: none;
background: rgba(15, 23, 42, 0.06);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 12px;
color: var(--white);
cursor: pointer;
padding: 0.5rem;
}
.mobile-menu-btn svg {
width: 28px;
height: 28px;
}
/* Buttons System */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: 1rem 2rem;
font-family: var(--font-headings);
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-normal);
border: none;
}
.btn-primary {
background: var(--primary);
color: var(--white);
box-shadow: 0 4px 14px rgba(11, 79, 156, 0.3);
}
.btn-primary:hover {
background: var(--primary-light);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(11, 79, 156, 0.4);
}
.btn-secondary {
background: var(--secondary);
color: var(--white);
box-shadow: 0 4px 14px rgba(0, 184, 217, 0.3);
}
.btn-secondary:hover {
background: #00cfe6;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 184, 217, 0.4);
}
.btn-outline {
background: transparent;
color: var(--white);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.btn-outline:hover {
background: var(--white);
color: var(--dark);
border-color: var(--white);
transform: translateY(-3px);
}
.btn-outline-dark {
background: transparent;
color: var(--dark);
border: 2px solid var(--primary);
}
.btn-outline-dark:hover {
background: var(--primary);
color: var(--white);
transform: translateY(-3px);
}
/* Fullscreen Hero Section */
.hero {
height: 100vh;
position: relative;
display: flex;
align-items: center;
background-color: var(--dark);
color: var(--white);
overflow: hidden;
padding-top: 80px;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 30%, rgba(15, 23, 42, 0.3) 100%);
z-index: 1;
}
.hero .container {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
align-items: center;
gap: var(--space-lg);
}
.hero-content {
max-width: 750px;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 100px;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--secondary);
margin-bottom: var(--space-md);
text-transform: uppercase;
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: var(--space-sm);
background: linear-gradient(to right, var(--white) 60%, rgba(255, 255, 255, 0.7));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-desc {
font-size: 1.2rem;
color: #94A3B8;
margin-bottom: var(--space-lg);
max-width: 600px;
}
.hero-actions {
display: flex;
gap: var(--space-sm);
}
/* WhatsApp & Call quick-contact CTA buttons */
.hero-contact-actions {
display: flex !important;
flex-wrap: wrap;
gap: 1.1rem;
margin-top: var(--space-md);
}
a.hero-contact-btn {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.9rem !important;
padding: 0.8rem 1.8rem 0.8rem 0.8rem !important;
border-radius: 100px !important;
text-decoration: none !important;
border: none !important;
overflow: visible !important;
isolation: isolate;
cursor: pointer;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}
a.hero-contact-btn:visited {
color: inherit;
}
a.hero-contact-btn:hover {
transform: translateY(-4px) scale(1.04);
}
a.hero-contact-btn:active {
transform: translateY(-1px) scale(0.99);
}
.hero-contact-icon {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
flex-shrink: 0;
z-index: 2;
}
/* WhatsApp variant - solid green pill with glow + pulse ring */
a.hero-contact-btn--whatsapp {
background: linear-gradient(135deg, #2FE08A, #19C37D) !important;
box-shadow: 0 8px 24px rgba(25, 195, 125, 0.45);
}
a.hero-contact-btn--whatsapp .hero-contact-icon {
background: rgba(255, 255, 255, 0.22) !important;
color: #FFFFFF !important;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
animation: hero-pulse-whatsapp 2.2s infinite;
}
a.hero-contact-btn--whatsapp:hover {
box-shadow: 0 12px 32px rgba(25, 195, 125, 0.65);
}
@keyframes hero-pulse-whatsapp {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
/* Call variant - solid blue pill with glow */
a.hero-contact-btn--call {
background: linear-gradient(135deg, #00B8D9, #0B4F9C) !important;
box-shadow: 0 8px 24px rgba(0, 184, 217, 0.45);
}
a.hero-contact-btn--call .hero-contact-icon {
background: rgba(255, 255, 255, 0.22) !important;
color: #FFFFFF !important;
}
a.hero-contact-btn--call:hover {
box-shadow: 0 12px 32px rgba(0, 184, 217, 0.65);
}
a.hero-contact-btn--call .hero-contact-icon svg {
animation: hero-ring-shake 2.6s ease-in-out infinite;
transform-origin: 50% 20%;
}
@keyframes hero-ring-shake {
0%, 80%, 100% { transform: rotate(0deg); }
82% { transform: rotate(-14deg); }
84% { transform: rotate(12deg); }
86% { transform: rotate(-10deg); }
88% { transform: rotate(8deg); }
90% { transform: rotate(0deg); }
}
.hero-contact-text {
display: flex !important;
flex-direction: column !important;
line-height: 1.2;
z-index: 2;
}
.hero-contact-label {
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85) !important;
}
.hero-contact-value {
font-family: var(--font-headings);
font-size: 1.05rem;
font-weight: 800;
color: #FFFFFF !important;
letter-spacing: 0.01em;
}
/* Floating Visuals */
.hero-visual {
position: relative;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: var(--radius-lg);
background: radial-gradient(circle at center, rgba(11, 79, 156, 0.05) 0%, transparent 80%);
border: 1px solid rgba(255, 255, 255, 0.03);
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2);
}
.hero-map-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.18;
z-index: 1;
pointer-events: none;
}
.hero-routes-svg {
width: 100%;
height: 100%;
}
.hero-route-line {
fill: none;
stroke-dasharray: 4, 4;
animation: dashRoute 20s linear infinite;
}
@keyframes dashRoute {
to { stroke-dashoffset: -40; }
}
.hero-origin-marker {
animation: pulseOrigin 2s infinite;
}
@keyframes pulseOrigin {
0%, 100% { r: 5; fill-opacity: 1; }
50% { r: 8; fill-opacity: 0.5; }
}
.hero-dest-marker {
animation: pulseDest 2s infinite;
}
@keyframes pulseDest {
0%, 100% { r: 3.5; fill-opacity: 0.8; }
50% { r: 6.5; fill-opacity: 0.3; }
}
/* Clouds in Hero */
.hero-clouds {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
overflow: hidden;
}
.hero-cloud {
position: absolute;
background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
width: 250px;
height: 120px;
border-radius: 50%;
filter: blur(8px);
}
.hero-cloud-1 {
top: 15%;
left: -260px;
animation: driftClouds 35s linear infinite;
}
.hero-cloud-2 {
top: 45%;
right: -260px;
animation: driftCloudsReverse 40s linear infinite;
}
@keyframes driftClouds {
0% { transform: translateX(0); }
100% { transform: translateX(800px); }
}
@keyframes driftCloudsReverse {
0% { transform: translateX(0); }
100% { transform: translateX(-800px); }
}
/* Ocean & Ship in Hero */
.hero-ocean {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 130px;
z-index: 3;
overflow: hidden;
background: linear-gradient(to top, rgba(15, 23, 42, 0.4) 0%, transparent 100%);
}
.hero-wave {
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat-x;
background-position: bottom;
}
.hero-wave-1 {
background-image: url('data:image/svg+xml;utf8,');
animation: waveMotion 18s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
z-index: 10;
}
.hero-wave-2 {
background-image: url('data:image/svg+xml;utf8,');
animation: waveMotionReverse 14s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
z-index: 5;
}
.hero-wave-3 {
background-image: url('data:image/svg+xml;utf8,');
animation: waveMotion 11s linear infinite;
z-index: 12;
}
.hero-ship {
position: absolute;
bottom: 12px;
left: -200px;
width: 160px;
z-index: 8;
filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.3));
}
.hero-ship-svg {
width: 100%;
height: auto;
}
/* Floating containers in Hero */
.floating-container {
position: absolute;
width: 12px;
height: 7px;
border-radius: 1px;
z-index: 9;
}
.floating-container.container-orange {
background: #f97316;
bottom: 15px;
left: 25%;
}
.floating-container.container-blue {
background: #0ea5e9;
bottom: 8px;
left: 75%;
}
.glass-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: var(--radius-md);
box-shadow: var(--shadow-glass);
}
.hero-card-floating {
position: absolute;
padding: 1.25rem;
display: flex;
align-items: center;
gap: var(--space-sm);
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
transition: transform var(--transition-normal);
}
.hero-card-floating:hover {
transform: translateY(-5px);
}
.hero-card-1 {
top: 15%;
left: -5%;
}
.hero-card-2 {
bottom: 10%;
right: -5%;
}
.hero-card-3 {
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
}
.float-icon {
width: 48px;
height: 48px;
background: rgba(11, 79, 156, 0.15);
border: 1px solid rgba(11, 79, 156, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary);
}
.float-icon svg {
width: 24px;
height: 24px;
}
.hero-card-info h4 {
font-size: 0.95rem;
font-weight: 700;
color: var(--white);
}
.hero-card-info p {
font-size: 0.8rem;
color: #94A3B8;
}
/* Worldwide Export Map Section */
.export-map-container {
position: relative;
width: 100%;
height: 480px;
background: #0b0f19;
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.05);
overflow: hidden;
margin-top: var(--space-lg);
}
#mapCanvas {
width: 100%;
height: 100%;
display: block;
}
.map-control-overlay {
position: absolute;
top: var(--space-md);
left: var(--space-md);
pointer-events: none;
}
.map-list-countries {
position: absolute;
bottom: var(--space-md);
left: var(--space-md);
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
max-width: 80%;
}
.map-country-tag {
background: rgba(25, 195, 125, 0.1);
border: 1px solid var(--accent);
color: var(--white);
padding: 0.35rem 0.75rem;
font-size: 0.75rem;
font-family: var(--font-mono);
font-weight: 600;
border-radius: 50px;
}
/* Statistics Count-up Cards */
.stats-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-md);
margin-top: var(--space-lg);
}
.stat-card {
padding: 2.5rem 1.5rem;
text-align: center;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
background: var(--white);
transition: all var(--transition-normal);
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: rgba(11, 79, 156, 0.15);
}
.stat-number {
font-family: var(--font-headings);
font-size: 3rem;
font-weight: 800;
color: var(--primary);
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.9rem;
color: var(--gray);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Products Cards */
.products-filter {
display: flex;
gap: 0.75rem;
margin-bottom: var(--space-lg);
flex-wrap: wrap;
}
.filter-btn {
background: var(--white);
color: var(--gray);
border: 1px solid var(--border-light);
padding: 0.5rem 1.25rem;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition-fast);
}
.filter-btn:hover, .filter-btn.active {
background: var(--primary);
color: var(--white);
border-color: var(--primary);
}
.products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}
.product-card {
background: var(--white);
border-radius: var(--radius-md);
border: 1px solid var(--border-light);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
display: flex;
flex-direction: column;
}
.product-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: rgba(11, 79, 156, 0.15);
}
.product-image-container {
position: relative;
height: 240px;
overflow: hidden;
background: #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
}
.product-image {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform var(--transition-slow);
}
.product-card:hover .product-image {
transform: scale(1.08);
}
.product-category {
position: absolute;
top: 1rem;
left: 1rem;
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(5px);
color: var(--white);
font-size: 0.75rem;
font-family: var(--font-mono);
font-weight: 600;
padding: 0.35rem 0.75rem;
border-radius: 4px;
}
.product-info {
padding: var(--space-sm);
display: flex;
flex-direction: column;
flex-grow: 1;
}
.product-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--dark);
}
.product-desc {
color: var(--gray);
font-size: 0.9rem;
margin-bottom: var(--space-sm);
flex-grow: 1;
}
.product-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--primary);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.product-link svg {
width: 16px;
height: 16px;
transition: transform var(--transition-fast);
}
.product-card:hover .product-link svg {
transform: translateX(4px);
}
/* Service Cards */
/* Service Cards */
.services-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-md);
}
.service-card {
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 2rem 1.25rem;
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
z-index: 1;
display: flex;
flex-direction: column;
height: 100%;
box-shadow: var(--shadow-sm);
}
.service-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);
z-index: -1;
transition: height var(--transition-normal);
}
.service-card:hover::after {
height: 100%;
}
.service-card:hover {
color: var(--white);
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(11, 79, 156, 0.12);
border-color: transparent;
}
.service-icon {
width: 54px;
height: 54px;
border-radius: var(--radius-sm);
background: rgba(11, 79, 156, 0.08);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-sm);
transition: all var(--transition-normal);
}
.service-card:hover .service-icon {
background: rgba(255, 255, 255, 0.15);
color: var(--white);
}
.service-icon svg {
width: 28px;
height: 28px;
}
.service-title {
font-size: 1.1rem;
margin-bottom: 0.75rem;
font-weight: 700;
transition: color var(--transition-fast);
}
.service-card:hover .service-title {
color: var(--white);
}
.service-desc {
font-size: 0.85rem;
color: var(--gray);
line-height: 1.5;
transition: color var(--transition-fast);
}
.service-card:hover .service-desc {
color: rgba(255, 255, 255, 0.9);
}
/* Custom Spacing Optimizations */
.section:has(.cta-banner) {
padding-top: 3rem;
padding-bottom: 0;
}
/* Why Choose Us & Industries We Serve Layouts */
.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
margin-top: var(--space-lg);
}
.why-card {
display: flex;
gap: var(--space-sm);
padding: 1.5rem;
border-radius: var(--radius-md);
background: var(--white);
border: 1px solid var(--border-light);
}
.why-check {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(25, 195, 125, 0.1);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.why-check svg {
width: 16px;
height: 16px;
}
.why-info h4 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.35rem;
}
.why-info p {
font-size: 0.9rem;
color: var(--gray);
}
.industries-slider-container {
overflow: hidden;
padding: var(--space-md) 0;
position: relative;
width: 100%;
}
.marquee-track {
display: flex;
width: max-content;
animation: marquee 25s linear infinite;
gap: var(--space-md);
}
.marquee-item {
padding: 1rem 2.5rem;
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-family: var(--font-headings);
font-weight: 700;
color: var(--primary);
font-size: 1.1rem;
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
gap: 0.5rem;
}
@keyframes marquee {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
/* Call To Action */
.cta-banner {
background: linear-gradient(135deg, var(--dark) 30%, var(--primary) 100%);
border-radius: var(--radius-lg);
padding: 5rem var(--space-lg);
position: relative;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-lg);
border: 1px solid rgba(255,255,255,0.05);
}
.cta-content {
max-width: 650px;
}
.cta-title {
font-size: 2.25rem;
font-weight: 800;
margin-bottom: 0.75rem;
color: var(--white);
}
.cta-desc {
font-size: 1.1rem;
color: #94A3B8;
}
.cta-buttons {
display: flex;
gap: var(--space-sm);
flex-shrink: 0;
}
/* Contact Page Styles */
.contact-layout {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--space-lg);
margin-top: var(--space-lg);
}
.contact-info-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.contact-item {
display: flex;
gap: var(--space-sm);
}
.contact-item-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-sm);
background: rgba(11, 79, 156, 0.08);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-item-icon svg {
width: 22px;
height: 22px;
}
.contact-item-info h4 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.contact-item-info p {
color: var(--gray);
font-size: 0.95rem;
}
.contact-form-card {
background: var(--white);
padding: 3rem;
border-radius: var(--radius-md);
border: 1px solid var(--border-light);
box-shadow: var(--shadow-md);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--dark);
}
.form-control {
width: 100%;
padding: 0.85rem 1.25rem;
border: 1px solid #CBD5E1;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--dark);
transition: all var(--transition-fast);
}
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(11, 79, 156, 0.1);
}
textarea.form-control {
resize: vertical;
min-height: 120px;
}
.contact-map-iframe {
width: 100%;
height: 350px;
border-radius: var(--radius-md);
border: 1px solid var(--border-light);
overflow: hidden;
margin-top: var(--space-md);
}
.contact-map-iframe iframe {
width: 100%;
height: 100%;
border: 0;
}
/* Floating WhatsApp widget */
.whatsapp-widget {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 99;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
transition: transform var(--transition-fast);
}
.whatsapp-widget:hover {
transform: scale(1.1) rotate(15deg);
}
.whatsapp-widget svg {
width: 32px;
height: 32px;
}
/* Footer Section */
footer {
background-color: var(--dark);
color: rgba(255, 255, 255, 0.7);
padding: 5rem 0 2rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr 0.8fr 1.2fr;
gap: var(--space-lg);
margin-bottom: var(--space-lg);
}
.footer-logo-desc h3 {
color: var(--white);
margin-bottom: var(--space-sm);
}
.footer-logo-desc p {
font-size: 0.9rem;
margin-bottom: var(--space-md);
line-height: 1.5;
}
.footer-socials {
display: flex;
gap: 0.75rem;
}
.social-link {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all var(--transition-fast);
}
.social-link:hover {
background: var(--secondary);
border-color: transparent;
transform: translateY(-3px);
}
.social-link svg {
width: 18px;
height: 18px;
}
.footer-column h4 {
color: var(--white);
font-size: 1.05rem;
margin-bottom: 1.5rem;
font-weight: 700;
position: relative;
padding-bottom: 0.5rem;
}
.footer-column h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background: var(--secondary);
}
.footer-links {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer-links a {
font-size: 0.9rem;
transition: var(--transition-fast);
}
.footer-links a:hover {
color: var(--white);
transform: translateX(4px);
}
.newsletter-form {
margin-top: 1rem;
}
.newsletter-form .form-group {
display: flex;
gap: 0.5rem;
}
.newsletter-form .form-control {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--white);
}
.newsletter-form .form-control::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.newsletter-form .btn {
padding: 0.85rem 1.25rem;
background: var(--primary);
border-radius: var(--radius-sm);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: var(--space-md);
display: flex;
justify-content: space-between;
font-size: 0.85rem;
}
/* ======================================================== */
/* MEDIA QUERIES & RESPONSIVENESS */
/* ======================================================== */
@media (max-width: 1200px) {
.hero-title {
font-size: 3rem;
}
.stats-grid {
grid-template-columns: repeat(3, 1fr);
}
.products-grid {
grid-template-columns: repeat(2, 1fr);
}
.services-grid {
grid-template-columns: repeat(4, 1fr);
}
.why-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 992px) {
/* header/.nav-links/.mobile-menu-btn rules removed from here —
superseded by the consolidated NAV-DRAWER rules near the end
of this file, which are the authoritative source for the
mobile header & slide-out drawer. */
.hero .container {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.hero-visual {
height: 350px;
order: -1;
}
.hero-card-floating {
padding: 0.8rem;
}
.visual-globe-ring {
width: 250px;
height: 250px;
}
.cta-banner {
flex-direction: column;
text-align: center;
padding: var(--space-lg);
}
.contact-layout {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
.modal-body {
grid-template-columns: 1fr;
}
.modal-gallery-side {
height: 250px;
}
.modal-content-side {
padding: 1.5rem;
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.section {
padding: var(--space-lg) 0;
}
.section-title {
font-size: 2rem;
}
.hero-title {
font-size: 2.25rem;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.why-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.footer-bottom {
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 1.85rem;
}
.hero-actions {
flex-direction: column;
gap: 0.5rem;
}
.stats-grid {
grid-template-columns: 1fr;
}
.products-grid {
grid-template-columns: 1fr;
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xs);
}
.contact-form-card {
padding: 1.5rem;
}
}
@media (max-width: 360px) {
.services-grid {
grid-template-columns: 1fr;
}
}
/* ======================================================== */
/* HOMEPAGE ENHANCEMENT STYLES */
/* ======================================================== */
/* Grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-md); }
/* FAQ Accordion Styles */
.faq-accordion {
max-width: 800px;
margin: 0 auto;
}
.accordion-item {
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
margin-bottom: 1rem;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.accordion-header {
width: 100%;
padding: 1.25rem 1.75rem;
background: none;
border: none;
text-align: left;
font-family: var(--font-headings);
font-weight: 700;
font-size: 1.05rem;
color: var(--dark);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background var(--transition-fast);
}
.accordion-header:hover {
background: rgba(11, 79, 156, 0.03);
}
.accordion-icon {
width: 20px;
height: 20px;
transition: transform var(--transition-normal);
}
.accordion-item.active .accordion-icon {
transform: rotate(180deg);
}
.accordion-panel {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-normal) ease-out;
}
.accordion-content {
padding: 0 1.75rem 1.25rem 1.75rem;
color: var(--gray);
font-size: 0.95rem;
}
/* Horizontal Timeline Styles */
.timeline-container {
position: relative;
padding: 3rem 0;
overflow-x: auto;
}
.timeline-line {
position: absolute;
top: 50px;
left: 0;
width: 100%;
height: 4px;
background: rgba(11, 79, 156, 0.1);
z-index: 1;
}
.timeline-line-active {
position: absolute;
top: 50px;
left: 0;
width: 0%;
height: 4px;
background: var(--secondary);
z-index: 2;
transition: width var(--transition-slow);
}
.timeline-track {
display: flex;
justify-content: space-between;
position: relative;
z-index: 3;
min-width: 1000px;
}
.timeline-node {
width: 120px;
text-align: center;
position: relative;
}
.timeline-dot {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--white);
border: 4px solid rgba(11, 79, 156, 0.2);
margin: 40px auto 1rem auto;
cursor: pointer;
transition: all var(--transition-fast);
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
justify-content: center;
}
.timeline-node:hover .timeline-dot,
.timeline-node.active .timeline-dot {
background: var(--secondary);
border-color: var(--white);
box-shadow: 0 0 0 4px rgba(0, 184, 217, 0.2);
transform: scale(1.15);
}
.timeline-step {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 700;
color: var(--secondary);
}
.timeline-title {
font-size: 0.9rem;
font-weight: 700;
margin-top: 0.5rem;
}
/* Monochrome Client Logo Carousel */
.partner-logo-container {
overflow: hidden;
padding: 1.5rem 0;
background: var(--white);
border-top: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
}
.partner-logo-track {
display: flex;
width: max-content;
animation: logo-marquee 30s linear infinite;
gap: var(--space-lg);
align-items: center;
}
.partner-logo-item {
width: 120px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
filter: grayscale(1) contrast(0.6);
opacity: 0.5;
transition: all var(--transition-fast);
}
.partner-logo-item:hover {
filter: grayscale(0) contrast(1);
opacity: 1;
}
.partner-logo-item svg, .partner-logo-item img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
@keyframes logo-marquee {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-33.33%, 0, 0); }
}
/* News/Insights Blog Grid */
.blog-card {
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
}
.blog-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.blog-card-img {
height: 200px;
background-color: #cbd5e1;
overflow: hidden;
}
.blog-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.blog-card:hover .blog-card-img img {
transform: scale(1.05);
}
.blog-card-content {
padding: 1.5rem;
}
.blog-card-meta {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--gray);
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.blog-card-title {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.blog-card-excerpt {
font-size: 0.85rem;
color: var(--gray);
margin-bottom: 1rem;
}
/* responsive media queries additions */
@media (max-width: 992px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-6 { grid-template-columns: repeat(3, 1fr); }
.timeline-line, .timeline-line-active { display: none; }
.timeline-container { padding: 0; }
.timeline-track {
display: flex;
flex-direction: column;
min-width: 100%;
gap: 1.5rem;
}
.timeline-node {
width: 100%;
text-align: left;
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1rem;
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
}
.timeline-dot {
margin: 0;
flex-shrink: 0;
}
}
@media (max-width: 576px) {
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
.grid-6 { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================================
Redesigned Interactive Logistics & Delivery Coordination Styles
========================================================================== */
.logistics-two-col {
display: grid;
grid-template-columns: 4.2fr 5.8fr;
gap: var(--space-lg);
align-items: stretch;
}
.logistics-left {
display: flex;
flex-direction: column;
justify-content: center;
padding-right: var(--space-xs);
}
.why-logistics-box {
margin-top: 1.75rem;
}
.why-logistics-title {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 1.25rem;
color: var(--white);
border-bottom: 2px solid var(--secondary);
display: inline-block;
padding-bottom: 0.25rem;
font-family: var(--font-headings);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.why-logistics-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem 1rem;
padding: 0;
margin: 0;
}
.why-logistics-list li {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.why-logistics-icon {
width: 38px;
height: 38px;
background: rgba(0, 184, 217, 0.1);
border: 1px solid rgba(0, 184, 217, 0.2);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary);
flex-shrink: 0;
transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.why-logistics-list li:hover .why-logistics-icon {
transform: scale(1.1);
border-color: var(--secondary);
}
.why-logistics-icon svg {
width: 18px;
height: 18px;
}
.why-logistics-text h4 {
font-size: 0.95rem;
font-weight: 600;
color: var(--white);
margin-bottom: 0.15rem;
}
.why-logistics-text p {
font-size: 0.8rem;
color: #94A3B8;
line-height: 1.4;
}
.logistics-right {
position: relative;
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.06);
background: radial-gradient(circle at 75% 25%, #182235 0%, #0b0f19 100%);
overflow: hidden;
height: 640px;
display: flex;
box-shadow: var(--shadow-lg);
}
.logistics-animation-scene {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
/* Background Map */
.animation-map-bg {
position: absolute;
top: 8%;
left: 5%;
width: 90%;
height: 55%;
opacity: 0.35;
pointer-events: none;
}
.animated-route-svg {
width: 100%;
height: 100%;
overflow: visible;
}
/* Glowing route lines styles */
.route-line {
stroke-width: 1.5;
stroke-dasharray: 6 5;
fill: none;
animation: routeDash 12s linear infinite;
}
.route-air {
stroke-width: 1.2;
stroke-dasharray: 4 6;
animation: routeDashAir 8s linear infinite;
}
@keyframes routeDash {
to { stroke-dashoffset: -100; }
}
@keyframes routeDashAir {
to { stroke-dashoffset: -80; }
}
.glowing-marker-origin {
animation: pulseOrigin 2.5s ease-in-out infinite;
}
.glowing-marker-dest {
animation: pulseDest 3s ease-in-out infinite;
}
@keyframes pulseOrigin {
0%, 100% { r: 5; fill-opacity: 0.9; filter: drop-shadow(0 0 2px #00B8D9); }
50% { r: 9; fill-opacity: 0.4; filter: drop-shadow(0 0 8px #00B8D9); }
}
@keyframes pulseDest {
0%, 100% { r: 3.5; fill-opacity: 0.8; filter: drop-shadow(0 0 1px #19C37D); }
50% { r: 7; fill-opacity: 0.3; filter: drop-shadow(0 0 6px #19C37D); }
}
/* Ocean waves styling */
.ocean-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 190px;
background: linear-gradient(to top, rgba(11, 15, 25, 0.95) 0%, rgba(15, 23, 42, 0.4) 100%);
overflow: hidden;
}
.water-reflection {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at 50% 0%, rgba(0, 184, 217, 0.08) 0%, transparent 60%);
pointer-events: none;
}
.wave {
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat-x;
background-position: bottom;
transform: translate3d(0, 0, 0);
}
.wave1 {
background-image: url('data:image/svg+xml;utf8,');
animation: waveMotion 15s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
z-index: 10;
}
.wave2 {
background-image: url('data:image/svg+xml;utf8,');
animation: waveMotionReverse 11s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
z-index: 5;
}
@keyframes waveMotion {
0% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(-25%, 5px, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes waveMotionReverse {
0% { transform: translate3d(-50%, 0, 0); }
50% { transform: translate3d(-25%, -5px, 0); }
100% { transform: translate3d(0, 0, 0); }
}
/* Ship Bobbing */
.cargo-ship {
position: absolute;
bottom: 25px;
left: 22%;
width: 250px;
z-index: 8;
animation: shipSailing 10s ease-in-out infinite;
filter: drop-shadow(0 15px 12px rgba(0, 0, 0, 0.45));
}
@keyframes shipSailing {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-7px) rotate(-1.5deg); }
}
.isometric-ship-svg {
width: 100%;
height: auto;
}
/* Animated Cranes loading containers */
.crane {
position: absolute;
bottom: 80px;
width: 80px;
height: 100px;
pointer-events: none;
z-index: 3;
}
.crane-left {
left: 4%;
}
.crane-right {
right: 4%;
transform: scaleX(-1);
}
.crane-base {
position: absolute;
bottom: 0;
left: 30px;
width: 20px;
height: 60px;
background: #273549;
border-left: 3px solid #3d4a5c;
border-right: 3px solid #3d4a5c;
}
.crane-arm {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 8px;
background: #e08b00;
transform-origin: 30px 4px;
animation: craneArmRotate 8s ease-in-out infinite;
}
.crane-line {
position: absolute;
top: 8px;
right: 10px;
width: 2px;
height: 35px;
background: #57657a;
animation: craneLineExtend 8s ease-in-out infinite;
}
.crane-load {
position: absolute;
top: 43px;
right: 4px;
width: 14px;
height: 8px;
border-radius: 1px;
animation: craneLoadCycle 8s ease-in-out infinite;
}
.container-orange {
background: #ea580c;
}
.container-blue {
background: #0B4F9C;
}
@keyframes craneArmRotate {
0%, 100% { transform: rotate(0deg); }
35%, 65% { transform: rotate(-10deg); }
}
@keyframes craneLineExtend {
0%, 100% { height: 35px; }
35%, 65% { height: 48px; }
}
@keyframes craneLoadCycle {
0%, 100% { transform: translateY(0); opacity: 1; }
35%, 65% { transform: translateY(13px); opacity: 1; }
45%, 55% { opacity: 0; }
}
/* Flying cargo plane */
.aircraft-container {
position: absolute;
top: 15%;
left: -150px;
width: 110px;
z-index: 12;
animation: planeFlight 16s linear infinite;
filter: drop-shadow(0 8px 8px rgba(0,0,0,0.3));
}
@keyframes planeFlight {
0% { left: -120px; top: 22%; transform: scale(0.6) rotate(6deg); }
50% { left: 45%; top: 13%; transform: scale(0.8) rotate(3deg); }
100% { left: 115%; top: 5%; transform: scale(1.0) rotate(0deg); }
}
.cargo-plane-svg {
width: 100%;
height: auto;
}
.flight-trail {
position: absolute;
top: 50%;
right: 100%;
width: 300px;
height: 2px;
background: linear-gradient(to right, transparent, rgba(0, 184, 217, 0.45));
transform: translateY(-50%);
pointer-events: none;
}
/* Floating elements */
.scene-cloud {
position: absolute;
background: rgba(255, 255, 255, 0.04);
border-radius: 20px;
filter: blur(8px);
pointer-events: none;
}
.cloud1 {
top: 22%;
left: 15%;
width: 130px;
height: 22px;
animation: floatCloud 25s linear infinite;
}
.cloud2 {
top: 38%;
right: 15%;
width: 170px;
height: 28px;
animation: floatCloudReverse 30s linear infinite;
}
@keyframes floatCloud {
0% { transform: translateX(-150px); }
100% { transform: translateX(550px); }
}
@keyframes floatCloudReverse {
0% { transform: translateX(150px); }
100% { transform: translateX(-550px); }
}
/* Floating containers and logistics icons */
.floating-container {
position: absolute;
pointer-events: none;
z-index: 11;
opacity: 0.65;
}
.cont1 {
top: 48%;
left: 18%;
width: 20px;
height: 20px;
color: #19C37D;
animation: floatBob 6s ease-in-out infinite;
}
.cont2 {
top: 32%;
right: 28%;
width: 25px;
height: 25px;
color: #0B4F9C;
animation: floatBobReverse 8s ease-in-out infinite;
}
.logistic-icon1 {
top: 18%;
left: 48%;
width: 30px;
height: 30px;
color: var(--secondary);
animation: floatBob 7s ease-in-out infinite;
}
@keyframes floatBob {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-12px) rotate(8deg); }
}
@keyframes floatBobReverse {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(12px) rotate(-6deg); }
}
/* Glassmorphism Information Cards */
.logistics-glass-grid {
position: absolute;
bottom: 20px;
left: 4%;
width: 92%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
z-index: 15;
}
.glass-info-card {
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 1.25rem 1rem;
border-radius: var(--radius-md);
transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
cursor: pointer;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
}
.glass-info-card:hover {
transform: translateY(-6px);
border-color: rgba(0, 184, 217, 0.35);
background: rgba(15, 23, 42, 0.65);
}
.glass-card-num {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 700;
color: var(--secondary);
display: block;
margin-bottom: 0.25rem;
}
.glass-info-card h5 {
font-size: 0.85rem;
font-weight: 700;
color: var(--white);
margin-bottom: 0.2rem;
}
.glass-info-card p {
font-size: 0.72rem;
color: #94A3B8;
line-height: 1.3;
}
/* Responsive adjustments for Logistics section */
@media (max-width: 1024px) {
.logistics-two-col {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.logistics-left {
padding-right: 0;
}
.logistics-right {
height: 520px;
}
.logistics-glass-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.why-logistics-list {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.logistics-right {
height: 480px;
}
.logistics-glass-grid {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.glass-info-card {
padding: 0.85rem 1rem;
}
.cargo-ship {
left: 8%;
width: 180px;
}
}
/* World Map Clouds Overlay */
.map-clouds-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 2;
}
.map-cloud {
position: absolute;
background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
width: 300px;
height: 150px;
border-radius: 50%;
filter: blur(10px);
}
.map-cloud-1 {
top: 20%;
left: -350px;
animation: driftClouds 45s linear infinite;
}
.map-cloud-2 {
top: 60%;
right: -350px;
animation: driftCloudsReverse 55s linear infinite;
}
/* ======================================================== */
/* MOBILE UX REFINEMENT PATCH (Site-wide responsive polish) */
/* Desktop styles above are untouched; everything below only */
/* activates at the specified breakpoints. */
/* ======================================================== */
/* ---- Generic two-column section helpers used across pages ---- */
/* (.two-col-section = large content/image pairs, .checklist-grid = small 2-col lists) */
@media (max-width: 768px) {
.two-col-section {
grid-template-columns: 1fr !important;
gap: var(--space-md) !important;
}
.checklist-grid {
grid-template-columns: 1fr 1fr !important;
gap: 0.75rem !important;
}
}
@media (max-width: 480px) {
.checklist-grid {
grid-template-columns: 1fr !important;
}
}
/* ---- Page banner headings (About / Contact / Products archive) ---- */
.page-banner-section {
padding: 100px 0 50px 0;
}
@media (max-width: 768px) {
.page-banner-section {
padding: 90px 0 45px 0 !important;
}
.page-banner-title {
font-size: 2rem !important;
line-height: 1.25 !important;
}
}
@media (max-width: 480px) {
.page-banner-title {
font-size: 1.65rem !important;
}
}
/* ---- Floating glass badge cards (ISO badge, 100% Customs badge) ---- */
/* On desktop these overlay the corner of an image. On mobile, an */
/* absolutely-positioned overlay with a negative offset collides */
/* with surrounding text, so we dock it back into the flow. */
@media (max-width: 768px) {
.about-visual-panel {
position: relative;
margin-bottom: 2.5rem;
}
.floating-stat-badge,
.floating-badge-corner {
position: static !important;
width: 100% !important;
max-width: 280px !important;
margin: 1rem auto 0 auto !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
}
}
/* ---- Header / Navigation crowding fix ----
NOTE: superseded by the consolidated "NAV-DRAWER" rules near the end of
this file (search MOBILE NAV REBUILD). Kept disabled here to avoid
conflicting cascade with later, authoritative rules. ---- */
@media (max-width: 420px) {
.logo {
font-size: 0.85rem;
}
.logo img,
.custom-logo {
height: 32px !important;
}
}
/* ---- Container padding consistency on very small screens ---- */
@media (max-width: 480px) {
.container {
padding: 0 1.1rem;
}
}
/* ---- Single product detail page ---- */
@media (max-width: 900px) {
.product-detail-grid {
grid-template-columns: 1fr !important;
}
.product-detail-image {
height: 280px !important;
}
.product-detail-content {
padding: 2rem 1.5rem !important;
}
}
@media (max-width: 480px) {
.product-detail-content {
padding: 1.75rem 1.25rem !important;
}
.product-detail-actions {
flex-direction: column !important;
gap: 0.75rem !important;
}
.product-detail-actions .btn {
width: 100%;
text-align: center;
}
}
/* ---- Floating WhatsApp widget: keep it from overlapping content on mobile ---- */
@media (max-width: 768px) {
.whatsapp-widget {
width: 48px;
height: 48px;
bottom: 1.1rem;
right: 1.1rem;
}
.whatsapp-widget svg {
width: 24px;
height: 24px;
}
}
/* ---- Process timeline cards: keep clear of the floating WhatsApp button ---- */
@media (max-width: 992px) {
.timeline-track {
padding-right: 0.25rem;
}
}
/* ---- Hero floating info cards: avoid overflow / overlap on narrow phones ---- */
@media (max-width: 576px) {
.hero-card-floating {
max-width: 92%;
}
}
/* ---- Prevent any residual horizontal overflow from wide fixed-size elements ---- */
@media (max-width: 480px) {
.glass-card {
max-width: 100%;
}
}
/* ============================================================
COMPREHENSIVE MOBILE RESPONSIVENESS OVERHAUL
Covers: layout, typography, hero, nav, cards, forms, footer
All rules scoped to breakpoints – desktop untouched.
============================================================ */
/* ── 0. Hard-stop horizontal scroll on every viewport ─────── */
html, body {
overflow-x: hidden;
max-width: 100%;
}
/* ── 1. NAVIGATION (≤ 992px) ──────────────────────────────── *
* NOTE: disabled — superseded by the consolidated NAV-DRAWER rules
* near the end of this file. This block targeted nav-links.active,
* but the JS toggles .active on .nav-drawer, so it never matched
* anyway, and it conflicted with the authoritative drawer rules.
* body.menu-open overflow:hidden is preserved below. */
@media (max-width: 992px) {
body.menu-open {
overflow: hidden;
}
}
/* ── 2. HERO SECTION ───────────────────────────────────────── */
@media (max-width: 992px) {
.hero {
height: auto;
min-height: unset !important;
padding: 100px 0 3rem;
}
.hero .container {
grid-template-columns: 1fr !important;
gap: var(--space-md);
text-align: center;
}
.hero-content {
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-desc {
max-width: 100%;
}
.hero-actions {
justify-content: center;
flex-wrap: wrap;
}
.hero-visual {
width: 100%;
height: 280px;
order: -1;
}
/* Hide the crowded floating glass cards on tablet/phone */
.hero-card-1,
.hero-card-2,
.hero-card-3 {
display: none;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 2rem !important;
line-height: 1.2;
}
.hero-desc {
font-size: 1rem;
}
.hero-actions {
flex-direction: column;
width: 100%;
gap: 0.75rem;
}
.hero-actions .btn {
width: 100%;
justify-content: center;
padding: 0.95rem 1.5rem;
}
.hero-visual {
height: 220px;
}
}
@media (max-width: 360px) {
.hero-title {
font-size: 1.65rem !important;
}
}
/* ── 3. SECTION TYPOGRAPHY ─────────────────────────────────── */
@media (max-width: 768px) {
.section-title {
font-size: 1.85rem !important;
line-height: 1.25;
}
.section-desc {
font-size: 1rem;
}
.section {
padding: var(--space-lg) 0;
}
}
@media (max-width: 480px) {
.section-title {
font-size: 1.55rem !important;
}
.section-header {
margin-bottom: var(--space-md);
}
}
/* ── 4. TWO-COLUMN CONTENT SECTIONS ────────────────────────── */
/* These use inline style="display:grid; grid-template-columns:…" */
/* Override them with !important at mobile breakpoints. */
@media (max-width: 768px) {
.two-col-section,
[class*="two-col"] {
grid-template-columns: 1fr !important;
gap: var(--space-md) !important;
}
/* About visual panel: reset negative-offset badge */
.about-visual-panel {
position: static !important;
margin-bottom: 3rem;
}
.about-visual-panel img {
width: 100%;
height: auto;
}
/* Move the floating badge inside the flow */
.floating-stat-badge,
.floating-badge-corner {
position: static !important;
width: auto !important;
max-width: 100% !important;
margin: 1rem 0 0 0 !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
border-radius: var(--radius-sm) !important;
}
}
/* ── 5. STATS GRID ─────────────────────────────────────────── */
@media (max-width: 992px) {
.stats-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 640px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.stat-number {
font-size: 2.25rem;
}
.stat-card {
padding: 1.75rem 1rem;
}
}
@media (max-width: 360px) {
.stats-grid {
grid-template-columns: 1fr !important;
}
}
/* ── 6. PRODUCTS GRID ─────────────────────────────────────── */
@media (max-width: 992px) {
.products-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 576px) {
.products-grid {
grid-template-columns: 1fr !important;
}
.product-image-container {
height: 200px;
}
}
/* ── 7. SERVICES GRID ─────────────────────────────────────── */
@media (max-width: 992px) {
.services-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 400px) {
.services-grid {
grid-template-columns: 1fr !important;
}
}
/* ── 8. WHY / CHECKLIST GRIDS ─────────────────────────────── */
@media (max-width: 768px) {
.why-grid {
grid-template-columns: 1fr !important;
}
.checklist-grid,
ul.checklist-grid {
grid-template-columns: 1fr !important;
gap: 0.75rem !important;
}
}
/* ── 9. GENERIC UTILITY GRIDS ─────────────────────────────── */
@media (max-width: 768px) {
.grid-3 {
grid-template-columns: 1fr !important;
}
.grid-2 {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 576px) {
.grid-4 {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 400px) {
.grid-4,
.grid-6 {
grid-template-columns: 1fr !important;
}
}
/* ── 10. CTA BANNER ───────────────────────────────────────── */
@media (max-width: 768px) {
.cta-banner {
flex-direction: column !important;
text-align: center;
padding: 2.5rem 1.5rem !important;
gap: var(--space-md);
border-radius: var(--radius-md);
}
.cta-title {
font-size: 1.65rem !important;
}
.cta-desc {
font-size: 0.95rem;
}
.cta-buttons {
flex-direction: column;
width: 100%;
gap: 0.75rem;
flex-shrink: unset;
}
.cta-buttons .btn {
width: 100%;
justify-content: center;
}
}
/* ── 11. CONTACT PAGE ─────────────────────────────────────── */
@media (max-width: 992px) {
.contact-layout {
grid-template-columns: 1fr !important;
gap: var(--space-lg);
}
}
@media (max-width: 576px) {
.contact-form-card {
padding: 1.75rem 1.25rem !important;
}
.contact-map-iframe {
height: 250px;
}
}
/* ── 12. FORMS (mobile-friendly touch targets) ────────────── */
@media (max-width: 768px) {
.form-control {
font-size: 1rem; /* prevents iOS zoom-in on focus */
padding: 0.9rem 1rem;
}
.form-group {
margin-bottom: 1.25rem;
}
/* Newsletter form: stack on mobile */
.newsletter-form .form-group {
flex-direction: column;
gap: 0.75rem;
}
.newsletter-form .form-control,
.newsletter-form .btn {
width: 100%;
}
}
/* ── 13. FOOTER ───────────────────────────────────────────── */
@media (max-width: 992px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--space-md);
}
}
@media (max-width: 576px) {
.footer-grid {
grid-template-columns: 1fr !important;
gap: var(--space-md);
}
footer {
padding: 3rem 0 1.5rem;
}
.footer-bottom {
flex-direction: column;
align-items: center;
gap: 0.5rem;
text-align: center;
}
}
/* ── 14. PAGE BANNER HEADINGS ─────────────────────────────── */
@media (max-width: 768px) {
.page-banner-section {
padding: 90px 0 40px 0 !important;
}
.page-banner-title {
font-size: 2rem !important;
line-height: 1.2 !important;
}
}
@media (max-width: 480px) {
.page-banner-title {
font-size: 1.65rem !important;
}
}
/* ── 15. EXPORT MAP ───────────────────────────────────────── */
@media (max-width: 768px) {
.export-map-container {
height: 320px;
}
.map-list-countries {
max-width: 96%;
bottom: 0.75rem;
left: 0.75rem;
gap: 0.35rem;
}
.map-country-tag {
font-size: 0.65rem;
padding: 0.25rem 0.55rem;
}
}
/* ── 16. LOGISTICS ANIMATION SECTION ──────────────────────── */
@media (max-width: 768px) {
.logistics-two-col {
grid-template-columns: 1fr !important;
gap: var(--space-md);
}
.logistics-right {
height: 400px !important;
}
.logistics-glass-grid {
grid-template-columns: repeat(2, 1fr) !important;
bottom: 10px;
}
.cargo-ship {
width: 160px;
left: 10%;
}
}
@media (max-width: 480px) {
.logistics-right {
height: 340px !important;
}
.logistics-glass-grid {
grid-template-columns: 1fr !important;
gap: 0.4rem;
}
.glass-info-card {
padding: 0.75rem !important;
}
.why-logistics-list {
grid-template-columns: 1fr !important;
}
.cargo-ship {
width: 120px;
left: 5%;
}
}
/* ── 17. BLOG / NEWS CARD GRIDS ───────────────────────────── */
@media (max-width: 768px) {
.blog-card-img {
height: 160px;
}
}
/* ── 18. MARQUEE / PARTNER LOGO ───────────────────────────── */
@media (max-width: 576px) {
.marquee-item {
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
}
}
/* ── 19. ACCORDION (FAQ) ──────────────────────────────────── */
@media (max-width: 576px) {
.accordion-header {
font-size: 0.95rem;
padding: 1rem 1.25rem;
}
.accordion-content {
padding: 0 1.25rem 1rem;
font-size: 0.9rem;
}
}
/* ── 20. BUTTONS – always full-width on very small phones ──── */
@media (max-width: 360px) {
.btn {
width: 100% !important;
justify-content: center;
padding: 0.9rem 1.25rem;
font-size: 0.85rem;
}
}
/* ── 21. SINGLE PRODUCT PAGE ──────────────────────────────── */
@media (max-width: 768px) {
.product-detail-grid {
grid-template-columns: 1fr !important;
}
.product-detail-image {
height: 260px !important;
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.product-detail-content {
padding: 1.75rem 1.25rem !important;
}
}
@media (max-width: 480px) {
.product-detail-actions {
flex-direction: column !important;
gap: 0.75rem !important;
}
.product-detail-actions .btn {
width: 100%;
justify-content: center;
}
}
/* ── 22. TESTIMONIALS / REVIEW CARDS ──────────────────────── */
@media (max-width: 576px) {
.testimonial-card,
.review-card {
padding: 1.5rem 1.25rem;
}
}
/* ── 23. MODAL (product quick-view) ───────────────────────── */
@media (max-width: 768px) {
.modal-body {
grid-template-columns: 1fr !important;
max-height: 90vh;
overflow-y: auto;
}
.modal-gallery-side {
height: 220px !important;
}
.modal-content-side {
padding: 1.25rem !important;
}
.modal-content {
margin: 1rem;
width: calc(100% - 2rem);
max-width: 100%;
border-radius: var(--radius-md);
}
}
/* ── 24. WHATSAPP WIDGET ──────────────────────────────────── */
@media (max-width: 576px) {
.whatsapp-widget {
width: 46px;
height: 46px;
bottom: 1rem;
right: 1rem;
}
.whatsapp-widget svg {
width: 22px;
height: 22px;
}
}
/* ── 25. CONTAINER PADDING ON VERY NARROW SCREENS ─────────── */
@media (max-width: 360px) {
.container {
padding: 0 0.9rem;
}
}
/* ── 26. IMAGE OVERFLOW GUARD ─────────────────────────────── */
@media (max-width: 992px) {
img {
max-width: 100%;
height: auto;
}
/* About page images can be constrained explicitly */
.about-visual-panel img,
.about-info-text img {
width: 100%;
border-radius: var(--radius-md);
}
}
/* ── 27. ARCHIVE PRODUCTS PAGE ────────────────────────────── */
@media (max-width: 576px) {
.products-filter {
gap: 0.5rem;
}
.filter-btn {
font-size: 0.8rem;
padding: 0.45rem 0.9rem;
}
}
/* ── 28. HERO OCEAN / SHIP – scale on small screens ──────── */
@media (max-width: 576px) {
.hero-ship {
width: 110px;
bottom: 8px;
}
.hero-ocean {
height: 90px;
}
}
/* ── 29. PREVENT FIXED-WIDTH ELEMENTS FROM OVERFLOWING ─────── */
@media (max-width: 480px) {
/* Any element that has an explicit pixel width set inline */
.hero-card-floating,
.glass-card,
.cta-banner,
.export-map-container,
.logistics-right {
max-width: 100%;
box-sizing: border-box;
}
}
/* ── 30. SAFE AREA / NOTCH SUPPORT (iPhone X+) ───────────── */
@supports (padding: max(0px)) {
header .container {
padding-left: max(1.1rem, env(safe-area-inset-left));
padding-right: max(1.1rem, env(safe-area-inset-right));
}
footer .container {
padding-left: max(1.1rem, env(safe-area-inset-left));
padding-right: max(1.1rem, env(safe-area-inset-right));
padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
}
/* ==========================================================
TARGETED BUG FIXES — v2 patch
Issue 1: Timeline nodes text overflowing on mobile
Issue 2: Quality Assurance / two-col text cut off on right
Issue 3: Hero section floating cards overlapping content
========================================================== */
/* ── FIX 1: TIMELINE NODES — Mobile layout overhaul ──────── */
/* The existing rule sets display:flex + align-items:center on
.timeline-node but the child has no width constraint, so
it bleeds out of the card on narrow viewports. */
@media (max-width: 992px) {
.timeline-container {
overflow-x: visible; /* kill the horizontal scroll trigger */
padding: 0;
}
.timeline-track {
display: flex !important;
flex-direction: column !important;
min-width: 0 !important; /* remove the 1000px min-width */
width: 100%;
gap: 1rem;
}
.timeline-node {
width: 100% !important;
min-width: 0;
display: grid !important; /* grid beats flex for this layout */
grid-template-columns: auto 36px 1fr;
grid-template-rows: auto auto;
align-items: center;
column-gap: 1rem;
row-gap: 0.2rem;
padding: 1rem 1.25rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
text-align: left !important;
box-sizing: border-box;
}
/* STEP label — column 1, spans both rows */
.timeline-node .timeline-step {
grid-column: 1;
grid-row: 1 / 3;
white-space: nowrap;
font-size: 0.7rem;
color: var(--secondary);
font-weight: 700;
}
/* Dot — column 2, row 1 only */
.timeline-node .timeline-dot {
grid-column: 2;
grid-row: 1;
margin: 0 auto !important;
width: 22px;
height: 22px;
flex-shrink: 0;
}
/* Title — column 3, row 1 */
.timeline-node .timeline-title {
grid-column: 3;
grid-row: 1;
margin: 0 !important;
font-size: 0.9rem;
color: var(--white) !important;
white-space: normal;
word-break: break-word;
}
/* Description
— column 3, row 2 */
.timeline-node > p {
grid-column: 3;
grid-row: 2;
font-size: 0.75rem !important;
color: #94A3B8;
margin: 0 !important;
padding: 0 !important;
line-height: 1.4;
white-space: normal;
word-break: break-word;
overflow-wrap: break-word;
max-width: 100%;
}
}
@media (max-width: 480px) {
.timeline-node {
grid-template-columns: auto 28px 1fr;
column-gap: 0.75rem;
padding: 0.85rem 1rem;
}
.timeline-node .timeline-step {
font-size: 0.65rem;
}
.timeline-node .timeline-dot {
width: 18px;
height: 18px;
}
.timeline-node .timeline-title {
font-size: 0.85rem;
}
.timeline-node > p {
font-size: 0.72rem !important;
}
}
/* ── FIX 1B: COMPANY INTRO (homepage) — justified text goes ragged on phones ── */
@media (max-width: 768px) {
#company-intro .about-text-panel p,
#company-intro .about-text-panel .section-desc {
text-align: left !important; /* justify creates uneven word-gaps on narrow screens */
word-break: break-word;
overflow-wrap: break-word;
}
#company-intro .about-text-panel > div {
text-align: left; /* keep "Read Full Profile" button left-aligned like the text */
}
}
/* ── FIX 2: QUALITY ASSURANCE — text cut off on right edge ── */
/* The two-col section uses inline style so the CSS class
override needs !important. Also ensure the text panel
never overflows its column. */
@media (max-width: 992px) {
/* Force single-column on tablets/phones */
#quality-assurance .two-col-section,
#quality-assurance [style*="grid-template-columns"] {
display: block !important;
width: 100% !important;
}
#quality-assurance .about-visual-panel,
#quality-assurance .about-text-panel {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
overflow: hidden;
}
#quality-assurance .about-visual-panel {
margin-bottom: 2rem;
}
#quality-assurance .about-text-panel p,
#quality-assurance .about-text-panel .section-desc {
text-align: left !important; /* justify causes ragged right on mobile */
word-break: break-word;
overflow-wrap: break-word;
max-width: 100%;
box-sizing: border-box;
}
/* Checklist grid inside the QA section */
#quality-assurance .checklist-grid,
#quality-assurance ul.checklist-grid {
grid-template-columns: 1fr !important;
gap: 0.75rem !important;
}
}
/* ── FIX 3: HERO — floating cards overlapping on mobile ───── */
/* On narrow screens the absolutely-positioned glass cards
(.hero-card-1/2/3) bleed outside the .hero-visual container
and cover the hero headline. We hide them below 992px and
also fix the hero container so it stacks properly. */
@media (max-width: 992px) {
/* Stack hero to single column */
.hero {
height: auto !important;
min-height: unset !important;
padding-top: 70px;
padding-bottom: 2.5rem;
display: flex;
align-items: center;
}
.hero .container {
display: flex !important;
flex-direction: column;
gap: 2rem;
width: 100%;
text-align: center;
align-items: center;
}
.hero-content {
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
order: 2; /* text below the visual */
}
.hero-visual {
order: 1;
width: 100%;
max-width: 480px;
height: 240px !important;
overflow: hidden;
border-radius: var(--radius-md);
position: relative;
}
/* Hide all three floating glass info cards — they can't fit */
.hero-card-1,
.hero-card-2,
.hero-card-3,
.hero-card-floating {
display: none !important;
}
/* Hero text sizing */
.hero-title {
font-size: 2.1rem !important;
line-height: 1.2;
}
.hero-desc {
font-size: 1rem;
max-width: 100%;
margin-bottom: 1.5rem;
}
.hero-tag {
font-size: 0.75rem;
margin-bottom: 1rem;
}
.hero-actions {
justify-content: center;
flex-wrap: wrap;
gap: 0.75rem;
}
}
@media (max-width: 576px) {
.hero {
padding-top: 70px;
padding-bottom: 2rem;
}
.hero-title {
font-size: 1.75rem !important;
}
.hero-visual {
height: 180px !important;
max-width: 100%;
}
.hero-actions {
flex-direction: column;
width: 100%;
}
.hero-actions .btn {
width: 100%;
justify-content: center;
padding: 0.9rem 1rem;
}
}
@media (max-width: 360px) {
.hero-title {
font-size: 1.5rem !important;
}
.hero-desc {
font-size: 0.9rem;
}
}
/* Hide product category badge — removed from all templates */
.product-category { display: none !important; }
/* ==========================================================
MOBILE HEADER — Complete Responsive Fix
Matches YLine Aqua drawer style:
• Logo left | Hamburger right (no CTA in top bar)
• Full-screen dark drawer with centred nav links
• Large "Request Quote" WhatsApp button at bottom of drawer
========================================================== */
/* ── Base reset: hide mobile elements on desktop ── */
.mobile-menu-btn {
display: none;
background: none;
border: none;
color: var(--white);
cursor: pointer;
padding: 0.5rem;
flex-shrink: 0;
margin-left: auto; /* always push to far right */
line-height: 0;
}
.mobile-menu-btn svg {
width: 28px;
height: 28px;
display: block;
}
.nav-cta-mobile {
display: none; /* hidden until drawer is open */
}
/* ── Mobile breakpoint (≤ 992px) ── */
@media (max-width: 992px) {
/* ─ Header bar ─ */
header .container {
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.25rem;
gap: 0;
flex-wrap: nowrap;
}
/* Logo stays left, never shrinks past readable size */
.logo {
flex: 1 1 auto;
min-width: 0;
}
.logo img,
.custom-logo {
height: 40px !important;
width: auto !important;
padding: 3px 8px !important;
}
/* Hide desktop "Request Quote" button completely */
.nav-cta {
display: none !important;
}
/* Hamburger — always visible, right of header */
.mobile-menu-btn {
display: flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 6px;
color: var(--white);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
transition: background 0.2s;
}
.mobile-menu-btn:hover,
.mobile-menu-btn:focus-visible {
background: rgba(255,255,255,0.18);
outline: none;
}
/* On light inner-page header, hamburger uses dark colours */
header.header-light .mobile-menu-btn {
color: var(--dark) !important;
background: rgba(15,23,42,0.06) !important;
border-color: rgba(15,23,42,0.12) !important;
}
header.header-light .mobile-menu-btn:hover {
background: rgba(15,23,42,0.12) !important;
}
.mobile-menu-btn svg {
width: 22px;
height: 22px;
}
/* ─ Full-screen slide-out drawer ─ */
nav .nav-links {
position: fixed;
top: 64px; /* matches header height above */
left: -100%;
width: 100%;
height: calc(100dvh - 64px);
background: var(--dark, #0f172a);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 2rem 1.5rem 2.5rem;
gap: 0;
overflow-y: auto;
z-index: 9999;
transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
border-top: 1px solid rgba(255,255,255,0.07);
}
nav .nav-links.active {
left: 0;
}
/* Individual nav links */
nav .nav-links .nav-link {
display: block;
width: 100%;
font-size: 1.15rem;
font-weight: 500;
color: rgba(255,255,255,0.88) !important;
text-align: center;
padding: 1.05rem 0;
border-bottom: 1px solid rgba(255,255,255,0.07);
letter-spacing: 0.01em;
transition: color 0.18s;
}
nav .nav-links .nav-link:hover,
nav .nav-links .nav-link.active {
color: var(--white) !important;
}
/* Remove underline pseudo-element inside drawer */
nav .nav-links .nav-link::after {
display: none;
}
/* ─ "Request Quote" CTA button inside drawer ─
Styled like YLine Aqua: full-width, bold, prominent */
.nav-cta-mobile {
display: block !important;
width: 100%;
max-width: 340px;
margin: 2rem auto 0 auto; /* centered horizontally in the drawer */
padding: 1rem 1.5rem;
background: var(--primary, #1e40af);
color: #ffffff !important;
font-size: 1rem;
font-weight: 700;
text-align: center;
border-radius: 50px; /* pill shape — matches YLine reference */
border: 2px solid rgba(255,255,255,0.18);
box-shadow: 0 4px 20px rgba(0,0,0,0.35);
letter-spacing: 0.02em;
text-transform: none;
transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.nav-cta-mobile:hover,
.nav-cta-mobile:focus-visible {
background: var(--secondary, #0ea5e9);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(0,0,0,0.4);
outline: none;
}
/* Prevent body scroll while menu is open */
body.menu-open {
overflow: hidden;
}
}
/* ── Very small screens (≤ 390px) ── */
@media (max-width: 390px) {
header .container {
padding: 0 1rem;
}
.logo img,
.custom-logo {
height: 34px !important;
}
.mobile-menu-btn {
width: 40px;
height: 40px;
}
nav .nav-links .nav-link {
font-size: 1.05rem;
padding: 0.9rem 0;
}
.nav-cta-mobile {
font-size: 0.95rem;
padding: 0.9rem 1.25rem;
}
}
/* ==========================================================
NAV-DRAWER wrapper — controls the full slide-out panel
(nav-links list + CTA button move together)
========================================================== */
/* Desktop: drawer is invisible — just a flex row pass-through */
.nav-drawer {
display: flex;
align-items: center;
gap: var(--space-md);
}
/* On desktop keep nav-links horizontal as before */
.nav-drawer .nav-links {
display: flex;
gap: var(--space-md);
}
@media (max-width: 992px) {
/* Drawer becomes the full-screen slide-out panel */
.nav-drawer {
position: fixed;
top: 64px;
left: -100%;
width: 100%;
height: calc(100dvh - 64px);
background: var(--dark, #0f172a);
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 1.5rem 1.5rem 3rem;
gap: 0;
overflow-y: auto;
z-index: 9998;
transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
border-top: 1px solid rgba(255,255,255,0.07);
}
.nav-drawer.active {
left: 0;
}
/* nav-links inside drawer: vertical stack, full width */
.nav-drawer .nav-links {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 0;
/* Override old fixed positioning from earlier rules */
position: static !important;
top: auto !important;
left: auto !important;
width: 100% !important;
height: auto !important;
background: transparent !important;
padding: 0 !important;
z-index: auto !important;
}
/* Override the old nav .nav-links fixed positioning */
nav .nav-links {
position: static !important;
top: auto !important;
left: auto !important;
height: auto !important;
background: transparent !important;
padding: 0 !important;
z-index: auto !important;
}
.nav-drawer .nav-links .nav-link,
nav .nav-links .nav-link {
display: block !important;
width: 100% !important;
font-size: 1.15rem !important;
font-weight: 500 !important;
color: rgba(255,255,255,0.88) !important;
text-align: center !important;
padding: 1.05rem 0 !important;
border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.nav-drawer .nav-links .nav-link:hover,
.nav-drawer .nav-links .nav-link.active {
color: #ffffff !important;
}
}
/* ── PATCH: Global text-align fixes & nav-cta mobile hide ── */
/* 1. Ensure no body text uses justify alignment (looks bad on mobile) */
.section-desc,
.about-text-panel p,
.about-text-panel .section-desc {
text-align: left;
}
/* 2. Ensure desktop "Request Quote" header button is hidden on ALL mobile viewports */
@media (max-width: 992px) {
a.nav-cta,
.nav-cta {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
/* ============================================================
MOBILE SPACING & ALIGNMENT OVERHAUL — Final Fix Patch
Eliminates excessive gaps between sections and boxes on all
mobile viewports. Desktop styles are completely untouched.
============================================================ */
/* ── SPACING VARIABLES: tighter on mobile ─────────────────── */
@media (max-width: 768px) {
:root {
--space-xl: 2.75rem; /* was 4.5rem — reduces section padding */
--space-lg: 1.75rem; /* was 2.5rem — reduces grid gaps & headers */
--space-md: 1.25rem; /* was 1.75rem — reduces card gaps */
}
}
@media (max-width: 480px) {
:root {
--space-xl: 2.25rem;
--space-lg: 1.5rem;
--space-md: 1rem;
}
}
/* ── SECTION PADDING ──────────────────────────────────────── */
@media (max-width: 768px) {
.section {
padding: 2.75rem 0 !important;
}
.section-header {
margin-bottom: 1.5rem !important;
}
}
@media (max-width: 480px) {
.section {
padding: 2.25rem 0 !important;
}
.section-header {
margin-bottom: 1.25rem !important;
}
}
/* ── HERO SECTION ─────────────────────────────────────────── */
@media (max-width: 768px) {
.hero {
padding-top: 70px !important;
padding-bottom: 2rem !important;
min-height: unset !important;
height: auto !important;
}
.hero .container {
gap: 1.5rem !important;
}
}
@media (max-width: 480px) {
.hero {
padding-bottom: 1.5rem !important;
}
.hero .container {
gap: 1.25rem !important;
}
}
/* ── PRODUCTS GRID ────────────────────────────────────────── */
@media (max-width: 768px) {
.products-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 1rem !important;
}
}
@media (max-width: 480px) {
.products-grid {
grid-template-columns: 1fr !important;
gap: 0.875rem !important;
}
}
/* ── SERVICES GRID ────────────────────────────────────────── */
@media (max-width: 768px) {
.services-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.875rem !important;
}
}
@media (max-width: 480px) {
.services-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.75rem !important;
}
}
/* ── STATS GRID ───────────────────────────────────────────── */
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.875rem !important;
}
.stat-card {
padding: 1.5rem 1rem !important;
}
}
@media (max-width: 480px) {
.stats-grid {
gap: 0.75rem !important;
}
}
/* ── WHY / REASONS GRID ───────────────────────────────────── */
@media (max-width: 768px) {
.why-grid {
grid-template-columns: 1fr !important;
gap: 0.875rem !important;
}
}
/* ── UTILITY GRIDS ────────────────────────────────────────── */
@media (max-width: 768px) {
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr !important;
gap: 0.875rem !important;
}
.grid-6 {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.75rem !important;
}
}
@media (max-width: 480px) {
.grid-4,
.grid-6 {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.75rem !important;
}
}
/* ── INDUSTRIES / INLINE-STYLED CARD GRIDS ───────────────── */
/* Sections where grid is set via inline style need !important */
@media (max-width: 768px) {
/* Inline grid-4 inside #industries-serve */
#industries-serve .container > div[style*="grid"],
#industries-serve .grid-4,
.industries-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.875rem !important;
}
/* Industry cards: reduce interior padding */
#industries-serve [style*="padding: 2.5rem"] {
padding: 1.25rem 1rem !important;
}
#industries-serve [style*="margin-bottom: 1.5rem"] {
margin-bottom: 0.875rem !important;
}
}
@media (max-width: 480px) {
#industries-serve .container > div[style*="grid"],
#industries-serve .grid-4,
.industries-grid {
grid-template-columns: 1fr !important;
gap: 0.75rem !important;
}
}
/* ── TWO-COL SECTIONS (inline style override) ─────────────── */
@media (max-width: 768px) {
.two-col-section,
[class*="two-col"],
div[style*="grid-template-columns: 1fr 1fr"],
div[style*="grid-template-columns:1fr 1fr"] {
display: block !important;
gap: 0 !important;
}
.two-col-section > *:not(:last-child),
[class*="two-col"] > *:not(:last-child) {
margin-bottom: 1.5rem !important;
}
.about-visual-panel {
margin-bottom: 1.5rem !important;
}
}
/* ── COMPANY INTRO SECTION ────────────────────────────────── */
@media (max-width: 768px) {
#company-intro .container {
display: block !important;
gap: 0 !important;
}
#company-intro .about-visual-panel {
margin-bottom: 1.5rem !important;
position: relative !important;
}
#company-intro .floating-stat-badge {
position: static !important;
width: auto !important;
max-width: 100% !important;
margin: 1rem 0 0 0 !important;
border-radius: var(--radius-sm) !important;
}
}
/* ── EXPORT MAP SECTION ───────────────────────────────────── */
@media (max-width: 768px) {
.export-map-container {
height: 280px !important;
}
.section-dark .section-header {
margin-bottom: 1.25rem !important;
}
}
/* ── LOGISTICS SECTION ────────────────────────────────────── */
@media (max-width: 768px) {
.logistics-two-col {
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
}
.logistics-right {
height: 360px !important;
}
.logistics-left {
padding-right: 0 !important;
}
.why-logistics-list {
grid-template-columns: 1fr 1fr !important;
gap: 1rem !important;
}
.logistics-glass-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.5rem !important;
bottom: 8px !important;
}
}
@media (max-width: 480px) {
.logistics-right {
height: 300px !important;
}
.why-logistics-list {
grid-template-columns: 1fr !important;
gap: 0.75rem !important;
}
.logistics-glass-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.4rem !important;
}
.glass-info-card {
padding: 0.65rem 0.75rem !important;
}
.glass-info-card h5 {
font-size: 0.75rem !important;
}
.glass-info-card p {
font-size: 0.65rem !important;
}
}
/* ── CTA BANNER ───────────────────────────────────────────── */
@media (max-width: 768px) {
.cta-banner {
padding: 2rem 1.25rem !important;
gap: 1.25rem !important;
}
}
/* ── FOOTER ───────────────────────────────────────────────── */
@media (max-width: 768px) {
footer {
padding-top: 2.5rem !important;
padding-bottom: 1.5rem !important;
}
.footer-grid {
gap: 1.25rem !important;
}
}
/* ── PROCESS TIMELINE SECTION ─────────────────────────────── */
@media (max-width: 768px) {
.timeline-track {
gap: 0.75rem !important;
}
.timeline-node {
padding: 0.9rem 1rem !important;
}
}
/* ── BLOG / NEWS CARDS ────────────────────────────────────── */
@media (max-width: 768px) {
.blog-card-content {
padding: 1.1rem !important;
}
}
/* ── ACCORDION / FAQ ──────────────────────────────────────── */
@media (max-width: 768px) {
.accordion-item {
margin-bottom: 0.625rem !important;
}
}
/* ── PARTNER LOGO CAROUSEL ────────────────────────────────── */
@media (max-width: 768px) {
.partner-logo-container {
padding: 1rem 0 !important;
}
}
/* ── SECTION HEADER MAX-WIDTH: full-width on mobile ────────── */
@media (max-width: 768px) {
.section-header {
max-width: 100% !important;
}
.section-title {
font-size: 1.75rem !important;
line-height: 1.25 !important;
}
.section-desc {
font-size: 0.95rem !important;
line-height: 1.6 !important;
}
.section-subtitle {
font-size: 0.7rem !important;
margin-bottom: 0.5rem !important;
}
}
/* ── CONTAINER HORIZONTAL PADDING ────────────────────────── */
@media (max-width: 480px) {
.container {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
@media (max-width: 360px) {
.container {
padding-left: 0.875rem !important;
padding-right: 0.875rem !important;
}
}
/* ── PREVENT INLINE-STYLE SPACING FROM OVERFLOWING ON MOBILE ─ */
@media (max-width: 768px) {
/* Any inline margin-top/bottom using space-lg or space-xl */
[style*="margin-bottom: var(--space-lg)"],
[style*="margin-bottom: var(--space-xl)"] {
margin-bottom: 1.5rem !important;
}
[style*="margin-top: var(--space-lg)"],
[style*="margin-top: var(--space-xl)"] {
margin-top: 1.5rem !important;
}
}
/* ── CARD INTERNAL PADDING – more compact on phones ────────── */
@media (max-width: 480px) {
.service-card,
.why-card,
.stat-card {
padding: 1.25rem 1rem !important;
}
.product-card-content {
padding: 1rem !important;
}
}
/* ============================================================
FINAL FIX PATCH v9
1. Hero: remove 100svh min-height on mobile (kills the gap)
2. About page: no justify text
============================================================ */
/* ── Hero: shrink to content height on mobile ─────────────── */
@media (max-width: 992px) {
.hero {
height: auto !important;
min-height: unset !important;
padding-top: 80px !important;
padding-bottom: 2.5rem !important;
}
.hero .container {
gap: 1.5rem !important;
}
}
@media (max-width: 768px) {
.hero {
padding-top: 75px !important;
padding-bottom: 2rem !important;
}
}
@media (max-width: 480px) {
.hero {
padding-top: 70px !important;
padding-bottom: 1.75rem !important;
}
.hero .container {
gap: 1.25rem !important;
}
}
/* ── About page / company intro: never justify text ────────── */
.section-desc,
.about-text-panel p,
.about-text-panel .section-desc,
#company-intro .section-desc,
#company-intro p,
.page-about-content p {
text-align: left !important;
}
/* ── Fix floating-stat-badge gap (bottom:-20px bleeds into whitespace) ── */
@media (max-width: 768px) {
.floating-stat-badge,
.floating-badge-corner {
position: static !important;
bottom: auto !important;
right: auto !important;
top: auto !important;
left: auto !important;
width: auto !important;
max-width: 100% !important;
margin: 0.75rem 0 0 0 !important;
display: inline-flex !important;
box-shadow: var(--shadow-sm) !important;
}
/* Ensure the visual panel doesn't carry excess bottom space */
.about-visual-panel {
padding-bottom: 0 !important;
margin-bottom: 1.5rem !important;
overflow: visible !important;
}
}
/* ============================================================
ISO BADGE GAP + TEXT COLOR — Final definitive fix
============================================================ */
/* Desktop: badge floats over image corner — no change needed */
/* Mobile: pull badge inline, remove the whitespace it leaves */
@media (max-width: 768px) {
.floating-badge-corner {
position: static !important;
top: auto !important; left: auto !important;
right: auto !important; bottom: auto !important;
display: flex !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0.85rem 1.25rem !important;
border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
border-top: none !important;
box-sizing: border-box !important;
background: var(--white) !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
/* ISO text always dark */
.floating-badge-corner > div:first-child {
color: var(--dark) !important;
}
/* "Standard Compliance" text always dark (not white) */
.floating-badge-corner > div:last-child,
.floating-badge-corner > div:nth-child(2) {
color: #374151 !important;
font-size: 0.72rem !important;
line-height: 1.35 !important;
}
/* Kill extra bottom space from the visual panel */
.about-visual-panel {
overflow: hidden !important;
margin-bottom: 1.5rem !important;
padding-bottom: 0 !important;
}
/* Collapse gap between sections */
#company-intro .container {
display: flex !important;
flex-direction: column !important;
gap: 1.5rem !important;
}
}
/* Extra tight on very small phones */
@media (max-width: 480px) {
.floating-badge-corner {
padding: 0.75rem 1rem !important;
}
.about-visual-panel {
margin-bottom: 1.25rem !important;
}
}
/* ── Boat Canvas — desktop only, decorative ── */
#boatNavCanvas {
display: block;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 1;
opacity: 0.6;
}
header {
overflow: hidden;
}
header .container {
position: relative;
z-index: 2;
}
/* On mobile the canvas was bleeding past the header bounds and
overlapping the page-banner title directly beneath it (About /
Products / Contact pages). Hiding it on mobile restores the
original "desktop only, decorative" intent. */
@media (max-width: 992px) {
#boatNavCanvas {
display: none !important;
}
}
/* ================================================================
MASTER MOBILE FIX — Complete spacing & alignment overhaul
All 16 sections addressed. Desktop untouched.
================================================================ */
/* ── 0. ROOT: Tighten spacing tokens on mobile ──────────────── */
@media (max-width: 768px) {
:root {
--space-xl: 2.5rem;
--space-lg: 1.5rem;
--space-md: 1.1rem;
--space-sm: 0.75rem;
}
}
@media (max-width: 480px) {
:root {
--space-xl: 2rem;
--space-lg: 1.25rem;
--space-md: 1rem;
}
}
/* ── 1. GLOBAL: kill overflow, consistent container padding ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
@media (max-width: 768px) {
.container { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
}
@media (max-width: 400px) {
.container { padding-left: 0.9rem !important; padding-right: 0.9rem !important; }
}
/* ── 2. SECTION PADDING: all sections uniform and tight ─────── */
@media (max-width: 768px) {
.section { padding: 2.5rem 0 !important; }
.section-header { margin-bottom: 1.4rem !important; max-width: 100% !important; }
.section-title { font-size: 1.75rem !important; line-height: 1.2 !important; }
.section-desc { font-size: 0.92rem !important; line-height: 1.6 !important; text-align: left !important; }
.section-subtitle { font-size: 0.7rem !important; margin-bottom: 0.4rem !important; display: block; }
}
@media (max-width: 480px) {
.section { padding: 2rem 0 !important; }
.section-header { margin-bottom: 1.1rem !important; }
.section-title { font-size: 1.55rem !important; }
}
/* ── 3. HERO: shrink to content, no min-height gap ──────────── */
@media (max-width: 992px) {
.hero {
height: auto !important;
min-height: unset !important;
padding: 80px 0 2rem !important;
}
.hero .container {
display: flex !important;
flex-direction: column !important;
gap: 1.5rem !important;
text-align: center !important;
align-items: center !important;
}
.hero-content {
display: flex; flex-direction: column; align-items: center;
order: 2;
}
.hero-visual {
order: 1; width: 100%; max-width: 100%;
height: 200px !important; overflow: hidden;
border-radius: var(--radius-md);
}
.hero-title { font-size: 2rem !important; line-height: 1.2; }
.hero-desc { font-size: 0.95rem; margin-bottom: 1.25rem; }
.hero-actions { justify-content: center; flex-wrap: wrap; gap: 0.75rem; }
.hero-contact-actions { justify-content: center; }
.hero-card-1, .hero-card-2, .hero-card-3, .hero-card-floating { display: none !important; }
}
@media (max-width: 576px) {
.hero { padding: 72px 0 1.5rem !important; }
.hero-title { font-size: 1.7rem !important; }
.hero-visual { height: 165px !important; }
.hero-actions { flex-direction: column; width: 100%; }
.hero-actions .btn { width: 100%; justify-content: center; }
.hero-contact-actions { flex-direction: column; width: 100%; }
.hero-contact-btn { width: 100%; }
}
/* ── 4. COMPANY INTRO (section 2): two-col → single col ─────── */
@media (max-width: 768px) {
#company-intro .container,
#company-intro .two-col-section {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
#company-intro .about-text-panel { order: 2; }
#company-intro .about-visual-panel {
order: 1;
position: relative !important;
overflow: hidden !important;
margin-bottom: 1.25rem !important;
padding-bottom: 0 !important;
}
#company-intro .about-visual-panel img { display: block; width: 100%; height: auto; }
/* 100% badge: docked below image, no floating gap */
.floating-stat-badge {
position: static !important;
bottom: auto !important; right: auto !important;
width: 100% !important; max-width: 100% !important;
margin: 0 !important;
border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
border-top: none !important;
padding: 0.85rem 1.25rem !important;
display: flex !important; align-items: center; gap: 1rem;
background: var(--white) !important;
box-shadow: 0 3px 10px rgba(0,0,0,0.07) !important;
box-sizing: border-box !important;
}
#company-intro .section-desc { text-align: left !important; }
#company-intro [style*="margin-top"] { margin-top: 1rem !important; }
}
/* ── 5. EXPORT MAP (section 3) ──────────────────────────────── */
@media (max-width: 768px) {
.export-map-container { height: 260px !important; }
.map-list-countries { bottom: 0.5rem !important; left: 0.5rem !important; gap: 0.3rem !important; }
.map-country-tag { font-size: 0.6rem !important; padding: 0.2rem 0.45rem !important; }
}
/* ── 6. PRODUCT CATALOG (section 4) ────────────────────────── */
@media (max-width: 768px) {
#product-catalog .grid-3 {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.85rem !important;
}
#product-catalog .section-header { text-align: left !important; }
.product-card { border-radius: var(--radius-sm) !important; }
.product-image-container { height: 160px !important; }
.product-info { padding: 0.85rem !important; }
.product-title { font-size: 0.9rem !important; margin-bottom: 0.35rem !important; }
.product-desc { font-size: 0.78rem !important; margin-bottom: 0.5rem !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-link { font-size: 0.78rem !important; }
}
@media (max-width: 480px) {
#product-catalog .grid-3 {
grid-template-columns: 1fr !important;
gap: 0.75rem !important;
}
.product-image-container { height: 180px !important; }
}
/* ── 7. WHY CHOOSE US (section 5): grid-3 → 1 col ──────────── */
@media (max-width: 768px) {
#why-choose-us .grid-3 {
grid-template-columns: 1fr !important;
gap: 0.75rem !important;
}
.why-card { padding: 1.1rem 1rem !important; }
#why-choose-us .section-header { text-align: left !important; margin-left: 0 !important; }
}
/* ── 8. INDUSTRIES WE SERVE (section 6) ────────────────────── */
@media (max-width: 768px) {
#industries-serve .grid-3 {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.85rem !important;
}
#industries-serve .grid-3 > div {
padding: 1.25rem 1rem !important;
}
#industries-serve .grid-3 > div > div:first-child {
width: 40px !important; height: 40px !important;
margin-bottom: 0.85rem !important;
}
#industries-serve .grid-3 > div > h3 {
font-size: 1rem !important; margin-bottom: 0.5rem !important;
}
#industries-serve .grid-3 > div > p { font-size: 0.8rem !important; }
#industries-serve .section-header { text-align: left !important; }
}
@media (max-width: 480px) {
#industries-serve .grid-3 {
grid-template-columns: 1fr !important;
}
}
/* ── 9. PROCESS TIMELINE (section 7) ───────────────────────── */
@media (max-width: 992px) {
.timeline-container { overflow-x: visible !important; padding: 0 !important; }
.timeline-line, .timeline-line-active { display: none !important; }
.timeline-track {
display: flex !important; flex-direction: column !important;
min-width: 0 !important; width: 100% !important;
gap: 0.6rem !important;
}
.timeline-node {
width: 100% !important; min-width: 0 !important;
display: flex !important; align-items: flex-start !important;
gap: 0.85rem !important;
padding: 0.9rem 1rem !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: var(--radius-sm) !important;
text-align: left !important; box-sizing: border-box;
}
.timeline-dot {
width: 20px !important; height: 20px !important;
margin: 0 !important; flex-shrink: 0 !important;
}
.timeline-step { font-size: 0.65rem !important; white-space: nowrap; }
.timeline-title { font-size: 0.88rem !important; margin: 0 0 0.2rem 0 !important; }
.timeline-node > p { font-size: 0.72rem !important; margin: 0 !important; color: #94A3B8; }
#process-timeline .section-header { text-align: left !important; }
}
/* ── 10. QUALITY ASSURANCE (section 8): two-col → single ────── */
@media (max-width: 768px) {
#quality-assurance .two-col-section,
#quality-assurance [style*="grid-template-columns"] {
display: flex !important; flex-direction: column !important; gap: 0 !important;
}
#quality-assurance .about-visual-panel {
width: 100% !important; margin-bottom: 1.25rem !important;
}
#quality-assurance .about-text-panel { width: 100% !important; }
#quality-assurance .section-desc { text-align: left !important; margin-bottom: 1rem !important; }
.checklist-grid {
grid-template-columns: 1fr 1fr !important;
gap: 0.5rem 0.75rem !important;
}
}
@media (max-width: 400px) {
.checklist-grid { grid-template-columns: 1fr !important; }
}
/* ── 11. LOGISTICS SECTION (section 9) ─────────────────────── */
@media (max-width: 768px) {
.logistics-two-col {
grid-template-columns: 1fr !important;
gap: 1.25rem !important;
}
.logistics-left { padding-right: 0 !important; }
.logistics-right { height: 320px !important; }
.why-logistics-list {
grid-template-columns: 1fr 1fr !important;
gap: 0.75rem !important;
}
.why-logistics-box { margin-top: 1rem !important; }
.logistics-glass-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.4rem !important;
bottom: 6px !important; left: 3% !important; width: 94% !important;
}
.glass-info-card { padding: 0.65rem 0.75rem !important; }
.glass-info-card h5 { font-size: 0.75rem !important; }
.glass-info-card p { font-size: 0.62rem !important; }
.cargo-ship { width: 130px !important; left: 8% !important; }
}
@media (max-width: 480px) {
.logistics-right { height: 280px !important; }
.why-logistics-list { grid-template-columns: 1fr !important; }
.logistics-glass-grid { grid-template-columns: 1fr 1fr !important; }
#logistics-services [style*="margin-top: 2rem"] { margin-top: 1rem !important; }
}
/* ── 12. COMPANY STATISTICS (section 10): grid-6 → 3×2 ─────── */
@media (max-width: 768px) {
#company-statistics .grid-6 {
grid-template-columns: repeat(3, 1fr) !important;
gap: 0.75rem !important;
}
.stat-card { padding: 1.25rem 0.75rem !important; }
.stat-number { font-size: 1.75rem !important; margin-bottom: 0.25rem !important; }
.stat-label { font-size: 0.7rem !important; }
}
@media (max-width: 400px) {
#company-statistics .grid-6 {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ── 13. TESTIMONIALS (section 11) ─────────────────────────── */
@media (max-width: 768px) {
#testimonials .grid-3 {
grid-template-columns: 1fr !important;
gap: 0.75rem !important;
}
#testimonials .grid-3 > div { padding: 1.5rem 1.1rem !important; }
#testimonials .section-header { text-align: left !important; margin-bottom: 1.25rem !important; }
}
/* ── 14. FAQ ACCORDION (section 12) ────────────────────────── */
@media (max-width: 768px) {
.accordion-item { margin-bottom: 0.5rem !important; }
.accordion-header { font-size: 0.9rem !important; padding: 0.9rem 1.1rem !important; }
.accordion-content { padding: 0 1.1rem 0.85rem !important; font-size: 0.85rem !important; }
#faqs .section-header { text-align: left !important; }
}
/* ── 15. BLOG / NEWS (section 13) ──────────────────────────── */
@media (max-width: 768px) {
#latest-news .grid-3 {
grid-template-columns: 1fr !important;
gap: 0.75rem !important;
}
.blog-card-img { height: 155px !important; }
.blog-card-content { padding: 1rem !important; }
.blog-card-title { font-size: 1rem !important; margin-bottom: 0.4rem !important; }
.blog-card-excerpt { font-size: 0.8rem !important; margin-bottom: 0.6rem !important; }
#latest-news .section-header { text-align: left !important; }
}
/* ── 16. CERTIFICATIONS (section 14): grid-6 → 3×2 ─────────── */
@media (max-width: 768px) {
#certifications .grid-6 {
grid-template-columns: repeat(3, 1fr) !important;
gap: 0.75rem !important;
}
#certifications .grid-6 > div { padding: 1rem 0.75rem !important; }
#certifications .grid-6 > div > div:first-child { font-size: 1.4rem !important; margin-bottom: 0.3rem !important; }
#certifications .section-header { text-align: left !important; }
}
@media (max-width: 400px) {
#certifications .grid-6 {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ── 17. PARTNER LOGO CAROUSEL (section 15) ─────────────────── */
@media (max-width: 768px) {
.partner-logo-container { padding: 0.85rem 0 !important; }
.partner-logo-item { font-size: 0.85rem !important; }
.partner-logo-track { gap: 1.5rem !important; }
}
/* ── 18. FINAL CTA (section 16) ────────────────────────────── */
@media (max-width: 768px) {
.cta-banner {
flex-direction: column !important;
text-align: center !important;
padding: 2rem 1.25rem !important;
gap: 1.25rem !important;
border-radius: var(--radius-md) !important;
}
.cta-title { font-size: 1.5rem !important; }
.cta-desc { font-size: 0.88rem !important; }
.cta-buttons { flex-direction: column !important; width: 100% !important; gap: 0.65rem !important; }
.cta-buttons .btn { width: 100% !important; justify-content: center !important; }
}
/* ── 19. FOOTER ─────────────────────────────────────────────── */
@media (max-width: 768px) {
footer { padding: 2.25rem 0 1.25rem !important; }
.footer-grid { grid-template-columns: 1fr 1fr !important; gap: 1.25rem !important; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
.footer-bottom { flex-direction: column !important; align-items: center !important; gap: 0.4rem !important; text-align: center !important; }
}
/* ── 20. GENERIC GRID FALLBACKS (anything not ID-targeted) ──── */
@media (max-width: 768px) {
.grid-2, .grid-3 { grid-template-columns: 1fr !important; gap: 0.85rem !important; }
.grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; }
.grid-6 { grid-template-columns: repeat(3, 1fr) !important; gap: 0.75rem !important; }
.two-col-section, [class*="two-col"] { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
}
@media (max-width: 480px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
.grid-6 { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ── 21. IMAGES never overflow ───────────────────────────────── */
@media (max-width: 992px) {
img { max-width: 100% !important; height: auto; }
}
/* ── 22. WHATSAPP WIDGET: don't overlap content ─────────────── */
@media (max-width: 768px) {
.whatsapp-widget { width: 46px !important; height: 46px !important; bottom: 1rem !important; right: 1rem !important; }
.whatsapp-widget svg { width: 22px !important; height: 22px !important; }
}
/* ================================================================
v13 PATCH: Hero gap kill + Logo bigger + Hamburger bigger +
WhatsApp button prominent + Contact button visible
================================================================ */
/* ── HERO: absolute kill of all height forcing on mobile ─────── */
@media (max-width: 992px) {
.hero {
height: auto !important;
min-height: unset !important;
max-height: unset !important;
padding-top: 75px !important;
padding-bottom: 1.75rem !important;
align-items: flex-start !important;
}
.hero .container {
display: flex !important;
flex-direction: column !important;
gap: 1.25rem !important;
text-align: center !important;
align-items: center !important;
padding-bottom: 0 !important;
}
.hero-content {
order: 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.hero-visual {
order: 1 !important;
width: 100% !important;
height: 180px !important;
overflow: hidden !important;
border-radius: var(--radius-md) !important;
flex-shrink: 0 !important;
}
.hero-desc {
font-size: 0.9rem !important;
margin-bottom: 1rem !important;
}
}
/* ── LOGO: bigger on mobile ──────────────────────────────────── */
@media (max-width: 992px) {
.logo img,
.custom-logo,
.logo a img {
height: 62px !important;
width: auto !important;
padding: 4px 10px !important;
background: #ffffff !important;
border-radius: 6px !important;
object-fit: contain !important;
}
}
@media (max-width: 480px) {
.logo img,
.custom-logo,
.logo a img {
height: 56px !important;
}
}
/* ── HAMBURGER MENU BUTTON: bigger, bolder ───────────────────── */
@media (max-width: 992px) {
.mobile-menu-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 52px !important;
height: 52px !important;
border-radius: 8px !important;
background: rgba(255,255,255,0.12) !important;
border: 1.5px solid rgba(255,255,255,0.25) !important;
flex-shrink: 0 !important;
}
.mobile-menu-btn svg {
width: 28px !important;
height: 28px !important;
stroke-width: 2.5 !important;
}
/* On inner pages (light header) */
header.header-light .mobile-menu-btn {
background: rgba(15,23,42,0.08) !important;
border-color: rgba(15,23,42,0.18) !important;
color: var(--dark) !important;
}
}
@media (max-width: 390px) {
.mobile-menu-btn {
width: 46px !important;
height: 46px !important;
}
.mobile-menu-btn svg {
width: 24px !important;
height: 24px !important;
}
}
/* ── WHATSAPP FLOATING BUTTON: larger, more visible ─────────── */
.whatsapp-widget {
width: 58px !important;
height: 58px !important;
bottom: 1.25rem !important;
right: 1.25rem !important;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45) !important;
z-index: 9999 !important;
}
.whatsapp-widget svg {
width: 30px !important;
height: 30px !important;
}
@media (max-width: 768px) {
.whatsapp-widget {
width: 54px !important;
height: 54px !important;
bottom: 1rem !important;
right: 1rem !important;
}
.whatsapp-widget svg {
width: 27px !important;
height: 27px !important;
}
}
/* ── CONTACT / REQUEST QUOTE BUTTON in mobile drawer ────────── */
@media (max-width: 992px) {
.nav-cta-mobile {
display: block !important;
width: calc(100% - 2rem) !important;
max-width: 320px !important;
margin: 1.75rem auto 0 auto !important;
padding: 1rem 1.5rem !important;
background: #25D366 !important; /* WhatsApp green — stands out */
color: #ffffff !important;
font-size: 1rem !important;
font-weight: 700 !important;
text-align: center !important;
border-radius: 50px !important;
border: none !important;
box-shadow: 0 4px 18px rgba(37,211,102,0.35) !important;
letter-spacing: 0.02em !important;
}
.nav-cta-mobile:hover {
background: #1ebe5d !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 24px rgba(37,211,102,0.45) !important;
}
}
/* ── Header container: ensure logo + hamburger aligned ──────── */
@media (max-width: 992px) {
header .container {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
height: 70px !important;
padding: 0 1.1rem !important;
gap: 0 !important;
}
.logo { flex: 1 1 auto !important; min-width: 0 !important; }
}
/* ── FIX: Mobile page-banner overlapping the fixed header ─────────────
Root cause: the generic ".section" / ".section-title" mobile resets
above share the same specificity as ".page-banner-section" /
".page-banner-title" and sit later in the file, so they silently won
and collapsed the banner's top padding to ~32-40px — less than the
~70px fixed header — on About / Products / Contact pages. These
compound selectors use one extra simple selector so they reliably
take priority regardless of source order. */
@media (max-width: 768px) {
section.page-banner-section {
padding: 110px 0 50px 0 !important;
}
h1.page-banner-title,
.page-banner-title.section-title {
font-size: 2rem !important;
line-height: 1.25 !important;
}
}
@media (max-width: 480px) {
section.page-banner-section {
padding: 100px 0 45px 0 !important;
}
h1.page-banner-title,
.page-banner-title.section-title {
font-size: 1.65rem !important;
}
}