/* Sky Flowers hero — replaces Slider Revolution.
   Nav matches the original: small dots bottom-left with the active slide name
   beneath, inside the content column. Palette from Tourimo default skin. */

.sf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.sf-hero{position:relative;width:100%;height:100vh;min-height:560px;max-height:900px;
  overflow:hidden;background:#0d1b26;
  font-family:Montserrat,"Source Sans 3","Source Sans Pro",sans-serif}

.sf-hero__slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .9s ease;will-change:opacity}
.sf-hero__slide.is-active{opacity:1}

.sf-hero__slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,22,32,.72) 0%,rgba(10,22,32,.42) 42%,rgba(10,22,32,.12) 78%)}

.sf-hero__deco{position:absolute;right:8%;top:50%;transform:translateY(-50%);
  z-index:3;max-width:369px;width:26vw;height:auto;pointer-events:none;
  opacity:0;transition:opacity 1s ease .35s}
.sf-hero__slide.is-active .sf-hero__deco{opacity:1}

.sf-hero__inner{position:relative;z-index:4;height:100%;max-width:1170px;margin:0 auto;
  padding:0 20px;display:flex;flex-direction:column;justify-content:center}

.sf-hero__caption{max-width:560px;color:#fff;opacity:0;transform:translateY(20px);
  transition:opacity .8s ease .2s,transform .8s ease .2s}
.sf-hero__slide.is-active .sf-hero__caption{opacity:1;transform:none}

