/* Shipzaar - Courier & Logistics Website Styles */

/* CSS Variables */
:root {
    --primary-color: #ac1929;
    --accent-color: #e91e63;
    --primary-gradient: #ac1929, #e91e63;
    --background-color: #ffffff;
    --surface-color: #f8fafc;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-light: #94a3b8;
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --border-radius: 0.5rem;
    --transition: all 0.3s ease;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--background-color), var(--surface-color));
}

/* Language-specific fonts */
body[lang="hi"],
.page-index[lang="hi"] {
    font-family: 'Noto Sans Devanagari', 'Inter', sans-serif;
}

body[lang="te"],
.page-index[lang="te"] {
    font-family: 'Noto Sans Telugu', 'Inter', sans-serif;
}

body[lang="ta"],
.page-index[lang="ta"] {
    font-family: 'Noto Sans Tamil', 'Inter', sans-serif;
}

/* Reduce nav link font size for Indian scripts to prevent overlap */
body[lang="hi"] .nav-link,
body[lang="te"] .nav-link,
body[lang="ta"] .nav-link {
    font-size: 0.75rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

img {
    max-width: 100%;
    height: auto;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header & Navigation */
.header {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.05rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
    gap: 0.6rem;
}

.nav-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
}

.logo-image {
    height: 70px;
    width: auto;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.logo-image:hover {
    transform: scale(1.05);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 1.2rem;
    margin: 0;
    padding: 0;
    flex: 1;
    justify-content: center;
    flex-wrap: nowrap;
    min-width: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
    font-size: 0.85rem;
    min-width: fit-content;
}

.nav-link i {
    font-size: 0.85rem;
    opacity: 0.7;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.nav-link span {
    display: inline;
}

.nav-link:hover {
    color: var(--primary-color);
    background: rgba(172, 25, 41, 0.08);
    transform: translateY(-2px);
}

.nav-link:hover i {
    opacity: 1;
    transform: scale(1.1);
}

/* Active Navigation State */
.nav-link.active {
    color: var(--primary-color) !important;
    background: rgba(172, 25, 41, 0.12) !important;
    font-weight: 700 !important;
    position: relative;
}

.nav-link.active i {
    opacity: 1 !important;
    color: var(--primary-color) !important;
}

.nav-link.active::after {
    display: none;
}

@keyframes pageIndicator {
    0% {
        width: 0;
        opacity: 0;
    }

    100% {
        width: 20px;
        opacity: 1;
    }
}

/* Navigation Actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.staff-login-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 1rem;
    background: rgba(172, 25, 41, 0.1);
    color: var(--primary-color);
    text-decoration: none;
    border-radius: 2rem;
    border: 2px solid rgba(172, 25, 41, 0.2);
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    white-space: nowrap;
}

.staff-login-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(172, 25, 41, 0.3);
}

.staff-login-btn i {
    font-size: 0.9rem;
}

/* Language Selector */
.language-selector {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.language-selector .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.3rem 0.5rem;
    background: transparent;
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
    transition: all 0.3s ease;
    font-size: 0.8rem;
    min-width: auto;
}

.language-selector .dropdown-toggle:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(172, 25, 41, 0.05);
}

.language-selector .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-lg);
    margin-top: 0.3rem;
    min-width: 160px;
    z-index: 1001;
    display: none;
    overflow: hidden;
}

.language-selector .dropdown-menu.show {
    display: block;
    animation: dropdownSlide 0.3s ease-out;
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.language-selector .language-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border-left: 3px solid transparent;
    white-space: nowrap;
}

.language-selector .language-option:hover {
    background: rgba(172, 25, 41, 0.08);
    color: var(--primary-color);
}

.language-selector .language-option.active {
    background: rgba(172, 25, 41, 0.15);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    font-weight: 600;
}

.language-option-flag {
    font-size: 1rem;
    flex-shrink: 0;
}

.language-option-text {
    display: inline;
    gap: 0;
}

.language-option-name {
    font-weight: 500;
    font-size: 0.85rem;
    margin-right: 0.3rem;
}

.language-option-code {
    font-size: 0.7rem;
    opacity: 0.6;
}

/* Page Breadcrumb */
.page-breadcrumb {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    padding: 1rem 0;
    margin-top: 80px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.breadcrumb-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-link:hover {
    color: var(--primary-color);
}

.breadcrumb-separator {
    color: var(--text-secondary);
    font-size: 0.8rem;
    opacity: 0.6;
}

.breadcrumb-current {
    color: var(--primary-color);
    font-weight: 600;
}

/* Page-specific adjustments */
.page-services .services-hero {
    margin-top: 80px;
}

.page-tracking .main-content,
.page-quote .main-content,
.page-about .main-content,
.page-contact .main-content,
.page-index .main-content {
    padding-top: 0;
}

/* Index/Home page - Hero starts at top, behind header */
.page-index .main-content {
    margin-top: 0 !important;
}

.page-index #home-tab.tab-content {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

#home-tab .hero {
    padding-top: 110px;
    padding-bottom: 60px;
    /* Space for fixed header + breathing room */
    min-height: 85vh !important;
    /* Increased to match background image and contain widgets */
    overflow: visible;
}

.page-index .hero-content {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    align-items: center;
    justify-content: space-between;
}

/* Tracking page specific override - Remove all top spacing */
.page-tracking .main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.page-tracking #tracking-tab {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.page-tracking .tracking-hero {
    margin-top: 0 !important;
    position: relative;
    top: 0;
}

/* Remove any potential gaps above hero */
.page-tracking .container:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    margin-left: 2rem;
}

.staff-login-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.staff-login-btn:hover {
    background: #8b1621;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: white;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 0.5rem;
    gap: 4px;
}

.mobile-menu-toggle .bar {
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Navigation Responsive Styles */
@media (max-width: 968px) {
    .nav {
        padding: 1rem 1.5rem;
    }

    .nav-menu {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 2rem 0;
        transition: left 0.3s ease;
        gap: 1rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-link {
        width: 90%;
        max-width: 300px;
        justify-content: center;
        padding: 1rem 2rem;
        background: rgba(172, 25, 41, 0.05);
        border-radius: 1rem;
        font-size: 1.1rem;
    }

    .nav-link.active {
        background: rgba(172, 25, 41, 0.15);
    }

    .nav-link.active::after {
        display: none;
    }

    .nav-actions {
        order: -1;
        margin-right: 1rem;
    }

    .staff-login-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }

    .staff-login-btn span {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .page-breadcrumb {
        margin-top: 70px;
    }
}

@media (max-width: 768px) {
    .nav {
        padding: 0.75rem 1rem;
    }

    .logo-image {
        height: 90px;
    }

    .nav-link span {
        font-size: 1rem;
    }

    .breadcrumb-nav {
        font-size: 0.85rem;
        gap: 0.5rem;
    }

    .page-breadcrumb {
        padding: 0.75rem 0;
    }
}

/* Main Content */
.main-content {
    margin-top: 80px;
}

/* Hero Section */
.hero {
    min-height: 45vh;
    display: flex;
    align-items: center;
    background: url('images/hero/trucker.jpg') center/cover no-repeat;
    background-attachment: fixed;
    position: relative;
    overflow: visible;
    margin: 0;
    padding: 110px 0 60px 0;
}

/* Hero styles specifically for home page to override any duplicate conflicts */
#home-tab .hero-content {
    display: flex;
    justify-content: space-between;
    /* Spread content */
    align-items: center;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 0 2rem 5%;
    position: relative;
    z-index: 1;
    gap: 1rem;
    /* Reduced gap to minimize whitespace */
    flex-wrap: nowrap;
    text-align: left;
    /* Force left alignment */
}

#home-tab .hero-text {
    z-index: 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0);
    flex: 0 1 auto;
    /* Don't grow unnecessarily */
    width: auto;
    max-width: 58%;
    /* Reduced width to bring widget closer */
    min-width: 0;
    padding-right: 1rem;
    text-align: left;
    /* Force left alignment */
}

#home-tab .hero-text .hero-badge {
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary-color);
}

#home-tab .hero-text .hero-title {
    color: white !important;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
    background: none !important;
    -webkit-text-fill-color: white !important;
    background-clip: unset !important;
}

#home-tab .hero-text .hero-description {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-badge {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    box-shadow: var(--shadow-md);
}

#home-tab .hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.2rem;
    color: #1e3a8a !important;
    background: linear-gradient(135deg, #1e3a8a 0%, #AC1929 50%, #1e3a8a 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-align: left;
    /* Force left alignment */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0);
    word-wrap: break-word;
    word-break: break-word;
}

#home-tab .hero-description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 2rem;
    line-height: 1.8;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0);
    text-align: left;
    /* Force left alignment */
    max-width: 85%;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* Tracking Widget Styles */
#home-tab .hero-tracking-widget {
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 380px;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    /* Ensure visibility */
}

.tracking-widget-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.2rem;
    border-bottom: 2px solid rgba(172, 25, 41, 0.1);
    padding-bottom: 1rem;
}

.tracking-widget-body .tracking-input {
    width: 100%;
    padding: 1.25rem 1.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    margin-bottom: 0;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    flex: 1;
    min-height: 56px;
}

.tracking-widget-body .tracking-input:focus {
    border-color: var(--primary-color);

    outline: none;
    box-shadow: 0 0 0 3px rgba(172, 25, 41, 0.1);
}

.tracking-submit-btn {
    width: auto;
    padding: 0.75rem 1.25rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.3s ease;
    min-height: 40px;
    white-space: nowrap;
}

.tracking-submit-btn:hover {
    background: #8b1621;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(172, 25, 41, 0.3);
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background: #8b1621;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
}

/* Hero Image */
.hero-image {
    position: relative;
    z-index: 1;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
}

/* Stats Section */
.stats-section {
    padding: 4rem 2rem;
    background: var(--background-color);
}

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

