@charset "UTF-8";
/* ==========================================================================
   FabFrame - premium theme
   style.css ke baad load hota hai, isliye wahi rules override karta hai.

   NOTE: style.css me `* { margin: 0 !important; padding: 0; }` pada hai.
   Iska matlab Bootstrap ke mt-/mb-/py- jaise margin utilities kaam hi nahi
   karte. Isliye yahan spacing hamesha padding / gap se di gayi hai.
   ========================================================================== */

:root {
    --brand-teal: #50B5BC;
    --brand-teal-dark: #3A9AA1;
    --brand-teal-soft: rgba(80, 181, 188, 0.12);
    --brand-orange: #E98220;
    --brand-orange-dark: #CC6E12;
    --brand-orange-soft: rgba(233, 130, 32, 0.12);

    --ink: #14181B;
    --ink-soft: #5A646B;
    --line: rgba(20, 24, 27, 0.10);
    --surface: #FFFFFF;
    --surface-alt: #F6F8F9;

    --shadow-sm: 0 1px 2px rgba(16, 24, 32, .05), 0 4px 12px rgba(16, 24, 32, .06);
    --shadow-md: 0 2px 6px rgba(16, 24, 32, .06), 0 18px 40px rgba(16, 24, 32, .10);
    --shadow-lg: 0 30px 70px rgba(16, 24, 32, .18);

    --radius: 14px;
    --radius-lg: 22px;
    --ease: cubic-bezier(.22, .61, .36, 1);

    /* purane variables ko naye brand colours par le aao */
    --heading: #50B5BC;
    --orange: #E98220;
}

/* purane inline `color:var(--second-color)` ke liye */
:root {
    --second-color: var(--brand-teal);
}

html {
    scroll-behavior: smooth;
}

body {
    /* `hidden` body ko scroll container bana deta hai, jisse position:sticky
       viewport ke bajaye body se chipakta hai (blog sidebar pin nahi hota tha).
       `clip` wahi kaam karta hai bina scroll container banaye. */
    overflow-x: clip;
}

::selection {
    background: var(--brand-teal);
    color: #fff;
}

/* ======================= 1. BUTTONS ======================= */

.common-btn,
.ff-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 30px;
    border: 0;
    border-radius: 999px;
    background: var(--brand-orange);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(233, 130, 32, .32);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}

.common-btn:hover,
.ff-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(233, 130, 32, .42);
    color: #fff;
}

.common-btn2,
.ff-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 28px;
    border: 1.5px solid rgba(255, 255, 255, .75);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}

.common-btn2:hover,
.ff-btn-ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
    transform: translateY(-2px);
}

/* ======================= 2. HEADER ======================= */

header {
    position: sticky;
    top: 0;
    z-index: 1040;
    transition: box-shadow .35s var(--ease), background .35s var(--ease);
}

/* top info bar - scroll par chhup jaata hai, header patla ho jaata hai */
header > .container-lg {
    overflow: hidden;
    max-height: 60px;
    opacity: 1;
    transition: max-height .4s var(--ease), opacity .3s var(--ease), padding .4s var(--ease);
}

header.ff-stuck > .container-lg {
    max-height: 0;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

header.ff-stuck {
    box-shadow: 0 6px 24px rgba(16, 24, 32, .12);
}

header .navbar {
    transition: padding .35s var(--ease);
}

header.ff-stuck .navbar {
    padding-top: 2px;
    padding-bottom: 2px;
}

header .logo {
    transition: height .35s var(--ease), transform .35s var(--ease);
}

header.ff-stuck .logo {
    transform: scale(.88);
    transform-origin: left center;
}

/* nav links: underline jo hover par grow karti hai */
.navbar-nav .nav-link {
    position: relative;
    padding-top: 22px;
    padding-bottom: 22px;
    font-weight: 500;
    color: var(--ink);
    transition: color .25s var(--ease);
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-teal);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s var(--ease);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--brand-teal);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    transform: scaleX(1);
}

header.ff-stuck .navbar-nav .nav-link {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* dropdown */
.navbar .dropdown-menu {
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.navbar .dropdown-item {
    padding: 11px 20px;
    font-weight: 500;
    color: var(--ink);
}

.navbar .dropdown-item:hover {
    background: var(--brand-teal-soft);
    color: var(--brand-teal-dark);
}

/* header ke right me "Get in Touch" */
.ff-header-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--brand-teal);
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(80, 181, 188, .32);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.ff-header-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(80, 181, 188, .45);
    color: #fff !important;
}

.ff-header-cta svg {
    width: 16px;
    height: 16px;
}

.navbar-nav {
    align-items: center;
}

/* ======================= 3. HERO ======================= */

.banners .swiper-slide {
    position: relative;
}

.banner-wrap img {
    max-height: 86vh;
}

/* overlay: left side gahra, right side halka - text padhne layak rahe */
.banners-overlay {
    background: linear-gradient(90deg,
            rgba(10, 14, 17, .82) 0%,
            rgba(10, 14, 17, .55) 42%,
            rgba(10, 14, 17, .12) 78%,
            rgba(10, 14, 17, 0) 100%);
}

/* text left align - container ke left edge par shuru ho */
.banner-cont {
    align-items: flex-start !important;
    justify-content: center;
    text-align: left;
    padding-left: max(24px, calc((100% - 1140px) / 2));
    padding-right: max(24px, calc((100% - 1140px) / 2));
}

.banner-cont > * {
    max-width: 640px;
    text-align: left !important;
}

.banner-cont h2,
.banner-cont p {
    text-align: left !important;
}

.banner-cont p {
    color: rgba(255, 255, 255, .86) !important;
    font-size: 1.05rem !important;
    line-height: 1.7;
    padding-top: 14px;
}

.banner-text1 {
    display: inline-block;
    font-size: clamp(.8rem, 1.1vw, .95rem) !important;
    font-weight: 600 !important;
    letter-spacing: .22em;
    color: var(--brand-teal) !important;
    padding-bottom: 14px;
}

.banner-text2,
.banner-text4 {
    font-size: clamp(1.6rem, 3.2vw, 2.8rem) !important;
    font-weight: 700 !important;
    line-height: 1.15;
    letter-spacing: -.01em;
}

/* teal accent line heading ke upar */
.banner-cont h2::before {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: var(--brand-orange);
    margin: 0 !important;
}

.banner-cont h2 {
    padding-bottom: 6px;
}

.banner-btns {
    justify-content: flex-start !important;
    padding-top: 26px;
}

/* slide badalte hi content ka halka sa entrance */
.banners .swiper-slide-active .banner-cont h2,
.banners .swiper-slide-active .banner-cont p,
.banners .swiper-slide-active .banner-btns {
    animation: ffRise .7s var(--ease) both;
}

.banners .swiper-slide-active .banner-cont p {
    animation-delay: .1s;
}

.banners .swiper-slide-active .banner-btns {
    animation-delay: .2s;
}

@keyframes ffRise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---- hero arrows: purane box-wale SVG ki jagah glass circle ---- */
.ban-nav-btns {
    width: auto;
    left: auto;
    right: max(24px, calc((100% - 1140px) / 2));
    top: auto;
    bottom: 42px;
    gap: 12px;
    transform: none;
}

.pre-btn,
.nxt-btn {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .55);
    /* halke background (safed sofa) par bhi dikhe, isliye gehra glass.
       NOTE: yahan backdrop-filter mat lagana - kuch renderers par wo apne
       neeche ka poora hero kaala kar deta hai (ye bug pakda gaya tha). */
    background: rgba(10, 14, 17, .52);
    box-shadow: 0 8px 22px rgba(10, 14, 17, .28);
    cursor: pointer;
    transition: background .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}

/* style.css me `.nxt-btn,.pre-btn{opacity:0}` tha - arrows poori tarah chhupe
   hue the. Ab dikhte hai, hover par poore solid. */
.pre-btn,
.nxt-btn {
    opacity: .92;
}

.pre-btn:hover,
.nxt-btn:hover {
    opacity: 1;
}

/* purane box-wale SVG ki jagah CSS chevron */
.pre-btn svg,
.nxt-btn svg {
    display: none;
}

.pre-btn::before,
.nxt-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transition: border-color .28s var(--ease);
}

.pre-btn::before {
    transform: translate(-40%, -50%) rotate(135deg);
}

.nxt-btn::before {
    transform: translate(-60%, -50%) rotate(-45deg);
}

.pre-btn:hover,
.nxt-btn:hover {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    transform: translateY(-2px);
}

.ban-nav-btns svg:hover {
    transform: none;
}

/* hero pagination dots */
.banners .swiper-pagination {
    left: max(24px, calc((100% - 1140px) / 2));
    right: auto;
    bottom: 56px;
    width: auto;
    display: flex;
    gap: 10px;
    z-index: 4;
}

.banners .swiper-pagination-bullet {
    width: 26px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .45);
    opacity: 1;
    transition: background .3s var(--ease), width .3s var(--ease);
}

.banners .swiper-pagination-bullet-active {
    width: 46px;
    background: var(--brand-orange);
}

/* ======================= 4. SECTION HEADINGS ======================= */

.underline {
    position: relative;
}

.underline::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    width: 62px;
    height: 3px;
    border-radius: 3px;
    background: var(--brand-orange);
}

