/* ===========================================================
   Client overrides — Advocate Rajiv Rajpurohit
   Kept separate from style.css so the theme file stays intact.
   =========================================================== */

/* Logo: his mark is wider than the theme's, give it room */
.header-main-one-wrapper .thumbnail {
    margin-right: 38px;
    flex-shrink: 0;
}

.header-main-one-wrapper .thumbnail img {
    height: 58px;
    width: auto;
}

/* Process list: the theme's hover points at a missing image
   (assets/images/service/06.webp), so text turned white on white.
   Use a solid dark panel instead — same intent, actually visible. */
section.main-wrapper-sticky .sticky-statement:hover {
    background-image: none;
    background-color: var(--color-primary);
}

section.main-wrapper-sticky .sticky-statement:hover .left-side .icon i,
section.main-wrapper-sticky .sticky-statement:hover .title,
section.main-wrapper-sticky .sticky-statement:hover .disc {
    color: #fff !important;
}

/* CTA band: keep the phone number on one line */
.rts-call-to-action-area-three .call-area a {
    white-space: nowrap;
}

/* Blog cards: the theme overlays the title on the image — give it a
   readable scrim so long, real post titles stay legible. */
.single-blog-area-four .thumbnail {
    position: relative;
    display: block;
}

.single-blog-area-four .thumbnail::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 15, 20, .10) 0%, rgba(12, 15, 20, .78) 100%);
}

/* CTA band: shrink the headline a little so the phone number
   keeps its own column and never wraps mid-number. */
.rts-call-to-action-area-three .cta-main-wrapper-inner .title {
    font-size: 32px;
    line-height: 1.32;
    flex: 1 1 auto;
    max-width: 62%;
}

.rts-call-to-action-area-three .call-area {
    flex: 0 0 auto;
    white-space: nowrap;
}

.rts-call-to-action-area-three .call-area a {
    white-space: nowrap;
    font-size: 24px;
}

@media only screen and (max-width: 991px) {
    .rts-call-to-action-area-three .cta-main-wrapper-inner .title {
        font-size: 26px;
        max-width: 100%;
    }

    .rts-call-to-action-area-three .call-area a {
        font-size: 20px;
    }
}

/* Blog cards: titles sit over the image, so give them a taller card,
   a stronger scrim and a smaller type size to stay readable. */
.single-blog-area-four .thumbnail {
    position: relative;
    display: block;
    overflow: hidden;
}

.single-blog-area-four .thumbnail img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.single-blog-area-four .thumbnail::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 15, 20, .25) 0%, rgba(12, 15, 20, .55) 45%, rgba(12, 15, 20, .90) 100%);
}

.single-blog-area-four .inner-content .title {
    font-size: 19px;
    line-height: 1.38;
}

/* ===========================================================
   Appointment / booking section
   =========================================================== */

/* no dead gap before the footer */
.rts-appoinment-area {
    padding-bottom: 90px;
}

.rts-appoinment-area+.rts-footer-area,
.rts-appoinment-area+footer {
    margin-top: 0;
}

.appointment-form-card {
    background: #fff;
    border: 1px solid #E7E9EC;
    border-radius: 14px;
    padding: 38px;
    box-shadow: 0 6px 18px rgba(28, 37, 57, .06);
}

/* labels + fields */
.appointment-form-card label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-heading-1);
    margin-bottom: 8px;
    font-family: var(--font-primary);
}

.appointment-form-card label span {
    color: #D64545;
}

.appointment-form-card input[type="text"],
.appointment-form-card input[type="tel"],
.appointment-form-card input[type="email"],
.appointment-form-card select,
.appointment-form-card textarea {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    font-size: 15px;
    color: var(--color-heading-1);
    background: #F7F8F9;
    border: 1px solid #E7E9EC;
    border-radius: 8px;
    transition: .25s;
}

.appointment-form-card textarea {
    height: auto;
    padding: 14px 16px;
    resize: vertical;
}

.appointment-form-card select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2539' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    padding-right: 42px;
}

.appointment-form-card input:focus,
.appointment-form-card select:focus,
.appointment-form-card textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(32, 40, 45, .07);
}

/* consultation mode */
.ap-mode {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.ap-mode__opt {
    flex: 1 1 200px;
    margin: 0;
    cursor: pointer;
}

.ap-mode__opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ap-mode__opt span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-heading-1);
    background: #F7F8F9;
    border: 1px solid #E7E9EC;
    border-radius: 8px;
    transition: .25s;
}

.ap-mode__opt span i {
    font-size: 18px;
}

.ap-mode__opt input:checked+span {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* calendar + slots */
.ap-booking {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 22px;
    background: #F7F8F9;
    border: 1px solid #E7E9EC;
    border-radius: 10px;
    padding: 20px;
}

.ap-cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ap-cal__head strong {
    font-family: var(--font-primary);
    font-size: 16px;
    color: var(--color-heading-1);
}

.ap-cal__nav {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #E0E3E7;
    background: #fff;
    color: var(--color-heading-1);
    cursor: pointer;
    transition: .2s;
}

.ap-cal__nav:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.ap-cal__dow,
.ap-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.ap-cal__dow span {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--color-body);
    text-transform: uppercase;
    padding-bottom: 6px;
}

.ap-day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid transparent;
    color: var(--color-heading-1);
    cursor: pointer;
    transition: .18s;
}

.ap-day:hover:not(.is-off):not(.is-empty) {
    border-color: var(--color-primary);
}

.ap-day.is-empty {
    background: transparent;
    cursor: default;
}

.ap-day.is-off {
    color: #BFC4CA;
    background: #F1F2F4;
    cursor: not-allowed;
}

.ap-day.is-active {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.ap-cal__note {
    font-size: 12px;
    color: var(--color-body);
    margin: 12px 0 0;
}

.ap-slots__label {
    font-size: 13px;
    color: var(--color-body);
    margin-bottom: 12px;
}

.ap-slots__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.ap-slot {
    padding: 11px 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    border: 1px solid #E0E3E7;
    border-radius: 7px;
    color: var(--color-heading-1);
    cursor: pointer;
    transition: .18s;
}

.ap-slot:hover {
    border-color: var(--color-primary);
}

.ap-slot.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* side panel */
.appointment-side {
    background: var(--color-primary);
    border-radius: 14px;
    padding: 36px 32px;
    height: 100%;
}

.appointment-side__title {
    color: #fff;
    margin-bottom: 26px;
    font-size: 24px;
}

.appointment-side__list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}

.appointment-side__list li {
    display: flex;
    gap: 16px;
    margin-bottom: 22px;
}

.appointment-side__list .ico {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    font-size: 17px;
}

.appointment-side__list strong {
    display: block;
    color: #fff;
    font-size: 15px;
    margin-bottom: 4px;
}

.appointment-side__list p {
    color: rgba(255, 255, 255, .66);
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

.appointment-side__list a {
    color: rgba(255, 255, 255, .88);
}

.appointment-side__list a:hover {
    color: #fff;
}

.appointment-side__map {
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
}

.appointment-side__map iframe {
    width: 100%;
    height: 270px;
    display: block;
    filter: grayscale(.2);
}

@media only screen and (max-width: 991px) {
    .ap-booking {
        grid-template-columns: 1fr;
    }

    .appointment-form-card {
        padding: 26px 20px;
    }

    /* The columns stack on mobile and the office panel lands FIRST, so the
       old margin-top opened a gap above it. Tighten the row gutter and put
       the spacing between the two cards instead of above the first. */
    #book-appointment .row.mt--50 {
        --bs-gutter-y: 1.5rem;
        margin-top: 26px !important;
    }

    .appointment-side {
        margin-top: 0;
        margin-bottom: 30px;
    }

    #book-appointment .col-lg-7 {
        margin-top: 0;
    }
}

/* theme colours unchecked radio labels orange — keep them neutral */
.ap-mode__opt input:not(:checked)+span,
.ap-mode__opt input:not(:checked)+span i {
    color: var(--color-heading-1);
}

/* ===========================================================
   Footer
   =========================================================== */
.footer-col {}

.footer-col--brand .footer-logo {
    display: inline-block;
    margin-bottom: 24px;
}

.footer-col--brand .footer-logo img {
    height: 56px;
    width: auto;
}

.footer-col__disc {
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-body);
    max-width: 380px;
    margin-bottom: 26px;
}

.footer-col__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-heading-1);
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 12px;
}

.footer-col__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: var(--color-primary);
}

/* link lists */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li+li {
    margin-top: 12px;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    color: var(--color-body);
    transition: .22s;
}

.footer-links a i {
    font-size: 11px;
    opacity: .55;
    transition: .22s;
}

.footer-links a:hover {
    color: var(--color-heading-1);
    padding-left: 4px;
}

.footer-links a:hover i {
    opacity: 1;
}

/* contact list */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
}

.footer-contact li:last-child {
    margin-bottom: 0;
}

.footer-contact .ico {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--color-primary);
    font-size: 15px;
    box-shadow: 0 4px 14px rgba(28, 37, 57, .07);
}

.footer-contact .lbl {
    display: block;
    font-size: 13px;
    color: var(--color-body);
    margin-bottom: 3px;
}

.footer-contact a,
.footer-contact p {
    font-size: 15px;
    color: var(--color-heading-1);
    font-weight: 500;
    margin: 0;
    line-height: 1.6;
}

.footer-contact a:hover {
    color: var(--color-primary);
}

.footer-contact p {
    font-weight: 400;
    color: var(--color-body);
    max-width: 320px;
}

/* social */
.footer-social {
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--color-heading-1);
    font-size: 15px;
    box-shadow: 0 4px 14px rgba(28, 37, 57, .07);
    transition: .22s;
}

.footer-social a:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-3px);
}

/* centred copyright */
.rts-copy-right-1 {
    border-top: 1px solid #E3E6E9;
    padding: 22px 0;
}

.rts-copy-right-1 .copyright-h-2-wrapper {
    justify-content: center;
    text-align: center;
}

.rts-copy-right-1 .copyright-h-2-wrapper .disc {
    margin: 0;
    font-size: 14px;
}

@media only screen and (max-width: 767px) {
    .footer-col--brand .footer-logo img {
        height: 46px;
    }

    .footer-col__disc {
        max-width: 100%;
    }
}

/* theme tints footer anchors — keep them in the body colour */
.footer-links a,
.footer-links a i {
    color: var(--color-body) !important;
}

.footer-links a:hover,
.footer-links a:hover i {
    color: var(--color-heading-1) !important;
}

.footer-contact p,
.footer-contact .lbl {
    color: var(--color-body) !important;
}

.footer-contact a {
    color: var(--color-heading-1) !important;
}

.footer-contact a:hover {
    color: var(--color-primary) !important;
}

/* About page: enrolment badge replaces the theme's demo signature */
.enrolment-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-body);
    padding-left: 22px;
    border-left: 2px solid var(--color-primary);
}

.enrolment-badge strong {
    font-size: 15px;
    color: var(--color-heading-1);
    font-family: var(--font-primary);
}

/* About page: keep copy and checklist side by side at laptop widths
   (the theme forces the paragraph full-width from 1200–1599px, which
   stacks the two and leaves the column looking empty). */
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .about-inner-content-two .about-between-wrapper p.disc {
        max-width: 320px;
        margin-bottom: 0;
    }
}

/* rounded media, matching the theme's about treatment */
.left-thumbnail-about-area-two>img,
.left-thumbnail-about-area-two .small-image img {
    border-radius: 12px;
}

.left-thumbnail-about-area-two .small-image img {
    border: 6px solid #fff;
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
}

/* keep the checklist tucked beside the copy rather than drifting into
   the decorative grid on the right */
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .about-inner-content-two .about-between-wrapper {
        justify-content: flex-start;
        gap: 40px;
        flex-wrap: nowrap;
    }

    .about-inner-content-two .about-between-wrapper .check-wrapper-area {
        flex-shrink: 0;
    }
}

/* ===========================================================
   Service detail page
   =========================================================== */

/* the theme nests .container inside .container-1754, which doubles the
   gutters and pushes the page 8px wider than the viewport */
.container-1754 {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
}

.container-1754>.row {
    margin-left: 0;
    margin-right: 0;
}

.container-1754>.row>[class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* banner: centred content */
.banner-inner-service-details-1 .title-area-left.text-center {
    text-align: center;
}

.banner-inner-service-details-1 .title-area-left .disc {
    max-width: 760px;
}



/* checklist: icon and text on one line (theme's .single-check stacks
   when it is used outside its original two-column context) */
.service-check-list .single-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 12px;
}

.service-check-list .single-check i {
    margin-top: 4px;
    font-size: 15px;
}

.service-check-list .single-check p {
    flex: 1;
    line-height: 1.7;
}

/* feature cards: keep the title on one line beside its icon */
.service-short-main-wrapper .single-short-service {
    align-items: flex-start;
    gap: 16px;
}

.service-short-main-wrapper .single-short-service .inner .title {
    font-size: 19px;
    margin-bottom: 8px;
}

/* banner: real service image, content centred (theme uses flex-start) */
.banner-inner-service-details-1 {
    /* the per-page image is set inline by the template; only the
       positioning belongs here */
    justify-content: center !important;
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
}

.banner-inner-service-details-1>.container {
    width: 100%;
    max-width: 1320px;
}

.banner-inner-service-details-1 .title-area-left {
    width: 100%;
    text-align: center;
}

.banner-inner-service-details-1 .title-area-left .title,
.banner-inner-service-details-1 .title-area-left .disc {
    text-align: center;
}

