/* ── OUR BRANCHES tagline ─────────────────────────────────────── */
.loc2-tagline {
  display: inline-block !important;
  background: #D90F12 !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 6px 20px !important;
  border-radius: 30px !important;
  font-family: var(--onpoint-font-two) !important;
}

/* ── BOOK A SERVICE / CONTACT HERBAL tagline ──────────────────── */
.section-title__tagline {
  display: inline-block !important;
  background: #D90F12 !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 6px 20px !important;
  border-radius: 30px !important;
  font-family: var(--onpoint-font-two) !important;
}

/* ================================================================
   END
================================================================ */.loc2-section {
        padding: 100px 0;
        background: #fff;
        font-family: var(--onpoint-font);
    }

    .loc2-tagline-wrap {
        text-align: center;
        margin-bottom: 12px;
    }

    .loc2-tagline {
        display: inline-block;
        background: transparent;
        border: 2px solid var(--onpoint-base);
        color: var(--onpoint-base);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        padding: 6px 22px;
        border-radius: 30px;
        font-family: var(--onpoint-font-two);
    }

    .loc2-main-title {
        font-family: var(--onpoint-font-two);
        font-size: 46px;
        font-weight: 700;
        color: var(--onpoint-black);
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 1px;
        line-height: 1.1;
        margin-bottom: 10px;
    }

    .loc2-main-title span {
        color: var(--onpoint-base);
    }

    .loc2-main-desc {
        text-align: center;
        color: var(--onpoint-gray);
        font-size: 15px;
        line-height: 1.8;
        max-width: 580px;
        margin: 0 auto 70px;
    }

    .loc2-divider-center {
        width: 60px;
        height: 4px;
        background: var(--onpoint-base);
        border-radius: 2px;
        margin: 14px auto 28px;
    }

    .loc2-row {
        display: flex;
        align-items: center;
        gap: 0;
        border-bottom: 1px solid #f0f0f0;
        padding: 70px 0;
    }

    .loc2-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .loc2-row.reverse {
        flex-direction: row-reverse;
    }

    .loc2-img-side {
        flex: 0 0 48%;
        max-width: 48%;
        position: relative;
    }

    .loc2-row:not(.reverse) .loc2-img-side {
        padding-right: 50px;
    }

    .loc2-row.reverse .loc2-img-side {
        padding-left: 50px;
    }

    .loc2-img-wrap {
        border-radius: 16px;
        overflow: visible;
        position: relative;
    }

    .loc2-img-wrap img {
        width: 100%;
        height: 420px;
        object-fit: cover;
        display: block;
        border-radius: 16px;
    }

    .loc2-img-badge {
        position: absolute;
        bottom: 24px;
        left: 24px;
        background: var(--onpoint-base);
        color: #fff;
        font-family: var(--onpoint-font-two);
        font-size: 15px;
        font-weight: 700;
        padding: 14px 22px;
        border-radius: 40px;
        letter-spacing: 0.5px;
        line-height: 1.3;
    }

    .loc2-img-num {
        position: absolute;
        top: -18px;
        right: -18px;
        width: 72px;
        height: 72px;
        background: var(--onpoint-primary);
        color: var(--onpoint-black);
        font-family: var(--onpoint-font-two);
        font-size: 28px;
        font-weight: 800;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 4px solid #fff;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

    .loc2-content-side {
        flex: 0 0 52%;
        max-width: 52%;
    }

    .loc2-row:not(.reverse) .loc2-content-side {
        padding-left: 20px;
    }

    .loc2-row.reverse .loc2-content-side {
        padding-right: 20px;
    }

    .loc2-city-tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #f5f5f5;
        color: var(--onpoint-gray);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 6px 16px;
        border-radius: 30px;
        margin-bottom: 16px;
    }

    .loc2-city-tag span {
        width: 8px;
        height: 8px;
        background: #2d7a2d;
        border-radius: 50%;
        display: inline-block;
    }

    .loc2-city-name {
        font-family: var(--onpoint-font-two);
        font-size: 42px;
        font-weight: 700;
        color: var(--onpoint-black);
        text-transform: uppercase;
        letter-spacing: 1px;
        line-height: 1.1;
        margin-bottom: 6px;
    }

    .loc2-state {
        font-size: 14px;
        color: var(--onpoint-gray);
        margin-bottom: 22px;
        font-weight: 500;
    }

    .loc2-content-divider {
        width: 50px;
        height: 3px;
        background: var(--onpoint-base);
        border-radius: 2px;
        margin-bottom: 22px;
    }

    .loc2-bullets {
        list-style: none;
        padding: 0;
        margin: 0 0 22px;
    }

    .loc2-bullets li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 15px;
        color: #555;
        line-height: 1.7;
        margin-bottom: 12px;
    }

    .loc2-bullets li::before {
        content: '';
        width: 20px;
        height: 20px;
        min-width: 20px;
        background: #2d7a2d;
        border-radius: 50%;
        display: inline-block;
        margin-top: 3px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 11px;
    }

    /* Address Box */
    .loc2-address-box {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        background: #f8fdf8;
        border: 1px solid #d8eed8;
        border-left: 4px solid #2d7a2d;
        border-radius: 10px;
        padding: 14px 18px;
        margin-bottom: 18px;
    }

    .loc2-address-box svg {
        width: 20px;
        height: 20px;
        min-width: 20px;
        stroke: #2d7a2d;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        margin-top: 2px;
    }

    .loc2-address-box p {
        margin: 0;
        font-size: 14px;
        color: #444;
        line-height: 1.6;
        font-weight: 500;
    }

    .loc2-info-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
        font-size: 14px;
        color: #555;
    }

    .loc2-info-row svg {
        width: 16px;
        height: 16px;
        stroke: var(--onpoint-base);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

    .loc2-info-row a {
        color: #555;
        text-decoration: none;
    }

    .loc2-info-row a:hover {
        color: var(--onpoint-base);
    }

    .loc2-btn-row {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 26px;
        flex-wrap: wrap;
    }
    .loc2-btn-primary {
    background: #068232 !important;
    border-color: #068232 !important;
    color: #fff !important;
}

.loc2-btn-primary:hover {
    background: #055a24 !important;
    border-color: #055a24 !important;
    color: #fff !important;
}

    .loc2-btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 10px;
      
        
        font-family: var(--onpoint-font-two);
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 14px 28px;
        border-radius: 8px;
        text-decoration: none;
        transition: background 0.3s, transform 0.2s;
        border: 2px solid var(--onpoint-base);
    }

    .loc2-btn-primary:hover {
        background: #a00e1e;
        border-color: #a00e1e;
        color: #fff;
        text-decoration: none;
        transform: translateY(-2px);
    }

    .loc2-btn-primary svg {
        width: 18px;
        height: 18px;
        stroke: #fff;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .loc2-btn-outline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        color: var(--onpoint-black);
        font-family: var(--onpoint-font-two);
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 13px 22px;
        border-radius: 8px;
        text-decoration: none;
        border: 2px solid #ddd;
        transition: border-color 0.3s, color 0.3s;
    }

    .loc2-btn-outline:hover {
        border-color: var(--onpoint-base);
        color: var(--onpoint-base);
        text-decoration: none;
    }

    .loc2-btn-outline svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .loc2-img-placeholder {
        width: 100%;
        height: 420px;
        background: #f0f4f0;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 12px;
    }

    .loc2-img-placeholder svg {
        width: 60px;
        height: 60px;
        stroke: #2d7a2d;
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: 0.4;
    }

    .loc2-img-placeholder p {
        color: #aaa;
        font-size: 13px;
        margin: 0;
    }

    @media (max-width: 991px) {

        .loc2-row,
        .loc2-row.reverse {
            flex-direction: column;
        }

        .loc2-img-side,
        .loc2-row:not(.reverse) .loc2-img-side,
        .loc2-row.reverse .loc2-img-side,
        .loc2-content-side,
        .loc2-row:not(.reverse) .loc2-content-side,
        .loc2-row.reverse .loc2-content-side {
            flex: 0 0 100%;
            max-width: 100%;
            padding: 0 !important;
        }

        .loc2-img-side {
            margin-bottom: 36px;
        }

        .loc2-main-title {
            font-size: 32px;
        }

        .loc2-city-name {
            font-size: 32px;
        }

        .loc2-img-num {
            top: -14px;
            right: -10px;
            width: 56px;
            height: 56px;
            font-size: 22px;
        }
    }

    /* ============================================
   SPACING FIX — Paste in <head> after style.css
   Ya contact.php ke <style> tag mein add kar
============================================ */

    /* Page Header */
    .page-header {
        padding-top: 150px !important;
        padding-bottom: 150px !important;
    }

    /* Contact One (Phone/Location/Email cards) */
    .contact-one {
        padding-top: 60px !important;
        padding-bottom: 50px !important;
    }

    /* What To Expect Section */
    .wte-section {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    /* Locations Section */
    .loc2-section {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    /* Reduce gap between each location row */
    .loc2-row {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* Contact Two (Form Section) */
    .contact-two {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    /* CTA Section */
    .cta-one {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* Section title bottom margin */
    .section-title {
        margin-bottom: 36px !important;
    }

    /* Location section header spacing */
    .loc2-main-desc {
        margin-bottom: 44px !important;
    }

    /* WTE section description */
    .wte-section p[style*="margin-bottom: 38px"] {
        margin-bottom: 24px !important;
    }

    /* ============================================
   MOBILE SPACING (max-width: 768px)
============================================ */
    @media (max-width: 768px) {
        .page-header {
            padding-top: 100px !important;
            padding-bottom: 100px !important;
        }


        .contact-one {
            padding-top: 44px !important;
            padding-bottom: 36px !important;
        }

        .wte-section {
            padding-top: 50px !important;
            padding-bottom: 50px !important;
        }

        .loc2-section {
            padding-top: 50px !important;
            padding-bottom: 0 !important;
        }

        .loc2-row {
            padding-top: 36px !important;
            padding-bottom: 36px !important;
        }

        .contact-two {
            padding-top: 50px !important;
            padding-bottom: 50px !important;
        }

        .cta-one {
            padding-top: 44px !important;
            padding-bottom: 44px !important;
        }

        .loc2-main-desc {
            margin-bottom: 30px !important;
        }
    }

    /* ============================================
   TABLET (768px - 991px)
============================================ */
    @media (min-width: 768px) and (max-width: 991px) {
        .page-header {
            padding-top: 120px !important;
            padding-bottom: 120px !important;
        }


        .contact-one {
            padding-top: 54px !important;
            padding-bottom: 44px !important;
        }

        .wte-section {
            padding-top: 60px !important;
            padding-bottom: 60px !important;
        }

        .loc2-section {
            padding-top: 60px !important;
            padding-bottom: 60px !important;
        }

        .loc2-row {
            padding-top: 44px !important;
            padding-bottom: 44px !important;
        }

        .contact-two {
            padding-top: 60px !important;
            padding-bottom: 60px !important;
        }

        .cta-one {
            padding-top: 50px !important;
            padding-bottom: 50px !important;
        }
    }

    /* ============================================
   CONTACT PAGE — COMPLETE MOBILE FIXES
============================================ */

    /* ---- 1. CONTACT ONE — 3 cards text cut fix ---- */
    @media (max-width: 768px) {
        .contact-one__contact-list {
            display: flex !important;
            flex-direction: column !important;
            gap: 0 !important;
        }

        .contact-one__contact-list li {
            display: flex !important;
            align-items: flex-start !important;
            gap: 14px !important;
            padding: 18px 16px !important;
            width: 100% !important;
            box-sizing: border-box !important;
            overflow: visible !important;
        }

        .contact-one__contact-list .icon {
            flex-shrink: 0 !important;
            width: 50px !important;
            height: 50px !important;
            min-width: 50px !important;
        }

        .contact-one__contact-list .content {
            flex: 1 1 0 !important;
            min-width: 0 !important;
            overflow: hidden !important;
        }

        .contact-one__contact-list .content h3 {
            font-size: 15px !important;
            margin-bottom: 4px !important;
            white-space: normal !important;
        }

        .contact-one__contact-list .content p,
        .contact-one__contact-list .content p a {
            font-size: 13px !important;
            white-space: normal !important;
            word-break: break-word !important;
            overflow-wrap: break-word !important;
            line-height: 1.6 !important;
        }
    }

    /* ---- 2. WTE SECTION — heading too big fix ---- */
    @media (max-width: 768px) {
        .wte-section h2 {
            font-size: 26px !important;
            line-height: 1.25 !important;
            letter-spacing: 0 !important;
        }

        .wte-section {
            padding-top: 44px !important;
            padding-bottom: 44px !important;
        }

        /* Right image — add top margin */
        .wte-section .col-xl-6.col-lg-6:last-child>div {
            margin-left: 0 !important;
            margin-top: 40px !important;
        }

        /* Phone badge inside image fix */
        .wte-section [style*="bottom: -24px"] {
            bottom: 10px !important;
            left: 10px !important;
            right: 10px !important;
            padding: 12px 16px !important;
        }

        .wte-section [style*="bottom: -24px"] h5 {
            font-size: 14px !important;
        }

        /* Steps */
        .wte-step h4 {
            font-size: 15px !important;
        }

        .wte-step p {
            font-size: 13px !important;
        }
    }

    /* ---- 3. CONTACT FORM — inputs cut fix ---- */
    @media (max-width: 768px) {
        .contact-two {
            padding-top: 44px !important;
            padding-bottom: 44px !important;
        }

        /* Form inputs full width on mobile */
        .contact-two__form .col-xl-6.col-lg-6 {
            width: 100% !important;
            flex: 0 0 100% !important;
            max-width: 100% !important;
        }

        .contact-two__input-box {
            margin-bottom: 14px !important;
        }

        .contact-two__input-box input,
        .contact-two__input-box textarea {
            font-size: 14px !important;
            padding: 14px 16px !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

        /* Heading size */
        .contact-two .section-title__title {
            font-size: 24px !important;
            line-height: 1.3 !important;
        }

        /* Desc text */
        .contact-two p {
            font-size: 14px !important;
        }

        /* Hide right side image on mobile */
        .contact-two__right {
            display: none !important;
        }

        .contact-two .col-xl-7 {
            width: 100% !important;
            flex: 0 0 100% !important;
            max-width: 100% !important;
        }

        /* Button full width */
        .contact-two__btn-box {
            width: 100% !important;
        }

        .contact-two__btn {
            width: 100% !important;
            justify-content: center !important;
            text-align: center !important;
        }
    }

    /* ---- 4. LOC2 SECTION mobile ---- */
    @media (max-width: 768px) {
        .loc2-main-title {
            font-size: 26px !important;
        }

        .loc2-city-name {
            font-size: 26px !important;
        }

        .loc2-img-badge {
            font-size: 12px !important;
            padding: 10px 14px !important;
        }

        .loc2-btn-row {
            flex-direction: column !important;
            gap: 10px !important;
        }

        .loc2-btn-primary,
        .loc2-btn-outline {
            width: 100% !important;
            justify-content: center !important;
        }
    }

    /* ---- 5. CTA mobile ---- */
    @media (max-width: 768px) {
        .cta-one {
            padding-top: 44px !important;
            padding-bottom: 44px !important;
        }
    }

    /* ============================================
   CONTACT FORM + CARDS — FINAL FIX
============================================ */

    /* ---- CONTACT ONE CARDS ---- */
    @media (max-width: 768px) {

        .contact-one {
            padding-top: 36px !important;
            padding-bottom: 36px !important;
        }

        .contact-one__inner {
            padding: 0 !important;
            overflow: hidden !important;
        }

        .contact-one__contact-list {
            display: flex !important;
            flex-direction: column !important;
            gap: 12px !important;
            padding: 0 !important;
            margin: 0 !important;
            width: 100% !important;
        }

        .contact-one__contact-list li {
            display: flex !important;
            flex-direction: row !important;
            align-items: flex-start !important;
            gap: 14px !important;
            padding: 16px !important;
            width: 100% !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
            margin: 0 !important;
        }

        .contact-one__contact-list .icon {
            flex-shrink: 0 !important;
            width: 52px !important;
            height: 52px !important;
            min-width: 52px !important;
        }

        .contact-one__contact-list .content {
            flex: 1 1 0% !important;
            min-width: 0 !important;
            overflow: hidden !important;
            width: 100% !important;
        }

        .contact-one__contact-list .content h3 {
            font-size: 15px !important;
            margin-bottom: 5px !important;
            white-space: normal !important;
            word-break: break-word !important;
        }

        .contact-one__contact-list .content p {
            font-size: 13px !important;
            white-space: normal !important;
            word-break: break-word !important;
            overflow-wrap: break-word !important;
            line-height: 1.6 !important;
            margin: 0 !important;
            max-width: 100% !important;
        }

        .contact-one__contact-list .content p a {
            word-break: break-all !important;
            font-size: 13px !important;
        }

        /* Section title spacing */
        .contact-one .section-title {
            margin-bottom: 20px !important;
        }

        .contact-one .section-title__title {
            font-size: 22px !important;
            line-height: 1.3 !important;
        }
    }

    @media (max-width: 768px) {

        /* Kill all horizontal overflow */
        .contact-two,
        .contact-two .container,
        .contact-two .row,
        .contact-two__left,
        .contact-two__form,
        .contact-two__form .row {
            overflow: hidden !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        /* Hide right col */
        .contact-two .col-xl-5 {
            display: none !important;
        }

        /* Left col full width */
        .contact-two .col-xl-7 {
            width: 100% !important;
            flex: 0 0 100% !important;
            max-width: 100% !important;
            padding-left: 15px !important;
            padding-right: 15px !important;
            box-sizing: border-box !important;
        }

        /* Both input cols full width */
        .contact-two__form .col-xl-6,
        .contact-two__form .col-lg-6,
        .contact-two__form .col-xl-12,
        .contact-two__form .col-lg-12 {
            width: 100% !important;
            flex: 0 0 100% !important;
            max-width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            box-sizing: border-box !important;
        }

        /* Input box wrapper */
        .contact-two__input-box {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            margin-bottom: 12px !important;
            overflow: hidden !important;
        }

        /* Actual inputs */
        .contact-two__input-box input,
        .contact-two__input-box textarea {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
            font-size: 14px !important;
            padding: 13px 14px !important;
            display: block !important;
        }

        /* Button */
        .contact-two__btn-box {
            width: 100% !important;
            box-sizing: border-box !important;
        }

        .contact-two__btn {
            width: 100% !important;
            max-width: 100% !important;
            text-align: center !important;
            justify-content: center !important;
            box-sizing: border-box !important;
        }

        /* Heading + para */
        .contact-two .section-title__title {
            font-size: 22px !important;
            line-height: 1.3 !important;
        }

        .contact-two p {
            font-size: 13px !important;
            line-height: 1.7 !important;
        }

        .contact-two {
            padding-top: 36px !important;
            padding-bottom: 36px !important;
        }
    }

    .scroll-to-top {
        right: 15px !important;
        bottom: 20px !important;
        left: auto !important;
    }

    /* ================================================================
   HPCI CONTACT PAGE — BRAND COLOR OVERRIDE
   Brand Green : #068232
   Brand Red   : #D90F12
   Usage       : Add <link> AFTER style.css in <head>
================================================================ */

    /* ── 0. CSS VARIABLE PATCH ──────────────────────────────────── */
    :root {
        --onpoint-base: #D90F12 !important;
        --onpoint-primary: #068232 !important;
        --hpci-green: #068232;
        --hpci-red: #D90F12;
        --hpci-green-dark: #055a24;
        --hpci-red-dark: #a80b0e;
    }

    /* ================================================================
   1. PAGE HEADER
================================================================ */
    .thm-breadcrumb li a:hover {
        color: #068232 !important;
        text-decoration: none !important;
    }

    /* ================================================================
   2. SECTION TAGLINE — sirf color change, koi box/border nahi
================================================================ */
    .section-title__tagline {
        color: #D90F12 !important;
        /* border/background theme ke default pe hi rehne do */
    }

    /* ================================================================
   3. CONTACT ONE — 3 CARDS
================================================================ */

    /* Icon circle → GREEN, no UI changes */
    .contact-one__contact-list .icon {
        background: #068232 !important;
        border-color: #068232 !important;
    }

    /* Icon glyph white */
    .contact-one__contact-list .icon span {
        color: #fff !important;
    }

    /* Links → GREEN, NO underline ever */
    .contact-one__contact-list .content p a {
        color: #068232 !important;
        text-decoration: none !important;
    }

    .contact-one__contact-list .content p a:hover {
        color: #068232 !important;
        text-decoration: none !important;
    }

    /* ================================================================
   4. WTE SECTION
================================================================ */

    /* "OUR PROCESS" tag → RED */
    .wte-section>.container>.row>.col-xl-6:first-child>div:first-child span {
        background: #D90F12 !important;
    }

    /* Heading highlight → GREEN */
    .wte-section h2 span {
        color: #068232 !important;
    }

    /* Step icon circles → GREEN */
    .wte-icon {
        background: #068232 !important;
    }

    .wte-step:hover .wte-icon {
        background: #D90F12 !important;
    }

    /* Phone badge circle → GREEN */
    .wte-section div[style*="background: #2d7a2d"] {
        background: #068232 !important;
    }

    /* Phone number in badge → RED */
    .wte-section h5[style*="color: var(--onpoint-primary)"] {
        color: #D90F12 !important;
    }

    /* ================================================================
   5. LOC2 — OUR BRANCHES SECTION
================================================================ */
    .loc2-tagline {
        border-color: #068232 !important;
        color: #068232 !important;
    }

    .loc2-main-title span {
        color: #D90F12 !important;
    }

    .loc2-divider-center {
        background: #068232 !important;
    }

    .loc2-city-tag span {
        background: #068232 !important;
    }

    .loc2-content-divider {
        background: #D90F12 !important;
    }

    /* Bullet checkmarks → GREEN */
    .loc2-bullets li::before {
        background-color: #068232 !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    }

    /* Address box */
    .loc2-address-box {
        border-left-color: #068232 !important;
        border-color: #b8dfc4 !important;
        background: #f0f9f3 !important;
    }

    .loc2-address-box svg {
        stroke: #068232 !important;
    }

    .loc2-info-row svg {
        stroke: #068232 !important;
    }

    /* Info row links — NO underline */
    .loc2-info-row a {
        text-decoration: none !important;
    }

    .loc2-info-row a:hover {
        color: #D90F12 !important;
        text-decoration: none !important;
    }

    /* Number badge → RED */
    .loc2-img-num {
        background: #D90F12 !important;
        color: #fff !important;
    }

    /* Image badge → GREEN */
    .loc2-img-badge {
        background: #068232 !important;
    }

    /* PRIMARY button → RED */
/* PRIMARY button → GREEN */
.loc2-btn-primary {
    background: #068232 !important;
    border-color: #068232 !important;
    color: #fff !important;
    text-decoration: none !important;
}

.loc2-btn-primary:hover {
    background: #055a24 !important;
    border-color: #055a24 !important;
    color: #fff !important;
    text-decoration: none !important;
}

  

    /* ================================================================
   6. CONTACT TWO — FORM SECTION
================================================================ */
    .contact-two .section-title__tagline {
        color: #D90F12 !important;
    }

    .contact-two__input-box input:focus,
    .contact-two__input-box textarea:focus {
        border-color: #068232 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(6, 130, 50, 0.12) !important;
    }

    /* Submit button → RED */
    .contact-two__btn,
    .thm-btn {
        background: #D90F12 !important;
        border-color: #D90F12 !important;
        color: #fff !important;
    }

    .contact-two__btn:hover,
    .thm-btn:hover {
        background: #a80b0e !important;
        border-color: #a80b0e !important;
    }

    /* ================================================================
   7. CTA ONE — text WHITE (red background hai)
================================================================ */
    .cta-one__contact-box .content h3 a {
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .cta-one__contact-box .content h3 a:hover {
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .cta-one__contact-box .content p {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .cta-one__contact-box .icon span {
        color: #ffffff !important;
    }

    .cta-one__title {
        color: #ffffff !important;
    }

    /* ================================================================
   8. GLOBAL NAV
================================================================ */
    .main-menu__list>li>a:hover,
    .main-menu__list>li.current>a {
        color: #D90F12 !important;
        text-decoration: none !important;
    }

    .main-header__btn,
    .main-header .thm-btn {
        background: #D90F12 !important;
        border-color: #D90F12 !important;
    }

    /* Scroll to top */
    .scroll-to-top {
        background: #068232 !important;
        border-color: #068232 !important;
    }

    .scroll-to-top:hover {
        background: #D90F12 !important;
        border-color: #D90F12 !important;
    }

    /* ================================================================
   9. FOOTER
================================================================ */
    .footer-widget__social a:hover {
        background: #068232 !important;
        border-color: #068232 !important;
        color: #fff !important;
    }

    .site-footer__bottom a:hover {
        color: #068232 !important;
        text-decoration: none !important;
    }

    /* ================================================================
   10. UTILITY — thm-btn sitewide
================================================================ */
    a.thm-btn,
    button.thm-btn,
    input[type="submit"].thm-btn {
        background: #D90F12 !important;
        border-color: #D90F12 !important;
    }

    a.thm-btn:hover,
    button.thm-btn:hover,
    input[type="submit"].thm-btn:hover {
        background: #a80b0e !important;
        border-color: #a80b0e !important;
    }

    /* ================================================================
   MOBILE  (≤ 768px)
================================================================ */
    @media (max-width: 768px) {
        .contact-one__contact-list .icon {
            background: #068232 !important;
        }

        .wte-section h2 span {
            color: #068232 !important;
        }

        .loc2-btn-primary {
            background: #D90F12 !important;
            border-color: #D90F12 !important;
        }

        .contact-two__btn {
            background: #D90F12 !important;
        }

        .cta-one__contact-box .content h3 a {
            color: #ffffff !important;
            text-decoration: none !important;
        }
    }

    /* ================================================================
   END OF HPCI CONTACT OVERRIDE
================================================================ */

    /* ================================================================
   DESKTOP SECTION SPACING FIX (min-width: 992px only)
================================================================ */
    @media (min-width: 992px) {
        .contact-one {
            padding-top: 50px !important;
            padding-bottom: 50px !important;
        }

        .wte-section {
            padding-top: 60px !important;
            padding-bottom: 60px !important;
        }

        .loc2-section {
            padding-top: 60px !important;
            padding-bottom: 60px !important;
        }

        .loc2-row {
            padding-top: 40px !important;
            padding-bottom: 40px !important;
        }

        .contact-two {
            padding-top: 60px !important;
            padding-bottom: 60px !important;
        }

        .cta-one {
            padding-top: 50px !important;
            padding-bottom: 50px !important;
        }
    }

          /* ============================================================
   HPCI FAQ SECTION — faq-section.css
   Matches your existing website theme exactly.
   Font: Jost (body) + Rajdhani (headings)
   Colors: #D71112 (red), #098231 (green), #111 (dark)
   ============================================================ */

        /* ----- Root Variables (mirror your site) ----- */
        :root {
            --hpci-red: #D71112;
            --hpci-green: #098231;
            --hpci-dark: #111111;
            --hpci-gray: #555555;
            --hpci-bg: #f8f9f4;
            --hpci-white: #ffffff;
            --hpci-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
            --hpci-radius: 12px;
            --font-body: 'Jost', sans-serif;
            --font-head: 'Rajdhani', sans-serif;
        }

        /* ----- Section wrapper ----- */
        .hpci-faq-section {
            padding: 60px 0 80px;
            background: var(--hpci-bg);
            font-family: var(--font-body);
        }

        .hpci-faq-container {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 40px;
        }

        /* ----- Two-column layout ----- */
        .hpci-faq-row {
            display: flex;
            align-items: flex-start;
            gap: 60px;
            flex-wrap: wrap;
        }

        /* ==================== LEFT COLUMN ==================== */
        .hpci-faq-left {
            flex: 1;
            min-width: 280px;
        }

        /* Tagline pill */
        .hpci-faq-tagline-wrap {
            margin-bottom: 16px;
        }

        .hpci-faq-tagline {
            display: inline-block;
            background: var(--hpci-red);
            color: var(--hpci-white);
            font-size: 13px;
            font-weight: 700;
            padding: 7px 22px;
            border-radius: 30px;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-family: var(--font-body);
        }

        /* Main heading */
        .hpci-faq-main-title {
            font-size: 50px;
            font-weight: 700;
            color: var(--hpci-dark);
            line-height: 1.1;
            margin: 0 0 12px;
            font-family: var(--font-head);
        }

        .hpci-faq-title-green {
            color: var(--hpci-green);
        }

        /* Red underline bar */
        .hpci-faq-title-bar {
            width: 55px;
            height: 4px;
            background: var(--hpci-red);
            border-radius: 2px;
            margin-bottom: 20px;
        }

        /* Description text */
        .hpci-faq-desc {
            color: var(--hpci-gray);
            font-size: 17px;
            line-height: 1.8;
            margin: 0 0 28px;
            font-family: var(--font-body);
            text-align: justify;
        }

        /* Image card */
        .hpci-faq-img-wrap {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
        }

        .hpci-faq-img {
            width: 100%;
            display: block;
            border-radius: 16px;
            min-height: 320px;
            object-fit: cover;
        }

        /* Green gradient overlay */
        .hpci-faq-img-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(9, 130, 49, 0.95));
            padding: 50px 28px 28px;
            border-radius: 0 0 16px 16px;
        }

        /* Call box inside image */
        .hpci-faq-call-box {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .hpci-faq-call-icon {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: var(--hpci-red);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .hpci-faq-call-text p {
            color: rgba(255, 255, 255, 0.75);
            font-size: 14px;
            margin: 0 0 3px;
            font-family: var(--font-body);
            text-align: left;
        }

        .hpci-faq-call-text a {
            color: var(--hpci-white);
            font-size: 24px;
            font-weight: 700;
            font-family: var(--font-head);
            text-decoration: none;
            letter-spacing: 1px;
            display: block;
            transition: color 0.3s ease;
        }

        .hpci-faq-call-text a:hover {
            color: #ffe0a0;
        }

        /* ==================== RIGHT COLUMN — ACCORDION ==================== */
        .hpci-faq-right {
            flex: 1.3;
            min-width: 280px;
            padding-top: 10px;
        }

        /* Each FAQ card */
        .hpci-faq-item {
            border-radius: var(--hpci-radius);
            margin-bottom: 12px;
            overflow: hidden;
            box-shadow: var(--hpci-shadow);
            transition: box-shadow 0.3s ease;
        }

        .hpci-faq-item:hover {
            box-shadow: 0 4px 22px rgba(0, 0, 0, 0.11);
        }

        /* Question bar */
        .hpci-faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 22px;
            cursor: pointer;
            background: var(--hpci-white);
            transition: background 0.3s ease;
            user-select: none;
            -webkit-user-select: none;
        }

        .hpci-faq-question:hover {
            background: #f4faf5;
        }

        /* Active state — green header */
        .hpci-faq-item.active .hpci-faq-question {
            background: var(--hpci-green);
        }

        .hpci-faq-item.active .hpci-faq-question h3 {
            color: var(--hpci-white);
        }

        .hpci-faq-item.active .hpci-faq-question .hpci-faq-icon {
            background: rgba(255, 255, 255, 0.25);
            color: var(--hpci-white);
        }

        /* Question text */
        .hpci-faq-question h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            color: var(--hpci-dark);
            font-family: var(--font-head);
            line-height: 1.3;
            transition: color 0.3s ease;
        }

        /* +/− icon button */
        .hpci-faq-icon {
            width: 30px;
            height: 30px;
            min-width: 30px;
            border-radius: 50%;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 12px;
            font-size: 20px;
            font-weight: 700;
            color: var(--hpci-green);
            line-height: 1;
            transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
        }

        /* Answer body */
        .hpci-faq-answer {
            background: var(--hpci-white);
            overflow: hidden;
            transition: max-height 0.35s ease, padding 0.3s ease;
        }

        .hpci-faq-answer p {
            margin: 0;
            color: #444;
            font-size: 15px;
            line-height: 1.9;
            font-family: var(--font-body);
            padding: 20px 22px;
            text-align: justify;
        }

        /* Last item — no extra margin */
        .hpci-faq-item:last-child {
            margin-bottom: 0;
        }

        /* ==================== RESPONSIVE ==================== */
        @media (max-width: 991px) {
            .hpci-faq-row {
                gap: 40px;
            }

            .hpci-faq-main-title {
                font-size: 40px;
            }
        }

        @media (max-width: 767px) {
            .hpci-faq-section {
                padding: 48px 0 60px;
            }

            .hpci-faq-container {
                padding: 0 20px;
            }

            .hpci-faq-row {
                flex-direction: column;
                gap: 36px;
            }

            .hpci-faq-left,
            .hpci-faq-right {
                flex: none;
                width: 100%;
                min-width: unset;
            }

            .hpci-faq-main-title {
                font-size: 34px;
            }

            .hpci-faq-main-title br {
                display: none;
            }

            .hpci-faq-question h3 {
                font-size: 16px;
            }

            .hpci-faq-right {
                padding-top: 0;
            }
        }

        @media (max-width: 480px) {
            .hpci-faq-main-title {
                font-size: 28px;
            }

            .hpci-faq-call-text a {
                font-size: 20px;
            }
        }

        /* ============================================
   HPCI – Book Strip (Final CTA Section)
   Usage: Include on any page that uses .hpci-book-strip
   Requires: Jost + Rajdhani fonts, Bootstrap (for .container, .d-flex)
============================================ */

        /* ── Main strip ─────────────────────────── */
        .hpci-book-strip {
            background: linear-gradient(135deg, #098231 0%, #065f24 100%);
            padding: 50px 0;
            text-align: center;
            font-family: 'Jost', sans-serif;
        }

        .hpci-book-strip h2 {
            font-family: 'Rajdhani', sans-serif;
            font-size: clamp(24px, 4vw, 40px);
            font-weight: 700;
            color: #fff;
            margin: 0 0 10px;
        }

        .hpci-book-strip p {
            color: rgba(255, 255, 255, 0.85);
            font-size: 16px;
            margin: 0 0 24px;
            text-align: center;
        }

        /* ── Primary red button ─────────────────── */
        .hpci-book-strip .hpci-btn-primary {
            background: #D71112;
            color: #fff;
            box-shadow: 0 4px 18px rgba(215, 17, 18, 0.4);
            font-family: 'Jost', sans-serif;
            font-size: 17px;
            font-weight: 700;
            padding: 15px 36px;
            border-radius: 6px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
        }

        .hpci-book-strip .hpci-btn-primary:hover {
            background: #b50e0e;
            color: #fff;
            transform: translateY(-2px);
        }

        /* ── WhatsApp green button ──────────────── */
        .hpci-book-strip .hpci-btn-wa {
            background: #25D366;
            color: #fff;
            box-shadow: 0 4px 18px rgba(37, 211, 102, 0.35);
            font-family: 'Jost', sans-serif;
            font-size: 17px;
            font-weight: 700;
            padding: 15px 36px;
            border-radius: 6px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
        }

        .hpci-book-strip .hpci-btn-wa:hover {
            background: #1da851;
            color: #fff;
            transform: translateY(-2px);
        }

        /* ── Phone / outline button ─────────────── */
        .hpci-book-strip .hpci-btn-outline {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
            border: 2px solid rgba(255, 255, 255, 0.6);
            font-family: 'Jost', sans-serif;
            font-size: 17px;
            font-weight: 700;
            padding: 15px 36px;
            border-radius: 6px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
        }

        .hpci-book-strip .hpci-btn-outline:hover {
            background: rgba(255, 255, 255, 0.25);
            color: #fff;
        }

        /* ── Mobile responsive ──────────────────── */
        @media (max-width: 576px) {
            .hpci-book-strip {
                padding: 36px 16px;
            }

            .hpci-book-strip .d-flex {
                flex-direction: column;
                gap: 12px;
            }

            .hpci-book-strip h2 {
                font-size: 22px;
            }

            .hpci-book-strip p {
                font-size: 14px;
            }

            .hpci-book-strip .hpci-btn-primary,
            .hpci-book-strip .hpci-btn-wa,
            .hpci-book-strip .hpci-btn-outline {
                width: 100%;
                justify-content: center;
                font-size: 15px;
                padding: 13px 20px;
            }
        }

        .hpci-banner-img{
    width: 100%;
    height: auto;
    max-height: 550px;
    object-fit: cover;
    object-position: top;
    display: block;
}

@media (max-width: 767px){
    .hpci-banner-img{
        width: 100%;
        height: 280px;
        max-height: none;
        object-fit: cover;
        object-position: top;
        margin-top: 70px;
    }
}