body {
    /* !!! IMPORTANT: Replace 'Your-Exact-Airpay-Font-Family' with the font used on airpay.co.in !!! */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Default fallback */
    line-height: 1.6;
    color: #333; /* Default text color */
    background-color: #f8f9fa; /* Light grey background, same as Airpay hero */
    margin: 0;
}

/* === PRECISE HERO SECTION STYLES (Non-conflicting) === */
.hero-section-precise {
    background-color: #f8f9fa; /* Matches body or can be transparent */
    padding-top: 60px;    /* Adjust based on your actual header height */
    padding-bottom: 60px;
    min-height: 80vh;     /* Make it take considerable viewport height */
    display: flex;
    align-items: center;  /* Vertically center the content row */
    overflow: hidden;     /* Prevent scrollbars from slight overflows */
}

.hero-section-precise .container {
     /* Bootstrap container will handle width and padding */
}

.hero-section-precise .row {
    align-items: center; /* Vertically align content within columns */
}

.hero-content-area-precise .hero-title-precise {
    /* !!! IMPORTANT: Replace 'Your-Exact-Airpay-Font-Family' with the font used on airpay.co.in !!! */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Default fallback */
    font-size: 2.7rem;  /* Matches Airpay screenshot */
    font-weight: 700;   /* Airpay heading looks like weight 600 */
    color: #2c3e50;     /* A common dark, slightly desaturated blue/grey */
    line-height: 1.35;  /* Adjust for visual spacing */
    margin-bottom: 30px;/* Space before button */
}