.banner-inner-service-details-1 .title-area-left .disc {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.banner-inner-service-details-1 .bg-title {
    left: 50%;
    transform: translateX(-50%);
}

/* sidebar: current service in white with dark text */
.rts-single-wized.Categories .single-categories li.is-current a {
    background: #fff !important;
    color: var(--color-heading-1) !important;
    font-weight: 600;
}

.rts-single-wized.Categories .single-categories li.is-current a i {
    color: var(--color-heading-1) !important;
}

/* feature cards: icon vertically centred against its text block */
.service-short-main-wrapper .single-short-service {
    display: flex;
    align-items: center;
    gap: 18px;
}

.service-short-main-wrapper .single-short-service .icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-short-main-wrapper .single-short-service .inner {
    flex: 1;
}

.service-short-main-wrapper .single-short-service .inner .title {
    font-size: 19px;
    margin-bottom: 6px;
}

.service-short-main-wrapper .single-short-service .inner .disc {
    margin-bottom: 0;
}

/* process checklist: icon inline with its text */
.service-check-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 10px;
}

.service-check-list .single-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 12px;
}

.service-check-list .single-check i {
    margin-top: 4px;
    font-size: 15px;
    flex-shrink: 0;
}

.service-check-list .single-check p {
    flex: 1;
    margin: 0;
    line-height: 1.7;
}

/* download rows: keep icon, text and button on one line */
.single-download-area {
    display: flex;
    align-items: center;
    gap: 14px;
}

.single-download-area img {
    width: 34px;
    height: auto;
    flex-shrink: 0;
}

.single-download-area .mid {
    flex: 1;
}

.single-download-area .mid .title {
    font-size: 15px;
    margin-bottom: 2px;
}

/* sidebar contact card: the SVG logo has no intrinsic height, so the
   theme collapses it to 0×0 — give it an explicit size */
.rts-single-wized.contact .wized-header img {
    height: 46px;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* inline CTA at the end of a service page */
.service-cta-inline {
    background: var(--color-primary);
    border-radius: 14px;
    padding: 34px 36px;
    color: #fff;
}

.service-cta-inline h4 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 22px;
}

.service-cta-inline p {
    color: rgba(255, 255, 255, .70);
    margin-bottom: 22px;
    max-width: 56ch;
}

.service-cta-inline__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.service-cta-inline .rts-btn {
    background: #fff;
    color: var(--color-heading-1);
}

.service-cta-inline .rts-btn.btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
}

.service-cta-inline .rts-btn.btn-outline:hover {
    background: #fff;
    color: var(--color-heading-1);
}

/* breathing room between the service body and the sections that follow */
.rts-service-details-area-main-bottom {
    padding-bottom: 100px;
}

@media only screen and (max-width: 767px) {
    .rts-service-details-area-main-bottom {
        padding-bottom: 60px;
    }
}

/* ===========================================================
   Mobile header
   =========================================================== */

/* the theme hides .rts-btn.btn-primary inside .button-area below 575px,
   so the burger must not carry those classes — style it directly */
.header-main-one-wrapper .button-area #menu-btn {
    display: none;
    background: #F2F2F2;
    height: 52px;
    min-width: 52px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 14px;
    padding: 0;
}

.header-main-one-wrapper .button-area #menu-btn img {
    width: 22px;
    height: auto;
}

.header-main-one-wrapper .button-area #menu-btn .menu-light {
    display: none;
}

/* show the burger once the desktop nav is gone */
@media only screen and (max-width: 1199px) {
    .header-main-one-wrapper .button-area #menu-btn {
        display: flex;
    }
}

/* Hero on mobile: the theme lays a 45% white sheet over the banner
   (it was built for a light image). Ours is dark with its own gradient,
   so the sheet only fogs the picture — remove it. */
@media only screen and (max-width: 575px) {
    .banner-style-one::after {
        display: none !important;
    }
}

/* mobile drawer logo: use the client's mark, sized properly */
#side-bar .inner-content .logo-1 img,
#side-bar .thumbnail img {
    height: 48px;
    width: auto;
}

/* ===========================================================
   About section — mobile
   =========================================================== */

/* The "Confidential Handling" badge is absolutely positioned for the wide
   desktop layout. On a phone the photo shrinks but the badge does not, so it
   covered more than half the picture. Let it sit below the image instead. */
@media only screen and (max-width: 767px) {
    .thumbnail-about-and-progress-1 .progress-area-wrapper {
        position: static;
        transform: none;
        left: auto;
        bottom: auto;
        margin-top: 22px;
        padding: 22px 24px;
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .thumbnail-about-and-progress-1 .progress-area-wrapper .title {
        margin-top: 0;
        font-size: 17px;
    }

    /* the wrapper carries a desktop offset that pushes the badge off-screen */
    .thumbnail-about-and-progress-1 .progress-circle-main-wrapper {
        display: block;
        position: static;
        transform: none;
        inset: auto;
        margin: 0;
    }

    /* main.js runs a GSAP parallax that writes an inline translate3d(250px)
       on .images-r. That is fine on a wide screen but shoves the badge off a
       phone, so cancel the transform here. */
    .thumbnail-about-and-progress-1 .progress-area-wrapper.images-r {
        transform: none !important;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
    }

    /* keep the image column itself from inheriting desktop padding */
    .rts-about-area .col-lg-7.pl--70 {
        padding-left: 0 !important;
    }

    /* space between the About copy and the image that follows it */
    .rts-about-area .col-lg-7 {
        margin-top: 40px;
    }
}

/* ===========================================================
   Service pages — step cards on mobile
   =========================================================== */

/* The theme sets flex-wrap on these cards below 991px but leaves the
   children at their intrinsic widths with justify-content: space-between,
   so each row stops short and leaves dead space on the right.
   Stack them full-width instead. */
@media only screen and (max-width: 991px) {
    .single-step-service-details {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 16px;
    }

    .single-step-service-details>*,
    .single-step-service-details .thumbnail {
        width: 100%;
        max-width: 100%;
        /* theme caps .thumbnail at 231px */
        flex: 0 0 auto;
    }

    .single-step-service-details .thumbnail img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .single-step-service-details .feature {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 18px;
    }

    .single-step-service-details .feature p.single {
        margin: 0;
    }
}

@media only screen and (max-width: 479px) {
    .single-step-service-details .feature {
        grid-template-columns: 1fr;
    }
}

/* Service pages: the sidebar column carries mt_lg--60, which does not apply
   on phones — so once it stacks under the CTA the two blocks touch. */
@media only screen and (max-width: 1199px) {
    .rts-service-details-area-main-bottom .mt-service-shorter {
        margin-top: 50px;
    }
}

/* ===========================================================
   Home hero height
   =========================================================== */

/* The theme sets 850px, which dwarfs the 477px service banners.
   Match them on desktop; mobile already sizes to its content. */
@media only screen and (min-width: 576px) {
    .banner-style-one {
        /* client asked for a shorter hero so the next section is visible on
           first view; min-height keeps the copy from clipping when the
           headline wraps to three lines */
        min-height: 430px;
        height: auto;
        padding-top: 70px;
        padding-bottom: 70px;
        display: flex;
        align-items: center;
    }

    .banner-style-one .container {
        width: 100%;
    }

    .banner-style-one .banner-one-inner {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Keep the hero copy to a predictable number of lines so the banner holds
   its 477px height instead of growing when the headline wraps. */
@media only screen and (min-width: 576px) {
    .banner-style-one .banner-one-inner .title {
        font-size: 48px;
        line-height: 1.18;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 18px;
    }

    .banner-style-one .banner-one-inner .disc {
        max-width: 640px;
        margin-bottom: 26px;
    }
}

/* ===========================================================
   Video Consultation page
   =========================================================== */

/* The theme's process image has margin-left:50px and no max-width, so at
   ~90% zoom (or any narrow desktop) the 872px circle pushes past the
   container and causes a horizontal scrollbar. Cap it. */
/* The wrapper has no width of its own, so the 872px image stretched it
   past its 668px column and the circle spilled off-screen. Constrain the
   wrapper, and let the image fill it. */
.thumbnail-working-procss-one {
    max-width: 100%;
    /* GSAP seeds the zoomOut animation with transform: scale(1.5) and
       opacity 0. The scale makes the circle overflow its column — and it
       stays oversized if the tween never fires. Cancel the scale; the
       fade-in still runs. */
    transform: none !important;
    overflow: hidden;
    border-radius: 50%;
}

@media only screen and (max-width: 767px) {
    .thumbnail-working-procss-one {
        border-radius: 8px;
    }
}

.thumbnail-working-procss-one img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-left: 0;
}

/* intro image */
.vc-intro-thumb img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
}

/* platform icons: white outlines read correctly on the dark band */
.working-process-one .single-working-process-one .left .icon img {
    width: 52px;
    height: 52px;
}

.vc-intro-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.vc-intro-actions .btn-outline-dark {
    background: transparent;
    color: var(--color-heading-1);
    border: 1px solid #D7DBE0;
}

.vc-intro-actions .btn-outline-dark:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

@media only screen and (max-width: 991px) {
    .vc-intro-thumb {
        margin-bottom: 10px;
    }
}

/* ===========================================================
   Our Services grid
   =========================================================== */
.services-grid-card {
    background: #fff;
    border: 1px solid #EDEFF3;
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    transition: box-shadow .3s ease, transform .3s ease;
}

.services-grid-card:hover {
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
    transform: translateY(-4px);
}

.services-grid-card .thumbnail {
    display: block;
    overflow: hidden;
}

.services-grid-card .thumbnail img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.services-grid-card:hover .thumbnail img {
    transform: scale(1.06);
}

.services-grid-card .inner {
    padding: 26px 26px 30px;
}

.services-grid-card .title {
    font-size: 21px;
    margin-bottom: 12px;
    line-height: 1.35;
}

.services-grid-card .title a {
    color: var(--color-heading-1);
    transition: color .3s;
}

.services-grid-card:hover .title a {
    color: var(--color-primary);
}

.services-grid-card .disc {
    margin-bottom: 18px;
    font-size: 15px;
}

.services-grid-card .read-more {
    font-weight: 600;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.services-grid-card .read-more i {
    transition: transform .3s ease;
}

.services-grid-card:hover .read-more i {
    transform: translateX(4px);
}

/* ===========================================================
   Testimonials page
   =========================================================== */
.testimonial-page-card {
    background: #fff;
    border: 1px solid #EDEFF3;
    border-radius: 14px;
    padding: 32px 34px;
    height: 100%;
    position: relative;
    transition: box-shadow .3s ease;
}

.testimonial-page-card:hover {
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
}

.testimonial-page-card .review-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.testimonial-page-card .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: 21px;
    flex-shrink: 0;
}

.testimonial-page-card .discription {
    flex: 1;
}

.testimonial-page-card .title {
    margin-bottom: 4px;
    font-size: 18px;
}

.testimonial-page-card .star-icon i {
    color: #F0A500;
    font-size: 13px;
}

.testimonial-page-card .quote {
    color: var(--color-primary);
    opacity: .16;
    font-size: 34px;
}

.testimonial-page-card .disc {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.8;
}

@media only screen and (max-width: 767px) {
    .testimonial-page-card {
        padding: 26px 24px;
    }

    .services-grid-card .thumbnail img {
        height: 200px;
    }
}

/* ===========================================================
   Mutual consent process steps
   =========================================================== */
.process-step-card {
    background: #fff;
    border: 1px solid #EDEFF3;
    border-left: 3px solid var(--color-primary);
    border-radius: 12px;
    padding: 32px 34px;
    height: 100%;
    position: relative;
    transition: box-shadow .3s ease;
}

.process-step-card:hover {
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
}

.process-step-card .step-no {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.process-step-card .title {
    font-size: 20px;
    margin-bottom: 12px;
}

.process-step-card .disc {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.8;
}

.process-step-card .note {
    margin: 16px 0 0;
    padding: 14px 16px;
    background: #F6F7F9;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-body);
}

.process-step-card .note i {
    color: var(--color-primary);
    margin-right: 6px;
}

/* ===========================================================
   Virtual consultation — what to expect
   =========================================================== */
.expect-card {
    background: #fff;
    border-radius: 12px;
    padding: 34px 28px;
    height: 100%;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.expect-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
}

.expect-card .icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb, 28, 37, 57), .07);
    display: flex;
    align-items: center;
    justify-content: center;
}

.expect-card .icon i {
    font-size: 26px;
    color: var(--color-primary);
}

.expect-card .title {
    font-size: 18px;
    margin-bottom: 10px;
}

.expect-card .disc {
    margin-bottom: 0;
    font-size: 14.5px;
    line-height: 1.75;
}

/* ===========================================================
   Contact cards
   =========================================================== */
.contact-info-card {
    background: #fff;
    border: 1px solid #EDEFF3;
    border-radius: 12px;
    padding: 34px 30px;
    height: 100%;
    transition: box-shadow .3s ease;
}

.contact-info-card:hover {
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
}

.contact-info-card .icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 20px;
}

.contact-info-card .title {
    font-size: 18px;
    margin-bottom: 12px;
}

.contact-info-card .disc {
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 1.75;
}

.contact-info-card .disc a {
    color: var(--color-body);
}

.contact-info-card .disc a:hover {
    color: var(--color-primary);
}

/* ===========================================================
   FAQs page
   =========================================================== */
.faq-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EDEFF3;
}

.faq-group-head .title {
    margin-bottom: 0;
    font-size: 24px;
}