.stat-card {
    background: var(--background-color);
    padding: 2rem;
    border-radius: var(--border-radius);
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.stat-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 50%;
    color: white;
    font-size: 1.8rem;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Services Section */
.services-section {
    padding: 4rem 2rem;
    background: var(--surface-color);
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.section-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

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

.service-card {
    background: var(--background-color);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.service-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: var(--border-radius);
    color: white;
    font-size: 1.8rem;
}

.service-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.service-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.service-features {
    list-style: none;
    margin-bottom: 2rem;
}

.service-features li {
    padding: 0.5rem 0;
    position: relative;
    padding-left: 1.5rem;
    color: var(--text-secondary);
}

.service-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

/* Footer */
.footer {
    background: var(--text-primary);
    color: var(--text-light);
    padding: 2rem 2rem 1rem;
    width: 100%;
    margin: 0;
}

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

.footer-section h3 {
    color: white;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
}

.footer-section h4 {
    color: white;
    margin: 1.2rem 0 0.8rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.footer-tagline {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
    letter-spacing: 0.5px;
}

.footer-description {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.footer-cities {
    margin-top: 0.8rem;
}

.footer-cities p {
    color: white;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
}

.cities-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    padding: 0;
}

.cities-list li {
    font-size: 0.8rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.cities-list i {
    color: var(--primary-color);
    font-size: 0.65rem;
}

.footer-section p,
.footer-section li {
    margin-bottom: 0.6rem;
    line-height: 1.5;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
}

.footer-section ul li i {
    margin-right: 0.4rem;
    color: var(--primary-color);
    width: 14px;
    font-size: 0.85rem;
}

.footer-section a {
    color: var(--text-light);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
}

.footer-section a:hover {
    color: white;
    padding-left: 4px;
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}

.footer-social {
    margin-top: 1.2rem;
}

.social-icons {
    display: flex;
    gap: 0.8rem;
    margin-top: 0.6rem;
}

.social-icons a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.social-icons a:hover {
    background: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(172, 25, 41, 0.4);
    padding-left: 0;
}

.footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 1.2rem;
    text-align: center;
    color: var(--text-light);
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.9rem;
}

.footer-legal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.85rem;
}

.footer-legal a {
    color: var(--text-light);
    transition: var(--transition);
}

.footer-legal a:hover {
    color: white;
}

.footer-legal span {
    color: #4b5563;
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .cities-list {
        flex-direction: column;
        gap: 0.5rem;
    }

    .social-icons {
        justify-content: center;
    }

    .footer-bottom {
        font-size: 0.85rem;
    }

    .footer-legal {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-input {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: var(--transition);
    background: var(--background-color);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(172, 25, 41, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav {
        padding: 1rem;
    }

    .nav-menu {
        position: fixed;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--background-color);
        flex-direction: column;
        padding: 2rem 1rem;
        box-shadow: var(--shadow-lg);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .header-actions {
        margin-left: 1rem;
        order: 2;
    }

    .staff-login-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .staff-login-btn span {
        display: none;
    }

    .mobile-menu-toggle.active .bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active .bar:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    /* Responsive enhancements - scoped to override desktop styles */
    #home-tab .hero-title {
        font-size: 2.5rem;
        color: #1e3a8a;
        background: linear-gradient(135deg, #1e3a8a 0%, #AC1929 50%, #1e3a8a 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        white-space: normal;
        /* Allow wrapping on mobile */
    }

    #home-tab .hero-content {
        flex-direction: column;
        padding: 2rem 1rem;
        gap: 2rem;
        text-align: center;
        /* Restore center alignment for mobile */
    }

    #home-tab .hero-text {
        max-width: 100%;
        padding-right: 0;
        text-align: center;
        /* Restore center alignment for mobile */
    }

    #home-tab .hero-description {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    #home-tab .hero-tracking-widget {
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
    }

    #home-tab .tracking-widget-body {
        flex-direction: column;
        gap: 1rem;
    }

    #home-tab .tracking-submit-btn {
        width: 100%;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .stats-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
        color: #1e3a8a;
        /* Fallback color */
        background: linear-gradient(135deg, #1e3a8a 0%, #AC1929 50%, #1e3a8a 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero-description {
        font-size: 1rem;
    }

    .btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .service-card {
        padding: 2rem;
    }
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.hidden {
    display: none;
}

.visible {
    display: block;
}

/* Admin Dashboard Styles */
.admin-main {
    background: var(--surface-color);
    min-height: calc(100vh - 80px);
    margin-top: 80px;
}

.admin-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.admin-nav-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.admin-welcome {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.admin-status {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.logout-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    background: var(--text-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.logout-btn:hover {
    background: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    gap: 2rem;
}

.dashboard-title h1 {
    color: var(--text-primary);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dashboard-title p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    flex: 1;
    max-width: 800px;
}

.stat-card {
    background: var(--background-color);
    padding: 2rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stat-card .stat-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-info h4 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.stat-info span {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.dashboard-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    background: var(--background-color);
    padding: 0.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.dash-tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    flex: 1;
    justify-content: center;
}

.dash-tab-btn:hover {
    background: var(--surface-color);
    color: var(--text-primary);
}

.dash-tab-btn.active {
    background: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-sm);
}

.tab-content,
.dash-tab-content {
    background: var(--background-color);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    display: none; /* Default to hidden */
}

/* Specific visibility rules for tab switching */
.tab-content.active,
.dash-tab-content.active {
    display: block; /* Show only when active */
    animation: fadeIn 0.3s ease-in-out;
}

.tab-content.hidden,
.dash-tab-content:not(.active) {
    display: none;
}

.upload-section h2,
.manage-section h2,
.reports-section h2 {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.excel-template {
    background: var(--surface-color);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

.excel-template h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.file-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    padding: 3rem 2rem;
    text-align: center;
    background: var(--surface-color);
    margin-bottom: 2rem;
    transition: var(--transition);
    cursor: pointer;
}

.file-upload-area:hover {
    border-color: var(--primary-color);
    background: rgba(172, 25, 41, 0.05);
}

.file-upload-area.dragover {
    border-color: var(--primary-color);
    background: rgba(172, 25, 41, 0.1);
}

.upload-text {
    margin-bottom: 1rem;
}

.upload-text h4 {
    color: var(--text-primary);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.upload-text p {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.search-bar {
    margin-bottom: 2rem;
}

.search-bar input {
    width: 100%;
    max-width: 400px;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--background-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.data-table th,
.data-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.data-table th {
    background: var(--surface-color);
    font-weight: 600;
    color: var(--text-primary);
}

.data-table td {
    color: var(--text-secondary);
}

.data-table tbody tr:hover {
    background: var(--surface-color);
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
}

.status-delivered {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.status-in-transit {
    background: rgba(172, 25, 41, 0.1);
    color: #ac1929;
}

.status-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

/* Responsive Design for Admin */
@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-title h1 {
        font-size: 2rem;
    }

    .dash-tab-btn {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }

    .dash-tab-btn span {
        display: none;
    }

    .admin-nav-info {
        display: none;
    }

    .logout-btn span {
        display: none;
    }

    .data-table {
        font-size: 0.9rem;
    }

    .data-table th,
    .data-table td {
        padding: 0.5rem;
    }
}

/* Enhanced Admin Dashboard Styles */
.admin-body {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Enhanced Admin Header */
.admin-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.admin-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    max-width: none;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brand-text h2 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0;
    letter-spacing: -0.025em;
}

.brand-text span {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nav-center {
    flex: 1;
    max-width: 500px;
    margin: 0 2rem;
}

.search-container {
    position: relative;
    width: 100%;
}

.search-container i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    z-index: 1;
}

.search-container input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 2.5rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 2rem;
    background: rgba(248, 250, 252, 0.8);
    backdrop-filter: blur(10px);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.search-container input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(172, 25, 41, 0.1);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.notification-btn {
    position: relative;
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.notification-btn:hover {
    background: rgba(172, 25, 41, 0.1);
    color: var(--primary-color);
}

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--primary-color);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.4rem;
    border-radius: 50%;
    min-width: 1.2rem;
    height: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 2rem;
    background: rgba(248, 250, 252, 0.8);
    border: 1px solid rgba(226, 232, 240, 0.5);
}

.profile-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(172, 25, 41, 0.2);
}

.profile-info {
    display: flex;
    flex-direction: column;
}

.profile-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.profile-role {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.logout-btn {
    background: none;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #dc2626;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.logout-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #dc2626;
}

/* Sidebar Navigation */
.admin-sidebar {
    position: fixed;
    top: 80px;
    left: 0;
    width: 280px;
    height: calc(100vh - 80px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(226, 232, 240, 0.5);
    padding: 2rem 0;
    overflow-y: auto;
    z-index: 100;
}

.sidebar-menu {
    padding: 0 1rem;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    margin-bottom: 0.5rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    color: var(--text-secondary);
    position: relative;
}

.menu-item:hover {
    background: rgba(172, 25, 41, 0.05);
    color: var(--primary-color);
}

.menu-item.active {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    box-shadow: 0 4px 15px rgba(172, 25, 41, 0.3);
}

.menu-item i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* Main Content Area */
.admin-content {
    margin-left: 280px;
    margin-top: 80px;
    padding: 2rem;
    min-height: calc(100vh - 80px);
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-title h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-title p {
    color: var(--text-secondary);
    font-size: 1rem;
}

.header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.btn {
    padding: 0.7rem 1.5rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-size: 0.9rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    box-shadow: 0 2px 10px rgba(172, 25, 41, 0.3);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(172, 25, 41, 0.4);
}

.btn-secondary {
    background: rgba(100, 116, 139, 0.1);
    color: var(--text-primary);
    border: 1px solid rgba(100, 116, 139, 0.2);
}

.btn-secondary:hover {
    background: rgba(100, 116, 139, 0.2);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

.btn-icon {
    width: 35px;
    height: 35px;
    padding: 0;
    justify-content: center;
    border-radius: 0.5rem;
}

.btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Enhanced Statistics Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.5);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.gradient-blue::before {
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

.gradient-orange::before {
    background: linear-gradient(90deg, #f97316, #f59e0b);
}

.gradient-green::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.gradient-red::before {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.stat-card .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    background: rgba(172, 25, 41, 0.1);
    color: var(--primary-color);
}

.gradient-blue .stat-icon {
    background: rgba(172, 25, 41, 0.1);
    color: #ac1929;
}

.gradient-orange .stat-icon {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.gradient-green .stat-icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.gradient-red .stat-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 1rem;
}

.stat-change {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.stat-change.positive {
    color: #059669;
}

.stat-change.negative {
    color: #dc2626;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.5);
    overflow: hidden;
}

.dashboard-card.full-width {
    grid-column: 1 / -1;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.3);
}

.card-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.card-actions {
    display: flex;
    gap: 0.5rem;
}

.chart-container {
    padding: 2rem;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.02), rgba(233, 30, 99, 0.02));
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* Tracking Container */
.tracking-container {
    padding: 1.5rem 2rem;
}

.tracking-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.3);
}

.tracking-item:last-child {
    border-bottom: none;
}

.tracking-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
}

.tracking-icon.in-transit {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
}

.tracking-icon.delivered {
    background: linear-gradient(135deg, #10b981, #059669);
}

.tracking-icon.pending {
    background: linear-gradient(135deg, #f97316, #f59e0b);
}

.tracking-id {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.tracking-location {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0.25rem 0;
}

.tracking-status {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* Activities List */
.activities-list {
    padding: 1.5rem 2rem;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.3);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.activity-icon.success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.activity-icon.info {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
}

.activity-icon.warning {
    background: linear-gradient(135deg, #f97316, #f59e0b);
}

.activity-title {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.activity-meta {
    color: var(--text-light);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Filters Bar */
.filters-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-group {
    flex: 1;
    min-width: 200px;
}

.filter-select,
.filter-input {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 0.5rem;
    background: white;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.filter-select:focus,
.filter-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(172, 25, 41, 0.1);
}

/* Modern Table */
.data-table-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.5);
    overflow: hidden;
}

.table-container {
    overflow-x: auto;
}

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

.modern-table th {
    background: rgba(248, 250, 252, 0.8);
    padding: 1rem 1.5rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}

.modern-table td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.3);
    vertical-align: middle;
}

.modern-table tbody tr:hover {
    background: rgba(172, 25, 41, 0.02);
}

.customer-info {
    display: flex;
    flex-direction: column;
}

.customer-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.customer-phone {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.route-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.origin,
.destination {
    color: var(--text-primary);
    font-weight: 500;
}

.route-info i {
    color: var(--text-light);
}

.status-badge {
    padding: 0.4rem 0.8rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-badge.in-transit {
    background: rgba(172, 25, 41, 0.1);
    color: #ac1929;
}

.status-badge.delivered {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.status-badge.pending {
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
}

.date-info {
    display: flex;
    flex-direction: column;
}

.date-info div:first-child {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.time-info {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
}

.table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(226, 232, 240, 0.3);
    background: rgba(248, 250, 252, 0.3);
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.pagination-controls {
    display: flex;
    gap: 0.5rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .admin-sidebar {
        width: 240px;
    }

    .admin-content {
        margin-left: 240px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .admin-sidebar.open {
        transform: translateX(0);
    }

    .admin-content {
        margin-left: 0;
    }

    .admin-nav {
        padding: 1rem;
    }

    .nav-center {
        display: none;
    }

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

    .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .filters-bar {
        flex-direction: column;
    }

    .filter-group {
        min-width: auto;
    }
}

/* Additional Admin Styles */
.manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.manage-header h3 {
    color: var(--text-primary);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.search-bar {
    position: relative;
    display: flex;
    align-items: center;
}

.search-bar i {
    position: absolute;
    left: 1rem;
    color: var(--text-secondary);
    z-index: 1;
}

.search-bar input {
    padding-left: 2.5rem;
}

.data-table-container {
    overflow-x: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
}

.action-btn {
    padding: 0.4rem 0.6rem;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.8rem;
    margin-right: 0.5rem;
}

.edit-btn {
    background: rgba(172, 25, 41, 0.1);
    color: #ac1929;
}

.edit-btn:hover {
    background: rgba(172, 25, 41, 0.2);
}

.delete-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

.reports-header {
    margin-bottom: 2rem;
}

.reports-header h3 {
    color: var(--text-primary);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.reports-header p {
    color: var(--text-secondary);
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.report-card {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    display: flex;
    gap: 1.5rem;
    transition: var(--transition);
}

.report-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.report-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.report-info h4 {
    color: var(--text-primary);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.report-info p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.report-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition);
}

.report-btn:hover {
    background: #8b1621;
    transform: translateY(-1px);
}

/* Enhanced Admin Features */

/* Notification Dropdown */
.notification-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 350px;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(226, 232, 240, 0.5);
    z-index: 1001;
    display: none;
    max-height: 400px;
    overflow: hidden;
}

.notification-dropdown.show {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.3);
}

.notification-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mark-all-read {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: 500;
}

.notification-list {
    max-height: 280px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.2);
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.notification-item:hover {
    background: rgba(172, 25, 41, 0.02);
}

.notification-item.unread {
    background: rgba(59, 130, 246, 0.02);
}

.notification-item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-color);
}

.notification-item .notification-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: white;
}

.notification-item .notification-icon.info {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
}

.notification-item .notification-icon.success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.notification-item .notification-icon.warning {
    background: linear-gradient(135deg, #f97316, #f59e0b);
}

.notification-content {
    flex: 1;
}

.notification-content p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

.notification-content p:first-child {
    font-weight: 500;
    color: var(--text-primary);
}

.notification-content p:last-child {
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.notification-time {
    font-size: 0.7rem;
    color: var(--text-light);
    margin-top: 0.25rem;
    display: block;
}

.notification-footer {
    padding: 1rem 1.5rem;
    text-align: center;
    border-top: 1px solid rgba(226, 232, 240, 0.3);
    background: rgba(248, 250, 252, 0.5);
}

.notification-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Quick Actions Dropdown */
.quick-actions-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 220px;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(226, 232, 240, 0.5);
    z-index: 1001;
    display: none;
    overflow: hidden;
}

.quick-actions-dropdown.show {
    display: block;
    animation: slideDown 0.3s ease;
}

.quick-action-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(226, 232, 240, 0.2);
}

.quick-action-item:last-child {
    border-bottom: none;
}

.quick-action-item:hover {
    background: rgba(172, 25, 41, 0.05);
    color: var(--primary-color);
}

.quick-action-item i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.quick-action-item span {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Enhanced Chart Containers */
.chart-period-select {
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 0.375rem;
    background: white;
    font-size: 0.8rem;
    color: var(--text-primary);
    margin-right: 0.5rem;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #10b981;
    font-weight: 500;
}

.live-indicator i {
    font-size: 0.6rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Enhanced Table Features */
.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.3);
}

.bulk-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.selected-count {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.table-actions {
    display: flex;
    gap: 0.5rem;
}

/* Package checkbox enhancements */
.package-checkbox {
    transform: scale(1.1);
    accent-color: var(--primary-color);
}

/* Modal Base Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex;
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }

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

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.3);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: rgba(226, 232, 240, 0.2);
    color: var(--text-primary);
}

.modal-body {
    padding: 2rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid rgba(226, 232, 240, 0.3);
}

/* Enhanced Mobile Responsive */
@media (max-width: 768px) {
    .notification-dropdown {
        width: 300px;
        right: -50px;
    }

    .quick-actions-dropdown {
        width: 200px;
        right: -20px;
    }

    .modal-content {
        margin: 1rem;
        width: calc(100% - 2rem);
    }

    .bulk-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .table-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
}

/* Enhanced Home Page Styles */

/* Enhanced Hero Section */
.hero-badge {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(172, 25, 41, 0.3);
}

.hero-actions {
    display: flex;
    gap: 1rem;
    margin: 2rem 0;
}

.hero-btn {
    padding: 0.875rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-primary.hero-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    box-shadow: 0 4px 20px rgba(172, 25, 41, 0.3);
}

.btn-primary.hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(172, 25, 41, 0.4);
}

.btn-secondary.hero-btn {
    background: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.btn-secondary.hero-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.hero-quick-stats {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.quick-stat {
    text-align: center;
}

.quick-stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}

.quick-stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Floating Elements */
.floating-element {
    position: absolute;
    z-index: 2;
}

.floating-card {
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #AC1929;
    animation: float 3s ease-in-out infinite;
    text-align: center;
    min-width: 120px;
}

.floating-card.small {
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #AC1929;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    background: #fff;
    min-width: 120px;
    text-align: center;
    animation: float 2.5s ease-in-out infinite;
    margin: 0;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Testimonials Section */
.testimonials-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.testimonial-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.testimonial-content {
    padding: 2rem;
}

.stars {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    color: #fbbf24;
}

.testimonial-content blockquote {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.author-avatar {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.author-info h4 {
    margin: 0;
    color: var(--text-primary);
    font-weight: 600;
}

.author-info p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.trust-indicators {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.trust-item i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

/* =============================================
   HOME PAGE SERVICES OVERVIEW STYLES
   ============================================= */

/* Home Services Section - Clean Overview Design */
/* Courier Process Section */
.courier-process {
    padding: 6rem 0 3rem 0;
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    position: relative;
}

.courier-process::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><defs><pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse"><circle cx="5" cy="5" r="1" fill="%23e2e8f0" opacity="0.4"/></pattern></defs><rect width="60" height="60" fill="url(%23dots)"/></svg>');
    opacity: 0.6;
}

.courier-process .container {
    position: relative;
    z-index: 2;
}

.courier-process .section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.courier-process .section-tag {
    display: inline-block;
    background: rgba(172, 25, 41, 0.1);
    color: var(--primary-color);
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border: 1px solid rgba(172, 25, 41, 0.2);
}

.courier-process .section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.courier-process .section-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Process Timeline */
.process-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
    position: relative;
}

/* Process Step */
.process-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Step Number Badge */
.step-number {
    display: none;
}

/* Step Icon Wrapper */
.step-icon-wrapper {
    position: relative;
    margin-bottom: 2rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Step Icon */
.step-icon {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.08), rgba(172, 25, 41, 0.04));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 2rem;
    border: 2px solid rgba(172, 25, 41, 0.2);
    position: relative;
    z-index: 2;
}

/* Step Connector Line */
.step-connector {
    position: absolute;
    top: 50%;
    left: calc(50% + 2.5rem);
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, rgba(172, 25, 41, 0.3), rgba(172, 25, 41, 0.1));
    transform: translateY(-50%);
    z-index: 1;
}

.process-step:last-child .step-connector {
    display: none;
}

/* Step Content */
.step-content {
    background: white;
    padding: 2rem 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    height: 100%;
}

.step-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.step-content>p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
}

/* Step Features List */
.step-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.step-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding: 0.4rem 0;
}

.step-features li:last-child {
    margin-bottom: 0;
}

.step-features i {
    color: #10b981;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Process CTA */
.process-cta {
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.05), rgba(172, 25, 41, 0.02));
    padding: 3rem 2.5rem;
    border-radius: 1.5rem;
    text-align: center;
    border: 2px solid rgba(172, 25, 41, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cta-content h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.cta-content p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

.cta-actions {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.cta-actions .btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.cta-actions .btn-primary {
    background: var(--primary-color);
    color: white;
    border: 2px solid var(--primary-color);
}

.cta-actions .btn-primary:hover {
    background: #dc2626;
    border-color: #dc2626;
    transform: translateY(-2px);
}

.cta-actions .btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.cta-actions .btn-outline:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

/* Responsive Design for Home Services */
@media (max-width: 1280px) {
    .process-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 2rem;
    }

    .step-connector {
        display: none;
    }
}

@media (max-width: 968px) {
    .process-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 2rem;
    }

    .courier-process .section-header h2 {
        font-size: 2.2rem;
    }

    .process-cta {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .cta-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .courier-process {
        padding: 4rem 0;
    }

    .courier-process .section-header {
        margin-bottom: 3rem;
    }

    .courier-process .section-header h2 {
        font-size: 2rem;
    }

    .process-timeline {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .step-content {
        padding: 1.75rem 1.25rem;
    }

    .step-content h3 {
        font-size: 1.15rem;
    }

    .process-cta {
        padding: 2.5rem 2rem;
    }

    .cta-content h3 {
        font-size: 1.5rem;
    }

    .cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .cta-actions .btn {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .courier-process .section-header h2 {
        font-size: 1.75rem;
    }

    .courier-process .section-header p {
        font-size: 0.95rem;
    }

    .step-icon {
        width: 4rem;
        height: 4rem;
        font-size: 1.75rem;
    }

    .step-content {
        padding: 1.5rem 1rem;
    }

    .step-content h3 {
        font-size: 1.05rem;
    }

    .step-content>p {
        font-size: 0.85rem;
    }

    .process-cta {
        padding: 2rem 1.5rem;
    }

    .step-features li {
        font-size: 0.8rem;
    }
}

/* Quick Action Modals */
.quick-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.quick-modal {
    background: white;
    border-radius: 1rem;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }

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

.quick-modal-header {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 1rem 1rem 0 0;
}

.quick-modal-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
}

.modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.modal-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.quick-modal-body {
    padding: 2rem;
}

.quick-modal-body p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    text-align: center;
}

.quick-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quote-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.quick-form input,
.quick-form select {
    padding: 0.875rem;
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.quick-form input:focus,
.quick-form select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.quick-form .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.quick-form .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(172, 25, 41, 0.3);
}

.quick-features {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.quick-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.quick-feature i {
    color: var(--primary-color);
    font-size: 1.5rem;
}

.quick-feature span {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.quick-result {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: 0.75rem;
    border-left: 4px solid var(--primary-color);
}

.result-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.price-label {
    font-weight: 600;
    color: var(--text-primary);
}

.price-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.result-features {
    display: flex;
    gap: 1.5rem;
}

.result-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.result-feature i {
    color: var(--primary-color);
}

/* Responsive Design for Enhanced Elements */
@media (max-width: 768px) {
    .hero-actions {
        flex-direction: column;
    }

    .hero-quick-stats {
        gap: 1rem;
    }

    .quick-stat-number {
        font-size: 1.5rem;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .trust-indicators {
        flex-direction: column;
        gap: 1rem;
    }

    .quote-form .form-row {
        grid-template-columns: 1fr;
    }

    .quick-features {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .floating-element {
        display: none;
    }
}

/* Enhanced Why Choose Us Section */
.why-choose-us {
    padding: 3rem 0 5rem 0;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    position: relative;
}

.why-choose-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.why-choose-text h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.why-choose-text p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

/* Enhanced Features */
.enhanced-features {
    margin-bottom: 3rem;
}

.enhanced-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border-left: 4px solid var(--primary-color);
}

.enhanced-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.feature-icon {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.feature-content h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.feature-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Enhanced Statistics */
.enhanced-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.enhanced-stat-card {
    background: white;
    padding: 2rem 1.5rem;
    border-radius: 1rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border-top: 4px solid var(--primary-color);
}

.enhanced-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.enhanced-stat-card .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.enhanced-stat-card .stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Visual Content Right Side */
.why-choose-visual {
    position: relative;
}

.cta-badge-section {
    margin-bottom: 2rem;
    text-align: center;
}

.cta-badge-section .cta-badge {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 20px rgba(172, 25, 41, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(172, 25, 41, 0.3);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 6px 25px rgba(172, 25, 41, 0.4);
    }
}

/* Visual Features Grid */
.visual-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto;
}

.visual-feature-card {
    background: white;
    padding: 1.25rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    animation: floatCard 4s ease-in-out infinite;
}

.visual-feature-card:nth-child(even) {
    animation-delay: -2s;
}

@keyframes floatCard {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

.visual-feature-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.visual-feature-card i {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.visual-feature-card span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Color Variants for Visual Feature Cards */
.visual-feature-card.primary {
    border-left: 4px solid var(--primary-color);
}

.visual-feature-card.primary i {
    color: var(--primary-color);
}

.visual-feature-card.secondary {
    border-left: 4px solid #10b981;
}

.visual-feature-card.secondary i {
    color: #10b981;
}

.visual-feature-card.accent {
    border-left: 4px solid #f59e0b;
}

.visual-feature-card.accent i {
    color: #f59e0b;
}

.visual-feature-card.success {
    border-left: 4px solid #059669;
}

.visual-feature-card.success i {
    color: #059669;
}

.visual-feature-card.warning {
    border-left: 4px solid #d97706;
}

.visual-feature-card.warning i {
    color: #d97706;
}

.visual-feature-card.info {
    border-left: 4px solid #0ea5e9;
}

.visual-feature-card.info i {
    color: #0ea5e9;
}

.visual-feature-card.purple {
    border-left: 4px solid #7c3aed;
}

.visual-feature-card.purple i {
    color: #7c3aed;
}

.visual-feature-card.teal {
    border-left: 4px solid #0d9488;
}

.visual-feature-card.teal i {
    color: #0d9488;
}

/* Responsive Design for Enhanced Why Choose Section */
@media (max-width: 968px) {
    .why-choose-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .enhanced-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .enhanced-stat-card {
        padding: 1.5rem 1rem;
    }

    .enhanced-stat-card .stat-number {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .enhanced-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .visual-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        max-width: 100%;
    }

    .visual-feature-card {
        padding: 1rem;
    }

    .enhanced-feature {
        margin-bottom: 1rem;
        padding: 1rem;
    }

    .why-choose-text h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .visual-features-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .enhanced-features {
        margin-bottom: 2rem;
    }
}

/* =============================================
   ENHANCED SERVICES PAGE STYLES
   ============================================= */

/* Services Hero Section - Enhanced */
.services-hero {
    padding: 8rem 0 6rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
    position: relative;
    overflow: hidden;
}

.services-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23cbd5e1" stroke-width="1" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.4;
}

.services-hero .container {
    position: relative;
    z-index: 2;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(172, 25, 41, 0.1);
    color: var(--primary-color);
    padding: 0.75rem 1.5rem;
    border-radius: 3rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 2rem;
    border: 2px solid rgba(172, 25, 41, 0.2);
}

.services-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--text-primary), var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.services-hero p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 3rem;
}

.hero-stats {
    display: flex;
    gap: 3rem;
    margin-bottom: 3rem;
    padding: 2rem 0;
}

.hero-stat {
    text-align: center;
    position: relative;
}

.hero-stat .stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.hero-stat .stat-plus,
.hero-stat .stat-percent {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-color);
}

.hero-stat .stat-label {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
}

.btn-large {
    padding: 1.25rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 0.75rem;
}

/* Hero Image Container - Center Column */
.hero-image-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    display: block;
}

.hero-main-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2rem;
    object-fit: cover;
}

.hero-image {
    width: 100%;
    height: auto;
    display: block !important;
    border-radius: 2rem;
    object-fit: cover;
    visibility: visible !important;
}

.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.floating-card {
    position: absolute;
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 120px;
    animation: float 6s ease-in-out infinite;
}

.delivery-card {
    top: 15%;
    left: -10%;
    background: linear-gradient(135deg, #fff, #fef3f2);
    border: 2px solid rgba(172, 25, 41, 0.1);
    animation-delay: 0s;
}

.tracking-card {
    top: 50%;
    right: -15%;
    background: linear-gradient(135deg, #fff, #f0f9ff);
    border: 2px solid rgba(59, 130, 246, 0.1);
    animation-delay: -2s;
}

.secure-card {
    bottom: 20%;
    left: -5%;
    background: linear-gradient(135deg, #fff, #f0fdf4);
    border: 2px solid rgba(16, 185, 129, 0.1);
    animation-delay: -4s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-15px) rotate(1deg);
    }

    66% {
        transform: translateY(10px) rotate(-1deg);
    }
}

/* Hero Tracking Widget - Right Column */
.hero-tracking-widget {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 2rem;
    padding: 1.25rem;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.4);
    width: 100%;
    max-width: 460px;
    min-width: 320px;
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 0;
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

.hero-tracking-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            var(--primary-color) 0%,
            #ff6b6b 50%,
            var(--primary-color) 100%);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.tracking-widget-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(172, 25, 41, 0.1);
    position: relative;
}

.tracking-widget-header i {
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--primary-color), #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.tracking-widget-header span {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.tracking-widget-body {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: center;
}

.tracking-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.tracking-widget-body .tracking-input {
    flex: 1;
    padding: 0.85rem 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    min-height: 48px;
    width: 100%;
}

.tracking-marquee {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 2.5rem);
    font-size: 1.125rem;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

.tracking-marquee span {
    display: inline-block;
    animation: marquee-scroll 8s linear infinite;
    padding-left: 100%;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(100%);
    }

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

.tracking-widget-body .tracking-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(172, 25, 41, 0.12),
        0 4px 12px rgba(172, 25, 41, 0.15);
    transform: translateY(-1px);
    background: white;
}

.tracking-widget-body .tracking-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.tracking-submit-btn {
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, #d32f2f 50%, var(--primary-color) 100%);
    background-size: 200% 100%;
    color: white;
    border: none;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(172, 25, 41, 0.35),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    min-height: 48px;
    flex-shrink: 0;
}

.tracking-submit-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.5s;
}

.tracking-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(172, 25, 41, 0.45),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
    background-position: 100% 0;
}

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

.tracking-submit-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(172, 25, 41, 0.4);
}

.tracking-submit-btn i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.tracking-submit-btn:hover i {
    transform: scale(1.15) rotate(5deg);
}

/* Hero Widgets Container */
.hero-widgets {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 22px;
    width: 100%;
    max-width: 460px;
    margin-left: auto;
    margin-top: 30px;
    padding-bottom: 20px;
}

/* Hero Booking Widget - NEW */
.hero-booking-widget {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 2rem;
    padding: 1.25rem;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

.booking-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(172, 25, 41, 0.1);
}

.booking-widget-header .header-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.booking-widget-header .header-main i {
    font-size: 1.25rem;
    color: var(--primary-color);
}

.booking-widget-header .header-main span {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

.booking-progress-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Removed .booking-progress-bar as requested */

.booking-widget-container {
    overflow: hidden;
    position: relative;
}

.booking-slider {
    display: flex;
    width: 300%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.booking-step {
    width: 33.333%;
    padding: 0 0.5rem;
    flex-shrink: 0;
}

.step-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    text-align: center;
}

/* Selection Grid and Cards */
.booking-selection-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.selection-card {
    background: white;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.selection-card i {
    font-size: 1.2rem;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.selection-card span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.selection-card.active {
    border-color: var(--primary-color);
    background: rgba(172, 25, 41, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(172, 25, 41, 0.1);
}

.selection-card.active i {
    color: var(--primary-color);
}

.selection-card:hover:not(.active) {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.booking-continue-btn,
.booking-submit-btn {
    width: 100%;
    padding: 12px 18px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.booking-continue-btn:hover,
.booking-submit-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(172, 25, 41, 0.3);
}

/* Footer with Dot Indicators */
.booking-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.step-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e2e8f0;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
}

/* Step 3 Forms */
.booking-form-set {
    margin-bottom: 1rem;
}

.booking-form-row {
    display: flex;
    gap: 0.75rem;
    width: 100%;
}

.booking-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.booking-input {
    width: 100%;
    padding: 0.85rem 1.15rem;
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    font-size: 1.1rem;
    outline: none;
    transition: all 0.3s ease;
}

.booking-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(172, 25, 41, 0.1);
}

.error-text {
    color: #ef4444;
    font-size: 0.75rem;
    font-weight: 600;
    padding-left: 0.5rem;
    height: 1rem;
}

.booking-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.booking-back-btn {
    padding: 12px 20px;
    background: #f1f5f9;
    color: #64748b;
    border: none;
    border-radius: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.booking-back-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.booking-back-btn:hover {
    background: #e2e8f0;
}

.booking-submit-btn {
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--primary-color), #d32f2f);
    color: white;
    border: none;
    border-radius: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.booking-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(172, 25, 41, 0.35);
}

@media (max-width: 968px) {
    .hero-widgets {
        margin: 2rem auto 0;
        max-width: 500px;
    }
}

@media (max-width: 768px) {
    .booking-form {
        flex-direction: column;
        gap: 0.75rem;
    }
}

.floating-card i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.delivery-card i {
    color: var(--primary-color);
}

.tracking-card i {
    color: #ac1929;
}

.secure-card i {
    color: #10b981;
}

.floating-card span {
    font-weight: 700;
    font-size: 0.75rem;
    color: inherit;
    margin: 0;
}

.floating-card small {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Enhanced Service Cards */
.core-services {
    padding: 8rem 0;
    background: white;
}

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

.service-card {
    background: white;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
    border: 2px solid #f1f5f9;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
}

.service-card.premium-service {
    border-color: rgba(172, 25, 41, 0.2);
}

.service-card.standard-service {
    border-color: rgba(16, 185, 129, 0.2);
}

.service-card.express-service {
    border-color: rgba(245, 158, 11, 0.2);
}

.service-card.tracking-service {
    border-color: rgba(59, 130, 246, 0.2);
}

.service-header {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.service-badge {
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-badge.popular {
    background: var(--primary-color);
    color: white;
}

.service-badge.express {
    background: #f59e0b;
    color: white;
}

.service-badge.tracking {
    background: #3b82f6;
    color: white;
}

.service-icon {
    background: rgba(255, 255, 255, 0.95);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.service-icon i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.service-image {
    position: relative;
    height: 280px;
    overflow: hidden;
    border-radius: 1.5rem 1.5rem 0 0;
}

.service-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 2;
    transition: all 0.4s ease;
}

.service-card:hover .service-image::before {
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(1.1) contrast(1.05) saturate(1.1);
}

.service-card:hover .service-image img {
    transform: scale(1.15) rotate(2deg);
}

.service-overlay {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 1rem 2rem;
    border-radius: 3rem;
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    z-index: 3;
    transition: all 0.3s ease;
}

.service-card:hover .service-overlay {
    background: rgba(172, 25, 41, 0.9);
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(172, 25, 41, 0.3);
}

.delivery-time {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1rem;
}

.delivery-time i {
    font-size: 1.25rem;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.service-content {
    padding: 3rem;
    position: relative;
}

.service-number {
    position: absolute;
    top: -1.5rem;
    left: 3rem;
    width: 3rem;
    height: 3rem;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(172, 25, 41, 0.3);
}

.service-content h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.service-content>p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Service Highlights */
.service-highlights {
    margin-bottom: 2.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 1.5rem;
    border-left: 4px solid var(--primary-color);
}

.service-highlights h4 {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.service-highlights h4::before {
    content: '⭐';
    font-size: 1rem;
}

.highlights-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.highlights-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.highlights-list i {
    color: var(--primary-color);
    font-size: 1.25rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.highlights-list strong {
    color: var(--text-primary);
    font-weight: 700;
}

.highlights-list br+br {
    display: none;
}

/* Service Features */
.service-features {
    margin-bottom: 3rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.feature-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border-radius: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(16, 185, 129, 0.1);
    position: relative;
    overflow: hidden;
}

.feature-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    transition: width 0.4s ease;
}

.feature-row:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateX(10px);
    box-shadow: 0 6px 25px rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
}

.feature-row:hover::before {
    width: 100%;
}

.feature-row i {
    color: #10b981;
    font-size: 1.25rem;
    flex-shrink: 0;
    background: rgba(16, 185, 129, 0.1);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.feature-row:hover i {
    background: #10b981;
    color: white;
    transform: scale(1.1) rotate(360deg);
}

.feature-row span {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

/* Service Pricing */
.service-pricing {
    margin-bottom: 3rem;
    padding: 3rem 2.5rem;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.08) 0%, rgba(172, 25, 41, 0.04) 50%, rgba(233, 30, 99, 0.06) 100%);
    backdrop-filter: blur(10px);
    border-radius: 2rem;
    text-align: center;
    border: 3px solid rgba(172, 25, 41, 0.2);
    position: relative;
    overflow: hidden;
}

.service-pricing::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(172, 25, 41, 0.1) 0%, transparent 70%);
    animation: priceGlow 3s ease-in-out infinite;
}

@keyframes priceGlow {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

.price-container {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    z-index: 2;
}

.price-label {
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-amount {
    font-size: 3.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary-color), #e91e63);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    text-shadow: 0 4px 8px rgba(172, 25, 41, 0.2);
    position: relative;
}

.price-unit {
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 600;
}

/* Service Actions */
.service-actions {
    display: flex;
    gap: 1rem;
}

.service-btn {
    flex: 1;
    padding: 1rem 2rem;
    font-weight: 600;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Service Comparison Table */
.service-comparison {
    padding: 6rem 0;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}

.comparison-table-wrapper {
    overflow-x: auto;
    border-radius: 1.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    background: white;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.comparison-table th,
.comparison-table td {
    padding: 1.5rem;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}

.comparison-table th {
    background: linear-gradient(135deg, var(--primary-color), #b91c1c);
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
}

.comparison-table .highlight-col {
    background: rgba(172, 25, 41, 0.05);
    border-left: 4px solid var(--primary-color);
    border-right: 4px solid var(--primary-color);
}

.comparison-table th.highlight-col {
    background: linear-gradient(135deg, var(--primary-color), #dc2626);
    position: relative;
}

.comparison-table th.highlight-col::after {
    content: '⭐ POPULAR';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #f59e0b;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 700;
}

.badge {
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.success {
    background: #10b981;
    color: white;
}

.badge.primary {
    background: var(--primary-color);
    color: white;
}

.badge.warning {
    background: #f59e0b;
    color: white;
}

.badge.info {
    background: #3b82f6;
    color: white;
}

.text-success {
    color: #10b981;
}

/* Enhanced CTA Section */
.services-cta {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--primary-color), #dc2626, #b91c1c);
    color: white;
    position: relative;
    overflow: hidden;
}

.services-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
    opacity: 0.3;
}

.cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    position: relative;
    z-index: 2;
}

.cta-icon {
    font-size: 4rem;
    opacity: 0.9;
    animation: pulse 2s infinite;
}

.cta-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.cta-text p {
    font-size: 1.2rem;
    opacity: 0.9;
    line-height: 1.6;
}

.cta-actions {
    display: flex;
    gap: 1.5rem;
    flex-shrink: 0;
}

.btn-white {
    background: white;
    color: var(--primary-color);
    border: 2px solid white;
}

.btn-white:hover {
    background: transparent;
    color: white;
    border-color: white;
}

.btn-outline-light {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-outline-light:hover {
    background: white;
    color: var(--primary-color);
    border-color: white;
}

/* Enhanced Quote Modal */
.service-quote-modal {
    max-width: 700px;
}

.modal-header h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
}

.modal-header i {
    color: var(--primary-color);
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-group label i {
    color: var(--primary-color);
    font-size: 0.9rem;
}

.quote-card {
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    padding: 2rem;
    border-radius: 1.5rem;
    border: 2px solid rgba(16, 185, 129, 0.2);
    text-align: center;
}

.quote-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    color: #10b981;
}

.quote-header i {
    font-size: 1.5rem;
}

.quote-price {
    margin-bottom: 1.5rem;
}

.quote-price .price-label {
    display: block;
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.quote-price .price-value {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
}

.quote-actions {
    margin-top: 1.5rem;
}

/* Animation Classes */
.animate-fade-in {
    animation: fadeIn 1s ease-out;
}

.animate-slide-up {
    animation: slideUp 1s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Responsive Design for Enhanced Services */
@media (max-width: 1200px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        max-width: 800px;
    }
}

@media (max-width: 968px) {
    .services-hero h1 {
        font-size: 2.8rem;
    }

    .hero-stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 2rem;
    }

    .hero-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .floating-elements {
        display: none;
    }

    .core-services {
        padding: 6rem 0;
    }

    .services-grid {
        gap: 2rem;
        max-width: 700px;
    }

    .service-content {
        padding: 2.5rem 2rem 2rem;
    }

    .service-content h3 {
        font-size: 1.8rem;
    }

    .service-image {
        height: 220px;
    }

    .service-highlights {
        padding: 2rem;
        margin-bottom: 2.5rem;
    }

    .cta-content {
        flex-direction: column;
        text-align: center;
    }

    .cta-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .services-hero {
        padding: 6rem 0 4rem 0;
    }

    .services-hero h1 {
        font-size: 2.2rem;
    }

    .core-services,
    .service-comparison {
        padding: 4rem 0;
    }

    .services-grid {
        max-width: 100%;
        padding: 0 1rem;
    }

    .service-card {
        border-radius: 1.25rem;
    }

    .service-content {
        padding: 2rem 1.5rem 1.5rem;
    }

    .service-content h3 {
        font-size: 1.6rem;
    }

    .service-image {
        height: 200px;
    }

    .service-header {
        top: 1rem;
        right: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .service-icon {
        width: 3rem;
        height: 3rem;
    }

    .service-number {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.25rem;
        top: -1.75rem;
        left: 1.5rem;
    }

    .service-actions {
        flex-direction: column;
        gap: 1rem;
    }

    .service-btn {
        width: 100%;
    }

    .hero-stats {
        gap: 1.5rem;
    }

    .hero-stat .stat-number {
        font-size: 2rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 1rem;
        font-size: 0.9rem;
    }

    .cta-text h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .services-hero h1 {
        font-size: 1.8rem;
    }

    .hero-badge {
        font-size: 0.9rem;
        padding: 0.6rem 1.2rem;
    }

    .core-services {
        padding: 4rem 0;
    }

    .service-content {
        padding: 1.5rem 1rem 1rem;
    }

    .service-content h3 {
        font-size: 1.4rem;
    }

    .service-image {
        height: 180px;
    }

    .service-overlay {
        bottom: 1rem;
        left: 1rem;
        padding: 0.75rem 1.25rem;
    }

    .delivery-time {
        font-size: 0.9rem;
        gap: 0.5rem;
    }

    .service-highlights {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .highlights-list li {
        padding: 1rem;
        gap: 1rem;
    }

    .highlights-list i {
        width: 2rem;
        height: 2rem;
        font-size: 1.25rem;
    }

    .service-features {
        padding: 1.25rem;
    }

    .service-pricing {
        padding: 1.5rem;
    }

    .btn-large {
        padding: 1rem 2rem;
        font-size: 1rem;
    }

    .price-amount {
        font-size: 2rem;
    }

    .service-btn {
        font-size: 0.85rem;
        gap: 0.5rem;
    }

    .quote-price .price-value {
        font-size: 2.5rem;
    }
}

/* =============================================
   SERVICES PAGE SPECIFIC STYLES
   ============================================= */

/* Services Page Enhanced Styles - Only affects services.php */
.page-services .core-services {
    padding: 8rem 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
    position: relative;
    overflow: hidden;
}

.page-services .core-services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(172, 25, 41, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(16, 185, 129, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.page-services .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    gap: 3rem;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.page-services .service-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 2px 16px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.8);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.page-services .service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 1;
}

.page-services .service-card:hover {
    transform: translateY(-15px) rotateX(2deg);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15), 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: rgba(172, 25, 41, 0.2);
}

.page-services .service-card.premium-service {
    border-color: rgba(172, 25, 41, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 242, 242, 0.95) 100%);
}

.page-services .service-card.premium-service::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), #e91e63);
    z-index: 2;
}

.page-services .service-card.standard-service {
    border-color: rgba(16, 185, 129, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 244, 0.95) 100%);
}

.page-services .service-card.standard-service::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10b981, #059669);
    z-index: 2;
}

.page-services .service-card.express-service {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 251, 235, 0.95) 100%);
}

.page-services .service-card.express-service::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b, #d97706);
    z-index: 2;
}

.page-services .service-card.tracking-service {
    border-color: rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 246, 255, 0.95) 100%);
}

.page-services .service-card.tracking-service::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    z-index: 2;
}

/* Services Page Enhanced Service Highlights */
.page-services .service-highlights {
    margin-bottom: 3rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.8), rgba(241, 245, 249, 0.9));
    backdrop-filter: blur(10px);
    border-radius: 2rem;
    border: 2px solid rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
}

.page-services .service-highlights::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-color), #e91e63, #ac1929);
    border-radius: 0 3px 3px 0;
}

.page-services .service-highlights h4 {
    color: var(--text-primary);
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.page-services .service-highlights h4::before {
    content: '✨';
    font-size: 1.5rem;
    animation: servicesSparkle 2s ease-in-out infinite;
}

@keyframes servicesSparkle {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.2) rotate(180deg);
    }
}

.page-services .highlights-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.5rem;
}

.page-services .highlights-list li {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.page-services .highlights-list li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-color), #e91e63);
    border-radius: 0 2px 2px 0;
}

.page-services .highlights-list li:hover {
    transform: translateX(8px);
    box-shadow: 0 8px 35px rgba(172, 25, 41, 0.15);
    border-color: rgba(172, 25, 41, 0.2);
}

.page-services .highlights-list i {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
    background: rgba(172, 25, 41, 0.1);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.page-services .highlights-list li:hover i {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.page-services .highlights-list strong {
    color: var(--text-primary);
    font-weight: 800;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 0.5rem;
}

/* Services Page Enhanced Service Content */
.page-services .service-content {
    padding: 3.5rem 3rem 3rem;
    position: relative;
    z-index: 2;
}

.page-services .service-content h3 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    line-height: 1.2;
    background: linear-gradient(135deg, var(--text-primary), var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-services .service-content>p {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

/* Services Page Enhanced Pricing */
.page-services .service-pricing {
    margin-bottom: 3rem;
    padding: 3rem 2.5rem;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.08) 0%, rgba(172, 25, 41, 0.04) 50%, rgba(233, 30, 99, 0.06) 100%);
    backdrop-filter: blur(10px);
    border-radius: 2rem;
    text-align: center;
    border: 3px solid rgba(172, 25, 41, 0.2);
    position: relative;
    overflow: hidden;
}

.page-services .service-pricing::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(172, 25, 41, 0.1) 0%, transparent 70%);
    animation: servicesPriceGlow 3s ease-in-out infinite;
}

@keyframes servicesPriceGlow {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

.page-services .price-amount {
    font-size: 3.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary-color), #e91e63);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    text-shadow: 0 4px 8px rgba(172, 25, 41, 0.2);
    position: relative;
}

/* Services Page Responsive Design */
@media (max-width: 1200px) {
    .page-services .services-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        max-width: 800px;
    }
}

@media (max-width: 968px) {
    .page-services .core-services {
        padding: 6rem 0;
    }

    .page-services .services-grid {
        gap: 2rem;
        max-width: 700px;
    }

    .page-services .service-content {
        padding: 2.5rem 2rem 2rem;
    }

    .page-services .service-content h3 {
        font-size: 1.8rem;
    }
}

/* =====================================
   MODERN SERVICES REDESIGN - PAGE SPECIFIC
   ===================================== */

/* Modern Services Section */
.page-services .modern-services {
    padding: 120px 0;
    background: linear-gradient(135deg, #ac1929 0%, #e91e63 100%);
    position: relative;
    overflow: hidden;
}

.page-services .modern-services::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    animation: backgroundMove 20s linear infinite;
    pointer-events: none;
}

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

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

.page-services .services-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 60px;
}

/* Service Card Modern Design */
.page-services .service-card-modern {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 0;
    position: relative;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    min-height: 550px;
}

.page-services .service-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
    border-radius: 24px 24px 0 0;
}

.page-services .service-card-modern:hover {
    transform: translateY(-20px) scale(1.02);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.3),
        0 0 50px rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Premium Card Styling */
