.square {
    height: 50px !important;
    width: 50px !important;
}

.display-1 {
    font-size: x-large !important;
}

.img-owner img {
    width: 80% !important;
    margin-left: 10rem !important;
}

.brand-span {
    color: var(--ztc-bg-main-bg-1);
    font-weight: var(--f-fw-blod);
}

.bg-primary-brand {
    background-color: var(--ztc-bg-main-bg-1) !important;
}

@media (max-width: 767px) {
    .img-owner img {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ============================
   LOGO - RESPONSIVE FIX
   ============================ */

/* Desktop header logo */
.site-logo img {
    max-height: 52px;
    width: auto;
    display: block;
}

/* Mobile top bar logo */
.mobile-logo img {
    max-height: 42px;
    width: auto;
    display: block;
}

/* Mobile sidebar logo */
.logo-m img {
    max-height: 48px;
    width: auto;
    display: block;
    margin-bottom: 20px;
}

/* Footer logo */
.footer-logo img {
    max-height: 56px;
    width: auto;
    display: block;
}

@media (max-width: 767px) {
    .footer-logo img {
        max-height: 44px;
    }
}


/* ============================
   PRICING - 4 COLUMN LAYOUT FIX
   ============================ */

/* Make the pricing row use equal-height flex cards */
.pricing .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Each col stretches to full row height */
.pricing .col-lg-3,
.pricing .col-lg-4 {
    display: flex;
    flex-direction: column;
}

/* Remove fixed min-height; card fills its column */
.pricing .single-pricing-box {
    min-height: unset !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 32px 18px;
}

/* Reduce price h2 font size so "INR 10,000" stays on one line in col-lg-3 */
.pricing .single-pricing-box h2 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

/* Keep /month span readable */
.pricing .single-pricing-box h2 span {
    font-size: 0.9rem !important;
    white-space: normal;
}

/* Fix list items: align icon to top for multi-line text */
.pricing .single-pricing-box .list li,
.pricing .single-pricing-box:hover .list li,
.pricing .single-pricing-box.active .list li {
    align-items: flex-start !important;
    line-height: 1.5 !important;
}

/* Keep the check icon pinned to top of each list item */
.pricing .single-pricing-box .list li span,
.pricing .single-pricing-box:hover .list li span,
.pricing .single-pricing-box.active .list li span {
    flex-shrink: 0;
    margin-top: 3px;
}