.ff-eyebrow {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--brand-teal-soft);
    color: var(--brand-teal-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.snowflake {
    background: var(--surface-alt);
}

/* ======================= 5. WELCOME SECTION ======================= */

.con-box {
    position: relative;
    background: #14202400;background: #142024;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

/* halki teal glow top-right par */
.con-box::after {
    content: "";
    position: absolute;
    top: -90px;
    right: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(80, 181, 188, .10);
    pointer-events: none;
}

.con-box .solutions {
    position: relative;
    z-index: 1;
}

/* heading ke aage orange bar */
.con-box .solutions::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 72%;
    border-radius: 4px;
    background: var(--brand-teal);
}

.con-box .desc {
    position: relative;
    z-index: 1;
}

.con-box .desc h1 {
    color: var(--brand-teal) !important;
    letter-spacing: .01em;
    padding-bottom: 6px;
}

.con-box .desc p {
    color: rgba(255, 255, 255, .78) !important;
    line-height: 1.85;
    padding-top: 16px;
}

/* right side ke "We are Professional" blocks */
.abt-fab span {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--brand-teal-soft);
    transition: background .3s var(--ease), transform .3s var(--ease);
}

.abt-fab span img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.row:hover > .abt-fab span,
.abt-fab:hover span {
    background: var(--brand-orange-soft);
    transform: translateY(-3px);
}

/* ======================= 6. CARDS (solutions / style / gallery) ======================= */

.casement-windows-wrap,
.service-card,
.blog-box {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.casement-windows-wrap:hover,
.service-card:hover,
.blog-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.blog-box:hover {
    box-shadow: var(--shadow-md);
}

.product-card-desc {
    border-bottom: 2px solid transparent;
}

.product-card-desc:hover {
    border-color: var(--brand-orange);
}

.color-change:hover,
.blog-text a:hover,
.read-more:hover {
    color: var(--brand-orange) !important;
}

/* ======================= 7. TESTIMONIALS - Google review look ======================= */

.testimonial-canvas {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 54px 28px 40px;
    box-shadow: var(--shadow-sm);
}

.ts-pill {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 11px 28px;
    border-radius: 999px;
    background: var(--brand-teal);
    color: #fff;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(80, 181, 188, .35);
}

/* Google rating summary */
.ff-google-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 30px;
}

.ff-google-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.ff-google-badge .ff-g-score {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
}

.ff-google-badge .ff-g-meta {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.35;
}

.ff-stars {
    display: inline-flex;
    gap: 2px;
    color: #FBBC05;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 1;
}

/* review card */
.ts-card {
    flex-direction: column !important;
    gap: 16px;
    height: 100%;
    padding: 26px 24px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.ts-card:hover {
    transform: translateY(-4px);
    border-color: rgba(80, 181, 188, .45);
    box-shadow: var(--shadow-md);
}

.ts-left {
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
    justify-content: flex-start !important;
}

.ts-subtle-arrows {
    display: none !important;
}

/* naam ka pehla akshar - avatar */
.ff-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--brand-teal);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
}

.ts-author {
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.3;
}

.ff-review-meta {
    font-size: 12.5px;
    color: var(--ink-soft);
}

.ts-brand,
.ts-dot {
    display: none !important;
}

.ts-quote {
    position: relative;
    padding-top: 2px;
}

.ts-quote p {
    color: var(--ink-soft) !important;
    font-size: 15px;
    line-height: 1.75;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}

.ts-stars {
    color: #FBBC05;
    letter-spacing: 2px;
    padding-bottom: 10px;
}

/* card ke neeche "Posted on Google" */
.ff-posted-on {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-top: 4px;
    font-size: 12.5px;
    color: var(--ink-soft);
    border-top: 1px solid var(--line);
    padding-top: 14px;
    margin-top: auto !important;
}

.ff-posted-on svg {
    width: 15px;
    height: 15px;
}

/* ======================= 8. CLIENTELE ======================= */

.clients-wrap {
    position: relative;
    padding: 26px 0;
}

/* dono kinaron par fade - marquee jaisa feel */
.clients-wrap::before,
.clients-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    z-index: 2;
    pointer-events: none;
}

.clients-wrap::before {
    left: 0;
    background: linear-gradient(90deg, var(--surface-alt), transparent);
}

.clients-wrap::after {
    right: 0;
    background: linear-gradient(270deg, var(--surface-alt), transparent);
}

.parteners .img-wrap {
    height: 104px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.parteners .img-wrap img {
    max-height: 62px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .62;
    transition: filter .3s var(--ease), opacity .3s var(--ease);
}

.parteners .img-wrap:hover {
    transform: translateY(-4px);
    border-color: rgba(80, 181, 188, .45);
    box-shadow: var(--shadow-sm);
}

.parteners .img-wrap:hover img {
    filter: none;
    opacity: 1;
}

/* ======================= 9. FAQ ======================= */

.ff-faq {
    max-width: 880px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ff-faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.ff-faq-item + .ff-faq-item {
    margin-top: 14px !important;
}

.ff-faq-item[open] {
    border-color: rgba(80, 181, 188, .5);
    box-shadow: var(--shadow-sm);
}

.ff-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    transition: color .25s var(--ease);
}

.ff-faq-q::-webkit-details-marker {
    display: none;
}

.ff-faq-q:hover {
    color: var(--brand-teal-dark);
}

.ff-faq-q::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--brand-teal);
    border-bottom: 2px solid var(--brand-teal);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .3s var(--ease);
}

.ff-faq-item[open] .ff-faq-q::after {
    transform: rotate(-135deg) translateY(-2px);
}

.ff-faq-a {
    padding: 0 22px 22px;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.8;
}

/* ======================= 10. HOME BLOG SLIDER ======================= */

.ff-blog-slider {
    padding-bottom: 8px;
}

.ff-blog-slider .swiper-slide {
    height: auto;
}

.ff-blog-slider .blog-box {
    height: 100%;
}

/* slider ke apne arrows */
.ff-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 26px;
}

.ff-nav-btn {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    cursor: pointer;
    transition: background .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}

.ff-nav-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transition: border-color .28s var(--ease);
}

.ff-nav-btn.prev::before {
    transform: translate(-40%, -50%) rotate(135deg);
}

.ff-nav-btn.next::before {
    transform: translate(-60%, -50%) rotate(-45deg);
}

.ff-nav-btn:hover {
    background: var(--brand-teal);
    border-color: var(--brand-teal);
    transform: translateY(-2px);
}

.ff-nav-btn:hover::before {
    border-color: #fff;
}

.ff-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 30px;
}

.ff-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-teal-dark);
    font-weight: 600;
    font-size: 15px;
    transition: gap .25s var(--ease), color .25s var(--ease);
}

.ff-link-arrow:hover {
    gap: 14px;
    color: var(--brand-orange);
}

/* ======================= 11. CTA band ======================= */

.common-cta {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cta-overlay {
    background: linear-gradient(100deg, rgba(10, 14, 17, .88) 0%, rgba(16, 52, 58, .72) 100%);
}

/* ======================= 12. RESPONSIVE ======================= */

@media (max-width: 991.98px) {
    .banner-cont {
        padding-left: 22px;
        padding-right: 22px;
    }

    .banner-cont > * {
        max-width: 100%;
    }

    .ban-nav-btns {
        right: 18px;
        bottom: 20px;
    }

    .pre-btn,
    .nxt-btn {
        width: 44px;
        height: 44px;
    }

    .banners .swiper-pagination {
        left: 22px;
        bottom: 30px;
    }

    .ff-header-cta {
        width: 100%;
        justify-content: center;
        margin-top: 10px !important;
    }

    .testimonial-canvas {
        padding: 48px 16px 32px;
    }

    .clients-wrap::before,
    .clients-wrap::after {
        width: 44px;
    }
}

@media (max-width: 575.98px) {
    .banner-text2,
    .banner-text4 {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    }

    .banner-cont p {
        font-size: .95rem !important;
    }

    .common-btn,
    .common-btn2 {
        padding: 12px 22px;
        font-size: 13px;
    }

    .ff-section-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* motion kam pasand karne walon ke liye */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* Swiper slides barabar height ke rahe, warna review cards tedhe dikhte hai */
.testimonial_slider .swiper-wrapper,
.ff-blog-slider .swiper-wrapper {
    align-items: stretch;
}

.testimonial_slider .swiper-slide,
.ff-blog-slider .swiper-slide {
    height: auto;
    display: flex;
}

.testimonial_slider .swiper-slide > .ts-card,
.ff-blog-slider .swiper-slide > .blog-box {
    width: 100%;
}

/* ======================= 13. MOBILE HERO =======================
   Mobile par image 16/9 (sirf ~211px) thi, jabki slide ka text usse
   kaafi lamba hai - isliye text image ke bahar nikal kar neeche safed
   jagah par chala jaata tha. Yahan hero ko ek theek height do aur
   image ko usay bharne do. */

@media (max-width: 991.98px) {
    .banners .swiper-slide,
    .banner-wrap {
        min-height: 540px;
    }

    .banner-wrap img {
        aspect-ratio: auto;
        height: 540px;
        max-height: none;
        object-fit: cover;
    }

    .banner-cont {
        height: 100%;
        padding-top: 60px;
        padding-bottom: 70px;
    }

    .banner-cont h2 {
        padding-bottom: 4px;
    }

    .banner-btns {
        padding-top: 20px;
    }

    /* dots button ke upar na chadhe */
    .banners .swiper-pagination {
        bottom: 22px;
    }

    .ban-nav-btns {
        bottom: 16px;
        right: 16px;
    }
}

@media (max-width: 575.98px) {
    .banners .swiper-slide,
    .banner-wrap {
        min-height: 420px;
    }

    .banner-wrap img {
        height: 420px;
    }

    .banner-cont {
        padding-top: 50px;
        padding-bottom: 60px;
    }

    /* "Send Enquiry" wali side tab text par na aaye */
    .banner-cont > * {
        padding-left: 18px;
    }

    .banner-cont h2::before {
        margin-left: 18px !important;
    }
}

/* Mobile nav dropdown: overlay on hero instead of pushing content down */
@media (max-width: 991.98px) {
    .navbar {
        position: relative;
    }

    .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        z-index: 1050 !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
        padding: 12px 20px !important;
        border-radius: 0 0 12px 12px !important;
    }

    .navbar-nav {
        align-items: stretch !important;
        gap: 0 !important;
    }

    .navbar-nav .nav-link {
        padding: 10px 16px !important;
        font-size: 15px !important;
        text-align: left !important;
        border-bottom: 1px solid #f0f0f0;
    }

    .navbar-nav .nav-link::after {
        display: none !important;
    }

    .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }

    .navbar-nav .dropdown-menu {
        border: none !important;
        box-shadow: none !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        padding: 4px 0 !important;
        margin: 0 0 4px !important;
    }

    .navbar-nav .dropdown-menu .dropdown-item {
        padding: 8px 24px !important;
        font-size: 14px !important;
    }

    .navbar-collapse .ff-header-cta,
    .navbar-collapse .common-btn {
        display: block !important;
        text-align: center !important;
        margin-top: 8px !important;
        width: 100% !important;
    }
}

