/*

|--------------------------------------------------------------------------

| SHENDY TECH - PREMIUM GLOBAL LAYOUT

|--------------------------------------------------------------------------

*/

:root {

    --st-dark: #021844;

    --st-primary: #062b66;

    --st-accent: #f8b400;

    --st-accent-light: #ffca39;

    --st-white: #ffffff;

    --st-text: #071d47;

    --st-muted: #6e7d92;

    --st-soft: #f6f9fe;

    --st-border:

        rgba(

            6,

            43,

            102,

            .08

        );

    --st-container: 1480px;

    --st-header-height: 82px;

    --st-page-x: 32px;

}



/* ========================================================================

   RESET

   ======================================================================== */

*,

*::before,

*::after {

    box-sizing: border-box;

}



html {

    width: 100%;

    scroll-behavior: smooth;

}



body.st-site {

    width: 100%;

    min-width: 320px;

    margin: 0;

    overflow-x: hidden;

    color:

        var(--st-text);

    background:

        #ffffff;

    font-family:

        "Inter",

        "Cairo",

        sans-serif;

    -webkit-font-smoothing:

        antialiased;

    text-rendering:

        optimizeLegibility;

}



html[dir="rtl"]

body.st-site {

    direction: rtl;

    font-family:

        "Cairo",

        "Inter",

        sans-serif;

}



html[dir="ltr"]

body.st-site {

    direction: ltr;

}



body.st-nav-open {

    overflow: hidden;

}



body.st-site a {

    color: inherit;

    text-decoration: none;

}



body.st-site img {

    display: block;

    max-width: 100%;

}



body.st-site button,

body.st-site input,

body.st-site textarea,

body.st-site select {

    font: inherit;

}



/* ========================================================================

   CONTAINER

   ======================================================================== */

body.st-site
.st-container {

    width:
        min(
            calc(
                100% - (var(--st-page-x) * 2)
            ),
            var(--st-container)
        );

    margin-inline: auto;
}




/* ========================================================================

   SKIP

   ======================================================================== */

.st-skip-link {

    position: fixed;

    inset-block-start: 10px;

    inset-inline-start: 10px;

    z-index: 999999;

    opacity: 0;

    pointer-events: none;

    padding:

        10px

        15px;

    border-radius:

        10px;

    color: #ffffff !important;

    background:

        var(--st-dark);

}



.st-skip-link:focus {

    opacity: 1;

    pointer-events: auto;

}



/* ========================================================================

   PAGE PROGRESS

   ======================================================================== */

.st-page-progress {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 10050;

    width: 0;

    height: 3px;

    background:

        linear-gradient(

            90deg,

            var(--st-accent),

            var(--st-accent-light)

        );

    pointer-events: none;

}



/* ========================================================================

   HEADER

   ======================================================================== */

body.st-site .st-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

    height:

        var(--st-header-height);

    direction: ltr;

    transition:

        height .3s ease;

}



body.st-site

.st-header-background {

    position: absolute;

    inset: 0;

    background:

        rgba(

            255,

            255,

            255,

            .96

        );

    border-bottom:

        1px solid

        rgba(

            6,

            43,

            102,

            .06

        );

    backdrop-filter:

        blur(20px)

        saturate(160%);

    -webkit-backdrop-filter:

        blur(20px)

        saturate(160%);

    transition:

        background .3s ease,

        box-shadow .3s ease;

}



body.st-site

.st-header.is-scrolled {

    height: 74px;

}



body.st-site

.st-header.is-scrolled

.st-header-background {

    background:

        rgba(

            255,

            255,

            255,

            .985

        );

    box-shadow:

        0 12px 35px

        rgba(

            2,

            24,

            68,

            .055

        );

}



/* ========================================================================

   HEADER INNER

   ======================================================================== */

body.st-site

.st-header-inner {

    position: relative;

    z-index: 2;

    height: 100%;

    display: grid;

    grid-template-columns:

        minmax(

            260px,

            1fr

        )

        auto

        minmax(

            260px,

            1fr

        );

    grid-template-areas:

        "brand nav actions";

    align-items: center;

    gap: 22px;

    direction: ltr;

}



/* ========================================================================

   LOGO

   ======================================================================== */

body.st-site

.st-brand {

    grid-area: brand;

    justify-self: start;

    width: 255px;

    max-width: 100%;

    display: flex;

    align-items: center;

    transition:

        width .3s ease,

        transform .3s ease;

}



body.st-site

.st-header.is-scrolled

.st-brand {

    width: 235px;

}



body.st-site

.st-brand:hover {

    transform:

        translateY(-1px);

}



body.st-site

.st-brand img {

    width: 100%;

    height: auto;

    object-fit: contain;

}



/* ========================================================================

   NAVIGATION

   ======================================================================== */

body.st-site

.st-nav {

    grid-area: nav;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 3px;

    padding: 5px;

    direction: rtl;

    border:

        1px solid

        rgba(

            6,

            43,

            102,

            .055

        );

    border-radius:

        16px;

    background:

        rgba(

            247,

            250,

            255,

            .78

        );

    box-shadow:

        0 4px 20px

        rgba(

            2,

            24,

            68,

            .015

        );

}



html[dir="ltr"]

body.st-site

.st-nav {

    direction: ltr;

}



body.st-site

.st-nav > a {

    position: relative;

    min-height: 43px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding-inline:

        18px;

    overflow: hidden;

    border-radius:

        11px;

    color:

        #344761;

    background:

        transparent;

    font-size:

        13px;

    font-weight:

        800;

    white-space: nowrap;

    transition:

        color .22s ease,

        background .22s ease,

        box-shadow .22s ease,

        transform .22s ease;

}



/*

|--------------------------------------------------------------------------

| مهم: إلغاء أي Indicator قديم

|--------------------------------------------------------------------------

*/

body.st-site

.st-nav > a::before {

    content: none !important;

    display: none !important;

}



/*

|--------------------------------------------------------------------------

| Indicator الصحيح

|--------------------------------------------------------------------------

*/

body.st-site

.st-nav > a::after {

    content: "" !important;

    position: absolute !important;

    left: 50% !important;

    right: auto !important;

    bottom: 5px !important;

    width: 0;

    height: 3px;

    opacity: 0;

    border-radius:

        999px;

    background:

        var(--st-accent) !important;

    transform:

        translateX(-50%) !important;

    transition:

        width .24s ease,

        opacity .24s ease;

}



body.st-site

.st-nav > a:hover {

    color:

        var(--st-dark);

    background:

        rgba(

            255,

            255,

            255,

            .92

        );

}



body.st-site

.st-nav > a:hover::after {

    width: 24px !important;

    opacity: 1 !important;

}



body.st-site

.st-nav > a.is-active {

    color:

        var(--st-dark);

    background:

        #ffffff;

    box-shadow:

        0 7px 20px

        rgba(

            2,

            24,

            68,

            .055

        );

}



body.st-site

.st-nav > a.is-active::after {

    width: 24px !important;

    opacity: 1 !important;

}



/* ========================================================================

   HEADER ACTIONS

   ======================================================================== */

body.st-site

.st-header-actions {

    grid-area: actions;

    justify-self: end;

    display: flex;

    align-items: center;

    gap: 8px;

    direction: ltr;

}



/* ========================================================================

   DEMO BUTTON

   ======================================================================== */

body.st-site

.st-demo-btn {

    order: 1;

    min-height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    padding:

        0

        10px

        0

        18px;

    border-radius:

        14px;

    color:

        var(--st-dark) !important;

    background:

        linear-gradient(

            135deg,

            var(--st-accent),

            var(--st-accent-light)

        );

    box-shadow:

        0 11px 28px

        rgba(

            248,

            180,

            0,

            .18

        );

    font-size:

        12px;

    font-weight:

        900;

    direction: rtl;

    transition:

        transform .25s ease,

        box-shadow .25s ease;

}



html[dir="ltr"]

body.st-site

.st-demo-btn {

    direction: ltr;

}



body.st-site

.st-demo-btn:hover {

    transform:

        translateY(-2px);

    box-shadow:

        0 17px 34px

        rgba(

            248,

            180,

            0,

            .25

        );

}



body.st-site

.st-demo-btn i {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background:

        #ffffff;

}



body.st-site

.st-demo-btn svg {

    width: 15px;

    height: 15px;

    fill: none;

    stroke:

        var(--st-dark);

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}



/* ========================================================================

   LANGUAGE BUTTON

   ======================================================================== */

body.st-site

.st-language {

    order: 2;

    min-width: 52px;

    min-height: 46px;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding-inline:

        12px;

    border:

        1px solid

        var(--st-border);

    border-radius:

        13px;

    color:

        var(--st-dark) !important;

    background:

        #ffffff;

    box-shadow:

        0 5px 16px

        rgba(

            2,

            24,

            68,

            .025

        );

    font-family:

        "Inter",

        sans-serif;

    font-size:

        10px;

    font-weight:

        900;

    direction: ltr;

    transition:

        transform .2s ease,

        background .2s ease;

}



body.st-site

.st-language:hover {

    transform:

        translateY(-2px);

    background:

        #fbfcff;

}



body.st-site

.st-language svg {

    width: 18px;

    height: 18px;

    flex-shrink: 0;

    fill: none;

    stroke:

        currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

}



/* ========================================================================

   MOBILE MENU BUTTON

   ======================================================================== */

body.st-site

.st-menu-btn {

    order: 3;

    display: none;

    width: 46px;

    height: 46px;

    min-width: 46px;

    padding: 0;

    border: 0;

    border-radius:

        13px;

    background:

        var(--st-dark);

    cursor: pointer;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

}



body.st-site

.st-menu-btn span {

    width: 19px;

    height: 2px;

    border-radius:

        99px;

    background:

        #ffffff;

    transition:

        transform .25s ease,

        opacity .25s ease;

}



body.st-site

.st-menu-btn[aria-expanded="true"]

span:nth-child(1) {

    transform:

        translateY(7px)

        rotate(45deg);

}



body.st-site

.st-menu-btn[aria-expanded="true"]

span:nth-child(2) {

    opacity: 0;

}



body.st-site

.st-menu-btn[aria-expanded="true"]

span:nth-child(3) {

    transform:

        translateY(-7px)

        rotate(-45deg);

}



/* ========================================================================

   MOBILE OVERLAY

   ======================================================================== */

body.st-site

.st-mobile-nav-overlay {

    position: fixed !important;

    inset: 0 !important;

    z-index: 1098;

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

    background:

        rgba(

            2,

            24,

            68,

            .38

        );

    backdrop-filter:

        blur(6px);

    -webkit-backdrop-filter:

        blur(6px);

    transition:

        opacity .3s ease,

        visibility .3s ease;

}



body.st-site

.st-mobile-nav-overlay.is-open {

    visibility: visible !important;

    opacity: 1 !important;

    pointer-events: auto !important;

}



/* ========================================================================

   MOBILE DRAWER

   ======================================================================== */

body.st-site

.st-mobile-nav {

    position: fixed !important;

    top: 0 !important;

    z-index: 1099;

    width:

        min(

            420px,

            92vw

        );

    height:

        100dvh;

    display: flex !important;

    flex-direction: column;

    padding:

        22px;

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

    background:

        linear-gradient(

            180deg,

            #ffffff 0%,

            #f6f9fe 100%

        );

    box-shadow:

        0 0 80px

        rgba(

            2,

            24,

            68,

            .18

        );

    transition:

        transform .42s

        cubic-bezier(

            .2,

            .8,

            .2,

            1

        ),

        opacity .28s ease,

        visibility .42s ease;

}



/*

|--------------------------------------------------------------------------

| Arabic => Right Drawer

|--------------------------------------------------------------------------

*/

html[dir="rtl"]

body.st-site

.st-mobile-nav {

    right: 0 !important;

    left: auto !important;

    transform:

        translateX(105%);

}



/*

|--------------------------------------------------------------------------

| English => Left Drawer

|--------------------------------------------------------------------------

*/

html[dir="ltr"]

body.st-site

.st-mobile-nav {

    left: 0 !important;

    right: auto !important;

    transform:

        translateX(-105%);

}



body.st-site

.st-mobile-nav.is-open {

    visibility: visible !important;

    opacity: 1 !important;

    pointer-events: auto !important;

    transform:

        translateX(0) !important;

}



/* ========================================================================

   MOBILE DRAWER HEADER

   ======================================================================== */

body.st-site

.st-mobile-nav-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-bottom:

        20px;

    border-bottom:

        1px solid

        var(--st-border);

}



body.st-site

.st-mobile-brand {

    width: 210px;

}



body.st-site

.st-mobile-brand img {

    width: 100%;

}



body.st-site

.st-mobile-nav-close {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    padding: 0;

    border:

        1px solid

        var(--st-border);

    border-radius:

        12px;

    color:

        var(--st-dark);

    background:

        #ffffff;

    cursor: pointer;

}



body.st-site

.st-mobile-nav-close svg {

    width: 18px;

    height: 18px;

    fill: none;

    stroke:

        currentColor;

    stroke-width: 2;

    stroke-linecap: round;

}