.page-services .premium-card::before {
    background: linear-gradient(90deg, #ff6b6b, #ff8e53);
}

.page-services .premium-card:hover {
    box-shadow:
        0 30px 60px rgba(255, 107, 107, 0.3),
        0 0 50px rgba(255, 107, 107, 0.2);
}

/* Express Card Styling */
.page-services .express-card::before {
    background: linear-gradient(90deg, #4ecdc4, #44a08d);
}

.page-services .express-card:hover {
    box-shadow:
        0 30px 60px rgba(78, 205, 196, 0.3),
        0 0 50px rgba(78, 205, 196, 0.2);
}

/* Standard Card Styling */
.page-services .standard-card::before {
    background: linear-gradient(90deg, #45b7d1, #2196f3);
}

.page-services .standard-card:hover {
    box-shadow:
        0 30px 60px rgba(69, 183, 209, 0.3),
        0 0 50px rgba(69, 183, 209, 0.2);
}

/* Tracking Card Styling */
.page-services .tracking-card::before {
    background: linear-gradient(90deg, #ac1929, #e91e63);
}

.page-services .tracking-card:hover {
    box-shadow:
        0 30px 60px rgba(102, 126, 234, 0.3),
        0 0 50px rgba(102, 126, 234, 0.2);
}

/* Card Header */
.page-services .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 0;
    position: relative;
    z-index: 2;
}

.page-services .service-badge-modern {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: pulse 2s infinite;
}

.page-services .service-badge-modern.popular {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
}

.page-services .service-badge-modern.express {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
}

.page-services .service-badge-modern.tracking {
    background: linear-gradient(135deg, #ac1929, #e91e63);
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.page-services .service-icon-modern {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.page-services .service-icon-modern i {
    font-size: 24px;
    color: white;
    transition: all 0.3s ease;
}

.page-services .service-card-modern:hover .service-icon-modern {
    transform: rotate(360deg) scale(1.1);
    background: rgba(255, 255, 255, 0.25);
}

/* Card Image */
.page-services .card-image {
    position: relative;
    height: 200px;
    margin: 20px 24px;
    border-radius: 16px;
    overflow: hidden;
}

.page-services .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.page-services .service-card-modern:hover .card-image img {
    transform: scale(1.1);
}

.page-services .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
    display: flex;
    align-items: flex-end;
    padding: 16px;
}

.page-services .delivery-badge {
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 8px 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.page-services .delivery-badge i {
    color: #4ecdc4;
}

/* Card Content */
.page-services .card-content {
    padding: 0 24px 24px;
    position: relative;
}

.page-services .service-number-modern {
    position: absolute;
    top: -40px;
    right: 24px;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.page-services .service-title {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
    line-height: 1.2;
}

.page-services .service-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Service Details */
.page-services .service-details {
    margin-bottom: 32px;
}

.page-services .detail-section {
    margin-bottom: 24px;
}

.page-services .detail-section h4 {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-services .detail-section h4 i {
    color: #4ecdc4;
    font-size: 16px;
}

.page-services .feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.page-services .feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.page-services .feature-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.page-services .feature-item i {
    color: #4ecdc4;
    font-size: 16px;
    margin-top: 2px;
    min-width: 16px;
}

.page-services .feature-item div strong {
    color: white;
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.page-services .feature-item div span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    line-height: 1.4;
}

/* Included List */
.page-services .included-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-services .included-list li {
    color: #1e293b;
    font-size: 14px;
    padding: 8px 0;
    position: relative;
    padding-left: 24px;
    transition: all 0.3s ease;
}

.page-services .included-list li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #4ecdc4;
    font-weight: bold;
    font-size: 16px;
}

.page-services .included-list li:hover {
    color: #0f172a;
    padding-left: 28px;
}

/* Card Actions */
.page-services .card-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.page-services .btn-primary-modern,
.page-services .btn-outline-modern {
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    border: 2px solid transparent;
    text-decoration: none;
    flex: 1;
    justify-content: center;
    min-width: 120px;
}

.page-services .btn-primary-modern {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: white;
}

.page-services .btn-primary-modern:hover {
    background: linear-gradient(135deg, #44a08d, #4ecdc4);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(78, 205, 196, 0.4);
}

.page-services .btn-outline-modern {
    background: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.page-services .btn-outline-modern:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-services .modern-services {
        padding: 80px 0;
    }

    .page-services .services-cards-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 40px;
    }

    .page-services .service-card-modern {
        min-height: auto;
    }

    .page-services .feature-grid {
        grid-template-columns: 1fr;
    }

    .page-services .card-actions {
        flex-direction: column;
    }

    .page-services .btn-primary-modern,
    .page-services .btn-outline-modern {
        flex: none;
    }

    .page-services .service-number-modern {
        width: 60px;
        height: 60px;
        font-size: 18px;
        top: -30px;
        right: 16px;
    }

    .page-services .service-title {
        font-size: 24px;
    }
}

/* Admin Dashboard Styles */
.admin-body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    background: #f5f6fa;
    color: #2c3e50;
}

.admin-header {
    background: linear-gradient(135deg, #ac1929 0%, #e91e63 100%);
    color: white;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.admin-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.nav-brand .logo-image {
    height: 90px;
    width: auto;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.admin-welcome {
    font-weight: 500;
}

.logout-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.logout-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.admin-sidebar {
    position: fixed;
    top: 70px;
    left: 0;
    width: 250px;
    height: calc(100vh - 70px);
    background: white;
    border-right: 1px solid #e0e6ed;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
    z-index: 100;
    overflow-y: auto;
}

.sidebar-menu {
    padding: 20px 0;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #64748b;
    font-weight: 500;
}

.menu-item:hover {
    background: #f8fafc;
    color: #ac1929;
}

.menu-item.active {
    background: linear-gradient(135deg, #ac1929 0%, #e91e63 100%);
    color: white;
    border-right: 4px solid #4f46e5;
}

.menu-item i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.admin-content {
    margin-left: 250px;
    margin-top: 70px;
    padding: 30px;
    min-height: calc(100vh - 100px);
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

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

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

.page-header h1 {
    color: #1e293b;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.page-header h1 i {
    color: #ac1929;
}

.page-header p {
    color: #64748b;
    margin: 5px 0 0 0;
    font-size: 1.1rem;
}

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

.stat-card {
    background: white;
    padding: 25px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: linear-gradient(135deg, #ac1929 0%, #e91e63 100%);
    color: white;
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.stat-label {
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 4px;
}

.admin-section {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
}

.admin-section h2 {
    color: #1e293b;
    font-size: 1.4rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.activity-item:hover {
    background: #f1f5f9;
    transform: translateX(5px);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.activity-icon.delivered {
    background: #10b981;
}

.activity-icon.transit {
    background: #f59e0b;
}

.activity-icon.new {
    background: #3b82f6;
}

.activity-content {
    flex: 1;
}

.activity-content h4 {
    margin: 0 0 5px 0;
    color: #1e293b;
    font-weight: 600;
    font-size: 1rem;
}

.activity-content p {
    margin: 0 0 8px 0;
    color: #64748b;
    font-size: 0.9rem;
}

.activity-time {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
}

.filter-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-bar select,
.filter-bar input {
    padding: 10px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    background: white;
    color: #64748b;
    transition: all 0.3s ease;
}

.filter-bar select:focus,
.filter-bar input:focus {
    outline: none;
    border-color: #ac1929;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.table-container {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
}

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

.admin-table th {
    background: #f8fafc;
    padding: 15px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    border-bottom: 2px solid #e2e8f0;
    font-size: 0.9rem;
}

.admin-table td {
    padding: 15px;
    border-bottom: 1px solid #f1f5f9;
    color: #64748b;
}

.admin-table tr:hover {
    background: #f8fafc;
}

.status-badge,
.service-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.delivered {
    background: #dcfce7;
    color: #166534;
}

.status-badge.transit {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.pending {
    background: #fee2e2;
    color: #991b1b;
}

.service-badge.same-day {
    background: #ddd6fe;
    color: #5b21b6;
}

.service-badge.next-day {
    background: #cffafe;
    color: #0f766e;
}

.service-badge.express {
    background: #fed7d7;
    color: #c53030;
}

.btn-small {
    background: #f1f5f9;
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: #64748b;
    font-size: 14px;
    margin-right: 5px;
    transition: all 0.3s ease;
}

.btn-small:hover {
    background: #ac1929;
    color: white;
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, #ac1929 0%, #e91e63 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.btn-outline {
    background: transparent;
    color: #ac1929;
    border: 2px solid #ac1929;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: #ac1929;
    color: white;
}

.tracking-tools {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    align-items: center;
}

.tracking-input {
    flex: 1;
    max-width: 400px;
    padding: 15px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 16px;
    background: white;
}

.tracking-input:focus {
    outline: none;
    border-color: #ac1929;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.tracking-results {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-results {
    text-align: center;
    color: #94a3b8;
}

.no-results i {
    font-size: 3rem;
    margin-bottom: 15px;
}

.tracking-found h3 {
    color: #1e293b;
    margin-bottom: 25px;
    font-size: 1.3rem;
}

.tracking-timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    padding-bottom: 20px;
}

.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 50px;
    width: 2px;
    height: 40px;
    background: #e2e8f0;
}

.timeline-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    z-index: 2;
}

.timeline-item.completed .timeline-icon {
    background: #10b981;
}

.timeline-item.current .timeline-icon {
    background: #f59e0b;
}

.timeline-content h4 {
    margin: 0 0 5px 0;
    color: #1e293b;
    font-weight: 600;
}

.timeline-content p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.report-card {
    background: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.report-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.report-card h3 {
    color: #1e293b;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 600;
}

.report-metric {
    margin-bottom: 15px;
}

.metric-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #ac1929;
    line-height: 1.2;
}

.metric-label {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
}

.metric-change {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
}

.metric-change.positive {
    color: #10b981;
}

.settings-groups {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 30px;
}

.settings-group {
    background: white;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
}

.settings-group h3 {
    color: #1e293b;
    margin-bottom: 20px;
    font-size: 1.2rem;
    font-weight: 600;
}

.setting-item {
    margin-bottom: 20px;
}

.setting-item label {
    display: block;
    margin-bottom: 8px;
    color: #374151;
    font-weight: 500;
    font-size: 0.95rem;
}

.setting-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    background: white;
    color: #64748b;
    transition: all 0.3s ease;
}

.setting-input:focus {
    outline: none;
    border-color: #ac1929;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.setting-checkbox {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 0 !important;
}

.setting-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #ac1929;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .admin-content {
        margin-left: 0;
        padding: 20px;
    }

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

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .tracking-tools {
        flex-direction: column;
    }

    .reports-grid {
        grid-template-columns: 1fr;
    }
}

/* Login Page Styles */
.login-page-body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(135deg, #ac1929 0%, #e91e63 100%);
    font-family: 'Inter', sans-serif;
}

.login-header {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.login-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.login-nav-brand .login-logo-img {
    height: 40px;
    width: auto;
}

.login-nav-link {
    color: white;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-nav-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.login-main {
    padding-top: 80px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px 20px 20px;
}

.login-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.login-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.login-branding {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    position: relative;
}

.login-branding::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') repeat;
    opacity: 0.3;
}

.brand-content {
    position: relative;
    z-index: 2;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.brand-logo-img {
    height: 50px;
    width: auto;
}

.brand-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #ac1929 0%, #e91e63 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-tagline {
    margin-bottom: 40px;
}

.brand-tagline h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    color: white;
}

.brand-tagline p {
    font-size: 1.1rem;
    color: #cbd5e1;
    margin: 0;
    line-height: 1.6;
}

.brand-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ac1929;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.feature-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 5px 0;
    color: white;
}

.feature-content p {
    font-size: 0.95rem;
    color: #cbd5e1;
    margin: 0;
    line-height: 1.4;
}

.brand-footer {
    position: relative;
    z-index: 2;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-footer p {
    font-size: 0.9rem;
    color: #94a3b8;
    margin: 0;
    text-align: center;
}

.login-form-panel {
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafbfc;
}

.login-form-container {
    width: 100%;
    max-width: 400px;
}

.login-form-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-form-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px 0;
}

.login-form-header p {
    font-size: 1rem;
    color: #64748b;
    margin: 0;
}

.error-message {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 500;
}

.login-form {
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.form-input {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 16px;
    background: white;
    color: #1e293b;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: #ac1929;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.password-input-wrapper {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    transition: all 0.3s ease;
    z-index: 10;
}

.password-toggle:hover {
    color: #ac1929;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: #64748b;
}

.checkbox-input {
    margin-right: 8px;
    accent-color: #ac1929;
}

.forgot-password {
    color: #ac1929;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.forgot-password:hover {
    color: #4f46e5;
    text-decoration: underline;
}

.login-btn {
    width: 100%;
    background: linear-gradient(135deg, #ac1929 0%, #e91e63 100%);
    color: white;
    border: none;
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 1;
    position: relative;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.login-help {
    text-align: center;
}

.help-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 20px;
}

.demo-credentials {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    text-align: left;
}

.demo-credentials h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 10px 0;
}

.demo-credentials p {
    font-size: 0.9rem;
    color: #64748b;
    margin: 5px 0;
}

.demo-credentials p strong {
    color: #1e293b;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .login-split {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .login-branding {
        display: none;
    }

    .login-form-panel {
        padding: 30px 20px;
    }

    .login-main {
        padding-top: 60px;
    }

    .brand-title {
        font-size: 2rem;
    }

    .brand-tagline h2 {
        font-size: 1.5rem;
    }

    .form-options {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
}

/* Glassmorphism Login Modal Styles */
.login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.login-modal-glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 20px;
    border: 1px solid rgba(172, 25, 41, 0.1);
    box-shadow:
        0 25px 45px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 0 0 1px rgba(172, 25, 41, 0.05);
    animation: modalSlideUp 0.4s ease;
}

.login-modal {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 18px;
    border: 1px solid rgba(172, 25, 41, 0.15);
    width: 100%;
    max-width: 450px;
    margin: 20px;
    overflow: hidden;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 0 1px rgba(172, 25, 41, 0.1);
}

.login-modal-header {
    background: linear-gradient(135deg,
            rgba(172, 25, 41, 0.1) 0%,
            rgba(233, 30, 99, 0.1) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-modal-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-modal-header h3 i {
    color: #ac1929;
    font-size: 1.3rem;
}

.modal-close {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    transform: scale(1.1);
}

.login-modal-body {
    padding: 30px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.modal-login-form .form-group {
    margin-bottom: 20px;
}

.modal-login-form .form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.modal-login-form .form-input {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid rgba(226, 232, 240, 0.8);
    border-radius: 12px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #1e293b;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.modal-login-form .form-input:focus {
    outline: none;
    border-color: #ac1929;
    box-shadow: 0 0 0 3px rgba(172, 25, 41, 0.1);
    background: rgba(255, 255, 255, 0.95);
}

.modal-login-form .password-input-wrapper {
    position: relative;
}

.modal-login-form .password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(100, 116, 139, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(100, 116, 139, 0.2);
    color: #64748b;
    cursor: pointer;
    font-size: 16px;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
    z-index: 10;
}

.modal-login-form .password-toggle:hover {
    background: rgba(172, 25, 41, 0.1);
    color: #ac1929;
    border-color: rgba(172, 25, 41, 0.3);
}

.modal-login-form .form-options {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 25px;
}

.modal-login-form .checkbox-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: #64748b;
    background: rgba(255, 255, 255, 0.5);
    padding: 8px 12px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.modal-login-form .checkbox-input {
    margin-right: 8px;
    accent-color: #ac1929;
}

.modal-login-btn {
    width: 100%;
    background: linear-gradient(135deg, #ac1929 0%, #e91e63 100%);
    color: white;
    border: none;
    padding: 15px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(172, 25, 41, 0.3);
}

.modal-login-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.5s;
}

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

.modal-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(172, 25, 41, 0.4);
}

.modal-help {
    text-align: center;
    margin-top: 20px;
}

.modal-help .demo-credentials {
    background: rgba(248, 250, 252, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 12px;
    padding: 20px;
    text-align: left;
}

.modal-help .demo-credentials h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 10px 0;
}

.modal-help .demo-credentials p {
    font-size: 0.9rem;
    color: #64748b;
    margin: 5px 0;
}

.modal-help .demo-credentials p strong {
    color: #1e293b;
    font-weight: 600;
}

/* Modal Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }

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

/* Mobile Responsive for Modal */
@media (max-width: 768px) {
    .login-modal {
        margin: 10px;
        max-width: none;
        width: calc(100% - 20px);
    }

    .login-modal-header {
        padding: 20px;
    }

    .login-modal-body {
        padding: 20px;
    }

    .login-modal-header h3 {
        font-size: 1.3rem;
    }

    .modal-close {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* Enhanced Services Page Styles */
.services-page-header {
    background: linear-gradient(135deg,
            rgba(172, 25, 41, 0.05) 0%,
            rgba(59, 130, 246, 0.08) 35%,
            rgba(233, 30, 99, 0.06) 70%,
            rgba(147, 197, 253, 0.09) 100%);
    padding: 120px 0 80px 0;
    position: relative;
    overflow: hidden;
}

.services-page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(172, 25, 41, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(233, 30, 99, 0.08) 0%, transparent 40%);
    pointer-events: none;
}

.page-header-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.header-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 50px;
    border: 1px solid rgba(172, 25, 41, 0.2);
    font-weight: 600;
    color: #ac1929;
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(172, 25, 41, 0.1);
}

.header-badge i {
    font-size: 18px;
    color: #ac1929;
}

.page-header-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 20px;
    line-height: 1.1;
    background: linear-gradient(135deg, #ac1929 0%, #2563eb 50%, #e91e63 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-header-content p {
    font-size: 1.2rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 0;
}

.header-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.decoration-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    animation: float 6s ease-in-out infinite;
}

.circle-1 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #ac1929, #e91e63);
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.circle-2 {
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.circle-3 {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #e91e63, #ac1929);
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-20px) rotate(120deg);
    }

    66% {
        transform: translateY(10px) rotate(240deg);
    }
}

/* Services Stats Section */
.services-stats {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 40px 0;
    margin-top: -40px;
    position: relative;
    z-index: 3;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 20px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ac1929 0%, #2563eb 50%, #e91e63 100%);
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.services-stats .stat-icon i {
    font-size: 1.8rem !important;
    background: linear-gradient(135deg, #ac1929 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Services Stats Bottom Section (after services list) */
.services-stats-bottom {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(248, 250, 252, 0.98) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 50px 0;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    z-index: 3;
}

.services-stats-bottom .stats-header {
    text-align: center;
    margin-bottom: 40px;
}

.services-stats-bottom .stats-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.services-stats-bottom .stats-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.services-stats-bottom .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.services-stats-bottom .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 20px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.services-stats-bottom .stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ac1929 0%, #2563eb 50%, #e91e63 100%);
}

.services-stats-bottom .stat-item:hover {
    transform: translateY(-5px);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.services-stats-bottom .stat-icon i {
    font-size: 1.8rem !important;
    background: linear-gradient(135deg, #ac1929 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 768px) {
    .services-stats-bottom .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .services-stats-bottom .stats-grid {
        grid-template-columns: 1fr;
    }
}

.stat-icon i {
    font-size: 2.5rem !important;
    background: linear-gradient(135deg, #ac1929 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-content {
    flex: 1;
}

.stat-number {
    display: inline;
    font-size: 1.8rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.stat-plus,
.stat-percent {
    color: #ac1929;
    font-weight: 800;
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
    margin-top: 4px;
}

/* Enhanced Quote Page Styles */

/* Quote Hero Section */
.quote-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 6rem;
}

.quote-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(30, 58, 138, 0.8) 0%,
            rgba(59, 130, 246, 0.7) 50%,
            rgba(172, 25, 41, 0.8) 100%);
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(30, 58, 138, 0.4),
            rgba(59, 130, 246, 0.3),
            rgba(172, 25, 41, 0.4));
    z-index: -1;
}

.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
}

.element {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: floatElement 20s infinite ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.15);
}

.floating-icon {
    position: absolute;
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.4);
    animation: floatIcon 15s infinite ease-in-out;
    z-index: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Mathematical Symbols */
.math-icon-1 {
    top: 15%;
    left: 5%;
    animation: gentleFloat1 12s infinite ease-in-out;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 2.5rem !important;
}

.math-icon-2 {
    top: 20%;
    right: 8%;
    animation: gentleFloat2 14s infinite ease-in-out;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 2.2rem !important;
}

.math-icon-3 {
    bottom: 35%;
    left: 10%;
    animation: gentleFloat3 16s infinite ease-in-out;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 2.4rem !important;
}

.math-icon-4 {
    bottom: 15%;
    right: 15%;
    animation: gentleFloat4 13s infinite ease-in-out;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 2.3rem !important;
}

.math-icon-5 {
    top: 50%;
    left: 3%;
    animation: gentleFloat5 15s infinite ease-in-out;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 2.6rem !important;
}

/* Package Detail Icons */
.package-icon-1 {
    top: 20%;
    right: 30%;
    animation: packageFloat1 11s infinite ease-in-out;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 2.2rem !important;
}

.package-icon-2 {
    top: 70%;
    left: 25%;
    animation: packageFloat2 13s infinite ease-in-out;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 2.4rem !important;
}

.package-icon-3 {
    bottom: 30%;
    right: 15%;
    animation: packageFloat3 15s infinite ease-in-out;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 2.3rem !important;
}

.package-icon-4 {
    top: 55%;
    right: 8%;
    animation: packageFloat4 14s infinite ease-in-out;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 2.5rem !important;
}

.package-icon-5 {
    bottom: 50%;
    left: 10%;
    animation: packageFloat5 12s infinite ease-in-out;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 2.1rem !important;
}

/* Transportation Icons with Zigzag Movement */
.transport-plane-1 {
    top: 25%;
    left: -10%;
    animation: zigzagPlane1 12s infinite linear;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.4);
    z-index: 1;
}

.transport-plane-2 {
    top: 60%;
    left: -10%;
    animation: zigzagJet1 14s infinite linear;
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

.transport-plane-3 {
    top: 40%;
    left: -10%;
    animation: zigzagJet2 16s infinite linear;
    font-size: 1.7rem;
    color: rgba(255, 255, 255, 0.45);
    z-index: 1;
}

.transport-train-1 {
    bottom: 30%;
    right: -10%;
    animation: zigzagTrain1 15s infinite linear;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.4);
    z-index: 1;
}

.transport-train-2 {
    bottom: 50%;
    right: -10%;
    animation: zigzagTrain2 18s infinite linear;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.35);
    z-index: 1;
}

.transport-train-3 {
    bottom: 15%;
    right: -10%;
    animation: zigzagTrain3 20s infinite linear;
    font-size: 1.9rem;
    color: rgba(255, 255, 255, 0.4);
    z-index: 1;
}

/* Smoke Trail Effect */
.smoke-trail {
    position: absolute;
    top: 50%;
    right: 100%;
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), transparent);
    border-radius: 2px;
    transform: translateY(-50%);
    opacity: 0.6;
    animation: smokeTrail 2s infinite ease-out;
}

.smoke-trail::before {
    content: '';
    position: absolute;
    top: -2px;
    right: 10px;
    width: 60px;
    height: 2px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), transparent);
    border-radius: 1px;
    animation: smokeTrail 2.5s infinite ease-out;
}

.smoke-trail::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 20px;
    width: 40px;
    height: 2px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.15), transparent);
    border-radius: 1px;
    animation: smokeTrail 3s infinite ease-out;
}

@keyframes smokeTrail {
    0% {
        opacity: 0.6;
        transform: translateY(-50%) scaleX(1);
    }

    50% {
        opacity: 0.3;
        transform: translateY(-50%) scaleX(1.2);
    }

    100% {
        opacity: 0.1;
        transform: translateY(-50%) scaleX(0.8);
    }
}

/* Zigzag Animation for Plane 1 */
@keyframes zigzagPlane1 {
    0% {
        transform: translateX(-100px) translateY(0px) rotate(15deg);
        left: -10%;
        top: 25%;
    }

    15% {
        transform: translateX(0px) translateY(-40px) rotate(20deg);
        left: 15%;
        top: 20%;
    }

    30% {
        transform: translateX(50px) translateY(30px) rotate(10deg);
        left: 35%;
        top: 35%;
    }

    50% {
        transform: translateX(100px) translateY(-25px) rotate(25deg);
        left: 55%;
        top: 15%;
    }

    70% {
        transform: translateX(150px) translateY(40px) rotate(5deg);
        left: 75%;
        top: 40%;
    }

    100% {
        transform: translateX(250px) translateY(0px) rotate(15deg);
        left: 110%;
        top: 25%;
    }
}

/* Zigzag Animation for Jet 1 */
@keyframes zigzagJet1 {
    0% {
        transform: translateX(-120px) translateY(0px) rotate(10deg);
        left: -10%;
        top: 60%;
    }

    20% {
        transform: translateX(-20px) translateY(-50px) rotate(30deg);
        left: 20%;
        top: 45%;
    }

    40% {
        transform: translateX(60px) translateY(35px) rotate(-5deg);
        left: 40%;
        top: 70%;
    }

    60% {
        transform: translateX(130px) translateY(-30px) rotate(20deg);
        left: 60%;
        top: 50%;
    }

    80% {
        transform: translateX(200px) translateY(20px) rotate(0deg);
        left: 80%;
        top: 65%;
    }

    100% {
        transform: translateX(280px) translateY(0px) rotate(10deg);
        left: 110%;
        top: 60%;
    }
}

/* Zigzag Animation for Jet 2 */
@keyframes zigzagJet2 {
    0% {
        transform: translateX(-80px) translateY(0px) rotate(8deg);
        left: -10%;
        top: 40%;
    }

    25% {
        transform: translateX(20px) translateY(-35px) rotate(25deg);
        left: 25%;
        top: 28%;
    }

    50% {
        transform: translateX(80px) translateY(45px) rotate(-10deg);
        left: 50%;
        top: 55%;
    }

    75% {
        transform: translateX(160px) translateY(-20px) rotate(15deg);
        left: 75%;
        top: 35%;
    }

    100% {
        transform: translateX(220px) translateY(0px) rotate(8deg);
        left: 110%;
        top: 40%;
    }
}

/* Zigzag Animation for Train 1 - Fixed Orientation */
@keyframes zigzagTrain1 {
    0% {
        transform: translateX(100px) translateY(0px) rotate(0deg);
        right: -10%;
        bottom: 30%;
    }

    18% {
        transform: translateX(50px) translateY(25px) rotate(0deg);
        right: 8%;
        bottom: 25%;
    }

    35% {
        transform: translateX(0px) translateY(-20px) rotate(0deg);
        right: 25%;
        bottom: 40%;
    }

    55% {
        transform: translateX(-50px) translateY(30px) rotate(0deg);
        right: 45%;
        bottom: 20%;
    }

    75% {
        transform: translateX(-100px) translateY(-15px) rotate(0deg);
        right: 65%;
        bottom: 35%;
    }

    100% {
        transform: translateX(-200px) translateY(0px) rotate(0deg);
        right: 110%;
        bottom: 30%;
    }
}

/* Zigzag Animation for Train 2 */
@keyframes zigzagTrain2 {
    0% {
        transform: translateX(120px) translateY(0px) rotate(0deg);
        right: -10%;
        bottom: 50%;
    }

    20% {
        transform: translateX(70px) translateY(-30px) rotate(0deg);
        right: 10%;
        bottom: 60%;
    }

    40% {
        transform: translateX(20px) translateY(25px) rotate(0deg);
        right: 30%;
        bottom: 40%;
    }

    65% {
        transform: translateX(-40px) translateY(-20px) rotate(0deg);
        right: 55%;
        bottom: 55%;
    }

    85% {
        transform: translateX(-100px) translateY(15px) rotate(0deg);
        right: 75%;
        bottom: 45%;
    }

    100% {
        transform: translateX(-180px) translateY(0px) rotate(0deg);
        right: 110%;
        bottom: 50%;
    }
}

/* Zigzag Animation for Train 3 */
@keyframes zigzagTrain3 {
    0% {
        transform: translateX(90px) translateY(0px) rotate(0deg);
        right: -10%;
        bottom: 15%;
    }

    22% {
        transform: translateX(40px) translateY(35px) rotate(0deg);
        right: 12%;
        bottom: 10%;
    }

    45% {
        transform: translateX(-10px) translateY(-25px) rotate(0deg);
        right: 35%;
        bottom: 25%;
    }

    68% {
        transform: translateX(-70px) translateY(20px) rotate(0deg);
        right: 58%;
        bottom: 12%;
    }

    90% {
        transform: translateX(-130px) translateY(-10px) rotate(0deg);
        right: 80%;
        bottom: 18%;
    }

    100% {
        transform: translateX(-210px) translateY(0px) rotate(0deg);
        right: 110%;
        bottom: 15%;
    }
}

/* Ship with Wave Effects */
.transport-ship {
    bottom: 10%;
    left: -15%;
    animation: shipMovement 25s infinite linear;
    font-size: 2.2rem;
    color: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

/* Satellite Icon */
.transport-satellite {
    top: 8%;
    right: -10%;
    animation: satelliteOrbit 30s infinite linear;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.6);
    z-index: 1;
}

/* Wave Effects for Ship */
.wave-effects {
    position: absolute;
    bottom: -5px;
    left: -20px;
    width: 60px;
    height: 8px;
    background: transparent;
    z-index: -1;
}

.wave-effects::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
    border-radius: 50%;
    animation: wave1 2s infinite ease-in-out;
}

.wave-effects::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 10px;
    width: 80%;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
    border-radius: 50%;
    animation: wave2 2.5s infinite ease-in-out;
}

@keyframes wave1 {

    0%,
    100% {
        transform: scaleX(1) scaleY(1);
        opacity: 0.3;
    }

    50% {
        transform: scaleX(1.5) scaleY(0.8);
        opacity: 0.6;
    }
}

@keyframes wave2 {

    0%,
    100% {
        transform: scaleX(1) scaleY(1);
        opacity: 0.2;
    }

    50% {
        transform: scaleX(1.3) scaleY(1.2);
        opacity: 0.4;
    }
}

/* Ship Movement Animation */
@keyframes shipMovement {
    0% {
        transform: translateX(-150px) translateY(0px) rotate(0deg);
        left: -15%;
        bottom: 10%;
    }

    20% {
        transform: translateX(-50px) translateY(-20px) rotate(5deg);
        left: 5%;
        bottom: 12%;
    }

    40% {
        transform: translateX(50px) translateY(15px) rotate(-3deg);
        left: 30%;
        bottom: 8%;
    }

    60% {
        transform: translateX(150px) translateY(-25px) rotate(7deg);
        left: 55%;
        bottom: 15%;
    }

    80% {
        transform: translateX(250px) translateY(10px) rotate(-2deg);
        left: 80%;
        bottom: 6%;
    }

    100% {
        transform: translateX(350px) translateY(0px) rotate(0deg);
        left: 115%;
        bottom: 10%;
    }
}

/* Satellite Orbit Animation */
@keyframes satelliteOrbit {
    0% {
        transform: translateX(100px) translateY(0px) rotate(0deg);
        right: -10%;
        top: 8%;
    }

    25% {
        transform: translateX(0px) translateY(-40px) rotate(90deg);
        right: 25%;
        top: 3%;
    }

    50% {
        transform: translateX(-100px) translateY(0px) rotate(180deg);
        right: 50%;
        top: 8%;
    }

    75% {
        transform: translateX(0px) translateY(40px) rotate(270deg);
        right: 75%;
        top: 15%;
    }

    100% {
        transform: translateX(100px) translateY(0px) rotate(360deg);
        right: 110%;
        top: 8%;
    }
}

/* Multiple Ships Positioning */
.transport-ship-1 {
    bottom: 15%;
    left: -15%;
    animation: shipMovement1 22s infinite linear;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.7);
    z-index: 1;
}

.transport-ship-2 {
    bottom: 35%;
    left: -20%;
    animation: shipMovement2 28s infinite linear;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.6);
    z-index: 1;
}

.transport-cargo-ship {
    bottom: 8%;
    left: -25%;
    animation: cargoShipMovement 35s infinite linear;
    font-size: 2.2rem;
    color: rgba(255, 255, 255, 0.8);
    z-index: 1;
}

/* Multiple Satellites Positioning */
.transport-satellite-1 {
    top: 12%;
    right: -10%;
    animation: satelliteOrbit1 25s infinite linear;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.7);
    z-index: 1;
}

.transport-satellite-2 {
    top: 25%;
    left: 5%;
    animation: satelliteOrbit2 32s infinite linear;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.8);
    z-index: 1;
}

.transport-satellite-3 {
    top: 15%;
    right: 10%;
    animation: satelliteOrbit3 40s infinite linear;
    font-size: 1.9rem;
    color: rgba(255, 255, 255, 0.9);
    z-index: 1;
}

