:root {
    --primary: #003366;
    --accent: #ffcc00;
    --dark: #1a1a1a;
    --light: #f8f9fa;
    --white: #ffffff;
}


/* Base Styles */
* { margin:0; padding:0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { overflow-x: hidden; background: #fff; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section-padding { padding: 80px 0; }

/* SPA Visibility */
.spa-section { display: none; }
#home { display: flex; flex-direction: column; } /* Default visible */

/* Header & Nav */
.mini-nav { background: #222; color: #fff; padding: 10px 0; font-size: 13px; }
.mini-flex { display: flex; justify-content: flex-end; gap: 20px; }
.navbar { height: 80px; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 24px; font-weight: 800; color: var(--primary); cursor: pointer; }
.logo span { color: var(--accent); }
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a { text-decoration: none; color: var(--dark); font-weight: 600; }

/* Hero */
.hero { height: 75vh; position: relative; color: #fff; display: flex; align-items: center; }
.hero-slider, .slide { position: absolute; top:0; left:0; width:100%; height:100%; z-index: -1; }
.slide { background-size: cover; background-position: center; opacity: 0; transition: 1s; }
.slide.active { opacity: 1; }
.hero-flex { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.hero-text h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 20px; }

/* Cards & Grids */
.section-title { font-size: 32px; color: var(--primary); margin-bottom: 40px; text-align: center; }
.service-grid, .feed-grid, .review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }
.card, .feed-card { background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-align: center; }
.card i { font-size: 40px; color: var(--primary); margin-bottom: 15px; }

/* About */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-image { position: relative; }
.about-image img { width: 100%; border-radius: 15px; }
.experience-badge { position: absolute; bottom: -20px; right: 20px; background: var(--accent); padding: 15px; border-radius: 10px; text-align: center; }

/* Footer */
footer { background: #001a33; color: white; padding: 60px 0; margin-top: 50px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 50px; }

/* Utilities */
.stack-on-mobile { display: flex; flex-wrap: wrap; }
.btn-primary { background: var(--primary); color: #fff; border: none; padding: 12px 25px; border-radius: 5px; cursor: pointer; }

/* Mobile */
@media (max-width: 768px) {
    .nav-links { position: fixed; right: -100%; top: 80px; background: white; width: 100%; flex-direction: column; text-align: center; padding: 40px; transition: 0.3s; box-shadow: 0 5px 10px rgba(0,0,0,0.1); }
    .nav-links.nav-active { right: 0; }
    .burger { display: block; cursor: pointer; }
    .hero-flex { flex-direction: column; text-align: center; gap: 30px; }
    .hero-text h1 { font-size: 2.2rem; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
}



/* --- Navigation & Mini Nav Fix --- */
.mini-nav {
    background: #111;
    padding: 10px 0;
}

/* Fix: Make Sign In and My Account text white */
.mini-links a {
    color: var(--white) !important;
    text-decoration: none;
    margin-left: 20px;
    font-size: 14px;
    transition: 0.3s;
}

.mini-links a:hover {
    color: var(--accent) !important;
}

/* Fix: Background color for main Navbar */
.navbar {
    background-color: var(--white); /* Or use var(--primary) if you want a dark header */
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* --- Hero Tracking Card Fix --- */
.tracking-card {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 400px;
    color: var(--dark);
    border-top: 5px solid var(--primary); /* Professional accent line */
}

/* --- Services Grid (Row Layout) --- */
.service-grid {
    display: flex;
    flex-wrap: nowrap; /* Forces them into a row */
    gap: 20px;
    margin-top: 40px;
    overflow-x: auto; /* Adds scroll on very small screens */
}

.service-grid .card {
    flex: 1; /* Makes all cards equal width */
    min-width: 250px;
    background: var(--white);
    padding: 40px 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.service-grid .card:hover {
    transform: translateY(-10px);
}

/* --- About Us Grid & Image Fitting --- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 50px;
    align-items: center;
    padding: 60px 0;
}

/* Fix: Ensure image fits its column perfectly */
.about-image {
    width: 100%;
    height: 450px; /* Uniform height */
    overflow: hidden;
    border-radius: 15px;
    position: relative;
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Prevents stretching */
    display: block;
}

.about-content {
    padding-right: 20px;
}

.about-content h2 {
    color: var(--primary);
    margin-bottom: 20px;
    font-size: 2.5rem;
}

.about-content p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 25px;
}

/* --- Responsive Class: Stack on Mobile --- */
@media screen and (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr; /* Stack columns vertically */
        text-align: center;
    }

    .about-image {
        height: 300px; /* Shorter image on mobile */
    }

    .service-grid {
        flex-direction: column; /* Stack services on mobile */
    }

    .about-content {
        padding-right: 0;
    }
}

/* Floating Elements */
.whatsapp-float { position: fixed; bottom: 30px; right: 30px; background: #25d366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; z-index: 1000; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
#wa-modal { display: none; position: fixed; bottom: 100px; right: 30px; width: 280px; background: white; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); z-index: 1001; }



/* --- WhatsApp Modal Styling --- */
#wa-modal {
    display: none; /* Controlled by JS */
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 320px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    z-index: 10001;
    overflow: hidden;
    animation: slideInUp 0.4s ease;
}

.wa-header {
    background: #25d366; /* Official WhatsApp Green */
    color: white;
    padding: 20px;
    text-align: left;
}

.wa-header strong {
    font-size: 18px;
    display: block;
    margin-bottom: 4px;
}

.wa-agent-list {
    padding: 10px;
    background: #f9f9f9;
}

.wa-agent {
    display: flex;
    align-items: center;
    padding: 15px;
    text-decoration: none;
    color: #333;
    background: white;
    margin-bottom: 8px;
    border-radius: 10px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.wa-agent:hover {
    background: #fffdf0; /* Subtle highlight */
    border-color: #25d366;
    transform: translateX(5px);
}

.wa-agent i {
    font-size: 22px;
    color: #25d366;
    width: 40px;
}

.wa-agent-info span {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--primary);
}

.wa-agent-info small {
    color: #777;
    font-size: 12px;
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Footer Styling --- */
footer {
    background: #001a33; /* Deep Navy */
    color: #ffffff;
    padding: 80px 0 40px;
    margin-top: 60px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr; /* Custom widths for columns */
    gap: 40px;
}

.footer-about h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--white);
}

.footer-about span {
    color: var(--accent);
}

.footer-about p {
    color: #b0c4de;
    line-height: 1.8;
    max-width: 400px;
}

.footer-links h4, 
.footer-contact h4 {
    color: var(--white);
    margin-bottom: 25px;
    font-size: 18px;
    position: relative;
    padding-bottom: 10px;
}

.footer-links h4::after, 
.footer-contact h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--accent);
}

.footer-links ul li a {
    transition: 0.3s;
    display: inline-block;
}

.footer-links ul li a:hover {
    color: var(--accent) !important;
    transform: translateX(5px);
}

.footer-contact p {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    color: #b0c4de;
}

.footer-contact i {
    font-size: 18px;
    width: 25px;
}

/* Mobile Footer Fix */
@media screen and (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Stack on mobile */
        text-align: center;
    }
    
    .footer-links h4::after, 
    .footer-contact h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-contact p {
        justify-content: center;
    }
}


/* --- Tracking Card Container --- */
.tracking-card {
    background: var(--white);
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* Softer, deeper shadow */
    width: 100%;
    max-width: 420px;
    color: var(--dark);
    border-top: 6px solid var(--primary); /* Strong brand accent */
    transition: transform 0.3s ease;
}

.tracking-card:hover {
    transform: translateY(-5px);
}

.tracking-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- The Form Layout --- */
.track-form {
    display: flex;
    align-items: center;
    background: #f4f7f9; /* Subtle background for the whole form area */
    padding: 6px;
    border-radius: 10px;
    border: 2px solid #e1e8ed;
    transition: all 0.3s ease;
}

/* Effect when the user is typing */
.track-form:focus-within {
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 10px rgba(0, 51, 102, 0.1);
}

/* The Input Field */
.track-form input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 15px;
    font-size: 16px;
    color: var(--dark);
    outline: none; /* Removes the default blue browser outline */
}

.track-form input::placeholder {
    color: #a0abb8;
    font-style: italic;
}

/* The Track Button */
.track-form button {
    background: var(--primary);
    color: var(--white);
    border: none;
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 51, 102, 0.2);
}

