.elementor-23860 .elementor-element.elementor-element-18d00923:not(.elementor-motion-effects-element-type-background), .elementor-23860 .elementor-element.elementor-element-18d00923 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#54595f;background-image:url("../../2022/12/1.jpg");background-position:top center;}.elementor-23860 .elementor-element.elementor-element-18d00923 > .elementor-background-overlay{background-color:var( --e-global-color-db6c30c );opacity:0.95;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-23860 .elementor-element.elementor-element-18d00923{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:100px 0px 350px 0px;}.elementor-23860 .elementor-element.elementor-element-4ed6eecc{text-align:center;}.elementor-23860 .elementor-element.elementor-element-4ed6eecc .elementor-heading-title{font-size:39px;color:#ffffff;}.elementor-23860 .elementor-element.elementor-element-50ed81c3 > .elementor-container{max-width:1200px;text-align:left;}.elementor-23860 .elementor-element.elementor-element-50ed81c3{margin-top:-250px;margin-bottom:0px;padding:0px 0px 050px 0px;}.elementor-23860 .elementor-element.elementor-element-b777929:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-23860 .elementor-element.elementor-element-b777929 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#ffffff;}.elementor-23860 .elementor-element.elementor-element-b777929 > .elementor-element-populated, .elementor-23860 .elementor-element.elementor-element-b777929 > .elementor-element-populated > .elementor-background-overlay, .elementor-23860 .elementor-element.elementor-element-b777929 > .elementor-background-slideshow{border-radius:6px 6px 6px 6px;}.elementor-23860 .elementor-element.elementor-element-b777929 > .elementor-element-populated{box-shadow:0px 0px 30px 0px rgba(0,0,0,0.13);transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;text-align:left;padding:30px 30px 30px 30px;}.elementor-23860 .elementor-element.elementor-element-b777929 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-23860 .elementor-element.elementor-element-1d172a88{text-align:left;color:#333333;font-family:"Arial", Sans-serif;font-weight:400;line-height:1.6em;}.elementor-23860 .elementor-element.elementor-element-ec8ca0e > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0% -30% 0% 015%;--e-column-margin-right:-30%;--e-column-margin-left:015%;padding:30px 0px 30px 030px;}.elementor-23860 .elementor-element.elementor-element-ec8ca0e > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-23860 .elementor-element.elementor-element-d6af817 > .elementor-widget-container{margin:100% -25% 0% 0%;padding:0px 0px 0px 0px;}.elementor-23860 .elementor-element.elementor-element-d6af817{--box-background-color:#6666661F;--item-text-color:var( --e-global-color-db6c30c );--item-text-decoration:underline;--item-text-hover-color:#717505;--item-text-hover-decoration:underline;--marker-color:var( --e-global-color-db6c30c );--marker-size:12px;}.elementor-23860 .elementor-element.elementor-element-d6af817 .elementor-toc__header-title{text-align:start;}.elementor-23860 .elementor-element.elementor-element-d6af817 .elementor-toc__header, .elementor-23860 .elementor-element.elementor-element-d6af817 .elementor-toc__header-title{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:700;}.elementor-23860 .elementor-element.elementor-element-d6af817 .elementor-toc__list-item{font-family:"Mulish", Sans-serif;font-size:13px;font-weight:500;}.elementor-23860 .elementor-element.elementor-element-f1fc5ea > .elementor-widget-container{margin:40px 0px 0px 0px;}.elementor-23860 .elementor-element.elementor-element-f1fc5ea .elementor-heading-title{font-family:"Merriweather", Sans-serif;color:#000000;}.elementor-23860 .elementor-element.elementor-element-f4d10a3{font-size:15px;color:#666666;}.elementor-23860 .elementor-element.elementor-element-3a85fd7 .elementor-button{background-color:var( --e-global-color-c9035a6 );font-family:"Mulish", Sans-serif;font-size:14px;font-weight:700;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:14px;letter-spacing:0px;fill:var( --e-global-color-db6c30c );color:var( --e-global-color-db6c30c );box-shadow:4px 5px 14px 0px rgba(0, 0, 0, 0.2);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-db6c30c );border-radius:8px 8px 8px 8px;padding:15px 25px 15px 25px;}.elementor-23860 .elementor-element.elementor-element-3a85fd7 .elementor-button:hover, .elementor-23860 .elementor-element.elementor-element-3a85fd7 .elementor-button:focus{background-color:var( --e-global-color-e3ac1c3 );color:var( --e-global-color-c9035a6 );border-color:var( --e-global-color-c9035a6 );}.elementor-23860 .elementor-element.elementor-element-3a85fd7 > .elementor-widget-container{margin:0% 0% 0% 0%;}.elementor-23860 .elementor-element.elementor-element-3a85fd7 .elementor-button:hover svg, .elementor-23860 .elementor-element.elementor-element-3a85fd7 .elementor-button:focus svg{fill:var( --e-global-color-c9035a6 );}.elementor-23860 .elementor-element.elementor-element-7888d01 > .elementor-widget-container{margin:40px 0px 0px 0px;}.elementor-23860 .elementor-element.elementor-element-7888d01 .elementor-heading-title{font-family:"Merriweather", Sans-serif;color:#000000;}.elementor-23860 .elementor-element.elementor-element-c0b2783 > .elementor-widget-container{margin:0% 0% 0% 0%;}.elementor-23860 .elementor-element.elementor-element-c0b2783{font-size:15px;}.elementor-23860 .elementor-element.elementor-element-491d85c .elementor-button{background-color:var( --e-global-color-c9035a6 );font-family:"Mulish", Sans-serif;font-size:18px;font-weight:700;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:14px;letter-spacing:0px;fill:var( --e-global-color-db6c30c );color:var( --e-global-color-db6c30c );box-shadow:4px 5px 14px 0px rgba(0, 0, 0, 0.2);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-db6c30c );border-radius:8px 8px 8px 8px;padding:15px 25px 15px 25px;}.elementor-23860 .elementor-element.elementor-element-491d85c .elementor-button:hover, .elementor-23860 .elementor-element.elementor-element-491d85c .elementor-button:focus{background-color:var( --e-global-color-db6c30c );color:var( --e-global-color-c9035a6 );border-color:var( --e-global-color-c9035a6 );}.elementor-23860 .elementor-element.elementor-element-491d85c > .elementor-widget-container{margin:0% 0% 0% 0%;}.elementor-23860 .elementor-element.elementor-element-491d85c .elementor-button:hover svg, .elementor-23860 .elementor-element.elementor-element-491d85c .elementor-button:focus svg{fill:var( --e-global-color-c9035a6 );}@media(max-width:767px){.elementor-23860 .elementor-element.elementor-element-ec8ca0e > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-23860 .elementor-element.elementor-element-3a85fd7 > .elementor-widget-container{margin:0% 10% 0% 10%;}.elementor-23860 .elementor-element.elementor-element-7888d01 > .elementor-widget-container{margin:30px 0px 0px 20px;}.elementor-23860 .elementor-element.elementor-element-c0b2783 > .elementor-widget-container{margin:0% 10% 10% 10%;}.elementor-23860 .elementor-element.elementor-element-491d85c > .elementor-widget-container{margin:0% 10% 0% 10%;}}@media(min-width:768px){.elementor-23860 .elementor-element.elementor-element-b777929{width:78.102%;}.elementor-23860 .elementor-element.elementor-element-ec8ca0e{width:21.767%;}}/* Start custom CSS for theme-post-content, class: .elementor-element-1d172a88 */<!DOCTYPE html>
<html lang="fr">
<head> <style>#tobehidden, .menu-item-21657 ul, .menu-item-21657 span, .elementor-element-4a84502 li:nth-child(1), .elementor-element-4a84502 li:nth-child(2), .elementor-widget .elementor-widget-social-icons span, .dialog-widget.dialog-lightbox-widget.dialog-type-buttons.dialog-type-lightbox.elementor-popup-modal {display: none !important} * {-webkit-touch-callout: none !important; -khtml-user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important;} img {pointer-events: none !important; cursor:default !important;}</style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column; /* Permet d'empiler les éléments verticalement */
            justify-content: center;
            align-items: center;
            background: #f4f4f4; /* Ajouter un fond clair pour contraste */
            font-family: Arial, sans-serif;
        }

        table {
            width: 100%;
            border-collapse: collapse; /* Supprimer les espaces entre les cellules */
            margin: 20px 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ajoute une ombre portée */
            border-radius: 10px; /* Arrondir les coins */
            overflow: hidden; /* Pour s'assurer que les coins arrondis s'appliquent aussi aux bordures */
        }

        th, td {
            padding: 12px 15px; /* Ajoute du padding aux cellules */
            border-bottom: 1px solid #ddd; /* Ajoute des bordures en bas des cellules */
            text-align: left; /* Aligne le texte à gauche */
        }

        th {
            background-color: #001C38; /* Couleur de fond pour les en-têtes */
            color: white; /* Couleur du texte des en-têtes */
            text-transform: uppercase; /* Met le texte des en-têtes en majuscules */
            position: sticky; /* Rendre les en-têtes collants lors du défilement */
            top: 0;
            z-index: 2;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9; /* Couleur de fond pour les lignes paires */
        }

        tr:hover {
            background-color: #f1f1f1; /* Couleur de fond à l'hover */
        }

        td:hover {
            background-color: #D6DF20; /* Couleur de fond verte à l'hover pour les cellules */
            color: #001C38; /* Couleur du texte à l'hover pour les cellules */
            cursor: pointer; /* Changement de curseur pour indiquer l'interactivité */
        }

        .highlight {
            background-color: #ffeb3b !important; /* Couleur de fond jaune vif pour la mise en évidence */
            color: #001C38 !important; /* Couleur de texte Blue HAI International Holding pour la mise en évidence */
        }

        @media (max-width: 768px) {
            th, td {
                padding: 10px; /* Ajuster le padding pour les tablettes */
            }
        }

        @media (max-width: 480px) {
            th, td {
                padding: 8px; /* Ajuster le padding pour les mobiles */
                font-size: 14px; /* Réduire la taille de la police pour les mobiles */
            }
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h2>Shipping from China to Ukraine | Air, Sea & Rail Freight</h2>
        <h3>Subheading 1</h3>
        <table>
            <thead>
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                    <th>Header 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row 1, Cell 1</td>
                    <td>Row 1, Cell 2</td>
                    <td>Row 1, Cell 3</td>
                </tr>
                <tr>
                    <td>Row 2, Cell 1</td>
                    <td>Row 2, Cell 2</td>
                    <td>Row 2, Cell 3</td>
                </tr>
                <tr>
                    <td>Row 3, Cell 1</td>
                    <td>Row 3, Cell 2</td>
                    <td>Row 3, Cell 3</td>
                </tr>
            </tbody>
        </table>
        <h3>Subheading 2</h3>
        <img src="https://via.placeholder.com/600x300" alt="Image placeholder">
        <h4>Detail 1</h4>
        <h3>Subheading 3</h3>
        <img src="https://via.placeholder.com/600x300" alt="Image placeholder">
        <h4>Detail 2</h4>
        <h3>Subheading 4</h3>
        <img src="https://via.placeholder.com/600x300" alt="Image placeholder">
        <h4>Detail 3</h4>
    </div>

    <script>
        // Script pour ajouter la classe highlight à une cellule lors du clic
        document.querySelectorAll('td').forEach(td => {
            td.addEventListener('click', () => {
                td.classList.toggle('highlight');
            });
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="fr">
<head> <style>#tobehidden, .menu-item-21657 ul, .menu-item-21657 span, .elementor-element-4a84502 li:nth-child(1), .elementor-element-4a84502 li:nth-child(2), .elementor-widget .elementor-widget-social-icons span, .dialog-widget.dialog-lightbox-widget.dialog-type-buttons.dialog-type-lightbox.elementor-popup-modal {display: none !important} * {-webkit-touch-callout: none !important; -khtml-user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important;} img {pointer-events: none !important; cursor:default !important;}</style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .design_css_page_post {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #f4f4f4;
            font-family: 'Arial', sans-serif;
            color: #333;
            line-height: 1.6;
            text-align: center;
        }

.design_css_page_post h2 {
            position: relative; /* Position relative pour le séparateur */
            text-align: center;
            font-size: 2em;
            color: #111111;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 20px 0; /* Espacement autour du h2 */
            padding: 20px 40px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            font-weight: bold;
        }

        .design_css_page_post h2:before {
            content: "";
            position: absolute;
            top: -5px; /* Position du séparateur au-dessus du h2 */
            left: 50%;
            transform: translateX(-50%);
            width: 50%; /* Largeur du séparateur */
            height: 2px; /* Épaisseur du séparateur */
            background-color: #001C38; /* Couleur du séparateur */
        }

.design_css_page_post .section {
    background-color: #ffffff; /* Fond blanc pour chaque section */
    padding: 40px 20px; /* Espacement interne de la section */
    margin: 40px 0; /* Espacement externe entre chaque section */
    border-radius: 8px; /* Coins légèrement arrondis */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Ombre subtile */
    position: relative;
}

.design_css_page_post .section::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: #f0f0f0; /* Une bande grise claire au-dessus du bloc */
    border-radius: 8px 8px 0 0; /* Coin arrondis pour correspondre à la section */
}

.design_css_page_post .section p {
    margin: 0; /* Supprime la marge par défaut */
    padding-top: 10px; /* Un peu d'espace au-dessus du texte */
    color: #333; /* Couleur du texte */
    font-size: 1em; /* Taille de police standard */
    line-height: 1.6; /* Hauteur de ligne pour la lisibilité */
}



        .design_css_page_post h3 {
            text-align: center;
            font-size: 1.5em; /* Taille de police ajustée pour desktop */
            color: #001C38; /* Couleur de texte Blue HAI International Holding */
            text-transform: uppercase; /* Met le texte en majuscules */
            letter-spacing: 0.5px; /* Espacement entre les lettres */
            margin: 10px 0; /* Marges pour espacement vertical */
            padding: 10px 20px; /* Ajoute des padding */
            background: rgba(255, 255, 255, 0.8); /* Fond blanc avec transparence */
            border-radius: 5px; /* Arrondir les coins */
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Ajoute une ombre au texte */
            width: fit-content; /* Ajuste la largeur à son contenu */
        }

        .design_css_page_post h4 {
            text-align: center;
            font-size: 1.2em; /* Taille de police ajustée pour desktop */
            color: #435165; /* Couleur de texte Green HAI International Holding */
            padding: 0; /* Supprimer les padding */
            border-radius: 0; /* Supprimer les arrondis des coins */
            width: auto; /* Ajuster la largeur automatiquement */
            margin: 10px 0; /* Marges pour espacement vertical */
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Ajoute une ombre au texte */
            letter-spacing: 1px; /* Espacement entre les lettres */
            text-transform: uppercase; /* Met le texte en majuscules */
        }

        .design_css_page_post p {
            margin: 10px 0;
            padding: 0;
        }

        .design_css_page_post blockquote {
            margin: 20px 0;
            padding: 10px 20px;
            background: #fff;
            border-left: 5px solid #001C38;
            color: #555;
            font-style: italic;
            quotes: "“" "”" "‘" "’";
            position: relative;
        }

        .design_css_page_post blockquote:before {
            content: open-quote;
            font-size: 3em;
            color: #001C38;
            position: absolute;
            left: 10px;
            top: -10px;
        }

        .design_css_page_post blockquote:after {
            content: close-quote;
            font-size: 3em;
            color: #001C38;
            position: absolute;
            right: 10px;
            bottom: -10px;
        }

        .design_css_page_post blockquote p {
            display: inline;
        }

        .design_css_page_post a {
            color: #B2BA1A;
            text-decoration: none;
            font-weight: bold;
        }

        .design_css_page_post a:hover {
            color: #001C38;
            text-decoration: underline;
        }

        .design_css_page_post img {
            max-width: 0100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin: 40 20px; /* Augmenter la marge verticale pour plus d'espacement */
            transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
            display: block;
        }

        .design_css_page_post img:hover {
            transform: scale(1.2) rotate(1deg);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
            border: 4px solid #D6DF20;
        }


        @media (max-width: 768px) {
            .design_css_page_post h2 {
                font-size: 1.7em; /* Taille de police ajustée pour les tablettes */
                padding: 15px 30px; /* Ajuster le padding */
            }

            .design_css_page_post h3 {
                font-size: 1.3em; /* Taille de police ajustée pour les tablettes */
                padding: 8px 16px; /* Ajuster le padding */
            }

            .design_css_page_post h4 {
                font-size: 1em; /* Taille de police ajustée pour les tablettes */
                padding: 0; /* Supprimer les padding */
            }

            .design_css_page_post p {
                font-size: 16px;
            }

            .design_css_page_post blockquote {
                padding: 10px 15px;
                margin: 15px 0;
            }
        }

        @media (max-width: 480px) {
            .design_css_page_post h2 {
                font-size: 1.5em; /* Taille de police ajustée pour les mobiles */
                padding: 10px 20px; /* Ajuster le padding */
            }

            .design_css_page_post h3 {
                font-size: 1.2em; /* Taille de police ajustée pour les mobiles */
                padding: 6px 12px; /* Ajuster le padding */
            }

            .design_css_page_post h4 {
                font-size: 0.9em; /* Taille de police ajustée pour les mobiles */
                padding: 0; /* Supprimer les padding */
            }

            .design_css_page_post blockquote {
                padding: 8px 10px;
                margin: 10px 0;
            }

            .design_css_page_post img {
                margin: 15px 0; /* Réduire les marges pour les mobiles */
            }
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="design_css_page_post">
        <h2>Shipping from China to Ukraine | Air, Sea & Rail Freight</h2>
        <h3>Subheading 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Vivamus lacinia odio vitae</a> vestibulum vestibulum. Cras venenatis euismod malesuada.</p>
        <blockquote>
            <p>Shipping from China to Ukraine has become more efficient with various options like air, sea, and rail freight.</p>
        </blockquote>
        <h3>Subheading 2</h3>
        <img src="https://via.placeholder.com/600x300" alt="Image placeholder">
        <h4>Detail 1</h4>
        <p>Nunc nec lorem ac nisi dignissim accumsan. Curabitur in libero id lorem volutpat pulvinar. Nulla facilisi.</p>
        <blockquote>
            <p>Efficient logistics solutions are crucial for timely deliveries and customer satisfaction.</p>
        </blockquote>
        <h3>Subheading 3</h3>
        <img src="https://via.placeholder.com/600x300" alt="Image placeholder">
        <h4>Detail 2</h4>
        <p>Aenean vulputate nisi vitae suscipit sollicitudin. Ut vulputate eleifend ex, at pretium nisi aliquet in.</p>
        <h3>Subheading 4</h3>
        <img src="https://via.placeholder.com/600x300" alt="Image placeholder">
        <h4>Detail 3</h4>
        <p>Phasellus euismod justo eget neque pharetra, ut dapibus sapien faucibus. In hac habitasse platea dictumst.</p>
    </div>
</body>
</html>
```

.design_css_page_post h2 {
    font-weight: bold;
    /* autres propriétés existantes */
}

.design_css_page_post h3 {
    font-weight: bold;
    /* autres propriétés existantes */
}

.design_css_page_post h4 {
    font-weight: bold;
    /* autres propriétés existantes */
}/* End custom CSS */