/* ============================================================
   TRIPAURE-WEB.CSS — public site stylesheet.
   ============================================================ */

/* §  VARIABLES */

:root {
    /* Aliases to theme.css */
    --tp-primary: var(--color-primary);
    --tp-primary-deep: var(--color-navy);
    --tp-accent: var(--color-sky);
    --tp-accent-deep: var(--color-primary);
    --tp-accent-light: #e7f7fe;
    --tp-text-dark: var(--color-navy);
    --tp-text-muted: rgba(13, 27, 42, .55);
    --tp-border: rgba(13, 27, 42, .14);
    --tp-bg-soft: #f5fcff;
    --tp-success-light: #9ee6c4;
    --tp-danger-light: #ff9b9b;
    --tp-whatsapp: var(--color-whatsapp);
    --tp-whatsapp-rgb: var(--color-whatsapp-rgb);

    /* RGB triplets, for rgba() */
    --tp-primary-rgb: var(--color-primary-rgb);
    --tp-primary-deep-rgb: var(--color-navy-rgb);
    --tp-accent-rgb: var(--color-sky-rgb);
    --tp-text-dark-rgb: var(--color-navy-rgb);

    --tp-font-ar: var(--font-ar);
    --tp-font-heading: var(--font-heading);
    --tp-font-body: var(--font-body);
    --tp-radius: 14px;
    --tp-radius-lg: 24px;
    --tp-radius-btn: 10px;
}


/* §  BASE */

* {
    box-sizing: border-box;
}

body {
    font-family: var(--tp-font-body);
    font-weight: 400;
    color: var(--tp-text-dark);
    background: #fff;
    /* `hidden` (unlike `clip`) makes body a scroll container, which breaks
       `position: sticky` for every descendant on the site — `clip` still
       stops the horizontal scrollbar but doesn't have that side effect. */
    overflow-x: clip;
}

/* Same fix, and the one that actually mattered: the vendored theme puts
   `overflow: hidden` on .page-wrapper (assets/amiso/css/style.css), which
   wraps the entire page — so every descendant lost `position: sticky`, not
   just the ones under body's own overflow. Keep clipping horizontally (the
   theme's decorative shapes bleed past the viewport edge) but drop the
   scroll container: `overflow-x: clip` + `overflow-y: visible` is a legal
   pair, whereas `overflow-x: hidden` silently forces overflow-y to `auto`,
   which is what was re-creating the scroll container here. */
.page-wrapper {
    overflow-x: clip;
    overflow-y: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--tp-font-heading);
    font-weight: 700;
    margin: 0;
}

p {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color .15s, opacity .15s;
}

img {
    max-width: 100%;
    display: block;
}


/* Preloader is the template's own (assets/amiso/css/style.css .preloader) —
   see includes/web/preloader.blade.php. */


/* §  BUTTONS
   Base + colour modifiers — still used by the booking/auth/account pages
   (out of scope for the template pass; restyled in a later phase), so kept
   as-is. The public header/hero now use the template's own .theme-btn
   instead (see the HEADER and HERO bridge sections below). */

.tp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    max-width: 100%;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.2;
    padding: .9rem 1.9rem;
    border-radius: var(--tp-radius-btn);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}

/* AJAX submit-in-progress state — button stays visible/readable, just
   clearly non-interactive while the request is in flight. */
.tp-btn-loading {
    opacity: .65;
    pointer-events: none;
}

.tp-btn-accent {
    background: var(--tp-accent);
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(var(--tp-accent-rgb), .35);
}

.tp-btn-accent:hover {
    background: var(--tp-accent-deep);
    transform: translateY(-2px);
    color: #fff;
}

/* Size modifier */
.tp-btn-sm {
    padding: .6rem 1.4rem;
    font-size: .85rem;
}

@media (max-width: 479.98px) {
    .tp-btn {
        padding: .7rem 1.3rem;
        font-size: .88rem;
    }
}


/* §  UTILITIES */

/* Force LTR rendering for embedded Latin/numeric content inside RTL text (phone numbers, emails) */
.tp-ltr {
    direction: ltr;
    unicode-bidi: embed;
}

/* Accent-colored word/line within a heading */
.tp-highlight {
    color: var(--tp-accent);
    display: block;
}


/* §  ALERTS
   Loaded globally (unlike tripaure-pages.css) because the shared flash
   partial (includes/web/alerts.blade.php) renders on every page. */

/* Keeps the flash off the header's bottom edge. */
.tp-flash {
    display: flow-root; /* keeps the alert's bottom margin inside the strip's background */
    padding-top: 1.5rem;
}
/* Blend into the soft-blue .tp-page that follows (booking/account pages). */
.tp-flash:has(+ .tp-page) {
    background: var(--tp-bg-soft);
}

.tp-alert {
    padding: .85rem 1.1rem;
    border-radius: var(--tp-radius-btn);
    font-size: .9rem;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}

.tp-alert-success {
    background: #e8f8f0;
    border-color: #a9e0c4;
    color: #1c6b45;
}

.tp-alert-danger {
    background: #fdecec;
    border-color: #f3b8b8;
    color: #972828;
}

.tp-alert-info {
    background: var(--tp-accent-light);
    border-color: rgba(var(--tp-accent-rgb), .4);
    color: var(--tp-primary-deep);
}

.tp-alert-warning {
    background: #fdf3e3;
    border-color: #f0d59a;
    color: #8a5a10;
}


/* §  LANGUAGE SWITCHER
   No template equivalent exists for this control, so it keeps its own
   (minimal, colour-only) styling — used in both the header and the mobile
   drawer, each supplying their own base text colour. */

.tp-lang-sep {
    opacity: .5;
}

.tp-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
}

.tp-lang-option {
    font-weight: 500;
    transition: opacity .2s;
}

.tp-lang-option.active {
    font-weight: 700;
}

/* Header context only — the drawer has its own segmented toggle
   (.tp-drawer-lang). Dimming the inactive option (rather than a fixed
   colour) works with whatever colour the header text inherits, and makes
   the active language visible beyond font-weight alone. */
.header-style-three .tp-lang-option {
    opacity: .6;
}

.header-style-three .tp-lang-option.active {
    opacity: 1;
}


/* §  PRELOADER — see includes/web/preloader.blade.php
   The template's own is a spinner GIF plus the word "Loading", both drawn
   in .preloader::after/::before (assets/amiso/css/style.css) — dropped for
   a loader made of the logo's own parts: the plane, its trail, the brand
   blues. All of it is CSS (not SMIL, whose clock some engines never start)
   on one 2.4s period, so the trail's tip and the plane stay in step. */

.preloader {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

.preloader::before,
.preloader::after {
    content: none;
}

.tp-preloader-box {
    width: min(280px, 72vw);
    text-align: center;
}

.tp-preloader-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible; /* the plane banks past the viewBox edges mid-turn */
}

.tp-preloader-guide {
    fill: none;
    stroke: rgba(var(--tp-primary-deep-rgb), .16);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 2 8;
}

