/* ============================================================
   ASSA SIGNS
   Zoho Sites Classic / V2
   Native editor stylesheet

   Keep page structure/layout inside the Zoho Sites editor.
   Use CSS only for shared visual styling.
   ============================================================ */


/* ------------------------------------------------------------
   SITE VARIABLES
   ------------------------------------------------------------ */

:root {
    --assa-text: #1a1a1a;
    --assa-muted: #5f5f5f;
    --assa-white: #ffffff;
    --assa-light: #f5f5f5;
    --assa-border: #dddddd;
    --assa-dark: #191919;

    --assa-content-width: 1500px;
    --assa-radius: 4px;
}


/* ------------------------------------------------------------
   GLOBAL
   ------------------------------------------------------------ */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--assa-text);
    background: var(--assa-white);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease;
}


/* ------------------------------------------------------------
   NATIVE ZOHO CONTENT AREA
   ------------------------------------------------------------ */

/*
   Do NOT hide or replace Zoho's native sections.
   These rules simply keep the content comfortably constrained.
*/

.theme-content-area,
.theme-content-container,
.theme-content-area-inner,
#thememaincontent {
    width: 100%;
    min-width: 0;
}

#thememaincontent .zpcontainer {
    width: 100%;
    max-width: var(--assa-content-width);
    margin-left: auto;
    margin-right: auto;
}


/* ------------------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------------------ */

#thememaincontent h1,
#thememaincontent h2,
#thememaincontent h3,
#thememaincontent h4 {
    color: var(--assa-text);
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 700;
}

#thememaincontent h1 {
    font-size: clamp(2.5rem, 4.5vw, 4.25rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

#thememaincontent h2 {
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

#thememaincontent h3 {
    font-size: 1.45rem;
    line-height: 1.3;
}

#thememaincontent h4 {
    font-size: 1.1rem;
    line-height: 1.4;
}

#thememaincontent p {
    line-height: 1.7;
}

#thememaincontent p,
#thememaincontent li {
    color: var(--assa-text);
}


/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

/*
   Keep the native Zoho header/menu.
   Only apply visual cleanup here.
*/

body > [class*="zpheader-style-"] {
    background: var(--assa-white);
    border-bottom: 1px solid var(--assa-border);
}


/* Make navigation feel cleaner without rebuilding it */


body > [class*="zpheader-style-"] {
    background: var(--assa-white);
    border-bottom: none !important;
    box-shadow: none !important;
}

body > [class*="zpheader-style-"] .zpcontainer {
    width: 100% !important;
    max-width: var(--assa-content-width, 1500px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */

#thememaincontent .zpbutton,
#thememaincontent a.zpbutton,
#thememaincontent button,
.zpform-container button,
.zpform-container input[type="submit"] {
    border-radius: var(--assa-radius);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


/* ------------------------------------------------------------
   FORMS
   ------------------------------------------------------------ */

.zpform-container {
    width: 100% !important;
    max-width: none !important;
}

.zpform-container input:not([type="checkbox"]):not([type="radio"]),
.zpform-container select,
.zpform-container textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 12px 14px;
    color: var(--assa-text);
    background: var(--assa-white);
    border: 1px solid #cfcfcf;
    border-radius: var(--assa-radius);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

.zpform-container input:focus,
.zpform-container select:focus,
.zpform-container textarea:focus {
    outline: 2px solid var(--assa-text);
    outline-offset: 2px;
}


/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

.theme-footer-area {
    border-top: 1px solid var(--assa-border);
}


/* ------------------------------------------------------------
   IMAGES / GALLERIES
   ------------------------------------------------------------ */

#thememaincontent .zpelem-image img {
    display: block;
    max-width: 100%;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    body {
        font-size: 16px;
    }

    #thememaincontent h1 {
        font-size: clamp(2.4rem, 7vw, 3.6rem);
    }

    #thememaincontent h2 {
        font-size: clamp(1.9rem, 5vw, 2.7rem);
    }
}