.sf-hero__title{margin:0 0 16px;font-size:clamp(2.6rem,5.4vw,4.6rem);font-weight:800;
  line-height:1.04;letter-spacing:-.5px;white-space:pre-line;color:#fff}

.sf-hero__text{margin:0 0 28px;font-family:"Source Sans 3","Source Sans Pro",sans-serif;
  font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.6;color:rgba(255,255,255,.92);max-width:30em}

.sf-hero__cta{display:inline-block;padding:14px 40px;background:#ed1c24;color:#fff;
  font-size:.85rem;font-weight:700;letter-spacing:.5px;text-decoration:none;border-radius:3px;
  transition:background .25s ease,transform .25s ease}
.sf-hero__cta:hover,.sf-hero__cta:focus{background:#c8151c;color:#fff;transform:translateY(-2px)}

.sf-hero__nav{position:absolute;left:50%;transform:translateX(-50%);bottom:52px;z-index:6;
  width:100%;max-width:1170px;padding:0 20px}
.sf-hero__dots{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.sf-hero__dot{width:13px;height:13px;padding:0;border-radius:50%;cursor:pointer;
  background:transparent;border:2px solid rgba(255,255,255,.7);
  transition:background .25s ease,border-color .25s ease,transform .25s ease}
.sf-hero__dot:hover{border-color:#fff;transform:scale(1.15)}
.sf-hero__dot.is-active{background:#ed1c24;border-color:#ed1c24}
.sf-hero__navlabel{margin:0;color:#fff;font-size:.8rem;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase}

@media(max-width:1024px){
  .sf-hero{height:82vh;min-height:500px}
  .sf-hero__deco{width:30vw;right:4%}
}

@media(max-width:767px){
  .sf-hero{height:auto;min-height:0;max-height:none}
  .sf-hero__slide{position:absolute}
  .sf-hero__slide.is-active{position:relative}
  .sf-hero__inner{padding:120px 20px 140px}
  .sf-hero__deco{display:none}
  .sf-hero__title{font-size:2.3rem}
  .sf-hero__nav{bottom:44px}
  .sf-hero__slide::after{background:linear-gradient(180deg,rgba(10,22,32,.5) 0%,rgba(10,22,32,.82) 100%)}
}

@media(prefers-reduced-motion:reduce){
  .sf-hero__slide,.sf-hero__caption,.sf-hero__deco{transition:none}
}

/* ---- Static-site helpers ---- */
.sf-totop{position:fixed;right:24px;bottom:24px;z-index:900;width:46px;height:46px;
  border:0;border-radius:50%;background:#ed1c24;color:#fff;font-size:1.1rem;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s}
.sf-totop.is-visible{opacity:1;visibility:visible;transform:none}
.sf-totop:hover{background:#c8151c}

.sf-contact-cta{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0}
.sf-wa,.sf-tel{display:inline-block;padding:14px 30px;border-radius:3px;
  font-family:Montserrat,Arial,sans-serif;font-size:.8rem;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;text-decoration:none;transition:background .25s ease,transform .25s ease}
.sf-wa{background:#25D366;color:#fff}
.sf-wa:hover{background:#1da851;color:#fff;transform:translateY(-2px)}
.sf-tel{background:transparent;color:#415161;border:2px solid #415161}
.sf-tel:hover{background:#415161;color:#fff;transform:translateY(-2px)}

@media(max-width:767px){
  .sf-totop{right:14px;bottom:14px}
  .sf-contact-cta{flex-direction:column}
  .sf-wa,.sf-tel{text-align:center}
}
/* Sky Flowers static build — corrections for behaviour the WordPress JS
   used to provide, and for plugin CSS not present in this build.
   Loads last so it wins. */

/* 1. Desktop navigation ---------------------------------------------------
   Tourimo's dropdown rule sets .sc_layouts_menu_nav itself to
   position:absolute;display:none — normally undone by theme JS. */
.sc_layouts_menu > .sc_layouts_menu_nav{
  position:static !important;
  display:flex !important;
  align-items:center;
  width:auto !important;
  padding:0 !important;
  background:none !important;
  box-shadow:none !important;
}
.sc_layouts_menu > .sc_layouts_menu_nav > li{position:relative;list-style:none}
/* keep real dropdowns hidden until hover */
.sc_layouts_menu_nav > li > ul{display:none}
.sc_layouts_menu_nav > li:hover > ul{display:block}

/* mobile panel must stay hidden on desktop */
.menu_mobile{display:none}
@media(max-width:1023px){
  .sc_layouts_menu > .sc_layouts_menu_nav{display:none !important}
  .menu_mobile.opened{display:block}
}

/* 2. Full-bleed sections --------------------------------------------------
   Elementor "stretch section" is applied by JS at runtime. */
.elementor-section-stretched{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  left:auto !important;
}

/* 3. Hero fills the viewport --------------------------------------------- */
.sf-hero{height:100vh !important;max-height:none !important}
@media(max-width:767px){.sf-hero{height:auto !important;min-height:88vh !important}}

/* 4. (removed) — the real jeg-elementor-kit icon font is now loaded
   from the live site, so no substitute glyph is needed here. */

/* 5. Fun-fact counter spacing (kit CSS absent) --------------------------- */
.jkit-fun-fact .number-wrapper{display:flex;align-items:baseline;justify-content:center;gap:.05em}
.jkit-fun-fact .number-wrapper .prefix,
.jkit-fun-fact .number-wrapper .number{font-size:inherit;font-weight:inherit;line-height:1}

/* 6. Blog card: image above text, image not oversized ------------------- */
.jkit-post-item .thumb img,
.post_item .post_featured img{width:100%;height:auto;display:block}
.jkit-post-item{display:flex;flex-direction:column}
.jkit-post-item .thumb{order:1;margin-bottom:18px}
.jkit-post-item .post-content,
.jkit-post-item .content{order:2}

/* ---- Hard overrides: these must beat theme + plugin CSS ---- */
section.sf-hero{height:100vh!important;max-height:none!important;min-height:100vh!important}
@media(max-width:767px){section.sf-hero{height:auto!important;min-height:88vh!important}}

.sf-hero a.sf-hero__cta{
  display:inline-block!important;
  font-size:14px!important;
  letter-spacing:1px!important;
  padding:15px 40px!important;
  line-height:1.4!important;
  color:#fff!important;
  text-indent:0!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:visible!important;
  width:auto!important;height:auto!important;
  text-transform:none!important;
}
.sf-hero a.sf-hero__cta::before,.sf-hero a.sf-hero__cta::after{content:none!important}

/* Desktop nav: Tourimo hides it under 768px and shows the burger instead,
   which is correct. Nothing to override above that width. */
@media(min-width:768px){
  .sc_layouts_menu_mobile_button + .sc_layouts_menu{display:block!important}
}


/* Hero type sized in px — the theme's root font-size makes rem unreliable here */
.sf-hero .sf-hero__title{font-size:clamp(38px,5.4vw,72px)!important;line-height:1.05!important}
.sf-hero .sf-hero__text{font-size:clamp(15px,1.25vw,18px)!important;line-height:1.6!important}
.sf-hero .sf-hero__navlabel{font-size:12px!important;letter-spacing:1.6px!important}

/* ---- Findings from headless-browser review ------------------------------ */

/* A stray absolutely-positioned decorative image (wp-image-4657) sits at
   x≈2900 and doubles the document width; the live site has the same overflow
   and simply clips it. Clip it here too. */
html,body{overflow-x:hidden}
.page_wrap{overflow:clip}

/* The hero was inheriting .content_wrap's boxed 1230px width. Slider
   Revolution used to stretch itself full-bleed with JS. */
section.sf-hero{
  width:100vw!important;
  max-width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
}

/* The header overlays the hero with white text; light slides (Umrah's sky)
   made it unreadable. The original darkened slides with Slider Revolution's
   "gingham" media filter — this scrim restores that top darkening. */
.sf-hero::before{
  content:"";position:absolute;left:0;right:0;top:0;height:240px;z-index:3;
  background:linear-gradient(180deg,rgba(10,22,32,.55) 0%,rgba(10,22,32,0) 100%);
  pointer-events:none;
}
.sf-hero__inner,.sf-hero__nav{z-index:4}

/* Menu visibility gate: theme JS added .inited; fallback if JS is off */
.sc_layouts_menu{visibility:visible!important;overflow:visible!important;max-height:none!important}

/* Hero text must stay white against .scheme_default heading colours */
.sf-hero .sf-hero__title{color:#fff!important}
.sf-hero .sf-hero__text{color:rgba(255,255,255,.92)!important}

/* Kill the stray strip above the hero */
html,body{margin-top:0!important;padding-top:0!important}
body:not(.elementor-editor-active) .page_content_wrap{padding-top:0!important}

/* WP autop leaves an empty <p> (zero height, 25px margin) before the slider;
   its collapsed margin was the white strip above the hero. */
.elementor-widget-container>p:empty{display:none!important;margin:0!important}

/* Menu items stay on one line ("About Us" was wrapping) */
.sc_layouts_menu_nav>li>a{white-space:nowrap}

/* Unattributed 25px offset between the slider widget (.elementor-element-56c40a1)
   and its container: no margin/padding/border/gap/pseudo/sibling explains it
   after headless inspection. Compensated here, scoped to the one element. */
.elementor-element-56c40a1>.elementor-widget-container{margin-top:-25px}

/* Generic ".icon:before" rules from fontello/trx add a second glyph on top of
   jkit's real icon — the "small box" doubling. Suppress pseudo-glyphs inside
   jkit widgets only. */
.jkit-icon-box .icon::before,.jkit-icon-box .icon::after,
.jkit-fun-fact .icon::before,.jkit-fun-fact .icon::after{content:none!important}
.jkit-fun-fact .icon img{height:44px;width:auto;display:inline-block}

/* fontello ships an icon literally named "box" (.icon-box:before) which
   collides with jkit's structural .icon-box class — the stray glyph pair.
   The essential-grid fontello link is removed; this guards any other source. */
.jkit-icon-box-wrapper .icon-box::before,.jkit-icon-box-wrapper .icon-box::after,
.jkit-fun-fact .fun-fact-inner > .icon::before,.jkit-fun-fact .fun-fact-inner > .icon::after{
  content:none!important}

/* ---- Page preloader (theme's own #page_preloader, restored) ---- */
#page_preloader{background-color:#fff;opacity:1;transition:opacity .5s ease,visibility .5s ease;
  animation:sf-preloader-failsafe 2.8s forwards}
#page_preloader .preloader_wrap>div{background-color:#ed1c24}
html.sf-loaded #page_preloader{opacity:0;visibility:hidden}
@keyframes sf-preloader-failsafe{0%,99%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}

/* ---- Hero caption entrance: only animate when JS arms it (.sf-anim) ---- */
.sf-hero:not(.sf-anim) .sf-hero__slide .sf-hero__caption{opacity:1!important;transform:none!important}

/* ---- Blog list entrance (theme's data-post-animation, JS-driven again) ---- */
[data-post-animation]:not(.animated){opacity:0;transition:none}
[data-post-animation].animated{opacity:1}

/* ---- Entrance choreography (round 2): sequence AFTER the preloader ---- */

/* Smoother slide change: longer crossfade + slow drift on the active slide */
.sf-hero__slide{transition:opacity 1.25s cubic-bezier(.4,0,.2,1)}
.sf-anim .sf-hero__slide.is-active{animation:sf-drift 7s ease-out forwards}
@keyframes sf-drift{from{transform:scale(1)}to{transform:scale(1.055)}}

/* Caption container stays put; its children stagger in: title, text, CTA */
.sf-anim .sf-hero__slide .sf-hero__caption{opacity:1!important;transform:none!important;transition:none!important}
.sf-anim .sf-hero__slide .sf-hero__title,
.sf-anim .sf-hero__slide .sf-hero__text,
.sf-anim .sf-hero__slide .sf-hero__cta{opacity:0;transform:translateY(26px);
  transition:opacity .65s ease,transform .65s ease}
.sf-anim .sf-hero__slide.is-active .sf-hero__title{opacity:1;transform:none;transition-delay:.2s}
.sf-anim .sf-hero__slide.is-active .sf-hero__text{opacity:1;transform:none;transition-delay:.4s}
.sf-anim .sf-hero__slide.is-active .sf-hero__cta{opacity:1;transform:none;transition-delay:.6s}

@media(prefers-reduced-motion:reduce){
  .sf-anim .sf-hero__slide.is-active{animation:none}
  .sf-anim .sf-hero__slide .sf-hero__title,
  .sf-anim .sf-hero__slide .sf-hero__text,
  .sf-anim .sf-hero__slide .sf-hero__cta{transition:none;opacity:1;transform:none}
}

/* ---- 404 page (markup borrowed from the blog template) ---- */
.sf-404-page .posts_container,.sf-404-page .sidebar{display:none!important}
.sf-404-box{max-width:640px;margin:0 auto;padding:110px 20px 140px;text-align:center}
.sf-404-code{margin:0;font-family:Montserrat,sans-serif;font-weight:800;font-size:120px;
  line-height:1;color:#415161;letter-spacing:-3px}
.sf-404-heading{margin:14px 0 10px;color:#1C262F}
.sf-404-text{margin:0 0 30px;color:#6D7379}

/* ================= Mobile round (phone report) ================= */
@media(max-width:767px){

  /* Hero truly full-screen on phones. svh tracks the real visible height
     with the browser URL bar; vh is the fallback. Overrides the earlier
     auto-height mobile pattern (later in cascade, same specificity). */
  section.sf-hero{height:100vh!important;height:100svh!important;
    min-height:100vh!important;min-height:100svh!important;max-height:none!important}
  .sf-hero__slide{position:absolute!important;inset:0}
  .sf-hero__slide.is-active{position:absolute!important}
  .sf-hero__inner{min-height:100%;padding:96px 20px 120px;justify-content:center}
  .sf-hero__nav{bottom:30px}

  /* Client + partner logo rows: two columns, smaller marks.
     The eight ids are the inner row-sections that actually hold the logos. */
  .elementor-element-470d949 > .elementor-container,
  .elementor-element-665a5f7 > .elementor-container,
  .elementor-element-66343ef > .elementor-container,
  .elementor-element-2c25a69 > .elementor-container,
  .elementor-element-ca6f5c9 > .elementor-container,
  .elementor-element-52a8bc42 > .elementor-container,
  .elementor-element-2f115838 > .elementor-container,
  .elementor-element-056cfde > .elementor-container{flex-wrap:wrap}
  .elementor-element-470d949 .elementor-column,
  .elementor-element-665a5f7 .elementor-column,
  .elementor-element-66343ef .elementor-column,
  .elementor-element-2c25a69 .elementor-column,
  .elementor-element-ca6f5c9 .elementor-column,
  .elementor-element-52a8bc42 .elementor-column,
  .elementor-element-2f115838 .elementor-column,
  .elementor-element-056cfde .elementor-column{width:50%!important}
  .elementor-element-470d949 .elementor-widget-image img,
  .elementor-element-665a5f7 .elementor-widget-image img,
  .elementor-element-66343ef .elementor-widget-image img,
  .elementor-element-2c25a69 .elementor-widget-image img,
  .elementor-element-ca6f5c9 .elementor-widget-image img,
  .elementor-element-52a8bc42 .elementor-widget-image img,
  .elementor-element-2f115838 .elementor-widget-image img,
  .elementor-element-056cfde .elementor-widget-image img{
    max-height:46px;width:auto;max-width:78%;object-fit:contain;
    display:block;margin:10px auto}
}