.hero-content-area-precise .hero-button-precise {
    background-color: #343a40; /* Dark grey from Airpay */
    border: 1px solid #343a40;
    color: #ffffff;
    padding: 12px 35px; /* Adjusted padding for size */
    font-size: 1.05rem; /* Slightly smaller, crisper font */
    /* !!! IMPORTANT: Use Airpay's button font if different !!! */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Default fallback */
    font-weight: 500;
    border-radius: 5px; /* Less rounded like Airpay */
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.hero-content-area-precise .hero-button-precise:hover {
    background-color: #23272b; /* Darken on hover */
    border-color: #1d2124;
    transform: translateY(-2px); /* Slight lift effect */
}

.hero-image-area-precise {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the image within its column */
}

.hero-image-area-precise .hero-visual-precise {
    margin-left: 100px;
    max-width: 100%;
    height: auto;
    /* !!! CRITICAL: Adjust max-height to match Airpay image size on desktop !!! */
    max-height: 430px;
    display: block; /* Remove extra space below image */
    object-fit: contain; /* Ensure image scales down correctly if needed */
}

/* --- Responsive Adjustments for Precise Hero --- */
@media (max-width: 1199.98px) { /* Large Desktops */
    .hero-content-area-precise .hero-title-precise {
        font-size: 2.7rem;
    }
    .hero-image-area-precise .hero-visual-precise {
        max-height: 410px;
    }
}

@media (max-width: 991.98px) { /* Tablets */
    .hero-section-precise {
        padding-top: 40px;
        padding-bottom: 40px;
        min-height: auto; /* Let content flow */
    }
    .hero-content-area-precise {
        text-align: center; /* Center text on tablets when stacked */
        order: 2; /* Text below image */
        margin-top: 30px; /* Space when stacked */
    }
     .hero-image-area-precise {
        order: 1; /* Image on top when stacked */
    }
    .hero-content-area-precise .hero-title-precise {
        font-size: 2.4rem;
    }
    .hero-image-area-precise .hero-visual-precise {
        max-height: 370px;
        margin: 0 auto;
    }
}

@media (max-width: 767.98px) { /* Mobile */
    .hero-content-area-precise .hero-title-precise {
        font-size: 2.1rem;
    }
    .hero-content-area-precise .hero-button-precise {
        padding: 10px 30px;
        font-size: 1rem;
    }
    .hero-image-area-precise .hero-visual-precise {
        max-height: 330px;
    }
}
@media (max-width: 575.98px) { /* Small Mobile */
    .hero-section-precise {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .hero-content-area-precise .hero-title-precise {
        font-size: 1.9rem;
        line-height: 1.4;
    }
     .hero-image-area-precise .hero-visual-precise {
        max-height: 290px;
    }
}

/* --- Styles for the section with curved top (e.g., About Us) --- */
.content-starts-with-curve {
    background-color: #ffffff; /* White for content area */
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
    padding-top: 60px;
    margin-top: -35px; /* Should match border-radius for smooth curve */
    position: relative;
    z-index: 10;
}

 /*education section */
 /* ============================================= */
/* == Education Showcase Section Styles == */
/* ============================================= */
/* ============================================= */
/* == Education Showcase Section Styles (REFINED) == */
/* ============================================= */
.edu-feature-outer-section {
    padding-top: 60px; /* Section ke upar ka space */
    padding-bottom: 60px; /* Section ke neeche ka space */
    background-color: #f8f9fa; /* Original screenshot jaisa section background */
}

.edu-feature-inner-card {
    background-color: #ffffff; /* Inner box ka white background */
    padding: 50px 55px;    /* Padding original jaisi: ~50px top/bottom, ~55px left/right */
    border-radius: 24px; /* Original jaisa rounded corner */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); /* Subtle shadow */
}

.edu-feature-text-content {
    /* Text content ke liye specific adjustments agar zaroori ho */
}

.edu-feature-header {
    display: flex;
    align-items: center;
    margin-bottom: 22px; /* Header aur description ke beech ka space */
}

.edu-feature-icon {
    font-size: 2.7rem;  /* Icon ka size */
    color: #007bff;   /* Icon ka color (aapke brand ka primary color) */
    margin-right: 15px; /* Icon aur title ke beech space */
}

.edu-feature-title {
    /* !!! IMPORTANT: 'Your-Exact-Airpay-Font-Family' ko Airpay wale font se replace karein !!! */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fallback */
    font-size: 2.4rem;  /* Title ka size original jaisa */
    font-weight: 700;   /* Title ka font weight */
    color: #212529;     /* Title ka dark color */
    margin-bottom: 0;
}

.edu-feature-description-main {
    /* !!! IMPORTANT: Font family check karein !!! */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fallback */
    font-size: 1.05rem; /* Description ka font size */
    line-height: 1.75;  /* Line height thodi zyada */
    color: #343a40;     /* Description ka text color */
    margin-bottom: 15px;
}

.edu-feature-description-sub {
    /* !!! IMPORTANT: Font family check karein !!! */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fallback */
    font-size: 0.9rem;   /* Chhota sub-description */
    color: #525c65;      /* Sub-description ka lighter color */
    line-height: 1.7;
    margin-bottom: 30px; /* Button se pehle space */
}

.edu-feature-button-knowmore {
    background-color: #212529; /* Button ka dark background */
    border: 1px solid #212529;
    color: #ffffff;
    padding: 11px 28px; /* Button ki padding original jaisi */
    font-size: 0.95rem;
    /* !!! IMPORTANT: Font family check karein !!! */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fallback */
    font-weight: 500;
    border-radius: 7px;  /* Button ka border radius original jaisa */
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.edu-feature-button-knowmore:hover {
    background-color: #343a40;
    border-color: #343a40;
    transform: translateY(-2px);
}

.edu-feature-image-area {
    position: relative; /* Character images iske relative position honge */
    width: 100%;
    display: flex; /* Agar image ko horizontally center karna ho column mein */
    justify-content: flex-end; /* Image ko right side push karega (agar column bada hai) */
    align-items: center;
}

.edu-feature-mockup-main {
    max-width: 100%; /* Image column ki width se zyada na ho */
    width: auto;     /* Actual width image ki hogi ya max-width tak */
    height: auto;
    /* max-height: 450px; /* Agar image bahut lambi hai toh control ke liye */
    display: block;
    border-radius: 10px; /* Mockup image ke corners (agar image mein nahin hain) */
    box-shadow: 0 12px 30px rgba(0,0,0,0.08); /* Mockup par shadow */
    z-index: 10; /* Layering ke liye */
}

.edu-feature-character {
    position: absolute;
    border-radius: 50%;
    object-fit: cover;
    z-index: 20; /* Mockup ke upar */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Character par halka shadow */
}

.edu-feature-char-top-right {
    width: 105px;  /* Character ka size */
    height: 105px;
    /* !!! IMPORTANT: Ye values original screenshot se match karne ke liye adjust karein !!! */
    top: -40px;
    right: 40px; /* Mockup ke right edge se kitna door */
}

.edu-feature-char-bottom-left {
    width: 95px;   /* Character ka size */
    height: 95px;
    /* !!! IMPORTANT: Ye values original screenshot se match karne ke liye adjust karein !!! */
    bottom: -35px;
    left: -25px; /* Mockup ke left edge se kitna door (ya column ke edge se) */
}

/* --- Responsive Adjustments for Education Feature Section --- */
@media (max-width: 991.98px) { /* Tablets */
    .edu-feature-inner-card {
        padding: 40px;
        text-align: center;
    }
    .edu-feature-header {
        justify-content: center;
    }
    .edu-feature-title {
        font-size: 2.1rem;
    }
    .edu-feature-description-main {
        font-size: 1rem;
    }
    .edu-feature-image-area {
        margin-top: 40px;
        justify-content: center; /* Image ko center karega jab stack hoga */
    }
    .edu-feature-mockup-main {
        max-width: 90%; /* Tablet par thoda chhota */
    }
    .edu-feature-char-top-right {
        width: 90px; height: 90px;
        top: -30px; right: 10%; /* Percentage mein position taaki mockup ke relative rahe */
    }
    .edu-feature-char-bottom-left {
        width: 80px; height: 80px;
        bottom: -25px; left: 5%;
    }
}

@media (max-width: 767.98px) { /* Mobile */
    .edu-feature-inner-card {
        padding: 30px 20px;
    }
    .edu-feature-icon {
        font-size: 2.4rem;
    }
    .edu-feature-title {
        font-size: 1.9rem;
    }
    .edu-feature-mockup-main {
        max-width: 100%; /* Mobile par poori width le sakta hai */
    }
    .edu-feature-char-top-right {
        width: 80px; height: 80px;
        top: -25px; right: 5%;
    }
    .edu-feature-char-bottom-left {
        width: 70px; height: 70px;
        bottom: -20px; left: 2%;
    }
}


/* ======================================================== */
/* == PRECISE INDUSTRY SOLUTIONS SECTION STYLES (FINAL) == */
/* ======================================================== */
.detailed-industry-cards-section .container {
    max-width: 1100px;
}
.detailed-industry-cards-section {
   
    padding-top: 70px;
    padding-bottom: 70px;
    background-color: #f0f2f5; /* Light grey page background as per Airpay screenshot */
}

.detailed-industry-card {
    background-color: #ffffff;
    border-radius: 20px; /* Original jaisa 18px se thoda zyada rounded */
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.065); /* Thodi si refined shadow */
    /* MODIFICATION: Card ke andar vertical padding badhayenge */
    padding: 35px 70px; /* top/bottom padding increased, left/right same */
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.detailed-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.detailed-card-icon {
    height: 24px; /* Adjust to match Airpay icon size */
    width: auto;
    margin-right: 10px;
}

.detailed-card-title {
    /* !!! IMPORTANT: Use Airpay's exact font family !!! */
    font-family: 'Your-Exact-Airpay-Font-Family', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.6rem; /* Adjust to match Airpay */
    font-weight: 700;
    color: #1c1e21;
    margin-bottom: 0;
    line-height: 1.2;
}

.detailed-card-body {
    flex-grow: 1; /* Allows this section to push visuals down */
    display: flex;
    flex-direction: column;
}

.detailed-card-description-lead {
    /* !!! IMPORTANT: Use Airpay's exact font family !!! */
    font-family: 'Your-Exact-Airpay-Font-Family', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.9rem; /* Thoda sa bada */
    color: #282c34; /* Thoda darker */
    line-height: 1.55;
    margin-bottom: 10px;;
}

.detailed-card-description-sub {
    /* !!! IMPORTANT: Use Airpay's exact font family !!! */
    font-family: 'Your-Exact-Airpay-Font-Family', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.825rem; /* Thoda sa bada */
    color: #555b66;
    line-height: 1.55; /* Consistent line height */
    margin-bottom: 25px; /* Zyada space button se pehle */
    flex-grow: 1; 

}

.detailed-card-button {
    background-color: #222529;
    border: none;
    color: #ffffff;
    padding: 9px 24px; /* Thoda refined padding */
    font-size: 0.85rem; /* Thoda refined */
    font-family: 'Your-Exact-Airpay-Font-Family', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    width: auto;
    align-self: flex-start;
    transition: background-color 0.2s ease, transform 0.15s ease;
    /* margin-bottom: 20px; /* This space will now be handled by .detailed-card-visuals padding-top */
}
.detailed-card-button:hover {
    background-color: #343a40;
    transform: translateY(-1px);
}

.detailed-card-visuals {
    position: relative; /* For absolute positioning of items inside */
    width: 100%;
    margin-top: auto; /* Pushes this to the bottom */
    min-height: 180px; /* Adjust based on your image content */
    padding-top: 25px; /* Some space above visuals */
}

/* --- Hospitality Card Visuals --- */
.hospitality-visuals {
    display: flex;
    align-items: flex-end; /* POS at bottom */
    justify-content: flex-start; /* Align to left, receipt will push it */
    
}
.hospitality-pos-image {
    max-width: 253px; /* Adjust to Airpay POS size */
    width: 84%;
    height: auto;
    display: block;
    position: relative;
    z-index: 5;
    margin-right: -75px; /* Negative margin to pull receipt image over it */
}
.hospitality-receipt-image {
    width: 183px; /* Adjust receipt size */
    height: auto;
    position: relative;
    z-index: 10; /* Above POS */
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    border-radius: 6px;
    margin-bottom: 5px; /* Lift from bottom of visual area */
}

/* --- Retail Card Visuals --- */
.retail-visuals {
    /* min-height will be inherited or adjusted */
}
.retail-bg-shape { /* For the blue circular gradients */
    position: absolute;
    border-radius: 50%;
    opacity: 0.07; /* Slightly less opacity */
    z-index: 1;
}
.retail-bg-shape-1 { /* Largest, behind phone and QR */
    width: 150px; /* Adjusted */
    height: 150px;
    background-color: #a8d8ff;
    top: 15px; /* Adjusted */
    left: 50%;
    transform: translateX(-45%); /* Adjusted */
}
.retail-bg-shape-2 { /* Medium, behind card */
    width: 90px; /* Adjusted */
    height: 90px;
    background-color: #c0e4ff;
    bottom: 35px; /* Adjusted */
    left: 12%; /* Adjusted */
}
.retail-bg-shape-3 { /* Small, near mini POS */
    width: 65px; /* Adjusted */
    height: 65px;
    background-color: #d8efff;
    bottom: 15px; /* Adjusted */
    right: 8%; /* Adjusted */
}

.retail-item-image {
    position: absolute;
    height: auto;
    filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.1));
    z-index: 5;
}
.retail-phone {
    /* !!! CRITICAL: Adjust width and ALL positioning values using DevTools !!! */
    width: 161px;
    top: -27px;
    left: 46%;
    transform: translateX(-50%) rotate(-1deg);
    z-index: 15;
}
.retail-qr {
    width: 90px;
    top: -30px;
    left: 84%;
    transform: translateX(-50%) rotate(5deg);
    z-index: 10;

}
.retail-card {
   
    width: 94px;
    bottom: 40px;
    left: -1%;
    transform: rotate(-12deg);
    z-index: 20;
    border-radius: 3px;
}
.retail-mini-pos {
    width: 125px;
    bottom: -25px;
    right: -4px;
    transform: rotate(12deg);
    z-index: 5;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1199.98px) { /* lg breakpoint */
    .detailed-industry-cards-section .container {
        max-width: 960px; /* Further reduce container for lg screens */
    }
    .detailed-card-title { font-size: 1.5rem; }
    .hospitality-pos-image { max-width: 210px; margin-right: -65px; }
    .hospitality-receipt-image { width: 150px; }

    .retail-bg-shape-1 { width: 130px; height: 130px; }
    .retail-phone { width: 58px; }
    .retail-qr { width: 68px; }
    .retail-card { width: 72px; }
    .retail-mini-pos { width: 90px; }
}
@media (max-width: 991.98px) { /* md breakpoint (when cards stack) */
    .detailed-industry-cards-section .container {
        max-width: 720px; /* Bootstrap's md container width */
    }
    .detailed-industry-card:not(:last-child) {
        margin-bottom: 30px;
    }
    .detailed-card-visuals { min-height: 180px; padding-top: 20px; } 
    
    .hospitality-visuals { justify-content: center; }
    .hospitality-pos-image { margin-right: -50px; max-width: 190px; }
    .hospitality-receipt-image { width: 135px; }

    .retail-visuals { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding-top: 15px;}
    .retail-item-image { position: relative; transform: none; margin: 5px 8px; } /* Stack retail items simply */
    .retail-bg-shape { display: none; } /* Hide bg shapes for simplicity on tablet stack */
}