.track-form button:hover {
    background: var(--accent); /* Switches to gold on hover */
    color: var(--primary);
    transform: scale(1.05);
}

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

/* Mobile Adjustment for the form */
@media (max-width: 480px) {
    .track-form {
        flex-direction: column; /* Stacks input and button on very small screens */
        background: transparent;
        border: none;
        padding: 0;
        gap: 10px;
    }
    
    .track-form input {
        background: #f4f7f9;
        border-radius: 8px;
        width: 100%;
        border: 2px solid #e1e8ed;
    }
    
    .track-form button {
        width: 100%;
    }
}


/* --- Reviews Section Background & Layout --- */
.reviews.section-padding {
    background-color: #f0f4f8; /* Soft corporate light blue-grey */
}

.reviews .container {
    background: transparent; /* Container stays clear over the section background */
}

/* --- Review Grid & Cards --- */
.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-top: 50px;
}

.review-card {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
    border-bottom: 4px solid transparent;
}

.review-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

/* --- Reviewer Icon Styling --- */
.review-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.reviewer-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f0f4f8;
}

.reviewer-info h4 {
    color: var(--primary);
    font-size: 16px;
    margin: 0;
}

.reviewer-info small {
    color: #777;
    font-size: 12px;
}

.review-text {
    font-style: italic;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}