.transport-satellite-4 {
    top: 8%;
    left: 40%;
    animation: satelliteOrbit4 28s infinite linear;
    font-size: 1.7rem;
    color: rgba(255, 255, 255, 0.75);
    z-index: 1;
}

.transport-satellite-5 {
    bottom: 25%;
    right: 25%;
    animation: satelliteOrbit5 35s infinite linear;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.85);
    z-index: 1;
}

/* Location Tracking Icons */
.location-gps {
    top: 35%;
    left: 8%;
    animation: floatGently 8s infinite ease-in-out;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.6);
    z-index: 1;
}

.location-route {
    top: 60%;
    right: 12%;
    animation: slideSubtle 10s infinite ease-in-out;
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

.location-compass {
    bottom: 60%;
    left: 25%;
    animation: gentleSway 12s infinite ease-in-out;
    font-size: 1.9rem;
    color: rgba(255, 255, 255, 0.55);
    z-index: 1;
}

.location-radar {
    top: 45%;
    right: 30%;
    animation: subtleBounce 9s infinite ease-in-out;
    font-size: 1.7rem;
    color: rgba(255, 255, 255, 0.6);
    z-index: 1;
}

.location-globe {
    bottom: 45%;
    right: 8%;
    animation: softFloat 15s infinite ease-in-out;
    font-size: 2.1rem;
    color: rgba(255, 255, 255, 0.65);
    z-index: 1;
}

/* Ship Movement Animations */
@keyframes shipMovement1 {
    0% {
        transform: translateX(-120px) translateY(0px) rotate(3deg);
        left: -15%;
        bottom: 15%;
    }

    25% {
        transform: translateX(0px) translateY(-15px) rotate(-2deg);
        left: 20%;
        bottom: 18%;
    }

    50% {
        transform: translateX(120px) translateY(20px) rotate(5deg);
        left: 50%;
        bottom: 12%;
    }

    75% {
        transform: translateX(240px) translateY(-10px) rotate(-1deg);
        left: 80%;
        bottom: 16%;
    }

    100% {
        transform: translateX(360px) translateY(0px) rotate(3deg);
        left: 115%;
        bottom: 15%;
    }
}

@keyframes shipMovement2 {
    0% {
        transform: translateX(-150px) translateY(0px) rotate(-2deg);
        left: -20%;
        bottom: 35%;
    }

    30% {
        transform: translateX(-20px) translateY(25px) rotate(4deg);
        left: 15%;
        bottom: 30%;
    }

    60% {
        transform: translateX(100px) translateY(-20px) rotate(-3deg);
        left: 45%;
        bottom: 40%;
    }

    100% {
        transform: translateX(300px) translateY(0px) rotate(-2deg);
        left: 115%;
        bottom: 35%;
    }
}

@keyframes cargoShipMovement {
    0% {
        transform: translateX(-180px) translateY(0px) rotate(1deg);
        left: -25%;
        bottom: 8%;
    }

    20% {
        transform: translateX(-60px) translateY(-25px) rotate(-4deg);
        left: 10%;
        bottom: 12%;
    }

    45% {
        transform: translateX(80px) translateY(30px) rotate(6deg);
        left: 35%;
        bottom: 5%;
    }

    70% {
        transform: translateX(220px) translateY(-15px) rotate(-2deg);
        left: 65%;
        bottom: 10%;
    }

    100% {
        transform: translateX(400px) translateY(0px) rotate(1deg);
        left: 120%;
        bottom: 8%;
    }
}

/* Satellite Orbit Animations */
@keyframes satelliteOrbit1 {
    0% {
        transform: translateX(80px) translateY(0px) rotate(0deg);
        right: -10%;
        top: 12%;
    }

    25% {
        transform: translateX(20px) translateY(-30px) rotate(90deg);
        right: 20%;
        top: 8%;
    }

    50% {
        transform: translateX(-60px) translateY(0px) rotate(180deg);
        right: 45%;
        top: 12%;
    }

    75% {
        transform: translateX(20px) translateY(30px) rotate(270deg);
        right: 70%;
        top: 18%;
    }

    100% {
        transform: translateX(80px) translateY(0px) rotate(360deg);
        right: 110%;
        top: 12%;
    }
}

@keyframes satelliteOrbit2 {
    0% {
        transform: translateX(-50px) translateY(0px) rotate(0deg);
        left: 5%;
        top: 25%;
    }

    30% {
        transform: translateX(20px) translateY(-25px) rotate(108deg);
        left: 25%;
        top: 18%;
    }

    60% {
        transform: translateX(80px) translateY(0px) rotate(216deg);
        left: 50%;
        top: 25%;
    }

    100% {
        transform: translateX(150px) translateY(0px) rotate(360deg);
        left: 80%;
        top: 25%;
    }
}

@keyframes satelliteOrbit3 {
    0% {
        transform: translateX(0px) translateY(0px) rotate(0deg);
        right: 10%;
        top: 15%;
    }

    25% {
        transform: translateX(-30px) translateY(-20px) rotate(90deg);
        right: 20%;
        top: 10%;
    }

    50% {
        transform: translateX(-60px) translateY(0px) rotate(180deg);
        right: 35%;
        top: 15%;
    }

    75% {
        transform: translateX(-30px) translateY(20px) rotate(270deg);
        right: 50%;
        top: 20%;
    }

    100% {
        transform: translateX(0px) translateY(0px) rotate(360deg);
        right: 65%;
        top: 15%;
    }
}

@keyframes satelliteOrbit4 {
    0% {
        transform: translateX(-30px) translateY(0px) rotate(0deg);
        left: 40%;
        top: 8%;
    }

    20% {
        transform: translateX(-10px) translateY(-20px) rotate(72deg);
        left: 50%;
        top: 5%;
    }

    40% {
        transform: translateX(15px) translateY(-10px) rotate(144deg);
        left: 65%;
        top: 8%;
    }

    60% {
        transform: translateX(25px) translateY(15px) rotate(216deg);
        left: 75%;
        top: 12%;
    }

    80% {
        transform: translateX(10px) translateY(25px) rotate(288deg);
        left: 85%;
        top: 15%;
    }

    100% {
        transform: translateX(-30px) translateY(0px) rotate(360deg);
        left: 95%;
        top: 8%;
    }
}

@keyframes satelliteOrbit5 {
    0% {
        transform: translateX(40px) translateY(0px) rotate(0deg);
        right: 25%;
        bottom: 25%;
    }

    30% {
        transform: translateX(15px) translateY(-30px) rotate(108deg);
        right: 15%;
        bottom: 35%;
    }

    60% {
        transform: translateX(-25px) translateY(-15px) rotate(216deg);
        right: 8%;
        bottom: 30%;
    }

    90% {
        transform: translateX(-10px) translateY(20px) rotate(324deg);
        right: 5%;
        bottom: 20%;
    }

    100% {
        transform: translateX(40px) translateY(0px) rotate(360deg);
        right: 3%;
        bottom: 25%;
    }
}

/* Gentle Location Icon Animations */
@keyframes floatGently {

    0%,
    100% {
        transform: translateY(0px) scale(1);
        opacity: 0.6;
    }

    25% {
        transform: translateY(-8px) scale(1.05);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-5px) scale(1.1);
        opacity: 1;
    }

    75% {
        transform: translateY(3px) scale(1.05);
        opacity: 0.8;
    }
}

@keyframes slideSubtle {

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

    33% {
        transform: translateX(-5px) translateY(-3px);
        opacity: 0.7;
    }

    66% {
        transform: translateX(3px) translateY(5px);
        opacity: 0.9;
    }
}

@keyframes gentleSway {

    0%,
    100% {
        transform: translateX(0px) rotate(0deg);
        opacity: 0.55;
    }

    25% {
        transform: translateX(-4px) rotate(-5deg);
        opacity: 0.7;
    }

    50% {
        transform: translateX(0px) rotate(0deg);
        opacity: 0.85;
    }

    75% {
        transform: translateX(4px) rotate(5deg);
        opacity: 0.7;
    }
}

@keyframes subtleBounce {

    0%,
    100% {
        transform: translateY(0px) scale(1);
        opacity: 0.6;
    }

    20% {
        transform: translateY(-6px) scale(1.03);
        opacity: 0.8;
    }

    40% {
        transform: translateY(-3px) scale(1.06);
        opacity: 1;
    }

    60% {
        transform: translateY(-8px) scale(1.03);
        opacity: 0.8;
    }

    80% {
        transform: translateY(-2px) scale(1.01);
        opacity: 0.7;
    }
}

@keyframes softFloat {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.65;
    }

    20% {
        transform: translateY(-10px) translateX(-3px) rotate(72deg);
        opacity: 0.8;
    }

    40% {
        transform: translateY(-6px) translateX(4px) rotate(144deg);
        opacity: 0.9;
    }

    60% {
        transform: translateY(-12px) translateX(-2px) rotate(216deg);
        opacity: 0.85;
    }

    80% {
        transform: translateY(-4px) translateX(3px) rotate(288deg);
        opacity: 0.75;
    }
}

/* Location Tracking Animations */
@keyframes pulseGPS {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}

@keyframes routeTrace {
    0% {
        opacity: 0.3;
        transform: translateX(0px);
    }

    25% {
        opacity: 0.8;
        transform: translateX(-10px);
    }

    50% {
        opacity: 1;
        transform: translateX(5px);
    }

    75% {
        opacity: 0.6;
        transform: translateX(-5px);
    }

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

@keyframes compassSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes radarSweep {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.4;
    }

    25% {
        transform: rotate(90deg) scale(1.1);
        opacity: 0.8;
    }

    50% {
        transform: rotate(180deg) scale(1);
        opacity: 1;
    }

    75% {
        transform: rotate(270deg) scale(1.1);
        opacity: 0.6;
    }

    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.4;
    }
}

@keyframes globeRotate {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

.element {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: floatElement 20s infinite ease-in-out;
}

.element-1 {
    width: 120px;
    height: 120px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.element-2 {
    width: 180px;
    height: 180px;
    top: 60%;
    right: 15%;
    animation-delay: 7s;
}

.element-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 70%;
    animation-delay: 14s;
}

@keyframes floatIcon {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
        opacity: 0.25;
    }

    25% {
        transform: translateY(-15px) translateX(8px) rotate(90deg) scale(1.1);
        opacity: 0.35;
    }

    50% {
        transform: translateY(-8px) translateX(-12px) rotate(180deg) scale(0.95);
        opacity: 0.15;
    }

    75% {
        transform: translateY(12px) translateX(5px) rotate(270deg) scale(1.05);
        opacity: 0.30;
    }
}

/* Gentle Floating Animations for Math Icons */
@keyframes gentleFloat1 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.5;
    }

    33% {
        transform: translateY(-25px) translateX(-15px) scale(1.05);
        opacity: 0.7;
    }

    66% {
        transform: translateY(20px) translateX(18px) scale(0.95);
        opacity: 0.6;
    }
}

@keyframes gentleFloat2 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.45;
    }

    25% {
        transform: translateY(-20px) translateX(22px) scale(1.03);
        opacity: 0.65;
    }

    75% {
        transform: translateY(28px) translateX(-16px) scale(0.98);
        opacity: 0.55;
    }
}

@keyframes gentleFloat3 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.5;
    }

    40% {
        transform: translateY(-30px) translateX(20px) scale(1.04);
        opacity: 0.7;
    }

    80% {
        transform: translateY(25px) translateX(-24px) scale(0.96);
        opacity: 0.6;
    }
}

@keyframes gentleFloat4 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.4;
    }

    30% {
        transform: translateY(-22px) translateX(-26px) scale(1.06);
        opacity: 0.65;
    }

    70% {
        transform: translateY(32px) translateX(19px) scale(0.97);
        opacity: 0.5;
    }
}

@keyframes gentleFloat5 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.45;
    }

    50% {
        transform: translateY(-18px) translateX(-12px) scale(1.02);
        opacity: 0.68;
    }
}

/* Gentle Floating Animations for Package Icons */
@keyframes packageFloat1 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.5;
    }

    35% {
        transform: translateY(-24px) translateX(28px) scale(1.03);
        opacity: 0.7;
    }

    70% {
        transform: translateY(20px) translateX(-22px) scale(0.98);
        opacity: 0.6;
    }
}

@keyframes packageFloat2 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.45;
    }

    20% {
        transform: translateY(-35px) translateX(-18px) scale(1.04);
        opacity: 0.65;
    }

    60% {
        transform: translateY(30px) translateX(25px) scale(0.97);
        opacity: 0.55;
    }
}

@keyframes packageFloat3 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.4;
    }

    45% {
        transform: translateY(-20px) translateX(30px) scale(1.05);
        opacity: 0.68;
    }

    85% {
        transform: translateY(35px) translateX(-15px) scale(0.95);
        opacity: 0.5;
    }
}

@keyframes packageFloat4 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.5;
    }

    28% {
        transform: translateY(-28px) translateX(-20px) scale(1.02);
        opacity: 0.72;
    }

    72% {
        transform: translateY(26px) translateX(24px) scale(0.99);
        opacity: 0.58;
    }
}

@keyframes packageFloat5 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.45;
    }

    38% {
        transform: translateY(-16px) translateX(20px) scale(1.01);
        opacity: 0.65;
    }

    76% {
        transform: translateY(22px) translateX(-28px) scale(0.96);
        opacity: 0.52;
    }
}

@keyframes floatElement {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }

    33% {
        transform: translateY(-30px) rotate(120deg) scale(1.1);
    }

    66% {
        transform: translateY(20px) rotate(240deg) scale(0.9);
    }
}

.hero-content {
    text-align: center;
    color: white;
    z-index: 2;
    position: relative;
    max-width: 600px;
    padding: 0 2rem;
}

.hero-icon {
    margin: 0;
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.hero-icon>i {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.9);
    animation: pulse 2s infinite;
}

.floating-calculator {
    position: absolute;
    top: -20px;
    right: -30px;
    width: 40px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    animation: floatCalc 3s ease-in-out infinite;
}

.calculator-display {
    height: 12px;
    background: rgba(255, 255, 255, 0.3);
    margin: 4px;
    border-radius: 2px;
}

.calculator-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 4px;
}

.calc-btn {
    height: 8px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 1px;
}

@keyframes floatCalc {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

.quote-hero .hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
}

.quote-hero .hero-subtitle {
    font-size: 1.25rem;
    font-weight: 500;
    color: #ffffff !important;
    opacity: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    line-height: 1.6;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.25rem;
    font-weight: 500;
    opacity: 0.95;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    line-height: 1.6;
}

/* Quote Calculator Section */
.quote-calculator-section {
    padding: 0 0 0 0;
    position: relative;
    margin-top: -2rem;
    margin-bottom: -1rem;
}

.quote-progress {
    display: flex;
    justify-content: center;
    margin-bottom: 4rem;
    position: relative;
}

.quote-progress::before {
    content: '';
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 2px;
    background: linear-gradient(to right,
            var(--primary-color) 0%,
            rgba(172, 25, 41, 0.3) 50%,
            rgba(172, 25, 41, 0.1) 100%);
    z-index: 0;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    margin: 0 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.progress-step:hover {
    transform: translateY(-2px);
}

.step-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.1), rgba(172, 25, 41, 0.05));
    border: 3px solid rgba(172, 25, 41, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-secondary);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    margin-bottom: 0.75rem;
}

.progress-step.active .step-number {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-color: var(--primary-color);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(172, 25, 41, 0.3);
}

.step-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.progress-step.active .step-label {
    color: var(--primary-color);
}

/* ===== MODERN QUOTE PAGE STYLES ===== */

/* Modern Progress Bar */
.modern-progress-wrapper {
    display: none;
    margin-bottom: 3rem;
    padding: 0 2rem;
}

.progress-bar-container {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(172, 25, 41, 0.1);
}

.progress-bar {
    height: 8px;
    background: rgba(172, 25, 41, 0.1);
    border-radius: 50px;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    border-radius: 50px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

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

.progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.step-dot i {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(172, 25, 41, 0.1);
    color: var(--text-secondary);
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.step-dot.active i {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(172, 25, 41, 0.3);
}

.step-dot span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.step-dot.active span {
    color: var(--primary-color);
}

/* Modern Layout Container */
.quote-layout-modern {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 3rem;
    align-items: start;
}

/* Single Panel Layout */
.quote-layout-single {
    display: flex;
    justify-content: center;
    align-items: start;
}

/* Form Panel Full Width */
.form-panel-full {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.08),
        0 8px 25px rgba(172, 25, 41, 0.05);
    border: 1px solid rgba(172, 25, 41, 0.1);
    backdrop-filter: blur(20px);
    width: 100%;
    max-width: 900px;
}

/* Form Panel */
.form-panel {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.08),
        0 8px 25px rgba(172, 25, 41, 0.05);
    border: 1px solid rgba(172, 25, 41, 0.1);
    backdrop-filter: blur(20px);
}

.form-panel-full {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.97) 100%);
    border-radius: 28px;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.12),
        0 10px 35px rgba(191, 219, 254, 0.15);
    border: 2px solid rgba(191, 219, 254, 0.2);
    backdrop-filter: blur(20px);
    width: 100%;
    max-width: 900px;
}

.panel-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #ac1929 100%);
    color: white;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
}

/* Section Heading Styles */
.section-heading-wrapper {
    text-align: center;
    margin-bottom: 2.5rem;
}

.section-main-heading {
    font-size: 2rem;
    font-weight: 700;
    color: #1e3a8a;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.5px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.panel-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 2;
}

.panel-title h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 0.3rem 0;
    color: white;
}

.panel-title p {
    margin: 0;
    opacity: 0.9;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Modern Form */
.modern-form {
    padding: 0;
}

.form-card {
    padding: 2rem;
    display: none;
    animation: fadeInUp 0.6s ease;
}

.form-card.active {
    display: block;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.card-header {
    display: none;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
    min-height: auto;
}

.form-card .card-header {
    display: none !important;
}

.card-icon {
    width: 50px;
    height: 50px;
    background: #e0e7ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e3a8a;
    font-size: 1.3rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    flex-shrink: 0;
    z-index: 10;
    position: relative;
}

.card-title {
    flex: 1;
}

.card-title h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.2rem 0;
    color: #1e3a8a;
}

.card-title span {
    color: var(--text-secondary);
    font-size: 1rem;
}

.card-body {
    margin-bottom: 1.5rem;
}

/* Section Styles */
.section-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    padding-bottom: 0;
    border-bottom: none;
}

.section-title i {
    color: #3b82f6;
    font-size: 1.4rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Location Section */
.location-section {
    margin-bottom: 2rem;
    padding: 1.5rem 0;
    background: transparent;
    border-radius: 0;
    border: none;
}

.location-inputs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: end;
    margin-bottom: 0.5rem;
}

.location-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.location-group label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
}

.smart-input {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 12px;
    border: 2px solid rgba(191, 219, 254, 0.2);
    transition: all 0.3s ease;
    overflow: hidden;
}

.smart-input i.fas {
    position: absolute;
    left: 1.2rem;
    font-size: 1.1rem;
    z-index: 2;
}

.smart-input i.origin {
    color: #10b981;
}

.smart-input i.destination {
    color: var(--primary-color);
}