.faq-group-head .read-more {
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.faq-group-head .read-more i {
    transition: transform .3s ease;
}

.faq-group-head .read-more:hover i {
    transform: translateX(4px);
}

/* ===========================================================
   Blog listing
   =========================================================== */
.blog-list-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-list-card .thumbnail img {
    width: 100%;
    aspect-ratio: 16 / 9;
    /* matches how his featured images were authored */
    height: auto;
    object-fit: cover;
    display: block;
}

.blog-list-card .inner-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-list-card .title {
    font-size: 19px;
    line-height: 1.45;
    margin-bottom: 12px;
}

.blog-list-card .disc {
    font-size: 14.5px;
    line-height: 1.75;
    margin-bottom: 18px;
    flex: 1;
}

.blog-list-card .read-more {
    font-weight: 600;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.blog-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.blog-pagination .page-link {
    min-width: 46px;
    height: 46px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #EDEFF3;
    background: #fff;
    color: var(--color-heading-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all .3s ease;
}

.blog-pagination .page-link:hover,
.blog-pagination .page-link.is-current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ===========================================================
   Thank you
   =========================================================== */
.thankyou-card {
    background: #fff;
    border: 1px solid #EDEFF3;
    border-radius: 16px;
    padding: 60px 50px;
}

.thankyou-card .icon i {
    font-size: 62px;
    color: var(--color-primary);
}

.thankyou-card .title {
    margin: 22px 0 16px;
    font-size: 40px;
}

.thankyou-card .disc {
    max-width: 60ch;
    margin: 0 auto 14px;
}

.thankyou-card .thankyou-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.thankyou-card .btn-outline-dark {
    background: transparent;
    color: var(--color-heading-1);
    border: 1px solid #D7DBE0;
}

.thankyou-card .btn-outline-dark:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

@media only screen and (max-width: 767px) {
    .process-step-card {
        padding: 26px 24px;
    }

    .contact-info-card {
        padding: 28px 24px;
    }

    .thankyou-card {
        padding: 44px 24px;
    }

    .thankyou-card .title {
        font-size: 30px;
    }

    .faq-group-head .title {
        font-size: 21px;
    }
}

/* The theme overlays .inner-content on the image, which only works for a short
   title and no excerpt. The listing needs a normal stacked card, so undo it. */
.blog-list-card {
    background: #fff;
    border: 1px solid #EDEFF3;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .3s ease, transform .3s ease;
}

.blog-list-card:hover {
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
    transform: translateY(-4px);
}

.blog-list-card .thumbnail {
    border-radius: 0;
}

.blog-list-card .inner-content {
    position: static;
    left: auto;
    bottom: auto;
    padding: 24px 26px 28px;
}

.blog-list-card .inner-content * {
    color: inherit;
}

.blog-list-card .title {
    color: var(--color-heading-1);
    transition: color .3s ease;
}

.blog-list-card:hover .title {
    color: var(--color-primary);
}

.blog-list-card .disc {
    color: var(--color-body);
}

.blog-list-card .read-more i {
    transition: transform .3s ease;
}

.blog-list-card:hover .read-more i {
    transform: translateX(4px);
}

/* FAQ topic jump links */
.faq-jump-area {
    padding-top: 70px;
}

.faq-jump-lead {
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
    color: var(--color-body);
}

.faq-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.faq-jump a {
    padding: 9px 16px;
    border: 1px solid #EDEFF3;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-heading-1);
    transition: all .3s ease;
}

.faq-jump a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.faq-group {
    scroll-margin-top: 120px;
}

/* The theme's decorative watermark behind a section title is 150px with
   min-width:max-content, so on narrow columns it pushes past the viewport and
   creates a horizontal scrollbar. It is purely decorative, so clip it. */
.title-style-two {
    position: relative;
    overflow: hidden;
}

.title-style-two .bg-content {
    max-width: 100%;
    overflow: hidden;
    pointer-events: none;
}

@media only screen and (max-width: 767px) {
    .title-style-two .bg-content {
        font-size: 74px;
        left: -20px;
        top: -34px;
    }
}

/* ===========================================================
   Blog article
   =========================================================== */
.blog-article__thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin-bottom: 26px;
}

.blog-article__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14.5px;
    color: var(--color-body);
    padding-bottom: 22px;
    margin-bottom: 26px;
    border-bottom: 1px solid #EDEFF3;
}

.blog-article__meta i {
    color: var(--color-primary);
}

.blog-article__meta span {
    opacity: .4;
}

.blog-article .title {
    line-height: 1.35;
}

.blog-article h2.title {
    font-size: 28px;
}

.blog-article h3.title {
    font-size: 23px;
}

.blog-article h4.title {
    font-size: 20px;
}

.blog-article__quote {
    margin: 30px 0;
    padding: 22px 26px;
    border-left: 3px solid var(--color-primary);
    background: #F6F7F9;
    border-radius: 0 10px 10px 0;
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-heading-1);
}

/* previous / next article */
.post-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.post-pager__link {
    border: 1px solid #EDEFF3;
    border-radius: 12px;
    padding: 20px 22px;
    display: block;
    transition: box-shadow .3s ease, border-color .3s ease;
}

.post-pager__link:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
}

.post-pager__link span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.post-pager__link strong {
    display: block;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-heading-1);
    font-weight: 600;
}

.post-pager__link.next {
    text-align: right;
}

@media only screen and (max-width: 767px) {
    .post-pager {
        grid-template-columns: 1fr;
    }

    .post-pager__link.next {
        text-align: left;
    }

    .blog-article h2.title {
        font-size: 24px;
    }

    .blog-article h3.title {
        font-size: 20px;
    }
}

/* current item in the mobile drawer */
.mobile-menu-link.is-current {
    color: var(--color-primary);
    font-weight: 600;
}

/* ===========================================================
   Floating widgets — WhatsApp (left) and chat (right),
   matching the placement on his live site
   =========================================================== */
.wa-float {
    position: fixed;
    left: 25px;
    bottom: 25px;
    z-index: 99990;
}

.wa-float a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
    transition: transform .3s ease, box-shadow .3s ease;
}

.wa-float a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}

.wa-float__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

@media only screen and (max-width: 767px) {
    .wa-float {
        left: 16px;
        bottom: 16px;
    }

    .wa-float a {
        width: 52px;
        height: 52px;
    }
}

/* the theme's back-to-top sits bottom-right, where Tawk.to also renders its
   launcher — lift it clear so the two do not overlap */
.progress-wrap {
    bottom: 96px !important;
}

@media only screen and (max-width: 767px) {
    .progress-wrap {
        bottom: 80px !important;
    }
}

/* ===========================================================
   Font Awesome — woff2 only
   ===========================================================
   The theme's fontawesome.css lists a .ttf fallback beside each .woff2, but
   only the .woff2 files were shipped in assets/fonts/. The missing .ttf 404s,
   which makes the browser mark the whole @font-face as failed — so brand
   icons intermittently rendered as empty boxes. These redeclarations drop the
   .ttf source. Same family names and weights, so they simply take precedence.
   =========================================================== */
@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../fonts/fa-brands-400.woff2) format("woff2");
}

@font-face {
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(../fonts/fa-solid-900.woff2) format("woff2");
}

@font-face {
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../fonts/fa-regular-400.woff2) format("woff2");
}

@font-face {
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url(../fonts/fa-light-300.woff2) format("woff2");
}

/* the theme also references the Font Awesome 5 family names in places */
@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../fonts/fa-brands-400.woff2) format("woff2");
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(../fonts/fa-solid-900.woff2) format("woff2");
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../fonts/fa-regular-400.woff2) format("woff2");
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url(../fonts/fa-light-300.woff2) format("woff2");
}

/* ===========================================================
   CLIENT FEEDBACK — his own brand colour, compact header,
   tighter sections so the next one is visible on first view
   ===========================================================
   His live site uses a saffron/coral accent (#d54339, lighter #f55e45)
   on a white header, with the full nav in one compact strip.
   =========================================================== */
:root {
    /* ONE orange for every brand element.
       The client asked for a single flat colour instead of the four-shade
       ramp: no darker hover variant, no deeper shade on headings. The
       -light/-dark/-deep names are kept so the rest of this file and the
       theme keep working, but they all resolve to the same value. */
    --brand: #F55E45;
    --brand-light: #F55E45;
    --brand-dark: #F55E45;
    --brand-deep: #F55E45;

    /* Buttons, icons, links, accents and coloured section backgrounds. */
    --color-primary: #F55E45;
    --color-secondary: #F55E45;
    --bg-dark-1: #F55E45;

    /* Headings keep a dark tone: only brand elements take the orange. */
    --ink: #3a2b28;

    /* Text is deliberately NOT changed here. Headings and paragraphs keep
       their existing colours; only brand elements take the orange. */
    --color-heading-1: #8f2a22;
    --color-title: #8f2a22;
    --color-heading-dark: #8f2a22;
    --color-body: #6b4a46;
}

.ap-day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid transparent;
    color: var(--color-heading-1);
    cursor: pointer;
    transition: .18s;
}

.ap-day:hover:not(.is-off):not(.is-empty) {
    border-color: var(--color-primary);
}

.ap-day.is-empty {
    background: transparent;
    cursor: default;
}

.ap-day.is-off {
    color: #BFC4CA;
    background: #F1F2F4;
    cursor: not-allowed;
}

.ap-day.is-active {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.ap-cal__note {
    font-size: 12px;
    color: var(--color-body);
    margin: 12px 0 0;
}

.ap-slots__label {
    font-size: 13px;
    color: var(--color-body);
    margin-bottom: 12px;
}

.ap-slots__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.ap-slot {
    padding: 11px 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    border: 1px solid #E0E3E7;
    border-radius: 7px;
    color: var(--color-heading-1);
    cursor: pointer;
    transition: .18s;
}

.ap-slot:hover {
    border-color: var(--color-primary);
}

.ap-slot.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* side panel */
.appointment-side {
    background: var(--color-primary);
    border-radius: 14px;
    padding: 36px 32px;
    height: 100%;
}

.appointment-side__title {
    color: #fff;
    margin-bottom: 26px;
    font-size: 24px;
}

.appointment-side__list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}

.appointment-side__list li {
    display: flex;
    gap: 16px;
    margin-bottom: 22px;
}

.appointment-side__list .ico {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    font-size: 17px;
}

.appointment-side__list strong {
    display: block;
    color: #fff;
    font-size: 15px;
    margin-bottom: 4px;
}

.appointment-side__list p {
    color: rgba(255, 255, 255, .66);
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

.appointment-side__list a {
    color: rgba(255, 255, 255, .88);
}

.appointment-side__list a:hover {
    color: #fff;
}

.appointment-side__map {
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
}

.appointment-side__map iframe {
    width: 100%;
    height: 270px;
    display: block;
    filter: grayscale(.2);
}

@media only screen and (max-width: 991px) {
    .ap-booking {
        grid-template-columns: 1fr;
    }

    .appointment-form-card {
        padding: 26px 20px;
    }

    /* The columns stack on mobile and the office panel lands FIRST, so the
       old margin-top opened a gap above it. Tighten the row gutter and put
       the spacing between the two cards instead of above the first. */
    #book-appointment .row.mt--50 {
        --bs-gutter-y: 1.5rem;
        margin-top: 26px !important;
    }

    .appointment-side {
        margin-top: 0;
        margin-bottom: 30px;
    }

    #book-appointment .col-lg-7 {
        margin-top: 0;
    }
}

/* theme colours unchecked radio labels orange — keep them neutral */
.ap-mode__opt input:not(:checked)+span,
.ap-mode__opt input:not(:checked)+span i {
    color: var(--color-heading-1);
}

/* ===========================================================
   Footer
   =========================================================== */
.footer-col {}

.footer-col--brand .footer-logo {
    display: inline-block;
    margin-bottom: 24px;
}

.footer-col--brand .footer-logo img {
    height: 56px;
    width: auto;
}

.footer-col__disc {
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-body);
    max-width: 380px;
    margin-bottom: 26px;
}

.footer-col__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-heading-1);
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 12px;
}

.footer-col__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: var(--color-primary);
}

/* link lists */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li+li {
    margin-top: 12px;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    color: var(--color-body);
    transition: .22s;
}

.footer-links a i {
    font-size: 11px;
    opacity: .55;
    transition: .22s;
}

.footer-links a:hover {
    color: var(--color-heading-1);
    padding-left: 4px;
}

.footer-links a:hover i {
    opacity: 1;
}

/* contact list */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
}

.footer-contact li:last-child {
    margin-bottom: 0;
}

.footer-contact .ico {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--color-primary);
    font-size: 15px;
    box-shadow: 0 4px 14px rgba(28, 37, 57, .07);
}

.footer-contact .lbl {
    display: block;
    font-size: 13px;
    color: var(--color-body);
    margin-bottom: 3px;
}

.footer-contact a,
.footer-contact p {
    font-size: 15px;
    color: var(--color-heading-1);
    font-weight: 500;
    margin: 0;
    line-height: 1.6;
}

.footer-contact a:hover {
    color: var(--color-primary);
}

.footer-contact p {
    font-weight: 400;
    color: var(--color-body);
    max-width: 320px;
}

/* social */
.footer-social {
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--color-heading-1);
    font-size: 15px;
    box-shadow: 0 4px 14px rgba(28, 37, 57, .07);
    transition: .22s;
}

.footer-social a:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-3px);
}

/* centred copyright */
.rts-copy-right-1 {
    border-top: 1px solid #E3E6E9;
    padding: 22px 0;
}

.rts-copy-right-1 .copyright-h-2-wrapper {
    justify-content: center;
    text-align: center;
}

.rts-copy-right-1 .copyright-h-2-wrapper .disc {
    margin: 0;
    font-size: 14px;
}

@media only screen and (max-width: 767px) {
    .footer-col--brand .footer-logo img {
        height: 46px;
    }

    .footer-col__disc {
        max-width: 100%;
    }
}

/* theme tints footer anchors — keep them in the body colour */
.footer-links a,
.footer-links a i {
    color: var(--color-body) !important;
}

.footer-links a:hover,
.footer-links a:hover i {
    color: var(--color-heading-1) !important;
}

.footer-contact p,
.footer-contact .lbl {
    color: var(--color-body) !important;
}

.footer-contact a {
    color: var(--color-heading-1) !important;
}

.footer-contact a:hover {
    color: var(--color-primary) !important;
}

/* About page: enrolment badge replaces the theme's demo signature */
.enrolment-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-body);
    padding-left: 22px;
    border-left: 2px solid var(--color-primary);
}

.enrolment-badge strong {
    font-size: 15px;
    color: var(--color-heading-1);
    font-family: var(--font-primary);
}

/* About page: keep copy and checklist side by side at laptop widths
   (the theme forces the paragraph full-width from 1200–1599px, which
   stacks the two and leaves the column looking empty). */
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .about-inner-content-two .about-between-wrapper p.disc {
        max-width: 320px;
        margin-bottom: 0;
    }
}