.stars {
    color: var(--accent);
    font-size: 12px;
}

/* --- Tracking Modal Specifics --- */
.tracking-result-card {
    max-width: 500px;
    padding: 40px;
    text-align: center;
    border-radius: 20px;
}

.status-header i {
    font-size: 50px;
    color: var(--primary);
    margin-bottom: 15px;
}

.track-number {
    background: #f0f4f8;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    margin-top: 5px;
}

/* Timeline Progress Bar */
.tracking-timeline {
    display: flex;
    justify-content: space-between;
    margin: 30px 0;
    position: relative;
}

.tracking-timeline::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #eee;
    z-index: 1;
}

.timeline-step {
    position: relative;
    z-index: 2;
    width: 33%;
}

.timeline-step span {
    width: 32px;
    height: 32px;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 10px;
    font-size: 12px;
    font-weight: bold;
    color: #999;
}

.timeline-step.active span {
    background: var(--primary);
    color: white;
}

.timeline-step p {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

/* Detail List */
.status-details {
    text-align: left;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
}

.status-details p {
    font-size: 14px;
    margin-bottom: 8px;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 8px;
}

.status-details p:last-child { border: none; }

/* Tracking Result UI */
.tracking-result-card {
    border-radius: 20px;
    max-width: 480px;
    animation: slideUpFade 0.4s ease;
}

.status-icon-pulse {
    width: 70px;
    height: 70px;
    background: rgba(0, 51, 102, 0.1);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 15px;
    animation: pulse-blue 2s infinite;
}

.track-id-badge {
    background: var(--light);
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    color: #666;
    margin-bottom: 25px;
    display: inline-block;
}

/* Status Details Grid */
.status-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    text-align: left;
    background: #fcfcfc;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #eee;
    margin-bottom: 20px;
}

.detail-item { font-size: 13px; color: #444; }
.detail-item strong { display: block; color: #888; font-size: 11px; text-transform: uppercase; }

.status-tag {
    color: #27ae60;
    font-weight: 700;
}

.full-width { width: 100%; margin-top: 10px; }

@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(0, 51, 102, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(0, 51, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 51, 102, 0); }
}

@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}


/* The Background Overlay */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place over everything */
    z-index: 10000; /* Sit on top of all other elements */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6); /* Black background with opacity */
    
    /* Center the modal content */
    align-items: center;
    justify-content: center;
}

/* The actual white card inside the modal */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 500px; /* Professional width */
    position: relative; /* For the close button */
    box-shadow: 0 5px 30px rgba(0,0,0,0.3);
}

/* The Close Button (X) */
.close-modal {
    position: absolute;
    right: 20px;
    top: 15px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-modal:hover {
    color: #000;
}

/* Modal Base - Fixed over screen */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 51, 102, 0.85); /* Dark blue overlay */
    align-items: center;
    justify-content: center;
}

/* Icon Pulse Animation for Preloader */
.status-icon-pulse i {
    font-size: 40px;
    color: var(--primary);
}

@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(0, 51, 102, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(0, 51, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 51, 102, 0); }
}

.status-icon-pulse {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    animation: pulse-blue 1.5s infinite;
}