.tp-preloader-trail {
    fill: none;
    stroke: url(#tpPreloaderTrail);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation:
        tp-preloader-draw 2.4s cubic-bezier(.4, 0, .6, 1) infinite,
        tp-preloader-trail-out 2.4s linear infinite;
}

/* Matches the plane's easing exactly — that pairing is what keeps the
   trail's tip on the plane's tail rather than drifting ahead or behind. */
@keyframes tp-preloader-draw {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
}

/* Clears the drawn route before the loop restarts, so the reset isn't a
   visible snap. The plane fades on the same beat. */
@keyframes tp-preloader-trail-out {
    0%, 88% { opacity: 1; }
    100%    { opacity: 0; }
}

.tp-preloader-plane {
    /* Hidden unless the engine can actually fly it — without offset-path
       support it would sit stranded at the viewBox origin. The trail, stops
       and wordmark still make a complete loader on their own. */
    display: none;
}

@supports (offset-path: path('M0 0L1 1')) {
    .tp-preloader-plane {
        display: block;
        offset-path: path('M20 80C80 80 130 20 220 34');
        offset-rotate: auto;
        offset-anchor: 0 0;
        transform-box: view-box;
        transform-origin: 0 0;
        animation:
            tp-preloader-fly 2.4s cubic-bezier(.4, 0, .6, 1) infinite,
            tp-preloader-plane-in 2.4s linear infinite;
    }
}

@keyframes tp-preloader-fly {
    from { offset-distance: 0%; }
    to   { offset-distance: 100%; }
}

@keyframes tp-preloader-plane-in {
    0%        { opacity: 0; }
    7%, 90%   { opacity: 1; }
    100%      { opacity: 0; }
}

.tp-preloader-ping {
    animation: tp-preloader-ping 2.4s ease-out infinite;
}

@keyframes tp-preloader-ping {
    0%        { r: 4; opacity: .4; }
    45%, 100% { r: 16; opacity: 0; }
}

.tp-preloader-node-end {
    animation: tp-preloader-arrive 2.4s ease-out infinite;
}

@keyframes tp-preloader-arrive {
    0%, 82% { r: 4; }
    90%     { r: 7; }
    100%    { r: 4; }
}

.tp-preloader-stop-from {
    stop-color: var(--tp-accent);
    stop-opacity: .15;
}

.tp-preloader-stop-to {
    stop-color: var(--tp-primary);
    stop-opacity: 1;
}

.tp-preloader-node,
.tp-preloader-plane path {
    fill: var(--tp-primary-deep);
}

.tp-preloader-ping {
    fill: var(--tp-primary);
}

.tp-preloader-word {
    margin: 1.3rem 0 0;
    font-family: var(--title-font);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tp-primary-deep);
    /* text-indent cancels the trailing gap letter-spacing leaves on the
       last glyph, which would otherwise push the word off centre. */
    letter-spacing: .34em;
    text-indent: .34em;
}

.tp-preloader-tagline {
    margin: .45rem 0 0;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--tp-primary);
    letter-spacing: .2em;
    text-indent: .2em;
}

/* Flies in the reading direction. */
[dir="rtl"] .tp-preloader-svg {
    transform: scaleX(-1);
}

/* Settles on the end of the journey rather than looping it. */
@media (prefers-reduced-motion: reduce) {
    .tp-preloader-trail,
    .tp-preloader-plane,
    .tp-preloader-ping,
    .tp-preloader-node-end {
        animation: none;
    }

    .tp-preloader-trail {
        stroke-dashoffset: 0;
    }

    .tp-preloader-ping {
        display: none;
    }

    .tp-preloader-plane {
        offset-distance: 100%;
    }
}


/* §  HEADER — template bridge (header-style-three)
   The vendored header (assets/amiso/css/style.css) already forces a solid
   white bar with a dark toggler on every screen below 1024px (its own
   .header-style-three / .mobile-nav-toggler rules in responsive.css), so
   only the desktop width needs a floating-vs-solid distinction here. */

/* header-style-three is absolute (floats over the home hero); .is-solid
   pages never reset that, so it overlapped page content instead of
   pushing it down. Not `sticky`: the home page's header specifically needs
   to start `absolute` (overlapping the hero, reserving no space), which
   `sticky` can never do — it always reserves its normal-flow box — so both
   states go through the JS-driven .tp-header-scrolled fixed/pad mechanism
   below instead, uniformly. */
.header-style-three.is-solid {
    position: relative;
}

/* §  FIXED HEADER (scroll) — tripaure-web.js toggles this class past the
   same 100px threshold the template's own (removed) .sticky-header clone
   used. One real header that goes fixed, not a second copy to keep in
   sync — see the top-of-file comment in tripaure-web.js for why. Can't
   use `position: sticky` instead (see the .is-solid comment above), so
   on pages where the header was already in normal flow (.is-solid, at
   rest `position: relative`) tripaure-web.js also pads body's top by the
   header's own height while this class is on, so content doesn't jump
   up by that amount when the header leaves flow. The home page's header
   starts `position: absolute` (reserves no space to begin with), so it
   needs no such padding. */
.header-style-three.tp-header-scrolled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 16px rgba(var(--tp-primary-deep-rgb), .08);
    z-index: 999;
}

.header-style-three.tp-header-scrolled .main-menu .navigation > li > a,
.header-style-three.tp-header-scrolled .info-btn,
.header-style-three.tp-header-scrolled .ui-btn,
.header-style-three.tp-header-scrolled .tp-nav-link,
.header-style-three.tp-header-scrolled .tp-lang-switch,
.header-style-three.tp-header-scrolled .tp-nav-avatar-btn {
    color: var(--color-navy);
}

.header-style-three.tp-header-scrolled .tp-nav-avatar-btn {
    background: rgba(var(--tp-primary-deep-rgb), .06);
}

.header-style-three.tp-header-scrolled .tp-nav-avatar-btn:hover,
.header-style-three.tp-header-scrolled .tp-nav-avatar-btn[aria-expanded="true"] {
    background: rgba(var(--tp-primary-deep-rgb), .12);
}

.header-style-three.tp-header-scrolled .main-menu .navigation > li > a:hover,
.header-style-three.tp-header-scrolled .main-menu .navigation > li.current > a {
    color: var(--tp-accent);
}

/* Uploaded logo files are full-resolution (1700px+ wide) — the template
   never sizes .logo-box img itself (only .mobile-menu's copy does), and
   .logo-box is a flex child of .main-box, so the global `img{max-width:
   100%}` reset alone can't shrink it: a flex item's default min-width:auto
   holds it at the image's intrinsic size regardless. Constrain the image
   directly (bypasses that) and let the flex item shrink too, belt-and-
   suspenders. */
.header-style-three .logo-box {
    min-width: 0;
    /* Template default (38px 0) sizes the bar around a much bigger logo
       mark than ours — .main-box centers everything on this box's height
       (align-items: center), so it alone was driving a ~120px-tall bar. */
    padding: 14px 0;
}

