/* Custom CSS for Lisset Transport Inc */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    /* Offset for the sticky 80px top navbar */
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.kinetic-gradient {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%);
}

.hero-overlay {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.4) 100%);
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.nav-item-active {
    border-bottom: 2px solid #002b5b;
    color: #001736;
    font-weight: 700;
    padding-bottom: 4px;
}

/* Custom animation curve for mobile slide-over */
#mobile-menu {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.bento-item {
    background: white;
    border: 1px solid #E6E8EA;
    transition: all 0.3s ease;
}

.bento-item:hover {
    border-color: #002b5b;
}

/* WhatsApp Floating Button Position */
.whatsapp-float {
    position: fixed;
    bottom: 80px !important;
    right: 24px;
    z-index: 60;
}

/* Infinite Marquee Animation */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    animation: scroll 40s linear infinite;
    display: flex;
    width: max-content;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* Traffix Map Section Styles */
.location-cta {
    display: flex;
    align-items: center;
    min-height: 520px;
    background-color: #ffffff;
}

.location-cta-content {
    box-sizing: border-box;
    max-width: 640px;
    padding: 20px 0 60px;
    position: relative;
    z-index: 2;
}

.location-cta-content .kicker {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #505f76;
    /* secondary */
    font-weight: 700;
    margin-bottom: 8px;
}

.location-cta-content .heading-2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: #001736;
    /* primary */
    margin-bottom: 37px;
    line-height: 1.1;
}

.location-area {
    line-height: 0.65;
    max-width: 490px;
}

.location-area ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.location-area ul li {
    margin: 0 0 16px;
    padding: 0;
}

.single-location {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    line-height: 1.3;
    transition: all 0.3s ease;
}

.single-location .location-title {
    color: #505f76;
    /* secondary */
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    transition: all 0.3s ease;
}

.single-location.active_location .location-title {
    color: #001736 !important;
    /* primary */
}

.single-location.active_location .location-icon svg path {
    fill: #FFB300 !important;
    /* Yellow accent */
}

.single-location:hover .location-title {
    color: #001736 !important;
}

.single-location:hover .location-icon svg path {
    fill: #FFB300 !important;
}

.location-icon {
    height: 52px;
    width: 52px;
}

.location-icon svg {
    margin: 0;
    width: 100%;
    height: 100%;
}

.location-icon svg path {
    transition: all 0.3s ease-in-out;
    fill: #c4c6d0;
    /* outline-variant */
}

.location-btns {
    margin-top: 40px;
    display: flex;
    gap: 16px;
}

.location-btns .gl-button {
    display: inline-block;
    background-color: #002b5b;
    /* primary-container */
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 2px solid #002b5b;
}

.location-btns .gl-button:hover {
    background-color: #001736;
    border-color: #001736;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.location-btns .gl-button.trp-btn {
    background-color: transparent;
    color: #002b5b;
    border-color: #002b5b;
}

.location-btns .gl-button.trp-btn:hover {
    background-color: #002b5b;
    color: #ffffff;
}

.location-cta-map {
    aspect-ratio: 1010/769;
    height: 100%;
    max-height: 769px;
    max-width: 1010px;
    position: absolute;
    right: -70px;
    top: 50%;
    transform: translateY(-50%);
    width: 60%;
    z-index: 1;
    pointer-events: none;
    /* Disable pointer-events on the whole overlay to let buttons click */
}

.location-cta-map svg {
    height: 100%;
    margin: 0;
    width: 100%;
    pointer-events: auto;
    /* Enable hover/clicks on SVG paths inside */
}