.smart-input input {
    flex: 1;
    height: 56px;
    padding: 0 4rem 0 3rem;
    border: 2px solid rgba(30, 58, 138, 0.1);
    border-radius: 14px;
    background: white;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.smart-input input:focus {
    border-color: #bfdbfe;
    box-shadow: 0 0 0 4px rgba(191, 219, 254, 0.3);
    outline: none;
}

.location-btn {
    display: none;
    position: absolute;
    right: 10px;
    width: 40px;
    height: 40px;
    border: none;
    background: #3b82f6;
    color: white;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.location-btn:hover {
    background: #1e3a8a;
    transform: scale(1.05);
}

.route-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 56px;
    justify-content: center;
    position: relative;
    margin: 0.5rem 0;
}

.line {
    width: 2px;
    height: 35px;
    background: linear-gradient(to bottom, #10b981, var(--primary-color));
    border-radius: 2px;
}

.swap-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border: 2px solid rgba(147, 197, 253, 0.4);
    background: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1rem;
    color: #60a5fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

.swap-btn:hover {
    background: #60a5fa;
    color: white;
    transform: translate(-50%, -50%) rotate(180deg);
    box-shadow: 0 4px 15px rgba(96, 165, 250, 0.3);
}

.route-info {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
}

.info-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #065f46;
}

.info-card i {
    color: #10b981;
}

.info-card span {
    font-size: 0.9rem;
}

/* Package Specifications */
.package-specs {
    margin-bottom: 2rem;
    padding: 0;
}

.specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.spec-card {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.spec-card::before {
    display: none;
}

.spec-card:hover {
    border-color: #3b82f6;
    background: #f0f9ff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
}

.spec-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.spec-header i {
    color: #3b82f6;
    font-size: 1.2rem;
}

.spec-header label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.optional {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 400;
    display: block;
    margin-top: 0.2rem;
}

/* Weight Input */
.weight-input-modern {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.weight-input-modern input {
    flex: 1;
    height: 50px;
    padding: 0 1.2rem;
    border: 2px solid rgba(172, 25, 41, 0.1);
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 600;
    background: white;
    transition: all 0.3s ease;
    min-width: 0;
    box-sizing: border-box;
}

.weight-input-modern input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(172, 25, 41, 0.1);
    outline: none;
}

.weight-input-modern select {
    height: 50px;
    padding: 0 1.2rem;
    border: 2px solid rgba(172, 25, 41, 0.1);
    border-radius: 10px;
    background: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 80px;
}

.visual-slider {
    margin-top: 0.8rem;
}

.visual-slider input[type="range"] {
    width: 100%;
    height: 6px;
    background: rgba(147, 197, 253, 0.2);
    border-radius: 3px;
    outline: none;
    appearance: none;
    appearance: none;
    appearance: none;
    -webkit-appearance: none;
}

.visual-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.visual-slider input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #f97316;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.3);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Dimensions */
.dimensions-modern {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dimension-input {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.dimension-input input {
    width: 60px;
    height: 40px;
    padding: 0 0.5rem;
    border: 2px solid rgba(172, 25, 41, 0.1);
    border-radius: 6px;
    text-align: center;
    font-size: 0.9rem;
    background: white;
    transition: all 0.3s ease;
}

.dimension-input input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.dimension-input span {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Package Type Selector */
.package-type-section {
    margin-bottom: 1.5rem;
}

.type-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
}

.type-option {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.8rem 0.4rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.type-option:hover {
    border-color: #3b82f6;
    background: #f0f9ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.type-option.active {
    border-color: #ac1929;
    background: #fef2f2;
    box-shadow: 0 4px 12px rgba(172, 25, 41, 0.2);
}

.type-icon {
    width: 36px;
    height: 36px;
    background: #e0e7ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.type-option.active .type-icon {
    background: #fecaca;
    color: #ac1929;
}

.type-option span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.type-option.active span {
    color: #ac1929;
}

/* Value Section */
.value-section {
    margin-bottom: 1.5rem;
}

.value-input {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.currency-input {
    position: relative;
    display: flex;
    align-items: center;
}

.currency-symbol {
    position: absolute;
    left: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    z-index: 2;
}

.currency-input input {
    width: 100%;
    height: 50px;
    padding: 0 1rem 0 2.5rem;
    border: 2px solid rgba(172, 25, 41, 0.1);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    background: white;
    transition: all 0.3s ease;
}

.currency-input input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(172, 25, 41, 0.1);
    outline: none;
}

.value-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.value-info i {
    color: var(--primary-color);
}

/* Card Actions */
.card-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(191, 219, 254, 0.2);
}

/* Modern Buttons */
.btn-modern {
    padding: 0.8rem 1.8rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s;
}

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

.btn-modern.primary {
    background: linear-gradient(135deg, #1e3a8a 0%, #ac1929 100%);
    color: white;
    box-shadow: 0 6px 15px rgba(30, 58, 138, 0.25);
}

.btn-modern.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(172, 25, 41, 0.3);
}

.btn-modern.secondary {
    background: #e0e7ff;
    color: #1e3a8a;
    border: 2px solid #3b82f6;
}

.btn-modern.secondary:hover {
    background: #3b82f6;
    color: white;
    transform: translateY(-1px);
    border-color: #3b82f6;
}

.btn-modern.outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid rgba(172, 25, 41, 0.3);
}

.btn-modern.outline:hover {
    background: rgba(172, 25, 41, 0.05);
    border-color: var(--primary-color);
}

.btn-modern.large {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

/* Mixed Blue-Maroon Theme Animations */
@keyframes colorShift {
    0% {
        border-color: rgba(147, 197, 253, 0.2);
    }

    33% {
        border-color: rgba(249, 115, 22, 0.2);
    }

    66% {
        border-color: rgba(147, 197, 253, 0.3);
    }

    100% {
        border-color: rgba(249, 115, 22, 0.2);
    }
}

@keyframes iconColorShift {
    0% {
        color: #60a5fa;
    }

    50% {
        color: #f97316;
    }

    100% {
        color: #60a5fa;
    }
}

@keyframes backgroundShift {
    0% {
        background: linear-gradient(135deg, rgba(147, 197, 253, 0.08), rgba(249, 115, 22, 0.02));
    }

    50% {
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(147, 197, 253, 0.02));
    }

    100% {
        background: linear-gradient(135deg, rgba(147, 197, 253, 0.08), rgba(249, 115, 22, 0.02));
    }
}

@keyframes headerShift {
    0% {
        background: linear-gradient(135deg, #1e3a8a 0%, #ac1929 100%);
    }

    25% {
        background: linear-gradient(135deg, #3b82f6 0%, #ac1929 100%);
    }

    50% {
        background: linear-gradient(135deg, #1e3a8a 0%, #c41e3a 100%);
    }

    75% {
        background: linear-gradient(135deg, #3b82f6 0%, #ac1929 100%);
    }

    100% {
        background: linear-gradient(135deg, #1e3a8a 0%, #ac1929 100%);
    }
}

@keyframes cardIconShift {
    0% {
        background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
        transform: scale(1);
    }

    25% {
        background: linear-gradient(135deg, #3b82f6 0%, #ac1929 100%);
        box-shadow: 0 8px 20px rgba(172, 25, 41, 0.3);
        transform: scale(1.05);
    }

    50% {
        background: linear-gradient(135deg, #ac1929 0%, #1e3a8a 100%);
        box-shadow: 0 8px 20px rgba(172, 25, 41, 0.3);
        transform: scale(1.1);
    }

    75% {
        background: linear-gradient(135deg, #1e3a8a 0%, #ac1929 100%);
        box-shadow: 0 8px 20px rgba(172, 25, 41, 0.2);
        transform: scale(1.05);
    }

    100% {
        background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
        transform: scale(1);
    }
}

@keyframes borderShift {
    0% {
        border-color: rgba(59, 130, 246, 0.2);
    }

    50% {
        border-color: rgba(172, 25, 41, 0.2);
    }

    100% {
        border-color: rgba(59, 130, 246, 0.2);
    }
}

@keyframes buttonShift {
    0% {
        background: #3b82f6;
    }

    50% {
        background: #ac1929;
    }

    100% {
        background: #3b82f6;
    }
}

@keyframes textColorShift {
    0% {
        color: #3b82f6;
    }

    50% {
        color: #ac1929;
    }

    100% {
        color: #3b82f6;
    }
}

/* Apply mixed theme animations */
.form-panel-full {
    animation: colorShift 5s ease-in-out infinite;
}

.card-icon {
    animation: cardIconShift 3s ease-in-out infinite;
}

.spec-header i {
    animation: iconColorShift 2.5s ease-in-out infinite;
}

.smart-input input {
    animation: borderShift 4s ease-in-out infinite;
}

.location-btn {
    animation: buttonShift 3.5s ease-in-out infinite;
}

.swap-btn {
    animation: borderShift 3s ease-in-out infinite;
}

.spec-card {
    animation: borderShift 4.5s ease-in-out infinite;
}

.type-option {
    animation: borderShift 3.8s ease-in-out infinite;
}

.section-title i {
    animation: textColorShift 2.8s ease-in-out infinite;
}

.type-icon {
    animation: backgroundShift 3.2s ease-in-out infinite;
}

.btn-modern.primary {
    animation: cardIconShift 4s ease-in-out infinite;
}

.btn-modern.secondary {
    animation: borderShift 3.6s ease-in-out infinite;
}

.card-header {
    animation: borderShift 4.2s ease-in-out infinite;
}

.visual-slider input[type="range"]::-webkit-slider-thumb {
    animation: buttonShift 3.4s ease-in-out infinite;
}

.visual-slider input[type="range"]::-moz-range-thumb {
    animation: buttonShift 3.4s ease-in-out infinite;
}

.route-line .line {
    animation: backgroundShift 3.8s ease-in-out infinite;
}

.panel-header {
    animation: headerShift 4.5s ease-in-out infinite;
}

.panel-icon {
    animation: backgroundShift 3.2s ease-in-out infinite;
}

/* Quote Panel */
.quote-panel {
    position: sticky;
    top: 2rem;
    height: fit-content;
}

.quote-card {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(248, 250, 252, 0.98) 100%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.1),
        0 8px 25px rgba(172, 25, 41, 0.05);
    border: 1px solid rgba(172, 25, 41, 0.1);
    backdrop-filter: blur(20px);
}

.quote-header {
    background: linear-gradient(135deg, #bfdbfe 0%, #fca5a5 50%, #f8b4b4 100%);
    color: #1e293b;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.quote-icon {
    width: 45px;
    height: 45px;
    background: rgba(96, 165, 250, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #60a5fa;
}

.quote-title h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 0.3rem 0;
}

.quote-status {
    font-size: 0.9rem;
    opacity: 0.9;
}

.quote-content {
    padding: 2rem;
    min-height: 300px;
}

.quote-placeholder {
    text-align: center;
    color: var(--text-secondary);
}

.placeholder-icon {
    width: 80px;
    height: 80px;
    background: rgba(172, 25, 41, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: var(--primary-color);
}

.quote-placeholder p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    text-align: left;
}

.feature {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.9rem;
}

.feature i {
    color: #10b981;
    font-size: 1.2rem;
}

.quote-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid rgba(172, 25, 41, 0.1);
    background: rgba(248, 250, 252, 0.5);
}

.trust-badges {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.badge i {
    color: var(--primary-color);
    font-size: 1rem;
}

/* Live Quote Summary Styles */
.live-quote-summary {
    animation: fadeInUp 0.5s ease;
}

.quote-route {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(248, 250, 252, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(172, 25, 41, 0.1);
}

.route-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.route-item i.origin {
    color: #10b981;
}

.route-item i.destination {
    color: var(--primary-color);
}

.route-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.5rem 0;
    position: relative;
}

.connector-line {
    width: 2px;
    height: 30px;
    background: linear-gradient(to bottom, #10b981, var(--primary-color));
    border-radius: 2px;
}

.route-connector i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    color: var(--primary-color);
    padding: 0.3rem;
    border-radius: 50%;
    font-size: 0.8rem;
    border: 2px solid rgba(172, 25, 41, 0.2);
}

.quote-details {
    margin-bottom: 1.5rem;
}

.detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(172, 25, 41, 0.1);
}

.detail-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.detail-label i {
    color: var(--primary-color);
}

.detail-value {
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: capitalize;
}

.quote-breakdown {
    background: rgba(248, 250, 252, 0.5);
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

.breakdown-row.total {
    border-top: 2px solid rgba(172, 25, 41, 0.1);
    margin-top: 0.5rem;
    padding-top: 1rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-color);
}

.quote-actions {
    margin-top: 1.5rem;
}

.btn-modern.small {
    padding: 0.6rem 1.4rem;
    font-size: 0.9rem;
    width: 100%;
    justify-content: center;
}

/* Notification Styles */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-left: 4px solid var(--primary-color);
    transform: translateX(400px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    max-width: 350px;
}

.notification.show {
    transform: translateX(0);
}

.notification.success {
    border-left-color: #10b981;
}

.notification.error {
    border-left-color: #ef4444;
}

.notification.warning {
    border-left-color: #f59e0b;
}

.notification.info {
    border-left-color: var(--primary-color);
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.notification.success .notification-content i {
    color: #10b981;
}

.notification.error .notification-content i {
    color: #ef4444;
}

.notification.warning .notification-content i {
    color: #f59e0b;
}

.notification.info .notification-content i {
    color: var(--primary-color);
}

/* Error States - Simplified */
input.error,
select.error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Remove error message styles since we're not using them */

/* Service Selection Styles for Step 2 */
.service-speed-section {
    margin-bottom: 2.5rem;
}

.speed-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.service-option-modern {
    background: white;
    border: 2px solid rgba(172, 25, 41, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-option-modern:hover {
    border-color: rgba(172, 25, 41, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(172, 25, 41, 0.1);
}

.service-option-modern.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.05) 0%, rgba(172, 25, 41, 0.02) 100%);
    box-shadow: 0 8px 25px rgba(172, 25, 41, 0.15);
}

.service-option-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-option-modern.selected::before {
    opacity: 1;
}

.service-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.service-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

.service-time {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.service-price {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary-color);
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
}

.service-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.service-features li i {
    color: #10b981;
    font-size: 0.7rem;
}

/* Additional Services */
.additional-services-section {
    margin-bottom: 2rem;
}

.addon-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.addon-option {
    background: white;
    border: 2px solid rgba(172, 25, 41, 0.1);
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.addon-option:hover {
    border-color: rgba(172, 25, 41, 0.2);
}

.addon-option.selected {
    border-color: var(--primary-color);
    background: rgba(172, 25, 41, 0.05);
}

.addon-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(172, 25, 41, 0.3);
    border-radius: 4px;
    position: relative;
    transition: all 0.3s ease;
}

.addon-option.selected .addon-checkbox {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.addon-option.selected .addon-checkbox::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
}

.addon-info {
    flex: 1;
}

.addon-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.addon-description {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.addon-price {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .quote-layout-modern {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .quote-layout-single {
        padding: 0 1rem;
    }

    .form-panel-full {
        max-width: 100%;
        margin: 0 auto;
    }

    .quote-panel {
        position: relative;
        top: 0;
    }

    .specs-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .type-selector {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .location-inputs {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .route-line {
        display: none;
    }

    .specs-grid {
        grid-template-columns: 1fr;
    }

    .type-selector {
        grid-template-columns: 1fr;
    }

    .card-actions {
        flex-direction: column;
    }

    .modern-progress-wrapper {
        padding: 0 1rem;
    }

    .progress-bar-container {
        padding: 1.5rem;
    }

    .panel-header {
        padding: 2rem;
        flex-direction: column;
        text-align: center;
    }

    .form-card {
        padding: 2rem;
    }

    .form-panel-full {
        margin: 0;
        border-radius: 16px;
    }

    .quote-layout-single {
        padding: 0 0.5rem;
    }
}

/* Enhanced Form Container */
.quote-form-container.enhanced {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(248, 250, 252, 0.98) 100%);
    border-radius: 32px;
    padding: 3rem;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.08),
        0 8px 25px rgba(172, 25, 41, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(172, 25, 41, 0.06);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    align-items: start;
}

.quote-form-wrapper {
    min-width: 0;
}

.quote-form-container.enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 50%, #ff6b9d 100%);
    border-radius: 32px 32px 0 0;
}

/* Form Steps */
.form-step {
    display: none;
    animation: fadeInSlide 0.5s ease forwards;
}

.form-step.active {
    display: block;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.step-header {
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid rgba(172, 25, 41, 0.08);
}

.step-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.1), rgba(172, 25, 41, 0.05));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2rem;
    border: 2px solid rgba(172, 25, 41, 0.1);
    transition: all 0.3s ease;
}

.step-icon i {
    font-size: 2rem;
    color: var(--primary-color);
}

.step-content h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--text-primary), var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.step-content p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 500;
}

/* Form Grid */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Ensure equal width for all form groups */
.form-grid .form-group.enhanced {
    width: 100%;
    min-width: 0;
    /* Prevents grid items from overflowing */
}

/* Special grid layout for first row (pickup and destination) */
.form-grid .form-group.enhanced:nth-child(1),
.form-grid .form-group.enhanced:nth-child(2) {
    display: flex;
    flex-direction: column;
}

/* Weight and dimensions should also be side by side */
.form-grid .form-group.enhanced:nth-child(3),
.form-grid .form-group.enhanced:nth-child(4) {
    display: flex;
    flex-direction: column;
}

/* Package type and declared value should span full width */
.form-grid .form-group.enhanced:nth-child(5) {
    grid-column: 1 / -1;
}

.form-grid .form-group.enhanced:nth-child(6) {
    grid-column: 1 / -1;
}

/* Enhanced Form Groups */
.form-group.enhanced {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.form-group.enhanced label {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    position: relative;
}

.form-group.enhanced label::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 3px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 2px;
}

/* Input with Icon */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    border: 2px solid rgba(172, 25, 41, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    min-height: 56px;
    width: 100%;
    box-sizing: border-box;
}

.input-with-icon:focus-within {
    border-color: var(--primary-color);
    box-shadow:
        0 0 0 4px rgba(172, 25, 41, 0.08),
        0 8px 25px rgba(172, 25, 41, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.input-with-icon>i {
    margin: 0 1rem;
    color: var(--text-secondary);
    font-size: 1.1rem;
    transition: color 0.3s ease;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.input-with-icon:focus-within>i {
    color: var(--primary-color);
}

.input-with-icon input {
    flex: 1;
    padding: 1.2rem 0;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    outline: none;
    transition: all 0.3s ease;
    min-height: 24px;
    width: 100%;
    box-sizing: border-box;
}

.input-with-icon input::placeholder {
    color: var(--text-secondary);
    font-weight: 400;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.input-with-icon:focus-within input::placeholder {
    color: rgba(172, 25, 41, 0.5);
    opacity: 1;
}

.location-btn {
    display: none;
    background: rgba(172, 25, 41, 0.1);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin: 8px;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-sizing: border-box;
}

.location-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.05);
}

.location-btn i {
    font-size: 1rem;
}

/* Input with Unit */
.input-with-unit {
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    border: 2px solid rgba(172, 25, 41, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    min-height: 56px;
}

.input-with-unit:focus-within {
    border-color: var(--primary-color);
    box-shadow:
        0 0 0 4px rgba(172, 25, 41, 0.08),
        0 8px 25px rgba(172, 25, 41, 0.1);
    transform: translateY(-2px);
}

.input-with-unit input {
    flex: 1;
    padding: 1.2rem 1.5rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    outline: none;
    min-height: 24px;
}

.unit-selector {
    background: rgba(172, 25, 41, 0.05);
    border-left: 1px solid rgba(172, 25, 41, 0.1);
    display: flex;
    align-items: center;
}

.unit-selector select {
    padding: 1.2rem 1rem;
    border: none;
    background: transparent;
    color: var(--primary-color);
    font-weight: 600;
    outline: none;
    cursor: pointer;
    min-height: 24px;
}

/* Weight Slider */
.weight-slider {
    margin-top: 1rem;
}

.weight-slider input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right,
            var(--primary-color) 0%,
            rgba(172, 25, 41, 0.3) 100%);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.weight-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(172, 25, 41, 0.3);
}

.weight-slider input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 12px rgba(172, 25, 41, 0.3);
}

.range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Dimensions Input */
.dimensions-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dimension-field {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    border: 2px solid rgba(172, 25, 41, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.dimension-field input {
    flex: 1;
    padding: 1rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-weight: 500;
    outline: none;
    text-align: center;
}

.dimension-field span {
    padding: 0 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    background: rgba(172, 25, 41, 0.05);
    border-left: 1px solid rgba(172, 25, 41, 0.1);
}

.dimension-separator {
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* Package Types */
.package-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.package-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    border: 2px solid rgba(172, 25, 41, 0.08);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    text-align: center;
}

.package-option:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(172, 25, 41, 0.1);
    border-color: var(--primary-color);
}

.package-option.active {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-color: var(--primary-color);
    color: white;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(172, 25, 41, 0.3);
}

.package-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: rgba(172, 25, 41, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.package-option.active .package-icon {
    background: rgba(255, 255, 255, 0.2);
}

.package-icon i {
    font-size: 1.5rem;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.package-option.active .package-icon i {
    color: white;
}

.package-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.package-option.active .package-label {
    color: white;
}

/* Input with Currency */
.input-with-currency {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    border: 2px solid rgba(172, 25, 41, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.input-with-currency:focus-within {
    border-color: var(--primary-color);
    box-shadow:
        0 0 0 4px rgba(172, 25, 41, 0.08),
        0 8px 25px rgba(172, 25, 41, 0.1);
    transform: translateY(-2px);
}

.currency {
    padding: 0 1rem;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1rem;
    background: rgba(172, 25, 41, 0.05);
    border-right: 1px solid rgba(172, 25, 41, 0.1);
}

.input-with-currency input {
    flex: 1;
    padding: 1.2rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-weight: 500;
    outline: none;
}

/* Form Help */
.form-help {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.4;
}

.form-help i {
    color: var(--primary-color);
    opacity: 0.7;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* Distance Info */
.distance-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.05), rgba(172, 25, 41, 0.02));
    border: 1px solid rgba(172, 25, 41, 0.1);
    border-radius: 12px;
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.distance-info i {
    color: var(--primary-color);
}

/* Service Selection */
.service-selection {
    margin-bottom: 3rem;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.service-card {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(248, 250, 252, 0.98) 100%);
    border: 2px solid rgba(172, 25, 41, 0.08);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    cursor: pointer;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, transparent, transparent);
    transition: background 0.3s ease;
}

.service-card.popular {
    border-color: var(--primary-color);
    transform: scale(1.02);
}

.service-card.popular::before {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
}

.service-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(172, 25, 41, 0.1);
    border-color: rgba(172, 25, 41, 0.2);
}

.service-card.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg,
            rgba(172, 25, 41, 0.02) 0%,
            rgba(172, 25, 41, 0.01) 100%);
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(172, 25, 41, 0.15),
        0 8px 16px rgba(172, 25, 41, 0.1);
}

.service-card.selected::before {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
}

.popular-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse 2s infinite;
}

.service-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.service-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.1), rgba(172, 25, 41, 0.05));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.5rem;
    border: 2px solid rgba(172, 25, 41, 0.1);
    transition: all 0.3s ease;
}

.service-card.selected .service-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-color: var(--primary-color);
}

.service-icon i {
    font-size: 1.5rem;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.service-card.selected .service-icon i {
    color: white;
}

.service-info h4 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.service-info p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.service-details {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.detail-item i {
    color: var(--primary-color);
    font-size: 0.8rem;
}

.service-pricing {
    margin-bottom: 1.5rem;
}

.base-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.per-kg-price {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.calculated-price {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(172, 25, 41, 0.05);
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(172, 25, 41, 0.1);
}

.calculated-price strong {
    font-size: 1.4rem;
    color: var(--primary-color);
}

.select-service-btn {
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    border: 2px solid rgba(172, 25, 41, 0.2);
    border-radius: 12px;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.select-service-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(172, 25, 41, 0.3);
}

.select-service-btn.selected {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 8px 20px rgba(172, 25, 41, 0.3);
}

/* Additional Services */
.additional-services {
    margin-bottom: 3rem;
}

.additional-services h4 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 2rem;
    color: var(--text-primary);
    position: relative;
}

.additional-services h4::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 2px;
}

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

.additional-service-card {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(248, 250, 252, 0.98) 100%);
    border: 2px solid rgba(172, 25, 41, 0.08);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    cursor: pointer;
}

.additional-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
    border-color: rgba(172, 25, 41, 0.2);
}

.service-checkbox {
    margin-right: 1rem;
    position: relative;
}

.service-checkbox input[type="checkbox"] {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(172, 25, 41, 0.3);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.service-checkbox input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-color: var(--primary-color);
}

.service-checkbox input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: 700;
    font-size: 14px;
}

.service-checkbox label {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.service-content {
    display: flex;
    align-items: center;
    flex: 1;
}

.service-content .service-icon {
    width: 40px;
    height: 40px;
    margin-right: 1rem;
    font-size: 1rem;
}

.service-content .service-icon i {
    font-size: 1rem;
}

.service-info {
    flex: 1;
}

.service-info h5 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.service-info p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.service-price {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.95rem;
    white-space: nowrap;
    margin-left: 1rem;
}

/* Step Actions */
.step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 2px solid rgba(172, 25, 41, 0.08);
    gap: 1rem;
}

.btn-primary,
.btn-secondary,
.btn-outline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    text-decoration: none;
    border: 2px solid transparent;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(172, 25, 41, 0.3);
    filter: brightness(1.05);
}

.btn-secondary {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    border-color: rgba(172, 25, 41, 0.2);
    color: var(--primary-color);
}

.btn-secondary:hover {
    background: rgba(172, 25, 41, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.btn-outline {
    background: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

/* Quote Summary */
.quote-summary {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    border: 2px solid rgba(172, 25, 41, 0.08);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.quote-summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    border-radius: 20px 20px 0 0;
}

.quote-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(172, 25, 41, 0.08);
}

.quote-id strong {
    font-size: 1.2rem;
    color: var(--text-primary);
}

.quote-date {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.quote-sections {
    display: grid;
    gap: 2rem;
}

.quote-section h4 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quote-section h4::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 2px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(172, 25, 41, 0.02);
    border-radius: 10px;
    border: 1px solid rgba(172, 25, 41, 0.05);
}

.detail-item .label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.detail-item .value {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.selected-service {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: rgba(172, 25, 41, 0.02);
    border: 1px solid rgba(172, 25, 41, 0.08);
    border-radius: 12px;
}

.selected-service .service-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.selected-service .service-info i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.selected-service .service-info strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.selected-service .service-info p {
    color: var(--text-secondary);
    margin: 0;
}

.additional-services-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(172, 25, 41, 0.02);
    border-radius: 10px;
    border: 1px solid rgba(172, 25, 41, 0.05);
    font-weight: 600;
    color: var(--text-primary);
}

.service-item i {
    color: var(--primary-color);
    font-size: 0.9rem;
}

.pricing-breakdown {
    background: linear-gradient(135deg,
            rgba(172, 25, 41, 0.02) 0%,
            rgba(172, 25, 41, 0.01) 100%);
    border: 2px solid rgba(172, 25, 41, 0.08);
    border-radius: 16px;
    padding: 2rem;
}

.pricing-details {
    display: grid;
    gap: 0.75rem;
}

.pricing-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    font-size: 0.95rem;
}

.pricing-line.subtotal {
    border-top: 1px solid rgba(172, 25, 41, 0.1);
    border-bottom: 1px solid rgba(172, 25, 41, 0.1);
    margin: 0.5rem 0;
    font-weight: 600;
}

.pricing-line.total {
    font-size: 1.2rem;
    padding: 1rem 0;
    border-top: 2px solid var(--primary-color);
    margin-top: 0.5rem;
}

.pricing-line.total span:last-child {
    color: var(--primary-color);
    font-size: 1.4rem;
}

.quote-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid rgba(172, 25, 41, 0.08);
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    border: 2px solid rgba(172, 25, 41, 0.1);
    border-radius: 12px;
    color: var(--primary-color);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 0.9rem;
}

.action-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(172, 25, 41, 0.2);
}

/* Quick Quote Sidebar */
.quick-quote-sidebar {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    border: 2px solid rgba(172, 25, 41, 0.08);
    border-radius: 20px;
    padding: 2rem;
    height: fit-content;
    backdrop-filter: blur(20px);
    position: sticky;
    top: 2rem;
    align-self: start;
}

.sidebar-header {
    margin-bottom: 2rem;
    text-align: center;
}

.sidebar-header h4 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.quote-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.quote-status i {
    animation: spin 2s linear infinite;
    color: var(--primary-color);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.sidebar-content {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-placeholder {
    text-align: center;
    color: var(--text-secondary);
}

.summary-placeholder i {
    font-size: 3rem;
    color: rgba(172, 25, 41, 0.3);
    margin-bottom: 1rem;
}

.summary-placeholder p {
    font-weight: 600;
}

.quick-summary {
    width: 100%;
}

.service-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(172, 25, 41, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(172, 25, 41, 0.05);
}

.service-preview i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.service-preview strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.service-preview p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.price-preview {
    text-align: center;
}

.estimated-price {
    margin-bottom: 1rem;
}

.estimated-price span {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.estimated-price strong {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-color);
}

.price-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: rgba(172, 25, 41, 0.02);
    padding: 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(172, 25, 41, 0.05);
}

.price-note i {
    color: var(--primary-color);
    opacity: 0.7;
}

/* FAQ Section */
.quote-faq-section {
    padding: 6rem 0;
    background: linear-gradient(135deg,
            rgba(248, 250, 252, 0.5) 0%,
            rgba(255, 255, 255, 0.8) 100%);
}

.quote-faq-section .section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.quote-faq-section .section-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--text-primary), var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.quote-faq-section .section-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.faq-item {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(248, 250, 252, 0.98) 100%);
    border: 2px solid rgba(172, 25, 41, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.faq-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(172, 25, 41, 0.15);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: rgba(172, 25, 41, 0.02);
}

.faq-question h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.faq-question i {
    color: var(--primary-color);
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.faq-item.open .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    padding: 0 2rem 2rem 2rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-weight: 500;
    margin: 0;
}

/* Form Validation Styles */
.form-group.enhanced input.error,
.input-with-icon.error,
.input-with-unit.error,
.input-with-currency.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.field-error {
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    animation: shake 0.3s ease;
    line-height: 1.4;
}

