/* Custom enhancements with #ff5f13 accent - MINIMAL */ :root { --accent-orange: #ff5f13; --accent-orange-light: rgba(255, 95, 19, 0.1); --accent-blue: #0e1d34; } /* Hero Section Enhancements */ .hero { position: relative; } /* FIX: the .main overflow-x:hidden below only clips content bleeding past that container -- it doesn't stop the actual document/page from being wider than the screen. On Android Chrome specifically, position:fixed elements (the hamburger icon, the scroll-to-top button) are placed relative to the full layout viewport, so if the document itself is wider than the visible screen, those fixed elements can render past the right edge, requiring a horizontal scroll to reach them -- exactly this bug. IMPORTANT: this is set on only, never . Setting overflow-x on body also forces overflow-y away from "visible" (per spec, an axis can't stay "visible" once the other axis isn't), which turns body into its own inner scroll container instead of the real viewport -- and that's what breaks position:sticky elements (like the top sub-header) elsewhere on the site. Restricting this to html avoids that: browsers treat the root element's overflow as the viewport's own scroll behavior rather than a nested scroll box. */ html { overflow-x: hidden; } .main { overflow-x: hidden; } .hero::after { content: ''; position: absolute; top: -20%; right: 0; width: 600px; height: 600px; max-width: 60%; background: radial-gradient(circle, rgba(255, 95, 19, 0.08) 0%, rgba(255, 95, 19, 0) 70%); border-radius: 50%; z-index: 1; pointer-events: none; } .hero .btn-primary { background-color: var(--accent-orange); border-color: var(--accent-orange); } .hero .btn-primary:hover { background-color: #e04e00; border-color: #e04e00; } /* Section Title Styling */ .section-title { text-align: center; padding: 30px 0; margin-bottom: 30px; position: relative; } .section-title h2 { font-size: 32px; font-weight: 700; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 0; position: relative; z-index: 2; } .section-title span { position: absolute; top: 4px; color: color-mix(in srgb, var(--heading-color), transparent 95%); left: 0; right: 0; z-index: 1; font-weight: 700; font-size: 52px; text-transform: uppercase; line-height: 1; } .section-title p { margin-bottom: 0; position: relative; z-index: 2; } /* Stats Section */ .stats { padding: 60px 0; background-color: #f8f9fc; position: relative; overflow: hidden; } .stats::before { content: ''; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255, 95, 19, 0.05) 0%, rgba(255, 95, 19, 0) 70%); border-radius: 50%; pointer-events: none; } .stats .stats-item { background: white; border-radius: 10px; padding: 30px 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); transition: all 0.3s ease; border: 1px solid rgba(0,0,0,0.03); } .stats .stats-item:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(255, 95, 19, 0.1); border-color: rgba(255, 95, 19, 0.1); } .stats .stats-item p { font-size: 16px; color: #6c757d; margin: 0; font-weight: 500; } .stats-number-wrapper { display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 42px; font-weight: 700; color: #001973; margin-bottom: 10px; line-height: 1; } .stats-plus, .stats-percent { font-size: 42px; font-weight: 700; line-height: 1; display: inline-block; } .stats-item:hover .stats-number-wrapper, .stats-item:hover .stats-plus, .stats-item:hover .stats-percent, .stats-item:hover .stats-number-wrapper span { color: var(--accent-orange) !important; } .stats .stats-item span[data-purecounter] { font-size: 42px !important; font-weight: 700 !important; color: inherit !important; display: inline-block !important; margin: 0 !important; line-height: 1 !important; } .stats-img-container { position: relative; min-height: 300px; display: flex; align-items: center; justify-content: center; z-index:999!important; } .stats-img-container img { max-width: 100%; height: auto; animation: floatImage 3s ease-in-out infinite; z-index:999!important; } @keyframes floatImage { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Hero image animation */ .hero-main-img { transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1); will-change: transform; } /* Features Section */ .features .features-item .trail-vehicles i { color: var(--accent-orange); filter: drop-shadow(0 0 5px rgba(255, 95, 19, 0.3)); } .features .features-item ul i { color: var(--accent-orange); } /* Team Section */ .team .member .social a:hover { color: var(--accent-orange) !important; } /* Call to Action */ .call-to-action .cta-btn { border-color: var(--accent-orange); color: var(--accent-orange); background: var(--accent-orange); color: white; border-color: var(--accent-orange); } .call-to-action .cta-btn:hover { border-color: var(--accent-orange); color: var(--accent-orange); background:transparent; } /* Footer */ .footer .social-links a:hover { background: var(--accent-orange); border-color: var(--accent-orange); color: white; } .footer .footer-links ul a:hover { color: var(--accent-orange); } .btn-getstarted:hover { background: #0d42ff !important; } .scroll-top { background: var(--accent-orange) !important; } .scroll-top:hover { background: #e04e00 !important; } .badge-accent { display: inline-block; background: rgba(255, 95, 19, 0.1); color: var(--accent-orange); padding: 5px 15px; border-radius: 50px; font-size: 14px; font-weight: 600; border: 1px solid rgba(255, 95, 19, 0.2); } .floating-accent { position: absolute; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255, 95, 19, 0.03) 0%, rgba(255, 95, 19, 0) 70%); border-radius: 50%; pointer-events: none; z-index: 1; } .floating-1 { top: 10%; left: 5%; } .floating-2 { bottom: 10%; right: 5%; width: 300px; height: 300px; } @media (max-width: 768px) { .section-title span { font-size: 38px; } .section-title h2 { font-size: 28px; } } /* ============================================ HEADER & SUB-HEADER FIXED - NO BLANK SPACE ============================================ */ /* Remove any default body margin/padding */ * { margin: 0; padding: 0; box-sizing: border-box; } body { margin: 0; padding: 0; background-color: var(--background-color); } /* Top Sub-header - Sticky at very top of page */ .top-subheader { position: sticky; top: 0; z-index: 1031; background-color: #0a1a3a; color: #ffffff; padding: 8px 0; font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); width: 100%; } /* Carrier Portal Button - matching Client Portal style */ .top-subheader .btn-portal.carrier { background-color: transparent; color: #f9f9f9; text-decoration: none; padding: 6px 15px; border-radius: 4px; font-weight: 500; font-size: 13px; transition: all 0.3s ease; display: inline-flex; align-items: center; } .top-subheader .btn-portal.carrier:hover { background-color: var(--accent-orange); color: #ffffff; } /* Optional: subtle separator between portal buttons */ .top-subheader .portal-separator { color: rgba(255, 255, 255, 0.2); margin: 0 8px; } /* Mobile responsive adjustments */ @media (max-width: 768px) { .top-subheader .btn-portal, .top-subheader .btn-portal.carrier { padding: 4px 10px; font-size: 11px; } .top-subheader .portal-separator { margin: 0 4px; } } @media (max-width: 576px) { .top-subheader .language-portal { gap: 6px; } .top-subheader .btn-portal span, .top-subheader .btn-portal.carrier span { display: none; } .top-subheader .btn-portal i, .top-subheader .btn-portal.carrier i { margin-right: 0; font-size: 14px; } .top-subheader .btn-portal, .top-subheader .btn-portal.carrier { padding: 6px 8px; } } /* Main Header - Starts BELOW sub-header, transparent background */ .header { position: fixed; top: 41px; /* Height of top sub-header */ left: 0; width: 100%; z-index: 1030; background-color: transparent; padding: 20px 0; transition: all 0.3s ease-in-out; } /* When scrolled - header becomes sticky at top with solid background */ .header.scrolled { top: 0; background-color: rgba(14, 29, 52, 0.98); padding: 10px 0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } /* NOTE: backdrop-filter intentionally removed here. Even a blur value creates a new CSS stacking context, which traps this header's descendants -- including the mobile nav dropdown -- inside a stacking context capped at .header's own z-index. That was causing the mobile menu to render behind page content once scrolled. Bumped the background opacity slightly (0.95 -> 0.98) to compensate for the loss of the blur effect, visually near-identical result. */ /* Logo transition */ .header .logo img { max-height: 66px; transition: all 0.3s ease; } .header.scrolled .logo img { max-height: 50px; } /* Nav link colors */ .header .navmenu a { color: rgba(255, 255, 255, 0.8); } .header.scrolled .navmenu a { color: rgba(255, 255, 255, 0.9); } .header .navmenu a:hover, .header .navmenu .active { color: #ffffff; } /* Get Started button */ /* Hero section - no extra padding at top */ .hero { margin-top: 0; padding-top: 100px; position: relative; } /* Full viewport height on desktop/PC screens, regardless of monitor size. min-height (not height) is used so the section can still grow on very short/zoomed-in viewports without clipping content. Flex + centered content keeps the hero text/stats vertically centered within that full-height section instead of sitting up near the padding-top. */ @media (min-width: 992px) { .hero { min-height: 100vh; display: flex; align-items: center; } .hero2-split .row { min-height: unset; } } /* Mobile adjustments */ @media (max-width: 768px) { .top-subheader { position: sticky; top: 0; } .header { top: 80px; /* Mobile sub-header is taller (~80px) */ padding: 12px 0; } .header.scrolled { top: 0; padding: 8px 0; } .hero { padding-top: 120px; } } @media (max-width: 480px) { .top-subheader { position: sticky; top: 0; } .header { top: 105px; } .header.scrolled { top: 0; } .hero { padding-top: 140px; } } /* Tighten the gap between hero text and cargo image on mobile/tablet, where they stack into two rows (Bootstrap's row gy-4 + default paragraph margin were adding more space than needed). */ @media (max-width: 991px) { .hero .row { --bs-gutter-y: 0.5rem; } .hero .col-lg-7 p { margin-bottom: 10px; } .hero-img { margin-top: 0; } } /* FIX: Dropdown menu text colors when header is scrolled */ .header.scrolled .navmenu .dropdown ul { background: white !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .header.scrolled .navmenu .dropdown ul li a { color: #0e1d34 !important; background: transparent !important; } .header.scrolled .navmenu .dropdown ul li a:hover { color: #ff5f13 !important; background: rgba(255, 95, 19, 0.05) !important; padding-left: 20px !important; } /* Also fix the parent dropdown arrow color when scrolled */ .header.scrolled .navmenu a { color: rgba(255, 255, 255, 0.9); } .header.scrolled .navmenu .dropdown > a { color: rgba(255, 255, 255, 0.9); } /* Ensure dropdown toggle icon is visible */ .header.scrolled .navmenu .dropdown .toggle-dropdown { color: rgba(255, 255, 255, 0.7); } /* Fix for mobile menu when scrolled */ @media (max-width: 1199px) { .header.scrolled .navmenu ul { background: white !important; } .header.scrolled .navmenu ul li a { color: #0e1d34 !important; } .header.scrolled .navmenu ul li a:hover { color: #ff5f13 !important; } } /* Mobile nav menu positioning */ @media (max-width: 1199px) { .navmenu ul { top: calc(60px + 41px) !important; } .header.scrolled .navmenu ul { top: 60px !important; } } /* Stats section layout */ @media (min-width: 992px) { .stats .col-lg-6 .row { display: flex; flex-wrap: nowrap; gap: 15px; } .stats .col-lg-6 .row .col-lg-6 { flex: 1; max-width: none; } } @media (max-width: 991px) { .stats-number-wrapper, .stats-plus, .stats-percent, .stats .stats-item span[data-purecounter] { font-size: 32px !important; } .stats .stats-item { padding: 20px 15px; } } /* Sub-header inner styles */ .top-subheader .contact-info a { color: #ffffff; text-decoration: none; } .top-subheader .contact-info a:hover { color: var(--accent-orange); } .top-subheader .separator { color: rgba(255, 255, 255, 0.3); } .top-subheader .language-link { color: #ffffff; text-decoration: none; padding: 4px 8px; border-radius: 4px; transition: all 0.3s ease; font-size: 13px; } .top-subheader .language-link:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--accent-orange); } .top-subheader .flag-icon { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; } /* Ensure language-portal actually collapses to display:contents on mobile (Bootstrap's d-flex utility class in the markup carries !important and would otherwise always win over main.css's plain display:contents rule, preventing the Carrier/Client Portal buttons from dropping to their own centered row and causing the top-subheader to overflow the viewport) */ @media (max-width: 768px) { .top-subheader .language-portal { display: contents !important; } } .top-subheader .btn-portal:hover { background-color: var(--accent-orange); color: #ffffff; } /* Feature Image Link Styles */ .feature-image-link { display: block; overflow: hidden; border-radius: 8px; position: relative; cursor: pointer; text-decoration: none; } .feature-image { transition: transform 0.5s ease; width: 100%; height: auto; display: block; } .feature-image-link:hover .feature-image { transform: scale(1.03); } /* Optional: Add a subtle overlay effect on hover */ .feature-image-link::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: background 0.3s ease; pointer-events: none; border-radius: 8px; } /* Feature Title Link Styles */ .feature-title-link { color: inherit; text-decoration: none; transition: color 0.3s ease; position: relative; display: inline-block; } .feature-title-link:hover { color: #ff5f13; } /* Optional: Add underline animation on title hover */ .feature-title-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #ff5f13; transition: width 0.3s ease; } .feature-title-link:hover::after { width: 100%; } /* Read More Link Styles */ .feature-read-more { display: inline-flex; align-items: center; gap: 8px; color: #ff5f13; text-decoration: none; font-weight: 600; margin-top: 15px; padding: 8px 0; transition: gap 0.3s ease; border-bottom: 2px solid transparent; } .feature-read-more i { font-size: 14px; transition: transform 0.3s ease; } .feature-read-more:hover { gap: 12px; border-bottom-color: #ff5f13; } .feature-read-more:hover i { transform: translateX(5px); } /* Ensure the entire card has proper spacing */ .features-item { position: relative; padding: 30px 0; } /* Make sure the trail vehicles don't interfere with clicks */ .trail-vehicles { pointer-events: none; } /* Responsive adjustments */ @media (max-width: 768px) { .feature-image-link:hover .feature-image { transform: scale(1.05); /* Slightly less zoom on mobile */ } .feature-read-more { margin-top: 10px; } } /* Partners Carousel Styles - Clean & Professional */ .partners { overflow: hidden; position: relative; } /* Gradient fade on edges for smooth effect */ .partners::before, .partners::after { content: ''; position: absolute; top: 0; width: 150px; height: 100%; z-index: 2; pointer-events: none; } .partners::before { left: 0; background: linear-gradient(to right, #f8f9fc 0%, rgba(248, 249, 252, 0) 100%); } .partners::after { right: 0; background: linear-gradient(to left, #f8f9fc 0%, rgba(248, 249, 252, 0) 100%); } /* Carousel Container */ .partners-carousel { width: 100%; overflow: hidden; padding: 20px 0; } .carousel-track-container { width: 100%; overflow: hidden; } .carousel-track { display: flex; animation: scroll 40s linear infinite; width: fit-content; } /* Pause animation on hover (optional - remove if you want continuous) */ .partners-carousel:hover .carousel-track { animation-play-state: paused; } /* Carousel Items */ .carousel-item { flex: 0 0 auto; width: 180px; margin: 0 20px; display: flex; align-items: center; justify-content: center; } /* Partner Logo Styles */ .partner-logo { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; background: white; border-radius: 12px; padding: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); transition: all 0.3s ease; border: 1px solid rgba(0,0,0,0.03); } .partner-logo:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(255, 95, 19, 0.1); border-color: rgba(255, 95, 19, 0.2); } .partner-logo img { max-width: 100%; max-height: 70px; width: auto; height: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease; } .partner-logo:hover img { filter: grayscale(0%); opacity: 1; } /* Special style for accreditation badges */ .partner-logo.accreditation { background: linear-gradient(135deg, #fff 0%, #f8f9fc 100%); border: 1px solid rgba(255, 95, 19, 0.2); } .partner-logo.accreditation img { filter: grayscale(0%); opacity: 0.9; } .partner-logo.accreditation:hover { background: white; border-color: #ff5f13; } /* Continuous scroll animation */ @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-180px * 9 - 40px * 9)); /* Width of one full set (9 items) */ } } /* Responsive adjustments */ @media (max-width: 768px) { .partners::before, .partners::after { width: 50px; } .carousel-item { width: 140px; margin: 0 10px; } .partner-logo { height: 80px; padding: 10px; } .partner-logo img { max-height: 50px; } @keyframes scroll { 100% { transform: translateX(calc(-140px * 9 - 20px * 9)); } } } @media (max-width: 480px) { .carousel-item { width: 120px; margin: 0 8px; } @keyframes scroll { 100% { transform: translateX(calc(-120px * 9 - 16px * 9)); } } } /* ============================================ HERO 2.0 — split video hero, left content, inline stats, no floating cargo image ============================================ */ .hero2-split .container { position: relative; z-index: 3; } .hero2-split .row { min-height: 55vh; } /* Left-to-right dark gradient so text stays readable while the video/photo background remains visible toward the right side */ .hero2-gradient { position: absolute; inset: 0; z-index: 2; background: linear-gradient( 90deg, rgba(10, 26, 58, 0.97) 0%, rgba(10, 26, 58, 0.94) 28%, rgba(10, 26, 58, 0.55) 52%, rgba(10, 26, 58, 0.08) 76%, rgba(10, 26, 58, 0) 100% ); pointer-events: none; } .hero2-content { max-width: 560px; padding: 40px 0; position: relative; z-index: 3; } .hero2-badge { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-orange, #ff5f13); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 22px; } .hero2-badge-line { display: inline-block; width: 28px; height: 2px; background: var(--accent-orange, #ff5f13); } .hero .hero2-title { font-size: 64px; font-weight: 800; line-height: 1.05; color: #ffffff; margin-bottom: 24px; } .hero .hero2-title .accent { color: var(--accent-orange, #ff5f13); display: block; } .hero .hero2-text { font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); margin-bottom: 32px; max-width: 480px; } .hero2-cta { display: inline-flex; align-items: center; gap: 10px; background: #ffffff; color: #0a1a3a; font-weight: 700; padding: 15px 30px; border-radius: 6px; text-decoration: none; transition: all 0.25s ease; margin-bottom: 48px; } .hero2-cta:hover { background: var(--accent-orange, #ff5f13); color: #fff; transform: translateY(-2px); } .hero2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 22px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.15); max-width: 560px; } .hero2-stat-number { font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; color: #ffffff; line-height: 1; margin-bottom: 8px; white-space: nowrap; } .hero2-stat-number .stats-plus, .hero2-stat-number .stats-percent { font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; } .hero2-stat p { margin: 0; font-size: 11.5px; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); white-space: nowrap; } /* Play button over the video, right side of the hero */ .hero2-play-btn { position: absolute; top: 50%; right: 22%; transform: translate(50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); border: 2px solid rgba(255, 255, 255, 0.7); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; z-index: 4; backdrop-filter: blur(4px); transition: all 0.25s ease; text-decoration: none; } .hero2-play-btn:hover { background: var(--accent-orange, #ff5f13); border-color: var(--accent-orange, #ff5f13); color: #fff; } /* Live tracking pill, bottom-right of the hero */ .hero2-live-badge { position: absolute; bottom: 40px; right: 40px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; background: rgba(10, 20, 35, 0.75); border: 1px solid rgba(255, 255, 255, 0.15); color: #cdd8e6; font-size: 13px; font-family: monospace, monospace; letter-spacing: 0.5px; padding: 10px 16px; border-radius: 30px; backdrop-filter: blur(6px); } .hero2-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #29d17c; display: inline-block; animation: hero2LiveDotPulse 2s infinite; } @keyframes hero2LiveDotPulse { 0% { box-shadow: 0 0 0 0 rgba(41, 209, 124, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(41, 209, 124, 0); } 100% { box-shadow: 0 0 0 0 rgba(41, 209, 124, 0); } } @media (max-width: 991px) { .hero2-title { font-size: 44px; } .hero2-gradient { background: linear-gradient(180deg, rgba(10,26,58,0.97) 40%, rgba(10,26,58,0.6) 72%, rgba(10,26,58,0.15) 100%); } .hero2-play-btn { right: 50%; top: 62%; } .hero2-live-badge { bottom: 20px; right: 20px; font-size: 11px; padding: 8px 12px; } .hero2-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; row-gap: 18px; } } @media (max-width: 575px) { .hero2-title { font-size: 34px; } .hero2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 16px; } .hero2-stat-number, .hero2-stat-number .stats-plus, .hero2-stat-number .stats-percent { font-size: 22px; } .hero2-play-btn { width: 52px; height: 52px; font-size: 18px; } }