/* rounded media, matching the theme's about treatment */
.left-thumbnail-about-area-two>img,
.left-thumbnail-about-area-two .small-image img {
    border-radius: 12px;
}

.left-thumbnail-about-area-two .small-image img {
    border: 6px solid #fff;
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
}

/* keep the checklist tucked beside the copy rather than drifting into
   the decorative grid on the right */
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .about-inner-content-two .about-between-wrapper {
        justify-content: flex-start;
        gap: 40px;
        flex-wrap: nowrap;
    }

    .about-inner-content-two .about-between-wrapper .check-wrapper-area {
        flex-shrink: 0;
    }
}

/* ===========================================================
   Service detail page
   =========================================================== */

/* the theme nests .container inside .container-1754, which doubles the
   gutters and pushes the page 8px wider than the viewport */
.container-1754 {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
}

.container-1754>.row {
    margin-left: 0;
    margin-right: 0;
}

.container-1754>.row>[class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* banner: centred content */
.banner-inner-service-details-1 .title-area-left.text-center {
    text-align: center;
}

.banner-inner-service-details-1 .title-area-left .disc {
    max-width: 760px;
}



/* checklist: icon and text on one line (theme's .single-check stacks
   when it is used outside its original two-column context) */
.service-check-list .single-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 12px;
}

.service-check-list .single-check i {
    margin-top: 4px;
    font-size: 15px;
}

.service-check-list .single-check p {
    flex: 1;
    line-height: 1.7;
}

/* feature cards: keep the title on one line beside its icon */
.service-short-main-wrapper .single-short-service {
    align-items: flex-start;
    gap: 16px;
}

.service-short-main-wrapper .single-short-service .inner .title {
    font-size: 19px;
    margin-bottom: 8px;
}

/* banner: real service image, content centred (theme uses flex-start) */
.banner-inner-service-details-1 {
    /* the per-page image is set inline by the template; only the
       positioning belongs here */
    justify-content: center !important;
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
}

.banner-inner-service-details-1>.container {
    width: 100%;
    max-width: 1320px;
}

.banner-inner-service-details-1 .title-area-left {
    width: 100%;
    text-align: center;
}

.banner-inner-service-details-1 .title-area-left .title,
.banner-inner-service-details-1 .title-area-left .disc {
    text-align: center;
}

.banner-inner-service-details-1 .title-area-left .disc {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.banner-inner-service-details-1 .bg-title {
    left: 50%;
    transform: translateX(-50%);
}

/* sidebar: current service in white with dark text */
.rts-single-wized.Categories .single-categories li.is-current a {
    background: #fff !important;
    color: var(--color-heading-1) !important;
    font-weight: 600;
}

.rts-single-wized.Categories .single-categories li.is-current a i {
    color: var(--color-heading-1) !important;
}

/* feature cards: icon vertically centred against its text block */
.service-short-main-wrapper .single-short-service {
    display: flex;
    align-items: center;
    gap: 18px;
}

.service-short-main-wrapper .single-short-service .icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-short-main-wrapper .single-short-service .inner {
    flex: 1;
}

.service-short-main-wrapper .single-short-service .inner .title {
    font-size: 19px;
    margin-bottom: 6px;
}

.service-short-main-wrapper .single-short-service .inner .disc {
    margin-bottom: 0;
}

/* process checklist: icon inline with its text */
.service-check-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 10px;
}

.service-check-list .single-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 12px;
}

.service-check-list .single-check i {
    margin-top: 4px;
    font-size: 15px;
    flex-shrink: 0;
}

.service-check-list .single-check p {
    flex: 1;
    margin: 0;
    line-height: 1.7;
}

/* download rows: keep icon, text and button on one line */
.single-download-area {
    display: flex;
    align-items: center;
    gap: 14px;
}

.single-download-area img {
    width: 34px;
    height: auto;
    flex-shrink: 0;
}

.single-download-area .mid {
    flex: 1;
}

.single-download-area .mid .title {
    font-size: 15px;
    margin-bottom: 2px;
}

/* sidebar contact card: the SVG logo has no intrinsic height, so the
   theme collapses it to 0×0 — give it an explicit size */
.rts-single-wized.contact .wized-header img {
    height: 46px;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* inline CTA at the end of a service page */
.service-cta-inline {
    background: var(--color-primary);
    border-radius: 14px;
    padding: 34px 36px;
    color: #fff;
}

.service-cta-inline h4 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 22px;
}

.service-cta-inline p {
    color: rgba(255, 255, 255, .70);
    margin-bottom: 22px;
    max-width: 56ch;
}

.service-cta-inline__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.service-cta-inline .rts-btn {
    background: #fff;
    color: var(--color-heading-1);
}

.service-cta-inline .rts-btn.btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
}

.service-cta-inline .rts-btn.btn-outline:hover {
    background: #fff;
    color: var(--color-heading-1);
}

/* breathing room between the service body and the sections that follow */
.rts-service-details-area-main-bottom {
    padding-bottom: 100px;
}

@media only screen and (max-width: 767px) {
    .rts-service-details-area-main-bottom {
        padding-bottom: 60px;
    }
}

/* ===========================================================
   Mobile header
   =========================================================== */

/* the theme hides .rts-btn.btn-primary inside .button-area below 575px,
   so the burger must not carry those classes — style it directly */
.header-main-one-wrapper .button-area #menu-btn {
    display: none;
    background: #F2F2F2;
    height: 52px;
    min-width: 52px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 14px;
    padding: 0;
}

.header-main-one-wrapper .button-area #menu-btn img {
    width: 22px;
    height: auto;
}

.header-main-one-wrapper .button-area #menu-btn .menu-light {
    display: none;
}

/* show the burger once the desktop nav is gone */
@media only screen and (max-width: 1199px) {
    .header-main-one-wrapper .button-area #menu-btn {
        display: flex;
    }
}

/* Hero on mobile: the theme lays a 45% white sheet over the banner
   (it was built for a light image). Ours is dark with its own gradient,
   so the sheet only fogs the picture — remove it. */
@media only screen and (max-width: 575px) {
    .banner-style-one::after {
        display: none !important;
    }
}

/* mobile drawer logo: use the client's mark, sized properly */
#side-bar .inner-content .logo-1 img,
#side-bar .thumbnail img {
    height: 48px;
    width: auto;
}

/* ===========================================================
   About section — mobile
   =========================================================== */

/* The "Confidential Handling" badge is absolutely positioned for the wide
   desktop layout. On a phone the photo shrinks but the badge does not, so it
   covered more than half the picture. Let it sit below the image instead. */
@media only screen and (max-width: 767px) {
    .thumbnail-about-and-progress-1 .progress-area-wrapper {
        position: static;
        transform: none;
        left: auto;
        bottom: auto;
        margin-top: 22px;
        padding: 22px 24px;
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .thumbnail-about-and-progress-1 .progress-area-wrapper .title {
        margin-top: 0;
        font-size: 17px;
    }

    /* the wrapper carries a desktop offset that pushes the badge off-screen */
    .thumbnail-about-and-progress-1 .progress-circle-main-wrapper {
        display: block;
        position: static;
        transform: none;
        inset: auto;
        margin: 0;
    }

    /* main.js runs a GSAP parallax that writes an inline translate3d(250px)
       on .images-r. That is fine on a wide screen but shoves the badge off a
       phone, so cancel the transform here. */
    .thumbnail-about-and-progress-1 .progress-area-wrapper.images-r {
        transform: none !important;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
    }

    /* keep the image column itself from inheriting desktop padding */
    .rts-about-area .col-lg-7.pl--70 {
        padding-left: 0 !important;
    }

    /* space between the About copy and the image that follows it */
    .rts-about-area .col-lg-7 {
        margin-top: 40px;
    }
}

/* ===========================================================
   Service pages — step cards on mobile
   =========================================================== */

/* The theme sets flex-wrap on these cards below 991px but leaves the
   children at their intrinsic widths with justify-content: space-between,
   so each row stops short and leaves dead space on the right.
   Stack them full-width instead. */
@media only screen and (max-width: 991px) {
    .single-step-service-details {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 16px;
    }

    .single-step-service-details>*,
    .single-step-service-details .thumbnail {
        width: 100%;
        max-width: 100%;
        /* theme caps .thumbnail at 231px */
        flex: 0 0 auto;
    }

    .single-step-service-details .thumbnail img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .single-step-service-details .feature {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 18px;
    }

    .single-step-service-details .feature p.single {
        margin: 0;
    }
}

@media only screen and (max-width: 479px) {
    .single-step-service-details .feature {
        grid-template-columns: 1fr;
    }
}

/* Service pages: the sidebar column carries mt_lg--60, which does not apply
   on phones — so once it stacks under the CTA the two blocks touch. */
@media only screen and (max-width: 1199px) {
    .rts-service-details-area-main-bottom .mt-service-shorter {
        margin-top: 50px;
    }
}

/* ===========================================================
   Home hero height
   =========================================================== */

/* The theme sets 850px, which dwarfs the 477px service banners.
   Match them on desktop; mobile already sizes to its content. */
@media only screen and (min-width: 576px) {
    .banner-style-one {
        /* client asked for a shorter hero so the next section is visible on
           first view; min-height keeps the copy from clipping when the
           headline wraps to three lines */
        min-height: 430px;
        height: auto;
        padding-top: 70px;
        padding-bottom: 70px;
        display: flex;
        align-items: center;
    }

    .banner-style-one .container {
        width: 100%;
    }

    .banner-style-one .banner-one-inner {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Keep the hero copy to a predictable number of lines so the banner holds
   its 477px height instead of growing when the headline wraps. */
@media only screen and (min-width: 576px) {
    .banner-style-one .banner-one-inner .title {
        font-size: 48px;
        line-height: 1.18;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 18px;
    }

    .banner-style-one .banner-one-inner .disc {
        max-width: 640px;
        margin-bottom: 26px;
    }
}

/* ===========================================================
   Video Consultation page
   =========================================================== */

/* The theme's process image has margin-left:50px and no max-width, so at
   ~90% zoom (or any narrow desktop) the 872px circle pushes past the
   container and causes a horizontal scrollbar. Cap it. */
/* The wrapper has no width of its own, so the 872px image stretched it
   past its 668px column and the circle spilled off-screen. Constrain the
   wrapper, and let the image fill it. */
.thumbnail-working-procss-one {
    max-width: 100%;
    /* GSAP seeds the zoomOut animation with transform: scale(1.5) and
       opacity 0. The scale makes the circle overflow its column — and it
       stays oversized if the tween never fires. Cancel the scale; the
       fade-in still runs. */
    transform: none !important;
    overflow: hidden;
    border-radius: 50%;
}

@media only screen and (max-width: 767px) {
    .thumbnail-working-procss-one {
        border-radius: 8px;
    }
}

.thumbnail-working-procss-one img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-left: 0;
}

/* intro image */
.vc-intro-thumb img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
}

/* platform icons: white outlines read correctly on the dark band */
.working-process-one .single-working-process-one .left .icon img {
    width: 52px;
    height: 52px;
}

.vc-intro-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.vc-intro-actions .btn-outline-dark {
    background: transparent;
    color: var(--color-heading-1);
    border: 1px solid #D7DBE0;
}

.vc-intro-actions .btn-outline-dark:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

@media only screen and (max-width: 991px) {
    .vc-intro-thumb {
        margin-bottom: 10px;
    }
}

/* ===========================================================
   Our Services grid
   =========================================================== */
.services-grid-card {
    background: #fff;
    border: 1px solid #EDEFF3;
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    transition: box-shadow .3s ease, transform .3s ease;
}

.services-grid-card:hover {
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
    transform: translateY(-4px);
}

.services-grid-card .thumbnail {
    display: block;
    overflow: hidden;
}

.services-grid-card .thumbnail img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.services-grid-card:hover .thumbnail img {
    transform: scale(1.06);
}

.services-grid-card .inner {
    padding: 26px 26px 30px;
}

.services-grid-card .title {
    font-size: 21px;
    margin-bottom: 12px;
    line-height: 1.35;
}

.services-grid-card .title a {
    color: var(--color-heading-1);
    transition: color .3s;
}

.services-grid-card:hover .title a {
    color: var(--color-primary);
}

.services-grid-card .disc {
    margin-bottom: 18px;
    font-size: 15px;
}

.services-grid-card .read-more {
    font-weight: 600;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.services-grid-card .read-more i {
    transition: transform .3s ease;
}

.services-grid-card:hover .read-more i {
    transform: translateX(4px);
}

/* ===========================================================
   Testimonials page
   =========================================================== */
.testimonial-page-card {
    background: #fff;
    border: 1px solid #EDEFF3;
    border-radius: 14px;
    padding: 32px 34px;
    height: 100%;
    position: relative;
    transition: box-shadow .3s ease;
}

.testimonial-page-card:hover {
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
}

.testimonial-page-card .review-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.testimonial-page-card .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: 21px;
    flex-shrink: 0;
}

.testimonial-page-card .discription {
    flex: 1;
}

.testimonial-page-card .title {
    margin-bottom: 4px;
    font-size: 18px;
}

.testimonial-page-card .star-icon i {
    color: #F0A500;
    font-size: 13px;
}

.testimonial-page-card .quote {
    color: var(--color-primary);
    opacity: .16;
    font-size: 34px;
}

.testimonial-page-card .disc {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.8;
}

@media only screen and (max-width: 767px) {
    .testimonial-page-card {
        padding: 26px 24px;
    }

    .services-grid-card .thumbnail img {
        height: 200px;
    }
}

/* ===========================================================
   Mutual consent process steps
   =========================================================== */
.process-step-card {
    background: #fff;
    border: 1px solid #EDEFF3;
    border-left: 3px solid var(--color-primary);
    border-radius: 12px;
    padding: 32px 34px;
    height: 100%;
    position: relative;
    transition: box-shadow .3s ease;
}

.process-step-card:hover {
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
}

.process-step-card .step-no {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.process-step-card .title {
    font-size: 20px;
    margin-bottom: 12px;
}

.process-step-card .disc {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.8;
}

.process-step-card .note {
    margin: 16px 0 0;
    padding: 14px 16px;
    background: #F6F7F9;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-body);
}

.process-step-card .note i {
    color: var(--color-primary);
    margin-right: 6px;
}

/* ===========================================================
   Virtual consultation — what to expect
   =========================================================== */
.expect-card {
    background: #fff;
    border-radius: 12px;
    padding: 34px 28px;
    height: 100%;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.expect-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
}

.expect-card .icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb, 28, 37, 57), .07);
    display: flex;
    align-items: center;
    justify-content: center;
}

