instead broke that
rhythm and showed up as a cramped bar on the inner pages. */
.trx-addons-nav-menu .jemas-lang {
position: relative;
margin-inline-start: 0;
padding-inline-start: 16px;
}
.trx-addons-nav-menu .jemas-lang::before {
content: "";
position: absolute;
inset-inline-start: 7px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 18px;
background: currentColor;
opacity: 0.2;
}
/* The accent colour needs !important: the menu link colour is set that way
further up the stack, and it beat every selector tried against it. */
.trx-addons-nav-menu .jemas-lang > a,
.jemas-lang > a {
color: #017C7A !important;
font-weight: 500;
padding-inline: 10px;
transition: color 0.2s ease;
}
/* The theme draws its menu underline with a pseudo-element on the link and
positions it absolutely. Reusing that same pseudo-element for the globe is
what made the icon float across the label on hover — so the globe hangs off
TranslatePress's own label span, which nothing else styles, and the theme's
two are switched off here. */
.jemas-lang > a::before,
.jemas-lang > a::after { display: none !important; }
.jemas-lang .trp-ls-language-name::before {
content: "";
position: static;
display: inline-block;
width: 14px;
height: 14px;
vertical-align: -2px;
margin-inline-end: 7px;
background-color: currentColor;
-webkit-mask: var(--jemas-globe) center / contain no-repeat;
mask: var(--jemas-globe) center / contain no-repeat;
}
.trx-addons-nav-menu .jemas-lang > a:hover,
.trx-addons-nav-menu .jemas-lang > a:focus-visible,
.jemas-lang > a:hover,
.jemas-lang > a:focus-visible {
color: #01AFAC !important;
}
.jemas-lang > a:hover .trp-ls-language-name,
.jemas-lang > a:focus-visible .trp-ls-language-name {
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 1px;
}
/* a language name keeps its own reading direction */
.jemas-lang .trp-menu-ls-label,
.jemas-lang .trx-addons-menu-link-text {
unicode-bidi: plaintext;
}
/* --- the mobile drawer ---------------------------------------------------- */
@media (max-width: 1023px) {
.trx-addons-mobile-menu-outer-container .jemas-lang,
.trx-addons-nav-slide .jemas-lang,
.trx-addons-mobile-menu .jemas-lang {
padding-inline-start: 0;
margin-top: 6px;
}
.trx-addons-mobile-menu-outer-container .jemas-lang::before,
.trx-addons-nav-slide .jemas-lang::before,
.trx-addons-mobile-menu .jemas-lang::before {
inset-inline-start: auto;
inset-inline-end: 0;
top: -2px;
transform: none;
width: 44px;
height: 1px;
opacity: 0.28;
}
.trx-addons-mobile-menu-outer-container .jemas-lang > a,
.trx-addons-nav-slide .jemas-lang > a,
.trx-addons-mobile-menu .jemas-lang > a {
color: #fff !important;
opacity: 0.85;
padding-inline: 0;
}
.trx-addons-mobile-menu-outer-container .jemas-lang > a:hover,
.trx-addons-nav-slide .jemas-lang > a:hover,
.trx-addons-mobile-menu .jemas-lang > a:hover {
color: #fff !important;
opacity: 1;
}
}
/* ==========================================================================
Where the heart badge lands
The badge jumps to the "about" passage. Its anchor sits flush against the
top of that section, so the browser parked the section's heading right
under the header and the visitor arrived looking at the middle of a block
with no idea what they had jumped to.
120px clears the 96px header and leaves a little air above the heading, so
the section announces itself. Both languages — the anchor is the same
element on both.
========================================================================== */
#anchor-container-02 {
/* Negative on purpose. The anchor sits on the section's outer edge, but the
section carries 150px of its own padding before anything is drawn — so
stopping 120px *above* the anchor parked the reader in front of the
previous section's tail, with the "about" content starting 270px down the
screen. Measured: content begins at 1135, anchor at 985. -20px lands the
first thing you see about 130px below the header, with the whole passage
on screen. */
scroll-margin-top: -20px;
}
/* ==========================================================================
Home hero — the booking bar
The hero was rebuilt in Elementor as a single scene: the photograph is the
section's background, a navy gradient overlay carries the text, and the
form sits in a solid white bar along the bottom edge. Everything that could
be an Elementor setting is one — width, padding, colour, radius, the pill
around the eyebrow. Three things could not be, and they are here.
Both languages; the RTL mirror for the gradient lives in rtl-ar.css.
========================================================================== */
/* 1. The dot in front of the eyebrow label. Elementor's Heading widget has no
icon control, and adding an Icon widget beside it would have meant a
second element for the client to keep aligned. */
.elementor-element-32100d5 .elementor-heading-title::before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #01AFAC;
margin-inline-end: 9px;
vertical-align: middle;
position: relative;
top: -1px;
}
/* 2. The form lies down into a row. Contact Form 7 has no layout controls, so
the three fields and the button are laid out here — the form's own
template supplies the wrapper and the class names, nothing else.
The !important is forced, not preferred: the block near the top of this
file sets `display: block !important; width: 100% !important` on every
.wpcf7 label, to stop CF7's fields overflowing narrow cards. That rule is
still right everywhere else on the site, so it is overridden only here.
Below 1025px the bar stacks and the fields go back to full width, which
is CF7's own behaviour — nothing to override. */
.elementor-element-he7f0c1 .jemas-herof br { display: none; }
.elementor-element-he7f0c1 .wpcf7-form p { margin: 0; }
.elementor-element-he7f0c1 .jemas-herof__f { font-size: 13.5px; }
@media (min-width: 1025px) {
.elementor-element-he7f0c1 .jemas-herof {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) 168px;
gap: 14px;
align-items: end;
}
.elementor-element-he7f0c1 .jemas-herof__f {
width: auto !important;
margin: 0;
}
/* The submit sits in its own span so the template can name it. Dissolving
that span makes the input itself the grid item, which is what lets the
row bottom-align it with the three inputs beside it — align-self on the
span left it stretched to the full row instead. */
.elementor-element-he7f0c1 .jemas-herof__b {
display: contents;
}
}
/* 3. The response line CF7 prints after a submission. It is a grid child now,
so without this it would try to sit in the first column. */
.elementor-element-he7f0c1 .wpcf7-response-output {
grid-column: 1 / -1;
margin: 12px 0 0;
}
/* 4. WordPress wraps the whole form body in a single before CF7 prints it,
so the grid above had one child instead of four and the fields stacked
inside it. display: contents dissolves that wrapper without touching the
markup CF7 generates. The !important answers the same top-of-file rule as
point 2. */
.elementor-element-he7f0c1 .jemas-herof > p {
display: contents !important;
}
/* 5. Below the desktop breakpoint the bar stacks and the form goes back to one
column. The
tags CF7 leaves between the fields are hidden (point 2),
so the spacing has to come from somewhere: a flex column with a gap gives
an even rhythm instead of the fields and the button sitting flush against
each other. */
@media (max-width: 1024px) {
.elementor-element-he7f0c1 .jemas-herof {
display: flex;
flex-direction: column;
gap: 14px;
}
}
/* 6. CF7's loading spinner is a real element, not a pseudo one, and it was
taking a whole grid cell of its own — which pushed a second, empty row
under the fields at every width. Lifting it out of flow puts it over the
end of the submit button, which is where a loading indicator belongs.
inset-inline-end, not right: the button is the last column, so it lands on
the left in Arabic and the right in English without a second rule. */
.elementor-element-he7f0c1 .jemas-herof {
position: relative;
}
.elementor-element-he7f0c1 .wpcf7-spinner {
position: absolute;
bottom: 15px;
inset-inline-end: 16px;
margin: 0;
}
/* 7. On phones the scrim has to run top-to-bottom, not side-to-side: the text
spans the full width there, so the horizontal gradient Elementor holds
left the end of every line sitting on the bright part of the photograph.
It is here rather than in Elementor because the gradient's colour stops
are not responsive controls — only the angle would have followed the
breakpoint, and the angle alone does not fix it. Both languages: the
layout is identical on phones. */
@media (max-width: 767px) {
.elementor-element.elementor-element-5db7d5c5::before {
background-image: linear-gradient(
180deg,
rgba(6, 51, 94, 0.9) 0%,
rgba(6, 51, 94, 0.82) 55%,
rgba(6, 51, 94, 0.5) 100%
) !important;
}
}
/* 8. The ring caption around the heart changes ground with the breakpoint. On
desktop and tablet the badge sits on the photograph — a light part of it
in both languages — so Elementor holds the caption in navy. On phones the
scrim covers the whole width and that navy disappears into it, so the
caption goes light again. One rule, both languages. */
@media (max-width: 767px) {
.elementor-element-324f0045 .e-text-path text {
fill: #DCEDEE;
}
}