/* ====================================================================================================================
   SITE CONFIG
==================================================================================================================== */

:root {
    /* brand colors ---------------------------------------------------------- */
    --primary  : #C64E00;           /* orange                                */
    --secondary: #1D1D20;           /* dark panel                            */
    --tertiary : #131316;           /* muted foreground                      */
    --neutral  : #26262B;           /* dark iron                             */
    --accent   : #FA6C19;           /* orange vibrant                        */

    --primary  : oklch(58.0% 0.168 44.5);
    --secondary: oklch(23.2% 0.006 286);
    --tertiary : oklch(18.8% 0.006 286);
    --neutral  : oklch(27.1% 0.009 286);
    --accent   : oklch(69.7% 0.192 45);

    --offblack  : #0C0C0E;
    --offwhite  : #F6F5F4;

    --success   : #5c7d2b;        /* greenish                                */
    --danger    : #ce461c;        /* redish                                  */
    --info      : #907123;        /* yellowish                               */

    /* semantic colors ------------------------------------------------------- */
    --bg-color       : var(--offblack);
    --bg-sticky      : #F4F9FE;
    --heading-color  : var(--offwhite);
    --search-color   : var(--offwhite);
    --text-color     : #8F8F99;
    --bd-color       : #26262b;
    --selected-fg    : var(--offblack);
    --selected-bg    : var(--primary);
    --footer-color   : var(--grey-light);

    /* typography ------------------------------------------------------------ */
        --heading-family: "Space Grotesk", Helvetica, Arial, sans-serif;
        --body-family   : "Inter", Helvetica, Arial, sans-serif;
        --button-family : "Inter", Helvetica, Arial, sans-serif;

        --body-size  : var(--text-sm); /* 14 */
        --body-weight: var(--font-400);
        --body-strong: var(--font-700);

        --heading-weight: var(--font-600);
        --heading-letter: -1px;
        --heading-case  : normal;

        --quote-size       : var(--text-2l);
        --quote-size-mobile: var(--text-lg);

    /* headings scale — 320 / 1366 / 62.5% ----------------------------------- */
    --h0: clamp(4.8rem, 1.530vw + 5.111rem, 7.2rem);
    --h1: clamp(4.8rem, 0.765vw + 4.555rem, 6.0rem);
    --h2: clamp(4.0rem, 0.765vw + 3.755rem, 4.8rem);
    --h3: clamp(3.2rem, 0.382vw + 3.478rem, 4.0rem);
    --h4: clamp(2.4rem, 0.765vw + 2.155rem, 3.2rem);
    --h5: clamp(2.4rem, 0.765vw + 2.155rem, 2.4rem);
    --h6: clamp(2.0rem, 0.765vw + 2.155rem, 2.0rem);

    /* focus ---------------------------------------------------------------- */
    --focus-width: 1px;
    --focus-color: var(--accent);
    --focus-bg   : #3A2F891A;

    /* links ----------------------------------------------------------------- */
        --link: var(--secondary);
        --link-hover: var(--accent);
        --link-weight: var(--font-500);

    /* radius ---------------------------------------------------------------- */
    --image-radius : var(--radius-md); /* 16px */
    --card-radius  : var(--radius-md); /* 16px */
    --icon-radius  : var(--radius-sm); /* 12px */

    /* gradients ---------------------------------------------------------------------------------------------------------- */
    --gradient-btn     : linear-gradient( 90deg, #B45730 0%, #3D555B 100%);
    --gradient-btn-inv : linear-gradient(-90deg, #B45730 0%, #3D555B 100%);
    --gradient-btn-flow: linear-gradient(90deg, #B45730 0%, #3D555B 25%, #B45730 50%, #3D555B 75%, #B45730 100%);

    /* buttons --------------------------------------------------------------- */
    --button-hover : var(--primary);
    --button-white : var(--white);
    --button-black : var(--offblack);

    --button-size    : var(--button-size-sm);     /* default */
    --button-padding : var(--button-padding-md);  /* default */
    --button-radius  : var(--radius-fl);          /* default */
    --button-weight  : var(--font-600);         /* default */
    --button-border  : 1px;
    --button-letter    : 1px;
    --button-transform : none;

}




/* ====================================================================================================================
   SITE THEME
==================================================================================================================== */

:root {
    /* color-scheme: dark; */

    /* color pallete -------------------------------------------- */
    --black       : #000000;        /* black                    */
    --white       : #ffffff;        /* white                    */
    --white-80    : #ffffffcc;      /* white 80%                */
    --white-50    : #ffffff80;      /* white 50%                */
    --gainsboro   : #c7c7c7;        /* gainsboro                */
    --grey-dark   : #3a3a3a;        /* grey dark                */
    --grey        : #2a2d34;        /* grey primary             */
    --grey-soft   : #616161;        /* grey soft                */
    --grey-light  : #F7F7F7;        /* grey light               */
    --grey-faint  : #a0a0a0;        /* grey faint               */
    --grey-fainter: #dbdbdb;        /* grey super light         */
    --whatsapp    : #32b432;        /* green whatsapp           */


    /* colors -------------------------------------------------------------------------- */
    --primary-darker  : oklch(from var(--primary) calc(l - 0.14) c h);
    --primary-dark    : oklch(from var(--primary) calc(l - 0.07) c h);
    --primary-soft    : oklch(from var(--primary) calc(l + 0.16) c h);
    --primary-light   : oklch(from var(--primary) calc(l + 0.27) calc(c * 0.55) h);
    --primary-faint   : oklch(from var(--primary) calc(l + 0.38) calc(c * 0.28) h);

    --secondary-darker: oklch(from var(--secondary) calc(l - 0.14) c h);
    --secondary-dark  : oklch(from var(--secondary) calc(l - 0.07) c h);
    --secondary-soft  : oklch(from var(--secondary) calc(l + 0.16) c h);
    --secondary-light : oklch(from var(--secondary) calc(l + 0.27) calc(c * 0.55) h);
    --secondary-faint : oklch(from var(--secondary) calc(l + 0.46) calc(c * 0.28) h);

    --tertiary-darker: oklch(from var(--tertiary) calc(l - 0.14) c h);
    --tertiary-dark  : oklch(from var(--tertiary) calc(l - 0.07) c h);
    --tertiary-soft  : oklch(from var(--tertiary) calc(l + 0.16) c h);
    --tertiary-light : oklch(from var(--tertiary) calc(l + 0.27) calc(c * 0.55) h);
    --tertiary-faint : oklch(from var(--tertiary) calc(l + 0.46) calc(c * 0.28) h);

    --neutral-darker : oklch(from var(--neutral) calc(l - 0.10) 0 h);
    --neutral-dark   : oklch(from var(--neutral) calc(l - 0.06) 0 h);
    --neutral-soft   : oklch(from var(--neutral) calc(l + 0.16) 0 h);
    --neutral-light  : oklch(from var(--neutral) calc(l + 0.30) 0 h);
    --neutral-faint  : oklch(from var(--neutral) calc(l + 0.45) 0 h);

    --accent-darker  : oklch(from var(--accent) calc(l - 0.14) c h);
    --accent-dark    : oklch(from var(--accent) calc(l - 0.07) c h);
    --accent-soft    : oklch(from var(--accent) calc(l + 0.16) c h);
    --accent-light   : oklch(from var(--accent) calc(l + 0.27) calc(c * 0.55) h);
    --accent-faint   : oklch(from var(--accent) calc(l + 0.46) calc(c * 0.28) h);


    /* buttons -------------------------------------------------------------- */
    --button-size-2s : var(--text-2s);
    --button-size-xs : var(--text-xs);
    --button-size-sm : var(--text-sm);
    --button-size-md : var(--text-md);
    --button-size-lg : var(--text-lg);
    --button-size-xl : var(--text-xl);

    --button-padding-2s: 3px 6px;
    --button-padding-xs: 6px 12px;
    --button-padding-sm: 12px 24px;
    --button-padding-md: 16px 32px;
    --button-padding-lg: 24px 48px;

    /* headings ---------------------------------------------------------------- */
    --line-h0: 1.1;
    --line-h1: 1.1;
    --line-h2: 1.2;
    --line-h3: 1.2;
    --line-h4: 1.3;
    --line-h5: 1.3;
    --line-h6: 1.3;
}
@media screen and (max-width:480px) {
    :root {
        --h0: 4.8rem;
        --h1: 4.8rem;
        --h2: 3.6rem;
        --h3: 3.2rem;
        --h4: 2.8rem;
        --h5: 2.4rem;
    }
}

@media screen and (max-width:360px) {
    :root {
        --button-padding: 11px 22px;
        --button-size: var(--text-md);
    }
}




/* ====================================================================================================================
   LIGHT/DARK MODE
==================================================================================================================== */

/* @media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;

        --bg-color      : var(--offwhite);
        --heading-color : var(--offblack);
    }
} */
/* [data-theme="light"] {

} */




::selection {
    color           : var(--selected-fg);
    background-color: var(--selected-bg);
}


body {
    color      : var(--text-color);
    font-family: var(--body-family);
    font-weight: var(--body-weight);
    font-size  : var(--body-size);
}

body,
section {
    background-color: var(--bg-color) !important;
}


blockquote {
    border-inline-start: 2px solid var(--grey-faint);
}


/* override global */
b,
strong {
    font-weight: var(--body-strong) !important;
}

hr {
    width: 100%;
    border-block-start: 1px solid var(--bd-color);
    margin-block : 6rem;
    margin-inline: 0;
    height: 1px;
}




/* headings */
:is( h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4, .h5, .h6 ) {
    color           : var(--heading-color);
    font-family     : var(--heading-family);
    font-weight     : var(--heading-weight);
    letter-spacing  : var(--heading-letter);
    margin-block-end: 3rem;
    text-transform  : var(--heading-case);
}

@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {

        :is(h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4, .h5, .h6) {
            min-height: 0vw;    /* Safari hack */
        }
    }
}

:is(h1, h2, h3, h4, h5, h6) {
    &:last-child {
        margin-block-end: 0;
    }

    & a {
        color: var(--heading-color);

        &:hover {
            color: var(--link-hover);
        }
    }
}

.h0     { font-size: var(--h0); line-height: var(--line-h0); margin-block-end: 0; }
h1, .h1 { font-size: var(--h1); line-height: var(--line-h1); }
h2, .h2 { font-size: var(--h2); line-height: var(--line-h2); }
h3, .h3 { font-size: var(--h3); line-height: var(--line-h3); letter-spacing: 0; }
h4, .h4 { font-size: var(--h4); line-height: var(--line-h4); margin-block-end: 1.5rem; letter-spacing: 1px; }
h5, .h5 { font-size: var(--h5); line-height: var(--line-h5); margin-block-end: 1.5rem; letter-spacing: 1px; }
h6, .h6 { font-size: var(--h6); line-height: var(--line-h6); margin-block-end: 1.5rem; letter-spacing: 1px; }




/* links */
a {
    color: var(--link);
    font-weight: var(--link-weight);

    &:hover {
        color: var(--link-hover);
        text-decoration: underline;
        text-decoration-color: currentColor;
        text-underline-offset: 0.3rem;
    }

    &.selected {
        color: var(--selected-color);
    }

    &:active:not(.button):not(:has(img)) {
        border-block-end: 1px solid var(--link-hover);
    }

    &:focus-within {
        outline: var(--focus-width) solid var(--focus-color);
        outline-offset: 1px;
    }

    &.wavy {
        text-decoration-style: wavy;
        text-decoration-skip-ink: none;
        text-underline-offset: 0.3em;
    }

    &.hover--offwhite:hover  { color: var(--offwhite);  }
    &.hover--primary:hover   { color: var(--primary);   }
    &.hover--secondary:hover { color: var(--secondary); }
    &.hover--tertiary:hover  { color: var(--tertiary);  }
    &.hover--neutral:hover   { color: var(--neutral);   }
}


a,
p a,
blockquote a {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
}

.oxy-rich-text p a,
.oxy-rich-text blockquote a {
    display: inline;
}




/* paragraphs */
:is(h1, h2, h3, h4, h5, h6) + p,
:is(h1, h2, h3, h4, h5, h6) + .oxy-rich-text {
    margin-block-start: 0;
}

p + :is(h1, h2, h3, h4, h5, h6),
.ct-text-block + :is(h1, h2, h3, h4, h5, h6) .ct-text-block {
    width: 100%;
}

p  + :is(h1, h2, h3, h4, h5, h6),
ul + :is(h1, h2, h3, h4, h5, h6),
.oxy-rich-text + :is(h1, h2, h3, h4, h5, h6),
.ct-link-button + :is(h1, h2, h3, h4, h5, h6) {
    margin-block-start: 6rem;
}

img    + :is(h1, h2, h3, h4, h5, h6),
figure + :is(h1, h2, h3, h4, h5, h6) {
    margin-block-start: 6rem;
}

p:first-of-type {
    margin-block-start: 0;
}

.ct-text-block + .ct-link-button,
.oxy-rich-text + .ct-link-button {
    margin-block-start: 2rem;
}




/* fonts */
.font-heading { font-family: var(--heading-family); }
.font-text    { font-family: var(--body-family); }




/* colors */
.primary,
.secondary,
.tertiary,
.neutral,
.accent,
.white,
.black,
.offblack,
.offwhite,
.grey {
    color: var(--fg);
}

.primary   > *,
.secondary > *,
.tertiary  > *,
.neutral   > *,
.accent    > *,
.black     > *,
.white     > *,
.offblack  > *,
.offwhite  > *,
.grey      > * {
    color: inherit;
}

.primary   { --fg: var(--primary);   }
.secondary { --fg: var(--secondary); }
.tertiary  { --fg: var(--tertiary);  }
.neutral   { --fg: var(--neutral);   }
.accent    { --fg: var(--accent);    }
.black     { --fg: var(--black);     }
.white     { --fg: var(--white);     }
.offblack  { --fg: var(--offblack);  }
.offwhite  { --fg: var(--offwhite);  }
.grey      { --fg: var(--grey);      }


.primary.darker   { --fg: var(--primary-darker); }
.primary.dark     { --fg: var(--primary-dark);   }
.primary.soft     { --fg: var(--primary-soft);   }
.primary.light    { --fg: var(--primary-light);  }
.primary.faint    { --fg: var(--primary-faint);  }

.secondary.darker {--fg: var(--secondary-darker); }
.secondary.dark   { --fg: var(--secondary-dark);  }
.secondary.soft   { --fg: var(--secondary-soft);  }
.secondary.light  { --fg: var(--secondary-light); }
.secondary.faint  { --fg: var(--secondary-faint); }

.tertiary.darker  { --fg: var(--tertiary-darker); }
.tertiary.dark    { --fg: var(--tertiary-dark);   }
.tertiary.soft    { --fg: var(--tertiary-soft);   }
.tertiary.light   { --fg: var(--tertiary-light);  }
.tertiary.faint   { --fg: var(--tertiary-faint);  }

.neutral.darker   { --fg: var(--neutral-darker); }
.neutral.dark     { --fg: var(--neutral-dark);   }
.neutral.soft     { --fg: var(--neutral-soft);   }
.neutral.light    { --fg: var(--neutral-light);  }
.neutral.faint    { --fg: var(--neutral-faint);  }


a:is(.primary,
    .secondary,
    .tertiary,
    .neutral,
    .accent,
    .white,
    .black,
    .offblack,
    .offwhite,
    .grey):hover {
    color: var(--fg);
    text-decoration-color: var(--fg);
    text-decoration-thickness: 2px;
}




/* fix elementor */
.elementor-widget-button.button > .elementor-button {
    all: unset;
}




/* button colors */
.button {
    --bg: var(--accent);
    --fg: var(--button-white);
    --bd: var(--bg);

    --btn-padding: var(--button-padding);
    --btn-size: var(--button-size);
    --btn-radius: var(--button-radius);
    --btn-border: var(--button-border);
    --btn-min-width: auto;
    --btn-width: auto;

    --btn-scale-hover: 1;
    --btn-translate-hover: 0 0;
    --btn-filter-hover: none;

    --btn-shadow: 0 0 transparent;
    --btn-shadow-hover: var(--btn-shadow);
    --btn-ring-shadow: 0 0 transparent;
    --btn-ring-color: var(--bg);

    --btn-after-content: none;
    --btn-after-display: none;
    --btn-after-width: auto;
    --btn-after-height: auto;
    --btn-after-margin: 0;
    --btn-after-border: 0;
    --btn-after-radius: 0;
    --btn-after-animation: none;

    --btn-background-image: none;
    --btn-background-image-hover: none;

    --btn-background-size: auto;
    --btn-animation: none;


    &.primary   { --bg: var(--primary);   }
    &.secondary { --bg: var(--secondary); }
    &.tertiary  { --bg: var(--tertiary);  }
    &.neutral   { --bg: var(--neutral);   }

    &.white     { --bg: var(--button-white); --fg: var(--button-black); }
    &.black     { --bg: var(--button-black); --fg: var(--button-white); }


    &.primary {
        &.darker { --bg: var(--primary-darker); }
        &.dark   { --bg: var(--primary-dark);   }
        &.soft   { --bg: var(--primary-soft);   }
        &.light  { --bg: var(--primary-light);  }
        &.faint  { --bg: var(--primary-faint);  }
    }

    &.secondary {
        &.darker { --bg: var(--secondary-darker); }
        &.dark   { --bg: var(--secondary-dark);   }
        &.soft   { --bg: var(--secondary-soft);   }
        &.light  { --bg: var(--secondary-light);  }
        &.faint  { --bg: var(--secondary-faint);  }
    }

    &.tertiary {
        &.darker { --bg: var(--tertiary-darker); }
        &.dark   { --bg: var(--tertiary-dark);   }
        &.soft   { --bg: var(--tertiary-soft);   }
        &.light  { --bg: var(--tertiary-light);  }
        &.faint  { --bg: var(--tertiary-faint);  }
    }

    &.neutral {
        &.darker { --bg: var(--neutral-darker); }
        &.dark   { --bg: var(--neutral-dark);   }
        &.soft   { --bg: var(--neutral-soft);   }
        &.light  { --bg: var(--neutral-light);  }
        &.faint  { --bg: var(--neutral-faint);  }
    }


    &:is(
        .primary.darker,
        .primary.dark,
        .secondary.darker,
        .secondary.dark,
        .tertiary.darker,
        .tertiary.dark,
        .neutral.darker,
        .neutral.dark
    ) {
        --fg: var(--button-white);
    }

    &:is(
        .primary.soft,
        .primary.light,
        .primary.faint,
        .secondary.soft,
        .secondary.light,
        .secondary.faint,
        .tertiary.soft,
        .tertiary.light,
        .tertiary.faint,
        .neutral.soft,
        .neutral.light,
        .neutral.faint) {
        --fg: var(--button-black);
    }


    &.large {
        --btn-padding: var(--button-padding-lg);
        --btn-size: var(--button-size-lg);
        --btn-min-width: 20rem;
        --btn-radius: calc(var(--button-radius) * 2);
    }

    &.small {
        --btn-padding: var(--button-padding-sm);
        --btn-size: var(--button-size-sm);
        --btn-min-width: 14rem;
        --btn-radius: calc(var(--button-radius) / 2);
    }

    &.smaller {
        --btn-padding: var(--button-padding-xs);
        --btn-size: var(--button-size-xs);
        --btn-min-width: 10rem;
        --btn-radius: calc(var(--button-radius) / 2);
    }

    &.smallest {
        --btn-padding: var(--button-padding-2s);
        --btn-size: var(--button-size-2s);
        --btn-min-width: 8rem;
        --btn-radius: calc(var(--button-radius) / 4);
    }


    &.ghost {
        --bg: transparent !important;
        --fg: var(--accent);
        --bd: var(--fg);
        --btn-ring-color: var(--fg);

        &.primary   { --fg: var(--primary) !important;   }
        &.secondary { --fg: var(--secondary) !important; }
        &.tertiary  { --fg: var(--tertiary) !important;  }
        &.neutral   { --fg: var(--neutral) !important;   }
        &.white     { --fg: var(--button-white) !important;  }
        &.black     { --fg: var(--button-black) !important;  }

        &.muted     {
            --fg: var(--button-white) !important;
            --bd: var(--bd-color) !important;
            --bg: #0c0c0e66 !important;

            &:hover {
                --fg: var(--accent) !important;
                --bd: var(--accent) !important;
            }
        }
    }


    &.zoom   { --btn-scale-hover: 1.025; }

    &.pill   { --btn-radius: var(--radius-fl); }

    &.square { --btn-radius: 0; }

    &.block  { --btn-width: 100%; width: 100%; max-width: 80% !important; }

    &.shadow { --btn-shadow: var(--box-shadow); }

    &.ring   { --btn-ring-shadow: 0 0 0 6px hsl(from var(--btn-ring-color) h s l / 0.3); }

    &.lift {
        --btn-translate-hover: 0 -3px;
        --btn-filter-hover: brightness(1.05);
        --btn-shadow-hover: 0 4px 12px rgb(0 0 0 / 8%);
    }

    &.gradient {
        --btn-background-image: var(--gradient-btn);
        --btn-background-image-hover: var(--gradient-btn-inv);
        --bd: transparent;
        --btn-border: 0;
    }
    &.gradient.flow {
        --btn-background-size: 200% 100%;
        --btn-animation: gradient-flow 3s linear infinite;
        --btn-background-image: var(--gradient-btn-flow);
        --btn-background-image-hover: var(--gradient-btn-flow);
    }

    &.loading {
        --btn-after-content: "";
        --btn-after-display: inline-block;
        --btn-after-width: 1em;
        --btn-after-height: 1em;
        --btn-after-margin: 0 0 0 0.5rem;
        --btn-after-border: 2px solid currentColor;
        --btn-after-radius: 50%;
        --btn-after-animation: spin 1s linear infinite;
     }

    &.success { --bg: var(--success); }
    &.danger  { --bg: var(--danger);  }
    &.info    { --bg: var(--info);    }


}
@keyframes spin {
    to {
        rotate: 1turn;
    }
}
@keyframes gradient-flow {
    from { background-position: 100% 50%; }
    to   { background-position: -100% 50%; }
}




button.button.button,
button.e-button-base.button,
.button:not(.elementor-widget-button),
.elementor-widget-button.button > .elementor-button-link {

    color: var(--fg);
    background-color: var(--bg);
    padding: var(--btn-padding);

    border: var(--btn-border) solid var(--bd);
    border-radius: var(--btn-radius);

    background-image: var(--btn-background-image);
    background-size: var(--btn-background-size);
    animation: var(--btn-animation);

    font-size: var(--btn-size);
    font-family: var(--button-family);
    font-weight: var(--button-weight);
    letter-spacing: var(--button-letter);

    box-shadow: var(--btn-shadow);
    text-shadow: var(--text-shadow);
    text-transform: var(--button-transform);
    transition: var(--transition);

    min-width: var(--btn-min-width);
    width: var(--btn-width) !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-content: center;
    text-align: center;
    cursor: pointer;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transform-origin: center !important;    /* fix hover flicker */
    will-change: transform !important;
    z-index: 1;
    -webkit-user-select: none;              /* safari */
            user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-backface-visibility: hidden !important;
            backface-visibility: hidden !important;


    &:not(:last-child):not(.elementor-widget-button) {
        margin-block-end: 3rem;
    }


    &:hover {
        color: var(--fg);
        background-color: oklch(from var(--bg) calc(l - 0.1) c h);
        border-color    : oklch(from var(--bd) calc(l - 0.1) c h);
        background-image: var(--btn-background-image-hover);

        scale: var(--btn-scale-hover);
        translate: var(--btn-translate-hover);
        filter: var(--btn-filter-hover);

        box-shadow: var(--btn-shadow-hover), var(--btn-ring-shadow);
    }


    &.lowercase  { text-transform: lowercase !important;  }
    &.uppercase  { text-transform: uppercase !important;  }
    &.capitalize { text-transform: capitalize !important; }


    &::after {
        content: var(--btn-after-content);
        display: var(--btn-after-display);
        flex: 0 0 auto;

        width: var(--btn-after-width);
        height: var(--btn-after-height);
        margin: var(--btn-after-margin);

        border: var(--btn-after-border);
        border-block-start-color: transparent;
        border-radius: var(--btn-after-radius);

        animation: var(--btn-after-animation);
    }

}




/* util styles */
.quote {
    border-inline-start: 4px solid var(--primary-soft);
    padding-inline-start: 2rem;
    font-size: var(--quote-size);
    font-weight: var(--font-600);
    margin-block: 3rem;
    width: 90%;


    &:last-child {
        margin-block-end: 0;
    }

    @media screen and (max-width: 480px) {
        width: 100%;
        font-size: var(--quote-size-mobile);
    }
}


.outline {
    --outline-color: var(--focus-color);

    outline: var(--focus-width) solid var(--outline-color);
    outline-offset: 1px;
    transition: outline .0s ease;

    &:hover {
        background: var(--outline-color);
        color: var(--white);
    }

    &.primary   { --outline-color: var(--primary);   }
    &.secondary { --outline-color: var(--secondary); }
    &.tertiary  { --outline-color: var(--tertiary);  }

}


.marker {
    background-color: var(--primary);
    color: var(--offwhite);
}


/* hollow text */
.hollow {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;

    &.primary   { -webkit-text-stroke-color: var(--primary);   }
    &.secondary { -webkit-text-stroke-color: var(--secondary); }
    &.tertiary  { -webkit-text-stroke-color: var(--tertiary);  }
    &.neutral   { -webkit-text-stroke-color: var(--neutral);   }
}


.overlay {
    border-image: linear-gradient(hsl(0 0% 0% / 0.5), hsl(0 0% 0% / 0.5)) 1 fill;
}
img.overlay {
    position: relative;
}
img.overlay::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 0.5);
}


