@extends('layouts.master')
@section('content')
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        :root {
            --primary: #1D4ED8;
            --secondary: #3B82F6;
            --dark: #0f172a;
            --white: #ffffff;
            --gray: #64748b;
            --light-gray: #e2e8f0;
            --text: #1e293b;
            --surface: #f8faff;
            --accent: #06b6d4;
            --success: #10b981;
            --glass-bg: rgba(255, 255, 255, 0.08);
            --glass-border: rgba(255, 255, 255, 0.18);
        }

        body {
            font-family: 'Inter', sans-serif;
            color: var(--text);
            background: #fff;
            font-size: 15px;
            overflow-x: hidden
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: 'Syne', sans-serif
        }

        .nav-logo {
            display: flex;
            align-items: center;
        }

        /* 🔥 MAIN FIX */
        .logo-img {
            height: 50px;
            /* control size */
            width: auto;
            /* keep aspect ratio */
            object-fit: contain;
            /* prevent stretch */
        }

        /* Optional: responsive */
        @media (max-width: 768px) {
            .logo-img {
                height: 40px;
            }
        }

        span.d-none.d-md-inline-block {
            color: white;
        }

        .top-bar {
            background: #14224a;
        }

        /* NAV */
        nav {
            background: rgba(20, 34, 74, 1);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding: 0 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 64px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
        }

        .nav-logo {
            font-family: 'Syne', sans-serif;
            font-size: 22px;
            font-weight: 800;
            color: #fff;
            letter-spacing: -0.5px
        }

        .nav-logo span {
            color: var(--secondary)
        }

        .nav-links {
            display: flex;
            gap: 1.5rem;
            list-style: none
        }

        .nav-links a {
            color: #cbd5e1;
            text-decoration: none;
            font-size: 14px;
            font-weight: 400;
            transition: color 0.2s
        }

        .nav-links a:hover {
            color: #fff
        }

        .nav-cta {
            background: rgba(59, 130, 246, 0.25);
            border: 1px solid rgba(59, 130, 246, 0.5);
            color: #93c5fd;
            padding: 8px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            backdrop-filter: blur(8px);
            transition: all 0.2s;
        }

        .nav-cta:hover {
            background: rgba(59, 130, 246, 0.4);
            color: #fff
        }

        .nav-hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 4px
        }

        .nav-hamburger span {
            width: 22px;
            height: 2px;
            background: #fff;
            border-radius: 2px;
            transition: all 0.3s
        }

        /* ========== HERO SECTION ========== */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: var(--dark);
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            background: url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=1920&q=80') center/cover;
            opacity: 0.15;
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(29, 78, 216, 0.4) 100%);
        }

        .hero-grid {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 60px 60px;
            mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
            animation: gridMove 20s linear infinite;
        }

        @keyframes gridMove {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(60px, 60px);
            }
        }

        /* Floating Particles */
        .particles {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: var(--secondary);
            border-radius: 50%;
            opacity: 0.4;
            box-shadow: 0 0 10px var(--secondary);
            animation: float 20s infinite;
        }

        .particle:nth-child(1) {
            left: 10%;
            top: 20%;
            animation-delay: 0s;
        }

        .particle:nth-child(2) {
            left: 20%;
            top: 80%;
            animation-delay: 3s;
        }

        .particle:nth-child(3) {
            left: 60%;
            top: 40%;
            animation-delay: 6s;
        }

        .particle:nth-child(4) {
            left: 80%;
            top: 60%;
            animation-delay: 9s;
        }

        .particle:nth-child(5) {
            left: 40%;
            top: 10%;
            animation-delay: 12s;
        }

        .particle:nth-child(6) {
            left: 90%;
            top: 30%;
            animation-delay: 15s;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0) translateX(0);
                opacity: 0.3;
            }

            25% {
                transform: translateY(-40px) translateX(15px);
                opacity: 0.6;
            }

            50% {
                transform: translateY(-30px) translateX(-15px);
                opacity: 0.4;
            }

            75% {
                transform: translateY(-50px) translateX(10px);
                opacity: 0.5;
            }
        }

        .hero-container {
            position: relative;
            z-index: 2;
            flex: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
            padding: 6rem 2rem 3rem;
            width: 100%;
        }

        .hero-content {
            max-width: 600px;
            animation: fadeInLeft 0.8s ease-out;
        }

        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(59, 130, 246, 0.15);
            border: 1px solid rgba(59, 130, 246, 0.4);
            backdrop-filter: blur(12px);
            color: var(--accent);
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .hero-badge::before {
            content: '';
            width: 8px;
            height: 8px;
            background: var(--accent);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7);
            }

            50% {
                box-shadow: 0 0 0 12px rgba(6, 182, 212, 0);
            }
        }

        .hero h1 {
            font-size: clamp(1.5rem, 5vw, 2.5rem);
            font-weight: 800;
            color: #fff;
            line-height: 1.1;
            margin-bottom: 1.5rem;
            letter-spacing: -1px;
        }

        .hero h1 span {
            background: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero p {
            color: #94a3b8;
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 2rem;
            max-width: 500px;
        }

        .track-box {
            display: flex;
            gap: 0;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 14px;
            overflow: hidden;
            backdrop-filter: blur(20px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
            max-width: 480px;
        }

        .track-box:focus-within {
            border-color: var(--secondary);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .track-box input {
            flex: 1;
            background: transparent;
            border: none;
            padding: 18px 22px;
            color: #fff;
            font-size: 15px;
            font-family: 'Inter', sans-serif;
            outline: none;
        }

        .track-box input::placeholder {
            color: #64748b
        }

        .track-btn {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: #fff;
            border: none;
            padding: 18px 28px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Syne', sans-serif;
            white-space: nowrap;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .track-btn::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.6s;
        }

        .track-btn:hover::before {
            left: 100%;
        }

        .track-btn:hover {
            background: linear-gradient(135deg, var(--secondary), var(--primary));
            transform: translateX(2px);
        }

        .track-btn:active {
            transform: scale(0.98);
        }

        /* Tracking Panel */
        .hero-tracking-panel {
            position: relative;
            animation: fadeInRight 0.8s ease-out 0.3s both;
        }

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .tracking-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 24px;
            padding: 1.5rem;
            backdrop-filter: blur(20px);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
            max-height: 500px;
            overflow-y: auto;
            display: none;
        }

        .tracking-card.active {
            display: block;
            animation: slideIn 0.5s ease-out;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(20px) scale(0.95);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .tracking-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 1rem;
        }

        .tracking-card-header h4 {
            color: #fff;
            font-size: 1rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .tracking-status {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .tracking-status.in-transit {
            background: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }

        .tracking-status.delivered {
            background: rgba(16, 185, 129, 0.2);
            color: #34d399;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .tracking-status.pending {
            background: rgba(100, 116, 139, 0.2);
            color: #94a3b8;
            border: 1px solid rgba(100, 116, 139, 0.3);
        }

        /* Sender/Receiver Info */
        .tracking-parties {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .party-box {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 1rem;
        }

        .party-label {
            font-size: 10px;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .party-name {
            font-size: 14px;
            color: #fff;
            font-weight: 600;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .party-location {
            font-size: 12px;
            color: #94a3b8;
        }

        /* Mini Timeline */
        .mini-timeline {
            position: relative;
            padding-left: 24px;
            margin: 1rem 0;
        }

        .mini-timeline::before {
            content: '';
            position: absolute;
            left: 7px;
            top: 4px;
            bottom: 4px;
            width: 2px;
            background: linear-gradient(to bottom, var(--secondary), transparent);
            border-radius: 2px;
        }

        .mini-tl-item {
            position: relative;
            margin-bottom: 1rem;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .mini-tl-item:last-child {
            margin-bottom: 0
        }

        .mini-tl-dot {
            position: absolute;
            left: -20px;
            top: 2px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mini-tl-dot.done {
            background: var(--success);
            border: 2px solid rgba(255, 255, 255, 0.2)
        }

        .mini-tl-dot.active {
            background: var(--secondary);
            border: 2px solid #fff;
            box-shadow: 0 0 10px var(--secondary);
            animation: pulseDot 2s infinite
        }

        @keyframes pulseDot {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7)
            }

            50% {
                box-shadow: 0 0 0 8px rgba(59, 130, 246, 0)
            }
        }

        .mini-tl-dot.pending {
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2)
        }

        .mini-tl-dot.done::after {
            content: '✓';
            font-size: 8px;
            color: #fff;
            font-weight: 800
        }

        .mini-tl-dot.active::after {
            content: '';
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #fff
        }

        .mini-tl-status {
            font-size: 13px;
            font-weight: 600;
            color: #fff
        }

        .mini-tl-status.active {
            color: var(--secondary)
        }

        .mini-tl-status.pending {
            color: #64748b
        }

        .mini-tl-date {
            font-size: 11px;
            color: #64748b
        }

        .tracking-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .tracking-detail-item {
            display: flex;
            flex-direction: column;
            gap: 2px
        }

        .tracking-detail-label {
            font-size: 10px;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px
        }

        .tracking-detail-value {
            font-size: 13px;
            color: #fff;
            font-weight: 500
        }

        .tracking-empty {
            background: rgba(255, 255, 255, 0.03);
            border: 2px dashed rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 3rem 2rem;
            text-align: center;
            backdrop-filter: blur(10px);
        }

        .tracking-empty-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 1.5rem;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.1));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
        }

        .tracking-empty h4 {
            color: #fff;
            font-size: 1.1rem;
            margin-bottom: 0.5rem
        }

        .tracking-empty p {
            color: #64748b;
            font-size: 14px
        }

        .tracking-loading {
            display: none;
            text-align: center;
            padding: 3rem;
        }

        .tracking-loading.active {
            display: block
        }

        .tracking-spinner {
            width: 50px;
            height: 50px;
            border: 3px solid rgba(255, 255, 255, 0.1);
            border-top-color: var(--secondary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }

        .tracking-loading p {
            color: #94a3b8;
            font-size: 14px
        }

        .hero-stats {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: center;
            gap: 0;
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(12px);
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding: 0 2rem;
        }

        .stat {
            flex: 1;
            max-width: 200px;
            text-align: center;
            padding: 1.5rem 1rem;
            border-right: 1px solid rgba(255, 255, 255, 0.06);
            position: relative;
            overflow: hidden;
            transition: all 0.3s;
        }

        .stat:last-child {
            border-right: none
        }

        .stat:hover {
            background: rgba(255, 255, 255, 0.02)
        }

        .stat::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--secondary), transparent);
            transition: width 0.3s;
        }

        .stat:hover::before {
            width: 60%
        }

        .stat .num {
            font-family: 'Syne', sans-serif;
            font-size: 2rem;
            font-weight: 800;
            background: linear-gradient(135deg, #fff, var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.25rem;
        }

        .stat .lbl {
            font-size: 11px;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px
        }

        /* ========== SERVICES SECTION ========== */
        .services-section {
            padding: 5rem 2rem;
            background: var(--surface)
        }

        .section-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 3rem
        }

        .section-tag {
            display: inline-block;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--secondary);
            font-weight: 600;
            margin-bottom: 0.75rem;
            padding: 6px 16px;
            background: rgba(59, 130, 246, 0.1);
            border-radius: 20px;
        }

        .section-header h2 {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--dark);
            margin-bottom: 1rem
        }

        .section-header p {
            color: var(--gray);
            font-size: 1.1rem;
            line-height: 1.7
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .service-card {
            background: #fff;
            border: 1px solid var(--light-gray);
            border-radius: 20px;
            padding: 2rem;
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            transform: scaleX(0);
            transition: transform 0.3s;
        }

        .service-card:hover {
            border-color: var(--secondary);
            box-shadow: 0 20px 40px rgba(29, 78, 216, 0.12);
            transform: translateY(-5px);
        }

        .service-card:hover::before {
            transform: scaleX(1)
        }

        .svc-icon {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            background: linear-gradient(135deg, #eff6ff, #dbeafe);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.25rem;
            font-size: 28px;
            transition: transform 0.3s;
        }

        .service-card:hover .svc-icon {
            transform: scale(1.1) rotate(-5deg)
        }

        .service-card h3 {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 0.75rem
        }

        .service-card p {
            font-size: 15px;
            color: var(--gray);
            line-height: 1.7
        }

        /* ========== ABOUT SECTION ========== */
        .about-section {
            padding: 5rem 2rem;
            background: #fff
        }

        .about-inner {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .about-images {
            position: relative;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .about-img {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .about-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .about-img.main {
            grid-row: span 2;
            height: 400px
        }

        .about-img.secondary {
            height: 190px
        }

        .experience-badge {
            position: absolute;
            bottom: -20px;
            right: 20px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: #fff;
            padding: 1.5rem 2rem;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(29, 78, 216, 0.3);
        }

        .experience-badge .years {
            font-size: 3rem;
            font-weight: 800;
            font-family: 'Syne', sans-serif;
            line-height: 1
        }

        .experience-badge .text {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 4px
        }

        .about-content h2 {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--dark);
            margin-bottom: 1rem;
            line-height: 1.2
        }

        .about-content .lead {
            font-size: 1.1rem;
            color: var(--gray);
            line-height: 1.8;
            margin-bottom: 1.5rem;
        }

        .about-content p {
            color: var(--gray);
            line-height: 1.8;
            margin-bottom: 1rem
        }

        .about-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-top: 2rem;
        }

        .about-feature {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .about-feature-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #eff6ff, #dbeafe);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .about-feature h4 {
            font-size: 14px;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 2px
        }

        .about-feature p {
            font-size: 13px;
            color: var(--gray);
            margin: 0
        }

        /* ========== WHY CHOOSE US SECTION ========== */
        .why-section {
            padding: 5rem 2rem;
            background: linear-gradient(135deg, var(--dark) 0%, #1e293b 100%);
            position: relative;
            overflow: hidden
        }

        .why-section::before {
            content: '';
            position: absolute;
            top: -100px;
            right: -100px;
            width: 400px;
            height: 400px;
            background: rgba(59, 130, 246, 0.1);
            border-radius: 50%;
            filter: blur(60px);
        }

        .why-section::after {
            content: '';
            position: absolute;
            bottom: -100px;
            left: -100px;
            width: 300px;
            height: 300px;
            background: rgba(6, 182, 212, 0.1);
            border-radius: 50%;
            filter: blur(60px);
        }

        .why-inner {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .why-content .section-tag {
            background: rgba(59, 130, 246, 0.2);
            color: #93c5fd;
        }

        .why-content h2 {
            font-size: 2.5rem;
            font-weight: 800;
            color: #fff;
            margin-bottom: 1rem
        }

        .why-content .lead {
            color: #94a3b8;
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 2rem
        }

        .why-features {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .why-feature {
            display: flex;
            gap: 1rem;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 1.25rem;
            transition: all 0.3s;
        }

        .why-feature:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(59, 130, 246, 0.3);
            transform: translateX(5px);
        }

        .why-feature-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.1));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
            color: white;
        }

        .why-feature h4 {
            font-size: 1rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 4px
        }

        .why-feature p {
            font-size: 14px;
            color: #94a3b8;
            line-height: 1.6;
            margin: 0
        }

        .why-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        .why-stat {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 2rem;
            text-align: center;
            backdrop-filter: blur(10px);
        }

        .why-stat .num {
            font-family: 'Syne', sans-serif;
            font-size: 2.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, #fff, var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.5rem;
        }

        .why-stat .lbl {
            font-size: 12px;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 1px
        }

        /* ========== RATE SECTION ========== */
        .rate-section {
            background: var(--surface);
            padding: 5rem 2rem
        }

        .rate-inner {
            max-width: 1000px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: start;
        }

        .rate-card {
            background: #fff;
            border-radius: 24px;
            padding: 2.5rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
        }

        .rate-card h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 1.5rem
        }

        .rate-feature {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 1rem;
            padding: 1rem;
            background: var(--surface);
            border-radius: 12px;
        }

        .rate-feature-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
        }

        .rate-feature h4 {
            font-size: 14px;
            font-weight: 600;
            color: var(--dark);
            margin-bottom: 2px
        }

        .rate-feature p {
            font-size: 13px;
            color: var(--gray);
            margin: 0
        }

        .rate-form-card {
            background: linear-gradient(135deg, var(--dark) 0%, #1e3a8a 100%);
            border-radius: 24px;
            padding: 2.5rem;
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .rate-form-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
        }

        .rate-form-card h3 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            position: relative;
            z-index: 1
        }

        .rate-form-card>p {
            color: #94a3b8;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1
        }

        .rate-input-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .rate-input {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            padding: 14px 16px;
            color: #fff;
            font-size: 14px;
            outline: none;
            transition: all 0.3s;
        }

        .rate-input::placeholder {
            color: #64748b
        }

        .rate-input:focus {
            border-color: var(--secondary);
            background: rgba(255, 255, 255, 0.15);
        }

        .rate-input.full {
            grid-column: span 2
        }
        .rate-input option {
            color: black;
        }

        .rate-submit {
            width: 100%;
            background: linear-gradient(135deg, var(--secondary), var(--accent));
            border: none;
            border-radius: 12px;
            padding: 16px;
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            font-family: 'Syne', sans-serif;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            z-index: 1;
        }

        .rate-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(6, 182, 212, 0.3)
        }

        /* ========== CONTACT SECTION ========== */
        .contact-section {
            padding: 5rem 2rem;
            background: #fff
        }

        .contact-inner {
            max-width: 1000px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
        }

        .contact-info h3 {
            font-size: 2rem;
            font-weight: 800;
            color: var(--dark);
            margin-bottom: 2rem
        }

        .contact-item {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding: 1.25rem;
            background: var(--surface);
            border-radius: 16px;
            transition: all 0.3s;
        }

        .contact-item:hover {
            background: #fff;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transform: translateX(5px);
        }

        .contact-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 20px;
            flex-shrink: 0;
        }

        .contact-item h4 {
            font-size: 16px;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 4px
        }

        .contact-item p {
            font-size: 14px;
            color: var(--gray);
            margin: 0
        }

        .contact-form {
            background: var(--dark);
            border-radius: 24px;
            padding: 2.5rem;
            color: #fff;
        }

        .contact-form h3 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem
        }

        .contact-input {
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            padding: 14px 16px;
            color: #fff;
            font-size: 14px;
            margin-bottom: 1rem;
            outline: none;
            transition: all 0.3s;
        }

        .contact-input::placeholder {
            color: #64748b
        }

        .contact-input:focus {
            border-color: var(--secondary);
            background: rgba(255, 255, 255, 0.15)
        }

        textarea.contact-input {
            min-height: 120px;
            resize: none
        }

        .contact-submit {
            width: 100%;
            background: linear-gradient(135deg, var(--secondary), var(--accent));
            border: none;
            border-radius: 12px;
            padding: 16px;
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            font-family: 'Syne', sans-serif;
            cursor: pointer;
            transition: all 0.3s;
        }

        .contact-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(6, 182, 212, 0.3)
        }

        footer {
            background: var(--dark);
            padding: 2rem;
            text-align: center;
            border-top: 1px solid rgba(255, 255, 255, 0.1)
        }

        footer p {
            color: #64748b;
            font-size: 14px
        }

        /* Mobile Responsive */
        @media(max-width:1024px) {
            .hero-container {
                grid-template-columns: 1fr;
                padding: 4rem 1.5rem 2rem
            }

            .hero-content {
                text-align: center;
                max-width: 100%
            }

            .hero p {
                margin: 0 auto 2rem
            }

            .track-box {
                margin: 0 auto
            }

            .hero-tracking-panel {
                order: -1;
                max-width: 500px;
                margin: 0 auto;
                width: 100%
            }

            .about-inner,
            .why-inner,
            .rate-inner,
            .contact-inner {
                grid-template-columns: 1fr;
                gap: 2rem
            }

            .why-stats {
                margin-top: 2rem
            }
        }

        @media(max-width:700px) {

            .nav-links,
            .nav-cta {
                display: none
            }

            .nav-hamburger {
                display: flex
            }

            .hero h1 {
                font-size: 2rem
            }

            .track-box {
                flex-direction: column;
                border-radius: 12px
            }

            .track-btn {
                width: 100%
            }

            .hero-stats {
                flex-wrap: wrap
            }

            .stat {
                min-width: 50%;
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06)
            }

            .stat:nth-child(odd) {
                border-right: 1px solid rgba(255, 255, 255, 0.06)
            }

            .services-grid {
                grid-template-columns: 1fr
            }

            .about-images {
                grid-template-columns: 1fr
            }

            .about-img.main {
                height: 250px;
                grid-row: span 1
            }

            .about-img.secondary {
                display: none
            }

            .about-features {
                grid-template-columns: 1fr
            }

            .why-feature {
                flex-direction: column;
                text-align: center
            }

            .why-stats {
                grid-template-columns: 1fr
            }

            .rate-input-group {
                grid-template-columns: 1fr
            }

            .rate-input.full {
                grid-column: span 1
            }

            .tracking-parties {
                grid-template-columns: 1fr
            }
        }

        @media(max-width:480px) {
            .stat {
                min-width: 100%;
                border-right: none !important
            }
        }
        
        /* Example for all heading tags */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', 'Roboto', 'Open Sans', Arial, sans-serif !important;
  font-weight: 600 !important; /* keeps them readable but not too heavy */
}

