/* Section 1 Styles - Complete Professional Version */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}

/* Section 1 - Header & Banner */
.m1-section {
    min-height: 100vh;
    background: linear-gradient(135deg, #1694ad 0%, #15baa7 50%, #1a92ad 100%);
    position: relative;
    overflow: hidden;
    /*padding-top: 70px; */
}

/* Floating Elements Animation */
.m1-floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.m1-float-item {
    position: absolute;
    color: rgba(255, 255, 255, 0.1);
    font-size: 2rem;
    animation: m1-float 20s infinite linear;
}

.m1-float-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.m1-float-2 {
    top: 60%;
    right: 15%;
    animation-delay: 5s;
    font-size: 3rem;
}

.m1-float-3 {
    bottom: 20%;
    left: 20%;
    animation-delay: 10s;
    font-size: 2.5rem;
}

.m1-float-4 {
    top: 40%;
    right: 25%;
    animation-delay: 15s;
    font-size: 2.2rem;
}

.m1-float-5 {
    bottom: 30%;
    right: 30%;
    animation-delay: 3s;
    font-size: 1.8rem;
}

.m1-float-6 {
    top: 70%;
    left: 15%;
    animation-delay: 8s;
    font-size: 2.2rem;
}

@keyframes m1-float {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-100px) rotate(180deg);
    }
    100% {
        transform: translateY(0) rotate(360deg);
    }
}

/* Header Styles - Fixed with Blurry Background on Scroll */
.m1-header {
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition: all 0.3s ease;
    background: transparent;
}

/* When scrolled - Apply blurry background */
.m1-header.m1-header-scrolled {
    background: rgba(22, 148, 173, 0.3); /* Semi-transparent background */
    backdrop-filter: blur(12px) saturate(180%); /* Blurry effect */
    -webkit-backdrop-filter: blur(12px) saturate(180%); /* For Safari */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Subtle border */
}

/* Alternative - Even more glass morphism effect */
.m1-header.m1-header-scrolled.glass-effect {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px) saturate(200%);
    -webkit-backdrop-filter: blur(15px) saturate(200%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.m1-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

/*.m1-logo-wrapper i {*/
/*    font-size: 2rem;*/
/*    color: white;*/
/*    animation: m1-logo-spin 10s infinite linear;*/
/*}*/

.m1-logo-wrapper img {
    font-size: 2rem;
    color: white;
    animation: m1-logo-spin 10s infinite linear;
}

@keyframes m1-logo-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.m1-logo-wrapper span {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Added text shadow for better visibility */
}

.m1-nav-link {
    color: white !important;
    font-weight: 500;
    margin: 0 15px;
    font-size: 0.95rem;
    position: relative;
    padding: 5px 0 !important;
    transition: all 0.3s;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Added text shadow */
}

.m1-nav-link i {
    margin-right: 5px;
    font-size: 0.8rem;
}

.m1-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: white;
    transition: width 0.3s ease;
}

.m1-nav-link:hover::after {
    width: 100%;
}

.m1-nav-link:hover {
    transform: translateY(-2px);
}

.m1-header-btns {
    display: flex;
    align-items: center;
    gap: 20px;
}

.m1-login-link {
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Added text shadow */
}

.m1-login-link i {
    font-size: 0.9rem;
}

.m1-login-link:hover {
    opacity: 0.8;
    color: white;
    transform: translateX(-2px);
}

.m1-try-btn {
    background: white;
    color: #1694ad;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.m1-try-btn i {
    transition: transform 0.3s;
}

.m1-try-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    color: #15baa7;
}

.m1-try-btn:hover i {
    transform: translateX(5px);
}

/* Banner Styles */
.m1-banner {
    padding: 80px 0 40px;
    position: relative;
    z-index: 10;
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
}

/* Live Status Badge */
.m1-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 50px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-wrap: wrap;
}

.m1-pulse {
    width: 10px;
    height: 10px;
    background: #4ade80;
    border-radius: 50%;
    position: relative;
}

.m1-pulse::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #4ade80;
    border-radius: 50%;
    animation: m1-pulse 2s infinite;
}

@keyframes m1-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

.m1-badge-text {
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
}

.m1-badge-users {
    color: white;
    font-size: 0.85rem;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: 10px;
}

/* Stats Row */
.m1-stats-row {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.m1-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s;
}

.m1-stat-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.2);
}

.m1-stat-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
}

.m1-stat-content {
    display: flex;
    flex-direction: column;
}

.m1-stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.m1-stat-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Main Heading */
.m1-main-heading {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 15px;
    line-height: 1.2;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.m1-gradient-text {
    background: linear-gradient(135deg, #fff, #e0f2fe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Description */
.m1-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    max-width: 90%;
    line-height: 1.6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.m1-description strong {
    color: white;
    font-weight: 600;
}

.m1-highlight {
    color: white;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Feature Pills */
.m1-feature-pills {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.m1-pill {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px 14px;
    border-radius: 50px;
    color: white;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
    cursor: default;
}

.m1-pill:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.m1-pill i {
    font-size: 0.85rem;
}

/* CTA Group */
.m1-cta-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.m1-register-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    color: #1694ad;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.m1-register-btn i {
    transition: transform 0.3s;
}

.m1-register-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    color: #15baa7;
}

.m1-register-btn:hover i {
    transform: translateX(5px);
}

.m1-demo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
}

.m1-demo-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    color: white;
}

/* Trust Badges */
.m1-trust-badges {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.m1-trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
}

.m1-trust-item i {
    color: white;
    font-size: 0.9rem;
}

/* Enhanced Tracking Card */
.m1-tracking-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.3s;
    position: relative;
    z-index: 30;
}

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

