@charset "UTF-8";
/*======================================================================================
SitexPrime — project layer
Author: AB DESIGNS (https://abdesigns.site)

Written mobile-first: every rule below states the small-screen case, then grows
through min-width breakpoints. Loaded after main.css, so it also carries the
handful of responsive corrections the vendor stylesheet needs at phone widths.

  01. Tokens & type
  02. Mobile-first corrections for the vendor stylesheet
  03. Language switcher
  04. Shared building blocks (buttons, links, leads, quotes)
  05. Page components
  06. Forms
  07. RTL / Arabic
======================================================================================*/

/*--------------------------------------------------------------
  01. Tokens & type
--------------------------------------------------------------*/
:root {
    --sx-rose: #B87B98;
    --sx-slate: #756F88;
    --sx-white: #FFFFFF;
    --sx-ink: #1A161F;
    --sx-ink-soft: #5B5566;
    --sx-line: rgba(26, 22, 31, .12);
    --sx-surface: #F5F2F4;
    --sx-radius: 18px;
    --sx-radius-sm: 12px;
    --sx-gap: clamp(1.25rem, 4vw, 2.5rem);
    --sx-shadow: 0 18px 50px -30px rgba(26, 22, 31, .45);
    --sx-heading: "Sora", sans-serif;
    --sx-body: "Plus Jakarta Sans", sans-serif;
    --sx-arabic: "IBM Plex Sans Arabic", "Plus Jakarta Sans", sans-serif;
}

/* A hard line break that survives the vendor rule hiding <br> under 992px. */
.sx-ln {
    display: block;
}

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

/*--------------------------------------------------------------
  02. Mobile-first corrections for the vendor stylesheet
  The theme ships desktop-first rules; these keep phones honest.
--------------------------------------------------------------*/
html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    font-size: 1rem;
    line-height: 1.65;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

/* Fluid display sizes: one rule instead of six breakpoint overrides. */
h1,
.hero-title,
.breadcrumb-title {
    font-size: clamp(2.25rem, 8.5vw, 7.5rem);
    line-height: 1.02;
}

h2 {
    font-size: clamp(1.75rem, 5.4vw, 4rem);
    line-height: 1.1;
}

h3 {
    font-size: clamp(1.25rem, 2.6vw, 1.875rem);
}

.section-padding {
    padding-block: clamp(3.5rem, 9vw, 7.5rem);
}

.container {
    padding-inline: 1.25rem;
}

@media (min-width: 576px) {
    .container {
        padding-inline: 1.5rem;
    }
}

/* Anything that scrolls sideways does it inside its own box, never the page. */
.as-team-1-wrap,
.sx-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Tap targets */
a,
button,
.acc-btn,
.lang-current {
    -webkit-tap-highlight-color: transparent;
}

.social-icon a {
    min-width: 34px;
    min-height: 34px;
}

/* The breadcrumb banner is a lot of empty space on a phone. */
.breadcrumb-wrapper .page-heading {
    padding: 150px 0 60px;
}

@media (min-width: 768px) {
    .breadcrumb-wrapper .page-heading {
        padding: 200px 0 100px;
    }
}

@media (min-width: 1200px) {
    .breadcrumb-wrapper .page-heading {
        padding: 230px 0 130px;
    }
}

.breadcrumb-wrapper .page-heading .breadcrumb-list {
    flex-wrap: wrap;
}

.breadcrumb-wrapper .page-heading .breadcrumb-list .sep {
    font-size: 11px;
    color: rgba(255, 255, 255, .45);
}

/* Homepage service rows stack cleanly before the theme's own breakpoints. */
@media (max-width: 991px) {
    .service-wrapper-one {
        flex-direction: column;
    }

    .service-line {
        display: none;
    }
}

.section-cta {
    margin-top: 2rem;
}

/* Award list is a two-column grid the theme only defines for large screens. */
.award-section .award-list {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .award-section .award-list {
        grid-template-columns: 1fr 1fr;
    }
}

/*--------------------------------------------------------------
  03. Language switcher
--------------------------------------------------------------*/
.lang-switch {
    position: relative;
    z-index: 30;
}

.lang-switch .lang-current {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: 0 .9rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-family: var(--sx-body);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all .3s ease;
}

.lang-switch .lang-current .arrow {
    font-size: .625rem;
    transition: transform .3s ease;
}

.lang-switch.open .lang-current .arrow {
    transform: rotate(180deg);
}

.lang-switch .lang-current:hover,
.lang-switch.open .lang-current {
    background: var(--sx-rose);
    border-color: var(--sx-rose);
}

.lang-switch .lang-list {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + .5rem);
    min-width: 160px;
    margin: 0;
    padding: .4rem;
    border-radius: var(--sx-radius-sm);
    background: #fff;
    box-shadow: 0 20px 45px -20px rgba(26, 22, 31, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all .3s ease;
}