.expect-card .icon i {
    font-size: 26px;
    color: var(--color-primary);
}

.expect-card .title {
    font-size: 18px;
    margin-bottom: 10px;
}

.expect-card .disc {
    margin-bottom: 0;
    font-size: 14.5px;
    line-height: 1.75;
}

/* ===========================================================
   Contact cards
   =========================================================== */
.contact-info-card {
    background: #fff;
    border: 1px solid #EDEFF3;
    border-radius: 12px;
    padding: 34px 30px;
    height: 100%;
    transition: box-shadow .3s ease;
}

.contact-info-card:hover {
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
}

.contact-info-card .icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 20px;
}

.contact-info-card .title {
    font-size: 18px;
    margin-bottom: 12px;
}

.contact-info-card .disc {
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 1.75;
}

.contact-info-card .disc a {
    color: var(--color-body);
}

.contact-info-card .disc a:hover {
    color: var(--color-primary);
}

/* ===========================================================
   FAQs page
   =========================================================== */
.faq-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EDEFF3;
}

.faq-group-head .title {
    margin-bottom: 0;
    font-size: 24px;
}

.faq-group-head .read-more {
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.faq-group-head .read-more i {
    transition: transform .3s ease;
}

.faq-group-head .read-more:hover i {
    transform: translateX(4px);
}

/* ===========================================================
   Blog listing
   =========================================================== */
.blog-list-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-list-card .thumbnail img {
    width: 100%;
    aspect-ratio: 16 / 9;
    /* matches how his featured images were authored */
    height: auto;
    object-fit: cover;
    display: block;
}

.blog-list-card .inner-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-list-card .title {
    font-size: 19px;
    line-height: 1.45;
    margin-bottom: 12px;
}

.blog-list-card .disc {
    font-size: 14.5px;
    line-height: 1.75;
    margin-bottom: 18px;
    flex: 1;
}

.blog-list-card .read-more {
    font-weight: 600;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.blog-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.blog-pagination .page-link {
    min-width: 46px;
    height: 46px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #EDEFF3;
    background: #fff;
    color: var(--color-heading-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all .3s ease;
}

.blog-pagination .page-link:hover,
.blog-pagination .page-link.is-current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ===========================================================
   Thank you
   =========================================================== */
.thankyou-card {
    background: #fff;
    border: 1px solid #EDEFF3;
    border-radius: 16px;
    padding: 60px 50px;
}

.thankyou-card .icon i {
    font-size: 62px;
    color: var(--color-primary);
}

.thankyou-card .title {
    margin: 22px 0 16px;
    font-size: 40px;
}

.thankyou-card .disc {
    max-width: 60ch;
    margin: 0 auto 14px;
}

.thankyou-card .thankyou-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.thankyou-card .btn-outline-dark {
    background: transparent;
    color: var(--color-heading-1);
    border: 1px solid #D7DBE0;
}

.thankyou-card .btn-outline-dark:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

@media only screen and (max-width: 767px) {
    .process-step-card {
        padding: 26px 24px;
    }

    .contact-info-card {
        padding: 28px 24px;
    }

    .thankyou-card {
        padding: 44px 24px;
    }

    .thankyou-card .title {
        font-size: 30px;
    }

    .faq-group-head .title {
        font-size: 21px;
    }
}

/* The theme overlays .inner-content on the image, which only works for a short
   title and no excerpt. The listing needs a normal stacked card, so undo it. */
.blog-list-card {
    background: #fff;
    border: 1px solid #EDEFF3;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .3s ease, transform .3s ease;
}

.blog-list-card:hover {
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
    transform: translateY(-4px);
}

.blog-list-card .thumbnail {
    border-radius: 0;
}

.blog-list-card .inner-content {
    position: static;
    left: auto;
    bottom: auto;
    padding: 24px 26px 28px;
}

.blog-list-card .inner-content * {
    color: inherit;
}

.blog-list-card .title {
    color: var(--color-heading-1);
    transition: color .3s ease;
}

.blog-list-card:hover .title {
    color: var(--color-primary);
}

.blog-list-card .disc {
    color: var(--color-body);
}

.blog-list-card .read-more i {
    transition: transform .3s ease;
}

.blog-list-card:hover .read-more i {
    transform: translateX(4px);
}

/* FAQ topic jump links */
.faq-jump-area {
    padding-top: 70px;
}

.faq-jump-lead {
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
    color: var(--color-body);
}

.faq-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.faq-jump a {
    padding: 9px 16px;
    border: 1px solid #EDEFF3;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-heading-1);
    transition: all .3s ease;
}

.faq-jump a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.faq-group {
    scroll-margin-top: 120px;
}

/* The theme's decorative watermark behind a section title is 150px with
   min-width:max-content, so on narrow columns it pushes past the viewport and
   creates a horizontal scrollbar. It is purely decorative, so clip it. */
.title-style-two {
    position: relative;
    overflow: hidden;
}

.title-style-two .bg-content {
    max-width: 100%;
    overflow: hidden;
    pointer-events: none;
}

@media only screen and (max-width: 767px) {
    .title-style-two .bg-content {
        font-size: 74px;
        left: -20px;
        top: -34px;
    }
}

/* ===========================================================
   Blog article
   =========================================================== */
.blog-article__thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin-bottom: 26px;
}

.blog-article__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14.5px;
    color: var(--color-body);
    padding-bottom: 22px;
    margin-bottom: 26px;
    border-bottom: 1px solid #EDEFF3;
}

.blog-article__meta i {
    color: var(--color-primary);
}

.blog-article__meta span {
    opacity: .4;
}

.blog-article .title {
    line-height: 1.35;
}

.blog-article h2.title {
    font-size: 28px;
}

.blog-article h3.title {
    font-size: 23px;
}

.blog-article h4.title {
    font-size: 20px;
}

.blog-article__quote {
    margin: 30px 0;
    padding: 22px 26px;
    border-left: 3px solid var(--color-primary);
    background: #F6F7F9;
    border-radius: 0 10px 10px 0;
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-heading-1);
}

/* previous / next article */
.post-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.post-pager__link {
    border: 1px solid #EDEFF3;
    border-radius: 12px;
    padding: 20px 22px;
    display: block;
    transition: box-shadow .3s ease, border-color .3s ease;
}

.post-pager__link:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
}

.post-pager__link span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.post-pager__link strong {
    display: block;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-heading-1);
    font-weight: 600;
}

.post-pager__link.next {
    text-align: right;
}

@media only screen and (max-width: 767px) {
    .post-pager {
        grid-template-columns: 1fr;
    }

    .post-pager__link.next {
        text-align: left;
    }

    .blog-article h2.title {
        font-size: 24px;
    }

    .blog-article h3.title {
        font-size: 20px;
    }
}

/* current item in the mobile drawer */
.mobile-menu-link.is-current {
    color: var(--color-primary);
    font-weight: 600;
}

/* ===========================================================
   Floating widgets — WhatsApp (left) and chat (right),
   matching the placement on his live site
   =========================================================== */
.wa-float {
    position: fixed;
    left: 25px;
    bottom: 25px;
    z-index: 99990;
}

.wa-float a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
    transition: transform .3s ease, box-shadow .3s ease;
}

.wa-float a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}

.wa-float__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

@media only screen and (max-width: 767px) {
    .wa-float {
        left: 16px;
        bottom: 16px;
    }

    .wa-float a {
        width: 52px;
        height: 52px;
    }
}

/* the theme's back-to-top sits bottom-right, where Tawk.to also renders its
   launcher — lift it clear so the two do not overlap */
.progress-wrap {
    bottom: 96px !important;
}

@media only screen and (max-width: 767px) {
    .progress-wrap {
        bottom: 80px !important;
    }
}

/* ===========================================================
   Font Awesome — woff2 only
   ===========================================================
   The theme's fontawesome.css lists a .ttf fallback beside each .woff2, but
   only the .woff2 files were shipped in assets/fonts/. The missing .ttf 404s,
   which makes the browser mark the whole @font-face as failed — so brand
   icons intermittently rendered as empty boxes. These redeclarations drop the
   .ttf source. Same family names and weights, so they simply take precedence.
   =========================================================== */
@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../fonts/fa-brands-400.woff2) format("woff2");
}

@font-face {
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(../fonts/fa-solid-900.woff2) format("woff2");
}

@font-face {
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../fonts/fa-regular-400.woff2) format("woff2");
}

@font-face {
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url(../fonts/fa-light-300.woff2) format("woff2");
}

/* the theme also references the Font Awesome 5 family names in places */
@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../fonts/fa-brands-400.woff2) format("woff2");
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(../fonts/fa-solid-900.woff2) format("woff2");
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../fonts/fa-regular-400.woff2) format("woff2");
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url(../fonts/fa-light-300.woff2) format("woff2");
}

/* ===========================================================
   CLIENT FEEDBACK — his own brand colour, compact header,
   tighter sections so the next one is visible on first view
   ===========================================================
   His live site uses a saffron/coral accent (#d54339, lighter #f55e45)
   on a white header, with the full nav in one compact strip.
   =========================================================== */
:root {
    /* The single orange, applied to brand elements only.
       This block is later in the file than the one above, so it is the one
       that actually governs the site; both are kept in step. */
    --brand: #F55E45;
    --brand-light: #F55E45;
    --brand-dark: #F55E45;
    --brand-deep: #F55E45;

    /* Buttons, icons, links, accents and coloured section backgrounds. */
    --color-primary: #F55E45;
    --color-secondary: #F55E45;
    --bg-dark-1: #F55E45;

    /* Headings keep a dark tone: only brand elements take the orange. */
    --ink: #3a2b28;

    /* Text colours are deliberately left alone. */
    --color-heading-1: #8f2a22;
    --color-title: #8f2a22;
    --color-heading-dark: #8f2a22;
    --color-body: #6b4a46;
}

/* --- accent: the few places that hardcode a dark value ------------------ */
.service-cta-inline,
.contact-info-card .icon,
.testimonial-page-card .avatar,
.blog-pagination .page-link:hover,
.blog-pagination .page-link.is-current,
.faq-jump a:hover,
.rts-single-wized.contact.service {
    background: var(--brand);
    border-color: var(--brand);
}

.rts-btn.btn-primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

.services-grid-card:hover .title a,
.services-grid-card .read-more,
.blog-list-card:hover .title,
.blog-list-card .read-more,
.faq-group-head .read-more,
.process-step-card .step-no,
.process-step-card .note i,
.expect-card .icon i,
.title-style-one .pre,
.title-style-four .pre,
.thankyou-card .icon i,
.blog-article__meta i,
.contact-info-card .disc a:hover {
    color: var(--brand);
}

.process-step-card {
    border-left-color: var(--brand);
}

.blog-article__quote {
    border-left-color: var(--brand);
}

.testimonial-page-card .quote {
    color: var(--brand);
}

/* keep white-on-saffron buttons readable inside the dark CTA block */
.service-cta-inline .rts-btn {
    background: #fff;
    color: var(--brand);
}

.service-cta-inline .rts-btn.btn-outline {
    background: transparent;
    color: #fff;
}

.service-cta-inline .rts-btn.btn-outline:hover {
    background: #fff;
    color: var(--brand);
}

/* --- header: smaller logo, smaller links, all nine fit in one row ------- */
.header-main-one-wrapper .thumbnail img {
    max-height: 40px;
    width: auto;
}

/* the nav must not wrap: keep it one line and let it take the space it needs */
.header-main-one-wrapper {
    gap: 14px;
}

.header-main .nav-area {
    flex: 1 1 auto;
    min-width: 0;
}

.header-main .nav-area>ul {
    gap: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.header-main .nav-area>ul>li.main-nav {
    white-space: nowrap;
    flex: 0 0 auto;
}

.header-main .nav-area>ul>li.main-nav>a {
    font-size: 14px;
    padding: 0 9px;
    white-space: nowrap;
}

.header-main-one-wrapper .thumbnail,
.header-main-one-wrapper .button-area {
    flex: 0 0 auto;
}

/* the theme's .main-header is a fixed-width flex row; with nine links the
   button was pushed past the viewport, so let the row share space properly */
.header-main-one-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
}

.header-main .container {
    max-width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

@media only screen and (max-width: 1500px) {
    .header-main .nav-area>ul>li.main-nav>a {
        font-size: 13.5px;
        padding: 0 7px;
    }

    .header-main-one-wrapper .button-area .header-one-btn {
        font-size: 13px;
        padding: 11px 16px;
    }
}

.header-main .nav-area>ul>li.main-nav.is-current>a {
    color: var(--brand);
}

.header-main .nav-area>ul>li.main-nav>a:hover {
    color: var(--brand);
}

.header-main-one-wrapper .button-area .header-one-btn {
    font-size: 14px;
    padding: 12px 20px;
}

.header-main {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* plain dropdown for Location, matching the mega-menu treatment */
.header-main .nav-area>ul>li.has-dropdown {
    position: relative;
}

.header-main .nav-area>ul>li.has-dropdown>ul.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(28, 37, 57, .07);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .3s ease;
    z-index: 100;
}

.header-main .nav-area>ul>li.has-dropdown:hover>ul.submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-main .nav-area>ul>li.has-dropdown>ul.submenu>li>a {
    display: block;
    padding: 9px 20px;
    font-size: 15px;
    color: var(--color-heading-1);
}

.header-main .nav-area>ul>li.has-dropdown>ul.submenu>li>a:hover {
    color: var(--brand);
}

/* Between 992px and 1399px nine links plus the button no longer fit, so the
   nav collapses to the burger menu, which already carries the whole menu. */
@media only screen and (max-width: 1399px) {
    .header-main .nav-area {
        display: none;
    }

    .header-main-one-wrapper .button-area #menu-btn {
        display: flex;
    }
}