@media (max-width: 767.98px) {
    .ban-nav-btns {
        display: none !important;
    }

    .banners .swiper-pagination {
        bottom: 26px;
    }
}

/* .ts-card se markup me se d-flex class hat gayi thi, isliye "Posted on Google"
   ka margin-top:auto kaam nahi kar raha tha aur cards tedhe lag rahe the. */
.ts-card {
    display: flex;
}

/* ==================================================================
   14. REVISION - feedback ke baad
   ================================================================== */

/* ---- Header CTA: hover par rang na badle, bas halka gehra + lift ---- */
.ff-header-cta:hover,
.ff-header-cta:focus-visible {
    background: var(--brand-teal-dark);
    box-shadow: 0 10px 22px rgba(80, 181, 188, .35);
}

/* ---- Testimonials: saaf design, koi glow / blob nahi ---- */
.testimonial-canvas::before {
    display: none !important;
}

.testimonial-canvas {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: none;
}

.ts-left {
    flex: 0 0 auto !important;
    background: none !important;
    padding: 0 !important;
}

.ts-card {
    gap: 14px;
    padding: 24px 22px 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: none;
}

.ts-card:hover {
    transform: none;
    border-color: rgba(20, 24, 27, .18);
    box-shadow: 0 6px 18px rgba(16, 24, 32, .07);
}

.ff-avatar {
    width: 42px;
    height: 42px;
    font-size: 16px;
    background: var(--brand-teal);
    box-shadow: none;
}

.ts-quote p {
    font-size: 14.5px;
    line-height: 1.7;
    color: #4A545B !important;
}

.ts-stars {
    font-size: 14px;
    letter-spacing: 1px;
    padding-bottom: 8px;
}

.ff-posted-on {
    font-size: 12px;
    padding-top: 12px;
}

.ff-google-badge {
    box-shadow: none;
    border-radius: 12px;
}

.ts-pill {
    box-shadow: none;
    background: var(--brand-teal);
    font-size: 15px;
    padding: 10px 24px;
}

/* ---- Our Clientele: asli logo (rang ke saath) aur bade ---- */
.parteners .img-wrap {
    height: 140px;
    padding: 18px 22px;
}

.parteners .img-wrap img {
    max-height: 100px;
    max-width: 100%;
    /* grayscale hata diya - logo apne asli rang me dikhe */
    filter: none;
    opacity: 1;
}

.parteners .img-wrap:hover img {
    filter: none;
    opacity: 1;
}

@media (max-width: 767.98px) {
    .parteners .img-wrap {
        height: 112px;
        padding: 14px 16px;
    }

    .parteners .img-wrap img {
        max-height: 80px;
    }
}

/* ---- "Send Enquiry" side tab ---- */
.popup-float-btn {
    background: var(--brand-orange) !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 20px 11px !important;
    font-size: 14px !important;
    letter-spacing: .06em;
    box-shadow: 0 8px 20px rgba(233, 130, 32, .35);
    animation: none !important;
    transition: background .25s var(--ease);
}

.popup-float-btn:hover {
    /* pehle mustard (#b68c10) ho jaata tha - ab wahi orange, bas gehra */
    background: var(--brand-orange-dark) !important;
}

/* ---- Enquiry popup: saaf, modern ---- */
.popup-overlay {
    background: rgba(10, 14, 17, .62) !important;
    padding: 20px;
}

.popup-box {
    width: 100% !important;
    max-width: 520px !important;
    padding: 0 !important;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(10, 14, 17, .35);
    animation: ffPopIn .28s var(--ease) both;
}

@keyframes ffPopIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.popup-content {
    height: auto !important;
    max-height: min(84vh, 700px) !important;
    padding: 26px 24px 24px !important;
}

/* popup ke andar form card ka apna border/shadow hata do - double frame lagta tha */
.popup-content .ff-lead-card {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.popup-content .ff-lead-container {
    max-width: 100% !important;
}

.close-btn {
    display: grid;
    place-items: center;
    top: 14px !important;
    right: 14px !important;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--ink-soft);
    font-size: 15px !important;
    line-height: 1;
    z-index: 2;
    transition: background .25s var(--ease), color .25s var(--ease);
}

.close-btn:hover {
    background: var(--brand-orange);
    color: #fff;
}

/* ---- Bottom CTA band (har page par, footer se pehle) ---- */
.ff-cta-band {
    position: relative;
    overflow: hidden;
    background: #142024;
}

.ff-cta-band::after {
    content: "";
    position: absolute;
    top: -120px;
    right: -80px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(80, 181, 188, .10);
    pointer-events: none;
}

.ff-cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 26px;
    padding: 52px 0;
}

.ff-cta-text h2 {
    color: #fff;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.25;
}

.ff-cta-text p {
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    line-height: 1.7;
    padding-top: 10px;
    max-width: 560px;
}

.ff-cta-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ff-cta-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff !important;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
}

.ff-cta-phone:hover {
    color: var(--brand-teal) !important;
}

@media (max-width: 767.98px) {
    .ff-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 0;
    }

    .ff-cta-actions {
        width: 100%;
    }

    .ff-cta-actions .common-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ---- Blog detail ka sidebar CTA ---- */
.ff-side-cta {
    padding: 26px 22px;
    border-radius: var(--radius);
    background: #142024;
    color: #fff;
    text-align: center;
}

.ff-side-cta h3 {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
}

.ff-side-cta p {
    color: rgba(255, 255, 255, .74);
    font-size: 14px;
    line-height: 1.7;
    padding-top: 10px;
    padding-bottom: 18px;
}

.ff-side-cta .common-btn {
    width: 100%;
}

.ff-side-cta .ff-cta-phone {
    justify-content: center;
    padding-top: 14px;
    font-size: 14px;
}

/* .ts-quote ka apna white box + border card ke andar dusra frame bana raha tha */
.ts-quote {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* Clientele marquee: Swiper ka default "ease" timing har slide par ruk-ruk kar
   chalta hai. Linear karne se logo bina ruke continuous loop me chalte hai. */
.parteners .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* Swiper spaceBetween ke liye slides par inline margin-right lagata hai, lekin
   style.css ka `* { margin: 0 !important }` usay maar deta hai - isliye saare
   cards chipke hue the. Wahi gap yahan !important ke saath wapas. */
.testimonial_slider .swiper-slide {
    margin-right: 22px !important;
}

.ff-blog-slider .swiper-slide {
    margin-right: 24px !important;
}

.parteners .swiper-slide {
    margin-right: 22px !important;
}

/* ==================================================================
   15. Solid brand colours + saaf hover
   Design sirf do guideline colours par: #50B5BC (teal) aur #E98220 (orange).
   Koi brand gradient nahi, aur hover par koi badi glow/halo nahi.
   ================================================================== */

/* ---- Header CTA: hover par bas halka gehra, glow nahi ---- */
.ff-header-cta {
    background: var(--brand-teal);
    box-shadow: none;
}

.ff-header-cta:hover,
.ff-header-cta:focus-visible {
    background: var(--brand-teal-dark);
    box-shadow: none;
    transform: none;
}

/* ---- Buttons: solid, hover par sirf shade badle ---- */
.common-btn,
.ff-btn {
    background: var(--brand-orange);
    box-shadow: none;
}

.common-btn:hover,
.ff-btn:hover {
    background: var(--brand-orange-dark);
    box-shadow: none;
    transform: none;
}

.popup-float-btn {
    box-shadow: none;
}

.ts-pill,
.ff-avatar {
    background: var(--brand-teal);
    box-shadow: none;
}

.pre-btn:hover,
.nxt-btn:hover {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    transform: none;
}

.ff-nav-btn:hover {
    background: var(--brand-teal);
    border-color: var(--brand-teal);
    transform: none;
}

/* card hover: sirf halka border + chhoti shadow */
.casement-windows-wrap:hover,
.service-card:hover,
.blog-box:hover,
.parteners .img-wrap:hover {
    transform: none;
    box-shadow: 0 6px 18px rgba(16, 24, 32, .08);
}

/* ---- Clientele ke logo bade ---- */
.parteners .img-wrap {
    height: 150px;
    padding: 16px;
}

.parteners .img-wrap img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 118px;
    object-fit: contain;
    transform: none;
}