/* anchor offset */
.anchor-offset {
    position: relative;
    height: 160px;
    margin-block-start: -160px;
    pointer-events: none;
    visibility: hidden;

    @media screen and (max-width:768px) {
        height: 60px;
        margin-block-start: -60px;
    }
}




/* clickable parent for cards */
.clickable-parent {

    &:focus-within {
        outline: var(--focus-width) solid var(--focus-color);
        outline-offset: var(--focus-width);
        border-radius: var(--image-radius);
    }
}



/* repeater pagination */
/* .oxy-repeater-pages-wrap {
    width: 100%;
    justify-content: center;
    margin-top: 3rem;
}

.oxy-repeater-pages-wrap .oxy-repeater-pages {
    display: flex;
    gap: 1rem;
}

.oxy-repeater-pages-wrap .page-numbers {
    width: 4.5rem;
    height: 4.5rem;
    display: block;
    text-align: center;
    background-color: var(--bd-color);
    border-radius: var(--radius);
    font-size: var(--text-md);
    padding-top: 1.1rem;
    color: var(--white);
    text-decoration: none;
}

.oxy-repeater-pages-wrap .page-numbers:hover {
    background-color: var(--primary);
}

.oxy-repeater-pages-wrap .page-numbers.current {
    background-color: var(--secondary);
}

.oxy-repeater-pages-wrap .page-numbers.prev,
.oxy-repeater-pages-wrap .page-numbers.next {
    background-color: transparent;
    color: var(--bd-color);
    font-size: var(--text-xs);
    padding-top: 1.3rem;
    white-space: nowrap;
    width: auto;
}

.oxy-repeater-pages-wrap .page-numbers.prev:hover,
.oxy-repeater-pages-wrap .page-numbers.next:hover {
    color: var(--primary);
}

@media screen and (max-width: 480px) {
    .oxy-repeater-pages-wrap .page-numbers {
        width: 4.0rem;
        height: 4.0rem;
        padding-top: 1.1rem;
    }
} */




