/* =====================================================================================================================
   TePee - X Saudi - its OWN look (Faisal 11 Oct 2026: "I felt like I haven't gone to another website ... the same
   website with the same building"). Loaded AFTER each page's inline CSS on index / products / national-day.
   It changes how things LOOK (type, colours, shapes, the opening of the home page), never what they DO: every id,
   class and data hook the page scripts use is untouched, so the shop, the quote list and the forms work as before.
   TePee - X = Montserrat + Tajawal, warm light pages, navy ink, ORANGE pills (Wampum is Alexandria, cool light, square).
   ===================================================================================================================== */
:root{
  --tx-navy:#04263F; --tx-navy-d:#021B2E; --tx-orange:#D1812E; --tx-orange-h:#E5953E; --tx-orange-ink:#A35F18;
  --tx-cream:#F8F4ED; --tx-cream-2:#F0E9DC; --tx-line:#E9E1D3; --tx-ink:#14202B; --tx-muted:#5C6C78; --tx-bar:34px;
}
html{scroll-padding-top:calc(80px + var(--tx-bar))}
body{font-family:Montserrat,Tajawal,Tahoma,Arial,sans-serif;font-weight:400;color:var(--tx-ink);background:#fff;padding-top:var(--tx-bar)}
h1,h2,h3,h4,h5,h6,.navbar-brand{font-family:Montserrat,Tajawal,Tahoma,Arial,sans-serif;font-weight:800;color:var(--tx-navy);letter-spacing:0}
.text-secondary{color:var(--tx-muted)!important}
.text-orange{color:var(--tx-orange)!important}
.bg-mist{background-color:var(--tx-cream)!important}
::selection{background:var(--tx-orange);color:#fff}

/* ---- the main-website bar (every page) ---- */
.tx-bar{position:fixed;top:0;inset-inline:0;height:var(--tx-bar);z-index:1051;background:var(--tx-navy-d);color:rgba(255,255,255,.86);font-size:.78rem;border-bottom:1px solid rgba(255,255,255,.08)}
.tx-bar .container{display:flex;justify-content:space-between;align-items:center;gap:12px;height:100%}
.tx-bar a{color:#fff;text-decoration:none;font-weight:600;white-space:nowrap}
.tx-bar a:hover{color:var(--tx-orange-h);text-decoration:underline}
.tx-bar i{color:var(--tx-orange);margin-inline-end:5px}
.tx-bar bdi{unicode-bidi:isolate}
.tx-bar .tx-sis{opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:767.98px){.tx-bar .tx-sis{display:none}.tx-bar .container{justify-content:center}}

/* ---- the header: white, soft shadow, dark logo ---- */
.navbar.fixed-top{top:var(--tx-bar);background:rgba(255,255,255,.97)!important;backdrop-filter:saturate(160%) blur(10px);box-shadow:0 1px 0 var(--tx-line),0 10px 28px rgba(4,38,63,.07)!important;padding-block:.4rem}
.navbar .navbar-brand img{height:42px!important}
.navbar .nav-link{color:var(--tx-navy)!important;font-weight:700;opacity:.9;border-radius:999px;padding-inline:.9rem!important}
.navbar .nav-link:hover,.navbar .nav-link:focus{color:var(--tx-orange-ink)!important;background:rgba(209,129,46,.1);opacity:1}
.navbar .nav-link.active{color:var(--tx-orange-ink)!important;opacity:1}
.navbar .btn-outline-light{color:var(--tx-navy);border-color:rgba(4,38,63,.35);background:transparent}
.navbar .btn-outline-light:hover,.navbar .btn-outline-light:focus{background:var(--tx-navy);color:#fff;border-color:var(--tx-navy)}
.navbar .navbar-toggler{border-color:rgba(4,38,63,.3)}
.navbar .navbar-toggler-icon{filter:invert(1) brightness(.25)}
@media (max-width:767.98px){
  .navbar-collapse{background:#fff!important;border-top:1px solid var(--tx-line);box-shadow:0 22px 45px rgba(4,38,63,.16)!important}
  .navbar-nav .nav-link{border-bottom:1px solid var(--tx-line)!important;border-radius:0}
}

/* ---- buttons: pills ---- */
.btn{border-radius:999px;font-weight:700}
.btn-lg{padding:.85rem 2rem}
.btn-brand{background-color:var(--tx-orange);border-color:var(--tx-orange);color:#fff;box-shadow:0 12px 28px rgba(209,129,46,.34)}
.btn-brand:hover,.btn-brand:focus{background-color:var(--tx-orange-h);border-color:var(--tx-orange-h);color:#fff}
.btn-outline-dark{border-width:2px;border-color:var(--tx-navy);color:var(--tx-navy)}
.btn-outline-dark:hover{background:var(--tx-navy);color:#fff}

/* ---- the opening of the home page: a light PHOTO WALL of real catalogue photos ---- */
.hero2{position:relative;padding:104px 0 64px;background:radial-gradient(900px 460px at 88% -4%,rgba(209,129,46,.16),transparent 62%),radial-gradient(700px 420px at 4% 100%,rgba(4,38,63,.07),transparent 60%),linear-gradient(180deg,#FCF9F4 0%,#F4EDE1 100%);color:var(--tx-ink);overflow:hidden}
.hero2 .kick{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--tx-line);color:var(--tx-navy);border-radius:999px;padding:.32rem 1rem;font-weight:700;font-size:.84rem;box-shadow:0 6px 18px rgba(4,38,63,.06)}
.hero2 .kick i{color:var(--tx-orange)}
.hero2 h1{font-size:clamp(1.95rem,1.15rem + 3.1vw,3.2rem);line-height:1.32;margin:.55em 0 .4em;color:var(--tx-navy)}
.hero2 .lead{color:var(--tx-muted)!important;font-weight:400;font-size:clamp(1rem,.95rem + .3vw,1.15rem);max-width:34em}
.hero2 .mfg{color:var(--tx-navy)}
.hero2 .btn-outline-light{color:var(--tx-navy);border:2px solid var(--tx-navy);background:transparent}
.hero2 .btn-outline-light:hover{background:var(--tx-navy);color:#fff}
.hero2 .browse{color:var(--tx-orange-ink)!important;font-weight:700;text-decoration:none}
.hero2 .browse:hover{text-decoration:underline}
.hero2 .tchip{background:#fff;border:1px solid var(--tx-line);color:var(--tx-navy);font-weight:600}
.hero2 .tchip i{color:var(--tx-orange)}
.hero2 .stats{border-top:1px solid var(--tx-line)!important}
.hero2 .stat b{color:var(--tx-navy)}
.hero2 .stat b i{color:var(--tx-orange)}
.hero2 .stat span{color:var(--tx-muted)}
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-bottom:28px;max-width:560px;margin-inline:auto}
.wcard{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:22px;box-shadow:0 16px 38px rgba(4,38,63,.13);overflow:hidden;text-decoration:none;color:var(--tx-navy);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;border:1px solid rgba(4,38,63,.05);aspect-ratio:3/4}
.wcard img{display:block;width:100%;flex:1 1 auto;min-height:0;object-fit:contain;padding:10px 10px 0;background:#fff}
.wcard .wn{display:block;text-align:left;font-family:Montserrat,Tajawal,sans-serif;font-size:.68rem;font-weight:700;line-height:1.4;padding:6px 10px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcard .wp{display:inline-block;align-self:flex-start;margin:5px 10px 10px;background:var(--tx-navy);color:#fff;border-radius:999px;padding:.12rem .6rem;font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums}
.wcard .wp.ask{background:var(--tx-cream-2);color:var(--tx-navy)}
.wcard:nth-child(3n+2){transform:translateY(-26px)}
@media(hover:hover){.wcard:hover{box-shadow:0 22px 48px rgba(4,38,63,.2);transform:translateY(-4px)}.wcard:nth-child(3n+2):hover{transform:translateY(-30px)}}
@media(max-width:991.98px){.hero2{padding:88px 0 48px}.hero2 .row>.col-lg-6:last-child{order:-1}.hero2 .row{--bs-gutter-y:1.25rem}.wall{grid-template-columns:repeat(3,1fr);gap:10px;padding-bottom:0;max-width:520px}.wcard{aspect-ratio:auto;border-radius:16px;box-shadow:0 10px 24px rgba(4,38,63,.12)}.wcard img{aspect-ratio:1/1;height:auto;flex:none;padding:8px 8px 0}.wcard:nth-child(3n+2){transform:none}.wcard:nth-child(n+4){display:none}.wcard .wn{font-size:.62rem;padding:4px 8px 0}.wcard .wp{margin:4px 8px 8px;font-size:.66rem}#heroWall+p{display:none}.hero2 h1{margin-top:.35em}}@media(hover:hover) and (max-width:991.98px){.wcard:nth-child(3n+2):hover{transform:translateY(-4px)}}

/* ---- sections ---- */
section.py-5{padding-block:4.2rem!important}
@media(max-width:767.98px){section.py-5{padding-block:3rem!important}}
section h2{font-size:clamp(1.55rem,1.1rem + 1.7vw,2.3rem)}
section>.container>h2::after,.container>div>h2::after{content:"";display:block;width:54px;height:5px;background:var(--tx-orange);border-radius:5px;margin-top:.55rem}
.text-center>h2::after,h2.text-center::after{margin-inline:auto}
#clients{background:#fff;border-top:1px solid var(--tx-line);border-bottom:1px solid var(--tx-line)}
.logo-card{border-radius:18px;border-color:var(--tx-line)}
.cat-card{border-radius:22px;border:1px solid var(--tx-line);box-shadow:0 10px 26px rgba(4,38,63,.06)}
.cat-card:hover{box-shadow:0 20px 44px rgba(4,38,63,.15)}
.cat-card img{background:var(--tx-cream)}
.cat-card img.cov{background:var(--tx-cream)}
.cat-card .cap{background:#fff;color:var(--tx-navy);font-weight:800;text-align:start;padding:12px 16px;border-top:1px solid var(--tx-line);display:flex;justify-content:space-between;align-items:center;gap:8px}
.cat-card .cap::after{content:"\2190";color:var(--tx-orange);font-size:1.1rem}
[dir=ltr] .cat-card .cap::after{content:"\2192"}
.cat-card .cap .capr{color:var(--tx-orange-ink);display:block}
.cat-card .cap .capr small{color:var(--tx-muted)}
.strip-card{border-radius:18px;border-color:var(--tx-line);background:#fff}
.step-num{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--tx-navy);color:#fff!important;font-size:1.4rem}
#how h5{color:var(--tx-navy)}
.why-icon{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;background:rgba(209,129,46,.13);color:var(--tx-orange)!important;font-size:1.6rem;flex:none}
#vip{background:radial-gradient(800px 380px at 8% 0%,rgba(209,129,46,.18),transparent 60%),linear-gradient(165deg,#04263F 30%,#06385a)!important}
#vip .cat-card{border-color:rgba(255,255,255,.12)}
#why{background:var(--tx-cream)!important;color:var(--tx-ink)!important}
#why h2{color:var(--tx-navy)!important}
#why h5{color:var(--tx-navy)}
#why p{color:var(--tx-muted)!important}
#why .row{--bs-gutter-x:0;--bs-gutter-y:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
#why .row>.col{width:auto!important;margin:0!important;background:#fff;border:1px solid var(--tx-line);border-radius:20px;padding:20px!important;box-shadow:0 10px 24px rgba(4,38,63,.05)}
@media(max-width:767.98px){#why .row{grid-template-columns:1fr}}
.accordion-item{border:1px solid var(--tx-line)!important;border-radius:16px!important;margin-bottom:12px;overflow:hidden;background:#fff}
.accordion-button{font-weight:700;color:var(--tx-navy);background:#fff}
.accordion-button:not(.collapsed){color:var(--tx-navy);background:var(--tx-cream);box-shadow:none}
.accordion-button:focus{box-shadow:0 0 0 .2rem rgba(209,129,46,.25)}
.form-wrap{border-radius:26px;background:var(--tx-cream)!important;border:1px solid var(--tx-line)}
.form-control:focus{border-color:var(--tx-orange);box-shadow:0 0 0 .2rem rgba(209,129,46,.22)}
.form-floating>.form-control,.form-floating>.form-select{border-radius:14px}
.alert{border-radius:16px}
.vatnote{color:var(--tx-muted)}
#vip .vatnote{color:#B9CFDE}

/* ---- the two websites this one belongs to ---- */
.tx-net{background:var(--tx-cream)}
.tx-net .nc{height:100%;display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--tx-line);border-radius:24px;padding:22px 24px;box-shadow:0 12px 30px rgba(4,38,63,.07)}
.tx-net .nc img{height:44px;width:auto;flex:none}
.tx-net .nc .tx{flex:1 1 220px}
.tx-net .nc b{display:block;color:var(--tx-navy);font-size:1.02rem;margin-bottom:2px}
.tx-net .nc small{color:var(--tx-muted);line-height:1.8;display:block}
.tx-net .nc.sis{background:linear-gradient(135deg,#242D68,#161C45);border-color:#242D68}
.tx-net .nc.sis b{color:#fff}.tx-net .nc.sis small{color:rgba(255,255,255,.8)}
.tx-net .nc.sis .btn-outline-dark{border-color:#fff;color:#fff}.tx-net .nc.sis .btn-outline-dark:hover{background:#fff;color:#161C45}

/* ---- footer ---- */
.footer{background:var(--tx-navy-d)!important}
.footer h6{letter-spacing:0}
.footer a{color:#B9CFDE}

/* ---- arrival card for visitors who came from Wampum Events ---- */
.tx-arrival{position:fixed;inset-inline-end:16px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:1055;max-width:min(92vw,430px);background:#fff;border:1px solid var(--tx-line);border-inline-start:5px solid var(--tx-orange);border-radius:20px;box-shadow:0 16px 46px rgba(4,38,63,.28);animation:txIn .35s ease-out both}
.tx-arrival[hidden]{display:none}
.tx-arrival .in{display:flex;gap:12px;align-items:flex-start;padding:14px 16px}
.tx-arrival .ic{font-size:1.3rem;color:var(--tx-orange);margin-top:2px}
.tx-arrival .tx{display:flex;flex-direction:column;gap:3px;font-size:.9rem;line-height:1.8;color:var(--tx-ink)}
.tx-arrival .tx strong{color:var(--tx-navy);font-size:.98rem}
.tx-arrival .tx a{color:var(--tx-orange-ink);font-weight:700;unicode-bidi:isolate}
.tx-arrival .x{margin-inline-start:auto;border:0;background:transparent;color:var(--tx-muted);font-size:1rem;padding:4px;cursor:pointer}
@keyframes txIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(min-width:992px){.tx-arrival{bottom:24px}}
/* phones: the card sits under the header so it never covers the quote button, and it is shorter */
@media(max-width:991.98px){.tx-arrival{bottom:auto;top:calc(var(--tx-bar,0px) + 80px);inset-inline:12px;max-width:none;border-radius:16px}.tx-arrival .in{padding:10px 12px;gap:10px}.tx-arrival .tx{font-size:.82rem;line-height:1.65}.tx-arrival .tx strong{font-size:.9rem}}
@media(prefers-reduced-motion:reduce){.tx-arrival{animation:none}.wcard{transition:none}}