.lang-switch.open .lang-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-switch .lang-list a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border-radius: 8px;
    color: var(--sx-ink);
    font-family: var(--sx-body);
    font-size: .875rem;
}

.lang-switch .lang-list a .code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: .15rem .35rem;
    border-radius: 6px;
    background: var(--sx-surface);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.lang-switch .lang-list li.active a,
.lang-switch .lang-list a:hover {
    background: var(--sx-surface);
    color: var(--sx-rose);
}

.lang-switch--mobile .lang-current {
    border-color: rgba(255, 255, 255, .3);
}

/* The theme styles the phone/email panel inside the mobile drawer but then
   hides it, leaving a large empty panel. It is the most useful thing in there. */
.mobile-menu-area .mobile-menu-main .off-contact-area {
    display: block;
}

/* On inner pages the header sits on a dark banner, so the pill stays light. */
.sticky-menu .lang-switch .lang-current {
    border-color: var(--sx-line);
    background: transparent;
    color: var(--sx-ink);
}

.sticky-menu .lang-switch .lang-current:hover,
.sticky-menu .lang-switch.open .lang-current {
    background: var(--sx-rose);
    border-color: var(--sx-rose);
    color: #fff;
}

/*--------------------------------------------------------------
  04. Shared building blocks
--------------------------------------------------------------*/
.sx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 52px;
    padding: 0 1.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--sx-ink);
    color: #fff;
    font-family: var(--sx-body);
    font-size: .9375rem;
    font-weight: 600;
    text-align: center;
    transition: all .35s ease;
}

.sx-btn:hover {
    background: var(--sx-rose);
    color: #fff;
}

.sx-btn--full {
    width: 100%;
}

.sx-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--sx-ink);
    font-family: var(--sx-body);
    font-weight: 600;
    font-size: .9375rem;
}

.sx-link i {
    transition: transform .35s ease;
}

.sx-link:hover {
    color: var(--sx-rose);
}

.sx-link:hover i {
    transform: translateX(4px);
}

[dir="rtl"] .sx-link:hover i {
    transform: translateX(-4px);
}

.sx-lead {
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    line-height: 1.7;
    color: var(--sx-ink-soft);
    margin-bottom: 1.25rem;
}

.sx-h3 {
    margin: 2.5rem 0 1rem;
    font-family: var(--sx-heading);
    font-size: clamp(1.375rem, 3vw, 1.875rem);
    font-weight: 500;
    color: var(--sx-ink);
}

.sx-tag {
    display: inline-flex;
    align-items: center;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: var(--sx-surface);
    color: var(--sx-rose);
    font-family: var(--sx-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
}

a.sx-tag:hover {
    background: var(--sx-rose);
    color: #fff;
}

.sx-quote {
    position: relative;
    margin: 2rem 0;
    padding: 1.75rem;
    border-radius: var(--sx-radius);
    background: var(--sx-surface);
}

.sx-quote img {
    width: 40px;
    margin-bottom: .75rem;
}

.sx-quote p {
    font-family: var(--sx-heading);
    font-size: clamp(1.125rem, 2.4vw, 1.5rem);
    line-height: 1.45;
    color: var(--sx-ink);
}

.sx-quote cite {
    display: block;
    margin-top: 1rem;
    font-family: var(--sx-body);
    font-size: .875rem;
    font-style: normal;
    color: var(--sx-ink-soft);
}

.sx-quote--big {
    margin-top: 3rem;
    padding: clamp(1.75rem, 5vw, 3.5rem);
    background: var(--sx-ink);
}

.sx-quote--big p {
    color: #fff;
}

.sx-quote--big cite {
    color: rgba(255, 255, 255, .6);
}

.sx-check {
    display: grid;
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: 0;
}

.sx-check li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-size: 1rem;
    color: var(--sx-ink-soft);
}

.sx-check i {
    flex: 0 0 auto;
    margin-top: .35rem;
    color: var(--sx-rose);
}

@media (min-width: 768px) {
    .sx-check {
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
    }
}

.sx-sticky {
    position: static;
}

@media (min-width: 992px) {
    .sx-sticky {
        position: sticky;
        top: 120px;
    }
}

/*--------------------------------------------------------------
  05. Page components
--------------------------------------------------------------*/
/* --- about: values, process, media --- */
.sx-value,
.sx-step {
    height: 100%;
    padding: 1.75rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: #fff;
    transition: all .4s ease;
}

.sx-value:hover,
.sx-step:hover {
    border-color: transparent;
    box-shadow: var(--sx-shadow);
    transform: translateY(-4px);
}

.sx-value__num,
.sx-step__num {
    display: inline-block;
    margin-bottom: .85rem;
    font-family: var(--sx-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--sx-rose);
    letter-spacing: .08em;
}