.header-style-three .header-logo-dark {
    max-height: 44px;
    width: auto;
}

.header-style-three .outer-box {
    gap: 1.1rem;
}

/* Template default (60px) was tuned for a 4-link menu; FAQ makes it 6 and
   the bar was reading as sparse/oversized rather than confident. */
.header-style-three .main-menu .navigation > li {
    margin-right: 34px;
}

[dir="rtl"] .header-style-three .main-menu .navigation > li {
    margin-right: 0;
    margin-left: 34px;
}

.header-style-three .outer-box .info-btn {
    margin-left: 0; /* template default assumed a preceding search button we dropped */
}

/* Matches the template's own .main-menu .navigation > li > a typography
   (16px / 500-weight) rather than inventing a separate scale — these are
   extra nav-bar links the template didn't originally have, but they should
   still read like the rest of its menu, not like a different component. */
.header-style-three .tp-nav-link {
    color: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: color .2s, opacity .2s;
}

.header-style-three .tp-nav-link:hover {
    color: var(--tp-accent);
    opacity: 1;
}

.header-style-three .tp-nav-link-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

/* Signed-in state: just the avatar icon in the bar, "My Account"/"Sign out"
   moved into the dropdown it opens — was two separate text links competing
   with the nav menu for space. */
.tp-nav-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(var(--tp-primary-deep-rgb), .06);
    color: inherit;
    font-size: 22px;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.tp-nav-avatar-btn:hover,
.tp-nav-avatar-btn[aria-expanded="true"] {
    background: rgba(var(--tp-primary-deep-rgb), .12);
    color: var(--tp-accent-deep);
}

.tp-nav-account-menu {
    min-width: 190px;
    padding: .4rem;
    border: none;
    border-radius: var(--tp-radius);
    box-shadow: 0 12px 40px rgba(var(--tp-primary-deep-rgb), .14);
}

.tp-nav-account-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    border-radius: calc(var(--tp-radius) - 6px);
    font-size: 15px;
    color: var(--tp-text-dark);
}

.tp-nav-account-menu .dropdown-item:hover,
.tp-nav-account-menu .dropdown-item:focus {
    background: rgba(var(--tp-primary-deep-rgb), .06);
    color: var(--tp-text-dark);
}

.tp-nav-account-menu .dropdown-item i {
    font-size: 18px;
    color: var(--tp-text-muted);
}

@media (min-width: 1024px) {
    /* The home header floats transparent over the light hero with the
       template's own dark text; every other page gets a solid bar. */
    .header-style-three.is-solid {
        background-color: #fff;
        box-shadow: 0 2px 16px rgba(var(--tp-primary-deep-rgb), .08);
    }
}

/* .outer-box now also carries the language switcher, auth link and Book Now
   button on top of the template's own call button — drop the call button
   below ~1440px so the bar doesn't overcrowd; it's still reachable from the
   footer and the WhatsApp button. */
@media (max-width: 1439px) {
    .header-style-three .outer-box .info-btn {
        display: none;
    }
}

/* The template's own desktop-nav breakpoint is max-width:1023px
   (assets/amiso/css/responsive.css). With our extra outer-box items (lang
   switch, sign-in, Book Now) added on top of its own nav, measuring actual
   rendered widths showed the full bar wraps unpredictably somewhere in the
   1024-1250px band — e.g. it wraps at 1024px and 1200px but not at 1100px
   or 1280px, a genuine flex min-content/shrink instability, not a single
   clean threshold. Rather than chase exact per-pixel numbers, extend the
   template's own drawer/toggler breakpoint up to 1299px — comfortably past
   every wrap point found by testing — so that whole band uses the drawer
   instead of the cramped bar, and only switch to the full desktop bar once
   there's real headroom (clean from 1300px up in testing). */
@media (max-width: 1299px) {
    .header-style-three {
        background-color: #fff;
    }

    .header-style-three .main-box .main-menu {
        display: none;
    }

    .header-style-three .main-box .mobile-nav-toggler {
        display: block;
        color: var(--color-navy);
    }

    /* Below the desktop-menu breakpoint the toggler takes over and the
       drawer opens — at that width .outer-box only has room for Book Now +
       the toggler, so the language switcher and sign-in/account links move
       into the drawer instead rather than overflow/wrap in the bar. Same
       breakpoint as the rest of this block, not the template's own 1023px,
       since the desktop nav is unusable (not just tight) through that
       whole band. */
    .header-style-three .outer-box .tp-lang-switch,
    .header-style-three .outer-box .tp-nav-link,
    .header-style-three .outer-box .tp-nav-account {
        display: none;
    }
}

/* At phone widths (roughly the "Mobile S/M/L" design bucket, ~320-430px)
   logo + Book Now + toggler no longer fit the bar without crowding or
   overlapping the logo text — drop Book Now here too; the drawer always
   carries its own (.tp-drawer-book-btn below). */
@media (max-width: 430px) {
    .header-style-three .outer-box .tp-nav-book-btn {
        display: none;
    }
}

/* §  MOBILE DRAWER — overrides the vendored .mobile-menu (style.css), whose
   links are now rendered server-side into ul.tp-drawer-nav (see
   includes/web/mobile/nav.blade.php). */
.mobile-menu {
    width: 340px;
}

@media (max-width: 430px) {
    .mobile-menu {
        width: 100%;
    }
}

.mobile-menu .menu-box {
    background: var(--color-navy);
    overscroll-behavior: contain;
}

.mobile-menu .upper-box {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Template parks it 50px above its slot (translateY) and 10px higher again
   (top) until the drawer opens — reads as a stray tiny "×" in the corner. */
.mobile-menu .close-btn,
.mobile-menu-visible .mobile-menu .close-btn {
    top: 0;
    transform: none;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 24px;
    transition: background-color .2s;
}

.mobile-menu .close-btn:hover,
.mobile-menu .close-btn:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, .16);
}

.tp-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 12px;
    margin: 0;
    list-style: none;
}

.tp-drawer-nav a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 6px 12px;
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.tp-drawer-nav a:hover,
.tp-drawer-nav a:focus-visible,
.tp-drawer-nav li.active a {
    background: rgba(var(--tp-accent-rgb), .14);
    color: #fff;
}

.tp-drawer-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: var(--tp-accent);
    font-size: 19px;
    transition: background-color .2s, color .2s;
}

.tp-drawer-nav li.active .tp-drawer-nav-icon {
    background: var(--tp-accent);
    color: #fff;
}

.tp-drawer-nav-label {
    flex: 1;
}

.tp-drawer-nav-chevron {
    font-size: 20px;
    color: rgba(255, 255, 255, .35);
}

[dir="rtl"] .tp-drawer-nav-chevron {
    transform: scaleX(-1);
}

.tp-drawer-cta {
    padding: 4px 24px 20px;
}