@media (max-width: 767.98px) {
    .parteners .img-wrap {
        height: 120px;
        padding: 12px;
    }

    .parteners .img-wrap img {
        max-height: 92px;
    }
}

/* ---- Clientele logo: style.css me `.img-wrap img { width:80% !important;
   aspect-ratio:16/9; object-fit:cover; border:1px solid #f5f5f5 }` pada hai,
   isliye logo chhote aur crop ho rahe the. Poora override. ---- */
.parteners .img-wrap img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 118px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border: 0 !important;
}

@media (max-width: 767.98px) {
    .parteners .img-wrap img {
        max-height: 92px !important;
    }
}

/* ---- Testimonials: bahar wala extra box hata do.
   Sirf review cards ka apna border rahe, section ka apna koi frame nahi. ---- */
.testimonial-canvas {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* heading ab normal centered badge hai, box ke kinare par chipka hua pill nahi */
.ts-pill {
    position: static;
    transform: none;
    display: inline-block;
    background: var(--brand-teal-soft);
    color: var(--brand-teal-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 999px;
}

.testimonial-canvas > .ts-pill {
    display: block;
    width: fit-content;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ff-google-summary {
    padding-top: 18px;
    padding-bottom: 26px;
}

/* ==================================================================
   16. Classic flat buttons - kahin bhi shadow nahi
   ================================================================== */
button,
.btn,
.common-btn,
.common-btn2,
.ff-btn,
.ff-btn-ghost,
.ff-header-cta,
.ff-nav-btn,
.pre-btn,
.nxt-btn,
.popup-float-btn,
.ff-lead-submit,
.ts-cta,
.submit-btn,
a.common-btn,
a.ff-btn,
.whatsapp-float,
.whatsapp-float svg {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

button:hover,
.btn:hover,
.common-btn:hover,
.common-btn2:hover,
.ff-btn:hover,
.ff-header-cta:hover,
.ff-nav-btn:hover,
.pre-btn:hover,
.nxt-btn:hover,
.popup-float-btn:hover,
.ff-lead-submit:hover,
.submit-btn:hover {
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

/* ==================================================================
   17. Nav hover fix
   Mera `.navbar-nav .nav-link::after` wala underline Bootstrap ke
   `.dropdown-toggle::after` (caret) ko bhi override kar raha tha, jisse
   hover par nav item ki jagah teal block dikhne lagta tha.
   Underline ab sirf normal links par, caret Bootstrap ka apna.
   ================================================================== */
.navbar-nav .nav-link.dropdown-toggle::after {
    content: "" !important;
    position: static !important;
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    margin-left: .3em !important;
    vertical-align: .255em !important;
    background: none !important;
    border-top: .3em solid currentColor !important;
    border-right: .3em solid transparent !important;
    border-bottom: 0 !important;
    border-left: .3em solid transparent !important;
    transform: none !important;
    transition: none !important;
}

/* underline sirf un links par jo dropdown nahi hai */
.navbar-nav .nav-link:not(.dropdown-toggle)::after {
    height: 2px;
    max-height: 2px;
    background: var(--brand-teal);
}

/* hover par link par koi background na aaye */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-item:hover > .nav-link {
    background: none !important;
}

/* ==================================================================
   18. Blog detail ka sidebar
   Upar enquiry form, neeche 3 latest post (image ke saath, compact),
   aur poora block scroll par sticky.
   ================================================================== */

.ff-sidebar-sticky {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---- sidebar ka form ---- */
.ff-side-form {
    padding: 22px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.ff-side-form .ff-lead-label {
    display: inline-block;
    color: var(--brand-teal-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.ff-side-form .ff-lead-card-heading h3 {
    color: var(--ink);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    padding-top: 6px;
    padding-bottom: 14px;
    margin: 0 !important;
}

/* sidebar patla hai - fields hamesha ek column me */
.ff-side-form .ff-lead-field {
    padding-bottom: 12px;
}

.ff-side-form .ff-lead-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    padding-bottom: 6px;
}

.ff-side-form input,
.ff-side-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E2E8EF;
    border-radius: 9px;
    background: #FBFCFD;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    transition: border-color .2s var(--ease), background .2s var(--ease);
}

.ff-side-form input:focus,
.ff-side-form textarea:focus {
    outline: none;
    border-color: var(--brand-teal);
    background: #fff;
}

.ff-side-form textarea {
    resize: vertical;
    min-height: 74px;
}

.ff-side-form .ff-lead-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--brand-orange);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .25s var(--ease);
}

.ff-side-form .ff-lead-submit:hover {
    background: var(--brand-orange-dark);
}

.ff-side-form .ff-lead-privacy {
    padding-top: 10px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ink-soft);
    text-align: center;
}

/* ---- latest posts: chhote card, image ke saath ---- */
.ff-side-posts {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.ff-side-posts-title {
    font-size: 16px !important;
    font-weight: 700;
    color: var(--ink);
    padding-bottom: 14px;
}

.ff-post-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    color: inherit;
    transition: opacity .2s var(--ease);
}

.ff-post-item:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.ff-post-thumb {
    flex: 0 0 auto;
    display: block;
    width: 68px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-alt);
}

.ff-post-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    border: 0 !important;
    transform: none !important;
}

.ff-post-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ff-post-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    transition: color .2s var(--ease);
}

.ff-post-item:hover .ff-post-title {
    color: var(--brand-teal-dark);
}

.ff-post-date {
    font-size: 11.5px;
    color: var(--ink-soft);
}

.ff-side-all {
    display: inline-flex;
    padding-top: 14px;
    font-size: 13.5px;
}

/* mobile par sticky nahi - sidebar content ke neeche aa jaata hai */
@media (max-width: 991.98px) {
    .ff-sidebar-sticky {
        position: static;
        padding-top: 28px;
    }
}

/* Sticky block viewport se lamba ho to theek se pin nahi hota.
   Form aur posts ko thoda compact karke poora block ~800px me rakha hai. */
.ff-side-form {
    padding: 18px 16px;
}

.ff-side-form .ff-lead-card-heading h3 {
    font-size: 17px;
    padding-bottom: 10px;
}

.ff-side-form .ff-lead-field {
    padding-bottom: 9px;
}

.ff-side-form .ff-lead-field label {
    font-size: 12px;
    padding-bottom: 4px;
}

.ff-side-form input,
.ff-side-form textarea {
    padding: 8px 11px;
    font-size: 13.5px;
    border-radius: 8px;
}

.ff-side-form textarea {
    min-height: 54px;
}

.ff-side-form .ff-lead-submit {
    padding: 11px 16px;
}

.ff-side-form .ff-lead-privacy {
    padding-top: 8px;
    font-size: 11px;
}

.ff-side-posts {
    padding: 16px;
}

.ff-side-posts-title {
    padding-bottom: 10px;
}

.ff-post-item {
    padding: 8px 0;
    gap: 10px;
}

.ff-post-thumb {
    width: 60px;
    height: 46px;
}

.ff-side-all {
    padding-top: 10px;
    font-size: 13px;
}

/* Sidebar viewport se lamba ho jaye (chhoti screen, lamba form) to sticky
   theek se pin nahi hota. Isliye use viewport ke andar hi rakho aur zaroorat
   padne par andar hi scroll hone do. */
.ff-sidebar-sticky {
    max-height: calc(100vh - 118px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #C9D3DA transparent;
    padding-right: 4px;
}

.ff-sidebar-sticky::-webkit-scrollbar {
    width: 6px;
}

.ff-sidebar-sticky::-webkit-scrollbar-thumb {
    background: #C9D3DA;
    border-radius: 6px;
}

.ff-sidebar-sticky::-webkit-scrollbar-track {
    background: transparent;
}

/* thoda aur compact, taaki zyadatar screens par scroll ki zaroorat hi na pade */
.ff-side-form .ff-lead-privacy {
    display: none;
}

.ff-side-form textarea {
    min-height: 46px;
}

.ff-post-thumb {
    width: 56px;
    height: 42px;
}

.ff-post-item {
    padding: 7px 0;
}

@media (max-width: 991.98px) {
    .ff-sidebar-sticky {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

/* Sidebar form aur compact: label hata diye (placeholder hi kaafi hai),
   textarea chhota, fields ke beech kam space.
   Label DOM me rehte hai bas dikhte nahi - screen reader ke liye zaroori hai. */
.ff-side-form .ff-lead-field label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.ff-side-form .ff-lead-field {
    padding-bottom: 8px;
}

.ff-side-form input,
.ff-side-form textarea {
    padding: 10px 12px;
}

.ff-side-form textarea {
    min-height: 40px;
    height: 40px;
}

.ff-side-form .ff-lead-card-heading h3 {
    padding-bottom: 12px;
}

.ff-side-form .ff-lead-submit {
    margin-top: 2px !important;
}

/* body_end wali inline <style> premium.css ke baad load hoti hai, isliye
   sidebar form ke liye !important chahiye. */
.ff-side-form .ff-lead-field label,
.ff-side-form label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    display: block !important;
}

.ff-side-form textarea {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 90px;
}

.ff-side-form .ff-lead-field {
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
}

.ff-side-form input {
    margin-bottom: 0 !important;
}

/* reCAPTCHA widget 304px chauda hai, sidebar usse patla hai - isliye thoda
   scale karke fit kiya. Height bhi usi hisaab se kam ki, warna neeche khali
   jagah reh jaati hai. */
.ff-side-form .ff-lead-captcha {
    height: 70px;
    overflow: hidden;
    padding-bottom: 6px;
}

.ff-side-form .ff-lead-captcha .g-recaptcha {
    transform: scale(.86);
    transform-origin: 0 0;
}

/* Captcha aa jaane ke baad sidebar bilkul max-height par pahunch gaya tha aur
   andar ek patli scrollbar aa rahi thi - thoda aur kas diya. */
.ff-side-form .ff-lead-captcha {
    height: 64px;
    padding-bottom: 2px;
}

.ff-side-posts {
    padding: 14px;
}

.ff-post-item {
    padding: 6px 0;
}

.ff-side-all {
    padding-top: 8px;
}

/* ==================================================================
   19. "Send Enquiry" side tab
   Original CSS me `transform: rotate(180deg)` tha jo do kaam bigaad raha tha:
     1. text ulta dikhta tha
     2. wo `translateY(-50%)` ko override kar deta tha, to tab vertically
        center bhi nahi hota tha
   Ab text seedha (wahi orientation jo pehle sirf hover par dikhti thi),
   tab theek beech me, aur hover par bas halka pop.
   ================================================================== */
.popup-float-btn {
    writing-mode: vertical-rl !important;
    transform: translateY(-50%) !important;
    transform-origin: center !important;
    top: 50% !important;
    left: 0 !important;
    right: auto !important;
    border-radius: 0 10px 10px 0 !important;
    letter-spacing: .08em;
    transition: transform .22s var(--ease), background .22s var(--ease) !important;
}

.popup-float-btn span {
    display: inline-block;
    transform: rotate(180deg);
}

/* hover: sirf thoda bahar nikle + gehra orange, orientation wahi rahe */
.popup-float-btn:hover,
.popup-float-btn:focus-visible {
    transform: translateY(-50%) translateX(3px) scale(1.04) !important;
    background: var(--brand-orange-dark) !important;
}

/* ==================================================================
   20. Welcome section
   Section ke upar-neeche koi space nahi thi, isliye dark card seedha
   hero se chipka hua lagta tha. Right side ke "We are ..." blocks bhi
   bade icons aur saaf spacing ke saath.
   ================================================================== */
.ff-welcome {
    padding-top: 72px;
    padding-bottom: 72px;
}

.ff-welcome .con-box {
    height: 100%;
}

/* right column ke 3 blocks */
.ff-welcome .col-lg-6:last-child {
    gap: 26px;
    padding-left: 34px;
}

.ff-welcome .col-lg-6:last-child .row {
    align-items: flex-start;
    padding: 0 !important;
}

.ff-welcome .abt-fab {
    padding: 0 !important;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

.ff-welcome .abt-fab span {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: var(--brand-teal-soft);
}

.ff-welcome .abt-fab span img {
    width: 30px;
    height: 30px;
}

.ff-welcome .col-9 {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    padding-left: 0 !important;
}

.ff-welcome .col-9 h4 {
    font-size: 17px !important;
    font-weight: 700;
    color: var(--ink);
    padding-bottom: 7px;
}

/* justify text me bade-bade gaps ban rahe the */
.ff-welcome .col-9 p,
.ff-welcome .desc-justify {
    text-align: left !important;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--ink-soft) !important;
    padding: 0 !important;
}

.ff-welcome .con-box .desc p {
    text-align: left !important;
}

@media (max-width: 991.98px) {
    .ff-welcome {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .ff-welcome .col-lg-6:last-child {
        padding-left: 0;
        padding-top: 30px;
    }
}

/* ==================================================================
   21. "What's Your Style?" tabs
   Plain text ki jagah saaf pill tabs.
   ================================================================== */
.nav-tabs {
    border: 0 !important;
    gap: 10px !important;
    padding-top: 6px;
}

.nav-tabs .nav-item {
    border: 0;
    background: transparent !important;
}

.nav-tabs .tabs,
.nav-tabs .nav-link.tabs {
    padding: 11px 26px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    background: var(--surface);
    color: var(--ink-soft) !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    transform: none !important;
    transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease) !important;
}

.nav-tabs .tabs:hover {
    border-color: var(--brand-orange) !important;
    color: #fff !important;
    background: var(--brand-orange) !important;
}

.nav-tabs .tabs.active,
.nav-tabs .nav-link.tabs.active {
    background: var(--brand-teal) !important;
    border-color: var(--brand-teal) !important;
    color: #fff !important;
}

/* tab ke content aur tabs ke beech thodi saans */
.tab-content {
    padding-top: 34px;
}

/* ==================================================================
   22. "Join with FabFrame" CTA - full width
   Pehle container ke andar inset tha (dono taraf safed jagah + rounded).
   Ab edge-to-edge; andar ka content container me hi centred rehta hai.
   ================================================================== */
.common-cta {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.common-cta .cta-overlay {
    border-radius: 0 !important;
}

/* text ko container ki chaudai me rakho, kinaron se na chipke */
.common-cta .cta-content {
    max-width: 1140px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 72px 24px;
}

/* is CTA wale section ka apna rounded wrapper bhi hata do */
.common-cta,
.common-cta .rounded-3 {
    border-radius: 0 !important;
}

@media (max-width: 767.98px) {
    .common-cta .cta-content {
        padding: 52px 20px;
    }
}

/* ==================================================================
   23. Gallery + lightbox
   ================================================================== */
.gallery-items {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    cursor: zoom-in;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.gallery-items:hover {
    transform: scale(1.015);
    box-shadow: 0 10px 28px rgba(16, 24, 32, .14);
}

.gallery-items:focus-visible {
    outline: 3px solid var(--brand-teal);
    outline-offset: 3px;
}

/* ---- lightbox ---- */
.ff-lb {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 12, 15, .92);
    padding: 28px;
}

.ff-lb.is-open {
    display: flex;
    animation: ffLbIn .2s var(--ease) both;
}

@keyframes ffLbIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ff-lb-stage {
    max-width: min(1100px, 92vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ff-lb-stage img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    border-radius: 10px;
    object-fit: contain;
}

.ff-lb-stage figcaption {
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    letter-spacing: .08em;
}

.ff-lb-close,
.ff-lb-nav {
    position: absolute;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    transition: background .22s var(--ease), border-color .22s var(--ease);
}

.ff-lb-close:hover,
.ff-lb-nav:hover {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
}

.ff-lb-close {
    top: 22px;
    right: 24px;
    font-size: 26px;
    line-height: 1;
}

.ff-lb-nav {
    top: 50%;
    transform: translateY(-50%);
}

.ff-lb-nav.prev { left: 22px; }
.ff-lb-nav.next { right: 22px; }

.ff-lb-nav::before {
    content: "";
    width: 11px;
    height: 11px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.ff-lb-nav.prev::before { transform: translateX(2px) rotate(135deg); }
.ff-lb-nav.next::before { transform: translateX(-2px) rotate(-45deg); }

@media (max-width: 575.98px) {
    .ff-lb { padding: 14px; }
    .ff-lb-nav { width: 40px; height: 40px; }
    .ff-lb-nav.prev { left: 10px; }
    .ff-lb-nav.next { right: 10px; }
    .ff-lb-close { top: 12px; right: 12px; }
}

/* ==================================================================
   24. Testimonials - revision
   "Posted on Google" wali footer row hata di (upar ka Google badge kaafi
   hai). Uski jagah naam ke saath chhota Google mark. Card ab content ke
   hisaab se saaf, bina khali footer ke.
   ================================================================== */
.ff-posted-on {
    display: none !important;
}

.ts-left {
    width: 100%;
    justify-content: space-between !important;
    padding-bottom: 2px !important;
}

.ts-left > .d-flex.flex-column {
    flex: 1 1 auto;
    min-width: 0;
}

.ff-g-mark {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    opacity: .85;
}

.ts-card {
    gap: 12px;
    padding: 22px 20px;
    justify-content: flex-start;
}

/* quote ke upar halka separator */
.ts-quote {
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.ts-stars {
    font-size: 13.5px;
    letter-spacing: 2px;
    padding-bottom: 8px;
}

.ts-quote p {
    -webkit-line-clamp: 7;
    font-size: 14px;
    line-height: 1.7;
}

.ts-author {
    font-size: 14.5px;
}

.ff-review-meta {
    font-size: 12px;
}

.ff-avatar {
    width: 40px;
    height: 40px;
    font-size: 15px;
}

/* Google badge thoda chhota aur halka */
.ff-google-badge {
    padding: 10px 18px;
    gap: 10px;
}

.ff-google-badge .ff-g-score {
    font-size: 20px;
}

/* ==================================================================
   25. Our Clientele - revision
   Dono kinaron wale fade overlays logo cards ko kaat rahe the (pehla aur
   aakhri card adha dhundhla dikhta tha). Fades hata diye - strip ab saaf.
   ================================================================== */
.clients-wrap::before,
.clients-wrap::after {
    display: none !important;
    content: none !important;
}

.clients-wrap {
    padding: 10px 0 18px;
}

/* cards ek jaise, halke border ke saath */
.parteners .img-wrap {
    height: 130px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.parteners .img-wrap img {
    max-height: 86px !important;
}

/* slide ki apni height card ke barabar rahe */
.parteners .swiper-slide {
    height: auto;
    display: flex;
}

.parteners .swiper-slide > .img-wrap {
    width: 100%;
}

@media (max-width: 767.98px) {
    .parteners .img-wrap {
        height: 104px;
        padding: 12px 14px;
    }

    .parteners .img-wrap img {
        max-height: 70px !important;
    }
}

/* ==================================================================
   26. Hover fixes
   style.css me ye do rules the jo hover par sab bigaad rahe the:
     .nav-tabs .tabs.active, .tabs:focus, .tabs:hover {
         border-bottom: 2px solid ... !important;   <- shorthand, isi se
         color: #000 !important;                        border tedha aur
     }                                                  radius flat lagta tha
     .nav-item:hover .nav-link { color: #fff }      <- safed header par
                                                        safed text = gayab
   Hover ka rang ab brand orange #E98220.
   ================================================================== */

/* ---- "What's Your Style?" tabs ---- */
.nav-tabs .tabs,
.nav-tabs .nav-link.tabs {
    border: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 999px !important;
    isolation: auto !important;
}

.nav-tabs .tabs:hover,
.nav-tabs .tabs:focus,
.nav-tabs .nav-link.tabs:hover,
.nav-tabs .nav-link.tabs:focus {
    background: var(--brand-orange) !important;
    border: 1px solid var(--brand-orange) !important;
    border-bottom: 1px solid var(--brand-orange) !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-weight: 600;
    outline: none;
}

.nav-tabs .tabs.active,
.nav-tabs .nav-link.tabs.active {
    background: var(--brand-teal) !important;
    border: 1px solid var(--brand-teal) !important;
    border-bottom: 1px solid var(--brand-teal) !important;
    border-radius: 999px !important;
    color: #fff !important;
}

/* active par bhi hover kare to wahi orange */
.nav-tabs .tabs.active:hover,
.nav-tabs .nav-link.tabs.active:hover {
    background: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
}

/* ---- Header navbar ---- */
/* .nav-item:hover .nav-link ko safed kar raha tha - safed header par invisible */
.navbar-nav .nav-item:hover > .nav-link,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--brand-orange) !important;
    background: none !important;
}

.navbar-nav .nav-link.active {
    color: var(--brand-teal-dark) !important;
}

/* underline bhi hover par orange */
.navbar-nav .nav-link:not(.dropdown-toggle):hover::after {
    background: var(--brand-orange);
}

.navbar-nav .nav-link.active:not(.dropdown-toggle)::after {
    background: var(--brand-teal);
}

/* dropdown items */
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: var(--brand-orange) !important;
    color: #fff !important;
}

/* ---- Header CTA button ---- */
.ff-header-cta:hover,
.ff-header-cta:focus-visible {
    background: var(--brand-orange) !important;
    color: #fff !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

/* ---- blog sidebar ke "Latest Posts" ---- */
/* .side-menu:hover a bhi safed ho jaata tha */
.side-menu:hover a,
.ff-post-item:hover .ff-post-title {
    color: var(--brand-orange) !important;
}

/* Side tab hover: pehle translateX(3px) tha jisse left edge se gap ban jaata
   tha. Ab left se bilkul chipka rehta hai - scale left-center se hota hai. */
.popup-float-btn {
    transform-origin: left center !important;
}

.popup-float-btn:hover,
.popup-float-btn:focus-visible {
    transform: translateY(-50%) scale(1.05) !important;
    background: var(--brand-orange-dark) !important;
}

/* ==================================================================
   27. Homepage - Contact Us section
   Left me image + contact details, right me wahi form jo popup me hai.
   ================================================================== */
.ff-contact {
    padding: 76px 0;
    background: var(--surface-alt);
}

.ff-contact-head {
    text-align: center;
    padding-bottom: 42px;
}

.ff-contact-head h3 {
    padding-top: 14px;
    padding-bottom: 16px;
    color: var(--ink);
}

.ff-contact-head p {
    max-width: 620px;
    margin-left: auto !important;
    margin-right: auto !important;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.75;
}

.ff-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

/* ---- left: image + details ---- */
.ff-contact-media {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
}

.ff-contact-media > img {
    width: 100%;
    height: 268px;
    object-fit: cover;
    display: block;
}

.ff-contact-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 22px 18px;
    flex: 1 1 auto;
}

.ff-contact-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    color: inherit;
    border-bottom: 1px solid var(--line);
}

.ff-contact-row:last-child {
    border-bottom: 0;
}

.ff-contact-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-teal-soft);
    color: var(--brand-teal-dark);
    transition: background .25s var(--ease), color .25s var(--ease);
}

.ff-contact-ico svg {
    width: 20px;
    height: 20px;
}

a.ff-contact-row:hover .ff-contact-ico {
    background: var(--brand-orange);
    color: #fff;
}

a.ff-contact-row:hover strong {
    color: var(--brand-orange);
}

.ff-contact-row > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ff-contact-row strong {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink);
    transition: color .25s var(--ease);
}

.ff-contact-row em {
    font-style: normal;
    font-size: 12.5px;
    color: var(--ink-soft);
}

/* ---- right: form ---- */
.ff-contact-form {
    padding: 30px 28px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--line);
}