.sx-value h3,
.sx-step h3 {
    margin-bottom: .6rem;
    font-size: 1.25rem;
    font-weight: 500;
}

.sx-value p,
.sx-step p {
    font-size: .9375rem;
    color: var(--sx-ink-soft);
    margin: 0;
}

.sx-media-grid {
    display: grid;
    gap: 1rem;
    margin-top: clamp(2.5rem, 6vw, 5rem);
    grid-template-columns: 1fr;
}

.sx-media-grid img {
    width: 100%;
    border-radius: var(--sx-radius);
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
    .sx-media-grid {
        grid-template-columns: 1fr 1.4fr;
    }

    .sx-media-grid img:first-child {
        aspect-ratio: 3 / 4;
    }

    .sx-media-grid img:last-child {
        aspect-ratio: auto;
        height: 100%;
    }
}

/* The about page column is narrower than the homepage one, so the theme's
   flex row wraps badly. Grid keeps the three figures on one line from 480px. */
.sx-counters {
    display: grid;
    gap: 1px;
    margin-top: 2rem;
    background: var(--sx-line);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    overflow: hidden;
    grid-template-columns: 1fr;
}

.sx-counters .counter-items {
    margin: 0;
    padding: 1.25rem;
    background: #fff;
}

.sx-counters .line-1 {
    display: none;
}

@media (min-width: 480px) {
    .sx-counters {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- services --- */
.sx-service {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: #fff;
    transition: all .4s ease;
}

.sx-service:hover {
    border-color: transparent;
    box-shadow: var(--sx-shadow);
}

.sx-service__media {
    position: relative;
    overflow: hidden;
}

.sx-service__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.23, 1, .32, 1);
}

.sx-service:hover .sx-service__media img {
    transform: scale(1.05);
}

.sx-service__num {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--sx-ink);
    font-family: var(--sx-heading);
    font-size: .875rem;
    font-weight: 600;
}

.sx-service__body {
    padding: 1.5rem;
}

.sx-service__body h3 {
    margin-bottom: .35rem;
    font-size: 1.5rem;
    font-weight: 500;
}

.sx-service__tag {
    margin-bottom: .85rem;
    color: var(--sx-rose);
    font-size: .9375rem;
    font-weight: 500;
}

.sx-service__body > p {
    color: var(--sx-ink-soft);
    font-size: .9375rem;
}

.sx-service__list {
    display: grid;
    gap: .4rem .75rem;
    margin: 1.1rem 0 1.4rem;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--sx-line);
    grid-template-columns: 1fr 1fr;
}

.sx-service__list li {
    position: relative;
    padding-inline-start: .95rem;
    font-size: .8125rem;
    color: var(--sx-ink-soft);
}

.sx-service__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sx-rose);
}

@media (min-width: 992px) {
    .sx-service__body {
        padding: 2rem;
    }
}

/* --- details pages --- */
.sx-details__thumb {
    overflow: hidden;
    margin-bottom: 2rem;
    border-radius: var(--sx-radius);
}

.sx-details__thumb img {
    width: 100%;
    object-fit: cover;
}

.sx-details__thumb--wide img {
    aspect-ratio: 16 / 9;
}

.sx-details__thumb--split {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-block: 2.5rem;
}

@media (min-width: 640px) {
    .sx-details__thumb--split {
        grid-template-columns: 1fr 1fr;
    }
}

.sx-details__thumb--split img {
    border-radius: var(--sx-radius);
    aspect-ratio: 4 / 5;
}

.sx-details__title {
    margin-bottom: 1.25rem;
    font-size: clamp(1.75rem, 4.5vw, 3rem);
    line-height: 1.12;
}

.sx-meta {
    display: grid;
    gap: 1.25rem;
    margin-block: 2.5rem;
    padding: 1.5rem;
    border-radius: var(--sx-radius);
    background: var(--sx-surface);
    grid-template-columns: 1fr;
}

.sx-meta__item span {
    display: block;
    margin-bottom: .25rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sx-rose);
}

.sx-meta__item strong {
    font-family: var(--sx-heading);
    font-size: 1rem;
    font-weight: 500;
    color: var(--sx-ink);
}

@media (min-width: 640px) {
    .sx-meta {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .sx-meta {
        grid-template-columns: repeat(4, 1fr);
        padding: 2rem;
    }

    .sx-meta--stack {
        grid-template-columns: 1fr 1fr;
    }
}

.sx-metrics {
    margin-top: 1.5rem;
}

.sx-metric {
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    text-align: center;
}

.sx-metric__n {
    display: block;
    font-family: var(--sx-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    color: var(--sx-rose);
    line-height: 1;
}

.sx-metric p {
    margin-top: .5rem;
    font-size: .875rem;
    color: var(--sx-ink-soft);
}

.sx-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sx-line);
}

