:root {
    /*Colors*/
    --c1: #ff6700;
    --c2: #004e98;
    --c3: #3a6ea5;
    --c4: #c0c0c0;
    --cl: #ffffff;
    --cd: #070707;
    --tc: #070707;
    --tc_h: #070707;
    --border_c: #070707;
    --bg1: #ffffff;
    --bg2: #ebebeb;
    --bg3: #070707;
    --box_shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    --input_box_shadow: inset 0 0 0 1px var(--c1);
    --max_width: 1000px;
    --max_sidebar_width: 400px;
    --top_offset: 0px;

    /*Fonsts*/
    --heading_font:
        'Inter', sans-serif;
    --sub_heading_font:
        'Inter', sans-serif;
    --body_font:
        'Inter', sans-serif;
    --body: 17px;
    --h1: 3.8rem;
    --h2: 2.8rem;
    --h3: 1.8rem;
    --h4: 1.4rem;
    --h5: 1.2rem;
    --caption: 0.83rem;
    --small: 0.69rem;
    --heading_lh: 1.1em;
    --body_lh: 1.4em;

    /**/
    --menu_height: 100px;
    --padding: 10px 12px;
    --section_padding: clamp(30px, 8vw, 80px);
    --gap_min: clamp(15px, 2vw, 20px);
    --gap: clamp(20px, 4vw, 40px);
    --gap_xl: clamp(25px, 8vw, 80px);
    --radius: 20px;
    --radius_xl: 30px;
    --c_radius: 25px;
    --ci_radius: 25px;
    --bezier: cubic-bezier(0.25, 0.8, 0.35, 0.9);
    --fvh: 100vh;
    --fvh: 100svh;
    --full_menu_height: var(--menu_height);
    --top_spacing: calc(var(--full_menu_height) + var(--gap));

    /*Woocommerce*/
    --message: #232323;
    --error: #d42222;
    --success: #15bf86;
    --info: #1e73be;
    --message_bg: var(--bg1);
}

:root:has(#top-nav .boxed) {
    --full_menu_height: 149px;
}

@media only screen and (max-width: 1000px) {
    :root:has(#top-nav .boxed) {
        --full_menu_height: 139px;
    }
}

@media only screen and (max-width: 600px) {
    :root {
        --body: 15px;
        --h1: 3rem;
        --h2: 2.4rem;
        --h3: 2rem;
        --h4: 1.6rem;
        --h5: 1.2rem;
    }
}

.editor-styles-wrapper,
body {
    --wp--preset--spacing--20: var(--gap_min) !important;
    --wp--preset--spacing--30: var(--gap) !important;
    --wp--preset--spacing--40: var(--gap_xl) !important;
    --wp--preset--spacing--80: var(--section_padding) !important;
}

.wp-block-heading {
    margin-bottom: clamp(2px, 0.5em, 8px)
}

p {
    margin-bottom: 0.4em
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5 {
    font-family: var(--heading_font);
    line-height: var(--heading_lh);
    font-weight: 600;
    margin: 0;
}

.editor-styles-wrapper h1 {
    font-size: var(--h1)
}

.editor-styles-wrapper h2 {
    font-size: var(--h2);
}

.editor-styles-wrapper h3 {
    font-size: var(--h3);
}

.editor-styles-wrapper h4 {
    font-size: var(--h4);
}

.editor-styles-wrapper h5 {
    font-size: var(--h5);
}

.editor-styles-wrapper :where(.h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5)+* {
    margin-top: 1em;
}


.editor-styles-wrapper p {
    margin: 0;
    line-height: var(--body_lh);
}

.editor-styles-wrapper *+p {
    margin-top: 0.8em;
}

.wp-block-media-text .wp-block-media-text__content {
    padding: clamp(20px, 10%, 80px);
}

.entry-content p {
    line-height: 1.8em;
    margin-top: 1em;
}

.entry-content p:last-child {
    margin-bottom: 0;
}

.is-style-container {
    max-width: var(--max_width);
    width: clamp(300px, 95%, var(--max_width));
    margin: 0 auto;
    position: relative;
    margin-top: var(--gap);
    margin-bottom: var(--gap);
}


.is-style-container:first-child {
    margin-top: 0;
}

:where(.post-type-project,
    .post-type-post) .editor-styles-wrapper :where(.editor-editor-canvas__post-title-wrapper, .is-root-container) {
    max-width: var(--max_width);
    width: clamp(300px, 98%, var(--max_width));
    margin: 0 auto;
}

.entry-content .wp-block-heading {
    margin-bottom: clamp(4px, 0.4em, 15px);
}

.entry-content .wp-block-heading:not(:has(+*)) {
    margin-bottom: 0;
}

.entry-content *+.wp-block-heading {
    margin-top: 1em;
}

.entry-content p {
    margin-bottom: 1em;
}

.entry-content ul {
    list-style: disc;
}

.entry-content ul,
.entry-content ol {
    padding-left: 1em;
}

.entry-content ul li,
.entry-content ol li {
    margin: 0.4em 0;
}


@media screen and (max-width: 780px) {
    .wp-block-columns.invert_col {
        flex-direction: column-reverse;
    }
}

.wp-lightbox-overlay .scrim {
    background-color: rgb(0 0 0 / 0.8) !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.pg_col-2 .pixll_group-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap_xl);
    justify-items: stretch;
    align-items: center;
}

.pg_col-2 .pixll_group-content>.wp-block-image,
.pg_col-2 .pixll_group-content>.wp-block-image img {
    width: 100%;
}

@media screen and (max-width: 780px) {
    .pg_stack_om .pixll_group-content {
        grid-template-columns: 1fr !important;
    }

    .pg_col-2 .pixll_group-content {
        grid-template-columns: 1fr !important;
    }

    .pg_col-2.rev .pixll_group-content>:first-child {
        grid-row: 2/3;
    }
}

.col-2,
.col-3,
.col-4,
.col-auto {
    display: grid !important;
    gap: var(--gap);
}

:root {
    --col-2: repeat(2, 1fr);
    --col-3: repeat(3, 1fr);
    --col-4: repeat(4, 1fr);
}

.col-2 {
    grid-template-columns: var(--col-2);
    gap: clamp(30px, 10vw, 100px);
}

.col-3 {
    grid-template-columns: var(--col-3);
}

.col-4 {
    grid-template-columns: var(--col-4);
    gap: var(--gap_min);
}

.col-auto {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

@media only screen and (max-width: 1000px) {
    :root {
        --col-2: repeat(2, 1fr);
        --col-3: repeat(2, 1fr);
        --col-4: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 600px) {
    :root {
        --col-2: 1fr;
        --col-3: 1fr;
        --col-4: 1fr;
    }
}

:where(.col-2,
    .col-3,
    .col-4)>* {
    margin: 0 !important;
}

.center {
    align-items: center;
    text-align: center;
}

.center>* {
    margin-left: auto;
    margin-right: auto;
}

.flex-auto {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-content: flex-start;
    justify-content: space-between;
    align-items: flex-start;
}

.flex-auto>* {
    max-width: 200px;
}


/*Custom to Project*/
.col-auto-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
    margin-top: var(--gap_min);
}

.col-auto-flex>* {
    flex: 1 1 310px;
}

.is-style-style-1 {
    --max_width: 1000px;
}

.is-style-style-2 {
    --max_width: 600px;
}