/* Global Preloader Layout */
#global-preloader {
    display: none;
    position: fixed;
    z-index: 20000; /* Higher than other modals */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 26, 51, 0.9); /* Deep Navy Overlay */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px); /* Modern frosted glass effect */
}

.loader-card {
    text-align: center;
    max-width: 350px;
    padding: 40px;
    background: white;
    border-radius: 20px;
}

.loader-pulse {
    width: 90px;
    height: 90px;
    background: var(--light);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    margin: 0 auto 20px;
    animation: global-pulse 1.5s infinite;
}

@keyframes global-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 51, 102, 0.4); }
    70% { box-shadow: 0 0 0 25px rgba(0, 51, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 51, 102, 0); }
}

#loader-title {
    color: var(--primary);
    margin-bottom: 10px;
    font-weight: 800;
}

#loader-msg {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}


/* --- About Section Background --- */
.about-section-wrapper {
    background-color: #f8fafd; /* Very light blue-grey */
    padding: 80px 0;
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
}

/* --- Improved Feed Card Look --- */
.feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.feed-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.feed-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}

.feed-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.feed-card h5 {
    padding: 15px 15px 5px;
    color: var(--primary);
    font-size: 14px;
}

.feed-card p {
    padding: 0 15px 20px;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

/* --- Feed Detail Modal Grid --- */
.detail-view-card {
    max-width: 800px;
    padding: 0; /* Remove padding for edge-to-edge image */
    overflow: hidden;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

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

.detail-info {
    padding: 40px;
}

.user-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--primary);
}

.post-text {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 25px;
}

.btn-outline {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid var(--primary);
    color: var(--primary);
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
}

/* Responsive Fix for Detail Modal */
@media screen and (max-width: 768px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
    .detail-image { height: 250px; }
}

.quote-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
}

.form-group input, 
.form-group select {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    outline: none;
    background: #fdfdfd;
}

.form-group input:focus {
    border-color: var(--accent);
    background: white;
}

@media screen and (max-width: 600px) {
    .quote-form-grid {
        grid-template-columns: 1fr;
    }
    .form-group.full-width {
        grid-column: span 1;
    }
}


/* Dimension Input Grid */
.dimension-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* Autocomplete Container */
.autocomplete {
    position: relative;
    display: inline-block;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    max-height: 150px;
    overflow-y: auto;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #d4d4d4;
    font-size: 14px;
}

.autocomplete-items div:hover {
    background-color: #e9e9e9;
}

.autocomplete-active {
    background-color: var(--primary) !important;
    color: #ffffff;
}

/* --- Modal Width Fix --- */
.modal-content {
    background-color: #fff;
    margin: 20px auto; /* Margin to ensure it doesn't touch screen edges */
    padding: 25px;
    border-radius: 15px;
    width: 95%; /* Responsive width */
    max-width: 600px;
    max-height: 90vh; /* Prevents modal from being taller than the screen */
    overflow-y: auto; /* Adds scroll inside the modal if content is long */
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

/* --- Responsive Dimension Grid --- */
.dimension-grid {
    display: flex;
    gap: 10px;
    width: 100%;
}

.dimension-grid input {
    flex: 1; /* Each input takes equal space */
    min-width: 60px; /* Prevents them from disappearing */
    text-align: center;
}

/* --- Mobile Breakpoint (Phones) --- */
@media screen and (max-width: 480px) {
    .quote-form-grid {
        display: block; /* Stack all form elements */
    }
    
    .form-group {
        margin-bottom: 15px;
    }

    .dimension-grid {
        flex-wrap: wrap; /* Allows stacking if they don't fit */
    }

    .dimension-grid input {
        min-width: 100%; /* Stacks L, B, H vertically on tiny screens */
        margin-bottom: 5px;
    }
    
    .modal-content {
        padding: 15px; /* Less padding on mobile to save space */
    }
    
    .section-title {
        font-size: 20px !important;
    }
}


/* --- Desktop Navbar --- */
.navbar {
    background-color: var(--white); /* You can change this to var(--primary) for a dark nav */
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 9000;
}

.nav-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color: var(--primary);
    font-weight: 700;
    font-size: 15px;
    transition: 0.3s;
}

.nav-links a:hover {
    color: var(--accent);
}

.burger {
    display: none; /* Hidden on Desktop */
    cursor: pointer;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: var(--primary);
    margin: 5px;
    transition: all 0.3s ease;
}