.field-error::before {
    content: '⚠';
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

@keyframes shake {

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

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* Notification Styles */
.notification-container {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.notification {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-left: 4px solid;
    min-width: 300px;
    animation: slideInRight 0.3s ease forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

.notification.success {
    border-left-color: #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(34, 197, 94, 0.02));
}

.notification.error {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(239, 68, 68, 0.02));
}

.notification.warning {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(245, 158, 11, 0.02));
}

.notification.info {
    border-left-color: #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(59, 130, 246, 0.02));
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.notification-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.notification-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .quote-form-container.enhanced {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .quick-quote-sidebar {
        position: relative;
        top: 0;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .quote-form-container.enhanced {
        padding: 2rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Reset grid column spans for mobile */
    .form-grid .form-group.enhanced:nth-child(5),
    .form-grid .form-group.enhanced:nth-child(6) {
        grid-column: 1;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

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

    .step-actions {
        flex-direction: column;
        gap: 1rem;
    }

    .btn-primary,
    .btn-secondary,
    .btn-outline {
        width: 100%;
        justify-content: center;
    }

    .quote-progress {
        margin-bottom: 2rem;
    }

    .quote-progress::before {
        width: 200px;
    }

    .progress-step {
        margin: 0 1rem;
    }

    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .step-label {
        font-size: 0.8rem;
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .notification-container {
        top: 1rem;
        right: 1rem;
        left: 1rem;
    }

    .notification {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .quote-form-container.enhanced {
        padding: 1.5rem;
    }

    .step-header {
        flex-direction: column;
        text-align: center;
        margin-bottom: 2rem;
    }

    .step-icon {
        margin-right: 0;
        margin-bottom: 1rem;
        width: 60px;
        height: 60px;
    }

    .step-content h3 {
        font-size: 1.5rem;
    }

    .package-types {
        grid-template-columns: repeat(2, 1fr);
    }

    .dimensions-input {
        flex-direction: column;
        gap: 1rem;
    }

    .dimension-separator {
        display: none;
    }

    .service-details {
        flex-direction: column;
        gap: 0.75rem;
    }

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

    .quote-actions {
        flex-direction: column;
    }
}

.enhanced-services {
    background:
        linear-gradient(135deg,
            rgba(172, 25, 41, 0.02) 0%,
            rgba(147, 197, 253, 0.04) 25%,
            rgba(233, 30, 99, 0.03) 50%,
            rgba(191, 219, 254, 0.05) 75%,
            rgba(172, 25, 41, 0.02) 100%),
        radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(172, 25, 41, 0.05) 0%, transparent 50%);
    padding: 50px 0 100px 0;
    position: relative;
}

.enhanced-services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(172,25,41,0.02)"/><circle cx="75" cy="75" r="1" fill="rgba(59,130,246,0.02)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

.section-header-enhanced {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.section-header-enhanced .header-content {
    text-align: center;
    width: 100%;
}

.section-tag-enhanced {
    display: inline-block;
    background: linear-gradient(135deg,
            rgba(172, 25, 41, 0.1) 0%,
            rgba(59, 130, 246, 0.1) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ac1929;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(172, 25, 41, 0.2);
    margin-bottom: 20px;
}

.section-header-enhanced h2 {
    font-size: 3rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 20px;
    line-height: 1.2;
    background: linear-gradient(135deg, #ac1929 0%, #2563eb 50%, #e91e63 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header-enhanced p {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Service Tabs */
.service-tabs-container {
    display: flex;
    justify-content: center;
    margin: 30px 0 40px 0;
}

.service-tabs {
    display: inline-flex;
    background: rgba(241, 245, 249, 0.8);
    padding: 6px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.service-tab {
    padding: 14px 32px;
    border: none;
    background: transparent;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    white-space: nowrap;
}

.service-tab i {
    font-size: 1.1rem;
}

.service-tab:hover {
    color: #0f172a;
}

.service-tab.active {
    background: linear-gradient(135deg, #ac1929, #e91e63);
    color: white;
    box-shadow: 0 4px 15px rgba(172, 25, 41, 0.4);
}

.service-tab.active:hover {
    color: white;
}

/* Tab Content for Page Tabs (home-tab, services, etc) */
#home-tab.tab-content,
#services-tab.tab-content,
#contact-tab.tab-content {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

#home-tab.tab-content.active,
#services-tab.tab-content.active,
#contact-tab.tab-content.active {
    display: block;
}

/* Tab Content for Method Selector */
.method-tabs .tab-content {
    display: block !important;
}

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

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

/* Modern Zigzag Layout for Services */
.services-zigzag-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    position: relative;
    z-index: 2;
}

/* Zigzag Service Card */
.service-card-zigzag {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 24px;
    padding: 30px;
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.08),
        0 5px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.service-card-zigzag::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ac1929, #e91e63);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.service-card-zigzag:hover::before {
    opacity: 1;
}

.service-card-zigzag:hover {
    transform: translateY(-8px);
    box-shadow:
        0 30px 80px rgba(172, 25, 41, 0.12),
        0 10px 30px rgba(0, 0, 0, 0.06);
    border-color: rgba(172, 25, 41, 0.3);
}

/* Reverse layout for zigzag effect */
.service-card-zigzag.reverse {
    direction: rtl;
}

.service-card-zigzag.reverse>* {
    direction: ltr;
}

/* Zigzag Image Section */
.service-image-zigzag {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 400px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.service-image-zigzag img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: white;
}

.image-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #0f172a;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.image-badge i {
    font-size: 1.1rem;
    color: #ac1929;
}

.badge-blue i {
    color: #0ea5e9;
}

.badge-gold i {
    color: #f59e0b;
}

.badge-purple i {
    color: #8b5cf6;
}

/* Zigzag Content Section */
.service-content-zigzag {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.service-label-zigzag {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ac1929;
    background: rgba(172, 25, 41, 0.1);
    padding: 8px 16px;
    border-radius: 8px;
    align-self: flex-start;
}

.label-blue {
    color: #0ea5e9;
    background: rgba(14, 165, 233, 0.1);
}

.label-gold {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.label-purple {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

.service-title-zigzag {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin: 0;
}

.service-desc-zigzag {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

.service-features-zigzag {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 4px 0;
}

.feature-item-zigzag {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.8));
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s ease;
}

.feature-item-zigzag:hover {
    background: linear-gradient(135deg, rgba(241, 245, 249, 1), rgba(248, 250, 252, 1));
    transform: translateX(8px);
    border-color: rgba(172, 25, 41, 0.3);
}

.feature-item-zigzag i {
    font-size: 1.5rem;
    color: #ac1929;
    flex-shrink: 0;
}

.feature-item-zigzag div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feature-item-zigzag strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.feature-item-zigzag span {
    font-size: 0.8rem;
    color: #64748b;
}

/* Zigzag Buttons */
.btn-zigzag {
    padding: 12px 28px;
    border: none;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    align-self: flex-start;
    position: relative;
    overflow: hidden;
}

.btn-zigzag::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-zigzag:hover::before {
    width: 300px;
    height: 300px;
}

.btn-zigzag span,
.btn-zigzag i {
    position: relative;
    z-index: 1;
}

.btn-zigzag:hover i {
    transform: translateX(4px);
}

.btn-zigzag i {
    transition: transform 0.3s ease;
}

.btn-primary-zigzag {
    background: linear-gradient(135deg, #ac1929, #e91e63);
    color: white;
    box-shadow: 0 8px 25px rgba(172, 25, 41, 0.4);
}

.btn-primary-zigzag:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(172, 25, 41, 0.5);
}

.btn-blue-zigzag {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
    color: white;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4);
}

.btn-blue-zigzag:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(14, 165, 233, 0.5);
}

.btn-gold-zigzag {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: white;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

.btn-gold-zigzag:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(245, 158, 11, 0.5);
}

.btn-purple-zigzag {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    color: white;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.btn-purple-zigzag:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(139, 92, 246, 0.5);
}

/* Corporate Button Styles */
.btn-corporate-zigzag {
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
    box-shadow: 0 8px 25px rgba(5, 150, 105, 0.4);
}

.btn-corporate-zigzag:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(5, 150, 105, 0.5);
}

.btn-tech-zigzag {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    color: white;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.btn-tech-zigzag:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.5);
}

.btn-secure-zigzag {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: white;
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
}

.btn-secure-zigzag:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(220, 38, 38, 0.5);
}

.btn-payment-zigzag {
    background: linear-gradient(135deg, #ea580c, #f97316);
    color: white;
    box-shadow: 0 8px 25px rgba(234, 88, 12, 0.4);
}

.btn-payment-zigzag:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(234, 88, 12, 0.5);
}

.btn-industry-zigzag {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    color: white;
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4);
}

.btn-industry-zigzag:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(124, 58, 237, 0.5);
}

/* Corporate Label Styles */
.label-corporate {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

.label-tech {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.label-secure {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.label-payment {
    background: rgba(234, 88, 12, 0.1);
    color: #ea580c;
}

.label-industry {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

/* Corporate Badge Styles */
.badge-corporate i {
    color: #059669;
}

.badge-tech i {
    color: #3b82f6;
}

.badge-secure i {
    color: #dc2626;
}

.badge-payment i {
    color: #ea580c;
}

.badge-industry i {
    color: #7c3aed;
}

/* Old Styles - Keep for backward compatibility */
.service-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 24px;
    position: relative;
}

.service-number-badge-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.service-badge {
    background: linear-gradient(135deg, #ac1929, #e91e63);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(172, 25, 41, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

.service-badge.popular {
    background: linear-gradient(135deg, #10b981, #34d399);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.service-badge.reliable {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

.service-badge.express {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.service-badge.tracking {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.service-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ac1929, #2563eb);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.3rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 15px rgba(172, 25, 41, 0.4);
    flex-shrink: 0;
}

.service-type {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-left: 4px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-image {
    position: relative;
    height: 200px;
    overflow: hidden;
    margin: 0 24px 24px 24px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
    border-radius: 16px;
}

.service-card-simple:hover .service-image img {
    transform: scale(1.05);
}

.service-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
    border-radius: 16px;
}

.service-content {
    padding: 0 24px 24px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.service-title {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ac1929 0%, #2563eb 70%, #e91e63 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    line-height: 1.2;
}

.service-description {
    color: #1e293b;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 400;
}

.service-features {
    margin-bottom: 20px;
    flex: 1;
}

.service-features h4 {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-features h4 i {
    color: #ac1929;
    font-size: 1.1rem;
}

.features-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.9rem;
    color: #475569;
    padding: 10px 12px;
    background: rgba(248, 250, 252, 0.8);
    border-radius: 10px;
    transition: all 0.3s ease;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.feature:hover {
    background: rgba(241, 245, 249, 0.9);
    transform: translateX(3px);
    border-color: rgba(172, 25, 41, 0.3);
}

.service-card-simple .feature i {
    color: #ac1929;
    font-size: 1.5rem !important;
    margin-top: 1px;
    min-width: 22px;
}

.feature i {
    color: #ac1929;
    font-size: 1.3rem;
    margin-top: 1px;
    min-width: 20px;
}

.included-items {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    background: rgba(248, 250, 252, 0.6);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    max-height: none;
    overflow: visible;
}

.included-items li {
    color: #1e293b;
    font-size: 0.9rem;
    padding: 8px 0;
    padding-left: 24px;
    position: relative;
    transition: all 0.3s ease;
    font-weight: 500;
}

.included-items li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
    font-size: 1.1rem;
}

.included-items li:hover {
    color: #0f172a;
    padding-left: 28px;
}

.service-actions {
    display: flex;
    gap: 12px;
    margin-top: auto;
}

.btn-book-now,
.btn-learn-more {
    flex: 1;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-book-now {
    background: linear-gradient(135deg, #ac1929, #e91e63);
    color: white;
    box-shadow: 0 4px 15px rgba(172, 25, 41, 0.4);
    border: 2px solid transparent;
}

.btn-book-now:hover {
    background: linear-gradient(135deg, #991825, #d11a5b);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(172, 25, 41, 0.5);
}

.btn-learn-more {
    background: transparent;
    color: #ac1929;
    border: 2px solid #ac1929;
}

.btn-learn-more:hover {
    background: #ac1929;
    color: white;
    transform: translateY(-2px);
}

/* ===== MODERN SERVICE CARD STYLES ===== */

/* Floating Badge */
.service-badge-floating {
    display: none;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

.service-badge-floating.compact-badge {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4);
}

.service-badge-floating.premium-badge {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
}

.service-badge-floating.tracking-badge {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.premium-glow {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, transparent 70%);
}

.tracking-glow {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
}

/* Featured Card Visual Split Layout */
.service-visual-split {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.visual-content {
    flex: 0 0 220px;
    padding: 24px 24px 0 24px;
}

.service-image-modern {
    position: relative;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.service-image-modern img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-card-modern:hover .service-image-modern img {
    transform: scale(1.1) rotate(2deg);
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.overlay-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #ac1929;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.overlay-badge i {
    font-size: 1rem;
}

.text-content {
    flex: 1;
    padding: 32px 28px 28px 28px;
    display: flex;
    flex-direction: column;
}

.service-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ac1929;
    margin-bottom: 8px;
    background: rgba(172, 25, 41, 0.1);
    padding: 6px 12px;
    border-radius: 6px;
    align-self: flex-start;
}

.premium-label {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.service-title-modern {
    font-size: 2.25rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ac1929, #e91e63);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    line-height: 1.2;
}

.service-desc-modern {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 24px;
}

.service-highlights-modern {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.8));
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s ease;
}

.highlight-item:hover {
    background: linear-gradient(135deg, rgba(241, 245, 249, 1), rgba(248, 250, 252, 1));
    transform: translateX(8px);
    border-color: rgba(172, 25, 41, 0.3);
}

.highlight-item i {
    font-size: 2rem;
    color: #ac1929;
    flex-shrink: 0;
}

.highlight-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.highlight-text strong {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.highlight-text span {
    font-size: 0.85rem;
    color: #64748b;
}

/* Compact Card Styles */
.service-image-compact {
    position: relative;
    height: 220px;
    margin: 24px 24px 0 24px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.service-image-compact img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.service-card-modern:hover .service-image-compact img {
    transform: scale(1.08);
}

.compact-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
}

.premium-overlay {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), transparent);
}

.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.8rem;
    color: #0f172a;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.premium-pill {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(251, 191, 36, 0.95));
    color: white;
}

.stat-pill i {
    font-size: 0.9rem;
}

.service-content-compact {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.service-title-compact {
    font-size: 1.75rem;
    font-weight: 800;
    background: linear-gradient(135deg, #0f172a, #475569);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    line-height: 1.2;
}

.service-desc-compact {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(241, 245, 249, 0.9);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s ease;
}

.tag:hover {
    background: rgba(226, 232, 240, 1);
    transform: translateY(-2px);
}

.tag i {
    font-size: 0.75rem;
    color: #ac1929;
}

.premium-tag {
    background: rgba(254, 243, 199, 0.9);
    color: #92400e;
    border-color: rgba(251, 191, 36, 0.3);
}

.premium-tag i {
    color: #f59e0b;
}

/* Wide Card Horizontal Split */
.service-split-horizontal {
    display: flex;
    height: 100%;
}

.split-image {
    flex: 0 0 45%;
    position: relative;
    overflow: hidden;
    border-radius: 28px 0 0 28px;
}

.split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.service-card-modern:hover .split-image img {
    transform: scale(1.1);
}

.tech-badge-overlay {
    position: absolute;
    bottom: 24px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.tech-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.tech-badge-overlay span {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}

.split-content {
    flex: 1;
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.service-title-wide {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    line-height: 1.2;
}

.service-desc-wide {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 24px;
}

.tracking-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.tracking-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.8));
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    text-align: center;
    transition: all 0.3s ease;
}

.tracking-feature:hover {
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.5), rgba(191, 219, 254, 0.3));
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-4px);
}

.tracking-feature i {
    font-size: 2rem;
    color: #3b82f6;
}

.tracking-feature span {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

/* Modern Buttons */
.btn-modern {
    padding: 14px 28px;
    border: none;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: auto;
    position: relative;
    overflow: hidden;
}

.btn-modern::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-modern:hover::before {
    width: 300px;
    height: 300px;
}

.btn-modern span {
    position: relative;
    z-index: 1;
}

.btn-modern i {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.btn-modern:hover i {
    transform: translateX(4px);
}

.btn-primary-modern {
    background: linear-gradient(135deg, #ac1929, #e91e63);
    color: white;
    box-shadow: 0 8px 25px rgba(172, 25, 41, 0.4);
}

.btn-primary-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(172, 25, 41, 0.5);
}

.btn-secondary-modern {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
    color: white;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4);
}

.btn-secondary-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(14, 165, 233, 0.5);
}

.btn-premium-modern {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: white;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

.btn-premium-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(245, 158, 11, 0.5);
}

.btn-tracking-modern {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    color: white;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.btn-tracking-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.5);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .services-bento-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 15px;
    }

    .service-featured,
    .service-compact,
    .service-wide {
        grid-column: span 1;
        min-height: auto;
    }

    .service-visual-split {
        flex-direction: column;
    }

    .visual-content {
        flex: 0 0 220px;
        padding: 20px 20px 0 20px;
    }

    .text-content {
        padding: 24px 20px;
    }

    .service-title-modern {
        font-size: 1.75rem;
    }

    .service-desc-modern {
        font-size: 0.95rem;
    }

    .service-image-compact {
        height: 220px;
        margin: 20px 20px 0 20px;
    }

    .service-split-horizontal {
        flex-direction: column;
    }

    .split-image {
        flex: 0 0 220px;
        border-radius: 28px 28px 0 0;
    }

    .split-content {
        padding: 24px;
    }

    .tracking-features-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .service-title-wide,
    .service-title-compact {
        font-size: 1.5rem;
    }

    .feature-tags {
        gap: 6px;
    }

    .tag {
        font-size: 0.75rem;
        padding: 6px 12px;
    }

    .btn-modern {
        padding: 12px 24px;
        font-size: 0.85rem;
        width: 100%;
    }

    .service-badge-floating {
        top: 12px;
        right: 12px;
        padding: 6px 12px;
        font-size: 0.7rem;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .services-container-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        gap: 24px;
        padding: 0 15px;
    }

    .service-card-simple {
        min-height: auto;
        height: auto;
    }

    .service-header {
        padding: 20px;
    }

    .service-number-badge-group {
        gap: 12px;
    }

    .service-image {
        height: 170px;
        margin: 0 20px 20px 20px;
    }

    .service-content {
        padding: 0 20px 20px 20px;
    }

    .service-title {
        font-size: 1.5rem;
    }

    .service-description {
        font-size: 0.9rem;
    }

    .features-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .feature {
        font-size: 0.85rem;
        padding: 8px 10px;
    }

    .included-items {
        padding: 12px;
    }

    .included-items li {
        font-size: 0.85rem;
        padding: 6px 0;
    }

    .service-actions {
        flex-direction: column;
    }

    .btn-book-now,
    .btn-learn-more {
        padding: 12px;
        font-size: 0.85rem;
    }

    .service-number {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    .service-badge {
        font-size: 0.7rem;
        padding: 6px 12px;
    }
}

.service-card-modern {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.4s ease;
    overflow: hidden;
    position: relative;
    max-height: 650px;
}

.service-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #ac1929 0%, #2563eb 50%, #e91e63 100%);
}

.service-card-modern:hover {
    transform: translateY(-8px);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.service-card-modern .card-content {
    padding: 40px;
}

.service-card-modern .service-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #ac1929 0%, #2563eb 70%, #e91e63 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.service-card-modern .service-description {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 30px;
}

.service-card-modern .service-number-modern {
    position: absolute;
    top: 20px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ac1929 0%, #2563eb 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(172, 25, 41, 0.3);
}

.service-card-modern .detail-section h4 {
    color: #1e293b;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-card-modern .detail-section h4 i {
    color: #ac1929;
    font-size: 1.1rem;
}

.service-card-modern .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.service-card-modern .feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgba(248, 250, 252, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.service-card-modern .feature-item i {
    color: #2563eb;
    font-size: 1.1rem;
    margin-top: 4px;
    flex-shrink: 0;
}

.service-card-modern .feature-item strong {
    display: block;
    color: #1e293b;
    font-weight: 600;
    margin-bottom: 4px;
    background: linear-gradient(135deg, #ac1929 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.service-card-modern .feature-item span {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.4;
}

.service-card-modern .pricing-section {
    background: linear-gradient(135deg,
            rgba(172, 25, 41, 0.05) 0%,
            rgba(59, 130, 246, 0.05) 100%);
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 30px;
    border: 1px solid rgba(172, 25, 41, 0.1);
}

.service-card-modern .pricing-section h4 {
    color: #1e293b;
    margin-bottom: 16px;
    font-weight: 700;
}

.service-card-modern .pricing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.service-card-modern .pricing-item:last-child {
    border-bottom: none;
}

.service-card-modern .pricing-item span:first-child {
    color: #64748b;
    font-weight: 500;
}

.service-card-modern .pricing-item span:last-child {
    color: #ac1929;
    font-weight: 700;
    font-size: 1.1rem;
}

.service-card-modern .card-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.service-card-modern .btn-primary-modern {
    background: linear-gradient(135deg, #ac1929 0%, #2563eb 100%);
    color: white;
    padding: 14px 28px;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(172, 25, 41, 0.3);
}

.service-card-modern .btn-primary-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(172, 25, 41, 0.4);
}

.service-card-modern .btn-outline-modern {
    background: transparent;
    color: #ac1929;
    padding: 14px 28px;
    border-radius: 12px;
    border: 2px solid #ac1929;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-card-modern .btn-outline-modern:hover {
    background: #ac1929;
    color: white;
    transform: translateY(-2px);
}

/* Zigzag Layout Responsive */
@media (max-width: 1024px) {
    .services-zigzag-container {
        gap: 60px;
    }

    .service-card-zigzag {
        gap: 30px;
        padding: 30px;
    }

    .service-title-zigzag {
        font-size: 2rem;
    }

    .service-image-zigzag {
        height: 320px;
    }
}

@media (max-width: 768px) {
    .service-tabs-container {
        margin: 30px 0 40px 0;
        padding: 0 15px;
    }

    .service-tabs {
        width: 100%;
        flex-direction: column;
        gap: 4px;
    }

    .service-tab {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
    }

    .services-zigzag-container {
        gap: 40px;
        padding: 0 15px;
    }

    .service-card-zigzag {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }

    .service-card-zigzag.reverse {
        direction: ltr;
    }

    .service-image-zigzag {
        height: 280px;
        order: -1;
    }

    .service-title-zigzag {
        font-size: 1.75rem;
    }

    .service-desc-zigzag {
        font-size: 0.95rem;
    }

    .feature-item-zigzag {
        padding: 12px 16px;
    }

    .feature-item-zigzag i {
        font-size: 1.5rem;
    }

    .feature-item-zigzag strong {
        font-size: 0.9rem;
    }

    .feature-item-zigzag span {
        font-size: 0.8rem;
    }

    .btn-zigzag {
        width: 100%;
        justify-content: center;
        padding: 14px 28px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .service-card-zigzag {
        padding: 20px;
    }

    .service-image-zigzag {
        height: 240px;
        border-radius: 20px;
    }

    .service-title-zigzag {
        font-size: 1.5rem;
    }

    .service-desc-zigzag {
        font-size: 0.9rem;
    }

    .service-features-zigzag {
        gap: 12px;
    }

    .feature-item-zigzag {
        gap: 12px;
        padding: 10px 14px;
    }

    .image-badge {
        padding: 8px 16px;
        font-size: 0.8rem;
        bottom: 12px;
        left: 12px;
    }

    .image-badge i {
        font-size: 0.9rem;
    }
}

/* Mobile Responsive for Enhanced Services Page */
@media (max-width: 768px) {
    .services-page-header {
        padding: 100px 0 60px 0;
    }

    .page-header-content h1 {
        font-size: 2.5rem;
    }

    .page-header-content p {
        font-size: 1.1rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .stat-item {
        padding: 24px;
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .section-header-enhanced h2 {
        font-size: 2.2rem;
    }

    .decoration-circle {
        display: none;
    }

    /* Single Column Services Mobile */
    .services-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
        margin: 0 20px;
        max-width: none;
    }

    .page-services .enhanced-services .services-cards-grid {
        grid-template-columns: 1fr !important;
    }

    .service-card-modern .card-content {
        padding: 30px 24px;
    }

    .service-card-modern .service-title {
        font-size: 1.6rem;
    }

    .service-card-modern .service-number-modern {
        top: 15px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .service-card-modern .feature-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .service-card-modern .card-actions {
        flex-direction: column;
    }

    .service-card-modern .btn-primary-modern,
    .service-card-modern .btn-outline-modern {
        width: 100%;
        justify-content: center;
        padding: 16px 20px;
    }
}

/* Enhanced Tracking Page Styles */

/* Hero Section */
.tracking-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 0 !important;
    margin-bottom: 0;
    padding: 4rem 0;
}

.tracking-hero .hero-title {
    color: white !important;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    background: none !important;
    -webkit-text-fill-color: white !important;
    background-clip: unset !important;
}

.tracking-hero .hero-subtitle {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

.tracking-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            #f1f5f9 0%,
            #e2e8f0 25%,
            #f3f4f6 50%,
            #e5e7eb 75%,
            #f9fafb 100%);
    z-index: -2;
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(30, 58, 138, 0.65),
            rgba(91, 33, 182, 0.55),
            rgba(127, 29, 29, 0.60),
            rgba(55, 65, 81, 0.65));
    z-index: -1;
}

.floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: -1;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    animation: float 20s infinite ease-in-out;
}

.shape-1 {
    width: 100px;
    height: 100px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.shape-2 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 15%;
    animation-delay: 7s;
}

.shape-3 {
    width: 80px;
    height: 80px;
    bottom: 20%;
    left: 70%;
    animation-delay: 14s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-20px) rotate(90deg);
    }

    50% {
        transform: translateY(-40px) rotate(180deg);
    }

    75% {
        transform: translateY(-20px) rotate(270deg);
    }
}

.hero-content {
    text-align: center;
    color: white;
    z-index: 1;
    padding: 2rem 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.hero-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    display: inline-block;
}

/* Floating Map Animation */
.floating-map {
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 70px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: floatMap 3s ease-in-out infinite;
    opacity: 0.8;
}

@keyframes floatMap {

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

    50% {
        transform: translateX(-50%) translateY(-5px);
    }
}

.map-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 12px;
}

.map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.7;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.map-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.map-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1px;
}

.map-line:nth-child(1) {
    top: 30%;
    left: 10%;
    width: 80%;
    height: 1px;
}

.map-line:nth-child(2) {
    top: 60%;
    left: 15%;
    width: 70%;
    height: 1px;
}

.map-line:nth-child(3) {
    top: 20%;
    left: 40%;
    width: 1px;
    height: 60%;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
    padding: 0.5rem 0;
}

.hero-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    padding-bottom: 1rem;
}

/* Tracking Stats Header */
.tracking-stats-header {
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.tracking-stats-header h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.tracking-stats-header p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Stats Cards */
.tracking-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 4rem 0 4rem 0;
    position: relative;
    z-index: 10;
    padding: 0 1rem;
}

.stat-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    transition: left 0.5s ease;
}

.stat-card:hover::before {
    left: 100%;
}

.stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.stat-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--primary-gradient));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
}

.stat-content h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.stat-content p {
    color: var(--text-secondary);
    font-weight: 500;
}

.tracking-section {
    padding: 0 0 4rem 0;
    margin-top: 0;
}

/* Enhanced Method Selector */
.tracking-method-selector {
    margin: 3rem 0;
    text-align: center;
}

.selector-header {
    margin-bottom: 3rem;
}

.selector-header h2 {
    font-size: 2.5rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-weight: 600;
}

.selector-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
}

.method-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.method-tab {
    display: flex;
    align-items: center;
    padding: 2.5rem;
    border: 2px solid rgba(172, 25, 41, 0.08);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(248, 250, 252, 0.98) 100%);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.method-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.02), rgba(172, 25, 41, 0.01));
    opacity: 0;
    transition: all 0.4s ease;
    border-radius: 24px;
}

.method-tab::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(172, 25, 41, 0.05) 0%, transparent 70%);
    transform: scale(0);
    transition: transform 0.6s ease;
    border-radius: 50%;
}

.method-tab.active::before,
.method-tab:hover::before {
    opacity: 1;
}

.method-tab:hover::after {
    transform: scale(1);
}

.method-tab.active {
    border-color: var(--primary-color);
    box-shadow:
        0 15px 40px rgba(172, 25, 41, 0.15),
        0 5px 15px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(-5px) scale(1.02);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(254, 243, 242, 0.95) 100%);
}

.method-tab:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.08),
        0 8px 20px rgba(172, 25, 41, 0.1);
    border-color: rgba(172, 25, 41, 0.15);
}

.tab-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    margin-right: 2rem;
    position: relative;
    z-index: 1;
    box-shadow:
        0 8px 20px rgba(172, 25, 41, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    overflow: hidden;
}

.tab-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(45deg);
    animation: iconShine 4s infinite;
}

@keyframes iconShine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }

    50% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }

    100% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
}

.method-tab:hover .tab-icon {
    transform: scale(1.05) rotate(5deg);
    box-shadow:
        0 12px 25px rgba(172, 25, 41, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.method-tab.active .tab-icon {
    transform: scale(1.1);
    box-shadow:
        0 15px 30px rgba(172, 25, 41, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.tab-content {
    flex: 1;
    text-align: left;
    position: relative;
    z-index: 1;
}

.tab-title {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

.method-tab:hover .tab-title {
    color: var(--primary-color);
}

.tab-desc {
    display: block;
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.method-tab:hover .tab-desc {
    color: var(--text-primary);
}

.tab-arrow {
    font-size: 1.4rem;
    color: var(--primary-color);
    position: relative;
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(172, 25, 41, 0.08);
    border-radius: 50%;
    margin-left: 1rem;
}

.method-tab:hover .tab-arrow {
    transform: translateX(8px) scale(1.2);
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(172, 25, 41, 0.3);
}

.method-tab.active .tab-arrow {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(172, 25, 41, 0.4);
}

/* Enhanced Method Selector Responsiveness */
@media (max-width: 768px) {
    .method-tabs {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: none;
        padding: 0 1rem;
    }

    .method-tab {
        padding: 2rem;
        border-radius: 20px;
    }

    .tab-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        margin-right: 1.5rem;
    }

    .tab-title {
        font-size: 1.2rem;
    }

    .tab-desc {
        font-size: 0.9rem;
    }

    .tab-arrow {
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
    }

    .tracking-form-card.enhanced {
        padding: 2.5rem;
        border-radius: 24px;
        margin: 2rem 1rem;
    }

    .header-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        margin-right: 1.5rem;
    }

    .header-content h3 {
        font-size: 1.5rem;
    }

    .input-group.enhanced input {
        padding: 18px 15px;
        font-size: 1rem;
    }

    .track-btn {
        padding: 0 1.5rem;
        font-size: 1rem;
    }

    .form-features {
        gap: 1.5rem;
        flex-direction: column;
        align-items: center;
    }

    .action-buttons {
        justify-content: center;
    }
}

/* Excel Upload Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.excel-upload-modal {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    border-radius: 24px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(172, 25, 41, 0.1);
    transform: scale(0.9) translateY(-20px);
    transition: all 0.3s ease;
}

.modal-overlay.active .excel-upload-modal {
    transform: scale(1) translateY(0);
}

.modal-header {
    padding: 2rem 2rem 1rem;
    border-bottom: 2px solid rgba(172, 25, 41, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin: 0;
    font-weight: 700;
}

.modal-close {
    background: rgba(172, 25, 41, 0.1);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.modal-body {
    padding: 2rem;
}

.upload-zone {
    border: 3px dashed rgba(172, 25, 41, 0.3);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.02), rgba(172, 25, 41, 0.01));
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 2rem;
}

.upload-zone:hover {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.05), rgba(172, 25, 41, 0.02));
    transform: translateY(-2px);
}

.upload-zone.dragover {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.08), rgba(172, 25, 41, 0.03));
    transform: scale(1.02);
}

.upload-zone .upload-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.upload-zone h4 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.upload-zone p {
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
}

.browse-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.browse-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(172, 25, 41, 0.3);
}

.file-info {
    background: rgba(172, 25, 41, 0.05);
    border: 2px solid rgba(172, 25, 41, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.file-details {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.file-details i {
    font-size: 2rem;
    color: var(--primary-color);
}

.file-data {
    flex: 1;
}

.file-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.file-size {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.remove-file {
    background: rgba(220, 38, 38, 0.1);
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #dc2626;
    cursor: pointer;
    transition: all 0.3s ease;
}

.remove-file:hover {
    background: #dc2626;
    color: white;
}

.upload-progress {
    margin-top: 1rem;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(172, 25, 41, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.upload-requirements {
    background: rgba(248, 250, 252, 0.8);
    border-radius: 12px;
    padding: 1.5rem;
}

.upload-requirements h5 {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    font-weight: 600;
}

.upload-requirements ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.upload-requirements li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.upload-requirements li i {
    color: #10b981;
}

.template-section p {
    margin: 0;
    color: var(--text-secondary);
}

.template-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.template-link:hover {
    text-decoration: underline;
}

.modal-footer {
    padding: 1rem 2rem 2rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.cancel-btn {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    border: 2px solid rgba(107, 114, 128, 0.2);
    padding: 12px 24px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cancel-btn:hover {
    background: rgba(107, 114, 128, 0.2);
    color: #4b5563;
}

.upload-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.upload-btn:disabled {
    background: rgba(107, 114, 128, 0.3);
    color: rgba(107, 114, 128, 0.7);
    cursor: not-allowed;
}

.upload-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(172, 25, 41, 0.3);
}

/* Multiple Results Container Styles */
.multiple-results-container {
    margin-top: 3rem;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    border-radius: 24px;
    padding: 2rem;
    border: 2px solid rgba(172, 25, 41, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(20px);
}

.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(172, 25, 41, 0.08);
}

.results-title h3 {
    font-size: 1.75rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    font-weight: 700;
}

.results-title p {
    color: var(--text-secondary);
    margin: 0;
    font-weight: 500;
}

.results-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.export-btn,
.refresh-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
    border: 2px solid rgba(172, 25, 41, 0.1);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.export-btn:hover,
.refresh-btn:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(172, 25, 41, 0.2);
}

.results-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.summary-card {
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(172, 25, 41, 0.05);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

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

.summary-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
}

.summary-icon.delivered {
    background: linear-gradient(135deg, #10b981, #065f46);
}

.summary-icon.in-transit {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
}

.summary-icon.pending {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.summary-icon.error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.summary-content {
    display: flex;
    flex-direction: column;
}

.summary-count {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.summary-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.results-table-container {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(172, 25, 41, 0.05);
}

.table-controls {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(248, 250, 252, 0.8);
    border-bottom: 1px solid rgba(172, 25, 41, 0.1);
}

.search-filter {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box i {
    position: absolute;
    left: 12px;
    color: var(--text-secondary);
    z-index: 1;
}

.search-box input {
    padding: 10px 12px 10px 35px;
    border: 2px solid rgba(172, 25, 41, 0.1);
    border-radius: 10px;
    background: white;
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 250px;
    transition: all 0.3s ease;
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(172, 25, 41, 0.1);
}

.status-filter {
    padding: 10px 15px;
    border: 2px solid rgba(172, 25, 41, 0.1);
    border-radius: 10px;
    background: white;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.status-filter:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(172, 25, 41, 0.1);
}

.view-options {
    display: flex;
    gap: 0.5rem;
}

.view-btn {
    padding: 10px 15px;
    border: 2px solid rgba(172, 25, 41, 0.1);
    background: white;
    color: var(--text-secondary);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.view-btn.active,
.view-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.table-wrapper {
    overflow-x: auto;
}

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

.results-table th {
    padding: 1rem;
    text-align: left;
    background: rgba(172, 25, 41, 0.05);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 2px solid rgba(172, 25, 41, 0.1);
}

.results-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(172, 25, 41, 0.05);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.results-table tbody tr:hover {
    background: rgba(172, 25, 41, 0.02);
}

.status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.delivered {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.status-badge.in-transit {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.status-badge.pending {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.status-badge.not-found {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.action-cell {
    display: flex;
    gap: 0.5rem;
}

.action-icon {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 0.8rem;
}

.action-icon.view {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.action-icon.view:hover {
    background: #2563eb;
    color: white;
}

.action-icon.copy {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.action-icon.copy:hover {
    background: #059669;
    color: white;
}

.table-pagination {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(248, 250, 252, 0.8);
    border-top: 1px solid rgba(172, 25, 41, 0.1);
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-btn {
    padding: 8px 16px;
    border: 2px solid rgba(172, 25, 41, 0.1);
    background: white;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-btn:not(:disabled):hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.page-numbers {
    display: flex;
    gap: 0.25rem;
}

.page-number {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(172, 25, 41, 0.1);
    background: white;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
}

.page-number.active,
.page-number:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Responsive Design for Results */
@media (max-width: 768px) {
    .results-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .results-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .table-controls {
        flex-direction: column;
        gap: 1rem;
    }

    .search-filter {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    .search-box input {
        width: 100%;
    }

    .results-table {
        font-size: 0.8rem;
    }

    .results-table th,
    .results-table td {
        padding: 0.75rem 0.5rem;
    }

    .table-pagination {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* Tracking Section Headers */
.section-header-tracking {
    text-align: center;
    margin: 3rem 0 2.5rem 0;
    padding: 0 1rem;
}

.section-header-tracking h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    letter-spacing: -0.5px;
}

.section-header-tracking p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Tracking Method Title */
.tracking-method-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 2.5rem 0 1.5rem 0;
    padding: 0 1rem;
}

/* Tracking Title Container */
.tracking-title-container {
    margin-bottom: 2rem;
    padding: 0 1rem;
    border-bottom: 3px solid var(--primary-color);
    padding-bottom: 1rem;
}

.tracking-title-container h2 {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
}

/* Enhanced Form Cards */
.tracking-form-card.enhanced {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.95) 50%,
            rgba(248, 250, 252, 0.98) 100%);
    border: 2px solid rgba(172, 25, 41, 0.08);
    border-radius: 32px;
    padding: 3.5rem;
    backdrop-filter: blur(25px);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.08),
        0 12px 24px rgba(172, 25, 41, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    position: relative;
    overflow: hidden;
    margin-top: 3rem;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.tracking-form-card.enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 50%, #ff6b9d 100%);
    border-radius: 32px 32px 0 0;
}

.tracking-form-card.enhanced::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(172, 25, 41, 0.02) 0%, transparent 50%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.tracking-form-card.enhanced:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.12),
        0 16px 32px rgba(172, 25, 41, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border-color: rgba(172, 25, 41, 0.15);
}

.tracking-form-card.enhanced:hover::after {
    opacity: 1;
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid rgba(172, 25, 41, 0.08);
    position: relative;
}

.card-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 80px;
    height: 2px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 2px;
}

.header-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    margin-right: 2rem;
    box-shadow:
        0 10px 25px rgba(172, 25, 41, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.header-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }

    50% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }

    100% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
}

.header-content h3 {
    font-size: 1.75rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--text-primary), #666);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header-content p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
}

/* Enhanced Input Groups */
.input-wrapper {
    margin-bottom: 2.5rem;
    position: relative;
}

.input-group.enhanced {
    position: relative;
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    border: 2px solid rgba(172, 25, 41, 0.08);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    pointer-events: auto;
    z-index: 1;
}

.input-group.enhanced:focus-within {
    border-color: var(--primary-color);
    box-shadow:
        0 0 0 4px rgba(172, 25, 41, 0.08),
        0 12px 30px rgba(172, 25, 41, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    color: var(--primary-color);
    font-size: 1.3rem;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.05), rgba(172, 25, 41, 0.02));
    transition: all 0.3s ease;
}

.input-group.enhanced:focus-within .input-icon {
    color: var(--primary-color);
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.1), rgba(172, 25, 41, 0.05));
    transform: scale(1.1);
}

.input-group.enhanced input {
    flex: 1;
    padding: 22px 20px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 500;
    outline: none;
    transition: all 0.3s ease;
    pointer-events: auto;
    user-select: text;
    cursor: text;
    z-index: 1;
}

.input-group.enhanced input::placeholder {
    color: var(--text-secondary);
    font-weight: 400;
    transition: all 0.3s ease;
}

.input-group.enhanced:focus-within input::placeholder {
    color: rgba(172, 25, 41, 0.5);
}

.track-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: white;
    border: none;
    padding: 0 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    white-space: nowrap;
    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.2), transparent);
    transition: left 0.5s ease;
}

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

.track-btn:hover {
    background: linear-gradient(135deg, #961f2e 0%, #d91e5a 100%);
    transform: translateX(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(172, 25, 41, 0.3);
}

/* Form Features */
.form-features {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 3rem 0;
    flex-wrap: wrap;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.02), rgba(172, 25, 41, 0.01));
    border-radius: 20px;
    border: 1px solid rgba(172, 25, 41, 0.05);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.feature-item::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    transform: scaleX(0);
    transition: transform 0.3s ease;
    border-radius: 2px;
}

.feature-item:hover::before {
    transform: scaleX(1);
}

.feature-item:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

.feature-item i {
    color: var(--primary-color);
    font-size: 1.2rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(172, 25, 41, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.feature-item:hover i {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

/* Enhanced Form Help */
.form-help {
    background: linear-gradient(135deg,
            rgba(172, 25, 41, 0.03) 0%,
            rgba(172, 25, 41, 0.01) 100%);
    border: 2px solid rgba(172, 25, 41, 0.08);
    border-radius: 18px;
    padding: 1.5rem;
    margin: 2rem 0;
    position: relative;
    overflow: hidden;
}

.form-help::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 0 18px 18px 0;
}

.help-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
    margin-left: 1rem;
}

.help-content i {
    color: var(--primary-color);
    font-size: 1.3rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(172, 25, 41, 0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Quick Actions */
.quick-actions {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 2px solid rgba(172, 25, 41, 0.06);
    position: relative;
}

.quick-actions::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 2px;
}

.quick-actions h4 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--text-primary), #666);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.action-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(248, 250, 252, 0.9));
    border: 2px solid rgba(172, 25, 41, 0.08);
    color: var(--text-secondary);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(172, 25, 41, 0.05), transparent);
    transition: left 0.3s ease;
}

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

.action-btn:hover {
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.05), rgba(172, 25, 41, 0.02));
    color: var(--primary-color);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(172, 25, 41, 0.1);
    border-color: rgba(172, 25, 41, 0.2);
}

.action-btn i {
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.action-btn:hover i {
    transform: scale(1.2);
    color: var(--primary-color);
}

/* Enhanced Multi-Track Tabs */
.multi-track-tabs.enhanced {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 8px;
    margin: 2rem 0;
}

.multi-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.multi-tab .tab-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.multi-tab .tab-content {
    text-align: left;
}

.multi-tab .tab-content span {
    display: block;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 1rem;
}

.multi-tab .tab-content small {
    color: var(--text-light);
    font-size: 0.8rem;
}

.multi-tab.active {
    background: rgba(255, 255, 255, 0.1);
}

.multi-tab.active .tab-icon {
    background: linear-gradient(135deg, var(--primary-gradient));
    color: white;
}

.multi-tab.active .tab-content span {
    color: var(--primary-color);
}

/* Enhanced Upload Section */
.upload-section {
    margin-top: 2rem;
}

.upload-area.enhanced {
    position: relative;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.05), rgba(233, 30, 99, 0.05));
    border: 2px dashed rgba(172, 25, 41, 0.3);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
}