.m1-tracking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.m1-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.m1-header-left i {
    font-size: 1.8rem;
    color: #1694ad;
    background: rgba(22, 148, 173, 0.1);
    padding: 10px;
    border-radius: 12px;
}

.m1-header-left div {
    display: flex;
    flex-direction: column;
}

.m1-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.m1-subtitle {
    font-size: 0.75rem;
    color: #666;
}

.m1-header-badge {
    background: linear-gradient(135deg, #1694ad, #15baa7);
    color: white;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.m1-header-badge i {
    font-size: 0.5rem;
    animation: m1-blink 2s infinite;
}

@keyframes m1-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* User Stats */
.m1-user-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    gap: 10px;
}

.m1-user-stat {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m1-user-stat i {
    font-size: 1.8rem;
    color: #1694ad;
    opacity: 0.5;
}

.m1-user-stat div {
    display: flex;
    flex-direction: column;
}

.m1-user-stat .m1-stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1694ad;
}

.m1-user-stat .m1-stat-label {
    font-size: 0.6rem;
    color: #666;
}

.m1-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}

.m1-rating i {
    color: #ffb700;
    font-size: 0.8rem;
}

.m1-rating span {
    color: #666;
    font-weight: 600;
    font-size: 0.75rem;
    margin-left: 3px;
}

/* Order Details */
.m1-order-details {
    background: rgba(22, 148, 173, 0.05);
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 15px;
}

.m1-order-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.85rem;
}

.m1-order-item:last-child {
    margin-bottom: 0;
}

.m1-label {
    color: #666;
    font-weight: 500;
}

.m1-label i {
    margin-right: 4px;
    color: #1694ad;
    font-size: 0.75rem;
}

.m1-value {
    color: #333;
    font-weight: 600;
}

/* Tracking Message */
.m1-tracking-message {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    padding: 12px;
    background: rgba(22, 148, 173, 0.05);
    border-radius: 12px;
}

.m1-message-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.m1-message-content {
    flex: 1;
}

.m1-message-header {
    font-weight: 700;
    color: #1694ad;
    display: block;
    margin-bottom: 3px;
    font-size: 0.9rem;
}

.m1-message-content p {
    font-size: 0.8rem;
    color: #444;
    margin: 0;
    line-height: 1.4;
}

.m1-message-content strong {
    color: #1694ad;
}

/* Tracking Progress */
.m1-tracking-progress {
    margin-bottom: 20px;
}

.m1-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.8rem;
    color: #666;
}

.m1-progress-header i {
    margin-right: 4px;
}

.m1-time {
    font-weight: 600;
    color: #1694ad;
}

.m1-progress-bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

.m1-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1694ad, #15baa7);
    border-radius: 10px;
    transition: width 0.3s;
}

.m1-progress-steps {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
}

.m1-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    color: #999;
    flex: 1;
    text-align: center;
}

.m1-step.completed {
    color: #1694ad;
}

.m1-step.active {
    color: #1694ad;
}

.m1-step i {
    font-size: 0.9rem;
}

/* Map Preview */
.m1-map-preview {
    position: relative;
    margin-bottom: 15px;
    border-radius: 12px;
    overflow: hidden;
    height: 60px;
}

.m1-map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.m1-map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(22, 148, 173, 0.3);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Delivery Info */
.m1-delivery-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: rgba(22, 148, 173, 0.05);
    border-radius: 12px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.m1-delivery-person {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m1-delivery-person img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.m1-delivery-person div {
    display: flex;
    flex-direction: column;
}

.m1-name {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.m1-role {
    font-size: 0.7rem;
    color: #666;
}

.m1-contact {
    display: flex;
    gap: 8px;
}

.m1-contact-btn {
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1694ad;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.m1-contact-btn:hover {
    background: #1694ad;
    color: white;
    transform: scale(1.1);
}

/* Card Actions */
.m1-card-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.m1-track-btn {
    flex: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #1694ad, #15baa7);
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.m1-track-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(22, 148, 173, 0.3);
    color: white;
}

.m1-track-badge {
    background: rgba(255, 255, 255, 0.3);
    padding: 2px 6px;
    border-radius: 20px;
    font-size: 0.6rem;
    margin-left: 4px;
}

.m1-share-btn {
    flex: 1;
    padding: 10px;
    background: white;
    border-radius: 12px;
    color: #1694ad;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.3s;
    border: 1px solid rgba(22, 148, 173, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.m1-share-btn:hover {
    background: #1694ad;
    color: white;
    transform: translateY(-2px);
}

.m1-remind-btn {
    width: 40px;
    padding: 10px;
    background: white;
    border-radius: 12px;
    color: #1694ad;
    text-decoration: none;
    transition: all 0.3s;
    border: 1px solid rgba(22, 148, 173, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.m1-remind-btn:hover {
    background: #1694ad;
    color: white;
    transform: translateY(-2px);
}

/* Card Footer */
.m1-card-footer {
    display: flex;
    justify-content: space-around;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    gap: 10px;
}

.m1-footer-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s;
}

.m1-footer-item:hover {
    color: #1694ad;
    transform: translateY(-2px);
}

.m1-footer-item i {
    font-size: 0.9rem;
}

/* Scroll Indicator */
.m1-scroll-indicator {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    animation: m1-bounce 2s infinite;
}

.m1-mouse {
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    position: relative;
}

.m1-wheel {
    width: 3px;
    height: 6px;
    background: white;
    border-radius: 2px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: m1-scroll 2s infinite;
}

@keyframes m1-scroll {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(15px);
    }
}

.m1-arrow i {
    color: white;
    font-size: 1rem;
}

.m1-scroll-text {
    color: white;
    font-size: 0.7rem;
    opacity: 0.7;
}

@keyframes m1-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-8px);
    }
    60% {
        transform: translateX(-50%) translateY(-4px);
    }
}

/* Navbar Toggler Styles */
.navbar-toggler {
    border: none;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 6px 10px;
    border-radius: 8px;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 1.2em;
    height: 1.2em;
}

/* Ripple Effect */
.m1-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: m1-ripple 0.6s ease-out;
    pointer-events: none;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
}

@keyframes m1-ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .m1-main-heading {
        font-size: 2.8rem;
    }
    
    .m1-tracking-card {
        max-width: 440px;
    }
}