@media (max-width: 600px) {

    body {
        font-size: 15px;
    }

    #thememaincontent h1 {
        font-size: 2.5rem;
    }

    #thememaincontent h2 {
        font-size: 1.9rem;
    }

    #thememaincontent h3 {
        font-size: 1.3rem;
    }

    .zpform-container input:not([type="checkbox"]):not([type="radio"]),
    .zpform-container select,
    .zpform-container textarea {
        font-size: 16px;
    }
}


/* ------------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

.slides_thin {
}

/* Logo carousel only — does not affect the main photo slider */
.assa-logo-strip img {
    display: block;
    width: 160px !important;
    max-width: 100% !important;
    height: 70px !important;
    object-fit: contain !important;
    object-position: center;
    margin: 0 auto !important;
}

/* Smaller logo boxes on phones */
@media (max-width: 600px) {
    .assa-logo-strip img {
        width: 120px !important;
        height: 55px !important;
    }
}

/* ==========================================================
   ASSA HOME PAGE FORM
   Apply the class home_form to the column containing the form.
   ========================================================== */

/* Let the native form fill its existing column */
.home_form .zpelem-lpform,
.home_form .zpform-container,
.home_form .zpform-container form {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Main field list: three equal columns.
   Nested lists, such as checkbox options, are not targeted. */
.home_form .zpform-container ul:not(ul ul) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 16px;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Default to full-width rows */
.home_form .zpform-container ul:not(ul ul) > li {
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    box-sizing: border-box;
}

/* Short text fields: name, email and contact number */
.home_form .zpform-container ul:not(ul ul) > li:has(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input:not([type])
) {
    grid-column: span 1;
}

/* Message, buttons, consent and CAPTCHA stay full width */
.home_form .zpform-container ul:not(ul ul) > li:has(
    textarea,
    button,
    input[type="submit"],
    input[type="checkbox"],
    iframe,
    [data-sitekey],
    [class*="captcha" i]
),
.home_form .zpform-container ul:not(ul ul) > li[class*="captcha" i] {
    grid-column: 1 / -1;
}

/* Remove fixed widths and excess spacing inside each field */
.home_form .zpform-field-container,
.home_form .zpform-label-container {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    float: none !important;
    box-sizing: border-box;
}

.home_form .zpform-field-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* Keep labels readable when placeholders have not been added */
.home_form .zpform-label-container {
    margin: 0 0 6px !important;
    padding: 0 !important;
}

.home_form .zpform-label-container label {
    color: #757575 !important;
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* Underlined inputs — no outer box or rounded corners */
.home_form .zpform-container :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input:not([type]),
    textarea
) {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    height: 48px;
    margin: 0 !important;
    padding: 10px 12px !important;

    color: #3d3d3d !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #e6e6e6 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    box-sizing: border-box;
}

/* Compact, full-width message field */
.home_form .zpform-container textarea {
    height: 74px !important;
    min-height: 74px !important;
    resize: vertical;
}

/* Text shown inside empty fields */
.home_form .zpform-container input::placeholder,
.home_form .zpform-container textarea::placeholder {
    color: #757575 !important;
    opacity: 1;
    font-weight: 400;
}

/* Visible keyboard focus */
.home_form .zpform-container :is(input, textarea):focus-visible {
    border-bottom-color: #09a5dc !important;
    outline: 2px solid #283f75 !important;
    outline-offset: 3px;
}

/* Preserve a visible invalid-field state */
.home_form .zpform-container [aria-invalid="true"] {
    border-bottom-color: #b42318 !important;
}

/* Small, right-aligned submit button */
.home_form .zpform-container button,
.home_form .zpform-container input[type="submit"] {
    display: block !important;
    width: auto !important;
    max-width: 100%;
    min-height: 34px;
    height: auto !important;
    margin: 20px 0 0 auto !important;
    padding: 9px 18px !important;
    float: none !important;

    color: #ffffff !important;
    background: #09a5dc !important;
    border: 0 !important;
    border-radius: 5px !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    cursor: pointer;
}

.home_form .zpform-container button:hover,
.home_form .zpform-container input[type="submit"]:hover {
    background: #078bb9 !important;
}

.home_form .zpform-container button:focus-visible,
.home_form .zpform-container input[type="submit"]:focus-visible {
    outline: 2px solid #283f75 !important;
    outline-offset: 3px;
}

/* Stack fields on smaller screens */
@media (max-width: 767px) {
    .home_form .zpform-container ul:not(ul ul) {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .home_form .zpform-container ul:not(ul ul) > li {
        grid-column: 1 / -1 !important;
    }
}

/* ==========================================================
   HOME FORM: HIDE DUPLICATE LABELS WHEN PLACEHOLDERS EXIST
   Leave labels visible on fields with no placeholder.
   Do not hide controls, error messages or live announcements.
   ========================================================== */

.home_form .zpform-container li:has(
    input[placeholder]:not([placeholder=""]),
    textarea[placeholder]:not([placeholder=""])
) :is(label, .zpform-label-container):not(
    :has(input, select, textarea, button,
         [role="alert"], [aria-live],
         [class*="error" i], [id*="error" i]),
    [role="alert"], [aria-live],
    [class*="error" i], [id*="error" i]
) {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 1px !important;
    max-height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;

    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;

    transform: none !important;
    transition: none !important;
    pointer-events: none !important;
}
.zpcarousel-pause-btn {
display:none;
}
.zpcarousel-content-inner div.zpimage-text {
    display:flex !important;
}
.background_c_c {
    overflow:crop;
}
.our_work_c, .our_work_c .zpimage-container, .our_work_c img  {
    height: 192px !important;
}
.headersection {
    height:292px;
}
/* ==========================================================
   ASSA: WHAT WE DO / SERVICE ROWS

   Row:          assa_service_row
   Image column: assa_service_image
   Text column:  assa_service_text

   Keep the native row set to two equal columns.
   ========================================================== */

/* Shared sizing and no vertical gaps between service rows */
.assa_service_row {
    --assa-service-height: 350px;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    row-gap: 0 !important;
    column-gap: 0 !important;
    align-items: stretch !important;
}

/* Image column: remove the space surrounding the photograph */
.assa_service_row .assa_service_image {
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Remove spacing and width restrictions on image wrappers */
.assa_service_row .assa_service_image .zpelem-image,
.assa_service_row .assa_service_image .zpimage-container,
.assa_service_row .assa_service_image figure,
.assa_service_row .assa_service_image picture {
    display: block;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Every service photograph uses the same shallow frame */
.assa_service_row .assa_service_image img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--assa-service-height) !important;
    min-height: 0 !important;
    max-height: none !important;

    object-fit: cover;
    object-position: center;

    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Text column: centre the content vertically */
.assa_service_row .assa_service_text {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
    align-items: stretch;

    min-width: 0;
    min-height: var(--assa-service-height);
    height: auto !important;

    margin: 0 !important;
    padding: 32px clamp(30px, 4vw, 64px) !important;
    box-sizing: border-box;
}

/* Keep native text/button elements from being compressed */
.assa_service_row .assa_service_text > .zpelement {
    flex-shrink: 0;
}

/* Tablet/mobile: full-width columns and flexible text height */
@media (max-width: 991px) {
    .assa_service_row, .image_assa_height {
        --assa-service-height: clamp(220px, 50vw, 320px);
    }

    .assa_service_row .assa_service_image,
    .assa_service_row .assa_service_text {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .assa_service_row .assa_service_text {
        min-height: 0;
        padding: 32px 24px !important;
    }
}

/* ==========================================================
   SERVICE ROW FIX: enforce the desktop height
   Add AFTER the existing service-row CSS.
   ========================================================== */

@media (min-width: 992px) {

    /* Set the actual row height, not just the variable */
    .zprow.assa_service_row, .image_assa_height {
        height: var(--assa-service-height, 320px) !important;
        min-height: 0 !important;
        max-height: var(--assa-service-height, 320px) !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    /* Both native columns must fit within the row */
    .zprow.assa_service_row > .zpelem-col {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        box-sizing: border-box !important;
    }

    /* Contain the photograph within its column */
    .zprow.assa_service_row > .assa_service_image {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Make the native image wrappers fill the column */
    .zprow.assa_service_row .assa_service_image :is(
        .zpelem-image,
        .zpimage-container,
        picture,
        a:has(img)
    ) {
        display: block !important;
        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;
        max-height: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Fill the frame without stretching the photograph */
    .zprow.assa_service_row .assa_service_image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;
        max-height: 100% !important;
        max-width: none !important;

        object-fit: cover !important;
        object-position: center !important;

        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Keep text within the fixed-height column.
       Allow scrolling rather than losing oversized content. */
    .zprow.assa_service_row > .assa_service_text {
        justify-content: safe center !important;
        overflow-y: auto;
    }
}
/* ==========================================================
   SERVICE IMAGES: fill the 320px frame and crop the edges
   Desktop only. Keep the existing row/text-column rules.
   ========================================================== */

@media (min-width: 992px) {

    /* Image column: match the row height and clip overflow */
    #thememaincontent .zprow.assa_service_row > .assa_service_image {
        height: var(--assa-service-height, 320px) !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Give the image AND its wrappers a definite height.
       Do not rely on percentage heights through nested wrappers. */
    #thememaincontent .assa_service_row .assa_service_image :is(
        .zpelem-image,
        .zpimage-container,
        figure,
        picture,
        a:has(img),
        img
    ) {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: var(--assa-service-height, 320px) !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Fill the entire frame without distorting the photograph */
    #thememaincontent .assa_service_row .assa_service_image img {
        object-fit: cover !important;
        object-position: 50% 50% !important;
    }
}
/* Taller desktop layout for the installation/about row only */
@media (min-width: 992px) {
    .assa_service_row.assa_service_tall {
        --assa-service-height: 450px;
    }
}

/* ==========================================================
   OUR WORK CAROUSEL: 192px desktop rows and cropped images
   Apply assa_work_row to the three-column row in EACH slide.
   ========================================================== */

@media (min-width: 992px) {

    #thememaincontent .zprow.assa_work_row {
        --assa-work-height: 360px;
        align-items: stretch !important;
    }

    /* Fix the row and its three columns to the same height.
       Preserve the native column widths and horizontal spacing. */
    #thememaincontent .zprow.assa_work_row,
    #thememaincontent .assa_work_row > .zpelem-col {
        height: var(--assa-work-height) !important;
        min-height: 0 !important;
        max-height: var(--assa-work-height) !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;

        box-sizing: border-box !important;
    }

    /* Fill each column with the image and its native wrappers */
    #thememaincontent .assa_work_row :is(
        .zpelem-image,
        .zpimage-container,
        figure,
        picture,
        a:has(img),
        img
    ) {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: var(--assa-work-height) !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Clip photographs only—not the carousel controls */
    #thememaincontent .assa_work_row .zpelem-image {
        overflow: hidden !important;
    }

    /* Override the earlier 8:5 sizing and crop without stretching */
    #thememaincontent .assa_work_row img {
        aspect-ratio: auto !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 0 !important;
    }
}
/* ==========================================================
   ASSA CLIENT LOGO GRID

   Apply assa_client_logos to ONE native column.
   Place individual native Image elements directly inside it.
   Do not apply the service-row or carousel classes here.
   ========================================================== */

/* Centred, wrapping logo group */
#thememaincontent .zpelem-col.assa_client_logos {
    --assa-logo-max-width: 160px;
    --assa-logo-height: 80px;
    --assa-logo-column-gap: 32px;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: flex-start !important;

    gap: 24px var(--assa-logo-column-gap) !important;

    width: 100% !important;
    max-width: 1200px !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Each native Image element becomes one logo item */
#thememaincontent .assa_client_logos > .zpelem-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 1 auto !important;

    width: auto !important;
    max-width: var(--assa-logo-max-width) !important;
    min-width: 0 !important;

    height: var(--assa-logo-height) !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Centre the image inside Zoho's native wrappers */
#thememaincontent .assa_client_logos > .zpelem-image :is(
    .zpimage-container,
    figure,
    picture,
    a:has(img)
) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: var(--assa-logo-height) !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Preserve the complete logo: no stretching or cropping */
#thememaincontent .assa_client_logos > .zpelem-image img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: var(--assa-logo-max-width) !important;
    max-height: var(--assa-logo-height) !important;

    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;

    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Smaller logos and spacing on phones */
@media (max-width: 600px) {
    #thememaincontent .zpelem-col.assa_client_logos {
        --assa-logo-max-width: 130px;
        --assa-logo-height: 64px;
        --assa-logo-column-gap: 20px;

        row-gap: 20px !important;
    }
}
/* ==========================================================
   ASSA PORTFOLIO PHOTO GRID

   Apply assa_portfolio_grid to ONE full-width column.
   Place individual native Image elements directly inside it.

   Equal image heights, variable widths, automatic wrapping.
   ========================================================== */