.map-hover-mage {
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.map-hover-mage.active_map {
    opacity: 1 !important;
}

/* Responsive adjustment */
@media (max-width: 1024px) {
    .location-cta {
        flex-direction: column-reverse;
        padding: 60px 0;
        min-height: auto;
    }

    .location-cta-content {
        padding: 40px 0 0;
        max-width: 95%;
    }

    .location-cta-map {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
}
/* ===== FLOATING CAPSULE NAVBAR ===== */
.nav-capsule-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 95%; /* Responsive fit on smaller viewports */
    background-color: rgba(17, 24, 39, 0.95); /* Richer dark charcoal color, less dim */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px; /* Tight, premium spacing matching the reference mockup */
    padding: 0 12px 0 16px;
    z-index: 1000;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-capsule-container.scrolled {
    top: 12px;
    height: 64px;
    background-color: rgba(17, 24, 39, 0.98);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.12);
}

.nav-capsule-container.hidden-nav {
    transform: translate3d(-50%, -110px, 0) !important;
    opacity: 0;
    pointer-events: none;
}

/* Rounded circle container for the logo */
.nav-logo-capsule {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-logo-capsule:hover {
    transform: scale(1.04);
}

.nav-logo-capsule img {
    max-width: 94%;
    max-height: 94%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shrink logo circle and brand image on navbar scroll */
.nav-capsule-container.scrolled .nav-logo-capsule {
    width: 48px;
    height: 48px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.nav-capsule-container.scrolled .nav-logo-capsule img {
    max-width: 90%;
    max-height: 90%;
}

/* Custom rounded white capsule button for email action */
.nav-action-capsule {
    background-color: #ffffff;
    color: #111827 !important;
    font-weight: 700;
    border-radius: 9999px;
    padding: 10px 24px;
    font-size: 13px;
    text-transform: lowercase;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    white-space: nowrap;
}
.nav-action-capsule:hover {
    background-color: #f3f4f6;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.20);
}

/* Nav links in capsule */
.nav-capsule-link {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 9999px;
    transition: all 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.nav-capsule-link:hover, 
.nav-capsule-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Ensure mobile header content is adjusted */
#mobile-menu {
    padding-top: 140px !important;
}

/* Global Scroll Progress Bar fixed to absolute top edge of screen */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #002b5b, #4a90d9);
    z-index: 999999; /* Higher than navbar */
    transition: width 0.15s ease-out;
}

/* ===== LOGISTICS SCROLLING STORYTELLING ===== */

.story-section {
    background-color: #080c14;
    color: #f1f5f9;
    position: relative;
    overflow: hidden;
}

.story-svg-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

@media (max-width: 1024px) {
    .story-svg-container {
        left: 24px;
        transform: none;
        width: 80px;
    }
}

.story-svg-line-bg {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 3px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.story-svg-line-active {
    stroke: #FFB300; /* Amber glow matching premium transport color */
    stroke-width: 4px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px rgba(255, 179, 0, 0.6));
}

/* Glowing Coordinate Dot */
.coordinate-tracker {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #FFB300;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    box-shadow: 0 0 15px #FFB300, 0 0 30px #FFB300;
    pointer-events: none;
}

.coordinate-tracker::after {
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    border: 2px solid #FFB300;
    border-radius: 50%;
    top: -8px;
    left: -8px;
    animation: tracker-pulse 1.8s infinite ease-out;
    opacity: 0.8;
}

@keyframes tracker-pulse {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* Floating coordinates bubble */
.coordinate-bubble {
    position: absolute;
    background: rgba(8, 12, 20, 0.95);
    border: 1px solid rgba(255, 179, 0, 0.5);
    padding: 8px 14px;
    border-radius: 8px;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', monospace;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6), 0 0 15px rgba(255, 179, 0, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 25;
    pointer-events: none;
    transform: translate(-50%, -140%);
}

@media (max-width: 1024px) {
    .coordinate-bubble {
        transform: translate(25px, -50%);
    }
}

/* Dark glassmorphic card stylings */
.glass-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 179, 0, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(-4px);
}

/* Interactive Finder & Rates Input overrides */
.finder-input {
    background-color: rgba(15, 23, 42, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.finder-input:focus {
    border-color: #FFB300 !important;
    box-shadow: 0 0 0 2px rgba(255, 179, 0, 0.2) !important;
    outline: none !important;
}