.elementor-3136 .elementor-element.elementor-element-7bb7266{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3136 .elementor-element.elementor-element-1c52b84{--display:flex;--justify-content:flex-end;--gap:5px 5px;--row-gap:5px;--column-gap:5px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3136 .elementor-element.elementor-element-1c52b84:not(.elementor-motion-effects-element-type-background), .elementor-3136 .elementor-element.elementor-element-1c52b84 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://dkodearchitects.com/wp-content/uploads/2026/07/Article-2-1-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-3136 .elementor-element.elementor-element-570e5bb{color:#FFFFFF;}.elementor-3136 .elementor-element.elementor-element-6ad7a92{--display:flex;--justify-content:flex-end;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3136 .elementor-element.elementor-element-6ad7a92:not(.elementor-motion-effects-element-type-background), .elementor-3136 .elementor-element.elementor-element-6ad7a92 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://dkodearchitects.com/wp-content/uploads/2026/07/Article-1-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-3136 .elementor-element.elementor-element-ca0b9a8{color:#FFFFFF;}@media(min-width:768px){.elementor-3136 .elementor-element.elementor-element-1c52b84{--width:35%;}.elementor-3136 .elementor-element.elementor-element-6ad7a92{--width:65%;}}/* Start custom CSS */.dk-arch-split,
.dk-arch-split * {
    box-sizing: border-box;
}

.dk-arch-split {
    width: %;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 12px;
    overflow: hidden;
}

.dk-arch-panel {
    position: relative;
    min-width: 0;
    width: auto important;
    min-height: 450px;
    overflow: hidden;
    border-radius: 18px;

    flex-basis: 0 !important;
    flex-shrink: 1 !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    will-change: flex-grow;

    transition:
        flex-grow 20s cubic-bezier(.20, 1, .3, 1),
        filter 1.2s cubic-bezier(.20, 1, .3, 1);
}

.dk-arch-left {
    flex-grow: 35 !important;
}

.dk-arch-right {
    flex-grow: 65 !important;
}

.dk-arch-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, .05) 55%,
        rgba(0, 0, 0, .72) 100%
    );

    opacity: 0;

    transition:
        opacity 1.1s cubic-bezier(.16, 1, .3, 1);
}

.dk-arch-content {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;

    width: 100%;
    padding: clamp(24px, 3vw, 48px);

    color: #fff;

    opacity: 1;
    transform: translateY(0);

    transition:
        transform 1.15s cubic-bezier(.16, 1, .3, 1),
        opacity .9s cubic-bezier(.16, 1, .3, 1);
}

.dk-arch-content h1,
.dk-arch-content h2,
.dk-arch-content h3,
.dk-arch-content h4,
.dk-arch-content h5,
.dk-arch-content h6,
.dk-arch-content p {
    color: inherit;
}

@media (hover: hover) and (pointer: fine) {

    .dk-arch-content {
        opacity: 0;
        transform: translateY(45px);
    }

    .dk-arch-split:has(.dk-arch-left:hover) .dk-arch-left {
        flex-grow: 68 !important;
    }

    .dk-arch-split:has(.dk-arch-left:hover) .dk-arch-right {
        flex-grow: 32 !important;
    }

    .dk-arch-split:has(.dk-arch-right:hover) .dk-arch-left {
        flex-grow: 25 !important;
    }

    .dk-arch-split:has(.dk-arch-right:hover) .dk-arch-right {
        flex-grow: 75 !important;
    }

    .dk-arch-panel:hover::after {
        opacity: 1;
    }

    .dk-arch-panel:hover .dk-arch-content {
        opacity: 1;
        transform: translateY(0);

        transition-delay:
            .22s,
            .22s;
    }
}

@media (max-width: 1024px) {

    .dk-arch-panel {
        min-height: 470px;
    }

    .dk-arch-left {
        flex-grow: 40 !important;
    }

    .dk-arch-right {
        flex-grow: 60 !important;
    }

    .dk-arch-panel::after {
        opacity: 1;
    }
}

@media (max-width: 767px) {

    .dk-arch-split {
        flex-direction: column !important;
        gap: 12px;
    }

    .dk-arch-panel,
    .dk-arch-left,
    .dk-arch-right {
        width: 100% !important;
        flex: none !important;
        min-height: 420px;
    }

    .dk-arch-content {
        opacity: 1;
        transform: none;
        padding: 24px;
    }

    .dk-arch-panel::after {
        opacity: 1;
    }
}/* End custom CSS */