.ff-contact-form .ff-lead-label {
    display: inline-block;
    color: var(--brand-teal-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.ff-contact-form .ff-lead-card-heading h3 {
    color: var(--ink);
    font-size: 23px;
    font-weight: 700;
    padding-top: 6px;
    padding-bottom: 18px;
    margin: 0 !important;
}

.ff-contact-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.ff-contact-form .ff-lead-field {
    padding-bottom: 14px;
}

.ff-contact-form .ff-lead-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    padding-bottom: 6px;
}

.ff-contact-form input,
.ff-contact-form textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #E2E8EF;
    border-radius: 9px;
    background: #FBFCFD;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    transition: border-color .2s var(--ease), background .2s var(--ease);
}

.ff-contact-form input:focus,
.ff-contact-form textarea:focus {
    outline: none;
    border-color: var(--brand-teal);
    background: #fff;
}

.ff-contact-form textarea {
    resize: vertical;
    min-height: 92px;
}

.ff-contact-form .ff-lead-captcha {
    padding-bottom: 14px;
}

.ff-contact-form .ff-lead-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--brand-orange);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .05em;
    cursor: pointer;
    transition: background .25s var(--ease);
}

.ff-contact-form .ff-lead-submit:hover {
    background: var(--brand-orange-dark);
}

