:root {
        --black: #000000;
        --gray: #4D4E53;
        --red: #B71D21;
        --dk-tan: #8A6A4A;
        --lt-tan: #C2A27C;
        --beige: #F4EDE4;
        --blue: #1F3A5F;
        --white: #FFFFFF;
        --line: rgba(77, 78, 83, 0.18);
        --shadow: 0 8px 24px rgba(77, 78, 83, 0.10);
        --radius: 14px;
        --max-width: 900px;
    }

    .card-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 100px;
    }

    .left-column {
        border-right: solid 1px var(--line);
    }

    .rateHeroImage {
        display: none;
        width: 100%;
        max-width: var(--max-width);
        overflow: hidden;
        border-radius: var(--radius);
        margin: 0 auto 22px;
        background: var(--white);
    }

    .rateHeroImage img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .singleRateCard {
        display: flex;
        justify-content: center;
    }

    #ratePopup {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(0, 0, 0, 0.7);
        align-items: center;
        justify-content: center;
    }

    #ratePopupInner {
        width: 100%;
        max-width: 800px;
        height: 85vh;
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        position: relative;
    }

    #ratePopupFrame {
        width: 100%;
        height: 100%;
        border: 0;
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    #ratePopupFrame.is-visible {
        opacity: 1;
    }

    #ratePopupClose {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        font-size: 26px;
        background: var(--white);
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        cursor: pointer;
    }

    #ratePopupLoading {
        display: none;
        text-align: center;
        padding: 40px;
    }

    .singleRateCard {
        grid-template-columns: minmax(260px, 420px);
        justify-content: center;
    }

    #main-top-container {
        width: 100%;
    }

    #main-body-container,
    #main-body-container .container {
        background: var(--beige);
    }

    .hero {
        padding: 30px 0;
    }

    .hero h2 {
        font-size: 48px;
        font-family: Lora, "Times New Roman", serif;
        line-height: 1.1;
        font-weight: 700;
        color: var(--black);
        margin-bottom: 8px;
    }
    .hero-text {
        max-width: 900px;
        margin: 0 auto;
        display:none;
    }

    .container {
        width: min(var(--max-width), calc(100% - 48px));
        margin: 0 auto;
    }

    .container::before {
        content: initial;
    }

    body.popup-open {
        overflow: hidden;
    }

    @media (max-width: 767px) {
        #ratePopup {
            padding: 10px;
        }

        #ratePopupInner {
            height: 90vh;
            border-radius: var(--radius);
        }
    }

    #subDesc {
        padding: 0 22px;
    }

    #subDesc .cardTitle {
        color: var(--dk-tan);
    }

    /* Fixing header logo size */
    .navbar-header .tnt-prop-img {
        max-height: 30px !important;
    }

    .rateCards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        border: none;
        margin-bottom: 22px
    }

    .rateCard {
        position: relative;
        display: block;
        width: 100%;
        text-align: left;
        padding: 26px 22px 22px;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
        overflow: hidden;
        overflow-anchor: none;
        background: var(--white);
        border-radius: var(--radius);
        border: solid 1px var(--line);
        max-width: 900px;
        margin: 0 auto;
    }

    .rateCard::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 5px;
        background: var(--dk-tan);
        opacity: 0.12;
        transition: opacity 0.2s ease;
    }


    .rateCard:hover {
        transform: translateY(-3px);
        border-color: #b7c4d6;
        box-shadow: var(--shadow);
        text-decoration: none;
    }

    .rateCard:hover::before {
        opacity: 0.35;
    }

    .rateCard.active {
        border-color: var(--blue);
        background: var(--white);
        box-shadow: var(--shadow);
    }

    .rateCard.active::before {
        opacity: 1;
    }


    .popularBadge {
        position: absolute;
        display: inline-block;
        padding: 6px 10px;
        background: var(--blue);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        top: 0;
        right: 0;
        border-radius: 0 0 0 16px;
    }

    .cardEyebrow,
    .cardTitle,
    .cardPrice,
    .cardDesc,
    .cardFeatures,
    .cardFeature,
    .cardCta {
        display: block;
    }

    .cardEyebrow {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--blue);
        margin-bottom: 10px;
        padding-right: 110px;
    }

    .cardTitle {
        font-family: Lora, "Times New Roman", serif;
        font-size: 20px;
        line-height: 1.1;
        font-weight: 700;
        color: var(--black);
        margin-bottom: 8px;
    }

    .cardPrice {
        font-size: 30px;
        font-weight: 700;
        color: var(--red);
        margin-bottom: 10px;
    }

    .cardDesc {
        font-size: 15px;
        line-height: 1.55;
        color: var(--gray);
        margin-bottom: 16px;
    }

    .cardFeatures {
        margin-bottom: 18px;
    }

    .cardFeature {
        font-size: 14px;
        line-height: 1.5;
        color: var(--blue);
        margin-bottom: 8px;
    }

    .cardCta {
        display: inline-block;
        margin-top: auto;
        padding: 10px 14px;
        border-radius: var(--radius);
        background: var(--red);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
    }

    .rateCard.active .cardCta {
        background: var(--blue);
    }

    /* Container */
    #rateContainer {
        display: none;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        overflow: hidden;
        background: #fff;
    }

    /* Loader */
    #rateLoading {
        display: none;
        padding: 30px;
        text-align: center;
    }

    .spinner {
        width: 40px;
        height: 40px;
        margin: 0 auto 10px;
        border: 4px solid var(--line);
        border-top: 4px solid #0f4c81;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* Iframe */
    #rateFrame {
        width: 100%;
        height: 1950px;
        border: 0;
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    #rateFrame.visible {
        opacity: 1;
    }

    /* Mobile */
    @media (max-width: 768px) {

        #rateFrame,
        iframe {
            height: 2250px;
        }

        .rateCard {
            border-radius: 0;
        }

        .rateCards {
            margin: 0 auto;
        }

        .cardCta {
            width: 100%;
            text-align: center;
        }

        .container {
            width: min(100% - 32px, var(--max-width));
        }

        .popularBadge {
            top: 0;
            right: 0;
            border-radius: 0 0 0 16px;
        }

        .rateHeroImage {
            border-radius: 0;
            margin: 0;
        }
        
        .hero-text {
            padding: 0 22px;
        }

        .card-body {
            grid-template-columns: 1fr;
            gap: 0;
        }

        .left-column {
            border: none;
        }

    }