/* lists */
:is( ul.yes, ul.no, ul.dot ) {
    list-style-type: none !important;
    padding-inline-start: 2rem;

    li {
        position: relative;

        &::before {
            font-weight: bold;
            margin-inline-end: 1rem;
        }
    }
}

ul.yes {
    li::before {
        content: "✔";
        color: var(--primary);
    }
}

ul.no {
    li::before {
        content: "✖";
        color: var(--offblack);
    }
}

ul.dot {
    li {
        padding-inline-start: 2rem;
        line-height: 2;
        font-size: var(--body-size);

        &::before {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            inset-block-start: 1.5rem;
            translate: 0 -100%;
            inline-size: 6px;
            block-size: 6px;
            background: var(--body-text);
            border-radius: 50%;
        }
    }
}

ul.dot.primary   {
    li         { color: var(--text-color);             }
    li::before { background-color: var(--primary);   }
}
ul.dot.secondary {
    li         { color: var(--text-color);             }
    li::before { background-color: var(--secondary); }
}
ul.dot.tertiary  {
    li         { color: var(--text-color);             }
    li::before { background-color: var(--tertiary);  }
}
ul.dot.neutral   {
    li         { color: var(--text-color);             }
    li::before { background-color: var(--neutral);   }
}



/* fix swiper not showing the slides from dynamic slider */
.swiper-wrapper {
    flex-direction: row;
    cursor: grab;
}