.tp-drawer-book-btn {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* btn-style-one's resting 24px hover-fill strip reads as a stray blob on a
   full-width button. */
.tp-drawer-book-btn:not(:hover)::before {
    width: 0;
}

.tp-drawer-account {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 12px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.tp-drawer-account form {
    margin: 0;
}

/* Segmented EN / العربية toggle. */
.tp-drawer-lang {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin: 0 12px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
}

.tp-drawer-lang a {
    flex: 1;
    padding: 8px;
    border-radius: 9px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.tp-drawer-lang a:hover {
    color: #fff;
}

.tp-drawer-lang a.active {
    background: #fff;
    color: var(--color-navy);
}

.tp-drawer-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 46px;
    padding: 6px 12px;
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    transition: background-color .2s;
}

.tp-drawer-row:hover,
.tp-drawer-row:focus-visible {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.tp-drawer-row i {
    width: 36px;
    text-align: center;
    font-size: 21px;
    color: rgba(255, 255, 255, .6);
}

.tp-drawer-contact {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 18px 24px;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.tp-drawer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: #fff;
    font-size: 14px;
}

.tp-drawer-contact i {
    flex-shrink: 0;
    width: 24px;
    margin-top: 2px;
    font-size: 20px;
    color: var(--tp-accent);
}

.tp-drawer-contact div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tp-drawer-contact .title {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.tp-drawer-contact a {
    color: #fff;
    overflow-wrap: anywhere;
}

.tp-drawer-contact a:hover {
    color: var(--tp-accent);
}

.tp-drawer-socials {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: auto 0 0; /* pins to the bottom when the drawer has spare height */
    padding: 16px 24px 24px;
    list-style: none;
}

.tp-drawer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 18px;
    transition: background-color .2s;
}

.tp-drawer-socials a:hover {
    background: var(--tp-accent);
    color: #fff;
}

/* contact-info-block-two's .bg layers an opaque JPG texture (the
   template's own warm/red decoration) over .inner-box's
   background-color:var(--bg-theme-color2) — since it's a JPG (no
   transparency) it fully hides our remapped brand blue underneath
   regardless of the CSS variable, so drop it rather than fight it. */
.contact-info-block-two .inner-box .bg {
    background-image: none;
}

/* Without a brand_image the .image-column above renders empty (see
   home.blade.php) — give it a floor so the section doesn't collapse to
   near-zero height and crowd the section below it. Harmless when a photo
   IS present: 495px already matches .image-1's own height. */
.about-section-four .image-column .inner-column {
    min-height: 495px;
}

@media (max-width: 991px) {
    .about-section-four .image-column .inner-column {
        min-height: 0;
    }
}

/* The template shrinks the spinning ring to a fixed 300px (≤1199) and hides
   it (≤1023) while the photo stays larger — below 1200 .image-box hugs the
   photo, so size the ring off it instead (desktop 540/495 ≈ 109%). */
@media (max-width: 1199px) {
    .about-section-four .image-column .image-box {
        position: relative;
    }

    .about-section-four .image-column .bg-shape {
        display: block;
        width: 109%;
        height: 109%;
        top: -8%;
        left: auto;
        right: auto;
        inset-inline-start: -9%;
        background-size: cover;
    }
}

@media (max-width: 767.98px) {
    .about-section-four .image-column .bg-shape {
        display: none;
    }
}

/* Placeholder shown in the photo circle when no brand_image has been
   uploaded yet (admin.home-content.edit) — .image-1 itself already gets
   its size/circle/border from the template, this just fills it in. */
.tp-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--tp-accent-light) 0%, rgba(var(--tp-primary-rgb), .12) 100%);
}

.tp-img-placeholder i {
    font-size: 4rem;
    color: rgba(var(--tp-primary-rgb), .35);
}

/* Same uploaded-logo-is-huge issue as the header — .about-widget .logo has
   no img constraint in the template (only the header/drawer/sticky ones
   do), and it happens to look fine here since .footer-column isn't a flex
   item, but constrain it explicitly rather than rely on that. */
.main-footer .about-widget .logo img {
    max-height: 40px;
    width: auto;
}

/* §  HOME — Amiso sections (resources/views/web/home.blade.php). The
   template's markup and CSS are used as-is; these are only the bridges. */

/* Hero title: 110px suits the template's two short words, not a bilingual slogan + brand. */
.banner-section-two .content-box .title {
    font-size: var(--h1-font-size);
    line-height: 1.1;
    margin-bottom: 25px;
}

.banner-section-two .content-box .text {
    max-width: 34rem;
    margin-bottom: 40px;
}

.banner-section-two .content-box .btn-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.banner-section-two .content-box .btn-box .play-btn {
    margin: 0;
}

/* The template's arrow PNG is red — reuse its shape as a mask in the brand colour.
   Pinned beside the title's first line, out in the gutter, so it never crosses
   the description whatever its length or language. */
.banner-section-two .content-box .arrow-icon {
    top: 0;
    right: -80px;
    width: 186px;
    height: 106px;
    background-color: var(--theme-color2);
    -webkit-mask: url(../assets/amiso/images/main-slider/arrow.png) no-repeat center / contain;
            mask: url(../assets/amiso/images/main-slider/arrow.png) no-repeat center / contain;
}

[dir="rtl"] .banner-section-two .content-box .arrow-icon {
    right: auto;
    left: -80px;
    transform: scaleX(-1);
}

/* The vertical social links sit in the page gutter; below 1700px it's too narrow and they cross the title. */
@media (max-width: 1699px) {
    .banner-section-two .banner-social-links {
        display: none;
    }
}

/* The template only rounds the bottom corners, leaving the top ones square. */
.feature-block-two .inner-box {
    border-radius: 10px;
}

/* The middle promise card's texture PNG has the template's red baked in — tint it to the brand instead. */
.feature-block-two:nth-child(3n+2) .inner-box {
    background-blend-mode: luminosity;
}

/* Admin photos come in any size — crop them to the template's frames. */
.banner-section-two .image-box .image-1 img {
    width: 412px;
    aspect-ratio: 412 / 538;
    object-fit: cover;
}

.banner-section-two .image-box .image-2 img {
    width: 362px;
    aspect-ratio: 362 / 478;
    object-fit: cover;
}

/* The template parks .image-2 370px out in the gutter, so it's clipped below
   1920 and hidden below 1440 — instead overlap it on image-1's inner corner. */
@media (max-width: 1919.98px) {
    .banner-section-two .image-box {
        width: fit-content;
        margin-inline: auto 0;
        padding-inline: 110px 0;
    }

    .banner-section-two .image-box .image-2 {
        display: block;
        left: auto;
        right: auto;
        inset-inline-start: 0;
        top: auto;
        bottom: -40px;
        border: 5px solid #fff;
    }

    .banner-section-two .image-box .image-2 img {
        width: 200px;
    }
}

@media (max-width: 991.98px) {
    .banner-section-two .image-box {
        margin-inline: auto;
        padding-inline: 80px 0;
    }
}

