/* =====================================================================
   custom.css — Global Relocation Packers & Movers
   All classes below use the "grpm-" prefix (Global Relocation Packers
   & Movers) so they never collide with the base theme's own classes.
   ===================================================================== */

/* ---------- HERO SECTION ---------- */
.grpm-hero-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: var(--gr-navy, #0b1f3a);
    padding: 160px 0 190px;
    color: #fff;
}

    .grpm-hero-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(11, 31, 58, 0.72);
    }

.grpm-hero-content {
    position: relative;
    z-index: 2;
}

.grpm-hero-tagline {
    color: var(--gr-orange, #f36f21);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

    .grpm-hero-tagline i {
        font-size: 8px;
        margin-right: 8px;
        vertical-align: middle;
    }

.grpm-hero-title {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 20px;
    color: #fff;
}

.grpm-hero-subtitle {
    font-size: 17px;
    max-width: 560px;
    margin-bottom: 30px;
    color: #e6e9ef;
}

.grpm-hero-btn-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.grpm-hero-call-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
}

    .grpm-hero-call-btn i {
        color: var(--gr-orange, #f36f21);
    }

    .grpm-hero-call-btn:hover {
        color: var(--gr-orange, #f36f21);
    }

@media (max-width: 767px) {
    .grpm-hero-section {
        padding: 90px 0 50px;
        text-align: center;
    }

    .grpm-hero-title {
        font-size: 30px;
    }

    .grpm-hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .grpm-hero-btn-wrapper {
        justify-content: center;
    }
}

/* ---------- QUOTE FORM SECTION ---------- */
.grpm-quote-section {
    position: relative;
    z-index: 5;
    margin-top: -90px;
    padding-bottom: 60px;
}

@media (max-width: 991.98px) {
    .grpm-quote-section {
        margin-top: -50px;
    }
}

@media (max-width: 575.98px) {
    .grpm-quote-section {
        margin-top: 0;
        padding-top: 30px;
    }
}

.grpm-quote-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(11, 31, 58, 0.18);
    overflow: visible;
    max-width: 1000px;
    margin: 0 auto;
}

.grpm-quote-card-header {
    background: var(--gr-navy, #0b1f3a);
    color: #fff;
    padding: 22px 30px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.grpm-quote-step-badge {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: #cfd6e2;
    white-space: nowrap;
    padding-top: 4px;
}

.grpm-quote-step-badge-dark {
    margin-right: auto;
    margin-left: 16px;
}

.grpm-quote-card-header h3 {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 6px;
}

    .grpm-quote-card-header h3 span {
        color: var(--gr-orange, #f36f21);
    }

.grpm-quote-card-header p {
    color: #cfd6e2;
    margin-bottom: 0;
    font-size: 14px;
}

.grpm-quote-card-body {
    padding: 30px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

@media (max-width: 575.98px) {
    .grpm-quote-card-body {
        padding: 20px;
    }

    .grpm-quote-card-header {
        padding: 20px;
    }
}

.grpm-quote-field-group {
    margin-bottom: 20px;
}

.grpm-quote-field-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--gr-navy, #0b1f3a);
    margin-bottom: 8px;
}

.grpm-quote-input {
    border: 1px solid #dfe3e9;
    border-radius: 6px;
    padding: 11px 14px;
    font-size: 14px;
    width: 100%;
    height: auto;
}

    .grpm-quote-input:focus {
        border-color: var(--gr-orange, #f36f21);
        box-shadow: 0 0 0 3px rgba(243, 111, 33, 0.12);
        outline: none;
    }

.grpm-quote-contact-heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    margin: 10px 0 18px;
    padding-top: 10px;
    border-top: 1px solid #eef0f3;
}

/* Move-type + home-size pill/tab style radio lists
   (ASP.NET RadioButtonList with RepeatLayout="Flow" renders
   <span><input/><label/></span> pairs, which this CSS turns into pills) */
.grpm-quote-movetype-tabs,
.grpm-quote-size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .grpm-quote-movetype-tabs input[type="radio"],
    .grpm-quote-size-options input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .grpm-quote-movetype-tabs label,
    .grpm-quote-size-options label {
        display: inline-block;
        padding: 9px 18px;
        border-radius: 30px;
        background: #f1f3f6;
        color: #4a5568;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid #f1f3f6;
        transition: all 0.2s ease;
        margin: 0;
    }

    .grpm-quote-movetype-tabs input[type="radio"]:checked + label,
    .grpm-quote-size-options input[type="radio"]:checked + label {
        background: var(--gr-orange, #f36f21);
        border-color: var(--gr-orange, #f36f21);
        color: #fff;
    }

    .grpm-quote-movetype-tabs label:hover,
    .grpm-quote-size-options label:hover {
        border-color: var(--gr-orange, #f36f21);
    }

.grpm-quote-consent-text {
    font-size: 12.5px;
    color: #7a8291;
    margin: 5px 0 22px;
}

.grpm-quote-submit-btn {
    display: inline-block;
    background: var(--gr-orange, #f36f21);
    color: #fff;
    border: none;
    padding: 13px 40px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.25s ease;
}

    .grpm-quote-submit-btn:hover {
        background: var(--gr-navy, #0b1f3a);
        color: #fff;
    }

@media (max-width: 575.98px) {
    .grpm-quote-submit-btn {
        width: 100%;
    }
}

.grpm-quote-next-btn {
    margin-top: 6px;
}

/* ---------- Address autocomplete (OpenStreetMap Nominatim) ---------- */
.grpm-quote-autocomplete-wrapper {
    position: relative;
}

.grpm-quote-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #dfe3e9;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 230px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 30;
    display: none;
    box-shadow: 0 12px 24px rgba(11, 31, 58, 0.12);
}

    .grpm-quote-suggestions li {
        padding: 10px 14px;
        font-size: 13.5px;
        line-height: 1.4;
        color: #333;
        cursor: pointer;
        border-bottom: 1px solid #f1f3f6;
    }

        .grpm-quote-suggestions li:last-child {
            border-bottom: none;
        }

        .grpm-quote-suggestions li:hover {
            background: #fef3ec;
            color: var(--gr-orange, #f36f21);
        }

/* ---------- STEP 2 MODAL ---------- */
.grpm-quote-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

    .grpm-quote-modal.grpm-quote-modal-active {
        display: flex;
    }

.grpm-quote-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 31, 58, 0.78);
}

.grpm-quote-modal-dialog {
    position: relative;
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 920px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.grpm-quote-modal-header {
    display: flex;
    align-items: center;
    background: var(--gr-navy, #0b1f3a);
    color: #fff;
    padding: 22px 30px;
    flex-shrink: 0;
}

    .grpm-quote-modal-header h3 {
        color: #fff;
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        white-space: nowrap;
    }

        .grpm-quote-modal-header h3 span {
            color: var(--gr-orange, #f36f21);
        }

.grpm-quote-modal-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.25s ease;
}

    .grpm-quote-modal-close:hover {
        background: var(--gr-orange, #f36f21);
    }

.grpm-quote-modal-body {
    padding: 26px 30px;
    overflow-y: auto;
}

.grpm-quote-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 30px;
    border-top: 1px solid #eef0f3;
    flex-shrink: 0;
}

.grpm-quote-cancel-btn {
    background: none;
    border: none;
    color: var(--gr-orange, #f36f21);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 4px;
}

    .grpm-quote-cancel-btn:hover {
        text-decoration: underline;
    }

@media (max-width: 575.98px) {
    .grpm-quote-modal {
        padding: 0;
    }

    .grpm-quote-modal-dialog {
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .grpm-quote-modal-header {
        padding: 18px 20px;
    }

        .grpm-quote-modal-header h3 {
            font-size: 20px;
        }

    .grpm-quote-modal-body {
        padding: 20px;
    }

    .grpm-quote-modal-footer {
        padding: 16px 20px;
    }
}

/* ---------- Step 1 summary shown at the top of Step 2 ---------- */
.grpm-quote-summary-panel {
    background: #f8f9fb;
    border: 1px solid #eef0f3;
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 22px;
}

.grpm-quote-summary-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

    .grpm-quote-summary-title-row h6 {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--gr-navy, #0b1f3a);
    }

.grpm-quote-edit-link {
    background: none;
    border: none;
    color: var(--gr-orange, #f36f21);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
}

    .grpm-quote-edit-link:hover {
        text-decoration: underline;
    }

.grpm-quote-summary-route {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    color: #333;
}

    .grpm-quote-summary-route strong {
        color: var(--gr-navy, #0b1f3a);
        font-weight: 700;
    }

.grpm-quote-summary-arrow {
    color: var(--gr-orange, #f36f21);
    font-weight: 700;
}

/* Validation + status messages */
.grpm-quote-validation-summary {
    display: block;
    background: #fdecea;
    color: #b3261e;
    border: 1px solid #f5c6c3;
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 13.5px;
}

    .grpm-quote-validation-summary ul {
        margin: 0;
        padding-left: 18px;
    }

.grpm-quote-field-error {
    display: block;
    color: #b3261e;
    font-size: 12.5px;
    margin-top: 6px;
}

/* Tab-conditional field columns (Local/Domestic/International vs Business vs Storage) */
.grpm-quote-fields-row {
    align-items: flex-start;
}

.grpm-quote-field-col.grpm-field-hidden {
    display: none !important;
}

.grpm-quote-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
    cursor: pointer;
}

/* Footer: validation / status messages sit directly above the action buttons
   so they are visible without scrolling, and refresh via UpdatePanel without
   closing the modal or reloading the page. */
.grpm-quote-modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

    .grpm-quote-modal-footer .grpm-quote-validation-summary,
    .grpm-quote-modal-footer .grpm-quote-alert {
        margin-bottom: 14px;
    }

.grpm-quote-footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.grpm-quote-alert {
    display: block;
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
}

.grpm-quote-alert-success {
    background: #eaf7ee;
    color: #1e7e34;
    border: 1px solid #c3e6cb;
}

.grpm-quote-alert-error {
    background: #fdecea;
    color: #b3261e;
    border: 1px solid #f5c6c3;
}

/* =====================================================================
   Service detail page (e.g. household-goods-shifting.aspx)
   Classes prefixed "grpm-svc-" so they never collide with other pages.
   ===================================================================== */

.grpm-svc-image-row img {
    border-radius: 8px;
}

.grpm-svc-image-row label {
    display: block;
    font-size: 13px;
    color: #7a8291;
    margin-top: 8px;
    font-weight: 400;
}

.grpm-svc-section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    margin: 45px 0 22px;
}

.grpm-svc-included-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}

    .grpm-svc-included-list li {
        font-size: 15px;
        color: #333;
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

        .grpm-svc-included-list li i {
            color: var(--gr-orange, #f36f21);
            margin-top: 3px;
            flex-shrink: 0;
        }

@media (max-width: 575.98px) {
    .grpm-svc-included-list {
        grid-template-columns: 1fr;
    }
}

/* Feature cards */
.grpm-svc-feature-row {
    margin-top: 5px;
}

.grpm-svc-feature-card {
    background: #f8f9fb;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    padding: 26px 20px;
    text-align: center;
    height: 100%;
    margin-bottom: 24px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

    .grpm-svc-feature-card:hover {
        box-shadow: 0 15px 35px rgba(11, 31, 58, 0.12);
        transform: translateY(-4px);
    }

.grpm-svc-feature-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--gr-navy, #0b1f3a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.grpm-svc-feature-card h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    margin-bottom: 8px;
}

.grpm-svc-feature-card p {
    font-size: 13.5px;
    color: #667;
    margin-bottom: 0;
}

/* Process steps */
.grpm-svc-process {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 10px;
}

.grpm-svc-process-step {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.grpm-svc-process-number {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gr-orange, #f36f21);
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grpm-svc-process-text h6 {
    font-size: 16px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    margin-bottom: 4px;
}

.grpm-svc-process-text p {
    font-size: 14px;
    color: #555;
    margin-bottom: 0;
}

/* FAQ accordion — only one item open at a time */
.grpm-svc-faq {
    border-top: 1px solid #eef0f3;
}

.grpm-svc-faq-item {
    border-bottom: 1px solid #eef0f3;
}

.grpm-svc-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: none;
    text-align: left;
    padding: 18px 4px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--gr-navy, #0b1f3a);
    cursor: pointer;
}

    .grpm-svc-faq-question:hover {
        color: var(--gr-orange, #f36f21);
    }

.grpm-svc-faq-icon {
    flex-shrink: 0;
    position: relative;
    width: 20px;
    height: 20px;
}

    .grpm-svc-faq-icon::before,
    .grpm-svc-faq-icon::after {
        content: "";
        position: absolute;
        background: var(--gr-orange, #f36f21);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: transform 0.25s ease;
    }

    .grpm-svc-faq-icon::before {
        width: 14px;
        height: 2px;
    }

    .grpm-svc-faq-icon::after {
        width: 2px;
        height: 14px;
    }

.grpm-svc-faq-item-open .grpm-svc-faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.grpm-svc-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    .grpm-svc-faq-answer p {
        font-size: 14.5px;
        color: #555;
        padding: 0 4px 18px;
        margin: 0;
    }

/* CTA banner at the bottom of the article */
.grpm-svc-cta {
    margin-top: 45px;
    background: var(--gr-navy, #0b1f3a);
    border-radius: 10px;
    padding: 30px 34px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.grpm-svc-cta-text h4 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.grpm-svc-cta-text p {
    color: #cfd6e2;
    margin-bottom: 0;
    font-size: 14px;
}

.grpm-svc-cta-btn {
    flex-shrink: 0;
    background: var(--gr-orange, #f36f21);
    color: #fff;
    font-weight: 700;
    padding: 13px 28px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.25s ease;
}

    .grpm-svc-cta-btn:hover {
        background: #fff;
        color: var(--gr-navy, #0b1f3a);
    }

/* Sidebar contact widget */
.grpm-svc-contact-widget {
    background: #f8f9fb;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    padding: 26px 24px;
    margin-top: 30px;
}

    .grpm-svc-contact-widget .ltn__widget-title {
        color: var(--gr-navy, #0b1f3a);
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 18px;
    }

.grpm-svc-contact-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

    .grpm-svc-contact-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
        font-size: 14px;
        color: #444;
    }

        .grpm-svc-contact-list li:last-child {
            margin-bottom: 0;
        }

    .grpm-svc-contact-list a {
        color: #444;
        text-decoration: none;
    }

        .grpm-svc-contact-list a:hover {
            color: var(--gr-orange, #f36f21);
        }

.grpm-svc-contact-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gr-navy, #0b1f3a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grpm-svc-contact-btn {
    display: block;
    text-align: center;
    background: var(--gr-orange, #f36f21);
    color: #fff;
    font-weight: 700;
    padding: 13px 20px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.25s ease;
}

    .grpm-svc-contact-btn:hover {
        background: var(--gr-navy, #0b1f3a);
        color: #fff;
    }


   /*FAQS*/
/* =====================================================================
   FAQs page (faqs.aspx)
   Classes prefixed "grpm-faq-" so they never collide with other pages.
   ===================================================================== */

.grpm-faq-eyebrow {
    color: var(--gr-orange, #f36f21);
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 13px;
    margin-bottom: 8px;
}

.grpm-faq-heading {
    font-size: 32px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    margin-bottom: 14px;
}

.grpm-faq-badge {
    background: var(--gr-orange, #f36f21);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 20px;
    margin-right: 10px;
    vertical-align: middle;
}

.grpm-faq-category {
    font-size: 19px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.grpm-faq-group {
    border-top: 1px solid #eef0f3;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(11, 31, 58, 0.06);
    overflow: hidden;
}

.grpm-faq-item {
    border-bottom: 1px solid #eef0f3;
}

    .grpm-faq-item:last-child {
        border-bottom: none;
    }

.grpm-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: none;
    text-align: left;
    padding: 18px 22px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--gr-navy, #0b1f3a);
    cursor: pointer;
}

    .grpm-faq-question:hover {
        color: var(--gr-orange, #f36f21);
    }

.grpm-faq-icon {
    flex-shrink: 0;
    position: relative;
    width: 20px;
    height: 20px;
}

    .grpm-faq-icon::before,
    .grpm-faq-icon::after {
        content: "";
        position: absolute;
        background: var(--gr-orange, #f36f21);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: transform 0.25s ease;
    }

    .grpm-faq-icon::before {
        width: 14px;
        height: 2px;
    }

    .grpm-faq-icon::after {
        width: 2px;
        height: 14px;
    }

.grpm-faq-item-open .grpm-faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.grpm-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    .grpm-faq-answer p {
        font-size: 14.5px;
        color: #555;
        padding: 0 22px 18px;
        margin: 0;
    }


/*contact us page*/
/* =====================================================================
   Contact page (contact.aspx) — v2, redesigned
   Classes prefixed "grpm-contact-" so they never collide with other pages.
   ===================================================================== */

.grpm-contact-intro {
    margin-top: 90px;
    margin-bottom: 50px;
}

.grpm-contact-eyebrow {
    color: var(--gr-orange, #f36f21);
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 13px;
    margin-bottom: 10px;
}

    .grpm-contact-eyebrow i {
        font-size: 8px;
        margin-right: 8px;
        vertical-align: middle;
    }

.grpm-contact-heading {
    font-size: 34px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    margin-bottom: 14px;
}

/* Split card wrapper */
.grpm-contact-split-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(11, 31, 58, 0.18);
}

/* Left: dark info panel */
.grpm-contact-info-panel {
    position: relative;
    background: linear-gradient(160deg, var(--gr-navy, #0b1f3a) 0%, #142b4d 100%);
    color: #fff;
    height: 100%;
    padding: 50px 40px;
    overflow: hidden;
}

.grpm-contact-info-decor {
    position: absolute;
    right: -30px;
    bottom: -30px;
    font-size: 220px;
    color: rgba(255, 255, 255, 0.05);
    line-height: 1;
    transform: rotate(-10deg);
    pointer-events: none;
}

.grpm-contact-info-panel h3 {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}

    .grpm-contact-info-panel h3 span {
        color: var(--gr-orange, #f36f21);
    }

.grpm-contact-info-panel > p {
    color: #cfd6e2;
    font-size: 14.5px;
    margin-bottom: 32px;
    position: relative;
    z-index: 2;
}

.grpm-contact-info-list {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    position: relative;
    z-index: 2;
}

    .grpm-contact-info-list li {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 22px;
        font-size: 14px;
        color: #e6e9ef;
    }

        .grpm-contact-info-list li:last-child {
            margin-bottom: 0;
        }

    .grpm-contact-info-list a {
        color: #e6e9ef;
        text-decoration: none;
    }

        .grpm-contact-info-list a:hover {
            color: var(--gr-orange, #f36f21);
        }

.grpm-contact-info-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--gr-orange, #f36f21);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.25s ease, transform 0.25s ease;
}

.grpm-contact-info-list li:hover .grpm-contact-info-icon {
    background: var(--gr-orange, #f36f21);
    color: #fff;
    transform: scale(1.08);
}

.grpm-contact-info-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin-bottom: 22px;
    position: relative;
    z-index: 2;
}

.grpm-contact-info-follow {
    color: #cfd6e2;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}

.grpm-contact-social {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 2;
}

    .grpm-contact-social a {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: background 0.25s ease, transform 0.25s ease;
    }

        .grpm-contact-social a:hover {
            background: var(--gr-orange, #f36f21);
            transform: translateY(-3px);
        }

/* Right: form panel */
.grpm-contact-form-panel {
    background: #fff;
    height: 100%;
    padding: 50px 44px;
}

    .grpm-contact-form-panel h3 {
        font-size: 26px;
        font-weight: 700;
        color: var(--gr-navy, #0b1f3a);
        margin-bottom: 6px;
    }

        .grpm-contact-form-panel h3 span {
            color: var(--gr-orange, #f36f21);
        }

.grpm-contact-form-subtitle {
    color: #7a8291;
    font-size: 13.5px;
    margin-bottom: 26px;
}

.grpm-contact-field-group {
    margin-bottom: 18px;
}

.grpm-contact-field-label {
    display: block;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--gr-navy, #0b1f3a);
    margin-bottom: 8px;
}

.grpm-contact-input-wrap {
    position: relative;
}

.grpm-contact-input-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--gr-orange, #f36f21);
    font-size: 14px;
    pointer-events: none;
}

.grpm-contact-input {
    border: 1px solid #dfe3e9;
    border-radius: 8px;
    padding: 12px 16px 12px 42px;
    font-size: 14px;
    width: 100%;
    background: #f8f9fb;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

    .grpm-contact-input:focus {
        border-color: var(--gr-orange, #f36f21);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(243, 111, 33, 0.12);
        outline: none;
    }

.grpm-contact-field-error {
    display: block;
    color: #b3261e;
    font-size: 12.5px;
    margin-top: 6px;
}

.grpm-contact-validation-summary {
    display: block;
    background: #fdecea;
    color: #b3261e;
    border: 1px solid #f5c6c3;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 13.5px;
}

    .grpm-contact-validation-summary ul {
        margin: 0;
        padding-left: 18px;
    }

.grpm-contact-alert {
    display: block;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 600;
}

.grpm-contact-alert-success {
    background: #eaf7ee;
    color: #1e7e34;
    border: 1px solid #c3e6cb;
}

.grpm-contact-alert-error {
    background: #fdecea;
    color: #b3261e;
    border: 1px solid #f5c6c3;
}

.grpm-contact-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--gr-orange, #f36f21);
    color: #fff;
    border: none;
    padding: 14px 44px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: background 0.25s ease, transform 0.15s ease;
}

    .grpm-contact-submit-btn:hover {
        background: var(--gr-navy, #0b1f3a);
        transform: translateY(-2px);
    }

/* Map card */
.grpm-contact-map-card {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(11, 31, 58, 0.14);
}

    .grpm-contact-map-card iframe {
        width: 100%;
        height: 100%;
        display: block;
    }

.grpm-contact-map-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 5;
    background: #fff;
    color: var(--gr-navy, #0b1f3a);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 30px;
    box-shadow: 0 8px 20px rgba(11, 31, 58, 0.18);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .grpm-contact-map-badge i {
        color: var(--gr-orange, #f36f21);
    }

@media (max-width: 991.98px) {
    .grpm-contact-info-panel,
    .grpm-contact-form-panel {
        padding: 36px 28px;
    }

    .grpm-contact-map-card {
        height: 320px;
    }
}

@media (max-width: 575.98px) {
    .grpm-contact-heading {
        font-size: 26px;
    }

    .grpm-contact-info-panel,
    .grpm-contact-form-panel {
        padding: 28px 22px;
    }
}


/*===================about page===========================*/
/* =====================================================================
   About page (about.aspx)
   Classes prefixed "grpm-about-" so they never collide with other pages.
   ===================================================================== */

.grpm-about-eyebrow {
    display: flex;
    align-items: center;
    color: var(--gr-orange, #f36f21);
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 13px;
    margin-bottom: 12px;
}

    .grpm-about-eyebrow i {
        font-size: 8px;
        margin-right: 8px;
    }

.grpm-about-eyebrow-light {
    color: var(--gr-orange, #f36f21);
}

.grpm-about-heading {
    font-size: 32px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    margin-bottom: 16px;
}

.grpm-about-heading-light {
    color: #fff;
}

/* Story / Intro */
.grpm-about-story-img {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(11, 31, 58, 0.18);
}

    .grpm-about-story-img img {
        width: 100%;
        display: block;
        border-radius: 14px;
    }

.grpm-about-story-img-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 15px 35px rgba(11, 31, 58, 0.2);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    line-height: 1.3;
}

    .grpm-about-story-img-badge i {
        color: var(--gr-orange, #f36f21);
        font-size: 26px;
    }

.grpm-about-story-content p {
    color: #555;
    font-size: 15px;
    margin-bottom: 18px;
}

.grpm-about-check-list {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

    .grpm-about-check-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14.5px;
        color: var(--gr-navy, #0b1f3a);
        font-weight: 600;
        margin-bottom: 10px;
    }

    .grpm-about-check-list i {
        color: var(--gr-orange, #f36f21);
    }

.grpm-about-hero-btn {
    display: inline-block;
    background: var(--gr-orange, #f36f21);
    color: #fff;
    font-weight: 700;
    padding: 13px 30px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.2s ease;
}

    .grpm-about-hero-btn:hover {
        background: var(--gr-navy, #0b1f3a);
        color: #fff;
        transform: translateY(-2px);
    }

/* Stats */
.grpm-about-stats-area {
    background: var(--gr-navy, #0b1f3a);
    padding: 60px 0;
}

.grpm-about-stat-card {
    text-align: center;
    color: #fff;
    padding: 10px;
}

.grpm-about-stat-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--gr-orange, #f36f21);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.grpm-about-stat-card h3 {
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 6px;
}

.grpm-about-stat-card p {
    color: #cfd6e2;
    font-size: 13.5px;
    margin-bottom: 0;
}

/* Mission & Vision */
.grpm-about-mv-card {
    background: #f8f9fb;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    padding: 40px 34px;
    height: 100%;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

    .grpm-about-mv-card:hover {
        box-shadow: 0 20px 45px rgba(11, 31, 58, 0.12);
        transform: translateY(-4px);
    }

.grpm-about-mv-card-alt {
    background: var(--gr-navy, #0b1f3a);
    color: #fff;
}

    .grpm-about-mv-card-alt h4 {
        color: #fff;
    }

    .grpm-about-mv-card-alt p {
        color: #cfd6e2;
    }

.grpm-about-mv-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gr-orange, #f36f21);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.grpm-about-mv-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    margin-bottom: 12px;
}

.grpm-about-mv-card p {
    font-size: 14.5px;
    color: #dfd4d4;
    margin-bottom: 0;
}

/* Why Choose Us */
.grpm-about-why-area {
    background: #f8f9fb;
    padding: 90px 0;
}

.grpm-about-feature-card {
    background: #fff;
    border-radius: 12px;
    padding: 32px 26px;
    text-align: center;
    height: 100%;
    margin-bottom: 26px;
    box-shadow: 0 10px 30px rgba(11, 31, 58, 0.06);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

    .grpm-about-feature-card:hover {
        box-shadow: 0 20px 45px rgba(11, 31, 58, 0.14);
        transform: translateY(-6px);
    }

.grpm-about-feature-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--gr-navy, #0b1f3a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.grpm-about-feature-card h5 {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    margin-bottom: 10px;
}

.grpm-about-feature-card p {
    font-size: 13.5px;
    color: #667;
    margin-bottom: 0;
}

/* Our Process */
.grpm-about-process-area {
    background: var(--gr-navy, #0b1f3a);
    padding: 90px 0;
}

.grpm-about-process-subtitle {
    color: #cfd6e2;
    font-size: 14.5px;
}

.grpm-about-process-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
    position: relative;
}

.grpm-about-process-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 30px 22px;
    text-align: center;
    flex: 1 1 220px;
    max-width: 260px;
    position: relative;
    transition: background 0.25s ease, transform 0.25s ease;
}

    .grpm-about-process-item:hover {
        background: rgba(255, 255, 255, 0.09);
        transform: translateY(-6px);
    }

.grpm-about-process-number {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.25);
}

.grpm-about-process-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--gr-orange, #f36f21);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.grpm-about-process-item h5 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.grpm-about-process-item p {
    color: #cfd6e2;
    font-size: 13.5px;
    margin-bottom: 0;
}

/* Testimonials */
.grpm-about-testimonial-card {
    background: #f8f9fb;
    border-radius: 14px;
    padding: 34px 28px;
    height: 100%;
    position: relative;
}

.grpm-about-quote-icon {
    color: var(--gr-orange, #f36f21);
    opacity: 0.25;
    font-size: 26px;
    margin-bottom: 14px;
}

.grpm-about-testimonial-card p {
    font-size: 14.5px;
    color: #444;
    font-style: italic;
    margin-bottom: 24px;
}

.grpm-about-testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.grpm-about-testimonial-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--gr-navy, #0b1f3a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.grpm-about-testimonial-author h6 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    margin-bottom: 2px;
}

.grpm-about-testimonial-author span {
    font-size: 12.5px;
    color: #7a8291;
}

@media (max-width: 767.98px) {
    .grpm-about-heading {
        font-size: 26px;
    }

    .grpm-about-process-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
}


/*==========================Our mission=============*/
/* =====================================================================
   Our Mission page (our-mission.aspx)
   Classes prefixed "grpm-mission-" so they never collide with other pages.
   (Reuses grpm-about-* and grpm-svc-cta classes already in custom.css)
   ===================================================================== */

.grpm-mission-statement {
    background: #f8f9fb;
    border-left: 4px solid var(--gr-orange, #f36f21);
    border-radius: 10px;
    padding: 34px 40px;
    margin-top: 24px;
    text-align: left;
    position: relative;
}

.grpm-mission-quote-icon {
    color: var(--gr-orange, #f36f21);
    opacity: 0.3;
    font-size: 30px;
    margin-bottom: 14px;
    display: block;
}

.grpm-mission-statement p {
    font-size: 20px;
    font-weight: 600;
    color: var(--gr-navy, #0b1f3a);
    line-height: 1.5;
    margin-bottom: 0;
    font-style: italic;
}

.grpm-mission-values-area {
    background: var(--gr-navy, #0b1f3a);
    padding: 90px 0;
}

.grpm-mission-values-subtitle {
    color: #cfd6e2;
    font-size: 14.5px;
}

.grpm-mission-value-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px 24px;
    text-align: center;
    height: 100%;
    margin-bottom: 26px;
    transition: background 0.25s ease, transform 0.25s ease;
}

    .grpm-mission-value-card:hover {
        background: rgba(255, 255, 255, 0.09);
        transform: translateY(-6px);
    }

.grpm-mission-value-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--gr-orange, #f36f21);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.grpm-mission-value-card h5 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.grpm-mission-value-card p {
    color: #cfd6e2;
    font-size: 13.5px;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .grpm-mission-statement {
        padding: 26px 22px;
    }

        .grpm-mission-statement p {
            font-size: 17px;
        }
}

/*===========================our vision==========================*/
/* =====================================================================
   Our Vision page (our-vision.aspx)
   Reuses grpm-about-*, grpm-mission-* and grpm-svc-cta classes already
   in custom.css — only one new class needed below.
   ===================================================================== */

.grpm-vision-statement {
    background: #f8f9fb;
    border-left: 4px solid var(--gr-orange, #f36f21);
    border-radius: 10px;
    padding: 34px 40px;
    margin-top: 24px;
    text-align: left;
}

    .grpm-vision-statement p {
        font-size: 20px;
        font-weight: 600;
        color: var(--gr-navy, #0b1f3a);
        line-height: 1.5;
        margin-bottom: 0;
        font-style: italic;
    }

@media (max-width: 575.98px) {
    .grpm-vision-statement {
        padding: 26px 22px;
    }

        .grpm-vision-statement p {
            font-size: 17px;
        }
}



/* =====================================================================
   Homepage sections added below "The Global Relocation Difference"
   Classes prefixed "grpm-home-" so they never collide with other pages.
   ===================================================================== */

.grpm-home-section-heading {
    font-size: 30px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    margin-bottom: 0;
}

    .grpm-home-section-heading span {
        color: var(--gr-orange, #f36f21);
    }

.grpm-home-section-heading-light {
    color: #fff;
}

/* ---------- Moving Services ---------- */
.grpm-home-services-area {
    padding: 90px 0;
    background: #f8f9fb;
}

.grpm-home-service-card {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    padding: 30px 26px;
    height: 100%;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

    .grpm-home-service-card:hover {
        box-shadow: 0 20px 45px rgba(11, 31, 58, 0.12);
        transform: translateY(-6px);
    }

.grpm-home-service-card-featured {
    border: 2px solid var(--gr-orange, #f36f21);
}

.grpm-home-service-icon {
    color: var(--gr-orange, #f36f21);
    font-size: 30px;
    margin-bottom: 18px;
}

.grpm-home-service-card h5 {
    font-size: 17px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    margin-bottom: 10px;
}

.grpm-home-service-card p {
    font-size: 13.5px;
    color: #667;
    margin-bottom: 14px;
}

.grpm-home-service-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

    .grpm-home-service-card ul li {
        font-size: 13px;
        color: #555;
        padding-left: 18px;
        position: relative;
        margin-bottom: 8px;
    }

        .grpm-home-service-card ul li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 7px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--gr-orange, #f36f21);
        }

.grpm-home-service-link {
    color: var(--gr-orange, #f36f21);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
}

    .grpm-home-service-link:hover {
        text-decoration: underline;
    }

/* ---------- How It Works / Process ---------- */
.grpm-home-process-area {
    background: var(--gr-navy, #0b1f3a);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}

.grpm-home-process-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gr-orange, #f36f21);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 22px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.25s ease;
}

    .grpm-home-process-btn:hover {
        background: #fff;
        color: var(--gr-navy, #0b1f3a);
    }

.grpm-home-process-track {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    z-index: 2;
}

.grpm-home-process-line {
    display: none;
}

.grpm-home-process-step {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 26px 20px;
    flex: 1 1 200px;
    position: relative;
    transition: background 0.25s ease, transform 0.25s ease;
}

    .grpm-home-process-step:hover {
        background: rgba(255, 255, 255, 0.09);
        transform: translateY(-6px);
    }

.grpm-home-process-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gr-orange, #f36f21);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.grpm-home-process-step h6 {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.grpm-home-process-step p {
    color: #cfd6e2;
    font-size: 13px;
    margin-bottom: 0;
}

.grpm-home-process-truck {
    text-align: right;
    color: rgba(255, 255, 255, 0.07);
    font-size: 90px;
    margin-top: 20px;
    line-height: 1;
}

/* ---------- Trust Features ---------- */
.grpm-home-trust-area {
    padding: 80px 0;
}

.grpm-home-trust-item {
    text-align: center;
    padding: 10px;
}

.grpm-home-trust-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #fdf1e8;
    color: var(--gr-orange, #f36f21);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.grpm-home-trust-item h6 {
    font-size: 15px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    margin-bottom: 10px;
}

.grpm-home-trust-item p {
    font-size: 13px;
    color: #667;
    margin-bottom: 0;
}

/* ---------- Expertise ---------- */
.grpm-home-expertise-area {
    padding: 90px 0;
    background: #f8f9fb;
}

    .grpm-home-expertise-area p {
        font-size: 14.5px;
        color: #555;
        margin-bottom: 16px;
    }

.grpm-home-expertise-img {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(11, 31, 58, 0.15);
}

    .grpm-home-expertise-img img {
        width: 100%;
        display: block;
    }

/* ---------- Condensed FAQ ---------- */
.grpm-home-faq-area {
    padding: 90px 0;
}

.grpm-home-faq-item {
    border: 1px solid #eef0f3;
    border-radius: 8px;
    margin-bottom: 14px;
    overflow: hidden;
}

.grpm-home-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: none;
    text-align: left;
    padding: 18px 22px;
    font-size: 15px;
    font-weight: 600;
    color: var(--gr-navy, #0b1f3a);
    cursor: pointer;
}

    .grpm-home-faq-question:hover {
        color: var(--gr-orange, #f36f21);
    }

.grpm-home-faq-icon {
    color: var(--gr-orange, #f36f21);
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

.grpm-home-faq-item-open .grpm-home-faq-icon {
    transform: rotate(180deg);
}

.grpm-home-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #fff;
}

    .grpm-home-faq-answer p {
        font-size: 14px;
        color: #555;
        padding: 0 22px 18px;
        margin: 0;
    }

.grpm-home-faq-viewall {
    display: inline-block;
    color: var(--gr-orange, #f36f21);
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
}

    .grpm-home-faq-viewall:hover {
        text-decoration: underline;
    }

/* ---------- Final CTA ---------- */
.grpm-home-final-cta-area {
    position: relative;
    background: #fdf1e8;
    padding: 70px 0;
    overflow: hidden;
}

.grpm-home-final-cta-decor {
    position: absolute;
    top: 0;
    right: -60px;
    width: 320px;
    height: 100%;
    background: repeating-linear-gradient( 45deg, rgba(243, 111, 33, 0.08), rgba(243, 111, 33, 0.08) 14px, transparent 14px, transparent 28px );
    pointer-events: none;
}

.grpm-home-final-cta-area h2 {
    font-size: 30px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}

    .grpm-home-final-cta-area h2 span {
        color: var(--gr-orange, #f36f21);
    }

.grpm-home-final-cta-area > .container > .row > div > p {
    color: #555;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.grpm-home-final-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gr-orange, #f36f21);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 13px 24px;
    border-radius: 6px;
    text-decoration: none;
    margin: 6px 0 6px 10px;
    position: relative;
    z-index: 2;
    transition: background 0.25s ease, transform 0.2s ease;
}

    .grpm-home-final-cta-btn:hover {
        background: var(--gr-navy, #0b1f3a);
        color: #fff;
        transform: translateY(-2px);
    }

.grpm-home-final-cta-btn-outline {
    background: transparent;
    color: var(--gr-navy, #0b1f3a);
    border: 2px solid var(--gr-navy, #0b1f3a);
}

    .grpm-home-final-cta-btn-outline:hover {
        background: var(--gr-navy, #0b1f3a);
        color: #fff;
    }

@media (max-width: 991.98px) {
    .grpm-home-final-cta-btn,
    .grpm-home-final-cta-btn-outline {
        margin-left: 0;
        margin-right: 10px;
    }

    .grpm-home-final-cta-area .text-lg-right {
        text-align: left !important;
        margin-top: 20px;
    }
}

@media (max-width: 767.98px) {
    .grpm-home-section-heading {
        font-size: 24px;
    }

    .grpm-home-process-step {
        flex: 1 1 100%;
    }
}


/* =====================================================================
   "The Global Relocation Difference" section (index.aspx)
   Classes prefixed "grpm-diff-" so they never collide with other pages.
   ===================================================================== */

.grpm-diff-area {
    padding: 90px 0;
}

.grpm-diff-eyebrow {
    color: var(--gr-orange, #f36f21);
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 6px;
}

.grpm-diff-tagline {
    color: var(--gr-navy, #0b1f3a);
    font-size: 26px;
    font-weight: 700;
    font-style: italic;
    margin-bottom: 34px;
}

.grpm-diff-stats-row {
    margin-bottom: 26px;
}

.grpm-diff-stat-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--gr-navy, #0b1f3a);
    margin-bottom: 4px;
}

.grpm-diff-stat-number {
    font-size: 42px;
    font-weight: 700;
    color: var(--gr-orange, #f36f21);
    margin-bottom: 2px;
    line-height: 1.1;
}

.grpm-diff-stat-caption {
    font-size: 14px;
    color: #555;
    margin-bottom: 0;
}

.grpm-diff-divider {
    height: 1px;
    background: #eef0f3;
    margin-bottom: 26px;
}

.grpm-diff-features-row {
    row-gap: 4px;
}

.grpm-diff-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--gr-navy, #0b1f3a);
}

    .grpm-diff-feature i {
        color: var(--gr-orange, #f36f21);
        font-size: 20px;
        width: 24px;
        text-align: center;
        flex-shrink: 0;
    }

.grpm-diff-img {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(11, 31, 58, 0.15);
}

    .grpm-diff-img img {
        width: 100%;
        display: block;
    }

@media (max-width: 767.98px) {
    .grpm-diff-area {
        padding: 60px 0;
    }

    .grpm-diff-eyebrow,
    .grpm-diff-tagline {
        font-size: 21px;
    }

    .grpm-diff-stat-number {
        font-size: 34px;
    }
}


/* =====================================================================
   SITE-WIDE BREADCRUMB REDESIGN
   Targets the theme's existing classes so this single block updates the
   breadcrumb banner on EVERY page automatically.
   ===================================================================== */

.ltn__breadcrumb-area {
    position: relative;
    padding: 100px 0 90px;
    overflow: hidden;
    background-color: var(--gr-navy, #0b1f3a) !important;
    background-image: linear-gradient(135deg, var(--gr-navy, #0b1f3a) 0%, #16345c 45%, var(--gr-orange, #f36f21) 145%) !important;
    background-size: cover !important;
    background-position: center !important;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

    .ltn__breadcrumb-area.bg-overlay-white-30::before,
    .ltn__breadcrumb-area::before {
        display: none !important;
    }

    .ltn__breadcrumb-area::after {
        content: "";
        position: absolute;
        top: -20%;
        right: -10%;
        width: 55%;
        height: 140%;
        background: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 14px, transparent 14px, transparent 28px );
        pointer-events: none;
        z-index: 1;
    }

    .ltn__breadcrumb-area .container {
        position: relative;
        z-index: 2;
    }

.ltn__breadcrumb-inner {
    position: relative;
}

.ltn__breadcrumb-area .page-title {
    color: #fff;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 16px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.ltn__breadcrumb-list ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
}

    .ltn__breadcrumb-list ul li {
        display: flex;
        align-items: center;
        color: rgba(255, 255, 255, 0.65);
        font-size: 14.5px;
        font-weight: 600;
    }

        .ltn__breadcrumb-list ul li + li::before {
            content: "\f105";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            margin: 0 12px;
            color: var(--gr-orange, #f36f21);
            font-size: 12px;
        }

        .ltn__breadcrumb-list ul li a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #fff;
            text-decoration: none;
            transition: color 0.2s ease;
        }

            .ltn__breadcrumb-list ul li a:hover {
                color: var(--gr-orange, #f36f21);
            }

            .ltn__breadcrumb-list ul li a .ltn__secondary-color {
                color: var(--gr-orange, #f36f21);
            }

@media (max-width: 767.98px) {
    .ltn__breadcrumb-area {
        padding: 70px 0 55px;
        clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
    }

        .ltn__breadcrumb-area .page-title {
            font-size: 28px;
            margin-bottom: 10px;
        }

    .ltn__breadcrumb-list ul li {
        font-size: 13px;
    }
}

/* =====================================================================
   Our Networks page (branches.aspx)
   Classes prefixed "grpm-branch-" so they never collide with other pages.
   Reuses grpm-about-*, grpm-mission-values-subtitle and grpm-svc-cta
   classes already in custom.css.
   ===================================================================== */

/* Head Office card */
.grpm-branch-office-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(11, 31, 58, 0.14);
}

.grpm-branch-office-map {
    width: 100%;
    height: 100%;
    min-height: 340px;
}

    .grpm-branch-office-map iframe {
        width: 100%;
        height: 100%;
        min-height: 340px;
        display: block;
    }

.grpm-branch-office-info {
    padding: 44px 40px;
}

.grpm-branch-office-badge {
    display: inline-block;
    background: #fdf1e8;
    color: var(--gr-orange, #f36f21);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.grpm-branch-office-info h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--gr-navy, #0b1f3a);
    margin-bottom: 22px;
}

    .grpm-branch-office-info h3 span {
        color: var(--gr-orange, #f36f21);
    }

.grpm-branch-office-list {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

    .grpm-branch-office-list li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 18px;
        font-size: 14px;
        color: #444;
    }

        .grpm-branch-office-list li:last-child {
            margin-bottom: 0;
        }

    .grpm-branch-office-list a {
        color: #444;
        text-decoration: none;
    }

        .grpm-branch-office-list a:hover {
            color: var(--gr-orange, #f36f21);
        }

.grpm-branch-office-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gr-navy, #0b1f3a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cities We Serve */
.grpm-branch-cities-area {
    background: var(--gr-navy, #0b1f3a);
    padding: 90px 0;
}

.grpm-branch-city-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px 16px;
    text-align: center;
    margin-bottom: 20px;
    transition: background 0.25s ease, transform 0.25s ease;
}

    .grpm-branch-city-card:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translateY(-4px);
    }

    .grpm-branch-city-card i {
        color: var(--gr-orange, #f36f21);
        font-size: 20px;
        display: block;
        margin-bottom: 10px;
    }

    .grpm-branch-city-card span {
        color: #fff;
        font-size: 14px;
        font-weight: 600;
    }

.grpm-branch-city-card-more {
    border-style: dashed;
    background: transparent;
}

    .grpm-branch-city-card-more i,
    .grpm-branch-city-card-more span {
        color: #cfd6e2;
    }

.grpm-branch-cities-note {
    text-align: center;
    color: #cfd6e2;
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 0;
}

    .grpm-branch-cities-note a {
        color: var(--gr-orange, #f36f21);
        font-weight: 700;
        text-decoration: none;
    }

        .grpm-branch-cities-note a:hover {
            text-decoration: underline;
        }

@media (max-width: 991.98px) {
    .grpm-branch-office-map {
        min-height: 260px;
    }

        .grpm-branch-office-map iframe {
            min-height: 260px;
        }

    .grpm-branch-office-info {
        padding: 32px 26px;
    }
}


/* =====================================================================
   Gallery page (gallery.aspx)
   Classes prefixed "grpm-gallery-" and "grpm-lightbox-" so they never
   collide with other pages. Reuses grpm-about-eyebrow / grpm-about-heading.
   ===================================================================== */

/* Masonry grid via CSS columns — each image keeps its own natural aspect ratio */
.grpm-gallery-grid {
    column-count: 3;
    column-gap: 20px;
}

.grpm-gallery-item {
    position: relative;
    break-inside: avoid;
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(11, 31, 58, 0.08);
}

    .grpm-gallery-item img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.35s ease;
    }

    .grpm-gallery-item:hover img {
        transform: scale(1.06);
    }

.grpm-gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 31, 58, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.grpm-gallery-item:hover .grpm-gallery-overlay {
    opacity: 1;
}

.grpm-gallery-overlay i {
    color: #fff;
    font-size: 26px;
}

@media (max-width: 991.98px) {
    .grpm-gallery-grid {
        column-count: 2;
    }
}

@media (max-width: 575.98px) {
    .grpm-gallery-grid {
        column-count: 1;
    }
}

/* Lightbox */
.grpm-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(6, 15, 28, 0.95);
    align-items: center;
    justify-content: center;
}

    .grpm-lightbox.grpm-lightbox-active {
        display: flex;
    }

    .grpm-lightbox img {
        max-width: 88%;
        max-height: 86vh;
        border-radius: 8px;
        box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
    }

.grpm-lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.25s ease;
}

    .grpm-lightbox-close:hover {
        background: var(--gr-orange, #f36f21);
    }

.grpm-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.25s ease;
}

    .grpm-lightbox-nav:hover {
        background: var(--gr-orange, #f36f21);
    }

.grpm-lightbox-prev {
    left: 24px;
}

.grpm-lightbox-next {
    right: 24px;
}

.grpm-lightbox-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.12);
    padding: 6px 16px;
    border-radius: 20px;
}

@media (max-width: 575.98px) {
    .grpm-lightbox-nav {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .grpm-lightbox-prev {
        left: 10px;
    }

    .grpm-lightbox-next {
        right: 10px;
    }

    .grpm-lightbox-close {
        top: 14px;
        right: 14px;
    }
}


@media (min-width: 1200px) {
    .container-nav {
        max-width: none !important;
    }
}


/* =====================================================================
   Fixed floating action buttons (WhatsApp / Call / SMS) — LEFT SIDE
   Classes prefixed "grpm-float-" so they never collide with other pages.
   Appears on every page once added to main.master.
   ===================================================================== */

.grpm-float-actions {
    position: fixed;
    left: 22px;
    bottom: 28px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.grpm-float-btn {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .grpm-float-btn:hover {
        color: #fff;
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
    }

.grpm-float-whatsapp {
    background: #25d366;
}

.grpm-float-call {
    background: var(--gr-orange, #f36f21);
}

.grpm-float-sms {
    background: var(--gr-navy, #0b1f3a);
}

/* Pulsing attention ring behind the WhatsApp button */
.grpm-float-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25d366;
    opacity: 0.6;
    animation: grpmFloatPulse 2.2s ease-out infinite;
    z-index: -1;
}

@keyframes grpmFloatPulse {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }

    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

/* Sliding tooltip label — now appears to the RIGHT of the button since the buttons sit on the left edge */
.grpm-float-tooltip {
    position: absolute;
    left: 68px;
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
    background: var(--gr-navy, #0b1f3a);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

    .grpm-float-tooltip::after {
        content: "";
        position: absolute;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-right-color: var(--gr-navy, #0b1f3a);
    }

.grpm-float-btn:hover .grpm-float-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

@media (max-width: 575.98px) {
    .grpm-float-actions {
        left: 14px;
        bottom: 18px;
        gap: 10px;
    }

    .grpm-float-btn {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .grpm-float-tooltip {
        display: none;
    }
}