/* ====================================================================================================================
   TOGGLE THEME
==================================================================================================================== */

.faq ul.no li::before {
    color: var(--primary);
}

.faq__toggle .oxy-expand-collapse-icon {
    background-color: var(--white);
}

.faq__toggle .oxy-expand-collapse-icon,
.faq__toggle .oxy-expand-collapse-icon.oxy-eci-collapsed {
    border-radius: calc(var(--radius-fl) / 2);
}

/* toggle icon */
.toggle-arrow .oxy-expand-collapse-icon::before {
    background: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%230751D8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2a1 1 0 0 1 .707.293l10 10a1 1 0 0 1 0 1.414l-10 10A1 1 0 0 1 10 22V2z'/%3E%3C/svg%3E") center no-repeat;
}

.faq__heading,
.faq__toggle .oxy-expand-collapse-icon::before,
.faq__toggle .oxy-expand-collapse-icon.oxy-eci-collapsed {
    background-color: var(--offblack);
}

.faq__toggle .oxy-expand-collapse-icon::after,
.faq__toggle .oxy-expand-collapse-icon.oxy-eci-collapsed::before,
.faq__toggle .oxy-expand-collapse-icon.oxy-eci-collapsed::after {
    background-color: var(--offwhite);
}

.oxy-expand-collapse.toggle-expanded,
.faq__toggle.toggle-9324-expanded {
    background-color: var(--primary);
}

