:root {
       --sf-primary: #0560a2;
       --sf-primary-rgb: 5, 96, 162;


       --sf-secondary: #2ca44d;
       --sf-secondary-rgb: 44, 164, 77;
       --sf-accent: #fd940c;
       --sf-accent-rgb: 253, 148, 12;
       --sf-foreground: #1a2634;
       --sf-muted: #6b7d8e;
       --sf-muted-bg: #f3f5f7;
       --sf-border: #dfe4ea;
       --sf-card-bg: #ffffff;

       /* Override Bootstrap Success and Warning Theme Variables */
       --bs-success: var(--sf-secondary);
       --bs-success-rgb: var(--sf-secondary-rgb);
       --bs-warning: var(--sf-accent);
       --bs-warning-rgb: var(--sf-accent-rgb);
   }

   /* Explicit overrides for common Bootstrap success and warning classes */
   .text-success {
       color: var(--sf-secondary) !important;
   }

   .bg-success {
       background-color: var(--sf-secondary) !important;
       color: #fff;
   }

   .btn-success {
       background-color: var(--sf-secondary);
       border-color: var(--sf-secondary);
       color: #fff;
   }

   .btn-success:hover,
   .btn-success:focus,
   .btn-success:active {
       background-color: var(--sf-secondary);
       border-color: var(--sf-secondary);
       opacity: 0.9;
       color: #fff;
   }

   .border-success {
       border-color: var(--sf-secondary) !important;
   }

   .text-warning {
       color: var(--sf-accent) !important;
   }

   .bg-warning {
       background-color: var(--sf-accent) !important;
       color: #fff;
   }

   .btn-warning {
       background-color: var(--sf-accent);
       border-color: var(--sf-accent);
       color: #fff;
   }

   .btn-warning:hover,
   .btn-warning:focus,
   .btn-warning:active {
       background-color: var(--sf-accent);
       border-color: var(--sf-accent);
       opacity: 0.9;
       color: #fff;
   }

   .border-warning {
       border-color: var(--sf-accent) !important;
   }




   body {
       font-family: 'Roboto', sans-serif;
       color: var(--sf-foreground);
       -webkit-font-smoothing: antialiased;
   }

   .container {
       max-width: 1280px;
   }

   .font-display {
       font-family: 'Roboto Slab', serif;
   }

   /* Animations */
   @keyframes fadeUp {
       from {
           opacity: 0;
           transform: translateY(24px);
       }

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

   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

   .animate-fade-up {
       animation: fadeUp 0.6s ease-out forwards;
   }

   .animate-fade-in {
       animation: fadeIn 0.5s ease-out forwards;
   }

   .anim-delay-1 {
       animation-delay: 0.1s;
   }

   .anim-delay-2 {
       animation-delay: 0.2s;
   }

   [data-animate] {
       opacity: 0;
   }

   /* NAVBAR */
   .sf-navbar {
       background: rgba(255, 255, 255, 0.85);
       backdrop-filter: blur(16px);
       -webkit-backdrop-filter: blur(16px);
       border-bottom: 1px solid var(--sf-border);
   }

   .sf-navbar .navbar-brand {
       font-weight: 700;
       font-size: 1.25rem;
       color: var(--sf-primary);
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }

   .sf-navbar .nav-link {
       font-size: 0.875rem;
       font-weight: 500;
       color: var(--sf-muted);
       transition: color 0.2s;
   }

   .sf-navbar .nav-link:hover {
       color: var(--sf-foreground);
   }

   /* HERO */
   .sf-hero {
       background: var(--sf-primary);
       position: relative;
       overflow: hidden;
   }

   .sf-hero .hero-orb-1 {
       position: absolute;
       top: -50%;
       right: -25%;
       width: 800px;
       height: 800px;
       border-radius: 50%;
       background: rgba(var(--sf-secondary-rgb), 0.2);
       filter: blur(96px);
   }

   .sf-hero .hero-orb-2 {
       position: absolute;
       bottom: -33%;
       left: -25%;
       width: 600px;
       height: 600px;
       border-radius: 50%;
       background: rgba(var(--sf-accent-rgb), 0.15);
       filter: blur(96px);
   }

   .sf-hero .hero-orb-3 {
       position: absolute;
       top: 25%;
       left: 33%;
       width: 400px;
       height: 400px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.05);
       filter: blur(64px);
   }

   .sf-hero .hero-dots {
       position: absolute;
       inset: 0;
       opacity: 0.07;
       background-image: radial-gradient(circle, #fff 1px, transparent 1px);
       background-size: 32px 32px;
   }

   /* BUTTONS */
   .btn-sf-accent {
       background: var(--sf-accent);
       color: #fff;
       font-weight: 600;
       border: none;
       border-radius: 0.5rem;
       padding: 0.75rem 2rem;
       transition: opacity 0.2s;
   }

   .btn-sf-accent:hover,
   .btn-sf-accent:focus,
   .btn-sf-accent:active,
   .btn-sf-accent:visited {
       background: var(--sf-accent) !important;
       opacity: 0.9;
       color: #fff !important;
   }

   .btn-sf-outline-white {
       color: #fff;
       font-weight: 600;
       border: 1px solid rgba(255, 255, 255, 0.3);
       border-radius: 0.5rem;
       padding: 0.75rem 1.5rem;
   }

   .btn-sf-outline-white:hover {
       border: 1px solid rgba(255, 255, 255, 0.3);
       color: #fff;
   }

   .btn-sf-primary {
       background: var(--sf-primary);
       color: #fff;
       font-weight: 500;
       border: none;
       border-radius: 0.5rem;
   }

   .btn:not(.btn-lg) {
       padding: 0.5rem 1.25rem;
       font-size: 0.875rem;
   }

   .btn-sf-primary:hover {
       background: var(--sf-primary);
       opacity: 0.9;
       color: #fff;
   }

   /* SECTIONS */
   .sf-section-muted {
       background: var(--sf-muted-bg);
   }

   /* SOLUTION CARDS */
   .solution-card {
       background: var(--sf-card-bg);
       border: 1px solid var(--sf-border);
       border-radius: 0.75rem;
       padding: 2rem;
       transition: box-shadow 0.2s;
   }

   .solution-card:hover {
       box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
   }

   .solution-card .icon-wrap {
       width: 48px;
       height: 48px;
       border-radius: 0.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 1.25rem;
   }

   /* CARRIER CARDS */
   .carrier-card {
       background: var(--sf-card-bg);
       border: 1px solid var(--sf-border);
       border-radius: 0.75rem;
       padding: 1.5rem;
       text-align: center;
       cursor: pointer;
       transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
   }

   .carrier-card:hover {
       transform: translateY(-6px);
       box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
       border-color: rgba(var(--sf-primary-rgb), 0.4);
   }

   .carrier-card .icon-circle {
       width: 48px;
       height: 48px;
       border-radius: 0.75rem;
       background: rgba(var(--sf-primary-rgb), 0.1);
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 0.75rem;
       transition: background 0.2s;
   }

   .carrier-card:hover .icon-circle {
       background: rgba(var(--sf-primary-rgb), 0.2);
   }

   .carrier-card .carrier-tagline {
       opacity: 0;
       transition: opacity 0.2s;
   }

   .carrier-card:hover .carrier-tagline {
       opacity: 1;
   }

   /* TESTIMONIAL CARDS */
   .testimonial-card {
       background: var(--sf-card-bg);
       border: 1px solid var(--sf-border);
       border-radius: 0.75rem;
       padding: 2rem;
       display: flex;
       flex-direction: column;
   }

   /* CTA */
   .sf-cta {
       background: var(--sf-primary);
   }

   /* FOOTER */
   .sf-footer {
       background: var(--sf-foreground);
       color: #fff;
   }

   .sf-footer a {
       color: #fff;
       text-decoration: none;
   }

   .sf-footer .footer-link {
       opacity: 0.6;
       transition: opacity 0.2s;
   }

   .sf-footer .footer-link:hover {
       opacity: 1;
   }

   .sf-footer .footer-heading {
       opacity: 0.8;
       font-weight: 600;
       font-size: 0.875rem;
       margin-bottom: 1rem;
   }

   /* Stats */
   .stat-value {
       font-size: 2.5rem;
       font-weight: 700;
   }

   /* Dashboard css */

   .user-badge {
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        border-radius: 8px;
        padding: 6px 14px;
        font-weight: 500;
        font-size: 0.875rem;
        cursor: pointer;
        transition: background 0.2s;
    }

    .user-badge:hover {
        background: rgba(255, 255, 255, 0.25);
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--sf-accent);
        color: var(--sf-foreground);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.8rem;
    }

    /* Secondary Header */
    .secondary-header {
        background: #fff;
        border-bottom: 1px solid var(--sf-border);
        padding: 12px 0;
    }

    .secondary-header .sec-link {
        color: var(--sf-muted);
        text-decoration: none;
        font-weight: 500;
        font-size: 0.875rem;
        padding: 6px 14px;
        border-radius: 6px;
        transition: all 0.2s;
    }

    .secondary-header .sec-link:hover {
        color: var(--sf-primary);
        background: rgba(var(--sf-primary-rgb), 0.06);
    }

    .secondary-header .sec-link i {
        font-size: 1rem;
    }

    /* Table Styles */
    .table-card {
        background: #fff;
        border: 1px solid var(--sf-border);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    }

    .table-toolbar {
        padding: 16px 20px;
        border-bottom: 1px solid var(--sf-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
    }

    .table thead th {
        background: var(--sf-secondary);
        color: #fff;
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        padding: 12px 16px;
        white-space: nowrap;
        vertical-align: middle;
    }

    .table thead th:first-child {
        border-radius: 0;
    }

    .table thead th:last-child {
        border-radius: 0;
    }

    .table-striped>tbody>tr:nth-of-type(odd)>* {
        background-color: rgba(var(--sf-primary-rgb), 0.03);
    }

    .table tbody td {
        padding: 12px 16px;
        vertical-align: middle;
        font-size: 0.9rem;
        border-color: var(--sf-border);
    }

    .table .form-check-input:checked {
        background-color: var(--sf-primary);
        border-color: var(--sf-primary);
    }

    .table .form-check-input:focus {
        box-shadow: 0 0 0 0.2rem rgba(var(--sf-primary-rgb), 0.2);
    }

    .status-badge {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        display: inline-block;
    }

    .status-delivered {
        background: #e6f7f0;
        color: #1a7a52;
    }

    .status-transit {
        background: #e8f0fe;
        color: #2a5db0;
    }

    .status-pending {
        background: #fff8e6;
        color: #b07d1a;
    }

    .status-cancelled {
        background: #fde8e8;
        color: #b02a2a;
    }

    /* Pagination */
    .pagination .page-link {
        color: var(--sf-primary);
        border-color: var(--sf-border);
        font-weight: 500;
        font-size: 0.875rem;
    }

    .pagination .page-item.active .page-link {
        background: var(--sf-primary);
        border-color: var(--sf-primary);
        color: #fff;
    }

    .pagination .page-link:hover {
        background: rgba(var(--sf-primary-rgb), 0.08);
        color: var(--sf-primary);
    }

    .pagination .page-item.disabled .page-link {
        color: var(--sf-muted);
    }

    .row-count {
        color: var(--sf-muted);
        font-size: 0.875rem;
    }

    .row-count strong {
        color: var(--sf-foreground);
    }

    .dropdown-menu {
        border: 1px solid var(--sf-border);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    .dropdown-item {
        font-size: 0.9rem;
        padding: 8px 16px;
    }

    .dropdown-item:hover {
        background: rgba(var(--sf-primary-rgb), 0.06);
    }

    .dropdown-item i {
        width: 20px;
    }

   @media (min-width: 768px) {
       .stat-value {
           font-size: 3rem;
       }
   }