/* Too little room on phones — the inset photo would cover most of image-1. */
@media (max-width: 767.98px) {
    .banner-section-two .image-box {
        padding-inline: 0;
    }

    .banner-section-two .image-box .image-2 {
        display: none;
    }
}

/* The promise cards sat flush against the hero's bottom edge. */
.features-section-two {
    padding-top: 40px;
}

/* style-rtl.css hardcodes the template's red here instead of using the variable. */
.work-section-two .content-column .sec-title .other-text {
    color: var(--theme-color2);
}

/* Light grey instead of the template's near-black; the dark pattern image is
   inverted to keep its shapes as a faint texture. */
.work-section-two {
    background-color: var(--theme-color3);
}
.work-section-two .bg-pattern-16 {
    filter: invert(1) grayscale(1);
    opacity: .35;
}
.work-block-two .title,
.work-block-two .inner-box:hover .icon {
    color: var(--theme-color1);
}
.work-block-two .icon::after {
    background-color: rgba(10, 104, 255, .12);
}

/* Counters: light grey panel, dark text, brand-blue numbers. */
.testimonial-section-three .fact-counter-two {
    background-color: #e9edf2;
}
.counter-block-two .inner:before {
    background-color: rgba(13, 27, 42, .1);
}
.counter-block-two .icon {
    background-color: #fff;
}
.counter-block-two .count-box,
.counter-block-two .count-box .count-text {
    color: var(--theme-color2);
}
.counter-block-two .counter-title {
    color: #5b6472;
}

/* The brand logo sits in the template's signature slot. */
.work-section-two .image-column .sign img {
    max-width: 260px;
}

/* Testimonial without a photo: the name's first letter in the template's avatar circle. */
.testimonial-block-three .thumb .tp-testimonial-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: 5px solid #fff;
    border-radius: 50%;
    background-color: var(--theme-color2);
    color: #fff;
    font-size: 30px;
    font-weight: 700;
}

/* §  FOOTER — everything is the template's own main-footer markup
   (includes/web/footer.blade.php); these are just our additions on top. */

/* .subscribe-form is the template's own, but it assumes a 560px-wide band
   (its original home — a full-width strip above the widgets). It's now a
   4th widget column instead, so it needs to fit ~280-320px. */
.newsletter-widget .subscribe-form .form-group {
    width: 100%;
    flex-wrap: wrap;
}

/* .form-group is a flex row (input + submit button as a pill) — the AJAX
   422 handler (tripaure-web.js) inserts .tp-field-error as a sibling right
   after the input, which would otherwise land as a third flex item wedged
   between the input and the button. Force it onto its own line instead. */
.newsletter-widget .subscribe-form .tp-field-error {
    flex-basis: 100%;
    order: 3;
}

.tp-footer-subscribe-msg {
    font-size: .8rem;
    color: var(--tp-success-light);
    margin-top: .75rem;
}

.tp-footer-subscribe-msg-error {
    color: var(--tp-danger-light);
}

/* Copyright (start) / legal labels (center) / credit (end) in one row —
   the template's own .inner-container is just centered text by default. */
.tp-footer-bottom-3col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    text-align: start;
}

.tp-footer-legal {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: rgba(255, 255, 255, .6);
    font-size: .85rem;
}

.tp-footer-legal-sep {
    opacity: .5;
}

.tp-footer-legal a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}

.tp-footer-legal a:hover {
    color: #fff;
}

.tp-footer-credit {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: rgba(255, 255, 255, .6);
    font-size: .8rem;
}

.tp-footer-credit:hover {
    color: #fff;
}

.tp-footer-credit img {
    height: 16px;
    width: auto;
}

/* Below Bootstrap's md breakpoint the footer columns (col-md-6) stack to
   one full-width column each — left-aligned text/logo/socials/form read
   oddly off-centre at that width, so centre everything, widgets and the
   bottom bar alike. */
@media (max-width: 767.98px) {
    .main-footer .footer-column {
        text-align: center;
    }

    .main-footer .social-icon-two,
    .main-footer .newsletter-widget .subscribe-form .form-group {
        justify-content: center;
    }

    .tp-footer-bottom-3col {
        justify-content: center;
        text-align: center;
    }
}


/* §  WHATSAPP FLOAT
   No template equivalent — kept as the standard recognisable green circular
   FAB pattern most sites use verbatim, not a styling choice competing with
   the template's own look.

   Opposite corner from .scroll-to-top on purpose (that one sits at
   inset-inline-end via style.css/style-rtl.css's own right/left swap) so
   the two never stack on top of each other. Using inset-inline-start here
   (rather than a fixed left/right) means it also flips corners automatically
   when the language/direction changes, same as .scroll-to-top does. */

.tp-whatsapp-float {
    position: fixed;
    bottom: 24px;
    inset-inline-start: 24px;
    z-index: 150;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--tp-whatsapp);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(var(--tp-whatsapp-rgb), .4);
    transition: transform .2s;
}

.tp-whatsapp-float:hover {
    transform: scale(1.08);
}


/* §  SERVICE BLOCK NUMBERS (services-section-three)
   Template default is an almost-invisible #edf0f5 watermark number, and on
   hover switches to the template's own red (#fd6667) — clashes with the
   brand-blue hover background. Brand-tint it instead: visible at rest,
   white (matching the rest of the card's hover text) on hover. */

.service-block-three .icon-box:before {
    color: rgba(var(--tp-primary-rgb), .18);
}

.service-block-three .inner-box:hover .icon-box:before {
    color: rgba(255, 255, 255, .45);
}


/* §  ABOUT "CALL NOW" ICON (about-section-four .info-btn)
   Template only recolours the text label on hover, leaving the icon circle
   static. Give the icon itself a hover state to match — brand-blue circle,
   white icon — the same look the header's own call icon already has. */

.about-section-four .content-column .info-btn:hover i {
    background-color: var(--tp-primary);
    color: #fff;
}


/* §  PAGE HEADER / BREADCRUMB (includes/web/page-header.blade.php)
   Template's 230px/110px padding assumes the header floats absolutely over
   it, like on the home hero — inner pages render it in-flow (.is-solid)
   instead, already pushing this section down, so it owns its own smaller
   spacing rather than fighting that for room. */

.page-title {
    padding: 170px 0 120px;
    min-height: 360px;
}

/* Brand navy scrim, same token as the hero, instead of the template's flat
   black — reads as this site, not a generic template page. */
.page-title:before {
    background: linear-gradient(160deg,
            rgba(var(--tp-primary-deep-rgb), .90) 0%,
            rgba(var(--tp-primary-deep-rgb), .78) 100%);
    opacity: 1;
}

.page-title .title {
    text-shadow: 0 2px 24px rgba(0, 0, 0, .18);
}

@media only screen and (max-width: 768px) {
    .page-title {
        padding: 120px 0 80px;
        min-height: 0;
    }
}

/* Item order and the list's own left/right position follow the page's
   normal RTL flow (same as the <h1> above it) — only the separator glyph
   is chosen per-locale, in page-header.blade.php. */