.oxy-expand-collapse.toggle-expanded .faq__heading,
.faq__toggle.toggle-9324-expanded .faq__heading {
    color: var(--offwhite);
}








/* ====================================================================================================================
   LOCAL THEME
==================================================================================================================== */

header {
    width: 100%;
    /* max-width: var(--page-width); */
}
header > .elementor-element-7bf6422 {
    /* max-width: 144rem !important; */
}

nav .e-n-menu-toggle-icon {
    cursor: pointer;
}
/* nav .e-n-menu-toggle-icon.e-open i {
    color: var(--offwhite);
    font-size: 32px;
}
nav .e-n-menu-toggle-icon.e-close i {
    color: var(--offwhite);
    font-size: 32px;
}
nav .e-n-menu-toggle-icon.e-open i:hover, nav .e-n-menu-toggle-icon.e-close i:hover {
    color: var(--accent) !important;
}
.elementor-widget-n-menu nav .e-n-menu-toggle i:hover {
    color: pink !important;
} */


@media screen and (max-width: 1366px) {
    .e-n-menu-wrapper {

        background-color: var(--offwhite);

        &.e-n-menu-heading { row-gap: 0; }
    }

    .elementor-widget-n-menu .e-n-menu-heading {
        row-gap: 0 !important;
    }
    .elementor-widget-n-menu .e-n-menu-heading .e-n-menu-item a span {
        line-height: 3;
    }

}


