.gainsboro{background:#dcdcdc}.white-bg{background:#fff}.white-color{color:#fff}.text-right{text-align:right}.form-horizontal .control-label{text-align:right!important}.vectormap path{fill:#fff}.revolution-slider .revslider-initialised .tp-simpleresponsive{max-height:450px!important}h4.box-title{font-size:1.3em;padding:13px 0}h2.box-title{font-size:1.3em;padding:13px 0}h1.box-title{font-size:1.3em;padding:13px 0}.vectormap path:hover{fill:orange}.listing-style3.car .box,.listing-style3.car.box{border-radius:12px 0}.listing-style3.car figure img{max-width:80%;max-height:70px;border-radius:24px 0}.package_title{background:#cdcdcd;color:#fff551!important;padding:15px 10px}.testimonial p.description{height:auto!important}.author .name small{padding:10px 0;color:#7a1c68}button{background:#7A1C68}.a h2{color:#fff}.font_medium{font-size:1.3em!important}.gradian_button{background:#f0b7a1;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjdhMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzhjMzMxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzc1MjIwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZjZlNGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top,#f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f0b7a1),color-stop(50%,#8c3310),color-stop(51%,#752201),color-stop(100%,#bf6e4e));background:-webkit-linear-gradient(top,#f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);background:-o-linear-gradient(top,#f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);background:-ms-linear-gradient(top,#f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);background:linear-gradient(to bottom,#f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0b7a1',endColorstr='#bf6e4e',GradientType=0)}.tab-content.package{background:#fff!important}.heading-orange{background:#3e2255;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNlMjI1NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiNjE2N2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top,#3e2255 0%,#b6167c 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3e2255),color-stop(100%,#b6167c));background:-webkit-linear-gradient(top,#3e2255 0%,#b6167c 100%);background:-o-linear-gradient(top,#3e2255 0%,#b6167c 100%);background:-ms-linear-gradient(top,#3e2255 0%,#b6167c 100%);background:linear-gradient(to bottom,#3e2255 0%,#b6167c 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e2255',endColorstr='#b6167c',GradientType=0);color:#fff}.text-orange{color:orange}.style3 .footer-wrapper h4{padding-right:-6px;border-bottom-width:50%;border-bottom: 1px solid #e7b65e;font-weight: 600;font-size:1.1em;color:#7a1c68}.heading-padding{padding:10px 30px}.feedback{border-top:1px solid #FFF6F6;padding-top:5px;border-bottom:1px solid rgba(4,1,1,0.04)}article.box.package{background:#7b0462;border-radius:10px}.price small{font-size:1.25em!important;color:#8c1a6f!important;font-family:sans-serif}.qtitle{color:#450244;font-size:1.3em;font-family:sans-serif}.price{color:#801B6A;font-size:1em;text-transform:uppercase;line-height:1;display:block;background:#fff;padding:6px}@media (min-width:991px){.main-head{margin-top:15px;margin-bottom:15px}}@media (max-width:991px){.container{width:auto}.search-tab-content{padding:4px 0!important}ul.search-tabs li a{font-size:1em!important}}@media (max-width:750px){.listing-style3.car figure img{max-width:100%!important;border-radius:initial!important}.search-box{margin-top:-40px;position:relative;z-index:99}.listing-style3.car .details .character{border-left:none;border-top:1px solid #000;padding:4px 1px;margin-top:1em}}.five-stars-container .four-stars,.five-stars-container .three-stars,.five-stars-container .two-stars,.five-stars-container .one-stars,.five-stars-container.editable-rating .ui-slider-range{display:block;overflow:hidden;position:relative;padding-right:1px}.five-stars-container .two-stars::before,.five-stars-container.editable-rating .ui-slider-range::before{content:"\e006\e006";color:#fdb714}.five-stars-container .three-stars::before,.five-stars-container.editable-rating .ui-slider-range::before{content:"\e006\e006\e006\e006";color:#fdb714}.five-stars-container .four-stars::before,.five-stars-container.editable-rating .ui-slider-range::before{content:"\e006\e006\e006\e006\e006";color:#fdb714}.five-stars-container .one-stars::before,.five-stars-container.editable-rating .ui-slider-range::before{content:"\e006";color:#fdb714}.five-stars-container .five-stars::before,.five-stars-container.editable-rating .ui-slider-range::before{content:"\e006\e006\e006\e006\e006";color:#fdb714}.sgaf{color:black !important;padding:10px 0;border-radius:10px;font-weight:700;margin:1px 0;border-bottom:9px solid #861f72;border-top:9px solid #861f72;text-align:center;font-size:1.3em}.sgaf:hover{background:#bf3976;color:#fff}.sgaf a:hover{color:#fff}.float-right{float:right;padding-right:10px}#footer.style3 #back-to-top i{border-color:#FFFEFF;color:#2A2A2A;background:#fff}#footer.style3 .copyright p{color:#FDFDFD;padding-top:13px}#footer.style3 .bottom{background:#3e2255;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top,#3e2255 0%,#b6167c 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3e2255),color-stop(100%,#b6167c));background:-webkit-linear-gradient(top,#3e2255 0%,#b6167c 100%);background:-o-linear-gradient(top,#3e2255 0%,#b6167c 100%);background:-ms-linear-gradient(top,#3e2255 0%,#b6167c 100%);background:linear-gradient(to bottom,#3e2255 0%,#b6167c 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e2255',endColorstr='#b6167c',GradientType=0);color:#fff}#footer.style3 h2,#footer.style3 .contact-details .contact-phone{color:#7a1c68;font-weight:700}address{margin-bottom:10px}.whats-up{background:url(../images/icon/wtsup.png) 32px 32px;width:32px;height:32px;float:right}.slides{position:relative}.testimonial.style2 .description{background:#fff;padding:25px;margin:2px}.listing-style1.hotel .feedback .review,.listing-style1.cruise .feedback .review{float:initial!important}.character.five-stars-container{float:right}.listing-style1.hotel .five-stars-container,.listing-style1.cruise .five-stars-container{float:left!important}a.button.btn-small.sgafbtn{background:#7a1c68}a.button.btn-small.sgafbtn:hover{background:#488bc7;border-radius:10px;cursor:pointer}.long-description{background:rgba(122,28,104,1);color:#fff;padding:3px 21px;font-size:1.5em;font-family:sans-serif;letter-spacing:.012em;word-spacing:.02em;line-height:1.32em}.image-box .box img,.image-box.box img{height:202px!important}article.box.hotel{margin-bottom:8px}.a{z-index:1;top:0;position:absolute;padding:10px;background:#8c1a6f;border-radius:27px 0 20px}.testimonial.style3 .author{top:-111px!important}p.description{height:100px}h4.box-title.sagaf{height:39px;font-size:1.3em}h4.box-title.qtitle{height:48px}.listing-style3.car .box.tours,.listing-style3.car.box.tours{background:#892E87!important;color:#fff}.listing-style3.car .box.transportation,.listing-style3.car.box.transportation{background:#892E87!important;color:#fff}.tours,.listing-style3.car .details .tours .box-title{color:#f5deb3;background:#892E87!important}.transportation,.listing-style3.car .details .transportation .box-title{color:#fff551;background:#892E87!important}.left.margin-1{margin-top:-9px;margin-bottom:11px}a.button:hover{background:#A21876!important}a.button{color:#fff;background:#A21876}.left{float:left;margin-left:5px}form#booking_form label{color:#a61877;font-weight:700}.vticker{border:1px solid rgba(225,225,225,0.63);height:600px!important}.vticker ul{padding:0}.vticker li{list-style:none;border-bottom:1px solid #e4e4e4;padding:17px 2px}.et-run{background:red}span.n{border-radius:12px 0;padding:2px;background:rgba(0,0,0,0.68)}span.nationality{color:#fee370}article.detailed-logo.notes{background:#8c1a6f;border-radius:15px;color:#fff}.sliderm{position: absolute;right: 40%;font-size: 1em;top: 20%;border: 1px solid #ad004f;padding: 10px;color: #8a1c6f;}.required input{background:rgba(21,76,199,0.43);color:#000;font-weight:700}a.item.no-side-margin.col-sm-4.center-block.video-testimonial.fancybox-media{border:2px solid #f3ecec;background:#561b61;color:#f1edf0;padding:4px 0;font-size:16px}.chat li .chat-body p{margin:0;color:#000!important}.text-muted{color:#1a49a0;font-size:1em;font-weight:700;font-style:italic}.row.video{border-bottom:13px solid #450546}strong.primary-font{color:#0e0229;text-decoration:underline;text-decoration-style:dotted}.title{width:100%;max-width:854px;margin:0 auto}.caption{width:100%;max-width:854px;margin:0 auto;padding:20px 0}.containerx{width:100%;max-width:854px;min-width:440px;background:#7f0d4b;margin:0 auto}.vid-container{position:relative;padding-bottom:52%;padding-top:30px;height:0}.vid-container iframe,.vid-container object,.vid-container embed{position:absolute;top:0;left:0;width:100%;height:100%}.vid-list-container{width:92%;overflow:hidden;margin-left:4%;padding-bottom:20px}.vid-list{width:1344px;position:relative;top:0;left:0}.vid-item{display:block;width:148px;height:148px;float:right;margin:0;padding:10px;color:#fff}.thumb{overflow:hidden;height:84px}.thumb img{width:100%;position:relative;top:-13px}.vid-item .desc{font-size:15px;margin-top:5px}.vid-item:hover{background:#eee;color:#000;cursor:pointer}.arrows{position:relative;width:100%}.arrow-left{color:#fff;position:absolute;background:#ad7b22;padding:7px;left:-25px;top:-122px;z-index:99;cursor:pointer}.arrow-right{color:#fff;position:absolute;background:#ad7b22;padding:7px;right:-25px;top:-122px;z-index:100;cursor:pointer}.arrow-left:hover{background:#CC181E}.arrow-right:hover{background:#CC181E}@media (max-width: 624px){.caption{margin-top:40px}.vid-list-container{padding-bottom:20px}.arrows{position:relative;margin:0 auto;width:96px}.arrow-left{left:0;top:-17px}.arrow-right{right:0;top:-17px}}.contact-phones{font-size:1em!important;font-weight:700;color:#ad004f}.sgafs{padding:0px !important;}button.dropdown-toggle.collapsed{background: white !important;} .youtube { background-color: #000; margin-bottom: 30px; position: relative; padding-top: 56.25%; overflow: hidden; cursor: pointer; } .youtube img { width: 100%; top: -16.84%; left: 0; opacity: 0.7; } .fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: 400; padding: 3px 11px; line-height: 1; /* border-radius: 7px; */ color: #fff; /* background: #f90000; */ margin: 5px 8px; /* border: 1px solid #f90000; */ -webkit-font-smoothing: antialiased; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{ font-family: 'Noto Kufi Arabic'; } .youtube .play-button { width: 90px; height: 60px; background-color: #333; box-shadow: 0 0 30px rgba( 0,0,0,0.6 ); z-index: 1; opacity: 0.8; border-radius: 6px; } .youtube .play-button:before { content: ""; border-style: solid; border-width: 15px 0 15px 26.0px; border-color: transparent transparent transparent #fff; } .youtube img, .youtube .play-button { cursor: pointer; } .youtube img, .youtube iframe, .youtube .play-button, .youtube .play-button:before { position: absolute; } .youtube .play-button, .youtube .play-button:before { top: 50%; left: 50%; transform: translate3d( -50%, -50%, 0 ); } .youtube iframe { height: 100%; width: 100%; top: 0; left: 0; } .head_orange { border: 1px solid #000; padding: 2pc; background: white; font-size: 1.2em; } .head_orange > ol { list-style: circle; margin-right: 2em; } /* testimonial */ .ion-minus{ padding:0px 10px; } blockquote{ border:none; } blockquote p{ font-size:.81em ; color: white; } #testimonial #carousel{ margin:30px 0px; } #testimonial .left.carousel-control{ display: inline-block; position: absolute; top:100%; left:20%; font-size:3em; font-weight:bolder; color:#fff; } blockquote footer, blockquote small, blockquote .small{ color:#ffc84c; } #testimonial .right.carousel-control{ display: inline-block; position: absolute; top:100%; right:20%; font-size:3em; font-weight:bolder; color:#fff; } #testimonial .fa.fa-quote-right{ color:#5db4c0; font-size:13px; padding-right:10px; } blockquote:after,blockquote:before{ display: none; } .bgtestimonial{ background: #2f0116; border-radius: 12px; padding: 2em; border: 6px solid #212c3a; } /* Homepage refresh: keep the existing data-driven menu, slider, and package markup intact. */ .sakkaf-global-header { position: relative; z-index: 100; padding: 8px 0 24px; background: linear-gradient(135deg, #ffffff 0%, #f7f0fa 100%); } /* Package showcase: optional highlights, overview and video content. */ .sakkaf-package-showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 22px; margin: 34px 0 42px; padding: 24px; border: 1px solid rgba(134, 22, 87, .12); border-radius: 22px; background: #fff; box-shadow: 0 12px 28px rgba(77, 50, 87, .08); direction: ltr; } .sakkaf-showcase-highlights, .sakkaf-showcase-overview { min-width: 0; direction: rtl; } .sakkaf-showcase-highlights { grid-column: 2; } .sakkaf-showcase-overview { grid-column: 1; } .sakkaf-showcase-section-heading { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 18px; color: #c77a12; } .sakkaf-showcase-section-heading h2 { margin: 0; font-size: clamp(20px, 2vw, 27px); line-height: 1.3; font-weight: 800; white-space: nowrap; } .sakkaf-showcase-heading-dash { width: 32px; height: 1px; background: #c77a12; } .sakkaf-showcase-highlight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sakkaf-showcase-highlight-card { display: flex; align-items: flex-start; gap: 12px; min-height: 96px; padding: 15px; border: 1px solid rgba(90, 29, 109, .1); border-radius: 14px; background: linear-gradient(135deg, #fff, #fffaf4); } .sakkaf-showcase-highlight-icon { display: flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #bd7410; background: #fff6e7; font-size: 20px; } .sakkaf-showcase-highlight-card h3 { margin: 2px 0 6px; color: #4b3561; font-size: 17px; line-height: 1.35; font-weight: 800; } .sakkaf-showcase-highlight-card p { margin: 0; color: #65748b; font-size: 13px; line-height: 1.6; } .sakkaf-showcase-overview-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; gap: 18px; direction: ltr; } .sakkaf-showcase-overview-layout.is-text-only { grid-template-columns: minmax(0, 1fr); } .sakkaf-showcase-overview-layout.is-text-only .sakkaf-showcase-overview-copy { grid-column: 1 / -1; } .sakkaf-showcase-overview-copy { min-width: 0; direction: rtl; text-align: right; } .sakkaf-showcase-overview-body { max-height: 146px; overflow: hidden; color: #526580; font-size: 15px; line-height: 1.9; transition: max-height .3s ease; } .sakkaf-showcase-overview-body.is-expanded { max-height: 2000px; } .sakkaf-showcase-overview-body p:first-child { margin-top: 0; } .sakkaf-showcase-overview-body p:last-child { margin-bottom: 0; } .sakkaf-package-read-more { display: block; width: 100%; margin-top: 16px; padding: 10px 18px; border: 1px solid #c77a12; border-radius: 22px; color: #a4610c; background: #fff; font: inherit; font-weight: 700; cursor: pointer; } .sakkaf-package-video-preview { position: relative; min-height: 190px; overflow: hidden; border-radius: 16px; background: linear-gradient(135deg, #7c3f76, #df9b48); direction: rtl; } .sakkaf-package-video-preview img { display: block; width: 100%; height: 100%; min-height: 190px; object-fit: cover; } .sakkaf-package-video-preview::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 14, 34, .05), rgba(24, 14, 34, .65)); content: ''; } .sakkaf-package-video-preview.is-generic::before { position: absolute; top: 50%; left: 50%; color: rgba(255, 255, 255, .25); content: '\f03d'; font-family: FontAwesome; font-size: 74px; transform: translate(-50%, -50%); } .sakkaf-package-video-trigger { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border: 0; border-radius: 50%; color: #fff; background: #bd1680; box-shadow: 0 8px 18px rgba(0, 0, 0, .25); font-size: 22px; cursor: pointer; transform: translate(-50%, -50%); } .sakkaf-package-video-label { position: absolute; z-index: 2; right: 14px; bottom: 12px; color: #fff; font-size: 13px; font-weight: 700; } .sakkaf-package-video-modal { position: fixed; z-index: 10050; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(21, 14, 27, .82); } .sakkaf-package-video-modal.is-open { display: flex; } .sakkaf-package-video-dialog { position: relative; width: min(900px, 100%); aspect-ratio: 16 / 9; border-radius: 16px; background: #000; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); } .sakkaf-package-video-dialog iframe { width: 100%; height: 100%; border: 0; border-radius: inherit; } .sakkaf-package-video-close { position: absolute; z-index: 2; top: -42px; left: 0; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #fff; background: #861657; cursor: pointer; } @media (min-width: 992px) { .sakkaf-package-showcase.sakkaf-device-mobile { display: none !important; } } @media (max-width: 991px) { .sakkaf-package-showcase { display: block; margin: 26px 0 32px; padding: 18px 14px; border-radius: 18px; } .sakkaf-package-showcase.sakkaf-device-desktop { display: none !important; } .sakkaf-showcase-highlights, .sakkaf-showcase-overview { margin-bottom: 26px; } .sakkaf-showcase-overview { margin-bottom: 0; } .sakkaf-showcase-highlight-grid, .sakkaf-showcase-overview-layout { grid-template-columns: 1fr; } .sakkaf-showcase-highlights, .sakkaf-showcase-overview { grid-column: auto; } .sakkaf-package-video-preview { order: 1; } .sakkaf-showcase-overview-copy { order: 2; } } .sakkaf-header-meta { display: flex; align-items: center; justify-content: space-between; min-height: 38px; direction: rtl; } .sakkaf-header-meta .contact-details { margin: 0; color: #351846; font-weight: 700; } .sakkaf-header-meta .contact-phone a { color: #351846; } .sakkaf-header-meta .social-icons { margin: 0; } .sakkaf-header-meta .social-icons li a { color: #6b3288; transition: color .2s ease, transform .2s ease; } .sakkaf-header-meta .social-icons li a:hover, .sakkaf-header-meta .social-icons li a:focus { color: #351846; transform: translateY(-2px); } .sakkaf-brand-row { position: relative; min-height: 92px; } .sakkaf-brand-row .logo { position: absolute; top: -4px; left: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; width: 142px; height: 142px !important; min-height: 142px; padding: 10px; background: #fff; border: 2px solid #6b3288; border-radius: 50%; box-shadow: 0 12px 30px rgba(53, 24, 70, .18); transform: translateX(-50%); } .sakkaf-brand-row .logo img { width: 120px !important; height: auto !important; max-height: 112px; object-fit: contain; } .sakkaf-main-menu { position: relative; z-index: 2; margin-top: -30px; } .sakkaf-main-menu > .container { padding: 12px 28px; background: rgba(255, 255, 255, .9); border: 2px solid #6b3288; border-radius: 22px; box-shadow: 0 10px 26px rgba(53, 24, 70, .12); } .sakkaf-menu-list { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0; } .sakkaf-menu-list > li > a { color: #26202b; font-weight: 700; transition: color .2s ease, background-color .2s ease; } .sakkaf-menu-list > li:hover > a, .sakkaf-menu-list > li:focus-within > a, .sakkaf-menu-list > li.active > a { color: #6b3288; background: #f4eff8; border-radius: 12px; } .sakkaf-home-hero-section { padding: 0 0 28px; background: linear-gradient(180deg, #f7f0fa 0%, #fff 100%); } #slideshow.sakkaf-home-hero { position: relative; max-width: 1120px; padding: 0; overflow: hidden; background: #351846; border-radius: 0 0 18px 18px; box-shadow: 0 18px 40px rgba(53, 24, 70, .2); } #slideshow.sakkaf-home-hero .carousel-inner, #slideshow.sakkaf-home-hero .item { border-radius: inherit; } #slideshow.sakkaf-home-hero .imgSlider { display: block; width: 100%; max-width: none; max-height: 520px; min-height: 360px; object-fit: cover; } #slideshow.sakkaf-home-hero .item::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, rgba(53, 24, 70, .82), rgba(53, 24, 70, .18) 70%, rgba(53, 24, 70, .1)); content: ""; pointer-events: none; } .sakkaf-hero-copy { position: absolute; right: 10%; bottom: 18%; left: 10%; z-index: 2; padding: 18px 24px; text-align: center; text-shadow: none; } .sakkaf-hero-kicker { display: block; margin-bottom: 8px; color: #eadcf0; font-size: 1.05em; font-weight: 700; } .sakkaf-hero-copy h1 { margin: 0 0 8px; color: #fff; font-size: clamp(2.2em, 5vw, 4.6em); font-weight: 800; line-height: 1.1; } .sakkaf-hero-copy p { margin: 0 0 18px; color: #fff; font-size: clamp(1em, 2vw, 1.35em); } .sakkaf-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .sakkaf-hero-button { display: inline-block; min-width: 142px; padding: 11px 20px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 999px; font-weight: 700; line-height: 1.2; transition: background-color .2s ease, color .2s ease, transform .2s ease; } .sakkaf-hero-button:hover, .sakkaf-hero-button:focus { text-decoration: none; transform: translateY(-2px); } .sakkaf-hero-button-primary { color: #fff; background: #6b3288; } .sakkaf-hero-button-primary:hover, .sakkaf-hero-button-primary:focus { color: #fff; background: #351846; } .sakkaf-hero-button-secondary { color: #351846; background: #fff; } .sakkaf-hero-button-secondary:hover, .sakkaf-hero-button-secondary:focus { color: #351846; background: #f4eff8; } #slideshow.sakkaf-home-hero .carousel-control { z-index: 3; width: 8%; opacity: .85; font-size: 56px; line-height: 1; } .sakkaf-hero-indicators { z-index: 3; bottom: 14px; } .sakkaf-home-content { padding-top: 8px; background: #fff; } .sakkaf-package-section { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; padding: 0 20px 28px; } .sakkaf-package-panel { padding: 22px 18px 26px; background: #fff; border: 1px solid #eadcf0; border-radius: 24px; box-shadow: 0 16px 36px rgba(53, 24, 70, .1); } .sakkaf-package-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 20px; padding: 0; } .sakkaf-package-tabs li { float: none; margin: 0; } .sakkaf-package-tabs li a { display: block; padding: 10px 18px; color: #351846; background: #f4eff8; border: 1px solid transparent; border-radius: 999px; font-weight: 700; transition: color .2s ease, background-color .2s ease, border-color .2s ease; } .sakkaf-package-tabs li a:hover, .sakkaf-package-tabs li a:focus, .sakkaf-package-tabs li.active a { color: #fff; background: #6b3288; border-color: #6b3288; text-decoration: none; } .sakkaf-package-tab-content .tab-pane > .destinations { padding: 0; } .sakkaf-package-tab-content .image-box { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0 -8px; } .sakkaf-package-tab-content .image-box > [class*="col-"] { display: flex; margin-bottom: 16px; padding: 0 8px; } .sakkaf-package-card { display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; margin: 0; background: #fff !important; border: 1px solid #eadcf0; border-radius: 18px !important; box-shadow: 0 10px 24px rgba(53, 24, 70, .14) !important; transition: transform .2s ease, box-shadow .2s ease; } .sakkaf-package-card:hover { box-shadow: 0 16px 32px rgba(53, 24, 70, .2) !important; transform: translateY(-4px); } .sakkaf-package-media { flex: 0 0 auto; height: 202px; margin: 0; overflow: hidden; background: #eadcf0; } .sakkaf-package-media img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .35s ease; } .sakkaf-package-card:hover .sakkaf-package-media img { transform: scale(1.04); } .sakkaf-package-details { flex: 1 1 auto; padding: 14px 14px 8px !important; color: #fff; background: linear-gradient(145deg, #6b3288, #351846); } .sakkaf-package-title { min-height: 40px; margin: 0 0 8px; padding: 0 !important; font-size: 1.2em !important; line-height: 1.45; } .sakkaf-package-title a, .sakkaf-package-title a:hover, .sakkaf-package-title a:focus { color: #fff; text-decoration: none; } .sakkaf-package-meta, .sakkaf-package-meta-row .price { color: #fff !important; background: transparent !important; border-color: rgba(255, 255, 255, .22) !important; font-size: .95em; line-height: 1.55; } .sakkaf-package-meta-row { margin: 0; } .sakkaf-package-book { margin: 0; padding: 10px; color: #351846; background: #fff; border-radius: 0 0 18px 18px; font-size: 1em !important; font-weight: 700; text-align: center; } .sakkaf-package-book a, .sakkaf-package-book a:hover, .sakkaf-package-book a:focus { color: #6b3288; text-decoration: none; } .sakkaf-package-more { float: none; width: 100%; margin: 4px 0 0; text-align: center; } .sakkaf-package-more a.button { border-radius: 999px; } @media (max-width: 991px) { .sakkaf-main-menu > .container { padding-right: 16px; padding-left: 16px; } .sakkaf-menu-list { gap: 0; } #slideshow.sakkaf-home-hero { width: calc(100% - 24px); } } /* Keep the mobile home composition independent from legacy desktop breakpoints. */ .sakkaf-package-book-label { display: none; } .sakkaf-package-book-detail { display: inline; } @media (max-width: 991px) { html, body { overflow-x: hidden; } body { color: #28152f; background: #fbf9fd; } #header.sakkaf-site-header { height: 80px; min-height: 80px; background: transparent !important; border: 0; box-shadow: none; } #header.sakkaf-site-header::before { position: absolute; top: 8px; right: 16px; left: 16px; z-index: 0; height: 52px; background: rgba(255, 255, 255, .94); border: 1px solid rgba(232, 224, 238, .9); border-radius: 999px; box-shadow: 0 8px 18px rgba(53, 24, 70, .1); content: ""; } #header.sakkaf-site-header > .sakkaf-global-header { height: 80px; min-height: 80px; background: transparent; } #header.sakkaf-site-header .sakkaf-brand-row { height: 80px; min-height: 80px; pointer-events: none; } #header.sakkaf-site-header .sakkaf-brand-row .logo { top: 9px; width: 50px; height: 50px !important; min-height: 50px; padding: 3px; border: 2px solid #8b477f; box-shadow: 0 4px 10px rgba(53, 24, 70, .18); } #header.sakkaf-site-header .sakkaf-brand-row .logo img { width: 42px !important; max-height: 42px; } #header.sakkaf-site-header .sakkaf-mobile-toggle, #header.sakkaf-site-header .sakkaf-mobile-search { position: absolute; top: 18px; z-index: 4; display: inline-flex !important; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 50%; box-shadow: none; text-indent: 0; } #header.sakkaf-site-header .sakkaf-mobile-toggle { right: auto; bottom: auto; left: 30px; color: #fff; background: #5a1d6d !important; border: 0; } #header.sakkaf-site-header .sakkaf-mobile-search { right: auto; bottom: auto; left: 70px; color: #5a1d6d; background: #fbf3ff !important; border: 0; font-size: 15px; line-height: 32px; } #header.sakkaf-site-header .sakkaf-mobile-toggle:hover, #header.sakkaf-site-header .sakkaf-mobile-toggle:focus, #header.sakkaf-site-header .sakkaf-mobile-search:hover, #header.sakkaf-site-header .sakkaf-mobile-search:focus { color: #fff; box-shadow: 0 0 0 3px rgba(137, 71, 127, .16); transform: none; } #header.sakkaf-site-header .sakkaf-mobile-search:hover, #header.sakkaf-site-header .sakkaf-mobile-search:focus { color: #5a1d6d; } #header.sakkaf-site-header .sakkaf-mobile-search .soap-icon-search { margin: 0; padding: 0; } .sakkaf-hamburger-lines { gap: 3px; width: 14px; } .sakkaf-hamburger-lines span { height: 1px; } #header.sakkaf-site-header .sakkaf-mobile-contact { position: absolute; top: 18px; right: 28px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 138px; height: 32px; overflow: hidden; padding: 0 10px; color: #442052 !important; background: #fbf3ff; border: 1px solid #f0dffa; border-radius: 999px; direction: ltr; font-family: Arial, Tahoma, sans-serif; font-size: 10px; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; } #header.sakkaf-site-header .sakkaf-mobile-contact .soap-icon-phone { flex: 0 0 auto; color: #5a1d6d; font-size: 12px; } #header.sakkaf-site-header .sakkaf-mobile-contact:hover, #header.sakkaf-site-header .sakkaf-mobile-contact:focus { color: #5a1d6d !important; text-decoration: none; } .sakkaf-home-hero-section { padding: 30px 0 20px !important; background: #fbf9fd; } #slideshow.sakkaf-home-hero { width: calc(100% - 32px); max-width: none; height: 360px; margin: 0 auto; border-radius: 22px; box-shadow: 0 12px 24px rgba(53, 24, 70, .18); } #slideshow.sakkaf-home-hero #this-carousel-id, #slideshow.sakkaf-home-hero .carousel-inner, #slideshow.sakkaf-home-hero .item, #slideshow.sakkaf-home-hero .imgSlider { height: 360px !important; min-height: 0; max-height: none; } #slideshow.sakkaf-home-hero .imgSlider { width: 100%; object-fit: cover; } #slideshow.sakkaf-home-hero .item::after { background: linear-gradient(180deg, rgba(35, 12, 52, .48), rgba(47, 9, 62, .82)); } .sakkaf-hero-mobile-topbar { position: absolute; top: 20px; right: 20px; left: 20px; z-index: 3; display: flex; align-items: center; justify-content: space-between; direction: rtl; } .sakkaf-hero-mobile-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 5px 10px; color: #f4d579; background: rgba(24, 19, 31, .72); border: 1px solid rgba(244, 213, 121, .45); border-radius: 999px; font-family: Tahoma, Arial, sans-serif; font-size: 11px; font-weight: 800; white-space: nowrap; } .sakkaf-hero-mobile-dot { width: 6px; height: 6px; background: #44c88b; border-radius: 50%; box-shadow: 0 0 0 3px rgba(68, 200, 139, .13); } .sakkaf-hero-mobile-socials { display: inline-flex; align-items: center; gap: 6px; direction: ltr; } .sakkaf-hero-mobile-socials i { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; color: #fff; background: rgba(28, 23, 34, .72); border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; font-size: 13px; } #slideshow.sakkaf-home-hero .sakkaf-hero-copy { top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px 20px 18px; text-align: center; } #slideshow.sakkaf-home-hero .sakkaf-hero-copy h1, #slideshow.sakkaf-home-hero .sakkaf-hero-copy h2 { margin: 0; font-family: Arial, Tahoma, sans-serif; font-weight: 800; line-height: 1.12; letter-spacing: .01em; } #slideshow.sakkaf-home-hero .sakkaf-hero-copy h1 { color: #fff; font-size: 30px; text-shadow: 0 3px 8px rgba(0, 0, 0, .35); } #slideshow.sakkaf-home-hero .sakkaf-hero-copy h2 { margin-top: 6px; margin-bottom: 14px; color: #c958bb; background: none; font-size: 24px; -webkit-text-fill-color: currentColor; text-shadow: 0 3px 8px rgba(0, 0, 0, .3); } #slideshow.sakkaf-home-hero .sakkaf-hero-copy > p { display: none; } .sakkaf-hero-mobile-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 17px; color: #fff !important; background: rgba(17, 9, 24, .68); border: 1px solid rgba(255, 255, 255, .35); border-radius: 12px; font-family: Tahoma, Arial, sans-serif; font-size: 15px; font-weight: 800; line-height: 1.2; text-decoration: none !important; } .sakkaf-hero-mobile-cta:hover, .sakkaf-hero-mobile-cta:focus { color: #fff !important; background: rgba(90, 29, 109, .86); } #slideshow.sakkaf-home-hero .sakkaf-hero-actions { display: none; } #slideshow.sakkaf-home-hero .carousel-control { top: auto; bottom: 21px; width: 32px; height: 32px; margin: 0; color: #fff; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .34); border-radius: 50%; font-size: 29px; line-height: 27px; opacity: 1; text-shadow: none; } #slideshow.sakkaf-home-hero .carousel-control.left { right: auto !important; left: 20px; } #slideshow.sakkaf-home-hero .carousel-control.right { right: 20px; left: auto !important; } #slideshow.sakkaf-home-hero .sakkaf-hero-indicators { right: 50%; bottom: 31px; left: auto; display: flex; align-items: center; justify-content: center; width: auto; margin: 0; padding: 0; transform: translateX(50%); } #slideshow.sakkaf-home-hero .sakkaf-hero-indicators li { width: 6px; height: 6px; margin: 0 3px; background: rgba(255, 255, 255, .5); border: 0; border-radius: 999px; } #slideshow.sakkaf-home-hero .sakkaf-hero-indicators li.active { width: 23px; height: 6px; background: #fff; } section#content.sakkaf-home-content { padding: 0 !important; background: #fbf9fd; } .sakkaf-package-section { width: 100%; max-width: none; margin: 0; padding: 0 16px 30px; } .sakkaf-package-panel { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .sakkaf-package-panel > .sakkaf-package-tabs { display: none !important; } .sakkaf-package-panel > .visible-mobile { display: block !important; margin: 0; overflow: visible; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs { position: relative; top: auto; right: auto; bottom: auto; left: auto; display: flex !important; justify-content: flex-start; gap: 8px; width: 100%; min-height: 38px; margin: 0; padding: 0 0 2px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; direction: rtl; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs::-webkit-scrollbar { display: none; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs > li { display: block !important; position: static; flex: 0 0 auto; float: none; margin: 0; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs > li > a { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 15px; color: #46384d; background: #fff; border: 1px solid #ebe2ee; border-radius: 999px; box-shadow: none; font-family: Tahoma, Arial, sans-serif; font-size: 13px !important; font-weight: 800; line-height: 1.2; white-space: nowrap; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs > li.active > a { color: #fff; background: #5a1d6d; border-color: #5a1d6d; box-shadow: 0 5px 12px rgba(90, 29, 109, .18); } .sakkaf-package-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 34px 0 14px; direction: rtl; } .sakkaf-package-heading-copy { min-width: 0; } .sakkaf-package-heading h2 { margin: 0; color: #32113d; font-family: Tahoma, Arial, sans-serif; font-size: 22px; font-weight: 900; line-height: 1.3; } .sakkaf-package-heading p { margin: 3px 0 0; color: #817488; font-family: Tahoma, Arial, sans-serif; font-size: 11px; line-height: 1.5; } .sakkaf-package-heading-link { flex: 0 0 auto; padding-bottom: 5px; color: #7a1c68 !important; font-family: Tahoma, Arial, sans-serif; font-size: 12px; font-weight: 800; line-height: 1.2; text-decoration: none !important; white-space: nowrap; } .sakkaf-package-heading-link span { display: inline-block; margin-right: 2px; font-size: 19px; line-height: 10px; vertical-align: -2px; } .sakkaf-package-tab-content { padding: 0 !important; } .sakkaf-package-tab-content .tab-pane > .destinations, .sakkaf-package-tab-content .destinations > .container { width: 100%; margin: 0; padding: 0; } .sakkaf-package-tab-content .destinations .row.image-box { display: flex; flex-direction: column; gap: 16px; margin: 0; } .sakkaf-package-tab-content .image-box > [class*="col-"] { float: none; width: 100% !important; margin: 0; padding: 0; } .sakkaf-package-card { display: block; width: 100%; height: 286px; min-height: 286px; overflow: hidden; background: #32113d !important; border: 0; border-radius: 22px !important; box-shadow: 0 10px 20px rgba(53, 24, 70, .16) !important; } .sakkaf-package-card:hover { transform: none; } .sakkaf-package-media { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 0; display: block; width: 100%; height: 100% !important; margin: 0; border-radius: inherit; } .sakkaf-package-media a, .sakkaf-package-media img { width: 100%; height: 100% !important; } .sakkaf-package-media img { object-fit: cover; } .sakkaf-package-details { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; padding: 20px 16px 62px !important; color: #fff !important; background: linear-gradient(180deg, rgba(47, 13, 61, .08) 25%, rgba(52, 8, 67, .9) 100%) !important; text-align: center; } .sakkaf-package-title { display: block; min-height: 0; margin: 0 0 4px; padding: 0 !important; color: #fff !important; font-family: Tahoma, Arial, sans-serif; font-size: 21px !important; font-weight: 900; line-height: 1.35; text-align: center; text-shadow: 0 2px 5px rgba(0, 0, 0, .35); } .sakkaf-package-title a, .sakkaf-package-title a:hover, .sakkaf-package-title a:focus { color: #fff !important; } .sakkaf-package-meta { display: block; max-height: 28px; margin: 0; overflow: hidden; padding: 0 !important; color: rgba(255, 255, 255, .86) !important; background: transparent !important; border: 0 !important; font-family: Tahoma, Arial, sans-serif; font-size: 11px; line-height: 1.5; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .sakkaf-package-meta i { color: #f4d579; } .sakkaf-package-meta-row { display: none !important; } .sakkaf-package-book { right: auto; bottom: 14px; left: 50%; z-index: 2; width: auto; margin: 0; padding: 0; transform: translateX(-50%); } .sakkaf-package-book a, .sakkaf-package-book a:hover, .sakkaf-package-book a:focus { display: inline-flex; align-items: center; justify-content: center; min-width: 102px; min-height: 36px; padding: 8px 18px; color: #32113d !important; background: #fff; border-radius: 999px; box-shadow: 0 4px 10px rgba(20, 8, 30, .16); font-family: Tahoma, Arial, sans-serif; font-size: 13px; font-weight: 900; line-height: 1.2; white-space: nowrap; } .sakkaf-package-book a::after { display: none; } .sakkaf-package-book-label { display: inline; } .sakkaf-package-book-detail { display: none; } .sakkaf-package-more { margin: 2px 0 0; } .sakkaf-package-more a.button { min-height: 34px; padding: 7px 16px; border-radius: 999px; font-size: 12px; } #mobile-menu-01.sakkaf-mobile-menu .sakkaf-mobile-menu-close { right: 0; left: auto; } } @media (max-width: 767px) { .sakkaf-global-header { padding-bottom: 14px; } .sakkaf-header-meta { flex-direction: column; gap: 6px; padding-top: 4px; } .sakkaf-brand-row { min-height: 74px; } .sakkaf-brand-row .logo { top: 0; width: 104px; height: 104px !important; min-height: 104px; } .sakkaf-brand-row .logo img { width: 88px !important; } .sakkaf-main-menu { margin-top: -18px; } .sakkaf-main-menu > .container { border-radius: 16px; } .sakkaf-menu-list { display: block; } .sakkaf-home-hero-section { padding-bottom: 18px; } #slideshow.sakkaf-home-hero { width: calc(100% - 20px); border-radius: 0 0 14px 14px; } #slideshow.sakkaf-home-hero .imgSlider { min-height: 430px; } .sakkaf-hero-copy { right: 8%; bottom: 12%; left: 8%; padding: 12px; } .sakkaf-hero-copy h1 { font-size: 2.25em; } .sakkaf-hero-copy p { font-size: 1em; } .sakkaf-hero-actions { gap: 6px; } .sakkaf-hero-button { min-width: 126px; padding: 9px 12px; font-size: .9em; } #slideshow.sakkaf-home-hero .carousel-control { width: 12%; font-size: 42px; } .sakkaf-package-section { padding-right: 10px; padding-left: 10px; } .sakkaf-package-panel { padding: 16px 10px 20px; border-radius: 18px; } .sakkaf-package-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs { display: flex !important; height: auto; min-height: 42px; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs > li { display: block !important; position: static; flex: 0 0 auto; } .sakkaf-package-tabs li { flex: 0 0 auto; } .sakkaf-package-tabs li a { padding: 9px 14px; white-space: nowrap; } .sakkaf-package-tab-content .image-box > [class*="col-"] { width: 100%; } .sakkaf-package-media { height: 220px; } } /* Stitch reference alignment: fluid desktop canvas, floating navigation, 720px desktop hero, and 320px cards. */ @media (min-width: 992px) { #header.sakkaf-site-header { padding-top: 16px; background: transparent; } #header.sakkaf-site-header .sakkaf-global-header { height: 66px; min-height: 66px; padding: 0; background: transparent; } #header.sakkaf-site-header .sakkaf-header-meta { width: 100%; max-width: none; height: 24px; min-height: 24px; margin: 0 auto; padding: 0 16px; align-items: center; } #header.sakkaf-site-header .sakkaf-header-meta .contact-details { line-height: 1.2 !important; } #header.sakkaf-site-header .sakkaf-header-meta .social-icons li a { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: #6a2b86; } #header.sakkaf-site-header .sakkaf-brand-row { position: absolute; top: 32px; left: 0; width: 100%; max-width: none; height: 0; min-height: 0; padding: 0; } #header.sakkaf-site-header .sakkaf-brand-row .logo { top: -24px; width: 112px; height: 112px !important; min-height: 112px; padding: 8px; margin-right: 0 !important; right: auto !important; border: 4px solid #f3eef6; box-shadow: 0 8px 20px rgba(53, 24, 70, .14); } #header.sakkaf-site-header .sakkaf-brand-row .logo img { width: 84px !important; max-height: 84px; } #header.sakkaf-site-header .sakkaf-main-menu { position: absolute; top: 32px; right: 0; left: 0; height: 64px; margin: 0; } #header.sakkaf-site-header .sakkaf-main-menu > .container { display: flex; align-items: center; width: calc(100% - 64px); max-width: none; height: 64px; margin: 0 auto; padding: 0 48px; background: linear-gradient(to bottom, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)); border: 1px solid rgba(106, 43, 134, .2); border-radius: 999px; box-shadow: 0 4px 6px rgba(0, 0, 0, .05); backdrop-filter: blur(10px); } #header.sakkaf-site-header .sakkaf-menu-list { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 !important; gap: 0; } #header.sakkaf-site-header .sakkaf-menu-list > li { flex: 0 1 auto; margin: 0 !important; padding: 0 !important; white-space: nowrap; } #header.sakkaf-site-header .sakkaf-menu-logo-gap { flex: 0 0 112px; width: 112px; height: 64px; pointer-events: none; visibility: hidden; } #header.sakkaf-site-header .sakkaf-menu-list > li > a { display: block; padding: 0; color: #354052; font-size: 15px; font-weight: 700; line-height: 64px; } #header.sakkaf-site-header .sakkaf-menu-list > li:hover > a, #header.sakkaf-site-header .sakkaf-menu-list > li:focus-within > a, #header.sakkaf-site-header .sakkaf-menu-list > li.active > a { color: #6a2b86; background: transparent; } .sakkaf-home-hero-section { margin-top: -20px; padding-bottom: 48px; background: #f8f8fb; } #slideshow.sakkaf-home-hero { width: calc(100% - 32px); max-width: none; height: 720px; margin: 0 auto; border-radius: 24px; box-shadow: 0 18px 34px rgba(22, 35, 52, .18); } #slideshow.sakkaf-home-hero #this-carousel-id, #slideshow.sakkaf-home-hero .carousel-inner, #slideshow.sakkaf-home-hero .item { height: 100%; } #slideshow.sakkaf-home-hero .imgSlider { width: 100%; height: 720px !important; min-height: 0; max-height: none; object-fit: cover; } #slideshow.sakkaf-home-hero .item::after { background: rgba(0, 0, 0, .3); } #slideshow.sakkaf-home-hero .sakkaf-hero-copy { top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 20px; text-align: center; } #slideshow.sakkaf-home-hero .sakkaf-hero-copy h1, #slideshow.sakkaf-home-hero .sakkaf-hero-copy h2 { margin: 0; font-family: Arial, sans-serif; font-size: 60px; font-weight: 800; line-height: 1.12; letter-spacing: .01em; } #slideshow.sakkaf-home-hero .sakkaf-hero-copy h1 { color: #fff; text-shadow: 2px 2px 4px rgba(0, 0, 0, .5); } #slideshow.sakkaf-home-hero .sakkaf-hero-copy h2 { margin-bottom: 18px; background: linear-gradient(to right, #6a2b86, #9b59b6); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 2px 2px 4px rgba(0, 0, 0, .3); } #slideshow.sakkaf-home-hero .sakkaf-hero-copy p { margin: 0 0 20px; color: #fff; font-size: 24px; font-weight: 700; line-height: 1.35; text-shadow: 1px 1px 3px rgba(0, 0, 0, .5); } #slideshow.sakkaf-home-hero .carousel-control { top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .2); font-size: 38px; line-height: 34px; opacity: 1; } #slideshow.sakkaf-home-hero .carousel-control.left { left: 24px; right: auto !important; } #slideshow.sakkaf-home-hero .carousel-control.right { right: 24px; left: auto !important; } #slideshow.sakkaf-home-hero .sakkaf-hero-indicators { bottom: 20px; } section#content.sakkaf-home-content { padding-top: 0 !important; padding: 0; background: #f8f8fb; } .sakkaf-package-section { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px 32px; } .sakkaf-package-panel { position: relative; margin: 0; padding: 32px 0; background: rgba(255, 255, 255, .62); border: 0; border-radius: 40px; box-shadow: none; } .sakkaf-package-panel > .sakkaf-package-tabs { position: absolute; top: 2px; right: 16px; left: 16px; margin: 0; } .sakkaf-package-panel > .sakkaf-package-tabs li a { padding: 4px 12px; font-size: 12px; line-height: 20px; } .sakkaf-package-tab-content { padding: 0; } .sakkaf-package-tab-content .tab-pane > .destinations { padding: 0; } .sakkaf-package-tab-content .destinations > .container { width: 100%; margin: 0; padding: 0; } .sakkaf-package-tab-content .image-box { display: flex; flex-wrap: wrap; margin: 0 -12px; } .sakkaf-package-tab-content .image-box > [class*="col-"] { display: flex; width: 25%; margin-bottom: 24px; padding: 0 12px; } .sakkaf-package-card { position: relative; display: block; width: 100%; height: 320px; min-height: 320px; border: 0; border-radius: 16px !important; box-shadow: 0 10px 22px rgba(22, 35, 52, .16) !important; } .sakkaf-package-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; } .sakkaf-package-media a, .sakkaf-package-media img { display: block; width: 100%; height: 100% !important; } .sakkaf-package-details { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 16px 68px !important; color: #fff; background: linear-gradient(to top, rgba(106, 43, 134, .95) 0%, rgba(106, 43, 134, .7) 60%, rgba(0, 0, 0, 0) 100%); } .sakkaf-package-title { min-height: 0; margin: 0 0 8px; font-size: 18px !important; line-height: 1.45; text-align: center; } .sakkaf-package-meta, .sakkaf-package-meta-row .price { font-size: 12px; line-height: 1.5; text-align: center; } .sakkaf-package-book { position: absolute; right: 0; bottom: 22px; left: 0; z-index: 2; margin: 0; padding: 0; background: transparent; border-radius: 0; text-align: center; } .sakkaf-package-book a { display: inline-block; padding: 8px 24px; color: #6a2b86; background: #fff; border-radius: 999px; box-shadow: 0 4px 10px rgba(0, 0, 0, .12); } } @media (min-width: 992px) and (max-width: 1199px) { #header.sakkaf-site-header .sakkaf-main-menu > .container { padding-right: 0; padding-left: 0; } #header.sakkaf-site-header .sakkaf-menu-list { gap: 0; } #header.sakkaf-site-header .sakkaf-menu-list > li > a { font-size: 12px; letter-spacing: -0.08px; } #header.sakkaf-site-header .sakkaf-menu-logo-gap { flex-basis: 112px; width: 112px; } } @media (max-width: 991px) { #slideshow.sakkaf-home-hero .carousel-control.left { left: 12px; right: auto !important; } #slideshow.sakkaf-home-hero .carousel-control.right { right: 12px; left: auto !important; } .sakkaf-package-panel { padding: 16px 10px 20px; } .sakkaf-package-panel > .sakkaf-package-tabs { position: static; margin-bottom: 20px; } .sakkaf-package-tab-content .destinations > .container { width: 100%; } .sakkaf-package-tab-content .image-box > [class*="col-"] { width: 50%; } .sakkaf-package-card { position: relative; display: block; height: 320px; min-height: 320px; } .sakkaf-package-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .sakkaf-package-details { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 16px 68px !important; background: linear-gradient(to top, rgba(106, 43, 134, .95) 0%, rgba(106, 43, 134, .7) 60%, rgba(0, 0, 0, 0) 100%); } .sakkaf-package-book { position: absolute; right: 0; bottom: 22px; left: 0; z-index: 2; margin: 0; padding: 0; background: transparent; text-align: center; } .sakkaf-package-book a { display: inline-block; padding: 8px 24px; color: #6a2b86; background: #fff; border-radius: 999px; } } @media (max-width: 767px) { #slideshow.sakkaf-home-hero { height: 430px; } #slideshow.sakkaf-home-hero .imgSlider { height: 430px !important; } #slideshow.sakkaf-home-hero .sakkaf-hero-copy h1, #slideshow.sakkaf-home-hero .sakkaf-hero-copy h2 { font-size: 36px; } #slideshow.sakkaf-home-hero .sakkaf-hero-copy p { font-size: 18px; } #slideshow.sakkaf-home-hero .sakkaf-hero-actions { max-width: 280px; } .sakkaf-package-tab-content .image-box > [class*="col-"] { width: 100%; } } /* Liquid-glass dropdowns: preserve every existing menu item and destination link. */ @media (min-width: 992px) { #header.sakkaf-site-header .sakkaf-main-menu { z-index: 20; } #header.sakkaf-site-header .sakkaf-brand-row { z-index: 60; pointer-events: none; } #header.sakkaf-site-header .sakkaf-brand-row .logo { position: absolute; z-index: 61; pointer-events: auto; } #header.sakkaf-site-header .sakkaf-menu-list > li.menu-item-has-children > ul, #header.sakkaf-site-header .sakkaf-menu-list > li.megamenu-menu > .megamenu-wrapper { top: calc(100% + 12px) !important; right: 50% !important; left: auto !important; z-index: 40 !important; display: block; visibility: hidden; width: min(292px, calc(100vw - 48px)); max-width: calc(100vw - 48px); padding: 10px !important; overflow: hidden; opacity: 0; border: 1px solid rgba(255, 255, 255, .78) !important; border-radius: 22px !important; background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(246, 237, 252, .58)) !important; box-shadow: 0 20px 46px rgba(53, 24, 70, .22), inset 0 1px 0 rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(20px) saturate(145%); backdrop-filter: blur(20px) saturate(145%); transform: translate(50%, 8px); transition: opacity .22s ease, transform .22s ease, visibility .22s ease; } #header.sakkaf-site-header .sakkaf-menu-list > li.menu-item-has-children:hover > ul, #header.sakkaf-site-header .sakkaf-menu-list > li.menu-item-has-children:focus-within > ul, #header.sakkaf-site-header .sakkaf-menu-list > li.megamenu-menu:hover > .megamenu-wrapper, #header.sakkaf-site-header .sakkaf-menu-list > li.megamenu-menu:focus-within > .megamenu-wrapper { top: calc(100% + 12px) !important; visibility: visible; opacity: 1; transform: translate(50%, 0); } #header.sakkaf-site-header .sakkaf-menu-list-right > li:first-child > ul { right: 0 !important; transform: translateY(8px); } #header.sakkaf-site-header .sakkaf-menu-list-right > li:first-child:hover > ul, #header.sakkaf-site-header .sakkaf-menu-list-right > li:first-child:focus-within > ul { transform: translateY(0); } #header.sakkaf-site-header .sakkaf-menu-list-left > li:last-child > ul { right: auto !important; left: 0 !important; transform: translateY(8px); } #header.sakkaf-site-header .sakkaf-menu-list-left > li:last-child:hover > ul, #header.sakkaf-site-header .sakkaf-menu-list-left > li:last-child:focus-within > ul { transform: translateY(0); } #header.sakkaf-site-header .sakkaf-menu-list > li.menu-item-has-children > ul::before, #header.sakkaf-site-header .sakkaf-menu-list > li.megamenu-menu > .megamenu-wrapper::before { position: absolute; top: 0; right: 18px; left: 18px; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(122, 28, 104, .55), transparent); } #header.sakkaf-site-header .sakkaf-menu-list > li.menu-item-has-children > ul > li { margin: 2px 0; border-bottom: 1px solid rgba(122, 28, 104, .12); } #header.sakkaf-site-header .sakkaf-menu-list > li.menu-item-has-children > ul > li:last-child { border-bottom: 0; } #header.sakkaf-site-header .sakkaf-menu-list > li.menu-item-has-children > ul > li > a { display: block; padding: 11px 13px; color: #4b2a5f; border: 1px solid transparent; border-radius: 14px; background: rgba(255, 255, 255, .18); font-size: 13px; font-weight: 700; line-height: 1.55; text-align: right; white-space: normal; transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; } #header.sakkaf-site-header .sakkaf-menu-list > li.menu-item-has-children > ul > li > a:hover, #header.sakkaf-site-header .sakkaf-menu-list > li.menu-item-has-children > ul > li > a:focus { color: #fff; border-color: rgba(255, 255, 255, .44); background: linear-gradient(135deg, rgba(122, 28, 104, .88), rgba(106, 43, 134, .76)); transform: translateX(-2px); } #header.sakkaf-site-header .sakkaf-menu-list > li.megamenu-menu > .megamenu-wrapper { width: min(920px, calc(100vw - 64px)); padding: 16px !important; } #header.sakkaf-site-header .sakkaf-menu-list > li.megamenu-menu > .megamenu-wrapper .megamenu-holder, #header.sakkaf-site-header .sakkaf-menu-list > li.megamenu-menu > .megamenu-wrapper .megamenu, #header.sakkaf-site-header .sakkaf-menu-list > li.megamenu-menu > .megamenu-wrapper .megamenu ul { background: transparent !important; } #header.sakkaf-site-header .sakkaf-menu-list > li.megamenu-menu > .megamenu-wrapper .megamenu > li > a, #header.sakkaf-site-header .sakkaf-menu-list > li.megamenu-menu > .megamenu-wrapper .megamenu ul > li > a { color: #4b2a5f; border-radius: 14px; } } @media (max-width: 991px) { #header.sakkaf-site-header .sakkaf-mobile-menu ul ul { background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(246, 237, 252, .86)); border: 1px solid rgba(122, 28, 104, .16); border-radius: 16px; box-shadow: 0 12px 28px rgba(53, 24, 70, .14); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); } #header.sakkaf-site-header .sakkaf-mobile-menu ul ul a { color: #4b2a5f; font-family: Tahoma, Arial, sans-serif; font-weight: 800; } } /* Dropdown readability: a clearer glass surface and stronger Arabic typography. */ @media (min-width: 992px) { #header.sakkaf-site-header .sakkaf-menu-list > li.menu-item-has-children > ul, #header.sakkaf-site-header .sakkaf-menu-list > li.megamenu-menu > .megamenu-wrapper { background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(246, 237, 252, .86)) !important; } #header.sakkaf-site-header .sakkaf-menu-list > li.menu-item-has-children > ul > li > a, #header.sakkaf-site-header .sakkaf-menu-list > li.megamenu-menu > .megamenu-wrapper .megamenu > li > a, #header.sakkaf-site-header .sakkaf-menu-list > li.megamenu-menu > .megamenu-wrapper .megamenu ul > li > a { color: #3f2255; font-family: Tahoma, Arial, sans-serif; font-size: 14px; font-weight: 800 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); } #header.sakkaf-site-header .sakkaf-menu-list > li.menu-item-has-children > ul > li > a { background: rgba(255, 255, 255, .38); } } @media (max-width: 991px) { #header.sakkaf-site-header .sakkaf-mobile-menu ul ul { background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(246, 237, 252, .9)); } } /* Carousel progress: compact dots with a pill-shaped active slide marker. */ #slideshow.sakkaf-home-hero .sakkaf-hero-indicators { right: auto !important; bottom: 20px !important; left: 50% !important; display: flex !important; align-items: center; justify-content: center; width: auto !important; height: 14px; margin: 0 !important; padding: 0 !important; gap: 7px; direction: rtl; transform: translateX(-50%); } #slideshow.sakkaf-home-hero .sakkaf-hero-indicators li { flex: 0 0 8px; width: 8px !important; height: 8px !important; margin: 0 !important; padding: 0; border: 0 !important; border-radius: 999px; background: rgba(255, 255, 255, .62); box-shadow: 0 1px 4px rgba(0, 0, 0, .24); cursor: pointer; opacity: 1; transition: width .2s ease, flex-basis .2s ease, height .2s ease, background-color .2s ease; } #slideshow.sakkaf-home-hero .sakkaf-hero-indicators li.active { flex-basis: 38px; width: 38px !important; height: 6px !important; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .34); } @media (max-width: 767px) { #slideshow.sakkaf-home-hero .sakkaf-hero-indicators { bottom: 16px !important; gap: 6px; } #slideshow.sakkaf-home-hero .sakkaf-hero-indicators li.active { flex-basis: 30px; width: 30px !important; } } /* Keep the redesigned header visible; fixed positioning avoids the legacy wrapper's short sticky boundary. */ #header.sakkaf-site-header { position: fixed; right: 0; left: 0; top: 0; width: 100%; z-index: 1000; background: rgba(248, 248, 251, .86) !important; -webkit-backdrop-filter: blur(14px) saturate(125%); backdrop-filter: blur(14px) saturate(125%); } #page-wrapper { min-height: 82px; } #header.sakkaf-site-header > .sakkaf-global-header { position: relative; z-index: 1; } @media (max-width: 991px) { #header.sakkaf-site-header { background: rgba(248, 248, 251, .96) !important; } #page-wrapper { min-height: 253px; } } @media (max-width: 767px) { #page-wrapper { min-height: 264px; } } /* On scroll, keep only the rounded navigation and centered logo pinned to the viewport. */ body.sakkaf-nav-scrolled #header.sakkaf-site-header { height: 64px; min-height: 64px; padding-top: 0; top: 24px; background: transparent !important; } body.sakkaf-nav-scrolled #header.sakkaf-site-header .sakkaf-global-header { height: 64px; min-height: 64px; padding: 0; background: transparent; } body.sakkaf-nav-scrolled #header.sakkaf-site-header .sakkaf-header-meta { height: 0; min-height: 0; padding: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; } body.sakkaf-nav-scrolled #header.sakkaf-site-header .sakkaf-brand-row { top: 0; } body.sakkaf-nav-scrolled #header.sakkaf-site-header .sakkaf-main-menu { top: 0; } @media (max-width: 991px) { body.sakkaf-nav-scrolled #header.sakkaf-site-header { top: 18px; } body.sakkaf-nav-scrolled #header.sakkaf-site-header, body.sakkaf-nav-scrolled #header.sakkaf-site-header .sakkaf-global-header { height: 104px; min-height: 104px; } body.sakkaf-nav-scrolled #header.sakkaf-site-header .sakkaf-brand-row { height: 104px; min-height: 104px; padding: 0; } } /* Package cards: a light editorial layout while preserving the dashboard content. */ .sakkaf-package-card { position: relative; display: flex; flex-direction: column; height: 540px; min-height: 540px; overflow: hidden; background: #fff !important; border: 1px solid #eadfd4; border-radius: 22px !important; box-shadow: 0 12px 28px rgba(53, 24, 70, .13) !important; } .sakkaf-package-card:hover { box-shadow: 0 18px 36px rgba(53, 24, 70, .2) !important; transform: translateY(-4px); } .sakkaf-package-media { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; flex: 0 0 230px; height: 230px !important; margin: 0; overflow: hidden; background: #f2eaf4; border-radius: 21px 21px 0 0; } .sakkaf-package-media a, .sakkaf-package-media img { display: block; width: 100%; height: 100% !important; } .sakkaf-package-media img { object-fit: cover; } .sakkaf-package-details { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; z-index: 1; display: flex; flex: 1 1 auto; flex-direction: column; justify-content: flex-start; min-height: 0; padding: 12px 14px 76px !important; color: #3d294b !important; background: #fff !important; } .sakkaf-package-title { display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 0 0 4px; padding: 0 !important; color: #2d173d !important; font-size: 19px !important; font-weight: 800; line-height: 1.35; text-align: center; } .sakkaf-package-title a, .sakkaf-package-title a:hover, .sakkaf-package-title a:focus { color: #2d173d !important; text-decoration: none; } .sakkaf-package-meta, .sakkaf-package-meta-row { display: block; margin: 0; padding: 9px 4px; color: #5c4967 !important; background: #fff !important; border-top: 1px solid #eee5dc; font-size: 12px; font-weight: 600; line-height: 1.45; text-align: center; } .sakkaf-package-meta i, .sakkaf-package-meta-row i { color: #c28a36; } .sakkaf-package-details > .sakkaf-package-meta-row:first-of-type { padding-top: 10px; padding-bottom: 10px; } .sakkaf-package-details > .sakkaf-package-meta-row:first-of-type span[itemprop="price"] { color: #791c68 !important; font-size: 15px; font-weight: 800; } .sakkaf-package-details > .sakkaf-package-meta-row:last-of-type { border-bottom: 1px solid #eee5dc; } .sakkaf-package-book { position: absolute; right: 14px; bottom: 14px; left: 14px; z-index: 2; margin: 0; padding: 0; color: #fff; background: transparent; border-radius: 0; font-size: 14px !important; font-weight: 800; text-align: center; } .sakkaf-package-book a, .sakkaf-package-book a:hover, .sakkaf-package-book a:focus { display: block; padding: 12px 18px; color: #fff !important; background: linear-gradient(135deg, #74145f, #a31578); border-radius: 999px; box-shadow: 0 6px 14px rgba(122, 28, 104, .2); text-decoration: none; } .sakkaf-package-book a::after { margin-right: 10px; color: #f4c86b; content: "←"; font-size: 19px; line-height: 0; vertical-align: -2px; } @media (max-width: 991px) { .sakkaf-package-card { height: 540px; min-height: 540px; } .sakkaf-package-media { flex-basis: 220px; height: 220px !important; } } @media (max-width: 767px) { .sakkaf-package-card { height: 560px; min-height: 560px; } .sakkaf-package-media { flex-basis: 230px; height: 230px !important; } } /* Contact strip: compact glass grouping at the page edge, matching the header identity. */ #header.sakkaf-site-header .sakkaf-header-meta { display: flex; align-items: center; justify-content: flex-start; position: relative; z-index: 70; width: fit-content !important; max-width: calc(100% - 48px); height: 32px !important; min-height: 32px; margin-right: auto !important; margin-left: 24px !important; padding: 0 !important; gap: 10px; direction: ltr; background: transparent; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } #header.sakkaf-site-header .sakkaf-header-meta .contact-details { flex: 0 0 auto; margin: 0; } #header.sakkaf-site-header .sakkaf-header-meta .contact-phone a { display: inline-flex; align-items: center; gap: 5px; color: #283551 !important; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; } #header.sakkaf-site-header .sakkaf-header-meta .contact-phone .soap-icon-phone.circle { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: #fff; background: #6a2b86; border-radius: 50%; font-size: 13px; } #header.sakkaf-site-header .sakkaf-header-meta .contact-phone img { width: 58px !important; height: auto !important; max-width: none; object-fit: contain; } #header.sakkaf-site-header .sakkaf-header-meta .social-icons { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; margin: 0; padding: 0; direction: ltr; } #header.sakkaf-site-header .sakkaf-header-meta .social-icons li { float: none; margin: 0; padding: 0; } #header.sakkaf-site-header .sakkaf-header-meta .social-icons li a { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: #fff !important; background: #6a2b86; border-radius: 50%; font-size: 13px; } #header.sakkaf-site-header .sakkaf-header-meta .social-icons li a i { color: #fff !important; } #header.sakkaf-site-header .sakkaf-header-meta .social-icons li a:hover, #header.sakkaf-site-header .sakkaf-header-meta .social-icons li a:focus { color: #fff; background: #351846; } body.sakkaf-nav-scrolled #header.sakkaf-site-header .sakkaf-header-meta { width: 0 !important; max-width: 0; min-height: 0; margin: 0 !important; padding: 0 !important; border: 0; } @media (max-width: 767px) { #header.sakkaf-site-header .sakkaf-header-meta { width: calc(100% - 20px) !important; max-width: calc(100% - 20px); height: 34px !important; min-height: 34px; margin: 6px auto 0 !important; padding: 0 6px !important; gap: 5px; flex-direction: row; flex-wrap: wrap; justify-content: center; } #header.sakkaf-site-header .sakkaf-header-meta .contact-phone a { font-size: 11px; } #header.sakkaf-site-header .sakkaf-header-meta .contact-phone .soap-icon-phone.circle, #header.sakkaf-site-header .sakkaf-header-meta .social-icons li a { width: 24px; height: 24px; font-size: 12px; } #header.sakkaf-site-header .sakkaf-header-meta .contact-phone img { width: 52px !important; } } /* Package image labels: decorative states for the card presentation only. */ .sakkaf-package-media::after { position: absolute; top: 14px; right: 12px; z-index: 2; display: inline-flex; align-items: center; min-height: 32px; padding: 5px 11px; color: #fff; background: linear-gradient(135deg, rgba(122, 28, 104, .94), rgba(163, 21, 120, .9)); border: 1px solid rgba(255, 255, 255, .68); border-radius: 999px; box-shadow: 0 4px 12px rgba(53, 24, 70, .25), inset 0 1px 0 rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(8px) saturate(135%); backdrop-filter: blur(8px) saturate(135%); content: "عرض مميز ★"; direction: rtl; font-family: Tahoma, Arial, sans-serif; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; } .sakkaf-package-tab-content .image-box > [class*="col-"]:nth-child(4n + 1) .sakkaf-package-media::after { content: "الأكثر حجزًا ★"; } .sakkaf-package-tab-content .image-box > [class*="col-"]:nth-child(4n + 2) .sakkaf-package-media::after { content: "الأكثر طلبًا ★"; } .sakkaf-package-tab-content .image-box > [class*="col-"]:nth-child(4n + 3) .sakkaf-package-media::after { content: "عرض مميز ★"; } .sakkaf-package-tab-content .image-box > [class*="col-"]:nth-child(4n) .sakkaf-package-media::after { content: "برنامج عائلي ★"; } @media (max-width: 767px) { .sakkaf-package-media::after { top: 10px; right: 10px; min-height: 29px; padding: 5px 9px; font-size: 11px; } } /* Keep the legacy price utility class readable inside the light card surface. */ .sakkaf-package-details > .sakkaf-package-meta-row .price { color: #5c4967 !important; background: #fff !important; } .sakkaf-package-details > .sakkaf-package-meta-row:first-of-type span[itemprop="price"] { color: #791c68 !important; } .sakkaf-package-details > .sakkaf-package-meta-row:nth-of-type(2) { border-bottom: 1px solid #eee5dc; } /* East Asia destinations: rounded destination cards with clear booking actions. */ .sakkaf-east-asia-section { margin-top: 18px; padding: 0 0 28px; background: #faf9fc; } .sakkaf-east-asia-title { width: calc(100% - 32px); max-width: 1280px; margin: 0 auto 16px !important; padding: 16px 24px !important; color: #fff !important; background: linear-gradient(135deg, #24102f, #7a1c68) !important; border-radius: 16px; box-shadow: 0 10px 24px rgba(53, 24, 70, .16); font-size: 28px !important; font-weight: 800; line-height: 1.3; text-align: center; } .sakkaf-east-asia-title i { margin-left: 10px; color: #f3c778; } .sakkaf-east-asia-container { width: 100%; max-width: 1280px; padding-right: 16px; padding-left: 16px; } .sakkaf-east-asia-section .sgafs { display: flex; flex-wrap: wrap; width: 100% !important; margin: 0 -8px; padding: 0 !important; } .sakkaf-east-asia-section .sgafs > .sgaf { display: flex; float: none !important; width: 25% !important; margin: 0 0 16px !important; padding: 0 8px !important; border: 0 !important; background: transparent !important; } .sakkaf-east-asia-section .country { position: relative; display: block; width: 100%; height: 220px; overflow: hidden; background: #fff; border: 1px solid rgba(122, 28, 104, .12); border-radius: 16px; box-shadow: 0 8px 18px rgba(53, 24, 70, .14); transition: transform .2s ease, box-shadow .2s ease; } .sakkaf-east-asia-section .country:hover { box-shadow: 0 14px 26px rgba(53, 24, 70, .22); transform: translateY(-3px); } .sakkaf-east-asia-section .country > a:first-child { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; } .sakkaf-east-asia-section .country > a:first-child::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to top, rgba(25, 13, 35, .82), rgba(25, 13, 35, 0) 62%); content: ""; } .sakkaf-east-asia-section .country > a:first-child img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .35s ease; } .sakkaf-east-asia-section .country:hover > a:first-child img { transform: scale(1.05); } .sakkaf-country-flag { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .9); border-radius: 50%; box-shadow: 0 4px 10px rgba(0, 0, 0, .18); font-size: 22px; line-height: 1; } .sakkaf-east-asia-section .country .cname { position: absolute; right: 10px; bottom: 48px; left: 10px; z-index: 2; display: block; color: #fff !important; font-size: 17px; font-weight: 800; line-height: 1.35; text-align: center; text-shadow: 0 2px 4px rgba(0, 0, 0, .42); } .sakkaf-country-book { position: absolute; right: 50%; bottom: 10px; z-index: 3; min-width: 92px; padding: 7px 18px; color: #6a1d68 !important; background: #fff; border-radius: 999px; box-shadow: 0 4px 10px rgba(0, 0, 0, .16); font-size: 12px; font-weight: 800; text-align: center; text-decoration: none !important; transform: translateX(50%); } .sakkaf-country-book:hover, .sakkaf-country-book:focus { color: #fff !important; background: #7a1c68; } /* Contact and quick links: the same rounded light controls shown below the destinations. */ .sakkaf-contact-actions { padding: 20px 0 34px; background: #faf9fc; } .sakkaf-contact-actions > hr { width: calc(100% - 32px); max-width: 1280px; margin: 0 auto 20px; border: 0; border-top: 1px solid #e5dbea; } .sakkaf-contact-actions-container { width: 100%; max-width: 1280px; padding-right: 16px; padding-left: 16px; } .sakkaf-contact-actions-container > section > .row { display: flex; flex-wrap: wrap; margin-right: -8px; margin-left: -8px; } .sakkaf-contact-actions .sakkaf-whatsapp-banner { float: none !important; width: 100% !important; margin: 0 0 14px !important; padding: 0 8px !important; border: 0 !important; background: transparent !important; } .sakkaf-whatsapp-banner > a { position: relative; display: block; padding: 18px 76px 18px 20px; color: #fff !important; background: linear-gradient(135deg, #24102f, #7a1c68); border-radius: 16px; box-shadow: 0 8px 18px rgba(53, 24, 70, .16); font-size: 15px; font-weight: 800; line-height: 1.8; text-align: center; text-decoration: none; } .sakkaf-whatsapp-banner > a .soap-icon-stories { position: absolute; top: 50%; right: 20px; float: none !important; padding: 0 !important; color: #fff; font-size: 42px; transform: translateY(-50%); } .sakkaf-whatsapp-banner > a img { width: 74px !important; height: auto !important; vertical-align: middle; } .sakkaf-whatsapp-cta { display: inline-block; margin-right: 10px; padding: 3px 18px; color: #fff; background: #22b573; border-radius: 999px; line-height: 1.5; } .sakkaf-contact-actions-container .sgafs { display: flex; flex-wrap: wrap; width: 100% !important; margin: 0 -6px; padding: 0 !important; } .sakkaf-contact-actions-container .sgafs > .sgaf { float: none !important; width: 33.333% !important; margin: 0 !important; padding: 0 6px !important; border: 0 !important; background: transparent !important; } .sakkaf-quick-action { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 12px 14px; color: #2f2040 !important; background: #f0ebf7; border: 1px solid #e2d6ee; border-radius: 14px; box-shadow: 0 5px 12px rgba(53, 24, 70, .08); font-size: 14px; font-weight: 800; line-height: 1.4; text-align: center; text-decoration: none !important; transition: color .2s ease, background-color .2s ease, transform .2s ease; } .sakkaf-quick-action i { float: none !important; margin-left: 9px; padding: 0 !important; color: #7a1c68; } .sakkaf-quick-action:hover, .sakkaf-quick-action:focus { color: #fff !important; background: #7a1c68; transform: translateY(-2px); } .sakkaf-quick-action:hover i, .sakkaf-quick-action:focus i { color: #f3c778; } @media (max-width: 991px) { .sakkaf-east-asia-section .sgafs > .sgaf { width: 50% !important; } .sakkaf-contact-actions-container .sgafs > .sgaf { width: 50% !important; margin-bottom: 12px !important; } } @media (max-width: 767px) { .sakkaf-east-asia-title { font-size: 22px !important; } .sakkaf-east-asia-section .sgafs > .sgaf, .sakkaf-contact-actions-container .sgafs > .sgaf { width: 100% !important; } .sakkaf-east-asia-section .country { height: 230px; } .sakkaf-whatsapp-banner > a { padding-right: 58px; padding-left: 12px; font-size: 12px; } .sakkaf-whatsapp-banner > a .soap-icon-stories { right: 12px; font-size: 32px; } } /* Keep Bootstrap row gutters inside the redesigned sections. */ .sakkaf-east-asia-container > section > .row, .sakkaf-contact-actions-container > section > .row { margin-right: 0; margin-left: 0; } .sakkaf-east-asia-section .sgafs, .sakkaf-contact-actions-container .sgafs { margin-right: 0; margin-left: 0; } /* The requested destination-card height is twice the previous visual block. */ .sakkaf-east-asia-section .country { height: 440px; } @media (max-width: 767px) { .sakkaf-east-asia-section .country { height: 460px; } } /* Customer reviews refresh: Stitch-inspired two-column layout, preserving the existing video and ticker controls. */ .sakkaf-reviews-section { position: relative; isolation: isolate; overflow: hidden; margin-top: 0 !important; padding: 68px 0 88px !important; color: #fff; background: linear-gradient(135deg, #321239 0%, #4a154b 48%, #681f69 100%) !important; } .sakkaf-reviews-section::before, .sakkaf-reviews-section::after { display: none !important; content: none !important; } .sakkaf-reviews-container { position: relative; z-index: 1; width: calc(100% - 80px); max-width: 1200px; padding-right: 0; padding-left: 0; } .sakkaf-reviews-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 32px; direction: ltr; margin-right: 0 !important; margin-left: 0 !important; } .sakkaf-reviews-main, .sakkaf-bookings-sidebar { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; direction: rtl; } .sakkaf-reviews-main { grid-column: 1; } .sakkaf-bookings-sidebar { grid-column: 2; background: transparent !important; } .sakkaf-reviews-title, .sakkaf-bookings-title { min-height: 36px; margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; color: #fff !important; background: transparent !important; font-family: Tahoma, Arial, sans-serif; font-size: 24px !important; font-weight: 700; line-height: 1.5; } .sakkaf-reviews-title { text-align: center; } .sakkaf-bookings-title { text-align: right; } .sakkaf-reviews-title i, .sakkaf-bookings-title i { margin: 0 6px !important; padding: 0 !important; color: #fff !important; } .sakkaf-reviews-media { margin: 0 !important; } .sakkaf-video-shell { position: relative; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 8px !important; overflow: hidden; border: 1px solid rgba(255, 255, 255, .24); border-radius: 20px; background: rgba(255, 255, 255, .12) !important; box-shadow: 0 16px 34px rgba(18, 4, 31, .28); } .sakkaf-video-container { position: relative; height: 0 !important; margin: 0 !important; padding: 0 0 56.25% !important; overflow: hidden; border-radius: 14px; background: #0c0a18; } .sakkaf-video-container > .youtube { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; overflow: hidden; border-radius: 14px; background: #0c0a18; } .sakkaf-video-container > .youtube img { top: 0 !important; right: 0; width: 100% !important; height: 100% !important; object-fit: cover; opacity: .76; } .sakkaf-video-container > .youtube iframe { top: 0 !important; right: 0; width: 100% !important; height: 100% !important; } .sakkaf-video-container > .youtube .play-button { width: 78px; height: 78px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; background: rgba(255, 255, 255, .22); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); opacity: 1; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .sakkaf-video-container > .youtube .play-button::before { left: 52%; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #fff; } .sakkaf-video-arrows { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; width: auto; margin: 0 !important; pointer-events: none; } .sakkaf-video-arrow { position: absolute !important; top: 50% !important; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0 !important; border: 1px solid rgba(255, 255, 255, .42); border-radius: 50%; background: rgba(26, 11, 38, .62) !important; box-shadow: 0 5px 15px rgba(0, 0, 0, .2); color: #fff !important; transform: translateY(-50%); pointer-events: auto; } .sakkaf-video-arrow-left { left: 14px !important; } .sakkaf-video-arrow-right { right: 14px !important; } .sakkaf-video-arrow i { margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 16px; } .sakkaf-video-list-container { width: 100% !important; margin: 0 !important; padding: 18px 4px 6px !important; overflow-x: auto !important; overflow-y: hidden; direction: rtl; scrollbar-color: rgba(255, 255, 255, .5) transparent; scrollbar-width: thin; } .sakkaf-video-list-container::-webkit-scrollbar { height: 5px; } .sakkaf-video-list-container::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(255, 255, 255, .48); } .sakkaf-video-list { display: flex; flex-direction: row; gap: 14px; width: max-content !important; min-width: 100%; position: relative; top: 0 !important; left: 0 !important; direction: rtl; } .sakkaf-video-card { display: flex; flex: 0 0 145px; flex-direction: column; width: 145px !important; height: 148px; margin: 0 !important; padding: 9px !important; overflow: hidden; border: 1px solid rgba(255, 255, 255, .25); border-radius: 14px; background: rgba(255, 255, 255, .13); color: #fff; direction: rtl; transition: background-color .2s ease, transform .2s ease; } .sakkaf-video-card:hover { background: rgba(255, 255, 255, .22); transform: translateY(-3px); } .sakkaf-video-card > a { display: flex; flex: 1; flex-direction: column; color: inherit !important; text-decoration: none !important; } .sakkaf-video-card .thumb { flex: 0 0 82px; height: 82px; margin: 0 0 8px; overflow: hidden; border-radius: 9px; background: rgba(0, 0, 0, .24); } .sakkaf-video-card .thumb img { position: static; display: block; width: 100% !important; height: 100% !important; object-fit: cover; opacity: .9; } .sakkaf-video-card .desc { margin: 0; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.45; text-align: center; } .sakkaf-bookings-list { box-sizing: border-box; height: 600px !important; margin: 0 !important; padding: 8px 16px !important; overflow-x: hidden; overflow-y: auto; border: 1px solid rgba(255, 255, 255, .28); border-radius: 18px; background: rgba(255, 255, 255, .12) !important; box-shadow: 0 16px 34px rgba(18, 4, 31, .22); scrollbar-color: rgba(255, 255, 255, .5) transparent; scrollbar-width: thin; } .sakkaf-bookings-list::-webkit-scrollbar { width: 5px; } .sakkaf-bookings-list::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(255, 255, 255, .48); } .sakkaf-bookings-list ul { margin: 0; padding: 0; } .sakkaf-booking-item { position: relative; min-height: 73px; margin: 0 !important; padding: 13px 30px 13px 4px !important; overflow: hidden; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .25) !important; color: #fff !important; font-family: Tahoma, Arial, sans-serif; line-height: 1.35; list-style: none !important; text-align: right; } .sakkaf-booking-item:last-child { border-bottom: 0 !important; } .sakkaf-booking-item > .soap-icon-triangle-left { position: absolute; top: 33px; right: 4px; margin: 0 !important; padding: 0 !important; color: #f3c778; font-size: 13px; } .sakkaf-booking-item .n { display: block; padding: 0 !important; border-radius: 0; color: rgba(255, 255, 255, .72) !important; background: transparent !important; font-size: 12px; line-height: 1.4; } .sakkaf-booking-item .nameC { display: block; color: #fff !important; font-size: 16px; font-weight: 700; line-height: 1.45; } .sakkaf-booking-item .nationality { display: block; color: rgba(255, 255, 255, .82) !important; font-size: 12px; } .sakkaf-booking-item .nationality i { color: #f3c778 !important; } @media (max-width: 991px) { .sakkaf-reviews-section { padding: 56px 0 72px !important; } .sakkaf-reviews-container { width: calc(100% - 40px); } .sakkaf-reviews-row { grid-template-columns: minmax(0, 1.35fr) minmax(250px, 1fr); gap: 18px; } .sakkaf-reviews-title, .sakkaf-bookings-title { font-size: 20px !important; } .sakkaf-video-card { flex-basis: 132px; width: 132px !important; } .sakkaf-booking-item .nameC { font-size: 14px; } } @media (max-width: 767px) { .sakkaf-reviews-section { padding: 44px 0 60px !important; } .sakkaf-reviews-container { width: calc(100% - 32px); } .sakkaf-reviews-row { display: flex; flex-direction: column; gap: 28px; } .sakkaf-reviews-title, .sakkaf-bookings-title { margin-bottom: 14px !important; font-size: 19px !important; } .sakkaf-video-shell { padding: 6px !important; border-radius: 16px; } .sakkaf-video-container, .sakkaf-video-container > .youtube { border-radius: 11px; } .sakkaf-video-arrow { width: 38px; height: 38px; } .sakkaf-video-arrow-left { left: 9px !important; } .sakkaf-video-arrow-right { right: 9px !important; } .sakkaf-video-list-container { padding: 14px 2px 5px !important; } .sakkaf-bookings-list { height: 420px !important; } .sakkaf-booking-item { min-height: 68px; } } /* Malaysia information cards: image-led bento styling based on the supplied Stitch reference. */ .sakkaf-malaysia-info-section { margin: 0 !important; padding: 54px 0 70px !important; background: #fbfafc !important; color: #260e35; } .sakkaf-malaysia-info-title { position: relative; width: calc(100% - 32px); max-width: 1216px; min-height: 0; margin: 0 auto 42px !important; padding: 0 0 20px !important; border: 0 !important; color: #260e35 !important; background: transparent !important; font-family: Tahoma, Arial, sans-serif; font-size: 48px !important; font-weight: 800; line-height: 1.25; text-align: center; } .sakkaf-malaysia-info-title::after { display: block; width: 256px; height: 4px; margin: 17px auto 0; border-radius: 999px; background: rgba(38, 14, 53, .72); content: ""; } .sakkaf-malaysia-info-title i { margin: 0 5px !important; padding: 0 !important; color: #ac7a2b !important; font-size: .7em; } .sakkaf-malaysia-info-container { width: calc(100% - 64px); max-width: 1216px; padding-right: 0; padding-left: 0; } .sakkaf-malaysia-info-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; direction: rtl; margin-right: 0 !important; margin-left: 0 !important; } .sakkaf-malaysia-info-grid::before, .sakkaf-malaysia-info-grid::after { display: none !important; content: none !important; } .sakkaf-malaysia-info-item { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .sakkaf-malaysia-info-card { position: relative; display: flex; width: 100%; height: 574px; min-height: 574px; margin: 0 !important; overflow: hidden; border: 1px solid rgba(38, 14, 53, .78) !important; border-radius: 16px !important; background: #260e35 !important; box-shadow: 0 12px 24px rgba(38, 14, 53, .14); direction: rtl; } .sakkaf-malaysia-info-card::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: linear-gradient(180deg, rgba(38, 14, 53, .32) 0%, rgba(38, 14, 53, .46) 36%, rgba(38, 14, 53, .82) 68%, rgba(38, 14, 53, .97) 100%); content: ""; pointer-events: none; } .sakkaf-malaysia-info-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; width: 100%; height: 100%; margin: 0 !important; } .sakkaf-malaysia-info-media > a { display: block; width: 100%; height: 100%; } .image-box .sakkaf-malaysia-info-card .sakkaf-malaysia-info-media img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .35s ease; } .sakkaf-malaysia-info-card:hover .sakkaf-malaysia-info-media img { transform: scale(1.05); } .sakkaf-malaysia-info-details { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; min-height: 245px; margin: 0 !important; padding: 118px 24px 24px !important; color: #fff !important; background: transparent !important; text-align: center; } .sakkaf-malaysia-info-details h4 { margin: 0 0 12px !important; color: #fff !important; font-family: Tahoma, Arial, sans-serif; font-size: 24px !important; font-weight: 800; line-height: 1.45; } .sakkaf-malaysia-info-details p { min-height: 54px; margin: 0 auto 22px !important; color: rgba(255, 255, 255, .84) !important; font-family: Tahoma, Arial, sans-serif; font-size: 14px; line-height: 1.75; } .sakkaf-malaysia-info-details > .button { display: inline-flex; align-items: center; justify-content: center; min-width: 136px; min-height: 42px; margin: 0 !important; padding: 9px 24px !important; border: 0 !important; border-radius: 999px !important; color: #260e35 !important; background: #c29cf4 !important; box-shadow: 0 8px 16px rgba(194, 156, 244, .24); font-family: Tahoma, Arial, sans-serif; font-size: 14px; font-weight: 800; line-height: 1.4; text-decoration: none !important; transition: background-color .2s ease, transform .2s ease; } .sakkaf-malaysia-info-details > .button:hover, .sakkaf-malaysia-info-details > .button:focus { color: #260e35 !important; background: #d5b8ff !important; transform: translateY(-2px); } .sakkaf-malaysia-info-more { grid-column: 1 / -1; float: none !important; width: 100% !important; margin: 14px 0 0 !important; padding: 0 !important; text-align: center; } .sakkaf-malaysia-info-more > a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin: 0 !important; padding: 9px 24px !important; border-radius: 999px !important; color: #fff !important; background: #7a1c68 !important; font-family: Tahoma, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.4; text-decoration: none !important; } @media (max-width: 991px) { .sakkaf-malaysia-info-title { font-size: 40px !important; } .sakkaf-malaysia-info-container { width: calc(100% - 40px); } .sakkaf-malaysia-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sakkaf-malaysia-info-card { height: 460px; min-height: 460px; } } @media (max-width: 767px) { .sakkaf-malaysia-info-section { padding: 42px 0 56px !important; } .sakkaf-malaysia-info-title { width: calc(100% - 32px); margin-bottom: 30px !important; padding-bottom: 16px !important; font-size: 31px !important; } .sakkaf-malaysia-info-title::after { width: 170px; height: 3px; margin-top: 13px; } .sakkaf-malaysia-info-container { width: calc(100% - 32px); } .sakkaf-malaysia-info-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .sakkaf-malaysia-info-card { height: 420px; min-height: 420px; border-radius: 14px !important; } .sakkaf-malaysia-info-details { min-height: 220px; padding: 92px 20px 20px !important; } .sakkaf-malaysia-info-details h4 { font-size: 21px !important; } .sakkaf-malaysia-info-details p { min-height: 48px; margin-bottom: 16px !important; font-size: 13px; } } /* Testimonials cards: Stitch-inspired three-column layout with the existing carousel/data. */ .sakkaf-testimonials-section { position: relative; isolation: isolate; overflow: hidden; margin: 0 !important; padding: 136px 0 50px !important; color: #1f2937; background: #4a154b !important; } .sakkaf-testimonials-title { position: relative; width: calc(100% - 64px); max-width: 1216px; margin: 0 auto 54px !important; padding: 0 0 18px !important; border: 0 !important; color: #fff !important; background: transparent !important; font-family: Tahoma, Arial, sans-serif; font-size: 30px !important; font-weight: 700; line-height: 1.35; text-align: center; } .sakkaf-testimonials-title::after { display: block; width: min(528px, 90vw); height: 2px; margin: 12px auto 0; background: rgba(255, 255, 255, .72); content: ""; } .sakkaf-testimonials-container { position: relative; z-index: 1; width: calc(100% - 64px); max-width: 1216px; padding-right: 0; padding-left: 0; } .sakkaf-testimonials-carousel-row { margin-right: 0 !important; margin-left: 0 !important; } .sakkaf-testimonials-carousel { margin: 0 !important; } .sakkaf-testimonials-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-right: 0 !important; margin-left: 0 !important; } .sakkaf-testimonials-track::before, .sakkaf-testimonials-track::after { display: none !important; content: none !important; } .sakkaf-testimonials-slide { padding: 0 !important; } .sakkaf-testimonial-card { display: flex; float: none !important; align-items: center; flex-direction: column; width: auto !important; height: 509px; min-height: 509px; margin: 0 !important; padding: 32px !important; overflow: hidden; border: 0 !important; border-radius: 16px !important; background: #f8f9fc !important; box-shadow: 0 8px 18px rgba(24, 8, 28, .18); color: #1f2937 !important; direction: rtl; text-align: center; } .sakkaf-testimonial-card > img.img-circle { display: block; flex: 0 0 128px; width: 128px !important; height: 128px !important; margin: 0 0 24px !important; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(31, 41, 55, .12); object-fit: cover; } .sakkaf-testimonial-content { display: flex; flex: 1; flex-direction: column; width: 100%; min-height: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; color: #27364a !important; background: transparent !important; } .sakkaf-testimonial-body { flex: 1; min-height: 0; margin: 0 0 22px !important; color: #27364a !important; font-family: Tahoma, Arial, sans-serif; font-size: 16px !important; font-weight: 400; line-height: 1.8; text-align: center; } .sakkaf-testimonial-body > .fa-quote-right { margin-left: 6px; color: #64748b; font-size: 12px; } .sakkaf-testimonial-footer { display: block; width: 100%; margin: 0 !important; padding: 0 !important; color: #1f2937 !important; font-family: Tahoma, Arial, sans-serif; font-size: 16px !important; font-weight: 700; line-height: 1.55; text-align: center; } .sakkaf-testimonial-author { color: #1f2937 !important; font-weight: 700; } .sakkaf-testimonial-footer .glyphicon-flag, .sakkaf-testimonial-footer .glyphicon-time { color: #64748b !important; font-size: 12px; } .sakkaf-testimonial-rating { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 9px; direction: ltr; } .sakkaf-testimonial-stars { color: #eab308; font-family: Arial, sans-serif; font-size: 20px; letter-spacing: 2px; line-height: 1; } .sakkaf-testimonial-rating i { color: #64748b; font-size: 12px; font-style: normal; font-weight: 400; } .sakkaf-testimonial-date { color: #64748b !important; direction: ltr; display: inline-block; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: 400; unicode-bidi: plaintext; } .sakkaf-testimonials-carousel > .carousel-control { top: 50% !important; bottom: auto !important; width: 38px; height: 38px; margin-top: -19px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 50%; background: rgba(38, 14, 53, .42) !important; color: #fff !important; font-size: 28px; line-height: 32px; opacity: .72; text-shadow: none; transition: background-color .2s ease, opacity .2s ease; } .sakkaf-testimonials-carousel > .carousel-control:hover, .sakkaf-testimonials-carousel > .carousel-control:focus { background: rgba(38, 14, 53, .72) !important; opacity: 1; } .sakkaf-testimonials-carousel > .carousel-control.left { left: 8px !important; right: auto !important; } .sakkaf-testimonials-carousel > .carousel-control.right { left: auto !important; right: 8px !important; } .sakkaf-testimonials-more { display: flex !important; float: none !important; align-items: center; justify-content: center; width: fit-content !important; min-height: 40px; margin: 45px auto 0 !important; padding: 8px 24px !important; border: 1px solid rgba(255, 255, 255, .72) !important; border-radius: 5px !important; color: #fff !important; background: transparent !important; font-family: Tahoma, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; text-decoration: none !important; } .sakkaf-testimonials-more:hover, .sakkaf-testimonials-more:focus { color: #4a154b !important; background: #fff !important; } @media (max-width: 991px) { .sakkaf-testimonials-section { padding: 88px 0 54px !important; } .sakkaf-testimonials-container { width: calc(100% - 40px); } .sakkaf-testimonials-title { width: calc(100% - 40px); margin-bottom: 40px !important; font-size: 28px !important; } .sakkaf-testimonials-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .sakkaf-testimonial-card { height: 520px; min-height: 520px; padding: 28px !important; } } @media (max-width: 767px) { .sakkaf-testimonials-section { padding: 62px 0 46px !important; } .sakkaf-testimonials-title { width: calc(100% - 32px); margin-bottom: 32px !important; padding-bottom: 14px !important; font-size: 24px !important; } .sakkaf-testimonials-title::after { width: min(300px, 82vw); margin-top: 10px; } .sakkaf-testimonials-container { width: calc(100% - 32px); } .sakkaf-testimonials-track { grid-template-columns: minmax(0, 1fr); gap: 16px; } .sakkaf-testimonial-card { height: auto; min-height: 500px; padding: 28px 22px !important; } .sakkaf-testimonial-card > img.img-circle { flex-basis: 112px; width: 112px !important; height: 112px !important; margin-bottom: 20px !important; } .sakkaf-testimonial-body { font-size: 15px !important; line-height: 1.75; } .sakkaf-testimonials-carousel > .carousel-control { width: 34px; height: 34px; margin-top: -17px; font-size: 25px; line-height: 29px; } .sakkaf-testimonials-carousel > .carousel-control.left { left: 4px !important; right: auto !important; } .sakkaf-testimonials-carousel > .carousel-control.right { left: auto !important; right: 4px !important; } .sakkaf-testimonials-more { margin-top: 32px !important; } } @media (min-width: 992px) { body.sakkaf-nav-scrolled #header.sakkaf-site-header .sakkaf-main-menu > .container { padding-right: 48px; padding-left: 48px; border-color: transparent !important; background: rgba(255, 255, 255, .94) !important; box-shadow: 0 10px 26px rgba(53, 24, 70, .12), inset 0 1px 0 rgba(255, 255, 255, .8) !important; -webkit-backdrop-filter: blur(12px) saturate(125%); backdrop-filter: blur(12px) saturate(125%); } body.sakkaf-nav-scrolled #header.sakkaf-site-header .sakkaf-menu-list > li > a { color: #351846; text-shadow: 0 1px 5px rgba(255, 255, 255, .85); } body.sakkaf-nav-scrolled #header.sakkaf-site-header .sakkaf-brand-row .logo { top: -24px; z-index: 80; } .sakkaf-package-section { max-width: 1360px; } .sakkaf-package-panel { padding-top: 80px; } .sakkaf-package-panel > .sakkaf-package-tabs { top: 16px; } .sakkaf-package-tab-content .image-box > [class*="col-"] { padding-right: 8px; padding-left: 8px; } } .sakkaf-video-arrow, .sakkaf-video-arrow:hover, .sakkaf-video-arrow:focus { border: 1px solid rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .2) !important; color: #fff !important; opacity: 1; } .sakkaf-video-arrow i, .sakkaf-video-arrow:hover i, .sakkaf-video-arrow:focus i { color: #fff !important; } .sakkaf-video-arrow i { display: none !important; } .sakkaf-video-arrow-left::before, .sakkaf-video-arrow-right::before { display: block; color: #fff !important; font-family: Arial, sans-serif; font-size: 32px; font-weight: 700; line-height: 1; } .sakkaf-video-arrow-left::before { content: "›"; } .sakkaf-video-arrow-right::before { content: "‹"; } .sakkaf-testimonials-section { padding-top: 64px !important; padding-bottom: 60px !important; } .sakkaf-testimonials-section::before { display: none !important; content: none !important; } .sakkaf-testimonials-section > .sakkaf-testimonials-title, .sakkaf-testimonials-section > .sakkaf-testimonials, .sakkaf-testimonials-section > .sakkaf-testimonials-more { position: relative; z-index: 1; } @media (max-width: 991px) { .sakkaf-testimonials-section { padding-top: 50px !important; padding-bottom: 50px !important; } } @media (max-width: 767px) { .sakkaf-testimonials-section { padding-top: 40px !important; padding-bottom: 40px !important; } .sakkaf-testimonials-section::before { display: none !important; content: none !important; } } #footer.style3 { width: calc(100% - 32px); max-width: none; margin: 72px auto 36px !important; overflow: hidden; position: relative; border-radius: 26px; background: linear-gradient(110deg, #4a1c40 0%, #26152f 36%, #1c1427 100%) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, .24); color: #f8f2f9; } #footer.style3 .footer-wrapper, #footer.style3 .bottom.gray-area { background: transparent !important; } #footer.style3 .footer-wrapper > .container { width: 100%; max-width: none; padding: 38px 40px 28px; } #footer.style3 .footer-wrapper > .container > .row { display: flex; flex-wrap: wrap; direction: rtl; margin: 0 -16px; } #footer.style3 .footer-wrapper > .container > .row > [class*="col-"] { float: none; width: 25%; min-height: 100%; padding: 0 16px; } #footer.style3 .footer-wrapper [class*="col-md-12"] { float: none; width: 100%; padding-right: 0; padding-left: 0; } #footer.style3 h4 { margin: 0 0 20px; padding: 0 !important; border: 0 !important; color: #fff !important; font-size: 18px !important; font-weight: 700; line-height: 1.55; } #footer.style3 h4::after { display: block; width: 42px; height: 2px; margin-top: 9px; background: #c879ff; content: ""; } #footer.style3 .footer-wrapper > .container > .row > :nth-child(4) h4 { color: #c879ff !important; } #footer.style3 .footer-wrapper p, #footer.style3 .footer-wrapper address, #footer.style3 .footer-wrapper .contact-phone, #footer.style3 .footer-wrapper .contact-email { color: rgba(255, 255, 255, .82) !important; font-size: 13px; line-height: 1.8; } #footer.style3 .footer-wrapper p { margin: 0 0 9px; } #footer.style3 .footer-wrapper > .container > .row > [class*="col-"] > p { margin-top: 20px; color: #fff !important; font-size: 15px; font-weight: 700; } #footer.style3 .footer-wrapper ul:not(.social-icons) { margin: 0; padding: 0; list-style: none !important; } #footer.style3 .footer-wrapper ul:not(.social-icons) li { margin: 0 0 10px; padding: 0; list-style: none !important; line-height: 1.8; } #footer.style3 .footer-wrapper ul:not(.social-icons) a { color: rgba(255, 255, 255, .82) !important; font-size: 13px; transition: color .2s ease; } #footer.style3 .footer-wrapper ul:not(.social-icons) a:hover, #footer.style3 .footer-wrapper ul:not(.social-icons) a:focus { color: #c879ff !important; } #footer.style3 .footer-wrapper .social-icons { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; } #footer.style3 .footer-wrapper .social-icons li { float: none; margin: 0; padding: 0; } #footer.style3 .footer-wrapper .social-icons li a { display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; border: 1px solid rgba(255, 255, 255, .82); border-radius: 50%; color: #fff !important; font-size: 12px; transition: background-color .2s ease, transform .2s ease; } #footer.style3 .footer-wrapper .social-icons li a:hover, #footer.style3 .footer-wrapper .social-icons li a:focus { background: rgba(200, 121, 255, .25); color: #fff !important; transform: translateY(-2px); } #footer.style3 .footer-wrapper .contact-details { margin: 0 0 14px; line-height: 1.6 !important; } #footer.style3 .footer-wrapper .contact-details a { display: inline-flex; align-items: center; gap: 8px; direction: ltr; color: #fff !important; white-space: nowrap; } #footer.style3 .footer-wrapper .contact-details a img { width: 31px !important; height: 31px !important; margin: 0 !important; border-radius: 5px; object-fit: cover; object-position: right center; } #footer.style3 .bottom.gray-area { border-top: 1px solid rgba(255, 255, 255, .12); padding: 18px 40px !important; } #footer.style3 .bottom > .container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: none; min-height: 44px; padding: 0; direction: ltr; gap: 14px; } #footer.style3 .bottom .pull-right, #footer.style3 .bottom .pull-left, #footer.style3 .bottom .copyright { float: none !important; margin: 0 !important; } #footer.style3 .bottom .copyright p, #footer.style3 .bottom .copyright a { margin: 0; padding: 0 !important; color: rgba(255, 255, 255, .76) !important; font-size: 12px; line-height: 1.7; } #footer.style3 .bottom > .container > .pull-left { margin-left: auto !important; } #footer.style3 .bottom > .container > .pull-left p { margin: 0; } #footer.style3 .bottom > .container > .pull-left img { display: block; width: auto; max-width: 250px; height: auto; max-height: 34px; } #footer.style3 #back-to-top { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 50%; color: #fff !important; } #footer.style3 #back-to-top i { width: auto; height: auto; border: 0; background: transparent; color: #fff !important; font-size: 15px; line-height: 1; } @media (max-width: 991px) and (min-width: 576px) { #footer.style3 .footer-wrapper > .container > .row > [class*="col-"] { width: 50%; margin-bottom: 28px; } } @media (max-width: 575px) { #footer.style3 { width: calc(100% - 24px); margin: 48px auto 24px !important; border-radius: 22px; } #footer.style3 .footer-wrapper > .container { padding: 30px 22px 16px; } #footer.style3 .footer-wrapper > .container > .row { margin: 0; } #footer.style3 .footer-wrapper > .container > .row > [class*="col-"] { width: 100%; margin-bottom: 28px; padding: 0; text-align: center; } #footer.style3 h4::after { margin-right: auto; margin-left: auto; } #footer.style3 .footer-wrapper .social-icons { justify-content: center; } #footer.style3 .footer-wrapper .contact-details a { justify-content: center; } #footer.style3 .bottom.gray-area { padding: 16px 22px !important; } #footer.style3 .bottom > .container { flex-direction: column; justify-content: center; gap: 8px; text-align: center; } #footer.style3 .bottom > .container > .pull-left { margin: 0 !important; } } .sakkaf-testimonials-carousel > .carousel-control.left { right: 8px !important; left: auto !important; } .sakkaf-testimonials-carousel > .carousel-control.right { right: auto !important; left: 8px !important; } @media (max-width: 767px) { .sakkaf-testimonials-carousel > .carousel-control.left { right: 4px !important; left: auto !important; } .sakkaf-testimonials-carousel > .carousel-control.right { right: auto !important; left: 4px !important; } } .sakkaf-testimonial-body { flex: 0 0 auto; max-height: 116px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; } .sakkaf-testimonial-footer { margin-top: auto !important; } .sakkaf-testimonial-more { display: inline-flex; align-self: center; align-items: center; justify-content: center; min-height: 30px; margin: 0 auto 12px; padding: 5px 17px; border: 1px solid #7a1c68; border-radius: 999px; color: #7a1c68; background: #fff !important; font-family: Tahoma, Arial, sans-serif; font-size: 12px; font-weight: 800; line-height: 1.3; } .sakkaf-testimonial-more[hidden] { display: none !important; } .sakkaf-testimonial-more:hover, .sakkaf-testimonial-more:focus { color: #fff; background: #7a1c68 !important; } .sakkaf-testimonial-modal[hidden] { display: none !important; } .sakkaf-testimonial-modal:not([hidden]) { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2200; display: flex; align-items: center; justify-content: center; padding: 24px; } .sakkaf-testimonial-modal-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(28, 12, 38, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .sakkaf-testimonial-modal-dialog { position: relative; z-index: 1; width: min(620px, 100%); max-height: min(720px, calc(100vh - 48px)); overflow: auto; padding: 38px 34px 30px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 24px; background: #f8f9fc; box-shadow: 0 24px 70px rgba(10, 3, 18, .38); color: #27364a; direction: rtl; text-align: center; } .sakkaf-testimonial-modal-close { position: absolute; top: 10px; left: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #fff; background: #7a1c68 !important; font-size: 24px; line-height: 1; } .sakkaf-testimonial-modal-avatar { width: 96px; height: 96px; margin: 0 auto 16px; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 3px 10px rgba(31, 41, 55, .18); object-fit: cover; } .sakkaf-testimonial-modal-title { margin: 0 0 18px; color: #351846; font-family: Tahoma, Arial, sans-serif; font-size: 22px; font-weight: 800; } .sakkaf-testimonial-modal-body { margin: 0 0 22px; color: #27364a; font-family: Tahoma, Arial, sans-serif; font-size: 17px; line-height: 1.95; white-space: pre-wrap; } .sakkaf-testimonial-modal-details { padding-top: 16px; border-top: 1px solid #e3dce8; color: #64748b; font-family: Tahoma, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.8; } body.sakkaf-testimonial-modal-open { overflow: hidden; } .sakkaf-east-asia-section .country .cname { font-size: 22px; } .sakkaf-country-book { min-width: 126px; padding: 10px 24px; font-size: 15px; } @media (max-width: 991px) { .sakkaf-package-panel > .sakkaf-package-tabs { margin-bottom: 24px; } } @media (max-width: 767px) { .sakkaf-testimonial-body { max-height: 105px; } .sakkaf-testimonial-modal:not([hidden]) { padding: 14px; } .sakkaf-testimonial-modal-dialog { max-height: calc(100vh - 28px); padding: 36px 20px 24px; border-radius: 18px; } .sakkaf-testimonial-modal-title { font-size: 19px; } .sakkaf-testimonial-modal-body { font-size: 15px; } } /* Keep mobile controls isolated from legacy desktop selectors and preserve the data-driven menu. */ @media (max-width: 991px) { body.sakkaf-mobile-menu-open { overflow: hidden; } #header.sakkaf-site-header { height: 80px; min-height: 80px; padding: 0; background: rgba(255, 255, 255, .96) !important; border-bottom: 1px solid rgba(106, 43, 134, .14); box-shadow: 0 6px 18px rgba(53, 24, 70, .1); -webkit-backdrop-filter: none; backdrop-filter: none; } #header.sakkaf-site-header > .sakkaf-global-header { height: 80px; min-height: 80px; padding: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } #header.sakkaf-site-header .sakkaf-header-meta { display: none !important; } #header.sakkaf-site-header .sakkaf-brand-row { position: absolute; top: 0; right: 0; left: 0; z-index: 2; display: block; width: 100%; height: 80px; min-height: 80px; padding: 0; pointer-events: none; } #header.sakkaf-site-header .sakkaf-brand-row .logo { position: absolute; top: 8px; right: auto !important; left: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px !important; min-height: 64px; margin: 0 !important; padding: 4px; background: #fff; border: 2px solid #6b3288; border-radius: 50%; box-shadow: 0 8px 20px rgba(53, 24, 70, .16); pointer-events: auto; transform: translateX(-50%); } #header.sakkaf-site-header .sakkaf-brand-row .logo img { width: 52px !important; height: auto !important; max-height: 52px; object-fit: contain; } #header.sakkaf-site-header .sakkaf-mobile-toggle { position: absolute; top: 16px; right: auto; bottom: auto; left: 16px; z-index: 1150; display: flex !important; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; padding: 0; color: #fff; background: linear-gradient(135deg, #74145f, #a31578) !important; border: 1px solid rgba(239, 192, 96, .58); border-radius: 14px; box-shadow: 0 8px 18px rgba(122, 28, 104, .2); text-indent: 0; transition: transform .2s ease, box-shadow .2s ease; } #header.sakkaf-site-header .sakkaf-mobile-toggle:hover, #header.sakkaf-site-header .sakkaf-mobile-toggle:focus { color: #fff; box-shadow: 0 10px 22px rgba(122, 28, 104, .3); transform: translateY(-1px); } .sakkaf-hamburger-lines { display: flex; flex-direction: column; gap: 5px; width: 22px; } .sakkaf-hamburger-lines span { display: block; width: 100%; height: 2px; border-radius: 999px; background: #fff; } #header.sakkaf-site-header .sakkaf-main-menu { display: none !important; } #page-wrapper { min-height: 80px; } /* Old mobile-menu rules removed in favor of unified luxury navigation drawer */ } /* Final mobile precedence layer: these values intentionally come after the legacy responsive rules. */ @media (max-width: 991px) { #header.sakkaf-site-header { height: 80px !important; min-height: 80px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #header.sakkaf-site-header::before { position: absolute; top: 8px; right: 16px; left: 16px; z-index: 0; height: 52px; background: rgba(255, 255, 255, .94); border: 1px solid rgba(232, 224, 238, .9); border-radius: 999px; box-shadow: 0 8px 18px rgba(53, 24, 70, .1); content: ""; } #header.sakkaf-site-header > .sakkaf-global-header, #header.sakkaf-site-header .sakkaf-brand-row { height: 80px !important; min-height: 80px !important; padding: 0 !important; background: transparent !important; } #header.sakkaf-site-header .sakkaf-brand-row .logo { position: absolute !important; top: 9px !important; right: auto !important; left: 50% !important; z-index: 3 !important; display: flex !important; align-items: center; justify-content: center; width: 50px !important; height: 50px !important; min-height: 50px !important; padding: 3px !important; border: 2px solid #8b477f !important; border-radius: 50% !important; box-shadow: 0 4px 10px rgba(53, 24, 70, .18) !important; transform: translateX(-50%) !important; } #header.sakkaf-site-header .sakkaf-brand-row .logo img { width: 42px !important; max-height: 42px !important; } #header.sakkaf-site-header .sakkaf-mobile-toggle, #header.sakkaf-site-header .sakkaf-mobile-search { top: 18px !important; right: auto !important; bottom: auto !important; z-index: 1150; display: inline-flex !important; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; box-shadow: none !important; transform: none !important; } #header.sakkaf-site-header .sakkaf-mobile-toggle { left: 30px !important; color: #fff !important; background: #5a1d6d !important; border: 0 !important; } #header.sakkaf-site-header .sakkaf-mobile-search { left: 70px !important; color: #5a1d6d !important; background: #fbf3ff !important; border: 0 !important; font-size: 15px; } #header.sakkaf-site-header .sakkaf-mobile-contact { top: 18px !important; right: 28px !important; z-index: 1150; display: inline-flex !important; width: 138px !important; height: 32px !important; min-height: 32px !important; margin: 0 !important; padding: 0 10px !important; color: #442052 !important; background: #fbf3ff !important; border: 1px solid #f0dffa !important; border-radius: 999px !important; font-size: 10px !important; } .sakkaf-hamburger-lines { gap: 3px !important; width: 14px !important; } .sakkaf-hamburger-lines span { height: 1px !important; } .sakkaf-home-hero-section { padding: 10px 0 20px !important; background: #fbf9fd !important; } .sakkaf-package-section .bx-controls { display: none !important; } #slideshow.sakkaf-home-hero { width: calc(100% - 32px) !important; max-width: none !important; height: 360px !important; margin: 0 auto !important; border-radius: 22px !important; box-shadow: 0 12px 24px rgba(53, 24, 70, .18) !important; } #slideshow.sakkaf-home-hero #this-carousel-id, #slideshow.sakkaf-home-hero .carousel-inner, #slideshow.sakkaf-home-hero .item, #slideshow.sakkaf-home-hero .imgSlider { height: 360px !important; min-height: 0 !important; max-height: none !important; } #slideshow.sakkaf-home-hero .item::after { background: linear-gradient(180deg, rgba(35, 12, 52, .48), rgba(47, 9, 62, .82)) !important; } #slideshow.sakkaf-home-hero .sakkaf-hero-copy { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; padding: 26px 20px 18px !important; } #slideshow.sakkaf-home-hero .sakkaf-hero-copy h1 { font-size: 30px !important; } #slideshow.sakkaf-home-hero .sakkaf-hero-copy h2 { margin-top: 6px !important; margin-bottom: 14px !important; color: #c958bb !important; background: none !important; font-size: 24px !important; -webkit-text-fill-color: currentColor !important; } #slideshow.sakkaf-home-hero .sakkaf-hero-copy > p, #slideshow.sakkaf-home-hero .sakkaf-hero-actions { display: none !important; } #slideshow.sakkaf-home-hero .carousel-control { top: auto !important; bottom: 21px !important; width: 32px !important; height: 32px !important; margin: 0 !important; border-radius: 50% !important; font-size: 29px !important; line-height: 27px !important; } #slideshow.sakkaf-home-hero .carousel-control.left { right: auto !important; left: 20px !important; } #slideshow.sakkaf-home-hero .carousel-control.right { right: 20px !important; left: auto !important; } #slideshow.sakkaf-home-hero .sakkaf-hero-indicators { right: 50% !important; bottom: 31px !important; left: auto !important; width: auto !important; margin: 0 !important; transform: translateX(50%) !important; } section#content.sakkaf-home-content { padding: 0 !important; background: #fbf9fd !important; } .sakkaf-package-section { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 16px 30px !important; } .sakkaf-package-panel { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .sakkaf-package-panel > .sakkaf-package-tabs { display: none !important; } .sakkaf-package-panel > .visible-mobile { display: block !important; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; justify-content: flex-start; gap: 8px; width: 100%; min-height: 38px; margin: 0 !important; padding: 0 0 2px !important; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; direction: rtl; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs::-webkit-scrollbar { display: none; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs > li { display: block !important; position: static !important; flex: 0 0 auto; float: none !important; margin: 0 !important; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs > li > a { display: inline-flex !important; align-items: center; justify-content: center; min-height: 38px; padding: 7px 15px !important; color: #46384d !important; background: #fff !important; border: 1px solid #ebe2ee !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 800; white-space: nowrap; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs > li.active > a { color: #fff !important; background: #5a1d6d !important; border-color: #5a1d6d !important; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs > li.active > a::before { width: 7px; height: 7px; margin-left: 6px; background: #f1c65f; border-radius: 50%; content: ""; } .sakkaf-package-heading { display: flex !important; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 34px 0 -6px !important; direction: rtl; } .sakkaf-package-heading h2 { margin: 0 !important; color: #32113d !important; font-size: 22px !important; font-weight: 900; line-height: 1.3; } .sakkaf-package-heading p { margin: 3px 0 0 !important; color: #817488 !important; font-size: 11px !important; } .sakkaf-package-heading-link { color: #7a1c68 !important; font-size: 12px !important; white-space: nowrap; } .sakkaf-package-tab-content, .sakkaf-package-tab-content .tab-pane > .destinations, .sakkaf-package-tab-content .destinations > .container { padding: 0 !important; } .sakkaf-package-tab-content .destinations > .container, .sakkaf-package-tab-content .image-box { width: 100% !important; margin: 0 !important; } .sakkaf-package-tab-content .destinations .row.image-box { display: flex !important; flex-direction: column; gap: 16px; } .sakkaf-package-tab-content .image-box > [class*="col-"] { float: none !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .sakkaf-package-card { display: block !important; width: 100% !important; height: 286px !important; min-height: 286px !important; overflow: hidden !important; background: #32113d !important; border: 0 !important; border-radius: 22px !important; box-shadow: 0 10px 20px rgba(53, 24, 70, .16) !important; } .sakkaf-package-card:hover { transform: none !important; } .sakkaf-package-media { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 0 !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: inherit !important; } .sakkaf-package-media a, .sakkaf-package-media img { display: block; width: 100% !important; height: 100% !important; } .sakkaf-package-media img { object-fit: cover; } .sakkaf-package-details { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 1 !important; display: flex !important; flex-direction: column; justify-content: flex-end; min-height: 0 !important; padding: 20px 16px 62px !important; color: #fff !important; background: linear-gradient(180deg, rgba(47, 13, 61, .08) 25%, rgba(52, 8, 67, .9) 100%) !important; text-align: center; } .sakkaf-package-title { display: block !important; min-height: 0 !important; margin: 0 0 4px !important; padding: 0 !important; color: #fff !important; font-size: 21px !important; line-height: 1.35; text-shadow: 0 2px 5px rgba(0, 0, 0, .35); } .sakkaf-package-title a, .sakkaf-package-title a:hover, .sakkaf-package-title a:focus { color: #fff !important; } .sakkaf-package-meta { display: block !important; max-height: 28px; margin: 0 !important; overflow: hidden; padding: 0 !important; color: rgba(255, 255, 255, .86) !important; background: transparent !important; border: 0 !important; font-size: 11px !important; line-height: 1.5; white-space: nowrap; } .sakkaf-package-meta-row { display: none !important; } .sakkaf-package-book { right: auto !important; bottom: 14px !important; left: 50% !important; width: auto !important; margin: 0 !important; padding: 0 !important; transform: translateX(-50%) !important; } .sakkaf-package-book a, .sakkaf-package-book a:hover, .sakkaf-package-book a:focus { display: inline-flex !important; align-items: center; justify-content: center; min-width: 102px; min-height: 36px; padding: 8px 18px !important; color: #32113d !important; background: #fff !important; border-radius: 999px !important; box-shadow: 0 4px 10px rgba(20, 8, 30, .16); font-size: 13px !important; font-weight: 900; white-space: nowrap; } .sakkaf-package-book a::after { display: none !important; } .sakkaf-package-book-label { display: inline !important; } .sakkaf-package-book-detail { display: none !important; } #mobile-menu-01.sakkaf-mobile-menu .sakkaf-mobile-menu-close { right: 0 !important; left: auto !important; } } /* Keep mobile/tablet header interactions above the legacy theme state rules. */ @media (max-width: 991px) { #header.sakkaf-site-header .sakkaf-mobile-contact { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; gap: 0 !important; padding: 0 !important; border-radius: 50% !important; font-size: 0 !important; } #header.sakkaf-site-header .sakkaf-mobile-contact .soap-icon-phone { margin: 0 !important; color: #5a1d6d !important; font-size: 15px !important; } #header.sakkaf-site-header .sakkaf-mobile-toggle, #header.sakkaf-site-header .sakkaf-mobile-search { transition: transform .24s ease, box-shadow .24s ease, background-color .24s ease !important; } #header.sakkaf-site-header .sakkaf-mobile-search[aria-expanded="true"] { transform: rotate(90deg) !important; } #header.sakkaf-site-header .sakkaf-mobile-toggle .sakkaf-hamburger-lines { position: relative; display: block; width: 14px !important; height: 14px; gap: 0 !important; } #header.sakkaf-site-header .sakkaf-mobile-toggle .sakkaf-hamburger-lines span { position: absolute; right: 0; left: 0; display: block; width: 100%; height: 1px !important; margin: 0; transform-origin: center; transition: transform .24s ease, opacity .18s ease, top .24s ease !important; } #header.sakkaf-site-header .sakkaf-mobile-toggle .sakkaf-hamburger-lines span:nth-child(1) { top: 2px; } #header.sakkaf-site-header .sakkaf-mobile-toggle .sakkaf-hamburger-lines span:nth-child(2) { top: 6.5px; } #header.sakkaf-site-header .sakkaf-mobile-toggle .sakkaf-hamburger-lines span:nth-child(3) { top: 11px; } #header.sakkaf-site-header .sakkaf-mobile-toggle[aria-expanded="true"] .sakkaf-hamburger-lines span:nth-child(1) { top: 6.5px; transform: rotate(45deg); } #header.sakkaf-site-header .sakkaf-mobile-toggle[aria-expanded="true"] .sakkaf-hamburger-lines span:nth-child(2) { opacity: 0; transform: scaleX(.2); } #header.sakkaf-site-header .sakkaf-mobile-toggle[aria-expanded="true"] .sakkaf-hamburger-lines span:nth-child(3) { top: 6.5px; transform: rotate(-45deg); } .sakkaf-mobile-search-panel { position: absolute; top: 68px; right: 16px; left: 16px; z-index: 1140; padding: 10px; background: rgba(255, 255, 255, .98); border: 1px solid rgba(232, 224, 238, .95); border-radius: 18px; box-shadow: 0 14px 30px rgba(53, 24, 70, .18); opacity: 0; transform: translateY(-12px) scale(.98); transform-origin: top center; transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; visibility: hidden; } .sakkaf-mobile-search-panel.is-open { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0s; visibility: visible; } .sakkaf-mobile-search-form { margin: 0; } .sakkaf-mobile-search-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .sakkaf-mobile-search-fields { display: flex; align-items: center; gap: 8px; direction: rtl; } .sakkaf-mobile-search-fields input { flex: 1 1 auto; width: auto; height: 40px; min-width: 0; padding: 0 12px; color: #28152f; background: #fbf9fd; border: 1px solid #eadcf0; border-radius: 12px; outline: 0; font-family: Tahoma, Arial, sans-serif; font-size: 14px; } .sakkaf-mobile-search-fields input:focus { border-color: #8b477f; box-shadow: 0 0 0 3px rgba(139, 71, 127, .12); } .sakkaf-mobile-search-submit, .sakkaf-mobile-search-close { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 12px; cursor: pointer; transition: transform .2s ease, background-color .2s ease; } .sakkaf-mobile-search-submit { color: #fff; background: #5a1d6d !important; } .sakkaf-mobile-search-submit .soap-icon-search, .sakkaf-mobile-search-submit .soap-icon-search::before { color: #fff !important; } .sakkaf-mobile-search-close { color: #5a1d6d; background: #fbf3ff !important; font-size: 22px; line-height: 1; } .sakkaf-mobile-search-submit:hover, .sakkaf-mobile-search-submit:focus, .sakkaf-mobile-search-close:hover, .sakkaf-mobile-search-close:focus { transform: translateY(-1px); } } /* Keep the three home categories visible in one row on mobile and tablet. */ @media (max-width: 991px) { .visible-mobile #mobile-search-tabs.sakkaf-package-tabs { display: flex !important; justify-content: space-between !important; gap: 8px !important; width: 100% !important; overflow: visible !important; flex-wrap: nowrap !important; float: none !important; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs > li { flex: 1 1 0 !important; min-width: 0 !important; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs > li > a { width: 100% !important; padding: 7px 8px !important; font-size: 12px !important; } } @media (max-width: 991px) { #mobile-menu-01.sakkaf-mobile-menu #mobile-primary-menu > li.menu-item-has-children > a::after { display: none !important; content: none !important; } } /* Show one testimonial card per carousel slide on mobile and tablet. */ @media (max-width: 991px) { .sakkaf-testimonials-track { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; } .sakkaf-testimonials-carousel .carousel-inner > .sakkaf-testimonials-slide { width: 100% !important; } .sakkaf-testimonial-card { width: 100% !important; } } /* The footer brand is only part of the shared mobile/tablet footer composition. */ #footer.style3 .sakkaf-footer-brand-column { display: none; } /* Final mobile/tablet polish for the requested contact, card, country and footer states. */ @media (max-width: 991px) { .sakkaf-whatsapp-banner > .sakkaf-whatsapp-banner-link { display: flex !important; align-items: center; justify-content: center; gap: 12px; min-height: 96px; padding: 16px 18px !important; color: #fff !important; background: linear-gradient(135deg, #2e123d 0%, #741467 100%) !important; border-radius: 18px !important; font-family: Tahoma, Arial, sans-serif; line-height: 1.55; text-align: right; } .sakkaf-whatsapp-banner-link .sakkaf-whatsapp-banner-icon { position: static !important; flex: 0 0 40px; width: 40px; height: 40px; margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 35px !important; line-height: 40px; transform: none !important; } .sakkaf-whatsapp-copy { display: flex; min-width: 0; flex: 1 1 190px; flex-direction: column; gap: 3px; color: #fff !important; } .sakkaf-whatsapp-copy strong, .sakkaf-whatsapp-copy > span { display: block; color: #fff !important; } .sakkaf-whatsapp-copy strong { font-size: 14px; font-weight: 900; } .sakkaf-whatsapp-copy > span { color: rgba(255, 255, 255, .88) !important; font-size: 12px; font-weight: 700; } .sakkaf-whatsapp-copy bdi { color: #f7d37b; direction: ltr; white-space: nowrap; } .sakkaf-whatsapp-banner .sakkaf-whatsapp-cta { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 92px; min-height: 36px; margin: 0 !important; padding: 7px 16px !important; color: #fff !important; background: #20bd74 !important; border-radius: 999px !important; font-size: 12px; font-weight: 900; white-space: nowrap; } .sakkaf-whatsapp-banner-link:hover .sakkaf-whatsapp-cta, .sakkaf-whatsapp-banner-link:focus .sakkaf-whatsapp-cta { background: #2bd586 !important; } /* Keep local flag images above the image layer for consistent rendering. */ .sakkaf-east-asia-section .country .sakkaf-country-flag { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; z-index: 4 !important; line-height: 1 !important; } .sakkaf-east-asia-section .country .sakkaf-country-flag-image { display: block !important; width: 28px !important; height: 18px !important; max-width: none !important; object-fit: cover !important; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .22); } .sakkaf-east-asia-section .country .cname { bottom: 60px !important; margin: 0 !important; color: #fff !important; } .sakkaf-east-asia-section .country .sakkaf-country-book { bottom: 12px !important; margin-top: 10px !important; } /* Show the desktop package facts in the compact mobile/tablet card. */ .sakkaf-package-card { height: 320px !important; min-height: 320px !important; } .sakkaf-package-details { padding: 16px 14px 62px !important; } .sakkaf-package-details .sakkaf-package-meta-row { display: block !important; width: 100%; margin: 3px 0 0 !important; padding: 0 !important; border: 0 !important; } .sakkaf-package-details .sakkaf-package-meta-row .review.price { display: block !important; margin: 0 !important; padding: 0 !important; color: rgba(255, 255, 255, .88) !important; background: transparent !important; border: 0 !important; font-family: Tahoma, Arial, sans-serif; font-size: 11px !important; font-weight: 700; line-height: 1.45; text-transform: none; white-space: normal; } .sakkaf-package-details .sakkaf-package-meta-row .review.price i, .sakkaf-package-details .sakkaf-package-meta i { display: inline-block; margin-left: 3px; color: #f1c65f !important; } .sakkaf-package-details .sakkaf-package-meta-row:first-of-type .review.price { color: #f7d37b !important; } .sakkaf-package-book { bottom: 13px !important; } /* Keep the footer contact copy readable and make the company logo a real final block. */ #footer.style3 .footer-wrapper, #footer.style3 .footer-wrapper p, #footer.style3 .footer-wrapper address, #footer.style3 .footer-wrapper address span, #footer.style3 .footer-wrapper .contact-phone, #footer.style3 .footer-wrapper .contact-phone span, #footer.style3 .footer-wrapper .contact-email, #footer.style3 .footer-wrapper .contact-details a, #footer.style3 .footer-wrapper .contact-details a span { color: #fff !important; } #footer.style3 .footer-wrapper > .container > .row > .sakkaf-footer-brand-column { display: block; float: none; width: 100%; margin-bottom: 28px; padding: 0 16px; text-align: center; order: -1; } #footer.style3 .sakkaf-footer-brand { display: flex; align-items: center; justify-content: center; min-height: 110px; padding: 12px; background: #fff; border-radius: 16px; } #footer.style3 .sakkaf-footer-brand img { display: block; width: auto; max-width: 170px; height: auto; max-height: 96px; } } @media (max-width: 575px) { .sakkaf-whatsapp-banner > .sakkaf-whatsapp-banner-link { align-items: flex-start; flex-wrap: wrap; justify-content: flex-start; min-height: 0; padding: 15px 14px !important; } .sakkaf-whatsapp-copy { flex-basis: calc(100% - 52px); } .sakkaf-whatsapp-banner .sakkaf-whatsapp-cta { margin-right: 52px !important; } .sakkaf-package-card { height: 320px !important; min-height: 320px !important; } #footer.style3 .footer-wrapper > .container > .row { flex-direction: column; } #footer.style3 .footer-wrapper > .container > .row > [class*="col-"] { width: 100%; } } /* Share the tab layout rules while reserving three columns on phones and four on tablets. */ @media (max-width: 991px) { .visible-mobile #mobile-search-tabs.sakkaf-package-tabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; justify-content: stretch !important; gap: 8px !important; width: 100% !important; min-height: 38px; overflow: visible !important; flex-wrap: unset !important; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs > li { width: auto !important; min-width: 0 !important; margin: 0 !important; } .visible-mobile #mobile-search-tabs.sakkaf-package-tabs > li > a { width: 100% !important; min-width: 0; padding-right: 6px !important; padding-left: 6px !important; overflow: hidden; text-overflow: ellipsis; } /* Liquid-glass badges stay readable over every package image. */ .sakkaf-package-media::after { color: rgba(255, 255, 255, .98) !important; background: linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(194, 156, 244, .2)) !important; border-color: rgba(255, 255, 255, .46) !important; box-shadow: 0 8px 18px rgba(34, 12, 48, .2), inset 0 1px 0 rgba(255, 255, 255, .55) !important; -webkit-backdrop-filter: blur(14px) saturate(155%); backdrop-filter: blur(14px) saturate(155%); } /* Enlarge the centered logo without changing the header's three control anchors. */ #header.sakkaf-site-header .sakkaf-brand-row .logo { top: 4px !important; width: 62px !important; height: 62px !important; min-height: 62px !important; padding: 3px !important; } #header.sakkaf-site-header .sakkaf-brand-row .logo img { width: 54px !important; max-height: 54px !important; } } /* Phones intentionally show at most three category pills per row. */ @media (max-width: 575px) { .visible-mobile #mobile-search-tabs.sakkaf-package-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Desktop header: keep the centered round logo and navigation pill only. */ @media (min-width: 992px) { #header.sakkaf-site-header .sakkaf-header-meta, #header.sakkaf-site-header .sakkaf-mobile-toggle, #header.sakkaf-site-header .sakkaf-mobile-search, #header.sakkaf-site-header .sakkaf-mobile-contact { display: none !important; } #header.sakkaf-site-header .sakkaf-main-menu > .container { background: rgba(255, 255, 255, .74) !important; border: 1px solid rgba(255, 255, 255, .92) !important; border-radius: 999px !important; box-shadow: 0 14px 34px rgba(53, 24, 70, .16), inset 0 1px 0 rgba(255, 255, 255, .8) !important; -webkit-backdrop-filter: blur(16px) saturate(135%); backdrop-filter: blur(16px) saturate(135%); } #header.sakkaf-site-header .sakkaf-menu-list > li > a { color: #351846 !important; } #header.sakkaf-site-header .sakkaf-menu-list > li:hover > a, #header.sakkaf-site-header .sakkaf-menu-list > li:focus-within > a, #header.sakkaf-site-header .sakkaf-menu-list > li.active > a { color: #6a2b86 !important; background: rgba(255, 255, 255, .42) !important; } } /* Restore desktop social links while keeping the desktop contact control hidden. */ @media (min-width: 992px) { #header.sakkaf-site-header .sakkaf-header-meta { display: flex !important; } #header.sakkaf-site-header .sakkaf-header-meta > .contact-details { display: none !important; } #header.sakkaf-site-header .sakkaf-header-meta > .social-icons { display: flex !important; } } /* Scroll motion: make the shared header state feel like one continuous interaction. */ #header.sakkaf-site-header, #header.sakkaf-site-header > .sakkaf-global-header, #header.sakkaf-site-header .sakkaf-brand-row, #header.sakkaf-site-header .sakkaf-brand-row .logo, #header.sakkaf-site-header .sakkaf-main-menu, #header.sakkaf-site-header .sakkaf-main-menu > .container, #header.sakkaf-site-header .sakkaf-menu-list > li > a, #header.sakkaf-site-header .sakkaf-mobile-toggle, #header.sakkaf-site-header .sakkaf-mobile-search, #header.sakkaf-site-header .sakkaf-mobile-contact { transition: top .34s cubic-bezier(.22, .61, .36, 1), height .34s cubic-bezier(.22, .61, .36, 1), min-height .34s cubic-bezier(.22, .61, .36, 1), padding .34s cubic-bezier(.22, .61, .36, 1), margin .34s cubic-bezier(.22, .61, .36, 1), background-color .3s ease, border-color .3s ease, box-shadow .3s ease, opacity .24s ease, transform .34s cubic-bezier(.22, .61, .36, 1) !important; } #header.sakkaf-site-header .sakkaf-brand-row .logo { will-change: top, transform, box-shadow; } @media (max-width: 991px) { body.sakkaf-nav-scrolled #header.sakkaf-site-header .sakkaf-brand-row .logo { transform: translateX(-50%) scale(.9) !important; box-shadow: 0 7px 16px rgba(53, 24, 70, .2) !important; } } @media (min-width: 992px) { body.sakkaf-nav-scrolled #header.sakkaf-site-header .sakkaf-main-menu > .container { transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { #header.sakkaf-site-header, #header.sakkaf-site-header > .sakkaf-global-header, #header.sakkaf-site-header .sakkaf-brand-row, #header.sakkaf-site-header .sakkaf-brand-row .logo, #header.sakkaf-site-header .sakkaf-main-menu, #header.sakkaf-site-header .sakkaf-main-menu > .container, #header.sakkaf-site-header .sakkaf-menu-list > li > a, #header.sakkaf-site-header .sakkaf-mobile-toggle, #header.sakkaf-site-header .sakkaf-mobile-search, #header.sakkaf-site-header .sakkaf-mobile-contact { transition-duration: .01ms !important; } #mobile-menu-01.sakkaf-mobile-menu, #mobile-menu-01.sakkaf-mobile-menu .sakkaf-mobile-menu-backdrop, #mobile-menu-01.sakkaf-mobile-menu .sakkaf-mobile-menu-panel, #mobile-menu-01.sakkaf-mobile-menu #mobile-primary-menu > li { transition-duration: .01ms !important; } } /* Mobile/tablet package ordering and bottom navigation shared by every page. */ @media (max-width: 991px) { .sakkaf-package-panel { display: flex !important; flex-direction: column; } .sakkaf-package-panel > .sakkaf-package-heading { order: 1; } .sakkaf-package-panel > .sakkaf-package-tabs { order: 2; } .sakkaf-package-panel > .sakkaf-package-tab-content { order: 3; } .sakkaf-bottom-nav-wrapper { display: block !important; position: static !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav { position: fixed !important; right: 72px !important; bottom: 10px !important; left: 72px !important; z-index: 1800 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4px !important; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 4px !important; overflow: visible !important; direction: rtl; border: 1px solid rgba(255, 255, 255, .8) !important; border-radius: 16px !important; background: rgba(255, 255, 255, .94) !important; box-shadow: 0 6px 18px rgba(42, 16, 55, .18) !important; -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); } .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav::before, .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav::after { display: none !important; content: none !important; } .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li { display: block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; float: none !important; } .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a, .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a:hover, .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a:focus { display: flex !important; align-items: center; justify-content: center; flex-direction: column; gap: 2px; width: 100% !important; min-height: 42px !important; margin: 0 !important; padding: 4px 3px !important; overflow: visible !important; color: #5e3c6d !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 10px !important; font-size: 10px !important; font-weight: 800; line-height: 1.25; text-align: center; text-decoration: none; white-space: nowrap; text-overflow: clip; } .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a .fa { display: block; height: 15px; margin: 0 !important; padding: 0 !important; color: #7a1c68 !important; font-size: 14px; line-height: 15px; } .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li.active > a, .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li.active > a:hover, .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li.active > a:focus { color: #fff !important; background: linear-gradient(135deg, #5a1d6d 0%, #8c1a6f 100%) !important; border-color: rgba(255, 255, 255, .18) !important; box-shadow: 0 5px 12px rgba(90, 29, 109, .24) !important; } .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li.active > a .fa { color: #f1c65f !important; } #page-wrapper { padding-bottom: 64px !important; } } @media (min-width: 992px) { .sakkaf-bottom-nav-wrapper { display: none !important; } } /* Compact package facts: title, nights, price and code read as one visual group. */ @media (max-width: 991px) { .sakkaf-package-details { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; gap: 5px; padding: 14px 14px 62px !important; } .sakkaf-package-details .sakkaf-package-title { flex: 0 0 auto; height: auto !important; min-height: 0 !important; margin: 0 !important; font-size: 20px !important; line-height: 1.25; } .sakkaf-package-facts { display: flex; flex: 0 0 auto; flex-direction: column; gap: 4px; margin: 0; direction: rtl; } .sakkaf-package-facts > .sakkaf-package-meta, .sakkaf-package-facts > .sakkaf-package-meta-row, .sakkaf-package-facts > .sakkaf-package-meta-row .review.price { width: 100%; margin: 0 !important; padding: 6px 10px !important; color: rgba(255, 255, 255, .92) !important; background: rgba(255, 255, 255, .14) !important; border: 1px solid rgba(255, 255, 255, .25) !important; border-radius: 10px !important; font-family: Tahoma, Arial, sans-serif; font-size: 11px !important; font-weight: 800; line-height: 1.4; text-align: center; white-space: normal; } .sakkaf-package-facts > .sakkaf-package-meta { max-height: none; } .sakkaf-package-facts .sakkaf-package-price-row .review.price { font-size: 12px !important; } .sakkaf-package-facts .sakkaf-package-price-row [itemprop="price"] { color: #f7d37b !important; font-weight: 900; white-space: nowrap; } .sakkaf-package-facts .sakkaf-package-code-row bdi { color: #f7d37b; direction: ltr; font-weight: 900; white-space: nowrap; } .sakkaf-package-facts .sakkaf-package-meta i, .sakkaf-package-facts .sakkaf-package-meta-row i { margin-left: 4px; color: #f7d37b !important; } /* The three quick links become a balanced tablet grid and a clean phone list. */ .sakkaf-contact-actions-container .sgafs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100% !important; margin: 0 !important; } .sakkaf-contact-actions-container .sgafs > .sgaf { width: auto !important; margin: 0 !important; padding: 0 !important; } .sakkaf-quick-action { min-height: 88px; padding: 14px 12px; color: #34203f !important; background: linear-gradient(145deg, #fff 0%, #f1eafa 100%) !important; border: 1px solid #e2d4ec; border-radius: 18px; box-shadow: 0 8px 16px rgba(53, 24, 70, .08); flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.45; } .sakkaf-quick-action i { margin: 0 !important; color: #7a1c68 !important; font-size: 22px; } } @media (max-width: 575px) { .sakkaf-package-details .sakkaf-package-title { font-size: 19px !important; } .sakkaf-package-facts > .sakkaf-package-meta, .sakkaf-package-facts > .sakkaf-package-meta-row .review.price { padding: 5px 8px !important; font-size: 10px !important; } .sakkaf-package-facts .sakkaf-package-price-row .review.price { font-size: 11px !important; } .sakkaf-contact-actions-container .sgafs { grid-template-columns: minmax(0, 1fr); gap: 10px; } .sakkaf-quick-action { min-height: 62px; padding: 11px 14px; flex-direction: row; justify-content: center; gap: 9px; font-size: 13px; } .sakkaf-quick-action i { font-size: 20px; } } /* Give the package-list CTA enough visual weight on compact layouts. */ @media (max-width: 991px) { .sakkaf-package-more { float: none !important; width: 100% !important; margin: 8px 0 4px !important; padding: 0 !important; text-align: center; } .sakkaf-package-more > a { display: inline-flex !important; align-items: center; justify-content: center; width: min(100%, 320px); min-height: 48px; margin: 0 auto !important; padding: 10px 18px !important; color: #fff !important; background: linear-gradient(135deg, #3d164e, #8a1c72) !important; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px !important; box-shadow: 0 8px 18px rgba(53, 24, 70, .16); font-family: Tahoma, Arial, sans-serif; font-size: 15px !important; font-weight: 900; line-height: 1.45; text-align: center; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .sakkaf-package-more > a:hover, .sakkaf-package-more > a:focus { color: #fff !important; transform: translateY(-2px); box-shadow: 0 12px 22px rgba(53, 24, 70, .22); } } @media (max-width: 575px) { .sakkaf-package-more > a { width: 100%; max-width: none; min-height: 50px; padding: 10px 14px !important; font-size: 14px !important; } } /* Quick-action hover changes the surface, while preserving readable dark text. */ .sakkaf-quick-action:hover, .sakkaf-quick-action:focus { color: #34203f !important; background: #7a1c68 !important; } /* Reviews section: clean solid section without wave transitions */ .sakkaf-reviews-section { padding-top: 60px !important; padding-bottom: 60px !important; } .sakkaf-reviews-wave, .sakkaf-reviews-wave-bottom, .sakkaf-malaysia-info-wave { display: none !important; content: none !important; } .sakkaf-reviews-section > .sakkaf-reviews-container { position: relative; z-index: 1; } @media (max-width: 991px) { .sakkaf-reviews-section { padding-top: 48px !important; padding-bottom: 48px !important; } } @media (max-width: 767px) { .sakkaf-reviews-section { padding-top: 40px !important; padding-bottom: 40px !important; } } /* Malaysia information area: clean solid section without wave transitions */ .sakkaf-malaysia-info-section { position: relative; isolation: isolate; overflow: hidden; padding-top: 50px !important; padding-bottom: 50px !important; } .sakkaf-malaysia-info-section > .sakkaf-malaysia-info-title, .sakkaf-malaysia-info-section > .sakkaf-malaysia-info-container { position: relative; z-index: 1; } @media (max-width: 991px) { .sakkaf-malaysia-info-section { padding-top: 40px !important; padding-bottom: 40px !important; } } @media (max-width: 767px) { .sakkaf-malaysia-info-section { padding-top: 32px !important; padding-bottom: 32px !important; } } /* Clearfix pseudo-elements must not consume category-grid columns. */ @media (max-width: 991px) { #mobile-search-tabs.sakkaf-package-tabs::before, #mobile-search-tabs.sakkaf-package-tabs::after { display: none !important; content: none !important; } } /* Package filters and heading share the current rounded, glass-inspired visual language. */ .sakkaf-package-panel > .sakkaf-package-tabs { position: relative !important; top: auto !important; right: auto !important; left: auto !important; display: flex !important; align-items: stretch; justify-content: center; gap: 12px !important; width: 100% !important; margin: 0 0 24px !important; padding: 0 !important; overflow: visible !important; direction: rtl; } .sakkaf-package-panel > .sakkaf-package-tabs::before, .sakkaf-package-panel > .sakkaf-package-tabs::after { display: none !important; content: none !important; } .sakkaf-package-panel > .sakkaf-package-tabs > li { float: none !important; flex: 0 1 auto; min-width: 0; margin: 0 !important; } .sakkaf-package-panel > .sakkaf-package-tabs > li > a { display: inline-flex !important; align-items: center; justify-content: center; min-height: 48px; padding: 11px 20px !important; color: #46384d !important; background: linear-gradient(145deg, #fff, #f4eafa) !important; border: 1px solid #e2d4ec !important; border-radius: 999px !important; box-shadow: 0 6px 14px rgba(53, 24, 70, .08); font-family: Tahoma, Arial, sans-serif; font-size: 15px !important; font-weight: 900; line-height: 1.35; text-align: center; text-decoration: none !important; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .sakkaf-package-panel > .sakkaf-package-tabs > li > a:hover, .sakkaf-package-panel > .sakkaf-package-tabs > li > a:focus, .sakkaf-package-panel > .sakkaf-package-tabs > li.active > a { color: #fff !important; background: linear-gradient(135deg, #5a1d6d, #8a1c72) !important; border-color: #5a1d6d !important; box-shadow: 0 9px 18px rgba(90, 29, 109, .2); transform: translateY(-2px); } .sakkaf-package-heading { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; margin: 22px 0 24px !important; padding: 18px 20px; direction: rtl; background: linear-gradient(135deg, #fff, #f8f1fb); border: 1px solid #eadcf0; border-radius: 20px; box-shadow: 0 10px 22px rgba(53, 24, 70, .08); } .sakkaf-package-heading-copy { flex: 1 1 260px; min-width: 0; } .sakkaf-package-heading h2 { margin: 0 !important; color: #32113d !important; font-family: Tahoma, Arial, sans-serif; font-size: 28px !important; font-weight: 900; line-height: 1.3; } .sakkaf-package-heading p { margin: 5px 0 0 !important; color: #817488 !important; font-family: Tahoma, Arial, sans-serif; font-size: 13px !important; line-height: 1.5; } .sakkaf-package-heading-link { display: inline-flex !important; align-items: center; justify-content: center; min-height: 42px; padding: 8px 16px; color: #fff !important; background: #7a1c68; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; box-shadow: 0 7px 14px rgba(122, 28, 104, .16); font-family: Tahoma, Arial, sans-serif; font-size: 14px !important; font-weight: 900; line-height: 1.25; text-decoration: none !important; white-space: nowrap; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; } .sakkaf-package-heading-link:hover, .sakkaf-package-heading-link:focus { color: #fff !important; background: #5a1d6d !important; transform: translateY(-2px); box-shadow: 0 10px 18px rgba(90, 29, 109, .22); } .sakkaf-package-heading-link span { position: static !important; margin-right: 4px; margin-left: 0; } /* The desktop testimonial carousel is a strict three-card row. */ @media (min-width: 992px) { .sakkaf-testimonials-track { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 32px !important; } } @media (max-width: 991px) { /* Keep the full package-category list available on tablet and mobile. */ .sakkaf-package-panel > .sakkaf-package-tabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px !important; margin-bottom: 20px !important; } .sakkaf-package-panel > .sakkaf-package-tabs > li { width: auto !important; } .sakkaf-package-panel > .sakkaf-package-tabs > li > a { display: flex !important; width: 100% !important; min-height: 52px; padding: 9px 8px !important; font-size: 14px !important; white-space: normal; } .sakkaf-package-heading { margin-top: 20px !important; padding: 15px 16px; } .sakkaf-package-heading h2 { font-size: 24px !important; } } @media (max-width: 575px) { .sakkaf-package-panel > .sakkaf-package-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; } .sakkaf-package-panel > .sakkaf-package-tabs > li > a { min-height: 56px; padding: 9px 5px !important; font-size: 13px !important; } .sakkaf-package-heading { align-items: flex-start; gap: 12px; padding: 14px; } .sakkaf-package-heading-copy { flex-basis: 100%; } .sakkaf-package-heading h2 { font-size: 22px !important; } .sakkaf-package-heading p { font-size: 12px !important; } .sakkaf-package-heading-link { min-height: 38px; font-size: 13px !important; } } /* Keep package cards visually consistent across desktop, tablet and mobile. */ @media (max-width: 991px) { .sakkaf-package-card { display: flex !important; flex-direction: column !important; height: 540px !important; min-height: 540px !important; background: #fff !important; border: 1px solid #eadfd4 !important; border-radius: 22px !important; box-shadow: 0 12px 28px rgba(53, 24, 70, .13) !important; } .sakkaf-package-card:hover { transform: translateY(-4px) !important; } .sakkaf-package-media { position: relative !important; inset: auto !important; z-index: auto !important; flex: 0 0 230px !important; width: 100% !important; height: 230px !important; border-radius: 21px 21px 0 0 !important; } .sakkaf-package-media::after { color: #fff !important; background: linear-gradient(135deg, rgba(122, 28, 104, .94), rgba(163, 21, 120, .9)) !important; border-color: rgba(255, 255, 255, .68) !important; box-shadow: 0 4px 12px rgba(53, 24, 70, .25), inset 0 1px 0 rgba(255, 255, 255, .38) !important; } .sakkaf-package-details { position: relative !important; inset: auto !important; z-index: 1 !important; display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; justify-content: flex-start !important; min-height: 0 !important; padding: 12px 14px 76px !important; color: #3d294b !important; background: #fff !important; text-align: initial; } .sakkaf-package-title { display: flex !important; align-items: center; justify-content: center; min-height: 52px !important; height: auto !important; margin: 0 0 4px !important; color: #2d173d !important; font-size: 19px !important; line-height: 1.35; text-shadow: none; } .sakkaf-package-title a, .sakkaf-package-title a:hover, .sakkaf-package-title a:focus { color: #2d173d !important; } .sakkaf-package-facts { display: block !important; flex: 0 1 auto !important; margin: 0; direction: rtl; } .sakkaf-package-facts > .sakkaf-package-meta, .sakkaf-package-facts > .sakkaf-package-meta-row { display: block !important; width: 100%; margin: 0 !important; padding: 9px 4px !important; color: #5c4967 !important; background: #fff !important; border-top: 1px solid #eee5dc !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; font-size: 12px !important; font-weight: 600; line-height: 1.45; text-align: center; white-space: normal; } .sakkaf-package-facts > .sakkaf-package-meta-row:last-child { border-bottom: 1px solid #eee5dc !important; } .sakkaf-package-facts > .sakkaf-package-meta-row .review.price { display: block !important; width: auto; margin: 0 !important; padding: 6px !important; color: #5c4967 !important; background: transparent !important; border: 0 !important; font-size: 12px !important; line-height: 1.5; } .sakkaf-package-facts .sakkaf-package-price-row [itemprop="price"] { color: #791c68 !important; font-weight: 800; } .sakkaf-package-facts .sakkaf-package-meta i, .sakkaf-package-facts .sakkaf-package-meta-row i { color: #c28a36 !important; } .sakkaf-package-book { right: 14px !important; bottom: 14px !important; left: 14px !important; width: auto !important; transform: none !important; } .sakkaf-package-book a, .sakkaf-package-book a:hover, .sakkaf-package-book a:focus { display: block !important; min-height: 0; padding: 12px 18px !important; color: #fff !important; background: linear-gradient(135deg, #74145f, #a31578) !important; border-radius: 999px !important; font-size: 14px !important; line-height: 20px; } .sakkaf-package-book a::after { display: inline !important; margin-right: 10px; color: #f4c86b; content: "←" !important; font-size: 19px; line-height: 0; vertical-align: -2px; } .sakkaf-package-book-label { display: none !important; } .sakkaf-package-book-detail { display: inline !important; } } /* Smooth scrolling plus lightweight viewport reveals for the homepage content. */ html { scroll-behavior: smooth; } .sakkaf-scroll-reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .65s ease, transform .65s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--sakkaf-scroll-delay, 0ms); will-change: opacity, transform; } .sakkaf-scroll-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* Keep the existing hover lift available after a reveal animation completes. */ .sakkaf-package-card.sakkaf-scroll-reveal.is-visible:hover { transform: translateY(-4px); } .sakkaf-east-asia-section .country.sakkaf-scroll-reveal.is-visible:hover { transform: translateY(-3px); } .sakkaf-quick-action.sakkaf-scroll-reveal.is-visible:hover, .sakkaf-quick-action.sakkaf-scroll-reveal.is-visible:focus { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .sakkaf-scroll-reveal, .sakkaf-scroll-reveal.is-visible { opacity: 1; transform: none; transition: none; will-change: auto; } } /* Desktop package facts sit on a light card surface, so keep the legacy price utility readable. */ @media (min-width: 992px) { .sakkaf-package-details .sakkaf-package-meta-row .review.price { color: #5c4967 !important; background: #fff !important; } .sakkaf-package-details .sakkaf-package-price-row [itemprop="price"] { color: #791c68 !important; font-weight: 800; } .sakkaf-package-details .sakkaf-package-code-row bdi { color: #5c4967 !important; font-weight: 800; } .sakkaf-package-details .sakkaf-package-meta-row i { color: #c28a36 !important; } } /* Turn the package-list link into a clear, centered desktop call to action. */ @media (min-width: 992px) { .sakkaf-package-more { display: flex; float: none !important; width: 100% !important; margin: 28px auto 10px !important; padding: 0 16px !important; text-align: center; } .sakkaf-package-more > a.button { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; width: min(100%, 560px); min-height: 68px; margin: 0 auto !important; padding: 15px 30px !important; overflow: hidden; color: #fff !important; background: linear-gradient(135deg, #3c124a 0%, #72145f 52%, #aa197e 100%) !important; border: 1px solid rgba(255, 255, 255, .28); border-radius: 18px !important; box-shadow: 0 12px 24px rgba(53, 24, 70, .2), inset 0 1px 0 rgba(255, 255, 255, .2); font-family: Tahoma, Arial, sans-serif; font-size: 20px !important; font-weight: 900; line-height: 1.5; text-align: center; text-decoration: none !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .18); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .sakkaf-package-more > a.button::before { position: absolute; top: 0; bottom: 0; left: -35%; width: 28%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent); content: ""; pointer-events: none; transform: skewX(-18deg); transition: left .45s ease; } .sakkaf-package-more > a.button::after { color: #f7d37b; content: "←"; font-size: 25px; line-height: 1; transition: transform .2s ease; } .sakkaf-package-more > a.button > strong { color: #f7d37b; font-weight: 900; } .sakkaf-package-more > a.button:hover, .sakkaf-package-more > a.button:focus { color: #fff !important; filter: saturate(1.08); transform: translateY(-3px); box-shadow: 0 16px 30px rgba(53, 24, 70, .28), inset 0 1px 0 rgba(255, 255, 255, .25); } .sakkaf-package-more > a.button:hover::before, .sakkaf-package-more > a.button:focus::before { left: 112%; } .sakkaf-package-more > a.button:hover::after, .sakkaf-package-more > a.button:focus::after { transform: translateX(-4px); } .sakkaf-package-more > a.button:focus-visible { outline: 3px solid #f7d37b; outline-offset: 4px; } } /* ========================================================================== Sakkaf Travel - New Modern Header & Hero Slider Design ========================================================================== */ body { font-family: "Cairo", Tahoma, Arial, sans-serif !important; color: var(--ink); background: var(--paper); } .section-shell { width: min(1440px, calc(100% - 56px)); margin-inline: auto; } /* Header Container (Sticky Header) */ #header.site-header, #header.sakkaf-site-header, .site-header { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; right: 0 !important; left: 0 !important; width: 100% !important; height: auto !important; min-height: 94px !important; max-height: none !important; margin: 0 !important; padding: 0 !important; background: #fff !important; border-bottom: 1px solid #f4ece8 !important; box-shadow: 0 2px 8px rgba(78, 41, 56, 0.04) !important; z-index: 10000 !important; transition: box-shadow 0.25s ease, background-color 0.25s ease !important; } body.sakkaf-nav-scrolled #header.site-header, body.sakkaf-nav-scrolled #header.sakkaf-site-header, body.sakkaf-nav-scrolled .site-header { box-shadow: 0 4px 20px rgba(50, 16, 68, 0.1) !important; background: rgba(255, 255, 255, 0.98) !important; border-bottom-color: #eee3dd !important; } #header.site-header::before, #header.sakkaf-site-header::before { display: none !important; } #header.site-header .sakkaf-global-header, #header.sakkaf-site-header .sakkaf-global-header { display: contents !important; } #header.site-header #main-menu, #header.sakkaf-site-header #main-menu { display: none !important; } /* Header Inner 3-Column Grid */ .header-inner { width: min(1440px, calc(100% - 56px)) !important; margin: auto !important; min-height: 94px !important; height: auto !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; gap: 24px !important; } /* Brand Section */ .brand { justify-self: start !important; display: flex !important; align-items: center !important; gap: 12px !important; text-decoration: none !important; color: inherit !important; } .brand-mark { width: 58px !important; height: 58px !important; min-width: 58px !important; object-fit: contain !important; display: block !important; } .brand-copy { display: flex !important; flex-direction: column !important; line-height: 1.2 !important; text-align: right !important; } .brand-copy strong { font-size: 20px !important; color: #1f1721 !important; font-weight: 800 !important; letter-spacing: normal !important; } .brand-copy span { font-family: Georgia, serif !important; font-size: 13px !important; color: #222 !important; margin-top: 5px !important; letter-spacing: 0.5px !important; } /* Tagline */ .tagline { color: var(--wine) !important; font-size: 16px !important; font-weight: 700 !important; white-space: nowrap !important; text-align: center !important; justify-self: center !important; } /* Header Actions */ .header-actions { justify-self: start !important; display: flex !important; align-items: center !important; gap: 18px !important; direction: ltr !important; } .whatsapp { display: flex !important; align-items: center !important; gap: 10px !important; direction: ltr !important; text-decoration: none !important; transition: transform .2s ease !important; } .whatsapp:hover { transform: translateY(-2px) !important; } .whatsapp > span:last-child { display: flex !important; flex-direction: column !important; text-align: left !important; } .whatsapp b { font-size: 18px !important; color: var(--wine) !important; line-height: 1.1 !important; font-family: Tahoma, Arial, sans-serif !important; font-weight: 700 !important; } .whatsapp small { font-size: 11px !important; color: #55465b !important; margin-top: 4px !important; white-space: nowrap !important; } .wa-icon { width: 46px !important; height: 46px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; background: #35c86f !important; color: #fff !important; font-size: 24px !important; font-weight: 800 !important; box-shadow: 0 5px 12px rgba(53, 200, 111, .25) !important; flex-shrink: 0 !important; } .wa-icon svg { width: 26px !important; height: 26px !important; fill: #fff !important; display: block !important; margin: auto !important; } .menu-btn { width: 50px !important; height: 50px !important; border: 1px solid #eadfd9 !important; border-radius: 9px !important; background: #fff !important; color: var(--wine) !important; font-size: 25px !important; cursor: pointer !important; box-shadow: 0 3px 12px rgba(60, 30, 40, .06) !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; padding: 0 !important; transition: transform .2s ease, background .2s ease, color .2s ease !important; outline: none !important; } .menu-btn:hover, .menu-btn:focus { background: #fff8f9 !important; color: var(--wine2) !important; transform: translateY(-2px) !important; box-shadow: 0 5px 16px rgba(125, 11, 84, .12) !important; } /* Hero Section / Image Slider */ .sakkaf-home-hero-section { padding: 0 !important; margin: 0 !important; background: transparent !important; width: 100% !important; max-width: 100% !important; } .hero { position: relative !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; background: #ddd !important; margin: 0 !important; padding: 0 !important; } .hero #this-carousel-id, .hero .carousel-inner, .hero .item { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; } .hero .item::after, .hero .item::before { display: none !important; } .hero-slide-link { display: block !important; width: 100% !important; height: 100% !important; text-decoration: none !important; } .hero-bg { display: block !important; width: 100% !important; height: clamp(420px, 37vw, 650px) !important; min-height: 0 !important; max-height: none !important; object-fit: cover !important; object-position: center !important; margin: 0 !important; padding: 0 !important; } .hero-overlay { position: absolute !important; inset: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)) !important; pointer-events: none !important; z-index: 2 !important; } .hero-caption { position: absolute !important; inset: 0 !important; z-index: 3 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; direction: ltr !important; padding: 40px 6% 40px calc(3% + 72px) !important; pointer-events: none !important; overflow: hidden !important; visibility: visible !important; opacity: 1 !important; } .hero-caption::before { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: min(880px, 66%) !important; background: radial-gradient(ellipse at 16% 50%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.52) 48%, rgba(255, 255, 255, 0) 86%) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.92) 50%, rgba(0, 0, 0, 0) 95%) !important; mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.92) 50%, rgba(0, 0, 0, 0) 95%) !important; pointer-events: none !important; z-index: 1 !important; } .hero-caption-panel { position: relative !important; z-index: 2 !important; width: min(100%, 540px) !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; border: none !important; direction: rtl !important; text-align: right !important; pointer-events: auto !important; } .hero-caption-panel h1 { margin: 0 0 16px !important; color: #6b0f4a !important; font-family: 'Cairo', sans-serif !important; font-size: clamp(32px, 3.3vw, 48px) !important; font-weight: 850 !important; line-height: 1.24 !important; letter-spacing: -0.015em !important; text-shadow: 0 2px 14px rgba(255, 255, 255, 0.92), 0 1px 3px rgba(255, 255, 255, 0.98) !important; } .hero-caption-panel p { margin: 0 0 24px !important; color: #492a43 !important; font-family: 'Cairo', sans-serif !important; font-size: clamp(16px, 1.25vw, 19px) !important; font-weight: 600 !important; line-height: 1.7 !important; text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9) !important; } .hero-caption-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 14px !important; margin-top: 0 !important; } .hero-caption-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-height: 48px !important; padding: 11px 26px !important; border-radius: 999px !important; font-family: 'Cairo', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.25 !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important; } .hero-caption-button:hover, .hero-caption-button:focus { text-decoration: none !important; transform: translateY(-2px) !important; } .hero-caption-button-primary { background: linear-gradient(135deg, #990d5d, #6f0a45) !important; border: 1px solid transparent !important; box-shadow: 0 8px 22px rgba(111, 10, 69, 0.32) !important; color: #ffffff !important; } .hero-caption-button-primary:hover, .hero-caption-button-primary:focus { background: linear-gradient(135deg, #a80e66, #7d0c4e) !important; box-shadow: 0 12px 28px rgba(111, 10, 69, 0.42) !important; color: #ffffff !important; } .hero-caption-button-primary .fa { font-size: 15px !important; transition: transform 0.2s ease !important; } .hero-caption-button-primary:hover .fa { transform: translateX(-4px) !important; } .hero-caption-button-secondary { background: rgba(255, 255, 255, 0.75) !important; border: 1.5px solid rgba(111, 10, 69, 0.32) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important; color: #6b0f4a !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; } .hero-caption-button-secondary:hover, .hero-caption-button-secondary:focus { background: #ffffff !important; border-color: #6b0f4a !important; box-shadow: 0 8px 22px rgba(111, 10, 69, 0.2) !important; color: #550738 !important; } .hero-caption-button-secondary .fa { font-size: 17px !important; color: #cf8423 !important; } .slider-arrow { position: absolute !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; width: 54px !important; height: 54px !important; border-radius: 50% !important; border: 0 !important; background: rgba(255, 255, 255, .92) !important; color: var(--wine) !important; font-size: 42px !important; line-height: 1 !important; cursor: pointer !important; box-shadow: var(--shadow) !important; z-index: 10 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; opacity: 1 !important; text-shadow: none !important; transition: transform .2s ease, background .2s ease, box-shadow .2s ease !important; outline: none !important; } .slider-arrow:hover, .slider-arrow:focus { background: #fff !important; color: var(--wine2) !important; transform: translateY(-50%) scale(1.08) !important; box-shadow: 0 12px 28px rgba(78, 41, 56, .2) !important; } .slider-right { right: 3% !important; left: auto !important; } .slider-left { left: 3% !important; right: auto !important; } .hero-dots { position: absolute !important; bottom: 19px !important; top: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; display: flex !important; gap: 9px !important; direction: ltr !important; z-index: 10 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; width: auto !important; } .hero-dots i { display: inline-block !important; width: 11px !important; height: 11px !important; border-radius: 50% !important; background: #fff !important; border: 1px solid rgba(80, 20, 50, .22) !important; cursor: pointer !important; margin: 0 !important; transition: background .25s ease, transform .2s ease !important; } .hero-dots i.active { background: #c31070 !important; border-color: #c31070 !important; transform: scale(1.2) !important; } /* Drawer / Mobile Navigation Panel Integration */ #mobile-menu-01.sakkaf-mobile-menu { z-index: 99999 !important; } #mobile-menu-01 .sakkaf-mobile-menu-panel { width: min(100%, 380px) !important; background: #251230 !important; } /* Responsive Styles for Mobile & Tablet (Hero Slider & Header) */ @media (max-width: 991px) { .header-inner { grid-template-columns: 1fr auto !important; } .tagline { display: none !important; } /* Hero Slider Mobile & Tablet Base */ #hero-slider { position: relative !important; width: 100% !important; overflow: hidden !important; } #hero-slider #this-carousel-id { position: relative !important; width: 100% !important; overflow: hidden !important; touch-action: pan-y !important; } #hero-slider .carousel-inner { position: relative !important; width: 100% !important; overflow: hidden !important; } #hero-slider .carousel-inner > .item { width: 100% !important; margin: 0 !important; padding: 0 !important; -webkit-transition: right 0.4s ease-in-out !important; transition: right 0.4s ease-in-out !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; } #hero-slider .carousel-inner > .item.active { position: relative !important; right: 0 !important; } #hero-slider .carousel-inner > .item.next, #hero-slider .carousel-inner > .item.prev { position: absolute !important; top: 0 !important; width: 100% !important; height: 100% !important; } #hero-slider .carousel-inner > .item.next { right: 100% !important; } #hero-slider .carousel-inner > .item.prev { right: -100% !important; } #hero-slider .carousel-inner > .item.next.left, #hero-slider .carousel-inner > .item.prev.right { right: 0 !important; } #hero-slider .carousel-inner > .item.active.left { right: -100% !important; } #hero-slider .carousel-inner > .item.active.right { right: 100% !important; } #hero-slider .hero-slide-link { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } #hero-slider .hero-bg { width: 100% !important; height: clamp(380px, 50vw, 480px) !important; min-height: 380px !important; object-fit: cover !important; object-position: center !important; } #hero-slider .hero-caption { position: absolute !important; inset: 0 !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; direction: rtl !important; text-align: center !important; padding: 30px 24px 54px !important; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.32) 42%, rgba(0, 0, 0, 0.52) 100%) !important; pointer-events: none !important; overflow: hidden !important; z-index: 3 !important; } #hero-slider .hero-caption::before { display: none !important; content: none !important; } #hero-slider .hero-caption-panel { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: 580px !important; margin: 0 auto !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; direction: rtl !important; text-align: center !important; pointer-events: auto !important; } #hero-slider .hero-caption-panel h1 { margin: 0 0 12px !important; color: #ffffff !important; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, sans-serif !important; font-size: clamp(26px, 4.4vw, 38px) !important; font-weight: 800 !important; line-height: 1.28 !important; letter-spacing: -0.01em !important; text-align: center !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85), 0 4px 20px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0, 0, 0, 0.95) !important; } #hero-slider .hero-caption-panel p { margin: 0 auto 22px !important; max-width: 520px !important; color: #ffffff !important; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, sans-serif !important; font-size: clamp(14px, 2.2vw, 18px) !important; font-weight: 600 !important; line-height: 1.6 !important; text-align: center !important; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.95) !important; } #hero-slider .hero-caption-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 12px !important; margin: 0 auto !important; width: 100% !important; } #hero-slider .hero-caption-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 9999px !important; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, sans-serif !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important; } #hero-slider .hero-caption-button-primary { background: linear-gradient(180deg, #a00e5f 0%, #6f0a45 100%) !important; border: 1.5px solid rgba(255, 255, 255, 0.32) !important; box-shadow: 0 4px 18px rgba(111, 10, 69, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25) !important; color: #ffffff !important; font-size: clamp(14px, 2vw, 16px) !important; font-weight: 700 !important; min-height: 46px !important; padding: 10px 32px !important; } #hero-slider .hero-caption-button-primary:hover, #hero-slider .hero-caption-button-primary:focus, #hero-slider .hero-caption-button-primary:active { background: linear-gradient(180deg, #b2106a 0%, #7d0c4e 100%) !important; border-color: rgba(255, 255, 255, 0.6) !important; box-shadow: 0 6px 22px rgba(111, 10, 69, 0.55), 0 3px 8px rgba(0, 0, 0, 0.3) !important; transform: translateY(-2px) scale(1.02) !important; color: #ffffff !important; } #hero-slider .hero-caption-button-primary .fa { display: none !important; } #hero-slider .hero-caption-button-secondary { background: rgba(255, 255, 255, 0.88) !important; border: 1.5px solid rgba(255, 255, 255, 0.95) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important; color: #6f0a45 !important; font-size: clamp(13.5px, 1.8vw, 15px) !important; font-weight: 700 !important; min-height: 46px !important; padding: 10px 24px !important; } #hero-slider .hero-caption-button-secondary:hover, #hero-slider .hero-caption-button-secondary:focus { background: #ffffff !important; color: #550738 !important; transform: translateY(-2px) !important; } #hero-slider .slider-arrow { display: none !important; } #hero-slider .hero-dots { position: absolute !important; bottom: 18px !important; top: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 13px !important; direction: ltr !important; z-index: 10 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; width: auto !important; } #hero-slider .hero-dots i { display: inline-block !important; width: 14px !important; height: 14px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.88) !important; border: 2px solid rgba(255, 255, 255, 0.95) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important; cursor: pointer !important; margin: 0 !important; transition: all .25s ease !important; } #hero-slider .hero-dots i.active { background: #c31070 !important; border: 2px solid rgba(255, 255, 255, 0.95) !important; box-shadow: 0 2px 8px rgba(195, 16, 112, 0.6), 0 2px 5px rgba(0, 0, 0, 0.3) !important; transform: scale(1.18) !important; } } @media (max-width: 720px) { .section-shell, .header-inner { width: min(100% - 28px, 1440px) !important; } .header-inner { min-height: 78px !important; } #header.site-header, #header.sakkaf-site-header { min-height: 78px !important; } .brand-copy span { display: none !important; } .brand-copy strong { font-size: 14px !important; } .brand-mark { width: 44px !important; height: 44px !important; min-width: 44px !important; } .whatsapp > span:last-child { display: none !important; } .wa-icon { width: 40px !important; height: 40px !important; font-size: 20px !important; } .wa-icon svg { width: 22px !important; height: 22px !important; } .menu-btn { width: 42px !important; height: 42px !important; font-size: 21px !important; } /* Specific mobile adjustments for hero */ #hero-slider .hero-bg { height: clamp(230px, 52vw, 300px) !important; min-height: 0 !important; } #hero-slider .hero-caption { padding: 24px 16px 48px !important; } #hero-slider .hero-caption-panel { max-width: 440px !important; } #hero-slider .hero-caption-panel h1 { font-size: clamp(21px, 5.8vw, 28px) !important; margin-bottom: 8px !important; } #hero-slider .hero-caption-panel p { font-size: clamp(13px, 3.6vw, 15.5px) !important; line-height: 1.5 !important; margin-bottom: 18px !important; } #hero-slider .hero-caption-button-primary { min-height: 42px !important; padding: 9px 26px !important; font-size: clamp(13.5px, 3.6vw, 15px) !important; } #hero-slider .hero-dots { bottom: 15px !important; gap: 11px !important; } #hero-slider .hero-dots i { width: 12px !important; height: 12px !important; } #hero-slider .hero-dots i.active { transform: scale(1.15) !important; } } /* Quick Links Section */ .quick-links { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; margin-top: 28px !important; margin-bottom: 24px !important; } .quick-card { min-height: 100px !important; display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; gap: 14px !important; background: #fff !important; border: 1px solid var(--line, #eee3de) !important; border-radius: 14px !important; padding: 18px 22px !important; box-shadow: var(--shadow, 0 8px 24px rgba(78, 41, 56, .10)) !important; transition: transform .2s ease, box-shadow .2s ease !important; text-decoration: none !important; color: inherit !important; } .quick-card:hover, .quick-card:focus { transform: translateY(-3px) !important; box-shadow: 0 12px 28px rgba(78, 41, 56, .16) !important; border-color: rgba(125, 11, 84, .25) !important; text-decoration: none !important; color: inherit !important; } .quick-icon { font-size: 34px !important; color: var(--wine, #7d0b54) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; flex-shrink: 0 !important; } .quick-icon svg { width: 36px !important; height: 36px !important; stroke: var(--wine, #7d0b54) !important; display: block !important; } .quick-copy { display: flex !important; flex-direction: column !important; text-align: right !important; line-height: 1.3 !important; } .quick-copy b { font-size: 18px !important; color: var(--ink, #321044) !important; font-weight: 800 !important; } .quick-copy small { font-size: 13px !important; color: var(--muted, #6d5a73) !important; margin-top: 4px !important; } .round-arrow { width: 40px !important; height: 40px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; color: #fff !important; background: linear-gradient(135deg, var(--wine2, #a80c64), var(--wine, #7d0b54)) !important; font-size: 21px !important; line-height: 1 !important; flex-shrink: 0 !important; transition: transform .2s ease !important; } .quick-card:hover .round-arrow { transform: translateX(-4px) !important; } @media (max-width: 1000px) { .quick-links { grid-template-columns: 1fr !important; gap: 14px !important; } .quick-card { min-height: 82px !important; gap: 10px !important; padding: 13px 16px !important; } .quick-icon { width: 38px !important; height: 38px !important; font-size: 28px !important; } .quick-icon svg { width: 30px !important; height: 30px !important; } .quick-copy b { font-size: 16px !important; } .quick-copy small { font-size: 12px !important; } .quick-card .round-arrow { display: none !important; } #this-carousel-id .slider-arrow { display: none !important; } } /* ========================================================================== Offers Section (باقات سياحية مميزة / أهم البرامج والعروض) ========================================================================== */ .offers.section-shell { padding: 58px 0 50px !important; margin-inline: auto !important; width: min(1440px, calc(100% - 56px)) !important; direction: rtl; } section#content.sakkaf-home-content { background: var(--paper, #fffaf7) !important; padding: 0 !important; } .offers .section-heading { text-align: center !important; margin-bottom: 24px !important; } .offers .section-heading h2 { font-size: 34px !important; margin: 0 !important; font-weight: 800 !important; color: var(--purple, #311047) !important; font-family: "Cairo", Tahoma, Arial, sans-serif !important; } .offers .section-heading .heart { display: block !important; color: var(--gold, #c89432) !important; font-size: 15px !important; margin-top: 1px !important; line-height: 1 !important; } .offers .section-heading p { margin: 7px 0 0 !important; color: #67536f !important; font-size: 17px !important; font-family: "Cairo", Tahoma, Arial, sans-serif !important; } /* Category Tabs */ .offers .tabs { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; width: max-content !important; max-width: 100% !important; margin: 24px auto 32px !important; gap: 8px !important; background: #f7efec !important; border-radius: 40px !important; padding: 6px 8px !important; border: 1px solid #ebdcd5 !important; box-shadow: inset 0 2px 4px rgba(78, 41, 56, 0.04) !important; box-sizing: border-box !important; } .offers .tab { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: auto !important; min-height: 44px !important; line-height: 1.25 !important; letter-spacing: normal !important; border: 0 !important; background: transparent !important; border-radius: 30px !important; color: #4a3155 !important; padding: 10px 22px !important; cursor: pointer !important; transition: all 0.28s cubic-bezier(0.25, 1, 0.5, 1) !important; font-size: 15px !important; font-family: "Cairo", Tahoma, Arial, sans-serif !important; font-weight: 700 !important; white-space: nowrap !important; box-sizing: border-box !important; outline: none !important; box-shadow: none !important; position: relative !important; overflow: hidden !important; user-select: none !important; text-decoration: none !important; } .offers .tab:hover:not(.active) { color: var(--wine, #7d0b54) !important; background: rgba(125, 11, 84, 0.07) !important; transform: translateY(-1px) !important; } .offers .tab:active { transform: scale(0.96) !important; } .offers .tab.active { color: #ffffff !important; background: linear-gradient(135deg, var(--wine2, #a80c64), var(--wine, #7d0b54)) !important; box-shadow: 0 5px 18px rgba(125, 11, 84, 0.35) !important; transform: translateY(-1px) !important; animation: tabPillPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } @keyframes tabPillPop { 0% { transform: scale(0.92); } 60% { transform: scale(1.04); } 100% { transform: scale(1) translateY(-1px); } } /* Tab Panes & Transitions */ .offer-tab-pane { display: none; opacity: 0; transform: translateY(14px) scale(0.99); transition: opacity 0.25s cubic-bezier(0.2, 0.8, 0.25, 1), transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1); } .offer-tab-pane.active { display: block !important; opacity: 1 !important; transform: translateY(0) scale(1) !important; animation: tabPaneFadeIn 0.38s cubic-bezier(0.2, 0.8, 0.25, 1) forwards !important; } .offer-tab-pane.pane-leaving { display: block !important; opacity: 0 !important; transform: translateY(-10px) scale(0.99) !important; pointer-events: none !important; } @keyframes tabPaneFadeIn { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } } /* Staggered Card Reveal */ .offer-tab-pane.active .offer-card { animation: offerCardReveal 0.42s cubic-bezier(0.25, 1, 0.5, 1) backwards !important; } .offer-tab-pane.active .offer-card:nth-child(1) { animation-delay: 0.03s !important; } .offer-tab-pane.active .offer-card:nth-child(2) { animation-delay: 0.08s !important; } .offer-tab-pane.active .offer-card:nth-child(3) { animation-delay: 0.13s !important; } .offer-tab-pane.active .offer-card:nth-child(4) { animation-delay: 0.18s !important; } .offer-tab-pane.active .offer-card:nth-child(5) { animation-delay: 0.23s !important; } .offer-tab-pane.active .offer-card:nth-child(6) { animation-delay: 0.28s !important; } @keyframes offerCardReveal { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: translateY(0); } } /* Offer Grid */ .offers .offer-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 22px !important; } .offers .offer-card { background: #fff !important; border: 1px solid #eadfda !important; border-radius: 18px !important; overflow: hidden !important; box-shadow: var(--shadow, 0 8px 24px rgba(78, 41, 56, .10)) !important; transition: transform .25s ease, box-shadow .25s ease !important; display: flex !important; flex-direction: column !important; text-align: right !important; } .offers .offer-card:hover { transform: translateY(-5px) !important; box-shadow: 0 16px 36px rgba(78, 41, 56, .16) !important; } .offers .photo-wrap { position: relative !important; height: 270px !important; overflow: hidden !important; background: #eee !important; } .offers .photo-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .4s ease !important; } .offers .offer-card:hover .photo-wrap img { transform: scale(1.05) !important; } .offers .badge { position: absolute !important; top: 14px !important; right: 14px !important; color: #fff !important; background: linear-gradient(135deg, var(--wine2, #a80c64), var(--wine, #7d0b54)) !important; border-radius: 22px !important; padding: 7px 14px !important; font-size: 13px !important; font-weight: 700 !important; box-shadow: 0 3px 12px rgba(0, 0, 0, .20) !important; z-index: 2 !important; display: inline-flex !important; align-items: center !important; letter-spacing: 0 !important; } .offers .offer-body { padding: 16px 18px 18px !important; display: flex !important; flex-direction: column !important; flex-grow: 1 !important; } .offers .offer-body h3 { text-align: center !important; margin: 0 0 7px !important; font-size: 22px !important; font-weight: 800 !important; color: var(--purple, #311047) !important; line-height: 1.35 !important; font-family: "Cairo", Tahoma, Arial, sans-serif !important; } .offers .offer-body h3 a { color: inherit !important; text-decoration: none !important; transition: color .2s ease !important; } .offers .offer-body h3 a:hover { color: var(--wine, #7d0b54) !important; } .offers .type-pill { display: block !important; width: max-content !important; max-width: 100% !important; margin: 0 auto 12px !important; color: #fff !important; background: linear-gradient(135deg, var(--wine2, #a80c64), var(--wine, #7d0b54)) !important; padding: 4px 18px !important; border-radius: 20px !important; font-size: 13px !important; font-weight: 700 !important; box-shadow: 0 2px 8px rgba(125, 11, 84, .20) !important; text-align: center !important; } .offers .offer-body ul { list-style: none !important; padding: 0 !important; margin: 0 0 10px !important; border: 1px solid #f0e5df !important; border-radius: 12px !important; overflow: hidden !important; background: #faf7f5 !important; } .offers .offer-body li { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 38px !important; padding: 6px 14px !important; border-bottom: 1px solid #f3e9e4 !important; font-size: 14px !important; color: #493451 !important; direction: rtl !important; font-weight: 600 !important; } .offers .offer-body li:last-child { border-bottom: 0 !important; } .offers .offer-feat-icon { color: var(--wine, #7d0b54) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .offers .offer-feat-icon svg { stroke: var(--wine, #7d0b54) !important; } .offers .price { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding: 12px 0 10px !important; margin-top: auto !important; } .offers .price::before, .offers .price::after { content: "" !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 54px !important; height: 54px !important; background-size: contain !important; background-repeat: no-repeat !important; opacity: 0.16 !important; pointer-events: none !important; } .offers .price::before { right: 6px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23c89432' stroke-width='3'%3E%3Cpath d='M50 50 C20 20 20 80 50 50 C80 20 80 80 50 50 M50 50 C20 50 20 80 50 50 C80 50 80 80 50 50'/%3E%3Ccircle cx='50' cy='50' r='10'/%3E%3C/svg%3E") !important; } .offers .price::after { left: 6px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23c89432' stroke-width='3'%3E%3Cpath d='M50 50 C20 20 20 80 50 50 C80 20 80 80 50 50 M50 50 C20 50 20 80 50 50 C80 50 80 80 50 50'/%3E%3Ccircle cx='50' cy='50' r='10'/%3E%3C/svg%3E") !important; } .offers .price small { font-size: 12px !important; color: #7a667e !important; font-weight: 700 !important; display: flex !important; align-items: center !important; gap: 4px !important; } .offers .price small .price-tag-icon { color: var(--gold, #c89432) !important; font-size: 13px !important; } .offers .price strong { font-size: 38px !important; line-height: 1.1 !important; color: var(--wine, #7d0b54) !important; font-weight: 800 !important; letter-spacing: -0.5px !important; } .offers .price span { font-size: 13px !important; color: #472c50 !important; font-weight: 700 !important; margin-top: 1px !important; } .offers .details-btn { display: flex !important; align-items: center !important; justify-content: space-between !important; color: #fff !important; background: linear-gradient(135deg, var(--wine2, #a80c64), var(--wine, #7d0b54)) !important; padding: 12px 20px !important; border-radius: 25px !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: 0 4px 14px rgba(125, 11, 84, .25) !important; transition: transform .2s ease, box-shadow .2s ease !important; direction: rtl !important; } .offers .details-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 22px rgba(125, 11, 84, .35) !important; color: #fff !important; } .offers .details-btn b { color: #f3bf52 !important; font-size: 20px !important; line-height: 1 !important; transition: transform .2s ease !important; } .offers .details-btn:hover b { transform: translateX(-4px) !important; } .offers .more-btn, .destinations .more-btn, .services-section .more-btn { margin: 30px auto 0 !important; width: max-content !important; max-width: 100% !important; display: flex !important; gap: 16px !important; align-items: center !important; justify-content: center !important; color: #9a661d !important; border: 1px solid #caa56c !important; background: #fff !important; border-radius: 28px !important; padding: 12px 34px !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: 0 3px 12px rgba(202, 148, 50, .10) !important; transition: all .2s ease !important; direction: rtl !important; } .offers .more-btn:hover, .destinations .more-btn:hover, .services-section .more-btn:hover { background: #fff9f4 !important; border-color: #b98f51 !important; color: #7e5214 !important; box-shadow: 0 6px 18px rgba(202, 148, 50, .20) !important; transform: translateY(-2px) !important; } .offers .more-btn b, .destinations .more-btn b, .services-section .more-btn b { font-size: 18px !important; color: #c89432 !important; line-height: 1 !important; transition: transform .2s ease !important; } .offers .more-btn:hover b, .destinations .more-btn:hover b, .services-section .more-btn:hover b { transform: translateX(-4px) !important; } @media (max-width: 1000px) { .offers.section-shell { width: calc(100% - 32px) !important; } .offers .tabs { width: 100% !important; max-width: 760px !important; border-radius: 26px !important; justify-content: center !important; padding: 6px 8px !important; gap: 7px !important; } .offers .tab { padding: 8px 18px !important; font-size: 14.5px !important; min-height: 40px !important; } .offers .offer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } .offers .offer-card:last-child { grid-column: 1 / -1 !important; max-width: 520px !important; width: 100% !important; justify-self: center !important; } } @media (max-width: 720px) { .offers.section-shell { width: calc(100% - 24px) !important; padding: 36px 0 40px !important; } .offers .section-heading h2 { font-size: 26px !important; } .offers .section-heading p { font-size: 14px !important; } .offers .tabs { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; justify-content: flex-start !important; border-radius: 999px !important; padding: 5px 8px !important; gap: 6px !important; margin: 18px auto 22px !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } .offers .tabs::-webkit-scrollbar { display: none !important; } .offers .tab { flex-shrink: 0 !important; white-space: nowrap !important; padding: 8px 16px !important; font-size: 13.5px !important; min-height: 38px !important; height: auto !important; line-height: 1.25 !important; } .offers .offer-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .offers .offer-card:last-child { grid-column: auto !important; max-width: none !important; } .offers .photo-wrap { height: 220px !important; } .offers .price strong { font-size: 32px !important; } } /* ========================================================================== Destinations Section (وجهات السقاف السياحية) ========================================================================== */ .destinations { position: relative; padding: 55px 0 70px; background: radial-gradient(circle at 18% 32%, rgba(202, 148, 50, .05), transparent 20%), linear-gradient(180deg, #fffaf7 0%, #fffdfb 100%); border-top: 1px solid #f2e9e4; overflow: hidden; } .dest-bg-map { position: absolute; top: 0; left: 0; right: 0; height: 420px; background-image: url('../images/global-map2.png'); background-repeat: no-repeat; background-position: center top -10px; background-size: 1150px auto; opacity: 0.12; pointer-events: none; mix-blend-mode: multiply; } .destination-heading { position: relative; text-align: center; margin-bottom: 28px; z-index: 2; } .dest-flight-path { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: min(960px, 94%); height: 90px; pointer-events: none; overflow: visible; z-index: 1; } .dest-arc-svg { width: 100%; height: 100%; } .dest-airplane { position: absolute; top: 24px; right: 73%; transform: rotate(34deg); font-size: 28px; color: #caa56c; line-height: 1; filter: drop-shadow(0 2px 4px rgba(202, 165, 108, .35)); } .destination-heading h2 { font-family: "Cairo", Tahoma, Arial, sans-serif !important; font-size: 34px !important; font-weight: 800 !important; color: #311047 !important; margin: 0 !important; line-height: 1.3 !important; position: relative; z-index: 2; } .dest-heading-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px auto 10px; position: relative; z-index: 2; } .dest-heading-divider .heart { display: inline-block; color: #c89432 !important; font-size: 16px !important; line-height: 1 !important; } .dest-heading-divider .dest-line { display: inline-block; width: 48px; height: 1px; background: #ecd8c8; } .destination-heading p { margin: 0 !important; color: #67536f !important; font-size: 17px !important; font-weight: 500 !important; position: relative; z-index: 2; } .destination-heading h4 { margin: 10px 0 0 !important; color: #b21b41 !important; font-size: 19px !important; font-weight: 800 !important; position: relative; z-index: 2; } .dest-heading-title-wrap { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 6px; } .dest-heading-line { display: inline-block; width: 48px; height: 2px; background: #caa56c; border-radius: 2px; } .destination-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; position: relative; z-index: 2; } .destination-card { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); direction: ltr; min-height: 180px; min-width: 0; background: #ffffff; border: 1px solid #eadfda; border-radius: 18px; box-shadow: 0 8px 24px rgba(78, 41, 56, .08); padding: 10px; align-items: center; gap: 12px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .destination-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(78, 41, 56, .14); border-color: #dcc2b5; } .dest-card-media { width: 100%; height: 100%; } .destination-card img { width: 100%; height: 100%; min-height: 165px; max-height: 190px; object-fit: cover; border-radius: 13px; display: block; } .dest-card-body, .destination-card > div { direction: rtl; padding: 8px 16px 8px 8px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: right; width: 100%; min-width: 0; } .dest-card-header { display: flex; align-items: center; justify-content: flex-start; gap: 7px; margin-bottom: 4px; } .dest-pin { color: #990d5d; font-size: 18px; line-height: 1; } .destination-card h3 { font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: 26px !important; font-weight: 800 !important; margin: 0 !important; color: #311047 !important; line-height: 1.2 !important; min-width: 0; max-width: 100%; } .dest-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 14px; } .dest-tag { display: inline-block; background: #fdf2f7; color: #8c1b5a; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; line-height: 1.35; } .dest-card-btn, .destination-card a { width: max-content !important; max-width: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: #ffffff !important; color: #990d5d !important; border: 1.5px solid #990d5d !important; border-radius: 25px !important; padding: 8px 20px !important; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; transition: all .2s ease !important; min-width: 0; box-sizing: border-box; } .dest-card-btn:hover, .destination-card a:hover { background: #990d5d !important; color: #ffffff !important; border-color: #990d5d !important; transform: translateY(-2px); } .dest-card-btn .fa, .destination-card a .fa { font-size: 10px !important; color: inherit !important; margin: 0 !important; padding: 0 !important; } /* Mobile & Tablet Destinations Layout: 2 Cards Side-by-Side */ @media (max-width: 991px) { .dest-flight-path, .dest-heading-divider, .destination-heading h4 { display: none !important; } .dest-heading-title-wrap { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; margin-bottom: 4px !important; } .dest-heading-line { display: inline-block !important; width: clamp(24px, 6vw, 44px) !important; height: 2px !important; background: #caa56c !important; border-radius: 2px !important; } .destination-heading h2 { font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: clamp(20px, 4.8vw, 28px) !important; font-weight: 800 !important; color: #b58032 !important; margin: 0 !important; } .destination-heading p { color: #677489 !important; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: clamp(12px, 3.2vw, 14.5px) !important; margin: 4px auto 0 !important; } .destination-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(8px, 2.5vw, 16px) !important; margin-top: 18px !important; width: 100% !important; direction: rtl !important; } .destination-card { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; direction: rtl !important; background: #ffffff !important; border: 1px solid #ebdbe4 !important; border-radius: 14px !important; box-shadow: 0 4px 16px rgba(78, 41, 56, 0.06) !important; padding: clamp(6px, 1.8vw, 10px) !important; min-height: 0 !important; height: 100% !important; box-sizing: border-box !important; overflow: hidden !important; margin: 0 !important; width: 100% !important; } .dest-card-media { width: 100% !important; height: auto !important; border-radius: 10px !important; overflow: hidden !important; margin-bottom: 6px !important; } .destination-card img { width: 100% !important; height: clamp(100px, 28vw, 145px) !important; min-height: 0 !important; max-height: none !important; object-fit: cover !important; border-radius: 10px !important; display: block !important; } .dest-card-body, .destination-card > div { display: flex !important; flex-direction: column !important; flex: 1 !important; justify-content: space-between !important; align-items: stretch !important; padding: 2px 2px 0 !important; width: 100% !important; text-align: right !important; } .dest-card-header { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 5px !important; margin-bottom: 4px !important; } .dest-pin { color: #990d5d !important; font-size: clamp(14px, 3.8vw, 17px) !important; line-height: 1 !important; } .destination-card h3 { font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: clamp(15px, 3.8vw, 18px) !important; font-weight: 800 !important; color: #311047 !important; margin: 0 !important; line-height: 1.2 !important; } .dest-tags { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 4px !important; margin: 2px 0 8px !important; } .dest-tag { background: #fdf3f7 !important; color: #8c1b5a !important; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: clamp(9px, 2.3vw, 10.5px) !important; font-weight: 600 !important; padding: 2.5px 6.5px !important; border-radius: 999px !important; line-height: 1.3 !important; white-space: nowrap !important; } .dest-card-btn, .destination-card a { display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: 100% !important; max-width: 100% !important; background: #ffffff !important; border: 1.5px solid #990d5d !important; border-radius: 9999px !important; color: #990d5d !important; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: clamp(9.5px, 2.4vw, 11.5px) !important; font-weight: 700 !important; padding: 5px 6px !important; min-height: 32px !important; margin-top: auto !important; text-align: center !important; white-space: normal !important; line-height: 1.35 !important; box-sizing: border-box !important; text-decoration: none !important; } .dest-card-btn span, .destination-card a span { min-width: 0 !important; overflow-wrap: anywhere !important; } .dest-card-btn:hover, .destination-card a:hover { background: #990d5d !important; color: #ffffff !important; border-color: #990d5d !important; } .dest-card-btn .fa, .destination-card a .fa { font-size: 9px !important; color: inherit !important; } } @media (min-width: 768px) and (max-width: 991px) { .destination-card img { height: clamp(140px, 18vw, 175px) !important; } .destination-card h3 { font-size: 20px !important; } .dest-pin { font-size: 18px !important; } .dest-tag { font-size: 11.5px !important; padding: 3px 8px !important; } .dest-card-btn, .destination-card a { font-size: 12.5px !important; min-height: 36px !important; padding: 7px 12px !important; } } @media (max-width: 720px) { .destinations { padding: 32px 0 40px !important; } } /* ========================================================================== Services Section (اختر خدمتك السياحية) ========================================================================== */ .services-section { position: relative; padding: 50px 0 65px; background: radial-gradient(circle at 82% 20%, rgba(202, 148, 50, .05), transparent 25%), linear-gradient(180deg, #fffdfb 0%, #fff8f4 100%); border-top: 1px solid #f2e9e4; overflow: hidden; } .services-flight-bg { position: absolute; top: 10px; left: 4%; width: min(420px, 32vw); height: 120px; pointer-events: none; z-index: 1; } .services-flight-bg svg { width: 100%; height: 100%; } .services-airplane { position: absolute; top: 48px; right: 22px; font-size: 28px; color: #caa56c; line-height: 1; transform: rotate(-18deg); filter: drop-shadow(0 2px 4px rgba(202, 165, 108, .35)); } .services-skyline-bg { position: absolute; top: 0; right: 3%; width: min(340px, 28vw); height: 160px; pointer-events: none; z-index: 1; } .services-skyline-bg svg { width: 100%; height: 100%; } .services-heading { position: relative; text-align: center; margin-bottom: 30px; z-index: 2; } .services-heading h2 { font-family: "Cairo", Tahoma, Arial, sans-serif !important; font-size: 34px !important; font-weight: 800 !important; color: #311047 !important; margin: 0 !important; line-height: 1.3 !important; } .services-ornament { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px auto 10px; color: #c89432; } .services-ornament span { display: block; width: 38px; height: 1px; background: #c89432; } .services-ornament i { font-style: normal; font-size: 11px; line-height: 1; color: #c89432; } .services-heading p { margin: 0 !important; color: #67536f !important; font-size: 16.5px !important; font-weight: 500 !important; } .services-heading-title-wrap { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 6px; } .services-heading-line { display: inline-block; width: 48px; height: 2px; background: #7d0b54; border-radius: 2px; } .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; position: relative; z-index: 2; } .service-card { display: grid; grid-template-columns: 44% 56%; direction: ltr; min-height: 180px; background: #ffffff; border: 1px solid #eadfda; border-radius: 18px; box-shadow: 0 8px 24px rgba(78, 41, 56, .08); padding: 10px; align-items: center; gap: 12px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .service-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(78, 41, 56, .14); border-color: #dcc2b5; } .service-media { width: 100%; height: 100%; border-radius: 12px; overflow: hidden; display: flex; } .service-card img { width: 100%; height: 100%; min-height: 165px; max-height: 190px; object-fit: cover; border-radius: 13px; display: block; } .service-content { direction: rtl; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: 100%; height: 100%; } .service-icon.pink-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fde5ef; color: #a70b67; font-size: 20px; margin: 0 auto 6px auto; transition: transform .2s ease, background-color .2s ease; } .service-card:hover .service-icon.pink-icon { transform: scale(1.08); background: #fcd4e5; } .service-content h3 { font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: 19px !important; font-weight: 800 !important; margin: 0 0 6px 0 !important; color: #311047 !important; line-height: 1.25 !important; text-align: center !important; } .service-content p { margin: 0 0 14px 0 !important; color: #67536f !important; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.45 !important; text-align: center !important; } .service-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; color: #990d5d !important; border: 1.5px solid #990d5d !important; border-radius: 9999px !important; padding: 7px 22px !important; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; transition: all .2s ease !important; white-space: nowrap !important; } .service-btn:hover { background: #990d5d !important; color: #ffffff !important; border-color: #990d5d !important; transform: translateY(-2px); } /* Mobile & Tablet Services Layout: 2 Cards Side-by-Side */ @media (max-width: 991px) { .services-flight-bg, .services-skyline-bg, .services-ornament { display: none !important; } .services-heading-title-wrap { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; margin-bottom: 4px !important; } .services-heading-line { display: inline-block !important; width: clamp(24px, 6vw, 44px) !important; height: 2px !important; background: #7d0b54 !important; border-radius: 2px !important; } .services-heading h2 { font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: clamp(20px, 4.8vw, 28px) !important; font-weight: 800 !important; color: #4a0b38 !important; margin: 0 !important; } .services-heading p { color: #677489 !important; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: clamp(12px, 3.2vw, 14.5px) !important; margin: 4px auto 0 !important; } .services-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(8px, 2vw, 14px) !important; margin-top: 18px !important; width: 100% !important; direction: rtl !important; } .service-card { display: grid !important; grid-template-columns: 42% 58% !important; direction: ltr !important; background: #ffffff !important; border: 1px solid #ebdbe4 !important; border-radius: 14px !important; box-shadow: 0 4px 16px rgba(78, 41, 56, 0.05) !important; padding: clamp(5px, 1.4vw, 8px) !important; gap: clamp(4px, 1.2vw, 8px) !important; min-height: 0 !important; height: 100% !important; box-sizing: border-box !important; overflow: hidden !important; margin: 0 !important; width: 100% !important; align-items: stretch !important; } .service-media { width: 100% !important; height: 100% !important; border-radius: 10px !important; overflow: hidden !important; display: flex !important; } .service-card img { width: 100% !important; height: 100% !important; min-height: clamp(125px, 34vw, 180px) !important; max-height: none !important; object-fit: cover !important; border-radius: 10px !important; display: block !important; } .service-content { direction: rtl !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; align-items: center !important; text-align: center !important; padding: 4px 2px !important; height: 100% !important; box-sizing: border-box !important; width: 100% !important; } .service-icon.pink-icon { width: clamp(28px, 6.5vw, 38px) !important; height: clamp(28px, 6.5vw, 38px) !important; border-radius: 50% !important; background: #fdf0f5 !important; color: #990d5d !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: clamp(13px, 3vw, 17px) !important; margin: 0 auto 3px auto !important; flex-shrink: 0 !important; } .service-content h3 { font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: clamp(11px, 2.5vw, 14.5px) !important; font-weight: 800 !important; color: #311047 !important; margin: 0 0 3px 0 !important; line-height: 1.25 !important; text-align: center !important; } .service-content p { color: #677489 !important; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: clamp(8.5px, 2vw, 11.5px) !important; font-weight: 500 !important; line-height: 1.32 !important; margin: 0 0 6px 0 !important; text-align: center !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .service-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 110px !important; background: #ffffff !important; color: #990d5d !important; border: 1.5px solid #990d5d !important; border-radius: 9999px !important; padding: clamp(3px, 1vw, 5px) clamp(4px, 1.5vw, 10px) !important; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: clamp(9px, 2.2vw, 11.5px) !important; font-weight: 700 !important; text-decoration: none !important; margin-top: auto !important; white-space: nowrap !important; box-sizing: border-box !important; text-align: center !important; } .service-btn:hover { background: #990d5d !important; color: #ffffff !important; border-color: #990d5d !important; } } @media (min-width: 768px) and (max-width: 991px) { .service-card { padding: 10px !important; gap: 12px !important; } .service-card img { min-height: 170px !important; } .service-icon.pink-icon { width: 42px !important; height: 42px !important; font-size: 19px !important; } .service-content h3 { font-size: 17px !important; } .service-content p { font-size: 13px !important; } .service-btn { font-size: 13px !important; max-width: 140px !important; padding: 6px 14px !important; } } @media (max-width: 720px) { .services-section { padding: 32px 0 40px !important; } } /* ========================================================================== Why Choose Us Section (لماذا السقاف للسياحة والسفر؟) ========================================================================== */ .why-section { position: relative; padding: 55px 0 70px; background: #faf7f4; border-top: 1px solid #f0e6e0; overflow: hidden; } .why-heading { text-align: center; margin-bottom: 28px; position: relative; z-index: 2; } .why-title-wrap { display: inline-flex; align-items: center; justify-content: center; gap: clamp(10px, 2.5vw, 22px); width: 100%; margin: 0 0 6px; } .why-decor-line { display: inline-block; width: clamp(26px, 5vw, 48px); height: 1.5px; background: #b57a22; border-radius: 2px; flex-shrink: 0; } .why-heading h2 { font-family: "Cairo", "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif !important; font-size: clamp(22px, 3.5vw, 34px) !important; font-weight: 800 !important; color: #b57a22 !important; margin: 0 !important; line-height: 1.3 !important; text-align: center; } .why-heading p { margin: 0 !important; color: #626e84 !important; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: clamp(12.5px, 2vw, 16px) !important; font-weight: 500 !important; line-height: 1.55 !important; text-align: center; } .why-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 25px; position: relative; z-index: 2; direction: rtl; box-sizing: border-box; } /* Base Card Surface (Desktop default) */ html body #sakkaf-why .why-card, html body .why-card { background: #ffffff !important; border: 1px solid #ebdfe6 !important; border-radius: 16px !important; padding: 26px 14px 22px !important; text-align: center !important; box-shadow: 0 4px 16px rgba(78, 41, 56, 0.05) !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; box-sizing: border-box !important; min-width: 0 !important; height: 100% !important; } .why-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 28px rgba(78, 41, 56, 0.12) !important; border-color: #d6b8c8 !important; } .why-icon { width: 54px !important; height: 54px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 14px !important; flex-shrink: 0 !important; transition: transform .25s ease, background-color .25s ease !important; } .why-icon.why-icon-gold { background: #fdf1e7 !important; color: #b87a20 !important; } .why-icon.why-icon-magenta { background: #fceaf0 !important; color: #7a1747 !important; } .why-card:hover .why-icon { transform: scale(1.08) !important; } .why-icon svg { width: 26px !important; height: 26px !important; display: block !important; } .why-card h3 { font-family: "Cairo", "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif !important; font-size: 17px !important; font-weight: 800 !important; color: #421327 !important; margin: 0 0 8px !important; line-height: 1.35 !important; text-align: center !important; word-break: normal !important; overflow-wrap: break-word !important; } .why-card p { font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; font-size: 13px !important; color: #6a7587 !important; line-height: 1.5 !important; margin: 0 !important; text-align: center !important; word-break: normal !important; overflow-wrap: break-word !important; } /* ========================================================================== Mobile & Tablet Mode (< 992px) - Row 1: Exactly 3 cards side by side (span 2 of 6 columns) - Row 2: 4th & 5th cards under them, occupying the EXACT same total width (span 3 of 6 columns) ========================================================================== */ @media (max-width: 991px) { .why-section { padding: 32px 0 42px !important; background: #faf7f4 !important; } .why-heading { margin-bottom: 20px !important; } .why-title-wrap { gap: clamp(8px, 2.2vw, 16px) !important; margin-bottom: 5px !important; } .why-decor-line { width: clamp(20px, 4.5vw, 36px) !important; height: 1.5px !important; background: #b57a22 !important; } .why-heading h2 { font-size: clamp(20px, 4.8vw, 26px) !important; color: #b57a22 !important; } .why-heading p { font-size: clamp(12px, 2.8vw, 14.5px) !important; color: #626e84 !important; line-height: 1.45 !important; } .why-grid { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: clamp(6px, 1.8vw, 12px) !important; margin-top: 18px !important; width: 100% !important; direction: rtl !important; } /* Row 1: First 3 cards side by side */ .why-card:nth-child(1), .why-card:nth-child(2), .why-card:nth-child(3) { grid-column: span 2 !important; max-width: 100% !important; margin: 0 !important; width: 100% !important; } /* Row 2: 4th & 5th cards under them spanning the exact same total width */ .why-card:nth-child(4), .why-card:nth-child(5) { grid-column: span 3 !important; max-width: 100% !important; margin: 0 !important; width: 100% !important; } html body #sakkaf-why .why-card, html body .why-card { padding: clamp(12px, 2vw, 18px) clamp(5px, 1.2vw, 10px) clamp(12px, 2.2vw, 18px) !important; border-radius: 14px !important; border: 1px solid #ebdbe4 !important; box-shadow: 0 4px 16px rgba(78, 41, 56, 0.05) !important; } .why-icon { width: clamp(38px, 8.5vw, 48px) !important; height: clamp(38px, 8.5vw, 48px) !important; margin-bottom: clamp(8px, 1.6vw, 12px) !important; } .why-icon svg { width: clamp(19px, 4.2vw, 24px) !important; height: clamp(19px, 4.2vw, 24px) !important; } .why-card h3 { font-size: clamp(11px, 2.6vw, 14.5px) !important; margin: 0 0 clamp(3px, 0.8vw, 6px) !important; line-height: 1.3 !important; } .why-card p { font-size: clamp(9px, 2.1vw, 11.5px) !important; line-height: 1.4 !important; } } @media (min-width: 768px) and (max-width: 991px) { .why-card h3 { font-size: 15.5px !important; } .why-card p { font-size: 12.5px !important; } .why-icon { width: 50px !important; height: 50px !important; } .why-icon svg { width: 25px !important; height: 25px !important; } } @media (max-width: 360px) { .why-grid { gap: 5px !important; } html body #sakkaf-why .why-card, html body .why-card { padding: 10px 4px 12px !important; border-radius: 12px !important; } .why-icon { width: 36px !important; height: 36px !important; margin-bottom: 6px !important; } .why-icon svg { width: 18px !important; height: 18px !important; } .why-card h3 { font-size: 10.5px !important; } .why-card p { font-size: 8.5px !important; line-height: 1.35 !important; } } /* ========================================================================== Sakkaf Luxury Navigation Drawer (Desktop, Tablet & Mobile) ========================================================================== */ #mobile-menu-01.sakkaf-mobile-menu { position: fixed !important; inset: 0 !important; z-index: 100001 !important; display: block !important; width: 100vw !important; height: 100dvh !important; min-height: 100vh !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), visibility 0s linear 0.3s; direction: rtl !important; box-sizing: border-box !important; background: transparent !important; } #mobile-menu-01.sakkaf-mobile-menu.in, #mobile-menu-01.sakkaf-mobile-menu.is-open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transition-delay: 0s !important; } body.sakkaf-mobile-menu-open { overflow: hidden !important; } #mobile-menu-01 .sakkaf-mobile-menu-backdrop { position: absolute !important; inset: 0 !important; background: rgba(31, 10, 44, 0.48) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; cursor: pointer !important; opacity: 0; transition: opacity 0.35s ease !important; } #mobile-menu-01.sakkaf-mobile-menu.in .sakkaf-mobile-menu-backdrop, #mobile-menu-01.sakkaf-mobile-menu.is-open .sakkaf-mobile-menu-backdrop { opacity: 1 !important; } #mobile-menu-01 .sakkaf-mobile-menu-panel { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; display: flex !important; flex-direction: column !important; width: min(100vw, 420px) !important; height: 100% !important; max-height: 100dvh !important; margin: 0 !important; background: linear-gradient(180deg, #ffffff 0%, #fffaf7 100%) !important; border-left: 1px solid #ebdcd5 !important; border-right: 0 !important; border-top: 0 !important; border-bottom: 0 !important; box-shadow: -15px 0 45px rgba(49, 16, 71, 0.18) !important; padding: 24px 22px 20px !important; box-sizing: border-box !important; direction: rtl !important; transform: translateX(100%) !important; transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1) !important; overflow: hidden !important; z-index: 2 !important; } #mobile-menu-01.sakkaf-mobile-menu.in .sakkaf-mobile-menu-panel, #mobile-menu-01.sakkaf-mobile-menu.is-open .sakkaf-mobile-menu-panel { transform: translateX(0) !important; } #mobile-menu-01 .sakkaf-mobile-menu-header { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex: 0 0 auto !important; padding-bottom: 18px !important; border-bottom: 1px solid #f0e4dd !important; margin: 0 !important; gap: 12px !important; } #mobile-menu-01 .sakkaf-drawer-brand { display: flex !important; align-items: center !important; gap: 12px !important; text-decoration: none !important; flex: 1 1 auto !important; min-width: 0 !important; } #mobile-menu-01 .sakkaf-drawer-logo { width: 46px !important; height: 46px !important; border-radius: 12px !important; object-fit: contain !important; flex-shrink: 0 !important; box-shadow: 0 4px 10px rgba(125, 11, 84, 0.12) !important; } #mobile-menu-01 .sakkaf-drawer-brand-text { display: flex !important; flex-direction: column !important; min-width: 0 !important; line-height: 1.25 !important; } #mobile-menu-01 .sakkaf-drawer-brand-text strong { font-family: "Cairo", Tahoma, Arial, sans-serif !important; font-size: 16px !important; font-weight: 800 !important; color: var(--purple, #311047) !important; } #mobile-menu-01 .sakkaf-drawer-brand-text span { font-size: 9.5px !important; font-weight: 700 !important; color: var(--gold, #c89432) !important; letter-spacing: 0.04em !important; } #mobile-menu-01 .sakkaf-drawer-brand-text small { font-size: 11px !important; color: #7d0b54 !important; font-weight: 600 !important; margin-top: 1px !important; } #mobile-menu-01 .sakkaf-mobile-menu-close { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; border: 1px solid #ebdcd5 !important; background: #f7efec !important; color: var(--wine, #7d0b54) !important; border-radius: 50% !important; font-size: 22px !important; line-height: 1 !important; cursor: pointer !important; flex-shrink: 0 !important; transition: all 0.25s ease !important; outline: none !important; box-shadow: none !important; } #mobile-menu-01 .sakkaf-mobile-menu-close:hover { background: var(--wine, #7d0b54) !important; color: #fff !important; border-color: var(--wine, #7d0b54) !important; transform: rotate(90deg) !important; } /* Eliminate ANY rogue dropdown-toggle white box artifacts from legacy scripts */ #mobile-menu-01 button.dropdown-toggle, #mobile-menu-01 .dropdown-toggle { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; pointer-events: none !important; } #mobile-menu-01 #mobile-primary-menu { position: relative !important; display: flex !important; flex-direction: column !important; gap: 8px !important; flex: 1 1 auto !important; min-height: 0 !important; margin: 14px 0 !important; padding: 4px 4px 20px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; list-style: none !important; } #mobile-menu-01 #mobile-primary-menu::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } #mobile-menu-01 #mobile-primary-menu > li { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; border: 0 !important; background: transparent !important; } #mobile-menu-01 #mobile-primary-menu > li > a { display: flex !important; align-items: center !important; gap: 12px !important; min-height: 52px !important; height: auto !important; padding: 8px 14px 8px 48px !important; background: #fbf7f5 !important; border: 1px solid #ebdcd5 !important; border-radius: 14px !important; color: var(--purple, #311047) !important; font-family: "Cairo", Tahoma, Arial, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important; text-decoration: none !important; transition: all 0.25s cubic-bezier(0.2, 0.8, 0.25, 1) !important; box-sizing: border-box !important; position: relative !important; } #mobile-menu-01 #mobile-primary-menu > li > a:hover { background: #f9ede7 !important; border-color: #d9b8a8 !important; color: var(--wine, #7d0b54) !important; transform: translateX(-3px) !important; } #mobile-menu-01 #mobile-primary-menu > li:first-child > a, #mobile-menu-01 #mobile-primary-menu > li.active > a { background: linear-gradient(135deg, var(--wine2, #a80c64), var(--wine, #7d0b54)) !important; border-color: transparent !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(125, 11, 84, 0.24) !important; } #mobile-menu-01 .sakkaf-mobile-menu-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 38px !important; width: 38px !important; height: 38px !important; border-radius: 10px !important; background: #ffffff !important; color: var(--wine, #7d0b54) !important; border: 1px solid #ebdcd5 !important; font-size: 16px !important; transition: all 0.25s ease !important; box-shadow: 0 2px 5px rgba(78, 41, 56, 0.04) !important; } #mobile-menu-01 .sakkaf-mobile-menu-icon i, #mobile-menu-01 .sakkaf-mobile-menu-icon .fa, #mobile-menu-01 .sakkaf-mobile-menu-icon svg { color: var(--wine, #7d0b54) !important; fill: currentColor !important; font-size: 16px !important; line-height: 1 !important; transition: color 0.25s ease, fill 0.25s ease !important; } #mobile-menu-01 .sakkaf-mobile-menu-icon svg { width: 18px !important; height: 18px !important; display: block !important; margin: auto !important; } #mobile-menu-01 #mobile-primary-menu > li > a:hover .sakkaf-mobile-menu-icon { background: var(--wine, #7d0b54) !important; color: #ffffff !important; border-color: var(--wine, #7d0b54) !important; } #mobile-menu-01 #mobile-primary-menu > li > a:hover .sakkaf-mobile-menu-icon i, #mobile-menu-01 #mobile-primary-menu > li > a:hover .sakkaf-mobile-menu-icon .fa { color: #ffffff !important; } #mobile-menu-01 #mobile-primary-menu > li:first-child > a .sakkaf-mobile-menu-icon, #mobile-menu-01 #mobile-primary-menu > li.active > a .sakkaf-mobile-menu-icon { background: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.3) !important; } #mobile-menu-01 #mobile-primary-menu > li:first-child > a .sakkaf-mobile-menu-icon i, #mobile-menu-01 #mobile-primary-menu > li:first-child > a .sakkaf-mobile-menu-icon .fa, #mobile-menu-01 #mobile-primary-menu > li.active > a .sakkaf-mobile-menu-icon i, #mobile-menu-01 #mobile-primary-menu > li.active > a .sakkaf-mobile-menu-icon .fa { color: #ffffff !important; } #mobile-menu-01 .sakkaf-mobile-menu-label { flex: 1 1 auto !important; text-align: right !important; } #mobile-menu-01 .sakkaf-mobile-submenu-toggle { position: absolute !important; top: 26px !important; left: 10px !important; transform: translateY(-50%) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; background: #f7efec !important; border: 1px solid #ebdcd5 !important; border-radius: 8px !important; color: var(--purple, #311047) !important; font-size: 15px !important; line-height: 1 !important; cursor: pointer !important; z-index: 3 !important; transition: all 0.25s ease !important; outline: none !important; } #mobile-menu-01 .sakkaf-mobile-submenu-toggle:hover { background: var(--wine, #7d0b54) !important; color: #fff !important; border-color: var(--wine, #7d0b54) !important; } #mobile-menu-01 .sakkaf-mobile-submenu-toggle:hover .sakkaf-submenu-arrow, #mobile-menu-01 .sakkaf-mobile-submenu-toggle:hover .sakkaf-submenu-arrow i { color: #ffffff !important; } #mobile-menu-01 #mobile-primary-menu > li:first-child > .sakkaf-mobile-submenu-toggle, #mobile-menu-01 #mobile-primary-menu > li.active > .sakkaf-mobile-submenu-toggle { background: rgba(255, 255, 255, 0.2) !important; border-color: rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; } #mobile-menu-01 #mobile-primary-menu > li:first-child > .sakkaf-mobile-submenu-toggle .sakkaf-submenu-arrow, #mobile-menu-01 #mobile-primary-menu > li:first-child > .sakkaf-mobile-submenu-toggle .sakkaf-submenu-arrow i, #mobile-menu-01 #mobile-primary-menu > li.active > .sakkaf-mobile-submenu-toggle .sakkaf-submenu-arrow, #mobile-menu-01 #mobile-primary-menu > li.active > .sakkaf-mobile-submenu-toggle .sakkaf-submenu-arrow i { color: #ffffff !important; } #mobile-menu-01 .sakkaf-submenu-arrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.25, 1) !important; font-size: 14px !important; color: var(--wine, #7d0b54) !important; } #mobile-menu-01 .sakkaf-submenu-arrow i { color: inherit !important; font-size: 14px !important; line-height: 1 !important; } #mobile-menu-01 .sakkaf-mobile-submenu-toggle[aria-expanded="true"] .sakkaf-submenu-arrow { transform: rotate(-90deg) !important; } #mobile-menu-01 ul.sakkaf-mobile-submenu { display: block !important; max-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 10px !important; border: 1px solid transparent !important; border-radius: 12px !important; background: #ffffff !important; opacity: 0 !important; visibility: hidden !important; list-style: none !important; transition: max-height 0.32s ease, opacity 0.22s ease, padding 0.32s ease, margin 0.32s ease, visibility 0s linear 0.32s !important; } #mobile-menu-01 ul.sakkaf-mobile-submenu.is-open { max-height: 600px !important; margin-top: 6px !important; margin-bottom: 4px !important; padding: 8px 10px !important; border-color: #ebdcd5 !important; box-shadow: inset 0 2px 6px rgba(78, 41, 56, 0.03) !important; opacity: 1 !important; visibility: visible !important; transition-delay: 0s !important; } #mobile-menu-01 ul.sakkaf-mobile-submenu > li { list-style: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #mobile-menu-01 ul.sakkaf-mobile-submenu > li > a { display: flex !important; align-items: center !important; padding: 9px 12px !important; color: #55465b !important; font-family: "Cairo", Tahoma, Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; text-decoration: none !important; border-bottom: 1px solid #f7efec !important; border-radius: 8px !important; transition: all 0.2s ease !important; } #mobile-menu-01 ul.sakkaf-mobile-submenu > li:last-child > a { border-bottom: 0 !important; } #mobile-menu-01 ul.sakkaf-mobile-submenu > li > a:hover { background: #fdf5f2 !important; color: var(--wine, #7d0b54) !important; padding-right: 18px !important; } #mobile-menu-01 ul.sakkaf-mobile-submenu > li > a::before { content: "•" !important; color: var(--gold, #c89432) !important; font-size: 18px !important; margin-left: 8px !important; line-height: 1 !important; } #mobile-menu-01 .sakkaf-mobile-menu-footer { flex: 0 0 auto !important; padding-top: 16px !important; border-top: 1px solid #f0e4dd !important; display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: auto !important; } #mobile-menu-01 .sakkaf-mobile-menu-wa { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 14px !important; background: #f0faf4 !important; border: 1px solid #ccecd8 !important; border-radius: 14px !important; text-decoration: none !important; transition: all 0.25s ease !important; } #mobile-menu-01 .sakkaf-mobile-menu-wa:hover { background: #25d366 !important; border-color: #25d366 !important; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3) !important; } #mobile-menu-01 .sakkaf-mobile-menu-wa:hover .sakkaf-menu-wa-text strong, #mobile-menu-01 .sakkaf-mobile-menu-wa:hover .sakkaf-menu-wa-text small { color: #ffffff !important; } #mobile-menu-01 .sakkaf-menu-wa-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; background: #25d366 !important; color: #fff !important; flex-shrink: 0 !important; } #mobile-menu-01 .sakkaf-mobile-menu-wa:hover .sakkaf-menu-wa-icon { background: #ffffff !important; color: #25d366 !important; } #mobile-menu-01 .sakkaf-menu-wa-text { display: flex !important; flex-direction: column !important; line-height: 1.25 !important; } #mobile-menu-01 .sakkaf-menu-wa-text strong { font-family: "Cairo", Tahoma, Arial, sans-serif !important; font-size: 15px !important; font-weight: 800 !important; color: #1e7e47 !important; direction: ltr !important; text-align: right !important; } #mobile-menu-01 .sakkaf-menu-wa-text small { font-size: 11px !important; color: #436e52 !important; font-weight: 600 !important; } #mobile-menu-01 .sakkaf-mobile-menu-socials { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; direction: ltr !important; } #mobile-menu-01 .sakkaf-mobile-menu-socials a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: #f7efec !important; border: 1px solid #ebdcd5 !important; color: var(--wine, #7d0b54) !important; font-size: 16px !important; text-decoration: none !important; transition: all 0.25s ease !important; } #mobile-menu-01 .sakkaf-mobile-menu-socials a:hover { background: var(--wine, #7d0b54) !important; color: #fff !important; border-color: var(--wine, #7d0b54) !important; transform: translateY(-2px) !important; } #mobile-menu-01 .sakkaf-drawer-copyright { text-align: center !important; font-size: 11px !important; color: #9c8998 !important; font-family: "Cairo", Tahoma, Arial, sans-serif !important; } @media (max-width: 767px) { #mobile-menu-01 .sakkaf-mobile-menu-panel { width: min(100vw, 380px) !important; padding: calc(10px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom)) !important; } #mobile-menu-01 .sakkaf-mobile-menu-header { padding-bottom: 10px !important; } #mobile-menu-01 .sakkaf-drawer-logo { width: 38px !important; height: 38px !important; } #mobile-menu-01 .sakkaf-drawer-brand-text strong { font-size: 14.5px !important; } #mobile-menu-01 .sakkaf-drawer-brand-text span { font-size: 8.5px !important; } #mobile-menu-01 .sakkaf-drawer-brand-text small { font-size: 10px !important; } #mobile-menu-01 .sakkaf-mobile-menu-close { width: 34px !important; height: 34px !important; min-height: 34px !important; font-size: 20px !important; } #mobile-menu-01 #mobile-primary-menu { gap: 5px !important; margin: 8px 0 !important; padding: 2px 2px 20px !important; scrollbar-width: none !important; } #mobile-menu-01 #mobile-primary-menu::-webkit-scrollbar { display: none !important; } #mobile-menu-01 #mobile-primary-menu > li > a { min-height: 42px !important; font-size: 13.5px !important; padding: 4px 10px 4px 38px !important; border-radius: 11px !important; } #mobile-menu-01 .sakkaf-mobile-submenu-toggle { top: 21px !important; width: 26px !important; height: 26px !important; min-height: 26px !important; left: 8px !important; border-radius: 6px !important; font-size: 13px !important; } #mobile-menu-01 .sakkaf-mobile-menu-icon { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; font-size: 13px !important; border-radius: 8px !important; } #mobile-menu-01 .sakkaf-mobile-menu-icon svg { width: 14px !important; height: 14px !important; } #mobile-menu-01 .sakkaf-mobile-menu-footer { padding-top: 8px !important; gap: 6px !important; } #mobile-menu-01 .sakkaf-mobile-menu-wa { padding: 6px 10px !important; gap: 8px !important; border-radius: 11px !important; } #mobile-menu-01 .sakkaf-menu-wa-icon { width: 30px !important; height: 30px !important; } #mobile-menu-01 .sakkaf-menu-wa-icon svg { width: 16px !important; height: 16px !important; } #mobile-menu-01 .sakkaf-menu-wa-text strong { font-size: 13.5px !important; } #mobile-menu-01 .sakkaf-menu-wa-text small { font-size: 10px !important; } #mobile-menu-01 .sakkaf-mobile-menu-socials a { width: 32px !important; height: 32px !important; font-size: 14px !important; } } /* ========================================================================== Testimonials Section (تجارب عملائنا تتحدث عنا) - Matching Exact Mockup ========================================================================== */ .testimonials-section { background: #fffaf6 !important; position: relative !important; padding: 50px 0 54px !important; overflow: hidden !important; direction: rtl !important; } .testimonials-quote-watermark { position: absolute !important; top: 15px !important; right: 5% !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 135px !important; line-height: 0.8 !important; color: #f7d5dc !important; opacity: 0.85 !important; pointer-events: none !important; user-select: none !important; z-index: 1 !important; } .testimonials-palm-watermark { position: absolute !important; bottom: 0 !important; left: 0 !important; pointer-events: none !important; user-select: none !important; opacity: 0.8 !important; z-index: 1 !important; overflow: hidden !important; } .testimonials-palm-watermark svg { display: block !important; } .testimonials-heading { text-align: center !important; margin-bottom: 28px !important; position: relative !important; z-index: 2 !important; } .testimonials-heading h2 { font-family: "Cairo", Tahoma, sans-serif !important; font-size: clamp(26px, 2.3vw, 36px) !important; font-weight: 800 !important; color: #391047 !important; margin: 0 0 6px !important; line-height: 1.25 !important; } .testimonials-ornament { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 16px !important; margin: 0 auto !important; color: #c89432 !important; } .testimonials-ornament span { display: block !important; width: 32px !important; height: 1px !important; background: #c89432 !important; } .testimonials-ornament i { font-style: normal !important; font-size: 9px !important; line-height: 1 !important; } .testimonials-heading p { margin: 8px 0 0 !important; color: #5e4566 !important; font-size: clamp(14px, 1.08vw, 17px) !important; font-weight: 600 !important; } .testimonials-layout { display: grid !important; grid-template-columns: 1.05fr 1.65fr !important; gap: 16px !important; align-items: stretch !important; position: relative !important; z-index: 2 !important; } /* Video Card (Right in RTL) */ .video-review { position: relative !important; border-radius: 16px !important; overflow: hidden !important; border: 1px solid #eadfda !important; background: #1b0e1f !important; box-shadow: 0 8px 24px rgba(71,33,53,0.08) !important; cursor: pointer !important; display: flex !important; align-items: stretch !important; min-height: 275px !important; } .video-review-thumb { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.4s ease !important; } .video-review:hover .video-review-thumb { transform: scale(1.025) !important; } .video-review-playing { cursor: default !important; } .video-review-playing iframe { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; } .video-play-btn { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 64px !important; height: 64px !important; border-radius: 50% !important; border: 4px solid #ffffff !important; background: linear-gradient(135deg, #b60d72, #7f0052) !important; color: #ffffff !important; display: grid !important; place-items: center !important; cursor: pointer !important; box-shadow: 0 6px 22px rgba(0,0,0,0.38) !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; z-index: 2 !important; padding: 0 !important; } .video-play-icon { font-size: 22px !important; line-height: 1 !important; display: inline-block !important; transform: translateX(-1.5px) !important; } .video-review:hover .video-play-btn { transform: translate(-50%, -50%) scale(1.09) !important; box-shadow: 0 8px 28px rgba(182,13,114,0.55) !important; } .video-caption-bar { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 12px 18px !important; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 65%, transparent 100%) !important; color: #ffffff !important; z-index: 2 !important; } .video-caption-text { font-size: 13.5px !important; font-weight: 600 !important; color: #ffffff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.7) !important; } .video-caption-time { font-size: 12.5px !important; font-weight: 700 !important; color: #ffffff !important; direction: ltr !important; display: inline-block !important; text-shadow: 0 1px 3px rgba(0,0,0,0.7) !important; } /* 3 Review Cards (Left in RTL) */ .review-cards { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; } .review-card { background: #ffffff !important; border: 1px solid #eadfda !important; border-radius: 16px !important; padding: 18px 16px 18px !important; box-shadow: 0 6px 20px rgba(65,30,47,0.06) !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; position: relative !important; min-height: 275px !important; } .review-card:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 26px rgba(65,30,47,0.11) !important; } .review-card-has-video { cursor: pointer !important; } .review-card-has-video:focus { outline: 3px solid rgba(182, 13, 114, .38) !important; outline-offset: 3px !important; } .review-person { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } .review-meta { display: flex !important; flex-direction: column !important; align-items: flex-start !important; } .review-meta h3 { margin: 0 0 3px !important; font-family: "Cairo", Tahoma, sans-serif !important; font-size: 18px !important; font-weight: 800 !important; color: #320e43 !important; line-height: 1.2 !important; } .review-country { display: flex !important; align-items: center !important; gap: 6px !important; color: #6e5677 !important; font-size: 12.5px !important; font-weight: 600 !important; } .flag-badge { display: inline-block !important; width: 20px !important; height: 14px !important; border-radius: 2px !important; background-size: cover !important; background-position: center !important; box-shadow: 0 1px 3px rgba(0,0,0,0.18) !important; border: 1px solid rgba(0,0,0,0.06) !important; flex-shrink: 0 !important; } .flag-sa { background-color: #006c35 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' rx='2' fill='%23006c35'/%3E%3Cpath d='M4.5 6.5h15M5.5 8.5h13M7.5 11l9-0.5' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") !important; } .flag-eg { background-color: #ffffff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' rx='2' fill='%23ffffff'/%3E%3Crect width='24' height='5.33' rx='2' fill='%23ce1126'/%3E%3Crect y='10.67' width='24' height='5.33' rx='2' fill='%23000000'/%3E%3Ccircle cx='12' cy='8' r='1.5' fill='%23c09300'/%3E%3C/svg%3E") !important; } .flag-generic { background: linear-gradient(135deg, #d5a76e, #8c5d13) !important; } .review-avatar { width: 58px !important; height: 58px !important; border-radius: 50% !important; object-fit: cover !important; border: 2.5px solid #ddbb83 !important; padding: 2px !important; background: #ffffff !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; flex-shrink: 0 !important; } .review-stars { color: #e59d1a !important; letter-spacing: 2px !important; font-size: 15px !important; text-align: center !important; margin: 12px 0 6px !important; user-select: none !important; } .review-text-wrap { position: relative !important; padding: 0 10px !important; margin-top: 6px !important; flex-grow: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .review-text { margin: 0 !important; color: #3e1b48 !important; font-size: 13.5px !important; line-height: 1.65 !important; font-weight: 500 !important; text-align: center !important; font-family: "Cairo", Tahoma, sans-serif !important; } .review-quote-right { position: absolute !important; top: 6px !important; right: 6px !important; color: #d5a76e !important; font-family: Georgia, serif !important; font-size: 26px !important; line-height: 1 !important; font-weight: 700 !important; user-select: none !important; } .review-quote-left { position: absolute !important; bottom: 18px !important; left: 6px !important; color: #d5a76e !important; font-family: Georgia, serif !important; font-size: 26px !important; line-height: 1 !important; font-weight: 700 !important; user-select: none !important; } .review-video-hint { align-self: center !important; margin-top: 10px !important; color: #a50061 !important; font-size: 12px !important; font-weight: 700 !important; } /* Bottom Button */ .testimonials-btn-wrap { text-align: center !important; margin-top: 32px !important; position: relative !important; z-index: 2 !important; } .testimonials-more-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 22px !important; background: #ffffff !important; border: 1.5px solid #dcb581 !important; border-radius: 30px !important; padding: 10px 48px !important; color: #b37e28 !important; font-family: "Cairo", Tahoma, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: 0 2px 10px rgba(220,181,129,0.12) !important; transition: all 0.25s ease !important; } .testimonials-more-btn:hover, .testimonials-more-btn:focus { background: #ffffff !important; border-color: #c89432 !important; color: #8c5d13 !important; transform: translateY(-2px) !important; box-shadow: 0 5px 16px rgba(200,148,50,0.22) !important; text-decoration: none !important; } .testimonials-arrow { font-size: 22px !important; line-height: 1 !important; color: #b37e28 !important; transition: transform 0.25s ease !important; display: inline-block !important; } .testimonials-more-btn:hover .testimonials-arrow { transform: translateX(-4px) !important; } /* Responsive */ @media (max-width: 1024px) { .testimonials-layout { grid-template-columns: 1fr !important; } .video-review { max-width: 620px !important; width: 100% !important; margin: 0 auto !important; min-height: 290px !important; } .review-cards { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; } } @media (max-width: 760px) { .testimonials-section { padding: 36px 0 42px !important; } .testimonials-quote-watermark { display: none !important; } .testimonials-palm-watermark svg { width: 100px !important; height: 100px !important; } .testimonials-layout { grid-template-columns: 1fr !important; gap: 16px !important; } .video-review { min-height: 220px !important; max-width: 100% !important; } .review-cards { grid-template-columns: 1fr !important; gap: 12px !important; } .review-card { min-height: auto !important; padding: 16px 14px !important; } .testimonials-more-btn { padding: 9px 26px !important; font-size: 13.5px !important; gap: 14px !important; } } /* ========================================================================== Guide Section (دليل ماليزيا السياحي) - Matching Exact Mockup ========================================================================== */ .guide-section { background: #faf7f4 !important; position: relative !important; padding: 50px 0 56px !important; overflow: hidden !important; direction: rtl !important; border-top: 1px solid #f0e6e0; } .guide-hibiscus-watermark { position: absolute !important; bottom: -15px !important; left: -15px !important; pointer-events: none !important; user-select: none !important; opacity: 0.55 !important; z-index: 1 !important; } .guide-heading { text-align: center !important; margin-bottom: 26px !important; position: relative !important; z-index: 2 !important; } .guide-title-wrap { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: clamp(10px, 2.5vw, 22px) !important; width: 100% !important; margin: 0 0 6px !important; } .guide-decor-line { display: inline-block !important; width: clamp(26px, 5vw, 48px) !important; height: 1.5px !important; background: #b57a22 !important; border-radius: 2px !important; flex-shrink: 0 !important; } .guide-heading h2 { font-family: "Cairo", "IBM Plex Sans Arabic", Tahoma, sans-serif !important; font-size: clamp(22px, 3.5vw, 34px) !important; font-weight: 800 !important; color: #b57a22 !important; margin: 0 !important; line-height: 1.3 !important; text-align: center !important; } .guide-heading p { margin: 4px 0 0 !important; color: #626e84 !important; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, sans-serif !important; font-size: clamp(12.5px, 2vw, 16px) !important; font-weight: 500 !important; line-height: 1.55 !important; text-align: center !important; } .guide-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; position: relative !important; z-index: 2 !important; } html body #sakkaf-guide .guide-card, html body .guide-card { background: #ffffff !important; border: 1px solid #ebdfe6 !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 4px 16px rgba(78, 41, 56, 0.05) !important; display: flex !important; flex-direction: column !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; height: 100% !important; box-sizing: border-box !important; min-width: 0 !important; } .guide-card:hover { transform: translateY(-4px) !important; box-shadow: 0 10px 26px rgba(78, 41, 56, 0.12) !important; border-color: #d6b8c8 !important; } .guide-photo-link { display: block !important; width: 100% !important; height: 155px !important; overflow: hidden !important; position: relative !important; } .guide-photo-link img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.4s ease !important; } .guide-card:hover .guide-photo-link img { transform: scale(1.05) !important; } .guide-body { padding: 16px 14px 18px !important; display: flex !important; flex-direction: column !important; flex-grow: 1 !important; justify-content: flex-start !important; align-items: center !important; text-align: center !important; box-sizing: border-box !important; } .guide-body h3 { font-family: "Cairo", "IBM Plex Sans Arabic", Tahoma, sans-serif !important; font-size: 16.5px !important; font-weight: 800 !important; color: #3b1029 !important; margin: 0 0 6px !important; line-height: 1.35 !important; text-align: center !important; word-break: normal !important; overflow-wrap: break-word !important; } .guide-body p { font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, sans-serif !important; font-size: 12.5px !important; line-height: 1.55 !important; color: #626e84 !important; margin: 0 0 14px !important; text-align: center !important; word-break: normal !important; overflow-wrap: break-word !important; } .guide-pill-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: #ffffff !important; color: #7a1747 !important; border: 1.5px solid #b57a22 !important; border-radius: 9999px !important; padding: 7px 18px !important; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: none !important; transition: all 0.25s ease !important; width: 100% !important; margin-top: auto !important; box-sizing: border-box !important; } .guide-pill-btn:hover { background: #fdf5ec !important; border-color: #9d6515 !important; color: #7a1747 !important; transform: translateY(-1px) !important; text-decoration: none !important; } .guide-pill-arrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #7a1747 !important; font-size: 14px !important; line-height: 1 !important; transition: transform 0.25s ease !important; } .guide-pill-arrow svg { width: 14px !important; height: 14px !important; display: block !important; } .guide-pill-btn:hover .guide-pill-arrow { transform: translateX(-3px) !important; } /* Bottom Row with Button & Malaysia Truly Asia */ .guide-bottom-row { position: relative !important; margin-top: 32px !important; display: flex !important; justify-content: center !important; align-items: center !important; z-index: 2 !important; } .guide-more-wrap { text-align: center !important; } .guide-more-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 22px !important; background: #ffffff !important; border: 1.5px solid #dcb581 !important; border-radius: 30px !important; padding: 10px 48px !important; color: #b37e28 !important; font-family: "Cairo", Tahoma, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: 0 2px 10px rgba(220,181,129,0.12) !important; transition: all 0.25s ease !important; } .guide-more-btn:hover, .guide-more-btn:focus { background: #ffffff !important; border-color: #c89432 !important; color: #8c5d13 !important; transform: translateY(-2px) !important; box-shadow: 0 5px 16px rgba(200,148,50,0.22) !important; text-decoration: none !important; } .guide-more-arrow { font-size: 22px !important; line-height: 1 !important; color: #b37e28 !important; transition: transform 0.25s ease !important; display: inline-block !important; } .guide-more-btn:hover .guide-more-arrow { transform: translateX(-4px) !important; } .guide-truly-asia { position: absolute !important; right: 4% !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; flex-direction: column !important; align-items: center !important; line-height: 1 !important; pointer-events: none !important; user-select: none !important; opacity: 0.55 !important; } .truly-main { font-family: "Brush Script MT", "Caveat", "Dancing Script", cursive, Georgia, serif !important; font-size: 42px !important; color: #cbb49f !important; transform: rotate(-4deg) !important; letter-spacing: 1px !important; } .truly-sub { font-family: "Cairo", sans-serif !important; font-size: 11px !important; font-weight: 700 !important; color: #cbb49f !important; letter-spacing: 2px !important; text-transform: uppercase !important; margin-top: -6px !important; } /* ========================================================================== Contact Section (تواصل معنا) - Matching Exact Mockup ========================================================================== */ .contact-section { background: #fffaf6 !important; border-top: 1px solid #f2e8e2 !important; padding: 40px 0 36px !important; position: relative !important; direction: rtl !important; } .contact-heading { text-align: center !important; margin-bottom: 22px !important; } .contact-heading h2 { font-family: "Cairo", Tahoma, sans-serif !important; font-size: clamp(24px, 2.1vw, 32px) !important; font-weight: 800 !important; color: #391047 !important; margin: 0 0 6px !important; line-height: 1.25 !important; } .contact-heading p { margin: 0 !important; color: #6d5475 !important; font-size: clamp(14px, 1vw, 15.5px) !important; font-weight: 500 !important; } .contact-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; } .contact-card { background: #ffffff !important; border: 1px solid #eadfda !important; border-radius: 14px !important; padding: 12px 20px !important; min-height: 72px !important; display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; gap: 14px !important; box-shadow: 0 4px 14px rgba(65,30,47,0.05) !important; text-decoration: none !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .contact-card:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 22px rgba(65,30,47,0.10) !important; text-decoration: none !important; } .contact-wa-icon { width: 42px !important; height: 42px !important; border-radius: 50% !important; background: #25d366 !important; color: #ffffff !important; display: grid !important; place-items: center !important; box-shadow: 0 3px 10px rgba(37,211,102,0.28) !important; flex-shrink: 0 !important; } .contact-card-info { display: flex !important; flex-direction: column !important; align-items: flex-start !important; } .contact-card-info h3 { font-family: "Cairo", Tahoma, sans-serif !important; font-size: 15px !important; font-weight: 800 !important; color: #391047 !important; margin: 0 0 2px !important; line-height: 1.25 !important; } .contact-card-phone { font-family: "Cairo", Tahoma, sans-serif !important; font-size: 16px !important; font-weight: 800 !important; color: #9c0a5e !important; direction: ltr !important; display: inline-block !important; } .contact-card-chev { font-size: 26px !important; line-height: 1 !important; color: #c89432 !important; transition: transform 0.2s ease !important; } .contact-card:hover .contact-card-chev { transform: translateX(-3px) !important; } /* Contact Meta Row (Location + Email) */ .contact-meta-row { margin-top: 26px !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 32px !important; } .contact-meta-item { display: flex !important; align-items: center !important; gap: 10px !important; text-decoration: none !important; } .contact-meta-icon { color: #9c0a5e !important; display: grid !important; place-items: center !important; flex-shrink: 0 !important; } .contact-meta-text { display: flex !important; flex-direction: column !important; align-items: flex-start !important; } .contact-meta-title { font-family: "Cairo", Tahoma, sans-serif !important; font-size: 13.5px !important; font-weight: 800 !important; color: #391047 !important; line-height: 1.25 !important; } .contact-meta-desc { font-size: 11.5px !important; color: #6e5677 !important; direction: ltr !important; display: inline-block !important; } .contact-meta-divider { width: 1px !important; height: 24px !important; background: #ddbb83 !important; } .contact-email { color: #391047 !important; } .contact-email-addr { font-family: "Cairo", Tahoma, sans-serif !important; font-size: 13.5px !important; font-weight: 700 !important; color: #391047 !important; direction: ltr !important; transition: color 0.2s ease !important; } .contact-email:hover .contact-email-addr { color: #9c0a5e !important; } /* Responsive Guide Section (Mobile & Tablet: 2 cards per row) */ @media (max-width: 991px) { .guide-section { padding: 32px 0 40px !important; background: #faf7f4 !important; } .guide-hibiscus-watermark { display: none !important; } .guide-truly-asia { display: none !important; } .guide-heading { margin-bottom: 20px !important; } .guide-title-wrap { gap: clamp(8px, 2.2vw, 16px) !important; margin-bottom: 5px !important; } .guide-decor-line { width: clamp(20px, 4.5vw, 36px) !important; height: 1.5px !important; background: #b57a22 !important; } .guide-heading h2 { font-size: clamp(20px, 4.8vw, 26px) !important; color: #b57a22 !important; } .guide-heading p { font-size: clamp(12px, 2.8vw, 14.5px) !important; color: #626e84 !important; line-height: 1.45 !important; } .guide-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(8px, 2.2vw, 14px) !important; margin-top: 16px !important; width: 100% !important; direction: rtl !important; box-sizing: border-box !important; } html body #sakkaf-guide .guide-card, html body .guide-card { background: #ffffff !important; border: 1px solid #ebdbe4 !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 4px 16px rgba(78, 41, 56, 0.05) !important; display: flex !important; flex-direction: column !important; height: 100% !important; box-sizing: border-box !important; min-width: 0 !important; } .guide-photo-link { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 10 !important; overflow: hidden !important; position: relative !important; } .guide-photo-link img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .guide-body { padding: clamp(10px, 2vw, 14px) clamp(6px, 1.5vw, 12px) clamp(12px, 2.2vw, 16px) !important; display: flex !important; flex-direction: column !important; flex-grow: 1 !important; justify-content: flex-start !important; align-items: center !important; text-align: center !important; box-sizing: border-box !important; } .guide-body h3 { font-family: "Cairo", "IBM Plex Sans Arabic", Tahoma, sans-serif !important; font-size: clamp(12px, 2.8vw, 15px) !important; font-weight: 800 !important; color: #3b1029 !important; margin: 0 0 clamp(4px, 1vw, 6px) !important; line-height: 1.35 !important; text-align: center !important; word-break: normal !important; overflow-wrap: break-word !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: calc(1.35em * 2) !important; } .guide-body p { font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, sans-serif !important; font-size: clamp(9.5px, 2.1vw, 11.5px) !important; font-weight: 500 !important; color: #626e84 !important; line-height: 1.45 !important; margin: 0 0 clamp(10px, 2vw, 14px) !important; text-align: center !important; word-break: normal !important; overflow-wrap: break-word !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: calc(1.45em * 3) !important; } .guide-pill-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; background: #ffffff !important; color: #7a1747 !important; border: 1.5px solid #b57a22 !important; border-radius: 9999px !important; padding: clamp(5px, 1.2vw, 7px) clamp(10px, 2.5vw, 16px) !important; font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, sans-serif !important; font-size: clamp(10.5px, 2.4vw, 12.5px) !important; font-weight: 700 !important; text-decoration: none !important; width: 100% !important; margin-top: auto !important; box-sizing: border-box !important; box-shadow: none !important; } .guide-pill-btn:hover { background: #fdf5ec !important; border-color: #9d6515 !important; color: #7a1747 !important; } .guide-pill-arrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #7a1747 !important; } .guide-pill-arrow svg { width: clamp(10px, 2.3vw, 13px) !important; height: clamp(10px, 2.3vw, 13px) !important; display: block !important; } .guide-bottom-row { margin-top: 22px !important; } .guide-more-btn { padding: 8px 24px !important; font-size: 13px !important; border-radius: 9999px !important; gap: 10px !important; } } @media (min-width: 768px) and (max-width: 991px) { .guide-grid { gap: 16px !important; } .guide-body { padding: 16px 14px 18px !important; } .guide-body h3 { font-size: 16.5px !important; } .guide-body p { font-size: 13px !important; } .guide-pill-btn { font-size: 13.5px !important; padding: 7px 20px !important; max-width: 180px !important; } } @media (max-width: 760px) { .guide-hibiscus-watermark { display: none !important; } .contact-section { padding: 30px 0 28px !important; } .contact-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .contact-meta-row { flex-direction: column !important; gap: 14px !important; align-items: center !important; } .contact-meta-divider { display: none !important; } } /* ========================================================================== Modern Footer Section (الفوتر الحديث المطابق للتصميم بنسبة 100%) ========================================================================== */ #footer.tail-footer, .tail-footer { position: relative !important; background: #fff9f5 !important; background-image: none !important; border-top: 1px solid #eee3dd !important; padding: 36px 0 20px !important; margin: 0 !important; color: #391047 !important; overflow: hidden !important; box-sizing: border-box !important; } /* Clear any legacy theme footer styling */ #footer.tail-footer .footer-wrapper, #footer.tail-footer .bottom { display: none !important; } .tail-footer .tail-container { width: min(1440px, calc(100% - 56px)) !important; margin-inline: auto !important; position: relative !important; z-index: 2 !important; } /* Palm Fronds Watermark in bottom right */ .footer-palm-watermark { position: absolute !important; bottom: 0 !important; right: 0 !important; pointer-events: none !important; z-index: 1 !important; opacity: 0.65 !important; } /* Footer Grid: 4 Link Columns + 1 Brand Column */ .tail-footer .footer-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) 1.55fr !important; gap: 28px !important; padding-bottom: 22px !important; direction: rtl !important; align-items: flex-start !important; } .tail-footer .footer-col { display: flex !important; flex-direction: column !important; gap: 8px !important; } .tail-footer .footer-col h3 { font-size: 16.5px !important; font-weight: 700 !important; color: #9b0b63 !important; margin: 0 0 8px !important; line-height: 1.4 !important; font-family: "Cairo", Tahoma, Arial, sans-serif !important; } .tail-footer .footer-col a { font-size: 13.5px !important; color: #5d4a63 !important; text-decoration: none !important; line-height: 1.6 !important; font-family: "Cairo", Tahoma, Arial, sans-serif !important; transition: color 0.2s ease, transform 0.2s ease !important; display: inline-block !important; width: max-content !important; } .tail-footer .footer-col a:hover { color: #9b0b63 !important; transform: translateX(-3px) !important; } /* Footer Brand Column (Far left in RTL) */ .tail-footer .footer-brand { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; direction: rtl !important; } .tail-footer .footer-brand-link { display: flex !important; align-items: center !important; gap: 12px !important; direction: ltr !important; text-decoration: none !important; } .tail-footer .footer-brand-link .brand-mark { width: 88px !important; height: 88px !important; object-fit: contain !important; flex-shrink: 0 !important; } .tail-footer .footer-brand-link .brand-copy { display: flex !important; flex-direction: column !important; line-height: 1.25 !important; direction: rtl !important; text-align: right !important; } .tail-footer .footer-brand-link .brand-copy strong { font-size: 17px !important; font-weight: 800 !important; color: #1f1721 !important; font-family: "Cairo", Tahoma, Arial, sans-serif !important; } .tail-footer .footer-brand-link .brand-copy span { font-size: 10.5px !important; font-weight: 600 !important; color: #55445b !important; letter-spacing: 0.5px !important; font-family: "Cairo", Tahoma, Arial, sans-serif !important; margin-top: 3px !important; } .tail-footer .footer-slogan { font-size: 13.5px !important; font-weight: 700 !important; color: #cc1077 !important; margin-top: 4px !important; font-family: "Cairo", Tahoma, Arial, sans-serif !important; } /* Social Media Icons */ .tail-footer .socials { display: flex !important; gap: 12px !important; margin-top: 10px !important; direction: ltr !important; } .tail-footer .socials a { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #231f20 !important; color: #fff !important; display: grid !important; place-items: center !important; text-decoration: none !important; transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important; } .tail-footer .socials a:hover { background: #9b0b63 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(155, 11, 99, 0.3) !important; } .tail-footer .socials a svg { display: block !important; } /* Footer Bottom Bar */ .tail-footer .footer-bottom { min-height: 48px !important; border-top: 1px solid #eee4de !important; padding-top: 16px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; direction: ltr !important; /* LTR so payments on Left, copyright on Right */ position: relative !important; z-index: 2 !important; } .tail-footer .payments { display: flex !important; align-items: center !important; } .tail-footer .footer-payments-img { height: 34px !important; width: auto !important; max-width: 100% !important; display: block !important; object-fit: contain !important; } .tail-footer .footer-copyright { font-size: 12.5px !important; font-weight: 600 !important; color: #4a3350 !important; font-family: "Cairo", Tahoma, Arial, sans-serif !important; letter-spacing: 0.2px !important; } /* Responsive Rules for Footer */ @media (max-width: 1100px) { .tail-footer .footer-grid { grid-template-columns: repeat(4, 1fr) !important; } .tail-footer .footer-brand { grid-column: 1 / -1 !important; margin-bottom: 12px !important; align-items: center !important; text-align: center !important; } .tail-footer .footer-brand-link { flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .tail-footer .footer-brand-link .brand-mark { width: 72px !important; height: 72px !important; } .tail-footer .footer-brand-link .brand-copy { align-items: center !important; text-align: center !important; } } @media (max-width: 760px) { .tail-footer .footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 22px 16px !important; } .tail-footer .footer-brand { grid-column: 1 / -1 !important; margin-bottom: 10px !important; } .tail-footer .footer-bottom { flex-direction: column-reverse !important; gap: 12px !important; align-items: center !important; text-align: center !important; padding-top: 14px !important; } } @media (max-width: 1024px) { #header.site-header, #header.sakkaf-site-header { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: 12000 !important; } #page-wrapper { padding-top: 94px !important; } } @media (max-width: 720px) { #page-wrapper { padding-top: 78px !important; } } /* Keep desktop header actions at the physical left edge of the header grid. */ @media (min-width: 1001px) { .header-actions { justify-self: end !important; } } /* ========================================================================== Sakkaf Ultra-Light Scroll Reveal Animations (Lag-Free & High Performance) ========================================================================== */ /* Initial state only activated when JavaScript is ready */ html.sakkaf-scroll-anim-ready .sakkaf-reveal { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 0.38s cubic-bezier(0.2, 0.8, 0.25, 1), transform 0.38s cubic-bezier(0.2, 0.8, 0.25, 1) !important; } /* Headings: subtle upward float */ html.sakkaf-scroll-anim-ready .sakkaf-reveal-heading { transform: translate3d(0, 10px, 0); } /* Cards: subtle upward float with gentle stagger */ html.sakkaf-scroll-anim-ready .sakkaf-reveal-card { transform: translate3d(0, 12px, 0); transition-delay: calc(var(--stagger-i, 0) * 0.04s) !important; } /* In-View state: fully revealed */ html.sakkaf-scroll-anim-ready .sakkaf-reveal.sakkaf-in-view { opacity: 1 !important; transform: translate3d(0, 0, 0) !important; } /* Respect user's motion preferences */ @media (prefers-reduced-motion: reduce) { html.sakkaf-scroll-anim-ready .sakkaf-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Mobile/tablet bottom navigation: compact, balanced, and aligned with the brand. */ @media (max-width: 991px) { .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav { right: 12px !important; bottom: 10px !important; left: 12px !important; gap: 5px !important; min-height: 58px !important; padding: 5px !important; border: 1px solid rgba(122, 28, 104, .14) !important; border-radius: 20px !important; background: linear-gradient(135deg, rgba(255, 252, 254, .98), rgba(250, 242, 249, .96)) !important; box-shadow: 0 10px 28px rgba(53, 24, 70, .22) !important; -webkit-backdrop-filter: blur(16px) saturate(125%); backdrop-filter: blur(16px) saturate(125%); } .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a, .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a:hover, .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a:focus { min-height: 46px !important; padding: 5px 4px !important; border-radius: 14px !important; color: #5b3869 !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.2 !important; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease !important; } .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a:hover, .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a:focus { background: rgba(122, 28, 104, .07) !important; transform: translateY(-1px); } .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a .fa { height: 17px !important; color: #8b176b !important; font-size: 16px !important; line-height: 17px !important; } .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li.active > a, .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li.active > a:hover, .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li.active > a:focus { color: #fff !important; background: linear-gradient(135deg, #5a1d6d 0%, #a31578 100%) !important; border-color: rgba(255, 255, 255, .22) !important; box-shadow: 0 6px 14px rgba(90, 29, 109, .28) !important; transform: none; } .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li.active > a .fa { color: #f4c86b !important; } #page-wrapper { padding-bottom: 76px !important; } } @media (max-width: 380px) { .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav { right: 8px !important; left: 8px !important; bottom: 8px !important; gap: 3px !important; padding: 4px !important; } .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a, .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a:hover, .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a:focus { padding-right: 2px !important; padding-left: 2px !important; font-size: 10px !important; } } /* Keep mobile/tablet offer tabs focused on the first three cards. */ @media (max-width: 991px) { html body #sakkaf-packages.offers .offer-tab-pane .offer-grid > .offer-card:nth-child(n + 4) { display: none !important; } } /* Mobile/tablet package tabs: show the three primary categories as equal pills. */ @media (max-width: 991px) { html body #sakkaf-packages.offers .tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; justify-content: stretch !important; padding: 5px 8px !important; } html body #sakkaf-packages.offers .tabs > .tab:nth-child(n + 4) { display: none !important; } html body #sakkaf-packages.offers .tabs > .tab { display: inline-flex !important; min-width: 0 !important; width: 100% !important; flex-shrink: 1 !important; padding: 8px 5px !important; font-family: var(--sakkaf-font-family) !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.25 !important; white-space: nowrap !important; } } @media (max-width: 380px) { html body #sakkaf-packages.offers .tabs > .tab { padding-inline: 3px !important; font-size: 12px !important; } } /* Mobile/tablet offer cards: match the approved light card design without changing the site font. */ @media (max-width: 991px) { html body #sakkaf-packages.offers .offer-card { box-sizing: border-box !important; padding: 10px !important; background: #fffaf7 !important; border: 1px solid #eadfd8 !important; border-radius: 20px !important; box-shadow: 0 7px 20px rgba(78, 41, 56, .09) !important; } html body #sakkaf-packages.offers .offer-card .photo-wrap { height: auto !important; aspect-ratio: 1.55 !important; border-radius: 14px !important; background: #f2ece8 !important; } html body #sakkaf-packages.offers .offer-card .photo-wrap img { border-radius: 14px !important; } html body #sakkaf-packages.offers .offer-card .badge { top: 12px !important; right: 12px !important; padding: 6px 12px !important; color: #5c2851 !important; background: #e7b557 !important; border-radius: 18px !important; box-shadow: 0 3px 10px rgba(92, 40, 81, .14) !important; } html body #sakkaf-packages.offers .offer-card .offer-body { padding: 14px 8px 8px !important; } html body #sakkaf-packages.offers .offer-card .offer-body h3 { margin-bottom: 7px !important; color: #55145f !important; } html body #sakkaf-packages.offers .offer-card .type-pill { margin-bottom: 10px !important; padding: 5px 15px !important; color: #b14d82 !important; background: #f8e7ed !important; box-shadow: none !important; } html body #sakkaf-packages.offers .offer-card .offer-body ul { margin: 0 0 8px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } html body #sakkaf-packages.offers .offer-card .offer-body li { min-height: 30px !important; padding: 4px 2px !important; border-bottom: 0 !important; color: #6d5f70 !important; direction: ltr !important; } html body #sakkaf-packages.offers .offer-card .offer-body li > span:first-child { direction: rtl !important; text-align: right !important; } html body #sakkaf-packages.offers .offer-card .offer-feat-icon { color: #a5116b !important; } html body #sakkaf-packages.offers .offer-card .price { margin-top: 0 !important; padding: 10px 0 8px !important; border-top: 1px solid #ecd9dd !important; } html body #sakkaf-packages.offers .offer-card .price::before, html body #sakkaf-packages.offers .offer-card .price::after { display: none !important; } html body #sakkaf-packages.offers .offer-card .price small { color: #ad6b91 !important; } html body #sakkaf-packages.offers .offer-card .price strong { color: #a80c64 !important; } html body #sakkaf-packages.offers .offer-card .price > span { color: #6b315f !important; } html body #sakkaf-packages.offers .offer-card .details-btn { justify-content: center !important; padding: 12px 16px !important; border-radius: 14px !important; } html body #sakkaf-packages.offers .offer-card .details-btn b { display: none !important; } } @media (max-width: 380px) { html body #sakkaf-packages.offers .offer-card { padding: 8px !important; border-radius: 18px !important; } html body #sakkaf-packages.offers .offer-card .photo-wrap, html body #sakkaf-packages.offers .offer-card .photo-wrap img { border-radius: 13px !important; } html body #sakkaf-packages.offers .offer-card .offer-body { padding: 12px 6px 6px !important; } } /* Mobile/tablet destinations heading: add the reference side lines without changing the font. */ @media (max-width: 991px) { html body #sakkaf-destinations .destination-heading { margin-bottom: 24px !important; } html body #sakkaf-destinations .destination-heading > h2 { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; color: #b67b21 !important; font-size: clamp(21px, 5.5vw, 28px) !important; font-weight: 700 !important; line-height: 1.35 !important; white-space: nowrap !important; } html body #sakkaf-destinations .destination-heading > h2::before, html body #sakkaf-destinations .destination-heading > h2::after { content: "" !important; display: block !important; flex: 0 1 clamp(38px, 10vw, 60px) !important; width: clamp(38px, 10vw, 60px) !important; height: 1px !important; background: #c89432 !important; } html body #sakkaf-destinations .destination-heading .dest-flight-path, html body #sakkaf-destinations .destination-heading .dest-heading-divider, html body #sakkaf-destinations .destination-heading > h4 { display: none !important; } html body #sakkaf-destinations .destination-heading > p { margin: 7px auto 0 !important; color: #677489 !important; font-size: clamp(13px, 3.4vw, 15px) !important; font-weight: 400 !important; line-height: 1.6 !important; } } @media (max-width: 380px) { html body #sakkaf-destinations .destination-heading > h2 { gap: 9px !important; font-size: 21px !important; } html body #sakkaf-destinations .destination-heading > h2::before, html body #sakkaf-destinations .destination-heading > h2::after { flex-basis: 34px !important; width: 34px !important; } html body #sakkaf-destinations .destination-heading > p { font-size: 12.5px !important; } } /* Mobile/tablet services heading: match the destinations title treatment without changing the font. */ @media (max-width: 991px) { html body #sakkaf-services .services-heading { margin-bottom: 24px !important; } html body #sakkaf-services .services-heading > h2 { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; color: #b67b21 !important; font-size: clamp(21px, 5.5vw, 28px) !important; font-weight: 700 !important; line-height: 1.35 !important; white-space: nowrap !important; } html body #sakkaf-services .services-heading > h2::before, html body #sakkaf-services .services-heading > h2::after { content: "" !important; display: block !important; flex: 0 1 clamp(38px, 10vw, 60px) !important; width: clamp(38px, 10vw, 60px) !important; height: 1px !important; background: #c89432 !important; } html body #sakkaf-services .services-heading .services-ornament { display: none !important; } html body #sakkaf-services .services-heading > p { margin: 7px auto 0 !important; color: #677489 !important; font-size: clamp(13px, 3.4vw, 15px) !important; font-weight: 400 !important; line-height: 1.6 !important; } html body #sakkaf-services .services-heading-title-wrap { gap: 12px !important; } html body #sakkaf-services .services-heading-title-wrap .services-heading-line { background: #c89432 !important; } html body #sakkaf-services .services-heading-title-wrap h2 { color: #b67b21 !important; } } @media (max-width: 380px) { html body #sakkaf-services .services-heading > h2 { gap: 9px !important; font-size: 21px !important; } html body #sakkaf-services .services-heading > h2::before, html body #sakkaf-services .services-heading > h2::after { flex-basis: 34px !important; width: 34px !important; } } /* Mobile-only services layout: one full-width card per row. */ @media (max-width: 767px) { html body #sakkaf-services .services-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; } html body #sakkaf-services .services-grid .service-card { width: 100% !important; } } /* Mobile/tablet offers heading: match the reference title treatment and keep the site font. */ @media (max-width: 991px) { html body #sakkaf-packages.offers .section-heading { margin: 0 0 24px !important; padding: 0 4px !important; text-align: center !important; } html body #sakkaf-packages.offers .section-heading h2 { display: flex !important; align-items: center !important; justify-content: center !important; gap: 13px !important; margin: 0 !important; color: #b67b21 !important; font-family: var(--sakkaf-font-family) !important; font-size: 28px !important; font-weight: 700 !important; line-height: 1.35 !important; white-space: nowrap !important; } html body #sakkaf-packages.offers .section-heading h2::before, html body #sakkaf-packages.offers .section-heading h2::after { content: "" !important; display: block !important; flex: 0 1 58px !important; width: 58px !important; height: 1px !important; background: #c89432 !important; } html body #sakkaf-packages.offers .section-heading .heart { display: none !important; } html body #sakkaf-packages.offers .section-heading p { margin: 7px 0 0 !important; color: #76677d !important; font-family: var(--sakkaf-font-family) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.6 !important; } } @media (max-width: 380px) { html body #sakkaf-packages.offers .section-heading { margin-bottom: 20px !important; padding-inline: 0 !important; } html body #sakkaf-packages.offers .section-heading h2 { gap: 9px !important; font-size: 24px !important; } html body #sakkaf-packages.offers .section-heading h2::before, html body #sakkaf-packages.offers .section-heading h2::after { flex-basis: 42px !important; width: 42px !important; } html body #sakkaf-packages.offers .section-heading p { font-size: 13px !important; } } /* ========================================================================== Sakkaf Typography System IBM Plex Sans Arabic: body 400, labels 500, titles/buttons 600, H1/H2 700. ========================================================================== */ :root { --sakkaf-font-family: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; } html body, html body #header *, html body #page-wrapper *, html body #footer * { font-family: var(--sakkaf-font-family) !important; font-weight: 400 !important; } html body h1, html body h2, html body #header h1, html body #header h2, html body #page-wrapper h1, html body #page-wrapper h2, html body #footer h1, html body #footer h2 { font-weight: 700 !important; } html body h3, html body h4, html body h5, html body h6, html body .title, html body .section-title, html body .box-title, html body .package-title, html body .package_title, html body .heading-title, html body #header h3, html body #header h4, html body #header h5, html body #header h6, html body #page-wrapper h3, html body #page-wrapper h4, html body #page-wrapper h5, html body #page-wrapper h6, html body #footer h3, html body #footer h4, html body #footer h5, html body #footer h6 { font-weight: 600 !important; } html body label, html body .label, html body .form-label, html body .field-label, html body .review, html body .meta-label, html body #header label, html body #page-wrapper label, html body #footer label { font-weight: 500 !important; } html body button, html body input[type="button"], html body input[type="submit"], html body input[type="reset"], html body .button, html body .btn, html body .details-btn, html body .book, html body [role="button"], html body #header button, html body #page-wrapper button, html body #footer button { font-weight: 600 !important; } html body strong, html body b, html body #header strong, html body #page-wrapper strong, html body #footer strong { font-weight: 600 !important; } /* Preserve icon fonts while changing every readable site font. */ html body .fa, html body .fa::before, html body .fa::after { font-family: FontAwesome !important; font-weight: 400 !important; } html body #header .fa, html body #header .fa::before, html body #header .fa::after, html body #page-wrapper .fa, html body #page-wrapper .fa::before, html body #page-wrapper .fa::after, html body #footer .fa, html body #footer .fa::before, html body #footer .fa::after { font-family: FontAwesome !important; font-weight: 400 !important; } html body [class^="soap-icon"]::before, html body [class*=" soap-icon"]::before { font-family: "soap-icons" !important; font-weight: 400 !important; } html body #header [class^="soap-icon"], html body #header [class*=" soap-icon"], html body #page-wrapper [class^="soap-icon"], html body #page-wrapper [class*=" soap-icon"], html body #footer [class^="soap-icon"], html body #footer [class*=" soap-icon"] { font-family: "soap-icons" !important; font-weight: 400 !important; } html body .glyphicon, html body .glyphicon::before, html body .glyphicon::after { font-family: "Glyphicons Halflings" !important; font-weight: 400 !important; } html body #header .glyphicon, html body #header .glyphicon::before, html body #header .glyphicon::after, html body #page-wrapper .glyphicon, html body #page-wrapper .glyphicon::before, html body #page-wrapper .glyphicon::after, html body #footer .glyphicon, html body #footer .glyphicon::before, html body #footer .glyphicon::after { font-family: "Glyphicons Halflings" !important; font-weight: 400 !important; } html body input::placeholder, html body textarea::placeholder, html body select, html body option { font-family: var(--sakkaf-font-family) !important; font-weight: 400 !important; } /* Temporary white background mode for the site shell. */ html body, html body #page-wrapper, html body .sakkaf-home-hero-section, html body #hero-slider, html body #content.sakkaf-home-content, html body #sakkaf-destinations, html body #sakkaf-services, html body #sakkaf-why, html body #sakkaf-testimonials, html body #sakkaf-guide, html body #sakkaf-contact, html body #footer.tail-footer { background-color: #fff !important; background-image: none !important; } /* Soft card surface for contrast against the temporary white site background. */ html body .quick-card, html body .offer-card, html body .destination-card, html body .service-card, html body .why-card, html body .review-card, html body .guide-card, html body .contact-card { background-color: #f7f3f7 !important; border-color: rgba(90, 29, 109, .14) !important; } html body .offers .offer-card { background: #f7f3f7 !important; border-color: rgba(90, 29, 109, .14) !important; } /* Hide non-targeted slides before the responsive JavaScript filter initializes. */ @media (min-width: 992px) { #hero-slider .sakkaf-device-mobile { display: none !important; } } @media (max-width: 991px) { #hero-slider .sakkaf-device-desktop { display: none !important; } } /* Mobile/tablet quick links: horizontal cards matching the approved reference layout. */ @media (max-width: 991px) { html body #page-wrapper > .quick-links.section-shell { display: flex !important; flex-direction: column !important; gap: 14px !important; width: auto !important; margin: 0 !important; padding: 24px 18px !important; background: #fff !important; } html body #page-wrapper > .quick-links.section-shell .quick-card { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important; width: 100% !important; min-height: 98px !important; margin: 0 !important; padding: 17px 20px 17px 54px !important; overflow: visible !important; direction: rtl !important; text-align: right !important; color: #4f1b5d !important; background: linear-gradient(135deg, #fffaf8 0%, #fbf6f9 100%) !important; border: 1px solid rgba(122, 28, 104, .16) !important; border-radius: 18px !important; box-shadow: 0 7px 18px rgba(68, 29, 79, .08) !important; } html body #page-wrapper > .quick-links.section-shell .quick-card:hover, html body #page-wrapper > .quick-links.section-shell .quick-card:focus { transform: none !important; box-shadow: 0 9px 20px rgba(68, 29, 79, .11) !important; } html body #page-wrapper > .quick-links.section-shell .quick-icon { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 62px !important; width: 62px !important; height: 62px !important; margin: 0 !important; border-radius: 50% !important; color: #8b176b !important; background: #fceef4 !important; } html body #page-wrapper > .quick-links.section-shell .quick-icon svg { width: 35px !important; height: 35px !important; stroke: currentColor !important; } html body #page-wrapper > .quick-links.section-shell .quick-copy { flex: 1 1 auto !important; min-width: 0 !important; align-items: stretch !important; justify-content: center !important; text-align: right !important; } html body #page-wrapper > .quick-links.section-shell .quick-copy b { display: block !important; width: 100% !important; font-size: 18px !important; line-height: 1.35 !important; font-weight: 600 !important; color: #4f1b5d !important; } html body #page-wrapper > .quick-links.section-shell .quick-copy small { display: block !important; width: 100% !important; margin-top: 4px !important; font-size: 13px !important; line-height: 1.45 !important; font-weight: 400 !important; color: #7b6b80 !important; } html body #page-wrapper > .quick-links.section-shell .quick-card .round-arrow { position: absolute !important; left: 20px !important; right: auto !important; top: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 32px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; transform: translateY(-50%) !important; color: #8b176b !important; background: transparent !important; font-size: 31px !important; font-weight: 500 !important; line-height: 1 !important; } html body #page-wrapper > .quick-links.section-shell .quick-card .round-arrow::before { content: "›" !important; font-size: 31px !important; line-height: 1 !important; } html body #page-wrapper > .quick-links.section-shell .quick-card .round-arrow { font-size: 0 !important; } html body #page-wrapper > .quick-links.section-shell .quick-card:hover .round-arrow, html body #page-wrapper > .quick-links.section-shell .quick-card:focus .round-arrow { transform: translateY(-50%) !important; } } @media (max-width: 380px) { html body #page-wrapper > .quick-links.section-shell { padding: 20px 14px !important; gap: 12px !important; } html body #page-wrapper > .quick-links.section-shell .quick-card { min-height: 88px !important; gap: 11px !important; padding: 14px 14px 14px 44px !important; border-radius: 16px !important; } html body #page-wrapper > .quick-links.section-shell .quick-icon { flex-basis: 54px !important; width: 54px !important; height: 54px !important; } html body #page-wrapper > .quick-links.section-shell .quick-icon svg { width: 31px !important; height: 31px !important; } html body #page-wrapper > .quick-links.section-shell .quick-copy b { font-size: 16px !important; } html body #page-wrapper > .quick-links.section-shell .quick-copy small { font-size: 11px !important; } html body #page-wrapper > .quick-links.section-shell .quick-card .round-arrow { left: 14px !important; } } /* Mobile/tablet testimonials heading: match the services heading design and colors. */ @media (max-width: 991px) { html body #sakkaf-testimonials .testimonials-heading { margin-bottom: 24px !important; } html body #sakkaf-testimonials .testimonials-heading > h2 { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; margin: 0 !important; color: #b67b21 !important; font-size: clamp(21px, 5.5vw, 28px) !important; font-weight: 700 !important; line-height: 1.35 !important; white-space: nowrap !important; } html body #sakkaf-testimonials .testimonials-heading > h2::before, html body #sakkaf-testimonials .testimonials-heading > h2::after { content: "" !important; display: block !important; flex: 0 1 clamp(38px, 10vw, 60px) !important; width: clamp(38px, 10vw, 60px) !important; height: 1px !important; background: #c89432 !important; } html body #sakkaf-testimonials .testimonials-heading .testimonials-ornament { display: none !important; } html body #sakkaf-testimonials .testimonials-heading > p { margin: 7px auto 0 !important; color: #677489 !important; font-size: clamp(13px, 3.4vw, 15px) !important; font-weight: 400 !important; line-height: 1.6 !important; } } @media (max-width: 380px) { html body #sakkaf-testimonials .testimonials-heading > h2 { gap: 9px !important; font-size: 21px !important; } html body #sakkaf-testimonials .testimonials-heading > h2::before, html body #sakkaf-testimonials .testimonials-heading > h2::after { flex-basis: 34px !important; width: 34px !important; } } /* Mobile/tablet service-card typography: improve readability without changing desktop. */ @media (max-width: 991px) { html body #sakkaf-services .service-card .service-content h3 { font-size: clamp(16px, 2.8vw, 20px) !important; line-height: 1.3 !important; } html body #sakkaf-services .service-card .service-content p { font-size: clamp(12px, 2.2vw, 15px) !important; line-height: 1.45 !important; margin-bottom: 8px !important; } html body #sakkaf-services .service-card .service-btn { max-width: 160px !important; padding: 6px 12px !important; font-size: clamp(12px, 2.1vw, 15px) !important; } html body #sakkaf-services .service-card .service-icon.pink-icon { width: clamp(36px, 8vw, 48px) !important; height: clamp(36px, 8vw, 48px) !important; font-size: clamp(17px, 4vw, 22px) !important; } } /* Mobile/tablet why-heading: match the other section titles with side lines. */ @media (max-width: 991px) { html body #sakkaf-why .why-heading > h2 { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; white-space: nowrap !important; } html body #sakkaf-why .why-heading > h2::before, html body #sakkaf-why .why-heading > h2::after { content: "" !important; display: block !important; flex: 0 1 clamp(38px, 10vw, 60px) !important; width: clamp(38px, 10vw, 60px) !important; height: 1px !important; background: #c89432 !important; } } @media (max-width: 380px) { html body #sakkaf-why .why-heading > h2 { gap: 9px !important; } html body #sakkaf-why .why-heading > h2::before, html body #sakkaf-why .why-heading > h2::after { flex-basis: 34px !important; width: 34px !important; } } /* Mobile/tablet offer-card facts: align the text to the right within its row. */ @media (max-width: 991px) { html body #sakkaf-packages.offers .offer-card .offer-body li > span:first-child { flex: 1 1 auto !important; min-width: 0 !important; direction: rtl !important; text-align: right !important; } } /* Service-card icons: use the visible brand color and supported Font Awesome glyphs. */ html body #sakkaf-services .service-icon.pink-icon > .fa, html body #sakkaf-services .service-icon.pink-icon > .fa::before { color: #990d5d !important; font-family: FontAwesome !important; font-weight: 400 !important; } /* Preserve the existing desktop contact-card structure for the mobile-only additions. */ .contact-service-icon, .contact-card-subtitle, .contact-card-action, .contact-phone-wa-icon { display: none !important; } .contact-card-phone-line { display: contents !important; } /* Mobile/tablet contact section: compact three-card layout matching the reference. */ @media (max-width: 991px) { html body #sakkaf-contact.contact-section { padding: 30px 0 32px !important; background: #fffaf6 !important; } html body #sakkaf-contact .contact-heading { margin-bottom: 18px !important; } html body #sakkaf-contact .contact-heading h2 { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; margin: 0 !important; color: #391047 !important; font-size: clamp(24px, 5.8vw, 32px) !important; line-height: 1.3 !important; white-space: nowrap !important; } html body #sakkaf-contact .contact-heading h2::before, html body #sakkaf-contact .contact-heading h2::after { content: "" !important; display: block !important; flex: 0 1 clamp(38px, 10vw, 62px) !important; width: clamp(38px, 10vw, 62px) !important; height: 1px !important; background: #6f2a74 !important; } html body #sakkaf-contact .contact-heading p { margin: 7px auto 0 !important; color: #6d5475 !important; font-size: clamp(13px, 3.4vw, 15px) !important; font-weight: 400 !important; line-height: 1.6 !important; } html body #sakkaf-contact .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(6px, 2vw, 12px) !important; align-items: stretch !important; } html body #sakkaf-contact .contact-card { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; min-width: 0 !important; min-height: 176px !important; padding: 10px 5px 10px !important; background: #ffffff !important; border: 1px solid #eadfda !important; border-radius: 12px !important; box-shadow: 0 4px 14px rgba(65, 30, 47, 0.05) !important; box-sizing: border-box !important; } html body #sakkaf-contact .contact-service-icon { display: grid !important; place-items: center !important; order: 1 !important; width: clamp(36px, 8vw, 46px) !important; height: clamp(36px, 8vw, 46px) !important; margin: 0 auto 6px !important; border-radius: 50% !important; background: #fde5ef !important; color: #a70b67 !important; font-size: clamp(17px, 4vw, 22px) !important; flex: 0 0 auto !important; } html body #sakkaf-contact .contact-service-icon i { color: #a70b67 !important; } html body #sakkaf-contact .contact-wa-icon, html body #sakkaf-contact .contact-card-chev { display: none !important; } html body #sakkaf-contact .contact-card-info { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; order: 2 !important; width: 100% !important; min-width: 0 !important; text-align: center !important; } html body #sakkaf-contact .contact-card-info h3 { margin: 0 0 2px !important; color: #391047 !important; font-size: clamp(12px, 3vw, 17px) !important; line-height: 1.3 !important; text-align: center !important; } html body #sakkaf-contact .contact-card-subtitle { display: block !important; margin: 0 0 4px !important; color: #6d5475 !important; font-size: clamp(10px, 2.3vw, 13px) !important; font-weight: 500 !important; line-height: 1.35 !important; white-space: nowrap !important; } html body #sakkaf-contact .contact-card-phone-line { display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; direction: ltr !important; max-width: 100% !important; white-space: nowrap !important; } html body #sakkaf-contact .contact-phone-wa-icon { display: grid !important; place-items: center !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; background: #25d366 !important; color: #ffffff !important; font-size: 12px !important; flex: 0 0 auto !important; } html body #sakkaf-contact .contact-phone-wa-icon svg { display: block !important; width: 13px !important; height: 13px !important; } html body #sakkaf-contact .contact-card-phone { color: #169b53 !important; font-size: clamp(10px, 2.2vw, 14px) !important; font-weight: 800 !important; line-height: 1.3 !important; white-space: nowrap !important; } html body #sakkaf-contact .contact-card-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 3 !important; gap: 4px !important; width: 94% !important; min-height: 30px !important; margin-top: auto !important; padding: 5px 3px !important; color: #9c0a5e !important; background: #ffffff !important; border: 1.5px solid #c89432 !important; border-radius: 9999px !important; font-size: clamp(9px, 2vw, 12px) !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: nowrap !important; box-sizing: border-box !important; } html body #sakkaf-contact .contact-card-action-arrow { color: #9c0a5e !important; font-size: 20px !important; line-height: 0.8 !important; } html body #sakkaf-contact .contact-meta-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 12px !important; padding: 10px 12px !important; background: #ffffff !important; border: 1px solid #eee2dc !important; border-radius: 12px !important; box-shadow: 0 3px 12px rgba(65, 30, 47, 0.04) !important; box-sizing: border-box !important; } html body #sakkaf-contact .contact-meta-divider { display: none !important; } html body #sakkaf-contact .contact-meta-item { min-width: 0 !important; align-items: flex-start !important; gap: 6px !important; } html body #sakkaf-contact .contact-meta-icon svg { width: 20px !important; height: 20px !important; } html body #sakkaf-contact .contact-meta-text { min-width: 0 !important; align-items: flex-start !important; } html body #sakkaf-contact .contact-meta-title { font-size: clamp(10px, 2.2vw, 13.5px) !important; } html body #sakkaf-contact .contact-meta-desc, html body #sakkaf-contact .contact-email-addr { max-width: 100% !important; font-size: clamp(9px, 1.9vw, 12px) !important; line-height: 1.35 !important; overflow-wrap: anywhere !important; } } @media (max-width: 380px) { html body #sakkaf-contact .contact-heading h2 { gap: 9px !important; font-size: 23px !important; } html body #sakkaf-contact .contact-heading h2::before, html body #sakkaf-contact .contact-heading h2::after { flex-basis: 34px !important; width: 34px !important; } html body #sakkaf-contact .contact-card { min-height: 168px !important; padding-inline: 3px !important; } html body #sakkaf-contact .contact-card-action { font-size: 8.5px !important; } } /* Keep the new email heading mobile-only so the desktop contact layout stays unchanged. */ .contact-email-title { display: none !important; } /* Mobile-only contact layout: stack the three contact cards vertically. */ @media (max-width: 767px) { html body #sakkaf-contact .contact-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; } html body #sakkaf-contact .contact-card { width: 100% !important; } html body #sakkaf-contact .contact-email-text { min-width: 0 !important; align-items: flex-start !important; } html body #sakkaf-contact .contact-email-title { display: block !important; margin-bottom: 2px !important; } } /* Keep narrow-screen contact details legible and center each service glyph optically. */ @media (max-width: 767px) { html body #sakkaf-contact .contact-card { min-height: 220px !important; padding: 14px 12px !important; } html body #sakkaf-contact .contact-service-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 56px !important; height: 56px !important; margin: 0 auto 8px !important; padding: 0 !important; line-height: 1 !important; } html body #sakkaf-contact .contact-service-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 1em !important; height: 1em !important; margin: 0 !important; padding: 0 !important; font-size: 24px !important; line-height: 1 !important; font-style: normal !important; } html body #sakkaf-contact .contact-service-icon i::before { display: block !important; width: auto !important; height: auto !important; margin: 0 !important; line-height: 1 !important; } html body #sakkaf-contact .contact-card-info h3 { margin-bottom: 4px !important; font-size: 20px !important; line-height: 1.35 !important; } html body #sakkaf-contact .contact-card-subtitle { margin-bottom: 6px !important; font-size: 14px !important; line-height: 1.45 !important; } html body #sakkaf-contact .contact-card-phone { font-size: 15px !important; line-height: 1.35 !important; } html body #sakkaf-contact .contact-phone-wa-icon { width: 24px !important; height: 24px !important; } html body #sakkaf-contact .contact-phone-wa-icon svg { width: 15px !important; height: 15px !important; } html body #sakkaf-contact .contact-card-action { min-height: 40px !important; padding: 8px 10px !important; font-size: 14px !important; line-height: 1.3 !important; } html body #sakkaf-contact .contact-card-action-arrow { font-size: 22px !important; } } /* Give narrow screens enough room for each offer tab and contact meta item. */ @media (max-width: 575px) { html body #sakkaf-packages.offers .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 8px !important; border-radius: 20px !important; } html body #sakkaf-packages.offers .tabs > .tab { min-height: 48px !important; padding: 8px 6px !important; font-size: 13px !important; line-height: 1.35 !important; white-space: normal !important; overflow-wrap: normal !important; text-align: center !important; } html body #sakkaf-packages.offers .tabs > .tab:nth-child(3) { grid-column: 1 / -1 !important; } html body #sakkaf-contact .contact-meta-row { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; padding: 12px !important; } html body #sakkaf-contact .contact-meta-item { width: 100% !important; min-height: 66px !important; padding: 10px 12px !important; justify-content: flex-start !important; background: #fffaf7 !important; border: 1px solid #eee2dc !important; border-radius: 12px !important; box-sizing: border-box !important; } html body #sakkaf-contact .contact-meta-text { flex: 1 1 auto !important; min-width: 0 !important; } html body #sakkaf-contact .contact-meta-title { font-size: 14px !important; line-height: 1.45 !important; } html body #sakkaf-contact .contact-meta-desc, html body #sakkaf-contact .contact-email-addr { font-size: 12px !important; line-height: 1.45 !important; white-space: normal !important; overflow-wrap: anywhere !important; } } /* Keep mobile testimonials compact while preserving a readable two-card row. */ @media (max-width: 760px) { html body #sakkaf-testimonials .review-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } html body #sakkaf-testimonials .review-card { min-width: 0 !important; min-height: 260px !important; padding: 12px 8px !important; } html body #sakkaf-testimonials .review-person { flex-direction: column !important; gap: 6px !important; } html body #sakkaf-testimonials .review-meta { align-items: center !important; min-width: 0 !important; text-align: center !important; } html body #sakkaf-testimonials .review-meta h3 { font-size: 15.5px !important; line-height: 1.3 !important; } html body #sakkaf-testimonials .review-country { justify-content: center !important; gap: 4px !important; font-size: 11px !important; } html body #sakkaf-testimonials .flag-badge { width: 18px !important; height: 12px !important; } html body #sakkaf-testimonials .review-avatar { width: 48px !important; height: 48px !important; } html body #sakkaf-testimonials .review-stars { margin: 8px 0 4px !important; font-size: 12px !important; letter-spacing: 1px !important; } html body #sakkaf-testimonials .review-text-wrap { padding: 0 3px !important; margin-top: 4px !important; } html body #sakkaf-testimonials .review-text { font-size: 11.5px !important; line-height: 1.55 !important; overflow-wrap: anywhere !important; } html body #sakkaf-testimonials .review-quote-right, html body #sakkaf-testimonials .review-quote-left { font-size: 20px !important; } html body #sakkaf-testimonials .review-video-hint { margin-top: 6px !important; font-size: 10px !important; } } /* Keep the responsive card limit while the carousel script initializes. */ html body #sakkaf-testimonials .review-cards > .review-card:nth-child(n + 4) { display: none !important; } html body #sakkaf-testimonials .review-cards-batched { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; } html body #sakkaf-testimonials .review-cards-batch { display: none !important; grid-area: 1 / 1 !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-content: start !important; gap: 14px !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 280ms ease, visibility 280ms ease !important; } html body #sakkaf-testimonials .review-cards-batch.is-active { display: grid !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } @media (max-width: 760px) { html body #sakkaf-testimonials .review-cards:not(.review-cards-batched) > .review-card:nth-child(n + 5) { display: none !important; } html body #sakkaf-testimonials .review-cards-batch { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } } html body #sakkaf-testimonials .review-cards-batched, html body #sakkaf-testimonials .review-cards-batch { width: 100% !important; min-width: 0 !important; } @media (max-width: 760px) { html body #sakkaf-testimonials .testimonials-layout { grid-template-columns: minmax(0, 1fr) !important; } html body #sakkaf-testimonials .review-cards-batched { grid-column: 1 / -1 !important; max-width: 100% !important; } html body #sakkaf-testimonials .review-cards-batch { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } html body #sakkaf-testimonials .review-cards-batch > .review-card { width: auto !important; min-width: 0 !important; } } html body #sakkaf-testimonials .review-text { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 4 !important; overflow: hidden !important; } /* Keep the mobile navigation simple, branded, and responsive to route changes. */ @media (max-width: 991px) { html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav { right: 10px !important; bottom: 10px !important; left: 10px !important; gap: 4px !important; min-height: 64px !important; padding: 6px !important; border: 1px solid #eaddea !important; border-radius: 22px !important; background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 10px 24px rgba(53, 24, 70, 0.18) !important; -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); } html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a, html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a:hover, html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a:focus { min-height: 52px !important; padding: 6px 4px !important; border: 1px solid transparent !important; border-radius: 16px !important; color: #5b3869 !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.2 !important; transition: transform 0.24s ease, color 0.24s ease, background-color 0.24s ease, box-shadow 0.24s ease !important; will-change: transform; } html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a:hover, html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a:focus { color: #7a1c68 !important; background: rgba(122, 28, 104, 0.06) !important; transform: translateY(-1px) !important; } html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a:active { transform: scale(0.95) !important; } html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a .fa { display: flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; margin: 0 0 2px !important; color: #8b176b !important; font-size: 18px !important; line-height: 1 !important; transition: transform 0.24s ease, color 0.24s ease !important; } html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li.active > a, html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li.active > a:hover, html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li.active > a:focus { color: #ffffff !important; background: linear-gradient(135deg, #7a1c68 0%, #a31578 100%) !important; border-color: rgba(255, 255, 255, 0.28) !important; box-shadow: 0 7px 16px rgba(122, 28, 104, 0.28) !important; animation: sakkafBottomNavActive 0.42s cubic-bezier(0.22, 0.9, 0.3, 1) both !important; } html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li.active > a .fa { color: #f4c86b !important; transform: translateY(-1px) scale(1.08) !important; } html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a:focus-visible { outline: 2px solid #c89432 !important; outline-offset: 2px !important; } #page-wrapper { padding-bottom: 86px !important; } } @keyframes sakkafBottomNavActive { 0% { opacity: 0.72; transform: translateY(5px) scale(0.9); } 70% { opacity: 1; transform: translateY(-1px) scale(1.03); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a, html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li > a .fa, html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav > li.active > a { animation: none !important; transition: none !important; } } /* ========================================================================== SAKKAF TOUR PACKAGE MODERN REDESIGN - HERO, SPECS, CTA & TABS ========================================================================== */ .sakkaf-package-page { direction: rtl; text-align: right; font-family: 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif; color: #2d3748; } #content.sakkaf-package-page { padding-top: 20px !important; } /* Hide legacy page title bar on package detail view */ body.package-detail-active .page-title-container { display: none !important; } /* 1. Breadcrumbs */ body.package-detail-active .sakkaf-bottom-nav-wrapper .bx-controls { display: none !important; } .sakkaf-pkg-breadcrumbs { margin: 0 -15px; padding: 16px 15px 18px; background: #ffffff; border-top: 1px solid #f2edf3; border-bottom: 1px solid #eee7ef; } .sakkaf-pkg-breadcrumbs .breadcrumb-list { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; list-style: none; margin: 0; padding: 0; gap: 12px; font-size: 17px; color: #53698f; } .sakkaf-pkg-breadcrumbs .breadcrumb-list a { color: #53698f; text-decoration: none; transition: color 0.2s ease; display: inline-flex; align-items: center; gap: 8px; line-height: 1.5; } .sakkaf-pkg-breadcrumbs .breadcrumb-list a:hover { color: #861657; } .sakkaf-pkg-breadcrumbs .breadcrumb-list .fa-home { color: #53698f !important; } .sakkaf-pkg-breadcrumbs .breadcrumb-sep { color: #b1bac8; font-size: 15px; } .sakkaf-pkg-breadcrumbs .breadcrumb-sep i { color: #b1bac8 !important; } .sakkaf-pkg-breadcrumbs .breadcrumb-current { color: #53698f; font-weight: 500; line-height: 1.5; } @media (max-width: 767px) { .sakkaf-pkg-breadcrumbs { padding-top: 12px; padding-bottom: 14px; } .sakkaf-pkg-breadcrumbs .breadcrumb-list { gap: 6px; font-size: 13px; } .sakkaf-pkg-breadcrumbs .breadcrumb-list a { gap: 5px; } .sakkaf-pkg-breadcrumbs .breadcrumb-sep { font-size: 11px; } } /* 2. Hero Card */ .sakkaf-hero-card { background: #ffffff; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 32px rgba(45, 12, 34, 0.07); border: 1px solid #eaedf1; margin-bottom: 20px; position: relative; } .sakkaf-hero-media { position: relative; width: 100%; height: 420px; overflow: hidden; background-color: #231924; } .sakkaf-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); } .sakkaf-hero-card:hover .sakkaf-hero-img { transform: scale(1.02); } .sakkaf-hero-gradient-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(15, 10, 18, 0.55) 0%, rgba(15, 10, 18, 0.1) 28%, rgba(15, 10, 18, 0.15) 55%, rgba(15, 10, 18, 0.88) 100% ); } /* Badges (Top Right in RTL) */ .sakkaf-hero-top-badges { position: absolute; top: 18px; right: 18px; z-index: 4; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; } .sakkaf-pill-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 50px; direction: ltr; text-align: right; font-size: 16px; font-weight: 800; line-height: 1.2; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); white-space: nowrap; } .sakkaf-pill-badge.badge-gold { background: linear-gradient(135deg, #f7c244 0%, #e5a722 100%); color: #4f3300; border: 1px solid rgba(255, 255, 255, 0.45); } .sakkaf-pill-badge.badge-gold i { color: #7a4f00; font-size: 12px; } .sakkaf-pill-badge.badge-featured { background: #ffffff; color: #861657; border: 1px solid rgba(134, 22, 87, 0.2); } .sakkaf-pill-badge.badge-featured i { color: #861657; font-size: 12px; } html body #page-wrapper .sakkaf-package-page .sakkaf-pill-badge { font-weight: 800 !important; } /* Action Icons (Top Left in RTL) */ .sakkaf-hero-top-actions { position: absolute; top: 18px; left: 18px; z-index: 4; display: flex; align-items: center; gap: 10px; } .sakkaf-glass-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(18, 12, 22, 0.46); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.32); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); padding: 0; outline: none; } .sakkaf-glass-btn:hover { background: rgba(134, 22, 87, 0.85); color: #ffffff; transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.6); } .sakkaf-glass-btn.is-active { background: #e91e63; color: #ffffff; border-color: #ff80ab; } .sakkaf-package-page .sakkaf-glass-btn, .sakkaf-package-page .sakkaf-glass-btn:hover, .sakkaf-package-page .sakkaf-glass-btn:focus, .sakkaf-package-page .sakkaf-glass-btn.is-active { background: rgba(0, 0, 0, 0.58) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.28) !important; } .sakkaf-package-page .sakkaf-glass-btn i, .sakkaf-package-page .sakkaf-glass-btn i::before { color: #ffffff !important; } .sakkaf-package-page #btnSharePkg .fa-share-alt::before { content: "\f064"; } /* Bottom overlay inside image */ .sakkaf-hero-bottom-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 24px; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .sakkaf-hero-meta { flex: 1; min-width: 0; } .sakkaf-hero-title { margin: 0 0 6px; color: #ffffff; font-size: 32px; font-weight: 700; line-height: 1.3; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65); } .sakkaf-hero-subtitle { margin: 0; color: rgba(255, 255, 255, 0.94); font-size: 16px; font-weight: 400; line-height: 1.4; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); } .sakkaf-hero-gallery-pill { flex-shrink: 0; background: rgba(18, 12, 22, 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.28); color: #ffffff; border-radius: 50px; padding: 7px 16px; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } .sakkaf-hero-gallery-pill .sakkaf-gallery-count { min-width: 38px; direction: ltr; unicode-bidi: isolate; text-align: center; } .sakkaf-package-page .sakkaf-gallery-control, .sakkaf-package-page .sakkaf-gallery-control:hover, .sakkaf-package-page .sakkaf-gallery-control:focus, .sakkaf-package-page .sakkaf-gallery-control:focus-visible { width: 24px; height: 24px; flex: 0 0 24px; padding: 0 !important; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; outline: none; box-shadow: none; } .sakkaf-package-page .sakkaf-gallery-control:hover, .sakkaf-package-page .sakkaf-gallery-control:focus-visible { background: rgba(255, 255, 255, 0.32) !important; } .sakkaf-package-page .sakkaf-gallery-control i, .sakkaf-package-page .sakkaf-gallery-control i::before { color: #ffffff !important; font-size: 10px; } /* Specs Bar (Attached to bottom of hero card) */ .sakkaf-specs-bar { display: flex; align-items: center; background: #ffffff; padding: 16px 20px; border-top: 1px solid #f0f2f5; } .sakkaf-spec-item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 12px; position: relative; text-align: center; } .sakkaf-spec-item:not(:last-child)::after { content: ""; position: absolute; left: 0; top: 15%; height: 70%; width: 1px; background: #e9ecef; } .sakkaf-spec-icon { width: 38px; height: 38px; border-radius: 50%; background: #fdf2f7; color: #861657; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .sakkaf-package-page .sakkaf-spec-icon i, .sakkaf-package-page .sakkaf-spec-icon i::before { color: inherit !important; } .sakkaf-package-page .sakkaf-spec-item:first-child .fa-calendar-check-o::before { content: "\f073"; } .sakkaf-spec-item:nth-child(1) .sakkaf-spec-icon { background: #fdf0f5; color: #a81c6b; } .sakkaf-spec-item:nth-child(2) .sakkaf-spec-icon { background: #fbf0f8; color: #7b1154; } .sakkaf-spec-item:nth-child(3) .sakkaf-spec-icon { background: #f9f1fc; color: #861657; } .sakkaf-spec-item:nth-child(4) .sakkaf-spec-icon { background: #fff8eb; color: #d98207; } .sakkaf-spec-text { font-size: 14.5px; font-weight: 600; color: #3b424e; line-height: 1.3; } @media (min-width: 768px) { .sakkaf-package-page .sakkaf-hero-card { overflow: visible; } .sakkaf-package-page .sakkaf-hero-bottom-content { bottom: 40px; } .sakkaf-package-page .sakkaf-hero-media { border-radius: 22px 22px 0 0; } .sakkaf-package-page .sakkaf-specs-bar { position: relative; z-index: 5; margin: -30px clamp(18px, 3vw, 32px) 0; padding: 12px 14px; border: 1px solid #eaedf1; border-radius: 18px; box-shadow: 0 12px 28px rgba(45, 12, 34, 0.14); } .sakkaf-package-page .sakkaf-spec-item { min-width: 0; flex-direction: column; align-items: center; gap: 6px; padding: 5px 12px; } .sakkaf-package-page .sakkaf-spec-text { max-width: 100%; font-size: 13px; line-height: 1.35; text-align: center; white-space: normal; overflow-wrap: anywhere; } } /* 3. Price & Action CTA Card */ .sakkaf-cta-card { background: #ffffff; border-radius: 20px; padding: 22px 28px; box-shadow: 0 8px 28px rgba(45, 12, 34, 0.05); border: 1px solid #eaedf1; margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .sakkaf-cta-price-part { flex: 1; text-align: right; min-width: 220px; } .sakkaf-price-subtitle { font-size: 14.5px; color: #718096; font-weight: 500; margin-bottom: 4px; } .sakkaf-price-main-val { display: flex; align-items: baseline; gap: 8px; } .sakkaf-price-num { font-size: 46px; font-weight: 800; color: #7b1154; line-height: 1.05; letter-spacing: -0.5px; font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif; } .sakkaf-price-unit { font-size: 15px; font-weight: 600; color: #616e7f; } .sakkaf-price-code { display: inline-block; margin-top: 6px; background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 2px 8px; font-size: 12px; color: #718096; font-weight: 600; } .sakkaf-cta-divider { width: 1px; align-self: stretch; background: #eef1f4; margin: 0 4px; } .sakkaf-cta-buttons-part { flex: 1.2; display: flex; flex-direction: column; gap: 12px; max-width: 440px; } .sakkaf-cta-btn-primary { background: linear-gradient(135deg, #74104f 0%, #941865 100%); color: #ffffff !important; border: none; border-radius: 50px; padding: 14px 26px; font-size: 17.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none !important; box-shadow: 0 6px 20px rgba(122, 17, 84, 0.32); transition: all 0.25s ease; cursor: pointer; } .sakkaf-cta-btn-primary:hover { background: linear-gradient(135deg, #600c40 0%, #821257 100%); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(122, 17, 84, 0.42); color: #ffffff !important; } .sakkaf-cta-btn-primary i { font-size: 20px; } .sakkaf-cta-btn-secondary { background: #fffdf9; color: #b77209 !important; border: 2px solid #e09f3e; border-radius: 50px; padding: 12px 26px; font-size: 16.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none !important; transition: all 0.25s ease; cursor: pointer; } .sakkaf-cta-btn-secondary:hover { background: #fff7eb; border-color: #c8831e; color: #8c5300 !important; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(224, 159, 62, 0.2); } .sakkaf-cta-btn-secondary i { font-size: 18px; } @media (min-width: 768px) { .sakkaf-package-page .sakkaf-cta-card { direction: ltr; } .sakkaf-package-page .sakkaf-cta-price-part { direction: rtl; text-align: center; } .sakkaf-package-page .sakkaf-price-main-val { direction: ltr; justify-content: center; } html body #page-wrapper .sakkaf-package-page .sakkaf-price-num { font-size: clamp(52px, 4.2vw, 64px); font-weight: 900 !important; } .sakkaf-package-page .sakkaf-price-unit { font-size: 16.5px; } .sakkaf-package-page .sakkaf-cta-buttons-part { direction: rtl; } } /* 4. Navigation Tabs Bar */ .sakkaf-modern-tabs-card { background: #ffffff; border-radius: 18px; padding: 8px 10px; box-shadow: 0 6px 24px rgba(45, 12, 34, 0.04); border: 1px solid #eaedf1; margin-bottom: 24px; } .sakkaf-modern-tabs-nav { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 6px; width: 100%; } .sakkaf-modern-tabs-nav > li { flex: 1; text-align: center; margin: 0; } .sakkaf-modern-tabs-nav > li > a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: 12px; color: #5b6777 !important; font-size: 15px; font-weight: 600; text-decoration: none !important; background: transparent; border: none; border-bottom: 3px solid transparent; transition: all 0.22s ease; white-space: nowrap; } .sakkaf-modern-tabs-nav > li > a i { font-size: 16px; color: #8c9ba5; transition: color 0.22s ease, transform 0.22s ease; } .sakkaf-modern-tabs-nav > li > a:hover { background: #faf5f8; color: #861657 !important; } .sakkaf-modern-tabs-nav > li > a:hover i { color: #861657; transform: scale(1.1); } .sakkaf-modern-tabs-nav > li.active > a, .sakkaf-modern-tabs-nav > li.active > a:hover, .sakkaf-modern-tabs-nav > li.active > a:focus { background: #fdf0f7 !important; color: #861657 !important; border-bottom: 3px solid #861657 !important; font-weight: 700 !important; } .sakkaf-modern-tabs-nav > li.active > a i { color: #861657 !important; } /* Tab panes styling enhancements */ .sakkaf-tab-panel { background: #ffffff; border-radius: 18px; padding: 24px; box-shadow: 0 6px 24px rgba(45, 12, 34, 0.04); border: 1px solid #eaedf1; margin-bottom: 24px; } .sakkaf-tab-panel-title { font-size: 20px; font-weight: 700; color: #7b1154; margin: 0 0 18px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #f8eaf1; padding-bottom: 12px; } .sakkaf-tab-panel-title i { color: #861657; } /* Toast Notification */ .sakkaf-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(100px); background: #201323; color: #ffffff; padding: 12px 24px; border-radius: 50px; font-size: 14.5px; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.2); z-index: 999999; opacity: 0; transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); pointer-events: none; direction: rtl; } .sakkaf-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } /* 5. Responsive Breakpoints */ @media (max-width: 991px) { .sakkaf-hero-media { height: 360px; } .sakkaf-hero-title { font-size: 26px; } .sakkaf-hero-subtitle { font-size: 14.5px; } .sakkaf-price-num { font-size: 38px; } .sakkaf-cta-card { padding: 18px 20px; gap: 18px; } } @media (max-width: 767px) { .sakkaf-hero-card { border-radius: 16px; margin-bottom: 14px; } .sakkaf-hero-media { height: 280px; } .sakkaf-hero-top-badges { top: 12px; right: 12px; gap: 6px; } .sakkaf-pill-badge { padding: 4px 10px; font-size: 14px; } .sakkaf-hero-top-actions { top: 12px; left: 12px; gap: 6px; } .sakkaf-glass-btn { width: 36px; height: 36px; font-size: 14px; } .sakkaf-hero-bottom-content { padding: 14px 14px; gap: 10px; flex-direction: column; align-items: flex-start; } .sakkaf-hero-title { font-size: 20px; margin-bottom: 3px; } .sakkaf-hero-subtitle { font-size: 13px; } .sakkaf-hero-gallery-pill { align-self: flex-end; margin-top: -12px; padding: 4px 10px; font-size: 11.5px; } /* Specs bar in 2x2 grid on mobile */ .sakkaf-specs-bar { flex-wrap: wrap; padding: 10px 8px; } .sakkaf-spec-item { flex: 0 0 50%; max-width: 50%; padding: 8px 6px; justify-content: flex-start; } .sakkaf-spec-item:not(:last-child)::after { display: none; } .sakkaf-spec-item:nth-child(1), .sakkaf-spec-item:nth-child(2) { border-bottom: 1px solid #f0f2f5; } .sakkaf-spec-icon { width: 32px; height: 32px; font-size: 14px; } .sakkaf-spec-text { font-size: 13px; text-align: right; } /* CTA card stacks on mobile */ .sakkaf-cta-card { flex-direction: column; align-items: stretch; padding: 16px; gap: 14px; border-radius: 16px; margin-bottom: 14px; } .sakkaf-cta-price-part { text-align: center; } .sakkaf-price-main-val { justify-content: center; } .sakkaf-price-num { font-size: 38px; } .sakkaf-cta-divider { display: none; } .sakkaf-cta-buttons-part { max-width: 100%; } .sakkaf-cta-btn-primary { padding: 12px 20px; font-size: 16px; } .sakkaf-cta-btn-secondary { padding: 11px 20px; font-size: 15px; } /* Tabs horizontally scrollable on small screens */ .sakkaf-modern-tabs-card { padding: 6px; border-radius: 14px; margin-bottom: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sakkaf-modern-tabs-card::-webkit-scrollbar { display: none; } .sakkaf-modern-tabs-nav { min-width: 480px; } .sakkaf-modern-tabs-nav > li > a { padding: 9px 10px; font-size: 13px; gap: 5px; } } /* Hide duplicate legacy sidebar on package details page */ .sakkaf-package-page .sidebar { display: none !important; } .sakkaf-package-page #main { width: 100% !important; float: none !important; padding: 0 15px; } .sakkaf-package-page .car-detail-page { max-width: 1170px; margin: 0 auto; overflow-x: hidden; } /* Modernize Booking & Contact Sections */ .sakkaf-package-page .booking-section { background: #ffffff !important; border-radius: 20px !important; padding: 26px !important; box-shadow: 0 6px 24px rgba(45, 12, 34, 0.04) !important; border: 1px solid #eaedf1 !important; margin-bottom: 24px !important; } .sakkaf-package-page .heading-orange { background: linear-gradient(135deg, #74104f 0%, #941865 100%) !important; border-radius: 12px; color: #ffffff; padding: 12px 18px; font-size: 19px; margin-top: 24px; margin-bottom: 16px; } .sakkaf-package-page .detailed-logo.note { background: #ffffff !important; border-radius: 18px !important; padding: 24px !important; box-shadow: 0 6px 24px rgba(45, 12, 34, 0.04) !important; border: 1px solid #eaedf1 !important; color: #2d3748 !important; } .sakkaf-package-page .detailed-logo.note .box-title { color: #7b1154 !important; font-size: 20px; font-weight: 700; border-bottom: 2px solid #f8eaf1; padding-bottom: 10px; margin-bottom: 14px; } .sakkaf-package-page .detailed-logo.note ul, .sakkaf-package-page .detailed-logo.note ol { color: #4a5568 !important; font-size: 15px; line-height: 1.8; } .sakkaf-package-page .detailed-logo.note h4 { color: #2d3748 !important; } /* ========================================================================== HOTELS, TRANSPORTATION & DOMESTIC FLIGHTS SECTION REDESIGN ========================================================================== */ /* Section Decor Headers */ .sakkaf-package-page .sakkaf-decor-header { position: relative; text-align: center; margin: 35px 0 20px; display: flex; align-items: center; justify-content: center; direction: rtl; } .sakkaf-package-page .sakkaf-decor-title-wrap { display: inline-flex; align-items: center; justify-content: center; gap: 16px; } .sakkaf-package-page .sakkaf-decor-dash { width: 36px; height: 2px; background: #861657; border-radius: 2px; display: inline-block; } .sakkaf-package-page .sakkaf-decor-title { margin: 0; font-size: 24px; font-weight: 800; color: #861657; font-family: 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif; letter-spacing: -0.3px; line-height: 1.2; } .sakkaf-package-page .sakkaf-decor-badge { position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 44px; height: 44px; border-radius: 50%; background: #fdf0f7; color: #861657; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 4px 14px rgba(134, 22, 87, 0.08); border: 1px solid rgba(134, 22, 87, 0.12); } .sakkaf-package-page .sakkaf-decor-badge i { color: #861657 !important; font-size: 18px !important; line-height: 1 !important; } /* Hotel Cards List */ .sakkaf-package-page .sakkaf-hotels-list { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 920px; margin: 0 auto !important; padding: 0 !important; direction: rtl; } .sakkaf-package-page .sakkaf-hotel-card { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; background: #ffffff !important; border: 1px solid #edf0f5 !important; border-radius: 18px !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important; padding: 16px 20px !important; margin-bottom: 0 !important; direction: ltr !important; text-align: right !important; gap: 20px !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; } .sakkaf-package-page .sakkaf-hotel-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07) !important; } /* Hotel Image (Right) */ .sakkaf-package-page .sakkaf-hotel-image { order: 3 !important; width: 220px !important; height: 125px !important; min-width: 220px !important; max-width: 220px !important; border-radius: 14px !important; overflow: hidden !important; flex-shrink: 0 !important; background: #f0f2f5 !important; } .sakkaf-package-page .sakkaf-hotel-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Hotel Info (Middle) */ .sakkaf-package-page .sakkaf-hotel-info { order: 2 !important; flex: 1 !important; min-width: 0 !important; padding: 0 !important; text-align: right !important; direction: rtl !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } .sakkaf-package-page .sakkaf-hotel-city { display: flex !important; align-items: center !important; gap: 6px !important; color: #2c1b3d !important; font-size: 18px !important; font-weight: 800 !important; margin-bottom: 4px !important; } .sakkaf-package-page .sakkaf-hotel-city i { color: #861657 !important; font-size: 17px !important; } .sakkaf-package-page .sakkaf-hotel-name { margin-bottom: 6px !important; } .sakkaf-package-page .sakkaf-hotel-name a { color: #5a6578 !important; font-size: 14.5px !important; font-weight: 600 !important; text-decoration: none !important; transition: color 0.2s ease !important; } .sakkaf-package-page .sakkaf-hotel-name a:hover { color: #861657 !important; } .sakkaf-package-page .sakkaf-hotel-stars { display: flex !important; align-items: center !important; gap: 3px !important; margin-top: 2px !important; direction: rtl !important; width: fit-content !important; } .sakkaf-package-page .sakkaf-hotel-stars i { color: #f59e0b !important; font-size: 15px !important; } /* Hotel Meta (Left) */ .sakkaf-package-page .sakkaf-hotel-meta { order: 1 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; min-width: 140px !important; flex-shrink: 0 !important; border: none !important; padding: 0 !important; direction: rtl !important; } .sakkaf-package-page .sakkaf-nights-pill { background: #fdf0f7 !important; color: #861657 !important; border-radius: 50px !important; padding: 5px 14px !important; font-size: 13.5px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; line-height: 1 !important; } .sakkaf-package-page .sakkaf-nights-pill i { color: #861657 !important; font-size: 13px !important; } .sakkaf-package-page .sakkaf-hotel-spec-row { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13.5px !important; color: #616e7f !important; font-weight: 500 !important; } .sakkaf-package-page .sakkaf-hotel-spec-row i { color: #861657 !important; font-size: 14px !important; width: 16px !important; text-align: center !important; } /* Ground Transportation Card */ .sakkaf-package-page .sakkaf-ground-card { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 920px !important; margin: 0 auto 35px !important; background: #ffffff !important; border: 1px solid #edf0f5 !important; border-radius: 18px !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important; padding: 20px !important; direction: rtl !important; gap: 24px !important; } .sakkaf-package-page .sakkaf-ground-media { order: 2 !important; width: 44% !important; max-width: 360px !important; height: 195px !important; border-radius: 14px !important; overflow: hidden !important; flex-shrink: 0 !important; background: #f0f2f5 !important; } .sakkaf-package-page .sakkaf-ground-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .sakkaf-package-page .sakkaf-ground-content { order: 1 !important; flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 8px 10px !important; direction: rtl !important; text-align: right !important; } .sakkaf-package-page .sakkaf-ground-bullets { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } .sakkaf-package-page .sakkaf-ground-bullets li { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 15px !important; font-weight: 600 !important; color: #2c1b3d !important; } .sakkaf-package-page .sakkaf-ground-bullets li i { color: #c07e15 !important; font-size: 17px !important; } .sakkaf-package-page .sakkaf-ground-divider { border-top: 1px solid #f0f2f5 !important; margin: 14px 0 12px !important; } .sakkaf-package-page .sakkaf-ground-notice { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13.5px !important; font-weight: 600 !important; color: #5a6578 !important; } .sakkaf-package-page .sakkaf-ground-notice i { color: #4361ee !important; font-size: 16px !important; } /* Domestic Flights Card */ .sakkaf-package-page .sakkaf-flight-card { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 920px !important; margin: 0 auto 35px !important; background: #ffffff !important; border: 1px solid #edf0f5 !important; border-radius: 18px !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important; padding: 20px !important; direction: rtl !important; gap: 24px !important; } .sakkaf-package-page .sakkaf-flight-media { order: 2 !important; width: 44% !important; max-width: 360px !important; height: 195px !important; border-radius: 14px !important; overflow: hidden !important; flex-shrink: 0 !important; background: #f0f2f5 !important; } .sakkaf-package-page .sakkaf-flight-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .sakkaf-package-page .sakkaf-flight-content { order: 1 !important; flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 10px !important; padding: 8px 10px !important; direction: rtl !important; text-align: right !important; } .sakkaf-package-page .sakkaf-flight-route-list { display: flex !important; flex-direction: column !important; gap: 9px !important; } .sakkaf-package-page .sakkaf-flight-route-pill { background: #f8fafc !important; border: 1px solid #edf2f7 !important; border-radius: 10px !important; padding: 9px 20px !important; display: flex !important; align-items: center !important; justify-content: space-around !important; font-size: 15.5px !important; font-weight: 700 !important; color: #2c1b3d !important; } .sakkaf-package-page .sakkaf-flight-route-pill .route-city { flex: 1 !important; text-align: center !important; } .sakkaf-package-page .sakkaf-flight-route-pill .route-arrow { color: #861657 !important; font-size: 15px !important; padding: 0 10px !important; } .sakkaf-package-page .sakkaf-flight-notice { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13.5px !important; font-weight: 500 !important; color: #64748b !important; margin-top: 4px !important; } .sakkaf-package-page .sakkaf-flight-notice i { color: #861657 !important; font-size: 15px !important; } /* Responsive Mobile Breakpoint for Hotels & Transport */ @media (max-width: 767px) { .sakkaf-package-page .sakkaf-decor-header { margin: 25px 0 15px !important; } .sakkaf-package-page .sakkaf-decor-title { font-size: 19px !important; } .sakkaf-package-page .sakkaf-decor-dash { width: 24px !important; } .sakkaf-package-page .sakkaf-decor-badge { width: 36px !important; height: 36px !important; font-size: 15px !important; } .sakkaf-package-page .sakkaf-decor-badge i { font-size: 15px !important; } .sakkaf-package-page .sakkaf-hotel-card { flex-direction: column !important; align-items: stretch !important; padding: 14px !important; gap: 12px !important; } .sakkaf-package-page .sakkaf-hotel-image { order: 1 !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; height: 160px !important; } .sakkaf-package-page .sakkaf-hotel-info { order: 2 !important; } .sakkaf-package-page .sakkaf-hotel-meta { order: 3 !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; border-top: 1px solid #f0f2f5 !important; padding-top: 10px !important; } .sakkaf-package-page .sakkaf-ground-card, .sakkaf-package-page .sakkaf-flight-card { flex-direction: column !important; align-items: stretch !important; padding: 14px !important; gap: 14px !important; } .sakkaf-package-page .sakkaf-ground-media, .sakkaf-package-page .sakkaf-flight-media { order: 1 !important; width: 100% !important; max-width: 100% !important; height: 160px !important; } .sakkaf-package-page .sakkaf-ground-content, .sakkaf-package-page .sakkaf-flight-content { order: 2 !important; padding: 0 !important; } } .sakkaf-package-page .sakkaf-tours-heading { display: flex !important; align-items: center; justify-content: center; gap: 12px; width: 100%; margin: 24px 0 12px !important; padding: 0 0 8px !important; border: 0 !important; background: transparent !important; color: #861657 !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1.35; text-align: center; } .sakkaf-package-page .sakkaf-tours-heading::before, .sakkaf-package-page .sakkaf-tours-heading::after { display: block; width: 34px; height: 1px; background: #c89432; content: ""; } .sakkaf-package-page .sakkaf-tours-heading-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #fceff6; color: #861657; flex: 0 0 34px; } .sakkaf-package-page .sakkaf-tours-heading-icon i, .sakkaf-package-page .sakkaf-tours-heading-icon i::before { color: #861657 !important; font-size: 16px; } .sakkaf-package-page .sakkaf-tours-timeline { position: relative; width: 100%; max-width: 760px; margin: 0 auto 24px !important; padding-right: 34px; direction: rtl; } .sakkaf-package-page .sakkaf-tours-timeline::before { position: absolute; top: 16px; right: 13px; bottom: 16px; width: 2px; background: repeating-linear-gradient(to bottom, #c89432 0 4px, transparent 4px 9px); content: ""; } .sakkaf-package-page .sakkaf-tour-card { position: relative; display: grid; grid-template-columns: 145px minmax(0, 1fr); grid-template-rows: minmax(88px, auto); align-items: stretch; width: 100%; min-height: 88px; margin: 0 0 8px !important; overflow: visible; border: 1px solid #f0e6ed !important; border-radius: 11px !important; background: #fff !important; box-shadow: 0 4px 14px rgba(85, 30, 70, .08) !important; direction: ltr; } .sakkaf-package-page .sakkaf-tour-card:last-child { margin-bottom: 0 !important; } .sakkaf-package-page .sakkaf-tour-step { position: absolute; top: 50%; right: -31px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; transform: translateY(-50%); border: 2px solid #fff; border-radius: 50%; background: #9c126a; color: #fff; font-size: 13px; font-weight: 800 !important; line-height: 1; box-shadow: 0 2px 6px rgba(85, 30, 70, .16); direction: ltr; } .sakkaf-package-page .sakkaf-tour-image { grid-column: 1; grid-row: 1; min-width: 0; min-height: 88px; overflow: hidden; border-radius: 10px 0 0 10px; } .sakkaf-package-page .sakkaf-tour-image img { display: block; width: 100% !important; height: 100% !important; min-height: 88px; object-fit: cover; } .sakkaf-package-page .sakkaf-tour-info { display: flex; grid-column: 2; grid-row: 1; min-width: 0; flex-direction: column; justify-content: center; padding: 10px 14px; direction: rtl; text-align: right; } .sakkaf-package-page .sakkaf-tour-info h3 { margin: 0 0 4px !important; color: #3f2751 !important; font-size: 16px; font-weight: 800 !important; line-height: 1.35; } .sakkaf-package-page .sakkaf-tour-info p { margin: 0; color: #53698f !important; font-size: 12px; line-height: 1.55; } html body #page-wrapper .sakkaf-package-page .sakkaf-tours-heading, html body #page-wrapper .sakkaf-package-page .sakkaf-tour-info h3, html body #page-wrapper .sakkaf-package-page .sakkaf-tour-step { font-weight: 800 !important; } html body #page-wrapper .sakkaf-package-page .sakkaf-tours-heading-icon i { margin: 0 !important; line-height: 1 !important; } @media (max-width: 767px) { .sakkaf-package-page .sakkaf-tours-heading { gap: 8px; margin-top: 20px !important; font-size: 18px !important; } .sakkaf-package-page .sakkaf-tours-heading::before, .sakkaf-package-page .sakkaf-tours-heading::after { width: 24px; } .sakkaf-package-page .sakkaf-tours-heading-icon { width: 30px; height: 30px; flex-basis: 30px; } .sakkaf-package-page .sakkaf-tours-timeline { padding-right: 28px; } .sakkaf-package-page .sakkaf-tours-timeline::before { right: 10px; } .sakkaf-package-page .sakkaf-tour-card { grid-template-columns: 118px minmax(0, 1fr); grid-template-rows: minmax(84px, auto); min-height: 84px; } .sakkaf-package-page .sakkaf-tour-image, .sakkaf-package-page .sakkaf-tour-image img { min-height: 84px; } .sakkaf-package-page .sakkaf-tour-info { padding: 8px 10px; } .sakkaf-package-page .sakkaf-tour-info h3 { font-size: 13px; } .sakkaf-package-page .sakkaf-tour-info p { font-size: 10.5px; line-height: 1.45; } .sakkaf-package-page .sakkaf-tour-step { right: -25px; width: 24px; height: 24px; font-size: 12px; } } @media (max-width: 400px) { .sakkaf-package-page .sakkaf-tour-card { grid-template-columns: 100px minmax(0, 1fr); } .sakkaf-package-page .sakkaf-tour-info { padding-right: 7px; padding-left: 7px; } .sakkaf-package-page .sakkaf-tour-info h3 { font-size: 12px; } .sakkaf-package-page .sakkaf-tour-info p { font-size: 10px; } } html body #page-wrapper .sakkaf-package-page .sakkaf-ground-bullets li, html body #page-wrapper .sakkaf-package-page .sakkaf-ground-bullets li span { font-size: 17px !important; font-weight: 800 !important; line-height: 1.5 !important; } html body #page-wrapper .sakkaf-package-page .sakkaf-ground-notice, html body #page-wrapper .sakkaf-package-page .sakkaf-ground-notice span { font-size: 15px !important; font-weight: 800 !important; line-height: 1.5 !important; } @media (max-width: 767px) { html body #page-wrapper .sakkaf-package-page .sakkaf-ground-bullets li, html body #page-wrapper .sakkaf-package-page .sakkaf-ground-bullets li span { font-size: 14px !important; } html body #page-wrapper .sakkaf-package-page .sakkaf-ground-notice, html body #page-wrapper .sakkaf-package-page .sakkaf-ground-notice span { font-size: 13px !important; } } .sakkaf-package-page .sakkaf-btn-more-hotels { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: fit-content !important; min-width: 220px !important; margin: 20px auto 35px !important; padding: 10px 24px !important; border: 1.5px solid #df9a34 !important; border-radius: 50px !important; color: #b77209 !important; background: #ffffff !important; font-size: 15.5px !important; font-weight: 700 !important; text-decoration: none !important; direction: ltr !important; } .sakkaf-package-page .sakkaf-btn-more-hotels i { display: inline-block !important; color: #b77209 !important; font-family: FontAwesome !important; font-size: 14px !important; font-style: normal !important; line-height: 1 !important; } .sakkaf-package-page .sakkaf-btn-more-hotels span { direction: rtl !important; text-align: right !important; } .sakkaf-package-page .sakkaf-btn-more-hotels:hover, .sakkaf-package-page .sakkaf-btn-more-hotels:focus { color: #8a5300 !important; background: #fff9f0 !important; text-decoration: none !important; } html body #page-wrapper .sakkaf-package-page .sakkaf-flight-route-pill .route-city { font-size: 17px !important; font-weight: 800 !important; line-height: 1.4 !important; } html body #page-wrapper .sakkaf-package-page .sakkaf-flight-route-pill .route-arrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; padding: 0 !important; border-radius: 50% !important; background: #fceff6 !important; color: #861657 !important; } html body #page-wrapper .sakkaf-package-page .sakkaf-flight-route-pill .route-arrow i { display: inline-block !important; color: #861657 !important; font-family: FontAwesome !important; font-size: 16px !important; font-style: normal !important; line-height: 1 !important; } html body #page-wrapper .sakkaf-package-page .sakkaf-flight-notice, html body #page-wrapper .sakkaf-package-page .sakkaf-flight-notice span { font-size: 15px !important; font-weight: 800 !important; line-height: 1.5 !important; } html body #page-wrapper .sakkaf-package-page .sakkaf-flight-notice i { display: inline-block !important; color: #861657 !important; font-family: FontAwesome !important; font-size: 17px !important; font-style: normal !important; line-height: 1 !important; } @media (max-width: 767px) { html body #page-wrapper .sakkaf-package-page .sakkaf-flight-route-pill .route-city { font-size: 14px !important; } html body #page-wrapper .sakkaf-package-page .sakkaf-flight-notice, html body #page-wrapper .sakkaf-package-page .sakkaf-flight-notice span { font-size: 13px !important; } } html body #page-wrapper .sakkaf-package-page .sakkaf-hotel-city, html body #page-wrapper .sakkaf-package-page .sakkaf-hotel-city span, html body #page-wrapper .sakkaf-package-page .sakkaf-hotel-name, html body #page-wrapper .sakkaf-package-page .sakkaf-hotel-name a, html body #page-wrapper .sakkaf-package-page .sakkaf-nights-pill, html body #page-wrapper .sakkaf-package-page .sakkaf-nights-pill span, html body #page-wrapper .sakkaf-package-page .sakkaf-hotel-spec-row, html body #page-wrapper .sakkaf-package-page .sakkaf-hotel-spec-row span { font-weight: 800 !important; } /* Keep the package detail canvas consistent and slightly inset on tablets and desktop screens. */ @media (min-width: 768px) { html body #page-wrapper section#content.sakkaf-package-page > .container.car-detail-page { width: calc(100% - 64px) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } html body #page-wrapper section#content.sakkaf-package-page #package { padding-left: 0 !important; padding-right: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotels-list, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-ground-card, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-flight-card, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tours-timeline, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-section { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } } /* ========================================================================== Sakkaf Package - Includes / Excludes Section (يشمل / لا يشمل) Exact match to uploaded reference media_1788895068545.png ========================================================================== */ html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-section { width: 100% !important; max-width: none !important; margin: 30px 0 25px !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-title-wrap { display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; margin: 0 auto 24px !important; text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-title-wrap .sakkaf-inout-dash { display: inline-block !important; width: 36px !important; height: 2px !important; background: #7a1b50 !important; border-radius: 2px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-title-wrap .sakkaf-inout-title { margin: 0 !important; padding: 0 !important; font-family: inherit !important; font-size: 22px !important; font-weight: 800 !important; color: #7a1b50 !important; line-height: 1.3 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; width: 100% !important; direction: rtl !important; margin: 0 !important; padding: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-card { background: #ffffff !important; border: 1px solid #eef2f5 !important; border-radius: 18px !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important; padding: 14px 16px !important; display: flex !important; flex-direction: column !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-card:hover { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07) !important; } /* Included Card Header (Green) */ html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-header-included { background: #ecfdf5 !important; border-radius: 12px !important; padding: 10px 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; color: #15803d !important; font-size: 17px !important; font-weight: 800 !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-header-included .sakkaf-badge-circle { width: 26px !important; height: 26px !important; min-width: 26px !important; border-radius: 50% !important; background: #16a34a !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 6px rgba(22, 163, 74, 0.28) !important; } /* Excluded Card Header (Magenta / Rose) */ html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-header-excluded { background: #fdf2f8 !important; border-radius: 12px !important; padding: 10px 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; color: #be185d !important; font-size: 17px !important; font-weight: 800 !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-header-excluded .sakkaf-badge-circle { width: 26px !important; height: 26px !important; min-width: 26px !important; border-radius: 50% !important; background: #be185d !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 6px rgba(190, 24, 93, 0.28) !important; } /* Items List */ html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-items { list-style: none !important; margin: 16px 0 6px 0 !important; padding: 0 8px !important; display: flex !important; flex-direction: column !important; gap: 13px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-item { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; font-size: 15px !important; font-weight: 700 !important; color: #4b5563 !important; line-height: 1.5 !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-item .sakkaf-inout-svg { flex-shrink: 0 !important; margin-left: 2px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-item span { flex: 1 1 auto !important; text-align: right !important; } @media (max-width: 767px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-grid { grid-template-columns: 1fr !important; gap: 15px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-title-wrap .sakkaf-inout-title { font-size: 18px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-header-included, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-header-excluded { font-size: 15.5px !important; padding: 9px 14px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-item { font-size: 13.5px !important; gap: 8px !important; } } html body #page-wrapper section#content.sakkaf-package-page .sidebar { display: none !important; } /* ========================================================================== Sakkaf Package - Exact Layout & Dimensions from AlSakkaf-HTML-CSS ========================================================================== */ .sakkaf-package-page { font-family: 'Cairo', Tahoma, Arial, sans-serif !important; } .sakkaf-package-page svg.icon { width: 25px !important; height: 25px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; flex-shrink: 0 !important; display: inline-block !important; vertical-align: middle !important; } .sakkaf-package-page .icon.solid { fill: currentColor !important; stroke-width: 0 !important; } /* Page container width matching reference 1448px */ html body #page-wrapper section#content.sakkaf-package-page > .container.car-detail-page { width: 96% !important; max-width: 1448px !important; margin: 0 auto !important; display: block !important; padding-left: 0 !important; padding-right: 0 !important; } /* Breadcrumb */ .sakkaf-package-page .breadcrumb.sakkaf-pkg-breadcrumbs { height: 43px !important; max-width: 1448px !important; margin: auto !important; display: flex !important; align-items: center !important; gap: 18px !important; padding: 0 36px !important; font-size: 12px !important; font-weight: 600 !important; background: transparent !important; color: var(--sakkaf-purple) !important; direction: rtl !important; } .sakkaf-package-page .breadcrumb.sakkaf-pkg-breadcrumbs a { color: inherit !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .sakkaf-package-page .breadcrumb.sakkaf-pkg-breadcrumbs .icon { width: 20px !important; height: 20px !important; } .sakkaf-package-page .breadcrumb.sakkaf-pkg-breadcrumbs .chevron { font-size: 20px !important; color: #c7b0ca !important; } /* Desktop reference: 1448 x 1086. The hero starts at y=122. */ .sakkaf-package-page .hero { height: 385px !important; position: relative !important; background-color: #0087a7 !important; background-position: center 53% !important; background-size: cover !important; background-repeat: no-repeat !important; color: #fff !important; border-radius: 18px 18px 0 0 !important; overflow: visible !important; } .sakkaf-package-page .hero:before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(270deg, #003d6263 0%, #00476223 45%, transparent 75%) !important; border-radius: 18px 18px 0 0 !important; pointer-events: none !important; } .sakkaf-package-page .hero-inner { max-width: 1448px !important; height: 100% !important; position: relative !important; margin: auto !important; padding: 51px 48px 40px !important; box-sizing: border-box !important; } .sakkaf-package-page .hero-copy { margin-left: 405px !important; text-align: right !important; direction: rtl !important; } .sakkaf-package-page .badges { display: flex !important; gap: 12px !important; align-items: center !important; margin-bottom: 17px !important; direction: rtl !important; } .sakkaf-package-page .badge { display: inline-flex !important; gap: 9px !important; align-items: center !important; border-radius: 25px !important; padding: 4px 16px !important; font-size: 15px !important; font-weight: 700 !important; background: linear-gradient(100deg, #fff, #f9d7f4) !important; color: var(--sakkaf-pink) !important; height: 39px !important; border: none !important; box-sizing: border-box !important; } .sakkaf-package-page .badge.gold { background: linear-gradient(100deg, #fff0d0, #ffc770) !important; color: #be7208 !important; } .sakkaf-package-page .badge .icon { width: 20px !important; height: 20px !important; } .sakkaf-package-page .hero h1, .sakkaf-package-page .sakkaf-trip-title { font-size: 49px !important; line-height: 1.5 !important; font-weight: 800 !important; margin: 0 0 3px !important; letter-spacing: 0 !important; color: #ffffff !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important; font-family: 'Cairo', Tahoma, Arial, sans-serif !important; } .sakkaf-package-page .hero-subtitle { font-size: 24px !important; margin: 0 !important; line-height: 1.8 !important; font-weight: 500 !important; color: #ffffff !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important; font-family: 'Cairo', Tahoma, Arial, sans-serif !important; } .sakkaf-package-page .trip-facts { display: flex !important; gap: 0 !important; align-items: center !important; margin-top: 42px !important; white-space: nowrap !important; direction: rtl !important; } .sakkaf-package-page .trip-facts > div { display: flex !important; gap: 15px !important; align-items: center !important; padding: 0 21px !important; border-left: 1px solid #ffffff60 !important; font-size: 16px !important; font-weight: 700 !important; height: 43px !important; color: #ffffff !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important; } .sakkaf-package-page .trip-facts > div:first-child { padding-right: 0 !important; } .sakkaf-package-page .trip-facts > div:last-child { border: 0 !important; padding-left: 0 !important; } .sakkaf-package-page .trip-facts .icon { color: #fff !important; filter: drop-shadow(3px 1px 0 #ac1689) !important; width: 24px !important; height: 24px !important; } .sakkaf-package-page .hero-tools { position: absolute !important; left: 385px !important; top: 27px !important; display: flex !important; flex-direction: row-reverse !important; gap: 18px !important; z-index: 4 !important; } .sakkaf-package-page .circle-btn { width: 51px !important; height: 51px !important; border: 1px solid #ffffffa0 !important; border-radius: 50% !important; display: grid !important; place-items: center !important; background: #10141c99 !important; color: white !important; padding: 0 !important; cursor: pointer !important; transition: all 0.2s ease !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .sakkaf-package-page .circle-btn:hover { transform: translateY(-2px) !important; background: #10141ce0 !important; } .sakkaf-package-page .circle-btn .icon { width: 28px !important; height: 28px !important; } .sakkaf-package-page .circle-btn[aria-pressed="true"], .sakkaf-package-page .circle-btn.is-active { color: #ffc1ef !important; background: #a6007de0 !important; } .sakkaf-package-page .price-card { position: absolute !important; left: 30px !important; top: 27px !important; background: #fffffff9 !important; border-radius: 23px !important; width: 335px !important; min-height: 397px !important; color: var(--sakkaf-purple) !important; padding: 11px 23px 22px !important; text-align: center !important; box-shadow: 0 12px 36px #00000013 !important; z-index: 5 !important; box-sizing: border-box !important; direction: rtl !important; } .sakkaf-package-page .price-block { margin-bottom: 6px !important; } .sakkaf-package-page .price-label { font-size: 16px !important; margin: 0 !important; font-weight: 600 !important; line-height: 1.7 !important; color: #676bb0 !important; } .sakkaf-package-page .price { font-size: 66px !important; font-family: Arial, sans-serif !important; font-weight: 700 !important; line-height: 1.12 !important; letter-spacing: -1.7px !important; color: var(--sakkaf-pink) !important; margin: 2px 0 !important; } .sakkaf-package-page .currency { font-size: 21px !important; margin: 0 0 10px !important; line-height: 1.5 !important; color: var(--sakkaf-purple) !important; font-weight: 700 !important; } .sakkaf-package-page .action { height: 51px !important; border-radius: 11px !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 12px !important; font-weight: 700 !important; width: 100% !important; font-size: 16px !important; text-decoration: none !important; box-sizing: border-box !important; cursor: pointer !important; transition: all 0.2s ease !important; direction: rtl !important; } .sakkaf-package-page .action.primary { color: #fff !important; background: linear-gradient(100deg, #ab007f, #810b70) !important; border: none !important; box-shadow: 0 4px 14px rgba(171, 0, 127, 0.28) !important; } .sakkaf-package-page .action.primary:hover { background: linear-gradient(100deg, #91006c, #69095c) !important; color: #fff !important; transform: translateY(-1px) !important; } .sakkaf-package-page .action.outline { border: 1px solid #d88314 !important; color: var(--sakkaf-gold) !important; background: white !important; margin-top: 10px !important; } .sakkaf-package-page .action.outline:hover { background: #fffaf4 !important; color: #b36706 !important; transform: translateY(-1px) !important; } .sakkaf-package-page .action .icon { width: 23px !important; height: 23px !important; } .sakkaf-package-page .trust-row { border-top: 1px solid var(--sakkaf-line) !important; margin-top: 22px !important; padding-top: 19px !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; direction: rtl !important; } .sakkaf-package-page .trust-row > div { font-size: 13px !important; font-weight: 700 !important; line-height: 1.75 !important; display: flex !important; align-items: center !important; flex-direction: column !important; gap: 7px !important; border-left: 1px solid var(--sakkaf-line) !important; color: var(--sakkaf-purple) !important; text-align: center !important; } .sakkaf-package-page .trust-row > div:last-child { border: 0 !important; } .sakkaf-package-page .trust-row .icon { width: 21px !important; height: 21px !important; color: var(--sakkaf-purple) !important; } /* Below Hero - Tabs matching exact measurements */ .sakkaf-package-page .below-hero { max-width: 1448px !important; margin: 0 auto 20px !important; padding: 0 !important; box-sizing: border-box !important; } .sakkaf-package-page .tabs.sakkaf-modern-tabs-nav { margin-left: 382px !important; display: flex !important; align-items: stretch !important; height: 67px !important; background: #fff !important; border-radius: 0 0 11px 11px !important; box-shadow: var(--sakkaf-shadow) !important; border: 1px solid #faf5f9 !important; overflow: hidden !important; list-style: none !important; padding: 0 !important; margin-top: 0 !important; direction: rtl !important; } .sakkaf-package-page .tab { display: flex !important; align-items: center !important; justify-content: center !important; gap: 15px !important; flex: 1 !important; font-size: 16px !important; font-weight: 600 !important; white-space: nowrap !important; position: relative !important; padding: 0 16px !important; color: var(--sakkaf-purple) !important; text-decoration: none !important; background: transparent !important; border: none !important; cursor: pointer !important; transition: all 0.2s ease !important; } .sakkaf-package-page .tab + .tab:before { content: '' !important; position: absolute !important; right: 0 !important; top: 17px !important; bottom: 16px !important; border-right: 1px solid var(--sakkaf-line) !important; } .sakkaf-package-page .tab.active { color: var(--sakkaf-pink) !important; background: linear-gradient(90deg, #fdf4fc, #fff9ff) !important; font-weight: 800 !important; } .sakkaf-package-page .tab.active:after { content: '' !important; position: absolute !important; bottom: 0 !important; right: 15px !important; left: 15px !important; height: 3px !important; background: var(--sakkaf-pink) !important; border-radius: 5px !important; } .sakkaf-package-page .tab .icon { width: 25px !important; height: 25px !important; } /* Breakpoints from styles.css */ @media(max-width: 1320px) { .sakkaf-package-page .hero-inner { padding-right: 35px !important; } .sakkaf-package-page .hero h1, .sakkaf-package-page .sakkaf-trip-title { font-size: 44px !important; } .sakkaf-package-page .hero-subtitle { font-size: 21px !important; } .sakkaf-package-page .trip-facts > div { font-size: 14px !important; padding-inline: 14px !important; gap: 10px !important; } } @media(max-width: 1120px) { .sakkaf-package-page .hero-copy { margin-left: 340px !important; } .sakkaf-package-page .hero-inner { padding-right: 25px !important; } .sakkaf-package-page .hero h1, .sakkaf-package-page .sakkaf-trip-title { font-size: 37px !important; } } .sakkaf-package-showcase .sakkaf-package-video-trigger { background: #bd1680 !important; } .sakkaf-package-video-close { background: #861657 !important; } /* Package showcase: match the supplied AlSakkaf HTML/CSS reference layout. */ html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-showcase { display: block !important; width: 100% !important; margin: 20px 0 36px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-content-grid { display: grid !important; grid-template-columns: 538fr 818fr !important; gap: 26px !important; width: 100% !important; padding-top: 20px !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-showcase.is-overview-only .sakkaf-showcase-content-grid { grid-template-columns: minmax(0, 1fr) !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlights, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview { grid-column: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-section-heading { height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 26px !important; margin: 0 0 0 !important; padding: 0 !important; color: #d17d08 !important; text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-section-heading h2 { margin: 0 !important; padding: 0 !important; color: #d17d08 !important; font-family: 'Cairo', Tahoma, Arial, sans-serif !important; font-size: 25px !important; font-weight: 800 !important; line-height: 1.6 !important; white-space: nowrap !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-heading-dash { display: block !important; width: 31px !important; height: 1px !important; flex: 0 0 31px !important; background: #d98d31 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; margin-top: 1px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-card { height: 128px !important; min-height: 128px !important; display: flex !important; flex-direction: row-reverse !important; align-items: flex-start !important; gap: 19px !important; padding: 17px 19px !important; border: 1px solid #f8f3f6 !important; border-radius: 14px !important; background: #fff !important; box-shadow: 0 8px 28px rgba(36, 36, 55, .05) !important; box-sizing: border-box !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-icon { width: 70px !important; height: 70px !important; flex: 0 0 70px !important; display: grid !important; place-items: center !important; border-radius: 50% !important; color: #a6007d !important; background: #fdf0fc !important; font-size: 28px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-card:nth-child(even) .sakkaf-showcase-highlight-icon { color: #d17d08 !important; background: #fcf6ef !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-icon .fa { margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: 28px !important; line-height: 1 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-copy { min-width: 0 !important; flex: 1 1 auto !important; padding-top: 1px !important; direction: rtl !important; text-align: right !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-card h3 { margin: 0 0 7px !important; color: #484d98 !important; font-family: 'Cairo', Tahoma, Arial, sans-serif !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.5 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-card p { margin: 0 !important; color: #676bb0 !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.65 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview .sakkaf-showcase-section-heading { justify-content: flex-start !important; padding-right: 38px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview-card { height: 269px !important; display: grid !important; grid-template-columns: 367px minmax(0, 1fr) !important; gap: 21px !important; align-items: center !important; margin-top: 1px !important; padding: 20px 26px !important; border: 1px solid #faf4f7 !important; border-radius: 14px !important; background: #fff !important; box-shadow: 0 8px 28px rgba(36, 36, 55, .05) !important; box-sizing: border-box !important; direction: ltr !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview-card.is-text-only { grid-template-columns: minmax(0, 1fr) !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-video-preview { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; height: 225px !important; min-height: 225px !important; overflow: hidden !important; align-self: center !important; border-radius: 10px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-video-preview img { width: 100% !important; height: 100% !important; min-height: 0 !important; object-fit: cover !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-video-trigger { width: 58px !important; height: 58px !important; border: 0 !important; border-radius: 50% !important; background: #fff !important; color: #3b142d !important; box-shadow: 0 0 0 4px rgba(255, 255, 255, .08) !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-video-trigger .fa { margin-left: 3px !important; color: #3b142d !important; font-size: 27px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-video-label { right: 16px !important; bottom: 11px !important; display: flex !important; flex-direction: row-reverse !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; color: #fff !important; font-size: 15px !important; font-weight: 600 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview-copy { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; align-self: stretch !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding-top: 17px !important; direction: rtl !important; text-align: right !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview-card.is-text-only .sakkaf-showcase-overview-copy { grid-column: 1 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview-body { max-height: 146px !important; overflow: hidden !important; color: #484d98 !important; font-size: 17px !important; font-weight: 500 !important; line-height: 1.8 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview-body.is-expanded { max-height: 2000px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview-body p:first-child { margin-top: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview-body p:last-child { margin-bottom: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-read-more { width: 255px !important; max-width: 100% !important; height: 50px !important; display: flex !important; align-items: center !important; justify-content: center !important; align-self: flex-start !important; gap: 17px !important; margin: 0 0 8px !important; padding: 0 !important; border: 1px solid #d17d08 !important; border-radius: 20px !important; color: #a6007d !important; background: #fff !important; font-family: 'Cairo', Tahoma, Arial, sans-serif !important; font-size: 17px !important; font-weight: 800 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-read-more .fa { color: #a6007d !important; font-size: 17px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-custom-banner { height: 105px !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-top: 17px !important; overflow: hidden !important; border: 1px solid #f5e8df !important; border-radius: 14px !important; background: #fdf9f5 !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-postcards, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-palm { position: absolute !important; pointer-events: none !important; background-image: url('../images/sakkaf-reference.png') !important; background-repeat: no-repeat !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-postcards { top: 0 !important; bottom: 0 !important; left: 0 !important; width: 452px !important; background-position: -34px -921px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-palm { top: 0 !important; right: 0 !important; width: 160px !important; height: 105px !important; background-position: -1254px -921px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-copy { z-index: 1 !important; margin-right: 110px !important; text-align: right !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-copy h2 { display: flex !important; align-items: center !important; gap: 20px !important; margin: 0 !important; color: #a6007d !important; font-size: 26px !important; font-weight: 800 !important; line-height: 1.55 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-copy h2 .fa { color: #a6007d !important; font-size: 31px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-copy p { margin: 2px 0 0 !important; color: #484d98 !important; font-size: 18px !important; line-height: 1.7 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-contact-button { position: absolute !important; z-index: 1 !important; top: 29px !important; right: 195px !important; width: 190px !important; height: 45px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 22px !important; border: 1px solid #d17d08 !important; border-radius: 25px !important; color: #d17d08 !important; background: #fff !important; font-size: 16px !important; font-weight: 700 !important; text-decoration: none !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-contact-button .fa { color: #d17d08 !important; font-size: 16px !important; } @media (max-width: 1320px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-content-grid { grid-template-columns: 42% minmax(0, 1fr) !important; gap: 20px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-card { gap: 12px !important; padding: 17px 13px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-icon { width: 59px !important; height: 59px !important; flex-basis: 59px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview-card { grid-template-columns: 43% minmax(0, 1fr) !important; padding: 20px !important; gap: 20px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-video-preview { height: auto !important; min-height: 0 !important; aspect-ratio: 367 / 225 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview-body { font-size: 15px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-copy { margin-right: 70px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-copy h2 { font-size: 23px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-copy p { font-size: 16px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-contact-button { right: 110px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-postcards { width: 355px !important; } } @media (max-width: 1120px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-section-heading h2 { font-size: 21px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview .sakkaf-showcase-section-heading { padding-right: 12px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-card { gap: 10px !important; padding: 17px 11px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-icon { width: 48px !important; height: 48px !important; flex-basis: 48px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-icon .fa { font-size: 22px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-card h3 { font-size: 15px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-card p { font-size: 11px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-copy { margin-right: 45px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-copy h2 { font-size: 20px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-copy p { font-size: 14px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-contact-button { right: 62px !important; width: 155px !important; font-size: 14px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-postcards { width: 280px !important; } } @media (max-width: 900px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-content-grid { grid-template-columns: 1fr !important; gap: 21px !important; padding-top: 22px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview { order: 1 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlights { order: 2 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview-card { height: auto !important; min-height: 255px !important; grid-template-columns: 44% minmax(0, 1fr) !important; padding: 20px !important; gap: 24px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview-copy { padding-top: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview-body { font-size: 16px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-read-more { height: 45px !important; font-size: 15px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-custom-banner { height: 145px !important; justify-content: flex-start !important; align-items: flex-start !important; padding: 14px 22px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-copy { margin-right: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-copy h2 { font-size: 21px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-copy p { font-size: 14px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-postcards { top: 40px !important; width: 250px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-palm { opacity: .35 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-contact-button { top: auto !important; right: 22px !important; bottom: 15px !important; width: 175px !important; height: 38px !important; } } @media (max-width: 550px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-content-grid { padding-top: 19px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-section-heading { gap: 15px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-section-heading h2 { font-size: 21px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-heading-dash { width: 22px !important; flex-basis: 22px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview-card { display: flex !important; flex-direction: column !important; gap: 18px !important; padding: 16px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview-copy { order: 1 !important; width: 100% !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-video-preview { order: 2 !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 367 / 225 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-overview-body { font-size: 14px !important; line-height: 1.9 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-read-more { width: 220px !important; height: 43px !important; align-self: center !important; font-size: 14px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-grid { gap: 10px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-card { height: auto !important; min-height: 146px !important; flex-direction: column !important; align-items: center !important; gap: 9px !important; padding: 13px 11px !important; text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-icon { width: 46px !important; height: 46px !important; flex-basis: 46px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-copy { width: 100% !important; padding: 0 !important; text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-card h3 { margin-bottom: 5px !important; font-size: 14px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-highlight-card p { font-size: 11px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-custom-banner { height: 172px !important; padding: 13px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-copy h2 { gap: 9px !important; font-size: 18px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-copy h2 .fa { font-size: 25px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-copy p { max-width: 295px !important; font-size: 12px !important; line-height: 1.7 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-banner-postcards { top: 90px !important; width: 155px !important; height: 80px !important; background-size: 1158.4px 868.8px !important; background-position: -27px -737px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-showcase-contact-button { right: 13px !important; bottom: 20px !important; width: 155px !important; } } @media (min-width: 992px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-showcase.sakkaf-device-mobile { display: none !important; } } @media (max-width: 991px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-showcase.sakkaf-device-desktop { display: none !important; } } /* Desktop section layout: mirror the supplied reference without changing content or images. */ @media (min-width: 992px) { html body #page-wrapper section#content.sakkaf-package-page #package { direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-decor-header { height: 52px !important; margin: 20px 0 12px !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-decor-title-wrap { gap: 24px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-decor-dash { width: 42px !important; height: 1px !important; background: #db8a22 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-decor-title { color: #a6007d !important; font-family: 'Cairo', Tahoma, Arial, sans-serif !important; font-size: 28px !important; font-weight: 800 !important; line-height: 1.3 !important; white-space: nowrap !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-decor-badge { position: static !important; width: auto !important; height: auto !important; margin: 0 0 0 4px !important; transform: none !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #a6007d !important; font-size: 28px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-decor-badge i { color: #a6007d !important; font-size: 28px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotels-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; width: 100% !important; max-width: none !important; margin: 0 !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-card { display: grid !important; grid-template-columns: 60% 40% !important; grid-template-rows: 164px 96px !important; align-items: stretch !important; width: 100% !important; height: 260px !important; min-width: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid #f3f0f2 !important; border-radius: 13px !important; background: #fff !important; box-shadow: 0 5px 24px rgba(41, 39, 53, .05) !important; direction: rtl !important; gap: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-image { grid-column: 1 !important; grid-row: 1 !important; order: 0 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 164px !important; border-radius: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-info { grid-column: 1 !important; grid-row: 2 !important; order: 0 !important; min-width: 0 !important; height: 96px !important; padding: 3px 15px 10px 6px !important; align-items: flex-start !important; justify-content: flex-start !important; direction: rtl !important; text-align: right !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-city { width: 100% !important; margin: 0 0 2px !important; gap: 9px !important; color: #871070 !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1.45 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-city i { color: #871070 !important; font-size: 20px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-name { width: 100% !important; margin: 0 0 1px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-name a { color: #5156a5 !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.6 !important; white-space: nowrap !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-stars { width: 100% !important; margin-top: 0 !important; justify-content: space-between !important; gap: 0 !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-stars i { width: auto !important; margin: 0 1px !important; flex: 0 1 auto !important; color: #d17d08 !important; font-size: 18px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-meta { grid-column: 2 !important; grid-row: 1 / span 2 !important; order: 0 !important; min-width: 0 !important; width: 100% !important; height: 260px !important; padding: 27px 10px 10px !important; align-items: stretch !important; justify-content: flex-start !important; gap: 10px !important; direction: ltr !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-nights-pill, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-spec-row { width: 100% !important; min-width: 0 !important; justify-content: flex-start !important; direction: ltr !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-nights-pill { height: 43px !important; padding: 0 10px !important; border-radius: 7px !important; background: linear-gradient(90deg, #fdf7fc, #fff) !important; color: #a6007d !important; font-size: 20px !important; font-weight: 800 !important; line-height: 43px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-nights-pill i, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-spec-row i { width: 24px !important; flex: 0 0 24px !important; color: #5156a5 !important; font-size: 20px !important; text-align: left !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-nights-pill i { color: #a6007d !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-spec-row { height: 37px !important; gap: 17px !important; color: #5156a5 !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.6 !important; white-space: nowrap !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-spec-row span, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-nights-pill span { flex: 1 1 auto !important; min-width: 0 !important; direction: rtl !important; text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-btn-more-hotels { width: 307px !important; min-width: 0 !important; height: 44px !important; margin: 6px auto 14px !important; padding: 0 18px !important; gap: 18px !important; border: 1px solid #d17d08 !important; border-radius: 25px !important; color: #a6007d !important; font-size: 17px !important; font-weight: 800 !important; direction: ltr !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-btn-more-hotels i { color: #d17d08 !important; font-size: 18px !important; } html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 18px !important; align-items: start !important; } html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-package-showcase, html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-inout-section, html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-gifts-section, html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-package-notes-section, html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-tours-wrap { grid-column: 1 / -1 !important; } html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-decor-header:has(+ .sakkaf-hotels-list), html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-hotels-list, html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-btn-more-hotels { grid-column: 1 / -1 !important; } html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-decor-header:has(+ .sakkaf-ground-card), html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-ground-card { grid-column: 2 !important; } html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-decor-header:has(+ .sakkaf-flight-card), html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-flight-card { grid-column: 1 !important; } html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-decor-header:has(+ .sakkaf-ground-card), html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-decor-header:has(+ .sakkaf-flight-card) { grid-row: 5 !important; } html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-ground-card, html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-flight-card { grid-row: 6 !important; } html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-decor-header:has(+ .sakkaf-ground-card), html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-decor-header:has(+ .sakkaf-flight-card) { height: 40px !important; margin: 0 !important; align-self: end !important; } html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-decor-header:has(+ .sakkaf-ground-card) .sakkaf-decor-dash, html body #page-wrapper section#content.sakkaf-package-page #package:has(.sakkaf-ground-card):has(.sakkaf-flight-card) > .sakkaf-decor-header:has(+ .sakkaf-flight-card) .sakkaf-decor-dash { background: #a6007d !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-ground-card, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-flight-card { width: 100% !important; max-width: none !important; height: 188px !important; margin: 0 0 14px !important; padding: 18px !important; border: 1px solid #f1eff2 !important; border-radius: 13px !important; box-shadow: 0 5px 24px rgba(41, 39, 53, .05) !important; gap: 17px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-ground-media, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-flight-media { align-self: center !important; height: 137px !important; max-width: none !important; border-radius: 11px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-ground-media { width: 53.3% !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-flight-media { width: 44% !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-ground-content, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-flight-content { min-width: 0 !important; padding: 0 !important; justify-content: flex-start !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-ground-bullets { gap: 7px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-ground-bullets li, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-ground-bullets li span { font-size: 17px !important; font-weight: 600 !important; line-height: 1.55 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-ground-divider { margin: 14px 0 12px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-ground-notice, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-ground-notice span { font-size: 15px !important; font-weight: 600 !important; line-height: 1.55 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-flight-route-list { gap: 5px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-flight-route-pill { height: 44px !important; padding: 0 20px !important; border: 0 !important; border-radius: 11px !important; background: #f8f8fa !important; font-size: 17px !important; font-weight: 600 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-flight-route-pill .route-arrow { padding: 0 10px !important; color: #a6007d !important; font-size: 16px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-flight-notice, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-flight-notice span { margin-top: 11px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.6 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tours-heading { height: 52px !important; margin: 0 0 0 !important; padding: 0 !important; gap: 25px !important; color: #d17d08 !important; font-size: 26px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tours-heading::before, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tours-heading::after { width: 42px !important; height: 1px !important; background: #d17d08 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tours-heading-icon { width: 47px !important; height: 47px !important; flex-basis: 47px !important; background: #fcf5eb !important; color: #d17d08 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tours-heading-icon i { color: #d17d08 !important; font-size: 22px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tours-timeline { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 13px !important; width: 100% !important; max-width: none !important; height: 130px !important; margin: 0 0 24px !important; padding: 7px 17px !important; border: 1px solid #f2eff2 !important; border-radius: 13px !important; background: #fff !important; box-shadow: 0 5px 24px rgba(41, 39, 53, .05) !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tours-timeline::before { top: 22px !important; right: 29.7% !important; bottom: auto !important; left: 29.5% !important; width: auto !important; height: 0 !important; background: transparent !important; border-top: 2px dashed #d5a04a !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tour-card { display: grid !important; grid-template-columns: 142px minmax(0, 1fr) !important; grid-template-rows: 113px !important; align-items: stretch !important; min-width: 0 !important; min-height: 113px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; direction: ltr !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tour-step { top: -1px !important; right: -10px !important; width: 36px !important; height: 36px !important; border: 0 !important; background: linear-gradient(130deg, #b90088, #92006c) !important; font-size: 23px !important; box-shadow: 0 0 0 5px #fff !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tour-image { grid-column: 1 !important; grid-row: 1 !important; width: 142px !important; min-height: 113px !important; height: 113px !important; border-radius: 11px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tour-info { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; overflow: hidden !important; padding: 0 12px 0 0 !important; justify-content: flex-end !important; padding-bottom: 8px !important; box-sizing: border-box !important; direction: rtl !important; text-align: right !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tour-info h3 { margin: 0 0 2px !important; overflow: hidden !important; color: #84066a !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1.45 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tour-info p { margin: 5px 0 0 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; color: #5156a5 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.6 !important; white-space: normal !important; } } /* Keep the legacy trust benefits out of the package hero at every supported breakpoint. */ @media (min-width: 768px) { html body #page-wrapper section#content.sakkaf-package-page .price-card .trust-row { display: none !important; } } /* Final package hero overrides: keep the gallery image and CTA layout isolated from legacy styles. */ html body #page-wrapper section#content.sakkaf-package-page .hero { isolation: isolate !important; } html body #page-wrapper section#content.sakkaf-package-page .hero > .sakkaf-hero-img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; z-index: 0 !important; border-radius: 18px 18px 0 0 !important; pointer-events: none !important; } html body #page-wrapper section#content.sakkaf-package-page .hero::before { z-index: 1 !important; } html body #page-wrapper section#content.sakkaf-package-page .hero > .hero-inner { z-index: 2 !important; } html body #page-wrapper section#content.sakkaf-package-page .hero .sakkaf-hero-gallery-pill { left: auto !important; right: 48px !important; bottom: 22px !important; z-index: 4 !important; direction: ltr !important; } html body #page-wrapper section#content.sakkaf-package-page .price { font-weight: 800 !important; } /* Desktop sakkaf-hero-container wrapper */ @media (min-width: 992px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-container { position: relative !important; max-width: 1448px !important; margin: 0 auto !important; } html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section { height: 385px !important; position: relative !important; border-radius: 18px 18px 0 0 !important; overflow: hidden !important; background-color: #0087a7 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-media { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-media > .sakkaf-hero-img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; z-index: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-media:before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(270deg, #003d6263 0%, #00476223 45%, transparent 75%) !important; z-index: 1 !important; pointer-events: none !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-media .badges { position: absolute !important; top: 51px !important; right: 48px !important; z-index: 2 !important; display: flex !important; gap: 12px !important; align-items: center !important; margin: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-media .hero-title-group { position: absolute !important; top: 105px !important; right: 48px !important; left: 405px !important; z-index: 2 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-media .hero-tools { position: absolute !important; left: 385px !important; top: 27px !important; z-index: 4 !important; display: flex !important; flex-direction: row-reverse !important; gap: 18px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-media .sakkaf-hero-gallery-pill { position: absolute !important; right: 48px !important; bottom: 22px !important; z-index: 4 !important; direction: ltr !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-media .sakkaf-hero-gallery-pill .sakkaf-gallery-cam-icon { display: none !important; } html body #page-wrapper section#content.sakkaf-package-page .trip-facts { position: absolute !important; right: 48px !important; bottom: 35px !important; z-index: 3 !important; display: flex !important; gap: 0 !important; align-items: center !important; margin: 0 !important; white-space: nowrap !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page .trip-facts > div { display: flex !important; gap: 15px !important; align-items: center !important; padding: 0 21px !important; border-left: 1px solid #ffffff60 !important; font-size: 16px !important; font-weight: 700 !important; height: 43px !important; color: #ffffff !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important; flex-direction: row !important; border-top: none !important; border-right: none !important; border-bottom: none !important; background: transparent !important; } html body #page-wrapper section#content.sakkaf-package-page .trip-facts > div:first-child { padding-right: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .trip-facts > div:last-child { border: 0 !important; padding-left: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .trip-facts .icon { color: #fff !important; filter: drop-shadow(3px 1px 0 #ac1689) !important; width: 24px !important; height: 24px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-container .price-card { position: absolute !important; left: 30px !important; top: 50% !important; transform: translateY(-50%) !important; width: 335px !important; min-height: 397px !important; z-index: 5 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; padding: 18px 23px 22px !important; box-sizing: border-box !important; text-align: center !important; background: #fffffff9 !important; border-radius: 23px !important; box-shadow: 0 12px 36px #00000013 !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .price-block { order: 1 !important; margin-bottom: 6px !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .price-card-actions { order: 2 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .trust-row { order: 3 !important; border-top: 1px solid var(--sakkaf-line) !important; margin-top: 22px !important; padding-top: 19px !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; direction: rtl !important; } } /* ========================================================================== Mobile & Tablet (<992px): Hero & Price Card Redesign (Target: media_1788948355199.jpg) ========================================================================== */ @media (max-width: 991px) { /* Mobile Viewport & Page Containers */ html, body { overflow-x: hidden !important; max-width: 100% !important; } #page-wrapper { overflow-x: hidden !important; max-width: 100% !important; } html body #page-wrapper section#content.sakkaf-package-page { overflow-x: hidden !important; max-width: 100% !important; } html body #page-wrapper section#content.sakkaf-package-page > .container.car-detail-page { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 auto !important; box-sizing: border-box !important; overflow-x: hidden !important; } /* Breadcrumb */ html body #page-wrapper section#content.sakkaf-package-page .breadcrumb.sakkaf-pkg-breadcrumbs { height: auto !important; padding: 10px 16px !important; font-size: 11px !important; gap: 8px !important; justify-content: flex-start !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; } html body #page-wrapper section#content.sakkaf-package-page .breadcrumb.sakkaf-pkg-breadcrumbs::-webkit-scrollbar { display: none !important; } /* Outer Container */ html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-container { position: relative !important; width: 100% !important; max-width: 100% !important; margin: 0 auto 16px !important; padding: 0 16px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; gap: 14px !important; } /* CARD 1: Hero Card with Image + Overlays + Attached 4-Column Specs Bar */ html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important; border: 1px solid #f0f2f5 !important; direction: rtl !important; display: flex !important; flex-direction: column !important; } /* Hero Media: Top Image Area (285px) */ html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-media { position: relative !important; height: 285px !important; width: 100% !important; overflow: hidden !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-media > .sakkaf-hero-img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; z-index: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-media:before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(16, 20, 28, 0.45) 0%, rgba(16, 20, 28, 0.05) 45%, rgba(16, 20, 28, 0.76) 100%) !important; z-index: 1 !important; pointer-events: none !important; } /* Tools at Top-Left (Circular Favorite & Share Buttons in LTR order: Heart first, then Share) */ html body #page-wrapper section#content.sakkaf-package-page .hero-tools { position: absolute !important; top: 14px !important; left: 14px !important; right: auto !important; bottom: auto !important; display: flex !important; flex-direction: row !important; direction: ltr !important; gap: 8px !important; z-index: 3 !important; } html body #page-wrapper section#content.sakkaf-package-page .circle-btn { width: 38px !important; height: 38px !important; border-radius: 50% !important; background: rgba(16, 20, 28, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.38) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; color: #ffffff !important; display: grid !important; place-items: center !important; padding: 0 !important; cursor: pointer !important; transition: transform 0.2s ease, background 0.2s ease !important; } html body #page-wrapper section#content.sakkaf-package-page .circle-btn:active { transform: scale(0.92) !important; } html body #page-wrapper section#content.sakkaf-package-page .circle-btn .icon { width: 19px !important; height: 19px !important; } /* Badges at Top-Right (Stacked vertically) */ html body #page-wrapper section#content.sakkaf-package-page .badges { position: absolute !important; top: 14px !important; right: 14px !important; left: auto !important; bottom: auto !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 7px !important; margin: 0 !important; z-index: 3 !important; } /* Top Gold Badge: الأكثر حجزاً */ html body #page-wrapper section#content.sakkaf-package-page .badge.gold { order: 1 !important; background: #f7ca87 !important; color: #734106 !important; border: none !important; border-radius: 20px !important; padding: 0 12px !important; height: 30px !important; font-size: 11.5px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important; } html body #page-wrapper section#content.sakkaf-package-page .badge.gold .icon { width: 14px !important; height: 14px !important; color: #734106 !important; } /* Bottom White Badge: برنامج مميز */ html body #page-wrapper section#content.sakkaf-package-page .badge:not(.gold) { order: 2 !important; background: #ffffff !important; color: #861657 !important; border: 1.5px solid #d49dbf !important; border-radius: 20px !important; padding: 0 12px !important; height: 30px !important; font-size: 11.5px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important; } html body #page-wrapper section#content.sakkaf-package-page .badge:not(.gold) .icon { width: 14px !important; height: 14px !important; color: #861657 !important; } /* Title & Subtitle at Bottom-Right of Image, placed gracefully above the Gallery Pill */ html body #page-wrapper section#content.sakkaf-package-page .hero-title-group { position: absolute !important; bottom: 50px !important; right: 14px !important; left: 14px !important; top: auto !important; z-index: 3 !important; text-align: right !important; direction: rtl !important; margin: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-trip-title, html body #page-wrapper section#content.sakkaf-package-page .hero h1 { font-size: clamp(19px, 5.2vw, 23px) !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1.3 !important; margin: 0 0 3px !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65) !important; letter-spacing: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .hero-subtitle { font-size: clamp(11px, 2.9vw, 12.5px) !important; font-weight: 500 !important; color: #ffffff !important; line-height: 1.4 !important; margin: 0 !important; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Gallery Counter Pill at Bottom-Right of Image (matching media_1788948355199.jpg) */ html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-gallery-pill { position: absolute !important; bottom: 12px !important; right: 14px !important; left: auto !important; top: auto !important; z-index: 3 !important; background: rgba(16, 20, 28, 0.65) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; color: #ffffff !important; border-radius: 8px !important; padding: 0 10px !important; height: 26px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; direction: ltr !important; cursor: pointer !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-gallery-pill .sakkaf-gallery-cam-icon { font-size: 13px !important; color: #ffffff !important; line-height: 1 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-gallery-pill .sakkaf-gallery-count { font-size: 12px !important; font-weight: 700 !important; color: #ffffff !important; line-height: 1 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-gallery-pill .sakkaf-gallery-control { display: none !important; } /* ATTACHED SPECS BAR: Directly below the image inside Card 1 */ html body #page-wrapper section#content.sakkaf-package-page .trip-facts { position: relative !important; width: 100% !important; margin: 0 !important; padding: 12px 2px !important; background: #ffffff !important; border-top: 1px solid #f0f2f5 !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; align-items: center !important; gap: 0 !important; direction: rtl !important; box-sizing: border-box !important; } html body #page-wrapper section#content.sakkaf-package-page .trip-facts > div { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 6px !important; height: auto !important; min-height: 52px !important; padding: 2px 2px !important; margin: 0 !important; background: transparent !important; border: none !important; border-left: 1px solid #f0f2f5 !important; border-radius: 0 !important; color: #1e293b !important; text-shadow: none !important; box-sizing: border-box !important; } html body #page-wrapper section#content.sakkaf-package-page .trip-facts > div:last-child { border-left: none !important; } html body #page-wrapper section#content.sakkaf-package-page .trip-facts .icon { width: 22px !important; height: 22px !important; color: #861657 !important; filter: none !important; margin: 0 !important; flex-shrink: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .trip-facts span { font-size: clamp(9px, 2.5vw, 11px) !important; font-weight: 700 !important; color: #334155 !important; line-height: 1.35 !important; white-space: normal !important; text-align: center !important; display: block !important; } /* CARD 2: Price & Booking Card */ html body #page-wrapper section#content.sakkaf-package-page .price-card { position: relative !important; left: auto !important; top: auto !important; transform: none !important; width: 100% !important; min-height: 0 !important; background: #ffffff !important; border-radius: 20px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important; border: 1px solid #f0f2f5 !important; padding: 14px 16px !important; margin: 0 !important; box-sizing: border-box !important; direction: rtl !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; z-index: 3 !important; } /* Right Side: Action Buttons (~58% width) */ html body #page-wrapper section#content.sakkaf-package-page .price-card-actions { flex: 1 1 58% !important; display: flex !important; flex-direction: column !important; gap: 8px !important; width: auto !important; margin: 0 !important; } /* Button 1 (Top): احجز هذا البرنامج */ html body #page-wrapper section#content.sakkaf-package-page .action.primary { height: 42px !important; border-radius: 12px !important; background: #861657 !important; color: #ffffff !important; font-size: clamp(12px, 3.2vw, 13.5px) !important; font-weight: 700 !important; display: flex !important; flex-direction: row !important; direction: rtl !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border: none !important; box-shadow: 0 3px 10px rgba(134, 22, 87, 0.25) !important; text-decoration: none !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; cursor: pointer !important; transition: all 0.2s ease !important; } html body #page-wrapper section#content.sakkaf-package-page .action.primary:active { transform: scale(0.98) !important; } html body #page-wrapper section#content.sakkaf-package-page .action.primary .icon { width: 18px !important; height: 18px !important; color: #ffffff !important; } /* Button 2 (Bottom): اطلب تعديل البرنامج */ html body #page-wrapper section#content.sakkaf-package-page .action.outline { height: 42px !important; border-radius: 12px !important; background: #ffffff !important; color: #b45309 !important; border: 1.5px solid #d97706 !important; font-size: clamp(12px, 3.2vw, 13.5px) !important; font-weight: 700 !important; display: flex !important; flex-direction: row !important; direction: rtl !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-decoration: none !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; cursor: pointer !important; transition: all 0.2s ease !important; } html body #page-wrapper section#content.sakkaf-package-page .action.outline:active { transform: scale(0.98) !important; background: #fffbf5 !important; } html body #page-wrapper section#content.sakkaf-package-page .action.outline .icon { width: 17px !important; height: 17px !important; color: #b45309 !important; } /* Left Side: Price Block (~38% width) */ html body #page-wrapper section#content.sakkaf-package-page .price-block { flex: 0 0 38% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; margin: 0 !important; padding-left: 10px !important; border-left: 1px solid #f0f2f5 !important; box-sizing: border-box !important; } html body #page-wrapper section#content.sakkaf-package-page .price-label { font-size: 12px !important; color: #64748b !important; font-weight: 600 !important; margin: 0 0 2px !important; line-height: 1.3 !important; } html body #page-wrapper section#content.sakkaf-package-page .price { font-size: clamp(28px, 7.5vw, 36px) !important; font-weight: 900 !important; color: #861657 !important; font-family: Arial, sans-serif !important; letter-spacing: -1px !important; margin: 2px 0 !important; line-height: 1.05 !important; text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page .currency { font-size: 13px !important; color: #475569 !important; font-weight: 700 !important; margin: 2px 0 0 !important; line-height: 1.3 !important; } /* Trust Row completely hidden on mobile */ html body #page-wrapper section#content.sakkaf-package-page .trust-row { display: none !important; } } /* Desktop itinerary cards grow with their data so no title or description is clipped. */ @media (min-width: 992px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tours-timeline { height: auto !important; min-height: 130px !important; grid-auto-rows: minmax(113px, auto) !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tour-card { height: auto !important; min-height: 113px !important; grid-template-rows: minmax(113px, auto) !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tour-image { height: 100% !important; min-height: 113px !important; align-self: stretch !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tour-info { height: auto !important; min-height: 113px !important; overflow: visible !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tour-info h3 { overflow: visible !important; white-space: normal !important; text-overflow: clip !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tour-info p { display: block !important; -webkit-line-clamp: initial !important; overflow: visible !important; white-space: normal !important; } } /* Desktop hotel cards expand enough to keep the complete room, name, and stars rows visible. */ @media (min-width: 992px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-card { grid-template-rows: 164px auto !important; height: auto !important; min-height: 260px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-info { height: auto !important; min-height: 96px !important; padding-bottom: 5px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-stars { height: 24px !important; min-height: 24px !important; line-height: 24px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-meta { height: auto !important; min-height: 260px !important; } } /* Use the reference plane glyph on desktop route pills while preserving the mobile icon. */ @media (min-width: 992px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-flight-route-pill .route-plane-icon { transform: rotate(180deg) !important; } } /* Keep desktop tour step markers above their titles instead of overlapping the tour copy. */ @media (min-width: 992px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tour-info { justify-content: flex-start !important; padding-top: 40px !important; } } /* Free gifts reference section: three compact benefits with RTL card order. */ .sakkaf-package-page .sakkaf-gifts-section { margin: 30px 0 34px; direction: rtl; } .sakkaf-package-page .sakkaf-gifts-heading { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 38px; margin: 0 0 13px; color: #8b0c6b; } .sakkaf-package-page .sakkaf-gifts-heading h2 { margin: 0; color: inherit; font-size: clamp(18px, 2vw, 27px); font-weight: 800; line-height: 1.4; white-space: nowrap; } .sakkaf-package-page .sakkaf-gifts-heading-dash { width: 30px; height: 1px; flex: 0 0 30px; background: #b166a5; } .sakkaf-package-page .sakkaf-gifts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; direction: rtl; } .sakkaf-package-page .sakkaf-gift-card { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; min-width: 0; min-height: 78px; padding: 10px 12px; gap: 8px; border: 1px solid #f4e5ed; border-radius: 12px; background: #ffffff; box-shadow: 0 5px 18px rgba(75, 53, 97, 0.06); direction: rtl; } .sakkaf-package-page .sakkaf-gift-copy { min-width: 0; flex: 1 1 auto; text-align: right; } .sakkaf-package-page .sakkaf-gift-copy h3 { overflow: hidden; margin: 0 0 3px; color: #a50078; font-size: clamp(11px, 1.3vw, 16px); font-weight: 800; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; } .sakkaf-package-page .sakkaf-gift-copy p { margin: 0; color: #65748b; font-size: clamp(9px, 1vw, 13px); font-weight: 500; line-height: 1.45; } .sakkaf-package-page .sakkaf-gift-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; color: #a50078; background: #fdebf6; font-size: 22px; line-height: 1; } .sakkaf-package-page .sakkaf-gift-icon-svg { width: 24px; height: 24px; color: inherit; } .sakkaf-package-page .sakkaf-gift-icon-svg.sakkaf-gift-percent { width: 27px; height: 27px; } @media (max-width: 991px) { .sakkaf-package-page .sakkaf-gifts-section { margin: 26px 0 30px; } .sakkaf-package-page .sakkaf-gifts-heading { gap: 11px; margin-bottom: 10px; } .sakkaf-package-page .sakkaf-gifts-heading h2 { font-size: 17px; } .sakkaf-package-page .sakkaf-gifts-heading-dash { width: 24px; flex-basis: 24px; } .sakkaf-package-page .sakkaf-gifts-grid { gap: 7px; } .sakkaf-package-page .sakkaf-gift-card { min-height: 62px; padding: 7px 7px; gap: 5px; border-radius: 10px; } .sakkaf-package-page .sakkaf-gift-icon { width: 38px; height: 38px; flex-basis: 38px; font-size: 19px; } .sakkaf-package-page .sakkaf-gift-icon-svg { width: 21px; height: 21px; } .sakkaf-package-page .sakkaf-gift-icon-svg.sakkaf-gift-percent { width: 24px; height: 24px; } .sakkaf-package-page .sakkaf-gift-copy h3 { margin-bottom: 1px; font-size: 10px; } .sakkaf-package-page .sakkaf-gift-copy p { font-size: 8.5px; line-height: 1.35; } } @media (max-width: 420px) { .sakkaf-package-page .sakkaf-gift-card { min-height: 58px; padding: 6px 5px; gap: 4px; } .sakkaf-package-page .sakkaf-gift-icon { width: 34px; height: 34px; flex-basis: 34px; } .sakkaf-package-page .sakkaf-gift-copy h3 { font-size: 9px; } .sakkaf-package-page .sakkaf-gift-copy p { font-size: 7.7px; } } /* Package notes reference section: compact bordered card with readable desktop sizing. */ .sakkaf-package-page .sakkaf-package-notes-section { margin: 0 0 36px; direction: rtl; } .sakkaf-package-page .sakkaf-package-notes-heading { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 38px; margin: 0 0 13px; color: #c77a12; } .sakkaf-package-page .sakkaf-package-notes-heading h2 { margin: 0; color: inherit; font-size: clamp(18px, 2vw, 27px); font-weight: 800; line-height: 1.4; white-space: nowrap; } .sakkaf-package-page .sakkaf-package-notes-heading-dash { width: 30px; height: 1px; flex: 0 0 30px; background: #deb168; } .sakkaf-package-page .sakkaf-package-notes-card { position: relative; box-sizing: border-box; min-height: 106px; padding: 16px 62px 16px 94px; overflow: hidden; border: 1px solid #f1e0ce; border-radius: 12px; background: #fdfaf5; box-shadow: 0 5px 18px rgba(75, 53, 97, 0.04); } .sakkaf-package-page .sakkaf-package-notes-card ul { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 0 18px 0 0; color: #53698f; list-style: disc; list-style-position: outside; text-align: right; } .sakkaf-package-page .sakkaf-package-notes-card li { margin: 0; padding: 1px 0; font-size: 16px; font-weight: 600; line-height: 1.7; } .sakkaf-package-page .sakkaf-package-notes-icon { position: absolute; z-index: 2; top: 17px; right: 19px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #ffffff; background: #c77a12; } .sakkaf-package-page .sakkaf-package-notes-icon .fa { margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: 16px; } .sakkaf-package-page .sakkaf-package-notes-palm { position: absolute; bottom: 0; left: 0; width: 104px; height: 82px; pointer-events: none; background-image: url('../images/sakkaf-reference.png'); background-repeat: no-repeat; background-position: 0 -921px; opacity: 0.58; } @media (max-width: 991px) { .sakkaf-package-page .sakkaf-package-notes-section { margin-bottom: 30px; } .sakkaf-package-page .sakkaf-package-notes-heading { gap: 11px; margin-bottom: 10px; } .sakkaf-package-page .sakkaf-package-notes-heading h2 { font-size: 17px; } .sakkaf-package-page .sakkaf-package-notes-heading-dash { width: 24px; flex-basis: 24px; } .sakkaf-package-page .sakkaf-package-notes-card { min-height: 88px; padding: 12px 48px 12px 72px; border-radius: 10px; } .sakkaf-package-page .sakkaf-package-notes-card ul { padding-right: 13px; } .sakkaf-package-page .sakkaf-package-notes-card li { padding: 0; font-size: 10px; line-height: 1.7; } .sakkaf-package-page .sakkaf-package-notes-icon { top: 13px; right: 11px; width: 27px; height: 27px; } .sakkaf-package-page .sakkaf-package-notes-icon .fa { font-size: 14px; } .sakkaf-package-page .sakkaf-package-notes-palm { width: 76px; height: 70px; background-position: 0 -921px; opacity: 0.5; } } /* Desktop emphasis: enlarge the benefits and notes while keeping the mobile reference compact. */ @media (min-width: 992px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-gifts-grid { gap: 16px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-gift-card { min-height: 104px !important; padding: 14px 18px !important; gap: 12px !important; border-radius: 14px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-gift-copy h3 { margin-bottom: 5px !important; font-size: 19px !important; font-weight: 800 !important; line-height: 1.45 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-gift-copy p { font-size: 15px !important; font-weight: 800 !important; line-height: 1.55 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-gift-icon { width: 58px !important; height: 58px !important; flex-basis: 58px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-gift-icon-svg { width: 31px !important; height: 31px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-gift-icon-svg.sakkaf-gift-percent { width: 35px !important; height: 35px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-notes-card { min-height: 132px !important; padding: 20px 84px 20px 120px !important; border-radius: 14px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-notes-card li { font-size: 18px !important; font-weight: 800 !important; line-height: 1.8 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-notes-icon { top: 20px !important; right: 24px !important; width: 38px !important; height: 38px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-notes-icon .fa { font-size: 20px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-notes-palm { width: 130px !important; height: 100px !important; } } @media (max-width: 991px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-flight-route-pill .route-plane-icon::before { content: "\f0ec" !important; } } /* Keep this CTA isolated from legacy action styles while matching the reference responsively. */ .sakkaf-package-page .sakkaf-booking-customize { position: relative; display: flex; align-items: center; justify-content: center; min-height: 190px; margin: 24px 0 26px; padding: 28px 145px 25px; overflow: hidden; border: 1px solid #f1dce9; border-radius: 22px; background: linear-gradient(110deg, #fffaf7 0%, #fff5fb 100%); box-shadow: 0 8px 24px rgba(75, 53, 97, 0.05); direction: rtl; box-sizing: border-box; } .sakkaf-package-page .sakkaf-booking-customize-content { position: relative; z-index: 1; width: min(900px, 100%); text-align: center; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-booking-customize-content h2 { margin: 0; color: #a50078; font-size: clamp(22px, 2.5vw, 32px); font-weight: 800 !important; line-height: 1.35; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-booking-customize-content p { margin: 3px 0 0; color: #54518e; font-size: clamp(14px, 1.35vw, 19px); font-weight: 600 !important; line-height: 1.65; } .sakkaf-package-page .sakkaf-booking-customize-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: min(840px, 100%); margin: 20px auto 0; direction: rtl; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-booking-customize-action { display: flex; align-items: center; justify-content: center; min-width: 0; height: 60px; padding: 0 18px; gap: 14px; border-radius: 18px; box-sizing: border-box; font-size: clamp(15px, 1.45vw, 20px); font-weight: 800 !important; line-height: 1.3; text-align: center; white-space: normal; transition: transform 0.2s ease, box-shadow 0.2s ease; } .sakkaf-package-page .sakkaf-booking-customize-action:hover, .sakkaf-package-page .sakkaf-booking-customize-action:focus-visible { transform: translateY(-2px); } .sakkaf-package-page .sakkaf-booking-customize-action .icon { width: 29px; height: 29px; flex: 0 0 29px; } .sakkaf-package-page .sakkaf-booking-customize-whatsapp { color: #ffffff; background: linear-gradient(110deg, #b9088b, #931079); box-shadow: 0 8px 18px rgba(153, 13, 119, 0.16); } .sakkaf-package-page .sakkaf-booking-customize-whatsapp .icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .sakkaf-package-page .sakkaf-booking-customize-quote { color: #c77a12; border: 2px solid #e4a241; background: #ffffff; box-shadow: 0 5px 14px rgba(199, 122, 18, 0.08); } .sakkaf-package-page .sakkaf-booking-customize-quote .icon { color: #c77a12; } .sakkaf-package-page .sakkaf-booking-customize-palm { position: absolute; bottom: -1px; left: 0; width: 150px; height: 132px; pointer-events: none; background-image: url('../images/sakkaf-reference.png'); background-repeat: no-repeat; background-position: 0 -921px; opacity: 0.52; } .sakkaf-package-page .sakkaf-booking-customize-pencil { position: absolute; top: 24px; right: 48px; display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 68px; color: #a50078; border-bottom: 2px solid currentColor; } .sakkaf-package-page .sakkaf-booking-customize-pencil .icon { width: 48px; height: 48px; } @media (max-width: 991px) { .sakkaf-package-page .sakkaf-booking-customize { min-height: 160px; margin: 20px 0 24px; padding: 22px 78px 20px 70px; border-radius: 18px; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-booking-customize-content h2 { font-size: 24px; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-booking-customize-content p { font-size: 14px; } .sakkaf-package-page .sakkaf-booking-customize-actions { gap: 12px; margin-top: 15px; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-booking-customize-action { height: 52px; padding: 0 12px; gap: 9px; border-radius: 14px; font-size: 15px; } .sakkaf-package-page .sakkaf-booking-customize-action .icon { width: 24px; height: 24px; flex-basis: 24px; } .sakkaf-package-page .sakkaf-booking-customize-palm { width: 105px; height: 96px; } .sakkaf-package-page .sakkaf-booking-customize-pencil { top: 20px; right: 24px; width: 45px; height: 53px; } .sakkaf-package-page .sakkaf-booking-customize-pencil .icon { width: 35px; height: 35px; } } @media (max-width: 520px) { .sakkaf-package-page .sakkaf-booking-customize { min-height: 184px; padding: 20px 48px 18px 48px; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-booking-customize-content h2 { font-size: 20px; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-booking-customize-content p { font-size: 12px; } .sakkaf-package-page .sakkaf-booking-customize-actions { gap: 8px; margin-top: 13px; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-booking-customize-action { height: 50px; padding: 0 7px; gap: 5px; border-radius: 12px; font-size: 12px; } .sakkaf-package-page .sakkaf-booking-customize-action .icon { width: 21px; height: 21px; flex-basis: 21px; } .sakkaf-package-page .sakkaf-booking-customize-palm { width: 76px; height: 73px; } .sakkaf-package-page .sakkaf-booking-customize-pencil { top: 15px; right: 11px; width: 32px; height: 39px; } .sakkaf-package-page .sakkaf-booking-customize-pencil .icon { width: 26px; height: 26px; } } @media (max-width: 360px) { .sakkaf-package-page .sakkaf-booking-customize { padding-inline: 32px; } .sakkaf-package-page .sakkaf-booking-customize-actions { grid-template-columns: 1fr; } } /* Center the compact desktop booking card so the hero keeps balanced space above and below it. */ @media (min-width: 992px) { html body #page-wrapper section#content.sakkaf-package-page .price-card { top: 50% !important; height: auto !important; min-height: 0 !important; padding: 18px 23px !important; transform: translateY(-50%) !important; } } /* Desktop inclusions reference styling: larger, stronger text with compact colored headers. */ @media (min-width: 992px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-title-wrap { gap: 18px !important; margin-bottom: 24px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-title-wrap .sakkaf-inout-title { font-size: 30px !important; font-weight: 800 !important; line-height: 1.35 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-title-wrap .sakkaf-inout-dash { width: 42px !important; height: 2px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-grid { gap: 22px !important; align-items: stretch !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-card { min-height: 0 !important; padding: 18px 22px 22px !important; border: 1px solid #f1e8ee !important; border-radius: 16px !important; box-shadow: 0 5px 24px rgba(41, 39, 53, 0.05) !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-card .sakkaf-inout-header { min-height: 46px !important; padding: 8px 18px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; font-size: 19px !important; font-weight: 800 !important; line-height: 1.4 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-card .sakkaf-header-included { color: #15803d !important; background: #ecfdf5 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-card .sakkaf-header-excluded { color: #be185d !important; background: #fdf2f8 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-card .sakkaf-badge-circle { width: 30px !important; height: 30px !important; min-width: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-header-included .sakkaf-badge-circle { background: #16a34a !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-header-excluded .sakkaf-badge-circle { background: #be185d !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-items { margin: 18px 0 4px !important; padding: 0 8px !important; gap: 14px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-item { align-items: flex-start !important; gap: 12px !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.65 !important; white-space: normal !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-item .sakkaf-inout-svg { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; margin-top: 5px !important; margin-left: 0 !important; } } /* Keep the booking form's visual treatment local so its legacy fields and submission flow remain untouched. */ html body #page-wrapper section#content.sakkaf-package-page #main > .tab-container > h2.heading-orange.heading-padding { display: flex !important; align-items: center !important; justify-content: center !important; gap: 26px !important; width: fit-content !important; max-width: 100% !important; margin: 34px auto 12px !important; padding: 0 20px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: #d1840b !important; font-size: 30px !important; font-weight: 800 !important; line-height: 1.35 !important; text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .tab-container > h2.heading-orange.heading-padding::before, html body #page-wrapper section#content.sakkaf-package-page #main > .tab-container > h2.heading-orange.heading-padding::after { content: "" !important; display: block !important; width: 48px !important; height: 2px !important; flex: 0 0 48px !important; background: #dfa34b !important; border-radius: 2px !important; } html body #page-wrapper section#content.sakkaf-package-page #book.booking-section { width: 100% !important; margin: 0 auto 34px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } html body #page-wrapper section#content.sakkaf-package-page #book.booking-section > #booking_form.cruise-booking-form { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 28px 34px 30px !important; background: #ffffff !important; border: 1px solid #eeeaf3 !important; border-radius: 22px !important; box-shadow: 0 8px 28px rgba(45, 12, 34, 0.06) !important; direction: rtl !important; text-align: right !important; box-sizing: border-box !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form > small:first-child { display: block !important; margin: 0 0 15px !important; color: #54518e !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.7 !important; text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form > small:not(:first-child) { display: block !important; margin: 0 0 13px !important; color: #54518e !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.6 !important; text-align: right !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form > hr { clear: both !important; width: 100% !important; margin: 0 0 22px !important; border: 0 !important; border-top: 1px solid #ebe7f1 !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form > .required + hr { margin: 25px 0 13px !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form > hr:last-of-type { margin: 25px 0 22px !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form .required { width: 100% !important; margin: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form .required > .row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 24px !important; width: 100% !important; margin: 0 0 20px !important; padding: 0 !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form .required > .row::before, html body #page-wrapper section#content.sakkaf-package-page #booking_form .required > .row::after, html body #page-wrapper section#content.sakkaf-package-page #booking_form > .row::before, html body #page-wrapper section#content.sakkaf-package-page #booking_form > .row::after { display: none !important; content: none !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form .required > .row:last-child { margin-bottom: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form .required > .row > .form-group, html body #page-wrapper section#content.sakkaf-package-page #booking_form .required > .row > [class*="col-md-"] { float: none !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form label { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; min-height: 25px !important; margin: 0 0 7px !important; color: #54518e !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.45 !important; text-align: right !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form label small { margin: 0 !important; color: inherit !important; font-size: 12px !important; font-weight: 700 !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form label::before { display: inline-block !important; flex: 0 0 auto !important; color: #575394 !important; font-family: "FontAwesome" !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1 !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form .required > .row:nth-of-type(1) > :nth-child(1) label::before { content: "\f007" !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form .required > .row:nth-of-type(1) > :nth-child(2) label::before { content: "\f095" !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form .required > .row:nth-of-type(2) > :nth-child(1) label::before, html body #page-wrapper section#content.sakkaf-package-page #booking_form .required > .row:nth-of-type(2) > :nth-child(2) label::before { content: "\f073" !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form .required > .row:nth-of-type(3) > :nth-child(1) label::before { content: "\f0c0" !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form .required > .row:nth-of-type(3) > :nth-child(2) label::before { content: "\f007" !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form > .row:nth-of-type(1) label::before { content: "\f0e0" !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form > .row:nth-of-type(2) label::before { content: "\f024" !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form input.input-text { display: block !important; width: 100% !important; height: 56px !important; min-height: 56px !important; margin: 0 !important; padding: 0 18px !important; border: 2px solid #dedbed !important; border-radius: 12px !important; outline: 0 !important; background: #ffffff !important; color: #3d3a6f !important; font-size: 15px !important; font-weight: 600 !important; line-height: 56px !important; text-align: right !important; box-shadow: none !important; box-sizing: border-box !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form input.input-text:focus { border-color: #a70b78 !important; box-shadow: 0 0 0 3px rgba(167, 11, 120, 0.10) !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form input.input-text::placeholder { color: #b7b3ca !important; opacity: 1 !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form input[type="number"].input-text { -moz-appearance: textfield !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form input[type="number"].input-text::-webkit-inner-spin-button, html body #page-wrapper section#content.sakkaf-package-page #booking_form input[type="number"].input-text::-webkit-outer-spin-button { margin: 0 !important; -webkit-appearance: none !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form .datepicker-wrap { position: relative !important; width: 100% !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form .datepicker-wrap::after { width: 38px !important; height: 56px !important; right: 0 !important; top: 0 !important; bottom: auto !important; color: #575394 !important; background: transparent !important; font-size: 21px !important; line-height: 56px !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form .datepicker-wrap .ui-datepicker-trigger { width: 38px !important; height: 56px !important; right: 0 !important; top: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form .datepicker-wrap input.input-text { padding-right: 42px !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form > .row > .form-group, html body #page-wrapper section#content.sakkaf-package-page #booking_form > .row > [class*="col-md-"] { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form > .row { width: 100% !important; margin: 0 0 20px !important; padding: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form > .row + .row { margin-top: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form > .form-group.row { margin: 0 !important; padding: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form > .form-group.row > .col-md-12 { width: 100% !important; margin: 0 !important; padding: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form #submit.button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 24px !important; border: 0 !important; border-radius: 12px !important; background: linear-gradient(135deg, #b40b83 0%, #8c0b6a 100%) !important; color: #ffffff !important; font-size: 18px !important; font-weight: 800 !important; line-height: 58px !important; box-shadow: 0 7px 18px rgba(140, 11, 106, 0.18) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form #submit.button:hover { transform: translateY(-1px) !important; box-shadow: 0 10px 22px rgba(140, 11, 106, 0.25) !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form #submit .check { display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; font-size: 18px !important; } @media (max-width: 991px) { html body #page-wrapper section#content.sakkaf-package-page #main > .tab-container > h2.heading-orange.heading-padding { gap: 18px !important; margin-top: 28px !important; font-size: 25px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .tab-container > h2.heading-orange.heading-padding::before, html body #page-wrapper section#content.sakkaf-package-page #main > .tab-container > h2.heading-orange.heading-padding::after { width: 34px !important; flex-basis: 34px !important; } html body #page-wrapper section#content.sakkaf-package-page #book.booking-section > #booking_form.cruise-booking-form { padding: 24px 22px 26px !important; border-radius: 18px !important; } } @media (max-width: 700px) { html body #page-wrapper section#content.sakkaf-package-page #main > .tab-container > h2.heading-orange.heading-padding { gap: 12px !important; margin-top: 24px !important; margin-bottom: 10px !important; padding: 0 8px !important; font-size: 22px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .tab-container > h2.heading-orange.heading-padding::before, html body #page-wrapper section#content.sakkaf-package-page #main > .tab-container > h2.heading-orange.heading-padding::after { width: 24px !important; flex-basis: 24px !important; } html body #page-wrapper section#content.sakkaf-package-page #book.booking-section { margin-bottom: 24px !important; } html body #page-wrapper section#content.sakkaf-package-page #book.booking-section > #booking_form.cruise-booking-form { padding: 20px 16px 22px !important; border-radius: 16px !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form .required > .row { grid-template-columns: 1fr !important; gap: 16px !important; margin-bottom: 16px !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form label { font-size: 15px !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form input.input-text, html body #page-wrapper section#content.sakkaf-package-page #booking_form .datepicker-wrap::after, html body #page-wrapper section#content.sakkaf-package-page #booking_form .datepicker-wrap .ui-datepicker-trigger { height: 52px !important; min-height: 52px !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form input.input-text { line-height: 52px !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form .datepicker-wrap::after { line-height: 52px !important; } html body #page-wrapper section#content.sakkaf-package-page #booking_form > small:first-child { font-size: 14px !important; } } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section { width: 100% !important; margin: 30px 0 34px !important; padding: 0 !important; background: #fffaf7 !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page #main { background: #fffaf7 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-heading, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-heading { display: flex !important; align-items: center !important; justify-content: center !important; gap: 18px !important; margin: 0 0 18px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-heading-dash, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-heading-dash { display: block !important; width: 42px !important; height: 2px !important; background: #d1860c !important; flex: 0 0 auto !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-heading h2, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-heading h2 { margin: 0 !important; color: #d1860c !important; font-size: 27px !important; font-weight: 800 !important; line-height: 1.4 !important; text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; width: 100% !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-card { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(180px, 42%) !important; grid-template-areas: "media copy" !important; gap: 18px !important; min-width: 0 !important; min-height: 178px !important; padding: 14px !important; overflow: hidden !important; border: 1px solid #eee5ec !important; border-radius: 17px !important; background: #ffffff !important; box-shadow: 0 6px 20px rgba(80, 48, 73, 0.07) !important; direction: ltr !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-copy { display: flex !important; min-width: 0 !important; flex-direction: column !important; align-items: flex-end !important; grid-area: copy !important; direction: rtl !important; text-align: right !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-rating { display: inline-flex !important; align-items: center !important; gap: 4px !important; margin: 0 0 8px !important; padding: 4px 9px !important; border-radius: 15px !important; color: #bd7410 !important; background: #fff4df !important; font: 700 14px/1.2 Arial, sans-serif !important; direction: ltr !important; white-space: nowrap !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-rating small { font-size: 11px !important; font-weight: 400 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-copy h3 { width: 100% !important; min-height: 50px !important; margin: 0 0 5px !important; color: #393575 !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1.55 !important; overflow-wrap: anywhere !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-copy h3 a { color: inherit !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-copy > p { display: flex !important; align-items: center !important; gap: 7px !important; width: 100% !important; margin: 0 0 10px !important; color: #54518e !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.6 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-copy > p i { color: #b00080 !important; font-size: 17px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-width: 150px !important; min-height: 40px !important; margin-top: auto !important; padding: 7px 15px !important; border: 1px solid #e4a241 !important; border-radius: 22px !important; color: #b36b0b !important; background: #ffffff !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.4 !important; white-space: nowrap !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-button:hover { color: #ffffff !important; background: #d1860c !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-media { display: flex !important; min-width: 0 !important; flex-direction: column !important; grid-area: media !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-image { position: relative !important; min-height: 108px !important; overflow: hidden !important; border-radius: 12px !important; background: #eee8ee !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-image > a, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-image img { display: block !important; width: 100% !important; height: 108px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-image img { object-fit: cover !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-favorite { position: absolute !important; top: 9px !important; left: 9px !important; display: grid !important; place-items: center !important; width: 38px !important; height: 38px !important; border: 0 !important; border-radius: 50% !important; color: #ffffff !important; background: rgba(36, 68, 108, 0.78) !important; font-size: 20px !important; cursor: pointer !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-favorite[aria-pressed="true"] { background: #b00080 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-price { margin-top: 8px !important; color: #526580 !important; text-align: left !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-price span, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-price small { display: block !important; font-size: 12px !important; line-height: 1.4 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-price strong { display: block !important; color: #b00080 !important; font: 800 23px/1.2 Arial, sans-serif !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section { margin-top: 12px !important; margin-bottom: 30px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; width: 100% !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-card { display: grid !important; grid-template-columns: 58px minmax(0, 1fr) !important; grid-template-areas: "icon copy" !important; align-items: center !important; min-width: 0 !important; min-height: 112px !important; padding: 16px 22px !important; border: 1px solid #eee5ec !important; border-radius: 17px !important; background: #ffffff !important; box-shadow: 0 6px 20px rgba(80, 48, 73, 0.07) !important; direction: ltr !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-copy { min-width: 0 !important; grid-area: copy !important; direction: rtl !important; text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-copy h3 { margin: 0 0 3px !important; color: #b00080 !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.5 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-copy p, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-copy a { display: block !important; margin: 0 !important; color: #54518e !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.7 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-copy a:hover { color: #b00080 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-support .sakkaf-contact-copy a { color: #b00080 !important; font: 800 19px/1.5 Arial, sans-serif !important; white-space: nowrap !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-copy a i { margin-left: 5px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-icon { display: grid !important; place-items: center !important; width: 58px !important; height: 58px !important; border-radius: 50% !important; color: #b00080 !important; background: #fff1fa !important; font-size: 28px !important; grid-area: icon !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-icon i, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-icon i::before { display: block !important; color: #b00080 !important; font-size: inherit !important; line-height: 1 !important; } @media (max-width: 700px) { html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section { margin: 24px 0 28px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-heading, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-heading { gap: 12px !important; margin-bottom: 14px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-heading-dash, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-heading-dash { width: 30px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-heading h2, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-heading h2 { font-size: 21px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-grid, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-grid { grid-template-columns: 1fr !important; gap: 12px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-card { grid-template-columns: minmax(0, 1fr) 42% !important; gap: 12px !important; min-height: 150px !important; padding: 10px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-rating { margin-bottom: 5px !important; padding: 3px 7px !important; font-size: 12px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-copy h3 { min-height: 42px !important; font-size: 16px !important; line-height: 1.5 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-copy > p { margin-bottom: 7px !important; font-size: 13px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-button { min-width: 120px !important; min-height: 34px !important; padding: 5px 10px !important; font-size: 13px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-image, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-image > a, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-image img { min-height: 88px !important; height: 88px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-favorite { top: 6px !important; left: 6px !important; width: 32px !important; height: 32px !important; font-size: 17px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-price span, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-price small { font-size: 10px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-price strong { font-size: 19px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-card { min-height: 100px !important; padding: 13px 15px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-copy h3 { font-size: 16px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-copy p, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-copy a { font-size: 12px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-support .sakkaf-contact-copy a { font-size: 15px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-icon { width: 48px !important; height: 48px !important; font-size: 23px !important; } } /* Present the existing booking and payment details as responsive cards without changing their content or links. */ html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important; gap: 18px !important; width: 100% !important; margin: 30px 0 36px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details > .sakkaf-booking-info-card { min-width: 0 !important; margin: 0 !important; padding: 20px 22px !important; background: #ffffff !important; border: 1px solid #f0e6ee !important; border-radius: 18px !important; box-shadow: 0 7px 24px rgba(66, 25, 57, 0.06) !important; direction: rtl !important; text-align: right !important; box-sizing: border-box !important; overflow: hidden !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details > .sakkaf-booking-info-card > h2.box-title { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; min-height: 38px !important; margin: 0 0 14px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: #b0007a !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1.4 !important; text-align: right !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details > .sakkaf-booking-info-card > h2.box-title::before { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 36px !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; background: #fcebf7 !important; color: #b0007a !important; font-family: "FontAwesome" !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details > .sakkaf-how-to-book > h2.box-title::before { content: "\f013" !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details > .sakkaf-payment-methods > h2.box-title::before { content: "\f09d" !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book > ul { width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; color: #54518e !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.8 !important; text-align: right !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book > ul > br { display: none !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book > ul > li:first-of-type { margin: 0 !important; padding: 0 0 12px !important; color: #54518e !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.8 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book > ul > li.phone { position: relative !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 14px !important; margin: 0 0 12px !important; padding: 16px 18px 14px !important; border-top: 1px solid #f1e9f0 !important; border-bottom: 1px solid #f1e9f0 !important; border-radius: 12px !important; background: linear-gradient(135deg, #fffafd, #ffffff) !important; color: #54518e !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.7 !important; text-align: right !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book > ul > li.phone::before { position: absolute !important; top: 16px !important; right: 18px !important; content: "\f232" !important; display: inline-block !important; margin: 0 !important; color: #20b95b !important; font-family: "FontAwesome" !important; font-size: 17px !important; font-weight: 400 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book .contact-phone { display: block !important; margin: 6px 0 0 !important; line-height: 1.5 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book .sakkaf-booking-contact-group { min-width: 0 !important; margin: 0 !important; padding: 12px !important; border: 1px solid #f0e4ef !important; border-radius: 10px !important; background: #ffffff !important; box-sizing: border-box !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book .sakkaf-booking-contact-group h3 { margin: 0 !important; padding: 0 26px 7px 0 !important; color: #b0007a !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.4 !important; text-align: right !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book .contact-phone a { width: 100% !important; min-width: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 7px 8px !important; border: 1px solid #f1e8f0 !important; border-radius: 8px !important; background: #fffafd !important; box-sizing: border-box !important; color: #54518e !important; direction: ltr !important; font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book .contact-phone a img { width: 70px !important; height: 22px !important; object-fit: contain !important; vertical-align: middle !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book .sakkaf-booking-phone-group .phone { display: flex !important; justify-content: flex-start !important; gap: 6px !important; margin: 6px 0 0 !important; padding: 7px 8px !important; border: 1px solid #f1e8f0 !important; border-radius: 8px !important; background: #fffafd !important; box-sizing: border-box !important; direction: ltr !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book .sakkaf-booking-phone-group .phone i { color: #b0007a !important; font-size: 15px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book .sakkaf-booking-phone-group .phone a { color: #54518e !important; font-size: 14px !important; font-weight: 700 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book > ul > li:last-of-type { margin: 0 !important; padding: 0 !important; color: #54518e !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.8 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-methods > h4 { margin: 0 0 14px !important; padding: 12px 14px !important; border-radius: 10px !important; background: #fff8fb !important; color: #54518e !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.8 !important; text-align: right !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-logos { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; margin: 0 0 15px !important; direction: ltr !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-logo { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; height: 58px !important; padding: 5px !important; border: 1px solid #f0e8ef !important; border-radius: 10px !important; background: #ffffff !important; box-shadow: 0 3px 12px rgba(66, 25, 57, 0.05) !important; box-sizing: border-box !important; direction: ltr !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-logo-visa { color: #2655b7 !important; font-family: Arial, sans-serif !important; font-size: 20px !important; font-weight: 900 !important; font-style: italic !important; letter-spacing: -1px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-logo-mastercard { color: transparent !important; font-size: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-logo-mastercard::before, html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-logo-mastercard::after { content: "" !important; position: absolute !important; top: 50% !important; width: 26px !important; height: 26px !important; margin-top: -13px !important; border-radius: 50% !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-logo-mastercard::before { left: calc(50% - 19px) !important; background: #e52b3f !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-logo-mastercard::after { left: calc(50% - 7px) !important; background: #f4ac20 !important; mix-blend-mode: multiply !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-logo-mada { color: #1681bd !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: -1px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-logo-bank { flex-direction: column !important; gap: 2px !important; color: #54518e !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-logo-bank i { color: #b0007a !important; font-size: 23px !important; line-height: 1 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-logo-bank small { color: #54518e !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.2 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-methods > ol { margin: 0 !important; padding: 0 22px 0 0 !important; list-style: none !important; color: #54518e !important; text-align: right !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-methods > ol > li { position: relative !important; margin: 0 0 8px !important; color: #54518e !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.75 !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-methods > ol > li:empty { display: none !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-methods > ol > li::before { content: "" !important; position: absolute !important; top: 0.75em !important; right: -16px !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #d1840b !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-methods > ol > br { display: none !important; } @media (max-width: 991px) { html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details { grid-template-columns: 1fr !important; gap: 16px !important; margin: 26px 0 30px !important; } } @media (max-width: 700px) { html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details > .sakkaf-booking-info-card { padding: 18px 16px !important; border-radius: 16px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details > .sakkaf-booking-info-card > h2.box-title { margin-bottom: 12px !important; font-size: 20px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book > ul, html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book > ul > li:first-of-type, html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book > ul > li.phone { font-size: 14px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book > ul > li.phone { grid-template-columns: 1fr !important; gap: 10px !important; padding: 14px 12px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book .sakkaf-booking-contact-group { padding: 10px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-methods > h4, html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-methods > ol > li { font-size: 13px !important; } } @media (max-width: 480px) { html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-logos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-logo { height: 52px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book .contact-phone a { font-size: 13px !important; } } /* Reusable package FAQ accordion. */ html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section { width: 100% !important; margin: 30px 0 34px !important; padding: 0 !important; background: transparent !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section .sakkaf-faq-heading { display: flex !important; align-items: center !important; justify-content: center !important; gap: 18px !important; margin: 0 0 18px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section .sakkaf-faq-heading-dash { display: block !important; width: 42px !important; height: 2px !important; background: #d1860c !important; flex: 0 0 auto !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section .sakkaf-faq-heading h2 { margin: 0 !important; color: #d1860c !important; font-size: 27px !important; font-weight: 800 !important; line-height: 1.4 !important; text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section .sakkaf-faq-list { display: grid !important; gap: 10px !important; width: 100% !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section .sakkaf-faq-item { margin: 0 !important; overflow: hidden !important; border: 1px solid #ebe5ed !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: 0 3px 14px rgba(80, 48, 73, 0.05) !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section .sakkaf-faq-item > summary { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; min-height: 56px !important; margin: 0 !important; padding: 14px 18px !important; color: #37324b !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.7 !important; text-align: right !important; cursor: pointer !important; list-style: none !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section .sakkaf-faq-item > summary::-webkit-details-marker { display: none !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section .sakkaf-faq-item > summary > span { min-width: 0 !important; flex: 1 1 auto !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section .sakkaf-faq-item > summary > i { display: grid !important; place-items: center !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; background: #fff4fa !important; color: #b00080 !important; font-size: 18px !important; line-height: 28px !important; flex: 0 0 auto !important; transition: transform 0.2s ease !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section .sakkaf-faq-item[open] > summary > i { transform: rotate(180deg) !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section .sakkaf-faq-answer { margin: 0 !important; padding: 14px 18px 18px !important; border-top: 1px solid #f4edf2 !important; color: #54518e !important; background: #fffdfb !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.9 !important; text-align: right !important; overflow-wrap: anywhere !important; } @media (max-width: 700px) { html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section { margin: 24px 0 28px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section .sakkaf-faq-heading { gap: 12px !important; margin-bottom: 14px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section .sakkaf-faq-heading-dash { width: 30px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section .sakkaf-faq-heading h2 { font-size: 21px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section .sakkaf-faq-item > summary { min-height: 50px !important; padding: 12px 14px !important; font-size: 15px !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-faq-section .sakkaf-faq-answer { padding: 12px 14px 15px !important; font-size: 14px !important; } } html body #page-wrapper section#content.sakkaf-package-page, html body #page-wrapper section#content.sakkaf-package-page .tab-container, html body #page-wrapper section#content.sakkaf-package-page .tab-content.package, html body #page-wrapper section#content.sakkaf-package-page .tab-content.package > #package, html body #page-wrapper section#content.sakkaf-package-page .tab-content > .tab-pane { background: #fffaf7 !important; } /* Keep package-page typography aligned with the homepage without affecting icon fonts. */ html body #page-wrapper section#content.sakkaf-package-page { font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, Arial, sans-serif !important; } html body #page-wrapper section#content.sakkaf-package-page h1, html body #page-wrapper section#content.sakkaf-package-page h2, html body #page-wrapper section#content.sakkaf-package-page h3, html body #page-wrapper section#content.sakkaf-package-page h4, html body #page-wrapper section#content.sakkaf-package-page h5, html body #page-wrapper section#content.sakkaf-package-page h6 { font-family: inherit !important; } html body #page-wrapper section#content.sakkaf-package-page p, html body #page-wrapper section#content.sakkaf-package-page li, html body #page-wrapper section#content.sakkaf-package-page a, html body #page-wrapper section#content.sakkaf-package-page button, html body #page-wrapper section#content.sakkaf-package-page label, html body #page-wrapper section#content.sakkaf-package-page input, html body #page-wrapper section#content.sakkaf-package-page select, html body #page-wrapper section#content.sakkaf-package-page textarea, html body #page-wrapper section#content.sakkaf-package-page small, html body #page-wrapper section#content.sakkaf-package-page strong { font-family: inherit !important; } /* Keep hero facts white and place the gallery counter at the lower-left on mobile/tablet. */ @media (max-width: 991px) { html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-facts, html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-facts > div { background: #ffffff !important; } html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .sakkaf-hero-gallery-pill { top: auto !important; right: auto !important; bottom: 12px !important; left: 14px !important; margin: 0 !important; transform: none !important; } } /* Unify all package section heading text while preserving each section's decorative lines. */ html body #page-wrapper section#content.sakkaf-package-page #package > .sakkaf-decor-header .sakkaf-decor-title, html body #page-wrapper section#content.sakkaf-package-page #package > .sakkaf-tours-wrap .sakkaf-tours-heading, html body #page-wrapper section#content.sakkaf-package-page #package > .sakkaf-inout-section .sakkaf-inout-title, html body #page-wrapper section#content.sakkaf-package-page #package > .sakkaf-gifts-section .sakkaf-gifts-heading h2, html body #page-wrapper section#content.sakkaf-package-page #package > .sakkaf-package-notes-section .sakkaf-package-notes-heading h2, html body #page-wrapper section#content.sakkaf-package-page #main > .tab-container > h2.heading-orange.heading-padding, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-heading h2, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-heading h2 { color: #861657 !important; font-size: 28px !important; font-weight: 800 !important; line-height: 1.3 !important; } @media (max-width: 991px) { html body #page-wrapper section#content.sakkaf-package-page #package > .sakkaf-decor-header .sakkaf-decor-title, html body #page-wrapper section#content.sakkaf-package-page #package > .sakkaf-tours-wrap .sakkaf-tours-heading, html body #page-wrapper section#content.sakkaf-package-page #package > .sakkaf-inout-section .sakkaf-inout-title, html body #page-wrapper section#content.sakkaf-package-page #package > .sakkaf-gifts-section .sakkaf-gifts-heading h2, html body #page-wrapper section#content.sakkaf-package-page #package > .sakkaf-package-notes-section .sakkaf-package-notes-heading h2, html body #page-wrapper section#content.sakkaf-package-page #main > .tab-container > h2.heading-orange.heading-padding, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-heading h2, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-heading h2 { font-size: 22px !important; } } /* Fit every package tab in one row on narrow mobile screens. */ @media (max-width: 550px) { html body #page-wrapper section#content.sakkaf-package-page .tabs.sakkaf-modern-tabs-nav { height: 60px !important; width: 100% !important; min-width: 0 !important; overflow: hidden !important; justify-content: stretch !important; gap: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .tabs.sakkaf-modern-tabs-nav .tab { min-width: 0 !important; flex: 1 1 20% !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; padding: 4px 2px !important; font-size: 9px !important; line-height: 1.2 !important; } html body #page-wrapper section#content.sakkaf-package-page .tabs.sakkaf-modern-tabs-nav .tab .icon { width: 18px !important; height: 18px !important; order: 1 !important; } html body #page-wrapper section#content.sakkaf-package-page .tabs.sakkaf-modern-tabs-nav .tab > span { order: 2 !important; display: block !important; text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page .tabs.sakkaf-modern-tabs-nav .tab + .tab:before { top: 10px !important; bottom: 10px !important; } html body #page-wrapper section#content.sakkaf-package-page .tabs.sakkaf-modern-tabs-nav .tab.active:after { right: 5px !important; left: 5px !important; } } /* Keep hotel cards in two columns on mobile and tablet without changing desktop layout. */ @media (max-width: 991px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotels-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 10px !important; width: 100% !important; max-width: none !important; margin: 0 !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-card { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; padding: 10px !important; gap: 8px !important; overflow: hidden !important; direction: rtl !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-image { order: 1 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: clamp(100px, 22vw, 160px) !important; border-radius: 10px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-info { order: 2 !important; width: 100% !important; min-width: 0 !important; padding: 0 !important; align-items: flex-start !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-city { width: 100% !important; font-size: clamp(14px, 2.5vw, 18px) !important; line-height: 1.45 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-city i { font-size: clamp(14px, 2.5vw, 18px) !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-name a { display: block !important; font-size: clamp(12px, 2.1vw, 14.5px) !important; line-height: 1.5 !important; white-space: normal !important; overflow-wrap: anywhere !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-stars { width: 100% !important; justify-content: center !important; gap: 3px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-stars i { width: auto !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; font-size: 15px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-meta { order: 3 !important; width: 100% !important; min-width: 0 !important; flex-direction: column !important; align-items: stretch !important; gap: 5px !important; border-top: 1px solid #f0f2f5 !important; padding: 8px 0 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-nights-pill { width: 100% !important; justify-content: center !important; padding: 4px 6px !important; font-size: clamp(11px, 1.9vw, 13.5px) !important; white-space: normal !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-spec-row { width: 100% !important; min-width: 0 !important; justify-content: center !important; gap: 5px !important; font-size: clamp(10.5px, 1.8vw, 13.5px) !important; line-height: 1.4 !important; white-space: normal !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-info, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-meta { align-items: center !important; text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-city { justify-content: center !important; text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-name, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-name a { text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-nights-pill { justify-content: center !important; text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-spec-row i { width: 18px !important; flex: 0 0 18px !important; text-align: center !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-spec-row span { flex: 0 1 auto !important; text-align: center !important; } } /* Desktop/tablet hero card fit: keep the price card inside the hero and show its trust benefits. */ @media (min-width: 992px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-container .price-card { top: 12px !important; left: 30px !important; width: 300px !important; height: calc(100% - 24px) !important; min-height: 0 !important; max-height: calc(100% - 24px) !important; padding: 10px 14px 12px !important; transform: none !important; border-radius: 20px !important; overflow: hidden !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .price-block { order: 1 !important; margin: 0 0 2px !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .price-label { font-size: 14px !important; line-height: 1.25 !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .price { font-size: 52px !important; line-height: 1 !important; margin: 2px 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .currency { font-size: 16px !important; line-height: 1.25 !important; margin: 0 0 4px !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .price-card-actions { order: 2 !important; gap: 7px !important; margin: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .action { height: 42px !important; border-radius: 10px !important; font-size: 14px !important; gap: 7px !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .action.outline { margin-top: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .action .icon { width: 19px !important; height: 19px !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .trust-row { order: 3 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-top: 9px !important; padding-top: 10px !important; border-top: 1px solid var(--sakkaf-line) !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .trust-row > div { min-width: 0 !important; gap: 4px !important; font-size: 10.5px !important; line-height: 1.35 !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .trust-row .icon { width: 19px !important; height: 19px !important; } } @media (min-width: 768px) and (max-width: 991px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-container { gap: 10px !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card { width: min(100%, 640px) !important; min-height: 0 !important; margin: 0 auto !important; padding: 13px 18px 12px !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px 16px !important; border-radius: 18px !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .price-card-actions { order: 1 !important; flex: 1 1 58% !important; min-width: 0 !important; gap: 7px !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .price-block { order: 2 !important; flex: 0 1 32% !important; min-width: 145px !important; margin: 0 !important; padding-left: 12px !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .price-label { font-size: 13px !important; line-height: 1.25 !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .price { font-size: 50px !important; line-height: 1 !important; margin: 2px 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .currency { font-size: 15px !important; line-height: 1.25 !important; margin: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .action { height: 40px !important; border-radius: 10px !important; font-size: 13px !important; gap: 6px !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .action.outline { margin-top: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .action .icon { width: 18px !important; height: 18px !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .trust-row { order: 3 !important; flex: 1 0 100% !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin: 1px 0 0 !important; padding-top: 9px !important; border-top: 1px solid var(--sakkaf-line) !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .trust-row > div { min-width: 0 !important; gap: 4px !important; font-size: 11px !important; line-height: 1.35 !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .trust-row .icon { width: 19px !important; height: 19px !important; } } /* Keep the mobile/tablet facts bar solid white. */ html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-facts, html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-facts > div { background: #ffffff !important; background-image: none !important; box-shadow: none !important; } html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-facts::before, html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-facts::after, html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-facts > div::before, html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-facts > div::after { content: none !important; background: none !important; } @media (max-width: 991px) { html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-facts { position: relative !important; z-index: 2 !important; } } /* Align the gallery switcher with the favorite/share tools on desktop and tablet. */ @media (min-width: 992px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-media .sakkaf-hero-gallery-pill { top: 27px !important; right: auto !important; bottom: auto !important; left: 525px !important; } } @media (min-width: 768px) and (max-width: 991px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-media .sakkaf-hero-gallery-pill { top: 14px !important; right: auto !important; bottom: auto !important; left: 110px !important; } } /* Shared gallery control design across desktop, tablet, and mobile. */ html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-gallery-pill { min-height: 32px !important; height: 32px !important; padding: 0 10px !important; border-radius: 999px !important; gap: 7px !important; box-sizing: border-box !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-gallery-pill .sakkaf-gallery-control { display: inline-flex !important; flex: 0 0 24px !important; width: 24px !important; height: 24px !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-gallery-pill .sakkaf-gallery-count { flex: 0 0 38px !important; min-width: 38px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; } @media (max-width: 991px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hero-gallery-pill { max-width: calc(100% - 28px) !important; } } /* Use a neutral black treatment for the hero facts text and icons. */ html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-facts, html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-facts > div { background: #ffffff !important; color: #000000 !important; text-shadow: none !important; } html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-facts span, html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-facts .icon { color: #000000 !important; filter: none !important; text-shadow: none !important; } /* Keep the package content on one typography system without changing the site shell. */ html body #page-wrapper section#content.sakkaf-package-page { --sakkaf-package-font-family: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; --sakkaf-package-body-size: 15px; --sakkaf-package-body-line-height: 1.8; --sakkaf-package-supporting-size: 13.5px; --sakkaf-package-supporting-line-height: 1.6; --sakkaf-package-button-size: 14px; --sakkaf-package-price-size: clamp(42px, 4vw, 58px); font-family: var(--sakkaf-package-font-family) !important; } html body #page-wrapper section#content.sakkaf-package-page :where(h1, h2, h3, h4, h5, h6, p, li, a, button, label, input, select, textarea, small, strong, b) { font-family: var(--sakkaf-package-font-family) !important; letter-spacing: normal !important; } html body #page-wrapper section#content.sakkaf-package-page h1 { font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.3 !important; font-weight: 700 !important; } html body #page-wrapper section#content.sakkaf-package-page h2 { font-size: clamp(22px, 2.2vw, 28px) !important; line-height: 1.4 !important; font-weight: 700 !important; } html body #page-wrapper section#content.sakkaf-package-page h3 { font-size: clamp(17px, 1.6vw, 20px) !important; line-height: 1.55 !important; font-weight: 700 !important; } html body #page-wrapper section#content.sakkaf-package-page :where(h4, h5, h6) { font-size: var(--sakkaf-package-supporting-size) !important; line-height: 1.7 !important; font-weight: 700 !important; } html body #page-wrapper section#content.sakkaf-package-page :where(p, li) { font-size: var(--sakkaf-package-body-size) !important; line-height: var(--sakkaf-package-body-line-height) !important; font-weight: 400 !important; } html body #page-wrapper section#content.sakkaf-package-page :where(button, input[type="button"], input[type="submit"], input[type="reset"], .button, .btn, [role="button"]) { font-size: var(--sakkaf-package-button-size) !important; line-height: 1.5 !important; font-weight: 700 !important; } /* Rich-text records may carry old inline typography; presentation wins here. */ html body #page-wrapper section#content.sakkaf-package-page :where([style*="font-family"], [style*="font-size"], [style*="font-weight"], [style*="line-height"], [style*="letter-spacing"]):not(.fa):not([class^="soap-icon"]):not([class*=" soap-icon"]):not(.glyphicon) { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; } html body #page-wrapper section#content.sakkaf-package-page :where(.sakkaf-tab-content-body, .detailed-logo.note) { font-family: var(--sakkaf-package-font-family) !important; font-size: var(--sakkaf-package-body-size) !important; line-height: var(--sakkaf-package-body-line-height) !important; font-weight: 400 !important; letter-spacing: normal !important; } html body #page-wrapper section#content.sakkaf-package-page :where(.sakkaf-tab-content-body, .detailed-logo.note) :where(p, li, span, a) { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; } html body #page-wrapper section#content.sakkaf-package-page :where(.sakkaf-tab-content-body, .detailed-logo.note) :where(strong, b) { font-weight: 700 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-notes-list > li, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-notes-list > li > span { font-family: var(--sakkaf-package-font-family) !important; font-size: var(--sakkaf-package-body-size) !important; line-height: var(--sakkaf-package-body-line-height) !important; font-weight: 400 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-notes-list > li > strong { font-weight: 700 !important; } html body #page-wrapper section#content.sakkaf-package-page :where(.price, .sakkaf-price-num, .sakkaf-similar-price strong) { font-family: var(--sakkaf-package-font-family) !important; font-size: var(--sakkaf-package-price-size) !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: -0.5px !important; } html body #page-wrapper section#content.sakkaf-package-page :where(.price small, .sakkaf-price-unit, .sakkaf-price-code, .sakkaf-similar-price small) { font-family: var(--sakkaf-package-font-family) !important; font-size: var(--sakkaf-package-supporting-size) !important; line-height: var(--sakkaf-package-supporting-line-height) !important; font-weight: 400 !important; letter-spacing: normal !important; } html body #page-wrapper section#content.sakkaf-package-page :where(.sakkaf-similar-rating, .sakkaf-contact-section a[dir="ltr"], .sakkaf-payment-logo) { font-family: var(--sakkaf-package-font-family) !important; } /* Icon fonts are exempt from the readable-text system. */ html body #page-wrapper section#content.sakkaf-package-page :where(.fa, .fa::before, .fa::after) { font-family: FontAwesome !important; } html body #page-wrapper section#content.sakkaf-package-page :where([class^="soap-icon"], [class*=" soap-icon"], [class^="soap-icon"]::before, [class*=" soap-icon"]::before) { font-family: "soap-icons" !important; } html body #page-wrapper section#content.sakkaf-package-page :where(.glyphicon, .glyphicon::before, .glyphicon::after) { font-family: "Glyphicons Halflings" !important; } /* Component-level selectors keep legacy package rules from reintroducing a second hierarchy. */ html body #page-wrapper section#content.sakkaf-package-page .sakkaf-trip-title { font-family: var(--sakkaf-package-font-family) !important; font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: normal !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-decor-title, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tours-heading, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-inout-title, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-booking-customize-content h2, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-booking-info-card h2.box-title, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-similar-heading > h2, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-contact-heading > h2, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-package-notes-heading > h2, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-gifts-heading > h2 { font-family: var(--sakkaf-package-font-family) !important; font-size: clamp(22px, 2.2vw, 28px) !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: normal !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tour-info > h3, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-gift-copy > h3, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-similar-copy > h3, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-contact-copy > h3, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tab-panel-title { font-family: var(--sakkaf-package-font-family) !important; font-size: clamp(17px, 1.6vw, 20px) !important; line-height: 1.55 !important; font-weight: 700 !important; letter-spacing: normal !important; } html body #page-wrapper section#content.sakkaf-package-page .hero-subtitle { font-family: var(--sakkaf-package-font-family) !important; font-size: 16px !important; line-height: 1.7 !important; font-weight: 400 !important; letter-spacing: normal !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tab-content-body, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tab-content-body p, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tab-content-body li, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tab-content-body span, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tab-content-body a, html body #page-wrapper section#content.sakkaf-package-page .detailed-logo.note, html body #page-wrapper section#content.sakkaf-package-page .detailed-logo.note p, html body #page-wrapper section#content.sakkaf-package-page .detailed-logo.note li, html body #page-wrapper section#content.sakkaf-package-page .detailed-logo.note span, html body #page-wrapper section#content.sakkaf-package-page .detailed-logo.note a { font-family: var(--sakkaf-package-font-family) !important; font-size: var(--sakkaf-package-body-size) !important; line-height: var(--sakkaf-package-body-line-height) !important; font-weight: 400 !important; letter-spacing: normal !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tab-content-body strong, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-tab-content-body b, html body #page-wrapper section#content.sakkaf-package-page .detailed-logo.note strong, html body #page-wrapper section#content.sakkaf-package-page .detailed-logo.note b { font-family: var(--sakkaf-package-font-family) !important; font-weight: 700 !important; } /* Match the specificity of the legacy desktop section-title rules. */ html body #page-wrapper section#content.sakkaf-package-page #package > .sakkaf-decor-header .sakkaf-decor-title, html body #page-wrapper section#content.sakkaf-package-page #package > .sakkaf-tours-wrap .sakkaf-tours-heading, html body #page-wrapper section#content.sakkaf-package-page #package > .sakkaf-inout-section .sakkaf-inout-title, html body #page-wrapper section#content.sakkaf-package-page #package > .sakkaf-gifts-section .sakkaf-gifts-heading h2, html body #page-wrapper section#content.sakkaf-package-page #package > .sakkaf-package-notes-section .sakkaf-package-notes-heading h2, html body #page-wrapper section#content.sakkaf-package-page #main > .tab-container > h2.heading-orange.heading-padding, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-heading h2, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-heading h2 { font-family: var(--sakkaf-package-font-family) !important; font-size: clamp(22px, 2.2vw, 28px) !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: normal !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-booking-section .sakkaf-booking-info-card h2.box-title, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-booking-info-card h2.box-title, html body #page-wrapper section#content.sakkaf-package-page #main .sakkaf-booking-info-card h2.box-title { font-family: var(--sakkaf-package-font-family) !important; font-size: clamp(22px, 2.2vw, 28px) !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: normal !important; } html body #page-wrapper section#content.sakkaf-package-page #sakkaf-how-to-book-title, html body #page-wrapper section#content.sakkaf-package-page #sakkaf-payment-methods-title, html body #page-wrapper section#content.sakkaf-package-page #main .sakkaf-inout-title { font-family: var(--sakkaf-package-font-family) !important; font-size: clamp(22px, 2.2vw, 28px) !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: normal !important; } html body #page-wrapper section#content.sakkaf-package-page #package .sakkaf-tour-info h3, html body #page-wrapper section#content.sakkaf-package-page #package .sakkaf-gift-copy h3, html body #page-wrapper section#content.sakkaf-package-page #main .sakkaf-similar-copy h3, html body #page-wrapper section#content.sakkaf-package-page #main .sakkaf-contact-copy h3, html body #page-wrapper section#content.sakkaf-package-page #main .sakkaf-booking-contact-group h3 { font-family: var(--sakkaf-package-font-family) !important; font-size: clamp(17px, 1.6vw, 20px) !important; line-height: 1.55 !important; font-weight: 700 !important; letter-spacing: normal !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-copy h3, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-copy h3 { font-family: var(--sakkaf-package-font-family) !important; font-size: clamp(17px, 1.6vw, 20px) !important; line-height: 1.55 !important; font-weight: 700 !important; letter-spacing: normal !important; } html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details > .sakkaf-booking-info-card > h2.box-title { font-family: var(--sakkaf-package-font-family) !important; font-size: clamp(22px, 2.2vw, 28px) !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: normal !important; } /* Normalize body copy that had legacy component-level emphasis. */ html body #page-wrapper section#content.sakkaf-package-page #package .sakkaf-ground-bullets > li, html body #page-wrapper section#content.sakkaf-package-page #package .sakkaf-tour-info > p, html body #page-wrapper section#content.sakkaf-package-page #package .sakkaf-inout-item, html body #page-wrapper section#content.sakkaf-package-page #package .sakkaf-gift-copy > p, html body #page-wrapper section#content.sakkaf-package-page #package .sakkaf-package-notes-card > li, html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-how-to-book > ul > li, html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-methods > ul > li, html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-methods > h4 { font-family: var(--sakkaf-package-font-family) !important; font-size: var(--sakkaf-package-body-size) !important; line-height: var(--sakkaf-package-body-line-height) !important; font-weight: 400 !important; letter-spacing: normal !important; } /* Readable price, rating, contact, and payment text also stays on the package font. */ html body #page-wrapper section#content.sakkaf-package-page .price-card .price, html body #page-wrapper section#content.sakkaf-package-page #main .price, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-card .sakkaf-similar-price strong, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-rating, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-rating small, html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-contact-section .sakkaf-contact-card a[dir="ltr"], html body #page-wrapper section#content.sakkaf-package-page #main > article.sakkaf-booking-payment-details .sakkaf-payment-logo { font-family: var(--sakkaf-package-font-family) !important; font-weight: 700 !important; letter-spacing: normal !important; } html body #page-wrapper section#content.sakkaf-package-page #main > .sakkaf-similar-section .sakkaf-similar-card .sakkaf-similar-price strong { font-size: 23px !important; line-height: 1.2 !important; } html body #page-wrapper section#content.sakkaf-package-page .price-card .price, html body #page-wrapper section#content.sakkaf-package-page .detailed-logo .price { font-size: var(--sakkaf-package-price-size) !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: -0.5px !important; } /* Homepage typography system: content only; header and footer stay untouched. */ html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) { --sakkaf-home-font-family: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; --sakkaf-home-body-size: 15px; --sakkaf-home-body-line-height: 1.8; --sakkaf-home-supporting-size: 13.5px; --sakkaf-home-supporting-line-height: 1.6; --sakkaf-home-button-size: 15px; --sakkaf-home-price-size: clamp(30px, 3vw, 40px); font-family: var(--sakkaf-home-font-family) !important; font-size: var(--sakkaf-home-body-size) !important; line-height: var(--sakkaf-home-body-line-height) !important; font-weight: 400 !important; letter-spacing: normal !important; } html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) *:not(i):not(svg):not(path):not(circle):not(line):not(rect):not(polygon):not(polyline):not(ellipse) { font-family: var(--sakkaf-home-font-family) !important; letter-spacing: normal !important; } html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) :is(h1, h2, h3, h4, h5, h6, p, li, a, label, input, select, textarea, small, strong, b, span:not([aria-hidden="true"])) { font-family: var(--sakkaf-home-font-family) !important; font-size: var(--sakkaf-home-body-size) !important; line-height: var(--sakkaf-home-body-line-height) !important; font-weight: 400 !important; letter-spacing: normal !important; } /* Reset legacy Rich Text presentation without changing stored content. */ html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) [style*="font-family"], html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) [style*="font-size"], html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) [style*="font-weight"], html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) [style*="line-height"], html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) [style*="letter-spacing"] { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; } /* Headings: one bold hierarchy across every homepage section. */ html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) :is(h1, h1 a, h1 span:not([aria-hidden="true"])) { font-family: var(--sakkaf-home-font-family) !important; font-size: clamp(28px, 5.2vw, 48px) !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: normal !important; } html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) :is(h2, h2 a, h2 span:not([aria-hidden="true"])) { font-family: var(--sakkaf-home-font-family) !important; font-size: clamp(22px, 2.4vw, 30px) !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: normal !important; } html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) :is(h3, h3 a, h3 span:not([aria-hidden="true"])) { font-family: var(--sakkaf-home-font-family) !important; font-size: clamp(17px, 1.7vw, 21px) !important; line-height: 1.5 !important; font-weight: 700 !important; letter-spacing: normal !important; } html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) :is(h4, h5, h6) { font-family: var(--sakkaf-home-font-family) !important; font-size: var(--sakkaf-home-supporting-size) !important; line-height: 1.7 !important; font-weight: 700 !important; letter-spacing: normal !important; } /* Hero, quick-link, card, and section supporting text. */ html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) :is(.hero-caption-panel p, .quick-copy small, .offers .section-heading p, .offers .type-pill, .offers .badge, .offers .price small, .offers .price > span, .dest-tag, .destination-heading p, .services-heading p, .why-heading p, .testimonials-heading p, .guide-heading p, .contact-heading p, .contact-card-subtitle, .contact-meta-desc, .review-country, .review-video-hint, .truly-sub) { font-family: var(--sakkaf-home-font-family) !important; font-size: var(--sakkaf-home-supporting-size) !important; line-height: var(--sakkaf-home-supporting-line-height) !important; font-weight: 400 !important; letter-spacing: normal !important; } /* Headline-like quick-link labels and prices. */ html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) :is(.quick-copy b, .offers .price strong, .contact-meta-title, .contact-email-title) { font-family: var(--sakkaf-home-font-family) !important; font-weight: 700 !important; letter-spacing: normal !important; } html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) .offers .price strong { font-size: var(--sakkaf-home-price-size) !important; line-height: 1.1 !important; } /* Buttons and action labels use the same bold text token. */ html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) :is(.hero-caption-button, .hero-caption-button span, .offers .tab, .details-btn, .details-btn span, .more-btn, .more-btn span, .dest-card-btn, .dest-card-btn span, .service-btn, .testimonials-more-btn, .guide-pill-btn, .guide-pill-btn span, .guide-more-btn, .guide-more-btn span, .contact-card-action, .contact-card-action span) { font-family: var(--sakkaf-home-font-family) !important; font-size: var(--sakkaf-home-button-size) !important; line-height: 1.5 !important; font-weight: 700 !important; letter-spacing: normal !important; } /* Keep the existing icon fonts functional while readable text stays on IBM Plex Sans Arabic. */ html body #page-wrapper > :is( .sakkaf-home-hero-section, .quick-links, #content.sakkaf-home-content, #sakkaf-destinations, #sakkaf-services, #sakkaf-why, #sakkaf-testimonials, #sakkaf-guide, #sakkaf-contact, .sakkaf-testimonial-modal ) :is(.fa, .fas, .far, .fab, .glyphicon, [class^="soap-icon"], [class*=" soap-icon"]) { letter-spacing: normal !important; } /* Refine homepage spacing and keep every package category reachable on mobile. */ @media (max-width: 767px) { html body #page-wrapper > .quick-links.section-shell { gap: 9px !important; padding: 16px 16px !important; } html body #page-wrapper > .quick-links.section-shell .quick-card { min-height: 82px !important; gap: 10px !important; padding: 11px 14px 11px 42px !important; border-radius: 16px !important; } html body #page-wrapper > .quick-links.section-shell .quick-icon { flex-basis: 52px !important; width: 52px !important; height: 52px !important; } html body #page-wrapper > .quick-links.section-shell .quick-icon svg { width: 29px !important; height: 29px !important; } html body #page-wrapper > .quick-links.section-shell .quick-copy b { font-size: 15px !important; line-height: 1.35 !important; } html body #page-wrapper > .quick-links.section-shell .quick-copy small { margin-top: 2px !important; font-size: 11.5px !important; line-height: 1.35 !important; } html body #page-wrapper > .quick-links.section-shell .quick-card .round-arrow { left: 11px !important; } html body #sakkaf-packages.offers .tabs { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; margin: 18px 0 22px !important; padding: 6px !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-inline: contain !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; border-radius: 22px !important; } html body #sakkaf-packages.offers .tabs > .tab, html body #sakkaf-packages.offers .tabs > .tab:nth-child(n + 4) { display: inline-flex !important; flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; min-height: 42px !important; padding: 8px 16px !important; white-space: nowrap !important; font-size: 13px !important; border-radius: 999px !important; } html body #sakkaf-packages.offers .offer-card .offer-body { padding: 10px 8px 8px !important; } html body #sakkaf-packages.offers .offer-card .offer-body h3 { margin-bottom: 4px !important; } html body #sakkaf-packages.offers .offer-card .type-pill { margin-bottom: 6px !important; padding: 4px 12px !important; } html body #sakkaf-packages.offers .offer-card .offer-body ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 2px 8px !important; margin: 0 0 5px !important; } html body #sakkaf-packages.offers .offer-card .offer-body li { min-height: 25px !important; gap: 5px !important; padding: 3px 2px !important; font-size: 11.5px !important; line-height: 1.3 !important; } html body #sakkaf-packages.offers .offer-card .offer-body li > span:first-child { min-width: 0 !important; overflow-wrap: anywhere !important; } html body #sakkaf-packages.offers .offer-card .offer-feat-icon svg { width: 15px !important; height: 15px !important; } html body #sakkaf-packages.offers .offer-card .price { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: baseline !important; justify-content: center !important; column-gap: 7px !important; row-gap: 0 !important; padding: 6px 0 5px !important; border-top: 1px solid #ecd9dd !important; } html body #sakkaf-packages.offers .offer-card .price small, html body #sakkaf-packages.offers .offer-card .price > span { font-size: 11px !important; line-height: 1.25 !important; } html body #sakkaf-packages.offers .offer-card .price strong { font-size: 29px !important; line-height: 1 !important; } html body #sakkaf-packages.offers .offer-card .details-btn { padding: 9px 12px !important; line-height: 1.35 !important; } html body #sakkaf-destinations .destination-card img { height: clamp(88px, 22vw, 108px) !important; } } @media (max-width: 380px) { html body #page-wrapper > .quick-links.section-shell .quick-card { min-height: 78px !important; padding-inline: 11px 38px !important; } html body #page-wrapper > .quick-links.section-shell .quick-icon { flex-basis: 48px !important; width: 48px !important; height: 48px !important; } html body #page-wrapper > .quick-links.section-shell .quick-copy b { font-size: 14px !important; } html body #sakkaf-packages.offers .offer-card .offer-body ul { grid-template-columns: minmax(0, 1fr) !important; } } /* Compact mobile contact cards to match the two-column reference layout. */ @media (max-width: 767px) { html body #page-wrapper #sakkaf-contact .contact-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; direction: ltr !important; } html body #page-wrapper #sakkaf-contact .contact-card { min-height: 142px !important; padding: 9px 7px !important; border-radius: 12px !important; } html body #page-wrapper #sakkaf-contact .contact-card:nth-child(3) { grid-column: 1 / -1 !important; min-height: 126px !important; } html body #page-wrapper #sakkaf-contact .contact-service-icon { width: 48px !important; height: 48px !important; margin-bottom: 5px !important; } html body #page-wrapper #sakkaf-contact .contact-service-icon i { font-size: 21px !important; } html body #page-wrapper #sakkaf-contact .contact-card-info h3 { margin-bottom: 2px !important; font-size: 14px !important; line-height: 1.35 !important; } html body #page-wrapper #sakkaf-contact .contact-card-subtitle { margin-bottom: 5px !important; font-size: 11px !important; line-height: 1.35 !important; } html body #page-wrapper #sakkaf-contact .contact-card-phone { font-size: 12px !important; } html body #page-wrapper #sakkaf-contact .contact-phone-wa-icon { width: 20px !important; height: 20px !important; } html body #page-wrapper #sakkaf-contact .contact-card-action { display: none !important; } html body #page-wrapper #sakkaf-contact .contact-meta-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; margin-top: 9px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body #page-wrapper #sakkaf-contact .contact-meta-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 5px !important; min-height: 128px !important; padding: 10px 8px !important; background: #ffffff !important; border: 1px solid #eadfda !important; border-radius: 12px !important; text-align: center !important; } html body #page-wrapper #sakkaf-contact .contact-meta-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; margin: 0 !important; border-radius: 50% !important; background: #fde5ef !important; color: #a70b67 !important; } html body #page-wrapper #sakkaf-contact .contact-meta-icon svg { width: 21px !important; height: 21px !important; } html body #page-wrapper #sakkaf-contact .contact-meta-text { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; text-align: center !important; } html body #page-wrapper #sakkaf-contact .contact-meta-title { font-size: 12px !important; line-height: 1.4 !important; } html body #page-wrapper #sakkaf-contact .contact-meta-desc, html body #page-wrapper #sakkaf-contact .contact-email-addr { font-size: 10px !important; line-height: 1.4 !important; overflow-wrap: anywhere !important; } } /* Keep destination tags together on very narrow phones. */ @media (max-width: 380px) { html body #sakkaf-destinations .destination-card .dest-tags { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; gap: 2px !important; width: 100% !important; min-width: 0 !important; } html body #sakkaf-destinations .destination-card .dest-tag { flex: 0 1 auto !important; min-width: 0 !important; padding: 2px 4px !important; font-size: 9px !important; line-height: 1.25 !important; white-space: nowrap !important; } } html body #sakkaf-guide .guide-country-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: stretch !important; } html body #sakkaf-guide .guide-country-card .guide-body h3 { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; min-height: calc(1.35em * 2) !important; overflow: hidden !important; } html body #sakkaf-guide .guide-country-title-link { color: inherit !important; text-decoration: none !important; } html body #sakkaf-guide .guide-country-title-link:hover, html body #sakkaf-guide .guide-country-title-link:focus { color: #7a1747 !important; text-decoration: underline !important; } html body #sakkaf-guide .guide-country-card .guide-body p { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; min-height: calc(1.55em * 3) !important; overflow: hidden !important; } @media (min-width: 768px) and (max-width: 991px) { html body #sakkaf-guide .guide-country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Final mobile fixes for the package details page. */ html body #page-wrapper section#content.sakkaf-package-page .sakkaf-decor-badge { display: grid !important; place-items: center !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-decor-badge svg { display: block !important; width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; margin: 0 !important; flex: 0 0 22px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-badge-circle { display: grid !important; place-items: center !important; flex: 0 0 42px !important; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; padding: 0 !important; line-height: 0 !important; box-sizing: border-box !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-badge-circle svg { display: block !important; width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; margin: 0 !important; flex: 0 0 18px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-phone-control { display: grid !important; grid-template-columns: 28px 82px minmax(0, 1fr) !important; align-items: center !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; min-height: 56px !important; padding: 6px 10px !important; overflow: hidden !important; box-sizing: border-box !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-phone-control .sakkaf-phone-whatsapp { display: grid !important; place-items: center !important; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; margin: 0 !important; padding: 0 !important; color: #25b96a !important; line-height: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-phone-control .sakkaf-phone-whatsapp svg { display: block !important; width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; margin: 0 !important; overflow: visible !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-phone-control select, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-phone-control input { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 42px !important; margin: 0 !important; box-sizing: border-box !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-phone-control select { padding: 0 5px !important; text-align: center !important; font-size: 12px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-phone-control input { padding-inline: 10px !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-booking-request-icon { display: grid !important; place-items: center !important; flex: 0 0 44px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; line-height: 0 !important; box-sizing: border-box !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-booking-request-icon svg { display: block !important; width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; margin: 0 !important; overflow: visible !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-booking-process-link-arrow { display: grid !important; place-items: center !important; line-height: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-booking-process-link-arrow svg, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-booking-process-card-icon { display: block !important; width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } @media (max-width: 767px) { html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotels-list { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; width: 100% !important; min-width: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-card { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; padding: 12px !important; gap: 10px !important; overflow: hidden !important; box-sizing: border-box !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-main { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "hotel-image" "hotel-info" !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; overflow: visible !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-image { grid-area: hotel-image !important; order: 0 !important; position: relative !important; inset: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; aspect-ratio: 16 / 10 !important; overflow: hidden !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-image img { display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; object-fit: cover !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-info { grid-area: hotel-info !important; order: 0 !important; position: relative !important; inset: auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; padding: 2px 0 !important; overflow: visible !important; text-align: right !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-city, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-country, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-name, html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-stars { position: static !important; inset: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; overflow-wrap: anywhere !important; white-space: normal !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-city { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; line-height: 1.5 !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-name a { display: inline !important; overflow-wrap: anywhere !important; white-space: normal !important; } html body #page-wrapper section#content.sakkaf-package-page .sakkaf-hotel-meta { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: 100% !important; min-width: 0 !important; height: auto !important; } html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-facts { display: flex !important; flex-direction: column !important; width: 100% !important; min-width: 0 !important; padding: 8px 14px !important; gap: 0 !important; box-sizing: border-box !important; } html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-facts > div { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 10px 0 !important; box-sizing: border-box !important; border-bottom: 1px solid #eee8ee !important; } html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-facts > div:last-child { border-bottom: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-fact-heading { position: static !important; display: flex !important; align-items: center !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; line-height: 1.4 !important; white-space: normal !important; overflow-wrap: anywhere !important; } html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-fact-heading > span:last-child { display: block !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; } html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-fact-divider { display: none !important; } html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-fact-value { position: static !important; display: block !important; flex: 0 0 auto !important; align-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; text-align: right !important; direction: rtl !important; line-height: 1.5 !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; writing-mode: horizontal-tb !important; text-overflow: clip !important; transform: none !important; } html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-fact-icon { display: grid !important; place-items: center !important; flex: 0 0 36px !important; width: 36px !important; height: 36px !important; margin: 0 !important; } html body #page-wrapper section#content.sakkaf-package-page .hero.sakkaf-hero-section .trip-fact-icon svg { display: block !important; width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; } } @media (max-width: 767px) { html body #sakkaf-guide .guide-country-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; } html body #sakkaf-guide .guide-country-card .guide-photo-link { aspect-ratio: 16 / 9 !important; } html body #sakkaf-guide .guide-country-card .guide-body { padding: 14px 16px 16px !important; } html body #sakkaf-guide .guide-country-card .guide-body h3 { font-size: clamp(16px, 4.2vw, 20px) !important; } html body #sakkaf-guide .guide-country-card .guide-body p { font-size: clamp(12px, 3.2vw, 14px) !important; line-height: 1.55 !important; min-height: 0 !important; -webkit-line-clamp: 3 !important; } html body #sakkaf-guide .guide-country-card .guide-pill-btn { width: 100% !important; max-width: none !important; padding: 9px 16px !important; font-size: 14px !important; } } /* Homepage link into the tourism services landing page. */ .services-discover-all { display:flex; justify-content:center; padding:25px 16px 35px; } .services-discover-all-link { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:45px; padding:10px 23px; border:1px solid #d60068; border-radius:999px; background:linear-gradient(110deg,#e90070,#c0005f); color:#fff; font-size:15px; font-weight:700; text-decoration:none; } .services-discover-all-link:hover,.services-discover-all-link:focus-visible { color:#fff; background:#881049; text-decoration:none; } /* Keep the mobile drawer animation on composited properties and avoid blurring the page behind it. */ @media (max-width: 991px) { #mobile-menu-01.sakkaf-mobile-menu { transition: opacity 0.2s ease, visibility 0s linear 0.22s !important; } #mobile-menu-01 .sakkaf-mobile-menu-backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: opacity 0.18s ease !important; } #mobile-menu-01 .sakkaf-mobile-menu-panel { transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) !important; } } @media (max-width: 991px) and (prefers-reduced-motion: reduce) { #mobile-menu-01.sakkaf-mobile-menu, #mobile-menu-01 .sakkaf-mobile-menu-backdrop, #mobile-menu-01 .sakkaf-mobile-menu-panel { transition-duration: 0.01ms !important; transition-delay: 0s !important; } } /* Nights ribbon on home package cards */ .offers .photo-wrap .nights-ribbon{position:absolute;top:12px;left:12px;z-index:4;pointer-events:none} .offers .photo-wrap .nights-ribbon__tag::before{content:"";order:3;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3c969' d='M20.8 14.2A8.8 8.8 0 0 1 9.8 3.2 9 9 0 1 0 20.8 14.2Z'/%3E%3C/svg%3E") no-repeat center/contain} .offers .photo-wrap .nights-ribbon__tag{display:inline-flex;flex-direction:row;align-items:center;gap:6px;width:auto;padding:6px 12px;background:rgba(44,28,55,.72);border:1px solid rgba(255,255,255,.34);border-radius:999px;color:#fff;line-height:1;clip-path:none} .offers .photo-wrap .nights-ribbon b{font-size:14px;font-weight:800;letter-spacing:0} .offers .photo-wrap .nights-ribbon small{font-size:13px;font-weight:700} @media(max-width:600px){.offers .photo-wrap .nights-ribbon{left:10px;top:10px}.offers .photo-wrap .nights-ribbon__tag{padding:5px 10px}.offers .photo-wrap .nights-ribbon b{font-size:13px}.offers .photo-wrap .nights-ribbon small{font-size:12px}} /* Package tabs: every category in one row that scrolls sideways (all screen sizes). */ html body #sakkaf-packages.offers .tabs{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;width:max-content!important;max-width:100%!important;margin:24px auto 28px!important;padding:6px 8px!important;gap:8px!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-inline:contain!important;-webkit-overflow-scrolling:touch!important;scroll-snap-type:x proximity;scrollbar-width:thin!important;scrollbar-color:#a80c64 #f0e3e8!important;border-radius:40px!important} html body #sakkaf-packages.offers .tabs::-webkit-scrollbar{display:block!important;height:5px} html body #sakkaf-packages.offers .tabs::-webkit-scrollbar-thumb{background:#a80c64;border-radius:5px} html body #sakkaf-packages.offers .tabs::-webkit-scrollbar-track{background:#f0e3e8;border-radius:5px;margin:0 14px} html body #sakkaf-packages.offers .tabs > .tab,html body #sakkaf-packages.offers .tabs > .tab:nth-child(n + 4){display:inline-flex!important;flex:0 0 auto!important;width:auto!important;min-width:max-content!important;white-space:nowrap!important;scroll-snap-align:center;grid-column:auto!important} @media(max-width:575px){html body #sakkaf-packages.offers .tabs{width:100%!important;margin:18px 0 22px!important;border-radius:22px!important}} /* Scroll performance: instant wheel scrolling and no blur recomputed under fixed bars. */ html { scroll-behavior: auto; } .sakkaf-scroll-reveal { will-change: auto; } #header.sakkaf-site-header { background: rgba(248, 248, 251, .97) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } #header.sakkaf-site-header .sakkaf-main-menu > .container { -webkit-backdrop-filter: none; backdrop-filter: none; } .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav, html body .visible-mobile #mobile-search-tabs.sakkaf-bottom-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }