:root,
:host {
    --breakpoint-sm: 30rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
    --breakpoint-2xl: 96rem;

    --color-primary: #343d4c;
    --color-secondary: #39aeb2;
    --color-third: #597183;
    --color-grey: #f2f2f2;
    --color-brown: #a56e59;
    --color-white: #ffffff;
    --color-black: #000000;
    --font-primary: "JetourKSAFontCombined", sans-serif;
    --font-secondary: "DINAlternateBold", sans-serif;


    /* spacing scale (extracted from Block-Hero paddings) */
    --space-3: 0.1875rem; /* 3px */
    --space-15: 0.9375rem; /* 15px */
    --space-20: 1.25rem; /* 20px */
    --space-23: 1.4375rem; /* 23px */
    --space-25: 1.5625rem; /* 25px */
    --space-38: 2.375rem; /* 38px */
    --space-70: 4.375rem; /* 70px */
    --space-80: 5rem; /* 80px */
    --space-90: 5.625rem; /* 90px */
    --space-120: 7.5rem; /* 120px */

    /* spacing: primary hero bottom padding (now uses spacing scale) */
    --padding-1: var(--space-15);

    /* hero height tokens */
    --hero-height-md: 37.5rem; /* 600px */
    --hero-height-lg: 41.5625rem; /* 665px */

    /* rgb components for color-black so it can be used in rgba(var(--color-black-rgb), <alpha>) */
    --color-black-rgb: 0, 0, 0; /* equivalent to #000000 */

    /* font sizes used by hero block (extracted for reuse) */
    --font-size-17: 1.0625rem; /* 17px */
    --font-size-20: 1.25rem; /* 20px */
    --font-size-23: 1.4375rem; /* 23px */
    --font-size-27: 1.6875rem; /* 27px */
    --font-size-30: 1.875rem; /* 30px */
    --font-size-40: 2.5rem; /* 40px */
    --font-size-50: 3.125rem; /* 50px */
    --font-size-80: 5rem; /* 80px */

    /* letter spacing scale (extracted from Block-Hero) */
    --letter-spacing-02: 0.0125rem; /* 0.2px */
    --letter-spacing-03: 0.01875rem; /* 0.3px */

    /* border-radius scale */
    --radius-2: 0.125rem; /* 2px */
    --radius-4: 0.25rem; /* 4px */
    --radius-8: 0.5rem; /* 8px */

    /* line-height scale (unitless multipliers, converted from rem values) */
    --line-height-25: 1.5625; /* was 25px (1.5625rem) */
    --line-height-30: 1.875; /* was 30px (1.875rem) */
    --line-height-35: 2.1875; /* was 35px (2.1875rem) */
    --line-height-40: 2.5; /* was 40px (2.5rem) */
    --line-height-60: 3.75; /* was 60px (3.75rem) */
    --line-height-75: 4.6875; /* was 75px (4.6875rem) */
    --line-height-120: 7.5; /* was 120px (7.5rem) */
} 
@media screen and (min-width: 2560px) {
    :root {
        font-size: calc(1.3333 * 1rem);
    }
} 
@media screen and (min-width: 3840px) {
    :root {
        font-size: calc(2 * 1rem);
    }
} 
/* Box sizing rules */ 
*,
*::before,
*::after {
    box-sizing: border-box;
} 
/* Remove default margin */ 
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
} 
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ 
ul[role="list"],
ol[role="list"] {
    list-style: none;
} 
/* Set core root defaults */ 
html:focus-within {
    scroll-behavior: smooth;
} 
/* Reset tap highlight and text-size */ 
html,
:host {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
} 
/* Set core body defaults */ 
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
} 
/* A elements that don't have a class get default styles */ 
a:not([class]) {
    text-decoration: none;
} 
/* Make images easier to work with */ 
img,
picture {
    max-width: 100%;
    display: block;
} 
/* Inherit fonts for inputs and buttons */ 
input,
button,
textarea,
select {
    font: inherit;
} 
ul {
    margin: 0;
    padding: 0;
    list-style: none;
} 
.reset-font-size-large {
    font-size: var(--font-size-base); /* 1rem / 16px */
} 
.reset-font-size-larger {
    font-size: var(--font-size-base); /* 1rem / 16px */
} 
.reset-font-size-smaller {
    font-size: var(--font-size-base); /* 1rem / 16px */
} 
/* Remove all animations and transitions for people that prefer not to see them */ 
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
} 
@font-face {
    font-family: "icomoon";
    src: url("/NetSites.JetourKSA.Theme/Icons/icomoon.eot?7jvrsh");
    src:
        url("/NetSites.JetourKSA.Theme/Icons/icomoon.eot?7jvrsh#iefix") format("embedded-opentype"),
        url("/NetSites.JetourKSA.Theme/Icons/icomoon.ttf?7jvrsh") format("truetype"),
        url("/NetSites.JetourKSA.Theme/Icons/icomoon.woff?7jvrsh") format("woff"),
        url("/NetSites.JetourKSA.Theme/Icons/icomoon.svg?7jvrsh#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
} 
[class^="icon-"]:before,
[class*=" icon-"]:before {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} 
.icon-arrow-left:before {
    content: "\e916";
} 
.icon-pin:before {
    content: "\e917";
} 
.icon-pen:before {
    content: "\e900";
} 
.icon-phone:before {
    content: "\e901";
} 
.icon-play:before {
    content: "\e902";
} 
.icon-search:before {
    content: "\e903";
} 
.icon-service:before {
    content: "\e904";
} 
.icon-snapchat:before {
    content: "\e905";
} 
.icon-steering_wheel:before {
    content: "\e906";
} 
.icon-support:before {
    content: "\e907";
} 
.icon-tiktok:before {
    content: "\e908";
} 
.icon-twitter:before {
    content: "\e909";
} 
.icon-whatsapp:before {
    content: "\e90a";
} 
.icon-youtube:before {
    content: "\e90b";
} 
.icon-360:before {
    content: "\e90c";
} 
.icon-arrow-down:before {
    content: "\e90d";
} 
.icon-arrow-right:before {
    content: "\e90e";
} 
.icon-arrow-up:before {
    content: "\e90f";
} 
.icon-close:before {
    content: "\e910";
} 
.icon-download:before {
    content: "\e911";
} 
.icon-facebook:before {
    content: "\e912";
} 
.icon-instagram:before {
    content: "\e913";
} 
.icon-linkedin:before {
    content: "\e914";
} 
.icon-mail:before {
    content: "\e915";
} 
.icon-trasmission:before {
    content: "\e918";
} 
.icon-mileage:before {
    content: "\e919";
} 
.icon-year:before {
    content: "\e91a";
} 
.icon-engine-type:before {
    content: "\e91b";
} 
.icon-fuel-type:before {
    content: "\e91c";
} 
.icon-user:before {
    content: "\e91e";
} 
.icon-compare:before {
    content: "\e98a";
} 
@font-face {
    font-family: "JetourKSAFontCombined";
    src: url("/NetSites.JetourKSA.Theme/Fonts/ArbFONTS-DINNextLTArabic-Regular-2.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
} 
@font-face {
    font-family: "JetourKSAFontCombined";
    src: url("/NetSites.JetourKSA.Theme/Fonts/ArbFONTS-DINNextLTArabic-Bold-2.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
} 
@font-face {
    font-family: "DINAlternateBold";
    src: url("/NetSites.JetourKSA.Theme/Fonts/DINAlternateBold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
} 
@font-face {
    font-family: "SaudiRiyalSymbol";
    src: url("/NetSites.JetourKSA.Theme/Fonts/saudiriyalsymbol.woff2") format("woff2");
} 
/* layout & helpers */ 
body {
    color: var(--color-primary);
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
} 
body.no-scroll {
    overflow: hidden;
} 
body {
    color: var(--color-primary);
    font-family: var(--font-primary);
} 
body.site-editor-preview-editing-mode {
    padding: 0 0.25rem;
} 
.symbol {
    font-family: "SaudiRiyalSymbol", sans-serif;
    display: inline;
} 
.picture {
    height: 100%;
    inset: 0;
    position: absolute;
    overflow: hidden;
} 
.video-wrapper {
    height: 100%;
    inset: 0;
    position: absolute;
    overflow: hidden;
} 
.cover {
    height: 100%;
    min-width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
} 
.btn {
    width: -moz-fit-content;
    width: fit-content;
    height: 2.8125rem;
    padding: 0.75rem 1.875rem;
    border-radius: 1.5rem;
    border: none;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.0625rem;
    font-weight: 700;
    box-shadow: 0.375rem 0.375rem 0.625rem 0.625rem #0c11500d;
    font-family: var(--font-primary);
    transition: all 250ms ease;
    border: none;
    cursor: pointer;
} 
/*transparent*/ 
.btn.primary {
    color: #fff;
    background-color: transparent;
    border: 0.0625rem solid #fff;
    outline: 0;
    transition: box-shadow 250ms ease;
} 
.btn.primary:hover {
        box-shadow: inset 0 0 0 0.06875rem #fff;
    } 
/*white color*/ 
.btn.secondary {
    color: var(--color-primary);
    background-color: #fff;
    border: 0.0625rem solid #fff;
    transition: all 250ms ease;
} 
.btn.secondary:hover {
        background-color: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
    } 
/*ciel color*/ 
.btn.third {
    background-color: var(--color-secondary);
    color: #fff;
} 
.btn.third:hover {
        background-color: #38babe;
    } 
/*dark primary color*/ 
.btn.fourth {
    background-color: var(--color-primary);
    color: #fff;
} 
.btn.fourth:hover {
        background-color: #597183;
    } 
/* light bg */ 
.btn.fifth {
    color: #fff;
    background-color: #597183d1;
    border: 0.0625rem solid #fff;
    outline: 0;
    transition: box-shadow 250ms ease;
} 
.btn.fifth:hover {
        box-shadow: inset 0 0 0 0.06875rem #fff;
    } 
.header-spacer {
    --dynamic-height: 0;
    width: 100%;
    height: calc(var(--dynamic-height) * 1px);
} 
.menu-overlay {
    display: none;
    position: fixed;
    opacity: 0;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background-color: #1f1f22;
    z-index: 99;
    transition: all 0.3s ease-in-out;
} 
.menu-overlay.visible {
        display: block;
        opacity: 0.8;
    } 
@media screen and (max-width: 80rem) {
    .menu-overlay {
        left: -100%;
    }
        .menu-overlay.visible {
            left: 0;
            opacity: 0.8;
        }
} 
.dynamic-content {
    font-size: 1rem;
    line-height: 1.5625rem;
    color: var(--color-primary);
} 
.dynamic-content p {
        font-size: 1rem;
        line-height: 1.5625rem;
        color: var(--color-primary);
        margin-bottom: 0.625rem;
    } 
.dynamic-content ul {
        padding: 0 0.625rem 0.625rem;
    } 
.dynamic-content ul li {
            position: relative;
            padding: 0.3125rem 0.9375rem;
            font-size: 1rem;
            line-height: 1.5625rem;
            color: var(--color-primary);
        } 
.dynamic-content ul li::before {
                content: "";
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                inset-inline: 0;
                margin-top: 0.125rem;
                width: 0.375rem;
                height: 0.375rem;
                border-radius: 50%;
                background-color: #a56e59;
            } 
.dynamic-content ol {
        padding: 0 0.625rem 0.625rem;
        list-style-position: inside;
    } 
.dynamic-content ol li {
            font-size: 1rem;
            line-height: 1.5625rem;
            color: var(--color-primary);
        } 
.dynamic-content a {
        color: var(--color-primary);
        text-decoration: underline;
    } 
.dynamic-content a:hover {
            color: #597183;
        } 
.left-center-container {
    padding-inline-start: 0.625rem;
    width: 100%;
    margin: 0 auto;
} 
.full-center-container {
    max-width: calc(100% - 1.25rem);
    width: 100%;
    margin: 0 auto;
} 
.center-container {
    max-width: calc(100% - 1.25rem);
    width: 100%;
    margin: 0 auto;
} 
.mid-center-container {
    max-width: calc(100% - 1.25rem);
    margin: 0 auto;
} 
.main-title-container {
    padding-bottom: 1.375rem;
} 
.main-title-container .title {
        font-size: 2.125rem;
        line-height: 1.2;
        font-weight: 400;
        letter-spacing: -0.5px;
    } 
.page-title-container .main-title-container {
        padding-bottom: 1.25rem;
    } 
.page-title-container .main-title-container .title {
            font-size: 2.125rem;
            line-height: 1.2;
            letter-spacing: -0.4px;
            font-family: var(--font-secondary);
        } 
@media screen and (min-width: 64rem) {
    .left-center-container {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        padding-inline-start: 5.3125rem;
    }
    .full-center-container {
        max-width: calc(100% - 1.875rem);
    }
    .mid-center-container {
        max-width: calc(100% - 1.875rem);
    }
    .center-container {
        max-width: calc(100% - 10.625rem);
    }
    .main-title-container {
        padding-bottom: 1.875rem;
    }
        .main-title-container .title {
            font-size: 2.6875rem;
            line-height: 3.125rem;
            letter-spacing: -0.6px;
        }
} 
@media screen and (min-width: 96rem) {
    .mid-center-container {
        max-width: calc(100% - 17.5rem);
    }
    .center-container {
        max-width: calc(100% - 17.5rem);
    }
    .left-center-container {
        padding-inline-start: 8.75rem;
    }
    .main-title-container {
        padding-bottom: 2.5rem;
    }
        .main-title-container .title {
            font-size: 3.75rem;
            line-height: 5.9375rem;
            letter-spacing: -1px;
        }
    .page-title-container {
        padding-top: 1.25rem;
    }
        .page-title-container .main-title-container {
            padding-bottom: 1.875rem;
        }
            .page-title-container .main-title-container .title {
                font-size: 2.6875rem;
                line-height: 3.125rem;
            }
} 
/* external components */ 
.site-editor-wrapper {
    position: sticky;
    top: 0;
    z-index: 1500;
} 
.site-editor-wrapper .site-editor-bar .actions .btn.close {
    padding: 0.438rem 0.75rem;
} 
.site-editor-modal-backdrop .modal .close .icon.se-icon-exit {
    font-size: inherit;
} 
.site-editor-modal-backdrop .modal .close {
    cursor: pointer;
} 
.site-editor-modal-backdrop .modal .close .icon.se-icon-exit:before {
    content: "\e900";
    font-family: "MyProject-icons" !important;
    position: relative;
    top: auto;
    right: auto;
    transform: none;
} 
.site-editor-wrapper + .site-container .sidebar .sidebar-container {
    top: 5.875rem;
} 
.site-editor-wrapper + .site-container .off-canvas-menu {
    top: 5.875rem;
} 
.site-editor-modal-backdrop .overflow {
    align-items: start;
} 
.site-editor-modal-backdrop .modal iframe {
    min-height: 85vh;
}