/* home */
.bg-gradient-hero::before {
    background-image:
        linear-gradient(to top, rgb(12, 12, 14) 0%, rgba(12, 12, 14, 0.6) 40%),
        linear-gradient(to top, rgb(12, 12, 14), rgba(0, 0, 0, 0), rgba(12, 12, 14, 0.4)),
        linear-gradient(to right, rgb(12, 12, 14), rgba(12, 12, 14, 0.85), rgba(12, 12, 14, 0.3));
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    position: absolute;
    top: 0;
    left: 0;
    inset: 0;
}

.lined-overline {
    position: relative;
    color: var(--accent);
    letter-spacing: 4px;
    padding-left: 4rem;
    font-family: var(--heading-family);
    font-weight: 600;
    text-transform: uppercase;
}

.lined-overline::before {
    content: '';
    position: absolute;
    display: block;
    width: 3rem;
    height: 1px;
    background-color: var(--accent);
    top: 50%;
    left: 0;
}

.card-icon {
    border: 1px solid #26262b;
    background-color: #131316;
    border-radius: var(--card-radius) !important;
    padding-top: 0 !important;
    overflow: hidden !important;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.card-icon:hover {
    transform: translate(0, -4px) scaleX(1) scaleY(1);
    border-color: #fa6c1980;
}

.card-icon__heading {
    font-family: var(--heading-family);
    text-transform: uppercase;
    font-size: var(--text-lg);
    padding: 0 2rem;
    letter-spacing: 1px;
}

.card-icon__text {
    padding: 0 2rem;
    border-bottom: 1px solid #26262b;
}

.card-icon__icon-wrapper {
    min-height: 28rem !important;
    padding-top: var(--space-md) !important;
    padding-bottom: var(--space-lg) !important;
    padding-left: var(--space-md) !important;
    transition: background-size 2.7s cubic-bezier(0.4, 0, 0.2, 1);
    /* transition: scale 2.7s ease-in-out; */
    background-position: top center !important;
}
.card-icon__icon-wrapper:after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to top, rgb(19, 19, 22), rgba(19, 19, 22, 0.2), rgba(0, 0, 0, 0));
}
.card-icon:hover .card-icon__icon-wrapper {
    background-size: 105% !important;
    /* transform: scale(1.05); */
}

