.elementor-8204 .elementor-element.elementor-element-d4255dc{--display:flex;--min-height:800px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--overlay-opacity:0.5;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-8204 .elementor-element.elementor-element-d4255dc:not(.elementor-motion-effects-element-type-background), .elementor-8204 .elementor-element.elementor-element-d4255dc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-8204 .elementor-element.elementor-element-d4255dc::before, .elementor-8204 .elementor-element.elementor-element-d4255dc > .elementor-background-video-container::before, .elementor-8204 .elementor-element.elementor-element-d4255dc > .e-con-inner > .elementor-background-video-container::before, .elementor-8204 .elementor-element.elementor-element-d4255dc > .elementor-background-slideshow::before, .elementor-8204 .elementor-element.elementor-element-d4255dc > .e-con-inner > .elementor-background-slideshow::before, .elementor-8204 .elementor-element.elementor-element-d4255dc > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-69678f9 );--background-overlay:'';}.elementor-8204 .elementor-element.elementor-element-265c753{background-color:#EEEEEE;}.elementor-8204 .elementor-element.elementor-element-fa2e559{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}@media(max-width:1024px){.elementor-8204 .elementor-element.elementor-element-d4255dc{--min-height:600px;}}@media(max-width:767px){.elementor-8204 .elementor-element.elementor-element-d4255dc{--min-height:400px;}.elementor-8204 .elementor-element.elementor-element-fa2e559{--padding-top:0px;--padding-bottom:0px;--padding-left:30px;--padding-right:30px;}}/* Start custom CSS for html, class: .elementor-element-6d52048 *//* ===============================
   RESIDENTIAL HERO (OPTIMIZED)
================================ */

.residential-hero {
    background: linear-gradient(
        180deg,
        #eef3f6 0%,
        #e4edf2 100%
    );
    padding: clamp(60px, 8vw, 120px) clamp(20px, 6vw, 80px);
}

.residential-container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    gap: clamp(30px, 6vw, 80px);
}

/* ===============================
   TEXT
================================ */

.residential-tag {
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #000000;
    margin-bottom: 16px;
    font-weight: 800;
}

/* HEADLINE */
.residential-content h1 {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.05;
    font-weight: 600;
    color: #0a0d10;
    margin-bottom: 20px;
    font-family: "Neue Haas Unica", sans-serif;
}

/* SUBTEXT */
.residential-subtext {
    font-size: clamp(24px, 1.6vw, 20px);
    color:  #000000;
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 28px;
}

/* ===============================
   BUTTONS
================================ */

.residential-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-primary {
    background: #0a0d10;
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    transition: all 0.25s ease;
    box-shadow: 0 8px 20px rgba(10, 13, 16, 0.15);
}

.btn-primary:hover {
    background:#FFFFFF ;
    transform: translateY(-1px);
}

.btn-secondary {
    border: 1px solid rgba(10, 13, 16, 0.12);
    color: #0a0d10;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(6px);
    transition: all 0.25s ease;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.9);
}

/* ===============================
   IMAGE
================================ */

.residential-image {
    position: relative;
}

.residential-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;

    filter: 
        contrast(0.92)
        saturate(0.9)
        brightness(0.98);

    box-shadow: 0 30px 80px rgba(0,0,0,0.12);
}

.residential-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        rgba(40, 70, 90, 0.08),
        rgba(10, 13, 16, 0.06)
    );
}

/* ===============================
   TABLET (<= 1024px)
================================ */

@media (max-width: 1024px) {
    .residential-container {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .residential-image {
        order: -1;
    }

    .residential-content h1 {
        font-size: clamp(30px, 6vw, 44px);
    }

    .residential-subtext {
        font-size: 17px;
    }
}

/* ===============================
   MOBILE (<= 640px)
================================ */

@media (max-width: 640px) {
    .residential-hero {
        padding: 50px 20px;
    }

    .residential-content h1 {
        font-size: 30px;
    }

    .residential-subtext {
        font-size: 16px;
    }

    .residential-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c842b82 *//* ===============================
   RESIDENTIAL HERO (OPTIMIZED)
================================ */

.residential-hero {
    background: linear-gradient(
        180deg,
        #eef3f6 0%,
        #e4edf2 100%
    );
    padding: clamp(60px, 8vw, 120px) clamp(20px, 6vw, 80px);
}

.residential-container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    gap: clamp(30px, 6vw, 80px);
}

/* ===============================
   TEXT
================================ */

.residential-tag {
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #000000;
    margin-bottom: 16px;
    font-weight: 800;
}

/* HEADLINE */
.residential-content h1 {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.05;
    font-weight: 600;
    color: #0a0d10;
    margin-bottom: 20px;
    font-family: "Neue Haas Unica", sans-serif;
}

/* SUBTEXT */
.residential-subtext {
    font-size: clamp(24px, 1.6vw, 20px);
    color:  #000000;
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 28px;
}

/* ===============================
   BUTTONS
================================ */

.residential-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-primary {
    background: #0a0d10;
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    transition: all 0.25s ease;
    box-shadow: 0 8px 20px rgba(10, 13, 16, 0.15);
}

.btn-primary:hover {
    background:#FFFFFF ;
    transform: translateY(-1px);
}

.btn-secondary {
    border: 1px solid rgba(10, 13, 16, 0.12);
    color: #0a0d10;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(6px);
    transition: all 0.25s ease;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.9);
}