/* --- shorter hero + tighter sections, so section two peeks above the fold */
/* hero height itself is set in the "Home hero height" block above */
.rts-section-gap {
    padding-top: 70px;
    padding-bottom: 70px;
}

.rts-section-gapTop {
    padding-top: 70px;
}

.rts-section-gapBottom {
    padding-bottom: 70px;
}

@media only screen and (max-width: 991px) {
    .rts-section-gap {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .rts-section-gapTop {
        padding-top: 55px;
    }

    .rts-section-gapBottom {
        padding-bottom: 55px;
    }
}

@media only screen and (max-width: 767px) {
    .banner-style-one {
        min-height: 0;
        height: auto;
        padding-top: 54px;
        padding-bottom: 54px;
    }

    /* the theme pads this inner block by 160px/190px, which is what actually
       made the mobile hero taller than the screen */
    .banner-style-one .banner-one-inner {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .banner-style-one .banner-one-inner .title {
        font-size: 30px;
        line-height: 1.25;
        margin-bottom: 14px;
    }

    .banner-style-one .banner-one-inner .disc {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .rts-section-gap {
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .rts-section-gapTop {
        padding-top: 45px;
    }

    .rts-section-gapBottom {
        padding-bottom: 45px;
    }
}

/* ===========================================================
   FULL SAFFRON THEME
   ===========================================================
   The theme hardcodes its near-blacks in ~150 places that the CSS variables
   above do not reach — dark section bands, the hero overlay, the footer, the
   top bar, dark cards and buttons. These rules repaint all of them so nothing
   is left black.
   =========================================================== */

/* --- dark section bands and blocks ------------------------------------- */
.bg-dark-1,
.bg-black-content,
.bg-main,
.rts-footer-area,
.header-top-area,
.header-top,
.rts-appoinment-area .appointment-side,
.rts-single-wized.contact.service,
.service-cta-inline,
.working-process-one.bg-main,
.rts-client-review-two.bg-black-content {
    background-color: var(--brand) !important;
}

/* --- the top utility bar (the theme calls it header-top-*-wrapper) ------ */
.header-top-area-wrapper,
.header-top-one-wrapper,
.header-top-area,
.rts-header-top-one,
.header-top-one {
    background: var(--brand-deep) !important;
}

.header-top-area-wrapper a,
.header-top-area-wrapper p,
.header-top-area-wrapper i,
.header-top-one-wrapper a,
.header-top-one-wrapper p,
.header-top-one-wrapper i {
    color: #fff !important;
}

.header-top-area-wrapper a:hover,
.header-top-one-wrapper a:hover {
    color: #ffd9d4 !important;
}

/* --- his saffron nav strip, as on his live site ------------------------- */
.header-main {
    background: var(--brand) !important;
}

.header-main .nav-area>ul>li.main-nav>a {
    color: #fff !important;
}

.header-main .nav-area>ul>li.main-nav>a:hover,
.header-main .nav-area>ul>li.main-nav.is-current>a {
    color: #ffe3df !important;
}

/* the logo sits on the saffron strip, so give it a white plate */
.header-main-one-wrapper .thumbnail {
    background: #fff;
    padding: 8px 16px;
    border-radius: 8px;
}

.header-main-one-wrapper .button-area .header-one-btn {
    background: #fff !important;
    color: var(--brand) !important;
    border-color: #fff !important;
}

.header-main-one-wrapper .button-area .header-one-btn:hover {
    background: var(--brand-deep) !important;
    color: #fff !important;
    border-color: var(--brand-deep) !important;
}

.header-main-one-wrapper .button-area #menu-btn {
    background: #fff;
}

/* --- footer ------------------------------------------------------------- */
/* the theme's .footer-bg-two paints a light grey, which beat the rule below
   and left white text on near-white; name it explicitly so saffron wins */
.rts-footer-area.footer-bg-two,
.footer-bg-two,
.rts-footer-area,
.rts-footer-area .footer-col__title,
.rts-footer-area p,
.rts-footer-area a,
.rts-footer-area li,
.rts-footer-area strong,
.rts-footer-area span {
    color: #fff !important;
}

.rts-footer-area a:hover {
    color: #ffd9d4 !important;
}

.rts-footer-area .footer-social a,
.rts-footer-area .footer-links i {
    color: #fff !important;
}

.rts-footer-area .footer-social a {
    background: rgba(255, 255, 255, .14);
}

.rts-footer-area .footer-social a:hover {
    background: #fff;
}

.rts-footer-area .footer-social a:hover i {
    color: var(--brand) !important;
}

.copyright-area,
.rts-copyright-area {
    background: var(--brand-deep) !important;
}

.copyright-area p,
.rts-copyright-area p {
    color: #fff !important;
}

/* --- headings and body type -------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.title-f {
    color: var(--ink);
}

/* on saffron or dark backgrounds they must stay white */
.bg-main h1,
.bg-main h2,
.bg-main h3,
.bg-main h4,
.bg-main h5,
.bg-main h6,
.bg-main .title,
.bg-main p,
.bg-main .disc,
.bg-black-content h2,
.bg-black-content .title,
.bg-black-content p,
.service-cta-inline h4,
.service-cta-inline p,
.rts-footer-area h5,
.banner-style-one .title,
.banner-style-one .disc,
.banner-style-one .pre,
.breadcrumb-service-detals-one .title,
.breadcrumb-service-detals-one .disc,
.breadcrumb-service-detals-one .bg-title,
.appointment-side h4,
.appointment-side strong,
.appointment-side p,
.rts-single-wized.contact.service .title {
    color: #fff !important;
}

/* --- buttons ------------------------------------------------------------ */
.rts-btn.btn-primary {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

.rts-btn.btn-primary:hover {
    background: var(--brand-deep) !important;
    border-color: var(--brand-deep) !important;
    color: #fff !important;
}

.rts-btn.btn-primary.btn-white,
.service-cta-inline .rts-btn {
    background: #fff !important;
    color: var(--brand) !important;
    border-color: #fff !important;
}

.rts-btn.btn-primary.btn-white:hover,
.service-cta-inline .rts-btn:hover {
    background: var(--brand-deep) !important;
    color: #fff !important;
    border-color: var(--brand-deep) !important;
}

.service-cta-inline .rts-btn.btn-outline {
    background: transparent !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .55) !important;
}

.service-cta-inline .rts-btn.btn-outline:hover {
    background: #fff !important;
    color: var(--brand) !important;
}

/* --- icons, accents and small type -------------------------------------- */
.single-service-style-three .icon i,
.sticky-statement .icon i,
.expect-card .icon i,
.process-step-card .step-no,
.process-step-card .note i,
.blog-article__meta i,
.services-grid-card .read-more,
.blog-list-card .read-more,
.faq-group-head .read-more,
.single-check i,
.check-wrapper-area i,
.contact-info-card .disc a:hover,
.title-style-one .pre,
.title-style-two .pre,
.title-style-three .pre,
.title-style-four .pre {
    color: var(--brand) !important;
}

.contact-info-card .icon,
.testimonial-page-card .avatar,
.appointment-side__list .ico {
    background: var(--brand) !important;
}

.process-step-card {
    border-left-color: var(--brand) !important;
}

.blog-article__quote {
    border-left-color: var(--brand) !important;
}

.footer-col__title::after,
.title-style-four .pre::before {
    background: var(--brand) !important;
}

/* the sidebar services widget on service pages */
.rts-single-wized.Categories.service .wized-header {
    background: var(--brand) !important;
}

.rts-single-wized.Categories.service .wized-header .title {
    color: #fff !important;
}

.rts-single-wized .single-categories li.is-current a {
    background: var(--brand) !important;
    color: #fff !important;
}

/* inner page banners: tint the dark overlay saffron */
.breadcrumb-service-detals-one .banner-inner-service-details-1::before {
    background: linear-gradient(180deg, rgba(143, 42, 34, .72) 0%, rgba(143, 42, 34, .80) 100%);
}

/* --- pagination, FAQ chips, misc --------------------------------------- */
.blog-pagination .page-link:hover,
.blog-pagination .page-link.is-current,
.faq-jump a:hover {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

.accordion-button:not(.collapsed) {
    color: var(--brand) !important;
}

.odometer,
.counter-about-area {
    color: var(--brand) !important;
}

/* --- the last dark bands: shapes and dark background images ------------- */
/* these sections use dark artwork rather than a colour, so tint them */
.black-shape {
    background: var(--brand-deep) !important;
}

/* the testimonials band ships dark artwork; lay saffron over it */
.bg-client-r-h2 {
    position: relative;
    background-color: var(--brand) !important;
    isolation: isolate;
}

.bg-client-r-h2::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brand);
    opacity: .92;
    z-index: -1;
}

.rts-cta-area,
.rts-cta-area.bg_image,
.cta-bg {
    background-color: var(--brand) !important;
    background-blend-mode: multiply;
}

/* the appointment panel and any other dark inline block */
.appointment-side {
    background: var(--brand) !important;
}

.appointment-side__map iframe {
    border-radius: 8px;
}

/* step-card arrows were solid black squares */
.sticky-statement .right .arrow,
.single-step-service-details .arrow,
a.arrow {
    background: var(--brand) !important;
    color: #fff !important;
}

a.arrow:hover {
    background: var(--brand-deep) !important;
}

/* review cards sit on the saffron band: keep them white and readable */
.rts-client-reviews-h2 {
    background: #fff !important;
}

.rts-client-reviews-h2 .title,
.rts-client-reviews-h2 .disc {
    color: var(--ink) !important;
}

.rts-client-reviews-h2 span {
    color: #fff !important;
}


/* footer sits on saffron now, so use the white logo and lighten the divider */
.rts-footer-area .footer-logo img {
    filter: brightness(0) invert(1);
}

.rts-footer-area .footer-col__title::after {
    background: #fff !important;
}

.rts-footer-area .footer-col__disc {
    color: rgba(255, 255, 255, .88) !important;
}

.rts-footer-area .appointment-side__list .ico,
.rts-footer-area .footer-contact .ico {
    background: rgba(255, 255, 255, .16) !important;
}

.rts-footer-area .footer-contact strong {
    color: #fff !important;
}

/* the theme lays a light footer graphic over the background colour, which hid
   the saffron and left white text on near-white — drop the image */
.rts-footer-area,
.rts-footer-area.footer-bg-two,
.footer-bg-two {
    background-image: none !important;
}

/* ===========================================================
   Consultation popup (his own, from Popup Maker id 1546)
   =========================================================== */
.consult-pop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .3s ease;
}

.consult-pop.is-open {
    opacity: 1;
}

.consult-pop[hidden] {
    display: none;
}

.consult-pop__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 18, 16, .66);
    backdrop-filter: blur(2px);
}

.consult-pop__box {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: #fff;
    border: 3px solid var(--brand);
    border-radius: 14px;
    padding: 40px 44px 36px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
    transform: translateY(16px) scale(.98);
    transition: transform .34s cubic-bezier(.2, .9, .3, 1);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.consult-pop.is-open .consult-pop__box {
    transform: translateY(0) scale(1);
}

.consult-pop__close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--ink);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
    transition: background .25s ease, color .25s ease;
}

.consult-pop__close:hover {
    background: var(--brand);
    color: #fff;
}

.consult-pop__title {
    font-size: 36px;
    line-height: 1.2;
    margin: 0 0 16px;
    color: var(--ink) !important;
}

.consult-pop__lead {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-heading-1);
    margin-bottom: 12px;
}

.consult-pop__text {
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-body);
    margin-bottom: 26px;
}

.consult-pop__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.consult-pop__btn {
    flex: 1 1 210px;
    text-align: center;
    padding: 15px 22px;
    border-radius: 8px;
    background: var(--brand);
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background .25s ease, transform .25s ease;
}

.consult-pop__btn:hover {
    background: var(--brand-deep);
    transform: translateY(-2px);
}

@media only screen and (max-width: 575px) {
    .consult-pop__box {
        padding: 32px 22px 26px;
    }

    .consult-pop__title {
        font-size: 28px;
    }

    .consult-pop__close {
        top: -14px;
        right: -6px;
        width: 38px;
        height: 38px;
    }

    .consult-pop__btn {
        flex: 1 1 100%;
    }
}

/* --- service page sidebar widgets -------------------------------------- */
.rts-single-wized.Categories.service,
.rts-single-wized.download.service,
.rts-single-wized.contact.service {
    background: var(--brand) !important;
}

.rts-single-wized .wized-header .title,
.rts-single-wized .wized-body .title,
.rts-single-wized .single-download-area .title,
.rts-single-wized .single-download-area span {
    color: #fff !important;
}

.rts-single-wized .single-categories li a {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
}

.rts-single-wized .single-categories li a:hover,
.rts-single-wized .single-categories li.is-current a {
    background: #fff !important;
    color: var(--brand) !important;
}

.rts-single-wized .single-download-area {
    background: rgba(255, 255, 255, .12) !important;
}

.rts-single-wized .single-download-area .rts-btn {
    background: #fff !important;
    color: var(--brand) !important;
}

/* ===========================================================
   CLIENT FEEDBACK — contrast fixes on the saffron
   ===========================================================
   Anything sitting on a saffron panel must be white: the theme's muted greys
   and the body colour disappear against it.
   =========================================================== */

/* the very bottom copyright bar was still white */
.rts-copy-right-1,
.copyright-h-2-wrapper,
.rts-copy-right-1 .container {
    background: var(--brand-deep) !important;
}

