/* Contact Us page styles */
.remark-page--contact {
    background-color: var(--remark-color-bg);
}

/* Hero */
.remark-contact-hero.remark-section {
    padding: 100px 24px 100px;
    background: linear-gradient(to bottom, var(--remark-color-bg-alt) 67%, var(--remark-color-white) 67%);
    display: flex;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

/* Ensure the page header / hero wrapper is white on the Contact page */
.remark-page--contact .page-header {
    background: #ffffff !important;
    background-image: none !important;
}

/* More specific: override the contact hero gradient on the Contact page only */
/* scope hero override to the semantic page class */
.remark-page--contact .remark-contact-hero.remark-section {
    background: #ffffff !important;
    background-image: none !important;
}

.remark-contact-hero__inner {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    position: relative;
    z-index: 1;
    text-align: center;
}

.remark-contact-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 999px;
    background-color: var(--remark-color-white);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: var(--remark-font-body);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.remark-contact-hero__highlight,
.remark-contact-hero__badge-text {
    background-image: linear-gradient(90deg, var(--remark-color-highlight-start), var(--remark-color-highlight-end));
    background-size: 200% 100%;
    background-position: 200% 0%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.remark-contact-hero__title {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 400;
    line-height: 1.05;
    color: var(--remark-color-primary);
}

.remark-contact-hero__title-line {
    display: block;
    font-size: clamp(2.4rem, 4vw, 4rem);
}

.remark-contact-hero__subtitle {
    margin: 0;
    font-family: var(--remark-font-body);
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.7;
    color: var(--remark-color-text-muted);
    max-width: 640px;
}

.remark-contact-hero__cta-wrapper {
    display: inline-flex;
}

.remark-contact-hero__media {
    width: 100%;
    max-width: 1280px;
    height: auto;
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.remark-contact-hero__image-container {
    position: relative;
    width: 100%;
}

.remark-contact-hero__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 48px 48px 16px 16px;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.remark-contact-hero__title--mobile {
    display: none;
}

@media (min-width: 992px) {
    .remark-contact-hero__image-container {
        width: 65%;
    }

    /* Desktop: allow the hero subtitle to grow wider up to 1280px for large viewports */
    .remark-contact-hero__subtitle {
        max-width: 1280px !important;
    }
}

@media (max-width: 991px) {
    .remark-contact-hero.remark-section {
        padding-bottom: 64px;
    }

    .remark-contact-hero__title--desktop {
        display: none;
    }

    .remark-contact-hero__title--mobile {
        display: flex;
    }

    .remark-contact-hero__media {
        position: static;
        transform: none;
        width: 100%;
    }
}

/* Contact Form Styles */
.remark-contact-form {
    max-width: 700px;
    margin: 0 auto;
    padding: 40px;
    background-color: var(--remark-color-white);
    border-radius: 16px;
    box-shadow: none !important;
}

.remark-contact-form .form-row {
    margin-bottom: 20px;
}



/* Modern selector: specifically target the .form-row that contains the submit button
   and remove its bottom margin. This covers the case where .form-status (a DIV)
   follows the button row so :last-of-type doesn't match. Uses :has() which is
   supported in modern browsers (Chrome/Edge/Safari newest versions). */
.remark-contact-form .form-row:has(button) {
    margin-bottom: 0 !important;
}

/* Layout: make name + email sit side-by-side on desktop */
@media (min-width: 992px) {
    .remark-contact-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 20px; /* row gap 16px, column gap 20px */
        align-items: start;
    }

    /* Make each form-row take full width by default; we'll override the first two to share a row */
    .remark-contact-form .form-row {
        grid-column: 1 / -1;
    }

    /* Name and Email: first two form rows share the grid columns side-by-side */
    .remark-contact-form .form-row:nth-of-type(1) {
        grid-column: 1 / 2;
    }

    .remark-contact-form .form-row:nth-of-type(2) {
        grid-column: 2 / 3;
    }

    /* Submit and other rows remain full width */
    .remark-contact-form .form-row:last-of-type,
    .remark-contact-form .form-row:nth-last-of-type(2),
    .remark-contact-form .form-row:nth-last-of-type(3) {
        grid-column: 1 / -1;
    }
}

.remark-contact-form label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--remark-font-body);
    font-weight: 600;
    color: var(--remark-color-primary);
}

.remark-contact-form input[type="text"],
.remark-contact-form input[type="email"],
.remark-contact-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #E3E5EF;
    border-radius: 8px;
    font-family: var(--remark-font-body);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Input background and placeholder styling requested for the contact form */