@media (max-width: 767.98px) { /* sm breakpoint */
    .detailed-industry-cards-section .container {
        max-width: 540px; /* Bootstrap's sm container width */
    }
    .detailed-industry-cards-section { padding-top: 40px; padding-bottom: 40px; }
    .detailed-industry-card { padding: 25px 20px; } /* Uniform padding */
    .detailed-card-title { font-size: 1.35rem; }
    .detailed-card-description-lead { font-size: 0.85rem; }
    .detailed-card-description-sub { font-size: 0.775rem; }
    .detailed-card-button { padding: 8px 18px; font-size: 0.8rem; }
    
    .hospitality-visuals { flex-direction: column; align-items: center; }
    .hospitality-pos-image { margin-right: 0; margin-bottom: -20px; max-width: 170px; }
    .hospitality-receipt-image { margin-left: 0; width: 130px; }

    .detailed-card-visuals { min-height: auto; } /* Let content define height */
    .retail-visuals { min-height: auto; padding-bottom: 10px; }
    .retail-item-image { margin: 5px; }
    .retail-phone { width: 55px; }
    .retail-qr { width: 65px; }
    .retail-card { width: 70px; }
    .retail-mini-pos { width: 90px; }
}

.bfsi-feature-section-precise {
    padding-top: 70px;
    padding-bottom: 70px;
    background-color: #f0f2f5; /* Page background as per Airpay screenshot */
    /* background-color: #e9eef2; /* Slightly different shade if needed */
}

