/* ===================================================================== Happy Trade Elements — Pro widgets (v2) All selectors are scoped under .ht-w (or .ht-portal for overlays moved to ). ===================================================================== */ /* ---------- overlay widgets: no page space, editor notes ---------- */ .ht-w.htw-popup,.ht-w.htw-age-gate,.ht-w.htw-sticky-bar,.ht-w.htw-scroll-progress{--ht-pad:0;background:none;overflow:visible} .ht-w .ht-editor-note{display:none} body.elementor-editor-active .ht-w .ht-editor-note{display:flex;gap:8px;align-items:center;justify-content:center;padding:14px;margin:8px;border:1.5px dashed rgba(228,169,29,.6);border-radius:12px;background:rgba(228,169,29,.08);color:#8a5a0b;font:700 14px "Cairo",sans-serif} /* ---------- hotspots ---------- */ .ht-w .ht-hotspots{position:relative;border-radius:calc(var(--ht-radius) + 6px);overflow:visible;box-shadow:var(--ht-shadow)} .ht-w .ht-hs-img{width:100%;border-radius:calc(var(--ht-radius) + 6px)} .ht-w .ht-hs{position:absolute;transform:translate(-50%,-50%);z-index:2} .ht-w .ht-hs-dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ht-grad);color:#2A1705;box-shadow:0 0 0 6px rgba(248,223,59,.25);position:relative} .ht-w .ht-hs-dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(248,223,59,.7);animation:htPulse 2.2s infinite} .ht-w .ht-hs-dot .ht-ico{width:20px;height:20px} .ht-w .ht-hs-tip{position:absolute;top:50%;width:240px;transform:translateY(-50%) scale(.92);opacity:0;pointer-events:none;transition:.25s;background:#1F1A17;color:#E9DCC8;border:1px solid rgba(228,169,29,.35);border-radius:14px;padding:14px 16px;box-shadow:0 20px 40px -15px rgba(0,0,0,.7);text-align:right} .ht-w .ht-hs.is-right .ht-hs-tip{left:58px} .ht-w .ht-hs.is-left .ht-hs-tip{right:58px} .ht-w .ht-hs-tip strong{display:block;color:#F8DF3B;font-size:16px;margin:0 0 4px} .ht-w .ht-hs-tip .ht-text{color:#E9DCC8;font-size:14px;display:block} .ht-w .ht-hs:hover .ht-hs-tip,.ht-w .ht-hs.is-open .ht-hs-tip,.ht-w .ht-hs:focus-within .ht-hs-tip{opacity:1;transform:translateY(-50%) scale(1);pointer-events:auto} .ht-w [data-ht-hotspots="click"] .ht-hs:hover:not(.is-open) .ht-hs-tip{opacity:0;pointer-events:none} @media (max-width:640px){.ht-w .ht-hs-tip{width:190px}.ht-w .ht-hs-dot{width:34px;height:34px}.ht-w .ht-hs.is-right .ht-hs-tip{left:44px}.ht-w .ht-hs.is-left .ht-hs-tip{right:44px}} /* ---------- before / after ---------- */ .ht-w .ht-ba{position:relative;aspect-ratio:var(--ht-ratio,16/7);border-radius:calc(var(--ht-radius) + 6px);overflow:hidden;box-shadow:var(--ht-shadow);direction:ltr;user-select:none} .ht-w .ht-ba-img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover} .ht-w .ht-ba-top{position:absolute;inset:0;clip-path:inset(0 0 0 var(--ht-ba,50%));z-index:1} .ht-w .ht-ba-handle{position:absolute;top:0;bottom:0;left:var(--ht-ba,50%);width:4px;margin-left:-2px;background:var(--ht-grad);z-index:3;display:flex;align-items:center;justify-content:center} .ht-w .ht-ba-handle .ht-ico{width:18px;height:18px;color:#2A1705} .ht-w .ht-ba-handle::before{content:"";position:absolute;width:52px;height:52px;border-radius:50%;background:var(--ht-grad);box-shadow:0 10px 30px -8px rgba(0,0,0,.6)} .ht-w .ht-ba-handle .ht-ico{position:relative} .ht-w .ht-ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0} .ht-w .ht-ba-label{position:absolute;bottom:16px;z-index:2;background:rgba(20,17,16,.72);color:#F8DF3B;border-radius:999px;padding:6px 14px;font:700 14px var(--ht-font-h)} .ht-w .ht-ba-lb{right:16px}.ht-w .ht-ba-la{left:16px} /* ---------- content toggle ---------- */ .ht-w .ht-toggle-sw{position:relative;display:flex;width:max-content;margin:0 auto 40px;padding:6px;border-radius:999px;background:var(--ht-card);border:1px solid var(--ht-line);box-shadow:var(--ht-shadow)} .ht-w .ht-toggle-sw button{position:relative;z-index:2;min-width:140px;padding:12px 24px;border-radius:999px;font:800 16px var(--ht-font-h);color:var(--ht-title);transition:color .3s} .ht-w .ht-toggle-sw button.is-on{color:#2A1705} .ht-w .ht-toggle-knob{position:absolute;z-index:1;top:6px;bottom:6px;right:6px;width:calc(50% - 6px);border-radius:999px;background:var(--ht-grad);transition:transform .35s cubic-bezier(.3,.7,.2,1)} .ht-w .ht-toggle.is-2 .ht-toggle-knob{transform:translateX(-100%)} .ht-w .ht-toggle-pane.is-on{animation:htRise .5s both} .ht-w .ht-prose-body h3{font-size:clamp(26px,3vw,38px)} /* ---------- progress ---------- */ .ht-w .ht-bars{display:grid;gap:22px} .ht-w .ht-bar-top{display:flex;justify-content:space-between;margin-bottom:8px} .ht-w .ht-bar-top .ht-title{font-size:16px;font-weight:700;margin:0} .ht-w .ht-bar-top b{font:900 16px var(--ht-font-h);color:var(--ht-amber)} .ht-w .ht-bar-track{height:12px;border-radius:12px;background:rgba(63,36,13,.08);overflow:hidden} .ht-w.ht-theme-dark .ht-bar-track,.ht-w.ht-theme-ink .ht-bar-track{background:rgba(255,255,255,.08)} .ht-w .ht-bar-track i{display:block;height:100%;width:0;border-radius:12px;background:var(--ht-grad);transition:width 1.6s cubic-bezier(.2,.7,.2,1)} .ht-w .is-in .ht-bar-track i,.ht-w .ht-bar-track i.is-in{width:var(--v)} .ht-w .ht-ring{position:relative;text-align:center} .ht-w .ht-ring svg{width:160px;height:160px;transform:rotate(-90deg)} .ht-w .ht-ring circle{fill:none;stroke-width:10} .ht-w .ht-ring-bg{stroke:rgba(63,36,13,.08)} .ht-w .ht-ring-fg{stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1)} .ht-w .ht-ring.is-in .ht-ring-fg{stroke-dashoffset:calc(326.7 - 326.7 * var(--v) / 100)} .ht-w .ht-ring b{position:absolute;top:58px;inset-inline:0;font:900 34px/1 var(--ht-font-h)!important;color:var(--ht-title)} .ht-w .ht-ring .ht-text{display:block;margin-top:10px;font:700 15px var(--ht-font-h)} /* ---------- data table ---------- */ .ht-w .ht-dt-search{display:flex;align-items:center;gap:8px;max-width:360px;margin:0 0 16px auto;padding:0 14px;border-radius:999px;background:var(--ht-card);border:1px solid var(--ht-line);color:var(--ht-text)} .ht-w .ht-dt-search input{border:0!important;box-shadow:none!important;background:none!important;padding:12px 0!important} .ht-w .ht-table{width:100%;border-collapse:collapse;margin:0;min-width:560px} .ht-w .ht-table th{background:#1F1A17;color:#F8DF3B;font:800 15px var(--ht-font-h);padding:15px 18px;text-align:right;border:0;white-space:nowrap} .ht-w .ht-table th:first-child{border-start-start-radius:var(--ht-radius)} .ht-w .ht-table td{padding:14px 18px;border:0;border-bottom:1px solid var(--ht-line);color:var(--ht-title);background:none} .ht-w .ht-table.is-striped tbody tr:nth-child(even) td{background:rgba(228,169,29,.06)} .ht-w .ht-table tbody tr:hover td{background:rgba(228,169,29,.12)} .ht-w [data-sort] th{cursor:pointer;user-select:none} .ht-w .ht-sort{display:inline-block;width:0;height:0;margin-inline-start:8px;border:5px solid transparent;border-top-color:currentColor;opacity:.4;vertical-align:middle} .ht-w th.is-asc .ht-sort{border-top-color:transparent;border-bottom-color:currentColor;opacity:1;margin-top:-6px} .ht-w th.is-desc .ht-sort{opacity:1} .ht-w .ht-dt-empty{text-align:center;padding:18px;opacity:.7} /* ---------- hours ---------- */ .ht-w .ht-hours{display:grid;gap:8px;margin-top:20px!important} .ht-w .ht-hours li{display:flex;justify-content:space-between;padding:13px 18px;border-radius:14px;background:var(--ht-card);border:1px solid var(--ht-line);color:var(--ht-title)} .ht-w .ht-hours b{font-family:var(--ht-font-h);font-weight:700} .ht-w .ht-hours em{font-style:normal;color:#e27b6a} .ht-w .ht-hours li.is-today{background:var(--ht-grad);color:#2A1705;border-color:transparent;font-weight:800} .ht-w .ht-hours li.is-today span::after{content:" • اليوم";font-size:13px} /* ---------- team ---------- */ .ht-w .ht-member{text-align:center;padding:28px 20px;transition:transform .3s} .ht-w .ht-member:hover{transform:translateY(-6px)} .ht-w .ht-member-img{width:120px;height:120px;margin:0 auto 16px;border-radius:50%;padding:5px;background:var(--ht-grad)} .ht-w .ht-member-img img{width:100%;height:100%!important;object-fit:cover;border-radius:50%} .ht-w .ht-avatar-lg{width:100%!important;height:100%!important;background:#1F1A17!important;color:#F8DF3B!important} .ht-w .ht-avatar-lg .ht-ico{width:46px;height:46px} .ht-w .ht-member h3{font-size:19px;margin-bottom:2px} .ht-w .ht-member-role{display:block;font:700 13.5px var(--ht-font-h);color:var(--ht-amber);margin-bottom:10px} .ht-w .ht-member p{font-size:15px} /* ---------- logo grid ---------- */ .ht-w .ht-logo-cell{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;border-radius:var(--ht-radius);background:var(--ht-card);border:1px solid var(--ht-line);transition:.3s} .ht-w .ht-logo-cell img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px} .ht-w .ht-logos.is-circle .ht-logo-cell{border-radius:50%;aspect-ratio:1/1;justify-content:center;padding:10px} .ht-w .ht-logos.is-circle .ht-logo-cell img{border-radius:50%} .ht-w .ht-logos.is-gray .ht-logo-cell img{filter:grayscale(1) contrast(.9);opacity:.75;transition:.4s} .ht-w .ht-logos.is-gray .ht-logo-cell:hover img{filter:none;opacity:1} .ht-w .ht-logo-cell:hover{border-color:var(--ht-gold);transform:translateY(-4px)} .ht-w .ht-logo-cell small{font:700 13px var(--ht-font-h)} /* ---------- popup / age gate / sticky bar / scroll progress (portaled to body) ---------- */ .ht-portal{direction:rtl;text-align:right;font-family:"Tajawal","Cairo",sans-serif;--ht-grad:linear-gradient(135deg,#F8DF3B 0%,#E4A91D 48%,#C87A11 100%)} .ht-portal *{box-sizing:border-box} .ht-portal img{max-width:100%;display:block} .ht-portal button{font-family:inherit;cursor:pointer} .ht-pop{position:fixed;inset:0;z-index:100050;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(12,8,5,.72);backdrop-filter:blur(4px);opacity:0;transition:opacity .35s} .ht-pop[hidden]{display:none} .ht-pop.is-on{opacity:1} .ht-pop-box{position:relative;display:grid;grid-template-columns:1fr 1.1fr;width:min(820px,100%);max-height:92vh;overflow:auto;border-radius:24px;background:#1F1A17;border:1px solid rgba(228,169,29,.35);box-shadow:0 40px 80px -30px rgba(0,0,0,.9);transform:translateY(20px) scale(.97);transition:transform .45s cubic-bezier(.2,.7,.2,1)} .ht-pop.is-on .ht-pop-box{transform:none} .ht-pop-sm .ht-pop-box{width:min(560px,100%)}.ht-pop-lg .ht-pop-box{width:min(1000px,100%)} .ht-pop-img img{width:100%;height:100%;object-fit:cover;min-height:320px} .ht-pop-body{padding:38px 32px;color:#E9DCC8;display:flex;flex-direction:column;justify-content:center} .ht-pop-body .ht-eyebrow{display:inline-flex;gap:8px;align-items:center;color:#F8DF3B;font:700 14px "Cairo",sans-serif;margin-bottom:8px} .ht-pop-body .ht-title{font:800 clamp(26px,3vw,36px)/1.3 "Cairo",sans-serif;color:#FFF8EA;margin:0 0 10px} .ht-pop-body .ht-text{margin:0 0 20px;color:#E9DCC8} .ht-pop-x{position:absolute;top:14px;left:14px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(228,169,29,.45);background:rgba(20,17,16,.6);color:#F8DF3B;display:grid;place-items:center;z-index:2;padding:0} .ht-pop-x .ht-ico,.ht-sticky-x .ht-ico{width:20px;height:20px} @media (max-width:640px){.ht-pop-box{grid-template-columns:1fr}.ht-pop-img img{min-height:0;max-height:220px}.ht-pop-body{padding:26px 22px}} .ht-code-dark{border-color:rgba(248,223,59,.7)!important;color:#F8DF3B!important} .ht-portal .ht-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .ht-portal .ht-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:999px;font:700 16px "Cairo",sans-serif;border:2px solid transparent;text-decoration:none;cursor:pointer} .ht-portal .ht-btn-gold{background:var(--ht-grad);color:#2A1705} .ht-portal .ht-btn-dark{background:#1F1A17;color:#F8DF3B} .ht-portal .ht-btn-ghost{border-color:rgba(255,248,234,.45);color:#FFF8EA;background:transparent} .ht-portal .ht-btn .ht-ico{width:18px;height:18px} .ht-portal .ht-code{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 18px;border-radius:999px;border:2px dashed;background:rgba(248,223,59,.08);font:800 15px "Cairo",sans-serif;letter-spacing:.06em} .ht-portal .ht-code small{font-size:12px;opacity:.8;letter-spacing:0} .ht-portal .ht-code.is-copied small::after{content:" ✓"} .ht-portal .ht-code .ht-ico{width:18px;height:18px} .ht-agegate{position:fixed;inset:0;z-index:100100;display:flex;align-items:center;justify-content:center;padding:18px;background:radial-gradient(circle at 50% 30%,rgba(63,36,13,.97),rgba(12,8,5,.99))} .ht-agegate[hidden]{display:none} .ht-agegate-box{width:min(520px,100%);text-align:center;color:#E9DCC8} .ht-agegate-logo{max-height:150px;width:auto;margin:0 auto 6px} .ht-agegate-18{display:inline-grid;place-items:center;width:78px;height:78px;border-radius:50%;background:var(--ht-grad);color:#2A1705;font:900 26px "Cairo",sans-serif;margin-bottom:14px} .ht-agegate .ht-title{font:800 30px/1.3 "Cairo",sans-serif;color:#FFF8EA;margin:0 0 10px} .ht-agegate .ht-text{margin:0 0 24px} .ht-agegate .ht-btns{justify-content:center} html.ht-locked,html.ht-locked body{overflow:hidden} .ht-sticky{position:fixed;inset-inline:0;bottom:0;z-index:9980;background:var(--ht-grad);box-shadow:0 -12px 30px -12px rgba(0,0,0,.45);transform:translateY(110%);transition:transform .45s cubic-bezier(.2,.7,.2,1)} .ht-sticky.is-on{transform:none} .ht-sticky-in{display:flex;align-items:center;gap:16px;min-height:70px;max-width:1240px;margin:0 auto;padding:8px 24px;color:#2A1705} .ht-sticky-ico{width:44px;height:44px;border-radius:50%;background:#1F1A17;color:#F8DF3B;display:grid;place-items:center;flex:none} .ht-sticky-ico .ht-ico{width:22px;height:22px} .ht-sticky-text{flex:1;font:800 16px "Cairo",sans-serif} .ht-sticky .ht-code{min-height:44px;border-color:#3F240D!important;color:#3F240D!important;background:rgba(255,255,255,.2)} .ht-sticky .ht-btn{min-height:46px} .ht-sticky-x{width:36px;height:36px;border-radius:50%;border:1px solid rgba(63,36,13,.35);background:none;color:#3F240D;display:grid;place-items:center;padding:0;flex:none} @media (max-width:760px){.ht-sticky-in{flex-wrap:wrap;gap:8px;padding:10px 14px}.ht-sticky-text{font-size:14px;flex-basis:calc(100% - 100px)}.ht-sticky .ht-code{display:none}.ht-sticky .ht-btn{flex:1}} .ht-sprog{position:fixed;inset-inline:0;z-index:100001;background:rgba(63,36,13,.12);pointer-events:none} .ht-sprog-top{top:0}.ht-sprog-bottom{bottom:0} .ht-sprog i{display:block;height:100%;width:0;background:var(--ht-grad);box-shadow:0 0 12px rgba(228,169,29,.7)} body.admin-bar .ht-sprog-top{top:32px} /* ---------- live search ---------- */ .ht-w .ht-live{position:relative;margin-top:22px} .ht-w .ht-live-field{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 8px;padding-inline-start:20px;border-radius:999px;background:var(--ht-card);border:1.5px solid rgba(228,169,29,.45);box-shadow:var(--ht-shadow)} .ht-w .ht-live-field>.ht-ico{color:var(--ht-gold);width:24px;height:24px} .ht-w .ht-live-field input[type=search]{flex:1;border:0!important;background:none!important;box-shadow:none!important;padding:12px 0!important;font-size:17px;color:var(--ht-title)} .ht-w .ht-live-results{position:absolute;top:calc(100% + 10px);inset-inline:0;z-index:20;background:#FFFDF8;border:1px solid var(--ht-line);border-radius:18px;box-shadow:0 30px 60px -25px rgba(0,0,0,.55);overflow:hidden;max-height:440px;overflow-y:auto} .ht-w .ht-live-item{display:flex;align-items:center;gap:14px;padding:12px 16px;color:#1F1A17!important;border-bottom:1px solid rgba(63,36,13,.08)} .ht-w .ht-live-item:hover,.ht-w .ht-live-item.is-active{background:rgba(228,169,29,.12)} .ht-w .ht-live-item img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none;background:#F2EADB} .ht-w .ht-live-item b{display:block;font:700 15px var(--ht-font-h)} .ht-w .ht-live-item small{color:#C87A11;font-weight:700} .ht-w .ht-live-msg{padding:18px;text-align:center;color:#6E6259} .ht-w .ht-live-all{display:block;text-align:center;padding:12px;font:800 14px var(--ht-font-h);color:#C87A11!important;background:#FAF7F0} .ht-w .ht-live-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px} .ht-w .ht-live-tags button{padding:7px 16px;border-radius:999px;border:1px solid var(--ht-line);color:var(--ht-title);font:700 14px var(--ht-font-h);background:var(--ht-card)} .ht-w .ht-live-tags button:hover{border-color:var(--ht-gold);color:var(--ht-gold)} .ht-w .ht-live.is-loading .ht-live-field>.ht-ico{animation:htSpin 1s linear infinite} @keyframes htSpin{to{transform:rotate(360deg)}} /* ---------- chart ---------- */ .ht-w .ht-hbars{display:grid;gap:16px} .ht-w .ht-hbar{display:grid;grid-template-columns:170px 1fr 60px;align-items:center;gap:14px} .ht-w .ht-hbar-l{font:700 15px var(--ht-font-h);color:var(--ht-title)} .ht-w .ht-hbar-t{height:30px;border-radius:10px;background:rgba(63,36,13,.07);overflow:hidden} .ht-w .ht-hbar-t i{display:block;height:100%;width:0;border-radius:10px;transition:width 1.6s cubic-bezier(.2,.7,.2,1)} .ht-w .ht-hbar.is-in .ht-hbar-t i{width:var(--v)} .ht-w .ht-hbar b{font:900 16px var(--ht-font-h);color:var(--ht-title)} @media (max-width:640px){.ht-w .ht-hbar{grid-template-columns:1fr 54px}.ht-w .ht-hbar-l{grid-column:1/-1}} .ht-w .ht-donut-wrap{display:grid;grid-template-columns:320px 1fr;gap:40px;align-items:center} .ht-w .ht-donut{width:100%;max-width:320px} .ht-w .ht-donut circle+circle{transition:stroke-dasharray 1.4s} .ht-w .ht-donut-total{font:900 30px "Cairo",sans-serif;fill:var(--ht-title)} .ht-w .ht-legend{display:grid;gap:12px} .ht-w .ht-legend li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:var(--ht-card);border:1px solid var(--ht-line);color:var(--ht-title)} .ht-w .ht-legend i{width:16px;height:16px;border-radius:5px;flex:none} .ht-w .ht-legend span{flex:1;font-weight:700} .ht-w .ht-legend b{font-family:var(--ht-font-h)} @media (max-width:760px){.ht-w .ht-donut-wrap{grid-template-columns:1fr;justify-items:center}} /* ---------- animated heading ---------- */ .ht-w .ht-ah{text-align:center} .ht-w .ht-ah .ht-title{font-size:clamp(32px,4.4vw,58px)} .ht-w .ht-ah-xl .ht-title{font-size:clamp(40px,6.4vw,86px)} .ht-w .ht-ah-md .ht-title{font-size:clamp(26px,3vw,40px)} .ht-w .ht-ah-words{display:inline-block;position:relative;min-width:1ch} .ht-w .ht-ah-words b{font-weight:900;background:var(--ht-grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block} .ht-w .ht-ah-type b::after{content:"";display:inline-block;width:3px;height:.9em;margin-inline-start:4px;background:var(--ht-gold);vertical-align:-.1em;animation:htBlink .8s steps(1) infinite} @keyframes htBlink{50%{opacity:0}} .ht-w .ht-ah-slide b.is-in{animation:htRise .55s both} .ht-w .ht-ah-fade b.is-in{animation:htFadeIn .6s both} @keyframes htFadeIn{from{opacity:0}to{opacity:1}} /* ---------- dual button ---------- */ .ht-w .ht-dual-wrap{display:flex} .ht-w .ht-jc-center{justify-content:center}.ht-w .ht-jc-start{justify-content:flex-start}.ht-w .ht-jc-end{justify-content:flex-end} .ht-w .ht-dual{position:relative;display:inline-flex;border-radius:999px;box-shadow:0 18px 34px -16px rgba(63,36,13,.7)} .ht-w .ht-dual a{display:inline-flex;align-items:center;gap:10px;min-height:58px;padding:0 34px;font:800 16px var(--ht-font-h)} .ht-w .ht-dual-a{background:var(--ht-grad);color:#2A1705!important;border-radius:0 999px 999px 0;padding-inline-end:44px!important} .ht-w .ht-dual-b{background:#1F1A17;color:#F8DF3B!important;border-radius:999px 0 0 999px;padding-inline-start:44px!important} .ht-w .ht-dual a .ht-ico{width:20px;height:20px} .ht-w .ht-dual-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#FFF8EA;color:#3F240D;display:grid;place-items:center;font:800 13px var(--ht-font-h);box-shadow:0 0 0 4px rgba(255,255,255,.3);z-index:2} @media (max-width:560px){.ht-w .ht-dual{flex-direction:column;border-radius:26px}.ht-w .ht-dual-a{border-radius:26px 26px 0 0}.ht-w .ht-dual-b{border-radius:0 0 26px 26px}.ht-w .ht-dual a{justify-content:center;padding:0 24px!important}} /* ---------- price list ---------- */ .ht-w .ht-plist{display:grid;grid-template-columns:repeat(var(--ht-cols,2),minmax(0,1fr));gap:14px 40px} @media (max-width:760px){.ht-w .ht-plist{grid-template-columns:1fr}} .ht-w .ht-plist-item{display:flex;align-items:center;gap:16px;padding:14px;border-radius:18px;transition:background .3s} .ht-w .ht-plist-item:hover{background:var(--ht-card)} .ht-w .ht-plist-img{width:74px;height:74px;border-radius:50%;object-fit:cover;flex:none;border:3px solid rgba(228,169,29,.55)} .ht-w .ht-plist-body{flex:1;min-width:0} .ht-w .ht-plist-row{display:flex;align-items:baseline;gap:10px} .ht-w .ht-plist-row .ht-title{font-size:18px;margin:0;white-space:nowrap} .ht-w .ht-plist-dots{flex:1;border-bottom:2px dotted rgba(228,169,29,.5);transform:translateY(-4px)} .ht-w .ht-plist-price{font:900 18px var(--ht-font-h);color:var(--ht-gold);white-space:nowrap} .ht-w .ht-plist .ht-text{font-size:14px;display:block;margin-top:2px} .ht-w .ht-plist .ht-badge-inline{font-size:11px;padding:2px 9px} /* ---------- image accordion ---------- */ .ht-w .ht-iacc{display:flex;gap:12px;height:var(--ht-iacc-h,480px)} .ht-w .ht-iacc-item{position:relative;flex:1;border-radius:var(--ht-radius);overflow:hidden;background:#2A1A0C center/cover no-repeat;transition:flex .7s cubic-bezier(.3,.7,.2,1);display:flex;align-items:flex-end;min-width:0} .ht-w .ht-iacc-item::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,12,5,.95),rgba(20,12,5,.1) 70%)} .ht-w .ht-iacc-item.is-on,.ht-w .ht-iacc:hover .ht-iacc-item:hover{flex:4} .ht-w .ht-iacc:hover .ht-iacc-item.is-on:not(:hover){flex:1} .ht-w .ht-iacc-cap{position:relative;padding:24px;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:6px} .ht-w .ht-iacc-n{font:900 30px var(--ht-font-h);color:var(--ht-yellow);opacity:.8} .ht-w .ht-iacc-cap .ht-title{color:#FFF8EA;font-size:24px;margin:0;white-space:nowrap} .ht-w .ht-iacc-cap .ht-text,.ht-w .ht-iacc-cap .ht-btn{opacity:0;transform:translateY(10px);transition:.4s .15s} .ht-w .ht-iacc-cap .ht-text{color:#E9DCC8} .ht-w .ht-iacc-item.is-on .ht-iacc-cap .ht-text,.ht-w .ht-iacc-item.is-on .ht-iacc-cap .ht-btn,.ht-w .ht-iacc-item:hover .ht-iacc-cap .ht-text,.ht-w .ht-iacc-item:hover .ht-iacc-cap .ht-btn{opacity:1;transform:none} .ht-w .ht-iacc:hover .ht-iacc-item.is-on:not(:hover) .ht-text,.ht-w .ht-iacc:hover .ht-iacc-item.is-on:not(:hover) .ht-btn{opacity:0} .ht-w .ht-iacc-item:not(.is-on) .ht-iacc-cap .ht-title{writing-mode:vertical-rl} .ht-w .ht-iacc-item:hover .ht-iacc-cap .ht-title{writing-mode:horizontal-tb} .ht-w .ht-iacc:hover .ht-iacc-item.is-on:not(:hover) .ht-title{writing-mode:vertical-rl} @media (max-width:760px){.ht-w .ht-iacc{flex-direction:column;height:auto}.ht-w .ht-iacc-item{min-height:110px;flex:none!important}.ht-w .ht-iacc-item.is-on{min-height:300px}.ht-w .ht-iacc-cap .ht-title{writing-mode:horizontal-tb!important}} /* ---------- coverflow ---------- */ .ht-w .ht-cf{position:relative;height:500px;perspective:1400px} .ht-w .ht-cf-stage{position:relative;height:100%;transform-style:preserve-3d} .ht-w .ht-cf-item{position:absolute;top:0;left:50%;width:300px;height:420px;margin-left:-150px;border-radius:var(--ht-radius);overflow:hidden;transition:transform .7s cubic-bezier(.3,.7,.2,1),opacity .7s,filter .7s;box-shadow:0 30px 60px -25px rgba(0,0,0,.8);background:#2A1A0C} .ht-w .ht-cf-item img{width:100%;height:100%!important;object-fit:cover} .ht-w .ht-cf-item.is-center{box-shadow:0 0 0 3px rgba(248,223,59,.7),0 40px 70px -25px rgba(0,0,0,.9)} .ht-w .ht-cf-cap{position:absolute;inset-inline:0;bottom:0;padding:16px;background:linear-gradient(0deg,rgba(20,12,5,.95),transparent);color:#FFF8EA;font:800 17px var(--ht-font-h);text-align:center} .ht-w .ht-cf .ht-nav{top:calc(50% - 45px)} @media (max-width:640px){.ht-w .ht-cf{height:420px}.ht-w .ht-cf-item{width:230px;height:340px;margin-left:-115px}} /* ---------- parallax banner ---------- */ .ht-w .ht-plx{position:relative;display:flex;align-items:center;overflow:hidden;isolation:isolate;text-align:center} .ht-w .ht-plx-bg{position:absolute;inset:-60px;background:center/cover no-repeat;z-index:-3;will-change:transform} .ht-w .ht-plx-shade{position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 50% 50%,rgba(36,22,10,.72),rgba(12,8,5,.96))} .ht-w .ht-plx-float{position:absolute;z-index:-1;width:190px;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);border:3px solid rgba(248,223,59,.4);will-change:transform} .ht-w .ht-plx-float img{width:100%;aspect-ratio:1/1;object-fit:cover} .ht-w .ht-plx-f1{top:14%;right:6%;transform:rotate(8deg)} .ht-w .ht-plx-f2{bottom:12%;left:6%;transform:rotate(-8deg)} .ht-w .ht-plx-in{padding-block:80px;max-width:820px} .ht-w .ht-plx .ht-title{color:#FFF8EA;font-size:clamp(30px,4.2vw,56px)} .ht-w .ht-plx .ht-text{color:#E9DCC8;font-size:1.12em} .ht-w .ht-plx .ht-eyebrow{color:var(--ht-yellow)} .ht-w .ht-plx .ht-btns{justify-content:center} @media (max-width:900px){.ht-w .ht-plx-float{width:110px;opacity:.55}} /* ---------- product tabs ---------- */ .ht-w .ht-ptabs .ht-tabs-nav{margin-bottom:30px} /* ---------- rating summary ---------- */ .ht-w .ht-rsum{display:grid;grid-template-columns:220px 1fr;gap:34px;padding:32px;align-items:center} .ht-w .ht-rsum-score{text-align:center;padding:22px;border-radius:var(--ht-radius);background:#1F1A17;color:#E9DCC8} .ht-w .ht-rsum-score>b{display:block;font:900 64px/1 var(--ht-font-h);background:var(--ht-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .ht-w .ht-rsum-score .ht-stars{justify-content:center;margin:10px 0 6px} .ht-w .ht-rsum-score .ht-text{color:#CFC2B2;font-size:14px} .ht-w .ht-stars .ht-ico:not(.on){fill:none;opacity:.35} .ht-w .ht-rsum-bars .ht-title{font-size:22px} .ht-w .ht-rsum-row{display:grid;grid-template-columns:54px 1fr 48px;align-items:center;gap:10px;margin-bottom:10px;font-family:var(--ht-font-h);font-weight:700;color:var(--ht-title)} .ht-w .ht-rsum-row .ht-ico{width:14px;height:14px;fill:var(--ht-gold);color:var(--ht-gold)} .ht-w .ht-rsum-row .ht-bar-track i{width:var(--v)} @media (max-width:640px){.ht-w .ht-rsum{grid-template-columns:1fr;padding:20px}} /* ---------- coupons ---------- */ .ht-w .ht-coupon{display:flex;border-radius:var(--ht-radius);overflow:hidden;background:var(--ht-card);border:1px solid var(--ht-line);box-shadow:var(--ht-shadow);position:relative} .ht-w .ht-coupon-v{flex:none;width:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ht-grad);color:#2A1705;padding:18px 8px;position:relative;text-align:center} .ht-w .ht-coupon-v::after{content:"";position:absolute;top:0;bottom:0;left:-1px;border-left:3px dashed var(--ht-card)} .ht-w .ht-coupon-v b{font:900 26px/1.1 var(--ht-font-h)} .ht-w .ht-coupon-v small{font:700 13px var(--ht-font-h)} .ht-w .ht-coupon-b{padding:18px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:1} .ht-w .ht-coupon-b .ht-title{font-size:18px;margin:0} .ht-w .ht-coupon-b .ht-text{font-size:14px;margin-bottom:8px} .ht-w .ht-coupon-exp{display:inline-flex;gap:4px;align-items:center;font-size:12.5px;color:#b43c28} .ht-w .ht-coupon .ht-code{min-height:42px;padding:0 14px;font-size:14px;border-color:rgba(200,122,17,.6)!important;color:#8a5a0b!important;background:rgba(228,169,29,.08)} .ht-w.ht-theme-dark .ht-coupon .ht-code,.ht-w.ht-theme-ink .ht-coupon .ht-code{color:#F8DF3B!important} /* ---------- map ---------- */ .ht-w .ht-map{position:relative;border-radius:calc(var(--ht-radius) + 6px);overflow:hidden;background:#2A1A0C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23E4A91D' stroke-opacity='.12'/%3E%3C/svg%3E");box-shadow:var(--ht-shadow)} .ht-w .ht-map iframe{width:100%;height:100%;border:0;filter:sepia(.35) saturate(.9)} .ht-w .ht-map-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#F8DF3B;font:800 17px var(--ht-font-h);width:100%} .ht-w .ht-map-load .ht-ico{width:48px;height:48px} .ht-w .ht-map-card{position:absolute;bottom:20px;right:20px;max-width:360px;display:flex;gap:14px;padding:18px;align-items:flex-start;background:#FFFDF8} .ht-w .ht-map-card .ht-title{display:block;font-size:17px;margin:0 0 4px;color:#1F1A17} .ht-w .ht-map-card p{margin:0;font-size:14.5px;color:#5B4E44} @media (max-width:640px){.ht-w .ht-map-card{left:12px;right:12px;bottom:12px;max-width:none}} /* portal buttons vs. theme hover styles */ .ht-portal .ht-pop-x:hover,.ht-portal .ht-pop-x:focus{background:rgba(20,17,16,.85);color:#F8DF3B} .ht-portal .ht-sticky-x:hover,.ht-portal .ht-sticky-x:focus{background:rgba(255,255,255,.25);color:#3F240D} .ht-portal .ht-code:hover,.ht-portal .ht-code:focus{background:rgba(248,223,59,.15)} .ht-portal .ht-btn-gold:hover,.ht-portal .ht-btn-gold:focus{background:var(--ht-grad);color:#2A1705} .ht-portal .ht-btn-dark:hover,.ht-portal .ht-btn-dark:focus{background:#3F240D;color:#F8DF3B} .ht-portal .ht-btn-ghost:hover,.ht-portal .ht-btn-ghost:focus{background:rgba(255,255,255,.06);color:#F8DF3B} .ht-portal .ht-ico{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:middle} .ht-w.htw-live-search .ht-center .ht-title{font-size:clamp(26px,3vw,38px)} .ht-w .ht-ah-words{min-width:3ch} /* ---------- basic elements (v3) ---------- */ .ht-w.htw-spacer,.ht-w.htw-divider,.ht-w.htw-button,.ht-w.htw-text-block,.ht-w.htw-single-image,.ht-w.htw-icon-list,.ht-w.htw-shortcode,.ht-w.htw-video-embed{--ht-pad:20px} .ht-w.htw-spacer{--ht-pad:0} .ht-w .ht-spacer{height:var(--h,60px)} @media (max-width:640px){.ht-w .ht-spacer{height:var(--hm,30px)}} .ht-w .ht-tb-sm{font-size:15px}.ht-w .ht-tb-lg{font-size:19.5px} .ht-w .ht-prose-body p{margin:0 0 1em} .ht-w .ht-simg{display:flex} .ht-w .ht-simg-fig{margin:0;width:100%} .ht-w .ht-simg-fig img{width:100%} .ht-w .ht-simg-round img{border-radius:var(--ht-radius)} .ht-w .ht-simg-frame{padding:10px;border:2px solid var(--ht-gold);border-radius:calc(var(--ht-radius) + 10px)} .ht-w .ht-simg-frame img{border-radius:var(--ht-radius)} .ht-w .ht-simg-circle img{border-radius:50%;aspect-ratio:1/1;object-fit:cover} .ht-w .ht-simg-shadow img{border-radius:var(--ht-radius);box-shadow:0 30px 60px -25px rgba(63,36,13,.6)} .ht-w .ht-simg-fig figcaption{text-align:center;margin-top:10px;font-size:14px} .ht-w .ht-btn-lg{min-height:62px;padding:0 40px;font-size:18px} .ht-w .ht-divider{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto;color:var(--ht-gold)} .ht-w .ht-divider i{flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--ht-gold),transparent);display:block} .ht-w .ht-divider-dashed i{background:none;border-top:2px dashed rgba(228,169,29,.6);height:0} .ht-w .ht-divider-ornament{justify-content:center} .ht-w .ht-divider-ornament .ht-ornament i{width:80px} .ht-w .ht-divider span .ht-ico{width:26px;height:26px} .ht-w .ht-divider .ht-title{margin:0;font-size:16px;color:var(--ht-title);white-space:nowrap} .ht-w .ht-il-title{font-size:22px} .ht-w .ht-ilist{display:flex;flex-direction:column;gap:14px} .ht-w .ht-ilist-row{flex-direction:row;flex-wrap:wrap;gap:14px 28px} .ht-w .ht-ilist-grid{display:grid;grid-template-columns:1fr 1fr} @media (max-width:640px){.ht-w .ht-ilist-grid{grid-template-columns:1fr}} .ht-w .ht-ilist li,.ht-w .ht-ilist a{display:flex;align-items:center;gap:12px;color:var(--ht-title);font-weight:600} .ht-w .ht-ilist .ht-ico-wrap{width:40px;height:40px;border-radius:12px} .ht-w .ht-ilist .ht-ico-wrap .ht-ico{width:20px;height:20px} .ht-w .ht-vembed{position:relative;margin:0 auto;border-radius:var(--ht-radius);overflow:hidden;background:#1F1A17;display:grid;place-items:center;box-shadow:var(--ht-shadow)} .ht-w .ht-vembed-poster{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;opacity:.75} .ht-w .ht-vembed .ht-play{position:relative} .ht-w .ht-vembed-empty{position:relative;display:flex;gap:8px;align-items:center;color:#F8DF3B;font:700 15px var(--ht-font-h);background:rgba(20,17,16,.7);padding:10px 16px;border-radius:12px} /* ================================================================== v4: query cards, grids, carousels, sliders, flex box, terms */ .ht-w .ht-qcard{position:relative;display:flex;flex-direction:column;min-width:0;height:100%;border-radius:var(--ht-radius);background:var(--ht-card);border:1px solid var(--ht-line);overflow:hidden;transition:transform .35s,box-shadow .35s,border-color .35s} .ht-w .ht-qcard:hover{transform:translateY(-6px);box-shadow:var(--ht-shadow);border-color:rgba(228,169,29,.55)} .ht-w .ht-qcard-media{position:relative;display:block;overflow:hidden;background:var(--ht-line)} .ht-w .ht-qcard-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)} .ht-w .ht-qcard:hover .ht-qcard-media img{transform:scale(1.06)} .ht-w .ht-qcard-media .ht-badge{position:absolute;top:12px;right:12px} .ht-w .ht-qcard-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:16px 18px 18px} .ht-w .ht-qa-center .ht-qcard-body{align-items:center;text-align:center} .ht-w .ht-qcard-meta{font-size:12.5px;font-weight:700;color:var(--ht-accent)} .ht-w .ht-qcard-title{margin:0;font:800 clamp(15px,1.3vw,17px)/1.5 var(--ht-font-h,"Cairo"),sans-serif;color:var(--ht-title)} .ht-w .ht-qcard-title a{color:inherit;text-decoration:none} .ht-w .ht-qcard-ex{margin:0;font-size:14px} .ht-w .ht-qcard .ht-price{margin-top:2px} .ht-w .ht-qcard-foot{margin-top:auto;padding-top:10px;display:flex;gap:8px;align-items:center} .ht-w .ht-qa-center .ht-qcard-foot{justify-content:center} /* styles */ .ht-w .ht-qcard-minimal{background:transparent;border-color:transparent} .ht-w .ht-qcard-minimal .ht-qcard-media{border-radius:var(--ht-radius)} .ht-w .ht-qcard-minimal .ht-qcard-body{padding:14px 2px 0} .ht-w .ht-qcard-minimal:hover{box-shadow:none} .ht-w .ht-qcard-overlay{min-height:280px;border:0;color:#fff} .ht-w .ht-qcard-overlay .ht-qcard-media{position:absolute;inset:0;aspect-ratio:auto!important} .ht-w .ht-qcard-overlay .ht-qcard-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,12,6,.92),rgba(20,12,6,.25) 55%,transparent)} .ht-w .ht-qcard-overlay .ht-qcard-body{position:relative;z-index:2;justify-content:flex-end;padding:22px;pointer-events:none} .ht-w .ht-qcard-overlay .ht-qcard-body a,.ht-w .ht-qcard-overlay .ht-qcard-body .ht-btn{pointer-events:auto} .ht-w .ht-qcard-overlay .ht-qcard-title,.ht-w .ht-qcard-overlay .ht-text{color:#fff} .ht-w .ht-qcard-overlay .ht-qcard-meta,.ht-w .ht-qcard-overlay .ht-more{color:#F8DF3B} .ht-w .ht-qcard-overlay .ht-price ins,.ht-w .ht-qcard-overlay .ht-price{color:#F8DF3B} .ht-w .ht-qcard-overlay .ht-qcard-media .ht-badge{z-index:3} .ht-w .ht-qcard-side{flex-direction:row;align-items:stretch} .ht-w .ht-qcard-side .ht-qcard-media{flex:0 0 38%;max-width:260px;aspect-ratio:auto!important;min-height:150px} .ht-w .ht-qcard-side .ht-qcard-body{justify-content:center} .ht-w .ht-qcard-luxe{border:1px solid rgba(228,169,29,.55);box-shadow:inset 0 0 0 5px var(--ht-card),inset 0 0 0 6px rgba(228,169,29,.35)} .ht-w .ht-qcard-luxe .ht-qcard-media{margin:10px 10px 0;border-radius:calc(var(--ht-radius) - 6px)} .ht-w .ht-qcard-luxe .ht-qcard-title{font-size:18px} /* grid layouts */ .ht-w .ht-qgrid{display:grid;gap:var(--ht-qgap,24px);grid-template-columns:repeat(var(--ht-cols,4),minmax(0,1fr))} .ht-w .ht-qgrid-masonry{display:block;columns:var(--ht-cols,4);column-gap:var(--ht-qgap,24px)} .ht-w .ht-qgrid-masonry>.ht-qcard{break-inside:avoid;margin-bottom:var(--ht-qgap,24px);height:auto} .ht-w .ht-qgrid-masonry>.ht-qcard:nth-child(3n+1) .ht-qcard-media{aspect-ratio:3/4!important} .ht-w .ht-qgrid-masonry>.ht-qcard:nth-child(3n+2) .ht-qcard-media{aspect-ratio:1/1!important} .ht-w .ht-qgrid-masonry>.ht-qcard:nth-child(3n) .ht-qcard-media{aspect-ratio:4/5!important} .ht-w .ht-qgrid-featured>.ht-qcard:first-child{grid-column:span 2;grid-row:span 2} .ht-w .ht-qgrid-featured>.ht-qcard:first-child .ht-qcard-media{aspect-ratio:auto!important;flex:1} .ht-w .ht-qgrid-featured>.ht-qcard:first-child .ht-qcard-title{font-size:clamp(19px,2vw,26px)} .ht-w .ht-qgrid-list{grid-template-columns:minmax(0,1fr)} .ht-w .ht-qcard.is-out{display:none!important} .ht-w .ht-qcard.is-in-anim{animation:htQin .5s both} @keyframes htQin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}} .ht-w .ht-qfilter-wrap{margin-bottom:26px} .ht-w .ht-qfilter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .ht-w .ht-qf-start .ht-qfilter{justify-content:flex-start} .ht-w .ht-qfilter button{height:40px;padding:0 18px;border-radius:99px;border:1px solid var(--ht-line);background:var(--ht-card);color:var(--ht-title);font:700 14px var(--ht-font-h,"Cairo"),sans-serif;cursor:pointer;transition:.25s} .ht-w .ht-qfilter button:hover{border-color:var(--ht-accent)} .ht-w .ht-qfilter button.is-on{background:var(--ht-grad);border-color:transparent;color:#2A1705;box-shadow:0 10px 24px -12px rgba(200,122,17,.8)} .ht-w .ht-qmore{display:flex;justify-content:center;margin-top:30px} .ht-w .ht-qmore .ht-btn .ht-ico{width:18px;height:18px} .ht-w .ht-qempty{grid-column:1/-1;text-align:center;padding:30px;color:var(--ht-text)} @media (max-width:1024px){.ht-w .ht-qgrid{grid-template-columns:repeat(var(--ht-cols-t,2),minmax(0,1fr))}.ht-w .ht-qgrid-masonry{columns:var(--ht-cols-t,2)}.ht-w .ht-qgrid-list{grid-template-columns:minmax(0,1fr)}} @media (max-width:640px){.ht-w .ht-qgrid{grid-template-columns:repeat(var(--ht-cols-m,2),minmax(0,1fr));gap:12px}.ht-w .ht-qgrid-masonry{columns:var(--ht-cols-m,2);column-gap:12px}.ht-w .ht-qgrid-masonry>.ht-qcard{margin-bottom:12px}.ht-w .ht-qgrid-featured>.ht-qcard:first-child{grid-column:1/-1;grid-row:auto}.ht-w .ht-qgrid-list{grid-template-columns:minmax(0,1fr)}.ht-w .ht-qcard-body{padding:12px}.ht-w .ht-qcard-side .ht-qcard-media{flex-basis:36%}.ht-w .ht-qfilter{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:4px;scrollbar-width:none}.ht-w .ht-qfilter button{flex:none;height:36px;padding:0 14px;font-size:13px}} /* carousel extras */ .ht-w .ht-qcar-peek{overflow:hidden} .ht-w .ht-qcar-peek .ht-slide{flex-basis:calc((100% - var(--per) * var(--gap)) / (var(--per) + .35))} .ht-w .ht-qcar .ht-slide{display:flex} .ht-w .ht-qcar .ht-slide>.ht-qcard{flex:1} .ht-w .ht-qcar-nav-bottom .ht-nav{top:auto;bottom:-6px;transform:none} .ht-w .ht-qcar-nav-bottom{padding-bottom:56px} .ht-w .ht-qcar-nav-bottom .ht-prev{right:calc(50% - 52px)}.ht-w .ht-qcar-nav-bottom .ht-next{left:calc(50% - 52px)} .ht-w .ht-qcar-nav-bottom .ht-dots{display:none} .ht-w .ht-qcar-nav-top .ht-nav{top:-62px;transform:none} .ht-w .ht-qcar-nav-top .ht-prev{right:auto;left:56px}.ht-w .ht-qcar-nav-top .ht-next{left:0} /* post slider */ .ht-w.htw-post-slider{--ht-pad:0} .ht-w .ht-qslider .ht-qs{position:relative;min-height:var(--ht-qs-h,520px);display:flex;align-items:center;overflow:hidden} .ht-w .ht-qslider .ht-qs-in{position:relative;z-index:2;width:100%;display:flex} .ht-w .ht-qslider .ht-qs-text{max-width:560px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding:50px 0} .ht-w .ht-qslider .ht-title{font-size:clamp(28px,4vw,52px);line-height:1.25;margin:0} .ht-w .ht-qslider .ht-price-lg{font-size:22px} .ht-w .ht-qslider-cover .ht-qs-media,.ht-w .ht-qslider-card .ht-qs-media{position:absolute;inset:0} .ht-w .ht-qslider-cover .ht-qs-media img,.ht-w .ht-qslider-card .ht-qs-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 7s ease} .ht-w .ht-qslider .ht-slide.is-active .ht-qs-media img{transform:scale(1)} .ht-w .ht-qslider-cover .ht-qs-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,12,6,.2),rgba(20,12,6,var(--ht-qs-ov,.55)) 55%,rgba(20,12,6,calc(var(--ht-qs-ov,.55) + .2)))} .ht-w .ht-qslider-cover .ht-title,.ht-w .ht-qslider-card .ht-title{color:#fff} .ht-w .ht-qslider-cover .ht-text{color:#EDE1CF} .ht-w .ht-qslider-card .ht-qs-text{background:rgba(20,17,16,.78);backdrop-filter:blur(8px);padding:34px;border-radius:24px;border:1px solid rgba(228,169,29,.35);margin:40px 0} .ht-w .ht-qslider-card .ht-text{color:#E9DCC8} .ht-w .ht-qslider-split .ht-qs{background:radial-gradient(90% 90% at 85% 10%,rgba(228,169,29,.22),transparent 60%),var(--ht-bg)} .ht-w .ht-qslider-split .ht-qs-media{position:absolute;inset-block:40px;left:6%;width:min(44%,560px);border-radius:32px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.8);border:1px solid rgba(228,169,29,.35)} .ht-w .ht-qslider-split .ht-qs-media img{width:100%;height:100%;object-fit:cover} .ht-w .ht-qslider .ht-slide.is-active .ht-qs-text>*{animation:htRise .9s both} .ht-w .ht-qslider .ht-slide.is-active .ht-qs-text>*:nth-child(2){animation-delay:.1s} .ht-w .ht-qslider .ht-slide.is-active .ht-qs-text>*:nth-child(3){animation-delay:.2s} .ht-w .ht-qslider .ht-slide.is-active .ht-qs-text>*:nth-child(4){animation-delay:.3s} .ht-w .ht-qslider .ht-slide.is-active .ht-qs-text>*:nth-child(5){animation-delay:.4s} .ht-w .ht-qslider .ht-dots{position:absolute;bottom:20px;left:0;right:0} @media (max-width:767px){.ht-w .ht-qslider-split .ht-qs{flex-direction:column;align-items:stretch}.ht-w .ht-qslider-split .ht-qs-media{position:relative;inset:auto;left:auto;width:auto;height:240px;margin:20px 16px 0}.ht-w .ht-qslider .ht-qs{min-height:0}.ht-w .ht-qslider-cover .ht-qs,.ht-w .ht-qslider-card .ht-qs{min-height:min(var(--ht-qs-h,520px),480px)}.ht-w .ht-qslider .ht-qs-text{padding:26px 0 56px}.ht-w .ht-qslider-card .ht-qs-text{padding:22px;margin:20px 0 50px}} /* flex box */ .ht-w .ht-flex{display:flex;flex-direction:var(--fx-dir,row);flex-wrap:var(--fx-wrap,wrap);justify-content:var(--fx-just,center);align-items:var(--fx-align,stretch);gap:var(--fx-gap,20px)} .ht-w .ht-flex>.ht-flex-item{flex:1 1 var(--fx-basis,240px);min-width:0;display:flex;flex-direction:column;gap:10px} .ht-w .ht-flex[style*="--fx-dir:column"]>.ht-flex-item{flex-basis:auto} .ht-w .ht-flex-scroll{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin} .ht-w .ht-flex-scroll>.ht-flex-item{flex:0 0 var(--fx-basis,240px);scroll-snap-align:start} .ht-w .ht-flex-a-center>.ht-flex-item{align-items:center;text-align:center} .ht-w .ht-flex-card>.ht-flex-item.ht-card{padding:26px 22px} .ht-w .ht-flex-outline>.ht-flex-item.ht-card{padding:26px 22px;background:transparent;border:1.5px solid rgba(228,169,29,.55)} .ht-w .ht-flex-glass>.ht-flex-item.ht-card{padding:26px 22px;background:rgba(255,255,255,.08);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18)} .ht-w .ht-flex-plain>.ht-flex-item.ht-card{padding:10px;background:transparent;border:0;box-shadow:none} .ht-w .ht-flex-hover>.ht-flex-item.ht-card{transition:transform .35s,box-shadow .35s} .ht-w .ht-flex-hover>.ht-flex-item.ht-card:hover{transform:translateY(-6px);box-shadow:var(--ht-shadow)} .ht-w .ht-flex-item .ht-title{margin:0;font-size:18px} .ht-w .ht-flex-item .ht-text{margin:0} .ht-w .ht-flex-img{width:100%;border-radius:calc(var(--ht-radius) - 4px);overflow:hidden} .ht-w .ht-flex-img img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover} .ht-w .ht-flex-q{gap:0} @media (max-width:1024px){.ht-w .ht-flex{flex-direction:var(--fx-dir-t,var(--fx-dir))}.ht-w .ht-flex>.ht-flex-item{flex-basis:var(--fx-basis-t,var(--fx-basis))}} @media (max-width:640px){.ht-w .ht-flex{flex-direction:var(--fx-dir-m,var(--fx-dir));gap:var(--fx-gap-m,12px)}.ht-w .ht-flex>.ht-flex-item{flex-basis:var(--fx-basis-m,150px)}.ht-w .ht-flex-card>.ht-flex-item.ht-card,.ht-w .ht-flex-outline>.ht-flex-item.ht-card{padding:18px 14px}} /* terms grid */ .ht-w .ht-tgrid{display:grid;gap:22px;grid-template-columns:repeat(var(--ht-cols,4),minmax(0,1fr))} .ht-w .ht-tgrid-pill{display:flex;flex-wrap:wrap;justify-content:center;gap:12px} .ht-w .ht-term{position:relative;display:flex;flex-direction:column;gap:12px;color:var(--ht-title);text-decoration:none} .ht-w .ht-term-media{position:relative;display:block;overflow:hidden;border-radius:var(--ht-radius);background:linear-gradient(135deg,#F2EADB,#E9D3A6)} .ht-w .ht-term-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s} .ht-w .ht-term:hover .ht-term-media img{transform:scale(1.07)} .ht-w .ht-term-ph{position:absolute;inset:0;display:grid;place-items:center;color:#C87A11} .ht-w .ht-term-ph .ht-ico{width:40px;height:40px} .ht-w .ht-term-body b{display:block;font:800 16px var(--ht-font-h,"Cairo"),sans-serif} .ht-w .ht-term-body small{display:block;font-size:12.5px;color:var(--ht-accent);font-weight:700} .ht-w .ht-term-overlay .ht-term-body{position:absolute;inset:auto 0 0 0;padding:18px;background:linear-gradient(to top,rgba(20,12,6,.9),transparent);border-radius:0 0 var(--ht-radius) var(--ht-radius);color:#fff} .ht-w .ht-term-overlay .ht-term-body small{color:#F8DF3B} .ht-w .ht-term-circle{align-items:center;text-align:center} .ht-w .ht-term-circle .ht-term-media{border-radius:50%;width:100%;max-width:190px;box-shadow:0 0 0 4px var(--ht-card),0 0 0 5px rgba(228,169,29,.55);transition:box-shadow .3s} .ht-w .ht-term-circle:hover .ht-term-media{box-shadow:0 0 0 4px var(--ht-card),0 0 0 7px #E4A91D} .ht-w .ht-term-card{background:var(--ht-card);border:1px solid var(--ht-line);border-radius:var(--ht-radius);padding:10px 10px 16px;transition:.3s} .ht-w .ht-term-card:hover{transform:translateY(-5px);box-shadow:var(--ht-shadow)} .ht-w .ht-term-card .ht-term-body{padding:0 6px} .ht-w .ht-term-pill{flex-direction:row;align-items:center;gap:10px;padding:12px 20px;border-radius:99px;background:var(--ht-card);border:1px solid var(--ht-line);transition:.25s} .ht-w .ht-term-pill:hover{background:var(--ht-grad);color:#2A1705;border-color:transparent} .ht-w .ht-term-pill .ht-term-body{display:flex;gap:8px;align-items:baseline} .ht-w .ht-term-pill .ht-ico{width:16px;height:16px} @media (max-width:1024px){.ht-w .ht-tgrid{grid-template-columns:repeat(var(--ht-cols-t,3),minmax(0,1fr))}} @media (max-width:640px){.ht-w .ht-tgrid{grid-template-columns:repeat(var(--ht-cols-m,2),minmax(0,1fr));gap:12px}.ht-w .ht-term-body b{font-size:14px}.ht-w .ht-term-overlay .ht-term-body{padding:12px}}