.remark-contact-form input[type="text"],
.remark-contact-form input[type="email"],
.remark-contact-form input[type="tel"],
.remark-contact-form textarea,
.remark-contact-form select {
    background-color: #F4F4F4 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

/* Placeholder color/typography across browsers */
.remark-contact-form ::-webkit-input-placeholder {
    color: #C5CBD6 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.remark-contact-form :-ms-input-placeholder { /* IE 10+ */
    color: #C5CBD6 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.remark-contact-form ::-ms-input-placeholder { /* Edge */
    color: #C5CBD6 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.remark-contact-form ::placeholder {
    color: #C5CBD6 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

.remark-contact-form input[type="text"]:focus,
.remark-contact-form input[type="email"]:focus,
.remark-contact-form textarea:focus {
    outline: none;
    border-color: var(--remark-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 53, 122, 0.1);
}

.remark-contact-form .button {
    width: 100%;
    padding: 16px;
    font-size: 1.1rem;
}

.remark-contact-form .form-status {
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: 8px;
    text-align: center;
    display: none;
}

.remark-contact-form .form-status.success {
    background-color: #E9F7EF;
    color: #008A3D;
    display: block;
}

.remark-contact-form .form-status.error {
    background-color: #FDEBEB;
    color: #D71921;
    display: block;
}

/* Contact Layout */
.remark-contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1280px;
    margin: 60px auto;
    padding: 0 24px;
}

.remark-contact-layout__locations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* Remove background from location cards at the specific path requested */
#content > div.page-content > div > div.elementor-element.elementor-element-cbd3298.e-con-full.e-flex.e-con.e-parent.e-lazyloaded > div > div > div > div.remark-contact-layout__locations .remark-contact-location {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Remove left and right padding from all location cards at the specific Elementor path
   There are currently 4 cards — this targets every direct child location card */
#content > div.page-content > div > div.elementor-element.elementor-element-cbd3298.e-con-full.e-flex.e-con.e-parent.e-lazyloaded > div > div > div > div.remark-contact-layout__locations > div.remark-contact-location {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Make the Contact page background a light grey while keeping hero and cards as intended */
/* If a .remark-page--contact wrapper exists, target it; otherwise target the body for the Contact page */
/* Use the semantic body class instead of page-id */
.remark-page--contact {
    background-color: #f5f6f7 !important;
}

/* Ensure the main contact layout area doesn't introduce its own white bg */
/* Ensure the main contact layout area doesn't introduce its own white bg */
.remark-page--contact .remark-contact-layout {
    background: transparent !important;
}

.remark-contact-location {
    background-color: var(--remark-color-white);
    padding: 30px;
    border-radius: 16px;
    /* Remove the original drop shadow so the card sits flush with the page background */
    box-shadow: none;
}

.remark-contact-location__name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--remark-color-primary);
    margin: 0 0 25px 0;
}

.remark-contact-location__detail {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.remark-contact-location__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.remark-contact-location__address,
.remark-contact-location__phone,
.remark-contact-location__email {
    font-family: var(--remark-font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--remark-color-text-muted);
    margin: 0;
}

.remark-contact-location__email a {
    color: var(--remark-color-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.remark-contact-location__email a:hover {
    color: var(--remark-color-highlight-end);
}

@media (max-width: 991px) {
    .remark-contact-layout {
        grid-template-columns: 1fr;
    }

    .remark-contact-layout__locations {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .remark-contact-form {
        margin: 0;
        padding: 24px;
    }

    .remark-contact-layout {
        margin: 40px auto;
    }

    .remark-contact-layout__locations {
        grid-template-columns: 1fr;
    }
}

/* Mobile: center the submit button and make it a natural size instead of full-width
   We scope this to the contact page CSS so global button rules remain untouched. */
@media (max-width: 767px) {
    /* Center the last form-row (where the submit sits) */
    .remark-contact-form .form-row:last-child {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0; /* keep spacing tidy */
    }

    /* Ensure the button inside that row doesn't stretch full-width on mobile */
    .remark-contact-form .form-row:last-child .blue-g-btn,
    .remark-contact-form .form-row:last-child .white-g-btn,
    .remark-contact-form .form-row:last-child .remark-contact-form__submit,
    .remark-contact-form .form-row:last-child .button {
        width: auto;
        min-width: 160px; /* keeps a comfortable tappable size */
    }
}

/* Specific override for the badge inserted at the requested Elementor path
   Set the badge background to the requested light grey without editing
   global CSS. Using !important to ensure it overrides other theme rules. */
#content > div.page-content > div > div.elementor-element.elementor-element-fe4a206.e-con-full.e-flex.e-con.e-parent.e-lazyloaded > div > div > section > div > span {
    background-color: #F4F4F4 !important;
}

/* Desktop-specific typography override for the 3rd contact location title
   Target exact DOM path per request and scope to desktop (>=992px). */
@media (min-width: 992px) {
    /* Apply the same typography to all location titles in the locations container */
    #content > div.page-content > div > div.elementor-element.elementor-element-cbd3298.e-con-full.e-flex.e-con.e-parent.e-lazyloaded > div > div > div > div.remark-contact-layout__locations > div > h3 {
        color: #161D29 !important;
        font-weight: 400 !important;
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    /* Desktop-only: set location phone/email typography to Inter 400, #34404F, 16px
       Scoped to the exact Elementor path per request so we don't affect other pages */
    #content > div.page-content > div > div.elementor-element.elementor-element-cbd3298.e-con-full.e-flex.e-con.e-parent.e-lazyloaded > div > div > div > div.remark-contact-layout__locations .remark-contact-location__phone,
    #content > div.page-content > div > div.elementor-element.elementor-element-cbd3298.e-con-full.e-flex.e-con.e-parent.e-lazyloaded > div > div > div > div.remark-contact-layout__locations .remark-contact-location__email,
    #content > div.page-content > div > div.elementor-element.elementor-element-cbd3298.e-con-full.e-flex.e-con.e-parent.e-lazyloaded > div > div > div > div.remark-contact-layout__locations .remark-contact-location__email a {
        font-family: 'Inter', var(--remark-font-body), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
        font-weight: 400 !important;
        color: #34404F !important;
        font-size: 16px !important;
    }

    /* Desktop-only: remove all padding from every location card at the
       specific Elementor path. Using !important to ensure override of other
       theme rules as requested. */
    #content > div.page-content > div > div.elementor-element.elementor-element-cbd3298.e-con-full.e-flex.e-con.e-parent.e-lazyloaded > div > div > div > div.remark-contact-layout__locations > div {
        padding: 0 !important;
    }
}