{"result":"<style>\n.hotel-card-item:hover {\n    box-shadow: 0 8px 30px rgba(0, 188, 212, 0.15) !important;\n    transform: translateY(-4px);\n    border-color: #00BCD4 !important;\n}\n\n.hotel-card-item:hover img {\n    transform: scale(1.1);\n}\n\n.hotel-card-item a:hover {\n    background: #FB8C00 !important;\n    transform: translateY(-2px);\n    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4) !important;\n}\n\n@media (max-width: 1200px) {\n    .hotel-card-item {\n        grid-template-columns: 240px 1fr 220px !important;\n    }\n}\n\n@media (max-width: 991px) {\n    .hotel-card-item {\n        grid-template-columns: 1fr !important;\n    }\n    \n    .hotel-card-item > div:first-child {\n        height: 240px;\n    }\n    \n    .hotel-card-item > div:nth-child(3) {\n        flex-direction: row !important;\n        padding: 24px !important;\n        justify-content: space-between !important;\n    }\n}\n\n@media (max-width: 640px) {\n    .hotel-card-item > div:first-child {\n        height: 200px;\n    }\n    \n    .hotel-card-item > div:nth-child(3) {\n        flex-direction: column !important;\n    }\n}\n<\/style><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/206\/theoberoimadina-188.jpg\" \n                         alt=\"The Oberoi Madina\" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">The Oberoi Madina<\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Madinah<\/span>\n                        <\/div><div style=\"display: flex; flex-direction: column; gap: 8px; margin-top: 12px;\">\n                    <div style=\"display: flex; align-items: center; gap: 8px;\">\n                        <div style=\"display: flex; align-items: center; gap: 3px;\">\n                            <i class=\"fa fa-star\" style=\"color: #FFD700; font-size: 12px;\"><\/i><i class=\"fa fa-star\" style=\"color: #FFD700; font-size: 12px;\"><\/i><i class=\"fa fa-star\" style=\"color: #FFD700; font-size: 12px;\"><\/i><i class=\"fa fa-star\" style=\"color: #FFD700; font-size: 12px;\"><\/i><i class=\"fa fa-star-half-o\" style=\"color: #FFD700; font-size: 12px;\"><\/i>\n                        <\/div>\n                        <span style=\"font-size: 15px; font-weight: 700; color: #00ACC1;\">4.6<\/span>\n                        <span style=\"font-size: 12px; color: #78909C;\">(6,524)<\/span>\n                        <svg style=\"width: 14px; height: 14px; margin-left: 2px;\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\/>\n                            <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\/>\n                            <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\/>\n                            <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\/>\n                        <\/svg>\n                    <\/div>\n                    <div style=\"display: flex; align-items: center; gap: 8px;\">\n                        <div style=\"background: linear-gradient(135deg, #003580 0%, #0057B8 100%); color: white; padding: 4px 10px; border-radius: 6px; font-size: 16px; font-weight: 900; min-width: 36px; text-align: center;\">\n                            9.3\n                        <\/div>\n                        <div style=\"display: flex; flex-direction: column; gap: 2px;\">\n                            <span style=\"font-size: 13px; font-weight: 700; color: #003580;\">Fabuleux<\/span>\n                            <span style=\"font-size: 11px; color: #78909C;\">888 avis<\/span>\n                        <\/div>\n                        <div style=\"background: white; border: 1px solid #003580; padding: 2px 6px; border-radius: 4px; margin-left: 4px;\">\n                            <svg width=\"60\" height=\"12\" viewBox=\"0 0 200 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <text x=\"0\" y=\"30\" font-family=\"Arial, sans-serif\" font-size=\"28\" font-weight=\"bold\" fill=\"#003580\">Booking.com<\/text>\n                            <\/svg>\n                        <\/div>\n                    <\/div><\/div>\n                    <\/div>\n                    \n                    \n                    <div style=\"display: inline-flex; align-items: center; gap: 6px; background: #E0F7FA; color: #00838F; padding: 6px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; max-width: fit-content;\">\n                        <i class=\"fa fa-location-arrow\" style=\"font-size: 14px;\"><\/i>\n                        <span>919 m from the mosque<\/span>\n                    <\/div>\n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            0<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            0<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=206&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1042\/cSwaquavista-amp-suites_18.jpg\" \n                         alt=\"Auqa-Visa Hotel &amp; Suites _ Aqaba\" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Auqa-Visa Hotel &amp; Suites _ Aqaba<\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Aqaba<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            35<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            35<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1042&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1028\/QhPpetra-canyon_101.jpg\" \n                         alt=\"Petra Canyon Hotel\" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Petra Canyon Hotel<\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Petra<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            50<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            50<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1028&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1025\/c4qeast_13.jpg\" \n                         alt=\"Grand East Hotel \" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Grand East Hotel <\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Read Sea<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            50<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            50<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1025&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1026\/89fpetra-palace_6.jpg\" \n                         alt=\"Petra Palace Hotel\" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Petra Palace Hotel<\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Petra<\/span>\n                        <\/div><div style=\"display: flex; flex-direction: column; gap: 8px; margin-top: 12px;\">\n                    <div style=\"display: flex; align-items: center; gap: 8px;\">\n                        <div style=\"display: flex; align-items: center; gap: 3px;\">\n                            <i class=\"fa fa-star-o\" style=\"color: #FFD700; font-size: 12px;\"><\/i><i class=\"fa fa-star-o\" style=\"color: #FFD700; font-size: 12px;\"><\/i><i class=\"fa fa-star-o\" style=\"color: #FFD700; font-size: 12px;\"><\/i><i class=\"fa fa-star-o\" style=\"color: #FFD700; font-size: 12px;\"><\/i><i class=\"fa fa-star-o\" style=\"color: #FFD700; font-size: 12px;\"><\/i>\n                        <\/div>\n                        <span style=\"font-size: 15px; font-weight: 700; color: #00ACC1;\">0.0<\/span>\n                        <span style=\"font-size: 12px; color: #78909C;\">()<\/span>\n                        <svg style=\"width: 14px; height: 14px; margin-left: 2px;\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\/>\n                            <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\/>\n                            <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\/>\n                            <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\/>\n                        <\/svg>\n                    <\/div>\n                    <div style=\"display: flex; align-items: center; gap: 8px;\">\n                        <div style=\"background: linear-gradient(135deg, #003580 0%, #0057B8 100%); color: white; padding: 4px 10px; border-radius: 6px; font-size: 16px; font-weight: 900; min-width: 36px; text-align: center;\">\n                            0.0\n                        <\/div>\n                        <div style=\"display: flex; flex-direction: column; gap: 2px;\">\n                            \n                            <span style=\"font-size: 11px; color: #78909C;\"> avis<\/span>\n                        <\/div>\n                        <div style=\"background: white; border: 1px solid #003580; padding: 2px 6px; border-radius: 4px; margin-left: 4px;\">\n                            <svg width=\"60\" height=\"12\" viewBox=\"0 0 200 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <text x=\"0\" y=\"30\" font-family=\"Arial, sans-serif\" font-size=\"28\" font-weight=\"bold\" fill=\"#003580\">Booking.com<\/text>\n                            <\/svg>\n                        <\/div>\n                    <\/div><\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            52<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            52<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1026&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1024\/t3kdead-sea-spa_16.jpg\" \n                         alt=\"Read Sea SPA Hotel\" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Read Sea SPA Hotel<\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Read Sea<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            60<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            60<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1024&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1034\/pTbgrand-mercure-petra.fr.html_7.jpg\" \n                         alt=\"Grand Mercure Petra\" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Grand Mercure Petra<\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Petra<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            65<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            65<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1034&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1029\/9Qrpetra-moon_14.jpg\" \n                         alt=\"Petra Moon Hotel\" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Petra Moon Hotel<\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Petra<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            65<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            65<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1029&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1082\/g8v759142442.jpg\" \n                         alt=\"Makarem Mina\" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Makarem Mina<\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Makkah<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                    <div style=\"display: inline-flex; align-items: center; gap: 6px; background: #E0F7FA; color: #00838F; padding: 6px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; max-width: fit-content;\">\n                        <i class=\"fa fa-location-arrow\" style=\"font-size: 14px;\"><\/i>\n                        <span>4.0 km from the mosque<\/span>\n                    <\/div>\n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            16<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            16<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1082&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1032\/tquthe-old-village-amp-resort_44.jpg\" \n                         alt=\"The Old Village hotel \" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">The Old Village hotel <\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Petra<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            70<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            70<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1032&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1045\/xB4oryx_25.jpg\" \n                         alt=\"Aqaba Oryx Hotel \" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Aqaba Oryx Hotel <\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Aqaba<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            75<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            75<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1045&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1050\/J2Xresidenceaqaba_53.jpg\" \n                         alt=\"Movenpick Resort &amp; Residence Aqaba\" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Movenpick Resort &amp; Residence Aqaba<\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Aqaba<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            75<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            75<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1050&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/310\/makaremal-baithotel-1.jpg\" \n                         alt=\"Makarem Al-Bait Hotel\" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Makarem Al-Bait Hotel<\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Makkah<\/span>\n                        <\/div><div style=\"display: flex; flex-direction: column; gap: 8px; margin-top: 12px;\">\n                    <div style=\"display: flex; align-items: center; gap: 8px;\">\n                        <div style=\"display: flex; align-items: center; gap: 3px;\">\n                            <i class=\"fa fa-star\" style=\"color: #FFD700; font-size: 12px;\"><\/i><i class=\"fa fa-star\" style=\"color: #FFD700; font-size: 12px;\"><\/i><i class=\"fa fa-star\" style=\"color: #FFD700; font-size: 12px;\"><\/i><i class=\"fa fa-star\" style=\"color: #FFD700; font-size: 12px;\"><\/i><i class=\"fa fa-star-o\" style=\"color: #FFD700; font-size: 12px;\"><\/i>\n                        <\/div>\n                        <span style=\"font-size: 15px; font-weight: 700; color: #00ACC1;\">4.0<\/span>\n                        <span style=\"font-size: 12px; color: #78909C;\">(2,907)<\/span>\n                        <svg style=\"width: 14px; height: 14px; margin-left: 2px;\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\/>\n                            <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\/>\n                            <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\/>\n                            <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\/>\n                        <\/svg>\n                    <\/div>\n                    <div style=\"display: flex; align-items: center; gap: 8px;\">\n                        <div style=\"background: linear-gradient(135deg, #003580 0%, #0057B8 100%); color: white; padding: 4px 10px; border-radius: 6px; font-size: 16px; font-weight: 900; min-width: 36px; text-align: center;\">\n                            8.8\n                        <\/div>\n                        <div style=\"display: flex; flex-direction: column; gap: 2px;\">\n                            <span style=\"font-size: 13px; font-weight: 700; color: #003580;\">Fabuleux<\/span>\n                            <span style=\"font-size: 11px; color: #78909C;\">1,374 avis<\/span>\n                        <\/div>\n                        <div style=\"background: white; border: 1px solid #003580; padding: 2px 6px; border-radius: 4px; margin-left: 4px;\">\n                            <svg width=\"60\" height=\"12\" viewBox=\"0 0 200 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                <text x=\"0\" y=\"30\" font-family=\"Arial, sans-serif\" font-size=\"28\" font-weight=\"bold\" fill=\"#003580\">Booking.com<\/text>\n                            <\/svg>\n                        <\/div>\n                    <\/div><\/div>\n                    <\/div>\n                    \n                    \n                    <div style=\"display: inline-flex; align-items: center; gap: 6px; background: #E0F7FA; color: #00838F; padding: 6px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; max-width: fit-content;\">\n                        <i class=\"fa fa-location-arrow\" style=\"font-size: 14px;\"><\/i>\n                        <span>3.3 km from the mosque<\/span>\n                    <\/div>\n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            18<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            18<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=310&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1043\/zfzlacosta_9.jpg\" \n                         alt=\"Lacosta Hotel Aqaba\" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Lacosta Hotel Aqaba<\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Aqaba<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            78<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            78<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1043&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1022\/EzKmoevenpick-resort-spa-dead-sea_36.jpg\" \n                         alt=\"Movenpick Resort Dead sea \" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Movenpick Resort Dead sea <\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Read Sea<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            78<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            78<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1022&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1049\/RP4moevenpicktala_53.jpg\" \n                         alt=\"Movenpick Resort &amp; Spa Tala Bay , aqaba \" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Movenpick Resort &amp; Spa Tala Bay , aqaba <\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Aqaba<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            80<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            80<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1049&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1030\/Fwbmoonluxxx.jpg\" \n                         alt=\"Petra Moon Luxuri Hotel\" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Petra Moon Luxuri Hotel<\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Petra<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            90<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            90<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1030&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1018\/EhBhilton-amman_30.jpg\" \n                         alt=\"Signia by Hilton Amman\" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Signia by Hilton Amman<\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Amman<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            100<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            100<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1018&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1010\/TrmHOTELIMAGE.jpg\" \n                         alt=\"Al QASR METRROPOLE HOTEL\" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Al QASR METRROPOLE HOTEL<\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Amman<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            100<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            100<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1010&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div><div style=\"background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08); border: 2px solid #B2EBF2; margin-bottom: 24px; transition: all 0.3s ease; display: grid; grid-template-columns: 280px 1fr 240px; gap: 0;\" class=\"hotel-card-item\">\n                \n                <!-- Image Section -->\n                <div style=\"position: relative; overflow: hidden; background: #E0F7FA;\">\n                    <img src=\"http:\/\/nexsafar.com\/-image\/hotels\/1048\/smxkempinskiaqaba_105.jpg\" \n                         alt=\"Kempinski Hotel Aqaba Red Sea\" \n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;\"\n                         onerror=\"this.src='\/assets\/img\/hotel-icon.jpg'\">\n                    <div style=\"position: absolute; top: 16px; left: 16px; background: rgba(0, 188, 212, 0.95); backdrop-filter: blur(10px); color: #FFFFFF; padding: 8px 14px; border-radius: 24px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);\">\n                        <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> <i class=\"fa fa-star\" style=\"color: #D4B76E; font-size: 12px;\"><\/i> \n                    <\/div>\n                <\/div>\n                \n                <!-- Info Section -->\n                <div style=\"padding: 28px; display: flex; flex-direction: column; justify-content: space-between;\">\n                    <div>\n                        <h3 style=\"font-size: 22px; font-weight: 800; color: #00ACC1; margin: 0 0 12px 0; line-height: 1.3;\">Kempinski Hotel Aqaba Red Sea<\/h3>\n                        \n                        <div style=\"display: flex; align-items: center; gap: 8px; color: #546E7A; font-size: 15px; margin-bottom: 12px;\">\n                            <i class=\"fa fa-map-marker\" style=\"color: #C9A962; font-size: 16px;\"><\/i>\n                            <span>Aqaba<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    \n                <\/div>\n                \n                <!-- Section Prix -->\n                <div style=\"background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;\">\n                    <div style=\"width: 100%;\">\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;\">Prix par nuit<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 36px; font-weight: 900; margin-bottom: 2px; line-height: 1;\">\n                            105<span style=\"font-size: 20px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 16px;\">pour la chambre<\/div>\n                        \n                        <!-- Séparateur -->\n                        <div style=\"width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 16px 0;\"><\/div>\n                        \n                        <!-- Prix total du séjour -->\n                        <div style=\"color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; margin-bottom: 6px;\">Total séjour<\/div>\n                        <div style=\"color: #FFFFFF; font-size: 24px; font-weight: 800; margin-bottom: 4px;\">\n                            105<span style=\"font-size: 16px;\">€<\/span>\n                        <\/div>\n                        <div style=\"color: rgba(255, 255, 255, 0.7); font-size: 11px; margin-bottom: 20px;\">(1 nuit)<\/div>\n                    <\/div>\n                    \n                    <a href=\"detail-hotel.php?id=1048&amp;bk=0&amp;etape=1&amp;id_etape=0&amp;da=&amp;nbn=1&amp;ville=\" style=\"display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #C9A962; color: #FFFFFF; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 15px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3);\">\n                        <span>Sélectionner<\/span>\n                        <i class=\"fa fa-arrow-right\" style=\"font-size: 16px;\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div>","rows":66,"qty":20,"active":1}