/* Image group: grow naturally with the number of photographs */
#thememaincontent .zpelem-col.assa_portfolio_grid {
    --assa-portfolio-height: 250px;
    --assa-portfolio-gap: 15px;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    align-content: flex-start !important;

    gap: var(--assa-portfolio-gap) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Each Image element takes the width its photograph needs */
#thememaincontent .assa_portfolio_grid > .zpelem-image {
    display: block !important;
    flex: 0 1 auto !important;

    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: var(--assa-portfolio-height) !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Remove native image-wrapper sizing and spacing */
#thememaincontent .assa_portfolio_grid > .zpelem-image :is(
    .zpimage-container,
    figure,
    picture,
    a:has(img)
) {
    display: block !important;

    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: var(--assa-portfolio-height) !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Match the height, without forcing equal image widths */
#thememaincontent .assa_portfolio_grid > .zpelem-image img {
    display: block !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: var(--assa-portfolio-height) !important;
    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Smaller photo rows on tablets */
@media (max-width: 991px) {
    #thememaincontent .zpelem-col.assa_portfolio_grid {
        --assa-portfolio-height: 200px;
        --assa-portfolio-gap: 12px;
    }
}

/* Smaller photo rows on phones */
@media (max-width: 600px) {
    #thememaincontent .zpelem-col.assa_portfolio_grid {
        --assa-portfolio-height: 150px;
        --assa-portfolio-gap: 10px;
    }
}
/* ==========================================================
   HEADER INSTAGRAM LINK
   Add the profile through Social Profiles first.
   ========================================================== */

body > [class*="zpheader-style-"] a[href*="instagram.com"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex-shrink: 0;

    padding: 0 !important;
    box-sizing: border-box !important;

    color: #999999 !important;
    background: #f6f6f6 !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

/* Size the native icon without changing other header icons */
body > [class*="zpheader-style-"] a[href*="instagram.com"] :is(svg, img) {
    display: block;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
}

body > [class*="zpheader-style-"] a[href*="instagram.com"]:hover {
    color: #283f75 !important;
    background: #eeeeee !important;
}

body > [class*="zpheader-style-"] a[href*="instagram.com"]:focus-visible {
    outline: 2px solid #283f75 !important;
    outline-offset: 3px;
}

/* Horizontal spacing for the ASSA Signs site */
:root {
    --assa-page-padding: 40px;
}

/* Header, page sections and footer sections */
[data-headercontainer] .zpcontainer,
.theme-content-area .zpsection > .zpcontainer,
.theme-footer-area .zpsection > .zpcontainer {
    box-sizing: border-box;
    padding-left: var(--assa-page-padding) !important;
    padding-right: var(--assa-page-padding) !important;
}

/* Reduce the padding on narrow mobile screens */
@media (max-width: 639px) {
    :root {
        --assa-page-padding: 20px;
    }
}