.ff-contact-form .ff-lead-privacy {
    padding-top: 10px;
    font-size: 12px;
    color: var(--ink-soft);
    text-align: center;
}

@media (max-width: 991.98px) {
    .ff-contact {
        padding: 52px 0;
    }

    .ff-contact-grid {
        grid-template-columns: 1fr;
    }

    .ff-contact-media > img {
        height: 220px;
    }
}

@media (max-width: 575.98px) {
    .ff-contact-row2 {
        grid-template-columns: 1fr;
    }

    .ff-contact-form {
        padding: 22px 18px;
    }
}

/* ==================================================================
   28. Saare action buttons ek jaise
   Solid orange #E98220, safed uppercase text, pill, bina shadow.
   Hover par sirf gehra orange. (Tabs ko chhoda hai - wo navigation hai,
   aur header CTA ko bhi, uska apna rule neeche hai.)
   ================================================================== */
.common-btn,
.common-btn2,
.ff-btn,
.ff-btn-ghost,
.ff-lead-submit,
.submit-btn,
.ts-cta,
.read-more,
a.common-btn,
button.common-btn,
.ff-side-form .ff-lead-submit,
.ff-contact-form .ff-lead-submit,
.ff-side-cta .common-btn,
.ff-cta-band .common-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 28px;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--brand-orange) !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    box-shadow: none !important;
    transition: background .25s var(--ease) !important;
}

.common-btn:hover,
.common-btn2:hover,
.ff-btn:hover,
.ff-btn-ghost:hover,
.ff-lead-submit:hover,
.submit-btn:hover,
.ts-cta:hover,
.read-more:hover,
a.common-btn:hover,
button.common-btn:hover {
    background: var(--brand-orange-dark) !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}

/* header ka "Get in Touch" bhi wahi orange */
.ff-header-cta {
    background: var(--brand-orange) !important;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .03em;
    box-shadow: none !important;
}

.ff-header-cta:hover,
.ff-header-cta:focus-visible {
    background: var(--brand-orange-dark) !important;
}

/* "Send Enquiry" side tab bhi wahi family */
.popup-float-btn {
    font-weight: 700 !important;
}

/* full-width wale buttons (sidebar / contact form) ko stretch rehne do */
.ff-side-form .ff-lead-submit,
.ff-contact-form .ff-lead-submit,
.ff-side-cta .common-btn {
    display: flex;
    width: 100%;
}

/* "Verified customer" wali line testimonial cards se hata di */
.ff-review-meta {
    display: none !important;
}

/* naam aur Google mark ab ek hi line me, saaf */
.ts-left {
    align-items: center;
}

.ts-left > .d-flex.flex-column {
    justify-content: center;
}

/* Google badge ab testimonials ke NEECHE hai aur clickable hai */
.ff-google-summary {
    padding-top: 24px;
    padding-bottom: 0;
}

a.ff-google-badge {
    text-decoration: none;
    cursor: pointer;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}

a.ff-google-badge:hover {
    border-color: var(--brand-orange);
    background: #fff;
}

a.ff-google-badge:hover .ff-g-meta {
    color: var(--brand-orange);
}

/* chhota arrow, taaki pata chale ki link hai */
.ff-g-go {
    position: relative;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    opacity: .5;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.ff-g-go::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 1px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
}

a.ff-google-badge:hover .ff-g-go {
    opacity: 1;
    transform: translateX(3px);
    color: var(--brand-orange);
}

/* ==================================================================
   29. Our Clientele - alag background + full width slider
   Pehle testimonials jaisa hi grey (.snowflake) tha, isliye dono
   sections ek hi block lagte the. Ab safed background, aur logo strip
   container se bahar nikal kar poori screen me chalti hai.
   ================================================================== */