/* ===============================
   IMAGE
================================ */

.residential-image {
    position: relative;
}

.residential-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;

    filter: 
        contrast(0.92)
        saturate(0.9)
        brightness(0.98);

    box-shadow: 0 30px 80px rgba(0,0,0,0.12);
}

.residential-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        rgba(40, 70, 90, 0.08),
        rgba(10, 13, 16, 0.06)
    );
}

/* ===============================
   TABLET (<= 1024px)
================================ */

@media (max-width: 1024px) {
    .residential-container {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .residential-image {
        order: -1;
    }

    .residential-content h1 {
        font-size: clamp(30px, 6vw, 44px);
    }

    .residential-subtext {
        font-size: 17px;
    }
}

/* ===============================
   MOBILE (<= 640px)
================================ */

@media (max-width: 640px) {
    .residential-hero {
        padding: 50px 20px;
    }

    .residential-content h1 {
        font-size: 30px;
    }

    .residential-subtext {
        font-size: 16px;
    }

    .residential-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-265c753 *//* ===============================
   RESIDENTIAL HERO (OPTIMIZED)
================================ */

.residential-hero {
    background: linear-gradient(
        180deg,
        #eef3f6 0%,
        #e4edf2 100%
    );
    padding: clamp(60px, 8vw, 120px) clamp(20px, 6vw, 80px);
}

.residential-container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    gap: clamp(30px, 6vw, 80px);
}

/* ===============================
   TEXT
================================ */

.residential-tag {
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #000000;
    margin-bottom: 16px;
    font-weight: 800;
}

/* HEADLINE */
.residential-content h1 {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.05;
    font-weight: 600;
    color: #0a0d10;
    margin-bottom: 20px;
    font-family: "Neue Haas Unica", sans-serif;
}

/* SUBTEXT */
.residential-subtext {
    font-size: clamp(24px, 1.6vw, 20px);
    color:  #000000;
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 28px;
}

/* ===============================
   BUTTONS
================================ */

.residential-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-primary {
    background: #0a0d10;
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    transition: all 0.25s ease;
    box-shadow: 0 8px 20px rgba(10, 13, 16, 0.15);
}

.btn-primary:hover {
    background:#FFFFFF ;
    transform: translateY(-1px);
}

.btn-secondary {
    border: 1px solid rgba(10, 13, 16, 0.12);
    color: #0a0d10;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(6px);
    transition: all 0.25s ease;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.9);
}

/* ===============================
   IMAGE
================================ */

.residential-image {
    position: relative;
}

.residential-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;

    filter: 
        contrast(0.92)
        saturate(0.9)
        brightness(0.98);

    box-shadow: 0 30px 80px rgba(0,0,0,0.12);
}

.residential-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        rgba(40, 70, 90, 0.08),
        rgba(10, 13, 16, 0.06)
    );
}

/* ===============================
   TABLET (<= 1024px)
================================ */

@media (max-width: 1024px) {
    .residential-container {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .residential-image {
        order: -1;
    }

    .residential-content h1 {
        font-size: clamp(30px, 6vw, 44px);
    }

    .residential-subtext {
        font-size: 17px;
    }
}

/* ===============================
   MOBILE (<= 640px)
================================ */

@media (max-width: 640px) {
    .residential-hero {
        padding: 50px 20px;
    }

    .residential-content h1 {
        font-size: 30px;
    }

    .residential-subtext {
        font-size: 16px;
    }

    .residential-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-98cb4dd *//* ===============================
   RESIDENTIAL HERO (OPTIMIZED)
================================ */

.residential-hero {
    background: linear-gradient(
        180deg,
        #eef3f6 0%,
        #e4edf2 100%
    );
    padding: clamp(60px, 8vw, 120px) clamp(20px, 6vw, 80px);
}

.residential-container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    gap: clamp(30px, 6vw, 80px);
}

/* ===============================
   TEXT
================================ */

.residential-tag {
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #000000;
    margin-bottom: 16px;
    font-weight: 800;
}

/* HEADLINE */
.residential-content h1 {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.05;
    font-weight: 600;
    color: #0a0d10;
    margin-bottom: 20px;
    font-family: "Neue Haas Unica", sans-serif;
}

/* SUBTEXT */
.residential-subtext {
    font-size: clamp(24px, 1.6vw, 20px);
    color:  #000000;
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 28px;
}

/* ===============================
   BUTTONS
================================ */

.residential-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-primary {
    background: #0a0d10;
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    transition: all 0.25s ease;
    box-shadow: 0 8px 20px rgba(10, 13, 16, 0.15);
}

.btn-primary:hover {
    background:#FFFFFF ;
    transform: translateY(-1px);
}

.btn-secondary {
    border: 1px solid rgba(10, 13, 16, 0.12);
    color: #0a0d10;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(6px);
    transition: all 0.25s ease;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.9);
}

