/*
Theme Name: Logimax
Author: ModinaTheme
Author URI: https://themeforest.net/user/modinatheme/
Description: Logistics & Transportation HTML Template
Version: 1.0.0
*/

/*
=================================
|***    Table of contents:   ***|
=================================

1. General styles
2. Typography
3. Helpers
4. Preloader
5. Go up button
6. Header and navigation
7. Hero Section
8. About us
9. Services
10. Fun facts
11. Projects
12. Pricing
13. Testimonial
14. CTA
15. Team
16. Video Banner
17. Shop
18. Marquee
19. Blog
20. Footer

Main Style file-> assets/css/main.css
*/

/* =====================================================================
   Kargo Trust Logistics — Modern Theme Override
   Palette: Blue (primary) mixed with Red + Green accents
   Includes: modern menu styling + transport motion animations
   This file loads AFTER main.css so it wins the cascade.
   ===================================================================== */

:root {
    /* ---- Brand palette ---- */
    --brand-blue:   #1457E6;   /* primary */
    --brand-blue-d: #0E3FB0;   /* darker blue */
    --brand-green:  #00A85A;   /* success / accent */
    --brand-red:    #E8323F;   /* alert / accent */
    --brand-navy:   #0A1F44;   /* deep navy for dark surfaces */

    /* tri-colour gradients */
    --grad-primary: linear-gradient(135deg, #1457E6 0%, #00A85A 100%);
    --grad-alt:     linear-gradient(135deg, #1457E6 0%, #E8323F 100%);
    --grad-tri:     linear-gradient(90deg, #E8323F 0%, #1457E6 50%, #00A85A 100%);

    /* ---- Remap the template's tokens onto the new palette ---- */
    --theme:  #1457E6;          /* was red  */
    --theme2: #00A85A;          /* was yellow */
    --theme3: #0A1F44;          /* deep navy */
    --base:   #00A85A;
    --header: #0A1F44;          /* was dark grey */
    --button: #0E3FB0;
    --button2:#0A1F44;
    --ratting:#F7B500;

    --color-gradient-1: linear-gradient(135deg, #1457E6 0%, #00A85A 100%);
}

/* ---------------------------------------------------------------------
   Buttons — colour hierarchy: BLUE primary · GREEN sub-primary · RED secondary
   The template animates ::before/::after "wipe" overlays in --header (navy);
   we neutralise them and drive hover directly so contrast is always safe.
   --------------------------------------------------------------------- */
.theme-btn::before,
.theme-btn::after { display: none !important; }

/* Primary (BLUE) */
.theme-btn {
    background: var(--brand-blue) !important;
    color: #fff !important;
    border: 2px solid transparent;
    border-radius: 10px;
    box-shadow: 0 10px 24px -10px rgba(20, 87, 230, .55);
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
}
.theme-btn:hover {
    background: var(--brand-blue-d) !important;
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -10px rgba(20, 87, 230, .65);
}

/* Sub-primary (GREEN) — opt-in helper for success / forward actions */
.theme-btn.btn-green,
.newsletter-button {
    background: var(--brand-green) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px -10px rgba(0, 168, 90, .55);
}
.theme-btn.btn-green:hover { background: var(--kt-sub-d, #00853f) !important; color: #fff !important; }

/* Secondary (RED) — the prominent "Track" CTA in the header uses .bg-second */
.theme-btn.bg-second {
    background: var(--brand-red) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px -10px rgba(232, 50, 63, .55);
}
.theme-btn.bg-second:hover {
    background: var(--kt-secondary-d, #c41f2b) !important;
    color: #fff !important;
    transform: translateY(-3px);
}

/* White button on dark/photo backgrounds → fills blue on hover */
.theme-btn.bg-white {
    background: #fff !important;
    color: var(--brand-blue) !important;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35);
}
.theme-btn.bg-white:hover {
    background: var(--brand-blue) !important;
    color: #fff !important;
}

/* hover-white button (hero primary) → inverts to white with blue text */
.theme-btn.hover-white {
    background: var(--brand-green) !important;   /* sub-primary at rest */
    color: #fff !important;
}
.theme-btn.hover-white:hover {
    background: #fff !important;
    color: var(--brand-blue) !important;
    border-color: var(--brand-blue);
}

/* ---------------------------------------------------------------------
   Top contact bar — navy instead of flat black, tri-colour underline
   --------------------------------------------------------------------- */
.header-tops-section {
    background: var(--brand-navy) !important;
    position: relative;
}
.header-tops-section::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--grad-tri);
    background-size: 200% 100%;
    animation: tri-slide 6s linear infinite;
}
@keyframes tri-slide { to { background-position: 200% 0; } }
.header-tops-section .contact-list a:hover { color: var(--brand-green) !important; }

/* ---------------------------------------------------------------------
   Sticky header — soft glass + shadow
   --------------------------------------------------------------------- */
#header-sticky {
    backdrop-filter: blur(6px);
    transition: box-shadow .3s ease, background .3s ease;
}
#header-sticky.sticky,
.header-3.sticky {
    box-shadow: 0 8px 30px -12px rgba(10, 31, 68, .25);
}

/* ---------------------------------------------------------------------
   MODERN NAV — animated underline + icons + active state
   --------------------------------------------------------------------- */
.main-menu nav > ul > li { position: relative; }
.main-menu nav > ul > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px;
    color: var(--brand-navy);
    font-weight: 600;
    letter-spacing: .2px;
    transition: color .3s ease;
}
.main-menu nav > ul > li > a b { font-weight: 600; }
.main-menu nav > ul > li > a .nav-ico {
    font-size: 14px;
    color: var(--brand-blue);
    transition: transform .35s ease, color .3s ease;
}
.main-menu nav > ul > li > a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 2px;
    width: 0; height: 2px;
    border-radius: 2px;
    background: var(--grad-tri);
    transition: width .35s ease;
}
.main-menu nav > ul > li > a:hover,
.main-menu nav > ul > li.active > a { color: var(--brand-blue); }
.main-menu nav > ul > li > a:hover::after,
.main-menu nav > ul > li.active > a::after { width: 100%; }
.main-menu nav > ul > li > a:hover .nav-ico {
    transform: translateY(-2px) rotate(-8deg);
    color: var(--brand-green);
}

/* Header CTA plane nudge */
.header-button .theme-btn i.fa-plane { transition: transform .4s ease; }
.header-button .theme-btn:hover i.fa-plane { transform: translateX(6px) translateY(-3px) rotate(-15deg); }

/* ---------------------------------------------------------------------
   Section titles / accents recoloured
   --------------------------------------------------------------------- */
.section-title span,
.section-title.style-2 span { color: var(--brand-blue) !important; }
.section-title h2 span { color: var(--brand-green) !important; }
.service-provide-items.active,
.service-provide-items:hover { border-color: var(--brand-blue); }
.service-provide-items .icon i { color: var(--brand-blue); }
.service-provide-items.active .icon i,
.service-provide-items:hover .icon i { color: var(--brand-green); }
.about-icon-items .icon i,
.icon-item .icon i { color: var(--brand-blue); }
.about-list li i,
li i.flaticon-verify { color: var(--brand-green) !important; }

/* Counter numbers */
.counter-items h2 { color: var(--brand-blue); }
.counter-items.style-2 h2 { color: var(--brand-green); }

/* Marquee sliding text recolour */
.marque-section { background: var(--brand-navy); }
.marquee-item .text-slider { -webkit-text-stroke: 1px rgba(255,255,255,.35); color: transparent; }
.marquee-item .text-slider:hover { color: var(--brand-green); }

/* Footer newsletter button */
.newsletter-button { background: var(--grad-primary) !important; }

/* Scroll-to-top ring */
.scroll-up svg path { stroke: var(--brand-blue); }

/* =====================================================================
   TRANSPORT MOTION SCENE  (plane • ship • truck)
   Injected site-wide just above the footer.
   ===================================================================== */
.transport-scene {
    position: relative;
    height: 230px;
    overflow: hidden;
    background: linear-gradient(180deg, #dff0ff 0%, #eaf6ff 45%, #cfeedd 46%, #dcf5e8 70%, #e9eef5 71%, #f4f6fa 100%);
    border-top: 3px solid transparent;
    border-image: var(--grad-tri) 1;
}
.transport-scene .ts-label {
    position: absolute;
    top: 14px; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--brand-navy);
    opacity: .55;
}

/* --- Sky lane: clouds + plane --- */
.ts-cloud {
    position: absolute;
    top: 0;
    width: 70px; height: 22px;
    background: #fff;
    border-radius: 30px;
    opacity: .85;
    box-shadow: 22px 6px 0 -2px #fff, -20px 7px 0 -4px #fff;
}
.ts-cloud.c1 { top: 34px; animation: drift 26s linear infinite; }
.ts-cloud.c2 { top: 60px; transform: scale(.7); animation: drift 38s linear infinite; animation-delay: -8s; }
.ts-cloud.c3 { top: 20px; transform: scale(1.2); opacity:.6; animation: drift 46s linear infinite; animation-delay: -20s; }
@keyframes drift {
    from { left: -120px; }
    to   { left: 110%; }
}

.ts-plane {
    position: absolute;
    top: 40px;
    font-size: 34px;
    color: var(--brand-blue);
    filter: drop-shadow(0 6px 6px rgba(20,87,230,.25));
    animation: fly 11s linear infinite;
}
.ts-plane::after {
    content: "";
    position: absolute;
    right: 100%; top: 52%;
    width: 60px; height: 3px;
    background: linear-gradient(90deg, rgba(20,87,230,0), rgba(20,87,230,.4));
    transform: translateY(-50%);
}
@keyframes fly {
    0%   { left: -8%;  top: 70px; transform: rotate(-6deg); }
    50%  { top: 26px; }
    100% { left: 108%; top: 56px; transform: rotate(-10deg); }
}

/* --- Sea lane: ship bobbing & sailing --- */
.ts-ship {
    position: absolute;
    bottom: 70px;
    font-size: 40px;
    color: var(--brand-red);
    filter: drop-shadow(0 4px 4px rgba(0,0,0,.18));
    animation: sail 22s linear infinite, bob 3.2s ease-in-out infinite;
}
@keyframes sail {
    from { left: -10%; }
    to   { left: 110%; }
}
@keyframes bob {
    0%,100% { transform: translateY(0) rotate(-2deg); }
    50%     { transform: translateY(-6px) rotate(2deg); }
}

/* --- Road lane: dashed road + truck driving --- */
.ts-road {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 68px;
    background: #2a2f3a;
}
.ts-road::before {  /* moving lane dashes */
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: repeating-linear-gradient(90deg, #f7b500 0 32px, transparent 32px 64px);
    animation: dash 1.2s linear infinite;
}
@keyframes dash { from { background-position: 0 0; } to { background-position: -64px 0; } }

.ts-truck {
    position: absolute;
    bottom: 18px;
    font-size: 38px;
    color: var(--brand-green);
    filter: drop-shadow(0 5px 4px rgba(0,0,0,.25));
    animation: drive 9s linear infinite, jiggle .35s ease-in-out infinite;
}
@keyframes drive {
    from { left: -9%; }
    to   { left: 112%; }
}
@keyframes jiggle {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-2px); }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .ts-plane, .ts-ship, .ts-truck, .ts-cloud,
    .ts-road::before, .header-tops-section::after { animation: none !important; }
}
@media (max-width: 575px) {
    .transport-scene { height: 180px; }
    .ts-plane { font-size: 26px; }
    .ts-ship, .ts-truck { font-size: 30px; }
}

/* =====================================================================
   Generic floating motion helpers (hero shapes etc.)
   ===================================================================== */
.hero-plane {
    position: absolute;
    top: 18%;
    left: -10%;
    z-index: 3;
    font-size: 46px;
    color: #fff;
    opacity: .9;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,.3));
    animation: hero-fly 16s linear infinite;
    pointer-events: none;
}
@keyframes hero-fly {
    0%   { left: -10%; top: 28%; transform: rotate(-8deg); }
    50%  { top: 14%; }
    100% { left: 110%; top: 22%; transform: rotate(-12deg); }
}