/* ========================================================================

   MOBILE MENU LABEL

   ======================================================================== */

body.st-site

.st-mobile-menu-label {

    margin:

        26px

        0

        7px;

    color:

        #97a4b6;

    font-size:

        9px;

    font-weight:

        900;

    letter-spacing:

        .5px;

}



/* ========================================================================

   MOBILE LINKS

   ======================================================================== */

body.st-site

.st-mobile-links {

    display: grid;

}



body.st-site

.st-mobile-links > a {

    position: relative;

    min-height: 63px;

    display: grid;

    grid-template-columns:

        35px

        1fr

        auto;

    align-items: center;

    gap: 9px;

    padding-inline:

        5px;

    border-bottom:

        1px solid

        var(--st-border);

    transition:

        background .2s ease,

        padding .2s ease;

}



html[dir="rtl"]

body.st-site

.st-mobile-links > a {

    direction: rtl;

}



body.st-site

.st-mobile-links > a:hover,

body.st-site

.st-mobile-links > a.is-active {

    background:

        rgba(

            248,

            180,

            0,

            .045

        );

    padding-inline:

        10px;

}



body.st-site

.st-mobile-links > a > span {

    color:

        var(--st-accent);

    font-family:

        "Inter",

        sans-serif;

    font-size:

        8px;

    font-weight:

        900;

}



body.st-site

.st-mobile-links > a > strong {

    color:

        var(--st-dark);

    font-size:

        16px;

    font-weight:

        800;

}



body.st-site

.st-mobile-links > a > i {

    color:

        #96a3b4;

    font-style: normal;

    font-size:

        11px;

}



/* ========================================================================

   MOBILE NAV BOTTOM

   ======================================================================== */

body.st-site

.st-mobile-nav-footer {

    display: grid;

    gap: 9px;

    margin-top: auto;

    padding-top:

        25px;

}



/*

|--------------------------------------------------------------------------

| Mobile Demo

|--------------------------------------------------------------------------

*/

body.st-site

.st-mobile-demo {

    min-height: 55px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-inline:

        18px;

    border-radius:

        14px;

    color:

        #ffffff !important;

    background:

        linear-gradient(

            135deg,

            var(--st-dark),

            var(--st-primary)

        );

    font-size:

        13px;

    font-weight:

        900;

}



body.st-site

.st-mobile-demo > i {

    color:

        var(--st-accent);

    font-style: normal;

}



/*

|--------------------------------------------------------------------------

| Mobile Language

|--------------------------------------------------------------------------

*/

body.st-site

.st-mobile-language {

    min-height: 50px;

    display: flex !important;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-inline:

        17px;

    border:

        1px solid

        var(--st-border);

    border-radius:

        14px;

    color:

        var(--st-dark) !important;

    background:

        #ffffff;

    font-size:

        12px;

    font-weight:

        800;

}



body.st-site

.st-mobile-language strong {

    min-width: 35px;

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:

        8px;

    color:

        var(--st-dark);

    background:

        #eef3fb;

    font-family:

        "Inter",

        sans-serif;

    font-size:

        9px;

    font-weight:

        900;

}



/* ========================================================================

   MAIN

   ======================================================================== */

body.st-site

#main-content {

    position: relative;

    width: 100%;

    min-height:

        50vh;

}



/* ========================================================================

   FOOTER

   ======================================================================== */

body.st-site

.st-footer {

    position: relative;

    overflow: hidden;

    padding:

        68px

        0

        26px;

    color:

        #ffffff;

    background:

        linear-gradient(

            145deg,

            #010b23,

            #021844 58%,

            #052d69

        );

    isolation: isolate;

}



body.st-site

.st-footer-grid-bg {

    position: absolute;

    inset: 0;

    z-index: -3;

    opacity: .18;

    background-image:

        linear-gradient(

            rgba(

                255,

                255,

                255,

                .04

            )

            1px,

            transparent

            1px

        ),

        linear-gradient(

            90deg,

            rgba(

                255,

                255,

                255,

                .04

            )

            1px,

            transparent

            1px

        );

    background-size:

        52px

        52px;

}



body.st-site

.st-footer-glow {

    position: absolute;

    top: -320px;

    right: 10%;

    z-index: -2;

    width: 600px;

    height: 600px;

    border-radius:

        50%;

    background:

        rgba(

            248,

            180,

            0,

            .13

        );

    filter:

        blur(110px);

}



/* ========================================================================

   FOOTER CTA

   ======================================================================== */