.ff-clientele {
    background: var(--surface) !important;
    padding-top: 64px;
    padding-bottom: 64px !important;
}

.ff-clientele .clients {
    padding-top: 0 !important;
}

/* full-bleed: container se bahar nikaal kar poori chaudai
   (body par overflow-x: clip hai, isliye scrollbar nahi aata) */
.ff-clientele .clients-wrap {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 28px 0 0;
    overflow: hidden;
}

/* logo cards ab bina border ke, saaf - safed bg par border bekaar lagta tha */
.ff-clientele .parteners .img-wrap {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    height: 132px;
}

@media (max-width: 767.98px) {
    .ff-clientele {
        padding-top: 44px;
        padding-bottom: 44px !important;
    }

    .ff-clientele .parteners .img-wrap {
        height: 104px;
    }
}

/* 100vw me scrollbar ki chaudai bhi gin li jaati hai (1440 vs 1425), isse
   thoda horizontal overflow ho raha tha. html par bhi clip laga do -
   `clip` scroll container nahi banata, isliye sticky sidebar bhi theek rehta hai. */
html {
    overflow-x: clip;
}

/* ==================================================================
   30. Bottom CTA - footer se alag
   CTA aur footer dono dark the, isliye dono ek hi block lagte the aur
   footer shuru kahan hua pata hi nahi chalta tha. Ab CTA ek alag teal
   card hai jo halke background par baithta hai.
   ================================================================== */
.ff-cta-band {
    background: var(--surface-alt);
    padding: 56px 0;
}

.ff-cta-band::after {
    display: none;
}

.ff-cta-inner {
    background: var(--brand-teal);
    border-radius: var(--radius-lg);
    padding: 42px 44px;
    gap: 28px;
}

.ff-cta-text h2 {
    color: #fff;
}

.ff-cta-text p {
    color: rgba(255, 255, 255, .88);
}

.ff-cta-phone {
    color: #fff !important;
}

.ff-cta-phone:hover {
    color: #142024 !important;
}

/* footer ki shuruaat saaf dikhe */
footer {
    border-top: 4px solid var(--brand-orange);
}

footer p,
footer a,
footer li,
footer span {
    font-size: 14px !important;
}

footer h4, footer h5 {
    font-size: 16px !important;
}