.page-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.page-breadcrumb li {
    margin: 0 !important;
    padding: 0 !important;
    opacity: .8;
}

/* Kill the vendor's own separator — its own Font-Awesome-only ":after" glyph
   would otherwise still render next to our explicit .page-breadcrumb-sep
   list item (a real element now, not a pseudo-element), doubling it up. */
.page-breadcrumb li:after {
    content: none;
}

.page-breadcrumb li a {
    opacity: .95;
}

.page-breadcrumb li.is-current {
    opacity: 1;
    font-weight: 600;
}

.page-breadcrumb li.page-breadcrumb-sep {
    display: flex;
    align-items: center;
    opacity: .55;
    font-size: 18px;
    line-height: 1;
}


/* §  FAQ ACCORDION (web/faqs.blade.php)
   Sits right under the page-header banner above, so it only needs a light
   top gap (the banner already supplies its own bottom padding) — a full
   section-rhythm top padding here on top of that was the other half of
   the "huge gap". Bottom keeps the theme's standard rhythm (matches
   .services-section, 120px) since a full section follows it (the footer).
   The template's expand/collapse icon is a single Font-Awesome glyph swapped
   via a ":before" content override; this project uses Boxicons instead, so
   two stacked icons are toggled with plain CSS off the same ".active" class
   script.js already applies — no JS changes needed. */

.faq-section {
    padding: 40px 0 120px;
}

@media only screen and (max-width: 768px) {
    .faq-section {
        padding: 30px 0 80px;
    }
}

.accordion-box .block .acc-btn .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.accordion-box .block .acc-btn.active .icon:before {
    content: none;
}

.accordion-box .block .acc-btn .icon .icon-minus {
    display: none;
}

.accordion-box .block .acc-btn.active .icon .icon-plus {
    display: none;
}

.accordion-box .block .acc-btn.active .icon .icon-minus {
    display: inline-block;
}

/* "Still have questions?" card beside the accordion; sticks below the header while scrolling. */
.tp-faq-help {
    position: sticky;
    top: 120px;
    padding: 45px 35px;
    border-radius: 20px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--theme-color2), var(--theme-color1));
    box-shadow: 0 20px 40px rgba(10, 104, 255, .2);
}
.tp-faq-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 20px;
    border-radius: 50%;
    font-size: 38px;
    background: rgba(255, 255, 255, .15);
}
.tp-faq-help h3 {
    font-size: 30px;
    color: #fff;
    margin-bottom: 10px;
}
.tp-faq-help p {
    color: rgba(255, 255, 255, .85);
    margin-bottom: 30px;
}
@media only screen and (max-width: 991px) {
    .tp-faq-help {
        position: static;
        margin-top: 30px;
    }
}


/* §  LEGAL CONTENT (web/legal/show.blade.php)
   Same top/bottom rhythm as .faq-section, immediately below — light gap
   under the page-header banner, full section rhythm before the footer.
   Long-form admin-authored HTML (Privacy Policy / Terms of Use) with no
   ready-made prose style in the vendored theme worth reusing (its own
   .blog-details__content is a single, almost-empty rule) — small custom
   typography block instead, centred to a comfortable reading width. */

.legal-section {
    padding: 40px 0 120px;
}

@media only screen and (max-width: 768px) {
    .legal-section {
        padding: 30px 0 80px;
    }
}

.legal-content {
    color: var(--tp-text-dark);
    font-size: 16px;
    line-height: 1.8;
}

/* Only the no-sidebar fallback (a future legal page with no <h3> sections,
   see $hasToc in the view) caps and centers its own reading width — with
   the sidebar present, the Bootstrap column already sets a sensible width. */
.legal-content-solo {
    max-width: 760px;
    margin: 0 auto;
}

.legal-content .legal-updated {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--tp-border);
    color: var(--tp-text-muted);
    font-size: 14px;
}

/* All six levels, not just h3: the admin's TinyMCE offers the full
   Paragraph/Heading 1-6 dropdown with nothing restricting it, so a section
   can arrive as any of them (see Web\LegalPageController::tableOfContents). */
.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content h4,
.legal-content h5,
.legal-content h6 {
    position: relative;
    margin-top: 2.5rem;
    margin-bottom: .75rem;
    padding-left: 1rem;
    color: var(--tp-primary-deep);
    font-weight: 700;
    scroll-margin-top: 110px; /* clears the fixed header (see .tp-header-scrolled) when a TOC link jumps here */
}

.legal-content h1 { font-size: 28px; }
.legal-content h2 { font-size: 25px; }
.legal-content h3 { font-size: 22px; }
.legal-content h4 { font-size: 19px; }
.legal-content h5 { font-size: 17px; }
.legal-content h6 { font-size: 16px; }

.legal-content h1:before,
.legal-content h2:before,
.legal-content h3:before,
.legal-content h4:before,
.legal-content h5:before,
.legal-content h6:before {
    content: "";
    position: absolute;
    left: 0;
    top: .15em;
    bottom: .15em;
    width: 3px;
    border-radius: 2px;
    background: var(--tp-primary);
}

/* The heading right after the "last updated" line — whichever level it
   happens to be — shouldn't carry a top margin. `h3:first-of-type` only
   matched the first h3, which misses the mark once levels are mixed. */
.legal-content .legal-updated + * {
    margin-top: 0;
}

.legal-content p {
    margin-bottom: 1.25rem;
}

.legal-content p:last-child {
    margin-bottom: 0;
}

/* §  LEGAL TABLE OF CONTENTS (sticky sidebar, .legal-toc-link.active toggled
   by the scrollspy in tripaure-web.js) */

.legal-toc {
    position: sticky;
    top: 110px;
}

.legal-toc-label {
    margin-bottom: 1rem;
    color: var(--tp-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.legal-toc-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal-toc-link {
    display: block;
    padding: .5rem 0 .5rem 1rem;
    border-left: 2px solid var(--tp-border);
    color: var(--tp-text-muted);
    font-size: 14px;
    text-decoration: none;
    transition: color .2s, border-color .2s;
}

.legal-toc-link:hover {
    color: var(--tp-text-dark);
}

.legal-toc-link.active {
    border-left-color: var(--tp-primary);
    color: var(--tp-primary);
    font-weight: 600;
}

/* h1-h3 read as peer sections (an admin picks one level and sticks to it);
   anything deeper is a sub-clause, so step it in rather than listing it as
   another top-level section. */
.legal-toc-link[data-level="4"],
.legal-toc-link[data-level="5"],
.legal-toc-link[data-level="6"] {
    padding-left: 1.75rem;
    font-size: 13px;
}

@media (max-width: 991px) {
    .legal-toc {
        position: static;
        margin-bottom: 2.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--tp-border);
    }
}


/* §  RTL OVERRIDES */

/* Arabic renders in Cairo, not the Latin-only Poppins, and needs more line-height. */
[dir="rtl"] body,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    font-family: var(--tp-font-ar);
}

[dir="rtl"] body {
    line-height: 1.9;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    line-height: 1.2;
}