@media (max-width: 991px) {
    .m1-section {
        /*padding-top: 60px;*/
    }
    
    .m1-banner {
        min-height: calc(100vh - 60px);
        padding: 80px 0 30px;
    }
    
    .m1-main-heading {
        font-size: 2.5rem;
    }
    
    .m1-description {
        max-width: 100%;
    }
    
    .m1-tracking-card {
        margin: 30px auto 0;
        max-width: 100%;
    }
    
    .m1-stats-row {
        gap: 12px;
    }
    
    .m1-stat-item {
        padding: 6px 14px;
    }
    
    .m1-stat-number {
        font-size: 1.3rem;
    }
    
    /* Mobile menu background with blur */
    .navbar-collapse {
        background: rgba(22, 148, 173, 0.3);
        backdrop-filter: blur(15px) saturate(180%);
        -webkit-backdrop-filter: blur(15px) saturate(180%);
        padding: 15px;
        border-radius: 16px;
        margin-top: 10px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        position: relative;
        z-index: 10000;
    }
    
    .m1-nav-link {
        text-align: center;
        padding: 8px 0 !important;
        margin: 3px 0;
    }
    
    .m1-nav-link::after {
        display: none;
    }
    
    .m1-nav-link:hover {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-radius: 8px;
    }
    
    .m1-header-btns {
        margin-top: 15px;
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }
    
    .m1-login-link {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 8px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-radius: 50px;
    }
    
    .m1-try-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .m1-section {
        /*padding-top: 55px;*/
    }
    
    .m1-banner {
        min-height: calc(100vh - 55px);
        padding: 80px 0 20px;
    }
    
    .m1-stats-row {
        flex-direction: column;
        gap: 8px;
    }
    
    .m1-stat-item {
        width: 100%;
    }
    
    .m1-main-heading {
        font-size: 2rem;
    }
    
    .m1-feature-pills {
        justify-content: center;
    }
    
    .m1-cta-group {
        justify-content: center;
    }
    
    .m1-trust-badges {
        justify-content: center;
    }
    
    .m1-scroll-indicator {
        display: none;
    }
    
    .m1-progress-steps {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .m1-step {
        width: calc(50% - 5px);
    }
    
    .m1-tracking-card {
        padding: 18px;
    }
    
    .m1-tracking-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .m1-user-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .m1-card-actions {
        flex-direction: column;
    }
    
    .m1-card-footer {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .m1-live-badge {
        width: 100%;
        justify-content: center;
    }
}

/* Smooth scroll behavior for the whole page */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

/* Ensure content doesn't hide behind fixed header on anchor click */
* {
    scroll-margin-top: 70px;
}

/* Animation Classes */
[data-aos] {
    pointer-events: none;
}

[data-aos].aos-animate {
    pointer-events: auto;
}

/* Loading Animation for Buttons */
.m1-register-btn, .m1-demo-btn, .m1-track-btn {
    position: relative;
    overflow: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(22, 148, 173, 0.1);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #1694ad, #15baa7);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #15baa7, #1694ad);
}

/* Modal Styles */
.modal-content {
    border-radius: 16px;
    border: none;
}

.modal-header {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 20px;
}

.modal-title {
    color: #1694ad;
    font-weight: 600;
}

.modal-body {
    padding: 20px;
}

.modal .btn-primary {
    background: linear-gradient(135deg, #1694ad, #15baa7);
    border: none;
    padding: 10px;
    font-weight: 600;
}

.modal .btn-primary:hover {
    background: linear-gradient(135deg, #15baa7, #1694ad);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(22, 148, 173, 0.3);
}

/* Share icons */
.share-icon {
    color: #1694ad;
    transition: all 0.3s;
    display: inline-block;
}

.share-icon:hover {
    transform: translateY(-3px) scale(1.1);
    color: #15baa7;
}
  
  
  
  
  
  /* ---------- SECTION 4 (fluid, no outer border, full width) ----------
           prefix: m4-   colors: #1694ad, #15baa7, #1a92ad
           design: attached pricing table (COD | Prepaid) inclusive GST
           container‑fluid = full width, no card border, no outer box.
        */
        .m4-fluid-section {
            display: block;
            width: 100%;
            background: transparent;  /* lets parent background show through */
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            --m4-deep: #1694ad;
            --m4-mint: #15baa7;
            --m4-soft: #1a92ad;
            --m4-white: #ffffff;
            --m4-bg-soft: #f4fbfd;
            --m4-text: #1d3d49;
            --m4-border-light: rgba(21, 186, 167, 0.2);
            color: var(--m4-text);
            /*margin-top: 20px;*/
            padding: 4rem 0;          /* vertical breathing, no horizontal padding = fluid */
        }

        /* inner container with max-width for large screens, but still no outer border */
        .m4-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1.5rem;        /* only horizontal padding to avoid text touching edges */
            width: 100%;
            box-sizing: border-box;
        }

        /* header (no card, just plain) */
        .m4-header {
            margin-bottom: 2.5rem;
        }

        .m4-eyebrow {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            margin-bottom: 0.8rem;
        }

        .m4-badge {
            background: linear-gradient(125deg, var(--m4-deep), var(--m4-soft));
            color: white;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 0.35rem 1.3rem;
            border-radius: 60px;
            border: none;
            display: inline-block;
        }

        .m4-title {
            font-size: 2.4rem;
            font-weight: 550;
            letter-spacing: -0.02em;
            line-height: 1.2;
            color: #14363f;
        }

        .m4-title-gradient {
            background: linear-gradient(145deg, var(--m4-deep), var(--m4-mint));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
        }

        .m4-sub {
            color: var(--m4-soft);
            font-weight: 400;
            font-size: 1.1rem;
            margin-top: 0.3rem;
        }

        /* two‑column grid */
        .m4-table-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin: 2.2rem 0 1.8rem;
        }

        /* each column has a soft background but NO outer border – still feels like part of fluid */
        .m4-column {
            background: var(--m4-bg-soft);
            border-radius: 32px;
            padding: 1.8rem 1.5rem 2rem 1.5rem;
            /* no border, just subtle shadow for depth */
            box-shadow: 0 8px 20px -12px rgba(21,186,167,0.25);
            transition: box-shadow 0.2s;
        }

        .m4-column:hover {
            box-shadow: 0 14px 28px -16px var(--m4-deep);
        }

        .m4-column-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 1.8rem;
            border-bottom: 2px solid rgba(21,186,167,0.2);
            padding-bottom: 1rem;
        }

        .m4-column-icon {
            width: 42px;
            height: 42px;
            background: var(--m4-white);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            border: 1px solid var(--m4-mint);
            color: var(--m4-deep);
        }

        .m4-column-title {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--m4-deep);
            letter-spacing: -0.02em;
        }

        /* table style – clean */
        .m4-rate-table {
            width: 100%;
            border-collapse: collapse;
        }

        .m4-rate-table th {
            text-align: left;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #2c6c7c;
            padding-bottom: 0.8rem;
            border-bottom: 1px solid rgba(22,148,173,0.2);
        }

        .m4-rate-table td {
            padding: 0.8rem 0.2rem 0.8rem 0;
            border-bottom: 1px dashed rgba(21,186,167,0.15);
            font-size: 1rem;
            font-weight: 450;
        }

        .m4-rate-table tr:last-child td {
            border-bottom: none;
        }

        .m4-weight {
            color: #174450;
            font-weight: 500;
        }

        .m4-price {
            font-weight: 650;
            color: var(--m4-deep);
        }

        .m4-inclusive-note {
            font-size: 0.7rem;
            color: #3b6f7e;
            margin-top: 1rem;
            text-align: right;
            background: rgba(255,255,255,0.7);
            padding: 0.4rem 1rem;
            border-radius: 60px;
            display: inline-block;
            border: 1px solid var(--m4-border-light);
        }

        /* footer – fully fluid */
        .m4-footer-note {
            margin-top: 2.2rem;
            padding-top: 1.5rem;
            border-top: 2px solid rgba(21,186,167,0.15);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
            font-size: 0.85rem;
        }

        .m4-gst-badge {
            background: #dff3f5;
            padding: 0.5rem 1.5rem;
            border-radius: 60px;
            color: var(--m4-deep);
            font-weight: 600;
            border: 1px solid var(--m4-mint);
        }

        .m4-remark {
            color: #266d7c;
            font-weight: 400;
        }

        /* responsive */
        @media (max-width: 700px) {
            .m4-table-grid { grid-template-columns: 1fr; }
            .m4-title { font-size: 2rem; }
            
            .m4-fluid-section
            {
                /*margin-top: 40px !important;*/
            }
        }
        
        .m4-fluid-section * {
            box-sizing: border-box;
        }
        
        
        
        
        
        
        
        /* ---------- SECTION 5 – COURIER PARTNER STRIPE (horizontal row with real company logos) ----------
       prefix: m5- , colors: #1694ad, #15baa7, #1a92ad
       fully fluid, no outer border, minimal & clean.
    */
    .m5-stripe-section {
      display: block;
      width: 100%;
      background: transparent;  /* blends with parent */
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      --m5-deep: #1694ad;
      --m5-mint: #15baa7;
      --m5-soft: #1a92ad;
      --m5-white: #ffffff;
      --m5-bg-soft: #f5fbfd;
      --m5-text: #1d3d49;
      --m5-border-light: rgba(21, 186, 167, 0.25);
      color: var(--m5-text);
      padding: 5rem 0;        /* vertical space, full width left/right */
    }

    /* inner container (max-width for large screens, but still full-width feel) */
    .m5-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
      width: 100%;
      box-sizing: border-box;
    }

    /* header – simple, minimal */
    .m5-header {
      margin-bottom: 2.2rem;
    }

    .m5-eyebrow {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      margin-bottom: 0.5rem;
    }

    .m5-badge {
      background: linear-gradient(125deg, var(--m5-deep), var(--m5-soft));
      color: white;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 0.3rem 1.2rem;
      border-radius: 60px;
      border: none;
      display: inline-block;
    }

    .m5-title {
      font-size: 2.2rem;
      font-weight: 550;
      letter-spacing: -0.02em;
      color: #14363f;
      margin: 0.5rem 0 0.2rem 0;
    }

    .m5-title-gradient {
      background: linear-gradient(145deg, var(--m5-deep), var(--m5-mint));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 700;
    }

    /* ---------- LOGO STRIPE – horizontal row ---------- */
    .m5-logo-stripe {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;   /* even spacing */
      gap: 1.5rem 2rem;
      margin: 2.5rem 0 2rem 0;
      padding: 1rem 0;
    }

    /* each logo item – simple, no cards, just clean */
    .m5-logo-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 0 1 auto;
      min-width: 100px;
      transition: transform 0.15s;
    }

    .m5-logo-item:hover {
      transform: translateY(-3px);
    }

    /* logo image placeholder – using font icons / SVG? 
       for realism, we use high‑quality emoji/symbols as fallback but with company‑specific styling.
       for actual implementation, replace src with real logos. */
    .m5-logo-img {
      width: 80px;
      height: 80px;
      background: var(--m5-white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;           /* simple icon */
      box-shadow: 0 6px 14px rgba(22,148,173,0.1);
      border: 1px solid var(--m5-border-light);
      margin-bottom: 0.5rem;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .m5-logo-item:hover .m5-logo-img {
      border-color: var(--m5-mint);
      box-shadow: 0 12px 22px -12px var(--m5-deep);
    }

    /* company name below logo */
    .m5-company-name {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--m5-deep);
      letter-spacing: 0.3px;
      text-align: center;
    }

    /* bottom meta row – scroll to explore + stats */
    .m5-meta-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1.5rem;
      margin-top: 2rem;
      padding-top: 1.8rem;
      border-top: 2px solid rgba(21,186,167,0.15);
    }

    .m5-scroll {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--m5-soft);
      font-size: 0.8rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 1.2px;
    }

    .m5-arrow {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--m5-white);
      border: 1px solid var(--m5-mint);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--m5-deep);
      font-size: 1.2rem;
      box-shadow: 0 4px 8px rgba(22,148,173,0.1);
    }

    .m5-stats {
      display: flex;
      gap: 1rem;
    }

    .m5-stat {
      background: rgba(21,186,167,0.07);
      padding: 0.4rem 1.4rem;
      border-radius: 60px;
      font-size: 0.8rem;
      color: var(--m5-deep);
      border: 1px solid rgba(22,148,173,0.2);
      font-weight: 500;
    }

    /* responsive: on smaller screens, wrap nicely */
    @media (max-width: 700px) {
      .m5-logo-stripe { justify-content: center; }
      .m5-title { font-size: 1.8rem; }
    }

    .m5-stripe-section * {
      box-sizing: border-box;
    }
    
    
    
    
    
    
    
    /* ---------- SECTION 6 – CONTACT (logistics aggregator style) ----------
           prefix: m6-   colors: #1694ad, #15baa7, #1a92ad
           full gradient background, contact form + email/number/address info.
           designed for a logistics aggregator – trustworthy, bold, interactive.
        */
        .m6-contact-section {
            display: block;
            width: 100%;
            /*background: linear-gradient(145deg, #0b5f73 0%, #14809b 30%, #1a92ad 80%, #15baa7 120%);*/
            background: linear-gradient(135deg, #1694ad 0%, #15baa7 50%, #1a92ad 100%);
            /* deep ocean gradient – logistics & trust */
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            --m6-deep: #0d4f60;
            /*--m6-accent: #15baa7;*/
            --m6-accent: #ffffff;
            --m6-bright: #1694ad;
            --m6-soft: #1a92ad;
            --m6-white: #ffffff;
            --m6-text-light: #f0fcff;
            --m6-text-dark: #023b48;
            color: var(--m6-text-light);
            padding: 10rem 0 5rem;
            position: relative;
            isolation: isolate;
            margin-bottom: 0px;
        }

        /* dynamic wave / shape overlays (logistics feel) */
        /*.m6-shape {*/
        /*    position: absolute;*/
        /*    border-radius: 50%;*/
        /*    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), rgba(21,186,167,0.1));*/
        /*    filter: blur(70px);*/
        /*    z-index: 0;*/
        /*    pointer-events: none;*/
        /*}*/
        /*.m6-shape-1 { width: 400px; height: 400px; top: -150px; right: -50px; }*/
        /*.m6-shape-2 { width: 350px; height: 350px; bottom: -100px; left: -30px; background: rgba(26,146,173,0.2); }*/

        .m6-content {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 2rem;
            width: 100%;
            box-sizing: border-box;
            position: relative;
            z-index: 3;
        }

        /* header – logistics aggregator tone */
        .m6-header {
            text-align: center;
            margin-bottom: 3.5rem;
        }

        .m6-agg-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(0,0,0,0.2);
            backdrop-filter: blur(8px);
            padding: 0.4rem 2rem 0.4rem 1.8rem;
            border-radius: 80px;
            border: 1px solid rgba(255,255,255,0.3);
            margin-bottom: 1.5rem;
            font-size: 0.9rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .m6-agg-badge i {
            color: var(--m6-accent);
            font-size: 1.2rem;
        }

        .m6-title {
            font-size: 3.5rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.1;
            color: white;
            text-shadow: 0 4px 30px rgba(0,60,70,0.5);
            margin: 0 0 1rem 0;
        }

        .m6-title-accent {
            background: linear-gradient(145deg, #ffffff, #e0f7fa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .m6-sub {
            font-size: 1.2rem;
            color: rgba(255,255,255,0.9);
            font-weight: 350;
            max-width: 600px;
            margin: 0 auto;
            background: rgba(0,0,0,0.1);
            backdrop-filter: blur(4px);
            padding: 0.5rem 1.8rem;
            border-radius: 60px;
        }

        /* TWO COLUMN LAYOUT: left = contact info (email, number, address), right = form */
        .m6-columns {
            display: grid;
            grid-template-columns: 0.9fr 1.3fr;
            gap: 2.5rem;
            align-items: start;
            margin-top: 2rem;
        }

        /* ---------- LEFT: CONTACT INFO (logistics aggregator details) ---------- */
        .m6-info-card {
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 48px;
            padding: 2.8rem 2rem;
            border: 1px solid rgba(255,255,255,0.25);
            /*box-shadow: 0 30px 50px -30px #022d38;*/
            height: fit-content;
        }

        .m6-info-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 2.5rem;
            border-bottom: 2px solid rgba(255,255,255,0.2);
            padding-bottom: 1.5rem;
        }

        .m6-info-header i {
            font-size: 2rem;
            color: var(--m6-accent);
            background: rgba(255,255,255,0.1);
            padding: 0.8rem;
            border-radius: 50%;
        }

        .m6-info-header h3 {
            font-size: 1.8rem;
            font-weight: 600;
            color: white;
            margin: 0;
        }

        /* info items */
        .m6-info-item {
            display: flex;
            align-items: flex-start;
            gap: 1.2rem;
            margin-bottom: 2.2rem;
        }

        .m6-info-icon {
            width: 48px;
            height: 48px;
            background: rgba(21,186,167,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            color: white;
            border: 1px solid rgba(255,255,255,0.3);
            transition: all 0.2s;
        }

        .m6-info-item:hover .m6-info-icon {
            background: var(--m6-accent);
            transform: scale(1.05);
        }

        .m6-info-content {
            flex: 1;
        }

        .m6-info-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-weight: 600;
            color: rgba(255,255,255,0.7);
            margin-bottom: 0.2rem;
        }

        .m6-info-value {
            font-size: 1.2rem;
            font-weight: 600;
            color: white;
            line-height: 1.4;
            word-break: break-word;
        }

        .m6-info-value small {
            font-size: 0.9rem;
            font-weight: 400;
            opacity: 0.8;
            display: block;
            margin-top: 0.3rem;
        }

        .m6-logistics-note {
            margin-top: 2.5rem;
            background: rgba(0,0,0,0.15);
            border-radius: 32px;
            padding: 1.5rem;
            border: 1px dashed rgba(255,255,255,0.3);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .m6-logistics-note i {
            font-size: 2rem;
            color: var(--m6-accent);
        }

        /* ---------- RIGHT: FORM (glass, interactive) ---------- */
        .m6-form-card {
            background: rgba(255,255,255,0.12);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 56px;
            padding: 3rem 2.8rem;
            border: 1px solid rgba(255,255,255,0.3);
            /*box-shadow: 0 40px 70px -30px #033946, 0 0 0 1px rgba(255,255,255,0.2) inset;*/
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .m6-form-card:hover {
            /*box-shadow: 0 48px 80px -30px #01232b, 0 0 0 2px rgba(255,255,255,0.3) inset;*/
            /*transform: translateY(-4px);*/
        }

        .m6-form-title {
            font-size: 1.8rem;
            font-weight: 600;
            color: white;
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .m6-form-title i {
            color: var(--m6-accent);
            font-size: 2rem;
        }

        /* form rows */
        .m6-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.8rem;
            margin-bottom: 1.8rem;
        }

        .m6-input-group {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }

        .m6-label {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(255,255,255,0.8);
            margin-left: 0.5rem;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .m6-label i {
            font-size: 0.9rem;
            color: var(--m6-accent);
        }

        .m6-input, .m6-textarea {
            width: 100%;
            padding: 1rem 1.4rem;
            border-radius: 44px;
            border: 1.5px solid rgba(255,255,255,0.4);
            background: rgba(255,255,255,0.15);
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            color: white;
            transition: all 0.25s;
        }

        .m6-textarea {
            border-radius: 32px;
            resize: vertical;
            min-height: 130px;
        }

        .m6-input::placeholder, .m6-textarea::placeholder {
            color: rgba(255,255,255,0.5);
            font-weight: 300;
        }

        .m6-input:focus, .m6-textarea:focus {
            outline: none;
            border-color: var(--m6-accent);
            background: rgba(255,255,255,0.2);
            box-shadow: 0 8px 20px -12px #000, 0 0 0 3px rgba(21,186,167,0.2);
            transform: scale(1.01);
        }

        .m6-input:hover, .m6-textarea:hover {
            border-color: rgba(255,255,255,0.7);
            background: rgba(255,255,255,0.2);
        }

        .m6-full-row {
            margin-bottom: 2rem;
        }

        /* submit button – logistics style */
        .m6-button {
            background: linear-gradient(145deg, #15baa7, #0f8f7f, #1a92ad);
            background-size: 200% 200%;
            color: white;
            border: none;
            padding: 1.2rem 2.5rem;
            border-radius: 60px;
            font-size: 1.1rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 16px 30px -12px #03313d, 0 0 0 1px rgba(255,255,255,0.3) inset;
            width: 100%;
            max-width: 280px;
            margin: 1rem auto 0;
            display: block;
            position: relative;
            overflow: hidden;
        }

        .m6-button::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -60%;
            width: 200%;
            height: 200%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transform: rotate(25deg);
            transition: left 0.6s;
        }

        .m6-button:hover {
            background-position: 100% 50%;
            transform: scale(1.05) translateY(-3px);
            box-shadow: 0 24m6px 40px -16px #001f28, 0 0 0 2px rgba(255,255,255,0.4) inset;
        }

        .m6-button:hover::after {
            left: 100%;
        }

        /* responsive */
        @media (max-width: 900px) {
            .m6-columns { grid-template-columns: 1fr; }
            .m6-info-card { order: 2; }
            .m6-title { font-size: 2.8rem; }
        }
        @media (max-width: 600px) {
            .m6-form-row { grid-template-columns: 1fr; }
            .m6-form-card { padding: 2rem 1.5rem; }
        }
        
        
        
        
        
        
      
        /* ---------- SECTION 7 – FOOTER (logistics aggregator) ----------
           prefix: m7-   colors: #1694ad, #15baa7, #1a92ad
           background: #e7f0f3 (light, airy) – updated per request
           text colors adjusted for dark-on-light readability.
        */
        .m7-footer-section {
            display: block;
            width: 100%;
            background: #e7f0f3;  /* soft light background as requested */
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            --m7-deep: #1694ad;
            --m7-mint: #15baa7;
            --m7-soft: #1a92ad;
            --m7-white: #ffffff;
            --m7-light: #d6f0f5;
            --m7-text-dark: #1e3b44;      /* dark text for light bg */
            --m7-text-medium: #2d5563;
            --m7-text-soft: #436a76;
            --m7-border-light: rgba(21,186,167,0.2);
            color: var(--m7-text-dark);
            padding: 4rem 0 2rem 0;
            position: relative;
            isolation: isolate;
        }

        /* subtle shape – softer on light bg */
        .m7-shape {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle at 70% 70%, rgba(22,148,173,0.08), rgba(21,186,167,0.02));
            filter: blur(70px);
            z-index: 0;
            pointer-events: none;
        }

        .m7-content {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 2rem;
            width: 100%;
            box-sizing: border-box;
            position: relative;
            z-index: 3;
        }

        /* footer main grid: 4 columns */
        .m7-footer-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
            gap: 2.5rem;
            margin-bottom: 3.5rem;
        }

        /* column titles – using theme colors, darker */
        .m7-col-title {
            font-size: 1.1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--m7-deep);
            margin-bottom: 1.8rem;
            position: relative;
            padding-bottom: 0.7rem;
        }

        .m7-col-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 3px;
            background: var(--m7-mint);
            border-radius: 4px;
        }

        /* company intro (col 1) */
        .m7-logo-area {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 1.5rem;
        }

        .m7-logo-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(145deg, var(--m7-deep), var(--m7-soft));
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: white;
            box-shadow: 0 8px 16px -8px rgba(0,0,0,0.1);
        }

        .m7-logo-text {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--m7-text-dark);
            letter-spacing: -0.02em;
        }

        .m7-logo-text span {
            color: var(--m7-mint);
            font-weight: 300;
        }

        .m7-company-desc {
            font-size: 0.9rem;
            line-height: 1.6;
            color: var(--m7-text-medium);
            margin-bottom: 1.8rem;
            max-width: 260px;
        }

        /* social links – adjusted for light bg */
        .m7-social {
            display: flex;
            gap: 1rem;
        }

        .m7-social-link {
            width: 42px;
            height: 42px;
            background: rgba(22,148,173,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--m7-deep);
            font-size: 1.2rem;
            border: 1px solid rgba(22,148,173,0.2);
            transition: all 0.2s;
            text-decoration: none;
        }

        .m7-social-link:hover {
            background: var(--m7-mint);
            color: white;
            transform: translateY(-4px);
            border-color: transparent;
        }

        /* links columns */
        .m7-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .m7-links li {
            margin-bottom: 1rem;
        }

        .m7-links a {
            color: var(--m7-text-medium);
            text-decoration: none;
            font-size: 0.95rem;
            transition: color 0.2s, transform 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .m7-links a:hover {
            color: var(--m7-deep);
            transform: translateX(4px);
        }

        .m7-links a i {
            font-size: 0.7rem;
            color: var(--m7-mint);
            opacity: 0.8;
        }

        /* contact info column */
        .m7-contact-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 1.3rem;
        }

        .m7-contact-icon {
            width: 34px;
            height: 34px;
            background: rgba(21,186,167,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--m7-deep);
            font-size: 1rem;
            border: 1px solid rgba(22,148,173,0.2);
        }

        .m7-contact-text {
            font-size: 0.9rem;
            color: var(--m7-text-medium);
            line-height: 1.4;
        }

        .m7-contact-text strong {
            color: var(--m7-text-dark);
            font-weight: 600;
            display: block;
            margin-bottom: 0.2rem;
        }

        /* bottom bar */
        .m7-bottom-bar {
            border-top: 1px solid rgba(22,148,173,0.2);
            padding-top: 2rem;
            margin-top: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            font-size: 0.85rem;
            color: var(--m7-text-soft);
        }

        .m7-copyright i {
            color: var(--m7-mint);
            margin: 0 4px;
        }

        .m7-legal-links {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .m7-legal-links a {
            color: var(--m7-text-medium);
            text-decoration: none;
            transition: color 0.2s;
        }

        .m7-legal-links a:hover {
            color: var(--m7-deep);
        }

        .m7-payment-methods {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.2rem;
            color: rgba(22,148,173,0.5);
        }

        /* responsive */
        @media (max-width: 900px) {
            .m7-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
        }
        @media (max-width: 600px) {
            .m7-footer-grid { grid-template-columns: 1fr; }
            .m7-bottom-bar { flex-direction: column; align-items: flex-start; }
        }

        .m7-footer-section * {
            box-sizing: border-box;
        }
        
        
        
        
        
        
        
        
        
        
        /* ---------- SECTION 8 – EASY SHOPIFY CONNECTION ----------
           prefix: m8-   theme colors: #1694ad, #15baa7, #1a92ad
           clean, minimal, confident – logistics aggregator style.
        */
        .m8-shopify-section {
            display: block;
            width: 100%;
            background: linear-gradient(145deg, #f8fcfe 0%, #ebf6f9 100%);
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            --m8-deep: #1694ad;
            --m8-mint: #15baa7;
            --m8-soft: #1a92ad;
            --m8-white: #ffffff;
            --m8-text-dark: #1d3b44;
            --m8-text-soft: #2f5968;
            --m8-border-light: rgba(21, 186, 167, 0.25);
            color: var(--m8-text-dark);
            padding: 5rem 0;
            position: relative;
            isolation: isolate;
        }

        /* subtle decoration */
        .m8-shape {
            position: absolute;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle at 30% 30%, rgba(22,148,173,0.06), rgba(21,186,167,0.02));
            border-radius: 50%;
            filter: blur(70px);
            z-index: 0;
            pointer-events: none;
        }
        .m8-shape-1 { top: -100px; left: -50px; }
        .m8-shape-2 { bottom: -80px; right: -30px; }

        .m8-content {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 2rem;
            width: 100%;
            box-sizing: border-box;
            position: relative;
            z-index: 3;
        }

        /* header */
        .m8-header {
            text-align: center;
            margin-bottom: 3.5rem;
        }

        .m8-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            background: rgba(22,148,173,0.08);
            backdrop-filter: blur(4px);
            padding: 0.5rem 2rem 0.5rem 1.8rem;
            border-radius: 80px;
            border: 1px solid var(--m8-border-light);
            margin-bottom: 1.5rem;
            color: var(--m8-deep);
            font-weight: 500;
        }

        .m8-badge i {
            font-size: 1.3rem;
            color: var(--m8-mint);
        }

        .m8-title {
            font-size: 3.2rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.1;
            color: var(--m8-text-dark);
            margin: 0 0 1rem 0;
        }

        .m8-title-gradient {
            background: linear-gradient(145deg, var(--m8-deep), var(--m8-soft));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .m8-sub {
            font-size: 1.2rem;
            color: var(--m8-text-soft);
            max-width: 700px;
            margin: 0 auto;
            font-weight: 350;
        }

        /* two column layout: left = description + features, right = visual/dashboard */
        .m8-grid {
            display: grid;
            grid-template-columns: 1.2fr 0.9fr;
            gap: 3rem;
            align-items: center;
            margin: 3rem 0 2rem;
        }

        /* left content */
        .m8-features {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .m8-feature-item {
            display: flex;
            align-items: flex-start;
            gap: 1.2rem;
            padding: 1.2rem 1.5rem;
            background: rgba(255,255,255,0.6);
            backdrop-filter: blur(6px);
            border-radius: 32px;
            border: 1px solid rgba(255,255,255,0.8);
            box-shadow: 0 8px 20px -12px rgba(22,148,173,0.2);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .m8-feature-item:hover {
            transform: translateX(6px);
            box-shadow: 0 12px 28px -14px var(--m8-deep);
            border-color: var(--m8-mint);
        }

        .m8-feature-icon {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, var(--m8-deep), var(--m8-mint));
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.8rem;
            box-shadow: 0 8px 14px -8px #11809b;
        }

        .m8-feature-text h4 {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--m8-deep);
            margin: 0 0 0.4rem 0;
        }

        .m8-feature-text p {
            font-size: 0.95rem;
            color: var(--m8-text-soft);
            margin: 0;
            line-height: 1.5;
        }

        /* right side – shopify card (visual) */
        .m8-shopify-card {
            background: white;
            border-radius: 48px;
            padding: 2.2rem 2rem;
            box-shadow: 0 30px 50px -25px rgba(22,148,173,0.3);
            border: 1px solid rgba(21,186,167,0.2);
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .m8-shopify-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 40px 60px -28px #0a4f5e;
        }

        .m8-shopify-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 2rem;
        }

        .m8-shopify-logo i {
            font-size: 3.5rem;
            color: #96bf48; /* shopify green */
            background: #f0f7e7;
            padding: 0.5rem;
            border-radius: 24px;
        }

        .m8-shopify-logo span {
            font-size: 2rem;
            font-weight: 600;
            color: #2a3f47;
        }

        .m8-connect-line {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.8rem;
            margin: 2rem 0;
            color: var(--m8-text-soft);
        }

        .m8-connect-line i {
            color: var(--m8-mint);
            font-size: 1.5rem;
        }

        .m8-connect-line span {
            background: rgba(21,186,167,0.1);
            padding: 0.3rem 1.2rem;
            border-radius: 60px;
            font-weight: 500;
        }

        .m8-dashboard-preview {
            background: #eef8fc;
            border-radius: 32px;
            padding: 1.5rem;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.8rem;
            margin: 1.5rem 0;
        }

        .m8-dash-item {
            background: white;
            border-radius: 18px;
            padding: 0.8rem 0.5rem;
            box-shadow: 0 4px 10px -6px rgba(0,0,0,0.1);
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--m8-deep);
            border: 1px solid rgba(21,186,167,0.2);
        }

        .m8-dash-item i {
            display: block;
            font-size: 1.2rem;
            margin-bottom: 0.3rem;
            color: var(--m8-mint);
        }

        .m8-cta-button {
            background: linear-gradient(145deg, var(--m8-deep), #0f6d80);
            color: white;
            border: none;
            padding: 1.2rem 2.8rem;
            border-radius: 60px;
            font-size: 1.2rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 16px 28px -16px #053e49;
            margin-top: 1.8rem;
            width: 100%;
            max-width: 280px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .m8-cta-button:hover {
            transform: scale(1.05);
            background: linear-gradient(145deg, #0f6d80, var(--m8-deep));
            box-shadow: 0 22px 36px -18px #03333d;
        }

        /* bottom trust badges */
        .m8-trust-row {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2.5rem;
            margin-top: 3.5rem;
            flex-wrap: wrap;
            padding: 1.5rem 0;
            border-top: 1px solid var(--m8-border-light);
        }

        .m8-trust-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            color: var(--m8-text-soft);
        }

        .m8-trust-item i {
            color: var(--m8-mint);
            font-size: 1.2rem;
        }

        /* responsive */
        @media (max-width: 900px) {
            .m8-grid { grid-template-columns: 1fr; }
            .m8-title { font-size: 2.5rem; }
        }
        @media (max-width: 600px) {
            .m8-feature-item { flex-direction: column; align-items: flex-start; }
            .m8-shopify-card { padding: 1.8rem; }
        }

        .m8-shopify-section * {
            box-sizing: border-box;
        }