body {
  overflow-x: hidden;
  direction: rtl;
}

.slick-slider,
.owl-carousel {
  direction: ltr;
}

.owl-carousel .owl-nav,
.owl-carousel .owl-dots,
.slick-slider .slick-slide,
.slick-slider .slick-dots,
.owl-carousel .owl-item {
  direction: rtl;
}

.contact__input-box .bootstrap-select .dropdown-menu,
.bootstrap-select .dropdown-toggle .filter-option {
  text-align: right;
}

.list-unstyled {
  padding-right: 0;
}

.scroll-to-top {
  left: -25px;
}

.about-one__experience::before {
  clip-path: polygon(0 0, 99% 0, 50% 50%, 0 100%);
}

.download-app-one__image__shape {
  -webkit-mask: url('data:image/svg+xml;utf8,<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900.000000 744.000000"><g transform="translate(0.000000,744.000000) scale(0.100000,-0.100000)" stroke="none"> <path d="M6915 6685 c-308 -63 -599 -293 -953 -754 -24 -31 -53 -67 -65 -81 -12 -13 -35 -43 -52 -66 -42 -59 -238 -314 -263 -344 -12 -14 -69 -83 -127 -155 -155 -190 -420 -449 -534 -520 -9 -6 -43 -28 -76 -50 -132 -87 -274 -142 -458 -179 -104 -21 -391 -22 -507 -1 -179 32 -323 65 -390 90 -19 7 -64 22 -100 33 -111 35 -136 45 -233 86 -21 9 -42 16 -47 16 -6 0 -38 13 -72 29 -35 15 -88 38 -118 51 -30 12 -89 38 -130 57 -41 19 -95 44 -120 55 -25 11 -52 24 -60 29 -8 5 -25 13 -37 19 -30 12 -220 100 -358 165 -110 51 -208 96 -255 115 -30 12 -68 28 -85 35 -16 7 -50 21 -75 30 -25 10 -55 22 -66 27 -33 15 -185 68 -224 78 -19 5 -78 20 -130 34 -171 44 -258 56 -413 56 -302 0 -525 -89 -729 -291 -119 -119 -184 -227 -224 -377 -17 -64 -19 -384 -3 -464 22 -109 57 -227 99 -338 12 -30 26 -69 31 -87 5 -18 14 -35 19 -38 6 -4 10 -13 10 -21 0 -25 63 -153 431 -885 79 -157 156 -312 171 -345 14 -32 40 -89 57 -127 17 -37 31 -71 31 -76 0 -5 13 -39 30 -76 16 -37 30 -73 30 -81 0 -7 6 -28 14 -46 24 -58 58 -180 93 -333 26 -116 26 -466 0 -580 -57 -250 -157 -484 -323 -753 -93 -152 -92 -150 -149 -234 -104 -150 -149 -215 -189 -268 -47 -62 -76 -107 -76 -115 0 -3 1931 -5 4290 -5 4057 0 4292 1 4318 17 34 22 43 31 65 66 10 15 22 25 27 22 7 -4 10 542 10 1493 l0 1500 -25 6 c-31 8 -159 69 -200 96 -16 11 -37 23 -47 27 -52 25 -227 174 -291 249 -39 47 -74 91 -77 97 -3 7 -16 30 -31 52 -52 82 -124 253 -162 385 -35 120 -70 312 -91 500 -21 176 -46 499 -46 575 1 134 -45 570 -76 725 -35 176 -111 403 -151 451 -7 8 -13 18 -13 21 0 20 -92 137 -154 196 -77 73 -89 81 -196 133 -160 78 -366 107 -525 74z"/> </g> </svg>');
  mask: url('data:image/svg+xml;utf8,<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900.000000 744.000000"><g transform="translate(0.000000,744.000000) scale(0.100000,-0.100000)" stroke="none"> <path d="M6915 6685 c-308 -63 -599 -293 -953 -754 -24 -31 -53 -67 -65 -81 -12 -13 -35 -43 -52 -66 -42 -59 -238 -314 -263 -344 -12 -14 -69 -83 -127 -155 -155 -190 -420 -449 -534 -520 -9 -6 -43 -28 -76 -50 -132 -87 -274 -142 -458 -179 -104 -21 -391 -22 -507 -1 -179 32 -323 65 -390 90 -19 7 -64 22 -100 33 -111 35 -136 45 -233 86 -21 9 -42 16 -47 16 -6 0 -38 13 -72 29 -35 15 -88 38 -118 51 -30 12 -89 38 -130 57 -41 19 -95 44 -120 55 -25 11 -52 24 -60 29 -8 5 -25 13 -37 19 -30 12 -220 100 -358 165 -110 51 -208 96 -255 115 -30 12 -68 28 -85 35 -16 7 -50 21 -75 30 -25 10 -55 22 -66 27 -33 15 -185 68 -224 78 -19 5 -78 20 -130 34 -171 44 -258 56 -413 56 -302 0 -525 -89 -729 -291 -119 -119 -184 -227 -224 -377 -17 -64 -19 -384 -3 -464 22 -109 57 -227 99 -338 12 -30 26 -69 31 -87 5 -18 14 -35 19 -38 6 -4 10 -13 10 -21 0 -25 63 -153 431 -885 79 -157 156 -312 171 -345 14 -32 40 -89 57 -127 17 -37 31 -71 31 -76 0 -5 13 -39 30 -76 16 -37 30 -73 30 -81 0 -7 6 -28 14 -46 24 -58 58 -180 93 -333 26 -116 26 -466 0 -580 -57 -250 -157 -484 -323 -753 -93 -152 -92 -150 -149 -234 -104 -150 -149 -215 -189 -268 -47 -62 -76 -107 -76 -115 0 -3 1931 -5 4290 -5 4057 0 4292 1 4318 17 34 22 43 31 65 66 10 15 22 25 27 22 7 -4 10 542 10 1493 l0 1500 -25 6 c-31 8 -159 69 -200 96 -16 11 -37 23 -47 27 -52 25 -227 174 -291 249 -39 47 -74 91 -77 97 -3 7 -16 30 -31 52 -52 82 -124 253 -162 385 -35 120 -70 312 -91 500 -21 176 -46 499 -46 575 1 134 -45 570 -76 725 -35 176 -111 403 -151 451 -7 8 -13 18 -13 21 0 20 -92 137 -154 196 -77 73 -89 81 -196 133 -160 78 -366 107 -525 74z"/></g></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: auto;
  mask-size: auto;
}

.quick-loan-one__bg {
  clip-path: polygon(0 0, 84% 0, 100% 100%, 0% 100%);
}

@media (max-width: 991px) {
  .quick-loan-one__bg {
    clip-path: none;
  }
}

.quick-loan-one__money {
  left: 340px;
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
  left: 0;
  right: auto;
}

.main-header__btn .gotur-btn__icon .icon-right-arrow,
.footer-widget__newsletter .icon-right-arrow {
  display: inline-block;
  transform: rotate(180deg);
}

.main-slider-four .banner-form,
.main-slider-three .banner-form,
.main-slider-two .banner-form,
.main-slider-one .banner-form,
.main-slider-one__element-two,
.main-slider-one__element-one {
  visibility: hidden;
}

/* Popup Styles */
.gotur-popup {
  display: none;
  background-color: var(--gotur-base, #CBA36B);
  padding: 14px 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  z-index: 999;
  position: fixed;
  top: 30px;
  right: 30px;
}
.gotur-popup p {
  color: var(--gotur-white, #FFFFFF);
  margin-bottom: 0;
}

.popup-content {
  text-align: center;
  text-transform: capitalize;
  font-size: 16px;
  font-weight: 600;
}

.popup-content,
.popup-content a {
  color: var(--gotur-white, #FFFFFF);
}

#gotur-popup,
.gotur-added-wishlist,
.gotur-removed-wishlist {
  display: none;
}

.room-details-three__social__item.ba-wishlist-added,
.room-details__room-info__bottom__right__item.ba-wishlist-added {
    background-color: var(--gotur-gray, #1C2F36);
    color: var(--gotur-base, #CBA36B);
}

.room-details-two__btns .ba-wishlist-added {
  background-color: var(--gotur-base, #CBA36B);
  color: var(--gotur-white, #FFFFFF);
}

.feature-five-card__thumb__popup__love .room-details__room-info__bottom__right__item {
  border-radius: 0;
}

.main-slider-four .banner-form, .main-slider-three .banner-form, .main-slider-two .banner-form, .main-slider-one .banner-form, .main-slider-one__element-two, .main-slider-one__element-one {
    visibility: visible;
}

.banner-form .banner-form__control--date::after {
    content: unset;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.top-one__social a {
    margin-right: 28px;
}

.main-header__info a:first-child {
    margin-right: 20px;
}

.offer-one__card__thumb {
    transform: rotateY(-180deg);
}

.offer-one__card--two .offer-one__card__thumb {
    left: -1px;
    right: auto;
    transform: rotateY(0deg);
}

.offer-one__card--two .offer-one__card__btn {
    text-align: start;
}

.testimonials-three::after, .testimonials-three__thumb img, .footer-widget__newsletter .form-group__form button[type=submit], .blog-card-two__meta a i, .offer-one__element {
    transform: rotateY(-180deg);
}

.main-footer__element-two {
    bottom: -65px;
}

/* Mirror the hero destinations carousel for RTL: the default CSS anchors
   it to the right edge (peeking off-screen on that side) which only makes
   sense in LTR. Without this it bleeds off the LEFT edge instead of the
   right, overlapping the hero text. */
.rtl .main-slider-one__destinations {
    right: auto;
    left: 0;
    margin-right: auto;
    margin-left: -250px;
}

.rtl .main-slider-one__destinations__hover {
    left: auto;
    right: -150px;
}

@media (max-width: 1500px) {
    .rtl .main-slider-one__destinations {
        margin-left: -150px;
    }

    .rtl .main-slider-one__destinations__hover {
        left: auto;
        right: -70px;
    }
}

/* Site-wide arrow/chevron mirroring for RTL. These icon fonts (Gotur's own,
   Font Awesome, Elementor's eicons) draw "right"/"left" glyphs pointing the
   LTR way; flipping each one horizontally turns a right-pointing arrow into
   a left-pointing one and vice versa, so every "next/continue" arrow across
   buttons, carousels, and links ends up pointing towards where Arabic
   reading flow actually continues (start = right, end = left) without
   having to hunt down and fix each button individually. Only true left/right
   pointers are listed here — up/down and non-directional icons (fa-arrows-alt,
   fa-location-arrow, fa-cart-arrow-down, icon-down-arrow, etc.) are left alone. */
.icon-arrow-left,
.icon-arrow-right,
.icon-arrow-point-to-right,
.icon-right-arrow,
.icon-right,
.icon-fast-forward-double-right-arrows-symbol,
.fa-arrow-left,
.fa-arrow-right,
.fa-arrow-circle-left,
.fa-arrow-circle-right,
.fa-arrow-alt-circle-left,
.fa-arrow-alt-circle-right,
.fa-angle-left,
.fa-angle-right,
.fa-angle-double-left,
.fa-angle-double-right,
.fa-caret-left,
.fa-caret-right,
.fa-caret-square-left,
.fa-caret-square-right,
.fa-chevron-left,
.fa-chevron-right,
.fa-chevron-circle-left,
.fa-chevron-circle-right,
.fa-long-arrow-alt-left,
.fa-long-arrow-alt-right,
.eicon-angle-left,
.eicon-angle-right,
.eicon-arrow-circle-left,
.eicon-arrow-left,
.eicon-arrow-right,
.eicon-chevron-double-left,
.eicon-chevron-double-right,
.eicon-chevron-left,
.eicon-chevron-right,
.eicon-long-arrow-left,
.eicon-long-arrow-right {
    display: inline-block;
    transform: scaleX(-1);
}

/*# sourceMappingURL=gotur-custom-rtl.css.map */
/* "عروض تمنحك راحة أكبر" homepage offer cards (.offer-one__card): the
   decorative thumb image is absolutely-positioned and pinned to a literal
   physical edge - right for the default card, left for the --two
   modifier - via a hand-drawn SVG mask per side, unaffected by text
   direction (that's intentional; see the .offer-one__card__thumb mask
   rules in style.css). The TEXT content, however, is the only child left
   participating in the flex layout (the image is taken out of flow by
   position:absolute), so it defaults to this row's flex-start edge -
   which under RTL is the physical RIGHT for BOTH variants. That collides
   with the default card's image (also pinned right), cramming text over
   the image and leaving the whole left half empty; the --two card is
   unaffected since its image already sits on the opposite (left) edge.
   Push the default variant's content to the flex-end (physical left)
   edge instead so it lands opposite its image, matching --two. */
.offer-one__card:not(.offer-one__card--two) {
    justify-content: flex-end;
}

/* About-us "تجارب حقيقية" testimonial carousel: the theme pins its
   next/prev nav buttons to the card's own bottom-right corner
   (.owl-nav{position:absolute;right:0;bottom:0}), which lands directly on
   top of the reviewer's name/photo that sits at the bottom of the same
   card - the two overlap and the name gets partly hidden behind the
   button. Move the nav outside the card entirely (vertically centered on
   its right edge) instead of anchoring it inside a corner that active
   content also uses. */
.about-testimonials__carousel .owl-nav {
    bottom: auto;
    top: 50%;
    right: -70px;
    transform: translateY(-50%);
}

@media (max-width: 1400px) {
    .about-testimonials__carousel .owl-nav {
        /* left, not right - author-requested. */
        right: auto;
        left: 0;
        bottom: auto;
        top: -60px;
        transform: none;
    }
}

/* Blog sidebar widget cards (.sidebar__single / .sidebar .widget) used a
   generic bootstrap-style gray (var(--gotur-gray), overridden site-wide to
   #6b7280 via the color customizer) instead of a brand color. Swapped for
   the same navy already used for the footer/search-card buttons elsewhere
   on the site - kept dark so the existing white text/links inside these
   widgets stay readable without needing to rewrite every sub-rule too. */
.sidebar .widget,
.sidebar__single {
    background-color: #071b53 !important;
}

/* Contact page cards (.contact-top__item, "اتصل بنا") - same bug as the
   blog sidebar above (var(--gotur-gray) again), just not yet found. Icon
   and hover-fill colors are already on-brand here (--gotur-primary is
   coral, --gotur-base is teal) - only the idle card background needed
   fixing. White instead of navy this time (unlike the sidebar, this
   card's title/text already read fine on white, and rewriting every
   sub-rule for readable text-on-navy isn't worth it for a cleaner
   result). The card's own ::after pseudo-element already draws a light
   inset border, so no extra border/shadow needed here. */
.contact-top__item {
    background-color: #fff !important;
}

/* "اتصل بنا" submit button arrow (CF7 form 3361's own template - not a
   theme file, edited directly via wp-cli) - its old <i class="icon-arrow-
   left"> rendered as a RIGHT-pointing arrow: that class name is defined
   by two different icon font libraries loaded on this site with
   different glyphs, and the wrong one wins here regardless of which
   icon-arrow-* class is used. Replaced with a plain inline SVG
   (.agz-btn-arrow) that sidesteps the collision entirely. Also: the
   theme's own ".comments-form__form button i { margin-left: 10px }" is
   an RTL/LTR mismatch (the icon sits to the LEFT of the text in this
   RTL button, so a gap between them needs margin on its RIGHT, not its
   left) - was rendering the arrow glued flush against the text. */
.agz-btn-arrow {
    display: inline-flex;
    margin-right: 10px;
    margin-left: 0;
    vertical-align: middle;
}

/* Mobile drawer social icons (.mobile-nav__social, header template 3963) -
   the "التباعد بينها مش مظبوط" complaint traced back to a MISSING icon, not
   real spacing math: style-rtl.css already applies a flat, even
   "a + a { margin-right:20px }" between every icon, but the Instagram
   link's icon (assigned "fab fa-instagram" via Elementor's icon picker,
   set to work around gotur-icons having no Instagram glyph at all) was
   rendering as an empty ~0px box - same root cause as the earlier
   lightbox-icon bug: this theme's global "* { font-family:'Tajawal'
   !important }" rule beats Font Awesome's own font-family declaration, so
   the glyph never paints even though Font Awesome is loaded site-wide.
   Fixed the same way as the contact-form arrow: bypass the icon font
   entirely with a plain inline SVG, drawn here via a CSS mask (currentColor)
   on the <i> element itself so no markup/Elementor-data edit is needed. */
.mobile-nav__social a .fa-instagram {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.mobile-nav__social a .fa-instagram::before {
    content: "" !important;
}

/* Hero search "المسافرين" (occupancy) field, .agz-occupancy__summary - the
   readonly text input showing "X بالغين، Y أطفال، Z غرف" had no width
   rule of its own at all, so it rendered far narrower than its own
   column (measured ~82px in a 170px-wide column) and the generated text
   simply ran past its right edge and got clipped - reading as "room
   count doesn't show" when the value was always being set correctly
   (confirmed via the input's own .value). Filling the column and adding
   a graceful ellipsis fallback (for the rare very-long combination that
   still doesn't fit even after gotur-theme.js's shorter default-case
   wording) fixes this for good instead of just for the common case. */
/* The theme's shared ".banner-form__control { padding-left:45px }" rule
   reserves room for an icon absolutely-positioned over that padding
   (".banner-form__control .icon { position:absolute; left:0 }") - a
   layout meant for fields where the icon sits beside a single line of
   text. This field's icon instead sits above the value (its own label
   row), so that reserved padding was pure dead space subtracted from
   every row below it, including the summary input - the real reason
   "1 غرفة" was rendering past the edge and getting clipped, not a
   missing value (the input's value has always included it correctly).
   Switching the icon to a normal inline element next to its label frees
   that space for the whole field and matches how it actually reads. */
.agz-occupancy {
    padding-left: 0 !important;
}
.agz-occupancy > .icon {
    position: static !important;
    display: inline-block;
    font-size: 16px !important;
    vertical-align: middle;
    margin-right: 6px;
    transform: none !important;
}
.agz-occupancy__summary {
    width: 100% !important;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Offers page ("العروض", post 5303) - its first content container
   (data-id de91eaf, holding the "العروض الحالية" heading) has no top
   padding/margin of its own, so it sits flush against the page banner
   with zero gap - unlike other inner pages, where the first widget
   happens to carry enough of its own margin to read fine. Scoped to
   this one page/container rather than a global ".page-header + …" rule,
   since other pages don't show the same problem and a blanket fix risks
   doubling up spacing that's already fine there. */
.elementor-5303 .elementor-element[data-id="de91eaf"] {
    padding-top: 40px;
}