.rate-form-card {
  max-width: 600px;
  /*margin: 20px auto;*/
  padding: 20px;
  
  border-radius: 12px;
  color: #fff;
}

.rate-form-card h3,
.rate-form-card p {
  text-align: center;
  margin-bottom: 15px;
}

.rate-input-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.rate-input,
.rate-input.full,
.rate-submit {
  flex: 1 1 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
}

.rate-input {
  flex: 1 1 calc(50% - 12px);
}

.rate-input.full {
  flex: 1 1 100%;
}

.rate-submit {
  background: #0056b3;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
}

.rate-submit:hover {
  background: #004494;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .rate-input {
    flex: 1 1 100%;
  }
}

/* Base hidden state */
.fade-in, .slide-up, .slide-left, .slide-right {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}

/* Active state when in view */
.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}

.slide-up.active {
  opacity: 1;
  transform: translateY(0);
}

.slide-left {
  transform: translateX(-40px);
}
.slide-left.active {
  opacity: 1;
  transform: translateX(0);
}

.slide-right {
  transform: translateX(40px);
}
.slide-right.active {
  opacity: 1;
  transform: translateX(0);
}

html {
  scroll-behavior: smooth;
}

    </style>
    <section class="hero" id="home">
        <div class="hero-bg"></div>
        <div class="hero-overlay"></div>
        <div class="hero-grid"></div>

        <div class="particles">
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
        </div>

        <div class="hero-container">
            <!-- Left Side -->
            <div class="hero-content fade-in">
                <div class="hero-badge">⚡ Secure Courier Services</div>
                <h1 style="font-family:Ariel">Door to Door Cargo<br><span>You Can Trust</span></h1>
                <p style="color:#fff;">Secure courier for small & big packages. Connecting UK to Pakistan & India with reliability, speed, and
                    care. Your cargo is in safe hands with us.</p>

                <div class="track-box">
                    <input type="text" id="trackInput" placeholder="Enter tracking number" />
                    <button class="track-btn" onclick="trackShipment()">Track Now →</button>
                </div>
            </div>

            <!-- Right Side - Tracking Panel -->
            <div class="hero-tracking-panel fade-in">
                <div class="tracking-empty" id="trackingEmpty">
                    <div class="tracking-empty-icon">📦</div>
                    <h4>Track Your Shipment</h4>
                    <center><p style="color:#fff;">Enter your tracking number to see real-time updates on your cargo delivery status.</p></center>
                </div>

                <div class="tracking-loading" id="trackingLoading">
                    <div class="tracking-spinner"></div>
                    <p>Fetching shipment details…</p>
                </div>

                <div class="tracking-card" id="trackingCard">
                    <div class="tracking-card-header">
                        <h4>📋 Shipment Status</h4>
                        <span class="tracking-status in-transit" id="trackStatusBadge">In Transit</span>
                    </div>

                    <!-- Sender/Receiver Info -->
                    <div class="tracking-parties">
                        <div class="party-box">
                            <div class="party-label" style="color:#fff;font-weight:bold;">📤 From (Sender)</div>
                            <div class="party-name" id="senderNameDisplay">—</div>
                            <div class="party-location" id="senderLocationDisplay">—</div>
                        </div>
                        <div class="party-box">
                            <div class="party-label" style="color:#fff;font-weight:bold;">📥 To (Receiver)</div>
                            <div class="party-name" id="receiverNameDisplay">—</div>
                            <div class="party-location" id="receiverLocationDisplay">—</div>
                        </div>
                    </div>

                    <!-- Mini Timeline -->
                    <div class="mini-timeline" id="miniTimeline"></div>

                    <!-- Details -->
                    <div class="tracking-details">
                        <div class="tracking-detail-item">
                            <span class="tracking-detail-label" style="color:#fff;font-weight:bold;">Tracking #</span>
                            <span class="tracking-detail-value" id="trackNumDisplay">—</span>
                        </div>
                        <div class="tracking-detail-item">
                            <span class="tracking-detail-label" style="color:#fff;font-weight:bold;">Consignment</span>
                            <span class="tracking-detail-value" id="consignmentDisplay">—</span>
                        </div>
                        <div class="tracking-detail-item">
                            <span class="tracking-detail-label" style="color:#fff;font-weight:bold;">Weight</span>
                            <span class="tracking-detail-value" id="weightDisplay">—</span>
                        </div>
                        <div class="tracking-detail-item">
                            <span class="tracking-detail-label" style="color:#fff;font-weight:bold;">Bags</span>
                            <span class="tracking-detail-value" id="bagsDisplay">—</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="hero-stats">
            <div class="stat">
                <div class="num" style="font-family: 'Inter', 'Roboto', 'Open Sans', Arial, sans-serif !important;">10+</div>
                <div class="lbl" style="color:#fff;">Years Experience</div>
            </div>
            <div class="stat">
                <div class="num" style="font-family: 'Inter', 'Roboto', 'Open Sans', Arial, sans-serif !important;">160+</div>
                <div class="lbl" style="color:#fff;">Countries</div>
            </div>
            <div class="stat">
                <div class="num" style="font-family: 'Inter', 'Roboto', 'Open Sans', Arial, sans-serif !important;">10000+</div>
                <div class="lbl" style="color:#fff;">Customers</div>
            </div>
            <div class="stat">
                <div class="num" style="font-family: 'Inter', 'Roboto', 'Open Sans', Arial, sans-serif !important;">50,000+</div>
                <div class="lbl" style="color:#fff;">Couriers</div>
            </div>
        </div>
    </section>
    
    <!-- ========== GET QUOTE SECTION ========== -->
    <section class="rate-section slide-up" id="quote">
        <div class="rate-inner">
            <div class="rate-card">
                <h3>Get Free Shipping Rate</h3>
                <div class="rate-feature">
                    <div class="rate-feature-icon">💰</div>
                    <div>
                        <h4>Door-to-door cargo to Pakistan or India.</h4>
                        <!--<p>Best prices for UK to Pakistan & India routes</p>-->
                    </div>
                </div>
                <div class="rate-feature">
                    <div class="rate-feature-icon">📋</div>
                    <div>
                        <h4>Custom Solutions</h4>
                        <p>Tailored to your specific cargo requirements</p>
                    </div>
                </div>
                <div class="rate-feature">
                    <div class="rate-feature-icon">⚡</div>
                    <div>
                        <h4>Quick Response</h4>
                        <p>Receive your quote within 2 hours</p>
                    </div>
                </div>
                <div class="rate-feature">
                    <div class="rate-feature-icon">🛡️</div>
                    <div>
                        <h4>No Hidden Fees</h4>
                        <p>Transparent pricing, no surprises</p>
                    </div>
                </div>
            </div>

            <div class="rate-form-card">
                <h5>Get a Free Quote</h5>
                <p>Door-to-door cargo to Pakistan or India</p>

                <div class="rate-input-group" style="width:auto;">
                    <input type="text" class="rate-input" id="quoteName" placeholder="Your Name">
                    <input type="email" class="rate-input" id="quoteEmail" placeholder="Email Address">
                    <input type="tel" class="rate-input" id="quotePhone" placeholder="Phone Number">
                    <input type="text" class="rate-input" id="quoteFrom" placeholder="From (UK City)">
                    <input type="text" class="rate-input" id="quoteTo" placeholder="To (Pakistan/India)">
                    <input type="text" class="rate-input" id="quoteWeight" placeholder="Weight (kg)">
                    <select class="rate-input full" id="quoteService">
                        <option value="">Select Service Type</option>
                        <option value="air">✈️ Air Freight</option>
                        <option value="sea">🚢 Ocean Freight</option>
                        <option value="road">🚛 Road Transport</option>
                    </select>
                </div>

                <button class="rate-submit" onclick="submitQuote()">Get Free Quote →</button>
            </div>
        </div>
    </section>

    <!-- ========== SERVICES SECTION ========== -->
    <section class="services-section slide-left" id="services">
        <div class="section-header">
            <span class="section-tag">What We Offer</span>
            <h2>Secure Courier for Small & Big Packages</h2>
            <p>From air freight to ocean shipping, we provide comprehensive logistics solutions tailored to your cargo
                needs.</p>
        </div>

        <div class="services-grid slide-up">
            <div class="service-card">
                <div class="svc-icon">✈️</div>
                <h3>Air Freight</h3>
                <p>Speedy, reliable air cargo services for urgent shipments. Stay informed with real-time tracking and
                    monitoring.</p>
            </div>
            <div class="service-card">
                <div class="svc-icon">🚢</div>
                <h3>Ocean Freight</h3>
                <p>Choose from a variety of shipping options tailored to your cargo's size and destination. We handle the
                    complexities.</p>
            </div>
            <div class="service-card">
                <div class="svc-icon">🚛</div>
                <h3>Transportation & Trucking</h3>
                <p>Reliable overland transportation services for local and regional deliveries. Ensure on-time delivery and
                    cargo safety.</p>
            </div>
            <div class="service-card">
                <div class="svc-icon">🌱</div>
                <h3>Eco-Friendly Shipping</h3>
                <p>Choose environmentally responsible shipping options. Minimize your carbon footprint with our sustainable
                    practices.</p>
            </div>
        </div>
    </section>

    <!-- ========== ABOUT SECTION ========== -->
    <section class="about-section" id="about">
        <div class="about-inner">
            <div class="about-images slide-left">
                <div class="about-img main">
                    <img src="https://images.unsplash.com/photo-1578575437130-527eed3abbec?w=800&q=80"
                        alt="Cargo Operations">
                </div>
                <div class="about-img secondary">
                    <img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=400&q=80" alt="Logistics">
                </div>
                <div class="about-img secondary">
                    <img src="https://images.unsplash.com/photo-1494412574643-ff11b0a5c1c3?w=400&q=80" alt="Shipping">
                </div>
                <div class="experience-badge">
                    <div class="years">50+</div>
                    <div class="text">Years of<br>Excellence</div>
                </div>
            </div>

            <div class="about-content slide-right">
                <span class="section-tag">About Us</span>
                <h2>Secure Courier for Small & Big Packages</h2>
                <p class="lead">Door-to-door cargo to Pakistan or India. Nexus Cargo is a leading courier company
                    dedicated to delivering excellence.</p>
                <p>We specialize in connecting people and businesses through reliable logistics solutions. With a global
                    network and cutting-edge technology, we offer a range of services, from same-day deliveries to
                    international shipments.</p>
                <p>What sets us apart is our unwavering commitment to customer satisfaction. We treat every package with
                    care and prioritize punctuality. Your trust is our most valued asset, and we aim to exceed your
                    expectations.</p>

                <div class="about-features">
                    <div class="about-feature">
                        <div class="about-feature-icon">🌍</div>
                        <div>
                            <h4>Global Network</h4>
                            <p>Connected worldwide</p>
                        </div>
                    </div>
                    <div class="about-feature">
                        <div class="about-feature-icon">🛡️</div>
                        <div>
                            <h4>Secure Handling</h4>
                            <p>Every package protected</p>
                        </div>
                    </div>
                    <div class="about-feature">
                        <div class="about-feature-icon">⚡</div>
                        <div>
                            <h4>Fast Delivery</h4>
                            <p>On-time every time</p>
                        </div>
                    </div>
                    <div class="about-feature">
                        <div class="about-feature-icon">💬</div>
                        <div>
                            <h4>24/7 Support</h4>
                            <p>Always here to help</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ========== WHY CHOOSE US SECTION ========== -->
    <section class="why-section" id="why">
        <div class="why-inner">
            <div class="why-content slide-left">
                <span class="section-tag">Why Choose Us</span>
                <h2>Secure Courier for Small & Big Packages</h2>
                <p class="lead">We combine decades of logistics expertise with modern technology to deliver your cargo
                    safely, on time, every time.</p>

                <div class="why-features">
                    <div class="why-feature">
                        <div class="why-feature-icon">✓</div>
                        <div>
                            <h4>Reliable Service</h4>
                            <p>Reliability is our foundation. We guarantee your cargo will reach its destination safely and
                                on time, every time.</p>
                        </div>
                    </div>
                    <div class="why-feature">
                        <div class="why-feature-icon">🌐</div>
                        <div>
                            <h4>Extensive Network</h4>
                            <p>With a vast global network of partners and agents, we can connect your cargo to any corner of
                                the world, seamlessly.</p>
                        </div>
                    </div>
                    <div class="why-feature">
                        <div class="why-feature-icon">⚙️</div>
                        <div>
                            <h4>Personalized Solutions</h4>
                            <p>We tailor our services to meet your unique cargo needs. No two shipments are the same, and
                                neither are our solutions.</p>
                        </div>
                    </div>
                    <div class="why-feature">
                        <div class="why-feature-icon">👥</div>
                        <div>
                            <h4>Expert Team</h4>
                            <p>Our team of experienced professionals is dedicated to providing you with the best logistical
                                solutions. Your cargo is in safe hands with us.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="why-stats slide-up">
                <div class="why-stat">
                <div class="num" style="font-family: 'Inter', 'Roboto', 'Open Sans', Arial, sans-serif !important;">10+</div>
                <div class="lbl" style="color:#fff;">Years Experience</div>
            </div>
            <div class="why-stat">
                <div class="num" style="font-family: 'Inter', 'Roboto', 'Open Sans', Arial, sans-serif !important;">160+</div>
                <div class="lbl" style="color:#fff;">Countries</div>
            </div>
            <div class="why-stat">
                <div class="num" style="font-family: 'Inter', 'Roboto', 'Open Sans', Arial, sans-serif !important;">10000+</div>
                <div class="lbl" style="color:#fff;">Customers</div>
            </div>
            <div class="why-stat">
                <div class="num" style="font-family: 'Inter', 'Roboto', 'Open Sans', Arial, sans-serif !important;">50,000+</div>
                <div class="lbl" style="color:#fff;">Couriers</div>
            </div>
            </div>
        </div>
    </section>

    

    <!-- ========== CONTACT SECTION ========== -->
    <section class="contact-section slide-left" id="contact">
        <div class="contact-inner">
            <div class="contact-info">
                <h3>Get In Touch</h3>
                <p style="color:var(--gray);margin-bottom:2rem">Have a question or need a custom quote? Reach out — we
                    reply fast.</p>

                <div class="contact-item">
                    <div class="contact-icon">📍</div>
                    <div>
                        <h4>Our Address</h4>
                        <p>150 Albert Drive, Glasgow G41 2NG</p>
                    </div>
                </div>
                <div class="contact-item">
                    <div class="contact-icon">📞</div>
                    <div>
                        <h4>Phone Number</h4>
                        <p>01414717979</p>
                    </div>
                </div>
                <div class="contact-item">
                    <div class="contact-icon">✉️</div>
                    <div>
                        <h4>Email Address</h4>
                        <p>sales@nexuscargo.co.uk</p>
                    </div>
                </div>
                <div class="contact-item">
                    <div class="contact-icon">🕐</div>
                    <div>
                        <h4>Working Hours</h4>
                        <p>Mon–Fri 9am–6pm · Sat 10am–4pm</p>
                    </div>
                </div>
            </div>

            <div class="contact-form">
                <h3>Send us a Message</h3>
                <input type="text" class="contact-input" placeholder="Your Name">
                <input type="email" class="contact-input" placeholder="Your Email">
                <input type="text" class="contact-input" placeholder="Subject">
                <textarea class="contact-input" placeholder="Your Message..."></textarea>
                <button class="contact-submit" onclick="sendMessage(this)">Send Message →</button>
            </div>
        </div>
    </section>
@endsection
<script>
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener("click", function (e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute("href"));
      if (target) {
        window.scrollTo({
          top: target.offsetTop - 80, // adjust offset if header overlaps
          behavior: "smooth"
        });
      }
    });
  });
</script>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const animatedElements = document.querySelectorAll(
      ".fade-in, .slide-up, .slide-left, .slide-right"
    );

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("active");
            observer.unobserve(entry.target); // animate once
          }
        });
      },
      { threshold: 0.2 }
    );

    animatedElements.forEach((el) => observer.observe(el));
  });
</script>
<script>
    // API Configuration
    const API_BASE_URL = 'https://omstechnologies.co.uk/nexus';

    // Timeline stages mapping
    const TIMELINE_STAGES = [{
            key: 'Order Booked',
            label: 'Order Booked'
        },
        {
            key: 'Bags Collected',
            label: 'Bags Collected'
        },
        {
            key: 'In Warehouse',
            label: 'In Warehouse'
        },
        {
            key: 'Customs Cleared',
            label: 'Customs Cleared'
        },
        {
            key: 'In Transit',
            label: 'In Transit'
        },
        {
            key: 'Bags Delivering in Process',
            label: 'Out for Delivery'
        },
        {
            key: 'Delivered',
            label: 'Delivered'
        }
    ];

    function getTimelineState(status) {
        const idx = TIMELINE_STAGES.findIndex(s => s.key === status);
        if (idx === -1) return TIMELINE_STAGES.length - 2;
        return idx;
    }

    function buildMiniTimeline(status) {
        const activeIdx = getTimelineState(status);
        const container = document.getElementById('miniTimeline');
        container.innerHTML = '';

        // Show relevant stages
        const startIdx = Math.max(0, activeIdx - 1);
        const endIdx = Math.min(TIMELINE_STAGES.length, startIdx + 4);

        for (let i = startIdx; i < endIdx; i++) {
            const stage = TIMELINE_STAGES[i];
            let dotClass = 'pending',
                statusClass = 'pending';
            if (i < activeIdx) {
                dotClass = 'done';
                statusClass = '';
            } else if (i === activeIdx) {
                dotClass = 'active';
                statusClass = 'active';
            }

            const dateStr = i <= activeIdx ? getRelativeDate(activeIdx - i) : 'Pending';

            container.innerHTML += `
      <div class="mini-tl-item">
        <div class="mini-tl-dot ${dotClass}"></div>
        <div class="mini-tl-status ${statusClass}">${stage.label}</div>
        <div class="mini-tl-date">${dateStr}</div>
      </div>
    `;
        }
    }

    function getRelativeDate(daysAgo) {
        const d = new Date();
        d.setDate(d.getDate() - daysAgo);
        return d.toLocaleDateString('en-GB', {
            day: 'numeric',
            month: 'short'
        });
    }

    // Main tracking function with API call
   async function trackShipment() {
    const input = document.getElementById('trackInput');
    const trackingNum = input.value.trim().toUpperCase();

    if (!trackingNum) {
        input.focus();
        input.style.borderColor = 'var(--error)';
        setTimeout(() => input.style.borderColor = '', 2000);
        return;
    }

    const emptyState = document.getElementById('trackingEmpty');
    const loading = document.getElementById('trackingLoading');
    const card = document.getElementById('trackingCard');

    emptyState.style.display = 'none';
    card.classList.remove('active');
    loading.classList.add('active');

    try {
        const targetUrl = `https://omstechnologies.co.uk/nexus/newtrack-status.php?trackingno=${trackingNum}`;

        // ✅ Route through CORS proxy
        const proxyUrl = `https://corsproxy.io/?url=${encodeURIComponent(targetUrl)}`;

        const response = await fetch(proxyUrl);

        if (!response.ok) {
            throw new Error(`HTTP error: ${response.status}`);
        }

        const text = await response.text();
        console.log("RAW RESPONSE:", text);

        let data;
        try {
            data = JSON.parse(text);
        } catch (e) {
            throw new Error("API is NOT returning valid JSON");
        }

        loading.classList.remove('active');

        if (data.success && data.data) {
            displayTrackingData(data.data);
        } else {
            emptyState.style.display = 'block';
            alert('Tracking number not found');
        }

    } catch (error) {
        console.error("FULL ERROR:", error);
        loading.classList.remove('active');
        emptyState.style.display = 'block';
        alert("Could not fetch tracking info. Please try again.");
    }
}

    function displayTrackingData(data) {
        const badge = document.getElementById('trackStatusBadge');
        badge.textContent = data.Status || 'Unknown';

        if (data.Status === 'Delivered') {
            badge.className = 'tracking-status delivered';
        } else if (data.Status === 'Bags Delivering in Process' || data.Status === 'In Transit') {
            badge.className = 'tracking-status in-transit';
        } else {
            badge.className = 'tracking-status pending';
        }

        document.getElementById('senderNameDisplay').textContent = data.Sender_Name || '-';
        document.getElementById('senderLocationDisplay').textContent =
            `${data.Sender_City || '-'}, ${data.Sender_PostCode || '-'}`;

        document.getElementById('receiverNameDisplay').textContent = data.Consignee_Name || '-';
        document.getElementById('receiverLocationDisplay').textContent =
            `${data.Consignee_City || '-'}, ${data.Consignee_State || '-'}`;

        document.getElementById('trackNumDisplay').textContent = data.Tracking_No || '-';
        document.getElementById('consignmentDisplay').textContent = '#' + (data.Consignment_No || '-');
        document.getElementById('weightDisplay').textContent = (data.Total_Weight || '0') + ' kg';
        document.getElementById('bagsDisplay').textContent = (data.No_of_Bags || '0') + ' bags';

        buildMiniTimeline(data.Status);

        document.getElementById('trackingCard').classList.add('active');
    }

    function submitQuote() {
        const name = document.getElementById('quoteName').value.trim();
        const email = document.getElementById('quoteEmail').value.trim();
        const phone = document.getElementById('quotePhone').value.trim();

        if (!name || !email || !phone) {
            alert('Please fill in your name, email, and phone number.');
            return;
        }

        const btn = document.querySelector('.rate-submit');
        const originalText = btn.textContent;
        btn.textContent = 'Sending...';
        btn.disabled = true;

        setTimeout(() => {
            btn.textContent = '✓ Quote Requested!';
            btn.style.background = 'linear-gradient(135deg,#10b981,#059669)';

            setTimeout(() => {
                btn.textContent = originalText;
                btn.style.background = '';
                btn.disabled = false;

                // Clear form
                document.getElementById('quoteName').value = '';
                document.getElementById('quoteEmail').value = '';
                document.getElementById('quotePhone').value = '';
                document.getElementById('quoteFrom').value = '';
                document.getElementById('quoteTo').value = '';
                document.getElementById('quoteWeight').value = '';
                document.getElementById('quoteService').value = '';
            }, 3000);
        }, 1500);
    }

    function sendMessage(btn) {
        btn.textContent = 'Sending...';

        setTimeout(() => {
            btn.textContent = '✓ Message Sent!';
            btn.style.background = '#059669';

            setTimeout(() => {
                btn.textContent = 'Send Message →';
                btn.style.background = '';
                document.querySelectorAll('.contact-input').forEach(input => input.value = '');
            }, 3000);
        }, 1500);
    }

    function toggleMobileNav() {
        document.getElementById('mobileNav').classList.toggle('open');
    }

    function closeMobileNav() {
        document.getElementById('mobileNav').classList.remove('open');
    }

    // Enter key support
    document.getElementById('trackInput').addEventListener('keydown', e => {
        if (e.key === 'Enter') trackShipment();
    });
</script>