.grey-background {
        background: url(/img/gray-bg.jpg) center center no-repeat;
        background-size: cover;
        position: relative;
        transition: 0.4s;
        border-radius: 10px;
    }

    .w-35 {
        width: 35%;
    }

    .w-5 {
        width: 5%;
    }

    .w-30 {
        width: 30%;
    }

    .w-40 {
        width: 40%;
    }

    .fs-13 {
        font-size: 13px;
    }

    .bl {
        border-left: 4px solid #30569f;
    }

    .br {
        border-right: 4px solid #30569f;
    }

    .bt {
        border-top: 4px solid #30569f;
    }

    .bb {
        border-bottom: 4px solid #30569f;
    }

    .yellow-btn {
        background: #e9c400;
        border: 0;
        padding: 5px 20px;
        color: #000000;
        transition: 0.4s;
        border-radius: 50px;
        width: 320px;
    }

        .yellow-btn:hover {
            background: #0055a5;
            color: #ffffff;
        }

    .plan-table-container {
        margin: 0 105px;
    }

    .error{
        color:red;
    }

    .capitalize-first-letter{
        text-transform: capitalize;
    }

    @media (max-width: 991px) {
        .plan-table-container {
            margin: 0 10px;
        }
    }

    @media (max-width: 767px) {
        .plan-table-container {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .plan-table-container table {
            min-width: 720px;
            table-layout: fixed;
        }

        .plan-table-container th h3 {
            font-size: 1rem;
            white-space: normal;
        }
    }

    .payment-save-container .form-check #CheckIAgreeTermsAndCondition-error {
        position: absolute;
        left: 90px;
    }

    .payment-save-container .form-check #CheckIAgreePrivacyPolicy-error {
        position: absolute;
        left: 90px;
    }

.checkout-area {
        color: black;
        max-height: 800px;
        overflow: auto;
    }

    .inner-payment-area {
        background-color: aliceblue;
        border: 1px solid black;
        border-radius: 17px;
        padding: 10px;
        margin: 8px;
        color: black;
    }

    .custom-input-group {
        position: relative;
    }

        .custom-input-group > .append-text-input {
            position: absolute;
            right: 8px;
            top: 8px;
        }

            .custom-input-group > .append-text-input > img {
                width: 26px;
            }

    .payment-area {
        margin-top: 10px;
    }

    .summary-area {
        margin-top: 20px;
    }

        .summary-area > label {
            font-size: 24px;
            margin-bottom: 10px;
        }

    #payment-amount {
        float: right !important;
    }

    #credit-card-surcharge{
        float: right !important;
    }

    #payment-amount-description {
        float: right !important;
        color: #0066A4 !important;
    }

    #payment-amount-sub-description{
        float: right !important;
        color: #0066A4 !important;
        font-size: 0.7rem;
    }

    .payment-save-container {
        text-align: center;
        margin-top: 60px;
    }

        .payment-save-container > button {
            width: 300px;
            border-radius: 20px;
        }

    .payment-terms-and-condition {
        cursor: pointer;
    }

    #termsandconditioncontent {
        color: black;
    }

    #complaint {
        background: unset;
        color: black;
    }

    .pac-container {
        z-index: 10000 !important;
    }

.three-ds-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.60);
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .three-ds-modal {
        position: relative;
        width: 100%;
        max-width: 540px;
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.20);
        padding: 34px 28px 26px 28px;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        animation: threeDSFadeUp 0.22s ease-out;
    }

    .three-ds-close {
        position: absolute;
        right: 14px;
        top: 12px;
        border: none;
        background: transparent;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
        color: #64748b;
    }

    .three-ds-close:hover {
        color: #0f172a;
    }

    .three-ds-icon-wrap {
        display: flex;
        justify-content: center;
        margin-bottom: 12px;
    }

    .three-ds-icon {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: #ecfeff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 34px;
        box-shadow: inset 0 0 0 1px #bae6fd;
    }

    .three-ds-title {
        margin: 0 0 12px 0;
        font-size: 30px;
        font-weight: 700;
        color: #0f172a;
    }

    .three-ds-text {
        margin: 0 0 10px 0;
        font-size: 16px;
        line-height: 1.6;
        color: #475569;
    }

    .three-ds-subtext {
        margin: 0 0 16px 0;
        font-size: 14px;
        line-height: 1.6;
        color: #64748b;
    }

    .three-ds-note {
        margin: 0 auto 22px auto;
        padding: 12px 14px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        font-size: 14px;
        color: #475569;
        text-align: left;
    }

    .three-ds-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .three-ds-btn {
        min-width: 170px;
        border: none;
        border-radius: 12px;
        padding: 14px 20px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.18s ease;
    }

    .three-ds-btn-primary {
        background: #0f766e;
        color: #ffffff;
    }

    .three-ds-btn-primary:hover {
        background: #0d5f59;
    }

    .three-ds-btn-secondary {
        background: #e2e8f0;
        color: #1e293b;
    }

    .three-ds-btn-secondary:hover {
        background: #cbd5e1;
    }

    .three-ds-countdown {
        margin-top: 16px;
        font-size: 13px;
        color: #64748b;
    }

    @keyframes threeDSFadeUp {
        from {
            opacity: 0;
            transform: translateY(12px) scale(0.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @media (max-width: 576px) {
        .three-ds-modal {
            padding: 28px 18px 22px 18px;
        }

        .three-ds-title {
            font-size: 24px;
        }

        .three-ds-btn {
            width: 100%;
        }

        .three-ds-actions {
            flex-direction: column-reverse;
        }
    }

.custom-modal {
        border-radius: 18px;
        border: none;
        box-shadow: 0 20px 50px rgba(0,0,0,0.18);
        overflow: hidden;
    }

    .custom-modal-body {
        padding: 36px 28px 28px 28px;
        font-family: Arial, Helvetica, sans-serif;
    }

    .custom-icon {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        margin: 0 auto 18px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 34px;
    }

    .custom-icon.success {
        background: #ecfdf5;
        box-shadow: inset 0 0 0 1px #bbf7d0;
    }

    .custom-icon.error {
        background: #fef2f2;
        box-shadow: inset 0 0 0 1px #fecaca;
    }

    .custom-title {
        margin-bottom: 12px;
        font-size: 26px;
        font-weight: 700;
        color: #0f172a;
    }

    .custom-text {
        font-size: 16px;
        color: #475569;
        margin-bottom: 10px;
    }

    .custom-subtext {
        font-size: 14px;
        color: #64748b;
        margin-bottom: 24px;
    }

    .custom-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .custom-btn {
        min-width: 150px;
        padding: 13px 20px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
        text-align: center;
        border: none;
        cursor: pointer;
    }

    .custom-btn.primary {
        background: #0f766e;
        color: #fff;
    }

    .custom-btn.primary:hover {
        background: #0d5f59;
    }

    .custom-btn.secondary {
        background: #e2e8f0;
        color: #1e293b;
    }

    .custom-btn.secondary:hover {
        background: #cbd5e1;
    }

    @media (max-width: 576px) {
        .custom-actions {
            flex-direction: column;
        }

        .custom-btn {
            width: 100%;
        }
    }

    .custom-highlight {
        margin: 0 auto 22px auto;
        padding: 14px 16px;
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        border-radius: 12px;
        font-size: 14px;
        color: #166534;
        line-height: 1.5;
    }

@keyframes spin {
                        0% { transform: rotate(0deg); }
                        100% { transform: rotate(360deg); }
                    }

.pay-mortgage-hero {
    min-height: 300px !important;
    padding: 0 !important;
}