/* --- sidebar --- */
.sx-side {
    display: grid;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

@media (min-width: 992px) {
    .sx-side {
        margin-top: 0;
        position: sticky;
        top: 120px;
    }
}

.sx-side__box {
    padding: 1.5rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
}

.sx-side__box h4,
.sx-side__cta h4 {
    margin-bottom: 1rem;
    font-family: var(--sx-heading);
    font-size: 1.125rem;
    font-weight: 600;
}

.sx-side__list {
    display: grid;
    gap: .2rem;
    margin: 0;
}

.sx-side__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem .25rem;
    border-bottom: 1px solid var(--sx-line);
    color: var(--sx-ink-soft);
    font-size: .9375rem;
}

.sx-side__list li:last-child a {
    border-bottom: 0;
}

.sx-side__list a:hover {
    color: var(--sx-rose);
    padding-inline-start: .6rem;
}

.sx-side__cta {
    padding: 1.75rem;
    border-radius: var(--sx-radius);
    background: var(--sx-ink);
    color: #fff;
}

.sx-side__cta h4 {
    color: #fff;
}

.sx-side__cta p {
    margin-bottom: 1.25rem;
    font-size: .9375rem;
    color: rgba(255, 255, 255, .7);
}

.sx-side__cta .sx-btn {
    background: var(--sx-rose);
}

.sx-side__cta .sx-btn:hover {
    background: #fff;
    color: var(--sx-ink);
}

.sx-recent {
    display: grid;
    gap: 1rem;
    margin: 0;
}

.sx-recent a {
    display: flex;
    gap: .85rem;
    align-items: center;
}

.sx-recent img {
    flex: 0 0 auto;
    width: 76px;
    height: 62px;
    border-radius: 10px;
    object-fit: cover;
}

.sx-recent span {
    font-family: var(--sx-heading);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sx-ink);
}

.sx-recent em {
    display: block;
    margin-bottom: .2rem;
    font-family: var(--sx-body);
    font-size: .75rem;
    font-style: normal;
    color: var(--sx-rose);
}

.sx-recent a:hover span {
    color: var(--sx-rose);
}

/* --- work & blog cards --- */
.sx-work,
.sx-post {
    height: 100%;
}

.sx-work__thumb,
.sx-post__thumb {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--sx-radius);
}

.sx-work__thumb img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.23, 1, .32, 1);
}

.sx-post__thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.23, 1, .32, 1);
}

.sx-work:hover .sx-work__thumb img,
.sx-post:hover .sx-post__thumb img {
    transform: scale(1.06);
}

.sx-work__go {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: var(--sx-ink);
    opacity: 0;
    transform: translateY(10px);
    transition: all .4s ease;
}

.sx-work:hover .sx-work__go {
    opacity: 1;
    transform: translateY(0);
}

.sx-work__body,
.sx-post__body {
    padding-top: 1.1rem;
}

.sx-work__body h3,
.sx-post__body h3 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
}

.sx-work__body h3 a:hover,
.sx-post__body h3 a:hover {
    color: var(--sx-rose);
}

.sx-work__body p {
    margin-top: .3rem;
    font-size: .875rem;
    color: var(--sx-ink-soft);
}

.sx-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: .85rem;
    font-size: .8125rem;
    color: var(--sx-ink-soft);
}

.sx-post__meta img {
    width: 15px;
    vertical-align: -2px;
}

.sx-post__body p {
    margin: .6rem 0 1rem;
    font-size: .9375rem;
    color: var(--sx-ink-soft);
}

.sx-pagination {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 3rem;
}

.sx-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    border: 1px solid var(--sx-line);
    border-radius: 50%;
    font-family: var(--sx-heading);
    font-size: .9375rem;
    color: var(--sx-ink);
}

.sx-pagination a.active,
.sx-pagination a:hover {
    background: var(--sx-rose);
    border-color: var(--sx-rose);
    color: #fff;
}

/* --- article --- */
.sx-article p {
    margin-bottom: 1.25rem;
    color: var(--sx-ink-soft);
}

.sx-article__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sx-line);
}

.sx-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.sx-share {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
    color: var(--sx-ink-soft);
}

.sx-legal .sx-h3:first-of-type {
    margin-top: 1rem;
}

.sx-updated {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--sx-surface);
    font-size: .8125rem;
    color: var(--sx-ink-soft);
}

/* --- team profile --- */
.sx-profile__thumb {
    overflow: hidden;
    border-radius: var(--sx-radius);
}

.sx-profile__thumb img {
    width: 100%;
    aspect-ratio: 9 / 10;
    object-fit: cover;
}

.sx-profile__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 1.25rem;
    font-size: .875rem;
    color: var(--sx-ink-soft);
}