.dark-icon .elementor-icon {
    border: 1px solid var(--bd-color) !important;
    border-radius: var(--icon-radius) !important;
}
.dark-icon:hover .elementor-icon {
    border-color: var(--primary) !important;
}
.dark-icon-list:hover .dark-icon .elementor-icon {
    border-color: var(--primary) !important;
}

.card-fleet {
    border-radius: var(--card-radius) !important;
    border: 1px solid var(--bd-color);
    transition: background-size 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    /* transition: transform 0.8s ease-in-out; */
    background-position: center center !important;
    padding: var(--space-md) !important;
    overflow: hidden !important;
    height: 32rem !important;
}
.card-fleet:after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to top, rgb(12, 12, 14), rgba(12, 12, 14, 0.4), rgba(0, 0, 0, 0));
}
.card-fleet:hover {
    background-size: 125% !important;
    /* transform: scale(1.1); */
}

.card-number {
    border-radius: var(--card-radius) !important;
    border: 1px solid var(--bd-color) !important;
    background-color: #131316;
    padding: var(--space-md) !important;
    gap: var(--space-md) !important;
}
.card-number:hover {
    border-color: var(--primary) !important;
}
.card-number__digits {
    color: #fa6c1940;
    font-size: var(--text-9l);
    font-family: var(--heading-family);
    font-weight: 700;
}
.card-number:hover .card-number__digits {
    color: var(--primary);
}

