/* ========================================================================== LoveTravel Modern 2.0 — Ali & Obaid Travel & Tours ========================================================================== */ /* ---------- Tokens ---------- */ :root { --navy: #0b1f3a; --navy-2: #102b50; --night: #06121f; --blue: #0e6ba8; --sky: #1d9be0; --gold: #c9a227; --gold-2: #e6c562; --gold-soft: #f6ecc9; --sand: #f7f3ec; --mist: #eef3f8; --ink: #0f1b2d; --text: #4d5b70; --muted: #7c8899; --line: #e4e9f0; --white: #fff; --f-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --f-ar: "Amiri", "Times New Roman", serif; --r-sm: 12px; --r: 20px; --r-lg: 28px; --r-xl: 36px; --sh-sm: 0 2px 10px rgba(11, 31, 58, .06); --sh: 0 14px 40px -14px rgba(11, 31, 58, .22); --sh-lg: 0 30px 70px -24px rgba(11, 31, 58, .38); --ease: cubic-bezier(.22, .8, .24, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --g-gold: linear-gradient(135deg, #b8901c 0%, #e6c562 55%, #c9a227 100%); --g-blue: linear-gradient(135deg, #0e6ba8 0%, #1d9be0 100%); --wrap: 1240px; --gut: clamp(18px, 4vw, 40px); --ab: 0px; --top: 40px; --head-h: 84px; --sec: clamp(64px, 8vw, 112px); --sp-1: 8px; --sp-2: 12px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 40px; --sp-7: 56px; } body.admin-bar { --ab: 32px; } @media (max-width: 782px) { body.admin-bar { --ab: 46px; } } @media (max-width: 600px) { body.admin-bar { --ab: 0px; } } /* ---------- Base / reset (scoped to the redesigned templates) ---------- */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body.ltm { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.65; color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } :where(body.ltm) *, :where(body.ltm) *::before, :where(body.ltm) *::after { box-sizing: border-box; } :where(body.ltm) img { max-width: 100%; height: auto; display: block; } :where(body.ltm) a { color: inherit; text-decoration: none; } :where(body.ltm) button { font: inherit; cursor: pointer; } :where(body.ltm) :where(h1, h2, h3, h4) { font-family: var(--f-head); color: var(--ink); margin: 0; letter-spacing: -.02em; line-height: 1.15; font-weight: 700; } :where(body.ltm) p { margin: 0 0 1em; } :where(body.ltm) :where(ul, ol) { margin: 0; padding: 0; list-style: none; } :where(body.ltm) figure { margin: 0; } body.ltm ::selection { background: var(--gold-soft); color: var(--navy); } body.ltm :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; } body.ltm e-page-transition, body.ltm .e-page-transition { display: none !important; } .ltm-ic { width: 20px; height: 20px; flex: none; } .ltm-ic.is-fill { fill: currentColor; } .ltm-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); } .ltm-center { text-align: center; } .ltm-skip { position: absolute; left: -9999px; top: 0; z-index: 100001; background: var(--navy); color: #fff !important; padding: 10px 16px; border-radius: 8px; } .ltm-skip:focus { left: 16px; top: 16px; } /* ---------- Typography helpers ---------- */ .ltm-eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 600 13px/1.4 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px !important; } .ltm-eyebrow::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: currentColor; } .ltm-center .ltm-eyebrow::after, .ltm-head--center .ltm-eyebrow::after { content: ""; width: 34px; height: 2px; border-radius: 2px; background: currentColor; } .ltm-eyebrow--light { color: var(--gold-2); } .ltm-h2 { font-size: clamp(30px, 4vw, 48px) !important; font-weight: 800 !important; line-height: 1.1 !important; margin-bottom: var(--sp-4) !important; color: var(--ink); text-wrap: balance; } .ltm-h2--light { color: #fff !important; } .ltm-lead { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; color: var(--text); max-width: 60ch; margin-bottom: 0 !important; } .ltm-lead + p { margin-top: var(--sp-3); } .ltm-lead--light { color: rgba(255, 255, 255, .82); } .ltm-lead--light a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; } .ltm-hl { position: relative; white-space: nowrap; color: var(--blue); } .ltm-hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .28em; background: var(--gold-soft); z-index: -1; border-radius: 4px; transform-origin: left; transform: scaleX(0); transition: transform 1s .4s var(--ease-out); } .is-in .ltm-hl::after, .ltm-hl.is-in::after, [data-reveal].is-in .ltm-hl::after { transform: scaleX(1); } h2.is-in .ltm-hl::after { transform: scaleX(1); } .ltm-arabic { text-align: left; font-family: var(--f-ar); font-size: clamp(26px, 3vw, 38px); color: var(--gold-2); margin: 0 0 8px !important; line-height: 1.6; } .ltm-arabic--dark { color: var(--gold); } .ltm-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(201, 162, 39, .14); color: var(--gold-2); font-weight: 600; font-size: 13px; } .ltm-pill .ltm-ic { width: 16px; height: 16px; } /* ---------- Buttons ---------- */ .ltm-btn { --bg: var(--navy); --fg: #fff; position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; border: 0; background: var(--bg); color: var(--fg) !important; font: 600 15.5px/1 var(--f-body); letter-spacing: .01em; white-space: nowrap; box-shadow: 0 14px 30px -14px rgba(11, 31, 58, .6); transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s ease; will-change: transform; } .ltm-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, .38) 50%, transparent 75%); transform: translateX(-130%); transition: transform .8s var(--ease); } .ltm-btn:hover::before { transform: translateX(130%); } .ltm-btn:hover { box-shadow: 0 20px 40px -16px rgba(11, 31, 58, .7); } .ltm-btn .ltm-ic { width: 19px; height: 19px; transition: transform .35s var(--ease); } .ltm-btn:hover .ltm-ic:last-child:not(:first-child) { transform: translateX(4px); } .ltm-btn--gold { --bg: var(--g-gold); --fg: var(--night); background: var(--g-gold); background-size: 160% 160%; box-shadow: 0 16px 34px -14px rgba(201, 162, 39, .75); } .ltm-btn--gold:hover { background-position: 100% 0; box-shadow: 0 22px 44px -16px rgba(201, 162, 39, .85); } .ltm-btn--glass { --bg: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: none; } .ltm-btn--glass:hover { background: rgba(255, 255, 255, .22); box-shadow: none; } .ltm-btn--outline { --bg: transparent; --fg: var(--navy); border: 1.5px solid var(--navy); box-shadow: none; margin-top: var(--sp-5); } .ltm-btn--outline:hover { --bg: var(--navy); background: var(--navy); color: #fff !important; } .ltm-btn--sm { min-height: 46px; padding: 0 20px; font-size: 14.5px; } .ltm-btn--block { width: 100%; } .ltm-btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: var(--sp-6); } .ltm-btnrow--center { justify-content: center; } .ltm-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink) !important; font-family: var(--f-head); } .ltm-link .ltm-ic { width: 46px; height: 46px; padding: 12px; border-radius: 50%; background: var(--mist); color: var(--blue); } .ltm-link small { display: block; font: 500 12.5px var(--f-body); color: var(--muted); letter-spacing: .02em; } /* ---------- Progress / topbar / header ---------- */ .ltm-progress { position: fixed; z-index: 10001; top: var(--ab); left: 0; width: 100%; height: 3px; background: var(--g-gold); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; } .ltm-topbar { position: absolute; z-index: 60; top: var(--ab); left: 0; right: 0; height: var(--top); font-size: 13px; color: rgba(255, 255, 255, .82); border-bottom: 1px solid rgba(255, 255, 255, .12); } body:not(.ltm-has-overlay-header) .ltm-topbar { position: relative; top: 0; background: var(--navy); } .ltm-topbar__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .ltm-topbar__l, .ltm-topbar__r { display: flex; align-items: center; gap: 22px; } .ltm-topbar a { display: inline-flex; align-items: center; gap: 8px; color: inherit; transition: color .2s; } .ltm-topbar a:hover { color: var(--gold-2); } .ltm-topbar .ltm-ic { width: 15px; height: 15px; } .ltm-topbar__badge { display: inline-flex; align-items: center; gap: 7px; color: var(--gold-2); font-weight: 600; letter-spacing: .02em; } .ltm-topbar__r a .ltm-ic { width: 16px; height: 16px; } .ltm-header { position: fixed; z-index: 70; left: 0; right: 0; top: calc(var(--ab) + var(--top)); height: var(--head-h); transition: top .45s var(--ease), background-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease), height .45s var(--ease); } body:not(.ltm-has-overlay-header) .ltm-header { position: sticky; top: var(--ab); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 1px 0 var(--line); } .ltm-header__in { height: 100%; display: flex; align-items: center; gap: 28px; } .ltm-logo { flex: none; display: inline-grid; align-items: center; } .ltm-logo > img { grid-area: 1 / 1; transition: opacity .35s var(--ease), height .4s var(--ease); } .ltm-logo__light { opacity: 0; } .ltm-has-overlay-header:not(.is-scrolled) .ltm-header .ltm-logo__dark { opacity: 0; } .ltm-has-overlay-header:not(.is-scrolled) .ltm-header .ltm-logo__light { opacity: 1; } .ltm-logo img { width: auto; height: 54px; } .ltm-nav { margin-left: auto; } .ltm-nav ul { display: flex; align-items: center; gap: 4px; } .ltm-nav a { position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 16px; font: 600 15px var(--f-body); color: #fff; border-radius: 999px; transition: color .25s ease, background .25s ease; } body:not(.ltm-has-overlay-header) .ltm-nav a, .is-scrolled .ltm-nav a { color: var(--ink); } .ltm-nav a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 7px; height: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); } .ltm-nav a:hover::after, .ltm-nav a.is-current::after { transform: scaleX(1); transform-origin: left; } .ltm-nav a.is-current { color: var(--gold-2); } body:not(.ltm-has-overlay-header) .ltm-nav a.is-current, .is-scrolled .ltm-nav a.is-current { color: var(--blue); } .ltm-header__cta { display: flex; align-items: center; gap: 12px; } .ltm-burger { display: none; width: 48px; height: 48px; border-radius: 14px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .25s; } .ltm-burger .ltm-ic { width: 24px; height: 24px; } body:not(.ltm-has-overlay-header) .ltm-burger, .is-scrolled .ltm-burger, .ltm-drawer .ltm-burger { background: var(--mist); color: var(--navy); } /* scrolled state */ .ltm-has-overlay-header.is-scrolled .ltm-header { top: var(--ab); height: 72px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px); box-shadow: 0 10px 30px -16px rgba(11, 31, 58, .35); } .is-scrolled .ltm-logo img { height: 46px; } .is-hidden .ltm-header { transform: translateY(-110%); } /* ---------- Mobile drawer ---------- */ .ltm-drawer { position: fixed; inset: 0; z-index: 10000; visibility: hidden; pointer-events: none; } .ltm-drawer.is-open { visibility: visible; pointer-events: auto; } .ltm-drawer__scrim { position: absolute; inset: 0; background: rgba(6, 18, 31, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .45s var(--ease); } .ltm-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: #fff; display: flex; flex-direction: column; padding: calc(var(--ab) + 18px) 24px 28px; transform: translateX(100%); transition: transform .6s var(--ease-out); overflow-y: auto; } .ltm-drawer.is-open .ltm-drawer__scrim { opacity: 1; } .ltm-drawer.is-open .ltm-drawer__panel { transform: none; } .ltm-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; } .ltm-drawer__top img { height: 38px; width: auto; } .ltm-drawer__nav li { opacity: 0; transform: translateX(30px); transition: opacity .5s var(--ease), transform .6s var(--ease-out); transition-delay: calc(var(--i) * 60ms + 120ms); } .ltm-drawer.is-open .ltm-drawer__nav li { opacity: 1; transform: none; } .ltm-drawer__nav a { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; border-bottom: 1px solid var(--line); font: 700 22px var(--f-head); color: var(--ink); letter-spacing: -.01em; } .ltm-drawer__nav a .ltm-ic { color: var(--gold); transition: transform .3s var(--ease); } .ltm-drawer__nav a:hover .ltm-ic { transform: translateX(4px); } .ltm-drawer__nav a.is-current { color: var(--blue); } .ltm-drawer__foot { margin-top: auto; padding-top: 28px; display: grid; gap: 12px; } .ltm-drawer__line { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 500; } .ltm-drawer__line .ltm-ic { color: var(--blue); } body.ltm-lock { overflow: hidden; } /* ---------- Sections ---------- */ .ltm-section { position: relative; padding: var(--sec) 0; } .ltm-phero + .ltm-section:not(.ltm-section--tight) { padding-top: clamp(48px, 6vw, 88px); } .ltm-section--tight { padding-top: 0; padding-bottom: 0; } .ltm-section--tight + .ltm-section { padding-top: clamp(56px, 7vw, 96px); } .ltm-section--sand { background: var(--sand); } .ltm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) 64px; margin-bottom: clamp(32px, 4.5vw, 56px); } .ltm-head > div:first-child { max-width: 640px; } .ltm-head .ltm-h2 { margin-bottom: 0 !important; } .ltm-head > .ltm-lead { margin: 0; max-width: 460px; } .ltm-head--center { justify-content: center; text-align: center; } .ltm-head--center > div { margin: 0 auto; } .ltm-head--center .ltm-lead { margin: var(--sp-4) auto 0 !important; } .ltm-head__tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .ltm-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; } .ltm-split--rev { grid-template-columns: 1fr 1.05fr; } .ltm-grid { display: grid; gap: var(--sp-4); } .ltm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ltm-ticks { display: grid; gap: var(--sp-2); margin: var(--sp-5) 0 0; } .ltm-ticks li { display: flex; align-items: flex-start; gap: 14px; color: var(--ink); font-weight: 500; } .ltm-ticks .ltm-ic { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--gold-soft); color: #9b7a12; stroke-width: 2.5; } /* ---------- HERO ---------- */ .ltm-hero { position: relative; min-height: max(720px, 100svh); display: flex; flex-direction: column; color: #fff; overflow: hidden; background: var(--night); isolation: isolate; } .ltm-hero__slides, .ltm-hero__slide { position: absolute; inset: 0; } .ltm-hero__slide { opacity: 0; transition: opacity 1.6s var(--ease); } .ltm-hero__slide.is-active { opacity: 1; } .ltm-hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 9s linear; } .ltm-hero__slide.is-active img { transform: scale(1.02); } .ltm-hero__shade { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 80% at 15% 60%, rgba(6, 18, 31, .78) 0%, rgba(6, 18, 31, .25) 60%, transparent 100%), linear-gradient(180deg, rgba(6, 18, 31, .55) 0%, rgba(6, 18, 31, .1) 30%, rgba(6, 18, 31, .2) 60%, rgba(6, 18, 31, .85) 100%); } .ltm-hero__in > *, .ltm-split > *, .ltm-umrah__in > *, .ltm-head > * { min-width: 0; } .ltm-hero__in { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(30px, 5vw, 80px); align-items: center; padding-top: calc(var(--ab) + var(--top) + var(--head-h) + 40px); padding-bottom: 40px; } .ltm-hero__eyebrow { display: inline-flex; padding: 9px 16px 9px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); letter-spacing: .16em; font-size: 12px; } .ltm-hero__eyebrow::before { display: none; } .ltm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 0 rgba(230, 197, 98, .7); animation: ltmPulse 2s infinite; } .ltm-hero__title { font-size: clamp(40px, 4.9vw, 74px) !important; line-height: 1.02 !important; font-weight: 800 !important; color: #fff !important; letter-spacing: -.035em !important; margin: 0 0 var(--sp-4) !important; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .25)); } .ltm-hero__title em { font-style: normal; color: var(--gold-2); } .ltm-hero__title em .ltm-w > span, .ltm-hero__title em:not(:has(.ltm-w)) { background: linear-gradient(100deg, #f5dc8a 0%, #e6c562 40%, #fff2c4 60%, #c9a227 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ltmShine 6s ease-in-out infinite; } .ltm-hero__text { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.7; color: rgba(255, 255, 255, .86); max-width: 54ch; margin: 0 !important; } .ltm-hero__btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); } .ltm-hero__trust { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-5); font-size: 14px; color: rgba(255, 255, 255, .85); } .ltm-hero__trust li { display: inline-flex; align-items: center; gap: 9px; } .ltm-hero__trust .ltm-ic { width: 18px; height: 18px; color: var(--gold-2); } .ltm-hero__foot { position: relative; z-index: 2; display: flex; align-items: center; gap: 24px; padding-bottom: 34px; } .ltm-hero__dots { display: flex; gap: 10px; } .ltm-hero__dots button { width: 46px; height: 24px; padding: 0; border: 0; background: none; display: flex; align-items: center; } .ltm-hero__dots i { position: relative; display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; } .ltm-hero__dots i::after { content: ""; position: absolute; inset: 0; background: var(--gold-2); transform: scaleX(0); transform-origin: left; } .ltm-hero__dots .is-active i::after { animation: ltmBar var(--hero-dur, 6.5s) linear forwards; } .ltm-hero__place { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; font-size: 14px; color: rgba(255, 255, 255, .85); } .ltm-hero__place .ltm-ic { width: 16px; height: 16px; color: var(--gold-2); } .ltm-hero__place span { display: inline-block; transition: opacity .4s, transform .4s var(--ease); } .ltm-hero__place span.is-swap { opacity: 0; transform: translateY(8px); } .ltm-hero__scroll { margin-left: auto; width: 30px; height: 48px; border-radius: 20px; border: 2px solid rgba(255, 255, 255, .55); display: flex; justify-content: center; padding-top: 8px; } .ltm-hero__scroll span { width: 4px; height: 9px; border-radius: 4px; background: #fff; animation: ltmScroll 1.8s var(--ease) infinite; } /* Quote widget */ .ltm-quote { position: relative; padding: var(--sp-5); border-radius: var(--r-lg); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55); display: grid; gap: var(--sp-3); color: #fff; } .ltm-quote__head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; } .ltm-quote__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--g-gold); color: var(--night); flex: none; } .ltm-quote__head h2 { color: #fff !important; font-size: 22px !important; margin: 0 !important; } .ltm-quote__head p { margin: 2px 0 0 !important; font-size: 14px; color: rgba(255, 255, 255, .75); } .ltm-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 16px; background: rgba(6, 18, 31, .35); } .ltm-seg__opt input { position: absolute; opacity: 0; pointer-events: none; } .ltm-seg__opt span { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border-radius: 12px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .78); cursor: pointer; text-align: center; transition: background .25s, color .25s; } .ltm-seg__opt .ltm-ic { width: 20px; height: 20px; } .ltm-seg__opt input:checked + span { background: #fff; color: var(--navy); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); } .ltm-seg__opt input:focus-visible + span { outline: 2px solid var(--gold-2); } .ltm-field { display: grid; gap: 7px; } .ltm-field > span { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } .ltm-field input { width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .92); color: var(--ink); font: 500 15px var(--f-body); transition: border-color .2s, box-shadow .2s; } .ltm-field input:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 4px rgba(230, 197, 98, .3); } .ltm-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; } .ltm-quote, .ltm-field, .ltm-field input { min-width: 0; } @media (max-width: 400px) { .ltm-field-row { grid-template-columns: minmax(0, 1fr); } } .ltm-quote__note { margin: 0 !important; text-align: center; font-size: 13.5px; color: rgba(255, 255, 255, .72); } .ltm-quote__note a { color: #fff; font-weight: 600; } /* ---------- Ticker ---------- */ .ltm-ticker { position: relative; z-index: 3; background: var(--navy); color: #fff; overflow: hidden; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .08); } .ltm-ticker__track { display: flex; align-items: center; gap: 34px; width: max-content; animation: ltmMarquee 40s linear infinite; } .ltm-ticker span { font: 700 clamp(20px, 2.4vw, 30px) var(--f-head); letter-spacing: -.01em; white-space: nowrap; } .ltm-ticker span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55); } .ltm-ticker i { color: var(--gold-2); display: flex; } /* ---------- Collage / media blocks ---------- */ .ltm-collage { position: relative; padding: 0 12% 14% 0; } .ltm-collage__a { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); } .ltm-collage__a img { width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; } .ltm-collage__b { position: absolute; right: 0; bottom: 0; width: 46%; border-radius: var(--r-lg); overflow: hidden; border: 8px solid #fff; box-shadow: var(--sh-lg); } .ltm-collage__b img { width: 100%; aspect-ratio: 1; object-fit: cover; } .ltm-collage__badge { position: absolute; left: -18px; bottom: 22%; display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 20px; background: #fff; box-shadow: var(--sh-lg); animation: ltmFloat 6s ease-in-out infinite; } .ltm-collage__badge strong { font: 800 40px/1 var(--f-head); color: var(--blue); display: flex; } .ltm-collage__badge strong .ltm-ic { width: 36px; height: 36px; color: var(--gold); } .ltm-collage__badge span { font-size: 13px; line-height: 1.35; color: var(--text); font-weight: 500; } .ltm-stack { position: relative; padding: 0 0 18% 14%; } .ltm-stack__a { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); } .ltm-stack__a img { width: 100%; aspect-ratio: 1 / 1.15; object-fit: cover; } .ltm-stack__b { position: absolute; left: 0; bottom: 0; width: 44%; border-radius: var(--r-lg); overflow: hidden; border: 8px solid #fff; box-shadow: var(--sh-lg); } .ltm-section--sand .ltm-stack__b { border-color: var(--sand); } .ltm-stack__b img { width: 100%; aspect-ratio: 1 / 1.2; object-fit: cover; } /* ---------- Bento services ---------- */ .ltm-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: var(--sp-4); } .ltm-bento__card { position: relative; overflow: hidden; border-radius: var(--r-lg); color: #fff !important; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; isolation: isolate; box-shadow: var(--sh); transform-style: preserve-3d; } .ltm-bento__card--0 { grid-column: span 2; grid-row: span 2; } .ltm-bento__card--1 { grid-column: span 2; } .ltm-bento__card--4, .ltm-bento__card--5 { grid-column: span 2; } .ltm-bento__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease-out); } .ltm-bento__card:hover .ltm-bento__img { transform: scale(1.08); } .ltm-bento__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 18, 31, 0) 25%, rgba(6, 18, 31, .85) 100%); transition: background .5s; } .ltm-bento__card:hover .ltm-bento__shade { background: linear-gradient(180deg, rgba(11, 31, 58, .25) 0%, rgba(6, 18, 31, .92) 100%); } .ltm-bento__icon { position: absolute; top: 22px; left: 22px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .ltm-bento__icon .ltm-ic { width: 26px; height: 26px; } .ltm-bento__title { display: block; font: 700 clamp(20px, 1.8vw, 26px)/1.2 var(--f-head); letter-spacing: -.01em; } .ltm-bento__card--0 .ltm-bento__title { font-size: clamp(26px, 2.6vw, 38px); } .ltm-bento__text { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .82); max-width: 42ch; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .5s; } .ltm-bento__card--0 .ltm-bento__text, .ltm-bento__card:hover .ltm-bento__text, .ltm-bento__card:focus-visible .ltm-bento__text { max-height: 120px; opacity: 1; } .ltm-bento__go { position: absolute; top: 22px; right: 22px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--navy); transform: scale(.6) rotate(-45deg); opacity: 0; transition: transform .5s var(--ease-out), opacity .4s; } .ltm-bento__card:hover .ltm-bento__go { transform: scale(1) rotate(-45deg); opacity: 1; } /* ---------- Umrah spotlight ---------- */ .ltm-umrah { color: #fff; overflow: hidden; background: var(--night); isolation: isolate; } .ltm-umrah__bg { position: absolute; inset: -22% 0; z-index: -2; } .ltm-umrah__bg img { width: 100%; height: 100%; object-fit: cover; } .ltm-umrah__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(6, 18, 31, .96) 0%, rgba(6, 18, 31, .86) 45%, rgba(11, 31, 58, .55) 100%); } .ltm-umrah__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 90px); align-items: center; } .ltm-umrah__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-5); } .ltm-umrah__grid div { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); font-weight: 600; font-size: 15px; transition: background .3s, transform .3s var(--ease); } .ltm-umrah__grid div:hover { background: rgba(255, 255, 255, .12); transform: translateY(-3px); } .ltm-umrah__grid .ltm-ic { width: 24px; height: 24px; color: var(--gold-2); } .ltm-umrah__cards { position: relative; height: clamp(420px, 44vw, 560px); } .ltm-umrah__card { position: absolute; width: 62%; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .15); transition: transform .8s var(--ease-out); } .ltm-umrah__card img { width: 100%; aspect-ratio: 1 / 1.25; object-fit: cover; } .ltm-umrah__card figcaption { position: absolute; left: 16px; bottom: 16px; padding: 8px 16px; border-radius: 999px; background: rgba(6, 18, 31, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 700 14px var(--f-head); letter-spacing: .04em; } .ltm-umrah__card--a { left: 0; top: 0; transform: rotate(-5deg); } .ltm-umrah__card--b { right: 0; bottom: 0; transform: rotate(4deg); } .ltm-umrah__cards:hover .ltm-umrah__card--a { transform: rotate(-8deg) translate(-10px, -6px); } .ltm-umrah__cards:hover .ltm-umrah__card--b { transform: rotate(7deg) translate(10px, 6px); } /* ---------- Tabs + rail ---------- */ .ltm-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: var(--mist); } .ltm-tabs button { border: 0; background: transparent; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--text); transition: background .3s, color .3s, box-shadow .3s; display: inline-flex; align-items: center; gap: 6px; } .ltm-tabs button em { font-style: normal; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--gold-soft); color: #8a6c10; } .ltm-tabs button.is-active { background: #fff; color: var(--navy); box-shadow: 0 6px 18px -8px rgba(11, 31, 58, .35); } .ltm-rail-nav { display: flex; gap: 10px; } .ltm-rail-nav button { width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--navy); display: grid; place-items: center; transition: background .25s, color .25s, border-color .25s, transform .25s; } .ltm-rail-nav button:first-child .ltm-ic { transform: rotate(180deg); } .ltm-rail-nav button:hover { background: var(--navy); color: #fff; border-color: var(--navy); } .ltm-rail { display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); padding: 8px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) var(--sp-4); scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; } .ltm-rail::-webkit-scrollbar { display: none; } .ltm-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; } .ltm-rail .ltm-visa { flex: 0 0 clamp(280px, 28vw, 360px); scroll-snap-align: start; } /* ---------- Visa card ---------- */ .ltm-visa { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); transition: box-shadow .5s var(--ease), transform .5s var(--ease), opacity .45s, filter .45s; transform-style: preserve-3d; } .ltm-visa:hover { box-shadow: var(--sh-lg); } .ltm-visa.is-out { display: none; } .ltm-visa.is-in-filter { animation: ltmPop .55s var(--ease-out) both; } .ltm-visa__media { position: relative; overflow: hidden; } .ltm-visa__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.1s var(--ease-out); } .ltm-visa:hover .ltm-visa__media img { transform: scale(1.08); } .ltm-visa__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6, 18, 31, .45)); } .ltm-visa__type { position: absolute; z-index: 1; top: 16px; left: 16px; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--navy); font-size: 12px; font-weight: 700; letter-spacing: .02em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ltm-visa__body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; } .ltm-visa__city { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px !important; font-size: 13px; font-weight: 600; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; } .ltm-visa__city .ltm-ic { width: 15px; height: 15px; } .ltm-visa__country { font-size: 24px !important; font-weight: 800 !important; margin-bottom: var(--sp-2) !important; } .ltm-visa__desc { font-size: 14.5px; line-height: 1.6; color: var(--text); margin: 0 !important; } .ltm-visa__facts { display: grid; gap: var(--sp-1); margin: var(--sp-3) 0 var(--sp-4); } .ltm-visa__facts li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); font-weight: 500; } .ltm-visa__facts .ltm-ic { width: 32px; height: 32px; padding: 7px; border-radius: 10px; background: var(--mist); color: var(--blue); } .ltm-visa__cta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 14px; background: var(--sand); color: var(--navy) !important; font-weight: 700; font-size: 14.5px; transition: background .3s, color .3s; } .ltm-visa__cta .ltm-ic { transition: transform .3s var(--ease); } .ltm-visa:hover .ltm-visa__cta { background: var(--navy); color: #fff !important; } .ltm-visa:hover .ltm-visa__cta .ltm-ic { transform: translateX(4px); } /* ---------- Stats ---------- */ .ltm-stats { position: relative; background: var(--g-blue); color: #fff; padding: 64px 0; overflow: hidden; } .ltm-stats::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 90% 0%, rgba(255, 255, 255, .18), transparent 60%), radial-gradient(40% 100% at 0% 100%, rgba(6, 18, 31, .35), transparent 70%); } .ltm-stats__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .ltm-stat { text-align: center; padding: 10px; border-right: 1px solid rgba(255, 255, 255, .18); } .ltm-stat:last-child { border-right: 0; } .ltm-stat__n, .ltm-stat__plus { font: 800 clamp(44px, 5vw, 68px)/1 var(--f-head); letter-spacing: -.03em; } .ltm-stat__plus { color: var(--gold-2); } .ltm-stat p { margin: var(--sp-2) 0 0 !important; font-weight: 500; color: rgba(255, 255, 255, .85); } /* ---------- Features / why ---------- */ .ltm-features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-5); } .ltm-feature { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r); background: #fff; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; } .ltm-section--sand .ltm-feature { border-color: transparent; } .ltm-feature:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: transparent; } .ltm-feature > span { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--g-blue); color: #fff; box-shadow: 0 12px 24px -12px rgba(14, 107, 168, .8); transition: transform .5s var(--ease-out); } .ltm-feature:hover > span { transform: rotate(-8deg) scale(1.06); } .ltm-feature > span .ltm-ic { width: 24px; height: 24px; } .ltm-feature h3 { font-size: 17px !important; margin-bottom: var(--sp-1) !important; } .ltm-feature p { margin: 0 !important; font-size: 14.5px; line-height: 1.55; } .ltm-why__media { position: relative; } .ltm-why__img { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); } .ltm-why__img img { width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; } .ltm-why__float { position: absolute; right: -16px; bottom: 40px; display: flex; align-items: center; gap: 14px; padding: 16px 22px 16px 16px; border-radius: 20px; background: #fff; box-shadow: var(--sh-lg); animation: ltmFloat 7s ease-in-out infinite; } .ltm-why__float > span { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--g-gold); color: var(--night); } .ltm-why__float strong { display: block; font-family: var(--f-head); color: var(--ink); } .ltm-why__float small { color: var(--muted); font-size: 13px; } /* ---------- Reviews ---------- */ .ltm-reviews { color: #fff; overflow: hidden; isolation: isolate; background: var(--navy); } .ltm-reviews__bg { position: absolute; inset: -22% 0; z-index: -2; } .ltm-reviews__bg img { width: 100%; height: 100%; object-fit: cover; } .ltm-reviews::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 31, 58, .92) 0%, rgba(6, 18, 31, .88) 100%); } .ltm-reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) 64px; flex-wrap: wrap; margin-bottom: clamp(32px, 4.5vw, 56px); } .ltm-reviews__head > div:first-child { max-width: 640px; } .ltm-reviews__badge { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-radius: 20px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .ltm-reviews__g { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; font: 800 22px var(--f-head); color: #4285f4; } .ltm-reviews__badge strong { display: block; font-family: var(--f-head); } .ltm-stars { display: inline-flex; gap: 2px; color: var(--gold-2); } .ltm-stars .ltm-ic { width: 16px; height: 16px; } .ltm-reviews__widget .ti-widget .ti-review-item > .ti-inner { border-radius: var(--r) !important; border: 0 !important; box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .6) !important; } .ltm-reviews__widget .ti-widget .ti-footer, .ltm-reviews__widget .ti-widget .ti-header { color: #fff !important; } .ltm-reviews__widget .ti-widget .ti-footer * { color: #fff !important; } /* ---------- Partners marquee ---------- */ .ltm-partners { overflow: hidden; } .ltm-partners .ltm-h2 { margin-bottom: clamp(32px, 4.5vw, 56px) !important; } .ltm-marquee { position: relative; overflow: hidden; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .ltm-marquee__track { display: flex; gap: 20px; width: max-content; animation: ltmMarquee 70s linear infinite; } .ltm-marquee.is-reverse .ltm-marquee__track { animation-direction: reverse; animation-duration: 80s; } .ltm-marquee:hover .ltm-marquee__track { animation-play-state: paused; } .ltm-marquee__item { flex: none; width: 170px; height: 86px; display: grid; place-items: center; padding: 14px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); } .ltm-marquee__item img { max-height: 54px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .35s, opacity .35s; } .ltm-marquee__item:hover { border-color: transparent; box-shadow: var(--sh); transform: translateY(-3px); } .ltm-marquee__item:hover img { filter: none; opacity: 1; } /* ---------- Page hero ---------- */ .ltm-phero { position: relative; min-height: clamp(460px, 68vh, 640px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--night); isolation: isolate; } .ltm-phero__media { position: absolute; inset: -8% 0; z-index: -2; } .ltm-phero__media img { width: 100%; height: 100%; object-fit: cover; } .ltm-phero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 18, 31, .55) 0%, rgba(6, 18, 31, .25) 40%, rgba(6, 18, 31, .85) 100%); } .ltm-phero__in { padding-top: calc(var(--ab) + var(--top) + var(--head-h) + 48px); padding-bottom: clamp(72px, 9vw, 112px); } .ltm-phero__title { font-size: clamp(36px, 5vw, 68px) !important; font-weight: 800 !important; color: #fff !important; line-height: 1.06 !important; letter-spacing: -.03em !important; max-width: 18ch; margin-bottom: var(--sp-4) !important; text-wrap: balance; } .ltm-phero__text { font-size: clamp(16px, 1.4vw, 19px); color: rgba(255, 255, 255, .86); max-width: 56ch; margin: 0 !important; } .ltm-phero__wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; } .ltm-phero__wave svg { width: 100%; height: clamp(30px, 5vw, 70px); fill: #fff; } .ltm-crumbs { display: flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-4); font-size: 13.5px; color: rgba(255, 255, 255, .75); } .ltm-crumbs a:hover { color: var(--gold-2); } .ltm-crumbs [aria-current] { color: #fff; font-weight: 600; } .ltm-crumbs--dark { color: var(--muted); } .ltm-crumbs--dark [aria-current] { color: var(--ink); } .ltm-kenburns { animation: ltmKen 18s ease-out both; } /* ---------- Steps ---------- */ .ltm-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); counter-reset: s; position: relative; } .ltm-steps::before { content: ""; position: absolute; top: 58px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px); opacity: .5; } .ltm-steps li { position: relative; padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); text-align: center; transition: transform .4s var(--ease), box-shadow .4s; } .ltm-section--sand .ltm-steps li { border-color: transparent; } .ltm-steps li:hover { transform: translateY(-6px); box-shadow: var(--sh); } .ltm-steps li > .ltm-ic { position: relative; width: 58px; height: 58px; padding: 15px; margin: 0 auto 18px; border-radius: 50%; background: var(--g-blue); color: #fff; box-shadow: 0 0 0 8px #fff, 0 14px 26px -12px rgba(14, 107, 168, .8); } .ltm-section--sand .ltm-steps li > .ltm-ic { box-shadow: 0 0 0 8px #fff, 0 14px 26px -12px rgba(14, 107, 168, .8); } .ltm-steps__n { position: absolute; top: 16px; right: 20px; font: 800 30px var(--f-head); color: var(--mist); } .ltm-steps h3 { font-size: 18px !important; margin-bottom: var(--sp-1) !important; } .ltm-steps p { margin: 0 !important; font-size: 14.5px; } /* ---------- Flyers ---------- */ .ltm-flyers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } .ltm-flyer { border-radius: var(--r-lg); background: #fff; padding: 12px; box-shadow: var(--sh-sm); transition: transform .5s var(--ease), box-shadow .5s; } .ltm-flyer:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); } .ltm-flyer__btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--mist); border-radius: 18px; overflow: hidden; cursor: zoom-in; } .ltm-flyer__btn img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; transition: transform .9s var(--ease-out); } .ltm-flyer:hover .ltm-flyer__btn img { transform: scale(1.05); } .ltm-flyer__zoom { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--navy); box-shadow: var(--sh); transition: transform .4s var(--ease-out); } .ltm-flyer:hover .ltm-flyer__zoom { transform: scale(1.12); } .ltm-flyer figcaption { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 4px; font-weight: 700; color: var(--ink); font-family: var(--f-head); } .ltm-flyer figcaption a { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--f-body); color: var(--blue); } .ltm-flyer figcaption a .ltm-ic { width: 16px; height: 16px; transition: transform .3s; } .ltm-flyer figcaption a:hover .ltm-ic { transform: translateX(3px); } /* ---------- Banner CTA ---------- */ .ltm-banner { position: relative; overflow: hidden; isolation: isolate; padding: clamp(72px, 10vw, 128px) 0; color: #fff; text-align: center; background: var(--night); } .ltm-banner__bg { position: absolute; inset: -14% 0; z-index: -2; } .ltm-banner__bg img { width: 100%; height: 100%; object-fit: cover; } .ltm-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 90% at 50% 50%, rgba(6, 18, 31, .55), rgba(6, 18, 31, .88)); } .ltm-banner__in { max-width: 860px; } .ltm-banner .ltm-eyebrow::after { content: ""; width: 34px; height: 2px; border-radius: 2px; background: currentColor; } .ltm-banner .ltm-lead { margin: 0 auto; } /* ---------- Service cards ---------- */ .ltm-svc { position: relative; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); overflow: hidden; transition: box-shadow .5s var(--ease); transform-style: preserve-3d; } .ltm-svc:hover { box-shadow: var(--sh-lg); } .ltm-svc__media { overflow: hidden; } .ltm-svc__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.1s var(--ease-out); } .ltm-svc:hover .ltm-svc__media img { transform: scale(1.07); } .ltm-svc__icon { position: relative; display: grid; place-items: center; width: 62px; height: 62px; margin: -31px 0 0 24px; border-radius: 18px; background: var(--g-gold); color: var(--night); box-shadow: 0 0 0 6px #fff, 0 14px 26px -12px rgba(201, 162, 39, .9); z-index: 1; } .ltm-svc__icon .ltm-ic { width: 28px; height: 28px; } .ltm-svc__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); } .ltm-svc__body h3 { font-size: 21px !important; margin-bottom: var(--sp-2) !important; } .ltm-svc__body p { font-size: 15px; margin-bottom: var(--sp-3) !important; } .ltm-svc__body a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blue); } .ltm-svc__body a .ltm-ic { width: 17px; height: 17px; transition: transform .3s; } .ltm-svc__body a:hover .ltm-ic { transform: translateX(4px); } /* ---------- Icon cards (about) ---------- */ .ltm-iconcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } .ltm-iconcard { position: relative; padding: var(--sp-5); border-radius: var(--r-lg); background: #fff; overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), box-shadow .5s, color .4s; } .ltm-iconcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); transform: translateY(101%); transition: transform .6s var(--ease-out); } .ltm-iconcard:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); } .ltm-iconcard:hover::before { transform: none; } .ltm-iconcard:hover h3 { color: #fff; } .ltm-iconcard:hover p { color: rgba(255, 255, 255, .78); } .ltm-iconcard__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--gold-soft); color: #8a6c10; margin-bottom: 22px; transition: background .4s, color .4s; } .ltm-iconcard:hover .ltm-iconcard__icon { background: var(--g-gold); color: var(--night); } .ltm-iconcard__icon .ltm-ic { width: 30px; height: 30px; } .ltm-iconcard h3 { font-size: 21px !important; margin-bottom: 10px !important; transition: color .4s; } .ltm-iconcard p { margin: 0 !important; font-size: 15px; transition: color .4s; } .ltm-iconcard__go { position: absolute; right: 24px; top: 30px; color: var(--gold); opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .4s var(--ease); } .ltm-iconcard:hover .ltm-iconcard__go { opacity: 1; transform: none; } /* ---------- Contact ---------- */ .ltm-contactcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: -96px; position: relative; z-index: 3; } .ltm-contactcard { padding: var(--sp-5); border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-lg); display: flex; flex-direction: column; transition: transform .4s var(--ease); } .ltm-contactcard:hover { transform: translateY(-6px); } .ltm-contactcard--accent { background: var(--navy); color: rgba(255, 255, 255, .82); } .ltm-contactcard--accent h2 { color: #fff !important; } .ltm-contactcard--accent a { color: #fff; } .ltm-contactcard__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--g-blue); color: #fff; margin-bottom: var(--sp-4); box-shadow: 0 14px 26px -12px rgba(14, 107, 168, .8); } .ltm-contactcard--accent .ltm-contactcard__icon { background: var(--g-gold); color: var(--night); } .ltm-contactcard__icon .ltm-ic { width: 28px; height: 28px; } .ltm-contactcard h2 { font-size: 21px !important; margin-bottom: var(--sp-2) !important; } .ltm-contactcard p { font-size: 15px; } .ltm-contactcard > a { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blue); word-break: break-word; } .ltm-contactcard--accent > a { color: var(--gold-2); } .ltm-contactcard > a .ltm-ic { width: 17px; height: 17px; } .ltm-formpanel { display: grid; grid-template-columns: .9fr 1.1fr; border-radius: var(--r-xl); overflow: hidden; background: #fff; box-shadow: var(--sh-lg); border: 1px solid var(--line); } .ltm-formpanel__aside { position: relative; isolation: isolate; color: #fff; padding: clamp(34px, 4vw, 54px); display: flex; } .ltm-formpanel__bg { position: absolute; inset: 0; z-index: -2; } .ltm-formpanel__bg img { width: 100%; height: 100%; object-fit: cover; } .ltm-formpanel__aside::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(11, 31, 58, .92), rgba(6, 18, 31, .78)); } .ltm-formpanel__aside-in { display: flex; flex-direction: column; } .ltm-formpanel__aside .ltm-h2 { font-size: clamp(28px, 3vw, 40px) !important; } .ltm-formpanel__list { display: grid; gap: 14px; margin-top: auto; padding-top: 30px; } .ltm-formpanel__list li { display: flex; align-items: center; gap: 12px; font-weight: 600; } .ltm-formpanel__list .ltm-ic { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .12); color: var(--gold-2); } .ltm-formpanel__list a:hover { color: var(--gold-2); } .ltm-formpanel__form { padding: clamp(34px, 4vw, 54px); } .ltm-formpanel__form h3 { font-size: 26px !important; margin-bottom: var(--sp-4) !important; } /* CF7 */ .ltm .wpcf7 form { display: grid; gap: 4px; } .ltm .wpcf7 p { margin: 0 0 14px !important; } .ltm .wpcf7 label { display: block; font-weight: 600; font-size: 14px; color: var(--ink); } .ltm .wpcf7 input[type="text"], .ltm .wpcf7 input[type="email"], .ltm .wpcf7 input[type="tel"], .ltm .wpcf7 input[type="number"], .ltm .wpcf7 input[type="date"], .ltm .wpcf7 select, .ltm .wpcf7 textarea { width: 100%; margin-top: 6px; padding: 16px 18px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--mist); font: 500 15px var(--f-body); color: var(--ink); transition: border-color .2s, box-shadow .2s, background .2s; } .ltm .wpcf7 textarea { min-height: 150px; resize: vertical; } .ltm .wpcf7 input:focus, .ltm .wpcf7 textarea:focus, .ltm .wpcf7 select:focus { outline: none; background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(14, 107, 168, .14); } .ltm .wpcf7 input::placeholder, .ltm .wpcf7 textarea::placeholder { color: #93a0b2; } .ltm .wpcf7 .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 34px; border: 0; border-radius: 999px; background: var(--g-gold); color: var(--night); font: 700 15.5px var(--f-body); cursor: pointer; box-shadow: 0 16px 34px -14px rgba(201, 162, 39, .75); transition: transform .3s var(--ease), box-shadow .3s; } .ltm .wpcf7 .wpcf7-submit:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -16px rgba(201, 162, 39, .85); } .ltm .wpcf7 .wpcf7-spinner { margin: 0 0 0 14px; } .ltm .wpcf7 .wpcf7-not-valid { border-color: #d64545 !important; } .ltm .wpcf7 .wpcf7-not-valid-tip { font-size: 13px; margin-top: 6px; } .ltm .wpcf7 form .wpcf7-response-output { margin: 14px 0 0; padding: 14px 18px; border-radius: 14px; font-size: 14px; } .ltm-map { position: relative; height: clamp(380px, 50vw, 520px); } .ltm-map iframe { width: 100%; height: 100%; border: 0; filter: saturate(.85) contrast(1.02); display: block; } .ltm-map__card { position: absolute; right: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); top: 50%; transform: translateY(-50%); width: min(320px, 80vw); padding: 26px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-lg); } .ltm-map__card img { height: 46px; width: auto; margin-bottom: 14px; } .ltm-map__card p { color: var(--ink); font-weight: 500; } .ltm-map__card .ltm-pill { background: var(--gold-soft); color: #8a6c10; } /* ---------- Generic page ---------- */ .ltm-pagehead { padding: 60px 0 30px; background: var(--sand); } .ltm-pagehead .ltm-h2 { margin: 0 !important; } .ltm-content { min-height: 30vh; } .ltm-tpl-page .ltm-content > *:not(.elementor) { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--gut); padding-right: var(--gut); } .ltm-tpl-page .ltm-content > p:first-child { padding-top: 40px; } /* ---------- Footer ---------- */ .ltm-footer { position: relative; isolation: isolate; color: rgba(255, 255, 255, .72); background: var(--night); overflow: hidden; padding-top: var(--sec); } .ltm-footer__bg { position: absolute; inset: 0; z-index: -2; opacity: .18; } .ltm-footer__bg img { width: 100%; height: 100%; object-fit: cover; } .ltm-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 18, 31, .6), var(--night) 60%); } .ltm-footer__cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding: clamp(30px, 4vw, 52px); border-radius: var(--r-xl); background: linear-gradient(120deg, rgba(14, 107, 168, .9), rgba(11, 31, 58, .9)); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); } .ltm-footer__cta > div:first-child { max-width: 560px; } .ltm-footer__cta p { margin: 0 !important; color: rgba(255, 255, 255, .82); } .ltm-footer__title { color: #fff !important; font-size: clamp(28px, 3.2vw, 40px) !important; font-weight: 800 !important; margin: 0 0 var(--sp-3) !important; } .ltm-footer__cta-btns { display: flex; flex-wrap: wrap; gap: 14px; } .ltm-footer__grid { display: grid; grid-template-columns: 1.4fr .8fr .9fr 1.3fr; gap: var(--sp-6); padding: 0 0 var(--sp-7); } .ltm-footer__cta { margin-bottom: clamp(56px, 7vw, 88px); } .ltm-logo--footer { margin: 0 0 var(--sp-4); } .ltm-logo--footer img { height: 54px; } .ltm-footer__brand p { max-width: 36ch; font-size: 15px; margin-bottom: var(--sp-4) !important; } .ltm-social { display: flex; gap: var(--sp-1); margin-top: var(--sp-4); } .ltm-social a { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; transition: background .3s, transform .3s var(--ease), color .3s; } .ltm-social a:hover { background: var(--gold); color: var(--night); transform: translateY(-3px); } .ltm-social .ltm-ic { width: 19px; height: 19px; } .ltm-footer__h { color: #fff !important; font-size: 16px !important; margin-bottom: var(--sp-4) !important; letter-spacing: 0 !important; } .ltm-footer__links { display: grid; gap: var(--sp-2); } .ltm-footer__links a { position: relative; transition: color .25s, padding .3s var(--ease); } .ltm-footer__links a:hover { color: var(--gold-2); padding-left: 8px; } .ltm-footer__contact { display: grid; gap: var(--sp-3); } .ltm-footer__contact li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; } .ltm-footer__contact .ltm-ic { margin-top: 2px; color: var(--gold-2); width: 19px; height: 19px; } .ltm-footer__contact a:hover { color: #fff; } .ltm-footer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4) 0 var(--sp-5); border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; } .ltm-footer__bar p { margin: 0 !important; } .ltm-pay { display: flex; flex-wrap: wrap; gap: 8px; } .ltm-pay span { padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .16); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .8); } /* ---------- Back to top / lightbox ---------- */ .ltm-totop { position: fixed; z-index: 9000; right: 28px; bottom: 104px; width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; box-shadow: var(--sh); opacity: 0; transform: translateY(16px) scale(.85); pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease), background .25s; } .ltm-totop.is-on { opacity: 1; transform: none; pointer-events: auto; } .ltm-totop:hover { background: var(--blue); } .ltm-lightbox { position: fixed; inset: 0; z-index: 10002; display: grid; place-items: center; padding: 40px 20px; background: rgba(6, 18, 31, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s; } .ltm-lightbox.is-open { opacity: 1; } .ltm-lightbox[hidden] { display: none; } .ltm-lightbox img { max-width: min(92vw, 900px); max-height: 88vh; width: auto; border-radius: 18px; box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .8); transform: scale(.94); transition: transform .5s var(--ease-out); } .ltm-lightbox.is-open img { transform: none; } .ltm-lightbox__close { position: absolute; top: 20px; right: 20px; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; } .ltm-lightbox__close:hover { background: rgba(255, 255, 255, .26); } /* WhatsApp plugin polish */ .ltm #wa .wa__btn_popup_txt { border-radius: 999px !important; font-family: var(--f-body) !important; box-shadow: var(--sh) !important; } /* ---------- Motion: reveals, split, tilt ---------- */ .ltm-js [data-reveal] { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0ms); } .ltm-js [data-reveal="left"] { transform: translate3d(-50px, 0, 0); } .ltm-js [data-reveal="right"] { transform: translate3d(50px, 0, 0); } .ltm-js [data-reveal].is-in { opacity: 1; transform: none; } .ltm-js .ltm-eyebrow[data-reveal].is-in::before { animation: ltmGrow .9s var(--ease-out) both; } [data-split] .ltm-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } [data-split] .ltm-w > span { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--wi) * 70ms + 150ms); } [data-split].is-in .ltm-w > span { transform: none; } [data-tilt] { will-change: transform; } .ltm-magnet { transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s ease !important; } /* ---------- Keyframes ---------- */ @keyframes ltmMarquee { to { transform: translateX(-50%); } } @keyframes ltmPulse { 0% { box-shadow: 0 0 0 0 rgba(230, 197, 98, .7); } 70% { box-shadow: 0 0 0 10px rgba(230, 197, 98, 0); } 100% { box-shadow: 0 0 0 0 rgba(230, 197, 98, 0); } } @keyframes ltmShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes ltmBar { to { transform: scaleX(1); } } @keyframes ltmScroll { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } } @keyframes ltmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes ltmKen { from { transform: scale(1.15); } to { transform: scale(1); } } @keyframes ltmPop { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes ltmGrow { from { width: 0; } to { width: 34px; } } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { .ltm-nav a { padding: 0 12px; font-size: 14.5px; } .ltm-nav a::after { left: 12px; right: 12px; } .ltm-hero__in { grid-template-columns: 1fr 380px; } .ltm-footer__grid { grid-template-columns: 1fr 1fr; } .ltm-flyers { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1024px) { .ltm-nav, .ltm-topbar__l a:nth-child(2) { display: none; } .ltm-burger { display: inline-flex; } .ltm-header__cta { margin-left: auto; } .ltm-hero__in { grid-template-columns: minmax(0, 1fr); padding-bottom: 20px; } .ltm-quote { max-width: 560px; } .ltm-split, .ltm-split--rev, .ltm-umrah__in { grid-template-columns: minmax(0, 1fr); } .ltm-split--rev > :first-child { order: 2; } .ltm-grid--3, .ltm-iconcards { grid-template-columns: repeat(2, 1fr); } .ltm-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; } .ltm-bento__card--0 { grid-column: span 2; grid-row: span 1; } .ltm-bento__card--1, .ltm-bento__card--4, .ltm-bento__card--5 { grid-column: span 1; } .ltm-bento__card--5 { grid-column: span 2; } .ltm-steps { grid-template-columns: repeat(2, 1fr); } .ltm-steps::before { display: none; } .ltm-stats__grid { grid-template-columns: repeat(2, 1fr); } .ltm-stat:nth-child(2) { border-right: 0; } .ltm-contactcards { grid-template-columns: 1fr; margin-top: -80px; } .ltm-formpanel { grid-template-columns: 1fr; } .ltm-umrah__cards { max-width: 520px; margin: 0 auto; width: 100%; } .ltm-collage, .ltm-stack, .ltm-why__media { max-width: 620px; margin: 0 auto; width: 100%; } } @media (max-width: 700px) { :root { --head-h: 70px; --top: 0px; } .ltm-topbar { display: none; } .ltm-logo img { height: 42px; } .is-scrolled .ltm-logo img { height: 40px; } .ltm-header__cta .ltm-btn { display: none; } .ltm-hero { min-height: auto; } .ltm-hero__in { padding-top: calc(var(--ab) + var(--head-h) + 30px); } .ltm-hero__title { font-size: clamp(38px, 11vw, 52px) !important; } .ltm-hero__foot { padding-bottom: 24px; } .ltm-hero__place { display: none; } .ltm-quote { padding: 20px; } .ltm-seg__opt span { font-size: 11px; padding: 9px 2px; } .ltm-grid--3, .ltm-iconcards, .ltm-flyers, .ltm-features, .ltm-steps { grid-template-columns: 1fr; } .ltm-bento { grid-template-columns: 1fr; grid-auto-rows: 200px; gap: var(--sp-3); } .ltm-grid, .ltm-features, .ltm-steps, .ltm-flyers, .ltm-iconcards, .ltm-contactcards { gap: var(--sp-3); } .ltm-collage, .ltm-stack { padding-bottom: 18%; } .ltm-bento__card--0, .ltm-bento__card--5 { grid-column: span 1; } .ltm-bento__text { max-height: 120px; opacity: 1; } .ltm-umrah__grid { grid-template-columns: 1fr; } .ltm-umrah__cards { height: 380px; } .ltm-stats__grid { gap: 20px 0; } .ltm-stat { border-right: 0; } .ltm-collage__badge { left: 0; } .ltm-why__float { right: 10px; } .ltm-head { align-items: flex-start; } .ltm-rail-nav { display: none; } .ltm-footer__grid { grid-template-columns: 1fr; gap: 30px; } .ltm-footer__cta-btns .ltm-btn { width: 100%; } .ltm-map__card { position: relative; left: auto; top: auto; transform: none; margin: -60px auto 0; } .ltm-map { height: auto; } .ltm-map iframe { height: 340px; } .ltm-totop { display: none; } } /* Keep everything inside the viewport horizontally */ .ltm-main { overflow-x: clip; } @media (max-width: 700px) { .ltm-js [data-reveal="left"], .ltm-js [data-reveal="right"] { transform: translate3d(0, 34px, 0); } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ltm *, .ltm *::before, .ltm *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .ltm-js [data-reveal], [data-split] .ltm-w > span { opacity: 1 !important; transform: none !important; } .ltm-hero__slide img { transform: none !important; } } .ltm-banner .ltm-arabic, .ltm-center .ltm-arabic { text-align: center; } /* ---------- Icon-button normalisation ---------- A plugin stylesheet adds padding (15px 30px) to every