/* ===============================
   IMAGE
================================ */

.residential-image {
    position: relative;
}

.residential-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;

    filter: 
        contrast(0.92)
        saturate(0.9)
        brightness(0.98);

    box-shadow: 0 30px 80px rgba(0,0,0,0.12);
}

.residential-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        rgba(40, 70, 90, 0.08),
        rgba(10, 13, 16, 0.06)
    );
}

/* ===============================
   TABLET (<= 1024px)
================================ */

@media (max-width: 1024px) {
    .residential-container {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .residential-image {
        order: -1;
    }

    .residential-content h1 {
        font-size: clamp(30px, 6vw, 44px);
    }

    .residential-subtext {
        font-size: 17px;
    }
}

/* ===============================
   MOBILE (<= 640px)
================================ */

@media (max-width: 640px) {
    .residential-hero {
        padding: 50px 20px;
    }

    .residential-content h1 {
        font-size: 30px;
    }

    .residential-subtext {
        font-size: 16px;
    }

    .residential-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a1d93d4 *//* ===============================
   RESIDENTIAL HERO (OPTIMIZED)
================================ */

.residential-hero {
    background: linear-gradient(
        180deg,
        #eef3f6 0%,
        #e4edf2 100%
    );
    padding: clamp(60px, 8vw, 120px) clamp(20px, 6vw, 80px);
}

.residential-container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    gap: clamp(30px, 6vw, 80px);
}

/* ===============================
   TEXT
================================ */

.residential-tag {
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #000000;
    margin-bottom: 16px;
    font-weight: 800;
}

/* HEADLINE */
.residential-content h1 {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.05;
    font-weight: 600;
    color: #0a0d10;
    margin-bottom: 20px;
    font-family: "Neue Haas Unica", sans-serif;
}

/* SUBTEXT */
.residential-subtext {
    font-size: clamp(24px, 1.6vw, 20px);
    color:  #000000;
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 28px;
}

/* ===============================
   BUTTONS
================================ */

.residential-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-primary {
    background: #0a0d10;
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    transition: all 0.25s ease;
    box-shadow: 0 8px 20px rgba(10, 13, 16, 0.15);
}

.btn-primary:hover {
    background:#FFFFFF ;
    transform: translateY(-1px);
}

.btn-secondary {
    border: 1px solid rgba(10, 13, 16, 0.12);
    color: #0a0d10;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(6px);
    transition: all 0.25s ease;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.9);
}

/* ===============================
   IMAGE
================================ */

.residential-image {
    position: relative;
}

.residential-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;

    filter: 
        contrast(0.92)
        saturate(0.9)
        brightness(0.98);

    box-shadow: 0 30px 80px rgba(0,0,0,0.12);
}

.residential-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        rgba(40, 70, 90, 0.08),
        rgba(10, 13, 16, 0.06)
    );
}

/* ===============================
   TABLET (<= 1024px)
================================ */