/* Legal content accent bar and TOC active-indicator both read left-to-right
   by default (border/bar on the left) — flip to the trailing edge in RTL,
   for every heading level the admin might use, not just h3. */
[dir="rtl"] .legal-content h1,
[dir="rtl"] .legal-content h2,
[dir="rtl"] .legal-content h3,
[dir="rtl"] .legal-content h4,
[dir="rtl"] .legal-content h5,
[dir="rtl"] .legal-content h6 {
    padding-left: 0;
    padding-right: 1rem;
}

[dir="rtl"] .legal-content h1:before,
[dir="rtl"] .legal-content h2:before,
[dir="rtl"] .legal-content h3:before,
[dir="rtl"] .legal-content h4:before,
[dir="rtl"] .legal-content h5:before,
[dir="rtl"] .legal-content h6:before {
    left: auto;
    right: 0;
}

[dir="rtl"] .legal-toc-link {
    padding: .5rem 1rem .5rem 0;
    border-left: none;
    border-right: 2px solid var(--tp-border);
}

[dir="rtl"] .legal-toc-link.active {
    border-right-color: var(--tp-primary);
}

[dir="rtl"] .legal-toc-link[data-level="4"],
[dir="rtl"] .legal-toc-link[data-level="5"],
[dir="rtl"] .legal-toc-link[data-level="6"] {
    padding-left: 0;
    padding-right: 1.75rem;
}

/* §  CONTACT PAGE — the Amiso template ships .contact-details__info and
   .team-contact-form already (style.css); these are Tripaure's overrides. */

/* Brand-remap the icon circles onto our theme colours, and guard against a
   long wrapped address squashing the circle into an oval (flex-shrink:0 +
   min-width:0 — the template sets neither). */
.contact-details__info li .icon {
    background-color: var(--tp-accent-light);
    flex-shrink: 0;
}
.contact-details__info li .text {
    min-width: 0;
}
.contact-details__info li .icon span {
    color: var(--tp-primary);
}
.contact-details__info li:hover .icon {
    background-color: var(--tp-primary);
}
.contact-details__info li:hover .icon span {
    color: #fff;
}

/* No map ($hasMap false) means this column is full-width — lay the three
   items out as a row instead of a stack. flex-wrap alone re-stacks on
   mobile, no media query needed. */
.contact-details__info--row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.contact-details__info--row li {
    flex: 1 1 260px;
    margin-top: 0;
}

.team-contact-form textarea {
    min-height: 180px;
    resize: vertical;
}

/* The template hardcodes the map iframe's height="550" attribute — keep it
   from dwarfing the info column on tablet by sizing the wrapper instead. */
.contact-details__map {
    position: relative;
    width: 100%;
    min-height: 350px;
    height: 100%;
}
.contact-details__map iframe {
    width: 100%;
    height: 100%;
    min-height: 350px;
    border: 0;
}

@media (min-width: 992px) {
    .contact-details__map iframe {
        min-height: 550px;
    }
}

/* .contact-details__info li .text has a hardcoded margin-left (style.css) —
   the project swaps in a separate style-rtl.css rather than transforming, so
   the gap needs its own flip here. */
[dir="rtl"] .contact-details__info li .text {
    margin-left: 0;
    margin-right: 30px;
}

/* Section eyebrow: a "route" marker (pickup dot + line) replaces the template's "//". */
.sec-title .sub-title {
    padding-inline-start: 34px;
}
.sec-title .sub-title::before {
    content: "";
    top: 50%;
    width: 24px;
    height: 8px;
    letter-spacing: 0;
    background:
        radial-gradient(circle, var(--theme-color2) 3px, transparent 3.5px) left center / 8px 8px no-repeat,
        linear-gradient(var(--theme-color2), var(--theme-color2)) 11px center / 13px 2px no-repeat;
    transform: translateY(-50%);
}
/* Dot stays on the reading-start side. */
[dir="rtl"] .sec-title .sub-title::before {
    transform: translateY(-50%) scaleX(-1);
}

/* ── About page ──────────────────────────────────────────────────────── */

/* Light grey band (matches the home page) with the admin's stats_bg_image
   fading in from the left. */
.tp-about-stats {
    padding-bottom: 120px !important;
}
.tp-about-stats .bg-image {
    background: #e3e8ef;
}
.tp-about-stats .bg-image::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 60%;
    background: linear-gradient(to right, rgba(227, 232, 239, .35), #e3e8ef), var(--tp-stats-photo, none) center / cover no-repeat;
}
/* Arabic puts the counter on the right — mirror the photo to match. */
[dir="rtl"] .tp-about-stats .bg-image {
    transform: scaleX(-1);
}
/* Stacked layout on small screens — the photo spans the band, faded evenly. */
@media (max-width: 767.98px) {
    .tp-about-stats .bg-image::before {
        width: 100%;
        background: linear-gradient(rgba(227, 232, 239, .85), rgba(227, 232, 239, .85)), var(--tp-stats-photo, none) center / cover no-repeat;
    }
}
.tp-about-stats .upper-box {
    border-bottom-color: rgba(13, 27, 42, .1);
}
.tp-about-stats .upper-box .text-column {
    border-color: rgba(13, 27, 42, .1);
}
.tp-about-stats .upper-box .count-box .title {
    color: var(--theme-color1);
}
.tp-about-stats .upper-box .text {
    color: #5b6472;
}

/* Icon was absolutely placed at a fixed top offset, so it sat below the
   text's centre; flex centres it and flips for RTL on its own. */
.about-section .experience .inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
}
.about-section .experience .icon {
    position: static;
    line-height: 1;
}
.tp-about-stats .upper-box .count-box .title {
    padding: 0;
}

/* Destination cards keep the template's project-block as-is; photos of any
   shape are just cropped to its 270x300 card. */
.tp-about-stats .project-block .image-box .image img,
.tp-about-stats .project-block .image-box .image.tp-img-placeholder {
    aspect-ratio: 270 / 300;
    object-fit: cover;
}
.tp-about-stats .project-block .info-box .cat {
    display: block;
    font-size: 14px;
    color: var(--tp-text-muted);
}

/* No hover on touch screens — show the name panel from the start. */
@media (max-width: 991.98px) {
    .tp-about-stats .project-block .info-box {
        opacity: 1;
        visibility: visible;
        bottom: 20px;
    }
}

/* The template's photo is a wide 810px shot; any admin upload is cropped to that shape. */
.features-section .image-column .image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.features-section .image-column .image.tp-img-placeholder {
    aspect-ratio: 4 / 3;
}
/* The template sizes these photos by their pixel width (460x494 and 200x254);
   pin those shapes so any upload keeps the same overlap layout. */
.about-section .image-column .image-1 img,
.about-section .image-column .image-1.tp-img-placeholder {
    aspect-ratio: 460 / 494;
    object-fit: cover;
}
.about-section .image-column .image-2 {
    width: 43%;
}
.about-section .image-column .image-2 img,
.about-section .image-column .image-2.tp-img-placeholder {
    aspect-ratio: 200 / 254;
    object-fit: cover;
}