.upload-area.enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.upload-area.enhanced:hover::before {
    left: 100%;
}

.upload-area.enhanced:hover {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.1), rgba(233, 30, 99, 0.1));
    transform: translateY(-2px);
}

.upload-visual {
    position: relative;
    margin-bottom: 2rem;
}

.upload-area.enhanced .upload-icon {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 0;
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.upload-animation {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: rgba(172, 25, 41, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.upload-progress {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: 2px;
    animation: uploadProgress 3s infinite ease-in-out;
}

@keyframes uploadProgress {
    0% {
        width: 0%;
    }

    50% {
        width: 70%;
    }

    100% {
        width: 0%;
    }
}

.upload-content h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.upload-content p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-size: 1rem;
}

.upload-btn.enhanced {
    background: linear-gradient(135deg, var(--primary-gradient));
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

.upload-btn.enhanced:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(172, 25, 41, 0.3);
}

/* Info Cards */
.upload-info {
    margin-top: 2rem;
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.info-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.info-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.info-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-gradient));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.info-content h5 {
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.info-content p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.85rem;
}

.template-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-secondary);
}

.template-download i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.download-template.enhanced {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
}

.download-template.enhanced:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* Enhanced Manual Entry */
.manual-entry-section {
    margin-top: 2rem;
}

.manual-header {
    text-align: center;
    margin-bottom: 2rem;
}

.manual-header h4 {
    color: var(--text-primary);
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.manual-header p {
    color: var(--text-secondary);
    margin: 0;
}

.textarea-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
}

.manual-form textarea {
    width: 100%;
    min-height: 220px;
    padding: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    resize: vertical;
    transition: all 0.3s ease;
}

.manual-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(172, 25, 41, 0.1);
}

.manual-form textarea::placeholder {
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
}

.textarea-counter {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    backdrop-filter: blur(10px);
}

.manual-entry-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-bottom: 2rem;
}

.secondary-btn.enhanced {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 24px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.secondary-btn.enhanced:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transform: translateY(-2px);
}

.primary-btn.enhanced {
    background: linear-gradient(135deg, var(--primary-gradient));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.primary-btn.enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(172, 25, 41, 0.3);
}

.manual-tips {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    color: var(--text-secondary);
}

.manual-tips h5 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1rem;
}

.manual-tips ul {
    margin: 0;
    padding-left: 1.5rem;
}

.manual-tips li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/* Scanner Animation */
.scanner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.scanner-animation {
    text-align: center;
    color: white;
    position: relative;
    padding: 2rem;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    width: 300px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.scanner-animation i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.scan-line {
    position: absolute;
    top: 20%;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    animation: scanLine 2s infinite ease-in-out;
}

@keyframes scanLine {
    0% {
        top: 20%;
        opacity: 1;
    }

    50% {
        top: 70%;
        opacity: 0.7;
    }

    100% {
        top: 20%;
        opacity: 1;
    }
}

/* Tracking Guide Modal */
.tracking-guide-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.guide-content {
    background: var(--bg-primary);
    border-radius: 20px;
    padding: 0;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

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

.guide-header {
    background: linear-gradient(135deg, var(--primary-gradient));
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}

.guide-header h3 {
    margin: 0;
    font-size: 1.3rem;
}

.close-guide {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.close-guide:hover {
    background: rgba(255, 255, 255, 0.2);
}

.guide-body {
    padding: 2rem;
    max-height: 60vh;
    overflow-y: auto;
}

.guide-section {
    margin-bottom: 1.5rem;
}

.guide-section h4 {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.guide-section ul {
    color: var(--text-secondary);
    padding-left: 1.5rem;
    margin: 0;
}

.guide-section li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/* Upload shimmer effect */
.upload-area.shimmer-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Responsive Enhancements */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 3rem;
    }

    .selector-header h2 {
        font-size: 2rem;
    }

    .tracking-stats {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin: -3rem 0 3rem 0;
    }

    /* Stack hero content vertically on tablets */
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .hero-image-container {
        order: 2;
        max-width: 500px;
        margin: 0 auto;
    }

    .hero-text {
        order: 1;
    }

    /* Hide tracking widget on tablets and below */
    .hero-tracking-widget {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
        line-height: 1.3;
        padding: 1rem 0;
    }

    .hero-icon {
        font-size: 3rem;
        margin-bottom: 2rem;
    }

    .floating-map {
        bottom: -1.5rem;
        width: 80px;
        height: 55px;
    }

    .tracking-hero {
        min-height: 45vh;
        padding: 3rem 0;
    }

    .hero-content {
        padding: 1.5rem 1rem;
    }

    .method-tabs {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .method-tab {
        text-align: center;
    }

    .card-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .header-icon {
        margin-right: 0;
    }

    .form-features {
        flex-direction: column;
        gap: 1rem;
    }

    .action-buttons {
        justify-content: center;
    }

    .manual-entry-actions {
        flex-direction: column;
    }

    .info-cards {
        grid-template-columns: 1fr;
    }

    .template-download {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .tracking-stats {
        margin: -2rem 0 2rem 0;
    }

    .multi-track-tabs.enhanced {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .tracking-form-card.enhanced {
        padding: 2rem 1.5rem;
    }

    .upload-area.enhanced {
        padding: 2rem 1rem;
    }

    .upload-area.enhanced .upload-icon {
        font-size: 3rem;
    }

    .stat-card {
        padding: 1.5rem;
    }

    .stat-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .guide-content {
        width: 95%;
    }

    .guide-body {
        padding: 1.5rem;
    }
}

.tracking-method {
    display: none;
    margin-top: 2rem;
}

.tracking-method.active {
    display: block;
}

.tracking-form-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.form-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.form-header h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.form-header p {
    color: var(--text-secondary);
    margin-bottom: 0;
}

.input-group {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
}

.input-group input {
    flex: 1;
    padding: 15px 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.1);
}

.input-group input::placeholder {
    color: var(--text-secondary);
}

.form-help {
    text-align: center;
}

.form-help small {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.multi-track-tabs {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 4px;
}

.multi-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    flex: 1;
    justify-content: center;
}

.multi-tab.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
}

.multi-track-content {
    display: none;
}

.multi-track-content.active {
    display: block;
}

.upload-area {
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-area:hover {
    border-color: var(--primary-color);
    background: rgba(59, 130, 246, 0.05);
}

.upload-area.dragover {
    border-color: var(--primary-color);
    background: rgba(59, 130, 246, 0.1);
}

.upload-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.upload-area h4 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.upload-area p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.upload-btn {
    background: linear-gradient(135deg, var(--primary-gradient));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.file-requirements {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.file-requirements h5 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.file-requirements ul {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.file-requirements li {
    margin-bottom: 0.5rem;
}

.download-template {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.download-template:hover {
    color: var(--secondary-color);
}

.manual-entry-form textarea {
    width: 100%;
    min-height: 200px;
    padding: 15px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-family: monospace;
    font-size: 0.9rem;
    resize: vertical;
    transition: all 0.3s ease;
}

.manual-entry-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.1);
}

.manual-entry-form textarea::placeholder {
    color: var(--text-secondary);
}

.manual-entry-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.secondary-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 24px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.loading-spinner {
    text-align: center;
    color: white;
}

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

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.tracking-results {
    margin-top: 2rem;
}

/* Single Package Results */
.single-package-result {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.package-info h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.package-summary {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-item label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.summary-item span {
    color: var(--text-primary);
    font-weight: 600;
}

.table-container {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.package-meta {
    display: flex;
    gap: 2rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.status-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.status-badge.delivered {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.status-badge.in-transit {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    color: white;
}

.status-badge.pending {
    background: linear-gradient(135deg, #f97316, #f59e0b);
    color: white;
}

.status-badge.exception {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.tracking-timeline {
    margin-top: 2rem;
}

.timeline-header {
    margin-bottom: 1.5rem;
}

.timeline-header h4 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -2.8rem;
    top: 1.5rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 3px solid var(--bg-primary);
}

.timeline-item.completed::before {
    background: #10b981;
}

.timeline-item.current::before {
    background: var(--primary-color);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }

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

.timeline-content h5 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.timeline-location {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.timeline-time {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Multiple Package Results Table */
.multiple-package-results {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.results-stats {
    display: flex;
    gap: 2rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.export-actions {
    display: flex;
    gap: 1rem;
}

.export-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.export-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.tracking-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.tracking-table th,
.tracking-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tracking-table th {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tracking-table td {
    color: var(--text-secondary);
}

.tracking-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.table-tracking-number {
    font-family: monospace;
    font-weight: 600;
    color: var(--primary-color);
}

.table-actions {
    display: flex;
    gap: 0.5rem;
}

.action-btn {
    padding: 6px 12px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.view-details-btn {
    background: linear-gradient(135deg, var(--primary-gradient));
    color: white;
}

.view-details-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .method-tabs {
        flex-direction: column;
        width: 100%;
    }

    .input-group {
        flex-direction: column;
    }

    .package-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .package-meta {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .timeline {
        padding-left: 1.5rem;
    }

    .timeline::before {
        left: 15px;
    }

    .timeline-item::before {
        left: -2.3rem;
    }

    .tracking-table {
        font-size: 0.9rem;
    }

    .tracking-table th,
    .tracking-table td {
        padding: 0.75rem 0.5rem;
    }

    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .export-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .tracking-form-card {
        padding: 1.5rem;
    }

    .manual-entry-actions {
        flex-direction: column;
    }

    .tracking-table {
        font-size: 0.8rem;
    }
}

/* =============================================
   ABOUT PAGE STYLES
   ============================================= */

/* About Hero Section */
.about-hero {
    position: relative;
    min-height: 40vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.about-hero .hero-title {
    color: white !important;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    background: none !important;
    -webkit-text-fill-color: white !important;
    background-clip: unset !important;
}

.about-hero .hero-subtitle {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

.about-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.about-hero .hero-content {
    text-align: center;
    color: white;
    z-index: 2;
    position: relative;
}

.about-hero .hero-icon {
    position: relative;
    margin: 0;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.about-hero .hero-icon i {
    font-size: 2rem;
    color: white;
    position: relative;
    z-index: 2;
}

.floating-company {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
}

.company-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: companyPulse 2s infinite;
}

.company-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.company-rings .ring {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: companyRings 3s infinite ease-out;
}

.company-rings .ring:nth-child(1) {
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    animation-delay: 0s;
}

.company-rings .ring:nth-child(2) {
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    animation-delay: 1s;
}

.company-rings .ring:nth-child(3) {
    width: 140px;
    height: 140px;
    margin: -70px 0 0 -70px;
    animation-delay: 2s;
}

@keyframes companyPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.7;
    }
}

@keyframes companyRings {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Company Floating Icons */
.company-icon-1,
.company-icon-2,
.company-icon-3,
.company-icon-4,
.company-icon-5,
.company-icon-6,
.company-icon-7,
.company-icon-8,
.company-icon-9,
.company-icon-10,
.company-icon-11,
.company-icon-12 {
    position: absolute;
    color: rgba(255, 255, 255, 0.4);
    font-size: 2rem;
    z-index: 1;
    animation: aboutFloat 18s infinite ease-in-out;
}

.company-icon-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.company-icon-2 {
    top: 30%;
    right: 15%;
    animation-delay: 3s;
}

.company-icon-3 {
    bottom: 35%;
    left: 8%;
    animation-delay: 6s;
}

.company-icon-4 {
    bottom: 25%;
    right: 20%;
    animation-delay: 9s;
}

.company-icon-5 {
    top: 60%;
    left: 50%;
    animation-delay: 12s;
}

.company-icon-6 {
    top: 15%;
    left: 80%;
    animation-delay: 15s;
}

.company-icon-7 {
    bottom: 60%;
    right: 5%;
    animation-delay: 18s;
}

.company-icon-8 {
    top: 45%;
    left: 3%;
    animation-delay: 21s;
}

.company-icon-9 {
    bottom: 15%;
    left: 40%;
    animation-delay: 24s;
}

.company-icon-10 {
    top: 35%;
    right: 15%;
    animation-delay: 27s;
}

.company-icon-11 {
    bottom: 45%;
    right: 60%;
    animation-delay: 30s;
}

.company-icon-12 {
    top: 70%;
    left: 25%;
    animation-delay: 33s;
}

@keyframes aboutFloat {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.4;
    }

    25% {
        transform: translateY(-20px) translateX(10px) scale(1.1);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-10px) translateX(-15px) scale(0.9);
        opacity: 0.3;
    }

    75% {
        transform: translateY(15px) translateX(8px) scale(1.05);
        opacity: 0.5;
    }
}

/* Company Overview */
.company-overview {
    padding: 5rem 0;
    background: var(--background-color);
}

.overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.overview-content .section-tag {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.overview-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    line-height: 1.2;
}

.lead-text {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.company-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 4rem;
    max-width: 600px;
}

.stat-item {
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 2rem 1rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.stat-label {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
    line-height: 1.4;
    word-wrap: break-word;
    hyphens: auto;
}

.overview-image {
    position: relative;
}

.image-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.image-card img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: var(--transition);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: var(--transition);
}

.image-card:hover .image-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.4);
}

.overlay-content {
    text-align: center;
    color: white;
    cursor: pointer;
    transition: var(--transition);
}

.overlay-content:hover {
    transform: scale(1.1);
}

.overlay-content i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.overlay-content span {
    font-size: 1.2rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Special Destinations Section */
.special-destinations {
    padding: 6rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.destinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.destination-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
}

.destination-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.destination-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.destination-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.destination-card:hover .destination-image img {
    transform: scale(1.05);
}

.destination-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.4) 0%, transparent 50%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 1.5rem;
}

.destination-badge {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.destination-badge i {
    color: #AC1929;
    font-size: 1rem;
}

.destination-content {
    padding: 2rem;
}

.destination-content h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
}

.destination-content p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.destination-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.feature-tag {
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.1), rgba(172, 25, 41, 0.05));
    color: #AC1929;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid rgba(172, 25, 41, 0.2);
}

.feature-tag i {
    font-size: 0.7rem;
}

.destinations-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
    padding: 3rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.destinations-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.destinations-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.destinations-stat .stat-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.15), rgba(172, 25, 41, 0.25));
    border: 2px solid rgba(172, 25, 41, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #AC1929;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.destinations-stat .stat-info {
    text-align: left;
}

.destinations-stat .stat-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    line-height: 1;
}

.destinations-stat .stat-label {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.2rem;
}

.destinations-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.destinations-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.destinations-stat-card .stat-caption {
    font-size: 0.95rem;
    color: #666;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.destinations-stat-card .destinations-stat {
    flex-direction: column;
    gap: 0.8rem;
    padding: 0;
    background: none;
    box-shadow: none;
}

.destinations-stat-card .destinations-stat:hover {
    transform: none;
    box-shadow: none;
}

.destinations-stat-card .stat-info {
    text-align: center;
}

/* Responsive Design for Special Destinations */
@media (max-width: 768px) {
    .destinations-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .destination-image {
        height: 200px;
    }

    .destination-content {
        padding: 1.5rem;
    }

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

    .destinations-stat {
        padding: 1rem;
    }

    .destinations-stat .stat-number {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .destinations-stats {
        grid-template-columns: 1fr;
    }

    .destination-overlay {
        padding: 1rem;
    }

    .destination-badge {
        padding: 0.3rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* Mission & Vision */
.mission-vision {
    padding: 5rem 0;
    background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
    position: relative;
    overflow: hidden;
}

.mission-vision::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.5;
    z-index: 1;
}

.mission-vision .container {
    position: relative;
    z-index: 2;
}

.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.mv-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border: 1px solid rgba(75, 85, 185, 0.1);
}

.mv-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.mv-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.mv-icon i {
    font-size: 2rem;
    color: white;
}

.mv-card h3 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.mv-card p {
    margin-bottom: 2rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.mv-list {
    list-style: none;
    padding: 0;
}

.mv-list li {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
    color: var(--text-secondary);
}

.mv-list li i {
    color: var(--success-color);
    margin-right: 0.8rem;
    font-size: 0.9rem;
}

/* Core Values */
.core-values {
    padding: 5rem 0;
    background: linear-gradient(135deg, #fafbff 0%, #f0f3ff 50%, #e8f0ff 100%);
    position: relative;
    overflow: hidden;
}

.core-values::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 25% 25%, rgba(75, 85, 185, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(142, 68, 173, 0.03) 0%, transparent 50%);
    z-index: 1;
}

.core-values .container {
    position: relative;
    z-index: 2;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.value-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 50%, #e8f2ff 100%);
    padding: 2.5rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border-top: 4px solid var(--primary-color);
    border: 1px solid rgba(75, 85, 185, 0.08);
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.value-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.15), rgba(172, 25, 41, 0.25));
    border: 3px solid rgba(172, 25, 41, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 10px 30px rgba(172, 25, 41, 0.2);
    transition: var(--transition);
    position: relative;
}

.value-icon::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.1), rgba(172, 25, 41, 0.15));
    border-radius: 50%;
    z-index: -1;
}

.value-icon:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 20px 40px rgba(172, 25, 41, 0.3);
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.25), rgba(172, 25, 41, 0.35));
}

.value-icon i {
    font-size: 2.2rem;
    color: #AC1929;
    z-index: 2;
    text-shadow: none;
}

.value-card h4 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.value-card p {
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Leadership Team */
.leadership-team {
    padding: 5rem 0;
    background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.team-member {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.team-member:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-md);
}

.member-photo {
    position: relative;
    margin-bottom: 1.5rem;
}

.photo-placeholder {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.photo-placeholder i {
    font-size: 3rem;
    color: white;
}

.member-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: var(--transition);
}

.member-photo:hover .member-overlay {
    background: rgba(0, 0, 0, 0.7);
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--primary-color);
    color: white;
}

.member-info h4 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.member-role {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 1rem;
}

.member-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Achievements */
.achievements {
    padding: 5rem 0;
    background: var(--background-color);
}

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

.achievement-card {
    background: white;
    padding: 2.5rem;
    border-radius: 15px;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.achievement-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.achievement-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.achievement-icon i {
    font-size: 1.5rem;
    color: white;
}

.achievement-card h4 {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    color: var(--text-primary);
}

.achievement-card p {
    color: var(--text-secondary);
    line-height: 1.5;
}

/* About CTA */
.about-cta {
    padding: 4rem 0;
    background: #f8fafc; /* Changed to light background */
    color: var(--text-primary); /* Changed to dark text color */
}

.cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

.cta-text h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--primary-color); /* Emphasize headline */
}

.cta-text p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    opacity: 0.9;
}

.cta-actions {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary-color); /* Changed to primary color border */
    color: var(--primary-color); /* Changed to primary color text */
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .overview-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .overview-image {
        order: -1;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .company-stats {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        max-width: none;
        margin-top: 2rem;
    }

    .stat-item {
        padding: 1.5rem 0.8rem;
        min-height: 100px;
    }

    .stat-number {
        font-size: 1.8rem;
    }

    .stat-label {
        font-size: 0.85rem;
        line-height: 1.3;
    }
}

@media (max-width: 768px) {
    .about-hero {
        min-height: 50vh;
    }

    .about-hero .hero-title {
        font-size: 2.5rem;
    }

    .mv-grid {
        grid-template-columns: 1fr;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .achievements-grid {
        grid-template-columns: 1fr;
    }

    .cta-content {
        flex-direction: column;
        text-align: center;
    }

    .company-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .overview-content h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .about-hero .hero-title {
        font-size: 2rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .mv-card,
    .value-card,
    .team-member {
        padding: 1.5rem;
    }

    .cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn {
        width: 100%;
    }
}

/* Responsive Hero Title with Inline Icons */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .hero-icon {
        width: 50px;
        height: 50px;
    }

    .hero-icon>i,
    .about-hero .hero-icon i {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-icon {
        width: 40px;
        height: 40px;
    }

    .hero-icon>i,
    .about-hero .hero-icon i {
        font-size: 1.2rem;
    }
}

/* ================================
   MODERN CONTACT PAGE STYLES
================================ */

/* Hero Section - Split Layout */
.contact-hero-modern {
    padding: 6rem 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.contact-hero-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 70%, rgba(172, 25, 41, 0.15) 0%, transparent 50%);
}

.hero-split-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-content-left {
    color: white;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-title-modern {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description-modern {
    font-size: 1.2rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 3rem;
}

.quick-stats {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
}

.quick-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.stat-icon i {
    font-size: 1.3rem;
    color: white;
}

.stat-info strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
}

.stat-info span {
    font-size: 0.85rem;
    opacity: 1;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Contact Widget */
.contact-widget {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.widget-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 2rem;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
}

.widget-header i {
    font-size: 1.2rem;
}

.contact-options {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.contact-widget .contact-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-widget .contact-option:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(10px);
    color: white;
}

.contact-widget .option-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #AC1929, #d32f2f);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-widget .option-icon i {
    font-size: 1.1rem;
    color: white;
}

.contact-widget .option-content h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.2rem 0;
}

.contact-widget .option-content p {
    font-size: 0.85rem;
    opacity: 0.8;
    margin: 0;
}

.contact-widget .option-arrow {
    font-size: 0.9rem;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.contact-widget .contact-option:hover .option-arrow {
    opacity: 1;
    transform: translateX(5px);
}

/* Interactive Contact Methods */
.contact-methods-interactive {
    padding: 6rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e8f4f8 100%);
}

.section-header-center {
    text-align: center;
    margin-bottom: 4rem;
}

.section-badge {
    display: inline-block;
    background: linear-gradient(135deg, #AC1929, #d32f2f);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.contact-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
}

/* 3D Flip Cards */
.method-card {
    perspective: 1000px;
    height: 300px;
}

.method-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.method-card:hover .method-card-inner {
    transform: rotateY(180deg);
}

.method-front,
.method-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.method-front {
    background: white;
    color: #333;
}

.method-back {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transform: rotateY(180deg);
}

.method-icon-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
}

.phone-card .method-icon-large {
    background: linear-gradient(135deg, #4CAF50, #45a049);
}

.whatsapp-card .method-icon-large {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

.email-card .method-icon-large {
    background: linear-gradient(135deg, #FF5722, #E64A19);
}

.office-card .method-icon-large {
    background: linear-gradient(135deg, #2196F3, #1976D2);
}

.method-icon-large i {
    font-size: 2rem;
    color: white;
}

.method-front h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #333;
}

.method-front p {
    color: #666;
    margin-bottom: 1rem;
}

.method-status {
    padding: 0.3rem 1rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.method-status.available {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.method-details h4 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.contact-number,
.office-address {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.method-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.method-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.method-features i {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
}

.method-action-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.method-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    transform: translateY(-2px);
}

/* Enhanced Contact Form */
.contact-form-enhanced {
    padding: 6rem 0;
    background: white;
}

.form-section-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: start;
}

.form-header-section {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.form-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.form-icon-stack {
    position: relative;
    width: 120px;
    height: 120px;
}

.stack-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: stackFloat 3s ease-in-out infinite;
}

.stack-icon.primary {
    background: linear-gradient(135deg, #AC1929, #d32f2f);
    top: 0;
    left: 30px;
    animation-delay: 0s;
}

.stack-icon.secondary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    bottom: 20px;
    left: 0;
    animation-delay: 1s;
}

.stack-icon.tertiary {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    bottom: 20px;
    right: 0;
    animation-delay: 2s;
}

@keyframes stackFloat {

    0%,
    100% {
        transform: translateY(0px) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

.form-intro .section-header {
    text-align: left;
}

.form-badge {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 1rem;
}

.form-benefits {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.benefit {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    border-left: 4px solid #667eea;
}

.benefit i {
    color: #667eea;
    font-size: 1.2rem;
}

.benefit span {
    font-weight: 600;
    color: #333;
}

/* Enhanced Form Container */
.enhanced-form-container {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    border-radius: 25px;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

/* Form Progress */
.form-progress {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
    position: relative;
}

.form-progress::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 25%;
    right: 25%;
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.progress-step i {
    width: 60px;
    height: 60px;
    background: #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.progress-step.active i {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.progress-step span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
}

.progress-step.active span {
    color: #667eea;
}

/* Form Steps */
.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

.form-step h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #333;
    text-align: center;
}

.enhanced-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.enhanced-form-group {
    display: flex;
    flex-direction: column;
}

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

.enhanced-form-group label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.input-with-icon {
    position: relative;
}

.input-with-icon i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #667eea;
    font-size: 1rem;
    z-index: 2;
}

.input-with-icon input {
    padding: 1rem 1rem 1rem 3rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
    width: 100%;
}

.input-with-icon input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Custom Select */
.custom-select {
    position: relative;
}

.custom-select select {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    background: white;
    appearance: none;
    cursor: pointer;
}

.custom-select i {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #667eea;
    pointer-events: none;
}

/* Priority Selector */
.priority-selector {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.priority-selector input[type="radio"] {
    display: none;
}

.priority-option {
    flex: 1;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.priority-option.low i {
    color: #4CAF50;
}

.priority-option.medium i {
    color: #FF9800;
}

.priority-option.high i {
    color: #f44336;
}

.priority-selector input[type="radio"]:checked+.priority-option {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

/* Textarea with Counter */
.textarea-with-counter {
    position: relative;
}

.textarea-with-counter textarea {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.textarea-with-counter textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.char-counter {
    position: absolute;
    bottom: 0.5rem;
    right: 1rem;
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Form Navigation */
.form-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

.form-next-btn,
.form-back-btn,
.form-submit-btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-next-btn,
.form-submit-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.form-next-btn:hover,
.form-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.form-back-btn {
    background: #f1f5f9;
    color: #64748b;
}

.form-back-btn:hover {
    background: #e2e8f0;
}

/* Form Review */
.form-review {
    background: rgba(102, 126, 234, 0.05);
    padding: 2rem;
    border-radius: 15px;
    margin-bottom: 2rem;
}

.review-section {
    margin-bottom: 2rem;
}

.review-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #333;
}

.review-details {
    background: white;
    padding: 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Live Help Section */
.live-help-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.live-help-content {
    display: flex;
    align-items: center;
    gap: 3rem;
    max-width: 600px;
    margin: 0 auto;
}

.help-visual {
    position: relative;
    flex-shrink: 0;
}

.help-avatar {
    position: relative;
}

.help-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.avatar-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
}

.online-indicator {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: #4CAF50;
    border-radius: 50%;
    border: 3px solid white;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

.help-info h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.help-info p {
    opacity: 0.9;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.help-actions {
    display: flex;
    gap: 1rem;
}

.help-btn {
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-btn.primary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.help-btn.secondary {
    background: rgba(37, 211, 102, 0.2);
    color: white;
    border: 2px solid rgba(37, 211, 102, 0.3);
}

.help-btn:hover {
    transform: translateY(-2px);
    color: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-split-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .form-section-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .quick-stats {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .hero-title-modern {
        font-size: 2.5rem;
    }

    .quick-stats {
        flex-direction: column;
        gap: 1rem;
    }

    .contact-methods-grid {
        grid-template-columns: 1fr;
    }

    .enhanced-form-grid {
        grid-template-columns: 1fr;
    }

    .priority-selector {
        flex-direction: column;
    }

    .form-progress {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .live-help-content {
        flex-direction: column;
        text-align: center;
    }

    .help-actions {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .hero-title-modern {
        font-size: 2rem;
    }

    .contact-widget,
    .enhanced-form-container {
        padding: 1.5rem;
    }

    .method-front,
    .method-back {
        padding: 1.5rem;
    }

    .form-navigation {
        flex-direction: column;
        gap: 1rem;
    }

    .form-next-btn,
    .form-back-btn,
    .form-submit-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   LIVE CHAT WIDGET STYLES
   ============================================ */

/* Chat Widget Container */
.chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: 'Inter', sans-serif;
}

/* Chat Toggle Button */
.chat-toggle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    background-size: 200% 200%;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(26, 26, 46, 0.6), 0 0 30px rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: cosmicPulse 3s infinite, cosmicGradient 8s ease infinite;
}

@keyframes cosmicPulse {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(26, 26, 46, 0.6), 0 0 30px rgba(255, 255, 255, 0.1), 0 0 0 0 rgba(100, 150, 255, 0.4);
    }

    50% {
        box-shadow: 0 4px 20px rgba(26, 26, 46, 0.8), 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 10px rgba(100, 150, 255, 0);
    }
}

.chat-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 15% 25%, white, transparent),
        radial-gradient(1px 1px at 25% 15%, white, transparent),
        radial-gradient(2px 2px at 50% 40%, white, transparent),
        radial-gradient(1px 1px at 60% 70%, white, transparent),
        radial-gradient(2px 2px at 80% 20%, white, transparent),
        radial-gradient(1px 1px at 75% 60%, white, transparent),
        radial-gradient(1px 1px at 30% 80%, white, transparent),
        radial-gradient(2px 2px at 85% 85%, white, transparent),
        radial-gradient(1px 1px at 40% 50%, white, transparent),
        radial-gradient(1px 1px at 90% 40%, white, transparent),
        radial-gradient(2px 2px at 10% 60%, white, transparent),
        radial-gradient(1px 1px at 45% 20%, white, transparent),
        radial-gradient(1px 1px at 65% 45%, white, transparent),
        radial-gradient(2px 2px at 35% 65%, white, transparent),
        radial-gradient(1px 1px at 55% 85%, white, transparent),
        radial-gradient(1px 1px at 20% 50%, white, transparent),
        radial-gradient(2px 2px at 70% 30%, white, transparent),
        radial-gradient(1px 1px at 85% 65%, white, transparent),
        radial-gradient(1px 1px at 95% 55%, white, transparent),
        radial-gradient(2px 2px at 5% 90%, white, transparent);
    background-size: 200% 200%;
    opacity: 0.8;
    pointer-events: none;
    animation: starsMove 20s linear infinite;
}

.chat-toggle:hover {
    transform: scale(1.1) rotate(20deg);
    box-shadow: 0 6px 30px rgba(26, 26, 46, 0.8), 0 0 40px rgba(255, 255, 255, 0.2);
}

.chat-toggle.chat-active {
    transform: rotate(90deg);
}

.chat-toggle.chat-pulse {
    animation: chatPulse 2s infinite;
}

@keyframes chatPulse {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(172, 25, 41, 0.4);
    }

    50% {
        box-shadow: 0 4px 30px rgba(172, 25, 41, 0.8);
    }
}

/* Chat Badge */
.chat-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ac1929;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid white;
    animation: badgeBounce 0.5s ease-out;
    box-shadow: 0 2px 10px rgba(172, 25, 41, 0.5);
    z-index: 10;
}

@keyframes badgeBounce {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

/* Chat Window */
.chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 380px;
    max-height: 500px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chat-window.chat-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* Chat Header */
.chat-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: 200% 200%;
    color: white;
    padding: 12px 16px;
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    animation: cosmicGradient 8s ease infinite;
    min-height: 70px;
    max-height: 70px;
}

@keyframes cosmicGradient {
    0% {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    }

    25% {
        background: linear-gradient(135deg, #0f0c29 0%, #302b63 100%);
    }

    50% {
        background: linear-gradient(135deg, #0f2027 0%, #203a43 100%);
    }

    75% {
        background: linear-gradient(135deg, #141e30 0%, #243b55 100%);
    }

    100% {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    }
}

.chat-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 80% 10%, white, transparent),
        radial-gradient(2px 2px at 90% 60%, white, transparent),
        radial-gradient(1px 1px at 33% 80%, white, transparent),
        radial-gradient(1px 1px at 15% 90%, white, transparent),
        radial-gradient(2px 2px at 45% 25%, white, transparent),
        radial-gradient(1px 1px at 70% 40%, white, transparent),
        radial-gradient(1px 1px at 25% 60%, white, transparent),
        radial-gradient(2px 2px at 85% 85%, white, transparent),
        radial-gradient(1px 1px at 10% 20%, white, transparent),
        radial-gradient(1px 1px at 40% 15%, white, transparent),
        radial-gradient(2px 2px at 65% 55%, white, transparent),
        radial-gradient(1px 1px at 95% 35%, white, transparent),
        radial-gradient(1px 1px at 55% 85%, white, transparent),
        radial-gradient(2px 2px at 30% 45%, white, transparent),
        radial-gradient(1px 1px at 75% 20%, white, transparent),
        radial-gradient(1px 1px at 5% 65%, white, transparent),
        radial-gradient(2px 2px at 88% 45%, white, transparent);
    background-size: 200% 200%;
    background-position: 0% 0%;
    pointer-events: none;
    animation: starsMove 20s linear infinite;
}

@keyframes starsMove {
    0% {
        background-position: 0% 0%;
        opacity: 1;
    }

    50% {
        background-position: 100% 100%;
        opacity: 0.8;
    }

    100% {
        background-position: 0% 0%;
        opacity: 1;
    }
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-avatar-cosmos {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
}

.chat-avatar-cosmos i {
    animation: cosmicSpin 20s linear infinite;
}

@keyframes cosmicSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.chat-subtitle {
    display: none;
}

.chat-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.chat-status {
    display: none;
}

.chat-status i {
    font-size: 8px;
    color: #10b981;
    animation: statusBlink 2s infinite;
}

@keyframes statusBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.chat-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 14px;
}

.chat-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Chat Body */
.chat-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    max-height: 400px;
    background: linear-gradient(135deg, #e0e7ff 0%, #fce7f3 50%, #dbeafe 100%);
    background-size: 200% 200%;
    position: relative;
    animation: galaxyFlow 15s ease infinite;
}

@keyframes galaxyFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.chat-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(139, 92, 246, 0.3), transparent),
        radial-gradient(1px 1px at 60% 70%, rgba(236, 72, 153, 0.3), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(59, 130, 246, 0.3), transparent),
        radial-gradient(2px 2px at 80% 10%, rgba(139, 92, 246, 0.2), transparent),
        radial-gradient(1px 1px at 90% 60%, rgba(236, 72, 153, 0.2), transparent),
        radial-gradient(1px 1px at 33% 80%, rgba(59, 130, 246, 0.3), transparent),
        radial-gradient(2px 2px at 15% 90%, rgba(139, 92, 246, 0.3), transparent),
        radial-gradient(1px 1px at 45% 25%, rgba(236, 72, 153, 0.2), transparent),
        radial-gradient(1px 1px at 70% 40%, rgba(59, 130, 246, 0.3), transparent),
        radial-gradient(2px 2px at 25% 60%, rgba(139, 92, 246, 0.2), transparent);
    background-size: 200% 200%;
    pointer-events: none;
    animation: starsMove 25s linear infinite;
}

.chat-body::-webkit-scrollbar {
    width: 6px;
}

.chat-body::-webkit-scrollbar-track {
    background: rgba(224, 231, 255, 0.5);
}

.chat-body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    border-radius: 3px;
}

/* Chat Messages */
.chat-message {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    animation: messageSlide 0.3s ease-out;
}

@keyframes messageSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(26, 26, 46, 0.5), 0 0 15px rgba(255, 255, 255, 0.1);
}

.message-content {
    background: white;
    padding: 12px 16px;
    border-radius: 0 16px 16px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 80%;
}

.message-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #1e293b;
}

.message-content p+p {
    margin-top: 8px;
}

.message-content a {
    color: #ac1929;
    font-weight: 600;
    text-decoration: none;
}

.message-content a:hover {
    text-decoration: underline;
}

/* User Message */
.user-message {
    justify-content: flex-end;
}

.user-message .message-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 16px 0 16px 16px;
}

.user-message .message-content p {
    color: white;
}

/* AI Badge */
.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    margin-top: 8px;
    float: right;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-badge i {
    font-size: 10px;
}

/* Message Links */
.message-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.message-link-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.message-link-btn:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Typing Indicator */
.typing-indicator .message-content {
    padding: 12px 20px;
}

.typing-dots {
    display: flex;
    gap: 4px;
}

.typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    animation: typingBounce 1.4s infinite;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-10px);
    }
}

/* Quick Replies */
.chat-quick-replies {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
}

.quick-reply {
    background: white;
    border: 2px solid #e2e8f0;
    color: #475569;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-align: left;
}

.quick-reply:hover {
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.quick-reply i {
    font-size: 16px;
}

/* Chat Footer */
.chat-footer {
    padding: 16px;
    background: white;
    border-radius: 0 0 20px 20px;
    border-top: 1px solid #e2e8f0;
}

.chat-input-wrapper {
    display: flex;
    gap: 8px;
    margin-bottom: 0px;
}

.chat-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 25px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.chat-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.chat-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(26, 26, 46, 0.5), 0 0 15px rgba(255, 255, 255, 0.1);
}

.chat-send-btn:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 4px 12px rgba(26, 26, 46, 0.7), 0 0 20px rgba(255, 255, 255, 0.2);
}

/* Contact Options */
.chat-contact-options {
    display: none;
}

.chat-footer .contact-option {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    font-size: 18px;
    transition: all 0.3s ease;
}

.chat-footer .contact-option.whatsapp {
    background: #25d366;
}

.chat-footer .contact-option.phone {
    background: #3b82f6;
}

.chat-footer .contact-option.email {
    background: #8b5cf6;
}

.chat-footer .contact-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .chat-window {
        width: calc(100vw - 40px);
        max-width: 380px;
    }
}

@media (max-width: 480px) {
    .chat-widget {
        bottom: 10px;
        right: 10px;
    }

    .chat-toggle {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }

    .chat-window {
        bottom: 76px;
        width: calc(100vw - 20px);
        max-height: calc(100vh - 120px);
    }

    .chat-body {
        max-height: calc(100vh - 300px);
    }

    .chat-quick-replies {
        grid-template-columns: 1fr;
    }
}

/* ========== ENHANCED TRACKING MODAL WITH GLASS MORPHISM ========== */
.tracking-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(172, 25, 41, 0.15));
    backdrop-filter: blur(15px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
    overflow-y: auto;
}

.tracking-modal-overlay.active {
    opacity: 1;
}

.tracking-glass-modal {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92));
    backdrop-filter: blur(30px);
    border-radius: 32px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 10px 25px rgba(172, 25, 41, 0.15);
    max-width: 1200px;
    width: 95%;
    max-height: 95vh;
    overflow-y: auto;
    padding: 40px;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tracking-modal-overlay.active .tracking-glass-modal {
    transform: scale(1);
    animation: modalSlideUp 0.5s ease;
}

@keyframes modalSlideUp {
    from {
        transform: translateY(50px) scale(0.9);
        opacity: 0;
    }

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

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.1), rgba(172, 25, 41, 0.15));
    border: 2px solid rgba(172, 25, 41, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    font-size: 1.3rem;
    color: #AC1929;
}