/* --- Mobile View (768px and below) --- */
@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden; /* Prevents side-scrolling when menu is hidden */
    }

    .nav-links {
        position: fixed;
        right: -100%; /* Hidden off-screen to the right */
        top: 80px;
        height: 100vh;
        background-color: var(--white);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 70%; /* Menu takes 70% of screen width */
        padding-top: 50px;
        transition: right 0.5s ease-in-out;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        z-index: 8999;
    }

    .nav-links li {
        margin-bottom: 25px;
    }

    .burger {
        display: block; /* Show Burger on Mobile */
    }

    /* JavaScript Class to Show Menu */
    .nav-active {
        right: 0%;
    }

    /* Burger Animation to 'X' */
    .toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); }
    .toggle .line2 { opacity: 0; }
    .toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); }
}


/* Action Center Grid */
.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.action-card {
    background: white;
    padding: 30px 20px;
    text-align: center;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
    border: 2px solid transparent;
}

.action-card i { font-size: 30px; color: var(--primary); margin-bottom: 15px; }
.action-card.active { border-color: var(--accent); background: #fffdf0; }
.action-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }

.form-container-box {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Contact Section Layout */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    align-items: start;
}

.c-item { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; color: #555; }
.c-item i { color: var(--accent); font-size: 18px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.inquiry-panel input, .inquiry-panel textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fdfdfd;
}

@media (max-width: 768px) {
    .contact-wrapper { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
}

/* --- Shipment Section Responsive CSS --- */
#shipment {
    overflow: hidden;
}

.action-grid {
    display: flex;
    flex-wrap: wrap; /* Allows cards to wrap on mobile */
    gap: 15px;
    margin-bottom: 30px;
}

.action-card {
    flex: 1;
    min-width: 160px; /* Ensures 2-per-row on smaller mobile screens */
    background: var(--white);
    padding: 25px 15px;
    text-align: center;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.action-card.active {
    border-color: var(--accent);
    background: #fffdf0;
    box-shadow: 0 5px 15px rgba(255, 204, 0, 0.2);
}

.action-card i {
    font-size: 24px;
    color: var(--primary);
    margin-bottom: 10px;
}

.action-card h5 {
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--primary);
}

.action-card p {
    font-size: 11px;
    color: #777;
}

/* --- Dynamic Form Container --- */
.form-container-box {
    background: var(--white);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    min-height: 200px;
}

.action-form-fade {
    animation: fadeIn 0.4s ease;
}

/* --- Responsive Form Grid --- */
.quote-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet/desktop */
    gap: 20px;
}

.form-group.full-width {
    grid-column: span 2;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Mobile Specific Fixes --- */
@media screen and (max-width: 600px) {
    .quote-form-grid {
        grid-template-columns: 1fr; /* 1 column on phones */
    }

    .form-group.full-width {
        grid-column: span 1;
    }

    .action-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2x2 grid on mobile */
    }

    .form-container-box {
        padding: 20px;
    }
}


/* --- Contact Section Layout --- */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Info takes less space than the form */
    gap: 60px;
    align-items: start;
}

/* --- Inquiry Panel Form Grid --- */
.inquiry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: 20px;
}

.inquiry-panel .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inquiry-panel .full-width {
    grid-column: span 2;
}

.inquiry-panel label {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inquiry-panel input, 
.inquiry-panel textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #eef2f6;
    border-radius: 10px;
    background: #f8fafd;
    font-size: 15px;
    transition: all 0.3s ease;
    outline: none;
}

/* The Focus Effect */
.inquiry-panel input:focus, 
.inquiry-panel textarea:focus {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* --- Responsive Adjustments --- */

/* Tablets & Small Desktops */
@media screen and (max-width: 992px) {
    .contact-wrapper {
        grid-template-columns: 1fr; /* Stack Info and Form */
        gap: 40px;
    }
}

/* Mobile Phones */
@media screen and (max-width: 600px) {
    .inquiry-grid {
        grid-template-columns: 1fr; /* Form inputs become full width */
    }

    .inquiry-panel .full-width {
        grid-column: span 1;
    }
    
    .contact-info-panel {
        text-align: center;
    }
    
    .c-item {
        justify-content: center;
    }
}

/* --- Contact Panel Spacing --- */

.contact-info-panel p {
    margin-bottom: 30px; /* Space between the tagline and the contact details */
    line-height: 1.6;
    color: #666;
}

.contact-details {
    margin-bottom: 35px; /* Space between the details and the map */
}

.c-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px; /* Space between individual contact lines */
    transition: 0.3s;
}

