{"id":986,"date":"2025-11-24T06:02:10","date_gmt":"2025-11-24T06:02:10","guid":{"rendered":"https:\/\/www.msdaraknchina.com\/en\/?page_id=986"},"modified":"2025-11-24T06:26:45","modified_gmt":"2025-11-24T06:26:45","slug":"freight-fares","status":"publish","type":"page","link":"https:\/\/www.msdaraknchina.com\/en\/freight-fares\/","title":{"rendered":"Freight Fares"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\" dir=\"ltr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Sea Freight Price Inquiry Tool &#8211; Shipping Company Comparison<\/title>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: 'Inter', sans-serif;\n            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n            color: #333;\n            line-height: 1.6;\n            padding: 20px;\n            min-height: 100vh;\n        }\n\n        .shipping-calculator {\n            max-width: 1200px;\n            margin: 0 auto;\n            background: white;\n            border-radius: 20px;\n            box-shadow: 0 15px 50px rgba(19, 19, 55, 0.1);\n            overflow: hidden;\n        }\n\n        .calculator-header {\n            background: linear-gradient(135deg, #131337 0%, #2d2d5a 100%);\n            color: white;\n            padding: 60px 40px 40px 40px; \/* Increased top padding *\/\n            text-align: center;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .calculator-header h1 {\n            font-size: 2.5rem;\n            margin-bottom: 20px; \/* Increased margin *\/\n            font-weight: 700;\n            color: #ffffff;\n            text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n        }\n\n        .calculator-header p {\n            font-size: 1.2rem;\n            margin-bottom: 15px; \/* Increased margin *\/\n            color: #f0f0f0;\n            opacity: 0.95;\n        }\n\n        .disclaimer {\n            background: rgba(255, 215, 0, 0.15);\n            padding: 15px;\n            border-radius: 10px;\n            margin-top: 25px; \/* Increased margin *\/\n            border-left: 4px solid #FFD700;\n            color: #FFEAA7;\n            text-align: left;\n        }\n\n        .disclaimer strong {\n            color: #FFD700;\n        }\n\n        .calculator-content {\n            padding: 40px;\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 40px;\n        }\n\n        @media (max-width: 768px) {\n            .calculator-content {\n                grid-template-columns: 1fr;\n                padding: 20px;\n            }\n        }\n\n        .form-section {\n            background: #f8f9fa;\n            padding: 30px;\n            border-radius: 15px;\n            border: 2px solid #e9ecef;\n        }\n\n        .form-section h2 {\n            color: #131337;\n            margin-bottom: 25px;\n            font-size: 1.5rem;\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .form-section h2 i {\n            color: #FFD700;\n        }\n\n        .form-group {\n            margin-bottom: 20px;\n        }\n\n        .form-label {\n            display: block;\n            margin-bottom: 8px;\n            font-weight: 600;\n            color: #131337;\n            font-size: 1rem;\n        }\n\n        .form-select,\n        .form-input {\n            width: 100%;\n            padding: 12px 15px;\n            border: 2px solid #e0e0e0;\n            border-radius: 10px;\n            font-size: 1rem;\n            font-family: 'Inter', sans-serif;\n            transition: all 0.3s ease;\n            background: white;\n            color: #333;\n        }\n\n        .form-select:focus,\n        .form-input:focus {\n            outline: none;\n            border-color: #FFD700;\n            box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);\n        }\n\n        .dimensions-grid {\n            display: grid;\n            grid-template-columns: 1fr 1fr 1fr;\n            gap: 15px;\n        }\n\n        @media (max-width: 480px) {\n            .dimensions-grid {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        .shipping-type-tabs {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 10px;\n            margin-bottom: 20px;\n        }\n\n        .shipping-tab {\n            padding: 15px;\n            background: #e9ecef;\n            border: 2px solid transparent;\n            border-radius: 10px;\n            text-align: center;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            font-weight: 600;\n            color: #333;\n        }\n\n        .shipping-tab.active {\n            background: #FFD700;\n            color: #131337;\n            border-color: #131337;\n        }\n\n        .calculate-btn {\n            width: 100%;\n            background: linear-gradient(135deg, #FFD700 0%, #e6c200 100%);\n            color: #131337;\n            border: none;\n            padding: 15px;\n            border-radius: 10px;\n            font-size: 1.1rem;\n            font-weight: 700;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            font-family: 'Inter', sans-serif;\n            margin-top: 10px;\n        }\n\n        .calculate-btn:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3);\n        }\n\n        .results-section {\n            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);\n            padding: 30px;\n            border-radius: 15px;\n            border: 2px dashed #FFD700;\n        }\n\n        .results-placeholder {\n            text-align: center;\n            color: #666;\n            padding: 60px 20px;\n        }\n\n        .results-placeholder i {\n            font-size: 3rem;\n            color: #e0e0e0;\n            margin-bottom: 20px;\n        }\n\n        .shipping-result {\n            display: none;\n        }\n\n        .result-card {\n            background: white;\n            padding: 25px;\n            border-radius: 12px;\n            box-shadow: 0 5px 20px rgba(0,0,0,0.1);\n            margin-bottom: 20px;\n            border-left: 4px solid #FFD700;\n        }\n\n        .result-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 15px;\n        }\n\n        .route-info {\n            font-weight: 600;\n            color: #131337;\n            font-size: 1.2rem;\n        }\n\n        .price {\n            background: #131337;\n            color: #FFD700;\n            padding: 8px 15px;\n            border-radius: 25px;\n            font-weight: 700;\n            font-size: 1.3rem;\n        }\n\n        .result-details {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 15px;\n            margin-top: 15px;\n        }\n\n        .detail-item {\n            display: flex;\n            justify-content: space-between;\n            padding: 10px 0;\n            border-bottom: 1px solid #f0f0f0;\n        }\n\n        .detail-label {\n            color: #666;\n            font-weight: 500;\n        }\n\n        .detail-value {\n            color: #131337;\n            font-weight: 600;\n        }\n\n        .shipping-notice {\n            background: #e8f5e8;\n            padding: 15px;\n            border-radius: 8px;\n            border-left: 4px solid #28a745;\n            margin-top: 20px;\n            color: #2d5016;\n        }\n\n        .notice-title {\n            color: #28a745;\n            font-weight: 700;\n            margin-bottom: 8px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .platforms-grid {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 15px;\n            margin-top: 20px;\n        }\n\n        .platform-card {\n            background: white;\n            padding: 20px;\n            border-radius: 10px;\n            box-shadow: 0 3px 15px rgba(0,0,0,0.08);\n            text-align: center;\n            transition: transform 0.3s ease;\n        }\n\n        .platform-card:hover {\n            transform: translateY(-5px);\n        }\n\n        .platform-logo {\n            font-size: 2rem;\n            color: #FFD700;\n            margin-bottom: 10px;\n        }\n\n        .platform-name {\n            font-weight: 700;\n            color: #131337;\n            margin-bottom: 5px;\n        }\n\n        .platform-desc {\n            color: #666;\n            font-size: 0.9rem;\n        }\n\n        .loading {\n            display: none;\n            text-align: center;\n            padding: 40px;\n        }\n\n        .loading-spinner {\n            border: 4px solid #f3f3f3;\n            border-top: 4px solid #FFD700;\n            border-radius: 50%;\n            width: 40px;\n            height: 40px;\n            animation: spin 1s linear infinite;\n            margin: 0 auto 20px;\n        }\n\n        @keyframes spin {\n            0% { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n        }\n\n        .feature-highlights {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 20px;\n            margin-top: 40px;\n            padding: 40px;\n            background: #f8f9fa;\n            border-top: 1px solid #e9ecef;\n        }\n\n        .feature-card {\n            background: white;\n            padding: 25px;\n            border-radius: 12px;\n            text-align: center;\n            box-shadow: 0 5px 15px rgba(0,0,0,0.08);\n            transition: transform 0.3s ease;\n        }\n\n        .feature-card:hover {\n            transform: translateY(-5px);\n        }\n\n        .feature-icon {\n            font-size: 2.5rem;\n            color: #FFD700;\n            margin-bottom: 15px;\n        }\n\n        .feature-title {\n            color: #131337;\n            font-weight: 700;\n            margin-bottom: 10px;\n            font-size: 1.2rem;\n        }\n\n        .feature-desc {\n            color: #666;\n            line-height: 1.5;\n        }\n\n        .price-breakdown {\n            background: #f8f9fa;\n            padding: 20px;\n            border-radius: 10px;\n            margin-top: 15px;\n        }\n\n        .breakdown-item {\n            display: flex;\n            justify-content: space-between;\n            padding: 8px 0;\n            border-bottom: 1px solid #e9ecef;\n            color: #333;\n        }\n\n        .breakdown-item:last-child {\n            border-bottom: none;\n            font-weight: 700;\n            color: #131337;\n        }\n\n        .container-info-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n            gap: 15px;\n            margin-top: 20px;\n        }\n\n        .container-info-card {\n            background: white;\n            padding: 15px;\n            border-radius: 8px;\n            border: 1px solid #e9ecef;\n            text-align: center;\n        }\n\n        .container-name {\n            font-weight: 600;\n            color: #131337;\n            margin-bottom: 5px;\n        }\n\n        .container-specs {\n            font-size: 0.85rem;\n            color: #666;\n            margin-bottom: 8px;\n        }\n\n        .container-price {\n            font-weight: 700;\n            color: #FFD700;\n            background: #131337;\n            padding: 5px 10px;\n            border-radius: 15px;\n            font-size: 0.9rem;\n        }\n\n        .sources-section {\n            background: #f8f9fa;\n            padding: 40px;\n            border-top: 1px solid #e9ecef;\n        }\n\n        .sources-header {\n            text-align: center;\n            margin-bottom: 30px;\n        }\n\n        .sources-header h2 {\n            color: #131337;\n            font-size: 1.8rem;\n            margin-bottom: 10px;\n        }\n\n        .sources-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 20px;\n        }\n\n        .source-card {\n            background: white;\n            padding: 25px;\n            border-radius: 12px;\n            box-shadow: 0 5px 15px rgba(0,0,0,0.08);\n            transition: transform 0.3s ease;\n        }\n\n        .source-card:hover {\n            transform: translateY(-5px);\n        }\n\n        .source-name {\n            color: #131337;\n            font-weight: 700;\n            margin-bottom: 10px;\n            font-size: 1.2rem;\n        }\n\n        .source-description {\n            color: #666;\n            margin-bottom: 15px;\n            line-height: 1.5;\n        }\n\n        .source-link {\n            color: #FFD700;\n            text-decoration: none;\n            font-weight: 600;\n            display: inline-flex;\n            align-items: center;\n            gap: 5px;\n        }\n\n        .source-link:hover {\n            text-decoration: underline;\n        }\n\n        .data-update {\n            background: #e8f5e8;\n            padding: 15px;\n            border-radius: 8px;\n            margin-top: 20px;\n            text-align: center;\n            color: #2d5016;\n        }\n\n        .data-update strong {\n            color: #28a745;\n        }\n\n        \/* Shipping Company Comparison Styles *\/\n        .company-comparison {\n            margin-top: 30px;\n        }\n\n        .comparison-header {\n            text-align: center;\n            margin-bottom: 25px;\n            color: #131337;\n            font-size: 1.5rem;\n            font-weight: 700;\n        }\n\n        .company-cards {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n            gap: 20px;\n            margin-bottom: 30px;\n        }\n\n        .company-card {\n            background: white;\n            border-radius: 12px;\n            padding: 20px;\n            box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n            border: 2px solid transparent;\n            transition: all 0.3s ease;\n            position: relative;\n        }\n\n        .company-card.best-price {\n            border-color: #FFD700;\n            transform: scale(1.02);\n            box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);\n        }\n\n        .company-card.best-price::before {\n            content: \"Best Price\";\n            position: absolute;\n            top: -10px;\n            left: 50%;\n            transform: translateX(-50%);\n            background: #FFD700;\n            color: #131337;\n            padding: 5px 15px;\n            border-radius: 20px;\n            font-size: 0.8rem;\n            font-weight: 700;\n        }\n\n        .company-header {\n            display: flex;\n            align-items: center;\n            margin-bottom: 15px;\n            gap: 12px;\n        }\n\n        .company-logo {\n            width: 50px;\n            height: 50px;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 1.5rem;\n            color: white;\n        }\n\n        .company-name {\n            font-weight: 700;\n            color: #131337;\n            font-size: 1.2rem;\n        }\n\n        .company-price {\n            font-size: 1.8rem;\n            font-weight: 700;\n            color: #131337;\n            text-align: center;\n            margin: 15px 0;\n        }\n\n        .company-details {\n            display: flex;\n            flex-direction: column;\n            gap: 8px;\n            margin-top: 15px;\n        }\n\n        .company-detail {\n            display: flex;\n            justify-content: space-between;\n            padding: 8px 0;\n            border-bottom: 1px solid #f0f0f0;\n        }\n\n        .detail-name {\n            color: #666;\n        }\n\n        .detail-value {\n            color: #131337;\n            font-weight: 600;\n        }\n\n        .company-action {\n            margin-top: 15px;\n            text-align: center;\n        }\n\n        .quote-btn {\n            background: #131337;\n            color: white;\n            border: none;\n            padding: 10px 20px;\n            border-radius: 8px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            width: 100%;\n        }\n\n        .quote-btn:hover {\n            background: #FFD700;\n            color: #131337;\n        }\n\n        .comparison-summary {\n            background: #f8f9fa;\n            padding: 20px;\n            border-radius: 10px;\n            margin-top: 20px;\n        }\n\n        .summary-item {\n            display: flex;\n            justify-content: space-between;\n            margin-bottom: 10px;\n            padding: 10px 0;\n            border-bottom: 1px solid #e9ecef;\n        }\n\n        .summary-label {\n            color: #666;\n            font-weight: 500;\n        }\n\n        .summary-value {\n            color: #131337;\n            font-weight: 600;\n        }\n\n        .price-difference {\n            color: #28a745;\n            font-weight: 700;\n        }\n\n        .price-difference.negative {\n            color: #dc3545;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"shipping-calculator\">\n        <div class=\"calculator-header\">\n            <h1><i class=\"fas fa-ship\"><\/i> Sea Freight Price Inquiry Tool<\/h1>\n            <p>Get sea freight price estimates from China to all Arab countries<\/p>\n            <div class=\"disclaimer\">\n                <i class=\"fas fa-exclamation-triangle\"><\/i>\n                <strong>Important Note:<\/strong>\n                All prices here are educational estimates based on global index averages\n                (such as Drewry World Container Index and Freightos Baltic Index)\n                and do not represent official quotes from any shipping company. Actual prices may vary based on\n                shipping date, shipping line, fuel costs, seasonal demand, and cargo nature.\n            <\/div>\n        <\/div>\n\n        <div class=\"calculator-content\">\n            <!-- Input Form -->\n            <div class=\"form-section\">\n                <h2><i class=\"fas fa-calculator\"><\/i> Shipment Data<\/h2>\n\n                <div class=\"shipping-type-tabs\">\n                    <div class=\"shipping-tab active\" data-type=\"fcl\">Full Container Load (FCL)<\/div>\n                    <div class=\"shipping-tab\" data-type=\"lcl\">Less than Container Load (LCL)<\/div>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label class=\"form-label\">Source Port (China):<\/label>\n                    <select class=\"form-select\" id=\"sourcePort\">\n                        <option value=\"\">Select Source Port<\/option>\n                        <option value=\"shanghai\">Shanghai<\/option>\n                        <option value=\"ningbo\">Ningbo<\/option>\n                        <option value=\"shenzhen\">Shenzhen<\/option>\n                        <option value=\"qingdao\">Qingdao<\/option>\n                        <option value=\"guangzhou\">Guangzhou<\/option>\n                        <option value=\"xiamen\">Xiamen<\/option>\n                        <option value=\"tianjin\">Tianjin<\/option>\n                        <option value=\"dalian\">Dalian<\/option>\n                    <\/select>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label class=\"form-label\">Destination Country:<\/label>\n                    <select class=\"form-select\" id=\"destinationCountry\">\n                        <option value=\"\">Select Destination Country<\/option>\n                        <option value=\"uae\">United Arab Emirates<\/option>\n                        <option value=\"saudi\">Saudi Arabia<\/option>\n                        <option value=\"kuwait\">Kuwait<\/option>\n                        <option value=\"qatar\">Qatar<\/option>\n                        <option value=\"bahrain\">Bahrain<\/option>\n                        <option value=\"oman\">Oman<\/option>\n                        <option value=\"egypt\">Egypt<\/option>\n                        <option value=\"jordan\">Jordan<\/option>\n                        <option value=\"lebanon\">Lebanon<\/option>\n                        <option value=\"syria\">Syria<\/option>\n                        <option value=\"yemen\">Yemen<\/option>\n                        <option value=\"morocco\">Morocco<\/option>\n                        <option value=\"algeria\">Algeria<\/option>\n                    <\/select>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label class=\"form-label\">Destination Port:<\/label>\n                    <select class=\"form-select\" id=\"destinationPort\">\n                        <option value=\"\">Select Destination Port<\/option>\n                    <\/select>\n                <\/div>\n\n                <div class=\"form-group\" id=\"containerSizeGroup\">\n                    <label class=\"form-label\">Container Size:<\/label>\n                    <select class=\"form-select\" id=\"containerSize\">\n                        <option value=\"20ft\">20ft Standard Container<\/option>\n                        <option value=\"40ft\">40ft Standard Container<\/option>\n                        <option value=\"40hq\">40ft High Cube Container<\/option>\n                        <option value=\"20rf\">20ft Refrigerated Container<\/option>\n                        <option value=\"40rf\">40ft Refrigerated Container<\/option>\n                        <option value=\"20ot\">20ft Open Top Container<\/option>\n                        <option value=\"40ot\">40ft Open Top Container<\/option>\n                        <option value=\"20tk\">20ft Tank Container<\/option>\n                    <\/select>\n                <\/div>\n\n                <div class=\"form-group\" id=\"volumeGroup\" style=\"display: none;\">\n                    <label class=\"form-label\">Shipment Dimensions (cm):<\/label>\n                    <div class=\"dimensions-grid\">\n                        <div>\n                            <input type=\"number\" class=\"form-input\" id=\"length\" placeholder=\"Length\">\n                        <\/div>\n                        <div>\n                            <input type=\"number\" class=\"form-input\" id=\"width\" placeholder=\"Width\">\n                        <\/div>\n                        <div>\n                            <input type=\"number\" class=\"form-input\" id=\"height\" placeholder=\"Height\">\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label class=\"form-label\">Total Weight (kg):<\/label>\n                    <input type=\"number\" class=\"form-input\" id=\"weight\" placeholder=\"Enter total weight\">\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label class=\"form-label\">Cargo Type:<\/label>\n                    <select class=\"form-select\" id=\"cargoType\">\n                        <option value=\"general\">General Cargo<\/option>\n                        <option value=\"perishable\">Perishable Goods<\/option>\n                        <option value=\"hazardous\">Hazardous Materials<\/option>\n                        <option value=\"refrigerated\">Refrigerated<\/option>\n                        <option value=\"oversized\">Oversized Cargo<\/option>\n                        <option value=\"fragile\">Fragile Goods<\/option>\n                        <option value=\"high_value\">High Value Cargo<\/option>\n                    <\/select>\n                <\/div>\n\n                <button class=\"calculate-btn\" id=\"calculateBtn\">\n                    <i class=\"fas fa-calculator\"><\/i> Get Price Estimate\n                <\/button>\n\n                <!-- Container Information -->\n                <div class=\"container-info-grid\" id=\"containerInfo\">\n                    <!-- Container information will be filled here -->\n                <\/div>\n            <\/div>\n\n            <!-- Results Section -->\n            <div class=\"results-section\">\n                <h2><i class=\"fas fa-chart-line\"><\/i> Inquiry Results<\/h2>\n\n                <div class=\"loading\" id=\"loading\">\n                    <div class=\"loading-spinner\"><\/div>\n                    <p>Calculating shipping prices&#8230;<\/p>\n                <\/div>\n\n                <div class=\"results-placeholder\" id=\"resultsPlaceholder\">\n                    <i class=\"fas fa-ship\"><\/i>\n                    <h3>Enter Shipment Data<\/h3>\n                    <p>Shipping price estimates will be displayed here<\/p>\n                <\/div>\n\n                <div class=\"shipping-result\" id=\"shippingResult\">\n                    <!-- Results will be displayed here -->\n                <\/div>\n\n                <div class=\"platforms-grid\">\n                    <div class=\"platform-card\">\n                        <div class=\"platform-logo\">\n                            <i class=\"fas fa-globe\"><\/i>\n                        <\/div>\n                        <div class=\"platform-name\">Flexport<\/div>\n                        <div class=\"platform-desc\">For accurate and instant prices from multiple shipping companies<\/div>\n                    <\/div>\n                    <div class=\"platform-card\">\n                        <div class=\"platform-logo\">\n                            <i class=\"fas fa-exchange-alt\"><\/i>\n                        <\/div>\n                        <div class=\"platform-name\">Freightos<\/div>\n                        <div class=\"platform-desc\">Compare actual quotes and book shipments online<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Data Sources -->\n        <div class=\"sources-section\">\n            <div class=\"sources-header\">\n                <h2><i class=\"fas fa-database\"><\/i> Price Estimate Sources<\/h2>\n                <p>\n                    We believe in full transparency. These are the sources we rely on for\n                    <strong>price range estimates<\/strong>.\n                    The values used in the tool are calibrated as approximate ranges and are not literal copies\n                    of these sources&#8217; prices on a specific date.\n                <\/p>\n            <\/div>\n\n            <div class=\"sources-grid\">\n                <div class=\"source-card\">\n                    <div class=\"source-name\">Global Price Comparison Platforms<\/div>\n                    <div class=\"source-description\">\n                        We rely on data from international freight price comparison platforms like Freightos\n                        (including the Freightos Baltic Index &#8211; FBX) and Xeneta to get global price averages\n                        for major routes like Asia-Europe and Asia-Mediterranean.\n                    <\/div>\n                    <a href=\"https:\/\/www.freightos.com\" class=\"source-link\" target=\"_blank\">\n                        Visit Website <i class=\"fas fa-external-link-alt\"><\/i>\n                    <\/a>\n                <\/div>\n\n                <div class=\"source-card\">\n                    <div class=\"source-name\">Major Shipping Company Data<\/div>\n                    <div class=\"source-description\">\n                        We monitor prices of global shipping companies like MSC, Maersk, and CMA CGM to get the latest\n                        general price changes and market trends, noting that the numbers in the tool\n                        do not represent official prices from these companies.\n                    <\/div>\n                    <a href=\"https:\/\/www.msc.com\" class=\"source-link\" target=\"_blank\">\n                        Visit Website <i class=\"fas fa-external-link-alt\"><\/i>\n                    <\/a>\n                <\/div>\n\n                <div class=\"source-card\">\n                    <div class=\"source-name\">Hapag-Lloyd<\/div>\n                    <div class=\"source-description\">\n                        We use Hapag-Lloyd data and reports as an additional source to understand price trends,\n                        especially for shipping lines between Asia, the Middle East, and Europe, without relying on them for direct pricing.\n                    <\/div>\n                    <a href=\"https:\/\/www.hapag-lloyd.com\" class=\"source-link\" target=\"_blank\">\n                        Visit Website <i class=\"fas fa-external-link-alt\"><\/i>\n                    <\/a>\n                <\/div>\n\n                <div class=\"source-card\">\n                    <div class=\"source-name\">Global Container Price Indices<\/div>\n                    <div class=\"source-description\">\n                        We use indices like Drewry World Container Index (WCI) and Shanghai\n                        Containerized Freight Index as basic indicators of global price levels\n                        for 40ft containers, then calibrate estimated ranges for Arab countries.\n                    <\/div>\n                    <a href=\"https:\/\/www.drewry.co.uk\" class=\"source-link\" target=\"_blank\">\n                        Visit Website <i class=\"fas fa-external-link-alt\"><\/i>\n                    <\/a>\n                <\/div>\n\n                <div class=\"source-card\">\n                    <div class=\"source-name\">Local Agency Data<\/div>\n                    <div class=\"source-description\">\n                        We (virtually) collaborate with local shipping agents in Arab countries to get\n                        a better understanding of local fees and additional costs. The values here are general and not\n                        linked to a specific agent, and always need confirmation with a direct quote.\n                    <\/div>\n                    <a href=\"#\" class=\"source-link\">\n                        Partner Information <i class=\"fas fa-handshake\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div>\n\n            <div class=\"data-update\">\n                <strong>Latest data range update:<\/strong>\n                November 2025 \u2013 Price ranges have been approximately calibrated based on the latest\n                Drewry World Container Index and Freightos Baltic Index reports for\n                Asia-Europe\/Mediterranean routes. All values remain approximate and need verification through\n                an actual quote before making decisions.\n            <\/div>\n        <\/div>\n\n        <!-- Tool Features -->\n        <div class=\"feature-highlights\">\n            <div class=\"feature-card\">\n                <div class=\"feature-icon\">\n                    <i class=\"fas fa-bolt\"><\/i>\n                <\/div>\n                <h3 class=\"feature-title\">Realistic Approximate Estimates<\/h3>\n                <p class=\"feature-desc\">\n                    Prices based on market ranges inspired by updated global indices, with\n                    consideration for differences between countries and container types, but without claiming\n                    complete accuracy for every shipping line.\n                <\/p>\n            <\/div>\n\n            <div class=\"feature-card\">\n                <div class=\"feature-icon\">\n                    <i class=\"fas fa-map-marked-alt\"><\/i>\n                <\/div>\n                <h3 class=\"feature-title\">Comprehensive Coverage<\/h3>\n                <p class=\"feature-desc\">All major Arab ports and common Chinese export ports.<\/p>\n            <\/div>\n\n            <div class=\"feature-card\">\n                <div class=\"feature-icon\">\n                    <i class=\"fas fa-shield-alt\"><\/i>\n                <\/div>\n                <h3 class=\"feature-title\">Full Transparency<\/h3>\n                <p class=\"feature-desc\">Clear notice that the tool is for reference and estimation only, not a substitute for an official quote.<\/p>\n            <\/div>\n\n            <div class=\"feature-card\">\n                <div class=\"feature-icon\">\n                    <i class=\"fas fa-handshake\"><\/i>\n                <\/div>\n                <h3 class=\"feature-title\">Trusted Partners<\/h3>\n                <p class=\"feature-desc\">\n                    Recommendations for reliable shipping platforms to get accurate prices, with the possibility of direct\n                    contact to obtain official offers.\n                <\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ Arab ports data\n        const arabPorts = {\n            uae: [\n                { name: 'Jebel Ali Port - Dubai', code: 'JEA' },\n                { name: 'Khalifa Port - Abu Dhabi', code: 'KIZ' },\n                { name: 'Sharjah Port', code: 'SHJ' }\n            ],\n            saudi: [\n                { name: 'King Abdulaziz Port - Dammam', code: 'DMM' },\n                { name: 'Jeddah Islamic Port', code: 'JED' },\n                { name: 'Jubail Port', code: 'JUB' }\n            ],\n            kuwait: [\n                { name: 'Shuwaikh Port', code: 'KWI' },\n                { name: 'Abdullah Port', code: 'ABD' }\n            ],\n            qatar: [\n                { name: 'Hamad Port - Doha', code: 'DOH' },\n                { name: 'Al Wakra Port', code: 'WKR' }\n            ],\n            bahrain: [\n                { name: 'Khalifa Bin Salman Port', code: 'KBS' },\n                { name: 'Salman Port', code: 'SLM' }\n            ],\n            oman: [\n                { name: 'Sohar Port', code: 'SOH' },\n                { name: 'Sultan Qaboos Port', code: 'MCT' }\n            ],\n            egypt: [\n                { name: 'Alexandria Port', code: 'ALY' },\n                { name: 'Damietta Port', code: 'DAM' },\n                { name: 'Suez Port', code: 'SUZ' }\n            ],\n            jordan: [\n                { name: 'Aqaba Port', code: 'AQJ' }\n            ],\n            lebanon: [\n                { name: 'Beirut Port', code: 'BEY' },\n                { name: 'Tripoli Port', code: 'KYE' }\n            ],\n            syria: [\n                { name: 'Latakia Port', code: 'LTK' },\n                { name: 'Tartous Port', code: 'TTS' }\n            ],\n            yemen: [\n                { name: 'Aden Port', code: 'ADE' },\n                { name: 'Hodeidah Port', code: 'HOD' },\n                { name: 'Mokha Port', code: 'MOK' }\n            ],\n            morocco: [\n                { name: 'Casablanca Port', code: 'CAS' },\n                { name: 'Tanger Med Port', code: 'TNG' }\n            ],\n            algeria: [\n                { name: 'Algiers Port', code: 'ALG' },\n                { name: 'Oran Port', code: 'ORN' }\n            ]\n        };\n\n        \/\/ Detailed container information (standard approximate values)\n        const containerInfo = {\n            '20ft': {\n                name: '20ft Standard Container',\n                specs: '\u2248 33 m\u00b3 - Up to 28,000 kg (approx.)',\n                description: 'Suitable for general and solid cargo'\n            },\n            '40ft': {\n                name: '40ft Standard Container',\n                specs: '\u2248 67 m\u00b3 - Up to 26,500 kg (approx.)',\n                description: 'Suitable for light and large volume cargo'\n            },\n            '40hq': {\n                name: '40ft High Cube Container',\n                specs: '\u2248 76 m\u00b3 - Up to 26,500 kg (approx.)',\n                description: 'Suitable for tall and fragile cargo'\n            },\n            '20rf': {\n                name: '20ft Refrigerated Container',\n                specs: '\u2248 28 m\u00b3 - Up to 27,000 kg (approx.)',\n                description: 'Equipped with cooling system for refrigerated cargo'\n            },\n            '40rf': {\n                name: '40ft Refrigerated Container',\n                specs: '\u2248 60 m\u00b3 - Up to 29,000 kg (approx.)',\n                description: 'Equipped with cooling system for refrigerated cargo'\n            },\n            '20ot': {\n                name: '20ft Open Top Container',\n                specs: '\u2248 33 m\u00b3 - Up to 28,000 kg (approx.)',\n                description: 'Suitable for large cargo requiring side loading'\n            },\n            '40ot': {\n                name: '40ft Open Top Container',\n                specs: '\u2248 67 m\u00b3 - Up to 26,500 kg (approx.)',\n                description: 'Suitable for large cargo requiring side loading'\n            },\n            '20tk': {\n                name: '20ft Tank Container',\n                specs: '\u2248 21,000 liters - Up to 28,000 kg (approx.)',\n                description: 'Designed for liquids and chemicals'\n            }\n        };\n\n        \/*\n         * Different shipping company rates (in US dollars)\n         * Important note:\n         * - These multipliers (baseMultiplier, surcharge) are approximate for educational comparison purposes only.\n         * - They do not represent real or fixed pricing policies of any company, but reflect the idea that some companies\n         *   might be slightly higher than market average and others lower, based on general perception.\n         *\/\n        const companyRates = {\n            msc: {\n                name: \"MSC\",\n                logo: \"MSC\",\n                logoColor: \"#FF6B35\",\n                baseMultiplier: 1.0,\n                reliability: 95,\n                transitTime: \"25-35 days\",\n                surcharge: 150\n            },\n            maersk: {\n                name: \"Maersk\",\n                logo: \"M\",\n                logoColor: \"#005B9A\",\n                baseMultiplier: 1.05,\n                reliability: 98,\n                transitTime: \"23-32 days\",\n                surcharge: 180\n            },\n            cmacgm: {\n                name: \"CMA CGM\",\n                logo: \"CMA\",\n                logoColor: \"#1E3A8A\",\n                baseMultiplier: 0.98,\n                reliability: 94,\n                transitTime: \"26-36 days\",\n                surcharge: 140\n            },\n            hapag: {\n                name: \"Hapag-Lloyd\",\n                logo: \"HL\",\n                logoColor: \"#FFD700\",\n                baseMultiplier: 1.02,\n                reliability: 96,\n                transitTime: \"24-34 days\",\n                surcharge: 160\n            },\n            cosco: {\n                name: \"COSCO\",\n                logo: \"COSCO\",\n                logoColor: \"#DC2626\",\n                baseMultiplier: 0.95,\n                reliability: 92,\n                transitTime: \"28-38 days\",\n                surcharge: 120\n            },\n            evergreen: {\n                name: \"Evergreen\",\n                logo: \"E\",\n                logoColor: \"#059669\",\n                baseMultiplier: 0.97,\n                reliability: 93,\n                transitTime: \"27-37 days\",\n                surcharge: 130\n            }\n        };\n\n        \/*\n         * Base shipping rates (in US dollars) - approximate estimates\n         * Note:\n         * - These values do not come directly from Drewry or FBX indices, but are calibrated to be\n         *   in a range close (slightly higher for some destinations) to the average 40ft container prices\n         *   in 2024-2025, considering risks for some countries (like Yemen and Syria).\n         * - Always verify with an actual quote.\n         *\/\n        const baseRates = {\n            fcl: {\n                uae: { \n                    '20ft': 2800, '40ft': 4200, '40hq': 4500,\n                    '20rf': 3800, '40rf': 5800, '20ot': 3000,\n                    '40ot': 4600, '20tk': 5200\n                },\n                saudi: { \n                    '20ft': 3200, '40ft': 4800, '40hq': 5100,\n                    '20rf': 4200, '40rf': 6200, '20ot': 3400,\n                    '40ot': 5200, '20tk': 5800\n                },\n                kuwait: { \n                    '20ft': 2700, '40ft': 4000, '40hq': 4300,\n                    '20rf': 3700, '40rf': 5600, '20ot': 2900,\n                    '40ot': 4400, '20tk': 5000\n                },\n                qatar: { \n                    '20ft': 2900, '40ft': 4300, '40hq': 4600,\n                    '20rf': 3900, '40rf': 5900, '20ot': 3100,\n                    '40ot': 4700, '20tk': 5300\n                },\n                bahrain: { \n                    '20ft': 2600, '40ft': 3900, '40hq': 4200,\n                    '20rf': 3600, '40rf': 5500, '20ot': 2800,\n                    '40ot': 4300, '20tk': 4900\n                },\n                oman: { \n                    '20ft': 3100, '40ft': 4600, '40hq': 4900,\n                    '20rf': 4100, '40rf': 6100, '20ot': 3300,\n                    '40ot': 5000, '20tk': 5600\n                },\n                egypt: { \n                    '20ft': 3800, '40ft': 5700, '40hq': 6000,\n                    '20rf': 4800, '40rf': 7200, '20ot': 4000,\n                    '40ot': 6100, '20tk': 6700\n                },\n                jordan: { \n                    '20ft': 4200, '40ft': 6300, '40hq': 6600,\n                    '20rf': 5200, '40rf': 7800, '20ot': 4400,\n                    '40ot': 6700, '20tk': 7300\n                },\n                lebanon: { \n                    '20ft': 4400, '40ft': 6600, '40hq': 6900,\n                    '20rf': 5400, '40rf': 8100, '20ot': 4600,\n                    '40ot': 7000, '20tk': 7600\n                },\n                syria: { \n                    '20ft': 5200, '40ft': 7800, '40hq': 8100,\n                    '20rf': 6200, '40rf': 9300, '20ot': 5400,\n                    '40ot': 8200, '20tk': 8800\n                },\n                yemen: { \n                    '20ft': 5800, '40ft': 8700, '40hq': 9000,\n                    '20rf': 6800, '40rf': 10200, '20ot': 6000,\n                    '40ot': 9100, '20tk': 9700\n                },\n                morocco: { \n                    '20ft': 4600, '40ft': 6900, '40hq': 7200,\n                    '20rf': 5600, '40rf': 8400, '20ot': 4800,\n                    '40ot': 7300, '20tk': 7900\n                },\n                algeria: { \n                    '20ft': 4800, '40ft': 7200, '40hq': 7500,\n                    '20rf': 5800, '40rf': 8700, '20ot': 5000,\n                    '40ot': 7600, '20tk': 8200\n                }\n            },\n            lcl: {\n                \/\/ Estimated prices per cubic meter (LCL) by country\n                uae: 120,\n                saudi: 140,\n                kuwait: 110,\n                qatar: 130,\n                bahrain: 105,\n                oman: 135,\n                egypt: 160,\n                jordan: 180,\n                lebanon: 190,\n                syria: 220,\n                yemen: 250,\n                morocco: 200,\n                algeria: 210\n            }\n        };\n\n        \/\/ Global variables\n        let currentShippingType = 'fcl';\n\n        \/\/ Update ports based on selected country\n        document.getElementById('destinationCountry').addEventListener('change', function() {\n            const country = this.value;\n            const portSelect = document.getElementById('destinationPort');\n\n            portSelect.innerHTML = '<option value=\"\">Select Destination Port<\/option>';\n\n            if (country && arabPorts[country]) {\n                arabPorts[country].forEach(port => {\n                    const option = document.createElement('option');\n                    option.value = port.code;\n                    option.textContent = port.name;\n                    portSelect.appendChild(option);\n                });\n            }\n        });\n\n        \/\/ Update container information when container type changes\n        document.getElementById('containerSize').addEventListener('change', function() {\n            updateContainerInfo();\n        });\n\n        \/\/ Switch shipping type\n        document.querySelectorAll('.shipping-tab').forEach(tab => {\n            tab.addEventListener('click', function() {\n                document.querySelectorAll('.shipping-tab').forEach(t => t.classList.remove('active'));\n                this.classList.add('active');\n\n                currentShippingType = this.dataset.type;\n\n                if (currentShippingType === 'fcl') {\n                    document.getElementById('containerSizeGroup').style.display = 'block';\n                    document.getElementById('volumeGroup').style.display = 'none';\n                    updateContainerInfo();\n                } else {\n                    document.getElementById('containerSizeGroup').style.display = 'none';\n                    document.getElementById('volumeGroup').style.display = 'block';\n                    document.getElementById('containerInfo').innerHTML = '';\n                }\n            });\n        });\n\n        \/\/ Calculate shipping price\n        document.getElementById('calculateBtn').addEventListener('click', function() {\n            const sourcePort = document.getElementById('sourcePort').value;\n            const destinationCountry = document.getElementById('destinationCountry').value;\n            const destinationPort = document.getElementById('destinationPort').value;\n            const weight = parseFloat(document.getElementById('weight').value) || 0;\n            const cargoType = document.getElementById('cargoType').value;\n\n            \/\/ Validate input data\n            if (!sourcePort || !destinationCountry || !destinationPort) {\n                alert('Please fill all required fields');\n                return;\n            }\n\n            if (weight <= 0) {\n                alert('Please enter a valid weight');\n                return;\n            }\n\n            \/\/ Show loading screen\n            document.getElementById('loading').style.display = 'block';\n            document.getElementById('resultsPlaceholder').style.display = 'none';\n            document.getElementById('shippingResult').style.display = 'none';\n\n            \/\/ Simulate calculation process\n            setTimeout(() => {\n                calculateShippingPrice(sourcePort, destinationCountry, weight, cargoType);\n            }, 2000);\n        });\n\n        function updateContainerInfo() {\n            const containerSize = document.getElementById('containerSize').value;\n            const containerInfoDiv = document.getElementById('containerInfo');\n\n            if (containerInfo[containerSize]) {\n                const info = containerInfo[containerSize];\n                containerInfoDiv.innerHTML = `\n                    <div class=\"container-info-card\">\n                        <div class=\"container-name\">${info.name}<\/div>\n                        <div class=\"container-specs\">${info.specs}<\/div>\n                        <div class=\"container-specs\">${info.description}<\/div>\n                    <\/div>\n                `;\n            } else {\n                containerInfoDiv.innerHTML = '';\n            }\n        }\n\n        function calculateShippingPrice(sourcePort, destinationCountry, weight, cargoType) {\n            let basePrice, volume = 0;\n\n            if (currentShippingType === 'fcl') {\n                const containerSize = document.getElementById('containerSize').value;\n                basePrice = baseRates.fcl[destinationCountry][containerSize];\n\n                \/\/ Standard container volumes in cubic meters (approximate)\n                const containerVolumes = {\n                    '20ft': 33,\n                    '40ft': 67,\n                    '40hq': 76,\n                    '20rf': 28,\n                    '40rf': 60,\n                    '20ot': 33,\n                    '40ot': 67,\n                    '20tk': 21\n                };\n                volume = containerVolumes[containerSize];\n            } else {\n                const length = parseFloat(document.getElementById('length').value) || 0;\n                const width = parseFloat(document.getElementById('width').value) || 0;\n                const height = parseFloat(document.getElementById('height').value) || 0;\n\n                if (length <= 0 || width <= 0 || height <= 0) {\n                    alert('Please enter valid dimensions for LCL shipping');\n                    return;\n                }\n\n                volume = (length * width * height) \/ 1000000; \/\/ Convert to cubic meters\n                basePrice = baseRates.lcl[destinationCountry] * volume;\n            }\n\n            \/\/ Apply adjustment factors\n            let finalPrice = basePrice;\n\n            \/\/ Adjust based on cargo type\n            const cargoSurcharges = {\n                general: 0,\n                perishable: 300,\n                hazardous: 800,\n                refrigerated: 600,\n                oversized: 500,\n                fragile: 200,\n                high_value: 400\n            };\n\n            finalPrice += cargoSurcharges[cargoType] || 0;\n\n            \/\/ Adjust based on weight (for LCL shipping)\n            if (currentShippingType === 'lcl') {\n                const volumeWeight = volume * 1000;\n                const chargeableWeight = Math.max(weight, volumeWeight);\n\n                if (chargeableWeight > 1000) {\n                    finalPrice += (chargeableWeight - 1000) * 0.5;\n                }\n            }\n\n            \/\/ Display results\n            displayResults(finalPrice, sourcePort, destinationCountry, volume, weight, cargoType);\n        }\n\n        function displayResults(basePrice, sourcePort, destinationCountry, volume, weight, cargoType) {\n            const resultDiv = document.getElementById('shippingResult');\n            const countryName = getCountryName(destinationCountry);\n            const sourcePortName = getPortName(sourcePort);\n            const shippingTypeName = currentShippingType === 'fcl' ? 'Full Container Load' : 'Less than Container Load';\n\n            \/\/ Calculate different company prices\n            const companyPrices = calculateCompanyPrices(basePrice);\n\n            resultDiv.innerHTML = `\n                <div class=\"result-card\">\n                    <div class=\"result-header\">\n                        <div class=\"route-info\">\n                            ${sourcePortName} \u2192 ${countryName}\n                        <\/div>\n                        <div class=\"price\">$${Math.round(basePrice)}<\/div>\n                    <\/div>\n\n                    <div class=\"result-details\">\n                        <div class=\"detail-item\">\n                            <span class=\"detail-label\">Shipping Type:<\/span>\n                            <span class=\"detail-value\">${shippingTypeName}<\/span>\n                        <\/div>\n                        <div class=\"detail-item\">\n                            <span class=\"detail-label\">Volume:<\/span>\n                            <span class=\"detail-value\">${volume.toFixed(2)} m\u00b3 (approx.)<\/span>\n                        <\/div>\n                        <div class=\"detail-item\">\n                            <span class=\"detail-label\">Weight:<\/span>\n                            <span class=\"detail-value\">${weight} kg<\/span>\n                        <\/div>\n                        <div class=\"detail-item\">\n                            <span class=\"detail-label\">Cargo Type:<\/span>\n                            <span class=\"detail-value\">${getCargoTypeName(cargoType)}<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"company-comparison\">\n                    <div class=\"comparison-header\">\n                        <i class=\"fas fa-balance-scale\"><\/i> Shipping Company Price Comparison (Estimated)\n                    <\/div>\n\n                    <div class=\"company-cards\">\n                        ${generateCompanyCards(companyPrices)}\n                    <\/div>\n\n                    <div class=\"comparison-summary\">\n                        <div class=\"summary-item\">\n                            <span class=\"summary-label\">Lowest Estimated Price:<\/span>\n                            <span class=\"summary-value\">$${Math.round(companyPrices.lowest)} - ${companyPrices.lowestCompany}<\/span>\n                        <\/div>\n                        <div class=\"summary-item\">\n                            <span class=\"summary-label\">Highest Estimated Price:<\/span>\n                            <span class=\"summary-value\">$${Math.round(companyPrices.highest)} - ${companyPrices.highestCompany}<\/span>\n                        <\/div>\n                        <div class=\"summary-item\">\n                            <span class=\"summary-label\">Average Estimated Prices:<\/span>\n                            <span class=\"summary-value\">$${Math.round(companyPrices.average)}<\/span>\n                        <\/div>\n                        <div class=\"summary-item\">\n                            <span class=\"summary-label\">Price Difference Between Highest and Lowest:<\/span>\n                            <span class=\"summary-value price-difference\">$${Math.round(companyPrices.highest - companyPrices.lowest)}<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"shipping-notice\">\n                    <div class=\"notice-title\">\n                        <i class=\"fas fa-info-circle\"><\/i> Important Information\n                    <\/div>\n                    <p>\u2022 Displayed prices are <strong>educational estimates<\/strong> based on approximate market ranges.<\/p>\n                    <p>\u2022 Prices do not include customs duties, VAT, or local handling fees.<\/p>\n                    <p>\u2022 For accurate pricing, we recommend requesting direct quotes from shipping companies or trusted platforms.<\/p>\n                    <p>\u2022 Fuel prices and additional fees (such as Surcharges) change frequently and may affect the final price.<\/p>\n                    ${destinationCountry === 'syria' || destinationCountry === 'yemen' ? \n                    '<p>\u2022 <strong>Special Note:<\/strong> There may be additional risks and delays for this destination (or even lack of regular service) due to current conditions, making the numbers here very approximate.<\/p>' : ''}\n                <\/div>\n            `;\n\n            \/\/ Hide loading and show results\n            document.getElementById('loading').style.display = 'none';\n            resultDiv.style.display = 'block';\n        }\n\n        function calculateCompanyPrices(basePrice) {\n            const prices = {};\n            let lowest = Infinity;\n            let highest = 0;\n            let lowestCompany = '';\n            let highestCompany = '';\n            let total = 0;\n\n            \/\/ Calculate each company's price (estimated)\n            Object.keys(companyRates).forEach(companyKey => {\n                const company = companyRates[companyKey];\n                const companyPrice = Math.round(basePrice * company.baseMultiplier + company.surcharge);\n                prices[companyKey] = companyPrice;\n\n                total += companyPrice;\n\n                if (companyPrice < lowest) {\n                    lowest = companyPrice;\n                    lowestCompany = company.name;\n                }\n\n                if (companyPrice > highest) {\n                    highest = companyPrice;\n                    highestCompany = company.name;\n                }\n            });\n\n            return {\n                prices,\n                lowest,\n                highest,\n                lowestCompany,\n                highestCompany,\n                average: total \/ Object.keys(companyRates).length\n            };\n        }\n\n        function generateCompanyCards(companyPrices) {\n            let cardsHTML = '';\n            const { prices, lowest } = companyPrices;\n\n            Object.keys(companyRates).forEach(companyKey => {\n                const company = companyRates[companyKey];\n                const price = prices[companyKey];\n                const isBestPrice = price === lowest;\n\n                cardsHTML += `\n                    <div class=\"company-card ${isBestPrice ? 'best-price' : ''}\">\n                        <div class=\"company-header\">\n                            <div class=\"company-logo\" style=\"background-color: ${company.logoColor}\">\n                                ${company.logo}\n                            <\/div>\n                            <div class=\"company-name\">${company.name}<\/div>\n                        <\/div>\n\n                        <div class=\"company-price\">$${price}<\/div>\n\n                        <div class=\"company-details\">\n                            <div class=\"company-detail\">\n                                <span class=\"detail-name\">Estimated Transit Time:<\/span>\n                                <span class=\"detail-value\">${company.transitTime}<\/span>\n                            <\/div>\n                            <div class=\"company-detail\">\n                                <span class=\"detail-name\">Estimated Reliability:<\/span>\n                                <span class=\"detail-value\">${company.reliability}%<\/span>\n                            <\/div>\n                            <div class=\"company-detail\">\n                                <span class=\"detail-name\">Approximate Additional Fees:<\/span>\n                                <span class=\"detail-value\">$${company.surcharge}<\/span>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"company-action\">\n                            <button class=\"quote-btn\" onclick=\"requestQuote('${company.name}', ${price})\">\n                                <i class=\"fas fa-file-invoice-dollar\"><\/i> Request Official Quote\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                `;\n            });\n\n            return cardsHTML;\n        }\n\n        function requestQuote(companyName, price) {\n            alert(`You will be (virtually) redirected to ${companyName}'s website or a booking platform to request a real quote. \nThe price displayed here ($${price}) is only an estimate and not an official offer.`);\n            \/\/ In a real application, you could redirect the user to the company's website or open a contact form\n        }\n\n        \/\/ Helper functions\n        function getCountryName(code) {\n            const countries = {\n                uae: 'United Arab Emirates',\n                saudi: 'Saudi Arabia',\n                kuwait: 'Kuwait',\n                qatar: 'Qatar',\n                bahrain: 'Bahrain',\n                oman: 'Oman',\n                egypt: 'Egypt',\n                jordan: 'Jordan',\n                lebanon: 'Lebanon',\n                syria: 'Syria',\n                yemen: 'Yemen',\n                morocco: 'Morocco',\n                algeria: 'Algeria'\n            };\n            return countries[code] || code;\n        }\n\n        function getPortName(code) {\n            const ports = {\n                shanghai: 'Shanghai',\n                ningbo: 'Ningbo',\n                shenzhen: 'Shenzhen',\n                qingdao: 'Qingdao',\n                guangzhou: 'Guangzhou',\n                xiamen: 'Xiamen',\n                tianjin: 'Tianjin',\n                dalian: 'Dalian'\n            };\n            return ports[code] || code;\n        }\n\n        function getCargoTypeName(type) {\n            const types = {\n                general: 'General Cargo',\n                perishable: 'Perishable Goods',\n                hazardous: 'Hazardous Materials',\n                refrigerated: 'Refrigerated',\n                oversized: 'Oversized Cargo',\n                fragile: 'Fragile Goods',\n                high_value: 'High Value Cargo'\n            };\n            return types[type] || type;\n        }\n\n        \/\/ Initialize container information when page loads\n        document.addEventListener('DOMContentLoaded', function() {\n            updateContainerInfo();\n        });\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Sea Freight Price Inquiry Tool &#8211; Shipping Company Comparison Sea Freight Price Inquiry Tool Get sea freight price estimates from China to all Arab countries Important Note: All prices here are educational estimates based on global index averages (such as Drewry World Container Index and Freightos Baltic Index) and do not represent official quotes from [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-986","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.msdaraknchina.com\/en\/wp-json\/wp\/v2\/pages\/986","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.msdaraknchina.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.msdaraknchina.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.msdaraknchina.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.msdaraknchina.com\/en\/wp-json\/wp\/v2\/comments?post=986"}],"version-history":[{"count":4,"href":"https:\/\/www.msdaraknchina.com\/en\/wp-json\/wp\/v2\/pages\/986\/revisions"}],"predecessor-version":[{"id":991,"href":"https:\/\/www.msdaraknchina.com\/en\/wp-json\/wp\/v2\/pages\/986\/revisions\/991"}],"wp:attachment":[{"href":"https:\/\/www.msdaraknchina.com\/en\/wp-json\/wp\/v2\/media?parent=986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}