.modal-close-btn:hover {
    background: linear-gradient(135deg, #AC1929, #D81B2C);
    border-color: #AC1929;
    color: white;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 8px 20px rgba(172, 25, 41, 0.4);
}

.modal-header-section {
    text-align: left;
    margin-bottom: 30px;
    position: relative;
}

.header-title-row {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 25px;
    margin-bottom: 0;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.1), rgba(172, 25, 41, 0.05));
    border: 2px solid rgba(172, 25, 41, 0.2);
    border-radius: 20px;
    padding: 20px;
    min-width: 160px;
    flex-shrink: 0;
}

.header-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    flex: 1;
}

.title-voice-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.tracking-logo {
    width: 120px;
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(172, 25, 41, 0.2));
    animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

.modal-header-section h2 {
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #1a1a1a, #AC1929);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    letter-spacing: -0.5px;
    flex-shrink: 0;
}

.header-voice-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.voice-btn-header {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #AC1929, #8a0e23);
    color: white;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(172, 25, 41, 0.3);
}

.voice-btn-header:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(172, 25, 41, 0.5);
}

.voice-btn-header:active {
    transform: scale(0.95);
}

.voice-btn-header.mute-btn {
    background: linear-gradient(135deg, #666, #444);
}

.voice-btn-header.mute-btn:hover {
    box-shadow: 0 6px 20px rgba(100, 100, 100, 0.5);
}

.tracking-subtitle {
    color: #666;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Journey Animation Container */
.journey-animation-container {
    background: linear-gradient(135deg, rgba(172, 25, 41, 0.08), rgba(172, 25, 41, 0.12));
    border-radius: 20px;
    padding: 30px 35px;
    margin: 25px 0;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(172, 25, 41, 0.15);
    box-shadow: 0 8px 25px rgba(172, 25, 41, 0.1);
}

.journey-path {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 120px;
}

.journey-start,
.journey-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
    flex-shrink: 0;
}

.journey-start i,
.journey-end i {
    font-size: 1.5rem;
    color: #AC1929;
}

.journey-start span,
.journey-end span {
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    text-align: center;
    max-width: 100px;
}

.journey-road {
    flex: 1;
    position: relative;
    height: 60px;
    margin: 0 20px;
}

.road-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            transparent 0%,
            transparent 40%,
            #AC1929 40%,
            #AC1929 60%,
            transparent 60%,
            transparent 100%);
    background-size: 30px 4px;
    background-repeat: repeat-x;
    transform: translateY(-50%);
    animation: roadScroll 1s linear infinite;
}

@keyframes roadScroll {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 30px 0;
    }
}

.animated-truck {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    color: #AC1929;
    z-index: 3;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

@keyframes truckDrive {
    0% {
        left: 0%;
    }

    100% {
        left: 100%;
    }
}

.journey-checkpoint {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.checkpoint-marker {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 3px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.checkpoint-marker.completed {
    border-color: #10b981;
    background: #10b981;
    color: white;
}

.checkpoint-marker.current {
    border-color: #3b82f6;
    background: #3b82f6;
    color: white;
    animation: checkpoint-pulse 1.5s infinite;
}

@keyframes checkpoint-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }

    50% {
        transform: scale(1.2);
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
}

.checkpoint-label {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: #666;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 4px;
}

/* Info Cards Grid */
.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 20px 0;
}

.info-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
    backdrop-filter: blur(15px);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: cardSlideIn 0.6s ease both;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.info-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 40px rgba(172, 25, 41, 0.2), 0 5px 15px rgba(0, 0, 0, 0.15);
    border-color: rgba(172, 25, 41, 0.3);
}

.info-card i {
    font-size: 1.6rem;
    background: linear-gradient(135deg, #AC1929, #D81B2C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(172, 25, 41, 0.2));
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.card-label {
    font-size: 0.75rem;
    color: #777;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-value {
    font-size: 1rem;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.3px;
}

.card-value.delivered {
    color: #10b981;
}

.card-value.in-transit {
    color: #3b82f6;
}

.card-value.pending {
    color: #f59e0b;
}

/* Voice Control Section */
.voice-control-section {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 20px 0;
}

.voice-btn {
    background: linear-gradient(135deg, #AC1929, #D81B2C);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(172, 25, 41, 0.35), 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.voice-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.5s;
}

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

.voice-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(172, 25, 41, 0.5), 0 5px 15px rgba(0, 0, 0, 0.15);
}

.voice-btn.secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.voice-btn i {
    font-size: 1.2rem;
    animation: voice-pulse 2s infinite;
}

@keyframes voice-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

/* Timeline Section */
.timeline-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 15px; /* Compact padding */
    margin-top: 15px; /* Compact margin */
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    max-height: 280px; /* Limit height */
    overflow-y: auto;  /* Enable scroll */
}

.timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px; /* Compact margin */
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
    padding-bottom: 5px;
}

.timeline-section h3 {
    font-size: 1.3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #1a1a1a, #AC1929);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.3px;
}

.timeline-section h3 i {
    background: linear-gradient(135deg, #AC1929, #D81B2C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.view-full-timeline-btn {
    background: linear-gradient(135deg, #AC1929, #8a0e23);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(172, 25, 41, 0.3);
}

.view-full-timeline-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(172, 25, 41, 0.5);
}

.view-full-timeline-btn:active {
    transform: translateY(0);
}

.timeline-vertical {
    position: relative;
}

.timeline-step {
    display: flex;
    gap: 10px; /* Reduced gap */
    margin-bottom: 12px; /* Reduced margin */
    position: relative;
    animation: stepFadeIn 0.6s ease both;
}

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

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

.step-marker {
    position: relative;
    flex-shrink: 0;
}

.marker-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    border: 3px solid #ddd;
    position: relative;
    z-index: 2;
}

.timeline-step.completed .marker-dot {
    border-color: #10b981;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.timeline-step.current .marker-dot {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    animation: dot-pulse 1.5s infinite;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

@keyframes dot-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6), 0 4px 12px rgba(59, 130, 246, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(59, 130, 246, 0), 0 4px 12px rgba(59, 130, 246, 0.4);
        transform: scale(1.1);
    }
}

.marker-line {
    position: absolute;
    left: 50%;
    top: 20px;
    width: 2px;
    height: calc(100% + 30px);
    background: linear-gradient(180deg, #ddd, transparent);
    transform: translateX(-50%);
}

.timeline-step.completed .marker-line {
    background: linear-gradient(180deg, #10b981, transparent);
}

.step-content {
    flex: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
    padding: 12px 15px; /* Compact padding */
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.step-content:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 20px rgba(172, 25, 41, 0.12);
    border-color: rgba(172, 25, 41, 0.2);
}

.step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.step-header h4 {
    font-size: 1rem;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: -0.2px;
}

.step-time {
    font-size: 0.75rem;
    color: #888;
    font-weight: 600;
    background: rgba(172, 25, 41, 0.08);
    padding: 4px 10px;
    border-radius: 12px;
    letter-spacing: 0.3px;
}

.step-location {
    display: flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #AC1929, #D81B2C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.step-location i {
    background: linear-gradient(135deg, #AC1929, #D81B2C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.step-description {
    color: #666;
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.6;
    font-weight: 500;
}

/* Custom Scrollbar */
.tracking-glass-modal::-webkit-scrollbar {
    width: 8px;
}

.tracking-glass-modal::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.tracking-glass-modal::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #AC1929, #D81B2C);
    border-radius: 10px;
    transition: background 0.3s;
}

.tracking-glass-modal::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #D81B2C, #AC1929);
}

@media (max-width: 768px) {
    .tracking-glass-modal {
        padding: 20px;
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .modal-header-section h2 {
        font-size: 1.5rem;
    }

    .info-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .journey-animation-container {
        padding: 20px;
    }

    .journey-path {
        flex-direction: column;
        gap: 40px;
    }

    .journey-road {
        width: 4px;
        height: 200px;
        margin: 20px 0;
    }

    .road-line {
        width: 4px;
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(180deg,
                transparent 0%,
                transparent 40%,
                #AC1929 40%,
                #AC1929 60%,
                transparent 60%,
                transparent 100%);
        background-size: 4px 30px;
        animation: roadScrollVertical 1s linear infinite;
    }

    @keyframes roadScrollVertical {
        from {
            background-position: 0 0;
        }

        to {
            background-position: 0 30px;
        }
    }

    .animated-truck {
        left: 50%;
        top: 0%;
        transform: translate(-50%, -50%) rotate(90deg);
    }

    @keyframes truckDrive {
        0% {
            top: 0%;
        }

        100% {
            top: 100%;
        }
    }

    .info-cards-grid {
        grid-template-columns: 1fr;
    }

    .voice-control-section {
        flex-direction: column;
    }

    .voice-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Home Page Hero Section Layout Fixes */

#home-tab .hero {
    min-height: 90vh !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 110px !important;
    padding-bottom: 60px !important;
    overflow: visible !important;
}

#home-tab .hero-content {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 2rem !important;
    padding: 2rem 5% !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: none !important;
    text-align: left !important;
}

#home-tab .hero-text {
    flex: 0 1 60% !important;
    width: auto !important;
    max-width: 60% !important;
    min-width: 500px !important;
    text-align: left !important;
    margin: 0 !important;
}

#home-tab .hero-title {
    text-align: left !important;
    font-size: 3rem !important;
    white-space: normal !important;
    line-height: 1.2 !important;
}

#home-tab .hero-description {
    text-align: left !important;
    max-width: 90% !important;
    float: left !important;
    margin-left: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 1.15rem !important;
    line-height: 1.5 !important;
}

#home-tab .hero-tracking-widget {
    display: block !important;
    width: 500px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
    #home-tab .hero-content {
        justify-content: center !important;
        gap: 2rem !important;
    }

    #home-tab .hero-text {
        max-width: 55% !important;
        flex: 0 1 55% !important;
    }

    #home-tab .hero-tracking-widget {
        width: 400px !important;
    }
}

@media (max-width: 1024px) {

    #home-tab .hero-content,
    .hero-content {
        flex-direction: column !important;
        text-align: center !important;
        padding-top: 40px !important;
        justify-content: flex-start !important;
    }

    #home-tab .hero-text {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    #home-tab .hero-title,
    #home-tab .hero-description {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }

    #home-tab .hero-tracking-widget {
        width: 100% !important;
        max-width: 450px !important;
    }
}

/* FIX: Remove unwanted green box around tracking widget icon ONLY */
.hero-tracking-widget .tracking-widget-header i,
.hero-tracking-widget .tracking-widget-header i:focus,
.hero-tracking-widget .tracking-widget-header i:focus-visible,
.hero-tracking-widget .tracking-widget-header i:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-outline: none !important;
}

/* Prevent focus ring on tracking icon */
.hero-tracking-widget .tracking-widget-header {
    outline: none !important;
}

.hero-tracking-widget .tracking-widget-header:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Consolidated from custom.css & Robust Sticky Footer Fix
   ========================================================================== */

/* Robust Sticky Footer Implementation */
html {
    height: auto !important;
}

body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    margin: 0 !important;
    position: relative; 
}

.main-content {
    flex: 1 0 auto !important;
}

.footer {
    flex-shrink: 0 !important;
}

/* Hero Widget Alignment & Interaction Overrides */
.hero-tracking-widget .tracking-widget-header,
.hero-booking-widget .booking-widget-header .header-main {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.hero-tracking-widget {
    padding-top: 1.25rem !important;
}

.hero-tracking-widget .tracking-widget-header {
    border-bottom: 2px solid rgba(172, 25, 41, 0.1);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    min-height: auto !important;
}

.tracking-marquee {
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.tracking-marquee span {
    animation: marquee-scroll 12s linear infinite !important;
    padding-left: 0 !important;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(100%);
    }

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

.hero-tracking-widget .tracking-widget-header i,
.hero-booking-widget .booking-widget-header .header-main i {
    font-size: 22px !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    -webkit-text-fill-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    animation: none !important;
}

.hero-tracking-widget .widget-title,
.hero-booking-widget .widget-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--text-primary) !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.hero-booking-widget .booking-widget-header {
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.5rem !important;
}


/* Professional 4-Step Tracking Journey UI */
.tracking-progress-stepper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2.5rem 2rem 1.5rem;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.tracking-progress-stepper::before {
    content: '';
    position: absolute;
    top: 63px; /* Precise center alignment (padding 40px + half icon height 24px - 1.5px line) */
    left: calc(2rem + 25px);
    right: calc(2rem + 25px);
    height: 3px;
    background: #e2e8f0;
    z-index: 1;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 1;
    text-align: center;
}

.progress-step .step-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    border: 3px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #94a3b8;
    margin-bottom: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.progress-step .step-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    transition: all 0.3s ease;
}

/* Active & Completed States */
.progress-step.completed .step-icon {
    background: #10b981;
    border-color: #10b981;
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.progress-step.active .step-icon {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: scale(1.15);
    box-shadow: 0 0 0 5px rgba(172, 25, 41, 0.15);
}

.progress-step.completed .step-label {
    color: #10b981;
}

.progress-step.active .step-label {
    color: var(--primary-color);
    font-weight: 700;
}

/* Success State (Delivered) - Overrides Active */
.progress-step.success .step-icon {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.progress-step.success .step-label {
    color: #10b981 !important;
    font-weight: 700;
}

/* Active Green State (for ongoing steps) */
.progress-step.active-green .step-icon {
    background: #10b981;
    border-color: #10b981;
    color: white;
    transform: scale(1.15);
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.2);
}

.progress-step.active-green .step-label {
    color: #10b981;
    font-weight: 700;
}

/* Route Info Below Stepper */
.tracking-route-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem 0 2rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed rgba(226, 232, 240, 0.8);
    background: rgba(248, 250, 252, 0.5);
    border-radius: 0 0 12px 12px;
}

.route-point {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    background: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.route-line-connector {
    flex: 0 0 60px;
    height: 2px;
    background: repeating-linear-gradient(90deg, #cbd5e1 0, #cbd5e1 6px, transparent 6px, transparent 10px);
    position: relative;
}

.route-line-connector::after {
    content: '✈';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    background: white;
    padding: 0 5px;
    color: #94a3b8;
    font-size: 0.8rem;
}

/* Responsive Fixes */
@media (max-width: 600px) {
    .tracking-progress-stepper {
        padding: 2rem 0.5rem 1rem;
    }
    
    .tracking-progress-stepper::before {
        left: 30px;
        right: 30px;
        top: 50px;
    }
    
    .progress-step .step-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    
    .progress-step .step-label {
        font-size: 0.7rem;
        max-width: 60px;
    }
    
    .route-point {
        font-size: 0.85rem;
        padding: 0.35rem 0.75rem;
    }
}

/* ==========================================================================
   UNIFIED TRACKING WIZARD STYLES (Redesign)
   ========================================================================== */

/* 1. Main Unified Container */
.tracking-dashboard-body {
    padding: 0 2rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
    background: transparent;
}

/* 2. Two-Column Content Wrapper */
.tracking-content-wrapper {
    display: flex;
    gap: 24px;
    margin-top: 24px;
}

.tracking-content-wrapper .timeline-section {
    flex: 2;
    min-width: 0;
}

.tracking-content-wrapper .summary-section {
    flex: 1;
    min-width: 0;
}

/* 3. Compact Route Info */
.tracking-route-info.compact {
    background: transparent;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    padding: 0 0 1.5rem;
    margin-bottom: 1.5rem;
    gap: 3rem;
    border-radius: 0;
}

.tracking-route-info.compact .route-point {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(203, 213, 225, 0.6);
    padding: 6px 14px;
    font-size: 0.95rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.tracking-route-info.compact .route-line-connector {
    flex: 0 0 100px;
}

/* 4. Compact Stats Grid (2x2 in right column) */
.info-cards-grid.compact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.compact-grid .info-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    box-shadow: none;
    padding: 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: auto;
}

.compact-grid .info-card i {
    font-size: 1.2rem;
    margin-bottom: 4px;
    background: linear-gradient(135deg, #64748b, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.compact-grid .info-card .card-content {
    text-align: left;
    width: 100%;
}

.compact-grid .info-card .card-label {
    font-size: 0.7rem;
    color: #64748b;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.compact-grid .info-card .card-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    word-break: break-word;
    line-height: 1.2;
}

/* Status colors in compact card */
.compact-grid .info-card .card-value[class*="status-"] {
    display: inline-block;
    padding: 2px 0;
    background: transparent;
    color: inherit;
    border-radius: 0;
}

/* 5. Embedded Timeline (Premium & Compact) */
.timeline-section.embedded {
    background: transparent;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
    max-height: none;
    overflow-y: visible;
    border-top: 1px solid #e2e8f0;
    padding-top: 0;
}

.timeline-section.embedded .timeline-header {
    margin-bottom: 1rem;
    justify-content: space-between;
    gap: 10px;
    position: static;
    background: transparent;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.timeline-section.embedded h3 {
    font-size: 1rem;
    color: #334155;
    background: none;
    -webkit-text-fill-color: initial;
    margin: 0;
    font-weight: 600;
}

.timeline-section.embedded h3 i {
    font-size: 0.9rem;
    color: var(--primary-color);
    background: none;
    -webkit-text-fill-color: initial;
    margin-right: 6px;
}

.view-full-timeline-btn {
    background: transparent;
    border: none;
    color: var(--primary-color);
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.view-full-timeline-btn:hover {
    background: rgba(172, 25, 41, 0.1);
}

/* Compact Timeline Steps */
.timeline-section.embedded .timeline-step {
    display: flex;
    gap: 15px;
    margin-bottom: 0;
    padding-bottom: 1.2rem;
    min-height: auto;
}

/* Timeline Left Line Container */
.timeline-section.embedded .step-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px;
    position: relative;
    flex-shrink: 0;
}

.timeline-section.embedded .marker-dot {
    width: 10px;
    height: 10px;
    border-width: 2px;
    background: white;
    border-color: #cbd5e1;
    border-radius: 50%;
    z-index: 2;
    margin-top: 6px;
    flex-shrink: 0;
}

.timeline-section.embedded .timeline-step.completed .marker-dot {
    background: #10b981;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.timeline-section.embedded .marker-line {
    position: absolute;
    top: 16px;
    bottom: -12px;
    left: 50%;
    width: 1px;
    height: auto;
    background: #e2e8f0;
    transform: translateX(-50%);
    z-index: 1;
}

.timeline-section.embedded .timeline-step:last-child .marker-line {
    display: none;
}

/* Reset step content styles for embedded view */
.timeline-section.embedded .step-content {
    flex: 1;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    min-width: 0;
}

.timeline-section.embedded .step-content:hover {
    transform: none;
    box-shadow: none;
}

.timeline-section.embedded .step-header {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 4px;
}

.timeline-section.embedded .step-header h4 {
    font-size: 0.9rem;
    color: #334155;
    font-weight: 700;
    margin: 0;
}

/* Timestamp Pill (Top Right) */
.timeline-section.embedded .step-time {
    margin-left: auto;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
    font-weight: 500;
}

.timeline-section.embedded .step-location {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    -webkit-text-fill-color: initial;
}

.timeline-section.embedded .step-description {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 4px;
    margin-bottom: 0;
}

/* Timeline Item Hover Effects */
.timeline-item {
    position: relative;
    border-left: 4px solid transparent;
    transition: all 300ms ease-in-out;
    cursor: pointer;
}

.timeline-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    background-color: #fef2f2;
    border-left-color: #b91c1c;
}

.timeline-item:hover .step-location i {
    color: #b91c1c;
    transition: color 300ms ease-in-out;
}

/* Responsive: Stack on tablets and smaller */
@media (max-width: 992px) {
    .tracking-content-wrapper {
        flex-direction: column;
        gap: 24px;
    }
    
    .tracking-dashboard-body {
        padding: 0 1.5rem 1.5rem;
    }
    
    .info-cards-grid.compact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .tracking-dashboard-body {
        padding: 0 1rem 1rem;
    }
    
    .tracking-progress-stepper {
        padding: 1.5rem 1rem 1rem;
    }
    
    .tracking-route-info.compact {
        flex-direction: column;
        gap: 1rem;
        padding: 0 0 1rem;
        margin-bottom: 1rem;
    }
    
    .tracking-route-info.compact .route-line-connector {
        display: none;
    }
    
    .info-cards-grid.compact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .compact-grid .info-card {
        padding: 10px;
    }
    
    .timeline-section.embedded {
        border-top: none;
        padding-top: 0;
    }
}

.timeline-section.embedded .step-location i {
    background: none;
    -webkit-text-fill-color: initial;
    color: #94a3b8;
    font-size: 0.8rem;
}

.timeline-section.embedded .step-description {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.4;
    margin-top: 4px;
}

/* Scrollbar for embedded timeline */
.timeline-section.embedded::-webkit-scrollbar {
    width: 6px;
}
.timeline-section.embedded::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}
.timeline-section.embedded::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

/* Responsive adjustments for unified wizard */
@media (max-width: 768px) {
    .info-cards-grid.compact-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 on mobile */
    }
    
    .tracking-dashboard-body {
        padding: 0 1.25rem 1.25rem;
    }
    
    .tracking-route-info.compact {
        gap: 1rem;
    }
    
    .tracking-route-info.compact .route-line-connector {
        flex: 1;
        min-width: 20px;
    }
}