.c-item:last-child {
    margin-bottom: 0; /* Prevents double-spacing at the bottom of the list */
}

.map-container {
    margin-top: 20px;
    border: 1px solid #eee;
    border-radius: 15px;
    overflow: hidden;
}

/* Responsive adjustment for the map margin */
@media screen and (max-width: 768px) {
    .contact-info-panel p {
        margin-bottom: 25px;
    }
    .contact-details {
        margin-bottom: 30px;
    }
}


.success-details-box {
    background: #f0f9f4;
    border: 1px solid #c2e7d1;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    font-size: 14px;
    color: #2e7d32;
    text-align: center;
}

.modal-action-buttons .btn-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
}

.btn-outline {
    background: transparent;
    border: 2px solid #ddd;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
}


.auth-card {
    max-width: 400px;
    padding: 40px;
}

.auth-toggle {
    display: flex;
    background: #f0f4f8;
    border-radius: 50px;
    padding: 5px;
    margin-bottom: 30px;
}

.auth-toggle button {
    flex: 1;
    border: none;
    padding: 10px;
    background: transparent;
    cursor: pointer;
    border-radius: 50px;
    font-weight: 700;
    transition: 0.3s;
}

.auth-toggle button.active {
    background: var(--primary);
    color: white;
}

.account-mode {
    background-color: var(--accent) !important;
    color: var(--primary) !important;
}

#lang-switch {
    border: none;
    background: #f8fafd;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
    color: var(--primary);
    cursor: pointer;
}

/* Auth Modal Content Spacing */
#auth-form .form-group {
    margin-bottom: 20px;
}

/* Dashboard Specifics */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e1e8ed;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.stat-card i { font-size: 35px; color: var(--primary); }
.stat-card h3 { font-size: 28px; color: var(--primary); }

.dashboard-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.dash-table-box, .dash-sidebar {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.dash-table {
    width: 100%;
    border-collapse: collapse;
}

.dash-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    color: #888;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.dash-table td {
    padding: 15px 0;
    font-size: 14px;
    border-bottom: 1px solid #f9f9f9;
}