.rts-copy-right-1 .disc,
.rts-copy-right-1 p,
.rts-copy-right-1 a,
.copyright-h-2-wrapper .disc,
.copyright-h-2-wrapper p {
    color: #fff !important;
}

/* small labels in the footer and other saffron panels were grey on orange */
.rts-footer-area .footer-contact span,
.rts-footer-area .appointment-side__list span,
.rts-footer-area small,
.rts-footer-area .disc,
.appointment-side span,
.appointment-side small,
.appointment-side p,
.appointment-side a,
.rts-single-wized span,
.rts-single-wized .disc,
.bg-main span,
.bg-main small,
.service-cta-inline span {
    color: rgba(255, 255, 255, .92) !important;
}

/* eyebrow labels sitting on saffron */
.bg-main .pre,
.bg-client-r-h2 .pre,
.service-cta-inline .pre,
.rts-client-review-two .pre {
    color: #fff !important;
}

/* the muted "Client Testimonials" label and headings over the saffron band */
.bg-client-r-h2 .title-style-three .pre,
.bg-client-r-h2 .title-style-three .title,
.rts-client-review-two .title-style-three .pre,
.rts-client-review-two .title-style-three .title {
    color: #fff !important;
}

/* decorative watermark numbers are gone from the markup; hide any that remain */
.bg-title:not(span) {
    display: none !important;
}

/* --- booking form: honeypot and inline result message ------------------ */
/* off-screen rather than display:none — some bots skip hidden inputs */
.ap-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ap-note {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid;
}

.ap-note--ok {
    background: #e8f5ee;
    border-color: #bfe3cf;
    color: #1e5c39;
}

.ap-note--err {
    background: #fdece9;
    border-color: #f3c6c0;
    color: #8f2a22;
}

/* ===========================================================
   AI chat widget (replaces the third-party Tawk.to bubble)
   =========================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.chat-fab {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 99991;
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 18px rgba(143, 42, 34, .07);
    transition: transform .25s ease, background .25s ease;
}

.chat-fab:hover {
    transform: translateY(-3px);
    background: var(--brand-deep);
}

.chat-fab svg {
    width: 26px;
    height: 26px;
    grid-area: 1 / 1;
    transition: opacity .2s, transform .2s;
}

.chat-fab__close {
    opacity: 0;
    transform: rotate(-45deg);
}

.chat-fab.is-open .chat-fab__open {
    opacity: 0;
    transform: rotate(45deg);
}

.chat-fab.is-open .chat-fab__close {
    opacity: 1;
    transform: none;
}

/* gentle attention pulse, stopped once opened */
.chat-fab__ping {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--brand);
    animation: chatPing 2.6s cubic-bezier(.2, .8, .4, 1) infinite;
}

.chat-fab.is-open .chat-fab__ping {
    display: none;
}

@keyframes chatPing {
    0% {
        transform: scale(1);
        opacity: .7;
    }

    70%,
    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-fab__ping {
        animation: none;
    }
}

.chat-panel {
    position: fixed;
    right: 25px;
    bottom: 98px;
    z-index: 99992;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 540px;
    max-height: calc(100vh - 130px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(28, 18, 16, .07);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(.97);
    transform-origin: bottom right;
    transition: opacity .24s ease, transform .24s cubic-bezier(.2, .9, .3, 1);
}

.chat-panel.is-open {
    opacity: 1;
    transform: none;
}

.chat-panel[hidden] {
    display: none;
}

.chat-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--brand);
    color: #fff;
}

.chat-panel__id {
    display: flex;
    align-items: center;
    gap: 11px;
}

.chat-panel__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--brand);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .4px;
}

.chat-panel__id strong {
    display: block;
    font-size: 15px;
    line-height: 1.25;
    color: #fff;
}

.chat-panel__id small {
    font-size: 12px;
    opacity: .85;
}

.chat-panel__x {
    border: none;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s;
}

.chat-panel__x:hover {
    background: rgba(255, 255, 255, .3);
}

.chat-panel__x svg {
    width: 15px;
    height: 15px;
}

.chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 18px 16px;
    background: #faf7f6;
    display: flex;
    flex-direction: column;
    gap: 11px;
    overscroll-behavior: contain;
}

.chat-msg {
    display: flex;
}

.chat-msg--me {
    justify-content: flex-end;
}

.chat-bubble {
    max-width: 84%;
    padding: 11px 14px;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.62;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.chat-msg--bot .chat-bubble {
    background: #fff;
    color: var(--ink, #2a1b19);
    border: 1px solid #efe2e0;
    border-bottom-left-radius: 5px;
}

.chat-msg--me .chat-bubble {
    background: var(--brand);
    color: #fff;
    border-bottom-right-radius: 5px;
}

.chat-typing .chat-bubble {
    display: flex;
    gap: 5px;
    padding: 15px 16px;
}

.chat-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
    opacity: .45;
    animation: chatDot 1.3s infinite;
}

.chat-typing span:nth-child(2) {
    animation-delay: .18s;
}

.chat-typing span:nth-child(3) {
    animation-delay: .36s;
}

@keyframes chatDot {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: .35;
    }

    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

.chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 4px;
}

.chat-chips button {
    border: 1px solid #e7d6d3;
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: 7px 13px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s;
}

.chat-chips button:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.chat-form {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding: 11px 12px;
    background: #fff;
    border-top: 1px solid #efe2e0;
}

.chat-form textarea {
    flex: 1;
    border: 1px solid #e7d6d3;
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14.5px;
    resize: none;
    max-height: 120px;
    line-height: 1.5;
    color: var(--ink, #2a1b19);
}

.chat-form textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(213, 67, 57, .07);
}

#chatSend {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s;
}

#chatSend:hover:not(:disabled) {
    background: var(--brand-deep);
}

#chatSend:disabled {
    opacity: .5;
    cursor: default;
}

#chatSend svg {
    width: 19px;
    height: 19px;
}

.chat-foot {
    margin: 0;
    padding: 9px 14px;
    background: #fff;
    border-top: 1px solid #f3eae9;
    font-size: 11.5px;
    color: #8a7a78;
    text-align: center;
}

.chat-foot a {
    color: var(--brand);
    font-weight: 600;
}

@media only screen and (max-width: 575px) {
    .chat-fab {
        right: 16px;
        bottom: 16px;
        width: 54px;
        height: 54px;
    }

    .chat-panel {
        right: 10px;
        left: 10px;
        bottom: 82px;
        width: auto;
        height: calc(100vh - 150px);
    }
}

/* chat bubbles carry light markdown structure */
.chat-bubble p {
    margin: 0 0 9px;
}

.chat-bubble p:last-child {
    margin-bottom: 0;
}

.chat-bubble ul,
.chat-bubble ol {
    margin: 0 0 9px;
    padding-left: 20px;
}

.chat-bubble ul:last-child,
.chat-bubble ol:last-child {
    margin-bottom: 0;
}

.chat-bubble li {
    margin-bottom: 4px;
}

.chat-bubble strong {
    font-weight: 700;
}

.chat-msg--bot .chat-bubble {
    white-space: normal;
}

/* ===========================================================
   CLIENT FEEDBACK — round 7
   =========================================================== */

/* --- 1. consultation popup: wider, compact, no scrollbar, visible X ----- */
.consult-pop__box {
    max-width: 680px;
    padding: 34px 38px 30px;
    /* the fixed max-height forced an inner scrollbar; let it size to content */
    max-height: none;
    overflow: visible;
}

.consult-pop__title {
    font-size: 28px;
    margin-bottom: 12px;
}

.consult-pop__lead {
    font-size: 16px;
    margin-bottom: 10px;
}

.consult-pop__text {
    font-size: 14.5px;
    line-height: 1.7;
    margin-bottom: 22px;
}

.consult-pop__actions {
    gap: 12px;
}

.consult-pop__btn {
    padding: 13px 18px;
    font-size: 13.5px;
}

/* the close button sat half outside the card and was clipped — bring it in */
.consult-pop__close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    font-size: 22px;
    background: var(--brand);
    color: #fff;
    box-shadow: none;
    z-index: 2;
}

.consult-pop__close:hover {
    background: var(--brand-deep);
    color: #fff;
}

@media only screen and (max-width: 575px) {
    .consult-pop__box {
        padding: 30px 20px 24px;
    }

    .consult-pop__title {
        font-size: 24px;
    }
}

/* --- 2. hero: headline on one line, smaller, tighter --------------------- */
@media only screen and (min-width: 992px) {
    .banner-style-one .banner-one-inner .title {
        font-size: 46px;
        line-height: 1.18;
        white-space: nowrap;
        /* "Best Divorce Lawyer in Ahmedabad" on one line */
        margin-bottom: 14px;
    }

    .banner-style-one .banner-one-inner .disc {
        font-size: 15.5px;
        line-height: 1.7;
        max-width: 780px;
        /* wide enough to wrap to two lines */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 22px;
    }

    .banner-style-one .banner-one-inner .pre {
        margin-bottom: 10px;
    }

    /* Short enough that the next section is still visible on load, but tall
       enough for the Supreme Court building to read as a building: at 329px
       the dome was cropped out entirely. */
    .banner-style-one {
        padding-top: 64px;
        padding-bottom: 64px;
        min-height: 440px;
    }
}

@media only screen and (max-width: 1199px) and (min-width: 992px) {
    .banner-style-one .banner-one-inner .title {
        font-size: 38px;
    }
}

/* --- 3. less space above the "About the Advocate" section --------------- */
.rts-about-area-two,
.banner-style-one+div,
.banner-style-one+section {
    padding-top: 42px;
}

/* --- 4. testimonial names and roles in white on the saffron band -------- */
.bg-client-r-h2 .rts-client-reviews-h2 .title,
.bg-client-r-h2 .rts-client-reviews-h2 .discription span,
.rts-client-review-two .rts-client-reviews-h2 .title,
.rts-client-review-two .rts-client-reviews-h2 .discription span {
    color: var(--ink) !important;
}

/* the heading row above the cards sits directly on saffron */
.rts-client-review-two .title-style-three .title,
.rts-client-review-two .title-style-three .pre,
.bg-client-r-h2 .title-style-three .title,
.bg-client-r-h2 .title-style-three .pre {
    color: #fff !important;
}

/* --- 5. nav hover: text was disappearing, and arrows bled onto the menu -- */
.header-main .nav-area>ul>li.main-nav>a {
    position: relative;
    transition: color .25s ease;
}

/* the theme animates a duplicate label on hover, which reads as the text
   vanishing against saffron — disable it and use a plain colour change */
.header-main .nav-area>ul>li.main-nav>a::before,
.header-main .nav-area>ul>li.main-nav>a::after {
    display: none !important;
}

.header-main .nav-area>ul>li.main-nav>a span,
.header-main .nav-area>ul>li.main-nav>a div {
    transform: none !important;
    opacity: 1 !important;
}

.header-main .nav-area>ul>li.main-nav>a:hover {
    color: #ffe3df !important;
}

/* keep the mega menu clear of the floating widgets and scroll arrows */
.header-main .rts-mega-menu {
    z-index: 120;
}

.chat-fab,
.wa-float {
    z-index: 99991;
}

.progress-wrap {
    z-index: 90 !important;
}

/* --- 6. two phone numbers in the top bar -------------------------------- */
.header-top-one-wrapper .left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.top-phone__city {
    display: inline-block;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
    margin-right: 5px;
}

@media only screen and (max-width: 991px) {
    .top-phone:nth-of-type(2) {
        display: none;
    }

    /* one number is enough on phones */
}

/* --- 7. centre the nav on the page -------------------------------------- */
/* The logo (284px) and the button (184px) are different widths, so an even
   flex split still leaves the nav off-centre. Take it out of the flow and
   pin it to the middle of the header instead. */
@media only screen and (min-width: 1400px) {

    /* the nav is taken out of the flow below, so the row needs its own height
       or the header collapses to the logo's size */
    .header-main-one-wrapper {
        position: relative;
        min-height: 64px;
    }

    .header-main .nav-area {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        flex: 0 0 auto;
    }

    .header-main .nav-area>ul {
        justify-content: center;
    }

    /* keep the logo and button on their own edges */
    .header-main-one-wrapper .thumbnail {
        flex: 0 0 auto;
        margin-right: auto;
    }

    .header-main-one-wrapper .button-area {
        flex: 0 0 auto;
        margin-left: auto;
    }
}


/* the attention ring scales to 1.7x, which pushed past the right edge on a
   phone; clip it to the button's own box */
.chat-fab {
    overflow: hidden;
}

.chat-fab__ping {
    inset: 2px;
}
/* --- button hover fix ---------------------------------------------------
 * The theme slides a near-white circle (::before) across .btn-primary on
 * hover and recolours the label. Our saffron override keeps the label white,
 * so the text vanished against that wash. Repaint the wash saffron instead. */
.rts-btn.btn-primary::before {
    background: var(--brand-deep) !important;
}

.rts-btn.btn-primary:hover {
    background: var(--brand-deep) !important;
    color: #fff !important;
}

/* White-on-saffron buttons invert: the wash is white, so the label goes saffron. */
.rts-btn.btn-primary.btn-white::before {
    background: #fff !important;
}

.rts-btn.btn-primary.btn-white:hover,
.rts-btn.btn-primary.btn-white:hover i {
    background: #fff !important;
    color: var(--brand) !important;
}

/* The outlined CTA sits on the saffron band: its wash is white, label saffron. */
.service-cta-inline .rts-btn.btn-outline::before {
    background: #fff !important;
}

.service-cta-inline .rts-btn.btn-outline:hover,
.service-cta-inline .rts-btn.btn-outline:hover i {
    color: var(--brand) !important;
}

/* The solid CTA inverts the same way. */
.service-cta-inline .rts-btn:not(.btn-outline)::before {
    background: var(--brand-deep) !important;
}

.service-cta-inline .rts-btn:not(.btn-outline):hover,
.service-cta-inline .rts-btn:not(.btn-outline):hover i {
    color: #fff !important;
}

