/* =========================================================
   DIGITAL EMPIRE — ZOHO SITES CUSTOM CSS
   Cleaned / organized master stylesheet
   ========================================================= */


/* =========================================================
   01. BRAND VARIABLES
   ========================================================= */

:root {
    --de-blue: #0144DE;
    --de-blue-hover: #0037B5;
    --de-black: #0A0A0A;
    --de-white: #FFFFFF;
    --de-text: #1A1A1A;
    --de-muted: #666666;
    --de-service-text: #4F4F4F;
    --de-light: #F7F7F7;
    --de-border: rgba(0, 0, 0, 0.10);
}


/* =========================================================
   02. HEADER + NAVIGATION
   ========================================================= */

/* Desktop header width / alignment */
@media (min-width: 1200px) {
    .zpheader-style-01 .theme-header .zpcontainer {
        width: calc(100% - 100px) !important;
        max-width: 1600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }
}

/* Responsive logo sizing */
@media (max-width: 991px) {
    .theme-logo-parent img,
    .theme-logo img {
        max-width: 290px !important;
        width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 767px) {
    .theme-logo-parent img,
    .theme-logo img {
        max-width: 290px !important;
    }
}

/* Desktop active navigation underline */
@media (min-width: 992px) {
    .theme-navigation-and-icons .theme-menu-selected > a,
    .theme-navigation-and-icons .theme-menu-selected > a:hover {
        border-bottom-color: var(--de-blue) !important;
    }

    .theme-navigation-and-icons .theme-menu-selected > a::before,
    .theme-navigation-and-icons .theme-menu-selected > a::after {
        background-color: var(--de-blue) !important;
        border-color: var(--de-blue) !important;
    }
}

/* Client Portal — desktop */
@media (min-width: 992px) {
    [data-theme-menu-name="Client Portal"] {
        background: var(--de-blue) !important;
        color: var(--de-white) !important;
        padding: 10px 22px !important;
        border-radius: 24px !important;
        display: inline-block !important;
        transition: all 0.2s ease !important;
        margin-left: 18px !important;
    }

    [data-theme-menu-name="Client Portal"]:hover {
        background: var(--de-white) !important;
        color: var(--de-blue) !important;
    }
}

/* Tablet + mobile navigation — Zoho breakpoint below 992px */
@media (max-width: 991px) {
    .theme-menu {
        background: var(--de-black) !important;
        border-top: 1px solid rgba(1, 68, 222, 0.55) !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
    }

    .theme-menu ul[data-zs-menu-container] > li > a {
        color: var(--de-white) !important;
        background: transparent !important;
        padding: 15px 22px !important;
        font-size: 17px !important;
        font-weight: 500 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .theme-menu ul[data-zs-menu-container] > li > a:hover {
        color: var(--de-white) !important;
        background: rgba(1, 68, 222, 0.15) !important;
    }

    .theme-menu ul[data-zs-menu-container] > li.theme-menu-selected > a {
        color: var(--de-blue) !important;
        background: transparent !important;
    }

    .theme-menu [data-theme-menu-name="Client Portal"] {
        background: var(--de-blue) !important;
        color: var(--de-white) !important;
        display: inline-block !important;
        padding: 10px 20px !important;
        border-radius: 24px !important;
        margin: 4px 0 !important;
    }

    .theme-menu li:has([data-theme-menu-name="Client Portal"]) > a {
        padding-top: 12px !important;
        padding-bottom: 16px !important;
        border-bottom: none !important;
    }
}


/* =========================================================
   03. HERO
   ========================================================= */

/* Hero highlight / eyebrow text */
.zscustom-banner-highlight-text span {
    color: #000000 !important;
}

@media (max-width: 991px) {
    .zscustom-banner-highlight-text span {
        color: var(--de-white) !important;
    }
}

/* Desktop hero content inset */
@media (min-width: 992px) {
    .zscustom-banner-column {
        padding-left: 50px !important;
    }
}

/* Hero CTA — matches Client Portal sizing */
.zscustom-banner-column a,
.zscustom-banner-column .zpbutton {
    font-size: 16px !important;
    padding: 10px 20px !important;
    min-height: unset !important;
    border-radius: 24px !important;
}

/* Tablet hero */
@media (max-width: 991px) {
    .zscustom-banner-heading {
        font-size: 38px !important;
        line-height: 1.08 !important;
        letter-spacing: -1px !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}

/* Tablet hero paragraph width */
@media (min-width: 768px) and (max-width: 991px) {
    .zscustom-banner-column .zptext {
        max-width: 600px !important;
    }
}

/* Phone hero — overrides Zoho's inline 64px span sizing */
@media (max-width: 767px) {
    .zscustom-banner-heading h1,
    .zscustom-banner-heading h1 span,
    .zscustom-banner-heading h1 strong,
    .zscustom-banner-heading h1 strong span {
        font-size: 38px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.5px !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
    }

    .zscustom-banner-heading {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
}


/* =========================================================
   04. REUSABLE DESIGN SYSTEM
   ========================================================= */

/* Small blue section label — wrapper */
.de-section-label {
    color: var(--de-blue) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 12px !important;
}

/* Zoho places the custom class on a wrapper, so target inner headings */
.de-section-label h1,
.de-section-label h2,
.de-section-label h3,
.de-section-label h4,
.de-section-label h5,
.de-section-label h6 {
    color: var(--de-blue) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Main section heading — wrapper */
.de-section-heading {
    color: var(--de-text) !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 18px !important;
}

/* Main section heading — inner Zoho heading */
.de-section-heading h1,
.de-section-heading h2,
.de-section-heading h3,
.de-section-heading h4,
.de-section-heading h5,
.de-section-heading h6 {
    color: var(--de-text) !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
}

/* Intro / body copy */
.de-section-copy,
.de-section-copy p {
    color: var(--de-muted) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
}

/* Constrain wider intro paragraphs */
.de-content-width {
    max-width: 900px !important;
}

/* Standard section spacing */
.de-section {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}

.de-section-compact {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
}

/* Light / dark section helpers */
.de-light-section {
    background: var(--de-white) !important;
    color: var(--de-text) !important;
}

.de-dark-section {
    background: var(--de-black) !important;
    color: var(--de-white) !important;
}

.de-dark-section .de-section-heading,
.de-dark-section .de-section-heading h1,
.de-dark-section .de-section-heading h2,
.de-dark-section .de-section-heading h3,
.de-dark-section .de-section-heading h4,
.de-dark-section .de-section-heading h5,
.de-dark-section .de-section-heading h6 {
    color: var(--de-white) !important;
}

.de-dark-section .de-section-copy,
.de-dark-section .de-section-copy p {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Centered content helper */
.de-center {
    text-align: center !important;
}

.de-center.de-content-width,
.de-center .de-content-width {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Standard blue button */
.de-button,
a.de-button {
    display: inline-block !important;
    background: var(--de-blue) !important;
    color: var(--de-white) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 10px 20px !important;
    border-radius: 24px !important;
    text-decoration: none !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.de-button:hover,
a.de-button:hover {
    opacity: 0.88 !important;
    text-decoration: none !important;
}

/* Primary CTA button */
.de-primary-button a,
a.de-primary-button {
    display: inline-block !important;
    background: var(--de-blue) !important;
    color: var(--de-white) !important;
    padding: 10px 20px !important;
    border-radius: 24px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.de-primary-button a:hover,
a.de-primary-button:hover {
    background: var(--de-blue-hover) !important;
    transform: translateY(-1px);
}

/* Optional reusable service utilities */
.de-service-number {
    color: var(--de-blue) !important;
    font-weight: 700 !important;
}

.de-service-title {
    color: var(--de-text) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.de-service-copy {
    color: var(--de-muted) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.de-accent-line {
    width: 44px !important;
    height: 3px !important;
    background: var(--de-blue) !important;
    margin-bottom: 16px !important;
}


/* =========================================================
   05. OUR EXPERTISE — SERVICE ITEMS
   ========================================================= */

.de-service-item {
    position: relative !important;
    padding-top: 12px !important;
    margin-bottom: 22px !important;
}

/* Short blue accent line */
.de-service-item::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 44px !important;
    height: 3px !important;
    background: var(--de-blue) !important;
}

/* Overall service copy */
.de-service-item p {
    color: var(--de-service-text) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* Number + title */
.de-service-item p > strong {
    display: inline-block !important;
    color: var(--de-text) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
}

/* Blue service number */
.de-service-item p > strong:first-of-type span {
    color: var(--de-blue) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* Space between heading and description */
.de-service-item p > br {
    line-height: 2 !important;
}

/* Tablet service spacing */
@media (min-width: 768px) and (max-width: 991px) {
    .de-service-item {
        margin-bottom: 14px !important;
    }
}

/* Phone service spacing / sizing */
@media (max-width: 767px) {
    .de-service-item {
        padding-top: 16px !important;
        margin-bottom: 20px !important;
    }

    .de-service-item::before {
        width: 38px !important;
    }

    .de-service-item p > strong,
    .de-service-item p > strong:first-of-type span {
        font-size: 17px !important;
    }
}


/* =========================================================
   06. RESIDENTIAL / COMMERCIAL MARKET CARDS
   ========================================================= */

.de-market-card {
    position: relative !important;
    min-height: 650px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    align-items: flex-end !important;
}

/* Dark image gradient */
.de-market-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.00) 30%,
        rgba(0, 0, 0, 0.35) 55%,
        rgba(0, 0, 0, 0.96) 100%
    ) !important;
}

/* Zoho text container */
.de-market-card .zptext {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    padding: 42px !important;
    margin-top: auto !important;
    color: var(--de-white) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65) !important;
}

/* Force consistent typography over Zoho inline formatting */
.de-market-card .zptext,
.de-market-card .zptext *,
.de-market-card p,
.de-market-card p *,
.de-market-card span,
.de-market-card strong,
.de-market-card a {
    font-family: Montserrat, sans-serif !important;
    color: var(--de-white) !important;
}

/* Card title */
.de-market-card strong {
    font-size: 30px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* Card body */
.de-market-card p {
    font-size: 17px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* Card CTA */
.de-market-card a {
    display: inline-block !important;
    margin-top: 14px !important;
    padding: 10px 20px !important;
    background: var(--de-blue) !important;
    color: var(--de-white) !important;
    border-radius: 24px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

@media (max-width: 991px) {
    .de-market-card {
        min-height: 540px !important;
    }

    .de-market-card .zptext {
        padding: 32px !important;
    }

    .de-market-card strong {
        font-size: 26px !important;
    }
}

@media (max-width: 767px) {
    .de-market-card {
        min-height: 500px !important;
        border-radius: 12px !important;
    }

    .de-market-card .zptext {
        padding: 26px !important;
    }

    .de-market-card strong {
        font-size: 24px !important;
    }

    .de-market-card p {
        font-size: 16px !important;
    }
}

/* =========================================================
   08. GLOBAL RESPONSIVE DESIGN SYSTEM
   ========================================================= */

/* Tablet + phone */
@media (max-width: 991px) {
    .de-section {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    .de-section-heading,
    .de-section-heading h1,
    .de-section-heading h2,
    .de-section-heading h3,
    .de-section-heading h4,
    .de-section-heading h5,
    .de-section-heading h6 {
        font-size: 34px !important;
    }

    .de-section-copy,
    .de-section-copy p {
        font-size: 16px !important;
    }

    .de-content-width {
        max-width: 760px !important;
    }
}

/* Phone */
@media (max-width: 767px) {
    .de-section {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .de-section-compact {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .de-section-label,
    .de-section-label h1,
    .de-section-label h2,
    .de-section-label h3,
    .de-section-label h4,
    .de-section-label h5,
    .de-section-label h6 {
        font-size: 14px !important;
    }

    .de-section-heading,
    .de-section-heading h1,
    .de-section-heading h2,
    .de-section-heading h3,
    .de-section-heading h4,
    .de-section-heading h5,
    .de-section-heading h6 {
        font-size: 30px !important;
        line-height: 1.2 !important;
    }

    .de-section-copy,
    .de-section-copy p {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    .de-service-title {
        font-size: 17px !important;
    }

    .de-service-copy {
        font-size: 16px !important;
    }

    .de-button,
    a.de-button {
        font-size: 16px !important;
        padding: 10px 20px !important;
    }
}

/* =========================================================
   09. SERVICES PAGE — SERVICE ROWS
   ========================================================= */

/* Desktop */
.de-service-row {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* Tablet */
@media (max-width: 991px) {
    .de-service-row {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}

/* Phone */
@media (max-width: 767px) {
    .de-service-row {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
}

/* =========================================================
   10. SERVICES PAGE — TYPOGRAPHY
   ========================================================= */

/* Service headings */
.de-service-heading,
.de-service-heading h1,
.de-service-heading h2,
.de-service-heading h3 {
    font-size: 30px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: -0.4px !important;
    margin-bottom: 18px !important;
}

/* Service descriptions */
.de-service-description,
.de-service-description p {
    font-size: 17px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
}

/* Capability line */
.de-service-capabilities,
.de-service-capabilities p,
.de-service-capabilities span {
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
}


/* Tablet */
@media (max-width: 991px) {
    .de-service-heading,
    .de-service-heading h1,
    .de-service-heading h2,
    .de-service-heading h3 {
        font-size: 30px !important;
    }

    .de-service-description,
    .de-service-description p {
        font-size: 16px !important;
    }

    .de-service-capabilities,
    .de-service-capabilities p,
    .de-service-capabilities span {
        font-size: 15px !important;
    }
}


/* Phone */
@media (max-width: 767px) {
    .de-service-heading,
    .de-service-heading h1,
    .de-service-heading h2,
    .de-service-heading h3 {
        font-size: 27px !important;
        line-height: 1.18 !important;
    }
}