.bfsi-inner-card-precise {
    background-color: #ffffff;
    border-radius: 20px; /* Match Airpay card radius */
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.07); /* Match Airpay shadow */
    padding: 40px 35px; /* Overall padding, adjust L/R if needed */
    overflow: hidden; /* To contain positioned elements */
}

/* --- Left Column: Mobile Mockup --- */
.bfsi-mobile-mockup-area {
    position: relative; /* For absolute positioning of the bubble */
    display: flex;
    justify-content: center; /* Center the mobile image if column is wider */
    align-items: center;
    padding: 10px; /* Some breathing room for the mockup */
}

.bfsi-mobile-img-precise {
    max-width: 320px; /* Adjust to match original mobile size, e.g., homeSec1-mob.png is 342px wide */
    width: 100%; /* Responsive within its cap */
    height: auto;
    display: block;
    /* filter: drop-shadow(0px 8px 20px rgba(0,0,0,0.15)); /* Mobile shadow */
}

.bfsi-notification-bubble-img-precise {
    position: absolute;
    /* !!! CRITICAL: Adjust width and ALL positioning values using DevTools !!! */
    width: 240px; /* Adjust to match original bubble size */
    height: auto;
    bottom: 8%;  /* Percentage from bottom of mobile image area */
    right: -5%; /* Percentage from right, or fixed px. Negative to overlap and go out a bit */
    z-index: 10; /* Above mobile image */
    filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.12));
}