.card-dark-icon {
    border-radius: var(--card-radius) !important;
    border: 1px solid var(--bd-color) !important;
    background-color: #0c0c0e;
    padding: var(--space-md) !important;
}

.orange-icon .elementor-icon {
    border: 0px solid #fa6c1940 !important;
    border-radius: var(--icon-radius) !important;
}

.contact-icon .elementor-icon {
    border: 1px solid var(--bd-color) !important;
    border-radius: var(--icon-radius) !important;
}

.form-contact {
    padding: 0 !important;
}
.form-contact input,
.form-contact textarea {
    border: 1px solid var(--bd-color) !important;
    background-color: #0c0c0e !important;
    border-radius: 6px !important;
    padding: 1.5rem 1.5rem !important;
    color: var(--offwhite) !important;
    font-size: var(--text-md) !important;
    display: inline-block;
    height: auto !important;
    font-family: var(--body-family) !important;
}
.form-contact input::placeholder, .form-contact textarea::placeholder {
    color: #8f8f99a1 !important;
}

.form-contact label {
    color: var(--text-color) !important;
    text-transform: uppercase !important;
    font-size: var(--text-sm) !important;
    font-weight: 500;
    margin-top: var(--space-sm);
}
.form-contact button {
    padding: var(--button-padding) !important;
    color: var(--offwhite) !important;
    font-size: var(--body-size) !important;
    background-color: var(--primary) !important;
    border-radius: var(--button-radius) !important;
}