/* Status Tags */
.status-tag {
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
}
.status-tag.transit { background: #e3f2fd; color: #1976d2; }
.status-tag.delivered { background: #e8f5e9; color: #2e7d32; }

/* Sidebar Links */
.sidebar-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
}

.sidebar-links a:hover { color: var(--accent); }

/* Responsive Dashboard */
@media screen and (max-width: 992px) {
    .dashboard-main { grid-template-columns: 1fr; }
}

/* Dashboard Specifics */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e1e8ed;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.stat-card i { font-size: 35px; color: var(--primary); }
.stat-card h3 { font-size: 28px; color: var(--primary); }

.dashboard-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.dash-table-box, .dash-sidebar {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.dash-table {
    width: 100%;
    border-collapse: collapse;
}

.dash-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    color: #888;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.dash-table td {
    padding: 15px 0;
    font-size: 14px;
    border-bottom: 1px solid #f9f9f9;
}

/* Status Tags */
.status-tag {
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
}
.status-tag.transit { background: #e3f2fd; color: #1976d2; }
.status-tag.delivered { background: #e8f5e9; color: #2e7d32; }

/* Sidebar Links */
.sidebar-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
}

.sidebar-links a:hover { color: var(--accent); }

/* Responsive Dashboard */
@media screen and (max-width: 992px) {
    .dashboard-main { grid-template-columns: 1fr; }
}


/* --- Logo Adjustment --- */
.logo {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between text and image */
    cursor: pointer;
}

.logo-img {
    height: 40px; /* Adjust based on your logo design */
    width: auto;
    object-fit: contain;
}

/* --- Navbar Links Alignment --- */
.nav-links {
    display: flex;
    align-items: center; /* This centers the button with the text links */
    list-style: none;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.nav-links li {
    display: flex;
    align-items: center;
    height: 100%;
}

/* --- Button Refinement --- */
.nav-btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
    margin: 0; /* Remove any default margins that push the menu */
    line-height: 1; /* Ensures text height doesn't bloat the button */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Fix (Menu Drawer) */
@media screen and (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .nav-auth-item {
        margin-top: 20px;
        width: 80%; /* Makes button look better on mobile */
    }
    
    .nav-btn {
        width: 100%;
    }
}




/* =========================================
   Universal Logo & Text Proximity (CSS Grid/Flex)
   ========================================= */

/* The Main Flex Container: Pulls Image and Text Group together tightly */
.logo-flex-container {
    display: flex;
    align-items: center; /* Vertical Center */
    gap: 12px;           /* STRICT proximity control (gap can be adjusted here) */
    cursor: pointer;
    transition: 0.3s;
    overflow: hidden;    /* Keep the logo image contained */
}

.logo-flex-container:hover {
    transform: scale(1.03); /* Subtle hover interaction */
}

/* The Image Control: Responsive and centered */
.logo-img {
    height: 40px; /* Default height for navbar */
    width: auto;
    object-fit: contain;
    display: block;
}

/* The Text Group Control: For 'TODAYS' and 'CARGO' */
.logo-text-wrapper {
    display: flex;
    flex-direction: column; /* Stacks 'TODAYS' and 'CARGO' vertically */
    justify-content: center;
    color: var(--primary); /* Deep Navy */
    font-size: 16px;       /* Default size for navbar */
    font-weight: 800;
    line-height: 1.1;     /* Tighter vertical text stack */
    text-transform: uppercase;
    white-space: nowrap;  /* Prevents the logo name from breaking on mobile */
}

.logo-text-wrapper span {
    color: var(--accent); /* Orange/Accent color */
    font-weight: 800;
}

/* =========================================
   Size Option: The "Large Version" (For Footer)
   ========================================= */

/* Use this class specifically in the footer to increase size */
.logo-large-size {
    gap: 18px; /* Increased proximity buffer for larger size */
}

.logo-large-size .logo-img {
    height: 65px; /* Significantly increased image size */
}

.logo-large-size .logo-text-wrapper {
    font-size: 24px; /* Significantly increased text size */
}

/* =========================================
   Responsive Adjustments (Global & Mobile)
   ========================================= */

/* Small Phones: Adjust navbar logo subtly for better fit */
@media screen and (max-width: 480px) {
    .logo-flex-container {
        gap: 8px; /* Extra tight for very small screens */
    }
    
    .logo-img {
        height: 35px; /* Slightly smaller in navbar on tiny phones */
    }
    
    .logo-text-wrapper {
        font-size: 14px; /* Tighter text on tiny phones */
    }

    /* Footer still keeps its scaling, but fits better */
    .logo-large-size .logo-img {
        height: 50px;
    }
    .logo-large-size .logo-text-wrapper {
        font-size: 20px;
    }
}


/* --- Footer Social Icons --- */

/* Margin top on the container gives the paragraph breathing room */
.footer-social-links {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Spacing between the 'Connect' text and the icons */
}

/* Optional header style for the 'Connect' text */
.footer-social-links h4 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary); /* Assuming var(--primary) is your Navy Blue */
    margin-bottom: 0;
}

/* The Grid for the icons: Left aligned by default (desktop) */
.social-icon-grid {
    display: flex;
    gap: 12px; /* Spacing between the circles */
    justify-content: flex-start; /* Desktop: Align Left */
    align-items: center;
}

/* Base style for the circular icon links */
.social-icon-grid a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    background-color: var(--white);
    color: var(--primary);
    font-size: 18px;
    text-decoration: none;
    border-radius: 50%; /* Perfect Circle */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Subtle depth */
    transition: all 0.3s ease; /* Professional hover smoothness */
}

/* Hover State: Background becomes Orange, icon becomes Navy */
.social-icon-grid a:hover {
    transform: translateY(-3px); /* Subtle lift effect */
    background-color: var(--accent); /* Assuming var(--accent) is your Orange */
    color: var(--primary);
}

/* --- Mobile Specific Fix --- */
@media screen and (max-width: 768px) {
    /* If the footer collapses to center alignment on mobile, 
       center the social grid as well */
    .social-icon-grid {
        justify-content: center;
    }
}


/* =========================================
   Updated Footer Social Icons (Gold Theme)
   ========================================= */

/* Margin top on the container gives the paragraph breathing room */
.footer-social-links {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Spacing between the 'Connect' text and the icons */
}