.sx-profile__role {
    margin-bottom: 1.5rem;
    color: var(--sx-rose);
    font-weight: 600;
}

.sx-skills {
    display: grid;
    gap: 1.1rem;
}

.sx-skill__head {
    display: flex;
    justify-content: space-between;
    margin-bottom: .45rem;
    font-family: var(--sx-heading);
    font-size: .875rem;
    font-weight: 500;
}

.sx-skill__bar {
    height: 6px;
    border-radius: 999px;
    background: var(--sx-surface);
    overflow: hidden;
}

.sx-skill__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sx-slate), var(--sx-rose));
}

[dir="rtl"] .sx-skill__bar span {
    background: linear-gradient(270deg, var(--sx-slate), var(--sx-rose));
}

.sx-join {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 3rem;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border-radius: var(--sx-radius);
    background: var(--sx-surface);
}

.sx-join h3 {
    margin-bottom: .4rem;
    font-size: 1.375rem;
    font-weight: 500;
}

.sx-join p {
    margin: 0;
    color: var(--sx-ink-soft);
    font-size: .9375rem;
}

.sx-join .sx-btn {
    align-self: flex-start;
}

@media (min-width: 768px) {
    .sx-join {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .sx-join .sx-btn {
        align-self: auto;
        flex: 0 0 auto;
    }
}

/* --- 404 --- */
.sx-404 {
    padding-top: clamp(9rem, 24vw, 14rem);
    padding-bottom: clamp(5rem, 12vw, 9rem);
    text-align: center;
    background-color: var(--sx-ink);
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.sx-404__code {
    display: block;
    font-family: var(--sx-heading);
    font-size: clamp(5rem, 22vw, 12rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    background: linear-gradient(100deg, var(--sx-rose), #C9BFD6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sx-404 .content .title {
    color: #fff;
}

.sx-404 .content p {
    color: rgba(255, 255, 255, .72);
}

.sx-404 .content .theme-btn {
    background: var(--sx-rose);
}

.sx-404 .content .theme-btn:hover {
    background: #fff;
    color: var(--sx-ink);
}

.sx-404__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 2.5rem;
}

.sx-404__links a {
    padding: .5rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    color: rgba(255, 255, 255, .8);
    font-size: .875rem;
}

.sx-404__links a:hover {
    background: var(--sx-rose);
    border-color: var(--sx-rose);
    color: #fff;
}

/*--------------------------------------------------------------
  06. Forms
--------------------------------------------------------------*/
.sx-form {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: #fff;
}

.sx-form h3 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 500;
}

.sx-form label {
    display: block;
    margin-bottom: .4rem;
    font-family: var(--sx-body);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sx-ink);
}

.sx-form input,
.sx-form select,
.sx-form textarea {
    width: 100%;
    min-height: 52px;
    padding: .85rem 1rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-sm);
    background: #fff;
    color: var(--sx-ink);
    font-family: var(--sx-body);
    font-size: 1rem;
    transition: border-color .3s ease;
}

.sx-form textarea {
    min-height: 150px;
    resize: vertical;
}

.sx-form input:focus,
.sx-form select:focus,
.sx-form textarea:focus {
    border-color: var(--sx-rose);
    outline: none;
    color: var(--sx-ink);
}

.sx-form input::placeholder,
.sx-form textarea::placeholder {
    color: #A49DAC;
}

.sx-consent {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-weight: 400 !important;
    font-size: .875rem !important;
    color: var(--sx-ink-soft) !important;
}

.sx-consent input {
    flex: 0 0 auto;
    width: 18px !important;
    height: 18px;
    min-height: 18px !important;
    margin: .2rem 0 0;
    padding: 0;
    accent-color: var(--sx-rose);
}

.sx-search {
    position: relative;
}

.sx-search input {
    width: 100%;
    min-height: 52px;
    padding: .8rem 3rem .8rem 1rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-sm);
    color: var(--sx-ink);
    font-size: .9375rem;
}

[dir="rtl"] .sx-search input {
    padding: .8rem 1rem .8rem 3rem;
}

.sx-search button {
    position: absolute;
    inset-inline-end: .5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--sx-rose);
    color: #fff;
}

.sx-contact-info {
    display: grid;
    gap: 1.25rem;
    margin: 2rem 0;
    padding: 1.5rem;
    border-radius: var(--sx-radius);
    background: var(--sx-surface);
}

.sx-contact-info__item span {
    display: block;
    margin-bottom: .2rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sx-rose);
}

.sx-contact-info__item a,
.sx-contact-info__item p {
    font-family: var(--sx-heading);
    font-size: 1rem;
    color: var(--sx-ink);
    margin: 0;
}

.sx-contact-info__item a:hover {
    color: var(--sx-rose);
}