body.st-site

.st-footer-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    margin-bottom:

        68px;

    padding:

        37px

        40px;

    border:

        1px solid

        rgba(

            255,

            255,

            255,

            .08

        );

    border-radius:

        27px;

    background:

        rgba(

            255,

            255,

            255,

            .045

        );

    backdrop-filter:

        blur(14px);

}



body.st-site

.st-footer-cta > div > span {

    color:

        var(--st-accent);

    font-family:

        "Inter",

        sans-serif;

    font-size:

        9px;

    font-weight:

        900;

    letter-spacing:

        1.8px;

}



body.st-site

.st-footer-cta h2 {

    max-width: 800px;

    margin:

        8px

        0

        0;

    color: #ffffff;

    font-size:

        clamp(

            28px,

            3vw,

            43px

        );

    font-weight:

        900;

    line-height:

        1.35;

}



body.st-site

.st-footer-cta > a {

    min-width: 180px;

    min-height: 53px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    flex-shrink: 0;

    padding-inline:

        19px;

    border-radius:

        15px;

    color:

        var(--st-dark) !important;

    background:

        var(--st-accent);

    font-size:

        13px;

    font-weight:

        900;

}



body.st-site

.st-footer-cta > a i {

    font-style:

        normal;

}



/* ========================================================================

   FOOTER MAIN

   ======================================================================== */

body.st-site

.st-footer-main {

    display: grid;

    grid-template-columns:

        minmax(

            320px,

            1.2fr

        )

        minmax(

            520px,

            1fr

        );

    gap:

        90px;

    padding-bottom:

        62px;

}



body.st-site

.st-footer-brand > img {

    width: 330px;

    max-width:

        100%;

}



body.st-site

.st-footer-brand > p {

    max-width:

        530px;

    margin:

        26px

        0;

    color:

        rgba(

            255,

            255,

            255,

            .58

        );

    font-size:

        13px;

    line-height:

        2;

}



body.st-site

.st-footer-status {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:

        rgba(

            255,

            255,

            255,

            .66

        );

    font-size:

        10px;

    font-weight:

        700;

}



body.st-site

.st-footer-status > i {

    width: 8px;

    height: 8px;

    border-radius:

        50%;

    background:

        #24d689;

    box-shadow:

        0 0 0 5px

        rgba(

            36,

            214,

            137,

            .09

        );

}



/* ========================================================================

   FOOTER LINKS

   ======================================================================== */

body.st-site

.st-footer-links {

    display: grid;

    grid-template-columns:

        repeat(

            3,

            1fr

        );

    gap:

        38px;

}



body.st-site

.st-footer-links > div {

    display: flex;

    flex-direction:

        column;

    align-items:

        flex-start;

    gap:

        11px;

}



body.st-site

.st-footer-links h3 {

    margin:

        0

        0

        9px;

    color:

        var(--st-accent);

    font-size:

        12px;

    font-weight:

        900;

}



body.st-site

.st-footer-links a {

    color:

        rgba(

            255,

            255,

            255,

            .58

        );

    font-size:

        11px;

    transition:

        color .2s ease,

        transform .2s ease;

}



body.st-site

.st-footer-links a:hover {

    color:

        #ffffff;

}



html[dir="rtl"]

body.st-site

.st-footer-links a:hover {

    transform:

        translateX(-3px);

}



html[dir="ltr"]

body.st-site

.st-footer-links a:hover {

    transform:

        translateX(3px);

}



/* ========================================================================

   FOOTER BOTTOM

   ======================================================================== */

body.st-site

.st-footer-bottom {

    display: grid;

    grid-template-columns:

        1fr

        auto

        1fr;

    align-items:

        center;

    gap:

        25px;

    padding-top:

        23px;

    border-top:

        1px solid

        rgba(

            255,

            255,

            255,

            .075

        );

    color:

        rgba(

            255,

            255,

            255,

            .38

        );

    font-size:

        9px;

}



body.st-site

.st-footer-bottom > a {

    justify-self:

        end;

    color:

        rgba(

            255,

            255,

            255,

            .48

        );

}



body.st-site

.st-footer-slogan {

    font-family:

        "Inter",

        sans-serif;

    font-size:

        7px;

    letter-spacing:

        1.7px;

    white-space:

        nowrap;

}



/* ========================================================================

   LAPTOP

   ======================================================================== */

