/*
Theme Name: Trilogy 2025
Theme URI: 
Author: RVADV Rafa
Author URI: 
Description: Trilogy Investment Co. Theme 2025.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trilogy2025
Tags: 
*/

/* ---------------------------------------- */
/* ------------ GLOBAL STYLES ------------- */
html { box-sizing: border-box; scroll-behavior: smooth; }
*, *:before, *:after { box-sizing: inherit; }
* { touch-action: manipulation; }
:root {
    --clr1: var(--wp--preset--color--dark);
    --clr2: var(--wp--preset--color--primary);
    --clr3: var(--wp--preset--color--secondary);
    --gray: var(--wp--preset--color--gray);

    --primary-font: var(--wp--preset--font-family--lato);
    --secondary-font: var(--wp--preset--font-family--noto-serif);

    --theme-color: var(--clr2);
    --sz: clamp(14px, min(2vw, 3vh), 16px);
	font-size: var(--sz);
}
/* font-family: var(--wp--preset--font-family--noto-serif); */
/* font-family: var(--wp--preset--font-family--lato); */

/* ---------------------------------------- */
/* Editor-only styles       .editor-styles-wrapper, body.block-editor-page {}               */  
/* Frontend-only styles     body:not( .block-editor-page ){}     */

.grid-container {
    max-width: 1200px;
    margin: auto;
}