/* --- Golden Header Text --- */
.footer-social-links h4 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    
    /* MODIFIED: Changed color to Gold */
    color: #C5A059; /* A rich, professional gold */
    
    margin-bottom: 0;
}

/* The Grid for the icons */
.social-icon-grid {
    display: flex;
    gap: 12px; /* Spacing between the circles */
    justify-content: flex-start; /* Desktop: Align Left */
    align-items: center;
}

/* --- Circular Icon Links --- */
.social-icon-grid a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    
    /* MODIFIED: Base state is now Gold text on a white/transparent background */
    background-color: transparent; /* No background by default */
    color: #C5A059; /* Gold Icon */
    
    /* Optional: If you want a thin gold border, uncomment the line below */
    /* border: 1px solid #C5A059; */
    
    font-size: 18px;
    text-decoration: none;
    border-radius: 50%; /* Perfect Circle */
    
    /* MODIFIED: Replaced standard box-shadow with a gold-tinted glow */
    box-shadow: 0 4px 6px rgba(197, 160, 89, 0.15); /* Subtle gold tint */
    
    transition: all 0.3s ease; /* Professional hover smoothness */
}

/* --- Hover State: Interactive Elements --- */
.social-icon-grid a:hover {
    transform: translateY(-3px); /* Subtle lift effect */
    
    /* MODIFIED: Hover flips to Gold background, Navy icon (or your dark color) */
    background-color: #C5A059; /* Solid Gold background */
    color: #003366;           /* Navy Blue Icon (Change to your primary color) */
    
    /* Optional: Keep the border consistent on hover */
    /* border-color: #C5A059; */
    
    box-shadow: 0 6px 12px rgba(197, 160, 89, 0.3); /* Stronger gold glow */
}

/* --- Mobile Specific Fix (Consistent with prior responses) --- */
@media screen and (max-width: 768px) {
    .social-icon-grid {
        justify-content: center;
    }
}

/* --- Optimized Mobile Menu --- */
@media screen and (max-width: 768px) {
    .nav-links {
        position: absolute;
        right: 0px;
        height: auto; /* Changed from 100vh to auto */
        top: 70px;    /* Adjust based on your header height */
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 60%;  /* Full width but only as tall as the content */
        transform: translateY(-150%); /* Start off-screen (Top) */
        transition: transform 0.5s ease-in;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        z-index: 1000;
        padding: 20px 0; /* Add some padding for the links */
    }

    /* This shows the menu when active */
    .nav-active {
        transform: translateY(0%);
    }

    .nav-links li {
        opacity: 0;
        margin: 15px 0; /* Vertical spacing between links */
    }

    /* Animation for links to fade in */
    .nav-active li {
        opacity: 1;
        transition: opacity 0.5s ease 0.2s;
    }
}


.map-container {
    width: 100%;
    height: 300px;
    background: #e5e9f2; /* Map grey */
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid #d1d9e6;
}
.route-line {
    position: absolute;
    top: 50%; left: 10%; right: 10%;
    height: 2px;
    background: repeating-linear-gradient(90deg, #C5A059, #C5A059 10px, transparent 10px, transparent 20px);
}
.marker {
    position: absolute;
    width: 12px; height: 12px;
    background: #003366;
    border: 3px solid #fff;
    border-radius: 50%;
    top: calc(50% - 7px);
}
.marker.origin { left: 10%; }
.marker.dest { right: 10%; }
.marker.current { 
    left: 45%; 
    background: #C5A059; 
    box-shadow: 0 0 10px #C5A059;
}

/* --- Dashboard Table Styles --- */
.dash-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}
.dash-table th {
    text-align: left;
    padding: 12px;
    background: #f8f9fa;
    color: #003366;
    font-size: 13px;
    text-transform: uppercase;
}
.dash-table td {
    padding: 15px 12px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

/* --- Status Tags --- */
.status-tag {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}
.status-tag.pending { background: #fff4e5; color: #C5A059; }
.status-tag.in-transit { background: #e3f2fd; color: #003366; }
.status-tag.delivered { background: #e8f5e9; color: #2e7d32; }

/* --- Stats Cards --- */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.stat-card {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: center;
}
.stat-card h3 { font-size: 28px; color: #003366; margin: 0; }
.stat-card p { font-size: 12px; color: #777; margin: 5px 0 0; }
.stat-card.highlight { border: 2px solid #C5A059; }