/* About Us: value cards center layout (icon on top, text center) */
.ff-about-values .ff-about-value {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 40px 28px !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.ff-about-values .ff-about-value .col-3,
.ff-about-values .ff-about-value .col-9 {
    width: 100% !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.ff-about-values .ff-about-value .col-3 {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 18px !important;
}

.ff-about-values .ff-about-value .col-3 span {
    margin: 0 auto !important;
}

@media (min-width: 992px) {
    .ff-about-values .row.row-gap-4 {
        padding: 0 20px !important;
    }
}

.ff-about-values .ff-about-value .col-9 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.ff-about-values .ff-about-value h4 {
    text-align: center !important;
}

.ff-about-values .ff-about-value p {
    text-align: center !important;
    text-align-last: center !important;
}

.ff-about-values .ff-about-value p.desc-justify {
    text-align: center !important;
    text-justify: none !important;
}

/* About Us: stats bar full width */
.ff-about-stats-section {
    padding: 0 !important;
}

.ff-about-stats-section .ff-about-stats {
    max-width: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* About Us: best cards spacing + icon center */
.ff-about-best .row-gap-4 {
    row-gap: 0 !important;
}

.ff-about-best .cus-padd {
    padding: 12px !important;
}

.ff-about-best-card .icon-box {
    margin: 0 auto 16px !important;
    justify-content: center !important;
    align-items: center !important;
}

.ff-about-best-card h3 {
    text-align: center !important;
}

/* Homepage value cards: icon left-align with text, space below icon */
.ff-welcome .abt-fab {
    justify-content: flex-start !important;
}

.ff-welcome .abt-fab span {
    margin-bottom: 14px !important;
}

.ff-welcome .row.pt-lg-4 {
    flex-direction: column !important;
    padding-left: 12px !important;
}

.ff-welcome .row.pt-lg-4 .col-3,
.ff-welcome .row.pt-lg-4 .col-9 {
    width: 100% !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
}

@media (min-width: 992px) {
    .ff-welcome .col-lg-6:last-child {
        padding-left: 30px !important;
    }
}

@media (max-width: 767.98px) {
    /* Mobile: value cards need side padding */
    .ff-welcome .col-lg-6:last-child {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Send Enquiry: hide on mobile, show only after scroll past hero */
    .popup-float-btn {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity .3s ease !important;
    }

    .popup-float-btn.show-after-hero {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .ff-cta-band {
        padding: 40px 0;
    }

    .ff-cta-inner {
        padding: 30px 24px;
    }
}

/* ==================================================================
   31. Form submit button - classic
   Popup ki inline <style> premium.css ke baad load hoti hai aur usme
   `justify-content: space-between` hai, isliye text left aur arrow
   bilkul right kinare par chala jaata tha. Ab dono beech me, saath me.
   ================================================================== */
.ff-lead-submit,
.ff-side-form .ff-lead-submit,
.ff-contact-form .ff-lead-submit,
.popup-content .ff-lead-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px 26px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--brand-orange) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .22s var(--ease) !important;
}

.ff-lead-submit:hover {
    background: var(--brand-orange-dark) !important;
}

/* arrow text ke saath rahe aur hover par halka aage khiske */
.ff-lead-submit span {
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    transition: transform .22s var(--ease);
}

.ff-lead-submit:hover span {
    transform: translateX(4px);
}

/* neeche wali privacy line - link jaisi neeli lag rahi thi */
.ff-lead-privacy,
.ff-contact-form .ff-lead-privacy,
.popup-content .ff-lead-privacy {
    color: var(--ink-soft) !important;
    font-size: 12px !important;
    text-align: center !important;
    padding-top: 12px !important;
}

/* inputs sab jagah ek jaise - saaf aur classic */
.ff-lead-form input,
.ff-lead-form textarea,
.ff-lead-form select {
    border-radius: 9px !important;
    border: 1px solid #E2E8EF !important;
    background: #FBFCFD !important;
    font-family: inherit !important;
    color: var(--ink) !important;
    transition: border-color .2s var(--ease), background .2s var(--ease) !important;
}

.ff-lead-form input:focus,
.ff-lead-form textarea:focus {
    outline: none !important;
    border-color: var(--brand-orange) !important;
    background: #fff !important;
}

.ff-lead-form input::placeholder,
.ff-lead-form textarea::placeholder {
    color: #9AA6B2;
}

/* Contact section ke left me ab sirf image (details hata di) -
   image poori height bhare. */
.ff-contact-media {
    padding: 0;
}

.ff-contact-media > img {
    height: 100%;
    min-height: 420px;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .ff-contact-media > img {
        min-height: 240px;
        height: 240px;
    }
}

/* ==================================================================
   32. Blog sidebar - sirf form sticky
   Pehle poora sidebar (form + posts) ek saath sticky tha. Ab form apne
   "sticky zone" ke andar pin rehta hai; zone column ki baaki saari height
   leta hai, isliye form tabhi un-pin hota hai jab article khatam hone ko
   hota hai - aur wahin se "Latest Posts" dikhte hai.
   ================================================================== */
.ff-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* purane sticky wrapper ke rules yahan nahi chahiye */
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

/* zone column ki baaki height le leta hai */
.ff-sticky-zone {
    flex: 1 1 auto;
    min-height: 0;
}

.ff-side-form {
    position: sticky;
    top: 96px;
}

/* posts hamesha neeche, normal flow me */
.ff-side-posts {
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    .ff-sidebar-col {
        padding-top: 28px;
    }

    .ff-sticky-zone {
        flex: 0 0 auto;
    }

    .ff-side-form {
        position: static;
    }
}

/* ==================================================================
   33. Clientele - container me wapas + FAQ se alag
   Full-bleed hata diya (ab container ke andar), marquee ki jagah ek-ek
   slide chalti hai, aur neeche wale FAQ section se saaf separation.
   ================================================================== */
.ff-clientele .clients-wrap {
    width: auto;
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 26px 0 0;
    overflow: hidden;
}

/* marquee wala linear timing hata do - ab normal slide transition */
.parteners .swiper-wrapper {
    transition-timing-function: ease !important;
}

/* ---- sections ke beech ek hi pattern: safed / halka grey alternate ---- */
.ff-clientele {
    background: var(--surface) !important;
    padding-top: 68px;
    padding-bottom: 68px !important;
    border-bottom: 1px solid var(--line);
}

/* FAQ ab halke grey par, taaki Clientele se alag dikhe */
.ff-faq-section,
.ff-faq {
    position: relative;
}

.ff-clientele + section,
section:has(> .container-lg .ff-faq) {
    background: var(--surface-alt);
    padding-top: 68px !important;
    padding-bottom: 68px !important;
}

@media (max-width: 767.98px) {
    .ff-clientele {
        padding-top: 44px;
        padding-bottom: 44px !important;
    }

    .ff-clientele + section,
    section:has(> .container-lg .ff-faq) {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }
}

/* ==================================================================
   34. Navbar links - saaf hover
   Underline (::after) poori tarah hata di - hover aur active dono par.
   Hover: halka grey pill. Active: current URL ke hisaab se (JS set karta hai).
   ================================================================== */
.navbar-nav .nav-link::after {
    display: none !important;
    content: none !important;
}

/* dropdown caret wapas rahe */
.navbar-nav .nav-link.dropdown-toggle::after {
    display: inline-block !important;
    content: "" !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    margin-left: .3em !important;
    vertical-align: .255em !important;
    background: none !important;
    border-top: .3em solid currentColor !important;
    border-right: .3em solid transparent !important;
    border-bottom: 0 !important;
    border-left: .3em solid transparent !important;
    transform: none !important;
}

.navbar-nav .nav-link {
    padding: 10px 16px !important;
    border-radius: 999px;
    color: var(--ink) !important;
    font-weight: 500;
    transition: background .2s var(--ease), color .2s var(--ease) !important;
}

/* hover: sirf halka grey, koi brand colour nahi */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-item:hover > .nav-link {
    background: #F1F3F5 !important;
    color: var(--ink) !important;
}

/* active = current page */
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.active > .nav-link {
    background: #F1F3F5 !important;
    color: var(--brand-teal-dark) !important;
    font-weight: 600;
}

.navbar-nav .nav-link.active:hover {
    background: #E9ECEF !important;
}

header.ff-stuck .navbar-nav .nav-link {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

/* Google mark ab naam ke bajaye stars ke saath */
.ts-stars {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ts-stars .ff-g-mark {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    opacity: 1;
}

.ts-stars > span {
    color: #FBBC05;
    letter-spacing: 2px;
    line-height: 1;
}

/* naam wali row ab sirf avatar + naam */
.ts-left .ff-g-mark {
    display: none;
}

/* ==================================================================
   35. Navbar - sirf text colour badle
   style.css me `.nav-item:hover { background: var(--second-color) }` tha,
   jo <li> ko teal kar deta tha - aur mera grey pill uske upar aata tha,
   isliye kinaron par teal jhalak raha tha. Ab koi background nahi,
   koi pill nahi - hover aur active par sirf text ka rang badalta hai.
   ================================================================== */
.navbar-nav .nav-item,
.navbar-nav .nav-item:hover,
.navbar-nav .nav-item:focus-within {
    background: none !important;
    border-radius: 0 !important;
    color: inherit !important;
}

.navbar-nav .nav-link,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active,
.navbar-nav .nav-item:hover > .nav-link,
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link.active:hover {
    background: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.navbar-nav .nav-link {
    padding: 10px 14px !important;
    color: var(--ink) !important;
    font-weight: 500;
    transition: color .2s var(--ease) !important;
}

/* hover: sirf rang */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-item:hover > .nav-link {
    color: var(--brand-orange) !important;
}

/* active (current page): sirf rang */
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.active > .nav-link {
    color: var(--brand-teal-dark) !important;
    font-weight: 600;
}

.navbar-nav .nav-link.active:hover {
    color: var(--brand-orange) !important;
}

/* Avatar aur naam ek hi line me (pehle avatar upar, naam neeche aa raha tha) */
.ts-card .ts-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100%;
}

.ts-card .ts-left > .d-flex.flex-column {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}

.ts-card .ff-avatar {
    flex: 0 0 auto;
}

.ts-card .ts-author {
    display: block;
    line-height: 1.3;
}

/* Google badge review section ke bilkul neeche, center me */
.ff-google-summary {
    display: flex;
    justify-content: center;
    padding-top: 26px;
    padding-bottom: 0;
}

.ff-slider-nav {
    justify-content: center;
}

/* ==================================================================
   36. Homepage - sections ka background pattern
   Pehle FAQ, Blogs, Contact aur CTA - chaaron lagatar grey the, isliye
   sab ek hi lamba block lagte the. Ab safed/grey alternate chalta hai.
   (Hero aur "Join with FabFrame" image-wale section chhode hai.)
   ================================================================== */
body.page-home > section:nth-of-type(2),   /* Welcome            */
body.page-home > section:nth-of-type(4),   /* What's Your Style? */
body.page-home > section:nth-of-type(7),   /* Customer Reviews   */
body.page-home > section:nth-of-type(9),   /* FAQ                */
body.page-home > section:nth-of-type(11) { /* Contact Us         */
    background: var(--surface) !important;
}

body.page-home > section:nth-of-type(3),   /* Solutions We Provide */
body.page-home > section:nth-of-type(6),   /* Our Gallery          */
body.page-home > section:nth-of-type(8),   /* Our Clientele        */
body.page-home > section:nth-of-type(10),  /* Latest Insights      */
body.page-home > section:nth-of-type(12) { /* Bottom CTA           */
    background: var(--surface-alt) !important;
}

/* har section ko ek jaisi saans mile */
body.page-home > section:nth-of-type(n+2) {
    padding-top: 68px;
    padding-bottom: 68px;
}

/* jo sections apni padding khud sambhalte hai unhe chhod do */
body.page-home > section.ff-welcome,
body.page-home > section.ff-contact,
body.page-home > section.ff-cta-band,
body.page-home > section.ff-clientele {
    padding-top: 68px;
    padding-bottom: 68px !important;
}

/* image wale CTA ka apna layout hai */
body.page-home > section:nth-of-type(5) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
}

@media (max-width: 767.98px) {
    body.page-home > section:nth-of-type(n+2),
    body.page-home > section.ff-welcome,
    body.page-home > section.ff-contact,
    body.page-home > section.ff-cta-band,
    body.page-home > section.ff-clientele {
        padding-top: 44px;
        padding-bottom: 44px !important;
    }
}

/* ==================================================================
   37. Pagination
   Markup CMS deta hai (.pagination > .page-btn) par uski koi styling
   nahi thi - "Prev12Next" chipka hua dikhta tha.
   ================================================================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 36px;
}

.pagination .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}

.pagination a.page-btn:hover {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #fff;
}

.pagination .page-btn.current {
    background: var(--brand-teal);
    border-color: var(--brand-teal);
    color: #fff;
}

.pagination .page-btn.disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

/* CMS font-awesome icons ki jagah CSS chevron (fa load nahi hai) */
.pagination .page-btn i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.pagination .page-btn i.fa-angle-left {
    transform: rotate(135deg);
}

.pagination .page-btn i.fa-angle-right {
    transform: rotate(-45deg);
}

@media (max-width: 575.98px) {
    .pagination .page-btn {
        min-width: 38px;
        height: 38px;
        padding: 0 11px;
        font-size: 13px;
    }
}

/* ==================================================================
   38. Sticky header - kam space, bina jhatke
   Scroll par header me top/bottom space zyada ho jaati thi. Ab compact,
   aur transitions ek jaisi speed par taaki jhatka na lage.
   ================================================================== */
header,
header > .container-lg,
header .navbar,
header .logo,
header .navbar-nav .nav-link {
    transition-duration: .28s !important;
    transition-timing-function: var(--ease) !important;
}

/* top info bar */
header > .container-lg {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

header .navbar {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

header .logo {
    height: 58px;
    width: auto;
    object-fit: contain;
}

/* ---- scroll ke baad ---- */
header.ff-stuck > .container-lg {
    max-height: 0 !important;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

header.ff-stuck .navbar {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

header.ff-stuck .logo {
    height: 46px;
    transform: none;
}

header.ff-stuck .navbar-nav .nav-link {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

header.ff-stuck .ff-header-cta {
    padding-top: 10px;
    padding-bottom: 10px;
}

@media (max-width: 991.98px) {
    header .logo {
        height: 48px;
    }

    header.ff-stuck .logo {
        height: 42px;
    }
}

/* ==================================================================
   39. Active nav link - current URL
   premium.js current URL dekh kar `ff-nav-active` lagata hai.
   Alag class isliye, taaki Bootstrap ki .active ke saath cascade me
   koi takrav na rahe.
   ================================================================== */
header .navbar .navbar-nav .nav-item .nav-link.ff-nav-active,
header .navbar .navbar-nav .nav-link.ff-nav-active {
    color: var(--brand-teal-dark) !important;
    font-weight: 600 !important;
}

header .navbar .navbar-nav .nav-link.ff-nav-active:hover {
    color: var(--brand-orange) !important;
}

/* Literal hex (var ke bajaye) - taaki custom property ki resolution par
   depend na karna pade. */
header .navbar .navbar-nav .nav-link.ff-nav-active,
header .navbar .navbar-nav .nav-item .nav-link.ff-nav-active,
.navbar-nav .nav-link.ff-nav-active {
    color: #3A9AA1 !important;
    font-weight: 600 !important;
}

header .navbar .navbar-nav .nav-link.ff-nav-active:hover,
.navbar-nav .nav-link.ff-nav-active:hover {
    color: #E98220 !important;
}

/* Nav links par colour ki transition hata di.
   Transition hone par browser computed colour ko animate karta hai; kuch
   environments me wo animation chalti hi nahi aur link apne purane rang par
   atka rehta hai (active/hover ka colour lagta hua nahi dikhta).
   Rang ab turant badalta hai. */
header .navbar-nav .nav-link,
.navbar-nav .nav-link {
    transition: none !important;
}

/* ==================================================================
   40. Sticky header - collapse bina transition ke
   Pehle top bar `max-height` ko transition karke band hota tha. Jahan
   transitions na chalein (background tab, embedded view) wahan wo apni
   shuruaati value par atak jaata tha aur header kabhi compact hota hi
   nahi tha. Ab height turant badalti hai, sirf opacity fade hoti hai.
   ================================================================== */
header > .container-lg {
    transition: opacity .2s var(--ease) !important;
    overflow: hidden;
}

header.ff-stuck > .container-lg {
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0;
    visibility: hidden;
}

header .navbar,
header .logo,
header .ff-header-cta {
    transition: none !important;
}

header {
    transition: box-shadow .2s var(--ease) !important;
}