:root {
color-scheme: light;
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
/* PARS Logo Color Theme - Exact Colors from Logo Analysis */
/* 1. Dark Blue-Grey (#2E455A) - Main Text & Outline */
/* 2. Orange (#EA6229) - Star Symbol/Accent */
/* 3. Off-White (#F5F5F5) - Background */
/* 4. Light Grey (#97A0A9) - Minor Shading */
--bg: #F5F5F5;
--surface: #ffffff;
--tinted: #F5F5F5;
--text: #2E455A;
--muted: #97A0A9;
--primary: #2E455A;
--accent: #EA6229;
--secondary: #EA6229;
--border: #97A0A9;
--hover: #1e3447;
--gradient-start: #2E455A;
--gradient-end: #EA6229;
--gradient-accent: #EA6229;
--success: #10b981;
--warning: #f59e0b;
--shadow-sm: 0 2px 4px rgba(46, 69, 90, 0.08);
--shadow-md: 0 4px 12px rgba(46, 69, 90, 0.12), 0 2px 4px rgba(46, 69, 90, 0.08);
--shadow-lg: 0 12px 24px rgba(46, 69, 90, 0.15), 0 4px 8px rgba(46, 69, 90, 0.1);
--shadow-xl: 0 20px 40px rgba(46, 69, 90, 0.2), 0 8px 16px rgba(46, 69, 90, 0.15);
--shadow-glow: 0 0 30px rgba(234, 98, 41, 0.3);
}
/* OLD THEME - Backup colors (to restore: uncomment this and comment current theme above)
:root {
color-scheme: light;
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--bg: #ffffff;
--surface: #ffffff;
--tinted: #f1f5f9;
--text: #0f172a;
--muted: #64748b;
--primary: #0c4a6e;
--accent: #0284c7;
--secondary: #06b6d4;
--border: #e2e8f0;
--hover: #075985;
--gradient-start: #0c4a6e;
--gradient-end: #0284c7;
--gradient-accent: linear-gradient(135deg, #0c4a6e 0%, #0284c7 50%, #06b6d4 100%);
--success: #10b981;
--warning: #f59e0b;
--shadow-sm: 0 2px 4px rgba(12, 74, 110, 0.08);
--shadow-md: 0 4px 12px rgba(12, 74, 110, 0.12), 0 2px 4px rgba(12, 74, 110, 0.08);
--shadow-lg: 0 12px 24px rgba(12, 74, 110, 0.15), 0 4px 8px rgba(12, 74, 110, 0.1);
--shadow-xl: 0 20px 40px rgba(12, 74, 110, 0.2), 0 8px 16px rgba(12, 74, 110, 0.15);
--shadow-glow: 0 0 30px rgba(2, 132, 199, 0.3);
}
*/
/* Animated Gradient Background */
@keyframes gradientShift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInFromBottom {
from {
opacity: 0;
transform: translateY(50px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes glow {
0%, 100% {
box-shadow: 0 0 20px rgba(46, 69, 90, 0.2);
}
50% {
box-shadow: 0 0 30px rgba(234, 98, 41, 0.4);
}
}
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes slideInScale {
from {
opacity: 0;
transform: scale(0.9) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-size: 16px;
line-height: 1.6;
min-height: 100vh;
position: relative;
letter-spacing: -0.01em;
word-spacing: -0.05em;
cursor: url('data:image/svg+xml;utf8,') 16 16, auto;
}
a, button, .primary-btn, .secondary-btn, .chatbot-toggle, .nav-link, input, textarea, select {
cursor: url('data:image/svg+xml;utf8,') 17 17, pointer;
}
body::before {
content: '';
position: fixed;
inset: 0;
background: var(--bg);
z-index: -1;
pointer-events: none;
}
/* Ensure main content is visible */
main {
position: relative;
z-index: 1;
}
.site-header {
position: relative;
z-index: 100;
}
body::after {
content: '';
position: fixed;
inset: 0;
background: transparent;
z-index: -1;
pointer-events: none;
}
/* Hero Slider Styles */
.hero-slider,
.hero-section {
position: relative;
width: 100%;
height: 480px;
overflow: hidden;
margin-top: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-slide,
.hero-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
visibility: visible;
transition: opacity 0.8s ease-in-out;
}
.hero-slide.active {
opacity: 1 !important;
z-index: 2 !important;
visibility: visible !important;
display: flex !important;
}
.hero-slide-overlay,
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.08) 100%);
z-index: 1;
backdrop-filter: blur(0px);
}
.hero-slide-content {
position: relative;
z-index: 10;
text-align: center;
color: white;
max-width: 900px;
padding: 2rem 2rem;
background: transparent;
border-radius: 0;
backdrop-filter: none;
box-shadow: none;
border: none;
}
.hero-slide-content h1 {
font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: 900;
margin: 0 0 1rem 0;
color: #ffffff !important;
text-shadow:
0 2px 8px rgba(0, 0, 0, 0.8),
0 4px 16px rgba(0, 0, 0, 0.6),
0 0 30px rgba(0, 0, 0, 0.5),
0 0 60px rgba(0, 0, 0, 0.4);
animation: fadeInUp 1s ease 0.2s both;
letter-spacing: -0.02em;
line-height: 1.15;
-webkit-text-fill-color: #ffffff !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
position: relative;
z-index: 10;
}
.hero-slide-content p {
font-size: clamp(1.1rem, 2.2vw, 1.5rem);
color: #ffffff !important;
font-weight: 600;
text-shadow:
0 2px 6px rgba(0, 0, 0, 0.8),
0 4px 12px rgba(0, 0, 0, 0.6),
0 0 20px rgba(0, 0, 0, 0.5),
0 0 40px rgba(0, 0, 0, 0.4);
animation: fadeInUp 1s ease 0.4s both;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
position: relative;
z-index: 10;
margin: 0;
}
.hero-slider-controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 2rem;
z-index: 100 !important;
pointer-events: none;
}
.hero-slider-controls button {
pointer-events: all !important;
z-index: 101 !important;
}
.hero-slider-prev,
.hero-slider-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.9) !important;
border: none !important;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 2rem;
color: var(--primary) !important;
cursor: pointer !important;
display: flex !important;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
pointer-events: all !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
z-index: 100 !important;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.hero-slider-prev {
left: 2rem;
}
.hero-slider-next {
right: 2rem;
}
/* Responsive slider buttons */
@media (max-width: 768px) {
.hero-slider-prev,
.hero-slider-next {
width: 40px;
height: 40px;
font-size: 1.5rem;
}
.hero-slider-prev {
left: 1rem;
}
.hero-slider-next {
right: 1rem;
}
}
.hero-slider-prev:hover,
.hero-slider-next:hover {
background: white !important;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.hero-slider-prev:active,
.hero-slider-next:active {
transform: scale(0.95);
}
.hero-slider-prev:hover,
.hero-slider-next:hover {
background: white;
transform: scale(1.1);
}
.hero-slider-dots {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.75rem;
z-index: 3;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.8);
}
.dot.active {
background: white;
width: 32px;
border-radius: 6px;
}
/* Form Success Message */
.form-success {
background: linear-gradient(135deg, rgba(46, 69, 90, 0.12) 0%, rgba(234, 98, 41, 0.1) 100%);
color: var(--accent);
padding: 1.5rem 2rem;
border-radius: 16px;
margin-bottom: 1.5rem;
text-align: left;
font-weight: 600;
font-size: 1.05rem;
animation: slideDown 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border-left: 5px solid var(--accent);
box-shadow: var(--shadow-md), 0 0 20px rgba(234, 98, 41, 0.15);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.form-success::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: var(--gradient-accent);
box-shadow: 0 0 10px rgba(234, 98, 41, 0.5);
}
.form-success::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: rgba(234, 98, 41, 0.1);
border-radius: 50%;
transform: translate(30%, -30%);
}
.form-success p {
margin: 0;
color: var(--accent);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Page Loader */
.page-loader {
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 0.98);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.3s ease, visibility 0.3s ease;
pointer-events: none;
}
.page-loader.hidden {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
display: none !important;
z-index: -1 !important;
}
.loader-content {
text-align: center;
}
.loader-spinner {
width: 50px;
height: 50px;
border: 4px solid var(--tinted);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 1rem;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.loader-content p {
color: var(--primary);
font-weight: 600;
font-size: 1.1rem;
}
img {
max-width: 100%;
display: block;
}
.container {
width: min(1200px, 95vw);
margin: 0 auto;
padding: 0 1rem;
}
.site-header {
background: rgba(255, 255, 255, 0.98);
border-bottom: 1px solid rgba(226, 232, 240, 0.8);
position: sticky;
top: 0;
z-index: 99;
box-shadow: 0 8px 32px rgba(46, 69, 90, 0.08);
backdrop-filter: blur(20px) saturate(180%);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header:hover {
box-shadow: 0 12px 48px rgba(46, 69, 90, 0.12);
border-bottom-color: rgba(234, 98, 41, 0.3);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
gap: 0.75rem;
overflow: visible;
max-width: 100%;
width: 100%;
flex-wrap: nowrap;
}
.branding {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
transition: transform 0.3s ease, opacity 0.3s ease;
min-width: 0;
flex-shrink: 0;
margin-right: 0.5rem;
padding-left: 0;
}
.branding:hover {
transform: scale(1.02);
opacity: 0.9;
}
.branding:focus {
outline: 2px solid var(--accent);
outline-offset: 4px;
border-radius: 8px;
}
/* Header logo: fixed height, aspect ratio preserved, aligned with brand title */
.branding img {
height: 60px;
width: auto;
max-width: 140px;
object-fit: contain;
object-position: center;
display: block;
flex-shrink: 0;
}
.logo-badge {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--primary);
display: grid;
place-items: center;
color: #fff;
font-weight: 700;
font-size: 1.25rem;
}
.logo-image {
width: auto;
height: 38px;
object-fit: contain;
display: block;
flex-shrink: 0;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
image-rendering: optimizeQuality;
/* Ensure full image is visible - no clipping */
object-position: center;
overflow: visible;
padding: 1px 0;
}
.brand-title {
font-size: 1rem;
font-weight: 700;
margin: 0;
color: var(--primary);
letter-spacing: -0.01em;
line-height: 1.2;
white-space: nowrap;
}
.brand-subtitle {
margin: 0;
color: var(--accent);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.02em;
word-spacing: -0.05em;
}
.main-nav {
display: flex;
gap: 0.35rem;
flex: 1 1 auto;
justify-content: center;
padding-left: 0.75rem;
padding-right: 0.75rem;
flex-wrap: nowrap;
white-space: nowrap;
min-width: 0;
margin-left: 0;
margin-right: 0;
}
.main-nav a {
text-decoration: none;
color: var(--muted);
font-weight: 500;
position: relative;
padding: 0.4rem 0.55rem;
border-radius: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
letter-spacing: -0.01em;
word-spacing: -0.05em;
white-space: nowrap;
font-size: 0.9rem;
flex-shrink: 0;
}
.main-nav a:hover {
color: var(--primary);
background: rgba(46, 69, 90, 0.05);
}
.main-nav a::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 3px;
background: var(--accent);
border-radius: 2px 2px 0 0;
transform: translateX(-50%);
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-nav a:hover::after {
width: 80%;
}
/* Mild highlight for Track Shipment navigation link */
.main-nav a[data-scroll="container-tracking"],
.main-nav a[href="#container-tracking"] {
background: rgba(234, 98, 41, 0.08);
color: var(--accent);
font-weight: 600;
}
.main-nav a[data-scroll="container-tracking"]::after,
.main-nav a[href="#container-tracking"]::after {
width: 80%;
background: var(--accent);
box-shadow: 0 0 8px rgba(234, 98, 41, 0.4);
}
.primary-btn,
.secondary-btn,
.ghost-btn {
border: none;
border-radius: 999px;
padding: 0.75rem 1.5rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.primary-btn {
background: var(--accent);
color: #fff;
border: none;
box-shadow: 0 4px 12px rgba(234, 98, 41, 0.25);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
font-weight: 600;
letter-spacing: 0.3px;
}
.primary-btn:hover {
background: #d4551f;
box-shadow: 0 6px 16px rgba(234, 98, 41, 0.35);
transform: translateY(-1px);
}
.primary-btn:hover {
background: #d4551f;
box-shadow: 0 6px 16px rgba(234, 98, 41, 0.35);
transform: translateY(-1px);
}
.primary-btn:active {
transform: translateY(-1px) scale(1);
box-shadow: 0 4px 16px rgba(234, 98, 41, 0.3);
}
.secondary-btn {
background: #ffffff;
color: var(--primary);
border: 2px solid var(--primary);
font-weight: 600;
transition: all 0.3s ease;
}
.secondary-btn:hover {
background: var(--primary);
color: #ffffff;
border-color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(8, 145, 178, 0.2);
}
.ghost-btn {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
}
.ghost-btn:hover {
background: var(--tinted);
}
.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover {
transition: all 0.2s ease;
}
.header-cta {
display: flex;
gap: 0.4rem;
align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
flex-shrink: 0;
flex-grow: 0;
margin-left: 0;
padding-right: 0;
min-width: fit-content;
}
.header-cta .ghost-btn,
.header-cta .secondary-btn,
.header-cta .primary-btn {
white-space: nowrap;
flex-shrink: 1;
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
}
.header-cta .primary-btn {
padding: 0.5rem 0.9rem;
}
.hero {
padding: 1.75rem 0;
position: relative;
background: var(--tinted);
border-bottom: 1px solid var(--border);
margin-top: 0;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: start;
position: relative;
z-index: 1;
}
@media (max-width: 968px) {
.hero-grid {
grid-template-columns: 1fr;
}
}
.hero-visual {
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
}
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
font-size: 0.75rem;
font-weight: 600;
}
h1 {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
line-height: 1.15;
margin: 0.5rem 0;
font-weight: 600;
color: var(--text);
}
h2 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
line-height: 1.2;
margin: 0.5rem 0;
font-weight: 600;
color: var(--text);
}
h3 {
font-size: 1.35rem;
line-height: 1.25;
margin: 0.5rem 0;
font-weight: 600;
color: var(--text);
}
.lead {
color: var(--muted);
font-size: 1.05rem;
line-height: 1.6;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 1.75rem 0;
}
.hero-stats {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.stat-value {
font-size: 2rem;
font-weight: 700;
margin: 0;
}
.stat-label {
margin: 0;
color: var(--muted);
}
.hero-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 20px;
padding: 1.75rem;
box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.9);
border: 2px solid rgba(226, 232, 240, 0.8);
position: relative;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
}
.hero-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: var(--gradient-accent);
border-radius: 24px 24px 0 0;
box-shadow: 0 2px 10px rgba(234, 98, 41, 0.3);
}
.hero-card::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: rgba(234, 98, 41, 0.05);
animation: float 20s ease-in-out infinite;
pointer-events: none;
}
.hero-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl), 0 0 30px rgba(234, 98, 41, 0.15);
border-color: var(--accent);
}
.hero-card .quick-quote-form > div[style*="grid"] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 768px) {
.hero-card .quick-quote-form > div[style*="grid"] {
grid-template-columns: 1fr !important;
}
}
.quote-form input,
.quote-form select {
width: 100%;
}
.quote-form input:focus,
.quote-form select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(0, 61, 130, 0.1);
}
.section {
padding: 4rem 0;
position: relative;
}
.section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.tinted {
background: var(--tinted);
}
/* About Section Styles */
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
.about-text {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.about-lead {
font-size: 1.2rem;
font-weight: 500;
color: var(--primary);
line-height: 1.7;
}
.about-text p {
color: var(--text);
line-height: 1.8;
margin: 0;
}
.about-features {
display: grid;
gap: 1.5rem;
}
.about-feature-item {
display: flex;
gap: 1.5rem;
align-items: flex-start;
padding: 2.5rem;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 20px;
border: 2px solid var(--border);
box-shadow: var(--shadow-md);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
transform: translateX(-30px);
position: relative;
overflow: hidden;
}
.about-feature-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: var(--gradient-accent);
transform: scaleY(0);
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 10px rgba(234, 98, 41, 0.5);
}
.about-feature-item:hover::before {
transform: scaleY(1);
}
.about-feature-item::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: var(--gradient-accent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.5s;
}
.about-feature-item:hover::after {
opacity: 0.2;
}
.about-feature-item.animate-in {
opacity: 1;
transform: translateX(0);
animation: fadeInLeft 0.6s ease forwards;
}
.about-feature-item:nth-child(1) { animation-delay: 0.1s; }
.about-feature-item:nth-child(2) { animation-delay: 0.2s; }
.about-feature-item:nth-child(3) { animation-delay: 0.3s; }
.about-feature-item:nth-child(4) { animation-delay: 0.4s; }
.about-feature-item:hover {
transform: translateY(-8px) scale(1.01);
box-shadow: var(--shadow-xl), 0 0 25px rgba(2, 132, 199, 0.15);
border-color: var(--accent);
background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
}
.feature-icon {
width: 48px;
height: 48px;
background: var(--gradient-accent);
color: white;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.25rem;
flex-shrink: 0;
box-shadow: var(--shadow-md), 0 0 15px rgba(234, 98, 41, 0.3);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.feature-icon::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
opacity: 0;
transition: opacity 0.3s;
}
.feature-icon:hover::before {
opacity: 1;
}
.about-feature-item:hover .feature-icon {
transform: scale(1.15) rotate(5deg);
box-shadow: var(--shadow-lg), 0 0 25px rgba(234, 98, 41, 0.4);
}
.about-feature-item h4 {
margin: 0 0 0.5rem 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
}
.about-feature-item p {
margin: 0;
color: var(--muted);
font-size: 0.95rem;
line-height: 1.6;
}
@media (max-width: 968px) {
.about-content {
grid-template-columns: 1fr;
}
.service-card {
min-height: 320px;
}
}
.gradient-band {
background: var(--primary);
color: #fff;
position: relative;
overflow: hidden;
}
.band-grid {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 2rem;
align-items: center;
justify-content: space-between;
}
.band-grid h2 {
color: #fff;
margin-top: 0.5rem;
}
.gradient-band p {
color: rgba(255, 255, 255, 0.9);
}
.gradient-band .eyebrow {
color: rgba(255, 255, 255, 0.75);
}
.band-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.section-header {
text-align: center;
max-width: 800px;
margin: 0 auto 3rem;
position: relative;
padding-bottom: 1.5rem;
}
.section-header::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--accent);
border-radius: 2px;
}
.section-header .eyebrow {
display: inline-block;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent);
margin-bottom: 1rem;
padding: 0.5rem 1.25rem;
background: rgba(3, 105, 161, 0.1);
border-radius: 50px;
}
.section-header h2 {
font-size: clamp(2.25rem, 4.5vw, 3rem);
font-weight: 800;
line-height: 1.2;
margin: 0 0 1.5rem 0;
background: var(--gradient-accent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.02em;
filter: drop-shadow(0 2px 4px rgba(234, 98, 41, 0.1));
}
.section-header p {
font-size: 1.125rem;
line-height: 1.7;
color: var(--muted);
margin: 0;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
}
.service-card {
background: #ffffff;
border-radius: 20px;
padding: 0;
border: 2px solid var(--border);
min-height: 380px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 1;
transform: translateY(0) scale(1);
}
.service-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: rgba(234, 98, 41, 0.15);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.5s;
z-index: 4;
}
.service-card:hover::after {
opacity: 1;
}
.service-card.animate-in {
opacity: 1;
transform: translateY(0) scale(1);
animation: slideInScale 0.6s ease forwards;
}
.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }
.service-card:nth-child(5) { animation-delay: 0.5s; }
.service-card:nth-child(6) { animation-delay: 0.6s; }
.service-card:nth-child(7) { animation-delay: 0.7s; }
.service-card:nth-child(8) { animation-delay: 0.8s; }
.service-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
z-index: 3;
}
.service-card:hover::before {
left: 100%;
}
.service-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(46, 69, 90, 0.9) 0%, rgba(61, 90, 115, 0.8) 50%, rgba(234, 98, 41, 0.85) 100%);
z-index: 1;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover {
transform: translateY(-12px) scale(1.03);
box-shadow: var(--shadow-xl), var(--shadow-glow);
border-color: var(--accent);
}
.service-card:hover .service-card-overlay {
background: var(--primary);
}
.service-card-content {
position: relative;
z-index: 2;
padding: 2.5rem;
color: #ffffff;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
transition: all 0.4s ease;
}
.service-card:hover .service-card-content {
padding-bottom: 3rem;
}
.service-card-content h3 {
color: #ffffff;
margin-top: 0;
font-size: 1.5rem;
font-weight: 700;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.service-card:hover .service-card-content h3 {
transform: translateY(-5px);
}
.service-card-content p {
color: rgba(255, 255, 255, 0.95);
line-height: 1.6;
font-size: 0.95rem;
margin-top: 0.75rem;
margin-bottom: 0;
}
.service-card:hover {
transform: translateY(-8px) scale(1.01);
box-shadow: var(--shadow-xl);
}
/* Quick Quote Section */
.quick-quote-section {
background: var(--gradient-accent);
color: white;
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.quick-quote-section::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
pointer-events: none;
animation: float 15s ease-in-out infinite;
}
.quick-quote-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
pointer-events: none;
}
.quick-quote-card {
background: rgba(255, 255, 255, 0.98);
border-radius: 24px;
padding: 4rem;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.8);
max-width: 850px;
margin: 0 auto;
position: relative;
backdrop-filter: blur(20px) saturate(180%);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(255, 255, 255, 0.5);
}
.quick-quote-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: var(--gradient-accent);
border-radius: 24px 24px 0 0;
box-shadow: 0 2px 10px rgba(234, 98, 41, 0.4);
}
.quick-quote-card:hover {
transform: translateY(-5px);
box-shadow: 0 35px 90px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.7), var(--shadow-glow);
}
.quick-quote-content h2 {
color: var(--primary);
margin-top: 0;
}
.quick-quote-content p {
color: var(--muted);
margin-bottom: 2rem;
}
.quick-quote-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.quote-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.quick-quote-form input,
.quick-quote-form select {
padding: 1rem 1.5rem;
border: 2px solid var(--border);
border-radius: 12px;
font-size: 1rem;
font-family: inherit;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--text);
font-weight: 500;
}
.quick-quote-form input::placeholder,
.quick-quote-form select::placeholder {
color: var(--muted);
opacity: 0.6;
font-weight: 400;
}
.quick-quote-form input:focus,
.quick-quote-form select:focus {
outline: none;
border-color: var(--accent);
background: #ffffff;
box-shadow: 0 0 0 5px rgba(234, 98, 41, 0.12), 0 6px 20px rgba(234, 98, 41, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
transform: translateY(-2px);
}
.quick-quote-form input:hover:not(:focus),
.quick-quote-form select:hover:not(:focus) {
border-color: var(--secondary);
background: #ffffff;
box-shadow: 0 2px 8px rgba(234, 98, 41, 0.1);
}
.quick-quote-form select {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2341506b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
}
.quick-quote-form select option {
padding: 0.75rem;
background: white;
color: var(--text);
}
.ai-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
align-items: center;
}
.checklist {
list-style: none;
padding: 0;
margin: 1.5rem 0;
}
.checklist li::before {
content: '✓';
margin-right: 0.5rem;
color: var(--accent);
font-weight: 700;
font-size: 1.1rem;
}
.ai-widget {
background: #ffffff;
border-radius: 8px;
padding: 2rem;
border: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 1rem;
}
.ai-widget label {
display: flex;
flex-direction: column;
font-weight: 600;
color: var(--text);
gap: 0.25rem;
}
.ai-widget input,
.ai-widget select,
.ai-widget textarea,
.contact-form input,
.contact-form textarea,
.footer-input input {
border-radius: 12px;
border: 1px solid var(--border);
padding: 0.75rem 1rem;
font-size: 1rem;
font-family: inherit;
}
.ai-widget textarea {
min-height: 70px;
resize: vertical;
}
.ai-output {
min-height: 100px;
background: var(--bg);
border-radius: 12px;
padding: 1rem;
color: var(--muted);
font-size: 0.95rem;
}
.ai-output ul {
padding-left: 1.25rem;
margin: 0.5rem 0;
}
.ai-output-block {
background: #fff;
border-radius: 12px;
padding: 1rem;
margin-bottom: 1rem;
border: 1px solid var(--border);
color: var(--text);
}
.ai-label {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.75rem;
color: var(--muted);
margin: 0 0 0.5rem;
font-weight: 600;
}
.network-header {
text-align: center;
max-width: 800px;
margin: 0 auto 3rem;
}
.network-locations {
display: flex;
flex-direction: column;
gap: 2.5rem;
margin-bottom: 3rem;
}
.network-region {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
padding: 2.5rem;
border-radius: 16px;
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.network-region:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--accent);
}
.network-region h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--primary);
margin: 0 0 1.5rem 0;
text-transform: uppercase;
letter-spacing: 0.1em;
padding-bottom: 1rem;
border-bottom: 2px solid var(--primary);
}
.location-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem;
}
.location-item {
display: inline-block;
padding: 0.875rem 1.25rem;
background: linear-gradient(135deg, #ffffff 0%, var(--tinted) 100%);
border: 2px solid var(--border);
border-radius: 10px;
text-align: center;
font-weight: 600;
font-size: 0.9rem;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.location-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s;
}
.location-item:hover::before {
left: 100%;
}
.location-item:hover {
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
color: white;
border-color: var(--accent);
transform: translateY(-3px) scale(1.02);
box-shadow: var(--shadow-lg);
}
.network-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 2rem 0;
}
.network-stat-item {
text-align: center;
padding: 3rem 2.5rem;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 20px;
border: 2px solid var(--border);
box-shadow: var(--shadow-md);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.network-stat-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: var(--gradient-accent);
transform: scaleX(0);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(234, 98, 41, 0.4);
}
.network-stat-item:hover::before {
transform: scaleX(1);
}
.network-stat-item::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: var(--gradient-accent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s;
}
.network-stat-item:hover::after {
opacity: 0.3;
}
.network-stat-item:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: var(--shadow-xl), 0 0 30px rgba(234, 98, 41, 0.2);
border-color: var(--accent);
background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
}
.network-stat-value {
font-size: 4rem;
font-weight: 900;
background: var(--gradient-accent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0 0 1rem 0;
line-height: 1;
opacity: 1 !important;
display: block;
visibility: visible;
letter-spacing: -0.03em;
filter: drop-shadow(0 2px 4px rgba(234, 98, 41, 0.2));
transition: all 0.4s ease;
}
.network-stat-item:hover .network-stat-value {
transform: scale(1.05);
filter: drop-shadow(0 4px 8px rgba(234, 98, 41, 0.3));
}
.network-stat-value:nth-child(1) { animation-delay: 0.1s; }
.network-stat-value:nth-child(2) { animation-delay: 0.2s; }
.network-stat-value:nth-child(3) { animation-delay: 0.3s; }
.network-stat-value:nth-child(4) { animation-delay: 0.4s; }
.network-stat-label {
font-size: 0.95rem;
text-transform: none;
letter-spacing: 0.3px;
color: var(--muted);
margin: 0;
font-weight: 500;
}
/* Enquiry Form Section */
.enquiry-form-wrapper {
max-width: 800px;
margin: 0 auto;
}
.enquiry-form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.enquiry-form-grid label {
display: flex;
flex-direction: column;
gap: 0.5rem;
font-weight: 500;
}
.enquiry-form-grid input,
.enquiry-form-grid textarea {
padding: 1rem 1.5rem;
border: 2px solid var(--border);
border-radius: 12px;
font-size: 1rem;
font-family: inherit;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--text);
font-weight: 500;
}
.enquiry-form-grid input::placeholder,
.enquiry-form-grid textarea::placeholder {
color: var(--muted);
opacity: 0.6;
font-weight: 400;
}
.enquiry-form-grid input:focus,
.enquiry-form-grid textarea:focus {
outline: none;
border-color: var(--accent);
background: #ffffff;
box-shadow: 0 0 0 5px rgba(234, 98, 41, 0.12), 0 6px 20px rgba(234, 98, 41, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
transform: translateY(-2px);
}
.enquiry-form-grid input:hover:not(:focus),
.enquiry-form-grid textarea:hover:not(:focus) {
border-color: var(--secondary);
background: #ffffff;
box-shadow: 0 2px 8px rgba(234, 98, 41, 0.1);
}
@media (max-width: 768px) {
.enquiry-form-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.network-stats {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.network-stat-value {
font-size: 2.5rem;
}
.network-stat-item {
padding: 1.5rem;
}
.location-grid {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.network-region {
padding: 1.5rem;
}
}
.split {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: space-between;
align-items: center;
}
.pill-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.pill-list span {
background: #fff;
border-radius: 999px;
padding: 0.5rem 1rem;
border: 1px solid var(--border);
font-weight: 500;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
align-items: start;
}
.contact-list {
list-style: none;
padding: 0;
color: var(--muted);
}
.contact-form {
background: #ffffff;
padding: 2rem;
border-radius: 8px;
border: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.site-footer {
background: #0f172a;
color: #d7def5;
padding: 3rem 0 2rem;
margin-top: 3rem;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.footer-label {
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.15em;
color: #8892b0;
}
.footer-input {
display: flex;
gap: 0.5rem;
}
.footer-input button {
border-radius: 6px;
border: none;
padding: 0.75rem 1rem;
font-weight: 600;
background: var(--primary);
color: #fff;
cursor: pointer;
}
.footer-input button:hover {
background: var(--hover);
}
.copyright {
text-align: center;
color: #94a3b8;
margin-top: 2rem;
}
.modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
align-items: center;
justify-content: center;
padding: 1.5rem;
z-index: 999;
}
.modal.open {
display: flex;
}
.modal-dialog {
background: #fff;
border-radius: 8px;
padding: 1.5rem;
width: min(500px, 90vw);
max-height: 85vh;
overflow-y: auto;
position: relative;
border: 1px solid var(--border);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.modal-dialog::-webkit-scrollbar {
width: 6px;
}
.modal-dialog::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
border-radius: 3px;
}
.modal-dialog::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 3px;
}
.modal-close {
position: absolute;
top: 1rem;
right: 1rem;
border: none;
background: #f1f5f9;
border-radius: 999px;
width: 32px;
height: 32px;
cursor: pointer;
font-size: 1.2rem;
font-weight: 600;
color: var(--muted);
}
.modal-form {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1.5rem;
}
.modal-footnote {
font-size: 0.85rem;
color: var(--muted);
margin-top: 1rem;
text-align: center;
}
.modal-footnote a {
color: var(--primary);
text-decoration: none;
}
.quote-step {
margin-top: 1.5rem;
}
.quote-step p {
margin-bottom: 1rem;
color: var(--muted);
}
/* OTP Input Styling */
#otpInput {
font-size: 1rem !important;
letter-spacing: normal !important;
padding: 0.75rem 1rem !important;
width: 100%;
font-family: 'Courier New', monospace;
}
#otpInput::placeholder {
font-size: 0.95rem;
letter-spacing: normal;
opacity: 0.6;
}
#otpInput:not(:placeholder-shown) {
font-size: 1.5rem !important;
letter-spacing: 0.5rem !important;
font-weight: 600;
}
/* Quote Display Styling - Compact Version */
.quote-display-compact {
max-width: 100%;
margin: 0 auto;
max-height: 70vh;
overflow-y: auto;
padding-right: 0.5rem;
}
.quote-display-compact::-webkit-scrollbar {
width: 6px;
}
.quote-display-compact::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
border-radius: 3px;
}
.quote-display-compact::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 3px;
}
.quote-summary-compact {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.05), rgba(8, 145, 178, 0.02));
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.75rem 1rem;
margin-bottom: 0.75rem;
}
.quote-row-compact {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.4rem 0;
border-bottom: 1px solid rgba(8, 145, 178, 0.08);
font-size: 0.85rem;
}
.quote-row-compact:last-child {
border-bottom: none;
}
.quote-label-compact {
font-weight: 500;
color: var(--text);
font-size: 0.85rem;
}
.quote-value-compact {
color: var(--text);
font-weight: 600;
text-align: right;
font-size: 0.85rem;
}
.quote-breakdown-compact {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.75rem 1rem;
margin-bottom: 0.75rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.quote-total-compact {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0 0.25rem 0;
margin-top: 0.5rem;
border-top: 2px solid var(--accent);
}
.quote-total-compact .quote-label-compact {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
}
.quote-total-amount-compact {
font-size: 1.25rem;
font-weight: 700;
color: var(--accent);
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.quote-notes-compact {
background: rgba(255, 193, 7, 0.05);
border: 1px solid rgba(255, 193, 7, 0.15);
border-radius: 8px;
padding: 0.75rem;
margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
.quote-display-compact {
max-height: 65vh;
}
.quote-row-compact {
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
padding: 0.35rem 0;
}
.quote-value-compact {
text-align: left;
}
.quote-total-compact {
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
}
.quote-total-amount-compact {
font-size: 1.1rem;
}
}
/* Chatbot Styles */
.chat-hidden {
display: none;
}
.chatbot-widget {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
}
.chatbot-toggle {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 16px rgba(8, 145, 178, 0.45);
color: white;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border: none;
}
.chatbot-badge {
position: absolute;
top: -4px;
right: -4px;
width: 22px;
height: 22px;
background: #ef4444;
color: white;
border-radius: 50%;
font-size: 0.7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
animation: badgePulse 2s ease infinite;
}
.chatbot-badge.hidden {
display: none;
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
.chatbot-toggle:hover {
transform: scale(1.1);
box-shadow: 0 6px 24px rgba(8, 145, 178, 0.55);
}
.chatbot-toggle:active {
transform: scale(1.02);
}
.chatbot-window {
position: absolute;
bottom: 76px;
right: 0;
width: 380px;
max-height: calc(100vh - 120px);
height: 540px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(8, 145, 178, 0.08);
display: none;
flex-direction: column;
transform: translateY(20px) scale(0.95);
opacity: 0;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.chatbot-window.chatbot-popup {
transform: translateY(0) scale(1);
opacity: 1;
animation: chatSlideUp 0.4s ease;
}
@keyframes chatSlideUp {
0% { transform: translateY(20px) scale(0.95); opacity: 0; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
.chatbot-header {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: white;
padding: 1rem 1.25rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.chatbot-header-info {
display: flex;
align-items: center;
gap: 0.75rem;
}
.chatbot-avatar {
width: 38px;
height: 38px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.chatbot-header h4 {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.chatbot-status {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.75rem;
opacity: 0.9;
font-weight: 400;
}
.chatbot-status-dot {
width: 7px;
height: 7px;
background: #4ade80;
border-radius: 50%;
display: inline-block;
animation: dotPulse 2s ease infinite;
}
@keyframes dotPulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(74, 222, 128, 0); }
}
.chatbot-close {
background: rgba(255, 255, 255, 0.15);
border: none;
color: white;
font-size: 1.3rem;
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
border-radius: 50%;
transition: all 0.2s ease;
}
.chatbot-close:hover {
background: rgba(255, 255, 255, 0.3);
transform: rotate(90deg);
}
.chatbot-messages {
flex: 1;
overflow-y: auto;
padding: 1rem 1rem 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
background: #f8fafc;
scroll-behavior: smooth;
}
.chatbot-messages::-webkit-scrollbar {
width: 5px;
}
.chatbot-messages::-webkit-scrollbar-thumb {
background: rgba(8, 145, 178, 0.2);
border-radius: 10px;
}
.chatbot-message {
max-width: 82%;
display: flex;
gap: 8px;
animation: msgFadeIn 0.3s ease;
}
@keyframes msgFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.chat-msg-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
flex-shrink: 0;
margin-top: 2px;
}
.chatbot-message.bot .chat-msg-avatar {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: white;
}
.chatbot-message.user .chat-msg-avatar {
background: #e2e8f0;
color: #475569;
order: 2;
}
.chat-msg-content {
display: flex;
flex-direction: column;
gap: 3px;
}
.chatbot-message.user {
align-self: flex-end;
flex-direction: row-reverse;
}
.chatbot-message.user .chat-msg-content {
align-items: flex-end;
}
.chatbot-message.user .chat-msg-content p {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: white;
box-shadow: 0 2px 8px rgba(8, 145, 178, 0.18);
}
.chatbot-message.bot {
align-self: flex-start;
}
.chatbot-message.bot .chat-msg-content p {
background: #ffffff;
color: var(--text);
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.chatbot-message p,
.chat-msg-content p {
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
padding: 0.6rem 0.9rem;
border-radius: 16px;
}
.chatbot-message.user p {
border-bottom-right-radius: 4px;
}
.chatbot-message.bot p {
border-bottom-left-radius: 4px;
}
.chat-msg-time {
font-size: 0.65rem;
color: #94a3b8;
padding: 0 4px;
}
.chat-container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.chatbot-input-area {
display: flex;
padding: 0;
border-top: 1px solid #e2e8f0;
flex-shrink: 0;
pointer-events: auto;
background: #fff;
}
.chatbot-input-area form {
display: flex;
flex: 1;
min-width: 0;
}
.chat-input-wrapper {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
flex: 1;
min-width: 0;
}
.chatbot-input-area input,
#chatInput {
flex: 1;
min-width: 0;
border: 1.5px solid #e2e8f0;
border-radius: 24px;
padding: 10px 16px;
font-size: 0.875rem;
font-family: inherit;
pointer-events: auto;
user-select: text;
outline: none;
background: #f8fafc;
transition: all 0.2s ease;
}
.chatbot-input-area input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.08);
background: #fff;
}
.chatbot-send-btn {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.chatbot-send-btn:hover {
box-shadow: 0 4px 14px rgba(8, 145, 178, 0.4);
transform: scale(1.08);
}
.chatbot-send-btn:active {
transform: scale(0.95);
}
/* Ensure nav stays on one line for larger screens */
@media (min-width: 769px) {
.main-nav {
flex-wrap: nowrap !important;
}
}
/* Large laptops (1200px - 1400px) */
@media (min-width: 1200px) and (max-width: 1400px) {
.main-nav {
gap: 0.3rem;
padding-left: 0.6rem;
padding-right: 0.6rem;
justify-content: center;
}
.main-nav a {
font-size: 0.875rem;
padding: 0.38rem 0.5rem;
}
.header-cta {
gap: 0.35rem;
margin-left: 0;
}
.header-cta .ghost-btn,
.header-cta .secondary-btn,
.header-cta .primary-btn {
padding: 0.45rem 0.7rem;
font-size: 0.8rem;
}
}
/* Medium screens (tablets and smaller laptops) - prevent nav overlap */
@media (min-width: 1024px) and (max-width: 1200px) {
.site-header .container {
padding: 0.5rem 0.5rem;
}
.branding {
gap: 0.35rem;
flex-shrink: 0;
margin-right: 0.5rem;
}
.brand-title {
font-size: 0.85rem;
}
.logo-image {
height: 36px;
}
.branding img {
height: 52px;
max-width: 120px;
}
.main-nav {
gap: 0.28rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
margin-left: 0;
margin-right: 0;
justify-content: center;
}
.main-nav a {
font-size: 0.8rem;
padding: 0.35rem 0.45rem;
}
.header-cta {
gap: 0.3rem;
margin-left: 0;
}
.header-cta .ghost-btn,
.header-cta .secondary-btn,
.header-cta .primary-btn {
padding: 0.4rem 0.5rem;
font-size: 0.75rem;
}
}
/* ========================================
TABLET LAYOUT (769px - 1024px)
Clean, balanced tablet-specific styles
======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
/* Header - Two row layout for tablets */
.site-header .container {
flex-wrap: wrap;
justify-content: space-between;
padding: 0.5rem 0.75rem;
gap: 0.4rem;
}
.branding {
flex: 0 0 auto;
gap: 0.4rem;
margin-right: 0;
}
.brand-title {
font-size: 0.9rem;
}
.logo-image {
height: 40px;
}
.branding img {
height: 50px;
max-width: 110px;
}
/* Navigation - compact centered block */
.main-nav {
flex: 1 1 auto;
justify-content: center;
gap: 0.3rem;
padding-left: 0.4rem;
padding-right: 0.4rem;
margin: 0;
}
.main-nav a {
font-size: 0.8rem;
padding: 0.38rem 0.45rem;
}
/* CTA buttons - balanced sizing */
.header-cta {
flex: 0 0 auto;
gap: 0.3rem;
margin-left: 0;
}
.header-cta .ghost-btn,
.header-cta .secondary-btn,
.header-cta .primary-btn {
padding: 0.45rem 0.65rem;
font-size: 0.78rem;
}
/* Hero section tablet adjustments */
.hero-slider,
.hero-section {
height: 360px;
min-height: 360px;
}
.hero-slide-content {
max-width: 90%;
padding: 1.25rem;
}
.hero-slide-content h1 {
font-size: 1.9rem;
}
.hero-slide-content p {
font-size: 1rem;
}
/* Section spacing tablet */
.section {
padding: 3.5rem 0;
}
/* About section tablet */
.about-content {
grid-template-columns: 1fr;
gap: 2rem;
}
/* Services grid tablet */
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
/* Network grid tablet */
.network-stats {
grid-template-columns: repeat(2, 1fr);
}
/* Contact grid tablet */
.contact-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
/* Footer grid tablet */
.footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
/* Quick quote form tablet */
.hero-card {
padding: 1.75rem;
}
/* Modal tablet sizing */
.modal-dialog {
max-width: 500px;
margin: 2rem auto;
}
/* Tracking section tablet */
.tracking-card {
padding: 2rem;
margin: 0 1rem 2rem;
}
.tracking-info-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.site-header .container {
flex-direction: column;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
}
.logo-image {
height: 38px;
}
.branding img {
height: 48px;
max-width: 100px;
}
.brand-title {
font-size: 0.9rem;
}
.branding {
width: 100%;
justify-content: center;
margin-bottom: 0.15rem;
margin-right: 0;
}
/* Navigation - clean 3x2 grid on mobile */
.main-nav {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.35rem;
padding: 0;
margin: 0;
order: 2;
}
.main-nav a {
font-size: 0.78rem;
padding: 0.5rem 0.3rem;
text-align: center;
background: rgba(46, 69, 90, 0.04);
border-radius: 6px;
border: 1px solid rgba(46, 69, 90, 0.08);
}
/* CTA buttons - horizontal row */
.header-cta {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: nowrap;
gap: 0.4rem;
order: 3;
margin-top: 0.15rem;
margin-left: 0;
}
.header-cta .ghost-btn,
.header-cta .secondary-btn,
.header-cta .primary-btn {
font-size: 0.78rem;
padding: 0.5rem 0.75rem;
white-space: nowrap;
flex: 1;
text-align: center;
max-width: 130px;
}
.hero-visual {
align-items: stretch;
}
.band-actions {
justify-content: center;
}
.chatbot-window {
position: fixed;
width: calc(100vw - 40px);
max-width: calc(100vw - 40px);
right: 20px;
left: 20px;
}
}
/* Autocomplete Dropdown Styles */
.autocomplete-dropdown {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
background: #ffffff !important;
border: 1px solid var(--border) !important;
border-radius: 6px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
max-height: 250px !important;
overflow-y: auto !important;
z-index: 99999 !important;
margin-top: 4px !important;
display: none !important;
}
.autocomplete-dropdown[style*="display: block"] {
display: block !important;
}
.autocomplete-item {
padding: 0.75rem 1rem;
cursor: pointer;
font-size: 1rem;
color: var(--text);
border-bottom: 1px solid var(--border);
transition: background-color 0.2s ease;
}
.autocomplete-item:last-child {
border-bottom: none;
}
.autocomplete-item:hover,
.autocomplete-item.selected {
background-color: rgba(234, 98, 41, 0.1);
color: var(--accent);
}
.autocomplete-item strong {
font-weight: 600;
color: var(--accent);
}
/* Ensure parent container has relative positioning for autocomplete */
.quick-quote-form > div,
.quote-form-row {
position: relative;
}
.autocomplete-wrapper {
position: relative;
width: 100%;
}
/* ========================================
CONTAINER TRACKING SECTION
======================================== */
.container-tracking-section {
background: linear-gradient(135deg, #2E455A 0%, #1e3447 100%);
padding: 5rem 0;
position: relative;
overflow: hidden;
border-top: 3px solid rgba(234, 98, 41, 0.4);
border-bottom: 3px solid rgba(234, 98, 41, 0.4);
box-shadow: 0 0 30px rgba(234, 98, 41, 0.15), inset 0 0 50px rgba(234, 98, 41, 0.05);
}
.container-tracking-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
pointer-events: none;
}
.tracking-card {
background: rgba(255, 255, 255, 0.98);
border-radius: 20px;
padding: 3rem;
max-width: 900px;
margin: 0 auto 3rem;
position: relative;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}
.tracking-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--primary), var(--accent));
border-radius: 20px 20px 0 0;
}
.tracking-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
text-align: left;
}
.tracking-icon {
font-size: 3rem;
background: linear-gradient(135deg, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tracking-header h2 {
color: var(--primary);
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
}
.tracking-header p {
color: var(--muted);
margin: 0;
font-size: 0.95rem;
}
.tracking-form {
margin-bottom: 1.5rem;
}
.tracking-input-group {
display: flex;
gap: 1rem;
align-items: stretch;
}
.tracking-input-wrapper {
flex: 1;
position: relative;
display: flex;
align-items: center;
}
.tracking-input-icon {
position: absolute;
left: 1.25rem;
font-size: 1.25rem;
z-index: 1;
}
.tracking-input-wrapper input {
width: 100%;
padding: 1.25rem 1.25rem 1.25rem 3.5rem;
border: 2px solid var(--border);
border-radius: 12px;
font-size: 1rem;
font-family: inherit;
transition: all 0.3s ease;
background: #f8fafc;
}
.tracking-input-wrapper input:focus {
outline: none;
border-color: var(--accent);
background: #ffffff;
box-shadow: 0 0 0 4px rgba(234, 98, 41, 0.15);
}
.tracking-input-wrapper input::placeholder {
color: var(--muted);
}
.tracking-btn {
padding: 1.25rem 2rem;
white-space: nowrap;
font-size: 1rem;
font-weight: 600;
border-radius: 12px;
}
.tracking-hint {
color: var(--muted);
font-size: 0.85rem;
margin-top: 0.75rem;
text-align: left;
}
.tracking-hint-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.75rem;
}
/* Email Notification Option */
.tracking-email-option {
margin-top: 1rem;
padding: 1rem;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-radius: 8px;
border: 1px solid #bae6fd;
}
.email-notify-checkbox {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
font-size: 0.9rem;
color: var(--text);
}
.email-notify-checkbox input[type="checkbox"] {
display: none;
}
.email-notify-checkbox .checkmark {
width: 20px;
height: 20px;
border: 2px solid var(--primary);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
}
.email-notify-checkbox input[type="checkbox"]:checked + .checkmark {
background: var(--accent);
border-color: var(--accent);
}
.email-notify-checkbox input[type="checkbox"]:checked + .checkmark::after {
content: '✓';
color: white;
font-size: 12px;
font-weight: bold;
}
.email-notify-input {
margin-top: 0.75rem;
}
.email-notify-input input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #bae6fd;
border-radius: 6px;
font-size: 0.9rem;
background: white;
}
.email-notify-input input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(234, 98, 41, 0.1);
}
/* Tracking Result Enhancements */
.tracking-last-updated {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
background: #f0fdf4;
border-radius: 8px;
margin-bottom: 1rem;
border: 1px solid #bbf7d0;
}
.last-updated-text {
display: flex;
align-items: center;
gap: 0.5rem;
color: #166534;
font-size: 0.85rem;
}
.refresh-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: white;
border: 1px solid #22c55e;
color: #166534;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.2s ease;
}
.refresh-btn:hover {
background: #22c55e;
color: white;
}
.refresh-btn.refreshing {
pointer-events: none;
opacity: 0.7;
}
.refresh-btn .refresh-icon {
transition: transform 0.3s ease;
}
.refresh-btn.refreshing .refresh-icon {
animation: spin 1s linear infinite;
}
/* Email Subscription in Results */
.tracking-subscribe-section {
margin-top: 1.5rem;
padding: 1.25rem;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-radius: 12px;
border: 1px solid #fbbf24;
}
.subscribe-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.subscribe-header h4 {
margin: 0;
color: #92400e;
font-size: 1rem;
}
.subscribe-form {
display: flex;
gap: 0.75rem;
}
.subscribe-form input {
flex: 1;
padding: 0.75rem 1rem;
border: 1px solid #fbbf24;
border-radius: 6px;
font-size: 0.9rem;
background: white;
}
.subscribe-form button {
padding: 0.75rem 1.5rem;
background: var(--accent);
color: white;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
}
.subscribe-form button:hover {
background: #d45a23;
transform: translateY(-1px);
}
.subscribe-success {
display: flex;
align-items: center;
gap: 0.5rem;
color: #166534;
font-weight: 500;
}
/* Live Status Indicator */
.live-status-indicator {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: #dcfce7;
border-radius: 20px;
font-size: 0.8rem;
color: #166534;
font-weight: 500;
}
.live-dot {
width: 8px;
height: 8px;
background: #22c55e;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.2); }
}
.tracking-input-label {
position: absolute;
top: -0.5rem;
left: 1rem;
background: white;
padding: 0 0.5rem;
font-size: 0.75rem;
color: var(--muted);
font-weight: 500;
z-index: 2;
}
.track-multiple-btn {
background: transparent;
border: 1px solid var(--accent);
color: var(--accent);
padding: 0.5rem 1rem;
border-radius: 8px;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s ease;
}
.track-multiple-btn:hover {
background: var(--accent);
color: white;
}
.input-error {
color: #ef4444;
font-size: 0.875rem;
margin-top: 0.5rem;
animation: shake 0.3s ease;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* Tracking Tabs */
.tracking-tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
border-bottom: 2px solid var(--border);
}
.tracking-tab {
background: transparent;
border: none;
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
font-weight: 500;
color: var(--muted);
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all 0.3s ease;
position: relative;
bottom: -2px;
}
.tracking-tab:hover {
color: var(--primary);
}
.tracking-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
font-weight: 600;
}
/* Multiple Containers Input */
.multiple-containers-input {
background: #f8fafc;
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
margin-top: 1rem;
}
.multiple-containers-input label {
display: block;
margin-bottom: 0.75rem;
font-weight: 500;
color: var(--text);
}
.multiple-containers-input textarea {
width: 100%;
padding: 1rem;
border: 2px solid var(--border);
border-radius: 8px;
font-family: inherit;
font-size: 0.9rem;
resize: vertical;
min-height: 100px;
}
.multiple-containers-input textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(234, 98, 41, 0.1);
}
.multiple-containers-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
justify-content: flex-end;
}
/* Multiple Tracking Results */
.multiple-tracking-results {
background: #f8fafc;
border-radius: 16px;
padding: 2rem;
margin-top: 2rem;
border: 1px solid var(--border);
}
.multiple-results-header {
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--border);
}
.multiple-results-header h3 {
margin: 0;
color: var(--primary);
font-size: 1.25rem;
}
.multiple-results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.multiple-result-card {
background: white;
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
}
.multiple-result-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.multiple-result-card.not-found {
opacity: 0.7;
}
.result-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border);
}
.result-card-header strong {
color: var(--primary);
font-size: 1rem;
}
.result-card-body {
margin-bottom: 1rem;
}
.result-card-body p {
margin: 0.5rem 0;
font-size: 0.9rem;
color: var(--text);
}
.result-card-body strong {
color: var(--muted);
font-weight: 600;
}
.view-details-btn {
width: 100%;
padding: 0.75rem;
background: var(--accent);
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.view-details-btn:hover {
background: var(--hover);
transform: translateY(-1px);
}
.status-badge {
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
}
.status-badge.in-transit {
background: #dbeafe;
color: #1e40af;
}
.status-badge.delivered {
background: #dcfce7;
color: #166534;
}
.status-badge.at-port {
background: #fef3c7;
color: #92400e;
}
.status-badge.pending {
background: #f3f4f6;
color: #374151;
}
/* Loading Spinner */
.spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 0.8s linear infinite;
margin-right: 0.5rem;
flex-shrink: 0;
}
.spinner.large {
width: 40px;
height: 40px;
border-width: 4px;
border-color: rgba(234, 98, 41, 0.3);
border-top-color: #E86A33;
margin: 0 auto;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.btn-loader {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Tracking Results */
.tracking-results {
background: #f8fafc;
border-radius: 16px;
padding: 2rem;
margin-top: 2rem;
border: 1px solid var(--border);
}
.tracking-status-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--border);
}
.tracking-status-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.9rem;
}
.tracking-status-badge.in-transit {
background: #dbeafe;
color: #1e40af;
}
.tracking-status-badge.delivered {
background: #dcfce7;
color: #166534;
}
.tracking-status-badge.at-port {
background: #fef3c7;
color: #92400e;
}
.tracking-status-badge.pending {
background: #f3f4f6;
color: #374151;
}
.tracking-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.tracking-info-item {
background: white;
padding: 1rem;
border-radius: 10px;
border-left: 4px solid var(--accent);
}
.tracking-info-item label {
display: block;
font-size: 0.75rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.25rem;
}
.tracking-info-item .value {
font-size: 1rem;
font-weight: 600;
color: var(--text);
}
/* Tracking Timeline */
.tracking-timeline {
position: relative;
padding-left: 2rem;
}
.tracking-timeline::before {
content: '';
position: absolute;
left: 0.5rem;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, var(--accent), var(--border));
border-radius: 3px;
}
.timeline-item {
position: relative;
padding-bottom: 1.5rem;
padding-left: 1.5rem;
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-item::before {
content: '';
position: absolute;
left: -1.5rem;
top: 0.25rem;
width: 14px;
height: 14px;
background: var(--border);
border-radius: 50%;
border: 3px solid white;
box-shadow: 0 0 0 2px var(--border);
}
.timeline-item.active::before {
background: var(--accent);
box-shadow: 0 0 0 2px var(--accent), 0 0 10px rgba(234, 98, 41, 0.4);
}
.timeline-item.completed::before {
background: var(--success);
box-shadow: 0 0 0 2px var(--success);
}
.timeline-date {
font-size: 0.8rem;
color: var(--muted);
margin-bottom: 0.25rem;
}
.timeline-title {
font-weight: 600;
color: var(--text);
margin-bottom: 0.25rem;
}
.timeline-location {
font-size: 0.9rem;
color: var(--muted);
}
/* Tracking Error */
.tracking-error {
text-align: center;
padding: 2rem;
background: #fef2f2;
border-radius: 12px;
border: 1px solid #fecaca;
margin-top: 1.5rem;
}
.tracking-error .error-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.tracking-error h4 {
color: #dc2626;
margin: 0 0 0.5rem 0;
font-size: 1.25rem;
}
.tracking-error p {
color: #7f1d1d;
margin: 0;
}
.tracking-error .error-hint {
margin-top: 1rem;
font-size: 0.9rem;
}
.tracking-error .error-hint a {
color: #dc2626;
text-decoration: underline;
}
.tracking-error .error-suggestions {
text-align: left;
margin: 1.5rem 0;
padding: 1rem;
background: rgba(255, 255, 255, 0.5);
border-radius: 8px;
}
.tracking-error .error-suggestions p {
margin-bottom: 0.5rem;
font-weight: 600;
}
.tracking-error .error-suggestions ul {
margin: 0.5rem 0 0 1.5rem;
padding: 0;
list-style-type: disc;
}
.tracking-error .error-suggestions li {
margin: 0.5rem 0;
color: #7f1d1d;
}
/* Tracking Features Grid */
.tracking-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
position: relative;
}
.tracking-feature {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 1.75rem;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.3s ease;
}
.tracking-feature:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.tracking-feature .feature-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.tracking-feature h4 {
color: white;
font-size: 1.1rem;
margin: 0 0 0.5rem 0;
}
.tracking-feature p {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
margin: 0;
line-height: 1.5;
}
/* Responsive */
@media (max-width: 768px) {
.tracking-card {
padding: 2rem 1.5rem;
margin: 0 1rem 2rem;
}
.tracking-header {
flex-direction: column;
text-align: center;
}
.tracking-input-group {
flex-direction: column;
}
.tracking-btn {
width: 100%;
}
.tracking-info-grid {
grid-template-columns: 1fr;
}
.tracking-tabs {
flex-wrap: wrap;
gap: 0.25rem;
}
.tracking-tab {
padding: 0.5rem 1rem;
font-size: 0.85rem;
flex: 1;
min-width: calc(33.333% - 0.5rem);
}
.tracking-hint-wrapper {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.track-multiple-btn {
width: 100%;
text-align: center;
}
.multiple-containers-input {
padding: 1rem;
}
.multiple-containers-actions {
flex-direction: column;
}
.multiple-containers-actions button {
width: 100%;
}
.multiple-results-grid {
grid-template-columns: 1fr;
}
/* Email Subscription Form - Stack vertically on mobile */
.subscribe-form {
flex-direction: column;
gap: 0.5rem;
}
.subscribe-form input {
width: 100%;
}
.subscribe-form button {
width: 100%;
padding: 0.85rem 1rem;
}
.tracking-subscribe-section {
padding: 1rem;
}
.subscribe-header h4 {
font-size: 0.95rem;
}
/* Live Tracking Status Bar - Stack on mobile */
.tracking-last-updated {
flex-direction: column;
gap: 0.75rem;
align-items: stretch;
padding: 0.75rem;
}
.last-updated-text {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.live-status-indicator {
width: fit-content;
}
.refresh-btn {
width: 100%;
max-width: 100%;
justify-content: center;
padding: 0.65rem 1rem;
min-width: 0;
box-sizing: border-box;
}
/* Track Shipment – buttons never overflow on mobile */
.tracking-results,
.tracking-card,
.multiple-tracking-results,
.tracking-actions {
overflow-x: hidden;
min-width: 0;
}
.tracking-results .primary-btn,
.tracking-results .secondary-btn,
.tracking-subscribe-section .primary-btn,
.tracking-subscribe-section button,
.view-details-btn,
.tracking-last-updated .refresh-btn,
.tracking-actions .primary-btn,
.tracking-actions .secondary-btn,
.tracking-actions button {
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.subscribe-form button {
max-width: 100%;
min-width: 0;
}
}
/* ========================================
COMPREHENSIVE MOBILE RESPONSIVE STYLES
Mobile-only media queries (max-width: 768px and below)
These rules ONLY apply to mobile/tablet screens
======================================== */
/* Prevent horizontal scrolling on mobile */
@media (max-width: 768px) {
html, body {
overflow-x: hidden;
max-width: 100vw;
}
.container {
width: 100%;
max-width: 100%;
padding: 0 1rem;
}
/* Hero Slider Mobile */
.hero-slider,
.hero-section {
height: 300px;
min-height: 300px;
}
.hero-slide-content {
padding: 1rem;
max-width: 100%;
}
.hero-slide-content h1 {
font-size: 1.4rem;
line-height: 1.2;
margin-bottom: 0.5rem;
}
.hero-slide-content p {
font-size: 0.9rem;
}
/* Hero Section Mobile */
.hero {
padding: 1.25rem 0;
}
.hero h1 {
font-size: 1.35rem;
}
.lead {
font-size: 0.95rem;
}
/* Hero Card / Quick Quote Form Mobile */
.hero-card {
padding: 1.25rem;
border-radius: 14px;
}
.hero-card h3 {
font-size: 1.15rem !important;
}
.hero-card p {
font-size: 0.85rem !important;
}
/* Navigation Mobile Enhancements - uses grid layout from earlier rule */
.main-nav a {
font-size: 0.82rem;
padding: 0.6rem 0.4rem;
}
/* Section Padding Mobile */
.section {
padding: 3rem 0;
}
.section-header {
margin-bottom: 2rem;
padding-bottom: 1rem;
}
.section-header h2 {
font-size: 1.5rem;
}
.section-header p {
font-size: 1rem;
}
/* Service Cards Mobile */
.card-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.service-card {
min-height: 280px;
}
.service-card-content {
padding: 1.5rem;
}
.service-card-content h3 {
font-size: 1.25rem;
}
.service-card-content p {
font-size: 0.9rem;
}
/* Quick Quote Section Mobile */
.quick-quote-section {
padding: 3rem 0;
}
.quick-quote-card {
padding: 2rem 1.5rem;
border-radius: 16px;
}
.quick-quote-content h2 {
font-size: 1.5rem;
}
.quote-form-row {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.quick-quote-form input,
.quick-quote-form select {
padding: 0.875rem 1rem;
font-size: 16px; /* Prevents iOS zoom on focus */
}
/* About Section Mobile */
.about-lead {
font-size: 1.05rem;
}
.about-feature-item {
padding: 1.5rem;
flex-direction: column;
text-align: center;
gap: 1rem;
}
.feature-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
/* Network Section Mobile */
.network-header h2 {
font-size: 1.5rem;
}
.network-locations {
gap: 1.5rem;
}
.network-region h3 {
font-size: 1rem;
}
.location-item {
padding: 0.75rem 1rem;
font-size: 0.8rem;
}
/* Contact Section Mobile */
.contact-grid {
gap: 2rem;
}
.contact-form {
padding: 1.5rem;
}
.contact-list li {
word-break: break-word;
}
/* Gradient Band Mobile */
.band-grid {
flex-direction: column;
text-align: center;
gap: 1.5rem;
}
.band-grid h2 {
font-size: 1.5rem;
}
.band-actions {
width: 100%;
flex-direction: column;
gap: 0.75rem;
}
.band-actions .primary-btn,
.band-actions .secondary-btn {
width: 100%;
text-align: center;
}
/* Footer Mobile */
.site-footer {
padding: 2rem 0 1.5rem;
}
/* Footer text visibility on mobile - improve contrast */
.site-footer .brand-title {
color: #e2e8f0;
font-weight: 700;
opacity: 1;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.footer-grid ul {
padding-left: 0;
}
.copyright {
font-size: 0.85rem;
}
/* Modal Mobile */
.modal {
padding: 1rem;
align-items: flex-start;
padding-top: 2rem;
}
.modal-dialog {
width: 100%;
max-width: 100%;
max-height: calc(100vh - 3rem);
border-radius: 12px;
padding: 1.25rem;
}
.modal-dialog h3 {
font-size: 1.25rem;
}
.modal-form label {
font-size: 0.9rem;
}
.modal-form input,
.modal-form select,
.modal-form textarea {
font-size: 16px; /* Prevents iOS zoom */
padding: 0.875rem 1rem;
}
/* Chatbot Mobile */
.chatbot-widget {
bottom: 15px;
right: 15px;
}
.chatbot-toggle {
width: 56px;
height: 56px;
}
.chatbot-window {
position: fixed;
bottom: 80px;
right: 15px;
left: 15px;
width: auto;
height: 450px;
max-height: calc(100vh - 100px);
max-width: calc(100vw - 30px);
}
/* Buttons Mobile - Touch Friendly */
.primary-btn,
.secondary-btn,
.ghost-btn {
padding: 0.875rem 1.5rem;
min-height: 44px; /* Touch-friendly minimum */
}
/* Tracking Features Grid Mobile */
.tracking-features {
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.tracking-feature {
padding: 1.25rem;
}
.tracking-feature .feature-icon {
font-size: 2rem;
}
.tracking-feature h4 {
font-size: 0.95rem;
}
.tracking-feature p {
font-size: 0.8rem;
}
/* Autocomplete Mobile */
.autocomplete-dropdown {
max-height: 200px !important;
}
.autocomplete-item {
padding: 0.875rem 1rem;
font-size: 16px;
}
}
/* Extra Small Screens (480px and below) */
@media (max-width: 480px) {
.container {
padding: 0 0.5rem;
}
/* Header Mobile Small */
.site-header .container {
padding: 0.5rem 0.5rem;
gap: 0.4rem;
}
.brand-title {
font-size: 0.8rem;
}
.logo-image {
height: 34px;
}
.branding img {
height: 44px;
max-width: 90px;
}
/* Navigation - 2 column grid on very small screens */
.main-nav {
grid-template-columns: repeat(2, 1fr);
gap: 0.3rem;
}
.main-nav a {
font-size: 0.72rem;
padding: 0.45rem 0.25rem;
}
/* CTA buttons - stack vertically on very small screens */
.header-cta {
flex-direction: column;
gap: 0.3rem;
}
.header-cta .ghost-btn,
.header-cta .secondary-btn,
.header-cta .primary-btn {
font-size: 0.75rem;
padding: 0.5rem 0.8rem;
max-width: 100%;
width: 100%;
}
/* Hero Slider Extra Small */
.hero-slider,
.hero-section {
height: 280px;
}
.hero-slide-content h1 {
font-size: 1.35rem;
margin-bottom: 0.5rem;
}
.hero-slide-content p {
font-size: 0.85rem;
}
.hero-slider-prev,
.hero-slider-next {
width: 36px;
height: 36px;
font-size: 1.25rem;
}
.hero-slider-prev {
left: 0.5rem;
}
.hero-slider-next {
right: 0.5rem;
}
/* Hero Card Extra Small */
.hero-card {
padding: 1rem;
}
.hero-card h3 {
font-size: 1rem !important;
}
/* Section Headers Extra Small */
.section {
padding: 2rem 0;
}
.section-header h2 {
font-size: 1.25rem;
}
h1 {
font-size: 1.25rem;
}
h2 {
font-size: 1.25rem;
}
h3 {
font-size: 1.1rem;
}
/* Service Cards Extra Small */
.service-card {
min-height: 240px;
}
.service-card-content {
padding: 1.25rem;
}
.service-card-content h3 {
font-size: 1.1rem;
}
/* About Features Extra Small */
.about-feature-item {
padding: 1.25rem;
}
.about-feature-item h4 {
font-size: 1rem;
}
/* Quick Quote Extra Small */
.quick-quote-card {
padding: 1.5rem 1.25rem;
}
.quick-quote-content h2 {
font-size: 1.35rem;
}
/* Network Stats Extra Small */
.network-stat-value {
font-size: 2rem;
}
.network-stat-item {
padding: 1.25rem;
}
/* Tracking Section Extra Small */
.tracking-card {
padding: 1.5rem 1rem;
margin: 0 0.5rem 1.5rem;
}
.tracking-header h2 {
font-size: 1.35rem;
}
.tracking-icon {
font-size: 2.5rem;
}
.tracking-tab {
font-size: 0.75rem;
padding: 0.4rem 0.75rem;
}
.tracking-input-wrapper input {
padding: 1rem 1rem 1rem 3rem;
}
/* Tracking Features Extra Small - Single Column */
.tracking-features {
grid-template-columns: 1fr;
}
/* Footer Extra Small */
.footer-grid {
gap: 1.5rem;
}
.footer-label {
font-size: 0.7rem;
}
/* Modal Extra Small */
.modal-dialog {
padding: 1rem;
}
.modal-close {
top: 0.75rem;
right: 0.75rem;
width: 28px;
height: 28px;
}
/* Chatbot Extra Small */
.chatbot-widget {
bottom: 12px;
right: 12px;
}
.chatbot-toggle {
width: 50px;
height: 50px;
}
.chatbot-window {
position: fixed;
width: calc(100vw - 24px);
right: 12px;
left: 12px;
bottom: 70px;
height: 400px;
max-width: calc(100vw - 24px);
}
.chatbot-header {
padding: 1rem;
}
.chatbot-messages {
padding: 0.75rem;
}
.chatbot-input-area {
padding: 0;
}
.chatbot-send-btn {
width: 36px;
height: 36px;
}
/* Contact Form Extra Small */
.contact-form {
padding: 1.25rem;
}
/* Enquiry Form Extra Small */
.enquiry-form-wrapper {
padding: 0 0.5rem;
}
.enquiry-form-grid input,
.enquiry-form-grid textarea {
padding: 0.875rem 1rem;
}
}
/* Landscape Mobile Orientation */
@media (max-width: 768px) and (orientation: landscape) {
.hero-slider,
.hero-section {
height: 250px;
min-height: 250px;
}
.hero-slide-content {
padding: 0.75rem;
}
.hero-slide-content h1 {
font-size: 1.25rem;
margin-bottom: 0.35rem;
}
.hero-slide-content p {
font-size: 0.85rem;
}
.modal-dialog {
max-height: 90vh;
}
.chatbot-window {
height: 80vh;
max-height: 350px;
}
}
/* Touch Device Enhancements */
@media (hover: none) and (pointer: coarse) {
/* Larger touch targets */
.nav-link,
.tracking-tab,
.location-item {
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* Remove hover effects that don't work well on touch */
.service-card:hover {
transform: translateY(-4px) scale(1.01);
}
.about-feature-item:hover {
transform: translateY(-4px);
}
.network-stat-item:hover {
transform: translateY(-4px);
}
.location-item:hover {
transform: translateY(-2px);
}
/* Ensure clickable areas are touch-friendly */
.primary-btn,
.secondary-btn,
.ghost-btn {
min-height: 48px;
}
}
/* ========================================
PRINT STYLES
For printing Track Shipment details only
======================================== */
@media print {
/* Hide everything by default when print mode is active */
body.print-tracking-only * {
visibility: hidden;
}
/* Show only the tracking results container */
body.print-tracking-only #trackingResults,
body.print-tracking-only #trackingResults * {
visibility: visible;
}
/* Position the tracking results at top */
body.print-tracking-only #trackingResults {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px;
background: white;
}
/* Hide action buttons in print */
body.print-tracking-only .tracking-actions,
body.print-tracking-only [onclick*="print"],
body.print-tracking-only [onclick*="share"],
body.print-tracking-only [onclick*="downloadTrackingPDF"] {
display: none !important;
}
/* Ensure good print formatting */
body.print-tracking-only #trackingResults {
font-size: 12pt;
color: #000;
}
/* Page break control */
body.print-tracking-only .tracking-timeline {
page-break-inside: avoid;
}
}
/* Mobile only: footer brand title visibility */
@media (max-width: 768px) {
.site-footer .brand-title {
color: #ffffff !important;
opacity: 1 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
}
/* User Dashboard (additive) */
.dashboard-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
box-shadow: var(--shadow-sm);
}
.dashboard-list {
max-height: 400px;
overflow-y: auto;
}
@media (max-width: 768px) {
.dashboard-grid {
grid-template-columns: 1fr !important;
}
}
/* When user is logged in: one Get Quote, one Send Enquiry; no Home/About Us nav; only user-focused content */
body.user-logged-in .hero-slider {
display: none !important;
}
body.user-logged-in .hero {
display: none !important;
}
body.user-logged-in #services {
display: none !important;
}
body.user-logged-in #about {
display: none !important;
}
body.user-logged-in #network {
display: none !important;
}
body.user-logged-in .gradient-band {
display: none !important;
}
body.user-logged-in #contact {
display: none !important;
}