@media (max-width: 1024px) {
    .residential-container {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .residential-image {
        order: -1;
    }

    .residential-content h1 {
        font-size: clamp(30px, 6vw, 44px);
    }

    .residential-subtext {
        font-size: 17px;
    }
}

/* ===============================
   MOBILE (<= 640px)
================================ */

@media (max-width: 640px) {
    .residential-hero {
        padding: 50px 20px;
    }

    .residential-content h1 {
        font-size: 30px;
    }

    .residential-subtext {
        font-size: 16px;
    }

    .residential-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e2f9d6f *//* ===============================
   RESIDENTIAL HERO (OPTIMIZED)
================================ */

.residential-hero {
    background: linear-gradient(
        180deg,
        #eef3f6 0%,
        #e4edf2 100%
    );
    padding: clamp(60px, 8vw, 120px) clamp(20px, 6vw, 80px);
}

.residential-container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    gap: clamp(30px, 6vw, 80px);
}

/* ===============================
   TEXT
================================ */

.residential-tag {
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #000000;
    margin-bottom: 16px;
    font-weight: 800;
}

/* HEADLINE */
.residential-content h1 {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.05;
    font-weight: 600;
    color: #0a0d10;
    margin-bottom: 20px;
    font-family: "Neue Haas Unica", sans-serif;
}

/* SUBTEXT */
.residential-subtext {
    font-size: clamp(24px, 1.6vw, 20px);
    color:  #000000;
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 28px;
}

/* ===============================
   BUTTONS
================================ */

.residential-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-primary {
    background: #0a0d10;
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    transition: all 0.25s ease;
    box-shadow: 0 8px 20px rgba(10, 13, 16, 0.15);
}

.btn-primary:hover {
    background:#FFFFFF ;
    transform: translateY(-1px);
}

.btn-secondary {
    border: 1px solid rgba(10, 13, 16, 0.12);
    color: #0a0d10;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(6px);
    transition: all 0.25s ease;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.9);
}

/* ===============================
   IMAGE
================================ */

.residential-image {
    position: relative;
}

.residential-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;

    filter: 
        contrast(0.92)
        saturate(0.9)
        brightness(0.98);

    box-shadow: 0 30px 80px rgba(0,0,0,0.12);
}

.residential-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        rgba(40, 70, 90, 0.08),
        rgba(10, 13, 16, 0.06)
    );
}

/* ===============================
   TABLET (<= 1024px)
================================ */

@media (max-width: 1024px) {
    .residential-container {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .residential-image {
        order: -1;
    }

    .residential-content h1 {
        font-size: clamp(30px, 6vw, 44px);
    }

    .residential-subtext {
        font-size: 17px;
    }
}

/* ===============================
   MOBILE (<= 640px)
================================ */

@media (max-width: 640px) {
    .residential-hero {
        padding: 50px 20px;
    }

    .residential-content h1 {
        font-size: 30px;
    }

    .residential-subtext {
        font-size: 16px;
    }

    .residential-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-dbabd1c *//* ===============================
   RESIDENTIAL HERO (OPTIMIZED)
================================ */

.residential-hero {
    background: linear-gradient(
        180deg,
        #eef3f6 0%,
        #e4edf2 100%
    );
    padding: clamp(60px, 8vw, 120px) clamp(20px, 6vw, 80px);
}

.residential-container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    gap: clamp(30px, 6vw, 80px);
}

/* ===============================
   TEXT
================================ */

.residential-tag {
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #000000;
    margin-bottom: 16px;
    font-weight: 800;
}

/* HEADLINE */
.residential-content h1 {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.05;
    font-weight: 600;
    color: #0a0d10;
    margin-bottom: 20px;
    font-family: "Neue Haas Unica", sans-serif;
}

/* SUBTEXT */
.residential-subtext {
    font-size: clamp(24px, 1.6vw, 20px);
    color:  #000000;
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 28px;
}

/* ===============================
   BUTTONS
================================ */

.residential-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-primary {
    background: #0a0d10;
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    transition: all 0.25s ease;
    box-shadow: 0 8px 20px rgba(10, 13, 16, 0.15);
}

.btn-primary:hover {
    background:#FFFFFF ;
    transform: translateY(-1px);
}

.btn-secondary {
    border: 1px solid rgba(10, 13, 16, 0.12);
    color: #0a0d10;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(6px);
    transition: all 0.25s ease;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.9);
}

/* ===============================
   IMAGE
================================ */

.residential-image {
    position: relative;
}

.residential-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;

    filter: 
        contrast(0.92)
        saturate(0.9)
        brightness(0.98);

    box-shadow: 0 30px 80px rgba(0,0,0,0.12);
}

.residential-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        rgba(40, 70, 90, 0.08),
        rgba(10, 13, 16, 0.06)
    );
}

/* ===============================
   TABLET (<= 1024px)
================================ */

@media (max-width: 1024px) {
    .residential-container {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .residential-image {
        order: -1;
    }

    .residential-content h1 {
        font-size: clamp(30px, 6vw, 44px);
    }

    .residential-subtext {
        font-size: 17px;
    }
}

/* ===============================
   MOBILE (<= 640px)
================================ */

@media (max-width: 640px) {
    .residential-hero {
        padding: 50px 20px;
    }

    .residential-content h1 {
        font-size: 30px;
    }

    .residential-subtext {
        font-size: 16px;
    }

    .residential-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }
}/* End custom CSS */