/* --- chat: sources for a web-grounded answer ---------------------------- */
.chat-src {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 6px 0 0 2px;
    max-width: 85%;
}

.chat-src__lbl {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #8a7b78;
    text-transform: uppercase;
}

.chat-src__item {
    font-size: 11.5px;
    line-height: 1.3;
    padding: 3px 8px;
    border-radius: 20px;
    background: #f5eeec;
    border: 1px solid #e7d9d5;
    color: var(--ink);
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.chat-src__item:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* --- single-colour hover ------------------------------------------------
 * Every brand variable now resolves to the same orange, so a hover that
 * swapped to a darker shade would no longer be visible. Instead the element
 * dims very slightly on hover: the colour stays exactly #F55E45, and the
 * feedback comes from brightness rather than a second shade. */
.rts-btn.btn-primary:hover,
.rts-btn.btn-primary::before,
.rts-btn.btn-primary:hover::before {
    filter: brightness(.93);
}

.rts-btn.btn-primary.btn-white:hover,
.service-cta-inline .rts-btn.btn-outline:hover {
    filter: none;              /* these invert to white; dimming would muddy them */
}

/* --- Bar Council disclaimer gate ----------------------------------------
 * Hidden by default so it never flashes for a returning visitor; the class
 * on <html> is set in the head before paint, only when it is needed. */
.dc-overlay,
.dc-popup {
    display: none;
}

.show-disclaimer .dc-overlay,
.show-disclaimer .dc-popup {
    display: block;
}

.dc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 18, 16, .62);
    backdrop-filter: blur(2px);
    z-index: 99998;
}

.dc-popup {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 760px;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 18px rgba(28, 37, 57, .07);
    z-index: 99999;
    animation: dcUp .32s cubic-bezier(.22, .9, .3, 1);
    max-height: 92vh;
    overflow-y: auto;
}

@keyframes dcUp {
    from { transform: translate(-50%, 100%); }
    to   { transform: translate(-50%, 0); }
}

.dc-popup__inner {
    padding: 26px 30px 24px;
}

.dc-popup__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.dc-popup__mark {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.dc-popup__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink);
}

.dc-popup__intro,
.dc-popup__more p {
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.68;
    color: var(--color-body);
}

.dc-popup__more {
    border-top: 1px solid #efe6e4;
    margin-top: 12px;
    padding-top: 12px;
}

.dc-popup__more strong {
    color: var(--ink);
}

.dc-popup__toggle {
    background: none;
    border: 0;
    padding: 0;
    margin: 2px 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The tick box gates the Agree button, so accepting is a deliberate act. */
.dc-popup__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    background: #fdf6f4;
    border: 1px solid #f4ded8;
    border-radius: 10px;
    margin-bottom: 16px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-body);
}

.dc-popup__check input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: 0 0 18px;
    accent-color: var(--brand);
    cursor: pointer;
}

.dc-popup__check a {
    color: var(--brand);
    font-weight: 600;
}

.dc-popup__actions {
    display: flex;
    gap: 10px;
}

.dc-popup__btn {
    flex: 1;
    padding: 13px 18px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter .2s ease, background .2s ease;
}

.dc-popup__btn--agree {
    background: var(--brand);
    color: #fff;
}

.dc-popup__btn--agree:hover:not(:disabled) {
    filter: brightness(.93);
}

.dc-popup__btn--agree:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.dc-popup__btn--decline {
    background: #fff;
    color: var(--color-body);
    border-color: #e2d6d3;
}

.dc-popup__btn--decline:hover {
    background: #f7f2f1;
}

@media only screen and (max-width: 575px) {
    .dc-popup__inner { padding: 20px 18px 18px; }
    .dc-popup__title { font-size: 19px; }
    .dc-popup__intro,
    .dc-popup__more p { font-size: 14px; }
    .dc-popup__actions { flex-direction: column-reverse; }
    .dc-popup__btn { width: 100%; }
}

/* --- Video Consultation: the primary call to action ---------------------
 * The client wants video consultation highlighted site-wide, so these
 * buttons carry the camera icon and a soft pulse that draws the eye without
 * introducing a second colour. */
.is-video-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    white-space: nowrap;
}

.is-video-cta i {
    font-size: .95em;
}

/* Hero: larger, with a halo so it reads as the main action on the page. */
.is-video-cta--hero {
    font-size: 17px;
    padding: 15px 30px;
    box-shadow: 0 0 0 0 rgba(245, 94, 69, .55);
    animation: videoPulse 2.6s ease-out infinite;
}

@keyframes videoPulse {
    0%   { box-shadow: 0 0 0 0 rgba(245, 94, 69, .5); }
    70%  { box-shadow: 0 0 0 16px rgba(245, 94, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 94, 69, 0); }
}

/* Someone who prefers less motion still gets the button, without the pulse. */
@media (prefers-reduced-motion: reduce) {
    .is-video-cta--hero { animation: none; }
}

.hero-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* The office visit sits beside it as the quieter second choice. */
.hero-cta__alt {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    color: #fff !important;
}

.hero-cta__alt:hover {
    background: #fff !important;
    color: var(--brand) !important;
    border-color: #fff !important;
}

/* The nav item, so it stands out among nine links. */
.header-main .nav-area > ul > li.main-nav > a[href*="video-consultation"] {
    color: #fff;
    font-weight: 700;
}

.header-main .nav-area > ul > li.main-nav > a[href*="video-consultation"]::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-radius: 50%;
    background: #fff;
    vertical-align: middle;
    animation: videoDot 2s ease-in-out infinite;
}

@keyframes videoDot {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}

/* The chosen mode flashes when a video button sends the visitor here, so the
   click they made is visibly reflected in the form. */
.ap-mode__opt.is-flash {
    animation: modeFlash 1.6s ease-out;
    border-radius: 8px;
}

@keyframes modeFlash {
    0%, 100% { background: transparent; }
    25%      { background: rgba(245, 94, 69, .16); }
}

@media only screen and (max-width: 575px) {
    .is-video-cta--hero { font-size: 15px; padding: 13px 22px; }
    .hero-cta { flex-direction: column; width: 100%; }
    .hero-cta a { width: 100%; justify-content: center; }
}

/* The popup's video option leads; the appointment link is the alternative. */
.consult-pop__btn--video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
}

/* --- home hero: Supreme Court of India ----------------------------------
 * The building is centred in a 1920x870 photo, so a plain centre crop works
 * on desktop but cuts the dome off once the viewport narrows. The focal
 * point moves up as the screen gets smaller, keeping the dome in frame. */
.home-hero {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 58%;
}

@media only screen and (max-width: 1199px) {
    .home-hero { background-position: center 52%; }
}

/* Tablet and below: the crop is much taller than it is wide, so the dome
   needs to sit higher still or the frame fills with hedge and sky. */
@media only screen and (max-width: 991px) {
    .home-hero { background-position: center 46%; }
}

@media only screen and (max-width: 767px) {
    .home-hero {
        background-position: center 42%;
        /* a little more height so the building reads as a building */
        min-height: 420px;
    }
}

@media only screen and (max-width: 575px) {
    .home-hero {
        background-position: center 40%;
        min-height: 440px;
    }
}

/* The photo is light at the horizon, which is exactly where the headline
   sits, so a gentle extra wash is laid behind the text only. */
.home-hero .banner-one-inner {
    position: relative;
    z-index: 2;
}

/* --- floating Video Consultation + chat ---------------------------------
 * Both sit bottom right, video above chat. The video button is the primary
 * action, so it is wider and carries a label; the chat bubble stays a
 * circle beneath it. Heights are kept in step so the stack never overlaps. */
.vc-float {
    position: fixed;
    right: 25px;
    bottom: 97px;          /* 25px gap + 60px chat button + 12px breathing room */
    z-index: 99991;
}

.vc-float__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 20px 0 16px;
    border-radius: 27px;
    background: var(--brand);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(143, 42, 34, .07);
    transition: transform .25s ease, filter .25s ease;
}

.vc-float__btn:hover {
    transform: translateY(-3px);
    filter: brightness(.93);
    color: #fff;
}

.vc-float__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: 14px;
}

/* A slow halo so the eye catches it without the page feeling busy. */
.vc-float__ping {
    position: absolute;
    inset: 0;
    border-radius: 27px;
    box-shadow: 0 0 0 0 rgba(245, 94, 69, .55);
    animation: vcFloatPulse 2.8s ease-out infinite;
    pointer-events: none;
}

@keyframes vcFloatPulse {
    0%   { box-shadow: 0 0 0 0 rgba(245, 94, 69, .5); }
    70%  { box-shadow: 0 0 0 14px rgba(245, 94, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 94, 69, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .vc-float__ping { animation: none; }
}

/* The chat bubble keeps its circle but gains a little presence. */
.chat-fab {
    width: 62px;
    height: 62px;
}

.chat-fab:hover {
    background: var(--brand);
    filter: brightness(.93);
}

/* Phones: the label would crowd the screen, so the video button becomes a
   circle matching the chat bubble, and the two stack cleanly. */
@media only screen and (max-width: 767px) {
    .vc-float {
        right: 18px;
        bottom: 88px;
    }

    .vc-float__btn {
        height: 56px;
        width: 56px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .vc-float__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;      /* kept for screen readers */
    }

    .vc-float__icon {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
        font-size: 15px;
        background: transparent;
    }

    .vc-float__ping { border-radius: 50%; }

    .chat-fab {
        right: 18px;
        bottom: 18px;
        width: 56px;
        height: 56px;
    }

    .wa-float {
        left: 18px;
        bottom: 18px;
    }
}

/* --- hero text legibility ------------------------------------------------
 * The overlay is deliberately light so the Supreme Court building stays
 * visible, so the headline carries its own soft shadow instead. Legibility
 * comes from the text, not from darkening the photograph. */
.home-hero .banner-one-inner .title,
.home-hero .banner-one-inner .pre-title,
.home-hero .banner-one-inner .disc {
    text-shadow: 0 1px 10px rgba(10, 12, 16, .55);
}

/* A single call to action, centred. */
.hero-cta {
    display: flex;
    justify-content: center;
}

/* The font-awesome camera does not render in the hero on some builds and
   shows as an empty box, so the hero button carries no icon. */
.is-video-cta--hero i {
    display: none;
}

/* --- chat button: a labelled pill, matching the video consultation one ---
 * The circle alone did not say what it was. It now carries an "AI Assistant"
 * label on desktop and collapses back to a circle on phones, so the two
 * floating buttons read as a pair. */
.chat-fab {
    width: auto;
    height: 54px;
    padding: 0 20px 0 15px;
    border-radius: 27px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 6px 18px rgba(143, 42, 34, .07);
}

/* The two icons share one cell so open/close can cross-fade in place. */
.chat-fab svg {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    grid-area: auto;
    margin: 0;
}

.chat-fab__close {
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -12px;
}

.chat-fab__label {
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Once the panel is open the label is redundant: shrink back to a circle so
   it does not sit over the conversation. */
.chat-fab.is-open {
    width: 54px;
    padding: 0;
    justify-content: center;
}

.chat-fab.is-open .chat-fab__label {
    display: none;
}

.chat-fab.is-open .chat-fab__close {
    position: static;
    margin: 0;
}

.chat-fab__ping {
    border-radius: 27px;
}

.chat-fab.is-open .chat-fab__ping {
    border-radius: 50%;
}

@media only screen and (max-width: 767px) {
    .chat-fab {
        width: 56px;
        height: 56px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    /* kept in the DOM for screen readers, not shown */
    .chat-fab__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .chat-fab__close {
        position: static;
        margin: 0;
    }

    .chat-fab__ping { border-radius: 50%; }
}

/* --- "Why is Advocate Rajiv Rajpurohit renowned" ------------------------
 * His old site showed seven outlined boxes on black. Here they become soft
 * cards with an orange icon, on a tinted band, laid out as 4 + 3 and centred
 * so the second row does not hang off to the left. */
.renowned-area {
    background: #fdf6f4;
    text-align: center;
}

.renowned-head {
    max-width: 880px;
    margin: 0 auto 38px;
}

.renowned-title {
    margin: 0 0 14px;
    font-size: 34px;
    line-height: 1.28;
    color: var(--ink);
}

.renowned-sub {
    margin: 0 0 10px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--color-body);
}

.renowned-tag {
    margin: 0;
    display: inline-flex;
    gap: 14px;
    font-weight: 700;
    color: var(--ink);
}

.renowned-tag span + span::before {
    content: "|";
    margin-right: 14px;
    color: var(--brand);
    font-weight: 400;
}

.renowned-grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;      /* centres the shorter second row */
    gap: 20px;
}

.renowned-card {
    flex: 0 1 calc(25% - 15px);   /* four across */
    min-width: 220px;
    background: #fff;
    border: 1px solid #f3e1dc;
    border-radius: 14px;
    padding: 26px 20px 24px;
    box-shadow: 0 6px 18px rgba(28, 37, 57, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.renowned-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(28, 37, 57, .09);
}

.renowned-card__icon {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 22px;
}

.renowned-card p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink);
}

.renowned-cta {
    margin-top: 34px;
    display: flex;
    justify-content: center;
}

@media only screen and (max-width: 991px) {
    .renowned-card { flex-basis: calc(33.333% - 14px); }
    .renowned-title { font-size: 28px; }
}

@media only screen and (max-width: 767px) {
    .renowned-head { margin-bottom: 26px; }
    .renowned-title { font-size: 24px; }
    .renowned-sub { font-size: 15.5px; }
    .renowned-grid { gap: 14px; }
    .renowned-card {
        flex-basis: calc(50% - 7px);
        min-width: 0;
        padding: 20px 14px 18px;
    }
    .renowned-card__icon { width: 46px; height: 46px; font-size: 19px; margin-bottom: 10px; }
    .renowned-card p { font-size: 14.5px; }
}

@media only screen and (max-width: 359px) {
    .renowned-card { flex-basis: 100%; }
}