/* ── Services (page + home section) ──────────────────────────────────── */
/* "Floating panel" cards: photo on top, a white panel overlapping its bottom
   edge. A transparent button covers the whole card and opens the modal. */
.tp-services-section {
    position: relative;
    padding: 120px 0;
}

.tp-services-home {
    padding-bottom: 110px;
}

.tp-services-intro {
    max-width: 640px;
    margin: 0 auto;
}

.tp-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--tp-radius-lg);
}

.tp-service-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--tp-radius-lg);
    overflow: hidden;
    background: var(--tp-accent-light);
}

.tp-service-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(var(--tp-primary-deep-rgb), .45) 100%);
}

.tp-service-card__media img,
.tp-service-card__media .tp-img-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

.tp-service-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    margin: -64px 18px 0;
    padding: 34px 26px 26px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 14px 40px rgba(var(--tp-primary-deep-rgb), .09);
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
}

/* Brand bar that grows along the panel's bottom edge on hover. */
.tp-service-card__body::before {
    content: "";
    position: absolute;
    inset-inline-start: 26px;
    bottom: 0;
    width: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--tp-primary);
    transition: width .45s ease;
}

.tp-service-card__num {
    position: absolute;
    top: -22px;
    inset-inline-end: 24px;
    display: grid;
    place-items: center;
    min-width: 48px;
    height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    background: var(--tp-primary);
    color: #fff;
    font-family: var(--tp-font-heading);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: 0 10px 24px rgba(var(--tp-primary-rgb), .35);
    transition: transform .45s ease, background-color .3s ease;
}

.tp-service-card__title {
    margin: 0 0 10px;
    padding-inline-end: 56px;
    font-family: var(--tp-font-heading);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tp-text-dark);
}

.tp-service-card__text {
    display: -webkit-box;
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--tp-text-muted);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tp-service-card__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: var(--tp-primary);
    font-weight: 700;
    font-size: 15px;
}

.tp-service-card__more i {
    font-size: 20px;
    transition: transform .3s ease;
}

.tp-service-card__link {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--tp-radius-lg);
    background: transparent;
    cursor: pointer;
}

.tp-service-card__link:focus-visible {
    outline: 3px solid rgba(var(--tp-primary-rgb), .55);
    outline-offset: 6px;
}

.tp-service-card:hover .tp-service-card__media img,
.tp-service-card:focus-within .tp-service-card__media img {
    transform: scale(1.08);
}

.tp-service-card:hover .tp-service-card__body,
.tp-service-card:focus-within .tp-service-card__body {
    transform: translateY(-8px);
    box-shadow: 0 26px 56px rgba(var(--tp-primary-deep-rgb), .16);
}

.tp-service-card:hover .tp-service-card__body::before,
.tp-service-card:focus-within .tp-service-card__body::before {
    width: calc(100% - 52px);
}

.tp-service-card:hover .tp-service-card__num {
    transform: translateY(-4px) rotate(-4deg);
    background: var(--tp-primary-deep);
}

.tp-service-card:hover .tp-service-card__more i {
    transform: translateX(5px);
}

[dir="rtl"] .tp-service-card:hover .tp-service-card__more i {
    transform: translateX(-5px);
}

@media (max-width: 767.98px) {
    .tp-services-section {
        padding: 80px 0;
    }

    .tp-service-card__body {
        margin: -48px 14px 0;
        padding: 30px 22px 22px;
    }
}

/* ── Service modal ── */
.tp-service-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: var(--tp-radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(var(--tp-primary-deep-rgb), .3);
}

.tp-service-modal__close {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--tp-text-dark);
    font-size: 26px;
    box-shadow: 0 6px 18px rgba(var(--tp-primary-deep-rgb), .18);
    transition: transform .25s ease, background-color .25s ease, color .25s ease;
}

.tp-service-modal__close:hover {
    background: var(--tp-primary);
    color: #fff;
    transform: rotate(90deg);
}

.tp-service-modal__media {
    margin: 0;
    aspect-ratio: 2 / 1;
    background: var(--tp-accent-light);
}

.tp-service-modal__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tp-service-modal__content {
    padding: 34px 40px 12px;
}

.tp-service-modal__num {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(var(--tp-primary-rgb), .1);
    color: var(--tp-primary);
    font-family: var(--tp-font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
}

.tp-service-modal__title {
    margin: 0 0 16px;
    font-family: var(--tp-font-heading);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--tp-text-dark);
}

.tp-service-modal__text {
    font-size: 16px;
    line-height: 1.85;
    color: rgba(var(--tp-text-dark-rgb), .75);
    white-space: pre-line;
}

.tp-service-modal .modal-footer {
    gap: 12px;
    padding: 20px 40px 30px;
    border-top: 0;
}

.tp-service-modal .modal-footer > * {
    margin: 0;
}

.tp-service-modal__dismiss {
    background: transparent;
    border-color: var(--tp-border);
    color: var(--tp-text-dark);
}

.tp-service-modal__dismiss:hover {
    border-color: var(--tp-primary);
    color: var(--tp-primary);
}

@media (max-width: 575.98px) {
    .tp-service-modal .modal-content {
        border-radius: 0;
    }

    .tp-service-modal__media {
        aspect-ratio: 4 / 3;
    }

    .tp-service-modal__content {
        padding: 26px 20px 8px;
    }

    .tp-service-modal__title {
        font-size: 23px;
    }

    .tp-service-modal .modal-footer {
        flex-wrap: nowrap;
        padding: 14px 20px 20px;
        border-top: 1px solid var(--tp-border);
    }

    .tp-service-modal .modal-footer > * {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tp-service-card *,
    .tp-service-card *::before,
    .tp-service-modal__close {
        transition: none !important;
    }

    .tp-service-card:hover .tp-service-card__media img,
    .tp-service-card:focus-within .tp-service-card__media img,
    .tp-service-card:hover .tp-service-card__body,
    .tp-service-card:focus-within .tp-service-card__body {
        transform: none;
    }
}

/* ── Home reels ─────────────────────────────────────────────────────── */
.tp-reels-section {
    position: relative;
    padding: 100px 0;
    background-color: var(--theme-color3);
}

.tp-reels-section .sec-title {
    margin-bottom: 30px;
}

.tp-reel {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--tp-primary-deep);
}

.tp-reel video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tp-reel__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border: 0;
    border-radius: 50%;
    background-color: var(--theme-color2);
    color: #fff;
    font-size: 34px;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .25);
    transition: transform .3s ease;
}

.tp-reel__play:hover,
.tp-reel__play:focus-visible {
    transform: scale(1.1);
}

.tp-reel.is-playing .tp-reel__play {
    display: none;
}

.tp-reels-carousel .owl-dots {
    margin-top: 25px;
    text-align: center;
}

@media (max-width: 991.98px) {
    .tp-reels-section {
        padding: 70px 0;
    }
}