.filtered { position: relative; }
.filtered::after {
    display: block; content: '';
    position: absolute; top:0;bottom:0;left:0;right:0;
    width: 100%; height: 100%; z-index: 0;
    background: 
        linear-gradient(164deg, rgba(35, 47, 58, 0.2), rgba(35, 47, 58, 0.3)),
        linear-gradient(164deg, rgba(11, 117, 186, 0.2), rgba(11, 117, 186, 0.3));
}
.filtered.light::after {
    display: block; content: '';
    position: absolute; top:0;bottom:0;left:0;right:0;
    width: 100%; height: 100%; z-index: 0;
    background: 
    linear-gradient(180deg, rgba(35, 47, 58, 0.4), rgba(35, 47, 58, 0) 42%),
    linear-gradient(164deg, rgba(35, 47, 58, 0.1), rgba(35, 47, 58, 0.2)),
    linear-gradient(164deg, rgba(11, 117, 186, 0.1), rgba(11, 117, 186, 0.2)),
    linear-gradient(164deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
}
.show-bullet {
    list-style-type: disc !important;
}

body:is(.page-template-default, .member-template-default) .wp-block-post-content :is( p, li ),
.project-single-content-block p { text-align: justify; }
.has-text-align-center { text-align: center !important;}

/* GSAP Initial Styles */
.gsap-split-load { position: relative; z-index: 1; }
.editor-styles-wrapper, body.block-editor-page .gsap-split-load { opacity: 1 !important; } 
body:not( .block-editor-page ) .gsap-split-load { opacity: 0; overflow: hidden; } 

/* ---------------------------------------- */
/* ----------- Template Styles ------------ */
/* ---------------------------------------- */
/* VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV */


/*----------------------------------------- */
/*------ Default Page Template Styles ----- */
/*----------------------------------------- */
body:is( .page-template-default, .member-template-default ) .wp-block-post-content {
    h2 {}
    h4 { margin-bottom: 32px; }
    p  { font-size: clamp(1em, 1rem + ((1vw - 0.2em) * 0.481), 1.2em); margin-bottom: 1em; line-height: 1.42; }
    ul:not(.gcb-track) { text-align: left; padding-left: 0; list-style: none; line-height: 1.42; }
    ul:not(.gcb-track) li + li { padding-top: 1em; }
    @media screen and (max-width: 600px) {
        h2 {}
        h4 {}
        p  { font-size: 18px !important; }
        ul { font-size: 18px !important; }
    }
}


/*----------------------------------------- */
/*---------------- 404 Page --------------- */
/*----------------------------------------- */
.page-404 { background: var(--clr2); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 200px 1rem; margin-top: 0; border-bottom: 1px solid #fff2; min-height: 84vh; }
.page-404 h2 { color: #fff; font-size: 3.4rem;}
.page-404 p { color: #fff; font-size: 1.42rem; }
.page-404 p a { color: #fff; }
.page-404 p a:hover { color: var(--clr3); }
.page-404::before {
    content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%;
    background-size: min(80vw, 640px); background-repeat: no-repeat; background-position: center; opacity: 0.1; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='1084' height='602' viewBox='0 0 1084 602' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M72.5 72.0005L145 72.0004L72.5 318.5L0 318.5L72.5 72.0005Z' fill='white'/%3E%3Cpath d='M113 246.501L283 246.501V318.5L92 318.501L113 246.501Z' fill='white'/%3E%3Cpath d='M299 9.15527e-05L371.5 0V601.5L299 601.5V9.15527e-05Z' fill='white'/%3E%3Cpath d='M784.5 72.0005L857 72.0004L784.5 318.5L712 318.5L784.5 72.0005Z' fill='white'/%3E%3Cpath d='M825 246.501L995 246.501V318.5L804 318.501L825 246.501Z' fill='white'/%3E%3Cpath d='M1011 9.15527e-05L1083.5 0V601.5L1011 601.5V9.15527e-05Z' fill='white'/%3E%3Cpath d='M805 382C805 418.67 793.514 454.418 772.155 484.225C750.796 514.032 720.636 536.399 685.913 548.186C651.189 559.973 613.646 560.588 578.555 549.943C543.465 539.298 512.59 517.93 490.267 488.838C467.944 459.746 455.294 424.392 454.094 387.742C452.894 351.092 463.205 314.987 483.577 284.497C503.95 254.008 533.361 230.665 567.68 217.749C602 204.832 639.503 202.989 674.923 212.48' stroke='white' stroke-width='65'/%3E%3C/svg%3E%0A");
}
@media screen and (max-width: 600px) {
    .page-404 h2 { color: #fff; font-size: 3rem; }
    .page-404 p { color: #fff; font-size: 18px; }
}

/*----------------------------------------- */
/*------- Default Page Header Block ------- */
/*----------------------------------------- */
.def-header-block {}
@media screen and (max-width: 1000px) {
    .def-header-block { min-height: 246px !important; }
    .def-header-block h2 > *{ font-size: 1.42em;}
    
}
/*----------------------------------------- */
/*------- Slanted Left Right Block -------- */
/*----------------------------------------- */
.slanted-block {
    --line-gap: 1em; 
    --line-thck: 1.4px;
    --line-clr: #dddb;
    overflow: hidden;
    background: repeating-linear-gradient( -45deg, #F5F5F5 0px, #F5F5F5 var(--line-gap), var(--line-clr) var(--line-gap), var(--line-clr) calc(var(--line-gap) + var(--line-thck)));
    box-shadow: inset 0 1px 0 0 #E6E6E6, inset 0 -1px 0 0 #E6E6E6;
    .slanted-block-row {
        display: flex;
        padding: 1em;
        .left {
            width: 50%;
            padding-right: 2em;
            p {
                font-family: var(--secondary-font);
                font-size: 1.8em !important;
                span { color: #888; }
            }
        }
        .right {
            width: 50%;
            display: flex;
            justify-content: left;
            .stat-wrap {
                padding-bottom: 4em;
                margin-right: 2em;
                margin-left: 0 !important;
                min-width: min(100px, 12vw);
                hr:nth-child(2) {
                    max-width: 100px !important;
                    margin-left: 0 !important;
                    height: 0.2em !important;
                    margin-top: 0;
                    width: 0%;
                    transition: width 2s ease-out;
                }
                p:nth-child(3) {
                    margin-top: 1em;
                    font-size: 1em;
                    max-width: 8em;
                    margin-left: 0 !important;
                    position: absolute;
                    transition: opacity 2s ease-out;
                    opacity: 0;
                }
                .stat-num {
                    font-size: 4rem;
                    font-weight: bold;
                    color: var(--gray);
                    font-family: var(--secondary-font);
                    opacity: 0;
                    transition: opacity 2s ease-out;
                }
                .scroll-trigger-stat-num--active {
                    opacity: 1;
                }
            }
            .stat-wrap:has( .scroll-trigger-stat-num--active ) {
                .scroll-trigger-stat-num--active { opacity: 1; }
                hr:nth-child(2) { width: 100%; }
                p:nth-child(3) { opacity: 1; }
            }
        }
    }
    @media screen and (max-width: 1000px) {
        .slanted-block-row {
            flex-direction: column; 
            .left, .right { width: 100%; justify-content: center; }
            .left { text-align: center; font-size: 0.864em !important; padding-right: 0; 
                p { font-size: 2.2em !important; }
            }
            .right {
                .stat-num { font-size: 3rem !important; }
            }
        }
    }
}

/*----------------------------------------- */
/*------------- CTA TEXT Block ------------ */
/*----------------------------------------- */
.cta-text-lr-block {
    background: #F5F5F5;
    box-shadow: inset 0 -1px 0 0 #E6E6E6;
    padding: 1em;
    .cta-text-lr-block-wrap {
        display: flex;
        .left {
            width: 50%;
            h2 {
                font-family: var(--secondary-font);
                text-transform: uppercase;
                font-size: 2.2em;
                font-weight: 500;
            }
            p {
                text-transform: uppercase;
                margin-top: 0.2em;
                font-weight: bold;
            }
            .wp-block-button__link.wp-element-button {
                background: none;
                color: var(--clr3);
                font-weight: bold;
                letter-spacing: 0.142em;
                padding-left: 0;
                border-radius: 0;
                &::after {
                    display: inline-block;
                    width: 1.42em;
                    height: 1.42em;
                    vertical-align: -0.264em;
                    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230B75BA' fill-rule='evenodd' d='M12.043 7.5L9.396 4.854l.708-.708L13.957 8l-3.853 3.854l-.708-.707L12.043 8.5H3v-1z' clip-rule='evenodd'/%3E%3C/svg%3E");
                    transition: all 0.2s ease-in-out;
                    margin-left: 0.4em;
                }
                &:hover::after { translate: 0.42em; }
            }
        }
        .right {
            width: 50%;
            p {
                line-height: 164%;
                font-size: 1.042em;
                font-weight: 500;
                font-family: var(--secondary-font);
                text-align: justify;
            }
        }
    }
    @media screen and (max-width: 1000px) {
        .cta-text-lr-block-wrap {
            flex-direction: column;
            .left, .right { width: 100%; }
            .left { 
                text-align: center; 
                .wp-block-buttons { justify-content: center; font-size: 1.24em; }
            }
            .right {
                border-top: 1px solid #0002;
                padding: 1em;
                p {
                    font-size: 1.42em;
                    font-family: var(--primary-font);
                }
            }
        }
    }
}

/*----------------------------------------- */
/*------------- QUAD CARD Block ----------- */
/*----------------------------------------- */
.quad-card-block {
    padding: 1em;
    .block-heading {
        h2 {
            font-family: var(--secondary-font);
            text-transform: uppercase;
            font-size: 2.4em;
            font-weight: 500;
        }
        p {
            text-transform: uppercase;
            margin-top: 0.2em;
            font-weight: bold;
            color: var(--clr3);
            letter-spacing: 0.03em;
        }
        hr { color: var(--clr3); height: 3px; background: var(--clr3);}
    }
    .quad-wrap {
        display: flex;
        justify-content: space-between;
        gap: 1em;
        > * { width: calc( 25% - 1em ); }
        > div > a { text-decoration: none;}
        .wp-block-cover {
            transition: all 0.2s ease-in-out;
            height: min(2vw, 180px);
            min-height: min(36vw, 180px) !important;
            img { filter: drop-shadow(0 4px 8px #000a); object-fit: contain; height: 100px;}
        }
        h2 {
            color: #1e1e1e;
            margin-bottom: 0;
            font-size: 1.5em;
        }
        p { 
            margin-top: 0.4em;
            font-size: 1em;
            &::after {
                display: inline-block;
                width: 1.42em;
                height: 1.42em;
                vertical-align: -0.464em;
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230B75BA' fill-rule='evenodd' d='M12.043 7.5L9.396 4.854l.708-.708L13.957 8l-3.853 3.854l-.708-.707L12.043 8.5H3v-1z' clip-rule='evenodd'/%3E%3C/svg%3E");
                transition: all 0.2s ease-in-out;
                margin-left: 0;
                rotate: -45deg;
                transform-origin: 50% 20%;
            }
        }
        > div > a:hover {
            display: block;
            .wp-block-cover { border-bottom: 12px solid var(--clr3); }
            p::after { translate: 0.42em -0.14em; rotate: 0deg; }
        }
    }
    @media screen and (max-width: 1000px) {
        .quad-wrap {
            flex-wrap: wrap;
            > * { width: calc( 50% - 1em ); }
        }
    }
    @media screen and (max-width: 600px) {
        .block-heading p { font-size: 1.2em; } 
        .quad-wrap {
            > * { width: 100%; border-bottom: 1px solid #E6E6E6; }
            .wp-block-cover {
                min-height: 40vw !important;
                overflow: hidden;
                figure { max-width: 32vw; }
            }
            h2, p { text-align: center; }
            h2 { font-size: 2em; margin-top: 0.4em;}
            p { font-size: 1.4em; margin-bottom: 1.64em; }
        }
    }
}

/*----------------------------------------- */
/*------------- QUAD CARD Block ----------- */
/*----------------------------------------- */
.two-card-block {
    padding: 1em;
    .block-heading {
        h2 {
            font-family: var(--secondary-font);
            text-transform: uppercase;
            font-size: 2.4em;
            font-weight: 500;
        }
        p {
            text-transform: uppercase;
            margin-top: 0.2em;
            font-weight: bold;
            color: var(--clr3);
        }
        hr { color: var(--clr3); height: 3px; background: var(--clr3);}
    }
    .two-card-container {
        .left, .right {
            width: 50%;
            a {
                text-decoration: none;
                display: block;
            }
            h4 {
                color: #1e1e1e;
                font-family: var(--secondary-font);
                text-transform: uppercase;
                font-size: 1.5em;
                font-weight: 500;
                margin-bottom: 0;
                margin-top: 0.2em;
            }
            .filtered { transition: filter 0.2s ease-in-out; }
            p {
                font-size: 1em;
                text-transform: uppercase;
                margin-top: 0.2em;
                font-weight: bold;
                color: var(--clr3); display: flex;
                &::after {
                    display: inline-block;
                    width: 1.42em;
                    height: 1.42em;
                    vertical-align: -0.464em;
                    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230B75BA' fill-rule='evenodd' d='M12.043 7.5L9.396 4.854l.708-.708L13.957 8l-3.853 3.854l-.708-.707L12.043 8.5H3v-1z' clip-rule='evenodd'/%3E%3C/svg%3E");
                    transition: all 0.2s ease-in-out;
                    margin-left: 0;
                    rotate: -45deg;
                    transform-origin: 50% 20%;
                }
            }
            a:hover {
                .filtered { filter: brightness(1.1); }
                p::after { translate: 0.42em -0.14em; rotate: 0deg; }
            }
        }
    }
    @media screen and (max-width: 600px) {
        .block-heading p { font-size: 1.2em; } 
        .two-card-container {
            flex-direction: column;
            .left, .right {
                width: 100%;
                h4, p{ text-align: center; justify-content: center; }
                h4 { font-size: 2.4em; }
                p { font-size: 1.4em; }
            }
        }
    }
}

/*----------------------------------------- */
/*--------- Side Image Text Block --------- */
/*----------------------------------------- */
.side-image-text-block { padding: 1em; margin: 2em 0 !important; }
.side-image-text-block .side-image-text-block-row { display: flex; }
.side-image-text-block .left { width: min(30%, 400px); }
.side-image-text-block .right { padding-left: 4em; width: 70%; padding-top: 2em; padding-bottom: 2em; }
.side-image-text-block h2 { position: relative; width: fit-content; margin-left: 0 !important; }
.side-image-text-block h2::after { content: ''; display: block; position: absolute; left: 0; top: calc(100% + 0.2em); background: var(--clr3); height: 2px; width: 100%; max-width: 324px; }
.side-image-text-block p { text-align: justify; }
@media screen and (max-width: 600px) {
    .side-image-text-block { margin: 0 0 4em 0 !important; }
    .side-image-text-block h2 { font-size: 1.32em !important; font-weight: 600; }
    .side-image-text-block .side-image-text-block-row { flex-direction: column; }
    .side-image-text-block .left { width: 100%; order: 1; }
    .side-image-text-block .right { padding-left: 0em; width: 100%; order: 2; }
    .side-image-text-block p { font-size: 1.42em !important; }
}
.side-image-text-block.bg-filled > .wp-block-group { background: var(--clr3); }
.side-image-text-block.bg-filled figure { margin-bottom: 0; }
.side-image-text-block.bg-filled :is( h2, h4, p ){ color: #fff !important; padding-right: 3em; }
.side-image-text-block.bg-filled h2::after{ background: #fff !important; }
@media screen and (max-width: 600px) {
    .side-image-text-block.bg-filled { background: var(--clr3); padding-bottom: 3em; }
}

/*----------------------------------------- */
/*--------- Center Content Block ---------- */
/*----------------------------------------- */
.center-content-block { padding: 1em; }
.center-content-block h4 { position: relative; margin-bottom: 32px; }
.center-content-block h4::after { content: ''; display: block; position: absolute; left: 0; right: 0; top: calc(100% + 0.2em); background: var(--clr3); height: 2px; width: 100%; max-width: 324px; margin: auto; }
.center-content-block p { margin-top: 1em; margin-bottom: 1em; line-height: 1.42; }
.center-content-block ul { font-size: 1.24em !important; text-align: left; padding-left: 0; list-style: none; line-height: 1.42;}
.center-content-block ul li + li{ padding-top: 1em;}
@media screen and (max-width: 600px) {
    .center-content-block h4 { font-size: 2.4em !important; text-align: left; }
    .center-content-block h4::after { margin-left: 0; }
    .center-content-block p { font-size: 18px !important; text-align: left;  }
    .center-content-block ul { font-size: 18px !important; }
}

/*----------------------------------------- */
/*------------- Stat Bar Block ------------ */
/*----------------------------------------- */
.stat-bar-block { background: var(--clr3); display: flex; justify-content: center; max-width: min(1400px, calc( 100% - 2em )); margin: 2em auto !important; flex-wrap: wrap; }
.stat-bar-block .stat-bar-stat { width: fit-content; margin: 1em 0 !important; color: #fff; padding: 1em; display: flex; align-items: center; }
.stat-bar-block .stat-bar-stat + .stat-bar-stat { border-left: 1px solid #fff4; }
.stat-bar-block .stat-bar-stat h4 { font-size: 1.8em; font-family: var(--secondary-font); font-weight: normal; transition: opacity 1s ease-in; margin: 0 !important;}
.stat-bar-block .stat-bar-stat p { font-size: 0.8em !important; text-transform: uppercase; white-space: nowrap; font-weight: 600; line-height: 100%; margin-bottom: 0 !important; }
@media screen and (max-width: 600px) { 
    .stat-bar-block .stat-bar-stat { width: 100%; }
    .stat-bar-block { flex-direction: column; align-items: left; width: fit-content; padding: 0 2em; min-width: 300px; } 
    .stat-bar-block .stat-bar-stat + .stat-bar-stat { margin-top: 0 !important; padding-top: 1.64em; border-left: 0 solid #fff0; border-top: 1px solid #fff4; }
}
.stat-bar-block.alt { background: #F3F3F3; }
.stat-bar-block.alt .stat-bar-stat { color: var(--clr3); }
.stat-bar-block.alt .stat-bar-stat + .stat-bar-stat { border-left: 1px solid var(--clr3); }
@media screen and (max-width: 600px) { 
    .stat-bar-block.alt .stat-bar-stat + .stat-bar-stat { border-left: 0 solid #fff0; border-top: 1px solid var(--clr3); }
}
/* GSAP styles */
body:not( .block-editor-page ) .stat-bar-block  { opacity: 0; transition: opacity 1s ease-in; }
body:not( .block-editor-page ) .stat-bar-block:has( .scroll-trigger-stat-num--active ) { opacity: 1; }
body:not( .block-editor-page ) .stat-bar-block .stat-bar-stat h4 { opacity: 0; }
body:not( .block-editor-page ) .stat-bar-block .stat-bar-stat h4.scroll-trigger-stat-num--active { opacity: 1; }

/*----------------------------------------- */
/*---------- CTA Cover Img Block ---------- */
/*----------------------------------------- */
.cta-cover-img-block:not(.wide) { width: min(1400px, calc( 100% - 2em )); margin: 2em auto !important; }
.cta-cover-img-block.wide {}
.cta-cover-img-block a:hover { background: var(--clr2) !important; }

/*----------------------------------------- */
/*---------- Featured Text Block ---------- */
/*----------------------------------------- */
.featured-text-block { width: min(1400px, calc( 100% - 2em )); margin: auto; }
.featured-text-block h2 { font-size: 32px; font-weight: 500; font-family: var(--secondary-font); max-width: 1000px; margin: 0 auto; }
.featured-text-block hr { max-width: 1000px; margin: 12px auto 24px auto; background: #fff3; width: 100%; border: none; height: 2px; }
.featured-text-block ul { font-size: 22px; max-width: 1000px; margin: 0 auto; list-style: disc;}
.featured-text-block ul li { margin-bottom: 1em; }
.featured-text-block p { font-size: 18px; max-width: 1000px; margin: 0 auto; line-height: 1.42;}
@media screen and (max-width: 600px) { 
    .featured-text-block p { font-size: 1.24em !important; }
    .featured-text-block ul { font-size: 18px; }
}

/*----------------------------------------- */
/*---------- Single Member Block ---------- */
/*----------------------------------------- */
.header-buffer { height: 100px; background: var(--clr2); border-bottom: 20px solid var(--clr3); }
@media screen and (max-width: 600px) { .header-buffer { height: 80px; } }
.single-member-block { margin-top: 0; position: relative;}
.single-member-block .left { width: 40%; height: 100%; max-height:100%; position: absolute;}
.single-member-block .left figure { height: 100%;}
.single-member-block .left img { width: 100%; height: auto; object-fit: cover; max-height: 800px; position: sticky; top: 80px;}
.single-member-block .right { width: 60%; padding: 4em; position: relative; margin-right: 0; margin-left: auto; min-height: 684px; padding-right: max(1em, calc((100vw - 1400px)/ 2));}
.single-member-block .right > h2,
.single-member-block .right > div.is-acf-field,
.single-member-block .right > .entry-content { margin: 0 !important; text-align: justify; }
.single-member-block .right > div.is-acf-field { font-size: 1em; font-family: var(--primary-font); font-weight: 700; color: var(--clr3); text-transform: uppercase; }
.single-member-block .right > h2 { font-size: 3em; font-family: var(--secondary-font); font-weight: 500; color: #1e1e1e; margin-top: 0; margin-bottom: 0.64em !important;}
@media screen and (max-width: 600px) { 
    .single-member-block > div { display: flex; flex-direction: column; }
    .single-member-block .left { width: 100%; position: relative; }
    .single-member-block .right { width: 100%; padding: 1em 2em; min-height: fit-content; padding-bottom: 4em; }
}

/*----------------------------------------- */
/*---------- Single Post Block ---------- */
/*----------------------------------------- */
.header-buffer { height: 100px; background: var(--clr2); border-bottom: 20px solid var(--clr3); }
@media screen and (max-width: 600px) { .header-buffer { height: 80px; } }
.single-post-block { margin-top: 0; position: relative;}
.single-post-block .left { width: 40%; height: 100%; max-height:100%; position: absolute;}
.single-post-block .left figure { height: 100%;}
.single-post-block .left img { width: 100%; height: auto; object-fit: contain !important; max-height: 800px; position: sticky; top: 80px;}
.single-post-block .right { width: 60%; padding: 4em; position: relative; margin-right: 0; margin-left: auto; min-height: 684px; padding-right: max(1em, calc((100vw - 1400px)/ 2));}
.single-post-block .right > h2,
.single-post-block .right > time,
.single-post-block .right > .entry-content { margin: 0 !important; }
.single-post-block .right > .entry-content :is(h1,h2,h3,h4) { font-family: var(--secondary-font); font-weight: 500; line-height: 142%; color: #1e1e1e; margin-top: 0; margin-bottom: 1em;}
.single-post-block .right > .entry-content p { font-size: 1em; font-family: var(--primary-font); font-weight: 500; line-height: 142%; color: #1e1e1e; margin-top: 0; margin-bottom: 1em; text-align: justify; }
.single-post-block .right > .entry-content a { color: var(--clr3); text-decoration: none; &:hover{ text-decoration: underline; }}
.single-post-block .right time { font-size: 1em; font-family: var(--primary-font); font-weight: 700; color: var(--clr3); text-transform: uppercase; }
.single-post-block .right > h2 { font-size: 3em; font-family: var(--secondary-font); font-weight: 500; color: #1e1e1e; margin-top: 0; margin-bottom: 0.64em !important;}
.single-post-block .right > h2 { font-size: 3em; font-family: var(--secondary-font); font-weight: 500; color: #1e1e1e; margin-top: 0; margin-bottom: 0.64em !important;}
@media screen and (max-width: 600px) { 
    .single-post-block > div { display: flex; flex-direction: column; }
    .single-post-block .left { width: 100%; position: relative; }
    .single-post-block .right { width: 100%; padding: 1em 2em; min-height: fit-content; padding-bottom: 4em; }
}

/*----------------------------------------- */
/*---------- Contact Form Block ----------- */
/*----------------------------------------- */
.contact-page-wrap > div { padding: 1em;} 
.contact-page-wrap .left-content { width: 50%; padding-right: 4em; } 
.contact-page-wrap .left-content h2 { position: relative; width: fit-content; margin-left: 0 !important; } 
.contact-page-wrap .left-content h2::after { content: ''; display: block; position: absolute; left: 0; top: calc(100% + 0.2em); background: var(--clr3); height: 2px; width: 100%; max-width: 324px; } 
.contact-page-wrap .left-content p {} 
.contact-form-block { 
    width: 50%;
    border: 1px solid #0001;
    background: #E5E5E5;
    box-shadow: 0 4px 8px 0 #0004;
    margin-top: -2em !important;
    margin-bottom: -2em !important;
    position: relative;
    z-index: 2;
    padding: 1em 2em;
}
.contact-form-block :is( input, span, textarea, select ) { width: 100%;}  
.contact-form-block :is( input, textarea, select) { font-size: 1em; padding: 0.64em 1em; font-family: var(--primary-font); border: 1px solid #CFCFCF; }  
.contact-form-block textarea { height: 100px; }  
.contact-form-block select, .contact-form-block ::picker(select) { appearance: base-select; background-color: #fff; border-radius: 0px; }
.contact-form-block input[type="submit"] { background: var(--clr3); color: #fff; cursor: pointer; width: fit-content; padding: 0.64em 4.2em; }
.contact-form-block input[type="submit"]:hover { background: var(--clr2); }
.contact-form-block p label { display: block; }
.contact-form-block p br { }
.contact-form-block p label span.label { font-size: 0.9em; display: block; color: var(--clr3); text-transform: uppercase; font-weight: 700; line-height: 100%; margin-bottom: 0.4em; }  
.contact-form-block p span.wpcf7-spinner { width: 24px; }
.contact-form-block p span.wpcf7-not-valid-tip { background: #fff; border: 1px solid #cfcfcf; border-top: none; padding: 0.2em 1em; background: rgb(168 79 59); color: #fff; width: fit-content; translate: 1em;}
@media screen and (max-width: 600px) { 
    .contact-page-wrap > div { display: flex; flex-direction: column; }
    .contact-page-wrap .left-content { width: 100%; text-align: center; padding: 1.42em 0; }
    .contact-page-wrap .left-content h2 { margin: auto !important; }
    .contact-form-block { width: 100%; margin-top: 0 !important;}
}
.contact-development-block-container { align-items: start; }
.contact-development-block-container ul { align-items: start; }
.contact-form-block.development { position: sticky; top: 100px; }