/* --- Right Column: Text Content --- */
.bfsi-text-content-precise {
    padding-left: 15px; /* Space from the mobile image */
}

.bfsi-header-precise {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.bfsi-icon-img-precise {
    height: 28px; /* Adjust icon size */
    width: auto;
    margin-right: 12px;
}

.bfsi-title-precise {
    /* !!! IMPORTANT: Use Airpay's exact font family !!! */
    font-family: 'Your-Exact-Airpay-Font-Family', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.75rem; /* Adjust to match */
    font-weight: 700;
    color: #1c1e21;
    margin-bottom: 0;
    line-height: 1.2;
}

.bfsi-question-text-precise {
    /* !!! IMPORTANT: Use Airpay's exact font family !!! */
    font-family: 'Your-Exact-Airpay-Font-Family', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.1rem; /* Larger question text */
    font-weight: 600; /* Semi-bold */
    color: #1c1e21;
    line-height: 1.45;
    margin-bottom: 12px;
}

.bfsi-description-text-precise {
    /* !!! IMPORTANT: Use Airpay's exact font family !!! */
    font-family: 'Your-Exact-Airpay-Font-Family', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.875rem; /* Approx 14px */
    color: #495057; /* Softer grey */
    line-height: 1.6;
    margin-bottom: 25px;
}

.bfsi-button-precise {
    background-color: #222529; /* Dark button */
    border: none;
    color: #ffffff;
    padding: 9px 24px;
    font-size: 0.85rem;
    /* !!! IMPORTANT: Use Airpay's exact font family if specific for button !!! */
    font-family: 'Your-Exact-Airpay-Font-Family', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease, transform 0.15s ease;
}
.bfsi-button-precise:hover {
    background-color: #343a40;
    transform: translateY(-1px);
}


/* --- Responsive Adjustments for BFSI Section --- */
@media (max-width: 991.98px) { /* Tablets - Content stacks */
    .bfsi-inner-card-precise {
        padding: 30px 25px;
    }
    .bfsi-mobile-mockup-area {
        margin-bottom: 30px; /* Space when mobile is on top */
        padding: 0; /* Remove padding to use full width */
    }
    .bfsi-mobile-img-precise {
        max-width: 280px; /* Slightly smaller mobile on tablet */
        margin: 0 auto; /* Center the mobile */
    }
    .bfsi-notification-bubble-img-precise {
        width: 200px; /* Smaller bubble */
        bottom: 5%;
        /* Recenter the bubble relative to the centered mobile image */
        left: 50%; 
        transform: translateX(10%); /* Adjust this to position it to the right of mobile's center */
        right: auto; /* Override fixed right */
    }
    .bfsi-text-content-precise {
        padding-left: 0; /* No left padding when stacked */
        text-align: center; /* Center text */
    }
    .bfsi-header-precise {
        justify-content: center; /* Center icon and title */
    }
    .bfsi-button-precise {
        margin: 0 auto; /* Center button */
    }
}

@media (max-width: 767.98px) { /* Mobile */
    .bfsi-feature-section-precise {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .bfsi-inner-card-precise {
        padding: 25px 20px;
    }
    .bfsi-title-precise { font-size: 1.6rem; }
    .bfsi-question-text-precise { font-size: 1rem; }
    .bfsi-description-text-precise { font-size: 0.825rem; }

    .bfsi-mobile-img-precise {
        max-width: 260px;
    }
    .bfsi-notification-bubble-img-precise {
        width: 180px;
        bottom: 3%;
        transform: translateX(5%);
    }
}



.fi-inner-card-precise {
    background-color: #f6f1f1;
    padding: 40px 35px; /* Overall padding */
    overflow: hidden; 
}

/* --- Left Column: Text Content --- */
.fi-text-content-precise {
    /* padding-right: 15px; /* Space from the visual area on larger screens */
}

.fi-header-precise {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.fi-icon-img-precise {
    height: 28px; /* Adjust icon size to match Airpay */
    width: auto;
    margin-right: 12px;
}

.fi-title-precise {
    /* !!! IMPORTANT: Use Airpay's exact font family !!! */
    font-family: 'Your-Exact-Airpay-Font-Family', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.8rem; /* Adjust to match Airpay */
    font-weight: 700;
    color: #1c1e21;
    margin-bottom: 0;
    line-height: 1.2;
}

.fi-description-lead-precise {
    /* !!! IMPORTANT: Use Airpay's exact font family !!! */
    font-family: 'Your-Exact-Airpay-Font-Family', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.05rem; /* Larger lead text */
    font-weight: 600; /* Semi-bold */
    color: #212529;
    line-height: 1.45;
    margin-bottom: 10px;
}

.fi-description-main-precise,
.fi-description-sub-precise {
    /* !!! IMPORTANT: Use Airpay's exact font family !!! */
    font-family: 'Your-Exact-Airpay-Font-Family', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.875rem; /* Approx 14px */
    color: #495057; /* Softer grey */
    line-height: 1.6;
    margin-bottom: 10px;
}
.fi-description-sub-precise {
    margin-bottom: 25px; /* More space before button */
}


.fi-button-precise {
    background-color: #222529; /* Dark button */
    border: none;
    color: #ffffff;
    padding: 9px 24px;
    font-size: 0.85rem;
    /* !!! IMPORTANT: Use Airpay's exact font family if specific for button !!! */
    font-family: 'Your-Exact-Airpay-Font-Family', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease, transform 0.15s ease;
}
.fi-button-precise:hover {
    background-color: #343a40;
    transform: translateY(-1px);
}

/* --- Right Column: Visual Area --- */
.fi-visual-area-precise {
    position: relative;
    display: flex;
    justify-content: center; /* Center the mobile if column is wider */
    align-items: center; /* Vertically align items if needed */
    min-height: 450px; /* Give enough space for mobile and device, adjust this */
    padding: 10px;
}

.fi-mobile-img-precise {
    max-width: 238px; /* Adjust to match original mobile size relative to its container */
    width: 100%;     /* Make it responsive but capped by max-width */
    height: auto;
    display: block;
    position: relative; /* For z-index stacking */
    z-index: 10;
    /* filter: drop-shadow(0px 6px 15px rgba(0,0,0,0.12)); /* Softer shadow */
}

.fi-scan-overlay-img-precise {
    position: absolute;
    width: 130px;
    height: auto;
    top: 35%;
    left: 52%;
    transform: translate(-50%, -50%);
    z-index: 15;
    filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.1));
}

.fi-device-img-precise {
    position: absolute;
    /* !!! CRITICAL: Adjust width and ALL positioning values using DevTools !!! */
    width: 110px; /* Adjust device size */
    height: auto;
    bottom: 5%;  /* Percentage from bottom */
    right: 0%;   /* Percentage from right, or fixed px if needed */
    transform: rotate(5deg); /* Slight rotation if present */
    z-index: 20; /* Potentially above scan overlay or mobile depending on exact overlap */
    filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.15));
}