@media (min-width: 576px) {
    .sx-contact-info {
        grid-template-columns: 1fr 1fr;
    }
}

.sx-note {
    font-size: .8125rem;
    color: var(--sx-ink-soft);
}

.sx-map-section {
    padding-bottom: clamp(3.5rem, 9vw, 7.5rem);
}

.sx-map {
    position: relative;
    overflow: hidden;
    border-radius: var(--sx-radius);
}

.sx-map img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.sx-map__card {
    position: relative;
    margin: -2.5rem 1rem 0;
    padding: 1.5rem;
    border-radius: var(--sx-radius-sm);
    background: #fff;
    box-shadow: var(--sx-shadow);
}

.sx-map__card strong {
    display: block;
    margin-bottom: .35rem;
    font-family: var(--sx-heading);
    font-size: 1.125rem;
}

.sx-map__card p {
    margin-bottom: .75rem;
    font-size: .9375rem;
    color: var(--sx-ink-soft);
}

@media (min-width: 768px) {
    .sx-map__card {
        position: absolute;
        inset-block-end: 2rem;
        inset-inline-start: 2rem;
        max-width: 320px;
        margin: 0;
    }

    .sx-map img {
        aspect-ratio: 21 / 9;
    }
}

/*--------------------------------------------------------------
  07. RTL / Arabic
--------------------------------------------------------------*/
[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] a,
[dir="rtl"] span,
[dir="rtl"] li,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button,
[dir="rtl"] label,
[dir="rtl"] cite {
    font-family: var(--sx-arabic);
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .breadcrumb-title,
[dir="rtl"] .hero-title,
[dir="rtl"] .sx-quote p,
[dir="rtl"] .sx-recent span,
[dir="rtl"] .sx-meta__item strong,
[dir="rtl"] .sx-contact-info__item a,
[dir="rtl"] .sx-contact-info__item p,
[dir="rtl"] .preloader-text {
    font-family: var(--sx-arabic);
    letter-spacing: 0;
}

/* Arabic runs taller than Latin; give the display sizes room to breathe. */
[dir="rtl"] h1,
[dir="rtl"] .hero-title,
[dir="rtl"] .breadcrumb-title {
    line-height: 1.24;
}

[dir="rtl"] h2 {
    line-height: 1.35;
}

[dir="rtl"] h3 {
    line-height: 1.5;
}

[dir="rtl"] .text-uppercase {
    text-transform: none;
}

/* Numbers, phone numbers and Latin brand names stay left-to-right. */
[dir="rtl"] [dir="ltr"] {
    display: inline-block;
    unicode-bidi: isolate;
}

/* Word-level reveal used instead of the theme's per-character split, which
   breaks Arabic letter joining. */
.sx-word-anim .sx-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.sx-word-anim .sx-wi {
    display: inline-block;
    will-change: transform;
}

/* The distortion canvases mirror with the layout. */
[dir="rtl"] .hero-image-items .text-items .arrow-icon svg {
    transform: scaleX(-1);
}

[dir="rtl"] .theme-btn-main .theme-btn-arrow-left i,
[dir="rtl"] .theme-btn-main .theme-btn-arrow-right i,
[dir="rtl"] .service-btn i,
[dir="rtl"] .sx-btn i,
[dir="rtl"] .sx-link i,
[dir="rtl"] .news-btn i {
    transform: scaleX(-1);
}

[dir="rtl"] .sx-side__list a:hover {
    padding-inline-start: 0;
    padding-inline-end: .6rem;
}

/*--------------------------------------------------------------
  08. Portfolio: case studies, templates, clients
--------------------------------------------------------------*/
.sx-chip {
    display: inline-flex;
    align-items: center;
    padding: .3rem .7rem;
    border: 1px solid var(--sx-line);
    border-radius: 999px;
    font-family: var(--sx-body);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sx-ink-soft);
    white-space: nowrap;
}

.sx-chip--accent {
    border-color: transparent;
    background: var(--sx-accent, var(--sx-rose));
    color: #fff;
}

.sx-chip--live {
    border-color: transparent;
    background: rgba(26, 22, 31, .06);
    color: var(--sx-ink);
}

.sx-chip--live::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-inline-end: .45rem;
    border-radius: 50%;
    background: #17b26a;
}

/* --- case studies --- */
.sx-cases__list {
    display: grid;
    gap: clamp(2.5rem, 7vw, 5rem);
}

.sx-case {
    display: grid;
    gap: clamp(1.25rem, 4vw, 2.5rem);
    align-items: center;
    grid-template-columns: 1fr;
}

.sx-case__thumb {
    display: block;
    overflow: hidden;
    border-radius: var(--sx-radius);
    background: var(--sx-surface);
    box-shadow: 0 24px 60px -34px color-mix(in srgb, var(--sx-accent, #1A161F) 70%, transparent);
}

.sx-case__thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.23, 1, .32, 1);
}