@media (

    max-width: 1280px

) {

    body.st-site

    .st-header-inner {

        grid-template-columns:

            minmax(

                210px,

                1fr

            )

            auto

            minmax(

                210px,

                1fr

            );

        gap:

            14px;

    }



    body.st-site

    .st-brand {

        width:

            225px;

    }



    body.st-site

    .st-nav > a {

        padding-inline:

            13px;

    }



    body.st-site

    .st-footer-main {

        gap:

            60px;

    }

}



/* ========================================================================

   TABLET / MOBILE HEADER

   ======================================================================== */

@media (

    max-width: 1050px

) {

    :root {

        --st-header-height: 75px;
        --st-page-x: 17px;
    }


    body.st-site

    .st-header-inner {

        grid-template-columns:

            minmax(

                0,

                1fr

            )

            auto;

        grid-template-areas:

            "brand actions";

        gap:

            10px;

    }



    body.st-site

    .st-brand {

        width:

            205px;

        justify-self:

            start;

    }



    body.st-site

    .st-header.is-scrolled

    .st-brand {

        width:

            195px;

    }



    body.st-site

    .st-nav {

        display:

            none !important;

    }



    body.st-site

    .st-header-actions {

        justify-self:

            end;

        gap:

            6px;

    }



    body.st-site

    .st-demo-btn {

        display:

            none !important;

    }



    body.st-site

    .st-language {

        display:

            inline-flex !important;

    }



    body.st-site

    .st-menu-btn {

        display:

            flex !important;

    }



    body.st-site

    .st-footer-main {

        grid-template-columns:

            1fr;

        gap:

            50px;

    }

}



/* ========================================================================

   MOBILE

   ======================================================================== */

@media (

    max-width: 700px

) {

    :root {

        --st-header-height: 74px;
        --st-page-x: 12px;
    }


    body.st-site

    .st-brand {

        width:

            165px;

    }



    body.st-site

    .st-header.is-scrolled

    .st-brand {

        width:

            158px;

    }



    body.st-site

    .st-header-actions {

        gap:

            6px;

    }



    /*

    |--------------------------------------------------------------------------

    | Language MUST stay visible

    |--------------------------------------------------------------------------

    */

    body.st-site

    .st-language {

        display:

            inline-flex !important;

        width:

            43px;

        height:

            43px;

        min-width:

            43px;

        min-height:

            43px;

        padding:

            0;

        gap:

            0;

        border-radius:

            12px;

        font-size:

            9px;

    }



    body.st-site

    .st-language svg {

        display:

            none;

    }



    body.st-site

    .st-menu-btn {

        display:

            flex !important;

        width:

            43px;

        height:

            43px;

        min-width:

            43px;

        border-radius:

            12px;

    }



    /*

    |--------------------------------------------------------------------------

    | Footer

    |--------------------------------------------------------------------------

    */

    body.st-site

    .st-footer {

        padding-top:

            44px;

    }



    body.st-site

    .st-footer-cta {

        flex-direction:

            column;

        align-items:

            flex-start;

        gap:

            25px;

        margin-bottom:

            48px;

        padding:

            26px;

        border-radius:

            21px;

    }



    body.st-site

    .st-footer-cta > a {

        width:

            100%;

    }



    body.st-site

    .st-footer-links {

        grid-template-columns:

            repeat(

                2,

                minmax(

                    0,

                    1fr

                )

            );

        gap:

            35px

            22px;

    }



    body.st-site

    .st-footer-bottom {

        grid-template-columns:

            1fr;

        gap:

            9px;

    }



    body.st-site

    .st-footer-bottom > a {

        justify-self:

            start;

    }



    body.st-site

    .st-footer-slogan {

        white-space:

            normal;

    }

}



/* ========================================================================

   SMALL MOBILE

   ======================================================================== */

@media (

    max-width: 420px

) {

    body.st-site

    .st-brand {

        width:

            150px;

    }



    body.st-site

    .st-header.is-scrolled

    .st-brand {

        width:

            145px;

    }



    body.st-site

    .st-language {

        width:

            40px;

        height:

            40px;

        min-width:

            40px;

        min-height:

            40px;

    }



    body.st-site

    .st-menu-btn {

        width:

            40px;

        height:

            40px;

        min-width:

            40px;

    }



    body.st-site

    .st-mobile-nav {

        width:

            min(

                390px,

                94vw

            );

        padding:

            18px;

    }



    body.st-site

    .st-mobile-brand {

        width:

            185px;

    }



    body.st-site

    .st-footer-links {

        grid-template-columns:

            1fr;

    }

}