/* --- Responsive Adjustments for Financial Institutions Section --- */
@media (max-width: 991.98px) { /* Tablets - Content stacks */
    .fi-inner-card-precise {
        padding: 30px 25px;
    }
    .fi-visual-area-precise {
        min-height: auto; /* Let content define height */
        margin-top: 30px; /* Space when visual area is below text */
        padding-bottom: 120px; /* Extra space at bottom for device img */
    }
    .fi-mobile-img-precise {
        max-width: 240px; /* Slightly smaller mobile on tablet */
        margin: 0 auto; /* Center the mobile */
    }
    .fi-scan-overlay-img-precise {
        width: 110px; /* Smaller overlay */
        /* Recenter the overlay relative to the centered mobile image */
        left: 50%; 
        top: 50%; /* Adjust Y position relative to mobile */
        transform: translate(30%, -60%); /* (X offset, Y offset) from mobile center */
    }
    .fi-device-img-precise {
        width: 90px;
        /* Position device relative to centered mobile */
        bottom: 0; /* At the bottom of the visual area */
        left: 50%;
        transform: translateX(40%) rotate(5deg); /* Offset to the right of mobile's center */
        right: auto;
    }
    .fi-text-content-precise {
        /* padding-right: 0; */
        text-align: center;
    }
    .fi-header-precise {
        justify-content: center;
    }
    .fi-button-precise {
        margin: 0 auto; /* Center button */
    }
}