.sx-case:hover .sx-case__thumb img {
    transform: scale(1.03);
}

.sx-case__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.sx-case__domain {
    font-family: var(--sx-body);
    font-size: .8125rem;
    color: var(--sx-ink-soft);
}

.sx-case__title {
    font-size: clamp(1.375rem, 3.2vw, 2.125rem);
    font-weight: 500;
    line-height: 1.2;
}

.sx-case__title a:hover {
    color: var(--sx-accent, var(--sx-rose));
}

.sx-case__tagline {
    margin: .6rem 0 1rem;
    font-family: var(--sx-heading);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--sx-accent, var(--sx-rose));
}

.sx-case__body > p {
    color: var(--sx-ink-soft);
}

.sx-case__stack {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1.25rem;
}

.sx-case__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.75rem;
}

.sx-case__actions .sx-btn {
    background: var(--sx-accent, var(--sx-ink));
}

.sx-case__actions .sx-btn:hover {
    background: var(--sx-ink);
}

@media (min-width: 992px) {
    .sx-case {
        grid-template-columns: 1.15fr 1fr;
    }

    .sx-case--flip .sx-case__thumb {
        order: 2;
    }
}

.sx-check--single {
    grid-template-columns: 1fr;
}

.sx-meta--single {
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .sx-meta--single {
        grid-template-columns: 1fr;
    }
}

/* --- template cards --- */
.sx-tpl {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: #fff;
    transition: all .4s ease;
}

.sx-tpl:hover {
    border-color: transparent;
    box-shadow: var(--sx-shadow);
    transform: translateY(-4px);
}

.sx-tpl__thumb {
    display: block;
    overflow: hidden;
    background: var(--sx-surface);
}

.sx-tpl__thumb img {
    width: 100%;
    aspect-ratio: 16 / 9.55;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.23, 1, .32, 1);
}

.sx-tpl:hover .sx-tpl__thumb img {
    transform: scale(1.04);
}

.sx-tpl__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.4rem;
}

.sx-tpl__body h3 {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.35;
}

.sx-tpl__body h3 a:hover {
    color: var(--sx-rose);
}

.sx-tpl__body > p {
    margin: .6rem 0 1rem;
    font-size: .875rem;
    color: var(--sx-ink-soft);
}

.sx-tpl__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.sx-tpl__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    margin-top: auto;
    padding-top: 1.1rem;
}

.sx-tpl__actions .sx-link {
    font-size: .875rem;
}

.sx-link--muted {
    color: var(--sx-ink-soft);
    font-weight: 500;
}

/* --- sector filter --- */
.sx-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2.5rem;
}

.sx-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: 0 1.1rem;
    border: 1px solid var(--sx-line);
    border-radius: 999px;
    background: transparent;
    color: var(--sx-ink);
    font-family: var(--sx-body);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .3s ease;
}

.sx-filter__n {
    font-size: .6875rem;
    color: var(--sx-ink-soft);
}

.sx-filter__btn:hover {
    border-color: var(--sx-rose);
    color: var(--sx-rose);
}

.sx-filter__btn.active {
    background: var(--sx-ink);
    border-color: var(--sx-ink);
    color: #fff;
}

.sx-filter__btn.active .sx-filter__n {
    color: rgba(255, 255, 255, .6);
}

.sx-filter__empty {
    padding: 2rem 0;
    text-align: center;
    color: var(--sx-ink-soft);
}

.sx-tpl-cell.is-hidden {
    display: none;
}

.sx-related {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
    border-top: 1px solid var(--sx-line);
}

/* --- client wall --- */
.sx-clients-section {
    background: var(--sx-ink);
}

.sx-clients-section .section-title h2,
.sx-clients-section .sx-details__title,
.sx-clients-section h2 {
    color: #fff;
}

.sx-clients-section .sx-lead,
.sx-clients-section .sx-note {
    color: rgba(255, 255, 255, .62);
}

.sx-clients-section .sx-link {
    color: #fff;
}

.sx-clients-section .sx-link:hover {
    color: var(--sx-rose);
}

.sx-logo-wall {
    display: grid;
    gap: 1px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--sx-radius);
    overflow: hidden;
    grid-template-columns: repeat(2, 1fr);
}

.sx-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 108px;
    padding: 1.25rem;
    background: var(--sx-ink);
    transition: background .35s ease;
}

.sx-logo img {
    width: auto;
    max-width: 100%;
    max-height: 62px;
    opacity: .82;
    transition: opacity .35s ease, transform .35s ease;
}

a.sx-logo:hover {
    background: #221D28;
}

a.sx-logo:hover img {
    opacity: 1;
    transform: scale(1.04);
}

@media (min-width: 576px) {
    .sx-logo-wall {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .sx-logo-wall {
        grid-template-columns: repeat(4, 1fr);
    }

    .sx-logo {
        min-height: 132px;
    }

    .sx-logo img {
        max-height: 64px;
    }
}

/* The clients section on a light page keeps the dark wall as its own band. */
.sx-clients-section + .sx-cases,
.sx-clients-section + .section-padding {
    padding-top: clamp(3.5rem, 9vw, 7.5rem);
}

/*--------------------------------------------------------------
  09. Pricing
--------------------------------------------------------------*/
.sx-lead--center {
    max-width: 68ch;
    margin-inline: auto;
}

.sx-filter--center {
    justify-content: center;
    margin-bottom: 2.5rem;
}

.sx-plans {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    align-items: stretch;
}

@media (min-width: 700px) {
    .sx-plans {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1050px) {
    .sx-plans {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sx-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.75rem 1.5rem 1.5rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: #fff;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.sx-plan:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--sx-shadow);
}

/* The chosen plan carries the brand, so the eye lands on it first. */
.sx-plan--featured {
    border-color: transparent;
    background: var(--sx-ink);
    color: #fff;
    box-shadow: 0 30px 70px -40px rgba(26, 22, 31, .8);
}

.sx-plan__flag {
    position: absolute;
    inset-block-start: -.75rem;
    inset-inline-start: 1.5rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: var(--sx-rose);
    color: #fff;
    font-family: var(--sx-body);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sx-plan__name {
    font-size: 1.375rem;
    font-weight: 500;
}

.sx-plan--featured .sx-plan__name {
    color: #fff;
}

.sx-plan__summary {
    margin: .4rem 0 1.25rem;
    font-size: .9375rem;
    color: var(--sx-ink-soft);
}

.sx-plan--featured .sx-plan__summary {
    color: rgba(255, 255, 255, .7);
}

.sx-plan__price {
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

.sx-plan__amount {
    font-family: var(--sx-heading);
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
}

.sx-plan--featured .sx-plan__amount {
    color: var(--sx-rose);
}

.sx-plan__cur {
    font-family: var(--sx-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--sx-ink-soft);
}

.sx-plan--featured .sx-plan__cur {
    color: rgba(255, 255, 255, .6);
}

.sx-plan__period {
    margin-top: .35rem;
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sx-ink-soft);
}

.sx-plan--featured .sx-plan__period {
    color: rgba(255, 255, 255, .55);
}

.sx-plan__list {
    display: grid;
    gap: .6rem;
    margin: 1.4rem 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sx-line);
}

.sx-plan--featured .sx-plan__list {
    border-top-color: rgba(255, 255, 255, .16);
}

.sx-plan__list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .9375rem;
    color: var(--sx-ink-soft);
}

.sx-plan--featured .sx-plan__list li {
    color: rgba(255, 255, 255, .8);
}

.sx-plan__list i {
    flex: 0 0 auto;
    margin-top: .3rem;
    color: var(--sx-rose);
}

.sx-plan .sx-btn {
    margin-top: auto;
}

.sx-plan--featured .sx-btn {
    background: var(--sx-rose);
}

.sx-plan--featured .sx-btn:hover {
    background: #fff;
    color: var(--sx-ink);
}

.sx-pricing .sx-note {
    max-width: 64ch;
    margin: 2rem auto 0;
}

/*--------------------------------------------------------------
  10. Brand film
--------------------------------------------------------------*/
.sx-film {
    position: relative;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.sx-film video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--sx-radius);
    background: #000;
    box-shadow: 0 50px 110px -50px rgba(0, 0, 0, .85);
}

.sx-film__cap {
    margin-top: .9rem;
    text-align: center;
    font-size: .8125rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

/* The magnific wrapper is transparent by default; give the film room to
   breathe and keep the close button clear of the video. */
.sx-film-mfp .mfp-content {
    padding: 0 1rem;
}

.sx-film-mfp .mfp-close {
    top: -46px;
    right: 0;
    color: #fff;
    opacity: .85;
}

[dir="rtl"] .sx-film-mfp .mfp-close {
    right: auto;
    left: 0;
}

/* Fallback overlay when magnific is unavailable. */
.sx-film.is-open {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex !important;
    align-items: center;
    justify-content: center;
    max-width: none;
    padding: 1.5rem;
    background: rgba(10, 8, 13, .92);
}

.sx-film.is-open video {
    max-width: 1120px;
}

/*--------------------------------------------------------------
  Footer credit
--------------------------------------------------------------*/
.footer-bottom .container {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-bottom .container {
        justify-content: space-between;
        text-align: start;
    }
}

.footer-bottom .credit a {
    color: inherit;
    opacity: .75;
}

.footer-bottom .credit a:hover {
    color: var(--sx-rose);
    opacity: 1;
}