@media (max-width: 767.98px) { /* Mobile */
    .fi-feature-section-precise {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .fi-inner-card-precise {
        padding: 25px 20px;
    }
    .fi-title-precise { font-size: 1.6rem; }
    .fi-description-lead-precise { font-size: 0.95rem; }
    .fi-description-main-precise, .fi-description-sub-precise { font-size: 0.825rem; }

    .fi-visual-area-precise {
        padding-bottom: 100px; /* Adjust space for device */
    }
    .fi-mobile-img-precise {
        max-width: 220px;
    }
    .fi-scan-overlay-img-precise {
        width: 100px;
        transform: translate(25%, -65%);
    }
    .fi-device-img-precise {
        width: 80px;
        transform: translateX(35%) rotate(5deg);
    }
}
@media (max-width: 991.98px) { /* Tablets - Content stacks */
    .fi-inner-card-precise { padding: 30px 25px; }
    .fi-visual-area-precise { margin-top: 30px; min-height: auto; padding-bottom: 100px; } /* Reduced min-height, added padding for device */
    .fi-mobile-img-precise { max-width: 240px; margin: 0 auto; }
    .fi-scan-overlay-img-precise { width: 110px; top: 50%; left: 50%; transform: translate(35%, -60%);}
    .fi-device-img-precise { width: 85px; bottom: 0; left: 50%; transform: translateX(45%) rotate(5deg); right:auto;}
    .fi-text-content-precise { text-align: center; }
    .fi-header-precise { justify-content: center; }
    .fi-button-precise { margin: 0 auto; }
}

@media (max-width: 767.98px) { /* Mobile */
    .fi-feature-section-precise { padding-top: 50px; padding-bottom: 50px; }
    .fi-inner-card-precise { padding: 25px 20px; }
    .fi-title-precise { font-size: 1.6rem; }
    .fi-description-lead-precise { font-size: 0.95rem; }
    .fi-description-main-precise, .fi-description-sub-precise { font-size: 0.825rem; }
    .fi-visual-area-precise { padding-bottom: 80px; }
    .fi-mobile-img-precise { max-width: 200px; }
    .fi-scan-overlay-img-precise { width: 90px; transform: translate(25%, -65%); }
    .fi-device-img-precise { width: 75px; transform: translateX(40%) rotate(5deg); }
}